/* ────────────────────────────────────────────────────────────
   v2-base.css — shared foundation for the v2 (dark) marketing
   pages ported from team-july2026-multipager.

   This is the port of that repo's css/base.css + the shared bits
   of css/chrome.css (buttons, .txtlink), holding ONLY things used
   by more than one page: design tokens, typography, layout
   utilities, buttons, reveal-on-scroll, and the page ground.

   Page-specific styles live in their own v2-<page>.css alongside
   this one. Load order in the page head:
     1. v2-base.css   (this file)
     2. v2-<page>.css (page styles — may override)

   DARK-LOCKED on purpose: the source ships a light theme + a
   persisted toggle, deferred as its own feature. Don't add a
   light-theme block here piecemeal.

   COLLISIONS — read this before adding a utility class here. The file
   is only linked from v2 pages, so it can't reach the classic Sanity
   pages. The reverse is NOT true: BaseLayout does
   `import "../styles/global.css"`, so global.css is bundled AFTER
   anything a page <link>s, and its identically-specific rules WIN.
   `.container` and `.btn` are defined in BOTH files and were silently
   overriding the v2 values (wrong max-width, padding, font-size,
   border-radius) until the `body.v2` overrides at the bottom of this
   file. Pages must pass bodyClass="v2" to BaseLayout for those to bite.

   After editing either file, re-check for collisions: extract the class
   selectors from src/styles/global.css and from this file, intersect them,
   and add a `body.v2` override below for anything that appears in both.
   (Don't paste a regex containing a comment-close sequence into this
   comment — that ends the comment early and silently kills every rule
   that follows, including the :root tokens. It happened.)
   ──────────────────────────────────────────────────────────── */
/* ── @font-face — PORTED FROM THE SOURCE'S base.css ──
   These were missing, and that is the whole font bug. The tokens below name
   'Nyght' and 'InterV' (matching the source exactly), but nothing on the
   interior pages DECLARED those families, so both fell through to their
   fallbacks — Georgia for the serif, system sans for the display face.

   The only serif faces reaching these pages came from src/styles/global.css,
   which is legacy from the previous site: it declares the family as
   "Nyght Serif" (a different name), only two italic weights, and loads them
   from raw.githubusercontent.com — an external host, not a CDN, and a
   third-party request on every page.

   Self-hosted here instead, from files that are verified 200 on prod. Same
   three faces the source ships. Do NOT rename the families: the tokens, this
   block and the source all have to agree, and they now do.

   (I previously "fixed" this by defining --font-serif:'Nyght' without adding
   these declarations. On the homepage that worked, because homepage-v2.css
   carries its own @font-face for 'Nyght'. On every interior page it named an
   undeclared family and made the fallback worse, not better. The lesson: check
   that the family a token names is actually DECLARED somewhere the page loads.) */
