/* ==========================================================================
   Kikouchou landing page
   Colours follow the Kikouchou brand kit, "Soleil couchant": the four rooms of
   the logo (Soleil, Corail, Framboise, Prune), Encre ink on Creme paper, and
   Nuit for the dark theme. Each hue has a light value for light backgrounds
   and a brighter one for dark backgrounds.
   ========================================================================== */

/* --- Fonts -------------------------------------------------------------- */
/* Self-hosted, Latin subset (it holds the French accents, œ and €). Bricolage
   Grotesque sets the headings, Instrument Sans the running text. Both are
   variable fonts under the SIL Open Font License. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Caveat writes the few notes in the margin, the way the organiser would
   scribble on a printed plan. It is decorative, so it is not preloaded. */
@font-face {
  font-family: "Caveat";
  src: url("/assets/fonts/caveat.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Brand palette. The four hues are the rooms of the logo, in this order:
     roof, tall room, top-right room, bottom-right room. On Creme, only Prune
     and Encre are dark enough for body text. Soleil and Corail are for shapes
     and fills. */
  --kk-soleil: #f09a36;
  --kk-corail: #e25e4a;
  --kk-framboise: #c4436b;
  --kk-prune: #7a3786;
  --kk-encre: #2a1d36;
  --kk-creme: #f6f0e4;
  --kk-nuit: #0f172a;

  /* Guest colours, from the app's person palette. `--pN` is the neat hue, used
     for tints. `--pN-label` is the shade that actually carries a label, and it
     flips with the theme: deep hues under white text on a light card, bright
     hues under dark text on a dark one. One fixed palette cannot do both: a
     shade dark enough for white text disappears against a dark card, and a
     bright one fails under white text (#22c55e + white is only 2.3:1). */
  --p1: #ef4444;  --p1-label: #c62828;
  --p2: #3b82f6;  --p2-label: #1d4ed8;
  --p3: #22c55e;  --p3-label: #15803d;
  --p4: #f97316;  --p4-label: #b45309;
  --p5: #8b5cf6;  --p5-label: #6d28d9;
  --p6: #ec4899;  --p6-label: #be185d;
  --label-fg: #ffffff;

  /* Paper and ink. The page is the plan the group pins to the fridge, not a
     dashboard: a Creme sheet, Encre ink, and the guest colours as the felt
     pens. */
  --paper: var(--kk-creme);
  --ink: var(--kk-encre);
  --marker: rgba(240, 154, 54, .42);   /* Soleil highlighter swipe behind a word */
  --note: #fbe3bd;                      /* the organiser's sticky note */
  --note-fg: #3d2a14;
  --tape: rgba(196, 67, 107, .24);      /* Framboise tape */

  --bg: var(--paper);
  --bg-sunken: #efe6d4;
  --surface: #fffcf5;
  --surface-2: #f4ede0;
  --border: #e3d7c2;
  --border-strong: #cdbd9f;
  --text: var(--ink);
  --text-muted: #554a5e;
  --text-faint: #645a6b;
  --accent: var(--kk-prune);          /* Prune as text: 6.8:1 on paper */
  --accent-hover: #62296d;
  --accent-solid: var(--kk-prune);    /* Prune under white text: 7.7:1 */
  --accent-solid-hover: #62296d;
  --accent-edge: #4f1f59;             /* the pressed-down lip under a button */
  --accent-strong: #62296d;           /* Prune as text on a Prune tint */
  --accent-on: #ffffff;
  --accent-tint: rgba(122, 55, 134, .11);
  --warn-fg: #9a4a05;
  --warn-bg: rgba(249, 115, 22, .16);
  --danger-fg: #b42318;
  --ring: var(--kk-framboise);        /* 4.2:1 on paper */

  /* Paper lying on a table: a short contact shadow and a soft drop, both
     tinted brown rather than slate. */
  --shadow-sm: 0 1px 0 rgba(70, 48, 16, .08);
  --shadow-md: 0 1px 0 rgba(70, 48, 16, .08), 0 8px 18px -12px rgba(70, 48, 16, .35);
  --shadow-lg: 0 1px 0 rgba(70, 48, 16, .08), 0 18px 34px -18px rgba(70, 48, 16, .45);
  --shadow-xl: 0 2px 0 rgba(70, 48, 16, .07), 0 30px 50px -26px rgba(70, 48, 16, .55);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 12px;
  --radius-xl: 18px;

  --step-0: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + .3vw, 1.25rem);
  --step-2: clamp(1.375rem, 1.25rem + .6vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);

  --container: 1140px;
  --gutter: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  --section-y: clamp(4.5rem, 3rem + 7vw, 8rem);

  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Bricolage Grotesque", var(--font);
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* The same house at night: Nuit paper, Creme ink, and the brighter values
     of the four brand hues. */
  --kk-soleil: #ffb85a;
  --kk-corail: #ff7c66;
  --kk-framboise: #f0628f;
  --kk-prune: #b46cd6;
  --paper: var(--kk-nuit);
  --ink: var(--kk-creme);
  --marker: rgba(240, 98, 143, .4);    /* Framboise: Soleil turns brown on Nuit */
  --note: #33283f;                      /* Encre, lifted off the Nuit paper */
  --note-fg: #fbe3bd;
  --tape: rgba(255, 184, 90, .3);
  --bg: var(--paper);
  --bg-sunken: #0b1222;
  --surface: #18223a;
  --surface-2: #1f2a44;
  --border: #2c3854;
  --border-strong: #3d4a68;
  --text: var(--ink);
  --text-muted: #c9c3cf;
  --text-faint: #a8a3b3;
  --accent: #c98ae3;                  /* Prune, one step lighter: 5.6:1 on every surface */
  --accent-hover: #d7a9ec;
  --accent-solid: var(--kk-prune);    /* Nuit text on Prune: 5.2:1 */
  --accent-solid-hover: #c98ae3;
  --accent-edge: #7a3786;
  --accent-strong: #d7a9ec;
  --accent-on: var(--kk-nuit);
  --accent-tint: rgba(180, 108, 214, .15);
  --warn-fg: #fdba74;
  --warn-bg: rgba(249, 115, 22, .18);
  --danger-fg: #fda29b;
  --p1-label: #f87171;
  --p2-label: #60a5fa;
  --p3-label: #4ade80;
  --p4-label: #fbbf24;
  --p5-label: #a78bfa;
  --p6-label: #f472b6;
  --label-fg: var(--kk-nuit);
  --ring: var(--kk-framboise);
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, .4);
  --shadow-md: 0 1px 0 rgba(0, 0, 0, .4), 0 8px 18px -10px rgba(0, 0, 0, .6);
  --shadow-lg: 0 1px 0 rgba(0, 0, 0, .4), 0 18px 34px -16px rgba(0, 0, 0, .7);
  --shadow-xl: 0 2px 0 rgba(0, 0, 0, .4), 0 30px 50px -24px rgba(0, 0, 0, .8);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -.022em;
  font-weight: 680;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    /* Delays must go too: the timeline bars use `animation-fill-mode: backwards`
       and would otherwise sit clipped and invisible for their whole delay. */
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
}

