/* ==========================================================================
   The Dataa — Design System
   Tokens → Base → Layout → Components → Sections → Utilities → Responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
/* Palette is Google's four brand colors + the Google grey ramp.
   Each page re-maps the --brand-* ramp to one of the four via a body class
   (.acc-blue / .acc-red / .acc-yellow / .acc-green), so every existing rule
   re-themes automatically and each page reads as its own place.
   Button/text stops are the DARK end of each ramp so white text clears WCAG AA;
   the bright brand hues are reserved for fills, dots and diagram strokes. */
:root {
  /* --- The four --- */
  --g-blue:#4285F4;   --g-red:#EA4335;   --g-yellow:#FBBC04;   --g-green:#34A853;

  /* Blue ramp (default page accent) */
  --brand-900:#174EA6; --brand-800:#185ABC; --brand-700:#1967D2;
  --brand-600:#1A73E8; --brand-500:#4285F4; --brand-400:#669DF6;
  --brand-300:#8AB4F8; --brand-200:#AECBFA; --brand-100:#D2E3FC; --brand-50:#E8F0FE;

  /* Green */
  --accent-700:#0D652D; --accent-600:#137333; --accent-500:#34A853;
  --accent-300:#81C995; --accent-100:#CEEAD6; --accent-50:#E6F4EA;

  /* Yellow (600 darkened to #B06000 for AA on white text) */
  --amber-600:#B06000; --amber-500:#FBBC04; --amber-100:#FEEFC3; --amber-50:#FEF7E0;

  /* Red */
  --rose-600:#C5221F; --rose-500:#EA4335; --rose-100:#FAD2CF; --rose-50:#FCE8E6;

  /* Google grey ramp */
  --ink-900:#202124; --ink-800:#3C4043; --ink-700:#5F6368;
  --ink-600:#5F6368; --ink-500:#6B7075; --ink-400:#9AA0A6;--ink-450:#6B7075;
  --ink-300:#DADCE0; --ink-200:#E8EAED; --ink-100:#F1F3F4; --ink-50:#F8F9FA;
  --white:#FFFFFF;

  /* Heading + wordmark colors — deliberately not black */
  --head:#14265E;      /* deep navy, 13.6:1 on white */
  --wordmark:#1A73E8;  /* Google blue */

  /* Nothing on this site is black. Dark surfaces are deep navy; solid buttons
     are an accent gradient. Both keep white text well above AA. */
  --navy-900:#0B1838; --navy-800:#102450; --navy-700:#16305F;
  --grad:linear-gradient(135deg,#1A73E8 0%,#4285F4 55%,#34A853 130%);
  --grad-hover:linear-gradient(135deg,#1967D2 0%,#1A73E8 55%,#137333 130%);

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-xs:0.8125rem; --t-sm:0.9375rem; --t-base:1rem; --t-md:1.125rem;
  --t-lg:1.3125rem; --t-xl:1.5rem;
  --t-2xl:clamp(1.625rem, 1.2rem + 1.4vw, 2rem);
  --t-3xl:clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);
  --t-4xl:clamp(2.25rem, 1.4rem + 3.2vw, 3.5rem);
  --t-5xl:clamp(2.625rem, 1.2rem + 5.4vw, 4.75rem);
  --t-6xl:clamp(3rem, 1rem + 7vw, 5.75rem);

  /* Space */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;
  --s-24:96px; --s-32:128px;

  /* Radius + elevation */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:999px;
  --e-1:0 1px 2px rgba(11,18,32,.06), 0 1px 3px rgba(11,18,32,.04);
  --e-2:0 2px 4px rgba(11,18,32,.05), 0 4px 12px rgba(11,18,32,.06);
  --e-3:0 8px 16px rgba(11,18,32,.07), 0 16px 40px rgba(11,18,32,.08);
  --e-4:0 24px 60px rgba(10,31,68,.16);

  --maxw:1200px;
  --maxw-narrow:760px;
  --nav-h:68px;

  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- 1b. Per-page accent themes ---------- */
/* Re-map the brand ramp. Every component that references --brand-* follows. */
body.acc-green{
  --grad:linear-gradient(135deg,#137333 0%,#34A853 60%,#4285F4 140%);
  --grad-hover:linear-gradient(135deg,#0D652D 0%,#137333 60%,#1A73E8 140%);
  --brand-900:#0D652D; --brand-800:#0D652D; --brand-700:#137333;
  --brand-600:#137333; --brand-500:#34A853; --brand-400:#5BB974;
  --brand-300:#81C995; --brand-200:#A8DAB5; --brand-100:#CEEAD6; --brand-50:#E6F4EA;
}
body.acc-yellow{
  --grad:linear-gradient(135deg,#B06000 0%,#F9AB00 75%,#EA4335 145%);
  --grad-hover:linear-gradient(135deg,#8F5300 0%,#E37400 75%,#C5221F 145%);
  --brand-900:#7F4A00; --brand-800:#8F5300; --brand-700:#9C5B00;
  --brand-600:#B06000; --brand-500:#F9AB00; --brand-400:#FCC934;
  --brand-300:#FDD663; --brand-200:#FDE293; --brand-100:#FEEFC3; --brand-50:#FEF7E0;
}
body.acc-red{
  --grad:linear-gradient(135deg,#C5221F 0%,#EA4335 60%,#FBBC04 145%);
  --grad-hover:linear-gradient(135deg,#A50E0E 0%,#C5221F 60%,#B06000 145%);
  --brand-900:#A50E0E; --brand-800:#B31412; --brand-700:#C5221F;
  --brand-600:#C5221F; --brand-500:#EA4335; --brand-400:#EE675C;
  --brand-300:#F28B82; --brand-200:#F6AEA9; --brand-100:#FAD2CF; --brand-50:#FCE8E6;
}

/* Thin four-color signature rule under the header — the Google tell */
.g-rule{height:3px;display:flex}
.g-rule i{flex:1;display:block}
.g-rule i:nth-child(1){background:var(--g-blue)}
.g-rule i:nth-child(2){background:var(--g-red)}
.g-rule i:nth-child(3){background:var(--g-yellow)}
.g-rule i:nth-child(4){background:var(--g-green)}

/* Four-color helpers for content that should show the full palette.
   These are TEXT colors, so each is the darkest stop that still reads as its hue.
   Pure #FBBC04 is 1.7:1 on white — it is a fill color only, never text. */
.c-blue{color:#1A73E8}   .c-red{color:#C5221F}
.c-yellow{color:#B06000} .c-green{color:#137333}
.card-icon.gb{background:#E8F0FE;color:#1A73E8}
.card-icon.gr{background:#FCE8E6;color:#C5221F}
.card-icon.gy{background:#FEF7E0;color:#B06000}
.card-icon.gg{background:#E6F4EA;color:#137333}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;font-family:var(--font-sans);font-size:var(--t-md);line-height:1.72;
  color:var(--ink-700);background:var(--white);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv02","cv03","cv04","ss01";
}
/* Headings are deep navy, not black — reads warmer and more deliberate than #000,
   and stays neutral against all four per-page accents. */
h1,h2,h3,h4,h5{color:var(--head);margin:0 0 var(--s-4);font-weight:600;letter-spacing:-.022em;line-height:1.15}
h1{font-size:var(--t-5xl);letter-spacing:-.042em;line-height:.98;font-weight:600}
h2{font-size:var(--t-3xl);letter-spacing:-.034em;line-height:1.08}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg)}
h5{font-size:var(--t-base)}
/* Size utilities. Card sub-headings sit under a section <h2>, so semantically they
   must be <h3> — but visually they want the smaller h4/h5 scale. Decoupling the two
   keeps the heading outline correct without redesigning anything. */
.h4{font-size:var(--t-lg)}
.h5{font-size:var(--t-base)}
p{margin:0 0 var(--s-4)}
a{color:var(--brand-600);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--brand-700)}
img,svg,video{max-width:100%;display:block}
ul,ol{margin:0 0 var(--s-4);padding-left:1.25em}
li{margin-bottom:var(--s-2)}
hr{border:0;border-top:1px solid var(--ink-200);margin:var(--s-12) 0}
code{font-family:var(--font-mono);font-size:.875em;background:var(--ink-100);padding:2px 6px;border-radius:var(--r-sm);color:var(--ink-800)}
strong{color:var(--ink-900);font-weight:620}
:focus-visible{outline:3px solid var(--brand-400);outline-offset:2px;border-radius:4px}
::selection{background:var(--brand-200);color:var(--brand-900)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--brand-600);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 var(--r-md) 0}
.skip-link:focus{left:0;color:#fff}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s-6)}
.wrap-narrow{max-width:var(--maxw-narrow);margin-inline:auto}
.section{padding-block:var(--s-24)}
.section-sm{padding-block:var(--s-16)}
.section-tight{padding-block:var(--s-12)}
.grid{display:grid;gap:var(--s-6)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-5-7,.g-7-5{display:grid}
.g-5-7{grid-template-columns:5fr 7fr;gap:var(--s-16);align-items:center}
.g-7-5{grid-template-columns:7fr 5fr;gap:var(--s-16);align-items:center}
.stack>*+*{margin-top:var(--s-4)}
.flex{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* ---------- 4. Typography helpers ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--t-xs);font-weight:640;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-600);margin-bottom:var(--s-4);
}
.eyebrow::before{content:"";width:20px;height:2px;background:currentColor;border-radius:2px}
.eyebrow.no-rule::before{display:none}
.lede{font-size:var(--t-lg);line-height:1.55;color:var(--ink-600);max-width:62ch}
.small{font-size:var(--t-sm);color:var(--ink-500)}
.tiny{font-size:var(--t-xs);color:var(--ink-500);line-height:1.6}
.mono{font-family:var(--font-mono);font-size:var(--t-sm);letter-spacing:-.01em}
.section-head{max-width:70ch;margin-bottom:var(--s-12)}
.section-head.center{margin-inline:auto}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:inherit;font-size:var(--t-base);font-weight:600;letter-spacing:-.01em;
  padding:13px 24px;border-radius:var(--r-full);border:1px solid transparent;
  cursor:pointer;transition:all .18s var(--ease);text-align:center;white-space:nowrap;
  line-height:1.2;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--e-2);background-size:150% 150%;animation:gradslide 9s ease-in-out infinite}
.btn-primary:hover{background:var(--grad-hover);background-size:150% 150%;color:#fff;transform:translateY(-1px);box-shadow:var(--e-3)}
@keyframes gradslide{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{background:var(--white);color:var(--ink-800);border-color:var(--ink-300);box-shadow:var(--e-1)}
.btn-secondary:hover{border-color:var(--ink-400);background:var(--ink-50);color:var(--ink-900);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--brand-600);padding-inline:var(--s-3)}
.btn-ghost:hover{background:var(--brand-50);color:var(--brand-700)}
.btn-invert{background:#fff;color:var(--brand-900)}
.btn-invert:hover{background:var(--brand-100);color:var(--brand-900);transform:translateY(-1px)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-outline-light:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.6)}
.btn-lg{font-size:var(--t-md);padding:16px 30px}
.btn-sm{font-size:var(--t-sm);padding:9px 16px}
.btn-block{width:100%}
.arrow-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:var(--t-base)}
.arrow-link::after{content:"→";transition:transform .18s var(--ease)}
.arrow-link:hover::after{transform:translateX(4px)}

/* ---------- 6. Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--ink-200);
}
.nav{display:flex;align-items:center;gap:var(--s-8);height:var(--nav-h)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.075rem;color:var(--wordmark);letter-spacing:-.03em;flex:none}
.logo:hover{color:var(--wordmark)}
.logo-mark{width:30px;height:30px;flex:none}
.nav-links{display:flex;align-items:center;gap:var(--s-1);list-style:none;margin:0;padding:0;flex:1}
.nav-links>li{margin:0;position:relative}
.nav-link{
  display:inline-flex;align-items:center;gap:5px;padding:9px 12px;border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:560;color:var(--ink-700);letter-spacing:-.005em;
  background:none;border:0;font-family:inherit;cursor:pointer;
}
.nav-link:hover,.nav-link[aria-expanded="true"]{background:var(--ink-100);color:var(--ink-900)}
.nav-link.is-active{color:var(--brand-600)}
.nav-link .chev{width:14px;height:14px;transition:transform .2s var(--ease);opacity:.6}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-cta{display:flex;align-items:center;gap:var(--s-3);flex:none}

.mega{
  position:absolute;top:calc(100% + 10px);left:-20px;min-width:640px;max-width:min(640px,calc(100vw - 40px));
  background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);
  box-shadow:var(--e-4);padding:var(--s-5);opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:all .18s var(--ease);
}
/* The panel opens on hover and on keyboard focus using CSS alone, so primary
   navigation does not depend on JavaScript running. The JS still handles click
   and touch and keeps aria-expanded honest, but if it ever fails to load the
   menu keeps working. z-index is explicit because the header creates its own
   stacking context via backdrop-filter. */
/* The panel is revealed by <details open>. That is a browser primitive, so a
   click always works regardless of JavaScript, CSS specificity or how a device
   reports hover. Everything else here is polish on top of that. */
.nav-drop{position:static}
.nav-drop>summary{list-style:none;cursor:pointer}
.nav-drop>summary::-webkit-details-marker{display:none}
.nav-drop>summary::marker{content:""}
.nav-drop[open]>summary{background:var(--ink-100);color:var(--ink-900)}
.nav-drop[open]>summary .chev{transform:rotate(180deg)}
.nav-drop[open] .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0)}
/* Hover-to-open for mouse users only. On touch, :hover sticks after a tap and
   would trap the panel open, so pointer:fine gates it. */
@media (hover:hover) and (pointer:fine){
  .nav-links>li.has-drop:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-links>li.has-drop:hover .chev{transform:rotate(180deg)}
}
/* Trust sits far right; anchoring a 640px panel to the trigger's left edge would
   push it off screen. */
.nav-links>li:nth-child(5) .mega{left:auto;right:-20px}
.mega{z-index:120}
/* Invisible bridge across the 10px gap, so the pointer can travel from the
   trigger down into the panel without the menu closing under it. */
.nav-links>li .mega::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}

.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.mega-item{display:flex;gap:var(--s-3);padding:var(--s-3);border-radius:var(--r-md);transition:background .15s var(--ease)}
.mega-item:hover{background:var(--brand-50)}
.mega-icon{width:34px;height:34px;flex:none;border-radius:9px;background:var(--brand-100);color:var(--brand-600);display:grid;place-items:center}
.mega-icon svg{width:18px;height:18px}
.mega-title{font-weight:640;font-size:var(--t-sm);color:var(--ink-900);margin:0 0 2px}
.mega-desc{font-size:var(--t-xs);color:var(--ink-500);margin:0;line-height:1.45}
.mega-foot{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--ink-200);display:flex;justify-content:space-between;align-items:center;font-size:var(--t-sm)}

.nav-toggle{display:none;background:none;border:1px solid var(--ink-300);border-radius:var(--r-sm);padding:8px;cursor:pointer;color:var(--ink-800)}
.mobile-menu{display:none;border-top:1px solid var(--ink-200);background:#fff;max-height:calc(100vh - var(--nav-h));overflow-y:auto}
.mobile-menu[data-open="true"]{display:block}
.mobile-menu ul{list-style:none;margin:0;padding:var(--s-4) 0}
.mobile-menu a{display:block;padding:11px var(--s-6);color:var(--ink-700);font-weight:560;font-size:var(--t-base)}
.mobile-menu a:hover{background:var(--ink-50)}
/* Collapsible mobile sections built on <details>/<summary>: native, keyboard
   accessible, and impossible to break by a JS failure. */
.mobile-menu .m-sec{border-bottom:1px solid var(--ink-100)}
.mobile-menu .m-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-4) var(--s-6);font-size:var(--t-base);color:var(--ink-900);
  font-weight:620;cursor:pointer;list-style:none;user-select:none;
}
.mobile-menu .m-head::-webkit-details-marker{display:none}
.mobile-menu .m-head:hover{background:var(--ink-50)}
.mobile-menu .m-chev{width:18px;height:18px;opacity:.55;transition:transform .2s var(--ease);flex:none}
.mobile-menu details[open] .m-chev{transform:rotate(180deg)}
.mobile-menu details[open] .m-head{color:var(--brand-600)}
.mobile-menu .m-sec ul{padding:0 0 var(--s-3)}
.mobile-menu .m-sec a{padding-left:calc(var(--s-6) + 12px);font-weight:500}
.mobile-cta{padding:var(--s-4) var(--s-6) var(--s-8);display:grid;gap:var(--s-3)}

/* Announcement bar */
.announce{
  background:var(--ink-50);color:var(--ink-600);border-bottom:1px solid var(--ink-200);
  font-size:var(--t-sm);text-align:center;padding:9px var(--s-6);
}
.announce a{color:var(--brand-600);font-weight:600}
.announce a:hover{color:var(--brand-700);text-decoration:underline;text-underline-offset:3px}

/* ---------- 7. Cards & surfaces ---------- */
.card{
  background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);
  padding:var(--s-6);transition:all .2s var(--ease);
}
.card-hover:hover{border-color:var(--brand-300);box-shadow:var(--e-3);transform:translateY(-3px)}
.card-tight{padding:var(--s-5)}
.card-flush{padding:0;overflow:hidden}
.card h3{font-size:var(--t-lg);margin-bottom:var(--s-2)}
.card p{color:var(--ink-600);font-size:var(--t-base)}
.card p:last-child{margin-bottom:0}
.card-icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--brand-100);color:var(--brand-600);margin-bottom:var(--s-4);
}
.card-icon svg{width:22px;height:22px}
.card-icon.jade{background:var(--accent-100);color:var(--accent-600)}
.card-icon.amber{background:var(--amber-100);color:var(--amber-600)}
.card-icon.dark{background:var(--grad);color:#fff}
.card-link{display:block;color:inherit}
.card-link:hover{color:inherit}

.panel{background:var(--ink-50);border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:var(--s-8)}
.panel-brand{background:var(--brand-50);border-color:var(--brand-200)}
.panel-dark{background:linear-gradient(150deg,var(--navy-900),var(--navy-700));border-color:transparent;color:#C7D4EC}
.panel-dark h2,.panel-dark h3,.panel-dark h4{color:#fff}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4,.bg-dark h5{color:#fff}
.cta-band h2,.hero .btn-invert,.hero-spec .btn-invert{color:#fff}
.site-footer .logo{color:#fff}

.callout{border-left:3px solid var(--brand-500);background:var(--brand-50);padding:var(--s-5) var(--s-6);border-radius:0 var(--r-md) var(--r-md) 0;margin-block:var(--s-6)}
.callout p:last-child{margin-bottom:0}
.callout.jade{border-color:var(--accent-500);background:var(--accent-100)}
.callout.amber{border-color:var(--amber-600);background:var(--amber-100)}

/* ---------- 8. Chips, badges, pills ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-full);
  font-size:var(--t-xs);font-weight:600;background:var(--ink-100);color:var(--ink-700);
  border:1px solid var(--ink-200);letter-spacing:-.005em;
}
.chip-brand{background:var(--brand-100);color:var(--brand-700);border-color:var(--brand-200)}
.chip-jade{background:var(--accent-100);color:var(--accent-700);border-color:#B6EBDD}
.chip-amber{background:var(--amber-100);color:var(--amber-600);border-color:#FDE68A}
.chip-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22)}
.chip-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip-list{display:flex;flex-wrap:wrap;gap:var(--s-2)}

/* ---------- 9. Stats ---------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6)}
.stat{padding:var(--s-5) 0}
.stat-num{font-size:var(--t-3xl);font-weight:700;color:var(--head);letter-spacing:-.035em;line-height:1;margin-bottom:6px}
.stat-num.brand{color:var(--brand-600)}
.stat-label{font-size:var(--t-sm);color:var(--ink-500);line-height:1.4}
.stat-row.on-dark .stat-num{color:#fff}
.stat-row.on-dark .stat-label{color:var(--brand-200)}
.stat-bordered .stat{border-left:2px solid var(--ink-200);padding-left:var(--s-5)}
.stat-row.on-dark.stat-bordered .stat{border-color:rgba(255,255,255,.2)}

/* ---------- 10. Hero (light, editorial) ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;background:var(--white);
  padding-block:var(--s-24) var(--s-20);
  border-bottom:1px solid var(--ink-200);
}
/* Aurora — four soft colour fields drifting behind the headline, one per brand hue.
   Very low alpha so the type stays the loudest thing on the page. */
.hero::before{
  content:"";position:absolute;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(closest-side at 18% 28%, rgba(66,133,244,.20), transparent 70%),
    radial-gradient(closest-side at 80% 18%, rgba(52,168,83,.17), transparent 70%),
    radial-gradient(closest-side at 66% 82%, rgba(251,188,4,.16), transparent 70%),
    radial-gradient(closest-side at 26% 86%, rgba(234,67,53,.12), transparent 70%);
  animation:aurora 24s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(2%,-2%,0) scale(1.12) rotate(4deg)}
  100%{transform:translate3d(-3%,2%,0) scale(1.06) rotate(-3deg)}
}
/* Engineering grid, faded out at the edges */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(20,38,94,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,38,94,.055) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 25%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 25%,transparent 80%);
  animation:griddrift 30s linear infinite;
}
@keyframes griddrift{to{background-position:56px 56px}}

/* Headline words rise and settle, one after another */
.hw{display:inline-block;opacity:0;transform:translateY(28px);animation:hwIn .85s var(--ease) forwards}
.hw:nth-child(1){animation-delay:.05s} .hw:nth-child(2){animation-delay:.14s}
.hw:nth-child(3){animation-delay:.23s} .hw:nth-child(4){animation-delay:.32s}
.hw:nth-child(5){animation-delay:.41s} .hw:nth-child(6){animation-delay:.50s}
@keyframes hwIn{to{opacity:1;transform:none}}

/* Fade-and-rise for the supporting hero content */
.hero-rise{opacity:0;transform:translateY(20px);animation:hwIn .9s var(--ease) .5s forwards}
.hero-rise-2{animation-delay:.62s} .hero-rise-3{animation-delay:.74s}

/* Marker-pen highlight that draws itself under the key number */
.hl{position:relative;white-space:nowrap;z-index:0}
.hl::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:1px;height:.42em;z-index:-1;
  background:linear-gradient(90deg,rgba(251,188,4,.55),rgba(52,168,83,.38));
  border-radius:3px;transform:scaleX(0);transform-origin:0 50%;
  animation:hlIn .8s var(--ease) 1.15s forwards;
}
@keyframes hlIn{to{transform:scaleX(1)}}

/* Scroll cue */
.scroll-cue{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-400);opacity:0;animation:hwIn .8s var(--ease) 1.5s forwards;
}
.scroll-cue span{width:1px;height:26px;background:linear-gradient(var(--ink-300),transparent);
  animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(7px);opacity:1}}

