/* ==========================================================================
   Baiond draft — components (direction v2, 2026-08-19)
   --------------------------------------------------------------------------
   Modern-SaaS execution of THEIR identity: lime #CAE825 on near-black, their
   triangle motif, their rounded black hero panel — plus the vocabulary the
   benchmark sites use: glass surfaces, double glow rings, live chrome.

   Sans only (Geist). No monospace, no serif, anywhere on the draft.

   Order below follows the page: primitives → header → §1 hero → §2 ask →
   §3 platform → §4 proof → §5 teaser → floating assistant → motion.
   ========================================================================== */

@layer components {

  /* Decorative glows and frames sit outside their parents by design; none of
     them may create a horizontal scrollbar. `clip` (not `hidden`) keeps
     position: sticky working on the header. */
  html { overflow-x: clip; }
  body { overflow-x: clip; }

  /* ======================================================================
     0. PRIMITIVES
     ====================================================================== */

  /* Flex/grid list items keep `display: list-item`, so the marker survives
     the layout switch. reset.css does not strip it — every list in the draft
     carries role="list", which makes this the exact right hook. */
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }

  /* ----- The black panel ------------------------------------------------
     Their own hero shape: a large rounded rectangle, inset from the page
     edge, holding the content. It stays black in BOTH schemes — it is the
     brand's strongest surface and light mode must not dissolve it. */
  .panel {
    /* The panel is black in BOTH schemes, so everything inside it must keep
       reasoning in dark-surface terms — otherwise light mode hands a chip or
       a ghost button a white glass fill on a black ground. Re-point the
       surface tokens here and every nested component follows. */
    --glass-bg:        rgb(255 255 255 / 0.06);
    --glass-bg-strong: rgb(255 255 255 / 0.09);
    --glass-border:    rgb(255 255 255 / 0.13);
    --glass-inner:     inset 0 1px 0 0 rgb(255 255 255 / 0.10);
    --color-text:        var(--on-panel-text);
    --color-text-muted:  var(--on-panel-text-muted);
    --color-text-subtle: #74766f;
    --color-border:        var(--on-panel-border);
    --color-border-strong: rgb(255 255 255 / 0.18);
    --color-accent-text:   var(--lime-400);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-3xl);
    background: var(--color-panel);
    color: var(--on-panel-text);
    box-shadow: var(--shadow-xl);
  }

  /* Ambient wash inside the panel — replaces the old flat green gradient
     with two soft off-centre lights, one lime, one teal. */
  .panel::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto -10%;
    block-size: 90%;
    background:
      radial-gradient(46% 60% at 22% 12%, var(--wash-1), transparent 70%),
      radial-gradient(38% 52% at 82% 0%, var(--wash-2), transparent 72%);
    z-index: -1;
    pointer-events: none;
  }

  /* Hairline top highlight — the "inner" half of the double border. */
  .panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgb(255 255 255 / 0.08);
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.09);
    pointer-events: none;
  }

  /* ----- Triangle field -------------------------------------------------
     Their homepage scatters small downward triangles in lime, teal and grey
     across the black. Pure CSS clip-path — no image request. */
  .tri-field {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  .tri {
    position: absolute;
    inset-block-start: var(--t);
    inset-inline-start: var(--l);
    inline-size: var(--s);
    block-size: var(--s);
    opacity: var(--o, 0.5);
    rotate: var(--r, 0deg);
    clip-path: polygon(0 0, 100% 0, 50% 86%);
    animation: tri-drift 14s var(--ease-standard) infinite alternate;
    animation-delay: calc(var(--s) * -60ms);
  }

  .tri--lime { background: var(--tri-lime); }
  .tri--teal { background: var(--tri-teal); opacity: calc(var(--o, 0.5) * 1.35); }
  .tri--grey { background: var(--tri-grey); }

  .tri-field--sparse .tri { opacity: calc(var(--o, 0.5) * 0.7); }

  @keyframes tri-drift {
    from { translate: 0 0; }
    to   { translate: 0 10px; }
  }

  /* ----- Chip / dot / pulse -------------------------------------------- */

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--on-panel-text-muted);
    box-shadow: var(--glass-inner);
  }

  .dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--lime-500);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--lime-500) 60%, transparent);
    animation: dot-pulse 2.4s var(--ease-standard) infinite;
    flex: none;
  }

  @keyframes dot-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--lime-500) 55%, transparent); }
    70%  { box-shadow: 0 0 0 0.5rem transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  /* Expanding rings behind a circular call-to-action. */
  .pulse {
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 100%;
    block-size: 100%;
    border-radius: var(--radius-full);
    border: 2px solid color-mix(in oklab, var(--lime-500) 55%, transparent);
    animation: pulse-ring 2.6s var(--ease-standard) infinite;
    pointer-events: none;
  }

  .pulse--2 { animation-delay: 1.3s; }

  @keyframes pulse-ring {
    0%   { scale: 1;   opacity: 0.75; }
    80%  { scale: 2.1; opacity: 0; }
    100% { scale: 2.1; opacity: 0; }
  }

  /* ----- Eyebrow / section head ---------------------------------------- */

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent-text);
  }

  .eyebrow__rule {
    inline-size: 1.75rem;
    block-size: 1px;
    background: currentColor;
    opacity: 0.55;
  }

  .eyebrow--on-panel { color: var(--lime-400); }

  .section-head {
    max-inline-size: 46rem;
    margin-block-end: var(--space-8);
  }

  .section-head h2 {
    margin-block-start: var(--space-4);
    font-size: var(--text-3xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tighter);
  }

  .section-head--center {
    margin-inline: auto;
    text-align: center;
  }

  .section-head--center .eyebrow { justify-content: center; }

  .section-sub {
    margin-block-start: var(--space-4);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

  /* ----- Kicker (row label) -------------------------------------------- */

  .kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
  }

  .kicker__icon {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-accent-fg);
    box-shadow: var(--glow-lime-soft);
  }

  /* ----- Buttons -------------------------------------------------------- */

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-normal) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
  }

  .button--lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-base);
  }

  .button--sm { padding: var(--space-2) var(--space-4); }

  .button:hover { transform: translateY(-1px); }
  .button:active { transform: translateY(0); }

  .button--primary {
    background: var(--color-accent);
    color: var(--color-accent-fg);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--lime-500) 60%, transparent),
                var(--glow-lime-soft);
  }

  .button--primary:hover {
    background: var(--color-accent-hover);
    box-shadow: 0 0 0 1px var(--lime-400),
                0 0 34px -6px color-mix(in oklab, var(--lime-500) 70%, transparent);
  }

  .button--ghost {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    color: var(--on-panel-text);
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-inner);
  }

  .button--ghost:hover {
    border-color: color-mix(in oklab, var(--lime-500) 45%, transparent);
    background: var(--glass-bg-strong);
  }

  /* ----- Highlighted reading (their PDF's lime value) ------------------- */

  .hl {
    background: none;
    color: var(--color-accent-text);
    font-weight: var(--font-medium);
    white-space: nowrap;
  }

  /* ----- Tick list ------------------------------------------------------ */

  .ticks {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
  }

  .ticks li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .ticks .icon {
    color: var(--color-accent-text);
    margin-block-start: 0.1em;
  }

  /* ----- Scroll reveal -------------------------------------------------- */

  /* Opt-IN, not opt-out: the hidden state is scoped to `.js`, which the
     inline head script sets before first paint. With JS off nothing is ever
     left invisible — the observer that would reveal it never runs. */
  .js .reveal {
    opacity: 0;
    translate: 0 18px;
    transition: opacity var(--duration-slower) var(--ease-emphasized),
                translate var(--duration-slower) var(--ease-emphasized);
  }

  .js .reveal.is-in { opacity: 1; translate: 0 0; }


  /* ======================================================================
     1. HEADER
     ====================================================================== */

  /* base.css underlines links for prose; the chrome and the assistant are
     not prose. main is handled in base.css, these two are not inside it. */
  /* `.site-header a` is more specific than `.button--primary`, so without the
     :not() it repaints the header CTA's dark-on-lime label in the header's
     own text colour — white, and unreadable, in dark mode. */
  .site-header a:not(.button),
  .bot a:not(.button) {
    color: inherit;
    text-decoration: none;
  }

  .site-header .button,
  .bot .button { text-decoration: none; }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 60;
    padding-block: var(--space-4);
  }

  .site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    background: color-mix(in oklab, var(--color-bg) 72%, transparent);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    box-shadow: var(--glass-inner), var(--shadow-md);
    transition: box-shadow var(--duration-normal) var(--ease-standard),
                background-color var(--duration-normal) var(--ease-standard);
  }

  .site-header.is-stuck .site-header__inner {
    background: color-mix(in oklab, var(--color-bg) 88%, transparent);
    box-shadow: var(--glass-inner), var(--shadow-lg);
  }

  .site-brand {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    flex: none;
  }

  .site-brand img {
    inline-size: auto;
    block-size: 1.375rem;
    display: block;
  }

  /* Their wordmark is lime on transparent. On the light ground the page
     opens with, it needs its own dark lockup rather than a filter that would
     falsify the colour; on the dark ground it stands alone. */
  .site-brand { background: var(--color-panel); }
  [data-theme="dark"] .site-brand { background: none; }

  .site-nav { margin-inline-end: auto; }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard);
  }

  .site-nav__link:hover,
  .site-nav__item--mega[data-open] .site-nav__trigger {
    color: var(--color-text);
    background: var(--glass-bg);
  }

  .site-nav__chev {
    --icon-size: 0.9em;
    opacity: 0.6;
    transition: rotate var(--duration-normal) var(--ease-standard);
  }

  .site-nav__item--mega[data-open] .site-nav__chev { rotate: 180deg; }

  /* ----- Mega menu ------------------------------------------------------ */

  .site-nav__item--mega { position: static; }

  .mega {
    position: absolute;
    inset-block-start: calc(100% + var(--space-3));
    inset-inline: 0;
    z-index: 50;
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--glass-border);
    background: color-mix(in oklab, var(--color-bg-subtle) 98%, transparent);
    backdrop-filter: blur(28px) saturate(1.5);
    box-shadow: var(--glass-inner), var(--shadow-xl),
                0 0 0 1px color-mix(in oklab, var(--lime-500) 10%, transparent);
    opacity: 0;
    visibility: hidden;
    translate: 0 -8px;
    transition: opacity var(--duration-normal) var(--ease-standard),
                translate var(--duration-normal) var(--ease-emphasized),
                visibility 0s linear var(--duration-normal);
  }

  .site-nav__item--mega[data-open] .mega {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition-delay: 0s;
  }

  .mega__inner {
    display: grid;
    grid-template-columns: 1fr 20rem;
    gap: var(--space-7);
  }

  .mega__title {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent-text);
  }

  .mega__sub {
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-inline-size: 34rem;
  }

  .mega__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-block-start: var(--space-5);
  }

  .mega__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    transition: background-color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
  }

  .mega__item:hover {
    background: var(--glass-bg);
    border-color: var(--glass-border);
  }

  .mega__item-icon {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: none;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-accent-fg);
    transition: box-shadow var(--duration-normal) var(--ease-standard);
  }

  .mega__item:hover .mega__item-icon {
    box-shadow: var(--glow-lime-soft);
  }

  .mega__item-body { display: grid; gap: 0.15rem; }

  .mega__item-name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
  }

  .mega__item-text {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .mega__feature {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    box-shadow: var(--glass-inner);
    transition: border-color var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard);
  }

  .mega__feature:hover {
    border-color: color-mix(in oklab, var(--lime-500) 40%, transparent);
    box-shadow: var(--glass-inner), var(--glow-lime-soft);
  }

  .mega__feature-media {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    margin-block-end: var(--space-2);
  }

  .mega__feature-media img {
    display: block;
    inline-size: 100%;
    block-size: 7.5rem;
    object-fit: cover;
    object-position: top left;
  }

  .mega__feature-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent-text);
  }

  .mega__feature-title {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text);
  }

  .mega__feature-text {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
  }

  .mega__feature-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-accent-text);
  }

  .mega__feature:hover .mega__feature-cta .icon { translate: 3px 0; }
  .mega__feature-cta .icon { transition: translate var(--duration-fast) var(--ease-standard); }

  /* ----- Header actions ------------------------------------------------- */

  .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    /* The nav carries `margin-inline-end: auto` on desktop, but it is
       display:none under 1080px — without this the actions would sit up
       against the wordmark instead of on the right edge. */
    margin-inline-start: auto;
  }

  .lang-switch {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
  }

  .lang-switch a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-subtle);
    transition: color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard);
  }

  .lang-switch a:hover { color: var(--color-text); }

  .lang-switch a[aria-current="true"] {
    background: var(--color-accent);
    color: var(--color-accent-fg);
    box-shadow: var(--glow-lime-soft);
  }

  .flag {
    inline-size: 1.125rem;
    block-size: 0.75rem;
    border-radius: 2px;
    display: block;
    flex: none;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2);
  }

  .theme-toggle {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard);
  }

  .theme-toggle:hover {
    color: var(--color-accent-text);
    border-color: color-mix(in oklab, var(--lime-500) 40%, transparent);
    box-shadow: var(--glow-lime-soft);
  }

  .theme-toggle__icon {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    transition: opacity var(--duration-normal) var(--ease-standard),
                rotate var(--duration-slow) var(--ease-spring),
                scale var(--duration-normal) var(--ease-spring);
  }

  /* The button offers the OTHER scheme: light shows the moon, dark the sun. */
  .theme-toggle__icon--sun { opacity: 0; rotate: 90deg; scale: 0.6; }
  [data-theme="dark"] .theme-toggle__icon--sun  { opacity: 1; rotate: 0deg; scale: 1; }
  [data-theme="dark"] .theme-toggle__icon--moon { opacity: 0; rotate: -90deg; scale: 0.6; }

  .nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0 0.55rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    cursor: pointer;
  }

  .nav-burger__bar {
    display: block;
    block-size: 1.5px;
    background: var(--color-text);
    transition: translate var(--duration-fast) var(--ease-standard),
                rotate var(--duration-fast) var(--ease-standard);
  }

  .nav-burger[aria-expanded="true"] .nav-burger__bar:first-child { translate: 0 3px; rotate: 45deg; }
  .nav-burger[aria-expanded="true"] .nav-burger__bar:last-child  { translate: 0 -3px; rotate: -45deg; }

  .mobile-nav {
    display: none;
    margin-block-start: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--glass-border);
    background: color-mix(in oklab, var(--color-bg-subtle) 98%, transparent);
    backdrop-filter: blur(24px);
    box-shadow: var(--shadow-xl);
  }

  .mobile-nav.is-open { display: block; }

  .mobile-nav__list { display: grid; gap: var(--space-1); margin-block-end: var(--space-5); }

  .mobile-nav__link,
  .mobile-nav summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
  }

  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav details[open] summary .icon { rotate: 180deg; }
  .mobile-nav summary .icon { transition: rotate var(--duration-fast) var(--ease-standard); }

  .mobile-nav details ul {
    display: grid;
    gap: var(--space-1);
    padding-inline-start: var(--space-3);
    padding-block-end: var(--space-3);
  }

  .mobile-nav details a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .mobile-nav details a .icon { color: var(--color-accent-text); }
  .mobile-nav .button { inline-size: 100%; }


  /* ======================================================================
     2. § 1 HERO
     ====================================================================== */

  .hero { padding-block: var(--space-5) var(--space-9); }


  .hero__panel {
    padding: clamp(var(--space-7), 5vw, var(--space-10)) var(--space-5);
  }

  .hero__body {
    display: grid;
    justify-items: center;
    gap: var(--space-6);
    text-align: center;
    max-inline-size: 60rem;
    margin-inline: auto;
  }

  .hero__title {
    font-size: var(--text-5xl);
    /* The h1 is the ONLY thing on the draft allowed past 500. */
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--on-panel-text);
    margin: 0;
  }

  .hero__title-accent {
    color: var(--lime-500);
    text-shadow: 0 0 60px color-mix(in oklab, var(--lime-500) 40%, transparent);
  }

  .hero__sub {
    max-inline-size: 46rem;
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--on-panel-text-muted);
    margin: 0;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }

  .hero__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3) var(--space-5);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--on-panel-border);
    inline-size: 100%;
    max-inline-size: 52rem;
  }

  .hero__trust-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--zinc-500);
  }

  .hero__trust ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
  }

  .hero__trust li {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--on-panel-text-muted);
  }

  /* ----- The film ------------------------------------------------------- */

  .film {
    position: relative;
    inline-size: 100%;
    max-inline-size: 56rem;
    margin: var(--space-2) 0 0;
  }

  /* Outer half of the double glowing border — a soft lime bloom that sits
     behind the frame and is not clipped by it. */
  .film__glow {
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-2xl);
    background: linear-gradient(140deg,
                color-mix(in oklab, var(--lime-500) 70%, transparent),
                color-mix(in oklab, var(--teal-500) 45%, transparent) 45%,
                transparent 70%);
    filter: blur(18px);
    opacity: 0.55;
    z-index: -1;
    transition: opacity var(--duration-slow) var(--ease-standard);
  }

  .film:hover .film__glow { opacity: 0.8; }

  /* Inner half — a 1px lime-tinted ring plus a white hairline highlight. */
  .film__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background: #000;
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--lime-500) 30%, transparent),
      inset 0 1px 0 0 rgb(255 255 255 / 0.14),
      var(--shadow-lg);
    aspect-ratio: 16 / 9;
  }

  .film__video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .film__cta {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-4);
    border: 0;
    background: radial-gradient(60% 60% at 50% 50%, rgb(0 0 0 / 0.35), transparent 70%);
    color: var(--white);
    cursor: pointer;
    transition: opacity var(--duration-slow) var(--ease-standard),
                visibility 0s linear var(--duration-slow);
  }

  .film__cta-disc {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    border-radius: var(--radius-full);
    background: var(--lime-500);
    color: #10130a;
    box-shadow: 0 0 40px -4px color-mix(in oklab, var(--lime-500) 75%, transparent);
    --icon-size: 1.5rem;
    padding-inline-start: 0.25rem;
    animation: disc-breathe 2.6s var(--ease-standard) infinite;
  }

  @keyframes disc-breathe {
    0%, 100% { scale: 1; }
    50%      { scale: 1.06; }
  }

  .film__cta .pulse {
    inline-size: 4.5rem;
    block-size: 4.5rem;
    inset: auto;
    position: absolute;
    inset-block-start: calc(50% - 2.25rem - 1.65rem);
    inset-inline-start: calc(50% - 2.25rem);
  }

  .film__cta-label {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: rgb(0 0 0 / 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / 0.16);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
  }

  .film__sound {
    position: absolute;
    inset-block-end: var(--space-4);
    inset-inline-end: var(--space-4);
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-full);
    border: 1px solid rgb(255 255 255 / 0.2);
    background: rgb(0 0 0 / 0.55);
    backdrop-filter: blur(10px);
    color: var(--white);
    cursor: pointer;
    animation: sound-throb 2.2s var(--ease-standard) infinite;
  }

  @keyframes sound-throb {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--lime-500) 0%, transparent); scale: 1; }
    45%      { box-shadow: 0 0 0 8px color-mix(in oklab, var(--lime-500) 22%, transparent); scale: 1.07; }
  }

  .film__sound-icon { grid-area: 1 / 1; transition: opacity var(--duration-fast) var(--ease-standard); }
  .film__sound-icon--on { opacity: 0; }

  .film__badge {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-start: var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    background: rgb(0 0 0 / 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / 0.14);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    color: rgb(255 255 255 / 0.85);
  }

  /* Sound engaged: the overlay clears, the chip becomes a plain toggle. */
  .film.is-live .film__cta { opacity: 0; visibility: hidden; }
  .film.is-live .film__sound { animation: none; border-color: color-mix(in oklab, var(--lime-500) 55%, transparent); color: var(--lime-400); }
  .film.is-live .film__sound-icon--off { opacity: 0; }
  .film.is-live .film__sound-icon--on  { opacity: 1; }
  .film.is-live.is-muted .film__sound-icon--off { opacity: 1; }
  .film.is-live.is-muted .film__sound-icon--on  { opacity: 0; }


  /* ======================================================================
     3. § 2 ASK BAIOND
     ====================================================================== */

  .ask {
    position: relative;
    padding-block: var(--space-9);
    overflow: hidden;
  }

  .ask__wash {
    position: absolute;
    inset-block-start: -10%;
    inset-inline: -10%;
    block-size: 60%;
    background: radial-gradient(38% 46% at 50% 0%,
                color-mix(in oklab, var(--lime-500) 7%, transparent), transparent 72%);
    pointer-events: none;
    z-index: -1;
  }

  /* The frame is a PURE surface — white on light, near-black on dark — and
     separates from the page with a 1px gradient hairline rather than a tint,
     a blur halo and a drop shadow. `.chatx` is the 1px ring; `.chatx__frame`
     is the surface sitting inside it. Everything within separates with
     hairlines too: no grey fills, no shadows. */
  .chatx {
    position: relative;
    padding: 1px;
    border-radius: var(--radius-2xl);
    background:
      linear-gradient(150deg,
        var(--color-accent) 0%,
        color-mix(in oklab, var(--teal-500) 70%, transparent) 26%,
        var(--color-border-strong) 52%,
        var(--color-border) 100%);
  }

  .chatx__frame {
    border-radius: calc(var(--radius-2xl) - 1px);
    overflow: hidden;
    background: var(--color-bg-inset);
  }

  .chatx__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-block-end: 1px solid var(--color-border);
  }

  .chatx__mark {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-sm);
    background: var(--lime-500);
    color: #10130a;
    --icon-size: 1rem;
  }

  .chatx__app {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
  }

  .chatx__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .chatx__dots { display: flex; gap: 5px; }
  .chatx__dots i {
    inline-size: 7px;
    block-size: 7px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
  }

  .chatx__body {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
  }

  .chatx__side {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    border-inline-end: 1px solid var(--color-border);
  }

  .chatx__tabs {
    display: grid;
    align-content: start;
    gap: var(--space-2);
  }

  /* Pins to the foot of the rail — without a tint doing the separating, the
     empty sidebar was the loudest thing in the frame. */
  .chatx__rail-note {
    margin-block-start: auto;
    padding-block-start: var(--space-5);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--color-text-subtle);
    text-wrap: pretty;
  }

  .chatx__tab {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    background: none;
    text-align: start;
    cursor: pointer;
    font-family: inherit;
    transition: background-color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
  }

  .chatx__tab { position: relative; }

  .chatx__tab:hover { border-color: var(--color-border); }

  /* Selected reads through structure, not fill: a lime edge bar, a lime
     border and the icon tile going solid. */
  .chatx__tab[aria-selected="true"] {
    border-color: var(--color-accent);
  }

  .chatx__tab[aria-selected="true"]::before {
    content: "";
    position: absolute;
    inset-block: var(--space-3);
    inset-inline-start: -1px;
    inline-size: 3px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
  }

  .chatx__tab-icon {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: none;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
  }

  .chatx__tab[aria-selected="true"] .chatx__tab-icon {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-fg);
  }

  .chatx__tab-body { display: grid; gap: 0.1rem; min-inline-size: 0; }

  .chatx__tab-name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
  }

  .chatx__tab-site {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chatx__main {
    padding: var(--space-6);
    display: grid;
    align-content: start;
    gap: var(--space-5);
    min-block-size: 27rem;
  }

  .chatx__panel {
    display: grid;
    align-content: start;
    gap: var(--space-5);
  }

  .chatx__panel[hidden] { display: none; }

  /* ----- Messages ------------------------------------------------------- */

  .msg { display: grid; gap: var(--space-2); }

  .msg--q { justify-items: end; text-align: end; }

  .msg__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-subtle);
  }

  .msg__meta .icon { --icon-size: 1em; color: var(--color-accent-text); }

  .msg__avatar {
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-accent-fg);
    /* Below ~15px the sparkle collapses into a solid lime block. */
    --icon-size: 0.95rem;
  }

  .msg__bubble {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }

  /* The visitor's own message is the one place a full-strength lime fill
     belongs in the transcript: it separates "you asked" from "baiond
     answered" without a tint, and it reads the same on both grounds. */
  .msg--q .msg__bubble {
    max-inline-size: 34rem;
    background: var(--color-accent);
    border-end-end-radius: var(--radius-sm);
    color: var(--color-accent-fg);
    font-weight: var(--font-medium);
    box-shadow: var(--glow-lime-soft);
  }

  .msg__bubble--a {
    border-start-start-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    border-inline-start: 2px solid var(--color-accent);
    color: var(--color-text);
  }

  /* ----- Live readout tiles --------------------------------------------- */

  .readout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .readout__tile {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
  }

  .readout__tile::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    background: var(--color-border-strong);
  }

  .readout__tile--bad::after  { background: #ff6b52; }
  .readout__tile--warn::after { background: var(--lime-500); }
  .readout__tile--ok::after   { background: var(--teal-500); }

  .readout__label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-subtle);
  }

  .readout__value {
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tighter);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .readout__value small {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-subtle);
    margin-inline-start: 0.25rem;
  }

  .readout__tile--bad .readout__value { color: #ff8b76; }

  /* ----- Recommendation + source ---------------------------------------- */

  .msg__rec {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    border-inline-start: 3px solid var(--color-accent);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
  }

  .msg__rec strong {
    color: var(--color-text);
    font-weight: var(--font-medium);
  }

  .msg__rec-icon { color: var(--lime-500); flex: none; }

  .msg__source {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .chatx__typing {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
  }

  .chatx__typing-dots { display: inline-flex; gap: 4px; }

  .chatx__typing-dots i {
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--radius-full);
    background: var(--lime-500);
    animation: typing 1.2s var(--ease-standard) infinite;
  }

  .chatx__typing-dots i:nth-child(2) { animation-delay: 0.15s; }
  .chatx__typing-dots i:nth-child(3) { animation-delay: 0.3s; }

  @keyframes typing {
    0%, 60%, 100% { opacity: 0.25; translate: 0 0; }
    30%           { opacity: 1;    translate: 0 -3px; }
  }

  .chatx__replay {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    background: none;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
  }

  .chatx__replay:hover {
    color: var(--color-accent-text);
    border-color: color-mix(in oklab, var(--lime-500) 40%, transparent);
  }

  /* JS-driven staging: hide the answer until the "thinking" beat passes. */
  .chatx.is-armed [data-step="typing"] { display: none; }
  .chatx.is-armed [data-step="a"] { opacity: 0; translate: 0 8px; }

  .chatx.is-armed .chatx__panel.is-thinking [data-step="typing"] { display: inline-flex; }
  .chatx.is-armed .chatx__panel.is-thinking [data-step="a"] { display: none; }

  .chatx.is-armed .chatx__panel.is-answered [data-step="a"] {
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--duration-slow) var(--ease-emphasized),
                translate var(--duration-slow) var(--ease-emphasized);
  }

  .chatx.is-armed .chatx__panel.is-thinking .chatx__replay,
  .chatx.is-armed .chatx__panel:not(.is-answered) .chatx__replay { visibility: hidden; }


  /* ======================================================================
     4. § 3 PLATFORM
     ====================================================================== */

  .platform { padding-block: var(--space-9); }

  .pipeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
    margin-block-end: var(--space-9);
  }

  .pipeline__step {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-bg-inset);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard),
                translate var(--duration-normal) var(--ease-emphasized);
  }

  .pipeline__step:hover {
    translate: 0 -3px;
    border-color: color-mix(in oklab, var(--lime-500) 55%, transparent);
    box-shadow: var(--glow-lime-soft);
  }

  /* A chevron in each gap, so four cards read as one sequence. */
  .pipeline__step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-end: calc(-0.5 * var(--space-5) - 5px);
    inset-block-start: 2.4rem;
    inline-size: 9px;
    block-size: 9px;
    border-block-start: 2px solid var(--color-accent);
    border-inline-end: 2px solid var(--color-accent);
    rotate: 45deg;
  }

  /* On black, an inset surface is a hair off the page ground; the cards need
     one more step to read as cards. */
  [data-theme="dark"] .pipeline__step { background: var(--color-bg-subtle); }

  .pipeline__icon {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-accent-fg);
    box-shadow: var(--glow-lime-soft);
  }

  .pipeline__num {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline-end: var(--space-5);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
  }

  .pipeline__name {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text);
  }

  .pipeline__text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
  }

  .feature {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(var(--space-6), 5vw, var(--space-9));
    align-items: center;
    padding-block: var(--space-8);
  }

  .feature--flip .feature__copy { order: 2; }

  .feature__copy h3 {
    margin-block: var(--space-4) var(--space-4);
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tighter);
  }

  .feature__copy > p {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
  }

  .protocols {
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }

  .protocols__label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    margin-block-end: var(--space-3);
  }

  .protocols ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .protocols li {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard);
  }

  .protocols li:hover {
    border-color: color-mix(in oklab, var(--lime-500) 55%, transparent);
    box-shadow: var(--glow-lime-soft);
  }

  /* ----- Product screenshot frame --------------------------------------- */

  .shot { position: relative; }

  .shot__glow {
    position: absolute;
    inset: 8% -4% -6% -4%;
    border-radius: var(--radius-2xl);
    background: linear-gradient(140deg,
      color-mix(in oklab, var(--lime-500) 60%, transparent),
      color-mix(in oklab, var(--teal-500) 45%, transparent) 55%,
      transparent 78%);
    filter: blur(34px);
    opacity: 0.26;
    z-index: -1;
    transition: opacity var(--duration-slow) var(--ease-standard);
  }

  .shot:hover .shot__glow { opacity: 0.45; }

  /* On the light ground a wide blurred lime→teal field reads as a green
     smudge behind the screenshot; on black it reads as a glow. Different
     ground, different amount. */
  [data-theme="dark"] .shot__glow { opacity: 0.4; }
  [data-theme="dark"] .shot:hover .shot__glow { opacity: 0.62; }

  .shot__frame {
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
    background: var(--color-bg-inset);
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--lime-500) 16%, transparent),
      var(--glass-inner),
      var(--shadow-xl);
    transition: translate var(--duration-slow) var(--ease-emphasized);
  }

  .shot:hover .shot__frame { translate: 0 -4px; }

  .shot__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    background: color-mix(in oklab, var(--color-bg-subtle) 70%, transparent);
  }

  .shot__bar i {
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
  }

  .shot__bar i:first-child { background: color-mix(in oklab, var(--lime-500) 70%, transparent); }

  .shot__bar span {
    margin-inline-start: var(--space-3);
    block-size: 0.75rem;
    inline-size: 40%;
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
  }

  .shot img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-block-size: 32rem;
    object-fit: cover;
    object-position: top center;
  }


  /* ======================================================================
     5. § 4 PROOF
     ====================================================================== */

  .proof { padding-block: var(--space-9); }

  .proof__panel { padding: clamp(var(--space-7), 4vw, var(--space-9)); }

  .proof__body { display: grid; gap: var(--space-6); }

  .proof__body h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tighter);
    color: var(--on-panel-text);
    max-inline-size: 22ch;
  }

  .quote {
    position: relative;
    display: grid;
    gap: var(--space-5);
    padding-inline-start: var(--space-7);
  }

  .quote__mark {
    position: absolute;
    inset-block-start: -1.2rem;
    inset-inline-start: -0.4rem;
    font-size: 6rem;
    line-height: 1;
    color: var(--lime-500);
    opacity: 0.35;
  }

  .quote blockquote p {
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--on-panel-text);
    max-inline-size: 52rem;
  }

  .quote figcaption { display: grid; gap: 0.15rem; }

  .quote__cite {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--lime-400);
  }

  .quote__sub {
    font-size: var(--text-sm);
    color: var(--zinc-500);
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    padding-block: var(--space-6);
    border-block: 1px solid var(--on-panel-border);
  }

  .stats__item { display: grid; gap: var(--space-2); }

  .stats__value {
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tighter);
    color: var(--lime-500);
  }

  .stats__label {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--on-panel-text-muted);
  }

  .refs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .refs__card {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid var(--on-panel-border);
    background: rgb(255 255 255 / 0.035);
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.06);
    transition: border-color var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard);
  }

  .refs__card:hover {
    border-color: color-mix(in oklab, var(--lime-500) 42%, transparent);
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.08), var(--glow-lime-soft);
  }

  .refs__icon {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-md);
    background: var(--lime-500);
    color: #10130a;
  }

  .refs__name {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--on-panel-text);
  }

  .refs__text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--on-panel-text-muted);
  }


  /* ======================================================================
     6. § 5 TEASER
     ====================================================================== */

  .teaser { padding-block: var(--space-9) var(--space-10); }

  .teaser__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .teaser__card {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-inner);
    transition: border-color var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard),
                translate var(--duration-normal) var(--ease-emphasized);
  }

  .teaser__card:hover {
    translate: 0 -3px;
    border-color: color-mix(in oklab, var(--lime-500) 40%, transparent);
    box-shadow: var(--glass-inner), var(--glow-lime-soft);
  }

  .teaser__icon {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-accent-fg);
    box-shadow: var(--glow-lime-soft);
  }

  .teaser__kicker {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent-text);
  }

  .teaser__card h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
  }

  .teaser__card p {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
  }

  /* A ghost of the next section, dissolving — "the page continues". */
  .teaser__fade {
    display: grid;
    gap: var(--space-5);
    margin-block-start: var(--space-7);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
    pointer-events: none;
  }

  .teaser__fade-head {
    display: block;
    inline-size: 22rem;
    max-inline-size: 60%;
    block-size: 1.5rem;
    margin-inline: auto;
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
  }

  .teaser__fade-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .teaser__fade-row span {
    display: block;
    block-size: 6rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
  }

  .teaser__cta {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-8);
    text-align: center;
  }

  .teaser__cta-label {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
  }

  .teaser__cta-text {
    max-inline-size: 34rem;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .teaser__cta .button { margin-block-start: var(--space-3); }


  /* ======================================================================
     7. FLOATING ASSISTANT
     ====================================================================== */

  .bot {
    position: fixed;
    inset-block-end: var(--space-5);
    inset-inline-end: var(--space-5);
    z-index: 80;
    display: grid;
    justify-items: end;
    gap: var(--space-3);
  }

  .bot__launcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--lime-500);
    color: #10130a;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    cursor: pointer;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--lime-500) 70%, transparent),
                0 12px 30px -8px rgb(0 0 0 / 0.5),
                var(--glow-lime-soft);
    transition: transform var(--duration-fast) var(--ease-spring);
  }

  .bot__launcher:hover { transform: translateY(-2px); }

  .bot__launcher::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: bot-halo 3s var(--ease-standard) infinite;
    pointer-events: none;
  }

  @keyframes bot-halo {
    0%, 70%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--lime-500) 45%, transparent); }
    35%           { box-shadow: 0 0 0 12px transparent; }
  }

  .bot.is-open .bot__launcher::after { animation: none; }

  .bot__launcher-icon { display: grid; place-items: center; }
  .bot__launcher-icon--close { display: none; }

  .bot.is-open .bot__launcher-icon--open { display: none; }
  .bot.is-open .bot__launcher-icon--close { display: grid; }
  .bot.is-open .bot__launcher-label { display: none; }
  .bot.is-open .bot__launcher { padding: var(--space-3); }

  .bot__panel[hidden] { display: none; }

  .bot__panel {
    inline-size: min(23rem, calc(100vw - 2 * var(--space-5)));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    max-block-size: min(32rem, calc(100vh - 8rem));
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: color-mix(in oklab, var(--color-bg-subtle) 98%, transparent);
    backdrop-filter: blur(26px) saturate(1.4);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--lime-500) 18%, transparent),
                var(--glass-inner),
                var(--shadow-xl);
    animation: bot-in var(--duration-normal) var(--ease-spring);
  }

  @keyframes bot-in {
    from { opacity: 0; translate: 0 12px; scale: 0.98; }
    to   { opacity: 1; translate: 0 0;    scale: 1; }
  }

  .bot__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-border);
  }

  .bot__mark {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-md);
    background: var(--lime-500);
    color: #10130a;
  }

  .bot__titles { display: grid; margin-inline-end: auto; }
  .bot__titles strong { font-size: var(--text-sm); }
  .bot__titles small {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }
  .bot__titles .dot { inline-size: 0.4rem; block-size: 0.4rem; }

  .bot__close {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    color: var(--color-text-subtle);
    cursor: pointer;
  }

  .bot__close:hover { color: var(--color-text); }

  .bot__log {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-4);
    overflow-y: auto;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  .bot__msg {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    max-inline-size: 92%;
  }

  .bot__msg--a {
    justify-self: start;
    border-start-start-radius: var(--radius-sm);
    background: var(--color-bg-inset);
    border: 1px solid var(--color-border);
    border-inline-start: 2px solid color-mix(in oklab, var(--lime-500) 70%, transparent);
    color: var(--color-text);
  }

  .bot__msg--q {
    justify-self: end;
    border-end-end-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-accent-fg);
    font-weight: var(--font-medium);
  }

  .bot__msg-rec {
    display: block;
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-3);
    border-block-start: 1px dashed color-mix(in oklab, var(--lime-500) 30%, transparent);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .bot__msg-rec strong { color: var(--color-text); }

  .bot__typing {
    justify-self: start;
    display: inline-flex;
    gap: 4px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
  }

  .bot__typing i {
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--radius-full);
    background: var(--lime-500);
    animation: typing 1.2s var(--ease-standard) infinite;
  }

  .bot__typing i:nth-child(2) { animation-delay: 0.15s; }
  .bot__typing i:nth-child(3) { animation-delay: 0.3s; }

  .bot__prompts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0 var(--space-4) var(--space-4);
  }

  .bot__prompt {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
  }

  .bot__prompt:hover {
    color: var(--color-accent-text);
    border-color: color-mix(in oklab, var(--lime-500) 45%, transparent);
  }

  .bot__form {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-block-start: 1px solid var(--color-border);
  }

  .bot__form input {
    flex: 1;
    min-inline-size: 0;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-family: inherit;
    background: var(--color-bg-inset);
    border-color: var(--color-border);
  }

  .bot__form button {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: none;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--lime-500);
    color: #10130a;
    cursor: pointer;
  }

  .bot__note {
    padding: 0 var(--space-4) var(--space-3);
    font-size: 0.6875rem;
    color: var(--color-text-subtle);
    text-align: center;
  }


  /* ======================================================================
     8. RESPONSIVE
     ====================================================================== */

  @media (max-width: 1080px) {
    .site-nav { display: none; }
    .nav-burger { display: flex; }
    .site-header__cta { display: none; }
    .mega__inner { grid-template-columns: 1fr; }
  }

  @media (max-width: 900px) {
    .chatx__body { grid-template-columns: minmax(0, 1fr); }

    .chatx__tab[aria-selected="true"]::before { display: none; }
    .chatx__rail-note { display: none; }

    .chatx__side {
      min-inline-size: 0;
      border-inline-end: 0;
      border-block-end: 1px solid var(--color-border);
      padding: var(--space-4);
    }

    .chatx__tabs {
      display: flex;
      min-inline-size: 0;
      gap: var(--space-2);
      overflow-x: auto;
      scrollbar-width: none;
    }

    .chatx__tabs::-webkit-scrollbar { display: none; }
    .chatx__tab { flex: 0 0 auto; }
    .chatx__tab-site { display: none; }
    .chatx__main { padding: var(--space-5); min-block-size: 0; min-inline-size: 0; }

    .feature,
    .pipeline,
    .stats,
    .refs,
    .teaser__grid,
    .teaser__fade-row {
      grid-template-columns: minmax(0, 1fr);
    }

    .feature--flip .feature__copy { order: 0; }
    .feature { padding-block: var(--space-7); }
    .pipeline__step:not(:last-child)::after { display: none; }
  }

  @media (max-width: 640px) {
    /* The scatter needs room to read as a scatter; at phone width half of it
       lands on the copy instead of beside it. */
    .tri-field .tri:nth-child(even) { display: none; }

    .hero__panel { padding-inline: var(--space-4); border-radius: var(--radius-2xl); }
    .hero__title { font-size: var(--text-4xl); }
    .readout { grid-template-columns: minmax(0, 1fr); }
    .msg--q .msg__bubble { max-inline-size: 100%; }
    .lang-switch a span { display: none; }
    .lang-switch a { padding: 0.35rem; }
    .film__cta-label { font-size: var(--text-xs); }
    .film__cta-disc { inline-size: 3.5rem; block-size: 3.5rem; --icon-size: 1.2rem; }
    .film__cta .pulse { inline-size: 3.5rem; block-size: 3.5rem;
      inset-block-start: calc(50% - 1.75rem - 1.5rem);
      inset-inline-start: calc(50% - 1.75rem); }
    .bot { inset-inline-end: var(--space-4); inset-block-end: var(--space-4); }
    .bot__launcher-label { display: none; }
    .bot__launcher { padding: var(--space-4); }
    .quote__mark { display: none; }
    .quote { padding-inline-start: 0; }
  }


  /* ======================================================================
     9. MOTION PREFERENCES
     Everything decorative above is animation; honour the OS switch.
     ====================================================================== */

  @media (prefers-reduced-motion: reduce) {
    .tri,
    .dot,
    .pulse,
    .film__cta-disc,
    .film__sound,
    .chatx__typing-dots i,
    .bot__typing i,
    .bot__panel,
    .bot__launcher::after {
      animation: none !important;
    }

    .reveal { opacity: 1; translate: 0 0; transition: none; }
    .shot:hover .shot__frame { translate: 0 0; }
    .button:hover { transform: none; }
  }
}

/* ==========================================================================
   Layer note: `.container--wide` is declared in @layer utilities, which the
   cascade resolves AFTER @layer components — so a components-layer override
   of --_container-max loses regardless of specificity. The hero panel's
   break-out therefore has to be authored in the utilities layer too.
   ========================================================================== */

@layer utilities {
  /* The panel spans wider than the container the other sections use; the
     content inside it stays on the same measure (see .hero__body). */
  .hero > .container { --_container-max: var(--container-xwide); }
}