/* Homepage as one story (public/story/story.js). One fixed sky behind every
   section; sections drop their own backgrounds, grids and borders. Sections
   marked data-tone="dark" sit under the evening/night sky and get light text. */
body.story{background:#dfe7ec}
.st-sky{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#dfe7ec,#efe4d3);transition:background .25s linear}
.st-sun{position:absolute;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;--glow:#fff3dc;
  background:radial-gradient(circle,var(--glow) 0 36%,color-mix(in srgb,var(--glow) 55%,transparent) 39%,transparent 70%);transition:opacity .4s}
.st-moon{position:absolute;left:86%;top:36%;margin-left:-23px;width:46px;height:46px;border-radius:50%;opacity:0;background:#f4efe2;
  box-shadow:0 0 0 10px rgba(244,239,226,.06),0 0 40px 12px rgba(244,239,226,.18)}
.st-moon::after{content:'';position:absolute;inset:-4px -14px 6px 12px;border-radius:50%;background:inherit;filter:brightness(.92);opacity:.0}
.st-moon::before{content:'';position:absolute;left:10px;top:12px;width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.06);box-shadow:16px 10px 0 -2px rgba(0,0,0,.05),6px 20px 0 -3px rgba(0,0,0,.05)}
.st-stars{position:absolute;inset:0;opacity:0;transition:opacity .4s}
.st-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:stTw 3.6s ease-in-out infinite}
@keyframes stTw{0%,100%{transform:scale(.6)}50%{transform:scale(1.15)}}

/* Sections become transparent: no backgrounds, grids, borders or ripple grids. */
body.story :is(.social-proof,.pg-section,.section-alt,.integrations,.demo-section,.cta-section,footer,.hb-day){background:transparent!important;border-color:transparent!important}
body.story :is(.social-proof,.integrations,.demo-section)::before{display:none!important}
body.story .ripple-canvas{display:none!important}
body.story .hb-day .hb-sun{display:none}
body.story #how.how-v4::before,body.story #how.how-v4::after{display:none}
/* Soft hand-overs where an illustration meets the sky */
body.story .hb-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:70px;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(223,231,236,0),#dfe7ec)}
body.story .hb-j-sticky::after{content:'';position:absolute;left:0;right:0;bottom:0;height:220px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(52,64,88,0),color-mix(in srgb,var(--st-top,#344058) 45%,var(--st-bot,#344058)))}

/* Dark tone: light text on the evening/night sky. Cards keep their own colours. */
body.story [data-tone=dark] :is(.section-title,.int-headline,.footer-brand,.footer-col-title,.demo-step-title,.pg-soon b){color:#fff}
body.story [data-tone=dark] :is(.section-sub,.int-sublabel,.demo-step-desc,.footer-legal,.footer-brand-sub,.footer-copy,.footer-addr,.cn-pop-l,.int-all summary,.int-count){color:rgba(232,238,244,.78)}
body.story [data-tone=dark] .label{color:#e2b585}
body.story [data-tone=dark] .label::before{background:#e2b585}
body.story [data-tone=dark] :is(.int-headline em,.section-title em){color:#aacddc}
body.story [data-tone=dark] .demo-step{border-bottom-color:rgba(255,255,255,.14)}
body.story [data-tone=dark] .demo-step-num{color:#e2b585;border-color:#e2b585}
body.story [data-tone=dark] .footer-col a{color:rgba(232,238,244,.72)}
body.story [data-tone=dark] .footer-col a:hover,body.story [data-tone=dark] .footer-addr a{color:#aacddc}
body.story [data-tone=dark] :is(.footer-top){border-bottom-color:rgba(255,255,255,.12)}
body.story [data-tone=dark] .badge{background:rgba(255,255,255,.08);color:rgba(232,238,244,.8);border-color:rgba(255,255,255,.14)}
body.story [data-tone=dark] .pg-soon{background:rgba(255,253,248,.08);border-color:rgba(255,255,255,.22)}
body.story [data-tone=dark] .pg-soon p{color:rgba(232,238,244,.75)}
body.story [data-tone=dark] .int-all summary{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
body.story footer a.footer-sec-link,body.story [data-tone=dark] .footer-sec a{color:#aacddc}
body.story .cta-section .label{color:#e2b585!important}

/* Closing beat: secondary path, no repeat of the booking heading */
body.story .cta-section{padding:96px 48px 40px}

/* Container route in the margin */
.st-rail{position:fixed;left:18px;top:50%;transform:translateY(-50%);height:min(56vh,460px);width:20px;z-index:150;display:flex;flex-direction:column;justify-content:space-between;align-items:center}
.st-line{position:absolute;left:9px;top:4px;bottom:4px;width:2px;background:rgba(31,47,58,.14);border-radius:2px;overflow:hidden}
.st-fill{position:absolute;left:0;right:0;top:0;height:0;background:#b07a44}
.st-dot{position:relative;width:20px;height:20px;display:grid;place-items:center;text-decoration:none}
.st-dot span{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(31,47,58,.35);transition:all .3s}
.st-dot.done span{background:#237a4b;box-shadow:none}
.st-dot.on span{width:12px;height:12px;background:#b07a44;box-shadow:0 0 0 4px rgba(176,122,68,.22)}
.st-dot:focus-visible{outline:2px solid #5f88a8;border-radius:50%}
.st-box{position:absolute;left:28px;top:var(--y,0%);transform:translate(-6px,-50%);display:flex;align-items:center;gap:9px;padding:7px 11px 7px 8px;border-radius:10px;
  background:rgba(250,243,233,.96);border:1px solid rgba(31,47,58,.12);box-shadow:0 12px 28px -14px rgba(15,25,35,.5);white-space:nowrap;
  font:500 11px 'DM Mono',monospace;color:#1f2f3a;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s,top .5s cubic-bezier(.5,0,.2,1)}
.st-box.show{opacity:1;transform:translate(0,-50%)}
.st-ico{width:22px;height:12px;border-radius:2px;background:repeating-linear-gradient(90deg,#b07a44 0 3px,#9a6a3a 3px 4px)}
.st-ref{color:#5d6b76}
.st-status{font:700 12px 'Space Grotesk',sans-serif;color:#1f2f3a}
body.st-dark .st-line{background:rgba(255,255,255,.2)}

@media (max-width:1180px){.st-rail{display:none}}
@media (max-width:760px){
  .st-sun{width:52px;height:52px;margin:-26px 0 0 -26px}
  .st-moon{width:32px;height:32px;margin-left:-16px}
  body.story .cta-section{padding:72px 20px 32px}
}
.st-still .st-stars i{animation:none}
.st-still .st-sky,.st-still .st-sun,.st-still .st-box{transition:none}