:root{
  --paper:#EDEEE3;
  --paper-dark:#E1E2D4;
  --paper-line:#CFD1BF;
  --ink:#1C2541;
  --ink-soft:#4A5170;
  --ink-faint:#8489A0;
  --red:#B23A2E;
  --red-soft:#D96F5D;
  --green:#3C6E47;
  --green-soft:#DCE7DD;
  --gold:#B98A2E;
  --white:#FBFBF7;
  --shadow: 0 2px 0 rgba(28,37,65,0.06);
  --radius: 3px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--red-soft); color:var(--white);}
a{color:inherit;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
h1,h2,h3,h4{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; color:var(--ink);}
button, input, textarea{font-family:inherit;}
button{cursor:pointer;}
:focus-visible{outline:2px solid var(--red); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;} }

/* ---------- NAV ---------- */
header{position:sticky; top:0; z-index:50; background:rgba(237,238,227,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--paper-line);}
nav{display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:1120px; margin:0 auto;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-weight:700; font-size:20px; text-decoration:none;}
.nav-links{display:flex; gap:8px; align-items:center;}
.nav-links > a{font-size:14px; font-weight:500; color:var(--ink-soft); text-decoration:none; padding:8px 10px;}
.nav-links > a:hover{color:var(--ink);}

/* ---- Mega-menu dropdowns ---- */
.nav-dropdown{position:relative;}
.nav-dropdown-trigger{
  background:none; border:none; font-size:14px; font-weight:500; color:var(--ink-soft);
  padding:8px 10px; display:flex; align-items:center; gap:5px; border-radius:3px;
}
.nav-dropdown-trigger:hover{color:var(--ink);}
.nav-dropdown-trigger .caret{font-size:10px; color:var(--ink-faint); transition:transform 0.15s ease;}
.nav-dropdown.open .nav-dropdown-trigger{color:var(--ink); background:var(--paper-dark);}
.nav-dropdown.open .caret{transform:rotate(180deg);}

.nav-dropdown-panel{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--white); border:1px solid var(--paper-line); border-radius:4px;
  box-shadow:0 16px 32px -12px rgba(28,37,65,0.22);
  min-width:280px; padding:8px; display:flex; flex-direction:column; gap:2px;
  opacity:0; pointer-events:none; transition:opacity 0.15s ease, transform 0.15s ease;
  z-index:60;
}
.nav-dropdown.open .nav-dropdown-panel{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}

.nav-item{
  display:flex; flex-direction:column; gap:2px; text-decoration:none; padding:10px 12px; border-radius:3px;
}
.nav-item:hover{background:var(--paper);}
.nav-item-title{font-size:13.5px; font-weight:600; color:var(--ink);}
.nav-item-desc{font-size:12px; color:var(--ink-faint);}
.nav-item-highlight .nav-item-title{color:var(--red);}
.nav-dropdown-divider{height:1px; background:var(--paper-line); margin:6px 4px;}

/* ---- Mobile accordion groups ---- */
.mobile-group{border-bottom:1px solid var(--paper-line); padding-bottom:6px;}
.mobile-group-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center; background:none; border:none;
  padding:10px 0; font-size:15px; font-weight:600; color:var(--ink); font-family:'IBM Plex Sans', sans-serif;
}
.mobile-group-trigger .plus{color:var(--red); font-size:16px; transition:transform 0.15s ease;}
.mobile-group.open .plus{transform:rotate(45deg);}
.mobile-group-panel{display:none; flex-direction:column; gap:2px; padding-bottom:10px; padding-left:6px;}
.mobile-group.open .mobile-group-panel{display:flex;}
.mobile-group-panel a{font-size:14px; color:var(--ink-soft); text-decoration:none; padding:6px 0;}

