/* Hero concept 8 (noindex). A copy of hero-v3/v3.css (hero 6/7) plus the hero 8 block at the end.
   Scoped under body.v2 and body.v3 so the live landing and hero 4/5 never pick any of this up. */
body.v2{--amber:#D99B2E;--teal2:#2A8C86;--terra:#C2694F;--sky:#dde5e4}
body.v2 h1,body.v2 h2,body.v2 h3{letter-spacing:normal}

/* Hero: fewer words, same mosaic. */
body.v2 .hero .lead{max-width:36ch;font-size:18px;line-height:1.6;color:var(--ink-muted)}
body.v2 .hero .actions{margin-bottom:0}

/* Rotating mosaic cells (hero 4). One slide per index; the first one is the original. */
body.v2 .v2-stack{display:grid;min-width:0}
body.v2 .v2-stack>*{grid-area:1/1;min-width:0}
body.v2 .v2-stack>[data-v2-slide]{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
body.v2 .v2-stack>[data-v2-slide].is-on{opacity:1;visibility:visible;transition:opacity .8s ease .6s,visibility 0s linear .6s}
body.v2 .painting img[data-v2-slide],body.v2 .train img[data-v2-slide]{opacity:0;visibility:hidden;z-index:0;transition:opacity 0s linear 1.3s,visibility 0s linear 1.3s}
body.v2 .painting img[data-v2-slide].is-on,body.v2 .train img[data-v2-slide].is-on{opacity:1;visibility:visible;z-index:1;transition:opacity 1.3s cubic-bezier(.4,0,.2,1),visibility 0s}
body.v2 .painting figcaption{z-index:2}
body.v2 .painting,body.v2 .train{isolation:isolate}
body.v2 .mosaic .round{z-index:3}
body.v2 .train{position:relative;overflow:hidden}
body.v2 .train img[data-v2-slide]:not(:first-child){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.v2 .memory .v2-stack,body.v2 .train-story blockquote .v2-stack{flex:1}
body.v2 .v2-quote{display:flex;flex-direction:column;justify-content:space-between;gap:16px;height:100%}
body.v2 .v2-quote p{margin:0}

/* Shared: section heads, logo mark, plane path. */
body.v2 section.v2-how h2{margin-bottom:12px}
body.v2 .v2-logo{position:relative;display:block;width:60px;height:57px}
body.v2 .v2-logo img{display:block;width:100%;height:100%}
body.v2 .v2-logo::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--green);opacity:0;pointer-events:none}
@keyframes v2-pulse{0%{transform:scale(1)}35%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes v2-halo{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}
body.v2 .is-pulse{animation:v2-pulse .7s cubic-bezier(.3,.7,.3,1)}
body.v2 .v2-logo.is-pulse::after{animation:v2-halo .9s ease-out}
body.v2 .v2-flight{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
body.v2 .v2-dash{fill:none;stroke:#7d8c85;stroke-width:1.4;stroke-dasharray:4 7;stroke-linecap:round}
body.v2 .v2-reveal{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round}
body.v2 .v2-plane{opacity:0}
body.v2 .v2-plane path:first-child{fill:var(--card);stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
body.v2 .v2-plane path+path{fill:none;stroke:var(--ink);stroke-width:1.1}

/* Circle markers echoing the logo: one circle, two circles, the full mark. */
body.v2 .v2-dots{position:relative;display:inline-flex;align-items:center;height:44px;background:var(--bg);border-radius:22px;isolation:isolate}
body.v2 .v2-dots i{display:block;width:44px;height:44px;border-radius:50%;mix-blend-mode:multiply;opacity:.78}
body.v2 .v2-dots i:nth-child(1){background:var(--amber)}
body.v2 .v2-dots i:nth-child(2){background:var(--teal2);margin-left:-18px}
body.v2 .v2-dots i:nth-child(3){background:var(--terra);margin-left:-18px}

/* Hero 4: how it works, the plane draws a heart on its way to the gift. */
body.v2 .v2-track{position:relative;padding-top:112px;margin-top:8px}
body.v2 .v2-steps{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
body.v2 .v2-steps li{min-width:0}
body.v2 .v2-mark{display:flex;align-items:center;height:60px;margin-bottom:20px}
body.v2 .v2-mark .v2-logo{background:var(--bg);border-radius:50%}
body.v2 section .v2-steps h3{margin-bottom:8px}
body.v2 section .v2-steps p{margin:0;max-width:30ch}
body.v2 .v2-steps .v2-gift-cta{display:inline-flex;margin:0 0 20px}

/* Hero 5: several planes gather into the gift. */
body.v2 .v2-gather{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);column-gap:64px;row-gap:8px;align-items:start}
body.v2 .v2-gather>h2{grid-column:1/-1}
body.v2 .v2-mini-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:30px}
body.v2 .v2-mini-steps li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center}
body.v2 .v2-mini-steps .v2-dots{height:26px;border-radius:13px}
body.v2 .v2-mini-steps .v2-dots i{width:26px;height:26px}
body.v2 .v2-mini-steps .v2-dots i+i{margin-left:-11px}
body.v2 section .v2-mini-steps p{margin:0;color:var(--ink);font-size:19px;line-height:1.45}
body.v2 .v2-sky{position:relative;aspect-ratio:12/5;min-height:280px}
body.v2 .v2-node{position:absolute;z-index:1;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
body.v2 .v2-node{transition:opacity .6s ease}
body.v2 .v2-sky.is-waiting .v2-node:not(.is-you){opacity:0}
body.v2.v2-5 .v2-dash{stroke:#9aa7a1;stroke-width:1.1}
body.v2 .v2-node.is-label-top{flex-direction:column-reverse}
body.v2 .v2-node .v2-dot{display:block;width:30px;height:30px;border-radius:50%;background:var(--c,var(--teal2));opacity:.85;box-shadow:0 0 0 5px var(--bg)}
body.v2 .v2-node.is-you .v2-dot{width:40px;height:40px;opacity:.85}
body.v2 section .v2-node span+span{font:500 13px/1.2 'Golos Text',sans-serif;color:var(--ink-muted);white-space:nowrap;margin:0}
body.v2 section .v2-node.is-you span+span{font-size:15px;font-weight:600;color:var(--ink)}
body.v2 .v2-gift{position:absolute;z-index:2;left:var(--x);top:var(--y);transform:translate(-50%,-30px);display:flex;flex-direction:column;align-items:center;gap:18px}
body.v2 .v2-gift .v2-logo{width:76px;height:72px;background:var(--bg);border-radius:50%;box-shadow:0 0 0 8px var(--bg)}
body.v2 .v2-gift .button{white-space:nowrap}

/* Replies flow into the page (moved down from hero 2). */
body.v2 .v2-feed-section{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
body.v2 .v2-shadow{margin:28px 0 20px;padding:20px 22px;background:var(--mint);max-width:52ch}
body.v2 section .v2-shadow h3{margin-bottom:6px;font-size:19px}
body.v2 section .v2-shadow p{margin:0;color:var(--ink)}
body.v2 .v2-feed-copy .example-link{display:inline-flex;align-items:center;min-height:44px}
body.v2 .v2-feedstage{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;align-items:center}
body.v2 .v2-chat{height:380px;display:flex;flex-direction:column;padding:14px 12px 12px;background:var(--sky)}
body.v2 section .v2-chat-label{font:600 12px/1 'Golos Text',sans-serif;color:var(--ink-muted);margin:2px 4px 12px}
body.v2 .v2-feed{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;overflow:hidden}
body.v2 .v2-bubble{flex:none;align-self:flex-start;max-width:100%;background:#fff;border-radius:16px 16px 16px 4px;padding:8px 12px 10px;font-size:13.5px;line-height:1.4;color:var(--ink);box-shadow:0 1px 1px rgba(24,32,29,.07)}
body.v2 .v2-bubble b{display:block;font:600 12.5px/1.4 'Golos Text',sans-serif;margin-bottom:2px}
body.v2 .v2-bubble.is-anon b{color:var(--green)}
body.v2 .v2-bubble .v2-txt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.v2 .v2-bubble img{display:block;width:160px;max-width:100%;height:112px;object-fit:cover;border-radius:10px;margin-top:4px}
body.v2 .v2-ghost{position:absolute;z-index:5;margin:0;pointer-events:none;box-shadow:0 12px 30px -10px rgba(24,32,29,.4)}
body.v2 .v2-page{display:grid;gap:12px;padding:16px;background:var(--card);min-width:0}
body.v2 section .v2-page-head{display:flex;align-items:center;gap:10px;margin:0;font:600 16px/1.2 'Golos Text',sans-serif;color:var(--ink)}
body.v2 .v2-page-head .v2-logo{width:28px;height:27px;flex:none}
body.v2 .v2-slot{position:relative;display:grid;min-width:0}
body.v2 .v2-slide{grid-area:1/1;min-width:0;margin:0;opacity:0;visibility:hidden;transition:opacity .9s cubic-bezier(.4,0,.2,1),visibility 0s linear .9s}
body.v2 .v2-slide.is-on{opacity:1;visibility:visible;transition:opacity .9s cubic-bezier(.4,0,.2,1),visibility 0s}
body.v2 .v2-slot-photo{aspect-ratio:4/3;overflow:hidden;background:#d5dddb}
body.v2 .v2-slot-photo .v2-slide{position:absolute;inset:0}
body.v2 .v2-slot-photo img{display:block;width:100%;height:100%;object-fit:cover}
body.v2 .v2-slot-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;font:500 13px/1.35 'Golos Text',sans-serif;color:#fff;background:linear-gradient(180deg,rgba(10,16,13,0),rgba(10,16,13,.62))}
body.v2 .v2-slot-photo .v2-slide figcaption{opacity:0;transition:opacity .2s ease}
body.v2 .v2-slot-photo .v2-slide.is-on figcaption{opacity:1;transition:opacity .5s ease .8s}
body.v2 .v2-slot-text{background:#f4f6f5;padding:16px;border-top:1px solid var(--coral)}
body.v2 section .v2-slot-text p{font:400 17px/1.4 'Golos Text',sans-serif;color:var(--ink);margin:0 0 10px}
body.v2 .v2-page-voice{display:grid;gap:6px;padding:12px 14px;border-top:1px solid var(--mustard);background:#f4f6f5}
body.v2 section .v2-page-voice>p{font-size:13px;color:var(--ink-muted);margin:0}
body.v2 .v2-page-voice .second-player{max-width:none}

/* Shorter occasions. */
body.v2 article.occasion p{margin-bottom:0}

/* Promo code (hero 4/5 only). */
body.v2 .v2-promo{margin:4px 0 24px}
body.v2 .v2-promo-toggle{background:none;border:0;padding:0;min-height:44px;color:#fff;text-decoration:underline;text-underline-offset:5px;font-size:15px}
body.v2 .v2-promo-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:8px}
body.v2 .v2-promo-form[hidden]{display:none}
body.v2 .v2-promo-form label{display:grid;gap:6px;font-size:13px;color:#d0d9d4}
body.v2 .v2-promo-form input{min-height:48px;width:220px;max-width:100%;padding:10px 14px;border:1px solid #75867d;background:#1f2825;color:#fff;font-size:16px;text-transform:uppercase}
body.v2 .v2-promo-form .button{background:transparent;color:#fff;border-color:#d0d9d4}
body.v2 section .v2-promo-status{margin:12px 0 0;color:#fff;font-size:15px}
body.v2 .v2-promo-ok{color:#9fe0bf}
body.v2 .v2-promo-ok::before{content:"\2713";display:inline-block;margin-right:8px;font-weight:700}
body.v2 .v2-promo-status [hidden]{display:none}
body.v2 .plan-lines strong s{font-size:.6em;font-weight:400;color:#a8b5ae;margin-right:10px;text-decoration-thickness:1px}

@media(max-width:1000px){
  body.v2 .v2-gather,body.v2 .v2-feed-section{grid-template-columns:1fr;gap:32px}
  body.v2 .v2-gather{row-gap:20px}
  body.v2 .v2-mini-steps{margin-top:8px;gap:20px}
  body.v2 .v2-steps{gap:24px}
}
@media(max-width:700px){
  body.v2 .hero .lead{font-size:17px}
  body.v2 .v2-track{padding-top:4px}
  body.v2 .v2-steps{grid-template-columns:1fr;gap:28px}
  body.v2 .v2-steps li{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:14px;align-items:start}
  body.v2 .v2-mark{grid-row:1/4;height:auto;margin:0;justify-content:center}
  body.v2 .v2-steps li:nth-child(2){margin-bottom:96px}
  body.v2 .v2-steps li:nth-child(3) .v2-mark{grid-row:1/3}
  body.v2 .v2-steps .v2-gift-cta{grid-column:1/-1;grid-row:3;margin:16px 0 0;justify-self:start}
  body.v2 .v2-steps li:nth-child(3) h3{grid-row:1}
  body.v2 .v2-steps li:nth-child(3) p{grid-row:2}
  body.v2 .v2-sky{aspect-ratio:auto;height:300px;min-height:0}
  body.v2 section .v2-mini-steps p{font-size:18px}
  body.v2 .v2-node{left:var(--mx,var(--x));top:var(--my,var(--y))}
  body.v2 .v2-gift{left:var(--mx,var(--x));top:var(--my,var(--y))}
  body.v2 .v2-feedstage{grid-template-columns:1fr;gap:14px}
  body.v2 .v2-chat{height:270px}
  body.v2 .v2-bubble img{width:132px;height:90px}
  body.v2 .v2-slot-photo{aspect-ratio:3/2}
  body.v2 .v2-promo-form input{width:100%}
  body.v2 .v2-promo-form label{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  body.v2 .v2-stack>[data-v2-slide],body.v2 .v2-slide,body.v2 .v2-slide figcaption,body.v2 .painting img[data-v2-slide],body.v2 .train img[data-v2-slide]{transition:none!important}
  body.v2 .is-pulse,body.v2 .v2-logo.is-pulse::after{animation:none}
  body.v2 .v2-sky.is-waiting .v2-node{opacity:1}
  body.v2 .v2-node{transition:none}
}
/* Pricing: one solid CTA on the highlighted plan, the others stay quiet. */
body.v2 .pricing-row:not([data-plan="circle"]) .button.primary{background:var(--card);color:var(--green);border-color:var(--green)}

/* ===== Hero 6/7 overrides =====
   Type system in the hero and in the reply section: one family (Golos Text), one text colour (ink) and
   one accent (green). Hero: headline, body 17 px, caption 14 px. Replies section: heading, body 17 px,
   small 14 px (400 for text, 600 for names and labels). */
body.v3{--v3-body:400 17px/1.6 'Golos Text',sans-serif;--v3-cap:600 14px/1.4 'Golos Text',sans-serif;--v3-small:400 14px/1.45 'Golos Text',sans-serif}

/* RU/EN: one tidy segment instead of two boxes. */
body.v3 .languages{gap:0}
body.v3 .languages button{width:44px;font:var(--v3-cap);color:var(--ink)}
body.v3 .languages button::before{inset:8px 0;border-color:var(--ink-fine)}
body.v3 .languages button:first-child::before{border-radius:0;border-right:0}
body.v3 .languages button:last-child::before{border-radius:0}
body.v3 .languages button[aria-pressed=true]{color:#fff}
body.v3 .languages button[aria-pressed=true]::before{border-color:var(--green)}

/* Hero text: headline, body, caption. */
body.v3 .hero{color:var(--ink)}
body.v3 .hero h1{font:700 40px/1.15 'Golos Text',sans-serif;letter-spacing:-.01em;max-width:none;margin:0}
body.v3 .hero .occasion{font:var(--v3-body);color:var(--ink);white-space:normal;max-width:none;margin:0 0 20px;letter-spacing:normal;text-transform:none}
body.v3 .hero .lead{font:var(--v3-body);line-height:1.75;color:var(--ink);max-width:38ch;margin:24px 0 0}
body.v3 .hero .actions{margin:32px 0 0;gap:12px}
body.v3 .hero .button{font:var(--v3-cap)}
body.v3 .hero .train-story blockquote p,body.v3 .hero .memory p{font:var(--v3-body);line-height:1.5;color:var(--ink);margin:0}
body.v3 .hero .train-story blockquote p,body.v3 .hero .memory p{font-size:15px}
body.v3 .hero cite,body.v3 .hero .voice>p,body.v3 .hero .time,body.v3 .hero .painting figcaption{font:var(--v3-cap);font-style:normal;color:var(--ink)}
body.v3 .hero .v2-quote{gap:12px}

/* Photo caption sits on the card, ink on white like the rest of the mosaic. */
body.v3 .painting figcaption{height:auto;min-height:0;background:var(--card);color:var(--ink);padding:10px 12px;align-items:flex-start}
body.v3 .painting figcaption .v2-stack{width:100%}

/* Soft crossfades: the outgoing slide fades while the incoming one appears, no blank gap. */
body.v3 .v2-stack>[data-v2-slide]{transition:opacity .9s cubic-bezier(.4,0,.2,1),visibility 0s linear .9s}
body.v3 .v2-stack>[data-v2-slide].is-on{transition:opacity .9s cubic-bezier(.4,0,.2,1) .25s,visibility 0s}
body.v3 .painting img[data-v2-slide],body.v3 .train img[data-v2-slide]{transition:opacity 0s linear 1.2s,visibility 0s linear 1.2s}
body.v3 .painting img[data-v2-slide].is-on,body.v3 .train img[data-v2-slide].is-on{transition:opacity 1.2s cubic-bezier(.4,0,.2,1),visibility 0s}

/* Audio card: nothing inside changes size after load. The loading status is announced but takes no
   room, and the time label keeps the width of «0:00 / 0:29» from the start. */
body.v3 .voice{position:relative}
body.v3 .wave-loading{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
body.v3 .hero .time{flex:none;min-width:6.4em;text-align:right;font-variant-numeric:tabular-nums}
body.v3 .hero .voice{align-items:stretch}
body.v3 .hero .voice>p{text-align:left}
body.v3 .hero .voice-player{min-height:50px;max-width:none;width:100%}

/* Wide screens: a calmer headline, a narrower photo column, and the whole hero on the first screen
   down to a 1366x768 laptop with its browser bars (about 650 px of page). */
@media(min-width:1001px){
  body.v3 .hero{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(56px,6vw,96px);align-items:center;padding:24px 0 32px}
  body.v3 .introduction{padding:0}
  body.v3 .mosaic{height:clamp(440px,calc(100svh - 64px - 56px),540px);grid-template-rows:auto minmax(140px,1fr) auto;gap:12px}
  body.v3 .painting{grid-row:1/3}
  body.v3 .train-story blockquote{padding:10px 18px}
  body.v3 .memory{padding:10px 18px}
  body.v3 .train-story blockquote{padding-right:56px}
  body.v3 .voice{grid-column:1/7;min-height:0;padding:16px 18px;justify-content:center}
  body.v3 .memory{grid-column:7/-1}
  /* The RU caption fits one line and the EN one needs two: reserve both lines so switching the
     language never moves the player. */
  body.v3 .hero .voice>p{min-height:2.8em;display:flex;align-items:flex-end;margin:0}
}
@media(min-width:1001px) and (max-height:700px){
  body.v3 .hero h1{font-size:36px}
  body.v3 .hero .actions{margin-top:28px}
}
/* Buttons the same width, sized to the wider label - never wider than the headline's own text.
   The grid is shrink-wrapped (width:fit-content): with no extra space to stretch into, two 1fr
   tracks resolve to the widest column's content size, so both columns end up equal and the row
   never grows past its buttons' natural width (which stays well inside the h1's measure). */
@media(min-width:701px){
  body.v3 .hero .actions{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;width:fit-content}
  body.v3 .hero .actions>.button{width:100%}
  body.v3 .hero .actions>.ff-cta{width:100%;align-items:stretch}
  body.v3 .hero .actions>.ff-cta>.button{width:100%}
}
@media(max-width:700px){
  body.v3 .hero h1{font-size:26px}
  body.v3 .hero .occasion{margin-bottom:14px}
  /* Room for the longer of the RU and EN lead, so the language swap after load moves nothing. */
  body.v3 .hero .lead{min-height:5.25em}
  body.v3 .hero .lead{margin-top:18px}
  body.v3 .hero .actions{margin-top:24px}
  /* The EN quotes run a line longer than the RU ones: keep the taller box for both languages so
     the audio card below does not move when the language is applied. */
  body.v3 .hero .train-story blockquote{min-height:240px}
}

/* How it works: the gift button sits under the «Подарок» caption. */
body.v3 .v2-steps .v2-gift-cta{margin:20px 0 0}
@media(max-width:700px){body.v3 .v2-steps .v2-gift-cta{grid-column:2;grid-row:3;margin:16px 0 0}}

/* Replies section: fewer sizes and weights, no underlined links. */
body.v3 section.v2-feed-section p{font:var(--v3-body);color:var(--ink)}
body.v3 section.v2-feed-section .note{font:var(--v3-small);color:var(--ink);margin:0 0 20px}
body.v3 section .v2-shadow h3{font:var(--v3-cap);color:var(--green);margin:0 0 6px}
body.v3 .v2-feed-copy .button{display:inline-flex;font:var(--v3-cap)}
body.v3 section.v2-feed-section .v2-chat-label,body.v3 section.v2-feed-section .v2-page-head,body.v3 section.v2-feed-section .v2-page-head span{font:var(--v3-cap);color:var(--ink)}
body.v3 .v2-bubble{font:var(--v3-small)}
body.v3 .v2-bubble b{font:var(--v3-cap)}
body.v3 section .v2-slot-text p{font:var(--v3-body);line-height:1.5}
body.v3 .v2-slot-text cite{font:var(--v3-cap);font-style:normal;color:var(--ink)}
body.v3 section.v2-feed-section .v2-page-voice>p{font:var(--v3-cap);color:var(--ink)}
body.v3 section.v2-feed-section .second-time{font:var(--v3-cap);font-variant-numeric:tabular-nums;flex:none}
body.v3 section.v2-feed-section .second-toggle{font-family:'Golos Text',sans-serif}

/* No cropped faces: every photo is shown whole. Chat photos keep their own shape; page photos sit
   on a light mat with the caption underneath instead of over the picture. */
body.v3 .v2-bubble img{width:auto;height:120px;max-width:100%;object-fit:contain;border-radius:10px}
body.v3 .v2-slot-photo{aspect-ratio:1/1;background:#eceeeb;overflow:hidden}
body.v3 .v2-slot-photo .v2-slide{display:flex;flex-direction:column}
body.v3 .v2-slot-photo img{flex:1;min-height:0;width:100%;height:auto;object-fit:contain;padding:14px 14px 0}
body.v3 .v2-slot-photo figcaption{position:static;padding:10px 14px 12px;background:none;font:var(--v3-small);color:var(--ink)}
@media(max-width:700px){
  body.v3 .v2-bubble img{height:88px}
  /* Room for two or three replies at once, so the chat never sits half empty. */
  body.v3 .v2-chat{height:340px}
  body.v3 .v2-slot-photo{aspect-ratio:5/4}
}
/* ===== Hero 8 =====
   The lower half (occasions, Mini App, pricing, FAQ, closing) gets the same system as the top: Golos Text,
   ink and one green accent, sharp corners, thin lines, the three logo circles as the only decoration.
   Motion is opacity and transform only, so nothing shifts layout. JS adds .v4-pre only to blocks that start
   below the viewport and only without prefers-reduced-motion; without JS everything is simply visible. */
body.v3-8{interpolate-size:allow-keywords}

/* Radii: one rule for the page. Rectangles are sharp, only real circles stay round. */
body.v3-8 .v2-bubble,body.v3-8 .v2-bubble img,body.v3-8 .voice-player,body.v3-8 #demo-panel{border-radius:0}

/* One family in the lower half, as in the top. */
body.v3-8 .occasions,body.v3-8 .walkthrough,body.v3-8 .pricing,body.v3-8 .faq,body.v3-8 .closing{font-family:'Golos Text',sans-serif}
body.v3-8 section .occasion-review,body.v3-8 section .demo-controls>p:not(.note){font:var(--v3-body);color:var(--ink)}
body.v3-8 section .occasion-review{max-width:56ch;margin:12px 0 28px}
body.v3-8 section .note{font:var(--v3-small);color:var(--ink-muted)}
body.v3-8 section.pricing .note{color:#d0d9d4}

/* Reveal on scroll. */
body.v3-8 .v4-pre{opacity:0;transform:translateY(16px)}
body.v3-8 .v4-pre.v4-in{opacity:1;transform:none;transition:opacity .48s cubic-bezier(0,0,.2,1) var(--d,0s),transform .56s cubic-bezier(0,0,.2,1) var(--d,0s)}

/* Occasions: a tab per occasion, each with its own sample questions and photo. */
body.v3-8 .occ{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);border:1px solid var(--line);background:#fff}
body.v3-8 .occ-tabs{display:flex;flex-direction:column;background:var(--bg-alt)}
body.v3-8 .occ-tabs button{position:relative;display:grid;align-content:center;gap:2px;flex:1;min-height:76px;padding:16px 22px;text-align:left;background:transparent;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink);cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
body.v3-8 .occ-tabs button:last-child{border-bottom:0}
body.v3-8 .occ-tabs button:hover{background:rgba(255,255,255,.55)}
body.v3-8 .occ-tabs button[aria-selected=true]{background:#fff;border-right-color:#fff}
body.v3-8 .occ-tabs button::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green);transform:scaleY(0);transition:transform .3s cubic-bezier(0,0,.2,1)}
body.v3-8 .occ-tabs button[aria-selected=true]::before{transform:none}
body.v3-8 .occ-tabs button:focus-visible{outline-offset:-3px}
body.v3-8 .occ-name{font:600 17px/1.35 'Golos Text',sans-serif;transition:color .2s ease}
body.v3-8 .occ-tabs button[aria-selected=true] .occ-name{color:var(--green)}
body.v3-8 .occ-who{font:var(--v3-small);color:var(--ink-muted)}
/* The thin line under the active tab fills up until the next occasion comes in. */
body.v3-8 .occ-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green);opacity:0;transform:scaleX(0);transform-origin:left center}
body.v3-8 .occ.is-auto .occ-tabs button[aria-selected=true] .occ-bar{opacity:.55;animation:v4-occ-fill var(--occ-ms,7000ms) linear forwards}
body.v3-8 .occ.is-auto.is-paused .occ-tabs button[aria-selected=true] .occ-bar{animation-play-state:paused}
@keyframes v4-occ-fill{to{transform:scaleX(1)}}

body.v3-8 .occ-panels{display:grid;min-width:0}
body.v3-8 .occ-panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,250px);gap:36px;align-items:start;padding:32px 36px;visibility:hidden;opacity:0;transition:opacity .22s ease,visibility 0s linear .22s}
body.v3-8 .occ-panel.is-on{visibility:visible;opacity:1;transition:opacity .36s cubic-bezier(0,0,.2,1) .08s,visibility 0s}
body.v3-8 .occ-panel:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
body.v3-8 section .occ-count{font:var(--v3-cap);color:var(--green);margin:0 0 14px}
body.v3-8 .occ ol{list-style:none;margin:0;padding:0}
body.v3-8 .occ li{display:grid;grid-template-columns:26px minmax(0,1fr);padding:14px 0;border-top:1px solid var(--line);font:var(--v3-body);line-height:1.45;color:var(--ink)}
body.v3-8 .occ li:last-child{border-bottom:1px solid var(--line)}
body.v3-8 .occ li::before{content:'';width:10px;height:10px;margin-top:.5em;border-radius:50%;background:var(--amber)}
body.v3-8 .occ li:nth-child(2)::before{background:var(--teal2)}
body.v3-8 .occ li:nth-child(3)::before{background:var(--terra)}
body.v3-8 section .occ-edit{font:var(--v3-small);color:var(--ink-muted);margin:14px 0 0}
body.v3-8 .occ-photo{margin:0;overflow:hidden}
body.v3-8 .occ-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
body.v3-8 .occ-photo figcaption{font:var(--v3-small);color:var(--ink);margin-top:10px;text-wrap:pretty}
/* Switching occasions: the questions come in one after another, the photo settles. */
body.v3-8 .occ.is-anim .occ-panel li{opacity:0;transform:translateY(8px)}
body.v3-8 .occ.is-anim .occ-panel.is-on li{opacity:1;transform:none;transition:opacity .36s ease calc(.12s + var(--i)*.09s),transform .44s cubic-bezier(0,0,.2,1) calc(.12s + var(--i)*.09s)}
body.v3-8 .occ.is-anim .occ-panel img{transform:scale(1.04)}
body.v3-8 .occ.is-anim .occ-panel.is-on img{transform:none;transition:transform 1.2s cubic-bezier(0,0,.2,1)}

/* Mini App walkthrough: sharp tabs in the page type, a step rail, a soft crossfade between screens. */
body.v3-8 .tabs{margin:28px 0 0}
body.v3-8 .tabs button{font:var(--v3-cap);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
body.v3-8 .tabs button:hover{border-color:var(--green)}
body.v3-8 .v4-rail{height:2px;max-width:540px;margin:14px 0 20px;background:var(--line);overflow:hidden}
body.v3-8 .v4-rail i{display:block;height:100%;background:var(--green);transform-origin:left center;transform:scaleX(calc((var(--step,0) + 1)/5));transition:transform .45s cubic-bezier(.2,0,0,1)}
body.v3-8 section .stage-description{font:var(--v3-body);color:var(--ink)}
body.v3-8 .stage-description.v4-swap{animation:v4-fade-up .34s cubic-bezier(0,0,.2,1)}
@keyframes v4-fade-up{from{opacity:0;transform:translateY(4px)}}
body.v3-8 .demo-result{background:var(--sky);padding:36px 24px 12px}
body.v3-8 #demo-panel{position:relative;background:#fff}
body.v3-8 .v4-ghost{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .26s ease}
body.v3-8 #large-screen{font:var(--v3-cap)}

/* Pricing: a dot per place, in the logo colours. */
body.v3-8 section .plan-lines h3{font:600 20px/1.3 'Golos Text',sans-serif}
body.v3-8 .v4-seats{display:flex;flex-wrap:wrap;gap:4px;max-width:228px;margin-top:10px}
body.v3-8 .v4-seats i{display:block;width:8px;height:8px;border-radius:50%;background:var(--amber)}
body.v3-8 [data-plan=circle] .v4-seats i{background:var(--teal2)}
body.v3-8 [data-plan=together] .v4-seats i{background:var(--terra)}
body.v3-8 .pricing-row.v4-pre .v4-seats i{opacity:0;transform:scale(0)}
body.v3-8 .pricing-row.v4-pre.v4-in .v4-seats i{opacity:1;transform:none;transition:opacity .2s ease calc(.3s + var(--i)*14ms),transform .32s cubic-bezier(0,0,.2,1) calc(.3s + var(--i)*14ms)}

/* FAQ: a plus that turns into a minus, and the answer opens smoothly where the browser can do it. */
body.v3-8 .faq-list summary{position:relative;list-style:none;padding-right:44px;transition:color .2s ease}
body.v3-8 .faq-list summary::-webkit-details-marker{display:none}
body.v3-8 .faq-list summary:hover{color:var(--green)}
body.v3-8 .faq-list summary::before,body.v3-8 .faq-list summary::after{content:'';position:absolute;right:8px;top:50%;width:14px;height:2px;margin-top:-1px;background:var(--green)}
body.v3-8 .faq-list summary::after{transform:rotate(90deg);transition:transform .3s cubic-bezier(.2,0,0,1)}
body.v3-8 .faq-list details[open] summary::after{transform:rotate(0deg)}
body.v3-8 .faq-list details::details-content{block-size:0;overflow:hidden;transition:block-size .32s cubic-bezier(.2,0,0,1),content-visibility .32s allow-discrete}
body.v3-8 .faq-list details[open]::details-content{block-size:auto}
body.v3-8 section .faq-list p{font:var(--v3-body);color:var(--ink)}

/* Closing: the three circles of the logo come together. */
body.v3-8 .closing .v4-gather{margin-bottom:24px}
body.v3-8 .closing .v4-gather.v4-pre{opacity:1;transform:none}
body.v3-8 .closing .v4-gather.v4-pre i:nth-child(1){transform:translateX(-30px)}
body.v3-8 .closing .v4-gather.v4-pre i:nth-child(3){transform:translateX(30px)}
body.v3-8 .closing .v4-gather.v4-pre.v4-in i{transform:none;transition:transform .7s cubic-bezier(.2,0,0,1) .15s}

@media(max-width:1000px){
  body.v3-8 .occ{grid-template-columns:1fr}
  body.v3-8 .occ-tabs{flex-direction:row}
  body.v3-8 .occ-tabs button{min-width:0;border-bottom:1px solid var(--line)}
  body.v3-8 .occ-tabs button:last-child{border-right:0;border-bottom:1px solid var(--line)}
  body.v3-8 .occ-tabs button[aria-selected=true]{border-right-color:var(--line);border-bottom-color:#fff}
  body.v3-8 .occ-tabs button:last-child[aria-selected=true]{border-right-color:transparent}
  body.v3-8 .occ-tabs button::before{top:0;right:0;bottom:auto;width:auto;height:3px;transform:scaleX(0)}
  body.v3-8 .occ-panel{grid-template-columns:minmax(0,1fr) minmax(0,220px);padding:28px}
}
@media(max-width:700px){
  body.v3-8 .occ-tabs{display:grid;grid-template-columns:1fr 1fr}
  body.v3-8 .occ-tabs button{min-height:56px;padding:12px 14px}
  body.v3-8 .occ-tabs button:nth-child(2n){border-right:0}
  body.v3-8 .occ-tabs button[aria-selected=true]{border-bottom-color:var(--line)}
  body.v3-8 .occ-tabs button:nth-child(-n+2)[aria-selected=true]{border-bottom-color:var(--line)}
  body.v3-8 .occ-name{font-size:15px}
  body.v3-8 .occ-who{display:none}
  body.v3-8 .occ-panel{grid-template-columns:1fr;gap:20px;padding:20px}
  body.v3-8 .occ-photo img{aspect-ratio:4/3}
  body.v3-8 .occ li{font-size:16px}
  body.v3-8 .demo-result{padding:24px 16px 8px}
}
@media(prefers-reduced-motion:reduce){
  body.v3-8 .v4-pre,body.v3-8 .v4-pre i,body.v3-8 .v4-seats i{opacity:1!important;transform:none!important;transition:none!important}
  body.v3-8 .occ-panel,body.v3-8 .occ-panel li,body.v3-8 .occ-panel img,body.v3-8 .occ-tabs button,body.v3-8 .occ-tabs button::before,body.v3-8 .v4-rail i,body.v3-8 .v4-ghost,body.v3-8 .faq-list summary::after,body.v3-8 .faq-list details::details-content{transition:none!important}
  body.v3-8 .occ-bar,body.v3-8 .stage-description.v4-swap{animation:none!important}
}