/* Fertilita Website tokens — single source for the site.
   Colour, space, radius, shadow, layout and z-index are taken unchanged from the
   Fertilita design system (Website V1, tokens.css). Two documented deviations:
   1. --font-sans is Inter 400/500 (briefing 12.11.2026) instead of Commissioner.
   2. The motion family below extends the V1 motion limits for the hero stage and
      product scenes (briefing section 3). See docs/MOTION.md. */
@font-face { font-family: Fraunces; font-weight: 300; font-style: normal; font-display: swap; src: url(/assets/fonts/Fraunces-Light.woff) format("woff"); }
@font-face { font-family: Inter; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/Inter-Regular.woff) format("woff"); }
@font-face { font-family: Inter; font-weight: 500 600; font-style: normal; font-display: swap; src: url(/assets/fonts/Inter-Medium.woff) format("woff"); }

:root {
  --ft-color-canvas: #faf7f5;
  --ft-color-surface: #fffcfa;
  --ft-color-subtle: #fdf9f7;
  --ft-color-mist: #f6edf1;
  --ft-color-soft: #eddae1;
  --ft-color-brand-berry: #b65b7f;
  --ft-color-brand-deep: #8f4965;
  --ft-color-brand-strong-accent: #db608e;
  --ft-color-decorative: #a89b94;
  --ft-color-text-primary: #4a3f3a;
  --ft-color-text-secondary: #6f625b;
  --ft-color-text-muted: #7d6e66;
  --ft-color-action-default: var(--ft-color-brand-deep);
  --ft-color-action-hover: #783c54;
  --ft-color-action-pressed: #623146;
  --ft-color-on-action: #fffcfa;
  --ft-color-focus: var(--ft-color-brand-deep);
  --ft-color-border-subtle: #e5d8d2;
  --ft-color-border-control: #9b8980;
  --ft-color-success-text: #38664f; --ft-color-success-surface: #edf5ef;
  --ft-color-warning-text: #80541f; --ft-color-warning-surface: #fbf1df;
  --ft-color-error-text: #a33c4a; --ft-color-error-surface: #fbecef;
  --ft-color-info-text: #405f79; --ft-color-info-surface: #eef2f7;
  --ft-shadow-card: 0 4px 16px rgba(74, 63, 58, .05);
  --ft-shadow-elevated: 0 16px 40px rgba(74, 63, 58, .1);
  --ft-shadow-overlay: 0 24px 64px rgba(74, 63, 58, .16);

  --ft-space-1: 4px; --ft-space-2: 8px; --ft-space-3: 12px; --ft-space-4: 16px; --ft-space-5: 20px;
  --ft-space-6: 24px; --ft-space-8: 32px; --ft-space-10: 40px; --ft-space-12: 48px; --ft-space-16: 64px;
  --ft-space-20: 80px; --ft-space-24: 96px; --ft-space-32: 128px;
  --ft-radius-small: 8px; --ft-radius-control: 12px; --ft-radius-card: 20px; --ft-radius-feature: 28px; --ft-radius-full: 9999px;
  --ft-container: 1200px; --ft-container-media: 1440px;
  --ft-measure: 65ch; --ft-measure-lead: 48ch; --ft-measure-display: 18ch;
  --ft-header-height: 64px;
  --ft-z-base: 0; --ft-z-raised: 10; --ft-z-header: 100; --ft-z-popover: 200; --ft-z-toast: 400;

  --font-display: Fraunces, Georgia, serif;
  --font-sans: Inter, system-ui, sans-serif;
  --ft-h1: clamp(2.5rem, 1.8333rem + 3.3333vw, 4.5rem);
  --ft-h2: clamp(2rem, 1.6667rem + 1.6667vw, 3rem);
  --ft-h3: clamp(1.5rem, 1.3333rem + .8333vw, 2rem);
  --ft-h4: clamp(1.25rem, 1.1667rem + .4167vw, 1.5rem);
  --ft-lead: clamp(1.125rem, 1.0833rem + .2083vw, 1.25rem);
  --ft-body: clamp(1rem, .9583rem + .2083vw, 1.125rem);
  --ft-scene: clamp(1.125rem, 1rem + .55vw, 1.375rem); /* V3: explanatory text in product scenes, 18–22px */

  /* V1 motion */
  --ft-duration-press: 120ms; --ft-duration-standard: 180ms; --ft-duration-panel: 240ms; --ft-duration-enter: 480ms;
  --ft-ease-standard: cubic-bezier(.2, .7, .2, 1); --ft-ease-exit: cubic-bezier(.4, 0, 1, 1);
  /* Stage motion (extension, briefing 12.11.2026) */
  --ft-duration-stage-swap: 90ms;     /* crossfade of in-app text when the day changes */
  --ft-duration-stage-restart: 420ms; /* perceivable fade when the example restarts */
  --ft-parallax-near: 28px;           /* scroll drift of product media */
  --ft-parallax-far: 72px;            /* scroll drift of the stage ring behind the phone */
  --ft-daymark-rise: 16px;            /* entrance travel of a scene's day numeral */

  --margin: var(--ft-space-5);
  --section: var(--ft-space-16);
}
@media (min-width: 640px) { :root { --margin: var(--ft-space-6); } }
@media (min-width: 768px) { :root { --section: var(--ft-space-24); --ft-header-height: 72px; } }
@media (min-width: 1024px) { :root { --margin: var(--ft-space-8); --section: var(--ft-space-32); } }

/* Fertilita website — layout and components. Values come from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ft-header-height) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ft-color-canvas); color: var(--ft-color-text-primary); font: 400 var(--ft-body)/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg { max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
a { color: var(--ft-color-action-default); text-underline-offset: .18em; text-decoration-thickness: 1px; }
@media (hover: hover) { a:hover { color: var(--ft-color-action-hover); } }
:focus-visible { outline: 3px solid var(--ft-color-focus); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -100px; z-index: var(--ft-z-toast); padding: 12px 16px; background: var(--ft-color-surface); border-radius: var(--ft-radius-control); font-weight: 500; }
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--margin), var(--ft-container)); margin-inline: auto; }
.h1 { font: 300 var(--ft-h1)/1.1 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.h2 { font: 300 var(--ft-h2)/1.15 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
.h3 { font: 500 var(--ft-h3)/1.25 var(--font-sans); letter-spacing: -.01em; }
.h4 { font: 500 var(--ft-h4)/1.35 var(--font-sans); letter-spacing: -.005em; }
.h1, .h2, .h3, .h4, .prose h2, .prose h3 { overflow-wrap: break-word; }
/* German compounds may hyphenate on small screens; never in the hero headline */
@media (max-width: 560px) { :lang(de) :is(.page-head .h1, .scene .h2, .scope .h2, .band .h2, .download .h2, .h3, .prose h2, .prose h3, .rows strong) { hyphens: auto; -webkit-hyphens: auto; } }
.lead { font-size: var(--ft-lead); line-height: 1.55; max-width: var(--ft-measure-lead); color: var(--ft-color-text-secondary); text-wrap: pretty; }
.small { font-size: 14px; line-height: 1.5; color: var(--ft-color-text-secondary); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border: 1px solid transparent; border-radius: var(--ft-radius-control); font: 500 16px/1.3 var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color var(--ft-duration-press) var(--ft-ease-standard), border-color var(--ft-duration-press) var(--ft-ease-standard); }
.btn-primary { background: var(--ft-color-action-default); color: var(--ft-color-on-action); }
.btn-secondary { background: transparent; border-color: var(--ft-color-border-control); color: var(--ft-color-action-default); }
@media (hover: hover) { .btn-primary:hover { background: var(--ft-color-action-hover); color: var(--ft-color-on-action); } .btn-secondary:hover { border-color: var(--ft-color-action-default); } }
.btn-primary:active { background: var(--ft-color-action-pressed); }
.textlink { font-weight: 500; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* store actions: neutral text buttons until official badge artwork is configured */
.stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.store { display: inline-grid; align-content: center; gap: 2px; min-height: 64px; min-width: 184px; padding: 10px 24px; border-radius: 16px; background: var(--ft-color-text-primary); color: var(--ft-color-surface); text-decoration: none; font: 500 20px/1.2 var(--font-sans); box-shadow: var(--ft-shadow-elevated); }
.store small { font: 500 13px/1.3 var(--font-sans); color: #e3d6d0; }
@media (max-width: 479px) { .store { min-width: 0; flex: 1 1 0; padding-inline: 16px; font-size: 18px; } }
a.store:hover { background: #2f2725; color: var(--ft-color-surface); }
.store.is-pending small::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #e3b9c9; vertical-align: 1px; }
.store-badge { display: inline-block; line-height: 0; }
.store-badge img { height: 60px; width: auto; }
.stores-note { margin-top: 12px; max-width: 46ch; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: var(--ft-z-header); background: var(--ft-color-canvas); border-bottom: 1px solid transparent; transition: border-color var(--ft-duration-standard) linear; }
.site-header.is-stuck { border-bottom-color: var(--ft-color-border-subtle); }
.site-header .wrap { display: flex; align-items: center; gap: var(--ft-space-6); min-height: var(--ft-header-height); }
.brand { display: block; line-height: 0; flex: none; border-radius: 8px; }
.brand img { height: 44px; width: auto; }
@media (min-width: 768px) { .brand img { height: 48px; } }
.nav { margin-left: auto; display: none; align-items: center; gap: var(--ft-space-2); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ft-color-text-primary); font: 500 16px/1.3 var(--font-sans); text-decoration: none; border-radius: 8px; }
.nav a[aria-current="page"] { color: var(--ft-color-action-default); box-shadow: inset 0 -2px 0 var(--ft-color-brand-berry); border-radius: 0; }
@media (hover: hover) { .nav a:hover { color: var(--ft-color-action-default); } }
.header-actions { display: flex; align-items: center; gap: var(--ft-space-2); margin-left: auto; }
@media (min-width: 1024px) { .nav { display: flex; } .header-actions { margin-left: var(--ft-space-4); } }
.header-cta { display: none; min-height: 44px; padding: 10px 18px; }
@media (min-width: 480px) { .header-cta { display: inline-flex; } }

.menu { position: relative; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 10px; border-radius: 8px; cursor: pointer; font: 500 16px/1.3 var(--font-sans); color: var(--ft-color-text-primary); }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--ft-z-popover); min-width: 220px; padding: 8px; background: var(--ft-color-surface); border: 1px solid var(--ft-color-border-subtle); border-radius: var(--ft-radius-card); box-shadow: var(--ft-shadow-elevated); display: grid; }
.menu-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--ft-color-text-primary); text-decoration: none; font: 500 16px/1.3 var(--font-sans); }
.menu-panel a[aria-current] { background: var(--ft-color-mist); }
@media (hover: hover) { .menu-panel a:hover { background: var(--ft-color-mist); } }
.menu-panel hr { width: 100%; border: 0; border-top: 1px solid var(--ft-color-border-subtle); margin: 6px 0; }
.menu--nav { display: block; }
@media (min-width: 1024px) { .menu--nav { display: none; } }
@media (prefers-reduced-motion: no-preference) { .menu[open] .menu-panel { animation: menu-in var(--ft-duration-panel) var(--ft-ease-standard); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- phone ---------- */
.phone { position: relative; align-self: start; width: var(--phone-w, 300px); padding: calc(var(--phone-w, 300px) * .028); border-radius: calc(var(--phone-w, 300px) * .15); background: #3a302c; box-shadow: var(--ft-shadow-overlay), inset 0 0 0 1px rgba(255, 252, 250, .12); }
.phone-screen { position: relative; overflow: hidden; border-radius: calc(var(--phone-w, 300px) * .124); background: #fcf9f7; line-height: 0; }
.phone-screen > video, .phone-screen > img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 1304; object-fit: cover; }
[data-clip] .phone-screen { isolation: isolate; }
[data-clip] .phone-screen > video { position: absolute; inset: 0; height: 100%; opacity: 0; }
[data-clip].is-live .phone-screen > video { opacity: 1; }
.fa-wrap { padding-top: 9cqw; background: #fcf9f7; }
.clip-btn { position: absolute; right: -14px; bottom: 12%; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--ft-color-border-subtle); border-radius: 50%; background: var(--ft-color-surface); color: var(--ft-color-action-default); box-shadow: var(--ft-shadow-card); cursor: pointer; }
.clip-btn .icon { width: 22px; height: 22px; }
.clip-btn [data-ico] { display: none; }
.clip-btn[data-state="playing"] [data-ico="pause"], .clip-btn[data-state="paused"] [data-ico="play"], .clip-btn[data-state="ended"] [data-ico="replay"] { display: block; }
html:not(.js) .clip-btn { display: none; }

/* ---------- journey: scroll-controlled example cycle ---------- */
.journey { position: relative; }
.journey-grid { display: grid; }
.kicker { font: 500 16px/1.3 var(--font-sans); color: var(--ft-color-action-default); margin-bottom: var(--ft-space-4); }
.journey-intro { padding-block: var(--ft-space-8) var(--ft-space-10); }
.journey-intro .h1 { max-width: 11.5em; hyphens: manual; }
.journey-intro .lead { margin-top: var(--ft-space-6); font-size: var(--ft-scene); max-width: 27em; }
.journey [tabindex="-1"]:focus { outline: none; }
.journey-intro .stores { margin-top: var(--ft-space-8); }
.intro-phone { display: none; }
.scroll-hint { margin-top: var(--ft-space-8); display: flex; align-items: center; gap: 10px; font: 500 16px/1.3 var(--font-sans); color: var(--ft-color-text-secondary); }
html:not(.js) .scroll-hint { display: none; }
@media (prefers-reduced-motion: no-preference) { .scroll-hint .icon { animation: nudge 1.8s var(--ft-ease-standard) 3; } }
@keyframes nudge { 50% { transform: translateY(5px); } }

.journey-stage { --phone-w: min(66vw, calc(42svh / 1.3), 300px); position: sticky; top: var(--ft-header-height); z-index: 5; height: calc(var(--phone-w) * 1.38 + 44px); margin-inline: calc(-1 * var(--margin)); overflow: hidden; background: var(--ft-color-canvas); border-bottom: 1px solid var(--ft-color-border-subtle); display: grid; justify-items: center; align-content: start; }
.journey-stage .phone { z-index: 1; margin-top: calc(var(--phone-w) * -.25); }
.stage-ring { position: absolute; z-index: 0; left: 50%; top: calc(var(--phone-w) * (.028 + .085 + 1.098 - .25)); width: calc(var(--phone-w) * 2.2); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.stage-ring .jr { width: 100%; height: 100%; overflow: visible; }
.stage-ring .jr-marker { display: none; }
.journey-nav { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 var(--margin); background: var(--ft-color-canvas); border-top: 1px solid var(--ft-color-border-subtle); }
.journey-nav ol { display: flex; justify-content: space-between; max-width: 420px; margin: 0 auto; padding: 0; list-style: none; }
.journey-nav a { display: grid; place-items: center; min-width: 36px; height: 44px; padding: 0 4px; color: var(--ft-color-text-secondary); text-decoration: none; font: 500 15px/1 var(--font-sans); font-variant-numeric: tabular-nums; position: relative; }
.journey-nav a::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ft-color-border-subtle); }
.journey-nav a[aria-current] { color: var(--ft-color-text-primary); }
.journey-nav a[aria-current]::after { background: var(--ft-color-brand-berry); width: 18px; margin-left: -9px; border-radius: 3px; transition: width var(--ft-duration-standard) var(--ft-ease-standard), margin var(--ft-duration-standard) var(--ft-ease-standard); }

.journey-chapters { padding-bottom: 12svh; }
.chapter { padding-block: 13svh; display: flex; flex-direction: column; justify-content: center; scroll-margin-top: calc(var(--ft-header-height) + min(66vw, 42svh / 1.3, 300px) * 1.38 + 20px); transition: opacity 240ms linear; }
.js .chapter:not(.is-current) { opacity: .32; }
.chapter-mark { display: grid; grid-template-columns: auto 1fr; column-gap: var(--ft-space-4); align-items: end; margin-bottom: var(--ft-space-5); }
.chapter-mark .daymark-label { grid-column: 1 / -1; }
.daymark-label { font: 500 14px/1.2 var(--font-sans); letter-spacing: .04em; color: var(--ft-color-text-secondary); }
.daymark-num { font: 300 clamp(4.5rem, 3rem + 7vw, 8.5rem)/.82 var(--font-display); letter-spacing: -.04em; color: var(--ft-color-brand-berry); font-variant-numeric: lining-nums; margin-left: -.04em; }
.chapter-phase { font: 500 16px/1.3 var(--font-sans); color: var(--ft-color-text-secondary); padding-bottom: .5em; }
.chapter-h { font: 300 clamp(1.875rem, 1.35rem + 2.3vw, 3.25rem)/1.12 var(--font-display); letter-spacing: -.018em; max-width: 15em; text-wrap: balance; }
.chapter-p { margin-top: var(--ft-space-5); font-size: var(--ft-scene); line-height: 1.5; max-width: 30em; text-wrap: pretty; }
.chapter-app { margin-top: var(--ft-space-5); padding-left: var(--ft-space-4); border-left: 2px solid var(--ft-color-brand-berry); font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.5; max-width: 30em; color: var(--ft-color-text-secondary); }
.chapter-app strong { display: block; font: 500 14px/1.4 var(--font-sans); letter-spacing: .02em; color: var(--ft-color-action-default); }
.journey-note { max-width: 34em; padding-top: var(--ft-space-4); }
.chapter-example { margin-top: var(--ft-space-6); display: grid; gap: var(--ft-space-3); justify-items: start; max-width: 30em; }
.btn--quiet { min-height: 48px; padding: 0 20px; border-radius: var(--ft-radius-full); border: 1px solid var(--ft-color-border-control); background: var(--ft-color-surface); color: var(--ft-color-text-primary); font: 500 16px/1.2 var(--font-sans); cursor: pointer; }
.btn--quiet[aria-pressed="true"] { border-color: var(--ft-color-brand-berry); color: var(--ft-color-action-default); }
@media (hover: hover) { .btn--quiet:hover { border-color: var(--ft-color-brand-berry); } }
@media (min-width: 1024px) {
  .journey-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: var(--ft-space-12); }
  .journey-intro { grid-column: 1; grid-row: 1; min-height: calc(100svh - var(--ft-header-height)); padding-block: var(--ft-space-10); display: flex; flex-direction: column; justify-content: center; }
  .journey-chapters { grid-column: 1; grid-row: 2; padding-bottom: 18svh; }
  .journey-stage { --phone-w: clamp(250px, calc((100svh - var(--ft-header-height) - 108px) / 2.08), 400px); grid-column: 2; grid-row: 1 / span 2; align-self: start; height: calc(100svh - var(--ft-header-height)); margin: 0; overflow: visible; border: 0; background: none; align-content: center; row-gap: var(--ft-space-4); }
  .journey-stage .phone { margin-top: 0; }
  .stage-ring { top: calc(50% - 26px - var(--phone-w) * 1.04 + var(--phone-w) * (.028 + .085 + 1.098)); width: calc(var(--phone-w) * 2.02); -webkit-mask-image: linear-gradient(#000 72%, transparent 86%); mask-image: linear-gradient(#000 72%, transparent 86%); }
  .journey-nav { position: static; padding: 0; border: 0; background: none; width: min(100%, 400px); }
  .journey-nav a { height: 44px; min-width: 44px; }
  .journey-nav a::after { bottom: 4px; }
  .chapter { min-height: 82svh; padding-block: var(--ft-space-10); scroll-margin-top: 22svh; }
  .journey { overflow-x: clip; }
}
.bridge { padding-block: var(--ft-space-16) var(--ft-space-8); }
.bridge-line { font: 300 clamp(2rem, 1.2rem + 3.4vw, 4rem)/1.1 var(--font-display); letter-spacing: -.02em; max-width: 17em; text-wrap: balance; }

/* ---------- scenes ---------- */
.scene { padding-block: calc(var(--section) * .7); }
.scene--tint { background: var(--ft-color-mist); padding-block: var(--section); margin-block: calc(var(--section) * .3); }
.scene .h2, .explorer .h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); max-width: 15em; }
.scene-body { margin-top: var(--ft-space-6); max-width: 32em; font-size: var(--ft-scene); line-height: 1.5; color: var(--ft-color-text-secondary); text-wrap: pretty; }
.scene-body + .scene-body { margin-top: var(--ft-space-4); }
.scene-head { max-width: 46em; }
.scene-grid { display: grid; gap: var(--ft-space-12); align-items: start; }
.scene-media { --phone-w: clamp(250px, 76vw, 340px); display: grid; justify-items: center; }
@media (min-width: 900px) {
  .scene-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--ft-space-16); }
  .scene-grid--flip .scene-media { order: -1; }
  .scene-media { --phone-w: clamp(300px, 28vw, 390px); }
  .scene-media--sticky { position: sticky; top: calc(var(--ft-header-height) + 24px); }
}

