/* =========================================================
   Design tokens — light default, dark override
   ---------------------------------------------------------
   Two palettes: "Ink & Umber" (light) and "Copper & Ink" (dark).
   The bare :root below is the LIGHT palette and the page's default —
   it's what renders before any theme script runs, and what a
   system-light visitor sees with no JS at all. The dark palette lives
   in two places that must stay identical: the prefers-color-scheme
   media query (system default for a dark visitor) and the
   [data-theme="dark"] attribute block (the manual toggle's override,
   which also has to win against a light OS on a visitor who chose
   dark manually — hence :not([data-theme="light"]) guarding the media
   query, so an explicit light choice always beats a dark OS).

   Status colours (--status-green/-amber/-red) are semantic, not
   decorative: win/cheaper, pending/caution, and lose/worse in tables,
   the calculator and the cost bar chart. They stay green/amber/red in
   both themes on purpose — only their exact shade shifts for contrast
   — so switching the brand palette never changes what a colour means.
   --accent / --accent2 are the actual brand identity (links, CTAs,
   badges, the headline gradient) and are the two tokens that change
   character between palettes.
   ========================================================= */
:root {
  --bg:            #F6F3EC;
  --bg-alt:        #F1ECE1;
  --surface:       #FFFFFF;
  --surface-2:     #FBF8F2;
  --surface-3:     #F3EEE4;

  --line:          rgba(20, 16, 10, 0.10);
  --line-strong:   rgba(20, 16, 10, 0.16);

  --text:          #2A2016;
  --text-dim:      #5C5142;
  --text-mute:     #8A7F6E;

  --accent:         #9A4B1D;
  --accent-hi:      #783711;
  --accent-deep:    #492712;
  --accent-wash:    rgba(154, 75, 29, 0.08);
  --accent-line:    rgba(154, 75, 29, 0.28);

  --accent2:         #3D714A;
  --accent2-hi:      #2A5535;
  --accent2-deep:    #1D3523;
  --accent2-wash:    rgba(61, 113, 74, 0.08);
  --accent2-line:    rgba(61, 113, 74, 0.26);

  /* Text/icon colour for content sitting ON a solid accent fill —
     needs its own token because the two themes invert which way that
     goes: dark ink on the light theme's mid-bright accent tiles, but
     white on the dark theme's deep accent tiles. */
  --on-accent:  #FFF9F3;
  --on-accent2: #F4FAF5;

  --status-green:       #1B7E4D;
  --status-green-hi:    #12683D;
  --status-green-deep:  #123F29;
  --status-green-wash:  rgba(27, 126, 77, 0.08);
  --status-green-line:  rgba(27, 126, 77, 0.26);

  --status-amber:       #A05E0D;
  --status-amber-hi:    #834B07;
  --status-amber-deep:  #5C370A;
  --status-amber-wash:  rgba(160, 94, 13, 0.09);
  --status-amber-line:  rgba(160, 94, 13, 0.28);

  --status-red:       #BB2B1B;
  --status-red-hi:    #9C1F11;
  --status-red-wash:  rgba(187, 43, 27, 0.08);
  --status-red-line:  rgba(187, 43, 27, 0.26);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --wrap: 1200px;
  --wrap-narrow: 760px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --shadow-lg: 0 24px 60px -20px rgba(20, 16, 10, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #070A08;
    --bg-alt:        #0A0F0C;
    --surface:       #120E0B;
    --surface-2:     #1A130E;
    --surface-3:     #241A12;

    --line:          rgba(255, 255, 255, 0.07);
    --line-strong:   rgba(255, 255, 255, 0.13);

    --text:          #F1ECE3;
    --text-dim:      #B0A69C;
    --text-mute:     #786F65;

    --accent:         #E48B58;
    --accent-hi:      #F1A87E;
    --accent-deep:    #7E4625;
    --accent-wash:    rgba(228, 139, 88, 0.10);
    --accent-line:    rgba(228, 139, 88, 0.30);

    --accent2:         #7FBD94;
    --accent2-hi:      #A4D6B4;
    --accent2-deep:    #396A49;
    --accent2-wash:    rgba(127, 189, 148, 0.09);
    --accent2-line:    rgba(127, 189, 148, 0.28);

    --on-accent:  #04120A;
    --on-accent2: #04120A;

    --status-green:       #2DD473;
    --status-green-hi:    #56EE98;
    --status-green-deep:  #0F5C33;
    --status-green-wash:  rgba(45, 212, 115, 0.08);
    --status-green-line:  rgba(45, 212, 115, 0.28);

    --status-amber:       #F5B544;
    --status-amber-hi:    #FFD07A;
    --status-amber-deep:  #A86C18;
    --status-amber-wash:  rgba(245, 181, 68, 0.10);
    --status-amber-line:  rgba(245, 181, 68, 0.30);

    --status-red:       #FF6B5B;
    --status-red-hi:    #FFA79B;
    --status-red-wash:  rgba(255, 107, 91, 0.08);
    --status-red-line:  rgba(255, 107, 91, 0.28);

    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  --bg:            #070A08;
  --bg-alt:        #0A0F0C;
  --surface:       #120E0B;
  --surface-2:     #1A130E;
  --surface-3:     #241A12;

  --line:          rgba(255, 255, 255, 0.07);
  --line-strong:   rgba(255, 255, 255, 0.13);

  --text:          #F1ECE3;
  --text-dim:      #B0A69C;
  --text-mute:     #786F65;

  --accent:         #E48B58;
  --accent-hi:      #F1A87E;
  --accent-deep:    #7E4625;
  --accent-wash:    rgba(228, 139, 88, 0.10);
  --accent-line:    rgba(228, 139, 88, 0.30);

  --accent2:         #7FBD94;
  --accent2-hi:      #A4D6B4;
  --accent2-deep:    #396A49;
  --accent2-wash:    rgba(127, 189, 148, 0.09);
  --accent2-line:    rgba(127, 189, 148, 0.28);

  --on-accent:  #04120A;
  --on-accent2: #04120A;

  --status-green:       #2DD473;
  --status-green-hi:    #56EE98;
  --status-green-deep:  #0F5C33;
  --status-green-wash:  rgba(45, 212, 115, 0.08);
  --status-green-line:  rgba(45, 212, 115, 0.28);

  --status-amber:       #F5B544;
  --status-amber-hi:    #FFD07A;
  --status-amber-deep:  #A86C18;
  --status-amber-wash:  rgba(245, 181, 68, 0.10);
  --status-amber-line:  rgba(245, 181, 68, 0.30);

  --status-red:       #FF6B5B;
  --status-red-hi:    #FFA79B;
  --status-red-wash:  rgba(255, 107, 91, 0.08);
  --status-red-line:  rgba(255, 107, 91, 0.28);

  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}

/* Cross-fade the swap itself so flipping themes reads as a deliberate
   transition, not a flash-cut. Excluded from the reduced-motion list
   below on purpose — this is a direct response to a user's own click,
   not ambient motion, so it stays even with reduced motion on;
   duration is short enough (180ms) not to register as an animation. */
body, .site-header, .pillbar, .telemetry {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* =========================================================
   Reset / base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 700;
}

h1 { font-size: clamp(2.15rem, 5.2vw, 3.65rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); letter-spacing: -0.028em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.42rem); }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.15em; }

code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: .7rem 1.1rem;
  font-weight: 700;
  z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

/* =========================================================
   Layout primitives
   ========================================================= */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; position: relative; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: .715rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  opacity: .6;
}

.lede {
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  color: var(--text-dim);
  max-width: 62ch;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.section-head { max-width: 68ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* =========================================================
   Badges & buttons
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .7rem;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
}
.badge--amber { border-color: var(--status-amber-line); background: var(--status-amber-wash); color: var(--status-amber); }
.badge--plain { border-color: var(--line-strong); background: transparent; color: var(--text-dim); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 46px;
  padding: .72rem 1.4rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: .93rem;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
  transition: transform .14s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: var(--on-accent);
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn--primary:hover { color: var(--on-accent); box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--accent) 85%, transparent); }

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--accent-line); background: var(--accent-wash); color: var(--text); }

.btn--sm { min-height: 38px; padding: .45rem 1rem; font-size: .84rem; }
.btn--block { width: 100%; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--text);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  margin-right: auto;
}
.brand:hover { color: var(--text); }
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(145deg, var(--accent-hi), var(--accent-deep));
  display: grid; place-items: center;
  color: var(--on-accent); font-family: var(--font-mono); font-weight: 800; font-size: .82rem;
  flex: none;
}
.brand span.dim { color: var(--text-mute); font-weight: 500; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  color: var(--text-dim);
  font-size: .89rem;
  font-weight: 550;
  padding: .5rem .78rem;
  border-radius: var(--r-sm);
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--accent); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    inset: 66px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 20px 1.1rem;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .8rem .4rem; font-size: .98rem; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: .8rem; }
}

/* =========================================================
   Hero — asymmetric
   ========================================================= */
.hero {
  position: relative;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -340px; left: 50%;
  width: 1100px; height: 700px;
  transform: translateX(-58%);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.hero h1 { margin-bottom: 1.1rem; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent-hi), var(--accent) 55%, var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede { font-size: clamp(1.04rem, 1.7vw, 1.2rem); margin-bottom: 1.9rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }

.hero-note {
  display: flex; align-items: center; gap: .5rem;
  font-size: .83rem; color: var(--text-mute);
}
.hero-note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* Terminal / data card in hero */
.datacard {
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.datacard-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-3);
  font-family: var(--font-mono); font-size: .74rem; color: var(--text-mute);
}
.datacard-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: none; }
.datacard-bar i:first-child { background: rgba(255,107,91,.55); }
.datacard-bar span { margin-left: auto; }
.datacard-body { padding: 1.15rem 1.15rem 1.3rem; }

.cost-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .8rem;
  padding: .62rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: .89rem;
}
.cost-row:last-of-type { border-bottom: 0; }
.cost-row .k { color: var(--text-dim); }
.cost-row .k small { display: block; color: var(--text-mute); font-size: .76rem; }
.cost-row .v { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.cost-row.is-win .v { color: var(--status-green); }
.cost-row.is-bad .v { color: var(--status-red); }

.cost-total {
  margin-top: .9rem; padding-top: .9rem;
  border-top: 1px solid var(--line-strong);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.cost-total .lbl { font-size: .8rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-mono); }
.cost-total .amt { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; color: var(--accent2); }

/* =========================================================
   Stat strip
   ========================================================= */
.statstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.statstrip > div {
  padding: 1.35rem 1.4rem;
  border-right: 1px solid var(--line);
}
.statstrip > div:last-child { border-right: 0; }
@media (max-width: 700px) {
  .statstrip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .statstrip > div:last-child { border-bottom: 0; }
}
.statstrip .n {
  font-family: var(--font-mono);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.statstrip .n em { font-style: normal; color: var(--accent); }
.statstrip .l { font-size: .82rem; color: var(--text-mute); margin-top: .3rem; }

/* =========================================================
   Cards & grids
   ========================================================= */
.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--text-dim); font-size: .93rem; margin-bottom: 0; }
.card .card-k {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--accent);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .8rem;
  display: block;
}

/* Cluster / article list */
.postlist { display: grid; gap: 0; border-top: 1px solid var(--line); }
.postlist li { list-style: none; }
.postlist a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.1rem;
  align-items: center;
  padding: 1.15rem .4rem;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.postlist a:hover { background: var(--surface); color: var(--text); }