/* --- Primitives --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--sunken { background: var(--bg-sunken); border-block: 1px solid var(--border); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -120%;
  z-index: 100;
  padding: .7rem 1.15rem;
  background: var(--accent-solid);
  color: var(--accent-on);
  font-weight: 620;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: translate .18s ease;
}
.skip-link:focus { translate: -50% 0; }

/* Section labels are written by hand in the margin, in the ink of the guest
   who would say them, rather than set as letter-spaced capitals. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent-strong);
  rotate: -1.5deg;
  transform-origin: left center;
}

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-head > .eyebrow { margin-bottom: 1rem; }
.section-head h2 { font-size: var(--step-3); }
.section-head p:not(.eyebrow) {
  margin-top: 1.1rem;
  font-size: var(--step-1);
  color: var(--text-muted);
  max-width: 42rem;
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center > .eyebrow { transform-origin: center; }
.section-head--center p:not(.eyebrow) { margin-inline: auto; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--accent-solid);
  --btn-fg: var(--accent-on);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem 1.35rem;
  min-height: 2.95rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 620;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease,
    box-shadow .18s ease, color .18s ease;
}
.btn:hover { background: var(--accent-solid-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--primary { box-shadow: 0 3px 0 var(--accent-edge); }
.btn--primary:hover { box-shadow: 0 4px 0 var(--accent-edge); }
.btn--primary:active { box-shadow: 0 1px 0 var(--accent-edge); }
.btn--lg {
  padding: .95rem 1.7rem;
  min-height: 3.35rem;
  font-size: var(--step-1);
  /* The big CTAs carry a whole sentence ("Ouvrir l'app, c'est gratuit"), whose
     min-content width would otherwise widen the hero grid on a 320px screen. */
  white-space: normal;
  text-align: center;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--border-strong);
  border-width: 1.5px;
}
.btn--ghost:hover {
  --btn-bg: var(--surface-2);
  border-color: var(--accent);
  color: var(--text);
}

.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--text-muted);
  padding: .5rem .75rem;
  min-height: 2.4rem;
  font-weight: 560;
}
.btn--quiet:hover { --btn-bg: var(--surface-2); --btn-fg: var(--text); transform: none; }

/* --- Header ------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.header[data-stuck="true"] { border-bottom-color: var(--border); }
.header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
  max-width: 1280px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-weight: 750;
  letter-spacing: -.012em;             /* the wordmark's tracking */
  font-size: 1.15rem;
  text-decoration: none;
  margin-right: auto;
}
.brand .kk-mark { width: 2rem; height: 2rem; }

/* The logo mark. Inline, so that it follows the theme toggle and not only the
   system theme. Do not recolour single rooms outside the palette. */
