/* Shared design tokens + components for the Auditly static site.
   ponytail: header/footer markup is duplicated per page (no build step) --
   upgrade to includes/an SSG if the page count grows past this handful. */
:root{
  --paper:#f5f3ee;
  --paper-2:#ffffff;
  --ink:#15181d;
  --ink-2:#4b515c;
  --ink-3:#868d99;
  --line:#e6e2d8;
  --line-strong:#d8d2c2;
  --accent:#2f6f73;
  --accent-2:#4f9198;
  --accent-ink:#f4faf9;
  --sev-blue:#3f7fe0;
  --sev-gold:#c9962f;
  --sev-orange:#d17a3a;
  --sev-red:#d1453d;
  --void:#12161c;
  --frost:#f5f3ee;
  --shadow:0 18px 40px -20px rgba(21,24,29,0.28);
  --icon-shadow:rgba(21,24,29,0.3);
  --card-tone:var(--void);
  --card-ink:#eef1f4;
  --card-ink-2:#aab2bd;
  --card-accent:#63b7bb;
  --font-body:'Geist',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#11151a; --paper-2:#171d24; --ink:#eef1f4; --ink-2:#aab2bd; --ink-3:#6f7783;
    --line:#252c34; --line-strong:#323a44; --accent:#63b7bb; --accent-2:#84cbce; --accent-ink:#0c1517;
    --sev-blue:#5f96ef; --sev-gold:#d9a83f; --sev-orange:#e0813f; --sev-red:#e2483f;
    --shadow:0 18px 40px -18px rgba(0,0,0,0.55);
    --icon-shadow:rgba(0,0,0,0.45);
    --card-tone:var(--frost);
    --card-ink:#15181d;
    --card-ink-2:#4b515c;
    --card-accent:#2f6f73;
  }
}
:root[data-theme="dark"]{
  --paper:#11151a; --paper-2:#171d24; --ink:#eef1f4; --ink-2:#aab2bd; --ink-3:#6f7783;
  --line:#252c34; --line-strong:#323a44; --accent:#63b7bb; --accent-2:#84cbce; --accent-ink:#0c1517;
  --sev-blue:#5f96ef; --sev-gold:#d9a83f; --sev-orange:#e0813f; --sev-red:#e2483f;
  --shadow:0 18px 40px -18px rgba(0,0,0,0.55);
  --icon-shadow:rgba(0,0,0,0.45);
  --card-tone:var(--frost);
  --card-ink:#15181d;
  --card-ink-2:#4b515c;
  --card-accent:#2f6f73;
}

*{box-sizing:border-box;}
html{background:var(--paper);}
/* sticky footer: main absorbs any leftover viewport height so footer always sits at the
   true bottom of the window (short pages) or right after content (tall pages) -- never
   floating dead space below it, on any page, without a per-page height hack. */
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);margin:0;padding:0;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;}
main{flex:1 0 auto;}
img{max-width:100%;}
h1,h2,h3{text-wrap:balance;margin:0;}
a{color:inherit;}
button,input,select{font-family:var(--font-body);}
.wrap{max-width:1160px;margin:0 auto;padding-inline:24px;}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}

/* brand mark: the wordmark itself is the logo -- no separate icon.
   ponytail: kept as one shared .wordmark rule sized by context (header vs footer/report)
   instead of a --sm/--lg variant system, since only two sizes exist today. */
.wordmark{font-family:var(--font-mono);font-weight:700;letter-spacing:-0.01em;font-size:1.6rem;}
.wordmark.sm{font-size:0.86rem;}
.wordmark .cursor-dot{display:inline-block;width:0.32em;height:0.32em;background:var(--accent);margin-left:0.05em;vertical-align:0.03em;}

/* header */
header.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--paper) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.top-inner{display:flex;align-items:center;justify-content:space-between;padding-block:14px;gap:16px;}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);}
nav.primary{display:flex;gap:28px;font-size:0.9rem;color:var(--ink-2);}
nav.primary a{text-decoration:none;}
nav.primary a:hover,nav.primary a[aria-current="page"]{color:var(--ink);}
.top-right{display:flex;align-items:center;gap:14px;}
.langswitch{display:flex;border:1px solid var(--line-strong);border-radius:20px;overflow:hidden;font-family:var(--font-mono);font-size:0.68rem;}
.langswitch button{background:none;border:none;color:var(--ink-3);padding:6px 10px;cursor:pointer;letter-spacing:0.03em;}
.langswitch button[aria-pressed="true"]{background:var(--ink);color:var(--paper);font-weight:600;}
.langswitch button:hover:not([aria-pressed="true"]){color:var(--ink);}

.theme-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);background:none;color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;}
.theme-toggle:hover{border-color:var(--ink);color:var(--ink);}
.theme-toggle svg{width:16px;height:16px;}
.theme-toggle .icon-moon{display:none;}
:root[data-theme="light"] .theme-toggle .icon-sun{display:none;}
:root[data-theme="light"] .theme-toggle .icon-moon{display:block;}

.cta{font-family:var(--font-body);font-weight:600;font-size:0.9rem;border-radius:999px;padding:11px 20px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;}
.cta:hover{background:var(--accent);border-color:var(--accent);}
.cta.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.cta.ghost:hover{border-color:var(--ink);}
.cta svg{width:15px;height:15px;flex:none;}

