/* HostingWC v26, matched to the client dashboard (my.hostingwc.com).
   Dark slate surfaces, glass panels with hairline borders, Geist for text, wide Archivo for headlines.
   Actions are neutral (white on dark, near-black on light); electric blue (--hl) is for links, focus and small highlights. */
@font-face{font-family:"Archivo WC";src:url(../fonts/archivo-display.woff2) format("woff2");font-weight:600 800;font-stretch:110% 125%;font-display:swap}
@font-face{font-family:"Geist";src:url(../fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --ink-0:#0A0F1D; --ink-1:#0F172A; --ink-2:#131D33; --ink-3:#1A2540;
  --line:#1E293B; --line-2:#2C3A52;
  --fg:#EEF2F8; --fg-2:#A9B5CA; --fg-3:#8391AB;
  --hl:#4D9DFF; --hl-2:#7CB7FF; --hl-ink:#04122B; --hl-dim:rgba(77,157,255,.12);
  --cyan:#00E5FF; --brand-grad:linear-gradient(135deg,#00E5FF 0%,#2A7FFF 55%,#3B82F6 100%);
  --glass:rgba(255,255,255,.03); --glass-2:rgba(255,255,255,.05); --glass-line:rgba(255,255,255,.08); --glass-line-2:rgba(255,255,255,.14);
  --wc-ring-from:#94A3B8; --wc-ring-mid:#CBD5E1; --wc-ring-to:#F1F5F9;
  --on-hover:#E2E8F0;
  --go:#46D89B; --bad:#FF6B5B; --go-dim:rgba(70,216,155,.12); --bad-dim:rgba(255,107,91,.12);
  --display:"Archivo WC","Archivo","Helvetica Neue",Arial,sans-serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --wrap:1240px; --gut:clamp(16px,4vw,40px);
  --r:16px; --r-sm:12px; --r-xs:8px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --warn:#F5C451; --info:#7CB7FF; --warn-dim:rgba(245,196,81,.12); --info-dim:rgba(124,183,255,.12);
  /* Semantic tokens: new components use these; the raw ink/fg scale stays for existing ones. */
  --bg:var(--ink-0); --surface:var(--ink-1); --surface-2:var(--ink-2); --elevated:var(--ink-3);
  --border:var(--line); --border-strong:var(--line-2);
  --text:var(--fg); --text-2:var(--fg-2); --muted:var(--fg-3);
  --primary:#FAFAFA; --on-primary:#0A0A0A;
  --success:var(--go); --warning:var(--warn); --error:var(--bad); --informational:var(--info);
  /* Spacing scale (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  /* Lines, washes and data colors. Everything theme-dependent is a token; html[data-theme=light] below redefines them. */
  --hl-line:rgba(77,157,255,.35); --hl-wash:rgba(77,157,255,.07); --hl-glow:rgba(0,229,255,.07);
  --go-line:rgba(70,216,155,.35); --bad-line:rgba(255,107,91,.35); --warn-line:rgba(245,196,81,.35); --info-line:rgba(124,183,255,.35);
  --series-them:#6B7894; --series-them-2:#46546F; --series-them-3:#2F3B55;
  --lane-1:#333F58; --lane-2:#4F5E7C; --lane-3:#7D8AA6; --lane-us-1:#1E3766; --lane-us-2:#2E5DB5; --seg-ink:rgba(6,10,20,.85);
  --mini-img:linear-gradient(135deg,#2A3756,#3A4A72); --mini-img-us:linear-gradient(135deg,rgba(91,155,255,.5),rgba(91,155,255,.15));
  --row-hover:rgba(255,255,255,.015); --shadow-md:0 30px 80px -30px rgba(0,0,0,.65); --shadow-lg:0 24px 60px rgba(0,0,0,.5); --shadow-sm:0 1px 0 rgba(255,255,255,.04) inset; --backdrop:rgba(3,6,12,.72);
  --blue:#5B9BFF; --blue-dim:rgba(91,155,255,.12); --blue-line:rgba(91,155,255,.35); --blue-wash:rgba(91,155,255,.08);
  --indigo:#9C9EFF; --indigo-dim:rgba(140,142,255,.12); --indigo-line:rgba(140,142,255,.32);
  /* Data colour for the HostingWC series in charts and telemetry. One switch if the brand accent changes. */
  --us:var(--blue); --us-wash:var(--blue-wash); --lane-us-ink:#FFFFFF;
  --chart-grid:var(--line); --chart-line:var(--us);
  --good:var(--go); --ni:var(--warn); --poor:var(--bad);
  /* Aliases with the names used in the design brief */
  --background:var(--bg); --surface-elevated:var(--elevated); --text-muted:var(--muted); --accent:var(--primary); --danger:var(--error);
  color-scheme:dark;
}
/* Light theme: designed, not inverted. Paper surfaces, ink text, deeper status colors so they pass contrast on white. */
html[data-theme=light]{
  --ink-0:#F4F6FA; --ink-1:#FFFFFF; --ink-2:#EEF1F6; --ink-3:#E3E8F0;
  --line:#E2E8F0; --line-2:#CBD5E1;
  --fg:#0B1426; --fg-2:#3A4760; --fg-3:#5A667C;
  --hl:#0057D9; --hl-2:#0047B3; --hl-ink:#FFFFFF; --hl-dim:rgba(0,87,217,.08);
  --cyan:#0E7490; --brand-grad:linear-gradient(135deg,#00B8E6 0%,#0066FF 50%,#003B99 100%);
  --glass:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.9); --glass-line:rgba(15,23,42,.08); --glass-line-2:rgba(15,23,42,.14);
  --wc-ring-from:#475569; --wc-ring-mid:#64748B; --wc-ring-to:#94A3B8;
  --primary:#0A0A0A; --on-primary:#FFFFFF; --on-hover:#262626;
  --go:#0A6F44; --bad:#B0322A; --warn:#8A5D00; --info:#1D5FC0;
  --go-dim:rgba(11,122,75,.09); --bad-dim:rgba(192,57,43,.08); --warn-dim:rgba(138,93,0,.09); --info-dim:rgba(29,95,192,.08);
  --hl-line:rgba(0,87,217,.3); --hl-wash:rgba(0,87,217,.05); --hl-glow:rgba(0,102,255,.06);
  --blue:#1D5FC0; --blue-dim:rgba(29,95,192,.08); --blue-line:rgba(29,95,192,.3); --blue-wash:rgba(29,95,192,.06);
  --indigo:#4A45C2; --indigo-dim:rgba(74,69,194,.08); --indigo-line:rgba(74,69,194,.28); --lane-us-ink:#0B1426;
  --go-line:rgba(11,122,75,.3); --bad-line:rgba(192,57,43,.3); --warn-line:rgba(138,93,0,.3); --info-line:rgba(29,95,192,.3);
  --series-them:#8A96AC; --series-them-2:#9AA6BB; --series-them-3:#C9D1DD;
  --lane-1:#D3DAE5; --lane-2:#B3BED0; --lane-3:#5F6D86; --lane-us-1:#D3E1F7; --lane-us-2:#8DB1EA; --seg-ink:rgba(11,20,38,.85);
  --mini-img:linear-gradient(135deg,#C9D2E0,#AEBBD0); --mini-img-us:linear-gradient(135deg,rgba(29,95,192,.5),rgba(91,155,255,.18));
  --row-hover:rgba(11,20,38,.025); --shadow-md:0 1px 2px rgba(16,24,40,.04),0 18px 44px -20px rgba(16,24,40,.2); --shadow-lg:0 24px 60px rgba(16,24,40,.14); --shadow-sm:0 1px 2px rgba(16,24,40,.05); --backdrop:rgba(11,20,38,.45);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink-0)}
body{margin:0;background:var(--ink-0);color:var(--fg);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
::selection{background:var(--hl);color:#fff}
:focus-visible{outline:2px solid var(--hl);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--hl);color:var(--hl-ink);padding:8px 14px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* ---------- Type ---------- */
h1,h2,h3,h4{margin:0;font-family:var(--display);font-stretch:118%;font-weight:750;letter-spacing:-.02em;line-height:1.02;text-wrap:balance}
.d-xl{font-size:clamp(40px,7.6vw,112px);font-stretch:125%;font-weight:800;line-height:.94;letter-spacing:-.035em}
.d-l{font-size:clamp(34px,4.6vw,64px);letter-spacing:-.03em}
.d-m{font-size:clamp(26px,3vw,40px)}
.d-s{font-size:clamp(20px,1.8vw,24px);font-stretch:112%;letter-spacing:-.01em;line-height:1.15}
p{margin:0}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--fg-2);max-width:60ch}
.muted{color:var(--fg-2)} .faint{color:var(--fg-3)}
.ac{color:var(--hl)} .go{color:var(--go)} .bad{color:var(--bad)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tag{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);display:inline-flex;align-items:center;gap:10px}
.tag::before{content:"";width:18px;height:1px;background:currentColor}
.tag.a{color:var(--hl)}
.prose{max-width:66ch;display:grid;gap:14px;color:var(--fg-2)}
.prose strong{color:var(--fg);font-weight:600}
.note{font:400 12.5px/1.5 var(--mono);color:var(--fg-3)}
.note b{color:var(--fg-2);font-weight:500}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(72px,10vw,136px);position:relative}
.sec.tight{padding-block:clamp(48px,6vw,80px)}
.sec + .sec.rule{border-top:1px solid var(--line)}
.head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px);max-width:860px}
.head.split{max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:24px 64px}
@media (max-width:860px){.head.split{grid-template-columns:1fr}}
.grid{display:grid;gap:clamp(14px,1.6vw,20px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:1fr}}
@media (max-width:640px){.g2,.g4{grid-template-columns:1fr}}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- Buttons ---------- */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 22px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--fg);font:600 15px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,transform .2s var(--ease),color .2s;white-space:nowrap}
.btn:hover{border-color:var(--fg-3);background:var(--ink-2)}
.btn:active{transform:translateY(1px)}
.btn.p{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.p:hover{background:var(--on-hover);border-color:var(--on-hover)}
.btn.sm{--h:38px;padding:0 16px;font-size:14px}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.link{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color .2s,color .2s}
.link:hover{border-color:var(--hl);color:var(--hl)}

/* ---------- Header ---------- */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:transparent;border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.hdr.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--ink-0) 82%,transparent);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px)}
.hdr .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);flex:none}
.logo svg{width:30px;height:30px;flex:none}
.logo span{font:800 19px/1 var(--display);font-stretch:125%;letter-spacing:-.03em}
.logo em{font-style:normal;color:var(--hl)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{font-size:14.5px;color:var(--fg-2);text-decoration:none;padding:8px 12px;border-radius:8px;transition:color .2s,background .2s}
.nav a:hover{color:var(--fg);background:var(--ink-2)}
.nav a[aria-current=page]{color:var(--fg)}
.nav a[aria-current=page]::after{content:"";display:block;height:2px;background:var(--hl);border-radius:2px;margin-top:3px}
.hdr .cta{flex:none}
.menu{display:none;margin-left:auto;width:42px;height:42px;border-radius:10px;border:1px solid var(--line-2);background:transparent;color:var(--fg);cursor:pointer;align-items:center;justify-content:center}
.menu span{display:block;width:16px;height:1.5px;background:currentColor;position:relative;transition:transform .25s}
.menu span::before,.menu span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;transition:transform .25s}
.menu span::before{top:-5px}.menu span::after{top:5px}
.hdr.open .menu span{background:transparent}
.hdr.open .menu span::before{transform:translateY(5px) rotate(45deg)}
.hdr.open .menu span::after{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:1199px){
  .nav,.hdr .cta{display:none}
  .menu{display:inline-flex}
  .hdr.open{background:var(--ink-0);border-bottom-color:var(--line)}
  .hdr.open .nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:68px;background:var(--ink-0);padding:8px var(--gut) 20px;border-bottom:1px solid var(--line);gap:0}
  .hdr.open .nav a{font-size:18px;padding:14px 0;border-bottom:1px solid var(--line);border-radius:0}
  .hdr.open .nav a[aria-current=page]::after{display:none}
  .hdr.open .nav a[aria-current=page]{color:var(--hl)}
  .hdr.open .nav .btn{margin-top:16px;border-bottom:0;font-size:16px;border-radius:999px;padding:0 22px}
}
.nav .btn{display:none}
@media (max-width:1199px){.hdr.open .nav .btn{display:inline-flex}}