@font-face{font-family:'Nyght';src:url('/v2/assets/fonts/NyghtSerif-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Nyght';src:url('/v2/assets/fonts/NyghtSerif-LightItalic.woff2') format('woff2');font-style:italic;font-weight:300;font-display:swap}
@font-face{font-family:'InterV';src:url('/v2/assets/fonts/Inter-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --ink:#0d0c0b;--ink-2:#161412;--ink-3:#1e1a15;
  --bone:#efebe3;--bone-dim:rgba(239,235,227,.56);--bone-faint:rgba(239,235,227,.3);
  --line:rgba(239,235,227,.13);--line-2:rgba(239,235,227,.07);
  --orange:#f56002;
  --lime:#d9fa87;--glass:rgba(22,20,18,.6);
  --on-accent:#0d0c0b;
  --bg-1:#18130d;--bg-2:#14110c;
  --v2-scrim:rgba(13,12,11,.5);
  --v2-accent:#d9fa87;
  --v2-ease:cubic-bezier(.16,1,.3,1);
  --v2-ease-io:cubic-bezier(.65,0,.35,1);
  --v2-pad:clamp(1.3rem,5vw,4.5rem);
  --v2-maxw:78rem;

  /* ══ THE SOURCE'S OWN TOKEN NAMES — load-bearing, do not remove ══
     The original port renamed four tokens (--accent → --v2-accent, --ease →
     --v2-ease, --pad → --v2-pad, --maxw → --v2-maxw) and dropped seven more
     entirely. But the PER-PAGE stylesheets were ported verbatim from the
     source's own CSS, so they still reference the original names — 230 times
     across 17 files:
       --accent 93 · --font-mono 72 · --ease 44 · --pad 7 · --shadow 6
       --bloom 6 · --maxw 2
     Every one of those was resolving to nothing. An undefined custom property
     doesn't warn, doesn't error and doesn't show in a build log — the rule just
     renders with no colour, no easing curve, no shadow, the wrong typeface. That
     is the bulk of the reported "layout and spacing issues across pages":
     dead accents on every eyebrow and label, unstyled mono type, transitions
     with no curve.
     Aliased to the v2- names where one exists so there is a single source of
     truth, and copied from the source's :root where there wasn't. Purely
     additive — these properties were undefined before, so nothing can regress.
     If a future page CSS is ported from the source, it will now Just Work. ══ */
  --accent:var(--v2-accent);
  --ease:var(--v2-ease);
  --ease-io:var(--v2-ease-io);
  --pad:var(--v2-pad);
  --maxw:var(--v2-maxw);
  --font-display:'InterV',Inter,-apple-system,sans-serif;
  --font-sans:'InterV',Inter,-apple-system,sans-serif;
  --font-mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace;
  --head-weight:330;
  --head-track:-0.03em;
  --signal:var(--orange);
  --scrim:var(--v2-scrim);
  --shadow:rgba(0,0,0,.4);
  --shadow-lg:rgba(0,0,0,.5);
  --bloom:rgba(217,250,135,.07);
  --nav-bg:rgba(13,12,11,.72);
  --mnav-bg:rgba(13,12,11,.97);
  --hover-tint:rgba(239,235,227,.05);
  --wordmark:#efebe3;
  /* Names the families the @font-face block above declares. An earlier attempt
     set this without adding those declarations, which pointed it at a family
     nothing on these pages declared and made the Georgia fallback worse. */
  --font-serif:'Nyght',Georgia,serif;
  color-scheme:dark;
}

/* ── token collision with global.css ──
   global.css also defines `:root{--accent:#f56002}` (orange) and, being imported
   by BaseLayout, is bundled AFTER any page stylesheet — so at equal specificity
   it wins, and every `var(--accent)` in the per-page CSS resolved to ORANGE. The
   source specifies lime for this token ("accent-as-text / active"), so 93
   references across 17 files were rendering the wrong brand colour: not missing,
   not obviously broken, just quietly the other colour.
   Re-declared on body.v2 (0,2,0) rather than :root (0,1,0) so it wins regardless
   of bundle order. Custom properties inherit, so everything inside <body> picks
   it up — same technique as the .container / .btn overrides further down.
   Only --accent genuinely clashes; global's --ease is the identical curve with
   different spacing, restated here so the two can't drift apart later. */
body.v2{
  --accent:var(--v2-accent);
  --ease:var(--v2-ease);
}

/* ── page ground ──
   Scoped to body.v2 (0,2,0) so it outranks global.css's
   body{background:#fff;color:#111110} (0,1,0) regardless of bundle order —
   no !important needed. */
body.v2{
  color:var(--bone);
  background:
    radial-gradient(120% 90% at 50% -8%, var(--bg-1) 0%, transparent 55%),
    radial-gradient(100% 70% at 50% 108%, var(--bg-2) 0%, transparent 55%),
    var(--ink);
}

/* Legibility scrim + stacking, used ONLY when a page renders the ambient
   brain canvas (brain.js injects .brain-bg). Without the canvas the scrim is
   pure unwanted darkening, so it's keyed off .brain-bg being present rather
   than applied unconditionally. */
body.v2:has(.brain-bg)::after{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(var(--v2-scrim),var(--v2-scrim)),
    radial-gradient(ellipse 92% 74% at 50% 42%,transparent 18%,var(--v2-scrim) 100%);
}
.brain-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
main,.section,.container{position:relative;z-index:2}

/* ── typography ── */
.h1,.h2,.h3{font-family:var(--font-display,'InterV',Inter,-apple-system,sans-serif);font-weight:330;letter-spacing:-.03em;line-height:1.04;color:var(--bone)}
.h1{font-size:clamp(2.6rem,6vw,5rem)}
.h2{font-size:clamp(2rem,4.4vw,3.4rem)}
.h3{font-size:clamp(1.4rem,2.4vw,2rem)}
/* The source uses <em> for the serif-italic accent; SplitHeadline.astro emits
   .nyght for the same thing. Support both so ported markup and the shared
   component look identical. */
.h1 em,.h2 em,.h3 em,.h1 .nyght,.h2 .nyght,.h3 .nyght{font-family:var(--font-serif,'Nyght Serif',Georgia,serif);font-style:italic;font-weight:300;color:var(--v2-accent);letter-spacing:-.01em}
.lede{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--bone-dim);max-width:42rem;line-height:1.5}
.mono{font-family:ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-faint)}

