/* leonandvera.com - the Leon & Vera product site.
   Tokens are the Leon & Vera design system, Direction 01 "Warm" (Claude Design export,
   4 September 2026). Token names and values are copied from tokens/*.css of that export;
   page styles below use the tokens only. One committed light mode, no dark mode.
   The site's CSP allows no inline styles or scripts: everything lives in this file and
   in /js/site.js. */

/* ---------------- Fonts (self-hosted, SIL Open Font License) ---------------- */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url("/fonts/plus-jakarta-sans-variable-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url("/fonts/plus-jakarta-sans-variable-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:italic;font-weight:200 800;font-display:swap;src:url("/fonts/plus-jakarta-sans-italic-variable-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:italic;font-weight:200 800;font-display:swap;src:url("/fonts/plus-jakarta-sans-italic-variable-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/jetbrains-mono-variable.woff2") format("woff2")}

/* ---------------- Tokens ---------------- */
:root{
  color-scheme:light;
  --lv-white:#FFFFFF; --lv-cream:#FDF8F4; --lv-sand:#F7EEE7; --lv-sand-deep:#F2E4DA;
  --lv-line:#F0E4DA; --lv-line-strong:#E0CDBE; --lv-muted:#6F5D50; --lv-ink:#241B14;
  --lv-espresso:#15171B; --lv-espresso-deep:#0F1013;
  --lv-coral-050:#FDF1EC; --lv-coral-200:#FBD9CC; --lv-coral-300:#F7AE93; --lv-coral-400:#F0784F;
  --lv-coral-500:#E4552F; --lv-coral-600:#CE4520; --lv-coral-700:#B23C1B; --lv-coral-900:#7E2810;
  --lv-green-700:#1E6B47; --lv-green-100:#DCEFE4; --lv-green-050:#EFF8F3;
  --lv-amber-700:#8A5A12; --lv-amber-100:#F7E9CF; --lv-amber-050:#FDF6EA;
  --lv-red-700:#A32118; --lv-red-100:#F7DCD8; --lv-red-050:#FDF0ED;
  --surface-page:var(--lv-cream); --surface-card:var(--lv-white); --surface-sunken:var(--lv-sand);
  --surface-selected:var(--lv-sand-deep); --surface-plate:var(--lv-espresso); --surface-plate-deep:var(--lv-espresso-deep);
  --surface-accent-soft:var(--lv-coral-050);
  --text-body:var(--lv-ink); --text-muted:var(--lv-muted); --text-accent:var(--lv-coral-700);
  --text-on-plate:#F2F3F5; --text-on-plate-muted:#8D929B; --text-on-accent:var(--lv-white);
  --text-link:var(--lv-coral-700); --text-link-hover:var(--lv-coral-900);
  --border-hairline:var(--lv-line); --border-control:var(--lv-line-strong); --border-strong:var(--lv-ink); --border-on-plate:#272A31;
  --action-solid:var(--lv-ink); --action-solid-hover:var(--lv-espresso-deep);
  --action-accent:var(--lv-coral-600); --action-accent-hover:var(--lv-coral-700);
  --wordmark-ink:var(--lv-ink); --wordmark-ink-on-plate:#FDF8F4;
  --focus-ring:var(--lv-coral-600); --focus-ring-on-plate:var(--lv-coral-300);
  --status-ready-text:var(--lv-green-700); --status-ready-bg:var(--lv-green-050); --status-ready-border:var(--lv-green-100);
  --status-blocked-text:var(--lv-red-700); --status-blocked-bg:var(--lv-red-050);
  --font-display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --type-display-1:800 clamp(40px,6.2vw,72px)/1.06 var(--font-display);
  --type-display-2:800 clamp(32px,4.2vw,52px)/1.08 var(--font-display);
  --type-display-3:800 clamp(25px,2.9vw,38px)/1.12 var(--font-display);
  --tracking-display:-.035em;
  --type-lede:400 clamp(17px,1.5vw,21px)/1.6 var(--font-sans);
  --type-h2:700 22px/1.28 var(--font-sans); --type-h3:700 17px/1.35 var(--font-sans);
  --type-body:400 16px/1.62 var(--font-sans); --type-body-sm:400 14px/1.55 var(--font-sans);
  --type-ui:600 14px/1.35 var(--font-sans); --type-ui-sm:600 13px/1.3 var(--font-sans);
  --type-caption:400 12.5px/1.45 var(--font-sans);
  --type-eyebrow:700 11.5px/1.2 var(--font-sans); --tracking-eyebrow:.12em;
  --type-mono-sm:400 11.5px/1.35 var(--font-mono);
  --wm:32px; --measure-prose:66ch; --measure-lede:46ch;
  --radius-1:10px; --radius-2:18px; --radius-3:24px; --radius-pill:999px; --radius-button:999px;
  --border-w:1px; --border-w-strong:1.5px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px;
  --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --density-control-h:44px; --density-section-py:clamp(64px,9vw,112px);
  --layout-max:1200px; --layout-gutter:clamp(20px,5vw,64px);
  --shadow-card:0 1px 2px rgba(58,32,16,.04),0 8px 20px rgba(58,32,16,.06);
  --shadow-raised:0 2px 6px rgba(58,32,16,.06),0 12px 30px rgba(58,32,16,.09);
  --shadow-panel:0 20px 44px rgba(58,32,16,.10);
  --shadow-accent:0 8px 20px rgba(206,69,32,.26);
  --dur-1:120ms; --dur-2:180ms; --dur-3:240ms; --ease-standard:cubic-bezier(.2,0,0,1);
  --shadow-overlay:0 32px 70px rgba(58,32,16,.18);
  --transition-control:color var(--dur-1) var(--ease-standard),background-color var(--dur-1) var(--ease-standard),border-color var(--dur-1) var(--ease-standard),box-shadow var(--dur-1) var(--ease-standard);
  --state-disabled-opacity:.42;
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------------- Base ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[lang="de"] p{hyphens:auto;-webkit-hyphens:auto}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
h1,h2,h3,h4,button,label,.lv-btn,.wm{hyphens:manual;-webkit-hyphens:manual}
img,svg{display:block;max-width:100%}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-1)}
::selection{background:var(--lv-coral-200);color:var(--lv-coral-900)}
p{text-wrap:pretty}
.skip{position:absolute;left:8px;top:-120px;background:var(--surface-card);color:var(--text-body);padding:8px 12px;border-radius:var(--radius-1);z-index:100;text-decoration:none}
.skip:focus{top:8px}
.wrap{max-width:var(--layout-max);margin:0 auto;padding:0 var(--layout-gutter)}
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.prose{max-width:var(--measure-prose)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hidden{display:none!important}

/* ---------------- Wordmark and app icon ---------------- */
.wm{display:inline-flex;align-items:baseline;gap:.16em;font:800 var(--wm,32px)/1 var(--font-display);letter-spacing:-.045em;text-transform:lowercase;color:var(--wordmark-ink);white-space:nowrap;text-decoration:none;flex:none}
.wm:hover{color:var(--wordmark-ink);text-decoration:none}
.wm--plate{--wordmark-ink:var(--wordmark-ink-on-plate)}
/* the pair in the wordmark: Leon left, Vera right, on the baseline and x-height tall; where they meet is ink on cream, a warm light on dark */
.wm__pair{--d:.56em;position:relative;display:inline-block;height:var(--d);width:calc(var(--d)*1.7);vertical-align:baseline;flex:none}
.wm__pair i{position:absolute;bottom:0;width:var(--d);height:var(--d);border-radius:50%;display:block}
.wm__pair .a{left:0;background:var(--lv-coral-500)}
.wm__pair .b{left:calc(var(--d)*.7);background:var(--pair-v,var(--lv-green-700))}
.wm__pair .m{left:calc(var(--d)*.7);background:var(--pair-lens,var(--lv-ink));clip-path:circle(50% at -20% 50%)}
.wm--plate{--pair-v:#3A9A6E;--pair-lens:#E79C69}
/* who does what: coral is Leon, green is Vera - a dot before the name says it before the words do */
/* the two colleague cards wear their colour: a tinted stage, a tinted hairline, the frame label in the colour */
.lc--leon .lc__stage{background:radial-gradient(90% 70% at 0% 0%,rgba(228,85,47,.30) 0%,transparent 62%),linear-gradient(180deg,var(--lv-coral-050),#FFFFFF)}
.lc--vera{position:relative}
.lc--vera::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--lv-green-700);border-radius:var(--radius-2) var(--radius-2) 0 0;z-index:2}
.lc--vera .lc__stage{background:linear-gradient(180deg,var(--lv-green-050),#FFFFFF)}
.lc--vera .frame__hd span:first-child{color:var(--lv-green-700);display:inline-flex;align-items:center;gap:5px}
.frame__hd svg{width:12px;height:12px;flex:none;display:block}
.dcard[data-i="1"] .hub__core{border-color:#3A9A6E}
.lc__who::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:0}
.lc__who--end::before{display:none}
.own::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:10px;vertical-align:1px;background:var(--lv-coral-500);flex:none}
.own--vera::before{background:#3A9A6E}
.own--both::before{background:linear-gradient(90deg,var(--lv-coral-500) 50%,#3A9A6E 50%)}
.wm--sm{--wm:24px}
.appicon{--ai:40px;display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--ai);height:var(--ai);font-size:var(--ai);border-radius:.27em;background:var(--surface-plate)}
.appicon__pair{display:flex}
.appicon__p{display:flex;align-items:center;justify-content:center;flex:none;width:.43em;height:.43em;border-radius:.148em}
.appicon__p>span{font:800 .215em/1 var(--font-display);letter-spacing:-.04em}
.appicon__p+.appicon__p{margin-left:-.125em}
.appicon__p--l{background:var(--lv-white);color:var(--lv-ink)}
.appicon__p--v{background:var(--lv-coral-500);color:var(--lv-white)}

/* ---------------- Buttons and controls ---------------- */
.lv-btn{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--density-control-h);padding:10px 22px;border:var(--border-w) solid transparent;border-radius:var(--radius-button);font:700 15px/1.2 var(--font-sans);text-align:center;text-decoration:none;cursor:pointer;transition:var(--transition-control);text-wrap:balance;color:inherit;background:transparent}
.lv-btn:hover{text-decoration:none}
.lv-btn--lg{min-height:52px;padding:14px 28px;font-size:16px}
.lv-btn--sm{min-height:36px;padding:6px 16px;font:600 13.5px/1.2 var(--font-sans)}
.lv-btn--accent{background:var(--action-accent);color:var(--text-on-accent);box-shadow:var(--shadow-accent)}
.lv-btn--accent:hover{background:var(--action-accent-hover);color:var(--text-on-accent)}
.lv-btn--solid{background:var(--action-solid);color:var(--lv-white)}
.lv-btn--solid:hover{background:var(--action-solid-hover);color:var(--lv-white)}
.lv-btn--outline{background:var(--surface-card);color:var(--text-body);border-color:var(--border-control)}
.lv-btn--outline:hover{background:var(--surface-sunken);border-color:var(--border-strong);color:var(--text-body)}
.lv-btn--block{width:100%}
.lv-btn[disabled],.lv-btn[aria-disabled=true]{opacity:var(--state-disabled-opacity);cursor:not-allowed;pointer-events:none}
.lv-input,.lv-select{width:100%;min-height:var(--density-control-h);padding:8px 14px;border:var(--border-w) solid var(--border-control);border-radius:var(--radius-1);background:var(--surface-card);color:var(--text-body);font:var(--type-body-sm);font-size:15px;transition:var(--transition-control)}
.lv-input::placeholder{color:var(--text-muted);opacity:.75}
.lv-input:hover,.lv-select:hover{border-color:var(--border-strong)}
.lv-input[aria-invalid=true]{border-color:var(--lv-red-700);background:var(--lv-red-050)}
.lv-field{display:flex;flex-direction:column;gap:6px}
.lv-field__label{font:var(--type-ui-sm);color:var(--text-body)}
.lv-field__hint{font:var(--type-caption);color:var(--text-muted)}
.lv-choice{display:flex;gap:var(--space-3);align-items:flex-start;cursor:pointer;font:var(--type-body-sm);color:var(--text-body)}
.lv-choice input{appearance:none;margin:2px 0 0;flex:none;width:18px;height:18px;border:var(--border-w-strong) solid var(--border-control);border-radius:6px;background:var(--surface-card);cursor:pointer;transition:var(--transition-control)}
.lv-choice input:checked{background:var(--action-accent);border-color:var(--action-accent);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");background-size:100%}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--radius-pill);background:var(--surface-accent-soft);color:var(--text-accent);font:600 13px/1 var(--font-sans)}
.pill__dot{width:7px;height:7px;border-radius:99px;background:var(--lv-coral-500);flex:none}

/* ---------------- Top bar ---------------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(253,248,244,.92);backdrop-filter:blur(8px);border-bottom:var(--border-w) solid var(--border-hairline)}
.topbar__row{display:flex;align-items:center;gap:var(--space-8);min-height:68px}
.topbar__nav{display:flex;align-items:center;gap:var(--space-6);margin-left:var(--space-2);position:relative;top:2px}
.topbar__nav a,.topbar__right a.textlink{font:500 15px/1 var(--font-sans);color:var(--text-muted);text-decoration:none;padding:6px 0}
.topbar__nav a:hover,.topbar__right a.textlink:hover{color:var(--text-body)}
.topbar__right{margin-left:auto;display:flex;align-items:center;gap:var(--space-5)}
.lang{font:600 13px/1 var(--font-sans);color:var(--text-muted);text-decoration:none;padding:7px 11px;border:var(--border-w) solid var(--border-control);border-radius:var(--radius-pill)}
.lang:hover{color:var(--text-body);border-color:var(--border-strong);text-decoration:none}
@media (max-width:900px){.topbar__nav{display:flex;align-items:center;gap:var(--space-6);margin-left:var(--space-2);position:relative;top:2px}.topbar__right a.textlink{display:none}.topbar .lv-btn--sm{padding:6px 12px}}

/* ---------------- Hero ---------------- */
.hero{padding:clamp(40px,6vw,88px) 0 clamp(48px,7vw,96px)}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:980px){.hero__grid{grid-template-columns:1fr}}
.hero h1{font:var(--type-display-1);letter-spacing:var(--tracking-display);text-wrap:balance;margin:var(--space-5) 0 var(--space-5)}
.hero h1 em{font-style:normal;color:var(--lv-coral-500)}
.hero .lede{font:var(--type-lede);color:var(--text-muted);max-width:var(--measure-lede);margin-bottom:var(--space-6);text-wrap:balance;hyphens:manual;-webkit-hyphens:manual}
.probe{display:flex;gap:10px;align-items:stretch;max-width:580px;margin-bottom:var(--space-3)}
.probe .lv-input{min-height:52px;font-size:16px;border-radius:var(--radius-pill);padding-left:18px}
.probe .lv-btn{white-space:nowrap}
@media (max-width:560px){.probe{flex-direction:column}.probe .lv-btn{width:100%}}
.probe__hint{font:var(--type-caption);color:var(--text-muted);margin-bottom:var(--space-6);min-height:1.4em;max-width:560px}
.probe__hint[data-state="busy"]{color:var(--text-accent)}
.probe__hint[data-state="error"]{color:var(--lv-red-700)}
.trust{display:flex;gap:10px;flex-wrap:wrap;font:500 13.5px/1.7 var(--font-sans);color:var(--text-muted)}
.trust i{font-style:normal;opacity:.5}

/* ---------------- Product panel (the Monday) ---------------- */
.panel{background:var(--surface-card);border-radius:22px;border:var(--border-w) solid var(--border-hairline);box-shadow:var(--shadow-panel);overflow:hidden;--accent:var(--lv-coral-500);--accent-action:var(--lv-coral-600)}
.panel__top{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:var(--border-w) solid var(--border-hairline)}
.panel__brand{display:flex;align-items:center;gap:10px;min-width:0}
.panel__logo{width:28px;height:28px;border-radius:8px;background:var(--surface-sunken);flex:none;object-fit:contain}
.panel__top b{font:700 15px/1.2 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel__live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--font-sans);color:var(--text-muted);white-space:nowrap}
.panel__live .pill__dot{background:var(--status-ready-text)}
.figs{display:grid;grid-template-columns:repeat(3,1fr)}
.fig{padding:18px 20px;border-right:var(--border-w) solid var(--border-hairline)}
.fig:last-child{border-right:0}
.fig small{display:block;font:600 12px/1 var(--font-sans);color:var(--text-muted);margin-bottom:7px}
.fig b{display:block;font:800 clamp(22px,2.4vw,30px)/1 var(--font-display);letter-spacing:-.02em;color:var(--text-body);font-variant-numeric:tabular-nums}
.fig u{display:block;text-decoration:none;font:600 12px/1 var(--font-sans);color:var(--status-ready-text);margin-top:6px}
.prop{padding:18px 20px;border-top:var(--border-w) solid var(--border-hairline);background:#FDF6F2}
.prop__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.prop__head b{font:700 15px/1.2 var(--font-sans)}
.prop__head small{margin-left:auto;font:600 12px/1 var(--font-sans);color:var(--text-muted)}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.chip{font:600 12px/1 var(--font-sans);padding:7px 11px;border-radius:var(--radius-pill);background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);color:var(--text-body)}
.prop__cta{display:flex;gap:9px}
.prop__cta .lv-btn--accent{background:var(--accent-action);box-shadow:none}
.adcard{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;margin:0 0 14px;padding:12px;border-radius:14px;background:var(--surface-card);border:var(--border-w) solid var(--border-hairline)}
.adcard__img{width:96px;height:96px;border-radius:10px;background:var(--surface-sunken);object-fit:cover}
.adcard__kicker{font:600 11px/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.adcard__title{font:800 16px/1.2 var(--font-display);letter-spacing:-.02em;margin-bottom:4px;color:var(--accent-text,var(--text-body))}
.adcard__body{font:var(--type-caption);color:var(--text-muted)}
.chan{border-top:var(--border-w) solid var(--border-hairline)}
.crow{display:flex;align-items:center;gap:12px;padding:11px 20px;border-bottom:var(--border-w) solid var(--border-hairline)}
.crow:last-child{border-bottom:0}
.crow span{font:500 14px/1 var(--font-sans)}
.bar{margin-left:auto;width:112px;height:6px;border-radius:99px;background:var(--lv-line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.w82{width:82%}.w56{width:56%}.w48{width:48%}.w41{width:41%}
.crow b{font:700 14px/1 var(--font-sans);width:26px;text-align:right;font-variant-numeric:tabular-nums}
.panel__note{display:flex;align-items:center;gap:10px;padding:10px 20px;background:var(--surface-sunken);font:var(--type-caption);color:var(--text-muted);border-top:var(--border-w) solid var(--border-hairline)}
.swatches{display:flex;gap:5px;margin-left:auto;flex:none}
.swatch{width:14px;height:14px;border-radius:99px;border:1px solid rgba(0,0,0,.08)}

/* ---------------- Sections ---------------- */
.section{padding:var(--density-section-py) 0;border-top:var(--border-w) solid var(--border-hairline)}
.section--sunken{background:var(--surface-sunken);border-top:0}
.sechead{max-width:720px;margin-bottom:var(--space-8)}
.sechead h2{font:var(--type-display-2);letter-spacing:var(--tracking-display);text-wrap:balance;margin:var(--space-3) 0 var(--space-4)}
.sechead p{font:var(--type-lede);color:var(--text-muted)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);border-radius:var(--radius-3);padding:var(--space-6);box-shadow:var(--shadow-card)}
.step__n{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:99px;background:var(--surface-accent-soft);color:var(--text-accent);font:800 15px/1 var(--font-display);margin-bottom:var(--space-4)}
.step h3{font:var(--type-h2);letter-spacing:-.02em;margin-bottom:var(--space-3)}
.step p{color:var(--text-muted);font:var(--type-body-sm);font-size:15px}
.step ul{margin:var(--space-3) 0 0;padding-left:18px;color:var(--text-muted);font:var(--type-body-sm);font-size:15px}
.step li{margin-bottom:4px}
.features{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-10)}
@media (max-width:900px){.features{grid-template-columns:1fr}}
.feature{display:grid;grid-template-columns:44px 1fr;gap:var(--space-4);padding:var(--space-5) 0;border-top:var(--border-w) solid var(--border-hairline)}
.feature__ico{width:44px;height:44px;border-radius:14px;background:var(--surface-accent-soft);color:var(--lv-coral-700);display:flex;align-items:center;justify-content:center}
.feature h3{font:var(--type-h3);margin-bottom:4px}
.feature p{color:var(--text-muted);font:var(--type-body-sm);font-size:15px}
.who{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--space-6)}
.who span{padding:10px 16px;border-radius:var(--radius-pill);background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);font:600 14px/1 var(--font-sans)}
.who__note{margin-top:var(--space-6);color:var(--text-muted);font:var(--type-body-sm);font-size:15px;max-width:70ch}

/* ---------------- Tiers ---------------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);align-items:stretch}
@media (max-width:980px){.tiers{grid-template-columns:1fr}}
.tier{display:flex;flex-direction:column;background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);border-radius:var(--radius-3);padding:var(--space-6);box-shadow:var(--shadow-card);position:relative}
.tier--mid{border-color:var(--lv-coral-300);box-shadow:var(--shadow-raised)}
.tier__flag{position:absolute;top:-12px;left:var(--space-6);padding:5px 12px;border-radius:var(--radius-pill);background:var(--lv-coral-500);color:#fff;font:700 11.5px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase}
.tier__name{font:700 13px/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-accent)}
.tier__price{font:800 clamp(36px,3.4vw,44px)/1 var(--font-display);letter-spacing:-.03em;margin:12px 0 2px;font-variant-numeric:tabular-nums}
.tier__price small{font:500 14px/1.3 var(--font-sans);letter-spacing:0;color:var(--text-muted);display:block;margin-top:8px}
.tier ul{margin:var(--space-5) 0 0;padding-left:0;list-style:none;display:grid;gap:9px;font:var(--type-body-sm);font-size:14.5px}
.tier li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.tier li svg{margin-top:3px;color:var(--status-ready-text)}
.tier__adds{font:600 12.5px/1.3 var(--font-sans);color:var(--text-muted);margin-top:var(--space-4)}
.tier__quota{margin-top:auto;padding-top:var(--space-4);border-top:1px dashed var(--border-hairline);font:var(--type-mono-sm);font-size:12px;color:var(--text-muted);line-height:1.5}
.tier .lv-btn{margin-top:var(--space-5)}
.tiers__note{margin-top:var(--space-6);font:var(--type-body-sm);color:var(--text-muted);max-width:72ch}

/* ---------------- Trust / FAQ ---------------- */
.notlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-5)}
.not{background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);border-radius:var(--radius-2);padding:var(--space-5)}
.not h3{font:var(--type-h3);margin-bottom:6px}
.not p{color:var(--text-muted);font:var(--type-body-sm);font-size:14.5px}
.faq{display:grid;gap:10px;max-width:820px}
.faq details{background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);border-radius:var(--radius-2);padding:0 var(--space-5)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;font:700 16px/1.35 var(--font-sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 var(--font-sans);color:var(--text-muted);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 var(--space-4);color:var(--text-muted);font:var(--type-body-sm);font-size:15px}

