/* Tokens copied from docs/design/enitire-design-system/tokens.css.
   The dark set is :root's own; the light media query below overrides it. */
:root {
  --background: #0D1313;
  --foreground: #F2F7F6;
  --card: #151D1D;
  --primary: #2DD4BF;
  --primary-foreground: #0D1313;
  --primary-hover: #5EEAD4;
  --primary-subtle: #123C39;
  --secondary: #1C2726;
  --muted-foreground: #A7B5B3;
  --border: #2B3937;
  --input: #68706E;
  --ring: var(--primary);
  --success-subtle: #14361D;
  --success-text: #68CA80;
  --warning-subtle: #3F2903;
  --warning-text: #E8AA4E;
  --danger-subtle: #4B1D1B;
  --danger-text: #F28881;
  --info-subtle: #133555;
  --info-text: #73B0EE;
  --neutral-subtle: #243231;
  --neutral-text: #A7B5B3;
  --disabled: #667472;
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.55);
  --overlay: rgba(0, 0, 0, 0.60);
  --mosaic: 45, 212, 191;
  --mosaic-alpha: 0.17;
  --label: var(--primary); /* small teal text: stays above 4.5:1 even on the strongest square */
}
@media (prefers-color-scheme: light) {
  :root {
    --background: #F8FAFA;
    --foreground: #172121;
    --card: #FFFFFF;
    --primary: #0F766E;
    --primary-foreground: #FFFFFF;
    --primary-hover: #115E59;
    --primary-subtle: #CCFBF1;
    --secondary: #F1F5F4;
    --muted-foreground: #52605F;
    --border: #DDE5E4;
    --input: #878F8D;
    --success-subtle: #DEF9DE;
    --success-text: #2C6A31;
    --warning-subtle: #FEF0D8;
    --warning-text: #9A5A00;
    --danger-subtle: #FFE8E6;
    --danger-text: #B63B39;
    --info-subtle: #E5F0FC;
    --info-text: #226FB3;
    --neutral-subtle: #E7EDEC;
    --neutral-text: #52605F;
    --disabled: #AAB5B4;
    --shadow-float: 0 1px 2px rgba(23, 33, 33, 0.06), 0 8px 24px rgba(23, 33, 33, 0.10);
    --overlay: rgba(23, 33, 33, 0.40);
    --mosaic: 20, 184, 166;
    --mosaic-alpha: 0.26;
    --label: var(--primary-hover);
  }
}
:root {
  --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-11: 44px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --content-max: 1200px;
  --header-wrap-max: 90rem;
  --content-narrow: 640px;
  --header-height: 56px;
  --font-sans: Nunito, ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Landing only: display sizes above the product type scale, section rhythm, motion */
  --display: clamp(2.5rem, 7.4vw, 4.75rem);
  --headline: clamp(1.875rem, 4.6vw, 3rem);
  --lead: clamp(1.125rem, 2vw, 1.375rem);
  --section: clamp(72px, 11vw, 144px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Cyrillic is its own file: nunito-latin.woff2 has none of it, so the Russian page
   fell back to the system font. Same variable Nunito, weights 200-1000
   (docs/design/design_system_brief.md, section 9: Nunito, Latin and Cyrillic).
   The range is that subset, so a page with no character in it does not download the file. */
@font-face {
  font-family: Nunito;
  src: url("nunito-cyrillic.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Y7: these scripts and Latin Extended languages use installed system fonts; the
   shipped Nunito faces cover basic Latin and Cyrillic only (design_system_brief.md 9). */
:root:lang(hy), :root:lang(zh), :root:lang(ja), :root:lang(ko), :root:lang(hi), :root:lang(th), :root:lang(tr), :root:lang(vi), :root:lang(pl) {
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The pause control stops everything that moves, animations and transitions alike (WCAG 2.2.2). Both are
   taken away rather than frozen: an entrance that starts after the page was paused would otherwise be held
   on its first frame, which is an empty box, and the same happens to a menu or an FAQ answer opened while
   paused. Without them each element shows the state it was going to end on.
   The spinner is exempt: it exists only while a waitlist request is in flight.
   With scripting off the control is hidden and the flag never appears.
   Under reduced motion the block at the end of this file already runs every animation out in 0.01 ms. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-motion="paused"] *:not(.spinner),
  :root[data-motion="paused"] *:not(.spinner)::before,
  :root[data-motion="paused"] *:not(.spinner)::after { animation: none !important; transition: none !important; }
  /* the crossed-out message is what the card says, not an effect */
  :root[data-motion="paused"] .talk.reveal.in .bubble { text-decoration: line-through; }
}

*, *::before, *::after { box-sizing: border-box; }
/* The header grows with the text size, so the script measures it into --header-actual. The fallback is the
   56 px constant (the header is 57 px with its border) plus --space-4, which clears the header up to 200 %
   text - as far as the page without scripting is asked to go. Above that an anchor is short by the difference. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-actual, var(--header-height)) + var(--space-4)); }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word; /* a word longer than its column breaks instead of pushing the page sideways at large text sizes */
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }

.wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 768px) { .wrap { padding: 0 var(--space-8); } }
section { padding: var(--section) 0; }

.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 20; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: var(--space-2); }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type */
.display { font-size: var(--display); line-height: 1.04; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
.headline { font-size: var(--headline); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.lead { font-size: var(--lead); line-height: 1.5; color: var(--muted-foreground); text-wrap: pretty; }
.eyebrow { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: var(--label); letter-spacing: 0.02em; }
.caption { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--muted-foreground); }
.numeric { font-variant-numeric: tabular-nums; }
/* An amount is one unit: "40.00 EUR" never breaks between the number and its code. */
.numeric, .totals strong, .slot-out strong { white-space: nowrap; }
.preview .numeric { flex: none; }

/* Header. The header itself is the container its three widths are measured against, the menu panel
   included, so they answer to the text size as well as to the window. */
.site-header {
  container: header / inline-size;
  position: sticky; top: 0; z-index: 10;
  min-height: var(--header-height);
  background: var(--background);
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}
.site-header.scrolled { border-bottom-color: var(--border); }
.site-header .wrap { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; min-width: 0; min-height: var(--space-11); gap: var(--space-2); text-decoration: none; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; }
.brand .wordmark { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The wordmark goes when the header is narrower than 18em. At the normal text size that is narrower
   than any phone; at a large one it is what keeps the row inside the screen. */
@container header (max-width: 18em) { .brand .wordmark { display: none; } }
.brand b { color: var(--primary); font-weight: inherit; }
.brand .mark { width: 30px; height: 32px; display: grid; place-items: center; }
.brand .mark img, .brand-xl img { mix-blend-mode: multiply; }
.brand .mark img { width: 100%; height: 100%; object-fit: contain; }
@media (prefers-color-scheme: dark) { .brand .mark img, .brand-xl img { filter: invert(1) hue-rotate(180deg) saturate(1.3); mix-blend-mode: screen; } }

/* Header navigation, sign in, phone menu */
.site-nav { display: none; align-items: center; min-width: 0; gap: var(--space-1); }
.site-nav a, .menu-panel a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--space-11); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--muted-foreground); font-size: 0.9375rem; font-weight: 600; text-decoration: none; transition: color 150ms ease, background-color 150ms ease; }
.site-nav a:hover, .menu-panel a:not(.btn):hover { color: var(--foreground); background: var(--secondary); }
/* D1 Screens; screen_specs §1: translated controls keep their width; the ellipsized wordmark yields first. */
.header-actions { display: flex; flex-shrink: 0; align-items: center; min-width: 0; gap: var(--space-2); }
.btn.btn-ghost { background: transparent; color: var(--foreground); border: 1px solid var(--border); }
.btn.btn-ghost:hover { background: var(--secondary); }
.header-actions .btn.btn-ghost { display: none; }
.header-actions .btn.btn-ghost.demo-entry { display: inline-flex; }
@container header (min-width: 40em) { .header-actions .btn.btn-ghost { display: inline-flex; } }
.cta-long { display: none; }
@container header (min-width: 26.25em) { .cta-long { display: inline; } .cta-short { display: none; } }
.menu-button { display: inline-grid; place-items: center; width: var(--space-11); height: var(--space-11); border: 1px solid var(--border); border-radius: var(--radius-md); background: transparent; color: var(--foreground); font-size: 1.25rem; cursor: pointer; }
.menu-button .when-open, .site-header:has(.menu-panel:popover-open) .menu-button .when-closed { display: none; }
.site-header:has(.menu-panel:popover-open) .menu-button .when-open { display: block; }
/* The panel is a popover in the top layer, placed under the header: at the header's bottom edge where anchor
   positioning exists, else at its measured height. The browser hides it while closed, so display is set only
   for the open state (an author display would override the browser's hiding). */