/* Hero visual reacts to the pointer */
.pipe-wrap{position:relative}
.hero h1{color:var(--head);max-width:15ch;margin-bottom:var(--s-6)}
.hero .lede{color:var(--ink-600);font-size:1.1875rem;line-height:1.6;max-width:48ch}
.hero .eyebrow{color:var(--ink-500);font-weight:600}
.hero .eyebrow::before{background:var(--accent-500)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s-16);align-items:center}
.hero-cta{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-8)}
.hero-note{margin-top:var(--s-5);color:var(--ink-500);font-size:var(--t-sm)}
.hero-note strong{color:var(--ink-700);font-weight:600}

/* Sub-page hero: same surface, tighter */
.hero-sub{padding-block:var(--s-16) var(--s-12)}
.hero-sub h1{font-size:var(--t-4xl);max-width:20ch}
.hero-sub .lede{max-width:58ch}

/* Buttons + chips inherit dark-context class names, remapped for the light hero */
.hero .btn-invert,.hero-spec .btn-invert{background:var(--grad);background-size:150% 150%;color:#fff;box-shadow:var(--e-2);animation:gradslide 9s ease-in-out infinite}
.hero .btn-invert:hover,.hero-spec .btn-invert:hover{background:var(--grad-hover);background-size:150% 150%;color:#fff;transform:translateY(-1px);box-shadow:var(--e-3)}
.hero .btn-outline-light,.hero-spec .btn-outline-light{background:transparent;color:var(--ink-800);border-color:var(--ink-300)}
.hero .btn-outline-light:hover,.hero-spec .btn-outline-light:hover{background:var(--ink-50);color:var(--ink-900);border-color:var(--ink-400)}
.hero .chip-light{background:var(--ink-100);color:var(--ink-700);border-color:var(--ink-200)}
.hero .breadcrumb,.hero .breadcrumb a{color:var(--ink-500)}
.hero .breadcrumb a:hover{color:var(--brand-600)}

/* Trust strip under the hero copy */
.hero-trust{margin-top:var(--s-10);padding-top:var(--s-6);border-top:1px solid var(--ink-200)}
.hero-trust p{
  color:var(--ink-400);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;font-weight:680;margin-bottom:var(--s-4);
}

/* ---------- 10b. Animated pipeline (hero visual) ---------- */
.pipe-wrap{position:relative}
.pipe{width:100%;height:auto;overflow:visible}

/* Column captions */
.pipe-caps text{
  font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:.16em;
  fill:var(--ink-400);text-anchor:middle;
}

/* Connectors — dashes travel toward the output */
.pipe-line{
  fill:none;stroke:var(--ink-300);stroke-width:1.5;
  stroke-dasharray:4 7;stroke-linecap:round;
  animation:pipeflow 1.1s linear infinite;
}
@keyframes pipeflow{to{stroke-dashoffset:-11}}

/* Source nodes */
.pipe-node rect{fill:var(--white);stroke:var(--ink-200);stroke-width:1}
.pipe-node text{
  font-family:var(--font-sans);font-size:13px;font-weight:560;fill:var(--ink-800);
}
.pipe-node .pn-dot{animation:pndot 3.2s var(--ease) infinite}
@keyframes pndot{0%,100%{opacity:.55;r:4.5}18%{opacity:1;r:6.5}40%{opacity:.55;r:4.5}}
/* The four sources carry the four Google colors — one per modality */
.s-brand .pn-dot{fill:var(--g-blue)}
.s-jade  .pn-dot{fill:var(--g-green)}
.s-amber .pn-dot{fill:var(--g-yellow)}
.s-rose  .pn-dot{fill:var(--g-red)}
.pipe-dot{opacity:.95}
.pipe-dot.s-brand{fill:var(--g-blue)}
.pipe-dot.s-jade{fill:var(--g-green)}
.pipe-dot.s-amber{fill:var(--g-yellow)}
.pipe-dot.s-rose{fill:var(--g-red)}
.pipe-dot.s-out{fill:var(--g-green)}

/* Verify panel */
.pipe-panel{fill:var(--ink-50);stroke:var(--ink-200);stroke-width:1}
.pipe-scan{
  fill:var(--brand-500);opacity:.07;
  animation:pipescan 4.4s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes pipescan{
  0%{transform:translateY(0)}
  33%{transform:translateY(82px)}
  66%{transform:translateY(164px)}
  100%{transform:translateY(0)}
}
.pipe-gate rect{fill:var(--white);stroke:var(--ink-200);stroke-width:1}
.pipe-gate text{font-family:var(--font-sans);font-size:11.5px;font-weight:560;fill:var(--ink-700)}
.pipe-gate .pg-check{
  fill:none;stroke:var(--accent-600);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24;
  animation:pgcheck 4.4s var(--ease) infinite;
}
@keyframes pgcheck{
  0%{stroke-dashoffset:24}
  14%{stroke-dashoffset:0}
  82%{stroke-dashoffset:0;opacity:1}
  92%{stroke-dashoffset:0;opacity:0}
  93%{stroke-dashoffset:24;opacity:0}
  100%{stroke-dashoffset:24;opacity:1}
}

/* Output node */
.pipe-out rect{fill:url(#pipeGrad)}
/* Replaced the numeric counter that used to sit here. .po-num is kept in case a
   real, audited figure is ever available to put back. */
.pipe-out .po-num{
  font-family:var(--font-mono);font-size:23px;font-weight:600;fill:#fff;
  text-anchor:middle;letter-spacing:-.02em;
}
.pipe-out .po-check{stroke:#B7EFC8}
.pipe-out .po-lbl{
  font-family:var(--font-sans);font-size:8.5px;font-weight:700;letter-spacing:.14em;
  fill:#B7EFC8;text-anchor:middle;
}
.pipe-out .po-sub{
  font-family:var(--font-sans);font-size:9px;fill:#AEC6F5;text-anchor:middle;
}
.po-ring{
  fill:none;stroke:var(--accent-500);stroke-width:1.5;transform-origin:492px 210px;
  animation:poring 3s var(--ease) infinite;
}
.po-ring-2{animation-delay:1.5s}
@keyframes poring{
  0%{transform:scale(.72);opacity:.5}
  70%{transform:scale(1.12);opacity:0}
  100%{transform:scale(1.12);opacity:0}
}

.pipe-legend{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  margin-top:var(--s-5);font-size:var(--t-sm);color:var(--ink-500);flex-wrap:wrap;
}
.pl-item{display:inline-flex;align-items:center;gap:8px}
.pl-live{
  width:7px;height:7px;border-radius:50%;background:var(--accent-500);flex:none;
  box-shadow:0 0 0 0 rgba(6,168,134,.55);animation:pulse 2s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 9px rgba(6,168,134,0)}
  100%{box-shadow:0 0 0 0 rgba(6,168,134,0)}
}

/* ---------- 10c. Hero stat bar ---------- */
.hero-stats{border-bottom:1px solid var(--ink-200);background:var(--white)}
.hero-stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-8);padding-block:var(--s-10)}
.hs{display:grid;gap:4px}
.hs-num{font-size:var(--t-2xl);font-weight:640;color:var(--head);letter-spacing:-.035em;line-height:1}
.hs-label{font-size:var(--t-sm);color:var(--ink-500);line-height:1.4}

/* ---------- 11. Logo strip ---------- */
.logo-strip{border-block:1px solid var(--ink-200);background:var(--ink-50);padding-block:var(--s-8)}
.logo-strip p{text-align:center;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);font-weight:680;margin-bottom:var(--s-6)}
.logo-marks{display:flex;justify-content:center;align-items:center;gap:var(--s-12);flex-wrap:wrap;opacity:.6}
.logo-mark-text{font-weight:700;font-size:1.0625rem;color:var(--ink-600);letter-spacing:-.02em}

/* ---------- 12. Tables ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--ink-200);border-radius:var(--r-lg);background:#fff}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
thead th{
  text-align:left;font-weight:640;color:var(--head);background:var(--ink-50);
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--ink-200);white-space:nowrap;
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.07em;
}
tbody td{padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--ink-100);color:var(--ink-600);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--brand-50)}
tbody td:first-child{color:var(--ink-900);font-weight:580}
.td-yes{color:var(--accent-600);font-weight:700}
.td-no{color:var(--ink-300);font-weight:700}

/* ---------- 13. Accordion (FAQ) ---------- */
.acc{border-top:1px solid var(--ink-200)}
.acc-item{border-bottom:1px solid var(--ink-200)}
.acc-btn{
  width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-6);
  background:none;border:0;padding:var(--s-5) 0;cursor:pointer;font-family:inherit;
  font-size:var(--t-md);font-weight:600;color:var(--head);text-align:left;line-height:1.4;
}
.acc-btn:hover{color:var(--brand-600)}
.acc-sign{flex:none;width:22px;height:22px;position:relative;margin-top:3px}
.acc-sign::before,.acc-sign::after{content:"";position:absolute;background:var(--brand-600);border-radius:2px;transition:transform .22s var(--ease)}
.acc-sign::before{top:10px;left:2px;width:18px;height:2px}
.acc-sign::after{top:2px;left:10px;width:2px;height:18px}
.acc-btn[aria-expanded="true"] .acc-sign::after{transform:rotate(90deg)}
.acc-panel{display:none;padding-bottom:var(--s-5);color:var(--ink-600);max-width:78ch}
.acc-panel[data-open="true"]{display:block}
.acc-panel p:last-child{margin-bottom:0}

/* ---------- 14. Tabs ---------- */
.tabs{display:flex;gap:var(--s-1);border-bottom:1px solid var(--ink-200);margin-bottom:var(--s-8);overflow-x:auto}
.tab{
  background:none;border:0;border-bottom:2px solid transparent;padding:12px var(--s-5);
  font-family:inherit;font-size:var(--t-base);font-weight:600;color:var(--ink-500);
  cursor:pointer;white-space:nowrap;transition:all .15s var(--ease);margin-bottom:-1px;
}
.tab:hover{color:var(--ink-800)}
.tab[aria-selected="true"]{color:var(--brand-600);border-bottom-color:var(--brand-600)}
.tab-panel{display:none}
.tab-panel[data-open="true"]{display:block;animation:fadeUp .3s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 15. Steps / process ---------- */
.steps{counter-reset:step;display:grid;gap:var(--s-6)}
.step{position:relative;padding-left:var(--s-16);counter-increment:step}
.step::before{
  content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-600);color:#fff;font-weight:700;font-size:var(--t-sm);
  font-family:var(--font-mono);
}
.step::after{content:"";position:absolute;left:21px;top:52px;bottom:-24px;width:2px;background:var(--ink-200)}
.step:last-child::after{display:none}
.step h3{margin-bottom:var(--s-2)}
.step p{color:var(--ink-600);margin-bottom:0}
.step-meta{margin-top:var(--s-3);display:flex;gap:var(--s-2);flex-wrap:wrap}

/* ---------- 16. Feature list ---------- */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3)}
.checks li{position:relative;padding-left:30px;margin:0;color:var(--ink-600)}
.checks li::before{
  content:"";position:absolute;left:0;top:.45em;width:18px;height:18px;border-radius:50%;
  background:var(--accent-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304896F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.checks.on-dark li{color:var(--brand-200)}
.checks.g2{grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-6)}

/* ---------- 17. Pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);align-items:start}
.price-card{
  background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);
  padding:var(--s-8) var(--s-6);display:flex;flex-direction:column;height:100%;position:relative;
  transition:all .2s var(--ease);
}
.price-card:hover{box-shadow:var(--e-3)}
.price-card.featured{border:2px solid var(--brand-500);box-shadow:var(--e-3)}
.price-flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--brand-600);color:#fff;font-size:var(--t-xs);font-weight:680;
  padding:5px 14px;border-radius:var(--r-full);letter-spacing:.02em;white-space:nowrap;
}
.price-name{font-size:var(--t-lg);font-weight:660;color:var(--ink-900);margin-bottom:var(--s-2)}
.price-for{font-size:var(--t-sm);color:var(--ink-500);margin-bottom:var(--s-5);min-height:44px}
.price-amt{font-size:var(--t-3xl);font-weight:700;color:var(--ink-900);letter-spacing:-.035em;line-height:1}
.price-unit{font-size:var(--t-sm);color:var(--ink-500);margin:var(--s-2) 0 var(--s-6)}
.price-card .checks{margin-block:var(--s-6);flex:1}
.price-card .checks li{font-size:var(--t-sm)}

/* ---------- 18. Quote / testimonial ---------- */
.quote{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:var(--s-8)}
.quote blockquote{margin:0 0 var(--s-6);font-size:var(--t-lg);line-height:1.55;color:var(--ink-800);font-weight:520;letter-spacing:-.015em}
.quote blockquote::before{content:"\201C";font-size:3rem;line-height:0;vertical-align:-.35em;color:var(--brand-300);margin-right:4px}
.who{display:flex;align-items:center;gap:var(--s-3)}
.who-av{width:42px;height:42px;border-radius:50%;background:var(--brand-100);color:var(--brand-700);display:grid;place-items:center;font-weight:700;font-size:var(--t-sm);flex:none}
.who-name{font-weight:640;color:var(--ink-900);font-size:var(--t-sm);line-height:1.3}
.who-role{font-size:var(--t-xs);color:var(--ink-500)}

/* ---------- 19. Forms ---------- */
.form{display:grid;gap:var(--s-5)}
.field{display:grid;gap:6px}
.field label{font-size:var(--t-sm);font-weight:620;color:var(--ink-800)}
.field .hint{font-size:var(--t-xs);color:var(--ink-500)}
.req{color:var(--rose-600)}
input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{
  width:100%;font-family:inherit;font-size:var(--t-base);color:var(--ink-900);
  background:#fff;border:1px solid var(--ink-300);border-radius:var(--r-md);
  padding:11px 14px;transition:all .15s var(--ease);
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}
input::placeholder,textarea::placeholder{color:var(--ink-400)}
textarea{resize:vertical;min-height:110px;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.opt{
  display:flex;align-items:flex-start;gap:10px;border:1px solid var(--ink-300);
  border-radius:var(--r-md);padding:12px 14px;cursor:pointer;transition:all .15s var(--ease);background:#fff;
}
.opt:hover{border-color:var(--brand-400);background:var(--brand-50)}
.opt input{margin:2px 0 0;accent-color:var(--brand-600);width:16px;height:16px;flex:none}
.opt span{font-size:var(--t-sm);font-weight:560;color:var(--ink-800);line-height:1.4}
.opt:has(input:checked){border-color:var(--brand-500);background:var(--brand-50);box-shadow:0 0 0 1px var(--brand-500)}
.consent{display:flex;gap:10px;align-items:flex-start}
.consent input{margin-top:3px;accent-color:var(--brand-600);width:16px;height:16px;flex:none}
.consent label{font-size:var(--t-xs);color:var(--ink-500);line-height:1.55;font-weight:400}
.form-status{display:none;padding:var(--s-4) var(--s-5);border-radius:var(--r-md);font-size:var(--t-sm);font-weight:560}
.form-status[data-show="true"]{display:block}
.form-status.ok{background:var(--accent-100);color:var(--accent-700);border:1px solid #B6EBDD}

/* Progress bar for multi-step feel */
.form-progress{display:flex;gap:6px;margin-bottom:var(--s-2)}
.form-progress span{height:4px;flex:1;background:var(--ink-200);border-radius:2px}
.form-progress span.on{background:var(--brand-500)}

/* ---------- 20. CTA band ---------- */
.cta-band{
  background:
    radial-gradient(620px 340px at 84% 8%, rgba(52,168,83,.34), transparent 60%),
    radial-gradient(520px 300px at 12% 92%, rgba(251,188,4,.20), transparent 60%),
    linear-gradient(140deg,var(--navy-900),var(--navy-700));
  color:#fff;border-radius:var(--r-xl);padding:var(--s-16) var(--s-12);text-align:center;
}
.cta-band h2{color:#fff;max-width:22ch;margin-inline:auto}
.cta-band p{color:#C9DCF6;max-width:60ch;margin-inline:auto;font-size:var(--t-lg)}
.cta-band .flex{justify-content:center;margin-top:var(--s-8)}
.cta-band .tiny{color:#8FAACE;margin-top:var(--s-5)}

/* ---------- 21. Footer ---------- */
.site-footer{background:linear-gradient(170deg,var(--navy-900),var(--navy-800));color:#93A6C8;padding-block:var(--s-20) var(--s-8);margin-top:var(--s-24);position:relative}
.site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--g-blue) 0 25%,var(--g-red) 25% 50%,var(--g-yellow) 50% 75%,var(--g-green) 75% 100%)}
.footer-top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--s-10);padding-bottom:var(--s-12);border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand .logo{color:#fff;margin-bottom:var(--s-4)}
.footer-brand p{font-size:var(--t-sm);color:#93A6C8;max-width:36ch}
.footer-col .f-head{color:#fff;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s-4);font-weight:680}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:10px}
.footer-col a{color:#93A6C8;font-size:var(--t-sm)}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s-6);padding-top:var(--s-6);flex-wrap:wrap;font-size:var(--t-xs);color:#7E92B6}
.footer-legal{display:flex;gap:var(--s-5);flex-wrap:wrap}
.footer-legal a{color:#7E92B6}
.footer-legal a:hover{color:#fff}
.footer-badges{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-5)}
.footer-badge{border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);padding:5px 10px;font-size:10px;font-weight:680;letter-spacing:.06em;color:var(--ink-300);text-transform:uppercase}

/* ---------- 22. Sticky mobile CTA (CRO) ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-top:1px solid var(--ink-200);padding:10px var(--s-4);
  display:none;gap:var(--s-3);box-shadow:0 -4px 20px rgba(11,18,32,.08);
}
.sticky-cta .btn{flex:1}

/* ---------- 23. Misc ---------- */
.breadcrumb{font-size:var(--t-xs);color:var(--ink-400);margin-bottom:var(--s-5);display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:var(--ink-400)}
.breadcrumb a:hover{color:var(--brand-600)}
.bg-alt{background:var(--ink-50)}
.bg-brand{background:var(--brand-50)}
.bg-dark{background:linear-gradient(160deg,var(--navy-900),var(--navy-700));color:#C7D4EC}
.bg-dark h2,.bg-dark h3,.bg-dark h4{color:#fff}
.bg-dark .lede{color:#AEBEDA}
.bg-dark .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.bg-dark .card p{color:#AEBEDA}
.divider-top{border-top:1px solid var(--ink-200)}
/* ---------- 23b. Motion system ---------- */

/* Scroll-linked reading-progress bar */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;z-index:150;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand-500),var(--accent-500));
  will-change:transform;pointer-events:none;
}

/* Cursor-following ambient glow (desktop, fine pointers only) */
.cursor-glow{
  position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;
  margin:-260px 0 0 -260px;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(26,107,230,.09),transparent 62%);
  transition:opacity .4s var(--ease);will-change:transform;
}
body.has-glow .cursor-glow{opacity:1}
.site-header,main,.site-footer{position:relative;z-index:1}

/* Scroll reveal — richer, directional */
.reveal{opacity:0;transform:translateY(26px);will-change:opacity,transform}
.reveal.in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.reveal-l{opacity:0;transform:translateX(-32px)}
.reveal-l.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-scale{opacity:0;transform:scale(.955)}
.reveal-scale.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* Parallax removed — scroll-driven transforms caused overlap. */

/* Magnetic buttons — JS nudges the inner span toward the cursor */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 60%);
  transition:opacity .3s var(--ease);
}
.btn:hover::after{opacity:1}
.btn-secondary::after,.btn-outline-light::after{
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(26,107,230,.14),transparent 60%);
}

/* Card tilt + spotlight */
.card-hover{transform-style:preserve-3d;will-change:transform}
.card-hover::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(26,107,230,.08),transparent 62%);
  transition:opacity .35s var(--ease);
}
.card{position:relative}
.card-hover:hover::before{opacity:1}

/* Animated gradient on dark bands */
.cta-band{background-size:180% 180%;animation:bandshift 14s ease-in-out infinite}
@keyframes bandshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Sticky pinning removed — it overlapped neighbouring content mid-scroll. */
.pin-head{align-self:start}

/* Text scramble target keeps width stable while cycling */
[data-scramble]{display:inline-block;min-width:5ch}

/* Header shrink on scroll */
.site-header{transition:box-shadow .3s var(--ease),background .3s var(--ease)}
body.scrolled .site-header{box-shadow:var(--e-2);background:rgba(255,255,255,.94)}

/* Nav underline sweep */
.nav-link{position:relative}
.nav-link::after{
  content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;
  background:var(--brand-600);border-radius:2px;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .32s var(--ease);
}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1)}

