/* Pied Piper — shared theme. Authentic palette (logo greens + neutral grays),
   Saira display + Open Sans body, light Tailwind-ish aesthetic. */
:root{
  --pp-dark:#047863;   /* logo dark teal-green */
  --pp:#06a261;        /* logo bright green — primary accent */
  --pp-600:#058a53;    /* hover */
  --pp-700:#046b41;
  --pop:#22c55e;       /* highlight green */
  --ink:#171717; --ink-soft:#404040; --muted:#6b6b6b;
  --line:#e5e5e5; --line-soft:#efefef;
  --bg:#ffffff; --bg-soft:#f7f8f7; --card:#ffffff;
  --night:#111827;     /* footer / terminals */
  --shadow:0 1px 2px rgba(4,120,99,.05),0 10px 30px rgba(17,24,39,.06);
  --radius:16px;
  --disp:"Saira",ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --body:"Open Sans",ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit}
h1,h2,h3,h4,.disp{font-family:var(--disp);letter-spacing:-.01em}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:880px}
:where(a,button,summary,input,[tabindex]):focus-visible{outline:3px solid var(--pp);outline-offset:2px;border-radius:8px}
code{font-family:var(--mono);font-size:.92em;background:var(--bg-soft);padding:1px 5px;border-radius:5px}

/* ---- logo / brand ---- */
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.logo .wing{width:34px;height:34px;flex:none}
.logo b{font-family:var(--disp);font-weight:800;letter-spacing:.16em;font-size:16px;text-transform:uppercase;color:var(--ink)}
.logo b span{color:var(--pp-dark)}

