/* GoodCodes marketing homepage. Standalone from the app's style.css. */
:root{
  --paper:#FBF9F6; --surface:#FFFFFF; --surface-2:#F4F0EA; --code-bg:#1C1822;
  --ink:#1B1720; --ink-2:#655E6C; --ink-3:#968E9C;
  --border:#EAE4DD; --border-strong:#DAD1C8;
  --accent:#D4225C; --accent-ink:#FFFFFF; --accent-soft:#FBE7ED;
  --valid:#1C875A; --valid-soft:#E5F3EB;
  --expired:#B0761A; --expired-soft:#F7ECD7;
  --invalid:#78727F; --invalid-soft:#EFEBEE;
  --code-ink:#EDE7F0; --code-key:#F58BB0; --code-str:#9FD8B4; --code-mut:#7E7690;
  --info:#2660C4; --info-soft:#E5EDFA; --danger:#B23B3B; --danger-soft:#FBE6E6;
  --shadow:0 1px 2px rgba(27,23,32,.04), 0 10px 34px -14px rgba(27,23,32,.16);
}
@media (prefers-color-scheme:dark){:root{
  --paper:#131019; --surface:#1C1822; --surface-2:#241F2C; --code-bg:#0F0C15;
  --ink:#F2ECEA; --ink-2:#ADA3AF; --ink-3:#7C7484;
  --border:#2C2632; --border-strong:#3A3340;
  --accent:#F0578A; --accent-ink:#1A0A11; --accent-soft:#3A1C29;
  --valid:#4FCB8B; --valid-soft:#16311F;
  --expired:#E3A63C; --expired-soft:#33280F;
  --invalid:#A199A9; --invalid-soft:#2A2431;
  --code-ink:#EDE7F0; --code-key:#F58BB0; --code-str:#9FD8B4; --code-mut:#8B8298;
  --info:#7FA9F0; --info-soft:#182742; --danger:#EF8A8A; --danger-soft:#391B1B;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 40px -16px rgba(0,0,0,.6);
}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{max-width:100%}
.mono{font-family:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace}
h1,h2,h3{font-family:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  line-height:1.08; margin:0; font-weight:600; text-wrap:balance; letter-spacing:-.01em}
a{color:inherit}
.wrap{max-width:1060px; margin:0 auto; padding:0 24px}
.eyebrow{font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--accent)}
.section-head{max-width:60ch}
.section-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem); margin:12px 0 0}
.section-head p{color:var(--ink-2); font-size:1.06rem; margin:14px 0 0; max-width:58ch}
section.band{padding:76px 0; border-top:1px solid var(--border)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; font:600 .96rem/1 "Instrument Sans",sans-serif;
  padding:12px 20px; border-radius:10px; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .06s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2)}

/* header + brand live in siteheader.css (shared with the app) */

/* hero */
.hero{padding:78px 0 4px}
.hero .eyebrow{color:var(--accent)}
.hero h1{font-size:clamp(2.2rem,5vw,3.5rem); margin:18px 0 0; max-width:16ch}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero p.lede{font-size:clamp(1.08rem,1.7vw,1.28rem); color:var(--ink-2); max-width:56ch; margin:20px 0 0}
.hero .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero .trust{margin-top:22px; font-size:.9rem; color:var(--ink-3)}
.hero .trust b{color:var(--ink-2); font-weight:600}
.heromark{margin:40px 0 0}

/* verdict card (hero + proof) */
.verdicts{border:1px solid var(--border-strong); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden}
.verdicts .vhead{display:flex; align-items:center; gap:10px; padding:12px 18px; background:var(--surface-2); border-bottom:1px solid var(--border); font-size:.78rem; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.verdicts .vhead .live{width:8px;height:8px;border-radius:50%;background:var(--valid);box-shadow:0 0 0 3px var(--valid-soft)}
.vrow{display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:14px 18px; border-top:1px solid var(--border)}
.vrow:first-of-type{border-top:none}
.vrow .who{display:flex; align-items:center; gap:10px; min-width:0}
.vrow .who .code{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:.9rem}
.vrow .who .pname{font-weight:600; font-size:.9rem}
.vrow .who .store{color:var(--ink-3); font-size:.82rem}
.vrow.rule{border-top:1px solid var(--border-strong)}
.vrow .disc{font-family:"IBM Plex Mono",monospace; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-2); text-align:right}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; padding:4px 11px; border-radius:999px; white-space:nowrap}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge.valid{color:var(--valid); background:var(--valid-soft)}
.badge.expired{color:var(--expired); background:var(--expired-soft)}
.badge.invalid{color:var(--invalid); background:var(--invalid-soft)}

/* stat tiles (the problem) */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px}
@media (max-width:760px){.stats{grid-template-columns:1fr}}
.stat{border:1px solid var(--border); border-radius:15px; background:var(--surface); padding:26px 24px}
.stat .n{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(2.4rem,4.6vw,3.1rem); letter-spacing:-.02em; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1}
.stat .t{margin-top:12px; font-weight:600}
.stat .s{margin-top:6px; color:var(--ink-2); font-size:.92rem}
/* Source attribution under a stat or a why-pillar figure. */
.src{margin-top:12px; font-family:"Instrument Sans",sans-serif; font-size:.72rem; color:var(--ink-3); line-height:1.5}
.src a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.src a:hover{color:var(--accent)}

