/* =============================================================================
   furrie.in — landing page styles ("After Dark / Daylight", same system as the app)
   Mobile-first. Breakpoints (min-width): 481px, 769px, 1025px, 1440px.
   Covers the project's 480 / 768 / 1024 / desktop targets from CLAUDE.md.
   Tokens only below the token block. No libraries; every animation is hand-built.
   ============================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --teal: #86D0C6; --amber: #F0B25A; --coral: #F09A7E; --iris: #A3ADFF; --sage: #A9D39B;
  --teal-d: #1F7A6E; --amber-d: #9A5B00; --coral-d: #B4472B; --iris-d: #3B47B8; --sage-d: #3F7A33;
  --g-amber: 240, 162, 74; --g-rose: 214, 118, 150; --g-iris: 124, 134, 240; --g-teal: 79, 185, 168; --g-coral: 232, 119, 90;

  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: clamp(2.6rem, 1.4rem + 6vw, 6.4rem);
  --fs-h1: clamp(2.1rem, 1.3rem + 3.6vw, 4.4rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  --fs-lead: clamp(1.02rem, .95rem + .35vw, 1.22rem);
  --fs-body: 1rem;
  --fs-cap: .72rem;

  --e-settle: cubic-bezier(.2, 0, 0, 1);
  --e-enter: cubic-bezier(.05, .7, .1, 1);
  --e-spring: cubic-bezier(.34, 1.3, .64, 1);
  --e-breathe: cubic-bezier(.45, 0, .55, 1);
  --d-fast: 200ms; --d-reveal: 800ms; --d-headline: 1000ms; --d-theme: 800ms;

  --gutter: 1rem;
  --sec-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --max: 1280px;
  --hdr-h: 64px;
  --r-card: 22px; --r-big: 28px; --r-pill: 9999px;
}

:root, [data-theme="night"] {
  color-scheme: dark;
  --fg: 242, 238, 230;
  --bg: #0A0B0E; --bg-2: #111318; --card: #15171D;
  --tx: #F2EEE6; --on-tx: #0A0B0E;
  --tx-2: rgba(var(--fg), .68); --tx-3: rgba(var(--fg), .52); --tx-4: rgba(var(--fg), .24);
  --line: rgba(var(--fg), .1); --line-2: rgba(var(--fg), .18);
  --glass: rgba(var(--fg), .05); --glass-2: rgba(var(--fg), .09);
  --accent: var(--amber); --accent-2: var(--teal);
  --ok: #74D39E; --soon: #FF9A52; --late: #FF7070; --info: #A3ADFF;
  --shadow-card: inset 0 0 0 1px rgba(var(--fg), .08), 0 30px 60px -30px rgba(0, 0, 0, .8);
  --hdr-bg: rgba(10, 11, 14, .72);
}
[data-theme="day"] {
  color-scheme: light;
  --fg: 13, 15, 20;
  --bg: #FBFAF8; --bg-2: #FFFFFF; --card: #FFFFFF;
  --tx: #0D0F14; --on-tx: #FBFAF8;
  --tx-2: rgba(var(--fg), .66); --tx-3: rgba(var(--fg), .58); --tx-4: rgba(var(--fg), .2);
  --line: rgba(var(--fg), .1); --line-2: rgba(var(--fg), .18);
  --glass: rgba(var(--fg), .04); --glass-2: rgba(var(--fg), .07);
  --accent: var(--amber-d); --accent-2: var(--teal-d);
  --ok: #1F8A55; --soon: #B95A12; --late: #C23B3B; --info: #3B47B8;
  --shadow-card: inset 0 0 0 1px rgba(var(--fg), .07), 0 30px 60px -36px rgba(30, 40, 60, .35);
  --hdr-bg: rgba(251, 250, 248, .78);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 12px); }
body {
  margin: 0; background: #0A0B0E; color: var(--tx);
  font: 400 var(--fs-body)/1.55 var(--sans); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
[data-theme] { background-color: var(--bg); color: var(--tx); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 300; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.i { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; vertical-align: -.18em; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--tx); color: var(--on-tx); padding: 12px 16px; border-radius: 12px; }
.skip:focus { left: 8px; }

/* ---------- 3. Type ---------- */
.h-display, .h-1, .h-3 { font-family: var(--serif); font-weight: 300; letter-spacing: -.02em; }
.h-display { font-size: var(--fs-display); line-height: .98; letter-spacing: -.035em; }
.h-1 { font-size: var(--fs-h1); line-height: 1.03; }
.h-3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.012em; }
.h-display em, .h-1 em { color: var(--accent); font-weight: 300; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--tx-2); max-width: 36rem; }
.fine { font-size: .84rem; color: var(--tx-3); }
.eyebrow, .mono-cap {
  font: 500 var(--fs-cap)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3);
}
.eyebrow { display: inline-flex; align-items: center; gap: .6em; margin-bottom: 1.25rem; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.dot.coral { --accent: var(--coral-d); }

/* ---------- 4. Buttons ---------- */
.btn {
  --bh: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: var(--bh); padding: 0 1.35rem; border-radius: var(--r-pill);
  font: 500 .95rem/1 var(--sans); letter-spacing: -.005em; white-space: nowrap;
  transition: transform var(--d-fast) var(--e-settle), background-color var(--d-fast), box-shadow var(--d-fast), color var(--d-fast);
  will-change: transform;
}
.btn:active { transform: scale(.97); }
.btn .i { transition: transform .35s var(--e-settle); }
.btn:hover .i { transform: translateX(3px); }
.btn-sm { --bh: 44px; padding: 0 1.05rem; font-size: .9rem; }
.btn-lg { --bh: 56px; padding: 0 1.7rem; font-size: 1rem; }
.btn-paper { background: var(--tx); color: var(--on-tx); box-shadow: 0 14px 34px -14px rgba(var(--g-amber), .65); }
.btn-paper:hover { box-shadow: 0 18px 44px -12px rgba(var(--g-amber), .85); }
.btn-ghost { color: var(--tx); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost:hover { background: var(--glass); }
.btn-ink { background: var(--tx); color: var(--on-tx); }
.btn-coral { background: var(--coral-d); color: #fff; }
.btn-coral:hover { background: #9c3a20; }
.btn-coral .i, .btn-coral:hover .i { transform: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.cta-row.center { justify-content: center; }

/* Small UI pieces copied from the app system */
.pill-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px;
  border-radius: var(--r-pill); font: 500 .8rem/1 var(--sans); color: var(--tx); box-shadow: inset 0 0 0 1px var(--line-2);
}
.pill-btn.paper { background: var(--tx); color: var(--on-tx); box-shadow: none; }
.pill-btn.sm { min-height: 30px; font-size: .74rem; padding: 0 12px; }
.pill-btn.wide { width: 100%; }
.chip {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border-radius: var(--r-pill);
  font-size: .78rem; color: var(--tx-2); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color .4s var(--e-settle), color .4s, box-shadow .4s;
}
.chip.on { background: var(--tx); color: var(--on-tx); box-shadow: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.av {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font: 300 1.3rem/1 var(--serif);
  background: radial-gradient(circle at 30% 25%, rgba(var(--fg), .24), rgba(var(--fg), .06)); color: var(--tx);
}
.av-amber { background: radial-gradient(circle at 30% 25%, rgba(240, 178, 90, .6), rgba(240, 178, 90, .14)); color: #FFE7C2; }
[data-theme="day"] .av-amber { color: #6B3E00; }
.rc-title { font-weight: 500; font-size: .95rem; line-height: 1.3; }
.rc-meta { font-size: .8rem; color: var(--tx-3); line-height: 1.4; }
.rc-serif { font: 300 1.2rem/1.15 var(--serif); letter-spacing: -.01em; }
.rc-serif.lg { font-size: 1.45rem; }
.rc-serif em { color: var(--accent); }
.st-ok { display: inline-flex; align-items: center; gap: .45em; font: 500 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.sp { display: inline-flex; align-items: center; gap: .4em; font: 500 .78rem/1 var(--sans); padding: 6px 10px 6px 8px; border-radius: var(--r-pill); width: max-content; }
.sp.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.sp.soon { color: var(--soon); background: color-mix(in srgb, var(--soon) 13%, transparent); }
.sp.late { color: var(--late); background: color-mix(in srgb, var(--late) 13%, transparent); }
.sp.info, .sp.vet { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.doc-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--glass-2); font-size: 1.15rem; }

/* ---------- 5. Reveal motion ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity var(--d-reveal) var(--e-settle), transform var(--d-reveal) var(--e-enter); transition-delay: calc(var(--i, 0) * 70ms); }
.rv.in { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .24em; margin: 0 -.08em -.24em; }
.split .w > span { display: inline-block; transform: translateY(108%); transition: transform var(--d-headline) var(--e-enter); transition-delay: calc(var(--wi, 0) * 55ms); }
.split.in .w > span { transform: none; }

/* ---------- 5b. Loader: the brand and the three services, while a fan of pets rises into view.
   The loader has no background of its own: it sits on the hero's own atmosphere (glow and grain), with
   everything else of the hero held back. When everything has loaded the fan gathers into a deck the size
   of the hero's deck and the hero's wall bursts out of it, so the background never changes. ---------- */
.loader { display: none; }
.js .loader {
  --dw: min(360px, max(160px, 58vw));
  position: fixed; inset: 0; z-index: 200; display: block; overflow: hidden; pointer-events: none;
  animation: ld-failsafe .01s 20s forwards; /* never block the page if the script fails */
}
.loader.gone { display: none !important; }
@keyframes ld-failsafe { to { opacity: 0; visibility: hidden; } }
.ld .hdr { opacity: 0; visibility: hidden; animation: hdr-failsafe .01s 20s forwards; }
@keyframes hdr-failsafe { to { opacity: 1; visibility: visible; } }

/* the pets: rise in one by one, open into a fan, sway gently, then gather into the deck */
.ld-deck { position: absolute; left: 50%; top: 50%; width: var(--dw); aspect-ratio: 1; translate: -50% -50%; }
.loader.fan .ld-deck { animation: ld-sway 3.4s var(--e-breathe) 1.2s infinite alternate; }
@keyframes ld-sway { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }
.ld-deck i {
  --d: 0; position: absolute; inset: 0; z-index: calc(10 - var(--af)); border-radius: 14px; overflow: hidden; background: #F6EFE6;
  box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .06);
  opacity: 0; filter: blur(8px);
  transform: translate(calc(var(--f) * var(--dw) * .12), 34vh) rotate(calc(var(--f) * 18deg)) scale(.5);
  transition: transform 1.15s cubic-bezier(.2, .9, .25, 1) calc(var(--o) * 120ms + 100ms), opacity .7s var(--e-settle) calc(var(--o) * 120ms + 100ms), filter .8s var(--e-settle) calc(var(--o) * 120ms + 100ms);
}
.ld-deck i img { width: 100%; height: 100%; object-fit: cover; }
.loader.fan .ld-deck i {
  opacity: 1; filter: none;
  transform: translate(calc(var(--f) * var(--dw) * .21), calc(var(--af) * var(--dw) * .04 - var(--dw) * .12)) rotate(calc(var(--f) * 7deg)) scale(.6);
}
.loader.deck .ld-deck { animation: none; }
.loader.deck .ld-deck i {
  z-index: calc(10 - var(--d));
  transform: translate(calc(var(--d) * -6px), calc(var(--d) * 5px)) rotate(calc(-2deg - var(--d) * 3.5deg)) scale(calc(1 - var(--d) * .03));
  transition: transform .85s cubic-bezier(.34, 1.15, .64, 1) calc(var(--d) * 45ms);
}

/* brand + services */
.ld-brand {
  position: absolute; left: 0; right: 0; top: calc(50% + var(--dw) * .36 + 1.2rem); display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 0 var(--gutter);
  transition: opacity .45s var(--e-settle), transform .6s var(--e-settle);
}
.loader.leaving .ld-brand { opacity: 0; transform: translateY(16px); }
.ld-mark { display: block; overflow: hidden; color: var(--tx); padding-bottom: .1em; }
.ld-mark .logo-mark { width: clamp(124px, 34vw, 190px); transform: translateY(105%); transition: transform 1s var(--e-enter) .35s; }
.loader.fan .ld-mark .logo-mark { transform: none; }
.ld-svc { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem .6rem; font: 500 .6rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.ld-svc span, .ld-svc i { opacity: 0; transform: translateY(8px); filter: blur(4px); transition: opacity .6s var(--e-settle), transform .7s var(--e-enter), filter .6s var(--e-settle), color .5s; }
.ld-svc i { width: 4px; height: 4px; border-radius: 50%; background: var(--amber); }
.loader.fan .ld-svc span, .loader.fan .ld-svc i { opacity: 1; transform: none; filter: none; }
.loader.fan .ld-svc :nth-child(1) { transition-delay: .7s; } .loader.fan .ld-svc :nth-child(2) { transition-delay: .85s; }
.loader.fan .ld-svc :nth-child(3) { transition-delay: .95s; } .loader.fan .ld-svc :nth-child(4) { transition-delay: 1.1s; }
.loader.fan .ld-svc :nth-child(5) { transition-delay: 1.2s; }
.ld-svc span.on { color: var(--tx); transition-delay: 0s; }

.ld-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(var(--fg), .07); transition: opacity .4s; }
.ld-bar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--lp, 0)); background: linear-gradient(90deg, var(--coral), var(--amber)); }
.loader.leaving .ld-bar { opacity: 0; }

/* ---------- 6. Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr-h);
  background: transparent; transition: background-color .4s, box-shadow .4s, transform .45s var(--e-settle), color .4s, opacity .9s var(--e-settle) .35s;
  padding-top: env(safe-area-inset-top, 0);
}
.hdr.solid { background: var(--hdr-bg); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); box-shadow: inset 0 -1px 0 var(--line); }
.hdr.hide { transform: translateY(-100%); }
.hdr-in { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; height: 100%; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo-mark {
  display: block; width: 96px; aspect-ratio: 4 / 1; background: currentColor;
  -webkit-mask: url(../images/furrie-logo.png) center / contain no-repeat; mask: url(../images/furrie-logo.png) center / contain no-repeat;
}
.hdr-nav { display: none; }
.hdr-nav a { position: relative; font-size: .9rem; color: var(--tx-2); padding: 10px 2px; transition: color var(--d-fast); }
.hdr-nav a::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--e-settle); }
.hdr-nav a:hover { color: var(--tx); }
.hdr-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.hdr-act { display: flex; align-items: center; gap: .5rem; }
.hdr-sign { display: none; font-size: .9rem; color: var(--tx-2); padding: 12px 10px; }
.hdr-sign:hover { color: var(--tx); }
.hdr-act .btn { display: none; }
.burger { width: 44px; height: 44px; border-radius: 50%; display: grid; place-content: center; gap: 6px; box-shadow: inset 0 0 0 1px var(--line-2); }
.burger span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .4s var(--e-settle); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 40; padding: calc(var(--hdr-h) + 24px) var(--gutter) calc(24px + env(safe-area-inset-bottom, 0));
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  clip-path: circle(0 at calc(100% - 38px) 32px); transition: clip-path .7s var(--e-settle);
  overflow-y: auto;
}
.menu[hidden] { display: flex; visibility: hidden; }
.menu.open { clip-path: circle(150% at calc(100% - 38px) 32px); visibility: visible; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { display: flex; align-items: baseline; gap: 1rem; padding: .7rem 0; font: 300 clamp(2rem, 9vw, 3rem)/1.1 var(--serif); letter-spacing: -.02em; border-bottom: 1px solid var(--line); }
.menu nav a span { font: 500 .7rem/1 var(--mono); color: var(--tx-3); letter-spacing: .1em; }
.menu-foot { display: flex; flex-wrap: wrap; gap: .75rem; }
.menu-foot .btn { flex: 1 1 10rem; }

/* ---------- 7. Hero (after animos "Fan Shuffle")
   Load: a fanned deck of pets sits behind the headline, then bursts into a wall that fills the screen.
   Idle: the wall's rows drift in opposite directions.
   Scroll (pinned): the wall gathers back into the deck, and a short line is set across it.
   Every card's resting transform is driven by --m = min(1, --k + --c): --k is 1 while the deck waits (before .go),
   --c is scroll progress (set on .hero). The burst itself is a Web Animation per card (works in every browser). ---------- */
.hero { --c: 0; --deck: 200px; position: relative; height: 215svh; }
.hero-pin { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; display: grid; place-items: center; padding: calc(var(--hdr-h) + 1rem) var(--gutter) 1.5rem; }
.hero-atmo { position: absolute; inset: 0; z-index: -3; background: radial-gradient(120% 80% at 50% 45%, #3B2433 0%, #22161F 52%, #0A0B0E 100%); }
.hero-glow {
  position: absolute; width: 90vmax; height: 90vmax; left: 50%; top: 50%;
  translate: calc(-50% + var(--gx, 0px)) calc(-50% + var(--gy, 0px));
  background: radial-gradient(closest-side, rgba(240, 160, 80, .34), rgba(200, 90, 70, .14) 50%, transparent);
  animation: breathe 10s var(--e-breathe) infinite;
}
.grain {
  position: absolute; inset: 0; opacity: .32; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
@keyframes breathe { 0%, 100% { opacity: .85; scale: 1; } 50% { opacity: 1; scale: 1.06; } }

/* the wall */
.wall {
  --wg: 10px; --cr: 14px;
  position: absolute; inset: -1.5svh 0; z-index: -1; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: var(--wg);
}
.js .hero:not(.go) .wall { visibility: hidden; }
/* A crisp deck drawn at full size (the same five cards and pose as the loader's last deck). It covers the
   hand-over, fades as the wall bursts out, and fades back in over the gathered wall at the end of the scroll,
   so no picture is ever shown enlarged beyond its own size. */
.hero-deck { position: absolute; left: 50%; top: 50%; z-index: 1; width: var(--deck); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
/* hidden while the loader's own cards rise and fan out; it appears only once the loader has gathered its fan into
   the identical deck right on top of it (html.hd), so the swap is invisible */
.ld:not(.hd) .hero-deck, html:not(.js) .hero-deck { visibility: hidden; }
.hero.go:not(.hold) .hero-deck { opacity: 0; scale: .86; transition: opacity .55s var(--e-settle) .12s, scale .7s var(--e-settle) .12s; }
.hero.go.hold .hero-deck { opacity: var(--hdo, 0); scale: calc(.86 + var(--hdo, 0) * .14); }
.hero-deck i { position: absolute; inset: 0; z-index: calc(10 - var(--d)); border-radius: 14px; overflow: hidden; background: #F6EFE6;
  box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transform: translate(calc(var(--d) * -6px), calc(var(--d) * 5px)) rotate(calc(-2deg - var(--d) * 3.5deg)) scale(calc(1 - var(--d) * .03)); }
.hero-deck img { width: 100%; height: 100%; object-fit: cover; }
/* nothing of the hero shows through the loader before the burst (the line across the deck waits for its scroll) */
.js .hero:not(.go) .hero-copy { visibility: hidden; animation: hdr-failsafe .01s 20s forwards; }
.js .hero:not(.go) .hero-msg, html:not(.js) .hero-msg { visibility: hidden; }
.wall-row { position: relative; z-index: 1; display: flex; gap: var(--wg); height: 100%; width: max-content; }
.wall-row.lead { z-index: 2; }
.hero.go .wall-row { animation: wall var(--dur, 70s) linear 2s infinite; }
.hero.go .wall-row.rev { animation-direction: reverse; }
.hero.hold .wall-row { animation-play-state: paused; }
@keyframes wall { to { transform: translateX(-50%); } }
.card {
  --k: 0; --m: min(1, var(--k) + var(--c));
  position: relative; flex: none; height: 100%; border-radius: var(--cr); overflow: hidden; background: #F6EFE6;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .85);
  transform:
    translate(calc((var(--ox, 0px) + var(--jx, 0px)) * var(--m)), calc((var(--oy, 0px) + var(--jy, 0px)) * var(--m)))
    rotate(calc(var(--fr, 0deg) * var(--m)))
    scale(calc(1 + (var(--fsc, 1) - 1) * var(--m)));
}
.js .hero:not(.go) .card { --k: 1; }
/* layers only while the wall is being scrolled; dropped when the scroll rests so cards are re-drawn sharp at their
   current size (a fixed layer scaled up into the deck looks soft on large screens) */
.hero.moving .card:not(.far) { will-change: transform; }
.hero.hold .card.far { visibility: hidden; }
.card.cw { aspect-ratio: 4 / 3; } .card.cn { aspect-ratio: 4 / 5; } .card.cs { aspect-ratio: 1; }
.card.top { z-index: 3; }
.card img { width: 100%; height: 100%; object-fit: cover; }
.card[data-n="heart-cats"] img { object-position: 50% 28%; }
.card[data-n="cat-legs"] img { object-position: 28% 50%; }
.card[data-n="polaroid"] img, .card[data-n="treat-dog"] img { object-position: 50% 42%; }

/* keeps the line readable over the wall; lifts away as the wall gathers */
.hero-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: calc(1 - var(--c));
}
.hero-scrim::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 1.3s cubic-bezier(.4, 0, .2, 1) .05s;
  background:
    radial-gradient(ellipse 125% 50% at 50% 50%, rgba(10, 11, 14, .92) 0%, rgba(10, 11, 14, .82) 50%, rgba(10, 11, 14, .3) 82%, rgba(10, 11, 14, .12) 100%),
    linear-gradient(180deg, rgba(10, 11, 14, .8), rgba(10, 11, 14, .35) 11%, transparent 20%, transparent 84%, rgba(10, 11, 14, .6));
}
.hero.go .hero-scrim::before, html:not(.js) .hero-scrim::before { opacity: 1; }

.hero-copy {
  position: relative; z-index: 2; max-width: 42rem; display: flex; flex-direction: column; align-items: center; text-align: center;
  opacity: calc(1 - var(--c) * 2.4); translate: 0 calc(var(--c) * -10svh);
}
.hero.gone .hero-copy { pointer-events: none; visibility: hidden; }
.hero .h-display { text-wrap: balance; text-shadow: 0 2px 40px rgba(10, 11, 14, .7); }
.hero .eyebrow { margin-bottom: 1rem; }
.hero .lead { margin: .2rem auto 1.6rem; max-width: 31rem; color: rgba(var(--fg), .8); }
.hero .cta-row { justify-content: center; }
.hero .fine { margin-top: 1rem; max-width: 30rem; }

/* the line set across the gathered deck; each word comes into focus (--k per word, set by JS) */
.hero-msg { position: absolute; inset: 0; pointer-events: none; --sh: 3vw; } /* no z-index: its lines layer around the deck */
.hero-msg p { position: absolute; left: var(--gutter); right: var(--gutter); text-align: center; }
.hm-1, .hm-2 { font: 300 clamp(3.4rem, 1rem + 13vw, 9.4rem)/1 var(--serif); letter-spacing: -.035em; color: var(--tx); }
/* "Don't guess." sits behind the deck: most of it above, only the feet of the letters tucked behind the top cards */
.hm-1 { z-index: -2; bottom: calc(50% + var(--deck) * .52 - .16em); translate: calc(var(--sh) * -1) 0; }
/* "Ask a vet." also sits behind: most of it below, only the tops of the letters tucked under the bottom cards */
.hm-2 { z-index: -2; top: calc(50% + var(--deck) * .6 - .14em); translate: var(--sh) 0; }
.hm-2 em { color: var(--amber); }
.hero-msg .wd { display: inline-block; --k: 0; opacity: var(--k); filter: blur(calc((1 - var(--k)) * 10px)); transform: translateY(calc((1 - var(--k)) * .3em)); }
.hm-1 .wd { transform: translateY(calc((1 - var(--k)) * .7em)); } /* rises out from behind the deck */

/* a question you'd otherwise guess at, then its answer: a bubble under the headline */
.qbs { position: relative; width: min(92vw, 380px); height: 5.6rem; margin: 1.3rem auto 0; pointer-events: none; }
.qb {
  position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; width: max-content; max-width: 100%;
  padding: .75rem 1.15rem .8rem; border-radius: 22px; text-align: center;
  background: rgba(24, 20, 26, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 50px -24px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .5s var(--e-settle), transform .7s var(--e-spring);
}
/* a small tail pointing up at the headline */
.qb::before { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; translate: -50% 0; rotate: 45deg; background: inherit; border-radius: 3px 0 0 0; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14); }
.qb.on { opacity: 1; transform: none; }
.qb-q { font: 300 1.1rem/1.25 var(--serif); color: var(--tx); }
.qb-a { display: flex; align-items: center; justify-content: center; gap: .45em; margin-top: .4rem; font-size: .84rem; color: var(--teal); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--e-settle), opacity .5s .1s; }
.qb.ans .qb-a { max-height: 3em; opacity: 1; }
/* short phones (e.g. iPhone SE): keep the copy clear of the bottom row of pictures */
@media (max-height: 700px) { .hero .fine { display: none; } .hero .eyebrow { margin-bottom: .6rem; } .qbs { margin-top: 1rem; } }

/* ---------- 8. Ticker ---------- */
.ticker { overflow: hidden; border-block: 1px solid var(--line); padding: 1.05rem 0; }
.ticker-track { display: flex; width: max-content; gap: 0; animation: tick var(--tdur, 40s) linear infinite; font: 300 clamp(1.15rem, 1rem + .8vw, 1.6rem)/1 var(--serif); letter-spacing: -.01em; color: var(--tx-2); }
.ticker-track > * { margin-right: 1.6rem; } /* margins, not gap, so the doubled track loops exactly at -50% */
.ticker-track i { font-style: normal; color: var(--accent); font-size: .7em; align-self: center; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- 9. Manifesto (blur scrub + photo) ---------- */
.manifesto { position: relative; height: 240vh; }
.mf-pin { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; gap: 1.6rem; padding: calc(var(--hdr-h) + .5rem) var(--gutter) 1.5rem; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.mf-cap { margin-bottom: 1.2rem; }
.mf-text { font: 300 clamp(1.6rem, .95rem + 3.4vw, 3.7rem)/1.12 var(--serif); letter-spacing: -.02em; max-width: 24ch; }
.mf-text .wd { display: inline-block; --k: 0; opacity: calc(.24 + var(--k) * .76); filter: blur(calc((1 - var(--k)) * 6px)); transform: translateY(calc((1 - var(--k)) * 8px)); will-change: filter, opacity; }
.mf-text em .wd, .mf-text .wd em { color: var(--accent); }
.mf-photo { margin: 0; width: min(46vw, 210px); aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; justify-self: end; order: -1;
  clip-path: inset(calc((1 - var(--mp, 0)) * 30%) calc((1 - var(--mp, 0)) * 18%) round 20px); }
.mf-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; scale: calc(1.25 - var(--mp, 0) * .25); }
/* ---------- 10. Section heads ---------- */
.sec-head { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sec-head .lead { margin-top: 1.1rem; }

/* ---------- 11. Drawn phone + UI kit (never real screenshots; everything is tokens and shapes) ---------- */
.phone {
  --pw: 300px; position: relative; width: var(--pw); aspect-ratio: 9 / 19.5; border-radius: calc(var(--pw) * .15);
  background: linear-gradient(150deg, #2B2D35, #0C0D10 60%); padding: calc(var(--pw) * .03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 calc(var(--pw) * .012) #050608, 0 50px 90px -40px rgba(0, 0, 0, .85);
}
.phone::after { content: ""; position: absolute; z-index: 9; top: calc(var(--pw) * .052); left: 50%; translate: -50% 0; width: 30%; height: calc(var(--pw) * .078); border-radius: 99px; background: #000; }
.scr {
  --u-tx: #0D0F14; --u-tx2: rgba(13, 15, 20, .62); --u-line: rgba(13, 15, 20, .1); --u-line2: rgba(13, 15, 20, .18); --u-fill: rgba(13, 15, 20, .045);
  --u-teal: #1F7A6E; --u-amber: #9A5B00; --u-soon: #B95A12; --u-ok: #1F8A55; --u-coral: #B4472B;
  position: absolute; inset: calc(var(--pw) * .03); border-radius: calc(var(--pw) * .123); overflow: hidden;
  background: radial-gradient(120% 40% at 100% 0%, rgba(134, 208, 198, .28), transparent 70%), #FBFAF8;
  color: var(--u-tx); container-type: inline-size; padding: 0;
  font-family: var(--sans); text-align: left;
}
.scr .i { width: 1.15em; height: 1.15em; }
.u-sb { position: absolute; z-index: 8; top: 5cqw; left: 10cqw; right: 9cqw; display: flex; justify-content: space-between; align-items: center; font: 600 3.6cqw/1 var(--sans); color: var(--u-tx); transition: color .4s; }
.u-sb i { width: 7cqw; height: 3.4cqw; border-radius: 1cqw; box-shadow: inset 0 0 0 .35cqw currentColor; position: relative; }
.u-sb i::after { content: ""; position: absolute; inset: .8cqw 2.2cqw .8cqw .8cqw; border-radius: .4cqw; background: currentColor; }
.scr.dark-on .u-sb { color: #F2EEE6; }
.u-top { display: flex; justify-content: space-between; align-items: center; }
.u-logo { display: block; width: 20cqw; aspect-ratio: 4 / 1; background: var(--u-tx); -webkit-mask: url(../images/furrie-logo.png) left center / contain no-repeat; mask: url(../images/furrie-logo.png) left center / contain no-repeat; }
.u-logo.lg { width: 30cqw; margin: 6cqw 0 2cqw; }
.u-bell { font-size: 4.6cqw; color: var(--u-tx2); }
.u-h { font: 300 8.4cqw/1.06 var(--serif); letter-spacing: -.015em; }
.u-h.sm { font-size: 6.6cqw; }
.u-h em { color: var(--u-teal); }
.u-p { font-size: 3.7cqw; line-height: 1.4; color: var(--u-tx2); }
.u-cap { display: flex; align-items: center; gap: 1.2cqw; font: 500 2.6cqw/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--u-tx2); }
.u-cap.ok { color: var(--u-teal); }
.u-lab { display: flex; align-items: center; gap: 1cqw; font: 500 2.5cqw/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--u-tx2); }
.u-lab.mt { margin-top: 1.5cqw; }
.u-t { font-weight: 500; font-size: 4cqw; line-height: 1.25; }
.u-s { font-size: 3.1cqw; line-height: 1.35; color: var(--u-tx2); }
.u-pets { display: flex; gap: 2.4cqw; }
.u-av { display: inline-grid; place-items: center; width: 11.5cqw; height: 11.5cqw; border-radius: 50%; font: 300 5.4cqw/1 var(--serif); color: var(--u-tx); background: radial-gradient(circle at 30% 25%, rgba(240, 178, 90, .7), rgba(240, 178, 90, .2)); flex: none; }
.u-av.b { background: radial-gradient(circle at 30% 25%, rgba(163, 173, 255, .75), rgba(163, 173, 255, .2)); }
.u-av.add { background: none; box-shadow: inset 0 0 0 .4cqw var(--u-line2); color: var(--u-tx2); font-family: var(--sans); }
.u-card { display: grid; gap: 1.2cqw; padding: 4cqw 4.4cqw; border-radius: 5cqw; background: #fff; box-shadow: 0 0 0 1px var(--u-line), 0 8px 20px -14px rgba(20, 30, 60, .35); }
.u-st { display: inline-flex; width: max-content; font: 500 2.9cqw/1 var(--sans); padding: 1.3cqw 2.4cqw; border-radius: 99px; background: var(--u-fill); color: var(--u-tx2); white-space: nowrap; }
.u-st.soon { color: var(--u-soon); background: rgba(185, 90, 18, .11); }
.u-st.ok { color: var(--u-ok); background: rgba(31, 138, 85, .11); }
.u-btn { display: flex; align-items: center; justify-content: center; min-height: 11.5cqw; border-radius: 99px; font: 500 3.8cqw/1 var(--sans); transition: opacity .5s, transform .5s var(--e-spring); }
.u-btn.dark { background: var(--u-tx); color: #fff; }
.u-btn.light { background: #F2EEE6; color: #0D0F14; }
.u-fine { font-size: 2.8cqw; color: var(--u-tx2); text-align: center; }
.u-fld { display: grid; gap: 1.5cqw; }
.u-in { display: flex; align-items: center; min-height: 11.5cqw; padding: 0 3.6cqw; border-radius: 3.6cqw; background: var(--u-fill); box-shadow: inset 0 0 0 1px var(--u-line); font-size: 4cqw; }
.u-in.typing::after { content: ""; width: .35cqw; height: 4.6cqw; margin-left: .4cqw; background: var(--u-teal); animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.u-code { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1.4cqw; }
.u-code i { display: grid; place-items: center; aspect-ratio: .78; border-radius: 2.2cqw; background: var(--u-fill); box-shadow: inset 0 0 0 1px var(--u-line); font: 400 5cqw/1 var(--mono); font-style: normal; transition: box-shadow .3s, background-color .3s; }
.u-code i.f { background: #fff; box-shadow: inset 0 0 0 .4cqw var(--u-teal); }

/* walkthrough screens */
.sv { position: absolute; inset: 16cqw 6cqw 6cqw; display: flex; flex-direction: column; gap: 3cqw; opacity: 0; transform: translateY(5%) scale(.98); transition: opacity .45s var(--e-settle), transform .8s var(--e-enter); pointer-events: none; }
.sv.on { opacity: 1; transform: none; }
.sv.up { transform: translateY(-5%) scale(.98); }
.sv.dark { inset: 0; padding: 16cqw 4.5cqw 6cqw; background: #0D0E12; color: #F2EEE6; }
.sv .u-btn.dark.ready, .sv .go.ready { opacity: 1; }
/* 1 voice */
.u-said { min-height: 22cqw; font: 300 4.6cqw/1.3 var(--serif); }
.u-said .w2 { opacity: .12; transition: opacity .3s; }
.u-said .w2.on { opacity: 1; }
.u-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.u-f { display: grid; gap: .8cqw; padding: 2.4cqw 3cqw; border-radius: 3.6cqw; background: var(--u-fill); box-shadow: inset 0 0 0 1px var(--u-line); transition: background-color .45s, box-shadow .45s; }
.u-f.wide { grid-column: 1 / -1; }
.u-f span { font: 500 2.3cqw/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--u-tx2); }
.u-f b { font-weight: 500; font-size: 3.8cqw; opacity: 0; transform: translateY(1.5cqw); transition: opacity .4s, transform .5s var(--e-spring); }
.u-f.got { background: rgba(31, 122, 110, .09); box-shadow: inset 0 0 0 .35cqw rgba(31, 122, 110, .45); }
.u-f.got b { opacity: 1; transform: none; }
.u-voice { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.u-type { font-size: 3cqw; color: var(--u-tx2); width: 18cqw; text-align: center; }
.u-orb { position: relative; width: 19cqw; height: 19cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE3C4, #F0A97A 45%, #C9708A 82%); box-shadow: 0 3cqw 8cqw -2cqw rgba(201, 112, 138, .7); }
.u-orb i { position: absolute; inset: -2.5cqw; border-radius: 50%; box-shadow: 0 0 0 .4cqw rgba(240, 169, 122, .5); opacity: 0; }
.sv.on.talk .u-orb { animation: orb 1.5s var(--e-breathe) infinite; }
.sv.on.talk .u-orb i { animation: ring 1.5s var(--e-breathe) infinite; }
@keyframes orb { 50% { transform: scale(1.07); } }
@keyframes ring { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
/* 2 booking */
.u-chips { display: flex; flex-wrap: wrap; gap: 1.6cqw; }
.u-chips span { padding: 1.7cqw 3cqw; border-radius: 99px; font-size: 3.1cqw; box-shadow: inset 0 0 0 .3cqw var(--u-line2); color: var(--u-tx2); transition: background-color .35s, color .35s, box-shadow .35s; }
.u-chips span.on { background: var(--u-tx); color: #fff; box-shadow: none; }
.u-thumbs { display: flex; gap: 2cqw; }
.u-thumbs i, .u-thumbs b { width: 13cqw; aspect-ratio: 1; border-radius: 3.2cqw; display: grid; place-items: center; font-style: normal; }
.u-thumbs .t1 { background: linear-gradient(135deg, #E8B98A, #C9708A); }
.u-thumbs .t2 { background: linear-gradient(135deg, #9FD3C7, #7C86F0); }
.u-thumbs .t3 { background: #1A1C22; color: #fff; font-size: 5cqw; }
.u-thumbs b { box-shadow: inset 0 0 0 .3cqw var(--u-line2); color: var(--u-tx2); font-weight: 400; font-size: 5cqw; }
.u-thumbs.sm i { width: 10cqw; }
.u-thumbs i { opacity: 0; transform: scale(.6); transition: opacity .35s, transform .5s var(--e-spring); }
.u-thumbs i.in { opacity: 1; transform: none; }
.u-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.u-slots span { display: grid; place-items: center; min-height: 9cqw; border-radius: 3cqw; box-shadow: inset 0 0 0 .3cqw var(--u-line2); font-size: 3.2cqw; transition: background-color .35s, color .35s; }
.u-slots .gone { color: rgba(13, 15, 20, .3); text-decoration: line-through; }
.u-slots .pick.on { background: var(--u-tx); color: #fff; box-shadow: none; }
.sv .go { margin-top: auto; opacity: .3; }
/* 3 UPI */
.u-packs { display: grid; gap: 1.6cqw; }
.u-pk { display: grid; grid-template-columns: 8cqw 1fr auto; align-items: center; gap: 2cqw; padding: 2.4cqw 3.4cqw; border-radius: 4cqw; background: #fff; box-shadow: inset 0 0 0 1px var(--u-line); transition: box-shadow .35s; }
.u-pk b { font: 300 6cqw/1 var(--serif); }
.u-pk span { font-size: 3cqw; color: var(--u-tx2); }
.u-pk em { font-style: normal; font-weight: 500; font-size: 3.8cqw; }
.u-pk.pick.on { box-shadow: inset 0 0 0 .55cqw var(--u-tx); }
.u-check { display: flex; align-items: center; gap: 3cqw; padding: 3cqw 3.4cqw; border-radius: 4cqw; background: rgba(154, 91, 0, .08); opacity: 0; transform: translateY(3cqw); transition: opacity .4s, transform .6s var(--e-spring); }
.u-check.in { opacity: 1; transform: none; }
.u-spin { width: 6cqw; height: 6cqw; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 .6cqw rgba(154, 91, 0, .25); border-top: .6cqw solid var(--u-amber); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.u-toast { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 2.4cqw; padding: 3.2cqw 3.6cqw; border-radius: 4.4cqw; background: #0D0F14; color: #fff; font-size: 3.3cqw; line-height: 1.3; box-shadow: 0 3cqw 8cqw -2cqw rgba(0, 0, 0, .45); opacity: 0; transform: translateY(130%); transition: opacity .4s, transform .7s var(--e-spring); }
.u-toast.top { bottom: auto; top: -4cqw; transform: translateY(-130%); }
.u-toast.in { opacity: 1; transform: none; }
/* 4 call */
.u-video { position: relative; flex: 1; border-radius: 6cqw; overflow: hidden; background: radial-gradient(70% 50% at 30% 30%, rgba(124, 134, 240, .5), transparent 70%), radial-gradient(70% 60% at 80% 90%, rgba(79, 185, 168, .4), transparent 70%), #16181F; display: grid; place-items: center; }
.u-vet { display: grid; justify-items: center; gap: 2cqw; font-size: 3.4cqw; color: rgba(242, 238, 230, .8); }
.u-av.vet { width: 24cqw; height: 24cqw; font-size: 10cqw; color: #F2EEE6; background: radial-gradient(circle at 30% 25%, rgba(242, 238, 230, .3), rgba(242, 238, 230, .06)); }
.u-self { position: absolute; right: 3cqw; bottom: 3cqw; width: 24cqw; aspect-ratio: .75; border-radius: 4cqw; display: grid; place-items: center; background: linear-gradient(160deg, #6B4A2E, #2C2119); box-shadow: 0 0 0 .35cqw rgba(255, 255, 255, .15); }
.u-live { position: absolute; left: 3cqw; top: 3cqw; display: flex; align-items: center; gap: 1.4cqw; padding: 1.4cqw 2.6cqw; border-radius: 99px; background: rgba(0, 0, 0, .45); font: 500 2.6cqw/1 var(--mono); letter-spacing: .06em; color: #F2EEE6; }
.u-live i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #E8775A; animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.u-ctrls { display: flex; justify-content: center; gap: 4cqw; }
.u-ctrls span { width: 12.5cqw; height: 12.5cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(242, 238, 230, .12); color: #F2EEE6; font-size: 5cqw; }
.u-ctrls .end { background: #E0634A; }
.u-ctrls .end .i { transform: rotate(135deg); }
.u-join { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 4cqw; padding: 8cqw; background: rgba(13, 14, 18, .94); transition: opacity .6s, visibility .6s; }
.u-join .u-cap { color: rgba(242, 238, 230, .7); }
.u-join .u-btn { padding: 0 9cqw; box-shadow: 0 0 0 2cqw rgba(240, 178, 90, .18); }
.u-join.gone { opacity: 0; visibility: hidden; }
/* 5 written plan */
.u-sec { display: grid; gap: 1.6cqw; }
.u-li { display: grid; grid-template-columns: 7cqw 1fr; font-size: 3.4cqw; line-height: 1.4; }
.u-li b { font: 400 2.8cqw/1.6 var(--mono); color: var(--u-tx2); }
.u-warn { display: grid; gap: 1.4cqw; padding: 3.2cqw; border-radius: 4cqw; background: rgba(180, 71, 43, .07); box-shadow: inset 0 0 0 1px rgba(180, 71, 43, .2); }
.u-warn .u-lab { color: var(--u-coral); }
.u-warn p:last-child { font: 300 4cqw/1.25 var(--serif); }
.u-doc { display: grid; grid-template-columns: 9cqw 1fr auto; align-items: center; gap: 2.6cqw; padding-top: 3cqw; border-top: 1px solid var(--u-line); }
.u-doc > span { width: 9cqw; height: 9cqw; border-radius: 2.6cqw; display: grid; place-items: center; background: var(--u-fill); font-size: 4.4cqw; }
.u-doc em { font-style: normal; font-size: 3cqw; padding: 1.6cqw 3cqw; border-radius: 99px; background: var(--u-fill); }
/* 6 care plan + chat */
.u-steps { display: grid; }
.u-steps li { display: flex; align-items: center; gap: 2.6cqw; min-height: 9.5cqw; font-size: 3.4cqw; border-bottom: 1px solid var(--u-line); color: var(--u-tx2); transition: color .3s; }
.u-steps li::before { content: ""; width: 5cqw; height: 5cqw; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 .35cqw var(--u-line2); transition: background-color .35s, box-shadow .35s, transform .5s var(--e-spring); }
.u-steps li.done { color: var(--u-tx); }
.u-steps li.done::before { background: var(--u-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; box-shadow: none; transform: scale(1.1); }
.u-chat { margin-top: auto; display: grid; gap: 2cqw; padding: 3.4cqw; border-radius: 4.4cqw; background: var(--u-fill); }
.u-bub { font-size: 3.3cqw; line-height: 1.35; padding: 2.4cqw 3.2cqw; border-radius: 3.6cqw; max-width: 84%; opacity: 0; transform: translateY(2cqw); transition: opacity .4s, transform .5s var(--e-spring); }
.u-bub.in { opacity: 1; transform: none; }
.u-bub.me { justify-self: end; background: var(--u-tx); color: #fff; border-bottom-right-radius: 1cqw; }
.u-bub.vet { background: #fff; box-shadow: inset 0 0 0 1px var(--u-line); border-bottom-left-radius: 1cqw; }
/* 7 ask */
.u-qbox { display: grid; gap: 2.4cqw; padding: 3.4cqw; border-radius: 4.4cqw; background: #fff; box-shadow: inset 0 0 0 1px var(--u-line); font-size: 3.5cqw; line-height: 1.4; }
.u-track { display: grid; gap: 1.8cqw; }
.u-track .tr { display: flex; align-items: center; gap: 2.4cqw; font-size: 3.3cqw; color: rgba(13, 15, 20, .4); transition: color .35s; }
.u-track .tr i { width: 4cqw; height: 4cqw; border-radius: 50%; box-shadow: inset 0 0 0 .35cqw var(--u-line2); transition: background-color .35s, box-shadow .35s; }
.u-track .tr.done { color: var(--u-tx); }
.u-track .tr.done i { background: var(--u-teal); box-shadow: none; }
.u-ans { display: grid; gap: 1.2cqw; padding: 3.6cqw; border-radius: 4.4cqw; background: rgba(31, 122, 110, .09); box-shadow: inset 0 0 0 .35cqw rgba(31, 122, 110, .4); opacity: 0; transform: translateY(3cqw); transition: opacity .45s, transform .6s var(--e-spring); }
.u-ans.in { opacity: 1; transform: none; }
.u-ans .u-t { font: 300 5.4cqw/1.1 var(--serif); }
/* 8 health record */
.u-hr { display: grid; gap: 1.8cqw; }
.u-r { display: grid; grid-template-columns: 9cqw minmax(0, 1fr) auto; align-items: center; gap: 2.4cqw; padding: 2.6cqw; border-radius: 4cqw; background: #fff; box-shadow: inset 0 0 0 1px var(--u-line); opacity: 0; transform: translateX(4cqw); transition: opacity .4s, transform .6s var(--e-spring); }
.u-r.in { opacity: 1; transform: none; }
.u-ic { width: 9cqw; height: 9cqw; border-radius: 50%; display: grid; place-items: center; background: var(--u-fill); font-size: 4.4cqw; color: var(--u-teal); }
.u-r .u-t { font-size: 3.6cqw; }
.u-r .u-s { font-size: 2.7cqw; }
.u-docs { display: flex; flex-wrap: wrap; gap: 1.6cqw; }
.u-docs span { display: inline-flex; align-items: center; gap: 1.2cqw; font-size: 3cqw; padding: 1.8cqw 2.8cqw; border-radius: 99px; box-shadow: inset 0 0 0 .3cqw var(--u-line2); }

.sv.home { inset: 16cqw 6cqw 24cqw; }
.u-prog { height: 1.6cqw; border-radius: 99px; background: var(--u-fill); overflow: hidden; margin-top: 1cqw; }
.u-prog i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--u-teal); }
.u-tabbar { position: absolute; z-index: 5; left: 4cqw; right: 4cqw; bottom: 4cqw; height: 15cqw; border-radius: 99px; background: #16181E; display: flex; justify-content: space-around; align-items: center; color: rgba(242, 238, 230, .55); font-size: 5.2cqw; box-shadow: 0 4cqw 8cqw -3cqw rgba(0, 0, 0, .5); }
.u-tabbar span:first-child { color: #F2EEE6; }
.u-orb-s { width: 15cqw; height: 15cqw; border-radius: 50%; display: grid; place-items: center; color: #0D0F14 !important; background: radial-gradient(circle at 35% 28%, #FFF6E6, #F2EEE6 45%, #D9D2C4); transform: translateY(-4cqw); box-shadow: 0 0 0 1.6cqw rgba(242, 238, 230, .08), 0 3cqw 6cqw -2cqw rgba(240, 178, 90, .6); }
.u-btn.bottom { margin-top: auto; }
.u-text { padding: 3cqw 3.4cqw; border-radius: 3.6cqw; background: #fff; box-shadow: inset 0 0 0 1px var(--u-line); font-size: 3.4cqw; line-height: 1.4; color: var(--u-tx); }
.u-ref { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; padding: 3cqw 3.4cqw; border-radius: 4cqw; background: var(--u-fill); }
.u-ref .mono { font-family: var(--mono); letter-spacing: .04em; }
.u-card.fu { margin-top: auto; background: rgba(31, 122, 110, .07); box-shadow: inset 0 0 0 1px rgba(31, 122, 110, .25); }
.u-reply { margin-top: auto; display: flex; justify-content: space-between; align-items: center; min-height: 11cqw; padding: 0 3.6cqw; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--u-line2); font-size: 3.3cqw; color: var(--u-tx2); }
.u-reply em { font-style: normal; font: 500 2.6cqw/1 var(--mono); color: var(--u-teal); }

/* ---------- 12. Walkthrough: one pinned phone, nine chapters ---------- */
@property --wc { syntax: '<color>'; inherits: true; initial-value: #F0A24A; }
.walk { position: relative; height: calc(var(--n) * 80svh + 100svh); }
.walk-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: transparent; --wc: #F0A24A; transition: --wc 1.1s var(--e-settle), color .6s; }
.walk-sky { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(55% 45% at 50% 55%, color-mix(in srgb, var(--wc) 38%, transparent), transparent 72%),
  radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--wc) 16%, transparent), transparent 70%),
  #0A0B0E; }
.walk-day { position: absolute; inset: 0; opacity: var(--day, 0); transition: opacity .9s var(--e-settle); background: radial-gradient(60% 50% at 50% 55%, rgba(134, 208, 198, .45), transparent 72%), linear-gradient(180deg, #F3F6F2, #FBFAF8); }
.walk-grid {
  height: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: calc(var(--hdr-h) + .6rem) var(--gutter) 1.2rem;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; gap: .7rem; align-items: center;
}
.walk-head { display: flex; justify-content: space-between; align-items: center; }
.walk-head .eyebrow { margin: 0; }
.walk-count { font: 500 .78rem/1 var(--mono); letter-spacing: .1em; color: var(--tx-3); }
.walk-count b { color: var(--tx); font-weight: 500; }
.walk-bar { height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; grid-row: 2; }
.walk-bar i { display: block; height: 100%; width: 100%; background: var(--wc); transform-origin: left; transform: scaleX(var(--wp, 0)); }
.walk-phone { grid-row: 3; display: grid; place-items: center; min-height: 0; height: 100%; }
.walk-phone .phone { --pw: min(66vw, calc((100svh - var(--hdr-h) - 15rem) * .4615), 340px); }
.walk-caps { grid-row: 4; display: grid; min-height: 8.6rem; align-items: start; }
.cap { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity .45s var(--e-settle), transform .7s var(--e-enter); pointer-events: none; }
.cap.on { opacity: 1; transform: none; pointer-events: auto; }
.h-2 { font: 300 clamp(1.5rem, 1.05rem + 2vw, 2.9rem)/1.06 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.cap p { margin-top: .55rem; color: var(--tx-2); font-size: .98rem; line-height: 1.5; max-width: 30rem; }
.walk-rail { display: none; }

/* ---------- 13. Who you'll talk to + data ---------- */
.trust { padding: var(--sec-y) 0; }
.trust-grid { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 2.5rem; align-items: center; }
.vets-photo { margin: 0; position: relative; width: 100%; max-width: 560px; justify-self: center; }
.vets-photo picture { display: block; border-radius: var(--r-big); overflow: hidden; aspect-ratio: 4 / 5; clip-path: inset(10% 10% 10% 10% round 28px); transition: clip-path 1.4s var(--e-settle); }
.vets-photo img { width: 100%; height: 100%; object-fit: cover; scale: 1.18; transition: scale 1.8s var(--e-settle); }
.vets-photo.in picture { clip-path: inset(0 0 0 0 round 28px); }
.vets-photo.in img { scale: 1; }
.vets-photo figcaption { position: absolute; left: 1rem; bottom: 1rem; background: rgba(251, 250, 248, .86); color: #0D0F14; padding: .55rem .8rem; border-radius: 99px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.trust-copy .lead { margin: 1.2rem 0 1.4rem; }
.facts { display: grid; }
.facts li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 1rem 0; border-top: 1px solid var(--line); }
.facts .i { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--glass-2); color: var(--teal-d); }
.facts b { display: block; font-weight: 500; }
.facts span { color: var(--tx-2); font-size: .95rem; }

/* ---------- 14. Prices ---------- */
.prices { padding: var(--sec-y) 0; }
.px { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 2.5rem auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.px-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 20px; background: var(--glass-2); }
.px-pick button { min-height: 64px; border-radius: 16px; display: grid; place-content: center; gap: 2px; font: 300 1.6rem/1 var(--serif); color: var(--tx-2); transition: background-color .35s var(--e-settle), color .35s, box-shadow .35s; }
.px-pick button span { font: 500 .52rem/1.2 var(--mono); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; color: var(--tx-3); }
.px-pick button[aria-checked="true"] { background: var(--card); color: var(--tx); box-shadow: 0 10px 24px -14px rgba(20, 30, 60, .4), inset 0 0 0 1px var(--line); }
.px-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 1.6rem; border-radius: var(--r-big); background: radial-gradient(70% 70% at 100% 0%, rgba(var(--g-amber), .16), transparent 70%), var(--card); box-shadow: var(--shadow-card); }
.px-main { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.px-price { font: 200 clamp(3.8rem, 2.5rem + 6vw, 7rem)/.95 var(--sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.px-price .rs { font-weight: 300; font-size: .55em; vertical-align: .55em; margin-right: .05em; color: var(--tx-3); }
.px-per { color: var(--tx-2); display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; }
.px-per span:first-child { color: var(--tx); font-weight: 500; }
.px-save { font: 500 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); padding: 6px 9px; border-radius: 99px; transition: opacity .3s; }
.px-save.hide { opacity: 0; }
.px-main .btn { margin-top: .6rem; }
.bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; height: 200px; align-items: end; margin-top: 1rem; }
.bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.bar i { display: block; width: 100%; height: calc(var(--h) - 46px); border-radius: 12px 12px 4px 4px; background: var(--line-2); transform-origin: bottom; transition: background-color .4s, transform .9s var(--e-spring); transform: scaleY(var(--grow, 0)); }
.bar b { font: 500 .78rem/1 var(--sans); color: var(--tx-3); transition: color .3s; }
.bar span { font: 500 .7rem/1 var(--mono); color: var(--tx-3); }
.bar.sel i { background: var(--tx); }
.bar.sel b { color: var(--tx); }
.px.in .bar i { --grow: 1; }
.px-foot { display: grid; gap: .8rem; padding: .4rem .2rem 0; }
.px-foot p { display: flex; gap: .7rem; align-items: flex-start; color: var(--tx-2); font-size: .94rem; }
.px-foot .i { margin-top: .15em; color: var(--accent); }
.px-foot b { color: var(--tx); font-weight: 500; }

/* ---------- 16. Made in India (after animos "Ticker Tilt") ---------- */
.india { padding: var(--sec-y) 0 0; overflow: hidden; }
.in-copy { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.in-copy .lead { margin-top: 1.2rem; }
.tilt { position: relative; height: 430px; margin-top: 2.5rem; perspective: 1400px; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.tilt-plane { position: absolute; left: 50%; top: 50%; width: 240%; translate: -50% -50%; display: grid; gap: 14px; transform: rotateX(28deg) rotateZ(-9deg); transform-style: preserve-3d; }
.tilt-row { --th: 128px; display: flex; gap: 14px; width: max-content; animation: tilt var(--dur, 60s) linear infinite; }
.tilt-row.rev { animation-direction: reverse; }
.tilt-row img { height: var(--th); width: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); }
.tilt-row img.p { aspect-ratio: 4 / 5; }
@keyframes tilt { to { transform: translateX(-50%); } }

/* ---------- 18. FAQ ---------- */
.faq { padding: var(--sec-y) 0; }
.qa { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 2.5rem auto 0; padding: 0 var(--gutter); }
.qa details { border-top: 1px solid var(--line); }
.qa details:last-child { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: 1rem 0; font: 300 clamp(1.2rem, 1rem + .9vw, 1.7rem)/1.2 var(--serif); letter-spacing: -.01em; transition: color var(--d-fast); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa summary .i { width: 22px; height: 22px; flex: none; transition: transform .45s var(--e-settle); color: var(--tx-3); }
.qa details[open] summary .i { transform: rotate(45deg); }
.qa details > div { overflow: hidden; }
.qa details > div p { padding: 0 0 1.4rem; max-width: 46rem; color: var(--tx-2); font-size: 1.02rem; }
.qa details[open] > div p { animation: open .55s var(--e-enter); }
@keyframes open { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- 19. Final CTA + footer ---------- */
.final { position: relative; padding: var(--sec-y) var(--gutter); text-align: center; overflow: hidden; isolation: isolate; }
.final-fan { --fp: 0; --fw: clamp(84px, 21vw, 200px); position: relative; height: calc(var(--fw) * 1.45); margin: 0 auto 2rem; display: grid; place-items: center; pointer-events: none; }
.final-fan i {
  position: absolute; width: var(--fw); aspect-ratio: 4 / 5; border-radius: clamp(12px, 1.4vw, 18px); overflow: hidden; background: #F6EFE6;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9);
  transform: translateX(calc(var(--f) * var(--fw) * (.2 + var(--fp) * .5))) translateY(calc(var(--f) * var(--f) * var(--fw) * (.02 + var(--fp) * .05))) rotate(calc(var(--f) * (3deg + var(--fp) * 6deg)));
}
.final-fan i:nth-child(3) { z-index: 2; } .final-fan i:nth-child(2), .final-fan i:nth-child(4) { z-index: 1; }
.final-fan img { width: 100%; height: 100%; object-fit: cover; }
.final { padding-block: calc(var(--sec-y) * 1.4); }
.final .h-display { max-width: 14ch; margin: 0 auto 2rem; }
.final .fine { margin-top: 1.2rem; }
.final .lead.center { margin: -0.6rem auto 1.8rem; text-align: center; }
.ftr { padding: 2rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0)); border-top: 1px solid var(--line); }
.ftr-sos { max-width: var(--max); margin: 0 auto 3rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem 1rem; align-items: start; padding: 1.1rem 1.2rem; border-radius: 18px;
  background: rgba(var(--g-coral), .08); box-shadow: inset 0 0 0 1px rgba(var(--g-coral), .28); }
.sos-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #E0634A; color: #fff; }
.ftr-sos p { color: var(--tx-2); font-size: .92rem; }
.ftr-sos b { color: var(--tx); font-weight: 500; }
.ftr-top { max-width: var(--max); margin: 0 auto; display: grid; gap: 2rem; }
.ftr-line { margin-top: .6rem; color: var(--tx-2); max-width: 22rem; }
.ftr-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.ftr-links div { display: grid; gap: .1rem; align-content: start; }
.ftr-links .mono-cap { margin-bottom: .4rem; }
.ftr-links a { color: var(--tx-2); min-height: 40px; display: flex; align-items: center; width: max-content; transition: color var(--d-fast); }
.ftr-links a:hover { color: var(--tx); }
.ftr-mark { max-width: var(--max); margin: 3rem auto 1.5rem; overflow: hidden; }
.ftr-mark .logo-mark { width: 100%; color: var(--tx); opacity: .92; transform: translateY(60%); transition: transform 1.4s var(--e-enter); }
.ftr-mark.in .logo-mark { transform: none; }
.ftr-base { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem; font: 400 .74rem/1.5 var(--mono); color: var(--tx-3); letter-spacing: .06em; }

/* ============================================================================
   RESPONSIVE (mobile-first). 481+ = large phone / small tablet,
   769+ = tablet portrait, 1025+ = desktop, 1440+ = wide.
   ========================================================================== */
@media (min-width: 481px) {
  .ld-svc { font-size: .68rem; letter-spacing: .16em; gap: .35rem .8rem; }
  :root { --gutter: 1.5rem; }
  .px-pick button { font-size: 1.9rem; }
  .px-pick button span { font-size: .62rem; }
  .ftr-links { grid-template-columns: repeat(3, 1fr); }
  .tilt { height: 520px; }
  .tilt-row { --th: 160px; }
}

@media (min-width: 769px) {
  :root { --gutter: 2rem; --hdr-h: 72px; }
  .logo-mark { width: 108px; }
  .hdr-sign { display: inline-flex; }
  .hdr-act .btn { display: inline-flex; }
  .hero .h-display { font-size: clamp(3.4rem, 1.4rem + 5.4vw, 6.6rem); }
  .wall { --wg: 12px; --cr: 16px; }
  .js .loader { --dw: min(360px, max(160px, 36vw)); }
  .ld-deck i, .hero-deck i { border-radius: 16px; }
  .mf-pin { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4rem; }
  .mf-photo { order: 0; width: min(30vw, 340px); }
  .walk-grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); column-gap: 3rem; }
  .walk-head { grid-column: 1 / -1; }
  .walk-bar { grid-column: 1 / -1; }
  .walk-caps { grid-row: 3; grid-column: 1; align-self: center; min-height: 0; }
  .walk-phone { grid-row: 3; grid-column: 2; }
  .walk-phone .phone { --pw: min(42vw, calc((100svh - var(--hdr-h) - 9rem) * .4615), 360px); }
  .cap p { font-size: 1.08rem; }
  .trust-grid { grid-template-columns: .9fr 1.1fr; gap: 4rem; }
  .px-card { grid-template-columns: 1.1fr 1fr; padding: 2.4rem; align-items: center; }
  .px-foot { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .ftr-top { grid-template-columns: 1fr 1.6fr; }
  .tilt { height: 640px; }
  .tilt-row { --th: 200px; }
}

@media (min-width: 1025px) {
  .hdr-nav { display: flex; gap: 1.6rem; }
  .hero .h-display { font-size: clamp(4rem, 6.6vw, 8.6rem); }
  .hero-msg { --sh: min(9vw, 150px); }
  .js .loader { --dw: min(360px, max(160px, 24vw)); }
  .hm-1 { bottom: calc(50% + var(--deck) * .52 - .3em); }
  .hm-2 { top: calc(50% + var(--deck) * .54 - .28em); }
  .ld-deck i, .hero-deck i { border-radius: 18px; }
  .wall { --wg: 14px; --cr: 18px; }
  .hero-scrim::before { background:
    radial-gradient(ellipse 62% 54% at 50% 52%, rgba(10, 11, 14, .92) 0%, rgba(10, 11, 14, .78) 50%, rgba(10, 11, 14, .25) 85%, rgba(10, 11, 14, .1) 100%),
    linear-gradient(180deg, rgba(10, 11, 14, .85), rgba(10, 11, 14, .4) 11%, transparent 22%, transparent 84%, rgba(10, 11, 14, .55)); }
  .burger { display: none; }
  .menu { display: none !important; }
  .manifesto { height: 280vh; }
  .walk-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, .55fr); column-gap: 4rem; }
  .walk-rail { display: grid; grid-row: 3; grid-column: 3; align-self: center; gap: .1rem; counter-reset: c; }
  .walk-rail button { position: relative; display: flex; align-items: center; gap: .8rem; min-height: 40px; width: 100%; text-align: left; font-size: .92rem; color: var(--tx-3); transition: color .3s; }
  .walk-rail button::before { counter-increment: c; content: counter(c, decimal-leading-zero); font: 500 .7rem/1 var(--mono); letter-spacing: .08em; color: var(--tx-4); transition: color .3s; }
  .walk-rail button::after { content: ""; flex: 1; height: 1px; background: var(--line); transform-origin: left; transform: scaleX(.15); transition: transform .6s var(--e-settle), background-color .3s; }
  .walk-rail button:hover { color: var(--tx-2); }
  .walk-rail button.on { color: var(--tx); }
  .walk-rail button.on::before { color: var(--wc); }
  .walk-rail button.on::after { transform: scaleX(1); background: var(--wc); }
  .walk-phone .phone { --pw: min(calc((100svh - var(--hdr-h) - 7rem) * .4615), 370px); }
  .cap .h-2 { font-size: clamp(2.2rem, 1rem + 2.4vw, 3.4rem); }
  .tilt { height: 720px; }
  .tilt-row { --th: 230px; }
  .ftr-mark { margin-top: 5rem; }
}

@media (min-width: 1440px) {
  :root { --gutter: 3rem; }
}

/* Short landscape screens: release the pins so nothing is cut off */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { height: auto; }
  .hero-pin { position: relative; height: auto; min-height: 100svh; padding-block: calc(var(--hdr-h) + 2rem) 3rem; }
  .hero-msg { display: none; }
  .manifesto { height: auto; }
  .mf-pin { position: relative; height: auto; padding-block: var(--sec-y); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .rv, .split .w > span { opacity: 1; transform: none; }
  .ticker-track, .tilt-row, .wall-row { animation: none !important; }
  .hero { height: auto; --c: 0 !important; }
  .hero-msg { display: none; }
  .hero-pin { position: relative; height: auto; min-height: 100svh; padding-block: calc(var(--hdr-h) + 2rem) 3rem; }
  .card { --k: 0 !important; transform: none; }
  .final-fan { --fp: 1 !important; }
  .manifesto { height: auto; }
  .mf-pin { position: relative; height: auto; padding-block: var(--sec-y); }
  .mf-text .wd { --k: 1 !important; }
  .mf-photo { --mp: 1 !important; }
  .vets-photo picture { clip-path: none; }
  .vets-photo img { scale: 1; }
  .ftr-mark .logo-mark { transform: none; }
}