/* 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 (brand 2.1) is two flat SVGs of the same drawing: .ds-wm-l (purple d, ink letters)
   for light backgrounds and .ds-wm-d (lilac d, white letters) for dark ones. Only block-size is
   set; inline-size stays auto so the file's own aspect ratio decides the width. */
.ds-wordmark { display: block; block-size: 28px; inline-size: auto; }
.ds-wordmark-box { position: relative; display: inline-flex; }
.ds-wm-d { display: none; }
[data-theme="dark"] .ds-wm-l { display: none; }
[data-theme="dark"] .ds-wm-d { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-wm-l { display: none; }
  :root:not([data-theme="light"]) .ds-wm-d { display: block; }
}

/* 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; }
/* The panel hangs 14px below the button. Without something under that gap the pointer leaves the
   wrap on its way down, mouseleave fires, and the menu shuts before the cursor reaches a row. This
   invisible strip fills the gap (plus the 1px border) across the panel's whole width; it belongs to
   the panel, so it is part of the wrap's hover area, and it takes the pointer only while the panel
   does (pointer-events is inherited: none while closed). */
.ds-mega::before {
  content: ""; position: absolute; inset-inline: -1px; inset-block-end: 100%; block-size: 16px;
}

.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: 30px; }
.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::before { display: none; }
.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); }
  /* opening: visible at once (rows focusable on the very next Tab), only the fade animates;
     closing keeps the 180ms visibility delay so the panel fades out instead of blinking */
  .ds-mega-wrap.is-open .ds-mega { transition: opacity 180ms var(--ease), visibility 0s; }
  .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; }
}

/* ============================================================
   dmswift · the Apple layer (redesign, 30.10)
   Loaded after landing.css (and, in the marketing bundle, after site.css). It owns:
     1. its own tokens, every one prefixed --a- so nothing in tokens.css / landing.css changes
        meaning for the dashboard or the legal pages;
     2. the shared site chrome (nav, buttons, footer), restyled for every marketing page;
     3. the home page (main.ap-home) and the pricing page (main .ap-page);
     4. motion: every hidden starting state is scoped under html.js-motion, which apple.js only
        sets when IntersectionObserver exists, the visitor has not asked for reduced motion and
        has not paused animation (#ds-motion). With no JS the page paints in its final state.
   Mobile first: the base is the phone; min-width 600 / 900 / 1200 add to it (docs/MOBILE_FIRST.md).
   ============================================================ */

:root {
  --a-bg: #ffffff; --a-bg-2: #f5f5f7; --a-bg-3: #ebebf0;
  --a-surface: #ffffff; --a-surface-2: #f5f5f7; --a-surface-3: #e8e8ed;
  --a-text: #1d1d1f; --a-text-2: #67676c; --a-text-3: #6b6b70;
  --a-line: rgba(0, 0, 0, .08); --a-line-2: rgba(0, 0, 0, .14);
  --a-cta-bg: #5243e8; /* the closing panel keeps the deep fill in both schemes, so white text stays above 4.5:1 */
  --a-accent: #5243e8; --a-accent-hover: #5e50f0; --a-accent-text: #4335d6; --a-accent-soft: rgba(82, 67, 232, .09);
  --a-brand-tint: #f4f2ff; --a-brand-line: rgba(82, 67, 232, .22);
  --a-band: #0f0e1c; --a-band-2: #18172b; --a-band-3: #26253d;
  --a-card-line: rgba(0, 0, 0, .06); --a-chart-2: #d0398c;
  --a-green: #18703c; --a-green-fill: #34c759; --a-green-soft: rgba(52, 199, 89, .14);
  --a-orange: #a34a00; --a-orange-soft: rgba(255, 149, 0, .15);
  --a-nav-bg: rgba(255, 255, 255, .92);
  --a-glass: rgba(255, 255, 255, .78); --a-glass-line: rgba(255, 255, 255, .7);
  --a-bubble-them: #e9e9eb; --a-bubble-them-text: #1d1d1f;
  --a-phone-bg: #ffffff; --a-phone-text: #1d1d1f; --a-phone-muted: #737373;
  --a-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 4px rgba(0, 0, 0, .04);
  --a-shadow-md: 0 4px 14px rgba(0, 0, 0, .07);
  --a-shadow-lg: 0 10px 30px rgba(0, 0, 0, .08), 0 22px 48px rgba(0, 0, 0, .08);
  --a-ease: cubic-bezier(.4, 0, .2, 1); --a-ease-out: cubic-bezier(.16, 1, .3, 1); --a-spring: cubic-bezier(.34, 1.45, .64, 1);
  --a-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Heebo", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --a-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --a-gutter: 20px;
  /* the site chrome follows the new canvas */
  --bg-page: #ffffff; --bg-band: #f5f5f7;
  --nav-bottom: 53px;
}
[data-theme="dark"] {
  --a-bg: #000000; --a-bg-2: #0c0c0f; --a-bg-3: #1c1c1e;
  --a-surface: #1c1c1e; --a-surface-2: #232325; --a-surface-3: #2c2c2e;
  --a-text: #f5f5f7; --a-text-2: #a1a1a6; --a-text-3: #98989d;
  --a-line: rgba(255, 255, 255, .09); --a-line-2: rgba(255, 255, 255, .16);
  --a-accent: #6a5cff; --a-accent-hover: #7b6fff; --a-accent-text: #b0a7ff; --a-accent-soft: rgba(124, 112, 255, .18);
  --a-brand-tint: #15132a; --a-brand-line: rgba(150, 140, 255, .28);
  --a-band: #0b0a15; --a-band-2: #141325; --a-band-3: #201f36;
  --a-card-line: rgba(255, 255, 255, .07); --a-chart-2: #ff6fb5;
  --a-green: #30d158; --a-green-fill: #30d158; --a-green-soft: rgba(48, 209, 88, .16);
  --a-orange: #ff9f0a; --a-orange-soft: rgba(255, 159, 10, .16);
  --a-nav-bg: rgba(22, 22, 23, .92);
  --a-glass: rgba(40, 40, 44, .72); --a-glass-line: rgba(255, 255, 255, .1);
  --a-bubble-them: #262628; --a-bubble-them-text: #f5f5f7;
  --a-phone-bg: #000000; --a-phone-text: #f5f5f5; --a-phone-muted: #a8a8a8;
  --a-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --a-shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  --a-shadow-lg: 0 10px 30px rgba(0, 0, 0, .5), 0 22px 48px rgba(0, 0, 0, .4);
  --bg-page: #000000; --bg-band: #0c0c0f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --a-bg: #000000; --a-bg-2: #0c0c0f; --a-bg-3: #1c1c1e;
    --a-surface: #1c1c1e; --a-surface-2: #232325; --a-surface-3: #2c2c2e;
    --a-text: #f5f5f7; --a-text-2: #a1a1a6; --a-text-3: #98989d;
    --a-line: rgba(255, 255, 255, .09); --a-line-2: rgba(255, 255, 255, .16);
    --a-accent: #6a5cff; --a-accent-hover: #7b6fff; --a-accent-text: #b0a7ff; --a-accent-soft: rgba(124, 112, 255, .18);
    --a-brand-tint: #15132a; --a-brand-line: rgba(150, 140, 255, .28);
    --a-band: #0b0a15; --a-band-2: #141325; --a-band-3: #201f36;
    --a-card-line: rgba(255, 255, 255, .07); --a-chart-2: #ff6fb5;
    --a-green: #30d158; --a-green-fill: #30d158; --a-green-soft: rgba(48, 209, 88, .16);
    --a-orange: #ff9f0a; --a-orange-soft: rgba(255, 159, 10, .16);
    --a-nav-bg: rgba(22, 22, 23, .92);
    --a-glass: rgba(40, 40, 44, .72); --a-glass-line: rgba(255, 255, 255, .1);
    --a-bubble-them: #262628; --a-bubble-them-text: #f5f5f7;
    --a-phone-bg: #000000; --a-phone-text: #f5f5f5; --a-phone-muted: #a8a8a8;
    --a-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --a-shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
    --a-shadow-lg: 0 10px 30px rgba(0, 0, 0, .5), 0 22px 48px rgba(0, 0, 0, .4);
    --bg-page: #000000; --bg-band: #0c0c0f;
  }
}
@media (min-width: 600px) { :root { --a-gutter: 24px; } }
@media (min-width: 900px) { :root { --a-gutter: 32px; } }
/* One container for the whole site: nav, every section, the about row, the footer and the content
   pages share the same 1320px measure and the same gutter. tokens.css stays untouched (the
   dashboard reads it); this file is only loaded by the marketing pages and the app host's home. */
:root { --gutter: var(--a-gutter); --max: 1320px; }

/* ============================================================
   1 · the shared chrome, every marketing page
   ============================================================ */
body.ds { font-family: var(--a-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01"; }
:lang(he) body.ds, body.ds:lang(he) { font-family: "Heebo", var(--a-font); }
::selection { background: color-mix(in srgb, var(--a-accent) 22%, transparent); }

/* nav: the full-width translucent bar, 52px + a hairline */
.ds-nav { background: var(--a-nav-bg); border-block-end: 1px solid var(--a-line); -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); }
.ds-nav.is-stuck { box-shadow: none; border-block-end-color: var(--a-line-2); }
.ds-nav-in { block-size: 52px; max-inline-size: var(--max); }
@media (min-width: 900px) { .ds-nav-in { block-size: 52px; } }
.ds-wordmark { block-size: 28px; }
.ds-menu-link { font-size: .875rem; font-weight: 500; color: var(--a-text); opacity: .82; padding-block: 6px; }
.ds-menu-link:hover, .ds-menu-link:focus-visible, .ds-mega-wrap.is-open .ds-menu-btn { opacity: 1; color: var(--a-text); }
.ds-menu-link::after { display: none; }
.ds-chip-new { background: var(--a-accent-soft); color: var(--a-accent-text); }
.ds-quiet { color: var(--a-text); opacity: .85; font-size: .875rem; }
.ds-mega { border-radius: 22px; border-color: var(--a-card-line); box-shadow: var(--a-shadow-lg); }
.ds-mega-row { border-radius: 12px; }
.ds-mini-link { color: var(--a-accent-text); }

/* buttons: the primary is the brand indigo pill everywhere on the site */
.ds-btn, .ds-ghost { border-radius: 999px; }
.btn-cta {
  background: var(--a-accent); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 1px 2px rgba(20, 10, 80, .18);
  transition: background .2s var(--a-ease), transform .35s var(--a-spring), box-shadow .25s var(--a-ease);
}
.btn-cta:hover { background: var(--a-accent-hover); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 22px color-mix(in srgb, var(--a-accent) 32%, transparent); }
.btn-cta:active { background: var(--a-accent); transform: scale(.96); transition-duration: .08s; }
.btn-cta::after { display: none; }
.btn-cta:focus-visible, .btn-cta:hover:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 3px; }
/* phones and tablets: every header control is a 44px target; from 900px the desktop pill is 36px */
.ds-nav-act .ds-btn { min-block-size: 44px; padding: 0 16px; font-size: .875rem; }
.ds-brand, #di-lang, #di-burger { min-block-size: 44px; }
#di-lang, #di-burger { min-inline-size: 44px; }
@media (min-width: 900px) { .ds-nav-act .ds-btn { min-block-size: 36px; } }
@media (min-width: 900px) and (pointer: fine) { .ds-brand, #di-lang { min-block-size: 0; } #di-lang { min-inline-size: 0; } }
.ds-ghost { background: var(--a-accent-soft); color: var(--a-accent-text); border: 0; }
.ds-ghost:hover { background: color-mix(in srgb, var(--a-accent) 16%, transparent); }

/* footer */
.ds-foot { background: var(--a-bg-2); border-block-start: 1px solid var(--a-line); }
.ds-foot-col h2 { font-size: .8125rem; letter-spacing: 0; text-transform: none; color: var(--a-text); }
.ds-foot-col a { font-size: .8125rem; color: var(--a-text-2); }
.ds-foot-col a::after { display: none; }
.ds-foot-col a:hover { color: var(--a-text); text-decoration: underline; }
.ds-foot-brand p { color: var(--a-text-2); font-size: .8125rem; }
.ds-foot-brand .ds-wordmark { block-size: 30px; }
/* the rule spans the text column, not the padded box */
.ds-foot-bottom { border-block-start: 0; position: relative; }
.ds-foot-bottom::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--gutter-safe); border-block-start: 1px solid var(--a-line); }
.ds-foot-bottom p { font-size: .75rem; color: var(--a-text-3); }
/* the display switches (dark theme, pause animations): quiet pills, 44px tall, pressed = on */
.ds-foot-tools { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.ds-foot-tool { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding-inline: 14px; border-radius: 999px; border: 1px solid var(--a-line-2); background: transparent; color: var(--a-text-2); font-size: .8125rem; font-weight: 500; cursor: pointer; transition: background .2s var(--a-ease), color .2s var(--a-ease); }
.ds-foot-tool:hover { background: var(--a-surface); color: var(--a-text); }
.ds-foot-tool[aria-pressed="true"] { color: var(--a-text); border-color: var(--a-brand-line); background: var(--a-accent-soft); }
.ds-foot-tool:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.ds-foot-tool svg { flex: none; }
/* text that is for screen readers only */
.ap-vh { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ============================================================
   2 · shared parts of the two redesigned pages
   ============================================================ */
.ap-home, .ap-page { background: var(--a-bg); color: var(--a-text); font-size: 17px; line-height: 1.47; letter-spacing: -.012em; }
.ap-home:lang(he), .ap-page:lang(he) { letter-spacing: 0; line-height: 1.6; }
.ap-home { padding-block-start: calc(var(--nav-bottom) + var(--safe-top, 0px)); }
.ap-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.ap-ico { inline-size: 20px; block-size: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ap-ico-sm { inline-size: 16px; block-size: 16px; }
.ap-ico-xs { inline-size: 12px; block-size: 12px; }
[dir="rtl"] .ap-flip { transform: scaleX(-1); }
.ap-push { margin-inline-start: auto; }
.ap-min0 { min-inline-size: 0; }
.ap-muted { color: var(--a-text-2); }

.ap-wrap { inline-size: 100%; max-inline-size: var(--max); margin-inline: auto; padding-inline: var(--a-gutter); }

.ap-sec { padding-block: 72px; }
@media (min-width: 900px) { .ap-sec { padding-block: 104px; } }
.ap-tint { background: var(--a-bg-2); }

.ap-idx { font-family: var(--a-mono); font-size: 13px; letter-spacing: .02em; color: var(--a-accent-text); font-weight: 600; display: flex; gap: 10px; align-items: center; margin-block-end: 18px; }
.ap-idx::after { content: ""; block-size: 1px; inline-size: 48px; background: var(--a-brand-line); }
.ap-idx:lang(he) { font-family: inherit; font-size: 14px; }
.ap-h2 { font-size: clamp(2.1rem, 4.4vw + .6rem, 3.6rem); font-weight: 700; line-height: 1.06; letter-spacing: -.038em; text-wrap: balance; }
.ap-h2:lang(he) { letter-spacing: 0; line-height: 1.12; }
.ap-lede { font-size: clamp(1.12rem, .6vw + 1rem, 1.4rem); line-height: 1.42; color: var(--a-text-2); letter-spacing: -.018em; text-wrap: pretty; }
.ap-lede:lang(he) { letter-spacing: 0; line-height: 1.55; }
.ap-lede a { color: var(--a-accent-text); font-weight: 500; }
.ap-lede a:hover { text-decoration: underline; }
.ap-sec-ed { display: grid; gap: 18px; margin-block-end: 40px; }
.ap-sec-ed .ap-idx { margin-block-end: 0; }
.ap-sec-ed .ap-lede { max-inline-size: 36rem; }
@media (min-width: 900px) {
  .ap-sec-ed { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: 48px; margin-block-end: 56px; }
  .ap-sec-ed .ap-idx { grid-column: 1 / -1; margin-block-end: -28px; }
}
.ap-sec-more { margin-block-start: 28px; }

.ap-btn, .ap-btn-lg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 44px; padding-inline: 22px; border-radius: 999px; font-size: 17px; font-weight: 500; white-space: nowrap; transition: background .2s var(--a-ease), transform .35s var(--a-spring), box-shadow .25s var(--a-ease); }
.ap-btn-lg { min-block-size: 52px; padding-inline: 28px; font-size: 17px; }
.ap-btn:active, .ap-btn-lg:active { transform: scale(.96); transition-duration: .08s; }
.ap-btn-light { background: #fff; color: #1d1b4d; font-weight: 600; }
.ap-btn-light:hover { background: #ecebff; }
.ap-btn-w { background: #fff; color: #2a1fb0; font-weight: 600; }
.ap-btn-w:hover { background: #f1efff; }
.ap-btn-sec { background: var(--a-accent-soft); color: var(--a-accent-text); }
.ap-btn-sec:hover { background: color-mix(in srgb, var(--a-accent) 16%, transparent); }
.ap-btn-block { display: flex; inline-size: 100%; }
.ap-link-arrow { display: inline-flex; align-items: center; gap: 4px; min-block-size: 44px; font-size: 17px; color: var(--a-accent-text); font-weight: 500; }
.ap-link-arrow .ap-ico { transition: transform .25s var(--a-spring); }
.ap-link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.ap-link-arrow:hover .ap-ico { transform: translateX(3px); }
[dir="rtl"] .ap-link-arrow:hover .ap-ico { transform: scaleX(-1) translateX(3px); }
.ap-cta-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-block-start: 28px; }

.ap-chip { display: inline-flex; align-items: center; gap: 6px; min-block-size: 26px; padding-inline: 10px; border-radius: 999px; background: var(--a-surface-2); font-size: 12.5px; font-weight: 500; color: var(--a-text-2); white-space: nowrap; letter-spacing: 0; }
.ap-chip-accent { background: var(--a-accent-soft); color: var(--a-accent-text); }
.ap-chip-green { background: var(--a-green-soft); color: var(--a-green); }
.ap-chip-orange { background: var(--a-orange-soft); color: var(--a-orange); }
.ap-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--a-green-fill); display: inline-block; flex: none; }
.ap-ava { inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; flex: none; letter-spacing: 0; }
.ap-ava-md { inline-size: 36px; block-size: 36px; }
.ap-ava-lg { inline-size: 40px; block-size: 40px; font-size: 13px; }
.ap-ava-xl { inline-size: 56px; block-size: 56px; font-size: 18px; margin-block-end: 10px; }
.ap-mini-ava { inline-size: 24px; block-size: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff; letter-spacing: 0; }
.ap-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--a-accent); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.ap-bubble { display: inline-block; max-inline-size: 100%; padding: 8px 12px; border-radius: 18px; background: var(--a-bubble-them); color: var(--a-bubble-them-text); font-size: 13.5px; line-height: 1.38; overflow-wrap: anywhere; }
.ap-bubble u { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 2px; color: var(--a-accent-text); }
.ap-bubble-me { background: var(--a-accent); color: #fff; font-size: 14px; }

/* the segmented control; the thumb is drawn by apple.js (.has-thumb) */
.ap-seg { display: inline-flex; position: relative; padding: 3px; border-radius: 999px; background: var(--a-surface-3); gap: 2px; max-inline-size: 100%; }
.ap-seg button { position: relative; z-index: 1; min-block-size: 38px; padding-inline: 16px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--a-text-2); transition: color .2s, background .25s var(--a-ease); white-space: nowrap; }
.ap-seg button[aria-pressed="true"] { background: var(--a-surface); color: var(--a-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04); }
[data-theme="dark"] .ap-seg button[aria-pressed="true"] { background: #55555c; }
.ap-seg.has-thumb::before { content: ""; position: absolute; z-index: 0; inset-block: 3px; left: 0; inline-size: var(--tw, 0); transform: translateX(var(--tx, 0)); border-radius: 999px; background: var(--a-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04); transition: transform .45s var(--a-spring), inline-size .45s var(--a-spring); }
.ap-seg.has-thumb.no-anim::before { transition: none; }
.ap-seg.has-thumb button[aria-pressed="true"] { background: transparent; box-shadow: none; }
[data-theme="dark"] .ap-seg.has-thumb::before { background: #55555c; }
.ap-mini-badge { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; background: var(--a-green-soft); color: var(--a-green); font-size: 12px; font-weight: 600; }

/* a part that only works with JS ships hidden; apple.js unhides it */
.ap-home [hidden], .ap-page [hidden] { display: none !important; }

/* ============================================================
   3 · HOME
   ============================================================ */

/* ---------- hero ----------
   The first screen, edge to edge, with the nav laid over it. It answers three questions in reading order:
   who it is for (the small line), what it does (the headline and one plain sentence on how), and
   what to press (one button, with the two facts that make pressing it safe). Beside it, one card
   shows the whole mechanism: a comment with the keyword arrives, dmswift answers with a DM that
   carries the link. With motion allowed the three parts of the card appear once in that order;
   the resting frame is the full card, which is also the reduced-motion and paused view. Only
   opacity and transforms move (CLS 0).
   A real photo of a business owner fills it (mirrored in Hebrew so the plain wall stays behind the
   copy); phones get the copy on the dark wall colour, the photo under it, and the card laid over
   the photo's lower part. The photo files come from tools/hero-photo.py; swapping the photo is that
   one command. The section slides up under the nav, which stays clear over it until the page
   scrolls (the nav rules after this block). */
.ap-hero { position: relative; margin-block-start: calc(-1 * (var(--nav-bottom) + var(--safe-top, 0px))); }
.ap-hx-panel {
  --hx-ink: #fff; --hx-ink-2: rgba(255, 255, 255, .84); --hx-ink-3: rgba(255, 255, 255, .72); --hx-acc: #c3bbff;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-block-size: 100vh; min-block-size: 100svh; padding-block-start: calc(var(--hx-nav, var(--nav-bottom)) + var(--safe-top, 0px));
  background: #1c1d19; color: var(--hx-ink);
}
.ap-hx-in { display: contents; }
.ap-hx-copy { order: 1; padding: 30px 22px 6px; }
.ap-hx-bg { order: 2; display: block; }
.ap-hx-bg img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover; object-position: 66% 40%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%); mask-image: linear-gradient(to bottom, transparent, #000 26%); }
.ap-hx-bg img:dir(rtl), .ap-hx:lang(he) .ap-hx-bg img { transform: scaleX(-1); }
.ap-hx-demo { order: 3; position: relative; z-index: 1; margin: -150px 14px 0; align-self: center; }
.ap-hx-on { order: 4; }

.ap-hx-for { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--hx-ink-2); }
.ap-hx-for::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--a-green-fill); box-shadow: 0 0 0 3px rgba(52, 199, 89, .25); }
.ap-hx .ap-h1 { margin-block-start: 12px; max-inline-size: 9em; font-size: clamp(2.5rem, 10.6vw, 3.4rem); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; color: var(--hx-ink); text-wrap: balance; }
.ap-hx .ap-h1:lang(he) { letter-spacing: -.01em; line-height: 1.06; }
.ap-hx-acc { color: var(--hx-acc); }
.ap-hx .ap-lede { margin-block-start: 14px; max-inline-size: 31rem; font-size: 17px; line-height: 1.45; letter-spacing: -.01em; color: var(--hx-ink-2); text-wrap: pretty; }
.ap-hx .ap-lede:lang(he) { letter-spacing: 0; line-height: 1.55; }
.ap-hx .ap-cta-row { margin-block-start: 22px; }
.ap-hx-go { flex: 1 1 100%; gap: 10px; }
.ap-hx-arr { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--a-ease); }
.ap-hx-go:hover .ap-hx-arr { transform: translateX(3px); }
.ap-hx-arr:dir(rtl), .ap-hx:lang(he) .ap-hx-arr { transform: scaleX(-1); }
.ap-hx-go:hover .ap-hx-arr:dir(rtl), .ap-hx:lang(he) .ap-hx-go:hover .ap-hx-arr { transform: scaleX(-1) translateX(3px); }
.ap-hx-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-block-start: 12px; font-size: 14px; line-height: 1.4; color: var(--hx-ink-3); }
.ap-hx-facts span { display: inline-flex; align-items: center; gap: 6px; }
.ap-hx-facts span::before { content: ""; inline-size: 13px; block-size: 13px; flex: none; background: currentColor;
  -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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.ap-hx-on { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 0; padding: 22px 22px 24px; list-style: none; font-size: 13px; font-weight: 500; color: var(--hx-ink-3); }
.ap-hx-on li { display: inline-flex; align-items: center; gap: 7px; }
.ap-hx-on svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the card: always the light (or, in dark mode, the dark) surface of a real app */
.ap-hx-demo {
  inline-size: min(calc(100% - 28px), 22rem); box-sizing: border-box; padding: 14px; border-radius: 20px;
  background: var(--a-surface); color: var(--a-text); box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 18px 44px rgba(0, 0, 0, .28);
  font-size: 14px; line-height: 1.35;
}
.ap-hx-demo p { margin: 0; }
.ap-hx-av { flex: none; inline-size: 36px; block-size: 36px; border-radius: 50%; overflow: hidden; background: var(--a-surface-3); }
.ap-hx-av img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ap-hx-av-s { inline-size: 22px; block-size: 22px; }
.ap-hx-demo picture { display: contents; }
.ap-hx-cm { display: flex; gap: 10px; align-items: flex-start; }
.ap-hx-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--a-text-2); }
.ap-hx-meta b { font-weight: 600; color: var(--a-text); }
.ap-hx-kw { display: inline-block; margin-block-start: 5px !important; padding: 5px 12px; border-radius: 14px; background: var(--a-accent-soft); color: var(--a-accent-text); font-weight: 700; letter-spacing: .02em; }
.ap-hx-auto { display: flex; align-items: center; gap: 8px; inline-size: fit-content; margin: 12px auto !important; padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--a-surface-2); font-size: 12.5px; font-weight: 600; color: var(--a-text-2); }
.ap-hx-auto:dir(rtl), .ap-hx:lang(he) .ap-hx-auto { padding: 5px 6px 5px 12px; }
.ap-hx-auto img { border-radius: 5px; }
.ap-hx-bub { margin-block-start: 8px !important; inline-size: fit-content; max-inline-size: 92%; padding: 9px 13px; border-radius: 18px; background: var(--a-bubble-them); color: var(--a-bubble-them-text); }
.ap-hx-lk { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 0 12px; max-inline-size: 92%; margin-block-start: 6px; padding: 8px; border: 1px solid var(--a-line); border-radius: 16px; }
.ap-hx-lk img { display: block; inline-size: 76px; block-size: 60px; object-fit: cover; border-radius: 10px; }
.ap-hx-lkt { min-inline-size: 0; }
.ap-hx-lkt b { display: block; font-size: 13.5px; font-weight: 600; }
.ap-hx-lkt small { display: block; font-size: 12px; color: var(--a-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-hx-btn { grid-column: 1 / -1; display: block; margin-block-start: 8px; padding: 8px; border-radius: 10px; background: var(--a-accent); color: #fff; text-align: center; font-size: 13.5px; font-weight: 600; }

@media (min-width: 600px) {
  .ap-hx-copy { padding: 44px 40px 8px; }
  .ap-hx .ap-h1 { font-size: clamp(3.2rem, 7vw, 4rem); }
  .ap-hx .ap-lede { font-size: 19px; }
  .ap-hx-go { flex: 0 0 auto; }
  .ap-hx-facts { justify-content: flex-start; }
  .ap-hx-bg img { aspect-ratio: 3 / 2; }
  .ap-hx-demo { margin-block-start: -190px; }
  .ap-hx-on { justify-content: flex-start; padding: 26px 40px 30px; }
}

@media (min-width: 900px) {
  /* the copy and the card line up with the nav and every section below (the 1320px measure) */
  .ap-hx-panel {
    --hx-pad: max(var(--a-gutter), calc((100% - var(--max)) / 2 + var(--a-gutter)));
    display: grid; grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); grid-template-rows: 1fr auto;
    min-block-size: max(640px, 100svh); padding-inline: var(--hx-pad);
  }
  .ap-hx-copy { grid-column: 1; grid-row: 1; align-self: center; padding: 48px 0 24px; }
  .ap-hx .ap-h1 { font-size: clamp(3.4rem, 3.4vw + 1.4rem, 5.6rem); max-inline-size: 8.5em; }
  .ap-hx .ap-lede { font-size: 20px; }
  .ap-hx-on { grid-column: 1; grid-row: 2; padding: 0 0 40px; }
  .ap-hx-demo { grid-column: 2; grid-row: 1 / 3; align-self: end; justify-self: end; margin: 0 0 clamp(36px, 6vh, 72px); }

  .ap-hx-bg { position: absolute; inset: 0; z-index: -1; }
  .ap-hx-bg img { block-size: 100%; aspect-ratio: auto; object-position: 50% 30%; -webkit-mask-image: none; mask-image: none; }
  .ap-hx-bg::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(20, 20, 17, .62) 0%, rgba(20, 20, 17, .38) 36%, rgba(20, 20, 17, 0) 56%),
                linear-gradient(to top, rgba(20, 20, 17, .45), rgba(20, 20, 17, 0) 30%); }
  .ap-hx-bg:dir(rtl)::after, .ap-hx:lang(he) .ap-hx-bg::after {
    background: linear-gradient(to left, rgba(20, 20, 17, .62) 0%, rgba(20, 20, 17, .38) 36%, rgba(20, 20, 17, 0) 56%),
                linear-gradient(to top, rgba(20, 20, 17, .45), rgba(20, 20, 17, 0) 30%); }
}

