/* ==========================================================================
   Le Wagon India — lewagonindia.com
   Tokens transcribed from Le Wagon Brand Guidelines, February 2024.
   Every colour, radius, weight and shadow below is quoted from that document;
   nothing here is invented. Where a rule constrains use (Black is text-only,
   Red is never a background, highlights are purple only), the comment says so
   next to the token so the next person does not have to re-read the PDF.
   ========================================================================== */

/* --- Typefaces -------------------------------------------------------------
   Both faces are self-hosted from Le Wagon's own font files, converted to
   woff2. No third-party font request, so the page renders its real type on a
   bad connection and on the first paint rather than the second.

   Circular Std is licensed from Lineto and is NOT redistributable. The .woff2
   files are therefore git-ignored: they sit here for local work and have to be
   put on the host as a deployment step, not pulled from the repo. If they are
   missing, headings fall back to Figtree and the page still works — that is a
   visible deviation from the guidelines, not the intended state.

   Only the weights the page actually uses are converted: Circular Medium (500,
   headings) and Bold (700, h3 and key figures), Inter Regular (400) and Bold
   (700). The families ship many more; shipping faces nobody references is just
   bytes on a marketing page.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Circular Std";
  src: url("./fonts/CircularStd-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Circular Std";
  src: url("./fonts/CircularStd-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Core brand */
  --lw-red:   #E60F05;  /* logo symbol, list check marks, CTA on Dark Purple. Never a background, never body text. */
  --lw-black: #1B1717;  /* text on light backgrounds ONLY. Never a background. */
  --lw-white: #FFFFFF;

  /* Purple system */
  --lw-dark-purple:  #371373;  /* dark background + dark text label on light */
  --lw-purple:       #5315B8;  /* the alternative background purple (replaces Blue Purple for backgrounds) */
  --lw-tonic-purple: #670BFF;  /* primary button fill/outline on light, and highlight shape */
  --lw-blue-purple:  #4D04C4;  /* text label on light backgrounds ONLY — never a background */
  --lw-purple-05:    #F5F2FB;  /* light background, and body text on Dark Purple */
  --lw-purple-10:    #ECE6F8;
  --lw-purple-20:    #DBCDF3;  /* highlight shape on Cream */
  --lw-purple-60:    #8B5CF0;  /* highlight shape on Purple (per Highlights page, variant 3) */
  --lw-cream:        #FCF3EE;

  /* Lime. Not in the February 2024 palette. It comes back with the approved
     design for the questions section, and is used there and nowhere else. */
  --lw-lime: #D9FF5B;

  /* Accent — pill labels only, nothing else */
  --lw-orange-peel:    #FF9D0B;
  --lw-orange-peel-20: #FFECD0;

  /* Derived foregrounds */
  --fg-2:     #4A4545;
  --fg-muted: #7A7373;

  /* The one neutral that is not in the palette: an "off" state — a learner
     in the crowd who is not you. */
  --lw-inert: #CFC7D6;

  --border-subtle:  rgba(27, 23, 23, 0.08);
  --border-default: rgba(27, 23, 23, 0.12);

  /* Corner radius — "Corner Radius" page: images 16–24, CTA 8, cards 24 */
  --r-cta: 8px;
  --r-img: 20px;
  --r-card: 24px;
  --r-full: 999px;

  /* The only shadow the guidelines specify (Info card). Images get none. */
  --shadow-card: 0 4px 28px 0 rgba(0, 0, 0, 0.05);

  --font-display: "Circular Std", "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shell: 1240px;
  --gutter: 48px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;          /* paragraph line-height per typography hierarchy */
  color: var(--lw-black);
  background: var(--lw-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* --- Typography ---------------------------------------------------------- */
/* Headings are Circular Std Medium, line-height 1.1, letter-spacing 0.
   Inter is never used for headings; Circular is never used for body copy. */
/* House rule, knowingly taken: display headings run Circular Std Bold, not the
   Medium the February 2024 guidelines specify. Every approved design for this
   page is set in Bold, and mixing Medium section headings with Bold card
   titles made one face read as two. One weight for all display type. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0;
}
h1 { font-size: clamp(40px, 5.6vw, 64px); }
h2 { font-size: clamp(32px, 4vw, 44px); }
h3 { font-size: clamp(20px, 2vw, 24px); font-weight: 700; line-height: 1.2; }

p { margin: 0; }

/* Label — Inter Bold, uppercase, 0.04em. Dark Purple or Blue Purple on light. */
.label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lw-blue-purple);
}
.label--on-dark { color: var(--lw-purple-20); }

.lede {
  font-size: 18px;
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 62ch;
}
.lede--on-dark { color: var(--lw-purple-05); }

.note { font-size: 14px; line-height: 1.5; color: var(--fg-muted); }
.note--on-dark { color: var(--lw-purple-20); }

/* Highlight shape — at most two words, purple only, never red or orange.
   One variant per approved background, as set out on the Highlights page. */
