@font-face{font-family:'Noto Sans';src:url(../assets/design-kit/fonts/noto_sans_regular.woff2) format('woff2'),url(../assets/design-kit/fonts/noto_sans_regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Noto Sans';src:url(../assets/design-kit/fonts/noto_sans_medium.woff2) format('woff2'),url(../assets/design-kit/fonts/noto_sans_medium.ttf) format('truetype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Noto Sans';src:url(../assets/design-kit/fonts/noto_sans_semibold.woff2) format('woff2'),url(../assets/design-kit/fonts/noto_sans_semibold.ttf) format('truetype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Source Serif Pro';src:url(../assets/design-kit/fonts/source_serif_pro_regular.woff2) format('woff2'),url(../assets/design-kit/fonts/source_serif_pro_regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Source Serif Pro';src:url(../assets/design-kit/fonts/source_serif_pro_italic.woff2) format('woff2'),url(../assets/design-kit/fonts/source_serif_pro_italic.ttf) format('truetype');font-weight:400;font-style:italic;font-display:swap;}
/* Cyrillic (Russian pages): small subsets, downloaded only when Cyrillic text is on the page */
@font-face{font-family:'Noto Sans';src:url(../assets/design-kit/fonts/noto_sans_regular_cyrillic.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Noto Sans';src:url(../assets/design-kit/fonts/noto_sans_medium_cyrillic.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Noto Sans';src:url(../assets/design-kit/fonts/noto_sans_semibold_cyrillic.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Source Serif Pro';src:url(../assets/design-kit/fonts/source_serif_pro_regular_cyrillic.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Source Serif Pro';src:url(../assets/design-kit/fonts/source_serif_pro_italic_cyrillic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

:root{
  --brand:#C75207;
  /* the brand orange for small text on cream, where #C75207 falls just short of 4.5:1 */
  --brand-ink:#B34A06;
  --brand-bar:#F79008;
  --surface:#FFFFFF;
  --cream-card:#FFF9EB;
  --cream-chip:#FAF4E6;
  --cream-bubble:#FDEFBE;
  --sand:#F5E6C9;
  --bubble-ai:#F8F8F8;
  --ink:#2C2017;
  --ink-soft:#504439;
  --ink-mute:#736B62;
  --dotgold:#E0D2A8;
  --chart-periwinkle:#8C8CF0;
  --chart-green:#4CC760;
  --shadow-soft:0 12px 32px -12px rgba(44,32,23,.18);
}

*{box-sizing:border-box;}
html,body{margin:0;background:var(--surface);color:var(--ink);}
body{font-family:'Noto Sans',sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2{font-family:'Source Serif Pro',serif;font-weight:400;color:var(--ink);margin:0;letter-spacing:-.01em;}
p{margin:0;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}

@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;z-index:100;}
.skip-link:focus{left:0;}

/* reveal system: default = final state (works with no JS / reduced motion) */
.ew{position:relative;display:inline-block;font-style:italic;font-family:'Source Serif Pro',serif;}
/* the word exists once in the DOM; its warm copy is drawn over it from data-w, with empty alt text so assistive
   tech and copy/paste never see it twice. It starts in plain ink (never a disabled-looking grey) and warms. */
.ew::after{content:attr(data-w);content:attr(data-w) / "";position:absolute;inset:0;color:var(--brand);opacity:1;pointer-events:none;}
.js-anim .ew::after{opacity:0;transition:opacity .6s ease-out;}
.js-anim .ew.is-visible::after{opacity:1;}

.js-anim [data-reveal]:not(.bar-fill){opacity:0;transform:translateY(18px);}
.js-anim [data-reveal]:not(.bar-fill).is-visible{opacity:1;transform:translateY(0);transition:opacity .7s ease-out,transform .7s ease-out;}

.chat-msg{max-width:78%;}
.js-anim .chat-msg{opacity:0;transform:translateY(12px);}
.js-anim .chat-msg.is-visible{opacity:1;transform:translateY(0);transition:opacity .5s ease-out,transform .5s ease-out;}

.typing-indicator{display:none;align-items:center;gap:5px;padding:12px 16px;background:var(--sand);border-radius:18px 18px 18px 4px;width:fit-content;}
.js-anim .typing-indicator.show{display:flex;}
/* impeccable-disable-next-line pulsing-dot -- a real chat "composing" cue, shown only while the coach is replying */
.typing-indicator span{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);opacity:.25;animation:typing-wave 1.2s ease-in-out infinite;}
.typing-indicator span:nth-child(2){animation-delay:.15s;}
.typing-indicator span:nth-child(3){animation-delay:.3s;}
/* a soft opacity wave, not a bounce: the dots read as "composing", calmly */
@keyframes typing-wave{0%,70%,100%{opacity:.25;}35%{opacity:.9;}}
@media (prefers-reduced-motion: reduce){.typing-indicator span{animation:none;}}

.bar-fill{transform:scaleX(0);transform-origin:left center;}
.js-anim .bar-fill{transition:transform 1s cubic-bezier(.2,.7,.3,1);}
.js-anim .bar-fill.is-visible{transform:scaleX(1);}
body:not(.js-anim) .bar-fill{transform:scaleX(1);}

.radar-poly{opacity:1;transform:scale(1);transform-origin:150px 150px;}
.js-anim .radar-poly{opacity:0;transform:scale(.82);transition:opacity .8s ease-out,transform .8s ease-out;}
.js-anim .radar-poly.is-visible{opacity:.85;transform:scale(1);}

/* layout helpers */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
@media (min-width:640px){.wrap{padding:0 40px;}}
.section{padding:64px 0;position:relative;}
@media (min-width:900px){.section{padding:96px 0;}}
.section--tight{padding:56px 0;}
.h2{font-size:32px;line-height:1.15;}
@media (min-width:640px){.h2{font-size:40px;}}
/* the two documented display tiers: .h2 for standard section heads, .h2--display for the two emotional peaks */
.h2--display{font-size:36px;line-height:1.15;}
@media (min-width:640px){.h2--display{font-size:46px;}}
.lede{font-size:17px;color:var(--ink-soft);max-width:60ch;}

/* two-speed section rhythm: tight seams at narratively-adjacent beats, generous exhale gaps at story pivots */
#peak{padding-top:64px;}
#understanding{padding-top:clamp(72px,10vh,112px);}
#journey{padding-top:clamp(72px,10vh,112px);}
#faq{padding-top:56px;}
/* anchor-nav safety net: every in-page jump target gets scroll-margin-top matching the sticky header (85px),
   independent of each section's own padding-top -- #peak and #faq's 64px padding alone left their heading
   partly hidden under the header on a direct anchor jump. */
#peak,#understanding,#modes,#journey,#trust,#faq,#cta{scroll-margin-top:85px;}

/* repeating hand-off signature: every section after the hero gets the same rounded-top + shadow-lip edge,
   reading as one page rising over the next rather than a stack of separate bands */
.hand-off{position:relative;border-radius:42px 42px 0 0;box-shadow:0 -20px 44px -34px rgba(44,32,23,.16);}

/* grain motif: the gold dot-wave texture reused at low opacity inside structural containers */
.grain-card{position:relative;overflow:hidden;}
.grain-card::before{content:"";position:absolute;inset:0;background-image:url(../assets/design-kit/images/coach_hero_texture.png);background-size:480px auto;background-repeat:repeat;background-blend-mode:multiply;opacity:.14;pointer-events:none;}

/* golden thread: a page-progress rail, desktop + motion-allowed only (mirrors the html.fx gate in main.js) */
.progress-rail{display:none;}
html.fx .progress-rail{display:block;position:fixed;left:20px;top:calc(85px + 28px);bottom:28px;width:3px;border-radius:999px;background:var(--sand);z-index:30;pointer-events:none;}
html.fx .progress-rail::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:999px;background:linear-gradient(var(--brand-bar),var(--brand));transform-origin:top center;transform:scaleY(var(--page-progress,0));}

/* first-visit welcome modal: js reparents .hero-video-bg + .hero-video-controls into #videoModalFrame on a
   brand-new visitor, then moves them back to the hero on close. Same elements throughout, so playback/sound
   state never resets. Skipped entirely under prefers-reduced-motion. */
.video-modal-scrim{position:fixed;inset:0;z-index:90;background:rgba(44,32,23,.6);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s ease;}
html.video-modal-open{overflow:hidden;}
html.video-modal-open .video-modal-scrim{opacity:1;pointer-events:auto;}
.video-modal-frame{position:relative;height:min(82vh,760px);max-width:100%;width:auto;aspect-ratio:618/1180;box-shadow:0 40px 80px -20px rgba(0,0,0,.5);border-radius:24px;
  transform:scale(.94);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s ease;}
html.video-modal-open .video-modal-frame{transform:scale(1);opacity:1;}
/* rounding/clipping lives on the video layer, not the frame itself, so the close button can sit just
   outside the frame's corner without being clipped by the same overflow:hidden. */
.video-modal-frame .hero-video-bg{border-radius:24px;overflow:hidden;}
.video-modal-close{position:absolute;top:-16px;right:-16px;z-index:2;width:44px;height:44px;border-radius:50%;border:none;
  background:var(--cream-card);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);}
.video-modal-close:hover{background:#fff;}
.video-modal-close .icon{width:20px;height:20px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;font-size:15px;font-weight:600;border:1px solid transparent;text-decoration:none;transition:opacity .25s ease-out;}
.btn:hover{opacity:.85;}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
.btn-primary{background:var(--brand);color:#fff;}
.btn-secondary{background:var(--cream-chip);color:var(--ink);}
.btn-text{background:transparent;color:var(--brand);text-decoration:underline;text-underline-offset:3px;padding:0;min-height:auto;font-weight:600;border:none;}
.btn-text:hover{opacity:.7;}

.icon{width:22px;height:22px;flex-shrink:0;}

/* header — v2: a floating capsule. Fixed, so the ink hero runs up behind it; transparent and cream there, then
   frosted once the page moves (frosted ink over the hero, frosted paper everywhere else). Elevation is declared
   once per state: a hairline on ink, a soft shadow on paper. The header zone stays within the 85px every sticky
   offset on the page is built around. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:40;padding:12px 12px 0;pointer-events:none;}
@media (min-width:640px){.site-header{padding:14px 24px 0;}}
.header-bar{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1400px;height:60px;margin:0 auto;padding:0 8px 0 22px;
  border:1px solid transparent;border-radius:20px;color:var(--ink);
  transition:background-color .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),color .5s cubic-bezier(.16,1,.3,1);}
.site-header.is-scrolled .header-bar{background:rgba(255,249,235,.82);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 14px 34px -22px rgba(44,32,23,.5);}
.site-header.is-dark .header-bar{color:var(--cream-card);}
.site-header.is-dark.is-scrolled .header-bar{background:rgba(44,32,23,.8);border-color:rgba(255,249,235,.12);box-shadow:none;}
.site-header.is-dark a:focus-visible,.site-header.is-dark button:focus-visible{outline-color:var(--brand-bar);}

.logo{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;}
/* the owner's wordmark (assets/logo.png, 400x78, transparent): the same orange on the dark and the light header */
.logo-img{display:block;height:20px;width:auto;}

.nav-links{display:none;align-items:center;gap:2px;font-size:15px;font-weight:500;}
.nav-links a{position:relative;padding:10px 14px;border-radius:12px;color:inherit;text-decoration:none;opacity:.72;transition:opacity .25s ease;}
.nav-links a:hover,.nav-links a[aria-current]{opacity:1;}
/* where you are: a faint track under the current section's link, filled with progress through that section */
.nav-links a::before,.nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;border-radius:2px;pointer-events:none;}
.nav-links a::before{background:currentColor;opacity:0;transition:opacity .3s ease;}
.nav-links a[aria-current]::before{opacity:.18;}
.nav-links a::after{background:var(--brand);transform-origin:left center;transform:scaleX(var(--np,0));}
.site-header.is-dark .nav-links a::after{background:var(--brand-bar);}

.header-actions{display:none;align-items:center;gap:20px;}
.login-link{font-size:14px;font-weight:500;}
.site-header .link-soon{color:inherit;opacity:.62;}
.site-header .soon-tag{padding:0;border:0;font-size:11px;letter-spacing:.06em;opacity:1;}
.site-header .soon-tag::before{content:"· ";}
.btn-header{min-height:44px;padding:0 18px 0 22px;font-size:14px;}
.btn-arrow{width:16px;height:16px;transition:transform .35s cubic-bezier(.16,1,.3,1);}
.btn:hover .btn-arrow{transform:translateX(3px);}
/* the section links need room in every language (German, Russian and French run long): below 1200px they live
   in the menu sheet, and the header keeps the language switch and the main button */
@media (min-width:900px){.header-actions{display:flex;}}
@media (min-width:1200px){.nav-links{display:flex;}}
@media (min-width:900px) and (max-width:1199px){.header-actions{margin-inline-start:auto;}}
.nav-links a,.btn-header{white-space:nowrap;}

.link-soon{background:none;border:none;padding:0;margin:0;font:inherit;color:var(--ink-mute);cursor:not-allowed;text-decoration:none;display:inline-flex;align-items:center;gap:7px;}
/* soon-tag adapts to whatever text color it lands in (plain link, or white-on-brand / dark-on-cream button) */
.soon-tag{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:inherit;opacity:.85;border:1px solid currentColor;border-radius:999px;padding:2px 8px;}
.btn-text.link-soon{color:var(--ink-mute);}
/* an unavailable action stays readable: a quiet outline, full-strength text, the Soon tag carrying the state */
.btn:disabled,.btn:disabled:hover{opacity:1;cursor:default;background:transparent;color:var(--ink-soft);border-color:var(--sand);}
/* menu toggle: two hairlines that fold into an X (the open state lives on the sheet's own close button) */
.menu-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;border:1px solid color-mix(in srgb,currentColor 24%,transparent);background:transparent;color:inherit;}
.menu-lines{position:relative;display:block;width:18px;height:9px;}
.menu-lines span{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.16,1,.3,1),top .35s cubic-bezier(.16,1,.3,1);}
.menu-lines span:first-child{top:0;}
.menu-lines span:last-child{top:calc(100% - 1.5px);}
.menu-toggle.is-open .menu-lines span{top:calc(50% - .75px);}
.menu-toggle.is-open .menu-lines span:first-child{transform:rotate(45deg);}
.menu-toggle.is-open .menu-lines span:last-child{transform:rotate(-45deg);}
@media (min-width:1200px){.menu-toggle{display:none;}}

/* mobile menu: the hero's ink stage; serif links settle in one after another */
html.menu-open{overflow:hidden;}
.mobile-sheet{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;padding:13px 13px 32px;background:var(--ink);color:var(--cream-card);overflow-y:auto;}
.mobile-sheet.open{display:flex;animation:sheet-in .4s cubic-bezier(.16,1,.3,1) both;}
.mobile-sheet-top{display:flex;justify-content:space-between;align-items:center;height:60px;padding:0 8px 0 22px;margin-bottom:24px;}
.sheet-nav{display:flex;flex-direction:column;padding:0 22px;}
.sheet-nav a{display:block;padding:18px 0;border-bottom:1px solid rgba(255,249,235,.14);font-family:'Source Serif Pro',serif;font-size:34px;line-height:1.1;letter-spacing:-.01em;color:var(--cream-card);text-decoration:none;}
.sheet-nav a:first-child{border-top:1px solid rgba(255,249,235,.14);}
.mobile-sheet.open .sheet-nav a{animation:sheet-link .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(90ms + var(--i,0) * 55ms);}
.mobile-sheet-actions{display:flex;flex-direction:column;gap:20px;margin-top:auto;padding:36px 22px 0;}
.mobile-sheet .btn{width:100%;}
.sheet-soon{display:flex;justify-content:center;gap:28px;}
.mobile-sheet .link-soon{color:rgba(255,249,235,.66);font-size:15px;}
.mobile-sheet a:focus-visible,.mobile-sheet button:focus-visible{outline-color:var(--brand-bar);}
@keyframes sheet-in{from{opacity:0;}to{opacity:1;}}
@keyframes sheet-link{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){.mobile-sheet.open,.mobile-sheet.open .sheet-nav a{animation:none;}.header-bar,.menu-lines span{transition:none;}}

/* hero */
/* v3: the promo film IS the hero. A deep ink stage (the evening, phone-in-hand moment people actually reach for
   a coach) lets the film's white frame read as the one lit object in the room. Copy flanks it on the left; a
   chapter rail on the right mirrors the film's own on-screen captions and seeks to them. No pin, no cloud, no
   scrim: nothing sits on top of the footage except its two controls. The film keeps its native 618:1180 ratio
   at every width, so the coach's face is never cropped. */
/* impeccable-disable-next-line clipped-overflow-container -- the film's floor light is meant to stop at the stage edge */
.hero{padding:85px 0 0;background:var(--ink);color:var(--cream-card);overflow:hidden;overflow:clip;}
.hero ::selection{background:var(--brand-bar);color:var(--ink);}
.hero-stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "film" "chapters";gap:40px;
  max-width:1440px;padding-top:clamp(40px,7vh,72px);padding-bottom:calc(42px + clamp(56px,9vh,96px));}
