/* ═══════════════════════════════════════════════════════════════
   Ariana Cinematic — built on Ariana's own design system.
   Palette, radii and type are lifted from the product's panel skin
   (deep indigo-violet surfaces, #7c6cff accent, Plus Jakarta Sans,
   Vazirmatn scoped to Arabic script via unicode-range).
   No frameworks, no build step, no external requests.
   ═══════════════════════════════════════════════════════════════ */

/* ── Type: Plus Jakarta Sans, self-hosted (OFL, licence ships beside) ── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* Vazirmatn claims only Arabic-script characters — Latin falls through to
   Plus Jakarta. Same trick the Ariana panel uses, so an operator can publish
   Persian or Arabic content and the theme simply keeps up. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D, U+FDFC, U+FDFD;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500 600; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D, U+FDFC, U+FDFD;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700 800; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D, U+FDFC, U+FDFD;
}

/* ═══════════════════════════════════════════════════════════════
   Tokens — Ariana's palette, taken from the product's panel skin.
   Both modes ship: the deep indigo-violet panel, and the "violet
   paper" light mode the panel itself uses. Components must never
   reach past this layer for a literal colour, because only this
   layer knows which mode is on — that is exactly how a panel ends
   up with white text on a white background.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Dark: the panel Ariana has always had ── */
  --bg: #100d21;            /* page behind everything      */
  --bg-2: #14102b;          /* purple-900                  */
  --card: #191436;          /* purple-850 — cards, sidebar */
  --raised: #1e1840;        /* purple-800                  */
  --selected: #2a2158;      /* purple-700                  */
  --glass: rgba(124, 108, 255, .05);
  --wash: rgba(124, 108, 255, .16);

  --line: #332a5e;          /* hairline                    */
  --line-strong: #382c74;   /* strong border               */
  --line-soft: rgba(164, 157, 205, .12);

  --ink: #E6E2FA;
  --muted: #A49DCD;
  --faint: #8A83AE;

  --accent: #7c6cff;        /* fills                       */
  --accent-2: #a99cff;      /* accent ink on dark          */
  --accent-3: #818cf8;      /* indigo companion            */
  --ok: #4ADE80;
  --warn: #FBBF24;
  --bad: #F87171;

  /* Films: the translucent sheen that lifts a surface off its
     background. Ink-coloured in light mode, paper-coloured in dark,
     so every card keeps its depth in either. */
  --film-1: rgba(230, 226, 250, .035);
  --film-2: rgba(230, 226, 250, .06);
  --film-3: rgba(230, 226, 250, .10);
  --film-4: rgba(230, 226, 250, .16);

  --header-bg: rgba(16, 13, 33, .78);
  --scrim: rgba(16, 13, 33, .62);      /* over imagery      */
  --code-bg: #14102b;
  --grid-line: rgba(164, 157, 205, .05);
  --aurora-1: rgba(124, 108, 255, .38);
  --aurora-2: rgba(129, 140, 248, .26);
  /* The complements as LIGHT: cool data in one corner, a warm rim in the
     other, both well under the violet pair so the brand still owns the
     sky. Depth comes from the hue difference, not from more glow. */
  --aurora-3: rgba(34, 211, 238, .24);
  --aurora-4: rgba(251, 113, 133, .15);
  --star-ink: rgba(230, 226, 250, .55);
  --shadow: 0 24px 70px -28px rgba(5, 3, 18, .9);
  --glow: 0 0 80px -18px rgba(124, 108, 255, .55);
  --on-accent: #fff;        /* text that sits on a filled accent */

  /* ── The complements ──────────────────────────────────────────────
     Violet is the PRODUCT. These three are what the product is ABOUT,
     and each is bound to one meaning so a colour is never decoration:

       data   cyan   measurement, analysis, anything that was scored
       value  gold   money, worth, the business outcome
       live   rose   attention — what to fix, what is urgent

     A section declares `--tone` once and its kicker, rule, ordinals and
     icon chips follow. Anything without a declared tone stays violet,
     so the identity survives and the complements stay rare enough to
     mean something. Contrast on --bg / --card / --raised:
     cyan 10.6/9.7/9.2, gold 10.8/10.0/9.5, rose 7.1/6.5/6.2. */
  --tone-data: #22D3EE;
  --tone-value: #F5B942;
  --tone-live: #FB7185;
  --tone: var(--accent);          /* what an untoned section inherits */
  --tone-ink: var(--accent-2);    /* the same tone, at text contrast   */
  --on-tone: #16112e;             /* ink that sits ON a filled tone    */
  /* A FILLED chip (a step badge, the Auto Pilot runner) uses the bright
     tone with dark ink in BOTH themes. The light theme's text tones are
     darkened for contrast on paper, and filled with them a gold badge
     reads as brown; bright fill + dark ink clears 6:1 on every tone.
     Deliberately not redefined under [data-theme="light"]. */
  --fill-data: #22D3EE;
  --fill-value: #F5B942;
  --fill-live: #FB7185;
  --on-fill: #16112e;

  --grad: linear-gradient(120deg, var(--accent), var(--accent-2));
  --radius-sm: 8px;
  --radius: 16px;           /* --ariana-r-xl               */
  --radius-lg: 24px;        /* --ariana-r-2xl              */
  --ring: rgba(124, 108, 255, .38);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .4, 1);
  --header-h: 72px;
  --font: 'Vazirmatn', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Vazirmatn', ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, monospace; /* Vazirmatn claims only Arabic script: Persian digits in a mono run */

  color-scheme: dark;
}

/* ── Light: "violet paper" — the same violet, lit from the front.
   Surfaces are violet-tinted neutrals rather than grey, so the site
   reads as the same product in either mode, and the ink is a deep
   violet-black so nothing on screen is a colour outside the family.
   Every pair below is measured: ink 17.5:1 on surface, dim ink
   8.9:1, muted 6.2:1, accent text 7.6:1 on white, white on the
   accent fill 5.8:1 — all clear WCAG AA, most clear AAA.
   The accent has to be mode-specific: #7c6cff reads at only 3.9:1
   on white, and a violet dark enough for paper fails on the panel.
   ── */
:root[data-theme="light"] {
  --bg: #F5F3FC;
  --bg-2: #EFEBFA;
  --card: #FFFFFF;
  --raised: #F7F5FD;
  --selected: #E4DEFB;
  --glass: rgba(95, 73, 232, .045);
  --wash: rgba(95, 73, 232, .10);

  --line: #E4E0F2;
  --line-strong: #CFC8E6;
  --line-soft: rgba(76, 68, 112, .10);

  --ink: #1B1436;
  --muted: #4C4470;
  --faint: #645C82;

  --accent: #5F49E8;        /* fills: white label reads 5.83:1 */
  --accent-2: #5334D0;      /* text and links: 7.58:1 on white */
  --accent-3: #4C2BC4;
  --ok: #116932;
  --warn: #8A5205;
  --bad: #B91C1C;

  /* The same three meanings, darkened until each one carries text on
     EVERY light surface, not just on white. The first pass was tuned
     against --card and shipped a 4.29 on --bg-2 and a 3.86 on --selected;
     both were found by sampling the composited pixel rather than by
     eye. Worst case now: cyan 4.60, gold 4.94, rose 4.83 — all on
     --selected, which is the darkest ground any of them sits on. */
  --tone-data: #0D6C86;
  --tone-value: #9C4508;
  --tone-live: #BE123C;
  --tone: var(--accent);
  --tone-ink: var(--accent-2);
  --on-tone: #fff;

  --film-1: rgba(27, 20, 54, .025);
  --film-2: rgba(27, 20, 54, .045);
  --film-3: rgba(27, 20, 54, .07);
  --film-4: rgba(27, 20, 54, .11);

  --header-bg: rgba(245, 243, 252, .82);
  --scrim: rgba(27, 20, 54, .55);
  --code-bg: #F0EDF9;
  --grid-line: rgba(76, 68, 112, .07);
  --aurora-1: rgba(124, 108, 255, .22);
  --aurora-2: rgba(129, 140, 248, .16);
  --aurora-3: rgba(13, 148, 178, .12);
  --aurora-4: rgba(225, 29, 72, .07);
  --star-ink: rgba(95, 73, 232, .35);
  --shadow: 0 22px 60px -26px rgba(43, 29, 94, .22);
  --glow: 0 0 70px -20px rgba(95, 73, 232, .3);
  --ring: rgba(95, 73, 232, .28);

  color-scheme: light;
}

/* Scale up gracefully on 2K+ monitors */
html { font-size: 16px; }
@media (min-width: 1720px) { html { font-size: 17.5px; } }
@media (min-width: 2100px) { html { font-size: 19px; } }
@media (min-width: 2500px) { html { font-size: 21px; } }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
body {
  font-family: var(--font);
  font-feature-settings: 'ss01' 1, 'ss03' 1;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  letter-spacing: -.011em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
[dir='rtl'] body { line-height: 1.8; letter-spacing: 0; }
img, svg, video { display: block; max-width: 100%; }
/* an image narrowed by max-width keeps its proportions: without this the
   height attribute Ariana writes (and CLS needs) stays, and the picture
   stretches — an article's 1672×941 image drew 920×941 */
img, video { height: auto; }
main { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: rgba(124, 108, 255, .45); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }

/* ── Containers ── */
/* One gutter token, one measure scale — every page uses these and nothing else,
   so the left edge of a heading is identical from the home page to an article. */
:root {
  --gutter: clamp(1.15rem, 4.2vw, 3.5rem);
  /* Every section breathes by the same amount, so the gap between any
     two of them is a constant 2 × --sec rather than a lottery of
     whichever pair happens to meet. */
  --sec: clamp(2.75rem, 5vw, 4.25rem);
}

.container        { width: min(100% - var(--gutter) * 2, 90rem); margin-inline: auto; }
.container-wide   { width: min(100% - var(--gutter) * 2, 90rem); margin-inline: auto; }
.container-post   { width: min(100% - var(--gutter) * 2, 78rem); margin-inline: auto; }
.container-narrow { width: min(100% - var(--gutter) * 2, 62rem); margin-inline: auto; }

/* ── Type helpers ── */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}
/* ── Tone mechanics ───────────────────────────────────────────────────
   `data-tone` on any element re-points --tone for everything inside it.
   One declaration on a <section> colours its kicker, its rule, its
   ordinals and its icon chips together, which is what makes the page
   read as deliberate rather than as three stray coloured things.

   --tone      the hue, for fills, rules and glows
   --tone-ink  the same hue at text contrast (they differ only for the
               default violet, whose fill is too dim to read as text)   */
[data-tone='data']  { --tone: var(--tone-data);  --tone-ink: var(--tone-data);  --tone-fill: var(--fill-data); }
[data-tone='value'] { --tone: var(--tone-value); --tone-ink: var(--tone-value); --tone-fill: var(--fill-value); }
[data-tone='live']  { --tone: var(--tone-live);  --tone-ink: var(--tone-live);  --tone-fill: var(--fill-live); }

/* Surfaces derived from whatever tone is in scope, so a tinted panel
   never needs its own colour written down. */
[data-tone] {
  --tone-wash: color-mix(in srgb, var(--tone) 8%, transparent);
  --tone-line: color-mix(in srgb, var(--tone) 30%, transparent);
  /* A toned gradient stays in its OWN family and only leans toward the
     brand at the far end. Running it all the way to violet made a gold
     money figure fade purple across its last two digits, which reads as
     a rendering fault rather than as a gradient. */
  --tone-grad: linear-gradient(120deg, var(--tone), color-mix(in srgb, var(--tone) 62%, var(--accent-2)));
}

/* --grad is DELIBERATELY not re-pointed by a tone.
   It is the brand gradient, and it fills the primary button, the big
   display headings and the logo lockup. Re-pointing it inside a toned
   section repainted the one control on the page that must never change
   colour — a cyan "Check it" button, on a violet site. A tone recolours
   what a section is ABOUT; the brand keeps its own colour throughout.
   Components that genuinely want a toned gradient ask for --tone-grad. */

/* ── Score bands ──────────────────────────────────────────────────────
   A measured number carries its own colour. Before this, a 48 and a 92
   were drawn in the identical violet, which is the one thing a score
   display must never do: the reader had to parse four numbers to learn
   what one glance should have told them. --band is set from the DATA,
   never from where the element happens to sit. */
[data-band='bad']  { --band: var(--bad); }
[data-band='warn'] { --band: var(--warn); }
[data-band='ok']   { --band: var(--ok); }

.section-kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tone-ink);
  margin-bottom: 1.1rem;
}
.section-kicker::before {
  content: ''; inline-size: 2rem; block-size: 2px;
  background: var(--tone-grad, var(--grad)); border-radius: 2px;
}
.section-title {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.1rem);
  font-weight: 800; line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 3.5vw, 2.9rem); }
.section-head--row {
  max-width: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}

/* ── Buttons ── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.7rem;
  border-radius: 999px;
  font-weight: 700; font-size: .95rem;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: transform .45s var(--ease-spring), box-shadow .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
  will-change: transform;
}
.btn > span { display: inline-block; transition: transform .45s var(--ease-spring); }
.btn--primary {
  background: var(--grad);
  color: var(--on-accent);
  box-shadow: 0 12px 32px -14px rgba(124, 108, 255, .8);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -14px rgba(124, 108, 255, .9); }
.btn--light { background: #fff; color: #14102b; }
.btn--light:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -18px rgba(255,255,255,.55); }
.btn--ghost {
  border-color: var(--line-strong);
  background: var(--glass);
  color: var(--ink);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--accent); background: var(--wash); transform: translateY(-2px); }
.btn--lg { padding: .95rem 2.1rem; font-size: 1.02rem; }
.btn--sm { padding: .5rem 1.15rem; font-size: .85rem; }
.btn:active { transform: translateY(0) scale(.98); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 40px; block-size: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--muted);
  transition: color .3s, border-color .3s, background-color .3s, transform .3s var(--ease-spring);
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); transform: translateY(-1px); }

.chip {
  display: inline-flex; align-items: center;
  padding: .28rem .85rem;
  border-radius: 999px;
  font-size: .8rem; font-weight: 600;
  color: var(--accent-2);
  background: var(--wash);
  border: 1px solid rgba(124, 108, 255, .35);
  transition: background-color .3s, border-color .3s, transform .3s var(--ease-spring);
}
.chip:hover { background: rgba(124, 108, 255, .26); transform: translateY(-1px); }
.chip--tag { color: var(--muted); background: var(--glass); border-color: var(--line); }
.chip--tag:hover { color: var(--ink); }
.chip--tag::before { content: '#'; margin-inline-end: .2rem; color: var(--accent-2); }

/* ── Skip link + progress ── */
.skip-link {
  position: fixed; inset-block-start: 10px; inset-inline-start: 10px;
  z-index: 300;
  padding: .6rem 1.1rem; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .85rem;
  transform: translateY(-300%);
  transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }

.page-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  block-size: 2px; z-index: 210;
}
.page-progress__bar {
  display: block; block-size: 100%;
  background: var(--grad);
  transform-origin: 0 50%;
  transform: scaleX(var(--sp, 0));
}
[dir='rtl'] .page-progress__bar { transform-origin: 100% 50%; }

/* ═══════════════ Header ═══════════════ */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: 200;
  transition: border-color .35s;
  border-block-end: 1px solid transparent;
}
/* The glass sits on a layer of its OWN, never on the header element.
   A backdrop-filter (like a transform or a filter) turns its element into
   the containing block for every `position: fixed` descendant — and the
   mobile navigation overlay is exactly that. With the filter on the header
   itself, opening the menu after scrolling shrank the full-screen overlay
   to the header's own 62px box: the page stayed visible behind the links.
   On a pseudo-element the effect is identical and the header stays a plain
   fixed box, so the overlay keeps the viewport as its containing block. */
.site-header::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  background: var(--header-bg);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-scrolled { border-color: var(--line); }
.header-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 1.4rem;
  block-size: var(--header-h);
}

/* Brand: Ariana's mark + the panel's own wordmark treatment
   (Plus Jakarta 800, uppercase, .16em tracking) */
.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand-mark {
  inline-size: 32px; block-size: 32px; flex: none;
  filter: drop-shadow(0 0 14px rgba(124, 108, 255, .5));
}
.brand-name {
  font-size: 1.05rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
}

.site-nav { margin-inline: auto; }
.nav-list { display: flex; align-items: center; gap: .35rem; }
.nav-item { position: relative; }
.nav-link {
  position: relative;
  display: inline-block;
  padding: .55rem .95rem;
  font-size: .92rem; font-weight: 600;
  color: var(--muted);
  border-radius: 10px;
  transition: color .3s;
}
.nav-link::after {
  content: '';
  position: absolute; inset-inline: .95rem; inset-block-end: .3rem;
  block-size: 2px; border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .4s var(--ease);
}
.nav-link:hover, .nav-item.is-current .nav-link { color: var(--ink); }
.nav-link:hover::after, .nav-item.is-current .nav-link::after { transform: scaleX(1); transform-origin: 0 50%; }

.nav-dropdown {
  position: absolute; inset-block-start: calc(100% + .6rem); inset-inline-start: 0;
  min-inline-size: 210px;
  padding: .5rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: none; }
.nav-dropdown__link {
  display: block; padding: .55rem .8rem;
  border-radius: 9px; font-size: .88rem; color: var(--muted);
  transition: color .25s, background-color .25s;
}
.nav-dropdown__link:hover { color: var(--ink); background: var(--glass); }

.header-actions { display: flex; align-items: center; gap: .6rem; }

/* The language picker: an icon button like search and the theme switch, and
   the languages in a small menu under it, anchored to its inline end so it
   opens toward the page on either reading direction. */
.lang-pick { position: relative; }
.lang-pick.is-open .lang-pick__btn { color: var(--ink); border-color: var(--line-strong); }
.lang-menu {
  position: absolute; inset-block-start: calc(100% + .6rem); inset-inline-end: 0;
  z-index: 260;
  min-inline-size: 12rem;
  margin: 0; padding: .45rem;
  list-style: none;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  /* hidden only once it has faded out … */
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.lang-pick.is-open .lang-menu,
.no-js .lang-pick:focus-within .lang-menu {
  opacity: 1; visibility: visible; transform: none;
  /* … but visible at once when it opens, so the keyboard can step into it */
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
}
.lang-menu__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem .8rem;
  border-radius: 9px;
  font-size: .9rem; color: var(--muted);
  transition: color .25s, background-color .25s;
}
.lang-menu__link:hover, .lang-menu__link:focus-visible { color: var(--ink); background: var(--glass); }
.lang-menu__link.is-current { color: var(--ink); }
.lang-menu__link.is-current::after {
  content: ''; flex: none;
  inline-size: .45rem; block-size: .45rem; border-radius: 50%;
  background: var(--accent-2);
}
@media (prefers-reduced-motion: reduce) {
  .lang-menu { transition: none; transform: none; }
}

.nav-toggle {
  display: none;
  position: relative; z-index: 250;
  inline-size: 42px; block-size: 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--glass);
}
.nav-toggle__bar {
  position: absolute; inset-inline: 12px;
  block-size: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .4s var(--ease), inset-block-start .4s var(--ease);
}
.nav-toggle__bar:nth-child(1) { inset-block-start: 16px; }
.nav-toggle__bar:nth-child(2) { inset-block-start: 24px; }
body.nav-open .nav-toggle__bar:nth-child(1) { inset-block-start: 20px; transform: rotate(45deg); }
body.nav-open .nav-toggle__bar:nth-child(2) { inset-block-start: 20px; transform: rotate(-45deg); }

/* ═══════════════ Sky: auroras, grid, stars ═══════════════ */
.hero__sky, .page-hero__sky {
  position: absolute; inset: 0; overflow: clip; pointer-events: none;
}
.aurora {
  position: absolute;
  inline-size: 60vmax; block-size: 60vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  will-change: transform;
}
.aurora--1 {
  inset-block-start: -22vmax; inset-inline-end: -12vmax;
  background: radial-gradient(closest-side, var(--aurora-1), transparent 70%);
}
.aurora--2 {
  inset-block-end: -28vmax; inset-inline-start: -14vmax;
  background: radial-gradient(closest-side, var(--aurora-2), transparent 70%);
}
.aurora--3 {
  inline-size: 44vmax; block-size: 44vmax;
  inset-block-start: -20vmax; inset-inline-start: -10vmax;
  background: radial-gradient(closest-side, var(--aurora-3), transparent 70%);
}
.aurora--4 {
  inline-size: 40vmax; block-size: 40vmax;
  inset-block-end: -22vmax; inset-inline-end: -8vmax;
  background: radial-gradient(closest-side, var(--aurora-4), transparent 70%);
}
.grid-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 75%);
}
.stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, var(--star-ink), transparent),
    radial-gradient(1px 1px at 32% 68%, var(--star-ink), transparent),
    radial-gradient(1.5px 1.5px at 54% 14%, var(--star-ink), transparent),
    radial-gradient(1px 1px at 72% 42%, var(--star-ink), transparent),
    radial-gradient(1.5px 1.5px at 88% 24%, var(--star-ink), transparent),
    radial-gradient(1px 1px at 44% 86%, var(--star-ink), transparent),
    radial-gradient(1px 1px at 64% 76%, var(--star-ink), transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .5; } to { opacity: 1; } }

/* ═══════════════ Hero ═══════════════ */
.hero { position: relative; }
.js .hero { block-size: 138vh; block-size: 138svh; }
.hero__stage {
  position: relative;
  min-block-size: 100vh; min-block-size: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--header-h) + 3rem) 3rem;
  overflow: clip;
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-2), var(--bg) 70%);
}
.js .hero__stage {
  position: sticky; inset-block-start: 0;
  block-size: 100vh; block-size: 100svh;
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(2rem, 3.5vw, 4rem);
}
.hero__inner > * { min-inline-size: 0; }
/* Hand-over choreography. The copy leaves first and is gone by 45% of the
   hero's scroll track; the dashboard holds alone, then dissolves too, so the
   stage is empty well before the next section arrives and nothing is left
   floating over it. Both opacities are plain numbers written by the scroll
   engine (--fade-copy / --fade-visual) rather than calc() chains, so the
   curve is exact and no browser has to agree with us about clamp(). */
.js .hero__copy {
  transform: translateY(calc(var(--p, 0) * -140px));
  opacity: var(--fade-copy, 1);
}
.js .hero__visual {
  /* No scroll-driven movement here: transforming a card this large every frame
     read as stutter rather than parallax. It fades, and that is all. */
  /* This element owns nothing but the scroll fade. The entrance belongs to
     the dashboard inside it, via [data-reveal] — two elements, two jobs, so
     neither an animation fill nor a reveal rule can seize `opacity` here and
     strand the dashboard on screen after everything else has left. */
  opacity: var(--fade-visual, 1);
}
.js .hero__sky { opacity: var(--fade-visual, 1); }