.hl {
  /* Highlights are at most two words and are joined by a non-breaking space in
     the markup, so the shape moves to the next line whole instead of splitting. */
  background: var(--lw-tonic-purple);
  color: var(--lw-white);
  padding: 0 0.16em;
  border-radius: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hl--cream  { background: var(--lw-purple-20); color: var(--lw-black); }  /* on Cream */
.hl--purple { background: var(--lw-purple-60); color: var(--lw-white); }  /* on Purple */

/* Key figure — Circular Std Bold, tight */
.figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--lw-tonic-purple);
}
.figure--on-dark { color: var(--lw-white); }

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

.section { padding-block: 96px; }
.section--white  { background: var(--lw-white); }
.section--cream  { background: var(--lw-cream); }
.section--soft   { background: var(--lw-purple-05); }
.section--dark   { background: var(--lw-dark-purple); color: var(--lw-white); }
/* Was near-black. The guidelines list Black as text-only and never a
   background, so the dark sections are Dark Purple, which is what the
   guidelines give us for exactly this. */
.section--ink    { background: var(--lw-dark-purple); color: var(--lw-white); }
.section--purple { background: var(--lw-purple); color: var(--lw-white); }

.stack   { display: grid; gap: 16px; }
.stack-6 { display: grid; gap: 24px; }
.head    { max-width: 720px; display: grid; gap: 16px; margin-bottom: 56px; }

/* --- Buttons ------------------------------------------------------------- */
/* Inter Bold, 8px radius. Primary is Tonic Purple on light backgrounds;
   Le Wagon Red is permitted as a CTA only on Dark Purple. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 2px solid transparent;
  border-radius: var(--r-cta);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease);
}
.btn__arrow { transition: transform 200ms var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary { background: var(--lw-tonic-purple); color: var(--lw-white); }
.btn--primary:hover { background: #5A09E0; }

.btn--secondary {
  background: transparent;
  color: var(--lw-tonic-purple);
  border-color: var(--lw-tonic-purple);
}
.btn--secondary:hover { background: var(--lw-purple-05); }

.btn--red { background: var(--lw-red); color: var(--lw-white); }
.btn--red:hover { background: #C50D04; }

.btn--ghost-light {
  background: transparent;
  color: var(--lw-white);
  border-color: var(--lw-white);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Pill label (Orange Peel is reserved for exactly this) ---------------- */
.pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: var(--lw-orange-peel-20);
  color: var(--lw-orange-peel);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pill--soft { background: var(--lw-purple-10); color: var(--lw-blue-purple); }
.pill--on-dark { background: rgba(255, 255, 255, 0.14); color: var(--lw-white); }

/* --- Navigation ---------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--lw-white);
  border-bottom: 1px solid var(--border-subtle);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 76px;
}
/* Logo lockup. The combination mark is never modified; "India" sits beside it
   behind a hairline rule, the same lockup the guidelines themselves use for
   "le wagon | BRAND GUIDELINES". Clear space is the symbol's own height. */
.lockup { display: flex; align-items: center; gap: 14px; flex: none; }
.lockup__mark { height: 30px; width: auto; }   /* minimum permitted height is 30px */
.lockup__rule {
  width: 1px; height: 22px;
  background: var(--border-default);
}
.lockup__rule--on-dark { background: rgba(255, 255, 255, 0.28); }
.lockup__region {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.lockup__region--on-dark { color: var(--lw-purple-20); }

.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a { font-weight: 700; font-size: 14px; }
.nav__links a:not(.btn):hover { color: var(--lw-tonic-purple); }

.nav__toggle { display: none; }

/* --- Hero ----------------------------------------------------------------
   Typographic, on Dark Purple. Deliberately no decorative graphic on the right:
   the only illustrative device the guidelines give us is photography at a
   16–24px radius, and the rotated red wagon in the earlier draft was a
   redrawn logo set at an angle — two separate logo don'ts.
   -------------------------------------------------------------------------- */
.hero {
  background: var(--lw-dark-purple);
  color: var(--lw-white);
  padding-block: 96px 104px;
}
.hero__inner { display: grid; gap: 28px; }

.hero h1 {
  /* 88px is the display size in the type scale. Letter-spacing stays at 0 —
     the guidelines set it explicitly, so no optical tightening. */
  font-size: clamp(44px, 6.4vw, 88px);
  max-width: 15ch;
}
.hero__lede { font-size: 20px; max-width: 52ch; }

/* The automate prompt. A white surface on Dark Purple; 8px radius, the CTA
   radius, because the bar reads as one control rather than a card. */
.prompt {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 820px;
  padding: 8px;
  background: var(--lw-white);
  border-radius: var(--r-cta);
  margin-top: 8px;
}
.prompt:focus-within { box-shadow: 0 0 0 3px rgba(103, 11, 255, 0.5); }
.prompt input {
  flex: 1;
  min-width: 0;
  padding: 16px 14px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--lw-black);
  font-size: 17px;
}
.prompt input::placeholder { color: var(--fg-muted); }
.prompt .btn { flex: none; }

/* Example chips — outlined on dark, pill radius as labels are allowed to be. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--lw-purple-05);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.chip:hover, .chip:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lw-purple-05);
}

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

/* --- Photography slots ---------------------------------------------------
   Le Wagon photography is real students from the internal image bank, so no
   stock imagery is used here. Each slot names the shot that belongs in it.
   Radius 20px, and deliberately no stroke and no drop shadow — both are
   listed as don'ts for images. Replace the whole element with <img>. */
