/* EMCHEQ marketing design system.
 * Primitives: .m-container .m-section .m-eyebrow .m-h* .m-btn .m-card .m-tabs
 * .m-marquee .m-faq .m-nav .m-foot. Product visuals live under .pv-*.
 * Technique notes are in docs/marketing-design-extraction.md. */

:root {
  color-scheme: light;
  --ink: #0b0b0f;
  --ink-1: #15151b;
  --ink-2: #1c1c23;
  --ink-3: #26262e;
  --canvas: #f7f7f8;
  --paper: #ffffff;
  --paper-2: #f0f0f2;
  --text: #111114;
  --text-2: #4a4a52;
  --text-3: #6b6b73;
  --on-ink: #f5f5f7;
  --on-ink-2: rgba(245, 245, 247, 0.72);
  --on-ink-3: rgba(245, 245, 247, 0.6);
  --hair: rgba(11, 11, 15, 0.1);
  --hair-strong: rgba(11, 11, 15, 0.18);
  --hair-ink: rgba(255, 255, 255, 0.1);
  --hair-ink-strong: rgba(255, 255, 255, 0.18);
  --signal: #75ff00;
  --good: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;
  --dis: #6d28d9;
  --unk: #52525b;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 16px;
  --gutter: 64px;
  --gap: 32px;
  --ease: cubic-bezier(0.2, 0.6, 0.6, 1);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (max-width: 1280px) { :root { --gutter: 40px; --gap: 24px; } }
@media (max-width: 799px) { :root { --gutter: 20px; --gap: 16px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 24px; color: var(--text);
  background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.sr-only { 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(--paper); color: var(--text); padding: 10px 14px; border-radius: var(--r-sm); font-weight: 600; font-size: 14px; }
.skip:focus { top: 12px; }

/* ---- Container / bands / grid ------------------------------------------ */
.m-band { position: relative; padding: 120px 0; }
.m-band.tight { padding: 80px 0; }
.m-band.ink { background: var(--ink); color: var(--on-ink); }
.m-band.paper { background: var(--paper); border-block: 1px solid var(--hair); }
.m-band.flush-top { padding-top: 0; }
@media (max-width: 1280px) { .m-band { padding: 96px 0; } .m-band.tight { padding: 64px 0; } }
@media (max-width: 799px) { .m-band { padding: 64px 0; } .m-band.tight { padding: 48px 0; } }
.m-container { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.m-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--gap); }
@media (max-width: 799px) { .m-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: 1 / -1; }
@media (max-width: 1280px) { .span-3 { grid-column: span 6; } .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: 1 / -1; } }
@media (max-width: 799px) { .span-3 { grid-column: 1 / -1; } }
.m-spacer { height: 96px; } @media (max-width: 799px) { .m-spacer { height: 48px; } }

/* ---- Type --------------------------------------------------------------- */
.m-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; font: 500 12px/12px var(--mono);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3);
}
.ink .m-eyebrow { color: var(--on-ink-3); }
.m-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(117, 255, 0, 0.18); }
.m-display { margin: 0; font-weight: 600; font-size: 96px; line-height: 96px; letter-spacing: -0.045em; text-wrap: balance; }
.m-h1 { margin: 0; font-weight: 600; font-size: 72px; line-height: 76px; letter-spacing: -0.04em; text-wrap: balance; }
.m-h2 { margin: 0; font-weight: 600; font-size: 56px; line-height: 60px; letter-spacing: -0.035em; text-wrap: balance; }
.m-h3 { margin: 0; font-weight: 600; font-size: 24px; line-height: 30px; letter-spacing: -0.02em; }
.m-h4 { margin: 0; font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: -0.01em; }
.m-lead { margin: 24px 0 0; font-size: 20px; line-height: 30px; letter-spacing: -0.01em; color: var(--text-2); max-width: 560px; text-wrap: pretty; }
.ink .m-lead { color: var(--on-ink-2); }
.m-body { margin: 0; font-size: 16px; line-height: 26px; color: var(--text-2); }
.ink .m-body { color: var(--on-ink-2); }
.m-small { font-size: 14px; line-height: 22px; color: var(--text-3); }
.ink .m-small { color: var(--on-ink-3); }
.m-mut { color: var(--text-3); }
.m-center { text-align: center; } .m-center .m-lead { margin-inline: auto; }
@media (max-width: 1280px) {
  .m-display { font-size: 72px; line-height: 74px; letter-spacing: -0.04em; }
  .m-h1 { font-size: 56px; line-height: 60px; }
  .m-h2 { font-size: 44px; line-height: 48px; letter-spacing: -0.03em; }
}
@media (max-width: 799px) {
  .m-display { font-size: 44px; line-height: 46px; letter-spacing: -0.035em; }
  .m-h1 { font-size: 40px; line-height: 44px; letter-spacing: -0.03em; }
  .m-h2 { font-size: 32px; line-height: 36px; letter-spacing: -0.025em; }
  .m-h3 { font-size: 20px; line-height: 26px; }
  .m-lead { font-size: 17px; line-height: 26px; }
}
.m-section-head { max-width: 760px; margin-bottom: 64px; }
.m-section-head.center { margin-inline: auto; text-align: center; }
.m-section-head.center .m-lead { margin-inline: auto; }
@media (max-width: 799px) { .m-section-head { margin-bottom: 40px; } }