.kk-mark { display: block; flex: none; }
.kk-mark .kk-roof { fill: var(--kk-soleil); }
.kk-mark .kk-tall { fill: var(--kk-corail); }
.kk-mark .kk-top { fill: var(--kk-framboise); }
.kk-mark .kk-bottom { fill: var(--kk-prune); }

.nav { display: flex; align-items: center; gap: .1rem; }
.nav a {
  padding: .45rem .6rem;
  border-radius: 8px;
  white-space: nowrap;
  font-size: .92rem;
  font-weight: 540;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}
.nav a:hover { color: var(--text); background: var(--surface-2); }

.header__actions { display: flex; align-items: center; gap: .5rem; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.icon-btn svg { width: 1.1rem; height: 1.1rem; }
.icon-btn .icon-sun { display: none; }
:root[data-theme="dark"] .icon-btn .icon-sun { display: block; }
:root[data-theme="dark"] .icon-btn .icon-moon { display: none; }

/* Language switcher */
.lang {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.lang button {
  padding: .3rem .6rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-faint);
  font: inherit;
  font-size: .8rem;
  font-weight: 640;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.lang button:hover { color: var(--text); }
.lang button[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent-strong); }

/* Language + theme live inside the nav: on desktop they read as the tail of
   the nav bar, on a phone they drop into the menu sheet rather than pushing the
   header's CTA off the right edge. */
.nav__tools {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: .6rem;
}

.nav-toggle { display: none; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1139px) {
  .nav {
    position: fixed;
    inset: 4.25rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: .1rem;
    padding: 1rem var(--gutter) 1.5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform-origin: top;
    display: none;
    max-height: calc(100svh - 4.25rem);
    overflow-y: auto;
  }
  .nav[data-open="true"] { display: flex; animation: sheet .2s ease; }
  .nav a { padding: .8rem .5rem; font-size: 1.05rem; }
  .nav-toggle { display: inline-grid; }

  .nav__tools {
    margin: .75rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    justify-content: space-between;
  }

  /* A phone header only has room for the brand, one CTA and the menu button. */
  .header__actions .btn {
    padding: .6rem 1rem;
    min-height: 2.6rem;
    font-size: .92rem;
  }
}

@media (max-width: 460px) {
  .header__actions .btn svg { display: none; }
  .header__actions .btn { padding-inline: .9rem; }
  .brand span { font-size: 1rem; }
}
@keyframes sheet { from { opacity: 0; scale: 1 .96; } to { opacity: 1; scale: 1 1; } }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem) clamp(3rem, 2rem + 4vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  align-items: center;
}
.hero__grid > * { min-width: 0; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
}

.hero h1 {
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: -.032em;
}
/* The organiser went over the part that matters with a highlighter. The swipe
   is a skewed band under the lower two thirds of the line, and it clones onto
   every line the phrase wraps to. */
