/* Dealsci public site — the "On the record" brand. No inline styles: the CSP forbids them. */
@font-face{font-family:'IBM Plex Mono';font-weight:400;src:url('/fonts/IBMPlexMono-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Mono';font-weight:500;src:url('/fonts/IBMPlexMono-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Mono';font-weight:600;src:url('/fonts/IBMPlexMono-600.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Mono';font-weight:700;src:url('/fonts/IBMPlexMono-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Sans';font-weight:400;src:url('/fonts/IBMPlexSans-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Sans';font-weight:500;src:url('/fonts/IBMPlexSans-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Sans';font-weight:600;src:url('/fonts/IBMPlexSans-600.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Newsreader';font-weight:400;src:url('/fonts/Newsreader-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Newsreader';font-weight:500;src:url('/fonts/Newsreader-500.woff2') format('woff2');font-display:swap}

:root{
  --page:#EFECE4; --page-2:#E7E3D9; --card:#FFFFFF; --ink:#0A0A0A; --ink-2:#413D35; --dim:#67635A;
  --line:#DCD7CB; --line-2:#C9C4B8;
  --blood:#FF2D16; --blood-ink:#CC1B0A; --ice:#0C7460; --carbon:#0A0A0A; --bone:#EFECE4;
  --paper:#F7F8F7; --rule:#E3E8E5; --teal:#07332E; --good:#1E7A3C; --good-soft:#E3F1E7; --bad-soft:#FBE3DF;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --sans:'IBM Plex Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --gut:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --settle:cubic-bezier(.3,1.25,.5,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-snap-type:y proximity;scroll-padding-top:68px}
body{margin:0;background:var(--page);color:var(--ink);font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
s{text-decoration:none}
:focus-visible{outline:3px solid var(--blood);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gut)}

/* type */
.h1{font-family:var(--serif);font-weight:500;letter-spacing:-.035em;line-height:1.02;font-size:clamp(42px,7vw,96px);max-width:14ch;margin:0 auto;text-align:center;text-wrap:balance}
.h1 em{font-style:normal;color:var(--blood)}
.h2{font-family:var(--serif);font-weight:500;letter-spacing:-.03em;line-height:1.05;font-size:clamp(32px,4.4vw,58px);text-wrap:balance}
.h2 .q{color:var(--blood)}
.lede{font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:var(--ink-2);max-width:52ch;margin:26px auto 0;text-align:center}
.body{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:48ch;margin-top:18px}
.kick{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blood-ink);margin-bottom:14px}
.small{font-size:14px;color:var(--dim);margin-top:18px;line-height:1.5}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-size:15px;font-weight:600;padding:13px 20px;border:0;border-radius:999px;background:var(--ink);color:#fff;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.btn:hover{background:var(--blood);transform:translateY(-1px)}
.btn.sm{padding:10px 16px;font-size:14px}
.btn.lg{padding:17px 26px;font-size:17px}
.btn.inv{background:var(--carbon);color:#fff}
.btn.inv:hover{background:#fff;color:var(--carbon)}
.btn .arr{display:inline-block;transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.lnk{font-size:15px;font-weight:500;color:var(--ink-2);padding:10px 14px}
.lnk:hover{color:var(--ink)}

/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(239,236,228,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:box-shadow .3s}
.top.scrolled{box-shadow:0 1px 0 var(--line)}
.top .in{display:flex;align-items:center;gap:18px;height:68px}
.lockup-tag{font-family:var(--serif);font-size:18px;letter-spacing:-.02em;color:var(--ink-2);line-height:1;margin-right:auto;padding-left:18px;border-left:1px solid var(--line-2)}
.lockup-tag .art{font-style:italic;color:var(--dim);text-decoration:line-through;text-decoration-color:var(--blood);text-decoration-thickness:.09em}
.lockup-tag .sci{color:var(--ink);font-weight:500}
@media (max-width:760px){.lockup-tag{display:none}.top nav{margin-left:auto}}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:-.04em}
.brand svg{height:28px;width:auto}
.top nav{display:flex;align-items:center;gap:6px}

/* hero */
.hero{padding:clamp(64px,9vw,120px) 0 0}
.cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:34px}
.fine{font-size:14px;color:var(--dim)}

/* the stage: a tall scroll region with a pinned frame that changes state */
.stage-scroll{height:190vh;margin-top:clamp(48px,7vw,88px);position:relative}
.stage{position:sticky;top:68px;height:calc(100vh - 68px);display:flex;align-items:center}
.stage-in{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;width:100%}
.steps{display:grid;gap:22px}
.steps li{padding-left:22px;border-left:2px solid var(--line-2);transition:border-color .4s,opacity .4s;opacity:.45}
.steps li b{display:block;font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.steps li span{display:block;margin-top:6px;font-size:15px;color:var(--ink-2);line-height:1.45}
[data-stage] .steps li.on{opacity:1;border-color:var(--blood)}
.frame{background:var(--card);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 40px 90px -40px rgba(10,10,10,.45),0 2px 0 rgba(255,255,255,.6) inset;overflow:hidden}
.chrome{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--page-2);border-bottom:1px solid var(--line)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.url{font-family:var(--mono);font-size:12px;color:var(--dim)}
.panels{position:relative;min-height:520px}
.panel{position:absolute;inset:0;padding:26px 28px;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.panel.on{opacity:1;transform:none;pointer-events:auto}
.ph{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}

/* panel: transcript */
.turns li{display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:14px;padding:11px 0;border-top:1px solid var(--rule);font-size:15.5px;line-height:1.45;align-items:baseline}
.turns li b{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--dim);letter-spacing:.02em}
.turns li.buyer b{color:#B2532C}
.turns li em{font-style:normal;background:#FFE9E5;box-shadow:0 0 0 3px #FFE9E5}
.turns .tid{font-family:var(--mono);font-size:11.5px;color:var(--blood-ink)}
.turns li.hot{background:linear-gradient(90deg,#FFF3F0,transparent 60%)}

/* panel: elements */
.els{width:100%;border-collapse:collapse}
.els td{padding:12px 0;border-top:1px solid var(--rule);vertical-align:middle;font-size:15px}
.els td b{display:block;font-weight:600}
.els td span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:2px;line-height:1.4}
.els td:nth-child(2){width:96px;padding-left:12px}
.els td.ev{width:110px;text-align:right;font-family:var(--mono);font-size:12px;color:var(--dim);white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--good-soft);color:var(--good)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.no{background:var(--bad-soft);color:var(--blood-ink)}
.els tr.gap td{background:linear-gradient(90deg,#FFF3F0,transparent 70%)}

/* panel: call sheet */
.open{font-family:var(--serif);font-size:20px;line-height:1.3;letter-spacing:-.015em;max-width:40ch}
.sheet{margin-top:16px}
.sheet li{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-top:1px solid var(--rule);font-size:15.5px;line-height:1.4}
.sheet b{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px;font-weight:600}
.sheet span{display:block;font-size:12.5px;color:var(--dim);margin-top:2px}

/* today */
.today li{display:grid;grid-template-columns:6px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--rule)}
.today li i{height:44px;background:var(--line-2);border-radius:3px}
.today li i.hi{background:var(--blood)}.today li i.md{background:#B7791F}
.today li b{display:block;font-weight:600;font-size:16px}
.today li span{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.today li em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* trust strip */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.trust .in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.trust .t{font-size:14px;color:var(--dim)}
.trust .t b{color:var(--ink);font-weight:600;margin-right:6px}

/* said versus measured */
.said{background:var(--carbon);color:var(--bone);padding:clamp(88px,11vw,150px) 0}
.said .h2{max-width:20ch}
.said .q{color:var(--blood)}
.strikes{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:#222}
.strikes li{background:var(--carbon);padding:34px 32px 34px 0;display:grid;gap:14px}
.strikes li:nth-child(odd){padding-right:40px}.strikes li:nth-child(even){padding-left:40px}
.strikes s{position:relative;display:inline-block;align-self:start;font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em;color:#8C877B}
.strikes s::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:3px;background:var(--blood);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .3s}
.strikes li.in s::after,html:not(.js) .strikes s::after{transform:scaleX(1)}
.strikes p{font-size:19px;font-weight:500;line-height:1.35;color:var(--bone)}
.strikes p span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#8C877B;margin-top:8px;font-weight:400}
.said .line{margin-top:64px;font-family:var(--serif);font-size:clamp(26px,3.2vw,44px);letter-spacing:-.025em;line-height:1.15;color:#B9B4A8;max-width:24ch}
.said .line .q{color:var(--bone)}

/* three screens */
.feat{padding:clamp(72px,9vw,120px) 0}
.row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,88px);align-items:center;padding:clamp(40px,6vw,80px) 0}
.row.flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.row.flip .txt{order:2}
.shot .frame.sm{transform:perspective(1400px) rotateY(0deg);transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.row:not(.flip) .shot:hover .frame.sm{transform:perspective(1400px) rotateY(-2deg)}
.row.flip .shot:hover .frame.sm{transform:perspective(1400px) rotateY(2deg)}
.frame.sm .pad{padding:22px 24px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.stats div{font-size:14px;font-weight:500;padding:10px 12px;background:var(--paper);border-radius:8px;line-height:1.35}
.stats b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:3px}

/* price */
.price{background:var(--page-2);padding:clamp(88px,11vw,150px) 0}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.giant{display:flex;align-items:baseline;gap:.08em;font-family:var(--serif);font-weight:500;letter-spacing:-.05em;line-height:.85;font-size:clamp(120px,18vw,240px);color:var(--blood);margin-bottom:22px}
.giant .cur{font-size:.4em;align-self:flex-start;margin-top:.15em;color:var(--ink)}
.giant .unit{font-family:var(--sans);font-size:.11em;letter-spacing:0;color:var(--dim);margin-left:.5em;font-weight:500}
.ptab{margin-top:28px;border-top:1px solid var(--line-2)}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-2);font-size:15px;color:var(--ink-2)}
.prow b{font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.prow.key b{color:var(--blood-ink);font-size:26px}
.calc{background:var(--card);border-radius:16px;padding:32px;box-shadow:0 30px 60px -40px rgba(10,10,10,.4)}
.ch{font-family:var(--serif);font-size:26px;letter-spacing:-.02em;line-height:1.2}
.cfields{display:grid;gap:18px;margin-top:24px}
.cf > span:first-child{display:block;font-size:13px;font-weight:500;color:var(--dim);margin-bottom:8px}
.cin{display:flex;align-items:center;border:1.5px solid var(--line-2);border-radius:10px;background:var(--page)}
.cin:focus-within{border-color:var(--ink)}
.cin i{font-style:normal;font-family:var(--mono);font-size:18px;font-weight:600;padding:0 2px 0 14px;color:var(--dim)}
.cin input{width:100%;border:0;background:transparent;padding:12px 14px 12px 6px;font-family:var(--mono);font-size:18px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;-moz-appearance:textfield;border-radius:10px}
.cin input:focus{outline:0}
.cin input::-webkit-outer-spin-button,.cin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cout{display:grid;grid-template-columns:1fr auto;margin-top:26px;border-top:1px solid var(--line)}
.cout dt{padding:13px 0;font-size:14px;color:var(--dim);border-bottom:1px solid var(--line);align-self:center}
.cout dd{padding:13px 0;text-align:right;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px;color:var(--dim)}
.cout dd b{display:block;font-size:22px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.cout dd span{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.cout dd.hero-num b{font-size:36px;color:var(--blood-ink);letter-spacing:-.03em;font-family:var(--serif);font-weight:500}
.cout > :nth-last-child(-n+2){border-bottom:0}

/* offer */
.offer{background:var(--blood);color:var(--carbon);padding:clamp(88px,11vw,150px) 0}
.offer .h2{color:var(--carbon)}
.offer .body{color:#2E0B04;max-width:46ch}
.ogrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.incl{margin-top:26px;display:grid;gap:10px;font-size:15px;color:#2E0B04}
.incl b{color:var(--carbon);font-weight:600}
.form{display:grid;gap:14px;background:rgba(255,255,255,.14);padding:28px;border-radius:16px}
.fld label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;padding:13px 14px;border:1.5px solid rgba(10,10,10,.35);border-radius:10px;background:rgba(255,255,255,.7);color:var(--carbon);font:16px var(--sans)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--carbon);background:#fff}
.fld textarea{min-height:88px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.errs{font-size:14px;font-weight:600}
.thanks p{margin-top:18px;font-size:18px;color:#2E0B04;max-width:46ch}

/* footer */
.foot{padding:64px 0 72px}
.wont{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 40px;font-size:14px;line-height:1.5;color:var(--ink-2);padding-bottom:44px;border-bottom:1px solid var(--line)}
.wont b{color:var(--ink);font-weight:600}
.foot .in{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center;padding-top:32px}
.foot .tag{font-family:var(--serif);font-size:22px;letter-spacing:-.02em;color:var(--ink-2)}
.foot .tag .art{font-style:italic;color:var(--dim);text-decoration:line-through;text-decoration-color:var(--blood);text-decoration-thickness:.09em}
.foot .tag .sci{color:var(--ink);font-weight:500}
.foot .meta{font-size:13px;color:var(--dim)}
.foot .meta a:hover{color:var(--ink)}

/* reveals: opacity and a short rise. Without JS everything is visible. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .strikes .rv:nth-child(2){transition-delay:.1s}.js .strikes .rv:nth-child(3){transition-delay:.2s}.js .strikes .rv:nth-child(4){transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .strikes s::after{transform:scaleX(1);transition:none}
  .btn,.btn .arr,.panel,.steps li,.shot .frame.sm{transition:none}
  .stage-scroll{height:auto}.stage{position:static;height:auto}
  .panels{min-height:0}.panel{position:static;opacity:1;transform:none;border-top:1px solid var(--line)}
}
@media (max-width:960px){
  /* No pinned stage on small screens: the three states stack, each with its own heading. */
  .stage-scroll{height:auto;margin-top:40px}
  .stage{position:static;height:auto;display:block}
  .stage-in{display:block}
  .steps,.stage-scroll .snap{display:none}
  .panels{min-height:0}
  .panel,.panel:not(.on){position:static;opacity:1;transform:none;pointer-events:auto;padding:18px;border-top:1px solid var(--line);transition:none}
  .panel::before{content:attr(data-label);display:block;font-family:var(--serif);font-size:22px;letter-spacing:-.02em;line-height:1.15;margin-bottom:14px}
  .frame{scroll-snap-align:start}
  .turns li{grid-template-columns:1fr;gap:4px}.turns .tid{display:none}
  .row,.row.flip{grid-template-columns:1fr}.row.flip .txt{order:0}
  .pgrid,.ogrid{grid-template-columns:1fr}
  .strikes{grid-template-columns:1fr}.strikes li,.strikes li:nth-child(odd),.strikes li:nth-child(even){padding:26px 0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .wont{grid-template-columns:1fr}
  .trust .in{flex-direction:column;gap:8px}
}
@media (max-width:600px){
  .els td.ev{display:none}.els td:nth-child(2){width:80px}
}

/* ---------- click into place ---------- */
section,.trust{scroll-snap-align:start}
.hero{scroll-snap-align:start}
.row{scroll-snap-align:center}
.stage-scroll .snap{position:absolute;left:0;right:0;height:1px;scroll-snap-align:start;pointer-events:none}
.stage-scroll .snap:nth-child(1){top:0}
.stage-scroll .snap:nth-child(2){top:45vh}
.stage-scroll .snap:nth-child(3){top:90vh}
.panel{transition:opacity .5s var(--ease),transform .7s var(--settle)}
.panel:not(.on){transform:translateY(22px) scale(.97)}
.steps li{transition:border-color .4s,opacity .4s,transform .5s var(--settle)}
.steps li.on{transform:translateX(4px)}
.js .rv{transition:opacity .8s var(--ease),transform .8s var(--settle)}
@media (prefers-reduced-motion:reduce){html{scroll-snap-type:none}.panel:not(.on){transform:none}.steps li.on{transform:none}}

/* ---------- slides: each major block fills the viewport and snaps hard on desktop ---------- */
@media (min-width:961px) and (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y mandatory}
  html.no-snap{scroll-snap-type:none}
  .trust,.feat{scroll-snap-align:none}
  .foot{scroll-snap-align:end}
  .row{min-height:calc(100vh - 68px);padding:0;scroll-snap-align:start}
  .feat{padding:0}
  .said,.price,.offer{min-height:calc(100vh - 68px);display:flex;align-items:center;padding:56px 0}
  .strikes{margin-top:36px}.strikes li{padding-top:24px;padding-bottom:24px}.said .line{margin-top:36px;font-size:clamp(24px,2.6vw,36px)}
  .said .wrap,.price .wrap,.offer .wrap{width:100%}
  .hero{min-height:calc(100vh - 68px);display:flex;flex-direction:column;justify-content:center}
  .stage-scroll{margin-top:0}
}

/* ---------- legal pages ---------- */
html.no-snap{scroll-snap-type:none}
.legal{padding:clamp(48px,7vw,96px) 0 clamp(64px,8vw,120px)}
.legal .wrap{max-width:760px}
.legal h1{margin-bottom:12px}
.legal .body{max-width:none}
.legal h2{font-family:var(--serif);font-weight:500;font-size:30px;letter-spacing:-.025em;line-height:1.1;margin-top:52px}
.legal h3{font-size:17px;font-weight:600;margin-top:28px}
.legal p,.legal li{font-size:17px;line-height:1.65;color:var(--ink-2);margin-top:14px}
.legal ul{padding-left:22px;list-style:disc}
.legal li{margin-top:8px}
.legal a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.legal a:hover{text-decoration-color:var(--blood)}
.legal b{color:var(--ink);font-weight:600}