/* A readable foreground message holds while the surrounding field passes. */
[data-hero-option][hidden]{display:none!important}
.hero-visual-slot{min-width:0;width:100%;max-width:580px;justify-self:center}
.attention-pause{margin:0;width:100%;--focus:1;--gesture:1;--card-x:0px;--card-y:0px;--card-angle:0deg;--frame-inset:0px;--traffic-y:-280px;--traffic-x:0px;--card-scale:1;--card-pitch:0deg}
.attention-stage{position:relative;height:500px;isolation:isolate;overflow:hidden;perspective:1100px}
.attention-field-label{position:absolute;top:9px;left:6%;z-index:3;font-size:13px;color:#c4cdbf;letter-spacing:.01em}
.attention-field{position:absolute;inset:30px 0 0;overflow:hidden;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.attention-field:before,.attention-field:after{content:'';position:absolute;top:0;bottom:0;width:1px;background:#f7f5ef18;left:5%;transform:rotate(-9deg)}
.attention-field:after{left:auto;right:5%}
.attention-traffic{position:absolute;inset:0;transform:rotate(-9deg) translate(var(--traffic-x),var(--traffic-y))}
.attention-ghost{position:absolute;top:calc(var(--message-index)*140px);left:3%;width:88%;height:106px;border:1px solid #84927a;border-radius:13px;display:flex;gap:17px;align-items:center;padding:24px;background:#29342c;opacity:.78;box-shadow:0 5px 0 #111b15,0 10px 22px #00000019}
.attention-ghost:nth-child(even){left:8%;background:#232e27;opacity:.64}
.ghost-icon{width:29px;height:23px;border:1.5px solid currentColor;border-radius:5px;color:#bac7af;flex:none;position:relative}
.ghost-icon:after{content:'';position:absolute;width:11px;height:11px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);top:-3px;left:8px}
.ghost-lines{display:grid;gap:10px;flex:1}.ghost-lines i{height:4px;background:currentColor;border-radius:3px;width:83%;color:#a0af946b}.ghost-lines i:last-child{width:51%}
.attention-focus-card{position:absolute;inset:27% 12% auto;height:230px;background:var(--paper);color:var(--ink);border-radius:16px;padding:28px 30px;transform:translate3d(var(--card-x),var(--card-y),0) rotateX(var(--card-pitch)) rotate(var(--card-angle)) scale(var(--card-scale));transform-origin:50% 60%;box-shadow:0 1px 0 #fff inset,0 5px 0 #b7bbae,0 9px 0 #111b1555,0 24px 34px #0005,0 48px 60px #0003;border:1px solid #fff9;z-index:2;backface-visibility:hidden}
.focus-card-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}
.focus-card-header>span{font-size:13px;color:#4f5e49;letter-spacing:.01em;border-bottom:1px solid #8c987a66;padding-bottom:5px}
.focus-card-header>img{width:29px;height:29px;filter:brightness(0);opacity:.8}
.attention-focus-card>strong{display:block;font-size:clamp(25px,2.7vw,35px);font-weight:500;line-height:1.13;letter-spacing:-.045em;max-width:330px;margin-bottom:13px;text-wrap:balance}
.attention-focus-card>p{font-size:15px;line-height:1.5;color:#596453;max-width:300px;margin:0}
.focus-card-bars{display:grid;gap:8px;margin-top:24px;opacity:.2}.focus-card-bars i{height:4px;width:78%;background:var(--ink);border-radius:2px}.focus-card-bars i:last-child{width:48%}
.attention-pause .focus-brackets i{width:22px;height:22px;opacity:1}
.focus-brackets{position:absolute;inset:calc(-12px - var(--frame-inset));pointer-events:none;opacity:calc(.25 + var(--focus)*.75)}
.focus-brackets i{position:absolute;width:18px;height:18px;border-color:var(--paper);border-style:solid;border-width:0;opacity:.8}
.focus-brackets i:nth-child(1){top:0;left:0;border-top-width:1.5px;border-left-width:1.5px;border-radius:5px 0 0}
.focus-brackets i:nth-child(2){top:0;right:0;border-top-width:1.5px;border-right-width:1.5px;border-radius:0 5px 0 0}
.focus-brackets i:nth-child(3){bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px;border-radius:0 0 0 5px}
.focus-brackets i:nth-child(4){bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px;border-radius:0 0 5px}
.attention-pause>figcaption{font-size:15px;line-height:1.6;color:#bdc6b9;max-width:410px;margin:0 auto;text-align:center;text-wrap:balance}
.comparison-motion{position:relative;height:148px;margin:0 0 21px;overflow:hidden;border-bottom:1px solid #19201c15;--focus:1;--traffic-y:-45%;--frame-inset:0px}
.comparison-motion .mini-traffic{position:absolute;inset:0 8%;transform:translateY(var(--traffic-y));color:#19201c}
.mini-note{position:absolute;left:0;right:0;top:10px;height:57px;padding:13px 16px;border:1px solid currentColor;border-radius:8px;opacity:.3;display:flex;align-items:center;gap:12px}
.mini-note:nth-child(2){top:80px}.mini-note:nth-child(3){top:150px}.mini-note:nth-child(4){top:220px}
.mini-note>.icon{width:19px;height:19px;flex:none}.mini-bars{display:grid;gap:7px;flex:1}.mini-bars i{display:block;height:3px;background:currentColor;opacity:.5;border-radius:2px;width:90%}.mini-bars i:last-child{width:56%}
.comparison-motion.is-relevant{border-color:#f7f5ef20}
.comparison-motion{mask-image:linear-gradient(transparent,#000 12%,#000 87%,transparent)}
.comparison-motion.is-relevant .mini-traffic{color:var(--paper);opacity:.3}
.mini-focus{position:absolute;top:40px;left:9%;right:9%;height:64px;background:var(--paper);border-radius:8px;padding:17px 18px;display:flex;gap:15px;align-items:center;transform:translateY(calc(8px*(1 - var(--focus))));box-shadow:0 9px 15px #0002;color:var(--ink)}
.mini-focus>img{width:23px!important;height:23px!important;filter:brightness(0);margin:0!important;flex:none}
.mini-focus .focus-brackets{inset:calc(-7px - var(--frame-inset)/3)}
.mini-focus .focus-brackets i{width:10px;height:10px}
.approach-comparison thead th{vertical-align:bottom;padding-top:24px}
.approach-comparison thead th>span{display:block}
.attention-problem{padding:25px;overflow:hidden}
.attention-problem-art{height:156px;margin:0 0 25px;border-bottom:1px solid #f7f5ef20;--gesture:1;--signal-opacity:.3;--line-progress:0}
.attention-problem-art>svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--paper);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.attention-problem-art>svg{height:calc(100% - 32px)}
.problem-art-labels{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#bdc6b7;padding:0 5px 13px;line-height:1.3}
.problem-muted{opacity:.26}.problem-middle{opacity:.5}.problem-selected{fill:#f7f5ef08;stroke:#f7f5ef7a}
.wrong-bracket{transform:translateX(calc(6px * var(--gesture)));opacity:calc(.5 + var(--gesture)*.4)}
.timing-guide{stroke-dasharray:1;stroke-dashoffset:var(--line-progress);opacity:.65}
.timing-message{transform:translateX(calc(10px * var(--gesture)))}
.interest-source{opacity:var(--signal-opacity)}
.handoff-trace{stroke-dasharray:1;stroke-dashoffset:var(--line-progress)}
.interest-stop{transform:translateX(calc(53px * var(--gesture)));opacity:calc(1 - .4*var(--gesture))}
@media(min-width:851px) and (max-width:1100px){.attention-stage{height:460px}.attention-focus-card{padding:24px;height:222px;inset-inline:10%}.attention-focus-card>strong{font-size:28px}.attention-focus-card>p{font-size:14px}.focus-card-header{margin-bottom:20px}}
@media(max-width:850px){.hero-visual-slot{max-width:570px}.attention-stage{height:480px}.attention-focus-card>strong{font-size:35px}.attention-problem{display:grid;grid-template-columns:210px 1fr;column-gap:30px;padding:26px}.attention-problem-art{grid-row:1/3;height:160px;margin:0;align-self:center;border-bottom:0;border-right:1px solid #f7f5ef20;padding-right:24px}.attention-problem>p{grid-column:2}.attention-problem h3{align-self:end}}
@media(max-width:600px){.attention-stage{height:398px}.attention-focus-card{height:200px;padding:21px 23px;inset:24% 10% auto}.focus-card-header{margin-bottom:19px}.focus-card-header>span{font-size:12px}.focus-card-header>img{width:25px;height:25px}.attention-focus-card>strong{font-size:28px;margin-bottom:11px}.attention-focus-card>p{font-size:13px}.attention-pause>figcaption{font-size:14px;max-width:340px}.attention-ghost{height:98px;padding:19px;gap:12px}.ghost-icon{width:25px;height:21px}.ghost-icon:after{width:9px;height:9px;left:7px;top:-2px}.attention-problem{display:block;padding:24px}.attention-problem-art{height:157px;max-width:320px;border-right:0;border-bottom:1px solid #f7f5ef20;margin:0 auto 25px;padding:0 5px}.attention-problem h3{margin-bottom:14px}.comparison-motion{height:116px;margin-bottom:17px}.approach-comparison thead th{display:block;min-width:0;padding:18px 13px}.mini-note{padding:12px 10px;gap:8px;height:48px}.mini-note>.icon{width:15px;height:15px}.mini-bars{gap:5px}.mini-focus{left:8%;right:8%;top:30px;height:54px;padding:12px 10px;gap:8px}.mini-focus>img{width:19px!important;height:19px!important}}
@media(max-width:360px){.attention-stage{height:368px}.attention-focus-card{height:190px;padding:20px;inset-inline:9%}.attention-focus-card>strong{font-size:25px}.focus-card-header{margin-bottom:15px}.focus-card-header>span{font-size:11px}.attention-focus-card>p{font-size:12px}.attention-pause>figcaption{font-size:13px}}
@media(prefers-reduced-motion:reduce){.attention-pause *,.comparison-motion *,.attention-problem-art *{animation:none!important;transition:none!important}}