/* 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;
  --shadow:0 18px 40px -20px rgba(21,24,29,0.28);
  --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);
  }
}
: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);
}

*{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;}
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;}
.mobile-panel{display:none;border-bottom:1px solid var(--line);background:var(--paper-2);}
.mobile-panel.open{display:block;}
.mobile-panel .wrap{padding-block:16px;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);}

/* 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;justify-content:center;min-height:100%;padding-block:56px;overflow:hidden;}
.hero-blob{position:absolute;top:-320px;left:50%;transform:translateX(-50%);width:900px;height:900px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%, var(--accent) 0%, transparent 68%);opacity:0.14;filter:blur(10px);pointer-events:none;}
.hero-content{position:relative;max-width:958px;margin-inline:auto;text-align:center;}
.eyebrow{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;color:var(--accent);text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px;}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--sev-red);flex:none;}
.headline{font-family:var(--font-mono);font-weight:600;font-size:clamp(2.5rem,5.6vw,4.1rem);line-height:1.12;letter-spacing:-0.015em;display:flex;flex-direction:column;justify-content:center;align-items:center;}

/* 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:center;}
.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 auto 0;}
.hero-ctas{display:flex;gap:18px;margin-top:28px;flex-wrap:wrap;align-items:center;justify-content:center;}
.link-plain{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;font-size:0.92rem;}
.link-plain:hover{color:var(--accent);text-decoration-color:var(--accent);}
.hero-note{margin-top:14px;display:inline-block;}
.hero-trust{margin-top:16px;color:var(--ink-3);font-size:0.8rem;font-family:var(--font-mono);display:flex;align-items:center;justify-content:center;gap:7px;}
.hero-trust::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;}

.verify-panel{margin:50px auto 0;background:var(--paper-2);border:1px solid var(--line);border-radius:40px;box-shadow:var(--shadow);padding:16px 16px 16px 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:52px;height:52px;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:18px;height:18px;}

/* interior page header (utilitarian, not a hero) */
.page-header{padding-block:44px 8px;border-bottom:1px solid var(--line);text-align:center;}
.page-title-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
.page-title-row .eyebrow{margin-bottom:0;}
.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 auto 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;}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.step .n{font-family:var(--font-mono);color:var(--accent);font-size:0.78rem;margin-bottom:12px;}
.step h3{font-size:1rem;font-weight:600;margin-bottom:8px;}
.step p{color:var(--ink-2);font-size:0.92rem;line-height:1.6;margin:0;}
.step+.step{border-left:1px solid var(--line);padding-left:28px;}

.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;}

.report-card{background:var(--void);border-radius:14px;overflow:hidden;position:relative;color:var(--accent-ink);box-shadow:var(--shadow);}
.rc-tag{position:absolute;top:12px;right:12px;background:var(--void);font-family:var(--font-mono);font-size:0.62rem;color:rgba(255,255,255,0.45);border:1px solid rgba(255,255,255,0.18);border-radius:4px;padding:3px 7px;}
.rc-header{display:flex;align-items:center;gap:9px;padding:14px 76px 14px 16px;border-bottom:1px solid rgba(255,255,255,0.1);}
.rc-header .wm{font-family:var(--font-mono);font-size:0.78rem;font-weight:700;color:#fff;}
.rc-doctype{margin-left:auto;font-family:var(--font-mono);font-size:0.58rem;color:rgba(255,255,255,0.4);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 rgba(255,255,255,0.1);}
.rc-meta .label{font-size:0.58rem;color:rgba(255,255,255,0.4);margin:0 0 3px;}
.rc-meta .value{font-family:var(--font-mono);font-size:0.72rem;color:#fff;margin:0;font-variant-numeric:tabular-nums;}
.rc-verdict{margin:14px 16px;border-radius:8px;padding:11px 12px;background:rgba(209,69,61,0.14);border:1px solid rgba(209,69,61,0.35);display:flex;align-items:center;gap:10px;}
.rc-verdict .dot{width:8px;height:8px;border-radius:50%;background:var(--sev-red);flex:none;}
.rc-verdict p{margin:0;font-size:0.78rem;font-weight:600;color:#fff;}
.rc-verdict span{display:block;font-size:0.68rem;color:rgba(255,255,255,0.55);font-weight:400;margin-top:2px;}
.rc-chips{padding:2px 16px 16px;display:flex;flex-wrap:wrap;gap:6px;}
.rc-chips .chip{border-color:rgba(255,255,255,0.18);color:rgba(255,255,255,0.75);}

.checks{display:flex;flex-wrap:wrap;gap:10px;}
.chip{font-family:var(--font-mono);font-size:0.78rem;color:var(--ink-2);border:1px solid var(--line-strong);border-radius:999px;padding:7px 13px;}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;}
.plan{border:1px solid var(--line);border-radius:20px;padding:30px 28px;background:var(--paper-2);display:flex;flex-direction:column;position:relative;}
.plan.featured{border:2px solid var(--accent);padding:29px 27px;}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--accent-ink);font-size:0.7rem;font-weight:700;letter-spacing:0.02em;padding:6px 16px;border-radius:999px;white-space:nowrap;}
.plan .name{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:16px;}
.price-prefix{font-size:0.76rem;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:4px;}
.plan .price{font-family:var(--font-mono);font-size:2.4rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:6px;display:flex;align-items:baseline;gap:7px;}
.plan .price small{font-size:0.86rem;color:var(--ink-2);font-weight:500;font-family:var(--font-body);}
.plan .desc{color:var(--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 ul{list-style:none;margin:0;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;}
.plan li{display:flex;align-items:flex-start;gap:10px;font-size:0.88rem;color:var(--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(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;}

/* legal pages */
.legal{max-width:68ch;padding-block:44px 72px;}
.legal .updated{font-family:var(--font-mono);font-size:0.78rem;color:var(--ink-3);margin-bottom:36px;}
.legal h2{font-size:1.05rem;font-weight:700;margin-top:34px;margin-bottom:10px;}
.legal h2:first-of-type{margin-top:0;}
.legal p{color:var(--ink-2);font-size:0.95rem;line-height:1.7;margin:0 0 4px;}
.legal a{color:var(--accent);}
.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);}

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;}
  .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;}
  .steps{grid-template-columns:1fr;gap:20px;}
  .step+.step{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:20px;}
  .verify-layout{grid-template-columns:1fr;}
  .verify-grid{grid-template-columns:1fr;}
  .pricing{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .wrap{padding-inline:16px;}
  .top-inner{padding-block:12px;}
  .headline{font-size:1.7rem;}
  .hero{min-height:auto;padding-block:40px 56px;}
  .rc-meta{grid-template-columns:1fr 1fr;}
  .footer-inner{flex-direction:column;align-items:flex-start;}
}