/* 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. */
/* Display type (2026-11-15). Zack disliked Newsreader, the serif set on every H1 and H2 on 2026-11-14 (it replaced the
   system sans, which "reads as AI-made"). The headings now use the new home page's type system instead: "Ysabeau Office"
   (OFL, self-hosted, licence beside the file) for heading words, "Open Runde Digits" (OFL) for a big number that stands
   alone (a price), San Francisco for everything else. The Ysabeau file is the variable Latin cut, weights 400 to 800,
   18 KB, smaller than the 24 KB Newsreader cut it replaces, so /take's first view stays under its budget. Every page
   preloads it (Scripts/site_font_preload.py). Until it arrives the headings show in "Ysabeau Office Fallback", a local
   sans scaled to Ysabeau's width (how the value was chosen is beside it). Every heading keeps its size and fixed line
   height; only the face, the weight (620, the home page's display weight) and the letter-spacing (eased from the
   serif's -.03em to the home page's -.006em to -.016em) changed. The digits files hold only digits, space and
   $ % + , - . / : and a few signs, so a price's words ("once", "a month") never use them. Every font file carries a
   content hash in its name. */
@font-face{ font-family:"Ysabeau Office"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(/fonts/ysabeau-office-latin.1b86e7bf.woff2) format("woff2") }
/* The fallbacks, measured 2026-11-15 in headless Chrome: every H1 and H2 on 11 page kinds at 1440 and 390 wide (144
   headings) set on one line in Ysabeau 620 and in each local candidate, same size and letter-spacing. Gill Sans
   SemiBold tracks Ysabeau closest (it is the same humanist kind of sans): Ysabeau is 95.75% of its width, weighted by
   heading width, and the 10th to 90th percentile spread is 2.7%, the tightest of the seven tried (Arial, Arial Bold,
   Helvetica Neue Medium and Bold, Avenir Next Medium and Demi Bold). Windows has no Gill Sans, so a second face uses
   Arial Bold, the closest face both systems ship (87.75%, spread 5.5%). size-adjust is that ratio, rounded, then
   checked on the same 24 page views with the Ysabeau file blocked: Gill Sans at 95% keeps every page height the same
   as with Ysabeau loaded (96% put a line on /take at 390), and Arial Bold at 88% does too. */
@font-face{ font-family:"Ysabeau Office Fallback"; font-style:normal; font-weight:400 800; src:local("Gill Sans SemiBold"), local("GillSans-SemiBold"); size-adjust:95% }
@font-face{ font-family:"Ysabeau Office Fallback Arial"; font-style:normal; font-weight:400 800; src:local("Arial Bold"), local("Arial-BoldMT"); size-adjust:88% }
@font-face{ font-family:"Open Runde Digits"; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/open-runde-digits-600.8df1a295.woff2) format("woff2"); unicode-range:U+20, U+24-25, U+2B-3A, U+B0, U+B7, U+D7 }
@font-face{ font-family:"Open Runde Digits"; font-style:normal; font-weight:700; font-display:swap;
  src:url(/fonts/open-runde-digits-700.e9aa2161.woff2) format("woff2"); unicode-range:U+20, U+24-25, U+2B-3A, U+B0, U+B7, U+D7 }
@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;
  /* --disp, not --display: --display is the old kit's name for San Francisco Display (the bridge below) */
  --disp:"Ysabeau Office", "Ysabeau Office Fallback", "Ysabeau Office Fallback Arial", "Helvetica Neue", Arial, sans-serif;
  --num:"Open Runde Digits", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", 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:103%; 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:600 15px/1.4 var(--sans); letter-spacing:-.01em; color:var(--k-ink) }
.h1{ margin:0; font:620 84px/.98 var(--disp); letter-spacing:-.016em; font-synthesis:none; text-wrap:balance }
.h2{ margin:0; font:620 56px/1.04 var(--disp); letter-spacing:-.014em; font-synthesis:none; text-wrap:balance }
/* The display layer: every page heading (an h1 or an h2) is drawn in Ysabeau Office at weight 620, whichever kit sized it.
   It is !important on purpose. The older kits (c26-guide.css, seo-glass.css, suite.css) and about a dozen pages' own
   <style> blocks load after this file and set their headings with a `font:` shorthand, so without it one page family
   would stay in the old sans. A heading tag that is really a small label (a plan's name, a changelog version, a card
   title, a screen-reader-only title) is named in the :not() and keeps San Francisco. */