.hero-copy{grid-area:copy;max-width:520px;}
.hero h1{color:var(--cream-card);font-size:40px;line-height:1.06;letter-spacing:-.02em;margin-bottom:24px;text-wrap:balance;}
@media (min-width:640px){.hero h1{font-size:54px;}}
/* on ink, the brand orange drops under 3:1; the lighter brand-bar orange carries the accent word instead */
.hero .ew::after{color:var(--brand-bar);}
.hero .lede{color:rgba(255,249,235,.74);max-width:44ch;}
/* shared with the final CTA section */
.hero-cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px;align-items:center;}
.hero .hero-cta-row{margin-top:36px;column-gap:28px;}
.hero .btn-text.link-soon{color:rgba(255,249,235,.62);}
.hero a:focus-visible,.hero button:focus-visible{outline-color:var(--brand-bar);}

/* the film: sized by height on desktop, by width on mobile, always at its own ratio */
.hero-film{grid-area:film;position:relative;isolation:isolate;justify-self:center;width:min(100%,340px);aspect-ratio:618/1180;}
/* a hairline mount a few px off the film, like a framed print */
.hero-film::before{content:"";position:absolute;inset:-11px;border:1px solid rgba(255,249,235,.16);border-radius:36px;pointer-events:none;}
/* the lit screen spilling warm light onto the surface beneath it */
.hero-film::after{content:"";position:absolute;left:-45%;right:-45%;bottom:-16%;height:46%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(247,144,8,.26),rgba(247,144,8,.08) 55%,rgba(247,144,8,0));}
/* .hero-video-bg + .hero-video-controls are reparented into the first-visit modal, so their base rules below
   stay modal-safe; everything hero-specific is scoped under .hero-film. */
