/* Self-hosted faces for the marketing site (SIL Open Font License, from Google Fonts). The build
   rewrites each /fonts/<file> to its fingerprinted /assets/ path and puts this file first in the
   site bundle. Only the subsets these pages render are shipped: Inter (variable opsz + wght) for
   Latin, Heebo (variable wght) for Hebrew; unicode-range means a page downloads only the files it
   actually paints with. Display type is the same Inter/Heebo at --fw-display, so there is no
   separate display face. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/inter-latin.2c295d99e2.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/heebo-hebrew.f1f7cfaef5.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* ============================================================
   dmswift - v5 "Ink & Indigo" (token names kept from Paper & Sweep)
   Cool neutrals with no violet cast, one indigo accent, near-black primary
   buttons. The brand sweep is a logo/rail object only: wordmark, 2px rails,
   progress bars and one hero glow. Nothing that carries text is a gradient.
   Every contrast figure below is WCAG 2.x relative luminance, recomputed for v5.
   ============================================================ */
:root {
  color-scheme: light dark;

  /* ---------- 0 · type ----------
     Inter for Latin, Heebo for Hebrew. One family does both jobs: display is the
     same sans at 600-650 with negative tracking, never a serif. Hebrew pages put
     Heebo first (see [lang="he"] below) so the Latin bits inside Hebrew copy still
     sit on Heebo's metrics; Latin pages reach Heebo only for Hebrew glyphs. */
  --font-ui:      "Inter", "Heebo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-ui);
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --fw-display:   640;          /* every display / heading rule that used Fraunces 300-400 */
  --ls-display:   -.03em;       /* hero, section display, big numerals */
  --ls-display-tight: -.018em;  /* page titles, modal and card headings (~17-28px) */
  /* The Fraunces SOFT/WONK axes are gone. Kept as names so the 30 rules that set
     font-variation-settings: var(--wonk) stay valid; `normal` lets Inter's opsz work. */
  --wonk:       normal;
  --wonk-tight: normal;

  /* ---------- 1 · brand hues, sampled left→right off brand/logo-source.png ----------
     DECORATIVE ONLY. These six may fill, stroke, blur and glow.
     They may never be a `color:` value. Use --on-* for that. */
  --h-sky:    #46B6F5;
  --h-indigo: #5B6CF0;
  --h-violet: #8A5CF0;
  --h-pink:   #E8479E;
  --h-coral:  #F65C5C;
  --h-amber:  #FBA13C;

  /* ---------- 2 · gradients ----------
     v5 rule: the 6-stop --sweep is the ONLY multi-hue gradient, and it only runs
     along a long thin path (wordmark, 2px rail, underline, progress rail) or one
     blurred hero glow. The other gradient tokens are kept as names but are now
     solid fills wearing linear-gradient() syntax, so they stay valid in both
     `background` and `background-image` (and in background-clip:text). */
  --ang: 135deg;                       /* [dir=rtl] flips this to 225deg */

  --sweep: linear-gradient(96deg,
      #46B6F5 0%, #5B6CF0 22%, #8A5CF0 42%,
      #E8479E 64%, #F65C5C 82%, #FBA13C 100%);

  /* AREA fill (avatars, badges, meters, 3px card edges): indigo only, no pink/amber.
     White on it ≥ 6.29:1 at every point (#4F46E5 6.29 → #4338CA 7.90). */
  --sweep-3: linear-gradient(var(--ang), #4F46E5 0%, #4338CA 100%);

  /* the old gradient CTA is now the near-black primary. Light: white label 19.26:1
     (hover #26262C 15.04:1). Dark: see the dark block (indigo, white label 6.29:1). */
  --grad-cta:   linear-gradient(#0E0E12, #0E0E12);
  --grad-cta-h: linear-gradient(#26262C, #26262C);

  /* gradient-text tokens resolve to plain ink: ink on --paper 17.99:1. */
  --grad-display: linear-gradient(#0E0E12, #0E0E12);

  /* hairline rule, masked to fade at both ends - a thin path, so it keeps the sweep */
  --grad-hair: linear-gradient(90deg, #5B6CF0, #8A5CF0 40%, #E8479E 72%, #FBA13C);

  /* ---------- 3 · surfaces ---------- */
  --paper:   #F7F7F8;   /* page canvas - cool off-white, no cast */
  --paper-2: #F1F1F3;   /* alternating band, recessed panel, preview rail (sunken) */
  --paper-3: #E9E9EC;   /* pressed / segmented track / skeleton base */
  --card:    #FFFFFF;
  --card-2:  #FAFAFB;   /* input fill, inset block, code block */
  --rule:    #E7E7EA;   /* hairline - decorative separation only */
  --rule-2:  #D9D9DE;   /* emphasised hairline */
  --field:   #84848F;   /* INPUT / CONTROL border. 3.70:1 on card, 3.55 on card-2, 3.45 on
                           paper, 3.28 on paper-2 - clears WCAG 2.2 §1.4.11 non-text contrast. */

  /* ---------- 4 · ink ---------- */
  --ink:   #0E0E12;  /* 17.99:1 on paper · 19.26 on card · 17.08 on paper-2 */
  --ink-2: #4B4B55;  /*  8.05:1 on paper ·  8.62 on card ·  7.64 on paper-2  (AAA) */
  --ink-3: #686873;  /*  5.14:1 on paper ·  5.50 on card ·  4.54 on paper-3 · 4.86 on accent-soft (AA everywhere) */
  --on-color: #FFFFFF;

  /* ---------- 5 · accent - one indigo ---------- */
  --accent:      #4F46E5;  /* icons, fills, focus, accent buttons. white on it = 6.29:1 */
  --accent-ink:  #4338CA;  /* accent TEXT + links. 7.90 on card · 7.38 on paper · 6.98 on accent-soft */
  --accent-2:    #4338CA;  /* hover fill. white = 7.90:1 */
  --accent-3:    #3730A3;  /* pressed fill. white = 9.93:1 */
  --accent-soft: #EEF0FF;
  --accent-line: #C7CBF9;
  --on-accent:   #FFFFFF;  /* label on a solid --accent / --btn-bg fill (primary buttons) */
  /* primary button = near-black ink: white label 19.26:1 · hover 15.04 · pressed 21.00 */
  --btn-fill-h:  #26262C;
  --btn-fill-a:  #000000;
  --focus:       #4F46E5;  /* 6.29:1 on card, 5.87 on paper */
  --ring:        rgba(79, 70, 229, .22);

  /* ---------- 6 · pastel pairs. Every tint ships its own legible ink. ---------- */
  --tint-sky:    #E8F5FE;  --on-sky:    #0F5C86;  /* 6.54 on tint · 6.77 on paper */
  --tint-violet: #EEF0FF;  --on-violet: #4338CA;  /* 6.98 on tint · 7.38 on paper (indigo now) */
  --tint-pink:   #FDEAF3;  --on-pink:   #A81E63;  /* 6.02 on tint · 6.47 on paper */
  --tint-amber:  #FEF1E3;  --on-amber:  #94510B;  /* 5.49 on tint · 5.70 on paper */
  --tint-mint:   #E4F6EE;  --on-mint:   #0F6B47;  /* 5.82 on tint · 6.10 on paper */
  --tint-coral:  #FDEBEA;  --on-coral:  #B32B24;  /* 5.55 on tint · 5.97 on paper */

  /* ---------- 7 · semantic - aliases of the pairs, so there is ONE truth ---------- */
  --ok:   var(--on-mint);   --ok-soft:   var(--tint-mint);   /* white on #0F6B47 = 6.53 */
  --warn: var(--on-amber);  --warn-soft: var(--tint-amber);  /* white on #94510B = 6.10 */
  --err:  var(--on-coral);  --err-soft:  var(--tint-coral);  /* white on #B32B24 = 6.39 */
  --info: var(--on-sky);    --info-soft: var(--tint-sky);    /* white on #0F5C86 = 7.25 */

  /* ---------- 8 · highlighter pen - decorative, sits BEHIND --ink text ----------
     --ink on every pen ≥ 14.6:1. Never place --ink-3 on a pen. */
  --pen-violet: #E0E3FF;   /* 15.23 */
  --pen-mint:   #CFF0E2;   /* 15.79 */
  --pen-amber:  #FCE6C3;   /* 15.82 */
  --pen-pink:   #FBD7E7;   /* 14.65 */
  --pen-sky:    #D3EBFB;   /* 15.64 */

  /* ---------- 9 · charts. All chart marks sit on --card. ----------
     Categorical order is FIXED: indigo → mint → sky → pink → amber.
     Every colour ≥3:1 on --card (6.29 / 4.10 / 4.05 / 4.32 / 3.36).
     Reordering breaks CVD separation - do not reorder. */
  --cat-1: #4F46E5;  --cat-2: #0B8F63;  --cat-3: #2280DC;
  --cat-4: #DE2F86;  --cat-5: #C87A12;

  /* single-series bar: one hue, solid. 6.29:1 on card; "today" is the deeper 7.90. */
  --chart-bar:    linear-gradient(#4F46E5, #4F46E5);
  --chart-bar-hi: linear-gradient(#3730A3, #3730A3);
  --chart-track:  #EDEDF0;
  --chart-grid:   #EFEFF2;   /* SOLID hairlines only - never dashed */

  /* ---------- 10 · light (the felt layer - the one hero glow) ----------
     Max 3 hues per composition; a 4th turns the blend muddy. */
  --wash-a: #46B6F5;   --wash-b: #5B6CF0;
  --wash-c: #E8479E;   --wash-d: #FBA13C;
  --wash-alpha: .22;
  --wash-blur:  80px;
  --dot: rgba(14, 14, 18, .06);   /* 22px dot-grid texture */

  /* ---------- 11 · glass - chrome only ----------
     .78 in light is the measured floor: over the most saturated thing that can
     scroll under the nav, --ink-2 still reads 6.12:1. */
  --glass:        rgba(255, 255, 255, .78);
  --glass-solid:  #FAFAFB;                 /* @supports-not fallback */
  --glass-border: rgba(14, 14, 18, .06);
  --glass-blur:   blur(16px) saturate(150%);
  --scrim:        rgba(14, 14, 18, .42);

  /* ---------- 12 · elevation - neutral ink, low and tight ---------- */
  --sh-1: 0 1px 2px rgba(16, 16, 24, .06);
  --sh-2: 0 1px 2px rgba(16, 16, 24, .05), 0 4px 12px -2px rgba(16, 16, 24, .07);
  --sh-3: 0 1px 2px rgba(16, 16, 24, .04), 0 12px 32px -8px rgba(16, 16, 24, .16), 0 2px 6px rgba(16, 16, 24, .04);
  --sh-cta:   0 1px 0 rgba(255, 255, 255, .12) inset, 0 1px 2px rgba(16, 16, 24, .10);
  --sh-cta-h: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 4px 12px -2px rgba(16, 16, 24, .18);
  --sh-glow:  0 8px 24px -6px rgba(79, 70, 229, .35);   /* under the app mark / hero wordmark only */

  /* ---------- 13 · shape - 6 / 10 / 14 / 20 ---------- */
  --r-xs: 6px;  --r-sm: 10px;  --r: 14px;
  --r-lg: 20px; --r-xl: 20px;  --r-pill: 999px;   /* pill = badges, chips, dots only */
  --r-btn: 10px;                                    /* buttons: never a pill */

  /* ---------- 14 · space ---------- */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px; --s7: 48px;  --s8: 72px;  --s9: 104px; --s10: 144px;

  /* ---------- 15 · motion ---------- */
  --ease:        cubic-bezier(.22, 1, .36, 1);      /* editorial glide - the default */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);   /* chips, toggles, checks */
  --ease-inout:  cubic-bezier(.4, 0, .2, 1);
  --t-fast: 140ms;  --t: 240ms;  --t-slow: 520ms;  --t-reveal: 700ms;
  --t-drift: 28s;

  /* ---------- 16 · layout ---------- */
  --max:     1160px;
  --max-txt: 720px;          /* editorial measure ≈ 68ch */
  --nav-h:   68px;
  --gutter:  clamp(18px, 4.2vw, 40px);

  /* ---------- 17 · responsive (docs/MOBILE_FIRST.md) ----------
     BREAKPOINTS - exactly three, min-width ONLY. Base CSS (no query) is the phone, 320-599px.
       @media (min-width: 600px)  large phone / small tablet
       @media (min-width: 900px)  tablet / small desktop
       @media (min-width: 1200px) desktop
     Never write a max-width (or `width <`) media query for layout. Allowed non-layout queries:
     prefers-color-scheme, prefers-reduced-motion, hover, pointer, forced-colors, print.
     A custom property cannot sit inside @media; the --bp-* values exist so JS can read them
     (matchMedia(`(min-width: ${getComputedStyle(document.documentElement).getPropertyValue('--bp-md')})`)). */
  --bp-sm: 600px;
  --bp-md: 900px;
  --bp-lg: 1200px;

  /* fluid type - rem + vw so browser zoom still scales; each floor fits a 320px screen */
  --fs-2xs: .75rem;                                          /* 12px  micro-labels         */
  --fs-xs:  .8125rem;                                        /* 13px  meta, hints          */
  --fs-sm:  .875rem;                                         /* 14px  dense UI             */
  --fs-md:  1rem;                                            /* 16px  body                 */
  --fs-lg:  clamp(1.0625rem, 1rem + .3vw, 1.1875rem);        /* 17 → 19  lead              */
  --fs-h3:  clamp(1.125rem, 1.02rem + .5vw, 1.375rem);       /* 18 → 22                    */
  --fs-h2:  clamp(1.375rem, 1.1rem + 1.3vw, 1.875rem);       /* 22 → 30                    */
  --fs-h1:  clamp(1.625rem, 1.2rem + 2.2vw, 2.5rem);         /* 26 → 40                    */
  --fs-display: clamp(2rem, 1.2rem + 4vw, 3.75rem);          /* 32 → 60  section display   */
  --fs-hero:    clamp(2.25rem, 1.1rem + 5.6vw, 5.375rem);    /* 36 → 86  one hero per page */

  /* fluid space - use where a fixed step is too much on a phone and too little on a desktop.
     The fixed --s1…--s10 steps above stay for component-internal spacing. */
  --space-xs:  clamp(8px,  4px + 1vw,     12px);
  --space-s:   clamp(12px, 8px + 1vw,     16px);
  --space-m:   clamp(16px, 10px + 1.5vw,  24px);
  --space-l:   clamp(24px, 14px + 2.5vw,  40px);
  --space-xl:  clamp(32px, 16px + 4vw,    72px);
  --space-2xl: clamp(48px, 24px + 6vw,   104px);

  /* touch + device chrome */
  --tap: 44px;                                   /* minimum hit area on (pointer: coarse) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --h-screen:   100vh;     /* full-height UI: use var(--h-screen), never a bare 100vh  */
  --h-screen-s: 100vh;     /* the small viewport (toolbars shown) - sticky / fixed UI   */
  --sheet-max:  90vh;      /* bottom-sheet ceiling on a phone                            */
  --fade:       28px;      /* .scroll-x-fade edge length                                 */

  /* form controls: iOS zooms on focus into any field under 16px, so phones get a 16px floor.
     Components size fields with font-size: var(--fs-input), or max(var(--fs-input-floor), 13px)
     when they need a smaller desktop size. */
  --fs-input-floor: 16px;
  --fs-input: max(var(--fs-input-floor), .875rem);
}
@supports (height: 100dvh) {
  :root { --h-screen: 100dvh; --h-screen-s: 100svh; --sheet-max: 90dvh; }
}
@media (min-width: 600px) {
  :root { --fs-input-floor: 0px; }
}
/* a tablet in the hand still zooms: keep the floor wherever the pointer is a finger */
@media (min-width: 600px) and (pointer: coarse) {
  :root { --fs-input-floor: 16px; }
}

/* RTL: mirror every diagonal so gradients travel with the reading direction */
[dir="rtl"] { --ang: 225deg; }


/* ============================================================
   Dark - cool near-black, no cast. --sweep keeps its light-mode hexes so the
   logo and the rails are the same object in both themes. The two blocks below
   are byte-identical (CSS has no way to share them): the explicit switch wins;
   the OS preference is the fallback.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #0B0B0F;
    --paper-2: #101014;
    --paper-3: #1C1C21;
    --card:    #141418;
    --card-2:  #19191E;
    --rule:    #26262C;
    --rule-2:  #33333A;
    --field:   #6A6A75;   /* 3.68:1 on paper · 3.44 on card · 3.28 on card-2 */

    --ink:   #EDEDF0;  /* 16.81:1 on paper · 15.72 on card · 14.52 on paper-3 */
    --ink-2: #B4B4BE;  /*  9.55:1 on paper ·  8.94 on card  (AAA) */
    --ink-3: #8F8F9A;  /*  6.14:1 on paper ·  5.74 on card · 5.47 on card-2 · 5.30 on paper-3 */

    --accent:      #818CF8;
    --accent-ink:  #A5B4FC;   /* 9.22 on card · 9.85 on paper · 7.57 on accent-soft */
    --accent-2:    #A5B4FC;
    --accent-3:    #6C70F2;
    /* the dark accent is a light indigo, so its label is dark, not white:
       #0B0B0F on --accent 6.59 · on --accent-2 (hover) 9.85 · on --accent-3 (pressed) 4.90 */
    --on-accent:   #0B0B0F;
    --accent-soft: rgba(129, 140, 248, .14);
    --accent-line: rgba(129, 140, 248, .38);
    --focus:       #A5B4FC;
    --ring:        rgba(129, 140, 248, .38);
    /* primary button inverts: light ink fill, dark label (16.81 / hover 19.64 / pressed 13.31) */
    --btn-fill-h:  #FFFFFF;
    --btn-fill-a:  #D4D4DA;

    /* the solid CTA keeps a WHITE label in dark (its rules set --on-color), so it is the
       light-mode indigo here, not the ink: white 6.29:1, hover 7.90:1 */
    --grad-cta:   linear-gradient(#4F46E5, #4F46E5);
    --grad-cta-h: linear-gradient(#4338CA, #4338CA);

    --grad-display: linear-gradient(#EDEDF0, #EDEDF0);   /* plain ink: 16.81:1 on paper */

    /* tints become washes; the ink becomes the light 300-level.
       Measured against the composited tint over --card. */
    --tint-sky:    rgba(70,182,245,.13);   --on-sky:    #8FD3FA;  /* 9.09 on tint · 11.26 on card */
    --tint-violet: rgba(129,140,248,.15);  --on-violet: #A5B4FC;  /* 7.45 · 9.22 */
    --tint-pink:   rgba(232,71,158,.14);   --on-pink:   #F8A0CB;  /* 8.20 · 9.52 */
    --tint-amber:  rgba(251,161,60,.14);   --on-amber:  #F6C077;  /* 8.67 · 11.13 */
    --tint-mint:   rgba(79,179,146,.14);   --on-mint:   #7FD9B4;  /* 8.84 · 10.92 */
    --tint-coral:  rgba(246,92,92,.14);    --on-coral:  #F79B96;  /* 7.44 · 8.82 */

    --pen-violet: rgba(129,140,248,.30);  /* --ink on it = 9.62 */
    --pen-mint:   rgba(79,179,146,.28);   /* 9.48 */
    --pen-amber:  rgba(251,161,60,.26);   /* 9.22 */
    --pen-pink:   rgba(232,71,158,.26);   /* 11.38 */
    --pen-sky:    rgba(70,182,245,.26);   /* 9.60 */

    /* categorical re-stepped for the dark card - NOT an auto-flip.
       ≥3:1 on --card: 6.44 / 6.06 / 5.64 / 5.20 / 5.94. */
    --cat-1: #8A8FF8;  --cat-2: #14A87C;  --cat-3: #3593E4;
    --cat-4: #E0559C;  --cat-5: #C4862B;

    --chart-bar:    linear-gradient(#818CF8, #818CF8);  /* 6.16 on card */
    --chart-bar-hi: linear-gradient(#A5B4FC, #A5B4FC);  /* 9.22 */
    --chart-track:  #222228;
    --chart-grid:   #1F1F24;

    --wash-alpha: .20;   --wash-blur: 84px;
    --dot: rgba(237, 237, 240, .05);

    --glass:        rgba(20, 20, 24, .80);   /* measured floor: --ink-2 = 6.10:1 worst case */
    --glass-solid:  #17171B;
    --glass-border: rgba(255, 255, 255, .07);
    --scrim:        rgba(0, 0, 0, .62);

    --sh-1: 0 1px 2px rgba(0, 0, 0, .32);
    --sh-2: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -4px rgba(0, 0, 0, .44);
    --sh-3: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 48px -8px rgba(0, 0, 0, .6);
    --sh-cta:   0 1px 0 rgba(255, 255, 255, .14) inset, 0 1px 2px rgba(0, 0, 0, .4);
    --sh-cta-h: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 6px 16px -4px rgba(0, 0, 0, .5);
    --sh-glow:  0 8px 28px -6px rgba(129, 140, 248, .40);
  }
}

:root[data-theme="dark"] {
  --paper:   #0B0B0F;
  --paper-2: #101014;
  --paper-3: #1C1C21;
  --card:    #141418;
  --card-2:  #19191E;
  --rule:    #26262C;
  --rule-2:  #33333A;
  --field:   #6A6A75;   /* 3.68:1 on paper · 3.44 on card · 3.28 on card-2 */

  --ink:   #EDEDF0;  /* 16.81:1 on paper · 15.72 on card · 14.52 on paper-3 */
  --ink-2: #B4B4BE;  /*  9.55:1 on paper ·  8.94 on card  (AAA) */
  --ink-3: #8F8F9A;  /*  6.14:1 on paper ·  5.74 on card · 5.47 on card-2 · 5.30 on paper-3 */

  --accent:      #818CF8;
  --accent-ink:  #A5B4FC;   /* 9.22 on card · 9.85 on paper · 7.57 on accent-soft */
  --accent-2:    #A5B4FC;
  --accent-3:    #6C70F2;
  /* the dark accent is a light indigo, so its label is dark, not white:
     #0B0B0F on --accent 6.59 · on --accent-2 (hover) 9.85 · on --accent-3 (pressed) 4.90 */
  --on-accent:   #0B0B0F;
  --accent-soft: rgba(129, 140, 248, .14);
  --accent-line: rgba(129, 140, 248, .38);
  --focus:       #A5B4FC;
  --ring:        rgba(129, 140, 248, .38);
  /* primary button inverts: light ink fill, dark label (16.81 / hover 19.64 / pressed 13.31) */
  --btn-fill-h:  #FFFFFF;
  --btn-fill-a:  #D4D4DA;

  /* the solid CTA keeps a WHITE label in dark (its rules set --on-color), so it is the
     light-mode indigo here, not the ink: white 6.29:1, hover 7.90:1 */
  --grad-cta:   linear-gradient(#4F46E5, #4F46E5);
  --grad-cta-h: linear-gradient(#4338CA, #4338CA);

  --grad-display: linear-gradient(#EDEDF0, #EDEDF0);   /* plain ink: 16.81:1 on paper */

  /* tints become washes; the ink becomes the light 300-level.
     Measured against the composited tint over --card. */
  --tint-sky:    rgba(70,182,245,.13);   --on-sky:    #8FD3FA;  /* 9.09 on tint · 11.26 on card */
  --tint-violet: rgba(129,140,248,.15);  --on-violet: #A5B4FC;  /* 7.45 · 9.22 */
  --tint-pink:   rgba(232,71,158,.14);   --on-pink:   #F8A0CB;  /* 8.20 · 9.52 */
  --tint-amber:  rgba(251,161,60,.14);   --on-amber:  #F6C077;  /* 8.67 · 11.13 */
  --tint-mint:   rgba(79,179,146,.14);   --on-mint:   #7FD9B4;  /* 8.84 · 10.92 */
  --tint-coral:  rgba(246,92,92,.14);    --on-coral:  #F79B96;  /* 7.44 · 8.82 */

  --pen-violet: rgba(129,140,248,.30);  /* --ink on it = 9.62 */
  --pen-mint:   rgba(79,179,146,.28);   /* 9.48 */
  --pen-amber:  rgba(251,161,60,.26);   /* 9.22 */
  --pen-pink:   rgba(232,71,158,.26);   /* 11.38 */
  --pen-sky:    rgba(70,182,245,.26);   /* 9.60 */

  /* categorical re-stepped for the dark card - NOT an auto-flip.
     ≥3:1 on --card: 6.44 / 6.06 / 5.64 / 5.20 / 5.94. */
  --cat-1: #8A8FF8;  --cat-2: #14A87C;  --cat-3: #3593E4;
  --cat-4: #E0559C;  --cat-5: #C4862B;

  --chart-bar:    linear-gradient(#818CF8, #818CF8);  /* 6.16 on card */
  --chart-bar-hi: linear-gradient(#A5B4FC, #A5B4FC);  /* 9.22 */
  --chart-track:  #222228;
  --chart-grid:   #1F1F24;

  --wash-alpha: .20;   --wash-blur: 84px;
  --dot: rgba(237, 237, 240, .05);

  --glass:        rgba(20, 20, 24, .80);   /* measured floor: --ink-2 = 6.10:1 worst case */
  --glass-solid:  #17171B;
  --glass-border: rgba(255, 255, 255, .07);
  --scrim:        rgba(0, 0, 0, .62);

  --sh-1: 0 1px 2px rgba(0, 0, 0, .32);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -4px rgba(0, 0, 0, .44);
  --sh-3: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 48px -8px rgba(0, 0, 0, .6);
  --sh-cta:   0 1px 0 rgba(255, 255, 255, .14) inset, 0 1px 2px rgba(0, 0, 0, .4);
  --sh-cta-h: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 6px 16px -4px rgba(0, 0, 0, .5);
  --sh-glow:  0 8px 28px -6px rgba(129, 140, 248, .40);
}

/* Hebrew: Heebo leads, so Latin inside Hebrew copy shares its metrics. Hebrew does not
   take negative tracking; the per-file Hebrew blocks already zero letter-spacing. */
[lang="he"] {
  --font-ui:      "Heebo", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Heebo", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}


/* ============================================================
   ALIAS LAYER - legacy names re-pointed at the v5 values.
   Delete style.css:6-112 and landing.css:12-145; keep the rest.
   ============================================================ */
:root {
  /* ---- style.css (dashboard) ---- */
  --bg: var(--paper);            --surface: var(--card);
  --surface-2: var(--paper-2);   --surface-3: var(--paper-3);
  --border: var(--rule);         --border-2: var(--rule-2);
  --text: var(--ink);            --muted: var(--ink-2);   --faint: var(--ink-3);
  --accent-text: var(--accent-ink);
  --accent-ring: var(--ring);
  /* --accent, --accent-2, --accent-3, --accent-soft, --ok, --ok-soft, --err,
     --err-soft, --warn, --warn-soft are already defined above under the same
     names - nothing to alias. */
  --btn-bg:   var(--ink);          /* primary = near-black (light) / near-white (dark), label --on-accent */
  --btn-bg-h: var(--btn-fill-h);
  --btn-bg-a: var(--btn-fill-a);
  --purple: var(--on-violet);      --purple-soft: var(--tint-violet);
  --tint-blue:   var(--tint-sky);    --tint-blue-b:  var(--rule);
  --tint-green:  var(--tint-mint);   --tint-green-b: var(--rule);
  --tint-amber-b: var(--rule);       /* --tint-amber already exists */
  --tint-purple: var(--tint-violet); --tint-purple-b: var(--rule);
  --bar: var(--chart-bar);           --bar-today: var(--chart-bar-hi);
  --sh-card: var(--sh-1);            --sh-pop: var(--sh-3);
  --t: var(--t-fast) var(--ease);

  /* ---- landing.css legacy (kept only until landing.css is rewritten) ---- */
  --di-bg: var(--paper);           --di-bg-alt: var(--paper-2);
  --di-surface: var(--card);       --di-surface-2: var(--paper-2);
  --di-surface-3: var(--paper-3);
  --di-border: var(--rule);        --di-border-2: var(--rule-2);
  --di-text: var(--ink);           --di-muted: var(--ink-2);  --di-faint: var(--ink-3);
  --di-accent: var(--accent);      --di-accent-2: var(--accent-2);
  --di-accent-3: var(--h-violet);  --di-accent-text: var(--accent-ink);
  --di-accent-soft: var(--accent-soft);  --di-ring: var(--ring);
  --di-btn: var(--btn-bg); --di-btn-h: var(--btn-bg-h); --di-btn-a: var(--btn-bg-a);
  --di-ok: var(--ok); --di-ok-soft: var(--ok-soft);
  --di-grad: var(--grad-cta);  --di-grad-soft: var(--sweep-3);
  --di-s1: var(--s1); --di-s2: var(--s2); --di-s3: var(--s3); --di-s4: var(--s4);
  --di-s5: var(--s5); --di-s6: var(--s6); --di-s7: var(--s7); --di-s8: var(--s8);
  --di-r-xs: var(--r-xs); --di-r-sm: var(--r-sm); --di-r: var(--r);
  --di-r-lg: var(--r-lg); --di-r-xl: var(--r-xl); --di-r-pill: var(--r-pill);
  --di-sh-1: var(--sh-1); --di-sh-2: var(--sh-2); --di-sh-3: var(--sh-3);
  --di-sh-accent: var(--sh-cta);
  --di-ease: var(--ease); --di-t: var(--t-fast) var(--ease);
  --di-max: var(--max); --di-nav-h: var(--nav-h);
}

/* ============================================================
   RESPONSIVE BASE + PRIMITIVES - shared by the app and the site (both load this file first).
   Every base rule is wrapped in :where() so it has ZERO specificity: any component rule wins,
   and nothing here can restyle a component on desktop. See docs/MOBILE_FIRST.md.
   ============================================================ */

/* media never pushes its parent wider. svg with a width attribute (icons, fixed-size charts
   inside their own scroller) keeps its authored size; a layout svg without one is capped. */
:where(img, video, canvas, iframe, embed, object, svg:not([width])) { max-inline-size: 100%; }
/* a capped image keeps its aspect ratio instead of keeping its height attribute */
:where(img[width][height]) { block-size: auto; }

/* code blocks scroll inside their own box; inline code breaks rather than overflowing */
:where(pre) { overflow-x: auto; max-inline-size: 100%; overscroll-behavior-inline: contain; }
:where(code, kbd, samp) { overflow-wrap: break-word; }

/* form controls: 16px floor on phones (see --fs-input in §17). The app's style.css and any
   component that sets its own font-size must use var(--fs-input) to keep the floor. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea) {
  font-size: var(--fs-input);
}

/* ---------- layout primitives ----------
   .stack       vertical rhythm.          --stack-gap   (default --s4)
   .cluster     wrapping row of items.    --cluster-gap (default --s2)
   .grid-auto   as many columns as fit.   --grid-min    (default 16rem), --grid-gap (default --s4)
   Children of .cluster and .grid-auto get min-inline-size: 0 so long text can shrink. */
.stack   { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--s2)); }
.grid-auto {
  display: grid; gap: var(--grid-gap, var(--s4));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
}
:where(.stack, .cluster, .grid-auto) > * { min-inline-size: 0; }

/* .scroll-x - a deliberate horizontal scroller (chip rows, wide tables, tab strips).
   Add .scroll-x-snap to snap children, .scroll-x-fade to fade the trailing edge as a cue. */
.scroll-x {
  overflow-x: auto; overscroll-behavior-inline: contain;
  max-inline-size: 100%; min-inline-size: 0;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.scroll-x-snap { scroll-snap-type: x proximity; }
.scroll-x-snap > * { scroll-snap-align: start; }
.scroll-x-fade {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
}
[dir="rtl"] .scroll-x-fade {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - var(--fade)), transparent);
}

/* text-safety helpers */
.min-0     { min-inline-size: 0; }
.wrap-any  { overflow-wrap: anywhere; }          /* URLs, emails, handles, tokens, user text */
.truncate  { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- touch: 44px hit areas without visual bloat ----------
   .hit-44  grows an invisible ::after to --tap around the control (use when ::after is free).
   .tap-44  sets min-block-size / min-inline-size to --tap (use when ::after is taken).
   Both only act on a coarse pointer, so a mouse UI is unchanged. */
@media (pointer: coarse) {
  :where(.hit-44) { position: relative; }
  .hit-44::after {
    content: ""; position: absolute;
    inset-block:  min(0px, (100% - var(--tap)) / 2);
    inset-inline: min(0px, (100% - var(--tap)) / 2);
  }
  .tap-44 { min-block-size: var(--tap); min-inline-size: var(--tap); }
}

/* ============================================================
   dmswift - Paper & Sweep · marketing surface
   Loaded AFTER /tokens.css, which owns every colour, radius, shadow and duration.
   Literal colours in this file: --h-mint below (the one decorative hue tokens.css never
   declared) and the eight stops of --grad-word (the AA-safe headline sweep, light + dark).
   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 {
  /* typefaces live in tokens.css (Inter / Heebo; display = the same sans at --fw-display) */
  /* 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(64px, 9vw, 120px);
  /* v5: the nav is a full-width bar at the top edge (64px), not a floating pill */
  --nav-bottom: 64px;
  /* the page gutter, widened to the notch in landscape (viewport-fit=cover); equal to --gutter
     on every screen without a safe-area inset */
  --gutter-safe: max(var(--gutter), var(--safe-left), var(--safe-right));
  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;

  /* v5 surfaces: the page is pure white in light (the mockup's --bg), and the alternating bands
     are the token canvas. Dark keeps its own near-black ladder. */
  --bg-page: var(--card);
  --bg-band: var(--paper);

  /* v5 - the one headline keyword in the brand sweep. tokens.css made --grad-display solid ink,
     so the sweep is re-deepened here until every stop is body-text safe on the page: on #FFFFFF
     #1570B8 5.20 · #4F46E5 6.29 · #7C3AED 5.70 · #BE1D74 5.81. Four stops, sky to pink: the
     warm end stays on the wordmark, so the headline never reads as a rainbow. */
  --grad-word: linear-gradient(var(--word-ang, 90deg), #1570B8 0%, #4F46E5 34%, #7C3AED 66%, #BE1D74 100%);

  /* 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"] {
  --bg-page: var(--paper);
  --bg-band: var(--paper-2);
  /* the same four hues at their light 300-level: on #0B0B0F 10.73 · 8.39 · 8.57 · 8.70 */
  --grad-word: linear-gradient(var(--word-ang, 90deg), #7CC8F8 0%, #93A4FD 34%, #B79CFB 66%, #F38BC4 100%);
  --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"]) {
    --bg-page: var(--paper);
    --bg-band: var(--paper-2);
    --grad-word: linear-gradient(var(--word-ang, 90deg), #7CC8F8 0%, #93A4FD 34%, #B79CFB 66%, #F38BC4 100%);
    --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 faces: tokens.css puts Heebo first under [lang="he"]. */

@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.
   No overflow-x mask on html/body (docs/MOBILE_FIRST.md §8): an element that is wider than the
   viewport is a bug in that element, and a mask on the root only hides it. */
html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: calc(var(--nav-bottom) + 24px); }
html.ds-locked { overflow: hidden; }

body.ds {
  margin: 0;
  background: var(--bg-page);
  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%; }

/* ---------- responsive base (docs/MOBILE_FIRST.md) ----------
   The breakpoints, fluid type/space tokens (--fs-*, --space-*), --tap, --safe-*, --h-screen and
   the primitives (.stack .cluster .grid-auto .scroll-x .truncate .wrap-any .hit-44 .tap-44) come
   from /tokens.css, which every site page loads first - they are not repeated here.
   Prose: a long URL, email or token wraps inside the measure instead of widening the page, and a
   code block scrolls inside its own box. Not inside a table: `anywhere` lowers a cell's min-content
   width, which re-balances the columns and splits short code like `draft` across two lines - a
   table that is too wide scrolls in its own wrapper instead (§6). */
:where(.ds-prose, .ds-legal-card, .ds-block, .ds-lead, .ds-page-meta, .ds-faq, .ds-footnote) :where(a, code):not(:where(table *)) { overflow-wrap: anywhere; }
/* Running copy can name a scope or a token longer than a 320px line (instagram_business_manage_comments):
   it breaks there rather than pushing the page wider. break-word, not anywhere, so nothing that
   fits is ever split and table columns keep their widths. */
:where(.ds-prose, .ds-legal-card, .ds-block, .ds-lead, .ds-faq, .ds-footnote) :where(p, li, dd, blockquote):not(:where(table *)) { overflow-wrap: break-word; }
/* A wide table scrolls inside its own wrapper (site.css .ds-table-wrap). The cue: a soft shadow
   on whichever edge still has columns behind it. The two `local` covers travel with the content
   and paint over the two `scroll` shadows once an edge is reached, so a table that fits shows no
   shadow at all. Two classes deep so site.css's own `background` (loaded after this file) does
   not repaint it. Direction-free: it shades whichever side has more, in LTR and RTL alike. */
:is(.ds-block, .ds-prose, .ds-page-body) .ds-table-wrap {
  background:
    linear-gradient(to right, var(--card) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--card) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right center / 14px 100% no-repeat scroll,
    var(--card);
}
/* Below 900px a scrolling table keeps its first column (the row's name: the plan line, the
   competitor, the tool) pinned at the start edge, so a reader knows which row they are on while the
   other columns slide under it. Logical, so it pins to the right in Hebrew. */
.ds-table-wrap :is(th, td):first-child {
  position: sticky; inset-inline-start: 0; z-index: 1;
  background: var(--card); border-inline-end: 1px solid var(--rule);
}
.ds-table-wrap thead th:first-child { background: var(--paper-2); }
@media (min-width: 900px) {
  .ds-table-wrap :is(th, td):first-child { position: static; z-index: auto; background: none; border-inline-end: 0; }
  .ds-table-wrap thead th:first-child { background: var(--paper-2); }
}
pre { overflow-x: auto; max-inline-size: 100%; overscroll-behavior-inline: contain; }
video, canvas, iframe { max-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-safe); }
.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(--bg-band); padding-block-end: clamp(48px, 7.5vw, 104px); }

.ds-head { max-inline-size: var(--max-txt); margin-block-end: clamp(34px, 4.4vw, 60px); }
/* a heading with the rail arrows at its end; the arrows only exist from 600px, so a phone gets a
   plain block heading */
.ds-head-row {
  max-inline-size: none; display: block; align-items: flex-end; justify-content: space-between;
  gap: var(--s5);
}
@media (min-width: 600px) { .ds-head-row { display: flex; } }
.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); }
/* v5: the label that opens a section is a sentence-case kicker (the mockup's .kicker), not a
   tracked small-cap. The labels inside sections keep the small caps. */
.ds-sec .ds-head .ds-eyebrow, .ds-agent .ds-eyebrow, .ds-page-hero .ds-eyebrow, .ds-about .ds-eyebrow {
  font-size: .875rem; letter-spacing: .005em; text-transform: none;
}
.ds-pane-label { color: var(--ink-3); margin-block-end: var(--s3); }

.ds-display-1 {
  font-family: var(--font-display); font-weight: var(--fw-display); font-variation-settings: var(--wonk);
  font-size: clamp(2.75rem, 1.35rem + 5.7vw, 5.375rem);
  line-height: 1.02; letter-spacing: var(--ls-display); text-wrap: balance;
  margin-block: var(--s4) var(--s5);
}
.ds-display-2 {
  font-family: var(--font-display); font-weight: var(--fw-display); font-variation-settings: var(--wonk);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 2.875rem);
  line-height: 1.08; letter-spacing: var(--ls-display); 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: var(--fw-display); font-variation-settings: var(--wonk);
  font-size: clamp(3rem, 12vw, 4rem);
  line-height: .95; letter-spacing: var(--ls-display);
  font-variant-numeric: proportional-nums lining-nums;
}
/* From 600px the three proof figures share one row (§6, .ds-proof-in is the size container). The
   row is content-sized: "Seconds" + "Unlimited" need ~7.2× the figure size in English (~4.4× in
   Hebrew) plus ~200px of caption column, padding and gaps. The second term caps the figure so the
   row fits its own box; from ~900px up the first term is the smaller one, so desktop is unchanged.
   (At 768px the figures are ~10% smaller than they were, which is what stops "Unlimited" running
   16px into the page gutter there.) */
@media (min-width: 600px) {
  .ds-numeral { font-size: clamp(3.5rem, 1.9rem + 6.2vw, 6.5rem); }
  /* three equal columns now, so each figure is capped by a third of the row: "Unlimited" is
     ~4.4em wide in English, the longest Hebrew figure (two words, kept on one line) ~4.7em */
  .ds-proof-in { container-type: inline-size; --proof-k: 4.8; }
  [lang="he"] .ds-proof-in { --proof-k: 4.9; }
  .ds-proof-in .ds-numeral { font-size: min(clamp(3.5rem, 1.9rem + 6.2vw, 6rem), (100cqi - 120px) / 3 / var(--proof-k)); white-space: nowrap; }
}
.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-word);
    -webkit-background-clip: text; background-clip: text;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    color: transparent;
  }
}
[dir="rtl"] { --word-ang: 270deg; }
/* In forced colours a clipped background vanishes; the word falls back to plain text. */
@media (forced-colors: active) { .ds-grad-word { background: none; color: CanvasText; } }
/* the hero keyword wears the sweep itself, so the underline band under it is retired there */
.ds-hero .u-sweep { background-image: none; padding-block-end: 0; }

/* §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. */
/* Retired in v5: the highlighter belonged to the old design. The class stays in the copy (it is
   in both locales) but paints nothing, so headings and quotes read as plain type. */
.pen { font-style: normal; }

/* §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%);
  /* phones: fewer, stiller, cheaper (§7.6) - a lighter blur and no drift (the drift animation
     only starts at 600px, in the motion block) */
  --wash-blur: 52px;
  filter: blur(var(--wash-blur)) saturate(115%);
}
@media (min-width: 600px) { .wash { --wash-blur: inherit; } }   /* the theme's own blur, from tokens.css */
[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-btn); 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%; }
/* A finger needs 44px (docs/MOBILE_FIRST.md §5). Only on a coarse pointer, so a mouse UI keeps
   its 39-41px buttons exactly as drawn. */
@media (pointer: coarse) {
  .ds-btn, .ds-ghost { min-block-size: var(--tap); }
}

/* §7.5 sheen - the only ambient motion permitted on an interactive element */
.btn-cta {
  position: relative; overflow: hidden; isolation: isolate;
  /* --btn-bg is --ink: near-black with a white label in light, and in dark it inverts to a
     near-white fill with a near-black label (--on-accent), never indigo */
  background: var(--btn-bg); color: var(--on-accent); box-shadow: var(--sh-cta);
}
.btn-cta:hover { background: var(--btn-bg-h); }
.btn-cta:active { background: var(--btn-bg-a); }
.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;
}
/* The nav's round icon buttons are transparent until hovered, so on a touch screen they can grow
   to the 44px target without looking any bigger. */
@media (pointer: coarse) {
  .ds-icon-btn { block-size: var(--tap); min-inline-size: var(--tap); justify-content: center; }
}
.ds-icon-btn:hover { background: var(--paper-3); color: var(--ink); }
.ds-theme-btn .ds-ic-moon { display: none; }
.ds-motion-btn .ds-ic-play { display: none; }
.no-motion .ds-motion-btn .ds-ic-pause { display: none; }
.no-motion .ds-motion-btn .ds-ic-play { display: block; }
/* Paused by the visitor: nothing moves, loops included (marquee, sheen, pulse, blink, drift). */
.no-motion *, .no-motion *::before, .no-motion *::after {
  animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important;
}
[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: transparent; z-index: 2;
}
/* v5: cards are a hairline ring with a low shadow (the mockup's .step); the 3px edge only
   appears on hover, as the brand rail */
.ds-card { box-shadow: var(--sh-1); }

/* ============================================================
   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. */
/* v5: a full-width bar pinned to the top edge (the mockup's .nav), glass over the page, one
   hairline under it. The content keeps the page's measure inside it. */
.ds-nav {
  position: fixed; z-index: 60; inset-block-start: 0; inset-inline: 0;
  padding-block-start: var(--safe-top);
  background: color-mix(in srgb, var(--bg-page) 82%, transparent);
  border-block-end: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
@supports not (backdrop-filter: blur(1px)) { .ds-nav { background: var(--bg-page); } }
/* Scrolling settles the bar - shadow and border only, nothing moves. */
.ds-nav.is-stuck { box-shadow: var(--sh-1); border-block-end-color: var(--rule); }

.ds-nav-in {
  display: flex; align-items: center; gap: var(--s4);
  block-size: 60px; max-inline-size: var(--max); margin-inline: auto;
  padding-inline: var(--gutter-safe) calc(var(--gutter-safe) - 8px);
}
@media (min-width: 900px) { .ds-nav-in { block-size: 64px; padding-inline: var(--gutter-safe); } }

.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: 36px; inline-size: auto; }

/* The dark-theme wordmark is the same flat artwork as light (the neon glow version read as
   blurry at nav size); a small lift keeps its indigo end clear of the dark bar. */
.ds-wordmark-box { position: relative; display: inline-flex; }
[data-theme="dark"] .ds-wordmark { filter: brightness(1.18) saturate(1.05); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-wordmark { filter: brightness(1.18) saturate(1.05); }
}

/* Phone first: the inline menu, "Log in" and the nav CTA live in the burger sheet (§3b below)
   and come back into the pill at 900px. */
.ds-menu { display: none; align-items: center; gap: 2px; margin-inline: 20px auto; }
.ds-menu-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  font-size: .875rem; font-weight: 500; color: var(--ink-2);
  padding: 8px 12px; border-radius: 8px;
}
.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);
}

/* Phone: the actions hold the pill's END edge - a short "Start free" CTA, then the burger, last,
   under the thumb. The globe and the theme toggle live in the sheet until 600px; "Log in" is in
   the sheet's bottom bar until 600px. .ds-nav-cta (Log in + CTA) is display: contents in the pill. */
.ds-nav-act { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-inline-size: 0; margin-inline-start: auto; }
/* a long translation truncates inside the CTA rather than pushing the burger off the pill */
.ds-nav-act .ds-btn { min-inline-size: 0; }
.ds-cta-short { overflow: hidden; text-overflow: ellipsis; }
.ds-nav-cta { display: contents; }
.ds-nav-act .ds-btn { padding: 10px 12px; font-size: .875rem; }
.ds-nav-act .ds-quiet { display: none; }
.ds-cta-long { display: none; }
.ds-nav:not(.is-open) .ds-lang, .ds-nav:not(.is-open) .ds-theme-btn, .ds-nav:not(.is-open) .ds-motion-btn { display: none; }

.ds-burger {
  display: flex; 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); }
@media (pointer: coarse) {
  .ds-burger { inline-size: var(--tap); block-size: var(--tap); }
  .ds-brand { min-block-size: var(--tap); }
}

@media (min-width: 600px) {
  .ds-nav:not(.is-open) .ds-lang { display: block; }
  .ds-nav:not(.is-open) .ds-theme-btn, .ds-nav:not(.is-open) .ds-motion-btn { display: inline-flex; }
  .ds-nav-act .ds-quiet { display: inline; }
  .ds-nav-act .ds-btn { padding: 10px 18px; font-size: .9375rem; }
  .ds-cta-long { display: inline; }
  .ds-cta-short { display: none; }
}
/* "Log in" is a text link in the pill from 600px; under a finger it gets the 44px target */
@media (min-width: 600px) and (pointer: coarse) {
  .ds-nav-act .ds-quiet { display: inline-flex; align-items: center; min-block-size: var(--tap); }
}
@media (min-width: 900px) {
  .ds-menu { display: flex; }
  .ds-nav-act { margin-inline-start: 0; }
  .ds-burger { display: none; }
}

/* 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 {
  /* Opens from the trigger's start edge (right in Hebrew), never a physical translateX: in RTL
     inset-inline-start is the right side, so a -50% shift threw the panel to the far left. */
  position: absolute; inset-block-start: calc(100% + 14px); inset-inline-start: -12px;
  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: var(--fw-display); letter-spacing: var(--ls-display); 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(--paper-2); color: var(--ink-2); }

