:root{
  --bg:#0b0b0c;--bg2:#121214;--card:#151517;--line:#26262a;--line2:#34343a;
  --fg:#ededea;--mute:#8d8d92;--dim:#5c5c62;--ok:#7fd6a4;--bad:#ef6f67;
  --serif:'Instrument Serif',Georgia,serif;--sans:'Geist',system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{background:radial-gradient(1200px 600px at 80% -10%,#1b1b1f 0,transparent 60%),var(--bg)}
.dealbreakers-page{--bg:#640f19;--bg2:#751b25;--line:#99434c;--line2:#b86a72;--mute:#edc6ca;--dim:#c48c93}
.dealbreakers-page body{background:radial-gradient(1200px 600px at 80% -10%,#932333 0,transparent 60%),var(--bg)}
.dealbreakers-page .topbar{background:linear-gradient(#640f19,rgba(100,15,25,.85))}
.dealbreakers-page .counter{background:rgba(79,11,20,.95)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:20px clamp(20px,5vw,48px);position:sticky;top:0;z-index:20;background:linear-gradient(var(--bg),rgba(11,11,12,.7));backdrop-filter:blur(8px)}
.brand{display:flex;gap:10px;align-items:center;font-weight:500;letter-spacing:-.01em}
.mark{width:26px;height:26px;display:block;object-fit:contain}
.badge{font-family:var(--mono);font-size:12px;display:flex;gap:8px;align-items:center;border:1px solid var(--line);padding:6px 12px;border-radius:99px;color:var(--mute)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--dim)}.dot.on{background:var(--ok)}
.wrap{max-width:860px;margin:0 auto;padding:24px clamp(20px,5vw,48px) 96px}
.screen{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.center{text-align:center;padding-top:6vh}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.display{font-family:var(--serif);font-weight:400;font-size:clamp(44px,8vw,88px);line-height:.98;letter-spacing:-.02em;margin-top:14px}
.display em{color:var(--mute)}
.display-sm{font-family:var(--serif);font-weight:400;font-size:clamp(36px,6vw,56px);line-height:1;letter-spacing:-.015em;margin-top:10px}
.lede{color:var(--mute);max-width:560px;margin-top:18px;line-height:1.6;font-size:16px}
.hero{padding-top:6vh}
.h2{font-size:17px;font-weight:500}
.muted{color:var(--mute)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px}
.btn{font:500 14px var(--sans);border-radius:12px;padding:13px 20px;transition:transform .15s,opacity .2s,background .2s,border-color .2s;cursor:pointer}
.btn:active{transform:scale(.98)}.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-primary{background:var(--fg);color:var(--bg)}.btn-primary:hover:not(:disabled){background:#fff}
.btn-ghost{border:1px solid var(--line2);color:var(--fg)}.btn-ghost:hover{border-color:var(--fg)}
.btn-quiet{color:var(--mute)}.btn-quiet:hover{color:var(--fg)}
.btn:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.pin{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:12px;padding:14px;font:500 26px var(--mono);letter-spacing:.5em;text-align:center;color:var(--fg)}
.pin::placeholder{color:#333}
.err{color:var(--bad);font-size:14px;min-height:1.2em;margin-top:10px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.steps li{background:var(--bg2);padding:22px}
.steps .num{font-family:var(--mono);font-size:11px;color:var(--dim)}
.steps h3{font-family:var(--serif);font-size:26px;margin:10px 0 6px}
.steps p{color:var(--mute);font-size:14px;line-height:1.5}
.pinshare{display:flex;flex-direction:column;gap:6px;padding:22px;border:1px dashed var(--line2);border-radius:16px}
.pinbig{font:500 clamp(34px,7vw,48px) var(--mono);letter-spacing:.3em}
.rules{display:grid;gap:14px}
.rules li{padding:16px 0;border-top:1px solid var(--line);color:var(--mute);line-height:1.6}
.rules strong{color:var(--fg);font-weight:500;display:block}
.consent{display:flex;gap:12px;align-items:center;cursor:pointer}
input[type=checkbox]{width:18px;height:18px;accent-color:#ededea;flex:none}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:18px 4px;cursor:pointer;font-weight:500}
.acc summary::-webkit-details-marker{display:none}
.acc summary .meta{font:12px var(--mono);color:var(--dim);display:flex;gap:14px;align-items:center}
.acc summary .chev{transition:transform .25s}
.acc details[open] .chev{transform:rotate(45deg)}
.acc .qs{padding:0 0 14px;animation:rise .35s both}
.q{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:10px;cursor:pointer;line-height:1.5;transition:background .15s}
.q:hover{background:var(--bg2)}
.q input{margin-top:3px}
.q.off{opacity:.35;cursor:not-allowed}
.counter{position:sticky;top:68px;z-index:10;margin-top:22px;display:flex;align-items:center;gap:16px;padding:12px 16px;background:rgba(21,21,23,.92);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;font:13px var(--mono);color:var(--mute)}
.counter b{color:var(--fg)}
.counter.full{border-color:var(--fg)}
.bar{flex:1;height:2px;background:var(--line2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--fg);transform-origin:left;transform:scaleX(0);transition:transform .3s}
.orbit{position:relative;width:120px;height:120px;margin:0 auto}
.orbit span{position:absolute;inset:0;border:1px solid var(--line2);border-radius:50%;animation:breathe 2.4s ease-in-out infinite}
.orbit span:last-child{animation-delay:1.2s}
@keyframes breathe{0%{transform:scale(.4);opacity:0}50%{opacity:1}100%{transform:scale(1.15);opacity:0}}
.ring{width:132px;height:132px;border-radius:50%;margin:0 auto;border:1px solid var(--line2);position:relative;animation:pop .8s cubic-bezier(.2,.8,.2,1) both}
.ring::after{content:"";position:absolute;inset:34px;border-radius:50%;background:var(--dim)}
.ring.ok{border-color:rgba(127,214,164,.4)}.ring.ok::after{background:var(--ok)}
.ring.bad{border-color:rgba(239,111,103,.4)}.ring.bad::after{background:var(--bad)}
.ring-off::after{background:var(--line2)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.reveal li{padding:18px 0;border-top:1px solid var(--line);font-size:18px;display:flex;gap:16px}
.reveal li span{font:12px var(--mono);color:var(--dim);padding-top:5px}
.skel{border-radius:8px;background:linear-gradient(90deg,#161618,#202024,#161618);background-size:200% 100%;animation:sh 1.4s infinite}
@keyframes sh{to{background-position:-200% 0}}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:14px;transition:.3s;z-index:60;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}