/* ==========================================================================
   SellerApp — UPDATED WEBSITE DESIGN SYSTEM · tokens.css
   Extracted verbatim from the approved implementation (Final.html / Customers.html
   / Pricing.html). UPDATED_WEBSITE_DESIGN_SYSTEM.md is the single source of truth.
   Foundations: theme tokens, base, type, buttons, grid, mesh, section surfaces, motion.
   Do not fork these values into a page: link this file and extend via tokens.
   ========================================================================== */
/* ==========================================================================
   SellerApp marketing site — design tokens (from Figma: Blog-Image 5759:1493)
   NOTE: this is the MARKETING system (Bricolage Grotesque / #0167E3), which is
   deliberately distinct from the in-product dashboard DS (Nunito / #1B69EE).
   ========================================================================== */
/* ==========================================================================
   THEME TOKENS
   Canonical semantic tokens are defined per theme below. Everything else in
   this file consumes them — no component hardcodes a colour. Legacy aliases
   from the Figma import point at the canonical tokens and resolve lazily,
   so overriding a canonical token in [data-theme="dark"] updates them all.
   ========================================================================== */
:root{
  color-scheme:light;

  /* --- surfaces --- */
  --bg:#ffffff;                 /* primary background   */
  --bg-2:var(--pal-light);               /* secondary background */
  --surface-elevated:#ffffff;   /* cards, popovers      */
  --surface-brand:var(--pal-light);      /* tinted brand surface */
  --input-bg:#ffffff;
  --nav-bg:rgba(255,255,255,.92);
  --utility-bg:var(--pal-indigo);
  --utility-fg:var(--pal-sky);
  --footer-bg:var(--pal-amethyst);
  --footer-card:var(--pal-indigo);
  --footer-border:var(--pal-jet);
  --pill-bg:rgba(255,255,255,.72);
  --pill-border:rgba(255,255,255,.9);

  /* --- text --- */
  --text:var(--pal-indigo);               /* primary   */
  --text-2:var(--pal-jet);             /* secondary */
  --text-muted:var(--pal-slate);         /* muted     */
  --text-subtle:var(--pal-slate);        /* meta — darkened from Figma var(--pal-slate) for AA */

  /* --- borders --- */
  --border:var(--pal-light);
  --border-strong:var(--pal-sky);
  --border-brand:var(--pal-sky);
  --border-brand-strong:var(--pal-sky);

  /* --- brand + interaction --- */
  --brand:var(--pal-sky);              /* accent text / icons */
  --brand-hover:var(--pal-blue);
  --btn-primary-bg:var(--pal-sky);     /* solid button surface (AA vs white text) */
  --btn-primary-bg-hover:var(--pal-blue);
  --btn-primary-fg:#ffffff;
  --btn-ghost-bg:#ffffff;
  --btn-ghost-border:var(--pal-sky);
  --hover:var(--pal-light);              /* neutral hover wash */
  --focus-ring:rgba(201,214,234,.55);

  /* --- decoration --- */
  --grid:rgba(37,44,60,.027);   /* grid background utility (hero only) */
  --grid-size:40px;
  --hero-orb-opacity:.22;
  /* Three.js scene palette — the 3D layer reads these, never raw hex */
  --three-c1:var(--pal-sky);   /* SellerApp blue   */
  --three-c2:var(--pal-sky);   /* cyan             */
  --three-c3:var(--pal-sky);   /* violet           */
  --three-c4:var(--pal-golden);   /* pink (sparing)   */
  --screenshot-filter:none;
  --brand-grad:linear-gradient(98.3deg,var(--pal-sky) 0%,var(--pal-sky) 55%,var(--pal-golden) 100%);

  /* --- semantic --- */
  --good:var(--pal-sky);
  --bad:#e60041;

  /* --- elevation --- */
  --shadow-nav:0 6px 22.5px -13.5px rgba(27,27,54,.25);
  --shadow-btn:0 1.5px 6px rgba(27,27,54,.06);
  --shadow-cta:0 .75px 1.5px rgba(201,214,234,.3),0 7.5px 19.5px -6px rgba(201,214,234,.55);
  --shadow-card:0 4px 2px var(--pal-light);
  --shadow-float:0 18px 40px -18px rgba(16,9,47,.28);
  --shadow-mock:0 40px 90px -40px rgba(16,9,47,.35);
  --shadow-shot:0 30px 70px -40px rgba(16,9,47,.3);

  /* --- type --- */
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Plus Jakarta Sans",system-ui,sans-serif;

  /* --- layout --- */
  --container:1240px;
  --gutter:100px;

  /* --- legacy aliases (Figma import) --- */
  --surface:var(--surface-elevated);
  --surface-soft:var(--bg-2);
  --surface-muted:var(--hover);
  --surface-dark:var(--utility-bg);
  --surface-darker:var(--footer-bg);
  --surface-dark-card:var(--footer-card);
  --border-dark:var(--footer-border);
  --fg-1:var(--text);
  --fg-2:var(--text-2);
  --fg-3:var(--text-muted);
  --fg-4:var(--text-subtle);
  --fg-on-dark:var(--utility-fg);
  --brand-ink:var(--text);
}