/* ---------- Theme control: Light / System / Dark ---------- */
.thm{--i:2;position:relative;display:inline-flex;align-items:center;flex:none;padding:3px;border:1px solid var(--line-2);border-radius:999px;background:var(--ink-1);box-shadow:var(--shadow-sm)}
html[data-theme-pref=light] .thm{--i:0} html[data-theme-pref=system] .thm{--i:1}
.thm::before{content:"";position:absolute;top:3px;left:3px;width:30px;height:28px;border-radius:999px;background:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line-2);transform:translateX(calc(var(--i)*30px));transition:transform .3s var(--ease)}
.thm button{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:28px;padding:0;border:0;border-radius:999px;background:none;color:var(--fg-3);cursor:pointer;transition:color .2s}
.thm button:hover,.thm button[aria-checked=true]{color:var(--fg)}
.thm button:focus-visible{outline-offset:1px;border-radius:999px}
.thm svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.thm button[aria-checked=true] svg{transform:rotate(-12deg)}
.thm button::after{content:attr(data-label);position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-3px);padding:6px 9px;border-radius:7px;background:var(--elevated);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);color:var(--fg);font:500 11.5px/1 var(--mono);letter-spacing:.02em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.thm button:hover::after,.thm button:focus-visible::after{opacity:1;transform:translate(-50%,0)}
@media (max-width:1199px){.hdr .thm-menu{margin-left:auto}.hdr .login~.thm-menu{margin-left:0}.hdr .wrap{gap:12px}.hdr .logo{margin-right:auto}}
/* Theme switch: one quick cross-fade of the whole page, not per-component animation */
html.vt-theme::view-transition-old(root),html.vt-theme::view-transition-new(root){animation-duration:.22s;animation-timing-function:cubic-bezier(.2,.7,.1,1)}
html.vt-theme::view-transition-group(*){animation-duration:0s}

/* ---------- Shared status components: Google's good / needs improvement / poor, used by the audit report and the homepage preview ---------- */
.st{display:inline-flex;align-items:center;gap:6px;font:500 11.5px/1 var(--mono);letter-spacing:.04em;white-space:nowrap;color:var(--fg-2)}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fg-3)}
.st.good{color:var(--good)} .st.good::before{background:var(--good)}
.st.ni{color:var(--ni)} .st.ni::before{background:var(--ni);border-radius:1px}
.st.poor{color:var(--poor)} .st.poor::before{background:var(--poor);border-radius:0;transform:rotate(45deg) scale(.85)}
.st.na::before{background:transparent;border:1px solid var(--fg-3)}
b.good,.mono.good{color:var(--good)} b.ni,.mono.ni{color:var(--ni)} b.poor,.mono.poor{color:var(--poor)}
.imp{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font:500 11px/1 var(--mono);letter-spacing:.04em;white-space:nowrap;border:1px solid var(--line-2);color:var(--fg-2)}
.imp.high{color:var(--poor);border-color:color-mix(in srgb,var(--poor) 40%,transparent);background:var(--bad-dim)}
.imp.medium{color:var(--ni);border-color:color-mix(in srgb,var(--ni) 40%,transparent);background:var(--warn-dim)}
.imp.low{color:var(--fg-2)}
.rp-ring{position:relative;width:132px;height:132px;display:grid;place-items:center}
.rp-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.rp-ring circle{fill:none;stroke-width:8}
.rp-ring .tr{stroke:var(--ink-3)}
.rp-ring .fg{stroke:var(--fg-3);stroke-linecap:round;transition:stroke-dashoffset .9s var(--ease)}
.rp-ring.good .fg{stroke:var(--good)} .rp-ring.ni .fg{stroke:var(--ni)} .rp-ring.poor .fg{stroke:var(--poor)}
.rp-ring b{font:600 44px/1 var(--mono);letter-spacing:-.04em}
.rp-ring.good b{color:var(--good)} .rp-ring.ni b{color:var(--ni)} .rp-ring.poor b{color:var(--poor)}
.mini .st::before{display:none}

/* Stage label: places a section in the product loop (measure, diagnose, verify...) */
.stage{display:inline-flex;align-items:center;height:20px;padding:0 8px;border:1px solid var(--indigo-line);border-radius:999px;color:var(--indigo);font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.tag .stage{margin-right:2px}
html[data-theme=light] .panel{box-shadow:var(--shadow-sm)}

/* ---------- Panels ---------- */
.panel{background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r);position:relative;min-width:0}
.panel.raised{background:linear-gradient(180deg,var(--ink-2),var(--ink-1))}
.bezel::before,.bezel::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--line-2);pointer-events:none}
.bezel::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:var(--r);border-color:var(--fg-3)}
.bezel::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:var(--r);border-color:var(--fg-3)}
.ph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);font:500 11.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.ph b{color:var(--fg-2);font-weight:500}
.pb{padding:clamp(18px,2.2vw,28px)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--go);box-shadow:0 0 0 3px var(--go-dim);display:inline-block;flex:none}
.dot.live{animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px transparent}}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font:500 11.5px/1 var(--mono);letter-spacing:.04em;border:1px solid var(--line-2);color:var(--fg-2);white-space:nowrap}
.chip.a{color:var(--hl);border-color:var(--hl-line);background:var(--hl-dim)}
.chip.g{color:var(--go);border-color:var(--go-line);background:var(--go-dim)}
.chip.r{color:var(--bad);border-color:var(--bad-line);background:var(--bad-dim)}

/* ---------- Page hero (inner pages) ---------- */
.phero{padding-block:clamp(56px,8vw,112px) clamp(40px,5vw,72px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phero .wrap{display:grid;gap:22px;position:relative}
.phero h1{font-size:clamp(34px,6vw,84px);font-stretch:125%;font-weight:800;letter-spacing:-.035em;line-height:.96;max-width:15ch}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.35;mask-image:radial-gradient(ellipse 70% 80% at 70% 0%,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 70% 80% at 70% 0%,#000 10%,transparent 70%);pointer-events:none}

/* ---------- Home hero ---------- */
.hero{position:relative;padding-block:clamp(40px,6vw,80px) clamp(56px,7vw,96px);overflow-x:clip}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px) clamp(32px,5vw,72px);align-items:start;position:relative}
.hero-h{grid-column:1/-1;display:grid;gap:22px}
@media (max-width:1020px){.hero .wrap{grid-template-columns:1fr}}
.hero-copy{display:grid;gap:26px;min-width:0}
.hero h1 .l2,.hero h2 .l2{color:var(--hl);display:block}
.urlbar{display:flex;align-items:center;gap:0;background:var(--ink-1);border:1px solid var(--line-2);border-radius:999px;padding:5px;max-width:520px;transition:border-color .2s,box-shadow .2s}
.urlbar:focus-within{border-color:var(--hl);box-shadow:0 0 0 4px var(--hl-dim)}
.urlbar label{font:500 13px/1 var(--mono);color:var(--fg-3);padding-left:16px;white-space:nowrap}
.urlbar input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--fg);font:500 15px/1 var(--mono);padding:0 8px 0 2px;height:44px}
.urlbar input::placeholder{color:var(--fg-3)}
.urlbar .btn{--h:44px;flex:none}
@media (max-width:480px){.urlbar{border-radius:16px;flex-wrap:wrap;padding:6px}.urlbar input{flex-basis:60%}.urlbar .btn{width:100%;margin-top:6px}}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font:400 13px/1.4 var(--mono);color:var(--fg-3)}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.hero-meta svg{width:14px;height:14px;color:var(--go)}
.glow{position:absolute;width:900px;height:900px;right:-300px;top:-420px;background:radial-gradient(circle,var(--hl-glow),transparent 60%);pointer-events:none}

/* Trace instrument (waterfall) */
.trace .pb{display:grid;gap:18px}
.tr-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.tr-clock{font:500 clamp(40px,5vw,60px)/1 var(--mono);letter-spacing:-.04em;color:var(--fg);font-variant-numeric:tabular-nums}
.tr-clock small{font-size:.38em;color:var(--fg-3);margin-left:4px;letter-spacing:0}
.tr-budget{text-align:right;font:400 12px/1.5 var(--mono);color:var(--fg-3)}
.tr-budget b{display:block;font-size:18px;color:var(--go);font-weight:500}
.wf{position:relative;display:grid;gap:7px;padding-top:4px}
.wf-row{display:grid;grid-template-columns:84px minmax(0,1fr) 58px;align-items:center;gap:10px;font:400 12px/1 var(--mono);color:var(--fg-2)}
.wf-row .ms{text-align:right;color:var(--fg-3);font-variant-numeric:tabular-nums}
.wf-track{position:relative;height:14px}
.wf-bar{position:absolute;top:2px;height:10px;border-radius:3px;background:var(--fg-3);transform-origin:left;animation:grow .5s var(--ease) both;animation-delay:var(--d,0s)}
.wf-bar.a{background:var(--hl)}
.wf-bar.l{background:linear-gradient(90deg,var(--hl),var(--hl-2))}
.wf-bar.s{background:var(--lane-2)}
@keyframes grow{from{transform:scaleX(0);opacity:.2}}
.wf-axis{display:grid;grid-template-columns:84px minmax(0,1fr) 58px;gap:10px;margin-top:6px}
.wf-scale{position:relative;height:18px;border-top:1px solid var(--line-2);font:400 11px/1 var(--mono);color:var(--fg-3)}
.wf-scale span{position:absolute;top:6px;transform:translateX(-50%);white-space:nowrap}
.wf-scale span:first-child{transform:none}
.wf-scale span:last-child{transform:translateX(-100%)}
.wf-limit{position:absolute;top:-6px;bottom:22px;width:0;border-left:1.5px dashed var(--go);pointer-events:none}

