/* Relaxe: hand-drawn capitals for the hero title and section titles.
   It has no accented letters, so É shows as E. */
@font-face {
  font-family: "Relaxe";
  src: url("../assets/fonts/Relaxe.woff2") format("woff2"),
       url("../assets/fonts/Relaxe.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #1a47ff;
  --blue-light: #4c78ff;
  --blue-deep: #0b2bd9;
  --orange: #ff8a1f;
  --orange-light: #ffa347;
  --orange-deep: #ff7300;
  --orange-text: #b84f00;
  --cta: #d7ff3f;          /* every call-to-action button */
  --cta-light: #e6ff85;
  --cta-deep: #bfea1f;  /* orange dark enough for small text on white/cream */
  --night: #0a1440;
  --cream: #fff4e6;
  --white: #ffffff;

  --font-title: "Relaxe", Impact, "Haettenschweiler", sans-serif;  /* hero H1 and titles */
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --gutter: clamp(16px, 5vw, 72px);

  /* Type scale (section titles stay well below the hero title) */
  --fs-h2: clamp(2.5rem, 1.5rem + 3.6vw, 5.25rem);        /* 40 -> 84px */
  --fs-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);     /* 20 -> 26px */
  --fs-lead: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);    /* 18 -> 22px */

  /* Vertical rhythm, on an 8 px grid: sections breathe, each one reads
     as a whole screen on a laptop */
  --space-section: clamp(96px, 10vw, 168px); /* top and bottom of a section */
  --space-title: clamp(20px, 2.2vw, 32px);   /* title -> intro text */
  --space-block: clamp(48px, 6vw, 96px);     /* section header -> content */
  --header-h: 88px;
  --round: clamp(24px, 4vw, 56px);  /* rounded top of each section */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
  margin: 0;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain over the whole site, echoing the textured 3D avatar */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* Selected text: blue on light backgrounds, lime on blue and navy ones */
::selection { background: var(--blue); color: var(--white); }

.problem ::selection,
.results ::selection,
.about ::selection,
.cta ::selection,
.offer--coaching ::selection,
.tpf ::selection { background: var(--cta); color: var(--night); }

/* white cards sitting on blue keep the blue selection */
.result ::selection,
.cta__card ::selection,
.pack ::selection { background: var(--blue); color: var(--white); }

/* Keyboard-only shortcut past the header, visible when focused */
.skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--night);
  font-weight: 700;
  translate: 0 -200%;
  transition: translate 0.3s var(--ease-out);
}

.skip:focus-visible { translate: 0 0; outline: 2px solid var(--white); outline-offset: 2px; }

/* Sections focused by anchor links don't need a visible ring */
[tabindex="-1"]:focus { outline: none; }

/* Lenis smooth scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  /* hover uses translate/scale, not transform: the scroll animations drive transform */
  transition: translate 0.3s var(--ease-out), scale 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background-color 0.3s;
}

.btn:hover { translate: 0 -2px; }
.btn:active { translate: 0 0; scale: 0.98; }

/* Call to action: a specular button (js/specular.js) in lime, navy text,
   with a line of white light round the rim that follows the cursor.
   --sb-line is the light, --sb-base the hairline. */
.btn--cta,
.pill-cta {
  --sb-line: #ffffff;
  --sb-base: #9cc21c;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--cta-light), var(--cta) 45%, var(--cta-deep));
  color: var(--night);
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px -12px rgba(120, 160, 0, 0.6);
}

.btn--cta:hover,
.pill-cta:hover { box-shadow: 0 16px 30px -12px rgba(120, 160, 0, 0.75); }

.btn--lg { padding: 17px 30px; font-size: 16px; }

.sb { position: relative; isolation: isolate; }

/* the light is drawn on a canvas a little larger than the button, under its label */
.sb__light {
  position: absolute;
  inset: -24px;
  z-index: -1;
  display: block;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  pointer-events: none;
}

.btn:focus-visible,
.nav__link:focus-visible,
.brand:focus-visible,
.logo:focus-visible,
.burger:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* ---------- Header ---------- */

/* Transparent over the hero, frosted white once the page scrolls */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--gutter);
  color: var(--night);
  transition: background-color 0.4s, box-shadow 0.4s, backdrop-filter 0.4s;
}

.header.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(10, 20, 64, 0.08);
}

/* Profile pill: avatar, name, check badge */
/* the logo: a drawing of Léo and his name, in navy */
.brand {
  display: inline-flex;
  align-items: center;
  transition: translate 0.3s var(--ease-out);
}

.brand:hover { translate: 0 -1px; }

.brand__logo { display: block; height: 58px; width: auto; }

.logo {
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.03em;
}

.logo span { color: var(--orange); }

.header__right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav {
  display: flex;
  gap: 28px;
}

.nav__link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(10, 20, 64, 0.72);
  transition: color 0.3s;
}

.nav__link:hover,
.nav__link.is-active { color: var(--blue); }

.header__cta {
  padding: 11px 20px;
  font-size: 14px;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(10, 20, 64, 0.25);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  position: relative;
}

.burger span {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 2px;
  background: var(--night);
  border-radius: 2px;
  transition: transform 0.4s var(--ease-out);
}

.burger span:first-child { top: 17px; }
.burger span:last-child { top: 24px; }

.header.is-open .burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.header.is-open .burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- Hero ---------- */

/* One full screen, plus the strip the next section slides over: that
   section only shows once you scroll */
.hero {
  position: relative;
  height: calc(100vh + var(--round));
  height: calc(100svh + var(--round));
  min-height: calc(680px + var(--round));
  overflow: hidden;
  background: var(--white);
  color: var(--night);
}

.js .hero { visibility: hidden; }

.hero__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Two lines of Impact; the second one bigger so both run the same width */
.hero__ring {
  position: absolute;
  border: 1px solid rgba(26, 71, 255, 0.16);
  border-radius: 50%;
}

.hero__ring--1 { width: 560px; height: 560px; left: -260px; top: 4%; }
.hero__ring--2 { width: 900px; height: 900px; left: -520px; top: 18%; }
.hero__ring--3 { width: 520px; height: 520px; right: -220px; top: 34%; }
.hero__ring--4 { width: 760px; height: 760px; right: -420px; top: 26%; }

.hero__heading {
  margin: 0;
  /* clear of the header, with some air above the title; on wide but tall
     screens (where the character is capped by the width) the title comes
     down to sit just above his head (title block ~ 13vw tall) */
  padding-top: max(
    calc(var(--header-h) + clamp(16px, 4vh, 48px)),
    calc(100svh + var(--round) - min(76vh, 46vw) - 13vw - 16px)
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-title);
  font-weight: 400;
  line-height: 0.92;
  text-transform: uppercase;
  text-align: center;
}

.hero__heading .line { white-space: nowrap; }

.hero__line1 {
  font-size: clamp(34px, 5.1vw, 92px);
  color: var(--night);
}

.hero__line2 {
  font-size: clamp(56px, 8.5vw, 154px);
  color: var(--blue);
}

.hero__char {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: min(76vh, 46vw);  /* the width cap keeps text and button clear of him */
  aspect-ratio: 883 / 900;
  /* the face sits at ~38% of the frame width: center it, the shoulder goes right */
  transform: translateX(-38%);
}

