/* ============================================================
   dmswift — Paper & Sweep · marketing surface
   Loaded AFTER /tokens.css, which owns every colour, radius, shadow and duration.
   There are exactly four literal colours in this file: three in §8.11's final slab,
   which is deliberately the same in both themes, and --h-mint below, the one
   decorative hue tokens.css never declared. Nothing else here may carry a hex.
   Base CSS is static. Every animation lives in the motion block near the bottom,
   inside @media (prefers-reduced-motion: no-preference).
   ============================================================ */

:root {
  --font-display: "Fraunces", "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --font-ui:      "Rubik", "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --wonk:        "SOFT" 40, "WONK" 1;
  --wonk-tight:  "SOFT" 22, "WONK" 0;
  /* The pill is fixed at inset-block-start:14px over a 56px bar, so its bottom edge is at 70px.
     No section may open closer than that plus a comfortable 48px of air, which is why the floor
     of this clamp is 118px and not the 84px it used to be. */
  --sec-pad: clamp(118px, 11vw, 152px);
  --nav-bottom: 70px;
  font-variant-numeric: lining-nums;

  /* §11a — the outgoing (product) bubble. One pair for every place the product speaks: the hero
     still, the demo's Messenger pane, the public reply, the feature mini-chat and the scenario
     cards. In light it is the lavender tint. In dark a 15%-alpha wash over near-black lands at
     L*13 and reads as a bruise rather than a bubble, so it is composed against --card instead —
     L*19, --ink on it at 11.85:1. Both bubbles are tokens; neither is a literal. */
  --bubble-out:     var(--tint-violet);
  --bubble-out-ink: var(--on-violet);
  --bubble-in:      var(--paper-2);
  --bubble-in-ink:  var(--ink);

  /* tokens.css declares five decorative hues and no mint, so every [data-hue="mint"] tile glowed
     violet off the fallback. This is the mint its own --tint-mint/--on-mint pair is built from —
     the dark theme's --tint-mint is exactly this colour at 14% — and like the other five it is
     one value in both themes, because a decorative glow is not a text colour. */
  --h-mint: #4FB392;

  /* The post photo's palette. Two hues off the ramp — violet and amber — plus paper, and nothing
     else. Declared here so the scene re-lights itself in dark instead of being repainted. */
  --pm-ground:    var(--paper-3);
  --pm-desk:      color-mix(in srgb, var(--h-amber) 26%, var(--paper-2));
  --pm-desk-edge: color-mix(in srgb, var(--h-amber) 46%, var(--paper-2));
  --pm-cool:      color-mix(in srgb, var(--h-violet) 58%, var(--paper));
  --pm-cool-dark: color-mix(in srgb, var(--h-violet) 78%, var(--paper));
  --pm-screen:    color-mix(in srgb, var(--h-violet) 16%, var(--paper));
  --pm-line:      color-mix(in srgb, var(--h-violet) 36%, var(--paper));
  --pm-warm:      color-mix(in srgb, var(--h-amber) 72%, var(--paper));
  --pm-warm-soft: color-mix(in srgb, var(--h-amber) 20%, var(--paper-3));
  --pm-paper:     var(--card);
}
[data-theme="dark"] {
  --bubble-out:     color-mix(in srgb, var(--h-violet) 26%, var(--card));
  --bubble-out-ink: var(--ink);
  --bubble-in:      var(--paper-3);
  --pm-cool:        color-mix(in srgb, var(--h-violet) 46%, var(--paper-3));
  --pm-cool-dark:   color-mix(in srgb, var(--h-violet) 66%, var(--paper-3));
  --pm-screen:      color-mix(in srgb, var(--h-violet) 22%, var(--paper));
  --pm-line:        color-mix(in srgb, var(--h-violet) 52%, var(--paper-2));
  --pm-warm:        color-mix(in srgb, var(--h-amber) 66%, var(--paper-3));
  --pm-warm-soft:   color-mix(in srgb, var(--h-amber) 11%, var(--paper-3));
  --pm-paper:       color-mix(in srgb, var(--ink) 14%, var(--paper-3));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bubble-out:     color-mix(in srgb, var(--h-violet) 26%, var(--card));
    --bubble-out-ink: var(--ink);
    --bubble-in:      var(--paper-3);
    --pm-cool:        color-mix(in srgb, var(--h-violet) 46%, var(--paper-3));
    --pm-cool-dark:   color-mix(in srgb, var(--h-violet) 66%, var(--paper-3));
    --pm-screen:      color-mix(in srgb, var(--h-violet) 22%, var(--paper));
    --pm-line:        color-mix(in srgb, var(--h-violet) 52%, var(--paper-2));
    --pm-warm:        color-mix(in srgb, var(--h-amber) 66%, var(--paper-3));
    --pm-warm-soft:   color-mix(in srgb, var(--h-amber) 11%, var(--paper-3));
    --pm-paper:       color-mix(in srgb, var(--ink) 14%, var(--paper-3));
  }
}
/* Hebrew display. The last three names in the Latin stack — Fraunces, Georgia, Times New Roman —
   carry no Hebrew glyphs at all, so a Hebrew heading that missed Frank Ruhl Libre fell straight
   past every designed face to whatever serif the OS volunteered. Rubik sits in front of them:
   it is already loaded, it ships Hebrew drawn by the same hand as the Latin, and it is what the
   heading shows during the `display: swap` window instead of a system serif. */
[lang="he"] { --font-display: "Frank Ruhl Libre", "Rubik", Georgia, serif; }

@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Anchor jumps have to stop below the fixed pill, not under it. 70px is the pill's bottom edge
   (14px offset + a 56px bar) and 24px is the air below it. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-block-start: calc(var(--nav-bottom) + 24px); }
html.ds-locked { overflow: hidden; }

body.ds {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-inline-size: 100%; }
img { block-size: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; inline-size: 100%; }

/* ---------- §4.3 the one universal focus rule ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4.5px var(--focus);
  border-radius: inherit;
}

.ds-skip {
  position: fixed; inset-block-start: -80px; inset-inline-start: var(--gutter); z-index: 90;
  background: var(--card); color: var(--ink); border: 1px solid var(--rule-2);
  border-radius: var(--r-pill); padding: 10px 20px; font-size: .9375rem; font-weight: 600;
  box-shadow: var(--sh-2);
}
.ds-skip:focus { inset-block-start: 14px; }

/* ============================================================
   1 · layout + type
   ============================================================ */
.ds-wrap { max-inline-size: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.ds-narrow { max-inline-size: var(--max-txt); }

.ds-sec { padding-block: var(--sec-pad); border-block-end: 1px solid var(--rule); }
/* A tinted band's bottom padding and the next section's top padding both paint the same air, and
   on a tinted band you can SEE it: that was the ~250px of empty colour below the feature grid.
   The tint edge is already the separator, so the band gives back about a third of its floor. */
.ds-sec-alt { background: var(--paper-2); padding-block-end: clamp(76px, 7.5vw, 104px); }

.ds-head { max-inline-size: var(--max-txt); margin-block-end: clamp(34px, 4.4vw, 60px); }
.ds-head-row {
  max-inline-size: none; display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s5);
}
.ds-head-row > div { max-inline-size: var(--max-txt); }

/* ONE micro-label. There were five sizes (11px, .6875rem, .75rem, .84375rem, .9375rem) and four
   trackings across the page's small caps, which is four systems pretending to be one. The type is
   the same everywhere now; only the colour says which of the two roles a label is playing —
   accent for the label that opens a section, --ink-3 for a label inside one. */
.ds-eyebrow, .ds-pane-label, .ds-scen-tag, .ds-mini-plan, .ds-foot-col h2 {
  font-size: .75rem; font-weight: 600; line-height: 1.2; letter-spacing: .14em;
  text-transform: uppercase;
}
.ds-eyebrow { color: var(--accent-ink); margin-block-end: var(--s3); }
.ds-pane-label { color: var(--ink-3); margin-block-end: var(--s3); }

.ds-display-1 {
  font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--wonk);
  font-size: clamp(2.75rem, 1.35rem + 5.7vw, 5.375rem);
  line-height: 1.02; letter-spacing: -.025em; text-wrap: balance;
  margin-block: var(--s4) var(--s5);
}
.ds-display-2 {
  font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--wonk);
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.25rem);
  line-height: 1.08; letter-spacing: -.02em; text-wrap: balance;
}
.ds-lead {
  font-size: clamp(1.0625rem, 1rem + .42vw, 1.25rem); line-height: 1.62; color: var(--ink-2);
  max-inline-size: 54ch; margin-block-start: var(--s4);
}
.ds-small { font-size: .875rem; line-height: 1.6; color: var(--ink-3); }
.ds-footnote { font-size: .8125rem; line-height: 1.65; color: var(--ink-3); max-inline-size: 78ch; margin-block-start: var(--s5); }
.ds-numeral {
  font-family: var(--font-display); font-weight: 300; font-variation-settings: var(--wonk);
  font-size: clamp(3.5rem, 1.9rem + 6.2vw, 6.5rem);
  line-height: .95; letter-spacing: -.03em;
  font-variant-numeric: proportional-nums lining-nums;
}
.ds-price { font-variant-numeric: proportional-nums lining-nums; }

/* §4.5 gradient-text licence — one phrase on the whole page, authored so a
   background-clip failure degrades to readable ink. */