/* ── layout ── */
.container{max-width:var(--v2-maxw);margin:0 auto;padding-inline:var(--v2-pad)}
.section{padding-block:clamp(4rem,9vw,8rem)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}

/* ── page hero (.phero) ──
   UNDER-PORTED ORIGINALLY: the source's base.css carries this whole family and
   I only brought across the shared utilities, so any page relying on the base
   .phero got NO top padding and its heading sat behind the fixed nav. That is
   what happened to /insights (reported).

   Top PADDING is deliberately NOT set here. Every v2 page already declares its
   own hero padding (pricing 10.5rem, solutions 9.5rem, security/rollouts/
   assets/teammate/tours 7rem), and a base value can't be made to behave: at
   (0,1,0) it loses to global.css's later `.container{padding:0 1.5rem}` on any
   page whose .phero is ALSO .container, and at body.v2 (0,2,0) it would
   override the five pages that legitimately set 7rem unscoped. So padding stays
   per-page — and where .phero co-occurs with .container it must be body.v2
   scoped to clear global.css. */
.phero{position:relative;overflow:clip;text-align:center}
.phero__in{max-width:52rem;margin:0 auto;position:relative;z-index:2}
.phero .eyebrow{margin-bottom:1.4rem}
.phero .lede{margin:1.6rem auto 0}
.phero__cta{margin-top:2.4rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.phero__ask{font-family:var(--font-serif,'Nyght Serif',Georgia,serif);font-style:italic;font-weight:300;font-size:clamp(1.2rem,2vw,1.6rem);color:var(--bone-dim);margin-bottom:1.2rem}
.phero__ask em{color:var(--v2-accent);font-style:italic}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:.55em;justify-content:center;border-radius:99px;
  font-weight:600;font-size:.92rem;letter-spacing:.01em;padding:.95rem 1.7rem;
  text-decoration:none;transition:background .28s,color .28s,border-color .28s,transform .28s}
.btn--solid{background:var(--lime);color:var(--on-accent)}
.btn--solid:hover{background:var(--bone);color:var(--ink)}
.btn--ghost{border:1px solid var(--bone-faint);color:var(--bone)}
.btn--ghost:hover{border-color:var(--v2-accent);color:var(--v2-accent)}
.btn__arr{display:inline-block;transition:transform .3s var(--v2-ease)}
.btn:hover .btn__arr{transform:translateX(.28em)}

/* ── text link w/ arrow ── */
.txtlink{display:inline-flex;align-items:center;gap:.5em;font-size:.92rem;font-weight:540;color:var(--v2-accent);cursor:pointer;line-height:1.3;text-decoration:none}
.txtlink .tl{border-bottom:1.5px solid currentColor;padding-bottom:2px;transition:border-color .28s var(--v2-ease)}
.txtlink:hover .tl{border-color:transparent}
.txtlink .arr{display:inline-block;transition:transform .28s var(--v2-ease)}
.txtlink:hover .arr{transform:translateX(4px)}

/* ── reveal on scroll (observer lives in v2-base.js) ──
   PROGRESSIVE ENHANCEMENT, deliberately different from the source: the hidden
   state is scoped to .js-reveal, which a tiny inline <script> in the head adds
   before first paint. If that script never runs — JS disabled, a blocked
   bundle, an error earlier in the head — the content simply stays visible
   instead of the whole page rendering at opacity:0. The source hides .reveal
   unconditionally, which makes every section depend on one observer. */
.js-reveal .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--v2-ease),transform .9s var(--v2-ease)}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1;transform:none;transition:none}
}

/* ── global.css collision overrides ──
   MUST stay last in this file. global.css is bundled after page-linked CSS,
   so its `.container` (max-width:1200px; padding:0 1.5rem) and `.btn`
   (font-size:.875rem; padding:.75rem 1.25rem; border-radius:1.5rem) beat the
   v2 rules above at equal specificity. `body.v2` (0,2,0) outranks them and
   restores the design values. Keep these in sync with the definitions above. */
/* padding-INLINE, never the `padding` shorthand: the shorthand also sets
   padding-top:0, which at this specificity would clobber page rules like
   .phero{padding-top:10.5rem} — exactly the bug global.css caused here. */