/* Stat / counter rise */
.stat-num,.hs-num{transition:transform .4s var(--ease)}

@media (hover:none){.cursor-glow{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal,.reveal-l,.reveal-scale{opacity:1!important;transform:none!important}
  .cursor-glow,.scroll-progress{display:none}
  .pipe-line,.pipe-scan,.pn-dot,.po-ring,.pl-live{animation:none!important}
  .pipe-dot{display:none}
  .pipe-gate .pg-check{stroke-dashoffset:0!important;animation:none!important}
}

/* ---------- 24. Responsive ---------- */
@media (max-width:1080px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav{justify-content:space-between}
  .nav-cta .btn-secondary{display:none}
  .g-5-7,.g-7-5,.hero-grid{grid-template-columns:1fr;gap:var(--s-10)}
  .footer-top{grid-template-columns:1fr 1fr 1fr;gap:var(--s-8)}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:860px){
  .g3,.g4,.price-grid,.stat-row{grid-template-columns:1fr 1fr}
  .hero-stats .wrap{grid-template-columns:1fr 1fr;gap:var(--s-6)}
  .section{padding-block:var(--s-16)}
  .hero{padding-block:var(--s-16)}
  .checks.g2{grid-template-columns:1fr}
  .hero h1{max-width:18ch}
}
@media (max-width:640px){
  .wrap{padding-inline:var(--s-5)}
  :root{--t-lg:1.125rem}
  .g2,.g3,.g4,.price-grid,.stat-row,.field-row,.opt-grid,.footer-top{grid-template-columns:1fr}
  .lw{padding:var(--s-5) var(--s-2)}
  .lw-native{font-size:1.25rem}
  .hero .lede{font-size:var(--t-base)}
  .cta-band{padding:var(--s-10) var(--s-5);border-radius:var(--r-lg)}
  .panel{padding:var(--s-5)}
  .sticky-cta{display:flex}
  body{padding-bottom:64px}
  .btn{width:100%}
  .hero-cta .btn,.flex .btn{width:100%}
  .sticky-cta .btn{width:auto}
  .step{padding-left:var(--s-12)}
  .step::before{width:34px;height:34px;font-size:var(--t-xs)}
  .step::after{left:16px;top:42px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}
@media print{
  .site-header,.site-footer,.sticky-cta,.announce{display:none}
  body{color:#000}
}


/* ---------- 25. Live activity ticker ---------- */
/* A rotating log of collection sessions. Reads as a system that is actually running. */
.ticker{
  border:1px solid var(--ink-200);border-radius:var(--r-lg);background:var(--white);
  overflow:hidden;box-shadow:var(--e-1);
}
.ticker-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:14px var(--s-5);border-bottom:1px solid var(--ink-200);background:var(--ink-50);
}
.ticker-title{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-500);display:flex;align-items:center;gap:9px;
}
.ticker-body{position:relative;height:216px;overflow:hidden}
.ticker-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-4);align-items:center;
  padding:13px var(--s-5);border-bottom:1px solid var(--ink-100);font-size:var(--t-sm);
  animation:tickIn .5s var(--ease) both;
}
@keyframes tickIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.tk-lang{font-weight:620;color:var(--head);white-space:nowrap}
.tk-meta{color:var(--ink-500);font-size:var(--t-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-state{
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-full);white-space:nowrap;
}
.tk-pass{background:var(--accent-50);color:var(--accent-700)}
.tk-qa{background:var(--brand-50);color:var(--brand-700)}
.tk-rec{background:var(--amber-50);color:var(--amber-600)}

/* ---------- 26. Collection network (abstract, no map) ---------- */
.netviz{width:100%;height:auto;overflow:visible}
.nv-hub circle{fill:url(#nvGrad)}
.nv-hub text{font-family:var(--font-sans);font-size:11px;font-weight:700;fill:#fff;text-anchor:middle}
.nv-node circle{fill:var(--white);stroke:var(--ink-300);stroke-width:1.5;transition:all .3s var(--ease)}
.nv-node text{font-family:var(--font-sans);font-size:11.5px;font-weight:600;fill:var(--head);text-anchor:middle}
.nv-node .nv-sub{font-size:9px;font-weight:500;fill:var(--ink-500)}
.nv-node:hover circle{stroke:var(--brand-500);stroke-width:2.5}
.nv-link{fill:none;stroke:var(--ink-300);stroke-width:1.2;stroke-dasharray:3 5;animation:nvflow 1.6s linear infinite}
@keyframes nvflow{to{stroke-dashoffset:-8}}
.nv-pulse{fill:var(--g-blue);opacity:0}
.nv-ring{fill:none;stroke:var(--brand-400);stroke-width:1.5;transform-origin:center;animation:nvring 3.4s var(--ease) infinite}
@keyframes nvring{0%{r:26;opacity:.55}70%{r:46;opacity:0}100%{r:46;opacity:0}}

/* ---------- 27. Waveform bars ---------- */
.wavebars{display:flex;align-items:center;gap:3px;height:44px}
.wavebars i{
  display:block;width:4px;border-radius:2px;background:var(--brand-500);
  animation:wave 1.1s ease-in-out infinite;transform-origin:center;
}
@keyframes wave{0%,100%{height:22%}50%{height:100%}}

/* ---------- 28. Gradient text accent ---------- */
.grad-text{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

@media (prefers-reduced-motion:reduce){
  .nv-link,.nv-ring,.wavebars i,.ticker-row,.btn-primary,.hero .btn-invert,.hero-spec .btn-invert{animation:none!important}
  .hero::before,.hero::after,.scroll-cue span{animation:none!important}
  .hw,.hero-rise{opacity:1!important;transform:none!important;animation:none!important}
  .hl::after{transform:scaleX(1)!important;animation:none!important}
  .wavebars i{height:60%!important}
}
@media (max-width:640px){
  .ticker-body{height:180px}
  .ticker-row{grid-template-columns:1fr auto;padding:11px var(--s-4)}
  .tk-meta{display:none}
}


/* ==========================================================================
   29. SPECIMEN HERO  (homepage only)
   The hero is laid out as a dataset datasheet — the artefact this company
   actually ships with every corpus. Registration marks, a measured rule,
   a record header and a field grid. Deliberately not a split hero with a
   gradient blob; that layout is the default of every AI startup on earth.
   ========================================================================== */
.hero-spec{
  position:relative;background:var(--white);overflow:hidden;
  padding-block:var(--s-10) 0;border-bottom:1px solid var(--ink-200);
}
/* faint measured grid, like graph paper */
.hero-spec::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:
    linear-gradient(rgba(20,38,94,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,38,94,.05) 1px,transparent 1px);
  background-size:100% 34px,34px 100%;
  mask-image:linear-gradient(180deg,#000,transparent 88%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 88%);
}
.hero-spec>.wrap{position:relative;z-index:2}
.spec-watermark{z-index:0}

/* Registration / crop marks at the corners */
.regmark{position:absolute;width:18px;height:18px;pointer-events:none;z-index:2;opacity:.55}
.regmark::before,.regmark::after{content:"";position:absolute;background:var(--brand-500)}
.regmark::before{width:100%;height:1.5px;top:0} .regmark::after{width:1.5px;height:100%;left:0}
.rm-tl{top:14px;left:14px}
.rm-tr{top:14px;right:14px;transform:scaleX(-1)}
.rm-bl{bottom:14px;left:14px;transform:scaleY(-1)}
.rm-br{bottom:14px;right:14px;transform:scale(-1)}

/* Record header bar */
.spec-bar{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);
  flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-400);
  padding-bottom:14px;border-bottom:1.5px solid var(--head);
}
.spec-bar b{color:var(--head);font-weight:600}
.spec-bar .pl-live{width:6px;height:6px}
.spec-bar span{display:inline-flex;align-items:center;gap:8px}

/* Headline block */
.spec-head{padding-block:var(--s-12) var(--s-8);display:grid;grid-template-columns:auto 1fr;gap:var(--s-8)}
.spec-no{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--brand-600);
  writing-mode:vertical-rl;transform:rotate(180deg);align-self:start;
  padding-top:6px;border-left:2px solid var(--brand-500);padding-left:10px;font-weight:600;
}
.hero-spec h1{max-width:17ch;margin:0}
.hero-spec .lede{max-width:56ch;margin-top:var(--s-6)}
.hero-spec .hero-cta{margin-top:var(--s-8)}
.hero-spec .hero-note{margin-top:var(--s-5);color:var(--ink-500);font-size:var(--t-sm)}

/* Field grid — the datasheet itself */
.spec-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1.5px solid var(--head);margin-top:var(--s-10);
}
.spec-cell{
  padding:var(--s-6) var(--s-5) var(--s-8) 0;border-right:1px solid var(--ink-200);
  padding-right:var(--s-5);position:relative;
  opacity:0;transform:translateY(14px);animation:hwIn .7s var(--ease) forwards;
}
.spec-cell:nth-child(1){animation-delay:.55s} .spec-cell:nth-child(2){animation-delay:.65s}
.spec-cell:nth-child(3){animation-delay:.75s} .spec-cell:nth-child(4){animation-delay:.85s}
.spec-cell:nth-child(5){animation-delay:.95s;border-right:0}
.spec-cell::before{
  content:"";position:absolute;top:-1.5px;left:0;width:0;height:3px;background:var(--grad);
  animation:cellrule .9s var(--ease) forwards;animation-delay:inherit;
}
@keyframes cellrule{to{width:38px}}
.spec-k{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-400);display:block;margin-bottom:10px;
}
.spec-v{font-size:var(--t-base);font-weight:600;color:var(--head);line-height:1.35;display:block}
.spec-v em{font-style:normal;font-family:var(--font-mono);font-size:1.35em;letter-spacing:-.02em}
.spec-note{font-size:var(--t-xs);color:var(--ink-500);margin-top:6px;display:block;line-height:1.45}