.ds-grad-word { color: var(--ink); font-style: normal; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .ds-grad-word {
    background: var(--grad-display);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}

/* §7.2 the sweep underline.
   It used to be an absolutely positioned ::after bar. On an inline element that breaks across
   lines the containing block is the union of the first and last line boxes, so in Hebrew — where
   "שיחה פרטית" wraps — a 130px word carried a 360px rule. It is a background layer on the span
   now: a background paints per line fragment and is sized to the text, in any language, at any
   width, with no measurement anywhere. */
.u-sweep {
  font-style: normal;
  background-image: var(--sweep);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .09em;
  padding-block-end: .06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
[dir="rtl"] .u-sweep { background-position: 100% 100%; }

/* §7.3 pen — a pastel marker across the bottom of the line.
   ONE colour for the whole page. Five hues meant five different meanings the reader had to
   decode, and there were none: it is emphasis, and emphasis is the brand's violet. The inline
   padding is in em so a mark under a 5rem headline and a mark inside 15px body copy are the
   same mark, which 2px was not. */
.pen {
  font-style: normal;
  background-image: linear-gradient(103deg, var(--pen-violet) 0 100%);
  background-repeat: no-repeat; background-position: 0 82%; background-size: 100% 42%;
  padding-inline: .1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
[dir="rtl"] .pen { background-position: 100% 82%; }

/* §7.6 the aurora wash — four blurred blobs, four placements on the whole product */
.wash {
  position: absolute; inset: -22% -12% auto; block-size: min(82vh, 780px);
  z-index: -1; pointer-events: none; contain: strict;
  background:
    radial-gradient(42% 48% at 18% 30%, color-mix(in srgb, var(--wash-a) calc(var(--wash-alpha) * 100%), transparent), transparent 70%),
    radial-gradient(38% 44% at 62% 16%, color-mix(in srgb, var(--wash-b) calc(var(--wash-alpha) * 100%), transparent), transparent 72%),
    radial-gradient(46% 40% at 84% 54%, color-mix(in srgb, var(--wash-c) calc(var(--wash-alpha) * 66%), transparent), transparent 74%),
    radial-gradient(40% 46% at 40% 76%, color-mix(in srgb, var(--wash-d) calc(var(--wash-alpha) * 52%), transparent), transparent 76%);
  filter: blur(var(--wash-blur)) saturate(115%);
}
[dir="rtl"] .wash { transform: scaleX(-1); }

/* §7.12 pulse — the live dot. Brand violet, not green: green is semantic on this product (a
   delivered message, a passing check) and this dot means nothing of the kind. */
.ds-dot {
  inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent);
  position: relative; flex: 0 0 auto;
}
.ds-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }

/* ============================================================
   2 · buttons
   ============================================================ */
.ds-btn, .ds-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-pill); font-size: .9375rem; font-weight: 600; letter-spacing: .005em;
  line-height: 1; padding: 12px 20px; white-space: nowrap;
}
.ds-btn-lg { padding: 16px 28px; font-size: 1rem; }
.ds-btn-block { display: flex; inline-size: 100%; }

/* §7.5 sheen — the only ambient motion permitted on an interactive element */
.btn-cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad-cta); color: var(--on-color); box-shadow: var(--sh-cta);
}
.btn-cta::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.36) 50%, transparent 62%);
  transform: translateX(-120%);
}
[dir="rtl"] .btn-cta::after { transform: translateX(120%); }

.ds-ghost {
  background: var(--card); color: var(--ink); border: 1.5px solid var(--rule-2);
}
.ds-ghost:hover { background: var(--paper-2); }
.ds-quiet { font-size: .9375rem; font-weight: 500; color: var(--ink-2); padding: 8px 6px; }
.ds-quiet:hover { color: var(--ink); }

.ds-icon-btn {
  display: inline-flex; align-items: center; gap: 6px; block-size: 36px; padding-inline: 10px;
  border-radius: var(--r-pill); color: var(--ink-2); font-size: .8125rem; font-weight: 600;
}
.ds-icon-btn:hover { background: var(--paper-3); color: var(--ink); }
.ds-theme-btn .ds-ic-moon { display: none; }
[data-theme="dark"] .ds-theme-btn .ds-ic-sun { display: none; }
[data-theme="dark"] .ds-theme-btn .ds-ic-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-theme-btn .ds-ic-sun { display: none; }
  :root:not([data-theme="light"]) .ds-theme-btn .ds-ic-moon { display: block; }
}

/* §7.4 lift — the only hover for surfaces. No scale(), anywhere. */
.ds-card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
}
.ds-card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px;
  background: var(--rule); z-index: 2;
}

/* ============================================================
   3 · nav — the floating pill (§8.1)
   ============================================================ */
/* Real glass: 75% of the solid chrome colour with the page blurred behind it, in both themes.
   Measured through the fill at 75%, --ink-2 on the nav links clears AA against the worst thing
   that can scroll under the pill — 5.35:1 over solid --ink in light, 5.90:1 over --accent in
   dark — and the 16px blur only raises that by averaging the backdrop. */
.ds-nav {
  position: fixed; z-index: 60; inset-block-start: 14px; inset-inline: 0;
  inline-size: min(var(--max), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--glass-solid) 75%, transparent);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-1);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
}
@supports not (backdrop-filter: blur(1px)) { .ds-nav { background: var(--glass-solid); } }
/* Scrolling used to retune the pill's width AND its height AND the wordmark's size, so the whole
   chrome jumped the instant the page moved. It settles now — shadow and border only. */
.ds-nav.is-stuck { box-shadow: var(--sh-2); border-color: var(--rule-2); }

.ds-nav-in {
  display: flex; align-items: center; gap: var(--s4);
  block-size: 56px; padding-inline: 16px 10px;
}

.ds-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* The wordmark is the owner's artwork (raster, 2.443:1 — script over the sweep), not the traced
   outline it used to be. Only block-size is set; inline-size stays auto so the file's own aspect
   ratio decides the width and the artwork can never be squashed. The lockup carries the sweep
   below the script, so it needs more height than a script-only mark to read at the same size. */
.ds-wordmark { display: block; block-size: 40px; inline-size: auto; }

/* The dark-theme wordmark. wordmark-glow-nav-360.webp is the same crop of the same render as
   wordmark-240.webp, padded symmetrically by 22% of the artwork's own height and feathered at
   the edge, so painting it into a box inset by exactly that much puts the script at the identical
   size and position — the theme switch moves nothing. It is a background rather than a second
   <img> so a light-theme visitor never downloads 28 kB of neon. The <img> stays in the box at
   opacity 0: it holds the layout, and its alt text stays in the accessibility tree. */
.ds-wordmark-box { position: relative; display: inline-flex; }
[data-theme="dark"] .ds-wordmark-box::before {
  content: ""; position: absolute; inset: -22% -9%; pointer-events: none;
  background: url("/brand/wordmark-glow-nav-360.webp") center / 100% 100% no-repeat;
}
[data-theme="dark"] .ds-wordmark-box .ds-wordmark { opacity: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-wordmark-box::before {
    content: ""; position: absolute; inset: -22% -9%; pointer-events: none;
    background: url("/brand/wordmark-glow-nav-360.webp") center / 100% 100% no-repeat;
  }
  :root:not([data-theme="light"]) .ds-wordmark-box .ds-wordmark { opacity: 0; }
}

.ds-menu { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.ds-menu-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  font-size: .90625rem; font-weight: 500; color: var(--ink-2);
  padding: 9px 12px; border-radius: var(--r-sm);
}
.ds-menu-link::after {
  content: ""; position: absolute; inset-inline: 12px; inset-block-end: 3px; block-size: 2px;
  border-radius: 2px; background: var(--sweep); transform: scaleX(0); transform-origin: left center;
}
[dir="rtl"] .ds-menu-link::after { transform-origin: right center; }
.ds-menu-link:hover, .ds-menu-link:focus-visible { color: var(--ink); }
.ds-menu-link:hover::after, .ds-menu-link:focus-visible::after,
.ds-mega-wrap.is-open .ds-menu-btn::after { transform: scaleX(1); }
.ds-caret { flex: 0 0 auto; }

.ds-chip-new {
  font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .02em;
  padding: 4px 7px; border-radius: var(--r-pill);
  background: var(--tint-violet); color: var(--on-violet);
}

.ds-nav-act { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ds-nav-act .ds-btn { padding: 10px 18px; }

.ds-burger {
  display: none; inline-size: 40px; block-size: 40px; border-radius: var(--r-sm);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.ds-burger span { display: block; inline-size: 18px; block-size: 1.8px; border-radius: 2px; background: var(--ink); }

/* The mega-menu still opens with no JavaScript at all — but only then. Once landing.js has run
   (html.js) it owns the panel through .is-open, because a panel opened by a CSS pseudo-class is
   invisible to the script that has to announce it on aria-expanded and close it on Escape. */
.ds-mega-wrap { position: relative; }
.ds-mega {
  position: absolute; inset-block-start: calc(100% + 14px); inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: min(640px, calc(100vw - 2 * var(--gutter)));
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-xl);
  box-shadow: var(--sh-3); padding: var(--s5);
  opacity: 0; visibility: hidden; pointer-events: none;
}
html:not(.js) .ds-mega-wrap:hover .ds-mega,
html:not(.js) .ds-mega-wrap:focus-within .ds-mega,
.ds-mega-wrap.is-open .ds-mega { opacity: 1; visibility: visible; pointer-events: auto; }

.ds-mega-cols { display: grid; grid-template-columns: 1fr 1fr .82fr; gap: var(--s5); }
.ds-mega-col .ds-eyebrow { margin-block-end: var(--s2); }
.ds-mega-row {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: 9px 10px; border-radius: var(--r-sm); margin-inline: -10px;
}
.ds-mega-row:hover { background: var(--paper-2); }
.ds-mega-ic {
  flex: 0 0 auto; inline-size: 34px; block-size: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--tint-violet); color: var(--on-violet);
}
.ds-mega-txt { display: block; min-inline-size: 0; }
.ds-mega-txt b { display: block; font-size: .90625rem; font-weight: 600; line-height: 1.35; }
.ds-mega-txt i { display: block; font-style: normal; font-size: .8125rem; line-height: 1.4; color: var(--ink-3); }

.ds-mega-rail {
  border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s5);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.ds-mini-plan { color: var(--ink-3); }