.site-header { anchor-name: --site-header; }
.menu-panel {
  position: fixed; inset: auto 0 auto 0; top: var(--header-actual, var(--header-height)); top: anchor(--site-header bottom);
  width: auto; max-height: calc(100dvh - var(--header-height)); margin: 0; border: 0; border-bottom: 1px solid var(--border);
  padding: var(--space-3) var(--space-4) var(--space-5); background: var(--card); color: var(--foreground); box-shadow: var(--shadow-float);
}
.menu-panel:popover-open { display: grid; gap: var(--space-1); animation: pop 200ms var(--ease); }
@supports not selector(:popover-open) { .menu-panel { display: none; } }
.menu-panel a:not(.btn) { min-height: 48px; font-size: 1.0625rem; color: var(--foreground); }
.menu-panel .btn { margin-top: var(--space-3); color: var(--foreground); }
/* The demo adds a third header action, so the six navigation links need 80em before the menu gives way
   (Y9.md, Screens). Below that, at any text size, they stay behind the menu. The panel is not hidden here:
   the script owns whether it is open, and it has to hand focus back to the header before it goes. */
@container header (min-width: 80em) {
  .site-nav { display: flex; }
  .menu-button { display: none; }
}
/* Y7: eighteen native language names need a bounded vertical list, with 44px targets
   and the same theme tokens as the header (screen_specs.md 1.9; M-111). */
.header-actions .menu-button { flex: none; }
.lang-menu { position: relative; flex: none; --lang-menu-width: 12rem; --lang-menu-height: 24rem; }
.lang-menu summary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-width: var(--space-11); min-height: var(--space-11); padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--secondary); color: var(--foreground); font: inherit; font-size: 0.875rem; font-weight: 700; list-style: none; cursor: pointer; }
.lang-menu summary .ic { transform: rotate(90deg); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu .lang-switch { position: absolute; z-index: 2; top: calc(100% + var(--space-1)); right: 0; background: var(--card); box-shadow: var(--shadow-float); }
.lang-switch { display: flex; flex-direction: column; width: var(--lang-menu-width); max-width: calc(100vw - var(--space-8)); max-height: min(var(--lang-menu-height), calc(100dvh - var(--header-actual, var(--header-height)) - var(--space-8))); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: var(--radius-md); }
.lang-switch a { display: flex; flex: none; align-items: center; min-width: var(--space-11); min-height: var(--space-11); padding: 0 var(--space-3); color: var(--muted-foreground); font-size: 0.875rem; font-weight: 700; text-decoration: none; }
.lang-switch a + a { border-top: 1px solid var(--border); }
.lang-switch a[aria-current="page"], .lang-switch a:hover { color: var(--foreground); background: var(--secondary); }
.menu-panel .lang-menu { justify-self: start; margin-top: var(--space-3); }
.menu-panel .lang-menu .lang-switch { position: static; margin-top: var(--space-2); box-shadow: none; }
/* Translated labels are longer than the English ones. Below these widths the long start label and the
   six nav links do not fit beside the logo, so the short label and the menu button stay (Header navigation, sign in, phone menu). The
   English breakpoints above are unchanged. :lang() outranks those rules, which name only a class. */
@container header (max-width: 34.99em) {
  :root:not(:lang(en)) .cta-long { display: none; }
  :root:not(:lang(en)) .cta-short { display: inline; }
}
/* D1 Screens; screen_specs §1: wider Armenian system fonts need the short action label on tablets too. */
@container header (max-width: 59.99em) {
  :root:lang(hy) .cta-long { display: none; }
  :root:lang(hy) .cta-short { display: inline; }
}
@container header (max-width: 91.99em) {
  :root:not(:lang(en)) .site-nav { display: none; }
  :root:not(:lang(en)) .menu-button { display: inline-grid; }
}
/* Seven navigation links and four actions in a translated language need more than the page's content width,
   so once the links show, the header row alone takes the width the longest of them asks for. */
@container header (min-width: 92em) {
  :root:not(:lang(en)) .site-header .wrap { max-width: var(--header-wrap-max); }
}
/* The Armenian labels ask for more than the widest header row (about 1515px): its links stay behind the menu at every width. */
:root:lang(hy) .site-nav { display: none; }
:root:lang(hy) .menu-button { display: inline-grid; }
/* The short start word is wider than "Start". On a narrow phone the English row already fills the header,
   so the same row in another language would push the menu button past the screen. A slightly tighter
   gap and button padding keeps it inside; the 44px target height stays (Header navigation, sign in, phone menu). */
@container header (max-width: 24.5em) {
  :root:not(:lang(en)) .header-actions { gap: var(--space-1); }
  :root:not(:lang(en)) .header-actions .btn { padding-inline: var(--space-3); }
}

/* The longer Spanish and French short labels need the logo without its wordmark at 320px
   to keep every control inside the header (Header navigation, sign in, phone menu). */
@container header (max-width: 21.99em) {
  :root:not(:lang(en)) .brand .wordmark { display: none; }
  /* "Commencer" is the widest short start word: at 320px the row ends 3px past the screen unless the buttons' side padding gives way. */
  :root:not(:lang(en)) .header-actions .btn { padding-inline: var(--space-2); }
}

/* The demo entry stays beside Start on a phone, so the compact header gives the actions the wordmark's room
   and tighter padding while retaining 44px targets. The open language list uses the header's edge on a phone
   so the new action cannot push it past either edge (D1 Screens, landing entry; screen_specs.md 1 rule 9). */
@container header (max-width: 26.24em) {
  .brand .wordmark { display: none; }
  .site-header .wrap { gap: var(--space-1); }
  .header-actions { gap: var(--space-1); }
  .header-actions .btn.btn-sm { padding-inline: var(--space-2); }
  .header-actions .lang-menu .lang-switch { position: fixed; top: calc(var(--header-actual, var(--header-height)) + var(--space-1)); left: var(--space-4); right: auto; }
}

/* Sign-in dialog shown until the application is open */
dialog.sheet-dialog { width: min(440px, calc(100vw - 32px)); padding: var(--space-8) var(--space-6) var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--foreground); box-shadow: var(--shadow-float); }
dialog.sheet-dialog[open] { animation: pop 250ms var(--ease); }
dialog.sheet-dialog::backdrop { background: var(--overlay); }
.sheet-dialog h2 { font-size: 1.375rem; line-height: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.sheet-dialog p { margin-top: var(--space-3); color: var(--muted-foreground); }
.sheet-dialog .dialog-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.sheet-dialog .dialog-actions .btn { flex: 1 1 auto; }

.foot-nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.foot-nav a { display: inline-flex; align-items: center; min-height: var(--space-11); padding: 0 var(--space-2); border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.foot-nav a:hover { color: var(--foreground); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6);
  border: 0; border-radius: var(--radius-md);
  background: var(--primary); color: var(--primary-foreground);
  font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease, opacity 150ms ease;
}
.btn:hover { background: var(--primary-hover); }
.btn:active { transform: scale(0.98); }
/* A waitlist request in flight keeps the primary colour, dimmed, with the wait cursor. A plainly disabled
   button - the waitlist before its script runs - takes the disabled token (design system README, Borders
   and controls) and the normal cursor. */
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.btn:disabled:not([aria-busy="true"]) { background: var(--disabled); cursor: default; }
.btn-sm { min-height: var(--space-11); padding: 0 var(--space-4); font-size: 0.875rem; }

/* Waitlist form */
.waitlist-box { width: 100%; max-width: 480px; }
.waitlist { display: flex; flex-direction: column; gap: var(--space-2); }
@media (min-width: 480px) { .waitlist { flex-direction: row; } }
.waitlist input[type="email"] {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--space-4);
  border: 1px solid var(--input); border-radius: var(--radius-md);
  background: var(--card); color: var(--foreground);
  font: inherit;
  transition: border-color 150ms ease;
}
.waitlist input[type="email"]::placeholder { color: var(--muted-foreground); opacity: 1; }
/* Focus is the global 2 px ring with its 2 px offset, the only focus style (docs/design/enitire-design-system/
   README.md, Borders and controls). The invalid border is a state of its own and stays visible under it. */