.photo {
  position: relative;
  border-radius: var(--r-img);
  background: var(--lw-purple-10);
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  overflow: hidden;
}
.photo--on-dark { background: rgba(255, 255, 255, 0.08); }
.photo--16x9 { aspect-ratio: 16 / 9; }
.photo--4x3  { aspect-ratio: 4 / 3; }
.photo--1x1  { aspect-ratio: 1 / 1; }
.photo__mark { width: 32px; opacity: 0.55; }
.photo__caption {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lw-blue-purple);
  max-width: 28ch;
}
.photo--on-dark .photo__caption { color: var(--lw-purple-20); }

/* --- Stats band ---------------------------------------------------------- */
.stats { background: var(--lw-purple); color: var(--lw-white); padding-block: 64px; }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.stats__item { display: grid; gap: 10px; }
.stats__label {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  color: var(--lw-purple-20);
}
.stats__source { margin-top: 32px; }
.stats__source a { text-decoration: underline; font-weight: 700; }

/* --- Global network block -------------------------------------------------
   Centred, on White, directly after the loop. The figures are the global
   network's, not India's, so the labels carry the asterisk and the footnote
   says whose numbers they are rather than leaving them to be read as local.
   -------------------------------------------------------------------------- */
.network { text-align: center; }
.network__head { max-width: 1040px; margin-inline: auto; display: grid; gap: 20px; }
/* Tracked wider than the standard label. It runs the width of the block as a
   single line of small caps, and at 0.04em it reads as a cramped sentence
   rather than as a label. */
.network .label { letter-spacing: 0.12em; }
/* Bold, not the Medium the other headings use: this one is a statement rather
   than a section title, and it is set two sizes up to carry the block. */
.network h2 { font-size: clamp(30px, 3.9vw, 56px); }
.network .lede { max-width: 82ch; margin-inline: auto; font-size: 19px; }

.network__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 76px;
}
.network__stat {
  display: grid;
  gap: 18px;
  align-content: start;
  padding-inline: 28px;
  border-left: 1px solid var(--border-subtle);
}
.network__stat:first-child { border-left: 0; }
/* Reuses .figure — same face, weight and Tonic Purple as every other key
   figure on the site, two steps up in size. */
.network .figure { font-size: clamp(50px, 7.2vw, 104px); }
.network__label { font-weight: 700; font-size: 18px; line-height: 1.3; }
.network__source { margin-top: 56px; }
.network__source a { font-weight: 700; text-decoration: underline; color: var(--lw-black); }

/* --- Cards ---------------------------------------------------------------
   Every one of these is a white surface, and a white surface always carries
   Black text — including when it sits inside a Dark Purple section, which sets
   a white colour that would otherwise be inherited straight through it. */
.card, .schedule, .ratio, .form-card { color: var(--lw-black); }

.card {
  background: var(--lw-white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
/* Buttons and pills hug their own text rather than stretching to the card. */
.card > .btn, .card > .pill, .card > .btn-row { align-self: start; }
/* The call to action drops to the bottom, so a two-line title in one card
   does not leave its button sitting above its neighbours'. */
.card > .btn:last-child, .card > .btn-row:last-child { margin-top: auto; }
.card--flat { box-shadow: none; border: 1px solid var(--border-subtle); }
.card--feature { border: 2px solid var(--lw-tonic-purple); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-muted);
}

/* List item — a red check mark is the documented list marker */
.ticks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.ticks svg { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.ticks--on-dark { color: var(--lw-purple-05); }

/* --- Schedule ------------------------------------------------------------ */
.schedule {
  background: var(--lw-white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.schedule__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  padding: 26px 32px;
  border-bottom: 1px solid var(--border-subtle);
}
.schedule__row:last-child { border-bottom: 0; }
.schedule__time {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lw-blue-purple);
  padding-top: 3px;
}

/* --- Ratio figure -------------------------------------------------------- */
.ratio {
  display: grid;
  gap: 20px;
  background: var(--lw-white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 32px;
}
.ratio__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ratio__learner {
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: var(--lw-purple-10);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  color: var(--lw-blue-purple);
}
.ratio__lead {
  padding: 9px 14px;
  border-radius: var(--r-cta);
  background: var(--lw-tonic-purple);
  color: var(--lw-white);
  font-weight: 700; font-size: 13px;
}
.ratio__crowd { display: flex; flex-wrap: wrap; gap: 6px; }
.ratio__dot { width: 12px; height: 12px; border-radius: var(--r-full); background: var(--lw-inert); }

/* --- Split --------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.split--tight { align-items: start; }

/* --- CTA band ------------------------------------------------------------ */
.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* --- Form ---------------------------------------------------------------- */
.form-card {
  background: var(--lw-white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 36px;
  display: grid;
  gap: 18px;
}
.field { display: grid; gap: 7px; }
.field > label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--r-cta);
  background: var(--lw-white);
  font-size: 15px;
  outline: none;
  transition: border-color 160ms var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--lw-tonic-purple);
}
.field--split { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.form-card .btn { justify-content: center; width: 100%; }

.form-status {
  font-size: 14px;
  font-weight: 700;
  color: var(--lw-blue-purple);
  min-height: 21px;
}

/* --- Footer -------------------------------------------------------------- */
.footer { background: var(--lw-dark-purple); color: var(--lw-purple-05); padding-block: 72px 40px; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.footer__col { display: grid; gap: 12px; align-content: start; }
.footer__heading {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lw-white);
  margin-bottom: 4px;
}
.footer__col a { font-size: 14px; }
.footer__col a:hover { color: var(--lw-white); text-decoration: underline; }
.footer__legal {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--lw-purple-20);
}

/* --- Stamps ("copy. paste. download. upload. update. repeat.") ------------
   Reconstructed from the approved part-one design. The rotations are fixed
   values, not random, so the block renders identically every time.

   The two rows are explicit rather than left to flex-wrap. The break after
   UPLOAD is part of the design — four words then two, with UPDATE sitting
   under COPY — and wrapping by available width puts it wherever the viewport
   happens to fall. Each row still wraps within itself on a narrow screen.

   Brand note, deliberately left visible: two of these stamps put white type
   on Le Wagon Red. The February 2024 guidelines say Red is never a background
   and highlights are always purple. This section is the one place that is
   waived, on the approved design; nothing below it repeats the exception.
   ------------------------------------------------------------------------ */
.stamps { display: grid; gap: 8px; justify-items: start; margin-block: 76px 68px; }
.stamps__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }

.stamp {
  display: inline-block;
  padding: 0.06em 0.22em 0.16em;
  font-family: var(--font-display);
  font-weight: 700;
  /* Sized to fill the shell: the four-word row runs nearly its full width at
     desktop, which is what gives the block its weight. */
  font-size: clamp(26px, 4.05vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.stamp--outline { border: 2px solid var(--lw-black); color: var(--lw-black); }
.stamp--deep    { background: var(--lw-dark-purple); color: var(--lw-white); }
/* The third purple. DOWNLOAD and UPLOAD sit next to each other, so they can't
   share a fill — this is the palette's mid purple, between Tonic and Dark. */
.stamp--mid     { background: var(--lw-purple); color: var(--lw-white); }
.stamp--purple  { background: var(--lw-tonic-purple); color: var(--lw-white); }

/* Tilts, per stamp. Enough to read as struck by hand rather than as a wonky
   grid — the blocks nearly touch, which is the point. */
.stamps__row:nth-child(1) .stamp:nth-child(1) { transform: rotate(-1.5deg); }
.stamps__row:nth-child(1) .stamp:nth-child(2) { transform: rotate(1.2deg); }
.stamps__row:nth-child(1) .stamp:nth-child(3) { transform: rotate(-1deg); }
.stamps__row:nth-child(1) .stamp:nth-child(4) { transform: rotate(1.9deg); }
.stamps__row:nth-child(2) .stamp:nth-child(1) { transform: rotate(-1.4deg); }
.stamps__row:nth-child(2) .stamp:nth-child(2) { transform: rotate(1.5deg); }

/* The problem section carries its own heading size. It is the loudest thing
   on the page and the section's whole job is the double take, so it runs
   larger than a section heading elsewhere.

   Both headings are deliberately unmeasured: each is one line at desktop and
   breaking either of them mid-sentence costs the line its snap. The lede
   underneath keeps a measure, because that one is actually read. */
.problem { padding-bottom: 104px; }
.problem h2 { font-size: clamp(32px, 3.9vw, 58px); max-width: none; }
.problem .lede { font-size: 19px; max-width: 60ch; margin-top: 6px; }

/* --- "Where are you losing time?" ------------------------------------------
   A tablist over four audiences, each with a worked example and the shape of
   the workflow behind it.

   Visual note, deliberately left visible: this block departs from the
   February 2024 guidelines in four places — emoji in the tabs, Black as a
   background on the selected tab, hard offset shadows, and Bold headings
   where the guidelines say Medium. All four come from the approved design
   and are confined to this section. See the note in index.html.
   -------------------------------------------------------------------------- */
.losing { background: var(--lw-purple-10); }
.losing h2 { font-size: clamp(32px, 4.4vw, 60px); }
.losing .label { letter-spacing: 0.12em; }

/* Tabs. A horizontal strip on desktop; on a phone it scrolls sideways rather
   than wrapping to three rows of pills, with the selected one scrolled into
   view so it is never the one off-screen. */
.tabs {
  display: flex;
  gap: 12px;
  margin: 36px 0 32px;
  padding: 4px 4px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border: 2px solid var(--lw-black);
  border-radius: var(--r-full);
  background: var(--lw-white);
  color: var(--lw-black);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.tab:hover { background: var(--lw-purple-05); }
.tab[aria-selected="true"] { background: var(--lw-dark-purple); border-color: var(--lw-dark-purple); color: var(--lw-white); }
.tab__icon { font-size: 18px; line-height: 1; }

/* The sheet. The purple block behind it is a solid offset, not a blur — it
   reads as a second sheet of paper under the first. Shared by the workflow
   panels and by the day schedule, so the offset is defined once. */
.sheet {
  background: var(--lw-white);
  border: 2px solid var(--lw-black);
  border-radius: 28px;
}
/* The offset is a solid Tonic Purple shape, not a shadow — which is why it is
   not held to the one soft shadow the guidelines document. It is the page's
   single emphasis device: where two sheets sit side by side, only the one
   being argued for carries it. */
.sheet--offset { box-shadow: 10px 10px 0 0 var(--lw-tonic-purple); }

.showcase {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: center;
  padding: 48px;
}
.showcase[hidden] { display: none; }
.showcase__copy { display: grid; gap: 18px; align-content: start; }
.showcase__copy h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; }
.showcase__copy .lede { font-size: 18px; max-width: 34ch; }

/* The workflow. Dotted ground, then two explicit rows — the wrap after the
   second node is part of the drawing, so it is not left to the viewport. */
.flow {
  display: grid;
  gap: 22px;
  justify-items: start;
  padding: 36px 28px;
  border-radius: var(--r-img);
  background-image: radial-gradient(circle, rgba(27, 23, 23, 0.16) 1.3px, transparent 1.3px);
  background-size: 22px 22px;
}
.flow__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.flow__row:last-child { padding-left: 38px; }
.node {
  padding: 15px 26px;
  border: 2px solid var(--lw-black);
  border-radius: 14px;
  background: var(--lw-white);
  box-shadow: 5px 5px 0 0 var(--lw-black);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}
.flow__arrow { flex: none; width: 26px; height: 26px; color: var(--lw-tonic-purple); }

/* --- The course, five days ------------------------------------------------
   On near-black rather than Dark Purple, per the approved design. Five cards
   that hold five days; a course with a different shape changes the count and
   the grid re-flows rather than being redrawn.
   -------------------------------------------------------------------------- */
.course h2 { font-size: clamp(30px, 4.2vw, 56px); }
.course .label { color: var(--lw-purple-20); letter-spacing: 0.12em; }
.days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.day {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 28px 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-card);
}
.day__n {
  font-weight: 700; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--lw-purple-20);
  margin-bottom: 10px;
}
.day__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; }
.day__body { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }

/* --- A day at Le Wagon ----------------------------------------------------
   The objection this section answers is "eight hours of video call", so the
   schedule is the argument: four parts of a day, only two of which are live.
   -------------------------------------------------------------------------- */
.day-shape { background: var(--lw-purple-10); }
.day-shape h2 { font-size: clamp(32px, 4.2vw, 58px); max-width: 15ch; }
.day-shape .label { color: var(--lw-tonic-purple); letter-spacing: 0.12em; }
.day-shape__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 52px; align-items: start; }
.day-shape__copy { display: grid; gap: 18px; }
.day-shape__copy .lede { max-width: 46ch; }

.parts { padding: 0; overflow: hidden; }
.part {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  padding: 22px;
  border-bottom: 1px solid var(--border-subtle);
}
.part:last-child { border-bottom: 0; }
.part__when {
  font-weight: 700; font-size: 13px; line-height: 1.3;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lw-tonic-purple);
  padding-top: 3px;
}
.part__body { display: grid; gap: 5px; }
.part__title {
  display: flex; align-items: center; gap: 12px;
  /* The icon is part of the approved design for this section. It is the one
     place emojis appear; see the note in index.html. */
  font-family: var(--font-display); font-weight: 700;
  font-size: 21px; line-height: 1.2;
}
.part__icon { font-size: 20px; line-height: 1; }
.part__icon { font-size: 20px; line-height: 1; }
.part__note { color: var(--fg-2); font-size: 16px; line-height: 1.5; }

/* --- Small by design ------------------------------------------------------
   Two sheets and a ratio. The left one is deliberately the plain card and the
   right one carries the offset, so which is being argued for is visible
   before a word is read.
   -------------------------------------------------------------------------- */
.versus h2 { font-size: clamp(30px, 4.2vw, 58px); }
.versus .label { letter-spacing: 0.12em; }
.versus__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 52px;
}
.versus__vs {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
}
.compare { padding: 36px; display: grid; gap: 22px; align-content: start; }
.compare h3 { font-size: clamp(22px, 2.2vw, 30px); }
.compare__note { color: var(--fg-2); line-height: 1.55; }

/* The crowd. Ninety dots is not a count of anything — it is the difference
   between a number you read and a number you see. */
/* Fixed 24 columns, so the nth dot is always in the same place and the dial
   can point at it. Never a wrapping row: on a narrower card the dots shrink
   rather than re-flowing, or "learner 184" would move around. */
.crowd { display: grid; grid-template-columns: repeat(24, 1fr); gap: 6px; max-width: 460px; }
.crowd__dot {
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background: var(--lw-inert);
  transition: background-color 120ms linear, transform 120ms var(--ease);
}
/* The one the number is pointing at. */
.crowd__dot.is-you {
  background: var(--lw-tonic-purple);
  transform: scale(1.7);
}

/* Tabular figures so the heading does not re-flow while the number counts up
   — three digits with no comma, so Circular's wide tabular comma is not in
   play here. */
.dial { font-variant-numeric: tabular-nums; }

/* Ten columns, not a wrapping row. Ten is the ratio being claimed, so a
   card a little too narrow must shrink the circles rather than spill one
   onto a second line and quietly show eleven. */
