/* =========================================================================
   Pascale.ai — landing design system
   Tokens read off the live product at pascale.ai so the landing page and the
   app share one palette, one type scale, and one button size.
   ========================================================================= */

:root {
  /* tells browsers (and Android/Chromium's auto-dark heuristic for sites with
     no dark mode) this page is intentionally light-only — without it, forced
     dark-mode inversion can desync gradient-clip text from its background
     and make headline like .hero-title .accent render invisible */
  color-scheme: light;
  /* ── brand ── */
  --primary: #ff2aa0;           /* the CTA magenta — every primary action */
  --primary-hover: #e0198a;
  --primary-border: #c4157a;
  --primary-light: color-mix(in srgb, var(--primary) 10%, transparent);
  --primary-deep: #a11244;      /* magenta at text sizes: readable on light */

  --brand-magenta: #ff2aa0;
  --brand-cyan: #2acdff;
  --brand-cyan-deep: #0b6f9e;   /* the app blue at text sizes: 5.5:1 on white */
  --brand-purple: #522aab;
  --brand-acid: #e5ff00;        /* ratings + accents on dark only */
  /* signature gradient (headline accents) + CTA gradient (celebration/buttons) */
  --grad: linear-gradient(90deg, #00ffff 14.3%, #923fc0 49%, #fa3582 85.7%);
  --grad-cta: linear-gradient(90deg, #ff2aa0 0%, #522aab 100%);
  /* the product's dark band */
  --grad-dark: radial-gradient(118% 82% at 50% 0%, #222734 0%, #000000 100%);

  /* alias so existing accent rules pick up the brand magenta */
  --corail: var(--primary);
  --corail-deep: var(--primary-deep);
  --corail-soft: var(--primary-light);

  /* surfaces */
  --background: #ffffff;
  --porcelain: #f3f1f1;   /* light grey utility fill */
  --paper: #f8f8f8;       /* soft section band */
  --surface: #ffffff;     /* raised panels: slate, stages, gallery */
  --tint: #fff4f8;        /* soft pink wash */

  /* ink */
  --ink: #121212;         /* primary text */
  --ink-2: #3a3d3f;       /* secondary text */
  --muted: #5f5f5f;       /* tertiary */
  --line: #e5e5e5;
  --line-soft: #f0f0f0;
  --shadow: 0 30px 64px -34px rgba(0, 0, 0, 0.22);

  /* type — Inter, the product typeface, 400→900 */
  --display: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* rhythm */
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --sec-pad: clamp(52px, 7.5vw, 102px);
  --radius: 12px;         /* panels */
  --radius-pill: 40px;    /* buttons */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
sup { font-size: 0.62em; }

::selection { background: var(--corail); color: #fff; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
.film :focus-visible { outline-color: var(--brand-cyan); }

/* -------------------------------------------------------------- layout -- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: 760px; }

.section { padding-block: var(--sec-pad); position: relative; }
.section-soft { background: var(--paper); }

/* ------------------------------------------------------------ typography */
.eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 22px;
}
.eyebrow.accent { color: var(--primary-deep); }
/* blue eyebrow: the two "how it works" sections, so the explanatory half of the
   page reads cool and the persuasive half stays magenta */
.eyebrow.cool { color: var(--brand-cyan-deep); }

.sec-head { max-width: 720px; margin-bottom: clamp(30px, 4.5vw, 54px); }
.sec-head-row {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.sec-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
}
.sec-title em { font-style: normal; color: var(--primary); }

/* signature gradient text — used sparingly (hero thesis, credo payoff) */
.grad-text,
.credo-text .grad {
  color: var(--primary); /* fallback if the gradient clip doesn't render */
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}
/* the gradient must be declared on the word span itself (.w), not the outer
   .line — .w is display: inline-block (needed for its rise-in animation),
   and Chromium fails to propagate an ancestor's background-clip: text into
   an inline-block descendant, silently leaving the headline blank */
.hero-title .accent .w {
  color: var(--primary);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) {
  .grad-text,
  .credo-text .grad,
  .hero-title .accent .w,
  .brand-mark span,
  .final-title em {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
  }
}
.sec-lede {
  margin: 20px 0 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--ink-2);
}
/* centered section heads keep their lede centered */
.film-sec .sec-lede { margin-inline: auto; }

/* lede-list — a numbered read-out that echoes the .steps numerals below it */
.lede-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.lede-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: var(--ink-2);
}
.lede-num { font-family: var(--mono); font-size: 1.35em; font-weight: 700; color: var(--brand-cyan-deep); flex-shrink: 0; line-height: 1; }
.sec-lede-payoff { margin-top: 14px; color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- buttons */
/* Sizes match the product: 52px tall primary CTA, 40px pill radius, 700 weight. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-block { width: 100%; }
/* buttons stay put on hover — only colour changes */

.btn-solid { background: var(--primary); color: #fff; }
.btn-solid:hover { background: var(--primary-hover); }

.btn-line { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn-line:hover { border-color: var(--ink); }

.btn .arr { transition: transform 0.25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

.link-quiet { font-weight: 700; font-size: 15px; color: var(--ink-2); transition: color 0.2s; }
.link-quiet:hover { color: var(--primary-deep); }

/* ------------------------------------------------------------------- nav */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}
.nav.is-stuck {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(1.4) blur(14px);
}
.nav.is-stuck::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--grad);
  opacity: 0.7;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 11px;
}
/* the nav uses the product's small pill so the bar stays compact */
.nav-cta .btn, .mobile-menu .btn { padding: 11px 18px; font-size: 14px; }
.brand { display: flex; flex-direction: column; line-height: 1; }
.nav-logo { display: block; }
/* the wordmark is a wide 819x214 asset — pin the height and let the width
   follow, so it reads as a logo and never as a full-width banner */
.nav-logo img { display: block; height: 40px; width: auto; }
.brand-mark {
  font-family: var(--display);
  font-weight: 900;
  font-size: 25px;
  letter-spacing: -0.02em;
}
.brand-mark span {
  color: var(--primary);
  background: var(--grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-by { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 13px; }
.brand-by a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; transition: color 0.2s; }
.brand-by a:hover { color: var(--primary-deep); text-decoration-color: currentColor; }
.founder-link { margin-top: 26px; }

.nav-links { display: flex; gap: 30px; }
.nav-links a { font-weight: 600; font-size: 15px; color: var(--ink-2); transition: color 0.2s; position: relative; padding-block: 4px; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--corail);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: 18px; }

.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: var(--porcelain);
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
}
.burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px var(--gutter) 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a { padding: 12px 0; font-weight: 600; font-size: 17px; }
.mobile-menu .btn { margin-top: 8px; }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh; /* pins the ticker to the bottom of the first screen on load */
  padding-top: clamp(120px, 16vw, 180px);
  /* no clip here: the glow has to reach past the hero into the section below.
     body already carries overflow-x: hidden, so it can't widen the page. */
}
.hero-glow {
  position: absolute;
  z-index: -1;   /* behind in-flow content, above the page background */
  top: -12%; right: -8%;
  width: 66vw; height: 82vw;
  max-width: 820px; max-height: 1000px;
  background:
    radial-gradient(circle at 62% 38%, rgba(255, 42, 160, 0.3), transparent 62%),
    radial-gradient(circle at 30% 66%, rgba(42, 205, 255, 0.27), transparent 64%);
  filter: blur(30px);
  pointer-events: none;
  animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-6%, 6%) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { .hero-glow { animation: none; } }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(40px, 7vw, 90px);
  padding-bottom: clamp(60px, 9vw, 110px);
}

