/* Crest site, final design (The Stage). One stylesheet for every page, and the shell for the SEO pages.
   Layout concept: the browser window is the Mac screen. The nav is the menu bar around a real-size notch,
   and the film lives in that notch.
   Colour: C, Light (Zack, 2026-10-29). The other directions, the switcher and Ambient were dropped.
   Every component reads the tokens below, never a literal, so a direction is one block of values.
   The notch is #000 in every direction, because it is the hardware. */
@font-face{ font-family:"Martian Mono"; font-style:normal; font-weight:100 800; font-stretch:75% 112.5%; font-display:swap;
  src:url(/fonts/martian-mono-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212 }
:root{
  --notch:#000000;
  --mac-blue:#2F6FEB;
  --sys:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --sysd:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --mono:"Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --code:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --spring:cubic-bezier(.2,.9,.25,1.06);
  --bg:#FFFFFF;
  --bg-2:#F5F5F7;
  --ink:#1D1D1F;
  --ink-2:#6E6E73;
  --line:#D2D2D7;
  --card:#F5F5F7;
  --card-ink:#1D1D1F;
  --card-ink-2:#6E6E73;
  --card-line:transparent;
  --card-blur:none;
  --accent:#0066CC;
  --k-ink:#6E6E73;
  --btn-bg:#0071E3;
  --btn-hover:#0062C3;
  --btn-press:#00529F;
  --btn-ink:#FFFFFF;
  --btn2-ink:#0066CC;
  --btn2-line:#0071E3;
  --btn2-hover:rgba(0,113,227,.06);
  --tile:#E3EEF9;
  --pill-bg:#F5F5F7;
  --pill-hover:#EBEBF0;
  --pill-line:transparent;
  --pl-bg:#0071E3;
  --pl-ink:#FFFFFF;
  --bar-base:#FFFFFF;
  --bar-tint:0%;
  --bar-ink:#1D1D1F;
  --bar-hover:rgba(0,0,0,.07);
  /* 2026-10-30: solid. At .985 with no blur behind it, the hero's headline and buttons read through the phone
     sheet and the Features menu as grey ghosts. */
  --menu-bg:#F6F6F6;
  --menu-ink:#1D1D1F;
  --menu-muted:#6E6E73;
  --menu-sep:rgba(0,0,0,.1);
  --menu-hl:#0A64D8;
  --menu-hl-ink:#FFFFFF;
  --menu-ring:rgba(0,0,0,.18);
  --shot-ring:rgba(0,0,0,.08);
  --shot-shadow:0 34px 64px -34px rgba(0,0,0,.42);
  --veil:rgba(250,250,252,.84);
  --notch-edge:transparent;
  --doc-page:#F5F5F7;
  --doc-bg:#FFFFFF;
  --doc-ink:#1D1D1F;
  --doc-ink-2:#6E6E73;
  --doc-line:#E5E5EA;
  --code-bg:#F2F2F5;
  --pre-bg:#F5F5F7;
  --pre-ink:#1D1D1F;
  --thead:#F5F5F7;
  /* 2026-10-29: the forms the design never drew (sign in, the Buy box, /account). A field is white with a
     1px border dark enough to be seen (3:1 non-text contrast; --card-line is transparent in C), the radius
     of .btn-sm, and the accent ring on focus. State words are dark enough for AA on white and on their tint. */
  --field-bg:#FFFFFF;
  --field-line:#86868B;
  --field-r:12px;
  --st-ok:#1A7F37;
  --st-okbg:rgba(26,127,55,.09);
  --st-warn:#9A5600;
  --st-warnbg:rgba(160,90,0,.1);
  --st-bad:#C4001A;
  --st-badbg:rgba(196,0,26,.07);
  /* 2026-10-29: the scene colour the menu bar and the screen mix with (the design's site.css C block sets it;
     without it both color-mix() backgrounds were invalid and the menu bar painted nothing behind its blur). --tint is
     how much of it the screen takes: none in C, as the design's base block says. */
  --wall:#FFFFFF;
  --tint:0%;
  color-scheme:light;
  padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px);
}
@supports (transition-timing-function: linear(0, 1)){
  :root{ --spring:linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001) }
}

*, *::before, *::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.55 var(--sys); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:90; background:var(--bg) }
img, video{ max-width:100%; display:block }
img{ height:auto }
[hidden]{ display:none !important }
a{ color:inherit }
button{ font:inherit; color:inherit }
:focus-visible{ outline:2.5px solid var(--mac-blue); outline-offset:3px; border-radius:8px }
.skip{ position:absolute; left:12px; top:-60px; z-index:100; padding:10px 14px; border-radius:10px; background:var(--btn-bg); color:var(--btn-ink); text-decoration:none; font-weight:600 }
.skip:focus{ top:12px }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ---------- the screen ---------- */
body{ container:site / inline-size; position:relative; min-height:100vh; overflow-x:clip; color:var(--ink);
  background:var(--bg); background:color-mix(in srgb, var(--wall) var(--tint), var(--bg)); transition:background-color .8s ease; isolation:isolate }
:root{ --gut:72px; --bar:38px }
.wrap{ width:100%; max-width:calc(1296px + 2 * var(--gut)); margin:0 auto;
  padding-left:max(var(--gut), env(safe-area-inset-left, 0px)); padding-right:max(var(--gut), env(safe-area-inset-right, 0px)) }

/* ---------- type ---------- */
.k{ display:flex; align-items:center; gap:10px; margin:0 0 18px; font:500 12px/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--k-ink) }
.h1{ margin:0; font:700 76px/.98 var(--sysd); letter-spacing:-.045em; text-wrap:balance }
.h2{ margin:0; font:700 52px/1.03 var(--sysd); letter-spacing:-.036em; text-wrap:balance }
.lead{ margin:22px 0 0; max-width:34em; font-size:21px; line-height:1.45; letter-spacing:-.012em; color:var(--ink-2) }
.body{ margin:18px 0 0; max-width:31em; font-size:18px; line-height:1.55; color:var(--ink-2) }
.meta{ margin:16px 0 0; font-size:14px; line-height:1.45; color:var(--ink-2) }
.lead, .body, .meta, .fact p, .qa details p, .wdg-p, .pp-sub, .pc-fine, .pf p, .doc p, .doc li{ text-wrap:pretty }

/* ---------- buttons ---------- */
.btns{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:30px }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 22px; border:0; border-radius:14px;
  font:600 17px/1.1 var(--sys); letter-spacing:-.01em; text-decoration:none; text-align:center; cursor:pointer; transition:transform .25s var(--spring), background-color .2s ease, box-shadow .2s ease }
.btn:active{ transform:scale(.97) }
.btn-pri{ background:var(--btn-bg); color:var(--btn-ink) }
.btn-sec{ background:transparent; color:var(--btn2-ink); box-shadow:inset 0 0 0 1.5px var(--btn2-line) }
/* 2026-10-30 (Zack: the outlined hover was "too meh"): secondary fills with the accent, primary darkens and lifts, both
   press, and the focus ring keeps the button's shape. White on #0071E3 4.7:1, hover 5.9:1, pressed 7.8:1. */
.btn-pri:hover, .btn-white:hover{ background:var(--btn-hover); box-shadow:0 8px 18px -10px rgba(0,82,159,.7); transform:translateY(-1px) }
.btn-sec:hover, .btn-glass:hover, .btn-line:hover, .btn-cloud:hover{ background:var(--btn-bg); color:var(--btn-ink);
  box-shadow:inset 0 0 0 1.5px var(--btn-bg), 0 8px 18px -10px rgba(0,82,159,.7); transform:translateY(-1px) }
.btn-pri:active, .btn-white:active{ background:var(--btn-press); box-shadow:none; transform:scale(.97) }
.btn-sec:active, .btn-glass:active, .btn-line:active, .btn-cloud:active{ background:var(--btn-press); color:var(--btn-ink); box-shadow:inset 0 0 0 1.5px var(--btn-press); transform:scale(.97) }
.btn:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:14px }
.btn-sm:focus-visible{ border-radius:12px }
.jump:focus-visible{ border-radius:999px }
.btn-sm{ min-height:44px; padding:0 18px; font-size:15.5px; border-radius:12px }
.pl{ flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--pl-bg) }
.pl::before{ content:""; width:0; height:0; margin-left:2px; border-style:solid; border-width:5.5px 0 5.5px 9px; border-color:transparent transparent transparent var(--pl-ink) }
.btn-play{ display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 8px; border:0; background:none; color:var(--ink); font:600 17px/1 var(--sys); letter-spacing:-.01em; cursor:pointer }
.btn-play .t, .jump .t{ font:500 12.5px/1 var(--mono); color:var(--accent); letter-spacing:0 }
.jump{ display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:7px 15px 7px 7px; border:0; border-radius:999px; background:var(--pill-bg);
  color:var(--ink); font:600 15px/1 var(--sys); text-decoration:none; cursor:pointer; box-shadow:0 0 0 1px var(--pill-line); transition:background-color .2s ease }
.jump:hover{ background:var(--pill-hover) }
.jump .pl{ width:26px; height:26px }
.jump .pl::before{ border-width:4.5px 0 4.5px 7.5px }
.links{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:26px }
.links .jump{ margin-top:0 }
.tlink{ font-weight:600; font-size:16px; color:var(--accent); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px }

/* ---------- menu bar ---------- */
.mb{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:50; height:var(--bar); display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));
  font:500 14px/1 var(--sys); letter-spacing:-.005em; color:var(--bar-ink);
  background:var(--bar-base); background:color-mix(in srgb, color-mix(in srgb, var(--wall) var(--bar-tint), var(--bar-base)) 74%, transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(18px); backdrop-filter:saturate(1.6) blur(18px); transition:background-color .8s ease }
.mb-l, .mb-r{ display:flex; align-items:center; gap:2px; min-width:0; white-space:nowrap }
.mb-m{ position:relative }
.mb-i, .mb-brand{ display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 9px; border:0; border-radius:7px; background:none; color:inherit; font:inherit; text-decoration:none; cursor:default }
a.mb-i, .mb-brand, .mb-dd{ cursor:pointer }
.mb-i:hover, .mb-i[aria-expanded="true"], .mb-brand:hover{ background:var(--bar-hover) }
.mb-i[aria-current="page"]{ font-weight:650 }
.mb-brand{ font-weight:700 }
.mb-brand img{ width:18px; height:18px; border-radius:4.5px }
/* 2026-10-30: the Crest menu's items are on the bar; a dropdown shows a caret that turns while open; Sign in is a button */
.mb{ --in-line:rgba(0,0,0,.24); --in-line-hover:rgba(0,0,0,.42); --mm-hover:rgba(0,0,0,.055);
  --g-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E") }
.mb-dd{ gap:5px; padding-right:7px }
.mb-car{ opacity:.6; transition:transform .2s ease }
.mb-dd[aria-expanded="true"] .mb-car{ transform:rotate(180deg) }
.mb-in{ display:inline-flex; align-items:center; gap:6px; height:26px; margin-left:6px; padding:0 11px 0 9px; border-radius:7px; color:var(--bar-ink); font-weight:600; font-size:13px; text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--in-line); transition:background-color .15s ease, box-shadow .15s ease }
.mb-in::before{ content:""; flex:none; width:14px; height:14px; background:currentColor; -webkit-mask:var(--g-user) center / contain no-repeat; mask:var(--g-user) center / contain no-repeat }
.mb-in:hover{ background:var(--bar-hover); box-shadow:inset 0 0 0 1px var(--in-line-hover) }
.mb-dl{ display:inline-flex; align-items:center; height:26px; margin:0 6px; padding:0 12px; border-radius:7px; background:var(--btn-bg); color:var(--btn-ink); font-weight:600; font-size:13px; text-decoration:none; transition:background-color .15s ease }
.mb-dl:hover{ background:var(--btn-hover) }
.mb-dl:active{ background:var(--btn-press) }
.mb-dl:focus-visible, .mb-in:focus-visible{ outline-offset:2px; border-radius:7px }
.mb-sprite{ position:absolute; width:0; height:0; overflow:hidden }
.mb-clock{ padding:0 8px; font-variant-numeric:tabular-nums }
.mb-burger{ display:none; width:40px; height:36px; border:0; border-radius:8px; background:none; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px }
.mb-burger i{ display:block; width:20px; height:2px; border-radius:1px; background:currentColor }
/* the menu bar's blur makes it the backdrop root, so a menu inside it cannot blur the page: menus are (nearly) solid */
.mb-menu{ position:absolute; top:calc(100% + 5px); left:0; z-index:70; color:var(--menu-ink); background:var(--menu-bg);
  box-shadow:0 0 0 .5px var(--menu-ring), 0 18px 44px -12px rgba(0,0,0,.4) }