[data-theme="dark"]{
  color-scheme:dark;

  --bg:var(--pal-amethyst);                 /* deep navy, not pure black */
  --bg-2:var(--pal-indigo);
  --surface-elevated:var(--pal-indigo);
  --surface-brand:var(--pal-indigo);
  --input-bg:var(--pal-indigo);
  --nav-bg:rgba(16,9,47,.9);
  --utility-bg:var(--pal-indigo);
  --utility-fg:var(--pal-sky);
  --footer-bg:var(--pal-amethyst);
  --footer-card:var(--pal-indigo);
  --footer-border:rgba(255,255,255,.12);
  --pill-bg:rgba(27,27,54,.78);
  --pill-border:rgba(255,255,255,.12);

  --text:var(--pal-light);               /* soft white, not #fff */
  --text-2:var(--pal-sky);
  --text-muted:var(--pal-slate);
  --text-subtle:var(--pal-slate);

  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.17);
  --border-brand:rgba(201,214,234,.26);
  --border-brand-strong:rgba(201,214,234,.42);

  --brand:var(--pal-sky);              /* 6.2:1 on --bg */
  --brand-hover:var(--pal-sky);
  --btn-primary-bg:var(--pal-sky);     /* 4.8:1 vs white text */
  --btn-primary-bg-hover:var(--pal-sky);
  --btn-primary-fg:#ffffff;
  --btn-ghost-bg:rgba(255,255,255,.05);
  --btn-ghost-border:rgba(255,255,255,.17);
  --hover:rgba(255,255,255,.06);
  --focus-ring:rgba(201,214,234,.65);

  --grid:rgba(201,214,234,.032);
  --hero-orb-opacity:.3;
  /* dark is retuned, not inverted: brighter blue/violet, calmer pink */
  --three-c1:var(--pal-sky);
  --three-c2:var(--pal-sky);
  --three-c3:var(--pal-sky);
  --three-c4:var(--pal-golden);
  --screenshot-filter:brightness(.9) contrast(1.03) saturate(.96);
  --brand-grad:linear-gradient(98.3deg,var(--pal-sky) 0%,var(--pal-sky) 55%,var(--pal-golden) 100%);

  --good:var(--pal-sky);
  --bad:var(--pal-golden);

  --shadow-nav:0 6px 22.5px -13.5px rgba(0,0,0,.6);
  --shadow-btn:0 1.5px 6px rgba(0,0,0,.35);
  --shadow-cta:0 .75px 1.5px rgba(0,0,0,.4),0 7.5px 19.5px -6px rgba(201,214,234,.45);
  --shadow-card:0 4px 2px rgba(0,0,0,.22);
  --shadow-float:0 18px 40px -18px rgba(0,0,0,.7);
  --shadow-mock:0 40px 90px -40px rgba(0,0,0,.85);
  --shadow-shot:0 30px 70px -40px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{list-style:none;padding:0}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:24px}