/* Left ruler with ticks */
.spec-ruler{
  position:absolute;left:0;top:0;bottom:0;width:22px;z-index:2;pointer-events:none;
  background-image:repeating-linear-gradient(180deg,var(--ink-300) 0 1px,transparent 1px 26px);
  opacity:.5;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 78%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 78%,transparent);
}

@media (max-width:1080px){
  .spec-grid{grid-template-columns:repeat(3,1fr)}
  .spec-cell:nth-child(3){border-right:0}
  .spec-ruler{display:none}
}
@media (max-width:720px){
  .spec-head{grid-template-columns:1fr}
  .spec-no{writing-mode:horizontal-tb;transform:none;border-left:0;border-top:2px solid var(--brand-500);
    padding:8px 0 0;margin-bottom:-8px}
  .spec-grid{grid-template-columns:1fr 1fr}
  .spec-cell:nth-child(2n){border-right:0}
  .spec-bar{font-size:10px;letter-spacing:.08em}
  .regmark{display:none}
}
@media (prefers-reduced-motion:reduce){
  .spec-cell{opacity:1!important;transform:none!important;animation:none!important}
  .spec-cell::before{width:38px!important;animation:none!important}
}


/* ==========================================================================
   30. SPECIMEN HERO — amplified
   ========================================================================== */