.hero__char-in {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__intro,
.hero__ctas {
  position: absolute;
  /* clear of the next section, which slides over the hero's bottom edge */
  bottom: calc(clamp(24px, 6vh, 64px) + var(--round));
  z-index: 2;
}

.hero__intro {
  left: var(--gutter);
  max-width: 330px;
}

.hero__ctas {
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.badge {
  display: inline-block;
  margin: 0 0 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--night);
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
  /* one line: it may run past the intro block, nothing sits to its right */
  white-space: nowrap;
}

.hero__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(10, 20, 64, 0.78);
}

/* white label asked for this button */


.hero .btn:focus-visible { outline-color: var(--blue); }

/* ---------- Shared ---------- */

/* Sections stack like sheets: each one slides a little over the one before,
   with rounded top corners and a soft shadow, so the colour changes are
   smooth. Each section runs on under the next one's corners to fill them. */
main > section + section {
  position: relative;
  margin-top: calc(-1 * var(--round));
  border-radius: var(--round) var(--round) 0 0;
  box-shadow: 0 -18px 40px -28px rgba(10, 20, 64, 0.35);
}

main > section:not(.hero):not(:last-child) {
  padding-bottom: calc(var(--space-section) + var(--round));
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Problem ---------- */

.problem {
  position: relative;
  background: var(--night);
  color: var(--cream);
  padding: var(--space-section) 0;
}

.problem__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: 0.01em;
}

/* Mask for the rising title lines; the top padding keeps accents (É) visible */
.line {
  display: block;
  overflow: hidden;
  padding: 0.14em 0 0.04em;
  margin-top: -0.14em;
}

.line > span { display: inline-block; }

/* words of the intro paragraphs, revealed one by one (js/main.js) */
.w { display: inline-block; }

.problem__accent { color: var(--cta); }

.problem__lead {
  max-width: 560px;
  margin: var(--space-title) 0 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: rgba(255, 244, 230, 0.75);
}

.pains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: var(--space-block) 0 0;
  padding: 0;
  list-style: none;
}

/* Feature cards: soft colour glow, index top left, avatar in the middle,
   frosted text panel at the bottom. On hover the card lifts and Léo pops up. */
.pain {
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(10, 20, 64, 0.08);
  box-shadow: 0 1px 2px rgba(10, 20, 64, 0.08);
  transition: translate 0.6s var(--spring), box-shadow 0.4s;
}

.pain--orange { --c: var(--orange-text); --c-light: #ffd2a3; --c-pale: #fff4e6; }
.pain--blue { --c: var(--blue); --c-light: #bccbff; --c-pale: #eef2ff; }
.pain--night { --c: var(--night); --c-light: #d6dcff; --c-pale: #eef0fa; }

.pain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, var(--c-light) 0%, transparent 70%);
  opacity: 0.55;
}

.pain:hover {
  translate: 0 -10px;
  box-shadow: 0 24px 40px -12px rgba(0, 0, 0, 0.45);
}

.pain__num {
  position: absolute;
  top: 20px;
  left: 22px;
  z-index: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
  font-weight: 700;
  color: rgba(10, 20, 64, 0.6);
}

/* The three Léo match: each head (hair to chin) is 100 px and its top sits
   on the same line in every card. The image area has one height for all,
   so the text panels start level; the shortest pose (03) still reaches
   just behind its panel, so no cut shows.
   --u is 1px, or less when the card is too narrow for the widest pose
   (03, 265.5 px), so all three shrink together. */
.pain {
  container-type: inline-size;
  --u: min(1px, 100cqw / 265.5);
}

.pain__visual {
  position: relative;
  flex: none;
  height: calc(187 * var(--u));
  padding-top: calc(24 * var(--u));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transition: transform 0.6s var(--spring);
}

.pain__visual img {
  flex: none;
  width: auto;
  height: calc(var(--h, 210) * var(--u));
  /* soften the bottom of the bust as it goes behind the panel */
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}

.pain--blue .pain__visual img { --h: 179; }
.pain--night .pain__visual img { --h: 171; }

.pain:hover .pain__visual { transform: translateY(-20px) scale(1.3); }

.pain__content {
  flex: 1;
  position: relative;
  z-index: 2;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(10, 20, 64, 0.08);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pain__tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--c-pale);
  color: var(--c);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pain__title {
  margin: 0 0 8px;
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--night);
}

.pain__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(10, 20, 64, 0.72);
}

.pain__text strong { color: var(--night); font-weight: 700; }

.pain--orange .pain__tag { background: var(--orange); color: var(--night); }

/* "Bonne nouvelle" as a phone notification */
.notif {
  display: flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  max-width: min(100%, 620px);
  margin: var(--space-block) auto 0;
  padding: 18px 28px 18px 18px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6);
}

.notif__icon {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 15px;
  object-fit: cover;
}

.notif__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--white);
}

.notif__head span {
  font-size: 13px;
  color: rgba(255, 244, 230, 0.6);
}

.notif__text {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.4;
  color: rgba(255, 244, 230, 0.85);
}

.notif__text strong { color: var(--cta); font-weight: 700; }

/* on a computer the notification hovers gently once it has landed
   (translate, so it adds to the drop-in animation's transform) */
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
  .notif { animation: float 4.5s ease-in-out infinite; }
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

/* ---------- Offers ---------- */

section[id] { scroll-margin-top: var(--header-h); }


.offers {
  background: var(--white);
  color: var(--night);
  padding: var(--space-section) 0;
}

.offers__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.offers__accent { color: var(--blue); }

/* a wider container: the coaching card holds two columns */
.offers .container { max-width: 1440px; }

.offers__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(20px, 2.5vw, 36px);
  margin-top: var(--space-block);
  perspective: 1200px;
}

.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.2vw, 36px);
  border-radius: 32px;
  transform-style: preserve-3d;
  will-change: transform;
}

.offer--audit {
  background: var(--white);
  border: 1px solid rgba(10, 20, 64, 0.08);
  box-shadow: 0 2px 6px rgba(10, 20, 64, 0.04), 0 40px 80px -36px rgba(10, 20, 64, 0.3);
}

/* a light gradient, brighter at the top, with a soft swoosh in the corner */
.offer--coaching {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(165deg, #3463ff 0%, #1b49ff 45%, #1238d8 100%);
  color: var(--white);
  box-shadow: 0 40px 80px -40px rgba(27, 73, 255, 0.7);
}

/* ---- Holographic foil on the coaching card ----
   A .holo layer holds four spans: sheen, glitter, glare and edge.
   --mx / --my (0 to 100) place the light; --holo fades the whole foil.
   Each card sets how strong each layer is and how it blends with what is
   under it. */
:root {
  --rainbow: linear-gradient(115deg,
    hsl(0 100% 82%), hsl(45 100% 78%), hsl(110 85% 78%), hsl(185 100% 76%),
    hsl(235 100% 84%), hsl(300 100% 84%), hsl(0 100% 82%), hsl(45 100% 78%),
    hsl(110 85% 78%), hsl(185 100% 76%));
}

/* Coaching card: the foil sits under the text and blends with the blue.
   Without a cursor it rests half lit; with one it lights up on hover. */
.offer--coaching {
  --mx: 50;
  --my: 30;
  --holo: 0.4;
  --sheen: 0.6;
  --sheen-blend: soft-light;
  --glitter: 0.55;
  --glitter-blend: screen;
  --glare: 0.55;
  --edge: 0.45;
}

.offer--coaching.has-pointer { --holo: 0; }
.offer--coaching.has-pointer:hover { --holo: 1; }

/* content sits above the foil */
.offer--coaching > :not(.holo, .offer__badge) { position: relative; z-index: 1; }
.offer--coaching .offer__badge {
  position: absolute;
  top: -20px;
  right: clamp(20px, 3vw, 40px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 20px 10px 16px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--night);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  rotate: 4deg;
  box-shadow: 0 10px 20px -8px rgba(255, 115, 0, 0.7);
}

.offer__badge img {
  width: 24px;
  height: 24px;
  margin: -4px 0 -2px;
}

.offer__step {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-text);
}