.waitlist input[aria-invalid="true"] { border-color: var(--danger-text); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { min-height: 1.25rem; margin-top: var(--space-2); font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.form-status.error { color: var(--danger-text); font-weight: 600; }
/* The failure line's "Try again" (docs/features/LW1.md, Landing): a text control in the line's own colour, with the
   44 px hit area every control keeps. */
.form-retry {
  display: inline-flex; align-items: center; min-height: var(--space-11); padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer;
}
/* The bot check's widget sits under the form once a visitor focuses the field; empty, it takes no room. */
.bot-check:not(:empty) { margin-top: var(--space-2); }
.waitlist-box.done .bot-check { display: none; }
.form-done {
  display: none; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--success-subtle); color: var(--success-text); font-weight: 600; text-align: left;
}
.form-done .ic { font-size: 1.5rem; }
.form-done:focus { outline: none; }
.waitlist-box.done .waitlist, .waitlist-box.done .form-status { display: none; }
.waitlist-box.done .form-done { display: flex; animation: pop 400ms var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Reveal on scroll */
/* Hidden only once the script that reveals them has armed the page: a page whose script fails shows everything */
.reveal-armed .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal-armed .reveal.in { opacity: 1; transform: none; }

/* Hero: copy on the left, the live product scene on the right; on a phone the copy comes first, then the scene */
.hero { padding: clamp(32px, 5vw, 48px) 0 var(--space-8); }
.hero-grid { display: grid; gap: var(--space-10); align-items: center; }
/* V2.1 What and why: top alignment keeps the heading independent of the tallest carousel scene. */
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--space-12); align-items: start; } }
@media (min-width: 960px) and (max-height: 800px) { .hero { padding-top: var(--space-8); } }
.hero-copy { min-width: 0; }
.hero .display { font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
.hero .lead { max-width: 34rem; margin-top: var(--space-5); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); }
.hero .waitlist-box { margin-top: var(--space-6); }
.hero .fine-print { text-align: left; }
.hero .form-status { text-align: left; }

/* Hero carousel: eleven scenes, one per key feature (docs/features/LW2.md). The scenes lie in one grid cell, so
   the stage keeps the height of the tallest and a change of scene never moves the page; only the current one is
   visible, and the others are inert. Everything inside a scene is sized in em of .scene-art, which follows the
   width of its column, so the picture scales with it; below 560px the window and the phone stack (the container
   query below). Elements that belong to some steps of a scene carry data-on="1 2"; the script puts .is-on on
   those of the current step, and each stack (.stk) lays its variants in one grid cell, so a swap never moves
   anything. Each scene copies an app screen in the app's own tokens, which this file shares (tokens at the top). */
.scene-wrap { container-type: inline-size; min-width: 0; }
.sc-stage { display: grid; touch-action: pan-y; }
.sc-slide { grid-area: 1 / 1; display: grid; grid-template-rows: auto 1fr; gap: var(--space-4); min-width: 0; visibility: hidden; opacity: 0; transform: scale(0.985); transition: opacity 450ms var(--ease), transform 450ms var(--ease), visibility 0s linear 450ms; }
.sc-slide.is-current { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.sc-name { order: -1; display: grid; gap: 2px; min-width: 0; }
.sc-name b { font-size: 0.9375rem; font-weight: 700; }
.sc-name span { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }

.scene-art { align-self: center; font-size: min(1rem, 2.69cqw); display: grid; grid-template-columns: 24.5em 11em; gap: 1em; align-items: center; }
.scene-art.art-w { grid-template-columns: 36.5em; }
.scene-art.art-pw { grid-template-columns: 11em 24.5em; }
.stk { display: grid; }
.stk > * { grid-area: 1 / 1; }
[data-on] { opacity: 0; transform: translateY(0.4em); pointer-events: none; transition: opacity 450ms var(--ease), transform 450ms var(--ease); }
[data-on].is-on { opacity: 1; transform: none; }
/* without the script every variant would stack on top of the others: the still frame is written into the markup */
.scene-art .chip { padding: 0.2em 0.55em; border-radius: 0.4em; font-size: 0.8125em; line-height: 1.25; white-space: nowrap; }
.scene-art .chip .ic { font-size: 1.15em; }
.scene-art .caption { font-size: 0.75em; line-height: 1.3; }

.sc-win, .sc-phone { position: relative; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 1.1em; overflow: hidden; box-shadow: var(--shadow-float); }
.sc-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; padding: 1.1em 1.2em 0.7em; }
.sc-title { min-width: 0; font-size: 1.3em; line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; }
.sc-sub { flex: none; font-size: 0.8em; color: var(--muted-foreground); text-align: right; }
.sc-title > *, .sc-sub > * { align-self: baseline; }
.sc-title > * { white-space: nowrap; }
.sc-sub > * { justify-self: end; white-space: nowrap; }
.sc-rows { display: block; }
.sc-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; min-height: 3.9em; padding: 0.6em 1.2em; border-top: 1px solid var(--border); }
.sc-row.live { background: color-mix(in srgb, var(--primary-subtle) 35%, transparent); }
.sc-row .who { min-width: 0; line-height: 1.3; }
.sc-row .who b { display: block; font-size: 0.95em; font-weight: 700; }
.sc-row .who span { display: block; font-size: 0.8em; color: var(--muted-foreground); }
.sc-slot { justify-items: end; align-items: center; }
.sc-chips { display: flex; gap: 0.3em; }
.sc-chips .chip { white-space: nowrap; }
.sc-chips.is-on .chip + .chip { animation: sc-pop 500ms var(--ease) 600ms both; }
.sc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.2em; padding: 0 1em; border-radius: 0.6em; background: var(--primary); color: var(--primary-foreground); font-size: 0.8125em; font-weight: 700; white-space: nowrap; }
.sc-btn.sec { background: var(--secondary); color: var(--foreground); }
.sc-btn.off { background: var(--disabled); color: var(--card); }
.sc-btn-wide { width: 100%; min-height: 2.6em; font-size: 0.9em; }
.sc-slot .sc-btn.is-on, .sc-sheet.is-on .sc-btn, .sc-actions .sc-btn.is-on { animation: sc-press 700ms ease 1.3s both; }
@keyframes sc-pop { from { opacity: 0; transform: scale(0.7); } }
@keyframes sc-press { 40% { transform: scale(0.94); } }

.sc-dock { border-top: 1px solid var(--border); background: var(--secondary); }
.sc-sheet { display: grid; gap: 0.6em; padding: 0.8em 1.2em 1em; align-content: center; }
.sc-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25em; padding: 0.25em; border-radius: 0.6em; background: var(--card); border: 1px solid var(--border); }
.sc-seg span { display: flex; align-items: center; justify-content: center; gap: 0.3em; min-width: 0; padding: 0.35em 0; border-radius: 0.4em; font-size: 0.78em; font-weight: 600; color: var(--muted-foreground); white-space: nowrap; }
.sc-seg .on { background: var(--success-subtle); color: var(--success-text); }
.sc-charge { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; font-size: 0.85em; font-weight: 600; }
.sc-charge small { display: block; font-size: 0.85em; font-weight: 400; color: var(--muted-foreground); }
.sc-charge b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); align-content: stretch; }
.sc-totals > div { display: flex; flex-direction: column; justify-content: center; padding: 0.8em 1.2em; background: var(--secondary); min-width: 0; }
.sc-note { font-size: 0.78em; color: var(--muted-foreground); }
.sc-note > [data-on] { transform: none; }
.sc-num > strong { display: block; font-size: 1.35em; line-height: 1.5; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.sc-phone { border-radius: 1.6em; }
.sc-phone-head { display: flex; align-items: center; gap: 0.5em; padding: 1.1em 1em 0.8em; border-bottom: 1px solid var(--border); font-size: 0.9em; font-weight: 700; }
.sc-phone-head.stk { display: grid; }
.sc-phone-head.stk > * { display: flex; align-items: center; gap: 0.5em; min-width: 0; white-space: nowrap; }
.sc-phone-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sc-phone-head .ic { color: var(--primary); font-size: 1.15em; }
.sc-toast { position: absolute; left: 0.6em; right: 0.6em; top: 3.4em; z-index: 1; }
.sc-toast > * { display: flex; align-items: flex-start; gap: 0.5em; padding: 0.55em 0.7em; border-radius: 0.8em; background: var(--foreground); color: var(--background); font-size: 0.72em; line-height: 1.3; box-shadow: var(--shadow-float); }
.sc-toast b { display: block; font-weight: 700; }
.sc-toast .ic { margin-top: 0.1em; font-size: 1.3em; }
.sc-toast > [data-on] { transform: translateY(-0.8em); }
.sc-toast > [data-on].is-on { transform: none; }
.sc-phone-body { display: grid; gap: 0.8em; align-content: start; padding: 1em 1em 1.2em; }
.sc-phone-body .item { display: grid; gap: 0.15em; font-size: 0.9em; justify-items: start; }
.sc-phone-body .item > * { min-width: 0; }
.sc-phone-body .item.stk > * { display: grid; gap: 0.15em; justify-items: start; }
.sc-phone-body .item b { font-weight: 700; line-height: 1.3; }
.sc-phone-body .meta { font-size: 0.85em; color: var(--muted-foreground); }
.sc-phone-body hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--border); }
.sc-phone .sc-field { font-size: 0.8em; }
.sc-bal { justify-items: start; }
.sc-tabs { border-top: 1px solid var(--border); }
.sc-tabs > span { display: flex; justify-content: space-around; gap: 0.3em; padding: 0.6em 0.4em 0.75em; }
.sc-tabs i { font-style: normal; font-size: 0.6em; font-weight: 600; color: var(--muted-foreground); white-space: nowrap; }
.sc-tabs i:first-child { color: var(--primary); }