.hero-spec{padding-block:var(--s-8) 0}

/* Bigger, more confident headline */
.hero-spec h1{
  font-size:clamp(3rem, .6rem + 8vw, 6.5rem);
  letter-spacing:-.05em;line-height:.92;max-width:15ch;
}

/* The accent gradient flows through the last word instead of sitting still */
.grad-text{background-size:230% 100%;animation:gradflow 8s ease-in-out infinite}
@keyframes gradflow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Light sweep across the headline on load, and again on hover */
/* The headline sweep was removed: it needed overflow:hidden on the h1,
   which clipped descenders at some sizes. */

/* Oversized outlined numeral sitting behind everything */
.spec-watermark{
  position:absolute;right:-2%;top:8%;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--font-mono);font-weight:600;line-height:.8;
  font-size:clamp(7rem,18vw,17rem);letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px rgba(20,38,94,.07);
  opacity:0;animation:wmIn 1.6s var(--ease) .35s forwards;
}
.spec-watermark small{font-size:.42em;-webkit-text-stroke-width:1.5px}
@keyframes wmIn{from{opacity:0;transform:translateX(40px) scale(.96)}to{opacity:1;transform:none}}

/* Warm glow behind the headline, tinted by the page accent */
.spec-head::before{
  content:"";position:absolute;left:-8%;top:-10%;width:70%;height:130%;z-index:-1;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(66,133,244,.13),transparent 72%);
  animation:aurora 20s ease-in-out infinite alternate;
}
.spec-head{position:relative}