.menu-btn{display:none;background:none;border:1px solid var(--line-strong);border-radius:8px;color:var(--ink);width:38px;height:38px;font-size:1.1rem;cursor:pointer;flex:none;z-index:46;position:relative;}
/* compact dropdown-style panel anchored top-right, sized to its own content (not the
   full screen height) -- stays in the DOM always (off-screen via transform) so the close
   transition can play; visibility is delayed to match so it's not keyboard/tab-reachable
   while hidden. */
.mobile-panel{position:fixed;top:64px;right:16px;max-height:calc(100vh - 80px);width:min(280px,85vw);background:var(--paper-2);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);z-index:45;transform:translateX(calc(100% + 16px));visibility:hidden;transition:transform .22s ease-out,visibility 0s linear .22s;overflow-y:auto;}
.mobile-panel.open{transform:translateX(0);visibility:visible;transition:transform .22s ease-out,visibility 0s;}
.mobile-panel .wrap{max-width:none;padding:20px;display:flex;flex-direction:column;gap:14px;}
.mobile-panel nav{display:flex;flex-direction:column;gap:12px;font-size:0.95rem;}
.mobile-panel nav a{text-decoration:none;color:var(--ink-2);}
.mobile-panel .cta{justify-content:center;}

/* hero (index only) -- single column, no illustration: the capture form needs to hold
   domain + verification method + report email (real scan inputs), so the space budget
   goes there instead of a decorative visual. Kept as a normal in-flow element, not the
   old floating-overlap bar -- that negative-margin technique was the actual bug source
   logged in the landing-page-research skill, independent of how many fields it holds. */
.hero{position:relative;display:flex;align-items:center;padding-block:72px 64px;border-top:none;}
.hero>.wrap{width:100%;}
.hero-content{position:relative;text-align:left;}

.eyebrow{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;color:var(--ink-3);text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.headline{font-family:var(--font-mono);font-weight:600;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.12;letter-spacing:-0.015em;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:24ch;}

/* hero rotator: an "invisible" slideshow -- no dots/arrows/container, only the headline
   and caption sliding sideways in place. The visible <h1>/<p> pair is JS-updated as before
   (still the only real heading, for SEO/accessibility); two more copies of each ("measure",
   aria-hidden, one per other slide) sit grid-stacked underneath with visibility:hidden --
   sized by real content instead of a guessed min-height, so the block always reserves
   space for whichever slide is tallest AT THE CURRENT viewport width, not just the one
   width this was last tested at. Same "reserve real space" principle as the sticky footer. */
.headline-stack,.sub-stack{display:grid;justify-items:start;}
.headline-stack>*,.sub-stack>*{grid-area:1/1;}
.measure{visibility:hidden;pointer-events:none;}
@keyframes heroSlideOut{to{opacity:0;transform:translateX(-28px);}}
@keyframes heroSlideIn{from{opacity:0;transform:translateX(28px);}to{opacity:1;transform:translateX(0);}}
h1.headline.slide-out,.hero-sub.slide-out{animation:heroSlideOut .4s ease forwards;}
h1.headline.slide-in,.hero-sub.slide-in{animation:heroSlideIn .45s ease forwards;}
@media (prefers-reduced-motion: reduce){
  h1.headline.slide-out,.hero-sub.slide-out,h1.headline.slide-in,.hero-sub.slide-in{animation:none;}
}
.hero-sub{margin:18px auto 0;color:var(--ink-2);font-size:1.2rem;line-height:1.65;max-width:none;display:flex;flex-direction:column;justify-content:center;}
.sub-stack .hero-sub{margin:0;}
.sub-stack{margin:18px 0 0;max-width:62ch;}
.hero-trust{margin-top:16px;color:var(--ink-3);font-size:0.8rem;font-family:var(--font-mono);}
.hero-link{display:inline-block;margin-top:10px;font-weight:600;font-size:0.95rem;color:var(--accent);text-decoration:none;}
.hero-link::after{content:' ↓';}
.hero-link:hover{text-decoration:underline;}
.hero-trust::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:middle;}

/* Simulated scan run shown inline on the hero after the verify-bar form is submitted --
   no real crawler is wired up to this static site yet, so this is a scripted step list
   that hands off to the same .report-card markup used on what-we-check.html. */
.demo-run{max-width:420px;margin:16px auto 0;text-align:left;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px 18px;}
.demo-run-head{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:0.8rem;color:var(--ink);margin-bottom:12px;}
.demo-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;animation:demoPulse 1s ease-in-out infinite;}
@keyframes demoPulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.demo-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.demo-steps li{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:0.74rem;color:var(--ink-3);opacity:.55;transition:opacity .2s ease,color .2s ease;}
.demo-steps li.active,.demo-steps li.done{opacity:1;}
.demo-steps li.done{color:var(--ink-2);}
.demo-steps li .chk{flex:none;width:14px;height:14px;border-radius:50%;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:var(--paper-2);}
.demo-steps li.active .chk{border-color:var(--accent);}
.demo-steps li.done .chk{background:var(--accent);border-color:var(--accent);}
.demo-report{max-width:640px;margin:20px auto 0;text-align:left;}
.demo-report .report-card{margin-bottom:14px;}
.demo-report .demo-download{display:flex;justify-content:center;}
@media(prefers-reduced-motion:reduce){.demo-dot{animation:none;}}