.wf-head{position:absolute;top:-6px;bottom:22px;width:2px;background:var(--hl);box-shadow:0 0 12px var(--hl);opacity:0;pointer-events:none}
.trace.play .wf-head{animation:sweep var(--dur,1.6s) linear both}
@keyframes sweep{0%{opacity:1;transform:translateX(0)}96%{opacity:1}100%{opacity:0;transform:translateX(var(--to,0))}}
.tr-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.tr-foot div{padding:14px 18px;display:grid;gap:4px}
.tr-foot div+div{border-left:1px solid var(--line)}
.tr-foot span{font:500 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.tr-foot b{font:500 20px/1 var(--mono);font-variant-numeric:tabular-nums}
.replay{background:none;border:0;color:var(--fg-3);font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;display:inline-flex;gap:6px;align-items:center;padding:4px}
.replay:hover{color:var(--hl)}
@media (max-width:520px){.wf-row,.wf-axis{grid-template-columns:62px minmax(0,1fr) 46px;gap:8px}.wf-row{font-size:11px}.tr-foot b{font-size:16px}.tr-foot div{padding:12px}}

/* ---------- Stats strip ---------- */
.strip{border-block:1px solid var(--line);background:var(--ink-1)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:28px 24px;display:grid;gap:8px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{font:500 clamp(28px,3vw,40px)/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat b small{font-size:.5em;color:var(--fg-3);margin-left:3px;letter-spacing:0}
.stat span{font-size:14px;color:var(--fg-2)}
@media (max-width:860px){.strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(3){border-left:0;padding-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}}

/* ---------- Race / ruler ---------- */
.race .panel{overflow:hidden}
.lanes{display:grid;gap:26px;padding:clamp(18px,2.4vw,32px)}
.lane{display:grid;gap:10px}
.lane-h{padding-right:14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.lane-h h3{font-size:17px;font-stretch:112%;letter-spacing:-.01em}
.lane-h .mono{font-size:14px;color:var(--fg-2)}
.lane-t{position:relative;height:34px;border-radius:8px;background:var(--ink-0);border:1px solid var(--line);overflow:hidden}
.seg{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding-left:8px;font:500 11px/1 var(--mono);letter-spacing:.04em;color:var(--seg-ink);white-space:nowrap;overflow:hidden;border-right:1px solid var(--ink-0)}
.seg.x{background:var(--lane-1);color:var(--fg-2)} .seg.y{background:var(--lane-2);color:var(--fg)} .seg.z{background:var(--lane-3);color:var(--ink-0)}
.lane.us .seg.x{background:var(--lane-us-1);color:var(--fg)} .lane.us .seg.y{background:var(--lane-us-2);color:var(--lane-us-ink)} .lane.us .seg.z{background:var(--us)}
.mask{position:absolute;top:0;bottom:0;right:0;background:var(--ink-0);transition:none}
.pagebox{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,24px)}
.mini{border:1px solid var(--line);border-radius:10px;background:var(--ink-0);padding:12px;display:grid;gap:8px;min-height:150px;align-content:start;position:relative}
.mini .bar{height:8px;border-radius:3px;background:var(--line-2);opacity:.15;transition:opacity .3s}
.mini .img{height:62px;border-radius:6px;background:var(--line-2);opacity:.15;transition:opacity .3s}
.mini.on-fcp .bar{opacity:1}
.mini.on-lcp .img{opacity:1;background:var(--mini-img)}
.mini.us.on-lcp .img{background:var(--mini-img-us)}
.mini .st{position:absolute;right:10px;top:10px}
.mini .lbl{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.axis{position:relative;height:26px;margin-top:-10px}
.axis span{position:absolute;top:8px;white-space:nowrap;font:400 11px/1 var(--mono);color:var(--fg-3);transform:translateX(-50%)}
.axis span:first-child{transform:none}
.axis i{position:absolute;top:0;height:6px;width:1px;background:var(--line-2)}
.limit{position:absolute;top:0;bottom:0;border-left:1.5px dashed var(--go);z-index:2;pointer-events:none}
.limit b{position:absolute;top:-2px;left:6px;font:500 11px/1 var(--mono);color:var(--go);background:var(--ink-1);padding:2px 4px;white-space:nowrap}
.head-line{position:absolute;top:0;bottom:0;width:2px;background:var(--us);box-shadow:0 0 14px var(--blue-line);z-index:3;pointer-events:none}
.scrub{display:flex;align-items:center;gap:16px;padding:16px clamp(18px,2.4vw,32px);border-top:1px solid var(--line);flex-wrap:wrap}
.scrub input[type=range]{flex:1;min-width:180px;accent-color:var(--us);height:24px}
.scrub output{font:500 16px/1 var(--mono);min-width:86px;font-variant-numeric:tabular-nums}
.lanes-wrap{position:relative}
@media (max-width:640px){.pagebox{grid-template-columns:1fr 1fr}.mini{min-height:120px;padding:10px}.mini .img{height:44px}}

/* ---------- Stack layers ---------- */
.layers{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--ink-1)}
.layer{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:center;padding:24px clamp(18px,2.4vw,32px);border-top:1px solid var(--line);transition:background .25s}
.layer:first-child{border-top:0}
.layer:hover{background:var(--ink-2)}
.layer h3{font-size:19px;font-stretch:112%;letter-spacing:-.01em;display:grid;gap:6px}
.layer h3 .mono{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);font-stretch:100%}
.layer p{color:var(--fg-2);font-size:15px}
.budget{display:grid;gap:6px}
.budget .bl{display:grid;grid-template-columns:62px minmax(0,1fr) 58px;gap:10px;align-items:center;font:400 11.5px/1 var(--mono);color:var(--fg-3)}
.budget .bt{height:8px;border-radius:3px;background:var(--ink-0);overflow:hidden}
.budget .bt i{display:block;height:100%;background:#4A5878;border-radius:3px}
.budget .bl.us .bt i{background:var(--us)}
.budget .bl .v{text-align:right;color:var(--fg-2);font-variant-numeric:tabular-nums}
.budget .bl.us .v{color:var(--us)}
@media (max-width:900px){.layer{grid-template-columns:1fr;gap:12px}}

/* ---------- Cards ---------- */
.card{padding:clamp(20px,2.4vw,30px);display:grid;gap:12px;align-content:start}
.card h3{font-size:19px;font-stretch:112%;letter-spacing:-.01em;line-height:1.2}
.card p{color:var(--fg-2);font-size:15px}
.ico{width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--hl);background:var(--ink-0)}
.ico svg{width:20px;height:20px}
.feat{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px 16px;padding:22px 0;border-top:1px solid var(--line)}
.feat h3{font-size:17px;font-stretch:110%;letter-spacing:-.005em;line-height:1.25;margin-bottom:6px}
.feat p{font-size:15px;color:var(--fg-2)}

/* ---------- Charts ---------- */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:var(--mono);font-size:11px;fill:var(--fg-3)}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .ax{stroke:var(--line-2);stroke-width:1}
.chart .us{fill:var(--us)}
.chart .them{fill:var(--series-them-2)}
.chart .them2{fill:var(--series-them-3)}
.chart .lbl-us{fill:var(--us);font-weight:500}
.chart .lbl{fill:var(--fg-2)}
.chart .lim{stroke:var(--go);stroke-dasharray:4 4;stroke-width:1.5}
.chart .limt{fill:var(--go)}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font:400 12.5px/1 var(--mono);color:var(--fg-2)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.seg-ctl{display:inline-flex;padding:3px;border:1px solid var(--line-2);border-radius:999px;background:var(--ink-0);gap:2px;flex-wrap:wrap}
.seg-ctl button{border:0;background:transparent;color:var(--fg-2);font:500 13px/1 var(--sans);height:32px;padding:0 14px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.seg-ctl button[aria-pressed=true]{background:var(--ink-3);color:var(--fg)}
.seg-ctl button:hover{color:var(--fg)}
.tip{position:absolute;pointer-events:none;background:var(--ink-3);border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;font:400 12px/1.4 var(--mono);color:var(--fg);white-space:nowrap;opacity:0;transform:translate(-50%,-110%);transition:opacity .15s;z-index:5}
.tip.on{opacity:1}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--ink-1)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);background:var(--ink-0);white-space:nowrap}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.us{color:var(--us)}
tbody tr:hover td{background:var(--row-hover)}

/* ---------- Pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);align-items:stretch}
@media (max-width:980px){.plans{grid-template-columns:1fr;max-width:560px}}
.plans.four{grid-template-columns:repeat(4,minmax(0,1fr));padding-top:12px}
.plans.four .plan{position:relative}.plans.four .badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--ink-1);box-shadow:inset 0 0 0 100px var(--hl-dim)}
@media (min-width:641px){.plans.four{grid-auto-rows:auto;row-gap:0}.plans.four .plan{display:grid;grid-row:span 11;grid-template-rows:subgrid;row-gap:18px;margin-bottom:clamp(14px,1.6vw,20px)}.plans.four .plan .ul{grid-row:span 5;grid-template-rows:subgrid;row-gap:10px}.plans.four .plan>*{align-self:start}.plans.four .plan .for{min-height:0}.plans.four .plan .btn{align-self:end}}
.every{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font:400 13px/1.4 var(--mono);color:var(--fg-2)}.every li:first-child{color:var(--fg);font-weight:500}.every li+li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--go);margin-right:8px;vertical-align:middle}
.plans.four .guar b{white-space:nowrap}@media (min-width:1280px){.plans.four .fit{flex-direction:column;gap:4px}.plans.four .fit b{text-align:left}}.plans.four .guar{align-items:center}
@media (max-width:1279px){.plans.four{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}}
.plan-tabs{display:none}
@media (max-width:640px){
.plan-tabs{display:flex;flex-wrap:nowrap;justify-self:center;max-width:100%}.plan-tabs button{padding:0 clamp(8px,3vw,12px);font-size:clamp(12px,3.6vw,13px)}
.every{justify-content:flex-start;gap:6px 16px}
.plans.four{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);max-width:none}
.plans.four::-webkit-scrollbar{display:none}
.plans.four .plan{flex:0 0 min(86%,360px);scroll-snap-align:start}}
.plan{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:18px}
.plan.hi{border-color:var(--hl-line);background:linear-gradient(180deg,var(--hl-wash),var(--ink-1) 40%)}
.plan .pt{display:flex;justify-content:space-between;align-items:center;gap:10px}
.plan h3{font-size:22px;font-stretch:118%}
.plan .for{color:var(--fg-2);font-size:15px;min-height:3.2em}
.price{display:flex;align-items:baseline;gap:6px}
.price b{font:500 52px/1 var(--mono);letter-spacing:-.05em}
.price b sup{font-size:.42em;vertical-align:top;position:relative;top:.35em;margin-right:2px;letter-spacing:0;color:var(--fg-2)}
.price>span{color:var(--fg-3);font-size:14px}
.price-sub{font:400 12.5px/1.3 var(--mono);color:var(--fg-3);min-height:1.3em}
.ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.ul li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;color:var(--fg-2)}
.ul li svg{width:16px;height:16px;margin-top:4px;color:var(--go)}
.ul li b{color:var(--fg);font-weight:500}
.guar{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:10px;background:var(--ink-0);border:1px solid var(--line);font:400 13px/1.3 var(--mono);color:var(--fg-2)}
.guar b{color:var(--go);font-weight:500}
.plan .btn{margin-top:auto;width:100%}
.toggle{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.save{font:500 12px/1 var(--mono);color:var(--go)}

/* ---------- Accordion ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font:600 18px/1.35 var(--sans);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:transform .3s var(--ease),border-color .2s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--fg-2);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s var(--ease)}
.faq details[open] summary i{border-color:var(--hl)}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq summary:hover{color:var(--hl)}
.faq .ans{padding:0 56px 24px 0;color:var(--fg-2);max-width:72ch;display:grid;gap:10px}

/* ---------- Steps ---------- */
.steps{display:grid;gap:0;counter-reset:s}
.step{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,.8fr);gap:24px;padding:28px 0;border-top:1px solid var(--line);align-items:start}
.step .n{font:500 13px/1 var(--mono);color:var(--hl);letter-spacing:.08em;padding-top:6px}
.step h3{font-size:22px;font-stretch:115%}
.step p{color:var(--fg-2)}
.step .meta{font:400 13px/1.5 var(--mono);color:var(--fg-3)}
@media (max-width:800px){.step{grid-template-columns:1fr;gap:10px}.step .meta{grid-column:1}}