/* Field cells respond to the pointer */
.spec-cell{transition:background .3s var(--ease)}
.spec-cell:hover{background:var(--brand-50)}
.spec-cell:hover::before{width:100%;transition:width .45s var(--ease)}
.spec-cell:hover .spec-k{color:var(--brand-700)}
.spec-k{transition:color .3s var(--ease)}

/* scan sweep removed — it required overflow:hidden on the grid */

/* ---------- 31. Site-wide lift ---------- */
/* Eyebrow rule picks up the accent gradient */
.eyebrow::before{background:var(--grad);height:3px;border-radius:2px;width:24px}

/* Cards get an accent edge on hover instead of a flat border colour */
.card-hover{position:relative;overflow:hidden}
.card-hover::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease);
}
.card-hover:hover::after{transform:scaleX(1)}

/* Section headings get a short gradient underline */
.section-head h2::after{
  content:"";display:block;width:52px;height:3px;border-radius:2px;
  background:var(--grad);margin-top:var(--s-5);
}
.section-head.center h2::after{margin-inline:auto}
.cta-band h2::after,.hero-spec h1::after{display:none}

/* Tables lift on hover */
.table-scroll{transition:box-shadow .3s var(--ease)}
.table-scroll:hover{box-shadow:var(--e-2)}

