/* Motion is the hero. The frame stays still; the science changes inside it. */
.hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto auto;gap:0 55px;align-items:start;padding-block:48px 54px}
.hero-copy{grid-column:1;grid-row:1;align-self:end;padding-top:20px;padding-bottom:0}
.hero-copy h1{font-size:clamp(48px,4.8vw,69px)}
.hero-conversion{grid-column:1;grid-row:2;align-self:start;padding-bottom:20px}
.hero-mobile-line{display:none}
.hero-live{grid-column:2;grid-row:1/span 2;transform:rotate(.5deg);padding:16px 22px 14px;overflow:hidden}
.live-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:9px;gap:20px}
.live-label{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.live-label i{width:5px;height:5px;border-radius:50%;background:var(--red)}
.live-toolbar{display:flex;align-items:center;gap:10px}
.live-toolbar button{background:var(--sheet);border:1px solid var(--line);border-radius:4px;font-family:var(--mono);font-size:10px;min-height:30px;padding:5px 9px;color:var(--muted)}
.live-toolbar #hero-xray[aria-pressed="true"]{border-color:var(--blue);color:var(--blue);background:#eef3fb}
#hero-motion-toggle{width:31px;padding:5px}
#hero-motion-toggle svg{height:17px;width:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.live-question{font-size:23px;line-height:1.4;letter-spacing:-.03em;margin-top:16px;text-align:left}
.hero-scene{width:100%;aspect-ratio:332/248;position:relative;margin-top:4px}
.hero-scene>.scene5{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.hero-scene .sun,.hero-scene .wh{touch-action:none}
.hero-scene .measure,.hero-scene .stamp3,.hero-scene .spulse,.hero-scene .wpulse{display:none}
.hero-scene text,.hero-scene .sunArrow,.hero-scene .bendArrow,.hero-scene .noteArrow,.hero-scene .puddle,.hero-scene .fan,.hero-scene .photons,.hero-scene .inray,.hero-scene .room-light{pointer-events:none;user-select:none}
.hero-scene .hit{pointer-events:all}
.hero-scene .sun:focus-visible,.hero-scene .wh:focus-visible,.hero-scene .tap:focus-visible{outline:none;filter:drop-shadow(0 0 2px #5543c3)}
.hero-live-caption{display:flex;align-items:flex-start;gap:14px;padding-top:15px;border-top:1px solid var(--line);min-height:85px}
.live-step{font-size:11px;color:var(--violet);white-space:nowrap;padding-top:5px}
.hero-live-caption strong{display:block;font-size:18px;font-weight:400;line-height:1.45}
.hero-live-caption p{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
.live-outcome{margin-left:auto;font-size:22px;white-space:nowrap;align-self:center;transform:rotate(-5deg)}
.hero-live-controls{display:flex;align-items:center;gap:12px;padding-top:6px}
.live-beats{display:flex;align-items:center;gap:5px;flex:1}
.live-beats button{width:27px;height:30px;border:0;background:none;padding:0;position:relative;color:var(--muted);font-family:var(--mono);font-size:11px;cursor:pointer}
.live-beats button::after{content:"";position:absolute;left:3px;right:3px;bottom:0;height:2px;background:var(--line)}
.live-beats button[aria-pressed="true"]{color:var(--violet)}
.live-beats button[aria-pressed="true"]::after{background:var(--violet)}
.live-try{border:0;background:transparent;font-size:12px;padding:8px 0;color:var(--blue);white-space:nowrap}
.hero-manual-tools{border-top:1px dashed var(--line);padding-top:13px;margin-top:12px}
.hero-manual-tools label{display:flex;align-items:center;gap:14px;font-size:12px}
.hero-manual-tools input{flex:1;min-width:30px;accent-color:var(--blue)}
.hero-manual-tools output{font-family:var(--mono);width:43px;white-space:nowrap}
.hero-manual-tools p{font-size:11px;color:var(--muted);margin-top:7px}
/* The product panels now demonstrate the experience at a readable scale. */
.product-panel{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);min-height:550px}
.product-copy{padding:43px 37px 43px 40px}
.product-copy h3{font-size:29px}
.product-copy>p:not(.eyebrow):not(.hand){margin-top:18px;font-size:14px;line-height:1.9}
.product-visual.product-motion{margin:24px 24px 24px 0;min-width:0;padding:18px 20px;background-color:var(--sheet);justify-content:center}
@media(min-width:1500px){.hero{padding-block:63px 65px}}
@media(max-width:1100px){
 .hero{gap:0 33px;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}
 .hero-copy h1{font-size:55px}.hero-lead{font-size:18px}.hero-description{font-size:14px}
 .hero-live{padding:14px 17px 13px}.live-question{font-size:21px}.hero-live-caption strong{font-size:16px}.hero-live-caption p{font-size:11px}.live-outcome{font-size:20px}.live-step{font-size:10px}
 .product-copy{padding:30px 28px}.product-copy h3{font-size:26px}.product-visual.product-motion{padding:14px;margin-right:18px}
}
@media(max-width:820px){
 .hero{display:grid;grid-template-columns:1fr 1.14fr;gap:0 24px;padding-block:36px 44px}
 .hero-copy h1{font-size:45px}.hero-copy .eyebrow{font-size:9px}.hero-lead{font-size:17px;line-height:1.65}.hero-description{font-size:12px;max-width:none}
 .hero-live{padding-inline:13px}.live-question{font-size:18px}.live-heading{gap:8px}.live-label{font-size:9px;gap:5px}.live-toolbar{gap:5px}.live-toolbar button{font-size:9px;padding:4px 6px;min-height:27px}
 .hero-live-caption{gap:9px;min-height:90px}.hero-live-caption strong{font-size:15px}.live-outcome{display:none}.live-beats{gap:2px}.live-beats button{width:22px}.live-try{font-size:10px}
 .hero-conversion .download-button{font-size:13px;padding-inline:14px;gap:8px}.hero-conversion .download-button .small-arrow{display:none}.hero-conversion .availability{font-size:10px}
 .product-panel{grid-template-columns:1fr;min-height:0}.product-copy{padding:29px 32px}.product-copy>p:not(.eyebrow):not(.hand){max-width:unset}.feature-list{margin:20px 0}
 .product-visual.product-motion{margin:0 24px 24px;padding:19px 26px}.product-note{margin-top:20px}
}
@media(max-width:600px){
 .hero{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:17px;padding-block:23px 33px}
 .hero-copy{grid-column:1;grid-row:1;align-self:start;padding:0 4px}.hero-copy .eyebrow{font-size:10px;margin-bottom:11px;letter-spacing:.03em}
 .hero-copy h1{font-size:39px;line-height:1.15;letter-spacing:-.06em}
 .hero-copy h1 span{display:inline}.hero-copy h1 .underlined{display:inline-block;margin-top:0;margin-left:7px}.underlined::after{height:5px;bottom:0}
 .hero-lead,.hero-description{display:none}.hero-mobile-line{display:block;font-size:12px;margin-top:11px;color:var(--muted)}
 .hero-live{grid-column:1;grid-row:2;margin:0 2px;transform:rotate(.3deg);padding:11px 13px 10px}
 .hero-live::before{left:9px}.live-heading{padding-bottom:6px}.live-question{font-size:17px;line-height:1.4;margin-top:11px;letter-spacing:-.035em}
 .hero-scene{margin-top:2px}.hero-live-caption{padding-top:11px;gap:9px;min-height:66px}.hero-live-caption strong{font-size:14px}.hero-live-caption p{font-size:10px;line-height:1.45;margin-top:4px}.live-step{font-size:9px;padding-top:3px}
 .hero-live-controls{padding-top:3px;gap:10px}.live-beats{gap:4px}.live-beats button{width:22px;height:28px;font-size:10px}.live-try{font-size:11px;min-height:32px}
 .hero-conversion{grid-column:1;grid-row:3;padding:0 3px}.hero-actions{margin:0;align-items:stretch;gap:8px}.hero-conversion .download-button{font-size:14px;min-height:50px;gap:12px;padding:12px 16px}.hero-conversion .download-button .small-arrow{display:block;width:17px;margin-left:auto}.hero-conversion .download-button span{flex:1;text-align:left}.hero-conversion .availability{text-align:center;font-size:10px}.hero-explore{display:none}
 .hero-manual-tools label{font-size:11px;gap:9px}.hero-manual-tools p{font-size:10px}
 .product-copy{padding:27px 22px}.product-copy h3{font-size:26px}.product-visual.product-motion{padding:12px;margin:0 12px 17px}.product-copy .feature-list{font-size:12px}
}
@media(max-width:370px){
 .hero-copy h1{font-size:36px}.hero-mobile-line{font-size:11px}.hero-live{padding-inline:11px}.live-question{font-size:16px}.live-toolbar button{font-size:8px}.live-label{font-size:8px}.hero-live-caption strong{font-size:13px}.hero-live-caption p{font-size:10px}.live-beats{gap:2px}.live-try{font-size:10px}
}
@media(max-width:820px){
 .product-panel .product-copy{grid-row:2}
 .product-panel .product-visual.product-motion{grid-row:1;margin:22px 24px 0}
}
@media(max-width:600px){
 .product-panel .product-visual.product-motion{margin:16px 12px 0}
 .product-panel .product-copy{padding-top:24px}
}