.hero__badge {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .42rem 1rem;
  border-radius: 999px;
  font-size: .8rem; font-weight: 600;
  color: var(--accent-2);
  background: var(--wash);
  border: 1px solid rgba(124, 108, 255, .32);
  margin-bottom: 1.6rem;
}
.pulse-dot {
  inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--ok);
  animation: pulseOk 2.4s infinite;
}
@keyframes pulseOk {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(169, 156, 255, .55); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hero__title {
  font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4.7rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.hero__line { display: block; }
.hero__line--grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-block-end: .08em;
}
.hero__sub {
  max-inline-size: 33rem;
  color: var(--muted);
  font-size: clamp(1rem, .92rem + .4vw, 1.16rem);
  line-height: 1.7;
  margin-bottom: 2.2rem;
}
.hero__sub strong { color: var(--ink); font-weight: 600; }
.hero__actions { display: flex; gap: .9rem; flex-wrap: wrap; }

.hero__scrollcue {
  position: absolute; inset-block-end: 1.6rem; inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--faint);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  opacity: calc(1 - var(--p, 0) * 4);
}
.hero__scrollcue-line {
  inline-size: 1px; block-size: 44px;
  background: linear-gradient(var(--accent-2), transparent);
  animation: cueDrop 2s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cueDrop { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ── Dashboard mock (pure CSS, mirrors the real panel) ── */
.hero__visual { position: relative; perspective: 1400px; padding-block: 2.9rem; }
.dash {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--film-2), var(--film-1) 45%), var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--glow), inset 0 1px 0 var(--film-3);
  overflow: hidden;
  transform: rotateX(calc(var(--ty, 0) * 1deg)) rotateY(calc(var(--tx, 0) * -1deg));
  transition: transform .25s ease-out;
}
.dash__chrome {
  display: flex; align-items: center; gap: .9rem;
  padding: .8rem 1.1rem;
  border-block-end: 1px solid var(--line);
  background: var(--film-1);
}
.dash__dots { display: inline-flex; gap: 6px; }
.dash__dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--selected); }
.dash__dots i:nth-child(1) { background: #f8717199; }
.dash__dots i:nth-child(2) { background: #fbbf2499; }
.dash__dots i:nth-child(3) { background: #4ade8099; }
.dash__url {
  margin-inline: auto;
  font-size: .72rem; color: var(--faint);
  font-family: var(--mono);
  direction: ltr;
  padding: .2rem .9rem; border-radius: 8px;
  background: var(--film-2); border: 1px solid var(--line);
}
.dash__body { display: grid; grid-template-columns: 56px 1fr; }
.dash__side {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding-block: 1.2rem;
  border-inline-end: 1px solid var(--line);
  background: var(--bg-2);
}
.dash__logo {
  inline-size: 26px; block-size: 26px; border-radius: 8px;
  background: var(--grad);
  box-shadow: 0 4px 14px -4px rgba(124, 108, 255, .8);
}
.dash__navitem {
  inline-size: 22px; block-size: 22px; border-radius: 7px;
  background: var(--film-2);
}
.dash__navitem.is-on { background: var(--selected); outline: 1px solid var(--accent); }
.dash__main { padding: 1rem 1.1rem 1.2rem; }
.dash__topbar { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.dash__hello { font-size: .8rem; font-weight: 700; white-space: nowrap; }
.dash__search { flex: 1; block-size: 26px; border-radius: 8px; background: var(--film-2); border: 1px solid var(--line); }
.dash__avatar { inline-size: 28px; block-size: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-3), var(--accent)); flex: none; }
.dash__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: .8rem; }
.dash__body { min-block-size: 25rem; }
.dash__main { display: flex; flex-direction: column; }
.dash__cards { flex: 1 1 auto; }
.dash-card { justify-content: flex-start; }
.dash-card {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .9rem .9rem 1rem;
  border-radius: 12px;
  background: var(--raised);
  border: 1px solid var(--line);
  min-block-size: 118px;
}
.dash-card__label { font-size: .66rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.dash-card__state { margin-block-start: auto; font-size: .68rem; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.dash-card__state.is-ok { color: var(--ok); font-weight: 700; }

.sk-line {
  display: block; block-size: 7px; border-radius: 4px;
  background: linear-gradient(90deg, var(--film-3), var(--film-4), var(--film-3));
  background-size: 200% 100%;
  animation: shimmer 2.6s linear infinite;
}
.sk-line.dim { opacity: .5; animation: none; background: var(--film-3); }
.sk-line--96 { inline-size: 96%; } .sk-line--95 { inline-size: 95%; }
.sk-line--92 { inline-size: 92%; } .sk-line--90 { inline-size: 90%; }
.sk-line--88 { inline-size: 88%; } .sk-line--82 { inline-size: 82%; }
.sk-line--75 { inline-size: 75%; } .sk-line--70 { inline-size: 70%; }
.sk-line--60 { inline-size: 60%; } .sk-line--55 { inline-size: 55%; }
.sk-line--35 { inline-size: 35%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.wave { display: flex; align-items: center; gap: 3px; block-size: 30px; }
.wave i {
  inline-size: 3px; border-radius: 3px;
  background: linear-gradient(to top, var(--accent), var(--accent-2));
  block-size: 30%;
  animation: waveBounce 1.15s ease-in-out infinite alternate;
}
.wave i:nth-child(3n)   { animation-delay: -.2s; }
.wave i:nth-child(3n+1) { animation-delay: -.55s; }
.wave i:nth-child(4n)   { animation-delay: -.85s; }
.wave i:nth-child(5n)   { animation-delay: -.4s; }
@keyframes waveBounce { from { block-size: 22%; } to { block-size: 100%; } }
.wave--lg { block-size: 46px; flex: 1; justify-content: space-between; gap: 0; }
.wave--lg i { inline-size: 4px; }

.ring {
  position: relative;
  inline-size: 52px; block-size: 52px; border-radius: 50%;
  background: conic-gradient(var(--accent-2) calc(var(--val, 0) * 1%), var(--film-3) 0);
  display: grid; place-items: center;
}
.ring::before {
  content: ''; position: absolute; inset: 6px; border-radius: 50%;
  background: var(--raised);
}
.ring b { position: relative; font-size: .8rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ring--lg { inline-size: 110px; block-size: 110px; }
.ring--lg::before { inset: 11px; background: var(--card); }
.ring--lg b { font-size: 1.6rem; }
.ring--dim { background: conic-gradient(var(--faint) calc(var(--val, 0) * 1%), var(--film-3) 0); }
.ring--dim b { color: var(--muted); }
.ring--ok { background: conic-gradient(var(--ok) calc(var(--val, 0) * 1%), var(--film-3) 0); }
.ring--ok b { color: var(--ok); }

.dash__chart {
  display: flex; align-items: flex-end; gap: 1rem;
  padding: .8rem .9rem .6rem;
  border-radius: 12px;
  background: var(--raised);
  border: 1px solid var(--line);
}
.dash__chart-label { font-size: .66rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.bars { flex: 1; display: flex; align-items: flex-end; gap: 8px; block-size: 84px; }
.bars i {
  flex: 1; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(to top, rgba(124, 108, 255, .5), var(--accent-2));
  block-size: var(--h, 40%);
  opacity: .9;
  transform-origin: bottom;
  animation: barGrow 1s var(--ease) backwards;
}
.bars i:nth-child(2) { animation-delay: .06s; } .bars i:nth-child(3) { animation-delay: .12s; }
.bars i:nth-child(4) { animation-delay: .18s; } .bars i:nth-child(5) { animation-delay: .24s; }
.bars i:nth-child(6) { animation-delay: .3s; }  .bars i:nth-child(7) { animation-delay: .36s; }
@keyframes barGrow { from { transform: scaleY(0); } }

/* The angle is a real animatable property, so the rim can rotate without a
   pseudo-element to clip — nothing can escape the border box this way. Where
   @property is unsupported the angle simply stays put and the rim is static. */
@property --chip-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.hero-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .58rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .78rem; font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    conic-gradient(from var(--chip-angle),
      var(--line-strong) 0 55%, var(--accent) 72%, var(--accent-2) 84%, var(--line-strong) 96%) border-box;
  box-shadow: var(--shadow);
  animation: chipOrbit 6s linear infinite;
}
@keyframes chipOrbit { to { --chip-angle: 360deg; } }
.hero-chip svg { color: var(--ok); flex: none; }
.hero-chip--2 svg { color: var(--accent-2); }
/* Parked in the breathing room above and below the card — never on its edge. */
.hero-chip--1 { inset-block-start: 0; inset-inline-start: 1.5rem; }
.hero-chip--2 { inset-block-end: 0; inset-inline-end: 1.5rem; }

/* ═══════════════ Ticker ═══════════════ */
.ticker {
  border-block: 1px solid var(--line);
  background: var(--bg-2);
  padding-block: 1.05rem;
  overflow: clip;
}
.ticker__mask {
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker__track { display: flex; inline-size: max-content; animation: tick 34s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group {
  display: flex; align-items: center; flex: none;
  min-inline-size: 100vw;
  justify-content: space-around;
}
.ticker__group span {
  font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap; padding-inline: 1.4rem;
}
.ticker__group i {
  inline-size: 6px; block-size: 6px; border-radius: 50%; flex: none;
  background: var(--grad);
}
/* Auto Pilot · Theme Contract · SEO Analyzer · E-commerce · WordPress
   Import — the same tones those features wear everywhere else. */
.ticker__group i:nth-of-type(2) { background: var(--tone-value); }
.ticker__group i:nth-of-type(5) { background: var(--tone-data); }
.ticker__group i:nth-of-type(6) { background: var(--tone-value); }
.ticker__group i:nth-of-type(7) { background: var(--tone-value); }
.ticker__group i:nth-of-type(9) { background: var(--tone-live); }
@keyframes tick { to { transform: translateX(-50%); } }
[dir='rtl'] .ticker__track { animation-name: tickRtl; }
@keyframes tickRtl { to { transform: translateX(50%); } }

/* ═══════════════ Manifesto ═══════════════ */
.manifesto { position: relative; }
.js .manifesto { block-size: 230vh; }
.manifesto__stage {
  display: flex; align-items: center;
  min-block-size: 100vh; min-block-size: 100svh;
  padding-block: 5rem;
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(124, 108, 255, .08), transparent 75%),
    var(--bg);
}
.js .manifesto__stage {
  position: sticky; inset-block-start: 0;
  block-size: 100vh; block-size: 100svh;
}
.manifesto__kicker {
  font-size: .74rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 1.8rem;
}
.manifesto__text {
  font-size: clamp(1.6rem, 1rem + 3vw, 3.2rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.025em;
}
.js .manifesto__text .w {
  opacity: clamp(.10, calc(var(--p, 0) * (var(--total, 30) + 6) - var(--i, 0)), 1);
  transition: opacity .12s linear;
}

/* ═══════════════ Acts (pinned scenes) ═══════════════ */
.acts { position: relative; }
/* 100vh of stage plus one screen of track per stop: the title card, then
   each of the seven acts — every act the same share, one gesture each. */
/* Eight stops — the title card and seven acts — each one step of track,
   about a screen (clamp 560–960px, 90vh), then half a step of runway so the
   last act stays on stage before it unpins: 7 steps between the first and
   last stop + 0.5. main.js settles the page on a stop once a scroll ends. */
.js .acts { --act-step: clamp(560px, 90vh, 960px); block-size: calc(100vh + 7.5 * var(--act-step)); }
.acts__stage {
  position: relative;
  overflow: clip;
  background: var(--bg-2);
}
.js .acts__stage {
  position: sticky; inset-block-start: 0;
  block-size: 100vh; block-size: 100svh;
}
.acts__aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(35% 45% at 18% 22%, rgba(124, 108, 255, .13), transparent 70%),
    radial-gradient(35% 45% at 84% 78%, rgba(129, 140, 248, .10), transparent 70%);
  pointer-events: none;
}
.acts__inner {
  position: relative;
  display: flex; align-items: center; gap: 2rem;
  min-block-size: 100vh; min-block-size: 100svh;
  padding-block: calc(var(--header-h) + 1rem) 2rem;
}
.acts__rail {
  position: absolute; inset-block-end: 1.35rem; inset-inline-start: 50%;
  translate: -50% 0;
  display: flex; flex-direction: row; align-items: center; gap: .4rem;
  z-index: 5;
}
.acts__dots { display: flex; align-items: center; }
.acts__dot {
  --dot: var(--film-4); --dot-on: var(--grad);
  position: relative;
  inline-size: 20px; block-size: 24px;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  transition: inline-size .4s var(--ease);
}
.acts__dot::before {
  content: '';
  position: absolute; inset-inline: 6px; inset-block: 8px;
  border-radius: 999px;
  background: var(--dot);
  transition: background-color .4s;
}
.acts__dot.is-on { inline-size: 38px; }
.acts__dot.is-on::before { background: var(--dot-on); }
.acts__dot:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; border-radius: 8px; }
/* The three toned acts show their colour on the rail even while waiting,
   faintly, so the rail previews the rhythm before the reader gets there. */
.acts__dot[data-dot='2'] { --dot: color-mix(in srgb, var(--tone-live) 45%, var(--film-4)); --dot-on: var(--tone-live); }
.acts__dot[data-dot='5'] { --dot: color-mix(in srgb, var(--tone-data) 45%, var(--film-4)); --dot-on: var(--tone-data); }
.acts__dot[data-dot='6'] { --dot: color-mix(in srgb, var(--tone-value) 45%, var(--film-4)); --dot-on: var(--tone-value); }
.acts__arrow { display: none; }

/* Three light layers, one per tone, cross-faded by the scene the scroll
   engine writes on .acts. Three layers rather than one re-coloured layer:
   a gradient cannot be transitioned, so moving straight from Act VI to
   Act VII would jump cyan to gold in a single frame. */
.acts__tint { position: absolute; inset: -20%; pointer-events: none; }
.acts__tint i {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.acts__tint i[data-t='live']  { background: radial-gradient(38% 46% at 82% 30%, color-mix(in srgb, var(--tone-live) 14%, transparent), transparent 70%); }
.acts__tint i[data-t='data']  { background: radial-gradient(38% 46% at 82% 30%, color-mix(in srgb, var(--tone-data) 15%, transparent), transparent 70%); }
.acts__tint i[data-t='value'] { background: radial-gradient(38% 46% at 82% 30%, color-mix(in srgb, var(--tone-value) 13%, transparent), transparent 70%); }
.acts[data-scene='2'] .acts__tint i[data-t='live'],
.acts[data-scene='5'] .acts__tint i[data-t='data'],
.acts[data-scene='6'] .acts__tint i[data-t='value'] { opacity: 1; }

.acts__viewport { position: relative; flex: 1; min-inline-size: 0; min-block-size: 30rem; }
.act {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
}
.act > * { min-inline-size: 0; }
.js .act {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  pointer-events: none;
}
.js .act .act__copy > * { opacity: 0; transform: translateY(26px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js .act .act__visual { opacity: 0; transform: translateY(34px) scale(.96); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .act.is-live {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .45s var(--ease);
}
.js .act.is-live .act__copy > * { opacity: 1; transform: none; }
.js .act.is-live .act__copy > :nth-child(2) { transition-delay: .08s; }
.js .act.is-live .act__copy > :nth-child(3) { transition-delay: .14s; }
.js .act.is-live .act__copy > :nth-child(4) { transition-delay: .2s; }
.js .act.is-live .act__copy > :nth-child(5) { transition-delay: .26s; }
.js .act.is-live .act__visual { opacity: 1; transform: none; transition-delay: .12s; }
.no-js .act { padding-block: 4rem; }

.act__copy { position: relative; }
.act__ghost {
  position: absolute; inset-block-start: -4.6rem; inset-inline-start: -1rem;
  font-size: clamp(5rem, 9vw, 8.5rem);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(164, 157, 205, .18);
  line-height: 1;
  letter-spacing: -.04em;
  pointer-events: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.act__kicker {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--tone-ink);
  margin-bottom: 1rem;
}
.act__title {
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.9rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
.act__text { color: var(--muted); font-size: 1.04rem; line-height: 1.75; max-inline-size: 33rem; margin-bottom: 1.4rem; }
.act__points { display: flex; flex-direction: column; gap: .55rem; }
.act__points li {
  position: relative;
  padding-inline-start: 1.7rem;
  font-size: .94rem; font-weight: 600;
}
.act__points li::before {
  content: '';
  position: absolute; inset-inline-start: 0; inset-block-start: .32em;
  inline-size: 1rem; block-size: 1rem;
  border-radius: 50%;
  background: var(--wash)
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a99cff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9.5'/%3E%3C/svg%3E") center / 62% no-repeat;
}

/* ── Scene mocks ── */
.act__visual { display: flex; align-items: center; }
/* The browser bar must sit flush on the card's top edge in EVERY act, so the
   mock never centers as a whole: the chrome stays put and only the content
   below it centers in the leftover height, via a pair of auto margins. */
.act__visual > .mock { inline-size: 100%; min-block-size: 28.5rem; justify-content: flex-start; }
.act__visual > .mock > .mock__chrome + * { margin-block-start: auto; }
.act__visual > .mock > :last-child { margin-block-end: auto; }

.mock {
  --mock-pad: 1.6rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--film-2), var(--film-1) 45%), var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow), inset 0 1px 0 var(--film-2);
  padding: var(--mock-pad);
  display: flex; flex-direction: column; gap: .9rem;
}
.mock__caption { font-size: .8rem; color: var(--faint); text-align: center; }
.mock__chrome {
  display: flex; align-items: center; gap: .8rem;
  margin: calc(var(--mock-pad) * -1) calc(var(--mock-pad) * -1) .1rem;
  padding: .7rem 1.1rem;
  border-block-end: 1px solid var(--line);
  background: var(--film-1);
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
}
.mock__filename { font-size: .74rem; color: var(--faint); font-family: var(--mono); }
.mock__url {
  margin-inline: auto;
  font-size: .7rem; color: var(--faint);
  font-family: var(--mono);
  padding: .18rem .85rem; border-radius: 8px;
  background: var(--film-2); border: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-inline-size: 75%;
}

/* Act 1 — Assistant chat */
.mock--chat { gap: .8rem; }
.chat-row { display: flex; }
.chat-row--user { justify-content: flex-end; }
.chat-bubble {
  max-inline-size: 85%;
  padding: .7rem 1rem;
  border-radius: 14px;
  font-size: .86rem; line-height: 1.55;
}
.chat-bubble--user {
  background: var(--grad);
  color: #fff;
  border-end-end-radius: 4px;
  box-shadow: 0 8px 24px -10px rgba(124, 108, 255, .7);
}
.chat-plan {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--raised);
  padding: 1rem 1.1rem;
}
.chat-plan__label {
  font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: .6rem;
}
.chat-plan__steps { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .9rem; }
.chat-plan__steps li {
  position: relative;
  padding-inline-start: 1.4rem;
  font-size: .84rem; color: var(--ink);
}
.chat-plan__steps li::before {
  content: '';
  position: absolute; inset-inline-start: 0; inset-block-start: .38em;
  inline-size: .6rem; block-size: .6rem;
  border-radius: 3px;
  background: var(--wash);
  border: 1px solid var(--accent);
}
.chat-plan__actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.chat-plan__apply {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  background: var(--grad);
  color: #fff; font-size: .8rem; font-weight: 700;
}
.chat-plan__note { font-size: .74rem; color: var(--faint); }
.chat-plan__note b { color: var(--ok); font-weight: 700; }

/* Act 2 — Auto Pilot rule */
.mock--pilot { gap: 1rem; }
.pilot-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pilot-head__title { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }
.pilot-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  color: var(--ok);
}
.pilot-toggle__track {
  inline-size: 38px; block-size: 22px; border-radius: 999px;
  background: rgba(74, 222, 128, .25);
  border: 1px solid rgba(74, 222, 128, .5);
  position: relative;
}
.pilot-toggle__track::after {
  content: '';
  position: absolute; inset-block-start: 2px; inset-inline-end: 2px;
  inline-size: 16px; block-size: 16px; border-radius: 50%;
  background: var(--ok);
}
.pilot-rule {
  font-size: 1.05rem; font-weight: 700; line-height: 1.5;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--raised);
  border: 1px solid var(--line-strong);
}
.pilot-rule b { color: var(--accent-2); }
.pilot-meta { display: flex; gap: .5rem; flex-wrap: wrap; }
.pilot-meta span {
  padding: .25rem .8rem;
  border-radius: 999px;
  font-size: .74rem; font-weight: 700;
  color: var(--muted);
  background: var(--glass);
  border: 1px solid var(--line);
}
.pilot-log { display: flex; flex-direction: column; border-block-start: 1px dashed var(--line); padding-block-start: .8rem; }
.pilot-log li {
  display: flex; align-items: center; gap: .7rem;
  padding-block: .35rem;
  font-family: var(--mono);
  font-size: .74rem; color: var(--muted);
}
.pilot-log time { color: var(--faint); flex: none; }
.pilot-log .ok { color: var(--ok); font-weight: 700; }

/* Act 3 — Podcast episode */
/* only the bottom padding grows: the top one is --mock-pad, which the browser
   bar cancels with its negative margin to sit flush on the card's edge — a
   larger top padding left the bar hanging inside a second rim */
.mock--audio { gap: 1.2rem; padding-block-end: 2rem; }
.hosts { display: flex; align-items: center; gap: .9rem; }
.hosts__pair { display: flex; }
.hosts__avatar {
  inline-size: 40px; block-size: 40px; border-radius: 50%;
  border: 2px solid var(--card);
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  display: grid; place-items: center;
  color: #fff; font-size: .72rem; font-weight: 800;
}
.hosts__avatar + .hosts__avatar { margin-inline-start: -12px; background: linear-gradient(135deg, var(--accent-3), var(--accent-2)); }
.hosts__label { font-size: .84rem; color: var(--muted); line-height: 1.5; }
.hosts__label b { color: var(--ink); display: block; }
.mock-player {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.1rem 1.3rem;
  border-radius: 999px;
  background: var(--raised);
  border: 1px solid var(--line-strong);
}
.mock-player__btn {
  inline-size: 52px; block-size: 52px; border-radius: 50%; flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E"), linear-gradient(120deg, #7c6cff, #a99cff);
  background-repeat: no-repeat;
  background-position: 58% center, center;
  background-size: 42%, cover;
  box-shadow: 0 10px 30px -10px rgba(124, 108, 255, .85);
}
.mock-player__time { font-size: .88rem; font-weight: 700; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }

/* Act 4 — Theme contract */
.mock--contract { padding: 0; overflow: hidden; text-align: start; }
.mock--contract .mock__chrome { margin: 0; border-radius: 0; }
.mock-code {
  padding: 1.3rem 1.4rem;
  font-family: var(--mono);
  font-size: .78rem; line-height: 2.1;
  overflow-x: auto;
  white-space: pre;
}
.tk-c { color: var(--faint); }
.tk-k { color: var(--accent-2); }
.tk-ok { color: var(--ok); font-weight: 700; }
.tk-no { color: var(--bad); font-weight: 700; }
.tk-e { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--bad); }
.mock-verdict {
  margin: 0 1.4rem 1.3rem;
  padding: .65rem 1rem;
  border-radius: 12px;
  font-size: .82rem; font-weight: 700;
  color: var(--ok);
  background: rgba(74, 222, 128, .1);
  border: 1px solid rgba(74, 222, 128, .3);
}

/* Performance gauges */
.mock--speed { gap: 1.2rem; }
.speed-rows { display: flex; flex-direction: column; border-block-start: 1px dashed var(--line); padding-block-start: .9rem; }
.speed-rows li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: .45rem;
  font-family: var(--mono);
  font-size: .78rem;
}
.speed-rows li + li { border-block-start: 1px dashed var(--line-soft); }
.speed-rows b { color: var(--muted); font-weight: 600; }

/* SEO Analyzer before/after */
.mock--seo { gap: 1.2rem; }
.seo-scores { display: flex; align-items: center; justify-content: center; gap: 1.4rem; }
.seo-scores__item { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.seo-scores__label {
  font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}
.seo-scores__arrow { color: var(--accent-2); flex: none; }
.seo-diff { display: flex; flex-direction: column; border-block-start: 1px dashed var(--line); padding-block-start: .9rem; }
.seo-diff li { padding-block: .45rem; font-size: .8rem; line-height: 1.6; }
.seo-diff li + li { border-block-start: 1px dashed var(--line-soft); }
.seo-diff__field {
  font-family: var(--mono);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint);
  display: block; margin-bottom: .15rem;
}
.seo-diff__old { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--bad); display: block; }
.seo-diff__new { color: var(--ink); display: block; }
.seo-diff__new::before { content: '→ '; color: var(--ok); }

/* ═══════════════ Bento ═══════════════ */
.grid-feats { padding-block: var(--sec); }
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.bento-card {
  position: relative;
  padding: 1.9rem 1.7rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .5s var(--ease-spring), border-color .4s, box-shadow .4s;
}
.bento-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--tone) 15%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
}
.bento-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--tone) 42%, var(--line-strong)); box-shadow: var(--shadow); }
.bento-card:hover::before { opacity: 1; }
.bento-card--wide { grid-column: span 2; }
.bento-card__icon {
  display: inline-grid; place-items: center;
  inline-size: 48px; block-size: 48px;
  border-radius: 14px;
  color: var(--tone-ink);
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent);
  margin-bottom: 1.15rem;
}
.bento-card__title { font-size: 1.12rem; font-weight: 800; letter-spacing: -.015em; margin-bottom: .55rem; }
.bento-card__text { color: var(--muted); font-size: .9rem; line-height: 1.7; }

/* ═══════════════ Stats ═══════════════ */
.stats {
  border-block: 1px solid var(--line);
  background:
    radial-gradient(55% 90% at 50% 0%, rgba(124, 108, 255, .08), transparent 70%),
    var(--bg-2);
  padding-block: var(--sec);
}
.stats__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  text-align: center;
}
.stats__num {
  display: block;
  font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  background: var(--tone-grad, var(--grad));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stats__label { color: var(--muted); font-size: .9rem; font-weight: 600; }

/* ═══════════════ Post cards ═══════════════ */
.home-blog { padding-block: var(--sec); }
.post-grid { display: grid; gap: 1.3rem; }
.post-grid--3, .post-grid--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.post-card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .5s var(--ease-spring), border-color .4s, box-shadow .4s;
}
.post-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.post-card.is-pinned { border-color: rgba(124, 108, 255, .45); }

.post-card__media {
  position: relative; display: block;
  aspect-ratio: 16 / 9.4;
  background:
    radial-gradient(80% 120% at 20% 0%, rgba(124, 108, 255, .28), transparent 60%),
    radial-gradient(70% 100% at 85% 100%, rgba(129, 140, 248, .22), transparent 65%),
    var(--bg-2);
  overflow: hidden;
}
/* Only ever seen when an article has no image. Three identical violet
   blanks in a row read as a broken grid; a second light in each keeps them
   plainly placeholders while giving the row a rhythm. */
.post-card:nth-child(3n + 2) .post-card__media {
  background:
    radial-gradient(80% 120% at 20% 0%, rgba(124, 108, 255, .24), transparent 60%),
    radial-gradient(70% 100% at 85% 100%, color-mix(in srgb, var(--tone-data) 20%, transparent), transparent 65%),
    var(--bg-2);
}
.post-card:nth-child(3n + 3) .post-card__media {
  background:
    radial-gradient(80% 120% at 20% 0%, rgba(124, 108, 255, .24), transparent 60%),
    radial-gradient(70% 100% at 85% 100%, color-mix(in srgb, var(--tone-live) 16%, transparent), transparent 65%),
    var(--bg-2);
}
.post-card__media img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform .8s var(--ease), filter .5s;
}
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--card) 72%, transparent), transparent 45%);
}
.post-card__badge {
  position: absolute; z-index: 2;
  inset-block-start: .9rem; inset-inline-start: .9rem;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff;
  background: var(--scrim);
  border: 1px solid var(--film-4);
  backdrop-filter: blur(10px);
}
.post-card__badge svg { color: var(--accent-2); }
.post-card__pin {
  position: absolute; z-index: 2;
  inset-block-start: .9rem; inset-inline-end: .9rem;
  display: grid; place-items: center;
  inline-size: 28px; block-size: 28px; border-radius: 50%;
  color: var(--warn);
  background: var(--scrim);
  border: 1px solid var(--film-4);
  backdrop-filter: blur(10px);
}
.post-card__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.3rem 1.4rem 1.5rem; flex: 1; }
.post-card__meta { display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: var(--faint); font-weight: 600; }
.meta-dot { inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--faint); flex: none; }
.post-card__title { font-size: 1.12rem; font-weight: 800; line-height: 1.35; letter-spacing: -.015em; }
.post-card__title a { transition: color .3s; }
.post-card__title a:hover { color: var(--accent-2); }
.post-card__excerpt {
  color: var(--muted); font-size: .88rem; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__author {
  display: flex; align-items: center; gap: .55rem;
  margin-block-start: auto; padding-block-start: .8rem;
  font-size: .8rem; font-weight: 600; color: var(--muted);
  border-block-start: 1px solid var(--line);
}
.post-card__avatar { inline-size: 28px; block-size: 28px; border-radius: 50%; object-fit: cover; }

/* Card grids: automatic stagger */
.post-grid [data-reveal]:nth-child(2) { --d: .08s; }
.post-grid [data-reveal]:nth-child(3) { --d: .16s; }
.post-grid [data-reveal]:nth-child(4) { --d: .06s; }
.post-grid [data-reveal]:nth-child(5) { --d: .14s; }
.post-grid [data-reveal]:nth-child(6) { --d: .22s; }

/* ═══════════════ CTA ═══════════════ */
.cta { padding-block: var(--sec); }
.cta__card {
  position: relative;
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 3.5rem);
  border-radius: calc(var(--radius-lg) + 8px);
  background: linear-gradient(160deg, rgba(124, 108, 255, .22), var(--bg-2) 65%);
  border: 1px solid rgba(124, 108, 255, .3);
  overflow: hidden;
}
.cta__aurora {
  position: absolute; inset: -40%;
  background:
    radial-gradient(30% 42% at 28% 30%, rgba(124, 108, 255, .32), transparent 70%),
    radial-gradient(28% 40% at 74% 72%, rgba(129, 140, 248, .22), transparent 70%),
    radial-gradient(22% 34% at 82% 20%, color-mix(in srgb, var(--fill-data) 26%, transparent), transparent 70%),
    radial-gradient(24% 36% at 16% 84%, color-mix(in srgb, var(--fill-value) 17%, transparent), transparent 70%),
    radial-gradient(20% 30% at 60% 96%, color-mix(in srgb, var(--fill-live) 14%, transparent), transparent 70%);
  animation: ctaDrift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ctaDrift { from { transform: translate3d(-2%, -2%, 0) rotate(-2deg); } to { transform: translate3d(2%, 2%, 0) rotate(2deg); } }
.cta__title {
  position: relative;
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.3rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -.03em;
  margin-bottom: .9rem;
  text-wrap: balance;
}
.cta__text { position: relative; color: var(--muted); font-size: 1.05rem; margin-bottom: 1.8rem; }
.cta__actions { position: relative; display: flex; justify-content: center; gap: .9rem; flex-wrap: wrap; }

/* ═══════════════ Inner page heros ═══════════════ */
.page-hero, .archive-hero, .post-hero, .notfound {
  position: relative;
  padding-block: calc(var(--header-h) + var(--sec)) var(--sec);
  background: radial-gradient(110% 80% at 50% 0%, var(--bg-2), var(--bg) 75%);
  overflow: clip;
}
.page-hero--tall { padding-block-end: var(--sec); }
.page-hero__inner, .archive-hero__inner, .post-hero__inner { position: relative; z-index: 2; }
.page-hero__title {
  font-size: clamp(2rem, 1.1rem + 3.6vw, 3.8rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  text-wrap: balance;
}
.page-hero__sub { color: var(--muted); font-size: 1.1rem; line-height: 1.7; max-inline-size: 36rem; margin-block-start: 1.4rem; }

/* ── About ── */
.story { padding-block: var(--sec); }
.story__block + .story__block { margin-block-start: var(--sec); }
.story__heading {
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
  font-weight: 800; letter-spacing: -.02em;
  margin-bottom: 1.1rem;
  padding-inline-start: 1.2rem;
  border-inline-start: 3px solid;
  border-image: linear-gradient(var(--accent), var(--accent-2)) 1;
}
.story__lead { font-size: 1.16rem; font-weight: 600; line-height: 1.8; margin-bottom: 1rem; }
.story__body { color: var(--muted); font-size: 1.02rem; line-height: 1.9; }

/* ── Feature index (About) ── */
.feature-index { padding-block-end: var(--sec); }
.feature-index__group + .feature-index__group { margin-block-start: var(--sec); }
.feature-index__label {
  display: flex; align-items: center; gap: .7rem;
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em;
  margin-bottom: 1.2rem;
}
.feature-index__badge {
  display: inline-grid; place-items: center;
  padding: .2rem .7rem;
  border-radius: 8px;
  font-size: .68rem; font-weight: 800; letter-spacing: .14em;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 6px 18px -8px rgba(124, 108, 255, .8);
}
.feature-index__badge--alt { background: linear-gradient(120deg, var(--accent-3), var(--accent)); }
.feature-index__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  counter-reset: fi;
}
.feature-index__item {
  position: relative;
  counter-increment: fi;
  padding: 1.2rem 1.3rem 1.2rem 3.4rem;
  border-radius: var(--radius);
  background: linear-gradient(170deg, var(--film-1), var(--film-1) 55%), var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .93rem; line-height: 1.75;
  transition: transform .5s var(--ease-spring), border-color .4s, box-shadow .4s;
}
.feature-index__item::before {
  content: counter(fi, decimal-leading-zero);
  position: absolute; inset-inline-start: 1.15rem; inset-block-start: 1.25rem;
  font-size: .8rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.feature-index__item:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.feature-index__item b { color: var(--ink); font-weight: 800; }

.mv { padding-block-end: var(--sec); }
.mv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.mv__card {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  min-block-size: 15rem;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.mv__card--mission { background: linear-gradient(160deg, rgba(124, 108, 255, .24), var(--card) 70%); }
.mv__card--vision  { background: linear-gradient(160deg, rgba(129, 140, 248, .2), var(--card) 70%); }
.mv__label {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 1rem;
}
.mv__card--vision .mv__label { color: var(--accent-3); }
.mv__title { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.65rem); font-weight: 800; line-height: 1.4; letter-spacing: -.02em; }

.values { padding-block-end: var(--sec); }
.values__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.values__item {
  display: flex; gap: 1.3rem;
  padding: 1.8rem 1.7rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  border: 1px solid var(--line);
  transition: transform .5s var(--ease-spring), border-color .4s;
}
.values__item:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.values__num {
  font-size: 1.6rem; font-weight: 800; line-height: 1.4;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.values__title { font-size: 1.12rem; font-weight: 800; letter-spacing: -.015em; margin-bottom: .5rem; }
.values__text { color: var(--muted); font-size: .92rem; line-height: 1.7; }

/* ── Contact ── */
.contact { padding-block: 0 var(--sec); }
.contact__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.contact-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .8rem;
  padding: 2rem 1.8rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  border: 1px solid var(--line);
  transition: transform .5s var(--ease-spring), border-color .4s, box-shadow .4s;
}
.contact-card:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.contact-card--primary { background: linear-gradient(165deg, rgba(124, 108, 255, .2), var(--card) 70%); border-color: rgba(124, 108, 255, .32); }
.contact-card__icon {
  display: inline-grid; place-items: center;
  inline-size: 52px; block-size: 52px; border-radius: 15px;
  color: var(--accent-2);
  background: var(--wash);
  border: 1px solid rgba(124, 108, 255, .32);
}
.contact-card__title { font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; }
.contact-card__text { color: var(--muted); font-size: .92rem; line-height: 1.7; flex: 1; }
.contact-card__link { color: var(--accent-2); font-weight: 700; font-size: .92rem; }
.contact-card__link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ═══════════════ Archives & search ═══════════════ */
.archive-hero__title {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -.03em;
  text-wrap: balance;
}
.archive-hero__desc { color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-inline-size: 38rem; margin-block-start: 1.1rem; }
.archive-hero__count {
  display: inline-block;
  margin-block-start: 1.3rem;
  padding: .3rem 1rem;
  border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  color: var(--accent-2);
  background: var(--wash);
  border: 1px solid rgba(124, 108, 255, .3);
}
.archive-hero__avatar {
  inline-size: 88px; block-size: 88px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(124, 108, 255, .5);
  box-shadow: var(--glow);
  margin-bottom: 1.4rem;
}
.archive-body { padding-block: var(--sec); }

.search-form {
  display: flex; align-items: center; gap: .6rem;
  max-inline-size: 34rem;
  margin-block-start: 1.6rem;
  padding: .45rem .5rem .45rem 1.1rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  transition: border-color .3s, box-shadow .3s;
}
[dir='rtl'] .search-form { padding: .45rem 1.1rem .45rem .5rem; }
.search-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.search-form__icon { color: var(--faint); flex: none; }
.search-form__input {
  flex: 1; min-inline-size: 0;
  background: none; border: 0; outline: 0;
  font: inherit; color: var(--ink);
  padding-block: .45rem;
}
.search-form__input::placeholder { color: var(--faint); }
.search-form__btn { flex: none; }

/* Pagination — generic styling over the engine's own markup */
.pagination-wrap { margin-block-start: clamp(2.5rem, 5vw, 4rem); display: flex; justify-content: center; }
.pagination-wrap :where(a, span) {
  display: inline-grid; place-items: center;
  min-inline-size: 42px; block-size: 42px;
  padding-inline: .8rem;
  margin-inline: .2rem;
  border-radius: 12px;
  font-size: .9rem; font-weight: 700;
  color: var(--muted);
  background: var(--glass);
  border: 1px solid var(--line);
  transition: color .3s, border-color .3s, background-color .3s, transform .3s var(--ease-spring);
}
.pagination-wrap :where(a):hover { color: var(--ink); border-color: var(--line-strong); transform: translateY(-2px); }
.pagination-wrap :where(.current, [aria-current], .active) {
  color: #fff;
  background: var(--grad);
  border-color: transparent;
}

/* ═══════════════ 404 ═══════════════ */
.notfound { min-block-size: 100svh; display: flex; align-items: center; }
.notfound__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.notfound__code {
  font-size: clamp(6rem, 20vw, 13rem);
  font-weight: 800; line-height: 1;
  letter-spacing: -.04em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 40px rgba(124, 108, 255, .45));
  font-variant-numeric: tabular-nums;
}
.notfound__title { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin-block: .8rem; }
.notfound__text { color: var(--muted); max-inline-size: 30rem; line-height: 1.7; }
.notfound .search-form { inline-size: 100%; }
.notfound__actions { display: flex; gap: .8rem; margin-block-start: 1.8rem; flex-wrap: wrap; justify-content: center; }

/* ═══════════════ Single post ═══════════════ */
.post-hero { padding-block-end: clamp(1.5rem, 3vw, 2.25rem); }
.post-hero__cats { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.post-hero__title {
  font-size: clamp(2rem, 1.15rem + 3.2vw, 3.6rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.03em;
  margin-bottom: 1.6rem;
  text-wrap: balance;
}
.post-hero__meta {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  color: var(--muted); font-size: .9rem; font-weight: 600;
}
.post-hero__avatar { inline-size: 42px; block-size: 42px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-strong); }
.post-hero__author { color: var(--ink); font-weight: 700; }
.post-hero__audio { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent-2); }

/* The cover opens the article itself — same column as the summary and the
   prose, so the reading measure never breaks. */
.post-cover { margin-block-end: 2rem; }
.post-cover img {
  inline-size: 100%;
  block-size: auto;   /* the 16:9 frame applies only when the height attribute stands down */
  aspect-ratio: 16 / 9;
  max-block-size: min(70svh, 720px);   /* a short screen still shows the headline with it */
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.post-cover__caption {
  margin-block-start: .7rem;
  font-size: .82rem; color: var(--faint); text-align: center;
}

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: clamp(2rem, 4vw, 4.5rem);
  padding-block: clamp(2rem, 4vw, 3.25rem) clamp(3rem, 6vw, 5rem);
  align-items: start;
}
.post-aside { order: 2; position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); }
.post-body { order: 1; min-inline-size: 0; }

.toc-wrap {
  padding: 1.3rem 1.4rem;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--line);
  font-size: .86rem;
}
.toc-wrap__label {
  font-weight: 700; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: .8rem;
}
.toc-wrap :where(ul, ol) { list-style: none; display: flex; flex-direction: column; gap: .15rem; }
.toc-wrap :where(ul ul, ol ol) { padding-inline-start: .9rem; border-inline-start: 1px solid var(--line); margin-block: .15rem; }
.toc-wrap :where(a) {
  display: block; padding: .3rem .5rem;
  border-radius: 8px;
  color: var(--muted);
  transition: color .25s, background-color .25s;
}
.toc-wrap :where(a):hover { color: var(--ink); background: var(--glass); }