@media print{
  body *{visibility:hidden;}
  .demo-report,.demo-report *{visibility:visible;}
  .demo-report{position:absolute;top:0;left:0;width:100%;max-width:none;margin:0;}
  .demo-report .demo-download{display:none;}
  .report-card{box-shadow:none;border-color:#ccc;}
}

.verify-panel{margin:36px 0 0;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);padding:14px 12px 14px 48px;display:inline-flex;align-items:stretch;gap:0;text-align:left;}
.vp-field{display:flex;align-items:center;gap:12px;padding:16px 38px;flex:1;min-width:280px;}
.vp-field+.vp-field{border-left:1px solid var(--line);}
.vp-icon{width:17px;height:17px;color:var(--ink-3);flex:none;}
.vp-text{min-width:0;flex:1;}
.vp-label{font-size:1.14rem;font-weight:600;color:var(--ink);margin-bottom:1px;}
.vp-field input,.vp-field select{border:none;background:none;color:var(--ink-2);font-size:0.98rem;padding:0;width:100%;outline:none;}
.vp-field select{appearance:none;-webkit-appearance:none;cursor:pointer;}
.vp-submit{width:64px;height:64px;border-radius:50%;border:none;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;align-self:center;}
.vp-submit:hover{background:var(--accent);}
.vp-submit svg{width:20px;height:20px;}

/* interior page header (utilitarian, not a hero) */
.page-header{padding-block:44px 8px;border-bottom:1px solid var(--line);}
.page-title-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.page-title-row .eyebrow{margin-bottom:0;}
.scan-msg{max-width:480px;margin:32px auto 0;text-align:center;color:var(--ink-2);font-size:0.92rem;line-height:1.6;}
.scan-msg .cta{margin-top:16px;}
.page-header h1{font-family:var(--font-mono);font-weight:600;font-size:clamp(1.9rem,3.4vw,2.5rem);letter-spacing:-0.01em;}
.page-header>p{color:var(--ink-2);margin:12px 0 0;font-size:1rem;line-height:1.65;max-width:60ch;}

/* sections */
section{padding-block:64px;border-top:1px solid var(--line);}
main>.page-header+section{border-top:none;}
.section-head{max-width:58ch;margin-bottom:38px;}
.section-head h2{font-size:clamp(1.4rem,2.2vw,1.75rem);font-weight:700;letter-spacing:-0.01em;}
.section-head p{color:var(--ink-2);margin-top:10px;font-size:0.98rem;line-height:1.65;}

.step-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:0.85rem;font-weight:600;color:var(--accent);text-decoration:none;}
.step-link:hover{text-decoration:underline;}
.step-link::after{content:'→';}

.verify-layout{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
.verify-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.verify-card{border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--paper-2);}
.verify-card h3{font-size:0.92rem;font-weight:600;margin-bottom:9px;display:flex;align-items:center;gap:8px;}
.verify-card h3 .tagnum{font-family:var(--font-mono);font-size:0.68rem;color:var(--accent);border:1px solid var(--line-strong);border-radius:4px;padding:2px 6px;}
.verify-card p{color:var(--ink-2);font-size:0.85rem;line-height:1.55;margin:0 0 12px;}
.token{font-family:var(--font-mono);font-size:0.76rem;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:9px 10px;color:var(--accent-2);overflow-x:auto;white-space:nowrap;}
.why-verify{margin-top:20px;border-left:2px solid var(--line-strong);padding-left:16px;color:var(--ink-2);font-size:0.88rem;line-height:1.65;}
.consent-row{display:flex;align-items:flex-start;gap:10px;margin-top:24px;font-size:0.88rem;color:var(--ink-2);cursor:pointer;}
.consent-row input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}