/* appointment scene: large crops of the real screens */
.appt { display: grid; gap: var(--ft-space-10); }
.crop { margin: 0; }
.crop-frame { overflow: hidden; border-radius: var(--ft-radius-feature); background: #fcf9f7; box-shadow: var(--ft-shadow-elevated); aspect-ratio: 600 / 590; }
.crop-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.crop figcaption { margin-top: var(--ft-space-3); font: 500 16px/1.4 var(--font-sans); color: var(--ft-color-text-primary); }
@media (min-width: 900px) {
  .appt { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ft-space-8); row-gap: var(--ft-space-16); align-items: center; }
  .appt-a { grid-column: 1 / span 6; }
  .appt-b { grid-column: 8 / span 5; }
  .appt-c { grid-column: 1 / span 5; grid-row: 2; margin-top: calc(-1 * var(--ft-space-24)); }
  .appt-d { grid-column: 7 / span 6; grid-row: 2; }
}

/* partner scene: what you share ↔ what your partner sees */
.share { margin-top: var(--ft-space-12); display: grid; gap: var(--ft-space-4); }
.share-owner, .share-partner { padding: var(--ft-space-6); border-radius: var(--ft-radius-feature); }
.share-owner { background: var(--ft-color-surface); }
.share-partner { background: var(--ft-color-text-primary); color: var(--ft-color-surface); }
.share-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font: 500 var(--ft-h4)/1.3 var(--font-sans); }
.share-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--ft-radius-full); border: 1px solid rgba(255, 252, 250, .4); font: 500 13px/1.3 var(--font-sans); }
.share-badge .icon { width: 16px; height: 16px; }
.share-hint { margin-top: 6px; }
html:not(.js) .share-hint { display: none; }
.share-group { margin-top: var(--ft-space-6); font: 500 14px/1.4 var(--font-sans); color: var(--ft-color-text-secondary); }
.share-partner .share-group, .share-partner .small { color: #d9cdc7; }
.share-list { margin-top: var(--ft-space-2); display: grid; }
.share-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--ft-space-4); min-height: 56px; border-bottom: 1px solid var(--ft-color-border-subtle); font: 500 17px/1.3 var(--font-sans); }
.share-list li:last-child { border-bottom: 0; }
.share-list li > .icon { color: var(--ft-color-action-default); }
.share-list label { cursor: pointer; flex: 1; padding-block: 14px; }
.share-feed { margin-top: var(--ft-space-5); display: grid; gap: 10px; min-height: 19rem; align-content: start; }
.share-feed li { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--ft-radius-control); background: var(--ft-color-surface); color: var(--ft-color-text-primary); }
.share-feed li[hidden] { display: none; }
.share-area { font: 500 13px/1.4 var(--font-sans); color: var(--ft-color-action-default); }
.share-feed strong { font: 500 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.35 var(--font-sans); }
.share-feed li > span:last-child:not(.share-area) { color: var(--ft-color-text-secondary); font-size: 16px; }
.share-partner .view-list--off li { border-color: rgba(255, 252, 250, .45); color: #e9e0db; }
.share-schematic { margin-top: var(--ft-space-6); }
.switch { position: relative; flex: none; width: 52px; height: 32px; }
.switch input { position: absolute; z-index: 1; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); margin: 0; opacity: 0; cursor: pointer; }
.switch span { pointer-events: none; position: absolute; inset: 0; border-radius: var(--ft-radius-full); background: var(--ft-color-surface); border: 1px solid var(--ft-color-border-control); transition: background-color var(--ft-duration-standard) var(--ft-ease-standard); }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--ft-color-border-control); transition: transform var(--ft-duration-standard) var(--ft-ease-standard), background-color var(--ft-duration-standard) linear; }
.switch input:checked + span { background: var(--ft-color-action-default); border-color: var(--ft-color-action-default); }
.switch input:checked + span::after { transform: translateX(20px); background: var(--ft-color-on-action); }
.switch input:focus-visible + span { outline: 3px solid var(--ft-color-focus); outline-offset: 3px; }
.view-list { margin-top: var(--ft-space-2); display: flex; flex-wrap: wrap; gap: 8px; }
.view-list li { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: var(--ft-radius-full); font: 500 15px/1 var(--font-sans); }
.view-list--off li { border: 1px dashed var(--ft-color-border-control); color: var(--ft-color-text-secondary); }
.view-list li[hidden] { display: none; }
@media (min-width: 900px) { .share { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--ft-space-6); align-items: start; } .share-owner, .share-partner { padding: var(--ft-space-10); } .share-partner { margin-top: var(--ft-space-12); } }
.scene-foot { margin-top: var(--ft-space-8); }

/* selfcare: deliberately still */
.scene--calm { background: var(--ft-color-surface); padding-block: var(--section); }
.calm { display: grid; justify-items: center; text-align: center; gap: var(--ft-space-10); }
.calm .h2 { max-width: 13em; }
.calm .scene-body { margin-top: 0; max-width: 30em; }

/* treatment explorer */
.explorer { padding-block: var(--section); background: var(--ft-color-mist); }
.explorer-grid { margin-top: var(--ft-space-10); display: grid; gap: var(--ft-space-8); }
.explorer-pick { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.explorer-opt { position: relative; cursor: pointer; display: inline-flex; align-items: baseline; min-height: 44px; }
.explorer-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.explorer-name { font: 300 clamp(1.625rem, 1.2rem + 2vw, 2.75rem)/1.2 var(--font-display); letter-spacing: -.015em; color: var(--ft-color-decorative); transition: color var(--ft-duration-standard) linear; }
.explorer-opt input:checked + .explorer-name { color: var(--ft-color-brand-deep); box-shadow: inset 0 -2px 0 var(--ft-color-brand-berry); }
.explorer-opt input:focus-visible + .explorer-name { outline: 3px solid var(--ft-color-focus); outline-offset: 3px; border-radius: 4px; }
@media (hover: hover) { .explorer-opt:hover .explorer-name { color: var(--ft-color-text-primary); } }
.explorer-view { display: grid; gap: var(--ft-space-8); align-items: center; }
.explorer-view[hidden] { display: none; }
html:not(.js) .explorer-view[hidden] { display: grid !important; margin-top: var(--ft-space-12); }
html:not(.js) .explorer-pick { display: none; }
.explorer-ring { position: relative; width: min(100%, 500px); aspect-ratio: 1; justify-self: center; }
.explorer-ring { padding: 5%; }
.explorer-ring .jr { width: 100%; height: 100%; overflow: visible; }
.explorer-ring .jr-label { font: 300 15px/1 var(--font-display); fill: var(--ft-color-brand-deep); }
.jr-seg { opacity: .9; transition: opacity var(--ft-duration-standard) linear; }
.jr-seg:nth-child(even) { stroke: #EDB4CA; }
.explorer-center { position: absolute; inset: 24%; display: grid; align-content: center; justify-items: center; text-align: center; gap: 6px; }
.explorer-center-name { font: 300 clamp(1.75rem, 1.3rem + 2vw, 2.75rem)/1.1 var(--font-display); letter-spacing: -.02em; }
.explorer-center-sub { font-size: 15px; line-height: 1.4; color: var(--ft-color-text-secondary); max-width: 14em; }
.explorer-phases { margin: var(--ft-space-2) 0 0; padding: 0; list-style: none; counter-reset: ph; columns: 2 12em; column-gap: var(--ft-space-8); }
.explorer-phases li { break-inside: avoid; counter-increment: ph; display: flex; align-items: baseline; gap: 12px; min-height: 48px; padding-block: 10px; border-top: 1px solid var(--ft-color-soft); font: 500 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.3 var(--font-sans); cursor: default; }
.explorer-phases li::before { content: counter(ph); width: 1.3em; font: 300 1.5rem/1 var(--font-display); color: var(--ft-color-brand-berry); }
.explorer-view .chapter-app { margin-top: var(--ft-space-6); }
.explorer-phases li:is(:hover, :focus-visible) { color: var(--ft-color-brand-deep); outline-offset: 2px; }
.explorer-note { margin-top: var(--ft-space-10); max-width: 40em; }
.explorer-view:has(.explorer-phases li:is(:hover, :focus-visible)) .jr-seg { opacity: .22; }
.explorer-view:has(.explorer-phases li[data-seg="0"]:is(:hover, :focus-visible)) .jr-seg[data-seg="0"], .explorer-view:has(.explorer-phases li[data-seg="1"]:is(:hover, :focus-visible)) .jr-seg[data-seg="1"], .explorer-view:has(.explorer-phases li[data-seg="2"]:is(:hover, :focus-visible)) .jr-seg[data-seg="2"], .explorer-view:has(.explorer-phases li[data-seg="3"]:is(:hover, :focus-visible)) .jr-seg[data-seg="3"], .explorer-view:has(.explorer-phases li[data-seg="4"]:is(:hover, :focus-visible)) .jr-seg[data-seg="4"], .explorer-view:has(.explorer-phases li[data-seg="5"]:is(:hover, :focus-visible)) .jr-seg[data-seg="5"], .explorer-view:has(.explorer-phases li[data-seg="6"]:is(:hover, :focus-visible)) .jr-seg[data-seg="6"], .explorer-view:has(.explorer-phases li[data-seg="7"]:is(:hover, :focus-visible)) .jr-seg[data-seg="7"], .explorer-view:has(.explorer-phases li[data-seg="8"]:is(:hover, :focus-visible)) .jr-seg[data-seg="8"], .explorer-view:has(.explorer-phases li[data-seg="9"]:is(:hover, :focus-visible)) .jr-seg[data-seg="9"] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .js .explorer-view:not([hidden]) .explorer-ring .jr { animation: ring-in 620ms var(--ft-ease-standard); } }
@keyframes ring-in { from { opacity: 0; transform: rotate(-24deg) scale(.96); } }
@media (min-width: 900px) { .explorer-view { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: var(--ft-space-16); } .explorer-pick { gap: 4px 28px; } }

/* report scene */
.steps { margin-top: var(--ft-space-8); display: grid; gap: 0; counter-reset: step; max-width: 34em; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.2em 1fr; gap: var(--ft-space-3); padding-block: var(--ft-space-4); border-top: 1px solid var(--ft-color-border-subtle); }
.steps li.is-now { border-top-color: var(--ft-color-brand-berry); }
.steps li.is-now strong { color: var(--ft-color-action-default); }
.steps li strong { display: block; font-weight: 500; }
.steps li { font-size: var(--ft-scene); line-height: 1.45; transition: border-color var(--ft-duration-standard) linear; }
.steps li::before { content: counter(step); font: 300 1.75rem/1 var(--font-display); color: var(--ft-color-brand-berry); }
.note { margin-top: var(--ft-space-6); padding: var(--ft-space-4) var(--ft-space-5); background: var(--ft-color-mist); border-radius: var(--ft-radius-control); font-size: 16px; line-height: 1.5; max-width: 34em; }

/* scope */
.scope { padding-block: var(--section); border-top: 1px solid var(--ft-color-border-subtle); }

/* facts */
.band { padding-block: var(--section); }
.band--surface { background: var(--ft-color-surface); }
.facts { margin-top: var(--ft-space-12); display: grid; gap: 0 var(--ft-space-8); }
.facts > div { padding-block: var(--ft-space-6); border-top: 1px solid var(--ft-color-border-subtle); }
.facts dt { font: 500 var(--ft-h4)/1.35 var(--font-sans); }
.facts dd { margin-top: var(--ft-space-2); color: var(--ft-color-text-secondary); max-width: 34em; }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.linkrow { margin-top: var(--ft-space-8); display: flex; flex-wrap: wrap; gap: var(--ft-space-3) var(--ft-space-8); }

/* guide teasers + lists */
.rows { margin-top: var(--ft-space-8); border-bottom: 1px solid var(--ft-color-border-subtle); }
.rows a { display: grid; gap: 4px; padding-block: var(--ft-space-5); border-top: 1px solid var(--ft-color-border-subtle); text-decoration: none; color: inherit; }
.rows strong { font: 500 var(--ft-h4)/1.35 var(--font-sans); color: var(--ft-color-text-primary); }
.rows span { color: var(--ft-color-text-secondary); max-width: var(--ft-measure); }
@media (hover: hover) { .rows a:hover strong { color: var(--ft-color-action-default); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; } }
.status-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--ft-radius-full); background: var(--ft-color-warning-surface); color: var(--ft-color-warning-text); font: 500 13px/1 var(--font-sans); justify-self: start; }

/* download */
.download { position: relative; overflow: hidden; padding-block: calc(var(--section) * 1.3); background: var(--ft-color-text-primary); color: var(--ft-color-surface); }
.download .wrap { position: relative; display: grid; gap: var(--ft-space-6); justify-items: start; }
.download .moment { max-width: 12em; }
.download .scene-body { color: #e3d6d0; margin-top: 0; }
.download .stores { margin-top: var(--ft-space-4); }
.download .store { background: var(--ft-color-surface); color: var(--ft-color-text-primary); }
.download .store small { color: var(--ft-color-text-secondary); }
.download .stores-note { color: #cdbfb8; }
.download-ring { position: absolute; right: -12vw; top: 50%; width: min(90vw, 46rem); aspect-ratio: 1; translate: 0 -50%; opacity: .5; pointer-events: none; }
.download-ring .jr { width: 100%; height: 100%; overflow: visible; }
.download-ring .jr-marker { display: none; }
@media (max-width: 899px) { .download-ring { right: -40vw; top: auto; bottom: -30vw; translate: none; opacity: .32; } }
@media (min-width: 900px) { .download .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--ft-space-16); } }

/* where data lives: the device carries most, the servers little */
.facts--where { display: grid; gap: var(--ft-space-4); border: 0; }
.facts--where > div { padding: var(--ft-space-6); border: 0; border-radius: var(--ft-radius-feature); background: var(--ft-color-canvas); display: block; }
.facts--where dt { font: 500 var(--ft-h4)/1.3 var(--font-sans); }
.facts--where dd { margin: var(--ft-space-3) 0 0; font-size: var(--ft-body); max-width: 34em; }
.facts--where > div:first-child { background: var(--ft-color-text-primary); color: var(--ft-color-surface); }
.facts--where > div:first-child dt { font: 300 clamp(1.75rem, 1.3rem + 2vw, 2.75rem)/1.12 var(--font-display); letter-spacing: -.015em; max-width: 12em; }
.facts--where > div:first-child dd { color: #e9e0db; font-size: var(--ft-scene); }
@media (min-width: 900px) {
  .facts--where { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ft-space-6); }
  .facts--where > div { padding: var(--ft-space-8); }
  .facts--where > div:nth-child(1) { grid-column: 1 / span 7; grid-row: 1 / span 2; padding: var(--ft-space-12); display: flex; flex-direction: column; justify-content: flex-end; min-height: 26rem; }
  .facts--where > div:nth-child(2) { grid-column: 8 / span 5; }
  .facts--where > div:nth-child(3) { grid-column: 8 / span 5; }
  .facts--where > div:nth-child(4) { grid-column: 1 / -1; background: none; padding: var(--ft-space-2) 0 0; display: flex; gap: var(--ft-space-6); align-items: baseline; }
  .facts--where > div:nth-child(4) dd { margin: 0; }
}

/* ---------- footer ---------- */
.site-footer { padding-block: var(--ft-space-16) var(--ft-space-10); border-top: 1px solid var(--ft-color-border-subtle); font-size: 16px; }
.footer-grid { display: grid; gap: var(--ft-space-10); }
.footer-brand img { height: 44px; width: auto; }
.footer-brand p { margin-top: var(--ft-space-3); color: var(--ft-color-text-secondary); max-width: 28ch; }
.footer-col h2 { font: 500 14px/1.4 var(--font-sans); color: var(--ft-color-text-secondary); margin-bottom: var(--ft-space-2); }
.footer-col a { display: flex; align-items: center; min-height: 44px; color: var(--ft-color-text-primary); text-decoration: none; }
@media (hover: hover) { .footer-col a:hover { color: var(--ft-color-action-default); text-decoration: underline; } }
.footer-meta { margin-top: var(--ft-space-12); padding-top: var(--ft-space-6); border-top: 1px solid var(--ft-color-border-subtle); display: grid; gap: var(--ft-space-3); color: var(--ft-color-text-secondary); font-size: 14px; line-height: 1.5; }
.footer-meta p { max-width: 70ch; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }

/* ---------- inner pages ---------- */
.page-head { padding-block: var(--ft-space-12) var(--ft-space-10); }
.page-head .h1 { max-width: 14em; font-size: clamp(2.5rem, 1.8rem + 3.4vw, 4.75rem); }
.page-head .lead { font-size: var(--ft-scene); max-width: 32em; }
.page-head .lead { margin-top: var(--ft-space-5); }
.crumbs { margin-bottom: var(--ft-space-6); font-size: 14px; color: var(--ft-color-text-secondary); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--ft-color-decorative); }
.crumbs a { color: inherit; }
.page-body { padding-bottom: var(--section); }
.stack > * + * { margin-top: var(--ft-space-4); }
.feature { display: grid; gap: var(--ft-space-10); align-items: center; padding-block: var(--ft-space-12); border-top: 1px solid var(--ft-color-border-subtle); }
.feature .scene-media { --phone-w: clamp(250px, 72vw, 340px); }
.feature p { color: var(--ft-color-text-secondary); max-width: 32em; margin-top: var(--ft-space-5); font-size: var(--ft-scene); line-height: 1.5; }
.feature p.small { font-size: var(--ft-small); }
.feature .h2 { font-size: clamp(1.875rem, 1.4rem + 2.2vw, 3rem); max-width: 14em; }
.feature--list { display: block; }
.feature--band { border: 0; background: var(--ft-color-mist); box-shadow: 0 0 0 100vmax var(--ft-color-mist); clip-path: inset(0 -100vmax); padding-block: var(--ft-space-16); }
.feature--band + .feature { border-top: 0; }
.feature--center { justify-items: center; text-align: center; }
.feature--center p { margin-inline: auto; }
.feature--cluster { border-top: 0; padding-top: 0; }
.cluster { --phone-w: min(76vw, 320px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ft-space-6) var(--ft-space-4); justify-items: center; align-items: center; }
.cluster > .phone[data-clip] { grid-column: 1 / -1; grid-row: 1; }
.cluster > .phone:not([data-clip]) { --phone-w: 100%; width: 100%; padding: 2.8%; border-radius: 15% / 7%; }
.cluster > .phone:not([data-clip]) .phone-screen { border-radius: 13% / 6%; }
.cluster > .crop { width: 100%; }
.crop--full .crop-frame { aspect-ratio: 600 / 630; }
.callout { font: 300 clamp(1.5rem, 1.15rem + 1.6vw, 2.375rem)/1.25 var(--font-display) !important; letter-spacing: -.012em; color: var(--ft-color-text-primary) !important; max-width: 24em !important; text-wrap: pretty; }
.steps--row { max-width: none; }
.facts--3 dd { font-size: var(--ft-body); }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ft-space-16); padding-block: var(--ft-space-20, 5rem); }
  .feature .scene-media { --phone-w: clamp(300px, 27vw, 380px); }
  .feature--flip .scene-media { order: -1; }
  .feature--center, .feature--cluster { grid-template-columns: minmax(0, 1fr); }
  .feature--cluster { gap: var(--ft-space-12); }
  .cluster { --phone-w: 100%; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--ft-space-10); align-items: start; max-width: 1080px; margin-inline: auto; width: 100%; }
  .cluster > .phone:nth-child(n) { grid-column: auto; grid-row: auto; --phone-w: 100%; width: 100%; padding: 2.8%; border-radius: 15% / 7%; }
  .cluster > .phone .phone-screen { border-radius: 13% / 6%; }
  .cluster > .crop { align-self: center; }
  .cluster > .phone:nth-child(3) { margin-top: var(--ft-space-24); }
  .steps--row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ft-space-8); }
  .steps--row li { grid-template-columns: 1fr; align-content: start; gap: var(--ft-space-4); border-top: 2px solid var(--ft-color-brand-berry); padding-top: var(--ft-space-5); font-size: var(--ft-body); }
  .steps--row li::before { font-size: 3.25rem; }
  .facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.notice { display: flex; gap: 12px; align-items: flex-start; padding: var(--ft-space-4) var(--ft-space-5); border-radius: var(--ft-radius-control); background: var(--ft-color-warning-surface); color: var(--ft-color-warning-text); font-size: 16px; line-height: 1.5; max-width: var(--ft-measure); }
.notice .icon { margin-top: 2px; }
.notice--info { background: var(--ft-color-info-surface); color: var(--ft-color-info-text); }
.notice--ok { background: var(--ft-color-success-surface); color: var(--ft-color-success-text); }
.contact-cards { display: grid; gap: var(--ft-space-4); }
.contact-card { padding: var(--ft-space-6); background: var(--ft-color-surface); border: 1px solid var(--ft-color-border-subtle); border-radius: var(--ft-radius-card); }
.contact-card p { color: var(--ft-color-text-secondary); margin-block: 6px 12px; }
.contact-card a { font-weight: 500; font-size: var(--ft-lead); word-break: break-word; }
@media (min-width: 768px) { .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* accordion (native details) */
.faq-group + .faq-group { margin-top: var(--ft-space-16); }
.acc { margin-top: var(--ft-space-5); border-bottom: 1px solid var(--ft-color-border-subtle); max-width: 46em; }
.acc details { border-top: 1px solid var(--ft-color-border-subtle); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--ft-space-4); min-height: 64px; padding-block: var(--ft-space-4); cursor: pointer; font: 500 var(--ft-lead)/1.4 var(--font-sans); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .icon { transition: transform var(--ft-duration-standard) var(--ft-ease-standard); color: var(--ft-color-action-default); }
.acc details[open] summary .icon { transform: rotate(45deg); }
.acc details > div { padding-bottom: var(--ft-space-5); color: var(--ft-color-text-secondary); max-width: var(--ft-measure); }

/* long-form text (legal, guides) */
.prose { max-width: var(--ft-measure); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font: 500 var(--ft-h3)/1.25 var(--font-sans); letter-spacing: -.01em; margin-top: 2em; scroll-margin-top: calc(var(--ft-header-height) + 24px); }
.prose h3 { font: 500 var(--ft-h4)/1.35 var(--font-sans); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose a { overflow-wrap: anywhere; }
.prose .table-scroll { overflow-x: auto; }
.prose table { border-collapse: collapse; min-width: 480px; font-size: 16px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--ft-color-border-subtle); }
.legal-mark { background: var(--ft-color-warning-surface); color: var(--ft-color-warning-text); padding: 0 4px; border-radius: 4px; font-size: .85em; }
.article-head .h1 { font-size: clamp(2.125rem, 1.7rem + 2.1vw, 3.5rem); max-width: 18em; }
.article-meta { margin-top: var(--ft-space-5); display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--ft-color-text-secondary); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ft-space-10); }
.article-layout :is(.toc a, .answer p, .checklist, h2, h3) { overflow-wrap: break-word; }
:lang(de) .article-layout :is(.answer p, .checklist li, .toc a) { hyphens: auto; }
.toc { font-size: 16px; }
.toc h2 { font: 500 14px/1.4 var(--font-sans); color: var(--ft-color-text-secondary); margin-bottom: var(--ft-space-2); }
.toc a { display: flex; align-items: center; min-height: 40px; color: var(--ft-color-text-primary); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
@media (min-width: 1024px) { .article-layout { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--ft-space-16); } .toc { position: sticky; top: calc(var(--ft-header-height) + 32px); align-self: start; } }
.article-head .kicker { margin-bottom: var(--ft-space-3); }
.answer { padding: var(--ft-space-6) var(--ft-space-6) var(--ft-space-6) var(--ft-space-5); border-left: 3px solid var(--ft-color-brand-berry); background: var(--ft-color-surface); border-radius: 0 var(--ft-radius-card) var(--ft-radius-card) 0; max-width: var(--ft-measure); }
.answer-label { font: 500 14px/1.4 var(--font-sans); color: var(--ft-color-action-default); margin-bottom: 6px; }
.answer p:last-child { font: 300 clamp(1.375rem, 1.2rem + .8vw, 1.75rem)/1.35 var(--font-display); letter-spacing: -.01em; text-wrap: pretty; }
.article-lead { margin: var(--ft-space-8) 0 var(--ft-space-2); max-width: var(--ft-measure); font-size: var(--ft-scene); line-height: 1.5; color: var(--ft-color-text-secondary); }
.prose { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.65; }
.ref { font-size: .7em; line-height: 1; vertical-align: baseline; position: relative; top: -.55em; margin-left: 2px; }
.ref a { display: inline-block; line-height: 1.35; min-width: 1.5em; padding: 0 .3em; text-align: center; text-decoration: none; border-radius: 4px; background: var(--ft-color-mist); color: var(--ft-color-action-default); font-weight: 500; }
.ref a:hover { background: var(--ft-color-soft); }
.prose ol.sources { list-style: decimal; padding-left: 1.6em; }
.sources li::marker { color: var(--ft-color-action-default); font-weight: 500; }
.sources li:target { background: var(--ft-color-mist); box-shadow: 0 0 0 6px var(--ft-color-mist); border-radius: 4px; }
.sources li { scroll-margin-top: calc(var(--ft-header-height) + 24px); }
.checklist { margin-top: 2.4em; padding: var(--ft-space-6); border: 1px solid var(--ft-color-border-control); border-radius: var(--ft-radius-card); background: var(--ft-color-surface); }
.checklist-kicker { font: 500 14px/1.4 var(--font-sans); color: var(--ft-color-action-default); }
.prose .checklist h2 { margin-top: 4px; }
.prose .checklist ul { list-style: none; padding: 0; margin-top: var(--ft-space-4); }
.prose .checklist li { position: relative; padding: 10px 0 10px 36px; border-top: 1px solid var(--ft-color-border-subtle); margin: 0; }
.checklist li::before { content: ""; position: absolute; left: 2px; top: .85em; width: 18px; height: 18px; border: 1.5px solid var(--ft-color-border-control); border-radius: 5px; }
.review { margin-top: 2.4em; padding: var(--ft-space-6); border-radius: var(--ft-radius-card); background: var(--ft-color-warning-surface); color: var(--ft-color-warning-text); font-size: 16px; }
.review--ok { background: var(--ft-color-success-surface); color: var(--ft-color-success-text); }
.prose .review h2 { margin-top: 0; font-size: var(--ft-h4); }
.review dl { margin: var(--ft-space-4) 0; display: grid; gap: 6px 24px; }
.review dl > div { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.review dt { font-weight: 500; }
.review dd { margin: 0; }
@media (min-width: 640px) { .review dl { grid-template-columns: repeat(3, auto); justify-content: start; } .review dl > div { display: block; } }
.guide-cluster { padding-block: var(--ft-space-10); border-top: 1px solid var(--ft-color-border-subtle); display: grid; gap: var(--ft-space-6); }
.guide-cluster:first-of-type { border-top: 0; padding-top: 0; }
.guide-cluster-head .h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
.guide-cluster-head p { margin-top: var(--ft-space-3); color: var(--ft-color-text-secondary); max-width: 24em; }
.rows--guides { margin-top: 0; border-bottom: 0; }
.rows--guides a:first-child { border-top: 0; padding-top: 0; }
.rows--guides strong { font: 300 clamp(1.375rem, 1.2rem + .9vw, 1.875rem)/1.2 var(--font-display); letter-spacing: -.01em; }
.rows--guides a:hover strong { color: var(--ft-color-action-default); }
.guide-min { font-size: 14px; }
@media (min-width: 900px) { .guide-cluster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--ft-space-16); padding-block: var(--ft-space-16); } }
@media print { .site-header, .site-footer, .toc, .inapp, .crumbs { display: none !important; } .checklist { break-inside: avoid; } }
.phase-figure { margin: var(--ft-space-8) 0 0; max-width: var(--ft-measure); }
.phase-bar { display: flex; gap: 3px; height: 44px; }
.phase-bar span { display: grid; place-items: center; min-width: 26px; background: var(--ft-color-soft); border-radius: 6px; font: 500 14px/1 var(--font-sans); color: var(--ft-color-brand-deep); }
.phase-bar span:nth-child(even) { background: #EDB4CA; }
.phase-legend { margin: var(--ft-space-4) 0 var(--ft-space-3); padding-left: 1.4em; columns: 2 11em; column-gap: var(--ft-space-8); font-size: 16px; line-height: 1.7; }
.phase-legend li::marker { color: var(--ft-color-action-default); font-weight: 500; }
.inapp { margin-top: 2em; padding: var(--ft-space-5) var(--ft-space-6); border-radius: var(--ft-radius-card); background: var(--ft-color-mist); }
.inapp strong { display: block; font: 500 14px/1.4 var(--font-sans); color: var(--ft-color-action-default); margin-bottom: 4px; }
.sources { font-size: 16px; list-style: decimal; padding-left: 1.4em; }
.sources li { overflow-wrap: anywhere; }

/* forms */
.form { margin-top: var(--ft-space-6); display: grid; gap: var(--ft-space-6); max-width: 34em; }
.field { display: grid; gap: 8px; }
.field label { font: 500 16px/1.3 var(--font-sans); }
.field input[type="email"] { min-height: 48px; padding: 10px 16px; border: 1px solid var(--ft-color-border-control); border-radius: var(--ft-radius-control); background: var(--ft-color-surface); color: inherit; font: 400 16px/1.4 var(--font-sans); }
.field input[aria-invalid="true"] { border-color: var(--ft-color-error-text); border-width: 2px; }
.field-error { color: var(--ft-color-error-text); font-size: 14px; font-weight: 500; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; min-height: 44px; padding-block: 10px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ft-color-brand-deep); }

/* mobile download bar */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ft-z-raised); padding: 10px var(--margin) calc(10px + env(safe-area-inset-bottom)); background: var(--ft-color-canvas); border-top: 1px solid var(--ft-color-border-subtle); transform: translateY(110%); transition: transform var(--ft-duration-panel) var(--ft-ease-standard); }
.dock.is-on { transform: none; }
.dock .btn { width: 100%; }
@media (min-width: 768px) { .dock { display: none; } }
body:has(.dock) { scroll-padding-bottom: 80px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .switch span, .store, .btn { border: 1px solid ButtonText; } }