/* ---------- Forms ---------- */
.field{display:grid;gap:8px}
.field label{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.input,select.input,textarea.input{width:100%;background:var(--ink-0);border:1px solid var(--line-2);border-radius:10px;color:var(--fg);font:400 16px/1.4 var(--sans);padding:13px 14px;transition:border-color .2s,box-shadow .2s;appearance:none}
textarea.input{min-height:120px;resize:vertical}
.input:focus{outline:0;border-color:var(--hl);box-shadow:0 0 0 4px var(--hl-dim)}
.input.mono{font-family:var(--mono);font-size:15px}
.err{color:var(--bad);font-size:14px;min-height:1.2em}
.ok-msg{color:var(--go);font-size:14px}

/* ---------- CTA band ---------- */
.band{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:calc(var(--r) + 6px);background:radial-gradient(ellipse 60% 120% at 100% 0%,var(--hl-glow),transparent 60%),var(--ink-1);padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:center}
@media (max-width:900px){.band{grid-template-columns:1fr}}
.band h2{font-size:clamp(30px,3.8vw,52px)}

/* ---------- Footer ---------- */
.ftr{border-top:1px solid var(--line);padding-block:64px 32px;margin-top:clamp(40px,6vw,80px);background:var(--ink-0)}
.ftr-g{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
@media (max-width:860px){.ftr-g{grid-template-columns:1fr 1fr}.ftr-g>div:first-child{grid-column:1/-1}}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr ul a{color:var(--fg-2);text-decoration:none;font-size:14.5px}
.ftr ul a:hover{color:var(--hl)}
.ftr-b{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font:400 12.5px/1.5 var(--mono);color:var(--fg-3)}
.selfspeed{display:inline-flex;gap:8px;align-items:center}
.selfspeed b{color:var(--go);font-weight:500}

/* ---------- Mascot ---------- */
.cmdr{width:72px;height:72px;flex:none;border-radius:16px;background:var(--ink-1);border:1px solid var(--line-2);display:grid;place-items:center;overflow:hidden}
.cmdr svg{width:88%;height:88%}
.cmdr.busy svg{animation:bob 1.2s ease-in-out infinite}
/* The dive (404 and the unlisted dive page). The canvas draws itself from these tokens, so it follows the theme. */
.dive{--dive-sky-1:#070C19;--dive-sky-2:#10203F;--dive-gate:#4D9DFF;--dive-ok:var(--go);--dive-miss:var(--bad);--dive-ink:var(--fg);--dive-ink-2:var(--fg-2);--dive-streak:rgba(150,180,230,.22);
  display:grid;gap:12px;min-width:0}
html[data-theme=light] .dive{--dive-sky-1:#EAF1FB;--dive-sky-2:#CFDDF3;--dive-gate:#1D5FC0;--dive-streak:rgba(29,95,192,.16)}
.dive-cv{display:block;width:100%;aspect-ratio:16/10;max-width:100%;border-radius:var(--r);border:1px solid var(--line-2);background:var(--dive-sky-1);cursor:crosshair;touch-action:pan-y}
.dive.on .dive-cv{touch-action:none}
.dive-cv:focus-visible{outline:2px solid var(--hl);outline-offset:3px}
.dive-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dive-best{font-size:12.5px;color:var(--fg-3);margin-left:auto}
.dive-live{margin:0;font-size:14px;color:var(--fg-2);min-height:1.5em}
@media (max-width:600px){.dive-cv{aspect-ratio:4/3}}
@keyframes bob{50%{transform:translateY(-3px) rotate(-2deg)}}

/* ---------- Reveal ---------- */
.rv{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.pre{opacity:0;transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .js .rv.pre{opacity:1;transform:none}
}
@view-transition{navigation:auto}
@media (max-width:900px){[data-stack]{grid-template-columns:1fr!important}}

/* ---------- Plan finder ---------- */
fieldset.q{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
fieldset.q legend{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);padding:0;margin-bottom:12px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{position:relative;cursor:pointer}
.opts input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opts span{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:var(--ink-1);color:var(--fg-2);font-size:14.5px;transition:all .2s}
.opts label:hover span{border-color:var(--fg-3);color:var(--fg)}
.opts input:checked+span{border-color:var(--hl);color:var(--hl);background:var(--hl-dim)}
.opts input:focus-visible+span{outline:2px solid var(--hl);outline-offset:3px}
.plan{transition:border-color .3s,background .3s}

/* ---------- Ecosystem row ---------- */
.eco{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--ink-1)}
.eco-i{display:grid;gap:10px;align-content:start;padding:24px 22px 28px;text-decoration:none;color:var(--fg);border-left:1px solid var(--line);position:relative;transition:background .25s}
.eco-i:first-child{border-left:0}
.eco-i::after{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;background:var(--line-2);transition:background .25s}
.eco-i:hover{background:var(--ink-2)}
.eco-i:hover::after,.eco-i.hl::after{background:var(--hl)}
.eco-i .mono{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.eco-i.hl .mono{color:var(--hl)}
.eco-i h3{font-size:18px;font-stretch:112%;letter-spacing:-.01em;line-height:1.2}
.eco-i p{font-size:14.5px;color:var(--fg-2)}
@media (max-width:1020px){.eco{grid-template-columns:repeat(2,minmax(0,1fr))}.eco-i{border-top:1px solid var(--line)}.eco-i:nth-child(odd){border-left:0}.eco-i:nth-child(-n+2){border-top:0}.eco-i:last-child{grid-column:1/-1}}
@media (max-width:560px){.eco{grid-template-columns:1fr}.eco-i{border-left:0;border-top:1px solid var(--line)}.eco-i:first-child{border-top:0}}
.stat b small{white-space:nowrap}

/* ---------- Domain search ---------- */
.dsearch{display:flex;gap:8px;background:var(--ink-1);border:1px solid var(--line-2);border-radius:18px;padding:8px;max-width:760px;transition:border-color .2s,box-shadow .2s}
.dsearch:focus-within{border-color:var(--hl);box-shadow:0 0 0 4px var(--hl-dim)}
.dsearch input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--fg);font:500 clamp(17px,2vw,22px)/1 var(--mono);padding:0 14px;height:56px}
.dsearch .btn{--h:56px;padding:0 28px;border-radius:12px}
@media (max-width:520px){.dsearch{flex-direction:column}.dsearch .btn{width:100%}}
.dres{display:grid;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--ink-1)}
.dr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px 24px;align-items:center;padding:16px 22px;border-top:1px solid var(--line)}
.dr:first-child{border-top:0}
.dr.top{background:linear-gradient(90deg,var(--hl-wash),transparent 70%)}
.dr .nm{font:500 17px/1.3 var(--mono);overflow-wrap:anywhere}
.dr .nm small{display:block;font:400 12.5px/1.4 var(--sans);color:var(--fg-3);margin-top:3px}
.dr .pr{text-align:right;font:500 16px/1.3 var(--mono);white-space:nowrap}
.dr .pr small{display:block;font:400 12px/1.4 var(--mono);color:var(--fg-3)}
.dr .btn{--h:38px;padding:0 16px;font-size:14px}
.dr.taken .nm{color:var(--fg-3)}
@media (max-width:620px){.dr{grid-template-columns:minmax(0,1fr) auto}.dr .btn,.dr .chip.r{grid-column:1/-1;justify-self:start}}
.tlds{display:flex;flex-wrap:wrap;gap:8px}

/* =====================================================================
   v6 additions: grouped navigation, audit results, report, tracker, system
   ===================================================================== */

/* ---------- Grouped navigation ---------- */
.nav{align-items:center}
.nav .grp{position:relative}
.nav .grp>button{font:400 14.5px/1 var(--sans);color:var(--fg-2);background:none;border:0;padding:8px 12px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .2s,background .2s}
.nav .grp>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav .grp>button[aria-expanded=true]::after{transform:translateY(1px) rotate(-135deg)}
.nav .grp>button:hover,.nav .grp>button[aria-expanded=true]{color:var(--fg);background:var(--ink-2)}
.nav .grp.cur>button{color:var(--fg)}
.nav .grp.cur>button::before{content:"";position:absolute;left:12px;right:12px;bottom:1px;height:2px;border-radius:2px;background:var(--hl)}
.dd{position:absolute;top:calc(100% + 10px);left:-12px;width:min(560px,90vw);display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:10px;background:var(--elevated);border:1px solid var(--border-strong);border-radius:var(--r);box-shadow:var(--shadow-lg);z-index:60}
.dd.one{width:320px;grid-template-columns:1fr}
.dd[hidden]{display:none}
.nav .dd a{display:grid;gap:3px;padding:10px 12px;border-radius:10px;font-size:14.5px;color:var(--fg)}
.nav .dd a small{font-size:13px;color:var(--fg-2);line-height:1.35}
.nav .dd a:hover{background:var(--ink-2)}
.nav .dd a[aria-current=page]::after{display:none}
.nav .dd a[aria-current=page]{background:var(--hl-dim)}
@media (min-width:1200px){.dd{animation:ddin .16s var(--ease)}}
@keyframes ddin{from{opacity:0;transform:translateY(-4px)}}
@media (max-width:1199px){
  .hdr.open .nav{max-height:calc(100dvh - 68px);overflow-y:auto;align-items:stretch}
  .hdr.open .nav .grp{border-bottom:1px solid var(--line)}
  .hdr.open .nav .grp>button{font-size:18px;padding:14px 0;width:100%;justify-content:space-between;border-radius:0}
  .hdr.open .nav .grp>button:hover,.hdr.open .nav .grp>button[aria-expanded=true]{background:none}
  .hdr.open .nav .grp.cur>button::before{display:none}
  .hdr.open .dd{position:static;width:auto;box-shadow:none;border:0;background:none;padding:0 0 12px;grid-template-columns:1fr;animation:none}
  .hdr.open .nav .dd a{font-size:16px;padding:10px 0;border:0}
  .hdr.open .nav .dd a small{display:none}
  .hdr.open .nav .dd a[aria-current=page]{padding-inline:10px;border-radius:8px;color:var(--hl)}
}

/* ---------- Hero secondary path ---------- */
.hero-alt{font-size:14.5px;color:var(--fg-2)}
.hero-alt a{color:var(--fg)}

/* ---------- Lifecycle row (reuses .eco) ---------- */
.eco-i .step-n{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}

/* ---------- Plan extras ---------- */
.fit{display:flex;justify-content:space-between;gap:10px;font:400 13px/1.3 var(--mono);color:var(--fg-2);padding:0 2px}
.fit b{color:var(--fg);font-weight:500}
.plan .alt{font-size:13.5px;color:var(--fg-2);text-align:center;margin-top:-6px}
.plan .alt a{color:var(--fg)}
.same{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden}
.same>div{padding:var(--s5);border-left:1px solid var(--border);display:grid;gap:6px;align-content:start}
.same>div:first-child{border-left:0}
.same h3{font-size:16px;font-stretch:110%;letter-spacing:-.005em}
.same p{font-size:14px;color:var(--fg-2)}
@media (max-width:900px){.same{grid-template-columns:1fr 1fr}.same>div:nth-child(3){border-left:0}.same>div:nth-child(n+3){border-top:1px solid var(--border)}}
@media (max-width:520px){.same{grid-template-columns:1fr}.same>div{border-left:0!important}.same>div+div{border-top:1px solid var(--border)}}

/* ---------- Audit: progress stages ---------- */
.stages{list-style:none;margin:0;padding:0;display:grid;gap:10px;font:400 13.5px/1.4 var(--mono);color:var(--fg-3)}
.stages li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:center}
.stages li::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid var(--line-2);justify-self:center}
.stages li.on{color:var(--fg)}
.stages li.on::before{border-color:var(--hl);border-top-color:transparent;animation:spin .8s linear infinite}
.stages li.ok{color:var(--fg-2)}
.stages li.ok::before{background:var(--go);border-color:var(--go)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Audit: result blocks ---------- */
.split-bar{display:grid;gap:10px}
.split-track{display:flex;height:14px;border-radius:4px;overflow:hidden;background:var(--ink-0);border:1px solid var(--border)}
.split-track i{display:block;height:100%;transition:width .6s var(--ease)}
.split-track .srv{background:var(--hl)}
.split-track .fe{background:#4F5E7C}
.split-legend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font:400 12.5px/1.3 var(--mono);color:var(--fg-2)}
.split-legend span{display:inline-flex;gap:8px;align-items:center}
.split-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.next{display:grid;gap:12px;padding:var(--s5);border-radius:12px;border:1px solid var(--hl-line);background:linear-gradient(180deg,var(--hl-wash),transparent)}
.next h3{font-size:19px}
.next p{color:var(--fg-2);font-size:15px}
.alert{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:14px 16px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface-2);font-size:14.5px;color:var(--fg-2)}
.alert::before{content:"";width:8px;height:8px;border-radius:50%;margin-top:7px;justify-self:center;background:var(--info)}
.alert.warn{border-color:var(--warn-line);background:var(--warn-dim)}.alert.warn::before{background:var(--warn)}
.alert.err{border-color:var(--bad-line);background:var(--bad-dim)}.alert.err::before{background:var(--bad)}
.alert.ok{border-color:var(--go-line);background:var(--go-dim)}.alert.ok::before{background:var(--go)}
.alert b{color:var(--fg);font-weight:600}
.chip.w{color:var(--warn);border-color:var(--warn-line);background:var(--warn-dim)}
.chip.i{color:var(--info);border-color:var(--info-line);background:var(--info-dim)}

/* ---------- Metric tiles ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden}
.kpi{padding:var(--s5);display:grid;gap:8px;border-left:1px solid var(--border);align-content:start}
.kpi:first-child{border-left:0}
.kpi .k{font:500 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.kpi .v{font:500 clamp(28px,3vw,38px)/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:.45em;color:var(--fg-3);margin-left:3px;letter-spacing:0}
.kpi .d{font:400 12.5px/1.4 var(--mono);color:var(--fg-2)}
@media (max-width:860px){.kpis{grid-template-columns:1fr 1fr}.kpi:nth-child(3){border-left:0}.kpi:nth-child(n+3){border-top:1px solid var(--border)}}

/* ---------- View switch (owner / technical) ---------- */
.views [data-view]{display:none}
.views[data-show=owner] [data-view=owner],.views[data-show=tech] [data-view=tech]{display:grid}

/* ---------- Progressive disclosure ---------- */
details.more{border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
details.more>summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;justify-content:space-between;gap:16px;align-items:center;font:600 15.5px/1.3 var(--sans)}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"Show";font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--hl)}
details.more[open]>summary::after{content:"Hide"}
details.more>summary:hover{color:var(--hl)}
details.more>.in{padding:0 20px 20px;display:grid;gap:14px;color:var(--fg-2);font-size:15px}
pre.code{margin:0;padding:14px 16px;background:var(--ink-0);border:1px solid var(--border);border-radius:10px;overflow-x:auto;font:400 13px/1.6 var(--mono);color:var(--fg)}