/* short rule under the label */
.offer__step::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 12px;
  border-radius: 3px;
  background: rgba(26, 71, 255, 0.18);
}

/* the audit label is a lime pill, shaded like the call-to-action buttons */
.offer--audit .offer__step {
  align-self: flex-start;
  padding: 9px 16px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cta-light), var(--cta) 45%, var(--cta-deep));
  color: var(--night);
  font-size: 14px;
  box-shadow: inset 0 -2px 0 rgba(60, 80, 0, 0.16), 0 8px 18px -10px rgba(120, 160, 0, 0.55);
}

.offer--audit .offer__step::after { display: none; }

.offer--coaching .offer__step { color: var(--white); }

/* a soft reflection sweeps across the blue card every few seconds */
.offer--coaching::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 44%, rgba(255, 255, 255, 0.14) 49%, rgba(255, 255, 255, 0.05) 52%, transparent 56%) no-repeat;
  background-size: 300% 100%;
  animation: card-sheen 7s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

@keyframes card-sheen {
  0% { background-position: 100% 0; }
  32%, 100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .offer--coaching::after { animation: none; opacity: 0; }
}
.offer--coaching .offer__step::after { background: rgba(255, 255, 255, 0.55); }

.offer__name {
  margin: 16px 0 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 1.5vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
}

.offer__dot { color: var(--cta); }
/* lime alone vanishes on the white audit card: a navy outline keeps it seen */
.offer--audit .offer__dot { -webkit-text-stroke: 1.5px var(--night); paint-order: stroke fill; }

.offer__accent { color: var(--cta); }

.offer__for {
  margin: 14px 0 0;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.45;
  color: rgba(10, 20, 64, 0.62);
}

.offer--coaching .offer__for {
  max-width: 34em;
  color: var(--white);
  font-weight: 600;
  font-size: 17px;
}

.offer__desc {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(10, 20, 64, 0.62);
}

.offer__list {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.45;
}

.offer__list li {
  position: relative;
  padding-left: 42px;
}

/* Check mark drawn in CSS, grey in a pale grey disc */
.offer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eef0f5;
}

.offer__list li::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #6b7189;
  border-width: 0 2.5px 2.5px 0;
  rotate: 40deg;
}

/* Coaching: what's in it on the left, the Pack Pro on the right */
.offer__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(20px, 2.5vw, 36px);
  margin-top: 22px;
}

.features {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.feature__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--white);
  color: #1b49ff;
  box-shadow: 0 8px 18px -10px rgba(5, 10, 60, 0.6);
}

.feature__icon svg,
.pack__icon svg,
.btn__arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature__icon svg { width: 20px; height: 20px; }

.pack {
  position: relative;
  padding: 28px 18px 18px;
  border-radius: 22px;
  background: var(--white);
  color: var(--night);
  rotate: -2deg;
  box-shadow: 0 30px 60px -24px rgba(5, 10, 50, 0.55);
}

/* hand-drawn arrow from the list to the pack */
.pack__arrow {
  position: absolute;
  left: -40px;
  top: -34px;
  width: 44px;
  fill: none;
  stroke: var(--cta);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;  /* paths use pathLength="1", so the arrow can draw itself */
  rotate: 2deg;
}

.pack__tag {
  position: absolute;
  top: -14px;
  left: 20px;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--night);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pack__gift {
  position: absolute;
  top: -38px;
  right: 2px;
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 10px 12px rgba(5, 10, 50, 0.35));
}

.pack__name {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
}

.pack__text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(10, 20, 64, 0.65);
}

.pack__value {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--night);
}

.pack__value strong { font-weight: 800; color: var(--blue); }

.pack__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.pack__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 5px 5px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid rgba(10, 20, 64, 0.08);
  box-shadow: 0 6px 12px -10px rgba(10, 20, 64, 0.35);
  font-size: 14px;
  font-weight: 700;
}

.pack__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
}

.pack__icon svg { width: 17px; height: 17px; }

.pack__icon--vfx { background: #8b5cf6; }
.pack__icon--sound { background: #f43f7a; }
.pack__icon--texture { background: #f5a800; }
.pack__icon--typo { background: #2563eb; }
.pack__icon--template { background: #20a95a; }
.pack__icon--tips { background: var(--orange-deep); }

.offer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(10, 20, 64, 0.1);
}

.offer--coaching .offer__foot { border-top-color: rgba(255, 255, 255, 0.25); }

.offer__price {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  letter-spacing: -0.03em;
}

/* 03: the Pack Pro alone, for those who don't take the coaching: a navy
   card under the coaching one, with what's inside and its price */
.pack-solo {
  grid-column: 2;
  margin-top: -8px;
  padding: clamp(22px, 2vw, 30px);
  border-radius: 24px;
  background: var(--night);
  color: var(--white);
  box-shadow: 0 24px 48px -26px rgba(10, 20, 64, 0.7);
}

.pack-solo__step {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cta);
}

.pack-solo__intro {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

/* what's inside: icon, name, one line on what it brings */
.pack-solo__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.pack-solo__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}

.pack-solo__list strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
}

.pack-solo__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.pack-solo__text { margin: 0; font-size: 16px; font-weight: 600; }
.pack-solo__value { color: rgba(255, 255, 255, 0.7); }
.pack-solo__text strong { margin-left: 8px; font-size: 26px; font-weight: 800; color: var(--cta); }

/* the pack's value, crossed out, before its price */
.pack-solo__was {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-decoration-thickness: 2px;
}

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

/* the default blue focus ring would vanish on navy */
.pack-solo .btn:focus-visible { outline-color: var(--white); }

/* the default blue focus ring would vanish on the blue card */
.offer--coaching .btn:focus-visible { outline-color: var(--white); }

.btn__arrow {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
  transition: translate 0.3s var(--ease-out);
}

.btn:hover .btn__arrow { translate: 3px 0; }

.offers__note {
  margin: var(--space-block) 0 0;
  text-align: center;
  font-size: 18px;
}

.offers__note a {
  font-weight: 700;
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------- Results ---------- */

.results {
  position: relative;
  isolation: isolate;
  background: var(--blue);
  color: var(--white);
  padding: var(--space-section) 0;
  overflow: hidden;
}

.results > .container { position: relative; z-index: 1; }

/* Background wall of videos: tilted columns scrolling up and down,
   barely visible, fading out at the top and bottom of the section */
.results__wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 1200px;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 160px, #000 calc(100% - 160px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 160px, #000 calc(100% - 160px), transparent);
}

/* oversized so the tilted wall still fills every corner of the section */
.results__wall-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%) rotateX(20deg) rotateY(-10deg) rotateZ(20deg);
}