.hero-video-bg{position:absolute;inset:0;overflow:hidden;z-index:0;display:flex;justify-content:center;}
.hero-video-bg video{display:block;height:100%;width:auto;max-width:100%;aspect-ratio:618/1180;object-fit:cover;object-position:center top;}
.hero-film .hero-video-bg{border-radius:26px;background:#fff;box-shadow:0 36px 72px -28px rgba(0,0,0,.6),0 12px 28px -12px rgba(0,0,0,.35);}
.hero-film .hero-video-bg video{width:100%;height:100%;}
/* in the hero the controls sit under the mount, off the footage, so they never cover the film's own captions */
.hero-film{margin-bottom:64px;}
.hero-film .hero-video-controls{top:calc(100% + 22px);bottom:auto;right:50%;transform:translateX(50%);}
.hero-film .video-ctrl{background:rgba(255,249,235,.1);color:var(--cream-card);box-shadow:none;border:1px solid rgba(255,249,235,.22);}
.hero-film .video-ctrl:hover{background:rgba(255,249,235,.2);}
/* the one way into the film: an ink disc over the poster frame, with its length under it. Shown whenever the
   film is not playing; hidden (and out of the tab order) while it plays. */
/* sits over the chat bubbles, above the coach's face disc, so the face on the poster frame stays uncovered */
.film-play{position:absolute;left:50%;top:36%;z-index:2;display:flex;flex-direction:row;align-items:center;gap:12px;padding:0;border:0;background:none;color:var(--ink);
  transform:translate(-50%,-50%);transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1),visibility 0s;}