.report-card{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative;color:var(--ink);box-shadow:var(--shadow);}
.rc-tag{position:absolute;top:12px;right:12px;background:var(--paper-2);font-family:var(--font-mono);font-size:0.62rem;color:var(--ink-3);border:1px solid var(--line-strong);border-radius:4px;padding:3px 7px;}
.rc-header{display:flex;align-items:center;gap:9px;padding:14px 76px 14px 16px;border-bottom:1px solid var(--line);}
.rc-header .wm{font-family:var(--font-mono);font-size:0.78rem;font-weight:700;color:var(--ink);}
.rc-doctype{margin-left:auto;font-family:var(--font-mono);font-size:0.58rem;color:var(--ink-3);letter-spacing:0.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rc-meta{display:grid;grid-template-columns:repeat(3,1fr);padding:14px 16px;gap:10px;border-bottom:1px solid var(--line);}
.rc-meta .label{font-size:0.58rem;color:var(--ink-3);margin:0 0 3px;}
.rc-meta .value{font-family:var(--font-mono);font-size:0.72rem;color:var(--ink);margin:0;font-variant-numeric:tabular-nums;}
.rc-verdict{margin:14px 16px;border-radius:8px;padding:11px 12px;background:color-mix(in srgb, var(--sev-red) 14%, transparent);border:1px solid color-mix(in srgb, var(--sev-red) 35%, transparent);display:flex;align-items:center;gap:10px;}
.rc-verdict.ok{background:color-mix(in srgb, var(--accent) 14%, transparent);border-color:color-mix(in srgb, var(--accent) 35%, transparent);}
.rc-verdict .dot{width:8px;height:8px;border-radius:50%;background:var(--sev-red);flex:none;}
.rc-verdict.ok .dot{background:var(--accent);}
.rc-verdict p{margin:0;font-size:0.78rem;font-weight:600;color:var(--ink);}
.rc-verdict span{display:block;font-size:0.68rem;color:var(--ink-2);font-weight:400;margin-top:2px;}
.rc-stats{display:grid;grid-template-columns:repeat(4,1fr);margin:0 16px 14px;border-radius:8px;overflow:hidden;}
.rc-stat{padding:10px 8px;}
.rc-stat .n{display:block;font-family:var(--font-mono);font-size:1.25rem;font-weight:700;}
.rc-stat .l{display:block;font-size:0.56rem;letter-spacing:0.03em;color:var(--ink-3);margin-top:2px;}
.rc-stat.vuln{background:color-mix(in srgb, var(--sev-red) 14%, transparent);} .rc-stat.vuln .n{color:var(--sev-red);}
.rc-stat.pass{background:color-mix(in srgb, var(--accent) 14%, transparent);} .rc-stat.pass .n{color:var(--accent);}
.rc-stat.info{background:color-mix(in srgb, var(--ink) 5%, transparent);} .rc-stat.info .n{color:var(--ink);}
.rc-stat.skip{background:color-mix(in srgb, var(--ink) 3%, transparent);} .rc-stat.skip .n{color:var(--ink-3);}
.rc-stat.err{background:color-mix(in srgb, var(--sev-red) 14%, transparent);} .rc-stat.err .n{color:var(--sev-red);}
.rc-fixes{margin:0 16px 16px;padding-top:14px;border-top:1px solid var(--line);}
.rc-fixes-title{font-size:0.62rem;color:var(--ink-3);letter-spacing:0.03em;text-transform:uppercase;margin:0 0 10px;}
.rc-fix{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-top:10px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb, var(--ink) 2%, transparent);}
.rc-fix:first-of-type{margin-top:0;}
.rc-sev{flex:none;font-family:var(--font-mono);font-size:0.6rem;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:0.03em;margin-top:2px;}
.rc-sev.red{background:color-mix(in srgb, var(--sev-red) 18%, transparent);color:var(--sev-red);}
.rc-sev.orange{background:color-mix(in srgb, var(--sev-orange) 18%, transparent);color:var(--sev-orange);}
.rc-sev.gold{background:color-mix(in srgb, var(--sev-gold) 18%, transparent);color:var(--sev-gold);}
.rc-sev.blue{background:color-mix(in srgb, var(--sev-blue) 18%, transparent);color:var(--sev-blue);}
.rc-sev.gray{background:color-mix(in srgb, var(--ink) 10%, transparent);color:var(--ink-3);}
.rc-fix-title{margin:0;font-size:0.78rem;font-weight:600;color:var(--ink);}
.rc-fix-desc{margin:2px 0 0;font-size:0.72rem;line-height:1.5;color:var(--ink-2);}
.rc-fix-steps{margin:6px 0 0;padding-left:16px;font-size:0.72rem;line-height:1.6;color:var(--ink-2);}
.rc-fix-steps li{margin:2px 0;}
.rc-results{margin:0 16px 16px;overflow-x:auto;}
.rc-results-title{font-size:0.62rem;color:var(--ink-3);letter-spacing:0.03em;text-transform:uppercase;margin:0 0 10px;}
.rc-results table{width:100%;border-collapse:collapse;font-size:0.68rem;}
.rc-results th{text-align:left;font-family:var(--font-mono);font-size:0.58rem;color:var(--ink-3);letter-spacing:0.03em;padding:0 8px 6px 0;border-bottom:1px solid var(--line);}
.rc-results td{padding:7px 8px 7px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2);}
.rc-results tr:last-child td{border-bottom:none;}
.rc-results td:first-child{font-weight:700;white-space:nowrap;}
.rc-results td.pass{color:var(--accent);}
.rc-results td.info{color:var(--ink-3);}
.rc-results td.skip{color:var(--ink-3);}
.rc-results td.error{color:var(--sev-red);}
.rc-results td:nth-child(2){font-family:var(--font-mono);color:var(--ink);white-space:nowrap;}
.rc-results td:nth-child(3){white-space:nowrap;color:var(--ink-2);}
.rc-footnote{margin:0;padding:12px 16px;font-family:var(--font-mono);font-size:0.62rem;line-height:1.5;color:var(--ink-3);border-top:1px solid var(--line);}