.results__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.results__accent { color: var(--cta); }

.results__lead {
  margin: var(--space-title) 0 0;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.8);
}

/* Stats: key figure on top, screenshot as proof below */
/* 4 columns on desktop (headline card spans 2), 2 on tablets, 1 on phones */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin: var(--space-block) 0 0;
}

.result {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(16px, 1.6vw, 22px);
  border-radius: 22px;
  background: var(--white);
  color: var(--night);
  box-shadow: 0 30px 60px -36px rgba(5, 10, 40, 0.6);
  position: relative;
  transition: scale 0.5s var(--ease-out), box-shadow 0.5s ease;
}

.result--dark { background: #0d1117; color: var(--white); }

/* Hover: the card grows a little */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .result:hover {
    scale: 1.03;
    box-shadow: 0 40px 70px -34px rgba(5, 10, 40, 0.7);
    z-index: 2;
  }
}

/* Headline result: two columns wide, figure beside the screenshot */
.result--wide {
  grid-column: span 2;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(16px, 2vw, 28px);
}

.result--wide .result__head {
  flex: 0 0 38%;
  justify-content: center;
}

.result--wide .result__num { font-size: clamp(2.75rem, 2rem + 2.4vw, 4.25rem); }

.result--wide .result__label { font-size: 15px; }

.result--wide .result__shot {
  margin-top: 0;
  padding-top: 0;
  padding-left: clamp(16px, 2vw, 28px);
  border-top: 0;
  border-left: 1px solid rgba(10, 20, 64, 0.08);
}

.result--wide .result__shot img { max-height: 260px; }

.result__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.result__num {
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.result--dark .result__num { color: var(--orange); }

.result__label {
  font-size: 14px;
  line-height: 1.35;
  color: rgba(10, 20, 64, 0.7);
}

.result--dark .result__label { color: rgba(255, 255, 255, 0.7); }

/* Screenshots share one visual height so the four cards feel even */
.result__shot {
  flex: 1;
  display: grid;
  place-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(10, 20, 64, 0.08);
}

.result--dark .result__shot { border-top-color: rgba(255, 255, 255, 0.1); }

.result__shot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
}

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: auto; }
  .result__shot img { max-height: 220px; }
}

/* Phones: one card per row */
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; max-width: 420px; }
  .result__shot img { max-height: 200px; }

  .result--wide { grid-column: auto; flex-direction: column; gap: 0; }
  .result--wide .result__head { flex: none; }
  .result--wide .result__num { font-size: clamp(2.25rem, 1.6rem + 3vw, 2.75rem); }
  .result--wide .result__shot {
    margin-top: 14px;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(10, 20, 64, 0.08);
  }
  .result--wide .result__shot img { max-height: 220px; }

  /* the section is tall and narrow: a gentler tilt keeps the wall covering it */
  .results__wall-canvas {
    width: 260%;
    height: 140%;
    transform: translate(-50%, -50%) rotateX(12deg) rotateY(-8deg) rotateZ(8deg);
  }
}

/* ---------- Method ---------- */

/* Léo in the middle, the 4 steps around him (2 left, 2 right) with arrows
   coming out of the picture, the call to action under him */
/* a pale grey, so the pure white offers section below stands apart */
.method {
  --method-bg: #f2f4f9;
  background: var(--method-bg);
  color: var(--night);
  padding: var(--space-section) 0;
  overflow: hidden;
}

.method__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-align: center;
}

.method__accent { color: var(--blue); }

/* a wider stage than the other sections, so Léo gets room in the middle */
.method .container { max-width: 1440px; }

.method__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr);
  grid-template-areas:
    "s1 visual s2"
    "s3 visual s4"
    ".  cta    .";
  align-items: center;
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: clamp(24px, 3vw, 40px);
  margin-top: var(--space-block);
}

.method__visual {
  grid-area: visual;
  margin: 0;
  justify-self: center;
  width: min(100%, 620px);
  /* the reveal animation isolates the figure, so it carries the section colour
     itself for the photo to multiply with */
  background: var(--method-bg);
}

/* the photo has a white background: multiply makes it vanish into the section */
.method__visual img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.steps { display: contents; margin: 0; padding: 0; list-style: none; }

.step {
  position: relative;
  max-width: 300px;
}

.step--1 { grid-area: s1; justify-self: end; }
.step--2 { grid-area: s2; }
.step--3 { grid-area: s3; justify-self: end; }
.step--4 { grid-area: s4; }

.step__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--night);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
}

.step__name {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.step__text {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(10, 20, 64, 0.72);
}

/* Curved arrows between the picture and each step */
.step__arrow {
  position: absolute;
  top: 50%;
  width: clamp(70px, 7vw, 110px);
  height: auto;
  translate: 0 -50%;
  overflow: visible;
}

.step__arrow path {
  fill: none;
  stroke: var(--blue);  /* the same blue as "toutes les clés" */
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step--1 .step__arrow,
.step--3 .step__arrow { left: calc(100% + 8px); }

.step--2 .step__arrow,
.step--4 .step__arrow { right: calc(100% + 8px); scale: -1 1; }

.pill-cta {
  grid-area: cta;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  font-size: 18px;
  transition: translate 0.3s var(--ease-out), box-shadow 0.3s;
}

.pill-cta:hover { translate: 0 -2px; box-shadow: inset 0 -3px 0 rgba(60, 80, 0, 0.18), 0 18px 36px -10px rgba(120, 160, 0, 0.75); }
.pill-cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Tablets: picture and button on top, steps in a 2 x 2 grid, no arrows */
@media (max-width: 1100px) {
  .method__stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "visual visual"
      "cta    cta"
      "s1     s2"
      "s3     s4";
    row-gap: clamp(28px, 4vw, 40px);
  }

  .method__visual { width: min(100%, 440px); }
  .step { max-width: none; justify-self: stretch !important; }
  .step__arrow { display: none; }
}

/* Phones: one column */
@media (max-width: 640px) {

  .method__stage {
    grid-template-columns: 1fr;
    grid-template-areas: "visual" "s1" "s2" "s3" "s4" "cta";
  }

  /* after the four steps, a little apart from them */
  .pill-cta { margin-top: 8px; }
}

/* ---------- About ---------- */

.about {
  background: var(--night);
  color: var(--cream);
  padding: var(--space-section) 0;
  overflow: hidden;
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(48px, 7vw, 120px);
}

/* The portrait: Léo sits on one orange card, his legs over its front and his
   shoes past its bottom edge, so he seems to step out of it.
   Positions are in % of the figure (width W, height 1.52 W). The photo is
   92% of W wide (1.5 W tall); its seat is 60% down the picture. */
.about__portrait {
  position: relative;
  width: min(100%, 520px);
  justify-self: center;
  margin: 0;
  aspect-ratio: 25 / 38;
  rotate: -2deg;
}

/* the card starts at his seat and stops halfway down his shoes */
.about__seat {
  position: absolute;
  top: 59.3%;
  left: 0;
  right: 0;
  height: 27.5%;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffb35c, var(--orange) 22%, var(--orange-deep));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), 0 30px 50px -24px rgba(0, 0, 0, 0.6);
}