/* the nav over the hero: clear, with light words, until the page moves or a menu opens */
/* On the home page the bar is taller, so the logo and the button sit with air above and below them
   over the photo (76px desktop, 68px phone); it settles to 64 / 60 once the page moves. The hero's
   own top padding follows the taller bar (--hx-nav), so the copy never slides under it. */
body:has(.ap-hx) { --hx-nav: 68px; }
body:has(.ap-hx) .ds-nav-in { block-size: var(--hx-nav); }
body:has(.ap-hx) .ds-wordmark { block-size: 26px; }
@media (prefers-reduced-motion: no-preference) {
  :root:not(.no-motion) body:has(.ap-hx) :is(.ds-nav-in, .ds-wordmark) { transition: block-size .3s var(--a-ease); }
}
body:has(.ap-hx) .ds-nav.is-stuck:not(.is-open) .ds-nav-in { block-size: 60px; }
body:has(.ap-hx) .ds-nav.is-stuck .ds-wordmark { block-size: 24px; }
@media (min-width: 900px) {
  body:has(.ap-hx) { --hx-nav: 76px; }
  body:has(.ap-hx) .ds-wordmark { block-size: 30px; }
  body:has(.ap-hx) .ds-nav-act .ds-btn { min-block-size: 42px; padding-inline: 20px; font-size: .9375rem; }
  body:has(.ap-hx) .ds-nav.is-stuck:not(.is-open) .ds-nav-in { block-size: 64px; }
  body:has(.ap-hx) .ds-nav.is-stuck .ds-wordmark { block-size: 28px; }
  body:has(.ap-hx) .ds-nav.is-stuck .ds-nav-act .ds-btn { min-block-size: 38px; }
}
.ds-nav { transition: background-color .25s var(--a-ease), border-color .25s var(--a-ease); }
body:has(.ap-hx) .ds-nav:not(.is-stuck):not(.is-open):not(:has(.is-open)) {
  background: transparent; border-block-end-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body:has(.ap-hx) .ds-nav:not(.is-stuck):not(.is-open):not(:has(.is-open)) :is(.ds-menu-link, .ds-menu-btn, .ds-quiet, #di-lang, #di-burger) { color: #fff; opacity: 1; }
body:has(.ap-hx) .ds-nav:not(.is-stuck):not(.is-open):not(:has(.is-open)) .ds-chip-new { background: rgba(255, 255, 255, .16); color: #fff; }
body:has(.ap-hx) .ds-nav:not(.is-stuck):not(.is-open):not(:has(.is-open)) .ds-wm-l { display: none; }
body:has(.ap-hx) .ds-nav:not(.is-stuck):not(.is-open):not(:has(.is-open)) .ds-wm-d { display: block; }
body:has(.ap-hx) .ds-nav:not(.is-stuck):not(.is-open):not(:has(.is-open)) .ds-burger span { background: #fff; }

/* motion: the card's three parts, once, in the order they happen */
@media (prefers-reduced-motion: no-preference) {
  :root:not(.no-motion) .ap-hx[data-run] .ap-hx-cm { animation: ap-hx-up .5s var(--a-ease-out) .35s both; }
  :root:not(.no-motion) .ap-hx[data-run] .ap-hx-auto { animation: ap-hx-pop .45s var(--a-spring) 1.05s both; }
  :root:not(.no-motion) .ap-hx[data-run] .ap-hx-dm { animation: ap-hx-up .55s var(--a-ease-out) 1.55s both; }
}
@keyframes ap-hx-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes ap-hx-pop { from { opacity: 0; transform: scale(.9); } }

/* ---------- the three steps, right under the hero: all three in full ---------- */
.ap-steps3-sec { padding-block: 56px 20px; }
.ap-steps3 { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ap-steps3 li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: start; align-content: start; padding: 22px; border-radius: 22px; background: var(--a-surface-2); }
.ap-s3-n { grid-row: span 2; inline-size: 34px; block-size: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--a-accent); color: #fff; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ap-steps3 h3 { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; padding-block-start: 4px; }
.ap-steps3 h3:lang(he) { letter-spacing: 0; }
.ap-steps3 h3 b { color: var(--a-accent-text); font-weight: 600; }
.ap-steps3 p { font-size: 15.5px; line-height: 1.5; color: var(--a-text-2); text-wrap: pretty; }
@media (min-width: 900px) {
  .ap-steps3-sec { padding-block: 96px 28px; }
  .ap-steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .ap-steps3 li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 28px; }
  .ap-s3-n { grid-row: auto; margin-block-end: 10px; }
  .ap-steps3 h3 { font-size: 21px; padding: 0; }
  .ap-steps3 p { font-size: 16px; }
}

/* ---------- "Run dmswift from your AI agent": the differentiator, one line and a link ---------- */
.ap-agm-sec { padding-block: 0 56px; }
.ap-agm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; align-items: start; padding: 22px; border-radius: 22px; background: var(--a-brand-tint); border: 1px solid var(--a-brand-line); }
.ap-agm-ico { inline-size: 44px; block-size: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--a-accent); color: #fff; }
.ap-agm h2 { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.ap-agm h2:lang(he) { letter-spacing: 0; }
.ap-agm p { margin-block-start: 4px; font-size: 15.5px; line-height: 1.5; color: var(--a-text-2); text-wrap: pretty; }
.ap-agm .ap-link-arrow { grid-column: 1 / -1; font-weight: 600; }
@media (min-width: 900px) {
  .ap-agm-sec { padding-block: 0 72px; }
  .ap-agm { grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; padding: 28px 32px; align-items: center; }
  .ap-agm h2 { font-size: 24px; }
  .ap-agm p { font-size: 16.5px; }
  .ap-agm .ap-link-arrow { grid-column: auto; white-space: nowrap; }
}

.ap-ig-grad { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); color: #fff; }
.ap-fb-blue { background: #1877f2; color: #fff; }
/* the "Hebrew version" strip under the nav takes the hero's tint instead of a grey band */
/* The "Hebrew version" suggestion floats as a pill at the bottom of the window instead of pushing
   the page down 48px: landing.js turns it on after the first paint, so in the flow it was a layout
   shift (and it cut the hero on a 720px window). The body keeps room at its end for it. */
.ds-langbar { position: fixed; z-index: 50; inset-block: auto calc(16px + env(safe-area-inset-bottom, 0px)); inset-inline: 16px; margin-inline: auto; max-inline-size: 360px; block-size: 52px; padding-inline: 12px 4px; border: 1px solid var(--a-brand-line); border-radius: 999px; background: var(--a-surface); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }
html.ds-has-langbar body.ds { padding-block: 0 84px; }

/* ---------- 01 the story ---------- */
.ap-story-steps { display: grid; gap: 44px; }
.ap-st { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
.ap-st-n { inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--a-accent-soft); color: var(--a-accent-text); font-variant-numeric: tabular-nums; }
.ap-st h3 { font-size: clamp(1.45rem, 1.4vw + 1rem, 2.1rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.ap-st h3:lang(he) { letter-spacing: 0; line-height: 1.2; }
.ap-st p { margin-block-start: 10px; color: var(--a-text-2); font-size: 17px; line-height: 1.5; max-inline-size: 30rem; }
.ap-scene-inline { margin-block-start: 20px; }
/* a phone gives the card the full width, not the width beside the step number */
.ap-st .ap-scene-inline { margin-inline-start: -48px; }
@media (min-width: 600px) { .ap-st .ap-scene-inline { margin-inline-start: 0; } }
.ap-story-stage { display: none; }
.ap-scene { border-radius: 26px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-md); padding: 16px; font-size: 14px; }
.ap-sc-head { display: flex; align-items: center; gap: 10px; padding-block-end: 12px; border-block-end: 1px solid var(--a-line); margin-block-end: 12px; }
.ap-thumb { inline-size: 40px; block-size: 40px; border-radius: 10px; overflow: hidden; flex: none; }
.ap-sc-head b { display: block; font-size: 14px; }
.ap-sc-head small { font-size: 12px; color: var(--a-text-2); }
.ap-cm { display: flex; gap: 10px; align-items: flex-start; padding-block: 8px; }
.ap-cm .ap-mini-ava { inline-size: 28px; block-size: 28px; font-size: 10.5px; }
.ap-cm .ap-tx { flex: 1; min-inline-size: 0; line-height: 1.4; }
.ap-cm .ap-tx b { font-weight: 600; }
.ap-tag-r { flex: none; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.ap-tag-ok { background: var(--a-green-soft); color: var(--a-green); }
.ap-tag-no { background: var(--a-surface-2); color: var(--a-text-3); }
.ap-cm.ap-reply { margin-inline-start: 38px; }
.ap-cm.ap-dim .ap-tx, .ap-cm.ap-dim .ap-tx b { color: var(--a-text-2); }
.ap-cm.ap-hit { background: var(--a-brand-tint); border-radius: 12px; padding: 8px; margin-inline: -8px; }
.ap-sc-dm { display: flex; flex-direction: column; gap: 8px; }
.ap-bub { max-inline-size: 86%; padding: 9px 13px; border-radius: 18px; line-height: 1.38; }
.ap-bub.ap-me { align-self: flex-end; background: var(--a-accent); color: #fff; border-end-end-radius: 6px; }
.ap-bub u { text-underline-offset: 2px; }
.ap-when { align-self: center; font-size: 11.5px; color: var(--a-text-3); }
.ap-when-ok { align-self: flex-end; display: inline-flex; gap: 5px; align-items: center; color: var(--a-green); font-weight: 600; }
.ap-sc-note { font-size: 12.5px; color: var(--a-text-2); border-block-start: 1px solid var(--a-line); padding-block-start: 10px; margin-block-start: 4px; }
.ap-lead-row { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--a-surface-2); }
.ap-lead-row b { display: block; }
.ap-lead-row small { display: block; color: var(--a-text-2); font-size: 12.5px; }
.ap-lead-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 12px; }
.ap-ai-draft { border: 1px dashed var(--a-brand-line); border-radius: 14px; padding: 12px; background: var(--a-brand-tint); line-height: 1.45; }
.ap-ai-draft .ap-k { color: var(--a-accent-text); text-transform: none; letter-spacing: 0; font-size: 12.5px; margin-block-end: 6px; }
@media (min-width: 900px) {
  .ap-story.is-sticky .ap-story-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; }
  .ap-story:not(.is-sticky) .ap-st > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 56px; align-items: start; }
  .ap-story:not(.is-sticky) .ap-st > div > :not(.ap-scene-inline) { grid-column: 1; }
  .ap-story:not(.is-sticky) .ap-scene-inline { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .ap-story.is-sticky .ap-story-steps { gap: 0; }
  /* each step is exactly as tall as the sticky panel, so the active step's text is centred on the
     panel from the first step to the last */
  .ap-story { --st-h: clamp(440px, 60vh, 540px); }
  .ap-story.is-sticky .ap-st { min-block-size: var(--st-h); align-content: center; opacity: .28; transition: opacity .5s var(--a-ease); }
  .ap-story.is-sticky .ap-st.is-on { opacity: 1; }
  .ap-story.is-sticky .ap-scene-inline { display: none; }
  .ap-story.is-sticky .ap-story-stage { display: block; position: relative; }
  .ap-stage-in { position: sticky; inset-block-start: calc(50vh - var(--st-h) / 2); block-size: var(--st-h); }
  .ap-stage-card { position: relative; block-size: 100%; border-radius: 32px; border: 1px solid var(--a-card-line); padding: 28px; overflow: hidden; background-color: var(--a-bg-2); background-image: radial-gradient(circle at 1px 1px, var(--a-line-2) 1px, transparent 0); background-size: 22px 22px; }
  .ap-stage-top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--a-text-2); font-weight: 600; }
  .ap-stage-rail { display: flex; gap: 6px; }
  .ap-stage-rail i { inline-size: 26px; block-size: 4px; border-radius: 2px; background: var(--a-surface-3); transition: background .4s, inline-size .5s var(--a-spring); }
  .ap-stage-rail i.is-on { background: var(--a-accent); inline-size: 44px; }
  .ap-stage-scenes { position: absolute; inset-inline: 28px; inset-block: 64px 78px; display: grid; align-items: center; }
  .ap-stage-scenes .ap-scene { grid-area: 1 / 1; box-shadow: var(--a-shadow-lg); opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .55s var(--a-ease-out), transform .7s var(--a-spring); pointer-events: none; }
  .ap-stage-scenes .ap-scene.is-on { opacity: 1; transform: none; }
  .ap-stage-cap { position: absolute; inset-inline: 28px; inset-block-end: 22px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--a-text-2); }
  .ap-stage-cap b { color: var(--a-text); font-weight: 600; }
  .ap-stage-cap .ap-ico { color: var(--a-accent-text); }
}

/* ---------- 02 the inbox mock ---------- */
.ap-mock { border-radius: 22px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: 0 30px 80px rgba(20, 16, 60, .14), 0 8px 24px rgba(20, 16, 60, .08); overflow: hidden; transform-origin: 50% 0; transform: scale(var(--ms, 1)); font-size: 13px; letter-spacing: -.005em; }
.ap-mock-bar { display: flex; align-items: center; gap: 8px; block-size: 40px; padding-inline: 14px; border-block-end: 1px solid var(--a-line); background: var(--a-bg-2); }
.ap-mock-bar i { inline-size: 11px; block-size: 11px; border-radius: 50%; background: var(--a-surface-3); }
.ap-mock-bar span { margin-inline: auto; font-size: 12px; color: var(--a-text-3); font-family: var(--a-mono); }
.ap-mock-body { display: grid; grid-template-columns: minmax(0, 1fr); min-block-size: 420px; }
.ap-mk-side, .ap-mk-list, .ap-mk-contact { display: none; }
.ap-mk-side { padding: 14px 10px; border-inline-end: 1px solid var(--a-line); background: var(--a-bg); }
.ap-mk-side > span { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-weight: 500; }
.ap-mk-side > span.is-on { background: var(--a-accent-soft); color: var(--a-accent-text); }
.ap-mk-side .ap-ico { inline-size: 16px; block-size: 16px; color: var(--a-text-2); }
.ap-mk-side .is-on .ap-ico { color: var(--a-accent-text); }
.ap-mk-side em { margin-inline-start: auto; font-style: normal; font-size: 11px; color: var(--a-text-3); font-weight: 600; }
.ap-mk-list { border-inline-end: 1px solid var(--a-line); padding: 8px; }
.ap-mk-row { display: flex; gap: 10px; padding: 10px; border-radius: 12px; }
.ap-mk-row.is-on { background: var(--a-accent-soft); }
.ap-mk-row .ap-ava { inline-size: 36px; block-size: 36px; }
.ap-mk-row .ap-b { flex: 1; min-inline-size: 0; }
.ap-mk-row .ap-t { display: flex; justify-content: space-between; gap: 6px; }
.ap-mk-row .ap-t b { font-weight: 600; }
.ap-mk-row .ap-t small { color: var(--a-text-3); font-size: 11px; flex: none; }
.ap-mk-row p { color: var(--a-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.ap-mk-thread { display: flex; flex-direction: column; min-inline-size: 0; }
.ap-hd { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-block-end: 1px solid var(--a-line); }
.ap-hd b { display: block; }
.ap-hd small { display: block; color: var(--a-text-2); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-mk-msgs { flex: 1; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; font-size: 13.5px; }
.ap-day { align-self: center; font-size: 11px; font-weight: 600; color: var(--a-text-3); padding: 2px 10px; border-radius: 999px; background: var(--a-surface-2); margin-block-end: 6px; }
.ap-inote { align-self: stretch; margin-block-start: 8px; padding: 8px 12px; border-radius: 12px; background: var(--a-orange-soft); color: var(--a-text); font-size: 12.5px; line-height: 1.4; }
.ap-inote b { color: var(--a-orange); font-weight: 600; margin-inline-end: 4px; }
.ap-mk-msgs .ap-b { max-inline-size: 80%; padding: 8px 12px; border-radius: 18px; line-height: 1.38; }
.ap-mk-msgs .ap-them { align-self: flex-start; background: var(--a-bubble-them); border-end-start-radius: 6px; }
.ap-mk-msgs .ap-bot { align-self: flex-end; background: var(--a-surface-2); border: 1px solid var(--a-line-2); border-end-end-radius: 6px; }
.ap-mk-msgs .ap-bot u { color: var(--a-accent-text); }
.ap-mk-msgs .ap-mt { font-size: 10.5px; color: var(--a-text-3); align-self: flex-end; display: flex; gap: 4px; align-items: center; }
.ap-mk-msgs .ap-them + .ap-mt { align-self: flex-start; }
.ap-mk-msgs .ap-mt .ap-ico { inline-size: 12px; block-size: 12px; }
.ap-mk-comp { border-block-start: 1px solid var(--a-line); padding: 10px 12px; display: grid; gap: 8px; justify-items: start; }
.ap-draft { inline-size: 100%; border-radius: 16px; border: 1px solid var(--a-line-2); padding: 10px 14px; font-size: 13px; }
.ap-caret { display: inline-block; inline-size: 1.5px; block-size: 15px; background: var(--a-accent); vertical-align: -3px; margin-inline-start: 1px; }
.ap-mk-contact { border-inline-start: 1px solid var(--a-line); padding: 16px; background: var(--a-bg); }
.ap-mk-name { display: block; font-size: 15px; }
.ap-mk-contact dl { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; }
.ap-mk-contact dt { color: var(--a-text-3); }
.ap-mk-contact dd { margin: 0; text-align: end; font-weight: 500; }
.ap-hist { margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px solid var(--a-line); display: grid; gap: 10px; }
.ap-hist div { display: flex; gap: 8px; align-items: flex-start; color: var(--a-text-2); font-size: 12.5px; }
.ap-hist i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--a-accent); margin-block-start: 5px; flex: none; }
@media (min-width: 600px) { .ap-mock-body { grid-template-columns: 240px minmax(0, 1fr); } .ap-mk-list { display: block; } }
@media (min-width: 1200px) { .ap-mock-body { grid-template-columns: 180px 260px minmax(0, 1fr) 240px; min-block-size: 440px; } .ap-mk-side, .ap-mk-contact { display: block; } }
.ap-notes { display: grid; gap: 22px; margin-block-start: 36px; counter-reset: apn; }
.ap-notes > div { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.ap-notes > div::before { counter-increment: apn; content: counter(apn); inline-size: 26px; block-size: 26px; border-radius: 50%; border: 1.5px solid var(--a-accent); color: var(--a-accent-text); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.ap-notes b { display: block; font-size: 17px; letter-spacing: -.02em; }
.ap-notes span { color: var(--a-text-2); font-size: 15px; }
@media (min-width: 900px) { .ap-notes { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* ---------- 03 the bento ---------- */
.ap-bento { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.ap-bt { position: relative; border-radius: 26px; padding: 26px 22px 18px; background: var(--a-surface); border: 1px solid var(--a-card-line); overflow: hidden; display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; transition: transform .5s var(--a-spring), box-shadow .4s var(--a-ease); }
.ap-tint .ap-bt, .ap-bt { box-shadow: var(--a-shadow-sm); }
.ap-bt:hover { transform: translateY(-3px); box-shadow: var(--a-shadow-lg); }
.ap-bt h3 { font-size: clamp(1.3rem, .8vw + 1rem, 1.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
.ap-bt h3:lang(he) { letter-spacing: 0; line-height: 1.2; }
.ap-bt p { color: var(--a-text-2); font-size: 15.5px; max-inline-size: 34rem; }
.ap-lbl { font-size: 12px; font-weight: 600; color: var(--a-text-3); text-transform: uppercase; letter-spacing: .06em; }
.ap-lbl:lang(he) { text-transform: none; letter-spacing: 0; font-size: 13px; }
/* the visual sits right under the copy in every tile; the link takes up the slack at the bottom */
.ap-viz { padding-block-start: 12px; }
.ap-bt-more { margin-block-start: auto; padding-block-start: 8px; font-size: 15px; align-self: flex-start; }
.ap-bt-small { margin-block-start: 10px; font-size: 14px !important; }
.ap-bt-tint { background: var(--a-brand-tint); border-color: var(--a-brand-line); }
.ap-bt-ink { background: var(--a-band); color: #f2f1fa; border-color: rgba(255, 255, 255, .06); }
.ap-bt-ink p { color: #b3b1cc; }
.ap-bt-ink .ap-lbl { color: #9a97bb; }
.ap-bt-ink .ap-link-arrow { color: #c4bdff; }
.ap-ch-line { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--a-surface-2); font-size: 14px; min-inline-size: 0; }
.ap-ch-line + .ap-ch-line { margin-block-start: 8px; }
/* a phone lets a long channel name wrap instead of cutting it off; from 600px it fits on one line */
.ap-ch-line b { font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
@media (min-width: 600px) { .ap-ch-line b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.ap-ch-ico { inline-size: 30px; block-size: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.ap-ch-ico .ap-ico { inline-size: 16px; block-size: 16px; }
.ap-ch-sub { font-size: 13px; display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 600px) { .ap-ch-sub { display: inline; } }
.ap-n { margin-inline-start: auto; font-size: 12px; font-weight: 700; min-inline-size: 22px; block-size: 22px; padding-inline: 7px; border-radius: 11px; background: var(--a-accent); color: #fff; display: grid; place-items: center; flex: none; }
.ap-n-z { background: var(--a-surface-3); color: var(--a-text-3); }
.ap-kb { font-family: var(--a-mono); font-size: 12.5px; line-height: 1.6; padding: 12px 14px; border-radius: 14px; background: var(--a-surface); border: 1px solid var(--a-brand-line); color: var(--a-text-2); letter-spacing: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-kb:lang(he) { font-family: inherit; }
.ap-kb b { color: var(--a-text); font-weight: 600; }
.ap-arrow-down { display: block; inline-size: 2px; block-size: 18px; background: var(--a-brand-line); margin-block: 6px; margin-inline-start: 24px; }
.ap-tool-lines { display: grid; gap: 7px; font-size: 12.5px; }
.ap-tool-lines > div { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); color: #dedcf4; }
.ap-tool-lines code { font-family: var(--a-mono); overflow-wrap: anywhere; min-inline-size: 0; flex: 1 1 12rem; letter-spacing: 0; }
.ap-tool-lines .ap-ok { color: #30d158; }
.ap-tool-lines em { font-style: normal; color: #a8a5c8; margin-inline-start: auto; flex: none; }
.ap-tl { display: grid; font-size: 13.5px; }
.ap-tl > div { display: grid; grid-template-columns: 46px 12px 1fr; gap: 10px; align-items: start; padding-block: 6px; }
.ap-tl small { color: var(--a-text-3); font-family: var(--a-mono); font-size: 11.5px; padding-block-start: 2px; letter-spacing: 0; white-space: nowrap; }
.ap-tl i { inline-size: 10px; block-size: 10px; border-radius: 50%; border: 2px solid var(--a-accent); margin-block-start: 4px; background: var(--a-surface); }
.ap-tl > div:last-child i { background: var(--a-accent); }
.ap-bars { direction: ltr; display: flex; align-items: flex-end; gap: 6px; block-size: 96px; }
.ap-bars i { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--a-accent); opacity: .9; transform-origin: bottom; block-size: var(--h); }
.ap-bars i:nth-child(odd) { opacity: .55; }
.ap-seats { display: grid; gap: 8px; }
.ap-seats > div { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ap-seats .ap-ava { inline-size: 30px; block-size: 30px; font-size: 11px; }
.ap-role { margin-inline-start: auto; font-size: 12px; color: var(--a-text-2); padding: 2px 8px; border-radius: 999px; background: var(--a-surface-2); }
.ap-mod-c { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--a-surface-2); font-size: 13.5px; }
.ap-mod-c + .ap-mod-c { margin-block-start: 8px; }
.ap-mod-c .ap-tx { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-mod-c.ap-hid .ap-tx { text-decoration: line-through; color: var(--a-text-3); }
.ap-mod-c.ap-hid .ap-ico { color: var(--a-text-3); }
.ap-mod-c .ap-ok { color: var(--a-green); }
.ap-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; font-size: 11px; text-align: center; color: var(--a-text-3); }
.ap-wd { display: block; margin-block-end: 4px; font-weight: 600; }
.ap-cell { block-size: 64px; border-radius: 10px; background: var(--a-surface-2); position: relative; overflow: hidden; }
.ap-cell em { position: absolute; inset-inline: 4px; inset-block-end: 4px; block-size: 28px; border-radius: 7px; overflow: hidden; }
.ap-cell.is-today { box-shadow: 0 0 0 1.5px var(--a-accent) inset; }
/* a phone swipes through the tiles instead of scrolling ten of them */
.ap-bento { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--a-gutter); gap: 12px; margin-inline: calc(-1 * var(--a-gutter)); padding: 4px var(--a-gutter) 16px; scrollbar-width: none; }
.ap-bento::-webkit-scrollbar { display: none; }
.ap-bento > .ap-bt { flex: 0 0 84%; scroll-snap-align: start; }
@media (min-width: 600px) {
  .ap-bento { display: grid; align-items: stretch; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 0; gap: 14px; }
  .ap-bento > .ap-bt { flex: none; }
}
@media (min-width: 600px) { .ap-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ap-bt.ap-c7 { grid-column: 1 / -1; } }
/* two columns: wide, pair, wide, pair, pair, wide, so no row is left half empty (zero specificity: the 12-column spans win from 1200px) */
@media (min-width: 600px) { :where(.ap-bento > .ap-bt:last-child:nth-child(odd)) { grid-column: 1 / -1; } }
@media (min-width: 1200px) {
  .ap-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .ap-bt { grid-column: span 4; }
  .ap-bt.ap-c7 { grid-column: span 7; } .ap-bt.ap-c5 { grid-column: span 5; } .ap-bt.ap-c6 { grid-column: span 6; }
}

/* ---------- 04 the agent band (always dark) ---------- */
.ap-agent-band { overflow: clip; background: var(--a-band); color: #f2f1fa; --a-text: #f2f1fa; --a-text-2: #b3b1cc; --a-text-3: #9a97bb; --a-accent-text: #c4bdff; --a-line: rgba(255, 255, 255, .1); --a-brand-line: rgba(179, 171, 255, .35); }
.ap-agent-band .ap-idx { color: #c4bdff; }
.ap-agent-grid { display: grid; gap: 40px; align-items: center; }
.ap-agent-copy .ap-lede { margin-block-start: 18px; }
.ap-agent-list { margin-block-start: 28px; display: grid; gap: 18px; }
.ap-agent-list > div { display: flex; gap: 14px; }
.ap-a-ico { inline-size: 36px; block-size: 36px; border-radius: 10px; background: var(--a-band-3); display: grid; place-items: center; flex: none; color: #c4bdff; }
.ap-agent-list b { display: block; font-weight: 600; }
.ap-agent-list span { color: #b3b1cc; font-size: 15px; }
.ap-agchat { border-radius: 28px; background: var(--a-band-2); border: 1px solid rgba(255, 255, 255, .07); padding: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); min-inline-size: 0; }
.ap-chat-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-block-end: 18px; flex-wrap: wrap; }
.ap-agent-band .ap-seg { background: #2c2b40; }
.ap-agent-band .ap-seg button { color: #b3b1cc; padding-inline: 13px; font-size: 14px; }
.ap-agent-band .ap-seg button[aria-pressed="true"] { background: #4a4960; color: #fff; }
.ap-agent-band .ap-seg.has-thumb::before { background: #4a4960; }
.ap-agent-band .ap-seg.has-thumb button[aria-pressed="true"] { background: transparent; }
.ap-who { font-size: 13px; color: #9a97bb; display: flex; align-items: center; gap: 8px; }
.ap-chat-msgs { display: flex; flex-direction: column; gap: 12px; min-block-size: 250px; }
.ap-c-user { align-self: flex-end; max-inline-size: 85%; background: #6a5cff; color: #fff; padding: 10px 14px; border-radius: 20px 20px 6px 20px; font-size: 15px; }
[dir="rtl"] .ap-c-user { border-radius: 20px 20px 20px 6px; }
.ap-c-bot { align-self: flex-start; max-inline-size: 92%; background: var(--a-band-3); padding: 12px 14px; border-radius: 20px 20px 20px 6px; font-size: 15px; color: #f2f1fa; }
[dir="rtl"] .ap-c-bot { border-radius: 20px 20px 6px 20px; }
.ap-c-tools { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; }
[dir="rtl"] .ap-c-tools { align-self: flex-end; }
.ap-c-tool { font-family: var(--a-mono); font-size: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(48, 209, 88, .12); color: #30d158; display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0; }
.ap-c-typing { align-self: flex-start; background: var(--a-band-3); border-radius: 20px; padding: 12px 14px; display: inline-flex; gap: 4px; }
.ap-c-typing i { background: #8c89ad; }
.ap-chat-msgs.ap-wa .ap-c-user { background: #005c4b; }
.ap-chat-msgs.ap-wa .ap-c-bot { background: #1f2c34; }
@media (min-width: 900px) { .ap-agent-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; align-items: start; } .ap-agchat { padding: 22px; margin-block-start: 44px; } }

/* ---------- 05 analytics ---------- */
.ap-an-grid { display: grid; gap: 32px; }
.ap-an-grid > * { min-inline-size: 0; }
.ap-an-big { margin-block-start: 28px; }
.ap-an-big > b { display: block; font-size: clamp(3.4rem, 7vw, 6rem); font-weight: 700; letter-spacing: -.06em; line-height: .95; font-variant-numeric: tabular-nums; color: var(--a-accent-text); text-align: start; }
[dir="rtl"] .ap-an-big > b { text-align: end; }
.ap-an-big > span { display: block; color: var(--a-text-2); margin-block-start: 10px; font-size: 17px; max-inline-size: 24rem; }
.ap-an-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; margin-block-start: 30px; padding-block-start: 24px; border-block-start: 1px solid var(--a-line); }
.ap-an-kpis b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-align: start; }
[dir="rtl"] .ap-an-kpis b { text-align: end; }
.ap-an-kpis > div > span { font-size: 13.5px; color: var(--a-text-2); }
.ap-chart-card { border-radius: 26px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-md); padding: 20px 16px 16px; min-inline-size: 0; }
.ap-ch-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-block-end: 12px; }
.ap-ch-head b { font-size: 16px; display: block; }
.ap-ch-head small { font-size: 13px; color: var(--a-text-2); }
.ap-legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--a-text-2); align-items: center; flex-wrap: wrap; }
.ap-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ap-legend i { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 3px; }
.ap-sw1 { background: var(--a-accent); } .ap-sw2 { background: var(--a-chart-2); }
.ap-lchart { inline-size: 100%; block-size: auto; display: block; overflow: visible; }
.ap-lchart .ap-grid line { stroke: var(--a-line); stroke-width: 1; }
.ap-lchart .ap-grid text { fill: var(--a-text-3); font-size: 10px; font-family: var(--a-font); }
.ap-lchart .ap-l1 { fill: none; stroke: var(--a-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ap-lchart .ap-l2 { fill: none; stroke: var(--a-chart-2); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ap-lchart .ap-a1 { fill: var(--a-accent); opacity: .1; }
.ap-lchart .ap-dotc { fill: var(--a-surface); stroke: var(--a-accent); stroke-width: 2.5; }
.ap-funnel { display: grid; gap: 10px; margin-block-start: 18px; padding-block-start: 16px; border-block-start: 1px solid var(--a-line); }
.ap-f { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) 3.4rem; gap: 10px; align-items: center; font-size: 13.5px; }
.ap-f > span:first-child { color: var(--a-text-2); }
.ap-f b { text-align: end; font-variant-numeric: tabular-nums; }
.ap-track { block-size: 8px; border-radius: 4px; background: var(--a-surface-2); overflow: hidden; }
.ap-track i { display: block; block-size: 100%; border-radius: inherit; background: var(--a-accent); inline-size: var(--w); transform-origin: left center; }
[dir="rtl"] .ap-track i { transform-origin: right center; margin-inline-start: 0; }
@media (min-width: 600px) { .ap-chart-card { padding: 22px 20px 18px; } }
@media (min-width: 900px) { .ap-an-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; } }

/* ---------- 06 pricing teaser (keeps the ds-sec ds-sec-alt class the site test reads) ---------- */
.ap-home #pricing { background: var(--a-bg-2); border: 0; padding-block: 72px; }
@media (min-width: 900px) { .ap-home #pricing { padding-block: 104px; } }
.ap-pt-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--a-line); border-radius: 22px; overflow: hidden; border: 1px solid var(--a-line); }
.ap-pt-cell { position: relative; background: var(--a-surface); padding: 20px 16px; color: var(--a-text); display: flex; flex-direction: column; gap: 4px; transition: background .25s; min-inline-size: 0; }
.ap-pt-cell:hover { background: var(--a-surface-2); }
.ap-pt-trial { grid-column: 1 / -1; background: var(--a-surface); }
@media (min-width: 600px) { .ap-pt-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ap-pt-pop { background: var(--a-brand-tint); }
.ap-pt-pop:hover { background: color-mix(in srgb, var(--a-brand-tint) 70%, var(--a-surface-2)); }
.ap-pt-cell .ap-badge { position: absolute; inset-block-start: 18px; inset-inline-end: 14px; }
.ap-pt-cell .ds-plan-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--a-text); }
.ap-pt-p { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.ap-pt-p b { font-size: 32px; font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ap-pt-trial .ap-pt-p b { letter-spacing: -.03em; }
.ap-pt-p small { font-size: 14px; color: var(--a-text-2); font-weight: 500; letter-spacing: 0; }
.ap-pt-cell .ds-plan-list { margin-block-start: 6px; display: grid; gap: 4px; font-size: 13px; color: var(--a-text-2); line-height: 1.4; }
.ap-pt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; margin-block-start: 18px; }
.ap-pt-founding { font-size: 14px; color: var(--a-text-2); max-inline-size: 46rem; }
@media (min-width: 900px) {
  .ap-pt-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ap-pt-trial { grid-column: auto; }
  .ap-pt-cell { padding: 22px 20px; }
}

/* ---------- 07 faq ---------- */
.ap-faq-grid { display: grid; gap: 24px; }
.ap-faq-grid > * { min-inline-size: 0; }
.ap-sticky-h .ap-lede { margin-block-start: 16px; }
.ap-q { border-block-end: 1px solid var(--a-line); }
.ap-q summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-block-size: 64px; padding-block: 12px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; cursor: pointer; transition: color .2s; }
.ap-q summary:lang(he) { letter-spacing: 0; }
.ap-q summary::-webkit-details-marker { display: none; }
.ap-q summary:hover { color: var(--a-accent-text); }
.ap-q summary .ap-ico { transition: transform .3s var(--a-ease); color: var(--a-text-2); }
.ap-q[open] summary .ap-ico { transform: rotate(45deg); }
.ap-a p { padding-block-end: 22px; color: var(--a-text-2); font-size: 16.5px; max-inline-size: 640px; line-height: 1.55; }
.ap-a p a { color: var(--a-accent-text); }
.ap-faq-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-block-size: 56px; font-size: 16px; font-weight: 600; color: var(--a-accent-text); cursor: pointer; }
.ap-faq-more > summary::-webkit-details-marker { display: none; }
.ap-faq-more[open] > summary { display: none; }
@media (min-width: 900px) {
  .ap-faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; }
  .ap-sticky-h { position: sticky; inset-block-start: 96px; align-self: start; }
}

/* ---------- the closing panel ---------- */
.ap-cta-sec { padding-block: 16px 72px; }
@media (min-width: 900px) { .ap-cta-sec { padding-block: 24px 104px; } }
.ap-cta-panel { border-radius: 28px; background: var(--a-cta-bg); color: #fff; padding: 44px 22px; position: relative; overflow: hidden; display: grid; gap: 22px; }
.ap-cta-panel > *:not(.ap-sweep-big) { position: relative; z-index: 1; }
.ap-cta-panel h2 { font-size: clamp(2.1rem, 4.6vw + .5rem, 4rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.ap-cta-panel h2:lang(he) { letter-spacing: 0; line-height: 1.12; }
.ap-cta-panel p { font-size: 18px; color: rgba(255, 255, 255, .88); max-inline-size: 30rem; margin-block-start: 16px; }
.ap-cta-panel .ap-cta-row { margin-block-start: 26px; }
.ap-cta-panel .ap-link-arrow { color: #fff; }
.ap-ticks2 { display: grid; gap: 10px; font-size: 15px; color: rgba(255, 255, 255, .92); }
.ap-ticks2 li { display: flex; gap: 10px; align-items: center; }
.ap-ticks2 a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ap-sweep-big { position: absolute; inset-inline-end: -40px; inset-block-end: -20px; inline-size: 420px; block-size: 200px; opacity: .25; pointer-events: none; z-index: 0; display: none; }
.ap-sweep-big path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
[dir="rtl"] .ap-sweep-big { transform: scaleX(-1); }
@media (min-width: 600px) { .ap-cta-panel { padding: 56px 40px; border-radius: 36px; } }
@media (min-width: 900px) { .ap-cta-panel { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); padding: 72px 64px; align-items: center; } .ap-sweep-big { display: block; } }

/* ---------- the home page in the hero's language ----------
   One layer over the section rules above, so every section below the photo speaks the same
   language as the first screen: the warm charcoal of the photo's wall for the dark bands, a warm
   off-white for the tinted ones, white cards with the hero card's soft lift, the hero's dot
   eyebrow, its type, and its purple pill with an arrow. Content and layout stay as they were. */
body:has(.ap-home) {
  --w-tint: #f6f5f1; --w-line: rgba(28, 29, 25, .07);
  --w-lift: 0 1px 2px rgba(28, 29, 25, .05), 0 12px 32px rgba(28, 29, 25, .08);
  --w-lift-lg: 0 2px 6px rgba(28, 29, 25, .06), 0 24px 56px rgba(28, 29, 25, .14);
  --a-band: #1c1d19; --a-band-2: #25261f; --a-band-3: #33342c;
}
[data-theme="dark"] body:has(.ap-home) {
  --w-tint: #0d0d0b; --w-line: rgba(255, 255, 255, .08);
  --w-lift: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  --w-lift-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 56px rgba(0, 0, 0, .5);
  --a-band: #151612; --a-band-2: #1f201b; --a-band-3: #2d2e27;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body:has(.ap-home) {
    --w-tint: #0d0d0b; --w-line: rgba(255, 255, 255, .08);
    --w-lift: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
    --w-lift-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 24px 56px rgba(0, 0, 0, .5);
    --a-band: #151612; --a-band-2: #1f201b; --a-band-3: #2d2e27;
  }
}
.ap-home .ap-tint, .ap-home #pricing, body:has(.ap-home) .ds-foot { background: var(--w-tint); }

/* eyebrow: the hero's dot and words, no index number or rule */
.ap-home .ap-idx { font-family: var(--a-font); font-size: 14px; letter-spacing: 0; font-weight: 600; color: var(--a-text-2); gap: 8px; }
.ap-home .ap-idx > [dir="ltr"] { display: none; }
.ap-home .ap-idx::after { content: none; }
.ap-home .ap-idx::before { content: ""; flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--a-accent); box-shadow: 0 0 0 3px var(--a-accent-soft); }

/* type: the hero's weight, tracking and scale */
.ap-home .ap-h2 { font-size: clamp(2.2rem, 4.4vw + .6rem, 3.9rem); letter-spacing: -.042em; line-height: 1.03; }
.ap-home .ap-h2:lang(he) { letter-spacing: 0; line-height: 1.12; }

/* cards: white, one radius, the hero card's lift */
.ap-home :is(.ap-steps3 li, .ap-agm, .ap-scene, .ap-bt, .ap-chart-card, .ap-pt-row) { border-radius: 20px; border: 1px solid var(--w-line); box-shadow: var(--w-lift); }
.ap-home :is(.ap-steps3 li, .ap-agm) { background: var(--a-surface); }
.ap-home .ap-bt:hover { box-shadow: var(--w-lift-lg); }
.ap-home .ap-bt-ink { border-color: transparent; }
.ap-home .ap-mock { border-radius: 20px; border-color: var(--w-line); box-shadow: 0 30px 80px rgba(28, 29, 25, .14), 0 8px 24px rgba(28, 29, 25, .08); }
.ap-home .ap-stage-scenes .ap-scene { box-shadow: var(--w-lift-lg); }
@media (min-width: 900px) { .ap-home .ap-stage-card { border-radius: 24px; background-color: var(--w-tint); } }

/* the arrow the hero's button carries, on the other main buttons */
.ap-btn .ap-hx-arr { inline-size: 18px; block-size: 18px; }
.ap-btn:hover .ap-hx-arr { transform: translateX(3px); }
[dir="rtl"] .ap-btn .ap-hx-arr { transform: scaleX(-1); }
[dir="rtl"] .ap-btn:hover .ap-hx-arr { transform: scaleX(-1) translateX(3px); }

/* the dark bands take the photo's wall colour and the hero's purple pill */
.ap-home .ap-agent-band { --a-text-2: rgba(255, 255, 255, .74); --a-text-3: rgba(255, 255, 255, .6); --a-accent-text: #c3bbff; }
.ap-home .ap-agent-band .ap-idx { color: rgba(255, 255, 255, .84); }
.ap-home .ap-agent-band .ap-idx::before { background: #c3bbff; box-shadow: 0 0 0 3px rgba(195, 187, 255, .22); }
.ap-home .ap-agent-band .ap-agent-list span, .ap-home .ap-who { color: rgba(255, 255, 255, .7); }
.ap-home .ap-agent-band .ap-a-ico { color: #c3bbff; }
.ap-home .ap-agent-band .ap-seg, .ap-home .ap-agent-band .ap-seg.has-thumb::before { background: var(--a-band-3); }
.ap-home .ap-agent-band .ap-seg button { color: rgba(255, 255, 255, .7); }
.ap-home .ap-agent-band .ap-seg button[aria-pressed="true"], .ap-home .ap-agent-band .ap-seg.has-thumb::before { background: #4a4b42; }
.ap-home .ap-agent-band .ap-seg.has-thumb button[aria-pressed="true"] { background: transparent; }
.ap-home .ap-agchat { border-radius: 20px; }
.ap-home :is(.ap-agent-band .ap-btn-light, .ap-cta-panel .ap-btn-w) {
  background: var(--a-accent); color: #fff; gap: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 1px 2px rgba(20, 10, 80, .18);
}
.ap-home :is(.ap-agent-band .ap-btn-light, .ap-cta-panel .ap-btn-w):hover { background: var(--a-accent-hover); }
.ap-home :is(.ap-agent-band .ap-btn-light, .ap-cta-panel .ap-btn-w):focus-visible { outline: 2px solid #c3bbff; outline-offset: 3px; }

/* the closing call to action: a full-width band like the first screen, not a purple card */
.ap-home .ap-cta-sec { position: relative; overflow: clip; padding-block: 0; background: var(--a-band); color: #fff; }
.ap-home .ap-cta-panel { background: none; border-radius: 0; padding: 80px 0 88px; }
.ap-home .ap-cta-panel h2 { letter-spacing: -.042em; }
.ap-home .ap-cta-panel h2:lang(he) { letter-spacing: 0; }
.ap-home .ap-cta-panel p { color: rgba(255, 255, 255, .84); }
.ap-home .ap-ticks2 { color: rgba(255, 255, 255, .84); }
.ap-home .ap-ticks2 .ap-ico { color: #c3bbff; }
@media (min-width: 900px) { .ap-home .ap-cta-panel { padding: 120px 0 128px; } }

/* the about paragraph stays, quietly, before the footer */
.ap-home .ds-about { border: 0; padding-block: 0 48px; background: var(--a-bg); }
.ap-about-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-block-start: 22px; border-block-start: 1px solid var(--a-line); }
.ap-home .ap-about-row { border-block-start: 0; } /* the dark band above already ends the page */
.ap-about-row .ds-eyebrow { margin: 0; color: var(--a-text-3); font-size: 13px; }
.ap-about-row .ds-more { margin: 0; flex: 1 1 20rem; max-inline-size: 72ch; }
.ap-about-row .ds-about-h { font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--a-text-2); }
.ap-about-row .ds-about-body { font-size: 15px; color: var(--a-text-2); margin-block-start: 8px; }

/* the design language, applied (brand-src/../hero-redesign/design-language.md)
   one step number: a lilac circle with a purple numeral, everywhere on the page */
.ap-home .ap-s3-n { background: var(--a-accent-soft); color: var(--a-accent-text); font-weight: 700; }
.ap-home .ap-notes > div::before { border: 0; background: var(--a-accent-soft); font-weight: 700; }
/* the logo's one sharp corner, only where a message is: on the sender's side, at the bottom */
.ap-home :is(.ap-bub.ap-me, .ap-mk-msgs .ap-bot, .ap-bubble-me) { border-end-end-radius: 2px; }
.ap-home :is(.ap-mk-msgs .ap-them, .ap-hx-bub) { border-end-start-radius: 2px; }
.ap-home .ap-c-user { background: var(--a-accent); border-radius: 20px; border-end-end-radius: 2px; }
.ap-home .ap-c-bot { border-radius: 20px; border-end-start-radius: 2px; }
.ap-home .ap-chat-msgs.ap-wa .ap-c-user { background: #005c4b; }
/* charts: purple and lilac only */
.ap-home { --a-chart-2: #a097f5; }
[data-theme="dark"] .ap-home { --a-chart-2: #c3bbff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ap-home { --a-chart-2: #c3bbff; } }
/* story thumbnails are photos from the bakery */
.ap-thumb picture, .ap-cell em picture { display: block; inline-size: 100%; block-size: 100%; }
.ap-thumb img, .ap-cell em img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ap-home h3 { text-wrap: balance; } /* no one-word last line under a card or step title */

/* AI assistants (#agent): copy and the assistant tiles on one side, a light chat window on the other.
   The tiles carry each brand's own colour with a white mark; the chips below are the smaller twin.
   Everything is logical, so Hebrew mirrors: the owner's bubble sits on the end side with its sharp
   corner at the bottom-end, the reply on the start side. */
.ap-ai-grid { display: grid; gap: 44px; }
.ap-ai-grid > * { min-inline-size: 0; }
.ap-ai-copy .ap-lede { margin-block-start: 16px; }
.ap-ai-list { list-style: none; margin: 28px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; max-inline-size: 420px; }
.ap-ai-list a { display: grid; justify-items: center; gap: 8px; color: var(--a-text-2); font-size: 13px; font-weight: 500; text-decoration: none; transition: color .2s; }
.ap-ai-list a:hover, .ap-ai-list a:focus-visible { color: var(--a-text); }
@media (prefers-reduced-motion: no-preference) { :root:not(.no-motion) .ap-ai-list a:hover .ap-ai-lg { transform: translateY(-2px); } }
.ap-ai-lg { flex: none; inline-size: 52px; block-size: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--c); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 16px rgba(0, 0, 0, .1); transition: transform .25s var(--a-ease-out); }
.ap-ai-lg svg { display: block; inline-size: 26px; block-size: 26px; fill: currentColor; }
.ap-ai-lg b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
/* the official files keep their own fills and clear space: the Blossom file carries its margin inside
   its viewBox, so it fills the tile; the Grok logomark is edge to edge, so it sits smaller */
.ap-ai-lg .ap-ai-oai { inline-size: 100%; block-size: 100%; }
.ap-ai-lg .ap-ai-grok { inline-size: 26px; block-size: 26px; }
.ap-ai-lg-s { inline-size: 26px; block-size: 26px; border-radius: 8px; box-shadow: none; }
.ap-ai-lg-s svg { inline-size: 14px; block-size: 14px; }
.ap-ai-lg-s b { font-size: 9.5px; letter-spacing: -.03em; }
.ap-ai-win { margin: 0; display: grid; gap: 16px; padding: 14px; border-radius: 26px; background: var(--a-surface); border: 1px solid var(--w-line); box-shadow: var(--w-lift); }
.ap-ai-top { display: flex; justify-content: center; }
.ap-ai-who { display: inline-flex; align-items: center; gap: 8px; padding: 5px; padding-inline-end: 14px; border-radius: 999px; background: var(--a-bg-2); font-size: 14px; font-weight: 600; }
.ap-ai-msgs { display: grid; gap: 12px; padding-inline: 4px; }
.ap-ai-msgs p { margin: 0; }
.ap-ai-me { justify-self: end; max-inline-size: 84%; padding: 12px 16px; border-radius: 20px; border-end-end-radius: 2px; background: var(--a-accent); color: #fff; font-size: 15.5px; line-height: 1.4; }
.ap-ai-used { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--a-line); color: var(--a-text-2); font-size: 13px; font-weight: 500; }
.ap-ai-used img { display: block; }
.ap-ai-bot { justify-self: start; max-inline-size: 94%; display: grid; gap: 12px; padding: 14px; border-radius: 20px; border-end-start-radius: 2px; background: var(--a-bubble-them); color: var(--a-bubble-them-text); }
.ap-ai-bot > p { padding-inline: 2px; font-size: 15.5px; line-height: 1.45; }
.ap-ai-ig { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: var(--a-surface); box-shadow: var(--a-shadow-sm); color: var(--a-text); }
.ap-ai-igh { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.ap-ai-ig ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ap-ai-ig li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ap-ai-av { inline-size: 28px; block-size: 28px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--a-accent-soft); color: var(--a-accent-text); font-size: 12px; font-weight: 700; }
.ap-ai-av picture, .ap-ai-av img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ap-ai-ig li p { font-size: 13.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-ai-ig li b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; } /* phone: the handle above the comment, as Instagram stacks them */
.ap-ai-sent { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--a-green-soft); color: var(--a-green); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ap-ai-input { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px; padding-inline-start: 18px; border-radius: 999px; border: 1px solid var(--a-line-2); color: var(--a-text-3); font-size: 15px; }
.ap-ai-input i { flex: none; inline-size: 34px; block-size: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--a-accent); }
.ap-ai-input svg { inline-size: 16px; block-size: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ap-ai-foot { display: grid; gap: 14px; margin-block-start: 48px; padding-block-start: 30px; border-block-start: 1px solid var(--a-line); }
.ap-ai-also { margin: 0; font-size: 14px; font-weight: 600; color: var(--a-text-2); }
.ap-ai-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ap-ai-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 5px; padding-inline-end: 14px; border-radius: 999px; background: var(--a-surface); border: 1px solid var(--w-line); color: var(--a-text); font-size: 14px; font-weight: 500; text-decoration: none; transition: box-shadow .2s; }
.ap-ai-chips a:hover, .ap-ai-chips a:focus-visible { box-shadow: var(--w-lift); }
.ap-ai-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; font-size: 15px; font-weight: 600; color: var(--a-accent-text); cursor: pointer; }
.ap-ai-more > summary::-webkit-details-marker { display: none; }
.ap-ai-more > summary .ap-ico { transition: transform .3s var(--a-ease); }
.ap-ai-more[open] > summary .ap-ico { transform: rotate(45deg); }
.ap-ai-tools { display: grid; gap: 28px; padding-block: 10px 6px; }
.ap-ai-tools h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--a-text-2); letter-spacing: 0; }
.ap-ai-tools ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ap-int { display: block; color: var(--a-text-2); font-size: 14.5px; line-height: 1.5; text-decoration: none; }
.ap-int .ap-int-n { color: var(--a-text); font-weight: 600; transition: color .2s; }
.ap-int:hover .ap-int-n, .ap-int:focus-visible .ap-int-n { color: var(--a-accent-text); }
@media (min-width: 600px) { .ap-ai-ig li b { display: inline; } }
@media (min-width: 900px) {
  .ap-ai-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .ap-ai-win { padding: 18px; }
  .ap-ai-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}
@media (min-width: 1200px) { .ap-ai-grid { gap: 88px; } }
.ap-lchart text { direction: ltr; } /* RTL: axis labels sit outside the plot, "6 days ago" starts at the axis */

/* ============================================================
   4 · PRICING
   ============================================================ */
.ap-page { padding-block-start: calc(var(--nav-bottom) + var(--safe-top, 0px)); }
.ap-page .ds-crumbs { margin-block-end: 18px; font-size: 13px; color: var(--a-text-3); }
/* a header, not a splash: two lines of heading, one of lede, the CTA and a slim founding banner,
   so the plan prices and buttons are on the first screen at 1366x768 */
.ap-price-hero { padding-block: 28px 8px; }
.ap-ph-grid { display: grid; gap: 22px; }
.ap-ph-grid > * { min-inline-size: 0; }
.ap-price-hero h1 { font-size: clamp(2.3rem, 2.6vw + 1.2rem, 3.5rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; max-inline-size: 18ch; text-wrap: balance; }
.ap-price-hero h1:lang(he) { letter-spacing: -.01em; line-height: 1.12; }
.ap-price-hero .ap-lede { max-inline-size: 36rem; margin-block-start: 14px; }
.ap-ph-side { display: grid; gap: 10px; justify-items: start; align-content: end; }
.ap-ph-side .ap-cta-row { margin-block-start: 0; }
.ap-ph-note { font-size: 14px; color: var(--a-text-2); }
.ap-founding { display: inline-flex; gap: 10px; align-items: center; margin-block-start: 6px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--a-brand-tint); border: 1px solid var(--a-brand-line); font-size: 13.5px; line-height: 1.35; color: var(--a-text-2); }
[dir="rtl"] .ap-founding { padding: 7px 8px 7px 14px; }
.ap-founding .ap-fp { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--a-accent); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.ap-founding b { color: var(--a-text); font-weight: 600; }
@media (min-width: 900px) {
  .ap-price-hero { padding-block: 40px 12px; }
  .ap-ph-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 48px; align-items: end; }
}

.ap-plans-sec { display: flex; flex-direction: column; gap: 18px; padding-block-start: 16px; }
.ap-plans-sec > .ap-bill { align-self: center; }
.ap-plans { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); padding-block-start: 12px; }
.ap-plan { position: relative; border-radius: 28px; background: var(--a-surface); border: 1px solid var(--a-line); padding: 28px 22px 24px; display: flex; flex-direction: column; box-shadow: var(--a-shadow-sm); transition: box-shadow .3s, transform .5s var(--a-spring), border-color .3s; }
.ap-plan:hover { transform: translateY(-4px); }
.ap-plan.ap-pop { border: 2px solid var(--a-accent); padding: 27px 21px 23px; box-shadow: var(--a-shadow-lg); background: linear-gradient(180deg, var(--a-brand-tint), var(--a-surface) 46%); order: -1; }
.ap-plan.is-fit { box-shadow: 0 0 0 4px var(--a-accent-soft), var(--a-shadow-lg); }
.ap-pop-tag { position: absolute; inset-block-start: -13px; inset-inline-start: 22px; background: var(--a-accent); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.ap-plan h3 { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.ap-plan .ap-tag { font-size: 15px; color: var(--a-text-2); margin-block-start: 4px; }
.ap-amt { display: flex; align-items: baseline; gap: 4px; margin-block-start: 18px; }
.ap-amt b { display: inline-block; font-size: 48px; font-weight: 700; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.ap-amt span { font-size: 16px; color: var(--a-text-2); }
.ap-billed { font-size: 13px; color: var(--a-text-3); margin-block-start: 8px; min-block-size: 20px; }
.ap-plan .ap-btn { margin-block-start: 20px; }
.ap-plan .ds-plan-list { margin-block-start: 22px; display: grid; gap: 10px; font-size: 15px; line-height: 1.4; }
.ap-plan .ds-plan-list li { position: relative; padding-inline-start: 26px; }
.ap-plan .ds-plan-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 3px; inline-size: 16px; block-size: 16px; background: var(--a-accent-text);
  -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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ap-plan .ds-plan-list li.ap-hl { font-weight: 600; }
.ap-plan .ds-plan-list li.ap-off { color: var(--a-text-3); }
.ap-plan .ds-plan-list li.ap-off::before {
  background: var(--a-text-3);
  -webkit-mask-image: 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'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  mask-image: 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'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
@media (min-width: 600px) { .ap-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ap-plan.ap-pop { order: 0; } }
@media (min-width: 1200px) { .ap-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ap-finder { display: grid; gap: 8px 40px; align-items: center; border-radius: 28px; border: 1px solid var(--a-card-line); background: var(--a-bg-2); padding: 24px 20px; }
.ap-finder h3 { font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.ap-finder > p { font-size: 15px; color: var(--a-text-2); }
.ap-out { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-block-start: 8px; }
.ap-out b { font-size: 34px; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ap-rec { font-size: 17px; color: var(--a-text-2); }
.ap-rec strong { color: var(--a-accent-text); }
.ap-finder input[type="range"] { -webkit-appearance: none; appearance: none; inline-size: 100%; block-size: 44px; background: transparent; margin: 0; direction: ltr; }
.ap-finder input[type="range"]::-webkit-slider-runnable-track { block-size: 6px; border-radius: 6px; background: linear-gradient(to right, var(--a-accent) var(--p, 30%), var(--a-surface-3) var(--p, 30%)); }
/* Hebrew: the slider fills from the right, like the page around it */
[dir="rtl"] .ap-finder input[type="range"] { direction: rtl; }
[dir="rtl"] .ap-finder input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--a-accent) var(--p, 30%), var(--a-surface-3) var(--p, 30%)); }
.ap-finder input[type="range"]::-moz-range-track { block-size: 6px; border-radius: 6px; background: var(--a-surface-3); }
.ap-finder input[type="range"]::-moz-range-progress { block-size: 6px; border-radius: 6px; background: var(--a-accent); }
.ap-finder input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 28px; block-size: 28px; border-radius: 50%; background: #fff; margin-block-start: -11px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .08); }
.ap-finder input[type="range"]::-moz-range-thumb { inline-size: 28px; block-size: 28px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.ap-sr { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 900px) {
  .ap-finder { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); padding: 30px 36px; }
  .ap-finder > h3, .ap-finder > p { grid-column: 1; }
  .ap-finder input[type="range"] { grid-column: 2; grid-row: 1 / span 2; }
  .ap-out { grid-column: 2; grid-row: 3; margin-block-start: 0; }
  /* from 900px the cards come first and the finder follows them */
  .ap-plans-sec > .ap-bill { order: 1; }
  .ap-plans-sec > .ap-plans { order: 2; }
  .ap-plans-sec > .ap-finder { order: 3; margin-block-start: 10px; }
}

.ap-cmp-wrap { position: relative; border-radius: 26px; border: 1px solid var(--a-card-line); background: var(--a-surface); overflow-x: auto; }
.ap-cmp-pick { display: none; justify-content: center; padding: 14px 12px; border-block-end: 1px solid var(--a-line); }
.ap-cmp-pick .ap-seg button { padding-inline: 12px; font-size: 14px; }
.ap-cmp { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; min-inline-size: 640px; }
.ap-cmp th, .ap-cmp td { padding: 13px 16px; text-align: start; border-block-end: 1px solid var(--a-line); vertical-align: top; line-height: 1.4; }
.ap-cmp thead th { font-size: 15px; font-weight: 700; background: var(--a-surface); }
.ap-cmp thead th small { display: block; font-size: 12.5px; color: var(--a-text-2); font-weight: 500; }
.ap-cmp tbody th { font-weight: 500; color: var(--a-text); }
.ap-cmp .ds-ptable-sub { display: block; color: var(--a-text-3); font-size: 12.5px; font-weight: 400; }
.ap-cmp td { font-variant-numeric: tabular-nums; color: var(--a-text); }
.ap-cmp td.ap-no { color: var(--a-text-3); }
.ap-cmp tr.ap-grp th { background: var(--a-bg-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--a-text-2); padding: 10px 16px; }
.ap-cmp tr.ap-grp th:lang(he) { text-transform: none; letter-spacing: 0; font-size: 13px; }
.ap-cmp tbody tr:last-child > * { border-block-end: 0; }
/* solid fills (the tint laid over the surface), so a stuck header never lets the rows show through */
.ap-cmp .ap-pc-pro { background: color-mix(in srgb, var(--a-accent) 5%, var(--a-surface)); }
.ap-cmp thead th { box-shadow: 0 1px 0 var(--a-line-2); border-block-end-color: transparent; }
.ap-cmp thead .ap-pc-pro { background: color-mix(in srgb, var(--a-accent) 7%, var(--a-surface)); box-shadow: inset 0 3px 0 var(--a-accent), 0 1px 0 var(--a-line-2); }
.ap-dash { display: inline-block; inline-size: 14px; block-size: 2px; border-radius: 1px; background: var(--a-text-3); opacity: .55; vertical-align: middle; }
.ap-cmp .ds-nowrap { white-space: nowrap; }
/* with JS on a phone: one plan column at a time, chosen by the segmented control */
.js .ap-cmp-pick { display: flex; }
.js .ap-cmp { min-inline-size: 0; }
.js .ap-cmp td, .js .ap-cmp thead th[data-p] { display: none; }
.js .ap-cmp[data-show="0"] [data-p="0"], .js .ap-cmp[data-show="1"] [data-p="1"], .js .ap-cmp[data-show="2"] [data-p="2"], .js .ap-cmp[data-show="3"] [data-p="3"] { display: table-cell; }
.js .ap-cmp tbody th[scope="row"] { inline-size: 58%; }
@media (min-width: 900px) {
  .ap-cmp-wrap { overflow: visible; }
  .js .ap-cmp-pick { display: none; }
  .ap-cmp thead th { position: sticky; inset-block-start: var(--nav-bottom); z-index: 2; }
  .js .ap-cmp td, .js .ap-cmp thead th[data-p] { display: table-cell; }
  .ap-cmp, .js .ap-cmp { table-layout: fixed; }
  .ap-cmp thead th:first-child, .ap-cmp tbody th[scope="row"], .js .ap-cmp tbody th[scope="row"] { inline-size: 28%; }
  .ap-cmp thead th { box-shadow: 0 1px 0 var(--a-line-2), 0 8px 16px -12px rgba(0, 0, 0, .25); }
  .ap-cmp thead th:first-child { border-start-start-radius: 26px; }
  .ap-cmp thead th:last-child { border-start-end-radius: 26px; }
}

.ap-two-col { display: grid; gap: 48px; }
.ap-two-col > * { min-inline-size: 0; }
@media (min-width: 900px) {
  .ap-two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  /* the short timeline stays beside the long list of definitions instead of leaving a hole */
  .ap-two-col > :first-child { position: sticky; inset-block-start: calc(var(--nav-bottom) + 32px); align-self: start; }
}
.ap-h2-sm { font-size: clamp(1.8rem, 2.4vw + .6rem, 2.6rem); }
.ap-trial-tl { display: grid; margin-block-start: 32px; }
.ap-tstep { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding-block-end: 26px; position: relative; }
.ap-tstep::before { content: ""; position: absolute; inset-inline-start: 31px; inset-block: 48px 0; inline-size: 2px; background: var(--a-line-2); }
.ap-tstep:last-child::before { display: none; }
.ap-td { inline-size: 64px; block-size: 48px; border-radius: 14px; background: var(--a-surface); border: 1px solid var(--a-card-line); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--a-accent-text); text-align: center; line-height: 1.1; }
.ap-tstep b { display: block; font-size: 17px; letter-spacing: -.02em; }
.ap-tstep span { color: var(--a-text-2); font-size: 15px; }
.ap-tstep a { color: var(--a-accent-text); font-weight: 500; }
.ap-tstep a:hover { text-decoration: underline; }
.ap-meters { display: grid; gap: 12px; margin-block-start: 28px; }
.ap-meters > div { padding: 16px 18px; border-radius: 18px; background: var(--a-surface); border: 1px solid var(--a-card-line); }
.ap-meters b { display: block; font-size: 16px; }
.ap-meters span { font-size: 14.5px; color: var(--a-text-2); line-height: 1.5; }
.ap-meters a { color: var(--a-accent-text); }
.ap-prose-cards { display: grid; gap: 16px; }
@media (min-width: 900px) { .ap-prose-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: stretch; } }
.ap-prose-cards .ds-block { margin: 0; padding: 24px 22px; border-radius: 26px; background: var(--a-surface); border: 1px solid var(--a-card-line); }
.ap-prose-cards .ds-block h2 { font-family: inherit; font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.ap-prose-cards .ds-block > p, .ap-prose-cards .ds-ticks { font-size: 15.5px; line-height: 1.6; color: var(--a-text-2); }
.ap-prose-cards .ds-ticks li::before { background: var(--a-accent); }
.ap-prose-cards strong { color: var(--a-text); }
.ap-prose-cards .ds-block > ul + p { margin-block-start: 14px; }
.ap-prose-cards a { color: var(--a-accent-text) !important; }

/* ============================================================
   5 · motion (only once apple.js has proved it can reveal)
   ============================================================ */
.js-motion .ap-rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--a-ease-out), transform .9s var(--a-ease-out); transition-delay: calc(var(--d, 0) * 70ms); }
.js-motion .ap-rv.is-in { opacity: 1; transform: none; }
.js-motion .ap-rv-scale { opacity: 0; transform: scale(.94) translateY(24px); transition: opacity .9s var(--a-ease-out), transform 1.1s var(--a-ease-out); }
.js-motion .ap-rv-scale.is-in { opacity: 1; transform: none; }
.js-motion .ap-lchart .ap-l1, .js-motion .ap-lchart .ap-l2 { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--a-ease-out); }
.js-motion .ap-lchart .ap-l2 { transition-delay: .25s; }
.js-motion .ap-lchart .ap-a1, .js-motion .ap-lchart .ap-dotc { opacity: 0; transition: opacity .8s var(--a-ease) 1.2s; }
.js-motion .ap-lchart.is-in .ap-l1, .js-motion .ap-lchart.is-in .ap-l2 { stroke-dashoffset: 0; }
.js-motion .ap-lchart.is-in .ap-a1 { opacity: .1; }
.js-motion .ap-lchart.is-in .ap-dotc { opacity: 1; }
.js-motion .ap-funnel .ap-track i { transform: scaleX(0); transition: transform 1.1s var(--a-ease-out); transition-delay: calc(var(--i) * 90ms); }
.js-motion .ap-funnel.is-in .ap-track i { transform: none; }
.js-motion .ap-bars i { transform: scaleY(0); transition: transform .9s var(--a-spring); transition-delay: calc(var(--i) * 60ms); }
.js-motion .ap-bars.is-in i { transform: none; }
.js-motion .ap-chat-msgs > * { animation: ap-chatin .5s var(--a-spring) both; }


@keyframes ap-chatin { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ap-blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@keyframes ap-caret { 50% { opacity: 0; } }
@keyframes ap-tick { 0% { transform: translateY(-10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ap-faqin { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: no-preference) {
  .ap-c-typing i { animation: ap-blink 1.2s infinite; }
  .ap-c-typing i:nth-child(2) { animation-delay: .2s; }
  .ap-c-typing i:nth-child(3) { animation-delay: .4s; }
  .ap-caret { animation: ap-caret 1s steps(1) infinite; }
  .ap-amt b.is-tick { animation: ap-tick .45s var(--a-spring); }
  .ap-q[open] .ap-a p { animation: ap-faqin .45s var(--a-ease-out) both; }
  .ap-dot { box-shadow: 0 0 0 0 rgba(52, 199, 89, .5); animation: ap-ping 2.4s var(--a-ease) infinite; }
}
@keyframes ap-ping { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); } }
@media (prefers-reduced-motion: reduce) {
  .js-motion .ap-rv, .js-motion .ap-rv-scale { opacity: 1; transform: none; }
  .ap-mock { transform: none; }
}
/* paused by the visitor (#ds-motion): landing.css already stops every animation and transition;
   the reveal states and the scale-in must also land at rest */
.no-motion .ap-rv, .no-motion .ap-rv-scale { opacity: 1 !important; transform: none !important; }
.no-motion .ap-mock { transform: none !important; }

/* landing.css styles .ds-plan-name / .ds-plan-list for the old cards; the new ones reset them */
.ap-plan .ds-plan-name, .ap-pt-cell .ds-plan-name { text-transform: none; letter-spacing: -.02em; }
.ap-plan .ds-plan-name { font-size: 24px; font-weight: 700; }
.ap-plan .ds-plan-list, .ap-pt-cell .ds-plan-list { flex: none; align-content: start; margin-block-end: 0; }
.ap-plan .ap-tag { min-block-size: 2.9em; }

/* ============================================================
   7 · content pages: the old body parts in the new language
   Scoped to .ds-inner (the pages tools/build-site.mjs renders): no aurora wash, plain cards
   without the coloured top edge, and the closing box becomes the indigo panel from home.
   ============================================================ */
.ds-inner .ds-page-hero { background: linear-gradient(180deg, var(--a-brand-tint), var(--a-bg) 88%); border-block-end: 0; }
.ds-inner .wash { display: none; }
.ds-inner .ds-page-hero .ds-display-2, .ds-inner .ds-block h2, .ds-inner .ds-prose h2 { font-family: var(--a-font); font-weight: 700; font-variation-settings: normal; letter-spacing: -.035em; }
.ds-inner .ds-page-hero .ds-display-2:lang(he), .ds-inner .ds-block h2:lang(he), .ds-inner .ds-prose h2:lang(he) { font-family: "Heebo", var(--a-font); letter-spacing: 0; }
.ds-inner .ds-page-hero .ds-eyebrow { color: var(--a-accent-text); }
.ds-inner .ds-card { border-radius: 22px; border-color: var(--a-card-line); background: var(--a-surface); box-shadow: var(--a-shadow-sm); }
.ds-inner .ds-card::before { display: none; }
.ds-inner a.ds-xcard { transition: transform .5s var(--a-spring), box-shadow .4s var(--a-ease); }
.ds-inner a.ds-xcard:hover { transform: translateY(-3px); box-shadow: var(--a-shadow-lg); border-color: var(--a-card-line); }
.ds-inner .ds-xcard-go::after { color: var(--a-accent-text); }
.ds-inner .ds-table-wrap { border-radius: 22px; border-color: var(--a-card-line); background: var(--a-surface); }
.ds-inner .ds-final { padding-block: 24px 72px; }
.ds-inner .ds-final .ds-final-in { background: var(--a-accent); border: 0; border-radius: 28px; box-shadow: none; color: #fff; }
.ds-inner .ds-final .ds-display-2 { color: #fff; font-family: var(--a-font); font-weight: 700; font-variation-settings: normal; letter-spacing: -.04em; }
.ds-inner .ds-final .ds-display-2:lang(he) { font-family: "Heebo", var(--a-font); letter-spacing: 0; }
.ds-inner .ds-final .btn-cta { background: #fff; color: #2a1fb0; box-shadow: none; }
.ds-inner .ds-final .btn-cta:hover { background: #f1efff; }
.ds-inner .ds-final .ds-ghost { background: rgba(255, 255, 255, .14); color: #fff; }
.ds-inner .ds-final .ds-ghost:hover { background: rgba(255, 255, 255, .22); }
.ds-inner .ds-final .ds-btn-lg { border-radius: 999px; }
.ds-inner .ds-final-note { color: rgba(255, 255, 255, .86); }
@media (min-width: 600px) { .ds-inner .ds-final .ds-final-in { border-radius: 36px; } }
@media (min-width: 900px) { .ds-inner .ds-final { padding-block: 32px 104px; } }

/* ============================================================
   8 · content pages (wave 2): every page tools/site/inner.mjs draws, inside .ap-page.ap-inner
   Content h2s are written bare (the site test reads some by their exact markup), so every rule
   here styles them through their parent.
   ============================================================ */
.ap-inner { --hue: var(--a-accent); }
.ap-inner [data-hue="violet"] { --hue: #5243e8; } .ap-inner [data-hue="pink"] { --hue: #c2307f; }
.ap-inner [data-hue="amber"] { --hue: #a85a00; } .ap-inner [data-hue="sky"] { --hue: #0a73b0; }
.ap-inner [data-hue="mint"] { --hue: #1b7f57; } .ap-inner [data-hue="coral"] { --hue: #c2452f; }
.ap-inner :not(pre) > code { font-family: var(--a-mono); font-size: .86em; letter-spacing: 0; background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 6px; padding: .06em .36em; overflow-wrap: anywhere; }
/* paths, headers and commands read left to right even inside Hebrew prose */
[dir="rtl"] .ap-inner :not(pre) > code, [dir="rtl"] .ap-tools code, [dir="rtl"] .ap-urlbox code, [dir="rtl"] .ap-lede code { direction: ltr; unicode-bidi: isolate; }
.ap-inner .ap-sec-tight { padding-block: 40px 72px; }
.ap-inner .ap-sec-flush { padding-block: 0 72px; }
@media (min-width: 900px) { .ap-inner .ap-sec-tight { padding-block: 56px 104px; } .ap-inner .ap-sec-flush { padding-block: 0 104px; } }
.ap-inner .ap-sec-ed > h2 { font-size: clamp(1.9rem, 2.6vw + .8rem, 3rem); font-weight: 700; line-height: 1.07; letter-spacing: -.036em; text-wrap: balance; }
.ap-inner .ap-sec-ed > h2:lang(he) { letter-spacing: 0; line-height: 1.15; }
@media (min-width: 900px) { .ap-inner .ap-sec-ed-1 { grid-template-columns: minmax(0, 1fr); } .ap-inner .ap-sec-ed-1 .ap-idx { margin-block-end: 0; } .ap-inner .ap-sec-ed-1 > h2 { max-inline-size: 24ch; } }
.ap-inner .ap-idx > span + span { color: var(--a-text-2); font-family: var(--a-font); font-weight: 600; }
.ap-inner .ap-idx:lang(he) > span + span { font-family: inherit; }

/* ---------- the header ---------- */
.ap-ihero { position: relative; isolation: isolate; padding-block: 24px 40px; }
.ap-ihero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--a-brand-tint), var(--a-bg) 82%); }
.ap-ih-grid { display: grid; gap: 32px; align-items: center; }
.ap-ih-grid > * { min-inline-size: 0; }
.ap-ihero .ds-crumbs { margin-block-end: 18px; font-size: 13px; color: var(--a-text-3); }
.ap-ihero .ds-crumbs a:hover { color: var(--a-text); }
.ap-ih-h1 { font-size: clamp(2.3rem, 2.6vw + 1.25rem, 3.9rem); font-weight: 700; line-height: 1.04; letter-spacing: -.046em; max-inline-size: 17ch; text-wrap: balance; }
.ap-ih-h1:lang(he) { letter-spacing: -.01em; line-height: 1.12; }
.ap-ih-solo .ap-ih-h1 { max-inline-size: 21ch; }
.ap-ih-lede { margin-block-start: 16px; max-inline-size: 38rem; }
.ap-ih-meta { display: flex; align-items: center; gap: 6px; margin-block-start: 14px; font-size: 13px; color: var(--a-text-3); }
.ap-ihero .ap-cta-row { margin-block-start: 24px; }
.ap-ih-vis { min-inline-size: 0; }
@media (min-width: 900px) {
  .ap-ihero { padding-block: 40px 64px; }
  .ap-ih-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; }
  .ap-ih-solo { grid-template-columns: minmax(0, 1fr); }
  .ap-ih-solo .ap-ih-lede { max-inline-size: 44rem; }
}
@media (min-width: 1200px) { .ap-ih-grid { gap: 80px; } }
/* 404: the code is the headline's eyebrow, set large */
.ap-ihero-404 .ap-idx { font-family: var(--a-font); font-size: clamp(4.2rem, 9vw, 7.5rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: var(--a-accent); margin-block-end: 14px; }
.ap-ihero-404 .ap-idx::after { display: none; }

/* the product card beside a header */
.ap-hv { position: relative; border-radius: 26px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-lg); padding: 18px; font-size: 14px; line-height: 1.4; min-inline-size: 0; }
.ap-hv > * + * { margin-block-start: 10px; }
.ap-hv .ap-k { margin-block-end: 4px; }
.ap-hv-cap { font-size: 13px; color: var(--a-text-2); }
.ap-hv-sp { block-size: 2px; }
.ap-hv-big > b { display: block; font-size: clamp(3rem, 4vw + 1rem, 4.4rem); font-weight: 700; letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--a-accent-text); text-align: start; }
[dir="rtl"] .ap-hv-big > b { text-align: end; }
.ap-hv-big > span { display: block; color: var(--a-text-2); font-size: 14px; margin-block-start: 6px; }
.ap-hv .ap-funnel { margin-block-start: 14px; }
.ap-hv-thread { margin-block-start: 14px; }
.ap-inner .ap-sc-dm .ap-bub:not(.ap-me) { align-self: flex-start; background: var(--a-bubble-them); color: var(--a-bubble-them-text); border-end-start-radius: 6px; }
.ap-hv-stack { position: relative; }
.ap-hv-stack .ap-hv-float { margin: -28px 0 0 auto; inline-size: min(300px, 92%); background: var(--a-glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border-color: var(--a-glass-line); }
[dir="rtl"] .ap-hv-stack .ap-hv-float { margin: -28px auto 0 0; }
@media (min-width: 600px) {
  .ap-hv-stack { padding-block-end: 120px; }
  .ap-hv-stack .ap-scene { inline-size: 86%; }
  .ap-hv-stack .ap-hv-float { position: absolute; inset-inline-end: 0; inset-block-end: 0; margin: 0; inline-size: 300px; }
  [dir="rtl"] .ap-hv-stack .ap-hv-float { margin: 0; }
}
.ap-mini-inbox { display: grid; gap: 2px; margin-inline: -6px; }
.ap-mini-inbox .ap-mk-row { padding: 8px; }
.ap-hv-inbox .ap-inote { margin-block-start: 12px; }
.ap-mini { display: grid; gap: 8px; font-size: 13px; }
.ap-mini .ap-cm { padding-block: 4px; }
.ap-mini .ap-cell { block-size: 46px; }
.ap-mini .ap-bars { block-size: 72px; }
.ap-mini .ap-mk-row p { font-size: 12px; }

/* the MCP connection card */
.ap-setup .ap-urlbox { margin-block-start: 0; max-inline-size: none; }
.ap-setup-dl { margin: 6px 0 0; display: grid; }
.ap-setup-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 11px; border-block-start: 1px solid var(--a-line); }
.ap-setup-dl dt { color: var(--a-text-3); font-size: 13.5px; }
.ap-setup-dl dd { margin: 0; font-weight: 600; text-align: end; font-size: 14px; }
.ap-setup-ea { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--a-green-soft); color: var(--a-green); font-size: 13.5px; font-weight: 600; line-height: 1.35; }

/* the server URL with its copy button */
.ap-urlbox { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-block: 22px 0; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--a-surface); border: 1px solid var(--a-line-2); max-inline-size: 34rem; }
[dir="rtl"] .ap-urlbox { padding: 10px 16px 10px 10px; }
.ap-urlbox-k { flex: 1 1 auto; font-size: 12px; font-weight: 600; color: var(--a-text-3); }
.ap-inner .ap-urlbox code { order: 2; flex: 1 1 100%; min-inline-size: 0; font-family: var(--a-mono); font-size: 14.5px; color: var(--a-text); background: none; border: 0; padding: 0; white-space: normal; overflow-wrap: normal; word-break: normal; }
/* label and Copy share the top line; the value gets its own line and wraps only between tokens */
.ap-urlbox .ap-copy { order: 1; }
.ap-nw { white-space: nowrap; }
.ap-urlbox-ink { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.ap-inner .ap-urlbox-ink code { color: #fff; }
.ap-urlbox-ink .ap-urlbox-k { color: #9a97bb; }
.ap-urlbox-ink .ap-copy { background: rgba(255, 255, 255, .12); color: #fff; }
.ap-sec-ed + .ap-urlbox { margin-block: 0 20px; }

/* the copy button: ships hidden, apple.js shows it where the clipboard works */
.ap-copy { display: inline-flex; align-items: center; gap: 6px; flex: none; min-block-size: 36px; padding-inline: 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--a-accent-text); background: var(--a-accent-soft); transition: background .2s, color .2s, transform .3s var(--a-spring); }
.ap-copy:hover { background: color-mix(in srgb, var(--a-accent) 18%, transparent); }
.ap-copy:active { transform: scale(.95); }
.ap-copy.is-done { color: var(--a-green); background: var(--a-green-soft); }

/* ---------- /mcp and its guides: the add buttons, the Claude Code row, the demo run ----------
   Built from parts already on the page: the hero's buttons, the URL box, the home page's tool
   lines (.ap-tool-lines) and the agent chat's dark panel (.ap-agchat). */
.ap-btn-ink2 { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ap-btn-ink2:hover { background: rgba(255, 255, 255, .16); }
.ap-connect .ap-add { flex: 1 1 12rem; }
@media (min-width: 600px) { .ap-connect .ap-add { flex: none; } }
.ap-connect-notes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; max-inline-size: 34rem; font-size: 14px; line-height: 1.45; color: var(--a-text-2); }
.ap-connect-notes li { display: flex; gap: 8px; align-items: flex-start; }
.ap-connect-notes .ap-ico { flex: none; margin-block-start: 2px; color: var(--a-text-3); }
.ap-ihero-ink .ap-connect-notes { color: #b3b1cc; }
.ap-ihero-ink .ap-connect-notes .ap-ico { color: #9a97bb; }
.ap-connect-status { margin: 12px 0 0; max-inline-size: 34rem; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--a-green); }
.ap-connect-status:empty { display: none; }
.ap-connect-status.is-fail { color: var(--a-orange); }
.ap-ihero-ink .ap-connect-status { color: #30d158; }
.ap-ihero-ink .ap-connect-status.is-fail { color: #ff9f0a; }
.ap-urlbox.ap-urlbox-multi, [dir="rtl"] .ap-urlbox.ap-urlbox-multi { display: block; padding: 0; }
.ap-urlbox-multi > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 10px 10px 16px; }
[dir="rtl"] .ap-urlbox-multi > div { padding: 10px 16px 10px 10px; }
.ap-urlbox-multi > div + div { border-block-start: 1px solid var(--a-line); }
.ap-urlbox-ink.ap-urlbox-multi > div + div { border-block-start-color: rgba(255, 255, 255, .1); }
.ap-inner .ap-urlbox-multi > div + div code { font-size: 13px; }

.ap-demo { display: grid; gap: 28px; }
.ap-demo > .ap-sec-ed { margin: 0; }
@media (min-width: 900px) { .ap-demo { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: center; } }
.ap-run { margin: 0; min-inline-size: 0; padding: 18px; border-radius: 28px; background: var(--a-band-2); border: 1px solid rgba(255, 255, 255, .07); box-shadow: var(--a-shadow-lg); color: #f2f1fa; }
@media (min-width: 900px) { .ap-run { padding: 22px; } }
.ap-run-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-block-end: 16px; }
.ap-run-app { font-size: 13px; font-weight: 600; color: #b3b1cc; padding: 4px 12px; border-radius: 999px; background: var(--a-band-3); }
.ap-run-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ap-run-step { display: flex; flex-direction: column; min-inline-size: 0; }
.ap-run-step:first-child { margin-block-end: 7px; }
.ap-run-step:last-child { margin-block-start: 7px; }
.ap-run-step > p { margin: 0; }
.ap-run-call { text-align: left; flex-direction: row; flex-wrap: wrap; gap: 2px 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); color: #dedcf4; font-size: 12.5px; }
.ap-inner .ap-run-call code { font-family: var(--a-mono); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: break-word; min-inline-size: 0; flex: 1 1 14rem; letter-spacing: 0; background: none; border: 0; border-radius: 0; padding: 0; color: inherit; }
.ap-run-call .ap-ok { color: #30d158; }
.ap-run-call em { font-style: normal; color: #a8a5c8; margin-inline-start: auto; flex: none; }
/* the run plays once, in order, when the panel is revealed; at rest (no JS, reduced motion,
   paused) every line is already there */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .ap-run.is-in .ap-run-step { animation: ap-chatin .5s var(--a-spring) both; animation-delay: calc(.3s + var(--i) * .5s); }
}

/* ---------- the parts of a section ---------- */
.ap-checks { display: grid; gap: 12px; }
.ap-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.5; }
.ap-checks li > .ap-ico, .ap-points li > .ap-ico { inline-size: 22px; block-size: 22px; padding: 4px; border-radius: 50%; background: var(--a-green-soft); color: var(--a-green); stroke-width: 2.6; margin-block-start: 1px; }
.ap-checks a, .ap-points a, .ap-callout a, .ap-steps a, .ap-dt a, .ap-vs a, .ap-plan-note a, .ap-snotes a, .ap-fine a, .ap-contact a, .ap-founder a, .ap-indep a, .ap-term dd a, .ap-cl-intro a { color: var(--a-accent-text); font-weight: 500; }
.ap-checks a:hover, .ap-points a:hover, .ap-callout a:hover, .ap-steps a:hover, .ap-dt a:hover, .ap-vs a:hover, .ap-plan-note a:hover, .ap-snotes a:hover, .ap-fine a:hover, .ap-contact a:hover, .ap-founder a:hover, .ap-term dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ap-points { display: grid; gap: 12px; }
.ap-points li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: var(--a-surface); border: 1px solid var(--a-card-line); font-size: 15.5px; line-height: 1.55; color: var(--a-text-2); }
.ap-points li > .ap-ico { background: var(--a-accent-soft); color: var(--a-accent-text); }
.ap-points li strong:first-child { color: var(--a-text); font-weight: 600; }
.ap-points li > div { min-inline-size: 0; }
@media (min-width: 900px) { .ap-points-grid, .ap-points-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.ap-tint .ap-points li { box-shadow: var(--a-shadow-sm); }

.ap-steps { display: grid; gap: 12px; }
.ap-steps li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px 16px 14px; border-radius: 20px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-sm); }
[dir="rtl"] .ap-steps li { padding: 16px 14px 16px 18px; }
.ap-steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 30px; inset-block: 50px -13px; inline-size: 2px; background: var(--a-brand-line); }
.ap-step-n { inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--a-accent); color: #fff; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.ap-steps li > div { padding-block-start: 4px; font-size: 16.5px; line-height: 1.5; min-inline-size: 0; overflow-wrap: break-word; }

.ap-callout { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: var(--a-brand-tint); border: 1px solid var(--a-brand-line); }
.ap-callout > .ap-ico { color: var(--a-accent-text); margin-block-start: 2px; }
.ap-callout p { font-size: 15.5px; line-height: 1.55; color: var(--a-text); min-inline-size: 0; overflow-wrap: break-word; }

.ap-dt-wrap { border-radius: 22px; border: 1px solid var(--a-card-line); background: var(--a-surface); overflow: hidden; }
.ap-dt { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.ap-dt caption { text-align: start; padding: 14px 18px 0; font-size: 13px; color: var(--a-text-3); }
.ap-dt thead { display: none; }
.ap-dt tr { display: block; padding: 14px 18px; border-block-end: 1px solid var(--a-line); }
.ap-dt tbody tr:last-child { border-block-end: 0; }
.ap-dt th[scope="row"] { display: block; text-align: start; font-weight: 600; font-size: 16px; line-height: 1.35; margin-block-end: 6px; }
.ap-dt td { display: block; padding-block: 3px; color: var(--a-text-2); line-height: 1.5; overflow-wrap: anywhere; }
.ap-dt td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--a-text-3); }
:lang(he) .ap-dt td[data-label]::before { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.ap-dt td + td { margin-block-start: 6px; }
.ap-dt-2 td[data-label]::before { display: none; }
@media (min-width: 600px) {
  .ap-dt thead { display: table-header-group; }
  .ap-dt tr { display: table-row; padding: 0; border: 0; }
  .ap-dt th, .ap-dt td { display: table-cell; padding: 14px 18px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--a-line); margin: 0; }
  .ap-dt td + td { margin: 0; }
  .ap-dt tbody tr:last-child > * { border-block-end: 0; }
  .ap-dt thead th { font-size: 12.5px; font-weight: 700; color: var(--a-text-3); background: var(--a-bg-2); letter-spacing: .03em; }
  .ap-dt th[scope="row"] { font-size: 15px; margin: 0; inline-size: 30%; }
  .ap-dt-2 th[scope="row"] { inline-size: 36%; }
  .ap-dt td[data-label]::before { display: none; }
}

.ap-code { margin: 0; border-radius: 18px; background: var(--a-band); border: 1px solid rgba(255, 255, 255, .07); overflow: hidden; box-shadow: var(--a-shadow-md); color: #e9e7ff; }
.ap-code figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-block-size: 48px; padding: 6px 8px 6px 16px; border-block-end: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; font-weight: 600; color: #a8a5c8; }
[dir="rtl"] .ap-code figcaption { padding: 6px 16px 6px 8px; }
.ap-code figcaption > span { display: inline-flex; align-items: center; gap: 8px; }
.ap-code .ap-copy { background: rgba(255, 255, 255, .09); color: #e4e2ff; }
.ap-code .ap-copy:hover { background: rgba(255, 255, 255, .16); }
.ap-code .ap-copy.is-done { background: rgba(48, 209, 88, .16); color: #30d158; }
.ap-code pre.ds-code { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--a-mono); font-size: 13.5px; line-height: 1.65; color: #e9e7ff; background: none; border: 0; border-radius: 0; box-shadow: none; white-space: pre; tab-size: 2; text-align: left; }
.ap-code pre.ds-code code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; overflow-wrap: normal; }

.ap-tchat { border-radius: 24px; background: var(--a-band-2); padding: 16px; color: #f2f1fa; box-shadow: var(--a-shadow-lg); }
.ap-tchat-top { display: flex; align-items: center; gap: 8px; margin-block-end: 12px; font-size: 12.5px; color: #9a97bb; }
.ap-tchat-msgs { display: flex; flex-direction: column; gap: 10px; }
.ap-tmsg { max-inline-size: 88%; padding: 10px 14px; border-radius: 20px; overflow-wrap: break-word; }
.ap-tmsg b { display: block; font-size: 11.5px; font-weight: 700; margin-block-end: 2px; }
.ap-tmsg p { font-size: 15px; line-height: 1.5; }
.ap-tmsg-you { align-self: flex-end; background: #6a5cff; color: #fff; border-end-end-radius: 6px; }
.ap-tmsg-agent { align-self: flex-start; background: var(--a-band-3); border-end-start-radius: 6px; }
.ap-inner .ap-tmsg code { background: rgba(255, 255, 255, .1); border-color: transparent; color: inherit; }
.ap-inner .ap-tmsg strong { color: inherit; }
.ap-tmsg a { color: #c4bdff; }
.ap-tchat-wa { background: #0b141a; }
.ap-tchat-wa .ap-tmsg-you { background: #005c4b; }
.ap-tchat-wa .ap-tmsg-agent { background: #1f2c34; }

.ap-caps { display: grid; border-block-start: 1px solid var(--a-line); }
.ap-caps li { display: flex; gap: 16px; align-items: flex-start; padding-block: 22px; border-block-end: 1px solid var(--a-line); }
.ap-cap-ico { inline-size: 44px; block-size: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--hue) 12%, transparent); color: var(--hue); }
.ap-caps h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.ap-caps p { margin-block-start: 4px; color: var(--a-text-2); font-size: 15.5px; line-height: 1.5; }
@media (min-width: 600px) { .ap-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1200px) { .ap-wrap > .ap-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; } }
[data-theme="dark"] .ap-cap-ico { color: color-mix(in srgb, var(--hue) 55%, #fff); background: color-mix(in srgb, var(--hue) 22%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ap-cap-ico { color: color-mix(in srgb, var(--hue) 55%, #fff); background: color-mix(in srgb, var(--hue) 22%, transparent); } }

.ap-tiles { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.ap-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 64px 22px 22px; border-radius: 22px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-sm); color: var(--a-text); min-inline-size: 0; transition: transform .5s var(--a-spring), box-shadow .4s var(--a-ease); }
[dir="rtl"] .ap-tile { padding: 22px 22px 22px 64px; }
div.ap-tile { padding: 22px; }
a.ap-tile:hover { transform: translateY(-3px); box-shadow: var(--a-shadow-lg); }
.ap-tile-ico { inline-size: 40px; block-size: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--a-accent-soft); color: var(--a-accent-text); margin-block-end: 8px; }
.ap-tile h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.ap-tile p { color: var(--a-text-2); font-size: 15px; line-height: 1.5; }
.ap-tile-go { position: absolute; inset-block-start: 26px; inset-inline-end: 20px; inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--a-surface-2); color: var(--a-text-2); transition: background .25s, color .25s, translate .35s var(--a-spring); }
a.ap-tile:hover .ap-tile-go { background: var(--a-accent); color: #fff; translate: 3px 0; }
[dir="rtl"] a.ap-tile:hover .ap-tile-go { translate: -3px 0; }
@media (min-width: 600px) { .ap-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ap-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

/* ---------- a feature page: editorial rows ---------- */
.ap-frows-sec { padding-block: 24px 64px; }
.ap-frow { display: grid; gap: 18px; padding-block: 40px; border-block-start: 1px solid var(--a-line); scroll-margin-block-start: calc(var(--nav-bottom) + 24px); }
.ap-frow:first-child { border-block-start: 0; padding-block-start: 16px; }
.ap-frow-h { display: grid; gap: 10px; align-content: start; }
.ap-frow-n { font-family: var(--a-mono); font-size: 13px; font-weight: 600; color: var(--a-accent-text); }
.ap-frow-h h2 { font-size: clamp(1.65rem, 1.5vw + 1.05rem, 2.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -.036em; text-wrap: balance; }
.ap-frow-h h2:lang(he) { letter-spacing: 0; line-height: 1.18; }
.ap-frow-b { min-inline-size: 0; max-inline-size: 46rem; }
@media (min-width: 900px) {
  .ap-frows-sec { padding-block: 32px 96px; }
  .ap-frow { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; padding-block: 64px; }
  .ap-frow:first-child { padding-block-start: 24px; }
  .ap-frow-h { position: sticky; inset-block-start: calc(var(--nav-bottom) + 32px); align-self: start; }
}

/* the reading flow every text container shares */
.ap-frow-b > * + *, .ap-asec > * + *, .ap-panel > * + *, .ap-box > * + *, .ap-vs-col > * + *, .ap-report > div > * + * { margin-block-start: 20px; }
.ap-frow-b > p, .ap-asec > p, .ap-panel > p, .ap-box > p, .ap-report p { color: var(--a-text-2); font-size: 17px; line-height: 1.62; max-inline-size: 44rem; overflow-wrap: break-word; }
.ap-frow-b > p a, .ap-asec > p a, .ap-panel > p a, .ap-box > p a { color: var(--a-accent-text); font-weight: 500; }
.ap-frow-b > p a:hover, .ap-asec > p a:hover, .ap-panel > p a:hover, .ap-box > p a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ap-inner strong { color: var(--a-text); font-weight: 600; }
.ap-frow-b > p:first-child { font-size: 18px; color: var(--a-text); }
.ap-frow-b > .ap-prompts-k + .ap-prompts, .ap-asec > .ap-prompts-k + .ap-prompts { margin-block-start: 10px; }

.ap-prompts-k { font-size: 13px; font-weight: 600; color: var(--a-text-3); }
.ap-prompts { display: grid; gap: 10px; }
.ap-prompt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 12px 14px 16px; border-radius: 22px 22px 22px 8px; background: var(--a-brand-tint); border: 1px solid var(--a-brand-line); }
[dir="rtl"] .ap-prompt { padding: 14px 16px 14px 12px; border-radius: 22px 22px 8px 22px; }
.ap-prompt > .ap-ico { color: var(--a-accent-text); margin-block-start: 3px; }
.ap-prompt p { font-size: 16px; line-height: 1.5; color: var(--a-text); min-inline-size: 0; overflow-wrap: break-word; }
.ap-prompt .ap-copy { margin-block-start: -4px; }
@media (min-width: 900px) { .ap-prompts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* ---------- the FAQ, the rail ---------- */
.ap-inner .ap-faq { border-block-start: 1px solid var(--a-line); }
.ap-inner .ds-q { border-block-end: 1px solid var(--a-line); }
.ap-inner .ds-q summary { align-items: center; min-block-size: 64px; padding-block: 14px; font-family: inherit; font-weight: 600; font-size: 18px; line-height: 1.35; letter-spacing: -.02em; font-variation-settings: normal; transition: color .2s; }
.ap-inner .ds-q summary:lang(he) { letter-spacing: 0; font-weight: 600; line-height: 1.4; }
.ap-inner .ds-q summary:hover { color: var(--a-accent-text); }
.ap-inner .ds-q summary .ap-ico { color: var(--a-text-2); transition: transform .3s var(--a-ease); }
.ap-inner .ds-q[open] summary .ap-ico { transform: rotate(45deg); }
.ap-inner .ds-a { padding-block-end: 22px; }
.ap-inner .ds-a p { color: var(--a-text-2); font-size: 16.5px; line-height: 1.6; max-inline-size: 640px; }
.ap-inner .ds-a a { color: var(--a-accent-text); font-weight: 500; }

.ap-next { padding-block: 64px 8px; }
.ap-next-h { margin-block-end: 20px; }
.ap-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--a-gutter); margin-inline: calc(-1 * var(--a-gutter)); padding: 4px var(--a-gutter) 18px; scrollbar-width: none; }
.ap-rail::-webkit-scrollbar { display: none; }
.ap-rail > .ap-rcard { flex: 0 0 82%; scroll-snap-align: start; }
.ap-rcard { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 22px; background: var(--a-bg-2); border: 1px solid var(--a-card-line); color: var(--a-text); min-block-size: 210px; transition: transform .5s var(--a-spring), box-shadow .4s var(--a-ease), background .3s; }
.ap-rcard h3 { font-size: 19px; font-weight: 700; letter-spacing: -.022em; line-height: 1.22; }
.ap-rcard p { color: var(--a-text-2); font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ap-rcard-go { margin-block-start: auto; inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--a-surface); color: var(--a-accent-text); transition: background .25s, color .25s; }
.ap-rcard:hover { transform: translateY(-3px); box-shadow: var(--a-shadow-lg); background: var(--a-surface); }
.ap-rcard:hover .ap-rcard-go { background: var(--a-accent); color: #fff; }
@media (min-width: 600px) { .ap-rail > .ap-rcard { flex-basis: 46%; } }
@media (min-width: 900px) {
  .ap-next { padding-block: 88px 16px; }
  .ap-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; margin-inline: 0; padding: 0; gap: 16px; }
}

/* ---------- the article layout (guides, docs) ---------- */
.ap-art-sec { padding-block: 8px 72px; }
.ap-art { display: grid; gap: 28px; }
.ap-art-main { min-inline-size: 0; max-inline-size: 46rem; }
.ap-art-docs .ap-art-main { max-inline-size: 52rem; }
.ap-asec { scroll-margin-block-start: calc(var(--nav-bottom) + 24px); }
.ap-asec + .ap-asec { margin-block-start: 48px; padding-block-start: 44px; border-block-start: 1px solid var(--a-line); }
.ap-asec > h2 { font-size: clamp(1.6rem, 1.3vw + 1.05rem, 2.2rem); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.ap-asec > h2:lang(he) { letter-spacing: 0; line-height: 1.2; }
.ap-toc { border-radius: 18px; background: var(--a-bg-2); border: 1px solid var(--a-card-line); }
.ap-toc summary { list-style: none; display: flex; align-items: center; gap: 10px; min-block-size: 48px; padding-inline: 16px; font-size: 14px; font-weight: 600; cursor: pointer; }
.ap-toc summary::-webkit-details-marker { display: none; }
.ap-toc-chev { margin-inline-start: auto; transform: rotate(90deg); transition: transform .3s var(--a-ease); color: var(--a-text-3); }
.ap-toc[open] .ap-toc-chev { transform: rotate(-90deg); }
.ap-toc ol { display: grid; gap: 2px; padding: 0 8px 10px; }
.ap-toc a { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 10px; font-size: 14px; line-height: 1.35; color: var(--a-text-2); transition: background .2s, color .2s; }
.ap-toc a:hover { background: var(--a-surface); color: var(--a-text); }
.ap-toc a[aria-current="true"] { color: var(--a-accent-text); background: var(--a-accent-soft); font-weight: 600; }
.ap-toc-sub a { padding-inline-start: 24px; font-size: 13px; }
.ap-toc-n { flex: none; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; transform: translateY(-1px); }
.ap-toc a[aria-current="true"] .ap-toc-n { background: var(--a-accent); border-color: var(--a-accent); color: #fff; }
@media (pointer: coarse) { .ap-toc a { padding-block: 11px; } }
@media (min-width: 900px) { .ap-art-sec { padding-block: 16px 104px; } }
@media (min-width: 1200px) {
  .ap-art { grid-template-columns: 250px minmax(0, 1fr); gap: 72px; align-items: start; }
  .ap-art-side { position: sticky; inset-block-start: calc(var(--nav-bottom) + 28px); max-block-size: calc(100vh - var(--nav-bottom) - 48px); max-block-size: calc(100dvh - var(--nav-bottom) - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-block-end: 8px; }
  .ap-toc { background: none; border: 0; border-radius: 0; }
  .ap-toc summary { pointer-events: none; min-block-size: 32px; padding-inline: 12px; font-size: 12.5px; color: var(--a-text-3); }
  .ap-toc summary .ap-ico { display: none; }
  .ap-toc ol { padding: 6px 0 0; border-inline-start: 1px solid var(--a-line); gap: 0; }
  .ap-toc a { border-radius: 0; margin-inline-start: -1px; border-inline-start: 2px solid transparent; padding-block: 7px; }
  .ap-toc a:hover { background: none; }
  .ap-toc a[aria-current="true"] { background: none; border-inline-start-color: var(--a-accent); }
}

/* the reference and the changelog: long-form Markdown */
.ap-prose { color: var(--a-text-2); font-size: 16.5px; line-height: 1.7; min-inline-size: 0; }
.ap-prose > * + * { margin-block-start: 16px; }
.ap-prose p, .ap-prose li { overflow-wrap: break-word; }
.ap-prose a, .ap-prose code { overflow-wrap: anywhere; }
.ap-prose h2, .ap-prose h3, .ap-prose h4 { color: var(--a-text); scroll-margin-block-start: calc(var(--nav-bottom) + 24px); }
.ap-prose h2 { font-size: clamp(1.6rem, 1.1vw + 1.15rem, 2.1rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; margin-block-start: 64px; padding-block-start: 40px; border-block-start: 1px solid var(--a-line); }
.ap-prose h2:first-child { margin-block-start: 0; padding-block-start: 0; border: 0; }
.ap-prose h3 { font-size: 1.28rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin-block-start: 40px; }
.ap-prose h4 { font-size: 1.05rem; font-weight: 600; margin-block-start: 28px; }
.ap-prose ul, .ap-prose ol { padding-inline-start: 1.3em; list-style: revert; display: grid; gap: 6px; }
.ap-prose li::marker { color: var(--a-accent-text); }
.ap-prose a { color: var(--a-accent-text); font-weight: 500; }
.ap-prose a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ap-prose blockquote { border-inline-start: 3px solid var(--a-accent); padding-block: 2px; padding-inline-start: 16px; color: var(--a-text); }
.ap-prose hr { border: 0; border-block-start: 1px solid var(--a-line); margin-block: 40px; }
.ap-prose .ap-code { margin-block: 20px; }
.ap-prose .ds-table-wrap { border-radius: 16px; border: 1px solid var(--a-card-line); background: var(--a-surface); overflow-x: auto; }
.ap-prose .ds-table-wrap table { inline-size: 100%; min-inline-size: 520px; font-size: 14px; border-collapse: collapse; }
.ap-prose .ds-table-wrap th, .ap-prose .ds-table-wrap td { padding: 10px 14px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--a-line); line-height: 1.5; }
.ap-prose .ds-table-wrap thead th { background: var(--a-bg-2); font-size: 12.5px; font-weight: 700; color: var(--a-text-3); }
.ap-prose .ds-table-wrap tbody tr:last-child > * { border-block-end: 0; }
.ap-docs-intro { margin-block: 4px 40px; color: var(--a-text-2); font-size: 15.5px; }
.ap-docs-intro a { color: var(--a-accent-text); font-weight: 500; }
.ap-art-main > .ap-callout:first-child { margin-block-end: 24px; }

/* ---------- the changelog ---------- */
.ap-clog { max-inline-size: 66rem; }
.ap-clog-wrap > .ap-callout { margin-block-end: 28px; max-inline-size: 44rem; }
.ap-cl-intro { color: var(--a-text-2); font-size: 15px; margin-block-end: 24px; }
.ap-cl { display: grid; gap: 12px; padding-block: 28px; border-block-start: 1px solid var(--a-line); scroll-margin-block-start: calc(var(--nav-bottom) + 24px); }
.ap-cl-date { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; color: var(--a-accent-text); }
.ap-cl-body { min-inline-size: 0; }
.ap-cl-body h2 { font-size: clamp(1.4rem, .9vw + 1.1rem, 1.9rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-block-end: 14px; text-wrap: balance; }
.ap-cl-body .ap-prose { font-size: 16px; }
.ap-cl-body .ap-prose ul { list-style: none; padding: 0; gap: 12px; }
.ap-cl-body .ap-prose li { position: relative; padding-inline-start: 20px; }
.ap-cl-body .ap-prose li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .66em; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--a-accent); }
@media (min-width: 900px) {
  .ap-cl { grid-template-columns: 210px minmax(0, 1fr); gap: 0; padding-block: 0; border: 0; }
  .ap-cl-date { position: sticky; inset-block-start: calc(var(--nav-bottom) + 28px); align-self: start; flex-direction: column; align-items: flex-start; padding-block-start: 40px; }
  .ap-cl-body { position: relative; padding-block: 40px; padding-inline-start: 40px; border-inline-start: 1px solid var(--a-line); }
  .ap-cl-body::before { content: ""; position: absolute; inset-inline-start: -7px; inset-block-start: 48px; inline-size: 13px; block-size: 13px; border-radius: 50%; background: var(--a-bg); border: 2px solid var(--a-accent); }
  .ap-cl:first-of-type .ap-cl-body::before { background: var(--a-accent); box-shadow: 0 0 0 5px var(--a-accent-soft); }
}

/* ---------- the glossary ---------- */
.ap-letters { position: sticky; inset-block-start: var(--nav-bottom); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-block-end: 24px; padding-block: 12px; background: color-mix(in srgb, var(--a-bg) 90%, transparent); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-block-end: 1px solid var(--a-line); }
.ap-letters-n { font-size: 13px; font-weight: 600; color: var(--a-text-3); margin-inline-end: 8px; }
.ap-letters a { min-inline-size: 40px; block-size: 40px; padding-inline: 6px; display: grid; place-items: center; border-radius: 12px; background: var(--a-bg-2); font-size: 15px; font-weight: 600; color: var(--a-text); transition: background .2s, color .2s; }
.ap-letters a:hover { background: var(--a-accent); color: #fff; }
.ap-gloss { display: grid; gap: 14px; margin: 0; }
.ap-term { padding: 22px; border-radius: 22px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-sm); scroll-margin-block-start: calc(var(--nav-bottom) + 84px); transition: border-color .3s, box-shadow .3s; }
.ap-term:target { border-color: var(--a-accent); box-shadow: 0 0 0 4px var(--a-accent-soft), var(--a-shadow-md); }
.ap-term dt { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.ap-term-a { flex: none; inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--a-text-3); transition: background .2s, color .2s; }
.ap-term-a:hover { background: var(--a-accent-soft); color: var(--a-accent-text); }
.ap-term dd { margin: 6px 0 0; color: var(--a-text-2); font-size: 15.5px; line-height: 1.6; }
@media (min-width: 900px) { .ap-gloss { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* ---------- the hubs ---------- */
.ap-fbento { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.ap-fbento > .ap-fbt { color: var(--a-text); padding-block-end: 22px; }
.ap-fbt .ap-viz { padding-block-start: 10px; }
.ap-fbt .ap-bt-more { padding-block-start: 14px; }
@media (min-width: 600px) { .ap-fbento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ap-fbento > .ap-fbt:first-child, .ap-fbento > .ap-fbt:last-child { grid-column: 1 / -1; } }
@media (min-width: 1200px) {
  .ap-fbento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .ap-fbento > .ap-fbt, .ap-fbento > .ap-fbt:last-child { grid-column: span 4; }
  .ap-fbento > .ap-fbt.ap-c7, .ap-fbento > .ap-fbt:first-child { grid-column: span 7; }
  .ap-fbento > .ap-fbt.ap-c5 { grid-column: span 5; }
  .ap-fbento > .ap-fbt.ap-c6 { grid-column: span 6; }
}
.ap-notes-4, .ap-notes-3, .ap-notes-2, .ap-notes-1 { margin-block-start: 0; }
@media (min-width: 900px) { .ap-notes-4, .ap-notes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ap-notes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ap-notes span { line-height: 1.55; }
.ap-notes + .ap-callout, .ap-points + .ap-callout { margin-block-start: 28px; max-inline-size: 52rem; }

.ap-xlist { border-block-start: 1px solid var(--a-line); }
.ap-xrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 24px 4px; border-block-end: 1px solid var(--a-line); color: var(--a-text); transition: background .25s; }
.ap-xrow:hover { background: var(--a-bg-2); }
.ap-xrow-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: clamp(1.45rem, 1.2vw + 1.05rem, 2.1rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; }
.ap-xrow-us { color: var(--a-text-3); font-weight: 600; }
.ap-xrow-vs { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--a-text-3); }
.ap-xrow-vs:lang(he) { letter-spacing: 0; font-size: 14px; }
.ap-xrow-d { grid-column: 1 / -1; color: var(--a-text-2); font-size: 15.5px; line-height: 1.5; max-inline-size: 40rem; }
.ap-xrow-go { grid-row: 1; grid-column: 2; inline-size: 44px; block-size: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--a-line-2); color: var(--a-text); transition: background .25s, color .25s, border-color .25s, translate .35s var(--a-spring); }
.ap-xrow:hover .ap-xrow-go { background: var(--a-accent); border-color: var(--a-accent); color: #fff; translate: 4px 0; }
[dir="rtl"] .ap-xrow:hover .ap-xrow-go { translate: -4px 0; }
@media (min-width: 900px) {
  .ap-xrow { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) auto; gap: 40px; padding: 30px 12px; }
  .ap-xrow-d, .ap-xrow-go { grid-row: auto; grid-column: auto; }
}

.ap-gcards { display: grid; gap: 16px; }
.ap-gcard { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border-radius: 28px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-md); color: var(--a-text); transition: transform .5s var(--a-spring), box-shadow .4s var(--a-ease); }
.ap-gcard:hover { transform: translateY(-4px); box-shadow: var(--a-shadow-lg); }
.ap-gcard h3 { font-size: clamp(1.4rem, 1vw + 1.05rem, 1.9rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.ap-gcard > p { color: var(--a-text-2); font-size: 15.5px; line-height: 1.5; }
.ap-gcard > .ap-gcard-k { margin-block-start: 10px; font-size: 12.5px; font-weight: 700; color: var(--a-text-3); }
.ap-gcard ol { display: grid; gap: 8px; counter-reset: apg; }
.ap-gcard li { counter-increment: apg; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.4; }
.ap-gcard li::before { content: counter(apg); inline-size: 24px; block-size: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--a-accent-soft); color: var(--a-accent-text); font-size: 12px; font-weight: 700; transform: translateY(-1px); }
.ap-gcard-foot { margin-block-start: auto; padding-block-start: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
@media (min-width: 900px) { .ap-gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .ap-gcard { padding: 34px 32px; } }

/* ---------- /mcp ---------- */
.ap-ihero-ink { padding-block: 28px 64px; }
.ap-ihero-ink::before { display: none; }
.ap-ihero-ink .ds-crumbs, .ap-ihero-ink .ds-crumbs a { color: #9a97bb; }
.ap-ihero-ink .ds-crumbs a:hover { color: #fff; }
.ap-ihero-ink .ap-ih-h1 { color: #fff; }
.ap-ihero-ink .ap-ih-meta { color: #9a97bb; }
.ap-ihero-ink .ap-agchat { margin: 0; }
.ap-ihero-ink .ap-link-arrow { color: #c4bdff; }
.ap-ihero-ink .ap-inner :not(pre) > code, .ap-ihero-ink .ap-lede code { background: rgba(255, 255, 255, .1); border-color: transparent; color: #fff; }
@media (min-width: 900px) { .ap-ihero-ink { padding-block: 44px 96px; } }
.ap-tools-box { min-inline-size: 0; }
.ap-tfilter { display: flex; align-items: center; gap: 10px; min-block-size: 50px; padding-inline: 16px 8px; margin-block-end: 12px; border-radius: 999px; background: var(--a-surface); border: 1px solid var(--a-line-2); max-inline-size: 30rem; color: var(--a-text-3); transition: border-color .2s, box-shadow .2s; }
.ap-tfilter:focus-within { border-color: var(--a-accent); box-shadow: 0 0 0 4px var(--a-accent-soft); }
.ap-tfilter input { flex: 1; min-inline-size: 0; block-size: 46px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--a-text); outline: none; }
.ap-tcount { flex: none; min-inline-size: 34px; padding: 3px 9px; border-radius: 999px; background: var(--a-surface-2); color: var(--a-text-2); font-size: 12.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.ap-small { font-size: 13px; color: var(--a-text-3); margin-block-end: 14px; }
.ap-inner .ap-tools code { background: none; border: 0; padding: 0; font-size: 13.5px; color: var(--a-accent-text); }
.ap-inner .ap-tools td code { color: var(--a-text-2); }
.ap-tools tr.ap-tgrp { background: var(--a-bg-2); padding-block: 10px; }
.ap-tools tr.ap-tgrp th { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--a-text-2); text-align: start; }
:lang(he) .ap-tools tr.ap-tgrp th { letter-spacing: 0; text-transform: none; font-size: 13px; }
.ap-tools tr.ap-tgrp th span { margin-inline-start: 8px; color: var(--a-text-3); font-weight: 600; }
.ap-tools th[scope="row"] code { overflow-wrap: anywhere; }
@media (min-width: 600px) { .ap-tools tr.ap-tgrp { padding: 0; } .ap-tools tr.ap-tgrp th { display: table-cell; padding-block: 10px; background: var(--a-bg-2); } .ap-tools th[scope="row"] { inline-size: 34%; } }
.ap-tnone { padding: 22px; text-align: center; color: var(--a-text-2); }
.ap-snotes { display: grid; gap: 12px; }
.ap-snotes > div { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 20px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-sm); }
.ap-snotes .ap-a-ico { background: var(--a-accent-soft); color: var(--a-accent-text); }
.ap-snotes p { color: var(--a-text-2); font-size: 15.5px; line-height: 1.55; min-inline-size: 0; overflow-wrap: break-word; }
@media (min-width: 900px) { .ap-snotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1200px) { .ap-snotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-snotes + .ap-callout { margin-block-start: 24px; max-inline-size: 52rem; }
.ap-plan-note { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: 24px; background: var(--a-brand-tint); border: 1px solid var(--a-brand-line); max-inline-size: 52rem; }
.ap-plan-note > .ap-ico { color: var(--a-accent-text); margin-block-start: 3px; }
.ap-plan-note p { font-size: 17px; line-height: 1.6; color: var(--a-text); }
.ap-plan-note p + p { margin-block-start: 10px; }
.ap-guides { margin-block-start: 36px; }
.ap-guides-k { font-size: 13px; font-weight: 700; color: var(--a-text-3); margin-block-end: 12px; }
.ap-guides-grid { display: grid; gap: 10px; }
.ap-gchip { display: flex; align-items: center; gap: 12px; min-block-size: 56px; padding: 10px 14px; border-radius: 16px; background: var(--a-surface); border: 1px solid var(--a-card-line); color: var(--a-text); transition: transform .4s var(--a-spring), box-shadow .3s; }
.ap-gchip:hover { transform: translateY(-2px); box-shadow: var(--a-shadow-md); }
.ap-gchip-ini { inline-size: 32px; block-size: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--a-accent-soft); color: var(--a-accent-text); font-weight: 700; font-size: 14px; }
.ap-gchip b { flex: 1; min-inline-size: 0; font-size: 15px; font-weight: 600; }
.ap-gchip .ap-ico { color: var(--a-text-3); }
@media (min-width: 600px) { .ap-guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ap-guides-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ap-guides-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- a comparison ---------- */
.ap-vs-lock { display: grid; justify-items: start; gap: 4px; padding: 28px; border-radius: 28px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-lg); }
.ap-vs-a, .ap-vs-b { font-size: clamp(2.3rem, 3.4vw + 1rem, 3.8rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.02; max-inline-size: 100%; overflow-wrap: anywhere; }
.ap-vs-a { color: var(--a-accent-text); }
.ap-vs-x { display: flex; align-items: center; gap: 12px; inline-size: 100%; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a-text-3); padding-block: 6px; }
.ap-vs-x:lang(he) { letter-spacing: 0; font-size: 14px; }
.ap-vs-x::after { content: ""; flex: 1; block-size: 1px; background: var(--a-line-2); }
.ap-vs-wrap { border-radius: 26px; border: 1px solid var(--a-card-line); background: var(--a-surface); overflow: clip; }
.ap-vs { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.ap-vs thead { display: none; }
.ap-vs tr { display: block; padding: 18px; border-block-end: 1px solid var(--a-line); }
.ap-vs tbody tr:last-child { border-block-end: 0; }
.ap-vs th[scope="row"] { display: block; text-align: start; font-size: 16px; font-weight: 700; margin-block-end: 10px; }
.ap-vs td { display: block; padding: 10px 12px; border-radius: 12px; line-height: 1.5; color: var(--a-text-2); overflow-wrap: anywhere; }
.ap-vs td + td { margin-block-start: 6px; }
.ap-vs td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; color: var(--a-text-3); margin-block-end: 2px; }
.ap-vs td.ap-vs-us { background: var(--a-brand-tint); color: var(--a-text); }
.ap-vs td.ap-vs-us::before { color: var(--a-accent-text); }
.ap-vs td:not(.ap-vs-us) { background: var(--a-bg-2); }
@media (min-width: 900px) {
  .ap-vs { table-layout: fixed; }
  .ap-vs thead { display: table-header-group; }
  .ap-vs tr { display: table-row; padding: 0; border: 0; }
  .ap-vs th, .ap-vs td { display: table-cell; padding: 18px 22px; vertical-align: top; text-align: start; border-block-end: 1px solid var(--a-line); border-radius: 0; margin: 0; }
  .ap-vs td + td { margin: 0; }
  .ap-vs tbody tr:last-child > * { border-block-end: 0; }
  .ap-vs td::before { display: none; }
  .ap-vs th[scope="row"] { inline-size: 24%; font-size: 15px; font-weight: 600; margin: 0; }
  .ap-vs td:not(.ap-vs-us) { background: none; }
  .ap-vs td.ap-vs-us { background: color-mix(in srgb, var(--a-accent) 5%, var(--a-surface)); }
  .ap-vs thead th { position: sticky; inset-block-start: var(--nav-bottom); z-index: 2; background: var(--a-surface); font-size: 18px; font-weight: 700; letter-spacing: -.02em; padding-block: 18px; box-shadow: 0 1px 0 var(--a-line-2); border-block-end-color: transparent; }
  .ap-vs thead th.ap-vs-us { color: var(--a-accent-text); background: color-mix(in srgb, var(--a-accent) 7%, var(--a-surface)); box-shadow: inset 0 3px 0 var(--a-accent), 0 1px 0 var(--a-line-2); }
}
.ap-vs-cols { display: grid; gap: 16px; }
.ap-vs-col { padding: 26px 22px; border-radius: 28px; background: var(--a-surface); border: 1px solid var(--a-card-line); min-inline-size: 0; }
.ap-vs-col-us { background: var(--a-brand-tint); border-color: var(--a-brand-line); }
.ap-vs-col h2 { font-size: clamp(1.45rem, .9vw + 1.1rem, 1.9rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; }
.ap-vs-col > .ap-idx { margin-block-end: 0; }
.ap-vs-col > .ap-idx + h2 { margin-block-start: 12px; }
.ap-vs-col .ap-checks li { color: var(--a-text-2); font-size: 16px; }
.ap-vs-col .ap-checks li > .ap-ico { background: var(--a-surface-2); color: var(--a-text-2); }
@media (min-width: 900px) { .ap-vs-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .ap-vs-col { padding: 36px 34px; } }
.ap-verdict { padding: 32px 24px; border-radius: 32px; background: var(--a-band); color: #f2f1fa; }
.ap-verdict .ap-idx { color: #c4bdff; }
.ap-verdict .ap-idx::after { background: rgba(196, 189, 255, .35); }
.ap-inner .ap-verdict .ap-idx > span + span { color: #c4bdff; }
.ap-verdict h2 { color: #fff; font-size: clamp(1.9rem, 2vw + 1.05rem, 2.8rem); font-weight: 700; letter-spacing: -.036em; line-height: 1.08; margin-block-end: 16px; text-wrap: balance; }
.ap-verdict p { font-size: clamp(1.1rem, .45vw + 1rem, 1.32rem); line-height: 1.55; color: #d6d4ee; max-inline-size: 50rem; }
.ap-verdict a { color: #c4bdff; }
@media (min-width: 900px) { .ap-verdict { padding: 56px 64px; } }
.ap-sources { margin-block-start: 32px; padding-block-start: 24px; border-block-start: 1px solid var(--a-line); font-size: 14px; color: var(--a-text-2); }
.ap-sources h2 { font-size: 14px; font-weight: 700; margin-block-end: 10px; color: var(--a-text); }
.ap-sources ol { list-style: decimal; padding-inline-start: 1.3em; display: grid; gap: 6px; }
.ap-sources a { color: var(--a-accent-text); overflow-wrap: anywhere; }
.ap-sources a:hover { text-decoration: underline; }
.ap-sources p { margin-block-start: 12px; font-size: 13px; color: var(--a-text-3); }

/* ---------- /about ---------- */
.ap-about-why, .ap-about-who { display: grid; gap: 22px; }
.ap-about-why h2, .ap-about-who h2 { font-size: clamp(1.8rem, 1.8vw + 1rem, 2.6rem); font-weight: 700; letter-spacing: -.036em; line-height: 1.1; text-wrap: balance; }
.ap-about-why h2:lang(he), .ap-about-who h2:lang(he) { letter-spacing: 0; line-height: 1.18; }
.ap-about-why .ap-idx, .ap-about-who .ap-idx { margin-block-end: 12px; }
.ap-statement { font-size: clamp(1.3rem, .8vw + 1.05rem, 1.7rem); line-height: 1.38; letter-spacing: -.025em; font-weight: 600; color: var(--a-text); text-wrap: pretty; max-inline-size: 42rem; }
.ap-statement:lang(he) { letter-spacing: 0; line-height: 1.5; }
.ap-about-why p:not(.ap-statement) { margin-block-start: 20px; color: var(--a-text-2); font-size: 17px; line-height: 1.62; max-inline-size: 40rem; }
@media (min-width: 900px) { .ap-about-why, .ap-about-who { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 64px; } }
.ap-principles { display: grid; gap: 14px; }
.ap-principles li { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px; border-radius: 24px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-sm); }
.ap-pr-n { font-family: var(--a-mono); font-size: 13px; font-weight: 700; color: var(--a-accent-text); }
.ap-principles p { font-size: 17.5px; font-weight: 500; line-height: 1.45; letter-spacing: -.012em; color: var(--a-text); }
.ap-principles p:lang(he) { letter-spacing: 0; }
@media (min-width: 600px) { .ap-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ap-principles li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1200px) {
  .ap-principles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .ap-principles li, .ap-principles li:last-child:nth-child(odd) { grid-column: span 2; }
  .ap-principles li:nth-child(-n+2) { grid-column: span 3; }
  .ap-principles li:nth-child(-n+2) p { font-size: 21px; }
}
.ap-founder { padding: 26px 24px; border-radius: 28px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-md); min-inline-size: 0; }
.ap-founder-top { display: flex; align-items: center; gap: 16px; margin-block-end: 18px; }
.ap-founder .ap-ava-xl { margin: 0; background: var(--a-accent); }
.ap-founder-top b { display: block; font-size: 20px; letter-spacing: -.02em; }
.ap-founder-top > div > span { color: var(--a-text-2); font-size: 14px; }
.ap-founder .ap-ava-xl { color: #fff; }
.ap-founder > p { color: var(--a-text-2); font-size: 16.5px; line-height: 1.62; }
.ap-contacts { display: grid; gap: 8px; margin-block-start: 18px; }
.ap-contacts li { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--a-bg-2); font-size: 15px; min-inline-size: 0; }
.ap-contacts li > span { min-inline-size: 0; overflow-wrap: anywhere; }
.ap-contacts .ap-ico { color: var(--a-accent-text); }
@media (min-width: 600px) { .ap-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ap-founder { padding: 34px 32px; } }
.ap-indep { padding: 24px; border-radius: 24px; border: 1px dashed var(--a-line-2); }
.ap-indep h2 { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.ap-indep p { margin-block-start: 8px; color: var(--a-text-2); font-size: 15.5px; line-height: 1.6; max-inline-size: 56rem; }

/* ---------- /security ---------- */
.ap-secflow { padding: 20px; }
.ap-hv.ap-secflow > * + * { margin-block-start: 0; }
.ap-sf-node { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: var(--a-surface-2); }
.ap-sf-us { background: var(--a-brand-tint); border: 1px solid var(--a-brand-line); }
.ap-sf-ico { inline-size: 42px; block-size: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; }
.ap-sf-ds { background: var(--a-accent); }
.ap-sf-ag { background: #26253d; }
.ap-sf-node b { display: block; font-size: 15px; }
.ap-sf-node div > span { display: block; font-size: 13px; color: var(--a-text-2); line-height: 1.35; }
.ap-sf-link { display: flex; align-items: center; gap: 12px; block-size: 42px; padding-inline-start: 34px; font-size: 12px; font-weight: 600; color: var(--a-text-3); }
.ap-sf-link i { align-self: stretch; inline-size: 2px; background: repeating-linear-gradient(to bottom, var(--a-accent) 0 4px, transparent 4px 8px); }
.ap-hv.ap-secflow .ap-sf-caps { margin-block-start: 14px; padding: 9px 12px; border-radius: 999px; background: var(--a-surface-2); text-align: center; font-size: 12.5px; font-weight: 600; color: var(--a-text-2); font-variant-numeric: tabular-nums; }
@keyframes ap-flow { to { background-position: 0 8px; } }
@media (prefers-reduced-motion: no-preference) { .ap-sf-link i { animation: ap-flow 1s linear infinite; } }
.ap-panels { display: grid; gap: 14px; }
.ap-panel { padding: 26px 22px; border-radius: 26px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-sm); scroll-margin-block-start: calc(var(--nav-bottom) + 24px); min-inline-size: 0; }
.ap-panel-ico { inline-size: 44px; block-size: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--a-accent-soft); color: var(--a-accent-text); }
.ap-panel h2 { font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.ap-panel .ap-checks li { font-size: 15.5px; color: var(--a-text-2); }
@media (min-width: 900px) { .ap-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .ap-panel { padding: 32px 30px; } .ap-panels > .ap-panel:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.ap-report { display: grid; gap: 16px; margin-block-start: 16px; padding: 28px 24px; border-radius: 28px; background: var(--a-band); color: #f2f1fa; scroll-margin-block-start: calc(var(--nav-bottom) + 24px); }
.ap-report h2 { color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.ap-report a { color: #c4bdff; font-weight: 500; }
.ap-report .ap-panel-ico { background: rgba(255, 255, 255, .08); color: #c4bdff; }
.ap-inner .ap-report p { color: #c9c7e0; }
.ap-inner .ap-report strong { color: #fff; }
@media (min-width: 900px) { .ap-report { grid-template-columns: auto minmax(0, 1fr); gap: 24px; padding: 40px; } }

/* ---------- /support ---------- */
.ap-contact-grid { display: grid; gap: 14px; }
.ap-contact { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-sm); min-inline-size: 0; }
.ap-contact h3 { font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.ap-contact p { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.ap-contact p > span { min-inline-size: 0; overflow-wrap: anywhere; }
.ap-contact .ap-ico { margin-block-start: 2px; color: var(--a-text-3); }
.ap-contact-to { margin-block-start: auto; }
.ap-contact-when { color: var(--a-text-2); }
@media (min-width: 600px) { .ap-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ap-contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.ap-fine { margin-block-start: 16px; font-size: 14.5px; color: var(--a-text-2); max-inline-size: 52rem; line-height: 1.55; }
.ap-box { padding: 26px 24px; border-radius: 24px; background: var(--a-surface); border: 1px solid var(--a-card-line); max-inline-size: 52rem; }
.ap-tint .ap-box { box-shadow: var(--a-shadow-sm); }

/* ============================================================
   9 · the legal pages (public/<name>.html, copied as written): restyled through their own
   classes, which only the dmswift.com bundle loads together with this file
   ============================================================ */
body.ds .ds-legal-head { position: sticky; inset-block-start: 0; z-index: 10; background: var(--a-nav-bg); -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); border-block-end: 1px solid var(--a-line); padding-block: 8px; }
body.ds .ds-legal-head .ds-wrap, body.ds .ds-legal-foot .ds-wrap { max-inline-size: var(--max); padding-inline: var(--a-gutter); }
body.ds .ds-legal-head .ds-wordmark { block-size: 28px; inline-size: auto; }
body.ds .ds-legal-back { display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: 16px; border-radius: 999px; background: var(--a-accent-soft); color: var(--a-accent-text); font-size: 14px; font-weight: 600; }
body.ds .ds-legal-back:hover { background: color-mix(in srgb, var(--a-accent) 16%, transparent); color: var(--a-accent-text); }
body.ds .ds-legal { background: var(--a-bg-2); padding-block: 32px 72px; color: var(--a-text); }
body.ds .ds-legal .ds-narrow { max-inline-size: 52rem; padding-inline: var(--a-gutter); }
body.ds .ds-legal-card { background: var(--a-surface); border: 1px solid var(--a-card-line); border-radius: 28px; box-shadow: var(--a-shadow-sm); padding: 28px 22px; font-size: 16.5px; }
body.ds .ds-legal-card + .ds-legal-card { margin-block-start: 24px; }
body.ds .ds-legal-card h1 { font-family: var(--a-font); font-weight: 700; font-variation-settings: normal; font-size: clamp(2rem, 2vw + 1.2rem, 2.9rem); letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
body.ds .ds-legal-he h1 { font-family: "Heebo", var(--a-font); letter-spacing: 0; line-height: 1.15; }
body.ds .ds-legal-card h2 { font-family: var(--a-font); font-weight: 700; font-variation-settings: normal; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.3; margin-block-start: 36px; padding-block-start: 28px; border-block-start: 1px solid var(--a-line); }
body.ds .ds-legal-he h2 { font-family: "Heebo", var(--a-font); letter-spacing: 0; }
body.ds .ds-legal-card p, body.ds .ds-legal-card li { color: var(--a-text-2); line-height: 1.7; }
body.ds .ds-legal-card strong { color: var(--a-text); }
body.ds .ds-legal-card ul li::before { background: var(--a-accent); opacity: .7; }
body.ds .ds-legal-card ol li::before { background: var(--a-accent-soft); color: var(--a-accent-text); }
body.ds .ds-legal-card a { color: var(--a-accent-text); }
body.ds .ds-legal-updated { display: inline-flex; margin-block-start: 12px; padding: 4px 12px; border-radius: 999px; background: var(--a-bg-2); font-size: 13px; color: var(--a-text-2); }
body.ds .ds-legal-links { gap: 8px; margin-block-start: 36px; padding-block-start: 24px; border-block-start: 1px solid var(--a-line); }
body.ds .ds-legal-links a { display: inline-flex; align-items: center; min-block-size: 36px; padding-inline: 14px; border-radius: 999px; background: var(--a-bg-2); color: var(--a-text); font-size: 13.5px; font-weight: 500; }
body.ds .ds-legal-links a:hover { background: var(--a-accent-soft); color: var(--a-accent-text); text-decoration: none; }
body.ds .ds-legal-form input { border-radius: 12px; border-color: var(--a-line-2); background: var(--a-surface); color: var(--a-text); }
body.ds .ds-legal-form button { border-radius: 999px; background: var(--a-accent); color: #fff; }
body.ds .ds-legal-foot { background: var(--a-bg); border-block-start: 1px solid var(--a-line); color: var(--a-text-3); font-size: 12.5px; line-height: 1.6; }
body.ds .ds-legal-foot p + p { margin-block-start: 6px; }
@media (min-width: 600px) { body.ds .ds-legal-card { padding: 40px; border-radius: 32px; } }
@media (min-width: 900px) { body.ds .ds-legal { padding-block: 56px 104px; } body.ds .ds-legal-card { padding: 56px 64px; } }
/* the tool table on a phone: name and scope on one line, what it does under them */
.ap-tools tbody tr[data-tool] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 12px 18px; }
.ap-tools tbody tr[data-tool] > th { grid-column: 1; grid-row: 1; margin: 0; font-size: 15px; }
.ap-tools tbody tr[data-tool] > td:last-child { grid-column: 2; grid-row: 1; margin: 0; padding: 0; font-size: 12.5px; }
.ap-tools tbody tr[data-tool] > td:nth-child(2) { grid-column: 1 / -1; margin: 0; padding: 0; font-size: 14.5px; }
.ap-tools td[data-label]::before { display: none; }
.ap-guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-gchip { gap: 10px; padding: 10px 12px; }
@media (min-width: 600px) { .ap-tools tbody tr[data-tool] { display: table-row; padding: 0; } .ap-tools tbody tr[data-tool] > td:last-child, .ap-tools tbody tr[data-tool] > td:nth-child(2) { padding: 14px 18px; font-size: 14px; } .ap-tools tbody tr[data-tool] > th { font-size: 15px; } }
.ap-inner .ap-urlbox code { font-size: 13.5px; }
@media (min-width: 600px) { .ap-inner .ap-urlbox code { font-size: 14.5px; } }
.ap-mini .ap-ch-sub { display: none; }
.ap-ihero-hub { padding-block-end: 8px; }
@media (min-width: 900px) { .ap-ihero-hub { padding-block-end: 16px; } }
@media (min-width: 600px) { .ap-dt th[scope="row"] { display: table-cell; } }
@media (min-width: 900px) { .ap-vs th[scope="row"] { display: table-cell; } }
@media (min-width: 900px) { .ap-vs thead th:first-child { inline-size: 24%; } .ap-inner .ap-sec-ed-1 { gap: 14px; margin-block-end: 40px; } }
.ap-prose hr + h2 { border: 0; padding-block-start: 0; margin-block-start: 0; }
body.ds .ds-legal-card :is(ul, ol) + p { margin-block-start: 14px; } body.ds .ds-legal-card h3 { font-family: inherit; font-weight: 700; letter-spacing: -.01em; margin-block-start: 18px; }

/* ============================================================
   10 · content pages, critique round (31.10): the fixes in one place
   ============================================================ */

/* the section number is a grid or flex item: keep it at the start edge of its row in both directions */
.ap-frow-n { justify-self: start; unicode-bidi: isolate; }
.ap-pr-n { align-self: flex-start; unicode-bidi: isolate; }

/* a header without a visual is compact: from 1200px the lede and the calls to action sit beside the h1 */
.ap-ihero-solo { padding-block: 20px 28px; }
.ap-ih-side { min-inline-size: 0; }
@media (min-width: 900px) { .ap-ihero-solo { padding-block: 32px 40px; } }
@media (min-width: 1200px) {
  .ap-ih-solo .ap-ih-copy { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: 72px; align-items: start; }
  .ap-ih-solo .ap-ih-copy > * { grid-column: 1 / -1; }
  .ap-ih-solo .ap-ih-copy > .ap-ih-h1 { grid-column: 1; max-inline-size: 18ch; }
  .ap-ih-solo .ap-ih-copy > .ap-ih-side { grid-column: 2; padding-block-end: 6px; }
  .ap-ih-solo .ap-ih-side > .ap-ih-lede:first-child { margin-block-start: 0; }
  .ap-ihero-404 .ap-ih-copy > .ap-ih-h1 { max-inline-size: 14ch; }
}

/* a comparison's header card: three rows of the table, our column marked (the table follows on a phone) */
.ap-ihero-vs .ap-ih-vis { display: none; }
@media (min-width: 900px) { .ap-ihero-vs .ap-ih-vis { display: block; } }
.ap-score { padding: 22px 22px 8px; border-radius: 28px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-lg); }
.ap-score-head, .ap-score-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ap-score-head { align-items: baseline; padding-block-end: 16px; border-block-end: 1px solid var(--a-line); font-size: clamp(1.3rem, .8vw + .95rem, 1.7rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.ap-score-head .ap-score-us { color: var(--a-accent-text); }
.ap-score-them { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-inline-size: 0; overflow-wrap: anywhere; }
.ap-score-vs { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--a-text-3); }
.ap-score-vs:lang(he) { letter-spacing: 0; font-size: 13px; }
.ap-score-row { padding-block: 14px; }
.ap-score-row + .ap-score-row { border-block-start: 1px solid var(--a-line); }
.ap-score-k { margin-block-end: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--a-text-3); }
.ap-score-k:lang(he) { letter-spacing: 0; text-transform: none; font-size: 13px; }
.ap-score-cells p { display: flex; gap: 6px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--a-bg-2); font-size: 14px; line-height: 1.4; color: var(--a-text-2); min-inline-size: 0; overflow-wrap: break-word; }
.ap-score-cells p.ap-score-us { background: var(--a-brand-tint); box-shadow: inset 0 0 0 1px var(--a-brand-line); color: var(--a-text); font-weight: 600; }
.ap-score-cells .ap-ico { flex: none; margin-block-start: 2px; color: var(--a-accent-text); stroke-width: 2.6; }
.ap-vs-cols { align-items: start; }

/* the glossary: the Hebrew name leads, the English name under it */
.ap-term-name { display: grid; gap: 3px; min-inline-size: 0; }
.ap-term-name > small { justify-self: start; font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--a-text-3); }

/* "keep reading": the whole card text, never cut */
.ap-rcard p { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* a list of limits: a neutral minus, not a green tick */
.ap-checks.ap-limits li > .ap-ico { background: var(--a-surface-2); color: var(--a-text-3); }
.ap-checks.ap-limits li { color: var(--a-text-2); }

/* feature pages: the lead row, the row beside a second scene, short sections as columns */
.ap-frow-lead .ap-frow-b > p:first-child { font-size: clamp(1.12rem, .45vw + 1rem, 1.36rem); line-height: 1.55; letter-spacing: -.01em; color: var(--a-text); }
.ap-frow-lead .ap-frow-b > p:first-child:lang(he) { letter-spacing: 0; line-height: 1.65; }
.ap-frow-dtext { display: grid; gap: 18px; align-content: start; min-inline-size: 0; }
.ap-frow-vis { min-inline-size: 0; inline-size: 100%; max-inline-size: 30rem; }
.ap-frow-vis .ap-bars { block-size: 150px; }
.ap-frow-cols { display: grid; gap: 36px; }
.ap-fcol { display: grid; gap: 14px; align-content: start; min-inline-size: 0; scroll-margin-block-start: calc(var(--nav-bottom) + 24px); }
.ap-fcol .ap-frow-h h2 { font-size: clamp(1.4rem, .8vw + 1.08rem, 1.85rem); }
.ap-fcol .ap-frow-b > p:first-child { font-size: 1.0625rem; color: var(--a-text-2); }
@media (min-width: 900px) {
  .ap-frow-lead { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ap-frow-lead .ap-frow-h, .ap-frow-demo .ap-frow-h, .ap-frow-cols .ap-frow-h { position: static; }
  .ap-frow-lead .ap-frow-h h2 { max-inline-size: 26ch; }
  .ap-frow-lead .ap-frow-b, .ap-frow-lead .ap-frow-b > p { max-inline-size: 62rem; }
  .ap-frow-demo { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
  .ap-frow-vis { max-inline-size: none; }
  .ap-frow-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
}
@media (min-width: 1200px) { .ap-fcols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } }

/* /mcp: a section header's number, heading and lede line up at the top */
@media (min-width: 900px) { .ap-inner .ap-sec-ed { align-items: start; } }

/* /mcp: the agent guides as tiles with how each one connects */
.ap-guides-grid { grid-template-columns: minmax(0, 1fr); }
.ap-gchip { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top go" "how go"; gap: 6px 12px; align-items: center; min-block-size: 0; padding: 16px 16px 16px 18px; border-radius: 18px; }
[dir="rtl"] .ap-gchip { padding: 16px 18px 16px 16px; }
.ap-gchip-top { grid-area: top; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-inline-size: 0; }
.ap-gchip-top b { flex: none; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
.ap-gchip-cat { display: inline-flex; align-items: center; min-block-size: 22px; padding-inline: 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--a-surface-2); color: var(--a-text-2); white-space: nowrap; }
.ap-gchip-cat[data-cat="chat"] { background: var(--a-accent-soft); color: var(--a-accent-text); }
.ap-gchip-cat[data-cat="msg"] { background: var(--a-green-soft); color: var(--a-green); }
.ap-gchip-how { grid-area: how; font-size: 13.5px; line-height: 1.4; color: var(--a-text-2); min-inline-size: 0; overflow-wrap: break-word; }
.ap-gchip > .ap-ico { grid-area: go; }
@media (min-width: 600px) { .ap-guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ap-guides-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ap-guides-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* /mcp: the tools by group, three rows each and the rest folded; two columns from 1200px */
.ap-tgroups { display: grid; gap: 14px; align-items: start; }
.ap-tg { border-radius: 22px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-sm); overflow: hidden; min-inline-size: 0; }
.ap-tg[hidden], .ap-tg table[hidden], .ap-tools tr[hidden] { display: none; }
.ap-tg-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; background: var(--a-bg-2); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--a-text-2); }
.ap-tg-h:lang(he) { letter-spacing: 0; text-transform: none; font-size: 14px; }
.ap-tg-n { min-inline-size: 28px; padding: 2px 8px; border-radius: 999px; background: var(--a-surface); color: var(--a-text-2); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.ap-tg .ap-tools { inline-size: 100%; border-collapse: collapse; }
.ap-tg .ap-tools thead th { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ap-tg .ap-tools tbody tr[data-tool] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: baseline; padding: 12px 18px; border-block-start: 1px solid var(--a-line); }
.ap-tg .ap-tools tbody tr[data-tool]:first-child { border-block-start: 0; }
.ap-tg .ap-tools tbody tr[data-tool] > th { grid-column: 1; grid-row: 1; inline-size: auto; padding: 0; margin: 0; text-align: start; font-size: 15px; font-weight: 600; }
.ap-tg .ap-tools tbody tr[data-tool] > td { padding: 0; margin: 0; border: 0; background: none; }
.ap-tg .ap-tools tbody tr[data-tool] > td:last-child { grid-column: 2; grid-row: 1; font-size: 12.5px; color: var(--a-text-3); }
.ap-tg .ap-tools tbody tr[data-tool] > td:nth-child(2) { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.45; color: var(--a-text-2); }
.ap-tg-more { border-block-start: 1px solid var(--a-line); }
.ap-tg-more > summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 46px; padding-inline: 18px; font-size: 14px; font-weight: 600; color: var(--a-accent-text); cursor: pointer; transition: background .2s; }
.ap-tg-more > summary::-webkit-details-marker { display: none; }
.ap-tg-more > summary:hover { background: var(--a-bg-2); }
.ap-tg-chev { transform: rotate(90deg); transition: transform .3s var(--a-ease); }
.ap-tg-more[open] .ap-tg-chev { transform: rotate(-90deg); }
.ap-tg-more[open] > summary { border-block-end: 1px solid var(--a-line); color: var(--a-text-3); }
.ap-tools-box .ap-tnone { margin-block-start: 12px; border-radius: 22px; background: var(--a-bg-2); }
@media (min-width: 600px) {
  .ap-tg .ap-tools tbody tr[data-tool] { display: grid; padding: 12px 18px; }
  .ap-tg .ap-tools tbody tr[data-tool] > td:last-child, .ap-tg .ap-tools tbody tr[data-tool] > td:nth-child(2) { padding: 0; }
  .ap-tg .ap-tools tbody tr[data-tool] > td:nth-child(2) { font-size: 14.5px; }
  .ap-tg .ap-tools tbody tr[data-tool] > th { inline-size: auto; }
}
@media (min-width: 1200px) { .ap-tgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* wide screens: the frame and the type grow a step past about 1700px, with no extra breakpoint */
:root { --max: clamp(1320px, 77vw, 1600px); }
html { font-size: clamp(1rem, calc(1rem + (100vw - 1700px) * .0035), 1.125rem); }
.ap-frow-b > p, .ap-asec > p, .ap-panel > p, .ap-box > p { font-size: 1.0625rem; }
.ap-frow-b > p:first-child { font-size: 1.125rem; }
.ap-checks li, .ap-steps li > div { font-size: 1.03rem; }
.ap-points li, .ap-callout p, .ap-term dd { font-size: .97rem; }
.ap-prose { font-size: 1.03rem; }
.ap-inner .ds-q summary { font-size: 1.125rem; }
.ap-inner .ds-a p { font-size: 1.03rem; }
.ap-rcard p, .ap-tile p { font-size: .92rem; }
/* the article: the contents column on the start side, the text in the middle of the page */
@media (min-width: 1200px) {
  .ap-art { grid-template-columns: minmax(210px, 1fr) minmax(0, 46rem) minmax(0, 1fr); gap: 48px; }
  .ap-art-docs .ap-art { grid-template-columns: minmax(210px, 1fr) minmax(0, 52rem) minmax(0, .5fr); }
}

/* hub cards: the small scenes fill the card */
.ap-mini-thread { margin-block-start: 2px; }
.ap-mini-thread .ap-bub { padding: 7px 11px; font-size: 12.5px; }
.ap-mini .ap-lead-tags { margin-block: 4px 0; }
.ap-mini .ap-hist { margin-block-start: 6px; padding-block-start: 10px; gap: 8px; }

/* comment to DM: the floating message card no longer covers the third comment */
@media (min-width: 600px) { .ap-hv-stack { padding-block-end: 176px; } }

/* a hidden spam comment wraps to two lines, so the reason it was hidden stays readable */
.ap-mod-c .ap-tx { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* a one-line terminal command wraps instead of scrolling sideways */
.ap-code-wrap pre.ds-code { white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-code-wrap pre.ds-code code { overflow-wrap: anywhere; }

/* 404 on a phone: compact rows */
.ap-tiles-3 .ap-tile { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 58px 14px 14px; border-radius: 18px; }
[dir="rtl"] .ap-tiles-3 .ap-tile { padding: 14px 14px 14px 58px; }
.ap-tiles-3 .ap-tile-ico { grid-row: span 2; inline-size: 36px; block-size: 36px; margin: 0; border-radius: 11px; }
.ap-tiles-3 .ap-tile h3 { font-size: 16px; }
.ap-tiles-3 .ap-tile p { font-size: 14px; line-height: 1.4; }
.ap-tiles-3 .ap-tile-go { inset-block-start: calc(50% - 16px); }
@media (min-width: 600px) {
  .ap-tiles-3 .ap-tile { display: flex; padding: 22px 64px 22px 22px; border-radius: 22px; }
  [dir="rtl"] .ap-tiles-3 .ap-tile { padding: 22px 22px 22px 64px; }
  .ap-tiles-3 .ap-tile-ico { inline-size: 40px; block-size: 40px; margin-block-end: 8px; border-radius: 12px; }
  .ap-tiles-3 .ap-tile h3 { font-size: 18px; }
  .ap-tiles-3 .ap-tile p { font-size: .92rem; }
  .ap-tiles-3 .ap-tile-go { inset-block-start: 26px; }
}

/* /about on a phone: the principles as a numbered list, cards from 600px */
.ap-principles { gap: 0; }
.ap-principles li { flex-direction: row; gap: 16px; padding: 18px 0; border-radius: 0; background: none; border: 0; border-block-start: 1px solid var(--a-line); box-shadow: none; }
.ap-principles li:last-child { border-block-end: 1px solid var(--a-line); }
.ap-principles .ap-pr-n { margin-block-start: 4px; }
@media (min-width: 600px) {
  .ap-principles { gap: 14px; }
  .ap-principles li, .ap-principles li:last-child { flex-direction: column; gap: 14px; padding: 24px 22px; border-radius: 24px; background: var(--a-surface); border: 1px solid var(--a-card-line); box-shadow: var(--a-shadow-sm); }
  .ap-principles .ap-pr-n { margin-block-start: 0; }
}
@media (min-width: 1200px) { .ap-principles { gap: 16px; } }

/* two-column lists with an odd count: the last item takes the whole row instead of leaving half of it empty */
@media (min-width: 600px) {
  .ap-contacts > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 600px) {
  :where(.ap-tiles > :last-child:nth-child(odd)) { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .ap-prompts-grid > li:last-child:nth-child(odd), .ap-points-grid > li:last-child:nth-child(odd), .ap-points-wide > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  :where(.ap-snotes > :last-child:nth-child(odd)) { grid-column: 1 / -1; }
}
/* three columns from 1200px: the last item goes back to one cell */
@media (min-width: 1200px) {
  .ap-tiles > :last-child, .ap-snotes > :last-child { grid-column: auto; }
}

/* Welcome strip for a visitor an AI assistant sent (landing.js, #ap-aiw above the hero headline):
   a quiet line over a hairline, with a link to that assistant's connector page and a close. */
.ap-aiw {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 8px;
  margin: 0 0 22px; padding-block: 0 8px; border-block-end: 1px solid var(--a-line); color: var(--a-text-2);
  max-inline-size: 36rem; animation: ap-aiw-in .5s var(--a-ease-out) both;
}
.ap-aiw[hidden] { display: none; }
.ap-aiw-ico { margin-top: 4px; color: var(--a-accent-text); }
.ap-aiw p { margin: 0; padding-block: 2px; font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.ap-aiw a { color: var(--a-accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.ap-aiw-x {
  display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; margin: -12px 0 -12px;
  border: 0; border-radius: 999px; background: transparent; color: var(--a-text-2); cursor: pointer;
}
.ap-aiw-x:hover { color: var(--a-text); }
.ap-aiw-x:focus-visible { outline: 2px solid var(--a-accent); outline-offset: -4px; }
@keyframes ap-aiw-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ap-aiw { animation: none; } }