:is(h1, h2):not(.pp-name, .pc-title, .cl-v, .ttl, .sr-only){ font-family:var(--disp) !important; font-weight:620 !important; font-synthesis:none }
.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 }
/* 2026-11-07 (Zack, "like Alcove", logo only): the X account as a small round icon button, in the bar on every shell
   page (site_social.X_HEADER) and under the homepage's buttons (X_HOME). Quiet: the Sign in button's outline, no fill. */
.mb-x{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:26px; height:26px; margin-left:6px; border-radius:50%; color:var(--bar-ink); text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--in-line); transition:background-color .15s ease, box-shadow .15s ease }
.mb-x:hover{ background:var(--bar-hover); box-shadow:inset 0 0 0 1px var(--in-line-hover) }
.mb-x:focus-visible, .x-btn:focus-visible{ outline-offset:2px }
.hero-x{ margin:14px 0 0 }
.x-btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line); text-decoration:none; transition:color .15s ease, box-shadow .15s ease }
.x-btn:hover{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink-2) }
.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:600 13px/1.4 var(--sans); letter-spacing:-.005em; 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:600 14px/1.4 var(--sans); letter-spacing:-.005em; 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 }
/* F2 (2026-11-03): the notch card says it is a film on hover; the film's doors are styled by /filmdoors.js */
.fd-cta{ display:none }
.fd-card-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:9px; padding:6px 14px 6px 6px; border-radius:999px;
  background:rgba(0,0,0,.78); color:#fff; font:600 14px/1 var(--sys); white-space:nowrap; opacity:0; transition:opacity .2s ease; pointer-events:none }
.fd-card-play .pl{ width:26px; height:26px; background:#fff }
.fd-card-play .pl::before{ border-color:transparent transparent transparent #000; border-width:5px 0 5px 8px }
.fd-card:hover .fd-card-play, .fd-card:focus-visible .fd-card-play{ 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(--num); 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:74px }

/* 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 }
section.qa summary::after{ content:"+"; font:400 24px/1 var(--sys); color:var(--ink-2); transition:transform .3s var(--spring) }
section.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(--num); 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(--num); 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; white-space:nowrap }
/* 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) }
/* Ballot 147 (2026-11-04): the Crest Passwords card sits above Cloud's; Cloud says it includes it, and the
   Passwords card carries the one step-up sentence. */
.pc-card + .pc-card{ margin-top:22px }
.pc-inc{ margin:12px 0 0; font-size:15.5px; line-height:1.5; font-weight:600 }
.pc-inc + .pc-lead{ margin-top:4px }
.pc-up{ margin:16px 0 0; font-size:14.5px; line-height:1.5; color:var(--card-ink-2) }
/* Ballot 151 (2026-11-05): Step 1, then Step 2 with two plan cards (Scripts/drop_cloud_cards.py). */
.pc-step2 .pc-size{ font:700 17px/1.2 var(--sys); color:var(--card-ink) }
.pc-step2 .pc-plan{ display:flex; flex-direction:column }
.pc-step2 .pc-plan .pc-lead{ margin-top:10px; font-size:14.5px }
.pc-step2 .pc-plan > .btn{ margin-top:auto }
/* Ballot 152 W5 (2026-11-05): on /cloud, Step 2 fell into the copy column's second row (510 px at 1440) and
   "Get Crest Passwords" wrapped; it sits under Step 1 at /pricing's width instead (one column under 1180 px).
   No row gap: .pc-card + .pc-card already spaces the two steps 22 px, as on /pricing. */
.plans-in > .pc-step2{ grid-column:2 }
.plans-in:has(> .pc-step2){ row-gap:0 }
.pc-step2 .pc-plan > :nth-last-child(2){ margin-bottom:16px }
.pc-more{ margin:14px 0 0; padding-top:12px; border-top:1px solid var(--card-line); font-size:14px; line-height:1.5; color:var(--card-ink-2) }
.pc-more .tlink{ font-size:14px }
.pc-save[hidden]{ display:none }
.pc-step1 .pc-lead{ margin-top:10px }
.pc-step1 .btns{ margin-top:16px }
.pc-ios{ width:min(100%, 600px); margin:16px auto 0; font-size:14px; line-height:1.5; color:var(--ink-2); text-align:center }
.pc-up 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:600 15px/1.4 var(--sans); letter-spacing:-.01em; 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:600 14px/1.4 var(--sans); letter-spacing:-.01em; 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:620 50px/1.04 var(--disp); letter-spacing:-.014em; font-synthesis:none; text-wrap:balance }
.doc h2{ margin:58px 0 14px; font:620 31px/1.15 var(--disp); letter-spacing:-.006em; font-synthesis:none; 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:68px }
  .h2{ font-size:48px }
  .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 }
  .plans-in > .pc-step2{ grid-column:auto }
  .plans-in:has(> .pc-step2){ row-gap:40px }
  .feat.flip .f-copy{ order:0 }
  .sub{ padding:90px 0 90px }
  .sub .h1{ font-size:62px }
  .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:14px }
  .h1, .sub .h1{ font-size:40px; line-height:1.02; letter-spacing:-.024em }
  .h2{ font-size:34px; line-height:1.07; letter-spacing:-.02em }
  .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 }
  .mb-r > .mb-x{ display:inline-flex; margin-right:4px }   /* the X button stays on phones, beside the menu button */
  .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:600 14px/1.4 var(--sans); letter-spacing:-.01em; 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:620 clamp(42px, 6.4vw, 88px)/1.02 var(--disp); letter-spacing:-0.016em; 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:minmax(var(--sub), auto); 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; display:flex; flex-direction:column; 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{display:none;}