/* where he sits: a dark contact shadow pressed into the top of the card,
   and a lit rim along its top edge */
.about__seat::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 8%;
  top: -4%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(70, 18, 0, 0.65), rgba(70, 18, 0, 0.25) 55%, transparent);
  filter: blur(4px);
}

.about__seat::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 18%;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(rgba(255, 255, 255, 0.35), transparent);
}

/* the floor under each shoe, right at its sole (the left sole sits at 93%
   of the figure, the right one at 98.6%), so his feet land somewhere */
/* the box runs well past the figure so the pool of light fades out to
   nothing before any edge: no cut line */
.about__ground {
  position: absolute;
  inset: 0 -15% -20%;
  pointer-events: none;
  /* a faint pool of light on the floor, for the shadows to fall on */
  background: radial-gradient(42% 10% at 50% 82%, rgba(120, 145, 255, 0.26), transparent 100%);
}

.about__ground::before,
.about__ground::after {
  content: "";
  position: absolute;
  height: 4.5%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.25) 60%, transparent);
  filter: blur(4px);
}

.about__ground::before { left: 17.6%; width: 31%; top: 75.8%; height: 3.75%; }
.about__ground::after { left: 52.3%; width: 31%; top: 80.3%; height: 3.75%; }

.about__leo {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 4%;
  width: 92%;
  max-width: none;
  height: auto;
  filter: drop-shadow(8px 14px 18px rgba(0, 0, 0, 0.35));
}

/* hand-drawn marks: a little spark by his head, an arrow to the tag */
.about__spark,
.about__arrow {
  position: absolute;
  fill: none;
  stroke: var(--white);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about__spark { top: 3%; left: 66%; width: 11%; }
.about__arrow { top: 74%; left: 2%; width: 7%; z-index: 2; }

.about__tag {
  position: absolute;
  z-index: 2;
  left: -6%;
  top: 64%;
  display: grid;
  padding: 12px 22px 12px 18px;
  border-radius: 18px;
  background: var(--white);
  color: var(--night);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  rotate: 5deg;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
}

.about__tag strong { font-size: 22px; font-weight: 800; letter-spacing: 0; line-height: 1.1; }

/* above the bio, in the text column: each sentence starts its own line */
.about__title {
  margin: 0 0 clamp(24px, 2.5vw, 36px);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 1.6vw, 2.75rem);
  line-height: 1.04;
  color: var(--white);
  letter-spacing: 0.01em;
}

.about__accent { color: var(--cta); }

.about__text {
  margin-top: 0;
  max-width: 620px;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: rgba(255, 244, 230, 0.8);
}

.about__text p { margin: 0 0 1em; }
.about__text p:last-child { margin-bottom: 0; }

/* the key points stand out in lime */
.about__text strong { color: var(--cta); font-weight: 700; }

/* closing question: an invitation to book */
.about__ask {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(215, 255, 63, 0.5);
  background: rgba(215, 255, 63, 0.08);
  color: var(--cta);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  transition: background-color 0.3s, border-color 0.3s;
}

.about__ask:hover { background-color: rgba(215, 255, 63, 0.16); border-color: var(--cta); }

/* the invitation hovers gently, to catch the eye */
@media (prefers-reduced-motion: no-preference) {
  .about__ask { animation: float 3.6s ease-in-out infinite; }
}
.about__ask:hover .btn__arrow { translate: 3px 0; }
.about__ask .btn__arrow { flex: none; }

.about__ask:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; }

/* ---------- FAQ ---------- */

.faq {
  background: var(--white);
  color: var(--night);
  padding: var(--space-section) 0;
}

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.faq__title {
  position: sticky;
  top: calc(var(--header-h) + 48px);
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.faq__accent { color: var(--blue); }

/* Chat: each question is a grey bubble, tinted blue once open; the answer
   arrives as Léo's blue bubble just under it */
.chat { max-width: 820px; }

.chat__stamp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  font-size: 15px;
  color: rgba(10, 20, 64, 0.6);
}

.chat__stamp img { width: 34px; height: 34px; border-radius: 50%; background: var(--orange); }

.chat__item { margin-bottom: 14px; }

.chat__head { margin: 0; font: inherit; }

.chat__q {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.chat__bubble {
  position: relative;
  padding: 15px 22px;
  border-radius: 18px;
  background: #eef0f6;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  line-height: 1.35;
  transition: background-color 0.3s, color 0.3s;
}

.chat__q:hover .chat__bubble { background: rgba(26, 71, 255, 0.1); }

.chat__q[aria-expanded="true"] .chat__bubble { background: rgba(26, 71, 255, 0.16); color: var(--blue); }

.chat__q:focus-visible { outline: none; }
.chat__q:focus-visible .chat__bubble { outline: 2px solid var(--blue); outline-offset: 3px; }

/* a little 3D sticker on the corner of some bubbles */
.chat__icon { position: absolute; bottom: calc(100% - 16px); width: 36px; height: auto; }
.chat__icon--right { right: -6px; rotate: 7deg; }
.chat__icon--left { left: -8px; rotate: -4deg; }

/* plus that turns into a minus */
.chat__toggle {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  color: rgba(10, 20, 64, 0.45);
  transition: color 0.3s;
}

.chat__toggle::before,
.chat__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  translate: -50% -50%;
  transition: rotate 0.3s var(--ease-out);
}

.chat__toggle::after { rotate: 90deg; }
.chat__q[aria-expanded="true"] .chat__toggle { color: var(--blue); }
.chat__q[aria-expanded="true"] .chat__toggle::after { rotate: 0deg; }

/* the answer slides open: its row grows from 0 to its full height */
.chat__a {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.4s var(--ease-out), opacity 0.4s, visibility 0.4s;
}

.chat__item.is-open .chat__a { grid-template-rows: 1fr; opacity: 1; visibility: visible; }

.chat__a-inner { min-height: 0; overflow: hidden; }

.chat__answer {
  max-width: 30em;
  margin: 8px 0 6px clamp(28px, 6vw, 72px);
  padding: 15px 22px;
  border-radius: 20px 20px 20px 6px;
  background: var(--blue);
  color: var(--white);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .chat__a { transition: none; }
}

/* ---------- Final call ---------- */

.cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 50% 100%, var(--blue-light), transparent 70%),
    var(--blue);
  color: var(--night);
  padding: clamp(64px, 8vw, 112px) 0 clamp(56px, 7vw, 96px);
  text-align: center;
}

/* 3D icons floating around Léo, each on its own slow bob */
.cta__float {
  position: absolute;
  z-index: 1;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 18px 24px rgba(5, 10, 60, 0.35));
  animation: cta-float 7s ease-in-out infinite;
}

.cta__float--heart { left: 9%; top: 14%; width: clamp(72px, 9vw, 150px); --r: -14deg; }
.cta__float--bolt { right: 10%; top: 26%; width: clamp(64px, 7.5vw, 124px); --r: 12deg; animation-duration: 6s; animation-delay: -2s; }
.cta__float--flame { left: 14%; bottom: 16%; width: clamp(54px, 5.5vw, 92px); --r: -6deg; animation-duration: 8s; animation-delay: -4s; }