/* ---------- V5: store area, header and closing ---------- */
.prelaunch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font: 500 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.3 var(--font-sans); color: var(--ft-color-text-primary); }
.journey-intro .prelaunch { margin-top: var(--ft-space-8); }
.download .prelaunch { margin-top: var(--ft-space-4); color: var(--ft-color-surface); font-size: clamp(1.1875rem, 1.1rem + .5vw, 1.5rem); }
/* official badges: untouched artwork, equal visual height, clear space of a quarter of the height around each */
.stores { gap: 0; margin: -12px; }
.store-badge { padding: 12px; }
.store-badge img { height: 48px; width: auto; display: block; }
.store-badge--android img { height: 48px; }
.store-link { padding: 12px; min-height: 44px; display: inline-flex; align-items: center; }
.header-cta--soon { align-items: center; gap: 8px; font: 500 15px/1.2 var(--font-sans); color: var(--ft-color-text-secondary); text-decoration: none; padding-inline: 4px; }
.header-cta--soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ft-color-brand-berry); opacity: .7; }
@media (hover: hover) { .header-cta--soon:hover { color: var(--ft-color-text-primary); } }
/* reviewers' notes: a separate strip below the footer of preview builds */
.qa-panel { background: #2f2725; color: #e9e0db; font: 400 14px/1.5 var(--font-sans); padding: 10px var(--margin); }
.qa-panel summary { cursor: pointer; font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.qa-panel ul { margin: 0 0 10px; padding-left: 1.2em; display: grid; gap: 6px; max-width: 70em; }

/* ---------- V5: treatment selector as an unmistakable control ---------- */
.explorer-pick { display: grid; gap: var(--ft-space-4); }
.explorer-pick legend { padding: 0; font: 500 clamp(1rem, .95rem + .3vw, 1.1875rem)/1.3 var(--font-sans); color: var(--ft-color-action-default); margin-bottom: var(--ft-space-4); }
.explorer-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.explorer-opt { min-height: 48px; }
.explorer-name { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--ft-color-border-control); background: var(--ft-color-surface); font: 500 clamp(1rem, .95rem + .3vw, 1.1875rem)/1.2 var(--font-sans); letter-spacing: 0; color: var(--ft-color-text-primary); transition: background-color var(--ft-duration-standard) linear, border-color var(--ft-duration-standard) linear, color var(--ft-duration-standard) linear; }
.explorer-name .icon { width: 0; height: 18px; opacity: 0; transition: width var(--ft-duration-standard) var(--ft-ease-standard), opacity var(--ft-duration-standard) linear; }
.explorer-opt input:checked + .explorer-name { background: var(--ft-color-brand-deep); border-color: var(--ft-color-brand-deep); color: #fff; box-shadow: none; }
.explorer-opt input:checked + .explorer-name .icon { width: 18px; opacity: 1; }
.explorer-opt input:focus-visible + .explorer-name { outline: 3px solid var(--ft-color-focus); outline-offset: 3px; border-radius: 999px; }
@media (hover: hover) { .explorer-opt:hover input:not(:checked) + .explorer-name { border-color: var(--ft-color-brand-berry); color: var(--ft-color-text-primary); } }
@media (prefers-reduced-motion: reduce) { .explorer-name, .explorer-name .icon { transition: none; } }

/* ---------- V5: where data lives ---------- */
.places-lead { margin-top: var(--ft-space-5); max-width: 36em; }
.places { list-style: none; margin: var(--ft-space-10) 0 0; padding: 0; display: grid; gap: var(--ft-space-4); position: relative; }
.place { position: relative; padding: var(--ft-space-6); border-radius: var(--ft-radius-feature); background: var(--ft-color-canvas); display: grid; gap: var(--ft-space-3); align-content: start; }
.place--1 { background: var(--ft-color-text-primary); color: var(--ft-color-surface); }
.place--2 { background: none; border: 1.5px dashed var(--ft-color-border-control); }
.place-icon { width: 48px; height: 48px; }
.place-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.place--2 .place-icon, .place--3 .place-icon { color: var(--ft-color-brand-berry); }
.place--1 .place-icon { color: #e3b9c9; }
.place h3 { font: 300 clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem)/1.14 var(--font-display); letter-spacing: -.014em; }
.place-what { font: 500 var(--ft-body)/1.4 var(--font-sans); }
.place-how { font-size: var(--ft-body); line-height: 1.55; color: var(--ft-color-text-secondary); max-width: 34em; }
.place--1 .place-how { color: #e9e0db; }
.places-more { margin: var(--ft-space-6) 0 0; display: grid; gap: var(--ft-space-4); }
.places-more > div { display: grid; gap: 4px; padding-top: var(--ft-space-4); border-top: 1px solid var(--ft-color-border-subtle); }
.places-more dt { font: 500 var(--ft-body)/1.4 var(--font-sans); }
.places-more dd { margin: 0; font-size: var(--ft-body); line-height: 1.55; color: var(--ft-color-text-secondary); max-width: 40em; }
@media (min-width: 900px) {
  .places { grid-template-columns: 1.15fr 1fr 1fr; gap: 0; align-items: stretch; }
  .place { padding: var(--ft-space-8); }
  .place--1 { padding: var(--ft-space-10); min-height: 22rem; align-content: end; }
  .place--2 { border-radius: 0; border-inline: 0; margin-block: var(--ft-space-10); }
  .place--3 { margin-block: var(--ft-space-5); }
  .places-more { grid-template-columns: 1fr 1fr; gap: var(--ft-space-10); margin-top: var(--ft-space-8); }
}

/* ---------- V5: app page ---------- */
.tour { padding-block: var(--ft-space-8) var(--ft-space-10); }
.tour-phone .phone-screen { aspect-ratio: 600 / 1304; }
.tour-phone .phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 360ms linear; }
.tour-phone .phone-screen img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tour-phone .phone-screen img { transition: none; } }
.tour .story-step .linkrow { margin-top: 0; }
.legend { list-style: none; margin: var(--ft-space-5) 0 var(--ft-space-3); padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 15px/1.3 var(--font-sans); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-sizing: border-box; }
.legend-dot--p1 { background: #c45f77; } .legend-dot--p2 { border: 2px dashed #c45f77; }
.legend-dot--o1 { background: #6f9c8f; } .legend-dot--o2 { border: 2px dashed #6f9c8f; }
.legend-dot--f { background: #dfeee9; border: 1px solid #a9c9bf; }
.feature--share { display: grid; gap: var(--ft-space-8); }
.share-pair { --phone-w: min(64vw, 260px); display: grid; gap: var(--ft-space-8); justify-items: center; align-items: center; }
.post { margin: 0; width: min(100%, 24rem); display: grid; gap: var(--ft-space-3); }
.post-tag { justify-self: start; font: 500 13px/1 var(--font-sans); padding: 6px 10px; border-radius: 999px; background: var(--ft-color-soft); color: var(--ft-color-brand-deep); }
.post-card { background: var(--ft-color-surface); border: 1px solid var(--ft-color-border-subtle); border-radius: 20px; padding: 16px; display: grid; gap: 12px; }
.post-who { display: flex; align-items: center; gap: 10px; }
.post-who i { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(140deg, var(--ft-color-soft), var(--ft-color-mist)); }
.post-who b { display: block; font: 600 15px/1.2 var(--font-sans); } .post-who small { font: 400 13px/1.3 var(--font-sans); color: var(--ft-color-text-secondary); }
.post-text { font-size: 17px; line-height: 1.45; }
.post-card img { width: 100%; height: auto; border-radius: 12px; }
@media (min-width: 900px) { .feature--share { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: var(--ft-space-16); } .share-pair { grid-template-columns: auto minmax(0, 24rem); gap: var(--ft-space-10); } }
.extras { margin: var(--ft-space-8) 0 0; display: grid; gap: 0 var(--ft-space-10); }
.extras > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--ft-space-4); row-gap: 4px; padding: var(--ft-space-5) 0; border-top: 1px solid var(--ft-color-border-subtle); }
.extras-icon { grid-row: 1 / span 2; width: 28px; height: 28px; fill: none; stroke: var(--ft-color-brand-berry); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.extras dt { font: 500 var(--ft-h4)/1.3 var(--font-sans); }
.extras dd { margin: 0; font-size: var(--ft-body); line-height: 1.5; color: var(--ft-color-text-secondary); max-width: 30em; }
@media (min-width: 700px) { .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .extras { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--ft-space-8); } }

/* ---------- V6: header with direct download access ---------- */
.header-actions { gap: 4px; }
.menu--lang > summary { font-weight: 600; letter-spacing: .02em; }
.get-btn { gap: 8px !important; padding: 0 16px !important; min-height: 44px; border-radius: 999px !important; font: 600 15px/1 var(--font-sans) !important; color: var(--ft-color-text-primary); box-shadow: inset 0 0 0 1.5px var(--ft-color-border-control); background: var(--ft-color-surface); white-space: nowrap; transition: box-shadow var(--ft-duration-standard) linear, background-color var(--ft-duration-standard) linear; }
.get-btn.is-live { background: var(--ft-color-brand-deep); color: #fff; box-shadow: none; }
.get-btn .icon { width: 18px; height: 18px; }
.get-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ft-color-brand-berry); }
.get-short { display: none; }
.menu--get[open] > .get-btn { box-shadow: inset 0 0 0 2px var(--ft-color-brand-berry); }
.menu--get[open] > .get-btn.is-live { box-shadow: 0 0 0 3px var(--ft-color-soft); }
@media (hover: hover) { .get-btn:hover { box-shadow: inset 0 0 0 1.5px var(--ft-color-brand-berry); } .get-btn.is-live:hover { background: var(--ft-color-action-default); box-shadow: none; } }
.get-panel { min-width: 300px; padding: 16px; display: grid; gap: 8px; }
.get-title { font: 300 1.375rem/1.2 var(--font-display); letter-spacing: -.01em; margin-bottom: 4px; }
.get-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 0 16px; border-radius: 14px; background: var(--ft-color-canvas); color: var(--ft-color-text-primary); text-decoration: none; font: 600 17px/1.2 var(--font-sans); }
.get-option small { font: 500 14px/1.2 var(--font-sans); color: var(--ft-color-action-default); }
.get-option.is-soon { color: var(--ft-color-text-secondary); background: none; box-shadow: inset 0 0 0 1px var(--ft-color-border-subtle); }
.get-option.is-soon small { color: var(--ft-color-text-secondary); }
a.get-option { min-height: 56px !important; padding: 0 16px !important; font-weight: 600 !important; }
@media (hover: hover) { a.get-option:hover { background: var(--ft-color-mist) !important; } }
.get-panel .store-badge { display: flex; justify-content: center; min-height: 0 !important; padding: 12px !important; background: none !important; }
.get-note { font: 400 14px/1.45 var(--font-sans); color: var(--ft-color-text-secondary); max-width: 26em; margin-top: 4px; }
.header-badges { display: none; align-items: center; margin-right: -8px; }
.header-badges .store-badge { padding: 10px; }
.header-badges .store-badge img { height: 40px; }
@media (min-width: 1280px) { .header-badges { display: flex; } .menu--get.has-badges { display: none; } }
.menu-close { display: none; }
.menu--nav[open] .menu-open { display: none; } .menu--nav[open] .menu-close { display: inline-flex; }
.menu-open, .menu-close { display: inline-flex; }
.menu--nav:not([open]) .menu-close { display: none; }
/* footer: confirmed profiles only */
.social { list-style: none; display: flex; gap: 4px; margin: var(--ft-space-4) 0 0 -10px; padding: 0; }
.social a { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 12px; color: var(--ft-color-text-primary); font: 500 15px/1 var(--font-sans); text-decoration: none; }
.social img { width: 24px; height: 24px; display: block; }
.social { flex-wrap: wrap; gap: 8px; margin-left: 0; }
/* brand glyphs: files as delivered (public/assets/social), one size, black on the light footer as the platforms' marks ask for single-colour use */
.social:has(.social-glyph) { gap: 4px; margin-left: -10px; }
.social a:has(.social-glyph) { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 999px; color: #000; }
.social-glyph { display: grid; place-items: center; width: 24px; height: 24px; }
.social-glyph svg { width: 100%; height: 100%; display: block; }
.social a:has(.social-glyph):hover { background: var(--ft-color-surface); }
.social a:has(span) { padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ft-color-border-strong, var(--ft-color-border-subtle)); }
.social a:has(span):hover { background: var(--ft-color-surface); }
@media (hover: hover) { .social a:hover { background: var(--ft-color-mist); } }

@media (max-width: 1023px) {
  :root { --ft-header-height: 60px; }
  .site-header .wrap { gap: var(--ft-space-3); }
  .brand img { height: 40px; }
  .get-long { display: none; } .get-short { display: inline; }
  .get-btn { padding: 0 14px !important; min-height: 40px; }
  .menu--get > summary { min-height: 44px; }
  /* both menus open as a sheet directly under the header, full width, with the page dimmed behind */
  .menu--get, .menu--nav { position: static; }
  .site-header { position: sticky; }
  .menu--get > .menu-panel, .menu--nav > .menu-panel { position: absolute; left: 0; right: 0; top: 100%; min-width: 0; margin: 0; border: 0; border-top: 1px solid var(--ft-color-border-subtle); border-radius: 0 0 24px 24px; padding: 16px var(--margin) calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 24px 40px rgba(47, 39, 37, .16); max-height: calc(var(--svh, 1vh) * 100 - var(--ft-header-height)); overflow-y: auto; }
  .menu--get[open] > summary::before, .menu--nav[open] > summary::before { content: ""; position: fixed; inset: var(--ft-header-height) 0 0 0; background: rgba(47, 39, 37, .32); z-index: -1; cursor: default; }
  .get-panel { gap: 10px; }
  .get-title { font-size: 1.625rem; }
  .nav-sheet { display: grid; gap: 4px; }
  .nav-sheet-main { display: grid; }
  .nav-sheet-main a { min-height: 60px; padding: 0 4px; border-radius: 0; border-bottom: 1px solid var(--ft-color-border-subtle); font: 300 1.75rem/1.1 var(--font-display); letter-spacing: -.012em; justify-content: flex-start; gap: 12px; }
  .nav-sheet-main a[aria-current] { background: none; color: var(--ft-color-brand-deep); }
  .nav-sheet-main a[aria-current]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ft-color-brand-berry); }
  .nav-sheet-more { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-top: 8px; }
  .nav-sheet-more a { min-height: 44px; padding: 0 4px; font-size: 16px; color: var(--ft-color-text-secondary); }
}
@media (max-width: 359px) { .brand img { height: 32px; } .get-btn { padding: 0 10px !important; gap: 0 !important; } .get-dot { display: none; } .menu > summary { padding: 0 6px; } .site-header .wrap { gap: 6px; } }