/* Ariana's summary box */
.ariana-summary {
  position: relative;
  margin-block-end: 2.2rem;
  padding: 1.5rem 1.6rem 1.6rem;
  border-radius: var(--radius);
  background:
    linear-gradient(color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--card) 94%, transparent)) padding-box,
    linear-gradient(120deg, rgba(124, 108, 255, .65), rgba(169, 156, 255, .5)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 50px -22px rgba(124, 108, 255, .55);
}
.ariana-summary__title {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: .8rem;
}
.ariana-summary__title::before {
  content: '';
  inline-size: 16px; block-size: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a99cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v2M12 19v2M5.6 5.6l1.5 1.5M16.9 16.9l1.5 1.5M3 12h2M19 12h2M5.6 18.4l1.5-1.5M16.9 7.1l1.5-1.5'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ariana-summary__text { color: var(--ink); font-size: .97rem; line-height: 1.8; }
.ariana-summary__list { display: flex; flex-direction: column; gap: .5rem; margin-block-start: .6rem; }
.ariana-summary__list li {
  position: relative;
  padding-inline-start: 1.4rem;
  font-size: .93rem; line-height: 1.7; color: var(--ink);
}
.ariana-summary__list li::before {
  content: '';
  position: absolute; inset-inline-start: 0; inset-block-start: .5em;
  inline-size: 7px; block-size: 7px; border-radius: 2px;
  background: var(--grad);
  rotate: 45deg;
}

/* Google Preferred Sources — Ariana renders the block, Google draws the
   button inside it. The theme dresses the card so the white button sits on
   a deliberate violet wash instead of floating on bare page background. */
.ariana-preferred-sources {
  margin-block: 2.2rem 0;
  padding: 1.4rem 1.5rem 1.5rem;
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(124, 108, 255, .16), var(--card) 70%);
  border: 1px solid rgba(124, 108, 255, .28);
}
.ariana-preferred-sources__title {
  font-size: .95rem; font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-block-end: .35rem;
}
.ariana-preferred-sources__text {
  font-size: .88rem; color: var(--muted); line-height: 1.65;
  margin-block-end: 1rem;
  max-inline-size: 34rem;
}
/* Google's script draws a white pill in here — keep the container shrink-
   wrapped and softly framed so no raw white band spans the card. */
.ariana-preferred-sources [google-add-preferred-source-btn] {
  display: inline-block;
  max-inline-size: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: transparent;
  line-height: 0;
}
:root[data-theme="light"] .ariana-preferred-sources {
  background: linear-gradient(150deg, #EFEBFE, var(--card) 70%);
  border-color: var(--line-strong);
}

/* Ariana's podcast player */
.podcast-slot { margin-block-end: 2.2rem; }
.ariana-podcast-player {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(124, 108, 255, .16), var(--card) 70%);
  border: 1px solid rgba(124, 108, 255, .28);
}
.ariana-podcast-player__label { font-weight: 800; font-size: .92rem; color: var(--ink); letter-spacing: -.01em; }
.ariana-podcast-player__duration { color: var(--muted); font-size: .84rem; font-variant-numeric: tabular-nums; }
.ariana-podcast-player :where(audio) { flex: 1 1 16rem; block-size: 40px; }

/* Article body */
.prose { font-size: 1.09rem; line-height: 1.85; color: #cfcaea; }
.prose :where(p, ul, ol, blockquote, figure, pre, table) { margin-block-end: 1.4rem; }
.prose :where(h2, h3, h4) {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin-block: 2.4rem 1rem;
  scroll-margin-block-start: calc(var(--header-h) + 1.5rem);
}
.prose :where(h2) { font-size: 1.65rem; }
.prose :where(h3) { font-size: 1.3rem; }
.prose :where(h4) { font-size: 1.1rem; }
.prose :where(a) {
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-color: rgba(169, 156, 255, .4);
  text-underline-offset: 5px;
  transition: text-decoration-color .3s;
}
.prose :where(a):hover { text-decoration-color: var(--accent-2); }
.prose :where(strong) { color: var(--ink); }
.prose :where(ul, ol) { padding-inline-start: 1.4rem; }
.prose :where(ul) { list-style: disc; }
.prose :where(ol) { list-style: decimal; }
.prose :where(li)::marker { color: var(--accent-2); }
.prose :where(blockquote) {
  padding: 1.2rem 1.5rem;
  border-radius: var(--radius);
  border-inline-start: 3px solid var(--accent);
  background: var(--glass);
  font-weight: 600;
  color: var(--ink);
}
/* Pictures inside an article keep their own proportions. The width Ariana
   writes (the picture's own) stands, capped by the column; the height
   follows — so nothing stretches and a small picture is never enlarged,
   only centred. A portrait or very tall picture (main.js marks it .is-tall
   from its width/height attributes, before the file arrives) stops at most
   of a screen, and its width follows its height. */
.prose :where(img) {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-inline: auto;
}
.prose img.is-tall { inline-size: auto; max-block-size: min(80svh, 56rem); }
.prose :where(figcaption) { text-align: center; font-size: .84rem; color: var(--faint); margin-block-start: .7rem; }
.prose :where(code) {
  font-family: var(--mono);
  font-size: .86em;
  direction: ltr; unicode-bidi: embed;
  background: var(--film-3);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: .12em .45em;
}
.prose :where(pre) {
  direction: ltr;
  padding: 1.3rem 1.4rem;
  border-radius: var(--radius);
  background: var(--code-bg);
  border: 1px solid var(--line);
  overflow-x: auto;
  line-height: 1.8;
}
.prose :where(pre code) { background: none; border: 0; padding: 0; font-size: .85rem; }
.prose :where(hr) {
  border: 0; block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  margin-block: 2.5rem;
}
.prose :where(table) { inline-size: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.prose :where(th, td) { padding: .7rem 1rem; border: 1px solid var(--line); text-align: start; }
.prose :where(th) { background: var(--film-2); color: var(--ink); font-weight: 700; }
.prose :where(iframe, video) { inline-size: 100%; border-radius: var(--radius); border: 0; }

.post-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-block: 2.4rem 0; }

.author-box {
  display: flex; gap: 1.3rem; align-items: flex-start;
  margin-block-start: 2.6rem;
  padding: 1.8rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  border: 1px solid var(--line);
}
.author-box__avatar { inline-size: 64px; block-size: 64px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgba(124, 108, 255, .45); }
.author-box__label {
  font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: .2rem;
}
.author-box__name { font-size: 1.15rem; font-weight: 800; letter-spacing: -.015em; }
.author-box__name a:hover { color: var(--accent-2); }
.author-box__job { font-size: .85rem; color: var(--faint); margin-block: .15rem .6rem; }
.author-box__bio { color: var(--muted); font-size: .92rem; line-height: 1.75; }
.author-box__social { display: flex; gap: .9rem; flex-wrap: wrap; margin-block-start: .8rem; }
.author-box__social-link { font-size: .84rem; font-weight: 700; color: var(--accent-2); }
.author-box__social-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.cta--post { padding-block-start: 0; }

/* ═══════════════ Footer ═══════════════ */
.site-footer {
  position: relative;
  border-block-start: 1px solid var(--line);
  background: var(--bg-2);
  padding-block: var(--sec) 2rem;
  overflow: clip;
}
.footer-aurora {
  position: absolute; inset-block-start: -60%; inset-inline: -10%;
  block-size: 120%;
  background: radial-gradient(45% 55% at 50% 0%, rgba(124, 108, 255, .1), transparent 70%);
  pointer-events: none;
}
.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.brand--footer .brand-mark { inline-size: 28px; block-size: 28px; }
.footer-tagline { color: var(--muted); font-size: .94rem; line-height: 1.7; max-inline-size: 24rem; margin-block: 1rem 1.2rem; }
.footer-email { color: var(--accent-2); font-weight: 700; font-size: .93rem; direction: ltr; display: inline-block; }
.footer-email:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-heading {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.footer-menu, .lang-list { display: flex; flex-direction: column; gap: .55rem; }
.footer-menu__link, .lang-list__link {
  color: var(--muted); font-size: .92rem;
  transition: color .3s, padding-inline-start .3s var(--ease);
}
.footer-menu__link:hover, .lang-list__link:hover { color: var(--ink); padding-inline-start: .35rem; }
.lang-list__link.is-current { color: var(--ink); }
.footer-bottom {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block-start: 1.8rem;
  border-block-start: 1px solid var(--line);
}
.footer-copy { color: var(--faint); font-size: .84rem; }
.to-top {
  display: grid; place-items: center;
  inline-size: 42px; block-size: 42px;
  border-radius: 12px;
  color: var(--muted);
  background: var(--glass);
  border: 1px solid var(--line);
  transition: color .3s, border-color .3s, transform .4s var(--ease-spring);
}
.to-top:hover { color: var(--ink); border-color: var(--line-strong); transform: translateY(-3px); }

/* ═══════════════ Reveal engine ═══════════════ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s);
}
.js [data-reveal="left"]  { transform: translateX(-28px); }
.js [data-reveal="right"] { transform: translateX(28px); }
.js [data-reveal="scale"] { transform: translateY(24px) scale(.92); }
.js [data-reveal="flip"]  { transform: perspective(900px) rotateX(10deg) translateY(30px); }
.js [data-reveal].in { opacity: 1; transform: none; }
[data-plx] { will-change: transform; }

/* ═══════════════ Motion garnish ═══════════════ */
/* Grid veil slowly drifts */
.grid-veil { animation: veilPan 70s linear infinite; }
@keyframes veilPan { to { background-position: 56px 56px, 56px 56px; } }

/* Kicker line: a light forever sweeping through */
.section-kicker::before {
  background: linear-gradient(90deg, var(--tone), var(--accent-2), var(--tone));
  background-size: 200% 100%;
  animation: kickerSweep 2.6s linear infinite;
}
@keyframes kickerSweep { to { background-position: -200% 0; } }

/* Primary buttons: shine sweep on hover */

/* Post cards: diagonal shine on hover */
.post-card::after {
  content: '';
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, var(--film-3) 50%, transparent 60%);
  background-size: 280% 100%;
  background-position: 120% 0;
}
.post-card:hover::after { animation: cardShine .9s var(--ease) forwards; }
@keyframes cardShine { to { background-position: -120% 0; } }

/* Bento icons wake up on hover */
.bento-card__icon { transition: transform .5s var(--ease-spring), box-shadow .5s; }
.bento-card:hover .bento-card__icon {
  transform: translateY(-4px) rotate(-6deg) scale(1.08);
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--tone) 70%, transparent);
}
.contact-card__icon { transition: transform .5s var(--ease-spring), box-shadow .5s; }
.contact-card:hover .contact-card__icon {
  transform: translateY(-4px) rotate(6deg) scale(1.08);
  box-shadow: 0 10px 26px -10px rgba(124, 108, 255, .7);
}

/* Scene mocks breathe while their act is live */
.js .act.is-live .mock { animation: mockFloat 7s ease-in-out 1.2s infinite alternate; }
@keyframes mockFloat { from { translate: 0 0; } to { translate: 0 -8px; } }

/* Ghost numbers zoom-settle when a scene arrives */
.js .act .act__ghost { opacity: 0; transform: scale(1.3); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .act.is-live .act__ghost { opacity: 1; transform: none; transition-delay: .05s; }

/* The dashboard glows like something alive */
.dash::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 60px -30px rgba(124, 108, 255, .55);
  opacity: .4;
  animation: dashBreathe 5s ease-in-out infinite alternate;
}
@keyframes dashBreathe { to { opacity: 1; } }

/* Stats numbers get a soft halo */
/* The glow follows the tone. Hard-coded violet under a cyan figure read
   as a printing misregistration rather than a glow. */
.stats__num { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--tone) 35%, transparent)); }

/* Manifesto words rise as they light up */
.js .manifesto__text .w {
  display: inline-block;
  transform: translateY(calc((1 - clamp(0, calc(var(--p, 0) * (var(--total, 30) + 6) - var(--i, 0)), 1)) * .35em));
  transition: opacity .12s linear, transform .16s var(--ease);
}

/* Migration progress strip (Act I) */
.migrate-bar {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--raised);
  padding: .85rem 1.1rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.migrate-bar__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.migrate-bar__label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.migrate-bar__score { font-size: .78rem; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }
.migrate-bar__score s { color: var(--faint); font-weight: 600; margin-inline-end: .15rem; }
.migrate-bar__track {
  display: block; block-size: 8px; border-radius: 999px;
  background: var(--film-3);
  overflow: hidden;
}
.migrate-bar__fill {
  display: block; block-size: 100%; inline-size: 82%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  position: relative;
  transform-origin: 0 50%;
  animation: migrateGrow 2.4s var(--ease) backwards;
}
.js .act .migrate-bar__fill { animation-play-state: paused; }
.js .act.is-live .migrate-bar__fill { animation-play-state: running; animation-delay: .5s; }
.migrate-bar__fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  background-size: 60% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes migrateGrow { from { transform: scaleX(0); } }

/* Footer aurora breathes */
.footer-aurora { animation: dashBreathe 7s ease-in-out infinite alternate; }

/* CTA title underline sparkle */
.cta__title em, .cta__title .grad-text { font-style: normal; }


/* ═══════════════════════════════════════════════════════════════
   Scene choreography — every act's visual performs when it becomes
   live, and rewinds when it leaves, so the story never plays to an
   empty stage. Driven purely by the .is-live class the scroll engine
   toggles; numbers that must count are handled in main.js.
   ═══════════════════════════════════════════════════════════════ */

/* Shared: a piece that types/rises into place. Held invisible until the
   scene is live so a scene never flashes its finished state first. */
.js .act [data-seq] { opacity: 0; transform: translateY(10px); }
.js .act.is-live [data-seq] {
  animation: seqIn .5s var(--ease) forwards;
  animation-delay: calc(var(--seq, 0) * .16s + .25s);
}
@keyframes seqIn { to { opacity: 1; transform: none; } }

/* ── Act I: a chat that actually converses ───────────────────── */
.js .act .chat-bubble--user { opacity: 0; transform: translateY(8px) scale(.96); transform-origin: 100% 100%; }
.js .act.is-live .chat-bubble--user { animation: bubbleIn .45s var(--ease-spring) .2s forwards; }
@keyframes bubbleIn { to { opacity: 1; transform: none; } }

.chat-typing {
  display: inline-flex; align-items: center; gap: 5px;
  padding: .7rem 1rem;
  border-radius: 14px;
  border-end-start-radius: 4px;
  background: var(--raised);
  border: 1px solid var(--line);
}
.chat-typing i {
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--accent-2);
  animation: typingDot 1.1s ease-in-out infinite;
}
.chat-typing i:nth-child(2) { animation-delay: .16s; }
.chat-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typingDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}
/* The indicator only exists between the question and the answer. */
.js .act .chat-row--typing { opacity: 0; }
.js .act.is-live .chat-row--typing { animation: typingWindow 1.5s linear .6s forwards; }
@keyframes typingWindow {
  0% { opacity: 0; block-size: 0; }
  8% { opacity: 1; block-size: 42px; }
  88% { opacity: 1; block-size: 42px; }
  100% { opacity: 0; block-size: 0; }
}
.js .act .chat-plan { opacity: 0; transform: translateY(12px); }
.js .act.is-live .chat-plan { animation: seqIn .5s var(--ease) 1.95s forwards; }
.js .act .chat-plan__steps li { opacity: 0; transform: translateX(-8px); }
.js .act.is-live .chat-plan__steps li {
  animation: stepIn .4s var(--ease) forwards;
  animation-delay: calc(2.15s + var(--seq, 0) * .16s);
}
@keyframes stepIn { to { opacity: 1; transform: none; } }
.js .act .chat-plan__actions { opacity: 0; }
.js .act.is-live .chat-plan__actions { animation: seqIn .45s var(--ease) 2.75s forwards; }

/* ── Act II: the import fills, live ──────────────────────────── */
.js .act .migrate-bar { opacity: 0; }
.js .act.is-live .migrate-bar { animation: seqIn .5s var(--ease) 3.05s forwards; }
.migrate-bar__fill { inline-size: 82%; transform-origin: 0 50%; }
[dir='rtl'] .migrate-bar__fill { transform-origin: 100% 50%; }
.js .act .migrate-bar__fill { animation: none; transform: scaleX(0); }
.js .act.is-live .migrate-bar__fill { animation: migrateGrow 2.3s var(--ease) 3.35s forwards; }
@keyframes migrateGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Act III: the Auto Pilot log types itself ────────────────── */
.js .act .pilot-log li { opacity: 0; transform: translateY(6px); }
.js .act.is-live .pilot-log li {
  animation: seqIn .4s var(--ease) forwards;
  animation-delay: calc(1.1s + var(--seq, 0) * .75s);
}
/* The entry's text is revealed character-by-character behind a caret. */
.pilot-log__line {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  border-inline-end: 1.5px solid transparent;
}
.js .act.is-live .pilot-log__line {
  animation: typeLine .85s steps(38, end) forwards,
             caretBlink .6s step-end 6;
  animation-delay: calc(1.15s + var(--seq, 0) * .75s);
  inline-size: 0;
}
@keyframes typeLine { to { inline-size: 100%; } }
@keyframes caretBlink { 50% { border-inline-end-color: var(--accent-2); } }
.js .act .pilot-toggle__track::after { transform: translateX(-16px); opacity: .4; }
.js .act.is-live .pilot-toggle__track::after { animation: toggleOn .45s var(--ease-spring) .55s forwards; }
@keyframes toggleOn { to { transform: none; opacity: 1; } }
.js[dir='rtl'] .act .pilot-toggle__track::after { transform: translateX(16px); }

/* Episode chapters — the podcast scene needed the same weight as the others */
.chapters { display: flex; flex-direction: column; border-block-start: 1px dashed var(--line); padding-block-start: .8rem; }
.chapters li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: .42rem;
  font-size: .84rem; color: var(--muted);
}
.chapters li + li { border-block-start: 1px dashed var(--line-soft); }
.chapters b { font-weight: 600; color: var(--ink); }
.chapters span { font-variant-numeric: tabular-nums; font-size: .8rem; flex: none; }
.js .act .chapters li { opacity: 0; }
.js .act.is-live .chapters li {
  animation: seqIn .4s var(--ease) forwards;
  animation-delay: calc(.9s + var(--seq, 0) * .22s);
}

/* Monospace has no Persian to speak of — the log switches to the UI face and
   keeps only its timestamps aligned. */
[dir="rtl"] .pilot-log li { font-family: var(--font); font-size: .8rem; }
[dir="rtl"] .pilot-log time { font-family: var(--mono); font-size: .74rem; }
[dir="rtl"] .mock__filename { font-family: var(--mono); }

/* ── Act IV: the episode plays ───────────────────────────────── */
.js .act .mock-player__btn { transform: scale(.85); opacity: 0; }
.js .act.is-live .mock-player__btn { animation: bubbleIn .5s var(--ease-spring) .45s forwards; }
.js .act .wave--lg i { animation-play-state: paused; }
.js .act.is-live .wave--lg i { animation-play-state: running; }
.js .act .hosts__avatar { opacity: 0; transform: scale(.7); }
.js .act.is-live .hosts__avatar {
  animation: bubbleIn .5s var(--ease-spring) forwards;
  animation-delay: calc(.3s + var(--seq, 0) * .12s);
}

/* ── Act V: the contract validates line by line ──────────────── */
.js .act .mock-code .ln { opacity: 0; }
.js .act.is-live .mock-code .ln {
  animation: seqIn .32s var(--ease) forwards;
  animation-delay: calc(.5s + var(--seq, 0) * .3s);
}
.js .act .mock-verdict { opacity: 0; transform: translateY(8px); }
.js .act.is-live .mock-verdict { animation: verdictIn .55s var(--ease-spring) 4.6s forwards; }
@keyframes verdictIn {
  0% { opacity: 0; transform: translateY(8px); }
  60% { opacity: 1; transform: translateY(0) scale(1.02); }
  100% { opacity: 1; transform: none; }
}

/* ── Acts VI & VII: gauges sweep up from zero ────────────────── */
.seo-scores__arrow { opacity: 0; }
.js .act.is-live .seo-scores__arrow { animation: arrowIn .6s var(--ease) 1.5s forwards; }
@keyframes arrowIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}
.js .act .speed-rows li, .js .act .seo-diff li, .js .act .mock-seo__rows li { opacity: 0; }
.js .act.is-live .speed-rows li,
.js .act.is-live .seo-diff li,
.js .act.is-live .mock-seo__rows li {
  animation: seqIn .4s var(--ease) forwards;
  animation-delay: calc(1.1s + var(--seq, 0) * .18s);
}
/* The rewritten value writes itself in beside its arrow. The reveal is a
   clip, not a width: the text keeps its finished size from the first frame,
   so the frame equalize() measures at rest is the frame the live scene
   fills. A width sweep added a line to every row once the scene played and
   pushed the checks out of the card (34px at 1512×764). */
.seo-diff__new { display: flex; align-items: baseline; gap: .35em; }
.seo-diff__new::before { flex: none; }
.seo-diff__new span { display: block; min-inline-size: 0; }
.js .act .seo-diff__new span { clip-path: inset(0 100% 0 0); }
.js[dir="rtl"] .act .seo-diff__new span { clip-path: inset(0 0 0 100%); }
.js .act.is-live .seo-diff__new span {
  animation: typeClip 1s steps(52, end) forwards;
  animation-delay: calc(1.6s + var(--seq, 0) * .9s);
}
@keyframes typeClip { to { clip-path: inset(0 0 0 0); } }