/* ============================================================
   4 · hero (§8.2) - v5: a centred headline over the product
   Phone: copy at the start edge, then the agent chat and a delivered DM.
   900px: everything centres, and the dashboard window joins the stage with the chat and the
   DM card hung over its two edges (the mockup's .stage).
   ============================================================ */
.ds-hero {
  position: relative; overflow: clip; isolation: isolate;
  padding-block: calc(var(--nav-bottom) + clamp(36px, 6vw, 80px)) 0;
}
.ds-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.ds-hero-copy { min-inline-size: 0; }

/* The pill: a white capsule with a hairline ring, a sweep dot, and the three slides rolling
   through one window (the mockup's .eyebrow). It is as wide as its widest slide. */
.ds-pill {
  display: inline-flex; align-items: center; gap: 10px;
  inline-size: fit-content; max-inline-size: 100%;
  min-block-size: 32px; padding-inline: 6px 14px; border-radius: var(--r-pill);
  background: var(--card); box-shadow: 0 0 0 1px var(--rule-2), var(--sh-1);
}
.ds-pill .ds-dot {
  inline-size: 20px; block-size: 20px; margin-inline-start: 0;
  background: var(--sweep); box-shadow: inset 0 0 0 6px var(--card);
}
.ds-pill-roll { display: block; block-size: 40px; overflow: hidden; min-inline-size: 0; }
.ds-pill-slide {
  display: flex; align-items: center; block-size: 40px; line-height: 1.3;
  font-size: .8125rem; font-weight: 500; color: var(--ink-2); text-align: start;
  overflow: hidden; text-wrap: balance;
}
@media (min-width: 600px) {
  .ds-pill { block-size: 32px; }
  .ds-pill-roll { block-size: 32px; }
  .ds-pill-slide {
    display: block; block-size: 32px; line-height: 32px;
    white-space: nowrap; text-overflow: ellipsis;
  }
}

