/* ==========================================================================
   Mivuni — launch site
   Warm Scandinavian product world, Apple-grade product presentation.
   ========================================================================== */

:root{
  --ivory:#F4F0E8; --cream:#FBF8F2; --sand:#EFE9DF; --sand-2:#E7DFD2; --oat:#D8CDB9;
  --ink:#232626; --graphite:#454747; --mute:#7C7F7C; --hair:rgba(35,38,38,.10);
  --salvia:#9BA68E; --rose:#C89B98; --dimbla:#9DB4C2;
  --dark:#15110E; --dark-2:#1C1714; --white:#FFFFFF;
  --sans:'Onest',ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --logo:'Quicksand',var(--sans);
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --r-card:28px; --wrap:1240px;
  --header-h:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0;background:var(--dark);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.05}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wordmark{font-family:var(--logo);font-weight:500;letter-spacing:.09em;font-size:22px;line-height:1;text-transform:lowercase}
.wordmark--lg{font-size:clamp(36px,5vw,56px)}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.eyebrow--light{color:rgba(244,240,232,.55)}
.sec-title{font-size:clamp(36px,5.2vw,66px);letter-spacing:-.04em;text-align:center;margin-bottom:clamp(28px,5vh,56px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:999px;padding:13px 24px;font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1;transition:transform .35s var(--ease-out),background .25s,box-shadow .35s,color .25s;white-space:nowrap;user-select:none}
.btn:active{transform:scale(.97)}
.btn-cta{background:var(--ink);color:var(--ivory);box-shadow:0 10px 30px -10px rgba(35,38,38,.45)}
.btn-cta:hover{background:#2E3232;box-shadow:0 16px 36px -10px rgba(35,38,38,.5);transform:translateY(-1px)}
.btn-glass{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.btn-glass:hover{background:rgba(255,255,255,.2)}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-xl{width:100%;padding:19px 24px;font-size:17px}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:300;background:var(--dark);display:grid;place-content:center;gap:22px;color:var(--ivory);transition:opacity .7s var(--ease),visibility .7s}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-mark{text-align:center;opacity:.9}
.loader-bar{width:160px;height:2px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:var(--ivory);transition:width .3s}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 28px;color:var(--ink);transition:color .4s}
.site-header::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(244,240,232,.85),rgba(244,240,232,0));z-index:-1;opacity:1;transition:opacity .4s;pointer-events:none}
.site-header.on-dark{color:#fff}
.site-header.on-dark::before{background:linear-gradient(to bottom,rgba(10,8,6,.55),rgba(10,8,6,0))}
.site-header .nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:30px;font-size:14px;font-weight:500;opacity:.9}
.site-header .nav a{opacity:.78;transition:opacity .2s}
.site-header .nav a:hover{opacity:1}
.site-header .brand{display:flex;align-items:center;height:100%}
.site-header .btn-cta{background:var(--ink);color:var(--ivory)}
.site-header.on-dark .btn-cta{background:var(--ivory);color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--dark);color:#fff}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(21,17,14,.42) 0%,rgba(21,17,14,.08) 38%,rgba(21,17,14,.28) 70%,rgba(21,17,14,.9) 100%)}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px 19vh;gap:14px;isolation:isolate}
.hero-copy::before{content:"";position:absolute;left:50%;top:50%;width:min(96vw,1180px);height:78vh;transform:translate(-50%,-54%);background:radial-gradient(50% 50% at 50% 50%,rgba(21,17,14,.62),rgba(21,17,14,.32) 40%,rgba(21,17,14,0) 72%);z-index:-1;pointer-events:none}
.hero-title{font-size:clamp(42px,7.2vw,104px);font-weight:600;letter-spacing:-.045em;line-height:.98;color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.35);max-width:14ch}
.hero-sub{font-size:clamp(17px,1.5vw,22px);font-weight:400;color:rgba(255,255,255,.78);letter-spacing:-.01em;margin-bottom:12px}
.hero-chevron{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);animation:bob 2.4s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
.hero-copy > *{opacity:0;transform:translateY(22px);animation:rise 1.2s var(--ease-out) forwards}
.hero-copy > *:nth-child(2){animation-delay:.12s}
.hero-copy > *:nth-child(3){animation-delay:.26s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- the stage (pinned film) ---------- */
.stage-wrap{position:relative;height:1100vh;background:var(--dark)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.stage-bg{position:absolute;inset:0;background:radial-gradient(90% 90% at 50% 50%,#F7F3EC 0%,var(--ivory) 70%);clip-path:circle(0% at 50% 50%);will-change:clip-path}
.turn{position:absolute;left:50%;top:50%;width:min(100vh,100vw);aspect-ratio:1/1;transform:translate(-50%,-50%);will-change:transform;z-index:3}
.turn canvas{position:relative;display:block;width:100%;height:100%;opacity:0;transition:opacity .4s ease}
.turn-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .4s ease}
.turn.model-ready canvas{opacity:1}
.turn.model-ready .turn-fallback{opacity:0}
@media(prefers-reduced-motion:reduce){.turn canvas,.turn-fallback{transition:none}}
.pet-layer{position:absolute;inset:0;opacity:0;z-index:2}
.pet-layer img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.stage-line{position:absolute;top:50%;transform:translateY(-50%);margin:0;font-size:clamp(26px,3.5vw,54px);font-weight:500;letter-spacing:-.035em;line-height:1.02;color:var(--ink);opacity:0;z-index:4;will-change:transform,opacity}
.stage-line--l{left:7vw;text-align:left}
.stage-line--r{right:7vw;text-align:right}
.callout{position:absolute;z-index:5;display:flex;align-items:center;gap:12px;opacity:0;color:var(--ink);font-size:15px;line-height:1.35;will-change:transform,opacity}
.callout i{width:10px;height:10px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 6px rgba(35,38,38,.12);flex:none;position:relative}
.callout i::after{content:"";position:absolute;left:100%;top:50%;width:28px;height:1px;background:var(--ink);opacity:.5}
.callout span{display:block;padding-left:26px;max-width:260px}
.callout b{display:block;font-weight:600;font-size:17px;letter-spacing:-.02em;margin-bottom:3px}
.callout--slot{flex-direction:row-reverse;text-align:right}
.callout--slot i::after{left:auto;right:100%}
.callout--slot span{padding-left:0;padding-right:26px}
.callout--sense{left:calc(50% + 29vh);top:41%}
.callout--slot{right:calc(50% + 31vh);top:50%}
.callout--mic{left:calc(50% + 5vh);top:12%}
.stage-title{position:absolute;left:50%;top:11vh;transform:translateX(-50%);width:min(92vw,900px);text-align:center;font-size:clamp(30px,4.3vw,58px);letter-spacing:-.04em;opacity:0;z-index:6;will-change:transform,opacity}
.stage-title span{color:var(--mute)}
.stage-eyebrow{position:absolute;left:50%;top:8vh;transform:translateX(-50%);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);opacity:0;z-index:6}
.stage-sub{position:absolute;left:50%;top:calc(11vh + 4.6em);transform:translateX(-50%);font-size:clamp(16px,1.5vw,21px);color:var(--graphite);opacity:0;z-index:6;text-align:center;width:min(92vw,700px)}
.features{position:absolute;right:9vw;top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0;width:min(420px,36vw);opacity:0;z-index:6}
.features li{display:flex;align-items:center;gap:16px;padding:9px 0;opacity:.3;transition:opacity .35s var(--ease)}
.features li.on{opacity:1}
.f-ico{width:42px;height:42px;border-radius:50%;background:var(--sand-2);display:grid;place-items:center;flex:none;transition:background .35s}
.features li.on .f-ico{background:var(--ink)}
.f-ico svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.features li.on .f-ico svg{stroke:var(--ivory)}
.f-txt b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em}
.f-txt em{display:block;font-style:normal;font-size:14px;color:var(--mute);max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--ease),opacity .4s}
.features li.on .f-txt em{max-height:3em;opacity:1}
.appcard{position:absolute;left:calc(50% - 20vw + 11vh);top:57%;width:262px;background:var(--cream);border-radius:22px;padding:18px 18px 16px;box-shadow:0 24px 60px -18px rgba(35,38,38,.3),0 1px 0 rgba(255,255,255,.6) inset;opacity:0;z-index:7;will-change:transform,opacity}
.appcard-inner{position:relative;min-height:118px}
.ac{position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease);color:var(--ink)}
.ac.on{opacity:1}
.ac small,.ph-card small,.mini-log small,.vet-rows small{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.ac h5,.ph-greet h5{font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.ac p{font-size:12.5px;color:var(--graphite);line-height:1.4}
.ac-bars{display:flex;align-items:flex-end;gap:5px;height:34px;margin:6px 0 8px}
.ac-bars i{flex:1;background:var(--salvia);border-radius:3px;height:calc(var(--h) * 100%);opacity:.9}
.ac-wave{width:100%;height:40px;color:var(--salvia);margin-top:4px}
.ac-band{position:relative;height:54px;margin:6px 0 8px;border-radius:8px;background:var(--ivory)}
.ac-band-range{position:absolute;left:0;right:0;top:34%;height:32%;background:rgba(155,166,142,.28);border-radius:6px}
.ac-dot{position:absolute;left:var(--x);top:var(--y);width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--graphite)}
.ac-dot--now{background:var(--ink);box-shadow:0 0 0 4px rgba(35,38,38,.12)}
.appcard-note{position:absolute;right:14px;bottom:-22px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.stage-title--pet{opacity:0;top:auto;bottom:17vh}
.stage-sub{top:auto;bottom:11vh}
.pet-layer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to top,rgba(244,240,232,.97) 20%,rgba(244,240,232,0));pointer-events:none}

