/* HealthPeaks site. Tokens from the app's Dusk theme (Theme.swift), scenes from Landscape.swift. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #121C1C;
  --card: #1F2B29;
  --raised: #2E3D3B;
  --text: #F2F5F2;
  --muted: rgb(242 245 242 / .66);
  --faint: rgb(242 245 242 / .42);
  --line: rgb(242 245 242 / .1);
  --sage: #9EC2A8;
  --ink: #121C1C;
  --sage-mark: #9EC2A8;
  --leaf-mark: #6BDB85;
  --sea-mark: #73B8C2;
  --sun-mark: #EDB86B;
  --ember-mark: #F2994D;
  --coral-mark: #E66B61;
  --lavender-mark: #B8A6E6;
  --soft-mark: rgb(107 219 133 / .6);
  --quiet: rgb(242 245 242 / .62);
  --lift: transparent;
  --scrim: rgb(18 28 28 / .9);

  --r-chip: 14px;
  --r-card: 24px;
  --r-pill: 999px;
  --shadow-card: 0 3px 10px var(--lift);
  --shadow-phone: 0 40px 80px -30px rgb(8 14 14 / .55), 0 0 0 1.5px #7E8784;
  --shadow-bubble: 0 10px 30px -12px rgb(8 14 14 / .45);
  --gutter: 16px;
  --max: 1120px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --morph: cubic-bezier(.45, 0, .55, 1);
  --font: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --icon-cut: var(--bg);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--font);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.022em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.6rem, 1.2rem + 5vw, 5.25rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); line-height: 1.08; }
h3 { font-size: 1.375rem; line-height: 1.25; }
p { margin: 0; }
a { color: var(--sage-mark); text-decoration-thickness: .08em; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: .14em; }
small, .small { font-size: .875rem; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sage-mark); outline-offset: 3px; border-radius: 6px; }
.icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: middle; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--sage); color: var(--ink); font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.prose-w { max-width: calc(680px + 2 * var(--gutter)); }
@media (min-width: 768px) { :root { --gutter: 24px; } }

.section { padding-block: clamp(48px, 8vw, 96px); position: relative; overflow-x: clip; }
.hero, .closing { overflow-x: clip; }
.band-tint { background: color-mix(in srgb, var(--raised) 32%, var(--bg)); }
.band-raised { background: color-mix(in srgb, var(--raised) 55%, var(--bg)); }
.band-tint .wcard, .band-tint details.qa { background: var(--bg); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: .875rem; font-weight: 600; letter-spacing: .02em; color: var(--sage-mark);
}
.lead { color: var(--muted); font-size: 1.125rem; max-width: 62ch; margin-top: 18px; }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.center { text-align: center; margin-inline: auto; }
.center .lead { margin-inline: auto; }

/* ---------- Buttons, badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 22px 8px 18px;
  border-radius: var(--r-pill); border: 1px solid rgb(255 255 255 / .22); background: #0B0F0F; color: #fff;
  text-align: left; cursor: not-allowed; box-shadow: 0 8px 24px -14px rgb(0 0 0 / .6);
}
.badge small { text-transform: uppercase; letter-spacing: .06em !important; font-weight: 600; }
.badge .icon { width: 26px; height: 26px; color: #9EC2A8; }
.badge span { display: flex; flex-direction: column; line-height: 1.15; }
.badge small { font-size: .75rem; opacity: .78; letter-spacing: .01em; }
.badge strong { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: var(--r-pill); font-weight: 600; text-decoration: none; cursor: pointer; border: 0;
  transition: transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-ghost { background: color-mix(in srgb, var(--card) 55%, transparent); color: var(--text); border: 1px solid var(--line); backdrop-filter: blur(10px); }
@media (hover: hover) { .btn-ghost:hover { background: color-mix(in srgb, var(--card) 85%, transparent); } }
.btn-sage { background: var(--sage); color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.notify { margin-top: 16px; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.notify a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-height: 44px; font-size: .9375rem; margin-right: 4px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; z-index: 50; top: 12px; left: 50%; width: min(760px, calc(100% - 24px)); height: 52px;
  transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 10px 30px -18px rgb(8 14 14 / .5);
  transition: transform .5s var(--ease), background-color .6s var(--ease);
}
.nav.is-hidden { transform: translate(-50%, -80px); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: -.01em; min-height: 44px; padding-right: 4px; }
.brand img { width: 30px; height: 30px; border-radius: 24%; background: var(--raised); border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); }
.nav-links { display: none; list-style: none; margin: 0 auto; padding: 0; gap: 2px; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--r-pill);
  color: var(--muted); text-decoration: none; font-size: .9375rem; font-weight: 500; transition: color .2s, background-color .2s;
}
.nav-links a:hover, .nav-links a[aria-current] { color: var(--text); background: color-mix(in srgb, var(--raised) 70%, transparent); }
.nav-end { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: transparent; color: var(--text); cursor: pointer; transition: background-color .2s;
}
.icon-btn:hover { background: color-mix(in srgb, var(--raised) 70%, transparent); }
.icon-btn .icon { width: 20px; height: 20px; }
.nav-cta { min-height: 40px; padding: 0 16px; font-size: .9375rem; white-space: nowrap; }
.brand { flex: none; }
@media (max-width: 440px) { .brand-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nav-end { gap: 2px; } }
.menu-btn { width: auto; padding: 0 12px; gap: 6px; border-radius: var(--r-pill); font-size: .9375rem; font-weight: 600; display: inline-flex; }
@media (min-width: 760px) {
  .nav-links { display: flex; }
  .menu-btn { display: none; }
  .nav { padding-left: 14px; }
}
@media (max-width: 300px) { .nav-cta { display: none; } }
.sheet {
  border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px; width: min(420px, calc(100% - 24px));
  margin: 12px auto auto; background: var(--card); color: var(--text); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .5);
}
.sheet::backdrop { background: rgb(8 14 14 / .45); backdrop-filter: blur(4px); }
.sheet[open] { animation: sheet-in .35s var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-12px); } }
.sheet-top { display: flex; align-items: center; justify-content: space-between; padding: 0 0 4px 12px; }
.sheet ul { list-style: none; margin: 0; padding: 0; }
.sheet li a { display: flex; align-items: center; min-height: 52px; padding: 0 14px; border-radius: var(--r-chip); color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.125rem; }
.sheet li a:hover { background: var(--raised); }
.sheet li + li { border-top: 1px solid var(--line); }

/* ---------- Landscape ---------- */
@property --sky { syntax: "<color>"; inherits: true; initial-value: #1F3430; }
@property --far { syntax: "<color>"; inherits: true; initial-value: #2C4A43; }
@property --middle { syntax: "<color>"; inherits: true; initial-value: #233D37; }
@property --near { syntax: "<color>"; inherits: true; initial-value: #1B302B; }
@property --orb { syntax: "<color>"; inherits: true; initial-value: #E9D8A6; }
@property --orb-x { syntax: "<number>"; inherits: true; initial-value: 262; }
@property --orb-y { syntax: "<number>"; inherits: true; initial-value: 78; }
@property --orb-scale { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --stars { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --birds { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --clouds { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --fog { syntax: "<number>"; inherits: true; initial-value: .35; }
@property --rain { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --snow { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --caps { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mountains { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --beach { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --lake { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --city { syntax: "<number>"; inherits: true; initial-value: 0; }

.landscape {
  --sky: #1F3430; --far: #2C4A43; --middle: #233D37; --near: #1B302B; --orb: #E9D8A6;
  --orb-x: 262; --orb-y: 78; --orb-scale: 1; --stars: 1; --birds: 1; --clouds: 0; --fog: .35;
  --rain: 0; --snow: 0; --caps: 0; --mountains: 1; --beach: 0; --lake: 0; --city: 0;
  /* Fixed colours in the scene, dark by default. */
  --air: color-mix(in srgb, var(--sky), #FFE69E calc(var(--lake) * 100%));
  --bird: #E8EFEA; --cream: #E7E1F6; --wall: #2A2147; --lit: #F2C879; --smoke: #CFC8E6;
  --cab-pine1: #1C1638; --cab-pine2: #241C46; --logs: #4A3D78; --wood: #7A5A3A; --wood-end: #5A3E26; --post: #2A2244;
  --palm: #12302F; --sea1: #2B7A80; --sea2: #1F6068; --sea3: #195159; --sand1: #C7A77E; --sand2: #B0926C;
  --dune-back: #D4B88C; --foam: #E9F1EC; --sunpath: #F6DCA3; --rock: #9C5A55; --bank: #1E3E58;
  --fog-tint: #A9D1B8; --fogcut: 1; --win-op: .75; --flake: #F1ECFB;
  --c1: #1E282E; --c2: #1A2329; --c3: #2A3640; --c4: #2F3C46; --c5: #37454F;
  --sk0: #5C5684; --sk1: #4A4670; --sk2: #322F52; --sk3: #1F1D36;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--sky), #0C1414 25%), color-mix(in srgb, var(--sky), var(--orb) 6%));
  transition-property: --sky, --far, --middle, --near, --orb, --orb-x, --orb-y, --orb-scale, --stars, --birds, --clouds, --fog, --rain, --snow, --caps, --mountains, --beach, --lake, --city;
  transition-duration: 1.6s;
  transition-timing-function: var(--morph);
}
.landscape[data-scene="clouds"] { --sky: #2A3B40; --far: #384E50; --middle: #2D4143; --near: #213234; --orb: #D8CDA8; --orb-y: 92; --stars: .2; --birds: 0; --clouds: .45; --fog: .6; }
.landscape[data-scene="rain"] { --sky: #1F2930; --far: #2E3A40; --middle: #252F35; --near: #1A2328; --orb: #59636A; --orb-y: 92; --orb-scale: .7; --stars: 0; --birds: 0; --clouds: 1; --fog: .8; --rain: 1; }
.landscape[data-scene="sunset"] { --sky: #7A4A4A; --far: #5F3A42; --middle: #4A2E38; --near: #38232C; --orb: #F4BC82; --orb-y: 112; --orb-scale: 1.5; --stars: 0; --birds: 0; --fog: .15; }
.landscape[data-scene="beach"] { --sky: #3C8A91; --orb: #F8DFA8; --orb-x: 178; --orb-y: 60; --orb-scale: 1.15; --stars: 0; --fog: 0; --mountains: 0; --beach: 1; }
.landscape[data-scene="lakeside"] { --sky: #2C6470; --far: #D98C7A; --middle: #B85A58; --near: #1E3E58; --orb: #FFF0C4; --orb-x: 170; --orb-y: 112; --orb-scale: .8; --stars: 0; --fog: 0; --lake: 1; }
.landscape[data-scene="cabin"] { --sky: #2C2455; --far: #4A3F7D; --middle: #3A316A; --near: #C4BBE4; --orb: #EBD79E; --orb-x: 96; --orb-y: 62; --orb-scale: .8; --stars: .8; --birds: 0; --fog: .25; --snow: 1; --caps: 1; }
.landscape[data-scene="city"] { --sky: #3A3656; --far: #5A5482; --middle: #4E4976; --near: #433E69; --orb: #EFC9A0; --orb-x: 90; --orb-y: 86; --orb-scale: 1.05; --stars: .5; --birds: 0; --fog: 0; --city: 1; }
/* The moment after All good: by night the sky deepens, by day it turns golden. */
.landscape.settled[data-scene] { --sky: #192A28; --orb-scale: 1.08; }
/* The closing night: Clear evening with the night tint. */
.landscape.night { --sky: #172625; --stars: 1; }

.ls-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ls-stars { opacity: var(--stars); }
.ls-stars circle { fill: var(--bird); animation: twinkle 4s ease-in-out infinite alternate; }
.ls-lake-sky { opacity: var(--lake); }
.ls-orb-wrap { transform: translate(calc(var(--orb-x) * 1px), calc(var(--orb-y) * 1px)) scale(var(--orb-scale)); }
.ls-orb-disc { fill: var(--orb); }
.ls-birds { opacity: var(--birds); }
.ls-flock { animation: flock 20s linear infinite; }
.ls-flock path { fill: none; stroke: var(--bird); stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: flap .35s ease-in-out infinite alternate; }
.ls-mountains { opacity: var(--mountains); }
.ls-caps { fill: var(--cream); opacity: var(--caps); }
.ls-woods { opacity: var(--lake); }
.ls-fog { opacity: calc(var(--fog) * var(--k) * var(--fogcut)); }
.ls-fog ellipse { animation: fog 36s ease-in-out infinite alternate; }
.ls-fog2 ellipse { animation-duration: 42s; animation-direction: alternate-reverse; }
.pine {
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: rotate(calc(var(--lean, 0) * 1deg));
  transition: transform .9s var(--ease);
  animation: breeze 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.73s);
}
.pine:nth-child(3n) { animation-duration: 5.2s; }
.pine:nth-child(3n + 1) { animation-duration: 7s; }
.pine.leaning { transition-duration: .25s; }
.ls-nearpines { opacity: calc(1 - var(--city)); }
.ls-nearpines .pine { fill: color-mix(in srgb, var(--near), #0C1414 55%); }
.ls-cabin { opacity: var(--caps); }
.ls-smoke circle { fill: var(--smoke); opacity: 0; transform-box: fill-box; transform-origin: center; animation: smoke 6s linear infinite; }
.ls-spill, .ls-window { animation: breathe 5s ease-in-out infinite alternate; }
.ls-window, .ls-lantern { fill: var(--lit); }
.ls-lantern-glow { fill: var(--lit); opacity: .28; }
.ls-fair { animation: drift 40s ease-in-out infinite alternate; --d: 12px; }
.ls-fair-city { fill: color-mix(in srgb, var(--sky), #0C1414 30%); opacity: var(--city); }
.ls-fair-pale { fill: var(--foam); opacity: calc(max(var(--beach), var(--lake)) * .4); }
.ls-beach { opacity: var(--beach); }
.ls-waves { fill: none; stroke: var(--foam); stroke-opacity: .34; stroke-width: .9; stroke-linecap: round; animation: drift 11s ease-in-out infinite alternate; --d: 6px; }
.ls-surf { fill: none; stroke: var(--foam); stroke-opacity: .8; stroke-width: 2.5; animation: surf 6s ease-in-out infinite alternate; }
.ls-crest { fill: none; stroke: var(--foam); stroke-opacity: .28; stroke-width: .8; }
.ls-palm path { fill: var(--palm); }
.ls-palm .ls-tuft { fill: none; stroke: var(--palm); stroke-width: 1.3; stroke-linecap: round; }
.ls-crown { transform-origin: 0 0; animation: crown 6s ease-in-out infinite alternate; }
.ls-city { opacity: var(--city); }
.ls-shade { fill: rgb(0 0 0 / .12); }
.ls-lights { fill: #FFD45C; opacity: var(--win-op); animation: lights 7s ease-in-out infinite alternate; }
.ls-lights1 { animation-delay: -2.3s; }
.ls-lights2 { animation-delay: -4.6s; }
.ls-lake { opacity: var(--lake); }
.ls-falls { fill: #F6F3DE; }
.ls-splash { fill: #EAF4F0; opacity: .7; }
.ls-bank { fill: var(--bank); }
.ls-pale { fill: #EAF4F0; opacity: .3; }
.ls-ripples { fill: none; stroke: var(--foam); stroke-opacity: .36; stroke-width: .9; stroke-linecap: round; animation: drift 7s ease-in-out infinite alternate; --d: 2px; }
.ls-stone { fill: color-mix(in srgb, var(--bank), #0C1414 45%); }
.ls-clouds { opacity: var(--clouds); transform: translateY(calc((1 - var(--clouds)) * -50px)); }
.ls-bank0 { animation: drift 30s ease-in-out infinite alternate; --d: 60px; }
.ls-bank1 { animation: drift 24s ease-in-out infinite alternate-reverse; --d: 50px; }
.ls-bank2 { animation: drift 38s ease-in-out infinite alternate; --d: 70px; }
.ls-rain { opacity: var(--rain); }
.ls-rain line { stroke-linecap: round; animation: fall var(--t) linear infinite; animation-delay: var(--dl); }
.ls-snow { opacity: var(--snow); }
.ls-snow circle { fill: var(--flake); animation: snowfall var(--t) linear infinite; animation-delay: var(--dl); }

@keyframes twinkle { from { opacity: .6; } to { opacity: 1; } }
@keyframes flock { from { transform: translate(-40px, 0); } to { transform: translate(380px, -26px); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.5); } }
@keyframes fog { 0% { transform: translateX(-24px); opacity: .75; } 50% { opacity: 1; } 100% { transform: translateX(24px); opacity: .75; } }
@keyframes breeze { from { rotate: -.8deg; } to { rotate: .8deg; } }
@keyframes smoke { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 25% { opacity: .5; } 100% { transform: translate(14px, -46px) scale(1.7); opacity: 0; } }
@keyframes breathe { from { opacity: .82; } to { opacity: 1; } }
@keyframes drift { from { transform: translateX(calc(var(--d) * -1)); } to { transform: translateX(var(--d)); } }
@keyframes surf { from { transform: translate(-6px, -1.5px); } to { transform: translate(6px, 1.5px); } }
@keyframes crown { from { rotate: -2deg; } to { rotate: 2deg; } }
@keyframes lights { from { opacity: calc(var(--win-op) * .8); } to { opacity: var(--win-op); } }
@keyframes fall { from { transform: translate(0, 0); } to { transform: translate(-78px, 310px); } }
@keyframes snowfall { from { transform: translate(0, 0); } to { transform: translate(var(--dx), 310px); } }

/* Ambient motion runs only while a landscape is on screen. */
html.js .landscape:not(.is-visible) *, html.js .landscape.is-still *, html.tab-hidden .landscape *, html.tab-hidden .bubbles li { animation-play-state: paused !important; }
.hero .ls-stars circle.off { opacity: 0 !important; animation: none; }
.hero .ls-rain line.dim { stroke-opacity: .2; }
.hero .ls-flock { animation-name: flock-hero; }
@keyframes flock-hero { from { transform: translate(calc(var(--fx, -40) * 1px), 0); } to { transform: translate(400px, -26px); } }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; padding: 116px 0 40px; }
.hero > .landscape { position: absolute; inset: 0; z-index: 0; }
.hero-fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--bg) 60%, transparent) 62%, var(--scrim) 78%, var(--bg) 96%);
}
.hero-inner { position: relative; z-index: 2; }
.hero-copy { max-width: 720px; }
.hero h1 { margin-top: 4px; }
.hero-sub { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--muted); max-width: 56ch; margin-top: 18px; }
.hero .cta-row { margin-top: 26px; }
.hero .notify { margin-top: 10px; }
.hero-for { margin-top: 12px; font-weight: 600; color: var(--text); max-width: 56ch; }
.weather-hint { font-size: .8125rem; font-weight: 600; color: var(--sage-mark); margin-bottom: 8px; letter-spacing: .02em; }
.hero-copy, .hero .weather { transition: opacity .2s linear; }
@media (min-width: 1024px) {
  .hero-fade {
    background:
      linear-gradient(to bottom, transparent 82%, var(--bg) 100%),
      linear-gradient(100deg, var(--scrim) 0%, var(--scrim) 30%, color-mix(in srgb, var(--bg) 75%, transparent) 50%, transparent 72%);
    mask-image: linear-gradient(to bottom, transparent 4%, #000 18%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 18%);
  }
  .hero-fade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 82%, var(--bg) 100%); }
}
@media (max-width: 767px) {
  /* On phones the chips sit over the landscape they change; below the copy they'd be a screen away from it. */
  /* The landscape gets the top of the screen to itself, and the chips start where its ground does. */
  .hero { min-height: 0; display: block; padding: max(300px, calc(54svh - 36px)) 0 32px; }
  .hero-inner { display: flex; flex-direction: column; }
  .hero .weather { order: -1; margin: 0 0 22px; }
  .hero .weather-live { margin-top: 8px; font-size: 1.0625rem; }
  .hero > .landscape { bottom: auto; height: max(336px, 54svh); }
  .hero-fade { bottom: auto; height: max(336px, 54svh); background: linear-gradient(to bottom, transparent 80%, var(--bg) 100%); }
}

/* Weather control */
.weather { margin-top: 26px; }
.weather-groups { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 6px; margin: -4px -2px 0; }
.weather-groups::-webkit-scrollbar { display: none; }
.wgroup { display: flex; flex-direction: column; gap: 6px; flex: none; }
.wgroup-label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); padding-left: 4px; }
.wgroup-chips { display: flex; gap: 6px; padding: 5px; border-radius: 20px; background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.chip {
  scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 78px; min-height: 64px; padding: 8px 8px 7px; border-radius: var(--r-chip); border: 0; background: transparent;
  color: var(--text); font-size: .8125rem; font-weight: 600; line-height: 1.15; cursor: pointer; text-align: center;
  transition: background-color .35s var(--ease), transform .35s var(--ease), color .35s;
}
.chip .icon { width: 24px; height: 24px; transition: transform .5s var(--ease); }
.chip:hover { background: color-mix(in srgb, var(--raised) 55%, transparent); }
.chip[aria-checked="true"] { background: var(--raised); }
.chip[aria-checked="true"] .icon { transform: translateY(-1px) scale(1.08); }
.chip:active { transform: scale(.96); }
.c-sun { color: var(--sun-mark); }
.c-sea { color: var(--sea-mark); }
.c-sage { color: var(--sage-mark); }
.c-leaf { color: var(--leaf-mark); }
.c-soft { color: var(--soft-mark); }
.c-quiet { color: var(--quiet); }
.c-text { color: var(--text); }
.weather-live { margin-top: 14px; min-height: 1.6em; font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; transition: opacity .25s var(--ease); }
.weather-live.swap { opacity: 0; }
.weather-live .m { color: var(--muted); font-weight: 400; }
@media (max-width: 767px) {
  .weather-groups { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 28px), transparent); }
}

/* ---------- Reveals ---------- */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--n, 0) * 80ms); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Phone ---------- */
.phone {
  --w: 320px; position: relative; width: var(--w); max-width: 100%; padding: calc(var(--w) * .035);
  border-radius: calc(var(--w) * .165); background: #0B0F0F; box-shadow: var(--shadow-phone);
}
.phone img { width: 100%; border-radius: calc(var(--w) * .13); aspect-ratio: 948 / 2062; object-fit: cover; background: #121C1C; }
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; background: #7E8784; border-radius: 2px; }
.phone::before { left: -3px; top: 22%; height: 10%; }
.phone::after { right: -3px; top: 28%; height: 14%; }

/* ---------- Phone demo ---------- */
.demo .screen { position: relative; overflow: hidden; border-radius: calc(var(--w) * .13); }
.demo .screen img { border-radius: 0; }
.demo-sky { position: absolute; inset: 0 0 auto; height: 32%; background: linear-gradient(to bottom, rgb(14 23 26 / .55), rgb(14 23 26 / .3) 70%, transparent); opacity: 0; transition: opacity 1.6s var(--morph), background-color 1.6s var(--morph); }
.demo[data-step="settled"] .demo-sky, .demo[data-step="tap-food"] .demo-sky { opacity: 1; }
.demo[data-step="cloudy"] .demo-sky { opacity: .7; background: linear-gradient(to bottom, rgb(42 59 64 / .7), rgb(42 59 64 / .35) 70%, transparent); }
.demo-clouds { position: absolute; inset: 0 0 auto; height: 26%; opacity: 0; transform: translateY(-30%); transition: opacity 1.6s var(--morph), transform 1.6s var(--morph); }
.demo-clouds span { position: absolute; height: 9%; border-radius: 99px; background: #3A4A52; box-shadow: 0 -6px 0 2px #3A4A52; }
.demo-clouds span:nth-child(1) { left: 6%; top: 20%; width: 46%; height: 12%; }
.demo-clouds span:nth-child(2) { left: 48%; top: 10%; width: 52%; height: 14%; background: #33424A; box-shadow: 0 -7px 0 2px #33424A; }
.demo-clouds span:nth-child(3) { left: 24%; top: 42%; width: 40%; height: 9%; background: #43535B; box-shadow: none; }
.demo[data-step="cloudy"] .demo-clouds { opacity: .92; transform: none; }
.demo-ag { position: absolute; left: 8.1%; width: 83.6%; top: 58.3%; height: 5.6%; border-radius: 99px; display: flex; align-items: center; justify-content: center; gap: 4%;
  background: #B5D4BE; color: #121C1C; font-size: calc(var(--w) * .043); font-weight: 650; opacity: 0; transform: scale(.98); transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .8s var(--ease); }
.demo-ag .icon { width: 1.1em; height: 1.1em; }
.demo[data-step="settled"] .demo-ag, .demo[data-step="tap-food"] .demo-ag { opacity: 1; transform: none; box-shadow: 0 0 0 6px rgb(158 194 168 / .25); }
.demo-tap { position: absolute; width: 12%; aspect-ratio: 1; border-radius: 50%; left: 50%; top: 61%; translate: -50% -50%; background: rgb(242 245 242 / .55); border: 2px solid rgb(242 245 242 / .9);
  opacity: 0; scale: 1.3; transition: opacity .35s var(--ease), scale .35s var(--ease), left .8s var(--ease), top .8s var(--ease); pointer-events: none; }
.demo[data-step="tap-ag"] .demo-tap { opacity: 1; scale: .85; }
.demo[data-step="tap-food"] .demo-tap { opacity: 1; scale: .85; left: 21%; top: 69.5%; }
.demo[data-step="cloudy"] .demo-tap { left: 21%; top: 69.5%; }
.bubble { transition: scale .45s cubic-bezier(.3, 1.4, .5, 1), box-shadow .6s var(--ease); }
.bubble.pop { scale: 1.08; box-shadow: var(--shadow-bubble), 0 0 0 4px color-mix(in srgb, var(--sage) 40%, transparent); }

/* ---------- App in your hand ---------- */
.app-grid { display: grid; gap: 48px; align-items: center; }
.app-stage { position: relative; display: grid; justify-items: center; }
.bubble {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 12px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--card) 82%, transparent); border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--shadow-bubble); font-weight: 600; font-size: .9375rem; white-space: nowrap;
}
.bubble .icon { width: 22px; height: 22px; }
.bubbles { list-style: none; padding: 0; margin: 0; }
.bubbles li { position: absolute; z-index: 2; animation: bob 5s ease-in-out infinite alternate; }
.bubbles li:nth-child(1) { left: calc(50% - 175px); top: 14%; }
.bubbles li:nth-child(2) { right: calc(50% - 185px); top: 34%; animation-delay: -1.25s; }
.bubbles li:nth-child(3) { left: calc(50% - 185px); top: 60%; animation-delay: -2.5s; }
.bubbles li:nth-child(4) { right: calc(50% - 170px); top: 80%; animation-delay: -3.75s; }
.app-stage { padding: 24px 0; }
.app-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(560px, 140%); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, color-mix(in srgb, var(--sage) 30%, transparent), transparent 62%); pointer-events: none; }
.app-stage .phone { z-index: 1; }
@media (max-width: 480px) {
  .bubble { font-size: .8125rem; padding: 8px 12px 8px 10px; }
  .bubble .icon { width: 18px; height: 18px; }
  .bubbles li:nth-child(1) { left: 0; } .bubbles li:nth-child(2) { right: 0; }
  .bubbles li:nth-child(3) { left: 0; } .bubbles li:nth-child(4) { right: 0; }
}
@media (min-width: 900px) {
  .app-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .app-copy { order: 2; }
  .app-stage { padding: 40px 0; }
  /* The stage is the left column here, so the left bubbles may lean into the gutter but never past the screen edge. */
  .bubbles li:nth-child(1) { left: max(8px - var(--gutter), calc(50% - 250px)); top: 18%; }
  .bubbles li:nth-child(2) { right: calc(50% - 290px); top: 34%; }
  .bubbles li:nth-child(3) { left: max(8px - var(--gutter), calc(50% - 280px)); top: 62%; }
  .bubbles li:nth-child(4) { right: calc(50% - 240px); top: 80%; }
}
@keyframes bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
.steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 12px; }
.step { display: flex; gap: 16px; align-items: center; padding: 16px 20px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); }
.step-n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sage-mark); font-size: 1.125rem; min-width: 2ch; }
.step strong { display: block; font-size: 1.0625rem; }
.step span { color: var(--muted); font-size: .9375rem; }
.cta-repeat { margin-top: 40px; }
@media (max-width: 767px) { .phone.app-phone { --w: 260px; } }

/* ---------- Kind of week cards ---------- */
.wcards { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wcard {
  display: flex; flex-direction: column; text-align: left; padding: 0; border: 0; border-radius: var(--r-card); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow-card); cursor: pointer; color: var(--text);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.wcard.playing { transform: translateY(-4px); }
@media (hover: hover) { .wcard:hover { transform: translateY(-4px); } }
.wcard .landscape { aspect-ratio: 340 / 150; width: 100%; }
.wcard-body { padding: 18px 20px 22px; }
.wcard h3 { display: flex; align-items: center; gap: 8px; font-size: 1.1875rem; }
.wcard h3 .icon { width: 22px; height: 22px; }
.wcard p { color: var(--muted); font-size: .9375rem; margin-top: 6px; }

@media (max-width: 767px) {
  .wcards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .wcards::-webkit-scrollbar { display: none; }
  .wcard { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ---------- Time off: a teaser, the places stay for the app ---------- */
.timeoff-split { display: grid; gap: 40px; align-items: center; }
.timeoff-stage { display: grid; justify-items: center; position: relative; }
.timeoff-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(520px, 130%); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, color-mix(in srgb, var(--sea-mark) 22%, transparent), transparent 62%); pointer-events: none; }
.timeoff-phone { --w: 300px; z-index: 1; }
.timeoff-copy .teaser { text-align: left; margin: 20px 0 0; }
.timeoff-copy .pause-card { margin: 24px 0 0; }
@media (min-width: 900px) { .timeoff-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; } }
@media (max-width: 767px) { .timeoff-phone { --w: 250px; } }
.teaser { margin: 28px auto 0; max-width: 62ch; text-align: center; color: var(--muted); }
.never { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; margin-right: 6px; border-radius: var(--r-pill); background: var(--raised); color: var(--text); font-size: .8125rem; font-weight: 600; vertical-align: 1px; }
.never .icon { width: 14px; height: 14px; color: var(--sage-mark); }

/* ---------- Kind cards ---------- */
.kcards { display: grid; gap: 16px; }
.kcard { padding: 26px 24px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); }
.kcard .icon { width: 28px; height: 28px; margin-bottom: 14px; }
.kcard h3 { font-size: 1.25rem; }
.kcard p { color: var(--muted); margin-top: 8px; }
.footnote { color: var(--muted); font-size: .875rem; margin-top: 24px; max-width: 62ch; }
@media (min-width: 768px) { .kcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Widgets ---------- */
.widgets-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .widgets-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.homescreen { container-type: inline-size; width: min(100%, 520px); margin-inline: auto; position: relative; border-radius: 44px; overflow: hidden; box-shadow: var(--shadow-phone); }
.homescreen > .landscape.wallpaper { position: absolute; inset: 0; filter: blur(14px) saturate(1.1); transform: scale(1.15); }
.homescreen > .wall-dim { position: absolute; inset: 0; background: rgb(8 14 14 / .18); }
.hs-inner { --u: calc(100cqi / 400); position: relative; padding: calc(var(--u) * 18); display: grid; gap: calc(var(--u) * 22); }
.hs-row { display: flex; gap: calc(var(--u) * 24); align-items: flex-start; justify-content: space-between; }
/* Matches HealthPeaksWidgets WeekWidgetView: a 2 by 2 grid of 44pt marks, 12pt apart, on the card. */
.widget.widget-week { background: var(--card); display: grid; grid-template-columns: repeat(2, calc(var(--u) * 44)); grid-template-rows: repeat(2, calc(var(--u) * 44)); gap: calc(var(--u) * 12) calc(var(--u) * 24); place-content: center; justify-content: center; }
.widget.widget-week .wk { width: calc(var(--u) * 44); height: calc(var(--u) * 44); }
.hs-apps { display: grid; grid-template-columns: repeat(2, calc(var(--u) * 62)); gap: calc(var(--u) * 22) calc(var(--u) * 24); margin-left: auto; }
.hs-apps.wide { grid-template-columns: repeat(4, calc(var(--u) * 62)); justify-content: space-between; margin: 0; }
.hs-app { width: calc(var(--u) * 62); aspect-ratio: 1; border-radius: 23%; background: rgb(255 255 255 / .16); backdrop-filter: blur(6px); }
.widget {
  position: relative; overflow: hidden; border-radius: calc(var(--u) * 22); color: #F2F5F2;
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / .6);
}
.widget .landscape { position: absolute; inset: 0; }
.widget-s { width: calc(var(--u) * 170); height: calc(var(--u) * 170); padding: calc(var(--u) * 14); display: flex; flex-direction: column; justify-content: space-between; }
.widget-m { width: 100%; height: calc(var(--u) * 170); border-radius: calc(var(--u) * 24); padding: calc(var(--u) * 16); display: flex; }
.widget-title { position: relative; font-weight: 600; font-size: calc(var(--u) * 15); line-height: 1.2; text-shadow: 0 1px 8px rgb(0 0 0 / .35); }
.widget-m .widget-title { font-size: calc(var(--u) * 17); }
.allgood {
  position: relative; display: grid; width: 100%; min-height: max(40px, calc(var(--u) * 36)); padding: 0 calc(var(--u) * 10);
  border: 0; border-radius: var(--r-pill); background: rgb(158 194 168 / 1); color: #121C1C; font-weight: 650; font-size: max(12px, calc(var(--u) * 14));
  cursor: pointer; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), background-color .45s var(--ease), color .45s var(--ease);
}
.allgood > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); transition: opacity .4s var(--ease), transform .4s var(--ease); white-space: nowrap; }
.allgood .icon { width: 1.05em; height: 1.05em; }
.allgood .ag-done { opacity: 0; transform: translateY(4px); justify-content: flex-start; font-weight: 600; font-size: .95em; }
.allgood:active { transform: scale(.96); }
.widget.is-done .allgood { background: rgb(158 194 168 / 0); color: inherit; padding-left: 0; }
.widget.is-done .ag-idle { opacity: 0; transform: scale(.96); }
.widget.is-done .ag-done { opacity: 1; transform: none; }
.widget .undo {
  position: absolute; z-index: 2; top: calc(var(--u) * 6); right: calc(var(--u) * 6); min-height: 36px; min-width: 44px; padding: 0 10px;
  border: 0; border-radius: var(--r-pill); background: rgb(11 15 15 / .45); color: #F2F5F2; font-size: max(12px, calc(var(--u) * 12)); font-weight: 600;
  cursor: pointer; backdrop-filter: blur(6px); animation: fade-in .4s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } }
.widget-s > .widget-title, .widget-s > .allgood { position: relative; }
.widget-m .left { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; width: calc(var(--u) * 150); }
.widget-m .haze { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to right, transparent 35%, color-mix(in srgb, var(--card) 72%, transparent) 62%, color-mix(in srgb, var(--card) 80%, transparent) 100%); }
.widget-m .week { position: relative; z-index: 1; margin-left: auto; width: calc(var(--u) * 124); display: grid; grid-template-columns: repeat(2, calc(var(--u) * 34)); gap: calc(var(--u) * 14) calc(var(--u) * 22); align-content: center; justify-content: center; }
.wk { position: relative; width: calc(var(--u) * 34); height: calc(var(--u) * 34); display: grid; place-items: center; }
.wk .icon { width: 100%; height: 100%; }
.wk .spark { position: absolute; right: -20%; top: -16%; width: 32%; height: 32%; color: var(--leaf-mark); }
.widget-cap { text-align: center; color: #F2F5F2; font-size: max(12px, calc(var(--u) * 13)); margin-top: calc(var(--u) * 6); font-weight: 500; text-shadow: 0 1px 4px rgb(0 0 0 / .5); position: relative; }
.points { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 18px; }
.points li { display: flex; gap: 14px; }
.points .icon { width: 26px; height: 26px; margin-top: 2px; }
.points strong { display: block; }
.points span { color: var(--muted); }

/* ---------- Trends ---------- */
.trends-grid { display: grid; gap: 48px; align-items: center; }
.trends-stage { display: grid; justify-items: center; position: relative; }
.journey { position: absolute; bottom: 18%; right: max(0px, calc(50% - 230px)); }
@media (min-width: 900px) { .trends-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
@media (max-width: 767px) { .trends-stage .phone { --w: 260px; } .journey { position: static; margin-top: 20px; } }
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; list-style: none; padding: 0; }
.legend li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: var(--r-pill); background: var(--card); box-shadow: var(--shadow-card); font-size: .875rem; font-weight: 600; }
.legend .icon { width: 18px; height: 18px; }

/* ---------- Tour ---------- */
.tour-scroll { position: relative; height: calc(100svh + (var(--steps, 3) * 60vh)); }
.tour-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding-top: 64px; overflow-x: clip; }
.tour-head { text-align: center; }
.tour-head .lead { margin-inline: auto; }
.tour-wrap { position: relative; }
.tour-nav { position: absolute; left: 0; right: 0; top: 42%; z-index: 3; display: flex; justify-content: space-between; padding-inline: max(8px, calc((100vw - var(--max)) / 2 - 56px)); pointer-events: none; }
.tour-nav .icon-btn { pointer-events: auto; background: color-mix(in srgb, var(--card) 85%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow-bubble); border: 1px solid var(--line); transition: opacity .3s; }
.tour-nav .icon-btn:disabled { opacity: 0; pointer-events: none; }
/* Four layers, four jobs: the row follows the scroll, each item glides in, its arc turns, its phone lifts on hover. */
.tour-strip { --item: 260px; display: flex; list-style: none; margin: 0; padding: 24px calc(50% - var(--item) / 2) 16px; will-change: transform; touch-action: pan-y; cursor: grab; outline-offset: -6px; }
.tour-strip li { flex: none; width: var(--item); display: flex; justify-content: center; }
html.js .tour-strip li { opacity: 0; transform: translateX(80px); transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1); transition-delay: calc(var(--n, 0) * 90ms); }
html.js .tour-strip li.in { opacity: 1; transform: none; }
.tour-strip .arc { display: flex; flex-direction: column; align-items: center; gap: 14px; will-change: transform; backface-visibility: hidden; }
.tour-strip .phone { --w: 230px; transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s cubic-bezier(.2, .7, .3, 1); }
.tour-video { display: block; width: 100%; height: auto; aspect-ratio: 948 / 2062; object-fit: cover; border-radius: calc(var(--w) * .13); background: #121C1C; }
@media (hover: hover) { .tour-strip li.is-center:hover .phone { transform: translateY(-6px); box-shadow: 0 48px 90px -30px rgb(8 14 14 / .6), 0 0 0 1.5px #7E8784; } }
.tour-cap { display: flex; gap: 8px; align-items: baseline; justify-content: center; width: var(--w, 230px); font-weight: 600; text-align: center; text-wrap: balance; }
.tour-cap b { font-variant-numeric: tabular-nums; color: var(--sage-mark); flex: none; }
.cta-after-tour { padding-block: 8px clamp(48px, 8vw, 96px); }
@media (max-width: 767px) {
  .tour-strip { --item: 70vw; }
  .tour-strip .phone { --w: min(58vw, 46svh); }
  .tour-cap { width: 62vw; }
  .tour-nav .icon-btn { width: 40px; height: 40px; }
}

/* ---------- Privacy band ---------- */
.privacy-card { border-radius: calc(var(--r-card) + 8px); border: 1px solid color-mix(in srgb, var(--sage) 35%, transparent); background: color-mix(in srgb, var(--sage) 9%, var(--card)); box-shadow: var(--shadow-card); padding: clamp(28px, 5vw, 64px); display: grid; gap: 40px; }
.privacy-card .lock { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--raised); color: var(--sage-mark); margin-bottom: 18px; }
.privacy-card .lock .icon { width: 28px; height: 28px; }
.rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.rows li { display: flex; gap: 14px; }
.rows .ri { position: relative; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--raised); display: grid; place-items: center; color: var(--sage-mark); --icon-cut: var(--raised); }
.rows .ri .icon { width: 22px; height: 22px; }
.rows .ri .icon + .icon { position: absolute; }
.rows strong { display: block; }
.rows span { color: var(--muted); }
.privacy-more { margin-top: 26px; display: grid; gap: 10px; }
.privacy-more p { color: var(--muted); font-size: .875rem; }
@media (min-width: 900px) { .privacy-card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; } }

/* ---------- FAQ, details ---------- */
.faq { display: grid; gap: 12px; }
details.qa { border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); interpolate-size: allow-keywords; overflow: hidden; }
details.qa::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
details.qa[open]::details-content { block-size: auto; }
details.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 18px 22px; cursor: pointer; font-weight: 600; font-size: 1.0625rem; border-radius: var(--r-card); }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary .icon { width: 20px; height: 20px; color: var(--muted); transition: transform .45s var(--ease); }
details.qa[open] summary .icon { transform: rotate(180deg); }
details.qa .a { padding: 0 22px 22px; color: var(--muted); }

/* ---------- Closing ---------- */
.closing { position: relative; min-height: min(80vh, 640px); display: grid; place-items: center; text-align: center; padding: 96px 0; }
.closing > .landscape.night { --orb-x: 300; --orb-y: 64; --birds: 0; }
@media (max-width: 767px) { .closing > .landscape.night { --orb-x: 232; --orb-y: -30; } }
.closing > .landscape { position: absolute; inset: 0; z-index: 0; }
.closing::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, var(--bg) 0%, transparent 16%, transparent 80%, var(--bg) 100%); }
.closing-inner { position: relative; z-index: 2; color: #F2F5F2; display: grid; justify-items: center; gap: 18px; }
.closing-inner .app-icon { width: 88px; height: 88px; border-radius: 22%; animation: glow 4s ease-in-out infinite alternate; }
@keyframes glow { from { box-shadow: 0 0 0 0 rgb(233 216 166 / .0), 0 18px 40px -16px rgb(0 0 0 / .6); } to { box-shadow: 0 0 46px 6px rgb(233 216 166 / .28), 0 18px 40px -16px rgb(0 0 0 / .6); } }
.closing-inner p { color: rgb(242 245 242 / .78); max-width: 46ch; }
.closing .notify a { color: #B8D6C0; }
.closing .notify p { color: rgb(242 245 242 / .7); }
.closing .scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 46% 42% at 50% 50%, rgb(14 23 26 / .55), transparent 80%); pointer-events: none; }

/* ---------- Footer ---------- */
.footer { padding: 28px 0 40px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.footer-row { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; }
.footer nav ul { display: flex; gap: 6px 18px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.footer a { color: var(--text); min-height: 44px; display: inline-flex; align-items: center; }
.footer .fine { margin-top: 10px; display: grid; gap: 4px; }

/* ---------- Support and privacy pages ---------- */
.page-head { position: relative; padding-top: 76px; }
.page-head > .landscape { width: min(var(--max), calc(100% - 2 * var(--gutter))); height: 240px; margin-inline: auto; border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.page-title { padding-top: 32px; }
.page-head p { color: var(--muted); margin-top: 6px; font-size: 1.0625rem; }
.page-head h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem); }
@media (max-width: 767px) { .page-head > .landscape { height: 180px; } .page-title { padding-top: 24px; } }
.prose { padding-block: 32px clamp(64px, 10vw, 112px); line-height: 1.7; }
.prose h2 { font-size: 1.5rem; line-height: 1.25; margin: 48px 0 12px; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 14px; }
.prose ul { padding-left: 1.25em; margin: 12px 0 0; }
.prose li + li { margin-top: 6px; }
.prose .muted { color: var(--muted); font-size: .9375rem; }
.prose .intro { color: var(--muted); font-size: 1.125rem; }
.summary-card { margin-top: 8px; padding: 24px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.summary-card h2 { margin-top: 0; display: flex; align-items: center; gap: 10px; }
.summary-card h2 .icon { color: var(--sage-mark); width: 24px; height: 24px; }
.contact-card { margin-top: 24px; padding: 22px 24px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); display: flex; gap: 14px; align-items: flex-start; }
.contact-card .icon { width: 26px; height: 26px; color: var(--sage-mark); margin-top: 2px; }
.contact-card h2 { margin: 0 0 4px; }
.prose .faq { margin-top: 16px; }
.prose a { overflow-wrap: anywhere; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, .btn, .icon-btn, .skip { transition: none !important; }
  .sheet[open] { animation: none; }
  .landscape { transition-duration: 0s; }
  .landscape *, .bubbles li, .closing-inner .app-icon { animation: none !important; }
  .demo * { transition: none !important; }
  .pine { transition: none; }
  .ls-smoke circle { opacity: .3; }
  html.js .reveal { transform: none; transition: opacity .3s linear; transition-delay: 0s; }
  html.js .tour-strip li { transform: none; transition: opacity .3s linear; transition-delay: 0s; }
  .tour-strip .phone { transition: none; }
  .tour-scroll { height: auto; padding-block: clamp(48px, 8vw, 96px) 0; }
  .tour-sticky { position: static; height: auto; padding-top: 0; }
  .tour-nav { display: none; }
  .tour-strip { transform: none !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px 16px; padding: 24px var(--gutter) 0; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; cursor: auto; }
  .tour-strip li { width: auto; }
  .tour-strip .arc { transform: none !important; opacity: 1 !important; }
  .tour-strip .phone { --w: 200px; }
  .nav, .chip, .chip .icon, .wcard, .tour-strip .phone, .allgood, .done-line, details.qa::details-content, details.qa summary .icon { transition-duration: .01s !important; }
}

/* ---------- Additions: pause card, trends notes, kind cards playing on view ---------- */
.pause-card { margin: 24px auto 0; max-width: 720px; display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border-radius: var(--r-card); background: var(--card); border: 1px solid color-mix(in srgb, var(--sage) 30%, transparent); }
.pause-card .icon { width: 26px; height: 26px; color: var(--sage-mark); margin-top: 2px; }
.pause-card p { color: var(--muted); }
.pause-card strong { color: var(--text); }
.notes-line { font-size: 1rem; margin-top: 14px; }
.recap { position: absolute; top: 16%; left: max(0px, calc(50% - 250px)); white-space: normal; max-width: 230px; }
@media (max-width: 767px) { .recap { position: static; margin-top: 10px; max-width: none; } }