.ds-mini-price { display: flex; align-items: baseline; gap: 5px; }
.ds-mini-price b { font-family: var(--font-display); font-weight: 300; font-variation-settings: var(--wonk); font-size: 2rem; line-height: 1.1; }
.ds-mini-price span { font-size: .8125rem; color: var(--ink-3); }
.ds-mini-note { font-size: .8125rem; color: var(--ink-3); }
.ds-mini-link { margin-block-start: var(--s3); font-size: .875rem; font-weight: 600; color: var(--accent-ink); }
.ds-mini-link::after { content: " \2192"; }
[dir="rtl"] .ds-mini-link::after { content: " \2190"; }

/* hue scoping — each tile owns exactly one hue, and they are never blended (§8.6) */
[data-hue="violet"] { --tint: var(--tint-violet); --on: var(--on-violet); --hue: var(--h-violet); }
[data-hue="pink"]   { --tint: var(--tint-pink);   --on: var(--on-pink);   --hue: var(--h-pink); }
[data-hue="sky"]    { --tint: var(--tint-sky);    --on: var(--on-sky);    --hue: var(--h-sky); }
[data-hue="amber"]  { --tint: var(--tint-amber);  --on: var(--on-amber);  --hue: var(--h-amber); }
[data-hue="mint"]   { --tint: var(--tint-mint);   --on: var(--on-mint);   --hue: var(--h-mint); }
[data-hue="coral"]  { --tint: var(--tint-coral);  --on: var(--on-coral);  --hue: var(--h-coral); }
.ds-mega-ic[data-hue] { background: var(--tint); color: var(--on); }

/* ============================================================
   4 · hero (§8.2)
   ============================================================ */
.ds-hero {
  position: relative; overflow: hidden;
  padding-block: calc(var(--nav-h) + clamp(48px, 8vw, 96px)) clamp(64px, 8vw, 116px);
  border-block-end: 1px solid var(--rule);
}
.ds-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(58% 62% at 72% 44%, #000 0%, transparent 72%);
          mask-image: radial-gradient(58% 62% at 72% 44%, #000 0%, transparent 72%);
}
/* §11d — dark used to be flat black behind the fold: --paper is #0D0A12 and the aurora alone,
   at 84px of blur, does not carry a hero. Two of the ramp's hue positions at 15%, in the same
   places the aurora puts them, give the dark hero the same ambient light the light one has. */
[data-theme="dark"] .ds-hero {
  background:
    radial-gradient(58% 62% at 18% 26%, color-mix(in srgb, var(--h-violet) 15%, transparent), transparent 70%),
    radial-gradient(52% 58% at 78% 14%, color-mix(in srgb, var(--h-sky) 15%, transparent), transparent 72%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-hero {
    background:
      radial-gradient(58% 62% at 18% 26%, color-mix(in srgb, var(--h-violet) 15%, transparent), transparent 70%),
      radial-gradient(52% 58% at 78% 14%, color-mix(in srgb, var(--h-sky) 15%, transparent), transparent 72%);
  }
}
.ds-hero-in { display: grid; gap: clamp(40px, 5vw, 64px); align-items: center; }

/* The pill is as wide as its widest slide — three strings roll through one window, so it cannot
   be narrower without resizing on every rotation. What it must not do is leave all of that width
   trailing after a short slide, which is what left ~180px of dead pill after "Free to start".
   fit-content pins it to the widest string and the slides centre inside it, so the air is
   symmetric and the pill reads as a pill. */
.ds-pill {
  display: inline-flex; align-items: center; gap: 10px;
  inline-size: fit-content; max-inline-size: 100%;
  block-size: 34px; padding-inline: 14px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--rule); box-shadow: var(--sh-1);
}
.ds-pill-roll { display: block; block-size: 34px; overflow: hidden; min-inline-size: 0; }
.ds-pill-slide {
  display: block; block-size: 34px; line-height: 34px;
  font-size: .8125rem; font-weight: 500; color: var(--ink-2); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ds-cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s6); }
.ds-btn-watch svg { flex: 0 0 auto; }

.ds-trust {
  display: flex; flex-wrap: wrap; align-items: center;
  margin-block-start: var(--s5); font-size: .84375rem; color: var(--ink-3);
}
.ds-trust span { padding-inline: 14px; }
.ds-trust span:first-child { padding-inline-start: 0; }
.ds-trust span + span { border-inline-start: 1px solid var(--rule-2); }

.ds-hero-art { display: none; position: relative; isolation: isolate; }
/* §1.1 allows one wash-level element per viewport and the hero already spends it on .wash; this
   is that element re-used, not a second one — the same neon master the wordmark comes from, sunk
   behind the card so the hero has the brand's own light in it rather than a generic blur. Dark
   theme only: on paper the halo is a pink smudge, which is exactly what the hard master exists
   to avoid. Static, so reduced motion has nothing to switch off. */
/* §11e — the halo file is a rectangle whose own alpha runs to its edges, so scaled to the card
   and hidden behind it, the only part still visible was a hard-edged arc poking out at the top
   left. The box is symmetric around the card now and radially masked, so whatever escapes the
   card fades to nothing on every side and reads as the card glowing rather than as a clipped
   picture of a logo. */