@keyframes cta-float {
  0%, 100% { transform: translateY(0) rotate(var(--r)); }
  50% { transform: translateY(-16px) rotate(calc(var(--r) + 6deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .cta__float { animation: none; transform: rotate(var(--r)); }
}

/* Léo's photo sets the stage: the card sits between his hands (26.5% in from
   each side, 22.6% of the width down, i.e. 40% of the photo's height) and
   his hands are drawn again on top. The stage grows if the card runs past
   the bottom of the photo. Wider than the screen on phones so the card
   between his hands stays readable. */
.cta__stage {
  --w: min(1100px, 170vw);
  position: relative;
  z-index: 2;
  width: var(--w);
  margin-left: calc((100% - var(--w)) / 2);
  aspect-ratio: 2000 / 1131;
  display: flow-root;
}

.cta__leo,
.cta__hands {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.cta__hands { z-index: 2; }

.cta__card {
  position: relative;
  z-index: 1;
  margin: 22.6% 26.5% 0;
  /* always reaches past the bottom of the photo, which is cut at the waist */
  min-height: calc(var(--w) * 0.345);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2.6vw, 36px);
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 40px 80px -30px rgba(5, 10, 60, 0.6);
}

.cta__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.75rem);
  line-height: 1;
  letter-spacing: 0.01em;
}

.cta__accent { color: var(--blue); }

.cta__text {
  margin: var(--space-title) auto 0;
  max-width: 30em;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.5;
  color: rgba(10, 20, 64, 0.68);
}

.cta__promise {
  margin: 12px 0 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  font-weight: 800;
}

.btn--xl {
  margin-top: clamp(24px, 3vw, 32px);
  padding: 20px 36px;
  font-size: 18px;
}

/* ---------- Footer ---------- */

/* A navy poster pinned over white paper and torn away under the pin
   (shapes drawn by js/footer.js). Sizes follow the footer's own box (cq units). */
.tpf {
  --tpf-sheet: var(--night);
  --tpf-paper: #f4f5f9;
  --tpf-on-sheet: #ffffff;
  --tpf-on-paper: var(--night);
  --tpf-rim: #fdfdfe;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fs: max(13px, 1.85cqmin);
  --logo-w: max(220px, min(52cqmin, 46cqw));
  position: relative;
  overflow: hidden;
  container-type: size;
  /* one screen minus the fixed header, so the whole poster shows at the end of the page */
  height: clamp(600px, calc(100svh - var(--header-h)), 860px);
  background: var(--tpf-sheet);
  color: var(--tpf-on-sheet);
  font-family: var(--font-body);
  isolation: isolate;
}

/* zero specificity, so the classes below can set their own colours */
:where(.tpf) a { color: inherit; }
:where(.tpf) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.tpf :focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.tpf p { margin: 0; }

.tpf-stage { position: absolute; left: 0; top: 0; max-width: none; display: block; pointer-events: none; z-index: 0; }
.tpf.is-hit .tpf-sheet-g { animation: tpf-hit 0.32s cubic-bezier(0.3, 0.7, 0.4, 1); }
.tpf-sheet { fill: var(--tpf-sheet); }
.tpf-paper { fill: var(--tpf-paper); }
.tpf-rim { fill: var(--tpf-rim); }

.tpf-ico {
  width: 1.35em;
  height: 1.35em;
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tpf-z { position: absolute; z-index: 2; }
.tpf-ink { color: var(--tpf-on-paper); }

/* assembly: the sheet's links first, then the print on the paper
   (translate, so the centring transforms survive) */
.tpf-h {
  transition: opacity 0.7s var(--ease), translate 0.8s var(--ease), filter 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.tpf:not(.s1) .tpf-h { opacity: 0; translate: 0 10px; filter: blur(6px); }
.tpf-p {
  transition: opacity 0.8s var(--ease), translate 0.9s var(--ease), filter 0.8s var(--ease);
  transition-delay: calc(480ms + var(--i, 0) * 70ms);
}
.tpf:not(.s3) .tpf-p { opacity: 0; translate: 0 18px; filter: blur(8px); transition-delay: 0s; }

/* top bar: back to top and socials, the avatar, the e-mail */
.tpf-top {
  left: 0;
  right: 0;
  top: 10.8%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 11%;
  font-size: max(15px, 2.6cqmin);
}
.tpf-row { display: flex; align-items: center; gap: 0.55em; }
.tpf-ib {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  margin: -0.3em;
  border-radius: 50%;
  transition: transform 0.35s var(--ease), background-color 0.25s;
}
.tpf-ib:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.14); }
.tpf-ib:active { transform: scale(0.9); }
.tpf-up .tpf-ico { transform: rotate(90deg); }

.tpf-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  transition: transform 0.4s var(--ease);
}
.tpf-logo img {
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  border: 2px solid var(--white);
  background: var(--orange);
  object-fit: cover;
}
.tpf-logo:hover { transform: translate(-50%, -50%) rotate(-8deg) scale(1.06); }

.tpf-mail-wrap { position: relative; }
.tpf-mail { display: flex; align-items: center; gap: 0.6em; font-size: var(--fs); padding: 0.35em 0.2em; transition: transform 0.35s var(--ease); }
.tpf-mail:hover { transform: translateY(-2px); }
.tpf-mail span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--ease); }
.tpf-mail:hover span { background-size: 100% 1px; }
.tpf-mail .tpf-ico { width: 1.5em; height: 1.5em; }
.tpf-toast {
  position: absolute;
  top: calc(100% + 0.5em);
  right: 0;
  padding: 0.35em 0.8em;
  border-radius: 99px;
  background: var(--tpf-on-sheet);
  color: var(--tpf-sheet);
  font-size: max(11px, 1.6cqmin);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s, transform 0.35s var(--ease);
  pointer-events: none;
}
.tpf-toast.on { opacity: 1; transform: none; }

/* link columns */
.tpf-col { top: 21%; display: grid; gap: max(5px, 0.9cqmin); font-size: var(--fs); }
/* the one column left, centred under the avatar */
.tpf-col.c { left: 50%; transform: translateX(-50%); justify-items: center; text-align: center; }
.tpf-col-title { display: flex; align-items: center; gap: 1em; margin-bottom: max(4px, 0.6cqmin); opacity: 0.75; }
.tpf-col-title .tpf-ico { width: 1.1em; height: 1.1em; }
.tpf-col ul { display: grid; gap: max(4px, 0.7cqmin); justify-items: inherit; margin: 0; padding: 0; list-style: none; }
.tpf-col li a { display: inline-block; transition: transform 0.35s var(--ease); }
.tpf-col li a:hover { transform: translateY(-2px); }
.tpf-big {
  max-width: 90cqw;
  font-family: var(--font-title);
  font-size: max(30px, 5.2cqmin);
  line-height: 1;
  color: var(--cta);
  text-decoration: underline;
  text-decoration-thickness: max(1.5px, 0.04em);
  text-underline-offset: 0.12em;
  transition: text-underline-offset 0.35s var(--ease);
}
.tpf .tpf-big:hover { text-underline-offset: 0.22em; }

/* the sitemap under the call, on one line */
.tpf .tpf-map {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px max(18px, 3cqmin);
  margin-top: max(14px, 2.2cqmin);
}