/* ---- Buttons / links ---------------------------------------------------- */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 18px;
  border: 1px solid transparent; border-radius: var(--r-sm); font: 600 14px/18px var(--font); white-space: nowrap;
  text-decoration: none; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 150ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative; overflow: hidden; isolation: isolate;
}
.m-btn .arr { transition: transform 150ms var(--ease); }
.m-btn:hover .arr { transform: translateX(3px); }
.m-btn.lg { min-height: 52px; padding: 16px 24px; font-size: 16px; line-height: 20px; }
.m-btn.primary { background: var(--ink); color: #fff; }
.m-btn.primary:hover { background: #2b2b33; }
.m-btn.secondary { background: transparent; color: var(--text); border-color: var(--hair-strong); }
.m-btn.secondary:hover { background: rgba(11, 11, 15, 0.05); }
.ink .m-btn.primary, .m-btn.on-ink { background: #fff; color: var(--ink); }
.ink .m-btn.primary:hover, .m-btn.on-ink:hover { background: #d9d9de; }
.ink .m-btn.secondary { color: #fff; border-color: var(--hair-ink-strong); }
.ink .m-btn.secondary:hover { background: rgba(255, 255, 255, 0.08); }
.m-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
@media (max-width: 799px) { .m-btn-row .m-btn { flex: 1 1 100%; } }
.m-link { position: relative; display: inline-block; padding-bottom: 2px; font-weight: 600; font-size: 14px; text-decoration: none; }
.m-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 200ms ease-out; }
.m-link:hover::after, .m-link:focus-visible::after { transform: scaleX(1); }
.m-link .arr { display: inline-block; transition: transform 150ms var(--ease); }
.m-link:hover .arr { transform: translateX(3px); }

/* ---- Navigation: floating dock ----------------------------------------
 * A fixed pill that adapts to the surface behind it (data-tone), hides on
 * scroll-down and returns on scroll-up, carries a scroll-progress edge, a
 * sliding hover indicator and an inline email checker. */
.m-dock { position: fixed; top: 16px; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding: 0 var(--gutter); pointer-events: none; transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), opacity 250ms ease; }
.m-dock[data-hidden="true"] { transform: translateY(-96px); opacity: 0; }
.m-dock-pill {
  --d-bg: rgba(11, 11, 15, 0.86); --d-fg: #f5f5f7; --d-fg2: rgba(245, 245, 247, 0.68); --d-line: rgba(255, 255, 255, 0.12); --d-hov: rgba(255, 255, 255, 0.12); --d-btn: #fff; --d-btnfg: #0b0b0f;
  position: relative; pointer-events: auto; display: flex; align-items: center; gap: 4px; width: 100%; max-width: 1180px; height: 56px; padding: 0 8px 0 8px;
  background: var(--d-bg); color: var(--d-fg); border: 1px solid var(--d-line); border-radius: 18px;
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  transition: background-color 350ms ease, color 350ms ease, border-color 350ms ease, max-width 450ms cubic-bezier(0.22, 1, 0.36, 1), height 300ms ease;
}
.m-dock[data-tone="light"] .m-dock-pill { --d-bg: rgba(255, 255, 255, 0.84); --d-fg: #111114; --d-fg2: rgba(17, 17, 20, 0.62); --d-line: rgba(11, 11, 15, 0.1); --d-hov: rgba(11, 11, 15, 0.07); --d-btn: #0b0b0f; --d-btnfg: #fff; }
.m-dock[data-compact="true"] .m-dock-pill { max-width: 940px; }
.m-dock-logo { display: inline-flex; align-items: center; gap: 10px; padding: 0 10px 0 4px; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; color: inherit; }
.m-dock-tile { width: 36px; height: 36px; border-radius: 11px; background: var(--d-btn); color: var(--d-btnfg); display: grid; place-items: center; transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 350ms ease, color 350ms ease; }
.m-dock-logo:hover .m-dock-tile { transform: rotate(-8deg) scale(1.06); }
.m-dock-links { position: relative; display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.m-dock-ind { position: absolute; top: 50%; left: 0; height: 36px; width: 0; margin-top: -18px; border-radius: 11px; background: var(--d-hov); opacity: 0; transform: translateX(0); transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), width 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease; pointer-events: none; }
.m-dock-item { position: relative; }
.m-dock-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; background: none; color: var(--d-fg2); font: 500 14px/18px var(--font); text-decoration: none; cursor: pointer; transition: color 180ms ease; }
.m-dock-link:hover, .m-dock-item:focus-within > .m-dock-link, .m-dock-link[aria-current="page"] { color: var(--d-fg); }
.m-dock-link .chev { width: 10px; height: 10px; transition: transform 200ms ease; }
.m-dock-item:hover .chev, .m-dock-item:focus-within .chev { transform: rotate(180deg); }
.m-dock-menu { position: absolute; top: calc(100% + 18px); left: -8px; width: 380px; padding: 8px; background: var(--ink-2); color: var(--on-ink); border: 1px solid var(--hair-ink); border-radius: 18px; -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: 20% 0; transition: opacity 160ms ease, visibility 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.m-dock-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.m-dock-item:hover > .m-dock-menu, .m-dock-item:focus-within > .m-dock-menu { opacity: 1; visibility: visible; transform: none; }
.m-dock-menu a { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 12px; text-decoration: none; transition: background-color 150ms ease; }
.m-dock-menu a:hover, .m-dock-menu a:focus-visible { background: rgba(255, 255, 255, 0.08); }
.m-dock-menu b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.m-dock-menu small { display: block; margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--on-ink-3); }
.mini { flex: none; display: grid; gap: 4px; width: 44px; height: 44px; padding: 9px 8px; border-radius: 10px; background: var(--ink); border: 1px solid var(--hair-ink); transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.m-dock-menu a:hover .mini { transform: scale(1.08) rotate(-3deg); }
.mini i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.5); } .mini i:nth-child(2) { width: 70%; } .mini i:nth-child(3) { width: 45%; background: var(--signal); }
.mini { grid-auto-flow: row; align-content: center; }
.mini b { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); } .mini b.on { background: #ef4444; }
.m-dock-check { position: relative; margin-left: auto; display: flex; align-items: center; }
.m-dock-checkbtn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px; border: 1px solid var(--d-line); border-radius: 11px; background: transparent; color: var(--d-fg2); font: 500 13px/16px var(--font); cursor: pointer; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.m-dock-checkbtn:hover { background: var(--d-hov); color: var(--d-fg); }
.m-dock-checkbtn kbd { min-width: 20px; padding: 2px 6px; border-radius: 6px; background: var(--d-hov); font: 500 11px/14px var(--mono); text-align: center; }
.m-dock-form { display: flex; align-items: center; gap: 8px; height: 36px; width: 320px; padding: 0 12px; border: 1px solid var(--d-fg2); border-radius: 11px; animation: m-expand 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.m-dock-form[hidden] { display: none; }
.m-dock-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: 500 13px/16px var(--mono); }
.m-dock-form input::placeholder { color: var(--d-fg2); }
.m-dock-form output { font: 600 12px/16px var(--font); white-space: nowrap; padding: 2px 8px; border-radius: 5px; }
.m-dock-form output:empty { display: none; }
.m-dock-form output.good { background: rgba(34, 197, 94, 0.2); color: #4ade80; } .m-dock-form output.bad { background: rgba(239, 68, 68, 0.2); color: #f87171; } .m-dock-form output.unk, .m-dock-form output.dis { background: rgba(167, 139, 250, 0.2); color: #a78bfa; }
.m-dock[data-tone="light"] .m-dock-form output.good { color: #15803d; } .m-dock[data-tone="light"] .m-dock-form output.bad { color: #b91c1c; }
@keyframes m-expand { from { width: 150px; opacity: 0.4; } to { width: 320px; opacity: 1; } }
.m-dock-signin { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 11px; color: var(--d-fg2); font: 500 14px/18px var(--font); text-decoration: none; transition: color 180ms ease, background-color 180ms ease; }
.m-dock-signin:hover { color: var(--d-fg); background: var(--d-hov); }
.m-dock-cta { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; background: var(--d-btn); color: var(--d-btnfg); font: 600 14px/18px var(--font); text-decoration: none; transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 350ms ease, color 350ms ease; }
.m-dock-cta:hover { transform: scale(1.04); }
.m-dock-cta .arr { transition: transform 150ms var(--ease); } .m-dock-cta:hover .arr { transform: translateX(3px); }
.m-dock-progress { position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--signal); transform-origin: left; transform: scaleX(var(--p, 0)); opacity: 0.9; }
.m-dock-burger { display: none; margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--d-hov); color: inherit; cursor: pointer; position: relative; }
.m-dock-burger i { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; transition: transform 250ms ease; }
.m-dock-burger i:nth-child(1) { top: 16px; } .m-dock-burger i:nth-child(2) { top: 23px; }
.m-dock-burger:hover i:nth-child(1) { transform: translateY(2px); } .m-dock-burger:hover i:nth-child(2) { transform: translateY(-2px); }
@media (max-width: 1185px) {
  .m-dock-links, .m-dock-signin, .m-dock-cta { display: none; }
  .m-dock-burger { display: block; }
  .m-dock-check { margin-left: auto; }
  .m-dock-checkbtn span, .m-dock-checkbtn kbd { display: none; } .m-dock-checkbtn { padding: 0 11px; }
  .m-dock-form { width: min(300px, 56vw); }
  .m-dock[data-compact="true"] .m-dock-pill { max-width: 1180px; }
}
@media (max-width: 799px) { .m-dock { top: 10px; } .m-dock-pill { height: 52px; border-radius: 16px; } }
.m-mobile { position: fixed; inset: 0; z-index: 90; background: var(--ink); color: var(--on-ink); padding: 0 var(--gutter) 32px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 250ms ease; }
.m-mobile[data-open="true"] { opacity: 1; visibility: visible; }
.m-mobile-bar { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.m-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 16px; }
.m-logo-tile { width: 32px; height: 32px; border-radius: 8px; background: #fff; color: var(--ink); display: grid; place-items: center; }
.m-burger { min-height: 40px; padding: 8px 14px; border: 1px solid var(--hair-ink-strong); border-radius: var(--r-sm); background: none; color: inherit; font: 600 14px/18px var(--font); cursor: pointer; }
.m-mobile nav { display: grid; margin-top: 16px; }
.m-mobile nav a { display: block; padding: 20px 0; border-top: 1px solid var(--hair-ink); font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -0.03em; text-decoration: none; transform: translateY(16px); opacity: 0; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 400ms ease; }
.m-mobile[data-open="true"] nav a { transform: none; opacity: 1; }
.m-mobile nav a:nth-child(2) { transition-delay: 60ms; } .m-mobile nav a:nth-child(3) { transition-delay: 120ms; } .m-mobile nav a:nth-child(4) { transition-delay: 180ms; }
.m-mobile nav a small { display: block; margin-top: 4px; font: 400 14px/20px var(--font); letter-spacing: 0; color: var(--on-ink-3); }
.m-mobile .m-btn.secondary { color: #fff; border-color: var(--hair-ink-strong); }
body.menu-open { overflow: hidden; }

/* ---- Hero --------------------------------------------------------------- */
.m-hero { position: relative; overflow: hidden; padding: 152px 0 96px; }
.m-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top; transform: translateZ(0);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%); mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  opacity: 0.55;
}
.m-hero > .m-container { z-index: 1; }
.m-hero.center { text-align: center; }
.m-hero.center .m-lead { margin-inline: auto; }
.m-hero.center .m-btn-row { justify-content: center; }
.m-hero .m-lead { max-width: 600px; }
@media (max-width: 799px) { .m-hero { padding: 112px 0 64px; } }
[data-stage] { opacity: 0; animation: m-stage 450ms ease-out both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
@keyframes m-stage { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 500ms ease-out, transform 500ms ease-out; transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal, .no-js [data-stage] { opacity: 1; transform: none; animation: none; }

/* ---- Cards / hairline columns ------------------------------------------ */
.m-card { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 32px; transition: border-color 200ms ease, transform 200ms ease; }
a.m-card { display: block; text-decoration: none; }
a.m-card:hover, .m-card.hov:hover { border-color: var(--hair-strong); transform: translateY(-2px); }
.ink .m-card { background: var(--ink-1); border-color: var(--hair-ink); }
.ink a.m-card:hover { border-color: var(--hair-ink-strong); }
.m-col { border-top: 1px solid var(--hair-strong); padding-top: 24px; }
.ink .m-col { border-top-color: var(--hair-ink-strong); }
.m-col .m-h4 { margin-bottom: 8px; }
.m-num { font: 500 12px/12px var(--mono); letter-spacing: 0.08em; color: var(--text-3); text-transform: uppercase; display: block; margin-bottom: 20px; }
.ink .m-num { color: var(--on-ink-3); }
.m-tag { display: inline-block; padding: 2px 6px; border-radius: var(--r-xs); background: rgba(11, 11, 15, 0.07); font: 500 11px/16px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.ink .m-tag { background: rgba(255, 255, 255, 0.1); color: var(--on-ink-2); }
.m-list { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.m-list li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 15px; line-height: 22px; color: var(--text-2); }
.ink .m-list li { border-top-color: var(--hair-ink); color: var(--on-ink-2); }
.m-list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: currentColor; opacity: 0.5; }

/* ---- Marquee ------------------------------------------------------------ */
.m-marquee { position: relative; overflow: hidden; border-block: 1px solid var(--hair); padding: 22px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 140px, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(90deg, transparent, #000 140px, #000 calc(100% - 140px), transparent); }
.m-marquee-track { display: flex; width: max-content; gap: 56px; padding-right: 56px; will-change: transform; animation: m-marquee 60s linear infinite; }
.m-marquee:hover .m-marquee-track { animation-play-state: paused; }
.m-marquee-track span { font: 500 13px/16px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 56px; }
.m-marquee-track span::after { content: ""; width: 4px; height: 4px; background: var(--hair-strong); border-radius: 50%; }
@keyframes m-marquee { to { transform: translateX(-50%); } }

/* ---- Tabs --------------------------------------------------------------- */
.m-tabs-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.m-tab { min-height: 44px; padding: 10px 16px; border: 1px solid var(--hair-strong); border-radius: var(--r-sm); background: transparent; font: 600 14px/18px var(--font); color: var(--text-2); cursor: pointer; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
.m-tab:hover { background: rgba(11, 11, 15, 0.05); }
.m-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ink .m-tab { border-color: var(--hair-ink-strong); color: var(--on-ink-2); }
.ink .m-tab:hover { background: rgba(255, 255, 255, 0.08); }
.ink .m-tab[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.m-panel[hidden] { display: none; }
.m-panel { animation: m-stage 300ms ease-out both; }

/* ---- Story (sticky stage) ---------------------------------------------- */
.m-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 96px; align-items: start; }
.m-story-steps { padding-bottom: 20vh; }
.m-step { position: relative; min-height: 62vh; padding: 4px 0 4px 28px; display: flex; flex-direction: column; justify-content: center; opacity: 0.4; transform: translateX(-6px); transition: opacity 350ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1); }
.m-step::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; background: var(--hair-ink-strong); border-radius: 1px; }
.m-step::after { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; background: var(--signal); border-radius: 1px; transform: scaleY(0); transform-origin: top; transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.m-step[data-active="true"]::after { transform: scaleY(1); }
.m-step[data-active="true"] { opacity: 1; transform: none; }
.m-step .m-h2 { font-size: 40px; line-height: 44px; letter-spacing: -0.03em; }
.m-step .m-body { margin-top: 20px; max-width: 460px; }
.m-step .pv { display: none; }
.m-story-stage { position: sticky; top: 104px; height: calc(100vh - 160px); max-height: 640px; }
.m-stage-item { position: absolute; inset: 0; display: grid; align-items: center; opacity: 0; visibility: hidden; transform: translateY(28px) scale(0.965); filter: blur(8px); transition: opacity 450ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1), filter 450ms ease, visibility 450ms ease; }
.m-stage-item[data-active="true"] { opacity: 1; visibility: visible; transform: none; filter: none; }
@media (max-width: 1280px) {
  .m-story { grid-template-columns: 1fr; }
  .m-story-stage { display: none; }
  .m-story-steps { padding-bottom: 0; }
  .m-step { min-height: 0; opacity: 1; transform: none; padding: 48px 0; border-top: 1px solid var(--hair-ink); }
  .m-step::before, .m-step::after { display: none; }
  .m-step .pv { display: block; margin-top: 32px; }
  .m-step .m-body { max-width: 560px; }
}
@media (max-width: 799px) { .m-step .m-h2 { font-size: 30px; line-height: 34px; } }

/* ---- FAQ ---------------------------------------------------------------- */
.m-faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--hair-strong); }
.m-faq details { border-bottom: 1px solid var(--hair-strong); }
.m-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 72px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.015em; }
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform 200ms ease; }
.m-faq details[open] summary::after { transform: rotate(45deg); }
.m-faq .ans { padding: 0 48px 24px 0; color: var(--text-2); font-size: 16px; line-height: 26px; max-width: 720px; }
@media (max-width: 799px) { .m-faq summary { font-size: 17px; line-height: 23px; } }

/* ---- CTA / footer -------------------------------------------------------- */
.m-cta { background: var(--ink); color: var(--on-ink); border-radius: var(--r-md); padding: 96px 48px; text-align: center; position: relative; overflow: hidden; }
.m-field { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-cta > *:not(.m-field) { position: relative; }
.m-cta .m-btn-row { justify-content: center; }
.m-cta .m-lead { margin-inline: auto; color: var(--on-ink-2); }
@media (max-width: 799px) { .m-cta { padding: 56px 20px; } }
.m-foot { background: var(--ink); color: var(--on-ink); padding: 96px 0 40px; }
.m-foot-cols { display: grid; grid-template-columns: 5fr repeat(3, 2fr); gap: var(--gap); }
.m-foot .h4 { margin: 0 0 20px; font: 500 12px/12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-3); }
.m-foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.m-foot a { text-decoration: none; font-size: 15px; color: var(--on-ink-2); transition: color 150ms ease; }
.m-foot a:hover { color: #fff; }
.m-foot-base { margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--hair-ink); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--on-ink-3); }
@media (max-width: 1280px) { .m-foot-cols { grid-template-columns: repeat(3, 1fr); } .m-foot-cols > :first-child { grid-column: 1 / -1; } }
@media (max-width: 799px) { .m-foot { padding-top: 64px; } .m-foot-cols { grid-template-columns: 1fr 1fr; } }