.ds-hero-art::before {
  content: ""; position: absolute; z-index: -1; inset: -26% -20%;
  opacity: .34; pointer-events: none;
  -webkit-mask-image: radial-gradient(56% 56% at 50% 48%, #000 0%, rgba(0,0,0,.35) 62%, transparent 82%);
          mask-image: radial-gradient(56% 56% at 50% 48%, #000 0%, rgba(0,0,0,.35) 62%, transparent 82%);
  /* no background here: the file is only named inside the two dark rules, so a light-theme
     visitor never downloads 65 kB of neon they were never going to see */
}
[data-theme="dark"] .ds-hero-art::before {
  background: url("/brand/wordmark-glow-720.webp") center / contain no-repeat;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-hero-art::before {
    background: url("/brand/wordmark-glow-720.webp") center / contain no-repeat;
  }
}
.ds-hero-card {
  position: relative; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
}
/* The two bubbles now sit next to the disc of whoever wrote them, so the still reads as a
   conversation rather than two stacked labels. Both rows align to the inline-start: this is a
   demonstration of the product, not a re-creation of Messenger's alignment rules. */
.ds-hero-row { display: flex; align-items: flex-start; gap: var(--s2); }
.ds-hero-row .ds-hero-line { flex: 0 1 auto; min-inline-size: 0; }
.ds-hero-row-dm .ds-hero-dm { flex: 1 1 auto; min-inline-size: 0; }
.ds-hero-tag {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 9px; border-radius: var(--r-pill);
  background: var(--tint-amber); color: var(--on-amber);
}
.ds-hero-tag-dm { background: var(--tint-violet); color: var(--on-violet); }
.ds-hero-line {
  align-self: flex-start; background: var(--bubble-in); color: var(--bubble-in-ink); border-radius: var(--r-sm);
  padding: 10px 14px; font-size: .9375rem;
}
.ds-hero-arc { display: block; }
.ds-hero-arc svg { display: block; inline-size: 100%; block-size: auto; }
[dir="rtl"] .ds-hero-arc { transform: scaleX(-1); }
.ds-hero-dm {
  background: var(--bubble-out); color: var(--bubble-out-ink); border-radius: var(--r);
  padding: 12px 16px; font-size: .9375rem; line-height: 1.5;
}
.ds-hero-ok { font-size: .8125rem; color: var(--ok); font-weight: 600; }
.ds-hero-ok b { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }

/* ============================================================
   5 · the demo (§8.3)
   ============================================================ */
.ds-demo {
  position: relative; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: var(--s5);
  overflow: hidden; display: grid; gap: var(--s5);
}
.ds-pane { min-inline-size: 0; }

/* §1.2: avatars are CSS-drawn gradient discs with an initial. Never a photo, never a silhouette,
   and never a generated face — this product ships under Meta App Review. */
.ds-av {
  flex: 0 0 auto; inline-size: 24px; block-size: 24px; border-radius: 50%;
  background: var(--sweep-3); color: var(--on-color);
  display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.ds-av-user { background: var(--paper-3); color: var(--ink-2); }
.ds-av-lg { inline-size: 32px; block-size: 32px; font-size: 14px; }
.ds-av-xs { inline-size: 15px; block-size: 15px; font-size: 8px; }

.ds-post { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s4); }
.ds-post-head { display: flex; align-items: center; gap: var(--s2); }
.ds-post-meta { display: flex; flex-direction: column; line-height: 1.25; }
.ds-post-meta b { font-size: .8125rem; font-weight: 600; }
.ds-post-meta i { font-style: normal; font-size: .6875rem; color: var(--ink-3); }
.ds-post-txt { font-size: .875rem; line-height: 1.55; margin-block: var(--s3); }
/* The post's photo. It was eight stacked radial blurs across four hues, which at 128px tall is a
   skeleton loader with a rainbow cast — every critic read it as "still loading". It is a drawn
   scene now: a desk, a laptop, a notepad, a lamp, a mug, in violet and amber off the ramp and
   nothing else. Flat shapes, hard edges, no blur anywhere, so it can only be read as a picture
   somebody meant to put there. The SVG carries the geometry; the palette is above, in tokens,
   so it re-lights itself in dark instead of being repainted. */
.ds-post-media {
  position: relative; overflow: hidden;
  block-size: 128px; border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  background: var(--pm-ground);
}
.ds-post-media svg { display: block; inline-size: 100%; block-size: 100%; }
/* §7.13: a decoration that reads left-to-right mirrors with the page; the brand never does */
[dir="rtl"] .ds-post-media { transform: scaleX(-1); }

.ds-cmt { display: flex; gap: var(--s2); align-items: flex-start; margin-block-start: var(--s3); }
.ds-bubble {
  display: block; background: var(--card); border-radius: var(--r-sm);
  padding: 8px 12px; font-size: .8125rem; line-height: 1.45; min-inline-size: 0;
}
.ds-bubble b { display: block; font-size: .6875rem; font-weight: 700; color: var(--ink-2); }
.ds-bubble-brand { background: var(--bubble-out); color: var(--bubble-out-ink); }
.ds-bubble-brand b { color: inherit; opacity: .85; }
.ds-typed { display: inline-block; }

/* 190px, not 380: the gutter was half the width of a pane and the arc floated inside it, touching
   neither card. The SVG's own box is the gutter now, edge to edge, so x=0 is the left card and
   x=190 is the right one, and the arrowhead lands on it. */
.ds-connector {
  position: relative; display: grid; place-items: center; margin-inline: auto;
  inline-size: 190px; max-inline-size: 100%; block-size: 64px;
}
.ds-connector .ds-sweep { display: block; inline-size: 100%; max-inline-size: 190px; block-size: auto; }
.ds-sweep .ds-arc {
  stroke: url(#dsSweep); stroke-width: 2.5; fill: none; stroke-linecap: round;
  stroke-dasharray: var(--len, 200); stroke-dashoffset: 0;
}
[dir="rtl"] .ds-sweep, [dir="rtl"] .ds-plane-wrap { transform: scaleX(-1); }

/* The one fact the section is about, riding the apex of the arc it describes. */
.ds-arc-label {
  position: absolute; inset-block-start: 0; inset-inline-start: 50%;
  transform: translateX(-50%);
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  color: var(--on-violet); background: var(--tint-violet);
  border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap;
}
[dir="rtl"] .ds-arc-label { transform: translateX(50%); }

.ds-plane-wrap { position: absolute; inset: 0; pointer-events: none; display: block; }
.ds-plane {
  position: absolute; inset-block-start: 0; inset-inline-start: 0; display: block; opacity: 0;
  offset-path: path("M0 50 C 40 20, 104 16, 156 30");
  offset-rotate: auto; offset-distance: 0%;
}
/* §7.8 fold — a sheet of paper that becomes the plane. Enhancement only: it is invisible
   until the demo reaches step 2, and the @supports fallback is a crossfade nobody can
   distinguish from it without opening DevTools. */
.ds-fold {
  --sheet: polygon(2% 6%, 98% 6%, 100% 12%, 100% 88%, 98% 94%, 2% 94%, 0 88%, 0 12%);
  --plane: polygon(6% 50%, 96% 6%, 96% 6%, 62% 52%, 96% 94%, 96% 94%, 30% 66%, 6% 50%);
  position: absolute; inset-block-start: 8px; inset-inline-start: 0;
  inline-size: 42px; block-size: 30px; opacity: 0;
  background: var(--sweep-3); border-radius: 3px; clip-path: var(--sheet);
}

.ds-msgr { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s4); }
.ds-msgr-top {
  display: flex; align-items: center; gap: var(--s2);
  padding-block-end: var(--s3); border-block-end: 1px solid var(--rule);
  font-size: .8125rem; font-weight: 600;
}
/* Messenger's own header is a name over a status line; without the second line the pane read as
   a bare label rather than a conversation. */
.ds-msgr-meta { display: flex; flex-direction: column; line-height: 1.25; min-inline-size: 0; }
.ds-msgr-meta i { font-style: normal; font-size: .6875rem; font-weight: 500; color: var(--ink-3); }
.ds-typing {
  display: inline-flex; align-items: center; gap: 8px; margin-block-start: var(--s3);
  background: var(--tint-mint); color: var(--on-mint); border-radius: var(--r-pill);
  padding: 5px 12px; font-size: .6875rem; font-weight: 600;
}
.ds-dots { display: inline-flex; gap: 3px; }
.ds-dots i { inline-size: 4px; block-size: 4px; border-radius: 50%; background: currentColor; display: block; }
.ds-dm {
  background: var(--bubble-out); color: var(--bubble-out-ink); border-radius: var(--r);
  padding: 11px 14px; font-size: .8125rem; line-height: 1.5; margin-block-start: var(--s3);
}
.ds-dm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-block-start: var(--s3); padding: 9px 16px; border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 600;
}
.ds-delivered {
  display: flex; align-items: center; gap: 6px; margin-block-start: var(--s3);
  font-size: .75rem; font-weight: 600; color: var(--ok);
}
.ds-delivered b { font-variant-numeric: tabular-nums lining-nums; }
/* the read receipt: the small disc Messenger parks under the last message once it is opened */
.ds-seen {
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  margin-block-start: 7px; font-size: .6875rem; font-weight: 500; color: var(--ink-3);
}
.ds-seen b { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }

/* Discrete states. Everything below is opacity keyed off data-step, never layout, so a
   reduced-motion reader gets the same information with the transitions switched off. */
.js .ds-demo[data-step] .ds-cmt-reply,
.js .ds-demo[data-step] .ds-typing,
.js .ds-demo[data-step] .ds-dm,
.js .ds-demo[data-step] .ds-dm-btn,
.js .ds-demo[data-step] .ds-delivered,
.js .ds-demo[data-step] .ds-seen,
.js .ds-demo[data-step] .ds-dm-follow { opacity: 0; }
.js .ds-demo[data-step="1"] .ds-typing { opacity: 1; }
.js .ds-demo[data-step="2"] .ds-cmt-reply,
.js .ds-demo[data-step="2"] .ds-typing { opacity: 1; }
.js .ds-demo[data-step="3"] .ds-cmt-reply,
.js .ds-demo[data-step="3"] .ds-dm,
.js .ds-demo[data-step="3"] .ds-dm-btn,
.js .ds-demo[data-step="3"] .ds-delivered { opacity: 1; }
.js .ds-demo[data-step="4"] .ds-cmt-reply,
.js .ds-demo[data-step="4"] .ds-dm,
.js .ds-demo[data-step="4"] .ds-dm-btn,
.js .ds-demo[data-step="4"] .ds-delivered,
.js .ds-demo[data-step="4"] .ds-seen,
.js .ds-demo[data-step="4"] .ds-dm-follow { opacity: 1; }

/* the scrubber */
.ds-demo-ctl {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  margin-block-start: var(--s5); flex-wrap: wrap;
}
.ds-steps {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  flex: 1 1 320px; min-inline-size: 0; padding-block-start: 20px;
}
.ds-steps-rail {
  position: absolute; inset-block-start: 0; inset-inline: 12.5%; block-size: 2px;
  background: var(--rule); border-radius: 2px; overflow: hidden;
}
.ds-steps-rail i {
  display: block; block-size: 100%; inline-size: max(0%, calc((var(--step, 0) - 1) * 33.34%));
  background: var(--sweep); border-radius: 2px;
}
.ds-step {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: .75rem; font-weight: 600; color: var(--ink-3);
  margin-block-start: -24px;
}
.ds-node {
  inline-size: 9px; block-size: 9px; border-radius: 50%;
  background: var(--paper-3); box-shadow: 0 0 0 3px var(--card);
}
.ds-step.is-on { color: var(--ink); }
.ds-step.is-on .ds-node { background: var(--sweep-3); }
.ds-replay { padding: 9px 16px; font-size: .84375rem; }

/* ============================================================
   6 · proof band (§8.4) — product truths, never social proof
   ============================================================ */
.ds-proof {
  background: var(--paper-2);
  border-block-end: 1px solid var(--rule);
  /* 52px put the first figure under the fixed pill whenever this band happened to sit at the
     top of the viewport; the floor is the pill's bottom edge plus air */
  padding-block: clamp(94px, 7vw, 112px) clamp(52px, 6vw, 84px);
}
.ds-proof-in { display: grid; gap: var(--s6); }
.ds-numeral-accent { color: var(--accent-ink); }
.ds-proof-cap { font-size: .875rem; font-weight: 600; margin-block: var(--s3) 6px; }

/* ============================================================
   7 · how it works (§8.5)
   ============================================================ */
/* Three rows per step, in reading order: icon, numeral, title, prose. The numeral used to be
   absolutely positioned over the icon — two marks in the same 40px of space, neither readable —
   and the columns were separated by border rules that ran only as far as the shortest column,
   which is a ragged half-line, not a divider. The rules are gone; the gap does the dividing, and
   it is the same gap on both sides now that no column carries an extra padding-inline-start. */
.ds-steps-grid { display: grid; gap: var(--s7); }
.ds-stepcol { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.ds-stepnum {
  display: block; margin-block: 2px var(--s2);
  font-family: var(--font-display); font-weight: 300; font-variation-settings: var(--wonk);
  font-size: 3.25rem; line-height: 1;
  letter-spacing: -.02em; pointer-events: none; user-select: none;
  /* decorative, aria-hidden, and violet rather than the grey hairline colour it was: at
     --rule-2 it read as an artefact of the layout instead of a deliberate figure */
  color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.ds-stepic { display: block; color: var(--accent); }
.ds-stepcol h3 { font-size: 1.3125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.ds-stepcol p { font-size: .96875rem; line-height: 1.65; color: var(--ink-2); margin-block-start: var(--s2); max-inline-size: 42ch; }

/* The permissions list. Same words, a shape that says "read this" rather than "ignore this". */
.ds-note {
  margin-block-start: var(--s7); max-inline-size: 78ch;
  background: var(--tint-violet); border: 1px solid var(--accent-line);
  border-radius: var(--r); padding: var(--s4) var(--s5);
  font-size: .78125rem; line-height: 1.7; color: var(--ink-2);
}

/* ============================================================
   8 · features — the uneven magazine grid (§8.6)
   ============================================================ */
.ds-feat-grid > .ds-tile { inline-size: min(320px, 82vw); }
.ds-tile { padding: var(--s5); display: flex; flex-direction: column; }
.ds-tile::after {
  content: ""; position: absolute; inset-block-start: -30px; inset-inline-start: -30px;
  inline-size: 190px; block-size: 190px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--hue, var(--h-violet)) 0%, transparent 70%);
  opacity: .10;
}
.ds-tile-ic {
  position: relative; z-index: 1;
  inline-size: 40px; block-size: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--tint, var(--tint-violet)); color: var(--on, var(--on-violet));
  margin-block-end: var(--s4);
}
.ds-tile h3 { position: relative; z-index: 1; font-size: 1.3125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.ds-tile > p { position: relative; z-index: 1; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); margin-block-start: var(--s2); }

.ds-mini-chat { display: flex; flex-direction: column; gap: 8px; margin-block-start: var(--s4); position: relative; z-index: 1; }
.ds-mini-b {
  align-self: flex-start; max-inline-size: 82%;
  background: var(--bubble-in); color: var(--bubble-in-ink); border-radius: var(--r-sm); padding: 8px 12px;
  font-size: .8125rem; line-height: 1.4;
}
.ds-mini-b2, .ds-mini-b3 { align-self: flex-end; background: var(--bubble-out); color: var(--bubble-out-ink); }

.ds-kws { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: var(--s4); position: relative; z-index: 1; }
.ds-kw {
  font-size: .8125rem; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--tint, var(--tint-violet)); color: var(--on, var(--on-violet));
}
.ds-week { display: flex; gap: 8px; margin-block-start: var(--s4); position: relative; z-index: 1; }
.ds-week i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--paper-3); display: block; }
.ds-week i.on { background: var(--sweep-3); }
.ds-stack { display: flex; margin-block-start: var(--s4); position: relative; z-index: 1; }
.ds-stack i {
  inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--sweep-3);
  color: var(--on-color); display: grid; place-items: center;
  font-style: normal; font-size: 12px; font-weight: 700;
  border: 2px solid var(--card); margin-inline-end: -9px;
}
.ds-code {
  position: relative; z-index: 1; margin-block-start: var(--s4);
  background: var(--card-2); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 12px 14px; font-family: var(--font-mono); font-size: .8125rem; line-height: 1.6;
  color: var(--ink-2); overflow-x: auto; white-space: pre;
}

