/* Home page only. Loaded after site.css.
   The hero is one sticky stage (html.hold): sky, headline, a tilting phone, then the conversation. Nothing here blurs what moves behind it.
   will-change only while a stage is near the screen (.is-live). A missing image leaves its ground colour. */

/* ---------------------------------------------------------------- 1. hero and conversation */
.hero { position: relative; background: var(--sky); }
.hero-stage { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: radial-gradient(70% 42% at 50% 100%, rgba(242, 160, 168, .7), rgba(242, 160, 168, 0) 70%), linear-gradient(180deg, var(--sky) 0%, var(--lavender) 60%, var(--cloud-rose) 100%); }
.hold .hero { height: calc(100dvh * 4.4); }
.hold .hero-stage { position: sticky; top: 0; height: 100dvh; min-height: 0; }

.sky { position: absolute; inset: -4% 0; z-index: 0; }
.sky-plate { position: absolute; inset: 0; background: url(img/sky.webp) 50% 50% / cover no-repeat; }
.sky-film { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.sky-film.is-on { opacity: 1; }
.sky-far { position: absolute; left: -4%; right: -4%; bottom: -10%; height: 66%; background: url(img/sky-far.webp) 50% 100% / cover no-repeat; }
.sky-near { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%); opacity: .85; position: absolute; z-index: 4; left: -6%; right: -6%; bottom: -20%; height: 44%; background: url(img/sky-near.webp) 50% 100% / cover no-repeat; pointer-events: none; }
@media (max-width: 767px) and (orientation: portrait) {
  .sky-plate { background-image: url(img/sky-m.webp); }
  .sky-far { background-image: url(img/sky-far-m.webp); }
  .sky-near { background-image: url(img/sky-near-m.webp); }
}
.hero.is-live .sky > *, .hero.is-live .sky-near, .hero.is-live .hw, .hero.is-live .intro, .hero.is-live .intro-meta--d, .hero.is-live .tk, .hero.is-live .rig { will-change: transform, opacity; }
.hero h1 .hw { display: inline-block; }

.hero-copy { position: absolute; z-index: 2; left: var(--gutter); top: calc(var(--bar-top) + var(--bar-h) + clamp(.8rem, 3vh, 2rem)); max-width: 58vw; display: grid; gap: clamp(.7rem, 1.6vh, 1.2rem); justify-items: start; pointer-events: none; }
.hero h1 { max-width: none; font-size: clamp(2.7rem, 9vw, 9rem); line-height: .92; text-wrap: balance; color: var(--plum); text-shadow: 0 0 60px rgba(237, 230, 247, .45); }

/* The phone. --ph is its height; --ar its width over height (home.js sets it from phone.webp); --sx..--sr is the screen rectangle (phone-screen.json, % of the image).
   --su is 1% of the screen's width in px: every size inside the phone is a multiple of it, so the screen scales with the phone. */
.rig { transform-origin: 50% 100%; --ph: min(82svh, 800px); --ar: .5; --pw: calc(var(--ph) * var(--ar)); --sx: 5%; --sy: 2.4%; --sw: 90%; --sh: 95.2%; --sr: 9; --swn: 90; --su: calc(var(--pw) * var(--swn) / 10000); --ts: 1;
  position: absolute; z-index: 3; left: 68%; top: calc(var(--bar-top) + var(--bar-h) + 1rem); width: var(--pw); height: var(--ph); margin-left: calc(var(--pw) / -2); }