/* The parts the new scenes share: a page's body, its fields and buttons, lists, figures, a dialog and a toast */
.sc-body { display: grid; gap: 0.7em; align-content: start; min-width: 0; padding: 0 1.4em 1.3em; font-size: 0.85em; }
.sc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; }
.sc-body > .chip, .sc-kv .chip, .sc-phone-body > .chip { justify-self: start; }
.sc-quiet { color: var(--muted-foreground); font-size: 0.92em; }
.sc-big { font-size: 1.1em; font-weight: 700; }
.sc-section { font-size: 1.05em; font-weight: 700; }
.sc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7em 0.8em; align-content: start; padding: 0 1.4em 1.3em; font-size: 0.85em; }
.sc-body .sc-form { padding: 0; font-size: 1em; }
.sc-field { display: grid; gap: 0.3em; min-width: 0; }
.sc-field > span { font-size: 0.88em; font-weight: 600; }
.sc-group { grid-column: 1 / -1; margin-top: 0.2em; font-size: 0.88em; font-weight: 700; }
.sc-field > b { display: block; min-height: 2.3em; padding: 0.45em 0.7em; border: 1px solid var(--input); border-radius: 0.6em; background: var(--card); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-slide .sc-field > b.focus { outline: 2px solid var(--ring); outline-offset: 2px; }
.sc-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5em; }
.sc-actions.end { justify-content: flex-end; }
.sc-kv { display: grid; gap: 0.2em; }
.sc-kv > span:first-child { font-size: 0.92em; font-weight: 600; }
.sc-toggle { display: flex; align-items: center; gap: 0.6em; }
.sw { position: relative; flex: none; width: 2.2em; height: 1.25em; border-radius: 999px; background: var(--input); }
.sw::after { content: ""; position: absolute; top: 0.15em; left: 0.15em; width: 0.95em; height: 0.95em; border-radius: 50%; background: var(--card); }
.sw.on { background: var(--primary); }
.sw.on::after { left: 1.1em; }
.sc-perms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5em 1.4em; }
.sc-perms .sc-toggle { flex-direction: row-reverse; justify-content: space-between; }
.sc-box { display: grid; gap: 0.6em; padding: 0.8em 0.9em; border: 1px solid var(--border); border-radius: 0.8em; }
.sc-list { display: grid; align-content: start; padding: 0 1.4em 1.3em; font-size: 0.85em; }
.sc-li { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0.6em 0; border-top: 1px solid var(--border); }
.sc-li > span:first-child { display: grid; min-width: 0; }
.sc-li small { font-size: 0.9em; color: var(--muted-foreground); }
.sc-li.flat { padding: 0; border: 0; }
.sc-li.live { margin: 0 -1.4em; padding: 0.6em 1.4em; background: color-mix(in srgb, var(--primary-subtle) 35%, transparent); }
.sc-list .sc-quiet { padding-top: 0.6em; border-top: 1px solid var(--border); }
.sc-card { display: grid; gap: 0.3em; padding: 0.7em 0.8em; border: 1px solid var(--border); border-radius: 0.8em; }
.sc-ok { display: flex; align-items: flex-start; gap: 0.45em; color: var(--success-text); font-weight: 600; }
.sc-ok .ic { margin-top: 0.15em; }
.sc-quote { padding-left: 0.7em; border-left: 2px solid var(--border); }
.sc-radio { display: flex; align-items: center; gap: 0.55em; padding: 0.5em 0.7em; border: 1px solid var(--border); border-radius: 0.7em; }
.sc-radio i { flex: none; width: 1em; height: 1em; border: 1px solid var(--input); border-radius: 50%; }
.sc-radio.on i { border: 0.3em solid var(--primary); }
.sc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4em; }
.sc-pop { position: absolute; left: 50%; bottom: 0.9em; z-index: 2; transform: translateX(-50%); pointer-events: none; }
.sc-pop > * { display: flex; align-items: center; gap: 0.45em; padding: 0.55em 0.9em; border-radius: 0.7em; background: var(--foreground); color: var(--background); font-size: 0.78em; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-float); }
.sc-veil { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 1em; background: var(--overlay); }
.sc-modal { display: grid; gap: 0.4em; width: min(100%, 19em); padding: 1em 1.1em; border-radius: 1em; background: var(--card); box-shadow: var(--shadow-float); font-size: 0.8em; }
.sc-modal-title { font-size: 1.1em; }
.sc-parts { display: grid; gap: 0.15em; padding: 0.45em 0.7em; border: 1px solid var(--border); border-radius: 0.6em; font-variant-numeric: tabular-nums; }

/* 2. F-12's week: a day, its free times as buttons with their price and slot mark */
.sc-week { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.sc-day { display: grid; gap: 0.35em; }
.sc-times { display: flex; flex-wrap: wrap; gap: 0.4em; }
.sc-time { padding: 0.4em 0.7em; border-radius: 0.6em; background: var(--secondary); font-size: 0.92em; font-weight: 600; white-space: nowrap; transition: box-shadow 300ms ease, background-color 300ms ease; }
.sc-slide[data-step="2"] .sc-time.pick, .sc-slide[data-step="3"] .sc-time.pick { background: var(--primary-subtle); box-shadow: 0 0 0 2px var(--ring); }

/* 1. T-03's week: day headings, an hour axis, lesson tiles placed by grid lines */
.cal { display: grid; grid-template-columns: 3.4em repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(8, 3em); margin: 0 1.6em 1.6em; font-size: 0.72em; }
/* Z5.5 T10; screen_specs §1: translated headings and counts must not widen a day's inner grid. */
.cal-d { grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; padding: 0 0.35em 0.5em; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.cal-d b { font-size: 1.05em; }
.cal-d > span { color: var(--muted-foreground); }
.cal-ground { grid-column: 2 / -1; grid-row: 2 / -1; border: 1px solid var(--border); border-radius: 0.6em; background: repeating-linear-gradient(to bottom, transparent 0 calc(3em - 1px), var(--border) calc(3em - 1px) 3em); }
.cal-line { grid-row: 2 / -1; border-left: 1px solid var(--border); }
.cal-h { grid-column: 1; align-self: start; padding: 0.2em 0.45em 0 0; color: var(--muted-foreground); text-align: right; white-space: nowrap; }
.cal-t { z-index: 1; min-width: 0; margin: 0.15em; padding: 0.2em 0.35em; overflow: hidden; border: 1px solid var(--primary); border-radius: 0.45em; background: var(--primary-subtle); font-weight: 700; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.cal-t small { display: block; font-size: 0.9em; font-weight: 600; color: var(--muted-foreground); }
.cal-t.moved, .cal-t.new { box-shadow: 0 0 0 2px var(--ring); }
.cal-free { z-index: 1; display: grid; place-items: center; margin: 0.15em; border: 1.5px dashed var(--primary); border-radius: 0.45em; color: var(--primary); font-weight: 700; }

/* 3. T-03's day headings with their slot marks */
.sc-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5em; }
.sc-dayhead { display: grid; gap: 0.1em; min-width: 0; padding: 0.6em 0.7em; border: 1px solid var(--border); border-radius: 0.7em; font-size: 0.92em; }
.sc-dayhead > span { color: var(--muted-foreground); font-size: 0.92em; }
.sc-dayhead > span:last-child { color: var(--foreground); font-weight: 700; }
.sc-dayhead.hot > span:last-child { color: var(--warning-text); }
.sc-dayhead.cool > span:last-child { color: var(--info-text); }

/* 9. P-01's band and T-30's filters */
.sc-page-band { display: grid; gap: 0.5em; padding: 1.2em 1em 1em; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--primary-subtle) 55%, var(--card)); }
.sc-page-band b { font-size: 1.15em; font-weight: 800; letter-spacing: -0.01em; }
.sc-tags { display: flex; flex-wrap: wrap; gap: 0.3em; }
.sc-tags i, .sc-filters i { font-style: normal; font-weight: 600; border-radius: 0.5em; background: var(--secondary); }
.sc-tags i { padding: 0.25em 0.55em; font-size: 0.68em; }
.sc-filters { display: flex; flex-wrap: wrap; gap: 0.35em; padding: 0 1.2em 0.8em; }
.sc-filters i { padding: 0.4em 0.7em; font-size: 0.72em; }
.sc-filters i.on { background: var(--primary); color: var(--primary-foreground); }
.sc-filters i.stk { display: inline-grid; }