.cohort { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; }
.cohort__person {
  aspect-ratio: 1;
  border: 1.5px solid var(--lw-black);
  border-radius: var(--r-full);
  background: var(--lw-purple-05);
}
.cohort__lead {
  padding: 16px 22px;
  border-radius: 10px;
  background: var(--lw-tonic-purple);
  color: var(--lw-white);
  font-weight: 700;
  font-size: 17px;
}

/* --- Day 5 is the point ---------------------------------------------------
   Purple, not Dark Purple: the questions section directly below it is Dark
   Purple, and two adjacent sections on the same ground read as one very long
   section with a gap in the middle. Purple also lifts the Purple 20 notes off
   the ground more than Dark Purple did.
   -------------------------------------------------------------------------- */
.monday { background: var(--lw-purple); color: var(--lw-white); text-align: center; }
.monday .label { color: var(--lw-purple-20); letter-spacing: 0.12em; }
.monday h2 {
  font-weight: 700;
  font-size: clamp(32px, 5.4vw, 76px);
  max-width: 19ch;
  margin-inline: auto;
}

/* Sticky notes. Two explicit rows, four then one, and fixed tilts — the same
   reasoning as the stamps: the arrangement is the drawing, not the viewport's
   decision. */
.notes { display: grid; gap: 14px; justify-items: center; margin: 60px 0 48px; }
.notes__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
/* Purple 20, not White. Five white blocks on Dark Purple glared and pulled
   the eye off the sentence above them; tinting into the purple family keeps
   them reading as paper without taking over the section. */
.sticky-note {
  padding: 17px 28px;
  background: var(--lw-purple-20);
  color: var(--lw-black);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  box-shadow: 3px 6px 12px rgba(0, 0, 0, 0.28);
}
.notes__row:nth-child(1) .sticky-note:nth-child(1) { transform: rotate(-2.2deg); }
.notes__row:nth-child(1) .sticky-note:nth-child(2) { transform: rotate(1.6deg); }
.notes__row:nth-child(1) .sticky-note:nth-child(3) { transform: rotate(-1.1deg); }
.notes__row:nth-child(1) .sticky-note:nth-child(4) { transform: rotate(2.4deg); }
.notes__row:nth-child(2) .sticky-note:nth-child(1) { transform: rotate(-1.8deg); }

/* White, not Red: Red as a call to action is only sanctioned on Dark Purple,
   and this section is now Purple. White is the strongest thing that holds on
   this ground without borrowing a colour it should not. */
.monday .btn { padding: 18px 30px; }
.btn--paper { background: var(--lw-white); color: var(--lw-dark-purple); }
.btn--paper:hover { background: var(--lw-purple-10); }

/* --- "Wait. Couldn't I just…?" --------------------------------------------
   Six objections, answered one at a time. Each answer carries something to
   try rather than a paragraph insisting otherwise, which is the whole reason
   this is a chooser and not an accordion of sales copy.

   The choices are real buttons with aria-pressed, and all six answers are in
   the markup rather than built from strings in JavaScript — so the content is
   readable in the file, and a visitor with no JavaScript gets the first
   answer instead of an empty box.
   -------------------------------------------------------------------------- */
.questions .label { color: var(--lw-lime); letter-spacing: 0.12em; }
/* The answer sheet is white, so its eyebrow takes Tonic Purple rather than
   inheriting the lime set for the section around it. */
.answer .label { color: var(--lw-tonic-purple); }
.questions .lede { max-width: 56ch; }

.objections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 44px 0 28px;
}
.objection {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 22px 24px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--lw-white);
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease),
              border-color 180ms var(--ease);
}
.objection:hover { background: rgba(255, 255, 255, 0.16); }
.objection__n {
  font-weight: 700; font-size: 11px; line-height: 1.3;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lw-purple-20);
}
.objection__q { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.25; }
.objection[aria-pressed="true"] {
  background: var(--lw-white);
  border-color: var(--lw-white);
  color: var(--lw-black);
}
.objection[aria-pressed="true"] { color: var(--lw-dark-purple); }
.objection[aria-pressed="true"] .objection__n { color: var(--lw-blue-purple); }
.objection__q .objection__go { color: inherit; }

/* The answer. A Red offset rather than the page's Tonic Purple one, per the
   approved design — the one red block on the page. */
.answer { padding: 48px; display: grid; gap: 20px; color: var(--lw-black); }
.answer.sheet--offset { box-shadow: 10px 10px 0 0 var(--lw-red); }
.answer[hidden] { display: none; }
.answer h3 { font-size: clamp(24px, 2.6vw, 34px); }
.answer p { line-height: 1.6; color: var(--fg-2); }
.answer p strong { color: var(--lw-black); }
.answer > .btn { justify-self: start; }

/* The try-it area inside an answer. */
.demo { display: grid; gap: 16px; padding: 26px; border: 1px solid var(--lw-purple-10); border-radius: 18px; background: var(--lw-purple-05); }
.demo__title { font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lw-blue-purple); }
.demo__out { font-weight: 700; min-height: 24px; }
.demo__hint { font-size: 14px; color: var(--fg-muted); }