.check-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:40px;}
.check-card{background:var(--card-tone);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow);}
.check-card-title{font-family:var(--font-mono);font-size:0.95rem;font-weight:700;color:var(--card-accent);margin:0 0 12px;}
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.check-list li{display:flex;align-items:flex-start;gap:9px;font-size:0.85rem;color:var(--card-ink-2);}
.check-list li::before{content:'✓';flex:none;display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;margin-top:1px;border-radius:50%;background:var(--card-accent);color:var(--card-tone);font-size:10px;font-weight:700;}
.report-card-wrap{margin:0 auto;}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;}
.plan{border:none;box-shadow:var(--shadow);border-radius:20px;padding:12px 28px 30px;background:var(--card-tone);display:flex;flex-direction:column;position:relative;}
.plan.featured{outline:2px solid var(--accent);outline-offset:-2px;}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--card-ink);color:var(--card-tone);font-size:0.85rem;font-weight:700;letter-spacing:0.02em;padding:6px 16px;border-radius:999px;white-space:nowrap;}
.plan .name{font-size:1.8rem;font-weight:700;color:var(--card-accent);margin:0 0 2px;}
.plan .price{font-family:var(--font-mono);font-size:2.4rem;font-weight:700;letter-spacing:-0.01em;margin:0 0 6px;display:flex;align-items:baseline;gap:7px;color:var(--card-ink);}
.plan .price small{font-size:0.86rem;color:var(--card-ink-2);font-weight:500;font-family:var(--font-body);}
.plan .desc{color:var(--card-ink-2);font-size:0.87rem;line-height:1.55;margin-bottom:22px;}
.plan .plan-cta{width:100%;justify-content:center;padding-block:13px;margin-bottom:22px;}
.plan .cta:not(.ghost){background:var(--card-ink);color:var(--card-tone);border-color:var(--card-ink);}
.plan .cta:not(.ghost):hover{background:var(--card-accent);border-color:var(--card-accent);color:var(--card-tone);}
.plan .cta.ghost{color:var(--card-ink);border-color:var(--card-ink-2);}
.plan .cta.ghost:hover{border-color:var(--card-ink);}
.plan ul{list-style:none;margin:0;padding-top:20px;border-top:1px solid color-mix(in srgb, var(--card-ink) 16%, transparent);display:flex;flex-direction:column;gap:12px;}
.plan li{display:flex;align-items:flex-start;gap:10px;font-size:0.88rem;color:var(--card-ink-2);}
.plan li::before{content:'✓';flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--card-accent);color:var(--card-tone);font-size:11px;font-weight:700;}

.scan-hook,.enterprise-row{border:none;box-shadow:var(--shadow);border-radius:16px;padding:22px 28px;background:var(--card-tone);display:flex;align-items:center;justify-content:space-between;gap:24px;}
.scan-hook{margin-bottom:22px;}
.enterprise-row{margin-top:36px;}
.scan-hook-text,.enterprise-text{max-width:520px;}
.scan-hook-label{font-family:var(--font-mono);font-size:1.25rem;font-weight:700;color:var(--card-accent);margin-bottom:6px;}
.scan-hook-desc{color:var(--card-ink-2);font-size:0.87rem;line-height:1.55;}
.scan-hook-price{display:flex;align-items:center;gap:18px;flex:none;}
.scan-hook-price .price{font-family:var(--font-mono);font-size:2rem;font-weight:700;display:flex;align-items:baseline;gap:6px;white-space:nowrap;color:var(--card-ink);}
.scan-hook-price .price small{font-size:0.8rem;color:var(--card-ink-2);font-weight:500;font-family:var(--font-body);}
.scan-hook-price .plan-cta{width:auto;margin-bottom:0;padding-inline:22px;}
.scan-hook-price .cta:not(.ghost){background:var(--card-ink);color:var(--card-tone);border-color:var(--card-ink);}
.scan-hook-price .cta:not(.ghost):hover{background:var(--card-accent);border-color:var(--card-accent);color:var(--card-tone);}
.scan-hook-price .cta.ghost{color:var(--card-ink);border-color:var(--card-ink-2);}
.scan-hook-price .cta.ghost:hover{border-color:var(--card-ink);}
.scan-hook-price .cta.accent{background:var(--card-ink);color:var(--card-tone);border-color:var(--card-ink);}
.scan-hook-price .cta.accent:hover{background:var(--card-accent);border-color:var(--card-accent);}
.enterprise-row .cta{font-size:1.05rem;}

/* legal pages + blog articles (same prose typography, different name for the latter) */
.legal,.article{max-width:68ch;padding-block:44px 72px;}
.legal .updated,.article .updated{font-family:var(--font-mono);font-size:0.78rem;color:var(--ink-3);margin-bottom:36px;}
.legal h2,.article h2{font-size:1.05rem;font-weight:700;margin-top:34px;margin-bottom:10px;}
.legal h2:first-of-type,.article h2:first-of-type{margin-top:0;}
.legal p,.article p{color:var(--ink-2);font-size:0.95rem;line-height:1.7;margin:0 0 4px;}
.legal a,.article a{color:var(--accent);}
.article ul{color:var(--ink-2);font-size:0.95rem;line-height:1.7;margin:0 0 16px;padding-left:22px;}
.article li{margin-bottom:6px;}
.article code{font-family:var(--font-mono);font-size:0.86em;background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:1px 6px;}
.back-home{display:inline-flex;align-items:center;gap:6px;font-size:0.88rem;color:var(--ink-2);text-decoration:none;margin-top:40px;}
.back-home:hover{color:var(--accent);}

/* blog index */
.post-list{max-width:68ch;padding-block:16px 72px;display:flex;flex-direction:column;gap:0;}
.post-card{padding-block:24px;border-bottom:1px solid var(--line);}
.post-card:first-child{padding-top:0;}
.post-card h2{font-size:1.15rem;margin:0 0 8px;}
.post-card h2 a{color:var(--ink);text-decoration:none;}
.post-card h2 a:hover{color:var(--accent);}
.post-card .post-meta{font-family:var(--font-mono);font-size:0.76rem;color:var(--ink-3);margin-bottom:10px;}
.post-card p{color:var(--ink-2);font-size:0.92rem;line-height:1.6;margin:0;}