@media(min-width:1240px){.wrap{padding-inline:0}}

/* visible focus in both themes */
:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:3px;
}

/* light-mode screenshots sit on dark surfaces — dim, never invert.
   Replace with dark-theme exports from Figma when available. */
[data-screenshot]{filter:var(--screenshot-filter);transition:filter .28s ease}

/* colour cross-fade applied only while the theme is actually switching,
   so it never interferes with hover transitions */
.theme-anim *,.theme-anim *::before,.theme-anim *::after{
  transition:background-color .28s ease,border-color .28s ease,color .28s ease,
             fill .28s ease,stroke .28s ease,box-shadow .28s ease !important;
}

/* ==========================================================================
   UTILITY — Grid background (.bg-grid)
   Opt-in per section. Tunables: --grid (colour) · --grid-size · --grid-fade.
   Hero only — every other section stays plain so the texture never competes
   with content and the hero stays the focal point.
   ========================================================================== */
.bg-grid{position:relative;isolation:isolate}
.bg-grid::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid) 1px,transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  -webkit-mask-image:var(--grid-fade,radial-gradient(ellipse 72% 56% at 50% 36%,#000 12%,transparent 70%));
          mask-image:var(--grid-fade,radial-gradient(ellipse 72% 56% at 50% 36%,#000 12%,transparent 70%));
}
.bg-grid--top{--grid-fade:linear-gradient(to bottom,#000 0,#000 34%,transparent 82%)}
.bg-grid--wide{--grid-size:48px}
/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .hero__orb,.ai-sec__orb{display:none}
}
/* ---------- shared display type ---------- */
.d-hero{
  font-family:var(--display);font-weight:700;font-size:var(--type-h1,52px);line-height:var(--type-h1-lh,1.15);
  letter-spacing:var(--type-h1-ls,-.032em);font-variation-settings:"opsz" 14,"wdth" 100;
}
/* H2 · one canonical section heading. .d-lg is a legacy alias of .d-section (same rule). */
.d-section,.d-lg{
  font-family:var(--display);font-weight:700;font-size:var(--type-h2,40px);line-height:var(--type-h2-lh,1.2);
  letter-spacing:var(--type-h2-ls,-.028em);color:var(--fg-1);font-variation-settings:"opsz" 14,"wdth" 100;
}
/* keyword highlight: the phrase stays ink-black (soft white on dark); the only
   blue emphasis is a hand-drawn underline that draws left→right once on entry.
   One highlighted phrase per heading. */
.hl{position:relative;color:inherit;padding-bottom:.16em}
.hl::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:.32em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2.5 9.6C44 4.2 104 2.8 197.5 6.4' stroke='%231F44FF' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left bottom;background-size:100% 100%;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .74s cubic-bezier(.22,.61,.36,1) .14s;
}
.hl.is-drawn::after{transform:scaleX(1)}
[data-theme="dark"] .hl::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2.5 9.6C44 4.2 104 2.8 197.5 6.4' stroke='%23C9D6EA' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media(prefers-reduced-motion:reduce){.hl::after{transition:none;transform:scaleX(1)}}
.grad-text{
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.lede{font-size:16px;line-height:26px;color:var(--fg-3)}
.accent{color:var(--brand)}

/* eyebrow: 5.25px dot + ring, 12px Bricolage bold, 1.365px tracking */
.eyebrow{
  display:inline-flex;align-items:center;gap:6.75px;
  font-family:var(--display);font-weight:700;font-size:12px;line-height:15.6px;
  letter-spacing:1.365px;text-transform:uppercase;color:var(--brand);
  font-variation-settings:"opsz" 14,"wdth" 100;
}
.eyebrow::before{content:none}
.eyebrow--dark{color:var(--fg-on-dark)}

.link-arrow{
  font-family:var(--display);font-weight:700;font-size:var(--type-link,16px);line-height:var(--type-link-lh,1.45);
  color:var(--brand);font-variation-settings:"opsz" 14,"wdth" 100;
  display:inline-block;transition:transform .18s ease;
}
.link-arrow:hover{transform:translateX(3px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6.75px;
  font-family:var(--display);font-weight:700;font-size:13.5px;line-height:18px;
  letter-spacing:-.1125px;border-radius:999px;padding:9px 17.25px;
  font-variation-settings:"opsz" 14,"wdth" 100;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{background:var(--btn-ghost-bg);border:.75px solid var(--btn-ghost-border);color:var(--fg-1);box-shadow:var(--shadow-btn)}
.btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg);box-shadow:var(--shadow-cta);padding:8.25px 15px 8.25px 17.25px}
.btn--lg{font-size:14.06px;padding:13.34px 27.4px}
/* surface is always white (sits on the dark footer), so its ink is pinned —
   using --text here would flip to near-white in dark mode and vanish */
.btn--onDark{background:#fff;color:var(--pal-indigo);box-shadow:0 9.83px 23.88px -8.43px rgba(16,9,47,.45)}
.btn--outlineDark{border:.702px solid rgba(255,255,255,.55);color:#fff}
.btn--pillBrand{
  background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-radius:8px;padding:11px 23px;
  font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:0;
  box-shadow:var(--shadow-cta);
}
/* chevron used in nav + CTA */
.chev{width:7.4px;height:7.4px;border-right:.87px solid currentColor;border-bottom:.87px solid currentColor;transform:rotate(45deg);flex:none;margin-bottom:2px}
.chev--dim{opacity:.55}
.nav-chev{font-size:16px;color:var(--fg-4)}
.btn-chev{font-size:16px}

/* ==========================================================================
   BUTTON REFINEMENTS — icon nudge, morph CTA, ghost hover, focus ring
   ========================================================================== */
.btn .ms,.btn .btn-chev{transition:translate .22s var(--e-out)}
.btn:hover .ms,.btn:hover .btn-chev{translate:3px 0}
.btn--morph{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(100deg,var(--pal-blue) 0%,var(--pal-blue) 52%,var(--color-primary-hover) 100%);
  background-size:190% 100%;background-position:0 50%;
  transition:background-position .3s var(--e-out),border-radius .26s var(--e-out),
             padding .24s var(--e-out),box-shadow .24s ease,transform .2s var(--e-out);
}
.btn--morph::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.24) 50%,transparent 78%);
  translate:-130% 0;transition:translate .6s var(--e-out);
}
.btn--morph:hover{
  background-position:100% 50%;border-radius:13px;
  padding-left:calc(1.15em + 12px);padding-right:calc(1.15em + 6px);
  box-shadow:0 14px 30px -14px rgba(31,68,255,.7);
}
.btn--morph:hover::after{translate:130% 0}
.btn--morph:active{transform:translateY(0) scale(.986);box-shadow:inset 0 2px 4px rgba(0,0,0,.18)}
.btn--ghost:hover{background:var(--surface-brand);border-color:var(--border-brand-strong);color:var(--brand)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(31,68,255,.28)}

.hero__cta{display:flex;justify-content:center;gap:12px;margin-top:32px;flex-wrap:wrap}
/* ==========================================================================
   generic section rhythm
   ========================================================================== */
.section{padding:104px 0}
.section--soft{background:var(--surface-soft)}
.section__head{max-width:900px}
.section__head.is-center{margin-inline:auto;text-align:center}
.section__head .d-section{margin-top:14px}
.section__head .lede{margin-top:18px;font-size:17px;line-height:26px}
.section__head.is-center .lede{margin-inline:auto;max-width:680px}

/* audience cards */
.card-art__num{
  width:48px;height:48px;border-radius:15px;background:var(--surface-brand);
  border:1px solid var(--border-brand-strong);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:17px;line-height:27.2px;color:var(--brand);
  font-variation-settings:"opsz" 14,"wdth" 100;
}
/* card titles use the canonical H4 style (.d-h4 tokens) */
.card-art h3{
  margin-top:12px;font-family:var(--display);font-weight:700;font-size:var(--type-h4,22px);line-height:var(--type-h4-lh,1.3);
  letter-spacing:var(--type-h4-ls,-.015em);color:var(--fg-1);font-variation-settings:"opsz" 14,"wdth" 100;
}

/* ==========================================================================
   AMBIENT MESH — hero / testimonial ambient gradient field
   ========================================================================== */
.mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  opacity:var(--mesh-o,.5);
  -webkit-mask-image:var(--mesh-mask,radial-gradient(ellipse 78% 70% at 50% 34%,#000 24%,transparent 78%));
          mask-image:var(--mesh-mask,radial-gradient(ellipse 78% 70% at 50% 34%,#000 24%,transparent 78%));
}
.mesh i{
  position:absolute;display:block;border-radius:50%;
  translate:calc(var(--mx,0px) * var(--mf,1)) calc(var(--my,0px) * var(--mf,1));
  transition:translate 1.1s cubic-bezier(.22,.61,.36,1);
}
.mesh i b{
  position:absolute;inset:0;border-radius:inherit;display:block;background:inherit;
  filter:blur(var(--b,92px));will-change:transform;backface-visibility:hidden;
  animation:meshDrift var(--d,26s) ease-in-out var(--dl,0s) infinite;
}
.mesh__blue{background:radial-gradient(circle at 50% 50%,var(--color-border-brand-strong) 0,rgba(182,193,249,0) 68%)}
.mesh__lav{background:radial-gradient(circle at 50% 50%,var(--color-border-brand-strong) 0,rgba(182,193,249,0) 68%)}
.mesh__pink{background:radial-gradient(circle at 50% 50%,var(--pal-golden) 0,rgba(227,202,103,0) 68%)}
.mesh__wash{background:radial-gradient(circle at 50% 50%,#ffffff 0,rgba(255,255,255,0) 70%)}
@keyframes meshDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(3.5%,-4%,0) scale(1.07)}
  66%{transform:translate3d(-3%,3.5%,0) scale(.95)}
}
[data-theme="dark"] .mesh{opacity:calc(var(--mesh-o,.5) * .72)}
[data-theme="dark"] .mesh__wash{background:radial-gradient(circle at 50% 50%,rgba(201,214,234,.5) 0,rgba(201,214,234,0) 70%)}
@media(max-width:900px){.mesh i b{filter:blur(calc(var(--b,92px) * .7));animation-duration:calc(var(--d,26s) * 1.4)}}
@media(prefers-reduced-motion:reduce){.mesh i{translate:none;transition:none}.mesh i b{animation:none}}
/* ==========================================================================
   SECTION SURFACES — controlled emphasis, one wrapper, four tab themes.
   Ambient washes stay under .09 alpha so text contrast never moves.
   ========================================================================== */
.surf{position:relative;isolation:isolate;overflow:clip}
.surf__bg{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:var(--surf-wash,none);
}
.surf__bg::after{
  content:"";position:absolute;inset:0;opacity:var(--surf-grid,0);
  background-image:
    linear-gradient(to right,rgba(27,27,54,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(27,27,54,.055) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 34%,transparent 66%);
          mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 34%,transparent 66%);
}
/* soft boundary instead of a hard rule */
.surf--edge::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--border) 16%,var(--border) 84%,transparent);
}
.surf--soft-blue{--surf-grid:1;--surf-wash:
  radial-gradient(ellipse 62% 46% at 10% -8%,rgba(31,68,255,.085),transparent 66%),
  radial-gradient(ellipse 52% 42% at 94% 4%,rgba(31,68,255,.07),transparent 68%),
  linear-gradient(180deg,rgba(31,68,255,.028),transparent 44%)}
.surf--soft-warm{--surf-grid:.55;--surf-wash:
  radial-gradient(ellipse 58% 44% at 88% -6%,rgba(227,202,103,.075),transparent 66%),
  radial-gradient(ellipse 56% 42% at 6% 6%,rgba(31,68,255,.07),transparent 68%),
  linear-gradient(180deg,rgba(31,68,255,.022),transparent 40%)}
.surf--soft-violet{--surf-grid:1;--surf-wash:
  radial-gradient(ellipse 58% 44% at 16% -8%,rgba(31,68,255,.095),transparent 66%),
  radial-gradient(ellipse 54% 40% at 92% 10%,rgba(31,68,255,.065),transparent 70%),
  linear-gradient(180deg,rgba(31,68,255,.026),transparent 42%)}
.surf--navy{--surf-wash:
  radial-gradient(ellipse 64% 48% at 50% -10%,rgba(31,68,255,.085),transparent 68%),
  linear-gradient(180deg,rgba(27,27,54,.045),transparent 52%)}
.surf--navy .surf__bg::after{
  opacity:.85;background-size:26px 26px;
  background-image:radial-gradient(circle,rgba(27,27,54,.14) 1px,transparent 1.4px);
}
/* ==========================================================================
   PREMIUM MOTION LAYER — tokens, reveal system, underline draw, parallax
   ========================================================================== */
:root{
  --m-fast:200ms;--m-std:340ms;--m-rev:720ms;--m-big:900ms;
  --e-out:cubic-bezier(.22,.61,.36,1);--e-std:cubic-bezier(.4,0,.2,1);
}

/* section reveal (eyebrow → heading → copy → visual) */
[data-r]{
  opacity:0;transform:translateY(26px) scale(.988);
  transition:opacity var(--m-rev) var(--e-out) var(--rd2,0ms),
             transform var(--m-rev) var(--e-out) var(--rd2,0ms);
}
[data-r].is-r{opacity:1;transform:none}

/* keyword underline draws left → right, once */
.hl{background-size:0 .32em;transition:background-size .68s var(--e-out) .12s}
.hl.is-drawn{background-size:100% .32em}

/* visual reveals: fade + rise + blur-off */
[data-rv]{
  opacity:0;transform:translateY(16px);filter:blur(4px);
  transition:opacity var(--m-big) var(--e-out),transform var(--m-big) var(--e-out),filter var(--m-big) var(--e-out);
}
[data-rv].is-r{opacity:1;transform:none;filter:blur(0)}

/* connector lines: one-shot flow in the direction of information */
.gapfx.is-in .gapfx__mid path,
.proto.is-in .proto__mid path,
.aiviz.is-in .aiviz__link path,
[data-io].is-in .net__lines path{
  animation:flowOnce .85s linear var(--ld,0ms) forwards;
}
@keyframes flowOnce{from{stroke-dashoffset:64}to{stroke-dashoffset:0}}

/* header polish + page progress */
.header{transition:height var(--m-std) var(--e-out),background var(--m-std) ease,
        box-shadow var(--m-std) ease,border-color var(--m-std) ease}
html:not(.is-scrolled) .header{background:transparent;box-shadow:none;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
html.is-scrolled .header{height:48px}
.progress{
  position:fixed;left:0;top:0;height:2px;width:100%;z-index:100;
  background:var(--brand);transform:scaleX(0);transform-origin:0 50%;
}
@media(max-width:700px){.progress{display:none}}

/* parallax layers */
[data-px]{will-change:transform}

/* outcome visuals drift a touch on hover; container stays put */
.oart>*{transition:transform var(--m-std) var(--e-out)}
.outcome:hover .oart>*{transform:translateY(-5px)}

@media(prefers-reduced-motion:reduce){
  [data-r],[data-rv]{opacity:1;transform:none;filter:none}
  .hl{background-size:100% .32em;transition:none}
  [data-px]{transform:none !important}
  .gapfx.is-in .gapfx__mid path,.proto.is-in .proto__mid path,
  .aiviz.is-in .aiviz__link path,[data-io].is-in .net__lines path{animation:none}
}

/* ==========================================================================
   ICON FONT — Material Symbols Rounded base class (required by every component
   that renders <span class="ms">name</span>). .ms-f = FILL 1 (active/selected).
   ========================================================================== */
.ms{
  font-family:"Material Symbols Rounded";font-weight:400;font-style:normal;font-size:20px;
  line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;
  -webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 20;flex:none;
}
.ms-f{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 20}