.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.path { padding: 20px 22px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--lw-white); }
.path strong { display: block; margin-bottom: 8px; }
.path p { font-size: 15px; }

.chipset { display: flex; flex-wrap: wrap; gap: 10px; }
.chipset button {
  padding: 12px 20px;
  border: 2px solid var(--lw-black);
  border-radius: 10px;
  background: var(--lw-white);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.chipset button:hover { background: var(--lw-purple-10); }
.chipset button[aria-pressed="true"] { background: var(--lw-dark-purple); border-color: var(--lw-dark-purple); color: var(--lw-white); }
.chipset button[disabled] { opacity: 0.4; cursor: default; }
.chipset button[disabled]:hover { background: var(--lw-white); }

/* A failed run. Red is the warning mark only — never the text, which the
   guidelines rule out. */
.warn { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: 15px; }
.warn svg { width: 20px; height: 20px; color: var(--lw-red); }

.slot { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); }
.slot:last-child { border-bottom: 0; }
.slot__time { font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lw-blue-purple); }
.slot strong { display: block; margin-bottom: 4px; }
.slot p { font-size: 15px; }

.answer__price { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--lw-tonic-purple); }

/* --- Programme fee --------------------------------------------------------
   The price is the first thing in the left column and set at headline size,
   because burying it is what every visitor expects and resents.
   -------------------------------------------------------------------------- */
.pricing h2 { font-size: clamp(30px, 3.6vw, 50px); }
.pricing .label { letter-spacing: 0.12em; }
.pricing__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: start; }
.pricing__col { display: grid; gap: 22px; align-content: start; }

.price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(54px, 7.4vw, 104px);
  line-height: 1;
  color: var(--lw-tonic-purple);
  margin-top: 10px;
}
.price__what { font-weight: 700; font-size: 19px; }

.offer { padding: 30px; display: grid; gap: 18px; justify-items: start; border-radius: 20px; }
.offer h3 { font-size: 24px; }
.eligible { display: flex; flex-wrap: wrap; gap: 12px; }
.eligible span {
  padding: 10px 20px;
  border: 2px solid var(--lw-black);
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: 15px;
}

.emi {
  padding: 30px;
  border-radius: 20px;
  background: var(--lw-dark-purple);
  color: var(--lw-white);
  display: grid;
  gap: 14px;
}
.emi h3 { font-size: 24px; }
.emi p { color: var(--lw-purple-05); line-height: 1.55; }

.included { display: grid; gap: 16px; margin-top: 34px; }
.include {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 26px;
  border-radius: 16px;
  background: var(--lw-white);
  box-shadow: var(--shadow-card);
}
/* A red check mark on nothing — the marker the guidelines document for lists,
   at the one size it is used on this page. */
.include__tick { display: grid; place-items: center; padding-top: 1px; }
.include__tick svg { width: 22px; height: 22px; }
.include__title { font-weight: 700; font-size: 17px; margin-bottom: 5px; }
.include__note { color: var(--fg-2); font-size: 15px; line-height: 1.5; }

/* --- Syllabus request -----------------------------------------------------
   The form is ours, posting Pulse's own field names, so a fill reaches us
   rather than a third party.
   -------------------------------------------------------------------------- */
.syllabus h2 { font-size: clamp(30px, 3.8vw, 52px); }
.syllabus .label { letter-spacing: 0.12em; }
.syllabus__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; }
.syllabus__copy { display: grid; gap: 20px; align-content: start; }
.syllabus__copy .lede { max-width: 42ch; }
.syllabus__form { padding: 40px; display: grid; gap: 20px; }
.syllabus__form h3 { font-size: 30px; }
.syllabus__form .field > label { text-transform: none; font-size: 15px; letter-spacing: 0; }
.syllabus__form .field input,
.syllabus__form .field select,
.syllabus__form .field textarea { border: 2px solid var(--lw-black); border-radius: 10px; padding: 16px 18px; }
.syllabus__form .field input:focus,
.syllabus__form .field select:focus,
.syllabus__form .field textarea:focus { border-color: var(--lw-tonic-purple); }
.field__optional { color: var(--fg-muted); font-weight: 700; }
.syllabus__form .btn { border-radius: 10px; padding: 18px; }

/* --- Closing call to action ------------------------------------------------ */
.closing { text-align: center; }
.closing .label { letter-spacing: 0.12em; }
.closing h2 {
  font-size: clamp(32px, 5vw, 70px);
  max-width: 22ch;
  margin-inline: auto;
}
.closing .lede { max-width: 58ch; margin-inline: auto; font-size: 19px; }

/* --- Reveal -------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* --- AI Word of the Day -------------------------------------------------- */
/* A quiet way in for somebody not ready to apply. Cream, like the closing
   section, so it reads as an invitation rather than another sales block. */