.postlist .idx { font-family: var(--font-mono); font-size: .78rem; color: var(--text-mute); }
.postlist .t { font-weight: 600; font-size: 1rem; line-height: 1.4; }
.postlist .t small { display: block; font-weight: 400; color: var(--text-mute); font-size: .84rem; margin-top: .18rem; }
.postlist .arrow { color: var(--text-mute); font-family: var(--font-mono); }
.postlist a:hover .arrow { color: var(--accent); }
@media (max-width: 560px) {
  .postlist a { grid-template-columns: auto 1fr; }
  .postlist .arrow { display: none; }
}

/* =========================================================
   Tables
   ========================================================= */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .9rem; }
caption {
  caption-side: top;
  text-align: left;
  padding: 1rem 1.15rem .35rem;
  color: var(--text-mute);
  font-size: .82rem;
}
thead th {
  text-align: left;
  padding: .85rem 1.15rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}
tbody td, tbody th {
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover { background: rgba(255,255,255,.018); }
td.num, th.num { font-family: var(--font-mono); white-space: nowrap; }
td .good { color: var(--status-green); }
td .bad { color: var(--status-red); }
td .warn { color: var(--status-amber); }
tbody th[scope="row"] { font-weight: 650; color: var(--text); }

/* =========================================================
   Answer-first / callouts
   ========================================================= */
.answer {
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-wash), transparent 70%);
  padding: 1rem 1.2rem;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 0 0 1.4rem;
  font-size: 1.02rem;
  color: var(--text);
}
.answer p:last-child { margin-bottom: 0; }

.takeaways {
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  margin: 2rem 0;
}
.takeaways h2 {
  font-size: .78rem !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: .9rem;
}
.takeaways ul { margin: 0; padding-left: 1.1rem; }
.takeaways li { margin-bottom: .55rem; color: var(--text-dim); font-size: .94rem; }
.takeaways li:last-child { margin-bottom: 0; }
.takeaways li strong { color: var(--text); }

.callout {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  margin: 1.6rem 0;
  font-size: .93rem;
  color: var(--text-dim);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.callout strong { color: var(--text); }
.callout--amber { border-color: var(--status-amber-line); background: var(--status-amber-wash); }

.definition {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: .95rem 1.15rem;
  margin: 1.4rem 0;
  font-size: .92rem;
  color: var(--text-dim);
}
.definition dt {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.definition dd { margin: 0; text-align: justify; text-justify: inter-word; hyphens: auto; }

/* Affiliate disclosure */
.disclosure {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .82rem;
  color: var(--text-mute);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .8rem 1rem;
  margin: 1.5rem 0;
}
.disclosure svg { flex: none; margin-top: 2px; color: var(--text-mute); }

/* =========================================================
   Article typography
   ========================================================= */
.article-body { font-size: 1.045rem; }
.article-body p { text-align: justify; text-justify: inter-word; hyphens: auto; }
.article-body h2 { margin-top: 2.6rem; scroll-margin-top: 90px; }
.article-body h3 { margin-top: 1.9rem; scroll-margin-top: 90px; }
.article-body ul, .article-body ol { padding-left: 1.3rem; margin-bottom: 1.3rem; }
.article-body li { margin-bottom: .5rem; }
.article-body strong { color: var(--text); font-weight: 650; }
.article-body > p { color: var(--text-dim); }
.article-body > p > strong { color: var(--text); }

.article-head { padding: clamp(2.2rem, 5vw, 3.4rem) 0 1.5rem; border-bottom: 1px solid var(--line); }
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  font-size: .84rem; color: var(--text-mute); margin-top: 1.2rem;
}
.article-meta .author { display: inline-flex; align-items: center; gap: .55rem; color: var(--text-dim); }
.article-meta .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-hi), var(--accent-deep));
  display: grid; place-items: center; color: var(--on-accent); font-weight: 800; font-size: .76rem;
  font-family: var(--font-mono); flex: none;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem);
}
/* Grid items default to min-width:auto, which lets wide tables push the
   whole column past the viewport on narrow screens. */
.article-layout > * { min-width: 0; }
@media (max-width: 1000px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}

.toc {
  position: sticky;
  top: 92px;
  border-left: 1px solid var(--line);
  padding-left: 1.2rem;
  font-size: .86rem;
}
.toc p {
  font-family: var(--font-mono);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--text-mute); margin-bottom: .8rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: .55rem; }
.toc a { color: var(--text-dim); }
.toc a:hover { color: var(--accent); }

/* Breadcrumb */
.crumbs {
  font-size: .81rem;
  color: var(--text-mute);
  padding-top: 1.4rem;
  font-family: var(--font-mono);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.crumbs a { color: var(--text-mute); }
.crumbs a:hover { color: var(--accent); }
.crumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--line-strong); }

/* =========================================================
   FAQ accordion
   ========================================================= */
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  padding: 1.15rem .3rem;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--accent);
  line-height: 1;
  flex: none;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent); }
.faq .faq-a { padding: 0 .3rem 1.3rem; color: var(--text-dim); font-size: .96rem; max-width: 76ch; text-align: justify; text-justify: inter-word; hyphens: auto; }
.faq .faq-a p:last-child { margin-bottom: 0; }

/* =========================================================
   CTA bands
   ========================================================= */
.ctaband {
  position: relative;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--surface-2), var(--surface) 60%);
  padding: clamp(2rem, 5vw, 3.2rem);
  overflow: hidden;
}
.ctaband::before {
  content: "";
  position: absolute;
  top: -50%; right: -10%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%);
  pointer-events: none;
}
.ctaband > * { position: relative; }
.ctaband h2 { margin-bottom: .7rem; }

.signup { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; max-width: 460px; }
.signup input[type="email"] {
  flex: 1 1 220px;
  min-height: 46px;
  padding: .7rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-3);
  color: var(--text);
  font-family: inherit;
  font-size: .93rem;
}
.signup input::placeholder { color: var(--text-mute); }
.signup input:focus { border-color: var(--accent); outline: none; }
.signup-note { font-size: .79rem; color: var(--text-mute); margin-top: .8rem; }

/* Sticky bottom CTA */
.stickycta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--bg-alt) 93%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--accent-line);
  transform: translateY(110%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.stickycta.is-visible { transform: translateY(0); }
.stickycta-inner {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 0;
}
.stickycta p { margin: 0; font-size: .89rem; color: var(--text-dim); }
.stickycta p strong { color: var(--text); }
.stickycta .btn { margin-left: auto; flex: none; }
.stickycta .close {
  background: none; border: 0; color: var(--text-mute); cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: .4rem .5rem; flex: none;
}
.stickycta .close:hover { color: var(--text); }
@media (max-width: 620px) {
  .stickycta p { font-size: .8rem; }
  .stickycta p .hide-sm { display: none; }
}

/* =========================================================
   Author box
   ========================================================= */
.authorbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 1.5rem;
  margin: 2.5rem 0;
}
.authorbox .avatar-lg {
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-hi), var(--accent-deep));
  display: grid; place-items: center; color: var(--on-accent);
  font-family: var(--font-mono); font-weight: 800; font-size: 1.3rem; flex: none;
}
.authorbox h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.authorbox .role { font-size: .84rem; color: var(--accent); font-family: var(--font-mono); margin-bottom: .7rem; }
.authorbox p { font-size: .91rem; color: var(--text-dim); margin-bottom: .6rem; }
@media (max-width: 520px) { .authorbox { grid-template-columns: 1fr; } }

/* Credential strip (replaces fake testimonials) */
.creds { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.creds > div { background: var(--surface); padding: 1.4rem; }
.creds .yr { font-family: var(--font-mono); font-size: .74rem; color: var(--accent); letter-spacing: .08em; margin-bottom: .5rem; }
.creds h3 { margin-bottom: .35rem; font-size: .97rem; }
.creds p { font-size: .87rem; color: var(--text-mute); margin: 0; }

/* Timeline (about page) */
.timeline { border-left: 1px solid var(--line-strong); padding-left: 1.7rem; margin-left: .4rem; }
.timeline > li { list-style: none; position: relative; padding-bottom: 2rem; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: calc(-1.7rem - 5px);
  top: .45rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--line-strong);
}
.timeline .yr { font-family: var(--font-mono); font-size: .77rem; color: var(--accent); letter-spacing: .07em; }
.timeline h3 { font-size: 1.06rem; margin: .3rem 0 .4rem; }
.timeline p { color: var(--text-dim); font-size: .93rem; margin-bottom: 0; }

.skillgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.skillgrid > div { background: var(--surface); padding: 1.2rem 1.3rem; }
.skillgrid h3 { font-size: .84rem; font-family: var(--font-mono); color: var(--accent); text-transform: uppercase; letter-spacing: .09em; margin-bottom: .6rem; }
.skillgrid ul { margin: 0; padding: 0; list-style: none; }
.skillgrid li { font-size: .88rem; color: var(--text-dim); padding: .22rem 0; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.footer-grid h3 {
  font-size: .74rem; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--text-mute); margin-bottom: 1rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .55rem; }
.footer-grid li a { color: var(--text-dim); font-size: .89rem; }
.footer-grid li a:hover { color: var(--accent); }
.footer-about p { font-size: .88rem; color: var(--text-mute); max-width: 44ch; margin-top: 1rem; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center;
  font-size: .82rem; color: var(--text-mute);
}
.footer-bottom nav { margin-left: auto; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-bottom a { color: var(--text-mute); }
.footer-bottom a:hover { color: var(--accent); }

/* =========================================================
   Utilities
   ========================================================= */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-dim { color: var(--text-dim); }
.text-mute { color: var(--text-mute); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Reduced motion: disable DECORATIVE looping motion and large transforms,
   but keep short colour/opacity transitions — those are not vestibular
   triggers, and blanket-killing every transition makes the UI feel broken.
   A previous blanket `*` rule froze the entire site for anyone with the OS
   setting enabled, including all background animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* looping decorative animation stops entirely */
  .marquee-track,
  .constellation circle,
  .bg-orbs span { animation: none !important; }

  /* motion-based transforms collapse, colour transitions survive */
  .btn:hover,
  .card:hover,
  .bigcard:hover,
  .itemcard:hover,
  .persona:hover,
  .totop:hover { transform: none !important; }

  .totop { transition: opacity .2s ease, visibility .2s ease; }
}

/* =========================================================
   DENSE LANDING BLOCKS
   ========================================================= */

/* --- Announcement top bar --- */
.topbar {
  background: linear-gradient(90deg, var(--accent-deep), var(--surface-3) 55%, var(--accent-deep));
  border-bottom: 1px solid var(--accent-line);
  font-size: .79rem;
}
.topbar-inner { display: flex; align-items: center; gap: 1rem; min-height: 38px; flex-wrap: wrap; }
.topbar .tb-badge {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent); padding: .16rem .5rem; border-radius: 4px; font-weight: 700;
}
.topbar p { margin: 0; color: var(--text-dim); }
.topbar nav { margin-left: auto; display: flex; gap: 1.1rem; }
.topbar nav a { color: var(--text-dim); }
.topbar nav a:hover { color: var(--accent-hi); }
@media (max-width: 760px) { .topbar nav { display: none; } }