/* Reduced motion: every scene shows its finished state, instantly. */
@media (prefers-reduced-motion: reduce) {
  .js .act [data-seq],
  .js .act .chat-bubble--user, .js .act .chat-plan, .js .act .chat-plan__steps li,
  .js .act .chat-plan__actions, .js .act .migrate-bar, .js .act .pilot-log li,
  .js .act .mock-player__btn, .js .act .hosts__avatar, .js .act .mock-code .ln,
  .js .act .mock-verdict, .js .act .speed-rows li, .js .act .seo-diff li,
  .js .act .mock-seo__rows li, .js .act .seo-scores__arrow {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .js .act .migrate-bar__fill { transform: none !important; animation: none !important; }
  .js .act .pilot-log__line, .js .act .seo-diff__new span { inline-size: 100% !important; animation: none !important; }
  .js .act .seo-diff__new span { clip-path: none !important; }
  .chat-row--typing { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   Light mode corrections — the handful of places where a dark-first
   design cannot simply swap tokens: decoration that only reads on a
   dark ground, and inverted buttons that would vanish on paper.
   ═══════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .stars { display: none; }

:root[data-theme="light"] .aurora { filter: blur(80px); opacity: .75; }

/* On paper the hero and inner heads want light, not a dark well. */
:root[data-theme="light"] .hero__stage {
  background: radial-gradient(120% 90% at 50% 0%, #FFFFFF, var(--bg) 62%);
}
:root[data-theme="light"] .page-hero,
:root[data-theme="light"] .archive-hero,
:root[data-theme="light"] .post-hero,
:root[data-theme="light"] .notfound {
  background: radial-gradient(110% 80% at 50% 0%, #FFFFFF, var(--bg) 70%);
}
:root[data-theme="light"] .manifesto__stage {
  background: radial-gradient(60% 50% at 50% 55%, var(--wash), transparent 75%), var(--bg);
}

/* An inverted button is white on dark; on paper it has to become the
   accent, or it disappears into the card it sits on. */
:root[data-theme="light"] .btn--light {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 12px 32px -14px rgba(95, 73, 232, .55);
}
:root[data-theme="light"] .btn--light:hover { box-shadow: 0 18px 44px -14px rgba(95, 73, 232, .65); }

/* Cards: on paper, depth comes from a hairline and a soft shadow rather
   than from a lighter fill. */
:root[data-theme="light"] .post-card,
:root[data-theme="light"] .bento-card,
:root[data-theme="light"] .values__item,
:root[data-theme="light"] .contact-card,
:root[data-theme="light"] .feature-index__item,
:root[data-theme="light"] .mock,
:root[data-theme="light"] .dash,
:root[data-theme="light"] .author-box {
  box-shadow: 0 1px 2px rgba(43, 29, 94, .05), 0 8px 24px -18px rgba(43, 29, 94, .35);
}
:root[data-theme="light"] .dash { box-shadow: var(--shadow), var(--glow); }

/* The CTA panel is a violet wash on paper, and its text has to be ink. */
:root[data-theme="light"] .cta__card {
  background: linear-gradient(160deg, #EDE9FE, #F7F5FD 65%);
  border-color: var(--line-strong);
}
:root[data-theme="light"] .mv__card--mission { background: linear-gradient(160deg, #EAE5FD, var(--card) 72%); }
:root[data-theme="light"] .mv__card--vision  { background: linear-gradient(160deg, #E6E9FE, var(--card) 72%); }

/* Type on a light ground wants a touch less weight in the body copy. */
:root[data-theme="light"] .prose { color: #35304f; }

/* Chips over imagery keep a dark scrim so white text stays legible. */
:root[data-theme="light"] .post-card__badge,
:root[data-theme="light"] .post-card__pin { color: #fff; }
:root[data-theme="light"] .post-card__glow {
  background: linear-gradient(to top, color-mix(in srgb, var(--card) 55%, transparent), transparent 45%);
}

/* The ghost act numbers are an outline; on paper they need ink, not paper. */
:root[data-theme="light"] .act__ghost { -webkit-text-stroke-color: rgba(76, 68, 112, .22); }

/* The floating hero chips sit on a light stage now. */
:root[data-theme="light"] .hero-chip {
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--ink);
}

/* Podcast player and summary box: paper versions of the same idea. */
:root[data-theme="light"] .ariana-summary {
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(120deg, rgba(95, 73, 232, .55), rgba(129, 140, 248, .45)) border-box;
  box-shadow: 0 10px 40px -24px rgba(95, 73, 232, .5);
}
:root[data-theme="light"] .ariana-podcast-player {
  background: linear-gradient(150deg, #EFEBFE, var(--card) 70%);
}

/* Toggle-specific: the icon that is not active stays out of the way. */
:root[data-theme="light"] .theme-toggle__moon { display: none; }
:root:not([data-theme="light"]) .theme-toggle__sun { display: none; }

/* ── The theme switch ── */
.theme-toggle { position: relative; overflow: hidden; }
.theme-toggle svg { transition: transform .5s var(--ease-spring); }
.theme-toggle:hover svg { transform: rotate(-18deg) scale(1.08); }


/* ── Language switch ──
   Ariana hides this on a single-language install by emitting one item, so it
   needs no {{#if}} guard. Two states only: the current language is a solid
   chip, the other is quiet until hovered. */
.lang-switch {
  display: inline-flex; align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--line);
}
.lang-switch__item {
  display: inline-flex; align-items: center;
  padding: .32rem .7rem;
  border-radius: 999px;
  font-size: .78rem; font-weight: 700;
  line-height: 1.4;
  color: var(--muted);
  white-space: nowrap;
  transition: color .3s, background-color .3s;
}
.lang-switch__item:hover { color: var(--ink); }
.lang-switch__item.is-current {
  color: var(--on-accent);
  background: var(--grad);
  box-shadow: 0 6px 16px -8px rgba(124, 108, 255, .8);
}
:root[data-theme="light"] .lang-switch__item.is-current { box-shadow: 0 6px 16px -8px rgba(95, 73, 232, .55); }
.lang-switch__code { display: none; text-transform: uppercase; letter-spacing: .06em; }
/* A Persian label must never be letter-spaced or upper-cased: Arabic script
   joins, and both would break the word apart. */
.lang-switch__item[lang="fa"] .lang-switch__code,
.lang-switch__item[lang="ar"] .lang-switch__code,
.lang-switch__item[lang="fa"] .lang-switch__full { letter-spacing: 0; text-transform: none; }

/* ═══════════════════════════════════════════════════════════════
   Right-to-left corrections.
   One stylesheet, logical properties throughout — these are only the
   rules that genuinely cannot be expressed logically.
   ═══════════════════════════════════════════════════════════════ */

/* Tracking and capitals are Latin devices. Applied to Arabic script they
   sever the joins between letters, so every spaced-out label resets. */
[dir="rtl"] .brand-name,
[dir="rtl"] .section-kicker,
[dir="rtl"] .manifesto__kicker,
[dir="rtl"] .act__kicker,
[dir="rtl"] .mv__label,
[dir="rtl"] .footer-heading,
[dir="rtl"] .author-box__label,
[dir="rtl"] .toc-wrap__label,
[dir="rtl"] .ariana-summary__title,
[dir="rtl"] .post-card__badge,
[dir="rtl"] .hero__scrollcue,
[dir="rtl"] .chat-plan__label,
[dir="rtl"] .feature-index__badge,
[dir="rtl"] .seo-scores__label,
[dir="rtl"] .ticker__group span,
[dir="rtl"] .pilot-toggle,
[dir="rtl"] .migrate-bar__label,
[dir="rtl"] .seo-diff__field {
  letter-spacing: 0;
  text-transform: none;
}

/* Persian sets a little looser and a shade lighter than Latin at the same
   nominal size; the display sizes also need negative tracking removed. */
/* Arabic joins its letters: tracking or capitals on a label would break
   every word apart. The v5+ labels, added after the list above was made. */
[dir="rtl"] .archive-hero__desc .ariana-author-profile__role,
[dir="rtl"] .art__kicker,
[dir="rtl"] .art__sum-label,
[dir="rtl"] .bw-cta__label,
[dir="rtl"] .cal__dow li,
[dir="rtl"] .cal__title,
[dir="rtl"] .clock__day,
[dir="rtl"] .demo-step__label,
[dir="rtl"] .demo__status,
[dir="rtl"] .feat-card__tag,
[dir="rtl"] .feat-more .feat-more__label,
[dir="rtl"] .demo__caption,
[dir="rtl"] .import-src__ok,
[dir="rtl"] .lang-switch__code,
[dir="rtl"] .nav-flag,
[dir="rtl"] .page-skill .bw-brand,
[dir="rtl"] .page-skill .bw-fix__sev,
[dir="rtl"] .page-skill .bw-how__list li::before,
[dir="rtl"] .page-skill .bw-stat__label,
[dir="rtl"] .page-skill .sk-table thead th,
[dir="rtl"] .post-adjacent__label,
[dir="rtl"] .post-body .ariana-author-box__label,
[dir="rtl"] .prose .ariana-author-box__label,
[dir="rtl"] .prose .ariana-table thead th,
[dir="rtl"] .publishers__label,
[dir="rtl"] .screen__head,
[dir="rtl"] .seo-diff__field,
[dir="rtl"] .worth-card__pill,
[dir="rtl"] .worth-cost__label,
[dir="rtl"] .worth-dial__label {
  letter-spacing: 0; text-transform: none;
}
[dir="rtl"] .hero__title,
[dir="rtl"] .section-title,
[dir="rtl"] .act__title,
[dir="rtl"] .cta__title,
[dir="rtl"] .page-hero__title,
[dir="rtl"] .archive-hero__title,
[dir="rtl"] .post-hero__title,
[dir="rtl"] .manifesto__text,
[dir="rtl"] .notfound__title,
[dir="rtl"] .mv__title,
[dir="rtl"] .story__heading,
[dir="rtl"] .bento-card__title,
[dir="rtl"] .post-card__title,
[dir="rtl"] .values__title,
[dir="rtl"] .contact-card__title,
[dir="rtl"] .author-box__name,
[dir="rtl"] .feature-index__label {
  letter-spacing: 0;
  line-height: 1.45;
}
/* Persian sets wider than Latin at the same nominal size: a headline tuned
   for "You imagine it." overflows in Persian and breaks across
   two lines. The display sizes step down so each sentence still lands on one. */
[dir="rtl"] .hero__title {
  font-size: clamp(2rem, 1rem + 3.6vw, 3.7rem);
  line-height: 1.42;
}
[dir="rtl"] .section-title { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.6rem); }
[dir="rtl"] .act__title { font-size: clamp(1.55rem, 1rem + 2vw, 2.4rem); }
[dir="rtl"] .cta__title { font-size: clamp(1.7rem, 1.1rem + 2.3vw, 2.7rem); }
[dir="rtl"] .page-hero__title { font-size: clamp(1.8rem, 1rem + 3vw, 3.1rem); }
[dir="rtl"] .archive-hero__title { font-size: clamp(1.8rem, 1rem + 2.8vw, 3rem); }
[dir="rtl"] .post-hero__title { font-size: clamp(1.8rem, 1rem + 2.6vw, 2.9rem); }
[dir="rtl"] .manifesto__text { font-size: clamp(1.4rem, .9rem + 2.4vw, 2.6rem); }
[dir="rtl"] .notfound__title { font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); }
[dir="rtl"] .manifesto__text { line-height: 1.6; }
[dir="rtl"] .prose { line-height: 2; }
[dir="rtl"] .prose :where(h2, h3, h4) { line-height: 1.5; letter-spacing: 0; }

/* Arrows are directional glyphs: mirror the ones that mean "becomes". */
[dir="rtl"] .seo-diff__new::before { content: '← '; }
[dir="rtl"] .seo-scores__arrow { transform: scaleX(-1); }
/* .js and dir both sit on <html>: "[dir] .js" would never match */
.js[dir="rtl"] .act.is-live .seo-scores__arrow { animation-name: arrowInRtl; }
@keyframes arrowInRtl {
  from { opacity: 0; transform: scaleX(-1) translateX(-10px); }
  to { opacity: 1; transform: scaleX(-1); }
}

/* The typing caret sweeps from the reading edge in either direction. */
[dir="rtl"] .pilot-log__line,
[dir="rtl"] .seo-diff__new span { direction: rtl; }
/* The rewrite list mirrors whole, as the English reads: old value, the
   arrow, the new value — all from the reading edge. Its markup says
   dir="ltr", which left an RTL page with the old value and the arrow on the
   left and the new value on the right, three edges for one row. */
[dir="rtl"] .seo-diff { direction: rtl; }

/* Latin-only fragments inside Persian copy keep their own direction. */
[dir="rtl"] .dash__url,
[dir="rtl"] .mock__filename,
[dir="rtl"] .mock-code,
[dir="rtl"] .footer-email { direction: ltr; unicode-bidi: isolate; }

/* Numerals sit better with a hair more room in Persian UI chrome. */
[dir="rtl"] .stats__num,
[dir="rtl"] .values__num,
[dir="rtl"] .act__ghost,
[dir="rtl"] .notfound__code { letter-spacing: 0; }


/* ═══════════════════════════════════════════════════════════════
   Homepage narrative — the claim, then what Ariana does (with the Auto
   Pilot demonstration as its Act II), then the sites already running
   on it. The order is the argument: claim → proof → who else.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: one claim, nothing competing with it ────────────────
   No dashboard collage, no feature cards. The headline owns the
   viewport and the demonstration's top edge shows beneath it, so
   the page pulls the reader down instead of asking. */
.js .hero--claim { block-size: auto; }
.js .hero--claim .hero__stage {
  position: relative;
  block-size: auto;
  opacity: 1;
}
.hero--claim .hero__stage {
  display: grid;
  align-content: center;
  min-block-size: 86vh;
  min-block-size: 86svh;
  padding-block: calc(var(--header-h) + clamp(3rem, 7vh, 6rem)) clamp(3rem, 8vh, 6rem);
}
.hero--claim .hero__inner {
  display: block;
  max-inline-size: 56rem;
  margin-inline: auto;
  text-align: center;
}
.hero--claim .hero__copy { display: flex; flex-direction: column; align-items: center; }
.hero--claim .hero__title {
  font-size: clamp(2.6rem, 1.2rem + 5.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  margin-bottom: 1.4rem;
}
.hero--claim .hero__sub {
  max-inline-size: 44rem;
  font-size: clamp(1.05rem, .95rem + .55vw, 1.3rem);
  line-height: 1.62;
  margin-bottom: 2.2rem;
}
.hero__meta {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem 1rem; flex-wrap: wrap;
  margin-block-start: 1.9rem;
  font-size: .84rem; font-weight: 600;
  color: var(--faint);
}
.hero__meta span { display: inline-flex; align-items: center; gap: .45rem; }
/* Three statements of fact, each with its own green tick — they were
   separated by grey dots, which read as a breadcrumb rather than as
   three things that are true. */
.hero__meta span::before {
  content: '';
  flex: none;
  inline-size: .95rem; block-size: .95rem;
  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='3' 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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero__meta span + span { margin-inline-start: .35rem; }
.hero__aside {
  margin-block-start: 1.5rem;
  font-size: .92rem;
  color: var(--muted);
}
.hero__aside a {
  color: var(--accent-2); font-weight: 700;
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color .3s;
}
.hero__aside a:hover { text-decoration-color: currentColor; }
.hero__badge--link:hover { border-color: var(--accent); }

/* ── The demonstration ──────────────────────────────────────────
   Seven states of one real Auto Pilot, on Ariana's own surfaces, inside
   Act II's window. The moments share one grid cell, so the window is as
   tall as its tallest moment at every width and never jumps between
   them; main.js plays them in turn. */
.demo__viewport { position: relative; display: grid; min-block-size: 0; }

/* Each step is a full state of the same panel */
.demo-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* the acts' two-column grid does not apply here */
  align-content: center;
  /* On short viewports a tall screen must overflow DOWN into the frame's
     clip, never climb up over the window chrome. Browsers without
     overflow-safe alignment keep plain centering from the line above. */
  align-content: safe center;
  justify-items: center;
  gap: 0;
}
.demo-step > div { inline-size: min(100%, 44rem); margin-inline: auto; }
.js .demo-step {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(16px) scale(.988);
  filter: blur(7px);
  transition: opacity .4s var(--ease), transform .45s var(--ease), filter .4s var(--ease);
}
.js .demo-step.is-live {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none; filter: none;
}
.no-js .demo-step { margin-block: 2rem; }

.demo-step__label {
  display: block;
  margin-block-end: .9rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2);
  text-align: center;
}

/* The screen — a state of Ariana's own panel, straight inside the one
   browser window. No nested window chrome: the frame above is the only
   chrome this demonstration ever draws. */
.screen {
  inline-size: 100%;
  display: flex; flex-direction: column; gap: 1rem;
  min-block-size: 19rem;
  justify-content: center;
  justify-content: safe center;
}
.screen--center { align-items: center; }
.screen__head {
  font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}
.screen__foot { display: flex; justify-content: flex-end; }
.job__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* Step 1 — the instruction being typed */
.instruct {
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius);
  background: var(--raised);
  border: 1px solid var(--line-strong);
  font-size: 1rem; line-height: 1.65;
  color: var(--ink);
}
.instruct__caret {
  display: inline-block;
  inline-size: 2px; block-size: 1.1em;
  vertical-align: -.18em;
  margin-inline-start: 2px;
  background: var(--accent-2);
  animation: caretPulse .9s step-end infinite;
}
@keyframes caretPulse { 50% { opacity: 0; } }

/* Step 2 & 7 — the job as Ariana stores it */
.job__name { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.job__when { font-size: .84rem; color: var(--muted); margin-block-start: .2rem; }
.job__chain { display: flex; flex-direction: column; gap: .5rem; margin-block-start: .4rem; }
.job__chain li {
  display: flex; align-items: center; gap: .7rem;
  padding: .62rem .85rem;
  border-radius: 12px;
  background: var(--raised);
  border: 1px solid var(--line);
  font-size: .9rem; font-weight: 600;
}
.job__chain li::before {
  content: '';
  inline-size: 1.35rem; block-size: 1.35rem; flex: none;
  border-radius: 7px;
  background: var(--wash);
  border: 1px solid var(--line-strong);
}
.job__chain li[data-state="run"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--raised));
}
.job__chain li[data-state="run"]::before {
  background: var(--grad); border-color: transparent;
  animation: stepPulse 1.1s ease-in-out infinite;
}
@keyframes stepPulse { 50% { opacity: .45; } }
.job__chain li[data-state="done"]::before {
  background: color-mix(in srgb, var(--ok) 20%, transparent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ADE80' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9.5'/%3E%3C/svg%3E") center / 66% no-repeat;
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
}
.job__chain li .job__state { margin-inline-start: auto; font-size: .76rem; font-weight: 700; color: var(--faint); }
.job__chain li[data-state="run"] .job__state { color: var(--accent-2); }
.job__chain li[data-state="done"] .job__state { color: var(--ok); }
.js .demo-step.is-live .job__chain li {
  animation: seqIn .42s var(--ease) backwards;
  animation-delay: calc(.15s + var(--seq, 0) * .12s);
}

/* Step 3 — nobody is here */
.away {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center;
}
.away__icon {
  display: grid; place-items: center;
  inline-size: 3.6rem; block-size: 3.6rem;
  border-radius: 50%;
  color: var(--muted);
  background: var(--raised);
  border: 1px solid var(--line);
}
.away__text { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.away__note { font-size: .9rem; color: var(--muted); }

/* Step 4 — the clock moves */
.clock { text-align: center; }
.clock__day {
  font-size: .76rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-2);
}
.clock__time {
  font-size: clamp(2.6rem, 2rem + 3vw, 4rem);
  font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.15;
}
.clock__note { font-size: .9rem; color: var(--muted); margin-block-start: .3rem; }

/* Step 6 — the published article, exactly as the reader sees it.
   The browser chrome above swaps to the public URL for this scene, so
   there is no inner address bar and no window inside a window. */
.result__flag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .55rem; border-radius: 999px;
  background: var(--wash); color: var(--accent-2); font-weight: 700; font-size: .72rem;
}
.screen--article { max-inline-size: 40rem; margin-inline: auto; gap: .55rem; justify-content: center; }
.art__kicker {
  font-size: .7rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2);
}
.art__title { font-size: clamp(1.2rem, 1rem + 1.1vw, 1.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.art__meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .78rem; color: var(--faint); }
.art__cover {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 720 / 225;
}
.art__cover .cover-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.art__sum {
  padding: .85rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--card) 94%, transparent)) padding-box,
    linear-gradient(120deg, rgba(124, 108, 255, .6), rgba(169, 156, 255, .45)) border-box;
}
.art__sum-label {
  display: block;
  font-size: .6rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2);
  margin-block-end: .3rem;
}
.art__sum p { font-size: .84rem; color: var(--ink); line-height: 1.65; }

/* The window's own rail: a pause button and one stop per moment. The
   current stop fills over its moment's own length (--hold, written by
   main.js), so the rail is the story's clock as well as its index. */
.demo__rail {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: clamp(.25rem, 1svh - .1rem, .5rem) 1rem clamp(.3rem, 1svh - .05rem, .55rem);
  border-block-start: 1px solid var(--line);
  background: var(--film-1);
}
.demo__ticks { display: flex; align-items: center; gap: .15rem; }
.demo__tick {
  position: relative;
  inline-size: 1.9rem; inline-size: clamp(1.5rem, 5.5cqi, 1.9rem);
  block-size: 1.75rem;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  transition: inline-size .4s var(--ease);
}
.demo__tick::before,
.demo__tick::after {
  content: '';
  position: absolute; inset-inline: .15rem; inset-block-start: calc(50% - 1.5px);
  block-size: 3px; border-radius: 999px;
}
.demo__tick::before { background: var(--film-3); transition: background-color .3s; }
.demo__tick::after { background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; }
[dir='rtl'] .demo__tick::after { transform-origin: 100% 50%; }
.demo__tick:hover::before { background: var(--film-4); }
.demo__tick.is-done::after { transform: none; }
.demo__tick.is-on { inline-size: 2.9rem; inline-size: calc(clamp(1.5rem, 5.5cqi, 1.9rem) + 1rem); }
.demo__tick.is-on::after { animation: tickFill var(--hold, 5s) linear forwards; }
.demo.is-paused .demo__tick.is-on::after { animation-play-state: paused; }
@keyframes tickFill { to { transform: none; } }
.demo__pause {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 1.75rem; block-size: 1.75rem;
  padding: 0;
  border-radius: 50%;
  color: var(--muted);
  background: var(--film-2);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: color .3s, border-color .3s;
}
.demo__pause:hover { color: var(--ink); border-color: var(--line-strong); }
.demo__tick:focus-visible,
.demo__pause:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 8px; }
.demo__play-ico,
.demo.is-held .demo__pause-ico { display: none; }
.demo.is-held .demo__play-ico { display: block; }
.no-js .demo__rail { display: none; }

/* ── Proof — nine real sites in a travelling gallery ──────────────
   Two counter-scrolling rows of live-site cards. Hovering a card
   pauses its row and pans the full home-page capture from top to
   bottom, at a speed proportional to how tall the real page is. */
.proof {
  padding-block: var(--sec);
  background: var(--bg);
  overflow: clip;
}
.proof__head { max-inline-size: 46rem; margin-block-end: clamp(1.8rem, 4vw, 2.6rem); }
.proof__sub { color: var(--muted); line-height: 1.7; margin-block-start: .9rem; }
.proof__marquee { display: flex; flex-direction: column; gap: 1.2rem; }
/* The edges fade with two gradient overlays, NOT with mask-image: a mask
   over a moving track forces the whole row to re-rasterise every frame
   (visible as stutter and a shimmering hairline around each card in
   Firefox). The section's ground is solid, so overlays look identical. */
.proof__row {
  position: relative;
  overflow: clip;
}
.proof__row::before,
.proof__row::after {
  content: '';
  position: absolute; inset-block: 0;
  inline-size: clamp(2rem, 5%, 6rem);
  z-index: 2;
  pointer-events: none;
}
.proof__row::before {
  inset-inline-start: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}
.proof__row::after {
  inset-inline-end: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}
[dir='rtl'] .proof__row::before { background: linear-gradient(to left, var(--bg), transparent); }
[dir='rtl'] .proof__row::after { background: linear-gradient(to right, var(--bg), transparent); }

.proof__track {
  display: flex;
  inline-size: max-content;
  animation: proofScroll 60s linear infinite;
  /* One promoted layer for the whole row — the cards inside must never
     promote themselves, or the compositor juggles eighteen tall images. */
  will-change: transform;
  backface-visibility: hidden;
}
.proof__row--rev .proof__track { animation-direction: reverse; animation-duration: 52s; }
.proof__row:hover .proof__track { animation-play-state: paused; }
@keyframes proofScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
[dir='rtl'] .proof__track { animation-name: proofScrollRtl; }
@keyframes proofScrollRtl {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(50%, 0, 0); }
}

.site-card {
  --shotH: clamp(11rem, 30vh, 14rem);
  position: relative;
  display: flex; flex-direction: column;
  flex: none;
  inline-size: clamp(15rem, 22vw, 19rem);
  margin-inline-end: 1.2rem;
  border-radius: var(--radius);
  background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .5s var(--ease-spring), border-color .4s, box-shadow .4s;
}
.site-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124, 108, 255, .45);
  box-shadow: var(--shadow), var(--glow);
}
.site-card__chrome {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .8rem;
  border-block-end: 1px solid var(--line);
  background: var(--film-1);
}
.site-card__domain {
  min-inline-size: 0;
  font-family: var(--mono);
  font-size: .68rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Invisible at rest, so it takes no room at rest either: the domain beside it
   keeps its full width in every language, however long the word for "visit". */
.site-card__visit {
  margin-inline-start: auto; flex: none;
  font-size: .64rem; font-weight: 800;
  color: var(--accent-2);
  opacity: 0;
  max-inline-size: 0; overflow: hidden;
  transition: opacity .3s, max-inline-size .3s;
  white-space: nowrap;
}
.site-card:hover .site-card__visit { opacity: 1; max-inline-size: 7rem; }
.site-card__shot {
  display: block;
  position: relative;
  block-size: var(--shotH);
  overflow: hidden;
  /* Never white: a white ground bleeds through the card's rounded clip at
     fractional scroll offsets and reads as a blinking hairline. */
  background: var(--bg-2);
}
.site-card__shot img {
  inline-size: 100%; block-size: auto;
  display: block;
  /* No resting transform — that promoted every screenshot to its own
     compositor layer and made the row stutter. Only the hovered card
     animates, and only it asks for a layer. */
  transition: transform .6s ease-out;
}
.site-card:hover .site-card__shot img {
  transform: translateY(calc(-100% + var(--shotH)));
  transition: transform var(--panT, 7s) linear .12s;
  will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════
   v5 — the cinematic layer. Kinetic hero type, the persistent
   demonstration window with its living clock, the ghost cursor that
   actually clicks, richer scene mocks, and the problem list that
   Ariana strikes off your desk. Everything here is CSS driven by the
   same two signals the engine already writes: .is-live and --p.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: words arrive one by one, out of the blur ── */
.hw { display: inline-block; }
.hw--grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-block-end: .06em;
}
.js .hw {
  opacity: 0;
  transform: translateY(.55em);
  filter: blur(10px);
  animation: hwIn .85s var(--ease) forwards;
  animation-delay: calc(.12s + var(--wi, 0) * .09s);
}
@keyframes hwIn { to { opacity: 1; transform: none; filter: none; } }

.hero__beam {
  position: absolute;
  inset-block-start: -28%;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: min(54rem, 84vw);
  block-size: 125%;
  background: conic-gradient(from 180deg at 50% 0%,
    transparent 42%,
    color-mix(in srgb, var(--accent) 15%, transparent) 50%,
    transparent 58%);
  filter: blur(26px);
  transform-origin: 50% 0;
  animation: beamSway 12s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes beamSway { from { rotate: -5deg; } to { rotate: 5deg; } }

/* ── The demonstration window: one browser, seven moments ── */
.demo__frame {
  position: relative;
  inline-size: min(100%, 54rem);
  margin-inline: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-block-size: 0;
  border-radius: calc(var(--radius-lg) + 6px);
  background: linear-gradient(168deg, var(--film-2), var(--film-1) 45%), var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--glow);
  overflow: clip;
}
.demo__chrome {
  position: relative;
  display: flex; align-items: center; gap: .9rem;
  padding: .72rem 1.15rem;
  border-block-end: 1px solid var(--line);
  background: var(--film-1);
}
.demo__app {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 700;
  white-space: nowrap;
}
.demo__app svg { border-radius: 4px; flex: none; }
.demo__when {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .24rem .8rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .7rem; font-weight: 600;
  color: var(--muted);
  background: var(--film-2);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.demo__when svg { color: var(--accent-2); flex: none; }
.demo__when-slot { display: inline-grid; }
.demo__day {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  white-space: nowrap;
}
.demo:not([data-scene]) .demo__day[data-day="0"],
.demo[data-scene="0"] .demo__day[data-day="0"],
.demo[data-scene="1"] .demo__day[data-day="1"],
.demo[data-scene="2"] .demo__day[data-day="2"],
.demo[data-scene="3"] .demo__day[data-day="3"],
.demo[data-scene="4"] .demo__day[data-day="4"],
.demo[data-scene="5"] .demo__day[data-day="5"],
.demo[data-scene="6"] .demo__day[data-day="6"] { opacity: 1; transform: none; }

/* The thin line of time along the chrome: how far into the week we are. */
.demo__trace {
  position: absolute;
  inset-inline: 0; inset-block-end: -1px;
  block-size: 2px;
  background: var(--grad);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}
[dir='rtl'] .demo__trace { transform-origin: 100% 50%; }

.demo-step { padding: 1.6rem clamp(1rem, 3vw, 2rem) 1.5rem; }

/* Step 1 — the instruction types itself, word by word */
.js .demo-step .iw { opacity: 0; }
.js .demo-step.is-live .iw {
  animation: iwIn .05s linear forwards;
  animation-delay: calc(.4s + var(--seq, 0) * .07s);
}
@keyframes iwIn { to { opacity: 1; } }

/* Step 4 — 08:59 rolls over to 09:00 */
.clock__flip { display: grid; justify-content: center; overflow: hidden; }
.clock__flip .clock__time { grid-area: 1 / 1; }
.clock__sr {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}
.js .demo-step .clock__time--new { opacity: 0; transform: translateY(58%); }
.js .demo-step.is-live .clock__time--new { animation: flipNew .6s var(--ease-spring) .95s forwards; }
.js .demo-step.is-live .clock__time--old { animation: flipOld .55s var(--ease) .95s forwards; }
.no-js .clock__time--old { display: none; }
@keyframes flipNew { to { opacity: 1; transform: none; } }
@keyframes flipOld { to { opacity: 0; transform: translateY(-58%); filter: blur(3px); } }

/* Step 5 — the running task carries a live meter */
.job__chain li .job__state { display: inline-flex; align-items: center; gap: .45rem; }
.job__meter {
  display: inline-block; position: relative;
  inline-size: 3rem; block-size: 4px;
  border-radius: 999px;
  background: var(--film-3);
  overflow: hidden;
}
.job__meter i {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: var(--grad);
  transform: scaleX(.15);
  transform-origin: 0 50%;
}
.js .demo-step.is-live .job__meter i { animation: meterFill 2.8s var(--ease) .9s infinite; }
@keyframes meterFill {
  0% { transform: scaleX(.06); }
  68% { transform: scaleX(.82); }
  100% { transform: scaleX(.97); }
}

/* (Step 6's cover is now the real generated scene — see .art__cover above.) */

/* ── Act I: the ghost cursor walks in and presses Apply ── */
.chat-plan__actions { position: relative; }
.gcur {
  position: absolute;
  inset-inline-start: 3.1rem; inset-block-start: .35rem;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 3px 7px rgba(5, 3, 18, .55));
  opacity: 0;
}
.gcur::after {
  content: '';
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 2px solid var(--accent-2);
  opacity: 0;
  transform: scale(.35);
}
.js .act.is-live .gcur--chat { animation: gcurChat 2.2s var(--ease) 3.15s forwards; }
.js .act.is-live .gcur--chat::after { animation: gcurClick .55s ease-out 5.05s forwards; }
@keyframes gcurChat {
  0% { opacity: 0; translate: 13rem 7.5rem; }
  14% { opacity: 1; }
  58% { translate: 2rem 2rem; }
  82% { translate: 0 0; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes gcurClick {
  0% { opacity: .9; transform: scale(.35); }
  100% { opacity: 0; transform: scale(1.5); }
}
.js .act.is-live .chat-plan__apply { animation: pillPress .4s var(--ease) 5.1s; }
@keyframes pillPress { 40% { transform: scale(.93); } }
.chat-toast {
  display: inline-flex; align-items: center; gap: .5rem;
  align-self: flex-start;
  padding: .55rem 1rem;
  border-radius: 12px;
  font-size: .8rem; font-weight: 700;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}
.js .act .chat-toast { opacity: 0; transform: translateY(8px); }
.js .act.is-live .chat-toast { animation: seqIn .5s var(--ease-spring) 5.55s forwards; }

/* ── Act II: the WordPress site connects, rows travel across ── */
.import-src {
  display: flex; align-items: center; gap: .8rem;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  background: var(--raised);
  border: 1px solid var(--line);
}
.import-src__logo {
  inline-size: 2rem; block-size: 2rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #21759b;
  color: #fff; font-weight: 800; font-size: .95rem;
}
.import-src__label { font-size: .8rem; color: var(--muted); min-inline-size: 0; }
.import-src__label b { color: var(--ink); }
.import-src__ok {
  margin-inline-start: auto; flex: none;
  font-size: .66rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ok);
}
.import-rows { display: flex; flex-direction: column; }
.import-rows li {
  display: flex; align-items: center; gap: .55rem;
  padding-block: .5rem;
  font-size: .82rem;
}
.import-rows li + li { border-block-start: 1px dashed var(--line-soft); }
.import-rows__title {
  flex: 1; min-inline-size: 0;
  color: var(--ink); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.import-rows__tag {
  flex: none;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: .64rem; font-weight: 700;
  color: var(--accent-2);
  background: var(--wash);
}
.import-rows__tag--url {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}
.js .act .import-src { opacity: 0; transform: translateY(8px); }
.js .act.is-live .import-src { animation: seqIn .45s var(--ease) .35s forwards; }
.js .act .import-src__ok { opacity: 0; }
.js .act.is-live .import-src__ok { animation: seqIn .3s var(--ease) 1s forwards; }
.js .act .import-rows li { opacity: 0; transform: translateX(-14px); }
.js .act.is-live .import-rows li {
  animation: rowTravel .5s var(--ease) forwards;
  animation-delay: calc(1.3s + var(--seq, 0) * .55s);
}
@keyframes rowTravel { to { opacity: 1; transform: none; } }
.js .act .import-rows__tag { opacity: 0; transform: scale(.6); }
.js .act.is-live .import-rows__tag {
  animation: tagPop .35s var(--ease-spring) forwards;
  animation-delay: calc(1.75s + var(--seq, 0) * .55s);
}
@keyframes tagPop { to { opacity: 1; transform: none; } }

/* ── Act IV: the rejected line flinches ── */
.js .act.is-live .mock-code .ln--bad {
  animation: seqIn .32s var(--ease) forwards, lnShake .45s ease;
  animation-delay: calc(.5s + var(--seq, 0) * .3s), 4.45s;
}
@keyframes lnShake {
  20%, 60% { translate: -3px 0; }
  40%, 80% { translate: 3px 0; }
}

/* ── New pieces, reduced motion: finished states, instantly ── */
@media (prefers-reduced-motion: reduce) {
  .js .hw { opacity: 1; transform: none; filter: none; animation: none; }
  .hero__beam { animation: none; }
  .js .demo-step { transform: none; filter: none; }
  .js .demo-step .iw { opacity: 1; animation: none; }
  .js .demo-step .clock__time--new { opacity: 1; transform: none; }
  .js .demo-step .clock__time--old { display: none; }
  .js .demo-step.is-live .job__meter i { animation: none; transform: scaleX(.7); }
  .result__cover::after { animation: none; }
  .gcur { display: none; }
  .js .act .chat-toast { opacity: 1; transform: none; }
  .js .act .import-src, .js .act .import-src__ok,
  .js .act .import-rows li, .js .act .import-rows__tag { opacity: 1; transform: none; animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Features page — eleven chapters and a sticky chapter nav.
   ═══════════════════════════════════════════════════════════════ */
.feat-nav {
  position: sticky;
  inset-block-start: var(--header-h);
  z-index: 90;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-block: 1px solid var(--line);
}
.feat-nav__inner {
  display: flex; align-items: center; gap: .45rem;
  padding-block: .6rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.feat-nav__inner::-webkit-scrollbar { display: none; }
.feat-nav__chip {
  flex: none;
  padding: .36rem .95rem;
  border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  color: var(--muted);
  background: var(--glass);
  border: 1px solid var(--line);
  white-space: nowrap;
  transition: color .3s, background-color .3s, border-color .3s, transform .3s var(--ease-spring);
}
.feat-nav__chip:hover { color: var(--ink); border-color: var(--line-strong); transform: translateY(-1px); }
.feat-nav__chip.is-on {
  color: var(--on-accent);
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 6px 16px -8px rgba(124, 108, 255, .8);
}

.feat-cat {
  padding-block: var(--sec);
  scroll-margin-block-start: calc(var(--header-h) + 3.6rem);
}
.feat-cat--tint {
  background: var(--bg-2);
  border-block: 1px solid var(--line);
}
/* A toned chapter's band carries a whisper of its own colour — 4%, which
   is below the threshold where anyone would call it "a coloured section"
   and above the one where the page stops feeling like eleven identical
   slabs. The alternating rhythm was already there; this gives it a
   reason. */
.feat-cat--tint[data-tone] {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tone) 4%, transparent), transparent 55%),
    var(--bg-2);
  border-block-color: color-mix(in srgb, var(--tone) 22%, var(--line));
}
.feat-cat__lead { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin-block-start: .9rem; }

.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.feat-card {
  position: relative;
  padding: 1.7rem 1.6rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .5s var(--ease-spring), border-color .4s, box-shadow .4s;
}
.feat-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--tone) 45%, var(--line-strong));
  box-shadow: var(--shadow);
}
.feat-card__tag {
  position: absolute;
  inset-block-start: 1.45rem; inset-inline-end: 1.4rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  font-size: .62rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tone-ink);
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
  white-space: nowrap;
}
.feat-card__title { font-size: 1.06rem; font-weight: 800; letter-spacing: -.015em; margin-block-end: .55rem; }
.feat-card:has(.feat-card__tag) .feat-card__title { padding-inline-end: 5.4rem; }
.feat-card__text { color: var(--muted); font-size: .9rem; line-height: 1.72; }
.feat-card__text em { font-style: normal; color: var(--ink); }
:root[data-theme="light"] .feat-card {
  box-shadow: 0 1px 2px rgba(43, 29, 94, .05), 0 8px 24px -18px rgba(43, 29, 94, .35);
}

.feat-grid [data-reveal]:nth-child(2) { --d: .07s; }
.feat-grid [data-reveal]:nth-child(3) { --d: .14s; }
.feat-grid [data-reveal]:nth-child(4) { --d: .05s; }
.feat-grid [data-reveal]:nth-child(5) { --d: .12s; }
.feat-grid [data-reveal]:nth-child(6) { --d: .19s; }
.feat-grid [data-reveal]:nth-child(7) { --d: .1s; }
.feat-grid [data-reveal]:nth-child(8) { --d: .17s; }

.feat-more {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  margin-block-start: 1.3rem;
}
.feat-more span {
  padding: .28rem .8rem;
  border-radius: 999px;
  font-size: .76rem; font-weight: 600;
  color: var(--muted);
  background: var(--glass);
  border: 1px solid var(--line);
}
.feat-more .feat-more__label {
  padding: 0; border: 0; background: none;
  font-size: .66rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2);
}

@media (max-width: 1100px) {
  .feat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .feat-grid { grid-template-columns: 1fr; }
  .feat-cat { scroll-margin-block-start: calc(var(--header-h) + 3.2rem); }
}

/* ═══════════════════════════════════════════════════════════════
   About: the capability hand-off band · Contact: the real form ·
   Single post: adjacent links and related articles.
   ═══════════════════════════════════════════════════════════════ */