.phone { position: absolute; inset: 0; transform-style: preserve-3d; transform: perspective(1600px) rotateY(-18deg) rotateX(5deg); }
.phone-body { position: absolute; inset: 0; border-radius: 13% / 6.2%; background: linear-gradient(150deg, var(--plum-soft), var(--plum) 45%, #1B0F36); box-shadow: inset 0 0 0 2px rgba(251, 248, 255, .6), inset 0 0 0 calc(var(--pw) * .02) #1B0F36, 0 60px 90px -40px rgba(43, 26, 79, .55); }
.phone.has-img .phone-body { display: none; }
.phone-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; filter: drop-shadow(0 46px 40px rgba(43, 26, 79, .32)); will-change: transform; }
.phone.has-img .phone-img { visibility: visible; }

.screen { position: absolute; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); border-radius: calc(var(--pw) * var(--sr) / 100); overflow: hidden; background: var(--mist); color: var(--plum); transform: translateZ(1px);
  font: 400 calc(var(--su) * 4.3 * var(--ts))/1.35 var(--font); }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(251, 248, 255, .95), inset 0 0 0 3px rgba(185, 169, 227, .55); pointer-events: none; }
.cam { position: absolute; z-index: 2; top: 1.5%; left: 50%; width: calc(var(--su) * 4.2); height: calc(var(--su) * 4.2); margin-left: calc(var(--su) * -2.1); border-radius: 50%; background: #1B0F36; box-shadow: 0 0 0 calc(var(--su) * .5) rgba(43, 26, 79, .25); }
.scr-lab { position: absolute; top: 6.6%; left: 0; right: 0; margin: 0; text-align: center; font: 600 calc(var(--su) * 2.7 * var(--ts))/1 var(--font); text-transform: uppercase; letter-spacing: .13em; color: var(--plum-soft); }
.scr-head { position: absolute; top: 10%; left: calc(var(--su) * 4); right: calc(var(--su) * 4); display: flex; align-items: center; gap: calc(var(--su) * 2.6); padding-bottom: calc(var(--su) * 2.4); border-bottom: 1px solid rgba(43, 26, 79, .14); }
.scr-head .av { flex: none; width: calc(var(--su) * 9); height: calc(var(--su) * 9); border-radius: 50%; background: linear-gradient(150deg, var(--cloud-rose), var(--sky)); }
.scr-head em { font-style: normal; font-size: .86em; color: var(--plum-soft); }
.thread { position: absolute; inset: 18% calc(var(--su) * 4) 0; }
.m { position: absolute; left: 0; margin: 0; max-width: 78%; padding: calc(var(--su) * 2.6) calc(var(--su) * 3.4); border-radius: calc(var(--su) * 4.4) calc(var(--su) * 4.4) calc(var(--su) * 4.4) calc(var(--su) * 1.2); background: var(--cloud-rose); color: var(--plum); }
.m-her { top: 1%; }
.m-him { top: 27%; left: auto; right: 0; border-radius: calc(var(--su) * 4.4) calc(var(--su) * 4.4) calc(var(--su) * 1.2) calc(var(--su) * 4.4); background: var(--plum-soft); color: var(--on-sky); opacity: 0; }
.sent-note { position: absolute; top: 44%; right: 0; margin: 0; font-size: .74em; color: var(--plum-soft); opacity: 0; }

.ar { position: absolute; left: 0; right: 0; top: 40%; bottom: 0; padding: calc(var(--su) * 3.6) calc(var(--su) * 4) 0; border-radius: calc(var(--su) * 6) calc(var(--su) * 6) 0 0; background: color-mix(in srgb, var(--lavender) 52%, var(--mist)); box-shadow: 0 -8px 24px rgba(43, 26, 79, .16); transform: translateY(100%); }
.ar-bar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 calc(var(--su) * 2.4); }
.ar-bar b { font-weight: 600; }
.ar-bar span, .ar-lab { font: 600 calc(var(--su) * 2.8 * var(--ts))/1.2 var(--font); text-transform: uppercase; letter-spacing: .11em; color: var(--plum-soft); }
.ar-lab { margin: 0 0 calc(var(--su) * 2); }
.ar-cap { position: absolute; left: calc(var(--su) * 4); right: calc(var(--su) * 4); top: 15%; }
.ar-cap ul, .ar-rep { display: grid; gap: calc(var(--su) * 2); }
.ar-rep { position: absolute; left: calc(var(--su) * 4); right: calc(var(--su) * 4); top: 15%; }
.ar-row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: calc(var(--su) * 2.4); padding: calc(var(--su) * 2.2) calc(var(--su) * 3); border-radius: calc(var(--su) * 3); background: rgba(251, 248, 255, .72); font-size: 1em; }
.ar-row i { flex: none; display: grid; place-items: center; width: calc(var(--su) * 5.6); height: calc(var(--su) * 5.6); border-radius: 50%; background: rgba(43, 26, 79, .12); font-style: normal; font-size: .9em; line-height: 1; }
.ar-row::after { content: ""; position: absolute; left: calc(var(--su) * 3); right: calc(var(--su) * 11); top: 50%; height: 2px; background: var(--plum); transform: scaleX(var(--rm, 0)); transform-origin: 0 50%; }
.ar-go { margin: calc(var(--su) * 4) 0 0; padding: calc(var(--su) * 2.6) 0; border-radius: 999px; background: var(--plum); color: var(--mist); text-align: center; font-weight: 500; }
.ar-rep li { position: relative; padding: calc(var(--su) * 2.6) calc(var(--su) * 3.4); border-radius: calc(var(--su) * 3); background: rgba(251, 248, 255, .8); font-size: 1em; opacity: 0; }
.ar-rep li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--plum); opacity: var(--pk, 0); }