/* sized so "nouvelle génération." (the longest line) stays on one row down
   to the 1000px breakpoint where the two-column grid gives way to a full-
   width single column — the old clamp was tuned for a shorter 5-word
   headline and let today's longer copy wrap mid-line above ~1000px. The
   copy column above was widened (1.05fr → 1.15fr) to buy back some of the
   size this constraint costs. */
.hero-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .w {
  display: inline-block;
  transform: translateY(110%);
  animation: rise 0.7s var(--ease) forwards;
}
.hero-title .line:nth-child(1) .w { animation-delay: 0.25s; }
.hero-title .line:nth-child(2) .w { animation-delay: 0.34s; }
.hero-title .line:nth-child(3) .w { animation-delay: 0.44s; }
.strike-word {
  position: relative;
}
.strike-word::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  top: 55%;
  height: 0.06em;   /* scales with the headline instead of thinning out at 4.4rem */
  background: var(--corail);
  transform: scaleX(0);
  transform-origin: left;
  /* fires the moment the line it strikes finishes rising (0.34s + 0.7s) */
  animation: strike 0.45s var(--ease) 1.05s forwards;
}
@keyframes rise { to { transform: translateY(0); } }
@keyframes strike { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-title .w { transform: none; animation: none; }
  .strike-word::after { transform: scaleX(1); animation: none; }
}