/* --- Header search --- */
.hsearch { position: relative; flex: 0 1 260px; display: flex; }
.hsearch input {
  width: 100%; min-height: 38px; padding: .4rem .8rem .4rem 2.1rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); font-family: inherit; font-size: .85rem;
}
.hsearch input::placeholder { color: var(--text-mute); }
.hsearch input:focus { border-color: var(--accent-line); outline: none; background: var(--surface-3); }
.hsearch svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--text-mute); pointer-events: none; }
@media (max-width: 1080px) { .hsearch { display: none; } }

/* --- Provider logo strip --- */
.logostrip {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .55rem;
  padding-top: 1.8rem; margin-top: 1.8rem; border-top: 1px solid var(--line);
}
.logostrip .lbl {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mute); margin-right: .5rem;
}
.logostrip span.p {
  padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: .8rem; color: var(--text-dim);
}

/* --- Big category cards (counts + sublists) --- */
.bigcards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(275px, 100%), 1fr)); }
.bigcard {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 65%);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem;
  transition: border-color .2s ease, transform .2s ease;
}
.bigcard:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.bigcard::after {
  content: ""; position: absolute; top: -60px; right: -60px; width: 190px; height: 190px;
  background: radial-gradient(circle, var(--accent-wash), transparent 68%); pointer-events: none;
}
.bigcard .cnt {
  font-family: var(--font-mono); font-size: 2.15rem; font-weight: 700;
  color: var(--accent); line-height: 1; letter-spacing: -.03em;
}
.bigcard h3 { margin: .6rem 0 .3rem; font-size: 1.08rem; }
.bigcard > p { color: var(--text-mute); font-size: .87rem; margin-bottom: 1rem; }
.bigcard ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.bigcard li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; border-bottom: 1px solid var(--line);
  font-size: .85rem; color: var(--text-dim);
}
.bigcard li:last-child { border-bottom: 0; }
.bigcard li b { font-family: var(--font-mono); font-weight: 600; color: var(--text); }

/* --- Alternating feature rows with mockups --- */
.featurerow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
  padding: clamp(2.2rem, 5vw, 3.4rem) 0; border-bottom: 1px solid var(--line);
}
.featurerow:last-of-type { border-bottom: 0; }
.featurerow.is-flipped .fr-media { order: -1; }
@media (max-width: 800px) { .featurerow.is-flipped .fr-media { order: 0; } }
.featurerow h3 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); letter-spacing: -.025em; }
.featurerow p { color: var(--text-dim); }
.fr-list { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.fr-list li {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .4rem 0; font-size: .91rem; color: var(--text-dim);
}
.fr-list li::before {
  content: "✓"; color: var(--status-green); font-weight: 700; flex: none;
  font-size: .82rem; margin-top: .15rem;
}

/* --- Latency bar mockup --- */
.barchart { display: grid; gap: .85rem; }
.barchart .row { display: grid; grid-template-columns: 96px 1fr auto; gap: .8rem; align-items: center; font-size: .82rem; }
.barchart .nm { color: var(--text-dim); }
.barchart .track { height: 9px; border-radius: 999px; background: var(--line-strong); overflow: hidden; }
.barchart .fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--status-green-deep), var(--status-green)); }
.barchart .fill.warn { background: linear-gradient(90deg, #7a5a12, var(--status-amber)); }
.barchart .fill.bad  { background: linear-gradient(90deg, #7a2b23, var(--status-red)); }
.barchart .val { font-family: var(--font-mono); color: var(--text); font-size: .8rem; }

/* --- Platform tile grid --- */
.tiles { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)); }
.tile { background: var(--surface); padding: 1.15rem 1.2rem; transition: background .18s ease; }
.tile:hover { background: var(--surface-2); }
.tile .ico {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--surface-3); border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700; color: var(--accent);
  margin-bottom: .7rem;
}
.tile h4, .tile h3 { font-size: .93rem; margin-bottom: .2rem; }
.tile p { font-size: .8rem; color: var(--text-mute); margin: 0; }
.tile .rec { display: block; margin-top: .5rem; font-family: var(--font-mono); font-size: .72rem; color: var(--accent); }

/* --- Big number statement block --- */
.bignum {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  border: 1px solid var(--accent-line); border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--surface-2), var(--surface) 70%);
  padding: clamp(1.8rem, 4vw, 2.8rem); position: relative; overflow: hidden;
}
.bignum::before {
  content: ""; position: absolute; left: -8%; bottom: -60%; width: 440px; height: 440px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent), transparent 66%); pointer-events: none;
}
.bignum > * { position: relative; }
.bignum .huge {
  font-family: var(--font-mono); font-weight: 700; line-height: .95; letter-spacing: -.045em;
  font-size: clamp(3.4rem, 9vw, 5.6rem);
  background: linear-gradient(150deg, var(--accent-hi), var(--accent) 45%, var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bignum .sub { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); margin-top: .5rem; }

/* --- Numbered steps --- */
.steps { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); counter-reset: s; }
.stepcard {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.5rem 1.5rem 1.4rem;
}
.stepcard::before {
  counter-increment: s; content: counter(s);
  position: absolute; top: -14px; left: 1.4rem;
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(160deg, var(--accent-hi), var(--accent-deep));
  color: var(--on-accent); font-family: var(--font-mono); font-weight: 800; font-size: .85rem;
  display: grid; place-items: center;
}
.stepcard h3 { margin: .7rem 0 .4rem; font-size: 1.02rem; }
.stepcard p { font-size: .89rem; color: var(--text-mute); margin: 0; }
.stepcard .time { display: inline-block; margin-top: .8rem; font-family: var(--font-mono); font-size: .74rem; color: var(--accent); }

/* --- Persona cards --- */
.personas { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.persona {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.45rem; display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
.persona:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.persona .who { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .6rem; }
.persona h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.persona p { font-size: .87rem; color: var(--text-mute); margin-bottom: 1.1rem; }
.persona .verdict {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--text-dim);
}
.persona .verdict b { display: block; font-family: var(--font-mono); color: var(--accent); font-size: .95rem; margin-bottom: .15rem; }

/* --- Interactive calculator --- */
.calc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
  border: 1px solid var(--line-strong); border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--surface-2), var(--surface) 70%);
  padding: clamp(1.6rem, 4vw, 2.6rem);
}
.calc-field { margin-bottom: 1.5rem; }
.calc-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .6rem; font-size: .88rem; color: var(--text-dim); }
.calc-field output { font-family: var(--font-mono); font-weight: 700; color: var(--accent); font-size: .95rem; }
.calc-field input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px;
  background: var(--line-strong); outline: none; cursor: pointer;
}
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 19px; height: 19px; border-radius: 50%;
  background: linear-gradient(160deg, var(--accent-hi), var(--accent));
  border: 2px solid var(--bg); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 55%, transparent); cursor: pointer;
}
.calc-field input[type="range"]::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--bg);
  background: var(--accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 55%, transparent); cursor: pointer;
}
.calc-out { display: grid; gap: .55rem; align-content: start; }
.calc-out .r {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem;
  padding: .78rem .95rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-3); font-size: .89rem;
}
.calc-out .r.win { border-color: var(--status-green-line); background: var(--status-green-wash); }
.calc-out .r .nm { color: var(--text-dim); }
.calc-out .r .nm small { display: block; color: var(--text-mute); font-size: .76rem; }
.calc-out .r .amt { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; color: var(--text); }
.calc-out .r.win .amt { color: var(--status-green); }
.calc-verdict {
  margin-top: .5rem; padding: 1rem 1.1rem; border-radius: var(--r-md);
  border: 1px dashed var(--status-green-line); background: var(--status-green-wash);
  font-size: .89rem; color: var(--text-dim);
}
.calc-verdict strong { color: var(--status-green-hi); font-family: var(--font-mono); }

/* --- Offer / pricing-style CTA --- */
.offer {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: clamp(1.6rem, 4vw, 3rem); align-items: center;
  border: 1px solid var(--accent-line); border-radius: var(--r-xl);
  background: linear-gradient(145deg, var(--surface-3), var(--surface) 62%);
  padding: clamp(1.8rem, 4vw, 3rem); position: relative; overflow: hidden;
}
.offer::before {
  content: ""; position: absolute; top: -45%; right: -12%; width: 520px; height: 520px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 64%); pointer-events: none;
}
.offer > * { position: relative; }
.offer ul { list-style: none; margin: 1.3rem 0 0; padding: 0; }
.offer ul li { display: flex; gap: .65rem; padding: .34rem 0; font-size: .89rem; color: var(--text-dim); }
.offer ul li::before { content: "✓"; color: var(--status-green); font-weight: 700; flex: none; }

/* =========================================================
   SIGNATURE COMPONENTS  (gold CTA, marquee, constellation,
   icon tiles, offer card, rich footer)
   ========================================================= */

