/* ============ semantic tokens ============ */
  :root {
    --primary:      #0F172A;
    --secondary:    #334155;
    --accent:       #0369A1;
    --accent-hover: #075985;
    --on-accent:    #FFFFFF;
    --bg:           #F8FAFC;
    --surface:      #FFFFFF;
    --surface-2:    #EEF2F7;
    --fg:           #020617;
    --fg-2:         #334155;
    --fg-muted:     #5B6B80;
    --border:       #E2E8F0;
    --border-str:   #CBD5E1;
    --success:      #15803D;
    --danger:       #DC2626;

    /* data colors, taken from the scheduler's own sheet */
    --weekend:      #DEE7F6;
    --weekend-fg:   #1E3A6B;
    --holiday:      #FBEFD5;
    --holiday-fg:   #8A5A0B;

    --ring: 0 0 0 3px rgba(3, 105, 161, .35);
    --sh-1: 0 1px 2px rgba(2, 6, 23, .05);
    --sh-2: 0 1px 3px rgba(2, 6, 23, .06), 0 10px 28px rgba(2, 6, 23, .06);

    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s6:1.5rem;
    --s8:2rem; --s12:3rem; --s16:4rem; --s24:6rem;

    --measure: 66ch;
    --gutter: clamp(1.25rem, 5vw, 2.5rem);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --primary:#E2E8F0; --secondary:#94A3B8;
      --accent:#38A3DC; --accent-hover:#5CB8E8; --on-accent:#04202F;
      --bg:#0B1220; --surface:#121C2C; --surface-2:#18243A;
      --fg:#E8EEF7; --fg-2:#C3CFDF; --fg-muted:#8A9BB2;
      --border:#22304A; --border-str:#33445F;
      --success:#4ADE80; --danger:#F87171;
      --weekend:#1B2942; --weekend-fg:#9FC0F0;
      --holiday:#33280F; --holiday-fg:#E3BE6E;
      --ring: 0 0 0 3px rgba(56,163,220,.4);
      --sh-1: 0 1px 2px rgba(0,0,0,.4);
      --sh-2: 0 1px 3px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"] {
    --primary:#E2E8F0; --secondary:#94A3B8;
    --accent:#38A3DC; --accent-hover:#5CB8E8; --on-accent:#04202F;
    --bg:#0B1220; --surface:#121C2C; --surface-2:#18243A;
    --fg:#E8EEF7; --fg-2:#C3CFDF; --fg-muted:#8A9BB2;
    --border:#22304A; --border-str:#33445F;
    --success:#4ADE80; --danger:#F87171;
    --weekend:#1B2942; --weekend-fg:#9FC0F0;
    --holiday:#33280F; --holiday-fg:#E3BE6E;
    --ring: 0 0 0 3px rgba(56,163,220,.4);
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 1px 3px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.35);
  }
  :root[data-theme="light"] {
    --primary:#0F172A; --secondary:#334155;
    --accent:#0369A1; --accent-hover:#075985; --on-accent:#FFFFFF;
    --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#EEF2F7;
    --fg:#020617; --fg-2:#334155; --fg-muted:#5B6B80;
    --border:#E2E8F0; --border-str:#CBD5E1;
    --success:#15803D; --danger:#DC2626;
    --weekend:#DEE7F6; --weekend-fg:#1E3A6B;
    --holiday:#FBEFD5; --holiday-fg:#8A5A0B;
    --ring: 0 0 0 3px rgba(3,105,161,.35);
    --sh-1: 0 1px 2px rgba(2,6,23,.05);
    --sh-2: 0 1px 3px rgba(2,6,23,.06), 0 10px 28px rgba(2,6,23,.06);
  }

  body { background: var(--bg); color: var(--fg); font-family: var(--sans);
         font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  .wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); }
  :where(a, button, [tabindex]):focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

  /* ============ nav ============ */
  .nav { position: sticky; top: 0; z-index: 100;
         background: color-mix(in srgb, var(--bg) 90%, transparent);
         backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
  .nav-in { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; padding-block: var(--s3); }
  .logo { display: flex; align-items: center; gap: var(--s2); margin-right: auto;
          font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; color: var(--fg); }
  .logo svg { color: var(--accent); flex: none; }
  .tabs { display: flex; gap: var(--s1); flex-wrap: wrap; }
  .tab { font: inherit; font-size: .9rem; font-weight: 500; color: var(--fg-muted);
         background: none; border: 0; cursor: pointer; border-radius: 7px;
         min-height: 44px; padding-inline: var(--s3);
         transition: color .18s ease, background .18s ease; }
  .tab:hover { color: var(--fg); background: var(--surface-2); }
  .tab[aria-selected="true"] { color: var(--accent); background: var(--surface-2); font-weight: 650; }

  /* ============ panels & type ============ */
  .panel { display: none; }
  .panel.on { display: block; }
  .sec { padding-block: clamp(2.75rem, 7vw, var(--s24)); }
  .sec + .sec { border-top: 1px solid var(--border); }

  h1,h2,h3 { color: var(--fg); text-wrap: balance; letter-spacing: -.028em; line-height: 1.1; }
  h1 { font-size: clamp(2.15rem, 5.2vw, 3.4rem); font-weight: 750; }
  h2 { font-size: clamp(1.55rem, 3.2vw, 2.15rem); font-weight: 700; margin-bottom: var(--s3); }
  h3 { font-size: 1.05rem; font-weight: 650; letter-spacing: -.012em; line-height: 1.35; }
  p  { max-width: var(--measure); }
  .lede { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--fg-2); max-width: 58ch; }
  .kicker { font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .14em;
            text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3); }
  .muted { color: var(--fg-muted); }
  .small { font-size: .875rem; }

  /* ============ buttons ============ */
  .btn { font: inherit; font-size: .95rem; font-weight: 650; cursor: pointer;
         min-height: 44px; padding-inline: 1.25rem; border-radius: 8px;
         border: 1px solid transparent; display: inline-flex; align-items: center; gap: var(--s2);
         transition: background .18s ease, border-color .18s ease, color .18s ease; }
  .btn-primary { background: var(--accent); color: var(--on-accent); }
  .btn-primary:hover { background: var(--accent-hover); }
  .btn-ghost { background: var(--surface); color: var(--fg); border-color: var(--border-str); }
  .btn-ghost:hover { background: var(--surface-2); }
  .btns { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }

  /* ============ hero ============ */
  .hero { display: grid; gap: var(--s12); align-items: center; }
  @media (min-width: 960px) { .hero { grid-template-columns: 1fr 1fr; gap: var(--s16); } }

  /* ============ schedule grid ============ */
  .sheet { border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
           background: var(--surface); box-shadow: var(--sh-2); }
  .sheet-hd { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4);
              border-bottom: 1px solid var(--border); background: var(--surface-2);
              font-family: var(--mono); font-size: .72rem; color: var(--fg-muted); letter-spacing: .05em; }
  .sheet-hd svg { color: var(--fg-muted); }
  .sheet-body { overflow-x: auto; }
  table.g { border-collapse: collapse; width: 100%; font-size: .8rem; }
  table.g caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.g th { text-align: left; font-size: .68rem; font-weight: 650; letter-spacing: .1em;
               text-transform: uppercase; color: var(--fg-muted); white-space: nowrap;
               padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
  table.g td { padding: .4rem var(--s4); white-space: nowrap; font-variant-numeric: tabular-nums;
               border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
  table.g tr:last-child td { border-bottom: 0; }
  tr.we td { background: var(--weekend); color: var(--weekend-fg); }
  tr.hd td { background: var(--holiday); color: var(--holiday-fg); }
  td.who { font-weight: 650; font-family: var(--mono); }
  td.hol { font-size: .72rem; }
  .key { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s3); font-size: .8rem; color: var(--fg-muted); }
  .key i { width: .85rem; height: .85rem; border-radius: 3px; display: inline-block;
           vertical-align: -1px; margin-right: var(--s1); border: 1px solid var(--border-str); }

  /* ============ trust strip ============ */
  .trust { display: grid; gap: var(--s3); grid-template-columns: 1fr; margin-top: var(--s8); }
  @media (min-width: 640px) { .trust { grid-template-columns: repeat(3, 1fr); } }
  .badge { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4);
           border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
  .badge svg { color: var(--accent); flex: none; margin-top: 2px; }
  .badge b { display: block; font-size: .92rem; font-weight: 650; }
  .badge span { font-size: .84rem; color: var(--fg-muted); line-height: 1.45; }

  /* ============ stats ============ */
  .stats { display: grid; gap: var(--s6); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 820px) { .stats { grid-template-columns: repeat(4, 1fr); } }
  .stat b { display: block; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 750;
            letter-spacing: -.035em; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
  .stat span { display: block; font-size: .87rem; color: var(--fg-muted); margin-top: var(--s2); max-width: 22ch; }

  /* ============ cards & rules ============ */
  .cards { display: grid; gap: var(--s4); grid-template-columns: 1fr; margin-top: var(--s8); }
  @media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); } }
  .card { border: 1px solid var(--border); border-radius: 10px; padding: var(--s6);
          background: var(--surface); display: flex; flex-direction: column; gap: var(--s2); }
  .card svg { color: var(--accent); }
  .card p { font-size: .93rem; color: var(--fg-2); margin: 0; }

  .list { margin-top: var(--s6); border-top: 1px solid var(--border); }
  .row { border-bottom: 1px solid var(--border); padding-block: var(--s6); display: grid; gap: var(--s2); }
  @media (min-width: 760px) { .row { grid-template-columns: 16rem 1fr; gap: var(--s8); } }
  .row p { margin: 0; font-size: .93rem; color: var(--fg-2); }

  /* ============ steps ============ */
  .steps { display: grid; gap: var(--s6); margin-top: var(--s8); counter-reset: n; }
  .step { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--s4); align-items: start; }
  .step::before { counter-increment: n; content: counter(n);
    font-family: var(--mono); font-size: .82rem; font-weight: 650; color: var(--accent);
    background: var(--surface-2); border: 1px solid var(--border);
    width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; }
  .step p { margin: var(--s1) 0 0; font-size: .93rem; color: var(--fg-2); }

  /* ============ video ============ */
  .video { display: grid; gap: var(--s8); align-items: center; margin-top: var(--s8); }
  @media (min-width: 900px) { .video { grid-template-columns: 1.1fr .9fr; gap: var(--s12); } }
  .poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
            border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
            background: linear-gradient(150deg, var(--surface-2), var(--surface));
            box-shadow: var(--sh-2); cursor: pointer; text-decoration: none; color: inherit;
            transition: border-color .2s ease, transform .2s ease; }
  .poster:hover { border-color: var(--accent); transform: translateY(-2px); }
  .poster-shot { position: absolute; inset: 0 0 44px 0; display: flex; flex-direction: column;
    background: var(--surface); overflow: hidden; }
  .ps-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px;
    background: var(--surface-2); border-bottom: 1px solid var(--border); flex: none; }
  .ps-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-str); }
  .ps-name { font-family: var(--mono); font-size: 9px; color: var(--fg-muted); margin-left: 4px; letter-spacing: .06em; }
  .ps-rows { flex: 1; display: flex; flex-direction: column; }
  .ps-row { flex: 1; display: grid; grid-template-columns: 1.6fr 1.1fr .7fr;
    align-items: center; gap: 6px; padding: 0 10px; min-height: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    font-size: 9.5px; font-family: var(--mono); color: var(--fg-2); }
  .ps-row.head { background: var(--surface-2); color: var(--fg-muted); font-weight: 650;
    letter-spacing: .09em; text-transform: uppercase; font-size: 8px; }
  .ps-row.we { background: var(--weekend); color: var(--weekend-fg); }
  .ps-row.hd { background: var(--holiday); color: var(--holiday-fg); }
  .ps-row b { font-weight: 650; }
  .ps-veil { position: absolute; inset: 0 0 44px 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 18%, transparent),
                                        color-mix(in srgb, var(--bg) 55%, transparent)); }

  /* Play button — sits above the sheet miniature and the veil so the poster
     reads unmistakably as a video rather than a screenshot. */
  .poster-play { position: absolute; inset: 0 0 44px 0; display: grid; place-items: center; }
  .poster-play span {
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--accent); color: var(--on-accent);
    display: grid; place-items: center;
    padding-left: 5px;                     /* optical centering of the triangle */
    box-shadow: 0 6px 22px rgba(2,6,23,.28), 0 0 0 10px color-mix(in srgb, var(--surface) 55%, transparent);
    transition: transform .2s ease, box-shadow .2s ease; }
  .poster:hover .poster-play span,
  .poster:focus-visible .poster-play span {
    transform: scale(1.07);
    box-shadow: 0 8px 26px rgba(2,6,23,.34), 0 0 0 14px color-mix(in srgb, var(--surface) 65%, transparent); }
  @media (prefers-reduced-motion: reduce) {
    .poster:hover .poster-play span, .poster:focus-visible .poster-play span { transform: none; }
  }

  .poster-cap { position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: var(--s2);
    padding: var(--s3) var(--s4);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(6px); border-top: 1px solid var(--border);
    font-size: .82rem; color: var(--fg-2); }
  .poster-cap b { font-weight: 650; color: var(--fg); font-family: var(--mono); font-variant-numeric: tabular-nums; }

  /* ============ notice ============ */
  .notice { border: 1px solid var(--border-str); border-left: 3px solid var(--accent);
            background: var(--surface-2); border-radius: 8px; padding: var(--s4) var(--s6);
            font-size: .9rem; color: var(--fg-2); max-width: var(--measure); }
  .notice b { color: var(--fg); }

  /* ============ pricing ============ */
  .tiers { display: grid; gap: var(--s4); grid-template-columns: 1fr; margin-top: var(--s8); }
  @media (min-width: 860px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
  .tier { border: 1px solid var(--border); border-radius: 12px; padding: var(--s6);
          background: var(--surface); display: flex; flex-direction: column; gap: var(--s4); position: relative; }
  .tier.best { border-color: var(--accent); box-shadow: var(--sh-2); }
  .flag { position: absolute; top: -.7rem; left: var(--s6); font-family: var(--mono);
          font-size: .66rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
          background: var(--accent); color: var(--on-accent); padding: .2rem .55rem; border-radius: 4px; }
  .tname { font-family: var(--mono); font-size: .72rem; font-weight: 650; letter-spacing: .13em;
           text-transform: uppercase; color: var(--fg-muted); }
  .cost { font-size: 2.6rem; font-weight: 750; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
  .cost i { font-style: normal; font-size: .9rem; font-weight: 500; color: var(--fg-muted); letter-spacing: 0; }
  .tier ul { list-style: none; display: flex; flex-direction: column; gap: var(--s2); font-size: .9rem; color: var(--fg-2); }
  .tier li { display: flex; gap: var(--s2); align-items: flex-start; }
  .tier li svg { color: var(--success); flex: none; margin-top: 3px; }
  .tier .btn { margin-top: auto; justify-content: center; }

  /* ============ legal ============ */
  .legal { max-width: var(--measure); }
  .legal h2 { margin-top: var(--s12); font-size: 1.18rem; }
  .legal h2:first-of-type { margin-top: var(--s8); }
  .legal p, .legal li { font-size: .94rem; color: var(--fg-2); }
  .legal ul { list-style: none; display: flex; flex-direction: column; gap: var(--s2); margin-block: var(--s3); }
  .legal ul li { display: flex; gap: var(--s3); align-items: flex-start; }
  .legal ul li svg { color: var(--accent); flex: none; margin-top: 5px; }
  .stamp { font-family: var(--mono); font-size: .76rem; color: var(--fg-muted); letter-spacing: .04em; margin-top: var(--s2); }

  footer { border-top: 1px solid var(--border); padding-block: var(--s8) var(--s12);
           font-size: .85rem; color: var(--fg-muted); display: flex; gap: var(--s4); flex-wrap: wrap; }

  /* ============ motion ============ */
  .rise { opacity: 0; transform: translateY(8px); }
  .rise.in { opacity: 1; transform: none; transition: opacity .45s ease-out, transform .45s ease-out; }
  @media (prefers-reduced-motion: reduce) {
    .rise, .rise.in { opacity: 1; transform: none; transition: none; }
    * { transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }

  /* links rendered as tabs / buttons */
  a.tab { display:inline-flex; align-items:center; text-decoration:none; }
  a.btn { text-decoration:none; }

  /* product screenshot */
  .shot { margin: var(--s8) 0 0; }
  .shot img { display:block; width:100%; height:auto; background:#fff;
              border:1px solid var(--border); border-radius:12px; box-shadow: var(--sh-2); }
  .shot figcaption { margin-top: var(--s3); font-size:.85rem; color: var(--fg-muted); max-width: var(--measure); }