/* ---- Product visuals (EMCHEQ UI rebuilt in HTML/CSS, sample data) ------- */
.pv { width: 100%; background: var(--ink); color: var(--on-ink); border: 1px solid var(--hair-ink); border-radius: var(--r-md); overflow: hidden; filter: drop-shadow(0 24px 48px rgba(11, 11, 15, 0.22)); }
.ink .pv { background: var(--ink-1); filter: drop-shadow(0 24px 64px rgba(0, 0, 0, 0.6)); }
.pv.light { background: var(--paper); color: var(--text); border-color: var(--hair); }
.pv-bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--hair-ink); font: 500 11px/12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-3); }
.light .pv-bar { border-bottom-color: var(--hair); color: var(--text-3); }
.pv-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.pv-bar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.pv-bar .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.pv-body { padding: 24px; }
.pv-field { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border: 1px solid var(--hair-ink-strong); border-radius: var(--r-sm); font: 500 14px/18px var(--mono); }
.light .pv-field { border-color: var(--hair-strong); }
.pv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair-ink); font-size: 14px; line-height: 20px; }
.light .pv-row { border-top-color: var(--hair); }
.pv-row span:first-child { color: var(--on-ink-2); }
.light .pv-row span:first-child { color: var(--text-2); }
.pv-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--r-xs); font: 600 12px/18px var(--font); }
.pv-badge.good { background: rgba(34, 197, 94, 0.16); color: #86efac; } .light .pv-badge.good { background: #e7f6ec; color: var(--good); }
.pv-badge.warn { background: rgba(245, 158, 11, 0.16); color: #fcd34d; } .light .pv-badge.warn { background: #fdf0dc; color: var(--warn); }
.pv-badge.bad { background: rgba(239, 68, 68, 0.16); color: #fca5a5; } .light .pv-badge.bad { background: #fbe7e7; color: var(--bad); }
.pv-badge.dis { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; } .light .pv-badge.dis { background: #efe9fb; color: var(--dis); }
.pv-badge.unk { background: rgba(255, 255, 255, 0.1); color: var(--on-ink-2); } .light .pv-badge.unk { background: #ececee; color: var(--unk); }
.pv-donut { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.pv-legend { display: grid; gap: 0; }
.pv-legend div { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hair-ink); font-size: 14px; }
.light .pv-legend div { border-top-color: var(--hair); }
.pv-legend i { width: 10px; height: 10px; border-radius: 2px; }
.pv-legend b { font-variant-numeric: tabular-nums; font-weight: 600; }
.pv-file { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px dashed var(--hair-ink-strong); border-radius: var(--r-sm); }
.pv-prog { height: 6px; background: rgba(255, 255, 255, 0.12); border-radius: 3px; overflow: hidden; }
.pv-prog i { display: block; height: 100%; width: 64%; background: #fff; border-radius: 3px; }
.pv-code { margin: 0; padding: 24px; overflow-x: auto; font: 400 13px/22px var(--mono); color: #d6d6dc; white-space: pre; }
.pv-code .k { color: #9aa0ff; } .pv-code .s { color: #7ee2a8; } .pv-code .c { color: #8a8a94; }
.pv-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pv-ladder div { padding-top: 12px; font-size: 13px; line-height: 18px; color: var(--text-2); }
.pv-ladder div::before { content: ""; display: block; height: 6px; border-radius: 3px; background: var(--hair-strong); margin-bottom: 12px; }
.pv-ladder div.on::before { background: var(--bad); }
.pv-ladder b { display: block; font-size: 15px; color: var(--text); }
.pv-ladder code { font: 400 12px/16px var(--mono); color: var(--text-3); }
.pv-term { margin: 0; padding: 24px; font: 400 13px/22px var(--mono); color: #d6d6dc; white-space: pre-wrap; word-break: break-word; }
.pv-term .ok { color: #86efac; } .pv-term .dim { color: #8a8a94; } .pv-term .no { color: #fca5a5; }
.pv-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--hair-ink); }
.pv-stat div { padding: 16px 24px; border-left: 1px solid var(--hair-ink); }
.pv-stat div:first-child { border-left: 0; }
.pv-stat small { display: block; font: 500 11px/12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-3); }
.pv-stat b { display: block; margin-top: 8px; font-size: 24px; line-height: 28px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pv-note { padding: 12px 24px; border-top: 1px solid var(--hair-ink); font: 500 11px/14px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-3); }
.light .pv-note { border-top-color: var(--hair); color: var(--text-3); }
@media (max-width: 799px) {
  .pv-body { padding: 16px; } .pv-donut { grid-template-columns: 1fr; justify-items: center; gap: 16px; } .pv-legend { width: 100%; }
  .pv-code, .pv-term { padding: 16px; font-size: 12px; } .pv-stat div { padding: 12px 14px; } .pv-stat b { font-size: 19px; }
}

/* ---- Demo (live, uses /api/validate) ------------------------------------ */
.m-demo { max-width: 640px; margin: 48px 0 0; }
.m-hero.center .m-demo { margin-inline: auto; }
.m-demo form { display: flex; gap: 8px; padding: 8px; background: var(--paper); border: 1px solid var(--hair-strong); border-radius: var(--r-md); text-align: left; transition: border-color 150ms ease; }
.m-demo form:focus-within { border-color: var(--ink); }
.m-demo input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 12px; font: 500 16px/24px var(--mono); color: var(--text); }
.m-demo output { display: flex; align-items: center; gap: 12px; min-height: 28px; margin-top: 16px; font-size: 14px; color: var(--text-2); }
.m-demo .pv-badge { font-size: 13px; }
@media (max-width: 799px) { .m-demo form { flex-direction: column; } .m-demo input { min-height: 44px; } }

/* ---- Pricing ------------------------------------------------------------ */
.m-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); }
.m-plan { display: flex; flex-direction: column; padding: 32px; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-md); }
.m-plan.feat { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.m-plan h3 { margin: 0; font: 500 12px/12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.m-plan.feat h3 { color: var(--on-ink-3); }
.m-price { margin: 24px 0 8px; font-size: 56px; line-height: 56px; font-weight: 600; letter-spacing: -0.045em; }
.m-price small { font-size: 15px; letter-spacing: 0; font-weight: 500; color: var(--text-3); }
.m-plan.feat .m-price small { color: var(--on-ink-3); }
.m-plan ul { margin: 24px 0 32px; padding: 0; list-style: none; }
.m-plan li { padding: 12px 0; border-top: 1px solid var(--hair); font-size: 15px; color: var(--text-2); }
.m-plan.feat li { border-top-color: var(--hair-ink); color: var(--on-ink-2); }
.m-plan .m-btn { margin-top: auto; }
.m-plan.feat .m-btn.secondary { background: #fff; color: var(--ink); border-color: #fff; }

/* ---- Life: split headings, spotlight, tilt, live visuals ----------------- */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.sw > i { display: inline-block; font-style: normal; transform: translateY(112%); transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--w, 0) * 55ms + 80ms); }
.split-go .sw > i, .reveal.in .sw > i, .in-view .sw > i { transform: none; }
.spot { position: relative; }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 300ms ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(11, 11, 15, 0.07), transparent 62%); }
.spot:hover::after { opacity: 1; }
.ink .spot::after, .spot.on-ink::after, .m-plan.feat::after, .pv::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.09), transparent 62%); }
.pv { position: relative; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.pv.light::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(11, 11, 15, 0.06), transparent 62%); }
[data-par] { will-change: translate; }
.m-col { position: relative; transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1); }
.m-col::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); }
.m-col:hover { transform: translateY(-4px); } .m-col:hover::before { transform: scaleX(1); }
.m-card, .m-plan { transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), border-color 250ms ease; }
.m-plan:hover { transform: translateY(-6px); }
.m-btn:active { transform: scale(0.97); }
.m-btn.primary::after, .m-btn.on-ink::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%); transform: translateX(-120%); transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.m-btn.on-ink::after { background: linear-gradient(105deg, transparent 30%, rgba(11, 11, 15, 0.12) 50%, transparent 70%); }
.m-btn.primary:hover::after, .m-btn.on-ink:hover::after { transform: translateX(120%); }
.m-btn.secondary:hover { border-color: currentColor; }
/* live product visuals: start still, play when scrolled into view */
.pv-row, .pv-legend div, .pv-ladder div { opacity: 0; transform: translateY(10px); transition: opacity 500ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--d, 0ms); }
.pv-live .pv-row, .pv-live .pv-legend div, .pv-live .pv-ladder div, .no-js .pv-row, .no-js .pv-legend div, .no-js .pv-ladder div { opacity: 1; transform: none; }
.pv .arc { animation: m-arc 1.3s cubic-bezier(0.22, 1, 0.36, 1) both paused; }
.pv-live .arc { animation-play-state: running; }
@keyframes m-arc { from { stroke-dasharray: 0 var(--c); } }
.pv-prog i { width: 0; transition: width 1.6s cubic-bezier(0.22, 1, 0.36, 1) 200ms; }
.pv-live .pv-prog i, .no-js .pv-prog i { width: 64%; }
.pv-field .caret { width: 1.5px; height: 18px; margin-left: -8px; background: var(--signal); animation: m-blink 1s steps(2) infinite; }
@keyframes m-blink { 50% { opacity: 0; } }
.pv-live .pv-badge { animation: m-pop 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: var(--d, 0ms); }
@keyframes m-pop { from { transform: scale(0.6); opacity: 0; } }
.pv-ladder div::before { transform: scaleX(0); transform-origin: left; transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--d, 0ms); }
.pv-live .pv-ladder div::before, .no-js .pv-ladder div::before { transform: none; }
.m-demo form { transition: border-color 150ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1); } .m-demo form:focus-within { transform: scale(1.015); }
.m-faq details { transition: background-color 200ms ease; } .m-faq summary { transition: padding 250ms ease; } .m-faq summary:hover { padding-left: 8px; }
.m-faq details[open] .ans { animation: m-stage 350ms ease-out both; }
.m-foot a { display: inline-block; transition: color 150ms ease, transform 250ms cubic-bezier(0.22, 1, 0.36, 1); } .m-foot a:hover { transform: translateX(4px); }
.m-marquee-track span { transition: color 200ms ease; } .m-marquee-track span:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .sw > i { transform: none; } .pv, .m-col:hover, .m-plan:hover { transform: none; } .pv-row, .pv-legend div, .pv-ladder div { opacity: 1; transform: none; }
  .pv-prog i { width: 64%; } .pv-ladder div::before { transform: none; } .m-stage-item { filter: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .m-marquee-track { animation: none; }
  .reveal, [data-stage] { opacity: 1; transform: none; }
  .m-step { opacity: 1; }
}