footer{border-top:1px solid var(--line);padding-block:22px;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.footer-brand{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:0.85rem;flex-wrap:wrap;}
.footer-links{display:flex;gap:18px;font-size:0.82rem;color:var(--ink-2);}
.footer-links a{text-decoration:none;}
.footer-links a:hover{color:var(--ink);}

/* responsive */
@media (max-width:900px){
  nav.primary{display:none;}
  .top-right>.langswitch{display:none;}
  .menu-btn{display:block;}
  .hero-sub{max-width:none;}
  .verify-panel{display:flex;width:100%;flex-wrap:wrap;border-radius:18px;padding:14px;margin-top:28px;}
  .vp-field{flex:1 1 100%;min-width:0;padding:10px;}
  .vp-field+.vp-field{border-left:none;border-top:1px solid var(--line);}
  .vp-submit{margin-inline:auto;margin-top:4px;}
  .verify-layout{grid-template-columns:1fr;}
  .verify-grid{grid-template-columns:1fr;}
  .check-groups{grid-template-columns:1fr;}
  .pricing{grid-template-columns:1fr;}
  .scan-hook,.enterprise-row{flex-direction:column;align-items:flex-start;gap:16px;}
  .scan-hook-price{width:100%;flex-direction:column;align-items:flex-start;gap:12px;}
  .scan-hook-price .cta{width:100%;justify-content:center;}
}
@media (max-width:480px){
  .wrap{padding-inline:16px;}
  .top-inner{padding-block:12px;}
  .headline{font-size:2rem;}
  .hero-sub{font-size:1.05rem;}
  .hero{min-height:auto;padding-block:40px 56px;}
  .rc-meta{grid-template-columns:1fr 1fr;}
  .rc-stats{grid-template-columns:1fr 1fr;}
  .footer-brand{flex-direction:column;align-items:flex-start;gap:2px;}
}

/* home: sample scan log + report excerpt. The log is a fixed dark panel in
   both themes, so it uses --void (never the theme-swapped --ink). */
.sample-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start;}
.scanlog{background:var(--void);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px 20px;font-family:var(--font-mono);font-size:0.8rem;color:#c9cfd6;}
.scanlog-head{display:flex;align-items:center;gap:9px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid #252c34;color:#eef1f4;font-weight:600;}
.scanlog .live{width:7px;height:7px;background:#63b7bb;flex:none;}
.scanlog ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.scanlog li{display:flex;gap:8px;flex-wrap:wrap;line-height:1.5;}
/* hidden only once JS has armed the reveal, so no-JS visitors still see the log */
.scanlog.anim li{opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease;transition-delay:calc(var(--i) * 280ms);}
.scanlog.anim.play li{opacity:1;transform:none;}
.scanlog .tag{flex:none;}
.scanlog .what{color:#eef1f4;min-width:9ch;}
.scanlog .det{color:#8a929e;}
.scanlog li.ok .tag{color:#63b7bb;} .scanlog li.run .tag{color:#6f7783;} .scanlog li.warn .tag,.scanlog li.warn .det{color:#d9a83f;}
@media(prefers-reduced-motion:reduce){.scanlog.anim li{opacity:1;transform:none;transition:none;}}
.rc-more{margin:4px 16px 16px;font-size:0.72rem;color:var(--ink-3);font-family:var(--font-mono);}

/* home: how it works as a timeline with the real artifact of each step */
.timeline{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-strong);}
.timeline li{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:24px;align-items:start;padding:22px 0 22px 28px;border-bottom:1px solid var(--line);}
.timeline li:last-child{border-bottom:none;}
.timeline li::before{content:'';position:absolute;left:-5px;top:29px;width:9px;height:9px;background:var(--accent);}
.tl-k{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-3);padding-top:4px;}
.timeline h3{font-size:1.05rem;font-weight:600;margin-bottom:6px;}
.timeline p{color:var(--ink-2);font-size:0.94rem;line-height:1.6;margin:0;max-width:56ch;}
.tl-art{font-family:var(--font-mono);font-size:0.78rem;color:var(--accent);background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:7px 10px;white-space:nowrap;align-self:center;}
@media(max-width:860px){
  .sample-grid{grid-template-columns:1fr;}
  .timeline li{grid-template-columns:1fr;gap:8px;}
  .tl-art{justify-self:start;white-space:normal;word-break:break-all;}
}

/* dashboard */
.dash-note{color:var(--ink-2);font-size:0.92rem;line-height:1.6;}
.dash-login{max-width:440px;display:flex;flex-direction:column;gap:12px;}
.dash-login h2{font-size:1.4rem;font-weight:700;}
.dash-login p{color:var(--ink-2);line-height:1.6;margin:0;}
.dash-label{font-size:0.85rem;font-weight:600;margin-top:8px;}
.dash-login input{height:46px;border-radius:10px;border:1px solid var(--line-strong);background:var(--paper-2);color:var(--ink);padding:0 14px;font-size:1rem;}
.dash-login .cta{justify-content:center;margin-top:4px;}
.dash-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;}
.dash-summary{font-size:1.15rem;font-weight:600;margin:0;}
.dash-linkbtn{background:none;border:none;padding:0;color:var(--accent);font-weight:600;font-size:0.88rem;cursor:pointer;font-family:var(--font-body);}
.dash-linkbtn:hover{text-decoration:underline;}
.dash-linkbtn.danger{color:var(--sev-red);margin-top:28px;}
.dash-bar{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden;margin:16px 0 10px;background:var(--line);}
.dash-bar span.critical{background:var(--sev-red);} .dash-bar span.high{background:var(--sev-orange);}
.dash-bar span.medium{background:var(--sev-gold);} .dash-bar span.low{background:var(--sev-blue);}
.dash-legend{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 28px;}
.dash-sev{font-family:var(--font-mono);font-size:0.74rem;font-weight:600;}
.dash-sev.critical,.dash-count.critical{color:var(--sev-red);} .dash-sev.high,.dash-count.high{color:var(--sev-orange);}
.dash-sev.medium,.dash-count.medium{color:var(--sev-gold);} .dash-sev.low,.dash-count.low{color:var(--sev-blue);}
.dash-count.zero{color:var(--ink-3);}
.dash-table{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper-2);}
.dash-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 180px minmax(0,1.2fr);gap:12px;align-items:center;padding:14px 18px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:0.92rem;}
.dash-row:first-child{border-top:none;}
a.dash-row:hover{background:color-mix(in srgb, var(--accent) 7%, transparent);}
.dash-th{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-3);padding-block:10px;}
.dash-domain{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.dash-date{color:var(--ink-2);}
.dash-counts{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;}
.dash-count{font-family:var(--font-mono);font-weight:600;}
.dash-vs{color:var(--ink-2);font-size:0.86rem;}
.dash-tag{font-family:var(--font-mono);font-size:0.66rem;font-weight:600;letter-spacing:0.04em;padding:2px 6px;border-radius:4px;border:1px solid var(--line-strong);color:var(--ink-3);}
.dash-tag.new{color:var(--sev-red);border-color:color-mix(in srgb, var(--sev-red) 45%, transparent);}
.dash-tag.fixed{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 45%, transparent);}
.dash-back{display:inline-block;margin-bottom:18px;color:var(--accent);font-weight:600;font-size:0.9rem;text-decoration:none;}
.dash-back::before{content:'← ';}
.dash-scan-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:20px;}
.dash-scan-head h2{font-size:1.8rem;font-weight:700;font-family:var(--font-mono);letter-spacing:-0.01em;}
.dash-scan-head .dash-date{margin:6px 0 0;font-family:var(--font-mono);font-size:0.8rem;}
.dash-actions{display:flex;gap:10px;flex-wrap:wrap;}
.dash-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;background:var(--paper-2);margin-bottom:16px;}
.dash-tile{padding:14px 18px;display:flex;flex-direction:column;gap:4px;font-size:0.8rem;color:var(--ink-2);}
.dash-tile+.dash-tile{border-left:1px solid var(--line);}
.dash-tile .dash-count{font-size:1.6rem;}
.dash-tabs{display:flex;gap:8px;margin:18px 0 14px;flex-wrap:wrap;}
.dash-tabs button{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:none;color:var(--ink-2);font-weight:600;font-size:0.9rem;cursor:pointer;font-family:var(--font-body);}
.dash-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.dash-n{font-family:var(--font-mono);font-size:0.78rem;opacity:0.75;}
.dash-cards{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper-2);}
.dash-card+.dash-card{border-top:1px solid var(--line);}
.dash-card-head{width:100%;display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:12px;align-items:center;padding:15px 18px;background:none;border:none;color:var(--ink);text-align:left;cursor:pointer;font-family:var(--font-body);font-size:0.95rem;}
.dash-card-head:hover{background:color-mix(in srgb, var(--accent) 6%, transparent);}
.dash-card-title{font-weight:600;}
.dash-card-title.fixed{color:var(--ink-2);}
.dash-card-body{padding:0 18px 20px 114px;color:var(--ink-2);font-size:0.92rem;line-height:1.6;}
.dash-card-body p{margin:0 0 10px;}
.dash-card-body ol{margin:0 0 12px;padding-left:20px;}
.dash-k{font-family:var(--font-mono);font-size:0.7rem !important;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-3);margin-top:12px !important;}
.dash-affected{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:6px;font-size:0.84rem;word-break:break-word;}
.dash-affected code{font-family:var(--font-mono);color:var(--ink);font-size:0.8rem;}
@media(max-width:760px){
  .dash-row{grid-template-columns:1fr auto;}
  .dash-row .dash-date,.dash-row .dash-vs{grid-column:1/-1;}
  .dash-th{display:none;}
  .dash-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dash-tile:nth-child(3){border-left:none;}
  .dash-tile:nth-child(n+3){border-top:1px solid var(--line);}
  .dash-card-head{grid-template-columns:auto minmax(0,1fr);}
  .dash-card-body{padding-left:18px;}
}