/* --- Gold primary CTA + refined hovers --- */
.btn--gold {
  background: linear-gradient(180deg, #F0C860 0%, #E0A93F 52%, #C98F2E 100%);
  color: #2A1B04;
  border: 1px solid rgba(255, 226, 156, .55);
  box-shadow: 0 8px 22px -10px rgba(224, 169, 63, .85),
              inset 0 1px 0 rgba(255, 255, 255, .38);
  font-weight: 700;
}
.btn--gold:hover {
  color: #2A1B04;
  background: linear-gradient(180deg, #FFD97A 0%, #EFB94E 52%, #D89B34 100%);
  box-shadow: 0 14px 32px -10px rgba(240, 200, 96, .95),
              inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn--gold .ico-l { color: #7A5410; }

.btn--emerald {
  background: linear-gradient(180deg, #23A85F 0%, #177C43 100%);
  color: #F2FFF7;
  border: 1px solid rgba(86, 238, 152, .35);
  box-shadow: 0 8px 22px -10px rgba(35, 168, 95, .8),
              inset 0 1px 0 rgba(255, 255, 255, .16);
  font-weight: 650;
}
.btn--emerald:hover {
  color: #fff;
  background: linear-gradient(180deg, #2CC072 0%, #1B8F4D 100%);
  box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--accent) 95%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .24);
}

.btn .arw { transition: transform .18s ease; }
.btn:hover .arw { transform: translateX(3px); }

/* --- Marquee ticker --- */
.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, var(--bg-alt), var(--surface) 50%, var(--bg-alt));
  padding: .75rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group {
  display: flex;
  align-items: center;
  gap: 2.1rem;
  padding-right: 2.1rem;
  flex: none;
}
.marquee-group span {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
  font-size: .83rem;
  color: var(--text-dim);
}
.marquee-group span::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.marquee-group span.amber::before { background: var(--accent2); }
.marquee-group span.mute::before  { background: var(--text-mute); }
.marquee-group span b { color: var(--text); font-weight: 650; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- Animated constellation background --- */
.constellation {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.constellation svg { width: 100%; height: 100%; }
.constellation line { stroke: color-mix(in srgb, var(--text) 12%, transparent); stroke-width: 1; }
.constellation circle { transform-box: fill-box; transform-origin: center; }
.constellation .n-g { fill: var(--accent); }
.constellation .n-a { fill: var(--accent2); }
.constellation circle {
  animation: nodePulse 4.5s ease-in-out infinite;
}
.constellation circle:nth-of-type(2) { animation-delay: -1.1s; }
.constellation circle:nth-of-type(3) { animation-delay: -2.3s; }
.constellation circle:nth-of-type(4) { animation-delay: -3.4s; }
.constellation circle:nth-of-type(5) { animation-delay: -.6s; }
@keyframes nodePulse {
  0%, 100% { opacity: .35; r: 3; }
  50%      { opacity: 1;   r: 4.5; }
}
.has-constellation { position: relative; }
.has-constellation > .wrap { position: relative; z-index: 1; }

/* --- Coloured icon tiles (brand-style squares) --- */
.icontile {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 800; font-size: .84rem;
  color: #fff;
  flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px -4px rgba(0,0,0,.6);
}
.ic-blue   { background: linear-gradient(160deg,#3A8FD4,#2465A8); }
.ic-red    { background: linear-gradient(160deg,#E4574C,#B3352C); }
.ic-purple { background: linear-gradient(160deg,#8E5BC9,#6435A0); }
.ic-indigo { background: linear-gradient(160deg,#4E6BD4,#2F44A0); }
.ic-orange { background: linear-gradient(160deg,#E88A3C,#B85F1C); }
.ic-green  { background: linear-gradient(160deg,#4FB55C,#2C8038); }
.ic-cyan   { background: linear-gradient(160deg,#35B7C9,#1B7E8E); }
.ic-pink   { background: linear-gradient(160deg,#DB4F92,#A82B68); }
.ic-slate  { background: linear-gradient(160deg,#5B6B7A,#3A4753); }
.ic-teal   { background: linear-gradient(160deg,#2FA98F,#187563); }

/* Card with leading icon tile */
.itemcard {
  display: flex; align-items: center; gap: .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .95rem 1.05rem;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.itemcard:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.itemcard h3 { font-size: .95rem; margin: 0 0 .12rem; color: var(--text); }
.itemcard p { margin: 0; font-size: .79rem; color: var(--text-mute); }
.itemgrid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* Group label between card rows */
.grouplabel {
  display: flex; align-items: center; gap: .6rem;
  margin: 1.9rem 0 .9rem;
  font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mute);
}
.grouplabel::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--accent); flex:none; }
.grouplabel::after  { content:""; flex:1; height:1px; background: var(--line); }

/* Inline stat bar (inside a section, bordered) */
.statbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-3);
  overflow: hidden;
  max-width: 780px;
  margin-inline: auto;
}
.statbar > div { padding: 1rem 1.1rem; text-align: center; border-right: 1px solid var(--line); }
.statbar > div:last-child { border-right: 0; }
.statbar .v { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: var(--accent); line-height: 1.1; }
.statbar .v.gold { color: var(--accent2); }
.statbar .l { font-size: .76rem; color: var(--text-mute); margin-top: .2rem; }

/* Stat card with icon box */
.iconstat { display: flex; align-items: center; gap: .95rem; }
.iconstat .box {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}
.iconstat .box.gold { background: var(--accent2-wash); border-color: color-mix(in srgb, var(--accent2) 32%, transparent); color: var(--accent2); }
/* Both are spans inside a bare span wrapper, so without this they lay
   out inline and the value ran straight into its own label. */
.iconstat > span:not(.box) { display: flex; flex-direction: column; min-width: 0; }
.iconstat .v { font-family: var(--font-mono); font-size: 1.42rem; font-weight: 700; line-height: 1.1; color: var(--text); }
.iconstat .v.gold { color: var(--accent2); }
.iconstat .l { font-size: .8rem; color: var(--text-mute); margin-top: .1rem; }

/* --- Offer card (dashed divider, corner dots, big price) --- */
.offercard {
  /* A deliberately dark, always-on band regardless of site theme — the
     one place the page keeps its original near-black identity, as a
     punctuation mark before the footer. Every token its descendants
     read is repinned to the dark-theme's values here, not just text —
     leaving --accent pointed at the light theme's dark umber would put
     dark-on-dark text on this card whenever a visitor is in light mode. */
  color-scheme: dark;
  --bg: #0C2016;
  --text: #F1ECE3;
  --text-dim: #B0A69C;
  --text-mute: #786F65;
  --line-strong: rgba(255, 255, 255, 0.14);
  --accent:         #E48B58;
  --accent-hi:      #F1A87E;
  --accent-deep:    #7E4625;
  --accent-wash:    rgba(228, 139, 88, 0.10);
  --accent2:         #7FBD94;
  --accent2-hi:      #A4D6B4;
  --status-green: #2DD473;
  --on-accent: #04120A;
  /* Redefining the custom properties above isn't enough on its own:
     `color` is an inherited property whose already-resolved value
     flows down from body, so anything here without its own explicit
     `color: var(--text)` — this element included — keeps showing the
     light theme's dark ink instead of picking up the override. */
  color: var(--text);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,.9fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 100% at 12% 0%, rgba(28,92,55,.55), transparent 62%),
    linear-gradient(155deg, #123021 0%, #0C2016 58%, #0A1710 100%);
  padding: clamp(1.7rem, 4vw, 2.8rem);
  overflow: hidden;
}
@media (max-width: 860px) { .offercard { grid-template-columns: 1fr; } }
.offercard .divider {
  position: absolute; top: 1.6rem; bottom: 1.6rem;
  left: 62%;
  border-left: 1px dashed rgba(255,255,255,.16);
}
@media (max-width: 860px) { .offercard .divider { display: none; } }
.offercard .dot {
  position: absolute; width: 17px; height: 17px; border-radius: 50%;
  background: var(--bg); border: 1px solid rgba(255,255,255,.12);
}
.offercard .dot.tl { top: -8px; left: 62%; margin-left: -8px; }
.offercard .dot.bl { bottom: -8px; left: 62%; margin-left: -8px; }
.offercard .dot.l  { left: -8px; top: 50%; margin-top: -8px; }
.offercard .dot.r  { right: -8px; top: 50%; margin-top: -8px; }
@media (max-width: 860px) { .offercard .dot.tl, .offercard .dot.bl { display: none; } }

.offercard .ribbon {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .69rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent2);
  margin-bottom: .9rem;
}
.offercard h2 { font-size: clamp(1.55rem, 3.6vw, 2.5rem); line-height: 1.14; }
.offercard h2 .g { color: var(--accent-hi); }
.offercard h2 .a { color: var(--accent2); }
.offercard > div > p { color: var(--text-dim); font-size: .96rem; }

.pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.pills span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .8rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(0,0,0,.22);
  font-size: .78rem; color: var(--text-dim);
}
.pills span::before { content: "✓"; color: var(--accent); font-size: .74rem; }
.pills span.gold::before { content: "★"; color: var(--accent2); }

.pricebox { text-align: center; align-self: center; }
.pricebox .cap {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: .4rem;
}
.pricebox .amount {
  display: inline-flex; align-items: flex-start; gap: .25rem;
  font-family: var(--font-mono); font-weight: 800; line-height: .9;
  color: var(--accent2);
  text-shadow: 0 0 42px color-mix(in srgb, var(--accent2) 42%, transparent);
}
.pricebox .amount .cur { font-size: 1.5rem; margin-top: .5rem; }
.pricebox .amount .num { font-size: clamp(3.6rem, 9vw, 5.4rem); letter-spacing: -.03em; }
.pricebox .terms {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--text-dim); margin: .7rem 0 1.2rem;
}
.pricebox .sub { display: block; margin-top: .85rem; font-size: .84rem; }

.paystrip {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin-top: 1.5rem; padding-top: 1.2rem;
  border-top: 1px dashed rgba(255,255,255,.13);
}
.paystrip .lbl {
  font-family: var(--font-mono); font-size: .67rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-mute); margin-right: .35rem;
}
.paychip {
  padding: .26rem .6rem; border-radius: 5px;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,.04);
  font-size: .74rem; color: var(--text-dim);
}

.offerfoot {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  margin-top: 1.5rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: .8rem; color: var(--text-dim);
}
.offerfoot span::before { content: "✓ "; color: var(--accent); }

/* =========================================================
   RICH FOOTER
   ========================================================= */
.footer-top {
  /* Same fixed-dark treatment as .offercard, and for the same reason:
     this band keeps its own identity across both themes. */
  color-scheme: dark;
  --text: #F1ECE3;
  --text-dim: #B0A69C;
  --text-mute: #786F65;
  --accent:      #E48B58;
  --accent-hi:   #F1A87E;
  --accent-deep: #7E4625;
  color: var(--text);
  background: linear-gradient(100deg, #0E3A22 0%, #113D26 42%, #0B2717 100%);
  padding: 1.5rem 0;
}
.footer-top-inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,auto);
  gap: 1.6rem 2.4rem;
  align-items: center;
}
@media (max-width: 1000px) { .footer-top-inner { grid-template-columns: 1fr; } }
.footer-top .eyebrow { margin-bottom: .5rem; }
.footer-top h2 {
  font-size: clamp(1.1rem, 2.3vw, 1.5rem);
  margin: 0;
  color: var(--accent-hi);
}
.growline { display: flex; align-items: center; gap: .7rem; }
.growline .yr { font-family: var(--font-mono); font-size: .78rem; color: var(--text-dim); }
.growline .yr small { display: block; font-size: .66rem; color: var(--text-mute); letter-spacing: .1em; text-transform: uppercase; }
.growline .track {
  display: flex; align-items: flex-end; gap: .45rem;
  padding: 0 .6rem;
}
.growline .track i {
  display: block; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-deep));
  opacity: .85;
}
.footer-top .stats { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer-top .stats div { text-align: right; }
.footer-top .stats .v { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; color: var(--text); }
.footer-top .stats .l { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }

.footer-main {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) repeat(2, minmax(0,.75fr)) minmax(0,1.2fr);
  gap: 2.2rem;
  padding: clamp(2.2rem, 5vw, 3.4rem) 0 2rem;
}
/* One divider style per layout: a vertical rule between the four
   columns side by side on desktop, a horizontal rule above each
   column once the grid wraps (2-up, then fully stacked) — a left
   border on a wrapped column would land in the wrong place. */
@media (min-width: 981px) {
  .footer-main > div:not(:first-child) { border-left: 1px solid var(--line); padding-left: 2.2rem; }
}
@media (max-width: 980px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-main > div:nth-child(n+2) { border-top: 1px solid var(--line); padding-top: 1.6rem; }
}
@media (max-width: 620px)  { .footer-main { grid-template-columns: 1fr; } }

.brandcard {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
  padding: 1.1rem 1.2rem;
  margin: 1rem 0;
  position: relative;
  overflow: hidden;
}
.brandcard p { margin: 0 0 .8rem; font-size: .88rem; color: var(--text-dim); }
.brandcard p .hl { color: var(--accent-hi); font-weight: 650; }
.brandcard .stamp {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--accent-line); background: var(--accent-wash);
  font-size: .76rem; color: var(--accent);
}

.trustrow { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.trustrow span {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .38rem .72rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: .78rem; color: var(--text-dim);
}

.footer-main h3 {
  font-size: .7rem; font-family: var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 1rem;
}
.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { margin-bottom: .6rem; }
.linklist a { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-dim); font-size: .88rem; }
.linklist a::before { content: "•"; color: var(--accent); }
.linklist a:hover { color: var(--accent-hi); }
@media (min-width: 981px) {
  .linklist a { font-size: .68rem; }
}

.subcard {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 1.2rem;
}
.subcard .count {
  display: flex; align-items: center; gap: .5rem;
  font-size: .84rem; color: var(--text-dim); margin-bottom: .5rem;
}
.subcard .count i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); flex: none;
}
.subcard .count b { font-family: var(--font-mono); color: var(--text); }
.subcard p { font-size: .84rem; color: var(--text-mute); margin-bottom: .9rem; }
.subcard input[type="email"] {
  width: 100%; min-height: 42px; margin-bottom: .6rem;
  padding: .6rem .85rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface-3);
  color: var(--text); font-family: inherit; font-size: .88rem;
}
.subcard input::placeholder { color: var(--text-mute); }
.subcard input:focus { border-color: var(--accent); outline: none; }

.social { display: flex; gap: .5rem; margin-top: 1rem; }
.social a {
  width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text-dim);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.social a:hover { border-color: var(--accent-line); color: var(--accent); background: var(--surface-2); }

.footer-strip {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--text-mute);
}
.footer-strip i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
.footer-strip i.on { background: var(--accent); }

/* =========================================================
   VS COMPARISON BOX
   ========================================================= */
.vsbox {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto repeat(5, auto);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-alt);
}
@media (max-width: 820px) {
  .vsbox { grid-template-columns: 1fr; grid-template-rows: none; }
  .vscol { grid-row: auto !important; display: block !important; }
  .vslist { display: block !important; }
}

/* Each column spans every row of the parent and inherits those rows, so
   row N on the left and row N on the right resolve to one shared height
   and their bottom rules meet across the divider. */
.vscol {
  position: relative;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
}
.vslist { display: contents; }
.vscol--bad  { background: linear-gradient(165deg, color-mix(in srgb, var(--status-red) 24%, var(--surface)), var(--surface) 46%); }
.vscol--good { background: linear-gradient(165deg, color-mix(in srgb, var(--status-green) 22%, var(--surface)), var(--surface) 46%); }
.vscol + .vscol { border-left: 1px solid var(--line); }
@media (max-width: 820px) { .vscol + .vscol { border-left: 0; border-top: 1px solid var(--line); } }

.vshead { padding: 1.5rem 1.6rem 1.3rem; border-bottom: 1px solid var(--line); }
.vstag {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .75rem; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  margin-bottom: .9rem;
}
.vstag--bad  { background: var(--status-red-wash); border: 1px solid var(--status-red-line); color: var(--status-red); }
.vstag--good { background: var(--accent2-wash); border: 1px solid color-mix(in srgb, var(--accent2) 45%, transparent); color: var(--accent2); }
.vshead h3 { font-size: clamp(1.15rem,2.2vw,1.45rem); margin-bottom: .35rem; }
.vshead p { margin: 0; font-size: .87rem; color: var(--text-mute); }

.vslist { list-style: none; margin: 0; padding: 0; }
.vscol > .vslist { display: contents; }
.vslist li {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: .9rem;
  align-items: start;
  padding: 1.05rem 1.6rem;
  border-bottom: 1px solid var(--line);
  font-size: .89rem;
  line-height: 1.55;
  color: var(--text-dim);
}
.vslist li:last-child { border-bottom: 0; }
.vslist .n { font-family: var(--font-mono); font-size: .74rem; color: var(--text-mute); padding-top: .16rem; }
.vslist .mk {
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; flex: none; margin-top: .06rem;
  font-size: .68rem; font-weight: 800;
}
.vslist .mk--x { background: var(--status-red-wash); border: 1px solid var(--status-red-line); color: var(--status-red); }
.vslist .mk--v { background: var(--status-green-wash); border: 1px solid var(--status-green-line); color: var(--status-green); }
.vslist b { color: var(--text); font-weight: 650; }

.vsmedal {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #F2CC69, #C9902F);
  color: #2A1B04;
  font-family: var(--font-mono); font-weight: 800; font-size: .95rem;
  letter-spacing: .04em;
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent2) 16%, transparent), 0 10px 30px -8px rgba(0,0,0,.85);
  z-index: 2;
}
@media (max-width: 820px) { .vsmedal { display: none; } }

/* =========================================================
   MULTI-ROW HEADER
   ========================================================= */
.util {
  background: #060907;
  border-bottom: 1px solid var(--line);
  font-size: .78rem;
}
.util-inner { display: flex; align-items: center; gap: 1.1rem; min-height: 36px; flex-wrap: wrap; }
.util .live { display: inline-flex; align-items: center; gap: .45rem; color: var(--text-dim); }
.util .live i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); flex: none;
}
.util .em { color: var(--accent-hi); font-weight: 650; font-family: var(--font-mono); }
.util nav { margin-left: auto; display: flex; gap: 1.1rem; flex-wrap: wrap; }
.util nav a { color: var(--text-dim); display: inline-flex; align-items: center; gap: .35rem; }
.util nav a:hover { color: var(--accent-hi); }
@media (max-width: 900px) { .util nav { display: none; } }

.hmain { border-bottom: 1px solid var(--line); background: rgba(10,15,12,.9); }
.hmain-inner { display: flex; align-items: center; gap: 1rem; min-height: 62px; }

.bigsearch { flex: 1 1 auto; max-width: 560px; position: relative; display: flex; }
.bigsearch input {
  width: 100%; min-height: 44px;
  padding: .6rem 3.4rem .6rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: #fff;
  color: #12201a;
  font-family: inherit; font-size: .92rem;
}
.bigsearch input::placeholder { color: #7d8c85; }
.bigsearch input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.bigsearch button {
  position: absolute; right: 4px; top: 4px; bottom: 4px;
  width: 46px; border: 0; border-radius: 7px; cursor: pointer;
  background: linear-gradient(180deg, #23A85F, #157A41);
  color: #fff; display: grid; place-items: center;
}
.bigsearch button:hover { background: linear-gradient(180deg,#2CC072,#1B8F4D); }
@media (max-width: 860px) { .bigsearch { display: none; } }

.hicons { display: flex; gap: .4rem; }
.hicon {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text-dim);
  transition: border-color .18s, color .18s, background .18s;
}
.hicon:hover { border-color: var(--accent-line); color: var(--accent); background: var(--surface-2); }
@media (max-width: 620px) { .hicons { display: none; } }

.hnav { border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.hnav-inner { display: flex; align-items: center; gap: .2rem; min-height: 46px; flex-wrap: wrap; }
.hnav a {
  color: var(--text-dim); font-size: .88rem; font-weight: 550;
  padding: .45rem .8rem; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: .4rem;
}
.hnav a:hover { color: var(--text); background: var(--surface-2); }
.hnav a[aria-current="page"] { color: var(--accent); background: var(--accent-wash); }
.hnav .spacer { margin-left: auto; }
.tagflag {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 800;
  letter-spacing: .08em; padding: .1rem .35rem; border-radius: 3px;
  background: var(--accent); color: var(--on-accent);
}

.qbrowse {
  border-bottom: 1px solid var(--line);
  background: #070B09;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.qbrowse::-webkit-scrollbar { display: none; }
.qbrowse-inner { display: flex; align-items: center; gap: .5rem; padding: .6rem 0; white-space: nowrap; }
.qbrowse .lbl {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-mute); margin-right: .3rem; flex: none;
}
.chip {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  padding: .34rem .78rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: .8rem; color: var(--text-dim);
}
.chip:hover { border-color: var(--accent-line); color: var(--accent); background: var(--surface-2); }

/* =========================================================
   SCROLL TO TOP — progress ring
   ========================================================= */
.totop {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 50px; height: 50px;
  z-index: 95;
  border: 0; padding: 0; cursor: pointer;
  background: transparent;
  opacity: 0; visibility: hidden;
  transform: translateY(14px) scale(.9);
  transition: opacity .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1), visibility .28s;
}
.totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.totop:hover { transform: translateY(-3px) scale(1.05); }
body:has(.stickycta.is-visible) .totop { bottom: 84px; }

.totop .ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.totop .ring circle { fill: none; stroke-width: 3; }
.totop .ring .bg { stroke: var(--line-strong); }
.totop .ring .fg {
  stroke: url(#totopGrad);
  stroke-linecap: round;
  transition: stroke-dashoffset .1s linear;
}
.totop .core {
  position: absolute; inset: 5px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--surface-3), var(--surface));
  border: 1px solid var(--accent-line);
  display: grid; place-items: center;
  color: var(--accent);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.85);
}
.totop:hover .core { background: linear-gradient(160deg, var(--accent), var(--accent-deep)); color: var(--on-accent); }
.totop .pct {
  position: absolute; inset: auto 0 -17px; text-align: center;
  font-family: var(--font-mono); font-size: .6rem; color: var(--text-mute);
  letter-spacing: .06em;
}
@media (max-width: 620px) { .totop { right: 14px; bottom: 14px; width: 44px; height: 44px; } }

/* Auto-width button variant (overrides block) */
.btn--auto { width: auto; align-self: center; }

/* Calculation disclosure */
.calcnote {
  margin-top: 1.2rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-3);
  padding: 1rem 1.15rem;
  font-size: .84rem;
  color: var(--text-mute);
}
.calcnote summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.calcnote summary::-webkit-details-marker { display: none; }
.calcnote summary::after { content: " ▸"; }
.calcnote[open] summary::after { content: " ▾"; }
.calcnote .body { margin-top: .9rem; }
.calcnote code {
  display: block; padding: .7rem .85rem; margin: .5rem 0;
  background: color-mix(in srgb, var(--surface-3) 70%, var(--text) 6%); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text-dim);
  font-size: .8rem; overflow-x: auto; white-space: pre;
}
.calcnote dl { margin: .6rem 0 0; display: grid; gap: .35rem; }
.calcnote dt { color: var(--text); font-size: .82rem; }
.calcnote dd { margin: 0 0 .4rem; font-size: .81rem; }

/* Provisional-data notice */
.provisional {
  display: flex; gap: .75rem; align-items: flex-start;
  border: 1px solid var(--status-amber-line);
  background: var(--status-amber-wash);
  border-radius: var(--r-md);
  padding: .95rem 1.15rem;
  margin: 1.5rem 0;
  font-size: .87rem;
  color: var(--text-dim);
}
.provisional b { color: var(--status-amber); }

/* Header row must be able to shrink and wrap on narrow screens, otherwise the
   brand + CTA + toggle push the toggle past the viewport edge. */
.hmain-inner { flex-wrap: wrap; }
.hmain-inner .brand { min-width: 0; flex: 1 1 auto; }
.hmain-inner .brand span.dim { white-space: nowrap; }
.util-inner > * { min-width: 0; }

@media (max-width: 520px) {
  .hmain-inner .brand span.dim { display: none; }
  .hmain-inner .btn--gold { padding-inline: .75rem; font-size: .8rem; }
}
@media (max-width: 380px) {
  .hmain-inner .btn--gold span,
  .hmain-inner .btn--gold { font-size: .76rem; }
}

/* =========================================================
   ANIMATED DRIFTING BACKGROUND (hero / article-head)
   ========================================================= */
.bg-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bg-orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  will-change: transform;
}
.bg-orbs .o1 {
  width: 460px; height: 460px;
  left: -60px; top: -100px;
  background: radial-gradient(circle, var(--accent-hi), transparent 68%);
  animation: orbDriftA 13s ease-in-out infinite;
}
.bg-orbs .o2 {
  width: 380px; height: 380px;
  right: -40px; top: 10px;
  background: radial-gradient(circle, var(--accent2), transparent 68%);
  animation: orbDriftB 16s ease-in-out infinite;
}
.bg-orbs .o3 {
  width: 340px; height: 340px;
  left: 34%; bottom: -140px;
  background: radial-gradient(circle, var(--accent-hi), transparent 70%);
  animation: orbDriftC 11s ease-in-out infinite;
}

/* Opacity is theme-specific, not just colour: the dark theme's accent
   is bright, so a strong blurred wash reads as a glow against
   near-black. The light theme's accent is dark (it has to be, for
   text contrast), so the same strength over paper reads as a muddy
   smudge rather than a glow — it needs to be a much fainter tint. */
.bg-orbs .o1 { opacity: .16; }
.bg-orbs .o2 { opacity: .13; }
.bg-orbs .o3 { opacity: .15; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bg-orbs .o1 { opacity: .5; }
  :root:not([data-theme="light"]) .bg-orbs .o2 { opacity: .4; }
  :root:not([data-theme="light"]) .bg-orbs .o3 { opacity: .48; }
}
:root[data-theme="dark"] .bg-orbs .o1 { opacity: .5; }
:root[data-theme="dark"] .bg-orbs .o2 { opacity: .4; }
:root[data-theme="dark"] .bg-orbs .o3 { opacity: .48; }

@keyframes orbDriftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(130px, 90px) scale(1.18); }
  66%      { transform: translate(50px, -70px) scale(.9); }
}
@keyframes orbDriftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-150px, 110px) scale(1.22); }
}
@keyframes orbDriftC {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-90px, -80px) scale(1.2); }
  70%      { transform: translate(110px, 25px) scale(.86); }
}