.film-play-disc{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:var(--ink);color:var(--cream-card);
  box-shadow:0 18px 40px -14px rgba(44,32,23,.55);transition:transform .3s cubic-bezier(.16,1,.3,1),background-color .3s ease;}
.film-play-disc .icon{width:30px;height:30px;margin-left:4px;}
.film-play:hover .film-play-disc{transform:scale(1.06);background:var(--brand);}
/* the length hangs off the disc's right side so the disc itself stays exactly centred */
.film-play-time{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);padding:4px 10px;border-radius:999px;background:rgba(255,249,235,.94);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);box-shadow:0 6px 16px -8px rgba(44,32,23,.35);}
/* the length only tells the truth before the first play; mid-film it would be the wrong number */
.hero-video-bg[data-film="paused"] .film-play-time{display:none;}
.film-play:focus-visible{outline:none;}
.film-play:focus-visible .film-play-disc{outline:2px solid var(--brand-bar);outline-offset:4px;}
.hero-video-bg.is-playing .film-play{opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.9);
  transition:opacity .25s ease,transform .25s ease,visibility 0s .25s;}
@media (prefers-reduced-motion: reduce){.film-play,.film-play-disc{transition:none;}}
.hero-video-controls{position:absolute;right:16px;bottom:16px;z-index:3;display:flex;gap:10px;transition:opacity .3s ease,visibility 0s;}
/* before the first play there is nothing to control yet: only the big play button shows */
.hero-video-controls[data-film="idle"]{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s;}
/* paused: the big play button is the way back in, so the small play/pause toggle steps aside (sound stays) */
.hero-video-controls[data-film="paused"] #playToggle{display:none;}
.hero-video-bg video{cursor:pointer;}
.video-ctrl{width:44px;height:44px;border-radius:50%;border:none;
  background:rgba(255,249,235,.9);backdrop-filter:blur(4px);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);}