.nav-actions{display:flex; align-items:center; gap:14px;}
.nav-burger{display:none; background:none; border:none; font-size:20px; color:var(--ink);}
.mobile-menu{display:none; flex-direction:column; padding:8px 32px 18px; gap:14px; border-top:1px solid var(--paper-line);}
.mobile-menu a{font-size:15px; font-weight:500; color:var(--ink-soft); text-decoration:none;}
.mobile-menu.open{display:flex;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border-radius:var(--radius); font-size:14px; font-weight:600; text-decoration:none; border:1.5px solid transparent; transition:transform 0.15s ease, box-shadow 0.15s ease; background:none;}
.btn-sm{padding:9px 16px; font-size:13px;}
.btn-primary{background:var(--ink); color:var(--white);}
.btn-primary:hover{transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--red);}
.btn-ghost{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-ghost:hover{background:var(--ink); color:var(--white);}
.btn-stamp{background:var(--red); color:var(--white);}
.btn-stamp:hover{transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink);}
.btn:active{transform:translate(0,0); box-shadow:none;}
.btn:disabled{opacity:0.5; cursor:not-allowed; transform:none !important; box-shadow:none !important;}
.full-width{width:100%; margin-top:14px;}

/* ---------- HERO ---------- */
.hero{padding:88px 0 100px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
.eyebrow{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--red); display:flex; align-items:center; gap:8px; margin-bottom:14px;}
.eyebrow::before{content:""; width:16px; height:1px; background:var(--red);}
.hero h1{font-size:50px; line-height:1.08; letter-spacing:-0.02em; margin-bottom:22px;}
.hero h1 em{font-style:italic; color:var(--red); font-weight:500;}
.hero p.lede{font-size:18px; color:var(--ink-soft); max-width:460px; margin-bottom:32px;}
.hero-ctas{display:flex; gap:14px; margin-bottom:24px; flex-wrap:wrap;}
.hero-note{font-size:13px; color:var(--ink-faint); font-family:'IBM Plex Mono', monospace;}

.doc-stage{position:relative; display:flex; justify-content:center;}
.doc{width:320px; background:var(--white); border:1px solid var(--paper-line); box-shadow:8px 8px 0 var(--paper-dark), 0 20px 40px -20px rgba(28,37,65,0.35); padding:32px 28px; position:relative; transform:rotate(-1.4deg);}
.doc-name{font-family:'Fraunces',serif; font-weight:600; font-size:17px; margin-bottom:2px;}
.doc-role{font-size:11px; color:var(--ink-faint); margin-bottom:16px; font-family:'IBM Plex Mono',monospace;}
.doc-line{height:7px; background:var(--paper-dark); border-radius:2px; margin-bottom:9px;}
.doc-line.w80{width:80%;} .doc-line.w95{width:95%;} .doc-line.w60{width:60%;} .doc-line.w70{width:70%;}
.doc-block{margin-bottom:16px;}
.redmark{position:absolute; left:0; right:0; bottom:-3px; height:6px; pointer-events:none;}
.stamp{position:absolute; top:34px; right:-16px; width:112px; height:112px; border:3px solid var(--red); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; transform:rotate(11deg); color:var(--red); background:rgba(251,251,247,0.92); font-family:'IBM Plex Mono', monospace; box-shadow:0 0 0 3px rgba(251,251,247,0.92);}
.stamp .num{font-size:28px; font-weight:600; line-height:1;}
.stamp .lbl{font-size:9px; letter-spacing:0.12em; margin-top:2px;}
.margin-note{position:absolute; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--red); max-width:150px; line-height:1.35;}
.margin-note::before{content:"— ";}
.note1{top:96px; left:-172px; text-align:right;}
.note2{top:262px; left:-186px; text-align:right;}
@media (max-width:980px){ .margin-note{display:none;} .stamp{right:-6px;} }

.strip{border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); padding:14px 0; overflow:hidden; background:var(--paper-dark);}
.strip-inner{display:flex; gap:48px; white-space:nowrap; animation:scrollLeft 26s linear infinite; width:max-content;}
.strip span{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em; color:var(--ink-soft); text-transform:uppercase;}
@keyframes scrollLeft{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

section{padding:96px 0;}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{font-size:34px; line-height:1.15; margin-bottom:12px;}
.section-head p{color:var(--ink-soft); font-size:16px;}

/* ---------- CHECKER TABS / PANELS ---------- */
.checker-tabs{display:flex; gap:0; margin-bottom:28px; border:1px solid var(--paper-line); width:fit-content; border-radius:3px; overflow:hidden; background:var(--white);}
.checker-tab{padding:11px 20px; font-size:13.5px; font-weight:600; font-family:'IBM Plex Mono',monospace; background:transparent; color:var(--ink-faint); border:none; border-right:1px solid var(--paper-line);}
.checker-tab:last-child{border-right:none;}
.checker-tab.active{background:var(--ink); color:var(--white);}
.checker-panel{display:none;}
.checker-panel.active{display:block;}
.checker-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start;}