/* 10. T-24's period control, figures, attendance bars and forecast */
.sc-seg-row { padding: 0 1.2em 0.8em; }
.sc-period { display: inline-flex; gap: 0.2em; padding: 0.2em; border: 1px solid var(--input); border-radius: 0.6em; font-size: 0.72em; }
.sc-period i { padding: 0.35em 0.65em; border-radius: 0.45em; font-style: normal; font-weight: 600; color: var(--muted-foreground); white-space: nowrap; }
.sc-period i.on { background: var(--primary-subtle); color: var(--primary); }
.sc-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5em; }
.sc-figs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-fig { display: grid; gap: 0.1em; align-content: start; min-width: 0; padding: 0.6em 0.75em; border: 1px solid var(--border); border-radius: 0.8em; }
.sc-fig > span { font-size: 0.88em; color: var(--muted-foreground); }
.sc-fig b { font-size: 1.35em; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-fig small { font-size: 0.8em; color: var(--muted-foreground); }
.sc-month { font-size: 0.92em; font-weight: 700; }
.sc-bars { display: grid; gap: 0.5em; }
.sc-bars > span { display: grid; gap: 0.3em; }
.sc-bars > span::after { content: ""; height: 0.4em; border-radius: 999px; background: linear-gradient(var(--primary), var(--primary)) 0 0 / var(--w) 100% no-repeat, var(--secondary); }
.sc-body.is-on .sc-bars > span::after { animation: sc-grow 900ms var(--ease) 200ms both; }
@keyframes sc-grow { from { background-size: 0% 100%, 100% 100%; } }

/* 11. The AI manager: a sketch, marked "Coming soon", in the landing's own card */
.sc-idea { display: flex; align-items: flex-start; gap: 0.6em; padding: 0.65em 0.8em; border-radius: 0.8em; background: var(--secondary); }
.sc-idea .ic { margin-top: 0.15em; font-size: 1.2em; color: var(--primary); }
.sc-idea b { display: block; }

/* The controls: previous, one dot per scene (24 px targets, WCAG 2.5.8), next, and the pause */
.scene-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); }
.sc-dots { display: flex; flex-wrap: wrap; justify-content: center; flex: 1 1 auto; min-width: 0; }
.sc-dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; }
.sc-dot::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--input); transition: background-color 300ms ease, width 300ms var(--ease); }
.sc-dot[aria-current="true"]::before { width: 18px; background: var(--primary); }
/* A finger gets a 44 px tall target (screen_specs.md 1 rule 9): the dots share a row of their own, each as wide as
   the row allows up to 44 px, so the hit boxes touch and a tap anywhere on the row lands on a dot; the visible dot
   stays 8 px */
@media (pointer: coarse) {
  .sc-dots { flex-wrap: nowrap; flex-basis: 100%; }
  .sc-dot { flex: 1 1 0; max-width: 44px; height: 44px; }
}
.sc-arrow, .scene-pause { min-height: var(--space-11); border: 1px solid var(--border); border-radius: var(--radius-md); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.sc-arrow { display: grid; place-items: center; width: var(--space-11); padding: 0; font-size: 1.25rem; }
.scene-pause { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); font-size: 0.875rem; font-weight: 600; }
.sc-arrow:hover, .scene-pause:hover { border-color: var(--input); }
.scene-pause .ic { font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .scene-pause { display: none; } }

/* Under reduced motion a swap is instant and each scene shows its still frame */
@media (prefers-reduced-motion: reduce) { .scene-art [data-on], .sc-slide { transform: none; } }
/* The demo's own pause stops its CSS motion as well as the loop, as the page-wide pause does */
.scene[data-paused] *, .scene[data-paused] *::before, .scene[data-paused] *::after { animation: none !important; transition: none !important; }

/* A phone column is too narrow for the window and the phone side by side at a readable size, and stacking them
   made the stage as tall as the tallest pair. So on a phone a scene shows one device at a time in one grid cell -
   the one its step is about (data-front, set by the script; the still frame's is in the markup) - and every
   device has the same height: every scene is as tall as every other, nothing below the stage moves when the
   scene changes, and there is no empty band above the controls. The window takes the full width at about 14 px
   text, the week shows its five working days, and the dots take a row of their own above the buttons. */
@container (max-width: 559px) {
  .scene-art, .scene-art.art-w, .scene-art.art-pw { align-self: start; font-size: min(1rem, 4.3cqw); grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .scene-art > * { grid-area: 1 / 1; height: 27em; }
  .scene-art > [data-front] { transition: opacity 450ms var(--ease), visibility 0s linear 450ms; }
  .scene-art > [data-front]:not(.is-front) { opacity: 0; visibility: hidden; }
  .scene-art > [data-front].is-front { transition-delay: 0s; }
  .sc-name { min-height: 4rem; }
  .sc-win { width: 100%; }
  .sc-phone { width: 15em; }
  .sc-row .who span, .sc-sub { font-size: 0.88em; }
  .cal { grid-template-columns: 3.4em repeat(5, minmax(0, 1fr)); margin: 0 1.2em 1.2em; }
  .cal .we { display: none; }
  .sc-body, .sc-form, .sc-list { padding-left: 1.2em; padding-right: 1.2em; }
  .sc-li.live { margin: 0 -1.2em; padding-left: 1.2em; padding-right: 1.2em; }
  .sc-dots { order: -1; flex-basis: 100%; }
}

/* Feature strip under the hero */
.overview { padding: 0 0 var(--section); }
.overview-grid { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
.fcard { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); transition: transform 200ms var(--ease), border-color 200ms ease; }
.fcard:hover { transform: translateY(-2px); border-color: var(--primary); }
.fcard .badge { width: var(--space-11); height: var(--space-11); flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--primary-subtle); color: var(--primary); font-size: 1.375rem; }
.fcard h3 { font-size: 1rem; line-height: 1.5rem; font-weight: 700; }
.fcard p { margin-top: 2px; font-size: 0.9375rem; line-height: 1.4rem; color: var(--muted-foreground); }

/* Mockups */
.mock { min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.mock.float { box-shadow: var(--shadow-float); }
.mock-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-3); padding: var(--space-5) var(--space-5) var(--space-3); }
.mock-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.mock-sub { font-size: 0.875rem; color: var(--muted-foreground); }
@media (min-width: 768px) { .mock-bar { padding: var(--space-6) var(--space-8) var(--space-4); } }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap;
  transition: opacity 150ms ease, transform 150ms ease, background-color 150ms ease, color 150ms ease;
}
.chip .ic { font-size: 1rem; }
.chip-info { background: var(--info-subtle); color: var(--info-text); }
.chip-success { background: var(--success-subtle); color: var(--success-text); }
.chip-warning { background: var(--warning-subtle); color: var(--warning-text); }
.chip-danger { background: var(--danger-subtle); color: var(--danger-text); }

.rows > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); }
@media (min-width: 768px) { .rows > li { padding: var(--space-3) var(--space-8); gap: var(--space-4); } }
.rows .when { width: 3rem; flex: none; font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
.rows .who { flex: 1; min-width: 0; }
.rows .who b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .who span { display: block; font-size: 0.875rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 519px) {
  /* A tighter gap leaves the student's line ("Maths · 60 min") room for one line at 390 px */
  .rows > li { gap: var(--space-2); }
  .rows .who b, .rows .who span { white-space: normal; overflow: visible; }
  .rows .chip { white-space: normal; }
}

/* Two tiles side by side only where each keeps an amount such as "280.00 EUR" on one line at the normal text
   size; narrower, they stack. At 200 % text an amount may still wrap rather than push the page sideways. */
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1px; border-top: 1px solid var(--border); background: var(--border); }
.totals > div { min-width: 0; padding: var(--space-4) var(--space-5); background: var(--secondary); }
@media (min-width: 768px) { .totals > div { padding: var(--space-5) var(--space-8); } }
.totals strong { display: block; margin-top: 2px; font-size: 1.75rem; line-height: 2.125rem; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }


/* Problem */
.problem { overflow-x: clip; }
.split { display: grid; gap: var(--space-12); align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); } .split.flip > :first-child { order: 2; } }
.copy .headline { margin-top: var(--space-3); }
.copy .lead { margin-top: var(--space-5); }

/* Mosaic: the squares of the brand image, drawn in code */
.mosaic { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; }

/* Problem: five scattered places come together in one frame */
.frame-stage { --p: 1; --k: 1; position: relative; padding: var(--space-6); }
@media (max-width: 899px) { .frame-stage { --k: 0.4; padding: var(--space-5); } }
.corner {
  position: absolute; width: var(--space-11); height: var(--space-11); border: 5px solid var(--primary); opacity: var(--p);
  transform: translate(calc(var(--cx) * (1 - var(--p))), calc(var(--cy) * (1 - var(--p))));
}
.corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; --cx: -28px; --cy: -28px; }
.corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; --cx: 28px; --cy: -28px; }
.corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; --cx: -28px; --cy: 28px; }
.corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; --cx: 28px; --cy: 28px; }
.places { display: grid; gap: var(--space-2); }
.places > li {
  position: relative; display: flex; align-items: center; min-width: 0; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card);
  transform: translate(calc(var(--dx) * var(--k) * (1 - var(--p))), calc(var(--dy) * var(--k) * (1 - var(--p)))) rotate(calc(var(--r) * (1 - var(--p))));
}
.places .tile { width: var(--space-11); height: var(--space-11); flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--secondary); color: var(--muted-foreground); font-size: 1.25rem; }
/* the text block may shrink below its longest word, so the break the page already allows happens inside the card */
.places > li > div { min-width: 0; }
.places b { display: block; font-weight: 700; }
.places span { color: var(--muted-foreground); }
/* The tiles float only while they are scattered, so the shadow token fades out as they settle into the list */
.places > li::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: var(--shadow-float); opacity: calc(1 - var(--p));
}

/* Staggered entrance inside mockups */
.reveal-armed .mock.reveal:not(.in) .block, .reveal-armed .mock.reveal:not(.in) .rows > li { opacity: 0; }
.mock.reveal.in .block { animation: block-in 520ms var(--ease) both; animation-delay: calc(var(--n, 0) * 45ms + 250ms); }
.mock.reveal.in .rows > li { animation: row-in 520ms var(--ease) both; animation-delay: calc(var(--n, 0) * 110ms + 250ms); }
@keyframes block-in { from { opacity: 0; transform: scale(0.82); } }
@keyframes row-in { from { opacity: 0; transform: translateX(14px); } }

/* Tutor view / family view */
.privacy { width: 100%; min-width: 0; max-width: 460px; margin: 0 auto; }
.view-switch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; margin: var(--space-4) var(--space-4) 0; padding: 4px; border-radius: var(--radius-md); background: var(--secondary); }
.view-switch button {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 0; min-height: var(--space-11);
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted-foreground);
  font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: background-color 200ms ease, color 200ms ease;
}
.view-switch button[aria-pressed="true"] { background: var(--card); color: var(--foreground); outline: 1px solid var(--border); }
.view-switch button[aria-pressed="true"] .ic { color: var(--primary); }
.privacy .rows .fact { flex: 1; font-weight: 600; }
.privacy .note { position: relative; margin-top: var(--space-3); margin-bottom: 0; }
.privacy .note:last-of-type { margin-bottom: var(--space-4); }
.secret-body { position: relative; margin-top: var(--space-1); }
.secret-body p { margin: 0; transition: filter 350ms ease; }
.pixels { position: absolute; inset: -2px; display: grid; grid-template-columns: repeat(var(--cols, 12), 1fr); grid-auto-rows: 1fr; pointer-events: none; }
.pixels i { background: rgb(var(--mosaic)); opacity: 0; transform: scale(0.4); transition: opacity 350ms ease, transform 350ms var(--ease); transition-delay: var(--d, 0ms); }
.pixels i:nth-child(3n) { background: var(--muted-foreground); }
.pixels i:nth-child(5n) { background: var(--primary); }
.privacy[data-view="family"] #secret-text { filter: blur(7px); user-select: none; }
.privacy[data-view="family"] .pixels i { opacity: var(--o, 0.6); transform: none; }
.privacy .tag .when-family, .privacy[data-view="family"] .tag .when-tutor { display: none; }
.privacy[data-view="family"] .tag .when-family { display: inline; }
.view-caption { padding: 0 var(--space-5) var(--space-5); font-size: 0.875rem; color: var(--muted-foreground); min-height: 5.25rem; }
@media (min-width: 768px) { .view-caption { padding: 0 var(--space-8) var(--space-6); } .view-switch { margin: var(--space-5) var(--space-6) 0; } }

/* FAQ */
.faq { max-width: 760px; margin: clamp(40px, 6vw, 72px) auto 0; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; padding: var(--space-4) 0; font-size: 1.125rem; line-height: 1.625rem; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { font-size: 1.25rem; color: var(--primary); transition: transform 200ms var(--ease); }
.faq summary:hover { color: var(--label); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq .answer { padding: 0 var(--space-8) var(--space-5) 0; color: var(--muted-foreground); max-width: 62ch; animation: pop 300ms var(--ease); }

/* Closing brand lockup */
.brand-xl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-8); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; }
.brand-xl b { color: var(--primary); font-weight: inherit; }
.brand-xl img { width: clamp(52px, 7vw, 72px); height: auto; }

/* Conversations you no longer have to start */
.talks { display: grid; gap: var(--space-6); margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 900px) { .talks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.talk { display: flex; flex-direction: column; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.talk-stage { display: grid; gap: var(--space-3); min-height: 132px; align-content: start; margin-bottom: var(--space-6); }
.bubble { justify-self: end; max-width: 92%; padding: var(--space-3) var(--space-4); border-radius: 18px 18px 4px 18px; background: var(--secondary); color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.375rem; }
.instead { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--primary-subtle); color: var(--foreground); font-size: 0.875rem; font-weight: 700; }
.instead .ic { color: var(--primary); font-size: 1.125rem; }
.talk h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.talk p { margin-top: var(--space-2); color: var(--muted-foreground); }
.reveal-armed .talk.reveal:not(.in) .bubble, .reveal-armed .talk.reveal:not(.in) .instead { opacity: 0; }
/* The bubble's resting state is struck through, which is what a page without the script shows; the script's
   reveal starts it plain and the fade strikes it through. */
.bubble { text-decoration: line-through; }
.reveal-armed .talk.reveal .bubble { text-decoration: none; }
.talk.reveal.in .bubble { animation: bubble-in 500ms var(--ease) 300ms both, bubble-fade 500ms ease 2100ms forwards; }
.talk.reveal.in .instead { animation: row-in 500ms var(--ease) 2300ms both; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; } }
/* The message is crossed out, not faded: it is the setup for the heading and has to stay readable */
@keyframes bubble-fade { to { text-decoration: line-through; } }

