/* ---- 01-base.css ---- */
/* ==========================================================
   WOOHL — design system · base
   Headless WooCommerce, fully managed.
   ========================================================== */

/* ---------- Fonts (self-hosted, latin, variable) ---------- */
@font-face{font-family:"Geist";src:url("../fonts/geist-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/geist-mono-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Plus Jakarta Sans — titles. SIL Open Font License 1.1. Variable 200–800. */
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/plus-jakarta-sans-latin-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Ink (text + dark surfaces) */
  --ink-950:#0B0816;
  --ink-900:#15101F;
  --ink-800:#241D35;
  --ink-700:#3B3452;
  --ink-600:#524A6A;
  --ink-500:#6B6483;
  --ink-400:#8E88A3;
  --ink-300:#B4AFC4;
  --ink-200:#D8D4E3;
  --ink-100:#ECE9F3;

  /* Surfaces */
  --paper:#FBFAFD;
  --paper-2:#F5F2FA;
  --paper-3:#EEE9F7;
  --line:#E8E4F0;
  --line-2:#DCD6E8;

  /* Brand violet — --v-600 is the primary (AA with white text) */
  --v-900:#2E1570;
  --v-800:#3F1E97;
  --v-700:#5226C2;
  --v-600:#6536DA;
  --v-500:#7C52E6;
  --v-400:#9C7BEE;
  --v-300:#BCA5F4;
  --v-200:#DACCFA;
  --v-100:#EDE6FD;
  --v-50:#F7F3FF;
  /* Channel triplets for translucent brand tints (glows, rings, washes).
     Theme options regenerates the whole ramp + these from one accent. */
  --v9-rgb:46 21 112;
  --v6-rgb:101 54 218;
  --v5-rgb:124 82 230;
  --v4-rgb:156 123 238;
  --v1-rgb:237 230 253;

  /* Lighthouse score semantics — used ONLY for scores/metrics */
  --good:#0CCE6B; --good-ink:#08804A; --good-bg:#E7FAF0;
  --avg:#FFA400;  --avg-ink:#A45E00;  --avg-bg:#FFF4E0;
  --poor:#FF4E42; --poor-ink:#C2261B; --poor-bg:#FFECEA;

  /* Type */
  --font-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Plus Jakarta Sans","Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Highlighted words in titles: a gradient across the brand violet ramp, so
     it follows Theme options -> Accent colour. Light sections run 500 -> 800
     (every stop >= 3:1 on white); dark sections run the paler 300 -> 500. */
  --hl-from:var(--v-500);
  --hl-to:var(--v-800);
  --hl-from-dark:var(--v-300);
  --hl-to-dark:var(--v-500);
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-xs:.8125rem;
  --fs-sm:.9375rem;
  --fs-base:1.0625rem;
  --fs-md:1.1875rem;
  --fs-lg:clamp(1.125rem,1.02rem + .45vw,1.375rem);
  --fs-h3:clamp(1.2rem,1.08rem + .45vw,1.45rem);
  --fs-h2:clamp(2rem,1.3rem + 2.7vw,3.35rem);
  --fs-h1:clamp(2.7rem,1.5rem + 4.9vw,5.6rem);

  /* Space */
  --container:1400px;
  --gutter:clamp(1rem,.55rem + 2vw,2rem);
  --section:clamp(3.5rem,2.4rem + 3.8vw,5.75rem);
  --header-h:72px;

  /* Radius */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* Elevation */
  --sh-1:0 1px 2px rgba(24,12,56,.06),0 1px 1px rgba(24,12,56,.03);
  --sh-2:0 1px 2px rgba(24,12,56,.05),0 10px 28px -12px rgb(var(--v9-rgb) / .16);
  --sh-3:0 2px 6px rgba(24,12,56,.05),0 28px 64px -24px rgba(52,20,140,.30);
  --sh-glow:0 0 0 1px rgb(var(--v5-rgb) / .16),0 24px 60px -24px rgb(var(--v6-rgb) / .55);

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
body{margin:0;min-height:100vh;font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.65;color:var(--ink-600);background:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--ink-900);font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
p,figure,blockquote,dl,dd{margin:0}
p{text-wrap:pretty}
ul,ol{margin:0;padding:0}
ul[role="list"],ol[role="list"]{list-style:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--line);margin:0}
code,kbd,pre,samp{font-family:var(--font-mono)}
summary{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--v-500);outline-offset:3px;border-radius:6px}
::selection{background:var(--v-200);color:var(--ink-900)}

/* ---------- Typography helpers ---------- */
.h1,.h2,.h3{font-family:var(--font-display)}
.h1{font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.035em}
.h2{font-size:var(--fs-h2);line-height:1.07;letter-spacing:-.03em}
.h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.02em}
/* Highlighted words in titles: same family, one weight lighter, gradient fill.
   Padding + equal negative margin enlarges the gradient's paint box (descenders,
   last glyph) without moving anything. */
h1 em,h2 em,.h1 em,.h2 em,.hl{font-family:inherit;font-style:normal;font-weight:500;padding:.06em .06em .18em 0;margin:-.06em -.06em -.18em 0;background-image:linear-gradient(90deg,var(--hl-a,var(--hl-from)),var(--hl-b,var(--hl-to)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
h1 em::selection,h2 em::selection,.h1 em::selection,.h2 em::selection,.hl::selection{-webkit-text-fill-color:var(--ink-900)}
@media (forced-colors:active){h1 em,h2 em,.h1 em,.h2 em,.hl{background:none;-webkit-text-fill-color:currentColor}}
.lead{font-size:var(--fs-lg);line-height:1.55;color:var(--ink-500);max-width:62ch}
.muted{color:var(--ink-500)}
.mono{font-family:var(--font-mono);letter-spacing:-.01em}
.tnum{font-variant-numeric:tabular-nums}
.small{font-size:var(--fs-xs)}
.strong{color:var(--ink-900);font-weight:600}
.text-center{text-align:center}
.nowrap{white-space:nowrap}

/* ---------- Layout ---------- */
.container{width:100%;max-width:calc(var(--container) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:calc(820px + var(--gutter) * 2)}
.container--mid{max-width:calc(1040px + var(--gutter) * 2)}
.container--article{max-width:calc(1100px + var(--gutter) * 2)}
.container--wide{max-width:calc(1600px + var(--gutter) * 2)}
.section{position:relative;padding-block:var(--section)}
.section--tight{padding-block:clamp(2.5rem,1.8rem + 2.6vw,4rem)}
.section--flush-top{padding-top:0}
/* Continuation blocks (founding banner after the plans, stats card after the
   race) pull into the previous section's bottom padding so the pair reads as
   one band — matching the prototype, where they shared a single <section>. */
.section--attach{padding-top:0;margin-top:calc(var(--section) * -.5);border-top:0}
.section--white{background:#fff}
.section--tint{background:var(--paper-2)}
.section--lines{border-block:1px solid var(--line)}
.stack>*+*{margin-top:var(--stack,1rem)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,.75rem)}
.grid-2{display:grid;gap:clamp(1.5rem,1rem + 2vw,3rem)}
.grid-3{display:grid;gap:1.25rem}
.grid-4{display:grid;gap:1.25rem}
@media (min-width:760px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.split{display:grid;gap:clamp(2rem,1.5rem + 3vw,4.5rem);align-items:center}
@media (min-width:1024px){.split{grid-template-columns:repeat(2,minmax(0,1fr))}.split--wide-left{grid-template-columns:1.15fr .85fr}.split--wide-right{grid-template-columns:.85fr 1.15fr}}
/* Grid items default to min-width:auto (their min-content), which lets a wide
   child blow a single-column mobile grid past the viewport. Let them shrink. */
.hero__inner>*,.split>*,.grid-2>*,.grid-3>*,.grid-4>*,.case>*,.cta__grid>*,.plans>*,.steps>*,.bento>*,.guarantee>*,.founding>*,.arch>*,.calc>*,.choose>*,.versus>*,.result>*,.revenue>*,.contact-grid>*,.dos>*,.earn>*,.woo-auth>*,.account>*,.docs>*,.legal>*,.article-layout>*,.blog-feature>*,.post-grid>*,.domain-map>*,.related>*,.form-grid>*,.race__row>*,.audit-form>*{min-width:0}

/* Section heading */
.sh{max-width:780px;margin:0 auto clamp(2rem,1.7rem + 1.6vw,3rem);text-align:center}
.sh--left{margin-left:0;text-align:left}
.sh h2{font-size:var(--fs-h2);line-height:1.07;letter-spacing:-.03em;margin-top:1rem}
.sh .lead{margin:1.1rem auto 0}
.sh--left .lead{margin-left:0}

/* ---------- Eyebrow / pill / tag / chip ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .75rem;border-radius:var(--r-pill);background:rgb(var(--v1-rgb) / .7);border:1px solid var(--v-200);color:var(--v-700);font-size:.8125rem;font-weight:550;letter-spacing:.01em;line-height:1.4}
.eyebrow .ic{width:1em;height:1em}
.eyebrow--plain{background:none;border:0;padding:0;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:600}
.eyebrow--dark{background:rgb(var(--v4-rgb) / .12);border-color:rgb(var(--v4-rgb) / .28);color:var(--v-300)}

.pill{display:inline-flex;align-items:center;gap:.55rem;padding:.32rem .38rem .32rem .8rem;border-radius:var(--r-pill);background:rgba(255,255,255,.8);border:1px solid var(--line-2);box-shadow:var(--sh-1);font-size:.8438rem;font-weight:500;color:var(--ink-700);transition:border-color .2s,box-shadow .2s}
.pill:hover{border-color:var(--v-300);box-shadow:var(--sh-2)}
.pill strong{color:var(--ink-900);font-weight:600}
.pill__dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(12,206,107,.2);animation:pulse-dot 2.2s var(--ease) infinite}
.pill__go{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink-900);color:#fff}
.pill__go .ic{width:13px;height:13px}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 3px rgba(12,206,107,.22)}50%{box-shadow:0 0 0 6px rgba(12,206,107,.06)}}

.tag{display:inline-flex;align-items:center;font-size:.625rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:.28rem .42rem;border-radius:6px;background:var(--good-bg);color:var(--good-ink);border:1px solid rgba(12,206,107,.28)}
.tag--violet{background:var(--v-100);color:var(--v-700);border-color:var(--v-200)}
.tag--ink{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}

.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .85rem;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:.875rem;font-weight:500;color:var(--ink-700);white-space:nowrap;line-height:1.2}
.chip .ic{color:var(--v-500)}
.chip--sm{padding:.32rem .6rem;font-size:.78rem;border-radius:9px}
.chip--dark{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:var(--ink-200)}

/* ---------- Buttons ---------- */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:var(--h);padding:0 1.25rem;border-radius:12px;border:1px solid transparent;font-size:.96875rem;font-weight:560;line-height:1;letter-spacing:-.005em;white-space:nowrap;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s,border-color .2s,color .2s}
.btn:active{transform:translateY(1px)}
.btn .ic{width:1.05em;height:1.05em}
.btn--primary{color:#fff;background:linear-gradient(180deg,var(--v-500),var(--v-600));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgb(var(--v9-rgb) / .25),0 10px 24px -10px rgb(var(--v6-rgb) / .65)}
.btn--primary:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--v-500) 70%,var(--v-400)),var(--v-600));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 4px rgb(var(--v9-rgb) / .25),0 16px 32px -12px rgb(var(--v6-rgb) / .75);transform:translateY(-1px)}
.btn--ghost{color:var(--ink-900);background:#fff;border-color:var(--line-2);box-shadow:var(--sh-1)}
.btn--ghost:hover{border-color:var(--v-300);color:var(--v-700)}
.btn--dark{color:#fff;background:var(--ink-900);box-shadow:0 10px 24px -12px rgba(11,8,22,.6)}
.btn--dark:hover{background:var(--ink-800);transform:translateY(-1px)}
.btn--light{color:var(--ink-900);background:#fff;box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.btn--light:hover{background:var(--v-50);transform:translateY(-1px)}
.btn--glass{color:#fff;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.btn--glass:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.btn--sm{--h:38px;padding:0 .95rem;font-size:.875rem;border-radius:10px}
.btn--lg{--h:56px;padding:0 1.6rem;font-size:1.03rem;border-radius:14px}
.btn--block{width:100%}

.link-arrow{display:inline;font-weight:560;color:var(--v-700)}
.link-arrow .ic{width:1em;height:1em;margin-left:.4rem;vertical-align:-.14em;transition:transform .2s var(--ease)}
.link-arrow:hover .ic{transform:translateX(.2rem)}
.link-arrow--light{color:var(--v-300)}

/* ---------- Skip link ---------- */
.skip-link{position:absolute;left:1rem;top:-100px;z-index:100;padding:.7rem 1rem;border-radius:10px;background:var(--ink-900);color:#fff;font-weight:600}
.skip-link:focus{top:1rem}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:baseline;font-weight:820;font-size:1.62rem;letter-spacing:-.05em;line-height:1;color:var(--ink-900)}
.logo__woo{color:var(--v-600)}
.logo__hl{margin-left:.015em}
.logo--light{color:#fff}
.logo--light .logo__woo{color:var(--v-400)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;isolation:isolate;border-bottom:1px solid transparent;transition:border-color .25s}
/* Glass lives on a pseudo-element: backdrop-filter on the header box itself would
   become the containing block for the fixed mobile nav and collapse it. */
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(251,250,253,.74);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);transition:background-color .25s}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.site-header.is-scrolled::before{background:rgba(251,250,253,.88)}
.site-header__inner{display:flex;align-items:center;gap:1rem;height:var(--header-h)}
.site-nav{margin-inline:auto}
.site-nav__list{display:flex;align-items:center;gap:.15rem;list-style:none}
.site-nav__link{display:inline-flex;align-items:center;gap:.4rem;height:40px;padding:0 .8rem;border-radius:10px;font-size:.9375rem;font-weight:500;color:var(--ink-700);transition:color .15s,background-color .15s}
.site-nav__link:hover,.site-nav__link[aria-expanded="true"]{color:var(--ink-900);background:rgb(var(--v6-rgb) / .06)}
.site-nav__link[aria-current="page"]{color:var(--v-700)}
.site-nav__link .ic-chevron-down{width:.9em;height:.9em;opacity:.6;transition:transform .2s}
.site-nav__link[aria-expanded="true"] .ic-chevron-down{transform:rotate(180deg)}
.site-nav__mobile{display:none}

.has-menu{position:relative}
.menu{position:absolute;top:calc(100% + 10px);left:50%;z-index:10;width:max-content;min-width:320px;max-width:420px;padding:.5rem;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-3);opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-menu.is-open>.menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (hover:hover) and (min-width:1025px){.has-menu:hover>.menu{opacity:1;visibility:visible;transform:translate(-50%,0)}}
.menu__item{display:flex;align-items:flex-start;gap:.8rem;padding:.7rem .75rem;border-radius:12px;transition:background-color .15s}
.menu__item:hover{background:var(--paper-2)}
.menu__icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--v-50);border:1px solid var(--v-100);color:var(--v-600)}
.menu__icon .ic{width:18px;height:18px}
.menu__item strong{display:block;color:var(--ink-900);font-weight:560;font-size:.9375rem;line-height:1.3}
.menu__item small{display:block;margin-top:.12rem;color:var(--ink-500);font-size:.8125rem;line-height:1.4}
.menu__foot{margin-top:.35rem;padding:.75rem;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-500)}

.site-header__actions{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.nav-toggle{display:none;position:relative;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:#fff}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{position:absolute;left:12px;width:18px;height:1.8px;border-radius:2px;background:var(--ink-900);transition:transform .25s var(--ease),opacity .2s}
.nav-toggle span{top:21px}
.nav-toggle span::before,.nav-toggle span::after{content:"";left:0}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-open .nav-toggle span{background:transparent}
.nav-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1024px){
  .nav-toggle{display:block}
  .site-header__login{display:none}
  .site-nav{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:59;margin:0;padding:1rem var(--gutter) 2rem;background:var(--paper);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s var(--ease),visibility .2s}
  .nav-open .site-nav{opacity:1;visibility:visible;transform:none}
  .nav-open{overflow:hidden}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:.25rem}
  .site-nav__list>li{border-bottom:1px solid var(--line)}
  .site-nav__link{width:100%;height:56px;justify-content:space-between;font-size:1.0625rem;padding:0 .25rem;border-radius:0}
  .site-nav__link:hover{background:none}
  .menu{position:static;transform:none;opacity:1;visibility:visible;width:auto;min-width:0;max-width:none;padding:0 0 .75rem;border:0;box-shadow:none;background:none;display:none}
  .menu::before{display:none}
  .has-menu.is-open>.menu{display:block;transform:none}
  .site-nav__mobile{display:grid;gap:.6rem;margin-top:1.5rem}
}
@media (max-width:1180px){.site-header__demo{display:none}}
@media (max-width:420px){.site-header__actions .btn--sm{display:none}}

/* ---------- Footer ---------- */
.site-footer{position:relative;overflow:hidden;background:var(--ink-950);color:var(--ink-400);padding-top:clamp(3.5rem,2.5rem + 4vw,5.5rem)}
.site-footer::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 15% 0%,rgb(var(--v5-rgb) / .16),transparent 70%),radial-gradient(40% 40% at 95% 10%,rgba(12,206,107,.06),transparent 70%);pointer-events:none}
.site-footer .container{position:relative}
.site-footer__cols a,.site-footer__bottom p a{color:var(--ink-300);transition:color .15s}
.site-footer__cols a:hover,.site-footer__bottom p a:hover{color:#fff}
.site-footer .social{color:var(--ink-300)}
.site-footer .social:hover{color:#fff}
.site-footer__top{display:grid;gap:3rem}
@media (min-width:1024px){.site-footer__top{grid-template-columns:1fr 1.9fr;gap:4rem}}
.site-footer__brand p{margin-top:1rem;max-width:38ch;font-size:.9375rem;line-height:1.6}
.site-footer__brand .cluster{margin-top:1.5rem}
.site-footer__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem}
@media (min-width:720px){.site-footer__cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.site-footer__cols h2{margin-bottom:1rem;color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.site-footer__cols ul{list-style:none;display:grid;gap:.65rem;font-size:.9375rem}
.social{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.social:hover{border-color:rgba(255,255,255,.25)}
.social .ic{width:18px;height:18px}
.site-footer__mark{display:flex;justify-content:center;align-items:stretch;margin-top:clamp(3rem,2rem + 4vw,5rem);font-weight:820;font-size:clamp(4.5rem,1rem + 17vw,16rem);letter-spacing:-.06em;line-height:.8;user-select:none;pointer-events:none;transform:translateY(10%)}
.site-footer__mark span{padding-right:.04em;color:transparent;background:linear-gradient(180deg,rgb(var(--v4-rgb) / .42),rgb(var(--v4-rgb) / .02) 88%);-webkit-background-clip:text;background-clip:text}
.site-footer__mark span+i+span{background-image:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.01) 88%)}
.site-footer__mark i{width:2px;margin:0 .07em;background:repeating-linear-gradient(to bottom,rgb(var(--v4-rgb) / .8) 0 10px,transparent 10px 20px);-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.site-footer__bottom{position:relative;display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;padding-block:1.6rem;border-top:1px solid rgba(255,255,255,.08);font-size:.8125rem;background:var(--ink-950)}
.site-footer__bottom p{max-width:70ch}
.speed-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .7rem;border-radius:var(--r-pill);border:1px solid rgba(12,206,107,.3);background:rgba(12,206,107,.08);color:#7EE8AE;font-size:.78rem;font-weight:500}
.speed-badge .ic{width:14px;height:14px}

/* ---------- Breadcrumbs ---------- */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;font-size:.84rem;color:var(--ink-500)}
.crumbs li{display:inline-flex;align-items:center;gap:.35rem}
.crumbs li+li::before{content:"/";color:var(--ink-300)}
.crumbs a{transition:color .15s}
.crumbs a:hover{color:var(--v-700)}
/* Yoast breadcrumb output (spans, not ol/li) */
.crumbs>span{display:inline-flex;flex-wrap:wrap;gap:.1rem .35rem;font-size:.84rem;color:var(--ink-500)}
.crumbs>span a{color:var(--ink-500)}
.crumbs>span .breadcrumb_last{color:var(--ink-700)}
.crumbs [aria-current]{color:var(--ink-800)}

/* ---------- Utilities ---------- */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-5{margin-top:3rem}.mt-6{margin-top:4rem}
.mx-auto{margin-inline:auto}
.w-full{width:100%}

/* ---------- Motion ---------- */
.wjs [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.wjs [data-reveal].is-in{opacity:1;transform:none}
.wjs [data-reveal="2"]{transition-delay:.08s}
.wjs [data-reveal="3"]{transition-delay:.16s}
.wjs [data-reveal="4"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wjs [data-reveal]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---- 02-components.css ---- */
/* ==========================================================
   WOOHL — design system · components
   ========================================================== */

/* ---------- Backdrops ---------- */
.backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.backdrop__grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgb(var(--v6-rgb) / .075) 1px,transparent 1px),linear-gradient(to bottom,rgb(var(--v6-rgb) / .075) 1px,transparent 1px);background-size:56px 56px;background-position:center top;-webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 0%,#000 28%,transparent 78%);mask-image:radial-gradient(ellipse 78% 68% at 50% 0%,#000 28%,transparent 78%)}
.backdrop__glow{position:absolute;left:50%;top:-35%;width:min(1500px,170%);height:125%;transform:translateX(-50%);background:radial-gradient(34% 40% at 28% 32%,rgb(var(--v4-rgb) / .24),transparent 70%),radial-gradient(26% 32% at 76% 24%,rgba(12,206,107,.09),transparent 70%)}

/* ---------- Home hero ---------- */
.hero{position:relative;padding:clamp(2.25rem,1.3rem + 4vw,5rem) 0 clamp(3rem,2.2rem + 3.5vw,5.25rem)}
.hero__inner{position:relative;z-index:1;display:grid;gap:clamp(3rem,2rem + 4vw,5rem);align-items:center}
@media (min-width:1080px){.hero__inner{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:4.5rem}}
.hero__title{margin-top:1.4rem;font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.04em}
.hero__title em{display:inline-block}
.hero__lead{margin-top:1.5rem;max-width:54ch;font-size:var(--fs-md);line-height:1.6;color:var(--ink-500)}
.hero__lead strong{color:var(--ink-900);font-weight:600}
.hero__alt{margin-top:1.1rem;font-size:.9rem;color:var(--ink-500)}
.hero__alt a{color:var(--ink-900);font-weight:560;border-bottom:1px solid var(--line-2);transition:border-color .15s,color .15s}
.hero__alt a:hover{color:var(--v-700);border-color:var(--v-300)}
.ticks{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1.6rem;font-size:.875rem;color:var(--ink-600)}
.ticks li{display:inline-flex;align-items:center;gap:.45rem}
.ticks .ic{color:var(--good-ink);width:1.05em;height:1.05em}
.ticks--dark{color:var(--ink-300)}
.ticks--dark .ic{color:#7EE8AE}

/* ---------- Audit URL form ---------- */
.audit{position:relative;margin-top:2rem;max-width:590px}
.audit__box{display:flex;align-items:center;gap:.35rem;padding:.4rem;background:#fff;border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--sh-2);transition:border-color .2s,box-shadow .2s}
.audit__box:focus-within{border-color:var(--v-400);box-shadow:0 0 0 4px rgb(var(--v5-rgb) / .14),var(--sh-2)}
.audit__icon{display:grid;place-items:center;width:40px;color:var(--ink-400)}
.audit__icon .ic{width:19px;height:19px}
.audit__box input{flex:1;min-width:0;height:48px;padding:0;border:0;outline:0;background:transparent;font-size:1rem;color:var(--ink-900)}
.audit__box input::placeholder{color:var(--ink-400)}
.audit__note{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-top:.8rem;font-size:.8125rem;color:var(--ink-500)}
.audit__note li{display:inline-flex;align-items:center;gap:.35rem}
.audit__note .ic{width:.95em;height:.95em;color:var(--ink-400)}
.audit--dark .audit__box{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none}
.audit--dark .audit__box:focus-within{border-color:var(--v-400);box-shadow:0 0 0 4px rgb(var(--v5-rgb) / .25)}
.audit--dark .audit__box input{color:#fff}
.audit--dark .audit__box input::placeholder{color:var(--ink-400)}
.audit--dark .audit__note{color:var(--ink-400)}
@media (max-width:560px){.audit__box{flex-wrap:wrap;padding:.5rem}.audit__icon{display:none}.audit__box input{width:100%;padding:0 .6rem}.audit__box .btn{width:100%}}

/* ---------- Score readout (PageSpeed window) ---------- */
.readout-wrap{position:relative}
.readout{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-3)}
.readout__bar{display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:linear-gradient(#fff,var(--paper));font-family:var(--font-mono);font-size:.72rem;color:var(--ink-500)}
.dots{display:inline-flex;gap:6px;flex:none}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--ink-200)}
.dots i:nth-child(1){background:#F5A6A0}.dots i:nth-child(2){background:#F6D48E}.dots i:nth-child(3){background:#9ADCB6}
.readout__url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.28rem .6rem;border-radius:8px;background:var(--paper-2);border:1px solid var(--line)}
.readout__tabs{display:flex;gap:.2rem;flex:none}
.readout__tab{padding:.22rem .5rem;border-radius:6px}
.readout__tab.is-active{background:var(--ink-900);color:#fff}
.readout__body{padding:clamp(1.25rem,1rem + 1vw,1.75rem)}
.readout__gauges{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:.5rem;text-align:center}
.readout .gauge{--size:clamp(92px,25vw,124px)}
@media (max-width:480px){.metrics{grid-template-columns:minmax(0,1fr)}.metric:nth-child(odd){padding-right:.1rem;border-right:0}.metric:nth-child(even){padding-left:.1rem}}
.readout__delta{align-self:center;display:grid;justify-items:center;gap:.45rem;padding-bottom:2.4rem}
.readout__delta b{display:inline-flex;align-items:center;gap:.2rem;padding:.3rem .6rem;border-radius:var(--r-pill);background:var(--good-bg);color:var(--good-ink);font-family:var(--font-mono);font-size:.8rem;font-weight:600}
.readout__delta span{width:52px;height:2px;background:repeating-linear-gradient(90deg,var(--ink-300) 0 4px,transparent 4px 8px)}
.readout__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 1rem;padding:.8rem 1.25rem;border-top:1px solid var(--line);background:var(--paper);font-size:.75rem;color:var(--ink-500)}
.readout__foot a{display:inline-flex;align-items:center;gap:.3rem;color:var(--v-700);font-weight:560;white-space:nowrap}
.readout__foot a .ic{width:.9em;height:.9em}

/* Gauge — Lighthouse semantics (0–49 poor, 50–89 average, 90–100 good) */
.gauge{--p:var(--score);--size:124px;display:grid;justify-items:center;gap:.75rem;margin:0}
.wjs .gauge[data-animate]:not(.is-in){--p:0}
.gauge--good{--g:var(--good);--g-bg:var(--good-bg);--g-ink:var(--good-ink)}
.gauge--avg{--g:var(--avg);--g-bg:var(--avg-bg);--g-ink:var(--avg-ink)}
.gauge--poor{--g:var(--poor);--g-bg:var(--poor-bg);--g-ink:var(--poor-ink)}
.gauge--sm{--size:84px}
.gauge--lg{--size:clamp(132px,10vw,168px)}
.gauge__ring{position:relative;width:var(--size);aspect-ratio:1}
.gauge__ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.gauge__bg{fill:var(--g-bg)}
.gauge__arc{fill:none;stroke:var(--g);stroke-width:8;stroke-linecap:round;stroke-dasharray:314.16px;stroke-dashoffset:calc(314.16px - 314.16px * var(--p) / 100);transition:stroke-dashoffset 1.9s var(--ease-out)}
.gauge__num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-weight:560;font-size:calc(var(--size) * .29);letter-spacing:-.05em;color:var(--g-ink);font-variant-numeric:tabular-nums;transition:opacity .3s}
.wjs .gauge[data-animate]:not(.is-in) .gauge__num,.wjs .gauge[data-animate]:not(.is-in) .gauge__arc{opacity:0}
.gauge__cap{font-size:.84rem;font-weight:560;color:var(--ink-800);line-height:1.3}
.gauge__cap small{display:block;margin-top:.15rem;font-size:.75rem;font-weight:400;color:var(--ink-500)}

/* Metrics (Lighthouse-style rows) */
.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1.4rem;border-top:1px dashed var(--line-2)}
.metric{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.72rem .1rem;border-bottom:1px dashed var(--line)}
.metric:nth-child(odd){padding-right:1rem;border-right:1px dashed var(--line)}
.metric:nth-child(even){padding-left:1rem}
.metric dt{display:flex;align-items:center;gap:.5rem;font-size:.78rem;line-height:1.3;color:var(--ink-500)}
.metric dt::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--good)}
.metric--avg dt::before{border-radius:1px;background:var(--avg)}
.metric--poor dt::before{border-radius:0;background:var(--poor);clip-path:polygon(50% 0,100% 100%,0 100%)}
.metric dd{font-family:var(--font-mono);font-size:.86rem;font-weight:560;color:var(--ink-900);white-space:nowrap}
.metric dd s{margin-right:.35rem;color:var(--ink-400);font-weight:400;text-decoration-thickness:1px}

/* Floating annotation chips */
.float{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:12px;background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:var(--sh-2);font-size:.78rem;font-weight:560;color:var(--ink-800);white-space:nowrap;animation:bob 7s ease-in-out infinite}
.float .ic{color:var(--v-600)}
.float .ic-check-circle{color:var(--good-ink)}
.float--tl{top:-18px;left:-26px}
.float--r{top:36%;right:-34px;animation-delay:-2.4s}
.float--bl{bottom:-28px;left:10%;animation-delay:-4.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width:1280px){.float--r{right:-12px}.float--tl{left:-8px}}
@media (max-width:640px){.float{display:none}}

/* ---------- Proof bar (sits under the hero) ---------- */
.proofbar{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-2);overflow:hidden}
@media (min-width:900px){.proofbar{grid-template-columns:1.35fr repeat(3,minmax(0,1fr))}}
.proofbar__cell{padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)}
.proofbar__brand,.proofbar__cell:last-child{grid-column:1/-1}
.proofbar__cell:nth-child(2){border-right:1px solid var(--line)}
.proofbar__cell:last-child{border-bottom:0}
@media (min-width:900px){.proofbar__brand,.proofbar__cell:last-child{grid-column:auto}.proofbar__cell{border-bottom:0;border-right:1px solid var(--line)}.proofbar__cell:last-child{border-right:0}}
.proofbar__brand{display:flex;align-items:center;gap:.85rem}
.proofbar__mark{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--ink-900);color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.02em}
.proofbar__brand strong{display:block;color:var(--ink-900);font-size:.95rem}
.proofbar__brand span{font-size:.8125rem;color:var(--ink-500)}
.proofbar__num{font-family:var(--font-mono);font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);font-weight:560;letter-spacing:-.04em;color:var(--ink-900);line-height:1.1}
.proofbar__num .up{color:var(--good-ink)}
.proofbar__label{margin-top:.25rem;font-size:.8125rem;color:var(--ink-500);line-height:1.35}