.hero-sub {
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  color: var(--ink-2);
  max-width: 48ch;
  margin: 0 0 32px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.hero-fine { font-size: 14px; color: var(--muted); margin: 0; }

/* --------------------------------------------------- THE LIVING SLATE -- */
.slate {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow);
  position: relative;
}
.slate-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.slate-who { display: flex; align-items: center; gap: 11px; }
.slate-who b { display: block; font-size: 15px; }
.slate-who .dot-live { margin-top: 4px; }

/* the mascot herself — peeking over the slate's top-right corner rather
   than sitting small inside it, so she reads as a character, not an icon */
.hero-mascot {
  position: absolute;
  z-index: 2;
  top: clamp(-64px, -6vw, -42px);
  right: clamp(-120px, -10vw, -75px);
  width: clamp(112px, 10vw, 168px);
  height: auto;
  transform: rotate(-7deg);
  filter: drop-shadow(0 16px 22px rgba(88, 34, 143, 0.28));
  animation: mascot-float 5s ease-in-out infinite alternate;
  pointer-events: none;
  user-select: none;
}
@keyframes mascot-float {
  from { transform: rotate(-7deg) translateY(0); }
  to { transform: rotate(-7deg) translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .hero-mascot { animation: none; } }
/* only hide alongside .slate itself (≤620px) — on tablet the card is still
   shown full-width in the single-column layout, so the mascot stays too */
@media (max-width: 620px) { .hero-mascot { display: none; } }
/* Not inline-flex: an inline-flex box takes its baseline from its first flex
   item, which here is the empty dot — so the browser sat the dot's bottom edge
   on the neighbouring baseline and pushed the label down. As an inline-block
   the baseline is the label's own, so "en ligne" lines up with "Pascale". */
.dot-live {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  color: var(--muted);
}
.dot-live::before {
  content: "";
  display: inline-block;
  /* middle == parent baseline + half x-height: the optical centre of the label */
  vertical-align: middle;
  width: 6px; height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #43d9a3;
  box-shadow: 0 0 0 0 rgba(67, 217, 163, 0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(67,217,163,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(67,217,163,0); }
  100% { box-shadow: 0 0 0 0 rgba(67,217,163,0); }
}
.slate-tag {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  background: var(--porcelain);
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: 999px;
}
.slate-body { min-height: 232px; margin-bottom: 18px; }
.slate-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.slate-chip {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.slate-chip:hover { color: var(--ink); border-color: var(--ink); }
.slate-chip.is-active { color: #fff; background: var(--ink); border-color: var(--ink); }

/* --------------------------------------------------- exercise mockups -- */
/* Exercise mocks render on white panels (slate + gallery stage) — light theme. */
.mock-q { font-weight: 700; font-size: 15px; margin: 0 0 14px; line-height: 1.4; }
.mock-hint, .mock-badge, .mock-brief { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.mock-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--corail-deep);
  border: 1px solid var(--corail);
  border-radius: 999px;
  padding: 3px 9px;
  margin-bottom: 12px;
}
.mock-passage {
  font-style: italic;
  font-size: 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--corail);
  margin: 0 0 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

.opt-stack { display: flex; flex-direction: column; gap: 8px; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s var(--ease);
}
.opt-card[data-layout="vertical"] { flex-direction: column; text-align: center; gap: 8px; padding: 16px; }
.opt-ind {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.opt-ind svg { width: 13px; height: 13px; display: none; }
.opt-ind .opt-letter { display: block; }
.opt-card.is-selected {
  border-color: var(--corail);
  background: var(--corail-soft);
  transform: scale(1.015);
}
.opt-card.is-selected .opt-ind { background: var(--corail); border-color: var(--corail); color: #fff; }
.opt-card.is-selected[data-ind-letter] .opt-letter,
.opt-card.is-selected .opt-letter { display: none; }
.opt-card.is-selected svg { display: block; }
.opt-card[data-strike].is-selected .opt-label { text-decoration: line-through; opacity: 0.6; }
.opt-card[data-strike].is-selected { background: transparent; }

.field-label { font-size: 12px; color: var(--muted); margin: 0 0 6px; font-weight: 600; }
.field-box {
  min-height: 42px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  padding: 10px 12px;
  font-size: 14px;
  margin: 0;
}
.field-box[data-lines="multi"] { min-height: 66px; }
.mock-caret { color: var(--corail-deep); animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

.ap-steps { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.ap-step {
  font-size: 13px;
  color: var(--muted);
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--line-soft);
  opacity: 0.45;
  transition: opacity 0.4s, color 0.3s;
  margin: 0;
}
.ap-step.is-on { opacity: 1; color: var(--ink); }

.dt-note {
  font-size: 12.5px; font-weight: 700;
  color: var(--corail-deep);
  margin: 10px 0 0;
  opacity: 0;
  transition: opacity 0.4s;
}
.dt-note.is-on { opacity: 1; }
.dt-audio { font-weight: 700; font-size: 14px; margin: 0 0 10px; }

.as-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.as-head { font-size: 11px; color: var(--muted); margin: 0 0 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.as-item {
  font-size: 13px; font-weight: 600;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1.5px solid var(--line);
  margin-bottom: 7px;
  transition: all 0.3s var(--ease);
}
.as-item.is-pending { border-color: var(--corail); background: var(--corail-soft); }
.as-item.is-target { border-color: var(--corail); border-style: dashed; }
.as-item.is-paired { border-color: #0f9d6b; color: #0a7d55; }

/* ---------------------------------------------------------------- ticker */
.ticker {
  margin-top: auto; /* sits flush at the bottom of .hero's 100svh */
  border-block: 1px solid var(--line);
  padding-block: 16px;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 30px;
  width: max-content;
  animation: scroll-x 32s linear infinite;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.ticker-track i { color: var(--corail-deep); font-style: normal; }
@keyframes scroll-x { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ------------------------------------------------------------- workflow */
.path-switch {
  display: inline-flex;
  position: relative;
  gap: 4px;
  padding: 5px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 40px;
}
.path-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 11px 20px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.25s;
}
.path-btn .path-num { font-family: var(--mono); font-weight: 700; font-size: 12px; opacity: 0.5; transition: opacity 0.25s, color 0.25s; }
.path-btn:not(.is-active):hover { color: var(--ink); }
.path-btn.is-active { color: #fff; }
.path-btn.is-active .path-num { opacity: 0.85; }
.path-ink {
  position: absolute;
  z-index: 0;
  top: 5px; bottom: 5px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 6px 16px rgba(255, 42, 160, 0.32);
  transition: left 0.34s var(--ease), width 0.34s var(--ease);
}

.path-pane {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.path-pane[hidden] { display: none; }
.path-pane.is-active { animation: fade-up 0.42s var(--ease); }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.step {
  position: relative;
  padding: 20px 0 20px 52px;
  border-top: 1px solid var(--line);
  counter-increment: s;
  transition: opacity 0.4s;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0; top: 20px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--brand-cyan-deep);
  font-weight: 700;
}
.step b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.step span { display: block; font-size: 14.5px; color: var(--muted); margin-top: 3px; }
.step.is-dim { opacity: 0.4; }

.stage {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow);
  min-height: 340px;
}
.scene-head { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.scene-head img { width: 34px; height: 34px; object-fit: contain; }
.scene-head b { font-size: 14px; }
.scene-head .dot-live { font-size: 11px; margin-left: 9px; }
.scene-cap { font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 0 0 10px; }

.chap-list { display: flex; flex-direction: column; gap: 8px; }
.chap {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  font-size: 14px; font-weight: 600;
  transition: all 0.32s var(--ease);
}
.chap.is-pick { border-color: var(--corail); background: var(--corail-soft); }
.chap-open { margin-top: 18px; opacity: 0; transform: translateY(10px); transition: opacity 0.4s, transform 0.4s; }
.chap-open.is-on { opacity: 1; transform: none; }
.open-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-radius: 10px;
  border: 1.5px solid var(--line);
  font-size: 14px; font-weight: 600;
  margin-bottom: 8px;
}
.open-row i { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 500; }
.open-row.is-lead { border-color: var(--corail); background: var(--corail-soft); }
.open-more { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 4px; }
.open-more .plus {
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--corail-deep);
  border: 1px solid var(--corail); border-radius: 999px; padding: 2px 7px;
}

/* roadmap — a vertical route to exam day, walked step by step */
.roadmap { display: flex; flex-direction: column; }
.road-step {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 0 0 22px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.36s var(--ease), transform 0.36s var(--ease);
}
.chap-open.is-on .road-step { opacity: 1; transform: none; }
.chap-open.is-on .road-step:nth-child(1) { transition-delay: 0.05s; }
.chap-open.is-on .road-step:nth-child(2) { transition-delay: 0.22s; }
.chap-open.is-on .road-step:nth-child(3) { transition-delay: 0.39s; }
.road-step:last-child { padding-bottom: 0; }
.road-step::before {
  content: "";
  position: absolute;
  left: 13px; top: 28px; bottom: 0;
  width: 2px;
  background: var(--line);
  transition: background 0.4s var(--ease) 0.3s;
}
.road-step:last-child::before { display: none; }
.road-dot {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--surface);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--muted);
  z-index: 1;
  transition: all 0.3s var(--ease);
}
.road-body { padding-top: 3px; }
.road-body b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink-2); transition: color 0.3s; }
.road-body span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.road-step.is-done .road-dot { background: var(--corail); border-color: var(--corail); color: #fff; }
.road-step.is-done::before { background: var(--corail); }
.road-step.is-active .road-dot {
  border-color: var(--corail);
  color: var(--corail-deep);
  background: var(--corail-soft);
  box-shadow: 0 0 0 4px var(--corail-soft);
}
.road-step.is-active .road-body b { color: var(--ink); }

.drop {
  position: relative;
  overflow: hidden;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  padding: 26px;
  text-align: center;
  transition: border-color 0.3s, background 0.3s;
}
.drop.is-active { border-color: var(--corail); background: var(--corail-soft); }
.drop-sheet { position: relative; width: 46px; margin: 0 auto 12px; color: var(--ink-2); }
.drop-sheet svg { width: 46px; height: auto; }
/* the analyzer: a bright green bar sweeping the full width of the drop zone */
.scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 2%, #16e07f 25%, #16e07f 75%, transparent 98%);
  box-shadow: 0 0 16px 3px rgba(22, 224, 127, 0.75);
  opacity: 0;
  pointer-events: none;
}
.drop.is-scanning .scan { animation: scan 1.9s var(--ease); }
@keyframes scan {
  0% { opacity: 0; top: 0; }
  10% { opacity: 1; top: 0; }
  46% { top: calc(100% - 4px); }        /* down */
  54% { top: calc(100% - 4px); }
  90% { top: 0; opacity: 1; }           /* back up */
  100% { top: 0; opacity: 0; }
}
.drop-hint { font-size: 13px; color: var(--muted); margin: 0; font-weight: 600; }

.ctx { margin-top: 16px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.42s, max-height 0.42s; }
.ctx.is-on { opacity: 1; max-height: 260px; }
.ctx-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin: 0 0 10px; }
.ctx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--corail); }
.ctx ul { list-style: none; margin: 0; padding: 0; }
.ctx li { font-size: 13px; color: var(--muted); padding-left: 22px; position: relative; margin-bottom: 6px; }
.ctx li::before { content: "✓"; position: absolute; left: 0; color: var(--corail-deep); font-weight: 700; }

.scene-chat { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.bubble { display: flex; gap: 8px; align-items: flex-end; opacity: 0; transform: translateY(8px); }
.bubble.is-on { opacity: 1; transform: none; transition: opacity 0.34s, transform 0.34s; }
.bubble img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.bubble p {
  margin: 0; font-size: 13.5px; padding: 9px 13px; border-radius: 13px; max-width: 78%;
}
.bubble.bot p { background: var(--porcelain); border-bottom-left-radius: 4px; }
.bubble.me { flex-direction: row-reverse; }
.bubble.me p { background: var(--corail); color: #fff; border-bottom-right-radius: 4px; }

/* ---------------------------------------------------------------- credo */
.credo { background: var(--tint); }
.credo-text mark { background: none; color: var(--primary); }
.credo-text {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 900px;
}

/* -------------------------------------------------------------- gallery */
.gallery {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.gallery-rail { display: flex; flex-direction: column; gap: 2px; }

/* narrow screens swap the rail for a native picker: eight items is more than a
   horizontal scroller can show without hiding most of them off-screen */
.gallery-pick { display: none; }
.gallery-pick-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}
.gallery-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  font-family: var(--body);
  font-size: 16px;   /* 16px or larger, or iOS zooms the page on focus */
  font-weight: 600;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 44px 13px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235f5f5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.gallery-select:hover { border-color: var(--ink); }
.gallery-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 13px 14px;
  border-radius: 11px;
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  position: relative;
}
.gallery-tab .g-num { font-family: var(--mono); font-weight: 700; font-size: 12px; opacity: 0.55; }
.gallery-tab:hover { color: var(--ink); background: var(--paper); }
.gallery-tab.is-active { color: var(--ink); background: var(--paper); }
.gallery-tab.is-active::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 3px; border-radius: 3px; background: var(--corail);
}
.gallery-tab .g-new {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em;
  color: var(--corail-deep); border: 1px solid var(--corail); border-radius: 999px;
  padding: 1px 6px; text-transform: uppercase;
}

/* no card wrapper — the mockup sits open in the column */
.gallery-stage {
  color: var(--ink);
  padding: 4px 0;
  min-height: 360px;
}
.gallery-meta { margin-bottom: 22px; }
.gallery-idx { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-cyan-deep); }
.gallery-name { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 2vw, 1.65rem); margin: 8px 0 8px; letter-spacing: -0.005em; }
.gallery-desc { font-size: 15px; color: var(--muted); margin: 0; max-width: 52ch; }
.gallery-mock {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  animation: fade-up 0.4s var(--ease);
}