/* Phone: every button in a CTA row takes the full width, one per line, and a long label wraps
   inside its own button instead of running past the screen edge. From 600px they sit side by
   side at their natural width, on one line each. */
.ds-cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s6); }
.ds-cta-row > * { flex: 1 1 100%; min-inline-size: 0; white-space: normal; line-height: 1.25; text-align: center; }
.ds-btn-watch svg, .ds-go { flex: 0 0 auto; }
[dir="rtl"] .ds-go { transform: scaleX(-1); }
@media (min-width: 600px) {
  .ds-cta-row > * { flex: 0 1 auto; white-space: nowrap; line-height: 1; }
}
/* the hero pair: the near-black trial CTA and a white secondary, the same height */
.ds-hero .ds-cta-row { margin-block-start: var(--s5); }
.ds-hero .ds-btn-lg { min-block-size: 52px; padding-block: 0; border-radius: 12px; font-size: 1rem; }
@media (min-width: 600px) { .ds-hero .ds-cta-row > * { flex: 1 1 0; } }
@media (min-width: 900px) { .ds-hero .ds-cta-row > * { flex: 0 1 auto; } }

/* Three facts, each with a green check (the mockup's .micro). */
.ds-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s4);
  margin-block-start: var(--s4); font-size: .84375rem; color: var(--ink-3);
}
.ds-trust > span { display: inline-block; min-inline-size: 0; }
.ds-trust > span::before {
  content: ""; display: inline-block; vertical-align: -2px; margin-inline-end: 6px;
  inline-size: 14px; block-size: 14px; background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- the stage ---------- */
.ds-stage { position: relative; margin-block-start: clamp(36px, 6vw, 64px); padding-block-end: clamp(40px, 6vw, 56px); text-align: start; }
/* the one hero glow: the aurora wash, re-hung behind the product as a soft multi-hue pool */
.ds-hero .ds-glow {
  inset: 4% -8% auto; block-size: 86%; z-index: -1;
  border-radius: 50%; --wash-alpha: .34;
}
[data-theme="dark"] .ds-hero .ds-glow { --wash-alpha: .26; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ds-hero .ds-glow { --wash-alpha: .26; } }
.ds-win { display: none; }

/* the WhatsApp agent chat (the mockup's .chat) */
.ds-hchat {
  position: relative; z-index: 2; max-inline-size: 400px; margin-inline: auto;
  background: var(--card); border-radius: 20px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--rule), 0 24px 48px -16px rgba(16, 16, 24, .22);
}
.ds-hchat-hd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-block-end: 1px solid var(--rule); }
.ds-hchat-hd img { inline-size: 32px; block-size: 32px; border-radius: 9px; flex: 0 0 auto; }
.ds-hchat-hd b { display: block; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.ds-hchat-hd small { display: flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--ok); line-height: 1.3; }
.ds-hchat-hd small::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.ds-hchat-wa { margin-inline-start: auto; color: var(--ok); flex: 0 0 auto; }
.ds-hchat-body { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--card-2); }
.ds-hb { max-inline-size: 88%; padding: 9px 12px; border-radius: 16px; font-size: .875rem; line-height: 1.45; }
.ds-hb-me { align-self: flex-end; background: var(--ink); color: var(--bg-page); border-end-end-radius: 5px; }
.ds-hb-bot { align-self: flex-start; background: var(--card); box-shadow: 0 0 0 1px var(--rule); border-end-start-radius: 5px; }
.ds-hres {
  display: flex; align-items: center; gap: 10px; margin-block-start: 8px;
  padding: 10px 12px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--rule);
}
.ds-hres-ic { flex: 0 0 auto; inline-size: 30px; block-size: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--tint); color: var(--on); }
.ds-hres-t { min-inline-size: 0; }
.ds-hres b { display: block; font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.ds-hres small { display: block; font-size: .75rem; color: var(--ink-3); line-height: 1.35; }
.ds-hres .ds-live { margin-inline-start: auto; }

/* a status badge: green dot + word, on the mint tint */
.ds-live {
  display: inline-flex; align-items: center; gap: 6px; block-size: 22px; padding-inline: 8px;
  border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok);
  font-size: .75rem; font-weight: 500; white-space: nowrap; line-height: 1;
}
.ds-live::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }

