/* ==========================================================================
   Baiond — Components (Phase 0 visual language)
   --------------------------------------------------------------------------
   Everything here consumes tokens.css. Structure comes from utilities.css
   (.container / .stack / .cluster / .auto-grid); this file adds identity.

   Sections:
     1. Panel scope (black surfaces re-point the semantic tokens)
     2. Bands + section heads
     3. Header pill → public/assets/css/nav.css (Phase 3: header, mega menus, drawer)
     4. Buttons, links, chips, glow frame
     5. Hero + hero art
     6. Ask baiond frame
     7. Feature row + device frame
     8. Cards (industries) + CTA strip
     9. Type specimen, footer, 404, sandbox helpers
    10. Reduced motion
   ========================================================================== */

@property --btn-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Registered so the primary button's gradient stops can transition on
   hover. Swapping the gradient for a flat colour is not animatable and
   left a frame of transparent (= black) fill mid-transition. */
@property --btn-fill-top {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}
@property --btn-fill-bottom {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}

@layer components {

  /* Lists that are layout, not prose: the role attribute is the hook
     (it also keeps VoiceOver announcing them as lists). */
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }

  /* ======================================================================
     1. PANEL SCOPE
     A black surface in EITHER scheme. Everything nested re-reads the
     semantic tokens, so a chip or ghost button inside never turns into
     white glass on black in light mode.
     ====================================================================== */

  .panel,
  .band--panel,
  .rpanel,
  .photo-band__frame,
  .ihero--photo .ihero__grid,
  .site-footer {
    --color-bg:            var(--black);
    --color-bg-subtle:     var(--black);
    --color-bg-muted:      rgb(255 255 255 / 0.06);
    --color-bg-raised:     rgb(255 255 255 / 0.10);
    --color-text:          var(--white);
    --color-text-muted:    var(--paper-85);
    --color-text-subtle:   var(--paper-70);
    --color-border:        var(--color-border-on-panel);
    --color-border-strong: var(--color-border-on-panel-strong);
    --color-link:          var(--white);
    --color-link-hover:    var(--lime);
    --color-accent-ink:    var(--lime);
    --color-focus-ring:    var(--lime);
    --glass-bg:            rgb(0 0 0 / 0.62);
    --glass-border:        rgb(255 255 255 / 0.14);
    --hover-border:        var(--color-border-on-panel-strong);   /* + the solid lime shadow from :root */
    color-scheme: dark;
    color: var(--color-text);
  }

  .panel {
    background: var(--color-panel);
    border-radius: var(--radius-panel);
  }

  /* In dark mode a black panel would dissolve into the page; a hairline
     keeps the inset-rectangle motif legible. */
  [data-theme="dark"] .panel {
    border: 1px solid var(--color-border-on-panel);
  }

  /* ======================================================================
     2. BANDS — page rhythm. `.band` follows the scheme; `.band--panel` is
        black in both. In dark mode the two are separated by a hairline
        instead of a colour change.
     ====================================================================== */

  /* Transparent on purpose: the page ground (and the fixed triangle
     backdrop, § Triangles) shows through; cards and frames inside keep an
     opaque --color-bg so they lift off it. */
  .band {
    padding-block: var(--section-y);
  }

  /* The black band is an inset panel like the hero — contained to the
     shell width with the panel radius, never a full-bleed stripe. */
  .band--panel {
    background: var(--color-panel);
    inline-size: calc(100% - 2 * var(--gutter));
    max-inline-size: var(--shell-max);
    margin-inline: auto;
    border-radius: var(--radius-panel);
  }

  [data-theme="dark"] .band--panel { border: 1px solid var(--color-border-on-panel); }

  /* positioned + clipped so a corner scatter (tri-scatter--band) can live in it */
  .band--panel { position: relative; overflow: hidden; }
  .band--panel > .container { position: relative; z-index: 1; }

  /* The alternating ground: cool paper (light) / a cool step (dark). Cards
     and frames inside keep `--color-bg`, so they lift off it. Parked
     (operator, 2026-09-12): tried on the home, not in use — add the class
     to a band to bring it back. */
  .band--alt { background: var(--color-bg-alt); }

  .band--panel + .band--panel { margin-block-start: var(--space-4); }

  [data-theme="dark"] .band:not(.band--panel) + .band:not(.band--panel) {
    border-top: 1px solid var(--color-border-on-panel);
  }

  .band--tight { padding-block: calc(var(--section-y) * 0.6); }

  .section-head {
    max-width: 44rem;
  }

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

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
  }

  .eyebrow::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background: var(--color-accent);
    clip-path: polygon(0 0, 100% 0, 50% 86%);
    translate: 0 -1px;
  }

  .section-head > h2,
  .section-head > h1 {
    margin-block-start: var(--space-4);
  }

  .lead {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

  .section-head > .lead { margin-block-start: var(--space-4); }

  /* Breadcrumbs (below hub level) — small, quiet, dot separators */
  .breadcrumbs {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .breadcrumbs ol { --cluster-space: var(--space-2); align-items: center; }

  .breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .breadcrumbs li + li::before {
    content: "";
    inline-size: 0.3rem;
    block-size: 0.3rem;
    border-radius: var(--radius-full);
    background: currentColor;
    opacity: 0.5;
  }

  .breadcrumbs a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .breadcrumbs a:hover { color: var(--color-text); }
  .breadcrumbs [aria-current] { color: var(--color-text); }

  /* Page head (partials/page-head.php) — hubs and plain pages: air under
     the header bar, the crumbs, then the H1 + a muted lead at reading width. */
  .page-head {
    padding-block: var(--page-top) var(--space-7);
  }

  .page-head .breadcrumbs { margin-block-end: var(--space-6); }

  .page-head h1 { max-inline-size: 22ch; text-wrap: balance; }

  .page-head__lead {
    margin-block-start: var(--space-5);
    max-inline-size: 60ch;
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

  .display {
    font-size: var(--text-display);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    font-weight: var(--font-medium);
  }

  /* ======================================================================
     4. BUTTONS, LINKS, CHIPS, GLOW FRAME
     ====================================================================== */

  .btn {
    --btn-py: 0.8rem;
    --btn-px: 1.4rem;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--btn-py) var(--btn-px);
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard),
                translate var(--duration-fast) var(--ease-standard);
  }

  .btn .icon { --icon-size: 1.05em; }

  .btn--sm { --btn-py: 0.55rem; --btn-px: 1rem; font-size: var(--text-xs); }
  .btn--lg { --btn-py: 1rem;    --btn-px: 1.75rem; font-size: var(--text-base); }

  /* Primary — lime fill with a light that travels around the edge */
  .btn--primary {
    --btn-fill-top: var(--lime-bright);
    --btn-fill-bottom: var(--lime);
    background-color: var(--lime);   /* solid base — never a transparent frame */
    background-image: linear-gradient(180deg, var(--btn-fill-top) 0%, var(--btn-fill-bottom) 100%);
    color: var(--black);
    border-color: transparent;
    transition: --btn-fill-top var(--duration-fast) var(--ease-standard),
                --btn-fill-bottom var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard),
                translate var(--duration-fast) var(--ease-standard);
  }

  /* A 2px light orbiting 2px outside the edge — the button's own orbit,
     echoing the hero rings. Masked to a ring; only the lit arc shows.
     Shared with .orbit-frame (featured surfaces, the Ask frame). */
  .btn--primary::before,
  .orbit-frame::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: -1;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--btn-angle),
                transparent 0deg,
                transparent 190deg,
                var(--orbit-tail, color-mix(in oklab, var(--lime) 60%, transparent)) 240deg,
                var(--orbit-peak, var(--white)) 275deg,
                var(--orbit-head, var(--lime-bright)) 300deg,
                transparent 350deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: btn-orbit 3.6s linear infinite;
  }

  .btn--primary:hover {
    --btn-fill-top: var(--lime-bright);
    --btn-fill-bottom: var(--lime-bright);
    box-shadow: var(--glow-lime-soft);
  }

  .btn--primary:hover::before { animation-duration: 1.4s; }

  .btn--primary:active { translate: 0 1px; }

  @keyframes btn-orbit {
    to { --btn-angle: 360deg; }
  }

  /* Secondary — hairline with an inner highlight */
  .btn--secondary {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
  }

  /* hover = the primary's fill; a lime border alone vanishes on white */
  .btn--secondary:hover,
  .btn--secondary:focus-visible {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-fg);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
  }

  /* Ghost — text only, arrow slides */
  .btn--ghost {
    background: transparent;
    color: var(--color-text);
    padding-inline: var(--space-2);
  }

  .btn--ghost:hover { color: var(--color-link-hover); }
  .btn--ghost:hover .icon { translate: 3px 0; }
  .btn--ghost .icon { transition: translate var(--duration-fast) var(--ease-standard); }

  /* Inline link with animated underline (opt-in class, not bare <a>) */
  .link-line {
    color: var(--color-text);
    text-decoration: none;
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
    background-size: 100% 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-block-end: 2px;
    transition: background-size var(--duration-normal) var(--ease-emphasized),
                color var(--duration-fast) var(--ease-standard);
  }

  /* The line thickens into a band under the lower third of the glyphs —
     still a line, so the text keeps its colour in both schemes. */
  .link-line:hover {
    background-size: 100% 0.3em;
  }

  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: var(--font-medium);
    color: var(--color-text);
    text-decoration: none;
  }

  .link-arrow .icon { --icon-size: 1em;
    color: var(--color-accent-ink);
    transition: translate var(--duration-fast) var(--ease-standard);
  }

  .link-arrow:hover { color: var(--color-link-hover); }
  .link-arrow:hover .icon { translate: 4px 0; }

  /* Chip — protocol / tag. Mono, because it's a label. */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    color: var(--color-text);
    white-space: nowrap;
  }

  .chip--accent {
    background: var(--color-accent);
    color: var(--color-accent-fg);
    border-color: var(--color-accent);
  }

  .chip--live::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--lime);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--lime) 60%, transparent);
    animation: pulse-dot 2.2s var(--ease-standard) infinite;
  }

  @keyframes pulse-dot {
    0%   { box-shadow: 0 0 0 0   color-mix(in oklab, var(--lime) 60%, transparent); }
    70%  { box-shadow: 0 0 0 8px color-mix(in oklab, var(--lime) 0%, transparent); }
    100% { box-shadow: 0 0 0 0   color-mix(in oklab, var(--lime) 0%, transparent); }
  }


  /* Dual glow frame — outer lime bloom + inner hairline. Kept for special
     cases; the orbit frame below is the default highlight for featured
     surfaces (plans, custom-built, the Ask frame, the resource card). */
  /* Glow frame — the hover highlight, held: the same pair as .card:hover. */
  .glow-frame {
    position: relative;
    border-radius: var(--radius-xl);
    border: 1px solid var(--hover-border);
    box-shadow: var(--hover-shadow);
    background: var(--color-bg);
  }

  /* Orbit frame — a plain hairline surface with the primary button's light
     running 2 px outside it (::before shared with .btn--primary above). */
  .orbit-frame {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg);
    /* On the white ground a lime arc vanishes (even --lime-deep is 1.6:1),
       so the running light is BLACK with a lime-deep head — a dark comet
       on white. Dark mode and panels reset to the button's own colours. */
    --orbit-tail: color-mix(in oklab, var(--black) 55%, transparent);
    --orbit-peak: var(--black);
    --orbit-head: var(--lime-deep);
  }

  [data-theme="dark"] .orbit-frame,
  .panel .orbit-frame,
  .panel.orbit-frame {
    --orbit-tail: color-mix(in oklab, var(--lime) 60%, transparent);
    --orbit-peak: var(--white);
    --orbit-head: var(--lime-bright);
  }

  }

  /* ======================================================================
     5. HERO
     Black rounded panel inset from the page edge, in both schemes. Media
     frame overlaps the panel's bottom edge onto the page ground.
     ====================================================================== */

  /* Default: the panel starts BELOW the header, which stays a solid pill
     from the first pixel. The gap above the panel mirrors the gap above
     the pill (--space-3), so pill and panel read as one stacked shell. */
  .hero {
    padding-inline: var(--gutter);
    padding-block: calc(var(--space-3) * 2) 0;
  }

  .hero__panel {
    position: relative;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-block-start: clamp(3rem, 2rem + 4vw, 5.5rem);
    padding-block-end: clamp(2.5rem, 5vw, 5rem);
    padding-inline: var(--gutter);
    text-align: center;
  }

  .hero__inner {
    position: relative;
    z-index: 1;
    max-width: 52rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }

  .hero__title {
    /* One step under display since the H1 became the 8-word platform claim (client, 2026-10-08) */
    font-size: var(--text-5xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    font-weight: var(--font-medium);
    color: var(--white);
    text-wrap: balance;
    max-width: 20ch;
  }

  .hero__title em {
    font-style: normal;
    color: var(--lime);
  }

  .hero__lead {
    max-width: 42rem;
    font-size: var(--text-lg);
    color: var(--paper-90);
  }

  /* The slogan as the payoff line between lead and buttons (client, 2026-10-13) */
  .hero__slogan {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    font-weight: var(--font-semibold);
    color: var(--lime);
    text-wrap: balance;
  }

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

  /* Media frame — poster + play, overlapping the panel's bottom edge */
  .hero__media {
    position: relative;
    z-index: 1;
    inline-size: min(100%, 68rem);
    margin-inline: auto;
    margin-block-start: var(--space-8);
  }

  .hero__media::before {
    /* tight lime bloom behind the frame — a glow, not a wash */
    content: "";
    position: absolute;
    inset: 10% -5% -10% -5%;
    z-index: -1;
    background: radial-gradient(60% 55% at 50% 40%,
                color-mix(in oklab, var(--lime) 26%, transparent) 0%,
                transparent 70%);
    filter: blur(24px);
    pointer-events: none;
  }

  /* Scroll-driven growth: the frame scales from 78% to full size while it
     travels into the viewport (entry → mid-cover), the bloom brightens
     with it. The base frame is 68rem wide, so "full size" is a step up
     from the 64rem it used to settle at. Pure CSS (view() timeline); browsers without support simply
     show the frame at full size. Layout is never touched — `scale` only. */
  @supports (animation-timeline: view()) {
    .hero__media {
      transform-origin: 50% 20%;
      animation: hero-media-grow linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }

    .hero__media::before {
      animation: hero-media-bloom linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
  }

  /* Fallback for browsers without view() timelines (Firefox, Safari < 26):
     site.js sets `.is-grow-js` and feeds the same progress as `--grow`
     (0 → 1 over entry 0% → cover 45%). Without JS the frame stays full size. */
  .hero__media.is-grow-js {
    transform-origin: 50% 20%;
    scale: calc(0.78 + 0.22 * var(--grow, 1));
  }

  .hero__media.is-grow-js::before {
    opacity: calc(0.35 + 0.65 * var(--grow, 1));
  }

  @keyframes hero-media-grow {
    from { scale: 0.78; }
    to   { scale: 1; }
  }

  @keyframes hero-media-bloom {
    from { opacity: 0.35; }
    to   { opacity: 1; }
  }

  .media-frame {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-on-panel-strong);
    background: var(--black);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06),
                0 0 0 1px rgb(0 0 0 / 0.6);
  }

  .media-frame img,
  .media-frame video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .media-frame__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / 0.45) 100%);
    color: var(--white);
    text-decoration: none;
    cursor: pointer;
    border: 0;
    inline-size: 100%;
  }

  .play-disc {
    position: relative;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--lime);
    color: var(--black);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--lime) 55%, transparent);
    animation: play-breathe 2.4s var(--ease-standard) infinite;
    transition: scale var(--duration-normal) var(--ease-out-back),
                box-shadow var(--duration-normal) var(--ease-standard);
  }

  .play-disc .icon { --icon-size: 1.6rem;
    translate: 2px 0;
    fill: currentColor;
  }

  /* Two rings, staggered by half a cycle, so one is always mid-flight:
     they start on the disc's edge and travel out to ~2× before fading. */
  .play-disc::before,
  .play-disc::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid var(--lime);
    animation: play-ring 2.4s var(--ease-standard) infinite;
    pointer-events: none;
  }

  .play-disc::before { animation-delay: -1.2s; }

  .media-frame__play:hover .play-disc {
    scale: 1.06;
    animation-play-state: paused;
    box-shadow: var(--glow-lime-strong);
  }

  .media-frame__caption {
    position: absolute;
    inset-block-end: var(--space-4);
    inset-inline-start: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--paper-85);
  }

  @keyframes play-ring {
    0%   { scale: 1;    opacity: 0.95; }
    100% { scale: 2.1;  opacity: 0; }
  }

  /* The disc itself swells a touch and throws a soft lime halo. */
  @keyframes play-breathe {
    0%, 100% { scale: 1;    box-shadow: 0 0 0 0    color-mix(in oklab, var(--lime) 55%, transparent); }
    45%      { scale: 1.05; box-shadow: 0 0 0 14px color-mix(in oklab, var(--lime) 0%, transparent); }
  }

  /* --- Logo marquee ---------------------------------------------------- */

  /* A quiet band on the page ground right under the panel. Logos are
     normalised to one height and one tone (filter → black or white at
     reduced opacity); colour returns on hover. The track loops via a
     duplicated list translating -50%. */
  .refs {
    padding-block: var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }

  .refs__label {
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    color: var(--color-text-subtle);
    text-align: center;
    padding-inline: var(--gutter);
  }

  .logo-marquee {
    --logo-h: 1.75rem;
    --marquee-gap: clamp(2.5rem, 5vw, 5rem);
    --marquee-duration: 48s;
    inline-size: 100%;
    max-inline-size: var(--shell-max);
    margin-inline: auto;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }

  .logo-marquee__track {
    display: flex;
    inline-size: max-content;
    animation: marquee-scroll var(--marquee-duration) linear infinite;
  }

  .logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }

  .logo-marquee__list {
    display: flex;
    align-items: center;
    gap: var(--marquee-gap);
    padding-inline-end: var(--marquee-gap);
    flex: 0 0 auto;
  }

  .logo-marquee__item {
    display: flex;
    align-items: center;
    block-size: 3.25rem;              /* one row height regardless of --logo-h */
  }

  .logo-marquee__logo {
    display: block;
    block-size: var(--logo-h);
    inline-size: auto;
    max-inline-size: 12rem;
    object-fit: contain;
    /* black-on-transparent in light, white in dark; opacity carries the tone */
    filter: brightness(0);
    opacity: 0.6;
    transition: filter var(--duration-normal) var(--ease-standard),
                opacity var(--duration-normal) var(--ease-standard);
  }

  [data-theme="dark"] .logo-marquee__logo { filter: brightness(0) invert(1); }

  .logo-marquee__item:hover .logo-marquee__logo {
    filter: none;
    opacity: 1;
  }

  .logo-marquee__word {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    letter-spacing: -0.01em;
    color: var(--color-text-subtle);
    white-space: nowrap;
    transition: color var(--duration-normal) var(--ease-standard);
  }

  .logo-marquee__item:hover .logo-marquee__word { color: var(--color-text); }

  @keyframes marquee-scroll {
    to { translate: -50% 0; }
  }

  /* --- Hero art -------------------------------------------------------- */

  .hero-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
  }

  .hero-art__orbits {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 38%;
    inline-size: clamp(38rem, 96vw, 78rem);
    block-size: auto;
    aspect-ratio: 1;
    translate: -50% -50%;
    overflow: visible;
  }

  /* Rings are static. Only the satellite groups rotate. The groups live
     inside a translate(600 600) parent, so their local (0,0) IS the ring
     centre — the origin must be 0 0, not 50% 50% (that resolves in the
     group's own, already-translated space and sends the triangles orbiting
     around the bottom-right corner). */
  .hero-art__sats {
    transform-box: view-box;
    transform-origin: 0 0;
    animation: ring-spin var(--sat-speed, 120s) linear infinite var(--sat-dir, normal);
  }

  .hero-art__orbit {
    stroke: var(--white);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .hero-art__tri--lime  { fill: var(--lime); }
  .hero-art__tri--aqua  { fill: var(--aqua); }
  .hero-art__tri--slate { fill: var(--slate); }
  .hero-art__tri--paper { fill: var(--white); }

  @keyframes ring-spin {
    to { rotate: 360deg; }
  }

  /* The net: hairline wires from the panel edges into the hub ring, one
     wire out. An impulse is a 30/1000 dash (pathLength="1000" on every
     pulse path normalises the lengths) whose offset runs from just before
     the start to twice the length past the end — so each wire is lit for
     about half its cycle and dark for the rest. The synapse flashes at the
     moment the dash reaches the ring (49 % of the cycle). */
  .hero-art__wire {
    stroke: var(--white);
    stroke-opacity: 0.13;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .hero-art__wire--out { stroke-opacity: 0.2; }

  .hero-art__pulse {
    stroke: var(--lime);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 40 3000;
    stroke-dashoffset: 40;
    filter: drop-shadow(0 0 5px color-mix(in oklab, var(--lime) 75%, transparent));
    animation: net-impulse var(--pulse-dur, 6s) cubic-bezier(0.4, 0, 0.6, 1) var(--pulse-delay, 0s) infinite;
  }

  .hero-art__pulse--out {
    stroke-width: 3;
    stroke-dasharray: 60 3000;
    stroke-dashoffset: 60;
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--lime) 80%, transparent));
  }

  @keyframes net-impulse {
    from { stroke-dashoffset: 40; }
    to   { stroke-dashoffset: -2000; }
  }

  .hero-art__synapse {
    fill: var(--lime);
    opacity: 0.35;
    transform-box: fill-box;
    transform-origin: center;
    animation: net-synapse var(--pulse-dur, 6s) linear var(--pulse-delay, 0s) infinite;
  }

  .hero-art__synapse--out { opacity: 0.5; }

  @keyframes net-synapse {
    0%, 42%   { opacity: 0.35; scale: 1; }
    49%       { opacity: 1;    scale: 2.2; }
    60%, 100% { opacity: 0.35; scale: 1; }
  }

  /* ======================================================================
     TRIANGLES — the brand motif, generated by partials/tri-scatter.php.
     One <span class="tri"> per triangle, placed and timed through custom
     properties; CSS clip-path, no image. Three placements share it:
       .hero-art__scatter   the hero's edge scatter (inside .hero-art)
       .tri-scatter--band   a corner accent on black surfaces (bands, CTA)
       .gutter-scatter      the faint field beside content (.backdrop / .head-scatter)
     ====================================================================== */

  .tri-scatter {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .tri {
    position: absolute;
    inset-inline-start: var(--x);
    inset-block-start: var(--y);
    inline-size: var(--s);
    block-size: var(--s);
    opacity: var(--o, 0.6);
    rotate: var(--r, 0deg);
    clip-path: polygon(0 0, 100% 0, 50% 86%);
    animation: var(--tri-anim, tri-drift) var(--d, 12s) var(--ease-standard) var(--delay, 0s) infinite alternate;
  }

  .tri--lime  { background: var(--lime); }
  .tri--aqua  { background: var(--aqua); }
  .tri--slate { background: var(--slate); }
  .tri--paper { background: var(--white); }

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

  /* A slow rock: a little up, a little sideways, never a drift across. */
  @keyframes tri-rock {
    from { translate: 0 0; }
    to   { translate: 4px -9px; }
  }

  /* Corner accent on a black surface (replaces the parked leaves.svg mask):
     a touch larger than the hero's, rocking slowly. */
  .tri-scatter--band .tri {
    --tri-anim: tri-rock;
    animation-duration: calc(var(--d, 12s) * 1.6);
  }

  /* The fixed gutter backdrop + section-head scatters (gutter-scatter.php)
     were retired in Phase 8.1 (operator: cramped, too little motion) —
     parked in .docs/parked/gutter-scatter/. */

  /* <main> is the opaque page above the reveal footer (§ Footer). */
  .site-main {
    position: relative;
    z-index: 1;
    background: var(--color-bg);
    clip-path: inset(0);   /* nothing inside main paints over the footer behind it */
  }

  @media (max-width: 40em) {
    /* At phone width the scatter crowds the headline; keep a third of it. */
    .hero-art .tri:nth-child(3n),
    .hero-art .tri:nth-child(3n + 1),
    .tri-scatter--band .tri:nth-child(3n),
    .tri-scatter--band .tri:nth-child(3n + 1) { display: none; }
    .hero-art__orbits { inset-block-start: 34%; }
    .play-disc { inline-size: 3.25rem; block-size: 3.25rem; }
    .play-disc .icon { --icon-size: 1.2rem; }
  }

  /* 6. ASK BAIOND — moved to ask.css (engine surfaces, Phase 0 round 3) */

  /* ======================================================================
     7. FEATURE ROW + DEVICE FRAME
     Screenshots on the pure page ground get a defined frame: hairline +
     app chrome; Off-White lives INSIDE the frame only.
     ====================================================================== */

  .feature-row {
    display: grid;
    gap: var(--space-7);
    align-items: center;
  }

  @media (min-width: 60em) {
    .feature-row {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: var(--space-9);
    }
    .feature-row--flip > .feature-row__copy { order: 2; }
  }

  .feature-row__copy { max-width: 32rem; }
  .feature-row__copy h2 { margin-block-start: var(--space-4); }
  .feature-row__copy .lead { margin-block-start: var(--space-4); }
  .feature-row__copy .cluster { margin-block-start: var(--space-5); }
  .feature-row__copy .link-arrow { margin-block-start: var(--space-5); }

  .device {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-bg-muted);
    padding: var(--space-2);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5);
  }

  [data-theme="dark"] .device { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); }

  .device__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2) var(--space-2);
  }

  .device__bar span {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
  }

  .device__url {
    margin-inline-start: var(--space-2);
    flex: 1;
    max-width: 16rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: 0.65rem;
    color: var(--color-text-subtle);
    text-align: center;
  }

  .device__screen {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    background: var(--white);
  }

  .device__screen img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  /* ======================================================================
     8. CARDS (industries) + CTA STRIP
     ====================================================================== */

  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard),
                translate var(--duration-normal) var(--ease-standard);
  }

  /* Rest = the lime offset shadow (§ Card surfaces in sections.css);
     hover lifts the card off it — tokens.css → --card-*. */
  .card:hover {
    border-color: var(--hover-border);
    box-shadow: var(--card-shadow-lift);
    translate: var(--card-lift);
  }

  .card__icon {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--lime);
    color: var(--black);
  }

  .card__icon .icon { --icon-size: 1.35rem; }

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

  .card p {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    flex: 1;
  }

  .card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
  }

  .card__more .icon { --icon-size: 1em;
    color: var(--color-accent-ink);
    transition: translate var(--duration-fast) var(--ease-standard);
  }

  .card:hover .card__more .icon { translate: 4px 0; }

  /* CTA strip — black panel echoing the hero, one filled button */
  .cta-strip {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 6vw, 5rem) var(--gutter);
    text-align: center;
  }

  .cta-strip__inner {
    position: relative;
    z-index: 1;
    max-width: 40rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }

  .cta-strip h2 {
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
  }

  .cta-strip .hero-art__orbits {
    inset-block-start: 50%;
    inline-size: clamp(30rem, 80vw, 64rem);
    opacity: 0.8;
  }

  /* ======================================================================
     9. TYPE SPECIMEN, FOOTER, SANDBOX HELPERS
     ====================================================================== */

  .specimen {
    display: grid;
    gap: var(--space-5);
  }

  .specimen__row {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--space-4);
    align-items: baseline;
    padding-block: var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  .specimen__meta {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--space-3);
  }

  .swatch {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    line-height: 1.4;
  }

  .swatch strong { font-weight: var(--font-medium); display: block; }

  /* --- Footer (Phase 3 · black floor + reveal, 4.2) ----------------------
     Full-bleed black in both schemes (the panel tokens re-point at the top
     of this file), the lime tagline as the one loud element, a corner of
     triangles, the hubs. On desktop the footer sits BEHIND the page
     (sticky at the viewport bottom, <main> opaque above it), so the last
     section slides up and reveals it. Hubs only (SEO rule). */
  .site-footer {
    position: relative;
    overflow: hidden;
    padding: var(--space-8) var(--gutter) var(--space-6);
    background: var(--black);
    color: var(--color-text);
  }

  [data-theme="dark"] .site-footer { border-top: 1px solid var(--color-border-on-panel); }

  .site-footer__inner {
    position: relative;
    z-index: 1;
    max-width: var(--shell-max);
    margin-inline: auto;
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-7) var(--space-6);
  }

  .site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 26rem;
  }

  .site-footer__home { display: inline-flex; color: inherit; }
  .site-footer__logo { block-size: 1.5rem; }

  .site-footer__tagline {
    font-size: var(--text-3xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--lime);
    text-wrap: balance;
  }

  .site-footer__about {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

  .site-footer__lang {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .site-footer__lang .icon { --icon-size: 1rem; color: var(--lime); }
  .site-footer__lang .cluster { --cluster-space: var(--space-3); }
  .site-footer__lang a { color: var(--color-text-muted); text-decoration: none; }
  .site-footer__lang a:hover { color: var(--color-text); }
  .site-footer__lang [aria-current] { color: var(--color-text); font-weight: var(--font-medium); }

  .site-footer__heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
    margin-block-end: var(--space-4);
  }

  /* The eyebrow triangle, lime, in front of every column title. */
  .site-footer__heading::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background: var(--lime);
    clip-path: polygon(0 0, 100% 0, 50% 86%);
    translate: 0 -1px;
  }

  .site-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-sm);
  }

  .site-footer__list a {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .site-footer__list a:hover { color: var(--lime); }
  .site-footer__ext { --icon-size: 0.85em; opacity: 0.7; }

  .site-footer__address {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    font-style: normal;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .site-footer__place {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    color: inherit;
    text-decoration: none;
  }

  .site-footer__place > .icon { --icon-size: 1rem; flex-shrink: 0; margin-block-start: 0.15em; color: var(--lime); }
  .site-footer__place > span { display: flex; flex-direction: column; }
  .site-footer__place strong { font-weight: var(--font-medium); color: var(--color-text); }
  .site-footer__mail:hover span:last-child { color: var(--lime); text-decoration: underline; text-underline-offset: 2px; }

  .site-footer__cta { margin-block-start: var(--space-5); }

  .site-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .site-footer .attribution { margin-inline-start: auto; }

  /* Reveal: only where the footer fits one screen (four columns). Below
     that it stacks and simply follows the page. */
  @media (min-width: 64em) {
    .site-footer {
      position: sticky;
      inset-block-end: 0;
      z-index: 0;
    }
  }

  @media (max-width: 64em) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__brand { grid-column: 1 / -1; }
  }

  @media (max-width: 40em) {
    .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
    .site-footer .attribution { margin-inline-start: 0; inline-size: 100%; }
  }

  /* --- 404 (Phase 3) — the hero panel, quieter --------------------------- */
  .error-404 { padding-block-end: 0; }

  .error-404__panel {
    padding-block: clamp(5rem, 4rem + 6vw, 9rem);
  }

  .error-404__inner {
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  .error-404__code {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .error-404__code::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background: var(--lime);
    clip-path: polygon(0 0, 100% 0, 50% 86%);
  }

  .error-404__title {
    font-size: var(--text-5xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  .error-404__text {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

  .error-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-block-start: var(--space-3);
  }

  .error-404__more {
    padding-block: var(--space-8) var(--space-6);
    text-align: center;
  }

  .error-404__hint {
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
  }

  .error-404__hubs {
    --grid-min: 9rem;
    margin-block-start: var(--space-4);
  }

  .error-404__hub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), translate var(--duration-fast) var(--ease-standard);
  }

  .error-404__hub .icon { --icon-size: 1.25rem; color: var(--color-accent-ink); }
  .error-404__hub:hover { border-color: var(--hover-border); box-shadow: var(--card-shadow-lift); translate: var(--card-lift); }

  /* Sandbox: tiny mono label so the operator knows which pattern is which.
     Deleted with the sandbox in Phase 2. */
  .sandbox-tag {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--color-border-strong);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    z-index: 2;
  }

  .sandbox-section { position: relative; }

  /* Lime A/B (styleguide only). The page-wide switch re-points `--lime` on
     the root through :has(); the two columns pin their own value and
     re-resolve every token that is derived from it. */
  :root:has(#lime-original:checked) { --lime: var(--lime-original); }

  .lime-switch {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;
  }

  .lime-switch__opt {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5rem 0.95rem 0.5rem 0.6rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    font-size: var(--text-sm);
    cursor: pointer;
  }

  .lime-switch__opt small { color: var(--color-text-muted); }
  .lime-switch__opt input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
  .lime-switch__opt:has(input:checked) { border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text); }
  .lime-switch__opt:has(input:focus-visible) { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

  .lime-switch__dot {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    border-radius: var(--radius-full);
    background: var(--dot);
    border: 1px solid rgb(0 0 0 / 0.25);
  }

  /* --- Lime switcher (staging review tool, partials/lime-switch.php) ----
     A swatch button in the bottom-left corner (the assistant owns the
     right) with a small popover. Rendered only while config → lime_switcher
     is on. */
  .lime-fab {
    position: fixed;
    inset-inline-start: max(var(--space-4), env(safe-area-inset-left));
    inset-block-end: max(var(--space-4), env(safe-area-inset-bottom));
    z-index: 60;
  }

  .lime-fab__btn {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    box-shadow: 0 8px 30px rgb(0 0 0 / 0.18);
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), translate var(--duration-fast) var(--ease-standard);
  }

  .lime-fab__btn:hover,
  .lime-fab__btn[aria-expanded="true"] {
    border-color: var(--hover-border);
    box-shadow: 0 10px 34px rgb(0 0 0 / 0.22), var(--hover-shadow-sm);
    translate: 0 -2px;
  }

  /* The swatch shows the lime that is currently active. */
  .lime-fab__swatch {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    border-radius: var(--radius-full);
    background: var(--lime);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.25);
  }

  .lime-fab__panel {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: calc(100% + var(--space-2));
    inline-size: max-content;
    max-inline-size: min(20rem, calc(100vw - 2rem));
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 16px 48px rgb(0 0 0 / 0.22);
  }

  .lime-fab__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
  }

  .lime-fab__group + .lime-fab__group { margin-block-start: var(--space-3); }

  .lime-fab__label {
    margin: 0 0 var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .lime-fab__opts { display: grid; gap: var(--space-1); }

  /* Header glyphs: a tiny pill / a tiny bar. */
  .lime-fab__glyph {
    inline-size: 1.4rem;
    block-size: 0.55rem;
    flex: none;
    border: 1px solid var(--color-text);
    background: var(--color-bg);
  }
  .lime-fab__glyph--pill { border-radius: var(--radius-full); }
  .lime-fab__glyph--bar  { border-radius: 0; border-inline: 0; border-block-start: 0; }
  /* Icon glyphs: a tiny lime box / a tiny outlined box. */
  .lime-fab__glyph--filled,
  .lime-fab__glyph--outline { inline-size: 0.9rem; block-size: 0.9rem; margin-inline: 0.25rem; border-radius: 0.2rem; }
  .lime-fab__glyph--filled  { background: var(--lime); border-color: var(--lime); }
  /* Look glyphs: a crisp card (black line + lime offset) / a soft one. */
  .lime-fab__glyph--crisp,
  .lime-fab__glyph--soft  { inline-size: 1rem; block-size: 0.75rem; margin-inline: 0.2rem; background: var(--white); }
  .lime-fab__glyph--crisp { border-color: var(--black); border-radius: 0.15rem; box-shadow: 2px 2px 0 0 var(--lime); }
  .lime-fab__glyph--soft  { border-color: rgb(16 17 16 / 0.12); border-radius: 0.3rem; box-shadow: 0 3px 8px -2px rgb(16 17 16 / 0.25); }

  .lime-fab__opt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: 100%;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--text-sm);
    text-align: start;
    cursor: pointer;
  }

  .lime-fab__opt:hover { border-color: var(--color-border); }
  .lime-fab__opt[aria-checked="true"] { border-color: var(--color-text); }
  .lime-fab__opt small { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
  .lime-fab__name { flex: 1; }

  .lime-fab__dot {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    border-radius: var(--radius-full);
    background: var(--dot);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.25);
    flex: none;
  }

  .lime-fab__check { --icon-size: 1rem; opacity: 0; }
  .lime-fab__opt[aria-checked="true"] .lime-fab__check { opacity: 1; }

  .lime-fab__note {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted);
  }

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

  @media (min-width: 56em) {
    .lime-compare { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  }

  .lime-col {
    --color-accent:         var(--lime);
    --color-accent-hover:   var(--lime-bright);
    --color-link-underline: var(--lime);
    --color-selection-bg:   var(--lime);
    --glow-lime-soft:   0 0 0 1px color-mix(in oklab, var(--lime) 45%, transparent),
                        0 0 28px color-mix(in oklab, var(--lime) 22%, transparent);
    --glow-lime-strong: 0 0 0 1px color-mix(in oklab, var(--lime) 70%, transparent),
                        0 0 40px color-mix(in oklab, var(--lime) 38%, transparent);
    display: grid;
    gap: var(--space-5);
    align-content: start;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
  }

  .lime-col__swatch {
    display: grid;
    gap: 0.15rem;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--lime);
    color: var(--black);
  }

  .lime-col__hex {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
  }

  .lime-col__name { font-weight: var(--font-medium); }
  .lime-col__meta { font-size: var(--text-xs); opacity: 0.75; }

  /* ======================================================================
     10. REDUCED MOTION — freeze the decorative loops
     ====================================================================== */

  @media (prefers-reduced-motion: reduce) {
    .hero-art__sats,
    .tri,
    .btn--primary::before,
    .orbit-frame::before,
    .hero-art__pulse,
    .hero-art__synapse,
    .play-disc,
    .play-disc::before,
    .play-disc::after,
    .chip--live::before,
    .hero__media,
    .hero__media::before {
      animation: none;
    }

    /* Marquee stands still and wraps; the duplicate copy is dropped. */
    .logo-marquee { mask-image: none; -webkit-mask-image: none; }
    .logo-marquee__track { animation: none; inline-size: auto; justify-content: center; padding-inline: var(--gutter); }
    .logo-marquee__list { flex-wrap: wrap; justify-content: center; padding-inline-end: 0; }
    .logo-marquee__list[aria-hidden="true"] { display: none; }
  }
}