[hidden] { display: none !important; }
.m-dock-link, .m-dock-cta, .m-dock-signin, .m-dock-checkbtn span { white-space: nowrap; }
.m-dock:has(.m-dock-form:not([hidden])) .m-dock-signin { display: none; }
.m-dock-form { width: 300px; }
@keyframes m-expand { from { width: 140px; opacity: 0.4; } to { width: 300px; opacity: 1; } }

/* ---- Hero app frame (Verify screen mock) -------------------------------- */
.hx { position: relative; width: 100%; max-width: 1240px; margin: 72px auto 0; padding: 0 var(--gutter); text-align: left; perspective: 1800px; }
.hx-glow { position: absolute; left: 10%; right: 10%; top: 30%; bottom: -10%; background: radial-gradient(ellipse at 50% 40%, rgba(11, 11, 15, 0.16), transparent 70%); filter: blur(40px); pointer-events: none; }
.hx-win { --tilt: 9deg; position: relative; background: var(--paper); border: 1px solid var(--hair-strong); border-radius: 20px; overflow: hidden; transform: rotateX(var(--tilt)); transform-origin: 50% 0; will-change: transform; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 40px 80px -30px rgba(11, 11, 15, 0.35), 0 12px 24px -12px rgba(11, 11, 15, 0.18); }
.hx-chrome { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--hair); background: var(--paper-2); }
.hx-chrome i { width: 10px; height: 10px; border-radius: 50%; background: rgba(11, 11, 15, 0.16); }
.hx-url { margin: 0 auto; padding: 4px 28px; border-radius: 8px; background: var(--paper); border: 1px solid var(--hair); font: 500 12px/16px var(--mono); color: var(--text-3); }
.hx-mode { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.hx-mode.live { color: var(--good); } .hx-mode.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(117, 255, 0, 0.25); animation: m-pulse 1.6s ease-in-out infinite; }
@keyframes m-pulse { 50% { box-shadow: 0 0 0 6px rgba(117, 255, 0, 0); } }
.hx-body { display: grid; grid-template-columns: 64px minmax(0, 1fr); min-height: 560px; background: var(--canvas); }
.hx-rail { margin: 10px 0 10px 10px; border-radius: 16px; background: var(--ink); color: rgba(255, 255, 255, 0.55); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; }
.hx-logo { width: 36px; height: 36px; margin-bottom: 8px; border-radius: 11px; background: #fff; color: var(--ink); display: grid; place-items: center; }
.ri { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; transition: background-color 200ms ease, color 200ms ease; }
.ri.on { background: rgba(255, 255, 255, 0.14); color: #fff; }
.hx-main { padding: 28px 32px 28px; min-width: 0; }
.hx-head { display: flex; align-items: center; gap: 12px; }
.hx-head .hx-h { margin: 0; font-size: 28px; line-height: 36px; letter-spacing: -0.025em; font-weight: 600; }
.hx-tag { padding: 2px 8px; border-radius: 4px; background: rgba(11, 11, 15, 0.07); font: 500 11px/16px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.hx-form { display: flex; align-items: center; gap: 12px; height: 56px; margin-top: 20px; padding: 0 8px 0 18px; background: var(--paper); border: 1px solid var(--hair-strong); border-radius: 14px; color: var(--text-3); transition: border-color 150ms ease, box-shadow 250ms ease; }
.hx-form:focus-within, .hx-form:has(.fake-focus) { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(11, 11, 15, 0.07); }
.hx-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 16px/24px var(--mono); color: var(--text); }
.hx-form input::placeholder { color: var(--text-3); font-family: var(--font); }
.hx-form button { height: 40px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font: 600 14px/18px var(--font); cursor: pointer; transition: transform 150ms ease, background-color 150ms ease; }
.hx-form button:hover { background: #2b2b33; } .hx-form button.press { transform: scale(0.94); } .hx-form button:disabled { opacity: 0.6; }
.hx-hint { margin: 12px 0 0; font-size: 13px; line-height: 20px; color: var(--text-3); }
.hx-result { margin-top: 20px; }
.hx-grid { display: grid; grid-template-columns: 260px minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
.hx-card { background: var(--paper); border: 1px solid var(--hair); border-radius: 16px; padding: 20px; animation: m-stage 450ms ease-out both; }
.hx-card .h4 { margin: 0 0 14px; font: 500 11px/12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); display: flex; justify-content: space-between; gap: 8px; }
.hx-card .h4 small { font: inherit; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.hx-checks { animation-delay: 80ms; } .hx-term { animation-delay: 160ms; }
.hx-verdict { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hx-ringwrap { position: relative; width: 150px; height: 150px; }
.hx-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.hx-ring circle { fill: none; stroke-width: 9; } .hx-ring .trk { stroke: var(--paper-2); }
.hx-ring .val { stroke: var(--text-3); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1), stroke 400ms ease; }
.is-running .hx-ring .val { stroke-dashoffset: 75; transform-origin: 60px 60px; animation: m-spin 1.1s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }
.tone-good .hx-ring .val { stroke: #16a34a; } .tone-warn .hx-ring .val { stroke: #d97706; } .tone-bad .hx-ring .val { stroke: #dc2626; } .tone-dis .hx-ring .val { stroke: #7c3aed; } .tone-unk .hx-ring .val { stroke: #71717a; }
.hx-score { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.hx-score b { font-size: 44px; line-height: 44px; letter-spacing: -0.04em; font-weight: 600; font-variant-numeric: tabular-nums; }
.hx-score small { font: 500 11px/14px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.hx-vbadge { margin-top: 16px; font-size: 14px !important; padding: 4px 12px !important; }
.hx-email { margin: 12px 0 0; max-width: 100%; font: 500 13px/20px var(--mono); word-break: break-all; }
.hx-email small { display: block; margin-top: 4px; font: 400 12px/18px var(--font); color: var(--text-3); text-transform: capitalize; }
.hx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.hx-chips span { padding: 2px 8px; border-radius: 4px; background: rgba(11, 11, 15, 0.06); font: 500 11px/16px var(--mono); color: var(--text-2); animation: m-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.hx-checks ul { margin: 0; padding: 0; list-style: none; }
.hx-checks li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 14px; line-height: 20px; }
.hx-checks li:first-child { border-top: 0; }
.hx-checks .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--text-3); transition: background-color 250ms ease, color 250ms ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.hx-checks .rs { font-size: 12px; color: var(--text-3); text-align: right; max-width: 140px; }
.hx-checks li:not(.st-running) .ic { animation: m-pop 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.st-pass .ic { background: #e7f6ec !important; color: #15803d !important; } .st-pass .rs { color: #15803d; }
.st-fail .ic { background: #fbe7e7 !important; color: #b91c1c !important; } .st-fail .rs { color: #b91c1c; }
.st-unknown .ic { background: #ececee !important; color: #52525b !important; } .st-not_checked { opacity: 0.6; }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--hair-strong); border-top-color: var(--ink); animation: m-spin 700ms linear infinite; }
.hx-term { background: var(--ink); border-color: var(--hair-ink); color: var(--on-ink); } .hx-term .h4 { color: var(--on-ink-3); } .hx-term .h4 small { color: var(--on-ink-3); }
.hx-term pre { margin: 0; font: 400 12.5px/20px var(--mono); color: #d6d6dc; white-space: pre-wrap; word-break: break-word; min-height: 140px; }
.hx-term pre div::after { content: ""; }
.hx-term .ok { color: #86efac; } .hx-term .no { color: #fca5a5; } .hx-term .dim { color: #8a8a94; }
.hx-typo { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px solid #f3d9a4; border-radius: 12px; background: #fdf0dc; color: #92400e; font: 400 14px/20px var(--font); text-align: left; cursor: pointer; animation: m-stage 400ms ease-out both; }
.hx-typo b { font-family: var(--mono); font-weight: 600; } .hx-typo span { margin-left: auto; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hx-foot { grid-column: 1 / -1; margin: 0; font: 500 11px/14px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.hx-err { margin: 0; padding: 16px; border-radius: 12px; background: #fbe7e7; color: #b91c1c; font-size: 14px; }
.hx-cursor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); }
.hx-cursor.on { opacity: 1; }
.hx:not(.has-result) .hx-result { min-height: 0; }
@media (max-width: 1280px) { .hx-grid { grid-template-columns: 220px minmax(0, 1fr); } .hx-term { grid-column: 1 / -1; } }
@media (max-width: 799px) {
  .hx { margin-top: 40px; perspective: none; }
  .hx-win { transform: none !important; border-radius: 16px; }
  .hx-body { grid-template-columns: 1fr; min-height: 0; } .hx-rail { display: none; }
  .hx-main { padding: 18px 14px; } .hx-head .hx-h { font-size: 22px; line-height: 28px; }
  .hx-form { height: 52px; padding-left: 14px; } .hx-form svg { display: none; } .hx-form button { padding: 0 14px; }
  .hx-grid { grid-template-columns: 1fr; } .hx-url { padding: 4px 12px; font-size: 11px; } .hx-cursor { display: none; }
  .hx-checks .rs { max-width: 110px; }
}
@media (prefers-reduced-motion: reduce) { .hx-win { transform: none; } .hx-cursor { display: none; } }
.hx-card .pv-badge.good { background: #e7f6ec; color: #15803d; } .hx-card .pv-badge.warn { background: #fdf0dc; color: #b45309; }
.hx-card .pv-badge.bad { background: #fbe7e7; color: #b91c1c; } .hx-card .pv-badge.dis { background: #efe9fb; color: #6d28d9; } .hx-card .pv-badge.unk { background: #ececee; color: #52525b; }
@media (min-width: 1281px) { .m-hero .m-display { font-size: 80px; line-height: 82px; } .hx { margin-top: 56px; } .m-hero { padding-bottom: 80px; } }

/* ---- Frames for the other pages ----------------------------------------- */
[data-frame] .hx-head + .hx-form, [data-frame] .hx-head + .hx-hint { margin-top: 20px; }
.bx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.bx-in textarea { width: 100%; height: 252px; resize: none; padding: 12px 14px; border: 1px solid var(--hair-strong); border-radius: 12px; background: var(--canvas); font: 500 13px/22px var(--mono); color: var(--text); outline: 0; transition: border-color 150ms ease; }
.bx-in textarea:focus { border-color: var(--ink); }
.bx-run, .ap-send button, .bx-dl { margin-top: 12px; width: 100%; height: 44px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font: 600 14px/18px var(--font); cursor: pointer; transition: transform 150ms ease, background-color 150ms ease, opacity 150ms ease; }
.bx-run:hover:not(:disabled), .ap-send button:hover:not(:disabled), .bx-dl:hover { background: #2b2b33; } .bx-run.press, .ap-send button.press { transform: scale(0.96); } .bx-run:disabled, .ap-send button:disabled { opacity: 0.45; cursor: default; }
.bx-x [data-xray] { animation: none; }
.bx-top { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.bx-leg { list-style: none; margin: 0; padding: 0; display: grid; }
.bx-leg li { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 14px; } .bx-leg li:first-child { border-top: 0; }
.bx-leg i { width: 10px; height: 10px; border-radius: 2px; } .bx-leg b { font-variant-numeric: tabular-nums; }
.bx-rows { list-style: none; margin: 14px 0 0; padding: 0; }
.bx-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 14px; color: var(--text-2); }
.bx-rows em { font: 500 10px/14px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; background: #e7f6ec; color: #15803d; font-style: normal; margin-left: 4px; }
.bx-rows b { color: var(--text); font-variant-numeric: tabular-nums; } .bx-rows .tot { font-weight: 600; color: var(--text); } .bx-rows .tot b { font-size: 18px; }
.bx-top4 { margin: 12px 0 0; font: 400 12px/18px var(--mono); color: var(--text-3); }
.bx-out { margin-top: 16px; } .bx-res { animation: m-stage 450ms ease-out both; }
.bx-resgrid { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.bx-table { list-style: none; margin: 16px 0 0; padding: 0; }
.bx-table li { display: grid; grid-template-columns: 1fr auto 40px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.bx-table .em { font-family: var(--mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bx-table b { text-align: right; font-variant-numeric: tabular-nums; }
.bx-prog { height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; } .bx-prog i { display: block; height: 100%; width: 40%; background: var(--ink); border-radius: 3px; animation: m-slide 1.1s ease-in-out infinite; }
@keyframes m-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.ps-out { margin-top: 16px; display: grid; gap: 16px; }
.ps-head .ps-title { margin: 0; font: 600 24px/30px var(--font); letter-spacing: -0.025em; }
.ps-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; }
.ps-ladder div { padding-top: 12px; font-size: 13px; line-height: 18px; color: var(--text-2); position: relative; }
.ps-ladder div::before { content: ""; display: block; height: 6px; border-radius: 3px; background: var(--hair-strong); margin-bottom: 12px; transform: scaleX(0); transform-origin: left; animation: m-grow 600ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0ms); background-color: var(--hair-strong); }
@keyframes m-grow { to { transform: scaleX(1); } }
.ps-ladder .past::before { background: var(--text-3); } .tone-bad .ps-ladder .on::before { background: #dc2626; } .tone-warn .ps-ladder .on::before { background: #d97706; } .tone-good .ps-ladder .on::before { background: #16a34a; }
.ps-ladder b { display: block; font-size: 15px; color: var(--text); } .ps-ladder code { font: 400 12px/16px var(--mono); color: var(--text-3); } .ps-ladder em { display: block; margin-top: 4px; font: 600 12px/16px var(--font); font-style: normal; color: var(--text); }
.ps-next { margin: 18px 0 0; font-size: 14px; line-height: 22px; color: var(--text-2); } .ps-next b { color: var(--text); }
.ps-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.ps-rows ul { list-style: none; margin: 0; padding: 0; }
.ps-rows li { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; padding: 11px 0; border-top: 1px solid var(--hair); font-size: 14px; } .ps-rows li:first-child { border-top: 0; }
.ps-rows .nm { font-weight: 600; } .ps-rows .rs { text-align: right; } .ps-rows code { grid-column: 1 / -1; font: 400 11.5px/18px var(--mono); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-rows .st-pass .rs { color: #15803d; } .ps-rows .st-fail .rs { color: #b91c1c; } .ps-rows .st-unknown .rs { color: #b45309; } .ps-rows .st-not_checked .rs { color: var(--text-3); } .ps-rows .st-not_checked { opacity: 1; }
.ps-grid .hx-term pre { min-height: 150px; font-size: 12px; }
.ap-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 20px; }
.ap-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.ap-tabs button { height: 32px; padding: 0 12px; border: 1px solid var(--hair-strong); border-radius: 8px; background: transparent; font: 600 13px/16px var(--font); color: var(--text-2); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.ap-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ap-send { display: grid; grid-template-columns: 1fr auto; gap: 8px; } .ap-send input { min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--hair-strong); border-radius: 10px; font: 500 14px/20px var(--mono); outline: 0; background: var(--canvas); transition: border-color 150ms ease; } .ap-send input:focus { border-color: var(--ink); } .ap-send button { margin-top: 0; width: auto; padding: 0 22px; }
.ap-code { margin: 14px 0 0; padding: 16px; min-height: 120px; border-radius: 12px; background: var(--ink); color: #d6d6dc; font: 400 12.5px/21px var(--mono); white-space: pre-wrap; word-break: break-all; }
.ap-code .k, .ap-json .k { color: #9aa0ff; } .ap-code .s, .ap-json .s { color: #7ee2a8; } .ap-json .pk { color: #d6d6dc; } .ap-json .n { color: #fcd34d; }
.ap-res { display: flex; flex-direction: column; } .ap-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 28px; margin-bottom: 12px; font: 500 12px/16px var(--mono); color: var(--on-ink-2); }
.ap-json { flex: 1; margin: 0; max-height: 330px; overflow: auto; font: 400 12.5px/20px var(--mono); color: #d6d6dc; white-space: pre; } .ap-json.flash { animation: m-stage 400ms ease-out both; }
.ap-res .pv-badge.good { background: rgba(34, 197, 94, 0.16); color: #86efac; } .ap-res .pv-badge.bad { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
.pl-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 16px; margin-top: 16px; }
.pl-lab { display: block; font-size: 13px; color: var(--text-2); } .pl-lab small { color: var(--text-3); }
.pl-big { margin: 6px 0 12px; } .pl-big b { font-size: 44px; line-height: 48px; letter-spacing: -0.04em; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-in input[type="range"] { width: 100%; accent-color: var(--ink); }
.pl-num { width: 100%; height: 44px; margin-top: 6px; padding: 0 14px; border: 1px solid var(--hair-strong); border-radius: 10px; background: var(--canvas); font: 500 14px/20px var(--mono); outline: 0; } .pl-num:focus { border-color: var(--ink); }
.pl-pick { margin: 20px 0 0; font-size: 14px; line-height: 22px; color: var(--text-2); } .pl-pick b { color: var(--text); }
.pl-plans ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-plans li { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--hair); border-radius: 12px; transition: border-color 250ms ease, background-color 250ms ease, opacity 250ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.pl-plans small { display: block; font-size: 12px; line-height: 16px; color: var(--text-3); } .pl-plans .pr { text-align: right; } .pl-plans .pr b { font-size: 18px; letter-spacing: -0.02em; }
.pl-plans .tag { font: 600 11px/16px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; background: var(--paper-2); color: var(--text-3); }
.pl-plans .no { opacity: 0.45; } .pl-plans .rec { background: var(--ink); color: #fff; border-color: var(--ink); transform: scale(1.015); } .pl-plans .rec small { color: rgba(255,255,255,.62); } .pl-plans .rec .tag { background: var(--signal); color: var(--ink); } .pl-plans .ok .tag { background: #e7f6ec; color: #15803d; }
@media (max-width: 1280px) { .ps-grid, .ap-grid, .pl-grid, .bx-grid { grid-template-columns: 1fr; } }
@media (max-width: 799px) {
  .bx-top, .bx-resgrid { grid-template-columns: 1fr; justify-items: center; } .bx-leg { width: 100%; } .ps-ladder { grid-template-columns: repeat(2, 1fr); } .ps-head .ps-title { font-size: 20px; line-height: 26px; }
  .pl-plans li { grid-template-columns: 1fr auto; } .pl-plans .tag { grid-column: 1 / -1; justify-self: start; } .ps-rows li { grid-template-columns: 90px 1fr; } .ap-send { grid-template-columns: 1fr; } .ap-send button { width: 100%; }
}
.hx-url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; } .hx-mode { white-space: nowrap; }
.ap-meta .m-small { color: var(--on-ink-3); }
@media (max-width: 799px) { .hx-url { margin: 0 auto 0 6px; max-width: 56%; } }

/* ---- Verdict ticker ------------------------------------------------------ */
.tk-wrap { position: relative; padding: 28px 0 8px; border-bottom: 1px solid var(--hair); overflow: hidden; }
.tk-label { max-width: 1360px; margin: 0 auto 14px; padding: 0 var(--gutter); font: 500 11px/12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.tk-row { overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent); }
.tk-track { display: flex; width: max-content; gap: 12px; padding-right: 12px; animation: m-marquee 70s linear infinite; will-change: transform; }
.tk-row.rev .tk-track { animation-direction: reverse; animation-duration: 85s; }
.tk-row:hover .tk-track { animation-play-state: paused; }
.tk { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 14px; background: var(--paper); border: 1px solid var(--hair); border-radius: 12px; white-space: nowrap; transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms ease; }
.tk:hover { transform: translateY(-3px); border-color: var(--hair-strong); }
.tk i { width: 8px; height: 8px; border-radius: 50%; } .tk i.good { background: #22c55e; } .tk i.warn { background: #f59e0b; } .tk i.bad { background: #ef4444; } .tk i.dis { background: #a78bfa; } .tk i.unk { background: #9ca3af; }
.tk code { font: 500 13px/16px var(--mono); } .tk b { font: 600 12px/16px var(--font); color: var(--text-2); }

/* ---- Product tour -------------------------------------------------------- */
.tr { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; }
.tr-nav { display: grid; gap: 4px; position: sticky; top: 104px; }
.tr-tab { position: relative; text-align: left; padding: 16px 18px 16px 22px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; font: inherit; color: var(--text); opacity: 0.5; transition: opacity 250ms ease, background-color 250ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.tr-tab:hover { opacity: 0.85; transform: translateX(4px); } .tr-tab[aria-selected="true"] { opacity: 1; background: var(--paper); box-shadow: 0 0 0 1px var(--hair); transform: none; }
.tr-tab b { display: block; font-size: 17px; line-height: 22px; letter-spacing: -0.01em; } .tr-tab small { display: block; margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--text-3); }
.tr-prog { position: absolute; left: 8px; top: 14px; bottom: 14px; width: 2px; border-radius: 1px; background: var(--hair-strong); overflow: hidden; } .tr-prog i { display: block; width: 100%; height: 100%; background: var(--ink); transform-origin: top; transform: scaleY(var(--p, 0)); }
.tr-tab:not([aria-selected="true"]) .tr-prog i { transform: scaleY(0); }
.tr-win { --tilt: 0deg; transform: none; min-height: 600px; }
.tr-win .hx-body { min-height: 556px; }
.tr-screen { animation: none; } .tr-screen.in { animation: m-stage 500ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.tr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.tr-kpi { background: var(--paper); border: 1px solid var(--hair); border-radius: 14px; padding: 16px; } .tr-kpi small { display: block; font-size: 12px; color: var(--text-3); } .tr-kpi b { display: block; margin: 6px 0 2px; font-size: 26px; line-height: 30px; letter-spacing: -0.03em; font-weight: 600; font-variant-numeric: tabular-nums; } .tr-kpi span { font-size: 12px; color: var(--text-3); }
.tr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .tr-two.wide { grid-template-columns: 1.3fr 1fr; margin-top: 20px; }
.tr-leg p { display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 13px; } .tr-leg p:first-child { border-top: 0; } .tr-leg i { width: 9px; height: 9px; border-radius: 2px; } .tr-leg b { margin-left: auto; }
.tr-att { list-style: none; margin: 0; padding: 0; } .tr-att li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); } .tr-att li:first-child { border-top: 0; }
.tr-att b { display: block; font-size: 14px; } .tr-att small { font-size: 12px; color: var(--text-3); } .tr-att em { font-style: normal; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tr-table { list-style: none; margin: 0; padding: 0; } .tr-table li { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--hair); font-size: 14px; } .tr-table li:first-child { border-top: 0; }
.tr-table small { display: block; font-size: 12px; color: var(--text-3); } .tr-table .bar { height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; } .tr-table .bar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; transform-origin: left; animation: m-grow 900ms cubic-bezier(0.22, 1, 0.36, 1) both 200ms; }
.tr-table.lk li { grid-template-columns: 1.1fr 1.4fr auto; } .tr-table code { font: 500 13px/18px var(--mono); }
.tr-dl { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--ink); color: #fff; } .tr-dl b { font-size: 13px; padding: 6px 12px; border-radius: 8px; background: #fff; color: var(--ink); }
.tr-route { list-style: none; margin: 0; padding: 0; position: relative; } .tr-route li { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; position: relative; }
.tr-route li::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1.5px; background: var(--hair-strong); } .tr-route li:first-child::before { top: 50%; } .tr-route li:last-child::before { bottom: 50%; }
.tr-route i { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--paper); animation: m-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } .tr-route li:nth-child(2) i { animation-delay: 150ms; } .tr-route li:nth-child(3) i { animation-delay: 300ms; } .tr-route li:nth-child(4) i { animation-delay: 450ms; }
.tr-route b { display: block; font-size: 14px; } .tr-route small { font: 400 12px/16px var(--mono); color: var(--text-3); } .tr-route em { font: 500 12px/16px var(--mono); font-style: normal; color: var(--text-3); }
.tr-auth { list-style: none; margin: 0; padding: 0; } .tr-auth li { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 14px; } .tr-auth li:first-child { border-top: 0; }
.tr-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .tr-cats span { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--hair-strong); font-size: 13px; font-weight: 500; color: var(--text-2); } .tr-cats .on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tr-recipes { display: grid; gap: 12px; margin-top: 16px; } .tr-recipes .hx-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .tr-recipes p { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-2); } .tr-recipes b { color: var(--text); }
.tr-win .pv-donut { grid-template-columns: auto 1fr; }
@media (max-width: 1280px) { .tr { grid-template-columns: 1fr; gap: 24px; } .tr-nav { position: static; display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter); } .tr-tab { flex: none; width: 240px; scroll-snap-align: start; opacity: 0.7; } .tr-prog { display: none; } }
@media (max-width: 799px) { .tr-kpis { grid-template-columns: repeat(2, 1fr); } .tr-two, .tr-two.wide { grid-template-columns: 1fr; } .tr-win, .tr-win .hx-body { min-height: 0; } .tr-table li, .tr-table.lk li { grid-template-columns: 1fr auto; } .tr-table .bar { display: none; } .tr-recipes .hx-card { flex-direction: column; align-items: flex-start; } }

/* ---- DMARC ladder story --------------------------------------------------- */
.pst-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--paper-2); }
.pst-tabs button { height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font: 600 13px/16px var(--font); color: var(--text-2); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.pst-tabs button[aria-selected="true"] { background: var(--paper); color: var(--text); box-shadow: 0 1px 2px rgba(11, 11, 15, 0.12), 0 0 0 1px var(--hair); }
.pst-head { margin: 24px 0 0; font: 600 26px/32px var(--font); letter-spacing: -0.03em; min-height: 64px; } .pst-head.flip { animation: m-stage 400ms ease-out both; }
.ps-story .ps-ladder { margin-top: 12px; }
.pst-rec { margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: var(--ink); color: #d6d6dc; } .pst-rec small { display: block; margin-bottom: 6px; font: 500 11px/12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-3); } .pst-rec code { font: 400 12.5px/20px var(--mono); word-break: break-all; }
.pst-recv { margin: 16px 0 0; font-size: 14px; line-height: 22px; color: var(--text-2); } .pst-recv b { color: var(--text); }

/* ---- Principle cards ------------------------------------------------------ */
.pf { height: 100%; padding-top: 24px; border-top: 1px solid var(--hair-strong); }
.pf-vis { height: 148px; margin-bottom: 24px; border-radius: 14px; background: var(--canvas); border: 1px solid var(--hair); position: relative; overflow: hidden; display: grid; place-items: center; }
.pf .m-h4 { margin-bottom: 8px; }
.pf-local { grid-auto-flow: column; gap: 14px; } .pf-local .file { padding: 6px 10px; border-radius: 8px; background: var(--ink); color: #fff; font: 500 12px/16px var(--mono); animation: pf-slide 4s ease-in-out infinite; }
.pf-local .box { position: relative; width: 84px; height: 84px; border: 1px dashed var(--hair-strong); border-radius: 14px; display: grid; align-content: center; gap: 6px; padding: 14px; } .pf-local .box i { height: 5px; border-radius: 3px; background: var(--hair-strong); animation: pf-rows 4s ease-in-out infinite; } .pf-local .box i:nth-child(2) { width: 70%; animation-delay: 0.15s; } .pf-local .box i:nth-child(3) { width: 45%; animation-delay: 0.3s; } .pf-local .box svg { position: absolute; right: -8px; bottom: -8px; padding: 3px; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--hair-strong); }
@keyframes pf-slide { 0%, 15% { transform: translateX(-18px); opacity: 0; } 35%, 70% { transform: none; opacity: 1; } 100% { transform: translateX(10px); opacity: 0; } }
@keyframes pf-rows { 0%, 30% { background: var(--hair-strong); } 50%, 80% { background: var(--ink); } 100% { background: var(--hair-strong); } }
.pf-ev { align-content: center; padding: 0 18px; gap: 0; } .pf-ev p { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 13px; } .pf-ev p:first-child { border-top: 0; } .pf-ev span { margin-left: auto; color: var(--text-3); font-size: 12px; }
.pf-ev b { width: 16px; height: 16px; border-radius: 50%; animation: m-pop 4s ease-in-out infinite; } .pf-ev .ok { background: #22c55e; } .pf-ev .q { background: #9ca3af; } .pf-ev p:nth-child(2) b { animation-delay: .3s; } .pf-ev p:nth-child(3) b { animation-delay: .6s; }
.pf-dns { grid-auto-flow: column; gap: 8px; } .pf-dns code { padding: 4px 8px; border-radius: 6px; background: var(--paper); border: 1px solid var(--hair); font: 500 11px/14px var(--mono); animation: pf-q 3.6s ease-in-out infinite; } .pf-dns code:nth-child(2) { animation-delay: .4s; } .pf-dns code:nth-child(3) { animation-delay: .8s; } .pf-dns .env { position: absolute; right: 16px; bottom: 14px; color: var(--text-3); }
@keyframes pf-q { 0%, 100% { transform: translateY(6px); opacity: .4; } 40%, 70% { transform: none; opacity: 1; } }
.pf-cost { align-content: center; padding: 0 18px; gap: 8px; } .pf-cost p { display: flex; justify-content: space-between; width: 100%; margin: 0; font-size: 13px; color: var(--text-2); } .pf-cost b { color: var(--text); font-variant-numeric: tabular-nums; } .pf-cost .free { color: #15803d; } .pf-cost .bar { width: 100%; height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; } .pf-cost .bar i { display: block; height: 100%; width: 84%; background: var(--ink); border-radius: 3px; transform-origin: left; animation: m-grow 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate; }
@media (prefers-reduced-motion: reduce) { .tk-track, .pf-local .file, .pf-local .box i, .pf-ev b, .pf-dns code, .pf-cost .bar i { animation: none !important; } .pf-local .file, .pf-dns code { opacity: 1; } }
/* tighter story rhythm */
.m-step { min-height: 52vh; } .m-story-steps { padding-bottom: 8vh; }

/* ---- Chapters: rail, chip, hand-offs ------------------------------------- */
.ch-rail { position: fixed; left: 22px; top: 50%; z-index: 40; transform: translateY(-50%); display: flex; flex-direction: column; gap: 26px; padding: 6px 0; opacity: 0; visibility: hidden; transition: opacity 400ms ease, visibility 400ms ease; --c: var(--text); --c2: var(--hair-strong); }
.ch-rail.show { opacity: 1; visibility: visible; } .ch-rail.dark { --c: #f5f5f7; --c2: rgba(255, 255, 255, 0.22); }
.ch-line { position: absolute; left: 5px; top: 12px; bottom: 12px; width: 2px; border-radius: 1px; background: var(--c2); overflow: hidden; transition: background-color 350ms ease; }
.ch-line i { display: block; width: 100%; height: 100%; background: var(--signal); transform-origin: top; transform: scaleY(0); }
.ch-dot { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c); height: 14px; transition: color 350ms ease; }
.ch-dot i { width: 12px; height: 12px; border-radius: 50%; background: var(--canvas); border: 2px solid var(--c2); transition: background-color 300ms ease, border-color 300ms ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.ch-rail.dark .ch-dot i { background: var(--ink); }
.ch-dot.done i { border-color: var(--signal); background: var(--signal); } .ch-dot.on i { transform: scale(1.35); border-color: var(--signal); background: var(--ink); box-shadow: 0 0 0 4px rgba(117, 255, 0, 0.25); }
.ch-dot span { display: inline-flex; gap: 8px; align-items: center; padding: 3px 9px; border-radius: 6px; background: var(--ink); color: #fff; font: 500 11px/14px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity 200ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.ch-rail.dark .ch-dot span { background: #fff; color: var(--ink); } .ch-dot span em { font-style: normal; opacity: 0.6; }
.ch-dot.on span, .ch-dot:hover span, .ch-dot:focus-visible span { opacity: 1; transform: none; }
.ch-chip { position: fixed; left: 50%; bottom: 18px; z-index: 40; transform: translate(-50%, 20px); padding: 9px 16px 12px; border-radius: 12px; background: rgba(11, 11, 15, 0.9); color: #fff; font: 500 12px/14px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transition: opacity 300ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1), visibility 300ms ease; overflow: hidden; }
.ch-chip.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .ch-chip i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--signal); transform-origin: left; transform: scaleX(0); }
@media (min-width: 1400px) { .ch-chip { display: none; } } @media (max-width: 1399px) { .ch-rail { display: none; } }
.ho { padding: 0; } .ho .m-container { padding-top: 0; padding-bottom: 0; }
.ho-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 28px 0; border-top: 1px solid var(--hair-strong); }
.ho-side small { display: block; font: 500 11px/12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .ho-side b { display: block; margin-top: 8px; font-size: 18px; line-height: 24px; letter-spacing: -0.015em; } .ho-side.r { text-align: right; }
.ho-link { position: relative; height: 40px; display: flex; align-items: center; }
.ho-line { position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--hair-strong); }
.ho-dot { position: absolute; top: 50%; right: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--ink); }
.ho-pkt { position: relative; z-index: 1; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12px/16px var(--font); white-space: nowrap; animation: ho-run 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes ho-run { 0% { transform: translateX(-30%); opacity: 0; } 12% { opacity: 1; } 55%, 85% { transform: translateX(var(--run, 70%)); opacity: 1; } 100% { transform: translateX(var(--run, 70%)); opacity: 0; } }
.ho-link { --run: 40%; } .ho-in:not(.in) .ho-pkt { animation-play-state: paused; }
.ink + .ho .ho-in, .ho-in { color: var(--text); }
@media (max-width: 1280px) { .ho-in { grid-template-columns: 1fr auto; } .ho-link { display: none; } .ho-side.r { text-align: left; grid-column: 1; } .ho-go { grid-column: 2; grid-row: 1 / span 2; } }
@media (max-width: 799px) { .ho-in { grid-template-columns: 1fr; } .ho-go { grid-column: 1; grid-row: auto; width: 100%; } }

/* ---- Automate flow ---------------------------------------------------------- */
.au { padding: 28px; border-radius: 16px; background: var(--canvas); border: 1px solid var(--hair); }
.au-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--paper-2); }
.au-tabs button { height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font: 600 13px/16px var(--font); color: var(--text-2); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.au-tabs button[aria-selected="true"] { background: var(--paper); color: var(--text); box-shadow: 0 1px 2px rgba(11, 11, 15, 0.12), 0 0 0 1px var(--hair); }
.au-flow { display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr; align-items: center; margin-top: 28px; }
.au-node { padding: 18px; border-radius: 14px; background: var(--paper); border: 1px solid var(--hair); min-height: 96px; } .au-node.ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.au-node small { display: block; font: 500 11px/12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .au-node.ink small { color: var(--on-ink-3); } .au-node b { display: block; margin-top: 10px; font-size: 16px; line-height: 22px; letter-spacing: -0.01em; }
.au-flow.go .au-node b { animation: m-stage 450ms ease-out both; } .au-flow.go .au-node:nth-child(3) b { animation-delay: 150ms; } .au-flow.go .au-node:nth-child(5) b { animation-delay: 300ms; }
.au-wire { position: relative; height: 2px; background: var(--hair-strong); overflow: visible; } .au-wire i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(117, 255, 0, 0.25); opacity: 0; }
.au-flow.go .au-wire i { animation: au-pkt 1.1s cubic-bezier(0.65, 0, 0.35, 1) both; } .au-flow.go .au-wire:nth-of-type(2) i { animation-delay: 0.1s; } .au-flow.go .au-wire:nth-of-type(4) i { animation-delay: 0.9s; }
@keyframes au-pkt { 0% { left: 0; opacity: 1; } 100% { left: calc(100% - 8px); opacity: 1; } }
.au-rule { margin: 24px 0 0; font-size: 15px; line-height: 24px; color: var(--text-2); } .au-rule b { color: var(--text); }
.au-state { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); } .au-state small { font-size: 12px; line-height: 18px; color: var(--text-3); }
@media (max-width: 799px) { .au { padding: 18px; } .au-flow { grid-template-columns: 1fr; gap: 0; } .au-wire { width: 2px; height: 28px; margin: 0 auto; } .au-wire i { left: -3px; top: 0; } @keyframes au-pkt { 0% { top: 0; opacity: 1; } 100% { top: calc(100% - 8px); opacity: 1; } } }
.ch-dot span u { text-decoration: none; display: none; } .ch-dot:hover span u, .ch-dot:focus-visible span u { display: inline; }
.ch-dot.on span { padding: 2px 6px; }
.hx-win .pv-badge.good, .au .pv-badge.good { background: #e7f6ec; color: #15803d; } .hx-win .pv-badge.warn, .au .pv-badge.warn { background: #fdf0dc; color: #b45309; }
.hx-win .pv-badge.bad, .au .pv-badge.bad { background: #fbe7e7; color: #b91c1c; } .hx-win .pv-badge.dis, .au .pv-badge.dis { background: #efe9fb; color: #6d28d9; } .hx-win .pv-badge.unk, .au .pv-badge.unk { background: #ececee; color: #52525b; }
.hx-term .pv-badge.good, .ap-res .pv-badge.good { background: rgba(34, 197, 94, 0.16); color: #86efac; } .hx-term .pv-badge.bad, .ap-res .pv-badge.bad { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }

/* ---- Filling the empty space --------------------------------------------- */
.m-head-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: end; margin-bottom: 64px; }
.m-head-row .m-section-head { margin-bottom: 0; max-width: none; } .m-head-aside { padding-bottom: 6px; }
.m-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.m-pills span { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--hair-strong); font: 500 12px/16px var(--mono); letter-spacing: 0.04em; color: var(--text-2); transition: background-color 200ms ease, color 200ms ease, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.m-pills span:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
.ink .m-pills span { border-color: var(--hair-ink-strong); color: var(--on-ink-2); } .ink .m-pills span:hover { background: #fff; color: var(--ink); }
.ep { list-style: none; margin: 0; padding: 0; } .ep li { display: grid; grid-template-columns: 54px 1fr; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--hair-strong); font-size: 14px; } .ep li:first-child { border-top: 0; }
.ep code { font: 600 11px/18px var(--mono); padding: 0 6px; border-radius: 4px; background: var(--paper-2); height: fit-content; text-align: center; } .ep span { font: 500 13px/18px var(--mono); } .ep small { grid-column: 2; color: var(--text-3); font-size: 12px; }
@media (max-width: 1280px) { .m-head-row { grid-template-columns: 1fr; margin-bottom: 48px; align-items: start; } }
@media (max-width: 799px) { .m-head-row { margin-bottom: 36px; } }
/* stage: visuals sit on an intentional canvas instead of floating in space */
.stagebg { position: relative; padding: 56px; border-radius: 20px; background-color: var(--paper-2); background-image: radial-gradient(rgba(11, 11, 15, 0.1) 1px, transparent 1px); background-size: 20px 20px; overflow: hidden; }
.ink .stagebg { background-color: var(--ink-1); background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px); }
.stagebg .pv { max-width: 560px; margin-inline: auto; }
.stack { position: relative; min-height: 420px; } .stack .pv:first-child { position: absolute; left: 0; top: 40px; width: 62%; max-width: none; opacity: 0.95; } .stack .pv:last-child { position: relative; width: 70%; margin-left: auto; z-index: 1; }
@media (max-width: 1280px) { .stagebg { padding: 32px; } .stagebg .pv { max-width: none; } } @media (max-width: 799px) { .stagebg { padding: 16px; } .stack { min-height: 0; } .stack .pv:first-child { display: none; } .stack .pv:last-child { width: 100%; } }
/* faq in two columns */
.faq-side { align-self: start; position: sticky; top: 120px; } .m-faq.wide { max-width: none; margin: 0; }
@media (max-width: 1280px) { .faq-side { position: static; margin-bottom: 24px; } }
/* hero satellites: floating proof cards that react to the frame */
.hx-sat { position: absolute; z-index: 3; width: 190px; padding: 14px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--hair-strong); box-shadow: 0 18px 40px -18px rgba(11, 11, 15, 0.35); opacity: 0.55; transition: opacity 400ms ease, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 400ms ease, border-color 300ms ease; will-change: translate; }
.hx-sat small { display: block; font: 500 10px/12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .hx-sat b { display: block; margin: 8px 0 2px; font: 500 13px/18px var(--mono); } .hx-sat span { font-size: 12px; color: var(--text-3); }
.hx-sat.l { left: calc(var(--gutter) - 64px); top: 150px; } .hx-sat.r { right: calc(var(--gutter) - 64px); top: 300px; } .hx-sat.b { right: calc(var(--gutter) + 40px); bottom: -34px; }
.hx-sat.act { opacity: 1; transform: translateY(-8px) scale(1.04); border-color: var(--ink); box-shadow: 0 24px 50px -16px rgba(11, 11, 15, 0.45); }
.hx-sat.act[data-sat="ok"] { border-color: #16a34a; } .hx-sat.act[data-sat="dis"] { border-color: #7c3aed; } .hx-sat.act[data-sat="typo"] { border-color: #d97706; }
@media (max-width: 1500px) { .hx-sat.l { left: 8px; } .hx-sat.r { right: 8px; } .hx-sat { width: 168px; } .hx-sat.b { right: 40px; } }
@media (max-width: 1279px) { .hx-sat { display: none; } }
/* response anatomy */
.an { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.an-code { margin: 0; padding: 24px; border-radius: 16px; background: var(--ink-1); border: 1px solid var(--hair-ink); font: 400 13px/22px var(--mono); color: #d6d6dc; overflow-x: auto; white-space: pre; }
.an-l { display: block; width: 100%; padding: 1px 10px; margin: 0 -10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: default; transition: background-color 200ms ease; white-space: pre; } .an-l.on, .an-l:focus-visible { background: rgba(255, 255, 255, 0.1); }
.an-code .pk { color: #d6d6dc; } .an-code .s { color: #7ee2a8; } .an-code .n { color: #fcd34d; }
.an-doc { position: sticky; top: 120px; padding: 28px; border-radius: 16px; border: 1px solid var(--hair-ink); } .an-doc small { font: 500 11px/12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-3); } .an-doc b { display: block; margin: 12px 0; font: 600 28px/32px var(--mono); letter-spacing: -0.02em; } .an-doc p { margin: 0; min-height: 96px; font-size: 16px; line-height: 26px; color: var(--on-ink-2); } .an-doc p.flip { animation: m-stage 350ms ease-out both; } .an-ex { display: inline-block; margin-top: 16px; padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); font: 500 10px/14px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-3); }
@media (max-width: 1280px) { .an { grid-template-columns: 1fr; } .an-doc { position: static; } } @media (max-width: 799px) { .an-code { font-size: 11.5px; padding: 16px; } }
/* plan comparison */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: 16px; background: var(--paper); }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; } .cmp th, .cmp td { padding: 18px 24px; text-align: left; border-top: 1px solid var(--hair); font-weight: 500; } .cmp thead th { border-top: 0; font: 600 16px/20px var(--font); letter-spacing: -0.01em; } .cmp tbody th { color: var(--text-3); font-weight: 500; font-size: 14px; } .cmp td { font-variant-numeric: tabular-nums; } .cmp .hot { background: var(--paper-2); } .cmp tbody tr:hover td, .cmp tbody tr:hover th { background: rgba(11, 11, 15, 0.03); }

/* ---- Footer as the finale -------------------------------------------------- */
.ft { position: relative; min-height: 100vh; display: flex; flex-direction: column; background: var(--ink); color: var(--on-ink); overflow: hidden; padding-top: 120px; }
.ft-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%); mask-image: linear-gradient(180deg, #000, transparent 60%); }
.ft > * { position: relative; }
.ft-top { text-align: left; } .ft-title { max-width: 1000px; } .ft-top .m-lead { max-width: 560px; }
.ft-map { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--gap); margin-top: 96px; padding-top: 40px; border-top: 1px solid var(--hair-ink); }
.ft-col .h4 { margin: 0 0 20px; font: 500 12px/12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-3); }
.ft-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ft-col a { display: block; text-decoration: none; color: var(--on-ink-2); font-size: 15px; line-height: 20px; transition: color 150ms ease, transform 250ms cubic-bezier(0.22, 1, 0.36, 1); } .ft-col a:hover { color: #fff; transform: translateX(4px); } .ft-col em { font: 500 11px/14px var(--mono); font-style: normal; color: var(--on-ink-3); margin-right: 6px; }
.ft-col.big ul { gap: 4px; } .ft-col.big a { padding: 10px 0; border-bottom: 1px solid var(--hair-ink); } .ft-col.big a span { display: block; font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.03em; color: #fff; } .ft-col.big small { display: block; margin-top: 4px; font-size: 14px; color: var(--on-ink-3); } .ft-col.big a:hover { transform: none; } .ft-col.big a:hover span { transform: translateX(6px); } .ft-col.big a span { transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.ft-prin { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: 56px; } .ft-prin p { margin: 0; padding-top: 16px; border-top: 1px solid var(--hair-ink); font-size: 14px; line-height: 22px; color: var(--on-ink-3); } .ft-prin b { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }
.ft-mark { margin-top: auto; padding-top: 72px; overflow: hidden; line-height: 0.74; user-select: none; text-align: center; }
.ft-word { display: inline-flex; font-weight: 600; font-size: min(25.5vw, 430px); letter-spacing: -0.065em; line-height: 0.78; padding: 0 0.02em; transform: translateY(0.12em); }
.ft-l { display: inline-block; overflow: hidden; padding-bottom: 0.1em; }
.ft-l { color: transparent; background-image: radial-gradient(0.9em circle at var(--mx, -50%) var(--my, 50%), var(--signal), rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.12) 80%); -webkit-background-clip: text; background-clip: text; transform: translateY(105%); transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i) * 80ms); }
.ft-word.in .ft-l { transform: none; }
.ft-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 28px; margin-top: -1.4vw; font-size: 13px; color: var(--on-ink-3); border-top: 1px solid var(--hair-ink); background: var(--ink); z-index: 2; } .ft-base a { color: var(--on-ink-2); text-decoration: none; } .ft-base a:hover { color: #fff; }
[data-at-footer="true"] .ch-rail, [data-at-footer="true"] .ch-chip { opacity: 0 !important; visibility: hidden !important; }
@media (max-width: 1280px) { .ft-map { grid-template-columns: repeat(3, 1fr); } .ft-col.big { grid-column: 1 / -1; } .ft-prin { grid-template-columns: 1fr 1fr; } }
@media (max-width: 799px) { .ft { padding-top: 72px; } .ft-map { grid-template-columns: 1fr 1fr; margin-top: 56px; } .ft-prin { grid-template-columns: 1fr; margin-top: 32px; } .ft-col.big a span { font-size: 24px; } .ft-mark { padding-top: 40px; } .ft-base { margin-top: -2vw; } }
@media (prefers-reduced-motion: reduce) { .ft-l { transform: none; } }
.ft .m-btn.secondary { color: #fff; border-color: var(--hair-ink-strong); } .ft .m-btn.secondary:hover { background: rgba(255, 255, 255, 0.08); }
.ft-word { font-size: min(21.6vw, 372px); }

/* ---- Footer v2: brand, live check, tiles, ticker, ghost mark ------------- */
.ft-ghost { position: absolute; right: -9vw; top: 4vw; width: 62vw; max-width: 980px; fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1.4; pointer-events: none; transform: translate(calc(var(--gx, 0) * 1px), calc(var(--gy, 0) * 1px)); transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); animation: ft-float 12s ease-in-out infinite alternate; }
@keyframes ft-float { to { margin-top: 24px; } }
.ft-brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 64px; }
.ft-lockup { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: #fff; }
.ft-tile-logo { width: 64px; height: 64px; border-radius: 18px; background: #fff; color: var(--ink); display: grid; place-items: center; transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1); } .ft-lockup:hover .ft-tile-logo { transform: rotate(-8deg) scale(1.06); }
.ft-lockup b { display: block; font-size: 30px; line-height: 32px; font-weight: 600; letter-spacing: -0.04em; } .ft-lockup small { display: block; margin-top: 4px; font: 500 12px/14px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-ink-3); }
.ft-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--hair-ink-strong); border-radius: 999px; font: 500 12px/14px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-ink-2); } .ft-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(117, 255, 0, 0.2); animation: m-pulse 1.8s ease-in-out infinite; }
.ft-top .m-btn-row { margin-top: 28px; }
.ft-check { display: flex; align-items: center; gap: 12px; max-width: 720px; height: 68px; margin-top: 40px; padding: 0 10px 0 22px; border: 1px solid var(--hair-ink-strong); border-radius: 20px; background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--on-ink-3); transition: border-color 200ms ease, background-color 200ms ease, box-shadow 300ms ease; }
.ft-check:focus-within { border-color: #fff; background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06); }
.ft-check input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: 500 18px/24px var(--mono); } .ft-check input::placeholder { color: var(--on-ink-3); font-family: var(--font); }
.ft-check output { font: 600 13px/18px var(--font); padding: 4px 10px; border-radius: 6px; white-space: nowrap; } .ft-check output:empty { display: none; } .ft-check output.good { background: rgba(34, 197, 94, 0.2); color: #4ade80; } .ft-check output.bad { background: rgba(239, 68, 68, 0.2); color: #f87171; } .ft-check output.warn { background: rgba(245, 158, 11, 0.2); color: #fbbf24; } .ft-check output.dis { background: rgba(167, 139, 250, 0.2); color: #c4b5fd; } .ft-check output.unk { background: rgba(255, 255, 255, 0.12); color: var(--on-ink-2); }
.ft-check button { height: 48px; padding: 0 24px; border: 0; border-radius: 14px; background: #fff; color: var(--ink); font: 600 15px/18px var(--font); cursor: pointer; transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); } .ft-check button:hover { transform: scale(1.04); }
.ft-map { grid-template-columns: 2.4fr repeat(3, 1fr); }
.ft-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ft-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 168px; padding: 22px; border: 1px solid var(--hair-ink); border-radius: 20px; background: rgba(255, 255, 255, 0.03); text-decoration: none; color: #fff; overflow: hidden; transition: background-color 350ms ease, color 350ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms ease; }
.ft-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 300ms ease; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(117, 255, 0, 0.16), transparent 60%); } .ft-tile:hover::after { opacity: 1; }
.ft-tile .ico { position: absolute; left: 22px; top: 22px; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; border: 1px solid var(--hair-ink-strong); transition: background-color 350ms ease, color 350ms ease, border-color 350ms ease; }
.ft-tile b { display: block; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.03em; } .ft-tile small { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--on-ink-3); transition: color 350ms ease; }
.ft-tile .go { position: absolute; right: 22px; top: 22px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hair-ink-strong); transform: rotate(-45deg); transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 350ms ease, color 350ms ease; }
.ft-tile:hover { background: #fff; color: var(--ink); transform: translateY(-4px); border-color: #fff; } .ft-tile:hover small { color: var(--text-3); } .ft-tile:hover .ico { border-color: var(--hair-strong); background: var(--ink); color: #fff; } .ft-tile:hover .go { transform: rotate(0); background: var(--ink); color: #fff; border-color: var(--ink); }
.ft-tick { margin-top: 72px; overflow: hidden; border-block: 1px solid var(--hair-ink); padding: 18px 0; }
.ft-tick-track { display: flex; width: max-content; align-items: center; gap: 36px; animation: m-marquee 45s linear infinite; will-change: transform; } .ft-tick-track span { font-size: clamp(32px, 5vw, 64px); line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.55); white-space: nowrap; transition: color 300ms ease; } .ft-tick-track span:hover { color: #fff; } .ft-tick-track i { width: 14px; height: 14px; border-radius: 50%; background: var(--signal); flex: none; }
.ft-cap { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 16px; max-width: 1360px; margin: 0 auto -1.2vw; padding: 0 var(--gutter); font: 500 12px/14px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-3); }
.ft-mark { padding-top: 40px; margin-top: 0; }
.ft-top-btn { position: relative; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hair-ink-strong); color: #fff; text-decoration: none; transition: background-color 250ms ease, color 250ms ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1); } .ft-top-btn svg { position: absolute; inset: 0; animation: ft-spin 14s linear infinite; } .ft-top-btn text { font: 500 8.4px var(--mono); letter-spacing: 0.14em; fill: currentColor; } .ft-top-btn .arr-up { font-size: 20px; } .ft-top-btn:hover { background: #fff; color: var(--ink); transform: translateY(-4px); }
@keyframes ft-spin { to { transform: rotate(360deg); } }
.ft-base { align-items: center; }
@media (max-width: 1280px) { .ft-map { grid-template-columns: repeat(3, 1fr); } .ft-tiles { grid-column: 1 / -1; } .ft-ghost { width: 90vw; right: -25vw; } }
@media (max-width: 799px) { .ft-brand { margin-bottom: 40px; flex-wrap: wrap; } .ft-lockup b { font-size: 24px; } .ft-tile-logo { width: 52px; height: 52px; } .ft-check { height: auto; flex-wrap: wrap; padding: 12px; border-radius: 16px; } .ft-check svg { display: none; } .ft-check input { flex: 1 1 100%; min-height: 44px; font-size: 16px; } .ft-check button { flex: 1; } .ft-tiles { grid-template-columns: 1fr; } .ft-tile { min-height: 132px; } .ft-tick { margin-top: 48px; } .ft-cap { flex-direction: column; gap: 4px; margin-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .ft-ghost, .ft-tick-track, .ft-top-btn svg, .ft-chip i { animation: none; } }
.ft .m-lead { color: var(--on-ink-2); }

/* ---- SEO pages: breadcrumbs, guides, tool pages --------------------------- */
.crumbs-wrap { position: relative; height: 0; z-index: 3; } .crumbs { position: absolute; top: 92px; left: var(--gutter); right: var(--gutter); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font: 500 12px/16px var(--mono); letter-spacing: 0.04em; color: var(--text-3); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.5; } .crumbs a { text-decoration: none; transition: color 150ms ease; } .crumbs a:hover { color: var(--text); } .crumbs [aria-current] { color: var(--text-2); }
.art-hero { padding-bottom: 40px; } .art-head { max-width: 860px; margin: 0 auto; }
.art-title { font-size: 52px; line-height: 56px; letter-spacing: -0.035em; } .art-meta { margin: 20px 0 0; font: 500 13px/18px var(--mono); letter-spacing: 0.02em; color: var(--text-3); }
.answer { margin: 28px 0 0; padding: 20px 24px; border-left: 3px solid var(--ink); border-radius: 0 12px 12px 0; background: var(--paper); font-size: 18px; line-height: 28px; letter-spacing: -0.005em; color: var(--text); } .answer b { font: 600 12px/16px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; margin-right: 8px; }
.art-grid { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 64px; justify-content: center; align-items: start; }
.art-toc { position: sticky; top: 112px; } .art-toc small { display: block; margin-bottom: 14px; font: 500 11px/12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .art-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hair-strong); } .art-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 20px; color: var(--text-2); text-decoration: none; transition: color 150ms ease, border-color 150ms ease; } .art-toc a:hover, .art-toc a.on { color: var(--text); border-left-color: var(--ink); }
.art section { margin-bottom: 48px; scroll-margin-top: 112px; } .art h2 { margin: 0 0 16px; font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -0.03em; }
.art p, .art li { font-size: 17px; line-height: 29px; color: var(--text-2); } .art p { margin: 0 0 16px; } .art ul, .art ol { margin: 0 0 16px; padding-left: 22px; } .art li { margin-bottom: 8px; } .art strong { color: var(--text); font-weight: 600; }
.art code { padding: 2px 6px; border-radius: 6px; background: var(--paper-2); font: 500 0.9em var(--mono); color: var(--text); } .art a { color: var(--text); text-underline-offset: 3px; }
.art table { width: 100%; margin: 8px 0 20px; border-collapse: collapse; font-size: 15px; } .art th, .art td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--hair); vertical-align: top; } .art th { font: 600 12px/16px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); } .art td { color: var(--text-2); }
.art-cta { margin: 0 0 48px; padding: 28px; border-radius: 16px; background: var(--ink); color: #fff; } .art-cta b { display: block; font-size: 22px; line-height: 28px; letter-spacing: -0.02em; } .art-cta p { margin: 6px 0 20px; color: var(--on-ink-2); } .art-cta .m-btn.primary { background: #fff; color: var(--ink); }
.guide-card { display: flex; flex-direction: column; height: 100%; } .guide-card .m-body { flex: 1; margin-top: 10px; }
@media (max-width: 1280px) { .art-grid { grid-template-columns: minmax(0, 760px); } .art-toc { position: static; } .art-toc ol { display: flex; flex-wrap: wrap; gap: 4px 16px; border: 0; } .art-toc a { padding: 4px 0; border: 0; } }
@media (max-width: 799px) { .art-title { font-size: 34px; line-height: 38px; } .art h2 { font-size: 26px; line-height: 32px; } .art p, .art li { font-size: 16px; line-height: 27px; } .answer { font-size: 16px; line-height: 26px; padding: 16px 18px; } .crumbs { top: 76px; } .art table { display: block; overflow-x: auto; } }
.hx-sat { width: 176px; }
.hx-sat.l { left: calc(50% - 764px); top: 170px; } .hx-sat.r { right: calc(50% - 764px); top: 330px; }
@media (max-width: 1559px) { .hx-sat.l, .hx-sat.r { display: none; } }