.word__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px 64px;
  align-items: center;
}
.word h2 { font-size: clamp(30px, 3.6vw, 48px); max-width: 16ch; }
.word__copy .label { color: var(--lw-blue-purple); }
.word__steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.word__steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: baseline;
  font-size: 16px; line-height: 1.45;
}
.word__steps li::before {
  content: counter(step);
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lw-purple); color: var(--lw-white);
  font-size: 12px; font-weight: 700;
}
.word__go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.word__qr {
  margin: 0; justify-self: center;
  background: var(--lw-white); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  padding: 24px; display: grid; gap: 12px; justify-items: center; max-width: 260px;
}
.word__qr img { width: 180px; height: 180px; }
.word__qr figcaption { font-size: 14px; color: var(--fg-2); text-align: center; }
.word__terms { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.word__terms li {
  background: var(--lw-white); border-radius: var(--r-full); padding: 6px 14px;
  font-size: 14px; font-weight: 500; color: var(--lw-dark-purple);
}

@media (max-width: 1040px) {
  .word__grid { grid-template-columns: 1fr; }
  /* A phone cannot scan its own screen, so the code is only for desktops. */
  .word__qr { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1040px) {
  :root { --gutter: 32px; }
  .showcase { grid-template-columns: 1fr; gap: 36px; padding: 36px; }
  .day-shape__grid { grid-template-columns: 1fr; gap: 44px; }
  .versus__grid { grid-template-columns: 1fr; gap: 20px; justify-items: center; }
  .objections { grid-template-columns: repeat(2, 1fr); }
  .answer { padding: 36px; }
  .pricing__grid { grid-template-columns: 1fr; gap: 48px; }
  .syllabus__grid { grid-template-columns: 1fr; gap: 48px; }
  .syllabus__copy .lede { max-width: none; }
  .compare { width: 100%; }
  .day-shape h2, .day-shape__copy .lede { max-width: none; }
  .days { grid-template-columns: repeat(2, 1fr); }
  .showcase__copy .lede { max-width: none; }
  .network__stat { padding-inline: 18px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .section { padding-block: 64px; }
  .problem { padding-bottom: 64px; }
  .stamps { margin-block: 44px 40px; gap: 6px; }
  .stamps__row { gap: 6px 8px; }
  .hero { padding-block: 56px 64px; }
  .prompt { flex-direction: column; }
  .prompt .btn { justify-content: center; }
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .grid-3, .grid-2, .stats__grid, .footer__grid { grid-template-columns: 1fr; }
  /* Stacked, so the rule between columns becomes a rule between rows. */
  .network__stats { grid-template-columns: 1fr; margin-top: 48px; gap: 36px; }
  .network__stat { border-left: 0; border-top: 1px solid var(--border-subtle); padding: 32px 0 0; }
  .network__stat:first-child { border-top: 0; padding-top: 0; }
  .schedule__row { grid-template-columns: 1fr; gap: 8px; padding: 22px 24px; }
  .card, .form-card, .ratio { padding: 24px; }
  /* The tab strip runs to the screen edge so it is obviously scrollable. */
  .tabs { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .showcase { padding: 24px; border-radius: 20px; box-shadow: 6px 6px 0 0 var(--lw-tonic-purple); }
  .flow { padding: 24px 18px; }
  .days { grid-template-columns: 1fr; margin-top: 36px; }
  .parts { padding: 4px 22px; }
  .compare { padding: 26px; }
  .crowd { max-width: none; }
  .monday h2 { max-width: none; }
  .notes { margin: 44px 0 36px; }
  .sticky-note { padding: 14px 20px; font-size: 15px; }
  .offer, .emi { padding: 24px; }
  .objections { grid-template-columns: 1fr; gap: 12px; margin: 32px 0 24px; }
  .answer { padding: 24px; }
  .paths { grid-template-columns: 1fr; }
  .demo { padding: 20px; }
  .slot { grid-template-columns: 1fr; gap: 6px; }
  .syllabus__form { padding: 24px; }
  .closing h2, .closing .lede { max-width: none; }
  .include { padding: 20px; gap: 14px; }
  .part { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .flow__row:last-child { padding-left: 0; }
  .node { padding: 12px 18px; font-size: 14px; box-shadow: 4px 4px 0 0 var(--lw-black); }
  .btn-row .btn { flex: 1 1 100%; justify-content: center; }
}


/* --- Show me how overlay ----------------------------------------------------
   Pulse's Automation Blueprint, framed over the whole page. It brings its own
   header and close button, so the overlay is only a frame: no chrome of ours
   to compete with it. The page behind stops scrolling while it is open. */
.magnet {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--lw-cream);
}
.magnet::backdrop { background: rgba(55, 19, 115, 0.6); }
.magnet iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
html.magnet-open { overflow: hidden; }

/* --- Cookie banner ----------------------------------------------------------
   White card, the one documented soft shadow. Accept is the primary button;
   the other choice is equal in weight to read, lighter to look at. */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
  padding: 18px 20px;
  background: #fff; color: var(--lw-black); border-radius: 20px;
  box-shadow: 0 4px 28px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(55, 19, 115, 0.08);
  font-size: 14px; line-height: 1.5;
}
.consent[hidden] { display: none; }
/* In the corner on wide screens, clear of the hero's Show me how. */
@media (min-width: 720px) { .consent { right: auto; max-width: 400px; } }
.consent__text { margin: 0 0 12px; }
.consent__text a { color: #5315B8; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent__necessary {
  border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer;
  background: #F5F2FB; color: #371373; font: inherit; font-weight: 700;
}