.hero h1 em {
  font-style: normal;
  padding-inline: .08em;
  margin-inline: -.08em;
  background: linear-gradient(-1.5deg, transparent 38%, var(--marker) 38% 88%, transparent 88%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* What the product is, in one plain sentence, for the reader the headline's
   question does not tell. */
.hero__what {
  margin-top: 1.3rem;
  font-size: var(--step-1);
  font-weight: 650;
  color: var(--text);
  max-width: 34rem;
}
.hero__lede {
  margin-top: .9rem;
  font-size: var(--step-1);
  color: var(--text-muted);
  max-width: 34rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
/* The `landing-hero-first-job` experiment link, under the two buttons. */
.hero__job { display: flex; margin-top: .75rem; }
.hero__job[hidden], .hero__job [hidden] { display: none; }

/* Two differently sized pills stacked on a phone read as a mistake; full-width
   buttons give the hero a clean left edge and a bigger tap target. */
@media (max-width: 560px) {
  .hero__cta,
  .cta__actions { flex-direction: column; align-items: stretch; }
  .hero__cta .btn,
  .hero__job .btn,
  .cta__actions .btn { width: 100%; }
}
.hero__note {
  margin-top: 1rem;
  font-size: .88rem;
  color: var(--text-faint);
}

.trust {
  display: grid;
  gap: .45rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1.5px dashed var(--border-strong);
}
.trust li {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .89rem;
  font-weight: 540;
  color: var(--text-muted);
}
.trust li::before {
  content: "";
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  flex: none;
  background: var(--p1-label);
}
.trust li:nth-child(2)::before { background: var(--p2-label); }
.trust li:nth-child(3)::before { background: var(--p3-label); }

/* --- Video sales letter -------------------------------------------------- */
/* The hero's pitch, drawn rather than filmed. Six scenes ride one 30-second
   clock: every animated node shares `--vsl-dur` and is placed in time by its
   own `animation-delay`, so nothing can drift out of step: neither the scenes
   against each other, nor the progress bar against the scenes.

   Keyframe windows are therefore written as a percentage of the whole 30s
   (1s = 3.333%) and every one of them holds its end state through 100%: the
   clock does not restart between scenes, so a keyframe that returns to its
   start state would replay backwards on screen. */
.vsl {
  --vsl-dur: 30s;
  margin: 0;
}
.vsl__stage {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
}

/* Every animated node runs the same clock, forever, hidden until its delay. */
.vsl__scene,
.vsl__rise,
.vsl__pop,
.vsl__fly,
.vsl__grow {
  animation-duration: var(--vsl-dur);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
  animation-timing-function: cubic-bezier(.22, .68, .3, 1);
}
.vsl__scene { animation-name: vsl-scene; animation-timing-function: ease; }
.vsl__rise  { animation-name: vsl-rise; }
.vsl__pop   { animation-name: vsl-pop; }
.vsl__fly   { animation-name: vsl-fly; }
.vsl__grow  { animation-name: vsl-grow; transform-origin: left center; }

/* SVG transforms need a box to resolve `transform-origin` against; without
   this they rotate and scale around the origin of the whole viewBox. */
.vsl__rise, .vsl__pop, .vsl__fly, .vsl__grow { transform-box: fill-box; }
.vsl__rise, .vsl__pop, .vsl__fly { transform-origin: center; }

@keyframes vsl-scene {
  0%    { opacity: 0; }
  1.7%  { opacity: 1; }
  15%   { opacity: 1; }
  16.6% { opacity: 0; }
  100%  { opacity: 0; }
}
@keyframes vsl-rise {
  0%   { opacity: 0; transform: translateY(10px); }
  2.5% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes vsl-pop {
  0%   { opacity: 0; transform: scale(.82); }
  1.6% { opacity: 1; transform: scale(1.06); }
  2.6% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes vsl-fly {
  0%   { opacity: 0; transform: translate(22px, 10px); }
  2.2% { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes vsl-grow {
  0%   { transform: scaleX(0); }
  3%   { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}

/* Type scale, in viewBox units: the SVG is ~0.8 of its 640 units on a desktop
   hero, so 29 units reads as roughly 23px. */
.vsl__eyebrow {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  fill: var(--accent);
}
.vsl__h {
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -.02em;
  fill: var(--text);
}
.vsl__h--sm { font-size: 25px; }
.vsl__sub { font-size: 18.5px; fill: var(--text-muted); }
.vsl__msg { font-size: 17.5px; fill: var(--text); }
.vsl__meta { font-size: 15px; fill: var(--text-faint); }
.vsl__day {
  font-size: 13.5px;
  font-weight: 640;
  letter-spacing: .04em;
  text-transform: uppercase;
  fill: var(--text-faint);
}
.vsl__tl-title { font-size: 12.5px; }
.vsl__row-name { font-size: 15.5px; font-weight: 600; fill: var(--text); }
.vsl__bar-label { font-size: 13.5px; font-weight: 600; fill: var(--label-fg); }
.vsl__card-title { font-size: 16.5px; font-weight: 600; fill: var(--text); }
.vsl__card-meta { font-size: 15px; fill: var(--text-muted); }
.vsl__initial { font-size: 20px; font-weight: 700; fill: var(--label-fg); }
.vsl__link-text { font-size: 18px; font-weight: 600; fill: var(--text); }
.vsl__ask-mark { font-size: 22px; font-weight: 700; fill: var(--text-faint); }

/* Surfaces */
.vsl__bubble,
.vsl__card,
.vsl__link {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1;
}
.vsl__bubble { fill: var(--surface-2); }
.vsl__link { fill: var(--accent-tint); stroke: var(--accent); }
.vsl__cell { fill: var(--surface-2); }
.vsl__ask { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.vsl__icon { color: var(--accent); }
.vsl__check { color: var(--accent-on); }

.vsl__chip { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.vsl__chip--warn { fill: var(--warn-bg); stroke: none; }
.vsl__chip-text { font-size: 16px; font-weight: 600; fill: var(--text); }
.vsl__chip-text--warn { fill: var(--warn-fg); }
.vsl__chip-text--sm { font-size: 13.5px; }
.vsl__chip--accent { fill: var(--accent-tint); stroke: none; }
.vsl__chip-text--accent { fill: var(--accent-strong); }

.vsl__cta { fill: var(--accent-solid); }
.vsl__cta-glow { fill: var(--accent); opacity: .25; animation: vsl-halo 2.4s ease-in-out infinite; }
.vsl__cta-text { font-size: 20px; font-weight: 650; fill: var(--accent-on); }
.vsl__cta-arrow { color: var(--accent-on); }
@keyframes vsl-halo {
  0%, 100% { opacity: .1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(1.035); }
}
.vsl__cta-glow { transform-box: fill-box; transform-origin: center; }

.vsl__body { container-type: inline-size; }

@container (max-width: 400px) {
  /* A drawing cannot reflow. On a phone the stage is about half the width it
     has in the hero, so the day heads, the room names written inside the bars
     and the chips that sit beside a card's own line of text stop being
     readable, so they are dropped rather than shown as grey noise. The bars
     still say who is in the house and for how long. */
  .vsl__day, .vsl__bar-label, .vsl__chip-extra { display: none; }
}

/* Player chrome ---------------------------------------------------------- */
.vsl__controls {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}
.vsl__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
}
.vsl__play:hover { color: var(--accent); border-color: var(--accent); }
.vsl__play-icon { width: .9rem; height: .9rem; }
.vsl__glyph-play { display: none; }
.vsl__label--play { display: none; }
.vsl.is-paused .vsl__label--play { display: block; }
.vsl.is-paused .vsl__label--pause { display: none; }
.vsl.is-paused .vsl__glyph-play { display: block; }
.vsl.is-paused .vsl__glyph-pause { display: none; }

.vsl__progress {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.vsl__progress-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left center;
  animation: vsl-progress var(--vsl-dur) linear infinite;
}
.vsl__progress span {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--bg);
}
@keyframes vsl-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.vsl__clock {
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

/* One class stops the whole clock: scenes, beats and progress bar alike. */
.vsl.is-paused * { animation-play-state: paused; }

/* The step buttons and the scene counter only exist in step mode, below. */
.vsl__step,
.vsl__count,
.vsl__title--step { display: none; }
.vsl__step-icon--prev { rotate: 180deg; }

/* Reduced motion gets the letter as six still pages. The global rule in the
   reset collapses every duration to nothing, which would otherwise leave all
   six scenes stacked on their end state, which is invisible, so every scene
   is drawn at rest and only one is shown at a time. Without JavaScript that
   one is the payoff scene and there are no controls. With it, app.js adds
   `is-stepping`, marks the current scene and the visitor turns the pages. */
@media (prefers-reduced-motion: reduce) {
  .vsl__scene { display: none; }
  .vsl__scene--still { display: block; }
  .vsl__stage * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .vsl__controls { display: none; }

  .vsl.is-stepping .vsl__scene { display: none; }
  .vsl.is-stepping .vsl__scene.is-current { display: block; }
  .vsl.is-stepping .vsl__controls { display: flex; }
  .vsl.is-stepping .vsl__play:not(.vsl__step),
  .vsl.is-stepping .vsl__clock:not(.vsl__count),
  .vsl.is-stepping .vsl__title--play { display: none; }
  .vsl.is-stepping .vsl__step { display: inline-flex; }
  .vsl.is-stepping .vsl__count,
  .vsl.is-stepping .vsl__title--step { display: inline; }
  .vsl.is-stepping .vsl__step:disabled { opacity: .4; cursor: default; }
  .vsl.is-stepping .vsl__step:disabled:hover { color: var(--text-muted); border-color: var(--border); }
  /* The bar fills one segment per page instead of running on the clock. */
  .vsl.is-stepping .vsl__progress-fill {
    animation: none;
    transform: scaleX(var(--vsl-step, 1));
  }
}

/* --- Product mockups ---------------------------------------------------- */
.device {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
/* The mockups are sheets of the plan, not browser windows: a heading ruled
   off from the body, and no traffic-light dots. */
.device__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .75rem 1rem .6rem;
  border-bottom: 1.5px solid var(--border);
}
.device__title {
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 640;
  color: var(--text-muted);
}
.device__body { padding: 1rem; }

.hero__device { rotate: -.6deg; }
@media (min-width: 1000px) { .hero__device { rotate: -1.1deg; } }

/* A strip of tape holds a sheet to the page. `overflow: hidden` on the sheet
   would cut it off, so the tape sits on the wrapper around the sheet. */
.taped { position: relative; }
.taped::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -.8rem;
  left: 50%;
  width: 7.5rem;
  height: 1.7rem;
  translate: -50% 0;
  rotate: -3deg;
  background: var(--tape);
  box-shadow: 0 1px 2px rgba(70, 48, 16, .12);
  pointer-events: none;
}
.taped--right::before { left: auto; right: 1.5rem; translate: none; rotate: 4deg; }
.taped > .device { rotate: .7deg; }
.taped--right > .device { rotate: -.7deg; }

/* A handwritten note beside a drawing, with an arrow drawn by the same pen. */
.note {
  display: flex;
  align-items: flex-end;
  gap: .35rem;
  margin: 0 0 .6rem 1.25rem;
  font-family: var(--font-hand);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--text-muted);
  rotate: -2deg;
}
.note svg { width: 2.2rem; height: 2rem; flex: none; color: var(--accent); translate: 0 .5rem; }

/* Fake UI atoms shared by every mockup */
.ui-row { display: flex; align-items: center; gap: .5rem; }
.ui-label {
  font-size: .68rem;
  font-weight: 640;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.avatar {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  color: var(--label-fg);
  font-size: .68rem;
  font-weight: 700;
  flex: none;
  box-shadow: 0 0 0 2px var(--surface);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .55rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: .72rem;
  font-weight: 580;
  color: var(--text-muted);
}
.chip--accent { background: var(--accent-tint); border-color: transparent; color: var(--accent-strong); }
.chip--warn {
  background: var(--warn-bg);
  border-color: transparent;
  color: var(--warn-fg);
}

/* Timeline mockup: rows of guests, bars = room stays */
.tl { display: grid; gap: .35rem; }
.tl__head, .tl__row {
  display: grid;
  grid-template-columns: 5.6rem repeat(7, minmax(0, 1fr));
  align-items: center;
  gap: 2px;
}
.tl__head span {
  font-size: .64rem;
  font-weight: 640;
  text-align: center;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tl__name {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tl__name i { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.tl__cell { height: 1.7rem; border-radius: 4px; background: var(--surface-2); }
.tl__bar {
  height: 1.7rem;
  display: flex;
  align-items: center;
  padding-inline: .45rem;
  border-radius: 5px;
  font-size: .68rem;
  font-weight: 640;
  color: var(--label-fg);
  overflow: hidden;
  white-space: nowrap;
  animation: grow .7s cubic-bezier(.22, 1, .36, 1) backwards;
}
@keyframes grow { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.tl__bar[data-c="1"] { background: var(--p1-label); }
.tl__bar[data-c="2"] { background: var(--p2-label); }
.tl__bar[data-c="3"] { background: var(--p3-label); }
.tl__bar[data-c="4"] { background: var(--p4-label); }
.tl__bar[data-c="5"] { background: var(--p5-label); }
.tl__bar[data-c="6"] { background: var(--p6-label); }

.tl__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  margin-top: .85rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--border);
}

/* Rooms mockup: capacity columns */
.rooms-mock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.room-col {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: .6rem;
  display: grid;
  gap: .45rem;
  align-content: start;
}
.room-col h4 { font-size: .8rem; font-weight: 660; }
.room-col > p { font-size: .68rem; color: var(--text-faint); }
.room-slot {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .4rem;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .74rem;
  font-weight: 560;
}
.room-slot--empty {
  border-style: dashed;
  background: transparent;
  color: var(--text-faint);
  justify-content: center;
  font-size: .68rem;
}
.room-col[data-full="true"] { border-color: color-mix(in oklab, var(--p4) 45%, var(--border)); }

/* Pickup / transport mockup */
.pickup {
  display: grid;
  gap: .55rem;
}
.pickup__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .65rem;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.pickup__when {
  display: grid;
  place-items: center;
  min-width: 3.1rem;
  padding: .25rem .4rem;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .84rem;
  line-height: 1.15;
}
.pickup__when small { display: block; font-size: .6rem; font-weight: 600; color: var(--text-faint); }
.pickup__what { min-width: 0; }
.pickup__what strong { font-size: .82rem; font-weight: 640; }
.pickup__what p { font-size: .72rem; color: var(--text-faint); }

/* Assistant chat mockup */
.chat { display: grid; gap: .6rem; }
.bubble {
  max-width: 88%;
  padding: .6rem .8rem;
  border-radius: 14px;
  font-size: .8rem;
  line-height: 1.5;
}
.bubble--me {
  justify-self: end;
  background: var(--accent);
  color: var(--accent-on);
  border-bottom-right-radius: 5px;
  font-weight: 540;
}
.bubble--bot {
  justify-self: start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
}
.bubble--bot b { color: var(--text); }

/* --- Problem cards ------------------------------------------------------ */
.pain { display: grid; gap: 1rem; }
@media (min-width: 700px) { .pain { grid-template-columns: repeat(2, 1fr); } }
.pain li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.pain__quote {
  font-size: 1.02rem;
  font-weight: 620;
  letter-spacing: -.01em;
}
.pain__quote + p { margin-top: .4rem; font-size: .92rem; color: var(--text-muted); }
.pain__mark {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--p1) 12%, transparent);
  color: var(--danger-fg);
  font-weight: 700;
  font-size: .95rem;
}

.answer {
  margin-top: 2rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--accent-tint);
}
.answer p { font-size: var(--step-1); font-weight: 560; }

/* --- Steps -------------------------------------------------------------- */
/* Two unequal halves rather than numbered cards: a narrow column for the
   organiser's two minutes, a wide one for what everyone else does. The
   imbalance is the point of the section. */
.split { display: grid; gap: 1.25rem; }
@media (min-width: 860px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem; align-items: stretch; }
}
/* The organiser's part is a sticky note. The group's part is a page of a
   French school notebook, with its red margin, and each line is written by a
   different guest in their own colour. */
.split__side {
  position: relative;
  padding: 1.75rem 1.5rem 1.6rem;
  border-radius: 3px;
  background: var(--note);
  color: var(--note-fg);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 860px) {
  .split__side:not(.split__side--crowd) { rotate: -1.6deg; align-self: start; margin-top: 1rem; }
}
.split__side--crowd {
  padding-left: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(90deg, transparent calc(clamp(2.25rem, 1.5rem + 3vw, 3.5rem) - .9rem),
      color-mix(in oklab, var(--p1-label) 60%, transparent) 0 calc(clamp(2.25rem, 1.5rem + 3vw, 3.5rem) - .75rem),
      transparent 0),
    var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
}
.split__who {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--accent-strong);
}
.split__side:not(.split__side--crowd) .split__who { color: inherit; opacity: .8; }
.split__side h3 { margin-top: .35rem; font-size: var(--step-2); }
.split__list { margin-top: 1.1rem; display: grid; gap: .8rem; }
.split__list li { display: flex; gap: .7rem; color: var(--text-muted); }
.split__side:not(.split__side--crowd) .split__list li { color: inherit; }
.split__list svg { width: 1.1rem; height: 1.1rem; color: currentColor; flex: none; margin-top: .3rem; opacity: .75; }
.split__list .avatar { margin-top: .1rem; }
.split__list strong { color: inherit; font-weight: 660; }
.split__side--crowd .split__list strong { color: var(--text); }
.step__detail {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--border);
  display: grid;
  gap: .35rem;
}
.step__detail li {
  display: flex;
  gap: .5rem;
  font-size: .85rem;
  color: var(--text-muted);
}
.step__detail svg { width: 1rem; height: 1rem; color: var(--accent); flex: none; margin-top: .25rem; }

/* --- Feature blocks ----------------------------------------------------- */
.feature {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.feature + .feature { border-top: 1px solid var(--border); }
@media (min-width: 940px) {
  .feature { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .feature--flip > .feature__media { order: -1; }
}
.feature__body > .eyebrow { margin-bottom: .9rem; }
.feature__body h3 { font-size: var(--step-2); }
.feature__body > p:not(.eyebrow) {
  margin-top: .9rem;
  font-size: var(--step-1);
  color: var(--text-muted);
}
.feature__list { margin-top: 1.5rem; display: grid; gap: .8rem; }
.feature__list li { display: grid; grid-template-columns: auto 1fr; gap: .65rem; font-size: .94rem; }
.feature__list svg { width: 1.15rem; height: 1.15rem; color: var(--accent); margin-top: .2rem; }
.feature__list b { font-weight: 640; }
.feature__list span { color: var(--text-muted); }

/* --- Small feature grid ------------------------------------------------- */
.grid-cards { display: grid; gap: 1rem; }
@media (min-width: 640px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent);
}
.card__icon svg { width: 1.3rem; height: 1.3rem; }
.card h3 { font-size: 1.05rem; }
.card p { margin-top: .5rem; font-size: .92rem; color: var(--text-muted); }

/* --- Use cases ---------------------------------------------------------- */
.usecases { display: grid; gap: 1rem; }
@media (min-width: 720px) { .usecases { grid-template-columns: repeat(2, 1fr); } }
.usecase {
  display: grid;
  gap: .85rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.usecase__top { display: flex; align-items: center; gap: .7rem; }
.usecase__emoji {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 1.3rem;
  flex: none;
}
.usecase h3 { font-size: 1.08rem; }
.usecase__meta { font-size: .78rem; color: var(--text-faint); font-weight: 560; }
.usecase dl { display: grid; gap: .7rem; margin: 0; }
.usecase dt {
  font-size: .7rem;
  font-weight: 680;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .15rem;
}
.usecase dd { margin: 0; font-size: .92rem; color: var(--text-muted); }
.usecase dd b { color: var(--text); font-weight: 620; }
.usecase__hard dt { color: var(--danger-fg); }
.usecase__fix dt { color: var(--accent-strong); }

/* --- Privacy ------------------------------------------------------------ */
.privacy {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  align-items: start;
}
@media (min-width: 940px) { .privacy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.flow { display: grid; gap: .75rem; }
.flow li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: start;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.flow__badge {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
}
.flow__badge svg { width: 1.1rem; height: 1.1rem; }
.flow strong { display: block; font-size: .96rem; font-weight: 640; }
.flow p { font-size: .89rem; color: var(--text-muted); margin-top: .2rem; }

/* --- Install ------------------------------------------------------------ */
.install { display: grid; gap: 1rem; }
@media (min-width: 860px) { .install { grid-template-columns: repeat(3, 1fr); } }
.install li {
  padding: 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.install h3 { display: flex; align-items: center; gap: .55rem; font-size: 1rem; }
.install h3 svg { width: 1.15rem; height: 1.15rem; color: var(--accent); }
.install ol { margin-top: .85rem; display: grid; gap: .5rem; counter-reset: i; }
.install ol li {
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem;
  font-size: .88rem;
  color: var(--text-muted);
}
.install ol li::before {
  counter-increment: i;
  content: counter(i);
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .15rem;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-size: .68rem;
  font-weight: 700;
}
kbd {
  padding: .05rem .35rem;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-2);
  font-family: var(--font);
  font-size: .82em;
  font-weight: 620;
  color: var(--text);
}

/* --- FAQ ---------------------------------------------------------------- */
.faq { max-width: 48rem; margin-inline: auto; display: grid; gap: .6rem; }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq details[open] { border-color: var(--border-strong); }
.faq summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-weight: 620;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: .6rem;
  height: .6rem;
  margin-left: auto;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  rotate: 45deg;
  flex: none;
  transition: rotate .2s ease;
}
.faq details[open] summary::after { rotate: -135deg; }
.faq__answer { padding: 0 1.25rem 1.2rem; color: var(--text-muted); font-size: .95rem; }
.faq__answer a { color: var(--accent-strong); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* --- Final CTA ---------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(4rem, 3rem + 5vw, 6.5rem);
  text-align: center;
  color: var(--kk-creme);
  background: var(--kk-encre);
}
/* The house from the logo, drawn in chalk, with a light on in each window
   in a guest's colour. */
.cta__house { width: 7.5rem; height: auto; margin: 0 auto 1.75rem; color: var(--kk-creme); }
.btn--light { --btn-bg: var(--kk-creme); --btn-fg: var(--kk-encre); box-shadow: 0 3px 0 #a795ad; }
.btn--light:hover { background: #fffcf5; }
.cta h2 { font-size: var(--step-3); }
.cta p {
  margin: 1.1rem auto 0;
  max-width: 34rem;
  font-size: var(--step-1);
  color: #ddd3de;
}
.cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2.25rem; }
.cta .btn--ghost { --btn-fg: var(--kk-creme); border-color: rgba(246, 240, 228, .35); }
.cta .btn--ghost:hover { --btn-bg: rgba(246, 240, 228, .1); border-color: rgba(246, 240, 228, .6); }
/* `.cta p` is more specific, so this needs the parent to win the colour. */
.cta .cta__fine { margin-top: 1.4rem; font-size: .85rem; color: #e8e0e8; }

/* --- Footer ------------------------------------------------------------- */
.footer {
  padding-block: 3rem 2.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
  font-size: .9rem;
}
.footer__grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr repeat(2, 1fr); } }
@media (min-width: 1040px) { .footer__grid { grid-template-columns: 1.3fr .8fr .8fr 1.3fr; } }
/* The folded privacy, install and FAQ lines: prose, not a link list, so
   they get the muted colour and a readable measure rather than the
   tighter rhythm of the nav columns above. */
.footer__notes li { color: var(--text-muted); font-size: .9rem; line-height: 1.5; max-width: 24rem; }
.footer h2 {
  font-size: .74rem;
  font-weight: 680;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .9rem;
}
.footer ul { display: grid; gap: .4rem; }
/* inline-block + padding keeps the link's hit area at the 24px WCAG minimum. */
.footer ul a { display: inline-block; padding-block: .2rem; }
.footer a { color: var(--text-muted); text-decoration: none; }
/* The wordmark is not a muted link; `.footer a` would otherwise dim it. */
.footer .brand { color: var(--text); }
.footer a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.footer__about p { margin-top: .8rem; color: var(--text-muted); max-width: 26rem; }
/* The credit link is the last <a> outside a list, so it needs its own padding
   to reach the 24px minimum target size. */
.footer__bottom a { display: inline-block; padding-block: .25rem; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: .85rem;
}

/* --- Scroll reveal ------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

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


/* --- Section CTA -------------------------------------------------------- */
/* The feedback that produced the four-block page asked for more buttons, so
   every block below the hero ends on one. Centred under a full-width block,
   left-aligned when it sits in a `.feature__body` column. */
.section-cta { margin-top: 2.5rem; display: flex; justify-content: center; }
.section-cta--left { margin-top: 1.75rem; justify-content: flex-start; }

/* `.feature__body` used to head its blocks with an h3 under a section h2.
   With one feature to a section the heading is the h2 itself, and it keeps
   the same size the h3 had. */
.feature__body h2 { font-size: var(--step-2); }
.feature__body > h2 + p { margin-top: .9rem; font-size: var(--step-1); color: var(--text-muted); }

/* --- Reviews ------------------------------------------------------------ */
/* Deliberately thin. Most readers never reach it; it is there for the ones
   who read everything, so it costs one screen at most. */
.reviews { padding-block: clamp(3rem, 2rem + 3vw, 5rem); border-block: 1px solid var(--border); }
.reviews__list { display: grid; gap: 1.25rem 2.5rem; }
@media (min-width: 820px) {
  .reviews__list { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; }
  .review--lead { grid-row: span 2; }
}
.review p:first-child { font-size: .98rem; line-height: 1.55; text-wrap: pretty; }
.review--lead {
  padding: 1.75rem 1.75rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  rotate: -1deg;
}
.review--lead p:first-child {
  font-family: var(--font-hand);
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
}
.review:not(.review--lead) { padding-left: 1rem; border-left: 3px solid var(--p4-label); }
.review:nth-child(3) { border-left-color: var(--p5-label); }
.review__who {
  margin-top: .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .84rem;
  color: var(--text-faint);
}
.review__who .avatar { width: 1.5rem; height: 1.5rem; font-size: .7rem; }