/* ============================================================
   9 · analytics — sticky split (§8.7)
   ============================================================ */
.ds-split { display: grid; gap: clamp(36px, 5vw, 64px); align-items: start; }
.ds-legend { display: flex; align-items: center; gap: 9px; margin-block-start: var(--s5); font-size: .8125rem; color: var(--ink-3); }
.ds-legend-swatch { inline-size: 14px; block-size: 8px; border-radius: 3px; background: var(--chart-bar); display: block; }

.ds-dash {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-xl);
  box-shadow: var(--sh-2); padding: var(--s5); overflow: hidden;
}
.ds-dash-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.ds-dash-dots { display: flex; gap: 5px; }
.ds-dash-dots i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--rule-2); display: block; }
.ds-dash-range { font-size: .75rem; font-weight: 600; color: var(--ink-3); background: var(--paper-3); border-radius: var(--r-pill); padding: 4px 11px; }

.ds-dash-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-block-start: var(--s4); }
.ds-dash-tile {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 14px 14px 12px;
}
.ds-dash-tile::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px;
  background: var(--sweep-3);
}
.ds-dash-lbl { display: block; font-size: .6875rem; font-weight: 500; color: var(--ink-3); }
.ds-dash-num {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-variation-settings: var(--wonk); font-size: 40px;
  line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums;
}

.ds-chart {
  position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px;
  align-items: end; block-size: 132px; margin-block-start: var(--s5);
}
.ds-grid-line { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px; background: var(--chart-grid); }
.ds-grid-mid { inset-block-end: 50%; }
.ds-bar { display: block; block-size: var(--h); background: var(--chart-bar); border-radius: 7px 7px 0 0; transform-origin: bottom; }
.ds-bar-hi { background: var(--chart-bar-hi); }

.ds-dash-tablewrap { overflow-x: auto; margin-block-start: var(--s5); }
.ds-dash-table th {
  text-align: start; font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); padding-block: 8px; border-block-end: 1px solid var(--rule);
}
.ds-dash-table td { font-size: .84375rem; padding-block: 10px; border-block-end: 1px solid var(--rule); font-variant-numeric: tabular-nums lining-nums; }
.ds-dash-table tr:last-child td { border-block-end: 0; }
.ds-ctr {
  display: inline-block; font-size: .75rem; font-weight: 600; padding: 3px 10px;
  border-radius: var(--r-pill); background: var(--tint-mint); color: var(--on-mint);
}
.ds-dash-note { margin-block-start: var(--s3); }

/* ============================================================
   10 · pricing — one slab, four columns (§8.8)
   ============================================================ */
.ds-plans-wrap { position: relative; }
@media (min-width: 760px) {
  .ds-plans-wrap { max-inline-size: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
}
.ds-plans > .ds-plan { inline-size: 82vw; }
/* No overflow:hidden: the badge has to hang over the top edge. The one thing it was clipping —
   the Pro column's 3px accent rule — rounds its own corners instead. */
.ds-plan {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: var(--s6) var(--s5) var(--s5);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-xl);
}
.ds-plan-name { font-size: .9375rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ds-plan-price { display: flex; align-items: baseline; gap: 6px; margin-block-start: var(--s2); }
.ds-plan-price b {
  font-family: var(--font-display); font-weight: 300; font-variation-settings: var(--wonk);
  font-size: clamp(2.75rem, 3vw, 3.25rem); line-height: 1.05; letter-spacing: -.02em;
}
.ds-per { font-size: .875rem; color: var(--ink-3); }
/* Two lines of description in either language, so all four ✓ lists start on one baseline. */
.ds-plan-desc { font-size: .875rem; color: var(--ink-3); min-block-size: 3.4em; }
.ds-plan-list { display: flex; flex-direction: column; gap: 9px; margin-block: var(--s4) var(--s5); flex: 1 1 auto; }
.ds-plan-list li { position: relative; padding-inline-start: 24px; font-size: .90625rem; line-height: 1.5; }
/* a checkmark glyph rather than two rotated borders: a check is never mirrored, and a
   character stays a check in RTL without a physical-property exception (§6.7).
   Violet, not green: green means "delivered" everywhere else on this product, and a feature
   list is not a status. 65% of the accent rather than 60% so the glyph still clears the 3:1
   non-text floor (3.10:1 on --card, 2.94 at 60%) — the difference is invisible, the audit is not. */
.ds-plan-list li::before {
  content: "\2713"; position: absolute; inset-inline-start: 0; inset-block-start: 0;
  color: color-mix(in srgb, var(--accent) 65%, transparent);
  font-size: .8125rem; line-height: 1.75; font-weight: 700;
}
/* The accent rule is a background layer, not a pseudo-element. A background is clipped by the
   element's own border-radius for free, so it follows the card's rounded top corners on a phone
   and sits square inside the slab above the breakpoint — with no overflow:hidden, which the
   badge now has to hang outside of. */
.ds-plan-hi { background: var(--sweep-3) top / 100% 3px no-repeat, var(--tint-violet); }
/* A real badge: filled, centred, straddling the card's top edge. It used to be bare uppercase
   text tucked into the top-right corner, which reads as a stray label rather than a marker. */
.ds-plan-badge {
  position: absolute; inset-block-start: 0; inset-inline-start: 50%;
  transform: translate(-50%, -50%); z-index: 3;
  background: var(--accent); color: var(--on-color);
  padding: 5px 13px; border-radius: var(--r-pill); white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
[dir="rtl"] .ds-plan-badge { transform: translate(50%, -50%); }
/* --accent is the light 400-level in dark, so white on it is 2.4:1. The paper takes over. */
[data-theme="dark"] .ds-plan-badge { color: var(--paper); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-plan-badge { color: var(--paper); }
}
/* The four buttons are one geometry — Pro differs by fill and nothing else. The outlines get a
   violet label and the accent's own line colour, so they read as the same family as the fill. */
.ds-plans .ds-ghost { border-color: color-mix(in srgb, var(--accent) 68%, var(--card)); color: var(--accent-ink); }
.ds-plans .ds-ghost:hover { background: var(--accent-soft); border-color: var(--accent); }

/* ============================================================
   11 · the shared rail primitive (§10.0)
   ============================================================ */
.rail {
  display: flex; gap: 20px;
  overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-block: 26px 22px;
  padding-inline: var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 auto; scroll-snap-align: center; scroll-margin-inline: var(--gutter); }

.rail-prog {
  position: relative; block-size: 2px; background: var(--rule); border-radius: 2px;
  overflow: hidden; margin-block-start: var(--s2); margin-inline: var(--gutter);
}
.rail-prog i {
  display: block; block-size: 100%; border-radius: 2px; background: var(--sweep);
  inline-size: var(--w, 30%); transform: translateX(var(--x, 0));
}

.ds-arrows { display: flex; gap: 8px; flex: 0 0 auto; }
.rail-arrow {
  inline-size: 40px; block-size: 40px; border-radius: 50%;
  border: 1px solid var(--rule-2); color: var(--ink-2);
  display: grid; place-items: center; background: var(--card);
}
.rail-arrow:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); }
.rail-arrow:disabled { opacity: .35; cursor: default; }
[dir="rtl"] .rail-arrow svg { transform: scaleX(-1); }

/* ============================================================
   12 · the marquee (§10.2) — the only auto-motion on the page
   ============================================================ */
.ds-mq {
  overflow: hidden; padding-block: var(--s7); background: var(--paper);
  border-block-end: 1px solid var(--rule);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ds-mq-row { overflow: hidden; }
.ds-mq-row + .ds-mq-row { margin-block-start: var(--s3); }
/* the two halves must be byte-identical in width or translateX(-50%) jumps: the gap lives
   inside each half, never between them. */
.mq-track { display: flex; gap: 0; inline-size: max-content; }
.ds-mq-half { display: flex; gap: 12px; padding-inline-end: 12px; }
.ds-mq-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-pill);
  padding: 9px 16px; font-size: .84375rem; font-weight: 500; color: var(--ink-2);
  white-space: nowrap;
}
.ds-mq-chip i { inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--sweep-3); display: block; flex: 0 0 auto; }