/* Self-booking demo */
.book-feature { margin-top: clamp(40px, 6vw, 72px); }
#book-demo { container: book / inline-size; }
.slots > li { --slot-gap: var(--space-3); display: flex; align-items: center; gap: var(--slot-gap); min-height: 64px; padding: var(--space-2) var(--space-5); border-top: 1px solid var(--border); transition: background-color 250ms ease; }
@media (min-width: 768px) { .slots > li { --slot-gap: var(--space-4); padding: var(--space-2) var(--space-8); } }
@media (max-width: 519px), (min-width: 900px) and (max-width: 1150px) { .slots > li.booked { flex-wrap: wrap; padding-bottom: var(--space-3); } .slots > li.booked .info { flex: 1 1 calc(100% - 3rem - var(--slot-gap) - 1px); } .slots > li.booked .chip { margin-left: calc(3rem + var(--slot-gap)); } }
.slots time { width: 3rem; flex: none; font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.slots .info { flex: 1; min-width: 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.slots .info b { display: block; color: var(--foreground); font-size: 0.9375rem; font-weight: 700; }
.slots li.closed time, .slots li.closed .info b { color: var(--muted-foreground); font-weight: 600; }
.slots li.chosen { flex-wrap: wrap; padding-top: var(--space-3); padding-bottom: var(--space-3); background: color-mix(in srgb, var(--warning-subtle) 60%, transparent); }
.slots li.chosen .info { flex: 1 1 calc(100% - 3rem - var(--slot-gap) - 1px); }
.slots li.chosen .choice-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); flex-basis: 100%; padding-left: calc(3rem + var(--slot-gap)); }
.slots li.booked { background: color-mix(in srgb, var(--primary-subtle) 35%, transparent); }
.slot-book { flex: none; min-height: var(--space-11); padding: 0 var(--space-4); border: 1px solid var(--primary); border-radius: var(--radius-md); background: transparent; color: var(--label); font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.slot-book:hover { background: var(--primary); color: var(--primary-foreground); }
.slot-book.solid { background: var(--primary); color: var(--primary-foreground); }
.slot-book.solid:hover { background: var(--primary-hover); }
.slot-book.quiet { border-color: var(--border); color: var(--foreground); }
.slot-book.quiet:hover { background: var(--secondary); color: var(--foreground); }
/* Too narrow for the time, the text and the action side by side - a 320 px phone, or a larger one at 200 %
   text: the time keeps the first line with the action or chip at its end, the text takes the full width
   under them (screen_specs 1.1: nothing scrolls sideways). Declared after the rules it overrides. */
@container book (max-width: 20em) {
  .slots > li, .slots > li.booked { flex-wrap: wrap; }
  .slots > li .info, .slots > li.booked .info, .slots li.chosen .info { order: 1; flex: 1 1 100%; }
  .slots > li > .slot-book, .slots > li.booked .chip { margin-left: auto; }
  .slots li.chosen .choice-actions { order: 2; padding-left: 0; }
}
.book-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 60px; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); background: var(--secondary); font-size: 0.875rem; color: var(--muted-foreground); }
@media (min-width: 768px) { .book-foot { padding: var(--space-3) var(--space-8); } }
.book-foot b { color: var(--foreground); }
.book-reset { min-height: var(--space-11); padding: 0 var(--space-2); border: 0; background: transparent; color: var(--label); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Prices that follow the load of the day */
.slot-feature { margin-top: clamp(40px, 6vw, 72px); }
/* Five days in a row while each keeps room for its price; at 320 px with 200 % text they wrap onto more rows */
.days { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 2.5em), 1fr)); gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
@media (min-width: 768px) { .days { gap: var(--space-3); padding: 0 var(--space-6) var(--space-5); } }
.dayload { display: grid; gap: var(--space-2); justify-items: center; padding: var(--space-3) var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-md); background: transparent; color: var(--foreground); font: inherit; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.dayload:hover { border-color: var(--input); }
.dayload[aria-pressed="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary-subtle) 45%, transparent); }
.dayload .stack { display: grid; grid-template-columns: repeat(2, 12px); gap: 3px; direction: rtl; transform: rotate(180deg); }
.dayload .stack i { width: 12px; height: 12px; border-radius: 3px; background: var(--border); transition: background-color 250ms ease, transform 250ms var(--ease); }
.dayload .stack i.on { background: var(--primary); }
.dayload .stack i.hot { background: var(--warning-text); }
.dayload b { font-size: 0.8125rem; font-weight: 700; }
.dayload .price { font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
.slot-out { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); background: var(--secondary); }
@media (min-width: 768px) { .slot-out { padding: var(--space-5) var(--space-8); } }
.slot-out strong { display: block; font-size: 2rem; line-height: 2.375rem; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rule { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-full); font-size: 0.875rem; font-weight: 700; background: var(--neutral-subtle); color: var(--foreground); transition: background-color 250ms ease, color 250ms ease; }
.rule[data-tone="low"] { background: var(--success-subtle); color: var(--success-text); }
.rule[data-tone="high"], .rule[data-tone="max"] { background: var(--warning-subtle); color: var(--warning-text); }
.slot-range { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); font-size: 0.875rem; font-weight: 600; }
@media (min-width: 768px) { .slot-range { padding: var(--space-5) var(--space-8) var(--space-6); } }
.slot-range input { width: 100%; height: var(--space-11); margin: 0; accent-color: var(--primary); cursor: pointer; }
.slot-range .ends { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); }

/* After the first version */
.later { display: grid; gap: var(--space-3); margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 640px) { .later { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .later { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } }
.later li { display: flex; gap: var(--space-3); padding: var(--space-4); border: 1px dashed var(--input); border-radius: var(--radius-md); background: color-mix(in srgb, var(--card) 70%, transparent); }
.later .ic { flex: none; margin-top: 3px; color: var(--muted-foreground); font-size: 1.125rem; }
.later b { display: block; font-weight: 700; }
.later span { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.later-note { margin-top: var(--space-6); text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }

.free-pill { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); padding: 6px var(--space-3); border-radius: var(--radius-full); background: var(--primary-subtle); color: var(--foreground); font-size: 0.875rem; font-weight: 700; }
.free-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.fine-print { margin-top: var(--space-1); font-size: 0.75rem; line-height: 1.125rem; color: var(--muted-foreground); text-align: center; }
.waitlist-box.done .fine-print { display: none; }

/* Z11 §3: the home's AI assistants excerpt and the public assistant pages. Cards, badges and the labelled example use the same
   tokens as the pricing page, so both themes follow the palette above. */
.assistants-excerpt .wrap { max-width: 46rem; }
.assistants-excerpt .lead { margin-top: var(--space-5); color: var(--muted-foreground); }
/* Z11 §3; screen_specs §1: the translated example link remains readable within a narrow page. */
.assistants-excerpt .btn { margin-top: var(--space-6); max-width: 100%; white-space: normal; text-align: center; }
.assistant-example { margin-top: var(--space-8); padding: var(--space-5); border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--card); }
.assistant-example h3 { font-size: 1.125rem; line-height: 1.625rem; font-weight: 700; }
.assistant-example p { margin-top: var(--space-3); line-height: 1.6; overflow-wrap: anywhere; }
.assistant-example b { display: block; font-size: 0.8125rem; line-height: 1.25rem; font-weight: 700; color: var(--primary); }
.assistant-note { font-size: 0.875rem; color: var(--muted-foreground); }
.assistant-page { max-width: 64rem; }
.assistant-back { display: inline-flex; align-items: center; min-height: var(--space-11); color: var(--primary); font-weight: 700; text-underline-offset: 3px; }
.assistant-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.assistant-badge { display: inline-block; padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.8125rem; line-height: 1.25rem; font-weight: 700; color: var(--muted-foreground); }
.assistant-promise { font-size: 1.125rem; }
.assistant-columns { display: grid; gap: var(--space-6); margin-block: var(--space-6); align-items: start; }
@media (min-width: 1024px) { .assistant-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }
.assistant-benefits { list-style: disc; padding-left: var(--space-6); line-height: 1.8; }
.assistant-grid { display: grid; gap: var(--space-4); list-style: none; padding: 0; }
@media (min-width: 640px) { .assistant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .assistant-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.assistant-card { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.assistant-card p { margin: 0; color: var(--muted-foreground); }
.assistant-link { margin-top: auto; color: var(--primary); font-weight: 700; text-underline-offset: 3px; }
.assistant-cta { margin-block: var(--space-8); }
.talks-more { margin-top: var(--space-8); text-align: center; color: var(--muted-foreground); }
.talks-more a { color: var(--label); font-weight: 700; text-underline-offset: 3px; }

/* Trust */
.trust { display: grid; gap: var(--space-8) var(--space-10); margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 640px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trust li { display: flex; gap: var(--space-4); }
.trust .badge { width: var(--space-11); height: var(--space-11); flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--border); color: var(--primary); font-size: 1.25rem; }
.trust h3 { font-size: 1.125rem; line-height: 1.625rem; font-weight: 700; }
.trust p { margin-top: var(--space-1); color: var(--muted-foreground); }

/* Features */
.band { background: color-mix(in srgb, var(--secondary) 72%, transparent); }
.section-head { max-width: 46rem; margin: 0 auto; text-align: center; }
.section-head .headline { margin-top: var(--space-3); }
.section-head .lead { margin-top: var(--space-5); }
.features { display: grid; gap: clamp(72px, 10vw, 128px); margin-top: clamp(56px, 8vw, 104px); }
.checks { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.checks li { display: flex; gap: var(--space-3); align-items: flex-start; }
.checks .ic { margin-top: 4px; color: var(--primary); font-size: 1rem; }
.feature-title { font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; margin-top: var(--space-3); text-wrap: balance; }
.feature-text { margin-top: var(--space-4); color: var(--muted-foreground); font-size: 1.125rem; line-height: 1.75rem; }

/* Week mockup: the timeline is sized in em against this font-size, so the picture scales with its text */
.week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); padding: 0 var(--space-4) var(--space-5); font-size: 0.75rem; }
@media (min-width: 768px) { .week { padding: 0 var(--space-6) var(--space-6); gap: var(--space-3); } }
.day { display: grid; gap: var(--space-2); align-content: start; }
.day > span { text-align: center; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.slot { position: relative; height: 20em; }
.block {
  position: absolute; left: 0; right: 0; top: var(--t); height: var(--h);
  padding: 0.5em 0.667em; border-radius: var(--radius-sm);
  background: var(--primary-subtle); color: var(--foreground);
  border-left: 3px solid var(--primary);
  font-size: inherit; line-height: 1.333; font-weight: 700; overflow: hidden;
  transition: transform 150ms ease;
}
.block:hover { transform: scale(1.03); }
.block small { display: none; font-size: 0.917em; font-weight: 600; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
@media (min-width: 520px) { .block small { display: block; } }
.block .ic { position: absolute; right: 0.5em; top: 0.583em; font-size: 1em; color: var(--primary); }
.block i { font-style: normal; }
@media (max-width: 519px) {
  .block { padding: 0.5em 0.333em 0.5em 0.5em; }
  .block i { display: none; }
  .block .ic { top: auto; bottom: 0.5em; right: 0.417em; }
}
.block.off { background: var(--neutral-subtle); border-left-color: var(--neutral-text); color: var(--neutral-text); }
.block.off small { text-decoration: line-through; color: inherit; }
.block.off .ic { color: inherit; }
.block.off .sr-like { display: none; font-size: 0.917em; font-weight: 600; }
@media (min-width: 520px) { .block.off { --h: 5.5em !important; } .block.off .sr-like { display: block; } }

/* Close lesson mockup */
.sheet { padding: var(--space-5); display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .sheet { padding: var(--space-8); } }
#close-demo .sheet { padding-top: 0; }
.sheet .label { font-size: 0.875rem; font-weight: 600; margin-bottom: var(--space-2); }
.segmented { --pos: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: var(--radius-md); background: var(--secondary); }
.segmented::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 16px) / 3); border-radius: var(--radius-sm); background: var(--card); outline: 1px solid var(--border); transform: translateX(calc(var(--pos) * (100% + 4px))); transition: transform 320ms var(--ease); }
.segmented button { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--space-11); padding: 0 var(--space-1); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted-foreground); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: color 200ms ease; }
.segmented button[aria-pressed="true"] { color: var(--foreground); }
@media (max-width: 399px) { .segmented button .ic { display: none; } }
.segmented button[aria-pressed="true"][data-state="present"] .ic { color: var(--success-text); }
.segmented button[aria-pressed="true"][data-state="late"] .ic { color: var(--warning-text); }
.segmented button[aria-pressed="true"][data-state="noshow"] .ic { color: var(--danger-text); }
.close-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: 28px; margin-top: var(--space-3); font-size: 0.875rem; color: var(--muted-foreground); }
.preview .why { display: block; font-size: 0.8125rem; line-height: 1.25rem; color: var(--muted-foreground); }
.fade-swap { transition: opacity 160ms ease; }
.fade-swap.swap { opacity: 0; }
.preview { border: 1px solid var(--border); border-radius: var(--radius-md); }
.preview div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.preview div + div { border-top: 1px solid var(--border); }
.preview .total { font-weight: 800; }
.fake-btn { display: flex; align-items: center; justify-content: center; min-height: var(--space-11); border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); font-weight: 700; cursor: default; }