/* Hosts for the animated background need explicit stacking context */
.hero, .article-head { position: relative; overflow: hidden; }
.hero > .wrap, .article-head > .wrap { position: relative; z-index: 1; }

/* Static fallback so reduced-motion still looks designed rather than frozen */
@media (prefers-reduced-motion: reduce) {
  .bg-orbs .o1 { transform: translate(60px, 40px) scale(1.08); }
  .bg-orbs .o2 { transform: translate(-60px, 40px) scale(1.06); }
  .bg-orbs .o3 { transform: translate(-30px, -30px) scale(1.05); }
}

/* =========================================================
   EXPANDED PALETTE — indigo (Visibility/SEO pillar identity)
   and cyan (informational/definition accents). Light values verified
   >=4.5:1 against the light paper background; dark values >=4.6:1
   against the dark background. Used deliberately by role, not
   scattered — see comments at each usage site below.
   ========================================================= */
:root {
  --indigo:      #2733A5;
  --indigo-hi:   #18248B;
  --indigo-deep: #0E1662;
  --indigo-wash: rgba(39, 51, 165, 0.08);
  --indigo-line: rgba(39, 51, 165, 0.26);

  --cyan:        #0D7687;
  --cyan-hi:     #0A6C7B;
  --cyan-deep:   #074B55;
  --cyan-wash:   rgba(13, 118, 135, 0.08);
  --cyan-line:   rgba(13, 118, 135, 0.26);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --indigo:      #616FEF;
    --indigo-hi:   #97A1F7;
    --indigo-deep: #2935A3;
    --indigo-wash: rgba(97, 111, 239, 0.10);
    --indigo-line: rgba(97, 111, 239, 0.30);

    --cyan:        #20D3EE;
    --cyan-hi:     #5FDEF2;
    --cyan-deep:   #1F6E7A;
    --cyan-wash:   rgba(32, 211, 238, 0.09);
    --cyan-line:   rgba(32, 211, 238, 0.28);
  }
}
:root[data-theme="dark"] {
  --indigo:      #616FEF;
  --indigo-hi:   #97A1F7;
  --indigo-deep: #2935A3;
  --indigo-wash: rgba(97, 111, 239, 0.10);
  --indigo-line: rgba(97, 111, 239, 0.30);

  --cyan:        #20D3EE;
  --cyan-hi:     #5FDEF2;
  --cyan-deep:   #1F6E7A;
  --cyan-wash:   rgba(32, 211, 238, 0.09);
  --cyan-line:   rgba(32, 211, 238, 0.28);
}

