/* Phones. The same film, composed for a tall, narrow screen: the chapter's words in the top third, the device
   as the hero of the middle, the segmented control in the bottom safe area. Everything here sits behind the
   same media queries main.js uses (MQ.phone, MQ.short); the desktop page never sees it.
   Heights come from main.js in px (--vis-h, the always-visible height; --b-* the bands), never from vh, so the
   browser bar can come and go without moving a thing. */

/* outside the phone layouts these parts don't exist */
.vp-probe {
  position: fixed; left: 0; top: 0; width: 0; height: 100vh; height: 100lvh; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.nav-prog, .chips, .stmt .t-m, .m-only { display: none; }
.seg-track { display: contents; }
/* touch screens keep no sticky hover states */
@media (hover: none) {
  .nav-get:hover { background: var(--orange-btn); }
  .badge:hover img { transform: none; }
  .rail button:not([aria-current="true"]):hover { opacity: 0.62; }
}

@media (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  :root {
    /* the column, the statement size, and the bands main.js computes (the device lives between them) */
    --g: max(18px, var(--safe-l, 0px));
    --fs-stmt: clamp(29px, 9.1vw, 60px);
    --chip-h: clamp(30px, 7.8vw, 40px);
    --chip-f: clamp(13px, 3.45vw, 17px);
  }
  html, body { overscroll-behavior-y: none; }
  body { -webkit-tap-highlight-color: transparent; }
  .d-only { display: none; }
  .m-only { display: revert; }

  /* ——— nav: slim, with the film's progress as a hairline under it ——— */
  .nav { height: calc(var(--safe-t, 0px) + 50px); padding: var(--safe-t, 0px) max(16px, var(--safe-r, 0px)) 0 max(16px, var(--safe-l, 0px)); gap: 8px; }
  .nav-mark { gap: 7px; font-size: 15px; }
  .nav-logo { width: 15px; height: 15px; }
  .nav-app { gap: 7px; font-size: 15px; }
  .nav-app img { width: 22px; height: 22px; border-radius: 5.5px; }
  .nav-sep { font-size: 15px; }
  .nav-get { height: 32px; padding: 0 14px; font-size: 13.5px; }
  .nav-prog { display: flex; position: absolute; left: max(16px, var(--safe-l, 0px)); right: max(16px, var(--safe-r, 0px)); bottom: 0; height: 2px; gap: 3px; pointer-events: none; }
  .nav-prog i { position: relative; flex: 1 1 0; min-width: 0; height: 2px; border-radius: 1px; overflow: hidden; }
  .nav-prog i::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0.22; }
  .nav-prog b { position: absolute; inset: 0; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); }
  .rail { display: none; }

  /* ——— a chapter's words: name, statement, chips on top; the control at the bottom ——— */
  .ch {
    left: var(--g); right: var(--g); width: auto; top: 0; bottom: auto; height: var(--vis-h, 100svh);
    display: block; gap: 0;
  }
  .ch[data-side="right"] { left: var(--g); right: var(--g); }
  .ch-head { position: absolute; left: 0; right: 0; top: var(--b-head); justify-content: center; gap: 8px; }
  .ch-glyph { width: calc(var(--chip-h) * 0.74); height: calc(var(--chip-h) * 0.74); border-radius: 30%; box-shadow: none; }
  .ch-head p { flex-direction: row; align-items: baseline; }
  .ch-head b { font-size: calc(var(--chip-f) + 1px); font-weight: 720; letter-spacing: -0.005em; }
  .ch-head span { display: none; }
  .ch-stmts { position: absolute; left: 0; right: 0; top: var(--b-stmt); height: var(--b-stmt-h); }
  .stmt .t-d, .stmt ul { display: none; }
  .stmt .t-m {
    display: block; margin: 0; text-align: center; font-size: var(--fs-ch, var(--fs-stmt)); line-height: 1; letter-spacing: -0.034em;
    font-weight: 850; text-wrap: balance;
  }
  .stmt .t-m .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.02em 0.12em; margin: -0.06em -0.02em -0.12em; }
  .stmt .t-m .w > span { display: inline-block; will-change: transform, opacity; }

  .chips { display: block; position: absolute; left: 0; right: 0; top: var(--b-chips); height: var(--chip-h); pointer-events: none; }
  .chip {
    position: absolute; left: 0; top: 0; height: var(--chip-h); display: flex; align-items: center; gap: 6px; padding: 0 13px 0 10px;
    border-radius: 999px; overflow: hidden; white-space: nowrap; font-size: var(--chip-f); font-weight: 640; letter-spacing: -0.005em; color: var(--ink);
    background: color-mix(in oklab, var(--acc) 17%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acc) 26%, transparent);
    will-change: transform, opacity;
  }
  .chip-ic { position: relative; flex: none; width: calc(var(--chip-f) * 1.18); height: calc(var(--chip-f) * 1.18); color: var(--acc); }
  .chip-ic .i { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
  .chip-t { position: relative; flex: 1 1 auto; height: 1.3em; line-height: 1.3em; overflow: hidden; }
  .chip-t > span { position: absolute; left: 0; top: 0; visibility: hidden; }

  /* the segmented control: bottom centre, above the home indicator; a window it slides in when it's wider */
  .seg { position: absolute; left: 50%; top: var(--b-seg); translate: -50% 0; max-width: 100%; --sh: var(--seg-h); --sp: clamp(11px, 3.1vw, 18px); --segf: clamp(13px, 3.45vw, 16px); overflow: hidden; }
  .seg-track { display: block; flex: none; position: relative; height: var(--seg-h); }
  .seg-track > button { float: left; }
  .seg-thumb { top: 0; bottom: 0; }
  .seg-ink { padding: 0; }
  /* a frosted control, legible over whatever passes under it in a close-up */
  .seg { background: rgba(14, 16, 30, 0.42); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
  body[data-tone="light"] .seg { background: rgba(255, 250, 243, 0.6); }
  .seg.seg-slides { mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }
  .seg button:hover { color: var(--ink-2); }
  .ch-get { display: none; }

  /* ——— the opening ——— */
  .hero-head { top: calc(var(--safe-t, 0px) + clamp(70px, 10.5vh, 120px)); padding: 0 var(--g); }
  .hero h1, .curtain .hero-h1 { font-size: clamp(40px, 11.4vw, 84px); line-height: 0.95; letter-spacing: -0.045em; }
  .hero h1 span, .curtain .hero-h1 span { text-wrap: balance; }
  .curtain .hero-head { top: calc(var(--safe-t, 0px) + clamp(70px, 10.5vh, 120px)); padding: 0 var(--g); }
  .hero-sub { margin-top: clamp(14px, 2.2vh, 24px); max-width: 30ch; font-size: clamp(15px, 4vw, 20px); line-height: 1.42; }
  .hero-get { margin-top: clamp(14px, 2.4vh, 24px); flex-direction: column; gap: 8px; }
  .hero-get .badge img { width: clamp(132px, 34vw, 170px); }
  .hero-get small { font-size: 12.5px; }
  .hero-cap { left: var(--g); right: var(--g); width: auto; top: var(--b-stmt); text-align: center; }
  .hero-cap p { font-size: var(--fs-stmt); line-height: 1; letter-spacing: -0.034em; font-weight: 850; }
  .hero-cap p b { display: block; }
  .hero-cap p em { display: block; margin-top: 0.42em; font-style: normal; font-size: 0.56em; line-height: 1.08; letter-spacing: -0.02em; font-weight: 760; color: rgba(var(--ink-rgb), 0.7); }

  /* ——— the close ——— */
  .close-col { left: var(--g); right: var(--g); width: auto; top: var(--b-head); transform: none; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .close-icon { width: calc(var(--chip-h) * 1.6); height: calc(var(--chip-h) * 1.6); border-radius: 22.6%; }
  .close h2 { margin-top: 12px; font-size: calc(var(--fs-stmt) * 0.88); line-height: 1; }
  .close-sub { margin-top: 10px; font-size: var(--chip-f); max-width: 34ch; }
  .close-get { margin-top: 12px; }
  .close-badge img { width: clamp(132px, 34vw, 170px); }
  .close-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 14px; --acc: #f0a24c; }
  .close-facts li { display: flex; align-items: center; gap: 5px; height: calc(var(--chip-h) * 0.92); padding: 0 10px 0 7px; white-space: nowrap; border-radius: 999px; font-size: calc(var(--chip-f) - 1px); font-weight: 640; color: var(--ink); background: color-mix(in oklab, var(--acc) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acc) 24%, transparent); }
  .close-facts .pt-ic { --ic: calc(var(--chip-f) * 1.25); background: none; box-shadow: none; }
  .close-facts .pt-ic .i { width: 100%; height: 100%; }
  .foot { left: var(--g); right: var(--g); top: auto; bottom: calc(var(--stage-h, 100lvh) - var(--vis-h, 100svh) + var(--safe-b, 0px)); flex-direction: column; align-items: center; gap: 8px; padding: 12px 0 14px; font-size: 11.5px; text-align: center; }
  .foot nav { gap: 6px 14px; justify-content: center; }
  .foot > span { white-space: normal; }
  .foot nav a[href^="mailto:"] { display: none; }
}
/* the smallest phones (an SE): the close gives its device a little more room */
@media (max-width: 1100px) and (max-aspect-ratio: 4/5) and (max-height: 700px) {
  .close-icon { width: 40px; height: 40px; }
  .close h2 { margin-top: 8px; font-size: calc(var(--fs-stmt) * 0.8); }
  .close-get { margin-top: 8px; }
  .close-facts { margin-top: 8px; }
}

/* ——— a phone on its side: a compact side-by-side film. The words in a column on the left (statement, chips,
   the control), the device in the room to the right. Bands come from main.js (--b-top, --b-hh, --b-col). ——— */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  :root { --chip-h: 28px; --chip-f: 12.5px; }
  html, body { overscroll-behavior-y: none; }
  body { -webkit-tap-highlight-color: transparent; }
  .d-only { display: none; }
  .m-only { display: revert; }
  .nav { height: calc(var(--safe-t, 0px) + 44px); padding: var(--safe-t, 0px) max(18px, var(--safe-r, 0px)) 0 max(18px, var(--safe-l, 0px)); gap: 8px; }
  .nav-mark, .nav-app { font-size: 14px; gap: 7px; }
  .nav-app img { width: 20px; height: 20px; border-radius: 5px; }
  .nav-get { height: 30px; padding: 0 13px; font-size: 13px; }
  .nav-prog { display: flex; position: absolute; left: max(18px, var(--safe-l, 0px)); right: max(18px, var(--safe-r, 0px)); bottom: 0; height: 2px; gap: 3px; pointer-events: none; }
  .nav-prog i { position: relative; flex: 1 1 0; min-width: 0; height: 2px; border-radius: 1px; overflow: hidden; }
  .nav-prog i::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0.22; }
  .nav-prog b { position: absolute; inset: 0; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); }
  .rail { display: none; }

  .ch, .ch[data-side="right"] {
    left: var(--b-left); right: auto; width: var(--b-col); top: var(--b-top); bottom: auto; height: var(--b-hh);
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px;
  }
  .ch-glyph { width: 22px; height: 22px; border-radius: 7px; box-shadow: none; }
  .ch-head { gap: 8px; }
  .ch-head b { font-size: 13.5px; }
  .ch-head span { display: none; }
  .ch-stmts { height: var(--b-stmt-h); flex: none; }
  .stmt .t-d, .stmt ul { display: none; }
  .stmt .t-m { display: block; margin: 0; font-size: var(--fs-ch, var(--fs-stmt)); line-height: 1; letter-spacing: -0.034em; font-weight: 850; text-wrap: balance; }
  .stmt .t-m .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.02em 0.12em; margin: -0.06em -0.02em -0.12em; }
  .stmt .t-m .w > span { display: inline-block; will-change: transform, opacity; }
  .chips { display: block; position: relative; width: 100%; height: var(--chip-h); flex: none; pointer-events: none; }
  .chip {
    position: absolute; left: 0; top: 0; height: var(--chip-h); display: flex; align-items: center; gap: 6px; padding: 0 12px 0 9px;
    border-radius: 999px; overflow: hidden; white-space: nowrap; font-size: var(--chip-f); font-weight: 640; color: var(--ink);
    background: color-mix(in oklab, var(--acc) 17%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acc) 26%, transparent);
  }
  .chip-ic { position: relative; flex: none; width: 15px; height: 15px; color: var(--acc); }
  .chip-ic .i { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
  .chip-t { position: relative; flex: 1 1 auto; height: 1.3em; line-height: 1.3em; overflow: hidden; }
  .chip-t > span { position: absolute; left: 0; top: 0; visibility: hidden; }
  .seg { margin-top: 6px; --sh: var(--seg-h); --sp: 11px; --segf: 12.5px; overflow: hidden; }
  .seg-track { display: block; flex: none; position: relative; height: var(--seg-h); }
  .seg-track > button { float: left; }
  .seg-thumb { top: 0; bottom: 0; }
  .seg-ink { padding: 0; }
  .seg.seg-slides { mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
  .ch-get { display: none; }

  .hero-head { top: calc(var(--safe-t, 0px) + 58px); padding: 0 max(24px, var(--safe-l, 0px)); }
  .curtain .hero-head { top: calc(var(--safe-t, 0px) + 58px); }
  .hero h1, .curtain .hero-h1 { font-size: clamp(30px, 10.4vh, 46px); }
  .hero-sub { margin-top: 12px; font-size: 14.5px; max-width: 46ch; }
  .hero-get { margin-top: 12px; }
  .hero-get .badge img { width: 120px; }
  .hero-cap { left: var(--b-left); width: var(--b-col); top: 50%; }
  .hero-cap p { font-size: var(--fs-stmt); line-height: 1; letter-spacing: -0.034em; font-weight: 850; }
  .hero-cap p b { display: block; }
  .hero-cap p em { display: block; margin-top: 0.4em; font-style: normal; font-size: 0.6em; line-height: 1.1; font-weight: 760; color: rgba(var(--ink-rgb), 0.7); }

  .close-col { left: var(--b-left); width: var(--b-col); top: var(--b-top); transform: none; }
  .close-icon { width: 38px; height: 38px; }
  .close h2 { margin-top: 8px; font-size: var(--fs-stmt); line-height: 1; }
  .close-sub { margin-top: 6px; font-size: 13px; }
  .close-get { margin-top: 8px; }
  .close-badge img { width: 118px; }
  .close-facts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; --acc: #f0a24c; }
  .close-facts li { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 7px; border-radius: 999px; white-space: nowrap; font-size: 12px; font-weight: 640; color: var(--ink); background: color-mix(in oklab, var(--acc) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acc) 24%, transparent); }
  .close-facts .pt-ic { --ic: 15px; background: none; box-shadow: none; }
  .close-facts .pt-ic .i { width: 100%; height: 100%; }
  .foot { left: max(24px, var(--safe-l, 0px)); right: max(24px, var(--safe-r, 0px)); bottom: calc(var(--stage-h, 100lvh) - var(--vis-h, 100svh)); padding: 8px 0 10px; font-size: 11px; gap: 12px; }
  .foot nav { gap: 10px; }
  .foot > span:first-child { display: none; }
  .foot nav a[href^="mailto:"] { display: none; }
}