/* ---------- Migration tracker ---------- */
.track{list-style:none;margin:0;padding:0;display:grid}
.track li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;padding:12px 0;align-items:start;position:relative}
.track li::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--line-2);background:var(--ink-1);justify-self:center;margin-top:4px;z-index:1}
.track li::after{content:"";position:absolute;left:13px;top:26px;bottom:-12px;width:2px;background:var(--line)}
.track li:last-child::after{display:none}
.track li.ok::before{background:var(--go);border-color:var(--go)}
.track li.ok::after{background:var(--go-line)}
.track li.now::before{border-color:var(--hl);box-shadow:0 0 0 4px var(--hl-dim)}
.track li.you::before{border-color:var(--warn);background:var(--warn)}
.track h3{font:600 15px/1.35 var(--sans);letter-spacing:0}
.track p{font-size:13.5px;color:var(--fg-2);margin-top:2px}
.track .when{font:400 12px/1.4 var(--mono);color:var(--fg-3);white-space:nowrap;padding-top:2px}
.track li.now .when{color:var(--hl)} .track li.you .when{color:var(--warn)}
.sitestate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border)}
.sitestate div{padding:14px 18px;display:grid;gap:4px;border-left:1px solid var(--border)}
.sitestate div:first-child{border-left:0}
.sitestate span{font:500 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.sitestate b{font:500 14.5px/1.3 var(--sans)}
@media (max-width:560px){.sitestate{grid-template-columns:1fr}.sitestate div{border-left:0;border-top:1px solid var(--border)}.sitestate div:first-child{border-top:0}.track li{grid-template-columns:28px minmax(0,1fr)}.track .when{grid-column:2}}

/* ---------- Design system page ---------- */
.sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sw div{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.sw i{display:block;height:56px;border-bottom:1px solid var(--border)}
.sw span{display:block;padding:10px 12px;font:400 12px/1.45 var(--mono);color:var(--fg-2)}
.sw span b{display:block;color:var(--fg);font-weight:500}
.specimen{display:grid;gap:18px}
.specimen>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;align-items:baseline;padding-bottom:18px;border-bottom:1px solid var(--border)}
@media (max-width:640px){.specimen>div{grid-template-columns:1fr;gap:6px}}
.spc{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.spc div{display:grid;gap:6px;justify-items:center;font:400 11.5px/1 var(--mono);color:var(--fg-3)}
.spc i{display:block;background:var(--hl);border-radius:2px;height:12px}

/* Footer column headings are labels, not document headings */
.ftr .fh{font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:16px}

.ul.neg li svg{color:var(--warn)}
@media (max-width:520px){.wf-scale span:nth-child(2),.wf-scale span:nth-child(4){display:none}}

/* ---------- Domain search v2: ending filter, loading rows, cart ---------- */
.tld{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);font:500 13.5px/1 var(--mono);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.tld span{color:var(--muted);font-weight:400}
.tld:hover{border-color:var(--fg-3);color:var(--text)}
.tld[aria-pressed=true]{border-color:var(--hl-line);background:var(--hl-dim);color:var(--hl)}
.tld[aria-pressed=true] span{color:var(--hl-2)}
.dr.sk .nm{color:var(--muted)}
.skl{display:block;width:72px;height:14px;border-radius:4px;background:linear-gradient(90deg,var(--surface-2),var(--elevated),var(--surface-2));background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.dres .alert{border-radius:0;border:0}
.cartbar{position:sticky;bottom:16px;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px 12px 20px;border:1px solid var(--hl-line);border-radius:14px;background:color-mix(in srgb,var(--elevated) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:500 14px/1.3 var(--mono);box-shadow:0 16px 40px rgba(0,0,0,.4)}

/* ---------- Customer account (app shell) ---------- */
.warn-t{color:var(--warning)}
.lbl{font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin-right:4px}
.stack{display:grid;gap:var(--s4);align-content:start}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--border-strong);border-top-color:var(--primary);display:inline-block;flex:none;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}
.app{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:var(--s5);padding:var(--s5) var(--s4);border-right:1px solid var(--border);background:var(--surface);overflow-y:auto}
.side .logo{padding:0 var(--s2)}
.side-org{display:grid;gap:6px}
.side-org label{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.side-org select{padding:9px 10px;font-size:14.5px}
.side-nav{display:grid;gap:2px}
.side-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--text-2);text-decoration:none;font:500 15px/1.2 var(--sans)}
.side-nav a svg{width:18px;height:18px;flex:none}
.side-nav a:hover{background:var(--surface-2);color:var(--text)}
.side-nav a[aria-current]{background:var(--hl-dim);color:var(--primary)}
.side-foot{margin-top:auto;display:grid;gap:var(--s3)}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--border);border-radius:999px;background:var(--bg)}
.modes button{height:32px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font:500 13.5px/1 var(--sans);cursor:pointer}
.modes button[aria-pressed=true]{background:var(--elevated);color:var(--text)}
.app-main{min-width:0;padding:var(--s6) clamp(16px,3.5vw,48px) var(--s8)}
.app-main>#view{max-width:1120px;display:grid;gap:var(--s5)}
.previewbar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;max-width:1120px;margin-bottom:var(--s5);padding:10px 14px;border:1px dashed var(--border-strong);border-radius:12px;font:400 12.5px/1.5 var(--mono);color:var(--text-2)}
.previewbar b{color:var(--informational);font-weight:500}
.vh{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-end;justify-content:space-between}
.vh h1{overflow-wrap:anywhere}
.vh p{margin:8px 0 0;font-size:15px}
.loadstate{display:flex;align-items:center;gap:12px;padding:var(--s6) var(--s5);border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text-2);font-size:15px}
.empty{padding:var(--s7) var(--s5);text-align:center;display:grid;gap:var(--s3);justify-items:center}
.empty p{margin:0;max-width:52ch}
.crumb{display:flex;gap:8px;font:400 13px/1 var(--mono);color:var(--muted);flex-wrap:wrap}
.crumb a{color:var(--text-2)}
.sitelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:var(--s4)}
.sitecard{display:grid;gap:var(--s4);padding:var(--s5);text-decoration:none;color:inherit;transition:border-color .2s,background .2s}
.sitecard:hover{border-color:var(--border-strong);background:var(--surface-2)}
.sc-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 12px;align-items:flex-start}
.sc-h>div{min-width:0}
.sc-d{display:block;font:600 18px/1.25 var(--sans);overflow-wrap:break-word}
.sc-n{display:block;margin-top:4px;font-size:13.5px;color:var(--text-2)}
.sc-m{margin:0;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.sc-m svg{width:16px;height:16px;vertical-align:-3px;margin-right:8px;color:var(--muted)}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.checks li{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:8px;border:1px solid var(--border);font-size:12.5px;color:var(--text-2)}
.checks li span b{font-weight:600;color:var(--text);margin-right:5px}
.checks li svg{width:14px;height:14px;flex:none}
.checks li.ok svg{color:var(--success)} .checks li.pend svg{color:var(--informational)} .checks li.warn svg{color:var(--warning)} .checks li.none svg{color:var(--muted)}
.checks li.warn{border-color:var(--warn-line)}
.checks.big{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:var(--s3)}
.checks.big li{padding:14px 16px;border-radius:12px;background:var(--surface);font-size:14px}
.checks.big li span{display:grid;gap:2px}
.checks.big li span b{margin:0}
.checks.big li svg{width:20px;height:20px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;padding:12px 14px;color:var(--text-2);text-decoration:none;font:500 14.5px/1 var(--sans);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--text)}
.tabs a[aria-current=page]{color:var(--primary);border-bottom-color:var(--primary)}
#tab{display:grid;gap:var(--s5)}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.acts .btn,.vh .btn,.alert .btn{gap:8px}
.mig{display:grid;gap:var(--s4)}
.mig h2{margin-top:10px}
.mig p{margin:8px 0 0}
.prog{height:8px;border-radius:999px;background:var(--elevated);overflow:hidden}
.prog i{display:block;height:100%;background:var(--primary);border-radius:inherit}
.feed{list-style:none;margin:0;padding:0;display:grid}
.feed li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 0;border-top:1px solid var(--border);font-size:14.5px}
.feed li:first-child{border-top:0;padding-top:0}
.feed li b{font-weight:600;overflow-wrap:anywhere}
.feed li span{grid-column:1;color:var(--text-2);font-size:13.5px;overflow-wrap:anywhere}
.feed li time{grid-column:2;grid-row:1;font:400 12.5px/1.5 var(--mono);color:var(--muted);white-space:nowrap}
.dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;margin:0;font-size:14.5px}
.dl dt{color:var(--muted)} .dl dd{margin:0;overflow-wrap:anywhere}
.meter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;font-size:14px}
.mbx{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mbx-in{display:flex;align-items:center;gap:8px;flex:1 1 260px;min-width:0}
.mbx-in .input{flex:1 1 120px;min-width:0;padding:9px 12px}
.mbx-in span{overflow-wrap:anywhere;font-size:14px}
textarea.input{min-height:120px;resize:vertical}
dialog.modal{width:min(480px,calc(100vw - 32px));padding:0;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface-2);color:var(--text)}
dialog.modal::backdrop{background:var(--backdrop)}
dialog.modal form{display:grid;gap:var(--s4);padding:var(--s5)}
dialog.modal p{margin:0;color:var(--text-2);font-size:15px}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:sticky;top:0;z-index:20;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:10px var(--gut);border-right:0;border-bottom:1px solid var(--border)}
  .side .logo span{font-size:17px}
  .side-org{margin-left:auto;grid-auto-flow:column;align-items:center}
  .side-org select{max-width:52vw}
  .side-nav{order:5;flex-basis:100%;display:flex;overflow-x:auto;gap:4px;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:0 var(--gut)}
  .side-nav::-webkit-scrollbar{display:none}
  .side-nav a{flex:none;padding:8px 12px}
  .side-foot{order:4;margin:0;flex-basis:100%;grid-template-columns:auto 1fr;align-items:center}
  .side-foot .modes{width:200px}
  .app-main{padding-top:var(--s5)}
}
@media (max-width:520px){
  .side-org label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rtable,.rtable tbody,.rtable tr,.rtable td{display:block}
  .rtable tr{padding:12px 14px;border-top:1px solid var(--border)}
  .rtable tr:first-child{border-top:0}
  .rtable td{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border:0;text-align:right}
  .rtable td::before{content:attr(data-l);font:500 11px/1.8 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left}
  .meter{grid-template-columns:1fr auto}.meter .prog{grid-column:1/-1;grid-row:2}
  .feed li{grid-template-columns:1fr}.feed li time{grid-column:1;grid-row:auto}
}
/* Sign in */
.auth{min-height:100vh;display:grid;place-items:center;padding:var(--s6) var(--gut)}
.auth-box{width:min(440px,100%);display:grid;gap:var(--s5)}
.auth-box .logo{justify-self:center}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--border);border-radius:999px}
.auth-tabs a{display:grid;place-items:center;height:38px;border-radius:999px;text-decoration:none;color:var(--text-2);font:500 14.5px/1 var(--sans)}
.auth-tabs a[aria-current]{background:var(--elevated);color:var(--text)}
.auth form{display:grid;gap:var(--s4)}
.auth h1{font-size:clamp(26px,4vw,32px);text-align:center}
.hdr .login{color:var(--fg-2);text-decoration:none;font:500 15px/1 var(--sans);flex:none}
.hdr .login:hover{color:var(--fg)}
@media (max-width:1199px){.hdr .login{margin-left:auto}}
@media (max-width:1199px){.hdr .login~.menu{margin-left:0}}
/* Phones: "Sign in" moves into the menu so the bar keeps logo, theme and menu without overflowing */
.nav .nav-auth{display:none}
@media (max-width:480px){.hdr .wrap>.login{display:none}.hdr.open .nav .nav-auth{display:block}}
@media (max-width:520px){.checks.big li{padding:12px}.checks.big li svg{width:18px;height:18px}}
/* Account: needs-you list, setup tracker, technical sub-line */
.todo{display:grid;gap:var(--s3);border-color:var(--warn-line)}
.todo ul{list-style:none;margin:0;padding:0;display:grid}
.todo li{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--border)}
.todo li:first-child{border-top:0;padding-top:0}
.todo li div{display:grid;gap:2px;min-width:0;flex:1 1 280px}
.todo li b{font-weight:600}
.todo li span{color:var(--text-2);font-size:14px}
.setup{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:st}
.setup li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--border);font-size:14.5px;counter-increment:st}
.setup li:first-child{border-top:0}
.setup li::before{content:counter(st);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:500 12px/1 var(--mono);border:1px solid var(--border-strong);color:var(--muted)}
.setup li.done::before{content:"✓";border-color:var(--go-line);color:var(--success);background:var(--go-dim)}
.setup li.retrying::before,.setup li.running::before{border-color:var(--info-line);color:var(--informational);background:var(--info-dim)}
.setup li span{font:400 12.5px/1.4 var(--mono);color:var(--text-2)}
.setup li.retrying span{color:var(--informational)}
.setup li.waiting b{color:var(--text-2);font-weight:500}
.checks li small.tech{display:block;font:400 11.5px/1.4 var(--mono);color:var(--muted)}
/* Guarantee lifecycle */
.cycle{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden}
.cycle li{display:grid;gap:10px;align-content:start;padding:var(--s5);border-left:1px solid var(--border);border-top:1px solid var(--border)}
.cycle li:nth-child(3n+1){border-left:0}.cycle li:nth-child(-n+3){border-top:0}
.cycle h3{font-size:20px}
.cycle p{margin:0;color:var(--text-2);font-size:15px}
.cycle .who{font:500 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:auto}
@media (max-width:900px){.cycle{grid-template-columns:1fr 1fr}.cycle li:nth-child(n){border-left:1px solid var(--border);border-top:1px solid var(--border)}.cycle li:nth-child(2n+1){border-left:0}.cycle li:nth-child(-n+2){border-top:0}}
@media (max-width:560px){.cycle{grid-template-columns:1fr}.cycle li:nth-child(n){border-left:0;border-top:1px solid var(--border)}.cycle li:first-child{border-top:0}}
/* Platform status columns */
.roadmap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden}
.rm-col{display:grid;gap:12px;align-content:start;padding:var(--s5);border-left:1px solid var(--border)}
.rm-col:first-child{border-left:0}
.rm-col .chip{justify-self:start}
.rm-col h3{font-size:19px}
.rm-col .ul{font-size:14.5px}
@media (max-width:1020px){.roadmap{grid-template-columns:1fr 1fr}.rm-col:nth-child(3){border-left:0}.rm-col:nth-child(n+3){border-top:1px solid var(--border)}}
@media (max-width:560px){.roadmap{grid-template-columns:1fr}.rm-col{border-left:0!important}.rm-col+.rm-col{border-top:1px solid var(--border)}}
.rm-col .ul li{display:block;position:relative;padding-left:16px}.rm-col .ul li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--border-strong)}.rm-col:first-child .ul li::before{background:var(--success)}
@media (max-width:340px){.kpis{grid-template-columns:1fr}.kpi{border-left:0!important}.kpi+.kpi{border-top:1px solid var(--border)}}
@media (min-width:901px){.app{background:linear-gradient(90deg,var(--surface) 247px,var(--border) 247px,var(--border) 248px,transparent 248px)}.side{border-right:0}}