/* the delivered DM, as the notification it is (the mockup's .notif) */
.ds-hnotif {
  position: relative; z-index: 3; display: flex; align-items: flex-start; gap: 10px;
  max-inline-size: 340px; margin-block-start: -18px; margin-inline: auto 0;
  background: color-mix(in srgb, var(--card) 96%, transparent); border-radius: 16px; padding: 12px 14px;
  box-shadow: 0 0 0 1px var(--rule), 0 20px 40px -16px rgba(16, 16, 24, .25);
  font-size: .8125rem; line-height: 1.4;
}
@media (min-width: 600px) { .ds-hnotif { margin-inline-end: calc((100% - 400px) / 2 - 18px); } }
.ds-hnotif .ds-av { background: var(--tint-pink); color: var(--on-pink); }
.ds-hnotif-t { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.ds-hnotif-who b { font-weight: 600; }
.ds-hnotif-who small { font-size: .75rem; color: var(--ink-3); }
.ds-hnotif-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-htag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--tint); color: var(--on); font-size: .6875rem; font-weight: 600;
}
.ds-htag::before { content: "\2713"; font-size: .625rem; }
.ds-hnotif-dm { color: var(--ink-2); }
.ds-hnotif-ok { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600; color: var(--ok); }
.ds-hnotif-ok b { font-weight: 600; }