/* ---------- big cards ---------- */
.bigcards{position:relative;height:340vh;background:var(--ivory)}
.bigcards-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr) minmax(0,.8fr);align-items:center;gap:3vw;padding:0 5vw;overflow:hidden}
.bc-left{position:relative;height:260px}
.bc-title{position:absolute;left:0;top:50%;transform:translateY(calc(-50% + var(--dy,0px)));font-size:clamp(34px,4.2vw,62px);letter-spacing:-.04em;line-height:1;opacity:0;will-change:transform,opacity}
.bc-center{position:relative;width:100%;max-width:min(78vh,100%);margin:0 auto;aspect-ratio:1/1}
.bc-visual{position:absolute;inset:0;opacity:0;display:grid;place-items:center;will-change:transform,opacity}
.bc-visual img{width:100%;height:100%;object-fit:contain}
.bc-visual[data-card="1"] img{object-fit:cover;object-position:50% 45%;border-radius:40px;box-shadow:0 30px 70px -40px rgba(35,38,38,.35)}
.xco{font-size:13.5px}
.xco span{background:rgba(244,240,232,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:4px 10px;border-radius:999px}
.bc-visual[data-card="0"]{overflow:visible}
.bc-visual[data-card="0"]::before{content:"";position:absolute;inset:0;border-radius:40px;background:linear-gradient(180deg,#E7DDD4 0%,#EFE7DF 100%);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 70px -40px rgba(35,38,38,.35)}
#explode-canvas{position:relative;width:100%;height:100%;border-radius:40px;-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 58%,transparent 100%)}
.xcallouts{position:absolute;inset:0;pointer-events:none}
.xco{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;letter-spacing:-.01em;opacity:0;white-space:nowrap;transform:translateY(var(--dy,6px))}
.xco i{width:8px;height:8px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 5px rgba(35,38,38,.12);flex:none}
.xco span{padding-left:4px}
.xco--l{flex-direction:row-reverse;transform:translate(-100%,var(--dy,6px))}
.xco--l span{padding-left:0;padding-right:4px}
.bc-right{position:relative;height:260px}
.bc-card{position:absolute;left:0;right:0;top:50%;transform:translateY(calc(-50% + var(--dy,0px)));background:var(--cream);border-radius:22px;padding:24px 26px;box-shadow:0 24px 60px -24px rgba(35,38,38,.28);font-size:15px;line-height:1.5;color:var(--graphite);opacity:0;will-change:transform,opacity}
.bc-card a{display:inline-block;margin-top:14px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--hair)}
.bc-dots{position:absolute;right:-26px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px}
.bc-dots i{width:6px;height:6px;border-radius:50%;background:rgba(35,38,38,.22);transition:background .3s,transform .3s}
.bc-dots i.on{background:var(--ink);transform:scale(1.25)}
.phone{position:relative;width:min(300px,72%);aspect-ratio:9/19;background:#111;border-radius:46px;padding:11px;box-shadow:0 40px 80px -30px rgba(35,38,38,.5),0 0 0 1px rgba(0,0,0,.6)}
.phone-screen{height:100%;background:var(--ivory);border-radius:36px;padding:26px 16px 14px;display:flex;flex-direction:column;gap:9px;overflow:hidden;font-size:12px;color:var(--ink)}
.ph-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--mute)}
.ph-top .wordmark{font-size:14px;color:var(--ink)}
.ph-greet small{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.ph-card{background:var(--cream);border-radius:14px;padding:11px 12px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
.ph-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ph-row b{font-size:14px;font-weight:600;letter-spacing:-.02em}
.ph-row span{font-size:11px;color:var(--mute)}
.ph-card .ac-bars{height:26px;margin:8px 0 0}
.ph-card .ac-wave{height:30px}
.ph-card--note p{font-size:12px;color:var(--graphite);font-style:italic}
.ph-nav{margin-top:auto;display:flex;justify-content:space-around;padding-top:6px}
.ph-nav i{width:18px;height:18px;border-radius:6px;background:rgba(35,38,38,.12)}
.ph-nav i.on{background:var(--ink)}
.phone .appcard-note{right:0;bottom:-26px}

/* ---------- sections below the film ---------- */
.section{padding:clamp(72px,13vh,150px) 0}
.bento{background:var(--sand)}
.bento-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.card{position:relative;grid-column:span 2;min-height:460px;background:var(--cream);border-radius:var(--r-card);overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.7) inset}
.card--wide{grid-column:span 3;min-height:400px}
.card--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.card--img:hover img{transform:scale(1.03)}
.card-copy{position:absolute;left:0;right:0;bottom:0;padding:26px 26px 26px;background:linear-gradient(to top,rgba(251,248,242,.98) 55%,rgba(251,248,242,0))}
.card-copy h3{font-size:22px;letter-spacing:-.03em;margin-bottom:6px}
.card-copy p{font-size:15px;color:var(--graphite);line-height:1.45;max-width:36ch}
.card-copy--light{background:linear-gradient(to top,rgba(21,17,14,.78) 40%,rgba(21,17,14,0));color:#fff}
.card-copy--light p{color:rgba(255,255,255,.82)}
.mini-log{position:absolute;top:22px;left:22px;background:rgba(251,248,242,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;padding:12px 16px;box-shadow:0 14px 30px -14px rgba(35,38,38,.35);font-size:12px}
.mini-log b{display:block;font-size:14px;font-weight:600;letter-spacing:-.02em}
.mini-log span{color:var(--mute)}
.card--dims img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.dims{position:absolute;top:24px;left:26px;display:flex;align-items:baseline;gap:6px;font-size:clamp(34px,3vw,46px);font-weight:600;letter-spacing:-.045em;line-height:1;z-index:2}
.dims small{font-size:14px;font-weight:500;letter-spacing:0;margin-left:3px;color:var(--mute)}
.dims i{font-style:normal;color:var(--mute);font-weight:400;font-size:.6em}
.card--vet{display:flex;flex-direction:column}
.vet-ui{margin:24px 24px 0;background:var(--ivory);border-radius:20px;padding:18px 18px 16px;font-size:13px}
.vet-head{display:flex;justify-content:space-between;align-items:center;color:var(--mute);font-size:11px;margin-bottom:8px}
.vet-head .wordmark{font-size:14px;color:var(--ink)}
.vet-rows > div{display:flex;flex-direction:column;padding:9px 0;border-bottom:1px solid var(--hair)}
.vet-rows b{font-weight:500;color:var(--ink)}
.vet-btn{margin-top:12px;display:inline-block;background:var(--ink);color:var(--ivory);border-radius:999px;padding:8px 14px;font-size:12px;font-weight:500}
.card--vet .card-copy{position:static;background:none;padding-top:22px;margin-top:auto}

/* ---------- films & voices ---------- */
.films{background:var(--dark);color:var(--ivory)}
.films .sec-title{color:var(--ivory)}
.film-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:56px}
.film-card{position:relative;border:0;padding:0;border-radius:var(--r-card);overflow:hidden;background:#241f1b;aspect-ratio:16/10;text-align:left;color:#fff}
.film-card--lg{grid-column:span 2;aspect-ratio:16/8}
.film-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out),opacity .4s}
.film-card:hover img{transform:scale(1.03)}
.film-card .play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;place-items:center;transition:transform .4s var(--ease-out),background .3s}
.film-card .play svg{width:28px;height:28px;margin-left:3px}
.film-card:hover .play{transform:scale(1.08);background:rgba(255,255,255,.26)}
.film-label{position:absolute;left:24px;bottom:20px;font-size:15px;font-weight:500;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.ticker{overflow:hidden;margin:0 -24px;padding:0 24px;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex;gap:18px;width:max-content;animation:marquee 60s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.tick{position:relative;margin:0;width:260px;aspect-ratio:9/14;border-radius:22px;overflow:hidden;background:#241f1b;flex:none}
.tick video,.tick img{width:100%;height:100%;object-fit:cover}
.tick figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 18px;background:linear-gradient(to top,rgba(10,8,6,.82),rgba(10,8,6,0))}
.tick b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px;line-height:1.2}
.tick span{display:block;font-size:12.5px;color:rgba(255,255,255,.8);line-height:1.4}

/* ---------- get yours ---------- */
.buy{background:var(--ivory)}
.buy-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.buy-preview{position:sticky;top:calc(var(--header-h) + 18px)}
.preview-stage{position:relative;aspect-ratio:1/1;background:var(--cream);border-radius:34px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.8) inset}
.preview-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 60%,rgba(35,38,38,.06),transparent 70%);pointer-events:none}
.band-layer{position:absolute;left:-4%;width:108%;top:50%;transform:translateY(-50%);transition:opacity .25s}
.module-layer{position:absolute;left:50%;top:50%;width:44%;transform:translate(-50%,-50%);filter:drop-shadow(0 34px 34px rgba(35,38,38,.18));transition:opacity .25s;z-index:2}
.preview-caption{text-align:center;margin-top:16px;font-size:14px;color:var(--mute)}
.opt-group{margin-bottom:28px}
.opt-group h4{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.info{font-weight:400;color:var(--mute);cursor:help;font-size:14px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{text-align:left;padding:14px 16px;border-radius:16px;background:var(--cream);border:1.5px solid transparent;transition:border-color .2s,transform .3s var(--ease-out)}
.opt b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.opt span{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.opt.on{border-color:var(--ink)}
.opt:hover{transform:translateY(-1px)}
.swatches{display:flex;gap:16px;flex-wrap:wrap}
.sw{display:grid;justify-items:center;gap:7px;background:none;border:0;padding:0}
.sw i{width:42px;height:42px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 -6px 10px rgba(0,0,0,.06);transition:transform .3s var(--ease-out),box-shadow .2s}
.sw span{font-size:12px;color:var(--mute)}
.sw:hover i{transform:scale(1.06)}
.sw.on i{box-shadow:0 0 0 2px var(--ivory),0 0 0 4px var(--ink),inset 0 0 0 1px rgba(0,0,0,.08)}
.sw.on span{color:var(--ink)}
.check{display:flex;align-items:center;gap:12px;cursor:pointer}
.check input{position:absolute;opacity:0;pointer-events:none}
.check-box{width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(35,38,38,.3);display:grid;place-items:center;transition:background .2s,border-color .2s;flex:none}
.check-box::after{content:"";width:10px;height:6px;border-left:2px solid var(--ivory);border-bottom:2px solid var(--ivory);transform:rotate(-45deg) translateY(-1px);opacity:0}
.check input:checked ~ .check-box{background:var(--ink);border-color:var(--ink)}
.check input:checked ~ .check-box::after{opacity:1}
.check-txt b{display:block;font-size:15px;font-weight:600}
.check-txt em{font-style:normal;font-size:12px;color:var(--mute)}
.buy-summary{border-top:1px solid var(--hair);padding:18px 0 16px}
.sum-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:14px;color:var(--graphite)}
.sum-line strong{font-size:24px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.buy-note{text-align:center;font-size:13px;color:var(--mute);margin-top:12px}

/* ---------- footer ---------- */
.site-footer{background:var(--dark);color:var(--ivory);padding:12vh 0 6vh}
.foot-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-bottom:1px solid rgba(244,240,232,.12);padding-bottom:40px}
.foot-tag{font-size:clamp(22px,2.4vw,32px);font-weight:500;letter-spacing:-.03em}
.foot-mid{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:36px 0}
.foot-nav{display:flex;flex-wrap:wrap;gap:24px;font-size:14px;color:rgba(244,240,232,.75)}
.foot-nav a:hover{color:#fff}
.socials{display:flex;gap:18px;color:rgba(244,240,232,.75)}
.socials a:hover{color:#fff}
.legal{font-size:12px;line-height:1.6;color:rgba(244,240,232,.5);max-width:820px}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;z-index:200;background:rgba(10,8,6,.94);display:grid;place-items:center;padding:24px;opacity:0;transition:opacity .35s var(--ease)}
.modal.open{opacity:1}
.modal[hidden]{display:none}
.modal-close{position:absolute;top:20px;right:20px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;transition:background .2s}
.modal-close:hover{background:rgba(255,255,255,.16)}
.modal-body{width:min(92vw,1200px)}
.modal-body video{width:100%;max-height:84vh;border-radius:20px;background:#000}
.modal--light{background:rgba(21,17,14,.58);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.modal-card{background:var(--cream);color:var(--ink);border-radius:30px;padding:38px 36px;width:min(92vw,520px);box-shadow:0 40px 100px -30px rgba(0,0,0,.6);transform:translateY(16px);transition:transform .45s var(--ease-out)}
.modal.open .modal-card{transform:none}
.modal-card h3{font-size:30px;letter-spacing:-.035em;margin-bottom:8px}
.order-sum{font-size:14px;color:var(--mute);margin-bottom:18px}
.modal-card label{display:block;margin:12px 0;font-size:13px;font-weight:500}
.modal-card label small{font-weight:400;color:var(--mute)}
.modal-card input{display:block;width:100%;margin-top:6px;padding:13px 14px;border-radius:12px;border:1px solid rgba(35,38,38,.16);background:#fff;font:inherit;font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s}
.modal-card input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(35,38,38,.08)}
.modal-card .btn-xl{margin-top:18px}
.order-note{font-size:12.5px;color:var(--mute);text-align:center;margin-top:12px;line-height:1.5}
.order-done{text-align:center;display:grid;gap:12px;justify-items:center}
.order-done p{color:var(--graphite);margin-bottom:8px}

/* ---------- arrivals ---------- */
.section .wrap > *{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.section.in .wrap > *{opacity:1;transform:none}
.section.in .wrap > *:nth-child(2){transition-delay:.08s}
.section.in .wrap > *:nth-child(3){transition-delay:.16s}
.section.in .wrap > *:nth-child(4){transition-delay:.24s}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .features{width:min(380px,40vw);right:5vw}
  .appcard{left:calc(50% - 24vw + 10vh);width:230px}
}
@media (max-width:900px){
  .site-header{padding:0 18px}
  .site-header .nav{display:none}
  .hero-title{max-width:11ch}
  .stage-wrap{height:1000vh}
  .turn{width:min(100vw,78vh)}
  .stage-line{font-size:clamp(26px,7vw,34px);top:auto;transform:none}
  .stage-line--l{top:13vh;left:6vw}
  .stage-line--r{bottom:12vh;right:6vw}
  .callout,.callout--slot{left:50%;right:auto;width:min(86vw,360px);margin-left:calc(min(86vw,360px) / -2);flex-direction:column;text-align:center;gap:10px;font-size:13.5px}
  .callout span,.callout--slot span{max-width:none;padding:0}
  .callout b{font-size:15px}
  .callout i::after{left:50%;top:auto;bottom:100%;width:1px;height:22px;transform:translateX(-.5px)}
  .callout--slot i::after{left:50%;right:auto}
  .callout--sense,.callout--slot{top:71%}
  .callout--mic{top:9%;flex-direction:column-reverse}
  .callout--mic i::after{bottom:auto;top:100%}
  .xcallouts{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;margin-top:12px;pointer-events:none}
  .xco,.xco--l{position:static;flex-direction:row;transform:none;font-size:12px;background:rgba(251,248,242,.9);border-radius:999px;padding:5px 10px 5px 8px;gap:6px}
  .xco span,.xco--l span{background:none;backdrop-filter:none;padding:0}
  .xco i{box-shadow:none;width:6px;height:6px}
  .bc-visual[data-card="0"]{display:block}
  #explode-canvas{height:auto;aspect-ratio:1/1;width:84%;margin:0 auto}
  .bc-center{max-width:min(100%,44vh)}
  .phone{width:min(210px,58%)}
  .phone-screen{font-size:11px;padding:20px 12px 12px;gap:7px}
  .ph-row b{white-space:nowrap;font-size:13px}
  .ph-card{padding:9px 10px}
  .stage-title{top:12vh;font-size:clamp(26px,7.4vw,36px)}
  .stage-eyebrow{top:8.5vh;font-size:10px;white-space:nowrap}
  .stage-sub{font-size:15px}
  .stage-title--pet{top:auto;bottom:15vh}
  .stage-sub{top:auto;bottom:9vh}
  .bc-title{transform:translate(-50%,calc(-50% + var(--dy,0px)))}
  .xco--l{flex-direction:row;transform:translate(0,6px)}
  .xco--l span{padding-left:4px;padding-right:0}
  .features{right:6vw;left:6vw;top:auto;bottom:4vh;transform:none;width:auto}
  .features li{padding:4px 0;gap:10px}
  .f-ico{width:30px;height:30px}
  .f-ico svg{width:15px;height:15px}
  .f-txt b{font-size:14.5px}
  .f-txt em{display:none}
  .appcard{display:none}
  .bigcards{height:300vh}
  .bigcards-pin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;padding:calc(var(--header-h) + 10px) 20px 24px}
  .bc-left{height:84px}
  .bc-title{left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;font-size:clamp(28px,7.4vw,36px)}
  .bc-center{max-width:min(100%,52vh)}
  .bc-right{height:150px}
  .bc-card{padding:16px 18px;font-size:14px}
  .bc-dots{right:auto;left:50%;top:auto;bottom:-16px;transform:translateX(-50%);flex-direction:row}
  .xco{font-size:12px}
  .phone{width:min(230px,60%)}
  .bento-grid{grid-template-columns:1fr}
  .card,.card--wide{grid-column:span 1;min-height:380px}
  .film-grid{grid-template-columns:1fr}
  .film-card--lg{grid-column:span 1;aspect-ratio:16/10}
  .tick{width:220px}
  .buy-grid{grid-template-columns:1fr;gap:28px}
  .foot-top,.foot-mid{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){
  .opts{grid-template-columns:1fr 1fr}
  .swatches{gap:12px}
  .sw i{width:38px;height:38px}
  .hero-sub{font-size:16px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-chevron,.ticker-track{animation:none}
  .hero-copy > *{animation:none;opacity:1;transform:none}
  .section .wrap > *{opacity:1;transform:none;transition:none}
  .card--img img,.film-card img{transition:none}
}

/* Preserve breathing room below the stage heading on shorter desktops. */
@media(min-width:900px) and (max-height:800px){.features{top:56%}}

/* Mivuni Form — continuous product story, October 2026 */
body{background:var(--ivory)}
:focus-visible{outline:2px solid #66775d;outline-offset:5px}
.text-link{border:0;background:none;padding:8px 0;display:inline-flex;align-items:center;gap:14px;font-size:14px;font-weight:500}
.text-link span{transition:transform .3s}.text-link:hover span{transform:translate(3px,-2px)}
.stage-wrap{height:1180svh;background:var(--ivory)}
.stage-bg{clip-path:none;background:radial-gradient(ellipse at 67% 45%,#fffdf8 0%,#f4f0e8 52%,#ebe5db 100%)}
.hero-intro{position:absolute;left:max(7vw,calc((100vw - 1240px)/2));top:50%;width:48%;transform:translateY(-50%);z-index:8;will-change:transform,opacity,clip-path}
.hero-intro .eyebrow{font-size:11px;letter-spacing:.16em;margin-bottom:24px;color:#72776b}
.hero-intro h1{font-size:clamp(48px,5.9vw,90px);font-weight:500;line-height:1.04;letter-spacing:-.065em}
.hero-intro h1 span{color:#939788}
.hero-description{font-size:clamp(15px,1.3vw,19px);color:#70746b;line-height:1.65;margin:28px 0 32px}
.hero-actions{display:flex;align-items:center;gap:26px}.hero-actions .btn{padding:17px 23px;gap:28px}
.hero-footer{position:absolute;bottom:30px;left:7vw;right:7vw;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#7f8477;z-index:8;letter-spacing:.03em}
.scroll-hint{display:flex;align-items:center;gap:12px}.scroll-hint i{font-style:normal;border:1px solid #a6aa9d;border-radius:50%;width:28px;height:28px;display:grid;place-items:center}
.turn{width:min(100svh,100vw);pointer-events:none}
.stage-line{font-weight:400;font-size:clamp(30px,3.7vw,58px)}
.stage-line--l{left:8vw}.stage-line--r{right:8vw}
.callout--sense{left:calc(50% + 22svh)}.callout--slot{right:calc(50% + 23svh)}.callout--mic{top:22%;left:calc(50% + 17svh)}
.stage-title{top:15%;font-size:clamp(30px,3.6vw,52px);width:90%;line-height:1.08;font-weight:500}
.stage-eyebrow{top:11%;font-size:10px;letter-spacing:.12em;white-space:nowrap}
.features{left:calc(50% + 6vw);right:auto;top:59%;width:min(360px,34vw)}
.features li{padding:8px 0;gap:13px;transition:opacity .45s,transform .6s var(--ease-out);transform:translateX(10px)}
.features li.on{transform:translateX(0)}.f-ico{width:35px;height:35px}.f-txt b{font-size:17px}.f-txt em{font-size:12px;line-height:1.5}
.appcard{left:calc(50% - 20vw - 130px);top:73%;width:260px;box-shadow:0 14px 40px -22px #575b4d33;background:#fffdf7e6;padding:14px 18px;border:1px solid #ffffffb3;border-radius:18px}
.appcard-inner{min-height:97px}.ac h5{font-size:14px}.ac p{font-size:11px}.ac small{font-size:9px}.ac-bars{height:26px}.ac-wave{height:28px}.appcard-note{font-size:8px;bottom:-18px}
.pet-family{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}
.family-pet{position:absolute;left:50%;bottom:12%;width:min(23vw,calc(57svh * .478));aspect-ratio:387.6/811;z-index:var(--depth);transform:translateX(-50%);will-change:transform,opacity}
.pet-sprite{position:absolute;top:0;bottom:0;left:calc(var(--slot) * -100%);width:500%;background-image:url('../assets/pets/lineup.webp');background-size:100% 100%;background-repeat:no-repeat;clip-path:var(--pet-crop)}
/* Crops follow the subjects in the original sheet. The whippet's tail crosses
   the nominal 40% column boundary, so its full lower-left contour stays with it. */
.family-pet--0{--pet-crop:polygon(0 0,20% 0,20% 100%,0 100%)}
.family-pet--1{--pet-crop:polygon(20% 0,40% 0,40% 82%,38% 82%,38% 100%,20% 100%)}
.family-pet--2{--pet-crop:polygon(40% 0,60% 0,60% 100%,38% 100%,38% 82%,40% 82%)}
.family-pet--3{--pet-crop:polygon(60% 0,80% 0,80% 100%,60% 100%)}
.family-pet--4{--pet-crop:polygon(80% 0,100% 0,100% 100%,80% 100%)}
.family-pet span{position:absolute;bottom:-6%;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.08em;color:#7b8174;text-transform:uppercase;opacity:0}
.stage-title--pet{top:13%;bottom:auto;font-size:clamp(30px,3.5vw,48px);z-index:1}
.stage-sub{top:auto;bottom:4%;font-size:14px;color:#7c8376}
.inside-story{height:285svh;background:#eee5dc}
.inside-pin{position:sticky;top:0;height:100svh;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#f5eee6,#eee5dc 75%)}
.inside-heading{position:absolute;top:15%;left:7vw;z-index:3;max-width:32vw}
.inside-heading h2{font-size:clamp(30px,3.6vw,54px);font-weight:500;letter-spacing:-.045em;line-height:1.08}.inside-heading h2 span{color:#9b968d}
.inside-heading .eyebrow{font-size:10px}
.inside-visual{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(64svh,49vw);aspect-ratio:1;}
#explode-canvas{width:100%;height:100%;border-radius:0;mask-image:radial-gradient(ellipse,#000 32%,#000c 51%,transparent 73%);-webkit-mask-image:radial-gradient(ellipse,#000 32%,#000c 51%,transparent 73%)}
.inside-caption{position:absolute;right:7vw;bottom:23%;width:24%;max-width:290px}.inside-index{font-size:11px;color:#858477;letter-spacing:.12em}.inside-caption h3{font-size:24px;font-weight:500;margin:15px 0 12px;line-height:1.12}.inside-caption p{font-size:14px;color:#7c7a70;line-height:1.65;min-height:68px}.inside-progress{margin-top:28px;width:100%;height:1px;background:#c9c4b7}.inside-progress i{display:block;width:0;height:1px;background:#63695b}.inside-note{position:absolute;bottom:5%;left:0;right:0;text-align:center;font-size:10px;color:#969184;letter-spacing:.05em}
.band-story{background:#f8f5ee;padding-bottom:60px;overflow:hidden;transition:background-color .8s}
.band-heading{text-align:center;position:relative;z-index:2}.band-heading .eyebrow{font-size:10px;letter-spacing:.13em}.band-heading h2{margin-bottom:22px;font-weight:500}.band-heading h2 span,.app-copy h2 span{color:#939b8c}.band-heading>p:last-child{font-size:14px;line-height:1.6;color:#7e8677}
.band-display{position:relative;padding-top:0;isolation:isolate}.band-ghost-word{position:absolute;top:25%;left:50%;transform:translateX(-50%);font-size:clamp(65px,13vw,190px);font-weight:500;color:#e9e8df;letter-spacing:-.065em;white-space:nowrap;z-index:-1}
.product-preview{position:relative}.product-preview canvas{width:100%;height:100%;opacity:0;transition:opacity .5s}.product-preview.model-ready canvas{opacity:1}.product-preview.model-ready>.turn-fallback{opacity:0}.band-preview{width:min(800px,90vw);height:min(500px,62vw);margin:0 auto;pointer-events:none}
.band-preview .turn-fallback{object-fit:contain;mix-blend-mode:multiply}
.band-palette{display:flex;justify-content:center;gap:clamp(16px,4vw,50px);position:relative;z-index:3;margin-top:-12px}
.combo{display:grid;justify-items:center;gap:13px;border:0;background:none;padding:8px 2px}.combo i{display:block;width:51px;height:34px;border-radius:12px;background:linear-gradient(90deg,var(--m) 50%,var(--b) 50%);box-shadow:inset 0 0 0 1px #23262610;transition:transform .4s,box-shadow .4s}.combo span{font-size:11px;color:#92988b}.combo.on i{box-shadow:0 0 0 4px #f8f5ee,0 0 0 5px #69735f;transform:translateY(-4px)}.combo.on span{color:var(--ink)}.combo:hover i{transform:translateY(-4px)}
.band-selection{display:flex;align-items:center;justify-content:center;gap:32px;margin-top:30px;font-size:13px}.band-selection p{color:#7c8375}.band-selection a{font-size:13px;border-bottom:1px solid #d2d5ca;padding:7px 0}
.band-details{display:flex;justify-content:space-between;border-top:1px solid #d9dccf;margin-top:70px;padding-top:27px;color:#828979;font-size:12px}.band-details b{font-weight:400;font-size:10px;margin-right:14px;opacity:.65}
.app-story{background:#ecefe7;overflow:hidden}.app-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;max-width:1050px}.app-copy h2{font-size:clamp(38px,5vw,62px);font-weight:500;line-height:1.08}.app-copy>p:not(.eyebrow){max-width:360px;line-height:1.7;font-size:15px;color:#788271;margin:26px 0}.app-copy .eyebrow{font-size:10px}.app-phone{display:flex;justify-content:center;padding:20px 0 40px}.app-phone .phone{width:270px;transform:rotate(5deg);box-shadow:15px 30px 70px -22px #47563745}.ph-greet{margin:12px 0 6px}.ph-card{margin-bottom:3px}.ph-greet h5{font-size:21px}.ph-row span{font-size:9px}
.bento .eyebrow{text-align:center;font-size:10px;letter-spacing:.13em}.bento .sec-title{font-weight:500}.card{box-shadow:none}.card--vet{min-height:490px;background:#fafcf6}.vet-ui{padding:23px;margin:20px 20px 0;background:#fff;border:1px solid #e7ebdf;box-shadow:0 15px 34px -16px #4c5c3522;transform-origin:50% 100%}.vet-head{margin-bottom:24px}.vet-example{font-size:8px;letter-spacing:.09em;text-transform:uppercase;border:1px solid #e5e8df;padding:4px 8px;border-radius:20px}.vet-pet{display:flex;gap:11px;align-items:center}.vet-avatar{width:36px;height:36px;background:#e8eddf;border-radius:50%;display:grid;place-items:center;font-family:var(--logo);font-size:17px}.vet-pet b{font-size:13px;font-weight:500;display:block}.vet-pet small{font-size:9px;color:#9a9f92}.vet-file{margin-left:auto;color:#7f8d6f}.vet-chart{margin:20px 0 3px}.vet-chart>span{font-size:10px;color:#657158;display:flex;justify-content:space-between}.vet-chart small{font-size:8px;color:#9ba38e}.vet-chart svg{width:100%;height:45px;margin-top:5px;overflow:visible}.vet-rows>div{flex-direction:row;align-items:center;gap:11px;padding:10px 0;border-color:#eef0e8}.vet-rows i{font-style:normal;color:#96a583;width:18px;font-size:17px}.vet-rows small{font-size:8px;margin:0 0 2px}.vet-rows b{font-size:11px;font-weight:400}.vet-btn{display:flex;justify-content:space-between;align-items:center;border-radius:9px;background:#eff3e8;color:#728260;font-size:10px;font-weight:500;padding:11px 14px;margin-top:14px}.card--vet .card-copy{padding-top:25px;padding-bottom:28px}
.buy .sec-title{font-weight:500}.preview-stage{border-radius:0;background:radial-gradient(ellipse at 50% 50%,#fdfcf5,var(--ivory) 70%);box-shadow:none;aspect-ratio:1.08}.preview-stage::after{display:none}.preview-stage canvas{touch-action:pan-y;cursor:grab;position:relative;z-index:2}.preview-stage canvas:active{cursor:grabbing}.preview-stage>.turn-fallback{object-fit:contain;mix-blend-mode:multiply}.preview-hint{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);font-size:10px;color:#a1a693;letter-spacing:.06em;pointer-events:none;white-space:nowrap;z-index:3}.preview-hint span{margin-left:8px}.view-reset{position:absolute;bottom:3%;right:5%;border:1px solid #d8ddcc;background:#ffffff60;border-radius:50%;width:36px;height:36px;font-size:18px;z-index:4}.preview-caption{font-size:11px;letter-spacing:.03em}.fit-note{font-size:11px;margin-top:10px;color:#9a9f91}.opt{padding:14px}.opt span{font-size:10px}.sw i{width:37px;height:37px}.sw{min-width:44px;min-height:62px}.buy-note{font-size:11px;line-height:1.6}
.section .wrap>*{opacity:1;transform:none;transition:none}
.reveal-ready{will-change:transform,clip-path,opacity}.card.reveal-ready{transition:none}
@media(min-width:901px) and (max-height:740px){.stage-title{top:14%;font-size:38px}.stage-eyebrow{top:10%}.features{top:60%}.features li{padding:5px 0}.appcard{top:72%}.f-ico{width:31px;height:31px}.f-txt b{font-size:16px}.appcard-inner{min-height:85px}}
@media(min-width:1500px){.hero-intro{left:calc(50% - 620px)}.features{left:calc(50% + 100px)}}
@media(max-width:900px){
 .stage-wrap{height:1200svh}.hero-intro{left:24px;right:24px;top:15%;width:auto;transform:none;text-align:center}.hero-intro .eyebrow{margin-bottom:17px;font-size:9px}.hero-intro h1{font-size:clamp(43px,9.3vw,65px);line-height:1.04}.hero-description{font-size:14px;line-height:1.6;margin:20px 0 24px}.hero-actions{justify-content:center;gap:22px}.hero-actions .btn{padding:15px 20px;font-size:13px;gap:17px}.hero-actions .text-link{font-size:12px}.hero-footer{bottom:24px;left:24px;right:24px;font-size:9px}.hero-footer>span:first-child{display:none}.scroll-hint i{width:24px;height:24px}
 .turn{width:min(100vw,78svh)}.stage-line{font-size:clamp(25px,6vw,40px)}.stage-line--l{top:17%;left:8vw}.stage-line--r{bottom:14%;right:8vw}.callout--sense,.callout--slot,.callout--mic{top:77%;left:50%;right:auto}.callout--mic{flex-direction:column}.callout--mic i::after{bottom:100%;top:auto}.callout b{font-size:14px}.callout span{font-size:12px}
 .stage-title{top:13%;font-size:clamp(27px,6.5vw,38px);line-height:1.08}.stage-eyebrow{top:9%;font-size:8px;letter-spacing:.08em}.features{left:calc(50% - 160px);right:auto;top:73%;bottom:auto;width:320px;transform:translateY(-50%)}.features li{padding:5px 0;gap:10px}.f-ico{width:29px;height:29px}.f-txt b{font-size:14px}.f-txt em{display:block;font-size:10px;max-width:270px}.features li.on .f-txt em{max-height:3em}.appcard{display:none}
 .family-pet{width:30vw;bottom:22%;}.family-pet span{font-size:8px;bottom:-8%}.stage-title--pet{top:14%;font-size:29px}.stage-sub{bottom:8%;font-size:12px}
 .inside-heading{top:13%;left:24px;right:24px;text-align:center;max-width:none}.inside-heading h2{font-size:34px}.inside-visual{width:min(83vw,53svh);top:48%}.inside-caption{left:28px;right:28px;bottom:10%;width:auto;max-width:none;text-align:center}.inside-caption h3{font-size:21px;margin:10px 0}.inside-caption p{font-size:12px;max-width:330px;margin:auto;min-height:39px}.inside-progress{width:120px;margin:15px auto 0}.inside-note{bottom:3%;font-size:8px}.inside-index{font-size:9px}
 .band-story{padding:75px 0 38px}.band-heading .eyebrow{font-size:9px}.band-heading>p:last-child{font-size:12px}.band-display{margin:10px -24px 0}.band-preview{width:100%;height:76vw;max-height:490px}.band-ghost-word{font-size:16vw;top:33%}.band-palette{gap:8px;margin-top:-15px;padding:0 14px}.combo{min-width:55px;padding:8px 0}.combo i{width:42px;height:29px;border-radius:9px}.combo span{font-size:8px}.band-selection{gap:24px;margin-top:20px}.band-selection p,.band-selection a{font-size:11px}.band-details{gap:18px;margin-top:40px;padding-top:20px;font-size:10px;line-height:1.6}.band-details span{flex:1}.band-details b{display:block;font-size:9px;margin:0 0 4px}
 .app-layout{grid-template-columns:1fr;gap:28px;text-align:center}.app-copy h2{font-size:40px}.app-copy>p:not(.eyebrow){font-size:13px;margin:20px auto;max-width:310px}.app-phone .phone{width:250px}.app-phone{padding-bottom:15px}.app-copy .text-link{font-size:12px}
 .card--vet{min-height:510px}.vet-ui{margin:18px 16px 0;padding:18px}.vet-head{margin-bottom:20px}.vet-pet small{font-size:8px}.vet-chart small{font-size:7px}.vet-rows b{font-size:10px}.vet-btn{font-size:9px}.card-copy h3{font-size:23px}.card-copy p{font-size:13px}
 .buy-preview{position:relative;top:auto}.buy-grid{gap:36px}.preview-stage{margin:-15px -12px 0;aspect-ratio:1.1}.buy .sec-title{margin-bottom:10px}.buy-form .opt-group{margin-bottom:24px}.swatches{justify-content:space-between;gap:10px}.preview-caption{font-size:10px}.preview-hint{font-size:9px}.modal-card{max-height:86svh;overflow-y:auto;padding:25px 22px}.modal-close{top:10px;right:10px;width:38px;height:38px}
}
@media(max-width:900px) and (max-height:710px){.hero-intro{top:14%}.hero-intro .eyebrow{margin-bottom:12px}.hero-intro h1{font-size:42px}.hero-description{font-size:12px;margin:15px 0 17px}.stage-title{font-size:26px}.features{top:73%}.features li{padding:3px 0}.f-ico{width:25px;height:25px}.f-txt b{font-size:12px}.f-txt em{font-size:9px}.inside-heading h2{font-size:27px}.inside-caption h3{font-size:18px}}
@media(min-width:650px) and (max-width:900px){.hero-intro{top:13%}.hero-description{font-size:16px}.features{left:54%;top:58%;width:40%}.appcard{display:none}.family-pet{width:24vw;bottom:14%}.stage-title--pet{top:14%}.stage-sub{bottom:5%}}
@media(prefers-reduced-motion:reduce){.reveal-ready{will-change:auto}.features li,.product-preview canvas,.combo i,.band-story{transition:none}.hero-footer i{animation:none}.ticker-track{width:auto;overflow-x:auto}.ticker{mask:none;-webkit-mask:none}.turn,.family-pet{will-change:auto}}
.family-pet{transform-origin:50% 100%}
.features li{opacity:.48}.features li.on{opacity:1}
.press-section{background:#f7f7ef;text-align:center;padding:70px 0 65px;overflow:hidden}
.press-section h2{font-family:var(--sans);font-size:23px;font-weight:400;letter-spacing:-.03em}
.press-disclosure{font-size:10px;color:#8b9083;margin-top:12px;padding:0 24px}
.press-marquee{margin-top:40px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.press-track{display:flex;width:max-content;animation:press-drift 35s linear infinite;animation-play-state:paused}.press-marquee.is-visible .press-track{animation-play-state:running}.press-marquee:hover .press-track,.press-marquee:focus-within .press-track{animation-play-state:paused}
.press-set{display:flex;align-items:center;gap:100px;padding:10px 50px}.press-logo{flex:none;color:#30372e;opacity:.66;transition:opacity .3s;min-width:190px;white-space:nowrap;display:flex;justify-content:center;align-items:center;height:50px}.press-logo:hover{opacity:1}.press-wired span{font-family:Georgia,serif;font-size:29px;font-weight:bold;padding:0 3px;line-height:1.1}.press-wired span:nth-child(odd){background:currentColor}.press-wired span:nth-child(odd){background:#30372e;color:#f7f7ef}.press-techcrunch{font-size:27px;font-weight:700;letter-spacing:-1.8px}.press-designmilk{font-size:30px;font-weight:600;letter-spacing:-1.4px}.press-moderncat{font-family:Georgia,serif;font-size:31px;letter-spacing:-1.3px}.press-moderncat span{font-style:italic}
@keyframes press-drift{to{transform:translateX(-50%)}}
@media(max-width:900px){.family-pet{bottom:30%}.stage-sub{bottom:17%}.press-section{padding:48px 0}.press-section h2{font-size:21px}.press-disclosure{font-size:9px;max-width:340px;margin:12px auto 0}.press-set{gap:55px;padding:8px 28px}.press-logo{min-width:155px;transform:scale(.85)}.press-marquee{margin-top:24px}}
@media(prefers-reduced-motion:reduce){.press-track{animation:none;width:auto}.press-set{flex-wrap:wrap;justify-content:center;gap:25px;padding:12px 24px}.press-logo{min-width:130px}.press-marquee{mask:none;-webkit-mask:none}}
.launch-offer{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid #dce0d2}.availability{font-size:10px;letter-spacing:.04em;display:flex;align-items:center;gap:7px;color:#92947c}.availability i{width:5px;height:5px;border-radius:50%;background:#aca680}.launch-offer h3{font-size:36px;font-weight:500;line-height:1.05;margin:18px 0 14px}.launch-offer>p{font-size:12px;line-height:1.7;color:#8b9281}.launch-offer strong{font-weight:500;color:#536247}.offer-pill{display:inline-block;margin-top:16px;font-size:9px;letter-spacing:.03em;background:#e6ebdc;color:#72825f;border-radius:20px;padding:7px 12px}.waitlist-intro{font-size:13px;line-height:1.6;color:#818775;margin:14px 0}.modal-card .waitlist-consent{display:flex;align-items:flex-start;gap:10px;font-size:11px;color:#828976;line-height:1.6;margin-top:17px}.modal-card .waitlist-consent input{width:16px;height:16px;margin:2px 0 0;flex:none;accent-color:#66775d}.honeypot{position:absolute!important;left:-10000px;opacity:0;pointer-events:none}.form-error{font-size:12px;color:#8d3e36;background:#f4e7e2;border-radius:9px;padding:10px 12px;margin-top:14px}.btn:disabled{opacity:.6;cursor:wait}.order-done[hidden]{display:none}
@media(max-width:900px){.launch-offer h3{font-size:32px}.launch-offer{padding-bottom:23px;margin-bottom:24px}.buy-form .opt-group{margin-bottom:22px}.launch-offer>p{font-size:12px}}
.sum-pricing{display:grid;justify-items:end;flex:none;gap:0}.sum-pricing s{font-size:12px;color:#a0a590;font-weight:400}.sum-pricing strong{color:#5b6f49}.launch-price-note{font-size:9px;display:block;color:#9da48f;margin-top:5px}
@media(max-width:900px){.buy-grid{display:block}.buy-preview{position:sticky;top:55px;z-index:12;background:var(--ivory);padding-bottom:12px;margin-bottom:30px;box-shadow:0 12px 15px -12px #23262612}.preview-stage{height:min(35svh,320px);aspect-ratio:auto;margin:0 -24px}.preview-caption{margin-top:0}.preview-hint{bottom:4%}.view-reset{bottom:2%;right:7%}.buy-form{position:relative;z-index:1}}

@media(max-width:900px){.stage-eyebrow{top:max(78px,9%)}.stage-title:not(.stage-title--pet){top:max(100px,13%)}}
@media(prefers-reduced-motion:reduce){.stage-wrap{height:650svh}.inside-story{height:150svh}}
@media(max-width:649px){.features{left:7vw;width:86vw}}
/* Keep directional reveals from extending the page's horizontal scroll area. */
.bento,.buy{overflow-x:clip}
html,body{overflow-x:clip}

/* Approved Vizsla portrait: copy above, collar anchored to the shared 3D stage. */
.stage-bg{background:radial-gradient(ellipse at 50% 50%,#f7f3ed 0%,#f4f0e8 65%,#eee8df 100%)}
.hero-intro{top:max(95px,11svh);left:24px;right:24px;width:auto;text-align:center;transform:none;will-change:transform,opacity}
.hero-intro .eyebrow{font-size:10px;margin-bottom:17px;letter-spacing:.18em}
.hero-intro h1{font-size:clamp(48px,4.5vw,66px);line-height:1.02;letter-spacing:-.065em}
.hero-description{font-size:14px;line-height:1.6;margin:17px 0 22px}
.hero-actions{justify-content:center;gap:26px}.hero-actions .btn{padding:15px 23px;font-size:13px}
.hero-dog{position:absolute;z-index:1;left:50%;bottom:-7svh;width:min(116svh,1320px);aspect-ratio:3/2;transform:translateX(-50%);pointer-events:none;will-change:transform,opacity;isolation:isolate;mask-image:radial-gradient(ellipse 50% 74% at 50% 66%,#000 58%,transparent 100%)}
.hero-dog img,.hero-dog video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.hero-dog video{opacity:0;transition:opacity .32s linear}
.hero-footer{bottom:28px;left:5vw;right:5vw;align-items:end;pointer-events:none}
.hero-footer .scroll-hint{position:absolute;left:0;bottom:0}
.hero-footer>span:first-child{display:none}
.hero-motion{margin-left:auto;display:flex;align-items:center;gap:13px;pointer-events:auto}
.gaze-hint{font-size:10px}.motion-toggle{width:36px;height:36px;border:1px solid #8b8e8055;border-radius:50%;background:#f4f0e899;color:#6e7565;font-size:12px;backdrop-filter:blur(8px)}
.motion-toggle[hidden]{display:none}
@media(max-height:760px) and (min-width:901px){.hero-intro{top:89px}.hero-intro h1{font-size:52px}.hero-intro .eyebrow{margin-bottom:12px}.hero-description{font-size:13px;margin:14px 0 18px}.hero-dog{width:116svh;bottom:-10svh}}
@media(max-width:900px){
 .hero-intro{top:max(98px,12svh);left:18px;right:18px}.hero-intro h1{font-size:clamp(43px,8vw,60px)}.hero-intro .eyebrow{font-size:9px;margin-bottom:16px}.hero-description{font-size:13px;margin:17px 0 22px}.hero-actions{gap:23px}.hero-actions .btn{padding:14px 18px;font-size:12px}.hero-actions .text-link{font-size:12px}
 .hero-dog{width:min(210vw,100svh);bottom:-20px}.hero-footer{bottom:22px;left:22px;right:22px}.gaze-hint{display:none}.hero-footer .scroll-hint{font-size:8px;gap:8px}.motion-toggle{width:36px;height:36px}
}
@media(min-width:650px) and (max-width:900px){.hero-dog{width:110svh;bottom:-6svh}}
@media(max-width:900px) and (max-height:710px){.hero-intro{top:87px}.hero-intro h1{font-size:40px}.hero-intro .eyebrow{font-size:8px;margin-bottom:11px}.hero-description{font-size:12px;margin:13px 0 16px}.hero-actions .btn{padding:12px 17px}.hero-dog{width:99svh;bottom:-30px}}
@media(hover:none){.gaze-hint{display:none}}
@media(prefers-reduced-motion:reduce){.hero-dog{will-change:auto}.hero-dog video{display:none}.gaze-hint,.motion-toggle{display:none}}
@media(max-height:520px) and (orientation:landscape){
 .hero-intro{top:66px;left:16px;right:16px}.hero-intro .eyebrow{display:none}.hero-intro h1{font-size:32px;line-height:1.05}.hero-intro h1 br{display:none}.hero-intro h1 span::before{content:' '}.hero-description{font-size:10px;line-height:1.5;margin:9px 0 12px}.hero-description br{display:none}.hero-actions .btn{padding:10px 15px;font-size:11px}.hero-actions .text-link{font-size:10px}.hero-dog{width:100svh;bottom:-25px}.hero-footer{bottom:14px}.gaze-hint{display:none}
}

/* First-visit newsletter: existing product palette and typography. */
.newsletter-card{position:relative;padding:0;width:min(100%,520px);max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain}
.newsletter-image{display:block;width:100%;height:clamp(125px,24vh,210px);object-fit:cover}
.newsletter-content{padding:26px 32px 30px}
.newsletter-card .modal-close{position:absolute;top:12px;right:12px;z-index:2;background:var(--cream);color:var(--ink);border:1px solid var(--hair)}
.newsletter-content h3{font-size:clamp(26px,3vw,36px);line-height:1.08;text-wrap:balance;margin-top:10px}
.newsletter-content .btn-xl{width:100%;margin-top:12px}
.newsletter-content .order-note{font-size:11px;line-height:1.5;margin-top:12px;text-wrap:pretty}
.newsletter-reopen{margin:22px 0;color:inherit}
#newsletter-done[hidden]{display:none}
@media(max-width:600px){#newsletter-modal{padding:16px}.newsletter-card{max-height:calc(100dvh - 32px)}.newsletter-content{padding:20px 22px 24px}.newsletter-card .waitlist-intro{margin:12px 0}.newsletter-image{height:150px}}
@media(prefers-reduced-motion:reduce){#newsletter-modal,#newsletter-modal .modal-card{transition:none}}

/* Non-modal newsletter: only the corner card receives pointer events. */
#newsletter-modal{position:fixed;inset:auto 24px 24px auto;z-index:150;width:min(380px,calc(100vw - 48px));padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:0;transform:translateY(18px);transition:opacity .25s var(--ease),transform .35s var(--ease-out)}
#newsletter-modal[hidden]{display:none}
#newsletter-modal.open{opacity:1;transform:none}
#newsletter-modal .newsletter-card{width:100%;max-height:calc(100dvh - 110px);border-radius:22px;transform:none;box-shadow:0 12px 50px -12px #23262640;border:1px solid var(--hair)}
#newsletter-modal .newsletter-image{height:110px}
#newsletter-modal .newsletter-content{padding:18px 22px 20px}
#newsletter-modal h3{font-size:26px;margin-top:8px}
#newsletter-modal .waitlist-intro{font-size:12px;margin:10px 0}
#newsletter-modal .modal-close{width:32px;height:32px;top:9px;right:9px}
#newsletter-modal .btn-xl{min-height:44px;padding:12px 16px;font-size:13px}
#newsletter-modal .order-note{font-size:10px;margin-top:10px}
#newsletter-modal .waitlist-consent{margin-top:12px}
@media(max-width:600px){#newsletter-modal{right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:min(360px,calc(100vw - 24px))}#newsletter-modal .newsletter-card{max-height:70dvh}#newsletter-modal .newsletter-image{height:90px}#newsletter-modal .newsletter-content{padding:16px 18px 18px}#newsletter-modal h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){#newsletter-modal{transition:none}}