.video-ctrl:hover{background:#fff;}
.video-ctrl .icon{width:20px;height:20px;}
.video-ctrl .icon-unmuted,.video-ctrl .icon-pause{display:none;}
#soundToggle[aria-pressed="true"] .icon-muted{display:none;}
#soundToggle[aria-pressed="true"] .icon-unmuted{display:block;}
#playToggle[aria-pressed="true"] .icon-play{display:none;}
#playToggle[aria-pressed="true"] .icon-pause{display:block;}

/* chapter rail: the film's captions as a quiet index. The active chapter lights up and its hairline fills
   with the chapter's progress (--cp, written by main.js). Timecodes are tabular so the column never jitters. */
.hero-chapters{grid-area:chapters;list-style:none;margin:0;padding:0;width:100%;max-width:520px;justify-self:center;}
.hero-chapters li{position:relative;border-top:1px solid rgba(255,249,235,.14);}
.hero-chapters li:last-child{border-bottom:1px solid rgba(255,249,235,.14);}
.hero-chapters button{display:grid;grid-template-columns:52px 1fr;align-items:baseline;width:100%;min-height:48px;padding:13px 0;
  background:none;border:0;text-align:left;color:rgba(255,249,235,.58);font-family:'Source Serif Pro',serif;font-size:17px;line-height:1.35;
  transition:color .35s cubic-bezier(.16,1,.3,1);}
.hero-chapters button:hover{color:rgba(255,249,235,.9);}
.ch-time{font-family:'Noto Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:rgba(255,249,235,.58);transition:color .35s cubic-bezier(.16,1,.3,1);}
.ch-bar{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--brand-bar);transform-origin:left center;transform:scaleX(var(--cp,0));}
.hero-chapters button[aria-current="true"]{color:var(--cream-card);}
.hero-chapters button[aria-current="true"] .ch-time{color:var(--brand-bar);}

/* the one authored moment: the film settles into focus as the page opens (from already-visible, never from 0) */
@keyframes hero-film-in{from{opacity:.35;transform:translateY(22px) scale(.97);filter:blur(6px);}to{opacity:1;transform:none;filter:none;}}
.js-anim .hero-film{animation:hero-film-in 1.2s cubic-bezier(.16,1,.3,1) both;}

@media (min-width:960px){
  .hero-stage{min-height:calc(100vh - 85px);grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy film" "chapters film";
    column-gap:clamp(48px,6vw,96px);row-gap:44px;align-content:center;align-items:end;}
  .hero-copy{align-self:end;}
  .hero-chapters{align-self:start;justify-self:start;max-width:440px;}
  /* as large as the first screen allows (header + a 28px breath above, 28px below), up to the film's native 1180px;
     its controls move to the film's left edge so they cost no height */
  .hero-stage{padding-top:28px;}
  .hero-film{width:auto;height:min(calc(100vh - 85px - 56px),1180px);min-height:460px;align-self:center;margin-bottom:0;}
  .hero-film .hero-video-controls{top:auto;bottom:0;right:calc(100% + 22px);transform:none;flex-direction:column;}
  .hero h1{font-size:clamp(46px,4.4vw,62px);}
}
@supports (height:100svh){@media (min-width:960px){
  .hero-stage{min-height:calc(100svh - 85px);}
  .hero-film{height:min(calc(100svh - 85px - 56px),1180px);}
}}
/* wide screens: a triptych, copy | film | chapters */
@media (min-width:1200px){
  .hero-stage{grid-template-columns:minmax(0,1fr) auto minmax(220px,.6fr);grid-template-areas:"copy film chapters";align-items:center;}
  .hero-copy{align-self:center;}
  .hero-chapters{align-self:center;}
  .hero h1{font-size:clamp(46px,3.9vw,60px);}
}
/* the next section rises over the stage's lower edge, so its rounded top is framed by ink, not page white */
.hero + .hand-off{margin-top:-42px;z-index:2;}

/* peak: the reply */
/* v2: one column, not two — a full-width display headline, then the chat panel offset to the right and
   narrowed, so it reads as a floating piece of evidence under the statement rather than a paired half. */
.peak{background:var(--cream-card);}
/* v4: a two-column stage. The statement holds the left, the conversation plays on the right, so the whole
   exchange fits one screen (no headline pushed under the header, no dead lower-left quadrant). */
.peak-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:48px;align-content:center;}
.peak-copy{max-width:560px;}
.peak-copy h2{font-size:clamp(40px,5vw,72px);line-height:1.04;letter-spacing:-.02em;text-wrap:balance;}
.peak-copy .lede{margin-top:22px;max-width:40ch;}
@media (min-width:960px){
  .peak-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,6vw,96px);align-items:center;}
}
/* v3: no panel. The exchange is set on the page like a transcript: the visitor's words in their app bubble, the
   coach's replies in the display serif, so the reply itself is the typographic event of the section. */
.peak-panel{max-width:600px;width:100%;justify-self:end;}
/* the header hairline doubles as the conversation's progress, the same device as the hero's chapter rail */
.peak-panel-head{position:relative;display:flex;align-items:center;gap:12px;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--sand);}
html.fx .peak-panel-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--brand-bar);transform-origin:left center;transform:scaleX(var(--fv,0));}
.avatar-disc{width:38px;height:38px;border-radius:50%;background:var(--cream-bubble);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.avatar-disc img{width:100%;height:100%;object-fit:cover;}
.peak-panel-head .name{font-weight:600;font-size:15px;}
.peak-panel-head .status{font-size:13px;color:var(--ink-soft);}
.chat-thread{display:flex;flex-direction:column;gap:22px;min-height:300px;}
.chat-row{display:flex;}
.chat-row--user{justify-content:flex-end;}
.chat-row--coach{justify-content:flex-start;flex-direction:column;gap:6px;align-items:flex-start;}
.bubble{padding:12px 18px;border-radius:18px;font-size:16px;}
.bubble-user{background:var(--cream-bubble);color:var(--ink);border-radius:18px 18px 4px 18px;}
.bubble-coach{padding:0;border-radius:0;background:none;color:var(--ink);font-family:'Source Serif Pro',serif;font-size:clamp(20px,2vw,24px);line-height:1.4;max-width:30ch;}
/* the visitor's own word, underlined the moment the headline answers it */
.echo{background:linear-gradient(var(--brand),var(--brand)) no-repeat left calc(100% - 1px) / 100% 2px;padding-bottom:2px;}
html.fx body.js-anim .echo[data-fx-win]{background-size:calc(var(--fv,0) * 100%) 2px;}
html:not(.fx) body.js-anim .echo{background-size:0 2px;transition:background-size .7s cubic-bezier(.16,1,.3,1);}
html:not(.fx) body.js-anim .echo.is-visible{background-size:100% 2px;}

/* understanding: v2 — the radar is the dominant element; the insight card overlaps its bottom-left corner
   like a note pinned to it, instead of sitting in a clean equal-width column beside it. */
.understanding-grid{display:flex;flex-direction:column;gap:32px;}
@media (min-width:960px){.understanding-grid{display:block;position:relative;}}
.radar-wrap{width:100%;}
/* v2.1: right-align the chart instead of centering it, so the card has a guaranteed-empty lane on the
   left to overlap into — the centered version left only ~200px of clearance, which the card (400px) blew
   straight through, burying the chart's own "Communication" axis and data. */
@media (min-width:960px){.radar-wrap{max-width:580px;margin:0 0 0 auto;}}
.dynamic-card{background:var(--cream-card);border-radius:42px 18px 42px 18px;padding:32px;box-shadow:var(--shadow-soft);}
@media (min-width:960px){.dynamic-card{position:absolute;left:0;bottom:-40px;max-width:360px;z-index:1;}}
/* the shadow only earns its place where the card overlaps the chart; stacked on mobile it is a flat note */
@media (max-width:959px){.dynamic-card{box-shadow:none;}}
.dynamic-chip{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--brand);color:var(--brand);font-size:13px;font-weight:600;border-radius:999px;padding:6px 14px;margin-bottom:18px;}
.dynamic-card h3{font-family:'Source Serif Pro',serif;font-size:24px;font-weight:400;margin:0 0 12px;}
.dynamic-card p{color:var(--ink-soft);font-size:15px;margin-bottom:8px;}
.radar-wrap{display:flex;flex-direction:column;align-items:center;}
.radar-legend{display:flex;gap:22px;margin-top:18px;flex-wrap:wrap;justify-content:center;}
.legend-item{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft);}
.legend-dot{width:10px;height:10px;border-radius:50%;}