/* ---------------- Early access ---------------- */
.cta{background:var(--surface-plate);color:var(--text-on-plate);border-radius:var(--radius-3);padding:clamp(28px,4vw,48px)}
.cta .eyebrow{color:var(--text-on-plate-muted)}
.cta h2{font:var(--type-display-3);letter-spacing:var(--tracking-display);margin:var(--space-3) 0 var(--space-4);color:var(--text-on-plate)}
.cta p{color:var(--text-on-plate-muted);max-width:56ch}
.cta p+p{margin-top:var(--space-3)}
.cta__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-10);align-items:start}
@media (max-width:900px){.cta__grid{grid-template-columns:1fr}}
.form{display:grid;gap:var(--space-4);background:var(--surface-card);color:var(--text-body);border-radius:var(--radius-2);padding:var(--space-6)}
.form__fields{display:grid;gap:var(--space-4)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:560px){.form__row{grid-template-columns:1fr}}
.form__done,.form__err{display:none;padding:var(--space-4);border-radius:var(--radius-1);font:var(--type-body-sm)}
.form__done{background:var(--status-ready-bg);color:var(--status-ready-text)}
.form__err{background:var(--status-blocked-bg);color:var(--status-blocked-text)}
.form[data-state="done"] .form__done{display:block}
.form[data-state="done"] .form__fields{display:none}
.form[data-state="error"] .form__err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------------- Footer ---------------- */
footer{padding:var(--space-12) 0 var(--space-16);border-top:var(--border-w) solid var(--border-hairline)}
.foot__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6) var(--space-8)}
.foot__nav{display:flex;flex-wrap:wrap;gap:var(--space-5);font:var(--type-ui-sm)}
.foot__nav a{color:var(--text-muted);text-decoration:none}
.foot__nav a:hover{color:var(--text-body)}
.foot__meta{margin-left:auto;font:var(--type-caption);color:var(--text-muted)}

/* ---------------- Legal pages, 404 ---------------- */
.legal{padding:var(--space-12) 0 var(--space-20)}
.legal h1{font:var(--type-display-3);letter-spacing:var(--tracking-display);margin-bottom:var(--space-6)}
.legal h2{font:var(--type-h2);margin:var(--space-8) 0 var(--space-3)}
.legal p{max-width:var(--measure-prose)}
.legal p+p{margin-top:var(--space-3)}
.legal .facts{display:grid;grid-template-columns:minmax(140px,max-content) 1fr;margin:var(--space-4) 0;max-width:var(--measure-prose)}
.legal .facts>div{display:contents}
.legal .facts dt{padding:var(--space-3) var(--space-4) var(--space-3) 0;border-top:var(--border-w) solid var(--border-hairline);font:var(--type-ui-sm);color:var(--text-muted)}
.legal .facts dd{padding:var(--space-3) 0;border-top:var(--border-w) solid var(--border-hairline);font:var(--type-body-sm)}
.legal .stamp{margin-top:var(--space-8);font:var(--type-caption);color:var(--text-muted)}
.back{display:inline-flex;align-items:center;gap:8px;font:var(--type-ui-sm);color:var(--text-muted);text-decoration:none;margin-bottom:var(--space-6)}
.back:hover{color:var(--text-body)}
.notfound{padding:var(--space-24) 0}
.notfound h1{font:var(--type-display-2);letter-spacing:var(--tracking-display);margin:var(--space-3) 0 var(--space-4)}

/* ---------------- Lovable-shaped additions: centred hero with the one input, alternating
   feature blocks with built mocks, the six-card grid ---------------- */
.hero--centre{position:relative;overflow:hidden;padding-top:clamp(40px,7vw,96px)}
.hero__glow{position:absolute;inset:-20% -10% auto -10%;height:70%;pointer-events:none;
  background:radial-gradient(ellipse 42% 55% at 22% 30%,rgba(247,174,147,.55),transparent 70%),
             radial-gradient(ellipse 40% 50% at 78% 22%,rgba(251,217,204,.75),transparent 70%),
             radial-gradient(ellipse 60% 50% at 50% 90%,rgba(242,228,218,.9),transparent 70%);
  filter:blur(28px);opacity:.9}
