/* Local aesthetic study. Copy and established interactions stay intact. */
.video-hero .hero.sec{padding-block:72px}
.video-hero .hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(48px,4.5vw,64px);align-items:center;max-width:1240px}
.video-hero .hero-grid>div:first-child{max-width:470px}
.video-hero .hero h1{font-size:clamp(48px,4.5vw,64px);line-height:1.07;letter-spacing:-.04em;margin:22px 0 26px}
.video-hero .hero .sub{font-size:18px;line-height:1.65;max-width:43ch}
.hero .hero-actions{margin-top:28px}
.hero .hero-trust{font-size:12px;margin-top:18px;gap:20px}
.hero .kicker{font-size:11px;letter-spacing:.12em}
#hero-autoplay{width:100%;max-width:none}
#hero-autoplay .hero-video-shell{border:1px solid #ececee;border-radius:20px;box-shadow:0 12px 30px -26px #17221c30;background:#fff}
#hero-autoplay video{border-radius:19px 19px 0 0}
#hero-autoplay .hero-video-controls{border-radius:0 0 19px 19px;padding:4px 12px;border-top:1px solid #f4f4f5;gap:8px}
#hero-autoplay .hero-video-controls button{font-size:12px;min-height:44px;padding:8px 12px;background:none;border-color:transparent}
#hero-autoplay .hero-video-controls button:hover{background:#f6f6f7}
#hero-autoplay .video-time{font-size:11px;color:#777781}
#hero-autoplay .video-progress-rail{top:-1px;left:20px;right:20px;height:2px}
/* Two open columns, with the total as the single strongest number. */
#what:has(.quiet-example){padding-block:88px;background:#fff}
#what:has(.quiet-example)>.container{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,88px);align-items:start;max-width:1160px}
#what h2{font-size:clamp(36px,3.1vw,40px);line-height:1.17;letter-spacing:-.035em;margin:20px 0}
#what h2.tt i{font-size:.72em;line-height:1.35;margin-top:12px;color:#777781}
#what .lead{font-size:18px;line-height:1.7;max-width:42ch}
#what .kicker{font-size:11px;letter-spacing:.12em}
#what .quiet-example{max-width:480px}
#what .quiet-example .match{font-size:21px;margin:0 0 20px}
#what .quiet-example .stakes{gap:14px}
#what .quiet-example .bet{padding:20px;border-radius:16px;background:#fafafa;border-color:#ebebee;box-shadow:none}
#what .quiet-example[data-selected=lakers] [data-bet=lakers],#what .quiet-example[data-selected=celtics] [data-bet=celtics]{background:#fbfcfb;border-color:#d6e2d9}
#what .quiet-example .bet img{width:104px;height:34px;margin-bottom:22px}
#what .quiet-example .bet-line{font-size:16px}
#what .quiet-example .odds{font-size:14px}
#what .quiet-example .stake{margin-top:18px}
#what .quiet-example .stake>span{font-size:13px}
#what .quiet-example .stake strong{font-size:27px;margin-top:5px;letter-spacing:-.025em}
#what .quiet-example .winner-row{margin-top:24px;gap:12px;align-items:center;flex-direction:row}
#what .quiet-example .winner-row>span{font-size:15px}
#what .quiet-example .choices{width:230px}
#what .quiet-example .choices button{font-size:15px;min-height:46px}
#what .quiet-example .out{margin-top:30px;padding-bottom:24px;border-color:#eeeef0}
#what .quiet-example .out>span{font-size:16px}
#what .quiet-example .out strong{font-size:56px;margin-top:10px;letter-spacing:-.035em;line-height:1.12}
#what .quiet-example .explanation{font-size:15px;line-height:1.65;margin:20px 0 12px}
#what .quiet-example details{font-size:15px}
/* One steady demonstration surface; its content changes without moving the frame. */
#how{background:#fafafb;padding-block:88px}
#how .sec-head h2{font-size:clamp(36px,3.1vw,40px);line-height:1.17}
#how .sec-head{margin-bottom:22px}
#how .setup-note{font-size:16px;line-height:1.6}
#how .scroll-grid{gap:clamp(40px,5vw,70px)}
#how .scroll-chapter h3{font-size:clamp(32px,2.8vw,36px);line-height:1.18;letter-spacing:-.03em;margin:18px 0 22px}
#how .scroll-chapter p{font-size:18px;line-height:1.65;max-width:40ch}
#how .scroll-chapter>small{font-size:14px;line-height:1.6}
#how .scroll-chapter .kicker{font-size:11px}
#how .scroll-stage{border:1px solid #e7e8e9;border-radius:20px;box-shadow:0 16px 40px -36px #15271c30;background:#fff;top:max(112px,calc(50vh - 250px))}
#how .journey-context{padding:20px 24px 16px;border-bottom:1px solid #f0f0f2;background:transparent}
#how .journey-context small{font-size:9px;letter-spacing:.06em;color:#81818a}
#how .journey-context strong{font-size:20px;margin-top:6px}
#how .journey-state{font-size:11px;color:#81818a}
#how .stage-tabs{border:0;background:#f5f5f6;padding:4px;margin:18px auto 0;box-shadow:none}
#how .stage-tabs button{font-size:13px;padding:9px 16px;min-height:44px;color:#73737e;transition:background .25s,color .25s}
#how .stage-tabs button[aria-selected=true]{background:#fff;color:#292a30;box-shadow:0 1px 3px #00000008}
#how .stage-tabs button[aria-selected=true]:before{display:none}
#how .stage-window{display:grid;height:auto!important;min-height:410px;transition:none;overflow:hidden}
#how .stage-panel{grid-area:1/1;position:relative;inset:auto;min-width:0;padding:24px;transform:translateY(8px);visibility:hidden;opacity:0;transition:opacity .28s ease,transform .32s ease,visibility .32s;align-self:stretch}
#how .stage-panel.active{visibility:visible;opacity:1;transform:translateY(0)}
#how .scan-network{height:290px;flex:none}
#how .scan-node{width:100px;height:66px;padding:9px;border-radius:14px;border-color:#f0f0f2;background:#fff;box-shadow:0 4px 18px -15px #14211b30}
#how .scan-node img{max-height:44px}
#how .scan-center{width:66px;height:66px;border-radius:18px;border-color:#edf0ed;box-shadow:0 0 0 8px #ffffffb0}
#how .scan-center img{width:38px;height:38px}
#how .scan-wire{stroke:#e4e6e5;stroke-width:1}
#how .scan-pulse{stroke:#4aaf70;stroke-width:1.8;animation-iteration-count:infinite}
#how .found-opportunity{background:transparent;border:0;box-shadow:none;padding:16px 0 4px;font-size:12px}
#how .stake-setting{font-size:15px;margin-bottom:20px}
#how .stake-setting>span{border-color:#e7e8eb;border-radius:12px;box-shadow:none}
#how .prefill-slips{gap:14px}
#how .prefill-slip{padding:20px 16px;border-radius:16px;background:#fafafa;border-color:#eeeef0;box-shadow:none}
#how .prefill-slip img{width:100px;height:34px;margin-bottom:18px}
#how .prefill-slip h4{font-size:16px;line-height:1.35}
#how .prefill-slip>span{font-size:14px}
#how .prefill-slip>small{font-size:12px;border:0;padding-top:0;margin-top:22px}
#how .prefill-slip>strong{font-size:28px;line-height:1.3;margin-top:5px;font-variant-numeric:tabular-nums}
#how .prefill-slip .ready-label{font-size:11px;color:#778079;margin-top:12px}
#how .stage-caption{font-size:14px;line-height:1.6;margin:20px 0 0;padding:0;color:#73737e}
#how .review-title{font-size:25px;text-align:center;margin:10px 0 24px;letter-spacing:-.02em}
#how .review-totals{font-size:13px;color:#7b7b85}
#how .review-totals span{border-color:#f1f1f3;padding:10px 0}
#how .either-profit{margin-top:28px;gap:16px}
#how .either-profit>div{background:transparent;border:0;border-radius:0;padding:8px 0}
#how .either-profit>div+div{border-left:1px solid #ececef}
#how .either-profit span{font-size:13px;color:#73737e}
#how .either-profit strong{font-size:34px;font-weight:500;color:#292a30;margin-top:10px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#how .profit-basis{font-size:13px;margin-top:24px}
@media(max-width:1000px) and (min-width:761px){
 .video-hero .hero h1{font-size:48px}
 .video-hero .hero-grid{gap:36px}
 #what:has(.quiet-example)>.container{gap:36px}
 #what .quiet-example .bet{padding:18px 14px}
 #what .quiet-example .winner-row{flex-direction:column;align-items:stretch}
 #what .quiet-example .choices{width:100%}
 #how .stage-panel{padding:20px 16px}
 #how .scan-node{width:80px;height:58px;padding:7px}
 #how .either-profit strong{font-size:29px}
}
@media(max-width:760px){
 .video-hero .hero.sec{padding-block:44px 38px}
 .video-hero .hero-grid{display:block}
 .video-hero .hero-grid>div:first-child{max-width:560px}
 .video-hero .hero h1,.video-hero:has(#hero-autoplay:not([hidden])) .hero h1{font-size:clamp(42px,11vw,46px);line-height:1.09;letter-spacing:-.035em;margin:20px 0 24px}
 .video-hero .hero .sub,.video-hero:has(#hero-autoplay:not([hidden])) .hero .sub{font-size:17px;line-height:1.65;max-width:43ch}
 .hero .hero-trust{font-size:12px}
 .video-hero:has(#hero-autoplay:not([hidden])) .hero .kicker{font-size:11px}
 .video-hero:has(#hero-autoplay:not([hidden])) .hero-actions .btn{font-size:16px;padding:14px 22px;min-height:48px}
 .video-hero:has(#hero-autoplay:not([hidden])) .hero-trust{font-size:12px;gap:18px}
 .mobile-film-section{padding-block:34px 42px;background:#fafafb}
 .mobile-film-section h2{font-size:28px;margin-bottom:24px}
 #hero-autoplay{width:min(100%,330px,38svh);margin:auto}
 #hero-autoplay .hero-video-controls{padding:4px 8px;gap:2px}
 #hero-autoplay .hero-video-controls button{padding:8px;font-size:12px}
 #what:has(.quiet-example){padding-block:58px}
 #what:has(.quiet-example)>.container{grid-template-columns:1fr;gap:38px}
 #what h2{font-size:32px;line-height:1.18}
 #what h2.tt i{font-size:23px;line-height:1.35;margin-top:12px}
 #what .lead{font-size:17px;line-height:1.65}
 #what .quiet-example .match{font-size:21px;margin-bottom:20px}
 #what .quiet-example .stakes{gap:12px}
 #what .quiet-example .bet{padding:18px 14px}
 #what .quiet-example .bet img{width:96px;height:32px;margin-bottom:20px}
 #what .quiet-example .bet-line{font-size:15px}
 #what .quiet-example .odds{font-size:13px}
 #what .quiet-example .stake{margin-top:18px}
 #what .quiet-example .stake strong{font-size:25px}
 #what .quiet-example .winner-row{margin-top:24px;gap:12px}
 #what .quiet-example .choices{width:210px;max-width:68%}
 #what .quiet-example .out{margin-top:30px;padding-bottom:24px}
 #what .quiet-example .out strong{font-size:48px;margin-top:10px}
 #what .quiet-example .explanation{font-size:15px;margin-top:20px}
 #how{padding-block:58px}
 #how .sec-head h2{font-size:32px}
 #how .setup-note{font-size:15px}
 #how .mobile-step-copy h3{font-size:26px;line-height:1.2;letter-spacing:-.025em;margin:12px 0}
 #how .mobile-step-copy p{font-size:16px;line-height:1.55}
 #how .mobile-step-copy>small{font-size:12px;margin-top:8px}
 #how .mobile-how-copy{margin-bottom:20px}
 #how .scroll-stage{top:auto;border-radius:20px}
 #how .journey-context{padding:14px 16px}
 #how .journey-context strong{font-size:19px;margin:0}
 #how .stage-tabs{margin:14px auto 0}
 #how .stage-tabs button{font-size:12px;padding:9px 12px}
 #how .stage-window{height:auto!important;min-height:350px}
 #how .stage-panel{padding:20px 14px}
 #how .scan-network{height:238px}
 #how .scan-node{width:76px;height:52px;padding:6px;border-radius:12px}
 #how .scan-node img{max-height:36px}
 #how .scan-center{width:54px;height:54px;padding:8px;border-radius:16px}
 #how .scan-center img{width:32px;height:32px}
 #how .found-opportunity{padding-top:18px}
 #how .stake-setting{font-size:14px;margin-bottom:18px;gap:12px}
 #how .stake-setting>span{padding:8px 10px}
 #how .stake-setting input{width:65px}
 #how .prefill-slips{gap:10px}
 #how .prefill-slip{padding:16px 12px;border-radius:14px}
 #how .prefill-slip img{width:88px;height:29px;margin-bottom:14px}
 #how .prefill-slip h4{font-size:14px}
 #how .prefill-slip>span{font-size:13px}
 #how .prefill-slip>small{margin-top:18px;font-size:12px}
 #how .prefill-slip>strong{font-size:25px}
 #how .prefill-slip .ready-label{font-size:11px;margin-top:10px}
 #how .stage-caption{font-size:13px;margin-top:18px}
 #how .review-title{font-size:24px;margin:12px 0 22px}
 #how .either-profit{gap:10px;margin-top:26px}
 #how .either-profit strong{font-size:29px}
 #how .profit-basis{font-size:13px;line-height:1.6}
}
@media(max-width:360px){
 #what .quiet-example .bet{padding:16px 12px}
 #what .quiet-example .stake strong{font-size:23px}
 #what .quiet-example .winner-row{flex-direction:column;align-items:stretch}
 #what .quiet-example .choices{max-width:none;width:100%}
 #how .scan-node{width:64px;height:48px}
 #how .prefill-slip{padding:14px 9px}
 #how .prefill-slip>strong{font-size:23px}
 #how .either-profit strong{font-size:26px}
}
@media(prefers-reduced-motion:reduce){#how .stage-panel{transition:none;transform:none}}

/* Second pass: a consistent type hierarchy and room for every tap target. */
#what:has(.quiet-example)>.container{align-items:center;gap:clamp(44px,5vw,72px)}
#what h2{font-size:36px;line-height:1.2;letter-spacing:-.025em;max-width:15ch}
#what h2.tt i{font-family:var(--f-body);font-size:18px;line-height:1.6;letter-spacing:0;font-weight:400;margin-top:18px}
#what .lead{font-size:17px;line-height:1.75;margin-top:20px}
#what .quiet-example .match{font-family:var(--f-body);font-size:18px;font-weight:500;letter-spacing:0}
#what .quiet-example .bet{border-color:#e9ebea;background:#fafbfa}
#what .quiet-example .stake strong{font-size:26px;letter-spacing:-.01em}
#what .quiet-example .out strong{font-size:52px;letter-spacing:-.025em}
#what .quiet-example .explanation{font-size:15px;max-width:43ch}
.mobile-linear-steps{display:none}
#how>.container{position:relative}
@media(max-width:760px){
 .sec>.container,.hero>.container{padding-inline:24px}
 #what:has(.quiet-example){padding-block:48px 56px}
 #what:has(.quiet-example)>.container{gap:30px;align-items:stretch}
 #what h2{font-size:30px;line-height:1.2;max-width:15ch;margin:16px 0}
 #what h2.tt i{font-size:17px;line-height:1.55;margin-top:14px;max-width:30ch}
 #what .lead{font-size:16px;line-height:1.65;margin-top:16px}
 #what .kicker{font-size:10px;letter-spacing:.1em;line-height:1.6}
 #what .quiet-example .match{font-size:18px;margin-bottom:16px}
 #what .quiet-example .stakes{grid-template-columns:1fr;gap:12px}
 #what .quiet-example .bet{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;row-gap:12px;align-items:center;padding:18px;border-radius:14px}
 #what .quiet-example .bet img{grid-column:1;grid-row:1;width:100px;height:28px;margin:0}
 #what .quiet-example .bet-line{grid-column:1;grid-row:2;font-size:14px;justify-content:flex-start;gap:12px}
 #what .quiet-example .odds{font-size:13px}
 #what .quiet-example .stake{grid-column:2;grid-row:1 / span 2;margin:0;text-align:right}
 #what .quiet-example .stake>span{font-size:12px;color:#747780}
 #what .quiet-example .stake strong{font-size:25px;line-height:1.3;margin-top:6px;letter-spacing:-.02em}
 #what .quiet-example .winner-row{flex-direction:column;align-items:stretch;gap:12px;margin-top:26px}
 #what .quiet-example .winner-row>span{font-size:14px}
 #what .quiet-example .choices{width:100%;max-width:none}
 #what .quiet-example .choices button{font-size:15px;min-height:46px}
 #what .quiet-example .out{margin-top:26px;padding-bottom:22px}
 #what .quiet-example .out>span{font-size:15px}
 #what .quiet-example .out strong{font-size:46px;margin-top:9px;letter-spacing:-.025em}
 #what .quiet-example .explanation{font-size:15px;margin:18px 0 10px;line-height:1.6}
 #what .quiet-example summary{min-height:48px}
 #how .scroll-grid{height:calc(var(--mobile-scene-height,650px) + 300svh)}
 #how .mobile-how-copy .mobile-step-copy{transform:translateY(10px);transition:opacity .3s ease,transform .35s ease,visibility .35s}
 #how .mobile-how-copy .mobile-step-copy.active{transform:translateY(0)}
 #how .mobile-how-copy{margin-bottom:16px}
 #how .mobile-step-copy h3{font-size:25px;line-height:1.22;margin:10px 0 12px}
 #how .mobile-step-copy p{font-size:15px;line-height:1.6}
 #how .stage-window{min-height:320px}
 #how .journey-context{padding:12px 16px}
 #how .stage-tabs{margin-top:10px}
 #how .stage-panel{padding:16px 14px}
 #how .scan-network{height:222px}
 #how .prefill-slip{padding:14px 12px}
 #how .prefill-slip img{height:26px;margin-bottom:10px}
 #how .prefill-slip>small{margin-top:14px}
 #how .prefill-slip .ready-label{margin-top:8px}
 #how .stage-caption{margin-top:14px}
 #how.how-linear .scroll-grid{position:absolute;left:24px;right:24px;width:auto;visibility:hidden;pointer-events:none;height:auto!important}
 #how.how-linear .mobile-how-scene{position:relative;top:auto}
 #how.how-linear .mobile-linear-steps{display:grid;gap:64px}
 #how .mobile-linear-step{scroll-margin-top:92px;min-width:0}
 #how .mobile-linear-step .mobile-step-copy{visibility:visible;opacity:1;transition:none;margin-bottom:24px}
 #how .linear-stage{position:relative;top:auto!important;margin:0}
 #how .linear-stage .stage-window{min-height:0}
 #how .linear-stage .stage-panel{transform:none;transition:none}
 #how .mobile-linear-step.step-visible .mobile-step-copy{animation:mobile-step-arrive .4s ease-out both}
 #faq{padding-block:56px}
 #faq .faq-list{padding:0;border:1px solid #e9e9ed;border-radius:18px;overflow:hidden;background:#fff}
 #faq details.clean-faq{padding:0;margin:0;border-bottom:1px solid #ededf0}
 #faq .clean-faq summary{font-family:var(--f-display);font-size:18px;line-height:1.45;padding:22px!important;gap:20px;align-items:center;letter-spacing:-.01em}
 #faq .faq-mark{width:18px;height:18px;min-width:18px;flex:0 0 18px;margin:0}
 #faq .clean-faq-answer{padding:0 22px 24px!important}
 #faq .clean-faq-answer p{font-size:16px;line-height:1.7}
 #pricing .tier{padding:26px 24px}
 #pricing .tier-features{line-height:1.65}
 #get .stack-cta{padding:38px 24px}
 #signup .cta-form{gap:12px}
 #signup .cta-form input[type=email]{min-width:0;width:100%;padding:14px 16px}
 #signup .alerts-card{padding-inline:0}
 footer .container{padding-inline:24px}
 footer nav{column-gap:24px;row-gap:14px}
}
@media(max-width:360px){
 .sec>.container,.hero>.container{padding-inline:20px}
 #what .quiet-example .bet{padding:16px;column-gap:12px}
 #what .quiet-example .bet img{width:90px}
 #what .quiet-example .stake strong{font-size:23px}
 #how.how-linear .scroll-grid{left:20px;right:20px}
 #faq .clean-faq summary{padding:20px!important;font-size:17px;gap:16px}
 #faq .clean-faq-answer{padding:0 20px 22px!important}
}
@keyframes mobile-step-arrive{from{opacity:.6;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#how .mobile-linear-step.step-visible .mobile-step-copy{animation:none}#how .mobile-how-copy .mobile-step-copy{transform:none;transition:none}}