/* ═══════════════════════════════════════════════════════════════════
   yovolo.com — shared stylesheet
   Tokens: design/tokens.css v2.2 (inlined). Components extracted from
   design/yovolo-website-home.html v2.5 (the approved design file).
   One file for the whole site — cache it once, every page rides free.
   ═══════════════════════════════════════════════════════════════════ */

/* ─ fonts (self-hosted; Yovolo Display is never fetched from Google) ─ */
@font-face{font-family:"Yovolo Display";src:url(/assets/fonts/yovolo-display-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Yovolo Display";src:url(/assets/fonts/yovolo-display-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(/assets/fonts/nunito-sans-latin.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito Sans";src:url(/assets/fonts/nunito-sans-latin-ext.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ─ tokens ─ */
:root{
  --yv-ribbon-600:#E5405D;--yv-ribbon-900:#6C0330;--yv-ribbon-500:#FF5A6E;--yv-ribbon-100:#FFE4E9;--yv-ribbon-50:#FFF3F5;
  --yv-ink-900:#26211F;--yv-ink-600:#6E6560;--yv-ink-400:#A79D97;
  --yv-canvas:#FFFFFF;--yv-warm-50:#FAF6F2;--yv-hairline:#EFE9E4;--yv-vignette:#FDF3F5;
  --yv-joy-700:#0A7C3A;--yv-joy-100:#E6FBEF;--yv-quiet-600:#8A817C;--yv-quiet-100:#F1EDEA;
  --yv-shadow-card:0 1px 2px rgba(38,33,31,.05),0 6px 20px rgba(38,33,31,.07);
  --yv-shadow-btn:0 4px 14px rgba(255,90,110,.32);
  --yv-r-card:24px;--yv-r-tile:18px;--yv-r-input:16px;--yv-r-pill:999px;
  --yv-font:"Nunito Sans",-apple-system,"SF Pro Rounded",sans-serif;
  --yv-font-display:"Yovolo Display","Fredoka",-apple-system,"SF Pro Rounded",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* clip, not hidden: kills the carousel's phantom horizontal scroll area
   without creating a scroll container (position:sticky keeps working) */
html,body{overflow-x:clip}
body{font-family:var(--yv-font);font-weight:600;font-size:16px;line-height:1.6;color:var(--yv-ink-900);background:var(--yv-canvas)}
/* height:auto beats the width/height ATTRIBUTES (CLS hints) so CSS sizing
   and aspect-ratio stay in charge — without it the attribute height wins
   and photos stretch tall */
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--yv-font-display);font-weight:600;letter-spacing:-.2px;line-height:1.12}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--yv-ribbon-600);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--yv-ink-900);padding:10px 18px;border-radius:0 0 12px 0;z-index:100;font-family:var(--yv-font-display);text-decoration:none}
.skip-link:focus{left:0}
.yv-btn{border:none;border-radius:var(--yv-r-pill);font-family:var(--yv-font-display);font-weight:600;font-size:16px;padding:14px 26px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center;transition:transform .12s,box-shadow .18s,background .15s,border-color .15s,color .15s;text-decoration:none}
.yv-btn:active{transform:scale(.96)}
.yv-btn--primary{background:var(--yv-ribbon-500);color:#fff;box-shadow:var(--yv-shadow-btn)}
.yv-btn--primary:hover{background:var(--yv-ribbon-600);box-shadow:0 7px 22px rgba(255,90,110,.44);transform:translateY(-1px)}
.yv-btn--ghost{background:#fff;border:1.5px solid var(--yv-hairline);color:var(--yv-ink-900)}
.yv-btn--ghost:hover{border-color:var(--yv-ribbon-100);background:var(--yv-ribbon-50);color:var(--yv-ribbon-600);transform:translateY(-1px)}
.yv-btn--dark{background:var(--yv-ink-900);color:#fff}
.yv-btn--dark:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(38,33,31,.28)}
.micro{font-size:13.5px;color:var(--yv-ink-400);font-weight:700}
/* wordmark: the brand name is ALWAYS uppercase, Yovolo Display 600, ribbon-600.
   text-transform (not literal caps) keeps the accessible name, copy-paste and
   schema text as "Yovolo". On ribbon or wine surfaces it inherits the surface
   foreground instead: caps + display font stay, colour yields. */
.yv-brand{font-family:var(--yv-font-display);font-weight:600;text-transform:uppercase;color:var(--yv-ribbon-600);letter-spacing:.012em;font-size:.957em}
summary .yv-brand,.yv-btn .yv-brand,h1 .yv-brand,h2 .yv-brand,h3 .yv-brand{font-size:1em}
.yv-btn .yv-brand,.finale .yv-brand{color:inherit}
.seclabel{font-family:var(--yv-font-display);font-weight:500;font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--yv-ribbon-600)}

/* ─ nav ─ */
nav.site{position:sticky;top:0;background:rgba(255,255,255,.72);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid rgba(239,233,228,.55);z-index:50}
.nav-in{display:flex;align-items:center;gap:26px;height:64px}
.lockup{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--yv-ink-900)}
.lockup svg{width:34px;height:28px;color:var(--yv-ribbon-500)}
.lockup span{font-family:var(--yv-font-display);font-weight:600;font-size:21px;letter-spacing:.2px;text-transform:uppercase;color:var(--yv-ribbon-600)}
.nav-links{display:flex;gap:22px;font-family:var(--yv-font-display);font-weight:500;font-size:15px}
.nav-links a{color:var(--yv-ink-600);text-decoration:none}
.nav-links a:hover{color:var(--yv-ink-900)}
.nav-sp{flex:1}
.signin{color:var(--yv-ink-400);text-decoration:none;font-family:var(--yv-font-display);font-weight:500;font-size:15px}
.nav-cta{font-size:15px;padding:10px 20px}
/* mobile burger — <details>, no JS required */
.burger{display:none;position:relative}
.burger>summary{list-style:none;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--yv-hairline);background:#fff}
.burger>summary::-webkit-details-marker{display:none}
.burger>summary svg{width:18px;height:14px;color:var(--yv-ink-900)}
.burger-panel{position:absolute;right:0;top:48px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--yv-hairline);border-radius:var(--yv-r-tile);box-shadow:var(--yv-shadow-card);padding:10px;min-width:210px;display:flex;flex-direction:column}
.burger-panel a{font-family:var(--yv-font-display);font-weight:500;font-size:16px;color:var(--yv-ink-900);text-decoration:none;padding:10px 14px;border-radius:12px}
.burger-panel a:hover{background:var(--yv-ribbon-50);color:var(--yv-ribbon-600)}
@media(max-width:820px){.nav-links,.signin{display:none}.burger{display:block}.nav-in{gap:12px}.nav-cta{font-size:14px;padding:9px 16px}}