/* ---------- Member support (support.html, homepage #support) ---------- */
.spt-topics .ul{font-size:14.5px;gap:8px}
.spt-no .ul li svg{color:var(--fg-3)}
.spt-games{display:flex;flex-wrap:wrap;gap:8px}
.spt-games .chip{height:28px;font-size:12px}
.spt-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border)}
.spt-points>div{padding:var(--s5) var(--s5) 0 0;display:grid;gap:6px;align-content:start}
.spt-points>div+div{padding-left:var(--s5);border-left:1px solid var(--border)}
.spt-points h3{font-size:16px;font-stretch:110%;letter-spacing:-.005em}
.spt-points p{font-size:15px;color:var(--fg-2)}
@media (max-width:900px){.spt-points{grid-template-columns:1fr}.spt-points>div+div{padding-left:0;border-left:0;border-top:1px solid var(--border);margin-top:var(--s5)}}
.same.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.same.five{grid-template-columns:repeat(3,minmax(0,1fr))}.same.five>div{border-left:1px solid var(--border)}.same.five>div:nth-child(3n+1){border-left:0}.same.five>div:nth-child(n+4){border-top:1px solid var(--border)}}
@media (max-width:640px){.same.five{grid-template-columns:1fr}.same.five>div{border-left:0}.same.five>div+div{border-top:1px solid var(--border)}}

/* ---------- v12 refinement: evidence, phases, security flow, conversion ---------- */
/* Evidence row: what a figure is, and where to check it */
.evid{display:flex;justify-content:space-between;align-items:center;gap:10px 20px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2)}
.evid p{margin:0;font-size:13px;color:var(--fg-3);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.evid .src{display:inline-flex;align-items:center;gap:7px;height:22px;padding:0 9px;border-radius:999px;border:1px solid var(--line-2);font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap}
.evid .src::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid var(--fg-3)}
.evid .src.live::before{border-color:var(--go);background:var(--go)}
.evid .chk{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:13.5px}
.evid .chk a{display:inline-flex;align-items:center;gap:6px}
/* Phase labels on the request path (Request, Process, Deliver, Verify) */
.rpath.phased{padding-top:34px;align-items:stretch}
.rpath.phased .pg{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0}
.rpath.phased .pg.solo{flex:0 1 auto}
.rpath.phased .pg::before{content:attr(data-ph);position:absolute;left:0;top:-24px;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--indigo);white-space:nowrap}
.rpath.phased .pg::after{content:"";position:absolute;left:0;right:12px;top:-12px;height:1px;background:linear-gradient(90deg,var(--indigo-line),transparent)}
.layer .ph{display:inline-block;margin-right:8px;padding:2px 6px;border-radius:5px;border:1px solid var(--indigo-line);color:var(--indigo);letter-spacing:.12em}
@media (max-width:900px){
  .rpath.phased{display:grid;gap:12px;padding-top:12px}
  .rpath.phased>i{display:none}
  .rpath.phased .pg{flex-wrap:wrap;gap:8px 6px;padding-top:18px}
  .rpath.phased .pg::before{top:0}
  .rpath.phased .pg::after{display:none}
}
/* Four-step flow (security: Detect, Analyze, Mitigate, Verify) */
.flow4{list-style:none;margin:0 0 clamp(28px,4vw,44px);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);background:var(--ink-1);overflow:hidden;counter-reset:f4}
.flow4 li{position:relative;display:grid;gap:8px;align-content:start;padding:20px 22px 22px;border-left:1px solid var(--line);counter-increment:f4}
.flow4 li:first-child{border-left:0}
.flow4 li::before{content:"0" counter(f4);font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--fg-3)}
.flow4 li:not(:last-child)::after{content:"";position:absolute;right:-6px;top:22px;width:10px;height:10px;border-top:1px solid var(--line-2);border-right:1px solid var(--line-2);background:var(--ink-1);transform:rotate(45deg);z-index:1}
.flow4 b{font:500 12.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--indigo)}
.flow4 p{margin:0;font-size:14.5px;line-height:1.5;color:var(--fg-2)}
@media (max-width:900px){.flow4{grid-template-columns:1fr 1fr}.flow4 li:nth-child(3){border-left:0}.flow4 li:nth-child(n+3){border-top:1px solid var(--line)}.flow4 li:nth-child(2)::after{display:none}}
@media (max-width:520px){.flow4{grid-template-columns:1fr}.flow4 li{border-left:0}.flow4 li+li{border-top:1px solid var(--line)}.flow4 li::after{display:none}}
/* Conversion: value line before pricing, next step after the guarantee */
.incl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 18px}
.incl>span:first-child{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-right:4px}
.incl .chip{height:28px;font-size:12px;color:var(--fg-2)}
.incl .chip svg{width:12px;height:12px;color:var(--go)}
.nextstep{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px}
.nextstep .note{flex-basis:100%;margin:0}
/* Polish: linked cards, icons, focus */
a.panel.card{transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
a.panel.card:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow-md)}
a.panel.card:focus-visible{outline-offset:4px}
.panel.card .ico{transition:border-color .25s var(--ease)}
.panel.card:hover .ico{border-color:var(--hl-line)}
.layer:hover .ph{background:var(--indigo-dim)}
@media (prefers-reduced-motion:reduce){a.panel.card,a.panel.card:hover{transition:none;transform:none}}

/* v21 polish */
.layer{grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr)}.layer p{max-width:64ch}
@media (max-width:900px){.layer{grid-template-columns:1fr}}
#pricing a.card{grid-template-rows:auto auto 1fr auto}#pricing a.card .row{min-height:24px}
.sec{padding-block:clamp(64px,8vw,112px)}
.lead,.card p,.feat p,.eco-i p,.ans p,.muted{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.ftr-g .btn{justify-self:start}
@media (max-width:520px){.phero .row .btn,.band .row .btn{flex:1 1 100%;justify-content:center}}
.hdr:has(.dd a[href="audit.html"][aria-current=page]) .cta{visibility:hidden}
body:has(#af) .ftr-g>div:first-child .btn{display:none}
@media (max-width:900px){.rpath.phased .pg>i{display:none}}
.feat h3,.spt-points h3{font-size:18px}
.menu{width:44px;height:44px}
@media (max-width:860px){.ftr ul{gap:2px}.ftr ul a{display:inline-block;padding-block:10px}}
@media (max-width:640px){.seg-ctl button{height:40px}}
.btn.p:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

.selfspeed{display:inline}.selfspeed .dot{display:inline-block;margin-right:8px;vertical-align:middle}
.step .n{white-space:nowrap}
@media (max-width:560px){.stack-sm tr{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--line)}.stack-sm td:nth-child(2){grid-column:1/-1;grid-row:2;padding-top:0;color:var(--fg-2)}.stack-sm td{border-bottom:0}
.hide-last-sm th:last-child,.hide-last-sm td:last-child{display:none}.faq .ans{padding-right:0}.ph{flex-wrap:wrap}}
.tr-foot div{align-content:space-between}
@media (pointer:coarse){.tld,.seg-ctl button,.dr .btn{height:44px;--h:44px}}
.tlds{max-width:760px}
.fit span{flex:none}.fit b{text-align:right}
.ph .seg-ctl{flex:none;flex-wrap:nowrap}
.ul.pb{padding:clamp(18px,2.2vw,28px)}
tr.grp td,tbody tr.grp:hover td{background:var(--ink-0);padding-block:10px}
@media (max-width:620px){#compare th,#compare td{padding:12px}#compare table{font-size:13.5px;min-width:520px}#compare tr:not(.grp) td:first-child,#compare th:first-child{position:sticky;left:0;z-index:1;background:var(--ink-1);box-shadow:1px 0 0 var(--line)}#compare th:first-child{background:var(--ink-0)}}
[data-stack]>div:first-child>.d-l{font-size:clamp(32px,3.6vw,52px)}

/* v22 */
@keyframes rv-safe{to{opacity:1;transform:none}}
.js .rv.pre{animation:rv-safe 0s 2.5s forwards}
@media print{.js .rv.pre{opacity:1;transform:none}}
.grid>.panel.card{display:flex;flex-direction:column}
.card .card-link{margin-top:auto;align-self:flex-start;font-size:14px;padding-top:6px}
.ftr{margin-top:0}
.sec:has(+ .sec.tight){padding-bottom:clamp(40px,5vw,64px)}
.d-l{font-size:clamp(32px,4.2vw,56px)}
.head.split{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
@media (max-width:860px){.head.split{grid-template-columns:1fr}}
.hdr:has(.dd a[href="audit.html"][aria-current=page]) .cta{display:none}
#guarantee{background:radial-gradient(ellipse 45% 60% at 18% 45%,var(--go-dim),transparent 70%)}
#pricing{background:linear-gradient(180deg,var(--ink-1),var(--ink-0) 55%)}
.wf-row>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band{border-color:var(--line-2)}
.band::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--hl-line),transparent)}
.selfspeed b,#selfspeed b{white-space:nowrap}
.chart .lbl,.chart .lbl-us{text-transform:none;letter-spacing:0}
.nc{text-transform:none}
.tld[aria-pressed=true]{border-color:var(--blue-line);background:var(--blue-dim);color:var(--fg)}
.tld[aria-pressed=true] span{color:var(--blue)}
.bezel::before,.bezel::after{content:none}
@media (max-width:980px){.plan .for{min-height:0}}
.fit b{text-wrap:balance}
.card>.chip{justify-self:start;align-self:flex-start}

/* ---------- v26 brand layer: continuity with the client dashboard (my.hostingwc.com) ----------
   Headings in Geist semibold, tight; hairline glass surfaces; neutral primary actions; blue for links and focus. */