/* verification diagnosis sits above a left-aligned button, not centered like scan.html messages */
#verifyNote{margin-left:0;text-align:left;max-width:64ch;color:var(--ink);}

/* Equal-height sample cards: the log stretches and its stats sit at the bottom. */
.sample-grid{align-items:stretch;}
.scanlog{display:flex;flex-direction:column;}
.scanlog-foot{display:flex;gap:18px;margin:auto 0 0;padding-top:12px;border-top:1px solid #252c34;color:#8a929e;font-size:0.74rem;}
.scanlog ol{margin-bottom:16px;}
.scanlog.anim .scanlog-foot{opacity:0;transition:opacity .25s ease;transition-delay:calc(var(--i) * 280ms);}
.scanlog.anim.play .scanlog-foot{opacity:1;}

/* Home: verification methods + interactive demo. */
.vmethods{display:flex;flex-direction:column;gap:14px;}
.vmethod{border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--paper-2);}
.vmethod h3{font-size:0.95rem;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.vmethod p{color:var(--ink-2);font-size:0.9rem;line-height:1.6;margin:0;}
.tagnum{font-family:var(--font-mono);font-size:0.68rem;color:var(--accent);border:1px solid var(--line-strong);border-radius:4px;padding:2px 6px;}
.vmethods .why-verify{margin:4px 0 0;}
.vdemo{background:var(--void);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px 20px;font-family:var(--font-mono);font-size:0.8rem;color:#c9cfd6;display:flex;flex-direction:column;min-width:0;}
.vdemo-tabs{display:flex;gap:6px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid #252c34;}
.vdemo-tabs button{font:inherit;font-family:var(--font-body);font-size:0.8rem;display:flex;align-items:center;gap:8px;background:none;border:1px solid transparent;border-radius:8px;color:#8a929e;padding:7px 10px;cursor:pointer;}
.vdemo-tabs button[aria-selected="true"]{color:#eef1f4;border-color:#252c34;background:#161b21;}
.vdemo-tabs button:focus-visible{outline:2px solid #63b7bb;outline-offset:2px;}
.vdemo-body{border:1px solid #252c34;border-radius:8px;overflow:hidden;}
.vdemo-row{display:grid;grid-template-columns:48px 40px minmax(0,1fr);gap:12px;padding:9px 12px;border-top:1px solid #252c34;}
.vdemo-body[data-panel="file"] .vdemo-row{grid-template-columns:minmax(0,1fr);}
.vdemo-row:first-child{border-top:none;}
.vdemo-th{color:#6f7783;font-size:0.7rem;text-transform:uppercase;letter-spacing:.08em;background:#12161b;}
.vdemo-val{color:#63b7bb;overflow-wrap:anywhere;}
.vdemo-log{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;min-height:5.6em;}
.vdemo-log li{display:flex;gap:8px;line-height:1.5;animation:vdIn .25s ease both;}
.vdemo-log .what{color:#eef1f4;min-width:9ch;} .vdemo-log .tag{flex:none;color:#6f7783;} .vdemo-log .ok .tag{color:#63b7bb;} .vdemo-log .det{color:#8a929e;} .vdemo-log .ok .det{color:#eef1f4;}
.vdemo-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid #252c34;}
.vdemo-foot .dash-linkbtn{color:#8a929e;}
@keyframes vdIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.vdemo-log li{animation:none;}}

/* Severity tiles (what-we-check sample), mirroring the real report. */
.rc-stat.crit{background:color-mix(in srgb, var(--sev-red) 14%, transparent);} .rc-stat.crit .n{color:var(--sev-red);}
.rc-stat.high{background:color-mix(in srgb, var(--sev-orange) 14%, transparent);} .rc-stat.high .n{color:var(--sev-orange);}
.rc-stat.med{background:color-mix(in srgb, var(--sev-gold) 14%, transparent);} .rc-stat.med .n{color:var(--sev-gold);}
.rc-stat.low{background:color-mix(in srgb, var(--sev-blue) 14%, transparent);} .rc-stat.low .n{color:var(--sev-blue);}
.rc-stat.zero{background:color-mix(in srgb, var(--ink) 4%, transparent);} .rc-stat.zero .n{color:var(--ink-3);}
.rc-minor{margin:0 16px 14px;}
.rc-minor-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:0.8rem;color:var(--ink-2);}
.rc-minor-row .rc-sev{margin-top:0;}

/* "Login" nav link: same accent green as the rest of the brand. */
nav a.nav-login{color:var(--accent);font-weight:600;}
nav a.nav-login:hover,nav a.nav-login[aria-current="page"]{color:var(--accent-2);}

/* Sign-in screen: form left, animated example history right. */
.dash-login-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center;}
.lp-card{border:1px solid var(--line);border-radius:14px;background:var(--paper-2);box-shadow:var(--shadow);padding:20px;position:relative;}
.lp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.lp-head .rc-tag{position:static;}
.lp-card .dash-summary{font-size:1rem;}
.lp-card .dash-bar{margin:12px 0 16px;}
.lp-card .dash-bar span{flex-grow:0;transition:flex-grow .7s ease;}
.lp-rows{min-height:156px;background:var(--paper);}
.lp-row{grid-template-columns:minmax(0,1fr) 150px minmax(0,1.2fr);font-size:0.85rem;animation:lpIn .45s ease both;}
.lp-good{color:var(--accent);}
@keyframes lpIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@media(max-width:860px){.dash-login-grid{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){.lp-row{animation:none;}.lp-card .dash-bar span{transition:none;}}
.lp-body .lp-row{border-top:1px solid var(--line);}
.lp-rows .dash-th.lp-row{animation:none;}