/* ─ hero band (shared by home and occasion pages) ─ */
.hero{--hero-arc:112px;position:relative;margin-top:-64px;padding-bottom:34px}
.hero-band{position:relative;overflow:hidden;padding-top:64px;border-radius:0 0 50% 50% / 0 0 var(--hero-arc) var(--hero-arc);background:radial-gradient(118% 88% at 86% 4%,rgba(255,170,118,.46) 0%,rgba(255,170,118,0) 60%),radial-gradient(86% 72% at 6% 98%,rgba(255,90,110,.20) 0%,rgba(255,90,110,0) 66%),radial-gradient(78% 66% at 44% 106%,rgba(255,208,132,.36) 0%,rgba(255,208,132,0) 72%),linear-gradient(168deg,#FFEBEF 0%,#FFDBE3 54%,#FFE7DA 100%)}
.star{position:absolute;color:var(--yv-ribbon-500)}
@media(max-width:900px){.hero-band .star{display:none}}
.hero-in{display:grid;grid-template-columns:1fr 1.025fr;gap:32px;align-items:center;padding:46px 22px 96px;position:relative}
.hero-photo{align-self:end;max-width:min(calc(min(86vh,700px) * .8937),584px);margin-bottom:-128px;margin-left:calc(-1 * clamp(0px,max(22px,(100vw - 1080px)/2 + 22px) - 34px,110px));position:relative}
.hero-photo img{display:block;width:100%;height:auto;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 20px 34px rgba(108,3,48,.16))}
.hero-copy h1{font-size:clamp(34px,4.6vw,54px);max-width:11em}
.hero-sub{margin-top:18px;font-size:17.5px;color:var(--yv-ink-600);max-width:32em}
.doors{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.door .micro{display:block;margin-bottom:7px;letter-spacing:1.1px;font-family:var(--yv-font-display);font-weight:500;font-size:12px;text-transform:uppercase}
.trustline{margin-top:18px;font-size:13.5px;color:var(--yv-ink-400);font-weight:700}
.qr-card{display:none;margin-top:26px;background:#fff;border:1px solid var(--yv-hairline);border-radius:var(--yv-r-tile);padding:12px 16px;align-items:center;gap:14px;max-width:330px}
.qr-card svg{width:96px;height:96px;flex:none}
.qr-card .t{font-size:13.5px;color:var(--yv-ink-600)}
.qr-card .t b{font-family:var(--yv-font-display);font-weight:600;color:var(--yv-ink-900);display:block;font-size:14.5px}
@media(min-width:900px) and (pointer:fine){.qr-card{display:flex}}
@media(max-width:900px){.hero{--hero-arc:56px;padding-bottom:26px}.hero-in{grid-template-columns:1fr;gap:24px;padding:38px 22px 76px}.hero-copy{order:1}.hero-photo{order:2;margin-bottom:-104px;margin-left:0;max-width:min(470px,calc(min(58vh,530px) * .8937));width:100%;justify-self:center}}

/* occasion-page hero variant: copy left, art card right, shallower band */
.hero--page{--hero-arc:72px;padding-bottom:12px}
.hero--page .hero-in{grid-template-columns:1.15fr .85fr;padding:52px 22px 84px;align-items:center}
.hero-art{position:relative;justify-self:end;width:min(100%,380px)}
.hero-art img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--yv-r-card);box-shadow:0 14px 34px rgba(108,3,48,.18)}
.hero-art .art-note{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:var(--yv-r-pill);padding:6px 13px;font-family:var(--yv-font-display);font-weight:500;font-size:12.5px;color:var(--yv-ink-600)}
/* wide 3:2 art (the W01–W06 set): art column grows, card flattens */
.hero-in--wide{grid-template-columns:1fr 1.1fr}
.hero-art--wide{width:100%;max-width:640px}
.hero-art--wide img{aspect-ratio:3/2}
@media(max-width:900px){.hero--page{--hero-arc:44px}.hero--page .hero-in,.hero--page .hero-in.hero-in--wide{grid-template-columns:1fr}.hero-art{justify-self:start;width:min(78%,320px)}.hero-art--wide{width:100%;max-width:470px}}

/* ─ honesty strip ─ */
.strip{border-top:1px solid var(--yv-hairline);border-bottom:1px solid var(--yv-hairline);background:var(--yv-canvas)}
.strip-in{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;padding:22px}
.strip b{font-family:var(--yv-font-display);font-weight:600;font-size:15.5px;display:block}
.strip span{font-size:13.5px;color:var(--yv-ink-600)}
@media(max-width:820px){.strip-in{grid-template-columns:1fr;gap:12px;text-align:left}}

/* ─ sections ─ */
section{padding:72px 0}
section.warm{background:var(--yv-warm-50)}
.sec-h{font-size:clamp(26px,3.2vw,36px);max-width:18em}
.bit{margin-top:14px;font-size:17px;color:var(--yv-ink-600);max-width:38em}
.steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:36px}
.step{background:#fff;border-radius:var(--yv-r-card);box-shadow:var(--yv-shadow-card);border:1px solid rgba(239,233,228,.6);padding:24px}
.step .n{font-family:var(--yv-font-display);font-weight:600;color:var(--yv-ribbon-500);font-size:15px}
.step h3{font-size:19px;margin:6px 0 8px}
.step p{font-size:14.5px;color:var(--yv-ink-600)}
.frame{background:var(--yv-ink-900);border-radius:30px;padding:9px;box-shadow:var(--yv-shadow-card);width:158px;margin:18px auto 0}
.frame .scr{background:var(--yv-warm-50);border-radius:22px;aspect-ratio:390/800;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:10.5px;color:var(--yv-ink-400);font-weight:700;padding:10px;gap:4px;border:1.5px dashed var(--yv-hairline)}
.frame .scr i{font-style:normal;font-size:9.5px;font-weight:600}
.img-slot{background:linear-gradient(160deg,var(--yv-ribbon-50),var(--yv-warm-50));border:1.5px dashed var(--yv-ribbon-100);border-radius:var(--yv-r-card);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--yv-ink-400);font-size:12.5px;font-weight:800;text-align:center;gap:5px;padding:16px}
.img-slot i{font-style:normal;font-size:11px;font-weight:600;color:var(--yv-ink-400)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* feature blocks (occasion pages): text beside a card */
.feature{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;margin-top:8px}
.feature.flip{grid-template-columns:.9fr 1.1fr}
.feature.flip>div:first-child{order:2}
@media(max-width:900px){.feature,.feature.flip{grid-template-columns:1fr}.feature.flip>div:first-child{order:0}}

/* giver door / demo cards */
.giver{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.giver-card{background:#fff;border-radius:var(--yv-r-card);box-shadow:var(--yv-shadow-card);border:1px solid rgba(239,233,228,.6);padding:22px}
.gc-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--yv-warm-50);font-size:14px}
.gc-row:last-child{border-bottom:none}
.gc-title{font-family:var(--yv-font-display);font-weight:600;font-size:16px;margin-bottom:6px}
.pill{font-family:var(--yv-font-display);font-weight:500;font-size:12px;padding:5px 11px;border-radius:var(--yv-r-pill)}
.pill--joy{background:var(--yv-joy-100);color:var(--yv-joy-700)}
.pill--quiet{background:var(--yv-quiet-100);color:var(--yv-quiet-600)}
.pill--brand{background:var(--yv-ribbon-100);color:var(--yv-ribbon-600)}
.straightbox{margin-top:20px;background:#fff;border:1px solid var(--yv-hairline);border-radius:var(--yv-r-tile);padding:16px 18px;font-size:14.5px;color:var(--yv-ink-600)}
.straightbox b{color:var(--yv-ink-900)}
@media(max-width:900px){.giver{grid-template-columns:1fr}}

/* wish-card vignette (pure HTML product moment for occasion pages) */
.wish-card{background:#fff;border-radius:var(--yv-r-tile);box-shadow:var(--yv-shadow-card);border:1px solid rgba(239,233,228,.6);padding:14px;display:flex;gap:13px;align-items:center;max-width:400px}
.wish-thumb{width:64px;height:64px;border-radius:14px;background:linear-gradient(160deg,var(--yv-ribbon-100),var(--yv-warm-50));display:flex;align-items:center;justify-content:center;color:var(--yv-ribbon-500);flex:none}
.wish-thumb svg{width:30px;height:30px}
.wish-meta b{font-family:var(--yv-font-display);font-weight:600;font-size:15px;display:block}
.wish-meta span{font-size:13px;color:var(--yv-ink-600)}
.wish-price{margin-left:auto;font-family:var(--yv-font-display);font-weight:600;font-size:15px;flex:none}

/* blender */
.blender-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:18px;margin-top:32px;align-items:stretch}
.twin-stack{display:grid;gap:18px}
.twin-stack .step h3{font-size:17px}
@media(max-width:820px){.blender-grid{grid-template-columns:1fr}}

/* legends carousel */
.legends{background:var(--yv-warm-50)}
.rail-wrap{position:relative;margin-top:32px}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.legend-card{flex:none;width:310px;scroll-snap-align:start;background:#fff;border-radius:var(--yv-r-card);box-shadow:var(--yv-shadow-card);border:1px solid rgba(239,233,228,.6);padding:22px;display:flex;flex-direction:column;gap:14px;min-height:200px}
.legend-card q{font-family:var(--yv-font-display);font-weight:500;font-size:16.5px;line-height:1.35;quotes:"\201C" "\201D"}
.legend-card.final{background:var(--yv-ribbon-50);border-color:var(--yv-ribbon-100);justify-content:space-between}
.rhead{display:flex;align-items:center;gap:10px}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--yv-ribbon-100);color:var(--yv-ribbon-600);display:flex;align-items:center;justify-content:center;font-family:var(--yv-font-display);font-weight:600;font-size:16px;flex:none;border:1.5px dashed var(--yv-ribbon-500);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar img.zoom{transform:scale(1.48);transform-origin:50% 7%}
.avatar:has(img){border:1px solid var(--yv-hairline);background:none}
.rhead .nm{font-family:var(--yv-font-display);font-weight:600;font-size:14.5px;line-height:1.15}
.rhead .yr{font-size:12px;color:var(--yv-ink-400);font-weight:700}
.stars{color:var(--yv-ribbon-500);font-size:12.5px;letter-spacing:2px;margin-left:auto;flex:none}
.agg-stars{--pct:98%;display:inline-block;position:relative;font-size:15px;line-height:1;letter-spacing:1px;vertical-align:-2px}
.agg-stars::before{content:"★★★★★";color:#e6ddd4}
.agg-stars::after{content:"★★★★★";color:var(--yv-ribbon-500);position:absolute;left:0;top:0;width:var(--pct);overflow:hidden;white-space:nowrap}
.agg{margin-top:14px;font-family:var(--yv-font-display);font-weight:500;font-size:14.5px;color:var(--yv-ink-600)}
.agg b{font-weight:600;color:var(--yv-ink-900)}
.rail-btn{position:absolute;top:42%;width:40px;height:40px;border-radius:50%;border:1px solid var(--yv-hairline);background:#fff;box-shadow:var(--yv-shadow-card);cursor:pointer;font-size:19px;color:var(--yv-ribbon-600);display:none;align-items:center;justify-content:center}
@media(min-width:900px){.rail-btn{display:flex}}
.rail-btn.prev{left:-16px}.rail-btn.next{right:-16px}
.confession{margin-top:14px;font-size:14.5px;color:var(--yv-ink-600);max-width:44em}

/* occasions — tall editorial tiles (Roberto, 25 Jul: keep the long crop),
   label sits on the photo in a frosted low-alpha pill */
.occ-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:28px}
.occ-tile{position:relative;border-radius:var(--yv-r-tile);overflow:hidden;text-decoration:none;background:#fff;border:1px solid var(--yv-hairline);transition:transform .15s,box-shadow .18s}
.occ-tile:hover{transform:translateY(-3px);box-shadow:var(--yv-shadow-card)}
.occ-tile img{display:block;width:100%;height:420px;object-fit:cover}
.occ-tile b{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);background:rgba(255,255,255,.72);backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);border-radius:var(--yv-r-pill);padding:8px 15px;font-family:var(--yv-font-display);font-weight:600;font-size:16px;line-height:1.2;color:var(--yv-ink-900)}
@media(max-width:900px){.occ-tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.occ-tiles{grid-template-columns:repeat(2,1fr)}.occ-tile img{height:380px}}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.chip{font-family:var(--yv-font-display);font-weight:500;font-size:14.5px;padding:10px 18px;border-radius:var(--yv-r-pill);background:#fff;border:1px solid var(--yv-hairline);color:var(--yv-ink-600);text-decoration:none;transition:border-color .15s,background .15s,color .15s}
.chip:hover{border-color:var(--yv-ribbon-100);background:var(--yv-ribbon-50);color:var(--yv-ribbon-600)}
.finale .chip{background:transparent;border-color:rgba(255,243,245,.28);color:var(--yv-ribbon-50)}
.finale .chip:hover{background:rgba(255,243,245,.12);border-color:rgba(255,243,245,.5);color:#fff}

/* devices */
.devices{display:flex;gap:34px;align-items:flex-end;margin-top:32px;flex-wrap:wrap}
.laptop{flex:1;min-width:300px;max-width:520px}
.lap-top{background:var(--yv-ink-900);border-radius:14px 14px 0 0;padding:10px 10px 0}
.lap-scr{background:var(--yv-warm-50);border-radius:8px 8px 0 0;aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--yv-ink-400);font-weight:800;gap:4px;border:1.5px dashed var(--yv-hairline);border-bottom:none}
.lap-scr i{font-style:normal;font-size:10px;font-weight:600}
.lap-base{height:13px;background:var(--yv-ink-900);border-radius:0 0 16px 16px;margin:0 -16px}

/* faq */
.faq-cols{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:0 56px;margin-top:34px;align-items:start}
.faq-col{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
.faq-col h3{font-family:var(--yv-font-display);font-weight:600;font-size:clamp(19px,2.1vw,23px);line-height:1.2;letter-spacing:-.01em;align-self:end}
.faq-sub{font-size:13.5px;color:var(--yv-ink-400);margin-top:7px;align-self:start}
.faq-list{margin-top:14px}
details.faq-q{border-top:1px solid var(--yv-hairline);padding:15px 0}
.faq-list details.faq-q:last-child{border-bottom:1px solid var(--yv-hairline)}
details.faq-q summary{font-family:var(--yv-font-display);font-weight:600;font-size:16.5px;line-height:1.34;cursor:pointer;list-style:none;display:block;position:relative;padding-right:30px}
details.faq-q summary::-webkit-details-marker{display:none}
details.faq-q summary::after{content:"+";color:var(--yv-ribbon-500);font-size:20px;line-height:1.1;position:absolute;right:0;top:0}
details.faq-q[open] summary::after{content:"–"}
details.faq-q p{margin-top:10px;font-size:14.5px;color:var(--yv-ink-600);max-width:62ch}
@media(max-width:900px){.faq-cols{grid-template-columns:1fr;grid-template-rows:none;gap:0;margin-top:26px}.faq-col{display:block}.faq-col+.faq-col{margin-top:40px}}

/* single-column mini-FAQ (occasion pages) */
.faq-mini{margin-top:28px;max-width:640px}

/* install page */
.install-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.install-card{background:#fff;border:1px solid var(--yv-hairline);border-radius:var(--yv-r-card);box-shadow:var(--yv-shadow-card);padding:24px}
.install-card h3{font-size:19px;display:flex;align-items:center;gap:9px}
.install-card h3 svg{width:20px;height:20px;color:var(--yv-ribbon-500);flex:none}
.install-card ol{margin:12px 0 0 18px;font-size:14.5px;color:var(--yv-ink-600)}
.install-card ol li{margin-top:6px}
.install-card p{margin-top:12px;font-size:14.5px;color:var(--yv-ink-600)}
.install-card.match{border-color:var(--yv-ribbon-100);background:var(--yv-ribbon-50)}
.install-card .tag{display:none;font-family:var(--yv-font-display);font-weight:500;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--yv-ribbon-600);margin-bottom:8px}
.install-card.match .tag{display:block}
@media(max-width:820px){.install-cards{grid-template-columns:1fr}}
.app-id{display:flex;align-items:center;gap:18px;margin-top:34px}
.app-icon{width:84px;height:84px;border-radius:22px;background:linear-gradient(150deg,var(--yv-ribbon-500),var(--yv-ribbon-600));display:flex;align-items:center;justify-content:center;box-shadow:var(--yv-shadow-btn);flex:none}
.app-icon svg{width:52px;height:44px;color:#fff}
.app-id h1{font-size:clamp(30px,4vw,44px)}
.app-id .one-liner{margin-top:6px;font-size:16.5px;color:var(--yv-ink-600)}

/* legal prose */
.prose{max-width:680px;padding:56px 0 72px}
.prose h1{font-size:clamp(30px,4vw,42px)}
.prose .updated{margin-top:10px;font-size:13.5px;color:var(--yv-ink-400);font-weight:700}
.prose h2{font-size:21px;margin-top:38px}
.prose p,.prose li{margin-top:12px;font-size:15px;color:var(--yv-ink-600)}
.prose ul{margin-left:20px}
.prose li{margin-top:8px}
.prose a{color:var(--yv-ribbon-600)}
.prose .straightbox{margin-top:24px}

/* finale */
.finale{background:var(--yv-ribbon-900);position:relative;overflow:hidden;padding:96px 0}
.finale .ember{position:absolute;color:var(--yv-ribbon-500)}
.finale h2{color:var(--yv-ribbon-50);font-size:clamp(30px,4vw,46px);max-width:14em;position:relative}
.finale .doors{position:relative}
.finale .yv-btn--ghost{background:transparent;border-color:rgba(255,243,245,.35);color:var(--yv-ribbon-50)}
.finale .door .micro{color:rgba(255,243,245,.55)}
.finale .xlinks{position:relative;margin-top:30px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.finale .xlinks .micro{color:rgba(255,243,245,.55);letter-spacing:1.1px;font-family:var(--yv-font-display);font-weight:500;font-size:12px;text-transform:uppercase;width:100%}

/* footer */
footer{background:var(--yv-canvas);border-top:1px solid var(--yv-hairline);padding:34px 0 44px}
.foot{display:flex;gap:26px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--yv-ink-600)}
.foot a{color:var(--yv-ink-600);text-decoration:none}
.foot a:hover{color:var(--yv-ink-900)}
.foot .sp{flex:1}
.foot-note{margin-top:14px;font-size:12.5px;color:var(--yv-ink-400);font-weight:700}

/* 404 */
.lost{min-height:52vh;display:flex;flex-direction:column;justify-content:center}

/* ─ motion discipline ─
   Blueprint §5.5b: reduced-motion renders the carousel as a plain list. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .rail{flex-wrap:wrap;overflow-x:visible;scroll-snap-type:none}
  .rail-btn{display:none !important}
}