/* dark: the floating cards keep their lift without a grey smear */
[data-theme="dark"] .ds-hchat, [data-theme="dark"] .ds-hnotif, [data-theme="dark"] .ds-win { box-shadow: 0 0 0 1px var(--rule-2), var(--sh-3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-hchat, :root:not([data-theme="light"]) .ds-hnotif, :root:not([data-theme="light"]) .ds-win { box-shadow: 0 0 0 1px var(--rule-2), var(--sh-3); }
}

@media (min-width: 900px) {
  .ds-hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .ds-hero .ds-display-1 { max-inline-size: 15.5em; margin-inline: auto; }
  .ds-hero .ds-lead { margin-inline: auto; max-inline-size: 640px; }
  .ds-hero .ds-cta-row, .ds-trust { justify-content: center; }

  .ds-hero { padding-block-end: clamp(32px, 4vw, 56px); }
  .ds-stage { block-size: 500px; padding: 0; margin-block-start: 64px; }
  .ds-hero .ds-glow { inset: 8% 4% auto; block-size: 64%; }
  .ds-win {
    display: block; position: absolute; inset-block-start: 0; inset-inline: 0;
    max-inline-size: 1040px; margin-inline: auto; block-size: 540px;
    background: var(--card); border-radius: 16px; overflow: hidden;
    box-shadow: 0 0 0 1px var(--rule), 0 40px 80px -24px rgba(16, 16, 24, .28);
    -webkit-mask-image: linear-gradient(#000 64%, transparent 94%);
            mask-image: linear-gradient(#000 64%, transparent 94%);
    font-size: .78125rem;
  }
  .ds-win-bar {
    position: relative; display: flex; align-items: center; gap: 7px; block-size: 40px; padding-inline: 14px;
    border-block-end: 1px solid var(--rule); background: var(--card-2);
  }
  .ds-win-bar i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--rule-2); }
  .ds-win-bar span {
    position: absolute; inset-inline-start: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; block-size: 24px; padding-inline: 60px; border-radius: 7px;
    background: var(--card); box-shadow: 0 0 0 1px var(--rule); color: var(--ink-3); font-size: .75rem;
  }
  [dir="rtl"] .ds-win-bar span { transform: translateX(50%); }
  .ds-win-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); block-size: calc(100% - 40px); }
  .ds-win-side { border-inline-end: 1px solid var(--rule); background: var(--bg-band); padding: 12px 8px; }
  .ds-win-pg { display: flex; align-items: center; gap: 8px; padding: 4px 8px 12px; font-weight: 600; font-size: .8125rem; }
  .ds-win-pg em { inline-size: 22px; block-size: 22px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: .6875rem; background: var(--accent); color: var(--on-accent); }
  .ds-win-nav { display: flex; align-items: center; gap: 8px; block-size: 30px; padding-inline: 8px; border-radius: 7px; color: var(--ink-2); font-weight: 500; }
  .ds-win-nav svg { color: var(--ink-3); flex: 0 0 auto; }
  .ds-win-nav.is-on { background: var(--card); box-shadow: 0 0 0 1px var(--rule); color: var(--ink); }
  .ds-win-nav.is-on svg { color: var(--accent); }
  .ds-win-main { padding: 20px 24px; min-inline-size: 0; }
  .ds-win-h { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.02em; }
  .ds-win-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: 14px; border-radius: 12px; box-shadow: 0 0 0 1px var(--rule); overflow: hidden; }
  .ds-win-kpis > div { position: relative; padding: 12px 14px; }
  /* each KPI wears its hue as a 2px top rail: the only colour in the window besides status */
  .ds-win-kpis > div::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px; background: var(--hue); opacity: .85; }
  .ds-win-kpis > div + div { border-inline-start: 1px solid var(--rule); }
  .ds-win-kpis small { display: block; font-size: .71875rem; color: var(--ink-3); }
  .ds-win-kpis b { display: block; margin-block-start: 2px; font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  [dir="rtl"] .ds-win-kpis b, [dir="rtl"] .ds-win-kpis em { text-align: right; }
  .ds-win-kpis em { display: block; font-style: normal; font-size: .6875rem; font-weight: 550; color: var(--ok); }
  .ds-win-table { margin-block-start: 16px; border-radius: 12px; box-shadow: 0 0 0 1px var(--rule); overflow: hidden; }
  .ds-win-tr {
    display: grid; grid-template-columns: 1.6fr .8fr .8fr .6fr .7fr; align-items: center;
    block-size: 42px; padding-inline: 14px; border-block-start: 1px solid var(--rule);
  }
  .ds-win-tr > * { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ds-win-tr b { font-weight: 600; }
  .ds-win-th { border-block-start: 0; block-size: 34px; background: var(--card-2); color: var(--ink-3); font-size: .71875rem; font-weight: 550; }
  .ds-win-tr .r { text-align: end; font-variant-numeric: tabular-nums; }
  .ds-win-kw { justify-self: start; font-family: var(--font-mono); font-size: .6875rem; background: var(--paper-2); padding: 1px 6px; border-radius: 5px; }

  /* tablet: the cards sit below the KPI strip so the figures stay readable */
  .ds-hchat { position: absolute; inset-block-start: 236px; inset-inline-start: calc(12px - var(--gutter-safe)); inline-size: 300px; margin: 0; }
  .ds-hnotif { position: absolute; inset-block-start: 330px; inset-inline-end: calc(12px - var(--gutter-safe)); inline-size: 300px; margin: 0; }
}
@media (min-width: 1200px) {
  .ds-stage { block-size: 520px; }
  /* desktop: hung off the window's two edges, as in the mockup - the chat covers the sidebar,
     never the figures */
  .ds-hchat { inset-block-start: clamp(150px, 752px - 43vw, 236px); inset-inline-start: max(calc(50% - 650px), calc((100% - 100vw) / 2 + 16px)); inline-size: 340px; }
  .ds-hnotif { inset-block-start: 372px; inset-inline-end: max(calc(50% - 650px), calc((100% - 100vw) / 2 + 16px)); inline-size: 320px; }
}

/* ============================================================
   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(--s4);
  overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5);
}
@media (min-width: 600px) { .ds-demo { padding: 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; }
/* no JS: the finished conversation, without the "typing" dots */
html:not(.js) .ds-demo .ds-typing { 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;
}
@media (pointer: coarse) { .ds-step { min-block-size: var(--tap); } }
.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(--bg-band);
  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; grid-template-columns: minmax(0, 1fr); 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; grid-template-columns: minmax(0, 1fr); 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: var(--fw-display); font-variation-settings: var(--wonk);
  font-size: 2.5rem; line-height: 1;
  letter-spacing: var(--ls-display); pointer-events: none; user-select: none;
  /* decorative and aria-hidden: a neutral figure, a step lighter than the body copy */
  color: color-mix(in srgb, var(--ink-3) 45%, transparent);
}
/* v5: the step icons are this section's one accent - indigo on the neutral paper */
.ds-stepic {
  display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 14px;
  background: var(--paper-2); color: var(--accent-ink); border: 1px solid var(--rule);
  margin-block-end: var(--s3);
}
.ds-stepic svg { inline-size: 24px; block-size: 24px; }
.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(--paper-2); border: 1px solid var(--rule);
  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; }
/* v5 colour balance: icons sit on the neutral paper, not on six pastel tints with a glow blob
   behind every card. Brand colour is kept for the hero, the Pro card and the final CTA. */
.ds-tile-ic {
  position: relative; z-index: 1;
  inline-size: 40px; block-size: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--rule);
  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(--paper-2); color: var(--ink-2); border: 1px solid var(--rule);
}
.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;
}

/* The limit that comes with the capability above it. A feature card that only lists what a thing
   can do is an advertisement; the platform constraints (one private reply per comment, the
   24-hour window, 1,000 characters on Instagram) are the first thing a real buyer asks about, so
   they sit on the card rather than in a footnote nobody reaches. Set below the body copy in size
   and colour - --ink-3 is 6.18:1 on --card in light and 6.79 in dark, so "quieter" never means
   "unreadable" - and separated by the same hairline every other divider on the page uses. */
.ds-limit {
  position: relative; z-index: 1;
  margin-block-start: var(--s4); padding-block-start: var(--s3);
  border-block-start: 1px solid var(--rule);
  font-size: .8125rem; line-height: 1.6; color: var(--ink-3);
}
/* v5: the limit sits behind a small "Limits" disclosure pinned to the card's foot, so the cards
   in a row end on one line; the full sentence stays in the DOM (and in search) when closed. */
.ds-limit-d {
  position: relative; z-index: 1; margin-block-start: auto; padding-block-start: var(--s4);
}
.ds-limit-d > summary {
  display: inline-flex; align-items: center; gap: 6px; min-block-size: 32px; cursor: pointer; list-style: none;
  font-size: .8125rem; font-weight: 600; color: var(--ink-3);
}
.ds-limit-d > summary::-webkit-details-marker { display: none; }
.ds-limit-d > summary::after {
  content: ""; inline-size: 6px; block-size: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); margin-block-start: -3px; transition: transform var(--t-fast, .15s) ease;
}
.ds-limit-d[open] > summary::after { transform: rotate(225deg); margin-block-start: 3px; }
.ds-limit-d > summary:hover { color: var(--ink); }
.ds-limit-d > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.ds-limit-d > .ds-limit { margin-block-start: var(--s2); }
/* the body copy is clamped to three lines so a row of cards reads as one height */
.ds-tile > p:not(.ds-limit) {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}

/* ============================================================
   9 · analytics - sticky split (§8.7)
   ============================================================ */
.ds-split { display: grid; grid-template-columns: minmax(0, 1fr); 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: minmax(0, 1fr); gap: var(--s3); margin-block-start: var(--s4); }
@media (min-width: 600px) { .ds-dash-tiles { grid-template-columns: repeat(3, 1fr); } }
.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: var(--fw-display);
  font-variation-settings: var(--wonk); font-size: 40px;
  line-height: 1.1; letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums lining-nums;
}
/* A figure is dir="ltr" so "34%" never reorders - but `start` of an LTR block is the left, which
   left these numbers hanging on the far side of a Hebrew card from their own labels. */
[dir="rtl"] .ds-dash-num, [dir="rtl"] .ds-numeral[dir="ltr"] { text-align: right; }

.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; z-index: 0; inset-inline: 0; inset-block-end: 0; block-size: 1px; background: var(--chart-grid); }
.ds-grid-mid { inset-block-end: 50%; }
/* the bars are positioned too, so the gridlines (absolute) paint behind them, not across them */
.ds-bar { position: relative; z-index: 1; 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; }
/* the figures are <bdi> (never reordered), and the two number columns line up on their end edge
   in either direction, under their own headings */
.ds-dash-table :is(th, td):not(:first-child) { text-align: end; }
.ds-dash-table bdi { unicode-bidi: isolate; }
/* a phone shows two campaign rows, so the illustration stays shorter than the copy beside it */
.ds-dash-table tbody tr:last-child { display: none; }
@media (min-width: 600px) { .ds-dash-table tbody tr:last-child { display: table-row; } }
.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, three columns (§8.8)
   ============================================================ */
.ds-plans-wrap { position: relative; max-inline-size: var(--max); margin-inline: auto; padding-inline: var(--gutter-safe); }
/* Phone: the three cards stack, the recommended one first. A carousel here hid two of three. */
.ds-plans { display: flex; flex-direction: column; gap: 22px; padding-block: 18px 6px; }
.ds-plans > .ds-plan-hi { order: -1; }
/* 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; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin-block-start: var(--s2); }
.ds-plan-price b {
  font-family: var(--font-display); font-weight: var(--fw-display); font-variation-settings: var(--wonk);
  font-size: clamp(2.75rem, 3vw, 3.25rem); line-height: 1.05; letter-spacing: var(--ls-display);
}
.ds-per { font-size: .875rem; color: var(--ink-3); }
/* Stacked on a phone, so no floor. From 600px the columns sit side by side and two lines of
   description in either language keep all three ✓ lists on one baseline. */
