:root {
  --red: #111111;
  --black: #050505;
  --ink: #0b0b0b;
  --paper: #f2f2f0;
  --line: #c9c9c5;
  --muted: #666662;
}

body { background: linear-gradient(90deg,transparent 49.92%,rgba(0,0,0,.026) 50%,transparent 50.08%),var(--paper); }
.topbar { height:110px;background:#050505;border-bottom:1px solid #303030;color:#fff; }
.brand { color:#fff; }
.brand-logo { width:86px;height:86px;object-fit:contain;mix-blend-mode:screen; }
.brand-copy strong { color:#fff;font-family:Georgia,'Times New Roman',serif;font-size:19px;letter-spacing:.1em; }
.brand-copy small { color:#9d9d9d; }
.secure { color:#c8c8c8; }
.secure span { background:#fff; }
.intro { min-height:650px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);align-items:center;gap:55px;padding:70px 0; }
.intro::after { display:none; }
.intro-copy { position:relative;z-index:1; }
.eyebrow { color:#111; }
.eyebrow i { background:#111; }
.intro h1 { letter-spacing:-.045em; }
.intro h1 em { color:#111;text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:10px; }
.benefits b { color:#111; }
.hero-brand { align-self:stretch;background:#050505;position:relative;display:grid;place-items:center;overflow:hidden;min-height:480px;box-shadow:20px 20px 0 #deded9; }
.hero-brand::before,.hero-brand::after { content:'';position:absolute;width:460px;height:460px;border:1px solid #292929;border-radius:50%; }
.hero-brand::after { width:390px;height:390px; }
.hero-brand img { width:92%;position:relative;z-index:1; }
.hero-brand span { position:absolute;bottom:18px;z-index:2;color:#777;font-size:9px;letter-spacing:.35em; }
.chooser { border-top:2px solid #111; }
.section-head>span { color:#111; }
.choice-card { border:1px solid #050505;box-shadow:inset 0 0 0 1px #333; }
.choice-card.red { background:#f8f8f6;color:#050505;box-shadow:inset 0 0 0 1px #fff; }
.choice-card.red .fake-link { border-bottom-color:#333; }
.progress-meta span:first-child { color:#111; }
.progress i { background:#111; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#111;box-shadow:0 0 0 2px #1111; }
.option input:checked+span { border-color:#111;color:#111;box-shadow:inset 4px 0 #111; }
.primary,.result-icon { background:#050505; }
.eyebrow-simple { color:#111; }
.recommendations { margin:32px 0;text-align:left; }
.rec-head { display:flex;justify-content:space-between;gap:18px;margin-bottom:10px;font-size:10px;letter-spacing:.13em; }
.rec-head span { font-weight:800; }
.rec-head b { color:#777; }
.rec-card { display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:18px;padding:20px 0;border-top:1px solid #ccc; }
.rec-card:last-child { border-bottom:1px solid #ccc; }
.rec-rank { font-family:Oswald,sans-serif;font-size:18px;color:#999; }
.rec-main>span { font-size:10px;color:#777;text-transform:uppercase;letter-spacing:.1em; }
.rec-main h3 { margin:4px 0 7px;font-family:Oswald,sans-serif;font-size:21px;text-transform:uppercase;line-height:1.1; }
.rec-main strong { font-size:14px; }
.rec-match { min-width:82px;text-align:right; }
.rec-match b { display:block;font-family:Oswald,sans-serif;font-size:27px; }
.rec-match span { font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#777; }
.pre-note { display:flex;gap:16px;align-items:flex-start;margin:0 0 28px;padding:18px 20px;background:#080808;color:#fff;border-left:4px solid #777; }
.pre-note b { font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em; }
.pre-note span { color:#c9c9c9;font-size:13px;line-height:1.55; }
footer { border-top:1px solid #333;color:#bdbdbd; }

@media(max-width:820px) {
  .intro { grid-template-columns:1fr;min-height:0;gap:45px; }
  .hero-brand { min-height:420px;width:min(100%,440px);justify-self:center; }
}

@media(max-width:480px) {
  .topbar { height:86px; }
  .brand-logo { width:66px;height:66px; }
  .brand-copy strong { font-size:15px; }
  .hero-brand { min-height:330px;box-shadow:10px 10px 0 #deded9; }
  .hero-brand::before { width:330px;height:330px; }
  .hero-brand::after { width:285px;height:285px; }
  .intro h1 em { text-decoration-thickness:3px;text-underline-offset:7px; }
  .rec-card { grid-template-columns:32px 1fr;gap:10px; }
  .rec-match { grid-column:2;text-align:left;display:flex;align-items:baseline;gap:6px; }
  .rec-match b { font-size:22px; }
}