/* Pillar identity: pages under /seo/ carry an indigo accent instead of
   green, so Hosting and Visibility read as distinct sections of one
   site rather than reskins of the same page. */
[data-pillar="visibility"] .eyebrow { color: var(--indigo-hi); }
[data-pillar="visibility"] .eyebrow::before { background: var(--indigo-hi); }
[data-pillar="visibility"] .badge { border-color: var(--indigo-line); background: var(--indigo-wash); color: var(--indigo-hi); }
[data-pillar="visibility"] .hero h1 em,
[data-pillar="visibility"] h1 em {
  background: linear-gradient(100deg, var(--indigo-hi), var(--indigo) 55%, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-pillar="visibility"] .answer { border-left-color: var(--indigo); background: linear-gradient(90deg, var(--indigo-wash), transparent 70%); }
[data-pillar="visibility"] .takeaways { border-color: var(--indigo-line); }
[data-pillar="visibility"] .takeaways h2 { color: var(--indigo-hi); }
[data-pillar="visibility"] main a:not(.btn) { color: var(--indigo-hi); }
[data-pillar="visibility"] main a:not(.btn):hover { color: var(--cyan-hi); }
[data-pillar="visibility"] .marquee-group span.amber::before { background: var(--indigo-hi); }
[data-pillar="visibility"] .icontile.pillar-mark { background: linear-gradient(160deg, var(--indigo-hi), var(--indigo-deep)); }

/* Informational role: definition blocks, calculator disclosure and
   table captions get cyan instead of green, so "here's a fact" reads
   as a distinct register from "here's a call to action". */
.definition { border-color: var(--cyan-line); }
.definition dt { color: var(--cyan-hi); }
.calcnote { border-color: var(--cyan-line); }
.calcnote summary { color: var(--cyan-hi); }
caption { color: var(--cyan-hi); opacity: .85; }
.provisional { border-color: var(--indigo-line); background: var(--indigo-wash); }
.provisional b { color: var(--indigo-hi); }

/* =========================================================
   MICRO-INTERACTIONS
   ========================================================= */

/* Press feedback — was entirely missing. Scale-down on :active gives
   tactile confirmation a click registered, distinct from the hover lift. */
.btn:active { transform: translateY(0) scale(.96); transition-duration: .1s; }
.itemcard:active, .card:active, .bigcard:active, .persona:active,
.chip:active, .paychip:active { transform: scale(.98); }

/* FAQ accordion — native <details> snaps with no transition. Animated
   via JS measuring scrollHeight (progressive enhancement: without JS
   or with reduced-motion, the browser's native instant toggle still
   works correctly, so nothing is ever hidden or broken). */
.faq .faq-a {
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.16,1,.3,1), opacity .22s ease, padding .28s ease;
}
.faq details:not([open]) .faq-a { max-height: 0 !important; opacity: 0; padding-top: 0; padding-bottom: 0; }
.faq summary::after { transition: transform .22s cubic-bezier(.34,1.56,.64,1); }

/* Mobile nav — was an instant display:none/flex swap. */
@media (max-width: 860px) {
  .nav {
    display: flex !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    transition: max-height .3s cubic-bezier(.16,1,.3,1), opacity .22s ease;
  }
  .nav.is-open { max-height: 480px; opacity: 1; padding: .5rem 20px 1.1rem; }
}

/* Calculator — output values swap instantly on every slider drag with
   no acknowledgement. A brief colour pulse marks "this just changed". */
@keyframes valuePulse {
  0%   { color: var(--cyan-hi); }
  100% { color: inherit; }
}
.calc-out .r .amt.just-updated { animation: valuePulse .5s ease-out; }
.calc-out .r { transition: border-color .25s ease, background-color .25s ease; }

/* Dynamically-inserted list items (search results) fade in rather than
   popping into existence. */
#search-results li { animation: fadeSlideIn .32s cubic-bezier(.16,1,.3,1) both; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Loading state for signup buttons — was a static label swap. */
.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading .btn-spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite; margin-right: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Table rows — subtle highlight sweep on hover instead of a flat swap. */
tbody tr { transition: background-color .18s ease; }

/* Link underline sweep for in-content prose links (not buttons/nav). */
.article-body a:not(.btn),
.postlist a .t,
.linklist a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size .22s ease;
}
.article-body a:not(.btn):hover,
.linklist a:hover { background-size: 100% 1px; }

/* =========================================================
   SCROLL REVEAL SYSTEM
   ---------------------------------------------------------
   Progressive enhancement ONLY. No element is ever hidden by
   default CSS or markup — main.js opts sections in dynamically,
   and only when IntersectionObserver exists AND the user has not
   requested reduced motion. A crawler, a no-JS browser, or a
   reduced-motion user all see fully visible content immediately.
   This matters more than usual here: this site's own SEO content
   explicitly criticises client-rendered content that crawlers
   can't see, so the reveal system cannot be the thing that makes
   that true of this site.
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
}
[data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); }
[data-reveal-group] > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group] > *:nth-child(2) { transition-delay: 45ms; }
[data-reveal-group] > *:nth-child(3) { transition-delay: 90ms; }
[data-reveal-group] > *:nth-child(4) { transition-delay: 135ms; }
[data-reveal-group] > *:nth-child(5) { transition-delay: 180ms; }
[data-reveal-group] > *:nth-child(6) { transition-delay: 225ms; }
[data-reveal-group] > *:nth-child(7) { transition-delay: 270ms; }
[data-reveal-group] > *:nth-child(n+8) { transition-delay: 315ms; }

/* Reduced motion: every animation above collapses to instant. Content
   was never hidden in the first place (see reveal system note), so
   this is a pure motion cut, not a visibility fix. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] > *,
  .faq .faq-a, .faq summary::after, .nav,
  .calc-out .r .amt, .calc-out .r,
  #search-results li, .btn, .itemcard, .card, .bigcard, .persona,
  tbody tr, .article-body a:not(.btn), .linklist a {
    transition: none !important;
    animation: none !important;
  }
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
  .faq details:not([open]) .faq-a { max-height: 0 !important; opacity: 0 !important; }
}

/* =========================================================
   PILLAR IDENTITY — Design (rose) and AI (teal)
   Same pattern as the indigo Visibility theming above; light values
   verified >=4.5:1, dark values >=7.2:1 against their backgrounds.
   ========================================================= */
:root {
  --rose:      #BE2D42;
  --rose-hi:   #A31F33;
  --rose-deep: #711422;
  --rose-wash: rgba(190, 45, 66, 0.08);
  --rose-line: rgba(190, 45, 66, 0.26);

  --teal:      #20796D;
  --teal-hi:   #176359;
  --teal-deep: #10423B;
  --teal-wash: rgba(32, 121, 109, 0.08);
  --teal-line: rgba(32, 121, 109, 0.26);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rose:      #F47689;
    --rose-hi:   #F7A1AE;
    --rose-deep: #A3293B;
    --rose-wash: rgba(244, 118, 137, 0.10);
    --rose-line: rgba(244, 118, 137, 0.30);

    --teal:      #39C6B3;
    --teal-hi:   #66DBCC;
    --teal-deep: #267369;
    --teal-wash: rgba(57, 198, 179, 0.09);
    --teal-line: rgba(57, 198, 179, 0.28);
  }
}
:root[data-theme="dark"] {
  --rose:      #F47689;
  --rose-hi:   #F7A1AE;
  --rose-deep: #A3293B;
  --rose-wash: rgba(244, 118, 137, 0.10);
  --rose-line: rgba(244, 118, 137, 0.30);

  --teal:      #39C6B3;
  --teal-hi:   #66DBCC;
  --teal-deep: #267369;
  --teal-wash: rgba(57, 198, 179, 0.09);
  --teal-line: rgba(57, 198, 179, 0.28);
}