/* ============================================================
   13 · scenarios (§10.3) + the quoted-commitment rail (§10.1)
   ============================================================ */
.ds-scen {
  inline-size: min(340px, 78vw); aspect-ratio: 4 / 5;
  display: flex; flex-direction: column; padding: 0;
}
.ds-scen::before { background: var(--sweep-3); }
.ds-scen-top {
  display: flex; align-items: center; gap: 9px; padding: 16px var(--s4);
  background: var(--tint, var(--tint-violet)); color: var(--on, var(--on-violet));
  font-size: .875rem;
}
.ds-scen-body { flex: 1 1 auto; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.ds-scen-cmt {
  align-self: flex-start; max-inline-size: 80%;
  background: var(--bubble-in); color: var(--bubble-in-ink); border-radius: var(--r-sm);
  padding: 9px 13px; font-size: .84375rem;
}
.ds-scen-dm {
  align-self: flex-end; max-inline-size: 88%;
  background: var(--bubble-out); color: var(--bubble-out-ink); border-radius: var(--r-sm);
  padding: 10px 13px; font-size: .84375rem; line-height: 1.5;
}
.ds-scen-tag {
  padding: 12px var(--s4); border-block-start: 1px solid var(--rule);
  color: var(--ink-3);
}

/* --s5, like every other card on the page. 30px was the one hand-set padding left in the file. */
.ds-quote-card { inline-size: min(420px, 82vw); padding: var(--s5); display: flex; flex-direction: column; }
.ds-quote-mark {
  font-family: var(--font-display); font-weight: 300; font-variation-settings: var(--wonk);
  font-size: 44px; line-height: .8;
  color: var(--rule-2); display: block; margin-block-end: 6px;
}
.ds-quote {
  font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--wonk-tight);
  font-size: 1.375rem; line-height: 1.5; letter-spacing: -.01em; flex: 1 1 auto;
}
.ds-quote-foot { display: flex; align-items: center; gap: 12px; margin-block-start: var(--s5); }
.ds-quote-foot .ds-av { inline-size: 38px; block-size: 38px; font-size: 15px; }
.ds-quote-src { display: flex; flex-direction: column; line-height: 1.35; }
.ds-quote-src b { font-size: .875rem; font-weight: 600; }
.ds-quote-src a { font-size: .8125rem; color: var(--accent-ink); font-weight: 500; }
.ds-quote-src a:hover { text-decoration: underline; }

/* ============================================================
   14 · FAQ (§8.10)
   ============================================================ */
.ds-faq { border-block-start: 1px solid var(--rule); }
.ds-q { border-block-end: 1px solid var(--rule); }
.ds-q summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
  padding-block: 22px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--wonk-tight);
  font-size: 1.25rem; line-height: 1.35;
}
.ds-q summary::-webkit-details-marker { display: none; }
.ds-q summary i {
  position: relative; flex: 0 0 auto; inline-size: 30px; block-size: 30px;
  border-radius: var(--r-xs); background: var(--paper-3); margin-block-start: 2px;
}
.ds-q summary i::before, .ds-q summary i::after {
  content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%;
  background: var(--ink-2); border-radius: 2px;
}
.ds-q summary i::before { inline-size: 12px; block-size: 1.8px; transform: translate(-50%, -50%); }
.ds-q summary i::after { inline-size: 1.8px; block-size: 12px; transform: translate(-50%, -50%); }
.ds-q[open] summary i { background: var(--sweep-3); }
.ds-q[open] summary i::before, .ds-q[open] summary i::after { background: var(--on-color); }
.ds-q[open] summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.ds-a { padding-block-end: 24px; }
.ds-a p { font-size: 1rem; line-height: 1.8; color: var(--ink-2); max-inline-size: 68ch; }

/* the accordion marker rotation is a 150ms affordance, not decoration — it survives
   reduced motion on purpose (§7.14) */
.ds-q summary i, .ds-q summary i::before, .ds-q summary i::after {
  transition: transform 150ms var(--ease-inout), background 150ms var(--ease-inout);
}

/* ============================================================
   15 · final CTA — the one inverted slab (§8.11)
   The three literal colours below are the only ones in this file. This band is
   deliberately identical in light and dark, so it cannot come from a theme token.
   Measured on #16121F: #F6F3FB = 16.78:1, #A9A2BE = 7.54:1.
   ============================================================ */
.ds-final {
  --slab:       #16121F;
  --slab-ink:   #F6F3FB;
  --slab-ink-2: #A9A2BE;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--slab); color: var(--slab-ink);
  padding-block: clamp(96px, 13vw, 180px);
  text-align: center;
}
.ds-final .wash { inset: -30% -12% auto; opacity: .7; }
.ds-final::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 0);
  background-size: 22px 22px;
}
.ds-final-in { display: flex; flex-direction: column; align-items: center; gap: var(--s5); }
.ds-final-mark { display: block; inline-size: 200px; block-size: auto; filter: drop-shadow(0 6px 24px rgba(138, 92, 240, .38)); }
.ds-final .ds-display-2 { color: var(--slab-ink); max-inline-size: 20ch; }
.ds-final-note { font-size: .8125rem; color: var(--slab-ink-2); }

/* ============================================================
   16 · about + footer (§8.12)
   ============================================================ */
.ds-about { background: var(--paper-2); border-block-end: 0; }
.ds-about-h { font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--wonk-tight); font-size: 1.75rem; line-height: 1.25; }
.ds-about-body { font-size: 1.0625rem; line-height: 1.75; color: var(--ink-2); max-inline-size: 72ch; margin-block-start: var(--s4); }

.ds-foot { background: var(--paper-2); border-block-start: 1px solid var(--rule); padding-block: var(--s8) var(--s5); }
.ds-foot-in { display: grid; gap: var(--s6); }
.ds-foot-brand p { font-size: .875rem; color: var(--ink-3); margin-block-start: var(--s3); max-inline-size: 32ch; }
.ds-foot-brand .ds-wordmark { block-size: 46px; }
.ds-foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.ds-foot-col h2 { color: var(--ink); margin-block-end: 2px; }
.ds-foot-col a { position: relative; font-size: .875rem; color: var(--ink-3); }
.ds-foot-col a::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -2px; block-size: 1px;
  background: var(--accent-line); transform: scaleX(0); transform-origin: left center;
}
[dir="rtl"] .ds-foot-col a::after { transform-origin: right center; }
.ds-foot-col a:hover { color: var(--ink); }
.ds-foot-col a:hover::after { transform: scaleX(1); }

.ds-foot-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between;
  margin-block-start: var(--s7); padding-block-start: var(--s5); border-block-start: 1px solid var(--rule);
  font-size: .78125rem; color: var(--ink-3);
}
.ds-foot-bottom p { max-inline-size: 76ch; }

/* ============================================================
   17 · legal pages — privacy / terms / data deletion
   Same tokens, same type, so they stop being a third palette.
   ============================================================ */
.ds-legal-head { border-block-end: 1px solid var(--rule); background: var(--paper); padding-block: var(--s4); }
.ds-legal-head-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.ds-legal-back { font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.ds-legal-back:hover { color: var(--ink); }

.ds-legal { padding-block: var(--s7) var(--s9); }
.ds-legal-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-xl);
  box-shadow: var(--sh-1); padding: clamp(26px, 4vw, 44px);
}
.ds-legal-card + .ds-legal-card { margin-block-start: var(--s7); }
.ds-legal-card h1 {
  font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--wonk);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em;
}
.ds-legal-card h2 {
  font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--wonk-tight);
  font-size: 1.3125rem; line-height: 1.3; margin-block-start: var(--s6);
}
.ds-legal-card p, .ds-legal-card li { color: var(--ink-2); line-height: 1.75; }
.ds-legal-card p + p { margin-block-start: var(--s3); }
.ds-legal-card h2 + p { margin-block-start: var(--s3); }
.ds-legal-card ul, .ds-legal-card ol { margin-block-start: var(--s3); display: flex; flex-direction: column; gap: 8px; }
.ds-legal-card li { position: relative; padding-inline-start: 22px; }
.ds-legal-card ul li::before {
  content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: .72em;
  inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent-line);
}
.ds-legal-card ol { counter-reset: ds-ol; }
.ds-legal-card ol li { padding-inline-start: 32px; }
.ds-legal-card ol li::before {
  counter-increment: ds-ol; content: counter(ds-ol);
  position: absolute; inset-inline-start: 0; inset-block-start: .18em;
  inline-size: 22px; block-size: 22px; border-radius: 50%;
  background: var(--tint-violet); color: var(--on-violet);
  font-size: 11px; font-weight: 700; line-height: 22px; text-align: center;
}
.ds-legal-card a { color: var(--accent-ink); font-weight: 500; }
.ds-legal-card a:hover { text-decoration: underline; }
.ds-legal-updated { font-size: .84375rem; color: var(--ink-3); margin-block-start: 6px; }
.ds-legal-links {
  display: flex; flex-wrap: wrap; gap: var(--s4); margin-block-start: var(--s6);
  padding-block-start: var(--s4); border-block-start: 1px solid var(--rule); font-size: .875rem;
}
.ds-legal-he { direction: rtl; text-align: start; }
.ds-legal-foot { border-block-start: 1px solid var(--rule); background: var(--paper-2); padding-block: var(--s5); font-size: .78125rem; color: var(--ink-3); }

/* ============================================================
   18 · responsive
   ============================================================ */