/* one component for the dropdowns and the phone sheet: a glyph on its tile (or the app's icon), a title, a line */
.mm{ padding:8px; border-radius:16px; font:400 14px/1.25 var(--sys) }
#m-feat{ width:600px }
#m-apps{ width:340px }
#m-help{ width:320px }
.mm-cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 8px }
.mm-g + .mm-g{ margin-top:2px }
.mm .mm-h{ margin:9px 10px 4px; font:500 11px/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--menu-muted) }
.mm-row{ display:flex; align-items:center; gap:12px; padding:8px 10px 8px 8px; border-radius:11px; color:var(--menu-ink); text-decoration:none; transition:background-color .12s ease }
.mm-row:hover{ background:var(--mm-hover) }
.mm-row:focus-visible{ background:var(--mm-hover); outline:2px solid var(--accent); outline-offset:-2px; border-radius:11px }
.mm-ic{ flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:var(--accent); background:var(--tile) }
.mm-ic svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.mm-app{ flex:none; width:32px; height:32px; border-radius:7.5px }
.mm-t{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.mm-t b{ font-weight:600; font-size:14px; letter-spacing:-.005em }
.mm-t span{ font-size:12.5px; line-height:1.3; color:var(--menu-muted) }
.mm-foot{ display:flex; align-items:center; gap:6px; margin:6px 2px 0; padding:11px 10px 4px; border-top:1px solid var(--menu-sep); color:var(--accent); font-weight:600; font-size:13.5px; text-decoration:none }
.mm-foot::after{ content:"›"; font-size:17px; line-height:1 }
.mm-foot:hover{ text-decoration:underline; text-underline-offset:3px }
.mm-foot:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px }
.mb-sheet{ position:absolute; top:var(--bar); left:0; right:0; z-index:65; max-height:calc(100svh - var(--bar)); overflow:auto; overscroll-behavior:contain; color:var(--menu-ink); background:var(--menu-bg);
  padding:14px max(20px, env(safe-area-inset-right, 0px)) 28px max(20px, env(safe-area-inset-left, 0px)); box-shadow:0 22px 44px -18px rgba(0,0,0,.5); font:400 15px/1.3 var(--sys) }
.mb-sheet .mm-h{ margin:22px 0 4px; font:500 11.5px/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--menu-muted) }
.ms-acts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px }
.ms-acts .btn{ min-height:48px; padding:0 14px; font-size:16px; border-radius:13px }
.ms-feat{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 10px }
.mb-sheet .mm-row{ min-height:48px; margin:0 -6px; padding:7px 6px }
.ms-feat .mm-t b{ font-size:14.5px; line-height:1.2 }
.ms-feat .mm-t span{ display:none }
.mb-sheet [data-rows]:not(.ms-feat) .mm-t b{ font-size:16px }
.ms-top{ display:flex; align-items:center; justify-content:space-between; min-height:48px; margin:18px 0 0; border-top:1px solid var(--menu-sep); border-bottom:1px solid var(--menu-sep);
  color:var(--menu-ink); font-weight:600; font-size:16px; text-decoration:none }
.ms-top::after{ content:"›"; color:var(--menu-muted); font-size:22px; font-weight:400 }
/* narrower: at 1179px the clock (the screens block below) and the wordmark go; at 979px the categories and Sign in
   fold into the menu button's sheet */
@container site (max-width: 1179px){ .mb-brand b{ display:none } .mb-brand{ padding:0 8px } }
@container site (max-width: 979px){ .mb-l > .mb-m, .mb-l > a.mb-i, .mb-in{ display:none } .mb-burger{ display:flex } }

/* ---------- the notch: closed, a face, the film ---------- */
.fd{ position:absolute; top:0; left:50%; z-index:60; width:200px; height:var(--bar); transform:translateX(-50%); background:var(--notch); color:#F5F5F7; border-radius:0 0 12px 12px;
  font:500 13px/1 var(--sys); transition:width .62s var(--spring), height .62s var(--spring), border-radius .62s var(--spring) }
.fd::before, .fd::after{ content:""; position:absolute; top:0; width:10px; height:10px; pointer-events:none }
.fd::before{ right:100%; background:radial-gradient(circle at 0 100%, transparent 9.3px, var(--notch) 10px) }
.fd::after{ left:100%; background:radial-gradient(circle at 100% 100%, transparent 9.3px, var(--notch) 10px) }
.fd-clip{ position:absolute; inset:0; overflow:hidden; border-radius:inherit }
.fd-card{ position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; background:var(--notch); cursor:pointer; opacity:0; pointer-events:none; transition:opacity .3s ease }
.fd-card img{ width:100%; height:100%; object-fit:cover }
.fd-card:focus-visible, .fd-open:focus-visible, .fd-clip .fd-ico:focus-visible{ outline-offset:-4px }
.fd[data-face="card"] .fd-card{ opacity:1; pointer-events:auto }
/* a rim of light under the open notch, so its edge still reads on a black page (C has none: the notch is the only dark thing there) */
.fd[data-face="card"], .fd[data-face="cinema"]{ box-shadow:0 1px 0 0 var(--notch-edge) }
.fd-v{ position:absolute; left:8px; top:5px; width:50px; height:28px; border-radius:6px; background:#0B0E1A; object-fit:cover;
  transition:left .62s var(--spring), top .62s var(--spring), width .62s var(--spring), height .62s var(--spring), border-radius .62s var(--spring), opacity .3s ease }