.feature-band { padding-block: 0 var(--sec); }
.feature-band__card {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: calc(var(--radius-lg) + 8px);
  background: linear-gradient(160deg, rgba(124, 108, 255, .18), var(--card) 70%);
  border: 1px solid rgba(124, 108, 255, .3);
  overflow: hidden;
}
:root[data-theme="light"] .feature-band__card {
  background: linear-gradient(160deg, #EDE9FE, var(--card) 70%);
  border-color: var(--line-strong);
}
.feature-band__copy { max-inline-size: 42rem; }
.feature-band__text { color: var(--muted); line-height: 1.75; margin-block-start: 1rem; }

/* ── The contact form — Ariana renders it, the theme dresses it ── */
.write-us { padding-block: 0 var(--sec); }
.write-us__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.write-us__text { color: var(--muted); font-size: 1.02rem; line-height: 1.75; margin-block-start: 1rem; }
.write-us__points { display: flex; flex-direction: column; gap: .55rem; margin-block-start: 1.3rem; }
.write-us__points li {
  position: relative;
  padding-inline-start: 1.7rem;
  font-size: .94rem; font-weight: 600;
}
.write-us__points li::before {
  content: '';
  position: absolute; inset-inline-start: 0; inset-block-start: .32em;
  inline-size: 1rem; block-size: 1rem;
  border-radius: 50%;
  background: var(--wash)
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a99cff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9.5'/%3E%3C/svg%3E") center / 62% no-repeat;
}
/* ── Previous / next article ── */
.post-adjacent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-block-start: 2.4rem;
}
.post-adjacent__link {
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius);
  background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  border: 1px solid var(--line);
  transition: transform .45s var(--ease-spring), border-color .4s, box-shadow .4s;
}
.post-adjacent__link:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.post-adjacent__link--prev { grid-column: 1; }
.post-adjacent__link--next { grid-column: 2; text-align: end; align-items: flex-end; }
.post-adjacent__label {
  font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-2);
}
.post-adjacent__title {
  font-weight: 800; font-size: .98rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.related { padding-block: 0 var(--sec); }

@media (max-width: 900px) {
  .write-us__grid { grid-template-columns: 1fr; gap: 2rem; }
  .feature-band__card .btn { inline-size: 100%; }
}
@media (max-width: 640px) {
  .post-adjacent { grid-template-columns: 1fr; }
  .post-adjacent__link--prev, .post-adjacent__link--next { grid-column: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   v5.1 — the living hero, and the demonstration as ONE real app.
   The browser frame is the only window; inside it sits Ariana's own
   panel (sidebar + screens). Scene 6 navigates the same window to
   the public site: the chrome swaps to the article URL and the
   sidebar folds away.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: a sky that answers the pointer ── */
.hero__sky-deep {
  position: absolute; inset: 0;
  transform: translate3d(calc(var(--mx, 0) * 26px), calc(var(--my, 0) * 18px), 0);
  transition: transform .6s ease-out;
}
.hero__sky .stars {
  transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0);
  transition: transform .8s ease-out;
}
.meteor {
  position: absolute;
  inline-size: 130px; block-size: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-2), #fff);
  transform: rotate(-28deg);
  opacity: 0;
}
.meteor--1 { inset-block-start: 12%; inset-inline-start: 66%; animation: meteorFly 7s linear 2s infinite; }
.meteor--2 { inset-block-start: 32%; inset-inline-start: 20%; inline-size: 90px; animation: meteorFly 9.5s linear 5.2s infinite; }
.meteor--3 { inset-block-start: 6%; inset-inline-start: 38%; animation: meteorFly 12s linear 8.6s infinite; }
@keyframes meteorFly {
  0%, 86% { opacity: 0; translate: 0 0; }
  88% { opacity: .9; }
  96% { opacity: 0; translate: -44vw 24vw; }
  100% { opacity: 0; translate: -44vw 24vw; }
}

/* The claim's last word shimmers forever; the sub's verbs take turns
   lighting up — the sentence itself demonstrates the loop. */
.hw--grad {
  /* Violet still owns the word; the highlight that travels through it is
     the data tone. One complement, in the single most-looked-at place on
     the site, is what turns a flat brand gradient into light. */
  background: linear-gradient(110deg,
    var(--accent), var(--accent-2),
    color-mix(in srgb, var(--tone-data) 70%, var(--accent-2)),
    var(--accent-2), var(--accent));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: gradSlide 4.5s linear infinite;
}
.js .hw--grad {
  animation: hwIn .85s var(--ease) forwards, gradSlide 4.5s linear infinite;
  animation-delay: calc(.12s + var(--wi, 0) * .09s), 1.1s;
}
@keyframes gradSlide { to { background-position: -220% 0; } }
.hv {
  --hv: var(--accent); --hv-ink: var(--accent-2);
  font-weight: 700;
  color: var(--muted);
  animation: verbGlow 7.5s ease-in-out infinite;
  animation-delay: calc(1.4s + var(--hi, 0) * 1.5s);
}
/* creates · publishes · optimises · translates · maintains
   brand     live        data        brand        value
   Publishing is the moment something goes live; optimising is measured;
   maintaining is what keeps a site worth what it cost. */
.hv[style*='--hi:1'] { --hv: var(--tone-live);  --hv-ink: var(--tone-live); }
.hv[style*='--hi:2'] { --hv: var(--tone-data);  --hv-ink: var(--tone-data); }
.hv[style*='--hi:4'] { --hv: var(--tone-value); --hv-ink: var(--tone-value); }
@keyframes verbGlow {
  0%, 100% { color: var(--muted); text-shadow: none; }
  5% { color: var(--hv-ink); text-shadow: 0 0 20px color-mix(in srgb, var(--hv) 60%, transparent); }
  15% { color: var(--hv-ink); text-shadow: 0 0 20px color-mix(in srgb, var(--hv) 40%, transparent); }
  23% { color: var(--muted); text-shadow: none; }
}
.hero__badge--link { position: relative; overflow: hidden; }
.hero__badge--link::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .16) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 120% 0;
  animation: badgeShine 6s ease-in-out 2.5s infinite;
  pointer-events: none;
}
@keyframes badgeShine {
  0%, 55% { background-position: 120% 0; }
  75%, 100% { background-position: -120% 0; }
}

/* ── The window's chrome tells the scene ── */
.demo__app-slot { display: inline-grid; align-items: center; min-inline-size: 0; }
.demo__app {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.demo__app--site {
  font-family: var(--mono);
  font-size: .7rem; font-weight: 600;
  color: var(--muted);
}
.demo__app--site svg { color: var(--ok); }
.demo:not([data-scene="5"]) .demo__app[data-app="admin"] { opacity: 1; transform: none; }
.demo[data-scene="5"] .demo__app[data-app="site"] { opacity: 1; transform: none; }

.demo__statusbox { display: inline-grid; margin-inline-start: auto; }
.demo__status {
  grid-area: 1 / 1;
  justify-self: end;
  padding: .18rem .68rem;
  border-radius: 999px;
  font-size: .62rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.demo__status--dim  { color: var(--faint); background: var(--film-2); }
.demo__status--on   { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.demo__status--warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.demo__status--run  { color: var(--accent-2); background: var(--wash); }
.demo__status--done { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.demo:not([data-scene]) .demo__status[data-st="0"],
.demo[data-scene="0"] .demo__status[data-st="0"],
.demo[data-scene="1"] .demo__status[data-st="1"],
.demo[data-scene="2"] .demo__status[data-st="2"],
.demo[data-scene="3"] .demo__status[data-st="3"],
.demo[data-scene="4"] .demo__status[data-st="4"],
.demo[data-scene="5"] .demo__status[data-st="5"],
.demo[data-scene="6"] .demo__status[data-st="6"] { opacity: 1; transform: none; }
.demo__chrome .demo__when { margin-inline-start: .6rem; }

/* ── The app shell: sidebar + screen, one window ── */
.demo__body {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  min-block-size: 0;
  transition: grid-template-columns .55s var(--ease);
}
.demo__side {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-block: 1.1rem;
  border-inline-end: 1px solid var(--line);
  background: var(--film-1);
  overflow: hidden;
  min-inline-size: 0;
}
.demo__side-logo { inline-size: 26px; block-size: 26px; border-radius: 8px; overflow: hidden; flex: none; box-shadow: 0 4px 14px -4px rgba(124, 108, 255, .8); }
.demo__side-logo svg { inline-size: 100%; block-size: 100%; }
.demo__side-item { inline-size: 22px; block-size: 22px; border-radius: 7px; background: var(--film-2); flex: none; }
.demo__side-item.is-on { background: var(--selected); outline: 1px solid var(--accent); }
/* Scene 6 is the public site: the same window navigates, the panel folds away. */
.demo[data-scene="5"] .demo__body { grid-template-columns: 0px minmax(0, 1fr); }
.demo[data-scene="5"] .demo__side { border-inline-end-color: transparent; }

/* ── Step 1: the job form ── */
.jobmeta { display: flex; gap: .5rem; flex-wrap: wrap; }
.jobmeta__chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .85rem;
  border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  color: var(--muted);
  background: var(--glass);
  border: 1px solid var(--line);
}
.jobmeta__chip svg { color: var(--accent-2); flex: none; }
.js .demo-step .jobmeta__chip { opacity: 0; transform: translateY(8px); }
.js .demo-step.is-live .jobmeta__chip {
  animation: seqIn .45s var(--ease) forwards;
  animation-delay: calc(2.5s + var(--seq, 0) * .22s);
}
.save-btn {
  position: relative;
  display: inline-flex; align-items: center;
  padding: .55rem 1.5rem;
  border-radius: 999px;
  background: var(--grad);
  color: var(--on-accent);
  font-size: .85rem; font-weight: 700;
  box-shadow: 0 10px 26px -12px rgba(124, 108, 255, .8);
}
.js .demo-step .save-btn { opacity: 0; transform: translateY(8px); }
.js .demo-step.is-live .save-btn {
  animation: seqIn .45s var(--ease) 3.15s forwards, pillPress .4s var(--ease) 5.35s;
}
.gcur--save { inset-inline-start: auto; inset-inline-end: -.5rem; inset-block-start: auto; inset-block-end: -.55rem; }
.js .demo-step.is-live .gcur--save { animation: gcurSave 1.7s var(--ease) 3.55s forwards; }
.js .demo-step.is-live .gcur--save::after { animation: gcurClick .55s ease-out 5.3s forwards; }
@keyframes gcurSave {
  0% { opacity: 0; translate: -9rem 5rem; }
  18% { opacity: 1; }
  80% { translate: 0 0; }
  100% { opacity: 1; translate: 0 0; }
}

/* ── Step 5: the run line, and the cover being drawn ── */
.runline { display: flex; gap: .5rem; flex-wrap: wrap; }
.runline li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  font-size: .74rem; font-weight: 700;
  color: var(--faint);
  background: var(--film-2);
  border: 1px solid var(--line);
}
.runline li::before {
  content: '';
  inline-size: .85rem; block-size: .85rem; flex: none;
  border-radius: 50%;
  background: var(--film-3);
  border: 1px solid var(--line-strong);
}
.runline li[data-state="done"] { color: var(--ink); }
.runline li[data-state="done"]::before {
  background: color-mix(in srgb, var(--ok) 20%, transparent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ADE80' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9.5'/%3E%3C/svg%3E") center / 66% no-repeat;
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
}
.runline li[data-state="run"] {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--wash);
}
.runline li[data-state="run"]::before {
  background: var(--grad);
  border-color: transparent;
  animation: stepPulse 1.1s ease-in-out infinite;
}
.js .demo-step .runline li { opacity: 0; transform: translateY(6px); }
.js .demo-step.is-live .runline li {
  animation: seqIn .35s var(--ease) forwards;
  animation-delay: calc(.15s + var(--seq, 0) * .1s);
}

.ws { display: flex; flex-direction: column; gap: .9rem; }
.ws__canvas {
  position: relative;
  block-size: clamp(8.5rem, 24vh, 11.5rem);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
}
.ws__canvas .cover-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
/* The image forms the way a diffusion render does: out of blur, in steps. */
.js .demo-step .ws__canvas .cover-art { filter: blur(26px) saturate(1.5); transform: scale(1.08); }
.js .demo-step.is-live .ws__canvas .cover-art { animation: artForm 3.8s var(--ease) .9s forwards; }
@keyframes artForm {
  0% { filter: blur(26px) saturate(1.5); transform: scale(1.08); }
  30% { filter: blur(15px) saturate(1.35); transform: scale(1.05); }
  62% { filter: blur(6px) saturate(1.15); transform: scale(1.02); }
  100% { filter: blur(0) saturate(1); transform: scale(1); }
}
.ws__noise {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.js .demo-step.is-live .ws__noise { animation: noiseFade 4s linear .9s forwards; }
.js .demo-step .ws__noise { opacity: .55; }
@keyframes noiseFade { 0% { opacity: .55; } 70% { opacity: .28; } 100% { opacity: 0; } }
.ws__scan {
  position: absolute; inset-inline: 0;
  block-size: 34%;
  background: linear-gradient(to bottom, transparent, rgba(169, 156, 255, .3), transparent);
  transform: translateY(-130%);
  opacity: 0;
  pointer-events: none;
}
.js .demo-step.is-live .ws__scan { animation: scanSweep 1.7s ease-in-out .9s 2; }
@keyframes scanSweep {
  0% { opacity: 0; transform: translateY(-130%); }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translateY(380%); }
}
.ws__tag {
  position: absolute;
  inset-inline-start: .8rem; inset-block-end: .7rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .32rem .85rem;
  border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  color: #fff;
  background: var(--scrim);
  border: 1px solid var(--film-4);
  backdrop-filter: blur(8px);
  font-variant-numeric: tabular-nums;
}
.ws__dot {
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--accent-2);
  animation: pulse 1.8s infinite;
}
.ws__doc {
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  background: var(--raised);
  border: 1px solid var(--line);
}
.ws__doctitle { font-size: 1rem; font-weight: 800; letter-spacing: -.015em; margin-block-end: .45rem; }
.ws__line { font-size: .86rem; color: var(--muted); line-height: 1.7; }
.js .demo-step .ww { opacity: 0; }
.js .demo-step.is-live .ww {
  animation: iwIn .05s linear forwards;
  animation-delay: calc(1.1s + var(--seq, 0) * .13s);
}

/* ── Step 7: the run's receipts ── */
.run-stats { display: flex; gap: .5rem; flex-wrap: wrap; }
.run-stats span {
  padding: .35rem .85rem;
  border-radius: 10px;
  background: var(--film-2);
  border: 1px solid var(--line);
  font-size: .74rem; font-weight: 600;
  color: var(--muted);
}
.run-stats b { color: var(--ink); font-weight: 800; margin-inline-start: .3rem; }

/* ── v5.1 pieces, reduced motion & small screens ── */
@media (prefers-reduced-motion: reduce) {
  .meteor { display: none; }
  .hero__sky-deep, .hero__sky .stars { transform: none; }
  .hv, .hw--grad, .hero__badge--link::after { animation: none; }
  .proof__track { animation: none; will-change: auto; }
  .proof__row:not(.is-driven):not(.is-native) { overflow-x: auto; }
  .proof__row:not(.is-driven):not(.is-native)::before, .proof__row:not(.is-driven):not(.is-native)::after { display: none; }
  .js .demo-step .jobmeta__chip, .js .demo-step .save-btn,
  .js .demo-step .runline li, .js .demo-step .ww { opacity: 1; transform: none; animation: none; }
  .js .demo-step .ws__canvas .cover-art { filter: none; transform: none; animation: none; }
  .js .demo-step .ws__noise, .ws__scan { display: none; }
  .demo__body { transition: none; }
}
@media (max-width: 900px) {
  .site-card { --shotH: 10.5rem; inline-size: 15.5rem; margin-inline-end: 1rem; }
  .proof__head { margin-block-end: 1.6rem; }
}

/* ═══════════════════════════════════════════════════════════════
   v5.2 — every scene fills its stage. Two-column screens in the
   demonstration, a live calendar, the weekend passing, wake-up
   checks, the Arabic edition, richer act mocks, and the job that
   travels the Auto Pilot line forever.
   ═══════════════════════════════════════════════════════════════ */

/* ── Split screens: work on one side, insight on the other ── */
.screen--split {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 1.2rem;
  align-items: stretch;
}
.screen__col { display: flex; flex-direction: column; gap: 1rem; min-inline-size: 0; }
.screen__col--aside {
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--film-1);
  border: 1px solid var(--line);
}

/* Step 1 aside — Ariana parses the instruction while it is typed */
.parse { display: flex; flex-direction: column; gap: .45rem; }
.parse li {
  position: relative;
  padding-inline-start: 1.55rem;
  font-size: .84rem; color: var(--ink); line-height: 1.5;
}
.parse li b { color: var(--accent-2); font-weight: 700; }
.parse li::before {
  content: '';
  position: absolute; inset-inline-start: 0; inset-block-start: .28em;
  inline-size: .95rem; block-size: .95rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ok) 16%, transparent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ADE80' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9.5'/%3E%3C/svg%3E") center / 64% no-repeat;
  border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent);
}
.parse__note {
  margin-block-start: auto;
  padding-block-start: .8rem;
  border-block-start: 1px dashed var(--line-soft);
  font-size: .74rem; color: var(--faint); line-height: 1.6;
}
.js .demo-step .parse li { opacity: 0; transform: translateX(-8px); }
.js .demo-step.is-live .parse li {
  animation: stepIn .4s var(--ease) forwards;
  animation-delay: calc(.9s + var(--seq, 0) * .42s);
}

/* Step 2 aside — the month, with its Mondays lit */
.cal { display: flex; flex-direction: column; gap: .6rem; block-size: 100%; }
.cal__title {
  font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
}
.cal__dow, .cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .25rem;
}
.cal__dow li {
  text-align: center;
  font-size: .58rem; font-weight: 800;
  color: var(--faint);
  letter-spacing: .06em;
}
.cal__grid li {
  display: grid; place-items: center;
  aspect-ratio: 1;
  border-radius: 7px;
  font-size: .66rem; font-weight: 600;
  color: var(--muted);
  background: var(--film-1);
  font-variant-numeric: tabular-nums;
}
.cal__grid li.is-void { background: none; }
.cal__grid li.is-mon {
  color: var(--on-accent);
  background: var(--grad);
  font-weight: 800;
  box-shadow: 0 4px 14px -6px rgba(124, 108, 255, .8);
}
.cal__grid li.is-next { position: relative; }
.cal__grid li.is-next::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 9px;
  border: 1.5px solid var(--accent-2);
  animation: nextRunPulse 2s ease-in-out 2.2s infinite;
  opacity: 0;
}
@keyframes nextRunPulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.06); }
}
.cal__note {
  margin-block-start: auto;
  display: flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 700;
  color: var(--accent-2);
}
.js .demo-step .cal__grid li { opacity: 0; }
.js .demo-step.is-live .cal__grid li { animation: iwIn .3s linear .35s forwards; }
.js .demo-step .cal__grid li.is-mon { transform: scale(.5); }
.js .demo-step.is-live .cal__grid li.is-mon {
  animation: iwIn .3s linear .35s forwards, tagPop .4s var(--ease-spring) forwards;
  animation-delay: .35s, calc(.9s + var(--seq, 0) * .22s);
}
.js .demo-step .cal__note { opacity: 0; }
.js .demo-step.is-live .cal__note { animation: seqIn .45s var(--ease) 1.9s forwards; }

/* Step 3 — presence, and the weekend passing */
.idle { display: flex; flex-direction: column; gap: .5rem; inline-size: min(100%, 26rem); }
.idle li {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .9rem;
  border-radius: 12px;
  background: var(--raised);
  border: 1px solid var(--line);
  font-size: .8rem;
}
.idle__who { font-weight: 800; inline-size: 3.4rem; flex: none; }
.idle__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none; }
.idle__dot--off { background: var(--faint); opacity: .6; }
.idle__dot--on { background: var(--ok); animation: pulse 2.2s infinite; }
.idle__state { color: var(--muted); min-inline-size: 0; }
.js .demo-step .idle li { opacity: 0; transform: translateY(8px); }
.js .demo-step.is-live .idle li {
  animation: seqIn .45s var(--ease) forwards;
  animation-delay: calc(.5s + var(--seq, 0) * .3s);
}
.weekend {
  display: flex; align-items: center; gap: .55rem;
  inline-size: min(100%, 26rem);
}
.weekend li {
  display: flex; align-items: center; gap: .55rem;
  font-size: .72rem; font-weight: 700;
  color: var(--faint);
  white-space: nowrap;
  flex: 1; min-inline-size: 0;
}
.weekend li:last-child { flex: none; }
.weekend li i {
  flex: 1;
  block-size: 2px; border-radius: 2px;
  background: var(--film-3);
  position: relative;
  overflow: hidden;
}
.weekend li i::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
[dir='rtl'] .weekend li i::after { transform-origin: 100% 50%; }
.weekend .is-target { color: var(--accent-2); font-size: .78rem; }
.js .demo-step .weekend li { opacity: 0; }
.js .demo-step.is-live .weekend li {
  animation: iwIn .3s linear forwards;
  animation-delay: calc(1.2s + var(--seq, 0) * .75s);
}
.js .demo-step.is-live .weekend li i::after {
  animation: weekendFill .6s var(--ease) forwards;
  animation-delay: calc(1.45s + var(--seq, 0) * .75s);
}
@keyframes weekendFill { to { transform: scaleX(1); } }
.js .demo-step.is-live .weekend .is-target { animation: iwIn .3s linear forwards, targetGlow 1.6s ease-in-out infinite; animation-delay: calc(1.2s + var(--seq, 0) * .75s), 3.6s; }
@keyframes targetGlow { 50% { text-shadow: 0 0 16px rgba(124, 108, 255, .8); } }

/* Step 4 — the alarm rings outward, then the run checks in */
.clock { position: relative; }
.clock__rings { position: absolute; inset-block-start: 42%; inset-inline-start: 50%; pointer-events: none; }
.clock__rings i {
  position: absolute;
  inline-size: 30px; block-size: 30px;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid var(--accent-2);
  opacity: 0;
}
.js .demo-step.is-live .clock__rings i:nth-child(1) { animation: ringOut 1.4s ease-out 1.55s 2; }
.js .demo-step.is-live .clock__rings i:nth-child(2) { animation: ringOut 1.4s ease-out 1.9s 2; }
@keyframes ringOut {
  0% { opacity: .8; transform: scale(1); }
  100% { opacity: 0; transform: scale(7); }
}
.wake { display: flex; flex-direction: column; gap: .45rem; }
.wake li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-size: .8rem; color: var(--muted);
  font-family: var(--mono);
}
.wake li::before {
  content: '';
  position: absolute; inset-inline-start: 0; inset-block-start: .22em;
  inline-size: .85rem; block-size: .85rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 18%, transparent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ADE80' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9.5'/%3E%3C/svg%3E") center / 64% no-repeat;
}
.js .demo-step .wake li { opacity: 0; transform: translateY(6px); }
.js .demo-step.is-live .wake li {
  animation: seqIn .4s var(--ease) forwards;
  animation-delay: calc(1.9s + var(--seq, 0) * .5s);
}