body.v2 .container{max-width:var(--v2-maxw);padding-inline:var(--v2-pad)}
body.v2 .btn{gap:.55em;font-size:.92rem;padding:.95rem 1.7rem;border-radius:99px}
/* Ported sections are markup'd `class="section container"`, so global.css's
   `.container{padding:0 1.5rem}` shorthand ALSO zeroed their padding-block —
   every v2 section rendered with collapsed vertical spacing. Re-assert it
   here at body.v2 specificity. Any page rule that sets padding-block on an
   element which also carries .container needs the same treatment; find them
   by intersecting the page's `class="… container"` list with its stylesheet. */
body.v2 .section{padding-block:clamp(4rem,9vw,8rem)}
body.v2 .section--tight{padding-block:clamp(3rem,6vw,5rem)}


/* ══════════════════════════════════════════════════════════════════
   PORTED FROM THE SOURCE'S base.css — the shared foundation that the
   original port left out. This file had 42 top-level rules against the
   source's 98, so more than half the shared layer was simply absent:
   .ctaband (the bottom CTA band on every deep page), .eyebrow, .pillars,
   .split, .ticks, .band, and the whole .pane/.strata product-mockup set
   INCLUDING its animated states (.stratum.lit, .pane__ans.on). That last
   part is why the mockups still didn't animate after window.TM was
   restored: the JS was toggling classes that had no styles behind them.
   Excluded on purpose: the light-theme blocks (site is dark-locked) and
   the unconditional .reveal (ours is .js-reveal progressive enhancement).
   ══════════════════════════════════════════════════════════════════ */

/* product-UI mockups stay DARK in both themes (like real app screenshots on a
   light page — the premium, consistent choice). Re-scope the palette tokens to
   their dark values on the container; every child that reads a token renders
   dark. Wrap any device/board mockup in .ui-dark. */
.ui-dark{
  --ink:#0d0c0b;--ink-2:#161412;--ink-3:#1e1a15;
  --bone:#efebe3;--bone-dim:rgba(239,235,227,.56);--bone-faint:rgba(239,235,227,.3);
  --line:rgba(239,235,227,.13);--line-2:rgba(239,235,227,.07);
  --glass:rgba(22,20,18,.6);--accent:#d9fa87;--on-accent:#0d0c0b;
  --shadow:rgba(0,0,0,.45);--bloom:rgba(217,250,135,.07);
  color:var(--bone);color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

html,body{color:var(--bone)}

/* one continuous ground — a soft vertical wash, no hard stops — with the
   ambient brain fixed behind everything and a legibility vignette above it.
   Sections sit transparent on top (z-2), so the whole page is one field. */
body{font-family:var(--font-sans);font-weight:400;line-height:1.62;overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-synthesis:none;
  background:
    radial-gradient(120% 90% at 50% -8%, var(--bg-1) 0%, transparent 55%),
    radial-gradient(100% 70% at 50% 108%, var(--bg-2) 0%, transparent 55%),
    var(--ink)}

/* the brain is ambient, not a feature — a uniform wash keeps text legible
   over it, with a vignette darkening the edges further */
/* The source's unconditional body::after scrim is DELIBERATELY NOT PORTED.
   It is a fixed, full-viewport overlay at z-index:1. The source shows it on
   every page because every page there renders the ambient brain canvas; here
   most pages don't, so it would be pure unwanted darkening sitting over the
   whole document. Our conditional equivalent is body.v2:has(.brain-bg)::after,
   above — same effect, only where the canvas actually exists. */

.phero,.section,.band,.foot,main{position:relative;z-index:2}

img,svg{max-width:100%;display:block}

a{color:inherit;text-decoration:none}

button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

::selection{background:var(--lime);color:var(--on-accent)}

em{font-family:var(--font-serif);font-style:italic;font-weight:300}

.h1 em,.h2 em,.h3 em{font-style:italic;color:var(--accent);letter-spacing:-.01em}

.eyebrow{font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}

.phero__field{position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 42%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 62% at 50% 42%,#000 20%,transparent 78%)}

/* pillars — frosted glass cards floating over the field, soft not blocky */
.pillars{display:grid;gap:clamp(.9rem,1.6vw,1.3rem)}

@media(min-width:820px){.pillars{grid-template-columns:repeat(3,1fr)}}

.pillar{background:var(--glass);border:1px solid var(--line);border-radius:18px;
  padding:clamp(1.6rem,3vw,2.4rem);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}

.pillar__n{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;color:var(--accent);margin-bottom:1.1rem}

.pillar h3{font-family:var(--font-display);font-weight:400;font-size:1.4rem;letter-spacing:-.02em;margin-bottom:.7rem}

.pillar h3 em{color:var(--accent)}

.pillar p{color:var(--bone-dim);font-size:.96rem}

/* split (copy + viz) */
.split{display:grid;gap:clamp(2rem,5vw,5rem);align-items:center}

@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split--rev .split__copy{order:2}}

.split__copy h2{margin-bottom:1.1rem}

.split__copy .lede{margin-bottom:1.4rem}

.ticks{list-style:none;display:flex;flex-direction:column;gap:.6rem}

.ticks li{display:flex;gap:.7rem;align-items:baseline;color:var(--bone-dim)}

.ticks li::before{content:'✳';color:var(--accent);font-size:.8em;flex:none}

/* moat band — no rules, just a soft lime bloom rising out of the field */
.band{position:relative}

/* glow extends far past the band's own box so its falloff lands inside the
   sections above and below (and the footer) — no hard edge at the boundary */
.band::before{content:'';position:absolute;left:0;right:0;top:-48%;bottom:-48%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 66% 52% at 50% 50%,var(--bloom),transparent 72%)}