.ds-plan-desc { font-size: .875rem; color: var(--ink-3); min-block-size: 0; }
.ds-plan-list { display: flex; flex-direction: column; gap: 9px; margin-block: var(--s3) var(--s4); flex: 1 1 auto; }
@media (min-width: 600px) {
  .ds-plan-desc { min-block-size: 3.4em; }
  .ds-plan-list { margin-block: var(--s4) var(--s5); }
}
/* Pro: one price ($49); the founding offer is a small note beside the button, not a second number */
.ds-plan-founding {
  margin-block: calc(-1 * var(--s2)) var(--s3); padding: 7px 10px; border-radius: var(--r);
  background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--ink-2);
  font-size: .8125rem; line-height: 1.45;
}
.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: var(--ink-3);
  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. */
/* v5: the popular plan carries the brand sweep as a 3px rail along its top edge, over a faint
   indigo wash; the rest of the card stays on the neutral surface */
.ds-plan-hi {
  background:
    var(--sweep) top / 100% 3px no-repeat,
    linear-gradient(color-mix(in srgb, var(--accent) 5%, var(--card)), var(--card) 70%);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--rule));
  box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--accent) 45%, transparent);
}
/* 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-accent);
  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 three buttons are one geometry - Pro differs by fill and nothing else; the outlines stay
   neutral like every other secondary button. */
.ds-plans .ds-ghost:hover { background: var(--paper-2); }

/* ============================================================
   10b · where this differs (§8.9)
   Six cards. Each states what this product does, then closes with the pattern it departs from,
   under a hairline and in --ink-3 - the claim reads first and the comparison second, because the
   other order would make the section about somebody else's product. No competitor is named on
   the page, so nothing here needs a hue that reads as a logo; the six brand hues cycle instead.
   A plain grid rather than a rail: this is prose to be read, not a shelf to be browsed, and a
   rail would hide four of the six cards on a phone.
   ============================================================ */
.ds-why-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.ds-why { padding: var(--s5); display: flex; flex-direction: column; }
.ds-why h3 { position: relative; z-index: 1; font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.ds-why > p { position: relative; z-index: 1; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); margin-block-start: var(--s2); }
/* Two class names deep so it outranks `.ds-why > p` above, which would otherwise repaint it. */
.ds-why > p.ds-why-usual {
  margin-block-start: var(--s4); padding-block-start: var(--s3);
  border-block-start: 1px solid var(--rule);
  font-size: .8125rem; line-height: 1.6; color: var(--ink-3);
}
@media (min-width: 600px) { .ds-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ds-why-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   11 · the shared rail primitive (§10.0)
   ============================================================ */
.rail {
  display: flex; gap: 20px;
  overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  /* the first card starts on the same line as the section heading above it (.ds-wrap's inner
     edge), at any width: the gutter on a phone, the centred measure's edge on a desktop */
  --rail-edge: max(var(--gutter-safe), calc((100% - var(--max)) / 2 + var(--gutter-safe)));
  scroll-padding-inline: var(--rail-edge);
  padding-block: 26px 22px;
  padding-inline: var(--rail-edge);
  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: start; }

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

/* §10.1: swipe is the affordance on a phone (the edge fade and the progress thumb say there is
   more); the arrows join from 600px. */
.ds-arrows { display: none; gap: 8px; flex: 0 0 auto; }
@media (min-width: 600px) { .ds-arrows { display: flex; } }
.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);
}
@media (pointer: coarse) { .rail-arrow { inline-size: var(--tap); block-size: var(--tap); } }
.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(--bg-page);
  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); }
/* one row on a phone (§10.2): two counter-scrolling rows on a 360px screen is noise */
.ds-mq-back { display: none; }
@media (min-width: 600px) { .ds-mq-back { display: block; } }
/* 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);
  display: flex; flex-direction: column; padding: 0;
}
.ds-scen-top {
  display: flex; align-items: center; gap: 9px; padding: 16px var(--s4);
  background: var(--paper-2); color: var(--ink-2); border-block-end: 1px solid var(--rule);
  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: var(--fw-display); letter-spacing: var(--ls-display); 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: var(--fw-display); font-variation-settings: var(--wonk-tight);
  font-size: 1.375rem; line-height: 1.5; letter-spacing: var(--ls-display-tight); 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; }
@media (pointer: coarse) { .ds-quote-src a { display: inline-flex; align-items: center; min-block-size: var(--tap); } }

/* ============================================================
   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: var(--fw-display); letter-spacing: var(--ls-display-tight); 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 {
  /* physical `left` on purpose: centring is direction-free, but translate(-50%) is physical, so
     the logical inset-inline-start put the bar 12px off centre in Hebrew (a "-|" not a "+"). */
  content: ""; position: absolute; left: 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 - v5: one gradient-bordered band (§8.11)
   The dark inverted slab is gone. The closing call to action is a card on the page surface with
   the brand sweep as its 2px border and the aurora as a soft halo behind it, so it follows the
   theme like everything else. The button is the same near-black trial CTA as the hero.
   ============================================================ */
.ds-final {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(56px, 9vw, 112px);
  padding-inline: var(--gutter-safe);
  text-align: center;
}
.ds-final .wash { inset: 18% 8% auto; block-size: 70%; opacity: .55; }
.ds-final .ds-final-in {
  display: flex; flex-direction: column; align-items: center; gap: var(--s5);
  max-inline-size: calc(var(--max) - 2 * var(--gutter)); margin-inline: auto;
  padding: clamp(40px, 7vw, 80px) clamp(20px, 5vw, 64px);
  border: 2px solid transparent; border-radius: 24px;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--sweep) border-box;
  box-shadow: var(--sh-3);
}
/* §11.6 rule 3: on a phone the mark is 150px and carries no glow - a blur that small reads as a
   printing error. The larger mark arrives at 600px. */
.ds-final-mark { display: block; inline-size: 150px; block-size: auto; }
@media (min-width: 600px) { .ds-final-mark { inline-size: 190px; } }
.ds-final .ds-display-2 { color: var(--ink); max-inline-size: 20ch; }
.ds-final .ds-cta-row { justify-content: center; margin-block-start: 0; }
.ds-final .ds-btn-lg { min-block-size: 52px; padding-block: 0; border-radius: 12px; }
.ds-final-note { font-size: .875rem; color: var(--ink-3); }

/* ============================================================
   16 · about + footer (§8.12)
   ============================================================ */
.ds-about { background: var(--bg-band); border-block-end: 0; }
.ds-about-h { font-family: var(--font-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display-tight); 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-about.ds-sec { padding-block: clamp(40px, 5vw, 64px); }

/* Secondary detail (permission scopes, the extras list, the pricing fine print, the about
   paragraph) folds behind a quiet disclosure: still in the HTML for search and reviewers, but a
   phone visitor scrolls past one line instead of a wall. */
.ds-more { margin-block-start: var(--s6); max-inline-size: 78ch; }
.ds-more > summary {
  display: inline-flex; align-items: center; gap: 10px; min-block-size: var(--tap);
  cursor: pointer; list-style: none;
  font-size: .9375rem; font-weight: 600; color: var(--ink-2);
}
.ds-more > summary::-webkit-details-marker { display: none; }
.ds-more > summary::after {
  content: ""; flex: 0 0 auto; inline-size: 7px; block-size: 7px; margin-block-start: -4px;
  border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;   /* physical: a down chevron in both directions */
  transform: rotate(45deg);
}
.ds-more[open] > summary::after { transform: rotate(225deg); margin-block-start: 4px; }
.ds-more > summary:hover { color: var(--ink); }
.ds-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.ds-more > .ds-note { margin-block-start: var(--s3); }
.ds-more > .ds-footnote { margin-block-start: var(--s3); }
.ds-about-more { margin-block-start: var(--s2); max-inline-size: none; }
.ds-about-more > summary { min-block-size: 0; color: var(--ink); }
.ds-about-more > summary::after { inline-size: 10px; block-size: 10px; }

.ds-foot { background: var(--bg-band); border-block-start: 1px solid var(--rule); padding-block: var(--s8) var(--s5); }
/* Phone: the brand on its own row, then the four link columns two by two (one column of 28 links
   was a 1,300px scroll). 600px: four across under the brand. 900px: brand + four in one row. */
.ds-foot-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.ds-foot-brand { grid-column: 1 / -1; }
@media (min-width: 600px) { .ds-foot-in { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.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; min-inline-size: 0; }
.ds-foot-col h2 { color: var(--ink); margin-block-end: 2px; }
.ds-foot-col a { position: relative; font-size: .875rem; color: var(--ink-3); max-inline-size: 100%; overflow-wrap: anywhere; }
@media (pointer: coarse) {
  .ds-foot-col { gap: 0; }
  .ds-foot-col a { display: inline-flex; align-items: center; min-block-size: var(--tap); min-inline-size: var(--tap); }
  .ds-foot-col a::after { inset-block-end: 10px; }
}
.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(--bg-page); 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: var(--fw-display); font-variation-settings: var(--wonk);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.15; letter-spacing: var(--ls-display);
}
.ds-legal-card h2 {
  font-family: var(--font-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display-tight); 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; }
/* the /data-deletion status lookup: a code field and a button, wrapping onto two lines on a phone */
.ds-legal-form label { flex: 1 1 100%; font-weight: 600; font-size: .9375rem; }
.ds-legal-form input {
  flex: 1 1 14rem; min-inline-size: 0; padding: 10px 14px; font: inherit; font-size: var(--fs-input);
  color: var(--ink); background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r-sm);
}
.ds-legal-form button {
  flex: 0 0 auto; padding: 11px 20px; font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1;
  color: var(--paper); background: var(--ink); border: 0; border-radius: var(--r-pill); cursor: pointer;
}
.ds-legal-form :is(input, button):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 44px hit areas for the inner pages' small link rows, on a touch screen only (§5). A row that sits
   alone (crumbs) grows its hit area with padding and gives the same back as negative margin, so
   nothing moves; rows that stack get real height. */
@media (pointer: coarse) {
  .ds-legal-back { display: inline-flex; align-items: center; min-block-size: var(--tap); }
  .ds-legal-links { row-gap: 0; }
  .ds-legal-links a { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--tap); min-inline-size: var(--tap); }
  .ds-legal-form :is(input, button) { min-block-size: var(--tap); }
  .ds-crumbs a { display: inline-block; padding: 11px 4px; margin: -11px -4px; }
  .ds-docs .ds-docs-toc a { padding-block: 11px; }
  .ds-docs .ds-docs-toc summary { padding-block: 10px; }
}
.ds-legal-foot { border-block-start: 1px solid var(--rule); background: var(--bg-band); padding-block: var(--s5); font-size: .78125rem; color: var(--ink-3); }

/* ============================================================
   17b · the agent section, the Hebrew bar, and the pricing tail
   ============================================================ */
.ds-agent-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); align-items: center; }
.ds-agent-list { display: flex; flex-direction: column; gap: var(--s3); margin-block: var(--s5); }
.ds-agent-list li { position: relative; padding-inline-start: 24px; }
.ds-agent-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em;
  inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--sweep-3);
}
.ds-agent-list b { display: block; font-weight: 600; }
.ds-agent-list span { display: block; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; }

/* The phone-sized chat. Its height is fixed by its content alone (no images, no async text), so
   nothing in it can shift the layout after first paint. */
.ds-wa {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-xl);
  box-shadow: var(--sh-2); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3);
  max-inline-size: 440px; margin-inline: auto;
}
.ds-wa-head { display: flex; align-items: center; gap: var(--s3); padding-block-end: var(--s3); border-block-end: 1px solid var(--rule); }
.ds-wa-head b { display: block; font-size: .9375rem; line-height: 1.3; }
.ds-wa-head i { display: block; font-style: normal; font-size: .8125rem; color: var(--ink-3); }
.ds-wa-msg {
  max-inline-size: 88%; padding: 10px 14px; border-radius: 16px; font-size: .9375rem; line-height: 1.5;
  background: var(--bubble-in); color: var(--bubble-in-ink); border-end-start-radius: 6px;
}
.ds-wa-me {
  align-self: flex-end; background: var(--bubble-out); color: var(--bubble-out-ink);
  border-end-start-radius: 16px; border-end-end-radius: 6px;
}
.ds-wa-tool {
  align-self: center; font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3);
  border: 1px dashed var(--rule-2); border-radius: var(--r-pill); padding: 3px 10px;
}
.ds-agent-art .ds-dash-note { text-align: center; margin-block-start: var(--s3); }

/* A slim strip directly under the fixed nav. It sits in room the page makes for it (landing.js
   sets html.ds-has-langbar, which pushes the body down by the strip's height) and scrolls away with
   the page, so it never lies on top of the hero, a pricing card or anything else. */
.ds-langbar {
  --langbar-h: 48px;
  position: absolute; z-index: 50; inset-inline: 0;
  inset-block-start: calc(var(--safe-top) + 60px);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  block-size: var(--langbar-h); padding-inline: var(--gutter-safe);
  background: var(--paper-2); border-block-end: 1px solid var(--rule);
  font-size: .875rem; font-weight: 600;
}
@media (min-width: 900px) { .ds-langbar { inset-block-start: calc(var(--safe-top) + 64px); } }
.ds-langbar[hidden] { display: none; }
/* the open phone menu sheet is the whole screen; the bar must not sit on its links */
html.ds-locked .ds-langbar { display: none; }
html.ds-has-langbar body.ds { padding-block-start: 48px; }
.ds-langbar a { display: inline-flex; align-items: center; min-block-size: var(--tap); color: var(--accent-ink); padding-inline: 8px; min-inline-size: 0; }
/* the label is Hebrew ("לגרסה בעברית ←"), so it runs right to left and its arrow lands at its own end */
#ds-langbar-link { direction: rtl; unicode-bidi: isolate; }
.ds-langbar-x { flex: 0 0 auto; inline-size: 44px; block-size: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); }
.ds-langbar-x:hover { background: var(--paper-3); color: var(--ink); }