@media (max-width:720px){
  .spec-watermark{font-size:38vw;top:auto;bottom:6%;right:-6%;opacity:.6}
  .hero-spec h1{font-size:clamp(2.5rem,7vw+1rem,3.4rem);max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .spec-watermark{opacity:1!important;transform:none!important;animation:none!important}
  .spec-head h1::after,.spec-grid::after,.grad-text,.spec-head::before{animation:none!important}
  .spec-head h1::after,.spec-grid::after{display:none}
}


/* ==========================================================================
   32. SECTION SKINS
   Six alternating treatments so no two consecutive sections read the same.
   Applied alongside .section — e.g. <section class="section sec-dots">.
   ========================================================================== */

/* (a) Tinted — page accent at its lightest, with a hairline top rule */
.sec-tint{background:var(--brand-50);border-top:1px solid var(--brand-100);border-bottom:1px solid var(--brand-100)}

/* (b) Dotted field — quiet texture, keeps white surfaces feeling airy */
.sec-dots{
  background-color:var(--white);
  background-image:radial-gradient(rgba(20,38,94,.10) 1px,transparent 1px);
  background-size:22px 22px;
}
.sec-dots .card,.sec-dots .ticker,.sec-dots .panel{backdrop-filter:blur(2px)}

/* (c) Ruled columns — vertical rules like a ledger */
.sec-rules{
  background:var(--white);
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(100% / 6 - 1px),var(--ink-100) calc(100% / 6 - 1px) calc(100% / 6));
}

/* (d) Diagonal — angled top and bottom edges, breaks the stack of rectangles */
/* Flat navy band. The earlier clip-path version overlapped neighbouring
   sections at some viewport widths, so the angled edges are gone. */