.checker-input textarea, .checker-input input[type="url"], .checker-input input[type="text"], .checker-input select.select-input{
  width:100%; min-height:170px; background:var(--white); border:1px solid var(--paper-line); color:var(--ink);
  padding:16px; font-family:'IBM Plex Mono',monospace; font-size:13px; line-height:1.6; border-radius:3px; resize:vertical;
}
.checker-input input[type="url"], .checker-input input[type="text"], .checker-input select.select-input{min-height:auto; padding:13px 16px;}
.checker-input select.select-input{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234A5170'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; cursor:pointer;}
.input-label{display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:8px; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0.06em;}
.input-note{font-size:12.5px; color:var(--ink-faint); margin-top:12px; line-height:1.5;}
.callout-note{background:var(--white); border:1px dashed var(--paper-line); padding:14px; border-radius:3px; color:var(--ink-soft);}
.callout-note strong{color:var(--ink);}

.dropzone{
  border:2px dashed var(--paper-line); border-radius:4px; background:var(--white); padding:36px 24px;
  text-align:center; cursor:pointer; transition:border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover, .dropzone.dragover{border-color:var(--red); background:#FFF8F6;}
.dropzone-icon{font-size:32px; margin-bottom:10px;}
.dropzone p{font-size:14px; color:var(--ink-soft); margin-bottom:4px;}
.dropzone-hint{font-size:12px; color:var(--ink-faint) !important;}
.dropzone-file{margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--green); font-weight:600;}

.result-panel{background:var(--white); border:1px solid var(--paper-line); border-radius:3px; padding:24px; min-height:200px;}
.placeholder-msg{color:var(--ink-faint); font-size:13.5px; font-family:'IBM Plex Mono',monospace; text-align:center; padding-top:60px;}

.gauge-row{display:flex; align-items:center; gap:20px; margin-bottom:20px;}
.gauge{width:84px; height:84px; position:relative; flex-shrink:0;}
.gauge svg{transform:rotate(-90deg);}
.gauge-num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:19px; color:var(--ink);}
.gauge-label{font-size:11.5px; color:var(--ink-faint); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.08em; font-family:'IBM Plex Mono',monospace;}
.gauge-verdict{font-family:'Fraunces',serif; font-size:16px; font-weight:600;}

.cat-mini-list{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.cat-mini-row{display:grid; grid-template-columns:120px 1fr 34px; align-items:center; gap:10px;}
.cat-mini-name{font-size:12px; color:var(--ink-soft); font-weight:600;}
.cat-mini-track{height:5px; background:var(--paper-dark); border-radius:3px; overflow:hidden;}
.cat-mini-fill{height:100%; background:var(--ink); border-radius:3px;}
.cat-mini-fill.warn{background:var(--gold);}
.cat-mini-fill.bad{background:var(--red);}
.cat-mini-score{font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-align:right; color:var(--ink-faint);}

.findings{list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:16px;}
.findings li{display:flex; gap:10px; font-size:13.5px; color:var(--ink-soft); align-items:flex-start; line-height:1.4;}
.tag{flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:600; padding:2px 6px; border-radius:2px; letter-spacing:0.04em; margin-top:2px;}
.tag.critical{background:rgba(178,58,46,0.12); color:var(--red);}
.tag.major{background:rgba(185,138,46,0.14); color:var(--gold);}
.tag.minor{background:rgba(60,110,71,0.12); color:var(--green);}

.locked-box{border:1px dashed var(--paper-line); border-radius:3px; padding:16px; margin-top:6px; background:linear-gradient(180deg, rgba(237,238,227,0.5), rgba(237,238,227,0.1));}
.locked-box .locked-label{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-faint); margin-bottom:10px; display:flex; align-items:center; gap:6px;}
.locked-line{height:8px; background:var(--paper-dark); border-radius:2px; margin-bottom:8px; filter:blur(2px); opacity:0.7;}
.unlock-actions{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.unlock-btn{width:100%;}
.unlock-price{font-family:'IBM Plex Mono',monospace; font-weight:700;}

.download-ready{background:var(--green-soft); border:1px solid var(--green); border-radius:3px; padding:14px 16px; margin-top:10px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.download-ready span{font-size:13.5px; color:var(--ink); font-weight:600;}

.error-msg{color:var(--red); font-size:13.5px; font-family:'IBM Plex Mono',monospace; background:rgba(178,58,46,0.06); border:1px solid rgba(178,58,46,0.25); border-radius:3px; padding:12px 14px;}
.info-msg{color:var(--ink-soft); font-size:13.5px; background:var(--paper-dark); border-radius:3px; padding:14px; line-height:1.5;}
.spinner-msg{color:var(--ink-faint); font-size:13px; font-family:'IBM Plex Mono',monospace; text-align:center; padding-top:60px;}

@media (max-width:860px){ .checker-grid{grid-template-columns:1fr;} }

/* ---------- PRICING ---------- */
.pricing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.ticket{background:var(--white); border:1px solid var(--paper-line); position:relative; padding:26px 22px 24px; display:flex; flex-direction:column; box-shadow:var(--shadow);}
.ticket.featured{border-color:var(--ink); box-shadow:5px 5px 0 var(--red);}
.ticket-tier{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--red); margin-bottom:10px;}
.ticket h3{font-size:19px; margin-bottom:6px;}
.ticket .price{font-family:'IBM Plex Mono',monospace; font-size:28px; font-weight:600; margin-bottom:10px;}
.ticket .desc{font-size:13px; color:var(--ink-soft); margin-bottom:16px; min-height:50px;}
.ticket ul{list-style:none; display:flex; flex-direction:column; gap:9px;}
.ticket ul li{font-size:12.5px; color:var(--ink-soft); display:flex; gap:8px; align-items:flex-start;}
.ticket ul li::before{content:"✓"; color:var(--green); font-weight:700; flex-shrink:0;}
.pricing-footnote{margin-top:20px; font-size:12.5px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace;}
@media (max-width:980px){ .pricing-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .pricing-grid{grid-template-columns:1fr;} }

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--paper-line); max-width:820px;}
.faq-two-col{display:grid; grid-template-columns:1fr 1fr; gap:0 40px;}
.faq-item{border-bottom:1px solid var(--paper-line);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:20px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:'Fraunces',serif; font-size:16px; font-weight:600; color:var(--ink);}
.faq-q .plus{font-family:'IBM Plex Mono',monospace; font-size:18px; color:var(--red); transition:transform 0.2s ease; flex-shrink:0;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height 0.25s ease;}
.faq-a p{padding:0 0 20px; color:var(--ink-soft); font-size:14px; max-width:640px;}
@media (max-width:700px){ .faq-two-col{grid-template-columns:1fr;} }

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--paper-dark); border:1px solid var(--paper-line); padding:60px; text-align:center; border-radius:4px;}
.cta-band h2{font-size:30px; margin-bottom:12px;}
.cta-band p{color:var(--ink-soft); margin-bottom:26px;}
.cta-band .hero-ctas{justify-content:center;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--paper-line); padding:44px 0 30px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:32px; flex-wrap:wrap; gap:24px;}
.footer-cols{display:flex; gap:52px;}
.footer-col h5{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px;}
.footer-col a{display:block; font-size:13.5px; color:var(--ink-soft); text-decoration:none; margin-bottom:9px;}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; flex-wrap:wrap; gap:10px;}

/* ---------- TOAST ---------- */
.toast{position:fixed; bottom:24px; left:50%; transform:translate(-50%, 16px); background:var(--ink); color:var(--white); padding:13px 20px; border-radius:3px; font-size:13.5px; opacity:0; pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease; z-index:200; max-width:90vw; text-align:center;}
.toast.show{opacity:1; transform:translate(-50%, 0);}
.toast.error{background:var(--red);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:52px;}
  .doc-stage{order:-1;}
  .nav-links{display:none;}
  .nav-burger{display:block;}
  .hero h1{font-size:36px;}
  section{padding:64px 0;}
  .cta-band{padding:38px 22px;}
}