a.ds-icon-btn { text-decoration: none; }

/* ---------- the language menu: a globe button and a small opaque menu ----------
   Labels are in the page's own language. Opens on :hover/:focus-within only while the page has no
   JavaScript; once landing.js runs it owns the menu through .is-open (like the mega-menu). */
/* .ds-lang's position (static on a phone, relative from 900px) is set with the menu, below. */
/* The SAME control as the dashboard (shell.css .lang-pill): a quiet pill holding a thin
   monochrome globe, the current language's name on the same baseline, and a small chevron. On a
   phone it folds to the globe plus a Latin code ("EN" / "HE") inside the pill - never a badge. */
/* Design round 3: ONE crafted globe, the same as the dashboard (shell.css .globe-btn) - a round
   36px icon button holding a duotone globe (a soft accent disc, accent strokes, curved latitudes).
   No text on the button at all: the names live in the menu, written in the page's own language,
   so the control never reads as a text chip and an English page shows no other language. */
/* Design round 4: the owner rejected the purple duotone ball. Now a plain OUTLINE globe (Lucide
   geometry, 1.6 stroke, no fill) in the same grey ink as the theme button beside it; hover is the
   same soft neutral background every nav icon uses - never accent. Desktop shows
   [globe] English ▾ (the name in the page's own language); phones keep the bare round icon. */
.ds-lang-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  inline-size: 36px; block-size: 36px; padding: 0; border-radius: 50%;
  border: 0; background: transparent; color: var(--ink-2);
  line-height: 1; white-space: nowrap;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.ds-lang-btn:hover, .ds-lang.is-open .ds-lang-btn { background: var(--paper-3); color: var(--ink); box-shadow: none; }
.ds-lang-btn:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.ds-lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.ds-lang-btn .ds-globe { flex: none; color: inherit; }
.ds-lang-name, .ds-lang-chev, .ds-lang-tag { display: none; }
@media (pointer: coarse) {
  .ds-lang-btn { inline-size: var(--tap); block-size: var(--tap); }
}
@media (min-width: 1200px) {
  .ds-lang-btn { inline-size: auto; padding-block: 0; padding-inline: 9px 10px; border-radius: var(--r-pill); font-size: .8125rem; font-weight: 600; }
  .ds-lang-btn .ds-lang-name, .ds-lang-btn .ds-lang-chev { display: inline-block; }
  .ds-lang-btn .ds-lang-chev { color: var(--ink-3); transition: transform 140ms var(--ease); }
  .ds-lang.is-open .ds-lang-chev { transform: rotate(180deg); }
}
.ds-lang-menu:focus { outline: none; }
.ds-lang-menu {
  position: absolute; z-index: 80; inset-block-start: calc(100% + 10px); inset-inline-end: 0;
  min-inline-size: 188px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-sm);
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
  transition: opacity 140ms var(--ease), transform 140ms var(--ease), visibility 0s linear 140ms;
}
html:not(.js) .ds-lang:hover .ds-lang-menu,
html:not(.js) .ds-lang:focus-within .ds-lang-menu,
.ds-lang.is-open .ds-lang-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s;
}
/* rows match the dashboard's .lang-opt: the name, then a check on the current one */
.ds-lang-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-block-size: 40px; padding: 8px 12px; border-radius: 9px;
  color: var(--ink); font-size: .875rem; font-weight: 500; line-height: 1.3; text-decoration: none;
}
.ds-lang-opt:hover { background: var(--paper-2); color: var(--ink); }
.ds-lang-opt:focus-visible { background: var(--paper-2); outline: none; box-shadow: inset 0 0 0 2px var(--accent-line); }
.ds-lang-opt > span { flex: 1 1 auto; }
.ds-lang-check { flex: 0 0 auto; visibility: hidden; color: var(--accent-ink); }
.ds-lang-opt[aria-current="true"] { color: var(--accent-ink); font-weight: 600; }
.ds-lang-opt[aria-current="true"] .ds-lang-check { visibility: visible; }
/* Phone: the menu hangs from the nav pill's end edge (the pill is the positioned box), so it can
   never run off the screen. From 900px it hangs from the globe itself. */
.ds-lang { position: static; }
.ds-lang-menu { inset-inline-end: 8px; inset-block-start: calc(100% + 8px); }
@media (pointer: coarse) { .ds-lang-opt { min-block-size: var(--tap); } }
/* inside the open phone sheet (§3b) the two choices sit inline, as one segmented control */
.ds-nav.is-open .ds-lang .ds-lang-btn { display: none; }
.ds-nav.is-open .ds-lang .ds-lang-menu {
  position: static; flex-direction: row; min-inline-size: 0; padding: 4px;
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  background: var(--paper-2); border-radius: var(--r-pill); box-shadow: none;
}
.ds-nav.is-open .ds-lang .ds-lang-opt { flex: 1 1 0; justify-content: center; block-size: var(--tap); border-radius: var(--r-pill); }
.ds-nav.is-open .ds-lang .ds-lang-opt > span { flex: 0 0 auto; }
.ds-nav.is-open .ds-lang .ds-lang-opt[aria-current="true"] { background: var(--card); box-shadow: var(--sh-1); }
.ds-nav.is-open .ds-lang .ds-lang-check { display: none; }
@media (min-width: 900px) {
  .ds-lang { position: relative; }
  .ds-lang-menu { inset-inline-end: 0; inset-block-start: calc(100% + 10px); }
}
@media (prefers-reduced-motion: reduce) {
  .ds-lang-menu, .ds-lang-btn, .ds-lang-chev { transition: none; }
}

.ds-plans-more { margin-block-start: var(--s5); font-size: .9375rem; color: var(--ink-2); text-align: center; }
.ds-plans-more a { font-weight: 600; color: var(--accent-ink); white-space: nowrap; }
.ds-mega-rail .ds-mini-link + .ds-mini-link { margin-block-start: var(--s1); }

/* ============================================================
   18 · responsive - mobile first (docs/MOBILE_FIRST.md)
   Everything above is the phone. These are the only layout breakpoints on the site, and every
   one is min-width: 600px (large phone / small tablet), 900px (tablet / small desktop),
   1200px (desktop). There is no max-width query in this file.
   ============================================================ */

/* ---------- 3b · the phone nav sheet ----------
   Only reachable below 900px: the burger is hidden from 900px and landing.js closes an open sheet
   when the window crosses 900px, so none of this can reach a desktop. */
.ds-nav.is-open {
  position: fixed; inset: 0; inline-size: 100%; margin: 0;
  border-radius: 0; border: 0; box-shadow: none;
  background: var(--bg-page); -webkit-backdrop-filter: none; backdrop-filter: none;
  overflow-y: auto; overscroll-behavior: contain;
}
.ds-nav.is-open .ds-nav-in {
  flex-direction: column; align-items: stretch; block-size: auto; min-block-size: 100%;
  padding-block: calc(18px + var(--safe-top)) 0;
  padding-inline: var(--gutter-safe);
  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); border-radius: 0; }
.ds-nav.is-open .ds-menu-link::after { display: none; }
/* What a phone visitor wants first leads: Pricing, AI agents, Docs. Product is an accordion under
   them, closed until tapped (landing.js already owns its .is-open + aria-expanded). */
.ds-nav.is-open .ds-menu-pricing { order: -1; }
.ds-nav.is-open .ds-mega-wrap { order: 1; }
.ds-nav.is-open .ds-menu-btn { display: flex; inline-size: 100%; justify-content: space-between; text-align: start; }
.ds-nav.is-open .ds-mega-wrap.is-open .ds-caret { transform: rotate(180deg); }
.ds-nav.is-open .ds-mega-wrap:not(.is-open) .ds-mega { display: none; }
.ds-nav.is-open .ds-mega-wrap.is-open .ds-mega { padding-block: var(--s2) var(--s3); border-block-end: 1px solid var(--rule); }
.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: minmax(0, 1fr); gap: var(--s4); }
.ds-nav.is-open .ds-mega-rail { display: none; }
.ds-nav.is-open .ds-mega-row { padding-block: 12px; }
/* the actions join the sheet's column; Log in + the CTA become a bar pinned to the bottom */
.ds-nav.is-open .ds-nav-act { display: contents; }
.ds-nav.is-open .ds-nav-cta {
  order: 99; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3);
  position: sticky; inset-block-end: 0; margin-block-start: auto;
  margin-inline: calc(-1 * var(--gutter-safe));
  padding-block: 12px calc(12px + var(--safe-bottom)); padding-inline: var(--gutter-safe);
  background: var(--bg-page); border-block-start: 1px solid var(--rule);
}
.ds-nav.is-open .ds-nav-act .ds-quiet,
.ds-nav.is-open .ds-nav-act .ds-btn { display: flex; justify-content: center; align-items: center; min-block-size: var(--tap); min-inline-size: 0; }
.ds-nav.is-open .ds-nav-act .ds-quiet { border: 1.5px solid var(--rule-2); border-radius: var(--r-pill); color: var(--ink); font-weight: 600; background: var(--card); }
.ds-nav.is-open .ds-cta-long { display: inline; overflow: hidden; text-overflow: ellipsis; }
.ds-nav.is-open .ds-cta-short { display: none; }
.ds-nav.is-open .ds-icon-btn { justify-content: center; block-size: var(--tap); background: var(--paper-2); }
.ds-nav.is-open .ds-burger {
  position: absolute; inset-block-start: calc(22px + var(--safe-top));
  inset-inline-end: var(--gutter-safe);
}

/* ---------- 600px · large phone / small tablet ---------- */
@media (min-width: 600px) {
  .ds-proof-in { grid-template-columns: repeat(3, minmax(0, 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); }

  /* §10.4 - the features rail stops being a rail: its rail properties are unset and it is a
     plain 12-column 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; padding-inline: var(--gutter-safe);
  }
  .ds-feat-grid > * { flex: initial; scroll-snap-align: none; }
  .ds-feat-grid > .ds-tile { inline-size: auto; }
  .ds-feat-grid { align-items: stretch; }        /* equal-height rows */
  .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 from here up: the three stacked plan cards become a single slab divided
     into three 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, the last column, rounds its own two end corners instead (below). */
  .ds-plans {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
    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 > .ds-plan {
    inline-size: auto; background: none; border: 0; border-radius: 0;
    border-inline-start: 1px solid var(--rule);
  }
  .ds-plans > .ds-plan-hi { order: 0; }
  .ds-plans > .ds-plan:first-child { border-inline-start: 0; }
  /* Pro is the last column now, so its tint meets the slab's rounded end corners: it rounds
     them itself (1px inside the slab's border) instead of the slab clipping, which would also
     clip the badge that hangs over the top edge. */
  .ds-plans > .ds-plan-hi {
    background:
      var(--sweep) top / 100% 3px no-repeat,
      linear-gradient(color-mix(in srgb, var(--accent) 6%, var(--card)), var(--card) 75%);
    box-shadow: none;
    border-start-start-radius: 2px; border-end-start-radius: 0;
    border-start-end-radius: calc(var(--r-xl) - 1px); border-end-end-radius: calc(var(--r-xl) - 1px);
  }
  /* the fine print lines up with the words inside the columns, not with the slab's outer edge */
  #pricing .ds-footnote, #pricing .ds-more { padding-inline-start: var(--s5); }
  #pricing .ds-more .ds-footnote { padding-inline-start: 0; }
}

/* ---------- 900px · tablet / small desktop ---------- */
@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); }
  .ds-foot-brand { grid-column: auto; }

  .ds-agent-in { grid-template-columns: 6fr 5fr; }
  /* 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; }
}

/* ============================================================
   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); }
.ds-ghost { border-color: var(--outline); }
.rail-arrow { border-color: var(--outline); }

/* ============================================================
   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 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;
}
/* Heebo runs optically a touch smaller than Inter at the same nominal size, so Hebrew display
   type keeps its ~6% size bump, at the same display weight as the Latin. */
[lang="he"] .ds-display-1 {
  font-size: clamp(2.9rem, 1.45rem + 6vw, 5.7rem);
  font-weight: var(--fw-display);
}
[lang="he"] .ds-display-2 {
  font-size: clamp(2.125rem, 1.38rem + 2.75vw, 3.05rem);
  font-weight: var(--fw-display);
}
[lang="he"] .ds-quote, [lang="he"] .ds-q summary, [lang="he"] .ds-about-h { font-weight: var(--fw-display); }
[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.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); }
  }

  /* §7.5 sheen */
  .btn-cta { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
  .btn-cta::after { animation: sheen 7s 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 - from 600px only: a phone's wash is stiller and cheaper (see .wash) */
  @media (min-width: 600px) {
    .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; }
}


@keyframes sheen { 0% { transform: translateX(-120%); } 32%, 100% { transform: translateX(120%); } }
@keyframes sheen-rtl { 0% { transform: translateX(120%); } 32%, 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(-100%); }   /* one slide: 40px on a phone, 34px from 600px */
  63%, 91%  { transform: translateY(-200%); }
  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); }
}

/* ---------- the hero headline ----------
   Balanced, so no lone "agent." sits on its own line. The floors are what a 320px phone can hold:
   2.25rem keeps "Instagram" and the Hebrew headline's longest word on one line inside a 284px
   column. v5 tops out at 4.25rem (68px), the mockup's desktop size, tracked tight. */