[data-pillar="design"] .eyebrow { color: var(--rose-hi); }
[data-pillar="design"] .eyebrow::before { background: var(--rose-hi); }
[data-pillar="design"] .badge { border-color: var(--rose-line); background: var(--rose-wash); color: var(--rose-hi); }
[data-pillar="design"] h1 em {
  background: linear-gradient(100deg, var(--rose-hi), var(--rose) 55%, var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-pillar="design"] .answer { border-left-color: var(--rose); background: linear-gradient(90deg, var(--rose-wash), transparent 70%); }
[data-pillar="design"] .takeaways { border-color: var(--rose-line); }
[data-pillar="design"] .takeaways h2 { color: var(--rose-hi); }
[data-pillar="design"] main a:not(.btn) { color: var(--rose-hi); }
[data-pillar="design"] main a:not(.btn):hover { color: var(--rose); }
[data-pillar="design"] .marquee-group span.amber::before { background: var(--rose-hi); }

[data-pillar="ai"] .eyebrow { color: var(--teal-hi); }
[data-pillar="ai"] .eyebrow::before { background: var(--teal-hi); }
[data-pillar="ai"] .badge { border-color: var(--teal-line); background: var(--teal-wash); color: var(--teal-hi); }
[data-pillar="ai"] h1 em {
  background: linear-gradient(100deg, var(--teal-hi), var(--teal) 55%, var(--indigo-hi));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-pillar="ai"] .answer { border-left-color: var(--teal); background: linear-gradient(90deg, var(--teal-wash), transparent 70%); }
[data-pillar="ai"] .takeaways { border-color: var(--teal-line); }
[data-pillar="ai"] .takeaways h2 { color: var(--teal-hi); }
[data-pillar="ai"] main a:not(.btn) { color: var(--teal-hi); }
[data-pillar="ai"] main a:not(.btn):hover { color: var(--teal); }
[data-pillar="ai"] .marquee-group span.amber::before { background: var(--teal-hi); }

/* =========================================================
   PILL NAVIGATION
   A floating bar with a bead that slides between items. The
   bead is a sibling of the bar, not a child, because the bar
   carries a radial mask that punches a real transparent notch
   at the bead's position — anything inside the bar would be
   clipped by that mask.

   --bead-i is the (fractional) item index. Registering it with
   @property is what makes it interpolate, so the bead, the
   notch and the glow all animate from one transitioned value
   instead of three separately-timed transforms. Browsers
   without @property support jump instead of slide; nothing
   breaks. The index is also set inline per page, so the bead
   lands correctly with JavaScript disabled.
   ========================================================= */
@property --bead-i {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.pillnav {
  --pill-item: 70px;
  --pill-h: 58px;
  --bead-d: 46px;
  --bead-lift: 18px;
  --hole-d: calc(var(--bead-d) + 10px);
  --bead-x: calc(var(--bead-i) * var(--pill-item) + (var(--pill-item) - var(--bead-d)) / 2);
  --hole-x: calc(var(--bead-i) * var(--pill-item) + var(--pill-item) / 2);
  position: relative;
  display: inline-block;
  flex: none;
  transition: --bead-i .48s cubic-bezier(.34,1.26,.5,1);
}
.pillnav.is-dragging { transition: none; }

.pillbar {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: var(--pill-h);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-strong);
  box-shadow: 0 12px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-mask-image: radial-gradient(circle calc(var(--hole-d) / 2) at var(--hole-x) 0, transparent 97%, #000 100%);
          mask-image: radial-gradient(circle calc(var(--hole-d) / 2) at var(--hole-x) 0, transparent 97%, #000 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.pill-item {
  position: relative;
  width: var(--pill-item);
  height: var(--pill-h);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-mute);
  border-radius: 999px;
}
.pill-item .ico { display: grid; place-items: center; transition: opacity .28s ease, transform .28s ease, color .28s ease; }
.pill-item:hover { color: var(--text); }
.pill-item:hover .ico { transform: translateY(-2px); }
.pill-item:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -4px; }

.pill-item .lbl {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%) translateY(5px);
  font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent-hi);
  white-space: nowrap; pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
/* The active item's own glyph hands off to the bead, which carries
   a copy of it. Both states are set in the HTML, so this is correct
   before any script runs. */
.pill-item[aria-current="page"] .ico,
.pill-item.is-target .ico { opacity: 0; transform: translateY(-8px); }
.pill-item[aria-current="page"] .lbl,
.pill-item.is-target .lbl { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Hovering any non-active item previews the same icon-to-label
   handoff the active item already shows at rest, rather than adding
   a separate tooltip element — same visual language, one less thing
   to maintain. Skipped on touch (any hover) so a tap doesn't leave
   the icon dimmed with nothing to un-hover it back. */
@media (hover: hover) {
  .pill-item:not([aria-current="page"]):not(.is-target):hover .ico { opacity: 0; transform: translateY(-8px); }
  .pill-item:not([aria-current="page"]):not(.is-target):hover .lbl { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.pill-bead {
  position: absolute;
  left: 0; top: calc(-1 * var(--bead-lift));
  width: var(--bead-d); height: var(--bead-d);
  border-radius: 50%;
  transform: translateX(var(--bead-x));
  background: linear-gradient(150deg, var(--accent-hi), var(--accent-deep));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 42%, transparent), inset 0 1px 0 rgba(255,255,255,.4);
  display: grid; place-items: center;
  color: var(--on-accent);
  z-index: 2;
  cursor: grab;
  touch-action: none;
}
.pillnav.is-dragging .pill-bead { cursor: grabbing; box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.4); }
.pill-bead::after {
  content: "";
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  opacity: .55;
}

/* Desktop keeps the affordance implicit — the bead reads as draggable
   on hover. The hint is for touch, where nothing signals it. */
.pillhint { display: none; }
.pillhint {
  position: absolute; top: calc(100% + .5rem); left: 50%;
  transform: translateX(-50%);
  font-size: .68rem; color: var(--text-mute); white-space: nowrap;
  pointer-events: none;
  transition: opacity .6s ease;
}
.pillhint.is-gone { opacity: 0; }

/* Header layout that carries the pill bar */
.pillhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; min-height: 74px;
}
.headchip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .42rem .8rem;
  background: var(--surface);
  white-space: nowrap;
}
.headchip i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
  animation: chipPulse 2.4s ease-in-out infinite;
}
@keyframes chipPulse {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  50%      { opacity: .5; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* Below 900px the bar detaches and becomes a floating bottom tab
   bar. Same markup, same bead — which is why the old hamburger
   menu (and the inline-style override bug that used to break it)
   is gone entirely rather than restyled. */
@media (max-width: 1080px) { .headchip { display: none; } }
@media (max-width: 900px) {
  .pillhead { min-height: 64px; gap: .8rem; }
  .brand { font-size: .96rem; }
  .brand span.dim { display: none; }
}
@media (max-width: 640px) {
  .pillhead { min-height: 60px; }
  /* backdrop-filter would make the header a containing block for the
     fixed bar below, pinning it inside the header instead of the
     viewport. Solid background instead of blur at this width. */
  .site-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pillnav {
    position: fixed;
    left: 50%; bottom: 16px;
    transform: translateX(-50%);
    z-index: 130;
    --pill-item: 62px;
  }
  .pillhint {
    display: block;
    top: auto; bottom: calc(100% + .6rem);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .32rem .7rem;
  }
  body { padding-bottom: 92px; }
  /* Lifted clear of the tab bar. The dismissed state has to travel the
     extra 96px too, or a bar that used to sit flush at bottom:0 now
     peeks back into view while it is supposed to be hidden. */
  .stickycta { bottom: 96px; }
  .stickycta:not(.is-visible) { transform: translateY(calc(110% + 96px)); }
  .totop, body:has(.stickycta.is-visible) .totop { bottom: 96px; }
  body:has(.stickycta.is-visible) .totop { bottom: 176px; }
}
@media (max-width: 380px) { .pillnav { --pill-item: 56px; } }

/* =========================================================
   TELEMETRY STRIP — the operational status band
   Every value here is a site fact, not a simulated live metric.
   ========================================================= */
.telemetry {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--accent-wash), transparent 45%, var(--accent2-wash));
}
.telemetry-inner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem 1.9rem;
  min-height: 46px;
  font-size: .76rem;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.telemetry span.t { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-mute); }
.telemetry span.t b { color: var(--text); font-weight: 650; }
.telemetry span.t em { color: var(--accent-hi); font-style: normal; font-weight: 650; }
.telemetry span.t.gold em { color: var(--accent2-hi); }
.telemetry .led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
  animation: chipPulse 2.4s ease-in-out infinite;
}
.telemetry .led.gold { background: var(--accent2); animation-delay: .8s; }
@media (max-width: 760px) {
  .telemetry-inner { gap: .45rem 1.1rem; font-size: .69rem; }
  .telemetry span.t:nth-child(n+3) { display: none; }
}

/* =========================================================
   TRANSMISSION — terminal card with a typed line
   ========================================================= */
.transmission {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--surface-2), var(--surface) 70%);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.transmission .bar {
  display: flex; align-items: center; gap: .45rem;
  padding: .7rem .95rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-3);
}
.transmission .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: none; }
.transmission .bar i:nth-child(1) { background: #E5534B; }
.transmission .bar i:nth-child(2) { background: #E3B341; }
.transmission .bar i:nth-child(3) { background: var(--accent); }
.transmission .bar span {
  margin-left: .5rem; font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute);
}
.transmission .body { padding: 1.15rem 1.15rem 1.25rem; }
.transmission .body p {
  font-family: var(--font-mono); font-size: .84rem; line-height: 1.75;
  color: var(--text-dim); margin: 0 0 .85rem; font-style: italic;
}
.transmission .caret {
  display: inline-block; width: 8px; height: 1.05em;
  background: var(--accent-hi); vertical-align: text-bottom;
  margin-left: 2px;
  animation: caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.transmission .who {
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--accent-hi); letter-spacing: .05em;
}

/* =========================================================
   METRIC PANEL — real coverage figures, with float badges
   ========================================================= */
.metricpanel { position: relative; }
/* the lower badge hangs past the card, so the row beneath needs the
   clearance or the two collide */
.metricpanel:has(.floatbadge.bl) { margin-bottom: 46px; }
.metricwrap {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 72%);
  padding: 1.2rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.48);
}
.metrichead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.05rem;
}
.metrichead h3 { font-size: .98rem; margin: 0; }
.metrichead p { margin: .15rem 0 0; font-size: .76rem; color: var(--text-mute); }
.metrichead .tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-hi);
  border: 1px solid var(--accent-line); border-radius: 999px;
  padding: .3rem .6rem; flex: none;
}
.metrichead .tag i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: chipPulse 2.4s ease-in-out infinite; }

.metricgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.metric {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-3);
  padding: .85rem .9rem;
}
.metric .k {
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute);
}
.metric .v {
  font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--accent-hi); margin-top: .3rem; line-height: 1.1;
}
.metric.gold .v { color: var(--accent2-hi); }
.metric .s { font-size: .72rem; color: var(--text-mute); margin-top: .15rem; }

