/* How it works: scrollytelling prototype. Builds on landing.css tokens. Scenes are visible by default;
   JS adds .is-anim on <html> to enable reveal motion. */
.hiw{overflow-x:hidden}
.hiw section{padding:0}
.hiw .scene{position:relative;padding:72px 0}
.scene .wrap{position:relative}
.lead{color:var(--muted);max-width:52ch;margin:0 0 28px}
.feed-note{color:var(--muted);margin:16px 0 0}
.feed-note[hidden],[hidden]{display:none!important}

/* Reveal: opacity/transform only, so no layout shift */
.is-anim .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.is-anim .reveal.d1{transition-delay:.12s}
.is-anim .reveal.d2{transition-delay:.24s}
.is-anim .reveal.d3{transition-delay:.36s}
.is-anim .reveal.in{opacity:1;transform:none}

/* Orb (app style) */
.orb{position:relative;width:min(220px,56vw);aspect-ratio:1;margin:0 auto 28px}
.orb-core{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 50% 30%,#EFFFFA 0%,#9DE3D4 30%,#3FAE96 70%,#1F7A68 100%);box-shadow:0 0 60px 10px rgba(127,209,193,.45),0 20px 50px rgba(31,122,104,.4);animation:orb-breathe 6s ease-in-out infinite}
.orb-ring{position:absolute;border-radius:50%;border:1px solid rgba(127,209,193,.5)}
.orb-ring.r1{inset:4%;animation:orb-ring 6s ease-in-out infinite}
.orb-ring.r2{inset:-8%;border-color:rgba(127,209,193,.25);animation:orb-ring 6s ease-in-out -2s infinite}
.orb-sm{width:96px;margin-bottom:20px;margin-left:0}
@keyframes orb-breathe{0%,100%{transform:scale(.96)}50%{transform:scale(1.05)}}
@keyframes orb-ring{0%,100%{transform:scale(.97);opacity:.5}50%{transform:scale(1.04);opacity:1}}

/* 1. Hero */
.hiw .hero-scene{min-height:min(100svh,900px);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px 16px 48px;background:radial-gradient(90% 60% at 50% 30%,#DCEFE9 0%,rgba(244,239,231,0) 70%),var(--sand)}
.hero-scene .scene-in{max-width:720px;display:grid;gap:32px;justify-items:center}
.hero-copy{text-align:center}
.hero-scene h1{font-size:clamp(2.5rem,9vw,5.25rem);line-height:1.04}
.hero-scene .lede{margin:24px auto 20px;max-width:36ch}
.hero-cta{justify-content:center;margin:0 0 12px}
.mockup{margin:0;width:100%;container-type:inline-size;--ring:.7cqw;--bez:2.5cqw;--sw:calc(100cqw - 2 * (var(--ring) + var(--bez)));--sr:calc(var(--sw) * .125)}
.device{position:relative;box-sizing:border-box;width:100%;padding:var(--bez);border:var(--ring) solid transparent;border-radius:calc(var(--sr) + var(--bez) + var(--ring));background:linear-gradient(#050608,#050608) padding-box,linear-gradient(145deg,#E4E6E9 0%,#7C8086 28%,#C9CCD1 52%,#6A6E74 78%,#B5B8BD 100%) border-box;box-shadow:inset 0 0 0 .25cqw rgba(255,255,255,.1),0 1.2cqw 2.4cqw -.8cqw rgba(8,14,28,.28),0 6cqw 12cqw -3cqw rgba(8,14,28,.38)}
.device::before,.device::after{content:"";position:absolute;width:.9cqw;background-repeat:no-repeat}
.device::before{right:100%;top:0;height:100%;margin-right:-.2cqw;border-radius:.5cqw 0 0 .5cqw;background-image:linear-gradient(90deg,#8D9197,#C4C7CC),linear-gradient(90deg,#8D9197,#C4C7CC),linear-gradient(90deg,#8D9197,#C4C7CC);background-size:100% 3.2%,100% 6.5%,100% 6.5%;background-position:0 14.5%,0 22.3%,0 30.8%}
.device::after{left:100%;top:27%;height:10.5%;margin-left:-.2cqw;border-radius:0 .5cqw .5cqw 0;background-image:linear-gradient(90deg,#C4C7CC,#8D9197);background-size:100% 100%}
.device-screen{overflow:hidden;border-radius:var(--sr);background:#000;aspect-ratio:1179/2556}
.device-screen img{display:block;width:100%;height:100%;aspect-ratio:1179/2556;object-fit:cover}
.ritual .device,.cta-card .device{box-shadow:inset 0 0 0 .25cqw rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.14),0 0 7cqw -1cqw rgba(140,220,205,.22),0 6cqw 12cqw -3cqw rgba(0,0,0,.55)}
.mockup-hero{max-width:210px}
.mockup-sm{max-width:230px}
.mockup-md{max-width:240px}
.mockup figcaption{margin-top:16px;font-size:.9375rem;line-height:1.4;color:#D4DAE2}
.mockup figcaption b{display:block;color:var(--teal);font-size:1.125rem;font-family:var(--serif);font-weight:600;margin-bottom:2px}
.scroll-cue{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-height:44px;min-width:44px;justify-content:center;color:var(--muted);text-decoration:none;font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.scroll-cue svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* 2. Expectation effect: one worked example, two mindsets */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.effect{background:var(--card);border-block:1px solid var(--line)}
.effect-head{max-width:none;margin-bottom:20px}.effect-head h2{max-width:20ch;text-wrap:balance}
.scenario{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:14px 18px;border-radius:18px;background:var(--navy);color:#F4EFE7;font-size:1.0625rem;line-height:1.35}
.scenario svg{flex:none;width:28px;height:28px;stroke:var(--teal);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.scenario strong{color:var(--teal)}
.effect-sub{color:var(--muted);max-width:52ch;margin:0 0 20px}
.mind-toggle{display:inline-flex;padding:4px;margin:0 0 20px;border-radius:999px;background:var(--sand);border:1px solid var(--line)}
.mind-toggle button{min-height:44px;min-width:110px;padding:8px 18px;white-space:nowrap;border:0;border-radius:999px;background:transparent;color:var(--accent);font:inherit;font-weight:700;font-size:1rem;cursor:pointer;transition:background .3s ease,color .3s ease}
.mind-toggle button[aria-checked="true"]{background:var(--accent);color:#F4EFE7}
.mind-toggle button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.chain-head{display:none}
.chain-rows{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.crow{display:grid;gap:8px}
.crow-label{display:flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.crow-label b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#F4EFE7;font-size:.8125rem;letter-spacing:0}
.cell{position:relative;padding:16px 18px;border-radius:16px;border:2px solid transparent;transition:opacity .45s ease,border-color .45s ease,transform .45s ease,visibility .45s}
.cell p{margin:0;font-family:var(--serif);font-size:1.375rem;line-height:1.25;color:var(--navy)}
.cell-a{background:#E9EDF3}
.cell-b{background:#DCEFE9}
.cell-tag{display:block;margin-bottom:4px;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cell-a .cell-tag{color:#4A5568}
.cell-b .cell-tag{color:#1F6455}
/* with JS on small screens: one mindset at a time, cross-faded in place */
.has-toggle .crow .cell{grid-area:2/1}
.has-toggle .chain[data-mind="braced"] .cell-b,.has-toggle .chain[data-mind="open"] .cell-a{opacity:0;visibility:hidden;transform:translateY(8px)}
.has-toggle .chain[data-mind="braced"] .cell-a{border-color:#8A93A3}
.has-toggle .chain[data-mind="open"] .cell-b{border-color:var(--accent)}
.loop{display:grid;gap:28px;margin-top:56px;align-items:center}
.loop svg{width:100%;max-width:420px;height:auto;margin:0 auto;display:block}
.loop-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.loop-head{fill:var(--accent)}
.loop-node rect{fill:var(--navy)}
.loop-node text{fill:#F4EFE7;font-family:var(--sans);font-size:16px;font-weight:600;text-anchor:middle}
.loop-mid{fill:var(--muted);font-family:var(--serif);font-size:18px;font-style:italic;text-anchor:middle}
.bridge{margin:0 0 16px;font-family:var(--serif);font-size:clamp(1.5rem,4.5vw,2.125rem);line-height:1.2;color:var(--navy);max-width:24ch}
.research{margin:0;color:var(--muted);max-width:52ch;font-size:.9375rem;padding-left:14px;border-left:3px solid var(--line)}
@media(min-width:900px){
.hiw .scene{padding:112px 0}
.effect-head h2{max-width:26ch}
.scenario{display:inline-flex;font-size:1.25rem;padding:16px 24px}
.mind-toggle{display:none}
.chain-head{display:grid;grid-template-columns:140px minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:12px;font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.chain-head span{padding:0 0 10px 4px;border-bottom:3px solid}
.chain-head span:first-child{border-color:transparent}
.chain-head span:nth-child(2){color:#4A5568;border-color:#8A93A3}
.chain-head span:nth-child(3){color:#1F6455;border-color:#3FAE96}
.chain-rows{gap:16px}
.crow{grid-template-columns:140px minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.crow-label{align-self:center}
.cell{padding:22px 24px}
.cell p{font-size:1.625rem}
.cell-tag{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.has-toggle .crow .cell{grid-area:auto}
.has-toggle .chain[data-mind="braced"] .cell-b,.has-toggle .chain[data-mind="open"] .cell-a{opacity:1;visibility:visible;transform:none}
.has-toggle .chain .cell-a{border-color:#C5CCD8}
.has-toggle .chain .cell-b{border-color:#A9D8CC}
.loop{grid-template-columns:minmax(0,460px) 1fr;gap:72px;margin-top:88px}
.loop svg{max-width:460px;margin:0}
.loop-node text{font-size:14px}
.bridge{font-size:2rem}
}
/* 3. Goal to story */
.goal-section{}
.goal h2{max-width:22ch}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.chip{min-height:44px;padding:8px 18px;border-radius:999px;border:1.5px solid var(--accent);background:transparent;color:var(--accent);font:inherit;font-weight:600;font-size:.9375rem;cursor:pointer;transition:background .2s ease,color .2s ease}
.chip:hover{background:#DCEFE9}
.chip[aria-pressed="true"]{background:var(--accent);color:#F4EFE7}
.chip:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.result{min-height:1px}
.pick{display:grid;gap:0;background:var(--navy);color:#F4EFE7;border-radius:28px;overflow:hidden;animation:pick-in .5s ease both}
@keyframes pick-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pick-art{width:100%;aspect-ratio:9/5;object-fit:cover;background:linear-gradient(180deg,#1D2446 0%,#33305A 45%,#7C6A86 80%,#D9A98F 100%)}
.pick-body{padding:22px 20px 24px;display:flex;flex-direction:column;gap:12px}
.pick .eyebrow{color:var(--teal);margin:0}
.pick h3{font-size:clamp(1.5rem,5vw,2.125rem);color:#F8F4EC}
.pick-take{margin:0;font-family:var(--serif);font-size:1.25rem;line-height:1.4;color:#E8EDF2;padding-left:14px;border-left:3px solid var(--teal)}
.pick-take-label{display:block;font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:4px}
.pick .mp{--mp-muted:#B9C3CF;--mp-track:rgba(244,239,231,.2);margin-top:6px}
.pick .mp-btn{margin:10px}
.pick-link{color:var(--teal);font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.pick .mp-status{color:#F2B8A8}
@media(min-width:900px){
.pick{grid-template-columns:1.1fr 1fr}
.pick-art{height:100%;aspect-ratio:auto;min-height:340px}
.pick-body{padding:36px 36px 32px;justify-content:center}
}

/* 4. Ritual */
.ritual{background:var(--navy);color:#F4EFE7}
.ritual h2{color:#F8F4EC;max-width:20ch}
.ritual .eyebrow{color:var(--teal)}
.timeline{list-style:none;margin:40px 0 0;padding:0 0 0 0;display:grid;gap:36px;position:relative}
.timeline::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:rgba(127,209,193,.25)}
.tl{display:grid;grid-template-columns:48px 1fr;gap:18px;position:relative}
.tl-dot{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#16263F;border:2px solid var(--teal);z-index:1}
.tl-dot svg{width:24px;height:24px;stroke:var(--teal);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tl-eve{border-color:#B9A4D9}
.tl-eve svg{stroke:#B9A4D9}
.tl-when{margin:2px 0 4px;font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.tl h3{font-size:1.5rem;color:#F8F4EC;margin-bottom:6px}
.tl p:last-child{margin:0;color:#D4DAE2;max-width:44ch}
@media(min-width:900px){
.timeline{grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.timeline::before{left:24px;right:24px;top:23px;bottom:auto;width:auto;height:2px}
.tl{grid-template-columns:1fr;gap:16px;align-content:start}
.tl h3{font-size:1.3rem;min-height:1.2em;line-height:1.2;margin-bottom:8px;white-space:nowrap}
.tl-when{white-space:nowrap}
.timeline{align-items:start}
}
@media(min-width:900px) and (max-width:1199px){.tl h3{white-space:normal;min-height:2.4em}.tl-when{white-space:normal}}

.screens{margin-top:56px;padding:6px 10px 12px;margin-left:-10px;margin-right:-10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:10px;-webkit-overflow-scrolling:touch}
.screens:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:12px}
.screens-track{list-style:none;margin:0;padding:0;display:flex;gap:20px}
.screens-track li{flex:0 0 min(62vw,230px);scroll-snap-align:start}
.screens .mockup{max-width:none}
@media(min-width:900px){
.screens{overflow:visible;margin-top:72px}
.screens-track{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.screens-track li{flex:none}
.screens .mockup{max-width:240px}
}

/* 5. More stories */
.mini-grid{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
.mini{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.mini a{display:block;color:inherit;text-decoration:none;min-height:44px}
.mini img,.mini .mini-art{width:100%;aspect-ratio:9/5;object-fit:cover;background:linear-gradient(180deg,#1D2446 0%,#33305A 45%,#7C6A86 80%,#D9A98F 100%)}
.mini h3{font-size:1.1875rem;line-height:1.2;padding:12px 16px 16px}
.mini a:hover h3{text-decoration:underline;text-underline-offset:4px}
.mini a:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:20px}
@media(min-width:560px){.mini-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.mini-grid{grid-template-columns:repeat(3,1fr)}}
.more .story-all a{display:inline-flex;align-items:center;min-height:44px}

/* 6. CTA */
.hiw .cta-scene{padding-bottom:40px}
.cta-card{padding:44px 24px;text-align:left}
.cta-card h2{font-size:clamp(2rem,6vw,3.25rem);max-width:18ch;margin-bottom:12px}
.cta-card p{margin-bottom:24px}
.cta-card .cta{margin-bottom:8px}
.cta-card .soon{color:#F4EFE7}
.cta-card .fine{color:#B9C3CF}
.cta-card{display:grid;gap:36px;justify-items:start}
.cta-phone{max-width:220px;justify-self:center}
@media(min-width:900px){.cta-card{padding:72px;grid-template-columns:1.3fr 1fr;align-items:center}.cta-phone{max-width:250px;justify-self:end}}

footer{margin-top:0}

@media(min-width:900px){
.hiw .more{padding-bottom:48px}
.hiw .cta-scene{padding-top:48px}
.hiw .hero-scene{min-height:max(560px,calc(100svh - 76px));padding:24px 0}
.hero-scene .scene-in{max-width:1080px;width:100%;box-sizing:border-box;margin:0 auto;padding:0 24px;grid-template-columns:minmax(0,1fr) auto;gap:64px;justify-items:stretch;align-items:center}
.hero-copy{text-align:left}
.hero-copy .orb{margin:0 0 20px;width:96px}
.hero-scene h1{font-size:clamp(2.75rem,5.2vw,4.75rem)}
.hero-scene .lede{margin:20px 0 16px}
.hero-cta{justify-content:flex-start}
.mockup-hero{width:calc(min(66svh,620px) / 2.093);max-width:none;justify-self:end}
}

/* Optional enhancement: scroll-driven hero fade where supported */
@supports (animation-timeline:view()){
.hero-scene .orb{animation:orb-breathe 6s ease-in-out infinite}
}
@media(prefers-reduced-motion:no-preference){
.hero-scene .orb{animation:orb-in 1.2s ease both}
@keyframes orb-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
}

@media(prefers-reduced-motion:reduce){
.is-anim .reveal{opacity:1!important;transform:none!important}
.orb-core,.orb-ring,.scroll-cue svg,.pick,.hero-scene .orb{animation:none!important}
.cell,.mind-toggle button,.chip{transition:none!important}
.screens{scroll-behavior:auto}
}