@media (min-width: 560px) {
  .ds-proof-in { grid-template-columns: repeat(3, 1fr); }
  .ds-proof-col + .ds-proof-col { border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s5); }
  .ds-steps-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 680px) {
  /* §10.4 — above the breakpoint the rail properties are unset and it is a plain grid */
  /* align-items:start, not the default stretch. Stretch made every card in a row as tall as the
     tallest one in it, so the keyword tile next to the mini-chat tile was a 400px box with 150px
     of content and 250px of nothing — the "dead card" and the empty band under the section were
     the same bug seen from two directions. Cards hug their content now. */
  .ds-feat-grid {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px;
    align-items: start;
    max-inline-size: var(--max); margin-inline: auto;
    overflow: visible; scroll-snap-type: none;
    -webkit-mask-image: none; mask-image: none;
    padding-block: 0;
  }
  .ds-feat-grid > * { flex: initial; scroll-snap-align: none; }
  .ds-feat-grid > .ds-tile { inline-size: auto; }
  .ds-tile-8 { grid-column: span 12; }
  .ds-tile-4, .ds-tile-3, .ds-tile-5, .ds-tile-7 { grid-column: span 6; }
  #ds-features-prog { display: none; }
}

/* ONE container model above the breakpoint: a single slab divided into four columns, with Pro as
   an inset tint under an accent rule that starts and stops inside the slab. The badge straddles
   the slab's top edge, so the slab cannot clip its own overflow — the Pro tint is column three of
   four and never reaches a rounded corner, so there is nothing left for overflow:hidden to do. */
@media (min-width: 760px) {
  .ds-plans {
    display: grid; grid-template-columns: repeat(4, 1fr);
    overflow: visible; scroll-snap-type: none;
    -webkit-mask-image: none; mask-image: none;
    padding-inline: 0; padding-block: 0;
    margin-block-start: 14px;
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-xl);
    box-shadow: var(--sh-2);
  }
  .ds-plans > * { flex: initial; }
  .ds-plans > .ds-plan {
    inline-size: auto; background: none; border: 0; border-radius: 0;
    border-inline-start: 1px solid var(--rule);
  }
  .ds-plans > .ds-plan:first-child { border-inline-start: 0; }
  .ds-plans > .ds-plan-hi { background: var(--sweep-3) top / 100% 3px no-repeat, var(--tint-violet); }
  /* the fine print lines up with the words inside the columns, not with the slab's outer edge */
  #pricing .ds-footnote { padding-inline-start: var(--s5); }
  #ds-plans-prog { display: none; }
}

@media (min-width: 900px) {
  .ds-split { grid-template-columns: 5fr 7fr; }
  .ds-split-copy { position: sticky; inset-block-start: calc(var(--nav-h) + 24px); }
  .ds-foot-in { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: var(--s5); }
}

@media (min-width: 1000px) {
  .ds-hero-in { grid-template-columns: 7fr 5fr; }
  .ds-hero-art { display: block; }
  /* start, not center: centring the two panes against each other meant the taller one pushed the
     shorter one down, so "ON YOUR POST" and "IN THEIR INBOX" never sat on the same line. The
     connector keeps its own centring. column-gap:0 because the connector IS the gutter — the arc
     has to begin at the left card's edge, and a gap would hold it off. */
  .ds-demo {
    grid-template-columns: 1fr auto 1fr; align-items: start;
    column-gap: 0; row-gap: var(--s5); padding: var(--s6);
  }
  .ds-connector { align-self: center; }
  .ds-tile-8 { grid-column: span 8; }
  .ds-tile-4 { grid-column: span 4; }
  .ds-tile-3 { grid-column: span 3; }
  .ds-tile-5 { grid-column: span 5; }
  .ds-tile-7 { grid-column: span 7; }
}