/* Private note */
.note { margin: var(--space-4) var(--space-5) var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--secondary); }
@media (min-width: 768px) { .note { margin: var(--space-5) var(--space-8) var(--space-6); } }
.note .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; color: var(--muted-foreground); }
.note p { margin-top: var(--space-1); font-size: 0.875rem; line-height: 1.25rem; }

/* Bento */
.bento { display: grid; gap: var(--space-4); margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.tile-card { padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); transition: transform 200ms var(--ease), border-color 200ms ease; }
.tile-card:hover { transform: translateY(-3px); border-color: var(--primary); }
.tile-card .badge { width: var(--space-11); height: var(--space-11); display: grid; place-items: center; border-radius: var(--radius-md); background: var(--primary-subtle); color: var(--primary); font-size: 1.375rem; }
.tile-card h3 { margin-top: var(--space-5); font-size: 1.125rem; line-height: 1.625rem; font-weight: 700; }
.tile-card p { margin-top: var(--space-2); color: var(--muted-foreground); }
.plain { margin-top: var(--space-6); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); color: var(--muted-foreground); text-align: center; text-wrap: pretty; }
.plain b { color: var(--foreground); }

/* Families */
.people { display: grid; gap: var(--space-8); margin-top: var(--space-10); }
.people li { display: flex; gap: var(--space-4); }
.people .badge { width: var(--space-11); height: var(--space-11); flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--border); color: var(--primary); font-size: 1.25rem; }
.people h3 { font-size: 1.125rem; line-height: 1.625rem; font-weight: 700; }
.people p { margin-top: var(--space-1); color: var(--muted-foreground); }

/* Steps */
.steps { display: grid; gap: var(--space-8); margin-top: clamp(40px, 6vw, 72px); counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10); } }
.steps li { counter-increment: step; padding-top: var(--space-5); border-top: 2px solid var(--border); position: relative; }
.steps li::after { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: var(--primary); transition: width 900ms var(--ease); transition-delay: calc(var(--i, 0) * 200ms + 200ms); }
.steps li.in::after, html:not(.reveal-armed) .steps li::after { width: 100%; }
.steps li::before { content: counter(step); display: block; font-size: 0.875rem; font-weight: 800; color: var(--label); font-variant-numeric: tabular-nums; }
.steps h3 { margin-top: var(--space-2); font-size: 1.375rem; line-height: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.steps p { margin-top: var(--space-3); color: var(--muted-foreground); }

/* Closing */
.closing { text-align: center; }
.closing .wrap { display: flex; flex-direction: column; align-items: center; }
.closing .lead { max-width: 36rem; margin-top: var(--space-5); }
.closing .waitlist-box { margin-top: var(--space-8); }
.closing .form-status { text-align: center; }

/* Footer */
.site-footer { background: var(--background); border-top: 1px solid var(--border); padding: var(--space-8) 0; color: var(--muted-foreground); font-size: 0.875rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.foot-right { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
.motion-toggle { min-height: var(--space-11); padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.motion-toggle:hover { color: var(--foreground); border-color: var(--input); }
.site-footer .brand { font-size: 1rem; color: var(--foreground); }
.site-footer .brand .mark { width: 26px; height: 28px; }
.foot-legal { flex-basis: 100%; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }

/* Plain-text pages: privacy notice, legal notice */
.policy { max-width: var(--content-narrow); margin: 0 auto; }
.policy .eyebrow { display: block; }
.policy h1 { margin-top: var(--space-3); font-size: var(--headline); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.policy .updated { margin-top: var(--space-2); font-size: 0.875rem; color: var(--muted-foreground); }
.policy > p { margin-top: var(--space-5); color: var(--muted-foreground); }
.policy h2 { margin-top: var(--space-10); font-size: 1.375rem; line-height: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.policy h3 { margin-top: var(--space-6); font-size: 1.0625rem; line-height: 1.5rem; font-weight: 700; }
.policy ul { margin-top: var(--space-3); display: grid; gap: var(--space-2); padding-left: var(--space-5); list-style: disc; }
.policy li { color: var(--muted-foreground); }
.policy strong { color: var(--foreground); }
.policy .back { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.policy dl { margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.policy dt { margin: 0; font-weight: 700; color: var(--foreground); }
.policy dd { margin: 0; color: var(--muted-foreground); }
/* The privacy notice's processor table: cells wrap at words; the box scrolls only on a screen narrower than the longest words */
.policy .table-box { margin-top: var(--space-5); overflow-x: auto; }
.policy table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.policy th, .policy td { padding: var(--space-2) var(--space-2) var(--space-2) 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.policy th { color: var(--foreground); font-weight: 700; }
.policy td { color: var(--muted-foreground); }
.policy td:first-child { color: var(--foreground); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* delays too: an entrance that waits seconds to show content is still motion to wait out (screen_specs 1.6) */
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .reveal-armed .reveal { opacity: 1; transform: none; }
  .reveal-armed .talk.reveal .bubble { text-decoration: line-through; }
  .reveal-armed .talk.reveal .instead { opacity: 1; }
  .spinner { animation-duration: 700ms !important; animation-iteration-count: infinite !important; }
}