.ds-hero .ds-display-1 {
  text-wrap: balance; font-size: clamp(2.25rem, 1.3rem + 4.6vw, 4.25rem);
  line-height: 1.04; letter-spacing: -.022em; font-weight: 660; margin-block: var(--s5) var(--s4);
}
[lang="he"] .ds-hero .ds-display-1 { font-size: clamp(2.375rem, 1.4rem + 4.9vw, 4.5rem); letter-spacing: 0; line-height: 1.1; }
.ds-hero .ds-lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.58; max-inline-size: 620px; margin-block-start: 0; }

/* ============================================================
   Inner marketing pages - loaded after landing.css in the site bundle, and only there.
   Same tokens, same type scale, same cards; this file only adds what a long page needs that the
   landing page does not: a page hero, breadcrumbs, prose, tables, the docs layout, plan cards.
   ============================================================ */

.ds-page-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: calc(var(--nav-bottom) + clamp(48px, 7vw, 88px)) clamp(40px, 5vw, 64px); border-block-end: 1px solid var(--rule); }
.ds-page-hero .wash { opacity: .55; }
.ds-page-hero .ds-display-2 { max-inline-size: 22ch; margin-block-start: var(--s2); }
.ds-page-hero .ds-cta-row { margin-block-start: var(--s6); }
.ds-page-meta { margin-block-start: var(--s4); font-size: .8125rem; color: var(--ink-3); }

.ds-crumbs { margin-block-end: var(--s5); font-size: .8125rem; color: var(--ink-3); }
.ds-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-crumbs li + li::before { content: "/"; margin-inline-end: 6px; color: var(--rule-2); }
.ds-crumbs a:hover { color: var(--ink); text-decoration: underline; }

.ds-page-body { padding-block: clamp(40px, 6vw, 80px); }
.ds-measure > .ds-block { max-inline-size: var(--max-txt); }
.ds-measure > .ds-block:has(.ds-cards, .ds-table-wrap, .ds-pcards) { max-inline-size: none; }
.ds-block + .ds-block { margin-block-start: clamp(44px, 5vw, 72px); }
.ds-block h2 {
  font-family: var(--font-display); font-weight: var(--fw-display); font-variation-settings: var(--wonk-tight);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); line-height: 1.15; letter-spacing: var(--ls-display-tight);
  margin-block-end: var(--s4); text-wrap: balance;
}
.ds-block > p, .ds-block > .ds-ticks, .ds-block > .ds-numbered { color: var(--ink-2); line-height: 1.75; max-inline-size: 68ch; }
.ds-block > p + p { margin-block-start: var(--s3); }
.ds-block > * + .ds-cards, .ds-block > * + .ds-table-wrap, .ds-block > * + .ds-pcards,
.ds-block > * + .ds-chatlog, .ds-block > * + .ds-code, .ds-block > * + .ds-note, .ds-block > * + .ds-terms { margin-block-start: var(--s5); }
.ds-block a:not(.ds-card):not(.ds-btn):not(.ds-ghost) { color: var(--accent-ink); font-weight: 500; }
.ds-block a:not(.ds-card):not(.ds-btn):not(.ds-ghost):hover { text-decoration: underline; }
.ds-block code, .ds-prose code { font-family: var(--font-mono); font-size: .875em; background: var(--paper-3); border-radius: 6px; padding: .1em .35em; }
.ds-block .ds-code code, .ds-prose pre code { background: none; padding: 0; font-size: inherit; }

.ds-ticks { display: flex; flex-direction: column; gap: 9px; margin-block-start: var(--s3); }
.ds-ticks li { position: relative; padding-inline-start: 24px; }
.ds-ticks li::before {
  content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .7em;
  inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent);
}
.ds-numbered { counter-reset: ds-n; display: flex; flex-direction: column; gap: 12px; margin-block-start: var(--s3); }
.ds-numbered li { counter-increment: ds-n; position: relative; padding-inline-start: 40px; }
.ds-numbered li::before {
  content: counter(ds-n); position: absolute; inset-inline-start: 0; inset-block-start: .05em;
  inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tint-violet); color: var(--on-violet); font-size: .8125rem; font-weight: 700;
}

.ds-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ds-xcard { display: block; padding: var(--s5); }
.ds-xcard::before { background: var(--hue, var(--rule)); }
.ds-xcard h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.ds-xcard p { margin-block-start: var(--s2); font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
a.ds-xcard { transition: border-color 160ms var(--ease, ease), box-shadow 160ms var(--ease, ease); }
a.ds-xcard:hover { border-color: var(--rule-2); box-shadow: var(--sh-2); }
.ds-xcard-go::after { content: "\2192"; display: block; margin-block-start: var(--s3); font-weight: 600; color: var(--accent-ink); }
[dir="rtl"] .ds-xcard-go::after { content: "\2190"; }

.ds-table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); }
.ds-table-wrap table { min-inline-size: 560px; font-size: .9375rem; }
.ds-table-wrap caption { text-align: start; padding: 12px 16px 0; font-size: .8125rem; color: var(--ink-3); }
.ds-table-wrap th, .ds-table-wrap td { text-align: start; vertical-align: top; padding: 12px 16px; border-block-end: 1px solid var(--rule); line-height: 1.5; }
.ds-table-wrap thead th { font-size: .8125rem; font-weight: 600; color: var(--ink-3); background: var(--paper-2); }
.ds-table-wrap tbody tr:last-child > * { border-block-end: 0; }
.ds-table-wrap tbody th { font-weight: 600; }
.ds-tools tbody th code { background: none; padding: 0; color: var(--accent-ink); }

.ds-chatlog { display: flex; flex-direction: column; gap: 10px; max-inline-size: 560px; padding: var(--s5); background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.ds-chatlog p { max-inline-size: 90%; padding: 10px 14px; border-radius: 16px; line-height: 1.55; font-size: .9375rem; background: var(--bubble-in); color: var(--bubble-in-ink); }
.ds-chatlog b { display: block; font-size: .75rem; font-weight: 600; color: var(--ink-3); margin-block-end: 2px; }
.ds-chatlog-you { align-self: flex-end; background: var(--bubble-out) !important; color: var(--bubble-out-ink) !important; }

.ds-terms { display: grid; gap: 0; border-block-start: 1px solid var(--rule); }
.ds-terms > div { padding-block: var(--s4); border-block-end: 1px solid var(--rule); scroll-margin-block-start: calc(var(--nav-bottom) + 24px); }
.ds-terms dt { font-weight: 600; font-size: 1.0625rem; }
.ds-terms dd { margin: 4px 0 0; color: var(--ink-2); line-height: 1.7; }

/* plan cards: one column on a phone, then a five-up row that scrolls inside itself rather than
   squeezing five prices into a laptop's width */
.ds-pcards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); align-items: stretch; }
.ds-pcard { padding: var(--s5) var(--s4); display: flex; flex-direction: column; overflow: visible; }
.ds-pcard-hi {
  background: var(--sweep) top / 100% 3px no-repeat, linear-gradient(color-mix(in srgb, var(--accent) 6%, var(--card)), var(--card) 70%);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--rule));
  box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--accent) 45%, transparent);
}
.ds-pcard .ds-plan-badge { inset-block-start: 0; }
.ds-pcard-annual { font-size: .8125rem; color: var(--ink-3); margin-block-start: 2px; }
.ds-pcard .ds-plan-desc { margin-block-start: var(--s3); min-block-size: 0; }
.ds-pcard .ds-ghost:hover { background: var(--paper-2); }
/* a phone reads the recommended plan first */
.ds-pcards > .ds-pcard-hi { order: -1; }
@media (min-width: 600px) { .ds-pcards > .ds-pcard-hi { order: 0; } }
.ds-pcards + .ds-note { margin-block-start: var(--s5); }

/* The comparison table: the row labels are a sticky first column with a real minimum width, so
   on a phone they read as phrases (not one word per line) while the five plan columns scroll
   beside them. A label's parenthetical drops to its own quieter line, so "(MCP and API)" never
   splits across a line break in either direction. */
.ds-ptable td { white-space: nowrap; }
.ds-ptable th[scope="row"], .ds-ptable thead th:first-child {
  position: sticky; inset-inline-start: 0; z-index: 1;
  min-inline-size: 9.25rem; inline-size: 9.25rem;
  border-inline-end: 1px solid var(--rule);
}
.ds-ptable th[scope="row"] { background: var(--card); }
.ds-ptable .ds-nowrap { white-space: nowrap; }
.ds-ptable-sub { display: block; font-size: .8125rem; font-weight: 400; color: var(--ink-3); margin-block-start: 2px; }
.ds-table-wrap .ds-ptable th, .ds-table-wrap .ds-ptable td { padding: 10px 12px; }
@media (min-width: 600px) {
  .ds-ptable th[scope="row"], .ds-ptable thead th:first-child { min-inline-size: 10.5rem; inline-size: auto; }
  .ds-table-wrap .ds-ptable th, .ds-table-wrap .ds-ptable td { padding: 12px 16px; }
}

/* docs: a sticky contents rail beside the article on a wide screen, a collapsed list above it on a phone */
.ds-docs { display: grid; gap: var(--s6); padding-block: clamp(32px, 5vw, 64px); }
.ds-docs-toc summary { cursor: pointer; font-weight: 600; font-size: .875rem; padding-block: 8px; }
.ds-docs-toc ol { display: flex; flex-direction: column; gap: 2px; font-size: .875rem; }
.ds-docs-toc ol ol { padding-inline-start: 14px; margin-block: 2px 6px; font-size: .8125rem; }
.ds-docs-toc a { display: block; padding: 4px 8px; border-radius: 8px; color: var(--ink-2); }
.ds-docs-toc a:hover { background: var(--paper-2); color: var(--ink); }
.ds-docs > .ds-prose { min-inline-size: 0; }
@media (min-width: 980px) {
  .ds-docs { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
  .ds-docs-toc { position: sticky; inset-block-start: calc(var(--nav-bottom) + 16px); max-block-size: calc(100vh - var(--nav-bottom) - 32px); overflow-y: auto; padding-inline-end: var(--s3); }
  .ds-docs-toc summary { pointer-events: none; list-style: none; }
  .ds-docs-toc summary::-webkit-details-marker { display: none; }
}

/* rendered Markdown (docs, changelog) */
.ds-prose { color: var(--ink-2); line-height: 1.75; max-inline-size: 78ch; }
.ds-prose h2, .ds-prose h3, .ds-prose h4 { color: var(--ink); scroll-margin-block-start: calc(var(--nav-bottom) + 24px); }
.ds-prose h2 { font-family: var(--font-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display-tight); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; margin-block: var(--s8) var(--s4); padding-block-start: var(--s5); border-block-start: 1px solid var(--rule); }
.ds-prose h2:first-child { margin-block-start: 0; border: 0; padding: 0; }
.ds-prose h3 { font-size: 1.1875rem; font-weight: 600; margin-block: var(--s6) var(--s3); }
.ds-prose h4 { font-size: 1rem; font-weight: 600; margin-block: var(--s5) var(--s2); }
.ds-prose p, .ds-prose ul, .ds-prose ol, .ds-prose pre, .ds-prose .ds-table-wrap, .ds-prose blockquote { margin-block-start: var(--s3); }
.ds-prose ul, .ds-prose ol { padding-inline-start: 1.3em; list-style: revert; display: flex; flex-direction: column; gap: 4px; }
.ds-prose li ul { margin-block-start: 4px; }
.ds-prose a { color: var(--accent-ink); font-weight: 500; }
.ds-prose a:hover { text-decoration: underline; }
.ds-prose strong { color: var(--ink); }
.ds-prose blockquote { border-inline-start: 3px solid var(--accent-line); padding-inline-start: var(--s4); }
.ds-prose hr { border: 0; border-block-start: 1px solid var(--rule); margin-block: var(--s6); }
.ds-prose pre { overflow-x: auto; }
.ds-prose .ds-table-wrap table { font-size: .875rem; }

.ds-page-faq .ds-faq { margin-block-start: var(--s3); }
.ds-inner .ds-final { margin-block-start: 0; }
.ds-inner .ds-final .ds-cta-row { justify-content: center; }

/* ---------- /pricing: the plan cards start inside the first screen ----------
   The pricing hero is a header, not a splash: tighter padding at every width, and from 900px the
   two buttons sit beside the heading instead of under it, so the price row shows at 1440x900. */
.ds-page-hero:has(+ .ds-page-body .ds-pcards) { padding-block: calc(var(--nav-bottom) + clamp(24px, 3vw, 36px)) clamp(24px, 3vw, 32px); }
.ds-page-hero:has(+ .ds-page-body .ds-pcards) .ds-crumbs { margin-block-end: var(--s3); }
.ds-page-hero:has(+ .ds-page-body .ds-pcards) .ds-cta-row { margin-block-start: var(--s4); }
.ds-page-hero:has(+ .ds-page-body .ds-pcards) + .ds-page-body { padding-block-start: clamp(28px, 3vw, 40px); }
@media (min-width: 900px) {
  .ds-page-hero:has(+ .ds-page-body .ds-pcards) > .ds-wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 4vw, 64px); align-items: end;
  }
  .ds-page-hero:has(+ .ds-page-body .ds-pcards) > .ds-wrap > * { grid-column: 1; }
  .ds-page-hero:has(+ .ds-page-body .ds-pcards) > .ds-wrap > .ds-cta-row {
    grid-column: 2; grid-row: 1 / span 4; align-self: end; margin-block-start: 0; flex-wrap: nowrap;
  }
  .ds-page-hero:has(+ .ds-page-body .ds-pcards) .ds-lead { max-inline-size: 62ch; }
}