/* ---- nav ---- */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
nav .links{display:flex;gap:26px;align-items:center;font-size:14px;font-weight:600;min-width:0}
nav .links a{text-decoration:none;color:var(--muted);transition:color .15s;position:relative}
nav .links a:hover{color:var(--ink)}
nav .links a.active{color:var(--pp-dark)}
nav .links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-22px;height:2px;background:var(--pp)}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--night);color:#eafff2;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap;max-width:52vw;overflow:hidden;text-overflow:ellipsis}
.pill .dot{width:7px;height:7px;border-radius:50%;background:#6b7c73;transition:.3s}
.pill.on .dot{background:var(--pop);box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media(max-width:760px){nav .links a:not(.pill-link){display:none}.pill{flex-shrink:1;min-width:0}}

/* ---- hero ---- */
header.hero{padding:66px 0 36px;background:radial-gradient(1100px 360px at 50% -110px,rgba(6,162,97,.12),transparent 70%);text-align:center}
.hero h1{font-size:clamp(34px,6vw,58px);line-height:1.02;margin:0 0 16px;font-weight:800}
.hero h1 em{font-style:normal;color:var(--pp-dark);position:relative;white-space:nowrap;cursor:help}
.hero p.sub{font-size:clamp(16px,2.3vw,20px);color:var(--ink-soft);max-width:680px;margin:0 auto}
.hero .actions{justify-content:center;margin-top:26px}
.hero p.tag{font-size:13px;color:var(--muted);margin-top:18px}
.eyebrow{display:inline-block;font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pp-dark);margin:0 0 14px;padding:5px 12px;border:1px solid #bfe6d6;border-radius:999px;background:#f0fbf6}

/* ---- sections ---- */
section{padding:32px 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 26px}
.kicker{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pp-dark);margin:0 0 7px}
h2{font-size:28px;margin:0 0 5px;font-weight:800}
.lead{color:var(--muted);font-size:14.5px;margin:0 0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:28px}

/* ---- modules: dropzone, file chip, options ---- */
.drop{border:2px dashed #c4ddd2;border-radius:13px;padding:24px;text-align:center;cursor:pointer;transition:.18s;background:#fbfdfc}
.drop:hover,.drop.over{border-color:var(--pp);background:#f0fbf6}
.drop b{display:block;font-size:15px;font-family:var(--disp);font-weight:700}
.drop small{color:var(--muted);display:block;margin-top:5px}
.filechip{display:none;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;background:#f0fbf6;border:1px solid #cdeadd;border-radius:11px}
.filechip.show{display:flex}
.filechip .fi{width:36px;height:36px;border-radius:8px;background:var(--pp-dark);display:grid;place-items:center;color:#fff;font-weight:800;font-size:11px;flex:none;font-family:var(--disp)}
.filechip .meta{flex:1;min-width:0}
.filechip .meta b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filechip .meta small{color:var(--muted)}
.filechip .x{cursor:pointer;color:var(--muted);font-size:20px;line-height:1;padding:4px;border:0;background:none}

.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0;font-size:13.5px}
.opt .lbl b{display:block}.opt .lbl small{color:var(--muted)}
@media(max-width:560px){.opt{flex-direction:column;align-items:stretch}.opt .seg{align-self:flex-start}}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex:none}
.seg button{border:0;background:#fff;padding:8px 13px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--muted);font-family:var(--body)}
.seg button.on{background:var(--pp-dark);color:#fff}

/* ---- buttons ---- */
.actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.btn{appearance:none;border:0;border-radius:11px;padding:13px 22px;font-size:15px;font-weight:700;cursor:pointer;transition:.15s;font-family:var(--disp);letter-spacing:.01em;text-decoration:none;display:inline-block;line-height:1.1}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:linear-gradient(180deg,var(--pp-dark),var(--pp-700));color:#fff;box-shadow:0 6px 16px rgba(6,162,97,.30)}
.btn-primary:not(:disabled):hover{transform:translateY(-1px)}
.btn-ghost{background:#eef3f0;color:var(--ink)}
.btn-ghost:hover{background:#e3ebe6}
.btn-dark{background:var(--night);color:#eafff2}
.btn-dark:hover{transform:translateY(-1px)}

/* ---- stats / verdict / terminal ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:11px;overflow:hidden;margin:18px 0}
@media(max-width:560px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--card);padding:14px 15px}
.stat small{display:block;color:var(--muted);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.stat b{font-size:20px;font-weight:800;font-family:var(--disp)}
.sbar{height:9px;background:var(--line);border-radius:99px;overflow:hidden;margin:16px 0 4px}
.sbar>div{height:100%;width:0;background:linear-gradient(90deg,var(--pp-dark),var(--pp));border-radius:99px;transition:width .15s ease}
.verdict{display:flex;align-items:center;gap:9px;margin:16px 0 0;padding:12px 15px;border-radius:11px;background:#f0fbf6;border:1px solid #cdeadd;font-size:13.5px;font-weight:600}
.verdict.warn{background:#fff7ec;border-color:#f3e2c2}
.term{margin-top:16px;background:var(--night);border-radius:11px;padding:14px 16px;font-family:var(--mono);font-size:12px;color:#9defc0;max-height:150px;overflow:auto;overflow-wrap:anywhere;line-height:1.65}
.term .t{color:#5f8772}.term .g{color:#eafff2}.term .y{color:#ffd479}.term b{color:#eafff2}

/* ---- comparator (Weissman) ---- */
.anton{display:flex;align-items:center;gap:12px;background:var(--night);color:#cfe5d8;border-radius:13px;padding:13px 16px;margin-bottom:18px;font-size:13.5px}
.anton .led{width:9px;height:9px;border-radius:50%;background:#6b7c73;flex:none}
.anton.on .led{background:var(--pop);box-shadow:0 0 8px var(--pop)}
.anton b{color:#fff}.anton .rack{margin-left:auto;font-family:var(--mono);font-size:13px;color:#5f8772;letter-spacing:2px}
.refstrip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#f1f4f2;border:1px solid var(--line);border-radius:12px;padding:12px 15px;font-size:13px;color:var(--ink-soft);margin-top:6px}
.refstrip .rk{font-family:var(--disp);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--muted)}
.refstrip b{color:var(--ink)}.refstrip .dim{color:var(--muted)}
.vs-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-top:18px}
.vs-grid.two{grid-template-columns:1fr 1fr}
@media(max-width:760px){.vs-grid,.vs-grid.two{grid-template-columns:1fr}.vs-mid{order:-1}}
.vs-card{border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center;background:var(--card)}
.vs-card.pp{border-color:var(--pp);box-shadow:0 0 0 2px rgba(6,162,97,.16)}
.vs-card h2{margin:0 0 2px;font-size:19px}.vs-card .ctag{font-size:12px;color:var(--muted);font-weight:600}
.vs-card .big{font-size:32px;font-weight:800;margin:14px 0 2px;font-family:var(--disp)}.vs-card.pp .big{color:var(--pp-dark)}
.vs-card .csub{font-size:12px;color:var(--muted)}
.vs-card .tm{margin-top:12px;font-size:13px;color:var(--muted)}.vs-card .tm b{font-size:18px;color:var(--ink);font-family:var(--disp)}
.vs-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:150px}
.vs-mid .wlabel{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.vs-mid .wval{font-family:var(--disp);font-size:58px;font-weight:800;line-height:1;color:var(--pp-dark);margin:4px 0}
.vs-mid .wnote{font-size:12px;color:var(--muted);text-align:center}

/* ---- weissman explainer ---- */
.formula{background:var(--night);color:#eafff2;border-radius:13px;padding:20px;font-family:var(--mono);text-align:center;font-size:clamp(15px,2.6vw,21px);margin:6px 0 18px;overflow-x:auto}
.formula .v{color:var(--pop);font-weight:700}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:680px){.wgrid{grid-template-columns:1fr}}
.wbox{border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--card)}
.wbox h3{margin:0 0 6px;font-size:16px}.wbox p{margin:0;color:var(--muted);font-size:13px}
.wbox .ic{font-size:22px}

/* ---- teaser band (home -> weissman) ---- */
.band{background:linear-gradient(120deg,var(--pp-dark),var(--pp));color:#fff;border:0;overflow:hidden;position:relative}
.band .pad{position:relative;z-index:1}
.band h2{color:#fff}.band .kicker{color:#cffce8}
.band p{color:#eafff2;max-width:600px;margin:8px 0 18px}
.band .wmk{position:absolute;right:-30px;bottom:-60px;width:280px;opacity:.12;z-index:0}

/* ---- footer ---- */
footer{background:var(--night);color:#cfe5d8;margin-top:34px;padding:48px 0 30px}
footer .quote{font-family:var(--disp);font-size:clamp(19px,3vw,27px);font-weight:700;text-align:center;color:#fff;max-width:760px;margin:0 auto 6px;min-height:1.3em;transition:opacity .3s}
footer .who{text-align:center;color:var(--pop);font-weight:700;font-size:13px;margin-bottom:32px}
footer .fbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:12.5px;color:#8fb4a1}
footer .fbar .logo b{color:#fff}footer .fbar .logo b span{color:var(--pop)}

/* ---- modal / easter eggs ---- */
.modal{position:fixed;inset:0;background:rgba(17,24,39,.6);display:none;place-items:center;z-index:200;padding:20px}
.modal.show{display:grid}
.modal .box{background:#fff;border-radius:16px;max-width:460px;padding:30px;box-shadow:var(--shadow);text-align:center}
.modal .box h3{margin:0 0 10px;font-size:21px}.modal .box p{color:var(--muted);font-size:14px;margin:0}
.blueflash{position:fixed;inset:0;background:#1565ff;z-index:300;opacity:0;pointer-events:none;display:grid;place-items:center;color:#fff;font-family:var(--disp);font-size:clamp(30px,8vw,64px);font-weight:800;transition:opacity .18s}