/* Step 6 — the first paragraph, the publisher, and the Arabic edition */
.art__foot {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: .6rem;
}
.art__author {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .9rem;
  border-radius: var(--radius);
  background: var(--raised);
  border: 1px solid var(--line);
  min-inline-size: 0;
}
.art__avatar {
  inline-size: 2.3rem; block-size: 2.3rem; flex: none;
  border-radius: 50%;
  border: 1.5px solid rgba(124, 108, 255, .5);
  box-shadow: 0 4px 14px -6px rgba(124, 108, 255, .7);
}
.art__author-body { display: flex; flex-direction: column; gap: .1rem; min-inline-size: 0; }
.art__author-body b { font-size: .8rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art__author-body i { font-style: normal; font-size: .66rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art__para { display: flex; flex-direction: column; gap: .4rem; }
.art__para i {
  display: block;
  inline-size: var(--w, 100%);
  block-size: 7px; border-radius: 5px;
  background: linear-gradient(90deg, var(--film-3), var(--film-4), var(--film-3));
  background-size: 200% 100%;
  animation: shimmer 2.6s linear infinite;
}
.art__lang {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .9rem;
  border-radius: var(--radius);
  background: var(--raised);
  border: 1px solid var(--line);
  min-inline-size: 0;
}
.art__lang-mark {
  inline-size: 2.3rem; block-size: 2.3rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--wash);
  border: 1px solid rgba(124, 108, 255, .35);
  color: var(--accent-2);
}
.art__lang-body { display: flex; flex-direction: column; gap: .15rem; min-inline-size: 0; }
.art__lang-body b { font-size: .82rem; color: var(--ink); }
.art__lang-body span {
  font-family: var(--mono);
  font-size: .68rem; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.art__lang-ok { margin-inline-start: auto; color: var(--ok); font-weight: 800; }

/* Step 7 — already on the calendar */
.next-run {
  display: inline-flex; align-items: center; gap: .6rem;
  align-self: flex-start;
  padding: .55rem 1.05rem;
  border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  color: var(--accent-2);
  background: var(--wash);
  border: 1px solid rgba(124, 108, 255, .35);
}

/* ── Acts: suggestion pills and stat strips fill the quiet corners ── */
.chat-sugg { display: flex; gap: .5rem; flex-wrap: wrap; }
.chat-sugg span {
  padding: .38rem .9rem;
  border-radius: 999px;
  font-size: .74rem; font-weight: 600;
  color: var(--muted);
  background: var(--glass);
  border: 1px dashed var(--line-strong);
}
.js .act .chat-sugg span { opacity: 0; transform: translateY(6px); }
.js .act.is-live .chat-sugg span {
  animation: seqIn .4s var(--ease) forwards;
  animation-delay: calc(5.9s + var(--seq, 0) * .16s);
}
.mock-strip {
  display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  border-block-start: 1px dashed var(--line);
  padding-block-start: .85rem;
}
.mock-strip li { display: flex; flex-direction: column; gap: .1rem; font-size: .68rem; font-weight: 600; color: var(--faint); }
.mock-strip li b {
  font-size: 1.05rem; font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.js .act .mock-strip li { opacity: 0; transform: translateY(6px); }
.js .act.is-live .mock-strip li {
  animation: seqIn .4s var(--ease) forwards;
  animation-delay: calc(1.3s + var(--seq, 0) * .15s);
}
.js .act.is-live .mock--import .mock-strip li { animation-delay: calc(3.55s + var(--seq, 0) * .15s); }

/* ── v5.2, reduced motion & small screens ── */
@media (prefers-reduced-motion: reduce) {
  .js .demo-step .parse li, .js .demo-step .cal__grid li, .js .demo-step .cal__note,
  .js .demo-step .idle li, .js .demo-step .weekend li, .js .demo-step .wake li,
  .js .act .chat-sugg span, .js .act .mock-strip li {
    opacity: 1; transform: none; animation: none;
  }
  .js .demo-step .cal__grid li.is-mon { transform: none; }
  .js .demo-step .weekend li i::after { transform: none; animation: none; }
  .cal__grid li.is-next::after { animation: none; }
  .clock__rings { display: none; }
  .art__para i { animation: none; }
}

/* ═══════════════ Responsive ═══════════════ */
/* Short laptops (720p-ish): the hero must fit one frame */
@media (min-width: 1101px) and (max-height: 810px) {
  .hero__title { font-size: clamp(2rem, 1rem + 3.3vw, 3.4rem); margin-bottom: 1rem; }
  .hero__badge { margin-bottom: 1rem; }
  .hero__sub { margin-bottom: 1.6rem; }
  .hero__stage { padding-block-start: calc(var(--header-h) + 1.5rem); }
  .dash__chart .bars { block-size: 42px; }
  .dash-card { min-block-size: 84px; }
}

@media (max-width: 1280px) {
  .acts__rail { display: none; }
}

@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero__copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero__visual { max-inline-size: 40rem; margin-inline: auto; inline-size: 100%; }
  .post-layout { grid-template-columns: 1fr; }
  .post-aside { display: none; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-card--wide { grid-column: span 2; }
  .contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 62px; }

  .post-grid--3, .post-grid--archive { grid-template-columns: 1fr 1fr; }
  .mv__grid, .values__list, .feature-index__list { grid-template-columns: 1fr; }
  .stats__row { grid-template-columns: 1fr 1fr; gap: 2.2rem 1rem; }

  /* Header: with the nav overlay out of flow, push actions to the far edge */
  .header-actions { margin-inline-start: auto; }

  /* Rhythm: one consistent breathing space between sections */
  .grid-feats, .home-blog { padding-block: 4rem; }
  .stats { padding-block: 3rem; }
  .cta { padding-block: 3rem; }
  .section-head { margin-bottom: 2.2rem; }
  .story { padding-block: 3.5rem; }
  .feature-index, .mv, .values { padding-block-end: 3.5rem; }
  .archive-body { padding-block: 2.5rem 4rem; }

  /* Hero: unpinned on phones — the stage is taller than the viewport,
     so pinning would push the headline under the fixed header and clip it */
  .js .hero { block-size: auto; }
  .js .hero__stage { position: relative; block-size: auto; min-block-size: 100svh; }
  .hero__stage {
    justify-content: flex-start;
    padding-block: calc(var(--header-h) + 2.5rem) 3.5rem;
  }
  /* The claim hero hugs its content on phones: a centered claim inside a
     forced 100svh leaves half the first screen empty, and the demonstration
     should peek instead. */
  .js .hero--claim .hero__stage,
  .hero--claim .hero__stage {
    min-block-size: 0;
    align-content: start;
    padding-block: calc(var(--header-h) + 3rem) 3.5rem;
  }
  .hero__beam { display: none; }
  .js .hero__copy, .js .hero__visual { transform: none; opacity: 1; }
  .hero__scrollcue { display: none; }
  .js .manifesto { block-size: 170vh; }

  /* Acts: unpin entirely on mobile — clean, stacked storytelling.
     Absolute 100svh scenes cannot fit small screens without clipping. */
  .js .acts { block-size: auto; }
  .js .acts__stage { position: relative; block-size: auto; min-block-size: 0; }
  .acts__inner { min-block-size: 0; align-items: stretch; padding-block: 1rem 1.5rem; }
  .acts__viewport { min-block-size: 0; }
  .js .act {
    position: static;
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .js .act .act__copy > *, .js .act .act__visual { opacity: 1; transform: none; }
  .js .act .act__ghost { opacity: 1; transform: none; }
  .js .act.is-live .mock { animation: none; }
  .act { padding-block: 2.5rem; }
  .act + .act { border-block-start: 1px dashed var(--line); }

  .act { grid-template-columns: 1fr; gap: 1.6rem; align-content: center; }
  .act__visual { order: -1; max-inline-size: min(30rem, 100%); inline-size: 100%; margin-inline: auto; }
  .act__ghost { inset-block-start: -1.4rem; inset-inline-start: auto; inset-inline-end: 0; font-size: 4rem; }
  .act__kicker { margin-bottom: .8rem; }
  .act__title { font-size: clamp(1.35rem, 5vw, 1.9rem); margin-bottom: .7rem; }
  .act__text { font-size: .94rem; margin-bottom: 1rem; }
  .mock { --mock-pad: 1.1rem; }
  .mock--contract { padding: 0; }
  .mock-code { font-size: .66rem; padding: 1rem; line-height: 2; }
  .seo-scores { gap: 1rem; }
  .ring--lg { inline-size: 90px; block-size: 90px; }
  .ring--lg b { font-size: 1.3rem; }

  .nav-toggle { display: block; }
  .header-cta, .header-search { display: none; }
  .lang-switch__full { display: none; }
  .lang-switch__code { display: inline; }
  .lang-switch__item { padding: .32rem .55rem; }
  .site-nav {
    position: fixed; inset: 0;
    z-index: 240;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0; visibility: hidden;
    transition: opacity .45s var(--ease), visibility .45s;
  }
  body.nav-open .site-nav { opacity: 1; visibility: visible; }
  .nav-list { flex-direction: column; gap: .6rem; text-align: center; }
  .nav-link { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); padding: .6rem 1.4rem; }
  .nav-link::after { inset-inline: 1.4rem; inset-block-end: .35rem; }
  .nav-item { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  body.nav-open .nav-item { opacity: 1; transform: none; }
  body.nav-open .nav-item:nth-child(1) { transition-delay: .06s; }
  body.nav-open .nav-item:nth-child(2) { transition-delay: .12s; }
  body.nav-open .nav-item:nth-child(3) { transition-delay: .18s; }
  body.nav-open .nav-item:nth-child(4) { transition-delay: .24s; }
  body.nav-open .nav-item:nth-child(5) { transition-delay: .3s; }
  body.nav-open .nav-item:nth-child(6) { transition-delay: .36s; }
  .nav-dropdown {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; box-shadow: none; backdrop-filter: none;
    min-inline-size: 0; padding: 0;
  }
  .nav-dropdown__link { font-size: 1rem; }
  body.nav-open { overflow: hidden; }
  /* the reading-progress hairline sits above the header's stacking context;
     it has nothing to report while the menu owns the screen */
  body.nav-open .page-progress { opacity: 0; }
}

/* The nav folds into the menu whenever it no longer fits the header —
   measured by main.js, not guessed with a breakpoint. The seeded
   seven-item menu needs about 1,040px in English and 1,140px in Spanish,
   and an operator can always add more; below 900px the rules above fold
   it regardless. Only the nav folds: the logo, search, theme switch and
   the call to action keep their places, because above 900px they fit. */
.site-header.is-compact .header-actions { margin-inline-start: auto; }
.site-header.is-compact .nav-toggle { display: block; inline-size: 44px; block-size: 44px; }
.site-header.is-compact .site-nav {
  position: fixed; inset: 0;
  z-index: 240;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
body.nav-open .site-header.is-compact .site-nav { opacity: 1; visibility: visible; }
.site-header.is-compact .nav-list { flex-direction: column; gap: .6rem; text-align: center; }
.site-header.is-compact .nav-link { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); padding: .6rem 1.4rem; }
.site-header.is-compact .nav-link::after { inset-inline: 1.4rem; inset-block-end: .35rem; }
.site-header.is-compact .nav-item { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
body.nav-open .site-header.is-compact .nav-item { opacity: 1; transform: none; }
body.nav-open .site-header.is-compact .nav-item:nth-child(1) { transition-delay: .06s; }
body.nav-open .site-header.is-compact .nav-item:nth-child(2) { transition-delay: .12s; }
body.nav-open .site-header.is-compact .nav-item:nth-child(3) { transition-delay: .18s; }
body.nav-open .site-header.is-compact .nav-item:nth-child(4) { transition-delay: .24s; }
body.nav-open .site-header.is-compact .nav-item:nth-child(5) { transition-delay: .3s; }
body.nav-open .site-header.is-compact .nav-item:nth-child(6) { transition-delay: .36s; }
.site-header.is-compact .nav-dropdown {
  position: static;
  opacity: 1; visibility: visible; transform: none;
  background: none; border: 0; box-shadow: none; backdrop-filter: none;
  min-inline-size: 0; padding: 0;
}
.site-header.is-compact .nav-dropdown__link { font-size: 1rem; }
body.nav-compact.nav-open { overflow: hidden; }
body.nav-compact.nav-open .page-progress { opacity: 0; }

@media (max-width: 640px) {
  .post-grid--3, .post-grid--archive { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento-card--wide { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column-reverse; text-align: center; }
  .hero__actions .btn { inline-size: 100%; }
  .hero__actions { inline-size: 100%; flex-direction: column; }
  .hero-chip { display: none; }
  .cta__actions .btn { inline-size: 100%; }
  .stats__row { grid-template-columns: 1fr 1fr; }
  .search-form { flex-wrap: wrap; border-radius: var(--radius); padding: .6rem; }
  .search-form__btn { inline-size: 100%; }
  .author-box { flex-direction: column; }
  .dash__cards { grid-template-columns: 1fr 1fr; }
  .dash-card--seo { grid-column: span 2; flex-direction: row; align-items: center; }
  .dash-card--seo .dash-card__state { margin-block-start: 0; margin-inline-start: auto; }
  .brand-name { letter-spacing: .12em; font-size: .95rem; }
}

@media (max-height: 640px) {
  .act__points { display: none; }
  .act__ghost { display: none; }
}

/* ═══════════════ Reduced motion ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  .js .hero, .js .manifesto, .js .acts { block-size: auto; }
  .js .hero__stage, .js .manifesto__stage, .js .acts__stage { position: relative; block-size: auto; min-block-size: 0; }
  .js .hero__stage { min-block-size: 100svh; }
  .js .act { position: static; opacity: 1; visibility: visible; pointer-events: auto; padding-block: 3rem; }
  .js .act .act__copy > *, .js .act .act__visual { opacity: 1; transform: none; }
  .js .acts__viewport { min-block-size: 0; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .manifesto__text .w { opacity: 1; }
  .js .hero__copy, .js .hero__visual { transform: none; opacity: 1; }
  .hero__scrollcue { display: none; }
  .hero-chip { animation: none; }
}

/* ═══════════════ Print ═══════════════ */
@media print {
  .site-header, .site-footer, .cta, .page-progress, .hero__scrollcue { display: none !important; }
  body { background: #fff; color: #111; }
  .prose { color: #222; }
}

/* ═══════════════════════════════════════════════════════════════
   Fluid vertical rhythm — the demonstration scales CONTINUOUSLY
   with the viewport's height instead of jumping at a breakpoint.
   Every value is a measured clamp(): its middle term tracks svh, so
   a 14" laptop, a 24" desktop and a 27" 2K each get a proportional
   frame — same design, no cliff, no sudden shrink. Applies only to
   the pinned (desktop) mode; the stacked mobile flow keeps its own
   rhythm. The earlier fixed values remain as fallbacks for engines
   without svh support.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  /* Below ~760px of height these keep easing off, continuously, so the
     Auto Pilot window's tallest moment still fits a 590px-tall laptop;
     from ~760px up every value is what it was. */
  .demo-step {
    padding-block: clamp(.55rem, 3.2svh - .6rem, 1.6rem) clamp(.55rem, 3.2svh - .6rem, 1.5rem);
  }
  .demo-step__label { margin-block-end: clamp(.55rem, 1.2svh, .9rem); }
  .screen { gap: clamp(.4rem, 2.6svh - .5rem, 1rem); min-block-size: min(19rem, 52svh); }
  .screen__col { gap: clamp(.4rem, 2.6svh - .5rem, 1rem); }

  .instruct {
    font-size: clamp(.88rem, .62rem + .55svh, 1rem);
    padding: clamp(.85rem, 1.7svh, 1.1rem) 1.1rem;
  }
  .parse li { font-size: clamp(.78rem, .6rem + .4svh, .84rem); }
  .parse__note { padding-block-start: clamp(.5rem, 1.2svh, .8rem); }
  .jobmeta__chip { padding-block: clamp(.3rem, .8svh, .38rem); }

  .job__chain { gap: clamp(.25rem, 1.4svh - .3rem, .5rem); }
  .job__chain li {
    padding-block: clamp(.28rem, 1.9svh - .4rem, .62rem);
    font-size: clamp(.82rem, .62rem + .45svh, .9rem);
  }
  .cal__grid li { font-size: clamp(.56rem, .4rem + .35svh, .66rem); }
  .idle li { padding-block: clamp(.42rem, 1.1svh, .6rem); font-size: clamp(.74rem, .58rem + .35svh, .8rem); }
  .clock__time { font-size: clamp(2.3rem, 1rem + 4.6svh, 4rem); }
  .wake li { font-size: clamp(.72rem, .56rem + .35svh, .8rem); }

  .runline li { padding-block: clamp(.22rem, .6svh, .32rem); font-size: clamp(.68rem, .54rem + .3svh, .74rem); }
  .ws { gap: clamp(.6rem, 1.5svh, .9rem); }
  .ws__canvas { block-size: clamp(7rem, 22svh, 11.5rem); }
  .ws__doc { padding: clamp(.72rem, 1.7svh, 1rem) 1.2rem; }
  .ws__doctitle { font-size: clamp(.9rem, .7rem + .45svh, 1rem); margin-block-end: clamp(.3rem, .8svh, .45rem); }
  .ws__line { font-size: clamp(.78rem, .6rem + .4svh, .86rem); }

  .screen--article { gap: clamp(.4rem, 1svh, .6rem); }
  .art__title { font-size: min(clamp(1.2rem, 1rem + 1.1vw, 1.5rem), clamp(1.05rem, .68rem + 1.6svh, 1.5rem)); }
  .art__meta { font-size: clamp(.7rem, .55rem + .35svh, .78rem); }
  .art__cover { aspect-ratio: auto; block-size: clamp(5.5rem, 49svh - 12.4rem, 12.5rem); }
  .art__sum { padding: clamp(.6rem, 1.5svh, .85rem) 1.05rem; }
  .art__sum p { font-size: clamp(.74rem, .58rem + .35svh, .84rem); }
  .art__para { gap: clamp(.3rem, .8svh, .5rem); }
  .art__para i { block-size: clamp(5px, .9svh, 7px); }
  .art__author, .art__lang { padding-block: clamp(.4rem, 1.1svh, .6rem); }
  .art__avatar, .art__lang-mark { inline-size: clamp(2rem, 4.6svh, 2.3rem); block-size: clamp(2rem, 4.6svh, 2.3rem); }

  .run-stats span { padding-block: clamp(.26rem, .7svh, .35rem); font-size: clamp(.7rem, .56rem + .3svh, .74rem); }
  .next-run { padding-block: clamp(.38rem, 1svh, .55rem); font-size: clamp(.74rem, .58rem + .35svh, .8rem); }

  /* The acts breathe with the same air: on short viewports the scene
     mock's floor lowers proportionally instead of forcing overflow. */
  .act__visual > .mock { min-block-size: min(28.5rem, 58svh); }

  /* The acts' own rhythm follows the same rule: exactly as designed from
     764px of height up, easing off continuously below it, so every act
     still sits between the header and the bottom of a short laptop. */
  .act__kicker { margin-bottom: clamp(.5rem, calc(1rem + (100svh - 764px) * .05), 1rem); }
  .act__title { margin-bottom: clamp(.55rem, calc(1.1rem + (100svh - 764px) * .05), 1.1rem); }
  .act__text { margin-bottom: clamp(.7rem, calc(1.4rem + (100svh - 764px) * .08), 1.4rem); }
  .mock--audio {
    gap: clamp(.7rem, calc(1.2rem + (100svh - 764px) * .042), 1.2rem);
    padding-block-end: clamp(1.2rem, calc(2rem + (100svh - 764px) * .073), 2rem);
  }
}

/* Only below ~700px of height (11" class, or a heavily docked browser)
   does the purely decorative skeleton paragraph step aside — content
   prioritisation, not shrinking. */
@media (min-width: 901px) and (max-height: 700px) {
  .art__para { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Publishers — NEW in Ariana 1.67: an article can credit more than
   one person. Rendered as a compact row of chips under the author
   box; `{{#if post.publishers}}` keeps it absent on single-author
   articles.
   ═══════════════════════════════════════════════════════════════ */
.publishers { margin-block-start: 1.2rem; }
.publishers__label {
  font-size: .66rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2);
  margin-block-end: .7rem;
}
.publishers__list { display: flex; flex-wrap: wrap; gap: .6rem; }
.publishers__link {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .95rem .5rem .5rem;
  border-radius: 999px;
  background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  border: 1px solid var(--line);
  transition: transform .45s var(--ease-spring), border-color .4s, box-shadow .4s;
}
[dir='rtl'] .publishers__link { padding: .5rem .5rem .5rem .95rem; }
.publishers__link:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.publishers__avatar {
  inline-size: 2.25rem; block-size: 2.25rem; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line-strong);
}
.publishers__body { display: flex; flex-direction: column; gap: .1rem; min-inline-size: 0; }
.publishers__name { font-size: .86rem; font-weight: 700; color: var(--ink); }
.publishers__job { font-size: .7rem; color: var(--faint); }
:root[data-theme="light"] .publishers__link {
  box-shadow: 0 1px 2px rgba(43, 29, 94, .05), 0 8px 24px -18px rgba(43, 29, 94, .35);
}

/* ═══════════════════════════════════════════════════════════════
   SKILL PAGES — the theme hosting a feature Ariana executes.

   A skill hands the theme a finished block of HTML built from the
   .sk-* family (card, button, field, table, notice, error) plus its
   own namespaced classes. Ariana's neutral shell is not used when a
   theme claims the page, so EVERY .sk-* rule the shell provided has
   to be re-provided here — in Ariana's own palette this time.

   Specificity is deliberate: the skill's package ships a fallback
   stylesheet that is linked from INSIDE the body, i.e. after this
   file. A bare `.bw-hero__title` there would win on source order,
   so every rule below is scoped under `.page-skill` and outranks it
   without a single !important.
   ═══════════════════════════════════════════════════════════════ */
.skill-stage {
  position: relative;
  padding-block: calc(var(--header-h) + var(--sec)) var(--sec);
  background: radial-gradient(110% 80% at 50% 0%, var(--bg-2), var(--bg) 75%);
  overflow: clip;
}
.skill-stage__inner { position: relative; z-index: 2; }
.skill-stage__title {
  font-size: clamp(2rem, 1.1rem + 3.6vw, 3.4rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  text-wrap: balance;
  margin-block-end: 1.6rem;
}

.skill-rail {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  font-size: .78rem; font-weight: 600;
  color: var(--faint);
  margin-block-end: clamp(1.4rem, 3vw, 2.2rem);
}
.skill-rail__link { color: var(--muted); transition: color .3s; }
.skill-rail__link:hover { color: var(--accent-2); }
.skill-rail__sep { color: var(--line-strong); }

/* ── The shared .sk-* surface, in Ariana's palette ── */
.page-skill .sk-card {
  background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
}
:root[data-theme="light"] .page-skill .sk-card {
  box-shadow: 0 1px 2px rgba(43, 29, 94, .05), 0 18px 44px -30px rgba(43, 29, 94, .4);
}

.page-skill .sk-button,
.page-skill button[type="submit"] {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit; font-weight: 700; font-size: .95rem;
  letter-spacing: -.01em;
  background: var(--grad);
  color: var(--on-accent);
  box-shadow: 0 12px 32px -14px rgba(124, 108, 255, .8);
  cursor: pointer;
  transition: transform .45s var(--ease-spring), box-shadow .35s var(--ease);
}
.page-skill .sk-button:hover,
.page-skill button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -14px rgba(124, 108, 255, .9); }
.page-skill .sk-button:active,
.page-skill button[type="submit"]:active { transform: translateY(0) scale(.98); }

.page-skill .sk-field { display: block; min-inline-size: 0; }
/* ── ONE CONTROL SYSTEM ──────────────────────────────────────────────
   Every control on a skill page is the same height, the same type size
   and the same corner. Measured before this existed: input 50px,
   select 51px, button 53px, controls 16px and buttons 15.2px — three
   heights and two sizes in one row, which is what made the forms look
   assembled rather than designed. */
.page-skill {
  --sk-h: 3.25rem;          /* 52px — clears the 44px touch minimum */
  --sk-px: 1.05rem;
  --sk-font: 1rem;
  /* ONE gutter for every grid on the page. Two grids with different gaps
     put their column edges a few pixels apart, which is exactly the kind
     of near-miss that reads as sloppy without being nameable. */
  --sk-gap: clamp(1.1rem, 2vw, 1.75rem);
}

/* A field is a column whose control sits at the BOTTOM, so a label that
   wraps to two lines grows upward and every control in the row still
   shares one baseline. */
.page-skill .sk-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-inline-size: 0;
}

.page-skill .sk-field input,
.page-skill .sk-field select,
.page-skill .sk-field textarea,
.page-skill .bw-input {
  inline-size: 100%;
  max-inline-size: 34rem;
  block-size: var(--sk-h);
  padding: 0 var(--sk-px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--sk-font);
  line-height: 1.4;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.page-skill .sk-field textarea {
  max-inline-size: 46rem;
  block-size: auto;
  min-block-size: 7.5rem;
  padding: .85rem var(--sk-px);
  resize: vertical;
}
.page-skill .sk-field input::placeholder,
.page-skill .bw-input::placeholder { color: var(--faint); }

/* THE SELECT.
   It had no rules at all: the browser drew its own arrow hard against
   the border, and the box came out a pixel taller than the inputs beside
   it. Suppressing the native control and drawing the chevron ourselves is
   the only way to own that corner. The padding-inline-end reserves the
   chevron's lane so a long option can never run underneath it. */
.page-skill .sk-field select {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 2.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A49DCD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sk-px) center;
  background-size: 1.05rem 1.05rem;
  cursor: pointer;
}
:root[data-theme="light"] .page-skill .sk-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C4470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
[dir='rtl'] .page-skill .sk-field select {
  padding-inline-end: 2.9rem;
  background-position: left var(--sk-px) center;
}
.page-skill .sk-field select::-ms-expand { display: none; }

.page-skill .sk-field input:hover,
.page-skill .sk-field select:hover,
.page-skill .sk-field textarea:hover,
.page-skill .bw-input:hover { border-color: var(--accent-3); }

.page-skill .sk-field input:focus-visible,
.page-skill .sk-field select:focus-visible,
.page-skill .sk-field textarea:focus-visible,
.page-skill .bw-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

/* The button matches the controls exactly, so a form row is one band. */
.page-skill .sk-button,
.page-skill button[type="submit"] {
  block-size: var(--sk-h);
  padding-inline: 1.75rem;
  font-size: var(--sk-font);
  white-space: nowrap;
}

.page-skill .bw-field--wide { grid-column: 1 / -1; }

/* In a grid form the cell already measures the control, so the backstop cap
   would only leave dead space inside each cell. */
.page-skill .bw-refine__form input,
.page-skill .bw-refine__form select,
.page-skill .bw-quote__form input,
.page-skill .bw-quote__form select,
.page-skill .bw-quote__form textarea { max-inline-size: none; }

.page-skill .bw-field__label {
  display: block;
  font-size: .9rem; font-weight: 600;
  letter-spacing: normal; text-transform: none;
  line-height: 1.45;
  color: var(--muted);
  margin-block-end: .5rem;
}

.page-skill .sk-table { inline-size: 100%; border-collapse: collapse; font-size: .95rem; }
.page-skill .sk-table th,
.page-skill .sk-table td {
  text-align: start;
  padding: .75rem .85rem;
  border-block-end: 1px solid var(--line-soft);
}
.page-skill .sk-table thead th {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
}
.page-skill .sk-table tbody th { font-weight: 600; color: var(--ink); }
.page-skill .sk-table tbody td { color: var(--muted); font-variant-numeric: tabular-nums; }
/* A scored row states its own verdict. The figure carries the colour and
   the row carries a trace of it, so the eye finds the weak category
   without reading four numbers. */
.page-skill .sk-table tbody tr[data-band] td { color: var(--band); font-weight: 700; }
.page-skill .sk-table tbody tr[data-band] th {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--band) 55%, transparent);
}
[dir='rtl'] .page-skill .sk-table tbody tr[data-band] th {
  box-shadow: inset -3px 0 0 color-mix(in srgb, var(--band) 55%, transparent);
}
.page-skill .sk-table tr:last-child th,
.page-skill .sk-table tr:last-child td { border-block-end: 0; }

.page-skill .sk-notice,
.page-skill .sk-error {
  padding: .85rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: .92rem; line-height: 1.6;
}
.page-skill .sk-notice { border-color: rgba(124, 108, 255, .35); background: var(--wash); color: var(--ink); }
.page-skill .sk-error  { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--ink); }

/* ── BuildWorth: the calculator wearing Ariana's clothes ── */
.page-skill .bw { max-inline-size: none; }

.page-skill .bw-brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2);
  opacity: 1;
  margin: 0 0 1.1rem;
}
.page-skill .bw-brand::before {
  content: ''; inline-size: 2rem; block-size: 2px;
  background: var(--grad); border-radius: 2px;
}

.page-skill .bw-hero__title {
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.5rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -.03em;
  text-wrap: balance;
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
}
.page-skill .bw-hero__text {
  color: var(--muted);
  font-size: 1.08rem; line-height: 1.7;
  max-inline-size: 38rem;
  opacity: 1;
  margin: 0 0 clamp(1.6rem, 3vw, 2.2rem);
}
.page-skill .bw-h2 {
  font-size: clamp(1.15rem, .9rem + .7vw, 1.5rem);
  font-weight: 800; letter-spacing: -.02em;
  margin: clamp(2rem, 4vw, 2.9rem) 0 1rem;
}
.page-skill .bw-fine { color: var(--faint); font-size: .84rem; line-height: 1.65; opacity: 1; margin: .5rem 0; }
.page-skill .bw-textlink { color: var(--accent-2); font-weight: 600; text-decoration: none; border-block-end: 1px solid var(--ring); }
.page-skill .bw-textlink:hover { border-block-end-color: var(--accent); }
.page-skill .bw-alert { margin: 0 0 1.2rem; }
.page-skill .bw--prose p { color: var(--muted); line-height: 1.8; max-inline-size: 44rem; }
.page-skill .bw-list { color: var(--muted); margin: .7rem 0 1.2rem 1.2rem; }
.page-skill .bw-list li { margin-block: .35rem; }

/* The URL form: one wide field and one button, side by side until they
   genuinely stop fitting — the field carries its own min-inline-size so
   the flex wrap happens at the field's limit, not at a guessed breakpoint. */
/* ── THE INTRO: form and explanation side by side ──────────────────
   Measured before this existed: every block on the page ran 56 → 1384
   except the form card, which was capped at 58rem and stopped at 984 —
   400px short of the cards beneath it. Capping a block to stop it
   stretching is what made the page ragged. The answer is a column that
   is naturally the right width, not a lid on a full-width one. */
.page-skill .bw-intro { display: grid; gap: var(--sk-gap); }

@media (min-width: 1080px) {
  .page-skill .bw-intro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: var(--sk-gap);
  }
  .page-skill .bw-intro__side {
    padding: clamp(1.2rem, 2.2vw, 1.7rem);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  }
  .page-skill .bw-intro__side .bw-h2 { margin-block-start: 0; }
  .page-skill .bw-intro__side .bw-how__list { grid-template-columns: minmax(0, 1fr); }
}

/* ── THE URL BAR ────────────────────────────────────────────────────────
   One pill with the field and the button inside it: the button is the
   bar's own end, so the two read as one object at one height, not two
   controls side by side (the old row put a 52px field beside a pill of a
   different weight). The label and the field are grid items of the form
   itself (the label is display:contents), so the pill is drawn once behind
   both. The card carries a slow light round its edge on the same 9s clock
   as the scene beside it, and the bar lights in the data tone while the
   visitor types.
   The old mobile bug lived here: the skill turns the form into a column
   under 640px, but this rule's align-items:flex-end still applied, so the
   field shrank to its content and sat against the right edge. A grid has
   no such trap, and on a narrow column the button simply drops below the
   bar at full width — a reflow at the form's own width, never a smaller
   font. */
@property --bw-edge { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.page-skill .bw-hero { container: bwhero / inline-size; }
.page-skill .bw-form {
  --bw-bar: 3.75rem;
  --bw-lit: var(--tone-data, #22d3ee);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label label" "field go";
  align-items: center;
  row-gap: .75rem;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid transparent;
  border-radius: calc(var(--radius) + .25rem);
  background:
    radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%) padding-box,
    linear-gradient(170deg, var(--film-2), var(--film-1) 60%) padding-box,
    linear-gradient(var(--card), var(--card)) padding-box,
    conic-gradient(from var(--bw-edge),
      color-mix(in srgb, var(--accent) 28%, transparent),
      color-mix(in srgb, var(--bw-lit) 75%, transparent) 10%,
      color-mix(in srgb, var(--accent) 45%, transparent) 20%,
      color-mix(in srgb, var(--accent) 16%, transparent) 45%,
      color-mix(in srgb, var(--accent) 16%, transparent) 80%,
      color-mix(in srgb, var(--accent) 28%, transparent)) border-box;
}
@media (prefers-reduced-motion: no-preference) {
  .page-skill .bw-form { animation: bwEdge 9s linear infinite; }
}
@keyframes bwEdge { to { --bw-edge: 360deg; } }

.page-skill .bw-form .bw-field { display: contents; }
.page-skill .bw-form .bw-field__label {
  grid-area: label;
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0;
  font-size: .84rem; font-weight: 600; letter-spacing: .01em;
  color: var(--muted);
}
/* the live dot: the analyser is ready */
.page-skill .bw-form .bw-field__label::before {
  content: ''; flex: none;
  inline-size: .5rem; block-size: .5rem; border-radius: 50%;
  background: var(--bw-lit);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bw-lit) 22%, transparent), 0 0 12px var(--bw-lit);
}
@media (prefers-reduced-motion: no-preference) {
  .page-skill .bw-form .bw-field__label::before { animation: bwLive 2.25s ease-in-out infinite; }
}
@keyframes bwLive { 50% { opacity: .5; box-shadow: 0 0 0 6px transparent, 0 0 4px var(--bw-lit); } }

/* the pill, behind the field and the button */
.page-skill .bw-form::before {
  content: '';
  grid-row: 2; grid-column: 1 / -1;
  align-self: stretch;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 -14px 26px -20px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: border-color .25s var(--ease), box-shadow .3s var(--ease);
}
.page-skill .bw-form:hover::before { border-color: var(--accent-3); }
.page-skill .bw-form:focus-within::before {
  border-color: color-mix(in srgb, var(--bw-lit) 70%, var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bw-lit) 18%, transparent), 0 0 30px -6px color-mix(in srgb, var(--bw-lit) 50%, transparent);
}
.page-skill .bw-form .bw-input {
  grid-area: field; position: relative; z-index: 1;
  inline-size: 100%; max-inline-size: none; min-inline-size: 0;
  block-size: var(--bw-bar);
  padding-inline: 3.15rem 1rem;
  border: 0; border-radius: 999px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A49DCD' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E") no-repeat 1.25rem center / 1.2rem;
  font-size: 1.05rem;
}
.page-skill .bw-form .bw-input:hover { border-color: transparent; }
/* the bar itself shows focus (the 4px ring above), so the field needs no second one */
.page-skill .bw-form .bw-input:focus-visible { outline: none; box-shadow: none; }
/* A web address reads left to right in every language. On a right-to-left
   page the bar mirrors — the globe and the text start at the right — but the
   address keeps its own direction, so its slashes never jumble while typed. */
[dir="rtl"] .page-skill .bw-form .bw-input {
  direction: ltr; text-align: right;
  padding-left: 1rem; padding-right: 3.15rem;
  background-position: right 1.25rem center;
}
.page-skill .bw-form .bw-submit {
  grid-area: go; position: relative; z-index: 1;
  inline-size: auto;
  block-size: calc(var(--bw-bar) - .75rem);
  margin: 0; margin-inline-end: .375rem;   /* the inset sits at the bar's end in either direction */
  padding-inline: 1.45rem 1.25rem;
  gap: .55rem;
}
.page-skill .bw-form .bw-submit::after {
  content: ''; flex: none;
  inline-size: 1.05rem; block-size: 1.05rem;
  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='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%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.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .4s var(--ease-spring);
}
/* inside the bar the button brightens rather than jumping out of it */
.page-skill .bw-form .bw-submit:hover { transform: none; filter: brightness(1.08); }
.page-skill .bw-form .bw-submit:hover::after { transform: translateX(3px); }
.page-skill .bw-form .bw-submit:focus-visible { outline: 2px solid var(--bw-lit); outline-offset: 3px; }
@container bwhero (max-width: 32rem) {
  .page-skill .bw-form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "field" "go"; }
  .page-skill .bw-form::before { grid-column: 1; }
  .page-skill .bw-form .bw-submit { inline-size: 100%; block-size: var(--sk-h); margin: .1rem 0 0; }
}
:root[data-theme="light"] .page-skill .bw-form::before {
  background: #fff; border-color: rgba(43, 29, 94, .16);
  box-shadow: inset 0 1px 2px rgba(43, 29, 94, .06);
}
:root[data-theme="light"] .page-skill .bw-form .bw-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C4470' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
}

.page-skill .bw-quota { font-weight: 700; color: var(--ink); margin: 1.2rem 0 .2rem; }

.page-skill .bw-recent__list {
  list-style: none; padding: 0;
  display: grid;
  gap: var(--sk-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1079px) {
  .page-skill .bw-recent__list { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
}
.page-skill .bw-recent__item { padding: 0; }
.page-skill .bw-recent__item a {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem 1.15rem;
  border-radius: inherit;
  transition: transform .4s var(--ease-spring), border-color .4s;
}
.page-skill .bw-recent__item a:hover { transform: translateY(-2px); }
.page-skill .bw-recent__item b { color: var(--ink); font-size: .98rem; overflow-wrap: anywhere; }
.page-skill .bw-recent__item span { color: var(--faint); font-size: .8rem; }

/* The skill ships this as an <ol>, but a grid strips the markers off the
   side of the box, so the step number is drawn back in as a counter — the
   order is the whole point of the list. */
.page-skill .bw-how__list {
  display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  list-style: none;
  padding-inline-start: 0;
  counter-reset: bw-step;
}
.page-skill .bw-how__list li {
  counter-increment: bw-step;
  color: var(--muted);
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
}
[data-tone].bw-how .bw-how__list li,
.page-skill [data-tone] .bw-how__list li {
  border-block-start-color: color-mix(in srgb, var(--tone) 34%, var(--line));
}
.page-skill .bw-how__list li::before {
  content: counter(bw-step, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  color: var(--tone-ink);
  margin-block-end: .6rem;
}
.page-skill .bw-how__list b { display: block; color: var(--ink); font-size: 1.02rem; font-weight: 700; margin-block-end: .35rem; }
.page-skill .bw-how__list span { font-size: .92rem; line-height: 1.65; opacity: 1; }
.page-skill .bw-how > p { margin-block-start: 1.6rem; }

/* ── The calculator's scene ─────────────────────────────────────────────
   Ali's artwork IS the side column: no card around it. On the dark page the
   page is the stage — the artwork arrives lifted off its own ground, so the
   page's background, grid and aurora run straight through it with no seam —
   and on a wide screen the scene rises
   into the breadcrumb band and runs on into the right gutter, as the design
   composes it. A percentage margin on a grid item resolves against its
   column's width, and the scene's height is proportional to that width, so
   the lift scales with it. */
@media (min-width: 1080px) {
  .page-skill .bw-intro__side:has(.bw-scene) {
    padding: 0; border: 0; background: none; box-shadow: none;
    /* rise out of the text column's rhythm to sit just under the header,
       clear of its button's glow: the lift is exactly the rail band above */
    margin-block-start: calc(-1 * (var(--bw-st) + var(--bw-rail) + var(--bw-rg) - .875rem));
    margin-inline-end: calc(-1 * var(--gutter));
  }
  /* In daylight the scene keeps its night panel and stays in its column. */
  :root[data-theme="light"] .page-skill .bw-intro__side:has(.bw-scene) { margin-block-start: 0; margin-inline-end: 0; }
}
/* The scene's glow reaches under the form's edge and the breadcrumb, never
   over them — and the form's shadow stops before the picture's edge. */
.page-skill .bw-intro__main { position: relative; z-index: 1; }
.page-skill .skill-rail { position: relative; z-index: 2; }
.page-skill .bw-intro .bw-form { box-shadow: 0 24px 50px -28px rgba(5, 3, 18, .9); }
.page-skill .bw-scene { border-radius: 0; overflow: visible; }
:root:not([data-theme="light"]) .page-skill .bw-scene { background: none; }
:root[data-theme="light"] .page-skill .bw-scene {
  /* square: a rounded corner would cut his corner pixels */
  border-radius: 0; overflow: hidden; overflow: clip;   /* the skill's own ground panel: his picture exactly */
  box-shadow: 0 1px 2px rgba(43, 29, 94, .06), 0 24px 60px -34px rgba(43, 29, 94, .55);
}

/* ── The calculator's first screen: nothing to scroll for ──────────────
   Measured on a 14" MacBook (1512 x 764 viewport): the text column ran to
   765px and the scene, with its steps, to 916px, so both needed a scroll.
   The screen's HEIGHT now sets the rhythm, fluidly (svh terms inside
   clamp(), no breakpoint): the space above the rail, the rail's gap, the
   title, the gaps between blocks. The scene takes the height that is left
   under the header and keeps its own proportions, so its three steps are
   always on the first screen; on a tall screen none of this binds. */
.page-skill .skill-stage:has(.bw-intro) {
  --bw-st: clamp(.75rem, 4.4vh, var(--sec));
  --bw-st: clamp(.75rem, 4.4svh, var(--sec));
  --bw-rail: 1.25rem;
  --bw-rg: clamp(.8rem, 2.8vh, 2.2rem);
  --bw-rg: clamp(.8rem, 2.8svh, 2.2rem);
  padding-block-start: calc(var(--header-h) + var(--bw-st));
}
.page-skill .skill-stage:has(.bw-intro) .skill-rail { block-size: var(--bw-rail); margin-block-end: var(--bw-rg); }
.page-skill .bw-intro .bw-brand { margin-block-end: clamp(.55rem, 1.8svh, 1.1rem); }
.page-skill .bw-intro .bw-hero__title { font-size: clamp(2rem, min(1.1rem + 3.4vw, 6.9svh), 3.5rem); margin-block-end: clamp(.5rem, 1.5svh, 1rem); }
.page-skill .bw-intro .bw-hero__text { margin-block-end: clamp(1rem, 3svh, 2.2rem); }
.page-skill .bw-intro .bw-form { padding: clamp(.9rem, min(2vw, 2.1svh), 1.5rem); }
.page-skill .bw-intro .bw-quota { margin-block-start: clamp(.7rem, 2svh, 1.2rem); }
.page-skill .bw-intro .bw-fine { margin-block: clamp(.2rem, .7svh, .5rem); line-height: 1.55; }
.page-skill .bw-intro .bw-fine--link { margin-block-start: clamp(.5rem, 1.4svh, .9rem); }
.page-skill .bw-intro__side:has(.bw-scene) { --bw-scene-top: calc(var(--header-h) + 1rem); }
.page-skill .bw-intro__side .bw-scene {
  inline-size: min(100%, calc((100vh - var(--bw-scene-top) - 1rem) * 770 / 862));
  inline-size: min(100%, calc((100svh - var(--bw-scene-top) - 1rem) * 770 / 862));
  margin-inline: auto;
}
/* Not in English the picture is 712 tall (it stops above its own steps) and
   the translated steps follow it, so the height left under the header is
   shared between the two: 10rem is the picture's 1.1rem gap plus the list
   (a 3.5rem circle, the number, a two-line title), measured at 157px. */
.page-skill .bw-intro__side .bw-how--own-steps .bw-scene {
  inline-size: min(100%, calc((100vh - var(--bw-scene-top) - 1rem - 10rem) * 770 / 712));
  inline-size: min(100%, calc((100svh - var(--bw-scene-top) - 1rem - 10rem) * 770 / 712));
}
@media (min-width: 1080px) {
  .page-skill .bw-intro__side:has(.bw-scene) { --bw-scene-top: calc(var(--header-h) + .875rem); }
  :root[data-theme="light"] .page-skill .bw-intro__side:has(.bw-scene) {
    --bw-scene-top: calc(var(--header-h) + var(--bw-st) + var(--bw-rail) + var(--bw-rg));
  }
}
.page-skill .bw-steps { color: var(--ink); }
.page-skill .bw-steps__icon { border-color: color-mix(in srgb, var(--ink) 20%, transparent); }
.page-skill .bw-steps__title { color: var(--ink); }

/* ── The report ── */
.page-skill .bw-report__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  color: var(--faint); font-size: .84rem;
  opacity: 1;
  margin-block-end: clamp(1.4rem, 3vw, 2rem);
}
.page-skill .bw-url { color: var(--muted); font-family: var(--mono); font-size: .8rem; word-break: break-all; }

.page-skill .bw-running { padding: 1.4rem 1.5rem; }
.page-skill .bw-running__label { font-weight: 700; color: var(--ink); margin: 0 0 .9rem; }
.page-skill .bw-running__bar {
  display: block; block-size: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--tone-data) 14%, var(--film-3));
  overflow: hidden;
}
.page-skill .bw-running__bar i {
  background: linear-gradient(90deg, var(--tone-data), var(--accent-2));
}
@media (prefers-reduced-motion: reduce) {
  .page-skill .bw-running__bar i { animation: none; margin-left: 0; inline-size: 100%; opacity: .55; }
}