/* modes: v3 — an editorial index, the same language as the hero's chapter rail: hairline rows, serif names,
   inline line icons with no tile behind them. On desktop the intro holds still while the list passes it. */
.modes-grid{display:grid;row-gap:40px;}
.modes-intro .lede{margin-top:18px;}
@media (min-width:900px){
  .modes-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px,7vw,112px);align-items:start;}
  .modes-intro{position:sticky;top:calc(85px + 64px);}
}
.modes-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--sand);}
.mode-row{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:18px;row-gap:6px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--sand);}
.mode-row .icon{grid-row:1 / span 2;align-self:start;width:24px;height:24px;margin-top:5px;color:var(--brand);}
.mode-row h3{margin:0;font-family:'Source Serif Pro',serif;font-weight:400;font-size:24px;line-height:1.3;color:var(--ink);text-wrap:balance;}
.mode-row p{grid-column:2;font-size:15px;line-height:1.55;color:var(--ink-soft);max-width:40ch;}
@media (min-width:1100px){
  .mode-row{grid-template-columns:24px minmax(0,1.2fr) minmax(0,1fr);column-gap:28px;padding:26px 0;}
  .mode-row .icon{grid-row:auto;}
  .mode-row p{grid-column:auto;}
  .mode-row h3{font-size:26px;}
}

/* journey: v2 — the trend card runs near full width; the program card becomes a badge overlapping its
   bottom-right corner, mirroring understanding's overlap on the opposite side for rhythm. */
.journey-grid{display:flex;flex-direction:column;gap:24px;}
@media (min-width:900px){.journey-grid{display:block;position:relative;}}
.trend-card{background:var(--cream-card);border-radius:42px 18px 42px 18px;padding:28px;}
/* v2.1: narrower than the original 760px so the badge card (300px) has a real gap to sit in instead of
   clipping into the tasks-row's "View all" tag and the Negative percentage at the card's own right edge. */
@media (min-width:900px){.trend-card{max-width:680px;}}
.program-card{max-width:300px;}
@media (min-width:900px){.journey-grid .program-card{position:absolute;right:0;bottom:-24px;border:0;padding:27px;box-shadow:var(--shadow-soft);z-index:1;}}
.trend-range{display:flex;gap:20px;margin:0 0 24px;font-size:13px;font-weight:600;color:var(--ink-soft);}
.trend-range .is-on{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:7px;}
.trend-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.trend-row:last-child{margin-bottom:0;}
.trend-label{width:76px;font-size:13px;color:var(--ink-soft);flex-shrink:0;}
.trend-track{flex-grow:1;height:10px;border-radius:999px;background:var(--sand);overflow:hidden;}
.trend-value{width:40px;font-size:13px;color:var(--ink-soft);text-align:right;flex-shrink:0;}
.program-card{background:#fff;border:1px solid var(--sand);border-radius:42px 18px 42px 18px;padding:26px;display:flex;flex-direction:column;gap:14px;}
.program-card h3{margin:0;font-family:'Source Serif Pro',serif;font-weight:400;font-size:22px;line-height:1.3;}
.program-step{display:block;margin-top:4px;font-family:'Noto Sans',sans-serif;font-size:13px;font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.program-card p{font-size:14px;color:var(--ink-soft);}
.program-card .mock-link{margin-top:auto;}
/* links inside the product illustration are drawn, not live: ink text, brand underline, no pointer */
.mock-link{font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:4px;}
.tasks-row{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:20px;border-top:1px solid var(--sand);font-size:14px;color:var(--ink-soft);}

/* trust: v2 — the quietest section stays quiet. No card, no image: one big plain-spoken statement, then a
   small supporting note beneath it — not two equal-weight paragraphs sharing a card. */
.trust{background:var(--surface);}
.trust-limits{margin-bottom:56px;}
/* one short line at the standard section-heading size; the detail lives in the paragraph under it */
.trust-limits .trust-lead{font-size:32px;line-height:1.15;letter-spacing:-.01em;color:var(--ink);max-width:22ch;margin-bottom:16px;text-wrap:balance;}
@media (min-width:640px){.trust-limits .trust-lead{font-size:40px;}}
.trust-limits p{color:var(--ink-soft);font-size:17px;line-height:1.6;max-width:56ch;}
.trust-list{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:48px;}
@media (min-width:640px){.trust-list{grid-template-columns:1fr 1fr;}}
.trust-item{display:flex;gap:14px;align-items:flex-start;}
.trust-item .icon{color:var(--brand);margin-top:2px;}
.trust-item p{font-size:15px;color:var(--ink-soft);}
.crisis-note{max-width:680px;background:var(--cream-chip);border-radius:32px 14px 32px 14px;padding:24px 28px;}
.crisis-note-heading{font-weight:600;font-size:17px;color:var(--ink);min-height:44px;display:flex;align-items:center;margin-bottom:2px;}
.crisis-note p{font-size:15px;color:var(--ink-soft);margin-bottom:10px;}
.crisis-note p:last-child{margin-bottom:0;}
.crisis-detail-body{font-size:14px;color:var(--ink-soft);max-width:56ch;}

/* faq */
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--sand);}
.faq-item{border-bottom:1px solid var(--sand);}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;cursor:pointer;font-size:17px;font-weight:500;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .icon{color:var(--brand);flex-shrink:0;transition:transform .3s ease-out;}
.faq-item[open] summary .icon{transform:rotate(180deg);}
.faq-answer{padding:0 32px 24px 4px;color:var(--ink-soft);font-size:15px;max-width:64ch;}