/* the mobile nav sheet */
@media (max-width: 899px) {
  .ds-menu { display: none; }
  .ds-burger { display: flex; }
  .ds-nav-act .ds-quiet, .ds-nav-act > .ds-btn { display: none; }

  .ds-nav.is-open {
    position: fixed; inset: 0; inline-size: 100%; margin: 0;
    border-radius: 0; border: 0; box-shadow: none;
    background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none;
    overflow-y: auto;
  }
  .ds-nav.is-open .ds-nav-in {
    flex-direction: column; align-items: stretch; block-size: auto;
    padding: 18px var(--gutter) 48px; gap: var(--s5);
  }
  .ds-nav.is-open .ds-brand { align-self: flex-start; }
  .ds-nav.is-open .ds-menu { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .ds-nav.is-open .ds-menu-link { font-size: 1.25rem; padding: 14px 0; border-block-end: 1px solid var(--rule); }
  .ds-nav.is-open .ds-menu-link::after { display: none; }
  .ds-nav.is-open .ds-menu-btn { display: none; }
  .ds-nav.is-open .ds-mega {
    position: static; transform: none; inline-size: auto; opacity: 1; visibility: visible;
    pointer-events: auto; background: none; border: 0; box-shadow: none; padding: 0;
  }
  .ds-nav.is-open .ds-mega-cols { grid-template-columns: 1fr; gap: var(--s4); }
  .ds-nav.is-open .ds-mega-rail { display: none; }
  .ds-nav.is-open .ds-mega-row { padding-block: 12px; }
  .ds-nav.is-open .ds-nav-act { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .ds-nav.is-open .ds-nav-act .ds-quiet,
  .ds-nav.is-open .ds-nav-act > .ds-btn { display: flex; justify-content: center; }
  .ds-nav.is-open .ds-icon-btn { justify-content: center; block-size: 44px; background: var(--paper-2); }
  .ds-nav.is-open .ds-burger { position: absolute; inset-block-start: 22px; inset-inline-end: var(--gutter); }
}

/* §10.1: the rail arrows go below 720px — swipe is the affordance there. Their own query,
   because the marquee's second row is a §10.2 rule that belongs at 640px. */
@media (max-width: 719px) {
  .ds-arrows { display: none; }
}

@media (max-width: 639px) {
  .ds-mq-back { display: none; }
  .ds-demo { padding: var(--s4); }
  .ds-dash-tiles { grid-template-columns: 1fr; }
  .ds-dash-table tbody tr:last-child { display: none; }
  .ds-numeral { font-size: clamp(3rem, 12vw, 4rem); }
  /* §11.6 rule 3: the glow is dropped entirely below 140px — a blur that small reads as a
     printing error, and at 150px the drop-shadow is already most of the way there. */
  .ds-final-mark { inline-size: 150px; filter: none; }
  .ds-head-row { display: block; }
}

/* ============================================================
   18b · contrast corrections
   Filed under "dark theme" by the critique; two of the three turned out to be true in both.
   Measured, not guessed: every number below is a contrast ratio computed against the composited
   fill, not against the token's nominal colour.
   ============================================================ */
/* §11f — the outline button's border was --rule-2, which is 1.52:1 on the dark card and, as it
   turns out, 1.49:1 on the light one: a control whose only boundary is invisible in BOTH themes.
   WCAG 2.2 §1.4.11 wants 3:1 for that boundary. --field is the token that already exists for
   exactly this job on inputs — 3.31:1 light, 3.49:1 dark — so it does this job too. */
:root { --outline: var(--field); }
[data-theme="dark"] {
  /* §11b — the PUBLIC REPLY chip. At 14% the amber wash over near-black is barely a chip at all;
     at 22% it is a fill with an edge. Light amber on it stays far above the floor (8.6:1 → 7.9). */
  --chip-amber: color-mix(in srgb, var(--h-amber) 22%, var(--card));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --chip-amber: color-mix(in srgb, var(--h-amber) 22%, var(--card)); }
}
.ds-ghost { border-color: var(--outline); }
.rail-arrow { border-color: var(--outline); }
/* :not() so this cannot reach across and repaint the violet PRIVATE MESSAGE chip below it */
.ds-hero-tag:not(.ds-hero-tag-dm) { background: var(--chip-amber, var(--tint-amber)); }

/* ============================================================
   19 · Hebrew / RTL corrections (§6.7)
   ============================================================ */
[lang="he"] h1, [lang="he"] h2, [lang="he"] .ds-numeral,
[lang="he"] .ds-display-1, [lang="he"] .ds-display-2, [lang="he"] .ds-quote,
[lang="he"] .ds-about-h, [lang="he"] .ds-q summary {
  letter-spacing: 0;
  line-height: 1.14;
  font-variation-settings: normal;
}
/* The display figures set in the same face: they keep their own line-height (the step numbers and
   the quote mark are positioned against it), but the negative tracking and the Fraunces-only
   SOFT/WONK axes have to go — Frank Ruhl Libre has neither, and Hebrew never wants negative
   tracking even where the glyphs happen to be digits. */
[lang="he"] .ds-stepnum, [lang="he"] .ds-dash-num, [lang="he"] .ds-quote-mark,
[lang="he"] .ds-plan-price b, [lang="he"] .ds-mini-price b {
  letter-spacing: 0;
  font-variation-settings: normal;
}
/* Frank Ruhl Libre runs optically smaller and heavier on the page than Fraunces at the same
   nominal size: no ascender/descender drama, a large flat x-height, and a stroke that reads
   dense in a headline. So Hebrew display type is set ~6% larger than the Latin and a weight
   lighter — 300, which the face really ships, and which font-synthesis-weight:none means we
   would silently not get if it did not. The old Hebrew clamp went the wrong way: it was ~12%
   SMALLER than the Latin, which is why the Hebrew fold looked timid next to the English one. */
[lang="he"] .ds-display-1 {
  font-size: clamp(2.9rem, 1.45rem + 6vw, 5.7rem);
  font-weight: 300;
}
[lang="he"] .ds-display-2 {
  font-size: clamp(2.125rem, 1.28rem + 3.4vw, 3.45rem);
  font-weight: 300;
}
[lang="he"] .ds-quote, [lang="he"] .ds-q summary, [lang="he"] .ds-about-h { font-weight: 300; }
[lang="he"] .ds-eyebrow, [lang="he"] .ds-plan-name, [lang="he"] .ds-scen-tag,
[lang="he"] .ds-mini-plan, [lang="he"] .ds-hero-tag, [lang="he"] .ds-plan-badge,
[lang="he"] .ds-pane-label, [lang="he"] .ds-foot-col h2, [lang="he"] .ds-dash-table th {
  text-transform: none; letter-spacing: .04em; font-weight: 700;
}
[lang="he"] em, [lang="he"] i { font-style: normal; }
[lang="he"] body { line-height: 1.72; }
[lang="he"] .ds-q summary { line-height: 1.4; }

/* ============================================================
   20 · motion (§7) — every animation on the page lives in here
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* §7.1 rise */
  .js .ds-reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  .js .ds-reveal.is-in {
    opacity: 1; transform: none; filter: none;
    transition: opacity var(--t-reveal) var(--ease),
                transform var(--t-reveal) var(--ease),
                filter calc(var(--t-reveal) * .7) var(--ease);
    transition-delay: calc(min(var(--i, 0), 6) * 70ms);
  }

  /* §7.2 draw */
  .js .ds-sweep .ds-arc { stroke-dashoffset: var(--len, 200); }
  .js .is-in .ds-sweep .ds-arc { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease) 180ms; }
  /* the underline is a background band now, so it wipes exactly the way the pen does */
  .js .u-sweep { background-size: 0 .09em; }
  .js .is-in .u-sweep { background-size: 100% .09em; transition: background-size 760ms var(--ease) 240ms; }

  /* §7.3 pen */
  .js .pen { background-size: 0 42%; }
  .js .is-in .pen { background-size: 100% 42%; transition: background-size 480ms var(--ease) 160ms; }

  /* §7.4 lift */
  .ds-card { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
  .ds-card::before { transition: background var(--t-fast) var(--ease); }
  @media (hover: hover) {
    .ds-card:hover, .ds-card:focus-within { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--rule-2); }
    .ds-card:hover::before { background: var(--sweep-3); }
    .ds-tile[data-hue="pink"]:hover  { box-shadow: var(--sh-2), 0 10px 30px -10px rgba(232, 71, 158, .30); }
    .ds-tile[data-hue="sky"]:hover   { box-shadow: var(--sh-2), 0 10px 30px -10px rgba(70, 182, 245, .30); }
    .ds-tile[data-hue="amber"]:hover { box-shadow: var(--sh-2), 0 10px 30px -10px rgba(251, 161, 60, .30); }
    .ds-tile[data-hue="coral"]:hover { box-shadow: var(--sh-2), 0 10px 30px -10px rgba(246, 92, 92, .30); }
  }

  /* §7.5 sheen */
  .btn-cta { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
  .btn-cta::after { animation: sheen 5.5s var(--ease) 1.6s infinite; }
  .btn-cta:hover::after { animation-duration: 1.1s; animation-delay: 0s; }
  .btn-cta:hover { transform: translateY(-1px); box-shadow: var(--sh-cta-h); }
  .btn-cta:active { transform: translateY(0); box-shadow: var(--sh-cta); transition-duration: 90ms; }
  [dir="rtl"] .btn-cta::after { animation-name: sheen-rtl; }

  /* §7.6 drift */
  .wash { will-change: transform; animation: drift var(--t-drift) var(--ease-inout) infinite alternate; }

  /* the credibility pill: three slides over 16.5s with 4.5s holds. No timer, nothing to leak. */
  .js .ds-pill-slide { animation: roll 16.5s var(--ease) infinite; }

  /* §7.7 fly + §7.8 fold */
  .js [data-step="2"] .ds-plane { animation: fly 900ms var(--ease) forwards; }
  .js [data-step="2"] .ds-fold  { animation: fold 620ms var(--ease-spring) forwards; }
  @supports not (offset-path: path("M0 0")) {
    .js [data-step="2"] .ds-plane { animation: fly-fallback 900ms var(--ease) forwards; }
  }
  @supports not (clip-path: polygon(0 0, 1px 0, 0 1px)) {
    .js [data-step="2"] .ds-fold { animation: fold-fallback 320ms var(--ease) forwards; }
  }

  /* §7.9 bubbles settle, dots pulse */
  .js .ds-demo[data-step] .ds-cmt-reply,
  .js .ds-demo[data-step] .ds-typing,
  .js .ds-demo[data-step] .ds-dm,
  .js .ds-demo[data-step] .ds-dm-btn,
  .js .ds-demo[data-step] .ds-delivered,
  .js .ds-demo[data-step] .ds-seen,
  .js .ds-demo[data-step] .ds-dm-follow {
    transform: translateY(8px) scale(.965);
    transition: opacity 420ms var(--ease), transform 420ms var(--ease-spring);
  }
  .js .ds-demo[data-step="1"] .ds-typing,
  .js .ds-demo[data-step="2"] .ds-cmt-reply, .js .ds-demo[data-step="2"] .ds-typing,
  .js .ds-demo[data-step="3"] .ds-cmt-reply, .js .ds-demo[data-step="3"] .ds-dm,
  .js .ds-demo[data-step="3"] .ds-dm-btn,    .js .ds-demo[data-step="3"] .ds-delivered,
  .js .ds-demo[data-step="4"] .ds-cmt-reply, .js .ds-demo[data-step="4"] .ds-dm,
  .js .ds-demo[data-step="4"] .ds-dm-btn,    .js .ds-demo[data-step="4"] .ds-delivered,
  .js .ds-demo[data-step="4"] .ds-seen,
  .js .ds-demo[data-step="4"] .ds-dm-follow { transform: none; }
  .ds-dots i { animation: blink 1.1s var(--ease-inout) infinite; }
  .ds-dots i:nth-child(2) { animation-delay: .14s; }
  .ds-dots i:nth-child(3) { animation-delay: .28s; }

  .ds-steps-rail i { transition: inline-size 320ms var(--ease); }
  .ds-node { transition: background var(--t-fast) var(--ease); }

  /* §7.12 marquee — paused on hover AND focus-within */
  .mq-track { animation: marquee var(--dur, 55s) linear infinite; will-change: transform; }
  .mq:hover .mq-track, .mq:focus-within .mq-track { animation-play-state: paused; }
  .ds-mq-back .mq-track { animation-direction: reverse; }
  [dir="rtl"] .mq-track { animation-direction: reverse; }
  [dir="rtl"] .ds-mq-back .mq-track { animation-direction: normal; }

  /* §7.12 pulse */
  .ds-dot::after { animation: pulse 2.4s var(--ease) infinite; }

  /* charts grow from the baseline on reveal only, never on a refresh */
  .js .ds-reveal .ds-bar { transform: scaleY(0); }
  .js .ds-reveal.is-in .ds-bar {
    transform: scaleY(1);
    transition: transform 620ms var(--ease);
    transition-delay: calc(var(--b, 0) * 45ms + 220ms);
  }

  /* menus, rails, small affordances */
  .ds-mega { transition: opacity 180ms var(--ease), visibility 180ms var(--ease); }
  .ds-menu-link::after, .ds-foot-col a::after { transition: transform 220ms var(--ease); }
  .ds-nav { transition: box-shadow 300ms var(--ease), border-color 300ms var(--ease); }
  .rail { scroll-behavior: smooth; }
  .rail-prog i { transition: transform 90ms linear; }
  .ds-btn-watch svg { transition: transform var(--t-fast) var(--ease); }
  .ds-btn-watch:hover svg { transform: translateY(2px); }

  /* §8.10 the FAQ answer, with no max-height guesswork */
  @supports (interpolate-size: allow-keywords) {
    .ds-q::details-content {
      block-size: 0; overflow: hidden;
      transition: block-size var(--t-slow) var(--ease), content-visibility var(--t-slow) allow-discrete;
    }
    .ds-q[open]::details-content { block-size: auto; }
  }
}

/* reduced motion: the marquee becomes a static, wrapped, centred grid (§7.12) */
@media (prefers-reduced-motion: reduce) {
  .mq-track { inline-size: auto; flex-wrap: wrap; justify-content: center; animation: none; }
  .mq-track [aria-hidden="true"] { display: none; }
  .ds-mq { -webkit-mask-image: none; mask-image: none; }
}

/* phones: fewer, stiller, cheaper (§7.6) */
@media (max-width: 700px) {
  .wash { --wash-blur: 52px; animation: none; }
}

@keyframes sheen { 0% { transform: translateX(-120%); } 18%, 100% { transform: translateX(120%); } }
@keyframes sheen-rtl { 0% { transform: translateX(120%); } 18%, 100% { transform: translateX(-120%); } }
@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d( 3%, 2.5%, 0) scale(1.07); }
}
@keyframes roll {
  0%, 24%   { transform: translateY(0); }
  30%, 57%  { transform: translateY(-34px); }
  63%, 91%  { transform: translateY(-68px); }
  97%, 100% { transform: translateY(0); }
}
@keyframes fly {
  0%   { offset-distance: 0%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes fly-fallback {
  from { transform: translateX(0); opacity: 0; }
  20%  { opacity: 1; }
  to   { transform: translateX(156px); opacity: 0; }
}
@keyframes fold {
  0%   { clip-path: var(--sheet); transform: rotate(0) scale(1); opacity: 1; }
  55%  { clip-path: polygon(4% 28%, 97% 6%, 98% 10%, 80% 52%, 98% 90%, 97% 94%, 16% 72%, 2% 50%); opacity: 1; }
  100% { clip-path: var(--plane); transform: rotate(-8deg) scale(.42); opacity: 0; }
}
@keyframes fold-fallback {
  from { opacity: 1; transform: scale(1) rotate(0); }
  to   { opacity: 0; transform: scale(.42) rotate(-8deg); }
}
@keyframes blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes marquee { to { transform: translateX(-50%); } }
/* The ring is the live dot's own colour, so it has to follow --accent into the dark theme —
   hardcoded it would stay the light theme's deep violet and read as a smudge on a lilac dot. */
@keyframes pulse {
  0%        { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  70%, 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); }
}