.page-skill .bw-summary {
  display: grid;
  gap: var(--sk-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr));
  margin-block: clamp(1.4rem, 3vw, 2rem);
}
.page-skill .bw-stat { padding: 1.35rem 1.5rem; }
.page-skill .bw-stat__label {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  opacity: 1;
  margin: 0 0 .7rem;
}
.page-skill .bw-stat__value {
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.15rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  background: var(--tone-grad, var(--grad));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin: 0 0 .4rem;
}
/* A SCORE is not a subject, it is a measurement, so it takes the band the
   number earned rather than any section colour — and flat, because a
   gradient across three glyphs makes the last digit look under-rendered.
   Reported by the skill (BuildWorth ≥ 1.5.0); an older package simply
   emits no attribute and the tile stays on the brand gradient. */
.page-skill .bw-stat[data-band] .bw-stat__value {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--band);
}
.page-skill .bw-stat[data-band] .bw-stat__value small { color: var(--muted); }

/* The tile itself picks up the faintest wash of whatever it is about, so
   the three read as three DIFFERENT answers at a glance rather than as
   three identical cards the reader has to start reading to tell apart. */
.page-skill .bw-stat[data-tone],
.page-skill .bw-stat[data-band] {
  border-color: color-mix(in srgb, var(--band, var(--tone)) 26%, var(--line));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--band, var(--tone)) 7%, transparent), transparent 62%),
    var(--card);
}
.page-skill .bw-stat[data-tone] .bw-stat__label,
.page-skill .bw-stat[data-band] .bw-stat__label { color: var(--band, var(--tone-ink)); }
.page-skill .bw-stat__value small { font-size: .5em; font-weight: 700; }
/* Withheld is not a number: it must not wear the number's gradient, or an
   honest "we don't publish a rate yet" reads as a headline figure. */
.page-skill .bw-stat__value--muted {
  font-size: 1.02rem; font-weight: 600; line-height: 1.5;
  background: none; -webkit-text-fill-color: currentColor;
  color: var(--muted);
}

.page-skill .bw-fix__list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.page-skill .bw-fix__item { padding: 1.25rem 1.4rem; }
.page-skill .bw-fix__sev {
  font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--band, var(--accent-2));
  opacity: 1;
  margin: 0 0 .5rem;
}
.page-skill .bw-fix__title { font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .5rem; }
/* Every paragraph in the card is body text — EXCEPT the severity line,
   which is the one thing in it that carries a colour. `.bw-fix__item p`
   is (0,2,1) and `.bw-fix__sev` is (0,2,0), so without this exclusion the
   generic rule won and the label rendered muted grey while the card's
   edge beside it was red. Caught by measuring the composited pixel, not
   by looking: at that size a grey label reads as "styled" either way. */
.page-skill .bw-fix__item p:not(.bw-fix__sev):not(.bw-fix__action) { color: var(--muted); }
.page-skill .bw-fix__action {
  color: var(--ink); font-weight: 600;
  margin-block-start: .8rem;
  padding-inline-start: .9rem;
  border-inline-start: 2px solid var(--band, var(--accent));
}
/* A high-severity finding is edged in its own colour. Three identical
   cards told the reader nothing about which to read first, which is the
   one thing a list called "Fix these first" has to communicate. */
.page-skill .bw-fix__item[data-band] {
  border-inline-start: 3px solid color-mix(in srgb, var(--band) 70%, transparent);
}

.page-skill .bw-cats,
.page-skill .bw-breakdown { overflow-x: auto; }

/* ── THE DIAGNOSIS, AS ONE BODY ──────────────────────────────────────
   The report used to be a single column of full-width bands inside a
   90rem page: the categories table was capped and stranded in the left
   third with two thirds of empty beside it, and the whole page was very
   tall and very loose. Findings and the cost breakdown are what a
   reader works through; the four category scores are a reference they
   want to keep in view while doing it. So: one main column and one
   sticky rail, and the width finally does something. */
.page-skill .bw-layout { display: grid; gap: var(--sk-gap); }

@media (min-width: 1080px) {
  .page-skill .bw-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--sk-gap);
  }
  .page-skill .bw-layout__side {
    position: sticky;
    /* Clear of the fixed header, and never taller than the viewport. */
    inset-block-start: calc(var(--header-h) + 1.2rem);
    max-block-size: calc(100svh - var(--header-h) - 2.4rem);
    overflow: auto;
  }
  /* In the rail the section is a panel, not a bare band. */
  .page-skill .bw-layout__side .bw-cats {
    padding: clamp(1.1rem, 2vw, 1.5rem);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  }
  .page-skill .bw-layout__side .bw-h2 { margin-block-start: 0; }
}

.page-skill .bw-layout__main > :first-child > .bw-h2,
.page-skill .bw-layout__side > :first-child > .bw-h2 { margin-block-start: 0; }

/* Inside the rail the score column is narrow; in the main column the
   breakdown keeps a measured width so a three-column table never spreads
   its last cell an inch away from the word it belongs to. */
.page-skill .bw-cats .bw-table td { inline-size: 5rem; text-align: end; font-weight: 700; color: var(--ink); }
/* No cap needed any more: the main column IS the measure. */
.page-skill .bw-breakdown .bw-table td:last-child,
.page-skill .bw-breakdown .bw-table th:last-child { inline-size: 9rem; }
.page-skill .bw-breakdown .bw-table td:nth-child(2),
.page-skill .bw-breakdown .bw-table th:nth-child(2) { inline-size: 8rem; }

.page-skill .bw-refine,
.page-skill .bw-quote { padding: clamp(1.25rem, 2.4vw, 1.75rem); margin-block: clamp(1.4rem, 3vw, 2rem); }
.page-skill .bw-refine .bw-h2,
.page-skill .bw-quote .bw-h2 { margin-block-start: 0; }
/* EXPLICIT GRIDS, NOT auto-fit.
   `repeat(auto-fit, …)` with `align-items: end` put a tall textarea and two
   short inputs on the same row: the textarea floated above the name and
   e-mail fields, the submit button sat at a third height, and the helper
   sentence ran under one field only. A form is a layout, not a flow —
   these say where every control goes. */
.page-skill .bw-refine__form,
.page-skill .bw-quote__form {
  display: grid;
  gap: var(--sk-gap);
  align-items: start;
  margin-block-start: 1.4rem;
}

/* Five short questions, then the button on its own line. `align-items:
   stretch` (the default) plus the flex-end field above is what holds the
   controls on one baseline when a label wraps. */
.page-skill .bw-refine__form {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}
.page-skill .bw-refine__form button { grid-column: 1 / -1; justify-self: start; }

/* Name and e-mail share a row; the note spans it; the button follows.
   Positional selectors are NOT used here: the CSRF hidden input is the
   form's first child, so nth-child(3) hit the e-mail field and stretched it
   across the whole card. The note carries .bw-field--wide instead. */
.page-skill .bw-quote__form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
/* Past a very wide viewport a two-column form makes each field enormous, so
   the answer is a third column, not a lid — the fields stay a sane size and
   the card is still filled edge to edge. */
@media (min-width: 1800px) {
  .page-skill .bw-quote__form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.page-skill .bw-quote__form button { grid-column: 1 / -1; justify-self: start; }

@media (max-width: 1100px) {
  .page-skill .bw-refine__form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .page-skill .bw-refine__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .page-skill .bw-refine__form,
  .page-skill .bw-quote__form { grid-template-columns: minmax(0, 1fr); }
}
.page-skill .bw-quote p { color: var(--muted); }

.page-skill .bw-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: .7rem;
  color: var(--line-strong);
  margin-block: clamp(2rem, 4vw, 3rem) 0;
}

/* ── The call-to-action the skill exports as a token, printed by the
   home page. It lives OUTSIDE .page-skill, so it is scoped by its own
   class instead — the skill's fallback rule for it is a plain border. ── */
.bw-cta {
  position: relative;
  display: block;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .5s var(--ease-spring), border-color .4s;
}
.bw-cta::before {
  content: '';
  position: absolute; inset-block-start: -60%; inset-inline-end: -20%;
  inline-size: 26rem; block-size: 26rem;
  background: radial-gradient(circle, var(--aurora-1), transparent 62%);
  filter: blur(10px);
  pointer-events: none;
}
.bw-cta:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.bw-cta > * { position: relative; }
.bw-cta__label {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2);
  opacity: 1;
}
.bw-cta__label::before {
  content: ''; inline-size: 1.6rem; block-size: 2px;
  background: var(--grad); border-radius: 2px;
}
.bw-cta__title {
  display: block;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.15;
  color: var(--ink);
  margin-block: .7rem .5rem;
  text-wrap: balance;
}
.bw-cta__text { display: block; color: var(--muted); max-inline-size: 34rem; opacity: 1; }
.bw-cta__go {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; color: var(--accent-2);
  margin-block-start: 1.1rem;
}
.bw-cta__go::after {
  content: '→';
  transition: transform .4s var(--ease-spring);
}
[dir='rtl'] .bw-cta__go::after { content: '←'; }
.bw-cta:hover .bw-cta__go::after { transform: translateX(.25rem); }
[dir='rtl'] .bw-cta:hover .bw-cta__go::after { transform: translateX(-.25rem); }

/* An installed skill's nav item carries a small flag, because it is the one
   thing in the header a visitor gets without paying or signing up. */
.nav-flag {
  margin-inline-start: .4rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone-value) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone-value) 40%, transparent);
  color: var(--tone-value);
  font-size: .6rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  vertical-align: middle;
  /* its own box: in Persian the name's last letter and the flag's first
     would otherwise join across the two spans (سایت + رایگان drew «سایـ») */
  display: inline-block; line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   BUILDWORTH — the installed skill, on the home page

   Not a card that describes a feature: a finished report that fills
   itself in while you watch, next to a field that starts a real one.
   The one number that never resolves is the argument — only the
   visitor's own address can settle it.

   SPACING. Every band on this page is `padding-block: var(--sec)` on
   BOTH edges, which is what makes the gap between any two a constant
   2 × --sec. The old `.skill-plug` used `0 var(--sec)` and therefore
   sat welded to the stats band's bottom hairline. This one does what
   the others do, and uses `.container` so its edges line up with the
   bento and stats above rather than floating in its own measure.

   ANIMATION. Nothing new is added to main.js. Entrances are the
   theme's own `[data-reveal]`; the numbers are its `[data-count]`;
   everything else is a CSS keyframe keyed off the `.in` class the
   reveal engine already writes. The resting style IS the finished
   state and each animation supplies only the `from` with `backwards`
   fill, so if a keyframe never runs the card still reads correctly.
   ═══════════════════════════════════════════════════════════════ */
.worth {
  position: relative;
  padding-block: var(--sec);
  overflow: clip;
}
.worth__bloom {
  position: absolute; inset-block-start: -30%; inset-inline-end: -10%;
  inline-size: min(46rem, 90%); block-size: 34rem;
  background: radial-gradient(circle, var(--aurora-1), transparent 62%);
  filter: blur(14px);
  pointer-events: none;
}
.worth__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
}
.worth__copy > * { max-inline-size: 34rem; }
.worth__lead { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin-block-start: 1.2rem; }

.worth__points { list-style: none; margin-block-start: 1.5rem; display: grid; gap: .7rem; }
.worth__point {
  display: flex; align-items: flex-start; gap: .7rem;
  color: var(--ink); font-size: .95rem; line-height: 1.6;
}
.worth__tick {
  flex: none; inline-size: 1.1rem; block-size: 1.1rem;
  margin-block-start: .25rem;
  border-radius: 50%;
  background: var(--wash);
  border: 1px solid rgba(124, 108, 255, .45);
  position: relative;
}
.worth__tick::after {
  content: '';
  position: absolute; inset-block-start: 47%; inset-inline-start: 50%;
  inline-size: .34rem; block-size: .17rem;
  border-inline-start: 2px solid var(--accent-2);
  border-block-end: 2px solid var(--accent-2);
  transform: translate(-50%, -60%) rotate(-45deg);
}

/* ── The doorway: a real field, a real submit, no JavaScript needed ── */
.worth__go {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: .8rem;
  margin-block-start: 1.9rem;
}
.worth__field { flex: 1 1 min(20rem, 100%); min-inline-size: 0; }
.worth__field-label {
  display: block;
  font-size: .9rem; font-weight: 600;
  letter-spacing: normal; text-transform: none;
  color: var(--muted);
  margin-block-end: .5rem;
}
.worth__input {
  inline-size: 100%;
  max-inline-size: 34rem;
  min-block-size: 2.9rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink);
  font: inherit; font-size: 1rem;
  transition: border-color .3s, box-shadow .3s;
}
.worth__input::placeholder { color: var(--faint); }
.worth__input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--ring);
}
.worth__submit { flex: none; }
.worth__fine { color: var(--faint); font-size: .84rem; margin-block-start: 1rem; }

/* ── The report card ── */
.worth__visual { position: relative; min-inline-size: 0; }
.worth-card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
:root[data-theme="light"] .worth-card {
  box-shadow: 0 1px 2px rgba(43, 29, 94, .05), 0 26px 60px -34px rgba(43, 29, 94, .45);
}

/* The measuring pass: one sweep, once, when the card arrives. */
.worth-card__scan {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 2;
  opacity: 0;
}
.js .worth__visual.in .worth-card__scan {
  background: linear-gradient(180deg, transparent 42%,
              color-mix(in srgb, var(--tone) 22%, transparent) 50%, transparent 58%);
  animation: worthScan 1.5s var(--ease) .35s 1 both;
}
@keyframes worthScan {
  from { opacity: 1; transform: translateY(-100%); }
  to   { opacity: 0; transform: translateY(100%); }
}

.worth-card__chrome {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem;
  border-block-end: 1px solid var(--line);
  background: var(--glass);
}
.worth-card__dots { display: inline-flex; gap: .3rem; flex: none; }
.worth-card__dots i { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--film-4); }
.worth-card__domain {
  font-family: var(--mono); font-size: .78rem;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.worth-card__pill {
  margin-inline-start: auto; flex: none;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--wash);
  border: 1px solid rgba(124, 108, 255, .35);
  color: var(--accent-2);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
}

.worth-card__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.1rem, 2.4vw, 1.8rem);
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  align-items: center;
}

/* ── The dial. --worth-val is animated, so the ring sweeps with the
      number instead of snapping when the count-up finishes. ── */
@property --worth-val {
  syntax: '<number>';
  initial-value: 74;
  inherits: false;
}
.worth-dial {
  position: relative;
  inline-size: clamp(7rem, 14vw, 8.5rem);
  aspect-ratio: 1;
  display: grid; place-items: center;
  margin-block-end: 1.6rem;
  --worth-val: 74;
}
.js .worth__visual.in .worth-dial { animation: worthSweep 1.7s var(--ease) .3s 1 both; }
@keyframes worthSweep { from { --worth-val: 0; } to { --worth-val: 74; } }
.worth-dial__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    /* Held just off full strength for the same reason the bars are: the
       card needs ONE brightest point and that is the money, not the
       score. The hue is still unmistakably the band's. */
    conic-gradient(color-mix(in srgb, var(--band, var(--accent)) 82%, transparent) calc(var(--worth-val) * 1%), var(--film-2) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
}
.worth-dial__face { display: flex; align-items: baseline; gap: .1rem; }
.worth-dial__num {
  font-size: clamp(1.9rem, 1.2rem + 2vw, 2.6rem);
  font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  /* The figure is the score, so it wears the score's colour rather than
     the brand gradient. A flat fill, not a gradient: at this size a
     two-stop gradient across three glyphs makes the last digit read
     dimmer than the first, which on a NUMBER looks like a rendering
     fault rather than a style. */
  color: var(--band, var(--accent-2));
}
.worth-dial__of { font-size: .8rem; color: var(--faint); font-weight: 700; }
.worth-dial__label {
  /* Anchored to the dial's BOTTOM EDGE and grown downward. Anchored by
     inset-block-end instead, a label that wraps to two lines grows UPWARD
     and lands on the number. */
  position: absolute; inset-block-start: 100%; inset-inline: 0;
  margin-block-start: .4rem;
  text-align: center;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
}

/* ── The four categories ── */
.worth-meters { list-style: none; display: grid; gap: .55rem; min-inline-size: 0; }
.worth-meter {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto;
  align-items: center; gap: .7rem;
}
.worth-meter__name { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.worth-meter__track {
  block-size: 5px; border-radius: 999px;
  background: var(--film-2);
  overflow: hidden;
}
.worth-meter__track i {
  display: block; block-size: 100%;
  inline-size: var(--to);
  border-radius: 999px;
  /* Held just off full strength. At 100% four saturated bars competed
     with the dial beside them and the card read as a chart of nothing in
     particular; the dial is the headline and these are its evidence. */
  background: color-mix(in srgb, var(--band, var(--accent)) 88%, transparent);
  transform-origin: left center;
}
[dir='rtl'] .worth-meter__track i { transform-origin: right center; }
.js .worth__visual.in .worth-meter__track i { animation: worthFill 1.2s var(--ease) .45s 1 both; }
@keyframes worthFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.worth-meter__val {
  font-size: .8rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--band, var(--ink));
  min-inline-size: 1.7rem; text-align: end;
}
/* The track keeps a tint of its own band, so a 48 reads as a short red
   bar in a red channel rather than a short red bar in a grey one. */
.worth-meter[data-band] .worth-meter__track {
  background: color-mix(in srgb, var(--band) 16%, transparent);
}

.worth-card__issues {
  grid-column: 1 / -1;
  padding-block-start: .9rem;
  border-block-start: 1px solid var(--line-soft);
  color: var(--muted); font-size: .88rem;
}
.worth-card__issues b {
  color: var(--tone-ink);
  font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums;
}

/* ── The number that will not resolve ── */
.worth-cost {
  grid-column: 1 / -1;
  padding: .95rem 1.1rem;
  border-radius: var(--radius);
  /* Still dashed — the figure is not settled — but in the value tone, so
     the one panel on this card that is about MONEY is the one panel the
     eye lands on. It was violet on violet before, which made the payoff
     the quietest thing in the picture. */
  border: 1px dashed var(--tone-line);
  /* A flat 12% gold over the card's violet ground mixed to brown. A
     gradient that fades out downward keeps the tint at the top edge,
     where the label is, and lets the card's own colour carry the rest. */
  background: linear-gradient(180deg, var(--tone-wash), transparent 70%);
  text-align: center;
}
.worth-cost__label {
  font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tone-ink);
}
.worth-cost__reel {
  display: flex; align-items: center; justify-content: center; gap: .1rem;
  margin-block: .3rem .35rem;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.75rem);
  font-weight: 800; letter-spacing: -.02em;
  color: var(--tone-ink);
  font-variant-numeric: tabular-nums;
}
.worth-cost__cur { color: var(--tone-ink); }
/* Softened and scrimmed on purpose. Frozen in a screenshot — or for a
   visitor who asked for no motion — a crisp row of digits reads as a real
   quote, which is exactly what this figure is not. Blurred behind a fade it
   reads as a reel still spinning, which is the truth: the number is not
   knowable until someone gives us an address. */
.worth-cost__digits {
  display: inline-flex; gap: .06em;
  /* Blur and opacity only, never a scrim: a gradient painted in --card sat
     on the well's --glass ground and drew a visible box around the reel in
     light mode. This reads as unsettled on any background. */
  filter: blur(1.1px);
  opacity: .85;
}
/* Each digit is a strip of 0-9 scrolled by a keyframe; they never stop and
   never agree, which is the point — the figure is not knowable from here. */
.worth-cost__digits i {
  display: inline-block;
  inline-size: .62em; block-size: 1.2em;
  overflow: hidden;
  position: relative;
  font-style: normal;
  color: transparent;
  vertical-align: bottom;
}
.worth-cost__digits i::before {
  content: '0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9';
  white-space: pre;
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  /* line-height MUST equal the box height: the keyframe steps by exactly
     ten of these, so any mismatch walks the digits out of their windows. */
  line-height: 1.2em;
  text-align: center;
  inline-size: 100%;
  color: var(--tone-ink);
}
.js .worth-cost__digits i::before { animation: worthReel 1.4s steps(10, end) infinite; }
.worth-cost__digits i:nth-child(2)::before { animation-duration: 1.05s; }
.worth-cost__digits i:nth-child(3)::before { animation-duration: 1.7s; }
.worth-cost__digits i:nth-child(5)::before { animation-duration: 1.25s; }
.worth-cost__digits i:nth-child(6)::before { animation-duration: .85s; }
@keyframes worthReel { to { transform: translateY(-12em); } }  /* 10 digits × 1.2em */
/* The seal stays VIOLET while everything around it is gold: it is the
   line that speaks for Ariana, not for the figure, and keeping the brand
   colour on it is what stops the panel reading as a different product. */
.worth-cost__seal { color: var(--accent-2); font-size: .8rem; font-weight: 700; }

/* ── Responsive: fluid, never a shrink-at-breakpoint ── */
@media (max-width: 1000px) {
  .worth__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3rem); }
  .worth__copy > * { max-inline-size: none; }
}
@media (max-width: 560px) {
  .worth-card__body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  /* The label stays ABSOLUTE. `.worth-dial` is a `place-items: center` grid,
     so a static label becomes a grid item and lands on top of the number —
     it needs room made for it below, not a change of flow. */
  .worth-meters { inline-size: 100%; }
  .worth-meter { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr) auto; }
  /* A category name longer than the column ("Buenas prácticas", "Bonnes
     pratiques") takes a second line instead of an ellipsis; the English
     names fit on one, so nothing changes for them. */
  .worth-meter__name { white-space: normal; line-height: 1.3; }
}

/* ── Reduced motion. This theme has no blanket rule, so the section
      states its own: every animation is dropped and the resting style
      (which is the finished state) is what remains. ── */
@media (prefers-reduced-motion: reduce) {
  .js .worth__visual.in .worth-card__scan { animation: none; opacity: 0; }
  .js .worth__visual.in .worth-dial { animation: none; --worth-val: 74; }
  .js .worth__visual.in .worth-meter__track i { animation: none; transform: none; }
  .js .worth-cost__digits i::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   WHAT ARIANA PUTS INSIDE {{{ post.content }}}

   The article body does not arrive as plain HTML: Ariana wraps every
   table, captions every figure, renders the FAQ block, and — when the
   operator leaves Author box on, which is the DEFAULT — renders the
   author card itself and sets options.show_author_box to false so the
   theme does not print a second one. That last one is not hypothetical:
   with the default settings this theme's own .author-box never renders,
   and Ariana's card is what every article actually ends with.

   Ariana's defaults for these use :where(), i.e. zero specificity, so a
   single class selector here wins with no !important. Without these
   rules the four blocks read as generic grey boxes dropped into an
   art-directed column.
   ═══════════════════════════════════════════════════════════════ */

/* ── The author card Ariana renders under the article ── */
.prose .ariana-author-box,
.post-body .ariana-author-box {
  display: flex; gap: 1.3rem; align-items: flex-start;
  margin-block-start: 2.6rem;
  padding: 1.8rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  border: 1px solid var(--line);
}
.prose .ariana-author-box__avatar,
.post-body .ariana-author-box__avatar { flex: none; line-height: 0; }
.prose .ariana-author-box__avatar img,
.post-body .ariana-author-box__avatar img {
  inline-size: 64px; block-size: 64px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(124, 108, 255, .45);
}
.prose .ariana-author-box__body,
.post-body .ariana-author-box__body { min-inline-size: 0; }
.prose .ariana-author-box__label,
.post-body .ariana-author-box__label {
  font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 .2rem;
}
.prose .ariana-author-box__name,
.post-body .ariana-author-box__name {
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.015em;
  margin: 0;
}
.prose .ariana-author-box__name a:hover,
.post-body .ariana-author-box__name a:hover { color: var(--accent-2); }
.prose .ariana-author-box__role,
.post-body .ariana-author-box__role {
  font-size: .85rem; color: var(--faint);
  margin: .15rem 0 .6rem;
}
.prose .ariana-author-box__bio,
.post-body .ariana-author-box__bio {
  color: var(--muted); font-size: .92rem; line-height: 1.75;
  margin: 0;
}
.prose .ariana-author-box__more,
.post-body .ariana-author-box__more { margin: .8rem 0 0; }
.prose .ariana-author-box__more a,
.post-body .ariana-author-box__more a {
  font-size: .84rem; font-weight: 700; color: var(--accent-2);
}
.prose .ariana-author-box__more a:hover,
.post-body .ariana-author-box__more a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 560px) {
  .prose .ariana-author-box,
  .post-body .ariana-author-box { flex-direction: column; gap: 1rem; padding: 1.35rem; }
}

/* ── The FAQ block (h2 + h3/p pairs, not details/summary) ── */
.prose .ariana-faq {
  margin-block-start: 2.6rem;
  padding: 1.6rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--glass);
}
.prose .ariana-faq > h2 {
  font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 1.2rem;
}
.prose .ariana-faq > h3 {
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink);
  margin: 1.5rem 0 .45rem;
  padding-inline-start: .9rem;
  border-inline-start: 2px solid var(--accent);
}
.prose .ariana-faq > h3:first-of-type { margin-block-start: 0; }
.prose .ariana-faq > p {
  color: var(--muted); font-size: .95rem; line-height: 1.75;
  margin: 0 0 .4rem;
  padding-inline-start: .9rem;
}

/* ── Captioned images ── */
.prose .ariana-figure { margin-block: 2rem; }
.prose .ariana-figure img {
  max-inline-size: 100%; block-size: auto;
  margin-inline: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.prose .ariana-figure figcaption {
  margin-block-start: .7rem;
  font-size: .82rem; line-height: 1.6;
  color: var(--faint);
  text-align: center;
}

/* ── Tables, in their own scroll region ── */
.prose .ariana-table {
  margin-block: 2rem;
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  -webkit-overflow-scrolling: touch;
}
.prose .ariana-table:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prose .ariana-table > table {
  /* The theme's own fallback rule makes a bare table `display: block` so it
     can scroll on a phone. Inside .ariana-table the WRAPPER already scrolls,
     and a block-level table lays its cells out as inline boxes — columns stop
     lining up at all. Back to a real table here. */
  display: table;
  overflow: visible;
  inline-size: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  margin: 0;
}
.prose .ariana-table th,
.prose .ariana-table td {
  text-align: start;
  padding: .8rem 1rem;
  border-block-end: 1px solid var(--line-soft);
}
.prose .ariana-table thead th {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
  background: var(--glass);
  white-space: nowrap;
}
.prose .ariana-table tbody td { color: var(--muted); }
.prose .ariana-table tbody tr:last-child th,
.prose .ariana-table tbody tr:last-child td { border-block-end: 0; }

/* ═══════════════ Operator-supplied logo, empty archives, author facts ═══ */
.brand-logo { block-size: 2rem; inline-size: auto; max-inline-size: 12rem; object-fit: contain; }

.archive-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--glass);
}
.archive-empty__title { font-size: clamp(1.15rem, .95rem + .7vw, 1.5rem); font-weight: 800; letter-spacing: -.02em; }
.archive-empty__text { color: var(--muted); margin-block: .6rem 1.4rem; max-inline-size: 34rem; margin-inline: auto; }

/* The category picture the panel gained in 1.68.7 — archive.image is set for
   a category and for nothing else. */
.archive-hero__image {
  inline-size: 5rem; block-size: 5rem;
  border-radius: var(--radius);
  object-fit: cover;
  border: 1px solid var(--line-strong);
  margin-block-end: 1.1rem;
}

/* ── The author profile Ariana injects into {{{ archive.description }}} ──
   On an author archive `archive.description` is not prose: it is a complete
   card — avatar, role, bio and social links — rendered by the CMS, with
   :where() defaults at zero specificity. The theme used to print its own
   copy of the same facts from author.*, which showed the role twice; now it
   prints Ariana's card and dresses it. */