.tpf-map a { opacity: 0.85; transition: opacity 0.25s, translate 0.35s var(--ease); }
.tpf-map a:hover { opacity: 1; translate: 0 -2px; }

/* the pin */
.tpf-pin {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 64%;
  width: max(46px, 9cqmin);
  height: max(92px, 18cqmin);
  transform: translate(-50%, -100%);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tpf-pin:focus-visible { outline-offset: 6px; }
.tpf-tilt { position: absolute; inset: 0; transform-origin: 50% 100%; transform: rotate(calc(5deg + var(--tilt, 0deg))); transition: transform 0.7s var(--ease); }
.tpf-drop,
.tpf-body { position: absolute; inset: 0; transform-origin: 50% 100%; }
.tpf-body { transition: transform 0.32s var(--ease); }
.tpf-pin-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.tpf-shadow { position: absolute; right: 50%; bottom: -0.5%; width: 150%; height: 24%; transform-origin: 100% 50%; transform: rotate(16deg); transition: transform 0.45s var(--ease), opacity 0.45s; }
.tpf-shadow::before,
.tpf-shadow::after { content: ""; position: absolute; top: 50%; border-radius: 50%; transform: translateY(-50%); }
.tpf-shadow::before { right: 0; width: 100%; height: 24%; background: linear-gradient(90deg, transparent, rgba(9, 22, 48, 0.26) 60%, rgba(9, 22, 48, 0.42)); filter: blur(2px); }
.tpf-shadow::after { left: -6%; width: 60%; height: 100%; background: radial-gradient(closest-side, rgba(9, 22, 48, 0.22), transparent); filter: blur(3px); }
.tpf:not(.s2) .tpf-pin { opacity: 0; pointer-events: none; }
.tpf.s2 .tpf-drop { animation: tpf-drop 0.62s cubic-bezier(0.5, 0, 0.75, 0) both; }
.tpf.s2 .tpf-shadow { animation: tpf-shade 0.62s cubic-bezier(0.5, 0, 0.75, 0) both; }
.tpf-pin:hover .tpf-body { transform: translateY(-3%); }
.tpf-pin:hover .tpf-shadow { transform: rotate(16deg) translateX(-5%) scaleX(1.06); }
.tpf-pin[data-pin="lift"] .tpf-body { transform: translateY(-22%) rotate(-10deg); transition-duration: 0.3s; }
.tpf-pin[data-pin="lift"] .tpf-shadow { transform: rotate(16deg) translateX(-26%) scale(1.25); opacity: 0.55; }
.tpf-pin[data-pin="stab"] .tpf-body { animation: tpf-stab 0.42s cubic-bezier(0.55, 0, 0.8, 0.2) both; }

/* printed on the paper */
.tpf-brand { left: 50%; top: 67%; width: max-content; transform: translateX(-50%); display: grid; justify-items: stretch; }
/* the logo, printed big on the paper, with a lime underline */
.tpf-word {
  display: block;
  overflow: hidden;
  padding: 0 0.5% 3%;
}
.tpf-word span { display: block; position: relative; transition: transform 1s var(--ease) 0.5s; }
.tpf-word img { display: block; width: var(--logo-w); height: auto; }
.tpf-word span::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -1.5%;
  height: max(3px, 1.6cqmin);
  border-radius: 99px;
  background: var(--cta);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--ease) 1.05s;
}
.tpf:not(.s3) .tpf-word span { transform: translateY(125%); transition-delay: 0s; }
.tpf:not(.s3) .tpf-word span::after { transform: scaleX(0); transition-delay: 0s; }

/* the legal links sit either side of the logo, clear of it */
.tpf-side { top: 76%; display: grid; justify-items: center; gap: max(10px, 1.9cqmin); font-size: max(13px, 2.1cqmin); }
.tpf-side.l { right: calc(50% + var(--logo-w) / 2 + max(28px, 6cqmin)); }
.tpf-side.r { left: calc(50% + var(--logo-w) / 2 + max(28px, 6cqmin)); }
.tpf-side .tpf-ico { transition: transform 0.35s var(--ease); }
.tpf-side:hover .tpf-ico { transform: translateY(-2px) rotate(-8deg); }
.tpf-side span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--ease); }
.tpf-side:hover span { background-size: 100% 1px; }

.tpf-foot { left: 0; right: 0; bottom: 5%; display: flex; align-items: center; justify-content: space-between; gap: 1.5em; padding: 0 15%; font-size: max(12px, 1.85cqmin); }
.tpf-credit { position: absolute; left: 50%; transform: translateX(-50%); font-size: max(10px, 1.4cqmin); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.62; white-space: nowrap; }

/* phones: one column of chrome */
@container (max-width: 620px) {
  .tpf-top { padding: 0 7%; }
  .tpf-mail span { display: none; }
  .tpf-col { top: 24%; }
  .tpf-big { font-size: 26px; }
  .tpf-side { top: 86%; }
  .tpf-side { font-size: 12px; }
  .tpf-side.l { right: auto; left: 7%; }
  .tpf-side.r { left: auto; right: 7%; }
  .tpf-foot { padding: 0 7%; bottom: 3.5%; }
  .tpf-credit { bottom: 2.4em; font-size: 11px; }

  /* small links and icons get a finger-sized hit area, drawn nowhere */
  .tpf-map a,
  .tpf-ib,
  .tpf-mail { position: relative; }
  .tpf-map a::after,
  .tpf-ib::after,
  .tpf-mail::after,
  .tpf-side::after,
  .tpf-logo::after { content: ""; position: absolute; inset: -10px; }
  .tpf-map a::after { inset: -14px -6px; }
}

@keyframes tpf-hit { 0% { transform: translateY(0); } 30% { transform: translateY(2px); } 60% { transform: translateY(-0.5px); } 100% { transform: translateY(0); } }
@keyframes tpf-drop { 0% { transform: translateY(-62cqh) rotate(-28deg) scale(1.5); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateY(0) rotate(3deg) scale(1); } 90% { transform: scale(1.04, 0.95); } 100% { transform: none; opacity: 1; } }
@keyframes tpf-shade { 0% { transform: rotate(16deg) translateX(-60%) scale(2.4); opacity: 0; } 80% { transform: rotate(16deg); opacity: 1; } 100% { transform: rotate(16deg); opacity: 1; } }
@keyframes tpf-stab { 0% { transform: translateY(-22%) rotate(-10deg); } 70% { transform: translateY(1.5%) rotate(1deg); } 100% { transform: none; } }
@keyframes tpf-ping { 0% { transform: scale(1); opacity: 0.9; } 80%, 100% { transform: scale(2.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tpf *,
  .tpf *::before,
  .tpf *::after { animation: none !important; transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* ---------- Legal notice page ---------- */

.legal-page {
  background: var(--white);
  color: var(--night);
}

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 840px;
  margin: 0 auto;
  padding: 24px var(--gutter);
}

.legal-back {
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
}

.legal-back:hover { text-decoration: underline; text-underline-offset: 4px; }

.legal {
  max-width: 840px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) var(--gutter) clamp(64px, 8vw, 120px);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(10, 20, 64, 0.82);
}

.legal__title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--night);
}

.legal__date { margin: 12px 0 0; font-size: 15px; color: rgba(10, 20, 64, 0.55); }

