* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(245,197,24,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 20%, rgba(21,101,192,.10) 0%, transparent 65%),
    var(--navy);
  color: var(--text-primary);
  min-height: 100vh; display: flex; flex-direction: column;
}
.nav-v2 { display:flex; align-items:center; justify-content:space-between; padding:18px clamp(16px,4vw,48px); position:relative; z-index:2; }
.nav-brand img { height:30px; display:block; }
.nav-actions { display:flex; align-items:center; gap:18px; }
.nav-link { color:var(--text-secondary); text-decoration:none; font-size:.9rem; }
.nav-link:hover { color:var(--text-primary); }
.nav-cta { background:var(--yellow); color:var(--yellow-text); padding:8px 16px; border-radius:8px; text-decoration:none; font-weight:600; font-size:.9rem; }
.hero { text-align:center; padding:clamp(28px,6vw,56px) 20px 8px; position:relative; z-index:1; }
.hero h1 { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:700; letter-spacing:-.02em; }
/* v3: the accent word is gold; --gold forks in the light block, so no override. */
.hero h1 .yellow { color:var(--gold); }
.hero p { max-width:640px; margin:14px auto 0; color:var(--text-secondary); font-size:1.02rem; line-height:1.6; }
.wrap { width:100%; max-width:760px; margin:0 auto; padding:0 20px; position:relative; z-index:1; flex:1; }
.drop {
  margin-top:26px; border:2px dashed var(--border-strong,rgba(255,255,255,.18));
  border-radius:16px; background:var(--surface-1,rgba(255,255,255,.03));
  padding:38px 24px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
}
.drop:hover, .drop.drag { border-color:var(--blue); background:var(--blue-wash); }
.drop .big { font-size:1.08rem; font-weight:600; }
.drop .sub { color:var(--text-secondary); font-size:.9rem; margin-top:6px; }
/* The one gold action on this screen (v3): flat gold fill, dark ink, no glow. */
.drop .pick { display:inline-block; margin-top:14px; background:var(--gold-fill); color:var(--cta-on); font-weight:700; border:none; border-radius:var(--radius-ctl); padding:10px 20px; cursor:pointer; font-size:.95rem; }
.filemeta { margin-top:12px; font-size:.85rem; color:var(--text-secondary); font-family:var(--font-mono); }
.privacy { margin-top:14px; text-align:center; font-size:.82rem; color:var(--text-secondary); }
.verdict { margin-top:24px; border-radius:16px; padding:22px; border:1px solid var(--border,rgba(255,255,255,.1)); background:var(--surface-1,rgba(255,255,255,.03)); }
.verdict.pass { border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.06); }
.verdict.fail { border-color:rgba(242,107,98,.4); background:rgba(242,107,98,.06); }
.verdict h2 { font-size:1.3rem; display:flex; align-items:center; gap:10px; }
.verdict .icon { font-size:1.5rem; }
.verdict .lead { color:var(--text-secondary); margin-top:6px; font-size:.95rem; }
.checks { list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.check { display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:11px; background:rgba(255,255,255,.03); border:1px solid var(--border,rgba(255,255,255,.08)); }
[data-theme="light"] .check { background:rgba(10,22,40,.03); }
.check .mark { font-size:1.15rem; line-height:1.4; flex:none; }
.check .mark.ok { color:var(--ok,#34D399); }
.check .mark.bad { color:var(--crit,#F26B62); }
.check .mark.info { color:var(--warn,#F5C518); }
.check .body h3 { font-size:.98rem; font-weight:600; }
.check .body p { color:var(--text-secondary); font-size:.88rem; margin-top:3px; line-height:1.5; }
.check .body code { font-family:var(--font-mono); font-size:.78rem; word-break:break-all; color:var(--text-secondary); }
.meta { margin-top:16px; font-size:.85rem; color:var(--text-secondary); display:grid; grid-template-columns:auto 1fr; gap:4px 16px; }
.meta dt { font-weight:600; color:var(--text-primary); }
.meta dd { font-family:var(--font-mono); word-break:break-all; }
.sample { margin-top:22px; text-align:center; }
.sample a { color:var(--link); text-decoration:none; font-weight:600; }
.err { margin-top:18px; padding:14px; border-radius:11px; background:rgba(242,107,98,.08); border:1px solid rgba(242,107,98,.35); color:var(--text-primary); font-size:.92rem; }
.spin { display:inline-block; width:15px; height:15px; border:2px solid var(--line-strong); border-top-color:var(--blue); border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px; }
@keyframes sp { to { transform:rotate(360deg); } }
.explain { margin:34px auto 10px; max-width:680px; }
.explain h2 { font-size:1.15rem; text-align:center; }
.explain ol { margin:16px 0 0; padding-left:22px; color:var(--text-secondary); line-height:1.65; font-size:.95rem; }
.explain ol li { margin-bottom:10px; }
.explain .foot { margin-top:16px; font-size:.86rem; color:var(--text-secondary); text-align:center; }
.explain .foot a { color:var(--link); text-decoration:none; }
footer { text-align:center; padding:30px 20px; color:var(--text-secondary); font-size:.86rem; position:relative; z-index:1; }
footer a { color:var(--text-secondary); }

/* ---- a11y parity (matches the marketing sites) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--yellow); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Mobile responsiveness pass (2026-08-15) — max-width guarded only ── */
@media (max-width: 560px) {
  input { font-size: 16px; }
}