.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;}}
.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:relative; flex:1 1 auto; min-height:clamp(130px, 13vw, 190px); 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;}
/* 2026-11-11 (6.8 lane, Zack: "pretty bad work"): the final design (953c2c7c7) relit the page but left these cards half
   converted: a near-black caption fade over a pale card, dark words on that fade, and the base .tag rule gone. Now the
   caption is a solid light panel in the card's flow, under the picture. Dark words on --card, the same panel the FAQ and
   the page's other boxes use; a picture stops where the caption starts, so no fade and no arc run through the text. */
.bc-cap{position:relative; margin-top:auto; z-index:5; padding:18px 22px 22px; pointer-events:none; background:var(--card);}
.bc-cap a, .bc-cap button{pointer-events:auto;}
.bc-tags{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.bc > .shot{flex:1 1 auto; min-height:0; aspect-ratio:auto; border-radius:0; box-shadow:none;}
.bc > .shot > video, .bc > .shot > img{position:absolute; inset:0; height:100%; object-fit:cover;}
.bc-wide > .shot, .bc-half > .shot{flex:none; aspect-ratio:16 / 10;}
.bento:has(.bc-wide, .bc-half){grid-auto-rows:auto;}
.bc-wide, .bc-half, .bento:has(.bc-wide, .bc-half) .bc-third{grid-row:auto;}
.bc-big > .shot{flex:none; aspect-ratio:16 / 10;}
.bc-big > .bc-cap{flex:1 1 auto; margin-top:0; display:flex; flex-direction:column; justify-content:center;}
/* /products keeps its row (Take and Minutes' Buy links stay on the first screen, products_page.test): the two side cards go side by side, icon and text, so the column is no taller than Crest's picture and caption. */
@media (min-width:721px){.bento > .bc.bc-still:not(.bc-third, .bc-half){flex-direction:row;} .bento > .bc.bc-still:not(.bc-third, .bc-half) > .bc-media{flex:0 0 clamp(100px, 11vw, 140px); min-height:0;} .bento > .bc.bc-still:not(.bc-third, .bc-half) > .bc-cap{flex:1 1 0; min-width:0; margin-top:0; display:flex; flex-direction:column; justify-content:center;}}
.bc-third .bc-cap{min-height:158px;}
/* 2026-11-11 (/get): the install steps are one row of equal cards. The picture band has one height and the caption
   starts right under it, so a one-line title no longer lets its picture grow and push the caption down. */
.bento.bento-even{grid-auto-rows:auto;}
.bento-even > .bc{grid-row:auto;}
.bento-even .bc-media{flex:none; min-height:0; padding:16px;}
.bento-even .bc-cap{flex:1 1 auto; margin-top:0;}
@media (max-width:720px){.bento-even > .bc{aspect-ratio:auto;}}
.bento-steps > .bc{grid-column:auto;}
.bento-steps .bc-t{font-size:clamp(19px, 1.6vw, 22px);}
@media (min-width:1001px){.bento.bento-steps{grid-template-columns:repeat(4, minmax(0, 1fr));}}
@media (min-width:721px) and (max-width:1000px){.bento.bento-steps{grid-template-columns:repeat(2, minmax(0, 1fr));}}
.bc-cap-2{display:grid; grid-template-columns:1fr 1fr; gap:16px 34px;}
.bc-cap-2 .bc-t{font-size:clamp(20px, 1.8vw, 25px);}
@media (max-width:720px){
  .bc:has(> .shot){aspect-ratio:auto;}
  .bc > .shot{flex:none; aspect-ratio:16 / 10;}
  .bc-cap-2{grid-template-columns:1fr;}
}
/* 2026-11-11: the pill the base rule gave every tag; the final design rewrote .tag-pro and friends for light pages and dropped this. */
.tag{display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font:700 12px/1 var(--sans); letter-spacing:.01em; white-space:nowrap;}
/* 2026-11-11: the svg inside every kept details.qa is now the one plus (.qa summary::after was left drawing a second). */
details.qa > summary .qa-i{flex:none; color:var(--t2); transition:transform .35s var(--ease-spring);}
details.qa[open] > summary .qa-i{transform:rotate(45deg);}

.bc-t{margin:9px 0 4px; font:750 clamp(20px, 1.8vw, 25px)/1.12 var(--display); letter-spacing:-0.024em; color:var(--t1);}
.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:var(--t2); max-width:34em;}
.bc-go{display:inline-flex; align-items:center; gap:6px; margin-top:10px; color:var(--t1); font-weight:650; font-size:15px;}
.bc-go:hover{text-decoration:underline; text-underline-offset:3px;}
@media (max-width:720px){.bc-cap{padding:16px 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;}
/* 2026-11-11 (/products): three plans in one row; two columns left Minutes alone with an empty slot */
.vb-cards.vb-three{grid-template-columns:repeat(3, minmax(0, 1fr)); max-width:1000px;}
.vb-three .vb-card .btn{margin-top:0;}
.vb-three .vb-card .micro{margin:0; max-width:none; text-align:left;}
@media (max-width:900px){.vb-cards.vb-three{grid-template-columns:minmax(0, 1fr); max-width:480px;}}
.vb-card, .plan, .clp{padding:26px; border-radius:26px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line2); 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(--num); 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:var(--card); 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:#fff;}
/* 2026-11-11 (/take, /minutes on a phone): the four-app table was wider than the screen and the page clips sideways
   overflow, so the rival columns could not be reached at all. Under 600 px each row reads as a block: the feature on
   its own line, the four answers in a 2 x 2 grid, each under its app's name (data-label on the cell). */
@media (max-width:600px){table.compare, table.compare tbody{display:block; width:auto;}
 table.compare thead{display:none;}
 table.compare tbody tr:first-child{border-top:0;}
 table.compare tbody tr{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 16px; padding:14px 0; border-top:1px solid var(--line2);}
 .table-scroll table.compare :is(tbody th, td){display:block; width:auto; padding:0; border:0;}
 table.compare tbody th{grid-column:1 / -1;}
 table.compare td::before{content:attr(data-label); display:block; margin-bottom:2px; font-size:12.5px; font-weight:600; color:var(--t3);}}
.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 }
/* 2026-11-11 (/products): the anchor spans between Questions and "How to buy them" broke "+", leaving the two flush */
body.s26:not([data-page="stage"]) main > section ~ .anchor + 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:600 }
/* 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) }
/* our answer under a review, and where a /reviews question came from (2026-11-03, ballot 139) */
.rev-reply{margin-top:4px; padding:10px 12px; border-radius:12px; background:rgba(0, 0, 0, 0.045);}
.rev-reply p{margin:0; font-size:14px; line-height:1.5; color:var(--t2); overflow-wrap:anywhere;}
.rev-reply .rev-reply-by{margin-bottom:4px; font:650 12.5px/1.3 var(--sans); color:var(--t1);}
@media(max-width:600px){.rev-by-x{display:none}.rev-reply-by{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.qa-a .qa-src{margin-top:10px; font-size:13.5px; color:var(--t3);}
.qa-more{margin:22px 0 0; color:var(--t2); font-size:15px;}
.qa-more a{color:var(--t1); text-decoration:underline; text-underline-offset:3px;}
[data-surface="reviews"] #questions{padding-top:clamp(48px, 7vw, 88px);}

/* 2026-11-07: under 385px the bar's X button would touch the notch (it clears it by 3px at 375, site_layout's rule is
   4px), so the narrowest phones keep the brand and the menu button only; the homepage's X button and the footer stay. */
@container site (max-width: 384px){ .mb-r > .mb-x{ display:none } }