h1,h2,h3,h4{font-family:var(--sans);font-stretch:100%;font-weight:600;letter-spacing:-.03em;line-height:1.08}
.d-xl{font-size:clamp(40px,6.4vw,92px);font-stretch:100%;font-weight:650;letter-spacing:-.045em;line-height:1}
.d-l{font-size:clamp(32px,4.2vw,56px);letter-spacing:-.04em;line-height:1.04}
.d-m{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;line-height:1.12}
.d-s{font-stretch:100%;letter-spacing:-.02em}
.phero h1{font-family:var(--sans);font-stretch:100%;font-weight:650;letter-spacing:-.045em;line-height:1}
.logo{gap:9px}
.logo svg,.logo .wc-mark{width:30px;height:30px}
.logo span{font:700 19px/1 var(--sans);font-stretch:100%;letter-spacing:-.025em}
.logo em{font-style:normal;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (forced-colors:active){.logo em{color:CanvasText;background:none}}
.tag{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--fg-3)}
.tag::before{display:none}
.tag.a{color:var(--cyan)}
.hdr.scrolled{border-bottom-color:var(--glass-line)}
.nav a[aria-current=page]::after,.nav .grp.cur>button::before{background:var(--fg)}
/* Surfaces */
.glass{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html[data-theme=light] .glass{box-shadow:0 1px 2px rgba(10,10,10,.04)}
.panel{border-color:var(--glass-line)}
.panel.raised{background:var(--ink-1)}
.bezel::before,.bezel::after{display:none}
.glow{display:none}
/* Buttons: pill, neutral primary, arrow nudges on hover */
.btn{font-weight:600}
.btn:hover{background:var(--glass-2);border-color:var(--glass-line-2)}
.btn.p:hover{background:var(--on-hover);border-color:var(--on-hover)}
@media (prefers-reduced-motion:reduce){.btn .ar,.btn:hover .ar{transition:none;transform:none}.btn:active{transform:none}}
.link:hover{border-color:var(--hl);color:var(--hl)}
/* Pills (status and category) */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font:500 12px/1 var(--sans);letter-spacing:0;white-space:nowrap;color:var(--fg-2);border:1px solid var(--glass-line-2);background:var(--glass-2)}
.pill.ok{color:var(--go);border-color:var(--go-line);background:var(--go-dim)}
.pill.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.over{color:var(--fg)}
.pill.hl{color:var(--hl);border-color:var(--hl-line);background:var(--hl-dim)}
.pill.cat{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 32%,transparent);background:color-mix(in srgb,var(--cyan) 8%,transparent)}
/* The Daily Tide: cards (homepage and blog index) */
.tide-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
@media (max-width:980px){.tide-g{grid-template-columns:1fr}}
.tide-c{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;padding:clamp(20px,2.2vw,28px);background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);transition:border-color .2s,background .2s}
.tide-c:hover{border-color:var(--glass-line-2);background:var(--glass-2)}
.tide-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font:400 13px/1 var(--sans);color:var(--fg-3)}
.tide-c h3{font-size:clamp(18px,1.5vw,20px);line-height:1.3;letter-spacing:-.02em}
.tide-c h3 a{color:var(--fg);text-decoration:none}
.tide-c h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tide-c h3 a:focus-visible{outline:0}
.tide-c:focus-within{outline:2px solid var(--hl);outline-offset:3px}
.tide-c p{color:var(--fg-2);font-size:15px;line-height:1.55}
.tide-more{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--sans);color:var(--hl)}
.tide-more .ar{transition:transform .25s var(--ease)}
.tide-c:hover .tide-more .ar{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.tide-c:hover .tide-more .ar{transform:none}}
/* Article pages */
.post{padding-block:clamp(40px,6vw,88px) clamp(64px,8vw,120px)}
.post-w{max-width:calc(760px + var(--gut)*2)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font:400 13.5px/1.4 var(--sans);color:var(--fg-3);margin-bottom:clamp(28px,4vw,44px)}
.crumbs a{color:var(--fg-2);text-decoration:none}.crumbs a:hover{color:var(--fg)}
.post-h{display:grid;gap:18px;justify-items:start;padding-bottom:clamp(28px,4vw,40px);border-bottom:1px solid var(--glass-line);margin-bottom:clamp(28px,4vw,40px)}
.post-h .pill{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 32%,transparent);background:color-mix(in srgb,var(--cyan) 8%,transparent)}
.post-h h1{font-size:clamp(32px,4.6vw,52px);letter-spacing:-.04em;line-height:1.06}
.post-meta{display:flex;flex-wrap:wrap;gap:8px;font:400 14px/1.4 var(--sans);color:var(--fg-3)}
.post-body{display:grid;gap:18px;color:var(--fg-2);font-size:17px;line-height:1.7}
.post-body h2{font-size:clamp(22px,2.2vw,26px);color:var(--fg);margin-top:22px;letter-spacing:-.025em}
.post-body h3{font-size:19px;color:var(--fg);margin-top:8px}
.post-body strong{color:var(--fg);font-weight:600}
.post-body ul,.post-body ol{margin:0;padding-left:1.3em;display:grid;gap:8px}
.post-body li::marker{color:var(--fg-3)}
.post-body code{font:400 .88em/1.4 var(--mono);background:var(--glass-2);border:1px solid var(--glass-line);border-radius:6px;padding:1px 6px;color:var(--fg)}
.post-body pre.code{margin:4px 0;padding:18px 20px;background:var(--ink-1);border:1px solid var(--glass-line);border-radius:var(--r-sm);overflow-x:auto}
.post-body pre.code code{background:none;border:0;padding:0;font-size:13.5px;line-height:1.65;white-space:pre}
.post-body .tbl-wrap{overflow-x:auto;border:1px solid var(--glass-line);border-radius:var(--r-sm)}
.post-body table{width:100%;border-collapse:collapse;font-size:15px}
.post-body th,.post-body td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--glass-line);vertical-align:top}
.post-body th{color:var(--fg);font-weight:600;background:var(--glass)}
.post-body tr:last-child td{border-bottom:0}
.post-f{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-top:clamp(40px,5vw,56px);padding:clamp(20px,2.4vw,28px);background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r)}
.post-f .fh{font-weight:600;color:var(--fg);margin-bottom:4px}
.urlbar label.sr+input{padding-left:18px}

/* ---------- Inquiry forms (assets/inquiry.js): glass card, hairline fields, Turnstile slot ---------- */
.inq{display:grid;padding:clamp(20px,2.6vw,32px);min-width:0}
.inq-body{display:grid;gap:18px;min-width:0}
.inq-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:640px){.inq-g2{grid-template-columns:1fr}}
.inq .input{background:var(--ink-0);border-color:var(--glass-line-2)}
.inq .input[aria-invalid=true]{border-color:var(--bad-line);box-shadow:0 0 0 3px var(--bad-dim)}
.inq .field label .opt{text-transform:none;letter-spacing:0;font-family:var(--sans);color:var(--fg-2)}
.inq-fe{color:var(--bad);font-size:13.5px;line-height:1.4;margin:0}
.inq-hp{display:none!important}
.inq-ts{min-height:65px;display:flex;align-items:center;border:1px dashed var(--glass-line-2);border-radius:10px;padding:0 14px;color:var(--fg-3);font-size:13.5px}
.inq-ts:has(iframe),.inq-ts:has(> div){border:0;padding:0}
.inq-ts>*{width:100%}
.inq-msg{margin:0;font-size:14.5px;line-height:1.5;color:var(--fg-2)}
.inq-msg:empty{display:none}
.inq-msg.bad{color:var(--bad)}
.inq-msg.warn{color:var(--fg)}
.inq-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.inq-act .btn[disabled]{opacity:.5;cursor:not-allowed}
.inq-act .btn[disabled]:hover .ar{transform:none}
.inq-fine{font-size:13px;color:var(--fg-3)}
.inq-ns{margin:0 0 18px;padding:14px 16px;border:1px solid var(--glass-line-2);border-radius:10px;font-size:14.5px;color:var(--fg-2)}
.inq-ok{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;padding:8px 0}
.inq-ok:focus{outline:0}
.inq-ok svg{width:28px;height:28px;color:var(--go);padding:5px;border:1px solid var(--go-line);border-radius:50%;background:var(--go-dim)}
.inq-ok p{margin:0;color:var(--fg-2)}
.inq-okh{font:600 19px/1.35 var(--sans);color:var(--fg)!important;letter-spacing:-.01em;margin-bottom:6px!important;overflow-wrap:anywhere}
.inq-sec .inq-side{display:grid;gap:18px;align-content:start}