/* ---------- V6: consent notice for audience measurement (only present when analytics is switched on) ---------- */
.consent { position: fixed; z-index: var(--ft-z-popover); left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 34rem; margin-inline: auto; padding: 16px 18px; border-radius: 20px; background: var(--ft-color-surface); border: 1px solid var(--ft-color-border-subtle); box-shadow: var(--ft-shadow-overlay); display: grid; gap: 12px; font: 400 16px/1.45 var(--font-sans); }
.consent[hidden] { display: none; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-actions .btn { min-height: 48px; justify-content: center; }
.linkbtn { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- V6: tables in guides read as stacked cards on narrow screens ---------- */
.prose table { width: 100%; min-width: 0; margin-block: var(--ft-space-6); }
.prose tbody th { font-weight: 600; white-space: nowrap; padding-right: 20px; }
.prose thead th { font: 500 15px/1.3 var(--font-sans); color: var(--ft-color-action-default); }
@media (max-width: 699px) {
  .prose table, .prose tbody, .prose tr, .prose td, .prose tbody th { display: block; }
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prose tr { padding: 14px 0; border-bottom: 1px solid var(--ft-color-border-subtle); }
  .prose td, .prose tbody th { border: 0; padding: 2px 0; white-space: normal; }
  .prose td[data-h]::before { content: attr(data-h); display: block; font: 500 14px/1.3 var(--font-sans); color: var(--ft-color-action-default); margin-top: 8px; }
}

/* Contact form (V9): reuses .form/.field; textarea matches the email input */
.field textarea { min-height: 160px; padding: 12px 16px; border: 1px solid var(--ft-color-border-control); border-radius: var(--ft-radius-control); background: var(--ft-color-surface); color: inherit; font: 400 16px/1.5 var(--font-sans); resize: vertical; }
.field textarea[aria-invalid="true"] { border-color: var(--ft-color-error-text); border-width: 2px; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Web reproduction of the Fertilita dashboard (Start tab), checked against the
   native recordings in /assets/app/<lang>/ring.webp. All lengths are in --u,
   one app point at a 393pt wide screen, so the screen scales without rounding. */
.phone-screen { container-type: inline-size; }
.fa {
  --u: calc(100cqw / 393);
  position: relative; aspect-ratio: 393 / 795; overflow: hidden;
  background: #fcf9f7; color: #4a3f3a;
  font-family: Inter, system-ui, sans-serif; font-weight: 400; line-height: 1; text-align: left;
  -webkit-font-smoothing: antialiased; user-select: none;
}
.fa svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fa p { margin: 0; }
.fa-head { position: absolute; top: calc(8 * var(--u)); left: calc(24 * var(--u)); right: calc(24 * var(--u)); height: calc(40 * var(--u)); display: flex; align-items: center; }
.fa-mark { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(9 * var(--u)); display: block; }
.fa-word { width: calc(73 * var(--u)); height: calc(22 * var(--u)); margin-left: calc(6 * var(--u)); background: #3b302c; -webkit-mask: url(/assets/brand/app-wordmark.webp) left center / contain no-repeat; mask: url(/assets/brand/app-wordmark.webp) left center / contain no-repeat; }
.fa-settings { margin-left: auto; margin-right: calc(11 * var(--u)); color: #6f625b; }
.fa-settings svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); stroke-width: 1.6; }
.fa-datebar { position: absolute; top: calc(62.5 * var(--u)); left: calc(38 * var(--u)); right: calc(38 * var(--u)); display: flex; justify-content: space-between; align-items: center; font-size: calc(14 * var(--u)); font-weight: 500; color: #6f625b; letter-spacing: .01em; }
.fa-datebar svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); stroke-width: 1.7; color: #4a3f3a; }
.fa-week { position: absolute; top: calc(84 * var(--u)); left: calc(24 * var(--u)); right: calc(24 * var(--u)); display: grid; grid-template-columns: repeat(7, 1fr); }
.fa-wd { justify-self: center; width: calc(42 * var(--u)); height: calc(51 * var(--u)); border-radius: calc(12 * var(--u)); display: grid; justify-items: center; align-content: start; padding-top: calc(5 * var(--u)); row-gap: calc(7 * var(--u)); }
.fa-wd span { font-size: calc(12 * var(--u)); color: #9a8c85; }
.fa-wd b { font-size: calc(16 * var(--u)); font-weight: 400; }
.fa-wd i { width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u)); border-radius: 50%; margin-top: calc(-1 * var(--u)); }
.fa-wd i.on { background: #e3b9c9; }
.fa-wd.is-sel { background: #f6edf1; }
.fa-wd.is-sel span, .fa-wd.is-sel b { color: #b65b7f; }
.fa-wd.is-sel i.on { background: #b65b7f; }
.fa-entries { position: absolute; top: calc(147 * var(--u)); left: calc(30 * var(--u)); right: calc(30 * var(--u)); height: calc(70 * var(--u)); border-top: 1px solid #f0e8e4; }
.fa-entry { position: absolute; inset: calc(12 * var(--u)) calc(9 * var(--u)) 0; padding-right: calc(11 * var(--u)); display: flex; align-items: center; border-bottom: 1px solid #ebe2de; }
.fa-time { width: calc(55 * var(--u)); font-size: calc(14 * var(--u)); color: #7d6e66; white-space: nowrap; }
.fa-entry:has(.fa-time:not(:empty)) .fa-title { flex: 1; }
.fa-title { font-size: calc(15 * var(--u)); padding-left: calc(4 * var(--u)); }
[lang="en"] .fa-time { width: auto; padding-right: calc(12 * var(--u)); }
.fa-entry svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #7d6e66; stroke-width: 1.6; margin-right: calc(28 * var(--u)); }
.fa-belldot { fill: #b65b7f; stroke: #fcf9f7; stroke-width: 1.2; }
.fa-check { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; border: calc(1.2 * var(--u)) solid #dfd5d0; background: #fff; }
.fa-empty { position: absolute; inset: calc(12 * var(--u)) calc(9 * var(--u)) 0; display: flex; align-items: center; font-size: calc(14 * var(--u)); color: #7d6e66; border-bottom: 1px solid #ebe2de; }
.fa-context { position: absolute; top: calc(273 * var(--u)); left: 0; right: 0; text-align: center; font-size: calc(11 * var(--u)); font-weight: 500; letter-spacing: calc(2.6 * var(--u)); text-transform: uppercase; color: #8f4965; padding-left: calc(2.6 * var(--u)); }
.fa-ring { position: absolute; top: calc(284.5 * var(--u)); left: calc(24 * var(--u)); width: calc(345 * var(--u)); height: calc(345 * var(--u)); }
.fa-ring .jr { width: 100%; height: 100%; overflow: visible; }
.fa .jr-marker circle, .stage-ring .jr-marker circle { stroke-linecap: butt; }
.jr-halo { opacity: .4; transform-box: fill-box; transform-origin: center; animation: jr-breathe 2.6s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes jr-breathe { 0%, 46%, 100% { transform: scale(1); opacity: .24; } 27% { transform: scale(1.32); opacity: .4; } }
.fa-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.fa-daylabel { margin-top: calc(97 * var(--u)); font-size: calc(11.7 * var(--u)); font-weight: 500; letter-spacing: calc(3.3 * var(--u)); padding-left: calc(3.3 * var(--u)); text-transform: uppercase; color: #6f625b; }
.fa-daynum { margin-top: calc(-4 * var(--u)); font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: calc(105 * var(--u)); line-height: calc(110 * var(--u)); letter-spacing: calc(-3.5 * var(--u)); font-variant-numeric: lining-nums; }
.fa-phase { margin-top: calc(11 * var(--u)); max-width: calc(180 * var(--u)); font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: calc(20 * var(--u)); line-height: calc(25 * var(--u)); text-align: center; hyphens: manual; }
.fa-support { position: absolute; top: calc(634 * var(--u)); left: calc(24 * var(--u)); right: calc(24 * var(--u)); height: calc(120 * var(--u)); padding: calc(18 * var(--u)) calc(16 * var(--u)); border: 1px solid #efe6e2; border-radius: calc(16 * var(--u)); background: #fdfbf9; }
.fa-support-t { line-height: 1.5; margin-top: calc(-3 * var(--u)) !important; font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: calc(1.6 * var(--u)); text-transform: uppercase; color: #8f4965; padding-right: calc(50 * var(--u)); white-space: nowrap; overflow: hidden; }
.fa-support-b { margin-top: calc(10 * var(--u)) !important; font-size: calc(13.4 * var(--u)); line-height: calc(20.5 * var(--u)); letter-spacing: -.012em; }
.fa-fab { position: absolute; left: calc(314.5 * var(--u)); top: calc(622.5 * var(--u)); width: calc(55 * var(--u)); height: calc(55 * var(--u)); border-radius: 50%; background: #b3527b; color: #fff; display: grid; place-items: center; box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(182, 91, 127, .22); }
.fa-fab svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); stroke-width: 1.9; }
.fa-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: calc(83 * var(--u)); background: #fcf9f7; display: grid; grid-template-columns: repeat(5, 1fr); padding: calc(10 * var(--u)) 0 0; }
.fa-tab { padding-top: calc(5 * var(--u)); display: grid; justify-items: center; align-content: start; row-gap: calc(6 * var(--u)); color: #7d6e66; }
.fa-tab svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.fa-tab em { font-style: normal; font-size: calc(10 * var(--u)); font-weight: 500; letter-spacing: .02em; }
.fa-tab.is-on { color: #4a3f3a; }
.fa-tab.is-on em { font-weight: 600; }
.fa-tab.is-on svg { color: #b65b7f; }
.fa-tab.is-on .fill { fill: #b65b7f; }
/* state changes: short crossfades, as in the app (70 ms centre, 200 ms date) */
.fa [data-fa] { transition: opacity 90ms linear; }
@media (prefers-reduced-motion: reduce) { .jr-halo { animation: none; } .fa [data-fa] { transition: none; } }

/* two rows (the app previews at most two): open entries first, completed after */
.fa-entries:has(.is-row) { height: calc(100 * var(--u)); display: flex; flex-direction: column; padding: calc(4 * var(--u)) calc(9 * var(--u)) 0; }
.fa-entry.is-row { position: static; inset: auto; flex: 0 0 calc(46 * var(--u)); }
.fa-entry.is-done > .fa-time, .fa-entry.is-done > .fa-title, .fa-entry.is-done > svg { opacity: .6; }
.fa-entry.is-done .fa-title { text-decoration: line-through; color: #a39a94; }
.fa-check { display: grid; place-items: center; flex: none; }
.fa-entry.is-done .fa-check { background: #b65b7f; border-color: #b65b7f; }
.fa-entry .fa-check svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin: 0; color: #fff; }
.fa-entry:not(:has(> svg)) .fa-title { margin-right: calc(46 * var(--u)); }

/* optional example: positive outcome with the app's celebration (PositiveCelebration.tsx, 5 s) */
.fa-cel, .fa-celmsg { display: none; position: absolute; inset: 0; pointer-events: none; }
.fa-cel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; }
.fa-cel .fa-cel-rays { inset: auto; left: -25%; top: -25%; width: 150%; height: 150%; max-width: none; }
.fa-cel svg, .fa-cel svg * { stroke-linecap: butt; }
.fa-cel-rays circle, .fa-cel-rays path { stroke: none; }
.fa-cel-orbit circle:first-of-type { stroke: none; }
.fa-celmsg { flex-direction: column; align-items: center; justify-content: center; gap: calc(8 * var(--u)); text-align: center; padding: 0 20%; opacity: 0; }
.fa-cel-eyebrow { font-size: calc(10 * var(--u)); line-height: 1.4; letter-spacing: calc(1.8 * var(--u)); text-transform: uppercase; color: #7d6e66; }
.fa-cel-title { font-family: var(--font-display); font-weight: 300; font-size: calc(29 * var(--u)); line-height: 1.14; color: #b65b7f; }
.fa-cel-body { font-size: calc(13 * var(--u)); line-height: 1.38; color: #7d6e66; }
[data-example="positive"] .fa-cel { display: block; }
[data-example="positive"] .fa-celmsg { display: flex; animation: cel-msg 5s linear both; }
[data-example="positive"] .fa-center { animation: cel-center 5s linear both; }
[data-example="positive"] .fa-cel-rays { animation: cel-rays 5s linear both; }
[data-example="positive"] .fa-cel-ripple { animation: cel-ripple 5s linear both; }
[data-example="positive"] .fa-cel-ripple--2 { animation-name: cel-ripple-2; }
[data-example="positive"] .fa-cel-orbit { animation: cel-orbit-o 5s linear both, cel-orbit-r 2.4s cubic-bezier(.5, 0, .3, 1) .1s both; transform-origin: 50% 50%; }
@keyframes cel-rays { 0% { opacity: 0; transform: scale(.84); } 22.4% { opacity: 1; } 52% { opacity: .6; } 80%, 100% { opacity: 0; transform: scale(1.12); } }
@keyframes cel-ripple { 0%, 10% { opacity: 0; transform: scale(.96); } 16.24% { opacity: .75; } 62%, 100% { opacity: 0; transform: scale(1.55); } }
@keyframes cel-ripple-2 { 0%, 26% { opacity: 0; transform: scale(.96); } 32.24% { opacity: .75; } 78%, 100% { opacity: 0; transform: scale(1.55); } }
@keyframes cel-orbit-o { 0%, 2% { opacity: 0; } 5.84%, 46.16% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes cel-orbit-r { to { transform: rotate(360deg); } }
@keyframes cel-center { 0% { opacity: 1; } 8%, 90% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes cel-msg { 0%, 8% { opacity: 0; transform: translateY(calc(8 * var(--u))); } 20% { opacity: 1; transform: none; } 76% { opacity: 1; } 90%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-example="positive"] .fa-cel { display: none; }
  [data-example="positive"] .fa-celmsg { animation: none; opacity: 1; }
  [data-example="positive"] .fa-center { animation: none; opacity: 0; }
}

/* ---------- V5: the trigger alarm (schematic; title and stop label are the app's own strings) ---------- */
.fa-alarm { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 8cqw; background: rgba(47, 39, 37, .56); opacity: 0; visibility: hidden; transition: opacity 260ms linear, visibility 0s linear 260ms; line-height: 1.3; }
[data-alarm="ring"] .fa-alarm { opacity: 1; visibility: visible; transition: opacity 260ms linear; }
.fa-alarm-card { width: 100%; display: grid; justify-items: center; gap: 2.4cqw; padding: 8cqw 6cqw 6cqw; border-radius: 8cqw; background: #2f2725; color: #fffcfa; box-shadow: 0 6cqw 16cqw rgba(0, 0, 0, .35); scale: .92; transition: scale 320ms var(--ft-ease-standard); font-family: Inter, system-ui, sans-serif; text-align: center; }
[data-alarm="ring"] .fa-alarm-card { scale: 1; }
.fa-alarm-bell { width: 15cqw; height: 15cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(212, 165, 165, .22); color: rgb(212, 165, 165); }
.fa-alarm-bell svg { width: 8cqw; height: 8cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fa-alarm-time { font-size: 15cqw; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fa-alarm-title { font-size: 5.6cqw; font-weight: 600; }
.fa-alarm-stop { position: relative; margin-top: 4cqw; width: 100%; min-height: 15cqw; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 2.4cqw; background: rgb(212, 165, 165); color: #fff; font-size: 5.2cqw; font-weight: 600; text-shadow: 0 1px 1px rgba(74, 63, 58, .35); }
.fa-alarm-stop svg { width: 5.4cqw; height: 5.4cqw; }
.fa-alarm-stop .tap { left: 50%; top: 50%; border-color: #fffcfa; box-shadow: 0 0 0 3px rgba(47, 39, 37, .8), 0 6px 18px rgba(0, 0, 0, .4); }
.fa-alarm-stop .tap::after { background: #fffcfa; }
@media (prefers-reduced-motion: no-preference) {
  [data-alarm="ring"] .journey-stage .phone { animation: alarm-wobble 1.1s var(--ft-ease-standard) 180ms 1 backwards; }
  [data-alarm="ring"] .fa-alarm-bell svg { animation: alarm-bell 1.1s ease-in-out 180ms 1 backwards; transform-origin: 50% 10%; }
}
@keyframes alarm-wobble { 0%, 100% { rotate: 0deg; translate: 0 0; } 12% { rotate: -1.1deg; translate: -2px 0; } 26% { rotate: 1.1deg; translate: 2px 0; } 40% { rotate: -.9deg; translate: -2px 0; } 54% { rotate: .8deg; translate: 1px 0; } 68% { rotate: -.5deg; } 82% { rotate: .3deg; } }
@keyframes alarm-bell { 0%, 100% { rotate: 0deg; } 15% { rotate: -14deg; } 30% { rotate: 12deg; } 45% { rotate: -10deg; } 60% { rotate: 8deg; } 75% { rotate: -4deg; } }
@media (prefers-reduced-motion: reduce) { .fa-alarm, .fa-alarm-card { transition: none; } }
.chapter-clock { font: 300 clamp(2.25rem, 1.8rem + 2vw, 3.25rem)/.9 var(--font-display); color: var(--ft-color-brand-berry); font-variant-numeric: tabular-nums; }
.chapter-concept { margin-top: var(--ft-space-4); color: var(--ft-color-text-secondary); max-width: 34em; }

/* ---------- V4 scenes ---------- */
/* Reconstructed app screens (flow layout). Lengths in --u = one app point at 393pt width. */
.as { --u: calc(100cqw / 393); position: relative; aspect-ratio: 393 / 795; overflow: hidden; background: #fcf9f7; color: #4a3f3a; font-family: Inter, system-ui, sans-serif; font-weight: 400; font-size: calc(15 * var(--u)); line-height: 1.4; text-align: left; -webkit-font-smoothing: antialiased; padding-top: calc(46 * var(--u)); }
.as svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.as p, .as h3, .as ul { margin: 0; padding: 0; list-style: none; }
.as-screen { position: absolute; inset: calc(46 * var(--u)) 0 0; display: flex; flex-direction: column; }
.as:has(.fa-tabs) .as-screen { bottom: calc(83 * var(--u)); }
.as:has(.fa-tabs) .as-body--center { padding-bottom: calc(30 * var(--u)); }
.as .fa-tabs { border-top: 1px solid #f0e8e4; }
.as-screen[hidden] { display: none; }
.as-bar { display: grid; grid-template-columns: calc(40 * var(--u)) 1fr calc(40 * var(--u)); align-items: center; height: calc(48 * var(--u)); padding: 0 calc(20 * var(--u)); flex: none; }
.as-back { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: #f6edf1; display: grid; place-items: center; color: #7d6e66; }
.as-back svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.as-bar-t { text-align: center; font-size: calc(16 * var(--u)); font-weight: 500; }
.as-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u)); }
.as-body--center { align-items: center; justify-content: center; text-align: center; padding-bottom: calc(110 * var(--u)); gap: calc(16 * var(--u)); }
.as-body--dash { padding-top: calc(6 * var(--u)); gap: calc(10 * var(--u)); }
.as-h { font: 300 calc(30 * var(--u))/1.14 var(--font-display); letter-spacing: -.01em; color: #4a3f3a; text-wrap: balance; }
.as-h--s { font-size: calc(23 * var(--u)); }
.as-t { font-size: calc(15 * var(--u)); line-height: 1.45; color: #7d6e66; }
.as-greet { font: 300 calc(24 * var(--u))/1.2 var(--font-display); }
.as-label { font-size: calc(11 * var(--u)); font-weight: 500; letter-spacing: calc(1.2 * var(--u)); text-transform: uppercase; color: #8f4965; margin-top: calc(4 * var(--u)); }
.as-emblem { width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; background: #f6edf1; color: #b65b7f; display: grid; place-items: center; }
.as-emblem svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.as-points { display: grid; gap: calc(10 * var(--u)); text-align: left; align-self: stretch; margin-block: calc(6 * var(--u)); }
.as-points li { display: flex; gap: calc(12 * var(--u)); align-items: flex-start; font-size: calc(14 * var(--u)); line-height: 1.4; padding: calc(12 * var(--u)) calc(14 * var(--u)); background: #fff; border: 1px solid #efe6e1; border-radius: calc(16 * var(--u)); }
.as-points svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #b65b7f; margin-top: calc(1 * var(--u)); }
.as-btn { appearance: none; border: 0; cursor: pointer; align-self: stretch; display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); min-height: calc(52 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(26 * var(--u)); background: #8f4965; color: #fffcfa; font: 500 calc(15 * var(--u))/1.2 Inter, system-ui, sans-serif; text-align: center; }
.as-btn svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.as-btn--static { cursor: default; background: #b65b7f; }
.as-btn--off { opacity: .45; }
.as-btn--ghost { background: #fff; color: #8f4965; border: 1px solid #efe6e1; }
button.as-btn:focus-visible { outline: calc(3 * var(--u)) solid var(--ft-color-focus); outline-offset: calc(2 * var(--u)); }
button.as-btn:not(.as-btn--ghost) { box-shadow: 0 0 0 0 rgba(182, 91, 127, .5); }
.as-code { align-self: stretch; padding: calc(18 * var(--u)) 0; border-radius: calc(18 * var(--u)); background: #fff; border: 1px dashed #dcc3cd; font: 500 calc(26 * var(--u))/1 Inter, system-ui, sans-serif; letter-spacing: calc(3 * var(--u)); color: #8f4965; }
.as-input { align-self: stretch; padding: calc(16 * var(--u)); border-radius: calc(16 * var(--u)); background: #fff; border: 1px solid #e6dbd5; font-size: calc(18 * var(--u)); letter-spacing: calc(3 * var(--u)); color: #c9bdb6; }
.as-status { font-size: calc(13 * var(--u)); color: #7d6e66; display: flex; align-items: center; gap: calc(8 * var(--u)); }
.as-status::before { content: ""; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #e3b9c9; }
.as-card { align-self: stretch; text-align: left; background: #fff; border: 1px solid #efe6e1; border-radius: calc(18 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); display: grid; gap: calc(4 * var(--u)); }
.as-card[hidden] { display: none; }
.as-card--rows { padding-block: calc(2 * var(--u)); gap: 0; }
.as-card-h { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 500; }
.as-card-h svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #b65b7f; }
.as-card-t { font-size: calc(17 * var(--u)); font-weight: 500; line-height: 1.3; }
.as-line { font-size: calc(14 * var(--u)); padding-top: calc(4 * var(--u)); }
.as-row { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); min-height: calc(46 * var(--u)); font-size: calc(14.5 * var(--u)); border-bottom: 1px solid #f3ebe7; }
.as-row:last-child { border-bottom: 0; }
.as-row > svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #b65b7f; }
.as-row--sw { cursor: pointer; }
.as-switch { position: relative; flex: none; width: calc(46 * var(--u)); height: calc(28 * var(--u)); }
.as-switch input { position: absolute; inset: calc(-9 * var(--u)); width: auto; height: auto; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.as-switch i { position: absolute; inset: 0; border-radius: calc(14 * var(--u)); background: #e9dfda; transition: background-color var(--ft-duration-standard) linear; }
.as-switch i::after { content: ""; position: absolute; top: calc(3 * var(--u)); left: calc(3 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(74, 63, 58, .25); transition: transform var(--ft-duration-standard) var(--ft-ease-standard); }
.as-switch input:checked + i { background: #b65b7f; }
.as-switch input:checked + i::after { transform: translateX(calc(18 * var(--u))); }
.as-switch input:focus-visible + i { outline: calc(3 * var(--u)) solid var(--ft-color-focus); outline-offset: calc(2 * var(--u)); }
.as-chips { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.as-chips span { padding: calc(5 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u)); border: 1px dashed #dccfc8; font-size: calc(12 * var(--u)); color: #7d6e66; }
.as-pill { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)); border-radius: calc(10 * var(--u)); background: #f6edf1; color: #8f4965; font-size: calc(11 * var(--u)); font-weight: 500; vertical-align: middle; white-space: nowrap; }
.as-pill svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.as-label--c { text-align: center; }
.as-ring { position: relative; align-self: center; width: calc(190 * var(--u)); height: calc(190 * var(--u)); flex: none; }
.as-ring .jr { width: 100%; height: 100%; display: block; overflow: visible; }
.as-ring .jr * { stroke-linecap: butt; }
.as-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--u)); }
.as-ring-c > span { margin: 0; padding: 0; line-height: 1.1; }
.as-ring-c .fa-daylabel { font-size: calc(8 * var(--u)); letter-spacing: calc(2 * var(--u)); text-transform: uppercase; color: #7d6e66; }
.as-ring-c .fa-daynum { font: 300 calc(46 * var(--u))/1 var(--font-display); letter-spacing: -.03em; }
.as-ring-c .fa-phase { font: 300 calc(11 * var(--u))/1.2 var(--font-display); color: #7d6e66; max-width: 60%; text-align: center; }
.as-received { font-size: calc(12 * var(--u)); color: #7d6e66; text-align: center; margin-top: auto; }
.as-btn--refresh { min-height: calc(44 * var(--u)); }
/* a control the visitor is invited to press */
@media (prefers-reduced-motion: no-preference) { .is-cue { animation: cue 1.6s var(--ft-ease-standard) infinite; } }
.is-cue { outline: calc(2 * var(--u)) solid #b65b7f; outline-offset: calc(3 * var(--u)); }
@keyframes cue { 50% { box-shadow: 0 0 0 calc(9 * var(--u)) rgba(182, 91, 127, 0); } 0% { box-shadow: 0 0 0 0 rgba(182, 91, 127, .45); } }
.is-fresh { animation: fresh 1.4s var(--ft-ease-standard) 1; }
@keyframes fresh { 0% { background: #f6edf1; border-color: #b65b7f; } }

/* scene openings: the human moment in large type, the answer beside it */
.scene-open { display: grid; gap: var(--ft-space-6); }
.moment { font: 300 clamp(2.125rem, 1.35rem + 3.6vw, 4.25rem)/1.08 var(--font-display); letter-spacing: -.022em; text-wrap: balance; max-width: 14em; overflow-wrap: break-word; }
.free-line { margin-top: var(--ft-space-5); font: 500 clamp(1.125rem, 1.05rem + .4vw, 1.375rem)/1.35 var(--font-sans); color: var(--ft-color-action-default); }
.gate { margin-top: var(--ft-space-5); color: var(--ft-color-text-secondary); }
.preview-note { margin-top: var(--ft-space-6); max-width: 46em; }
.mock-note { margin-top: var(--ft-space-6); text-align: center; }
@media (min-width: 900px) { .scene-open { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--ft-space-16); align-items: end; } .scene-open .scene-body { margin-top: 0; } }

/* partner access */
.duet { background: var(--ft-color-mist); }

/* treatment history → PDF */
/* the report page: sizes in em of a container-relative base, so the same markup serves the large sheet and the phone preview */
.paper { container-type: inline-size; background: #fff; border-radius: 6px; box-shadow: var(--ft-shadow-overlay); color: #3c3330; text-align: left; }
.paper-in { font: 400 calc(100cqw / 46)/1.4 Inter, system-ui, sans-serif; padding: 6em 5.4em 4em; display: grid; gap: .9em; }
.paper p, .paper dl, .paper dd { margin: 0; }
.paper-brand { display: flex; align-items: center; gap: .5em; font: 300 1.5em/1 var(--font-display); color: #b65b7f; }
.paper-brand img { width: 1.5em; height: 1.5em; }
.paper-title { font-size: 1.9em; font-weight: 600; line-height: 1.2; margin-top: .4em !important; }
.paper-sub { color: #7d6e66; margin-top: -.6em !important; }
.paper-meta { display: flex; flex-wrap: wrap; gap: .3em 2em; font-size: .86em; color: #7d6e66; }
.paper-note { font-size: .86em; padding: .7em 1em; border-left: .25em solid #b65b7f; background: #f8f1f4; color: #5b4f49; }
.paper-h { font-weight: 600; font-size: 1.08em; margin-top: .6em !important; }
.paper-table { width: 100%; border-collapse: collapse; font-size: .9em; }
.paper-table th { text-align: left; font-weight: 600; background: #f3e4ea; padding: .5em .6em; }
.paper-table td { padding: .55em .6em; border-bottom: 1px solid #eadfda; vertical-align: top; }
.paper-dl { display: grid; font-size: .95em; }
.paper-dl > div { display: grid; grid-template-columns: 9em 1fr; gap: 1em; padding: .5em .6em; border-bottom: 1px solid #f0e8e4; }
.paper-dl dt { color: #7d6e66; }
.paper-dl .is-answer { background: #f8f1f4; border-radius: .4em; border-bottom-color: transparent; box-shadow: inset .25em 0 0 #b65b7f; }
.paper-flag { display: inline-block; margin-left: .8em; padding: .1em .7em; border-radius: 1em; background: #b65b7f; color: #fff; font-size: .82em; font-weight: 500; white-space: nowrap; }
.paper-foot { margin-top: 1.4em !important; font-size: .8em; color: #9a8c85; }
.paper [hidden] { display: none; }
/* report screens in the phone */
.as-row--check { justify-content: flex-start; cursor: pointer; padding-block: calc(8 * var(--u)); }
.as-row--check b { display: block; font-weight: 500; }
.as-row--check small { display: block; font-size: calc(12 * var(--u)); color: #7d6e66; line-height: 1.35; }
.as-check { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.as-check i { border-radius: 50%; background: #fff; border: calc(1.4 * var(--u)) solid #dccfc8; display: grid; place-items: center; transition: none; }
.as-check i::after { display: none; }
.as-check i svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: #fff; stroke-width: 2.6; }
.as-check input:checked + i { background: #b65b7f; border-color: #b65b7f; }
.as-switch--off i { background: #e9dfda; }
.as-count { font-size: calc(13 * var(--u)); }
.as-t--s { font-size: calc(12.5 * var(--u)); }
.as-btn--end { margin-top: auto; }
.as-btn:disabled { opacity: .4; cursor: default; }
.as-page { align-self: stretch; flex: 1; min-height: 0; overflow: hidden; border-radius: calc(12 * var(--u)); border: 1px solid #efe6e1; background: #fff; }
.as-page .paper { box-shadow: none; border-radius: 0; }
.as-pager { display: flex; align-items: center; justify-content: space-between; align-self: stretch; }
.as-pager span { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: #fff; border: 1px solid #efe6e1; display: grid; place-items: center; }
.as-pager svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.as-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: #f4f0ee; border-radius: calc(22 * var(--u)) calc(22 * var(--u)) 0 0; padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(26 * var(--u)); display: grid; gap: calc(12 * var(--u)); box-shadow: 0 calc(-12 * var(--u)) calc(40 * var(--u)) rgba(60, 51, 48, .28); }
.as-sheet[hidden] { display: none; }
.as:has(> .as-sheet:not([hidden]))::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(60, 51, 48, .32); }
.as-sheet-hint { font-size: calc(11 * var(--u)); color: #7d6e66; text-align: center; }
.as-sheet-t { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; }
.as-sheet-t svg, .as-file svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.as-file { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)); background: #fff; border-radius: calc(14 * var(--u)); font-size: calc(14 * var(--u)); }
.as-chips--solid span { border: 0; background: #fff; color: #4a3f3a; font-size: calc(13 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); }
@media (prefers-reduced-motion: no-preference) { .as-sheet:not([hidden]) { animation: sheet-up 320ms var(--ft-ease-standard); } }
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0; } }

/* more reconstructed-screen parts */
.as-btn--deep { background: #8f4965; }
.as-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(6 * var(--u)); align-self: stretch; }
.as-tiles span { display: grid; justify-items: center; gap: calc(3 * var(--u)); padding: calc(10 * var(--u)) 0; border-radius: calc(14 * var(--u)); background: #f6efec; font-size: calc(10.5 * var(--u)); color: #7d6e66; }
.as-tiles b { font: 300 calc(21 * var(--u))/1 var(--font-display); color: #4a3f3a; }
.as-tiles .is-on { background: #fff; border: 1px solid #e3b9c9; }
.as-tiles--deep .is-on { background: #8f4965; border: 0; color: #f3dfe7; }
.as-tiles--deep .is-on b { color: #fff; }
.as-card--meet { background: #fbf6f3; }
.as-q { gap: calc(6 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); }
.as-q-top { display: flex; align-items: center; justify-content: space-between; font-size: calc(11 * var(--u)); color: #7d6e66; }
.as-q-t { font-size: calc(14.5 * var(--u)); font-weight: 500; line-height: 1.35; }
.as-q-a { font-size: calc(13 * var(--u)); color: #5b4f49; padding-left: calc(10 * var(--u)); border-left: calc(2 * var(--u)) solid #e3b9c9; }
.as-q-a small { display: block; font-size: calc(10.5 * var(--u)); color: #7d6e66; }
.as-chip { padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 500; background: #f3ebe7; color: #5b4f49; }
.as-chip--done { background: #8f4965; color: #fff; }
.as-q[data-new] { border-color: #b65b7f; }
.as-fab { position: absolute; right: calc(20 * var(--u)); bottom: calc(18 * var(--u)); width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%; background: #b65b7f; color: #fff; display: grid; place-items: center; box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(143, 73, 101, .35); }
.as-fab svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.as-body--dim { background: rgba(60, 51, 48, .28); }
.as-sheet--form { background: #fcf9f7; bottom: 0; }
.as-field { align-self: stretch; min-height: calc(52 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff; border: calc(1.4 * var(--u)) solid #b65b7f; font-size: calc(15 * var(--u)); line-height: 1.4; }
.as-field--tall { min-height: calc(120 * var(--u)); }
.as-type { display: inline; }
.as-rest { visibility: hidden; }
.as-typed::after { content: ""; display: inline-block; width: 0; height: 1.1em; border-left: calc(1.6 * var(--u)) solid #b65b7f; margin-right: calc(-1.6 * var(--u)); vertical-align: text-bottom; }
@media (prefers-reduced-motion: no-preference) {
  .as-screen:not([hidden]) .as-q[data-new] { animation: fresh 1.6s var(--ft-ease-standard) 1; }
}
@keyframes type { to { clip-path: inset(0 0 0 0); } }
@keyframes caret { 50% { opacity: 0; } }
.as-focus { background: #f8f0f3; border-color: #ecd6de; gap: calc(8 * var(--u)); }
.as-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(4 * var(--u)); padding: calc(3 * var(--u)); background: #fff; border-radius: calc(14 * var(--u)); }
.as-seg label { position: relative; cursor: pointer; }
.as-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.as-seg span { display: grid; place-items: center; min-height: calc(36 * var(--u)); border-radius: calc(11 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 500; color: #7d6e66; }
.as-seg input:checked + span { background: #8f4965; color: #fff; }
.as-seg input:focus-visible + span { outline: calc(3 * var(--u)) solid var(--ft-color-focus); outline-offset: calc(1 * var(--u)); }
.as-link { appearance: none; border: 0; background: none; cursor: pointer; padding: calc(8 * var(--u)) 0; font: 500 calc(13.5 * var(--u))/1.2 Inter, system-ui, sans-serif; color: #8f4965; display: grid; justify-items: center; }
.as-link span { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); }
.as-link span[hidden] { display: none; }
.as-link svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.as-link:focus-visible { outline: calc(3 * var(--u)) solid var(--ft-color-focus); border-radius: calc(8 * var(--u)); }
.as-explain { display: grid; gap: calc(4 * var(--u)); padding: calc(10 * var(--u)); background: #fff; border-radius: calc(12 * var(--u)); }
.as-explain[hidden] { display: none; }
.as-topic { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); background: #fff; border: 1px solid #efe6e1; border-radius: calc(16 * var(--u)); align-self: stretch; }
.as-topic > svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: #b65b7f; }
.as-topic > svg:last-child { width: calc(16 * var(--u)); color: #b9aca5; }
.as-topic > span { flex: 1; display: grid; gap: calc(3 * var(--u)); }
.as-topic b { font-size: calc(14 * var(--u)); font-weight: 500; }
.as-topic small { font-size: calc(11 * var(--u)); color: #7d6e66; }
.as-topic i { height: calc(3 * var(--u)); border-radius: 2px; background: linear-gradient(90deg, #b65b7f calc(var(--p) * 100%), #efe6e1 0); transition: background var(--ft-duration-panel) linear; }

/* selfcare: a deliberately slower, wider, darker room */
.breath { background: linear-gradient(var(--ft-color-canvas), #efe3e6 18%, #e9dbe0 82%, var(--ft-color-canvas)); padding-block: calc(var(--section) * 1.5); }
.breath-in { display: grid; justify-items: center; text-align: center; gap: var(--ft-space-8); }
.breath .moment { max-width: 12em; }
.breath .scene-body { margin-top: 0; max-width: 31em; }
.breath-stage { position: relative; width: min(84vw, 26rem); aspect-ratio: 1; display: grid; place-items: center; margin-block: var(--ft-space-6); }
.breath-orb { position: absolute; inset: 0; scale: .72; }
.breath-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(143, 73, 101, .28); }
.breath-orb i:nth-child(2) { inset: 9%; border-color: rgba(143, 73, 101, .2); background: rgba(255, 252, 250, .55); }
.breath-orb i:nth-child(3) { inset: 20%; border: 0; background: radial-gradient(closest-side, #fffcfa, rgba(255, 252, 250, .2)); }
.breath-cue { position: relative; margin: 0; width: 70%; min-height: 3em; display: grid; place-items: center; }
.breath-cue span { grid-area: 1 / 1; font: 300 clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem)/1.15 var(--font-display); letter-spacing: -.012em; opacity: 0; text-wrap: balance; }
.breath-cue .breath-idle { opacity: 1; }
/* cue and orb are set from the recording's clock (scenes.js); CSS only cross-fades the cue */
.breath-cue span { transition: opacity 200ms linear; }
.breath[data-cue] .breath-idle { opacity: 0; }
.breath[data-cue="0"] .breath-cue span:nth-child(1), .breath[data-cue="1"] .breath-cue span:nth-child(2), .breath[data-cue="2"] .breath-cue span:nth-child(3) { opacity: 1; }
.breath-more { font: 400 16px/1.5 var(--font-sans); color: var(--ft-color-text-secondary); max-width: 36em; text-wrap: pretty; }
.breath-btn { min-width: 11rem; min-height: 52px; font-size: 17px; }
.breath-rhythm { font: 500 15px/1.5 var(--font-sans); color: var(--ft-color-text-secondary); max-width: 30em; }
.breath-proof { --phone-w: min(60vw, 250px); display: grid; justify-items: center; gap: var(--ft-space-3); margin-top: var(--ft-space-8); }
.breath-note { max-width: 36em; background: rgba(255, 252, 250, .6); }
.breath-row { display: grid; justify-items: center; gap: var(--ft-space-8); width: 100%; }
.breath-main { display: grid; justify-items: center; gap: var(--ft-space-5); }
@media (min-width: 900px) { .breath .moment { max-width: 16em; } }
@media (min-width: 1100px) {
  .breath-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--ft-space-12); margin-top: var(--ft-space-6); }
  .breath-main { grid-column: 2; }
  .breath-stage { width: clamp(22rem, 32vw, 30rem); margin-block: 0; }
  .breath-proof { grid-column: 3; justify-self: start; margin-top: 0; --phone-w: clamp(200px, 17vw, 250px); }
}


/* diagnostic compass */
.compass { background: var(--ft-color-surface); }

/* the thread between scenes: a few unrolled ring ticks and the thought that leads on */
.thread { display: grid; justify-items: start; gap: var(--ft-space-3); margin: 0 0 var(--ft-space-10); font: 500 clamp(1rem, .95rem + .3vw, 1.1875rem)/1.3 var(--font-sans); color: var(--ft-color-action-default); }
.thread i { width: 26px; height: clamp(3.5rem, 2.5rem + 4vw, 6rem); margin-top: calc(-1 * clamp(3.5rem, 2.5rem + 4vw, 6rem) / 2 - var(--ft-space-10)); background: repeating-linear-gradient(to bottom, var(--ft-color-brand-berry) 0 2px, transparent 2px 9px); -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); position: relative; }
.thread i::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--ft-color-brand-berry); background: var(--ft-color-surface); }
.thread span { margin-top: 10px; }
.breath .thread { justify-items: center; }
/* scenes follow each other without rules; colour fields blend into the canvas */
.scene { padding-block: var(--section); }
.duet { background: linear-gradient(var(--ft-color-canvas), var(--ft-color-mist) 9rem, var(--ft-color-mist) calc(100% - 9rem), var(--ft-color-canvas)); }
.compass { background: linear-gradient(var(--ft-color-canvas), var(--ft-color-surface) 9rem, var(--ft-color-surface) calc(100% - 9rem), var(--ft-color-canvas)); }
.explorer { background: linear-gradient(var(--ft-color-canvas), var(--ft-color-mist) 9rem, var(--ft-color-mist) calc(100% - 6rem), var(--ft-color-canvas)); }
.explorer .scene-open { margin-bottom: var(--ft-space-4); }
.explorer-ring figcaption { position: absolute; left: 0; right: 0; bottom: -1.2em; text-align: center; }
.explorer-ring { margin: 0 0 var(--ft-space-6); }
@media (min-width: 900px) { .explorer-view { grid-template-columns: minmax(0, 1fr) minmax(0, 420px) !important; } .explorer-view .explorer-ring { order: 2; } .explorer-phases li { font-size: clamp(1.1875rem, 1.1rem + .5vw, 1.5rem); min-height: 56px; } }

/* controls inside the reconstructed screens keep a real touch size on small phones */
.explorer-ring { box-sizing: border-box; max-width: 100%; justify-self: center; }
.explorer { overflow-x: clip; }

/* ---------- V5: guided stories (shared by all product scenes) ---------- */
.story { padding-block: var(--section) calc(var(--section) * .6); }
.story-head { display: grid; gap: var(--ft-space-5); max-width: 46rem; }
.story-label { font: 500 clamp(1rem, .95rem + .3vw, 1.1875rem)/1.3 var(--font-sans); color: var(--ft-color-action-default); }
.story-grid { display: grid; margin-top: var(--ft-space-8); }
.story-stage { --phone-w: min(70vw, calc(50svh / 1.22), 300px); position: sticky; top: var(--ft-header-height); z-index: 4; height: calc(var(--phone-w) * 1.22 + 46px); margin-inline: calc(-1 * var(--margin)); overflow: hidden; display: grid; justify-items: center; align-content: start; background: var(--story-bg, var(--ft-color-canvas)); border-bottom: 1px solid var(--ft-color-border-subtle); }
.story-stage .phone { margin-top: 10px; }
.story-nav { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 36px; display: flex; justify-content: center; gap: 6px; align-items: center; background: var(--story-bg, var(--ft-color-canvas)); border-top: 1px solid var(--ft-color-border-subtle); margin: 0; padding: 0; list-style: none; }
.story-nav a { display: grid; place-items: center; width: 34px; height: 36px; }
.story-nav a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ft-color-border-control); transition: width var(--ft-duration-standard) var(--ft-ease-standard), background-color var(--ft-duration-standard) linear; }
.story-nav a[aria-current]::before { width: 22px; border-radius: 4px; background: var(--ft-color-brand-berry); }
.story-steps { padding-bottom: 6svh; }
.story-step { padding-block: 12svh; display: grid; align-content: center; gap: var(--ft-space-4); scroll-margin-top: calc(var(--ft-header-height) + min(70vw, 50svh / 1.22, 300px) * 1.22 + 60px); transition: opacity 240ms linear; }
.story.is-live .story-step:not(.is-current) { opacity: .34; }
.story-kicker { font: 500 15px/1.3 var(--font-sans); letter-spacing: .02em; color: var(--ft-color-action-default); display: flex; align-items: baseline; gap: 10px; }
.story-kicker span { display: none; }
/* the step head wraps kicker and heading since V6; on desktop it keeps the V5 rhythm of the step grid */
@media (min-width: 1024px) { .story-step-head { display: grid; gap: var(--ft-space-4); } }
.story-kicker b { font: 300 2.5rem/.9 var(--font-display); color: var(--ft-color-brand-berry); }
.story-step h3 { font: 300 clamp(1.75rem, 1.3rem + 2vw, 2.875rem)/1.14 var(--font-display); letter-spacing: -.016em; text-wrap: balance; max-width: 15em; }
.story-step p { font-size: var(--ft-scene); line-height: 1.5; max-width: 30em; color: var(--ft-color-text-secondary); text-wrap: pretty; }
.story-step p.story-kicker { color: var(--ft-color-action-default); font-size: 15px; }
.story [tabindex="-1"]:focus { outline: none; }
html:not(.js) .story-stage { position: relative; top: 0; }
@media (min-width: 1024px) {
  .story-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ft-space-16); margin-top: 0; }
  .story--flip .story-steps { grid-column: 2; grid-row: 1; }
  .story--flip .story-stage { grid-column: 1; grid-row: 1; }
  .story-stage { --phone-w: clamp(270px, calc((100svh - var(--ft-header-height) - 120px) / 2.1), 380px); grid-column: 2; grid-row: 1; height: calc(100svh - var(--ft-header-height)); margin: 0; overflow: visible; background: none; border: 0; align-content: center; align-self: start; }
  .story-stage .phone { margin-top: 0; }
  .story-nav { position: static; height: 44px; background: none; border: 0; margin-top: var(--ft-space-4); }
  .story-nav a { height: 44px; width: 40px; }
  .story-step { min-height: 64svh; padding-block: var(--ft-space-10); scroll-margin-top: 20svh; }
  .story--compact .story-step { min-height: 52svh; }
}
/* the demonstrated touch: dark ring with a light core, so it reads on pink and on white controls alike */
.tap { position: absolute; z-index: 6; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none; opacity: 0; scale: 1.5; border: 2.5px solid #2f2725; background: rgba(255, 252, 250, .55); box-shadow: 0 0 0 5px rgba(255, 252, 250, .9), 0 6px 18px rgba(47, 39, 37, .3); transition: opacity 180ms linear, scale 260ms var(--ft-ease-standard), background-color 160ms linear; }
.tap::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #2f2725; scale: 0; transition: scale 200ms var(--ft-ease-standard); }
.tap[data-phase="1"] { opacity: 1; scale: 1; }
.tap[data-phase="2"] { opacity: 1; scale: .78; background: rgba(255, 252, 250, .9); }
.tap[data-phase="2"]::after { scale: 1; }
.is-tapped { filter: brightness(.86); transform: scale(.975); transition: transform 140ms var(--ft-ease-standard), filter 140ms linear; }
@media (prefers-reduced-motion: reduce) { .tap, .tap::after, .is-tapped, .story-step, .story-nav a::before { transition: none; } }

/* devices inside a story: the camera pans to where the action is on narrow screens */
.story-phone, .story-stage .phone { transition: translate 420ms var(--ft-ease-standard), scale 420ms var(--ft-ease-standard), opacity 300ms linear; }
@media (max-width: 1023px) { .story-stage .as .fa-tabs { display: none; } .story-stage .as:has(.fa-tabs) .as-screen { bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .story-stage .phone { transition: none; } }
.ask.story { --story-bg: var(--ft-color-canvas); }

/* ---------- V5: static controls inside the demonstrated screens ---------- */
.as-sw i { background: #e9dfda; }
.as-sw.is-on i { background: #b65b7f; }
.as-sw.is-on i::after { transform: translateX(calc(18 * var(--u))); }
.as-check.is-on i { background: #b65b7f; border-color: #b65b7f; }
.as-seg--static > span.is-on { background: #8f4965; color: #fff; }
.as-seg--static > span { transition: background-color 200ms linear, color 200ms linear; }
.as-link [hidden], .as-received [hidden] { display: none; }
.as-field--set { border-color: #e6dbd5; }
.as-row > b { font-weight: 600; font-size: calc(16 * var(--u)); }
.as-row--kv { flex-direction: column; align-items: flex-start; justify-content: center; gap: calc(2 * var(--u)); padding-block: calc(8 * var(--u)); }
.as-row--kv small { font-size: calc(12.5 * var(--u)); color: #7d6e66; line-height: 1.35; }
.as-card--mark { border-color: #b65b7f; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(182, 91, 127, .14); }
.as-ring--s { width: 62%; align-self: center; }
.story .as [hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .story [data-fresh]:not([hidden]) { animation: fresh 1.4s var(--ft-ease-standard) 1; } .story:not([data-state~="fresh"]) [data-fresh] { animation: none; } }
.story-note { margin-top: var(--ft-space-8); max-width: 44em; }
.story-quote { display: grid; gap: 6px; padding: 16px 20px; border-left: 2px solid var(--ft-color-brand-berry); background: var(--ft-color-mist); border-radius: 0 14px 14px 0; max-width: 30em; }
.story-quote small { font: 500 14px/1.4 var(--font-sans); color: var(--ft-color-action-default); }
.story-quote q { font: 300 clamp(1.1875rem, 1.1rem + .6vw, 1.5rem)/1.3 var(--font-display); color: var(--ft-color-text-primary); quotes: none; }
.story-head .gate, .story-head .free-line { margin-top: 0; }
.compass.story { --story-bg: var(--ft-color-surface); }
.duet.story { --story-bg: var(--ft-color-mist); }
.story { overflow-x: clip; }

/* the camera on narrow screens: which part of the device the step is about */
@media (max-width: 1023px) {
}
.story-nav a { width: min(40px, calc((100vw - 24px) / var(--steps, 5))); height: 44px; }
.story-nav { height: 44px; }
@media (max-width: 1023px) { .story-stage { height: calc(var(--phone-w) * 1.22 + 54px); } }

/* the demonstrated touch, second pass: an open ring, so the label under it stays readable */
.tap { background: rgba(255, 252, 250, .18); width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.tap[data-phase="2"] { background: rgba(47, 39, 37, .22); }
.tap::after { inset: 14px; opacity: .85; }

/* ---------- partner access: two devices, one in focus ---------- */
.duo { position: relative; display: grid; justify-items: center; width: 100%; }
.duo > .phone { grid-area: 2 / 1; transition: translate 520ms var(--ft-ease-standard), scale 520ms var(--ft-ease-standard), opacity 320ms linear; }
.duo-tags { grid-area: 1 / 1; display: grid; margin: 8px 0 0; font: 500 14px/1.2 var(--font-sans); color: var(--ft-color-text-primary); }
.duo-tags span { grid-area: 1 / 1; padding: 6px 14px; border-radius: 999px; background: var(--ft-color-surface); box-shadow: inset 0 0 0 1px var(--ft-color-border-subtle); opacity: 0; transition: opacity 240ms linear; }
.story[data-focus="owner"] .duo-tags [data-for="owner"], .story[data-focus="partner"] .duo-tags [data-for="partner"] { opacity: 1; }
.duet .story-stage { --phone-w: min(66vw, calc(44svh / 1.22), 290px); height: calc(var(--phone-w) * 1.22 + 54px + 44px); }
.duet .story-stage .phone { margin-top: 8px; }
.story[data-focus="owner"] .duo [data-device="owner"], .story[data-focus="partner"] .duo [data-device="partner"] { z-index: 2; }
.story[data-focus="owner"] .duo [data-device="partner"] { translate: 84% 0; scale: .86; opacity: .4; transform-origin: 50% 20%; }
.story[data-focus="partner"] .duo [data-device="owner"] { translate: -84% 0; scale: .86; opacity: .4; transform-origin: 50% 20%; }
@media (max-width: 1023px) {
}
@media (min-width: 1024px) {
  .duet .story-stage { --phone-w: clamp(250px, calc((100svh - var(--ft-header-height) - 170px) / 2.1), 350px); height: calc(100svh - var(--ft-header-height)); }
  .duo-tags { margin: 0 0 12px; font-size: 15px; }
  .story[data-focus="owner"] .duo [data-device="owner"] { translate: -20% 0; }
  .story[data-focus="owner"] .duo [data-device="partner"] { translate: 52% 0; scale: .8; opacity: .5; }
  .story[data-focus="partner"] .duo [data-device="partner"] { translate: 20% 0; }
  .story[data-focus="partner"] .duo [data-device="owner"] { translate: -52% 0; scale: .8; opacity: .5; }
}
@media (prefers-reduced-motion: reduce) { .duo > .phone, .duo-tags span { transition: none; } }

/* ---------- treatment history → PDF: one set, eight states ---------- */
.recall .story-stage { --story-bg: var(--ft-color-canvas); }
.pdf-set { position: relative; width: 100%; height: calc(var(--phone-w) * 1.22 + 10px); container-type: size; overflow: hidden; }
.pdf-set > * { position: absolute; transition: translate 620ms var(--ft-ease-standard), scale 620ms var(--ft-ease-standard), opacity 360ms linear, rotate 620ms var(--ft-ease-standard); }
.pdf-q { inset: 0; display: grid; place-content: center; justify-items: center; gap: 2cqh; padding: 0 8cqw; text-align: center; opacity: 0; }
.pdf-q p { font: 500 clamp(14px, 3.4cqw, 16px)/1.3 var(--font-sans); color: var(--ft-color-action-default); }
.pdf-q blockquote { margin: 0; font: 300 clamp(1.375rem, 6.6cqw, 2.5rem)/1.16 var(--font-display); letter-spacing: -.014em; text-wrap: balance; color: var(--ft-color-text-primary); }
.story[data-state~="q"] .pdf-q { opacity: 1; }
.story[data-state~="src"] .pdf-q { translate: 0 -37cqh; scale: .62; }
.story[data-state~="answer"] .pdf-q { opacity: 0; }
.pdf-src { inset: 0; margin: 0; padding: 0; list-style: none; }
.src { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); rotate: var(--r); opacity: 0; scale: .7; translate: 0 6cqh; transition: opacity 320ms linear, scale 520ms var(--ft-ease-standard), translate 520ms var(--ft-ease-standard); background: #fff; border-radius: 6px; box-shadow: var(--ft-shadow-elevated); font: 400 clamp(11px, 3.1cqw, 15px)/1.3 var(--font-sans); color: var(--ft-color-text-primary); }
.story[data-state~="src"] .src { opacity: 1; scale: 1; translate: calc((var(--t, 0) - .5) * var(--dx)) calc((var(--t, 0) - .5) * var(--dy)); transition: opacity 320ms linear, scale 520ms var(--ft-ease-standard); }
.story[data-state~="doc"] .src { opacity: 0; scale: .9; translate: calc(var(--dx) * 5) 10cqh; }
.src--note { width: 34cqw; padding: 2.6cqw 3cqw 3.4cqw; background: #fbf1c8; border-radius: 2px; font: italic 400 clamp(13px, 4cqw, 19px)/1.25 var(--font-display); }
.src--letter { width: 36cqw; padding: 3cqw; display: grid; gap: 1.4cqw; }
.src--letter b, .src--lab b { font-weight: 600; font-size: .92em; }
.src--letter i { height: 1.1cqw; min-height: 3px; border-radius: 2px; background: #e9dfda; }
.src--letter i:nth-of-type(2) { width: 82%; } .src--letter i:nth-of-type(4) { width: 56%; }
.src--file { display: flex; align-items: center; gap: 1.6cqw; padding: 2.4cqw 3cqw; border-radius: 999px; background: var(--ft-color-soft); }
.src--file svg { width: 4.4cqw; min-width: 16px; height: auto; color: var(--ft-color-brand-berry); }
.src--lab { width: 32cqw; padding: 2.6cqw 3cqw; display: grid; gap: 1.4cqw; border-top: 3px solid #9ab7b0; border-radius: 3px; }
.src--lab span { display: grid; gap: 1.2cqw; }
.src--lab span i { height: 1.1cqw; min-height: 3px; border-radius: 2px; background: linear-gradient(90deg, #cfdcd8 34%, transparent 34% 62%, #e9dfda 62%); }
.src--photo { width: 30cqw; padding: 1.6cqw 1.6cqw 2.2cqw; display: grid; gap: 1.2cqw; text-align: center; font-size: .86em; }
.src--photo i { aspect-ratio: 4 / 3; border-radius: 3px; background: repeating-linear-gradient(0deg, transparent 0 12%, rgba(74, 63, 58, .16) 12% 14%), repeating-linear-gradient(90deg, transparent 0 22%, rgba(74, 63, 58, .12) 22% 23.5%), linear-gradient(160deg, #e9dcd2, #d8c7bb); rotate: -2deg; }
.src--thought { padding: 2.4cqw 3.4cqw; border-radius: 18px 18px 18px 4px; background: #efe6e1; font-weight: 500; }
.pdf-device, .pdf-peer { left: 50%; top: 0; margin-left: calc(var(--phone-w) / -2); opacity: 0; translate: 0 8cqh; }
.pdf-device .phone, .pdf-peer .phone { margin: 0; }
.story[data-state~="phone"] .pdf-device { opacity: 1; translate: 0 0; }
/* the hand-over: the visitor's phone steps back, the second device takes the window, the PDF travels across once */
.story[data-state~="hand"] .pdf-device { opacity: .5; translate: -30cqw 5cqh; scale: .62; transform-origin: 50% 0; }
.pdf-peer { translate: 34cqw 4cqh; scale: .9; transform-origin: 50% 0; }
.story[data-state~="hand"] .pdf-peer { opacity: 1; translate: 13cqw 3cqh; scale: .84; }
.as-peer-meta { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.as-peer-meta svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: #b65b7f; }
.as-page--tall { flex: none; }
.pdf-tags { justify-items: center; margin: 0 0 10px; }
.story[data-focus="peer"] .duo-tags [data-for="peer"] { opacity: 1; }
.story[data-focus=""] .pdf-tags span { opacity: 0; }
.pdf-fly { left: 50%; top: 22cqh; width: 30cqw; margin-left: -15cqw; opacity: 0; translate: 13cqw 0; scale: .9; pointer-events: none; transition: none; }
.pdf-fly .paper-in { font-size: calc(30cqw / 16); padding: 5em 4.4em 3.4em; }
@media (prefers-reduced-motion: no-preference) { .story[data-state~="hand"]:not([data-state~="answer"]) .pdf-fly { animation: pdf-fly 900ms var(--ft-ease-standard) 80ms 1 backwards; } }
@keyframes pdf-fly { 0% { opacity: 0; translate: -30cqw 14cqh; scale: .5; rotate: -6deg; } 14% { opacity: 1; } 70% { opacity: 1; translate: 13cqw 4cqh; scale: .9; rotate: 2deg; } 100% { opacity: 0; translate: 13cqw 2cqh; scale: 1; rotate: 0deg; } }
.pdf-print { left: 0; bottom: 22cqh; width: 26cqw; display: grid; gap: 8px; justify-items: center; opacity: 0; translate: 0 4cqh; rotate: -4deg; }
.pdf-print-sheet { width: 100%; box-shadow: var(--ft-shadow-elevated); }
/* V7 fix: the caption style used to match every paragraph of the sheet (".pdf-print p"), which blew the document up to
   body size, centred and tilted each line and pushed the sheet out of the stage. Only the caption is addressed now; the
   sheet keeps the scale every .paper has (font-size from its own width). */
.pdf-print .paper-in { padding: 5em 4.4em 3.4em; }
.pdf-print > p { font: 500 14px/1.3 var(--font-sans); color: var(--ft-color-text-primary); text-align: center; rotate: 4deg; }
.story[data-state~="answer"] .pdf-print { opacity: 1; translate: 0 0; transition-delay: 160ms; }
.story[data-state~="answer"] .pdf-device { opacity: 0; }
.story[data-state~="answer"] [data-device="peer"] .is-answer { background: rgba(182, 91, 127, .18); box-shadow: 0 0 0 .5em rgba(182, 91, 127, .18); border-radius: .3em; }
.pdf-answer { left: 50%; bottom: 5cqh; translate: -50% 2cqh; width: max-content; max-width: 86cqw; display: grid; justify-items: center; gap: 2px; padding: 10px 18px; border-radius: 14px; background: var(--ft-color-brand-berry); color: #fff; font: 300 clamp(1.125rem, 5cqw, 1.75rem)/1.2 var(--font-display); opacity: 0; box-shadow: var(--ft-shadow-overlay); z-index: 3; }
.pdf-answer small { font: 500 12px/1.3 var(--font-sans); opacity: .86; }
.story[data-state~="answer"] .pdf-answer { opacity: 1; translate: -50% 0; transition-delay: 200ms; }
@media (min-width: 1024px) { .pdf-answer { left: 63%; bottom: 9cqh; } }
.pdf-symbol { left: 3cqw; right: 3cqw; bottom: 1cqh; z-index: 4; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ft-color-canvas) 92%, transparent); text-align: center; font: 500 14px/1.35 var(--font-sans); color: var(--ft-color-text-secondary); opacity: 0; left: 50%; right: auto; translate: -50% 0; width: max-content; max-width: 92cqw; }
.story[data-state~="hand"] .pdf-symbol { opacity: 1; }
@media (max-width: 1023px) {
}
@media (min-width: 1024px) {
  .recall .story-stage { --phone-w: clamp(250px, calc((100svh - var(--ft-header-height) - 150px) / 2.1), 340px); }
  .pdf-set { height: calc(var(--phone-w) * 2.05 + 20px); overflow: visible; }
  .story[data-state~="src"] .pdf-q { translate: 0 -40cqh; }
  .src { font-size: clamp(13px, 2.6cqw, 16px); }
}
@media (prefers-reduced-motion: reduce) { .pdf-set > *, .src, .pdf-answer { transition: none !important; } .story[data-state~="src"] .src { translate: none; } }
html:not(.js) .pdf-q { opacity: 1; }
.duo-tags { position: relative; z-index: 5; }

.duo-tags i { font-style: normal; } .tag-s { display: none; }

/* ==========================================================================
   V8: the story on a phone. Everything in this file applies below 1024 px only (plus the --svh helper).
   Desktop compositions are untouched.

   One layout for the hero and every guided scene:
   - The complete phone is shown, never a part of it. It takes about half of the usable height (--phone-h).
   - Phone, a slim progress row and the text of the current step form one unit (.m-pin) that stays under the header
     while the scene runs. The page scrolls along an empty track (.m-track); the scroll position is the one leading
     state. What changes, changes inside the phone and in the text directly below it.
   - The texts of all steps lie on top of each other in one grid cell. The cell is as tall as the longest text,
     so a change of step never moves the phone, and no height is fixed by hand.
   - If the longest text does not fit under the phone (very small screens, large text), the script switches the scene
     to "flow": the phone stays under the header and the texts scroll past as ordinary blocks. Without JavaScript the
     page is in flow as well.
   Heights hang on the small viewport (svh), so a browser bar sliding in or out resizes nothing. No dvh anywhere.
   ========================================================================== */
:root { --svh: 1vh; }
@supports (height: 1svh) { :root { --svh: 1svh; } }
.m-track, .m-pin { display: contents; }
.chapter-short, .journey-note--m { display: none; }

@media (max-width: 1023px) {
  .journey, .story {
    --use: calc(var(--svh) * 100 - var(--ft-header-height));            /* usable height under the header */
    --bar: 44px;                                                        /* progress row */
    --phone-h: clamp(232px, max(var(--use) * .45, min(var(--use) * .55, var(--use) - 320px)), 460px);             /* the complete device: about half of it */
    --step-len: calc(var(--svh) * 58);                                  /* scroll distance of one step while pinned */
    --stage-h: calc(var(--phone-h) + var(--bar) + 14px);
    --stick: calc(var(--ft-header-height) + var(--stage-h));
  }
  .journey { --phone-ratio: 2.052; }
  .story { --phone-ratio: 1.967; }

  /* ---------- the stage: complete phone, progress row beneath ---------- */
  .journey-grid, .story-grid { display: block; }
  .journey-stage, .story-stage, .duet .story-stage, .recall .story-stage { position: sticky; top: var(--ft-header-height); z-index: 2; height: var(--stage-h); min-height: 0; margin: 0 calc(-1 * var(--margin)); padding: 10px 0 0; display: grid; grid-template-rows: var(--phone-h) var(--bar); justify-items: center; align-content: start; overflow: hidden; background: var(--story-bg, var(--ft-color-canvas)); }
  .journey-stage, .story-stage, .duet .story-stage, .recall .story-stage, .pdf-device, .pdf-peer { --phone-w: calc(var(--phone-h) / var(--phone-ratio)); }
  .stage-ring { display: none; }
  .journey-stage .phone, .story-stage .phone, .story-stage .phone.story-phone { width: var(--phone-w); margin: 0; translate: none; scale: none; }
  .journey[data-alarm] .journey-stage .phone { animation: none; }       /* the device never moves; see the alarm rule below */
  .journey-nav, .story-nav { position: static; grid-row: 2; width: 100%; height: var(--bar); margin: 0; padding: 0 var(--margin); border: 0; background: none; }

  /* ---------- text ---------- */
  .chapter-mark { display: block; margin-bottom: 6px; }
  .chapter-mark .daymark-label, .chapter-mark .daymark-num, .chapter-clock { display: none; }
  .chapter-phase { padding-bottom: 0; font: 600 15px/1.3 var(--font-sans); color: var(--ft-color-brand-berry); }
  .chapter-h, .story-step h3 { font-size: clamp(1.375rem, 1.05rem + 1.9vw, 1.75rem); line-height: 1.14; max-width: none; text-wrap: balance; }
  .chapter-head, .story-step-head { position: static; margin: 0; padding: 0; background: none; }
  .chapter-p, .chapter-app { display: none; }                           /* the short line carries the phone; the long texts stay on desktop */
  .chapter-short { display: block; margin-top: 8px; font-size: 1rem; line-height: 1.45; color: var(--ft-color-text-primary); }
  .chapter-concept { margin-top: 8px; font-size: 14px; line-height: 1.35; }
  .chapter-example { margin-top: 10px; gap: 8px; }
  .chapter-example .btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
  /* the note belongs to the example: it takes the place of the short line while the example is shown */
  .chapter-example .small { display: none; font-size: 14px; line-height: 1.4; }
  .chapter-example:has([aria-pressed="true"]) .small { display: block; }
  .chapter:has([data-jr-example][aria-pressed="true"]) .chapter-short { display: none; }
  .story-quote { margin-top: 8px; padding: 8px 12px; }
  .story-quote q { font-size: 1rem; line-height: 1.35; }
  .story-kicker { margin-bottom: 4px; }
  .story-kicker b { display: none; }
  .story-kicker span { display: inline; font: 600 15px/1.3 var(--font-sans); color: var(--ft-color-brand-berry); letter-spacing: 0; }
  .story-step > p { margin-top: 8px; font-size: 1rem; line-height: 1.45; }
  .journey-note { display: none; }
  .journey-note--m { display: block; margin: var(--ft-space-6) 0 0; }

  /* ---------- flow (fallback, and without JavaScript): the phone stays, the texts scroll ---------- */
  .chapter, .story-step { display: block; min-height: calc(var(--use) - var(--stage-h) - 8px); padding-block: 14px 22px; scroll-margin-top: calc(var(--stick) + 4px); }
  .js .chapter--more:not(.is-open, :target) { display: none; }
  .is-flow .chapter:not(.is-current), .is-flow.is-live .story-step:not(.is-current) { opacity: .5; }

  /* ---------- pinned: phone, progress and the current text as one unit ---------- */
  .m-track { transition: none !important; }                          /* its height must be final the moment it is set */
  .is-pinned .m-track { display: block; height: calc(var(--use) + (var(--n) + var(--tail, 0)) * var(--step-len)); }
  .story.is-pinned .m-track { --tail: .5; }
  .journey.is-pinned .m-track { --tail: .3; }                          /* the last moment stays a little before the unit lets go */
  .is-pinned .m-pin { position: sticky; top: var(--ft-header-height); height: var(--use); display: grid; grid-template-rows: var(--stage-h) minmax(0, 1fr); overflow: hidden; }
  .is-pinned .journey-stage, .is-pinned .story-stage { position: static; }
  .is-pinned .journey-chapters, .is-pinned .story-steps { display: grid; align-content: start; align-items: start; min-height: 0; padding: 12px 0 0; }
  .is-pinned .chapter, .is-pinned .story-step { grid-area: 1 / 1; min-height: 0; padding: 0; opacity: 0; visibility: hidden; transition: none; }                       /* the old text leaves at once, so two texts never show through each other */
  .is-pinned .chapter.is-current, .is-pinned .story-step.is-current { opacity: 1; visibility: visible; transition: opacity 220ms linear; }

  /* ---------- hero ---------- */
  .journey-intro { display: flex; flex-direction: column; padding-block: var(--ft-space-5) var(--ft-space-5); }
  .journey-intro .kicker { margin-bottom: 10px; }
  .journey-intro .h1 { font-size: clamp(2rem, 1.3rem + 4.4vw, 2.75rem); }
  .journey-intro .lead { margin-top: var(--ft-space-4); }
  .journey-intro .prelaunch, .journey-intro .stores { margin-top: var(--ft-space-5); }
  .scroll-hint { display: none; }
  /* progress: eight equal, finger-sized segments; passed days in berry, the current one filled */
  .journey-nav ol { height: 100%; max-width: 420px; margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .journey-nav a { position: relative; z-index: 0; min-width: 0; height: var(--bar); display: grid; place-items: center; font: 600 14px/1 var(--font-sans); -webkit-tap-highlight-color: transparent; }
  .journey-nav a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 2px; margin: 0; border-radius: 0; background: var(--ft-color-border-subtle); }
  .journey-nav a::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 30px; height: 26px; margin: -12px 0 0 -15px; border-radius: 999px; background: transparent; }
  .journey-nav li:has(~ li a[aria-current]) a { color: var(--ft-color-brand-berry); }
  .journey-nav li:has(~ li a[aria-current]) a::after, .journey-nav a[aria-current]::after { background: var(--ft-color-brand-berry); }
  .journey-nav a[aria-current] { color: #fff; }
  .journey-nav a[aria-current]::before { background: var(--ft-color-brand-deep); }
  .journey-nav .is-more a { font-weight: 400; }

  /* ---------- guided scenes ---------- */
  .story { padding-block: calc(var(--section) * .7) calc(var(--section) * .3); }
  .story-grid { margin-top: var(--ft-space-5); }
  .story-nav { display: flex; justify-content: center; align-items: center; gap: 0; }
  .story-nav a { width: 36px; height: var(--bar); -webkit-tap-highlight-color: transparent; }  /* every step stays a finger-sized target; in-between steps only show a smaller mark */
  .story-nav .is-minor a::before { scale: .6; }
  .story-stage .tap, .journey-stage .tap { scale: .6; }                 /* the tap mark follows the size of the device */
  /* two devices: one in focus, the other one is not shown; the section takes a second tone on the partner's phone */
  .duo { display: grid; height: var(--phone-h); justify-items: center; gap: 0; }
  .duo > .phone { grid-area: 1 / 1; transition: opacity 240ms linear; }
  .duo-tags { display: none; }
  .story[data-focus="owner"] .duo [data-device="partner"], .story[data-focus="partner"] .duo [data-device="owner"] { opacity: 0; translate: none; scale: none; }
  .duet { transition: background-color 300ms linear; }
  .duet[data-focus="partner"] { --story-bg: #f4ecee; background-color: var(--story-bg); }
}

@media (max-width: 1023px) {
  /* treatment history → PDF, same stage. Question and sources first, then the complete phone; for the hand-over the
     focus moves to the example device; the last picture shows both ways: shared digitally, or printed. */
  .pdf-set { width: 100%; height: var(--phone-h); }
  .pdf-q { padding: 0 6cqw; }
  .pdf-q blockquote { font-size: clamp(1.25rem, 6cqw, 1.75rem); }
  .story[data-state~="src"] .pdf-q { translate: 0 -36cqh; scale: .6; }
  .src { font-size: 13px; }
  .src--note { --x: 3 !important; --y: 30 !important; width: 36cqw; font-size: 15px; }
  .src--letter { --x: 41 !important; --y: 27 !important; width: 30cqw; }
  .src--lab { --x: 72 !important; --y: 36 !important; width: 26cqw; }
  .src--file { --x: 4 !important; --y: 66 !important; }
  .src--photo { --x: 47 !important; --y: 58 !important; width: 24cqw; }
  .src--thought { --x: 30 !important; --y: 84 !important; }
  .src--photo span { display: none; }
  .pdf-device, .pdf-peer { top: 0; left: 50%; margin-left: calc(var(--phone-w) / -2); translate: 0 0; scale: 1; transform-origin: 50% 0; }
  .story[data-state~="hand"] .pdf-device { translate: 0 0; scale: 1; opacity: 0; }
  .story[data-state~="hand"] .pdf-peer { translate: 0 0; scale: 1; }
  .pdf-fly { top: 16cqh; width: 30cqw; margin-left: -15cqw; translate: 0 0; }
  .story[data-state~="hand"]:not([data-state~="answer"]) .pdf-fly { animation-name: pdf-fly-m; }
  .pdf-symbol { display: none; }
  /* last picture: the example device at the left edge, the printed sheet takes what is left beside it */
  .story[data-state~="answer"] .pdf-peer { translate: calc(var(--phone-w) / 2 - 46cqw) 0; }
  .pdf-print { left: calc(9cqw + var(--phone-w)); right: auto; top: 3cqh; bottom: auto; width: min(27cqw, 87cqw - var(--phone-w)); margin-left: 0; grid-template-columns: minmax(0, 1fr); rotate: 2deg; translate: 0 0; gap: 10px; }
  .pdf-print > p { rotate: -2deg; font-size: 15px; line-height: 1.25; width: max-content; max-width: 42cqw; justify-self: center; }
  .pdf-answer { left: 50%; bottom: 2cqh; font-size: 1.0625rem; padding: 5px 14px 7px; }
}
@keyframes pdf-fly-m { 0% { opacity: 0; translate: 0 14cqh; scale: .7; } 25% { opacity: 1; } 70% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: 0 -2cqh; scale: 1.04; } }

@media (max-width: 1023px) {
  /* selfcare: one centre. The complete recording of the breathing exercise is the picture; the page adds the cue
     in words and the control, on the same clock. The large breathing rings of the desktop are not shown here. */
  .breath-row { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .breath-main, .breath-proof { display: contents; }
  .breath-proof > .phone { order: 1; --phone-w: min(56vw, 230px, calc(var(--svh) * 26)); width: var(--phone-w); margin: 0 auto; align-self: center; }
  .breath-stage { order: 2; width: 100%; aspect-ratio: auto; margin: var(--ft-space-5) 0 0; }
  .breath-stage > :not(.breath-cue) { display: none; }
  .breath-cue { width: 100%; min-height: 2.4em; }
  .breath-controls { order: 3; margin-top: var(--ft-space-4); }
  .breath-rhythm { order: 4; margin-top: var(--ft-space-3); }
  .breath-proof > .small { order: 5; margin-top: var(--ft-space-4); text-align: center; }
}

/* phones held sideways: the complete phone beside the text, pinned together */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 540px) {
  .journey, .story { --bar: 32px; --phone-h: calc(var(--use) - var(--bar) - 22px); --stage-h: var(--use); --step-len: calc(var(--svh) * 80); }
  .journey-stage, .story-stage, .duet .story-stage, .recall .story-stage { margin: 0; }
  .is-pinned .m-pin { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) 40%; column-gap: 24px; }
  .is-pinned .journey-stage, .is-pinned .story-stage { grid-column: 2; grid-row: 1; }
  .is-pinned .journey-chapters, .is-pinned .story-steps { grid-column: 1; grid-row: 1; align-content: start; padding: calc(var(--use) * .14) 0 0; }
  .is-flow .journey-stage, .is-flow .story-stage { float: right; width: 40%; margin-left: 24px; }
  .pdf-set { height: var(--phone-h); }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .is-pinned .chapter, .is-pinned .story-step, .duo > .phone { transition: none !important; } }
/* the alarm: the card inside the phone gives one small shake; the phone itself stays where it is */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) { [data-alarm="ring"] .journey-stage .fa-alarm-card { animation: alarm-wobble-m 1.1s var(--ft-ease-standard) 240ms 1 backwards; } }
@keyframes alarm-wobble-m { 0%, 100% { rotate: 0deg; } 12% { rotate: -1.2deg; } 26% { rotate: 1.2deg; } 40% { rotate: -1deg; } 54% { rotate: .8deg; } 70% { rotate: -.4deg; } }

/* Very large text (system text size, 200 % zoom): long words may break instead of widening the page */
@media (max-width: 1023px) {
  .h1, .h2, .chapter-h, .story-step-head h3, .scene-h, .lead { overflow-wrap: anywhere; hyphens: auto; }
  .places { grid-template-columns: minmax(0, 1fr); }
  .place { min-width: 0; }
  .place h3, .place p, .place li { overflow-wrap: anywhere; hyphens: auto; }
}

/* ---- Coming soon (Website-Vorlaunch). Only shipped in the coming-soon build. ---- */
.cs-header { position: relative; background: transparent; }
.cs-header .wrap { justify-content: space-between; }
.cs-header .brand img { height: 36px; width: auto; display: block; }
.cs-langs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--ft-color-border-subtle); border-radius: var(--ft-radius-full); background: color-mix(in srgb, var(--ft-color-surface) 70%, transparent); }
.cs-langs a { min-width: 44px; min-height: 36px; display: grid; place-items: center; padding: 0 10px; border-radius: var(--ft-radius-full); font: 500 13px/1 var(--font-sans); letter-spacing: .06em; color: var(--ft-color-text-secondary); text-decoration: none; transition: background-color var(--ft-duration-standard) var(--ft-ease-standard), color var(--ft-duration-standard) var(--ft-ease-standard); }
.cs-langs a[aria-current="true"] { background: var(--ft-color-mist); color: var(--ft-color-brand-deep); }
@media (hover: hover) { .cs-langs a:not([aria-current]):hover { color: var(--ft-color-text-primary); } }

.cs-hero { position: relative; overflow: clip; padding-block: var(--ft-space-10) var(--ft-space-16); }
.cs-hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; background: radial-gradient(60% 55% at 72% 42%, var(--ft-color-mist) 0%, transparent 70%), radial-gradient(40% 40% at 10% 90%, #fbf1f4 0%, transparent 70%); z-index: -1; pointer-events: none; }
.cs-grid { display: grid; gap: var(--ft-space-10); align-items: center; }
.cs-copy { display: grid; gap: var(--ft-space-6); justify-items: start; }
.cs-kicker { font: 500 13px/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ft-color-brand-deep); }
.cs-h1 span { display: block; }
.cs-h1 { font: 300 clamp(2.6rem, 1.7rem + 4.2vw, 5.25rem)/1.04 var(--font-display); letter-spacing: -.025em; color: var(--ft-color-text-primary); max-width: 11em; text-wrap: balance; }
.cs-lead { font-size: var(--ft-lead); line-height: 1.6; color: var(--ft-color-text-secondary); max-width: 34em; text-wrap: pretty; }
.cs-status { display: flex; gap: 12px; align-items: baseline; max-width: 34em; padding-top: var(--ft-space-6); border-top: 1px solid var(--ft-color-border-subtle); font-size: 16px; line-height: 1.5; color: var(--ft-color-text-primary); }
.cs-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ft-color-brand-strong-accent); translate: 0 -1px; box-shadow: 0 0 0 0 rgba(219, 96, 142, .45); }

.cs-visual { position: relative; justify-self: center; width: min(78vw, 420px); aspect-ratio: 1; }
.cs-glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(219, 96, 142, .16) 0%, rgba(219, 96, 142, 0) 70%); filter: blur(8px); }
.cs-ring { position: absolute; inset: 0; }
.cs-ring .jr { width: 100%; height: 100%; display: block; overflow: visible; }
.cs-ring .jr * { stroke-linecap: butt; }
.cs-ring circle[data-jr] { stroke-dasharray: 264 360; }
.cs-orbit { transform-origin: 148px 148px; transform: rotate(264deg); }
.cs-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; }
.cs-soon { font: 300 clamp(3rem, 2.2rem + 4vw, 4.75rem)/1 var(--font-display); letter-spacing: -.03em; color: var(--ft-color-brand-deep); }
.cs-plat { font: 500 12px/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ft-color-text-muted); }

.cs-expect { padding-block: var(--ft-space-16); background: var(--ft-color-surface); border-block: 1px solid var(--ft-color-border-subtle); }
.cs-h2 { font: 300 var(--ft-h2)/1.12 var(--font-display); letter-spacing: -.015em; color: var(--ft-color-text-primary); text-wrap: balance; }
.cs-list { list-style: none; margin: var(--ft-space-10) 0 0; padding: 0; display: grid; gap: var(--ft-space-8); }
.cs-item { display: grid; grid-template-columns: auto 1fr; column-gap: var(--ft-space-5); row-gap: var(--ft-space-2); padding-top: var(--ft-space-6); border-top: 1px solid var(--ft-color-border-subtle); }
.cs-num { grid-row: span 2; font: 300 28px/1 var(--font-display); color: var(--ft-color-brand-berry); min-width: 1.6em; }
.cs-item-h { font: 500 18px/1.35 var(--font-sans); color: var(--ft-color-text-primary); }
.cs-item p { color: var(--ft-color-text-secondary); line-height: 1.6; max-width: 32em; }

.cs-contact { padding-block: var(--ft-space-16) var(--ft-space-20); text-align: center; }
.cs-contact .wrap { display: grid; justify-items: center; gap: var(--ft-space-4); }
.cs-contact-lead { color: var(--ft-color-text-secondary); font-size: var(--ft-lead); }
.cs-actions { margin-top: var(--ft-space-4); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ft-space-3); }
.cs-actions .btn-secondary { font-weight: 400; }

.cs-footer-top { display: grid; gap: var(--ft-space-8); }
.cs-footer .footer-brand img { height: 40px; width: auto; }
.cs-footer-links { display: flex; flex-wrap: wrap; gap: var(--ft-space-3) var(--ft-space-6); }
.cs-footer-links a { color: var(--ft-color-text-secondary); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) { .cs-footer-links a:hover { color: var(--ft-color-action-default); text-decoration: underline; text-underline-offset: 3px; } }
.cs-footer .footer-meta { margin-top: var(--ft-space-10); }

@media (min-width: 720px) {
  .cs-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ft-space-10); }
  .cs-item { grid-template-columns: 1fr; }
  .cs-num { grid-row: auto; margin-bottom: var(--ft-space-4); }
  .cs-footer-top { grid-template-columns: 1fr auto; align-items: start; }
}
@media (min-width: 960px) {
  .cs-hero { padding-block: var(--ft-space-16) var(--ft-space-24); min-height: min(calc(100svh - var(--ft-header-height)), 860px); display: grid; align-items: center; }
  .cs-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--ft-space-16); }
  .cs-visual { width: min(100%, 500px); justify-self: end; }
  .cs-expect { padding-block: var(--ft-space-24); }
}
@media (max-width: 959px) {
  .cs-hero { padding-top: var(--ft-space-4); }
  .cs-visual { order: -1; width: min(72vw, 340px); }
  .cs-copy { justify-items: center; text-align: center; }
  .cs-h1, .cs-lead { margin-inline: auto; }
  .cs-status { text-align: left; }
}

/* motion: the ring draws once, the marker travels with it and then rests; the text arrives in a calm sequence */
@media (prefers-reduced-motion: no-preference) {
  .cs-ring circle[data-jr] { animation: cs-draw 2600ms cubic-bezier(.65, 0, .35, 1) 350ms both; }
  .cs-orbit { animation: cs-orbit 2600ms cubic-bezier(.65, 0, .35, 1) 350ms both; }
  .cs-ring .jr-marker { animation: cs-fade 500ms var(--ft-ease-standard) 250ms both; }
  .cs-center > * { animation: cs-rise 900ms var(--ft-ease-standard) both; }
  .cs-center > :nth-child(1) { animation-delay: 1500ms; }
  .cs-center > :nth-child(2) { animation-delay: 1750ms; }
  .cs-glow { animation: cs-glow 7s ease-in-out 3s infinite alternate; }
  .cs-in { animation: cs-rise 900ms var(--ft-ease-standard) both; animation-delay: calc(120ms + var(--d) * 110ms); }
  .cs-dot { animation: cs-pulse 2.6s cubic-bezier(.4, 0, .2, 1) 3s infinite; }
}
@keyframes cs-draw { from { stroke-dasharray: 0 360; } to { stroke-dasharray: 264 360; } }
@keyframes cs-orbit { from { transform: rotate(0deg); } to { transform: rotate(264deg); } }
@keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes cs-glow { from { opacity: .7; scale: .96; } to { opacity: 1; scale: 1.04; } }
@keyframes cs-pulse { 0% { box-shadow: 0 0 0 0 rgba(219, 96, 142, .45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(219, 96, 142, 0); } }