:root {
      --ink: #000;
      --paper: #fff;
      --mute: rgba(0, 0, 0, .42);
      --rule: rgba(0, 0, 0, .14);
      --bezel: #111;
      --bezel-edge: rgba(0, 0, 0, .35);
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --ink: #fff;
        --paper: #000;
        --mute: rgba(255, 255, 255, .46);
        --rule: rgba(255, 255, 255, .2);
        --bezel: #000;
        --bezel-edge: rgba(255, 255, 255, .38);
      }
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; }

    .page {
      min-height: 100svh;
      display: grid;
      grid-template-rows: auto 1fr auto auto;
      padding: clamp(20px, 3vw, 40px) clamp(20px, 5vw, 72px);
      padding-bottom: max(clamp(20px, 3vw, 40px), env(safe-area-inset-bottom));
    }

    /* the quote that named the idea; context, not an endorsement */
    .quote {
      margin: clamp(24px, 4vh, 40px) 0 clamp(28px, 5vh, 56px);
      max-width: 34em;
      font-size: clamp(15px, 0.85rem + 0.25vw, 17px);
      line-height: 1.5;
      color: var(--muted, color-mix(in srgb, var(--ink) 62%, transparent));
    }
    .quote blockquote { margin: 0; }
    .quote figcaption { margin-top: 6px; }
    .quote a { text-decoration: none; color: var(--ink); }
    .quote a:hover { text-decoration: underline; }

    /* top: the mark only */
    .top {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      font-size: 15px;
      letter-spacing: -0.01em;
      text-decoration: none;
    }
    .mark { width: 26px; height: 26px; display: block; }

    /* middle: the sentence on the left, the session on the right */
    .middle {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      grid-template-areas: "words hero" "link hero";
      align-items: center;
      align-content: center;
      column-gap: clamp(32px, 5vw, 80px);
      padding: 4vh 0 4vh;
    }
    .words { grid-area: words; align-self: end; }
    .get { grid-area: link; justify-self: start; align-self: start; }
    .hero { grid-area: hero; }
    h1 {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: clamp(38px, 1.2rem + 3.3vw, 68px);
      line-height: 1.02;
      font-weight: 600;
      letter-spacing: -0.04em;
      text-wrap: balance;
    }

    /* the one link */
    .get {
      margin-top: clamp(28px, 5vh, 56px);
      font-size: clamp(17px, 0.9rem + 0.4vw, 20px);
      font-weight: 500;
      letter-spacing: -0.01em;
      text-decoration: underline;
      text-underline-offset: 0.22em;
      text-decoration-thickness: 1.5px;
    }
    .get:hover { text-decoration-thickness: 2.5px; }

    /* ---------- the session: a real Mac window next to a real recording of the phone ---------- */
    .hero {
      container-type: inline-size;
      width: 100%;
      max-width: 880px;
      justify-self: end;
      display: grid;
      grid-template-columns: 53fr 13fr 34fr;
      grid-template-areas: "mac . phone" "status . phone";
      align-items: start;
    }

    .mac {
      grid-area: mac;
      position: relative;
      aspect-ratio: 560 / 760;
      border-radius: 1.6cqw;
      overflow: hidden;
      box-shadow: 0 0 0 1px var(--rule);
      background: #f6f8fa;
    }
    .mac img { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
    /* exactly one state is visible; the swap is instant */
    .hero[data-mac="filled"]            .mac img[data-s="filled"],
    .hero[data-mac="pressed"]           .mac img[data-s="pressed"],
    .hero[data-mac="authorize"]         .mac img[data-s="authorize"],
    .hero[data-mac="authorize-pressed"] .mac img[data-s="authorize-pressed"],
    .hero[data-mac="done"]              .mac img[data-s="done"] { display: block; }

    .status {
      grid-area: status;
      margin: 2.2cqw 0 0;
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: 2cqw;
      line-height: 1.4;
      color: var(--mute);
      white-space: nowrap;
    }
    .status b { color: var(--ink); font-weight: 600; }
    .status span { display: none; }
    .hero[data-status="waiting"] .status .waiting,
    .hero[data-status="continuing"] .status .continuing { display: inline; }
    .status .caret {
      display: inline-block; width: .55em; height: 1.05em; margin-left: .15em;
      background: var(--ink); vertical-align: -.18em;
      animation: blink 1s steps(1, end) infinite;
    }
    @keyframes blink { 50% { opacity: 0 } }

    .phone {
      grid-area: phone;
      padding: 1.15cqw;
      border-radius: 6.2cqw;
      background: var(--bezel);
      box-shadow: 0 0 0 1px var(--bezel-edge);
      margin-top: -1cqw;
    }
    .screen {
      position: relative;
      aspect-ratio: 560 / 1218;
      border-radius: 5.1cqw;
      overflow: hidden;
      background: #000;
      isolation: isolate;
    }
    .screen video { display: block; width: 100%; height: 100%; object-fit: cover; }

    /* bottom */
    .bottom {
      display: flex;
      gap: 1.6em;
      font-size: 13px;
      color: var(--mute);
    }
    .bottom a { text-decoration: none; }
    .bottom a:hover { color: var(--ink); }

    @media (prefers-reduced-motion: reduce) {
      .status .caret { animation: none; }
    }

    /* narrow: the sentence, then the phone large with the Mac window small behind it, then the link */
    @media (max-width: 880px) {
      .middle {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "words" "hero" "link";
        row-gap: clamp(22px, 3.5vh, 40px);
        padding: 2vh 0 2vh;
      }
      .get { margin-top: 0; }
      .hero {
        justify-self: center;
        display: block;
        position: relative;
        width: 100%;
        max-width: 420px;
        aspect-ratio: 100 / 142;
      }
      .mac {
        position: absolute; left: 0; top: 0;
        width: 58cqw;
        aspect-ratio: 560 / 470;
        border-radius: 2.4cqw 2.4cqw 0 0;
        box-shadow: 0 0 0 1px var(--rule);
      }
      .mac img { height: auto; }
      .status { position: absolute; left: 0; top: 51cqw; width: 37cqw; margin: 0; font-size: 3cqw; line-height: 1.45; white-space: normal; }
      .phone {
        position: absolute; right: 0; top: 14cqw;
        width: 60cqw;
        margin: 0;
        padding: 1.5cqw;
        border-radius: 10cqw;
      }
      .screen { border-radius: 8.5cqw; }
    }
    @media (max-width: 520px) {
      .page { padding-top: 22px; }
      h1 { font-size: clamp(36px, 10.4vw, 52px); line-height: 1.0; }
    }