.fbar { position: absolute; left: calc(var(--su) * 3); right: calc(var(--su) * 3); top: 57%; display: flex; align-items: center; height: 8.4%; padding: 0 calc(var(--su) * 11) 0 calc(var(--su) * 3.6); border-radius: 999px; background: rgba(251, 248, 255, .94); box-shadow: 0 2px 8px rgba(43, 26, 79, .14); opacity: 0; font-size: 1em; white-space: nowrap; }
.fbar::after { content: ""; position: absolute; right: calc(var(--su) * 1.6); top: 50%; width: calc(var(--su) * 7); height: calc(var(--su) * 7); margin-top: calc(var(--su) * -3.5); border-radius: 50%; background: var(--plum); }
.fbar::before { content: ""; position: absolute; right: calc(var(--su) * 3.7); top: 50%; z-index: 1; width: calc(var(--su) * 2.2); height: calc(var(--su) * 2.2); margin-top: calc(var(--su) * -1); border-top: 2px solid var(--mist); border-right: 2px solid var(--mist); transform: rotate(45deg); }
.ft { overflow: hidden; text-overflow: clip; }
.caret { display: inline-block; flex: none; width: 2px; height: 1.2em; margin-left: 1px; background: var(--plum); }
@media (prefers-reduced-motion: no-preference) { .caret { animation: blink 1.1s steps(2, jump-none) infinite; } }
@keyframes blink { 50% { opacity: 0; } }
.kbd-bg { position: absolute; left: 0; right: 0; top: 65%; bottom: 0; background: color-mix(in srgb, var(--lavender) 58%, var(--mist)); opacity: 0; }

