/* Readable marketing typography, with a softly lit, brand-green demo treatment. */
@layer refinements {
  .form-status{font-size:15px;line-height:1.65}
  .form-status.is-success{padding:24px;border:1px solid #cfefa54d;border-radius:20px;background:#cfefa50d;color:#e3f3d1;margin-top:26px}
  .rive-eyes{position:absolute;inset:-5.56%;width:111.12%;height:111.12%;z-index:2;pointer-events:none}
  .rive-ready .mascot-face{visibility:hidden}
  .rive-bubble{position:absolute;pointer-events:none;z-index:1}
  .rive-bubble-ready .speech-bubble{background:transparent;border-color:transparent;box-shadow:none;padding-top:26px;padding-bottom:10px}
  .rive-bubble-ready .speech-bubble:before{display:none}
  .signup-art{min-width:0;align-self:center}
  .signup-art img{display:block;width:100%;max-width:340px;height:auto;aspect-ratio:1;object-fit:contain;margin:auto}
  .hero-art{flex-direction:column;padding-bottom:0}
  .hero-icon{flex-shrink:0;width:min(90%,510px);max-width:100%}
  .hero-art .orbit{width:78%;height:54%;top:12%}
  .art-caption{position:relative;inset:auto;display:block;margin-top:48px;font-size:14px;line-height:1.5;color:#aab9ac;text-align:center}
  .thought-after{bottom:100px}
  .eyebrow,.step-label,.feature-index{font-size:13px;line-height:1.6}
  .hero-detail,.demo-instructions>p,.section-heading>p:last-child,.heading-row>p:last-child,.feature-card p,.scene-copy p,.story-copy p,.signup-copy>p,.faq details p{font-size:16px;line-height:1.75}
  .demo-instructions>p{max-width:370px}
  .example-button,.faq summary,.text-link,.site-header nav,.button,.hero-actions .button,.hero-actions .text-link{font-size:15px}
  .example-button small,.intro-strip,.intro-strip>div,.scene-options button,.newsletter-choice,.footer-top>p,.footer-top>.text-link,.footer-bottom,.fine-print,.hero-copy>.fine-print,.signup-form .fine-print{font-size:13px;line-height:1.6}
  .availability,.thought{font-size:13px}
  .email-row input,.email-row .button{font-size:16px}
  .newsletter-choice input{width:18px;height:18px}
  .scene-options{flex-wrap:wrap}
  .scene-feature{grid-template-columns:1fr 1fr}
  .scene-art,[data-scene="dunes"] .scene-art,[data-scene="quiet"] .scene-art{min-height:540px;background:#06070a;perspective:none}
  .environment-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .scene-character{position:absolute;width:180px;height:180px;left:50%;top:59%;transform:translateX(-50%);margin-top:-90px}
  .scene-sphere{position:relative;left:auto;top:auto;transform:none;width:180px;height:180px;display:block;box-shadow:inset -6px -10px 22px #15271940,inset 2px 2px 4px #ffffff40;filter:none!important}
  .scene-fallback-eyes{display:flex;gap:27px;position:absolute;top:39%;left:50%;transform:translateX(-50%)}
  .scene-fallback-eyes i{width:17px;height:43px;transform:none}
  .scene-sphere.rive-ready .scene-fallback-eyes{visibility:hidden}
  .scene-hat{position:absolute;top:-71px;left:0;width:180px;height:105px;z-index:3;pointer-events:none;filter:drop-shadow(0 3px 2px #0004)}
  .scene-hat svg{width:100%;height:100%}
  .scene-caption{font-size:13px;bottom:35px;padding:0 20px;color:#aebbad}
  .cosmetic-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .cosmetic-label{width:100%;font-size:13px;color:#aab9ac;margin-bottom:2px}
  .cosmetic-options button{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#111c16;color:#bac9b6;border-radius:13px;padding:10px 12px;min-height:44px;font-size:13px}
  .cosmetic-options button[aria-pressed="true"]{border-color:#cfefa580;background:#cfefa514;color:#ecf7e1}
  .color-dot{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 70% 20%,#f3ffdd,#a6ce78 60%,#527438)}
  .color-dot.blue{background:radial-gradient(circle at 70% 20%,#d3ebff,#4097ee 60%,#15519d)}
  .color-dot.violet{background:radial-gradient(circle at 70% 20%,#eee4ff,#9274dd 60%,#503482)}
  .scene-copy .shop-preview-note{font-size:13px;line-height:1.7;color:#93a38f}
  @media(max-width:760px){.scene-feature{grid-template-columns:1fr}.scene-art,[data-scene="dunes"] .scene-art,[data-scene="quiet"] .scene-art{min-height:400px}.scene-caption{bottom:18px}.scene-copy{padding-bottom:28px}}
  .demo-stage{padding:24px;background:radial-gradient(ellipse at 50% 50%,#a4cb7618,transparent 70%),#121914}
  .demo-window{max-width:410px;padding:26px 22px 20px;background:#0b100e;border-color:#d5edc625}
  .preview-tag{font-size:11px;color:#99a5b9;letter-spacing:.08em}
  .demo-window .mascot-stage{height:260px;margin-top:20px}
  .demo-window .mascot{width:190px;height:190px;background:radial-gradient(ellipse at 70% 15%,#f3ffddc9,transparent 49%),radial-gradient(circle at 42% 28%,#dcf5b5,#a6ce78 54%,#527438 91%);box-shadow:inset -6px -10px 22px #29451c40,inset 2px 2px 4px #f0ffdc55,0 28px 20px -20px #000c}
  .demo-window .mascot-face{gap:27px;top:48%}
  .demo-window .eye{width:17px;height:43px;background:linear-gradient(#0a1b27,#193446);box-shadow:inset 0 3px 4px #000a,0 1px 1px #b5dfff55}
  .demo-window .mascot-shadow{width:200px;left:calc(50% - 100px);bottom:26px;background:#a4d57564}
  .demo-window .floor-grid{background:repeating-linear-gradient(90deg,transparent 0 27px,#b6d99a22 28px 29px),repeating-linear-gradient(0deg,transparent 0 27px,#b6d99a22 28px 29px)}
  .speech-bubble{width:100%;min-height:76px;display:grid;place-items:center;margin:0 auto 25px;padding:18px 22px;border-radius:23px;font-size:15px;font-weight:500;line-height:1.45;color:#263043;background:linear-gradient(#fff 0%,#f5f7fc 45%,#e0e6f0 82%,#bac4d9 100%);border:1px solid #ffffff80;box-shadow:inset 0 2px 2px #fff,0 4px 0 #8e9fb8,0 10px 22px #0003}
  .speech-bubble:before{width:15px;height:15px;top:-8px;background:#fff;border-radius:4px 0 0 0}
  /* Reserve the result's space so the CTA stays still when the card arrives. */
  .demo-task{visibility:hidden;opacity:0;transform:translateY(10px) scale(.98);gap:10px;padding:14px;background:#ffffff09;border-color:#b4cae422;transition:opacity .22s ease-out,transform .32s cubic-bezier(.2,.8,.2,1)}
  .demo-window.is-complete .demo-task{visibility:visible;opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.demo-task{transition:none;transform:none}}
  .demo-task strong{font-size:14px;line-height:1.4}
  .demo-task div>span{font-size:12px;color:#a5b0c1}
  .task-pill{font-size:13px;color:var(--green);white-space:nowrap}
  .task-status{flex-shrink:0;color:var(--green)}
  .demo-record{font-size:15px;min-height:50px;background:#fff;color:#10141c}
  .demo-record:disabled{background:#e1edcf}
  .demo-disclaimer{font-size:12px;color:#9ba9bd;line-height:1.5}
  .demo-window.is-complete .eye{height:16px;border-radius:50% 50% 0 0;background:transparent;border-top:7px solid #142b3b;box-shadow:none}
  @media(max-width:1100px){.demo-layout{gap:32px}.demo-stage{padding:16px}.thought{font-size:12px}.intro-strip>div{flex-wrap:wrap;justify-content:center}}
  @media(max-width:760px){
    .hero-art{aspect-ratio:auto;margin-top:40px;min-height:0;padding-top:25px}
    .art-caption{margin-top:36px;font-size:14px}
    .thought-before{top:16px}.thought-after{bottom:68px;font-size:11px}
    .hero h1{font-size:clamp(44px,11.5vw,78px)}
    .demo-instructions>p{font-size:16px}.example-button{font-size:15px}.example-button small{font-size:13px}
    .demo-stage{padding:14px}.demo-window{padding:22px 16px 18px}
    .demo-window .mascot-stage{height:240px}.speech-bubble{padding:17px 15px;font-size:14px}
    .demo-task{flex-wrap:wrap}.task-pill{margin-left:auto}.demo-task strong{font-size:13px}
    .signup-art{width:170px;margin:12px auto 24px}
    .intro-strip>div{gap:10px;font-size:12px}.footer-bottom{font-size:13px}
    .site-header .button-small{font-size:13px}
  }
}