/* ---------- Stack marquee ---------- */
.stack-strip__label{margin-bottom:1.25rem;text-align:center;font-size:.875rem;font-weight:500;color:var(--ink-500)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee__track{display:flex;gap:.75rem;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;gap:.75rem}
@keyframes marquee{to{transform:translateX(calc(-50% - .375rem))}}

/* ---------- Architecture diagram ---------- */
.arch{position:relative;display:grid;gap:0}
.arch__col{display:grid;gap:.6rem;align-content:center}
.arch__zone{position:relative;padding:1.6rem 1.15rem 1.15rem;border-radius:22px;border:1px dashed var(--line-2);background:rgba(255,255,255,.65)}
.arch__zone--head{border:1.5px solid var(--v-300);background:linear-gradient(180deg,var(--v-50),#fff 70%);box-shadow:var(--sh-glow)}
.arch__zone-label{position:absolute;top:-.72rem;left:1rem;padding:.16rem .6rem;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line-2);font-size:.7rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);white-space:nowrap}
.arch__zone--head .arch__zone-label{background:var(--v-600);border-color:var(--v-600);color:#fff}
.arch__node{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem .95rem;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.arch__node+.arch__node{margin-top:.55rem}
.arch__node>.ic{width:20px;height:20px;margin-top:.1rem;color:var(--v-600)}
.arch__node strong{display:block;font-size:.92rem;line-height:1.3;color:var(--ink-900)}
.arch__node small{display:block;margin-top:.12rem;font-size:.76rem;line-height:1.4;color:var(--ink-500)}
.arch__node--primary{border-color:var(--v-300)}
.arch__node--checkout{border-color:rgba(12,206,107,.45)}
.arch__node--checkout>.ic{color:var(--good-ink)}
.arch__tags{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.75rem}
.arch__tags li{padding:.22rem .48rem;border-radius:7px;background:#fff;border:1px solid var(--v-200);font-family:var(--font-mono);font-size:.69rem;color:var(--v-700)}
.arch__domain{display:block;margin-top:.85rem;font-family:var(--font-mono);font-size:.74rem;color:var(--ink-400)}
.arch__wire{position:relative;display:grid;place-items:center;min-height:70px}
.arch__wire::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:repeating-linear-gradient(to bottom,var(--v-300) 0 6px,transparent 6px 12px)}
.arch__wire-label{position:relative;z-index:1;padding:.25rem .55rem;border-radius:8px;background:var(--paper);border:1px solid var(--line);font-family:var(--font-mono);font-size:.69rem;line-height:1.35;color:var(--ink-500);text-align:center;white-space:nowrap}
.arch__pulse{position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--v-500);box-shadow:0 0 0 4px rgb(var(--v5-rgb) / .18);animation:wire-y 2.6s var(--ease) infinite}
.arch__pulse--back{background:var(--good);box-shadow:0 0 0 4px rgba(12,206,107,.2);animation-direction:reverse;animation-delay:-1.3s}
@keyframes wire-y{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 8px);opacity:0}}
@keyframes wire-x{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@media (min-width:1080px){
  .arch{grid-template-columns:minmax(0,.62fr) minmax(88px,.42fr) minmax(0,1.1fr) minmax(112px,.5fr) minmax(0,1.2fr);align-items:center}
  .arch__wire{min-height:0;height:100%}
  .arch__wire::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:2px;transform:translateY(-50%);background:repeating-linear-gradient(to right,var(--v-300) 0 6px,transparent 6px 12px)}
  .arch__wire-label{transform:translateY(-26px)}
  .arch__pulse{top:50%;left:0;margin:-4px 0 0;animation-name:wire-x}
}
.arch-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;margin-top:1.75rem;font-size:.8125rem;color:var(--ink-500)}
.arch-legend span{display:inline-flex;align-items:center;gap:.45rem}
.arch-legend i{width:9px;height:9px;border-radius:50%;background:var(--v-500)}
.arch-legend i.is-good{background:var(--good)}

/* ---------- Steps ---------- */
.steps{position:relative;display:grid;gap:1rem;list-style:none}
@media (min-width:960px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}}
.step{position:relative;display:flex;flex-direction:column;padding:1.75rem;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-1)}
.step__head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.step__num{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.8rem;font-weight:560;color:var(--v-600)}
.step__num::after{content:"";width:28px;height:1px;background:var(--v-300)}
.step__time{padding:.25rem .5rem;border-radius:7px;background:var(--paper-2);border:1px solid var(--line);font-family:var(--font-mono);font-size:.7rem;color:var(--ink-500)}
.step h3{margin-top:1.1rem;font-size:1.3rem;letter-spacing:-.025em}
.step p{margin-top:.55rem;font-size:.97rem;color:var(--ink-500)}
.step__ui{margin-top:auto;padding-top:1.5rem}
@media (min-width:960px){.step:not(:last-child)::after{content:"";position:absolute;top:2.4rem;right:-1.25rem;width:1.25rem;height:2px;background:repeating-linear-gradient(90deg,var(--v-300) 0 4px,transparent 4px 8px)}}
.after-steps{display:flex;align-items:flex-start;gap:.9rem;max-width:920px;margin:1.75rem auto 0;padding:1.1rem 1.35rem;border-radius:18px;background:var(--paper-2);border:1px solid var(--line);font-size:.9375rem;line-height:1.6;color:var(--ink-600)}
.after-steps>.ic{width:22px;height:22px;margin-top:.1rem;color:var(--v-600)}
.after-steps strong{color:var(--ink-900)}