/* The keyboard is a sibling of the screen (not inside its clip) so its keys can lift off it in 3D. */
.kbd { --ko: 0; position: absolute; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); transform-style: preserve-3d; transform: translateZ(2px); pointer-events: none; }
.krow { position: absolute; left: calc(var(--su) * 1.8); right: calc(var(--su) * 1.8); display: flex; gap: calc(var(--su) * 1.5); height: 6.6%; }
.krow--2 { left: calc(var(--su) * 6); right: calc(var(--su) * 6); }
.kk { flex: 1 1 0; display: grid; place-items: center; min-width: 0; border-radius: calc(var(--su) * 2); background: linear-gradient(180deg, rgba(251, 248, 255, .94), rgba(251, 248, 255, .5)); box-shadow: inset 0 1px 1px #fff, inset 0 -2px 4px rgba(126, 123, 208, .3), 0 calc(var(--su) * .8) calc(var(--su) * 1.6) rgba(43, 26, 79, .24); color: var(--plum); font: 500 calc(var(--su) * 4.3 * var(--ts))/1 var(--font); opacity: var(--ko); transform: translateZ(calc(var(--pop, 0) * var(--su) * 7)) scale(calc(1 + var(--pop, 0) * .07)); }
.kk--w { flex-grow: 1.45; background: linear-gradient(180deg, rgba(185, 169, 227, .85), rgba(185, 169, 227, .5)); }
.kk--sp { flex-grow: 5.2; }

/* Daylight keys rising out of the screen. Missing art leaves the CSS glass cap. */
.rise { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.rk { position: absolute; left: var(--l); top: var(--t); width: 26%; aspect-ratio: 1; margin: -13% 0 0 -13%; opacity: 0; transform-style: flat; }
.rk::before { content: ""; position: absolute; inset: 7%; border-radius: 24%; background: linear-gradient(160deg, rgba(251, 248, 255, .95), rgba(185, 169, 227, .5) 55%, rgba(231, 169, 201, .6)); box-shadow: inset 0 1px 2px #fff, inset 0 -8px 16px rgba(126, 123, 208, .35), 0 22px 30px rgba(43, 26, 79, .26); }
.rk b { position: absolute; inset: 0; display: grid; place-items: center; font: 500 calc(var(--pw) * .075)/1 var(--font); color: var(--plum); }
.rk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
.rk.is-img::before, .rk.is-img b { display: none; }
.rk.is-img img { visibility: visible; }

/* Bottom left: the plain explanation and the next step. */
.intro { display: grid; gap: clamp(.8rem, 1.8vh, 1.2rem); justify-items: start; pointer-events: auto; }

.intro .intro-meta--m { display: none; }
.intro-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; color: var(--plum); font-size: clamp(.8125rem, 1vw, 1rem); }
.intro-meta span + span::before { content: "/"; margin-right: 1rem; }
.intro-sub { max-width: 30rem; font-size: clamp(1.375rem, 2.1vw, 2rem); line-height: 1.25; font-weight: 500; color: var(--plum); text-shadow: 0 0 30px rgba(237, 230, 247, .6); }
.intro-cta { display: flex; flex-wrap: wrap; gap: .6rem; }

/* The first screen's blur-fade-up: once, before any scroll (home.js drops it the moment the page moves). */
@media (prefers-reduced-motion: no-preference) {
  .hero [data-fx] { animation: hero-in .9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
  .hero.fx-skip [data-fx] { animation: none; }
}
@keyframes hero-in { from { opacity: 0; filter: blur(20px); transform: translate3d(0, 40px, 0); } to { opacity: 1; filter: blur(0); transform: none; } }

/* Beside the phone: the words for each step. They share one place; each is lit by scroll in turn. */
.talk { position: absolute; z-index: 6; left: var(--gutter); top: 0; bottom: 0; width: min(30rem, 36vw); display: grid; align-content: center; pointer-events: none; }
.tk { grid-area: 1 / 1; align-self: center; display: grid; gap: .6rem; padding: 1.3rem 1.5rem; border-radius: 28px; background: rgba(237, 230, 247, .93); color: var(--plum); box-shadow: 0 20px 50px rgba(43, 26, 79, .2); opacity: 0; }
.tk .meta { color: var(--plum-soft); }
.tk h2 { font-size: clamp(1.6rem, 2.6vw, 2.5rem); line-height: 1.1; }
.tk-sent { font: 500 .75rem/1.4 var(--font); text-transform: uppercase; letter-spacing: .14em; color: var(--plum-soft); opacity: 0; }

@media (max-width: 860px) {
  .hold .hero { height: calc(100svh * 4); }
  .hold .hero-stage { height: 100svh; }
}
@media (max-width: 767px) {
  .hero-copy { display: contents; }
  .hero h1 { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); top: calc(var(--bar-top) + var(--bar-h) + .9rem); font-size: clamp(2.6rem, 12.4vw, 3.8rem); }
  .intro-meta--d { display: none; }
  .intro .intro-meta--m { display: flex; }
  .rig { --ph: min(62svh, calc(100svh - 270px)); --ts: 1.34; left: 50%; top: auto; bottom: 14px; }
  .rk { width: 30%; margin: -15% 0 0 -15%; }
  .intro { position: absolute; z-index: 5; left: 1rem; right: 1rem; bottom: 1rem; gap: .6rem; padding: .85rem 1rem 1rem; border-radius: 24px; background: rgba(237, 230, 247, .92); box-shadow: 0 20px 50px rgba(43, 26, 79, .2); }
  .intro-sub { font-size: 1.1875rem; max-width: none; text-shadow: none; }
  .intro-cta { width: 100%; flex-wrap: wrap; }
  .intro-cta .pill { flex: 1 1 auto; min-width: 0; padding-inline: .8rem; font-size: .9375rem; white-space: normal; text-align: center; }
  .talk { left: 1rem; right: 1rem; width: auto; top: calc(var(--bar-top) + var(--bar-h) + 8px); bottom: auto; align-content: start; }
  .tk { padding: .6rem .9rem .7rem; gap: .15rem; border-radius: 20px; }
  .tk .meta { font-size: .6875rem; }
  .tk h2 { font-size: 1.0625rem; line-height: 1.2; letter-spacing: -.01em; }
}

/* ---------------------------------------------------------------- 1b. the full disclosure, normal flow */
.disclose { background: color-mix(in srgb, var(--lavender) 55%, var(--mist)); color: var(--plum); }
.disclose-in { max-width: 56rem; margin: 0 auto; padding: clamp(2.2rem, 6vh, 3.5rem) var(--gutter); display: grid; gap: .9rem; justify-items: start; }
.disclose-in .meta { color: var(--plum-soft); }
.disclose-in p:not(.meta) { font-size: 1.1875rem; line-height: 1.6; max-width: none; }

/* ---------------------------------------------------------------- 2. one statement, word by word */
.statement-in { max-width: 92rem; margin: 0 auto; padding: clamp(3.5rem, 11vh, 7rem) var(--gutter); display: grid; gap: clamp(1.4rem, 3.5vh, 2.4rem); }
.st-h { font: 600 clamp(2.75rem, 9vw, 9.5rem)/1 var(--font); letter-spacing: -.04em; text-wrap: balance; max-width: 15ch; }
.st-sub { max-width: 40rem; font: 500 clamp(1.375rem, 2.4vw, 2.25rem)/1.35 var(--font); }
.st-h .w, .st-sub .w, .getit-main h2 .w { display: inline-block; transition: none; }
.statement.is-live .w, .statement.is-live .st-h, .statement.is-live .st-sub { will-change: transform, opacity; }
.statement { overflow: clip; overflow-clip-margin: 0; }
.statement-in { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- 3. the sideways row: three full panels */
.ways { position: relative; background: var(--lavender); }
.row { position: relative; }
.panel { position: relative; overflow: hidden; background: var(--lavender); color: var(--plum); }
.panel--better { background: var(--cloud-rose); }
.panel--control { background: var(--mist); }
.panel-in { position: relative; height: 100%; padding: 3rem var(--gutter) 3.2rem; display: grid; gap: 1.6rem; align-content: start; }
.panel-dim { position: absolute; inset: 0; z-index: 6; background: var(--plum); opacity: 0; pointer-events: none; will-change: opacity; }
.panel-h { font: 600 clamp(2.25rem, 5vw, 4.75rem)/1.02 var(--font); letter-spacing: -.03em; text-wrap: balance; }
.cap { display: grid; gap: .9rem; justify-items: start; align-content: center; }
.cap p { max-width: 34rem; font-size: 1.1875rem; line-height: 1.55; }
.shot { position: relative; display: grid; align-content: center; }
.panel--voice .shot { overflow: hidden; border-radius: 28px; min-height: min(62svh, 560px); background: linear-gradient(180deg, var(--sky), var(--cloud-rose)); }
.panel--voice .shot picture, .panel--voice .shot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.panel--voice .shot img { object-fit: cover; }
.voice-card { position: relative; align-self: end; display: grid; gap: .5rem; width: min(30rem, calc(100% - 2rem)); margin: 1rem; padding: 1rem 1.2rem; border-radius: 22px; color: var(--plum); }
.wave { width: 100%; height: 28px; color: var(--rose); }
.vc-row { display: grid; grid-template-columns: 5rem 1fr; gap: .8rem; align-items: baseline; font-size: 1rem; line-height: 1.4; }
.vc-row .meta, .vc-note { color: var(--plum-soft); }
.vc-note { text-transform: none; letter-spacing: .02em; }
.ba { display: grid; gap: 1rem; justify-items: stretch; width: min(44rem, 100%); }
.ba-card { padding: 1.5rem 1.7rem; border-radius: 24px; background: rgba(237, 230, 247, .9); }
.ba-card--after { background: var(--mist); box-shadow: 0 16px 40px rgba(43, 26, 79, .16); }
.ba-card .meta { color: var(--plum-soft); }
.ba-text { margin-top: .4rem; font: 500 clamp(1.5rem, 2.4vw, 2.25rem)/1.3 var(--font); }
.ba-arrow { justify-self: center; color: var(--plum); }
.arx { display: grid; gap: .8rem; width: min(42rem, 100%); padding: 1.1rem 1.2rem 1.2rem; border-radius: 26px; background: color-mix(in srgb, var(--lavender) 52%, var(--mist)); box-shadow: 0 16px 40px rgba(43, 26, 79, .14); }
.arx-bar { display: flex; justify-content: space-between; align-items: center; max-width: none; }
.arx-bar .meta { color: var(--plum-soft); }
.steps3 { display: grid; gap: .7rem; }
.st3 { display: grid; grid-template-columns: 2.2rem 1fr; align-items: start; gap: .9rem; padding: .85rem 1rem; border-radius: 20px; background: rgba(251, 248, 255, .6); font-size: 1rem; }
.st3 b { display: block; margin-bottom: .45rem; font-weight: 600; }
.st3-n { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--plum); color: var(--mist); font-weight: 500; }
.chips { display: grid; gap: .4rem; }
.chip { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .5rem .8rem; border-radius: 12px; background: var(--mist); font-size: .9375rem; line-height: 1.35; max-width: 100%; }
.chip--off { opacity: .6; text-decoration: line-through; text-decoration-thickness: 2px; }
.chip--off i { font-style: normal; flex: none; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: rgba(43, 26, 79, .14); font-size: .8rem; text-decoration: none; }
.chip-go { display: inline-block; padding: .5rem 1.4rem; border-radius: 999px; background: var(--plum); color: var(--mist); font-weight: 500; }
.ways .shot .vc-note { margin-top: .6rem; }

/* Held row, desktop: the stage sticks and each panel slides in from the right over the last. Words and picture travel together, so no frame is empty. */
@media (min-width: 861px) {
  .hold .ways { height: calc(100dvh * 3.4); }
  .hold .row-stage { position: sticky; top: 0; height: 100dvh; overflow: clip; }
  .hold .row { height: 100%; }
  .hold .panel { position: absolute; inset: 0; }
  .hold .panel + .panel { clip-path: inset(0 0 0 100%); }
  .hold .panel-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; align-content: center; gap: clamp(2rem, 5vw, 6rem); padding: calc(var(--bar-top) + var(--bar-h) + .6rem) var(--gutter) 1.2rem; }
  .hold .panel--voice .shot { min-height: 0; height: min(72svh, 660px); }
  .hold .row-stage.is-live .panel, .hold .row-stage.is-live .panel-in, .hold .row-stage.is-live .shot, .hold .row-stage.is-live .cap > *, .hold .row-stage.is-live .shot img { will-change: transform; }
  /* the soft shadow that rides the wipe's edge */
  .wipe-edge { position: absolute; top: 0; bottom: 0; left: -140px; width: 140px; background: linear-gradient(90deg, rgba(43, 26, 79, 0), rgba(43, 26, 79, .22)); opacity: 0; pointer-events: none; will-change: transform, opacity; }
}
@media (max-width: 860px) {
  .panel + .panel { border-top: 1px solid rgba(43, 26, 79, .14); }
  .panel-in { padding-inline: 1.25rem; }
  .panel--voice .shot { min-height: 0; overflow: visible; background: none; display: grid; gap: 1rem; }
  .panel--voice .shot picture { position: relative; display: block; height: min(50svh, 420px); border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, var(--sky), var(--cloud-rose)); }
  .voice-card { margin: 0; width: 100%; }
  .vc-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------------------------------------------------------------- 4. getting it */
.getit-in { max-width: 92rem; margin: 0 auto; padding: clamp(3rem, 8vh, 5rem) var(--gutter) clamp(2rem, 5vh, 3rem); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.getit-main { display: grid; gap: 1.1rem; }
.getit-main h2 { margin-bottom: .4rem; }
.getit-main p { max-width: 40rem; font-size: 1.1875rem; line-height: 1.55; }
.getit-act { display: grid; gap: .9rem; justify-items: start; padding-top: .6rem; font-size: 1.125rem; }
.facts { background: color-mix(in srgb, var(--lavender) 55%, var(--mist)); }
.facts-in { max-width: 92rem; margin: 0 auto; padding: 1.6rem var(--gutter); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 2.4rem; }
.facts-in p { display: grid; gap: .3rem; font-size: 1.1875rem; line-height: 1.45; }
.qa3 { max-width: 92rem; margin: 0 auto; padding: clamp(2rem, 5vh, 3rem) var(--gutter) clamp(2.5rem, 6vh, 4rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2.4rem; }
.qa3 h3 { font: 600 1.375rem/1.25 var(--font); letter-spacing: -.01em; margin-bottom: .5rem; }
.qa3 p { font-size: 1.125rem; line-height: 1.55; max-width: none; }
@media (max-width: 860px) {
  .getit-in { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .getit-act .pill { white-space: normal; text-align: center; width: 100%; }
  .facts-in { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .qa3 { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

/* ---------------------------------------------------------------- cloud slots (home.js loads the art; a missing file leaves the ground) */
.clouds { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cl { position: absolute; inset: -14% -8%; background: 50% 50% / cover no-repeat; visibility: hidden; pointer-events: none; }
.cl.is-on { visibility: visible; will-change: transform; }
.cl--layer { background-size: 120% auto; background-position: 50% 60%; }
.cl--bank { inset: auto -8% -40% -8%; height: 62%; z-index: 2; background-position: 50% 100%; background-size: 100% auto; }
.cl--low { inset: auto -8% -12% -8%; height: 46%; background-position: 50% 100%; background-size: 100% auto; opacity: .9; }
.cl--mist { inset: auto -10%; top: -14vh; height: 28vh; z-index: 3; background-size: 100% 100%; }
.disclose, .statement, .getit, .close, .ways { position: relative; overflow-x: clip; }
.ways > .cl--mist { z-index: 3; }
.getit-in, .facts, .qa3 { position: relative; z-index: 1; }
.panel .clouds { z-index: 0; }
.panel-in { z-index: 1; }
/* cloud rise: opaque frames; the last matches the sky plate, so it takes over from the plate unseen and the hero ends inside the clouds */
.cloud-rise { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; }
.cloud-rise.is-on { visibility: visible; }
/* the footer card: its sky now moves under it, so the card is a tinted fill instead of a live blur */
.close .foot { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(237, 230, 247, .92); }
.close-media { overflow: hidden; }
/* the cloud kit's own strengths */
.cl[data-cl="wisp-far"] { opacity: .7; }
.cl[data-cl="puff-mid"] { opacity: .88; }
.cl--mist { opacity: .85; }