.legal h2 {
  margin: 48px 0 12px;
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--night);
}

.legal h3 { margin: 24px 0 8px; font-size: 18px; font-weight: 700; color: var(--night); }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 1.2em; }
.legal a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

.legal-footer {
  padding: 40px var(--gutter);
  background: var(--night);
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  text-align: center;
}

.legal-footer p { margin: 0 0 8px; }
.legal-footer strong { color: var(--white); }

/* ---------- Tablet & mobile ---------- */

@media (max-width: 1100px) {
  .nav { display: none; }
  .burger { display: block; }
  .header__cta { margin-left: auto; }

  .header.is-open .nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: calc(var(--header-h) - 8px);
    left: var(--gutter);
    right: var(--gutter);
    padding: 10px;
    border-radius: 24px;
    background: var(--white);
    box-shadow: 0 24px 48px -20px rgba(10, 20, 64, 0.35);
  }

  .header.is-open .nav__link { padding: 14px 18px; font-size: 17px; color: var(--night); }
}

/* Tablets and phones: no room beside Léo, so text and button go under him */
@media (max-width: 1100px) {

  .offers__grid { grid-template-columns: 1fr; gap: 48px; max-width: 760px; margin-inline: auto; }
  .pack-solo { grid-column: auto; margin-top: 0; }

  .hero {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(40px + var(--round));
  }

  .hero__layer--title,
  .hero__layer--char { position: relative; inset: auto; }

  .hero__char {
    position: relative;
    left: 50%;
    height: auto;
    width: min(112vw, 720px);
    margin-top: 4vw;
    transform: translateX(-38%);
  }

  .hero__intro,
  .hero__ctas {
    position: relative;
    inset: auto;
    margin: 0 var(--gutter);
  }

  .hero__intro { max-width: 520px; margin-top: 24px; margin-bottom: 24px; }
  .hero__ctas { align-items: flex-start; }
}

@media (max-width: 820px) {
  :root { --header-h: 72px; }

  .brand__logo { height: 46px; }

  /* the booking button stays in the bar, compact, beside the menu */
  .header__right { gap: 10px; }
  .header__cta { padding: 12px 16px; font-size: 13px; }

  .hero__heading { padding: calc(var(--header-h) + 28px) var(--gutter) 0; }
  .hero__line1 { font-size: 7.6vw; }
  .hero__line2 { font-size: 12.4vw; }

  .hero__char { width: 112vw; }


  .hero__ctas { align-items: stretch; }

  .pains { grid-template-columns: 1fr; }

  .offer__foot .btn,
  .pack-solo .btn { width: 100%; }




  .about__grid { grid-template-columns: 1fr; }
  .about__portrait { max-width: 460px; margin-inline: auto; }
  .about__tag { left: -2%; }

  .faq__grid { grid-template-columns: 1fr; gap: 32px; }
  .faq__title { position: static; }


}

/* small phones: logo, booking button and menu still fit on one row */
@media (max-width: 345px) {
  .brand__logo { height: 38px; }
  .header__right { gap: 8px; }
  .header__cta { padding: 12px 12px; font-size: 12px; }
}

/* Tablets and phones: the hero on one screen. Title, Léo, and the intro
   with its button in a frosted card over the bottom of his portrait (which
   hides where the picture ends) */
@media (max-width: 1100px) {
  .hero__heading { padding-top: calc(var(--header-h) + 28px); }

  .hero {
    display: block;
    height: calc(100svh + var(--round));
    min-height: calc(620px + var(--round));
    padding-bottom: 0;
  }

  .hero__layer--char { position: absolute; inset: 0; }

  .hero__char {
    position: absolute;
    left: 50%;
    bottom: calc(var(--round) + 10vh);
    /* as big as fits between the title and the card, on any screen shape;
       the hero is never under 620px tall (a phone held sideways), so Léo isn't either */
    width: min(96vw, 640px, calc(max(100svh, 620px) - 360px));
    margin: 0;
    transform: translateX(-38%);
  }

  .hero__intro {
    position: absolute;
    z-index: 2;
    left: var(--gutter);
    bottom: calc(var(--round) + 20px);
    width: min(520px, calc(100% - 2 * var(--gutter)));
    max-width: none;
    margin: 0;
    padding: 20px 22px 92px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 48px -28px rgba(10, 20, 64, 0.5);
  }

  .hero__ctas {
    position: absolute;
    z-index: 3;
    left: calc(var(--gutter) + 22px);
    bottom: calc(var(--round) + 38px);
    width: calc(min(520px, 100% - 2 * var(--gutter)) - 44px);
    margin: 0;
  }

  .hero__ctas .btn { width: 100%; }
}

/* Phones: the Pack Pro goes under the list, its items on two columns */
@media (max-width: 640px) {
  .hero__char {
    bottom: calc(var(--round) + 17vh);
    width: min(118vw, calc(max(100svh, 620px) - 330px));
  }

  .hero__intro {
    right: var(--gutter);
    bottom: calc(var(--round) + 16px);
    width: auto;
    padding: 16px 18px 84px;
    border-radius: 24px;
  }

  .hero__intro .badge { margin-bottom: 10px; font-size: 12px; }

  /* card 3: what's inside on one column, the price above its button */
  .pack-solo__list { grid-template-columns: 1fr; }
  .pack-solo__value { display: block; font-size: 15px; }
  .pack-solo__text strong { margin-left: 0; }

  .chat__toggle { margin-left: auto; }
  .chat__icon { width: 28px; bottom: calc(100% - 8px); }

  /* may wrap on a narrow phone: a fully round pill would look odd on two lines */
  .badge { white-space: normal; border-radius: 14px; line-height: 1.35; }
  .hero__text { font-size: 15px; line-height: 1.5; }

  .hero__ctas {
    left: calc(var(--gutter) + 18px);
    right: calc(var(--gutter) + 18px);
    bottom: calc(var(--round) + 32px);
    width: auto;
  }

  /* the proofs: a carousel swiped sideways, the next card peeking in */
  .bento {
    display: flex;
    gap: 14px;
    max-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding: 8px var(--gutter) 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .bento::-webkit-scrollbar { display: none; }

  .result {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }

  .cta__float--heart { left: 4%; top: 6%; width: 64px; }
  .cta__float--bolt { right: 5%; top: 9%; width: 52px; }
  .cta__float--flame { left: 8%; bottom: 1.5%; width: 40px; }

  .offer__body { grid-template-columns: 1fr; gap: 36px; }
  .pack { rotate: -1deg; }
  .pack__arrow { display: none; }
  .pack__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: one spacing rhythm for the whole page. A title sits 48px above
   what follows it; stacked cards are 24px apart, with 20px inside and
   24px corners. */
@media (max-width: 640px) {
  .faq__grid,
  .about__grid { gap: var(--space-block); }

  .pains,
  .offers__grid { gap: 24px; }
  .method__stage { row-gap: 24px; }

  .pain,
  .offer,
  .pack-solo { padding: 20px; border-radius: 24px; }
  .result { border-radius: 24px; }

  .pack-solo { margin-top: 0; }

  /* the coaching badge overhangs the gap above its card: less of it */
  .offer--coaching .offer__badge { top: -12px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .burger span { transition: none; }
}