/* Digext "Your shelf": the site's stylesheet (home and ad pages). Stacked rounded sheets, colour-blocked from the app and
   the ads. Light = the ads' day sky. Dark = the app's night. App UI is dark-mode in both. Hand-maintained; no build step.
   Later blocks (the review layers, then the production fixes at the end) override earlier rules, so keep the order. */
:root {
  color-scheme: light;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --paste: #FF4B4B; --paste-small: #D42A2A; --kept: #3FE0A6; --night: #050506;
  --gap: 8px; --r-sheet: 30px; --pad: 40px;
  /* light */
  --page: #EEF2FB; --ink: #0A0C12; --ink-2: #3D4556; --ink-3: #4F586B; --line: rgba(10,12,18,.13);
  --sky: linear-gradient(180deg, #CCD7FA 0%, #C3E3F6 46%, #DCE7FB 100%);
  --paper: #F8F9FD; --pill: rgba(255,255,255,.62); --pill-on: #0A0C12; --pill-on-ink: #fff;
  --glass: rgba(14,15,20,.82); --glass-edge: rgba(255,255,255,.14);
  --shadow: 0 30px 60px -24px rgba(22,34,80,.55), 0 8px 18px -8px rgba(22,34,80,.3);
  --badge-ring: transparent;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --page: #000; --ink: #F5F6F8; --ink-2: #C3C8D2; --ink-3: #9AA1AF; --line: rgba(255,255,255,.15);
  --sky: var(--night); --paper: #101116; --pill: rgba(255,255,255,.1); --pill-on: #F5F6F8; --pill-on-ink: #0A0C12;
  --glass: rgba(26,27,32,.78); --glass-edge: rgba(255,255,255,.13);
  --shadow: 0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -30px #000; --badge-ring: rgba(255,255,255,.55);
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #000; --ink: #F5F6F8; --ink-2: #C3C8D2; --ink-3: #9AA1AF; --line: rgba(255,255,255,.15);
  --sky: var(--night); --paper: #101116; --pill: rgba(255,255,255,.1); --pill-on: #F5F6F8; --pill-on-ink: #0A0C12;
  --glass: rgba(26,27,32,.78); --glass-edge: rgba(255,255,255,.13);
  --shadow: 0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -30px #000; --badge-ring: rgba(255,255,255,.55);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/1.5 var(--font-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #5B8CFF; outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font: 500 11px/1.4 var(--font-mono); color: var(--ink-3); letter-spacing: 0; }

/* ---- sheets ------------------------------------------------------------- */
.sheet { position: relative; margin: var(--gap); border-radius: var(--r-sheet); overflow: hidden; isolation: isolate; }
.sheet + .sheet { margin-top: 0; }
.sheet__in { max-width: 1560px; margin: 0 auto; padding: clamp(44px, 6vw, 96px) var(--pad); }
.sheet--sky { background: var(--sky); }
.sheet--night { background: var(--night); color: #F5F6F8; --ink: #F5F6F8; --ink-2: #C3C8D2; --ink-3: #9AA1AF; --line: rgba(255,255,255,.15); --pill: rgba(255,255,255,.1); --pill-on: #F5F6F8; --pill-on-ink: #0A0C12; }
.sheet--paste { background: var(--paste); color: #1B0506; --ink: #1B0506; --ink-2: #3A0A0C; --ink-3: #4A0D10; }
.sheet--green { background: radial-gradient(120% 90% at 78% 0%, #0E5A45 0%, #062A21 42%, #03100D 100%); color: #EAFBF4; --ink: #EAFBF4; --ink-2: #B8E6D6; --ink-3: #8CCDB8; --line: rgba(160,255,220,.2); }
.sheet--paper { background: var(--paper); }
.sheet--foot { background: #0A0C12; color: #F5F6F8; --ink: #F5F6F8; --ink-2: #C3C8D2; --ink-3: #9AA1AF; --line: rgba(255,255,255,.14); }
/* the app's starfield (dots only, no noise): on every night surface */
.stars::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1px 1px at 31% 64%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 47% 9%, rgba(255,255,255,.6) 50%, transparent 51%), radial-gradient(.9px .9px at 63% 41%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 78% 77%, rgba(255,255,255,.65) 50%, transparent 51%), radial-gradient(1px 1px at 91% 23%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(.8px .8px at 22% 88%, rgba(255,255,255,.5) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 55% 93%, rgba(255,255,255,.45) 50%, transparent 51%);
  background-size: 520px 420px, 520px 420px, 520px 420px, 520px 420px, 290px 330px, 290px 330px, 290px 330px, 290px 330px; }
.sheet--sky.stars::before { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sheet--sky.stars::before { display: block; } }
:root[data-theme="dark"] .sheet--sky.stars::before { display: block; }

/* ---- type ----------------------------------------------------------------- */
.h1, .h2 { font-family: var(--font-display); font-weight: 800; margin: 0; text-wrap: balance; }
.h1 { font-size: clamp(3.3rem, 5.7vw, 6.4rem); line-height: .95; letter-spacing: -.045em; }
.h2 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4.2rem); line-height: .98; letter-spacing: -.04em; }
.support { margin: 0; font: 700 clamp(1.2rem, 1rem + .9vw, 1.7rem)/1.1 var(--font-display); letter-spacing: -.025em; }
.lead { margin: 0; color: var(--ink-2); font-size: clamp(.97rem, .9rem + .3vw, 1.13rem); line-height: 1.42; max-width: 34em; }
.fine { margin: 0; font-size: .82rem; line-height: 1.35; color: var(--ink-3); }
/* The app's red Paste button, set in the headline. A capsule, like the real control. Headline sizes only (3.3:1). */
.paste { display: inline-block; background: var(--paste); color: #fff; border: 0; border-radius: 999px; padding: .03em .24em .09em; margin: 0 .02em 0 .08em; font: inherit; letter-spacing: inherit; line-height: inherit; vertical-align: baseline; box-shadow: inset 0 -.04em 0 rgba(0,0,0,.12), 0 .08em .3em -.1em rgba(200,20,20,.6); }
.h1 .paste:first-child, .closer .paste:first-child { margin-left: -.04em; }
button.paste { cursor: pointer; -webkit-appearance: none; appearance: none; transition: transform .15s; }
button.paste:hover { transform: scale(1.03); } button.paste:active { transform: scale(.97); }

/* ---- brand, nav, buttons --------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 1.15rem/1 var(--font-display); letter-spacing: -.03em; text-decoration: none; }
.brand img { width: 44px; height: 44px; border-radius: 22.5%; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nav { display: none; }
.pillbtn { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 99px; border: 0; background: var(--pill-on); color: var(--pill-on-ink); font: 650 .9rem/1 var(--font-text); text-decoration: none; cursor: pointer; }
.roundbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--pill); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: grid; place-items: center; cursor: pointer; }
.roundbtn svg { width: 18px; height: 18px; }
.topbar__r { display: flex; gap: 8px; align-items: center; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.store-badge, .store-badge-mac { display: inline-block; border-radius: 9px; line-height: 0; box-shadow: 0 0 0 1px var(--badge-ring); }
.store-badge img, .store-badge-mac img { height: 52px; width: auto; }
/* Mac link rule: never on phone layouts; tablet and desktop only, by width. */
.store-badge-mac, .mac-note, .mac-only { display: none; }
@media (min-width: 768px) { .store-badge-mac { display: inline-block; } .mac-note, .mac-only { display: inline; } }


/* ---- devices: bare screens (pass 7f). Nothing is drawn: no bezel, no titanium or aluminium edge, no buttons, camera, hinge,
   lid, base, menu band or notch, and never a Dynamic Island (the island is whatever the footage shows; on black-topped
   screens it is black on black, as on the real phone). The screen is the recording or still itself, clipped to its display's
   real corner radius, measured from one `simctl io screenshot --mask=black` per simulator (the boundary's inset on the corner diagonal, the radius a circular CSS corner needs to cut the same depth):
   iPhone 18 Pro 62.1 pt of 402 (= .1545 of the width), iPad Pro 11-inch 30.3 pt of 1210 (.025), iPhone Duo inner display
   53.5 pt of 951 (.0563). The Mac window is the capture's own window, with its own transparent corners: no CSS radius.
   --w is the SCREEN width (the window width for the Mac). Each box has the capture's own proportions, so nothing is cropped.
   Edge: one 1 px ring drawn OUTSIDE the box (box-shadow, so no pixel of footage is covered) in the glass panels' hairline
   colour, plus their soft shadow. These are the values for the night sheets and the dark cards; the day-sky hero is in review r4.
   Mac windows: a hairline glow and a soft shadow that follow the window's own alpha (filter), no box-shadow. ---- */
:root { --scr-ring: rgba(255,255,255,.14); --scr-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.iphone, .ipad, .duo { position: relative; flex: none; width: var(--w); }
.screen { position: relative; overflow: hidden; isolation: isolate; background: #000; box-shadow: 0 0 0 1px var(--scr-ring), var(--scr-shadow); }
/* the media layers carry the screen's radius themselves: a safeguard, so a playing video is clipped to the rounded screen
   whatever layer the browser composites it on (checked in WebKit: clean corners while the clips play) */
.screen > img, .screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.screen::after { border-radius: inherit; }
.screen > video { opacity: 0; transition: opacity .3s; } .screen > video.on { opacity: 1; }
.iphone { --w: 280px; } .iphone .screen { aspect-ratio: 402 / 874; border-radius: calc(var(--w) * .1545); }
.ipad { --w: 480px; } .ipad .screen { aspect-ratio: 1210 / 834; border-radius: calc(var(--w) * .025); }
.duo { --w: 420px; } .duo .screen { aspect-ratio: 2853 / 2007; border-radius: calc(var(--w) * .0563); }
.mbp { --w: 560px; flex: none; width: var(--w); filter: drop-shadow(0 0 .5px rgba(255,255,255,.35)) drop-shadow(0 24px 40px rgba(0,0,0,.5)); }
.mbp > img { display: block; width: 100%; height: auto; aspect-ratio: 1512 / 945; }
figure.dev { margin: 0; display: grid; justify-items: center; gap: 12px; }
figure.dev figcaption { text-align: center; }
.motion-note { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

/* ---- glass cards: each holds an unaltered crop of a real capture, or the shelf --- */
.glass { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 18px; -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 18px 36px -18px rgba(8,12,40,.6); color: #F5F6F8; }
.crop { padding: 7px; line-height: 0; }
.crop img { border-radius: 11px; width: 100%; height: auto; }

/* ---- the shelf: the app's own rows — a header with a chevron, covers, a two-line label --- */
.shelf { padding: 12px 12px 14px; }
.shelf__h { display: flex; align-items: center; gap: 4px; margin: 0 0 10px; font: 700 .86rem/1 var(--font-text); color: #F5F6F8; }
.shelf__h svg { width: 11px; height: 11px; opacity: .8; }
.shelf__row { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px 10px; list-style: none; margin: 0; padding: 0; }
.tile { display: block; text-decoration: none; color: inherit; background: none; border: 0; padding: 0; text-align: left; min-width: 0; }
.tile .cover { display: block; position: relative; aspect-ratio: 1; border-radius: 9%; overflow: hidden; background: #111; transition: transform .25s; }
.tile .cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); pointer-events: none; }
.tile .cover img { width: 100%; height: 100%; object-fit: cover; }
a.tile:hover .cover, a.tile:focus-visible .cover { transform: translateY(-3px); }
.tile .t { display: flex; gap: 5px; align-items: flex-start; margin-top: 6px; font: 600 12px/1.2 var(--font-text); color: var(--tint, #E8E9EE); }
.tile .t svg { flex: none; width: 11px; height: 11px; margin-top: 1.5px; }
.tile .t span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .s { display: block; margin: 2px 0 0 16px; font: 400 10.5px/1.25 var(--font-text); color: #A4A7B0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the live slot: empty while the recording pastes; the cover flies in when the app has kept it */
.tile.pending .cover { background: transparent; }
.tile.pending .cover img { opacity: 0; }
.tile.pending .cover::after { box-shadow: none; border: 1.5px dashed rgba(255,255,255,.4); }
.tile.pending .cover::before { content: attr(data-wait); position: absolute; inset: 0; display: grid; place-items: center; font: 500 10px/1 var(--font-mono); color: #B7BAC4; }
.tile.pending .t, .tile.pending .s { opacity: .4; }
.tile.landed .cover { animation: land .7s ease-out both; }
@keyframes land { 0% { box-shadow: 0 0 0 4px var(--paste); } 100% { box-shadow: 0 0 0 0 rgba(255,75,75,0); } }
.fly { position: fixed; z-index: 50; border-radius: 12px; overflow: hidden; pointer-events: none; box-shadow: 0 12px 30px rgba(0,0,0,.5); will-change: transform; }
.fly img { width: 100%; height: 100%; object-fit: cover; }

/* ---- hero panel --------------------------------------------------------------- */
.hero .sheet__in { padding-top: 16px; padding-bottom: 28px; display: grid; gap: 18px; }
.hero__grid { display: grid; gap: 18px 12px; grid-template-columns: minmax(0, 1fr) 108px; grid-template-areas: "copy copy" "phone items" "after after" "cols cols" "widgets widgets"; align-items: start; }
.hero__copy { grid-area: copy; display: grid; gap: 10px; justify-items: start; }
.hero__copy .badges { margin-top: 4px; }
.hero__copy .lead { display: none; }
.hero__after { grid-area: after; }
.hero__phone { grid-area: phone; margin: 0; justify-self: center; --ph: clamp(268px, calc(100svh - 335px), 500px); }
.hero__phone .iphone { --w: calc(var(--ph) * .46); }
.hero__phone .motion-note { justify-content: center; }
.hero__items { grid-area: items; --cols: 1; padding: 9px 9px 11px; border-radius: 16px; }
.hero__cols { grid-area: cols; --cols: 3; }
/* widget crops are 2x captures: shown at exactly half their pixel size (x --ws), never smaller; what does not fit is dropped */
.hero__widgets { grid-area: widgets; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero__widgets .crop { flex: none; }
.hero__widgets .crop img { max-width: none; }
.hero__widgets .w-types { display: none; } .hero__widgets .w-types img { width: calc(496px * var(--ws, 1)); }
.hero__widgets .w-sum img { width: calc(129.5px * var(--ws, 1)); } .hero__widgets .w-paste img { width: calc(165px * var(--ws, 1)); } .hero__widgets .w-ask img { width: calc(134.5px * var(--ws, 1)); }
.hero__widgets .mono { flex-basis: 100%; }
@media (min-width: 700px) and (max-width: 999px), (min-width: 1440px) { .hero__widgets .w-types { display: block; } }
.hero__credit { margin: 0; font: 500 10px/1.4 var(--font-mono); color: var(--ink-3); }
@media (max-height: 620px) and (max-width: 699px) { .hero__items li:nth-child(n+3) { display: none; } }
@media (max-width: 699px) {
  :root { --r-sheet: 22px; --pad: 16px; --gap: 6px; }
  .h1 { font-size: clamp(2.75rem, 14vw, 3.6rem); }
  .store-badge img { height: 50px; }
  .brand img { width: 38px; height: 38px; }
  .pillbtn { display: none; }
  .hero .sheet__in { gap: 14px; padding-top: 12px; }
}
@media (min-width: 700px) {
  .hero__grid { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "copy copy" "phone items" "phone cols" "widgets widgets"; gap: 22px 28px; }
  .hero__copy .lead { display: block; } .hero__after { display: none; }
  .hero__phone { --ph: clamp(400px, calc(100svh - 405px), 560px); }
  .hero__items { --cols: 3; align-self: end; padding: 12px 12px 14px; } .hero__cols { --cols: 6; align-self: start; }
  .hero__items, .hero__cols { max-width: 560px; }
  .hero__cols .shelf__row { --cols: 3; }
  .nav { display: flex; gap: 2px; padding: 4px; border-radius: 99px; background: var(--pill); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .nav a { padding: 9px 15px; border-radius: 99px; font: 600 .86rem/1 var(--font-text); text-decoration: none; white-space: nowrap; }
  .nav a:hover, .nav a[aria-current] { background: var(--pill-on); color: var(--pill-on-ink); }
}
@media (min-width: 1000px) {
  .hero { min-height: min(980px, max(700px, calc(100svh - 2 * var(--gap)))); display: grid; }
  .hero .sheet__in { width: 100%; grid-template-rows: auto 1fr; padding: 16px 20px 32px 40px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) auto 262px; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "widgets phone items" "copy phone cols"; gap: 14px 36px; align-items: stretch; }
  .hero__copy { align-self: end; gap: 14px; } .hero__copy .badges { margin-top: 8px; }
  .hero__widgets { align-self: start; margin-top: 18px; gap: 12px; }
  .hero__phone { align-self: center; --ph: clamp(520px, calc(100svh - 190px), 720px); }
  .hero__items { --cols: 2; align-self: end; max-width: none; } .hero__cols { align-self: start; max-width: none; }
  .hero__cols .shelf__row { --cols: 2; }
  .hero__items li:nth-child(n+3), .hero__cols li:nth-child(n+5) { display: none; }
  /* settle in, one after another; the settled state is the default */
  .settle { animation: settle .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 140ms + 250ms); }
}
@keyframes settle { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@media (min-width: 1280px) {
  .hero .sheet__in { padding-right: 32px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) auto 400px; gap: 14px 44px; }
  .hero__items { --cols: 3; } .hero__cols .shelf__row { --cols: 3; }
  .hero__items li:nth-child(n+3), .hero__cols li:nth-child(n+5) { display: block; }
}
@media (min-width: 1700px) { .sheet__in { max-width: 1760px; } .hero .h1 { font-size: 6rem; white-space: nowrap; } .hero__grid { grid-template-columns: minmax(0, 1fr) auto 460px; gap: 14px 56px; } .hero__phone { --ph: clamp(520px, calc(100svh - 200px), 820px); } .hero__widgets { --ws: 1.15; } .tile .t { font-size: 13px; } }


/* ---- kept: real saved things. Phones: a stacked list. Desktop: a row of clear tabs over one calm panel. --- */
.kept__head { display: grid; gap: 16px; }
.acc { display: grid; gap: 8px; margin-top: clamp(22px, 3vw, 40px); }
.acc__item { border-radius: 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); overflow: hidden; min-width: 0; }
.acc__tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: none; border: 0; text-align: left; cursor: pointer; color: #F5F6F8; }
.acc__tab .thumb { width: 44px; height: 44px; border-radius: 10px; flex: none; object-fit: cover; }
.acc__tab .thumb.glyph { display: grid; place-items: center; background: rgba(255,255,255,.12); } .acc__tab .thumb.glyph svg { width: 20px; height: 20px; }
.acc__tab .lab { display: grid; gap: 3px; flex: 1; min-width: 0; }
.acc__tab .name { font: 750 1.05rem/1.15 var(--font-display); letter-spacing: -.02em; }
.acc__tab .src { font: 500 11px/1.2 var(--font-mono); color: #9AA1AF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc__tab .chev { width: 14px; height: 14px; flex: none; margin-right: 4px; transition: transform .3s; }
.acc__item.open .chev { transform: rotate(180deg); }
.acc__panel { display: none; padding: 6px 16px 24px; gap: 22px; }
.acc__item.open .acc__panel { display: grid; }
.acc__text h3 { margin: 0 0 10px; font: 800 clamp(1.6rem, 1rem + 2.2vw, 3.2rem)/1.02 var(--font-display); letter-spacing: -.035em; text-wrap: balance; }
.acc__text p { margin: 0; color: #C3C8D2; max-width: 30em; }
.acc__media { display: flex; justify-content: center; align-items: flex-end; gap: clamp(28px, 3.4vw, 64px); min-width: 0; }
.acc__media .iphone { --w: min(62vw, 240px); }
.acc__media .dev--mac { display: none; }
@media (min-width: 900px) {
  .acc { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; }
  .acc__item { display: contents; }
  .acc__tab { grid-row: 1; padding: 12px 16px 12px 12px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
  .acc__tab:hover { background: rgba(255,255,255,.11); }
  .acc__tab .thumb { width: 48px; height: 48px; }
  .acc__tab .chev { display: none; }
  .acc__item.open .acc__tab { background: #F5F6F8; border-color: #F5F6F8; color: #0A0C12; }
  .acc__item.open .acc__tab .src { color: #4F586B; }
  .acc__item.open .acc__tab .thumb.glyph { background: rgba(10,12,18,.1); }
  .acc__panel { grid-row: 2; grid-column: 1 / -1; border-radius: 28px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); padding: clamp(28px, 3vw, 52px) clamp(28px, 4vw, 72px); grid-template-columns: minmax(0, 30rem) auto; justify-content: center; align-items: center; gap: clamp(40px, 7vw, 150px); min-height: clamp(540px, 42vw, 690px); }
  .acc__text { max-width: 30rem; }
  .acc__media { justify-content: flex-end; }
  .acc__media .iphone { --w: clamp(220px, 15.5vw, 272px); }
}
@media (min-width: 1280px) { .acc__panel:not(:has(.solo)) { grid-template-columns: minmax(0, 1fr) auto; justify-content: normal; gap: clamp(32px, 4vw, 80px); } .acc__media .dev--mac { display: grid; } .acc__media .mbp { --w: clamp(430px, 33vw, 640px); } .acc__media .iphone { --w: clamp(210px, 14.5vw, 264px); } .acc__media.solo .iphone { --w: clamp(220px, 15.5vw, 272px); } }

/* ---- read / listen / ask: three dark cards on the red; the word above, the whole real screen below --- */
.do__head { display: grid; gap: 14px; }
.do__row { display: grid; gap: 10px; margin: clamp(22px, 3vw, 40px) 0 0; list-style: none; padding: 0; }
.card { border-radius: 28px; background: #09090B; color: #fff; padding: clamp(22px, 2.4vw, 36px) clamp(20px, 2.2vw, 34px) clamp(20px, 2vw, 28px); display: grid; grid-template-rows: auto 1fr; gap: clamp(22px, 2.4vw, 34px); }
.card__t { display: grid; gap: 8px; align-content: start; }
.card__t b { font: 800 clamp(2.8rem, 1.6rem + 3.4vw, 4.8rem)/.92 var(--font-display); letter-spacing: -.045em; }
.card__t span { font-size: 1rem; line-height: 1.35; color: #C9CDD6; max-width: 22em; }
.card .dev { align-self: end; }
.card .dev figcaption { color: #9AA1AF; }
.card .iphone { --w: min(60vw, 240px); }
@media (min-width: 760px) { .do__row { grid-template-columns: repeat(3, 1fr); } .card .iphone { --w: clamp(190px, 17.5vw, 290px); } }

/* ---- private: the 0 and its line are one lockup with a measured gap ----------------- */
.priv { display: grid; gap: 32px; }
.priv__lock { display: grid; gap: clamp(18px, 2.2vw, 36px); justify-items: start; }
.priv__zero { font: 800 clamp(9rem, 26vw, 20rem)/.8 var(--font-display); letter-spacing: -.06em; color: var(--kept); margin: 0 0 0 -.05em; padding-top: .02em; }
.priv__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.priv__list li { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.priv__list b { font: 750 clamp(1.25rem, 1rem + 1vw, 1.7rem)/1.2 var(--font-display); letter-spacing: -.02em; } .priv__list span { color: var(--ink-2); font-size: .97rem; }
@media (min-width: 900px) { .priv { grid-template-columns: auto 1fr; gap: clamp(48px, 6vw, 110px); align-items: end; } .priv__list { grid-template-columns: 1fr 1fr; column-gap: 40px; } }

/* ---- devices: one lineup, to scale (one px-per-mm value, --mm), standing on one desk line ---- */
.lineup { container-type: inline-size; margin-top: clamp(30px, 4.5vw, 64px); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.lineup::-webkit-scrollbar { display: none; }
.lineup__row { --g: 28px; --mm: calc(100cqw / 302.4); display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: var(--g); width: max-content; min-width: 100%; list-style: none; margin: 0; padding: 12px 0 4px; }
.lineup__row li { display: contents; }
.lineup__row li > .lineup__dev { grid-row: 1; align-self: end; justify-self: center; scroll-snap-align: center; box-shadow: none; }
.lineup__row li > .dev__cap { grid-row: 2; padding-top: 18px; justify-self: center; text-align: center; }
.lineup__row li:nth-child(1) > * { grid-column: 1; } .lineup__row li:nth-child(2) > * { grid-column: 2; } .lineup__row li:nth-child(3) > * { grid-column: 3; } .lineup__row li:nth-child(4) > * { grid-column: 4; }
.lineup__row::before { content: ""; grid-row: 1; grid-column: 1 / -1; align-self: end; height: 1px; transform: translateY(1px); background: linear-gradient(90deg, transparent, rgba(255,255,255,.38) 6%, rgba(255,255,255,.38) 94%, transparent); }
/* screen widths in mm, from Apple's published pixels and ppi: iPhone 18 Pro 1206 px / 460 ppi, iPhone Duo inner 1878 x 2670 px / 430 ppi,
   iPad Pro 11-inch 2420 px / 264 ppi, MacBook Pro 14-inch 3024 px / 254 ppi (its 1512 x 945 pt window at full screen width) */
.lineup .iphone { --w: calc(var(--mm) * 66.6); } .lineup .duo { --w: calc(var(--mm) * 157.7); } .lineup .ipad { --w: calc(var(--mm) * 232.8); } .lineup .mbp { --w: calc(var(--mm) * 302.4); }
.dev__cap b { display: block; font: 750 1.05rem/1.2 var(--font-display); letter-spacing: -.02em; white-space: nowrap; } .dev__cap .mono { display: block; margin-top: 3px; white-space: nowrap; }
.dev__cap .ok { color: var(--kept); } .dev__cap .rev { color: #F0B45A; }
.lineup__note { margin: 18px 0 0; }
@media (min-width: 1000px) { .lineup { overflow: visible; } .lineup__row { --g: clamp(24px, 3.4cqw, 72px); --mm: min(2.2px, calc((100cqw - 3 * var(--g)) / 759.5)); width: auto; } }

/* ---- closer + footer ------------------------------------------------------------------ */
.closer .sheet__in { display: grid; justify-items: center; text-align: center; gap: 18px; padding-block: clamp(56px, 9vw, 130px); }
.closer .h1 { font-size: clamp(3rem, 9vw, 8rem); }
.closer .badges { justify-content: center; }
.foot .sheet__in { padding-block: 36px; display: grid; gap: 22px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.foot .credits { max-width: 90ch; }

/* ---- ad pages ------------------------------------------------------------------------------ */
.go .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "phone" "cols"; }
.go .hero__copy .lead { display: block; font-size: .97rem; line-height: 1.36; }
.go .hero__copy { gap: 8px; }
.go .hero__phone { --ph: clamp(300px, calc(100svh - 322px), 540px); }
.go .hero__cols { display: none; }
.go .h1 { white-space: nowrap; }
@media (max-width: 699px) { .go .h1 { font-size: clamp(2.3rem, 12vw, 3.4rem); } .go .hero .sheet__in { gap: 10px; } .go .brand img { width: 34px; height: 34px; } }
@media (max-width: 699px) and (max-height: 600px) { .go .store-badge img { height: 46px; } .go .hero__copy { gap: 6px; } .go .hero__phone { --ph: clamp(280px, calc(100svh - 300px), 540px); } }
@media (min-width: 700px) { .go .hero__grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy phone" "cols phone"; align-items: center; } .go .hero__cols { display: block; --cols: 3; max-width: 420px; align-self: start; } .go .hero__copy { gap: 14px; align-self: end; } .go .hero__copy .lead { font-size: 1.1rem; } .go .hero__phone { --ph: clamp(440px, calc(100svh - 150px), 600px); } .go .hero__cols { display: none; } .go .hero__grid { grid-template-areas: "copy phone"; } .go .h1 { font-size: clamp(2.8rem, 6.2vw, 3.6rem); } }
@media (min-width: 1000px) { .go .hero__grid { grid-template-columns: minmax(0, 1.1fr) auto minmax(0, .5fr); grid-template-rows: auto; grid-template-areas: "copy phone cols"; align-items: center; gap: 48px; } .go .hero__copy { align-self: center; } .go .hero__cols { align-self: center; --cols: 1; max-width: 170px; justify-self: start; } .go .hero__cols .shelf__row { --cols: 1; } .go .hero__cols li:nth-child(n+4) { display: none; } .go .hero__cols li:nth-child(-n+3) { display: block; } .go .h1 { font-size: clamp(3.4rem, 5.5vw, 6.2rem); } .go .hero__phone { --ph: clamp(480px, calc(100svh - 150px), 760px); } }
@media (min-width: 1000px) and (max-width: 1279px) { .go .hero__grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy phone"; } .go .hero__cols { display: none; } }
@media (min-width: 1280px) { .go .hero__cols { display: block; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (min-width: 1000px) and (max-width: 1279px) { .hero .h1 { font-size: 2.85rem; } .hero__phone { --ph: clamp(480px, calc(100svh - 270px), 610px); } }
@media (min-width: 700px) and (max-width: 899px) { .go .hero__phone { --ph: clamp(420px, calc(100svh - 150px), 520px); } }
@media (min-width: 700px) and (max-width: 767px) { .go .h1 { font-size: 2.55rem; } }
/* the caption never widens the phone column: the figure is exactly as wide as the phone */
.hero__phone { width: min-content; } .hero__phone .motion-note { justify-content: flex-start; }

/* ==== review r1 ================================================================================================ */
/* hero: visitors who get motion (.hero-pre, set by the inline head script) see the clip's frame 0 and an empty shelf slot from
   first paint; the clip then takes over with a hard swap (same picture). A restart dips through black (.dip). No cross-dissolve. */
.screen > img.first { display: none; }
.hero-pre .screen > img.first { display: block; }
.hero-pre .tile[data-live] .cover { background: transparent; }
.hero-pre .tile[data-live] .cover img { opacity: 0; }
.hero-pre .tile[data-live] .cover::after { box-shadow: none; border: 1.5px dashed rgba(255,255,255,.4); }
.hero-pre .tile[data-live] .t, .hero-pre .tile[data-live] .s { opacity: .4; }
.hero__phone .screen::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; transition: opacity .16s; }
.hero__phone .screen.dip::after { opacity: 1; }
/* widgets stay at their true size; the ones that do not fit on the row are dropped (never shrunk, never a lone second row) */
.hero__widgets { container-type: inline-size; }
@container (max-width: 505px) { .hero__widgets .w-ask { display: none; } }
@container (max-width: 340px) { .hero__widgets .w-sum { display: none; } }
/* kept, four tabs: a 2 x 2 grid below 1200 px, so every tab is one line and nothing is cut off */
@media (min-width: 900px) and (max-width: 1199px) {
  .acc--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc--4 .acc__item:nth-child(odd) .acc__tab { grid-column: 1; } .acc--4 .acc__item:nth-child(even) .acc__tab { grid-column: 2; }
  .acc--4 .acc__item:nth-child(n+3) .acc__tab { grid-row: 2; } .acc--4 .acc__panel { grid-row: 3; }
}
/* kept, panels with the Mac: the text starts at one x and the media column has one width in every panel, so switching tabs
   moves nothing but the content. A single phone is centred in that same column. */
@media (min-width: 1280px) {
  .acc__panel, .acc__panel:not(:has(.solo)) { grid-template-columns: minmax(0, 1fr) auto; justify-content: normal; gap: clamp(32px, 4vw, 80px); }
  .acc__media { --pw: clamp(210px, 14.5vw, 264px); --mw: clamp(430px, 33vw, 640px); --mg: clamp(32px, 3vw, 48px); gap: var(--mg); width: calc(var(--pw) + var(--mg) + var(--mw)); }
  .acc__media .iphone, .acc__media.solo .iphone { --w: var(--pw); } .acc__media .mbp { --w: var(--mw); }
  .acc__media.solo { justify-content: center; }
}
/* private: one column of lines until there is room for two (decided by the list's own width, review r4) */
/* devices below 1000 px: no sideways scroll. Still one scale (--mm) for all four, wrapped onto desk lines:
   iPhone + Duo / iPad / Mac on phones, iPhone + Duo + iPad / Mac on tablets. */
@media (max-width: 999px) {
  .lineup { overflow: visible; }
  .lineup__row { --mm: calc(100cqw / 302.4); display: flex; flex-wrap: wrap; align-items: flex-end; width: auto; min-width: 0; padding: 0; gap: 34px 0; }
  .lineup__row::before { display: none; }
  .lineup__row li { display: grid; justify-items: center; flex: 1 1 auto; }
  .lineup__row li > .lineup__dev, .lineup__row li > .dev__cap { grid-row: auto; grid-column: auto; }
  .lineup__row li > .dev__cap { justify-self: stretch; border-top: 1px solid rgba(255,255,255,.34); }
  .lineup__row li:nth-child(n+3) { flex-basis: 100%; }
}
@media (min-width: 700px) and (max-width: 999px) { .lineup__row { --mm: calc((100cqw - 96px) / 457.1); } .lineup__row li:nth-child(3) { flex-basis: auto; } }
/* ad hero, wide screens: the collections strip fills its column to the content edge, two across */
@media (min-width: 1700px) { .go .hero__cols { justify-self: stretch; max-width: none; --cols: 2; } .go .hero__cols .shelf__row { --cols: 2; } .go .hero__cols li:nth-child(-n+4) { display: block; } }

/* ==== review r2 ================================================================================================ */
/* home hero: the paragraph sits under "Found online. Kept private." at every size (the copy below the phone is gone).
   Phones: headline, line, paragraph, badge, phone + shelf, collections. The Mac widget crops are not shown on phones. */
.hero__copy .lead { display: block; }
@media (max-width: 699px) {
  .hero__grid { grid-template-areas: "copy copy" "phone items" "cols cols"; }
  .hero__copy .lead { font-size: .97rem; line-height: 1.36; }
  .hero__widgets { display: none; }
  .hero__phone { --ph: clamp(268px, calc(100svh - 404px), 500px); }
}
/* small lines never leave one word alone: the Mac note is short below 1200 px, captions wrap evenly */
.mac-long { display: none; }
@media (min-width: 1200px) { .mac-long { display: inline; } }
.motion-note .mono { text-wrap: balance; }
/* My Collections on the narrowest phones: the label loses its glyph and a point of size, so "AI Conversations" is whole */
/* (the label rules are in review r3, where each label is sized from its own tile) */
/* kept, desktop: the headline always takes two lines and ends on the panel's middle line; the paragraph starts just
   under it. Switching tabs moves neither, however long the paragraph is. */
@media (min-width: 900px) {
  .acc__text { align-self: stretch; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .acc__text h3 { align-self: end; max-width: 9em; }
  .acc__text p { align-self: start; }
  .acc__media figcaption { min-height: 2.8em; }   /* one or two caption lines: the panel is the same height for every tab */
}
/* beside the Mac the text column is narrowest just above 1280 px: the headline is set smaller there so it still takes two lines */
@media (min-width: 1280px) and (max-width: 1439px) { .acc__text h3 { font-size: 2.45rem; } }
/* ad hero, phones: the phone is about 40 px shorter so its "Saved from Instagram" caption and control are on the first screen */
@media (max-width: 699px) { .go .hero__phone { --ph: clamp(280px, calc(100svh - 366px), 540px); } }
@media (max-width: 699px) and (max-height: 600px) { .go .hero__phone { --ph: clamp(250px, calc(100svh - 344px), 540px); } }

/* ==== review r3 ================================================================================================ */
/* ---- ad pages: the App Store link has its own strip. It is the top edge of the window on the ad page: full width, opaque,
   there from the first paint with the wordmark in it (the ad hero has no top bar of its own any more). The page starts below
   it (body padding) and every jump lands below it (scroll-padding). Nothing is ever shown through it or beside it, and it
   never slides in over anything: the only thing that changes is the "Get Digext" pill inside it, which shelf.js shows
   while no App Store badge of the page is on screen. No hide rules, no zones. ---- */
.go { --strip: 52px; --strip-h: calc(var(--strip) + env(safe-area-inset-top, 0px)); padding-top: var(--strip-h); }
html:has(body.go) { scroll-padding-top: calc(60px + env(safe-area-inset-top, 0px)); }
.gobar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--strip-h); padding: env(safe-area-inset-top, 0px) var(--gap) 0; background: var(--page); border-bottom: 1px solid var(--line); }
.gobar__in { height: 100%; max-width: 1560px; margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (min-width: 1700px) { .gobar__in { max-width: 1760px; } }
.gobar .brand { font-size: 1.05rem; gap: 9px; }
.gobar .brand img, .go .gobar .brand img { width: 32px; height: 32px; }
.gobar .pillbtn { display: inline-flex; position: relative; height: 38px; padding: 0 16px; white-space: nowrap; visibility: hidden; opacity: 0; transition: opacity .2s, visibility 0s .2s; }
.gobar .pillbtn::after { content: ""; position: absolute; inset: -6px -4px; }   /* a 50 px tall touch target in the 52 px strip */
.gobar.show .pillbtn { visibility: visible; opacity: 1; transition: opacity .2s; }
.go .hero .sheet__in { padding-top: 22px; }
@media (min-width: 1000px) {
  .go .hero { min-height: min(980px, max(640px, calc(100svh - 2 * var(--gap) - var(--strip-h)))); }
  .go .hero .sheet__in { grid-template-rows: minmax(0, 1fr); padding-top: 32px; }
}
/* ---- home header: the section links need 860 px; below that the wordmark and the two buttons have the bar to themselves ---- */
@media (min-width: 700px) and (max-width: 859px) { .nav { display: none; } }
.pillbtn { white-space: nowrap; }
/* ---- ad hero on phones: a 48 px strip; the caption is one centred line under the phone (two at 320), not a column as narrow as
   the phone; the phone is a little shorter on the shortest screens so the caption and its control are on the first screen ---- */
@media (max-width: 699px) {
  .go { --strip: 48px; }
  html:has(body.go) { scroll-padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
  .gobar .pillbtn { height: 36px; }
  .go .hero .sheet__in { padding-top: 10px; }
  .go .hero__phone { width: auto; justify-self: stretch; display: grid; justify-items: center; }
  .go .hero__phone .motion-note { justify-content: center; }
  .go .hero__phone .motion-note .mono { white-space: nowrap; }
}
@media (max-width: 359px) { .go .hero__phone .motion-note .mono { white-space: normal; } }
@media (max-width: 699px) and (max-height: 600px) { .go .hero__phone { --ph: clamp(236px, calc(100svh - 358px), 540px); } }
/* ---- home hero, phones: the phone is about 50 px shorter, so its control is on the first screen of a 390 x 844 phone ---- */
@media (max-width: 699px) { .hero__phone { --ph: clamp(268px, calc(100svh - 456px), 500px); } }
/* the figure may be wider than the phone (never wider than the column), with the phone centred in it */
@media (max-width: 699px) { .hero__phone { width: auto; max-width: 100%; display: grid; justify-items: center; } .hero__phone .motion-note { justify-content: center; } }
/* ---- home headline, 1280 to 1699 px: sized from its own column (which narrows as the window gets taller and the phone wider),
   so "Forever yours." is always one line and the headline always two ---- */
@media (min-width: 1280px) and (max-width: 1699px) {
  .hero__copy { container-type: inline-size; }
  .hero .h1 { font-size: min(clamp(3.3rem, 5.7vw, 6.4rem), 15.6cqw); }
}
/* ---- My Collections labels: each label is sized from its own tile, so "AI Conversations" is one line like the others at every
   width. Narrow tiles drop the glyph before the type goes under 11 px; the type never goes under 10 px. ---- */
.hero__cols .tile { container-type: inline-size; }
.hero__cols .tile .t { letter-spacing: -.01em; font-size: clamp(10px, calc((100cqw - 18px) / 8.5), var(--tfs, 12px)); }
@container (max-width: 112px) { .hero__cols .tile .t svg { display: none; } .hero__cols .tile .t { font-size: clamp(10px, calc(100cqw / 8.5), var(--tfs, 12px)); } }
@media (min-width: 1700px) { .hero__cols { --tfs: 13px; } }
/* ---- captions under the panel phones wrap evenly: no word alone on the second line ---- */
.acc__media figcaption { text-wrap: balance; }

/* ==== review r4: bare screens ================================================================================== */
/* ---- bare screens on the day sky: the hero screen's edge. On the light sky (light theme, home and ad page) the ring is a
   dark hairline and the shadow is the sky's blue one; in dark the hero is the night, so it is the default white hairline.
   One 1 px ring outside the box (no pixel of footage is covered) and one soft shadow, nothing else. ---- */
:root { --hero-ring: rgba(11,13,20,.10); --hero-shadow: 0 28px 60px -28px rgba(20,30,70,.45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-ring: rgba(255,255,255,.14); --hero-shadow: 0 30px 60px -30px rgba(0,0,0,.7); } }
:root[data-theme="dark"] { --hero-ring: rgba(255,255,255,.14); --hero-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.hero .screen { box-shadow: 0 0 0 1px var(--hero-ring), var(--hero-shadow); }
/* ---- hero screens keep the old phone's place: the bare screen is as tall as the old phone was (--ph; --w = --ph x 402/874,
   set in the hero block), and from 700 px the figure keeps the old phone's column width with side margins, so the screen's
   centre and its control do not move. ---- */
@media (min-width: 700px) { .hero__phone { margin-inline: calc(var(--ph) * .0098); } }

/* ---- private: the approved list, in its order. The four short lines are a 2 x 2 (Stored | On-device AI, then No account |
   No tracking in the app) with the Cloud line across both columns as the last row, wherever every line of that grid fits on
   one line: the list must be 620 px wide (the Cloud line at the 27.2 px type; the short lines need 2 x 275 + 40 = 590), which
   beside the 0 happens from about 1290 px. Narrower lists (900 px to about 1290 px, as in v3 from 900 to 1199 px) keep one
   column in the same order; below 900 px it is one column under the 0, as before. ---- */
@media (min-width: 900px) {
  .priv__list { container-type: inline-size; grid-template-columns: 1fr 1fr; }
  .priv__list li:last-child { grid-column: 1 / -1; }
}
@container (max-width: 619px) { .priv__list li { grid-column: 1 / -1; } }
/* in one column the Cloud line takes two lines; it breaks evenly, never one word alone */
.priv__list b { text-wrap: balance; }

/* ---- home hero on short phones (up to 720 px tall): the headline, "Found online. Kept private." and the badge stay above the
   phone; the paragraph and the small print move under the phone and shelf (CSS only: the copy column lends its children to
   the hero grid), and the screen is clamp(236px, 100svh - 346px, 500px) tall, so the screen and the 44 px row under it
   (its control) are on the first screen (346, not the brief's 330; measured row bottoms 560 of 568, 629 of 640, 660 of 667). Up to 720 px tall, so 375 x 701, 390 x 705 and 414 x 715 are covered too.
   Taller phones keep the r3 rule (the paragraph under its headline). ---- */
@media (max-width: 699px) and (max-height: 720px) {
  body:not(.go) .hero__grid { grid-template-areas: "h1 h1" "sup sup" "badges badges" "phone items" "lead lead" "fine fine" "cols cols"; row-gap: 10px; }
  body:not(.go) .hero__copy { display: contents; }
  body:not(.go) .hero__copy > .h1 { grid-area: h1; }
  body:not(.go) .hero__copy > .support { grid-area: sup; }
  body:not(.go) .hero__copy > .badges { grid-area: badges; margin-top: 4px; }
  body:not(.go) .hero__copy > .lead { grid-area: lead; margin-top: 8px; }
  body:not(.go) .hero__copy > .fine { grid-area: fine; }
  body:not(.go) .hero__phone { --ph: clamp(236px, calc(100svh - 346px), 500px); margin-top: 8px; }
}

/* ---- My Collections below 360 px: two columns (three rows), so "AI Conversations" is one line at the type size it has on every
   other phone, never smaller ---- */
@media (max-width: 359px) { .hero__cols { --cols: 2; } }
#hero-loop { transition: none; }

/* ==== production fixes (after the last review) ==================================================================== */
/* ---- home hero on short phones wider than 375 px: the two-line headline grows with the width (14vw, up to 3.6rem), up to
   about 10 px taller at 414 px than at 375 px. The screen gives that back, so its control stays on the
   first screen (414 x 715 too). At 375 px this is exactly the rule above, clamp(236px, 100svh - 346px, 500px). ---- */
@media (min-width: 376px) and (max-width: 699px) and (max-height: 720px) {
  body:not(.go) .hero__phone { --ph: clamp(236px, calc(100svh - 246px - min(26.6vw, 109.44px)), 500px); }
}

/* ---- ad hero, 700 to 1279 px: the caption under the screen ("Saved from Instagram · plays inside Digext") is one line.
   It may be wider than the screen: it is centred under the screen and runs past both of its edges, as on phones, while
   the figure (and so the phone column and the screen's centre) stays exactly as wide as the screen. ---- */
@media (min-width: 700px) and (max-width: 1279px) {
  .go .hero__phone .motion-note { width: 0; min-width: 100%; justify-content: center; }
  .go .hero__phone .motion-note .mono { flex: none; white-space: nowrap; }
}
/* from 768 to 999 px the copy beside it ends level with the screen's bottom edge, so its last line (the small print, long
   once the Mac note shows) never runs into that caption */
@media (min-width: 768px) and (max-width: 999px) { .go .hero__copy { margin-bottom: 44px; } }

/* ---- devices row, 1000 to 1199 px: the iPhone's column is as wide as its caption ("Available now", about 86 px), wider
   than its screen (71 px at 1000 px), so the row ran up to 15 px past the sheet's content edge until about 1185 px. In
   this range the one scale (--mm) also leaves room for that caption: all four screens shrink together, so their true
   relative sizes stay. ---- */
@media (min-width: 1000px) and (max-width: 1199px) {
  .lineup__row { --mm: min(2.2px, calc((100cqw - 3 * var(--g)) / 759.5), calc((100cqw - 3 * var(--g) - 88px) / 692.9)); }
}

/* ---- /go/meta/ (retired, no pixel): its App Store link is a plain pill, drawn like the ChatGPT ad page's button ---- */
.go .button.primary { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 26px; border-radius: 999px; background: var(--pill-on); color: var(--pill-on-ink); font: 700 1.06rem/1.1 var(--font-text); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.go .button.primary:active { opacity: .85; }

/* ---- media controls: Apple's inline-media pattern. One small round button per clip, no text, outside the screen at its
   bottom right, so it never covers the app. Pause while the clip plays, Play while it is paused; every clip loops, so
   there is no Replay (/assets/shelf/shelf.js sets data-state and the aria-label to match). 36 px across with a 44 px
   hit area; a translucent fill with a backdrop blur: Apple's dark style on the night sheets and the black cards (and on
   the hero in dark), the site's light pill on the day sky. ---- */
.mctl { --mctl-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='2.6' y='1.6' width='3' height='10.8' rx='1'/%3E%3Crect x='8.4' y='1.6' width='3' height='10.8' rx='1'/%3E%3C/svg%3E");
  position: relative; flex: none; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: rgba(255,255,255,.92); background: rgba(66,66,69,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  -webkit-tap-highlight-color: transparent; transition: background-color .2s; }
.mctl::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.mctl::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--mctl-i) center / contain no-repeat; mask: var(--mctl-i) center / contain no-repeat; }
.mctl[data-state="play"] { --mctl-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 2.1v9.8c0 .8.9 1.3 1.6.9l7.5-4.9c.6-.4.6-1.3 0-1.7L5.2 1.2c-.7-.4-1.6.1-1.6.9z'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .mctl:not([data-state]) { --mctl-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 2.1v9.8c0 .8.9 1.3 1.6.9l7.5-4.9c.6-.4.6-1.3 0-1.7L5.2 1.2c-.7-.4-1.6.1-1.6.9z'/%3E%3C/svg%3E"); } }
.mctl:hover { background-color: rgba(84,84,88,.8); }
.mctl:focus-visible { border-radius: 50%; }
:root[data-theme="light"] .sheet--sky .mctl { color: #0A0C12; background-color: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(10,12,18,.1); }
:root[data-theme="light"] .sheet--sky .mctl:hover { background-color: rgba(255,255,255,.82); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .sheet--sky .mctl { color: #0A0C12; background-color: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(10,12,18,.1); }
  :root:not([data-theme="dark"]) .sheet--sky .mctl:hover { background-color: rgba(255,255,255,.82); }
}
/* where it sits. Under the screen's right edge where nothing or only a short centred label is under the screen: the home
   hero (no caption: the control's row is the 44 px the caption row had, 8 + 36, so the first-screen fits stay) and the
   Read, Listen and Ask cards (level with the centred "iPhone", inside the card's padding). The devices row's one control
   is placed in the pass 8c / 8d block at the end. */
.hero__phone .iphone > .mctl, .card .iphone > .mctl { position: absolute; right: 0; top: calc(100% + 8px); }
body:not(.go) .hero__phone { padding-bottom: 44px; }
.card .iphone > .mctl { top: calc(100% + 4px); }
/* where the caption under the screen may be wider than the screen (the kept clips; the ad hero's motion-note row), the
   control is the caption row's last item */
figure.dev figcaption.ctl-cap { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ctl-cap .mono { min-width: 0; text-wrap: balance; }
/* kept, desktop: every caption row is as tall as the control, so the panel keeps one height for every tab */
@media (min-width: 900px) { .acc__media figcaption { min-height: 36px; align-content: center; } }

/* ==== pass 8c / 8d: the same item on iPad, play-once clips, the devices row under one control ======================= */
/* ---- kept, "The reel" and "The video": the same saved item on iPad, a still in the Mac window's slot. Like the Mac it is
   hidden (and, through its sizes, never loaded) below 1280 px; from 1280 px it is as wide as the Mac window (--mw), --mg
   from the phone, bottom-aligned with it, so the phone sits where it sits beside the Mac and switching tabs moves nothing.
   Its caption row is as tall as the others (the 900 px rules above). ---- */
.acc__media .dev--pad { display: none; }
@media (min-width: 1280px) {
  .acc__media .dev--pad { display: grid; } .acc__media .ipad { --w: var(--mw); }
  /* beside the iPad the phone's figure is only as wide as the phone, so its long caption ("Saved from Instagram · plays
     inside Digext · @temptingtastebud") would take three lines and lift the phone 10 px above the iPad. The caption row
     runs 36 px past both sides of the phone instead (into the gaps, which are at least 38 px; centred, as the ad hero's
     caption does), so it is two lines in the 36 px row in Chrome and in Safari (whose mono is about 2.5% wider), the
     screens' bottoms and the caption rows line up, and the panel keeps its height. Negative margins, so the figure (and
     the phone's x) stays exactly as wide as the phone. */
  .acc__media:has(> .dev--pad) > .dev:first-child > figcaption.ctl-cap { justify-self: stretch; margin-inline: -36px; }
}

/* ---- a start from frame 0 over a different picture (a still that is the clip's LAST frame, as when a loop restarts) dips through
   black: .dip on the screen (or the Mac window) fades this layer in, the clip goes to frame 0 under it and appears at once
   (no fade of its own, so never a cross-dissolve), then the black fades out as it plays ---- */
.screen::after, .mbp::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; transition: opacity .16s; }
.screen.dip::after, .mbp.dip::after { opacity: 1; }
.screen.dip > video, .mbp.dip > video { transition: none; }
/* ---- a clip that has reached its end rests, for its 1.5 s hold before the loop plays again, on a STILL of its last frame,
   not on the paused clip (a paused clip that leaves the view comes back in WebKit snapped to an earlier frame). Where the
   poster is the last frame (the hero, the devices row) the clip simply hides over it; "The page" reader, whose poster is
   its first frame, has its end still (img.end) on top while .fin is on its screen. ---- */
.screen > img.end { opacity: 0; }
.screen.fin > img.end { opacity: 1; }

/* ---- the devices row's Mac clip. The window still has its own transparent corners; the clip has none, so the clip and its
   dip carry the window's corners, measured from the capture's alpha: about 20 px at the top and 37 px at the bottom of the
   1800 x 1126 window (here as fractions of its width / height). The filter's hairline then follows the same outline. ---- */
.mbp { position: relative; }
.mbp > video, .mbp::after { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 1.11% 1.11% 2.04% 2.04% / 1.78% 1.78% 3.27% 3.27%; }
.mbp > video { object-fit: cover; opacity: 0; transition: opacity .3s; }
.mbp > video.on { opacity: 1; }

/* ---- devices row: ONE control for its clips (iPhone, Duo, iPad, Mac move together). It is not part of the row, so it never
   wraps or scrolls with the devices. From 1000 px it sits at the row's right edge on the caption line, under the desk line
   (its centre level with the two-line captions); below 1000 px, where the row wraps, it sits right-aligned under the
   lineup, above the credit note. ---- */
.lineup > .mctl { display: block; margin: 14px 0 0 auto; }
@media (min-width: 1000px) { .lineup { position: relative; } .lineup > .mctl { position: absolute; right: 0; bottom: 5px; margin: 0; } }

/* ==== home hero, 600 to 1439 px (fable14 plan). Home only: every rule is body:not(.go). Goes at the END of shelf.css. ==== */

/* ---- A. widgets, 600 to 1439: never dropped, never shrunk. One switch, decided by the widget box's own width:
        512 px or more  = Content Types on top, Summary + Paste + Ask Digext in a row under it (208 px tall)
        under 512 px    = Summary, Paste, Ask Digext stacked, left edges in line (190 px tall); Content Types (512 px wide) cannot fit
        The box is its own query container, so the switch is made on the children (grid-column), never on the box. ---- */
@media (min-width: 600px) and (max-width: 1699px) {  /* owner 2026-11-12: also 1440-1699 */
  body:not(.go) .hero__widgets { display: grid; grid-template-columns: max-content max-content minmax(max-content, 1fr); justify-content: start; justify-items: start; align-items: center; gap: 12px; }
  body:not(.go) .hero__widgets .crop { display: block; }
  body:not(.go) .hero__widgets .w-types { grid-column: 1 / -1; }
  @container (max-width: 511.98px) {
    body:not(.go) .hero__widgets .crop { grid-column: 1; }
    body:not(.go) .hero__widgets .w-types { display: none; }
  }
}

/* ---- B. composed hero, now from 900 (was 1000) to 1439: the first row is as tall as its content (widgets | On the shelf),
        not the spare height. Widgets, screen and On the shelf start on one line; the headline starts level with My Collections,
        right under the widgets. Spare height goes under the copy and the collections; the grid is centred in the sheet. ---- */
@media (min-width: 900px) and (max-width: 1699px) {  /* owner 2026-11-12: also 1440-1699 */
  body:not(.go) .hero .sheet__in { grid-template-rows: auto 1fr auto; }
  body:not(.go) .hero__grid { grid-template-rows: auto 1fr; align-self: center; }
  body:not(.go) .hero__copy { align-self: start; }
  body:not(.go) .hero__phone { align-self: start; }
}
/* 900 to 999: the same composed hero as at 1000, a little tighter; every value meets the 1000 px value at 1000 */
@media (min-width: 900px) and (max-width: 999px) {
  body:not(.go) .hero { min-height: min(980px, max(700px, calc(100svh - 2 * var(--gap)))); display: grid; }
  body:not(.go) .hero .sheet__in { width: 100%; padding: 16px 20px 32px 40px; }
  body:not(.go) .hero__grid { grid-template-columns: minmax(0, 1fr) auto clamp(240px, calc(22vw + 42px), 262px); grid-template-areas: "widgets phone items" "copy phone cols"; gap: 14px clamp(28px, calc(8vw - 44px), 36px); align-items: stretch; }
  body:not(.go) .hero__copy { gap: 14px; container-type: inline-size; }
  body:not(.go) .hero__copy .badges { margin-top: 8px; }
  body:not(.go) .hero .h1 { font-size: min(2.85rem, 15.6cqw); }
  body:not(.go) .hero__widgets { align-self: start; margin-top: 18px; }
  body:not(.go) .hero__phone { --ph: clamp(480px, calc(100svh - 270px), min(610px, calc(130vw - 690px))); }
  body:not(.go) .hero__items { --cols: 2; align-self: end; max-width: none; }
  body:not(.go) .hero__cols { --cols: 2; align-self: start; max-width: none; }
  body:not(.go) .hero__cols .shelf__row { --cols: 2; }
  body:not(.go) .hero__items li:nth-child(n+3), body:not(.go) .hero__cols li:nth-child(n+5) { display: none; }
}

/* ---- C. two-up hero, 600 to 899: copy and On the shelf on the left, the screen on the right from the top bar down,
        My Collections (six across) and the widgets under both. ---- */
@media (min-width: 600px) and (max-width: 899px) {
  body:not(.go) .hero__grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto auto; grid-template-areas: "copy phone" "items phone" "cols cols" "widgets widgets"; gap: 22px 28px; align-items: start; }
  body:not(.go) .hero__copy { display: grid; container-type: inline-size; }
  body:not(.go) .hero__copy > .h1, body:not(.go) .hero__copy > .support, body:not(.go) .hero__copy > .badges, body:not(.go) .hero__copy > .lead, body:not(.go) .hero__copy > .fine { grid-area: auto; }
  body:not(.go) .hero__copy > .lead { margin-top: 0; }
  body:not(.go) .hero .h1 { font-size: min(3.3rem, 15.6cqw); }
  body:not(.go) .hero__phone { --ph: clamp(400px, min(calc(100svh - 150px), calc(30vw + 276px)), 520px); width: min-content; max-width: none; display: block; margin-top: 0; justify-self: end; }
  body:not(.go) .hero__items { --cols: 3; align-self: end; width: 100%; max-width: 440px; padding: 12px 12px 14px; }
  body:not(.go) .hero__items li:nth-child(n+3) { display: block; }
  body:not(.go) .hero__cols { --cols: 6; max-width: none; }
  body:not(.go) .hero__cols .shelf__row { --cols: 6; }
}
@media (min-width: 600px) and (max-width: 639px) { body:not(.go) .hero__cols .shelf__row { column-gap: 5px; } }

/* ---- home hero, 431 to 599 px (wider than any phone, narrower than the two-up hero). Owner, 2026-11-12: a wider phone, and
   On the shelf beside it as a wider panel with its cards side by side. The phone and the panel are one pair, 24 px apart,
   tops level, centred in the sheet between equal flexible gutters; the copy and My Collections still span the full width.
   - The screen takes the width first: (content - 60 px) / 1.8, at most 240 px (182 px at 431, 209 at 480, 231 at 520, 240
     from about 536), the width that still leaves the panel two covers of 0.4 x the screen (24 px gap; the panel's 1 px
     border, 12 px padding, covers 10 px apart).
   - The panel takes what is left, up to the screen + 36 px (covers of 0.5 x the screen): once the screen is 240 px its
     covers grow from 0.4 to 0.5 of it (at 599: 120 px covers, 7.5 px gutters).
   - Four items (the markup: Hubble, ChatGPT, Webb and the saved reel): a 2 x 2 grid. With three it would show the first two
     in one row and hide the third, as from 900 to 999 px.
   - The hero grid is the query container, so the screen (100cqw) and the panel's cap (100%) are both measured on the sheet's
     content box: a classic scrollbar never makes the pair wider than the sheet.
   - The screen is width-driven at every height (the owner chose the wider phone), so its control's bottom is 846 to 954 px
     down the page: below the first screen of any window shorter than that, short ones included. Short windows (up to
     720 px tall) keep their own row order, and there the panel steps down the phone's 8 px, so the tops stay level. ---- */
@media (min-width: 431px) and (max-width: 599px) {
  body:not(.go) .hero__grid { container-type: inline-size; column-gap: 0;
    grid-template-columns: minmax(0, 1fr) auto 24px minmax(0, calc(min(240px, (100% - 60px) / 1.8) + 36px)) minmax(0, 1fr);
    grid-template-areas: "copy copy copy copy copy" ". phone . items ." "cols cols cols cols cols"; }
  body:not(.go) .hero__phone { --ph: calc(min(240px, (100cqw - 60px) / 1.8) / .46); }
  body:not(.go) .hero__items { --cols: 2; padding: 12px 12px 14px; }
  body:not(.go) .hero__items li:nth-child(n+3) { display: none; }
  body:not(.go) .hero__items:has(li:nth-child(4)) li:nth-child(-n+4) { display: block; }
  @media (max-height: 720px) {
    body:not(.go) .hero__grid { grid-template-areas: "h1 h1 h1 h1 h1" "sup sup sup sup sup" "badges badges badges badges badges" ". phone . items ." "lead lead lead lead lead" "fine fine fine fine fine" "cols cols cols cols cols"; }
    body:not(.go) .hero__items { margin-top: 8px; }
  }
}

/* ---- the hero's fourth shelf item (the saved reel) is there for the 2 x 2 grid from 431 to 599 px (above, where
   .hero__items:has(li:nth-child(4)) shows it); at every other width On the shelf shows the first three, as before. ---- */
body:not(.go) .hero__items li:nth-child(n+4) { display: none; }