.fd[data-face="card"] .fd-v{ opacity:0 }
.fd-face{ position:absolute; inset:0; display:flex; align-items:center; opacity:0; pointer-events:none; transition:opacity .2s ease }
.fd[data-face="shut"] .fd-face, .fd[data-face="mini"] .fd-face{ opacity:1; pointer-events:auto; transition-delay:.18s }
.fd-open{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:10px; height:100%; min-width:0; padding:0 12px 0 68px; border:0; background:none; color:inherit; font:inherit; cursor:pointer; text-align:left }
.fd-open b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fd-open span{ color:#AEAEB2; font-variant-numeric:tabular-nums; white-space:nowrap }
.fd-ico{ display:inline-grid; place-items:center; width:30px; height:30px; flex:none; border:0; border-radius:50%; background:none; color:#F5F5F7; cursor:pointer }
.fd-ico:hover{ background:rgba(255,255,255,.12) }
.fd-ico svg{ width:14px; height:14px }
.fd[data-face="shut"] .fd-face .fd-ico{ display:none }
.fd-face .fd-ico{ margin-right:6px }
.fd-ctl{ position:absolute; left:10px; right:10px; bottom:0; height:56px; display:flex; align-items:center; gap:10px; opacity:0; pointer-events:none; transition:opacity .2s ease }
.fd[data-face="cinema"] .fd-ctl{ opacity:1; pointer-events:auto; transition-delay:.3s }
.fd-time{ min-width:7.6em; color:#C7C7CC; font:500 12.5px/1 var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap }
.fd-seek{ flex:1; min-width:40px; height:24px; margin:0; accent-color:#F5F5F7; cursor:pointer }
.fd-close{ height:30px; padding:0 14px; border:0; border-radius:999px; background:#2C2C2E; color:#F5F5F7; font:600 13px/1 var(--sys); cursor:pointer }
.fd-close:hover{ background:#3A3A3C }
.fd-veil{ position:absolute; left:0; top:0; z-index:55; width:100%; height:100svh; background:var(--veil); opacity:0; transition:opacity .35s ease }
.fd-veil.on{ opacity:1 }

/* ---------- the home hero ---------- */
.hero{ position:relative; display:flex; align-items:flex-end; min-height:min(860px, calc(100svh - var(--bar))); padding:300px 0 72px }
/* 2026-10-29: the stage above the hero gives way on a short window (a 1280x720 MacBook window put Buy under the fold,
   site_layout.test.mjs WEB-2); from 820px tall it is the design's 300px. */
.hero{ padding-top:clamp(120px, calc(100svh - 520px), 300px) }
.hero-in{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:48px; align-items:end }
.hero-copy{ min-width:0 }
.hero-film{ display:none; position:relative; width:100%; margin:26px 0 0; padding:0; border:0; border-radius:18px; overflow:hidden; background:var(--notch); cursor:pointer; aspect-ratio:16/9;
  box-shadow:0 0 0 1px var(--shot-ring), var(--shot-shadow) }
.hero-film img{ width:100%; height:100%; object-fit:cover }
.hero-film-cta{ position:absolute; left:50%; top:56%; transform:translate(-50%,-50%); white-space:nowrap; display:inline-flex; align-items:center; gap:9px; padding:6px 14px 6px 6px; border-radius:999px; background:rgba(0,0,0,.72); color:#fff; font:600 15px/1 var(--sys) }
.hero-film-cta .pl{ width:28px; height:28px; background:#fff }
.hero-film-cta .pl::before{ border-color:transparent transparent transparent #000; border-width:5px 0 5px 8px }
.wdg{ display:block; padding:18px 20px 20px; border-radius:24px; background:var(--card); color:var(--card-ink); text-decoration:none;
  box-shadow:0 0 0 1px var(--card-line), var(--shot-shadow); -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur); transition:transform .3s var(--spring) }
.wdg:hover{ transform:translateY(-2px) }
.wdg-h{ display:flex; align-items:center; gap:8px; font:600 13.5px/1 var(--sys); color:var(--card-ink-2) }
.wdg-h img{ width:18px; height:18px; border-radius:4.5px }
.wdg-big{ display:block; margin-top:14px; font:700 42px/1 var(--sysd); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.wdg-p{ display:block; margin-top:10px; font-size:14px; line-height:1.4; color:var(--card-ink-2) }
.wdg-row{ display:flex; align-items:baseline; gap:8px; margin-top:12px; font-size:15px; color:var(--card-ink-2) }
.wdg-row b{ font:700 28px/1 var(--sysd); letter-spacing:-.025em; color:var(--card-ink) }

/* D only: the light of the scene in view. A soft copy of the picture glows behind it, and the first screens glow from the notch */

/* ---------- a scene: copy beside a real recording ---------- */
.feat{ padding:132px 0 }
.feat-in{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:80px; align-items:center }
.feat.flip .feat-in{ grid-template-columns:minmax(0,7fr) minmax(0,5fr) }
.feat.flip .f-copy{ order:2 }
.f-copy{ position:relative; z-index:1; min-width:0 }
.f-media{ position:relative; min-width:0 }
.shot{ position:relative; z-index:1; margin:0; overflow:hidden; border-radius:16px; background:#0B1020; aspect-ratio:16/10; box-shadow:0 0 0 1px var(--shot-ring), var(--shot-shadow) }
.shot > video, .shot > img{ width:100%; height:100%; object-fit:cover }
.shot.nat{ aspect-ratio:auto; background:#1C1C1E }
.shot.nat > img{ height:auto }
.shot.tall{ aspect-ratio:4/5; width:min(100%, 460px); margin-inline:auto }
.shot.phone{ aspect-ratio:600/1080; width:min(100%, 330px); margin-inline:auto; border-radius:28px; background:#0A0F24 }
.lp-btn{ position:absolute; right:12px; bottom:12px; display:inline-flex; opacity:0; transition:opacity .2s ease; align-items:center; gap:8px; height:36px; padding:0 14px 0 6px; border:0; border-radius:999px;
  background:rgba(0,0,0,.72); color:#fff; font:600 13.5px/1 var(--sys); cursor:pointer }
.lp-btn .pl{ width:26px; height:26px; background:#fff }
.lp-btn .pl::before{ border-color:transparent transparent transparent #000; border-width:4.5px 0 4.5px 7.5px }
.lp-btn[aria-pressed="true"] .pl::before{ width:8px; height:9px; margin:0; border:0; border-left:2.5px solid #000; border-right:2.5px solid #000 }
/* 2026-10-29 (WCAG 2.2.2, owner): every loop that plays by itself can be paused. The quiet Play/Pause shows on hover
   and on keyboard focus (it is always in the tab order), always on a touch screen, and always under motion-off. */
.mo-off .lp-btn, figure:hover > .lp-btn, figure:focus-within > .lp-btn, .lp-btn:focus-visible{ opacity:1 }
@media (hover: none){ .lp-btn{ opacity:1 } }
.lp-btn:focus-visible{ outline:2px solid var(--accent, #0071E3); outline-offset:2px }

/* ---------- the iPhone and iPhone Duo: the real screen in Apple's own bezel, on the page as it is ----------
   Zack, 10-29: no panel, glow, tint or shadow behind a phone, and nothing drawn around it. Apple's marketing guidelines
   ask for its product bezels as is and forbid simulations of its products. The screen sits in the bezel's opening with
   its own corners (per corner: iPhone Duo's hinge side is nearly square), and the bezel goes on top, untouched.
   --dev-w is the width of an iPhone 18 Pro's screen and --bz-u a bezel's width in those units (build.py), so every
   phone is drawn at one scale and two side by side keep their true relative size, as Apple asks. */
.dev{ position:relative; z-index:1; aspect-ratio:var(--bz-ar); width:min(100%, calc(var(--dev-w, clamp(240px, 41vh, 350px)) * var(--bz-u))); margin:0 auto }
.dev-screen{ position:absolute; left:var(--bz-x); top:var(--bz-y); width:var(--bz-w); height:var(--bz-h); overflow:hidden; border-radius:var(--bz-r);
  background:#000; isolation:isolate; transform:translateZ(0) }
.dev-screen > video, .dev-screen > img{ display:block; width:100%; height:100%; object-fit:cover }
.dev-bezel{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.dev .lp-btn{ top:calc(100% + 16px); bottom:auto; right:auto; left:50%; transform:translateX(-50%) }
/* With motion on, a phone's Pause sits inside its screen's lower right corner, so showing it moves nothing on the page;
   under motion-off it is the Play under the phone, with room made for it (below). */
html:not(.mo-off) .dev .lp-btn{ top:auto; left:auto; transform:none;
  right:calc(100% - var(--bz-x) - var(--bz-w) + 12px); bottom:calc(100% - var(--bz-y) - var(--bz-h) + 12px) }
.mo-off .dev:has(.lp-btn), .mo-off .devs:has(.lp-btn){ margin-bottom:60px }   /* room for Play under a loop; a still phone keeps its own bottom */
.mo-off .devs > .dev{ margin-bottom:0 }   /* in a pair the room goes under the pair, so both phones still stand on one line */
/* phones side by side, standing on one line: each grows by its bezel's width and stops at its own size, so they
   shrink together and never change size against each other; --bz-pb drops each by the clear rows under its bezel */
.devs{ --devs-gap:40px; display:flex; align-items:flex-end; justify-content:center; gap:var(--devs-gap) }
.devs > .dev{ flex:var(--bz-u) 1 0px; width:auto; min-width:0; max-width:calc(var(--dev-w, clamp(240px, 41vh, 350px)) * var(--bz-u)); margin-inline:0; translate:0 var(--bz-pb) }

/* a cross-device moment: the Mac and the iPhone side by side, big, under one line of copy */
.xfeat{ padding:132px 0 }
.x-copy{ max-width:640px }
.x-media{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:64px; align-items:end; margin-top:56px }
.x-mac .shot{ width:100% }
.x-phone{ --dev-w:clamp(220px, 36vh, 300px) }
.x-phone .dev{ width:calc(var(--dev-w) * var(--bz-u)) }

/* sub-page hero: copy beside the page's main picture */
.sub{ padding:150px 0 120px }
.sub-in{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:72px; align-items:center }
.sub .h1{ font-size:68px }

/* small facts in a row */
.facts{ padding:40px 0 120px }
.facts-in{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:44px }
.fact h3{ margin:0; font:700 24px/1.2 var(--sysd); letter-spacing:-.02em }
.fact p{ margin:10px 0 0; font-size:16.5px; line-height:1.55; color:var(--ink-2) }
.fact-i{ display:grid; place-items:center; width:44px; height:44px; margin-bottom:18px; border-radius:12px; color:var(--accent); background:var(--tile) }
.plans{ padding:40px 0 130px }
.plans-in{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:72px; align-items:center }
.plan-row{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px }
.plan-row .wdg-big{ font-size:38px }

/* questions */
section.qa{ padding:20px 0 130px }   /* 2026-10-30: was .qa, which also matched every kept details.qa and left 150 px under each closed question */
.qa-in{ max-width:860px }
.qa-h{ margin-bottom:18px; font-size:34px }
.qa details{ border-top:1px solid var(--line) }
.qa details:last-child{ border-bottom:1px solid var(--line) }
.qa summary{ display:flex; justify-content:space-between; gap:20px; padding:20px 0; font:650 19px/1.3 var(--sysd); letter-spacing:-.015em; cursor:pointer; list-style:none }
.qa summary::-webkit-details-marker{ display:none }
.qa summary::after{ content:"+"; font:400 24px/1 var(--sys); color:var(--ink-2); transition:transform .3s var(--spring) }
.qa details[open] summary::after{ transform:rotate(45deg) }
.qa details p{ margin:0 0 22px; max-width:42em; font-size:17px; line-height:1.6; color:var(--ink-2) }
.qa details p a{ color:var(--accent) }

/* the last scene */
.end{ padding:150px 0 150px }
.end .h2{ max-width:15em }
/* the friend-link line under Home's last doors (referral_lines.test.mjs), as quiet as /pricing's */
.end-friend{ margin:22px 0 0; font-size:14px; color:var(--ink-2) }

/* ---------- pricing: one card out of the notch, then Cloud, then the rest in quiet rows ---------- */
.pp{ position:relative; padding:44px 0 40px }
.pp-in{ position:relative; display:flex; flex-direction:column; align-items:center }
.pp-card{ --ink:#F5F5F7; --ink-2:#A1A1A6; --btn2-ink:#F5F5F7; --btn2-line:rgba(29, 29, 31, 0.74); --btn2-hover:rgba(255,255,255,.08);
  width:min(100%, 600px); padding:46px 48px 40px; border-radius:30px; background:var(--notch); color:var(--ink); text-align:center;
  box-shadow:0 0 0 1px var(--notch-edge), var(--shot-shadow); animation:pp-drop .95s var(--spring) .2s both }
/* the one notch touch: the card drops out of the notch when the page opens */
@keyframes pp-drop{ from{ transform:translateY(calc(-100% - 60px)) scaleX(.42); opacity:.2 } 45%{ opacity:1 } to{ transform:none } }
.pp-name{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0; font:650 21px/1.2 var(--sysd); letter-spacing:-.015em }
.pp-name img{ width:30px; height:30px; border-radius:7.5px }
.pp-price{ display:flex; align-items:baseline; justify-content:center; gap:10px; margin:20px 0 0; font:700 84px/1 var(--sysd); letter-spacing:-.045em; font-variant-numeric:tabular-nums }
.pp-price .per{ font:500 24px/1 var(--sysd); letter-spacing:-.01em; color:var(--ink-2) }
.pp-sub{ margin:16px auto 0; max-width:24em; font-size:17px; line-height:1.5; color:var(--ink-2) }
.pp-card .btns{ justify-content:center; margin-top:28px }
.pp-trial{ margin:16px 0 0; font-size:14px; color:var(--ink-2) }
.pp-friend{ margin:22px 0 0; font-size:14px; color:var(--ink-2); text-align:center }
.pc{ padding:56px 0 24px }
.pc-card{ width:min(100%, 600px); margin:0 auto; padding:30px 30px 26px; border-radius:26px; background:var(--card); color:var(--card-ink);
  box-shadow:0 0 0 1px var(--card-line); -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur) }
.pc-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px }
.pc-title{ margin:0; font:700 26px/1.15 var(--sysd); letter-spacing:-.02em }
.pc-title small{ margin-left:8px; font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--card-ink-2); vertical-align:4px }
.pc-tog{ display:inline-flex; padding:3px; border-radius:10px; background:var(--pill-bg); box-shadow:0 0 0 1px var(--pill-line) }
.pc-tog button{ min-height:32px; padding:0 14px; border:0; border-radius:8px; background:none; color:var(--card-ink-2); font:600 13.5px/1 var(--sys); cursor:pointer }
.pc-tog button[aria-pressed="true"]{ background:var(--bg); color:var(--card-ink); box-shadow:0 1px 3px rgba(0,0,0,.18) }
.pc-lead{ margin:12px 0 0; font-size:15.5px; line-height:1.5; color:var(--card-ink-2) }
.pc-plans{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:20px }
.pc-plan{ padding:18px 18px 18px; border-radius:18px; background:var(--bg); box-shadow:0 0 0 1px var(--card-line) }
.pc-size{ margin:0; font:700 15px/1.2 var(--sys); color:var(--card-ink-2) }
.pc-amt{ margin:8px 0 0; font:700 34px/1 var(--sysd); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.pc-per{ margin:6px 0 0; font-size:14px; color:var(--card-ink-2) }
.pc-plan .btn{ width:100%; margin-top:16px }
/* 2026-10-30: two identical outlines gave no lead; the first (smaller) plan leads. No badge: nothing says which sells most. */
.pc-plan:first-child{ box-shadow:0 0 0 1.5px var(--btn-bg) }
.pc-plan:first-child .btn-sec{ background:var(--btn-bg); color:var(--btn-ink); box-shadow:none }
.pc-plan:first-child .btn-sec:hover{ background:var(--btn-hover); box-shadow:0 8px 18px -10px rgba(0,82,159,.7) }
.pc-plan:first-child .btn-sec:active{ background:var(--btn-press); box-shadow:none }
.pc-fine{ margin:16px 0 0; font-size:13.5px; line-height:1.5; color:var(--card-ink-2) }
.pc-fine a{ color:var(--accent) }
html.js .pc-or{ display:none }
.pa{ padding:44px 0 20px }
.pa-in, .pf-in{ width:min(100%, 600px); margin:0 auto }
.pa-h{ margin:0 0 6px; font:500 11.5px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--k-ink) }
.pa-row{ display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 2px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink) }
.pa-row:hover .pa-go{ text-decoration:underline; text-underline-offset:3px }
.pa-row img{ width:36px; height:36px; border-radius:9px }
.pa-name{ display:block; font:650 16px/1.3 var(--sys) }
.pa-desc{ display:block; margin-top:2px; font-size:14px; line-height:1.4; color:var(--ink-2) }
.pa-go{ font:600 14.5px/1.2 var(--sys); color:var(--accent); white-space:nowrap }
.pf{ padding:34px 0 40px }
.pf p{ margin:0 0 8px; font-size:13.5px; line-height:1.55; color:var(--ink-2) }
.pf p a{ color:var(--accent) }
.pf .btn{ margin-top:6px }
.pq{ padding:40px 0 120px }
.pq .qa-in{ width:min(100%, 600px); margin:0 auto }
.pq .qa-h{ font-size:26px }

/* ---------- footer (the shell for every page) ---------- */
.ft{ padding:84px 0 44px; border-top:1px solid var(--line); background:var(--bg-2) }
.ft-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px }
.ft-brand{ display:flex; align-items:center; gap:14px; text-decoration:none }
.ft-brand img{ width:44px; height:44px; border-radius:11px }
.ft-brand b{ display:block; font:700 20px/1.1 var(--sysd); letter-spacing:-.02em }
.ft-brand span{ display:block; margin-top:3px; font-size:14px; color:var(--ink-2) }
.ft-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:36px 26px; margin-top:56px ; height:auto; align-items:start; justify-content:normal }
/* 2026-10-30: the topic pages also load suite.css, whose bare `nav{height:var(--hdr)}` header rule
   squashed this <nav> to 38px, so the footer links spilled over the legal rows. */
.ft-more{ display:none }
.ft-col h3{ margin:0 0 10px; font:500 11px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2) }
.ft-col a{ display:block; padding:4px 0; font-size:14.5px; line-height:1.35; text-decoration:none }
.ft-col a:hover{ text-decoration:underline; text-underline-offset:3px }
.ft-base{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; margin-top:56px; padding-top:22px; border-top:1px solid var(--line) }
.brew{ display:inline-flex; align-items:center; gap:12px; max-width:100%; padding:6px 6px 6px 14px; border-radius:12px; background:var(--pill-bg); box-shadow:0 0 0 1px var(--pill-line); font-size:13px }
.brew code{ font:500 13px/1.3 var(--code); overflow-wrap:anywhere }
.brew button{ height:30px; padding:0 12px; border:0; border-radius:8px; background:var(--btn-bg); color:var(--btn-ink); font:600 12.5px/1 var(--sys); cursor:pointer }
.ft-legal{ margin:0; font-size:13px; line-height:1.6; color:var(--ink-2); max-width:56em }
.ft-legal a{ white-space:nowrap }
.ft-tm{ flex-basis:100% }   /* Apple's credit line, on its own row under the legal links */

/* ---------- an SEO page in the shell ---------- */
.doc{ padding:64px 0 120px; background:var(--doc-page) }
.doc-sheet{ max-width:900px; margin:0 auto; padding:64px 84px 72px; border-radius:20px; background:var(--doc-bg); color:var(--doc-ink);
  box-shadow:0 0 0 1px var(--doc-line), var(--shot-shadow) }
.doc .doc-crumb{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 26px; font:500 11.5px/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--doc-ink-2) }
.doc .doc-crumb a{ text-decoration:none } .doc .doc-crumb a:hover{ text-decoration:underline }
.doc h1{ margin:0; font:700 50px/1.04 var(--sysd); letter-spacing:-.035em; text-wrap:balance }
.doc h2{ margin:58px 0 14px; font:700 31px/1.15 var(--sysd); letter-spacing:-.028em; text-wrap:balance }
.doc h3{ margin:30px 0 8px; font:650 20px/1.3 var(--sysd); letter-spacing:-.015em }
.doc p, .doc li{ font-size:18px; line-height:1.66 }
.doc p{ margin:14px 0 0 }
.doc ul, .doc ol{ margin:14px 0 0; padding-left:1.3em }
.doc li + li{ margin-top:6px }
.doc a{ text-decoration-thickness:1.5px; text-underline-offset:3px }
.doc .lede{ margin-top:18px; font-size:21px; line-height:1.5; color:var(--doc-ink-2) }
.doc .updated, .doc .disclosure, .doc .sg-req, .doc .fine{ font-size:14px; line-height:1.5; color:var(--doc-ink-2) }
.doc code{ padding:1px 5px; border-radius:5px; background:var(--code-bg); font:500 .88em/1.4 var(--code) }
.doc pre{ margin:16px 0 0; padding:16px 18px; overflow-x:auto; border-radius:12px; background:var(--pre-bg); color:var(--pre-ink); font:400 13.5px/1.6 var(--code); box-shadow:0 0 0 1px var(--doc-line) }
.doc pre code{ padding:0; background:none; font:inherit; color:inherit }
.doc figure{ margin:28px 0 0 }
.doc figure img{ border-radius:14px; box-shadow:0 0 0 1px var(--doc-line) }
.doc .tblwrap{ margin:18px 0 0; overflow-x:auto; border-radius:12px; box-shadow:0 0 0 1px var(--doc-line) }
.doc table{ width:100%; min-width:560px; border-collapse:collapse; font-size:15px; line-height:1.5 }
.doc th, .doc td{ padding:11px 14px; border-top:1px solid var(--doc-line); text-align:left; vertical-align:top }
.doc thead th{ border-top:0; background:var(--thead); font:600 12px/1.4 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--doc-ink-2) }
.doc .sg-btns, .doc .trybox-ctas, .doc .table-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px }
.doc .btn{ min-height:46px; font-size:16px; text-decoration:none }
.doc .trybox, .doc .endcta{ margin:34px 0 0; padding:24px 26px; border-radius:16px; background:var(--card); color:var(--card-ink); box-shadow:0 0 0 1px var(--card-line) }
.doc .trybox p, .doc .endcta p{ color:var(--card-ink) }
.doc .sg-bento{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; padding:0; list-style:none }
.doc .sg-bento li{ margin:0; padding:16px 18px; border-radius:14px; background:var(--card); font-size:16px }
.doc .faqs h3{ margin-top:26px }
.doc .alsosee{ margin-top:30px; font-size:16px }
.doc .sg-hero{ display:grid; gap:18px; margin:30px 0 0 }
.doc .sg-hero figure{ margin:0 }
.doc .sg-act .sg-btns{ margin-top:0 }
.doc .sg-req{ margin-top:10px }
.doc .table-cta{ align-items:center; gap:10px 16px; margin:20px 0 32px }
.doc .table-cta p{ margin:0; font-size:15px }
.doc .ctanote{ display:block; margin-top:2px; font-size:14px; color:var(--doc-ink-2) }
.doc .steps li + li{ margin-top:10px }
.doc .sources li{ font-size:15px; line-height:1.6 }
.doc .endcta .sg-top{ display:flex; align-items:center; gap:8px; font:500 11.5px/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase }
.doc .tag{ padding:3px 7px; border-radius:6px; background:var(--btn-bg); color:var(--btn-ink) }
.doc .endcta h2{ margin:12px 0 0 }
.doc .endcta .btn{ margin:18px 10px 0 0 }
.doc .endcta .btn svg{ width:18px; height:18px }
.doc .trybox .brew{ margin-top:18px }
.doc .trybox-facts{ font-size:15px }

.sw-black{ background:#000 }
.sw-warm{ background:radial-gradient(circle at 50% 50%, #F7A83B 0 4px, #15120F 4.5px) }
.sw-light{ background:linear-gradient(#000 0 0) 50% 0 / 8px 5px no-repeat, #FFFFFF }
.sw-ambient{ background:radial-gradient(circle at 35% 30%, #3B5BD9, transparent 70%), radial-gradient(circle at 70% 75%, #9B2F67, transparent 70%), #07070A }

/* ---------- narrower screens (container queries, so the review bar's phone view is exact) ---------- */
@container site (max-width: 1179px){
  body > *{ --gut:44px }
  .h1{ font-size:62px }
  .h2{ font-size:44px }
  .mb-clock{ display:none }
  .hero{ min-height:0; padding:72px 0 90px }
  .hero-in{ grid-template-columns:minmax(0,1fr) }
  .hero-film{ display:block }
  .wdg{ width:min(100%, 340px) }
  .feat{ padding:96px 0 }
  .feat-in, .feat.flip .feat-in, .sub-in, .plans-in{ grid-template-columns:minmax(0,1fr); gap:40px }
  .feat.flip .f-copy{ order:0 }
  .sub{ padding:90px 0 90px }
  .sub .h1{ font-size:56px }
  .facts-in{ grid-template-columns:minmax(0,1fr); gap:28px }
  .doc-sheet{ padding:52px 56px 60px }
  .xfeat{ padding:96px 0 }
  .x-media{ gap:40px; margin-top:44px }
  .x-phone{ --dev-w:clamp(200px, 30vh, 260px) }
}
@container site (max-width: 760px){
  body > *{ --gut:20px; --bar:44px }
  .k{ margin-bottom:14px; font-size:11px }
  .h1, .sub .h1{ font-size:38px; line-height:1.02; letter-spacing:-.035em }
  .h2{ font-size:31px; line-height:1.06; letter-spacing:-.03em }
  .lead{ margin-top:16px; font-size:17px }
  .body{ font-size:16px }
  .btns{ flex-direction:column; align-items:stretch; gap:10px; margin-top:24px }
  .btns .btn{ min-height:50px }
  .btns .btn-play{ display:none }
  .mb-l > :not(.mb-brand), .mb-r > :not(.mb-burger), .mb-brand b{ display:none }
  .mb-brand{ padding:0 6px }
  .mb-brand img{ width:24px; height:24px; border-radius:6px }
  .mb-burger{ display:flex }
  .hero{ padding:40px 0 64px }
  .hero-film{ border-radius:16px }
  .wdg{ width:auto; margin-top:6px }
  .feat{ padding:72px 0 }
  .feat-in{ gap:30px }
  .dev{ --dev-w:min(78%, 300px) }
  .xfeat{ padding:72px 0 }
  .x-media{ grid-template-columns:minmax(0,1fr); gap:28px; margin-top:30px }
  .x-phone{ --dev-w:min(72%, 280px) }
  .devs{ --devs-gap:16px }
  .shot{ border-radius:12px }
  .jump{ margin-top:20px }
  .sub{ padding:48px 0 64px }
  .sub-in{ gap:32px }
  .plan-row{ grid-template-columns:minmax(0,1fr) }
  .end{ padding:96px 0 }
  .qa summary{ font-size:17px }
  .pp{ padding:28px 0 28px }
  .pp-card{ padding:34px 22px 28px; border-radius:24px }
  .pp-price{ font-size:64px }
  .pp-price .per{ font-size:20px }
  .pp-sub{ font-size:16px }
  .pc{ padding:40px 0 16px }
  .pc-card{ padding:24px 18px 20px; border-radius:22px }
  .pc-plans{ grid-template-columns:minmax(0,1fr) }
  .pa-row{ grid-template-columns:32px minmax(0,1fr); }
  .pa-row img{ width:32px; height:32px }
  .pa-go{ grid-column:2; margin-top:-4px }
  .ft{ padding:64px 0 36px }
  .ft-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 18px; margin-top:40px }
  .ft-more{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; width:100%; min-height:52px; padding:0; border:0;
    border-top:1px solid var(--line); background:none; color:inherit; font:600 16px/1.3 var(--sys); text-align:left; cursor:pointer }
  .ft-more::after{ content:"+"; font:400 24px/1 var(--sys); color:var(--ink-2) }
  .ft-more[aria-expanded="true"]::after{ content:"\2212" }
  .ft-base{ margin-top:28px }
  html.js .ft-grid:not(.open) .ft-x{ display:none }
  .brew{ flex-wrap:wrap; gap:8px 12px; padding:10px 8px 8px 14px }
  .brew > span{ flex-basis:100% }
  .brew code{ flex:1; white-space:nowrap }
  .doc{ padding:24px 0 72px }
  .doc .wrap{ padding-left:max(10px, env(safe-area-inset-left, 0px)); padding-right:max(10px, env(safe-area-inset-right, 0px)) }
  .doc-sheet{ padding:30px 20px 40px; border-radius:16px }
  .doc h1{ font-size:34px }
  .doc h2{ margin-top:44px; font-size:25px }
  .doc p, .doc li{ font-size:17px }
  .doc .lede{ font-size:18.5px }
  .doc .sg-bento{ grid-template-columns:minmax(0,1fr) }
}

/* ---------- motion off: Reduce Motion, or the review bar's Motion switch ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:.01ms !important; transition-delay:0s !important; animation:none !important }
}
html.mo-off *, html.mo-off *::before, html.mo-off *::after{ transition-duration:.01ms !important; transition-delay:0s !important; animation:none !important }

/* ======================================================================
   THE OLD NAMES, IN THE NEW LOOK (2026-10-29). Every page that is not one of the six redesigned ones
   (the ~80 SEO, comparison, question, help and legal pages) keeps its words and markup and takes the
   final design from here: the old token names get colour C's values, the old buttons become the new
   buttons, and the old content kit (suite.css, c26-guide.css, seo-glass.css) is drawn in the new type.
   The runtime parts suite.js, c26.js and reviews.js build (the checkout and Cloud modals, the review
   row and form, the Cloud plans) follow under "runtime parts".
   ====================================================================== */
:root{
  --t1:var(--ink); --t2:#424245; --t3:var(--ink-2); --bg2:var(--bg-2); --card2:#EBEBF0;
  --line2:rgba(0,0,0,.14); --line3:rgba(0,0,0,.22); --cloud:#0066CC;
  --sans:var(--sys); --display:var(--sysd);
  --h-drop:#0066CC; --h-cloud:#0066CC; --h-keys:#1A7F37; --h-agents:#A05A00; --h-widgets:#5B4BB7; --h-base:#0066CC;
  --gut:72px; --bar:38px; --max:1296px; --nav-h:var(--bar);
  --ease-out:cubic-bezier(0.2, 0.75, 0.25, 1); --ease-spring:var(--spring);
  scroll-padding-top:64px;
}
.btn-white{ background:var(--btn-bg); color:var(--btn-ink) }
.btn-glass, .btn-line, .btn-cloud{ background:transparent; color:var(--btn2-ink); box-shadow:inset 0 0 0 1.5px var(--btn2-line) }
.btn-s{ min-height:40px; padding:0 16px; font-size:15px; border-radius:11px }
.btn-l{ min-height:54px; padding:0 24px }
.btn-block, .btn.full{ display:flex; width:100% }
.row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px }
.row.center, .center{ justify-content:center; text-align:center }
.micro, .small{ font-size:13.5px; line-height:1.5; color:var(--ink-2) }
.mono{ font-family:var(--code) }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.anchor{ display:block; position:relative; top:calc(-1 * var(--bar) - 16px); visibility:hidden }
.foot-dir{ display:contents }
.ft-col h4, .ft-col h5{ margin:0 0 10px; font:500 11px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2) }
.ft-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px }
.ft-cta p{ margin:0; font:600 16px/1.3 var(--sysd) }
.ft-cta .btns{ margin-top:0 }
.foot-dir-row{ grid-column:1 / -1 }
.foot-dir-row a{ display:inline-block; margin-right:16px }
.nojs{ margin:0 0 28px; padding:18px 20px; border-radius:16px; background:var(--card) }
.ft .brew{ margin:0 }
.brew-box{ display:inline-flex; align-items:center; gap:10px; cursor:pointer }
.brew-box button{ height:30px; padding:0 12px; border:0; border-radius:8px; background:var(--btn-bg); color:var(--btn-ink); font:600 12.5px/1 var(--sys); cursor:pointer }
/* 2026-10-29: on a 320px phone the box ran 3px past the screen (the phone rule keeps .brew code on one line). The box
   stays inside its row, and the command breaks at its spaces only when the row is too narrow for it. */
.ft .brew-box{ max-width:100%; min-width:0 }
.ft .brew-box code{ white-space:normal; min-width:0; overflow-wrap:normal }
.ft .brew-box button{ flex:none }
.shot-still{ background:var(--card) }
.shot.tall{ aspect-ratio:auto }
.shot.tall > video{ height:auto; aspect-ratio:1440/1800 }

/* ---------- the 10-20 shell's components (runtime parts and the native pages' blocks), recoloured for colour C ---------- */
.mono{font-family:var(--code); font-size:0.92em; letter-spacing:0;}
.sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.center{text-align:center;}
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.row.center{justify-content:center;}
.h3{font:650 clamp(22px, 2.3vw, 29px)/1.14 var(--display); letter-spacing:-0.022em;}
.h4{font:650 19px/1.25 var(--display); letter-spacing:-0.016em;}
.small{font-size:14.5px; line-height:1.5; color:var(--t2);}
.micro{font-size:12.5px; line-height:1.45; color:var(--t3);}
/* 2026-10-29: the 10-20 kit's white/glass/line/cloud button colours were removed here; the aliases above
   (.btn-white = the design's primary, .btn-glass/.btn-line/.btn-cloud = its secondary) are the one source. */
.btn-s{--bh:36px; padding:0 16px; font-size:15px; gap:7px;}
.btn-l{--bh:58px; padding:0 30px; font-size:18px;}
.btn-block{width:100%;}
.badge{display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font:650 12px/1 var(--sans); white-space:nowrap; background:rgba(0, 0, 0, 0.1); color:var(--t1);}
.badge.new{background:rgba(50, 215, 75, 0.16); color:#1D1D1F;}
.badge.soon{background:rgba(255, 159, 10, 0.16); color:#1D1D1F;}
.badge.cloud{background:rgba(124, 196, 255, 0.16); color:#1D1D1F;}
.badge.plain{background:transparent; box-shadow:inset 0 0 0 1px var(--line2); color:var(--t2);}
.tag-pro{background:rgba(143, 127, 240, 0.26); color:#1D1D1F; box-shadow:inset 0 0 0 1px rgba(170, 155, 255, 0.5);}
.tag-cloud{background:rgba(116, 183, 214, 0.24); color:#1D1D1F; box-shadow:inset 0 0 0 1px rgba(150, 205, 235, 0.5);}
.tag-free{background:rgba(0, 0, 0, 0.12); color:#1D1D1F; box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.12);}
.tag-soon{background:rgba(217, 160, 102, 0.24); color:#1D1D1F; box-shadow:inset 0 0 0 1px rgba(230, 180, 130, 0.5);}
.cfree{display:inline-flex; align-items:center; gap:10px; margin:0; padding:9px 16px 9px 13px; border-radius:999px; background:color-mix(in srgb, var(--cloud) 13%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cloud) 34%, transparent); color:var(--t1); font-size:15px; line-height:1.35;}
.cfree svg{color:var(--cloud); flex:none;}
.cfree b{font-weight:650;}
@media (max-width:520px){.cfree{font-size:14px; border-radius:16px; align-items:flex-start;}}
.ptop{position:relative; padding:clamp(118px, 13vw, 168px) 0 clamp(40px, 5vw, 64px); isolation:isolate;}
.ptop::before{content:""; position:absolute; z-index:-1; left:-10%; right:-10%; top:0; bottom:-55%; pointer-events:none;
  background:radial-gradient(46% 52% at 50% 30%, color-mix(in oklab, var(--hue, var(--h-base)) 42%, transparent), transparent 72%),
    radial-gradient(34% 44% at 14% 66%, color-mix(in oklab, var(--h-base) 30%, transparent), transparent 70%),
    radial-gradient(34% 44% at 88% 60%, color-mix(in oklab, var(--h-cloud) 22%, transparent), transparent 70%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);}
.ptop-h{font:650 clamp(40px, 6.2vw, 84px)/1.04 var(--display); letter-spacing:-0.03em; text-wrap:balance; margin:0 auto; max-width:13em;}
.ptop-h em{font-style:normal; color:#6E6E73;}
.ptop-article{padding-bottom:clamp(24px, 3vw, 40px);}
.ptop-article .ptop-h{font-size:clamp(34px, 4.2vw, 56px); line-height:1.08; max-width:18em; margin:0; text-align:left;}
.ptop-article .ptop-sub{margin:16px 0 0; text-align:left; max-width:36em;}
.ptop-article .ptop-cta{justify-content:flex-start;}
.ptop-article .micro, .ptop-article .ptop-note{text-align:left;}
.ptop-h .apl{display:inline-block; width:0.74em; height:0.86em; margin:0 0.06em 0 0.02em; vertical-align:-0.04em; fill:currentColor;}
.ptop-sub{margin:18px auto 0; max-width:34em; font:450 clamp(18px, 1.6vw, 21px)/1.45 var(--sans); color:#6E6E73; text-wrap:balance;}
.ptop-cta{margin-top:30px;}
.ptop-cta + .cfree{margin-top:20px;}
.ptop-cta + .micro, .ip-ask + .micro{margin-top:16px;}
.ptop-note{margin:14px auto 0; font-size:14px; color:#6E6E73;}
.strip{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 10px; margin:26px auto 0; font-size:14.5px; color:#6E6E73;}
.strip i{width:4px; height:4px; border-radius:50%; background:rgba(0, 0, 0, 0.12);}
.strip .num{color:#1D1D1F; font-weight:600;}
.bento-sec{position:relative; padding:8px 0 clamp(32px, 4vw, 56px); isolation:isolate;}
.bento-sec::before{content:""; position:absolute; z-index:-1; left:-10%; right:-10%; top:-18%; bottom:-18%; pointer-events:none;
  background:radial-gradient(45% 34% at 20% 30%, color-mix(in oklab, var(--hue, var(--h-base)) 24%, transparent), transparent 72%),
    radial-gradient(45% 34% at 85% 70%, color-mix(in oklab, var(--h-base) 22%, transparent), transparent 72%);
  -webkit-mask-image:var(--feather); mask-image:var(--feather);}
.sec-h{text-align:center; margin:0 auto 26px; font:750 clamp(26px, 3vw, 38px)/1.1 var(--display); letter-spacing:-0.03em;}
.bento{--sub:clamp(108px, 11.4vw, 146px); display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); grid-auto-rows:var(--sub); gap:16px; grid-auto-flow:dense;}
.bc{grid-column:span 5; grid-row:span 2;}
.bc-big{grid-column:span 7; grid-row:span 4;}
.bc-tall{grid-column:span 5; grid-row:span 4;}
.bc-wide{grid-column:1 / -1; grid-row:span 3;}
.bc-half{grid-column:span 6; grid-row:span 3;}
.bc-third{grid-column:span 4; grid-row:span 2;}
@media (max-width:720px){.bento{grid-template-columns:minmax(0, 1fr); grid-auto-rows:auto; gap:14px;}}
@media (max-width:720px){.bc, .bc-big, .bc-tall, .bc-wide, .bc-half, .bc-third{grid-column:1 / -1; grid-row:auto; aspect-ratio:4 / 5;}}
.bc{position:relative; border-radius:28px; overflow:hidden; isolation:isolate; min-height:0; background:color-mix(in oklab, var(--hue) 16%, var(--bg));
  box-shadow:0 34px 70px -42px color-mix(in oklab, var(--hue) 70%, transparent); transition:transform 0.5s var(--ease-spring), box-shadow 0.5s ease;}
.bc::after{content:""; position:absolute; inset:0; z-index:7; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--hue) 34%, transparent), inset 0 1px 0 rgba(0, 0, 0, 0.07);}
@media (hover:hover){.bc:hover{transform:translateY(-5px); box-shadow:0 44px 80px -40px color-mix(in oklab, var(--hue) 90%, transparent);}}
@media (hover:hover){.bc:hover .bc-art::after{opacity:1;}}
.bc-art{position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit;
  background:radial-gradient(64% 62% at 50% -8%, color-mix(in oklab, var(--hue) 72%, transparent), transparent 74%),
    radial-gradient(90% 70% at 8% 112%, color-mix(in oklab, var(--hue) 48%, transparent), transparent 70%),
    radial-gradient(70% 60% at 104% 74%, color-mix(in oklab, var(--h-base) 36%, transparent), transparent 72%),
    color-mix(in oklab, var(--hue) 22%, var(--bg));}
.bc-art::before{content:""; position:absolute; left:-25%; right:-25%; top:62%; height:130%; border-radius:50%; border-top:1px solid color-mix(in oklab, var(--hue) 60%, transparent);
  background:radial-gradient(50% 30% at 50% 0%, color-mix(in oklab, var(--hue) 26%, transparent), transparent 75%); animation:bc-drift 26s ease-in-out infinite alternate;}
.bc-art::after{content:""; position:absolute; left:12%; top:-40%; width:76%; aspect-ratio:1; border-radius:50%; opacity:0.7;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--hue) 44%, transparent), transparent); transition:opacity 0.5s ease; animation:bc-glow 18s ease-in-out infinite alternate;}
@media (prefers-reduced-transparency:reduce){.bc-art{background:color-mix(in oklab, var(--hue) 24%, var(--bg));}}
@media (prefers-reduced-transparency:reduce){.bc-art::after{display:none;}}
@media (prefers-reduced-transparency:reduce){.bc-art::before{background:none;}}
.bc-clip{position:absolute; inset:0; z-index:1; margin:0;}
.bc-clip video, .bc-clip img{width:100%; height:100%; object-fit:cover; object-position:50% 0;}
.bc-clip img{position:absolute; inset:0; transition:opacity 0.4s ease;}
.bc-clip.playing img{opacity:0;}
.bc-media{position:absolute; inset:0 0 34% 0; z-index:1; display:grid; place-items:center; padding:24px;}
.bc-media img{width:clamp(84px, 9vw, 120px); height:auto; filter:drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45));}
.bc-pair{display:flex; gap:22px; align-items:center;}
.bc-cap{position:absolute; left:0; right:0; bottom:0; z-index:5; padding:70px 76px 20px 22px; pointer-events:none;
  background:linear-gradient(to top, rgba(8, 9, 17, 0.95) 0%, rgba(8, 9, 17, 0.9) 46%, rgba(8, 9, 17, 0) 100%);}
.bc-cap a, .bc-cap button{pointer-events:auto;}
.bc-tags{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.bc-t{margin:9px 0 4px; font:750 clamp(20px, 1.8vw, 25px)/1.12 var(--display); letter-spacing:-0.024em; color:#1D1D1F;}
.bc-big .bc-t, .bc-wide .bc-t{font-size:clamp(22px, 2.3vw, 30px);}
.bc-c{margin:0; font-size:15px; line-height:1.42; color:rgba(0, 0, 0, 0.12); max-width:34em;}
.bc-go{display:inline-flex; align-items:center; gap:6px; margin-top:10px; color:#1D1D1F; font-weight:650; font-size:15px;}
.bc-go:hover{text-decoration:underline; text-underline-offset:3px;}
@media (max-width:720px){.bc-cap{padding:60px 64px 18px 18px;}}
.qsec{position:relative; padding:clamp(36px, 5vw, 64px) 0;}
.qall{border-radius:22px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line2);}
.qall > summary{list-style:none; display:flex; align-items:center; gap:12px; padding:22px 24px; cursor:pointer; font:700 20px/1.2 var(--display); letter-spacing:-0.02em;}
.qall > summary::-webkit-details-marker{display:none;}
.qall > summary .qa-i{margin-left:auto; color:var(--t2); transition:transform 0.35s var(--ease-spring);}
.qall[open] > summary .qa-i{transform:rotate(45deg);}
.qall-n{min-width:26px; height:24px; padding:0 8px; border-radius:999px; display:inline-grid; place-items:center; font:650 13px/1 var(--sans); color:var(--t2); background:rgba(0, 0, 0, 0.08);}
.qall > .faq{margin:0 24px 10px; border-top:1px solid var(--line);}
.qa-a{padding:0 2px 22px; color:var(--t2); font-size:16px; line-height:1.55; max-width:760px;}
.qa-a p:last-child{margin:0;}
.qa-a a{color:var(--t1); text-decoration:underline; text-underline-offset:3px;}
.qall + .qall{margin-top:12px;}
.vband{position:relative; isolation:isolate; padding:clamp(96px, 11vw, 150px) 0; text-align:center;}
.vband::before{content:""; position:absolute; z-index:-1; left:-15%; right:-15%; top:-22%; bottom:-22%; pointer-events:none;
  background:radial-gradient(42% 38% at 50% 32%, rgba(122, 92, 240, 0.85), transparent 72%), radial-gradient(40% 36% at 84% 70%, rgba(75, 59, 181, 0.8), transparent 72%),
    radial-gradient(38% 34% at 12% 66%, rgba(90, 51, 166, 0.8), transparent 72%), radial-gradient(30% 24% at 70% 30%, rgba(116, 183, 214, 0.3), transparent 72%),
    radial-gradient(70% 46% at 50% 50%, rgba(29, 23, 71, 0.95), transparent 80%);
  -webkit-mask-image:var(--feather); mask-image:var(--feather); animation:vb-drift 30s ease-in-out infinite alternate;}
@media (prefers-reduced-transparency:reduce){.vband::before{background:radial-gradient(70% 46% at 50% 50%, #3b2d8c, transparent 80%);}}
.vband .h2{margin-bottom:30px;}
.vb-more{margin:22px 0 6px; font-size:17px; color:#1D1D1F;}
.vb-cards{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; max-width:820px; margin:0 auto; text-align:left;}
.vb-cards.vb-one{grid-template-columns:minmax(0, 1fr); max-width:480px;}
.vb-card, .plan, .clp{padding:26px; border-radius:26px; background:rgba(12, 12, 32, 0.62); box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.12); display:flex; flex-direction:column; gap:12px;}
.vb-top, .plan-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font:700 19px/1.2 var(--display);}
.vb-price, .plan-price{margin:0; font:750 40px/1 var(--display); letter-spacing:-0.03em;}
.vb-price small, .plan-price small{font:500 15px/1 var(--sans); color:#1D1D1F; margin:0 6px; letter-spacing:0;}
.vb-or, .plan .small, .clp-line{margin:0; font-size:15px; color:#1D1D1F;}
.vb-card .btn, .plan .btn, .clp .btn{margin-top:auto;}
.vb-list{margin:4px 0 16px; padding:0; list-style:none; display:grid; gap:8px; color:var(--t2); font-size:14.5px; line-height:1.45;}
.vb-list li{position:relative; padding-left:20px;}
.vb-list li::before{content:""; position:absolute; left:2px; top:0.55em; width:7px; height:7px; border-radius:50%; background:color-mix(in oklab, var(--h-base) 70%, #fff);}
.vb-card .cfree{align-self:flex-start;}
.vband .micro{color:#1D1D1F; margin:22px auto 0; max-width:46em;}
.vband .clp .micro{margin:-6px 0 0; text-align:left; max-width:none;}
.plan.up{box-shadow:inset 0 0 0 1.5px rgba(0, 0, 0, 0.12);}
@media (max-width:720px){.vb-cards{grid-template-columns:minmax(0, 1fr);}}
.pr-cards, .cl-plans{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; text-align:left;}
.pr-cards[data-n="2"]{grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:860px; margin:0 auto;}
.cl-solo{max-width:480px; margin:0 auto; text-align:left;}
.cl-offer .seg{align-self:flex-start;}
.cl-offer .micro{margin:0; text-align:left; max-width:none;}
.cl-more a{color:inherit; text-decoration:underline; text-underline-offset:3px;}
.cl-plans[data-n="4"]{grid-template-columns:repeat(4, minmax(0, 1fr));}
.cl-plans[data-n="4"] .clp{padding:22px;}
.cl-plans[data-n="4"] .plan-price{font-size:34px;}
.cl-plans[data-n="4"] .clp-size{font-size:20px;}
@media (max-width:1100px){.cl-plans[data-n="4"]{grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:760px; margin:0 auto;}}
.pr-h{text-align:center; margin:clamp(56px, 7vw, 84px) 0 22px;}
.terms{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin:20px auto 0; max-width:980px; font-size:13.5px; color:#1D1D1F;}
.terms > span{display:inline-block;}
.terms > span:has(> .btn){display:inline-flex; align-items:center; gap:7px;}
.terms .btn{--bh:30px;}
.seg{display:inline-flex; padding:3px; border-radius:999px; background:rgba(0, 0, 0, 0.07); box-shadow:inset 0 0 0 1px var(--line);}
.seg button{height:34px; padding:0 16px; border-radius:999px; font:600 14px/1 var(--sans); color:var(--t2); transition:color 0.2s, background-color 0.3s var(--ease-spring);}
.seg button[aria-pressed="true"]{color:#000; background:#fff;}
.clp-head{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; margin:0 0 22px;}
.clp-wrap[data-per="m"] .per-y, .clp-wrap[data-per="y"] .per-m{display:none !important;}
.clp-size{font:700 22px/1.2 var(--display);}
.cl-state{margin:18px auto 0; max-width:40em; padding:12px 16px; border-radius:16px; background:rgba(12, 12, 32, 0.7); box-shadow:inset 0 0 0 1px rgba(255, 200, 120, 0.4); color:#1D1D1F; font-size:15px;}
.cl-state a{color:#1D1D1F; font-weight:650; text-decoration:underline; text-underline-offset:3px;}
.pr-owners{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px 18px; margin:34px auto 0; padding:16px 22px; max-width:640px; border-radius:20px; background:rgba(12, 12, 32, 0.5); box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.12);}
.pr-owners p{margin:0;}
.days{list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:12px 0 0;}
.days li{padding:8px 10px; border-radius:12px; background:rgba(0, 0, 0, 0.06); font-size:13px; display:grid; gap:2px; min-width:64px;}
.days li span{color:var(--t3);}
.days .d8{box-shadow:inset 0 0 0 1px rgba(255, 200, 120, 0.4);}
@media (max-width:860px){.pr-cards, .pr-cards[data-n="2"], .cl-plans, .cl-plans[data-n="4"]{grid-template-columns:minmax(0, 1fr); max-width:480px; margin:0 auto;}}
.brew-box{display:inline-flex; align-items:center; gap:4px; padding:4px 4px 4px 14px; border-radius:12px; background:rgba(0, 0, 0, 0.05); box-shadow:inset 0 0 0 1px var(--line);}
.brew-box code{color:var(--t1); font-size:14px;}
.brew-box button{height:30px; padding:0 12px; border-radius:9px; background:rgba(0, 0, 0, 0.09); font:600 13px/1 var(--sans); color:var(--t1);}
.rvjs [data-rv]{opacity:0; transform:translateY(10px) scale(0.985); filter:blur(6px); transition:opacity 0.6s var(--ease-out), transform 0.7s var(--ease-spring), filter 0.6s var(--ease-out); transition-delay:var(--d, 0ms);}
.rvjs [data-rv].in{opacity:1; transform:none; filter:none;}
@media (prefers-reduced-motion:reduce){.rvjs [data-rv]{opacity:1; transform:none; filter:none; transition:none;}}
@media (prefers-reduced-motion:reduce){.bc, .seg button, .qa-i{transition:none !important;}}
@media (prefers-reduced-motion:reduce){.bc:hover{transform:none;}}
@media (prefers-reduced-motion:reduce){.bc-art::before, .bc-art::after, .vband::before{animation:none !important;}}
.bc-media .dl-art, .bc-media .cl-web{width:100%; max-width:420px;}
.dl-art{height:152px; border-radius:16px; display:flex; align-items:center; justify-content:center; gap:14px;
  background:radial-gradient(80% 90% at 50% 0%, color-mix(in srgb, var(--hue, var(--h-drop)) 22%, transparent), transparent 70%), var(--card); box-shadow:inset 0 0 0 1px var(--line);}
.dl-art-dmg, .dl-art-sign{flex-direction:column; gap:10px;}
.dl-dmg{width:64px; height:64px; border-radius:16px; display:grid; place-items:center; color:#3a3a3c; background:linear-gradient(180deg, #f4f4f7, #c8c8d0); box-shadow:0 10px 24px rgba(0, 0, 0, 0.45);}
.dl-art-dmg code{font:500 12.5px/1 var(--code); color:var(--t2);}
.dl-art-drag img{width:56px; height:56px; filter:none;}
.dl-arrow{display:grid; color:var(--t3);}
.dl-apps{display:grid; justify-items:center; gap:4px; color:#6E6E73;}
.dl-apps small{font-size:11.5px; color:var(--t2);}
.dl-dlg{width:86%; max-width:236px; padding:12px 12px 10px; border-radius:12px; display:grid; justify-items:center; gap:7px; text-align:center; background:#ececf0;}
.bc-media .dl-dlg img{width:30px; height:30px; filter:none;}
.dl-dlg p{margin:0; font-size:10.5px; line-height:1.35; font-weight:600; color:#1d1d1f;}
.dl-dlg-b{display:flex; gap:6px; width:100%;}
.dl-dlg-b i{flex:1; padding:4px 0; border-radius:6px; font:600 11px/1.2 var(--sans); font-style:normal; color:#1d1d1f; background:#d9d9de;}
.dl-dlg-b i.on{background:#0a84ff; color:#1D1D1F;}
.dl-art-sign span{display:flex; align-items:center; justify-content:center; gap:7px; width:150px; height:30px; border-radius:999px; font:600 13px/1 var(--sans); color:var(--t1); box-shadow:inset 0 0 0 1px var(--line2);}
.dl-art-sign .apple{background:#fff; color:#000; box-shadow:none;}
.dl-art-sign b{color:#6E6E73; font-weight:700;}
.dl-file{margin:14px 0 0;}
.dl-brew{margin-top:22px; display:flex; justify-content:center;}
.dl-fix{margin-top:12px;}
.cl-web{position:relative; aspect-ratio:16 / 10; border-radius:18px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--line);
  background:radial-gradient(70% 80% at 50% 0%, color-mix(in srgb, var(--cloud) 26%, transparent), transparent 70%), var(--card);}
.cl-web-notch{position:absolute; z-index:2; top:0; left:50%; transform:translateX(-50%); width:min(80%, 340px); display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 10px 10px 16px; border-radius:0 0 20px 20px; background:#000; color:#1D1D1F; font:600 12.5px/1.2 var(--sans);}
.cl-web-notch b{flex:none; padding:6px 13px; border-radius:999px; background:#fff; color:#000; font-size:12.5px;}
.cl-web-win{position:absolute; left:11%; right:11%; top:36%; bottom:-1px; border-radius:14px 14px 0 0; overflow:hidden; background:#f3f4f7;}
.cl-web-bar{display:flex; align-items:center; gap:6px; padding:9px 12px; background:#e3e5ea;}
.cl-web-bar > i{width:8px; height:8px; border-radius:50%; background:#c4c7ce; flex:none;}
.cl-web-bar span{flex:1 1 auto; min-width:0; margin-left:8px; padding:5px 10px; border-radius:7px; background:#fff; color:#3a3a3c; font:500 11.5px/1 var(--sans);}
.cl-web-rows{display:grid; gap:10px; padding:14px 16px;}
.cl-web-rows div{display:flex; align-items:center; gap:10px;}
.cl-web-rows i:first-child{flex:none; width:22px; height:22px; border-radius:6px; background:#d8dbe2;}
.cl-web-rows i:last-child{width:58%; height:8px; border-radius:4px; background:#dfe2e8;}
.cl-list{padding-top:0;}
.cl-list .qall + .qall{margin-top:12px;}
.cl-v{font-weight:700; margin-right:8px; font-variant-numeric:tabular-nums;}
.cl-pts{margin:0; padding:4px 22px 20px 40px; color:var(--t2); text-align:left;}
.cl-pts li{margin:0 0 10px; font-size:15.5px; line-height:1.55;}
.cl-pts b{color:var(--t1); font-weight:600;}
.ip-ask{margin:26px auto 0;}
.ip-floor{margin:16px 0 0;}
.ptop .badge{margin-bottom:14px;}
.nojs{margin:0 0 28px; padding:18px 20px; border-radius:22px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line2); color:var(--t2);}
.nojs b{display:block; color:var(--t1); margin-bottom:6px;}
.anchor{display:block; height:0; scroll-margin-top:0;}
.hero-proof{margin:14px auto 0; max-width:760px; text-align:center; font-size:14px; line-height:1.5; color:var(--t2); text-wrap:balance;}
.hero-proof [role="img"]{color:#6E6E73; letter-spacing:1px;}
.hero-proof a{color:var(--t3); white-space:nowrap;}
.bc-still-pic img{width:100%; height:100%; object-fit:cover; object-position:50% 0;}
.rev-sec .rev-h{margin:0 0 6px; text-align:center; font:700 clamp(26px, 4vw, 36px)/1.1 var(--display); letter-spacing:-0.02em;}
.rev-sec .rev-lede, .rev-sum{text-align:center; color:var(--t2); margin:0 0 22px;}
.revs{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px;}
.revs > *{border-radius:22px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line2); padding:18px 20px;}
.rev-sum b{color:var(--t1);}
.rev-row{position:relative;}
.revs.rev-scroll{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scroll-padding:0 2px;
  padding:2px 2px 12px; scrollbar-width:thin; scrollbar-color:var(--line3) transparent;}
.revs.rev-scroll > *{flex:0 0 clamp(260px, 31%, 360px); scroll-snap-align:start;}
.revs.rev-scroll:focus-visible{outline-offset:4px;}
.rev-arrow{position:absolute; z-index:2; top:calc(50% - 28px); width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#1D1D1F;
  /* 2026-10-30 (Zack): colour C is light; the old dark-theme navy disc hid the dark chevron and showed a stray ring. */
  background:#FFFFFF; border:0; box-shadow:0 0 0 1px rgba(0, 0, 0, 0.08), 0 6px 18px -6px rgba(0, 0, 0, 0.25); transition:transform .15s ease, box-shadow .15s ease;}
.rev-arrow:hover{background:#FFFFFF; transform:scale(1.06); box-shadow:0 0 0 1px rgba(0, 0, 0, 0.12), 0 10px 24px -8px rgba(0, 0, 0, 0.3);}
.rev-arrow:focus-visible{outline:2px solid var(--acc, #2C6FE0); outline-offset:3px;}
.rev-prev{left:-18px;}
.rev-next{right:-18px;}
@media (hover:none), (max-width: 720px){.rev-arrow{display:none !important;}}
@media (hover:none), (max-width: 720px){.revs.rev-scroll > *{flex-basis:84%;}}
.rev-card{display:flex; flex-direction:column; gap:10px;}
.rev-stars{color:#6E6E73; letter-spacing:2px; font-size:15px; line-height:1;}
.rev-quote{color:var(--t3); font-size:12.5px; letter-spacing:0; line-height:1.2;}
.rev-body{margin:0; color:var(--t1); font-size:15.5px; line-height:1.5; overflow-wrap:anywhere;}
.rev-meta{display:grid; grid-template-columns:34px minmax(0, 1fr); grid-template-rows:auto auto; column-gap:10px; row-gap:2px; align-items:center; margin-top:auto; padding-top:4px;}
.rev-av{grid-row:1 / span 2; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:color-mix(in oklab, var(--h-base) 34%, var(--card2)); color:#1D1D1F; font:700 14px/1 var(--sans);}
.rev-who{display:flex; align-items:center; gap:8px; min-width:0;}
.rev-who b{font-weight:650; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rev-badge{flex:none; display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 8px; border-radius:999px; background:rgba(50, 215, 75, 0.14); color:#1D1D1F; font:650 11.5px/1 var(--sans);}
.rev-date{color:var(--t3); font-size:13px;}
.rev-cta{gap:10px; margin-top:22px; flex-wrap:wrap;}
.rev-page .revs{grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));}
/* The Buy, Subscribe and thank-you boxes suite.js builds (2026-10-29, colour C Light). The redesigned pages load no
   suite.css, so these rules draw the whole box; on the guide pages (suite.css first, c26.css after) they win at equal
   weight. The card is the design's white box over a soft veil, the fields and buttons are the site's (--field-*,
   .btn-pri, .btn-sec), and Scripts/account_pages.test.mjs holds the box to it from /pricing. */
.modal{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px; background:rgba(0, 0, 0, 0.32);}
.modal[hidden]{display:none;}
.modal-card{position:relative; width:min(480px, 100%); max-height:90vh; overflow:auto; padding:28px 26px 24px; border:0; border-radius:26px; background:var(--bg); color:var(--ink);
  box-shadow:0 0 0 1px var(--doc-line), 0 40px 80px -30px rgba(0, 0, 0, 0.35);}
.modal-x{position:absolute; top:10px; right:10px; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; border-radius:50%; background:none; color:var(--ink-2); font-size:26px; line-height:1; cursor:pointer;}
.modal-x:hover{background:var(--fill, rgba(0, 0, 0, 0.05)); color:var(--ink);}
.modal .field{display:grid; gap:6px; margin:12px 0;}
.modal input, .modal textarea, .modal select{font:inherit; padding:10px 14px; border-radius:var(--field-r); border:1px solid var(--field-line); background:var(--field-bg); color:var(--ink);}
.modal input::placeholder, .modal textarea::placeholder{color:var(--ink-2);}
.modal textarea{min-height:110px;}
.modal .err{color:var(--st-bad); font-size:13.5px;}
.bc-doors{display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:8px;}
.cl-sum{min-width:0;}
.cl-sum h2.cl-v{display:inline; margin:0 8px 0 0; font:inherit;}
.sw-sec{padding-top:clamp(28px, 3.5vw, 48px); padding-bottom:clamp(16px, 2vw, 28px);}
.sw-lede{text-align:center; color:var(--t2); max-width:40em; margin:8px auto 22px; text-wrap:pretty;}
.sw-box{max-width:980px; margin:0 auto; overflow-x:auto; overscroll-behavior-x:contain; border-radius:22px; box-shadow:inset 0 0 0 1px var(--line3); background:rgba(12, 12, 32, 0.5);}
.sw-t{width:100%; min-width:640px; border-collapse:collapse; font-size:14.5px; line-height:1.4;}
.sw-t th, .sw-t td{padding:13px 14px; text-align:left; vertical-align:top; border-top:1px solid var(--line3);}
.sw-t thead th{border-top:0; font:700 15px/1.2 var(--display); color:var(--t1);}
.sw-t tbody th{font-weight:600; color:var(--t1); width:24%;}
.sw-t td{color:var(--t2);}
.sw-t .sw-us, .sw-t td:nth-child(2){background:rgba(0, 0, 0, 0.045); color:var(--t1);}
.sw-y, .sw-n, .sw-p{font-weight:700; margin-right:4px;}
.sw-y{color:#1D1D1F;}
.sw-n{color:#6E6E73;}
.sw-p{color:#6E6E73;}
.sw-src{text-align:center; margin:12px auto 0; color:var(--t3);}
.sw-src a{color:var(--t2);}
.vb-btns{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap;}
.vb-btns .btn{flex:1 1 auto; margin-top:0; justify-content:center;}
.vb-btns a.btn:not([onclick]) + a[onclick*="crestDownload"]{display:none;}
@media (max-width:600px){.sw-box{overflow:visible; background:none; box-shadow:none; border-radius:0;}}
@media (max-width:600px){.sw-t, .sw-t tbody, .sw-t tr, .sw-t th, .sw-t td{display:block; min-width:0; width:auto;}}
@media (max-width:600px){.sw-t thead{display:none;}}
@media (max-width:600px){.sw-t tr{margin:0 0 12px; padding:4px 0; border-radius:18px; background:rgba(12, 12, 32, 0.5); box-shadow:inset 0 0 0 1px var(--line3);}}
@media (max-width:600px){.sw-t th, .sw-t td{border-top:0; padding:7px 14px; font-size:14px;}}
@media (max-width:600px){.sw-t tbody th{width:auto; padding-top:12px; font-size:15px;}}
@media (max-width:600px){.sw-t td{display:flex; align-items:baseline; gap:4px;}}
@media (max-width:600px){.sw-t td::before{content:attr(data-label); flex:none; width:6.5em; color:var(--t3); font-weight:600;}}
@media (max-width:600px){.sw-t td:nth-child(2){background:none;}}
@media (max-width:600px){.sw-t td:nth-child(2)::before{color:var(--t1);}}
.out{white-space:pre-wrap; overflow-wrap:anywhere;}
/* The thank-you box's Download buttons (suite.js postPurchase appends bare .btn.full links to #paidApps):
   10px apart, or three bars read as one block (box_scroll.test.mjs). Lost in the final design's restyle, 2026-10-29. */
#paidApps{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
#paidApps[hidden]{display:none}
.modal-card h3{font:700 24px/1.2 var(--sysd); letter-spacing:-.02em; margin:0 0 8px; padding-right:36px; color:var(--ink);}
.modal-card p{margin:0 0 14px; font-size:15px; line-height:1.5; color:var(--ink-2);}
.modal-card > p:first-of-type, .modal-card #coFirst{color:var(--ink);}
.modal-card .hintline{font-size:13.5px; line-height:1.5; color:var(--ink-2);}
.modal-card #coTerms{margin:16px 0 0; padding-top:14px; border-top:1px solid var(--doc-line); font-size:12.5px;}
.modal-card input[type="email"], .modal-card input[type="text"]{display:block; width:100%; box-sizing:border-box; min-height:46px; margin:0 0 10px; font-size:16px;}
.modal-card input:focus, .modal-card input:focus-visible{border-color:var(--accent); box-shadow:none; outline:2.5px solid var(--accent); outline-offset:1px;}
.modal-card .colink{display:inline-block; margin:0 0 12px; padding:4px 0; background:none; border:0; font:500 14px/1.4 var(--sys); color:var(--accent); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset:3px; cursor:pointer;}
.modal-card .colink:hover{text-decoration-color:currentColor;}
/* A button in a box wraps instead of running out of it (suite.css C7, 2026-10-13: at 320px a long label made the box scroll sideways) */
.modal-card .btn{white-space:normal; height:auto; line-height:1.25; text-align:center;}
.modal-card .btn-primary{display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; margin:6px 0 0; padding:10px 18px; border:0; border-radius:var(--field-r); background:var(--btn-bg); color:var(--btn-ink); box-shadow:none; font:600 16px/1.25 var(--sys); cursor:pointer;}
.modal-card .btn-primary:hover{background:var(--btn-hover); color:var(--btn-ink);}
.modal-card .btn-primary:disabled{opacity:0.55; cursor:default;}
.modal-card .btn-ghost{min-height:46px; padding:10px 16px; border-radius:var(--field-r); border:0; background:transparent; color:var(--btn2-ink); box-shadow:inset 0 0 0 1.5px var(--btn2-line); font:600 15px/1.25 var(--sys); cursor:pointer;}
.modal-card .btn-ghost:hover{background:var(--btn-bg); color:var(--btn-ink); box-shadow:inset 0 0 0 1.5px var(--btn-bg);}
.modal-card .err{display:block; min-height:0; color:var(--st-bad); font-size:13.5px; margin:0 0 6px;}
.modal-card .err:empty{display:none;}
.modal-card .ordiv{display:flex; align-items:center; gap:10px; margin:16px 0 10px; color:var(--ink-2); font:500 11px/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase;}
.modal-card .ordiv::before, .modal-card .ordiv::after{content:""; flex:1; height:1px; background:var(--line);}
.modal-card #coCodeLine, .modal-card #coCryptoLine{margin:12px 0 0 !important;}
.modal-card #coCodeLine .colink, .modal-card #coCryptoLine .colink{margin:0; font-size:13.5px;}
/* one door per row, as on /account: side by side, "Continue with Google" broke onto two lines in a 480px box */
.modal-card #subProviders{display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; margin:0 0 4px;}
.modal-card #coProviders{display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; margin:4px 0 12px;}
.modal-card .oauthbtn{display:flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:0 14px; border-radius:var(--field-r); border:0; background:transparent; color:var(--btn2-ink); box-shadow:inset 0 0 0 1.5px var(--btn2-line); font:600 15px/1.1 var(--sys); cursor:pointer;}
.modal-card .oauthbtn:hover, .modal-card .oauthbtn.apple:hover{background:var(--btn2-hover);}
.modal-card .oauthbtn.apple{background:transparent; color:var(--btn2-ink); border:0;}
.modal-card .oauthbtn svg, .modal-card .oauthbtn img{width:18px; height:18px; flex:none;}
.modal-card #coBundle{text-align:center; margin:12px 0 0 !important;}
.modal-card .hear{margin:18px 0 0; padding-top:16px; border-top:1px solid var(--doc-line);}
.modal-card .hear-q{margin:0 0 10px; font-size:13.5px; line-height:1.4; color:var(--ink); font-weight:600;}
.modal-card .hear-opts{display:flex; flex-wrap:wrap; gap:6px;}
.modal-card .hear-opt{border:1px solid var(--field-line); background:transparent; color:var(--ink); border-radius:999px; padding:6px 12px; font:inherit; font-size:13px; line-height:1.3; min-height:34px; cursor:pointer; transition:border-color .16s, background .16s, color .16s;}
.modal-card .hear-opt:hover{border-color:var(--accent); color:var(--accent); background:var(--btn2-hover);}
.modal-card .hear-opt[aria-pressed="true"]{border-color:var(--btn-bg); color:var(--btn-ink); background:var(--btn-bg);}
.modal-card .hear-opt:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px;}
.modal-card .hear-other{display:flex; gap:8px; align-items:center; margin-top:10px;}
.modal-card .hear-other input[type="text"]{margin:0; padding:8px 12px; min-height:40px; font-size:16px; flex:1 1 auto; min-width:0; width:auto;}
.modal-card .hear-other .btn{flex:none; min-height:40px;}
.modal-card .hear-done{margin:0; font-size:13.5px; color:var(--ink-2);}
.modal-card .hear + .hintline{margin-top:18px;}
.rev-badge.rev-free{background:rgba(0, 0, 0, 0.08); color:var(--t2);}
.crest-toast{ position:fixed; left:50%; bottom:24px; z-index:101; max-width:min(520px, calc(100vw - 32px)); padding:12px 16px; border-radius:12px; transform:translateX(-50%);
  background:#1D1D1F; color:#F5F5F7; font:500 14px/1.45 var(--sys); box-shadow:0 18px 40px -12px rgba(0,0,0,.4) }
/* suite.js's page toast (#pageToast, class "toast"): suite.css drew it, and the redesigned pages load none, so a
   "Link copied" printed as bare text at the foot of the page. The same look as .crest-toast. */
#pageToast{ position:fixed; left:50%; bottom:24px; z-index:101; max-width:min(520px, calc(100vw - 32px)); padding:12px 16px; border-radius:12px;
  background:#1D1D1F; color:#F5F5F7; font:500 14px/1.45 var(--sys); box-shadow:0 18px 40px -12px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transform:translate(-50%, 20px); transition:opacity .25s ease, transform .3s var(--spring) }
#pageToast.show{ opacity:1; transform:translate(-50%, 0) }
/* A priced button reads "Buy Crest, $14.99": the label's own space is the gap, not the flex gap */
.btn > [data-price], .btn > .price, .btn > [data-cloud-price]{ margin-left:calc(.27em - 10px) }

/* The questions each redesigned page kept (their words are its FAQPage JSON-LD), drawn as the design's list */
.qsec.kept{ padding:20px 0 120px }
.qsec.kept .wrap{ max-width:calc(860px + 2 * var(--gut)) }
[data-surface="pricing"] .qsec.kept .wrap{ max-width:calc(600px + 2 * var(--gut)) }
.qsec.kept .qall{ border:0; background:none; padding:0; box-shadow:none; border-radius:0 }   /* 2026-10-30: no card: the old kit drew a 1px inset ring the heading sat on */
.qsec.kept .qall > .faq{ margin:0; border-top:0 }
.qsec.kept .qall > summary{ display:flex; align-items:center; gap:10px; padding:0 0 18px; border:0; background:none; font:700 34px/1.1 var(--sysd); letter-spacing:-.03em; color:var(--ink); list-style:none; cursor:pointer }
[data-surface="pricing"] .qsec.kept .qall > summary{ font-size:26px }
.qsec.kept .qall > summary::-webkit-details-marker{ display:none }
.qsec.kept .qall > summary .qall-n, .qsec.kept .qall > summary svg{ display:none }
.qsec.kept details.qa{ border:0; border-top:1px solid var(--line); border-radius:0; background:none; margin:0 }
.qsec.kept details.qa:last-of-type{ border-bottom:1px solid var(--line) }
.qsec.kept details.qa > summary{ display:flex; justify-content:space-between; gap:20px; padding:20px 0; font:650 19px/1.3 var(--sysd); letter-spacing:-.015em; color:var(--ink); list-style:none; cursor:pointer }
.qsec.kept details.qa > summary::-webkit-details-marker{ display:none }
.qsec.kept details.qa > summary svg{ display:none }
.qsec.kept details.qa > summary::after{ content:"+"; font:400 24px/1 var(--sys); color:var(--ink-2); transition:transform .3s var(--spring) }
.qsec.kept details.qa[open] > summary::after{ transform:rotate(45deg) }
.qsec.kept .qa-a{ padding:0 0 22px; max-width:42em; font-size:17px; line-height:1.6; color:var(--ink-2) }
.qsec.kept .qa-a p{ margin:0 0 10px; color:inherit; font-size:inherit }
.qsec.kept .qa-a a{ color:var(--accent) }
@container site (max-width: 760px){ .qsec.kept .qall > summary{ font-size:28px } .qsec.kept details.qa > summary{ font-size:17px } }
/* /take and /minutes: the details folds, word for word, in the same list */
.kept-folds{ padding:20px 0 120px }
.kept-folds .qa-in{ max-width:860px }
.kept-folds details.fold{ border-top:1px solid var(--line) }
.kept-folds details.fold:last-child{ border-bottom:1px solid var(--line) }
.kept-folds details.fold > summary{ display:flex; justify-content:space-between; gap:20px; padding:20px 0; font:650 19px/1.3 var(--sysd); color:var(--ink); list-style:none; cursor:pointer }
.kept-folds details.fold > summary::-webkit-details-marker{ display:none }
.kept-folds details.fold > summary::after{ content:"+"; font:400 24px/1 var(--sys); color:var(--ink-2) }
.kept-folds details.fold[open] > summary::after{ content:"\2212" }
.kept-folds details.fold :is(p, li, td, th){ font-size:16.5px; line-height:1.6; color:var(--ink-2) }
.kept-folds details.fold :is(h3, h4, b, strong){ color:var(--ink) }
.kept-folds details.fold table{ width:100%; border-collapse:collapse; margin:8px 0 18px }
.kept-folds details.fold :is(td, th){ padding:9px 10px; border-top:1px solid var(--line); text-align:left; vertical-align:top }
.kept-folds details.fold a{ color:var(--accent) }

/* Every page but the six the final design redrew reads as the design's article: one white sheet on the
   soft grey page, under the menu bar (design site.css ".doc"). The redesigned pages say data-page="stage". */
body.s26:not([data-page="stage"]){ background:var(--doc-page) }
body.s26:not([data-page="stage"]) main{ position:relative; max-width:calc(900px + 168px); margin:64px auto 120px; padding:64px 84px 72px; border-radius:20px;
  background:var(--doc-bg); color:var(--doc-ink); box-shadow:0 0 0 1px var(--doc-line), var(--shot-shadow) }
body.s26:not([data-page="stage"]) main .wrap{ max-width:none; padding-left:0; padding-right:0 }
body.s26:not([data-page="stage"]) main :is(.art, .copy){ max-width:none; margin:0; padding:0; background:none; box-shadow:none; border-radius:0 }
body.s26:not([data-page="stage"]) main > section, body.s26:not([data-page="stage"]) main > .wrap{ padding-top:0; padding-bottom:0; background:none }
body.s26:not([data-page="stage"]) main > section + section{ margin-top:48px }
body.s26:not([data-page="stage"]) main::before{ content:none }
@container site (max-width: 1179px){ body.s26:not([data-page="stage"]) main{ margin:44px var(--gut) 96px; padding:52px 56px 60px } }
@container site (max-width: 760px){ body.s26:not([data-page="stage"]) main{ margin:16px 10px 64px; padding:30px 20px 40px; border-radius:16px } }
/* 2026-10-29: /account's dashboard keeps its own 16px phone gutters; inside the sheet's 30px it squeezed each row's words
   under 120px (business_layout.test.mjs). On a phone its sheet runs edge to edge instead. */
/* 2026-10-29: signed in, /account is an app (a sidebar and three app tiles), not an article: on a desktop its sheet
   takes the design's full 1296px column with tighter padding, or the tiles were 180px wide and "Download Minutes and
   sign in" ran out of its tile (account_pages.test.mjs). */
body.s26:not([data-page="stage"]) main:has(.dash.active){ max-width:1296px; padding:40px 44px 56px }
@container site (max-width: 1179px){ body.s26:not([data-page="stage"]) main:has(.dash.active){ padding:32px 28px 48px } }
/* :is(..., :has(.dash.active)) only lifts this rule to the weight of the signed-in ones above, so a phone keeps it */
@container site (max-width: 760px){ body.s26:not([data-page="stage"]) main:is(:has(.dash), :has(.dash.active)){ margin:12px 0 64px; padding:24px 0 40px; border-radius:0 } }
/* A page's own inline :root (legal, dmca and the older guides were written on dark grounds) never repaints the shell's ink */
body.s26{ --t1:#1D1D1F; --t2:#424245; --t3:#6E6E73; --hair:#E5E5EA; --hair2:#EDEDF0; --hair3:#D2D2D7; --onb1:#F5F5F7; --onb2:#A1A1A6; --onb3:#86868B; color:var(--ink) }
.mb, .ft, .mb-menu, .mb-sheet{ color:var(--ink) }
.ft-col a, .ft-legal a{ color:var(--ink) }
.ft-legal{ color:var(--ink-2) }

body.s26:not([data-page="stage"]) main :is(section, div)::before{ background-image:none }
.hero-proof{ margin:10px 0 0; font-size:14px; line-height:1.45; color:var(--ink-2) }
.hero-proof span[role="img"]{ color:#8A5A00; letter-spacing:1px }
.hero-proof a{ color:var(--accent) }
h3.k{ font-weight:500 }
/* 2026-10-29: US and Canada pay tax on top (c26.js sets data-tax from /cloud/prices taxMode). */
html[data-tax="added"] [data-price]::after{ content:" + tax"; font-size:max(.5em, 12px); font-weight:500; letter-spacing:0; white-space:nowrap }
html[data-tax="added"] .btn [data-price]::after{ font-size:inherit }
/* One size on sale (prices.js CLOUD_C200_ON_SALE off): the plan takes the row, never half of it. */
.pc-plans:has(> .pc-plan:only-child){ grid-template-columns:minmax(0,1fr) }
html[data-tax="added"] [data-cloud-price]::after{ content:" + tax"; font-size:max(.4em, 12px); font-weight:500; letter-spacing:0; white-space:nowrap }
/* 2026-10-29: the screenshot viewer (suite.js opens a.shotlink in dialog.shotview). /take and /minutes no longer load
   suite.css, so its rules live here too, the same ones, for every c26 page. */
a.shotlink{display:block;cursor:zoom-in}
html.shotview-lock{overflow:hidden}
dialog.shotview{border:0;padding:56px 16px 20px;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:zoom-out;box-sizing:border-box}
dialog.shotview:not([open]){display:none}
dialog.shotview::backdrop{background:rgba(8,9,11,.92)}
.shotview-img{display:block;max-width:min(1440px,100%);max-height:calc(100vh - 140px);width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 18px 60px rgba(0,0,0,.5)}
.shotview-cap{margin:0;max-width:720px;color:rgba(255,255,255,.78);font-size:14px;line-height:1.45;text-align:center}
.shotview-err{margin:0;color:#fff;font-size:15px;text-align:center}
.shotview-err a{color:#F5B454;text-decoration:underline;cursor:pointer}
.shotview-x{position:absolute;top:14px;right:16px;font-family:inherit;font-size:14px;font-weight:600;line-height:1;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:9px 14px;cursor:pointer}
.shotview-x:hover{background:rgba(255,255,255,.24)}
.shotview-x:focus-visible{outline:2px solid #F5B454;outline-offset:2px}
/* 2026-10-30: a question opens to its answer's real height and closes back (interpolate-size + ::details-content;
   browsers without them open at once). Collapsed, a question is only its summary. */
@media (prefers-reduced-motion: no-preference){
  details.qa, .qa details, details.fold{ interpolate-size:allow-keywords }
  details.qa::details-content, .qa details::details-content, details.fold::details-content{ block-size:0; overflow-y:clip; transition:block-size .32s var(--spring), content-visibility .32s allow-discrete }
  details.qa[open]::details-content, .qa details[open]::details-content, details.fold[open]::details-content{ block-size:auto }
}
/* 2026-10-30: a US/CA visitor's "$14.99 + tax once" must fit a 390 px card: the words wrap under the number. */
.pp-price{ flex-wrap:wrap; row-gap:4px }
html[data-tax="added"] .pp-price [data-price]::after{ font-size:max(.3em, 14px) }