/* ----------------------------------------------------------------- film */
/* Transparent at the seam so the hero's own glow — one element, now unclipped —
   carries through, then the grey band fades in over it. No second gradient
   here: a painted copy reads as a separate halo, and it can't track the drift
   animation on the real one. */
.section-soft.film-sec {
  background: linear-gradient(180deg, transparent 0, var(--paper) 340px);
}
.film-sec .sec-head { text-align: center; margin-inline: auto; }
.film {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 50px 100px -40px rgba(0,0,0,0.7);
}
.film video { width: 100%; height: 100%; object-fit: cover; }
.film-play {
  position: absolute;
  left: 24px; bottom: 24px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: rgba(12,12,20,0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 10px 20px 10px 10px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.2s;
}
.film-play:hover { transform: scale(1.03); background: rgba(12,12,20,0.85); }
.film-disc {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--corail);
  display: grid; place-items: center;
}
.film-disc svg { width: 13px; height: 15px; color: #fff; margin-left: 2px; }
.film-txt { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.film-txt b { font-size: 15px; }
.film-txt i { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.film.is-playing .film-play { opacity: 0; pointer-events: none; transition: opacity 0.3s; }

/* --------------------------------------------------------------- founder */
.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.quote-lead { margin: 34px 0 0; }
.quote-lead blockquote {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  letter-spacing: -0.005em;
  color: var(--corail-deep);
  margin: 0;
}
.quote-lead figcaption { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.portrait {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  overflow: hidden; position: relative; flex-shrink: 0;
}
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote-lead figcaption b { display: block; font-size: 15px; }
.quote-lead figcaption i { font-style: normal; font-size: 13px; color: var(--muted); }

.stats { margin: 0; display: flex; flex-direction: column; gap: 30px; text-align: right; }
.stats div { border-right: 3px solid var(--corail); padding-right: 20px; }
.stats dt { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.stats dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------------- reviews */
.mini-stats { display: flex; gap: 34px; margin: 0; }
.mini-stats dd { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -0.02em; }
.mini-stats dt { font-size: 12px; color: var(--muted); }
.marquee {
  margin-top: 52px;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* The loop shifts by exactly one set of cards (--shift, measured in JS) so
   the seam is invisible. It deliberately avoids `gap`: with gap, the track's
   50% is not the width of one set (n cards have n-1 gaps), so the old
   -50% loop jumped ~11px every cycle. The spacing lives on .quote's
   margin-right instead, making every card slot a uniform width. */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-roll var(--roll, 46s) linear infinite;
  will-change: transform;
}
@keyframes marquee-roll { to { transform: translateX(calc(-1 * var(--shift, 50%))); } }
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.quote {
  width: 380px; flex-shrink: 0;
  padding: 28px 30px;
  border-left: 2px solid var(--corail);
  margin: 0 22px 0 0;
}
.quote .stars { color: var(--corail-deep); font-size: 14px; letter-spacing: 2px; margin: 0 0 12px; }
.quote blockquote { margin: 0 0 16px; font-size: 15.5px; line-height: 1.55; }
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.quote .av {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 13px; font-family: var(--mono);
  flex-shrink: 0;
}
.quote figcaption b { display: block; font-size: 14px; }
.quote figcaption i { font-style: normal; font-size: 12.5px; color: var(--muted); }

/* --------------------------------------------------------------- tarifs
   Two standalone cards rather than one split band: the pushed plan carries a
   2px brand ring and overhangs the grid line, so it reads first at a glance. */
.price-cards {
  --price-pad: clamp(26px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 900px;
  margin-inline: auto;
}
.price-card {
  display: flex;
  flex-direction: column;
  padding: var(--price-pad);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.price-card.is-feature {
  background: var(--tint);
  border: 2px solid var(--primary);
  box-shadow: var(--shadow);
  /* the Tailwind-style overhang: same content, taller card */
  margin-block: -14px;
}
/* the pushed plan sets its price larger, so let the CTAs meet at the bottom
   instead of drifting apart by the height difference */
.price-card .btn-block { margin-top: auto; }
.price-card.is-feature .btn-solid { background: var(--corail); }
.price-card.is-feature .btn-solid:hover { background: var(--ink); color: #fff; }

/* plan name left, badge right — the card's header row */
.price-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* wraps rather than squeezing the plan name: on a tablet the name and the
     badge together exceed the narrower card */
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 18px;
  min-height: 30px;
}
.price-name { font-weight: 700; font-size: 16px; margin: 0; }
.price-card.is-feature .price-name { color: var(--primary-deep); }
.price-flag {
  flex-shrink: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
}
.price-flag svg { width: 14px; height: 14px; flex-shrink: 0; }
.price-fig { margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; }
.price-fig b { font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 4vw, 3.4rem); letter-spacing: -0.03em; line-height: 1; }
/* ink, not crimson — a red price reads as a warning on the plan we push.
   The emphasis comes from size, the tint, the tag and the solid CTA instead. */
.is-feature .price-fig b { color: var(--ink); font-size: clamp(3rem, 4.7vw, 4rem); }
.price-fig span { font-size: 15px; color: var(--muted); }
.price-note { font-size: 13px; color: var(--muted); margin: 0 0 22px; }
.price-note s { opacity: 0.6; }
.price-list { list-style: none; margin: 0 0 28px; padding: 0; }
.price-list li { font-size: 14.5px; padding-left: 26px; position: relative; margin-bottom: 11px; color: var(--ink-2); }
.price-list li::before {
  content: "✓"; position: absolute; left: 0; color: var(--corail-deep); font-weight: 700;
}
.price-fine { font-size: 13px; color: var(--muted); text-align: center; margin: 24px auto 0; max-width: 900px; }

/* ------------------------------------------------------------------ faq */
.faq { border-top: 1px solid var(--line); max-width: 840px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: none;
  border: 0;
  padding: 24px 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.32rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
}
.faq-x { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-x::before, .faq-x::after {
  content: ""; position: absolute; background: var(--corail); border-radius: 2px;
  transition: transform 0.3s var(--ease);
}
.faq-x::before { left: 0; top: 8px; width: 18px; height: 2px; }
.faq-x::after { left: 8px; top: 0; width: 2px; height: 18px; }
.faq-q[aria-expanded="true"] .faq-x::after { transform: rotate(90deg); opacity: 0; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease); }
.faq-a p { margin: 0; padding: 0 0 24px; color: var(--ink-2); font-size: 15.5px; max-width: 62ch; }

/* --------------------------------------------------------------- contact */
.contact { text-align: center; }
.contact-inner { max-width: 620px; margin-inline: auto; }
.contact .sec-lede { margin-inline: auto; }
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}
.contact-mail { font-size: 16px; letter-spacing: 0.01em; }
.contact-ic { width: 18px; height: 18px; flex-shrink: 0; }
.contact-fine { font-size: 13px; color: var(--muted); margin: 16px 0 0; }

/* ---------------------------------------------------------------- final
   No colour field: the close sits on white between two grey bands, so it
   reads as its own moment on type and space alone. */
.final { text-align: center; padding-block: calc(var(--sec-pad) * 1.12); }
.final-inner { max-width: 640px; margin-inline: auto; }
.final-bot { display: block; width: 72px; height: auto; margin: 0 auto 22px; }
.final-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
/* gradient only on the second line — blue→magenta, legible on white */
.final-title em {
  font-style: normal;
  color: var(--primary);
  background: linear-gradient(90deg, #0d8fce 0%, #923fc0 52%, #fa3582 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.final-sub { color: var(--muted); font-size: 17px; margin: 20px auto 32px; max-width: 48ch; }

/* --------------------------------------------------------------- footer */
.footer { background: var(--paper); border-top: 1px solid var(--line); padding-block: 44px; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.footer-by { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 26px; }
.footer-nav a { font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color 0.2s; }
.footer-nav a:hover { color: var(--corail-deep); }

/* ------------------------------------------------------------- reveals -- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-cta .link-quiet { display: none; }
  .burger { display: flex; }
  /* single column: let the grid fill the space between the nav offset and
     the ticker (see .hero's flex column + min-height: 100svh) and center
     the content in it, instead of it sitting stuck near the top */
  .hero-grid { grid-template-columns: 1fr; flex: 1; align-content: center; }
  .slate { max-width: 520px; }
  .path-pane { grid-template-columns: 1fr; gap: 32px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-rail { display: none; }
  .gallery-pick { display: block; }
  .founder-grid { grid-template-columns: 1fr; }
  .stats { flex-direction: row; flex-wrap: wrap; text-align: left; gap: 24px 40px; }
  .stats div { border-right: 0; border-left: 3px solid var(--corail); padding-right: 0; padding-left: 16px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .nav-cta .btn { padding: 11px 16px; font-size: 14px; }
  /* hero: the two large buttons eat the fold on a phone */
  .hero-actions { gap: 10px; }
  .hero-actions .btn-lg { padding: 12px 20px; font-size: 15px; }
  .sec-head-row { flex-direction: column; align-items: flex-start; }
  .mini-stats { gap: 24px; }
  /* stacked: no grid line left to break, so the featured card drops its overhang */
  .price-cards { grid-template-columns: 1fr; gap: 18px; }
  .price-card.is-feature { margin-block: 0; }
  .opt-grid { grid-template-columns: 1fr; }

  /* hero: drop the exercise mock on phones — kept on tablet + desktop */
  .slate { display: none; }

  /* méthode: stacked full-width tabs instead of the sliding pill */
  .path-switch {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 0;
  }
  .path-btn {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    padding: 13px 16px;
    font-size: 14px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink-2);
  }
  .path-btn.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
  .path-ink { display: none; }
  .path-switch { margin-bottom: 26px; }
  .path-pane { gap: 24px; }

  /* the step list was built for a half-width desktop column: a 52px indent and
     20px rows read as oversized once it spans the whole phone */
  .step { padding: 15px 0 15px 34px; }
  .step::before { top: 16px; font-size: 12px; }
  .step b { font-size: 15.5px; }
  .step span { font-size: 13.5px; margin-top: 2px; }

  .stage { padding: 16px; border-radius: 14px; min-height: 0; }

  .quote { width: 300px; padding: 22px; }
  .film-play { left: 14px; bottom: 14px; padding: 8px 16px 8px 8px; }
  .film-txt i { display: none; }
}