/* Footer legal links (bottom row) */
.ftr-l{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.ftr-l a{color:var(--fg-2);text-decoration:none}.ftr-l a:hover{color:var(--hl)}
@media (max-width:860px){.ftr-l a{display:inline-block;padding-block:8px}}
.inq-fine a{color:var(--fg-2)}.inq-fine a:hover{color:var(--hl)}

/* ---------- v27 minimal layer (2026-10-21): flatter, quieter, developer-first ----------
   Inter for text and headings, Geist Mono for data and labels. Hairline borders on flat surfaces (no blur),
   8px buttons, a little more air. Everything theme-dependent still comes from the tokens above. */
@font-face{font-family:"Inter WC";src:url(../fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--sans:"Inter WC","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--r:12px;--r-sm:10px}
body{letter-spacing:-.006em}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.035em}
.d-xl,.phero h1{font-weight:650;letter-spacing:-.05em}
.lead{color:var(--fg-2)}
.logo span{font-family:"Archivo WC",var(--sans);font-stretch:118%;font-weight:800;letter-spacing:-.03em}
.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--ink-1);border-color:var(--line)}
html[data-theme=light] .glass{background:#fff;border-color:var(--line)}
.btn{--h:44px;border-radius:8px;padding:0 18px;font-size:14.5px;font-weight:550}
.btn.sm{--h:36px;padding:0 14px;font-size:13.5px}
.hdr.open .nav .btn{border-radius:8px}
.nav a,.nav .grp>button{font-size:14px}
.tag{font-size:11.5px;letter-spacing:.1em}
.tag.a{color:var(--hl)}
.phero .grid-bg{opacity:.5;background-size:56px 56px}
/* reCAPTCHA v3 is invisible; its badge is replaced by the notice under each form (as Google allows). */
.grecaptcha-badge{visibility:hidden!important}
.inq-ts:has(.inq-rc){min-height:0;border:0;padding:0;font-size:12.5px;line-height:1.5}
.btn[aria-disabled="true"]{opacity:.72;cursor:progress}
.ftr-b{font:400 12px/1.5 var(--sans);align-items:center}
.ftr-links{display:inline-flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.ftr-links a{color:var(--fg-3)}.ftr-links a:hover{color:var(--hl)}
.ftr-b .selfspeed b{color:var(--fg-3);font-weight:400}.ftr-b .selfspeed .dot{opacity:.6}
/* Language menu (EN / ES / RU) next to the theme control: the two letters sit on a faint flag; the list shows each name in its own language */
.lng-menu{position:relative;flex:none}
.lng-menu>summary{list-style:none}.lng-menu>summary::-webkit-details-marker{display:none}
.lng{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:48px;height:36px;padding:0 10px 0 12px;border:1px solid var(--line-2);border-radius:999px;color:var(--fg);font:600 12px/1 var(--sans);letter-spacing:.05em;cursor:pointer;user-select:none;text-shadow:0 1px 2px rgba(0,0,0,.45);transition:border-color .2s}
.lng::before{content:"";position:absolute;inset:0;z-index:-2;background:#18181b}
.lng-flag{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:.34;filter:saturate(.95) brightness(1.12);transition:opacity .2s}
.lng-flag .lng-es-y{fill:#ffa31a}
.lng:hover,.lng-menu[open]>.lng{border-color:var(--fg-3)}
.lng:hover .lng-flag,.lng-menu[open] .lng-flag{opacity:.46}
.lng:focus-visible{outline:2px solid var(--hl);outline-offset:2px}
.lng-chev{width:10px;height:10px;opacity:.75;transition:transform .2s}
.lng-menu[open] .lng-chev{transform:rotate(180deg)}
html[data-theme=light] .lng{text-shadow:none}
html[data-theme=light] .lng::before{background:var(--ink-1)}
html[data-theme=light] .lng-flag{opacity:.28;filter:saturate(.9)}
html[data-theme=light] .lng:hover .lng-flag,html[data-theme=light] .lng-menu[open] .lng-flag{opacity:.4}
html[data-theme=light] .lng-flag .lng-es-y{fill:#f1bf00}
.lng-list{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:200px;padding:6px;border:1px solid var(--line-2);border-radius:12px;background:var(--ink-1);box-shadow:var(--shadow-sm,0 8px 24px rgba(0,0,0,.25))}
.lng-list a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--fg);font:500 14px/1.2 var(--sans);text-decoration:none}
.lng-list a:hover,.lng-list a:focus-visible,.lng-list a[aria-current]{background:var(--ink-2)}
.lng-list a:focus-visible{outline:2px solid var(--hl);outline-offset:-2px}
.lng-mini{flex:none;width:20px;height:14px;border-radius:3px;box-shadow:0 0 0 1px rgba(127,127,127,.35)}
.lng-name{flex:1}
.lng-en{color:var(--fg-3);font-size:12px}
.lng-check{flex:none;width:16px;height:16px;color:var(--hl)}
@media (max-width:480px){.lng{min-width:40px;padding:0 9px;gap:0}.lng-chev{display:none}}

/* Chat launcher (click-to-load: assets/hwc-chat-loader.js). The only chat launcher on the page: the chat's own
   status bubble is hidden below. Same navy pill on light and dark; never greyed out. */
.hwc-chat{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:70;display:inline-flex;align-items:center;gap:11px;height:54px;padding:0 22px 0 8px;border:1.5px solid transparent;border-radius:999px;background:linear-gradient(#0d1524,#0d1524) padding-box,linear-gradient(120deg,#00e5ff,#0066ff 45%,#cbd5e1) border-box;color:#f1f5f9;font:600 15px/1 var(--sans);letter-spacing:.01em;cursor:pointer;box-shadow:0 12px 30px rgba(0,20,60,.38),0 0 0 4px rgba(0,102,255,.08);transition:transform .15s,box-shadow .2s}
.hwc-chat:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(0,40,120,.45),0 0 0 5px rgba(0,229,255,.12)}
.hwc-chat:focus-visible{outline:3px solid #4d9dff;outline-offset:3px}
.hwc-chat[hidden]{display:none}
.hcl-em{position:relative;flex:none;width:36px;height:36px}
.hcl-em svg{display:block;width:36px;height:36px;fill:none;stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
.hcl-orbit{transform-box:fill-box;transform-origin:center}.hcl-orbit path{stroke-width:14}
.hcl-mail{stroke:#f1f5f9;stroke-width:2}
.hcl-min{stroke:#f1f5f9;stroke-width:16}
.hcl-mail,.hcl-min,.hwc-chat[data-ic=mail] .hcl-wc,.hwc-chat[data-ic=min] .hcl-wc{display:none}
.hwc-chat[data-ic=mail] .hcl-mail,.hwc-chat[data-ic=min] .hcl-min{display:inline}
.hcl-dot{position:absolute;right:0;bottom:1px;width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 2.5px #0d1524;display:none}
.hwc-chat[data-online=yes] .hcl-dot{display:block;background:#22c55e}
.hwc-chat[data-online=no] .hcl-dot{display:block;background:#94a3b8}
.hwc-chat[data-ic=min] .hcl-dot{display:none}
.hcl-txt{display:grid;gap:3px;text-align:left}
.hcl-s{font-weight:400;font-size:12px;color:#94a3b8}
.hcl-s:empty,.hcl-badge:empty{display:none}
.hcl-badge{position:absolute;top:-7px;right:-5px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ef4444;color:#fff;font:600 12px/20px var(--sans);font-style:normal;text-align:center;box-shadow:0 0 0 2px #0d1524}
.hwc-chat[aria-busy=true]{cursor:progress}
.hwc-chat[aria-busy=true] .hcl-orbit{animation:hcl-spin 1.1s cubic-bezier(.5,.1,.5,.9) infinite}
.hwc-chat[aria-busy=true] .hcl-r{stroke-dasharray:180 400}
@keyframes hcl-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hwc-chat,.hwc-chat[aria-busy=true] .hcl-orbit{transition:none;animation:none}}
[data-hwc-chat][aria-busy="true"]{cursor:progress}
html:not(.js) [data-hwc-chat],html:not(.js) .hwc-chat-row{display:none}
body:has(.cartbar) .hwc-chat{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 76px)}
/* The chat's own round status bubble: hidden for good (it sets display with !important inline, so clip it). */
#lhc_status_widget_v2{clip-path:inset(50%)!important;pointer-events:none!important;opacity:0!important}
/* While the chat window is open on a computer, it sits above the pill, so the pill can read "Minimise". On short
   screens (or above the cart bar) there is no room: the pill hides and the window's own minimise button is used. */
@media (min-width:641px) and (min-height:700px){body:not(:has(.cartbar)) #lhc_widget_v2{right:max(20px,env(safe-area-inset-right))!important;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 68px)!important}}
@media (min-width:641px) and (max-height:699px){.hwc-chat[data-open]{display:none}}
body:has(.cartbar) .hwc-chat[data-open]{display:none}
@media (max-width:640px){.hwc-chat{width:54px;padding:0;justify-content:center;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}.hcl-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hwc-chat[data-open]{display:none}}
@media print{.hwc-chat{display:none}}

/* ---------- v33 header and fonts (2026-11-01) ----------
   Cyrillic: the Latin font files have no Russian letters, so Russian text used to fall back to the visitor's system font.
   These faces share the family names and carry only Cyrillic (unicode-range), so a browser downloads them only on a page
   that has Cyrillic text. English and Spanish pages never request them. */
@font-face{font-family:"Inter WC";src:url(../fonts/inter-cyr.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Geist Mono";src:url(../fonts/geist-mono-cyr.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Wordmark: "HostingWC" drawn from Archivo ExtraBold at 118% width (the same letters as before), so no font loads for it */
:root{--wm-1:#00E5FF;--wm-2:#2A7FFF;--wm-3:#3B82F6}
html[data-theme=light]{--wm-1:#00B8E6;--wm-2:#0066FF;--wm-3:#003B99}
.logo .wm{display:block;flex:none;width:120.3px;height:20.67px;color:var(--fg);overflow:visible}
.ftr .logo .wm{color:var(--fg)}
@media (forced-colors:active){.wcw-wc{fill:CanvasText}}
/* One theme button (the dashboard pattern) that opens Light / System / Dark */
.thm-menu{position:relative;flex:none}
.thm-btn{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line-2);border-radius:999px;background:var(--ink-1);color:var(--fg);cursor:pointer;transition:border-color .2s}
.thm-btn:hover,.thm-btn[aria-expanded=true]{border-color:var(--fg-3)}
.thm-btn svg{width:16px;height:16px;display:none}
html[data-theme-pref=light] .thm-btn .ti-light,html[data-theme-pref=system] .thm-btn .ti-system,html[data-theme-pref=dark] .thm-btn .ti-dark{display:block}
html:not([data-theme-pref]) .thm-btn .ti-dark{display:block}
.thm-menu .thm{position:absolute;right:0;top:calc(100% + 8px);z-index:60;display:grid;gap:2px;min-width:200px;padding:6px;border:1px solid var(--line-2);border-radius:12px;background:var(--ink-1);box-shadow:var(--shadow-sm,0 8px 24px rgba(0,0,0,.25))}
.thm-menu .thm[hidden]{display:none}
.thm-menu .thm::before{display:none}
.thm-menu .thm button{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:auto;padding:9px 10px;border-radius:8px;color:var(--fg);font:500 14px/1.2 var(--sans)}
.thm-menu .thm button:hover,.thm-menu .thm button:focus-visible{background:var(--ink-2)}
.thm-menu .thm button[aria-checked=true]{background:var(--ink-2)}
.thm-menu .thm button[aria-checked=true] svg{transform:none;color:var(--hl)}
.thm-menu .thm button::after{position:static;transform:none;opacity:1;padding:0;border:0;background:none;box-shadow:none;font:500 14px/1.2 var(--sans);letter-spacing:0;color:inherit;pointer-events:none}
.thm-menu .thm button:hover::after,.thm-menu .thm button:focus-visible::after{transform:none}
.hdr .thm-menu~.menu{margin-left:0}
/* Header row: one text style, even tap targets */
.hdr .login{font:500 14px/1.6 var(--sans);padding:8px 12px;border-radius:8px;transition:color .2s,background .2s}
.hdr .login:hover{background:var(--ink-2)}
.nav .grp>button{line-height:1.6}
.btn.sm.cta,.hdr .cta{font-size:14px}
.hdr .wrap{gap:20px}
.lng-menu .lng{height:36px}
/* Small phones: everything in the bar stays on screen down to 320 px */
@media (max-width:379px){.hdr .wrap{gap:8px}.lng{min-width:36px;padding:0 7px}.menu{width:40px;height:40px}}
@media (max-width:339px){.logo{gap:7px}.logo svg.wc-mark{width:26px;height:26px}.logo .wm{width:107.6px;height:18.5px}}
/* The word "Русский" in the language menus of other languages uses the system font, so English and Spanish pages never download the Cyrillic file just for it */
html:not([lang=ru]) a[lang=ru]{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* Signed in (wc_signed_in cookie, set by the dashboard): "Go to dashboard" plus the support code */
.au-in{display:none}
.wc-in .au-in{display:inline}.wc-in .au-out{display:none}
.scode-btn,.nav .nav-scode{display:none}
.wc-in .hdr .cta,.wc-in .nav .nav-reg{display:none}
.wc-in .hdr .wrap>.scode-btn{display:inline-flex;align-items:center;gap:6px;flex:none;height:36px;padding:0 12px;border:1px solid var(--border-strong);border-radius:8px;background:none;color:var(--fg);font:500 14px/1 var(--sans);cursor:pointer;transition:background .2s}
.wc-in .hdr .wrap>.scode-btn:hover,.scode-btn[aria-expanded=true]{background:var(--ink-2)}
.scode-btn svg,.nav-scode svg{width:18px;height:18px;flex:none}
.scode-btn:focus-visible,.nav .nav-scode:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.scode-pop{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:calc(100% + 6px);z-index:65;display:grid;gap:10px;width:min(320px,calc(100vw - 32px));padding:18px;border:1px solid var(--border-strong);border-radius:12px;background:var(--elevated);box-shadow:var(--shadow-lg)}
.scode-pop[hidden],.scode-pop [hidden]{display:none}
.scode-pop:focus{outline:none}
.scode-h{margin:0;font:600 16px/1.3 var(--sans);color:var(--fg)}
.scode-t{margin:0;font:400 14px/1.5 var(--sans);color:var(--fg-2)}
.scode-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.scode-code{margin:2px 0;font:600 34px/1 var(--mono);letter-spacing:.12em;color:var(--fg);font-variant-numeric:tabular-nums}
.scode-pop .btn{justify-self:start}
@media (max-width:1199px){.wc-in .hdr.open .nav .nav-scode{display:flex;align-items:center;gap:10px;width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--border);background:none;color:inherit;font:inherit;font-weight:600;text-align:left;cursor:pointer}}
@media (max-width:767px){.wc-in .hdr .wrap>.scode-btn{display:none}}
@media (min-width:1200px) and (max-width:1299px){html.wc-in:lang(ru) .hdr .wrap>.scode-btn{padding:0 9px}html.wc-in:lang(ru) .hdr .wrap>.scode-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* Brand line and the 74 W / 6 C element tiles (v35.8) */
.ftr-tag{margin:-8px 0 0;font:400 13px/1.5 var(--sans);color:var(--fg-3)}
.ftr-el{display:inline-flex;gap:3px;text-decoration:none;color:var(--fg-3)}
.ftr-el:hover,.ftr-el:focus-visible{color:var(--fg)}
.el{position:relative;display:inline-grid;place-items:center;width:26px;height:26px;padding:7px 0 0;border:1px solid var(--line);border-radius:5px;font:600 11px/1 var(--mono)}
.el i{position:absolute;top:2.5px;left:3.5px;font:400 6.5px/1 var(--mono);font-style:normal;opacity:.75}
.el-pair{display:flex;gap:10px}
.el.lg{width:clamp(64px,8vw,88px);height:clamp(64px,8vw,88px);padding:0;border-radius:12px;border-color:var(--border-strong,var(--line));font:600 clamp(26px,3.4vw,36px)/1 var(--display,var(--sans));color:var(--fg)}
.el.lg i{top:8px;left:9px;font-size:11px}
.el.lg b{position:absolute;bottom:7px;left:0;right:0;text-align:center;font:400 9.5px/1 var(--sans);color:var(--fg-3);letter-spacing:.02em}