.sec-diagonal{
  position:relative;background:linear-gradient(160deg,var(--navy-900),var(--navy-700));
  color:#C7D4EC;
}
.sec-diagonal h2,.sec-diagonal h3,.sec-diagonal h4{color:#fff}
.sec-diagonal .lede{color:#AEBEDA}
.sec-diagonal .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.sec-diagonal .card p{color:#AEBEDA}
.sec-diagonal .eyebrow{color:var(--brand-300)}
.sec-diagonal .chip{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}

/* (e) Editorial — narrow measure, oversized opening line, hanging side note */
.sec-editorial{background:var(--white)}
.sec-editorial .wrap{max-width:940px}
.ed-lead{
  font-size:clamp(1.35rem,.9rem+1.5vw,1.95rem);line-height:1.35;color:var(--head);
  font-weight:500;letter-spacing:-.025em;max-width:24ch;margin-bottom:var(--s-8);
}
.ed-body{display:grid;grid-template-columns:1fr 220px;gap:var(--s-12);align-items:start}
.ed-note{
  border-left:3px solid var(--brand-500);padding-left:var(--s-4);
  font-size:var(--t-sm);color:var(--ink-600);
}
.ed-note b{display:block;color:var(--head);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:8px;font-family:var(--font-mono)}

/* (f) Colour band — full-bleed accent, white type, no cards */
.sec-band{
  background:var(--grad);background-size:180% 180%;
  animation:gradslide 16s ease-in-out infinite;color:rgba(255,255,255,.9);
}
.sec-band h2,.sec-band h3,.sec-band h4,.sec-band strong{color:#fff}
.sec-band .lede{color:rgba(255,255,255,.88)}
.sec-band .eyebrow{color:rgba(255,255,255,.75)}
.sec-band .eyebrow::before{background:rgba(255,255,255,.6)}
.sec-band .section-head h2::after{background:rgba(255,255,255,.5)}
.sec-band .checks li{color:rgba(255,255,255,.9)}
.sec-band .checks li::before{
  background:rgba(255,255,255,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.sec-band .callout{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:#fff}
.sec-band .callout strong{color:#fff}
.sec-band .card{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.sec-band .card p,.sec-band .card .tiny{color:rgba(255,255,255,.85)}

/* (g) Oversized step numerals for numbered sections */
.sec-numbered .step::before{
  width:56px;height:56px;font-size:var(--t-base);background:var(--grad);
}
.sec-numbered .step{padding-left:var(--s-20)}
.sec-numbered .step::after{left:27px;top:64px}

@media (max-width:860px){
  .ed-body{grid-template-columns:1fr}
  .ed-note{position:static}
  .sec-rules{background-image:none}
}
@media (prefers-reduced-motion:reduce){.sec-band{animation:none}}


/* ==========================================================================
   33. CENTRED SPECIMEN HERO
   The headline block is centred; the datasheet field row below stays full
   width, so the page still reads as a specimen sheet rather than a poster.
   ========================================================================== */
.spec-head{
  grid-template-columns:1fr;text-align:center;justify-items:center;
  padding-block:var(--s-16) var(--s-10);
}
.hero-spec h1{max-width:20ch;margin-inline:auto}
.hero-spec .lede{max-width:64ch;margin-inline:auto}
.hero-spec .hero-cta{justify-content:center}
.hero-spec .hero-note{text-align:center}
.spec-head>div{display:flex;flex-direction:column;align-items:center}

/* The record number becomes a centred cap above the headline */
.spec-no{
  writing-mode:horizontal-tb;transform:none;border-left:0;padding-left:0;
  border-top:0;display:inline-flex;align-items:center;gap:10px;
  padding:6px 16px;border:1px solid var(--brand-200);border-radius:var(--r-full);
  background:var(--brand-50);color:var(--brand-700);margin-bottom:var(--s-6);
  font-size:10px;letter-spacing:.16em;
}
.spec-no::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--g-green);
  box-shadow:0 0 0 0 rgba(52,168,83,.5);animation:pulse 2s infinite;
}

/* Glow and watermark recentre with the text */
.spec-head::before{left:15%;width:70%}
.spec-watermark{
  left:50%;right:auto;top:12%;transform:translateX(-50%);
  text-align:center;width:max-content;
}
@keyframes wmIn{from{opacity:0;transform:translateX(-50%) scale(.94)}
                to{opacity:1;transform:translateX(-50%) scale(1)}}

/* Field grid gets a heading now that it sits under a centred block */
.spec-grid{margin-top:var(--s-12)}
.spec-cell{text-align:left}

@media (max-width:720px){
  .spec-watermark{top:auto;bottom:4%;font-size:34vw}
  .spec-head{padding-block:var(--s-10) var(--s-8)}
}
@media (prefers-reduced-motion:reduce){
  .spec-watermark{transform:translateX(-50%)!important}
  .spec-no::before{animation:none}
}


/* Headline is longer now ("You need Asian data for AI model training"),
   so give it more measure and slightly tighter leading at large sizes. */
.hero-spec h1{max-width:24ch;line-height:.96}
@media (max-width:720px){.hero-spec h1{max-width:100%;line-height:1.04}}


/* ==========================================================================
   34. BLOG
   ========================================================================== */
.post-meta{font-size:var(--t-sm);color:var(--ink-500);margin-top:var(--s-6)}
.post-meta strong{color:var(--head)}

/* Key takeaways — written to be lifted verbatim by answer engines, so it sits
   above the fold of the article body and is marked up as its own block. */
.takeaways{
  background:var(--brand-50);border:1px solid var(--brand-100);
  border-left:4px solid var(--brand-600);border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:var(--s-6) var(--s-8);margin-bottom:var(--s-8);
}
.takeaways-k{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-700);margin-bottom:var(--s-4);font-weight:700;
}
.takeaways ul{margin:0;padding-left:1.1em}
.takeaways li{color:var(--ink-700);margin-bottom:10px}
.takeaways li::marker{color:var(--brand-500)}

/* Table of contents */
.toc{border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:var(--s-5) var(--s-6);
  margin-bottom:var(--s-10);background:var(--ink-50)}
.toc-k{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500);
  font-weight:700;margin-bottom:var(--s-3)}
.toc ol{margin:0;padding-left:1.2em}
.toc li{margin-bottom:6px;font-size:var(--t-sm)}

/* Article prose */
.prose h2{font-size:var(--t-2xl);margin-top:var(--s-12);margin-bottom:var(--s-4);scroll-margin-top:90px}
.prose p{margin-bottom:var(--s-5);line-height:1.75}
.prose strong{color:var(--head)}
.prose em{color:var(--ink-700)}

/* Mid-article promotion */
.promo{
  background:var(--grad);background-size:180% 180%;animation:gradslide 16s ease-in-out infinite;
  border-radius:var(--r-lg);padding:var(--s-6) var(--s-8);margin:var(--s-10) 0;color:#fff;
}
.promo-k{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.75);margin-bottom:10px;font-weight:700}
.promo-t{font-size:var(--t-lg);font-weight:640;color:#fff;margin-bottom:8px;letter-spacing:-.02em}
.promo-d{color:rgba(255,255,255,.9);margin-bottom:var(--s-5);font-size:var(--t-base)}
.promo .btn-primary{background:#fff;color:var(--brand-700);animation:none}
.promo .btn-primary:hover{background:var(--brand-50);color:var(--brand-800)}

/* Related-pages block */
.post-links{border-top:1px solid var(--ink-200);margin-top:var(--s-12);padding-top:var(--s-6)}
.post-links-k{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-500);font-weight:700;margin-bottom:var(--s-3)}
.post-links ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.post-links li{margin:0}
.post-links a{font-weight:560}

@media (prefers-reduced-motion:reduce){.promo{animation:none}}

/* ---------- Readability pass ----------
   Long lines are the main reason body copy feels like work: past roughly 75
   characters the eye loses the start of the next line. Constraining the measure
   is the single highest-impact readability change on a text-heavy site. */
.prose p,.prose li{max-width:72ch}
.prose h2{margin-top:var(--s-9)}
.prose h3{margin-top:var(--s-7)}
.prose p{margin-bottom:var(--s-6)}
.prose li{margin-bottom:var(--s-3);line-height:1.7}
.card p,.card li{line-height:1.65}
/* Small print is still small print, but it should never be unreadable. */
.tiny,.small,.stat-label,.mega-desc,.hero-note{-webkit-font-smoothing:antialiased}
@media (max-width:640px){
  /* Slightly tighter headline sizing on phones, where the clamp maxima overshoot. */
  .prose p,.prose li{max-width:none}
}

/* v2 additions */
.form-error a{color:var(--brand-700);text-decoration:underline}
.hero-sub .breadcrumb a{color:inherit}