/* final cta: v2 — the disc becomes large, bleeding past the edge like a half-background element, echoing the
   hero's imagery-plus-overlaid-text language as an intentional bookend instead of a purely centered stack. */
.final-cta{background:var(--cream-card);}
.final-grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px;}
.final-copy{display:contents;}
@media (min-width:960px){
  .final-grid{flex-direction:row;align-items:center;justify-content:space-between;text-align:left;gap:40px;}
  .final-copy{display:flex;flex-direction:column;align-items:flex-start;gap:28px;max-width:480px;}
  .final-grid .hero-cta-row{justify-content:flex-start;}
  .final-grid .safety-note{margin:0;}
}
/* the app's own portrait disc: cream circle, cloud wash along the lower edge, portrait in front */
.final-disc{position:relative;width:min(72vw,264px);aspect-ratio:1;border-radius:50%;background:var(--cream-bubble);overflow:hidden;flex-shrink:0;}
@media (min-width:960px){.final-disc{width:min(40vw,520px);margin-right:clamp(-48px,-4vw,0px);}}
.final-disc .disc-cloud{position:absolute;left:-12%;bottom:0;width:124%;height:56%;max-width:none;object-fit:cover;object-position:center top;transform:scaleY(-1);opacity:.9;}
.final-disc .disc-face{position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%);}
.safety-note{max-width:52ch;margin:0 auto;}
.safety-note p{font-size:14px;color:var(--ink-soft);margin-bottom:8px;}

/* footer */
.site-footer{border-top:1px solid var(--sand);padding:56px 0 40px;background:var(--surface);}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;margin-bottom:32px;}
.footer-links{display:flex;flex-wrap:wrap;gap:24px;font-size:14px;color:var(--ink-soft);}
.footer-links a{text-decoration:none;}
.footer-links a:hover{color:var(--brand);}
.footer-disclaimer{font-size:13px;color:var(--ink-soft);border-top:1px solid var(--sand);padding-top:24px;max-width:70ch;}

/* ---- section scroll layer -------------------------------------------------------------------------
   html.fx is set by js/main.js on desktop widths with motion allowed (the same gate as the hero layer).
   One motion language throughout: things rise about 18px into place while fading in, on progress written
   per frame as --fv (0..1) from data-fx-win="from to" (or "in0 in1 out0 out1"). Nothing bounces.
   Section by section:  The reply = pinned, the chat is played by scroll   Understanding = the radar draws in
   Modes = the index rows settle in turn   Journey = the bars fill   Trust = lines settle one at a
   time, the stillest section   FAQ = nothing   Final = the cloud returns and the portrait rises out of it.
   Without .fx (mobile, reduced motion, no JS) none of this applies and the IO reveals above still run. */
.final-cloud{display:none;}

html.fx .fx-act{padding-top:0;padding-bottom:0;}
/* was 110vh -- with no "keep scrolling" affordance, a normal-paced scroll stalled partway through the chat
   reveal and read as an unfinished/half animation rather than a still-in-progress one. Shorter travel means
   the full 4-message exchange completes within a more ordinary scroll distance. */
#peak{--fx-travel:75vh;}
#cta{--fx-travel:80vh;}
html.fx .fx-act[data-fx="pin"]{height:calc(100vh - 85px + var(--fx-travel,100vh));}
@supports (height:100svh){html.fx .fx-act[data-fx="pin"]{height:calc(100svh - 85px + var(--fx-travel,100vh));}}
html.fx .fx-stage{position:sticky;top:85px;height:calc(100vh - 85px);}
@supports (height:100svh){html.fx .fx-stage{height:calc(100svh - 85px);}}
html.fx .final-stage{display:flex;align-items:center;justify-content:center;overflow:clip;}

/* the shared rise. The selector is long on purpose: it must beat the entrance-reveal rules further up. */
html.fx body.js-anim .fx-rise[data-fx-win]{opacity:var(--fv,0);transform:translateY(calc((1 - var(--fv,0)) * 18px));transition:none;}

/* The reply: layout is fixed from the start (messages are only faded, never added), so nothing jumps.
   The typing dots sit on top of the reply they precede. */
html.fx .chat-row--coach{position:relative;}
html.fx body.js-anim .typing-indicator[data-fx-win]{display:flex;position:absolute;left:0;top:0;opacity:var(--fv,0);}
html.fx body.js-anim .ew[data-fx-win]::after{opacity:var(--fv,0);transition:none;}

/* Understanding: the two polygons grow out of the centre. */
html.fx body.js-anim .radar-poly[data-fx-win]{opacity:calc(var(--fv,0) * .85);transform:scale(calc(.3 + var(--fv,0) * .7));transition:none;}


/* Journey: the fills grow from the left. */
html.fx body.js-anim .bar-fill[data-fx-win]{transform:scaleX(var(--fv,0));transition:none;}

/* Final: the hero's cloud returns from below, the app's portrait disc rises out of it. */
html.fx .final-cloud{display:block;position:absolute;left:-20%;bottom:0;width:140%;height:70%;max-width:none;object-fit:cover;object-position:center top;pointer-events:none;z-index:0;
  opacity:calc(var(--fv,0) * .72);transform:scaleY(-1) translateY(calc((1 - var(--fv,0)) * -45%));
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 55%,transparent 100%);}
html.fx .final-grid{position:relative;z-index:1;}
html.fx body.js-anim .fx-disc[data-fx-win]{opacity:var(--fv,0);transform:translateY(calc((1 - var(--fv,0)) * 70px)) scale(calc(.92 + var(--fv,0) * .08));transition:none;}