.metriclist { margin-top: 1rem; }
.metriclist .hd {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute);
  margin-bottom: .6rem;
}
.metriclist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.metriclist li {
  display: flex; align-items: center; gap: .7rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: .6rem .7rem;
}
.metriclist .av {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 800;
  background: var(--accent-wash); color: var(--accent-hi);
  border: 1px solid var(--accent-line);
}
.metriclist .av.i { background: rgba(129,140,248,.12); color: var(--indigo-hi); border-color: rgba(129,140,248,.3); }
.metriclist .av.r { background: var(--rose-wash); color: var(--rose-hi); border-color: var(--rose-line); }
.metriclist .av.t { background: var(--teal-wash); color: var(--teal-hi); border-color: var(--teal-line); }
.metriclist .tx { font-size: .8rem; color: var(--text-dim); min-width: 0; }
.metriclist .tx b { color: var(--text); font-weight: 600; }
.metriclist .n { margin-left: auto; font-family: var(--font-mono); font-size: .7rem; color: var(--text-mute); flex: none; }

.floatbadge {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--surface-3), var(--surface-2));
  padding: .6rem .8rem;
  box-shadow: 0 16px 34px rgba(0,0,0,.55);
  /* `backwards` matters here: the staggered badge has an animation-delay,
     and without it the element renders untransformed for that first
     1.6s — long enough to sit on top of the card it should be clearing. */
  animation: badgeBob 6s ease-in-out infinite both;
}
.floatbadge .ic {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: grid; place-items: center;
  background: var(--accent2-wash); color: var(--accent2-hi);
  border: 1px solid var(--accent2-line);
}
.floatbadge .ic.g { background: var(--accent-wash); color: var(--accent-hi); border-color: var(--accent-line); }
.floatbadge b { display: block; font-size: .82rem; }
.floatbadge small { display: block; font-size: .68rem; color: var(--text-mute); }
/* Offset by a share of their own height rather than a fixed pixel
   value, so a badge clears the card edge completely whatever its text
   wraps to — hanging them inward covered the card's own content. The
   bob is folded into the keyframes because it shares the transform. */
.floatbadge.tr { top: 0; right: 18px; animation-name: badgeBobUp; }
.floatbadge.bl { bottom: 0; left: 18px; animation-name: badgeBobDown; animation-delay: 1.6s; }
@keyframes badgeBobUp {
  0%, 100% { transform: translateY(-114%); }
  50%      { transform: translateY(-126%); }
}
@keyframes badgeBobDown {
  0%, 100% { transform: translateY(114%); }
  50%      { transform: translateY(126%); }
}
@keyframes badgeBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (max-width: 1080px) {
  .floatbadge.tr { right: 10px; }
  .floatbadge.bl { left: 10px; }
}
@media (max-width: 560px) {
  .metricgrid { grid-template-columns: 1fr; }
  .floatbadge, .floatbadge.tr, .floatbadge.bl {
    position: static; margin-top: .7rem;
    animation: none; transform: none; box-shadow: none;
  }
}

/* =========================================================
   VS MEDAL — the gold pivot between the two columns
   The component already existed; this only adds the ring that
   marks it as the axis the two columns turn on.
   ========================================================= */
.vsmedal::after {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent2) 50%, transparent);
  animation: pivotRing 3.2s ease-out infinite;
  pointer-events: none;
}
@keyframes pivotRing {
  0%   { transform: scale(.9);  opacity: .85; }
  100% { transform: scale(1.32); opacity: 0; }
}

/* =========================================================
   MOTION — cursor spotlight, shimmer, count-up
   ========================================================= */
.bigcard, .vscol, .metricwrap { position: relative; }
.bigcard::after, .vscol::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(86,238,152,.09), transparent 62%);
}
.bigcard:hover::after, .vscol:hover::after { opacity: 1; }

/* Adds only the sweep, never the colours — each pillar keeps the
   gradient it already defines. Listed at matching specificity so
   background-size survives the pillar rules' `background` shorthand. */
[data-pillar] .hero h1 em,
[data-pillar] h1 em,
.hero h1 em,
h1 em {
  background-size: 250% 100%;
  animation: shimmer 9s linear infinite;
}
.grad {
  background: linear-gradient(100deg, var(--accent-hi) 0%, var(--accent-hi) 36%, var(--accent2-hi) 60%, var(--accent-hi) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: shimmer 9s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}

[data-count] { font-variant-numeric: tabular-nums; }

/* Motion cut. Extends the targeted list above rather than
   reintroducing a blanket rule — a blanket `*` reset here was
   what silently froze every animation on the site once before. */
@media (prefers-reduced-motion: reduce) {
  .pillnav, .pill-item .ico, .pill-item .lbl, .pill-bead,
  .headchip i, .telemetry .led, .metrichead .tag i,
  .floatbadge, .vsmedal::after, .transmission .caret,
  .bigcard::after, .vscol::after,
  h1 em, .grad, .pillhint {
    transition: none !important;
    animation: none !important;
  }
  .grad { background: none; color: var(--accent2-hi); }
  .transmission .caret { opacity: 1; }
  /* animation:none drops the keyframe transform that holds these clear
     of the card, so the resting offset is restated here. */
  .floatbadge.tr { transform: translateY(-114%); }
  .floatbadge.bl { transform: translateY(114%); }
}

/* =========================================================
   AMBIENT BACKGROUND — whole-page, not just the hero
   .bg-orbs only ever lived inside .hero/.article-head, so every
   other section (feature rows, coverage panel, VS box, calculator,
   footer) had zero motion. This is a fixed layer behind everything,
   built as body pseudo-elements so it needs no HTML changes on any
   of the 15 pages and can never scroll past the fold.
   ========================================================= */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Two large, very soft gradients drifting slowly behind the whole
   page. Kept faint (an order below the hero's own orbs) so they read
   as ambience while scrolling rather than competing with content. */
body::before {
  background:
    radial-gradient(640px 520px at 12% 18%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 65%),
    radial-gradient(600px 500px at 88% 78%, color-mix(in srgb, var(--accent2) 7.5%, transparent), transparent 65%),
    radial-gradient(520px 440px at 50% 96%, rgba(129,140,248,.045), transparent 68%);
  animation: ambientDrift 26s ease-in-out infinite;
}
/* A faint moving grid — the hero already has a static version of this
   line pattern; this repeats it for the rest of the page and lets it
   creep, which is what reads as "the background is alive" on scroll. */
body::after {
  /* var(--text)-based rather than a literal white — a literal white
     line is invisible against the light theme's paper background. */
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: gridCreep 46s linear infinite;
}
@keyframes ambientDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(3%, -2.5%) scale(1.06); }
}
@keyframes gridCreep {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 64px 64px, 64px 64px; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
}

/* =========================================================
   THEME TOGGLE
   Icon visibility is pure CSS, mirroring the same three-tier
   pattern as the colour tokens themselves (system default via the
   media query, explicit override via the attribute) — so the correct
   icon is already showing on first paint with no JS involved. JS only
   handles the click: flip the attribute, persist the explicit choice,
   and stop matching the system when the visitor has actually chosen.
   ========================================================= */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  flex: none;
  position: relative;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent-line); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { position: absolute; inset: 0; margin: auto; }

.theme-toggle .i-sun { display: inline-flex; }
.theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun  { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: inline-flex; }
}
:root[data-theme="dark"] .theme-toggle .i-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: inline-flex; }
:root[data-theme="light"] .theme-toggle .i-sun  { display: inline-flex; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }

@media (max-width: 900px) {
  .theme-toggle { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none !important; }
}

/* The totop button's ring gradient is an inline SVG per page (not a
   shared symbol), so its two stops are styled via class rather than a
   hardcoded stop-color attribute — otherwise they'd stay pinned to the
   old green/amber pair regardless of theme or accent choice. */
.totop stop.s1 { stop-color: var(--accent-hi); }
.totop stop.s2 { stop-color: var(--accent2); }

/* =========================================================
   LIQUID BUTTON
   Pure CSS, no JS: hovering a .btn rolls its shape through a loop of
   asymmetric corner radii in place — nothing moves position, nothing
   overlays on top, the button itself just reads as liquid while the
   cursor sits on it. Clicking (:active) snaps it straight back to its
   resting shape, so the "roll" only ever plays while genuinely
   hovered and always resolves back to normal the instant it's pressed.
   ========================================================= */
.btn {
  position: relative;
}

.btn:hover {
  animation: liquidRoll 1.6s ease-in-out infinite;
}

/* Corner radii are fixed px, not percentages: this site's wide, short
   pill-shaped CTAs (e.g. "Model your bill — free") distort into an
   oval when the corners wobble by percentage, because a %-based
   radius is relative to each button's own width/height and blows up
   on any short, wide button. Px deltas around the resting --r-md stay
   proportionate on every button shape instead. */
@keyframes liquidRoll {
  0%   { border-radius: var(--r-md); }
  25%  { border-radius: 6px 22px 26px 9px / 16px 8px 20px 14px; }
  50%  { border-radius: 24px 8px 7px 23px / 8px 19px 9px 21px; }
  75%  { border-radius: 8px 21px 18px 10px / 20px 9px 17px 11px; }
  100% { border-radius: var(--r-md); }
}

/* Clicking always wins over the hover loop: shape snaps straight back
   to resting immediately, independent of wherever the loop happened
   to be mid-roll. */
.btn:active {
  animation: none;
  border-radius: var(--r-md);
  transition: border-radius .12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  /* Hovering is a deliberate, sustained user action here, not a
     one-off click — an infinite loop for as long as the cursor sits
     still genuinely is ambient motion in that case, so this one does
     get shortened to a single pass rather than looping. */
  .btn:hover { animation: liquidRoll .5s ease-in-out 1; }
}

/* =========================================================
   HEADER QUICK-SEARCH
   Deliberately its own control outside the pill nav — it isn't a
   destination page, it's an action, and folding it into the pillbar
   made it behave like a nav item (bead landing on it, hover-preview
   swapping its icon for a label) when it should just open a panel.
   ========================================================= */
.hsearch { position: relative; flex: none; }

.hsearch-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  position: relative;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.hsearch-toggle:hover { color: var(--text); border-color: var(--accent-line); transform: translateY(-1px); }
.hsearch-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hsearch-toggle[aria-expanded="true"] { color: var(--accent-hi); border-color: var(--accent-line); background: var(--accent-wash); }

.hsearch-panel {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  width: min(340px, 88vw);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 20px 46px rgba(0,0,0,.5);
  padding: .8rem;
  z-index: 60;
}
.hsearch-input {
  width: 100%;
  padding: .65rem .8rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text);
  font-size: .92rem;
}
.hsearch-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.hsearch-hint {
  margin: .7rem .1rem .1rem;
  font-size: .78rem;
  color: var(--text-mute);
}

.hsearch-results {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
}
.hsearch-results li + li { margin-top: .25rem; }
.hsearch-results a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .7rem;
  padding: .55rem .7rem;
  border-radius: var(--r-sm);
  color: var(--text-dim);
}
.hsearch-results a:hover,
.hsearch-results a:focus-visible {
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.hsearch-results .t { font-size: .86rem; }
.hsearch-results .s {
  flex: none;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-hi);
}

.hsearch-full {
  display: block;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  color: var(--text-mute);
  text-align: right;
}
.hsearch-full:hover { color: var(--accent-hi); }

@media (max-width: 640px) {
  .hsearch-panel { position: fixed; top: 60px; right: .8rem; left: .8rem; width: auto; }
}