/* steps (how it works) */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px; counter-reset:st}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.stepc{border:1px solid var(--border); border-radius:15px; background:var(--surface); padding:22px}
.stepc .num{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:.8rem; color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); border-radius:7px; padding:3px 8px; display:inline-block}
.stepc h3{font-size:1.06rem; margin:14px 0 0}
.stepc p{margin:8px 0 0; color:var(--ink-2); font-size:.92rem}
.stepc code{font-family:"IBM Plex Mono",monospace; font-size:.82rem; color:var(--accent)}

/* pillars (why it matters) */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px}
@media (max-width:860px){.pillars{grid-template-columns:1fr}}
.pillar{border:1px solid var(--border); border-radius:16px; background:var(--surface); padding:28px; box-shadow:var(--shadow)}
.pillar .tag{font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.pillar h3{font-size:1.24rem; margin:12px 0 0}
.pillar p{margin:10px 0 0; color:var(--ink-2); font-size:.95rem}
.pillar .fig{margin-top:16px; padding-top:16px; border-top:1px solid var(--border); font-family:"IBM Plex Mono",monospace; font-size:.82rem; color:var(--ink-3)}
.pillar .fig b{color:var(--ink); font-weight:600}

/* proof */
.proofgrid{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center; margin-top:12px}
@media (max-width:820px){.proofgrid{grid-template-columns:1fr}}
.proofgrid .frame{border-radius:14px; overflow:hidden; border:1px solid var(--border-strong); background:var(--surface); box-shadow:var(--shadow); aspect-ratio:auto; max-height:560px}
.proofgrid .frame img{display:block; width:100%; object-fit:cover; object-position:top}

/* audience */
.chips{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.chip{border:1px solid var(--border-strong); border-radius:999px; padding:10px 18px; font-weight:600; font-size:.95rem; background:var(--surface)}
.chip span{color:var(--ink-3); font-weight:400}

/* pricing */
.pricecard{margin-top:36px; border:1px solid var(--border-strong); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); padding:34px; display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center}
@media (max-width:720px){.pricecard{grid-template-columns:1fr; gap:22px}}
.pricecard .price{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; letter-spacing:-.02em; white-space:nowrap}
.pricecard .price .amt{font-size:clamp(2.6rem,5vw,3.4rem); color:var(--ink)}
.pricecard .price .per{color:var(--ink-2); font-size:1rem; font-weight:500}
.pricecard ul{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.pricecard li{display:flex; gap:10px; color:var(--ink-2); font-size:.98rem}
.pricecard li::before{content:"✓"; color:var(--valid); font-weight:700}
.pricecard li b{color:var(--ink); font-weight:600}

/* CTA band */
.ctaband{margin-top:0; background:var(--ink); color:var(--paper)}
.ctaband .wrap{padding:64px 24px; text-align:center}
.ctaband h2{color:var(--paper); font-size:clamp(1.8rem,3.6vw,2.5rem)}
.ctaband p{color:color-mix(in srgb,var(--paper) 72%,var(--ink)); max-width:46ch; margin:14px auto 0}
.ctaband .actions{display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap}
.ctaband .btn-ghost{color:var(--paper); border-color:color-mix(in srgb,var(--paper) 34%,transparent)}
.ctaband .btn-ghost:hover{background:color-mix(in srgb,var(--paper) 10%,transparent)}

/* footer */
footer.site{border-top:1px solid var(--border); padding:40px 0; color:var(--ink-3); font-size:.9rem}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center}
footer.site a{color:var(--ink-2); text-decoration:none}
footer.site a:hover{color:var(--ink)}
footer.site .sp{margin-left:auto}

/* --- content pages (docs, verified sites) --- */
main.page{max-width:840px; margin:0 auto; padding:56px 24px 80px}
main.page h1{font-size:clamp(1.9rem,4vw,2.6rem); letter-spacing:-.02em}
main.page h2{font-size:1.4rem; margin:40px 0 0; letter-spacing:-.01em}
main.page h3{font-size:1.1rem; margin:26px 0 0}
main.page p{margin:14px 0 0; max-width:72ch}
main.page p.muted, main.page .muted{color:var(--ink-3)}
main.page ul, main.page ol{margin:14px 0 0; padding-left:1.35em; max-width:72ch}
main.page li{margin:7px 0}
main.page a{color:var(--accent); text-decoration:none}
main.page a:hover{text-decoration:underline}
main.page pre{margin:16px 0 0; background:var(--code-bg); color:var(--code-ink);
  font-family:"IBM Plex Mono",monospace; font-size:.82rem; line-height:1.65;
  padding:16px 18px; border-radius:12px; overflow-x:auto; border:1px solid var(--border-strong)}
main.page :not(pre) > code{font-family:"IBM Plex Mono",monospace; font-size:.85em;
  background:var(--surface-2); padding:1px 6px; border-radius:5px}
main.page table{width:100%; border-collapse:collapse; margin:18px 0 0; font-size:.92rem;
  display:block; overflow-x:auto}
main.page th{text-align:left; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--border-strong)}
main.page td{padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--ink-2)}
main.page td code{white-space:nowrap}
/* classification badges (docs) */
.badge-green{color:var(--valid); background:var(--valid-soft)}
.badge-gray{color:var(--invalid); background:var(--invalid-soft)}
.badge-amber{color:var(--expired); background:var(--expired-soft)}
.badge-blue{color:var(--info); background:var(--info-soft)}
.badge-red{color:var(--danger); background:var(--danger-soft)}
/* verified-sites pills */
.pill-grid{display:flex; flex-wrap:wrap; gap:9px; margin-top:26px}
.pill{border:1px solid var(--border-strong); border-radius:999px; padding:7px 14px;
  font-family:"IBM Plex Mono",monospace; font-size:.85rem; background:var(--surface); color:var(--ink)}