/* Mini UI fragments used inside steps / tiles */
.ui{border-radius:14px;border:1px solid var(--line);background:var(--paper);padding:.85rem .95rem;font-size:.8rem}
.ui-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.35rem 0}
.ui-row+.ui-row{border-top:1px dashed var(--line)}
.ui-row span{color:var(--ink-500)}
.ui-row b{font-family:var(--font-mono);font-weight:560;color:var(--ink-900)}
.ui-row b.is-avg{color:var(--avg-ink)}
.ui-row b.is-good{color:var(--good-ink)}
.ui-row .ok{display:inline-flex;align-items:center;gap:.3rem;color:var(--good-ink);font-weight:560}
.ui-row .ok .ic{width:.95em;height:.95em}
.ui-dns{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-600);display:grid;grid-template-columns:auto auto 1fr auto;gap:.3rem .8rem;align-items:center}
.ui-dns .hd{color:var(--ink-400);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}
.ui-live{display:inline-flex;align-items:center;gap:.35rem;padding:.12rem .45rem;border-radius:6px;background:var(--good-bg);color:var(--good-ink);font-weight:600}
.term-mini{border-radius:14px;background:var(--ink-950);padding:.9rem 1rem;font-family:var(--font-mono);font-size:.74rem;line-height:1.75;color:#CFC8E6;overflow:hidden;white-space:pre}
.term-mini .c{color:#6F6887}.term-mini .k{color:#C3A8FF}.term-mini .s{color:#86E3AE}.term-mini .n{color:#FFC978}.term-mini .p{color:#FF9BB0}

/* ---------- Bento ---------- */
.bento{display:grid;gap:1rem}
@media (min-width:720px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.tile--hero{grid-column:1/-1}}
@media (min-width:1080px){.bento{grid-template-columns:repeat(3,minmax(0,1fr))}.tile--hero{grid-column:span 2;grid-row:span 2}.tile--wide{grid-column:span 2}}
.tile{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(1.35rem,1.1rem + .8vw,1.8rem);background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-1);overflow:hidden;transition:box-shadow .3s var(--ease),border-color .3s}
.tile:hover{box-shadow:var(--sh-2);border-color:var(--line-2)}
.tile__icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--v-50);border:1px solid var(--v-100);color:var(--v-600)}
.tile__icon .ic{width:20px;height:20px}
.tile h3{margin-top:1.1rem;font-size:1.2rem;letter-spacing:-.022em}
.tile p{margin-top:.5rem;font-size:.94rem;line-height:1.6;color:var(--ink-500)}
.tile__visual{margin-top:auto;padding-top:1.5rem}
.tile--hero{background:radial-gradient(70% 60% at 100% 0%,rgba(12,206,107,.09),transparent 65%),radial-gradient(60% 70% at 0% 100%,rgb(var(--v5-rgb) / .1),transparent 65%),#fff}
.tile--hero h3{font-size:clamp(1.65rem,1.3rem + 1.1vw,2.2rem);letter-spacing:-.038em;max-width:17ch;line-height:1.08}
.tile--hero p{font-size:1.02rem;max-width:48ch}
.tile--ink{background:var(--ink-950);border-color:rgba(255,255,255,.06);color:var(--ink-300)}
.tile--ink h3{color:#fff}
.tile--ink p{color:var(--ink-300)}
.tile--ink .tile__icon{background:rgb(var(--v4-rgb) / .14);border-color:rgb(var(--v4-rgb) / .25);color:var(--v-300)}
.tile__gauges{display:flex;flex-wrap:wrap;gap:1.5rem 2rem;align-items:flex-end}
.tile__proof{display:flex;flex-wrap:wrap;align-items:center;gap:1.75rem 3rem}
.tile__proof .checklist{margin:0}
.tile__fine{margin-top:1.1rem;font-size:.8125rem;color:var(--ink-500)}

.file-swap{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.file{display:grid;gap:.1rem;padding:.6rem .75rem;border-radius:12px;border:1px solid var(--line);background:var(--paper);font-family:var(--font-mono);font-size:.74rem;color:var(--ink-600)}
.file b{color:var(--ink-900);font-weight:560}
.file--bad span{color:var(--poor-ink)}
.file--good{border-color:rgba(12,206,107,.4);background:var(--good-bg)}
.file--good span{color:var(--good-ink)}
.file-swap>.ic{color:var(--ink-400)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.spark{width:100%;height:56px}
.spark path.line{fill:none;stroke:var(--v-500);stroke-width:2}
.spark path.area{fill:url(#spark-fill)}
.switch{display:inline-flex;align-items:center;gap:.7rem;padding:.55rem .75rem;border-radius:14px;border:1px solid var(--line);background:var(--paper);font-size:.8rem;font-weight:560;color:var(--ink-700)}
.switch__track{position:relative;width:40px;height:22px;border-radius:999px;background:var(--v-600)}
.switch__track::after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stat{padding:clamp(1.25rem,1rem + 1vw,1.9rem);background:#fff}
@media (max-width:899px){.stats>.stat:last-child:nth-child(odd){grid-column:1/-1}}
.stat__num{font-size:clamp(2rem,1.45rem + 2.1vw,3.1rem);font-weight:600;line-height:1;letter-spacing:-.052em;color:var(--ink-900);font-variant-numeric:tabular-nums}
.stat__num small{font-size:.48em;font-weight:500;letter-spacing:-.02em;color:var(--ink-500)}
.stat__num .up{color:var(--good-ink)}
.stat__label{margin-top:.65rem;font-size:.9rem;line-height:1.45;color:var(--ink-600)}
.stat__src{display:block;margin-top:.6rem;font-size:.72rem;line-height:1.4;color:var(--ink-400)}
.stat__src a{text-decoration:underline;text-underline-offset:2px}
.stats--dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.08)}
.stats--dark .stat{background:var(--ink-950)}
.stats--dark .stat__num{color:#fff}
.stats--dark .stat__label{color:var(--ink-300)}
.stats--dark .stat__src{color:var(--ink-400)}

/* ---------- Dark band ---------- */
.band{position:relative;overflow:hidden;isolation:isolate;background:var(--ink-950);color:var(--ink-300)}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 18% 0%,rgb(var(--v5-rgb) / .26),transparent 70%),radial-gradient(38% 48% at 92% 28%,rgba(12,206,107,.07),transparent 70%)}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 25%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 50% 25%,#000 25%,transparent 80%)}
.band h2,.band h3,.band h4,.band strong{color:#fff}
.band h2 em{--hl-a:var(--hl-from-dark);--hl-b:var(--hl-to-dark)}
.band .lead,.band .muted,.band p{color:var(--ink-300)}
.band .eyebrow{background:rgb(var(--v4-rgb) / .12);border-color:rgb(var(--v4-rgb) / .28);color:var(--v-300)}
.band .link-arrow{color:var(--v-300)}

/* ---------- Case / proof ---------- */
.case{display:grid;gap:1.25rem}
@media (min-width:1024px){.case{grid-template-columns:1.08fr .92fr}}
.case__story{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;padding:clamp(1.75rem,1.3rem + 1.8vw,2.9rem);border-radius:28px;background:var(--ink-950);color:var(--ink-300)}
.case__story::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 100% 0%,rgb(var(--v5-rgb) / .3),transparent 70%)}
.case__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.case__brand{font-weight:800;font-size:1.3rem;letter-spacing:.04em;color:#fff}
.quote{margin-top:2rem;font-family:var(--font-display);font-weight:500;font-size:clamp(1.3rem,1.05rem + 1vw,1.85rem);line-height:1.38;letter-spacing:-.02em;color:#fff}
.quote-by{margin-top:1.4rem;font-size:.875rem;color:var(--ink-400)}
.case__foot{margin-top:auto;padding-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}
.case__scores{display:grid;gap:1rem}
.scorecard{padding:1.5rem;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.scorecard__label{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.1rem;font-size:.8125rem;font-weight:560;color:var(--ink-700)}
.scorecard__label span{font-family:var(--font-mono);font-weight:400;color:var(--ink-400);font-size:.72rem}
.scorecard__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;text-align:center}
.scorecard__arrow{display:grid;justify-items:center;gap:.35rem;font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--good-ink)}
.scorecard__arrow .ic{width:20px;height:20px;color:var(--ink-300)}

/* ---------- Comparison table ---------- */
.compare{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-2)}
.compare__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare table{min-width:820px;font-size:.93rem}
.compare th,.compare td{padding:1rem 1.2rem;text-align:left;vertical-align:top;line-height:1.5;border-bottom:1px solid var(--line)}
.compare tbody tr:last-child>*{border-bottom:0}
.compare thead th{padding-block:1.15rem;background:var(--paper);font-size:.84rem;font-weight:600;color:var(--ink-800);vertical-align:bottom}
.compare thead th small{display:block;margin-bottom:.25rem;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400)}
.compare tbody th{width:21%;font-weight:560;color:var(--ink-900)}
.compare td{color:var(--ink-600)}
.compare .us{background:rgb(var(--v5-rgb) / .045);box-shadow:inset 1px 0 0 var(--v-200),inset -1px 0 0 var(--v-200)}
.compare thead .us{background:var(--v-600);color:#fff;box-shadow:none}
.compare thead .us small{color:rgba(255,255,255,.75)}
.mark{display:inline-flex;align-items:flex-start;gap:.5rem}
.mark .ic{margin-top:.18em;width:1.05em;height:1.05em}
.mark--yes .ic{color:var(--good-ink)}
.mark--no .ic{color:var(--poor-ink)}
.mark--meh .ic{color:var(--avg-ink)}
.compare__note{padding:.9rem 1.2rem;border-top:1px solid var(--line);background:var(--paper);font-size:.78rem;color:var(--ink-500)}
.compare__hint{display:none;align-items:center;gap:.4rem;padding:.7rem 1.2rem;border-bottom:1px solid var(--line);background:var(--paper);font-size:.78rem;font-weight:560;color:var(--ink-500)}
@media (max-width:860px){.compare__hint{display:flex}}

/* ---------- Pricing ---------- */
.billing{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line-2);box-shadow:var(--sh-1)}
.billing input{position:absolute;opacity:0;pointer-events:none}
.billing label{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.6rem 1.1rem;border-radius:var(--r-pill);font-size:.875rem;font-weight:560;color:var(--ink-600);cursor:pointer;white-space:nowrap;transition:color .25s}
.billing input:checked+label{color:#fff}
.billing input:focus-visible+label{outline:2px solid var(--v-500);outline-offset:2px}
.billing__thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:var(--r-pill);background:var(--ink-900);transition:transform .35s var(--ease-out)}
.billing:has(#bill-annual:checked) .billing__thumb{transform:translateX(100%)}
@media (max-width:520px){.billing{grid-template-columns:repeat(2,minmax(0,1fr))}.billing label{flex-direction:column;gap:.28rem;padding:.55rem .9rem;white-space:normal;line-height:1.15;text-align:center}}
.pricing [data-bill="annual"]{display:none}
.pricing:has(#bill-annual:checked) [data-bill="monthly"]{display:none}
.pricing:has(#bill-annual:checked) [data-bill="annual"]{display:inline}
.pricing:has(#bill-annual:checked) div[data-bill="annual"],.pricing:has(#bill-annual:checked) p[data-bill="annual"]{display:block}
.pricing:has(#bill-annual:checked) .btn[data-bill="annual"]{display:inline-flex}
.plans{display:grid;gap:1.25rem;max-width:1020px;margin:2.5rem auto 0}
@media (min-width:900px){.plans{grid-template-columns:1.12fr .88fr;align-items:stretch}}
.plan{position:relative;display:flex;flex-direction:column;padding:clamp(1.6rem,1.25rem + 1.1vw,2.3rem);background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--sh-1)}
.plan--featured{border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(150deg,var(--v-400),var(--v-600) 45%,rgba(12,206,107,.6)) border-box;box-shadow:var(--sh-glow)}
.plan__ribbon{position:absolute;top:-.8rem;left:clamp(1.6rem,1.25rem + 1.1vw,2.3rem);display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:var(--r-pill);background:var(--ink-900);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.04em}
.plan__ribbon .ic{width:.95em;height:.95em;color:#7EE8AE}
.plan__name{font-size:1.4rem;letter-spacing:-.025em}
.plan__for{margin-top:.25rem;font-size:.92rem;color:var(--ink-500)}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.1rem .45rem;margin-top:1.6rem;color:var(--ink-900)}
.price__amt{font-size:clamp(3.2rem,2.5rem + 2.2vw,4.3rem);font-weight:620;line-height:.92;letter-spacing:-.058em;font-variant-numeric:tabular-nums}
.price__amt sup{font-size:.42em;font-weight:560;letter-spacing:-.02em;vertical-align:.95em;margin-right:.05em}
.price__per{font-size:.96rem;color:var(--ink-500)}
.price__custom{font-size:clamp(2.4rem,2rem + 1.5vw,3.1rem);font-weight:620;line-height:1;letter-spacing:-.05em}
.price__note{margin-top:.65rem;min-height:1.4em;font-size:.86rem;color:var(--ink-500)}
.price__note s{color:var(--ink-400)}
.checklist{list-style:none;display:grid;gap:.72rem;margin:1.75rem 0 2rem}
.checklist li{position:relative;padding-left:1.9rem;font-size:.965rem;line-height:1.5;color:var(--ink-700)}
.checklist li::before{content:"";position:absolute;left:0;top:.1em;width:20px;height:20px;border-radius:50%;background:var(--v-100)}
.checklist li::after{content:"";position:absolute;left:4px;top:calc(.1em + 4px);width:12px;height:12px;background:var(--v-700);-webkit-mask:var(--icon-check) center/contain no-repeat;mask:var(--icon-check) center/contain no-repeat}
.checklist li strong{color:var(--ink-900);font-weight:600}
.checklist--good li::before{background:var(--good-bg)}
.checklist--good li::after{background:var(--good-ink)}
.checklist--no li::before{background:var(--poor-bg)}
.checklist--no li::after{background:var(--poor-ink);-webkit-mask-image:var(--icon-x);mask-image:var(--icon-x)}
.checklist--tight{gap:.5rem;margin:1rem 0 0}
.band .checklist li{color:var(--ink-200)}
.band .checklist li strong{color:#fff}
.band .checklist li::before{background:rgb(var(--v4-rgb) / .18)}
.band .checklist li::after{background:var(--v-300)}
.plan .btn{margin-top:auto}
.plan__fine{display:flex;align-items:center;justify-content:center;gap:.45rem;margin-top:.9rem;font-size:.8125rem;color:var(--ink-500);text-align:center}
.plan__fine .ic{color:var(--good-ink)}

.founding{position:relative;overflow:hidden;isolation:isolate;display:grid;gap:1.25rem;align-items:center;max-width:1020px;margin:1.25rem auto 0;padding:1.5rem 1.7rem;border-radius:24px;background:linear-gradient(120deg,var(--v-800),var(--v-600) 60%,var(--v-500));color:color-mix(in srgb,var(--v-100) 60%,var(--v-200));box-shadow:var(--sh-glow)}
.founding::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
@media (min-width:820px){.founding{grid-template-columns:1fr auto}}
.founding h3{color:#fff;font-size:1.2rem;letter-spacing:-.02em}
.founding p{margin-top:.35rem;font-size:.93rem;color:#DCD0FF}
.founding strong{color:#fff}
.slots{display:grid;grid-template-columns:repeat(25,1fr);gap:3px;max-width:340px;margin-top:.9rem}
.slots i{aspect-ratio:1;border-radius:3px;border:1px solid rgba(255,255,255,.35)}

/* ---------- Guarantee ---------- */
.guarantee{display:grid;gap:clamp(1.5rem,1rem + 2vw,2.75rem);align-items:center;padding:clamp(1.6rem,1.2rem + 1.8vw,2.9rem);border-radius:30px;background:linear-gradient(135deg,#fff 30%,var(--v-50));border:1px solid var(--v-200);box-shadow:var(--sh-2)}
@media (min-width:900px){.guarantee{grid-template-columns:auto 1fr}}
.guarantee h2,.guarantee h3{font-size:clamp(1.6rem,1.3rem + 1.1vw,2.2rem);letter-spacing:-.028em}
.guarantee p{margin-top:.7rem;color:var(--ink-600);max-width:64ch}
.seal{width:clamp(128px,11vw,158px);height:auto;justify-self:center}
.seal__ring{transform-box:view-box;transform-origin:60px 60px;animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.seal__text{font-family:var(--font-mono);font-size:7.6px;font-weight:600;letter-spacing:1px;fill:var(--v-700)}
.seal__num{font-family:var(--font-sans);font-size:32px;font-weight:700;letter-spacing:-1.6px;fill:var(--ink-900)}
.seal__sub{font-family:var(--font-mono);font-size:6px;font-weight:600;letter-spacing:1.2px;fill:var(--v-700)}
.terms{display:grid;gap:.7rem;margin-top:1.4rem}
@media (min-width:640px){.terms{grid-template-columns:repeat(2,minmax(0,1fr))}}
.term{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem 1rem;border-radius:14px;background:#fff;border:1px solid var(--line)}
.term>.ic{margin-top:.15rem;color:var(--v-600)}
.term strong{display:block;font-size:.92rem;line-height:1.35;color:var(--ink-900)}
.term span{display:block;margin-top:.1rem;font-size:.84rem;line-height:1.45;color:var(--ink-500)}
.drawer{margin-top:1rem;border:1px solid var(--line);border-radius:16px;background:#fff}
.drawer>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;list-style:none;font-size:.92rem;font-weight:560;color:var(--ink-900)}
.drawer>summary::-webkit-details-marker{display:none}
.drawer>summary .ic{color:var(--ink-400);transition:transform .25s}
.drawer[open]>summary .ic{transform:rotate(180deg)}
.drawer__body{padding:0 1rem 1rem;font-size:.9rem;color:var(--ink-600)}
.drawer__body ol,.drawer__body ul{padding-left:1.15rem;display:grid;gap:.4rem}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.7rem;max-width:860px;margin-inline:auto}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:18px;transition:border-color .2s,box-shadow .2s}
.faq__item[open]{border-color:var(--v-200);box-shadow:var(--sh-2)}
.faq__item>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.3rem;list-style:none}
.faq__item>summary::-webkit-details-marker{display:none}
.faq__q{font-size:1.03rem;font-weight:560;line-height:1.4;letter-spacing:-.01em;color:var(--ink-900)}
.faq__icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);transition:transform .3s var(--ease),background-color .2s,border-color .2s}
.faq__icon::before{content:"";width:12px;height:12px;background:var(--ink-600);-webkit-mask:var(--icon-plus) center/contain no-repeat;mask:var(--icon-plus) center/contain no-repeat}
.faq__item[open] .faq__icon{transform:rotate(45deg);background:var(--v-100);border-color:var(--v-200)}
.faq__a{padding:0 1.3rem 1.3rem;max-width:72ch;font-size:.97rem;line-height:1.7;color:var(--ink-500)}
.faq__a>*+*{margin-top:.7rem}
.faq__a ul{padding-left:1.1rem}
.faq__a a{color:var(--v-700);text-decoration:underline;text-decoration-color:var(--v-200);text-underline-offset:3px}
.faq__a strong{color:var(--ink-800)}
.faq-more{margin-top:2rem;text-align:center;font-size:.95rem;color:var(--ink-500)}

/* ---------- CTA panel ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate;padding:clamp(2.25rem,1.4rem + 4vw,5rem);border-radius:clamp(24px,1.6rem + 1vw,38px);background:var(--ink-950);color:var(--ink-300)}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 70% at 0% 0%,rgb(var(--v5-rgb) / .36),transparent 70%),radial-gradient(40% 55% at 100% 100%,rgba(12,206,107,.1),transparent 70%)}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 100% 0%,#000,transparent 70%)}
.cta__grid{display:grid;gap:2.25rem;align-items:center}
@media (min-width:1024px){.cta__grid{grid-template-columns:1.1fr .9fr;gap:3.5rem}}
.cta h2{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.032em;color:#fff}
.cta h2 em{--hl-a:var(--hl-from-dark);--hl-b:var(--hl-to-dark)}
.cta p{margin-top:1rem;color:var(--ink-300);font-size:var(--fs-md);max-width:52ch}
.cta .audit{margin-top:0}

/* ---------- Cards ---------- */
.card{position:relative;display:flex;flex-direction:column;min-width:0;padding:1.6rem;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-1);transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
a.card:hover{border-color:var(--v-200);box-shadow:var(--sh-2);transform:translateY(-2px)}
.card__icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--v-50);border:1px solid var(--v-100);color:var(--v-600)}
.card__icon .ic{width:20px;height:20px}
.card__icon--good{background:var(--good-bg);border-color:rgba(12,206,107,.25);color:var(--good-ink)}
.card__icon--warn{background:var(--avg-bg);border-color:rgba(255,164,0,.3);color:var(--avg-ink)}
.card__kicker{font-family:var(--font-mono);font-size:.75rem;color:var(--v-600)}
.card h3{margin-top:1rem;font-size:1.15rem;letter-spacing:-.02em}
.card p{margin-top:.5rem;font-size:.94rem;line-height:1.6;color:var(--ink-500)}
.card ul{margin-top:.9rem}
.card>.link-arrow{margin-top:auto;padding-top:1.25rem}
.card--flat{background:var(--paper);box-shadow:none}
.card--dark{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08);box-shadow:none}
.card--dark h3{color:#fff}
.card--dark p{color:var(--ink-300)}
.card--dark .card__icon{background:rgb(var(--v4-rgb) / .14);border-color:rgb(var(--v4-rgb) / .25);color:var(--v-300)}

/* ---------- Pull quote ---------- */
.pull{position:relative;padding:clamp(1.75rem,1.3rem + 1.6vw,2.9rem);border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
.pull blockquote{font-family:var(--font-display);font-weight:500;font-size:clamp(1.35rem,1.1rem + 1.1vw,1.95rem);line-height:1.36;letter-spacing:-.02em;color:var(--ink-900)}
.pull figcaption{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem;font-size:.9rem;color:var(--ink-500)}
.pull figcaption strong{display:block;color:var(--ink-900)}
.avatar{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:var(--ink-900);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.03em}

/* ---------- Forms ---------- */
.form-card{padding:clamp(1.5rem,1.1rem + 1.8vw,2.4rem);background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--sh-2)}
.form-grid{display:grid;gap:1.1rem}
@media (min-width:640px){.form-grid--2{grid-template-columns:1fr 1fr}.form-grid .span-2{grid-column:1/-1}}
.field{display:grid;gap:.45rem}
.label{font-size:.875rem;font-weight:560;color:var(--ink-800)}
.label .opt{font-weight:400;color:var(--ink-400)}
.input,.textarea,.select{width:100%;min-height:50px;padding:.75rem .95rem;border:1px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink-900);font-size:1rem;line-height:1.4;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.textarea{min-height:150px;resize:vertical}
.input:hover,.textarea:hover,.select:hover{border-color:var(--ink-300)}
.input:focus,.textarea:focus,.select:focus{outline:0;border-color:var(--v-400);box-shadow:0 0 0 4px rgb(var(--v5-rgb) / .14)}
.input::placeholder,.textarea::placeholder{color:var(--ink-400)}
.input-group{position:relative}
.input-group .input{padding-right:3rem}
.input-group__btn{position:absolute;right:.4rem;top:50%;display:grid;place-items:center;width:38px;height:38px;border-radius:9px;transform:translateY(-50%);color:var(--ink-400)}
.input-group__btn:hover{color:var(--ink-800);background:var(--paper-2)}
.check{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;color:var(--ink-600);cursor:pointer}
.check input{flex:none;width:18px;height:18px;margin-top:.15rem;accent-color:var(--v-600)}
.form-note{font-size:.8125rem;line-height:1.5;color:var(--ink-500)}
.form-note a{color:var(--v-700);text-decoration:underline;text-underline-offset:2px}
.form-success{display:none;align-items:flex-start;gap:.7rem;padding:1rem 1.1rem;border-radius:14px;background:var(--good-bg);border:1px solid rgba(12,206,107,.35);color:var(--ink-800);font-size:.93rem}
.form-success .ic{margin-top:.15rem;color:var(--good-ink)}
.is-sent .form-success{display:flex}
.is-sent .form-body{display:none}

/* ---------- Callouts ---------- */
.callout{display:flex;align-items:flex-start;gap:.8rem;padding:1rem 1.15rem;border-radius:16px;border:1px solid var(--v-200);background:var(--v-50);font-size:.95rem;line-height:1.6;color:var(--ink-700)}
.callout>.ic{width:20px;height:20px;margin-top:.12rem;color:var(--v-600)}
.callout strong{color:var(--ink-900)}
.callout a{color:var(--v-700);text-decoration:underline;text-underline-offset:2px}
.callout--good{border-color:rgba(12,206,107,.35);background:var(--good-bg)}
.callout--good>.ic{color:var(--good-ink)}
.callout--warn{border-color:rgba(255,164,0,.4);background:var(--avg-bg)}
.callout--warn>.ic{color:var(--avg-ink)}

/* ---------- Code block ---------- */
.code{position:relative;overflow:hidden;border-radius:18px;background:#130F20;border:1px solid rgba(255,255,255,.06);box-shadow:var(--sh-2);color:#E6E1F2}
.code__bar{display:flex;align-items:center;gap:.75rem;padding:.62rem 1rem;border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:.72rem;color:#8E88A3}
.code__bar .dots i{background:rgba(255,255,255,.14)}
.code pre{margin:0;padding:1.05rem 1.2rem;overflow-x:auto;font-size:.84rem;line-height:1.75;tab-size:2}
.code code{font-family:var(--font-mono)}
.t-k{color:#C3A8FF}.t-s{color:#86E3AE}.t-c{color:#716A89}.t-n{color:#FFC978}.t-p{color:#FF9BB0}.t-f{color:#7FD3FF}
.copy{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .55rem;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#C9C3DA;font-family:var(--font-sans);font-size:.72rem;font-weight:500;transition:background-color .15s,color .15s,border-color .15s}
.copy:hover{background:rgba(255,255,255,.09);color:#fff}
.copy.is-copied{color:#86E3AE;border-color:rgba(12,206,107,.35)}
.copy .ic{width:13px;height:13px}
@media (min-width:1100px){.steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.steps--4 .step h3{font-size:1.18rem}

/* ---------- Before/after storefront card (home hero visual) ---------- */
.ba{position:relative;display:grid;gap:.8rem;padding:clamp(1.1rem,1rem + .6vw,1.5rem);background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-3)}
.ba__badge{position:absolute;top:-1.1rem;right:-.75rem;z-index:2;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:var(--r-pill);background:var(--v-600);color:#fff;font-size:.875rem;font-weight:650;letter-spacing:.01em;box-shadow:0 12px 28px -10px rgb(var(--v6-rgb) / .55);transform:rotate(6deg)}
.ba__badge .ic{width:1em;height:1em;color:#FFD54A}
.ba__label{margin-bottom:.45rem;font-size:.7rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-500)}
.ba__frame{margin:0}
.ba__win{padding:.9rem 1rem 1rem;border:1.5px dashed var(--line-2);border-radius:16px;background:var(--paper-2)}
.ba__frame--after .ba__win{border-color:var(--v-300);background:var(--v-50)}
.ba__win .dots{display:flex;gap:5px;margin-bottom:.75rem}
.ba__win .dots i{width:8px;height:8px;border-radius:50%}
.ba__win .dots i:nth-child(1){background:var(--poor)}
.ba__win .dots i:nth-child(2){background:var(--avg)}
.ba__win .dots i:nth-child(3){background:var(--v-400)}
.ba__line{display:block;height:10px;border-radius:6px;background:var(--ink-200)}
.ba__line+.ba__line{margin-top:.55rem}
.ba__line--lg{width:86%}
.ba__line--md{width:58%}
.ba__line--sm{width:72%}
.ba__frame--after .ba__line{background:var(--v-400)}
.ba__frame--after .ba__line:nth-of-type(2){background:var(--v-300)}
.ba__frame--after .ba__line:nth-of-type(3){background:var(--v-500)}
.wjs [data-reveal] .ba__frame--after .ba__line{width:18%;transition:width .9s var(--ease-out)}
.wjs .is-in .ba__frame--after .ba__line--lg,[data-reveal].is-in .ba__frame--after .ba__line--lg{width:86%;transition-delay:.15s}
.wjs .is-in .ba__frame--after .ba__line--md,[data-reveal].is-in .ba__frame--after .ba__line--md{width:58%;transition-delay:.3s}
.wjs .is-in .ba__frame--after .ba__line--sm,[data-reveal].is-in .ba__frame--after .ba__line--sm{width:72%;transition-delay:.45s}
.ba__chip{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;font-size:.8125rem;font-weight:560;color:var(--ink-500)}
.ba__chip b{display:inline-grid;place-items:center;min-width:30px;padding:.2rem .4rem;border-radius:8px;font-family:var(--font-mono);font-size:.8rem;font-weight:650}
.ba__chip--bad b{background:var(--poor-bg);color:var(--poor-ink)}
.ba__chip--good{color:var(--v-700)}
.ba__chip--good b{background:var(--good-bg);color:var(--good-ink)}
.ba__chip--good .ic{color:var(--avg)}
.ba__arrow{display:grid;place-items:center;justify-self:center;width:42px;height:42px;margin:-.15rem 0;border-radius:50%;background:var(--v-600);color:#fff;box-shadow:0 10px 24px -8px rgb(var(--v6-rgb) / .6)}
.ba__arrow .ic{width:19px;height:19px}
@media (prefers-reduced-motion:reduce){.wjs [data-reveal] .ba__frame--after .ba__line{transition:none}.ba__frame--after .ba__line--lg{width:86%}.ba__frame--after .ba__line--md{width:58%}.ba__frame--after .ba__line--sm{width:72%}}

/* ---------- Accent-aware SVG fills (markup carries design defaults) ---------- */
.seal circle{stroke:var(--v-200)}
.seal circle+circle{fill:var(--v-50)}
.spark stop{stop-color:var(--v-400)}

/* ---- 03-pages.css ---- */
/* ==========================================================
   WOOHL — design system · page layouts
   ========================================================== */

/* ---------- Inner page hero ---------- */
.page-hero{position:relative;overflow:hidden;padding:clamp(2rem,1.4rem + 2.8vw,3.75rem) 0 clamp(2.5rem,1.8rem + 2.6vw,4rem)}
.page-hero__inner{position:relative;z-index:1}
.page-hero .crumbs{margin-bottom:1.6rem}
.page-hero h1{margin-top:1.1rem;max-width:19ch;font-size:clamp(2.4rem,1.45rem + 3.8vw,4.5rem);line-height:1.05;letter-spacing:-.036em}
.page-hero .lead{margin-top:1.3rem}
.page-hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.page-hero--center{text-align:center}
.page-hero--center h1,.page-hero--center .lead{margin-inline:auto}
.page-hero--center .crumbs ol,.page-hero--center .page-hero__actions{justify-content:center}
.page-hero--line{border-bottom:1px solid var(--line)}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:.9rem;margin-top:2.6rem}
.hero-stat{padding:1.1rem 1.25rem;border-radius:18px;background:rgba(255,255,255,.8);border:1px solid var(--line);box-shadow:var(--sh-1);text-align:left}
.hero-stat b{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;font-family:var(--font-mono);font-size:clamp(1.15rem,1rem + .6vw,1.45rem);font-weight:560;letter-spacing:-.035em;color:var(--ink-900)}
.hero-stat b s{color:var(--ink-400);font-weight:400;text-decoration-thickness:1px}
.hero-stat b .ic{width:.8em;height:.8em;color:var(--ink-400)}
.hero-stat span{display:block;margin-top:.3rem;font-size:.8125rem;color:var(--ink-500)}

/* ---------- Prose (articles, docs, legal) ---------- */
.prose{font-size:1.0625rem;line-height:1.78;color:var(--ink-600)}
.prose>*+*{margin-top:1.15em}
.prose h2{margin-top:2.4em;font-size:clamp(1.55rem,1.25rem + 1.2vw,2.1rem);line-height:1.18;letter-spacing:-.025em;scroll-margin-top:calc(var(--header-h) + 24px)}
.prose h3{margin-top:1.9em;font-size:clamp(1.2rem,1.1rem + .4vw,1.38rem);line-height:1.3;letter-spacing:-.02em;scroll-margin-top:calc(var(--header-h) + 24px)}
.prose h4{margin-top:1.6em;font-size:1.05rem}
.prose h2+*,.prose h3+*,.prose h4+*{margin-top:.7em}
.prose>h2:first-child,.prose>h3:first-child{margin-top:0}
.prose a:not(.btn):not(.link-arrow):not(.card){color:var(--v-700);text-decoration:underline;text-decoration-color:var(--v-200);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .15s}
.prose a:not(.btn):not(.link-arrow):not(.card):hover{text-decoration-color:var(--v-600)}
.prose strong{color:var(--ink-900);font-weight:600}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--v-500)}
.prose ol li::marker{font-family:var(--font-mono);font-size:.9em}
.prose code{padding:.12em .38em;border-radius:6px;background:var(--paper-2);border:1px solid var(--line);font-size:.86em;color:var(--ink-800);word-break:break-word}
.prose .code code{padding:0;border:0;background:none;color:inherit;font-size:inherit}
.prose blockquote{margin-block:1.8em;padding:.2em 0 .2em 1.3rem;border-left:3px solid var(--v-400);font-family:var(--font-display);font-weight:500;font-size:1.22rem;line-height:1.5;letter-spacing:-.01em;color:var(--ink-800)}
.prose blockquote p{text-wrap:balance}
.prose figure{margin-block:2em}
.prose figcaption{margin-top:.8rem;font-size:.84rem;line-height:1.5;color:var(--ink-500);text-align:center}
.prose hr{margin-block:2.5em}
.prose .table-wrap{margin-block:1.6em}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--sh-1)}
.table-wrap table{min-width:560px;font-size:.93rem;line-height:1.55}
.table-wrap th,.table-wrap td{padding:.8rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.table-wrap tr:last-child>*{border-bottom:0}
.table-wrap thead th{background:var(--paper);font-size:.8rem;font-weight:600;color:var(--ink-800);letter-spacing:.01em}
.table-wrap tbody th{font-weight:560;color:var(--ink-900)}
.table-wrap td code,.table-wrap th code{white-space:nowrap}
/* Bare tables in post content: woohl.js wraps them in .table-wrap for
   horizontal scroll; these rules carry the design either way. */
.prose table{width:100%;margin-block:1.6em;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--sh-1);font-size:.93rem;line-height:1.55}
.prose table th,.prose table td{padding:.8rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.prose table tr:last-child>*{border-bottom:0}
.prose table thead th{background:var(--paper);font-size:.8rem;font-weight:600;color:var(--ink-800);letter-spacing:.01em}
.prose table tbody th{font-weight:560;color:var(--ink-900)}
.prose .table-wrap table{margin-block:0;border:0;border-radius:0;box-shadow:none}
.prose .callout,.prose .code,.prose .card,.prose .cta-inline{margin-block:1.7em}
.lede{font-size:1.2rem;line-height:1.65;color:var(--ink-700)}
.definition{margin-block:1.6em;padding:1.35rem 1.5rem;border-radius:18px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--v-600);box-shadow:var(--sh-1);color:var(--ink-700)}
.definition strong:first-child{display:block;margin-bottom:.35rem;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--v-700)}
.cta-inline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.4rem;border-radius:18px;background:var(--ink-950);color:var(--ink-300)}
.cta-inline strong{display:block;color:#fff;font-size:1.02rem}
.cta-inline span{font-size:.9rem}
.cta-inline .btn{flex:none}
.keylist{list-style:none!important;padding:0!important;display:grid;gap:.8rem}
.keylist li{position:relative;margin:0!important;padding:1rem 1.1rem 1rem 3.2rem;border-radius:14px;background:#fff;border:1px solid var(--line)}
.keylist li::before{content:"";position:absolute;left:1rem;top:1.05rem;width:22px;height:22px;border-radius:7px;background:var(--v-600)}
.keylist li::after{content:"";position:absolute;left:1.25rem;top:1.3rem;width:12px;height:12px;background:#fff;-webkit-mask:var(--icon-check) center/contain no-repeat;mask:var(--icon-check) center/contain no-repeat}
.keylist li strong{display:block}

/* ---------- Table of contents ---------- */
.toc__title{margin-bottom:.8rem;font-size:.72rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400)}
.toc ol{list-style:none;display:grid;border-left:1px solid var(--line)}
.toc a{display:block;margin-left:-1px;padding:.36rem 0 .36rem 1rem;border-left:2px solid transparent;font-size:.86rem;line-height:1.4;color:var(--ink-500);transition:color .15s,border-color .15s}
.toc a:hover{color:var(--ink-900)}
.toc a.is-active{color:var(--v-700);border-left-color:var(--v-600);font-weight:560}
.toc-mobile{margin-bottom:2rem;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--sh-1)}
.toc-mobile>summary{display:flex;align-items:center;justify-content:space-between;padding:.95rem 1.1rem;list-style:none;font-weight:560;color:var(--ink-900)}
.toc-mobile>summary::-webkit-details-marker{display:none}
.toc-mobile>summary .ic{color:var(--ink-400);transition:transform .25s}
.toc-mobile[open]>summary .ic{transform:rotate(180deg)}
.toc-mobile .toc{padding:0 1.1rem 1rem}

/* ---------- Article (pillar guide, blog posts) ---------- */
.article-hero{position:relative;overflow:hidden;padding:clamp(2rem,1.4rem + 2.8vw,3.75rem) 0 clamp(2.25rem,1.6rem + 2.4vw,3.5rem)}
.article-hero__inner{position:relative;z-index:1;max-width:900px}
.article-hero .crumbs{margin-bottom:1.5rem}
.article-hero h1{margin-top:1rem;font-size:clamp(2.3rem,1.45rem + 3.5vw,4.1rem);line-height:1.07;letter-spacing:-.034em}
.article-hero .lead{margin-top:1.25rem;max-width:64ch}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;margin-top:1.8rem;font-size:.875rem;color:var(--ink-500)}
.byline__who{display:flex;align-items:center;gap:.7rem}
.byline__who .avatar{width:40px;height:40px;background:var(--v-600)}
.byline strong{display:block;color:var(--ink-900);font-weight:600}
.byline__item{display:inline-flex;align-items:center;gap:.4rem}
.byline__item .ic{color:var(--ink-400)}
.article-layout{display:grid;gap:2.5rem;padding-bottom:var(--section)}
@media (min-width:1100px){.article-layout{grid-template-columns:250px minmax(0,1fr);gap:4.5rem}}
.article-aside{display:none}
@media (min-width:1100px){.article-aside{display:block}.toc-mobile{display:none}}
.article-aside__sticky{position:sticky;top:calc(var(--header-h) + 1.75rem);display:grid;gap:1.5rem}
.article-body{min-width:0;max-width:760px}
.takeaways{padding:1.4rem 1.5rem;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.takeaways__title{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--v-700)}
.takeaways ul{margin-top:.9rem!important}
.aside-card{padding:1.25rem;border-radius:18px;background:var(--ink-950);color:var(--ink-300);font-size:.875rem;line-height:1.5}
.aside-card strong{display:block;margin-bottom:.35rem;color:#fff;font-size:.95rem}
.aside-card .btn{margin-top:1rem}
.article-foot{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.author-card{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem 1.4rem;border-radius:18px;background:var(--paper-2);border:1px solid var(--line)}
.author-card .avatar{background:var(--v-600)}
.author-card strong{display:block;color:var(--ink-900)}
.author-card p{margin-top:.3rem;font-size:.9rem;color:var(--ink-500)}
/* Cards nested in post content (related posts) keep component type, not prose type */
.prose .card h3{margin-top:1rem;font-size:1.15rem;line-height:1.35}
.prose .card p{margin-top:.5rem;font-size:.94rem;line-height:1.6}
.related{display:grid;gap:1rem;margin-top:1.5rem}
@media (min-width:760px){.related{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Docs ---------- */
.docs{display:grid;gap:2rem;align-items:start;padding-block:clamp(1.5rem,1rem + 2vw,3rem) var(--section)}
@media (min-width:1024px){.docs{grid-template-columns:230px minmax(0,1fr);gap:3rem}}
.docs-nav__inner{position:sticky;top:calc(var(--header-h) + 1.5rem);max-height:calc(100vh - var(--header-h) - 3rem);overflow:auto;padding-right:.25rem}
.docs-nav__group+.docs-nav__group{margin-top:1.5rem}
.docs-nav__title{margin-bottom:.45rem;padding-left:.75rem;font-size:.7rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400)}
.docs-nav ul{list-style:none;display:grid;gap:1px}
.docs-nav a{display:flex;align-items:center;gap:.55rem;padding:.45rem .75rem;border-radius:9px;font-size:.9rem;color:var(--ink-600);transition:background-color .15s,color .15s}
.docs-nav a .ic{width:1em;height:1em;color:var(--ink-400)}
.docs-nav a:hover{background:#fff;color:var(--ink-900)}
.docs-nav a.is-active{background:var(--v-50);color:var(--v-700);font-weight:560}
.docs-nav a.is-active .ic{color:var(--v-600)}
@media (max-width:1023px){.docs-nav{display:none}}
.docs-toc{display:none}
@media (min-width:1320px){.docs-toc{display:block}.docs-toc .toc{position:sticky;top:calc(var(--header-h) + 1.5rem)}}
.docs-main{min-width:0;max-width:800px}
.docs-main .toc-mobile{display:block}
@media (min-width:1024px){.docs-main .toc-mobile{display:none}}
.doc-section{scroll-margin-top:calc(var(--header-h) + 24px)}
.doc-section+.doc-section{margin-top:clamp(2.75rem,2.2rem + 2vw,4rem);padding-top:clamp(2.75rem,2.2rem + 2vw,4rem);border-top:1px solid var(--line)}
.doc-section__kicker{font-family:var(--font-mono);font-size:.75rem;color:var(--v-600)}
.doc-steps{list-style:none!important;padding:0!important;counter-reset:ds;display:grid;gap:.7rem}
.doc-steps>li{position:relative;margin:0!important;padding:1rem 1.1rem 1rem 3.5rem;border-radius:14px;background:#fff;border:1px solid var(--line);counter-increment:ds}
.doc-steps>li::before{content:counter(ds);position:absolute;left:1rem;top:1rem;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--ink-900);color:#fff;font-family:var(--font-mono);font-size:.78rem;font-weight:560}
.doc-steps>li strong{color:var(--ink-900)}
.domain-map{display:grid;gap:1rem;margin-block:1.6em}
@media (min-width:720px){.domain-map{grid-template-columns:1fr 1fr}}
.domain-card{padding:1.25rem 1.35rem;border-radius:18px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1)}
.domain-card--head{border-color:var(--v-300);background:linear-gradient(180deg,var(--v-50),#fff)}
.domain-card__host{font-family:var(--font-mono);font-size:1rem;font-weight:560;color:var(--ink-900)}
.domain-card__who{display:inline-flex;margin-top:.5rem}
.domain-card ul{margin-top:.8rem!important;font-size:.92rem}

/* ---------- Blog ---------- */
.blog-feature{display:grid;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--sh-2);transition:box-shadow .3s,border-color .3s}
.blog-feature:hover{box-shadow:var(--sh-3);border-color:var(--v-200)}
@media (min-width:960px){.blog-feature{grid-template-columns:1.05fr .95fr}}
.blog-feature__body{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.6rem,1.2rem + 1.8vw,2.8rem)}
.blog-feature h2{margin-top:.9rem;font-size:clamp(1.6rem,1.25rem + 1.3vw,2.3rem);line-height:1.14;letter-spacing:-.028em}
.blog-feature p{margin-top:.9rem;color:var(--ink-500)}
.post-grid{display:grid;gap:1.25rem}
@media (min-width:720px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.post-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.post-card{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-1);transition:box-shadow .3s,border-color .3s,transform .3s var(--ease)}
.post-card:hover{box-shadow:var(--sh-2);border-color:var(--v-200);transform:translateY(-3px)}
.post-card__body{display:flex;flex-direction:column;flex:1;padding:1.35rem 1.4rem 1.4rem}
.post-card h3{margin-top:.7rem;font-size:1.13rem;line-height:1.3;letter-spacing:-.018em}
.post-card p{margin-top:.55rem;font-size:.92rem;line-height:1.55;color:var(--ink-500)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;font-size:.8rem;color:var(--ink-400)}
.post-card .post-meta{margin-top:auto;padding-top:1.1rem}
.cat{font-size:.7rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--v-700)}
.cat--perf{color:var(--good-ink)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2.5rem}
.filters a{padding:.5rem .95rem;border-radius:var(--r-pill);border:1px solid var(--line-2);background:#fff;font-size:.875rem;font-weight:560;color:var(--ink-600);transition:all .15s}
.filters a:hover{border-color:var(--v-300);color:var(--v-700)}
.filters a[aria-current]{background:var(--ink-900);border-color:var(--ink-900);color:#fff}

/* Generated cover art (no images needed) */
.cover{position:relative;overflow:hidden;isolation:isolate;display:grid;place-items:center;aspect-ratio:16/9;padding:1.5rem;background:var(--ink-950);color:#fff}
.blog-feature .cover{aspect-ratio:auto;min-height:280px}
.cover::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px}
.cover__word{position:relative;font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,1rem + 1.6vw,2.2rem);line-height:1.06;letter-spacing:-.035em;text-align:center}
.cover__word em{display:block;width:fit-content;margin:0 auto -.18em;padding:0 .06em .18em;font-style:normal;font-weight:500;--hl-a:var(--hl-from-dark);--hl-b:var(--hl-to-dark);background-image:linear-gradient(90deg,var(--hl-a,var(--hl-from)),var(--hl-b,var(--hl-to)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cover__mono{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.cover--violet{background:radial-gradient(90% 90% at 0% 0%,var(--v-500),var(--v-800) 70%)}
.cover--violet .cover__word em{--hl-a:#fff;--hl-b:var(--v-200)}
.cover--paper{background:linear-gradient(135deg,var(--paper-3),#fff);color:var(--ink-900)}
.cover--paper::after{background-image:linear-gradient(to right,rgb(var(--v6-rgb) / .07) 1px,transparent 1px),linear-gradient(to bottom,rgb(var(--v6-rgb) / .07) 1px,transparent 1px)}
.cover--paper .cover__word em{--hl-a:var(--hl-from);--hl-b:var(--hl-to)}
.cover--paper .cover__mono{color:var(--ink-400)}
.cover--green{background:radial-gradient(80% 80% at 100% 0%,#0E7A4A,#062C1D 75%)}
.cover--green .cover__word em{--hl-a:#8FF0BE;--hl-b:color-mix(in srgb,#8FF0BE 55%,#fff)}
.cover__stack{display:grid;justify-items:center;gap:.8rem}
.cover__gauges{display:flex;gap:1rem}
.cover .gauge{--size:74px}
.cover .gauge__num{font-size:1.2rem}

/* ---------- DIY page: iceberg + calculator ---------- */
.iceberg{position:relative;overflow:hidden;border-radius:32px;border:1px solid var(--line);box-shadow:var(--sh-2)}
.iceberg__tip{position:relative;display:grid;justify-items:center;gap:1rem;padding:clamp(2rem,1.5rem + 2vw,3rem) 1.5rem 3.4rem;background:#fff;text-align:center}
.iceberg__tip .card{max-width:560px;text-align:left}
.iceberg__line{position:relative;z-index:3;height:0;border-top:2px dashed rgb(var(--v6-rgb) / .45)}
.iceberg__line span{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);padding:.35rem .8rem;border-radius:var(--r-pill);background:var(--v-600);color:#fff;font-size:.74rem;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.iceberg__depths{position:relative;isolation:isolate;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;padding:clamp(2.5rem,2rem + 2vw,3.5rem) clamp(1rem,.5rem + 2vw,2.25rem) clamp(1.5rem,1rem + 2vw,2.5rem);background:linear-gradient(180deg,#EFE8FD 0%,#DDD0F8 45%,#C5B0F1 100%)}
.iceberg__mass{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:.55}
.iceberg__depths>:not(.iceberg__mass){flex:1 1 300px;min-width:0}
@media (min-width:1000px){.iceberg__depths>:not(.iceberg__mass){flex:0 1 calc((100% - 2rem) / 3)}}
.berg-card{display:flex;flex-direction:column;padding:1.35rem 1.4rem;border-radius:20px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95);box-shadow:0 10px 30px -18px rgba(46,21,112,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.berg-card__num{font-family:var(--font-mono);font-size:.75rem;color:var(--v-600)}
.berg-card h3{margin-top:.5rem;font-size:1.13rem;letter-spacing:-.02em}
.berg-card p{margin-top:.45rem;font-size:.92rem;color:var(--ink-500)}
.berg-card ul{list-style:none;display:grid;gap:.35rem;margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--line-2)}
.berg-card li{position:relative;padding-left:1.1rem;font-family:var(--font-mono);font-size:.75rem;line-height:1.5;color:var(--ink-600)}
.berg-card li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:2px;background:var(--v-400)}

.calc{display:grid;gap:1.25rem}
@media (min-width:960px){.calc{grid-template-columns:1fr 1fr}}
.calc__panel{padding:clamp(1.4rem,1.1rem + 1.4vw,2.2rem);border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
.calc__panel h3{font-size:1.15rem}
.calc__panel>p{margin-top:.35rem;font-size:.9rem;color:var(--ink-500)}
.range{display:grid;gap:.55rem;margin-top:1.4rem}
.range__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.92rem;color:var(--ink-700)}
.range__head output{font-family:var(--font-mono);font-weight:560;color:var(--ink-900)}
.range input[type="range"]{width:100%;accent-color:var(--v-600);cursor:pointer}
.range__scale{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.68rem;color:var(--ink-400)}
.calc__result{display:flex;flex-direction:column;position:relative;overflow:hidden;isolation:isolate;padding:clamp(1.4rem,1.1rem + 1.4vw,2.2rem);border-radius:26px;background:var(--ink-950);color:var(--ink-300)}
.calc__result::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 100% 0%,rgb(var(--v5-rgb) / .3),transparent 70%)}
.calc__result h3{color:#fff;font-size:1.15rem}
.bars{display:grid;gap:1.3rem;margin-top:1.6rem}
.bar-row__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.5rem;font-size:.9rem}
.bar-row__head b{font-family:var(--font-mono);font-size:1.05rem;font-weight:560;color:#fff}
.bar{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;width:var(--w,50%);border-radius:inherit;background:linear-gradient(90deg,#FF6B5C,var(--poor));transition:width .6s var(--ease-out)}
.bar--us i{background:linear-gradient(90deg,var(--v-500),var(--good))}
.calc__verdict{margin-top:auto;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.08)}
.calc__big{display:block;margin-top:.3rem;font-size:clamp(2.1rem,1.5rem + 2.4vw,3.3rem);font-weight:620;letter-spacing:-.055em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.calc__big small{font-size:.42em;letter-spacing:-.01em;color:#7EE8AE;font-weight:560}
.calc__fine{margin-top:.9rem;font-size:.78rem;color:var(--ink-400)}

.choose{display:grid;gap:1.25rem}
@media (min-width:900px){.choose{grid-template-columns:1fr 1fr}}
.choose__card{padding:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);border-radius:26px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1)}
.choose__card--us{border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(150deg,var(--v-400),var(--v-600) 45%,rgba(12,206,107,.55)) border-box;box-shadow:var(--sh-glow)}
.choose__card h3{font-size:1.3rem}
.honest{display:flex;gap:1rem;align-items:flex-start;margin-top:1.25rem;padding:1.25rem 1.4rem;border-radius:20px;background:var(--paper-2);border:1px solid var(--line);font-size:.97rem;color:var(--ink-700)}
.honest>.ic{width:22px;height:22px;margin-top:.1rem;color:var(--v-600)}

/* ---------- Load race (filmstrip) ---------- */
.race{display:grid;gap:1.4rem;max-width:1240px;margin-inline:auto}
.race__row{display:grid;gap:.8rem;align-items:center}
@media (min-width:900px){.race__row{grid-template-columns:190px minmax(0,1fr);gap:1.5rem}}
.race__who strong{display:block;font-size:.98rem;color:#fff}
.race__who span{display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem;font-family:var(--font-mono);font-size:.78rem}
.race__who .bad{color:#FF9A90}
.race__who .good{color:#7EE8AE}
.frames{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.35rem,.2rem + .6vw,.75rem)}
.frame{position:relative;display:flex;flex-direction:column;gap:7%;aspect-ratio:9/16;padding:9% 9%;overflow:hidden;border-radius:clamp(8px,.4rem + .4vw,14px);background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.frame>i{display:block;border-radius:3px;background:var(--ink-100);opacity:0;transition:opacity .4s}
.frame .f-bar{height:7%;background:var(--ink-900)}
.frame .f-hero{height:30%;border-radius:5px}
.frame .f-line{height:4%;width:80%}
.frame .f-line--s{width:55%}
.frame .f-grid{flex:1;background:none;display:grid;grid-template-columns:1fr 1fr;gap:6%}
.frame .f-grid b{border-radius:4px;background:var(--ink-100)}
.frame[data-s="1"] .f-bar,.frame[data-s="2"] .f-bar,.frame[data-s="3"] .f-bar,.frame[data-s="4"] .f-bar{opacity:1}
.frame[data-s="2"] .f-line,.frame[data-s="3"] .f-line,.frame[data-s="4"] .f-line{opacity:1}
.frame[data-s="3"] .f-hero,.frame[data-s="3"] .f-grid,.frame[data-s="4"] .f-hero,.frame[data-s="4"] .f-grid{opacity:1}
.frame[data-s="4"] .f-hero{background:linear-gradient(135deg,var(--v-300),var(--v-500))}
.frame[data-s="4"] .f-grid b:nth-child(1){background:#C9E9D6}.frame[data-s="4"] .f-grid b:nth-child(2){background:#F2DDC4}.frame[data-s="4"] .f-grid b:nth-child(3){background:#D9CCF7}.frame[data-s="4"] .f-grid b:nth-child(4){background:#F4CFD6}
.frame--done::after{content:"";position:absolute;right:6%;bottom:5%;width:18%;aspect-ratio:1;border-radius:50%;background:var(--good) center/60% no-repeat;box-shadow:0 0 0 3px rgba(12,206,107,.25)}
.race__times{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.35rem,.2rem + .6vw,.75rem);font-family:var(--font-mono);font-size:.72rem;color:var(--ink-400);text-align:center}
@media (min-width:900px){.race__times{margin-left:calc(190px + 1.5rem)}}
.race__caption{margin-top:1.25rem;font-size:.8rem;color:var(--ink-400);text-align:center}

/* ---------- Case study ---------- */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:2.2rem;overflow:hidden;background:var(--line);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-1)}
@media (min-width:900px){.facts{grid-template-columns:1.3fr 1.4fr 1.1fr .8fr}}
.fact{padding:1rem 1.25rem;background:#fff}
.fact dt{font-size:.68rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400)}
.fact dd{margin-top:.3rem;font-size:.95rem;font-weight:560;line-height:1.4;color:var(--ink-900)}
.fact dd a{color:var(--v-700)}
.versus{display:grid;gap:1rem;align-items:stretch}
@media (min-width:900px){.versus{grid-template-columns:1fr auto 1fr}}
.versus__card{display:grid;justify-items:center;gap:.6rem;padding:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);border-radius:28px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1);text-align:center}
.versus__card--after{border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(150deg,var(--v-400),var(--v-600) 45%,rgba(12,206,107,.6)) border-box;box-shadow:var(--sh-glow)}
.versus__tag{padding:.28rem .7rem;border-radius:var(--r-pill);background:var(--paper-2);border:1px solid var(--line);font-size:.68rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-500)}
.versus__card--after .versus__tag{background:var(--v-600);border-color:var(--v-600);color:#fff}
.versus__card h3{margin-top:.4rem;font-size:1.15rem}
.versus__card p{font-size:.88rem;color:var(--ink-500)}
.versus__desk{font-family:var(--font-mono);font-size:.85rem;color:var(--ink-700)}
.versus__mid{display:grid;place-items:center}
.delta{display:grid;place-items:center;gap:.2rem;width:108px;height:108px;border-radius:50%;background:var(--good-bg);border:1px solid rgba(12,206,107,.35);color:var(--good-ink);text-align:center}
.delta b{font-family:var(--font-mono);font-size:1.9rem;font-weight:600;letter-spacing:-.05em;line-height:1}
.delta span{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.spec{display:grid;overflow:hidden;border-radius:24px;border:1px solid rgba(255,255,255,.08)}
.spec>div{display:grid;gap:.25rem;padding:1rem 1.35rem;border-bottom:1px solid rgba(255,255,255,.07)}
.spec>div:last-child{border-bottom:0}
@media (min-width:720px){.spec>div{grid-template-columns:150px 1fr;gap:1.5rem}}
.spec dt{font-family:var(--font-mono);font-size:.78rem;color:var(--v-300)}
.spec dd{font-size:.95rem;line-height:1.55;color:var(--ink-200)}
.spec dd code{font-size:.85em;color:#fff}

/* ---------- Speed audit ---------- */
.audit-card{position:relative;padding:clamp(1.4rem,1.1rem + 1.5vw,2.25rem);border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-3)}
.audit-form{display:grid;gap:.75rem}
@media (min-width:760px){.audit-form{grid-template-columns:1.2fr 1fr auto;align-items:end}}
.audit-form .btn{height:52px}
.audit-card .input{min-height:52px}
.trustline{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:1rem;font-size:.8125rem;color:var(--ink-500)}
.trustline li{display:inline-flex;align-items:center;gap:.4rem}
.trustline .ic{color:var(--good-ink)}
.audit-run{display:none;margin-top:1.5rem;padding-top:1.5rem;border-top:1px dashed var(--line-2)}
.is-running .audit-run,.is-done .audit-run{display:block}
.run-steps{list-style:none;display:grid;gap:.55rem}
.run-steps li{position:relative;display:flex;align-items:center;gap:.75rem;font-size:.92rem;color:var(--ink-400);transition:color .2s}
.run-steps li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2)}
.run-steps li.is-active{color:var(--ink-900)}
.run-steps li.is-active::before{border-color:var(--v-200);border-top-color:var(--v-600);animation:spin .8s linear infinite}
.run-steps li.is-done{color:var(--ink-600)}
.run-steps li.is-done::before{border-color:var(--good);background:var(--good)}
.run-steps li.is-done::after{content:"";position:absolute;left:4px;top:50%;width:10px;height:10px;margin-top:-5px;background:#fff;-webkit-mask:var(--icon-check) center/contain no-repeat;mask:var(--icon-check) center/contain no-repeat}
.run-note{margin-top:1rem;font-size:.8125rem;color:var(--ink-500)}
.result{display:grid;gap:1rem;align-items:stretch}
@media (min-width:960px){.result{grid-template-columns:1fr auto 1fr}}
.result__panel{display:grid;justify-items:center;gap:.7rem;padding:clamp(1.4rem,1.1rem + 1.2vw,2rem);border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);text-align:center}
.result__panel--us{border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(150deg,var(--v-400),var(--v-600) 45%,rgba(12,206,107,.6)) border-box;box-shadow:var(--sh-glow)}
.result__badge{padding:.28rem .7rem;border-radius:var(--r-pill);background:var(--paper-2);border:1px solid var(--line);font-size:.68rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-500)}
.result__panel--us .result__badge{background:var(--good-bg);border-color:rgba(12,206,107,.35);color:var(--good-ink)}
.result__panel h3{font-size:1.25rem}
.result__panel p{font-size:.88rem;color:var(--ink-500)}
.result__pill{padding:.35rem .75rem;border-radius:var(--r-pill);font-size:.8rem;font-weight:560}
.result__pill--avg{background:var(--avg-bg);color:var(--avg-ink)}
.result__pill--poor{background:var(--poor-bg);color:var(--poor-ink)}
.result__pill--good{background:var(--good-bg);color:var(--good-ink)}
.result__pill--us{background:var(--v-50);color:var(--v-700);border:1px solid var(--v-200)}
.result__mid{display:grid;place-items:center;gap:.4rem;text-align:center;font-family:var(--font-mono);font-size:.8rem;color:var(--good-ink)}
.result__mid b{font-size:1.6rem;letter-spacing:-.04em}
.sample-flag{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .75rem;border-radius:var(--r-pill);background:var(--avg-bg);border:1px solid rgba(255,164,0,.35);color:var(--avg-ink);font-size:.78rem;font-weight:560}
.sample-flag--live{background:var(--good-bg);border-color:rgba(12,206,107,.35);color:var(--good-ink)}
.cwv td b{font-family:var(--font-mono);font-weight:560}
.cwv .v-good{color:var(--good-ink)}.cwv .v-avg{color:var(--avg-ink)}.cwv .v-poor{color:var(--poor-ink)}
.cwv td small{display:block;margin-top:.15rem;font-size:.78rem;color:var(--ink-400)}
.diag{list-style:none;display:grid;gap:.6rem}
.diag li{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:start;padding:1rem 1.1rem;border-radius:16px;background:#fff;border:1px solid var(--line)}
.diag__n{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--poor-bg);color:var(--poor-ink);font-family:var(--font-mono);font-size:.78rem;font-weight:600}
.diag strong{display:block;color:var(--ink-900);font-size:.95rem}
.diag li>div>span{display:block;margin-top:.15rem;font-size:.86rem;color:var(--ink-500)}
.diag__cost{font-family:var(--font-mono);font-size:.8rem;color:var(--poor-ink);white-space:nowrap}
.revenue{display:grid;gap:1.25rem;align-items:center;padding:clamp(1.4rem,1.1rem + 1.2vw,2rem);border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
@media (min-width:900px){.revenue{grid-template-columns:1.1fr .9fr}}
.revenue__out{padding:1.4rem;border-radius:18px;background:var(--poor-bg);border:1px solid rgba(255,78,66,.2);text-align:center}
.revenue__out b{display:block;font-family:var(--font-mono);font-size:clamp(1.8rem,1.4rem + 1.4vw,2.4rem);font-weight:600;letter-spacing:-.04em;color:var(--poor-ink)}
.revenue__out span{font-size:.84rem;color:var(--ink-600)}
.fineprint{padding:1.1rem 1.25rem;border-radius:16px;background:var(--paper-2);border:1px solid var(--line);font-size:.82rem;line-height:1.6;color:var(--ink-500)}
.fineprint strong{color:var(--ink-800)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;gap:2.5rem;align-items:start}
@media (min-width:1024px){.contact-grid{grid-template-columns:.9fr 1.1fr;gap:4.5rem}}
.channels{list-style:none;display:grid}
.channel{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.channel:first-child{padding-top:0}
.channel h3{font-size:1.05rem}
.channel p{margin-top:.2rem;font-size:.92rem;color:var(--ink-500)}
.channel a{display:inline-flex;align-items:center;gap:.35rem;margin-top:.45rem;color:var(--v-700);font-weight:560;font-size:.95rem}
.reply-time{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;padding:.55rem .85rem;border-radius:12px;background:var(--good-bg);border:1px solid rgba(12,206,107,.3);font-size:.875rem;color:var(--ink-800)}
.reply-time .ic{color:var(--good-ink)}

/* ---------- Affiliates ---------- */
.dos{display:grid;gap:1.25rem}
@media (min-width:900px){.dos{grid-template-columns:1fr 1fr}}
.dos__card{padding:1.6rem;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.dos__card h3{display:flex;align-items:center;gap:.6rem;font-size:1.12rem}
.dos__card--do h3 .ic{color:var(--good-ink)}
.dos__card--dont h3 .ic{color:var(--poor-ink)}
.required-note{margin-top:1.25rem;padding:1rem 1.2rem;border-radius:16px;background:var(--v-50);border:1px solid var(--v-200);font-size:.92rem;color:var(--ink-700);text-align:center}
.earn{display:grid;gap:1.25rem;align-items:stretch}
@media (min-width:960px){.earn{grid-template-columns:1.2fr .8fr}}

/* ---------- My account / WooCommerce ---------- */
.woo-auth{display:grid;gap:1.25rem;align-items:start}
@media (min-width:900px){.woo-auth{grid-template-columns:1fr 1fr}}
.woo-auth h2{font-size:1.5rem;letter-spacing:-.025em}
.woo-auth h2+p{margin-top:.35rem;font-size:.92rem;color:var(--ink-500)}
.woocommerce form .form-row{display:grid;gap:.45rem;margin:0 0 1.1rem}
.woocommerce form .form-row label{font-size:.875rem;font-weight:560;color:var(--ink-800)}
.woocommerce form .form-row .required{color:var(--poor-ink);text-decoration:none;border:0}
.woocommerce form .input-text{width:100%;min-height:50px;padding:.75rem .95rem;border:1px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink-900);font-size:1rem;transition:border-color .15s,box-shadow .15s}
.woocommerce form .input-text:focus{outline:0;border-color:var(--v-400);box-shadow:0 0 0 4px rgb(var(--v5-rgb) / .14)}
.woocommerce .woocommerce-form-login__rememberme{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink-600);cursor:pointer}
.woocommerce .woocommerce-form-login__rememberme input{width:18px;height:18px;accent-color:var(--v-600)}
.woocommerce .form-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:.5rem}
.woocommerce .woocommerce-LostPassword{margin-top:1.1rem;font-size:.9rem}
.woocommerce .woocommerce-LostPassword a{color:var(--v-700);font-weight:560}
.woocommerce-privacy-policy-text{margin:0 0 1.1rem;font-size:.82rem;color:var(--ink-500)}
.woocommerce-privacy-policy-text a{color:var(--v-700);text-decoration:underline}
.perks{list-style:none;display:grid;gap:.8rem;margin-top:1.4rem}
.perks li{display:flex;gap:.75rem;align-items:flex-start;font-size:.93rem;color:var(--ink-600)}
.perks .ic{margin-top:.2rem;color:var(--v-600)}
.perks strong{color:var(--ink-900)}
.account{display:grid;gap:2rem;align-items:start;padding-block:clamp(1.5rem,1rem + 2vw,2.5rem) var(--section)}
@media (min-width:960px){.account{grid-template-columns:250px minmax(0,1fr);gap:2.5rem}}
.woocommerce-MyAccount-navigation ul{list-style:none;display:grid;gap:2px;padding:.5rem;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.woocommerce-MyAccount-navigation a{display:flex;align-items:center;gap:.65rem;padding:.65rem .8rem;border-radius:12px;font-size:.93rem;font-weight:500;color:var(--ink-600);transition:background-color .15s,color .15s}
.woocommerce-MyAccount-navigation a .ic{color:var(--ink-400)}
.woocommerce-MyAccount-navigation a:hover{background:var(--paper-2);color:var(--ink-900)}
.woocommerce-MyAccount-navigation .is-active a{background:var(--v-50);color:var(--v-700);font-weight:560}
.woocommerce-MyAccount-navigation .is-active a .ic{color:var(--v-600)}
.woocommerce-MyAccount-content{min-width:0}
.acct-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.acct-head h1{font-size:clamp(1.7rem,1.4rem + 1.2vw,2.3rem);letter-spacing:-.028em}
.acct-head p{margin-top:.3rem;font-size:.93rem;color:var(--ink-500)}
.license{padding:clamp(1.25rem,1rem + 1vw,1.75rem);border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.license+.license{margin-top:1rem}
.license__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.license__product{display:flex;align-items:center;gap:.75rem}
.license__product strong{display:block;color:var(--ink-900);font-size:1.05rem}
.license__product span{font-size:.84rem;color:var(--ink-500)}
.status{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .65rem;border-radius:var(--r-pill);font-size:.76rem;font-weight:600}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status--active{background:var(--good-bg);color:var(--good-ink)}
.status--expired{background:var(--poor-bg);color:var(--poor-ink)}
.keybox{display:flex;align-items:center;gap:.5rem;margin-top:1.25rem;padding:.45rem .45rem .45rem 1rem;border-radius:14px;background:var(--paper-2);border:1px solid var(--line);font-family:var(--font-mono);font-size:clamp(.82rem,.75rem + .3vw,.98rem);font-weight:560;color:var(--ink-900);letter-spacing:.02em}
.keybox code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.keybox .btn{flex:none}
.license__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:1rem;overflow:hidden;border-radius:14px;background:var(--line);border:1px solid var(--line)}
@media (min-width:720px){.license__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.license__grid>div{padding:.8rem 1rem;background:#fff}
.license__grid dt{font-size:.68rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-400)}
.license__grid dd{margin-top:.25rem;font-size:.9rem;font-weight:560;color:var(--ink-900)}
.license__grid dd code{font-size:.82rem}
.license__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}

/* ---------- Legal ---------- */
.legal{display:grid;gap:2rem;padding-bottom:var(--section)}
@media (min-width:1024px){.legal{grid-template-columns:230px minmax(0,1fr);gap:4.5rem}}
.legal__aside{display:none}
@media (min-width:1024px){.legal__aside{display:block}.legal .toc-mobile{display:none}}
.legal__aside .toc{position:sticky;top:calc(var(--header-h) + 1.75rem)}
.legal__body{min-width:0;max-width:760px}
.plain{margin-bottom:2.5rem;padding:1.4rem 1.5rem;border-radius:20px;background:var(--v-50);border:1px solid var(--v-200)}
.plain__title{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--v-700)}
.plain ul{margin-top:.8rem;padding-left:1.2rem;display:grid;gap:.4rem;font-size:.95rem;color:var(--ink-700)}
.legal-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1.25rem;font-size:.875rem;color:var(--ink-500)}
.legal-meta span{display:inline-flex;align-items:center;gap:.4rem}

/* ---------- 404 ---------- */
.nf{position:relative;overflow:hidden;display:grid;place-items:center;min-height:calc(100vh - var(--header-h) - 120px);padding-block:4rem;text-align:center}
.nf .gauge{--size:170px;margin-inline:auto}
.nf h1{margin-top:1.75rem;font-size:clamp(2.2rem,1.6rem + 2.6vw,3.6rem);letter-spacing:-.035em}
.nf .lead{margin:1rem auto 0}
.nf__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2rem}

/* ---------- Modal (Request a demo) ---------- */
.modal{width:min(560px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);padding:0;border:0;border-radius:26px;background:#fff;color:var(--ink-600);box-shadow:0 40px 120px -30px rgba(11,8,22,.6);overflow:auto}
.modal::backdrop{background:rgba(11,8,22,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal[open]{animation:modal-in .35s var(--ease-out)}
@keyframes modal-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
.modal__head{position:relative;padding:1.75rem 1.75rem 0}
.modal__head h2{font-size:1.6rem;letter-spacing:-.028em}
.modal__head p{margin-top:.4rem;font-size:.93rem;color:var(--ink-500)}
.modal__close{position:absolute;top:1rem;right:1rem;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--ink-500);transition:background-color .15s,color .15s}
.modal__close:hover{background:var(--paper-2);color:var(--ink-900)}
.modal__body{padding:1.5rem 1.75rem 1.75rem}

/* ---------- Article diagram: stacked layers ---------- */
.layers{display:grid;margin-block:2em}
.layer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;padding:1.1rem 1.25rem;border-radius:18px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1)}
.layer--head{border-color:var(--v-300);background:linear-gradient(180deg,var(--v-50),#fff);box-shadow:var(--sh-glow)}
.layer>.ic{width:22px;height:22px;margin-top:.15rem;color:var(--v-600)}
.layer__k{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--v-600)}
.layer strong{display:block;margin-top:.1rem;font-size:1.02rem;color:var(--ink-900)}
.layer p{margin-top:.3rem!important;font-size:.93rem;line-height:1.6;color:var(--ink-500)}
.layer__chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.65rem}
.layer__chips span{padding:.2rem .5rem;border-radius:7px;background:var(--paper-2);border:1px solid var(--line);font-family:var(--font-mono);font-size:.7rem;color:var(--ink-600)}
.layer--head .layer__chips span{background:#fff;border-color:var(--v-200);color:var(--v-700)}
.layer-link{position:relative;display:grid;place-items:center;height:44px}
.layer-link::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:repeating-linear-gradient(to bottom,var(--v-300) 0 5px,transparent 5px 10px)}
.layer-link span{position:relative;padding:.18rem .55rem;border-radius:7px;background:var(--paper);border:1px solid var(--line);font-family:var(--font-mono);font-size:.68rem;color:var(--ink-500)}
.verdict{display:grid;gap:1rem;margin-block:1.8em}
@media (min-width:760px){.verdict{grid-template-columns:1fr 1fr}}
.verdict>div{padding:1.25rem 1.35rem;border-radius:18px;border:1px solid var(--line);background:#fff}
.verdict h3{display:flex;align-items:center;gap:.5rem;margin:0!important;font-size:1.05rem!important}
.verdict .go h3 .ic{color:var(--good-ink)}
.verdict .stay h3 .ic{color:var(--avg-ink)}
.verdict ul{margin-top:.8rem!important;padding-left:1.1rem;font-size:.94rem}
.stat-inline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-block:1.8em;overflow:hidden;border-radius:18px;background:var(--line);border:1px solid var(--line)}
@media (min-width:760px){.stat-inline{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat-inline>div{padding:1rem 1.1rem;background:#fff}
.stat-inline b{display:block;font-family:var(--font-mono);font-size:1.3rem;font-weight:560;letter-spacing:-.03em;color:var(--ink-900)}
.stat-inline b .up{color:var(--good-ink)}
.stat-inline span{display:block;margin-top:.2rem;font-size:.8rem;line-height:1.4;color:var(--ink-500)}
/* Components nested inside long-form prose keep their own rhythm */
.prose .stack>*{margin-block:0}
.prose .stack>*+*{margin-top:var(--stack,1rem)}
.prose .card h3{margin-top:.55rem;font-size:1.1rem}
.prose .card p{margin-top:.4rem}
.prose .card .card__kicker{display:block}
.prose h3 .tag{vertical-align:.25em;margin-left:.35rem}
.breakdown{list-style:none;display:grid;gap:.1rem;margin-top:1.4rem;padding-top:1.1rem;border-top:1px dashed rgba(255,255,255,.1)}
.breakdown li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;font-size:.86rem;color:var(--ink-300)}
.breakdown b{font-family:var(--font-mono);font-weight:500;color:#fff}

/* ---------- FAQ page ---------- */
.faq-search{position:relative;max-width:560px;margin:2rem auto 0}
.faq-search .ic{position:absolute;left:1rem;top:50%;width:19px;height:19px;transform:translateY(-50%);color:var(--ink-400);pointer-events:none}
.faq-search .input{min-height:56px;padding-left:2.9rem;border-radius:16px;box-shadow:var(--sh-2);font-size:1.02rem}
.faq-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.25rem}
.faq-cats a{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:var(--r-pill);border:1px solid var(--line-2);background:#fff;font-size:.85rem;font-weight:560;color:var(--ink-600);transition:border-color .15s,color .15s}
.faq-cats a:hover{border-color:var(--v-300);color:var(--v-700)}
.faq-cats .ic{color:var(--v-500)}
.faq-cats+.faq-group,.faq-cats+.faq{margin-top:clamp(2.25rem,1.8rem + 1.6vw,3.25rem)}
.faq-group{max-width:860px;margin-inline:auto;scroll-margin-top:calc(var(--header-h) + 24px)}
.faq-group+.faq-group{margin-top:3.25rem}
.faq-group__head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.faq-group__head .card__icon{width:38px;height:38px}
.faq-group__head h2{font-size:1.45rem;letter-spacing:-.025em}
.faq-none{max-width:860px;margin:0 auto;padding:2rem;border-radius:18px;border:1px dashed var(--line-2);text-align:center;color:var(--ink-500)}
.btn.is-copied{color:var(--good-ink);border-color:rgba(12,206,107,.45)}
.license__domains{display:flex;flex-wrap:wrap;gap:.35rem}
.license__domains code{padding:.15rem .45rem;border-radius:7px;background:var(--paper-2);border:1px solid var(--line);font-size:.78rem}
.license--expired{background:linear-gradient(#fff,#fff) padding-box;opacity:.92}
.license--expired .keybox{color:var(--ink-500)}
.acct-perks{display:grid;gap:1rem;margin-top:2.5rem}
@media (min-width:760px){.acct-perks{grid-template-columns:repeat(3,minmax(0,1fr))}}
.prose .doc-section__kicker+h2,.doc-section__kicker+h2{margin-top:.35rem}
@media (max-width:959px){
  .woocommerce-MyAccount-navigation ul{display:flex;gap:.3rem;overflow-x:auto;padding:.35rem;border-radius:16px;scrollbar-width:none}
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none}
  .woocommerce-MyAccount-navigation a{white-space:nowrap;padding:.55rem .8rem}
}

.iceberg__tip>svg path{fill:var(--v-100)}

/* ---- 04-woo.css ---- */
/* ==========================================================
   WOOHL — WooCommerce pages
   Cart, checkout, order received, plan landing pages, account
   dashboard. Markup mirrors the WooCommerce template overrides
   in the theme, so these styles carry over 1:1.
   ========================================================== */

.cart-layout>*,.checkout-grid>*,.plan-hero>*,.dash-grid>*,.next-steps>*,.thanks-grid>*{min-width:0}

/* ---------- Checkout journey steps ---------- */
.wsteps{display:flex;justify-content:center;gap:0;margin-top:1.6rem;padding:0;list-style:none;counter-reset:wstep}
.wsteps li{display:flex;align-items:center;gap:.55rem;counter-increment:wstep;font-size:.875rem;font-weight:560;color:var(--ink-400);white-space:nowrap}
.wsteps li::before{content:counter(wstep);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;font-size:.78rem;font-weight:640;color:var(--ink-500)}
.wsteps li+li{margin-left:.9rem;padding-left:2.2rem;position:relative}
.wsteps li+li::after{content:"";position:absolute;left:.35rem;top:50%;width:1.5rem;height:1.5px;background:var(--line-2)}
.wsteps li[aria-current]{color:var(--ink-900)}
.wsteps li[aria-current]::before{border-color:var(--v-600);background:var(--v-600);color:#fff}
.wsteps li.is-done{color:var(--ink-700)}
.wsteps li.is-done::before{content:"✓";border-color:var(--good-ink);background:var(--good-bg);color:var(--good-ink)}
@media (max-width:640px){.wsteps li span{display:none}.wsteps li[aria-current] span{display:inline}.wsteps li+li{margin-left:.6rem;padding-left:1.6rem}.wsteps li+li::after{width:1rem}}

/* ---------- Woo notices (info / success / error) ---------- */
.woocommerce-info,.woocommerce-message,.woocommerce-error{display:block;margin:0 0 1rem;padding:.9rem 1.15rem;border-radius:16px;border:1px solid var(--v-200);background:var(--v-50);font-size:.95rem;line-height:1.55;color:var(--ink-700);list-style:none}
.woocommerce-info a,.woocommerce-message a,.woocommerce-error a{color:var(--v-700);font-weight:560;text-decoration:underline;text-underline-offset:2px}
.woocommerce-message{border-color:rgba(12,206,107,.35);background:var(--good-bg)}
.woocommerce-error{border-color:rgba(255,78,66,.35);background:var(--poor-bg)}
.woocommerce-error li+li{margin-top:.35rem}

/* ---------- Cart ---------- */
.cart-layout{display:grid;gap:1.5rem;align-items:start;padding-block:clamp(1.5rem,1rem + 2vw,2.5rem) var(--section)}
@media (min-width:1024px){.cart-layout{grid-template-columns:minmax(0,1fr) 400px;gap:2rem}}

.woocommerce-cart-form .shop_table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:var(--sh-1);overflow:hidden}
.woocommerce-cart-form .shop_table thead{display:none}
.woocommerce-cart-form .cart_item td{padding:1.4rem;vertical-align:top;border:0}
.woocommerce-cart-form .cart_item+.cart_item td{border-top:1px solid var(--line)}
.cart-plan__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--v-50);border:1px solid var(--v-200);color:var(--v-600)}
.cart-plan__icon .ic{width:24px;height:24px}
td.product-name strong{display:block;font-size:1.08rem;font-weight:640;letter-spacing:-.015em;color:var(--ink-900)}
td.product-name>p{margin-top:.25rem;font-size:.9rem;color:var(--ink-500)}
.cart-plan__points{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.7rem;padding:0;list-style:none}
.cart-plan__points li{display:flex;align-items:center;gap:.4rem;font-size:.84rem;color:var(--ink-600)}
.cart-plan__points .ic{width:.95em;height:.95em;color:var(--good-ink)}
td.product-price,td.product-subtotal{white-space:nowrap;font-weight:640;color:var(--ink-900)}
td.product-price small,td.product-subtotal small{font-weight:480;color:var(--ink-500)}
td.product-quantity .qty-fixed{display:inline-block;padding:.3rem .7rem;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);font-size:.84rem;font-weight:560;color:var(--ink-600);white-space:nowrap}
td.product-remove{text-align:right}
td.product-remove .remove{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;font-size:1.3rem;line-height:1;color:var(--ink-400);text-decoration:none;transition:background .15s,color .15s}
td.product-remove .remove:hover{background:var(--poor-bg);color:var(--poor-ink)}
@media (max-width:760px){
  .woocommerce-cart-form .cart_item{display:grid;grid-template-columns:auto 1fr auto;padding:1.15rem;gap:.2rem 1rem}
  .woocommerce-cart-form .cart_item td{display:block;padding:0;border:0!important}
  .woocommerce-cart-form .cart_item td.product-thumbnail{grid-row:1/3}
  .woocommerce-cart-form .cart_item td.product-name{grid-column:2}
  .woocommerce-cart-form .cart_item td.product-remove{grid-column:3;grid-row:1}
  .woocommerce-cart-form .cart_item td.product-price{grid-column:2;margin-top:.5rem}
  .woocommerce-cart-form .cart_item td.product-quantity,.woocommerce-cart-form .cart_item td.product-subtotal{display:none}
  .woocommerce-cart-form .cart_item+.cart_item{border-top:1px solid var(--line)}
}

.cart-swap{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:1rem;padding:1rem 1.15rem;border-radius:16px;border:1px dashed var(--v-300);background:var(--v-50)}
.cart-swap>.ic{width:20px;height:20px;color:var(--v-600)}
.cart-swap p{flex:1;min-width:220px;font-size:.93rem;color:var(--ink-700)}
.cart-swap p strong{color:var(--ink-900)}

.cart-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem}
.cart-coupon{display:flex;flex:1;min-width:min(100%,340px);max-width:420px;gap:.5rem}
.cart-coupon .input-text{flex:1;min-width:0}
.cart-coupon .input-text::placeholder{color:var(--ink-400)}

.cart_totals{position:sticky;top:calc(var(--header-h, 68px) + 1rem);padding:clamp(1.25rem,1rem + 1vw,1.6rem);border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
.cart_totals h2{font-size:1.15rem;letter-spacing:-.02em}
.cart_totals .shop_table{width:100%;margin-top:.9rem;border-collapse:collapse}
.cart_totals .shop_table th,.cart_totals .shop_table td{padding:.65rem 0;font-size:.95rem;text-align:left;border-bottom:1px solid var(--line)}
.cart_totals .shop_table td{text-align:right;font-weight:560;color:var(--ink-900)}
.cart_totals .shop_table th{font-weight:480;color:var(--ink-600)}
.cart_totals .order-total th,.cart_totals .order-total td{padding-top:.9rem;border-bottom:0;font-size:1.05rem;font-weight:680;color:var(--ink-900)}
.cart_totals .order-total td small{display:block;font-size:.8rem;font-weight:480;color:var(--ink-500)}
.totals-note{margin-top:.5rem;font-size:.84rem;color:var(--ink-500)}
.wc-proceed-to-checkout{margin-top:1.1rem}
.secure-note{display:flex;align-items:center;justify-content:center;gap:.45rem;margin-top:.8rem;font-size:.82rem;color:var(--ink-500)}
.secure-note .ic{width:.95em;height:.95em;color:var(--good-ink)}
.paybadges{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line)}
.paybadges span{padding:.28rem .65rem;border-radius:8px;background:var(--paper-2);border:1px solid var(--line);font-size:.74rem;font-weight:600;letter-spacing:.02em;color:var(--ink-600)}
.totals-guarantee{display:flex;gap:.7rem;margin-top:1rem;padding:.9rem 1rem;border-radius:14px;background:var(--good-bg);font-size:.86rem;line-height:1.5;color:var(--ink-700)}
.totals-guarantee .ic{flex:none;width:18px;height:18px;margin-top:.1rem;color:var(--good-ink)}
.totals-guarantee strong{color:var(--ink-900)}

.cart-empty{max-width:560px;margin-inline:auto;padding-block:clamp(2rem,1.5rem + 3vw,4rem);text-align:center}
.cart-empty .card__icon{margin-inline:auto}
.cart-empty h2{margin-top:1.2rem;font-size:clamp(1.5rem,1.3rem + 1vw,2rem);letter-spacing:-.025em}
.cart-empty p{margin-top:.6rem;color:var(--ink-600)}
.cart-empty .cluster{justify-content:center;margin-top:1.5rem}

/* ---------- Checkout ---------- */
.page-checkout .site-nav,.page-checkout .nav-toggle,.page-checkout .site-header__demo,.page-checkout .site-header__actions .btn--primary{display:none}
.page-checkout .site-header__login{display:inline-flex}
.page-checkout .site-footer__top,.page-checkout .site-footer__mark{display:none}
.page-checkout .site-footer{padding-top:0;margin-top:var(--section)}
.header-secure{display:none;align-items:center;gap:.45rem;white-space:nowrap;font-size:.86rem;font-weight:560;color:var(--ink-600)}
.header-secure .ic{width:1em;height:1em;color:var(--good-ink)}
.page-checkout .header-secure{display:inline-flex}

.checkout-grid{display:grid;gap:1.75rem;align-items:start;padding-block:clamp(1.5rem,1rem + 2vw,2.5rem) 0}
@media (min-width:1024px){.checkout-grid{grid-template-columns:minmax(0,1fr) 440px;gap:2.5rem}}
.checkout-grid h3{display:flex;align-items:center;gap:.6rem;font-size:1.1rem;letter-spacing:-.02em}
.checkout-grid h3 .ic{width:20px;height:20px;color:var(--v-600)}

.woocommerce-billing-fields,.checkout-login{padding:clamp(1.25rem,1rem + 1vw,1.75rem);border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.woocommerce-billing-fields__field-wrapper{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-top:1.25rem}
.woocommerce-billing-fields__field-wrapper .form-row{margin:0}
.form-row{display:grid;gap:.45rem}
.form-row label{font-size:.875rem;font-weight:560;color:var(--ink-800)}
.form-row label .optional{font-weight:400;color:var(--ink-400)}
.form-row .required{color:var(--poor-ink);text-decoration:none}
.form-row-wide,.form-row .woocommerce-input-wrapper{grid-column:auto}
.woocommerce-billing-fields__field-wrapper .form-row-wide{grid-column:1/-1}
@media (max-width:620px){.woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr}.woocommerce-billing-fields__field-wrapper .form-row-wide{grid-column:auto}}
.woocommerce form .form-row select,.woocommerce form select.input-text{min-height:50px;width:100%;padding:.75rem .95rem;border:1px solid var(--line-2);border-radius:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6483' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .8rem center/16px no-repeat;color:var(--ink-900);font-size:1rem;-webkit-appearance:none;appearance:none}
.woocommerce form .form-row select:focus{outline:0;border-color:var(--v-400);box-shadow:0 0 0 4px rgb(var(--v5-rgb) / .14)}
.field-note{grid-column:1/-1;display:flex;gap:.5rem;margin-top:-.4rem;font-size:.83rem;color:var(--ink-500)}
.field-note .ic{flex:none;width:1em;height:1em;margin-top:.15rem;color:var(--v-500)}

.checkout-login{margin-bottom:1.25rem}
.checkout-login summary{display:flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:560;color:var(--ink-800);cursor:pointer;list-style:none}
.checkout-login summary::-webkit-details-marker{display:none}
.checkout-login summary .ic{width:18px;height:18px;color:var(--v-600)}
.checkout-login summary em{font-style:normal;color:var(--v-700);text-decoration:underline;text-underline-offset:2px}
.checkout-login[open] summary{margin-bottom:1rem}

.checkout-aside{position:sticky;top:calc(var(--header-h, 68px) + 1rem);display:grid;gap:1.1rem}
#order_review{padding:clamp(1.25rem,1rem + 1vw,1.6rem);border-radius:24px;background:#fff;border:1px solid var(--v-300);box-shadow:var(--sh-glow)}
.woocommerce-checkout-review-order-table{width:100%;margin-top:.9rem;border-collapse:collapse}
.woocommerce-checkout-review-order-table th,.woocommerce-checkout-review-order-table td{padding:.7rem 0;font-size:.95rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.woocommerce-checkout-review-order-table td{text-align:right;font-weight:560;color:var(--ink-900);white-space:nowrap}
.woocommerce-checkout-review-order-table th{width:62%;font-weight:480;color:var(--ink-600)}
.woocommerce-checkout-review-order-table .cart_item th{font-weight:560;color:var(--ink-900)}
.woocommerce-checkout-review-order-table .cart_item th small{display:block;font-weight:480;font-size:.83rem;color:var(--ink-500)}
.woocommerce-checkout-review-order-table .order-total th,.woocommerce-checkout-review-order-table .order-total td{padding-top:1rem;border-bottom:0;font-size:1.08rem;font-weight:680;color:var(--ink-900)}
.woocommerce-checkout-review-order-table .order-total td small{display:block;font-size:.78rem;font-weight:480;color:var(--ink-500)}

#payment{margin-top:.4rem}
#payment .wc_payment_methods{display:grid;gap:.6rem;margin:1rem 0 0;padding:0;list-style:none}
#payment .wc_payment_method{border:1px solid var(--line-2);border-radius:16px;background:#fff;transition:border-color .15s,box-shadow .15s}
#payment .wc_payment_method:has(input:checked){border-color:var(--v-400);box-shadow:0 0 0 3px rgb(var(--v5-rgb) / .12)}
#payment .wc_payment_method>label{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;font-size:.95rem;font-weight:560;color:var(--ink-900);cursor:pointer}
#payment .wc_payment_method>label .ic{width:20px;height:20px;color:var(--v-600)}
#payment .wc_payment_method>label img{max-height:22px;width:auto}
#payment .wc_payment_method input[type=radio]{width:18px;height:18px;accent-color:var(--v-600)}
#payment .payment_box{display:none;padding:0 1rem .9rem 3.2rem;font-size:.86rem;line-height:1.55;color:var(--ink-600)}
#payment .wc_payment_method:has(input:checked) .payment_box{display:block}
.woocommerce-terms-and-conditions-wrapper{margin-top:1.1rem;font-size:.86rem;line-height:1.55;color:var(--ink-600)}
.woocommerce-terms-and-conditions-wrapper a{color:var(--v-700);text-decoration:underline;text-underline-offset:2px}
.woocommerce-terms-and-conditions-wrapper label{position:relative;display:block;padding-left:1.7rem;cursor:pointer}
.woocommerce-terms-and-conditions-wrapper input[type=checkbox]{position:absolute;left:0;top:.15rem;width:17px;height:17px;margin:0;accent-color:var(--v-600)}
.woocommerce-terms-and-conditions-wrapper .required{margin-left:.15rem}
.place-order{margin-top:1.1rem}
#place_order{width:100%}
.next-steps{display:grid;gap:.6rem;padding:1.15rem 1.25rem;border-radius:20px;background:var(--paper-2);border:1px solid var(--line);counter-reset:nstep}
.next-steps p{font-size:.83rem;font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.next-steps ol{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
.next-steps li{display:flex;gap:.65rem;align-items:flex-start;counter-increment:nstep;font-size:.9rem;line-height:1.5;color:var(--ink-700)}
.next-steps li::before{content:counter(nstep);display:grid;flex:none;place-items:center;width:22px;height:22px;margin-top:.05rem;border-radius:50%;background:#fff;border:1px solid var(--line-2);font-size:.72rem;font-weight:640;color:var(--v-700)}
.next-steps li strong{color:var(--ink-900)}
.aside-quote{padding:1.1rem 1.25rem;border-radius:20px;border:1px solid var(--line);background:#fff;font-size:.92rem;line-height:1.6;color:var(--ink-700)}
.aside-quote p em{font-style:normal;font-weight:560;color:var(--ink-900)}
.aside-quote footer{display:flex;align-items:center;gap:.5rem;margin-top:.6rem;font-size:.8rem;color:var(--ink-500)}
.aside-quote footer .ok{color:var(--good-ink);font-weight:600}

/* ---------- Order received ---------- */
.thanks-hero{position:relative;overflow:hidden;text-align:center;padding-block:clamp(2.5rem,2rem + 3vw,4.5rem) clamp(1.5rem,1rem + 2vw,2.5rem)}
.thanks-hero .badge-check{display:grid;place-items:center;width:76px;height:76px;margin-inline:auto;border-radius:50%;background:var(--good-bg);border:1px solid rgba(12,206,107,.35);color:var(--good-ink)}
.thanks-hero .badge-check .ic{width:38px;height:38px}
.thanks-hero h1{margin-top:1.2rem}
.woocommerce-order-overview{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1.5rem 0 0;padding:0;list-style:none}
.woocommerce-order-overview li{padding:.5rem .9rem;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:.83rem;color:var(--ink-500)}
.woocommerce-order-overview li strong{display:block;margin-top:.1rem;font-size:.95rem;color:var(--ink-900)}
.thanks-grid{display:grid;gap:1.25rem;align-items:start;padding-block:clamp(1.5rem,1rem + 2vw,2.5rem) var(--section)}
@media (min-width:960px){.thanks-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.thanks-license{padding:clamp(1.25rem,1rem + 1vw,1.75rem);border-radius:24px;background:#fff;border:1px solid var(--v-300);box-shadow:var(--sh-glow)}
.order-details-card{padding:clamp(1.25rem,1rem + 1vw,1.75rem);border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.order-details-card table{width:100%;margin-top:.9rem;border-collapse:collapse}
.order-details-card th,.order-details-card td{padding:.65rem 0;font-size:.94rem;text-align:left;border-bottom:1px solid var(--line)}
.order-details-card td{text-align:right;font-weight:560;color:var(--ink-900)}
.order-details-card th{font-weight:480;color:var(--ink-600)}
.order-details-card tr:last-child th,.order-details-card tr:last-child td{border-bottom:0;font-weight:680;color:var(--ink-900)}

/* ---------- Plan landing pages ---------- */
.plan-hero{display:grid;gap:2.25rem;align-items:center}
@media (min-width:1024px){.plan-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.plan-hero .plan{margin-top:0}
.plan-hero .price__amt{font-size:clamp(2.8rem,2.4rem + 1.6vw,3.6rem)}
.plan-points{display:grid;gap:.65rem;margin-top:1.6rem}
.plan-points li{display:flex;gap:.6rem;align-items:flex-start;font-size:.97rem;color:var(--ink-700)}
.plan-points .ic{flex:none;width:18px;height:18px;margin-top:.2rem;color:var(--good-ink)}
.plan-points strong{color:var(--ink-900)}
.plan-switch{display:flex;align-items:center;gap:.7rem;margin-top:1rem;padding:.85rem 1rem;border-radius:14px;border:1px dashed var(--v-300);background:var(--v-50);font-size:.88rem;line-height:1.5;color:var(--ink-700)}
.plan-switch .ic{flex:none;width:18px;height:18px;color:var(--v-600)}
.plan-switch a{font-weight:560;color:var(--v-700);text-decoration:underline;text-underline-offset:2px}

/* ---------- Account dashboard ---------- */
.dash-hello{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem}
.dash-grid{display:grid;gap:1.1rem;margin-top:1.5rem}
@media (min-width:760px){.dash-grid{grid-template-columns:1fr 1fr}}
.dash-card{display:flex;flex-direction:column;gap:.5rem;padding:clamp(1.15rem,1rem + .8vw,1.5rem);border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.dash-card--wide{grid-column:1/-1}
.dash-card__top{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.dash-card h2{display:flex;align-items:center;gap:.55rem;font-size:1.02rem;letter-spacing:-.015em}
.dash-card h2 .ic{width:19px;height:19px;color:var(--v-600)}
.dash-card p{font-size:.92rem;color:var(--ink-600)}
.dash-card .keybox{margin-top:.6rem}
.dash-card .cluster{margin-top:auto;padding-top:.9rem}
.dash-live{display:flex;align-items:center;gap:.9rem;margin-top:.4rem;padding:.9rem 1rem;border-radius:16px;background:var(--good-bg)}
.dash-live .pulse{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:var(--good)}
.dash-live .pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--good);opacity:.4;animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.25);opacity:0}}
.dash-live strong{font-size:.95rem;color:var(--ink-900)}
.dash-live span{display:block;font-size:.82rem;color:var(--ink-600)}
.dash-scores{display:flex;gap:.4rem;margin-left:auto}
.dash-scores b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--good);font-size:.9rem;font-weight:680;color:var(--good-ink);background:#fff}
.dash-scores small{display:block;font-size:.58rem;font-weight:560;letter-spacing:.04em;color:var(--ink-500)}
.dash-order{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;margin-top:.4rem;padding:.85rem 1rem;border-radius:14px;border:1px solid var(--line);background:var(--paper-2);font-size:.9rem;color:var(--ink-600)}
.dash-order strong{color:var(--ink-900)}
.dash-order .status{margin-left:auto}
@media (prefers-reduced-motion:reduce){.dash-live .pulse::after{animation:none}}

/* ---------- Plan card extras (pricing + landing) ---------- */
.plan__links{margin-top:.7rem;text-align:center;font-size:.85rem;color:var(--ink-500)}
.plan__links a{color:var(--v-700);font-weight:560;text-decoration:underline;text-underline-offset:2px}

/* ---------- Country / state dropdowns (WooCommerce select2) ---------- */
body .select2-container{max-width:100%}
body .select2-container--default .select2-selection--single{height:50px;border:1px solid var(--line-2);border-radius:12px;background:#fff;transition:border-color .15s,box-shadow .15s}
body .select2-container--default .select2-selection--single:hover{border-color:var(--ink-300)}
body .select2-container--default .select2-selection--single .select2-selection__rendered{padding:0 2.6rem 0 .95rem;line-height:48px;color:var(--ink-900);font-size:1rem}
body .select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--ink-400)}
body .select2-container--default .select2-selection--single .select2-selection__arrow{top:0;right:.8rem;width:16px;height:48px}
body .select2-container--default .select2-selection--single .select2-selection__arrow b{border:0;width:16px;height:16px;margin:-8px 0 0 -8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6483' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat}
body .select2-container--default.select2-container--open .select2-selection--single,body .select2-container--default.select2-container--focus .select2-selection--single{outline:0;border-color:var(--v-400);box-shadow:0 0 0 4px rgb(var(--v5-rgb) / .14)}
body .select2-dropdown{overflow:hidden;border:1px solid var(--line-2);border-radius:12px;background:#fff;box-shadow:var(--sh-3,0 18px 40px -16px rgba(11,8,22,.28))}
body .select2-container--open .select2-dropdown--below{margin-top:6px;border-top:1px solid var(--line-2);border-radius:12px}
body .select2-container--open .select2-dropdown--above{margin-top:-6px;border-bottom:1px solid var(--line-2);border-radius:12px}
body .select2-search--dropdown{padding:.55rem}
body .select2-container--default .select2-search--dropdown .select2-search__field{height:40px;padding:0 .75rem;border:1px solid var(--line-2);border-radius:10px;font-size:.95rem}
body .select2-container--default .select2-search--dropdown .select2-search__field:focus{outline:0;border-color:var(--v-400)}
body .select2-results__option{padding:.55rem .95rem;font-size:.95rem;color:var(--ink-700)}
body .select2-container--default .select2-results__option--highlighted[aria-selected],body .select2-container--default .select2-results__option--highlighted[data-selected]{background:var(--v-600);color:#fff}
body .select2-container--default .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted),body .select2-container--default .select2-results__option[data-selected=true]:not(.select2-results__option--highlighted){background:var(--v-50);color:var(--v-800)}

/* ---------- Card fields inside a payment method (gateway forms) ---------- */
#payment .payment_box fieldset{min-width:0;margin:.4rem 0 0;padding:0;border:0}
#payment .payment_box .form-row{margin:0 0 .75rem;padding:0}
#payment .payment_box label{display:block;margin-bottom:.35rem;font-size:.84rem;font-weight:560;color:var(--ink-800)}
#payment .payment_box input.input-text,#payment .payment_box input[type=text],#payment .payment_box input[type=tel]{width:100%;min-height:46px;padding:.6rem .85rem;border:1px solid var(--line-2);border-radius:10px;background:#fff;color:var(--ink-900);font-size:.95rem;box-shadow:none}
#payment .payment_box input.input-text:focus,#payment .payment_box input[type=text]:focus,#payment .payment_box input[type=tel]:focus{outline:0;border-color:var(--v-400);box-shadow:0 0 0 4px rgb(var(--v5-rgb) / .14)}
@media (min-width:480px){#payment .payment_box .form-row-first,#payment .payment_box .form-row-last{display:inline-block;width:calc(50% - .4rem);vertical-align:top}#payment .payment_box .form-row-first{margin-right:.8rem}}
#payment .payment_box .clear{clear:both}

/* ==== Icons (generated) ==== */
:root{
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --icon-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
  --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --icon-x-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E");
  --icon-arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --icon-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E");
  --icon-gauge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 18.5a9 9 0 1 1 14.8 0'/%3E%3Cpath d='m12 14 4.5-4.5'/%3E%3Ccircle cx='12' cy='14' r='1.2'/%3E%3C/svg%3E");
  --icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.2 8.5 7.5 9.5 4.3-1 7.5-4.9 7.5-9.5V6L12 3z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E");
  --icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E");
  --icon-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 7-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E");
  --icon-terminal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='m7 9 3 3-3 3M13 15h4'/%3E%3C/svg%3E");
  --icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 10.6a1.5 1.5 0 0 0 1.5 1.2h8.6a1.5 1.5 0 0 0 1.5-1.2L20.5 8H6.1'/%3E%3Ccircle cx='9.5' cy='20' r='1.2'/%3E%3Ccircle cx='17' cy='20' r='1.2'/%3E%3C/svg%3E");
  --icon-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E");
  --icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m21 16-5-5-8.5 8.5'/%3E%3C/svg%3E");
  --icon-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 8l9 5 9-5-9-5z'/%3E%3Cpath d='m3 12.5 9 5 9-5M3 17l9 5 9-5'/%3E%3C/svg%3E");
  --icon-plug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5v5M15 2.5v5M6 7.5h12v3.5a6 6 0 0 1-12 0V7.5zM12 17v4.5'/%3E%3C/svg%3E");
  --icon-server: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='17' height='7' rx='2'/%3E%3Crect x='3.5' y='13' width='17' height='7' rx='2'/%3E%3Cpath d='M7.5 7.5h.01M7.5 16.5h.01'/%3E%3C/svg%3E");
  --icon-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 19a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 18 10.5a4.25 4.25 0 0 1 0 8.5H7z'/%3E%3C/svg%3E");
  --icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.5-6'/%3E%3Cpath d='M20.5 4v4.5H16'/%3E%3C/svg%3E");
  --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E");
  --icon-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 13.8 9l5.7 1.5-5.7 1.6L12 17.5l-1.8-5.4-5.7-1.6L10.2 9 12 3.5z'/%3E%3Cpath d='M19 17v4M17 19h4'/%3E%3C/svg%3E");
  --icon-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M6.5 17v-5M11 17V7M15.5 17v-8M20 17V4'/%3E%3C/svg%3E");
  --icon-trend: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 17 6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E");
  --icon-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
  --icon-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5A1.5 1.5 0 0 1 6.5 3H19v14H6.5A1.5 1.5 0 0 0 5 18.5v-14zM5 18.5A1.5 1.5 0 0 0 6.5 20H19'/%3E%3C/svg%3E");
  --icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18.5 14.2A6.5 6.5 0 0 1 21.5 20'/%3E%3C/svg%3E");
  --icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  --icon-dollar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19'/%3E%3Cpath d='M16.5 6.5c-.6-1.5-2.3-2.5-4.5-2.5-2.6 0-4.5 1.4-4.5 3.4 0 4.7 9.5 2.4 9.5 7.4 0 2-2 3.7-4.8 3.7-2.3 0-4.2-1.1-4.8-2.8'/%3E%3C/svg%3E");
  --icon-package: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.5 8.5 4.75v9.5L12 21.5l-8.5-4.75v-9.5L12 2.5z'/%3E%3Cpath d='m3.5 7.25 8.5 4.75 8.5-4.75M12 12v9.5'/%3E%3C/svg%3E");
  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2.5'/%3E%3Cpath d='M5 15a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
  --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9'/%3E%3Cpath d='M19 14v4.5A1.5 1.5 0 0 1 17.5 20h-12A1.5 1.5 0 0 1 4 18.5v-12A1.5 1.5 0 0 1 5.5 5H10'/%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.8h.01'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.8 2.6 17.5A2 2 0 0 0 4.3 20.5h15.4a2 2 0 0 0 1.7-3L13.7 3.8a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4.5M12 17h.01'/%3E%3C/svg%3E");
  --icon-lightbulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.4 1 1.1 1 1.9V16h5v-.2c0-.8.4-1.5 1-1.9A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
  --icon-rocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 14.5c-1.3 1.3-2 5-2 5s3.7-.7 5-2'/%3E%3Cpath d='M9.5 15 7 12.5C8 8 11.6 4 19.5 3.5 19 11.4 15 15 10.5 16L9.5 15z'/%3E%3Ccircle cx='14.5' cy='9.5' r='1.5'/%3E%3C/svg%3E");
  --icon-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3C/svg%3E");
  --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
  --icon-monitor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='12.5' rx='2'/%3E%3Cpath d='M8.5 20.5h7M12 16.5v4'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4.5v15l12.5-7.5L7 4.5z'/%3E%3C/svg%3E");
  --icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --icon-percent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19'/%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3C/svg%3E");
  --icon-toggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='10' rx='5'/%3E%3Ccircle cx='16.5' cy='12' r='3'/%3E%3C/svg%3E");
  --icon-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14v18l-3-2-2 2-2-2-2 2-2-2-3 2V3z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E");
  --icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9L12 3z'/%3E%3C/svg%3E");
  --icon-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='18' r='1.8'/%3E%3Ccircle cx='17' cy='18' r='1.8'/%3E%3C/svg%3E");
  --icon-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4.5A1.5 1.5 0 0 1 4.5 3H12l9 9-9 9-9-9z'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/svg%3E");
  --icon-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m10.7 12.3 9.8-9.8M17 6l3 3M14.5 8.5l2 2'/%3E%3C/svg%3E");
  --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 19.5h16'/%3E%3C/svg%3E");
  --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --icon-message: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H9l-5 4.5V5.5z'/%3E%3C/svg%3E");
  --icon-lifebuoy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.8'/%3E%3Cpath d='m5.6 5.6 3.7 3.7M14.7 14.7l3.7 3.7M18.4 5.6l-3.7 3.7M9.3 14.7l-3.7 3.7'/%3E%3C/svg%3E");
  --icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5 12 5s9.5 7 9.5 7-3.5 7-9.5 7-9.5-7-9.5-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1 1'/%3E%3Cpath d='M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1-1'/%3E%3C/svg%3E");
  --icon-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E");
  --icon-palette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 0 0 0 18c1.1 0 1.8-.9 1.8-1.9 0-.5-.2-.9-.5-1.3-.3-.3-.5-.8-.5-1.3 0-1 .8-1.8 1.8-1.8H17a4 4 0 0 0 4-4C21 6.5 17 3 12 3z'/%3E%3Ccircle cx='7.5' cy='11.5' r='1'/%3E%3Ccircle cx='10.5' cy='7.5' r='1'/%3E%3Ccircle cx='15.5' cy='7.5' r='1'/%3E%3C/svg%3E");
  --icon-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5 5.5 4h13L20 9.5M4 9.5a2.7 2.7 0 0 0 5.3 0 2.7 2.7 0 0 0 5.4 0 2.7 2.7 0 0 0 5.3 0M5.5 11.5V20h13v-8.5'/%3E%3Cpath d='M10 20v-4.5h4V20'/%3E%3C/svg%3E");
  --icon-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5 5-2z'/%3E%3C/svg%3E");
  --icon-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V5.5A1.5 1.5 0 0 0 17.5 4h-12A2.5 2.5 0 0 0 3 6.5v11A2.5 2.5 0 0 0 5.5 20h14a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 19.5 7H5.5'/%3E%3Cpath d='M16.5 13.5h.01'/%3E%3C/svg%3E");
  --icon-handshake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1.4 1.4 0 0 0 2-2'/%3E%3Cpath d='m14 14 2.5 2.5a1.4 1.4 0 0 0 2-2L15 11l-3 2.5a1.6 1.6 0 0 1-2.2-2.3L13 8'/%3E%3Cpath d='m21 11-3-3-3.5.5L12 7 6 8 3 11l4.5 5 2 1.5'/%3E%3C/svg%3E");
  --icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H15M10 16l-4-4 4-4M6 12h10'/%3E%3C/svg%3E");
  --icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-7 9 7'/%3E%3Cpath d='M5.5 9.5V20h13V9.5M10 20v-5.5h4V20'/%3E%3C/svg%3E");
  --icon-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' stroke='none' d='M5 3.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM3.2 9h3.6v11.5H3.2zM9.3 9h3.45v1.6h.05c.48-.9 1.66-1.85 3.42-1.85 3.65 0 4.33 2.4 4.33 5.53v6.22h-3.6v-5.5c0-1.32-.02-3-1.83-3-1.83 0-2.11 1.43-2.11 2.9v5.6H9.3z'/%3E%3C/svg%3E");
  --icon-xsocial: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' stroke='none' d='M17.6 3h3l-6.9 7.9L21.8 21h-5.9l-4.6-6-5.3 6H3l7.4-8.4L2.5 3h6l4.2 5.5zm-1 16.2h1.6L7.6 4.7H5.8z'/%3E%3C/svg%3E");
  --icon-github: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' stroke='none' d='M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.56-1.11-4.56-4.94 0-1.1.39-1.99 1.03-2.69-.1-.25-.45-1.27.1-2.64 0 0 .84-.27 2.75 1.02a9.56 9.56 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.39.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85V21c0 .27.18.58.69.48A10 10 0 0 0 12 2z'/%3E%3C/svg%3E");
  --icon-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' stroke='none' d='M21.6 7.2a2.5 2.5 0 0 0-1.76-1.77C18.25 5 12 5 12 5s-6.25 0-7.84.43A2.5 2.5 0 0 0 2.4 7.2 26 26 0 0 0 2 12a26 26 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.76 1.77C5.75 19 12 19 12 19s6.25 0 7.84-.43a2.5 2.5 0 0 0 1.76-1.77A26 26 0 0 0 22 12a26 26 0 0 0-.4-4.8zM10 15.2V8.8l5.2 3.2z'/%3E%3C/svg%3E");
}
.ic{display:inline-block;flex:none;width:1.15em;height:1.15em;vertical-align:-.2em;background-color:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ic-check{--i:var(--icon-check)}
.ic-check-circle{--i:var(--icon-check-circle)}
.ic-x{--i:var(--icon-x)}
.ic-x-circle{--i:var(--icon-x-circle)}
.ic-minus{--i:var(--icon-minus)}
.ic-plus{--i:var(--icon-plus)}
.ic-arrow-right{--i:var(--icon-arrow-right)}
.ic-arrow-left{--i:var(--icon-arrow-left)}
.ic-arrow-up-right{--i:var(--icon-arrow-up-right)}
.ic-arrow-down{--i:var(--icon-arrow-down)}
.ic-chevron-down{--i:var(--icon-chevron-down)}
.ic-chevron-right{--i:var(--icon-chevron-right)}
.ic-bolt{--i:var(--icon-bolt)}
.ic-gauge{--i:var(--icon-gauge)}
.ic-shield{--i:var(--icon-shield)}
.ic-lock{--i:var(--icon-lock)}
.ic-globe{--i:var(--icon-globe)}
.ic-code{--i:var(--icon-code)}
.ic-terminal{--i:var(--icon-terminal)}
.ic-cart{--i:var(--icon-cart)}
.ic-card{--i:var(--icon-card)}
.ic-image{--i:var(--icon-image)}
.ic-layers{--i:var(--icon-layers)}
.ic-plug{--i:var(--icon-plug)}
.ic-server{--i:var(--icon-server)}
.ic-cloud{--i:var(--icon-cloud)}
.ic-refresh{--i:var(--icon-refresh)}
.ic-clock{--i:var(--icon-clock)}
.ic-search{--i:var(--icon-search)}
.ic-mail{--i:var(--icon-mail)}
.ic-sparkle{--i:var(--icon-sparkle)}
.ic-chart{--i:var(--icon-chart)}
.ic-trend{--i:var(--icon-trend)}
.ic-doc{--i:var(--icon-doc)}
.ic-book{--i:var(--icon-book)}
.ic-users{--i:var(--icon-users)}
.ic-user{--i:var(--icon-user)}
.ic-dollar{--i:var(--icon-dollar)}
.ic-package{--i:var(--icon-package)}
.ic-copy{--i:var(--icon-copy)}
.ic-external{--i:var(--icon-external)}
.ic-info{--i:var(--icon-info)}
.ic-alert{--i:var(--icon-alert)}
.ic-lightbulb{--i:var(--icon-lightbulb)}
.ic-rocket{--i:var(--icon-rocket)}
.ic-target{--i:var(--icon-target)}
.ic-phone{--i:var(--icon-phone)}
.ic-monitor{--i:var(--icon-monitor)}
.ic-play{--i:var(--icon-play)}
.ic-menu{--i:var(--icon-menu)}
.ic-percent{--i:var(--icon-percent)}
.ic-toggle{--i:var(--icon-toggle)}
.ic-receipt{--i:var(--icon-receipt)}
.ic-star{--i:var(--icon-star)}
.ic-truck{--i:var(--icon-truck)}
.ic-tag{--i:var(--icon-tag)}
.ic-key{--i:var(--icon-key)}
.ic-download{--i:var(--icon-download)}
.ic-calendar{--i:var(--icon-calendar)}
.ic-message{--i:var(--icon-message)}
.ic-lifebuoy{--i:var(--icon-lifebuoy)}
.ic-eye{--i:var(--icon-eye)}
.ic-link{--i:var(--icon-link)}
.ic-pen{--i:var(--icon-pen)}
.ic-palette{--i:var(--icon-palette)}
.ic-store{--i:var(--icon-store)}
.ic-compass{--i:var(--icon-compass)}
.ic-wallet{--i:var(--icon-wallet)}
.ic-handshake{--i:var(--icon-handshake)}
.ic-logout{--i:var(--icon-logout)}
.ic-home{--i:var(--icon-home)}
.ic-linkedin{--i:var(--icon-linkedin)}
.ic-xsocial{--i:var(--icon-xsocial)}
.ic-github{--i:var(--icon-github)}
.ic-youtube{--i:var(--icon-youtube)}

/* ==========================================================
   WOOHL — WordPress-specific extras
   Appended after the design-system CSS by build-theme.mjs.
   ========================================================== */

/* Uploaded custom logo (Appearance -> Site Identity) */
.site-header .custom-logo-link{display:inline-flex;align-items:center;flex:none;line-height:0}
.site-header img.custom-logo{display:block;height:34px;width:auto;max-width:210px;object-fit:contain}
@media (max-width:480px){.site-header img.custom-logo{max-width:150px}}
.site-footer .custom-logo-link{display:inline-flex;line-height:0}
.site-footer img.custom-logo{height:30px;width:auto;max-width:190px;object-fit:contain}

/* Core helpers */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
@media (max-width:600px){.admin-bar .site-header{top:0}}

/* Content images & embeds */
.prose img,.article img{max-width:100%;height:auto;border-radius:16px}
.wp-caption{max-width:100%}
.wp-caption-text{margin-top:.5rem;font-size:.85rem;color:var(--ink-500)}
.alignleft{float:left;margin:.4rem 1.5rem 1rem 0}
.alignright{float:right;margin:.4rem 0 1rem 1.5rem}
.aligncenter{display:block;margin-inline:auto}
.cover--img{position:relative;overflow:hidden}
.cover--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Pagination */
.pagination,.woocommerce-pagination{margin-top:2.5rem}
.pagination .nav-links,.woocommerce-pagination ul.page-numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;list-style:none;margin:0;padding:0;border:0}
.pagination .page-numbers,.woocommerce-pagination .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding-inline:.7rem;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:.92rem;font-weight:560;color:var(--ink-700);text-decoration:none;transition:border-color .15s,color .15s}
.pagination a.page-numbers:hover,.woocommerce-pagination a.page-numbers:hover{border-color:var(--v-400);color:var(--v-700)}
.pagination .page-numbers.current,.woocommerce-pagination .page-numbers.current{background:var(--v-600);border-color:var(--v-600);color:#fff}
.pagination .screen-reader-text{display:none}

/* Comments */
.comments{border-top:1px solid var(--line);padding-top:2rem}
.comment-list{list-style:none;margin:1rem 0 0;padding:0}
.comment-list .comment{padding:1.1rem 0;border-bottom:1px solid var(--line)}
.comment-list .children{list-style:none;margin:.75rem 0 0;padding-left:1.25rem;border-left:2px solid var(--line)}
.comment-author{display:flex;align-items:center;gap:.6rem;font-weight:560;color:var(--ink-900)}
.comment-author .avatar{border-radius:50%}
.comment-metadata{font-size:.8rem;margin-top:.15rem}
.comment-metadata a{color:var(--ink-400);text-decoration:none}
.comment-content{margin-top:.6rem;font-size:.95rem;line-height:1.65;color:var(--ink-700)}
.comment-reply-link{font-size:.84rem;font-weight:560;color:var(--v-700)}
.comment-form{margin-top:1rem}
.comment-form .form-submit{margin:0}
.comment-notes,.logged-in-as{font-size:.85rem;color:var(--ink-500)}

/* Woo checkout toggles (login + coupon) rendered by WooCommerce core */
.woocommerce-form-login-toggle,.woocommerce-form-coupon-toggle{margin-bottom:1rem}
.woocommerce-form-login-toggle .woocommerce-info,.woocommerce-form-coupon-toggle .woocommerce-info{margin-bottom:0}
form.woocommerce-form-login,form.checkout_coupon{margin:0 0 1.25rem;padding:clamp(1.25rem,1rem + 1vw,1.6rem);border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
form.checkout_coupon p{margin-bottom:.6rem;font-size:.9rem;color:var(--ink-600)}
form.checkout_coupon .form-row{display:inline-grid;margin-right:.5rem;vertical-align:top}
form.checkout_coupon .form-row-first{width:min(100%,280px)}
form.woocommerce-form-login .form-row{margin-bottom:1rem}
form.woocommerce-form-login label{display:block;margin-bottom:.4rem;font-size:.875rem;font-weight:560;color:var(--ink-800)}

/* Buttons WooCommerce prints without theme classes */
.woocommerce .button:not(.btn),.woocommerce button.button:not(.btn),.woocommerce a.button:not(.btn){display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.6rem 1.15rem;border-radius:12px;border:1px solid var(--line-2);background:#fff;font-size:.92rem;font-weight:560;color:var(--ink-800);cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s}
.woocommerce .button:not(.btn):hover{border-color:var(--ink-300)}
.woocommerce button.button.alt:not(.btn),.woocommerce a.button.alt:not(.btn){background:var(--v-600);border-color:var(--v-600);color:#fff}
.woocommerce button.button.alt:not(.btn):hover{background:var(--v-700)}
.woocommerce button.button:disabled{opacity:.55;cursor:not-allowed}

/* Woo account tables (orders, downloads) */
.woocommerce-MyAccount-content table.shop_table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
.woocommerce-MyAccount-content table.shop_table th,.woocommerce-MyAccount-content table.shop_table td{padding:.8rem 1rem;font-size:.92rem;text-align:left;border-bottom:1px solid var(--line)}
.woocommerce-MyAccount-content table.shop_table thead th{background:var(--paper-2);font-size:.78rem;font-weight:640;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-500)}
.woocommerce-MyAccount-content table.shop_table tr:last-child td{border-bottom:0}
.woocommerce-MyAccount-content mark{background:none;color:inherit;font-weight:640}

/* Contact Form 7 — pick up the design system automatically */
.wpcf7 .form-grid,.wpcf7-form{display:grid;gap:1.1rem}
.wpcf7-form label{display:grid;gap:.45rem;font-size:.875rem;font-weight:560;color:var(--ink-800)}
.wpcf7-form .wpcf7-form-control-wrap{display:block}
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=url],.wpcf7-form input[type=tel],.wpcf7-form select,.wpcf7-form textarea{width:100%;min-height:50px;padding:.75rem .95rem;border:1px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink-900);font-size:1rem;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.wpcf7-form textarea{min-height:130px;resize:vertical}
.wpcf7-form input:focus,.wpcf7-form select:focus,.wpcf7-form textarea:focus{outline:0;border-color:var(--v-400);box-shadow:0 0 0 4px rgba(124,82,230,.14)}
.wpcf7-form input[type=submit]{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:54px;padding:.8rem 1.4rem;border:0;border-radius:14px;background:var(--v-600);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:background .15s,transform .15s}
.wpcf7-form input[type=submit]:hover{background:var(--v-700)}
.wpcf7-not-valid-tip{margin-top:.35rem;font-size:.82rem;color:var(--poor-ink)}
.wpcf7 form .wpcf7-response-output{margin:1rem 0 0;padding:.9rem 1.15rem;border:1px solid var(--v-200);border-radius:14px;background:var(--v-50);font-size:.92rem;color:var(--ink-700)}
.wpcf7 form.sent .wpcf7-response-output{border-color:rgba(12,206,107,.35);background:var(--good-bg)}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output{border-color:rgba(255,78,66,.35);background:var(--poor-bg)}
.wpcf7-spinner{margin:.5rem auto 0}

/* Founding slots: taken state */
.slots .is-taken{background:var(--v-600);opacity:1}

/* Elementor niceties: our widgets are full-bleed sections */
.elementor .e-con.e-flex>.e-con-inner{max-width:100%}
.elementor-widget-woohl-hero,.elementor-widget-woohl-page-hero{width:100%}

/* Password strength meter (Woo account forms) */
.woocommerce-password-strength{margin-top:.4rem;padding:.35rem .6rem;border-radius:8px;font-size:.8rem;font-weight:560}
.woocommerce-password-strength.short,.woocommerce-password-strength.bad{background:var(--poor-bg);color:var(--poor-ink)}
.woocommerce-password-strength.good{background:var(--avg-bg);color:var(--avg-ink)}
.woocommerce-password-strength.strong{background:var(--good-bg);color:var(--good-ink)}
.woocommerce-password-hint{display:block;margin-top:.35rem;font-size:.8rem;color:var(--ink-500)}

/* Demo popup plugin: dialog reuses the design's .modal styles */
dialog.modal::backdrop{background:rgba(11,8,22,.55);backdrop-filter:blur(3px)}

/* WooCommerce notices printed before the page layout opens (wrapped by the theme) */
.woohl-notices{padding-top:1.25rem}
.woohl-notices:empty{display:none}
.woohl-notices .woocommerce-notices-wrapper:empty{display:none}
.woohl-notices .woocommerce-message,.woohl-notices .woocommerce-info,.woohl-notices .woocommerce-error{margin-bottom:0}
.woocommerce-message .button,.woocommerce-info .button{margin-left:.75rem;min-height:36px;padding:.35rem .8rem;font-size:.84rem}

/* A notices wrapper printed outside the theme's layout containers still
   sits on the grid instead of spanning the full window. */
.woocommerce-notices-wrapper:not(:empty){width:100%;max-width:calc(var(--container) + var(--gutter) * 2);margin:1rem auto 0;padding-inline:var(--gutter)}
.container .woocommerce-notices-wrapper,.woohl-notices .woocommerce-notices-wrapper{max-width:none;margin:0;padding-inline:0}

/* Login forms inside a design card (My account, affiliate apply): no nested card chrome. */
.form-card form.woocommerce-form-login{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.form-card p+form.woocommerce-form-login{margin-top:1.25rem}
.woo-auth-single .form-note+.form-row{margin-top:1.1rem}
form.woocommerce-form-login .form-actions{margin-top:.25rem}
form.woocommerce-form-login .lost_password{margin:1rem 0 0;font-size:.9rem}
form.woocommerce-form-login .lost_password a,.woo-auth-single .form-note a{color:var(--v-700);font-weight:560}
.woo-auth-single{max-width:520px;margin-inline:auto}
.woo-auth-single .woocommerce-message,.woo-auth-single .woocommerce-info,.woo-auth-single .woocommerce-error{margin:0 0 1.25rem}
.woo-auth-done{text-align:center}
.woo-auth-single h2{font-size:1.35rem;letter-spacing:-.03em}
.woo-auth-done p{color:var(--ink-500)}
.woo-auth-done .card__icon{margin:0 auto 1rem;width:52px;height:52px}
.woo-auth-done .card__icon .ic{width:24px;height:24px}

/* ---------- Elementor content follows the design typography ----------
   (Theme options -> Elementor: "Use theme typography", on by default.)
   Elementor's default kit (Roboto, #7A7A7A text) and per-element fonts in
   Elementor-built blog posts otherwise override the article type. */
.woohl-el-type[class*="elementor-kit-"]{--e-global-typography-primary-font-family:var(--font-display);--e-global-typography-secondary-font-family:var(--font-display);--e-global-typography-text-font-family:var(--font-sans);--e-global-typography-accent-font-family:var(--font-sans);--e-global-color-text:var(--ink-600);--e-global-color-secondary:var(--ink-900)}
.woohl-el-type .prose .elementor-widget-text-editor{font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;color:inherit!important}
.woohl-el-type .prose .elementor-widget-text-editor :is(p,li,ul,ol,blockquote){font-family:inherit!important;font-size:inherit!important;line-height:inherit!important}
.woohl-el-type .prose .elementor-heading-title{font-family:var(--font-display)!important;font-weight:600!important;letter-spacing:-.025em!important;color:var(--ink-900)!important;text-wrap:balance}
.woohl-el-type .prose h2.elementor-heading-title{font-size:clamp(1.55rem,1.25rem + 1.2vw,2.1rem)!important;line-height:1.15!important}
.woohl-el-type .prose h3.elementor-heading-title{font-size:clamp(1.2rem,1.1rem + .4vw,1.38rem)!important;line-height:1.3!important}
.woohl-el-type .prose :is(h4,h5,h6).elementor-heading-title{font-size:1.05rem!important;line-height:1.35!important}
.woohl-el-type .prose .elementor-heading-title a{color:inherit!important;text-decoration-color:var(--v-200)}
.woohl-el-type .prose>.elementor>.e-con{--padding-left:0px!important;--padding-right:0px!important}

/* ---------- Elementor lazy-background safety net ----------
   Elementor's "lazy load background images" CSS removes every background-image
   below the fold until its (delayed) script runs. Gradient title text and the
   design's gradient buttons/banners must keep theirs — transparent text would
   vanish. (WOOHL sections also opt out at render time; this covers cached HTML.) */
.e-con.e-parent:nth-of-type(n):not(.e-lazyloaded):not(.e-no-lazyload) :is(h1,h2,.h1,.h2) em,.e-con.e-parent:nth-of-type(n):not(.e-lazyloaded):not(.e-no-lazyload) .hl,.e-con.e-parent:nth-of-type(n):not(.e-lazyloaded):not(.e-no-lazyload) .cover__word em{background-image:linear-gradient(90deg,var(--hl-a,var(--hl-from)),var(--hl-b,var(--hl-to)))!important}
.e-con.e-parent:nth-of-type(n):not(.e-lazyloaded):not(.e-no-lazyload) .btn--primary{background-image:linear-gradient(180deg,var(--v-500),var(--v-600))!important}
.e-con.e-parent:nth-of-type(n):not(.e-lazyloaded):not(.e-no-lazyload) .founding{background-image:linear-gradient(120deg,var(--v-800),var(--v-600) 60%,var(--v-500))!important}