.band__in{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,6vw,5.5rem) var(--pad);text-align:center}

.band__in .h2{max-width:26ch;margin:0 auto}

/* cta band */
.ctaband{text-align:center}

.ctaband .h2{max-width:20ch;margin:0 auto 1.6rem}

.ctaband__row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* .pro-tag "Available on Pro" pill moved to chrome.css (shared with homepage) */


/* ═══ animated chat comparison (ported from the one-pager) ═══ */
.chat__head{text-align:center;max-width:44rem;margin:0 auto 1rem}

.chat__head em{color:var(--accent)}

.chat__sub{max-width:46rem;margin:0 auto 2.6rem;text-align:center;color:var(--bone-dim);font-size:clamp(.95rem,1.2vw,1.1rem)}

.chat__panes{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2.2vw,1.6rem);max-width:64rem;margin:0 auto}

@media(min-width:760px){.chat__panes{grid-template-columns:1fr 1fr}}

.pane{background:var(--glass);border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;overflow:clip;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 30px 70px var(--shadow)}

/* inside a dark-locked mockup the translucent glass washes to grey over a light
   page — use the solid near-black surface so the comparison tiles stay black */
.ui-dark .pane{background:var(--ink)}

.pane--bot{filter:saturate(.5)}

.pane__bar{display:flex;align-items:center;gap:.55rem;padding:.95rem 1.25rem;border-bottom:1px solid var(--line-2);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--bone-dim)}

.pane__bar i{font-style:normal;color:var(--bone-faint)}

.pane--team .pane__bar{color:var(--accent)}

.pane__bar .mark{width:20px;height:20px;border-radius:6px;background:var(--ink-3);border:1px solid var(--line);display:grid;place-items:center;flex:none}

.pane__bar .mark img{width:11px;height:11px}

.pane__body{padding:1.15rem 1.25rem;flex:1;display:flex;flex-direction:column;gap:.9rem}

.pane__q{font-size:.98rem;font-weight:540;min-height:1.5em;color:var(--bone)}

.pane__q .caret{display:inline-block;width:7px;height:14px;background:var(--bone-dim);margin-left:2px;vertical-align:-2px;animation:cblink 1.05s steps(2) infinite}

@keyframes cblink{50%{opacity:0}}

.pane__a{font-size:.9rem;line-height:1.6;color:var(--bone-dim);min-height:5.5em}

.strata{display:flex;flex-direction:column;gap:.45rem}

.stratum{display:grid;grid-template-columns:4.6rem 1fr;gap:.9rem;align-items:center;border:1px solid var(--line-2);border-radius:10px;
  padding:.5rem .8rem;font-size:.76rem;color:var(--bone-faint);opacity:.4;transition:opacity .5s var(--ease),border-color .5s,background .5s,color .5s}

.stratum b{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;font-weight:640}

.stratum.lit{opacity:1;color:var(--bone-dim);border-color:rgba(217,250,135,.35);background:rgba(217,250,135,.05)}

.stratum.lit b{color:var(--accent)}

.pane__ans{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease)}

.pane__ans.on{opacity:1;transform:none}

.pane__ans p{font-size:.9rem;line-height:1.6;color:var(--bone-dim)}

.pane__ans b{color:var(--bone);font-weight:600}

.pane__rcpts{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.45em 1.4em;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:620;color:var(--accent)}

.pane__rcpts span{white-space:nowrap}

.pane__tags{padding:.85rem 1.25rem;border-top:1px solid var(--line-2);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--bone-faint)}

.pane__tags--team{color:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .pane__ans{opacity:1 !important;transform:none !important}
  .stratum{opacity:1 !important}
  .pane__q .caret{animation:none !important}
}