/* ---- languages -------------------------------------------------------------------------------------
   The switcher is a <details> menu built by scripts/build.mjs; js/lang.js remembers the choice. */
.lang-switch{position:relative;}
.lang-switch summary{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border-radius:12px;font-size:13px;font-weight:600;letter-spacing:.04em;color:inherit;cursor:pointer;list-style:none;opacity:.78;transition:opacity .25s ease;}
.lang-switch summary::-webkit-details-marker{display:none;}
.lang-switch summary:hover,.lang-switch[open] summary{opacity:1;}
.lang-switch summary .icon{width:18px;height:18px;}
.lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:50;min-width:172px;margin:0;padding:6px;list-style:none;background:var(--cream-card);border:1px solid var(--sand);border-radius:14px;box-shadow:var(--shadow-soft);}
.lang-option{display:block;padding:9px 12px;border-radius:9px;font-size:14px;color:var(--ink);text-decoration:none;}
.lang-option:hover{background:var(--cream-chip);}
.lang-option[aria-current]{font-weight:600;background:var(--cream-bubble);}
.lang-links{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px;}
.lang-link{color:inherit;text-decoration:none;opacity:.72;}
.lang-link:hover,.lang-link[aria-current]{opacity:1;}
.lang-link[aria-current]{font-weight:600;text-decoration:underline;text-underline-offset:4px;}
.site-footer .lang-links{margin-bottom:24px;color:var(--ink-soft);}
.mobile-sheet .lang-links{justify-content:center;color:var(--cream-card);}

/* Arabic and Hebrew: the site fonts have no glyphs for them, so these pages use the system's own fonts,
   and the emphasis words lose their italic (neither script has one) */
:lang(ar) body,:lang(ar) h1,:lang(ar) h2,:lang(ar) .ew,:lang(ar) .sheet-nav a,:lang(ar) .hero-chapters button,:lang(ar) .bubble-coach{font-family:'Segoe UI',Tahoma,'Noto Sans Arabic','Geeza Pro',Arial,sans-serif;}
:lang(he) body,:lang(he) h1,:lang(he) h2,:lang(he) .ew,:lang(he) .sheet-nav a,:lang(he) .hero-chapters button,:lang(he) .bubble-coach{font-family:'Segoe UI',Arial,'Noto Sans Hebrew','Arial Hebrew',sans-serif;}
:lang(ar) .ew,:lang(he) .ew,:lang(ar) .final-tagline,:lang(he) .final-tagline,:lang(ar) .pt-greet,:lang(he) .pt-greet,:lang(ar) i,:lang(he) i{font-style:normal;}
:lang(ar) h1,:lang(ar) h2,:lang(he) h1,:lang(he) h2{letter-spacing:0;}
/* the brand mark always reads "Labela." left to right */
.logo{direction:ltr;}

/* ---- right-to-left (Arabic, Hebrew) ----------------------------------------------------------------
   Flex and grid rows mirror on their own; these are the places with a fixed left/right. */
[dir=rtl] .skip-link{left:auto;right:-9999px;border-radius:0 0 0 8px;}
[dir=rtl] .skip-link:focus{right:0;}
[dir=rtl] .header-bar,[dir=rtl] .mobile-sheet-top{padding:0 22px 0 8px;}
[dir=rtl] .btn-arrow{transform:scaleX(-1);}
[dir=rtl] .btn:hover .btn-arrow{transform:scaleX(-1) translateX(3px);}
[dir=rtl] .bar-fill,[dir=rtl] .ch-bar,[dir=rtl] .nav-links a::after,[dir=rtl] .pt-progress span,html.fx[dir=rtl] .peak-panel-head::after{transform-origin:right center;}
html.fx[dir=rtl] .progress-rail{left:auto;right:20px;}
[dir=rtl] .video-modal-close{right:auto;left:-16px;}
[dir=rtl] .hero-chapters button{text-align:right;}
@media (min-width:960px){[dir=rtl] .hero-film .hero-video-controls{right:auto;left:calc(100% + 22px);}}
[dir=rtl] .bubble-user{border-radius:18px 18px 18px 4px;}
[dir=rtl] .typing-indicator{border-radius:18px 18px 4px 18px;}
html.fx[dir=rtl] body.js-anim .typing-indicator[data-fx-win]{left:auto;right:0;}
[dir=rtl] .dynamic-card,[dir=rtl] .trend-card,[dir=rtl] .persona-sample,[dir=rtl] .pt-card{border-radius:18px 42px 18px 42px;}
[dir=rtl] .crisis-note{border-radius:14px 32px 14px 32px;}
@media (min-width:960px){[dir=rtl] .dynamic-card{left:auto;right:0;}[dir=rtl] .radar-wrap{margin:0 auto 0 0;}}
@media (min-width:960px){[dir=rtl] .final-grid{text-align:right;}[dir=rtl] .final-disc{margin-right:0;margin-left:clamp(-48px,-4vw,0px);}}
[dir=rtl] .how-arrow::after{right:auto;left:-1px;transform:rotate(-135deg);}
@media (max-width:639px){[dir=rtl] .how-arrow{margin-left:0;margin-right:24px;}[dir=rtl] .how-arrow::after{left:auto;right:-3.5px;transform:rotate(135deg);}}
[dir=rtl] .fact:nth-child(odd){padding-right:0;padding-left:20px;border-right:0;border-left:1px solid var(--dotgold);}
[dir=rtl] .fact:nth-child(even){padding-left:0;padding-right:24px;}
[dir=rtl] .research-source a,[dir=rtl] .trust-item a{margin-left:0;margin-right:4px;}
[dir=rtl] .waitlist{text-align:right;}
[dir=rtl] .btn-header--compact{margin-left:-12px;margin-right:auto;}
[dir=rtl] .pt-stage{text-align:left;}
[dir=rtl] .pt-nav .btn-primary{margin-left:0;margin-right:auto;}