.hero__inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero--centre h1{max-width:18ch}
.lede--centre{margin-left:auto;margin-right:auto;text-align:center;max-width:58ch!important}
.probe--box{display:block;width:100%;max-width:720px;background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);border-radius:var(--radius-3);padding:var(--space-4) var(--space-4) var(--space-3);box-shadow:var(--shadow-panel);text-align:left;margin:0 auto var(--space-5)}
.probe__label{display:block;font:var(--type-ui);color:var(--text-muted);padding:2px 6px 10px}
.probe__row{display:flex;gap:10px;align-items:flex-start;position:relative}
.probe__field{position:relative;flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.probe__row .lv-btn{align-self:flex-start;min-height:52px}
.probe--box .lv-input{border-radius:var(--radius-pill);min-height:52px;font-size:16px;padding-left:18px}
@media (max-width:560px){.probe__row{flex-direction:column}.probe__row .probe__field{width:100%}.probe__row .lv-btn{width:100%}} /* the field as wide as the button (CEO, 21 Sep 2026): stacked, the field box had shrunk to the width of the three words under it */
.probe--box .probe__hint{margin:10px 6px 0;max-width:none}
.suggest{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:var(--space-5)}
.suggest span{font:600 12.5px/1 var(--font-sans);color:var(--text-muted);padding:8px 12px;border-radius:var(--radius-pill);border:var(--border-w) solid var(--border-hairline);background:rgba(255,255,255,.6)}
.trust--centre{justify-content:center;margin-bottom:clamp(28px,4vw,48px)}
.panel--hero{position:relative;max-width:980px;margin:0 auto}
.chip--ok{color:var(--status-ready-text);background:var(--status-ready-bg);border-color:var(--status-ready-border)}
.pill--ok{background:var(--status-ready-bg);color:var(--status-ready-text)}
.pill--ok .pill__dot{background:var(--status-ready-text)}
.sechead--centre{margin-left:auto;margin-right:auto;text-align:center;max-width:760px}
.block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(28px,4vw,56px) 0;border-top:var(--border-w) solid var(--border-hairline)}
.block:first-of-type{border-top:0}
.block--flip .block__copy{order:2}
@media (max-width:900px){.block{grid-template-columns:1fr}.block--flip .block__copy{order:0}}
.block__copy h3{font:var(--type-display-3);letter-spacing:var(--tracking-display);text-wrap:balance;margin:var(--space-3) 0 var(--space-4)}
.block__copy p{color:var(--text-muted)}
.ticks{margin:var(--space-5) 0 0;padding:0;list-style:none;display:grid;gap:10px;color:var(--text-body);font:var(--type-body-sm);font-size:15px}
.ticks li{padding-left:26px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:99px;background:var(--status-ready-bg);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6B47' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:10px;background-position:center;background-repeat:no-repeat}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-5)}
.chiprow span{font:600 13px/1 var(--font-sans);padding:9px 13px;border-radius:var(--radius-pill);background:var(--surface-card);border:var(--border-w) solid var(--border-hairline)}
/* the built mocks */
.mock{background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);border-radius:22px;box-shadow:var(--shadow-panel);overflow:hidden;font:var(--type-body-sm)}
.mock__head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:var(--border-w) solid var(--border-hairline)}
.mock__head b{font:700 15px/1.2 var(--font-sans)}
.mock__head small{margin-left:auto;font:600 12px/1 var(--font-sans);color:var(--text-muted)}
.mock__row{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;padding:12px 18px;border-bottom:var(--border-w) solid var(--border-hairline);font-size:14px}
.mock__k{font:600 12px/1.2 var(--font-sans);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.mock__logo{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:#1F2A44;color:#fff;font:800 16px/1 var(--font-display)}
.mock__colors{display:flex;gap:6px}
.mock__colors i{width:22px;height:22px;border-radius:99px;border:1px solid rgba(0,0,0,.08)}
.mock__colors .c1{background:#1F2A44}.mock__colors .c2{background:#F28C28}.mock__colors .c3{background:#F5F1EA}.mock__colors .c4{background:#2B2B2B}
.mock__photos{display:flex;gap:6px}
.mock__photos i{width:38px;height:38px;border-radius:8px;background:linear-gradient(135deg,#E9DDD1,#C9B7A6)}
.mock__photos i:nth-child(2){background:linear-gradient(135deg,#D7CCC1,#8E7B6B)}
.mock__photos i:nth-child(3){background:linear-gradient(135deg,#F0E4DA,#B9A99B)}
.mock__photos i:nth-child(4){background:linear-gradient(135deg,#CFC1B4,#7C6A5D)}
.mock__photos i:nth-child(5){background:linear-gradient(135deg,#E4D6C9,#A08D7C)}
.mock__foot{display:flex;padding:12px 18px;background:var(--surface-sunken)}
.mock__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 18px}
@media (max-width:560px){.mock__grid{grid-template-columns:repeat(2,1fr)}}
.mock__ad{display:grid;gap:8px}
.mock__ad span{font:600 11.5px/1.3 var(--font-sans);color:var(--text-muted)}
.mock__adimg{aspect-ratio:4/5;border-radius:10px;background:linear-gradient(160deg,#1F2A44 0%,#3A4A6B 60%,#F28C28 140%)}
.mock__adimg--2{background:linear-gradient(160deg,#E9DDD1,#8E7B6B)}
.mock__adimg--3{background:linear-gradient(160deg,#2B2B2B,#6A6A6A)}
.mock__adimg--4{background:linear-gradient(160deg,#F5F1EA,#F28C28)}
.mock__actions{display:flex;align-items:center;gap:9px;padding:0 18px 16px;flex-wrap:wrap}
.mock__switch{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--font-sans);color:var(--text-muted)}
.mock__switch i{width:34px;height:20px;border-radius:99px;background:var(--action-accent);position:relative;display:inline-block}
.mock__switch i::after{content:"";position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:99px;background:#fff}
.mock--chat{padding-bottom:0}
.bubble{max-width:82%;margin:12px 18px 0;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5}
.bubble--in{background:var(--surface-sunken);border-bottom-left-radius:6px}
.bubble--out{margin-left:auto;background:#1F6B47;color:#fff;border-bottom-right-radius:6px}
.mock--chat .mock__foot{margin-top:14px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}
.card{background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);border-radius:var(--radius-3);padding:var(--space-6);box-shadow:var(--shadow-card)}
.card h3{font:var(--type-h2);letter-spacing:-.02em;margin-bottom:var(--space-3)}
.card p{color:var(--text-muted);font:var(--type-body-sm);font-size:15px}
.who--centre{justify-content:center}
.who__note--centre{margin-left:auto;margin-right:auto;text-align:center}
.tiers__note--centre{margin-left:auto;margin-right:auto;text-align:center}
.faq--centre{margin-left:auto;margin-right:auto}

/* ---------------- Motion on scroll (progressive: only when JS has run) ----------------
   Short, flat, no bounce. Elements are visible without JS; with JS they start a little
   lower and faded and settle as they enter the viewport. Reduced motion switches it off. */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease-standard),transform .55s var(--ease-standard)}
html.js .reveal.is-in{opacity:1;transform:none}
html.js .reveal--d1{transition-delay:.08s}
html.js .reveal--d2{transition-delay:.16s}
html.js .reveal--d3{transition-delay:.24s}
html.js .hero__inner>*{opacity:0;transform:translateY(12px);animation:lv-rise .6s var(--ease-standard) forwards}
html.js .hero__inner>*:nth-child(1){animation-delay:.05s}
html.js .hero__inner>*:nth-child(2){animation-delay:.12s}
html.js .hero__inner>*:nth-child(3){animation-delay:.2s}
html.js .hero__inner>*:nth-child(4){animation-delay:.28s}
html.js .hero__inner>*:nth-child(5){animation-delay:.34s}
html.js .hero__inner>*:nth-child(6){animation-delay:.4s}
html.js .panel--hero{opacity:0;transform:translateY(24px) scale(.985);animation:lv-rise .7s var(--ease-standard) .45s forwards}
@keyframes lv-rise{to{opacity:1;transform:none}}
html.js .bar i{width:0;transition:width .9s var(--ease-standard)}
html.js .panel.is-in .bar i.w82{width:82%}
html.js .panel.is-in .bar i.w56{width:56%}
html.js .panel.is-in .bar i.w48{width:48%}
html.js .panel.is-in .bar i.w41{width:41%}
.hero__glow{animation:lv-drift 18s ease-in-out infinite alternate}
@keyframes lv-drift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,3%,0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){
  html.js .reveal,html.js .hero__inner>*,html.js .panel--hero{opacity:1;transform:none;animation:none;transition:none}
  html.js .bar i.w82{width:82%}html.js .bar i.w56{width:56%}html.js .bar i.w48{width:48%}html.js .bar i.w41{width:41%}
  .hero__glow{animation:none}
}

/* =====================================================================
   Lovable-style pass, 4 Sep 2026: colour field, visual cards, the plate,
   type tiles, the close. Less text, the visuals carry.
   ===================================================================== */
.hero--field{position:relative;padding:clamp(64px,9vw,120px) 0 0;isolation:isolate}
.hero--field .hero__inner{padding-top:0}
.hero--field .lede--centre{max-width:44ch;margin-top:20px}
.hero--field .probe--box{margin-top:32px}
.field{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.field i{position:absolute;border-radius:50%;filter:blur(64px);opacity:.9;will-change:transform}
.field i:nth-child(1){width:64vw;height:64vw;max-width:960px;max-height:960px;left:-14vw;top:-6%;background:radial-gradient(closest-side,#F7AE93,rgba(247,174,147,0))}
.field i:nth-child(2){width:58vw;height:58vw;max-width:880px;max-height:880px;right:-16vw;top:-4%;background:radial-gradient(closest-side,#F0784F,rgba(240,120,79,0));opacity:.62}
.field i:nth-child(3){width:76vw;height:54vw;max-width:1100px;max-height:760px;left:12vw;bottom:-8%;background:radial-gradient(closest-side,#F7E9CF,rgba(247,233,207,0))}
.field i:nth-child(4){width:42vw;height:42vw;max-width:640px;max-height:640px;left:30vw;top:30%;background:radial-gradient(closest-side,#FBD9CC,rgba(251,217,204,0))}
.field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,rgba(253,248,244,0),var(--surface-page))}
html.js .field i{animation:drift 24s ease-in-out infinite alternate}
html.js .field i:nth-child(2){animation-duration:29s;animation-delay:-7s;animation-name:drift2}
html.js .field i:nth-child(3){animation-duration:33s;animation-delay:-13s}
html.js .field i:nth-child(4){animation-duration:21s;animation-delay:-4s;animation-name:drift2}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,-3vh,0) scale(1.14)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-5vw,4vh,0) scale(.96)}}
.stage{position:relative;margin-top:clamp(44px,6vw,80px)}
.panel--stage{box-shadow:0 40px 90px -34px rgba(36,27,20,.42),0 1px 0 rgba(255,255,255,.7) inset}

.section--tight{padding-top:clamp(64px,8vw,112px)}
.sechead--left{text-align:left;max-width:60ch}
.sechead--left .lede{margin-left:0;max-width:46ch}

.vcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.vcard{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-3);overflow:hidden;display:flex;flex-direction:column}
.vcard__visual{position:relative;padding:32px 28px 0;min-height:360px;display:flex;align-items:flex-end;background:linear-gradient(180deg,var(--lv-sand) 0%,var(--lv-coral-050) 62%,var(--surface-card) 100%);overflow:hidden}
.vcard__visual .mock{width:100%;max-width:none;margin:0;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0;box-shadow:0 24px 60px -28px rgba(36,27,20,.4)}
.vcard__body{padding:24px 28px 30px}
.vcard__body h3{font:var(--type-h3);font-size:18px;letter-spacing:-.01em;margin:0 0 8px}
.vcard__body p{font:var(--type-body);color:var(--text-muted);margin:0}
@media (max-width:960px){.vcards{grid-template-columns:1fr}.vcard__visual{min-height:300px}}

.plate{margin:0 12px;background:var(--surface-plate);color:var(--text-on-plate);border-radius:32px;padding:clamp(64px,8vw,112px) 0}
.plate h2{color:var(--text-on-plate)}
.plate .lede{color:var(--text-on-plate-muted)}
.plate__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(36px,5vw,80px);align-items:start}
.acc{margin-top:32px;border-top:1px solid var(--border-on-plate)}
.acc details{border-bottom:1px solid var(--border-on-plate)}
.acc summary{text-wrap:balance;list-style:none;cursor:pointer;padding:18px 0;font:var(--type-ui);font-size:17px;color:var(--text-on-plate);display:flex;justify-content:space-between;align-items:center;gap:16px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-weight:300;font-size:24px;line-height:1;color:var(--text-on-plate-muted);transition:transform .25s ease}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc details p{margin:10px 0 20px;font:var(--type-body);color:var(--text-on-plate-muted);max-width:46ch}
.acc summary:focus-visible{outline:2px solid var(--focus-ring-on-plate);outline-offset:4px;border-radius:6px}
.stack{display:grid;gap:16px}
.tile{background:var(--surface-plate-deep);border:1px solid var(--border-on-plate);border-radius:24px;padding:28px;position:relative;overflow:hidden}
.tile__cap{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-on-plate-muted);margin:0 0 20px}
.tile--glow::before{content:"";position:absolute;left:-20%;right:-20%;bottom:-70%;height:90%;background:radial-gradient(closest-side,rgba(240,120,79,.5),rgba(240,120,79,0));pointer-events:none}
.tgrid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:440px;margin:0 auto}
.tgrid i{display:flex;align-items:center;justify-content:center;aspect-ratio:1.7;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--border-on-plate);font:var(--type-ui-sm);color:var(--text-on-plate);font-style:normal;text-align:center;padding:0 8px}
.tgrid i.is-lv{background:var(--lv-ink);border-color:var(--lv-coral-400);box-shadow:0 0 0 1px rgba(240,120,79,.4),0 0 56px rgba(240,120,79,.5)}
.tgrid i.is-lv .appicon{width:40px;height:40px;border-radius:11px}
.plate .chan{margin:0}
.plate .crow span{color:var(--text-on-plate-muted)}
.plate .crow b{color:var(--text-on-plate)}
.plate .bar{background:rgba(255,255,255,.08)}
.badges{position:relative;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.badge{width:116px;height:116px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid var(--border-on-plate);background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.08),rgba(255,255,255,0));font:var(--type-ui);color:var(--text-on-plate);box-shadow:0 0 0 1px rgba(240,120,79,.28),0 18px 40px -20px rgba(240,120,79,.6)}
.badge small{font:var(--type-caption);color:var(--text-on-plate-muted);margin-top:4px;max-width:88px}
@media (max-width:960px){.plate{margin:0 8px;border-radius:24px}.plate__grid{grid-template-columns:1fr}}

.types{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:40px}
.type{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-2);padding:22px 18px 20px;min-height:128px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;font:var(--type-ui);font-size:15px;line-height:1.3}
.type i{width:10px;height:10px;border-radius:50%;background:var(--lv-coral-500);display:block}
.type small{display:block;font:var(--type-caption);color:var(--text-muted);margin-top:4px}
@media (max-width:960px){.types{grid-template-columns:repeat(2,minmax(0,1fr))}}

.tiers--slim .tier ul{margin-bottom:18px}
.tiers--slim .tier li{font-size:15px}

.closewrap{position:relative;isolation:isolate;padding:clamp(72px,10vw,140px) 0 12px;margin-top:clamp(40px,6vw,80px)}
.closewrap .field::after{top:0;bottom:auto;height:36%;background:linear-gradient(180deg,var(--surface-page),rgba(253,248,244,0))}
.closewrap .field i{opacity:.8}
.close{text-align:center}
.close h2{font:var(--type-display-2);letter-spacing:var(--tracking-display);margin:0}
.close .lede{margin:18px auto 0;max-width:40ch}
.ctacard{background:var(--surface-card);border-radius:28px;padding:32px;max-width:640px;margin:40px auto 0;box-shadow:0 40px 90px -34px rgba(36,27,20,.42);text-align:left}
.ctacard .form__fields{margin:0}
.foot--card{margin:clamp(56px,7vw,96px) 12px 0;background:rgba(253,248,244,.9);border:1px solid rgba(255,255,255,.8);border-radius:28px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:relative}
.foot--card .wrap{padding-top:36px;padding-bottom:36px}
@media (prefers-reduced-motion:reduce){html.js .field i{animation:none}}
.hero--field.hero--centre{overflow:visible}
.hero--field .field{border-radius:0;top:-96px}
footer.foot--card{padding:0;border-top:0}
.vcard__visual{height:380px;min-height:0;align-items:flex-start;padding-bottom:0}
.vcard__visual .mock{border-radius:22px 22px 0 0}
.plate h2{font:var(--type-display-2);letter-spacing:var(--tracking-display);margin:10px 0 16px}
.plate .eyebrow{display:block;margin-bottom:0}
.close .probe--box{margin:36px auto 0;max-width:680px;text-align:left}
.tiers--slim .tier__quota{margin-bottom:0}
@media (max-width:480px){.figs .fig b{font-size:24px;letter-spacing:-.02em}.figs .fig{padding:12px 10px}}

/* ===== 4 Sep 2026, CEO feedback round 2: headline, no flyer, the plate moves ===== */
.hero--field h1{max-width:30ch}
.mock--week .mock__grid{grid-template-columns:repeat(3,1fr)}
.scenes{position:relative;min-height:540px}
.scene{position:absolute;inset:0;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .5s var(--ease-standard),transform .5s var(--ease-standard);pointer-events:none}
.scene.is-on{opacity:1;transform:none;pointer-events:auto}
html:not(.js) .scene{position:relative;opacity:1;transform:none;margin-bottom:16px}
.scene__card{min-height:540px;display:flex;flex-direction:column}
.acc summary{position:relative;transition:color .3s}
.acc details:not(.is-active) summary{color:var(--text-on-plate-muted)}
html.js .plate.is-auto .acc details.is-active summary::before{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--lv-coral-400);animation:prog 5s linear forwards}
@keyframes prog{to{width:100%}}
.gp{display:grid;gap:14px;color:var(--text-on-plate);flex:1}
.gp__head{display:flex;gap:12px;align-items:center}
.gp__head b{display:block;font:700 17px/1.2 var(--font-sans)}
.gp__head small{display:block;font:var(--type-caption);color:var(--text-on-plate-muted);margin-top:3px}
.gp__row{display:flex;align-items:center;gap:10px;font:var(--type-body-sm);color:var(--text-on-plate)}
.stars{color:#F0B23F;letter-spacing:2px;font-size:14px}
.pill__dot--ok{background:#6FCF97;box-shadow:0 0 0 3px rgba(111,207,151,.22)}
.gp__btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.plate .lv-btn--outline{color:var(--text-on-plate);border-color:var(--border-on-plate);background:transparent}
.gp__review{margin-top:auto;background:rgba(255,255,255,.04);border:1px solid var(--border-on-plate);border-radius:16px;padding:14px 16px;display:grid;gap:8px;justify-items:start}
.gp__review small{font:var(--type-caption);color:var(--text-on-plate-muted)}
.gp__review p{margin:0;font:var(--type-body-sm);color:var(--text-on-plate)}
.lp{background:var(--surface-card);color:var(--text-body);border-radius:16px;padding:18px;display:grid;gap:14px;justify-items:start}
.lp__bar{display:flex;align-items:center;gap:10px;font:700 14px/1 var(--font-sans);padding-bottom:12px;border-bottom:1px solid var(--border-hairline);width:100%}
.lp__h{font:800 20px/1.2 var(--font-display);letter-spacing:-.02em}
.slots{display:flex;gap:8px;flex-wrap:wrap}
.slots span{font:600 12.5px/1 var(--font-sans);padding:9px 12px;border-radius:99px;border:1px solid var(--border-control)}
.slots .is-pick{background:var(--lv-ink);color:#fff;border-color:var(--lv-ink)}
.radius{margin-top:auto;display:flex;align-items:center;gap:18px;padding-top:22px}
.radius i{width:56px;height:56px;border-radius:50%;border:2px solid var(--lv-coral-400);position:relative;flex:none;box-shadow:0 0 0 10px rgba(240,120,79,.12),0 0 0 22px rgba(240,120,79,.06)}
.radius i::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--lv-coral-400)}
.radius b{display:block;font:var(--type-ui);color:var(--text-on-plate)}
.radius small{display:block;font:var(--type-mono-sm);color:var(--text-on-plate-muted);margin-top:5px}
.tgrid i.is-hot{background:rgba(240,120,79,.14);border-color:var(--lv-coral-400);color:#fff}
.booked{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:22px;flex-wrap:wrap}
.booked small{font:var(--type-caption);color:var(--text-on-plate-muted)}
.figs--dark{border:1px solid var(--border-on-plate);border-radius:14px;overflow:hidden;margin-bottom:14px}
.figs--dark .fig{border-color:var(--border-on-plate)}
.figs--dark .fig small{color:var(--text-on-plate-muted)}
.figs--dark .fig b{color:var(--text-on-plate)}
.figs--dark .fig u{color:#6FCF97}
.scene.is-on .bar i{animation:grow .9s var(--ease-standard) both}
@keyframes grow{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
.scene.is-on .tgrid i{animation:light .5s var(--ease-standard) both}
.scene.is-on .tgrid i:nth-child(2){animation-delay:.05s}.scene.is-on .tgrid i:nth-child(3){animation-delay:.1s}.scene.is-on .tgrid i:nth-child(4){animation-delay:.15s}.scene.is-on .tgrid i:nth-child(5){animation-delay:.2s}.scene.is-on .tgrid i:nth-child(6){animation-delay:.25s}.scene.is-on .tgrid i:nth-child(7){animation-delay:.3s}.scene.is-on .tgrid i:nth-child(8){animation-delay:.35s}.scene.is-on .tgrid i:nth-child(9){animation-delay:.4s}
@keyframes light{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.scene.is-on .slots span,.scene.is-on .acct__row,.scene.is-on .bubble,.scene.is-on .gp__row,.scene.is-on .gp__review,.scene.is-on .handoff{animation:light .45s var(--ease-standard) both}
.scene.is-on .slots span:nth-child(2),.scene.is-on .acct__row:nth-child(2),.scene.is-on .gp__row:nth-child(3){animation-delay:.08s}
.scene.is-on .slots span:nth-child(3),.scene.is-on .acct__row:nth-child(3),.scene.is-on .bubble--in{animation-delay:.16s}
.scene.is-on .slots span:nth-child(4),.scene.is-on .acct__row:nth-child(4),.scene.is-on .gp__review{animation-delay:.24s}
.scene.is-on .acct__row:nth-child(5),.scene.is-on .handoff{animation-delay:.34s}
.acct{border:1px solid var(--border-on-plate);border-radius:14px;overflow:hidden}
.acct__row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-on-plate);font:var(--type-body-sm)}
.acct__row:last-child{border-bottom:0}
.acct__row span{color:var(--text-on-plate-muted)}
.acct__row b{color:var(--text-on-plate);font-weight:600;display:flex;align-items:center;gap:10px;text-align:right}
.tog{width:34px;height:20px;border-radius:99px;background:rgba(255,255,255,.14);position:relative;display:inline-block;flex:none}
.tog i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff}
.chat .bubble{margin:12px 0 0}
.chat .bubble--in{background:var(--surface-sunken);color:var(--text-body)}
.handoff{margin-top:16px;border:1px solid var(--border-on-plate);border-radius:16px;padding:14px 16px;display:grid;gap:8px;justify-items:start}
.handoff p{margin:0;font:var(--type-body-sm);color:var(--text-on-plate-muted)}
.pill--amber{background:var(--lv-amber-100);color:var(--lv-amber-700)}
.pill--amber .pill__dot{background:var(--lv-amber-700)}
@media (max-width:960px){.scenes{min-height:0}.scene{position:relative;display:none}.scene.is-on{display:block}.scene__card{min-height:0}}
@media (prefers-reduced-motion:reduce){.scene,.scene.is-on *{animation:none!important;transition:none!important}}
.scene__card{min-height:0}

/* ===== 4 Sep 2026, version 3: bare first screen, the result as a short film ===== */
.hero--fill{min-height:calc(100svh - 70px);display:flex;flex-direction:column;justify-content:center;padding-top:0;padding-bottom:48px}
.hero--fill .hero__inner{padding-top:0}
.film-wrap{padding:8px 0 clamp(72px,9vw,120px)}
.timeline{display:flex;gap:28px;justify-content:center;list-style:none;padding:0;margin:0 0 22px;font:var(--type-ui-sm);color:var(--text-muted);flex-wrap:wrap}
.tl-step{position:relative;padding-left:18px;transition:color .3s}
.tl-step::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--lv-line-strong);transition:background .3s}
.tl-step.is-on{color:var(--text-body)}
.tl-step.is-on::before{background:var(--lv-coral-500);box-shadow:0 0 0 4px rgba(228,85,47,.15)}
.tl-step.is-done::before{background:var(--lv-green-700)}
.film{max-width:none;box-shadow:0 40px 90px -34px rgba(36,27,20,.42),0 1px 0 rgba(255,255,255,.7) inset}
.film__tag{font:var(--type-caption);color:var(--text-muted);margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:var(--border-w) solid var(--border-hairline)}
.mod{border-right:var(--border-w) solid var(--border-hairline);display:flex;flex-direction:column;min-width:0}
.mod:last-child{border-right:0}
.mod__head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:var(--border-w) solid var(--border-hairline)}
.mod__head b{font:700 15px/1.2 var(--font-sans)}
.mod__head small{margin-left:auto;font:600 12px/1 var(--font-sans);color:var(--text-muted)}
.mod__foot{margin-top:auto;display:flex;gap:9px;align-items:center;padding:14px 18px;background:var(--surface-sunken);border-top:var(--border-w) solid var(--border-hairline)}
.mod .mock__row:last-of-type{border-bottom:0}
.mod__foot .lv-btn--accent{background:var(--accent-action);box-shadow:none}
.brand-logo{display:inline-flex}
.brand-logo img{width:34px;height:34px;border-radius:9px;object-fit:contain;background:var(--surface-sunken)}
.mock__photos i{position:relative;overflow:hidden}
.mock__photos i img{width:100%;height:100%;object-fit:cover;display:block}
.week{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 18px 8px}
.wk{display:grid;gap:6px;min-width:0}
.wk span{font:600 11px/1.3 var(--font-sans);color:var(--text-muted)}
.wk__img{aspect-ratio:4/5;border-radius:10px;overflow:hidden;position:relative;background:linear-gradient(160deg,#1F2A44 0%,#3A4A6B 60%,#F28C28 140%)}
.wk:nth-child(2) .wk__img{background:linear-gradient(160deg,#E9DDD1,#8E7B6B)}
.wk:nth-child(3) .wk__img{background:linear-gradient(160deg,#F5F1EA,#F28C28)}
.wk:nth-child(4) .wk__img{background:linear-gradient(160deg,#D7CCC1,#6A5B4E)}
.wk:nth-child(5) .wk__img{background:linear-gradient(160deg,#CFC1B4,#7C6A5D)}
.wk:nth-child(6) .wk__img{background:linear-gradient(160deg,#2B2B2B,#6A6A6A)}
.film.is-brand .wk__img{background:linear-gradient(160deg,var(--accent) 0%,var(--accent-action) 100%)}
.film.is-brand .wk:nth-child(2n) .wk__img{background:linear-gradient(160deg,#E9DDD1,#8E7B6B)}
.wk__img img{width:100%;height:100%;object-fit:cover;display:block}
.wk__img img.hidden{display:none}
.wk__img--video i{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px;border-radius:50%;background:rgba(255,255,255,.92)}
.wk__img--video i::after{content:"";position:absolute;left:11px;top:8px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent var(--lv-ink)}
.film .chips{padding:0 18px;margin:8px 0 12px}
.chat{display:flex;flex-direction:column;padding:6px 0 12px}
.chat .bubble{margin:10px 16px 0}
.typing{display:inline-flex;gap:4px;align-self:flex-start;margin:10px 16px 0;padding:10px 14px;border-radius:16px;background:var(--surface-sunken);max-height:40px;overflow:hidden}
.typing--out{align-self:flex-end;background:#1F6B47}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:dot 1s infinite}
.typing--out i{background:#fff}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-3px);opacity:1}}
.film__figs .figs{border-bottom:var(--border-w) solid var(--border-hairline)}
.film__figs .chan{border-top:0}
/* THE ENDLESS CHAT (CEO, 9 Sep 2026). The conversation never resets: every new
   message grows in at the bottom of the frame, typing first, the older ones move
   up under the fade and leave once out of sight. The script builds each row as
   .msg and switches it on a frame later; the row animates its own height. */
.frame--chat .chat{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%);mask-image:linear-gradient(180deg,transparent 0,#000 8%)}
.frame--chat .msg{display:grid;grid-template-rows:0fr;flex:none;overflow:hidden;opacity:0;transition:grid-template-rows .38s var(--ease-standard),opacity .38s var(--ease-standard)}
.frame--chat .msg.is-on{grid-template-rows:1fr;opacity:1}
.frame--chat .msg>*{min-height:0}
.frame--chat .msg .typing{justify-self:start;width:max-content}
.frame--chat .msg .typing--out{justify-self:end}
html:not(.js) .typing{display:none}
@media (max-width:960px){.film__grid{grid-template-columns:1fr}.mod{border-right:0;border-bottom:var(--border-w) solid var(--border-hairline)}.mod:last-child{border-bottom:0}.film__tag{display:none}.hero--fill{min-height:calc(100svh - 64px)}}
@media (prefers-reduced-motion:reduce){.typing{display:none}.frame--chat .msg{transition:none}}
/* three job cards */
.slot-free{color:var(--text-muted)}
.mock__row--booked{background:var(--status-ready-bg)}
.mock__row--booked .mock__k{color:var(--status-ready-text)}
/* prices in one row */
.prices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px}
@media (max-width:1080px){.prices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.prices{grid-template-columns:1fr}}
/* animation delays, 0.12 s per step */
.a0{animation-delay:0.00s}
.a1{animation-delay:0.12s}
.a2{animation-delay:0.24s}
.a3{animation-delay:0.36s}
.a4{animation-delay:0.48s}
.a5{animation-delay:0.60s}
.a6{animation-delay:0.72s}
.a7{animation-delay:0.84s}
.a8{animation-delay:0.96s}
.a9{animation-delay:1.08s}
.a10{animation-delay:1.20s}
.a11{animation-delay:1.32s}
.a12{animation-delay:1.44s}
.a13{animation-delay:1.56s}
.a14{animation-delay:1.68s}
.a15{animation-delay:1.80s}
.a16{animation-delay:1.92s}
.a17{animation-delay:2.04s}
.a18{animation-delay:2.16s}
.a19{animation-delay:2.28s}
.a20{animation-delay:2.40s}
.a21{animation-delay:2.52s}
.a22{animation-delay:2.64s}
.a23{animation-delay:2.76s}
.a24{animation-delay:2.88s}
.a25{animation-delay:3.00s}
.a26{animation-delay:3.12s}
.a27{animation-delay:3.24s}
.a28{animation-delay:3.36s}
.a29{animation-delay:3.48s}
.a30{animation-delay:3.60s}
.a31{animation-delay:3.72s}
.a32{animation-delay:3.84s}
.a33{animation-delay:3.96s}
.a34{animation-delay:4.08s}
.a35{animation-delay:4.20s}
.a36{animation-delay:4.32s}
.a37{animation-delay:4.44s}
.a38{animation-delay:4.56s}
.a39{animation-delay:4.68s}
.a40{animation-delay:4.80s}
.a41{animation-delay:4.92s}
.a42{animation-delay:5.04s}
.a43{animation-delay:5.16s}
.a44{animation-delay:5.28s}
.a45{animation-delay:5.40s}
.a46{animation-delay:5.52s}
.a47{animation-delay:5.64s}
.a48{animation-delay:5.76s}
.a49{animation-delay:5.88s}
.a50{animation-delay:6.00s}
.a51{animation-delay:6.12s}
.a52{animation-delay:6.24s}
.a53{animation-delay:6.36s}
.a54{animation-delay:6.48s}
.a55{animation-delay:6.60s}
.a56{animation-delay:6.72s}
.a57{animation-delay:6.84s}
.a58{animation-delay:6.96s}
.a59{animation-delay:7.08s}
.a60{animation-delay:7.20s}
.a61{animation-delay:7.32s}
.a62{animation-delay:7.44s}
.a63{animation-delay:7.56s}
.a64{animation-delay:7.68s}
.a65{animation-delay:7.80s}
.film .chat .bubble--in{background:var(--surface-sunken);color:var(--text-body)}
#ergebnis{scroll-margin-top:84px}
.wk__img{aspect-ratio:1/1}
.chips--tight{margin:0;gap:5px}
.chips--tight .chip{padding:5px 8px;font-size:11px}
.film__grid{align-items:stretch}

/* ===== 4 Sep 2026, version 4: the result shows what the studio gets; the dark block follows the scroll ===== */
.film__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.brandline{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:var(--border-w) solid var(--border-hairline)}
.brandline__txt{font:var(--type-caption);color:var(--text-muted);margin-left:auto;text-align:right}
.week--3{grid-template-columns:repeat(3,1fr)}
.mod__hint{margin-left:auto;font:var(--type-caption);color:var(--text-muted);text-align:right}
.panel__live{color:var(--text-muted)}
@media (max-width:960px){.film__grid--2{grid-template-columns:1fr}.brandline__txt{display:none}.mod__hint{display:none}}

/* the dark block that follows the scroll */
.plate--scroll{padding:clamp(72px,9vw,120px) 0 clamp(48px,6vw,96px)}
.plate__grid--scroll{align-items:start}
.plate__side{position:sticky;top:96px;align-self:start}
.acc--scroll summary{position:relative}
.acc--scroll details.is-active summary::before{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:calc(var(--p,0)*100%);background:var(--lv-coral-400);transition:width .12s linear}
.acc--scroll details:not(.is-active) summary{color:var(--text-on-plate-muted)}
.dstack{display:grid;gap:24px}
.dcard{position:relative;min-height:min(72vh,640px);background:var(--surface-plate-deep);border:1px solid var(--border-on-plate);border-radius:28px;padding:36px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;transition:border-color .4s,box-shadow .4s,transform .4s}
.dcard::before{content:"";position:absolute;left:-20%;right:-20%;bottom:-60%;height:80%;background:radial-gradient(closest-side,rgba(240,120,79,.42),rgba(240,120,79,0));opacity:.5;transition:opacity .5s;pointer-events:none}
.dcard.is-active{border-color:rgba(240,120,79,.45);box-shadow:0 0 0 1px rgba(240,120,79,.25),0 40px 90px -40px rgba(240,120,79,.5)}
.dcard.is-active::before{opacity:1}
.dcard__cap{display:none}
.dcard > :not(.dcard__cap){position:relative}
/* 1 the hub */
.hub{position:relative;width:min(100%,440px);aspect-ratio:1;margin:0 auto;--rad:176px}
.hub__ring{position:absolute;inset:44px;border-radius:50%;border:1px dashed rgba(255,255,255,.16)}
.hub__orbit{position:absolute;inset:0;animation:spin 48s linear infinite}
.hub__chip{position:absolute;left:50%;top:50%;width:116px;margin:-19px 0 0 -58px;padding:9px 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:12px;background:var(--surface-plate);border:1px solid var(--border-on-plate);color:var(--text-on-plate);font:var(--type-ui-sm);text-align:center;box-shadow:0 12px 30px -16px rgba(0,0,0,.8);transform:rotate(var(--r)) translate(var(--rad)) rotate(calc(-1*var(--r)));animation:spinrev 48s linear infinite}
.hub__chip svg{width:14px;height:14px;flex:none;opacity:.92}
.hub__chip:nth-child(1){--r:270deg}.hub__chip:nth-child(2){--r:342deg}.hub__chip:nth-child(3){--r:54deg}.hub__chip:nth-child(4){--r:126deg}.hub__chip:nth-child(5){--r:198deg}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinrev{to{transform:rotate(var(--r)) translate(var(--rad)) rotate(calc(-1*var(--r) - 360deg))}}
.hub__core{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px;border-radius:30px;background:var(--lv-ink);border:1px solid var(--lv-coral-400);box-shadow:0 0 0 1px rgba(240,120,79,.35),0 0 90px rgba(240,120,79,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.hub__core .appicon{width:48px;height:48px;border-radius:13px}
.hub__core small{font:var(--type-caption);color:var(--text-on-plate-muted)}
.hub__note{position:absolute;left:0;right:0;bottom:-52px;display:flex;justify-content:center;animation:floaty 5s ease-in-out infinite}
.hub{margin-bottom:64px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* 2 the fan */
.fan{position:relative;height:404px;width:100%;max-width:520px;margin:0 auto}
.fan__card{position:absolute;left:50%;top:0;width:200px;margin-left:-100px;padding:10px 10px 14px;border-radius:16px;background:var(--surface-card);color:var(--text-body);box-shadow:0 30px 60px -30px rgba(0,0,0,.9);transform-origin:50% 120%;animation:floaty 6s ease-in-out infinite}
.fan__card:nth-child(1){transform:rotate(-12deg) translateX(-110px);animation-delay:-1s}
.fan__card:nth-child(2){transform:translateY(-14px);z-index:2;animation-delay:-3s}
.fan__card:nth-child(3){transform:rotate(12deg) translateX(110px);animation-delay:-5s}
.fan__card:nth-child(1){animation-name:floaty1}.fan__card:nth-child(2){animation-name:floaty2}.fan__card:nth-child(3){animation-name:floaty3}
@keyframes floaty1{0%,100%{transform:rotate(-12deg) translateX(-110px) translateY(0)}50%{transform:rotate(-12deg) translateX(-110px) translateY(-8px)}}
@keyframes floaty2{0%,100%{transform:translateY(-14px)}50%{transform:translateY(-24px)}}
@keyframes floaty3{0%,100%{transform:rotate(12deg) translateX(110px) translateY(0)}50%{transform:rotate(12deg) translateX(110px) translateY(-8px)}}
.fan__img{aspect-ratio:4/5;border-radius:10px;background:linear-gradient(160deg,#1F2A44 0%,#3A4A6B 60%,#F28C28 140%);margin-bottom:10px}
.fan__card:nth-child(2) .fan__img{background:linear-gradient(160deg,#E9DDD1,#8E7B6B)}
.fan__card:nth-child(3) .fan__img{background:linear-gradient(160deg,#2B2B2B,#6A6A6A);position:relative}
.fan__card:nth-child(3) .fan__img::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;border-radius:50%;background:rgba(255,255,255,.92)}
.fan__card b{display:block;font:700 13px/1.2 var(--font-sans)}
.fan__card small{display:block;font:var(--type-caption);color:var(--text-muted);margin-top:2px}
.fan__btn{position:absolute;left:0;right:0;bottom:44px;display:flex;justify-content:center;gap:10px;align-items:center}
/* Where the week goes: the studio's own ad accounts, named by their marks. Meta and
   Google always, TikTok where the owner says. */
/* 3 the booking */
.book{max-width:520px;margin:0 auto;display:grid;gap:14px}
.lp--book{padding:14px 0 0;gap:0}
.lp--book .lp__bar{padding:0 18px 12px}
.lp--book .mock__row{width:100%}
.lp--book .mock__row:last-child{border-bottom:0}
.book__msg{display:flex;gap:12px;align-items:flex-start;background:#1F6B47;color:#fff;border-radius:16px;padding:14px 16px;font:var(--type-body-sm);box-shadow:0 20px 50px -30px rgba(0,0,0,.8)}
.book__msg .tick{flex:none;margin-top:1px}
.dcard.is-active .book__msg .tick path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .8s .4s var(--ease-standard) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* 4 google, 5 account */
.gp--card,.acct--card{max-width:520px;margin:0 auto;width:100%}
.gp--card .gp__review{margin-top:6px}
.dcard.is-active .gp__pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(228,85,47,.5)}60%{box-shadow:0 0 0 12px rgba(228,85,47,0)}}
@media (max-width:960px){
  .plate__grid--scroll{grid-template-columns:1fr}
  .plate__side{position:static}
  .plate__side .acc{display:none}
  .dcard{min-height:0;padding:22px}
  .dcard__cap{display:block;margin:0 0 20px}
  .dcard__cap h3{font:var(--type-h3);font-size:18px;color:var(--text-on-plate);margin:0 0 6px}
  .dcard__cap p{margin:0;font:var(--type-body-sm);color:var(--text-on-plate-muted)}
  .hub{--rad:118px;width:min(100%,320px)}
  .hub__chip{width:92px;margin-left:-46px;font-size:11px}
  .fan{height:344px}
        .fan__card{width:150px;margin-left:-75px}
  .fan__card:nth-child(1){transform:rotate(-12deg) translateX(-80px)}
  .fan__card:nth-child(3){transform:rotate(12deg) translateX(80px)}
  @keyframes floaty1{0%,100%{transform:rotate(-12deg) translateX(-80px) translateY(0)}50%{transform:rotate(-12deg) translateX(-80px) translateY(-8px)}}
  @keyframes floaty3{0%,100%{transform:rotate(12deg) translateX(80px) translateY(0)}50%{transform:rotate(12deg) translateX(80px) translateY(-8px)}}
}
@media (prefers-reduced-motion:reduce){.hub__orbit,.hub__chip,.fan__card,.hub__note,.gp__pulse{animation:none!important}}
@media (max-width:480px){.topbar__row{gap:8px}.topbar__right{gap:8px}.topbar__right .lv-btn{padding:8px 12px;font-size:12.5px;white-space:nowrap}.wm--sm{--wm:24px}.lang{padding:6px 9px;font-size:12px}}
.topbar{overflow-x:clip}

/* the headline: the result big, the three jobs as a lighter second line */
.hero--fill h1{font-size:clamp(34px,4.8vw,64px);max-width:32ch;line-height:1.06}
.h1__sub{display:block;font-size:.6em;font-weight:700;color:var(--text-muted);margin-top:.4em;letter-spacing:-.02em}
@media (max-width:480px){.hero--fill h1{font-size:32px}}

/* the top bar floats over the colour field: no line, no white band; frosted only once you scroll */
.topbar{background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .35s var(--ease-standard),box-shadow .35s var(--ease-standard)}
.topbar.is-scrolled{background:rgba(253,248,244,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(36,27,20,.06)}
.topbar + main > .hero--fill{margin-top:-70px;padding-top:70px;min-height:100svh}
@media (max-width:960px){.topbar + main > .hero--fill{margin-top:-68px;padding-top:68px}}

/* footer: tagline, social, pages, legal, language; the language switch lives only here */
.foot__top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.foot__tag{margin:12px 0 0;font:var(--type-body-sm);color:var(--text-muted);max-width:46ch}
.foot__social{display:flex;align-items:center;gap:2px;margin-left:-10px}
.foot__social a{display:inline-flex;width:44px;height:44px;border-radius:var(--radius-1);align-items:center;justify-content:center;color:var(--lv-coral-700);transition:color .12s ease-out,background-color .12s ease-out}
.foot__social a:hover{color:var(--lv-coral-800,#A8360F);background:var(--surface-accent-soft,rgba(228,85,47,.10))}
.foot__social a:focus-visible{outline:2px solid var(--lv-coral-500);outline-offset:2px}
.foot__social svg{width:21px;height:21px;display:block}
.foot__lang{margin-left:auto;display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--radius-button);background:var(--surface-sunken);border:1px solid var(--border-hairline)}
.foot__lang a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:var(--radius-button);font:var(--type-ui-sm);font-weight:600;color:var(--text-muted);text-decoration:none;transition:color var(--dur-1),background var(--dur-2) var(--ease-standard),box-shadow var(--dur-2) var(--ease-standard)}
.foot__lang a:hover{color:var(--text-body)}
.foot__lang a[aria-current="page"]{background:var(--surface-card);color:var(--text-body);box-shadow:0 1px 3px rgba(58,32,16,.14)}
.foot__lang a:focus-visible{outline:2px solid var(--lv-coral-500);outline-offset:2px}
.foot__row--meta{margin-top:20px;padding-top:18px;border-top:1px solid var(--border-hairline);align-items:baseline}
@media (max-width:720px){.foot__lang{margin-left:0}}
/* the language hint: only when the browser language and the page language differ */

/* phone: the first screen breathes - fewer words, more air, calmer colour field */
@media (max-width:480px){
  .topbar + main > .hero--fill{padding-top:108px;padding-bottom:56px}
  .hero--fill h1{font-size:30px;line-height:1.08}
  .h1__sub{font-size:.58em;margin-top:.5em}
  .hero--fill .lede--centre{font-size:16px;line-height:1.55;margin-top:16px}
  .hero--fill .probe--box{margin-top:28px;padding:14px}
  /* The field's name stays for screen readers only, on phones too (CEO, 17 Sep 2026 evening:
     the visible label above the field is not wanted). */
  .hero--fill .probe__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;margin:0}
  .hero--fill .probe__hint[data-state="idle"]{display:none}
  .hero--fill .probe__hint{margin-top:10px}
  .hero--fill .field i{opacity:.5}
}
.probe__hint:empty{display:none}

/* the colour field fills the whole first screen, edge to edge, and only the bottom runs into the page */
.hero--field .field{background:
  radial-gradient(ellipse 85% 65% at 50% 58%, rgba(247,174,147,.62) 0%, rgba(247,174,147,0) 70%),
  radial-gradient(ellipse 60% 55% at 8% 78%, rgba(240,120,79,.42) 0%, rgba(240,120,79,0) 70%),
  radial-gradient(ellipse 60% 55% at 92% 70%, rgba(240,120,79,.42) 0%, rgba(240,120,79,0) 70%),
  radial-gradient(ellipse 70% 40% at 50% 0%, rgba(251,217,204,.9) 0%, rgba(251,217,204,0) 80%),
  linear-gradient(180deg, #FCEFE7 0%, #FADFD3 50%, #FDF8F4 100%)}
.hero--field .field i{opacity:.55}
.hero--field .field::after{height:34%}
.closewrap .field{background:
  radial-gradient(ellipse 85% 70% at 50% 70%, rgba(247,174,147,.6) 0%, rgba(247,174,147,0) 70%),
  radial-gradient(ellipse 60% 55% at 6% 80%, rgba(240,120,79,.4) 0%, rgba(240,120,79,0) 70%),
  radial-gradient(ellipse 60% 55% at 94% 78%, rgba(240,120,79,.4) 0%, rgba(240,120,79,0) 70%),
  linear-gradient(180deg, #FDF8F4 0%, #FBE4DA 55%, #FADFD3 100%)}

/* the rotating headline word */
/* the slot: as wide as the widest word (measured by the script), word centred in it, so
   the first line never changes width and "Mehr" never moves */
.rot{display:inline-block;text-align:left;min-width:var(--rot-w,0px);transition:opacity .38s ease}
.rot.is-out{opacity:0}
@media (prefers-reduced-motion:reduce){.rot{transition:none}}

/* THE HEADLINE HOLDS STILL WHILE ITS WORD TURNS (5 Sep 2026). The words differ
   in length, so a free-wrapping line broke in a different place on every swap
   and everything below jumped. The rest of the sentence now always starts its
   own line; on a phone the word gets a line to itself and the comma goes, so
   the block is three lines whatever the word - and the size is chosen so the
   longest word still fits one line at 375px. */
h1.rot-h1 .rot-rest{display:block}
@media (max-width:640px){
  h1.rot-h1{font-size:clamp(26px,8.5vw,36px)}
  h1.rot-h1 .rot{display:block;text-align:center;min-width:0}
  h1.rot-h1 .rot-c{display:none}
}


/* THE STRIP (CEO, 5 Sep 2026: one rule for all five cards). At the foot of every
   card: a caption saying where this happens for the studio, then the logos of the
   places it happens - all in the plate ink, official shapes, one height, never a
   link. A mark stands with its name where the mark alone says nothing; a wordmark
   stands alone. Magicline, PerfectGym and Boulevard join once their access is confirmed. */
.strip{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:auto;padding-top:22px;color:var(--text-on-plate)}
.strip small{flex:0 0 100%;text-align:center;font:var(--type-caption);color:var(--text-on-plate-muted);margin-bottom:-2px}
.strip__i{display:inline-flex;align-items:center;gap:7px;font:var(--type-ui-sm);font-weight:600;white-space:nowrap;flex:none;color:var(--text-on-plate);opacity:.92}
.strip__i img{height:16px;width:auto;display:block}
.strip__i img.is-mark{height:14px}
@media (max-width:640px){.strip{gap:8px 12px;padding-top:16px}.strip__i{font-size:11px;gap:5px}.strip__i img{height:13px}.strip__i img.is-mark{height:12px}}

/* WHO LEON AND VERA ARE (CEO, 5 Sep 2026): one line under the example panel's head - the two
   AI workers, the brand promise, and the boundary at the booked appointment. */
.panel__who{margin:0;padding:12px 20px 2px;font:var(--type-body-sm, 500 14px/1.5 var(--font-sans));color:var(--text-muted);max-width:78ch}
@media (max-width:640px){.panel__who{padding:10px 16px 0;font-size:13px}}

/* THE EXAMPLE PANEL, OPTION A1 (CEO, 5 Sep 2026): three cards in the page's own
   Lovable-like language. Headline left, a two-line lede, then Leon (one advert),
   Vera (one conversation, the film keeps playing in it) and the hand-off (the
   appointment in the studio software, with the systems' logos). Every card: white,
   hairline, soft shadow, a quiet wash in the studio's colour, a fragment that
   bleeds off the edge, one bold line and two grey lines. No buttons, no chips. */
.sh{max-width:680px}
.sh__h{font:800 clamp(26px,3vw,38px)/1.08 var(--font-sans);letter-spacing:-.02em;margin:0;text-wrap:balance}
/* one sentence per row: each colleague starts their own line, at every width and in every language */
@media (max-width:430px){.sh__h{font-size:23px}}
.sh__h em{font-style:normal;color:var(--accent-action)}
.sh__p{margin:12px 0 0;font:500 16px/1.5 var(--font-sans);color:var(--text-muted);max-width:52ch;text-wrap:balance;hyphens:manual;-webkit-hyphens:manual}
.lcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px}
.lc{background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(36,27,20,.05),0 22px 48px -30px rgba(36,27,20,.3)}
.lc__stage{position:relative;height:380px;overflow:hidden;background:linear-gradient(180deg,var(--surface-sunken),#FFFFFF)}
.lc__cap{padding:22px 24px 26px}
.lc__cap h3{margin:0;font:700 16px/1.3 var(--font-sans);letter-spacing:-.01em;text-wrap:balance}
.lc__cap p{margin:6px 0 0;font:500 14px/1.5 var(--font-sans);color:var(--text-muted);max-width:40ch}
.lc__who{display:block;margin-bottom:8px;font:600 10.5px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-action)}
.lc__who--vera{color:var(--lv-green-700)}
.lc__who--end{color:var(--text-muted)}
.ad{position:absolute;right:-34px;top:28px;width:78%;height:calc(100% - 56px);border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#1F2A44 0%,#2B3F6B 100%);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;box-shadow:0 24px 50px -24px rgba(31,42,68,.7)}
.ad__logo{position:absolute;left:14px;top:14px;width:28px;height:28px;border-radius:8px;background:#fff;color:#1F2A44;font:800 14px/1 var(--font-sans);display:grid;place-items:center}
.ad__k{font:600 10px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.ad__h{display:block;font:800 21px/1.1 var(--font-sans);letter-spacing:-.02em;margin-top:8px}
.ad__cta{display:inline-block;margin-top:12px;padding:8px 12px;border-radius:999px;background:#F28C28;color:#1B1B1B;font:700 12px/1 var(--font-sans);align-self:flex-start}
.frame{position:absolute;left:22px;right:22px;top:24px;background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);border-radius:14px;box-shadow:0 24px 50px -30px rgba(36,27,20,.45);padding:14px}
.frame__hd{display:flex;justify-content:space-between;align-items:center;font:600 10px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.frame--chat{bottom:24px;display:flex;flex-direction:column}
.frame--chat .chat{padding:0;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.frame--chat .typing{padding:7px 11px;margin:8px 0 0}
.frame--chat .typing i{width:5px;height:5px}
.frame--chat .chat .bubble{margin:8px 0 0;max-width:92%;font-size:13px;line-height:1.38;padding:9px 12px}
.frame--chat .typing{margin:8px 0 0}
.frame--cal{left:24px;right:16px;top:28px}
.cal{display:grid;font:500 13px/1.4 var(--font-sans)}
.cal__r{display:grid;grid-template-columns:64px 1fr;gap:10px;padding:9px 6px;border-top:var(--border-w) solid var(--border-hairline);color:var(--text-muted)}
.cal__r:first-child{border-top:0}
.cal__r--booked{background:var(--status-ready-bg);color:var(--text-body);border-radius:8px}
.cal__k{font:600 11px/1.6 var(--font-mono,ui-monospace,monospace);color:var(--text-muted)}
.cal__soft{display:flex;gap:10px 6px;flex-wrap:wrap;align-items:center;margin-top:12px;padding-top:10px;border-top:var(--border-w) solid var(--border-hairline)}
.cal__soft small{flex:0 0 100%;font:600 10px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
.cal__net{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font-sans);color:var(--text-body);white-space:nowrap;margin-right:8px}
.cal__net img{height:16px;width:auto;display:block}
.cal__net img.is-mark{height:14px}
@media (max-width:960px){.lcs{grid-template-columns:1fr}.lc__stage{height:360px}.ad{right:-20px;width:62%}.frame{right:16px}.frame--cal{right:16px}}
@media (max-width:640px){.lc__stage{height:330px}.ad{width:72%}}

/* THE ROTATING ADVERT (CEO, 5 Sep 2026): four kinds of business, one photograph each,
   cross-fading inside Leon's card. Photographs made for the page with fal; the lines are
   the product's own patterns. */
.ad--rot{padding:0;background:#141416;box-shadow:0 0 0 1px rgba(36,27,20,.14),0 28px 56px -26px rgba(31,42,68,.55);width:auto;height:calc(100% - 40px);aspect-ratio:4/5;top:20px;right:-6px}
.ad__slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:12px;opacity:0;transition:opacity .7s var(--ease-standard)}
.ad__slide.is-on{opacity:1}
.ad__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ad__slide .ad__k{background:rgba(12,12,14,.55);color:#fff;padding:5px 9px;border-radius:999px;opacity:1;backdrop-filter:blur(6px)}
.ad__slide .ad__k,.ad__slide .ad__h,.ad__slide .ad__cta{position:relative;z-index:1}
.ad--rot .ad__logo{z-index:2}
.fan__img{position:relative;overflow:hidden}
.fan__img img{width:100%;height:100%;object-fit:cover;display:block}
.fan__img--video::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;border-radius:99px;background:rgba(255,255,255,.92)}
.fan__img--video::before{content:"";position:absolute;left:50%;top:50%;z-index:1;width:0;height:0;margin:-7px 0 0 -4px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #241B14}
@media (prefers-reduced-motion:reduce){.ad__slide{transition:none}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* WCAG 2.2 target size: footer links get a 32px hit area, the visible text stays as it is */
.foot__nav a,

@media (max-width:640px){.fan{margin-top:18px}}

/* ---------------- The enterprise call · cal.com (13 Sep 2026) ----------------
   R-446: the fourth card carries no price and one button that books a call.
   funnel-and-lifecycle-tooling.md buys Cal.com for the routing form by country
   and language, round-robin across consultants, the white-label embed and Google
   Meet as the room: the sheet asks the three routing questions, then day and time.
   No mail fallback: the call is the door. Split plate: the offer on ink at left,
   the form on white at right. */
.bookcall{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:20px;background:rgba(20,16,12,.66)}
.bookcall[data-open="1"]{display:grid}
.bookcall__box{position:relative;width:min(100%,960px);max-height:calc(100vh - 40px);overflow:auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--surface-card);border-radius:var(--radius-3);box-shadow:var(--shadow-overlay)}
.bookcall__side{background:var(--surface-plate);color:var(--text-on-plate);padding:34px 32px;display:flex;flex-direction:column;gap:14px}
.bookcall__eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--lv-coral-300)}
.bookcall__side h3{font:var(--type-display-3);letter-spacing:var(--tracking-display);margin:0;text-wrap:balance}
.bookcall__lede{font:var(--type-body-sm);color:var(--text-on-plate-muted);margin:0;max-width:34ch}
.bookcall__facts{list-style:none;margin:auto 0 0;padding:18px 0 0;border-top:1px solid var(--border-on-plate);display:grid;gap:10px}
.bookcall__facts li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font:var(--type-body-sm);color:var(--text-on-plate)}
.bookcall__facts li::before{content:"";width:14px;height:14px;margin-top:3px;border-radius:50%;background:var(--lv-green-700);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12"/></svg>') center/contain no-repeat}
.bookcall__main{position:relative;padding:34px 32px 26px;display:flex;flex-direction:column;gap:24px}
.bookcall__x{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:var(--radius-button);border:var(--border-w) solid var(--border-control);background:var(--surface-card);color:var(--text-body);font:600 18px/1 var(--font-sans);cursor:pointer}
.bookcall__k{display:block;font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.bookcall__q{display:grid;gap:8px;margin-bottom:14px}
.bookcall__q b{font:var(--type-ui)}
.bookcall__opts{display:flex;flex-wrap:wrap;gap:6px}
.bookcall__opt{min-height:40px;padding:8px 14px;border-radius:var(--radius-button);border:var(--border-w) solid var(--border-control);background:var(--surface-card);color:var(--text-body);font:600 13px/1.2 var(--font-sans);cursor:pointer;transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1)}
.bookcall__opt:hover{background:var(--surface-sunken)}
.bookcall__opt[aria-pressed="true"]{background:var(--lv-ink,#241B14);border-color:var(--lv-ink,#241B14);color:#fff}
.bookcall__cal{display:grid;gap:10px}
/* cal.com sits in here. The height holds the month view without the sheet
   jumping when the calendar arrives, and the ground matches the page so the
   frame does not read as a window onto somewhere else. */
.bookcall__embed{min-height:min(var(--cal-h,560px),72vh);height:min(var(--cal-h,560px),72vh);border-radius:var(--radius-card,18px);overflow:hidden;background:var(--surface-page,#FDF8F4);border:var(--border-w) solid var(--border-hairline,#E6D8CC)}
.bookcall__embed[aria-busy="true"]{display:grid;place-items:center}
.bookcall__embed iframe{display:block;width:100%;height:100%;border:0}
.bookcall__note{margin:0;font:var(--type-caption);color:var(--text-muted)}
.bookcall__note--fallback a{color:var(--action-accent);text-decoration:underline}
.bookcall__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:18px;border-top:var(--border-w) solid var(--border-hairline)}
.bookcall__foot p{margin:0;font:var(--type-caption);color:var(--text-muted);flex:1 1 220px}
@media (max-width:820px){.bookcall__box{grid-template-columns:1fr}.bookcall__side{padding:28px 24px 22px}.bookcall__main{padding:26px 22px 22px}.bookcall__facts{margin-top:6px}}
@media (max-width:520px){.bookcall{padding:0}.bookcall__box{max-height:100vh;border-radius:0}.bookcall__embed{min-height:640px;border-radius:0}}

/* ---------------- Optical sizing for partner marks ----------------
   Measured ink inside the shared 24-box: instagram/facebook/whatsapp/
   google-calendar ~100%, google 97%, tiktok 87%, webchat 79%, meta 66% tall.
   The two under-filled ones are scaled so their ink matches the row; the file
   itself is untouched, so the trademark is never redrawn or restyled. */
.is-mark[src$="webchat.svg"],[data-mark="webchat"]{transform:scale(1.26)}
.is-mark[src$="meta.svg"]{transform:scale(1.14)}

/* ---------------- Nachher v3 (proposal, 12 Sep 2026) ----------------
   What separates this from v2: no card grid. Each step is a full-width
   editorial row — copy on one side at a fixed measure, the product large on
   the other, alternating. One rule line between rows, no boxes, no washes.
   The accent is a single 3px bar and one number. Type does the work. */
.n3 .section{padding-block:clamp(56px,9vw,112px)}
.n3 .sh{max-width:none;margin:0 0 clamp(40px,6vw,72px);text-align:left}
.n3 .sh__h{font:800 clamp(40px,5.4vw,68px)/.98 var(--font-display);letter-spacing:-.045em;margin:18px 0 0;max-width:15ch}
.n3 .sh__p{font:400 19px/1.5 var(--font-sans);color:var(--text-muted);max-width:44ch;margin:22px 0 0}

/* the four rows */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,112px);align-items:center;padding:clamp(48px,7vw,80px) 0}
.row + .row{border-top:var(--border-w) solid var(--border-hairline)}
.rows > .row:first-child{padding-top:0}
.rows > .row:last-child{padding-bottom:0}
.row--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.row--flip .row__copy{order:2}
.row--flip .row__vis{order:1}
@media (max-width:820px){.row,.row--flip{grid-template-columns:1fr;padding:64px 0}.row--flip .row__copy{order:1}.row--flip .row__vis{order:2}}
.row__n{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:14px}
.row__n::after{content:"";flex:none;width:28px;height:3px;background:var(--lv-coral-500)}
.row--vera .row__n::after{background:var(--lv-green-700)}
.row--end .row__n::after,.row--acct .row__n::after{background:var(--text-body)}
.row__copy h3{font:800 clamp(30px,3.4vw,44px)/1.04 var(--font-display);letter-spacing:-.04em;margin:26px 0 20px;max-width:14ch}
.row__copy p{font:400 17px/1.55 var(--font-sans);color:var(--text-muted);margin:0;max-width:38ch}
.row__copy .lv-btn{margin-top:30px}
.row__vis{min-width:0;display:flex;justify-content:center;align-items:center}
/* each mock was written for an absolutely-positioned stage; the row gives it one */
.row__stage{position:relative;flex:0 0 auto;max-width:100%;overflow:visible}
.row--leon .row__stage{width:360px;aspect-ratio:4/5}
.row--leon .ad{position:absolute;inset:0;width:100%;height:100%;right:auto;top:auto;border-radius:22px;box-shadow:0 40px 80px -40px rgba(58,32,16,.5);animation:none}
.row--vera .row__stage{width:440px;aspect-ratio:1/1.1}
.row--vera .frame--chat{position:absolute;inset:0;left:0;right:0;top:0;bottom:0;border-radius:22px;box-shadow:0 40px 80px -40px rgba(30,107,71,.45);overflow:hidden}
/* No aspect-ratio here, deliberately. The two stages above hold a child that
   is absolutely positioned to inset:0, so the stage has to carry the size and
   the child can never outgrow it. The calendar is position:relative and sizes
   itself: on a phone it needs about 420px in a 350px-wide stage, while 4/3
   asks for 263. Blink grows the stage to fit, WebKit keeps the ratio and lets
   the card hang 160px out of the bottom, where its "runs with" logo strip
   lands on the next row's headline. Content decides the height. */
.row--end .row__stage{width:480px}
.row--end .frame--cal{position:relative;inset:auto;left:auto;right:auto;top:auto;width:100%;border-radius:22px;box-shadow:0 40px 80px -40px rgba(58,32,16,.35);overflow:hidden}
.row--acct .row__stage{width:440px}

/* platforms: ink marks, one line, generous, with the sentence set as a headline not a caption */
.logos3{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:820px){.logos3{grid-template-columns:1fr}}
.logos3 h3{font:800 clamp(26px,2.8vw,36px)/1.08 var(--font-display);letter-spacing:-.035em;margin:0;max-width:14ch}
.logos3__row{display:flex;flex-wrap:wrap;align-items:center;gap:28px 40px}
.logos3__row img{height:26px;width:auto;display:block;opacity:.85}
.logos3__row img.is-mark{height:24px}
.logos3__row img[alt="Square Appointments"],.logos3__row img[alt="Google Kalender"]{height:38px}

/* proof: one statement, then a ledger of three numbers. No panels. */
.proof3{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,112px);align-items:start}
@media (max-width:820px){.proof3{grid-template-columns:1fr}}
.proof3__q{font:600 clamp(24px,2.6vw,34px)/1.25 var(--font-display);letter-spacing:-.03em;margin:0;max-width:20ch;color:var(--text-body)}
.proof3__who{display:flex;align-items:center;gap:14px;margin-top:36px}
.proof3__who img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.proof3__who b{display:block;font:var(--type-ui)}
.proof3__who small{font:var(--type-body-sm);color:var(--text-muted)}
.ledger{display:flex;flex-direction:column}
.ledger__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:28px 0;border-top:var(--border-w) solid var(--border-hairline)}
.ledger__row:last-child{border-bottom:var(--border-w) solid var(--border-hairline)}
.ledger__row b{font:800 clamp(44px,5vw,64px)/1 var(--font-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.ledger__row span{font:400 16px/1.45 var(--font-sans);color:var(--text-muted);max-width:26ch;text-align:right}
.ledger.is-ph b{color:var(--text-muted)}
.ledger__ph{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);padding-bottom:12px}

/* ---------------- v3 on the phone ----------------
   The rows already stack; this sets the rhythm and sizes for a 390px screen so
   the phone is designed, not merely not broken. The stage widths above are
   desktop values; here they yield to the column and keep their aspect. */
@media (max-width:820px){
  .n3 .section{padding-block:72px}
  .n3 .sh{margin-bottom:48px}
  .n3 .sh__h{font-size:clamp(34px,10vw,44px);max-width:12ch}
  .n3 .sh__p{font-size:16px;margin-top:14px}
  .row{gap:32px;padding:56px 0}
  .row__copy h3{font-size:clamp(26px,7.4vw,32px);margin:18px 0 12px;max-width:none}
  .row__copy p{font-size:15.5px;max-width:none}
  .row__copy .lv-btn{margin-top:22px}
  .row__stage{width:100% !important;max-width:min(100%,420px)}
  .row--leon .row__stage{max-width:300px}
  .row--leon .ad,.row--vera .frame--chat,.row--end .frame--cal,.row--acct .frame--money{border-radius:18px;box-shadow:0 24px 48px -28px rgba(58,32,16,.4)}
  .row__n{font-size:12px}
  .logos3{gap:24px}
  .logos3 h3{font-size:clamp(22px,6.4vw,28px);max-width:none}
  .logos3__row{gap:18px 26px}
  .logos3__row img{height:22px;opacity:.9}
  .logos3__row img.is-mark{height:20px}
  .logos3__row img[alt="Square Appointments"],.logos3__row img[alt="Google Kalender"],.logos3__row img[alt="Google Calendar"]{height:30px}
  .proof3{gap:40px}
  .proof3__q{font-size:clamp(21px,5.8vw,26px);max-width:none}
  .proof3__who{margin-top:24px}
  .ledger__row{grid-template-columns:1fr;gap:6px;padding:20px 0}
  .ledger__row b{font-size:clamp(40px,12vw,52px)}
  .ledger__row span{text-align:left;max-width:none;font-size:15px}
}
@media (max-width:420px){
  .row{padding:44px 0}
  .row--leon .row__stage{max-width:260px}
}

/* On the phone every control is a thumb target: the small pill grows to 44. */
@media (max-width:820px){
  .lv-btn--sm{min-height:44px;padding-block:10px}
  .price .lv-btn{width:100%;justify-content:center}
}

/* ---------------- Top bar on the phone (13 Sep 2026) ----------------
   Below 900 the bar tried to hold the mark, three anchors and the button on one
   line; the anchors wrapped and the button was pushed off the right edge, hidden
   by overflow:clip. A one-page site on a phone needs two things in the bar: the
   mark and the one action. The anchors stay reachable in the footer. */
@media (max-width:900px){
  .topbar__nav{display:none}
  .topbar__row{gap:12px;min-height:60px;justify-content:space-between}
  .topbar__right{margin-left:0;gap:10px}
  .topbar__right a.textlink{display:none}
  .topbar .wm--sm{--wm:26px}
  .topbar .lv-btn--sm{min-height:44px;padding:0 16px;font-size:13px;white-space:nowrap}
  .topbar + main > .hero--fill{margin-top:-60px;padding-top:60px}
}
@media (max-width:480px){
  .topbar__row{min-height:56px}
  .topbar .wm--sm{--wm:24px}
  .topbar .lv-btn--sm{min-height:44px;padding:0 14px;font-size:12.5px}
  .topbar + main > .hero--fill{margin-top:-56px;padding-top:56px}
}

/* ---------------- Prices, from lv-product-tiers.md (13 Sep 2026) ----------------
   The tiers differ by volume and by nothing an owner has to understand. So a card
   carries only what differs: the price, the credits, what they buy, and on Pro the
   one thing that costs a person. Everything shared stands once, below. */
.price{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);border-radius:var(--radius-2);box-shadow:var(--shadow-card);padding:26px 24px 22px;overflow:hidden}
.price__tier{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.price__amt{display:flex;align-items:baseline;gap:6px;margin:14px 0 0}
.price__amt b{font:800 44px/1 var(--font-display);letter-spacing:-.035em}
.price__amt i{font:var(--type-ui);font-style:normal;color:var(--text-muted)}
.price__credits{margin-top:18px;padding-top:16px;border-top:var(--border-w) solid var(--border-hairline);display:flex;flex-direction:column;gap:4px}
.price__credits b{font:800 22px/1.1 var(--font-display);letter-spacing:-.02em}
.price__credits span{font:var(--type-body-sm);color:var(--text-muted);text-wrap:pretty}
.price__plus{margin-top:14px;display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start;font:var(--type-body-sm);color:var(--text-body)}
.price__plus svg{width:16px;height:16px;margin-top:3px;color:var(--lv-green-700)}
.price__cta{margin-top:auto;padding-top:22px}
.price__cta .lv-btn{width:100%}
.price__flag{position:absolute;top:22px;right:22px;font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-button);background:var(--lv-coral-600);color:#fff}
/* the middle carries the plate and the one accent device */
.price--mid{background:var(--surface-plate);border-color:var(--surface-plate);color:var(--text-on-plate);box-shadow:var(--shadow-raised)}
.price--mid::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--lv-coral-500)}
.price--mid .price__tier,.price--mid .price__amt i,.price--mid .price__credits span{color:var(--text-on-plate-muted)}
.price--mid .price__credits{border-top-color:var(--border-on-plate)}
.price--mid .price__plus{color:var(--text-on-plate)}
.price--mid .price__plus svg{color:#6FCF97}
.price--wide{background:var(--surface-sunken);box-shadow:none}
.price--wide .price__amt b{font-size:26px;line-height:1.15;letter-spacing:-.02em}
.price__tags{margin-top:18px;padding-top:16px;border-top:var(--border-w) solid var(--border-hairline);display:flex;flex-wrap:wrap;gap:6px}
.price__tags span{font:600 12.5px/1.2 var(--font-sans);padding:6px 11px;border-radius:var(--radius-button);border:var(--border-w) solid var(--border-control);color:var(--text-body)}
/* what is the same everywhere, and what a credit buys */
.tiers__shared{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;margin-top:16px}
.shared,.menu{background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);border-radius:var(--radius-2);padding:24px}
.shared h3,.menu h3{font:var(--type-h3);margin:0 0 4px}
.shared p,.menu p{font:var(--type-body-sm);color:var(--text-muted);margin:0 0 16px;max-width:52ch}
.shared ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.shared li{display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start;font:var(--type-body-sm);color:var(--text-body)}
.shared li svg{width:16px;height:16px;margin-top:3px;color:var(--lv-green-700)}
.menu table{width:100%;border-collapse:collapse}
.menu td{padding:10px 0;border-top:var(--border-w) solid var(--border-hairline);font:var(--type-body-sm);color:var(--text-body);vertical-align:baseline}
.menu td:last-child{text-align:right;white-space:nowrap;font:800 15px/1.2 var(--font-display);letter-spacing:-.01em}
.menu td:last-child small{font:var(--type-caption);color:var(--text-muted);margin-left:5px;letter-spacing:0}
.menu tr:first-child td{border-top:0}
.menu__pack{margin:14px 0 0;font:var(--type-caption);color:var(--text-muted)}
@media (max-width:1080px){.tiers__shared{grid-template-columns:1fr}}
@media (max-width:620px){.shared ul{grid-template-columns:1fr}.price__amt b{font-size:40px}}

/* ---------------- Under the prices: the promise and the trust row ----------------
   R-445 and the trust row from lv-product-tiers.md, set as one band instead of
   three loose centred lines. The promise is the headline; the four facts are the
   row beneath it; the legal note is a caption and nothing more. */
.pledge{margin-top:16px;background:var(--surface-card);border:0;border-radius:var(--radius-2);padding:26px 24px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px 32px;align-items:center}
.pledge__h{font:var(--type-h2);letter-spacing:var(--tracking-display);margin:0;text-wrap:balance;max-width:24ch}
.pledge__h em{font-style:normal;color:var(--text-accent)}
.pledge__row a{color:inherit;text-decoration:underline;text-decoration-color:var(--border-control);text-underline-offset:3px}
.pledge__row a:hover{text-decoration-color:currentColor}
@media (max-width:900px){.pledge{grid-template-columns:1fr}}


.frame--chat .typing i{background:var(--text-muted)}
.frame--chat .typing--out i{background:#fff}

.frame__hd .chat-tabs{display:inline-flex;align-items:center;gap:12px;color:var(--text-muted)}
.frame__hd .chat-tab{display:inline-flex;align-items:center;gap:5px;color:var(--text-muted);transition:color var(--dur-2) var(--ease-standard)}
.frame__hd .chat-tab img{width:12px;height:12px;display:inline-block;flex:none;opacity:.45;transition:opacity var(--dur-2) var(--ease-standard)}
.frame__hd .chat-tab.is-on{color:var(--lv-green-700);font-weight:700}
.frame__hd .chat-tab.is-on img{opacity:1}
.frame--chat .frame__hd{flex-wrap:wrap;row-gap:6px}
.frame--chat .frame__hd .chat-tabs{flex:0 0 auto}
/* on a phone the marks carry the row; the lit channel keeps its name */
@media (max-width:480px){.frame__hd .chat-tabs{gap:10px}.frame__hd .chat-tab:not(.is-on){font-size:0;gap:0}.frame__hd .chat-tab:not(.is-on) img{width:14px;height:14px}.frame--chat .frame__hd{flex-wrap:nowrap}.frame--chat .frame__hd>span:last-child{flex:0 0 auto;margin-left:auto}.frame--chat .frame__hd .chat-tabs{flex:0 1 auto;min-width:0}}

/* ---------------- The calendar runs (13 Sep 2026) ----------------
   Bookings arrive while you watch: a free slot fills with a name, lifts on the
   green ground, and the count in the head ticks up. The same clock rules as the
   chat: on screen it runs, off screen it stops, under reduced motion the first
   frame stands. */
.frame--cal .frame__hd .cal__count{color:var(--text-muted)}
.frame--cal .frame__hd .cal__count b{color:var(--lv-green-700);font-weight:700;transition:transform var(--dur-2) var(--ease-standard);display:inline-block}
.frame--cal .frame__hd .cal__count.is-tick b{transform:translateY(-2px)}
.cal__week{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:6px 0 10px}
.cal__day{display:grid;justify-items:center;gap:4px;padding:6px 0 5px;border-radius:8px;font:600 10.5px/1 var(--font-sans);color:var(--text-muted)}
.cal__day i{width:5px;height:5px;border-radius:50%;background:var(--border-control);display:block}
.cal__day.is-today{background:var(--surface-sunken);color:var(--text-body)}
.cal__day.is-today i{background:var(--lv-green-700)}
.cal__r{position:relative;grid-template-columns:52px 1fr auto;align-items:baseline;transition:background var(--dur-3) var(--ease-standard),color var(--dur-3) var(--ease-standard)}
.cal__r > span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal__tag{font:600 9.5px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--lv-green-700);font-style:normal;white-space:nowrap;justify-self:end}
.cal__r--new{animation:calin .6s var(--ease-standard) both}
@keyframes calin{0%{box-shadow:inset 0 0 0 0 rgba(30,107,71,0);background:var(--status-ready-bg)}30%{box-shadow:inset 0 0 0 2px rgba(30,107,71,.35)}100%{box-shadow:inset 0 0 0 0 rgba(30,107,71,0)}}
.cal__r--new .cal__tag{animation:tagin .45s var(--ease-standard) .15s both}
@keyframes tagin{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cal__r--new,.cal__r--new .cal__tag{animation:none}}
@media (max-width:480px){.cal__r{grid-template-columns:46px 1fr auto}.cal__tag{display:none}}

/* ---------------- Your money: one slider, one switch (13 Sep 2026) ----------------
   The argument in one control. The owner sets the day's budget; the month is
   arithmetic beside it; the campaign sits paused until the switch is his. On
   screen the thumb drifts once so the visitor sees it is theirs to move; the
   first touch takes over. Coral for the action, green only when he starts. */
.frame--money{position:relative;inset:auto;width:100%;border-radius:22px;box-shadow:0 40px 80px -40px rgba(58,32,16,.35);overflow:hidden;padding:16px 18px 18px}
.money{display:grid;gap:18px;margin-top:8px}
.money__top{display:grid;grid-template-columns:1fr auto;grid-template-areas:"k m" "fig m";align-items:end;gap:2px 14px}
.money__k{grid-area:k;font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.money__fig{grid-area:fig;display:inline-flex;align-items:baseline;gap:6px}
.money__fig b{font:800 clamp(48px,6vw,64px)/1 var(--font-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;transition:transform var(--dur-2) var(--ease-standard);display:inline-block}
.money__fig i{font:600 22px/1 var(--font-sans);font-style:normal;color:var(--text-muted)}
.money__month{grid-area:m;align-self:end;font:var(--type-body-sm);color:var(--text-muted);text-align:right;max-width:14ch;text-wrap:balance}
.money__month b{display:block;font:700 15px/1.3 var(--font-sans);color:var(--text-body);font-variant-numeric:tabular-nums}
.money__slider{display:grid;gap:8px;position:relative}
.money__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.money__slider input{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;--p:20%}
.money__slider input::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--lv-coral-500) var(--p),var(--surface-sunken) var(--p))}
.money__slider input::-moz-range-track{height:8px;border-radius:99px;background:var(--surface-sunken)}
.money__slider input::-moz-range-progress{height:8px;border-radius:99px;background:var(--lv-coral-500)}
.money__slider input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#fff;border:3px solid var(--lv-coral-600);box-shadow:0 2px 8px rgba(58,32,16,.18);transition:transform var(--dur-2) var(--ease-standard)}
.money__slider input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--lv-coral-600);box-shadow:0 2px 8px rgba(58,32,16,.18)}
.money__slider input:active::-webkit-slider-thumb,.money__slider input:focus-visible::-webkit-slider-thumb{transform:scale(1.08)}
.money__slider input:focus-visible{outline:2px solid var(--lv-coral-500);outline-offset:4px;border-radius:99px}
.money__scale{display:flex;justify-content:space-between;font:var(--type-caption);color:var(--text-muted);padding:0 2px}
.money__start{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:var(--surface-sunken);min-height:44px}
.money__sw{position:relative;flex:none;width:52px;height:32px;border-radius:99px;background:var(--border-control);cursor:pointer;transition:background .34s var(--ease-standard)}
.money__sw i{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(58,32,16,.25);transition:transform .34s cubic-bezier(.2,.9,.25,1.05)}
.money__sw[aria-checked="true"]{background:var(--lv-green-700)}
.money__sw[aria-checked="true"] i{transform:translateX(20px)}
.money__sw:focus-visible{outline:2px solid var(--lv-coral-500);outline-offset:3px}
.money__state{display:grid;line-height:1.2}
.money__state b{font:700 14px/1.3 var(--font-sans);color:var(--text-body)}
.money__state small{font:var(--type-caption);color:var(--text-muted)}
.money__facts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.money__facts li{display:grid;grid-template-columns:14px 1fr;gap:9px;align-items:start;font:var(--type-body-sm);color:var(--text-muted)}
.money__facts li::before{content:"";width:6px;height:6px;margin-top:7px;border-radius:50%;background:var(--lv-green-700)}
.money.is-live .money__fig b{transform:translateY(-2px)}
@media (max-width:480px){.money__top{grid-template-columns:1fr;grid-template-areas:"k" "fig" "m"}.money__month{text-align:left;max-width:none}.money__fig b{font-size:44px}}

/* ---------------- Runs with: two flowing lanes (13 Sep 2026) ----------------
   Lane one is where Vera answers and Leon publishes; lane two is where the
   appointment lands. They drift in opposite directions, fade at the edges,
   and stand still under reduced motion or when the pointer rests on them.
   The marks are third-party trademarks: ink on cream, never recoloured. */
.section--lanes{padding-top:0;overflow:hidden}
.lanes__hd{display:grid;gap:10px;justify-items:center;text-align:center;margin-bottom:clamp(28px,4vw,44px)}
.lanes__hd h2{font:var(--type-display-2);letter-spacing:var(--tracking-display);margin:0;text-wrap:balance;max-width:20ch}
.lanes__hd p{font:var(--type-body);color:var(--text-muted);margin:0;max-width:52ch;text-wrap:pretty}
.lanes{display:grid;gap:18px}
.lane{position:relative;display:grid;gap:10px}
.lane__k{display:block;text-align:center;font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.lane__track{display:flex;width:max-content;gap:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);animation:lane 46s linear infinite}
.lane--rev .lane__track{animation-direction:reverse;animation-duration:54s}
.lane:hover .lane__track{animation-play-state:paused}
.lane__set{display:flex;align-items:center;gap:14px;padding-right:14px;flex:none}
.lane__i{position:relative;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px;border-radius:var(--radius-button);background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);box-shadow:var(--shadow-card);white-space:nowrap}
.lane__i img{height:20px;width:auto;display:block}
.lane__i img.is-mark{height:18px}
.lane__i b{font:600 13.5px/1 var(--font-sans);color:var(--text-body)}
.lane__i:has(img:not(.is-mark)) b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@keyframes lane{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
@media (prefers-reduced-motion:reduce){.lane__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;mask-image:none;-webkit-mask-image:none}.lane__set[aria-hidden]{display:none}}
@media (max-width:640px){.lane__i{height:48px;padding:0 16px}.lane__i img{height:17px}.lane__i img.is-mark{height:16px}.lanes__hd{margin-bottom:26px}}

/* ---------------- The boundary (13 Sep 2026) ----------------
   Replaces the quote and the ledger until there are real figures. The sentence
   stands on its own; nobody signs it. */
.n3 .section--bound{padding-top:0}
.bound{display:grid;gap:18px;justify-items:center;text-align:center;padding:0 0 8px}
.bound__q{font:var(--type-display-2);letter-spacing:var(--tracking-display);margin:0;max-width:24ch;text-wrap:balance}
.bound__p{font:var(--type-body);color:var(--text-muted);margin:0;max-width:44ch;text-wrap:pretty}

/* ---------------- Rhythm on the phone (13 Sep 2026) ---------------- */
@media (max-width:640px){
  .n3 .row{gap:28px;padding:40px 0}
  .n3 .rows > .row:first-child{padding-top:0}
  .n3 .row__copy h3{margin:14px 0 12px}
  .n3 .sh{margin-bottom:32px}
  .lanes{gap:14px}
  .prices{gap:12px;margin-top:24px}
  .pledge{padding:22px 20px;gap:14px}
  .faq details summary{padding:16px 0}
}

/* ---------------- The chat, anchored like a real one (14 Sep 2026) ----------------
   Lines grow from the bottom, the finished conversation dims above the new one
   and folds away once the new one has two lines. The frame is never empty. */
.frame--chat .chat{flex:1 1 auto;min-height:0;justify-content:flex-end;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%);mask-image:linear-gradient(180deg,transparent 0,#000 14%)}
.frame--chat .msg.is-old{opacity:.42;transition:opacity .5s var(--ease-standard)}
.frame--chat .msg.is-old .bubble--out{background:var(--surface-sunken);color:var(--text-body)}

/* ---------------- The booking toast (14 Sep 2026) ----------------
   Every new appointment announces itself once: a pill rises from the foot of
   the frame with the green dot pulsing, holds, and leaves. The row beneath it
   fills at the same moment, so the toast is the headline and the row the record. */
.frame--cal{overflow:hidden}
.cal__toast{position:absolute;left:14px;right:auto;max-width:calc(100% - 28px);width:max-content;bottom:auto;top:66px;display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"dot k k" "dot name meta";column-gap:10px;row-gap:2px;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(36,27,20,.92);color:#fff;box-shadow:0 18px 40px -18px rgba(36,27,20,.6);backdrop-filter:blur(6px);transform:translateY(10px) scale(.98);opacity:0;transition:transform .42s cubic-bezier(.2,.9,.25,1.05),opacity .3s var(--ease-standard);pointer-events:none;z-index:3}
.cal__toast.is-on{transform:none;opacity:1}
.cal__toast--tr{left:auto;right:14px}
.cal__toast--bl{top:auto;bottom:14px}
.cal__toast--br{left:auto;right:14px;top:auto;bottom:14px}
.cal__toast.is-flying{transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .55s var(--ease-standard)}
.cal__r--landing{background:var(--lv-green-050)}
.cal{transition:opacity .35s var(--ease-standard)}
.cal.is-turn{opacity:0}
.cal__toast-dot{grid-area:dot;width:10px;height:10px;border-radius:50%;background:#3A9A6E;box-shadow:0 0 0 0 rgba(58,154,110,.6);animation:toastdot 1.4s ease-out 2}
@keyframes toastdot{0%{box-shadow:0 0 0 0 rgba(58,154,110,.55)}100%{box-shadow:0 0 0 10px rgba(58,154,110,0)}}
.cal__toast-k{grid-area:k;font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:#6FCF97}
.cal__toast b{grid-area:name;font:700 14px/1.2 var(--font-sans);white-space:nowrap}
.cal__toast-m{grid-area:meta;font:var(--type-caption);color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (prefers-reduced-motion:reduce){.cal__toast{transition:none}.cal__toast-dot{animation:none}}

/* pledge marks as tiles: sand disc, ink stroke, one line each */
.pledge__row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pledge__row li{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:3px 12px 3px 3px;border-radius:var(--radius-button);background:var(--surface-sunken);font:600 12.5px/1.25 var(--font-sans);color:var(--text-body)}
.pledge__ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-card);color:var(--lv-green-700);box-shadow:0 1px 2px rgba(58,32,16,.08)}
.pledge__ic svg{width:18px;height:18px}

/* tier cards, 14 Sep 2026: what the month looks like, and what an ad costs */
.price__line{margin:10px 0 0;font:var(--type-body-sm);color:var(--text-muted);text-wrap:pretty;min-height:0}
.price__credits{margin-top:16px;padding-top:14px}
.price__credits span{font:var(--type-caption)}
.price__list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;align-content:start}
.price__list li{display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start;font:var(--type-body-sm);color:var(--text-body)}
.price__list svg{width:16px;height:16px;margin-top:3px;color:var(--lv-green-700)}
.price--mid .price__line{color:var(--text-on-plate)}
.price--mid .price__list li{color:var(--text-on-plate)}
.price--mid .price__list svg{color:#6FCF97}
.price--wide .price__tags{margin-top:16px;padding-top:14px}

/* ---------- 01 Leon: the gallery of adverts and films (18 Sep 2026) ----------
   One horizontal reel the visitor moves himself: pictures in 4:5, films in 9:16, all the same height, snapping card by
   card, bleeding to the right edge of the screen so the next one shows. Films play muted while they are in view and
   pause when they leave it; a play button covers a film that is not playing. Cards fade in as they enter the reel
   (scroll-driven, no script). Filters show adverts, films or both. Nothing here talks to a third party. */
.row--gal{display:block}
.row__copy--gal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:end}
.row__copy--gal .row__n,.row__copy--gal h3,.row__copy--gal p{grid-column:1}
.row__copy--gal h3{max-width:16ch}
.row__copy--gal p{margin:0;max-width:56ch}
.gal__ctl{grid-column:2;grid-row:1/4;align-self:end;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.gal__filters{display:flex;gap:8px;flex-wrap:wrap}
.gal__chip{appearance:none;border:var(--border-w) solid var(--border-control);background:var(--surface-card);color:var(--text-body);font:700 13px/1 var(--font-sans);padding:9px 14px;border-radius:999px;cursor:pointer;transition:background .2s var(--ease-standard),color .2s var(--ease-standard),border-color .2s var(--ease-standard)}
.gal__chip:hover{border-color:var(--border-strong)}
.gal__chip.is-on{background:var(--action-solid);border-color:var(--action-solid);color:var(--text-on-plate)}
.gal__chip:focus-visible{outline:2px solid var(--lv-coral-500);outline-offset:2px}
.gal{margin-top:34px}
.gal__track{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding:6px 0 18px;margin-right:calc(50% - 50vw);padding-right:max(24px,calc(50vw - 50%));scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.gal__track::-webkit-scrollbar{display:none}
.gal__track:focus-visible{outline:2px solid var(--lv-coral-500);outline-offset:6px;border-radius:12px}
.gal__card{position:relative;flex:none;margin:0;height:clamp(340px,44vh,460px);border-radius:18px;overflow:hidden;background:var(--surface-plate);scroll-snap-align:start;box-shadow:0 0 0 1px rgba(36,27,20,.10),0 28px 56px -30px rgba(31,42,68,.45)}
.gal__card--ad{aspect-ratio:4/5}
.gal__card--film{aspect-ratio:9/16}
.gal__card img,.gal__card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--surface-plate)}
.gal__card.is-hidden{display:none}
@supports (animation-timeline: view()){
  .gal__card{animation:gal-enter linear both;animation-timeline:view(inline);animation-range:entry 10% entry 90%}
  @keyframes gal-enter{from{opacity:.45;transform:scale(.95)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.gal__card{animation:none!important;transform:none!important;opacity:1!important}}
@media (max-width:820px){.row__copy--gal{grid-template-columns:1fr}.gal__ctl{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:4px}.gal{margin-top:24px}.gal__card{height:clamp(300px,64vw,420px)}}
/* ---------- the sticky field on phones (18 Sep 2026) ---------- */
.probe--sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(253,248,244,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:var(--border-w) solid var(--border-hairline);box-shadow:0 -12px 30px -18px rgba(36,27,20,.35);transform:translateY(110%);transition:transform .38s var(--ease-standard)}
.probe--sticky.is-on{transform:none}
.probe--sticky .probe__row{display:flex;gap:10px;flex-direction:row;align-items:stretch}
/* the field keeps the room, the button takes only what its words need - the phone rule further up
   makes every button in this row full width, which squeezed the field to a stump (CEO, 18 Sep 2026) */
.probe--sticky .probe__row .lv-input{flex:1 1 auto;width:auto;min-width:0;min-height:50px;font-size:16px;padding-left:16px}
.probe--sticky .probe__row .lv-btn{flex:0 0 auto;width:auto;min-height:50px;padding:0 18px;font-size:14.5px;white-space:nowrap}
@media (max-width:359px){.probe--sticky .probe__row .lv-btn{padding:0 14px;font-size:13.5px}}
@media (min-width:821px){.probe--sticky{display:none}}
@media (prefers-reduced-motion:reduce){.probe--sticky{transition:none}}
/* the pledge chips two by two on phones (18 Sep 2026) */
@media (max-width:560px){.pledge__row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pledge__row li{min-height:34px;font-size:12px;padding-right:8px}}
/* the call sheet's two lines (18 Sep 2026) and the currency sign chip */
.pledge__ic--sign{font:800 15px/1 var(--font-sans);color:var(--lv-green-700)}
.bookcall__fields{display:grid;gap:10px;margin-top:10px}
.bookcall__field{display:grid;gap:5px;font:600 12.5px/1.3 var(--font-sans);color:var(--text-muted)}
.bookcall__field .lv-input{width:100%;min-height:44px}
.bookcall__ta{resize:vertical;min-height:58px;padding-top:10px;padding-bottom:10px;line-height:1.4;font:inherit;font-size:15px}

/* ============ A piece of the reel, larger (CEO, 18 Sep 2026) ============
   A visitor who wants to look closely at an advert or a film may, without leaving the page: the
   piece fills the screen, the one button stands under it, and everything closes back to the reel. */
.lbx{position:fixed;inset:0;z-index:95;display:none;place-items:center;padding:16px;background:rgba(20,16,12,.80);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lbx[data-open="1"]{display:grid}
.lbx__box{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(100%,560px);max-height:100%}
.lbx__stage{display:flex;align-items:center;justify-content:center;min-height:0;width:100%}
.lbx__stage img,.lbx__stage video{display:block;width:auto;height:auto;max-width:100%;max-height:min(78vh,860px);border-radius:16px;background:var(--surface-plate);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.lbx__foot{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;flex:none}
.lbx__cap{margin:0;font:var(--type-body-sm);line-height:1.45;color:rgba(253,248,244,.86);text-align:center;max-width:44ch}
.lbx__hint{margin:0;font:var(--type-caption);color:rgba(253,248,244,.5)}
.lbx__cta{min-height:50px}
.lbx__media{position:relative;display:inline-block;max-width:100%;line-height:0}
.lbx__x{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:999px;border:0;background:rgba(253,248,244,.92);color:var(--lv-ink);cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 18px -6px rgba(0,0,0,.5);z-index:2}
.lbx__x svg{display:block}
.lbx__x:hover{background:#FFFFFF}
.lbx__x:focus-visible,.lbx__cta:focus-visible{outline:2px solid var(--lv-coral-300);outline-offset:3px}
.gal__card{cursor:zoom-in}
@media (max-width:820px){.lbx__stage img,.lbx__stage video{max-height:62vh}}

/* THE THREE WAYS IN (CEO, 20 Sep 2026): one field for a website, a Google profile or the
   studio's name. The line under the field names the three and lights the one recognised;
   a typed name shows its matches under the field, the first one is what the button takes. */
.probe__ways{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin:8px 0 0;font:var(--type-caption);font-weight:600;letter-spacing:.01em;color:var(--text-muted)}
.probe__ways span{position:relative;padding:4px 11px;transition:color .18s}
.probe__ways span+span::before{content:"";position:absolute;left:-2px;top:50%;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;transform:translateY(-50%)}
.probe__ways span::after{content:"";position:absolute;left:11px;right:11px;bottom:0;height:2px;border-radius:2px;background:var(--lv-coral-500);transform:scaleX(0);transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.probe__ways[data-k="site"] span[data-k="site"],.probe__ways[data-k="google"] span[data-k="google"],.probe__ways[data-k="name"] span[data-k="name"]{color:var(--text-body)}
.probe__ways[data-k="site"] span[data-k="site"]::after,.probe__ways[data-k="google"] span[data-k="google"]::after,.probe__ways[data-k="name"] span[data-k="name"]::after{transform:scaleX(1)}
.probe--box .probe__hint{margin-top:8px}
.probe__matches[hidden]{display:none}
.probe__matches{position:absolute;left:0;right:0;top:60px;z-index:30;background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);border-radius:var(--radius-3);box-shadow:var(--shadow-panel);padding:6px;display:flex;flex-direction:column;text-align:left}
.probe__match{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:60px;padding:9px 10px;border:0;border-radius:12px;background:transparent;color:var(--text-body);text-align:left;cursor:pointer;font:inherit}
.probe__match:hover,.probe__match:focus-visible{background:var(--lv-coral-050);outline:none}
.probe__match[data-first]{background:var(--lv-coral-050)}
.probe__match[data-first]:hover{background:var(--lv-coral-200)}
.probe__match-ph{width:44px;height:44px;border-radius:10px;background:var(--lv-sand-deep);flex:none;overflow:hidden}
.probe__match-ph img{display:block;width:100%;height:100%;object-fit:cover}
.probe__match-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.probe__match-t b{font:700 15px/1.2 "Plus Jakarta Sans",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.probe__match-t small{font:400 12.5px/1.3 "Plus Jakarta Sans",sans-serif;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.probe__match-r{font:700 13px/1 "Plus Jakarta Sans",sans-serif;color:var(--text-body);white-space:nowrap;display:flex;align-items:center;gap:4px}
.probe__match-r i{font-style:normal;color:var(--lv-coral-500)}
.probe__match-r small{font-weight:500;color:var(--text-muted)}
.probe__match-foot{font:400 12px/1.3 "Plus Jakarta Sans",sans-serif;color:var(--text-muted);padding:8px 12px 6px;border-top:var(--border-w) solid var(--border-hairline);margin-top:4px}
@media (max-width:480px){.hero--fill .probe__ways{margin-top:8px}}
@media (prefers-reduced-motion:reduce){.probe__ways span::after,.probe__ways span{transition:none}}
@media (max-width:560px){.probe__match-t b,.probe__match-t small{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}}

/* THE FILMS NEVER SHOW BLACK (CEO, 20 Sep 2026): the still picture sits under the film and stays
   until the film has drawn its first frame; from then on the film is what you see. */
.gal__card--film{position:relative}
.gal__card--film .gal__poster{display:block;width:100%;height:100%;object-fit:cover}
.gal__card--film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease}
.gal__card--film.has-played video{opacity:1}
@media (prefers-reduced-motion:reduce){.gal__card--film video{transition:none}}
/* THE DIVIDER AT ONE HEIGHT (CEO, 20 Sep 2026): the three price cards share their rows, so the line
   above the credits sits at the same height on Start, Studio and Pro whatever the sentence's length. */
.prices{row-gap:0;column-gap:16px}
.price{display:grid;grid-template-rows:subgrid;grid-row:span 6;align-content:start}
.price__cta{grid-row:6}
.price--wide .price__tags{grid-row:4}
@media (max-width:1080px){.price{margin-bottom:16px}.prices{margin-bottom:-16px}}
@media (max-width:820px){.prices{column-gap:12px}}