.archive-hero__desc .ariana-author-profile {
  display: flex; gap: 1.3rem; align-items: flex-start;
  text-align: start;
  margin-block-start: 1.4rem;
  padding: 1.5rem 1.7rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--film-2), var(--film-1) 55%), var(--card);
  border: 1px solid var(--line);
}
.archive-hero__desc .ariana-author-profile__avatar { flex: none; line-height: 0; }
.archive-hero__desc .ariana-author-profile__avatar img {
  inline-size: 72px; block-size: 72px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(124, 108, 255, .45);
}
.archive-hero__desc .ariana-author-profile__body { min-inline-size: 0; }
.archive-hero__desc .ariana-author-profile__role {
  color: var(--accent-2); font-weight: 700;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 .5rem;
}
.archive-hero__desc .ariana-author-profile__bio {
  color: var(--muted); font-size: .95rem; line-height: 1.75;
  margin: 0 0 .5rem;
}
.archive-hero__desc .ariana-author-profile__social {
  display: inline-flex; align-items: center;
  margin-inline-end: .9rem; margin-block-start: .4rem;
  font-size: .84rem; font-weight: 700;
  color: var(--accent-2);
}
.archive-hero__desc .ariana-author-profile__social:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 560px) {
  .archive-hero__desc .ariana-author-profile { flex-direction: column; gap: 1rem; padding: 1.25rem; }
}

/* TOUCH TARGETS. Measured at 390px: the hamburger and back-to-top were 42px
   and the icon buttons 40px — all under the 44px minimum. Desktop keeps the
   tighter chrome the design was drawn with; a finger gets the full target. */
@media (max-width: 900px) {
  .icon-btn { inline-size: 44px; block-size: 44px; }
  .nav-toggle { inline-size: 44px; block-size: 44px; }
  .to-top { inline-size: 44px; block-size: 44px; }
}

/* ═══════════════════════════════════════════════════════════════
   5.18 — a shorter home page. What Ariana does is the second section
   now, under its own heading, and Auto Pilot is its Act II: the
   demonstration that used to take 640vh of scroll plays on its own
   inside the act's window. The Auto Pilot explanation band and the
   problem section are gone; the proof of real sites follows the acts.
   ═══════════════════════════════════════════════════════════════ */

/* ── The capabilities, headed ── */
.caps {
  position: relative;
  background: var(--bg-2);
  border-block: 1px solid var(--line);
}
/* A link to one act lands on the act, clear of the fixed header, wherever
   the acts sit in normal flow (phones, reduced motion). In the pinned
   layout main.js takes the link to the act's own stretch of the track. */
.act { scroll-margin-block-start: var(--header-h); }

/* ── Act II: Auto Pilot. Short copy beside a whole week, so the columns
   lean toward the picture. ── */
.act__visual > .demo__frame { inline-size: 100%; }
@media (min-width: 901px) {
  /* Every act centres in the stage's whole content box, so the tallest one
     still sits in the middle; the others land exactly where they did. */
  .acts__viewport { align-self: stretch; }
  /* never taller than the stage can show: the moment overflows into the
     window's own clip, downward, instead of past the header */
  .act--pilot .demo__frame { max-block-size: calc(100svh - var(--header-h) - 2rem); }
}

/* The window measures itself. The same window is ~740px wide beside the
   copy on a laptop and ~340px on a phone, so what it lays out follows its
   own width, not the screen's. */
.demo__frame { container: demo / inline-size; }
.demo-step { padding-inline: clamp(.9rem, 4cqi, 2rem); }
@container demo (max-width: 38rem) {
  /* narrow window: the panel's sidebar and each moment's insight column
     step aside; the work itself, and the story, stay */
  .demo__body { display: block; }
  .demo__side { display: none; }
  .screen--split { grid-template-columns: minmax(0, 1fr); }
  .screen__col--aside { display: none; }
  .screen { min-block-size: 0; }
  .screen--article { max-inline-size: none; }
}
@container demo (max-width: 28rem) {
  /* a phone-wide window: the story keeps every step and drops only its
     ornaments — the skeleton paragraph and the byline chip (the Spanish
     edition, which is the point of the moment, stays) */
  .demo__app-slot { display: none; }
  .demo__chrome { gap: .6rem; padding-inline: .9rem; }
  .ws__canvas { block-size: 9rem; }
  .art__foot { grid-template-columns: minmax(0, 1fr); }
  .art__para, .art__author { display: none; }
  .idle, .weekend { inline-size: 100%; }
  .demo-step { padding-block: 1rem; }
  .demo-step__label { margin-block-end: .6rem; }
  .job__chain li { padding-block: .45rem; }
}

/* The moments are children of an act, so the act-level choreography
   (.js .act.is-live …) would play all seven at once, the instant Act II
   arrives. Scoped one step deeper, each piece waits for its own moment. */
.js .act .demo-step [data-seq] { opacity: 0; transform: translateY(10px); animation: none; }
.js .act .demo-step.is-live [data-seq] {
  animation: seqIn .5s var(--ease) forwards;
  animation-delay: calc(var(--seq, 0) * .16s + .25s);
}
.js .act .demo-step .pilot-toggle__track::after { animation: none; transform: translateX(-16px); opacity: .4; }
.js[dir='rtl'] .act .demo-step .pilot-toggle__track::after { transform: translateX(16px); }
.js .act .demo-step.is-live .pilot-toggle__track::after { animation: toggleOn .45s var(--ease-spring) .55s forwards; }
/* the week's line in the chrome follows the story, a moment at a time */
.demo__trace { transition: transform .8s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  /* nothing plays on its own: the rail steps through by hand */
  .demo__pause { display: none; }
  .demo__tick.is-on::after { animation: none; transform: none; }
}

/* ── Built in: the two wide cards carry a picture ── */
.bento-card--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 1.4rem 2rem;
  align-items: center;
}
/* Five single cards cannot pair up in two columns; the backups card takes
   the whole row there, so the grid never ends on a hole. */
@media (max-width: 1100px) and (min-width: 641px) {
  .bento-card--wide-md { grid-column: span 2; }
}
@media (max-width: 640px) {
  .bento-card--split { grid-template-columns: minmax(0, 1fr); }
}

/* Fifteen schema.org types: code names, so they read left to right */
.bento-card__body { align-self: start; }
.schema-art { display: flex; flex-wrap: wrap; align-content: center; gap: .45rem; direction: ltr; }
.schema-art__chip {
  padding: .34rem .75rem;
  border-radius: 999px;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  color: var(--tone-ink);
  background: color-mix(in srgb, var(--tone) 10%, var(--film-1));
  border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent);
}
.schema-art__chip--more { color: var(--muted); background: var(--film-2); border-color: var(--line); }
.js .bento-card .schema-art__chip { opacity: 0; transform: translateY(6px) scale(.94); }
.js .bento-card.in .schema-art__chip {
  animation: tagPop .45s var(--ease-spring) forwards;
  animation-delay: calc(.35s + var(--seq, 0) * .07s);
}

/* Site health's answer counts: the missing pages are the ones it found */
/* one set of columns for all four rows: the widest label sets its width */
.status-art { display: grid; grid-template-columns: auto auto minmax(1.5rem, 1fr) auto; gap: .5rem .75rem; }
.status-art__row {
  --row: var(--ok);
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 7rem) minmax(1.5rem, 1fr) 3.2rem;
  grid-template-columns: subgrid;
  align-items: center; gap: .75rem;
  padding: .5rem .85rem;
  border-radius: 12px;
  background: var(--film-1);
  border: 1px solid var(--line);
  font-size: .8rem;
}
.status-art__row[data-code='301'] { --row: var(--tone-data); }
.status-art__row[data-code='404'] {
  --row: var(--tone-live);
  background: color-mix(in srgb, var(--tone-live) 9%, var(--film-1));
  border-color: color-mix(in srgb, var(--tone-live) 38%, var(--line));
}
.status-art__row[data-code='500'] { --row: var(--bad); }
.status-art__row b { font-family: var(--mono); font-weight: 700; color: var(--row); }
.status-art__row span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-art__row[data-code='404'] span { color: var(--ink); font-weight: 700; }
.status-art__row i {
  position: relative;
  block-size: 6px; border-radius: 999px;
  background: var(--film-3);
  overflow: hidden;
}
.status-art__row i::after {
  content: '';
  position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: calc(var(--v, 0) * 100%);
  border-radius: inherit;
  background: var(--row);
  transform-origin: 0 50%;
}
[dir='rtl'] .status-art__row i::after { transform-origin: 100% 50%; }
.status-art__row em { font-style: normal; font-weight: 800; text-align: end; color: var(--ink); font-variant-numeric: tabular-nums; }
.js .bento-card .status-art__row i::after { transform: scaleX(0); }
.js .bento-card.in .status-art__row i::after {
  animation: barGrow .9s var(--ease) forwards;
  animation-delay: calc(.4s + var(--seq, 0) * .12s);
}
@keyframes barGrow { to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .bento-card .schema-art__chip { opacity: 1; transform: none; animation: none; }
  .js .bento-card .status-art__row i::after { transform: none; animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   5.19 — one size for every act, the acts as a swipeable row on
   phones and tablets, the heading joined to its acts, a gallery that
   follows the hand, and a contact form worth writing in.
   ═══════════════════════════════════════════════════════════════ */

/* The stage is drawn on the section's own ground. */
.acts__stage { background: none; }

/* ── Every act's picture is one size ──
   main.js measures every picture — any act, any language, any width —
   and writes the tallest as --mock-h; each picture takes it, so nothing
   grows or shrinks when the next act takes the stage. */
.acts[style*='--mock-h'] .act__visual > .mock,
.acts[style*='--mock-h'] .act__visual > .demo__frame { block-size: var(--mock-h); min-block-size: 0; }

/* ── Auto Pilot inside that size ──
   The moment's caption moves into the window's rail, where it doubles as
   the story's index; the skeleton paragraph goes; the covers follow the
   window's own width as well as the screen's height. */
.js .demo-step__label { display: none; }
.demo__rail { justify-content: flex-start; gap: .75rem; }
.demo__caption {
  flex: 1 1 auto; min-inline-size: 0;
  display: grid; align-items: center;
  min-block-size: 2.6em;
  font-size: .64rem; font-weight: 700; line-height: 1.3;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-2);
}
.demo__caption > span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.demo__ticks { flex: none; margin-inline-start: auto; }
.no-js .demo__caption { display: none; }
@container demo (max-width: 28rem) {
  .demo__rail { flex-wrap: wrap; justify-content: center; row-gap: .1rem; }
  .demo__caption { flex-basis: 100%; order: -1; text-align: center; }
  .demo__ticks { margin-inline-start: 0; }
}
.demo .art__para { display: none; }
.demo .art__cover { aspect-ratio: auto; block-size: clamp(5rem, min(21cqi, 49svh - 12.4rem), 11rem); }
.demo .ws__canvas { block-size: clamp(6rem, min(24cqi, 22svh), 10.5rem); }
/* no moment may widen the window past its column: the grid tracks shrink,
   and the weekend's day names give way before the frame does */
.demo__frame { grid-template-columns: minmax(0, 1fr); }
.demo__viewport { grid-template-columns: minmax(0, 1fr); }
.demo-step { min-inline-size: 0; }

/* ── Theme & Skill Contracts: two files in one window ── */
.mock__tabs { display: flex; gap: .3rem; min-inline-size: 0; }
.mock__tab {
  min-inline-size: 0;
  padding: .2rem .65rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--mono); font-size: .72rem;
  color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock__tab:first-child,
.js .act .mock__tab:first-child { color: var(--ink); background: var(--film-2); border-color: var(--line); }
/* the window switches to the skill contract as its lines begin */
.js .act.is-live .mock__tab:first-child { animation: tabOff .3s var(--ease) 2.5s forwards; }
.js .act.is-live .mock__tab:last-child { animation: tabOn .3s var(--ease) 2.5s forwards; }
@keyframes tabOn { to { color: var(--ink); background: var(--film-2); border-color: var(--line); } }
@keyframes tabOff { to { color: var(--faint); background: transparent; border-color: transparent; } }

/* ── Phones and tablets: the acts are one row you swipe ──
   Seven acts stacked were seven screens of scrolling. Now each act is a
   card the width of the page's own column, all the same height, snapping
   one at a time, with the rail — arrows and a dot per act — beneath. */
@media (max-width: 900px) {
  .js .acts__inner { flex-direction: column; align-items: stretch; gap: 0; padding-block: .25rem 2.5rem; }
  .js .acts__viewport {
    display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
    column-gap: var(--gutter);
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .js .acts__viewport::-webkit-scrollbar { display: none; }
  .js .act { scroll-snap-align: start; scroll-snap-stop: always; align-content: start; padding-block: 1.25rem .5rem; }
  .js .act + .act { border-block-start: 0; }
  .js .acts__rail {
    display: flex; position: static; translate: none; order: 2;
    justify-content: center; align-items: center; gap: .5rem;
    margin-block-start: 1.1rem;
  }
  .js .acts__arrow {
    display: inline-grid; place-items: center; flex: none;
    inline-size: 42px; block-size: 42px;
    padding: 0;
    border-radius: 50%;
    color: var(--ink);
    background: var(--film-2);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: opacity .3s, border-color .3s, background-color .3s;
  }
  .js .acts__arrow:hover:not(:disabled) { border-color: var(--line-strong); background: var(--film-3); }
  .js .acts__arrow:disabled { opacity: .35; cursor: default; }
  .js .acts__arrow:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
  [dir='rtl'] .acts__arrow svg { transform: scaleX(-1); }
}

/* ── In production: the gallery follows the hand ──
   main.js drives rows it can drive (is-driven): a finger or a mouse drags
   them, a trackpad swipes them. Vertical page scrolling stays the
   browser's; only a sideways gesture is the gallery's. */
.proof__row.is-driven { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.proof__row.is-driven .proof__track { animation: none; }
.proof__row.is-driven img { -webkit-user-drag: none; }
.proof__row.is-dragging { cursor: grabbing; }
.proof__row.is-dragging .site-card { pointer-events: none; }

/* ── Contact: a message window, not a bare form ──
   Ariana prints its own small stylesheet with the form, after this one,
   so every rule here is two classes deep: it wins on specificity, never
   on !important. Fields are drawn from the theme's tokens — no white
   rims in the dark, no browser-yellow autofill. */
.write-us__panel {
  --wp: clamp(1.35rem, 3vw, 2.3rem);
  position: relative;
  padding: var(--wp);
  border-radius: calc(var(--radius-lg) + 4px);
  border: 1px solid transparent;
  background:
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%) padding-box,
    linear-gradient(170deg, var(--film-2), var(--film-1) 55%) padding-box,
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(150deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--line) 38%, var(--line) 72%, color-mix(in srgb, var(--accent-2) 40%, transparent)) border-box;
  box-shadow: var(--shadow), 0 30px 80px -40px color-mix(in srgb, var(--accent) 55%, transparent);
}
.write-us__chrome {
  display: flex; align-items: center; gap: .85rem;
  margin: calc(var(--wp) * -1) calc(var(--wp) * -1) clamp(1.2rem, 2.4vw, 1.6rem);
  padding: .85rem clamp(1rem, 2.4vw, 1.5rem);
  border-block-end: 1px solid var(--line);
  background: var(--film-1);
  border-start-start-radius: inherit; border-start-end-radius: inherit;
}
.write-us__title { font-size: .88rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.write-us__to {
  margin-inline-start: auto; min-inline-size: 0;
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; color: var(--faint);
  white-space: nowrap;
}
.write-us__to b {
  padding: .18rem .7rem;
  border-radius: 999px;
  font-weight: 700; color: var(--accent-2);
  background: var(--wash);
  overflow: hidden; text-overflow: ellipsis;
}
.write-us__panel .ariana-contact { max-width: none; gap: 1.15rem; }
.ariana-contact .ariana-contact__row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}
.ariana-contact .ariana-contact__row > .ariana-contact__field { margin: 0; }
.ariana-contact .ariana-contact__field { display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.ariana-contact .ariana-contact__field label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .86rem; font-weight: 600;
  color: var(--muted);
}
/* a required field says so with a quiet accent point, in every language */
.ariana-contact .ariana-contact__field:has([required]) label::after {
  content: '';
  inline-size: 5px; block-size: 5px; border-radius: 50%;
  background: var(--accent-2);
}
.ariana-contact .ariana-contact__field :is(input, textarea) {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: 3.25rem;
  padding: .85rem 1.05rem;
  font: inherit; font-size: 1rem; line-height: 1.5;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 55%, var(--card));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: inset 0 1px 2px rgba(5, 3, 18, .18);
  opacity: 1;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.ariana-contact .ariana-contact__field :is(input, textarea)::placeholder { color: var(--faint); }
.ariana-contact .ariana-contact__field :is(input, textarea):hover { border-color: var(--line-strong); }
.ariana-contact .ariana-contact__field :is(input, textarea):focus {
  outline: 0;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg) 30%, var(--card));
  box-shadow: 0 0 0 4px var(--ring);
}
.ariana-contact .ariana-contact__field textarea { min-block-size: 10rem; resize: vertical; line-height: 1.65; }
.ariana-contact .ariana-contact__field input:-webkit-autofill,
.ariana-contact .ariana-contact__field input:-webkit-autofill:hover,
.ariana-contact .ariana-contact__field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px color-mix(in srgb, var(--bg) 55%, var(--card)) inset;
  transition: background-color 9999s ease-out;
}
.ariana-contact .ariana-contact__field--invalid :is(input, textarea) {
  border-width: 1px;
  border-color: var(--bad);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 16%, transparent);
}
.ariana-contact .ariana-contact__error { color: var(--bad); font-size: .8rem; font-weight: 600; }
.ariana-contact .ariana-contact__error--summary,
.ariana-contact .ariana-contact__sent {
  display: flex; align-items: center; gap: .65rem;
  margin: 0;
  padding: .9rem 1.1rem;
  border-radius: 14px;
  font-size: .9rem; font-weight: 600;
}
.ariana-contact .ariana-contact__error--summary {
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
}
.ariana-contact .ariana-contact__sent {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}
.ariana-contact .ariana-contact__sent::before {
  content: '';
  flex: none;
  inline-size: 1.25rem; block-size: 1.25rem;
  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='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.5 2.8 2.8L16.5 9'/%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%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.5 2.8 2.8L16.5 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ariana-contact .ariana-contact__submit {
  align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-block-size: 3.4rem;
  margin-block-start: .3rem;
  padding: .9rem 2rem;
  border: 0; border-radius: 14px;
  font: inherit; font-size: 1rem; font-weight: 700;
  color: var(--on-accent);
  background: var(--grad);
  box-shadow: 0 14px 34px -14px rgba(124, 108, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .18);
  cursor: pointer;
  transition: transform .45s var(--ease-spring), box-shadow .35s var(--ease), filter .3s;
}
.ariana-contact .ariana-contact__submit::after {
  content: '';
  flex: none;
  inline-size: 1.05rem; block-size: 1.05rem;
  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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2.5 10.6 13.4'/%3E%3Cpath d='M21.5 2.5 14.6 21.5l-4-8.1-8.1-4 19-6.9Z'/%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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2.5 10.6 13.4'/%3E%3Cpath d='M21.5 2.5 14.6 21.5l-4-8.1-8.1-4 19-6.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .4s var(--ease-spring);
}
[dir='rtl'] .ariana-contact .ariana-contact__submit::after { transform: scaleX(-1); }
.ariana-contact .ariana-contact__submit:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 20px 44px -14px rgba(124, 108, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .22); }
.ariana-contact .ariana-contact__submit:hover::after { transform: translate(3px, -3px); }
[dir='rtl'] .ariana-contact .ariana-contact__submit:hover::after { transform: scaleX(-1) translate(3px, -3px); }
.ariana-contact .ariana-contact__submit:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
:root[data-theme="light"] .ariana-contact .ariana-contact__field :is(input, textarea) { box-shadow: inset 0 1px 2px rgba(43, 29, 94, .06); }
@media (max-width: 560px) {
  .ariana-contact .ariana-contact__row { grid-template-columns: minmax(0, 1fr); }
  .write-us__to span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ariana-contact .ariana-contact__submit,
  .ariana-contact .ariana-contact__submit::after { transition: none; }
}

/* Short laptops, pinned, under 700px of height: the scene mocks drop the
   filler strips they carry for tall screens (suggestion pills, stat
   strips, the caption line), so one shared picture size still fits
   between the header and the bottom of the screen. */
@media (min-width: 901px) and (max-height: 700px) {
  .chat-sugg, .mock-strip, .mock__caption, .seo-checks { display: none; }
}
/* Phones: every act keeps its picture, name, title, paragraph and points;
   only the mocks' filler strips stay for tablets and laptops, and the
   rewritten SEO line wraps instead of running out of its card. */
@media (max-width: 560px) {
  /* the shared height follows the real content here, not the laptop floor */
  .act__visual > .mock { min-block-size: 0; }
  .chat-sugg, .mock__caption, .run-stats { display: none; }
  .seo-diff__new span,
  .js .act .seo-diff__new span,
  .js[dir="rtl"] .act .seo-diff__new span,
  .js .act.is-live .seo-diff__new span { display: inline; white-space: normal; inline-size: auto; animation: none; clip-path: none; }
}
@container demo (max-width: 22rem) {
  /* the narrowest windows keep the story's clock and status; the three
     decorative dots give way so a longer day name never runs past the edge */
  .demo__chrome .dash__dots { display: none; }
}
@container demo (max-width: 28rem) {
  /* the cover was drawn in the moment before; the published article keeps
     its title, its summary and its Spanish edition */
  .demo .art__cover { display: none; }
  .instruct { font-size: .92rem; padding: .8rem .95rem; line-height: 1.55; }
  .screen { gap: .7rem; }
  .job__chain { gap: .35rem; }
  .job__chain li { padding-block: .4rem; }
}

/* ═══════════════════════════════════════════════════════════════
   5.20 — the capabilities open on a title card, every act takes one
   gesture, every picture is filled to the same measure, and the gallery
   scrolls natively under a finger.
   ═══════════════════════════════════════════════════════════════ */

/* ── The title card ──
   A display-size title, a full step above every act title, over an index
   of the seven acts. On a laptop it is the pinned stage's first stop and
   fades as Act I arrives; below 900px it heads the swipeable row. */
.acts__intro { text-align: center; }
.acts__intro-kicker { display: flex; justify-content: center; }
.acts__intro-kicker::after {
  content: '';
  inline-size: 1.8rem; block-size: 1px;
  background: currentColor; opacity: .7;
}
.acts__intro-title {
  max-inline-size: 58rem;
  margin: 0 auto 1.1rem;
  font-size: clamp(2.2rem, 1rem + 3.7vw, 4.6rem);
  font-weight: 800; line-height: 1.04; letter-spacing: -.04em;
  text-wrap: balance;
}
.acts__intro-lead {
  max-inline-size: 44rem;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(1rem, .92rem + .35vw, 1.2rem); line-height: 1.7;
}
.acts__index {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem;
  max-inline-size: 76rem;
  margin: clamp(1.4rem, 4svh, 2.6rem) auto 0; padding: 0;
  list-style: none;
}
.acts__index-item {
  inline-size: 100%; block-size: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  padding: .8rem .95rem .85rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--film-2), var(--film-1) 60%), var(--card);
  font: inherit; text-align: start; color: var(--ink);
  cursor: pointer;
  transition: border-color .3s, transform .4s var(--ease-spring), box-shadow .3s, background-color .3s;
}
.acts__index-item b { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--tone-ink); }
.acts__index-item span { font-size: .88rem; font-weight: 700; line-height: 1.3; }
.acts__index-item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tone) 45%, var(--line-strong)); box-shadow: var(--shadow); }
.acts__index-item:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.acts__index-item.is-on { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, var(--card)); }
.acts__intro-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: .55rem;
  margin-block-start: clamp(1.1rem, 3svh, 2rem);
  font-size: .66rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--faint);
}
.acts__intro-cue-line {
  inline-size: 1px; block-size: 2.2rem;
  background: linear-gradient(var(--accent-2), transparent);
  transform-origin: 50% 0;
  animation: cueDrop 2.4s ease-in-out infinite;
}
@keyframes cueDrop { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
[dir="rtl"] .acts__intro-cue { letter-spacing: 0; text-transform: none; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .acts__intro {
    position: absolute; inset: calc(var(--header-h) + 1rem) var(--gutter) 2rem;
    z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-22px) scale(.985);
    transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s linear .6s;
  }
  .js .acts.is-intro .acts__intro {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    transition: opacity .55s var(--ease), transform .6s var(--ease), visibility 0s;
  }
  .js .acts.is-intro .acts__rail { opacity: 0; pointer-events: none; }
  .acts__rail { transition: opacity .4s var(--ease); }
}
@media (max-width: 1200px) and (min-width: 901px) {
  .acts__index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Without scripts or with reduced motion the acts stack: the card simply
   heads them. */
.no-js .acts__inner { flex-direction: column; align-items: stretch; }
@media (prefers-reduced-motion: reduce) {
  .acts__inner { flex-direction: column; align-items: stretch; }
  .acts__intro { padding-block: var(--sec) 1rem; }
  .acts__intro-cue { display: none; }
}
@media (max-width: 900px) {
  .acts__intro { order: -1; text-align: start; padding-block: 1.4rem .4rem; }
  .acts__intro-kicker { justify-content: flex-start; }
  .acts__intro-kicker::after { display: none; }
  .acts__intro-title { margin-inline: 0; font-size: clamp(1.95rem, 1.2rem + 3.4vw, 2.7rem); }
  .acts__intro-lead { margin-inline: 0; }
  .acts__intro-cue { display: none; }
  /* the index becomes the row's tabs: one line, scrolled sideways inside
     the page's own margins */
  .acts__index {
    display: flex; gap: .45rem;
    margin: 1.2rem 0 0; max-inline-size: none;
    overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-x: contain;
    padding-block-end: .15rem;
  }
  .acts__index::-webkit-scrollbar { display: none; }
  .acts__index li { flex: none; }
  .acts__index-item {
    flex-direction: row; align-items: center; gap: .45rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    white-space: nowrap;
  }
  .acts__index-item span { font-size: .8rem; }
  .acts__index-item:hover { transform: none; }
}

/* ── Filled to the same measure: the new detail in the sparse mocks ── */
.seo-checks { display: flex; flex-wrap: wrap; gap: .45rem; }
.seo-checks li {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: .72rem; font-weight: 600;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent);
}
.seo-checks li::before { content: '✓'; font-weight: 800; }
.js .act .seo-checks li { opacity: 0; transform: translateY(6px); }
.js .act.is-live .seo-checks li {
  animation: seqIn .4s var(--ease) forwards;
  animation-delay: calc(4.3s + var(--seq, 0) * .15s);
}
@media (prefers-reduced-motion: reduce) {
  .js .act .seo-checks li { opacity: 1; transform: none; animation: none; }
}

/* ── The gallery under a finger ──
   On a touch screen the rows are the browser's own horizontal scroll — it
   tracks the finger one to one, with the platform's momentum, in every
   mobile browser. main.js keeps the idle drift and the seamless loop. */
.proof__row.is-native { touch-action: auto; }
.proof__row.is-native .proof__scroller {
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.proof__row.is-native .proof__scroller::-webkit-scrollbar { display: none; }
.proof__row.is-native .proof__track { animation: none; }
.proof__row.is-native .site-card { -webkit-user-drag: none; -webkit-touch-callout: none; }

/* ── Every picture filled to the same measure ──
   The shared height (main.js) is the tallest picture's; whatever a picture
   has left over is shared out between its own blocks instead of sitting as
   an empty band above and below them, and the pictures that ran long in a
   narrow column or on a phone drop the one ornament that made them so. */
.act__visual > .mock { justify-content: space-between; }
.act__visual > .mock > .mock__chrome + *,
.act__visual > .mock > :last-child { margin-block: 0; }
.act__visual > .mock--contract > .mock-verdict { margin: 0 1.4rem 1.3rem; }
.mock--seo { gap: .95rem; }
.act__visual { container: actpic / inline-size; }
@container actpic (28rem < width <= 34rem) {
  .seo-checks { display: none; }
  .chat-sugg span:nth-child(n+3) { display: none; }
}
@media (max-width: 900px) {
  .mock-code { line-height: 2.3; }
}
@media (max-width: 560px) {
  .seo-diff li:nth-child(3) { display: none; }
  .mock-code { font-size: .7rem; }
}
/* the Auto Pilot window in a narrow column keeps the laptop's measure */
@container demo (max-width: 38rem) {
  .demo-step { padding-block: 1.05rem; }
  .screen { gap: .75rem; }
  .job__chain { gap: .38rem; }
  .job__chain li { padding-block: .45rem; }
}

/* ── Persian digits (5.21) ─────────────────────────────────────────────
   Persian pages print every figure in Persian digits — the markup is
   converted at build time and main.js formats its counters with fa-IR.
   These are the few figures CSS draws itself. */
@counter-style fa-lz { system: extends persian; pad: 2 "۰"; }
:lang(fa) .feature-index__item::before { content: counter(fi, fa-lz); }
:lang(fa) .page-skill .bw-how__list li::before { content: counter(bw-step, fa-lz); letter-spacing: 0; }
:lang(fa) .worth-cost__digits i::before { content: '۰\A ۱\A ۲\A ۳\A ۴\A ۵\A ۶\A ۷\A ۸\A ۹'; }

/* ── Display type in Arabic script (5.21.1) ────────────────────────────
   Vazirmatn's letters stand taller and wider than Plus Jakarta's at the
   same size, and they need room above and below the line. Two titles had
   no working RTL rule: `.hero--claim .hero__title` comes later in the file
   than the RTL one and won on source order, and the acts' title card is
   newer than the RTL block. Both printed at the Latin size (86px / 72px at
   1512) with 1.02 leading, and the gradient word's descenders fell outside
   the box its background paints. Measured against English, every other
   display title already sets about 0.83 of the Latin size; these join it. */
[dir="rtl"] .hero--claim .hero__title {
  font-size: clamp(2rem, 1rem + 3.3vw, 3.9rem);
  line-height: 1.42; letter-spacing: 0;
}
[dir="rtl"] .acts__intro-title {
  font-size: clamp(1.7rem, .9rem + 2.6vw, 3.4rem);
  line-height: 1.45; letter-spacing: 0;
}
[dir="rtl"] .page-skill .bw-hero__title,
[dir="rtl"] .page-skill .bw-intro .bw-hero__title { line-height: 1.4; letter-spacing: 0; }
[dir="rtl"] .page-skill .bw-intro .bw-hero__title { font-size: clamp(1.65rem, min(.9rem + 2.8vw, 5.7svh), 2.9rem); }
/* on phones the RTL act title stood 15% above the English one */
[dir="rtl"] .act__title { font-size: clamp(1.15rem, .5rem + 2.6vw, 2.4rem); }
/* a word that paints its letters with its background needs that background
   under its descenders; the margins give the room back to the line */
[dir="rtl"] .hw--grad { padding-block: .12em .32em; margin-block: -.12em -.32em; }

/* the calculator's go arrow points the way the page reads */
[dir="rtl"] .page-skill .bw-form .bw-submit::after { transform: scaleX(-1); }
[dir="rtl"] .page-skill .bw-form .bw-submit:hover::after { transform: scaleX(-1) translateX(3px); }

/* ── Floating back-to-top (5.21.1) ──
   The home page is long and pinned. The way back waits until a screen and
   a half has scrolled by, and steps aside while the footer's own button is
   on screen or the menu is open. */
.to-top--float {
  position: fixed; z-index: 80;
  inset-block-end: max(1.1rem, env(safe-area-inset-bottom));
  inset-inline-end: 1.1rem;
  inline-size: 46px; block-size: 46px;
  border-radius: 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 84%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: var(--line-strong);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .65);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .45s var(--ease-spring), visibility 0s linear .3s, color .3s, border-color .3s;
}
.to-top--float.is-shown {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s var(--ease), transform .45s var(--ease-spring), visibility 0s, color .3s, border-color .3s;
}
.to-top--float.is-shown:hover { transform: translateY(-3px); }
body.nav-open .to-top--float { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .to-top--float, .to-top--float.is-shown, .to-top--float.is-shown:hover { transform: none; transition: opacity .2s, visibility 0s; }
}
@media print { .to-top--float { display: none !important; } }

/* The badge is a flex row with a gap; the running version (a span, so the
   script can give a Persian page Persian digits) must stay part of its
   sentence rather than become a flex item of its own. */
.hero__ver { display: contents; }