/* ==========================================================================
   Kara Learning — sales funnel
   Visual system. Restyle the whole site from this file.

   Direction: OFF+BRAND. (itsoffbrand.com) — warm off-white ground, one neutral
   grotesque set in huge tight uppercase, tiny uppercase labels, hairline rules
   used structurally, faint dotted concentric circles, a soft iridescent orb,
   and pill buttons. Values were read off the reference's computed styles and
   sampled from its rendered pixels, not estimated from a screenshot:
       ground   rgb(229,228,224)    #E5E4E0
       ink      rgb(29,29,29)       #1D1D1D
       hairline rgba(111,111,111,.2)
       accent   #0A1F78   (the indigo the reference sets its display word in)
   The reference's typeface is proprietary (Ataero Retina OB Edition); Archivo
   is used here as the closest free neutral grotesque.
   ========================================================================== */

/* On an article page the reading panel is the page. The ambient orb and the two
   drifting canvases are fixed over everything, and running them behind a column of
   prose is both the low-contrast text the owner keeps flagging and motion where
   nothing should move — so both layers stand down here. */
.page-art .ambient,
.page-art .drifters, .page-form .drifters { display: none; }   /* prose and forms */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/archivo-latin.woff2") format("woff2-variations"),
       url("/static/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens */
:root {
  /* one dial for the site's running text - "half a size smaller" than the
     design's own sizes, so a single number here adjusts every paragraph,
     lede and list on every page */
  --text-scale: .94;
  /* ground & surfaces */
  --ground:      #ffffff;
  --ground-2:    #eae9e5;
  --surface:     #ffffff;
  --surface-2:   #ffffff;
  --ink-surface: #1d1d1d;

  /* ink */
  --ink:         #1d1d1d;
  --ink-2:       rgba(29, 29, 29, .68);
  --ink-3:       rgba(29, 29, 29, .52);
  --ink-4:       rgba(29, 29, 29, .34);
  --on-dark:     #eceae6;

  /* accent — the indigo the reference sets its display word in */
  --accent:      #0a1f78;
  --accent-2:    #14309c;
  --accent-soft: rgba(10, 31, 120, .10);

  /* the orb's palette, sampled from the reference's rendered blob */
  --orb-blush:   #f7cdbf;
  --orb-peach:   #f3b49e;
  --orb-gold:    #ffd84d;
  --orb-amber:   #f5a623;
  --orb-blue:    #114684;
  --orb-sky:     #7fd3f0;

  /* the orb reads as "clearly animating" only when it is large; the reference
     runs it at 80vh and pins it to the viewport centre */
  --orb-size: min(80vh, 700px);

  /* structure */
  --hairline:      rgba(111, 111, 111, .22);
  --hairline-soft: rgba(111, 111, 111, .13);
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   30px;
  --r-pill: 999px;

  /* contemporary layer: a brighter tile that lifts off the warm ground on
     soft stacked shadows rather than a hard hairline outline */
  --surface-3:  #ffffff;
  --shadow-sm:  0 1px 2px rgba(29, 29, 29, .05), 0 4px 12px -6px rgba(29, 29, 29, .10);
  --shadow-md:  0 2px 4px rgba(29, 29, 29, .05), 0 14px 34px -18px rgba(29, 29, 29, .20);
  --shadow-lg:  0 3px 6px rgba(29, 29, 29, .05), 0 26px 60px -26px rgba(29, 29, 29, .26);

  /* rhythm — this owner reads a wide gap as a defect. ~58px bands. */
  --band:         clamp(26px, 3vw, 58px);
  --band-tight: clamp(34px, 3.6vw, 46px);
  --gutter:     clamp(18px, 4vw, 40px);
  --shell:      1240px;
  --nav-h:      96px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--d-font);
  font-size: calc(31px * var(--text-scale));
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.005em;
  word-spacing: 0.035em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* ANY element with [hidden] must actually be hidden. Component rules that set
   a display value (e.g. `.field__err { display: block }`) otherwise beat the
   UA's [hidden] rule and the element renders anyway -- which is exactly how
   every field printed its error message on a clean form. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--ink); color: var(--ground); }

/* ============================================================ AMBIENT ===
   The reference's ground: flat warm off-white with faint dotted concentric
   circles drawn across it. Structure only — no gradient wash, no glow.
   NOTE: every section must stay background-transparent or it paints over this.
   ========================================================================= */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.ambient__veil {
  position: absolute;
  inset: 0;
  background: #fff;   /* was a beige wash top and bottom - the page reads white now */
}
/* --------------------------------------------------------------------------
   The orb and its dashed rings — the reference's own hero motion.

   Two things move, and both are taken from the reference's measured
   behaviour rather than guessed: the ORB is a canvas whose colour lobes orbit
   (a CSS radial-gradient can only be rotated about its own centre, which at
   these sizes is imperceptible — measured 0.8% of hero pixels changed over
   two seconds), and the RINGS are dashed circles turning slowly in OPPOSITE
   directions, which is what makes their dashes visibly travel (~6 deg/s on
   the reference, 0.00% changed for the control frame).

   Both are pinned to the viewport centre like the reference's `.orb-w`
   (`position: fixed; inset: 0; justify-content: center`), not parked inside
   the hero, so the motion is still there as the reader scrolls.
   -------------------------------------------------------------------------- */
.orbw {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.orbw__orb {
  position: relative;
  width: var(--orb-size);
  height: var(--orb-size);
  border-radius: 50%;
  /* travels as well as morphs: a colour shift alone reads as "not moving" */
  animation: orbDrift 19s ease-in-out infinite;
  will-change: transform;
}
/* Left to right across the hero and back. The travel lives here, on its own
   element, so the pointer-follow transform on .orbw__follow cannot fight it —
   two animations on one element's transform means the last one silently wins. */
@keyframes orbDrift {
  0%   { transform: translate3d(-22vw, -1.6vh, 0); }
  50%  { transform: translate3d(22vw, 1.8vh, 0); }
  100% { transform: translate3d(-22vw, -1.6vh, 0); }
}
/* Small to big and back, on its own element. Scale cannot share a transform
   with the travel above — whichever animation is declared last wins and the
   other disappears with no warning. */
.orbw__grow {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: orbGrow 7.5s cubic-bezier(.42, 0, .58, 1) infinite;
  will-change: transform;
}
@keyframes orbGrow {
  0%   { transform: scale(.38); }
  45%  { transform: scale(1.06); }
  62%  { transform: scale(1.00); }
  100% { transform: scale(.38); }
}
/* the wrapper the pointer drags toward the cursor */
.orbw__follow {
  position: relative;
  display: block;
  will-change: transform;
}
.orbw__canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.orbw__ring {
  position: absolute;
  border: 1px dashed rgba(111, 111, 111, .34);
  border-radius: 50%;
  will-change: transform;
}
.orbw__ring--a { width: var(--orb-size); height: var(--orb-size); animation: orbRingA 38s linear infinite; }
.orbw__ring--b { width: calc(var(--orb-size) * 1.24); height: calc(var(--orb-size) * 1.24); animation: orbRingB 48s linear infinite; }
@keyframes orbRingA { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes orbRingB { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

@media (prefers-reduced-motion: reduce) {
  .orbw__ring,
  .orbw__orb,
  .orbw__grow { animation: none; }
}

/* paper grain, so wide flat areas do not band */
.ambient__grain {
  position: absolute;
  inset: 0;
  opacity: .55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* =============================================================== LAYOUT = */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.band { padding-block: var(--band); position: relative; }
.band--tight { padding-block: var(--band-tight); }
section[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }

/* ============================================================== TYPEFACE = */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 23px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink);
  margin-bottom: 16px; padding: 9px 18px;
  border-radius: var(--r-pill); background: var(--surface-3);
  box-shadow: var(--shadow-sm);
}

.eyebrow::before {
  content: ""; flex: none; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
}
.eyebrow::before { content: "("; color: var(--ink-3); margin-right: 3px; }

.display {
  font-size: clamp(38px, 7.6vw, 96px);
  line-height: .96;
  font-weight: 500;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  text-wrap: balance;
}
.display span { display: block; }         /* no accidental side-by-side lines */

.h2 {
  font-size: clamp(30px, 5vw, 62px);
  line-height: .98;
  font-weight: 500;
  letter-spacing: -0.026em;
  text-transform: uppercase;
}
.h2 span { display: block; }

.h3 {
  font-size: clamp(34px, 3.6vw, 42px);
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.32;
}

/* the reference sets one word of a display line in the indigo */
.script {
  font-family: inherit;
  font-weight: 500;
  letter-spacing: inherit;
  color: var(--accent);
}

.lede {
  font-size: clamp(calc(28px * var(--text-scale)), calc(2.6vw * var(--text-scale)), calc(32px * var(--text-scale)));
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}
.body { color: var(--ink-2); }
.muted { color: var(--ink-3); }
.tiny { font-size: 26px; line-height: 1.58; color: var(--ink-3); }

/* the old gradient-clipped headline; flat ink is the reference's treatment */
.gradient-ink {
  color: var(--ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.section-head { max-width: 820px; margin-bottom: 32px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .lede { margin-top: 16px; }

/* ================================================================ BUTTON = */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
  max-width: 100%;
  text-align: center;
}
.btn--primary {
  color: var(--on-dark);
  background: var(--ink-surface);
  border-color: var(--ink-surface); }
.btn--primary:hover { background: #000; transform: translateY(-1px); }
.btn--ghost {
  color: var(--ink);
  background: transparent;
  border-color: var(--hairline);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(255,255,255,.45); }
.btn--lg { padding: 16px 32px; font-size: 29px; min-height: 54px; }
.btn--block { width: 100%; }
/* the reference appends an arrow to its actions */
.btn--primary::after { content: "→"; font-weight: 400; }
.btn--ghost::after   { content: "↗"; font-weight: 400; }

/* ================================================================== NAV = */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 60;
  display: flex;
  align-items: center;
  transition: background-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.nav.is-stuck {
  /* fully opaque: at 2x text the nav is 96px tall, and anything less than
     solid let the page text show through and read as overlapping type */
  background: var(--ground);
  border-bottom: 1px solid var(--hairline-soft);
}
.nav__inner {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 34px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 9px;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* the reference's mark is a black cross, not a coloured tile */
.wordmark__mark {
  width: 20px; height: 20px;
  flex: none;
  position: relative;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.wordmark__mark::before,
.wordmark__mark::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  border-radius: 1px;
}
.wordmark__mark::before { width: 100%; height: 3px; }
.wordmark__mark::after  { width: 3px; height: 100%; }

.nav__pill {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: transparent;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .25s, background-color .25s;
}
.nav__pill:hover { border-color: var(--ink); background: rgba(255,255,255,.45); }
.nav__pill i { font-style: normal; font-size: 30px; line-height: 1; }

.nav__right { justify-self: end; display: flex; align-items: center; gap: 22px; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  white-space: nowrap;
  transition: color .2s;
}
.nav__link:hover { color: var(--accent); }
.nav__link::after { content: "↗"; margin-left: 6px; font-weight: 400; }
.nav__cta {
  min-height: 46px;
  padding: 11px 22px;
  font-size: clamp(13px, 1.1vw, 16px);
  white-space: nowrap;
}
.nav__cta-short { display: none; }
@media (max-width: 940px) { .nav__link { display: none; } }
@media (max-width: 620px) {
  /* The Join button goes on phones, on the owner's instruction. It is the one
     thing in the bar that can go without losing a route: the hero has its own
     button and the menu still carries "Enquire About Training", so the form is
     reachable from both. What is left — the wordmark and Menu — gets the width. */
  .nav__cta { display: none; }
}
/* the brand name is worth keeping on phones; it only goes when the nav can no
   longer hold it without the wordmark crowding the buttons */
@media (max-width: 340px) {
  .wordmark span:last-child { display: none; }
}

/* menu overlay — the reference's is a full sheet on the off-white ground */
.menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: var(--ground);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s var(--ease), visibility .32s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__close {
  position: absolute;
  top: 14px; right: 20px;
  width: 46px; height: 46px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: transparent;
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
}
.menu__close:hover { border-color: var(--ink); }
.menu__list { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.menu__list a {
  display: inline-flex;
  align-items: center;
  /* The owner asked for much smaller links in the menu. These were set at
     display scale (up to 68px) like the page headings, which made the overlay
     read as a poster rather than a list of destinations. Sized to the site's
     reading scale instead, still uppercase and still a 44px tap target. */
  min-height: 44px;
  padding: 2px 0;
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1.08;
  color: var(--ink);
  transition: color .2s, transform .3s var(--ease);
}
.menu__list a:hover { color: var(--accent); transform: translateX(10px); }

/* Laptop and up: bigger than the phone size, and the stack is flush right.
   On a phone the list stays left-aligned and small (the owner asked for both,
   in that order); from 941px the links end on a common right edge instead of
   hanging off the centre line. */
@media (min-width: 941px) {
  .menu__list { text-align: right; align-items: flex-end; }
  .menu__list a { font-size: clamp(20px, 1.75vw, 26px); }
}

/* =============================================================== HERO ===
   The reference's hero: display lines stacked at display scale, each line
   indented differently, a soft iridescent orb behind them, and a scroll cue.
   The markup's three zones are re-laid-out here in CSS alone, so the template
   does not have to change.
   ========================================================================= */
.hero {
  position: relative;
  /* This used to sit flush under the opening picture - no top padding at all, so
     the photograph and this statement read as one block. The company section now
     sits between them, so the statement needs its own air above it again. */
  padding-top: var(--band);
  padding-bottom: var(--band);
  overflow: hidden;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "core core" "left right";
  align-items: end;
  gap: clamp(24px, 4vw, 46px) clamp(20px, 4vw, 60px);
}
.hero__core { grid-area: core; position: relative; }
.hero__aside {
  font-size: 27px;
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 38ch;
}
.hero__aside b { color: var(--ink); font-weight: 700; }
.hero__aside--l { grid-area: left; text-align: left; }
.hero__aside--r { grid-area: right; text-align: right; margin-left: auto; }

.hero__eyebrow {
  display: inline-block;
  padding: 6px 13px;
  margin-bottom: 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero__word {
  font-size: clamp(54px, 13vw, 164px);
  line-height: .86;
  font-weight: 500;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-shadow: none;
}
.hero__small {
  display: block;
  font-size: clamp(22px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  line-height: .98;
  /* darker than the site's usual secondary ink: this line crosses the orb as
     it travels, and measured 1.9:1 against the old palette's dark band */
  color: rgba(29, 29, 29, .82);
  margin: 8px 0 6px;
  padding-left: 8%;
}

/* the reference indents each display line differently — keep that rhythm, and
   drop the old tilted glass slabs for a plain type line in the accent */
.panels { perspective: none; display: block; animation: none; padding-left: 2%; }
.panel {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  transition: none;
}
.panel:nth-child(2) { transform: none; }
.panel:hover { transform: none; }
.panel__handles { display: none; }
.panel__script {
  font-size: clamp(30px, 7.6vw, 96px);
  line-height: .96;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: none;
}
.panel--wide .panel__script { font-size: clamp(26px, 6.2vw, 78px); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.hero__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: calc(25px * var(--text-scale));
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero__strip li { display: inline-flex; align-items: center; gap: 8px; }
/* these are downloads, so they have to look like it: solid ink rather than the
   muted grey, a rule under each, and an arrow after it on hover */
.hero__strip a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--ink-4);
}
.hero__strip a::after { content: " ↓"; color: var(--accent); font-weight: 800; }
.hero__strip a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.hero__strip li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink);
  flex: none;
}
@media (max-width: 620px) {
  /* the strip sits on its own line per guide on a phone, and 23px of text is a
     mean tap target — give each row a little height */
  .hero__strip { gap: 8px 16px; font-size: 23px; }
  .hero__strip a { padding: 7px 0; }
}

@media (max-width: 860px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "core" "left" "right";
    gap: 22px;
  }
  .hero__aside, .hero__aside--l, .hero__aside--r {
    max-width: 58ch;
    text-align: left;
    margin-inline: 0;
  }
  .hero__small { padding-left: 0; }
  .panels { padding-left: 0; }
}

/* ============================================================== WHO WE ARE
   The company introduction. Sits directly under the hero, so it carries the
   "who is telling me this" job before the argument starts. Two columns on
   desktop: the statement left, the three training areas right. */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: start;
  border-radius: var(--r-xl);
  background: var(--surface-3);
  box-shadow: var(--shadow-md);
  padding: clamp(30px, 4.4vw, 56px);
}
.about__intro .lede { max-width: 46ch; }
.about__list { list-style: none; margin: 0; padding: 0; }
.about__item { padding: clamp(14px, 1.8vw, 22px) 0; border-top: 1px solid var(--hairline); }
.about__item:first-child { border-top: 0; padding-top: 0; }
.about__name { display: block; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.about__text { display: block; color: var(--ink-3); }

@media (max-width: 900px) {
  .about { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* ============================================================= PROBLEM == */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(22px, 3.4vw, 56px);
  align-items: start;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

.prompt-weak {
  position: relative;
  padding: 24px 26px 26px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.prompt-weak__tag {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.prompt-weak__text {
  font-size: clamp(18px, 2.1vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.3;
}
.prompt-weak--good { background: var(--accent-soft); border-color: rgba(10,31,120,.24); }
.prompt-weak--good .prompt-weak__tag { color: var(--accent); }

.decisions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.decisions { display: grid; gap: 9px; }

.decisions li {
  display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 12px 18px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  box-shadow: var(--shadow-sm);
  font-size: 26px; color: var(--ink-2);
}
.decisions li span {
  font-size: 23px;
  font-weight: 700;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) { .decisions { grid-template-columns: 1fr; } }

.callout {
  margin-top: 24px;
  padding: 20px 0 0;
  border-top: 1px solid var(--hairline);
  font-size: 29px;
  color: var(--ink);
  font-weight: 500;
}

/* ============================================================= FORMULA == */
.stepper {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 46px);
  align-items: start;
}
@media (max-width: 900px) { .stepper { grid-template-columns: 1fr; } }

.stepper__rail { display: flex; flex-direction: column; }
.step-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 54px;
  padding: 14px 2px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--hairline-soft);
  background: none;
  color: var(--ink-3);
  text-align: left;
  cursor: pointer;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color .2s var(--ease), padding-left .25s var(--ease);
}
.step-btn:hover { color: var(--ink); }
.step-btn[aria-selected="true"] {
  color: var(--ink);
  background: none;
  border-bottom-color: var(--ink);
  box-shadow: none;
  padding-left: 10px;
}
.step-btn__n {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-4);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.step-btn[aria-selected="true"] .step-btn__n { color: var(--accent); }

.step-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.step-panel__q {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -0.024em;
  line-height: 1.2;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.step-panel__example {
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  font-size: calc(31px * var(--text-scale));
  line-height: 1.62;
  color: var(--ink);
}
.step-panel__example em {
  display: block;
  font-style: normal;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.locklists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}
@media (max-width: 560px) { .locklists { grid-template-columns: 1fr; } }
.locklists h4 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.locklists--avoid h4 { color: var(--ink-3); }
.locklists li {
  display: flex;
  gap: 10px;
  font-size: 29px;
  color: var(--ink-2);
  padding: 4px 0;
}
.locklists li::before {
  content: "";
  width: 14px; height: 1px;
  margin-top: 11px;
  flex: none;
  background: var(--ink-4);
}

.builder {
  margin-top: 28px;
  padding: 24px 0 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: none;
}
.builder__label {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.builder__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; }
.builder__part {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: 27px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.builder__part:nth-child(odd) { border-color: rgba(10,31,120,.30); }
.builder__plus { color: var(--ink-4); font-weight: 400; font-size: 28px; }

.compare { display: grid; gap: 0; margin-top: 26px; }
.compare__row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.compare__row:last-child { border-bottom: 0; }
.compare__tag {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.compare__row--say .compare__tag { color: var(--accent); }
.compare__row--say .compare__text { color: var(--ink); font-weight: 500; }
.compare__text { font-size: 31px; color: var(--ink-3); }
@media (max-width: 560px) {
  .compare__row { grid-template-columns: 1fr; gap: 6px; }
}

/* =============================================================== SCENE == */
.timeline { margin-top: 4px; }
.timeline__bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--hairline);
  background: none;
}
.tl {
  padding: 18px 16px 20px 0;
  border-radius: 0;
  background: none;
  border: 0;
  border-top: 2px solid transparent;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.tl:hover { background: rgba(255,255,255,.45); }
.tl[aria-selected="true"] {
  background: none;
  border-top-color: var(--ink);
  box-shadow: none;
}
.tl__time {
  display: block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tl[aria-selected="true"] .tl__time { color: var(--accent); }
.tl__name {
  display: block;
  margin-top: 8px;
  font-size: 31px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tl[aria-selected="true"] .tl__name { color: var(--ink); }
.tl__job { display: block; margin-top: 6px; font-size: 26px; color: var(--ink-3); }
@media (max-width: 760px) {
  .timeline__bar { grid-template-columns: minmax(0, 1fr); }
}

.holds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.holds li {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: transparent;
  font-size: 26px;
  color: var(--ink-2);
}

.cards {
  display: grid;
  /* max 3 columns on laptop */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.card {
  padding: 28px 28px 30px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, .8);
  background: var(--surface-3);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .28s var(--ease), transform .28s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.card h4 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin-bottom: 9px;
}
.card p { font-size: calc(26px * var(--text-scale)); color: var(--ink-2); line-height: 1.58; }

.onejob { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.onejob li {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: transparent;
  font-size: 27px;
  color: var(--ink-2);
}
.onejob li b { color: var(--ink-4); font-size: 23px; letter-spacing: .06em; }

/* ============================================================ IDENTITY == */
.layers { display: grid; gap: 0; }
.layer {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--hairline-soft);
  background: none;
}
.layer:last-child { border-bottom: 0; }
.layer__kicker {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.layer h4 { margin-top: 7px; font-size: 34px; font-weight: 600; letter-spacing: -0.014em; }
.layer p { font-size: calc(29px * var(--text-scale)); color: var(--ink-2); }
@media (max-width: 620px) { .layer { grid-template-columns: 1fr; gap: 8px; } }

.golden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 620px) { .golden { grid-template-columns: 1fr; } }
.golden__box {
  padding: 24px 24px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
}
.golden__box--ok { border-color: rgba(10,31,120,.24); background: var(--accent-soft); }
.golden__box--no { border-color: var(--hairline); background: #e6e3df; }
.golden__box h4 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--ink);
}
.golden__box--ok h4 { color: var(--accent); }
.golden__box li {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 36px;
  font-size: 30px;
  color: var(--ink-2);
}
.golden__box li::before {
  content: "";
  width: 16px; height: 1px;
  flex: none;
  background: var(--ink-4);
}

/* ================================================================ PATH == */
.guides {
  display: grid;
  /* 2x body text: a 276px card cannot hold a title this size, so 3 columns */
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
}
.guide {
  display: flex; flex-direction: column; gap: 12px;
  min-height: 46px; padding: 30px 30px 32px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, .8);
  background: var(--surface-3);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .28s var(--ease), transform .28s var(--ease);
}

.guide:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.guide__n {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.guide h3 { font-size: 36px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.26; }
.guide p { font-size: calc(26px * var(--text-scale)); color: var(--ink-2); flex: 1; }
.guide__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
}

/* ============================================================ SHOWCASE == */
.reel-group { margin-bottom: 24px; }
.reel-group:last-of-type { margin-bottom: 0; }
.reel-group__title {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
}
/* flex, not grid: 10 clips at 3-across leaves a lone card, and centring
   the last row splits that gap evenly instead of leaving one empty side */
.reels {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  max-width: 960px;
  margin: 0 auto;
}

.reel {
  position: relative;
  display: block;
  /* exactly three per row, gap accounted for */
  flex: 0 1 calc((100% - 28px) / 3);
  margin: 0;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 0;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
  cursor: pointer;
}
.reel:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.reel__poster, .reel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reel__poster { transition: opacity .35s var(--ease); }
.reel__video { opacity: 0; transition: opacity .35s var(--ease); }
.reel.is-playing .reel__video { opacity: 1; }
.reel.is-playing .reel__poster { opacity: 0; }
.reel__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(20, 20, 20, .86));
}
.reel__cap {
  position: absolute;
  left: 14px; right: 14px; bottom: 13px;
  z-index: 2;
  pointer-events: none;
}
.reel__name {
  display: block;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.3;
}
.reel__meta {
  display: block;
  margin-top: 4px;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}
.reel__play {
  position: absolute;
  z-index: 3;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.75);
  background: rgba(20, 20, 20, .30);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              opacity .25s var(--ease), transform .25s var(--ease);
}
.reel__play:hover { background: rgba(20, 20, 20, .72); border-color: #fff; }
/* a soft ring that keeps breathing while the card is idle */
.reel__play::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  animation: ring 3.4s var(--ease) infinite;
}
@keyframes ring {
  0%   { transform: scale(.88); opacity: .80; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
.reel.is-playing .reel__play { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
.reel.is-playing:hover .reel__play,
.reel.is-playing .reel__play:focus-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .reel__play::before { animation: none; }
}
/* one clip at a time: a card that lost playback says so rather than sitting
   on a silent picture with no explanation */
.reel__status {
  position: absolute;
  z-index: 4;
  left: 14px; top: 13px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(20, 20, 20, .82);
  border: 0;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}

/* =============================================================== OFFER == */
.offer { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 940px) { .offer { grid-template-columns: 1fr; } }

.stack { display: grid; gap: 0; }
.stack li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.stack li:last-child { border-bottom: 0; }
.stack__tick {
  width: 22px; height: 22px;
  flex: none;
  margin-top: 2px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: var(--on-dark);
  background: var(--ink-surface);
  box-shadow: none;
}
.stack h4 { font-size: 32px; font-weight: 600; margin-bottom: 5px; letter-spacing: -0.012em; }
.stack p { font-size: calc(26px * var(--text-scale)); color: var(--ink-2); }

.workshop {
  padding: 34px 32px 36px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, .8);
  background: var(--surface-3);
  box-shadow: var(--shadow-lg);
}
.workshop__flag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid var(--hairline);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.workshop h3 {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 500;
  letter-spacing: -0.026em;
  text-transform: uppercase;
  line-height: 1.02;
}
.workshop > p { margin-top: 14px; font-size: calc(27px * var(--text-scale)); color: var(--ink-2); }
.workshop__points { margin: 22px 0 24px; display: grid; gap: 10px; }
.workshop__points li {
  display: flex;
  gap: 12px;
  font-size: 26px;
  color: var(--ink-2);
}
.workshop__points li::before {
  content: "";
  width: 5px; height: 5px;
  margin-top: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
}
.workshop__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 0 22px;
  border-top: 1px solid var(--hairline);
  margin-bottom: 22px;
}
.workshop__facts dt {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.workshop__facts dd { font-size: 32px; font-weight: 600; color: var(--ink); }

/* ================================================================= FAQ == */
.faq { display: grid; gap: 12px; max-width: 940px; }
.faq details {
  border-radius: var(--r-lg);
  background: var(--surface-3);
  box-shadow: var(--shadow-sm);
  padding: 0 26px;
  transition: box-shadow .28s var(--ease);
}
.faq details:hover { box-shadow: var(--shadow-md); }
.faq details[open] { box-shadow: var(--shadow-md); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 46px;
  padding: 22px 0;
  font-size: clamp(34px, 4.2vw, 44px);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-3);
  transition: transform .25s var(--ease), color .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); color: var(--ink); }
.faq details p {
  padding: 0 0 26px;
  font-size: calc(28px * var(--text-scale));
  color: var(--ink-2);
  max-width: 78ch;
}

/* =============================================================== CLOSE == */
.close {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  background: var(--surface);
  padding: clamp(28px, 4.4vw, 54px);
  overflow: hidden;
}
.close__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 940px) { .close__grid { grid-template-columns: 1fr; } }
.close__head {
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: .98;
  font-weight: 500;
  letter-spacing: -0.028em;
  text-transform: uppercase;
}
.close__head span { display: block; }
.wa {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  margin-top: 24px;
  font-size: 30px;
  color: var(--ink-2);
}
.wa b {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--hairline);
}
.wa b span {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  font-size: 26px;
}

/* what happens next — fills the closing band's left column with real content */
.nextsteps {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.nextsteps__title {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.nextsteps li {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 16px;
  padding: 10px 0;
  align-items: baseline;
  border-bottom: 1px solid var(--hairline-soft);
}
.nextsteps li:last-child { border-bottom: 0; }
.nextsteps__when {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
  text-transform: uppercase;
}
.nextsteps__what { font-size: 29px; color: var(--ink-2); }
@media (max-width: 520px) {
  .nextsteps li { grid-template-columns: 1fr; gap: 3px; }
}

.form {
  padding: 28px 26px 30px;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  backdrop-filter: none;
}
.form h3 {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.field input, .field select {
  width: 100%;
  min-height: 50px;
  padding: 14px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 32px;      /* 16px stops iOS zooming the page on focus */
  transition: border-color .2s, background-color .2s;
}
.field input::placeholder { color: var(--ink-4); }
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--ink);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231d1d1d' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.field__err { display: block; margin-top: 8px; font-size: 26px; color: #a01b1b; }
.field--bad input, .field--bad select { border-color: #a01b1b; }
.form__micro { margin-top: 16px; font-size: 25px; color: var(--ink-3); }

.thanks {
  padding-top: calc(var(--nav-h) + 74px);
  padding-bottom: 84px;
  text-align: center;
}
.thanks__mark {
  width: 64px; height: 64px;
  margin: 0 auto 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 48px;
  color: var(--on-dark);
  background: var(--ink-surface);
  box-shadow: none;
}

/* ============================================================== FOOTER == */
.footer {
  padding-block: var(--band-tight) 32px;
  font-size: 26px;
}
.footer__grid > :first-child { grid-column: 1 / -1; }

.footer__grid {
  display: grid;
  /* brand on its own row, then the three link columns side by side — a
     4-column attempt left "Ask" alone with two empty cells beside it */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
  margin-bottom: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .footer__grid { grid-template-columns: 1fr; }
}
.footer__tag { margin-top: 14px; color: var(--ink-3); max-width: 32ch; font-size: 27px; }
.footer h4 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.footer li { margin-bottom: 0; }
.footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-size: 26px;
  transition: color .2s;
}
.footer li a:hover { color: var(--accent); }
.footer__wa {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  margin: 28px 0 0; padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.footer__wa-label {
  font-size: 23px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.footer__wa-link {
  font-size: 28px; font-weight: 800; color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid var(--accent); padding-bottom: 1px;
}
.footer__wa-link:hover { color: var(--accent); }

.footer__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  font-size: 25px;
  color: var(--ink-3);
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--ground);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

.admin { padding-top: calc(var(--nav-h) + 44px); padding-bottom: 64px; }
.admin table { width: 100%; border-collapse: collapse; font-size: 28px; }
.admin th, .admin td {
  text-align: left;
  padding: 13px 12px;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: top;
}
.admin th {
  font-size: 24px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.admin__wrap { overflow-x: auto; }

/* ================================ 3-COLUMN CAP, NARROWER SCREENS ==========
   Laptop keeps every section to three columns; below that the cap steps
   down so nothing gets squeezed. */
@media (max-width: 940px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reels { max-width: none; }
  .reels .reel { flex: 0 1 calc((100% - 14px) / 2); }
  .holds,
  .onejob { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .reels .reel { flex: 0 1 100%; }
}

/* ============================================================================
   DESIGNER layer — the sections re-set in Untitled UI's design language, over
   the light format and the type scale the site already uses. Everything below
   the hero only; the hero keeps its own tokens, so none of it can reach it.

   What makes this read "designed" rather than plain, taken from the reference:
   headings at semibold with tight tracking; a single violet accent; buttons at
   an 8px radius carrying an inset top highlight (the soft 3D edge the
   reference uses on every button); cards at 16px under a layered shadow that
   also draws a hairline ring; a dot-grid texture behind the closing band; and
   numbered chips so the eye has something to follow through the page.
   ========================================================================== */
:root {
  --d-font:       "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
  --d-bg:         #ffffff;
  --d-bg-2:       #ffffff;
  --d-ink:        #171717;
  --d-ink-2:      #525252;
  --d-ink-3:      #737373;
  --d-line:       #e5e5e5;
  --d-line-soft:  rgba(10, 13, 18, .08);
  --d-violet:     #7f56d9;
  --d-violet-dk:  #6941c6;
  --d-violet-dk2: #53389e;
  --d-violet-lt:  #f4ebff;
  --d-violet-bd:  #e9d7fe;
  --d-r-btn:      8px;
  --d-r-card:     16px;
  --d-r-chip:     12px;
  --d-ring:       rgba(10, 13, 18, .08);
  --d-shadow-card: 0 0 0 1px var(--d-ring), 0 1px 2px rgba(10, 13, 18, .04),
                   0 12px 20px -10px rgba(10, 13, 18, .12);
  --d-shadow-lift: 0 0 0 1px rgba(10, 13, 18, .12), 0 2px 4px rgba(10, 13, 18, .06),
                   0 22px 34px -14px rgba(10, 13, 18, .20);
  --d-shadow-btn:  inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(10, 13, 18, .10);
}

main > .band, .footer { font-family: var(--d-font); }

/* --- bands: white and a light grey, with a dot grid behind the closing one -- */
main > .band { background: var(--d-bg); }
main > #about.band,
main > #how.band,
main > #offer.band { background: var(--d-bg-2); }

main > #how.band { position: relative; isolation: isolate; }
main > #how.band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(10, 13, 18, .07) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 78%);
          mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 78%);
}

/* --- section heads: a real badge, and semibold headings -------------------- */
.band .section-head { max-width: 1080px; margin-inline: auto; text-align: center; }

.band .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 14px; margin-bottom: 24px;
  background: var(--d-violet-lt);
  border: 1px solid var(--d-violet-bd);
  border-radius: 999px;
  font-size: 22px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--d-violet-dk);
}
.band .eyebrow::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--d-violet); box-shadow: 0 0 0 3px rgba(127, 86, 217, .16);
}

.band .h2, .band .h3, .band .card h4, .band .guide h3, .band .faq summary,
.band .workshop h3, .band .reel-group__title, .band .stack h4 {
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.022em;
  color: var(--d-ink);
}
.band .h2 { font-size: clamp(38px, 4.6vw, 62px); line-height: 1.14; }
.band .h3 { font-size: clamp(30px, 2.8vw, 42px); line-height: 1.22; }

.band .lede {
  margin-top: 20px; margin-inline: auto;
  font-size: clamp(calc(26px * var(--text-scale)), calc(2vw * var(--text-scale)), calc(30px * var(--text-scale)));
  line-height: 1.55; color: var(--d-ink-2); max-width: 58ch; text-align: center;
}
.band .card p, .band .guide p, .band .stack p, .band .faq details p,
.band .decisions li, .band .callout, .band .workshop > p,
.band .workshop__points li { color: var(--d-ink-2); }

/* --- cards: the reference's layered shadow, which draws its own hairline --- */
.band .card, .band .guide, .band .about {
  background: #fff;
  border: 0;
  border-radius: var(--d-r-card);
  box-shadow: var(--d-shadow-card);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.band .card:hover, .band .guide:hover {
  transform: translateY(-3px);
  box-shadow: var(--d-shadow-lift);
}

/* --- buttons: 8px radius and an inset top highlight ----------------------- */
.band .btn { border-radius: var(--d-r-btn); font-weight: 600; letter-spacing: -0.01em; }
.band .btn--primary {
  background: linear-gradient(26.5deg, var(--d-violet-dk), var(--d-violet-dk2));
  border-color: var(--d-violet-dk2); color: #fff; box-shadow: var(--d-shadow-btn);
}
.band .btn--primary:hover { background: linear-gradient(26.5deg, #7f56d9, #6941c6); border-color: #7f56d9; }
.band .btn--ghost {
  color: #404040; background: #fff; border-color: #d4d4d4;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(10, 13, 18, .06);
}
.band .btn--ghost:hover { border-color: #a3a3a3; color: var(--d-ink); }

/* --- the page gets a spine: a numbered chip on each card ------------------ */
.band .cards { counter-reset: dcard; }
.band .cards .card { counter-increment: dcard; }
.band .cards .card::before {
  content: "0" counter(dcard);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px; margin-bottom: 16px;
  border-radius: var(--d-r-chip);
  background: var(--d-violet-lt); border: 1px solid var(--d-violet-bd);
  color: var(--d-violet-dk); font-size: 20px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- the five steps wear five colours --------------------------------------
   Owner asked for the boxes under "How it works" to be different colours. One
   tint per box, all at the same lightness so the near-black ink keeps its
   contrast on every one of them - the type does NOT get lighter to match, which
   would make the last boxes read as faded. The numbered chip goes solid in the
   same hue, and that is what makes the difference obvious at a glance rather
   than a set of five near-identical pale panes. Tints are carried as custom
   properties on the card so the chip can read the same family.
   Scoped to #how: `.cards` is used by this section only, but the id keeps it
   from ever bleeding into another section's cards, and it beats the white
   `.band .card` rule without needing position. */
#how .cards .card { background: var(--tint-bg); border: 1px solid var(--tint-bd); }
#how .cards .card::before {
  background: var(--tint-chip); border-color: var(--tint-chip); color: #fff;
}
#how .cards .card:nth-child(1) { --tint-bg: #e7f1ff; --tint-bd: #c4daf7; --tint-chip: #2560c4; }
#how .cards .card:nth-child(2) { --tint-bg: #f1ebfe; --tint-bd: #d8c8f8; --tint-chip: #6941c6; }
#how .cards .card:nth-child(3) { --tint-bg: #fdeaf3; --tint-bd: #f7c9e0; --tint-chip: #bd2476; }
#how .cards .card:nth-child(4) { --tint-bg: #e5f7f1; --tint-bd: #bfead9; --tint-chip: #0e7657; }
#how .cards .card:nth-child(5) { --tint-bg: #fff3df; --tint-bd: #f8dcae; --tint-chip: #a96f00; }

/* --- lists and FAQ: hairline rows, an accent that actually shows ---------- */
.band .decisions { gap: 0; }
.band .decisions li { background: none; border-bottom: 1px solid var(--d-line); padding: 15px 0; }
.band .decisions li span { color: var(--d-violet-dk); font-weight: 600; font-variant-numeric: tabular-nums; }

.band .faq { gap: 0; max-width: 940px; margin-inline: auto; }
.band .faq details {
  background: none; border: 0; border-bottom: 1px solid var(--d-line);
  padding: 0; border-radius: 0; box-shadow: none;
}
.band .faq details:hover, .band .faq details[open] { box-shadow: none; }
.band .faq details p { color: var(--d-ink-2); }

.band .guide__n { color: var(--d-violet-dk); font-weight: 600; font-variant-numeric: tabular-nums; }
.band .guide__more { color: var(--d-violet-dk); font-weight: 600; }
.band .workshop__flag {
  color: var(--d-violet-dk); background: var(--d-violet-lt);
  border: 1px solid var(--d-violet-bd); border-radius: 999px; padding: 5px 14px;
}
.band .prompt-weak { background: #fff; border: 0; box-shadow: var(--d-shadow-card); border-radius: var(--d-r-card); }
.band .prompt-weak__tag { color: var(--d-violet-dk); }
.band .prompt-weak__text { color: var(--d-ink); }
.band .callout { border-top: 1px solid var(--d-line); }
.band .workshop__points li::before { background: var(--d-violet); }
.band .workshop__facts { border-top-color: var(--d-line); }

/* the masterclass card stands alone, centred */
.workshop--solo {
  max-width: 760px; margin-inline: auto; width: 100%;
  background: #fff; border: 0; border-radius: var(--d-r-card);
  box-shadow: var(--d-shadow-card);
}
.offer__free { margin-top: 26px; text-align: center; font-size: 26px; color: var(--d-ink-2); }
.offer__free a { color: var(--d-violet-dk); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.offer__free a:hover { color: var(--d-violet); }

/* --- the clip rail keeps its motion; only its frames are re-set ----------- */
.rail .reel { border-radius: var(--d-r-card); box-shadow: var(--d-shadow-card); }

/* --- footer in the same language ------------------------------------------ */
.footer { background: #ffffff; color: var(--d-ink); }
.footer .wordmark { color: var(--d-ink); }
.footer h4 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--d-ink); }
.footer .footer__tag, .footer__sub { color: var(--d-ink-3); }
.footer li a { color: var(--d-ink-2); }
.footer li a:hover { color: var(--d-violet-dk); }
.footer__grid, .footer__wa, .footer__sub { border-top-color: var(--d-line); }
.footer__wa-label { color: var(--d-ink-3); }
.footer__wa-link { color: var(--d-ink); font-weight: 600; border-bottom-color: var(--d-violet); }
.footer__wa-link:hover { color: var(--d-violet-dk); }

/* the credit line. The frame sets its small print in a muted ink, which is right
   for the legal line and wrong for a link somebody is meant to follow, so the
   studio's name carries the accent and a rule under it. */
.footer__credit a {
  color: var(--d-violet-dk, #4b2ea8);
  font-weight: 700;
  border-bottom: 1px solid rgba(105, 65, 198, .45);
  text-decoration: none;
}
.footer__credit a:hover { color: var(--d-violet, #6941c6); border-bottom-color: currentColor; }
.footer__credit a:focus-visible { outline: 3px solid rgba(105, 65, 198, .5); outline-offset: 3px; }

.footer__mega {
  font-size: clamp(96px, 21vw, 380px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: .8;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  color: rgba(10, 13, 18, .05);
  margin: .12em 0 -0.16em;
}

/* --- the proof clips: one continuously scrolling line ----------------------
   The track holds two identical sets and slides exactly one set plus one gap,
   which is what makes the loop seamless: -50% of the track is half of
   (set + gap + set), so the missing half-gap is added back in. ------------- */
.rail {
  overflow: hidden;
  padding-block: 6px;
  /* soften both ends so clips enter and leave instead of being chopped */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
}
.rail__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: rail-scroll 72s linear infinite;
}
.rail__set { display: flex; gap: 14px; }
.rail:hover .rail__track,
.rail:focus-within .rail__track { animation-play-state: paused; }

/* fixed width per clip: the row is one line and must never wrap */
.rail .reel { flex: 0 0 clamp(150px, 17vw, 236px); }

@keyframes rail-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - 7px), 0, 0); }
}

/* a visitor who asked for less motion gets a still row they can swipe */
@media (prefers-reduced-motion: reduce) {
  .rail__track { animation: none; }
  .rail { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
/* --- type scale per the owner's note ---------------------------------------
   The H1 is a single word ("DIRECT"), so it can be held at ONE fixed size and
   still fit the narrowest phone — which is what stops it collapsing to roughly
   the section-heading size on small screens. The section headings step down
   under it, and H3 steps down with them to keep the ladder intact. Body text
   is deliberately untouched. ------------------------------------------------- */
.hero__word { font-size: 88px; }

.band .h2 { font-size: clamp(32px, 3.6vw, 48px); }
.band .h3 { font-size: clamp(28px, 2.4vw, 36px); }
/* the Questions headings were still running at their old 44px — larger than
   the section headings above them. They now sit just above the answer text so
   the question still reads first without shouting. */
.band .faq summary { font-size: clamp(28px, 2.4vw, 34px); }
/* the oversized footer wordmark is deliberately wider than the page and was
   adding ~51px of horizontal scroll. `clip` (not hidden) contains it without
   forcing the vertical axis to become its own scroll container. */
.footer { overflow-x: clip; }

/* the wordmark is already wider than its box and clips itself, so the negative
   side margins were only ever adding page overflow — dropped above. */
/* --- narrow screens --------------------------------------------------------
   `.guides` and `.cards` size their tracks with a pixel minimum (340/320px)
   so the cards stay readable at the bigger body size. On the narrowest phones
   the content box is only ~284px, so the tracks could not shrink and pushed
   the page ~38px wide. Below the tablet width the minimum drops to zero and
   the grids go single-column, which is the intended phone layout anyway. --- */
@media (max-width: 700px) {
  .band .guides,
  .band .cards { grid-template-columns: minmax(0, 1fr); }
}
/* --- the "Who we are" paragraph -------------------------------------------
   Its heading and label are already left aligned because this block does not
   use the centred section head; only the paragraph was inheriting the centred
   `.lede` treatment, which is why it looked off. It now sits left, under its
   heading, a step smaller than the general body size. --------------------- */
.about .lede {
  text-align: left;
  margin-inline: 0;
  font-size: clamp(calc(22px * var(--text-scale)), calc(1.7vw * var(--text-scale)), calc(24px * var(--text-scale)));
  max-width: 46ch;
}

/* ============================================================================
   CLOUD BANNER — the framed opening banner, sitting above the existing hero.

   The reference is a device-style white frame with big radii holding a nav row
   and an inset rounded stage. Reproduced here as frame + stage, with its own
   words and its own art: the sky and every cloud are drawn in CSS, so there is
   no image to download and nothing borrowed from the reference.

   The clouds drift by animating `background-position-x` across a repeating
   tile. Every gradient inside one layer shares the SAME background-size, which
   is what makes shifting by that width loop without a visible jump.
   ========================================================================== */
.cloud {
  /* starts flush under the bar so the two read as ONE white card */
  padding: var(--nav-h) 0 0;
  background: var(--ground);
}
main > .cloud { background: var(--ground); }

.cloud__frame {
  max-width: none;
  margin-inline: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.cloud__stage {
  container-type: size;   /* lets the birds fly on paths measured in the banner's own size */
  position: relative;
  /* definite width: the stage must span the frame, never shrink to hold the ratio */
  width: 100%;
  min-width: 100%;
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 16 / 9;
  max-height: 86vh;
  min-height: 320px;
  isolation: isolate;
  background: linear-gradient(180deg,
      #0d55b4 0%, #1f74cd 18%, #3f95de 36%, #7ab6e9 50%,
      #cfc9e2 63%, #ffb9d8 78%, #ff9dc7 100%);
}

/* --- drifting cloud layers ------------------------------------------------ */
/* --- the words ------------------------------------------------------------ */
.cloud__words {
  position: absolute; inset: 0 0 38% 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center; pointer-events: none;
}
.cloud__word {
  margin: 0;
  font-size: min(24vw, 290px);
  line-height: .84;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: rgba(255, 255, 255, .93);
  text-transform: uppercase;
  /* the wide soft shadow alone gave the word no edge against a bright cloud; the
     two tight ones put a dark rim on the letterforms themselves */
  text-shadow: 0 1px 4px rgba(18, 45, 92, .40),
               0 2px 16px rgba(18, 45, 92, .34),
               0 10px 46px rgba(30, 74, 132, .3);
}
.cloud__note {
  position: absolute; top: clamp(14px, 2vw, 30px); right: clamp(16px, 2.4vw, 38px);
  margin: 0;
  font-size: clamp(13px, 1.1vw, 18px);
  font-weight: 500; letter-spacing: .04em;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 10px rgba(38, 82, 138, .30);
}

/* --- controls ------------------------------------------------------------- */
.cloud__cta {
  position: absolute; z-index: 3;
  right: clamp(16px, 3vw, 46px); bottom: clamp(58px, 9vw, 104px);
  display: inline-flex; align-items: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: #101010; color: #fff;
  font-size: clamp(15px, 1.2vw, 19px); font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(10, 13, 18, .6);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.cloud__cta:hover { transform: translateY(-2px); background: #000; }

.cloud__play {
  position: absolute; z-index: 3; left: clamp(18px, 3vw, 46px); bottom: clamp(14px, 2.2vw, 28px);
  display: grid; place-items: center;
  width: clamp(44px, 3.6vw, 60px); height: clamp(44px, 3.6vw, 60px);
  border-radius: 50%;
  background: #fff; color: #101010;
  text-decoration: none; font-size: 15px;
  box-shadow: 0 10px 26px -12px rgba(10, 13, 18, .55);
  transition: transform .25s var(--ease);
}
.cloud__play:hover { transform: translateX(-50%) scale(1.06); }
.cloud__play span { margin-left: 3px; }

/* a visitor who asked for less motion gets a still sky */
@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 620px) {
  .cloud__cta { right: 50%; transform: translateX(50%); bottom: clamp(64px, 15vw, 92px); }
  .cloud__cta:hover { transform: translateX(50%) translateY(-2px); }
}

/* --- cloud geometry --------------------------------------------------------
   Every drifting layer tiles at exactly 900px and its keyframe shifts by
   exactly 900px, so the loop has no seam in time. Making the loop seamless in
   SPACE is the other half: a puff that sits on the tile edge is drawn twice,
   once at 0% and again at 100%, so the repeat joins without a change in
   density. A puff capping short of the edge instead leaves a thinner band at
   the tile boundary, which reads as a faint vertical stripe. -------------- */
/* ============================================================================
   TOP BAR — matched to the new banner's frame.

   The reference puts its nav row inside a white frame with big radii. The top
   bar now wears the same treatment: a white bar with the same large corner
   radius, the same soft shadow and the same inset the banner's frame uses, so
   the bar and the frame below it read as one system. Its links and buttons are
   untouched — only the bar's shape and colour changed.
   ========================================================================== */
.nav {
  background: transparent;
  border-bottom: 0;
  padding-inline: clamp(12px, 2vw, 26px);
}
/* the bar itself is now opaque white, so the old solid-when-stuck rule that
   stopped page text showing through has nothing left to do */
.nav.is-stuck { background: transparent; border-bottom: 0; }

.nav__inner {
  max-width: none;
  height: 100%;
  padding-inline: clamp(16px, 2.2vw, 30px);
  /* top of the card: rounded above, square below so it joins the banner */
  border-radius: 0;
  background: #fff;
  border: 0;
  box-shadow: none;
}

/* --- small screens --------------------------------------------------------
   The bar's own controls inherit the page's 28px body size, which is far too
   wide once the floating bar adds its inset, so they step down here.

   The stage must also change shape: `aspect-ratio: 16/9` combined with a
   `min-height` derives the WIDTH from the height, so on a phone it forced the
   banner to 569px and pushed the whole page sideways. Below the breakpoint the
   ratio goes portrait and the min-height is dropped, so the stage follows the
   screen width instead of dictating it. ---------------------------------- */
@media (max-width: 940px) {
  .nav { padding-inline: clamp(8px, 1.6vw, 14px); }
  .nav__inner { padding-inline: clamp(10px, 2vw, 18px); gap: 8px; }
  .wordmark { font-size: clamp(18px, 4.4vw, 28px); }
}
@media (max-width: 620px) {
  .cloud__stage { aspect-ratio: 4 / 5; min-height: 0; }
  .nav__pill { font-size: 16px; padding: 8px 12px; }
  .nav__cta  { font-size: 16px; padding: 9px 14px; }
  .wordmark  { font-size: 18px; }
}
@media (max-width: 400px) {
  .nav__inner { padding-inline: 10px; gap: 5px; }
  .wordmark { font-size: 16px; gap: 6px; }
  .nav__pill { font-size: 15px; padding: 7px 10px; }
  .nav__cta  { font-size: 15px; padding: 8px 11px; }
}

/* ============================================================================
   THE SKY — drifting cloud layers.

   Two things this has to get right:

   1. THE TILE IS ALSO THE SHIFT. Every layer tiles at exactly 900px and its
      keyframe moves the background by exactly 900px, so the loop restarts on a
      pattern identical to its own start and cannot jump. Give a layer a
      different `background-size` from the shift and a visible seam appears.

   2. POSITION MATTERS MORE THAN THE GRADIENT. A `<span>` is inline by default,
      which gives it no box at all — the gradients paint into nothing and the
      sky looks like a plain empty gradient. Each layer must be absolutely
      positioned over the stage to have any area to fill.

   The puffs are clusters of CIRCLES rather than wide ellipses: a cumulus is a
   group of round lobes sharing a base, and flat ellipses read as smears.
   ========================================================================== */
/* the pink sea: its own band at the foot, drifting the other way */
/* --- the hero subject -------------------------------------------------------------
   Sits between the wordmark and the controls: in front of the big word, behind
   the button and play control, so it reads as floating in the sky rather than
   pasted on top of the furniture. The alpha cut-out means the drop shadow has
   to be a `drop-shadow` filter (which follows the silhouette) and not a
   `box-shadow` (which would draw a rectangle around the transparent PNG). --- */
.cloud__words { z-index: 2; }
.cloud__cta, .cloud__play { z-index: 4; }

/* --- placing the small text and the shoe ----------------------------------
   The shoe lands dead centre, so the small line sits off to the side of it
   rather than behind it, which also fills the otherwise empty left of the
   frame. ------------------------------------------------------------------ */

@media (max-width: 620px) {
  .cloud__words { justify-content: flex-start; padding-top: clamp(22px, 7vw, 40px); }
}

/* --- the KARA / learning lockup -------------------------------------------
   The reference runs its word past both edges so the outer letters are cut by
   the frame — that is the "edge to edge" look. Sizing the word in `vw` makes it
   wider than the stage on purpose, and the stage's `overflow: hidden` crops it.
   "learning" sits under it as a smaller second line, spaced out so it reads as
   a designed lockup rather than a sentence. --------------------------------- */
.cloud__learn {
  margin: clamp(2px, .5vw, 10px) 0 0;
  font-size: min(4.6vw, 56px);
  font-weight: 400;
  letter-spacing: .34em;
  /* NO text-indent. It was there to balance the trailing letter-space, but it
     pushes the whole line right by that amount, so "learning" started 30px to
     the right of "Kara" on a wide screen and 9px on a phone - the lockup read as
     leaning right. With the indent gone both lines occupy exactly the same box,
     and the width measured against the word is unchanged. */
  line-height: 1;
  color: rgba(255, 255, 255, .95);
  text-transform: lowercase;
  text-shadow: 0 2px 18px rgba(30, 74, 132, .35);
}
@media (max-width: 620px) {
  .cloud__learn { font-size: min(6.4vw, 40px); letter-spacing: .26em; }
}

/* ============================================================================
   THE BANNER — the customer's own sky photograph.

   Three layers, and the ORDER is the whole point:
     1. the sky photo
     2. the KARA / learning lockup
     3. the laptop, cut out of that same photo
   so the word passes behind the laptop and is sliced by its screen, which is
   the effect the reference has.

   The two photo layers must stay in exact register or the laptop would visibly
   slide off its own background. They get the same box, the same crop and the
   same transform, so they move as one picture.
   ========================================================================== */
.cloud__sky-img,
.cloud__lap-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
  animation: sky-drift 30s ease-in-out infinite alternate;
  will-change: transform;
}
.cloud__sky-img { z-index: 1; }
.cloud__lap-img { z-index: 3; pointer-events: none; }

/* The banner is deliberately only a touch darker, and the owner asked for it
   lighter still: the type is white and the sky behind it is the brightest thing
   on the site, but over-dimming turns the sunset grey and the whole banner
   gloomy. Measured over the word block (KARA + learning), mean RGB: .74 gave
   (145,152,170) at 2.9:1 for white type, .84 gives (164,171,190) at 2.5:1 -
   brighter, and the type still reads on its own shadow. The saturation is nudged
   up so the sunset keeps its colour at the lower brightness instead of going
   grey. If it is lightened again, re-measure before going past about .88: from
   there white on this sky is under 2.1:1 and the words stop holding. */
.cloud__sky-img, .cloud__lap-img { filter: brightness(.86) saturate(1.08); }

/* the slow drift: a photograph cannot have moving clouds, so the whole scene
   pans instead, which reads as the sky sliding past the window.

   WHY THE FRAMING IS WHAT IT IS. The machine is cut into its own layer that is
   drawn ON TOP of the word, so wherever that layer is opaque it erases the word -
   including the sky slack around the machine, not just the machine itself. The page
   used to open at the leftmost point of the pan, where the cut-out's edge crossed
   the tail of KARA and of "learning" ("the laptop is blocking KARA"). Clearing the
   word needs the machine moved right by about 5-7% of the banner's width at every
   laptop size, and moving it right at all means zooming: at this stage ratio a
   right-shifted photo has to be scaled up or a strip of the stage's own gradient
   shows along the left edge. Hence scale(1.36) rather than the old 1.16, and the
   lane now opens at 12.5% (its right end, the clearest) and drifts left to 10.5%.

   Measured with the cut-out painted solid black, so the boundary is exact - open
   sky between the word's last inked pixel and the machine's edge, at the tightest
   point of the loop: 1280 104px, 1366 111px, 1440 29px, 1600 132px, 1920 164px.
   The pan is only 1.5% of the width now, so it reads as a very slow settle rather
   than a sweep; the drifting clouds and the doves carry the motion. */
@keyframes sky-drift {
  from { transform: scale(1.36) translate3d(12.5%, 0, 0); }
  to   { transform: scale(1.36) translate3d(11%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cloud__sky-img, .cloud__lap-img { animation: none; transform: scale(1.36) translate3d(11.5%, 0, 0); }
}

/* The lockup sits LEFT, in the open sky, and reaches far enough right that the
   laptop's left edge slices its last letter — the word reads, and part of it is
   behind the machine. Centring it here would park the whole word behind the
   laptop's middle and hide it completely. -------------------------------- */
.cloud__words {
  position: absolute;
  left: clamp(18px, 4vw, 76px);
  right: auto;
  top: 22%;
  bottom: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  pointer-events: none;
}
.cloud__word { font-size: min(17vw, 23vh); letter-spacing: -0.05em; }
/* The second line is sized FROM the first, so the lockup stays square as the
   word grows or the banner shrinks. The multiplier matches the INK of the two
   words, not their boxes: letter-spacing adds a gap after the last letter, so a
   line sized to match KARA's advance ends short on the right and reads as
   leaning left. Measured ink, "KARA" 197.4px against "learning" 186.1px, is what
   the 1.06 correction in these numbers comes from. */
.cloud__learn { font-size: calc(min(17vw, 23vh) * .457); }
.cloud__note  { font-size: min(1.2vw, 1.9vh); z-index: 4; }

@media (max-width: 620px) {
  .cloud__words { top: 9%; }
  .cloud__word  { font-size: min(30vw, 22vh); }
  .cloud__learn { font-size: calc(clamp(52px, 19vw, 92px) * .505); }
  }

/* --- bar type scale -------------------------------------------------------
   The bar's controls inherited the page's 28px body size, which is far too
   loud for a strip that sits above the banner. Small, quiet, evenly spaced —
   the reference keeps its bar type tiny so the banner carries the page. ---- */
.nav__pill {
  font-size: clamp(13px, 1.1vw, 16px);
  padding: 9px 16px;
  min-height: 40px;
}
.nav__right { gap: clamp(12px, 1.4vw, 22px); }
/* The nav button is deliberately smaller than a page button. It is the bar's
   own control, not a call to action in the body, so it does NOT take the shared
   --fs-btn step (clamp(19px, 1.8vw, 22px)) that `.btn, a.btn` sets later in this
   file - at 22px the pill was 312x48 and read as loud as the banner. Selector has
   to beat `.nav a.btn` (0,2,1) and `a.btn` (0,1,1), so it is qualified down to
   .nav a.btn.nav__cta. */
.nav a.btn.nav__cta { min-height: 34px; padding: 7px 15px; font-size: clamp(13px, 1vw, 15px); }
.wordmark__mark { transform: scale(.82); }

@media (max-width: 940px) {
  .wordmark { font-size: clamp(15px, 3.4vw, 19px); }
  .nav__pill, .nav__link, .nav__cta { font-size: 14px; }
}
@media (max-width: 400px) {
  .wordmark { font-size: 14px; }
  .nav__pill, .nav__nav__cta, .nav__cta { font-size: 12.5px; }
  .nav__pill { padding: 7px 11px; }
  .nav__cta  { padding: 7px 12px; }
}

/* --- note + legibility ---------------------------------------------------- */
.cloud__note {
  position: absolute;
  top: clamp(14px, 2vw, 30px);
  right: clamp(16px, 2.4vw, 38px);
  z-index: 4;
  margin: 0;
  text-align: right;
}
/* white on pale cloud needs a firmer shadow to hold up */
.cloud__learn { text-shadow: 0 1px 3px rgba(18, 45, 92, .45), 0 2px 20px rgba(24, 62, 118, .5), 0 1px 3px rgba(24, 62, 118, .35); }

/* --- phones ---------------------------------------------------------------
   On a phone the stage is portrait, so `cover` scales the wide photograph by
   its height and crops about half its width away — and the middle half is all
   laptop, which left nowhere for the word to sit. Biasing the crop to the left
   brings the open sky back in, so KARA has clear air to start in and still runs
   in behind the machine. Both photo layers must take the SAME position or they
   fall out of register.

   THE CROP IS 40%, NOT THE 14% IT WAS. At 14% the bias was so far left that on
   a phone the machine was cropped off the right edge entirely — the owner's
   report was "the laptop cannot be seen, move it in a bit", and a screenshot at
   390 showed only a sliver of keyboard at the frame's right edge. Raising the
   position moves the window right through the photograph, so the machine comes
   in from the right, and 40% is the point where it is unmistakably a laptop
   (screen AND deck in frame) while KARA and "learning" still stand on open sky
   rather than on its screen — 48% was tried and put the wordmark over the bright
   screen, which costs the white type its contrast. Desktop is untouched: this is
   a max-width: 620px rule, and the wide layout keeps 50% 44%.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .cloud__sky-img, .cloud__lap-img { object-position: 40% 46%; }
  .cloud__words { top: 16%; }
  .cloud__word  { font-size: min(20vw, 15vh); }
  .cloud__note  { font-size: 11px; top: 10px; right: 12px; }
}

/* ============================================================================
   DRIFTING CLOUD ACROSS THE BANNER

   A photograph's own clouds are frozen, so the scene pans instead — but a pan
   alone reads as a moving camera, not moving cloud. These two layers add cloud
   that genuinely travels across the picture: soft lobes drifting one way high
   up, and a pink band drifting the other way low down, so the sky is alive in
   two directions at once.

   They sit above the photo and BELOW the wordmark, so the word stays crisp.

   Both layers tile at exactly 900px and their keyframes shift by exactly 900px,
   so the loop restarts on a pattern identical to its own start and cannot jump.
   Every lobe also fits inside that 900px tile: a lobe that crosses the tile edge
   is sliced off, and the cut shows as a hard vertical seam down the sky.
   ========================================================================== */
.cloud__wisp {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: 900px 100%;
  will-change: background-position;
}
.cloud__wisp--high {
  background-image:
    radial-gradient(circle 96px at 10% 14%, rgba(255,255,255,.5), rgba(255,255,255,0) 84%),
    radial-gradient(circle 78px at 22% 10%, rgba(255,255,255,.44), rgba(255,255,255,0) 84%),
    radial-gradient(circle 104px at 36% 17%, rgba(255,255,255,.46), rgba(255,255,255,0) 84%),
    radial-gradient(circle 72px at 48% 11%, rgba(255,255,255,.4), rgba(255,255,255,0) 84%),
    radial-gradient(circle 100px at 62% 15%, rgba(255,255,255,.48), rgba(255,255,255,0) 84%),
    radial-gradient(circle 80px at 74% 10%, rgba(255,255,255,.42), rgba(255,255,255,0) 84%),
    radial-gradient(circle 98px at 86% 16%, rgba(255,255,255,.45), rgba(255,255,255,0) 84%);
  animation: wisp-right 54s linear infinite;
}
.cloud__wisp--low {
  background-image:
    radial-gradient(circle 90px at 12% 86%, rgba(255,214,235,.42), rgba(255,214,235,0) 84%),
    radial-gradient(circle 104px at 26% 92%, rgba(255,197,225,.4), rgba(255,197,225,0) 84%),
    radial-gradient(circle 84px at 40% 84%, rgba(255,222,240,.4), rgba(255,222,240,0) 84%),
    radial-gradient(circle 100px at 54% 93%, rgba(255,203,229,.42), rgba(255,203,229,0) 84%),
    radial-gradient(circle 88px at 68% 85%, rgba(255,218,238,.38), rgba(255,218,238,0) 84%),
    radial-gradient(circle 102px at 82% 91%, rgba(255,199,226,.4), rgba(255,199,226,0) 84%);
  animation: wisp-left 68s linear infinite;
}
@keyframes wisp-right { from { background-position-x: 0; } to { background-position-x: 900px; } }
@keyframes wisp-left  { from { background-position-x: 0; } to { background-position-x: -900px; } }

/* --- clouds on their own animated layer -------------------------------------
   Three drawn clouds, each on its own layer with its own speed and direction, so
   the sky has depth: the small one is far and slow, the big one is near and
   quick, and they travel opposite ways.

   They are SHAPES, not more soft white. The banner's photograph already has
   clouds in it, and a soft white gradient laid over a photographic sky reads as
   haze or lens flare however it is tuned - it is the flat underside and the
   rounded tops of a cumulus that make the eye read "cloud". The silhouette comes
   from overlapping ellipses unioned into one fill, so it costs one small SVG and
   no image request.

   Speed and size are expressed in cqw/cqh - a share of the banner's own size -
   so the cloud is the same share of the sky at every width; the px caps stop it
   growing without limit on a very wide display. Keyframes carry the vertical
   position in a custom property, so each cloud can hold its own band of sky
   while sharing one drift keyframe. */
.clouds { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }

.cloudlet {
  position: absolute;
  top: 0;
  left: 0;
  /* the entrance on first load: one pass, staggered per cloud, and `both` so a
     cloud never flashes at its resting place before the animation starts */
  animation-name: cloud-enter;
  animation-duration: 1.7s;
  animation-timing-function: cubic-bezier(.22, .68, .24, 1);
  animation-fill-mode: both;
}

/* The float lives on an inner layer. Both motions are transforms, and two
   animations on one element means the later one silently wins - the entrance
   would be wiped out by the float on the first frame. Splitting them lets the
   cloud slide in AND keep floating. */
.cloudlet__body {
  display: block;
  width: 100%;
  height: 100%;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  /* Translucent blue, not white. On a photograph of a sunset the white versions
     simply washed out the sky behind them and looked like paper cut-outs; a pale
     blue that is lighter and cooler than the sky it crosses reads as cloud in the
     sky rather than shape sitting on top of it. Alpha lives in the colour so the
     overlap between the puffs stays even instead of doubling up. */
  color: rgba(150, 192, 248, .55);
  fill: currentColor;
  filter: drop-shadow(0 10px 22px rgba(18, 42, 92, .22));
  will-change: transform;
  animation-iteration-count: infinite;
}
.cloudlet svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* Every cloud now STAYS in the banner. The first build sent each one in from
   off the left edge and out again, so for part of every loop there were fewer
   clouds than the site owns and the sky looked like it was emptying. They
   reciprocate instead: each drifts back and forth between two x positions that
   both keep it whole on screen, easing at each end, which is also closer to how
   cloud actually moves.

   The big one behind KARA is now 46cqw - on a phone about 180px of sky, against
   148px before - and sits in the band the wordmark occupies. A fourth, smaller
   cloud drifts in beside it. */
/* Every cloud now STAYS in the banner. The first build sent each one in from off
   the left edge and out again, so for part of every loop there were fewer clouds
   than the site owns and the sky looked like it was emptying. They float instead:
   two x positions it moves between, a small rise in the middle, and the loop
   closing back on the first position, so there is never a jump and never an exit.
   Slower and shorter than the crossing version on purpose - this is drift.

   The big one behind KARA is 46cqw, against 48cqw of a much shallower shape
   before, and its band is the one the wordmark occupies: on a phone that is about
   180px of cloud behind 30vw letters, where the last build gave 148px and sat
   above the type. A fourth, smaller cloud floats in beside it.

   Where a cloud overlaps the laptop it passes behind it, which is what cloud
   behind a machine should do; the x ranges keep the bulk of every cloud in the
   open sky the eye is already on.

   Travel and speed were both raised after the owner said the motion could not be
   seen. At a 6cqw lane and a 40s loop the big cloud crawled about 4px a second,
   which is slower than the eye reads as movement. The lanes are now roughly twice
   as long and the loops about a third shorter - 12 to 21px a second on a desktop,
   12 to 13 on a phone - and the rise in the middle of each pass went from 2.2 to
   3cqh so the float reads even between crossings. */
/* Sizes are a share of the banner, so the same cloud is the same share of the sky
   on a phone. Bands and travel are described in cqw/cqh for the same reason: a
   cloud keeps its lane whatever the width of the screen.

   The big one behind KARA is 46cqw, and its band is the one the wordmark
   occupies: on a phone that is about 180px of cloud behind 30vw letters. A
   fourth, smaller cloud floats in beside it. Nothing leaves the banner: each
   cloud moves between two x positions and back, with a small rise in between. */
.cloudlet--1 { width: min(780px, 46cqw); aspect-ratio: 260 / 140; animation-delay: .15s; }
.cloudlet--1 .cloudlet__body { opacity: .92; --y: 2cqh;  --x0: 0cqw;  --x1: 11cqw;
  animation-name: cloud-drift-a; animation-duration: 26s; animation-delay: -8s; }

.cloudlet--2 { width: min(440px, 26cqw); aspect-ratio: 260 / 140; animation-delay: .8s; }
.cloudlet--2 .cloudlet__body { opacity: .8;  --y: 14cqh; --x0: 2cqw;  --x1: 26cqw;
  animation-name: cloud-drift-b; animation-duration: 40s; animation-delay: -20s; }

.cloudlet--3 { width: min(300px, 18cqw); aspect-ratio: 260 / 140; animation-delay: 1.45s; }
.cloudlet--3 .cloudlet__body { opacity: .7;  --y: 4cqh;  --x0: 4cqw;  --x1: 34cqw;
  animation-name: cloud-drift-a; animation-duration: 40s; animation-delay: -26s; }

/* the last one is the smallest and arrives after the others have settled, so the
   sky fills in rather than appearing all at once */
.cloudlet--4 { width: min(200px, 12cqw); aspect-ratio: 260 / 140; animation-delay: 2.2s; }
.cloudlet--4 .cloudlet__body { opacity: .62; --y: 20cqh; --x0: 2cqw;  --x1: 34cqw;
  animation-name: cloud-drift-b; animation-duration: 56s; animation-delay: -30s; }

/* The entrance: in from the left of where the cloud belongs, a little smaller,
   and rising into place. A cloud that faded in where it stands would read as a
   dissolve rather than weather moving. */
@keyframes cloud-enter {
  from { opacity: 0; transform: translate(-16cqw, 1.6cqh) scale(.92); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* Over x0 -> x1 -> x0, with a gentle rise in the middle. Written as three stops
   rather than two with `alternate`, because alternate on a two-stop loop eases
   into the turn and stalls there, which reads as a stutter. */
@keyframes cloud-drift-a {
  0%   { transform: translate(var(--x0), var(--y)) scale(.97); }
  50%  { transform: translate(var(--x1), calc(var(--y) + 3cqh)) scale(1.02); }
  100% { transform: translate(var(--x0), var(--y)) scale(.97); }
}
@keyframes cloud-drift-b {
  0%   { transform: translate(var(--x1), var(--y)) scaleX(-1) scale(.97); }
  50%  { transform: translate(var(--x0), calc(var(--y) + 3cqh)) scaleX(-1) scale(1.02); }
  100% { transform: translate(var(--x1), var(--y)) scaleX(-1) scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  .cloudlet, .cloudlet__body { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud__wisp, .cloud__sky-img, .cloud__lap-img { animation: none; }
}

/* the wordmark and the machine sit above the drifting cloud */
.cloud__words { z-index: 3; }
.cloud__lap-img { z-index: 4; }
.cloud__note, .cloud__cta, .cloud__play { z-index: 5; }

/* --- muted text boxes ---------------------------------------------------------
   The boxes carry a soft, low-saturation tint instead of white. The ink stays
   the same near-black it was, so each of these still lands around 12:1 - a muted
   box is a colour decision, not a contrast decision, and the words read exactly
   as well as they did on white. Kept to six tints so the page has a small
   palette rather than a different colour per card. */
.band .card, .card { background: #e7ede5; }          /* sage   */
.band .guide, .guide { background: #f2ebdf; }        /* sand   */
.band .about, .about { background: #e5ecf3; }        /* sky    */
.band .workshop, .workshop, .workshop--solo { background: #ebe7f2; }  /* lilac  */
.band .faq details, .faq details { background: #f2e7ea; }                /* rose   */
.band .decisions li, .decisions li { background: #e9eee7; }
.band .golden__box, .golden__box { background: #f0eee6; }
.band .prompt-weak, .prompt-weak, .step-panel__example, .builder__part { background: #eaece9; }
.band .eyebrow, .eyebrow { background: #e9e4f2; }

/* --- the two drifting bubbles -------------------------------------------------
   Two separate movements on two separate elements, because they are different
   kinds of motion: .drifter carries the endless roam around the page, and
   .drifter__body carries a one-off entrance that comes in from the side and
   grows. Putting both on one element would mean one silently overriding the
   other. The roam keeps a constant size on purpose - once a bubble has grown it
   stays that size rather than shrinking back on the next lap.
   Pinned to the viewport, so they keep roaming as the reader scrolls instead of
   being left behind at the top. */
.drifters {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.drifter {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(186px, 21vw, 330px);   /* the big one */
  aspect-ratio: 1;
  /* .82, raised from .5. At half opacity over a pale page the bubble was a
     suggestion rather than an object - the owner's note was that it could not be
     seen. Still short of solid, so a line of text under one stays readable. */
  opacity: .82;
  will-change: transform;
}

.drifter__body { position: absolute; inset: 0; }

.drifter canvas { display: block; width: 100%; height: 100%; }

.drifter--a { animation: roam-a 34s cubic-bezier(.45, 0, .55, 1) infinite; }
.drifter--b {
  width: clamp(72px, 8vw, 124px);     /* the small one */
  animation: roam-b 46s cubic-bezier(.45, 0, .55, 1) infinite;
}

/* One enters from the left, the other from the right, and they are staggered so
   they are never travelling in together. Fill is 'both' with no repeat: they
   come in once and then hold their full size for the rest of the visit. */
.drifter--a .drifter__body {
  animation: enter-left 3.4s cubic-bezier(.22, .68, .24, 1) .3s 1 both;
}
.drifter--b .drifter__body {
  animation: enter-right 3.4s cubic-bezier(.22, .68, .24, 1) 2.4s 1 both;
}

@keyframes enter-left {
  0%   { transform: translateX(-560%) scale(.28); opacity: 0; }
  35%  { opacity: .9; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes enter-right {
  0%   { transform: translateX(560%) scale(.28); opacity: 0; }
  35%  { opacity: .9; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* The paths roam the whole screen on purpose: the bubbles are pinned to the
   viewport, so a reader meets them again and again on the way down the page
   rather than only in the opening banner. Nothing here can keep them off a given
   line of text — the line scrolls past a fixed bubble — so the answer to "it
   covers my link" was not to move the bubble but to leave it (tried in October
   2026: lowering the band to 68vh-88vh just parked both bubbles at the foot of
   the screen the whole way down, which read as lost rather than drifting). */
@keyframes roam-a {
  0%   { transform: translate(4vw, 8vh); }
  25%  { transform: translate(68vw, 26vh); }
  50%  { transform: translate(56vw, 76vh); }
  75%  { transform: translate(8vw, 58vh); }
  100% { transform: translate(4vw, 8vh); }
}

@keyframes roam-b {
  0%   { transform: translate(78vw, 62vh); }
  25%  { transform: translate(22vw, 84vh); }
  50%  { transform: translate(12vw, 30vh); }
  75%  { transform: translate(64vw, 14vh); }
  100% { transform: translate(78vw, 62vh); }
}

@media (prefers-reduced-motion: reduce) {
  .drifter { animation: none; }
  .drifter--a { transform: translate(6vw, 14vh); }
  .drifter--b { transform: translate(74vw, 58vh); }
  .drifter__body { animation: none; }
}

/* --- nothing sticks to the edge of its box -------------------------------------
   These boxes were carrying vertical padding only, so on the muted fills the
   text ran right up to the rounded edge. Side padding is added here rather than
   the vertical being changed, so the rhythm between rows is untouched. */
.faq summary { padding: 22px 26px; }
.faq details > p { padding: 0 26px 24px; margin: 0; }
.band .decisions li, .decisions li { padding: 15px 22px; }
.band .workshop__flag, .workshop__flag { padding: 7px 16px; }

/* --- the framework, in order: one colour per step ------------------------------
   The six guides are a numbered sequence, so colour is doing work here rather
   than decoration: each step is a different muted tint so the eye can tell them
   apart and follow 01 to 06. All six are the same lightness, so the sequence
   reads evenly instead of the later steps looking heavier, and the ink is the
   same near-black on every one - each still measures about 14:1. */
.guides .guide:nth-child(1) { background: #e7ede5; }
.guides .guide:nth-child(2) { background: #f2ebdf; }
.guides .guide:nth-child(3) { background: #e5ecf3; }
.guides .guide:nth-child(4) { background: #ebe7f2; }
.guides .guide:nth-child(5) { background: #f2e7ea; }
.guides .guide:nth-child(6) { background: #eaece9; }

/* the step number echoes its own box, one shade deeper, so the numbering stays
   legible on the tint instead of washing out */
.guides .guide:nth-child(1) .guide__n { color: #4b6b52; }
.guides .guide:nth-child(2) .guide__n { color: #7a6134; }
.guides .guide:nth-child(3) .guide__n { color: #3f6180; }
.guides .guide:nth-child(4) .guide__n { color: #5a4a7d; }
.guides .guide:nth-child(5) .guide__n { color: #7d4a58; }
.guides .guide:nth-child(6) .guide__n { color: #55606a; }

/* --- the masterclass card, reworked -------------------------------------------
   It was 760px wide with every part stacked down the left, so half the card was
   empty and the eye had nowhere to settle. It is narrower now and centred under
   the centred heading above it, and the vertical rhythm is one repeating step
   instead of four different ones - the jumps between flag, list, facts and
   button were 90, 169 and 157px, which is what made it read as badly aligned
   rather than merely wide. */
.workshop--solo {
  max-width: 640px;
  padding: 40px;
}

.workshop__flag { margin-bottom: 24px; }

.workshop__points {
  margin: 0 0 30px;
  gap: 12px;
}
.workshop__points li {
  font-size: 25px;
  line-height: 1.42;
  gap: 14px;
}

.workshop__facts {
  margin: 0 0 30px;
  padding: 26px 0;
  gap: 24px;
}
.workshop__facts dt { margin-bottom: 8px; }

/* the two facts sit on a shared baseline, so "On request" and "Live, small
   group" line up even though their labels are different lengths */
.workshop__facts > div { display: flex; flex-direction: column; justify-content: flex-start; }

/* --- doves crossing the sky ---------------------------------------------------
   Seven white doves, at seven different sizes, entering from different angles.
   Each follows its own arcing path and banks into the turn, flaps at its own
   rate, and scales slightly along the way, so no two are doing the same thing.

   They are drawn, not photographed: the shape below is a few filled paths - two
   swept wings, a body, a head with a beak, and a fan tail. At this size that
   reads as a dove in flight and costs nothing to serve.

   White on a bright sky needs help to be seen at all, so each one carries a
   soft blue-grey shadow rather than an outline - an outline would read as a
   cartoon bird, a shadow reads as a bird against bright light.

   They fly IN FRONT of the laptop. Behind it they vanish for most of every pass,
   because the machine fills the middle half of the frame for nearly its full
   height - measured in-frame and invisible on screen at the same time. */
.birds { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

.bird {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  color: #ffffff;
  fill: currentColor;
  stroke: none;
  /* Deepened. White on white was the risk: the sky here is bright and the upper
     clouds are nearly white too, so a soft shadow left the doves as faint
     smudges against the brightest part of the frame. The shadow is stronger and
     tighter now, which is the lever that makes a white bird read against bright
     light without turning it into a cartoon bird with an outline. */
  filter: drop-shadow(0 1.5px 2.5px rgba(30, 50, 82, .68))
          drop-shadow(0 0 2px rgba(38, 60, 96, .34));
  will-change: transform;
  animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

.bird svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
  transform-origin: 50% 48%;
  animation: dove-flap .92s cubic-bezier(.3, 0, .25, 1) infinite;
}

/* Seven sizes, each a SHARE of the banner as well as a pixel cap - min(px, cqw).
   In pixels alone they were sized for a 1265px banner, where the largest is 10%
   of the width and reads as a distant bird. On a 375px phone the same 136px is a
   THIRD of the frame, which is not a distant bird any more, it is a bird filling
   the sky. As a share of the container they are identical at every width; the
   pixel cap just stops them growing without limit on a very wide screen. */
.bird--1 { width: min(120px, 9.5cqw);  aspect-ratio: 120 / 80; }
.bird--2 { width: min(74px, 5.85cqw);  aspect-ratio: 120 / 80; }
.bird--3 { width: min(101px, 8cqw);    aspect-ratio: 120 / 80; }
.bird--4 { width: min(60px, 4.75cqw);  aspect-ratio: 120 / 80; }
.bird--5 { width: min(136px, 10.75cqw); aspect-ratio: 120 / 80; }
.bird--6 { width: min(82px, 6.5cqw);   aspect-ratio: 120 / 80; }
.bird--7 { width: min(51px, 4cqw);     aspect-ratio: 120 / 80; }

/* each beats at its own rate, so they are never in step */
.bird--1 svg { animation-duration: .84s; }
.bird--2 svg { animation-duration: .70s; animation-delay: -.30s; }
.bird--3 svg { animation-duration: .92s; animation-delay: -.55s; }
.bird--4 svg { animation-duration: .72s; animation-delay: -.15s; }
.bird--5 svg { animation-duration: .88s; animation-delay: -.70s; }
.bird--6 svg { animation-duration: .78s; animation-delay: -.42s; }
.bird--7 svg { animation-duration: .96s; animation-delay: -.62s; }

/* the wing beat closes faster than it opens - a wing does, and an even squeeze
   is what makes a drawn bird look like a shape being squashed */
@keyframes dove-flap {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  38%      { transform: scaleY(.46) scaleX(.92); }
  62%      { transform: scaleY(.76) scaleX(.97); }
}

.bird--1 { animation: dove-1 16s 0s infinite both; }
.bird--2 { animation: dove-2 19s .5s infinite both; }
.bird--3 { animation: dove-3 17.5s 1s infinite both; }
.bird--4 { animation: dove-4 21s 1.5s infinite both; }
.bird--5 { animation: dove-5 17s 2s infinite both; }
.bird--6 { animation: dove-6 19.5s 2.5s infinite both; }
.bird--7 { animation: dove-7 22s 3s infinite both; }

/* paths are in cqw/cqh - a share of the banner's own size - so they hold their
   shape whatever the banner's proportions are. All start and end outside the
   frame, and the banner clips them, so they fly in and out. */
@keyframes dove-1 {
  0%   { transform: translate(-10.5cqw, 60cqh) rotate(-4deg) scale(.86); }
  35%  { transform: translate(26cqw, 32cqh) rotate(-11deg) scale(.95); }
  70%  { transform: translate(70cqw, 14cqh) rotate(-7deg) scale(1); }
  100% { transform: translate(115cqw, 20cqh) rotate(-2deg) scale(.88); }
}
@keyframes dove-2 {
  0%   { transform: translate(-10.5cqw, -14cqh) rotate(16deg) scale(.9); }
  30%  { transform: translate(20cqw, 16cqh) rotate(11deg) scale(.86); }
  62%  { transform: translate(64cqw, 48cqh) rotate(15deg) scale(.82); }
  100% { transform: translate(110cqw, 82cqh) rotate(9deg) scale(.78); }
}
@keyframes dove-3 {
  0%   { transform: translate(110cqw, -12cqh) rotate(-11deg) scaleX(-1) scale(.92); }
  34%  { transform: translate(74cqw, 24cqh) rotate(-6deg) scaleX(-1) scale(.96); }
  68%  { transform: translate(30cqw, 44cqh) rotate(-9deg) scaleX(-1) scale(1); }
  100% { transform: translate(-16cqw, 68cqh) rotate(-4deg) scaleX(-1) scale(.9); }
}
@keyframes dove-4 {
  0%   { transform: translate(-10.5cqw, 112cqh) rotate(-16deg) scale(.82); }
  32%  { transform: translate(22cqw, 84cqh) rotate(-10deg) scale(.88); }
  66%  { transform: translate(64cqw, 48cqh) rotate(-13deg) scale(.92); }
  100% { transform: translate(110cqw, 16cqh) rotate(-7deg) scale(.86); }
}
@keyframes dove-5 {
  0%   { transform: translate(110cqw, 22cqh) rotate(3deg) scaleX(-1) scale(.9); }
  36%  { transform: translate(66cqw, 42cqh) rotate(9deg) scaleX(-1) scale(.96); }
  70%  { transform: translate(22cqw, 66cqh) rotate(5deg) scaleX(-1) scale(.92); }
  100% { transform: translate(-16cqw, 90cqh) rotate(10deg) scaleX(-1) scale(1); }
}
@keyframes dove-6 {
  0%   { transform: translate(-10.5cqw, 30cqh) rotate(-8deg) scale(.9); }
  40%  { transform: translate(38cqw, 62cqh) rotate(6deg) scale(1); }
  75%  { transform: translate(78cqw, 40cqh) rotate(-5deg) scale(.94); }
  100% { transform: translate(110cqw, 6cqh) rotate(-12deg) scale(.88); }
}
@keyframes dove-7 {
  0%   { transform: translate(110cqw, 74cqh) rotate(12deg) scaleX(-1) scale(.9); }
  38%  { transform: translate(60cqw, 52cqh) rotate(4deg) scaleX(-1) scale(.96); }
  72%  { transform: translate(18cqw, 22cqh) rotate(-6deg) scaleX(-1) scale(.9); }
  100% { transform: translate(-10.5cqw, 44cqh) rotate(2deg) scaleX(-1) scale(.86); }
}

@media (prefers-reduced-motion: reduce) {
  .birds { display: none; }
}

/* --- the masterclass band: edge to edge, in two columns ------------------------
   The offer was a narrow card floating in a wide white stretch. The band now
   runs the full width with only a small gutter, and the offer sits on the left
   with the masterclass on the right.

   The heading is flush left because a centred heading fights the left edge of a
   column, and the card is the LIGHTER surface - on the lilac band a lilac card
   merged into it and the two read as one flat block. */
/* the fill reaches the window edges; a list rule for #about/#how/#offer sets a
   near-white on this same element, so this has to match its specificity, not
   just come later */
main > #offer.band { background: #ebe7f2; }
main > #offer .shell { max-width: none; padding-inline: clamp(20px, 3.4vw, 56px); }

.offer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
}

.offer__lead, .offer__lead .eyebrow, .offer__lead .h2 { text-align: left; }

.band .offer__lead .lede,
.offer__lead .lede {
  text-align: left;
  margin-inline: 0;
  max-width: 44ch;
}

.band .workshop--solo,
.workshop--solo {
  max-width: none;
  width: 100%;
  margin: 0;
  background: #fdfbff;
  border: 1px solid rgba(105, 65, 198, .15);
}

.offer__free, .band .offer__free { text-align: left; margin-top: clamp(30px, 4vw, 52px); }

/* the two columns stack below laptop width - two columns of that much text on a
   phone would be unreadable */
@media (max-width: 900px) {
  .offer__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

/* --- the FAQ: one text size, colour edge to edge -------------------------------
   Questions ran at 30.7px against 28px answers, close enough that neither led;
   both are 24px now and the question leads on weight instead. The rose lived
   only inside the boxes, so the band read as white with cards on it - it fills
   the band now and reaches the window edges, with the boxes as the lighter
   surface on top. */
.band .faq summary, .faq summary { font-size: calc(24px * var(--text-scale)); }
.band .faq details > p, .faq details > p { font-size: calc(24px * var(--text-scale)); line-height: 1.6; }

main > #faq.band { background: #f2e7ea; }

.band .faq details,
.faq details {
  background: #fdfafb;
  border: 1px solid rgba(125, 74, 88, .13);
}

/* --- the problem section's sentence, and the leading throughout ---------------
   The lede sits inside a two-column split; the site-wide lede rule centres it,
   which is right under a centred heading but fights the left edge of a column.
   With the line under a left-aligned heading it has to start on the same edge. */
#problem .lede {
  text-align: left;
  margin-inline: 0;
}

/* Tighter leading. Body text was set at 1.6 and the ledes at 1.55-1.62, which
   is airy for text this size - at 29px the lines were 46.6px apart, so a
   five-line paragraph stood nearly 240px tall and the sentences read as
   separate statements rather than one thought. Tightened across every piece of
   running text, so the whole page moves together rather than one section
   looking cramped next to another that isn't. */
body { line-height: 1.44; }
.lede, .band .lede { line-height: 1.45; }
.card p, .guide p, .stack p, .layer p { line-height: 1.45; }
.workshop > p, .step-panel__example { line-height: 1.46; }
.faq details > p, .faq details p { line-height: 1.46; }
.decisions li, .workshop__points li { line-height: 1.42; }
.about .lede { line-height: 1.48; }


/* --- touch targets -------------------------------------------------------------
   On a phone the primary button measured 40px tall, under the 44px that a thumb
   actually needs. The label was also 12.5px, which is legible on a desktop
   pointer and small under a thumb. Both are lifted only where a touch device is
   the likely case, so the desktop bar is untouched. */
@media (max-width: 760px) {
  .nav a.btn, .nav .btn { min-height: 44px; padding-block: 11px; }
  .nav a.btn .nav__cta-short, .nav a.btn .nav__cta-full { font-size: 14px; }
  .nav__link, .nav a.nav__link { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (pointer: coarse) {
  .btn, a.btn { min-height: 46px; }
}

/* --- the top bar on a narrow phone ---------------------------------------------
   Four things cannot share 375px: wordmark, the menu pill, the "Free guides"
   link and the call to action. With the touch target lifted to 44px the bar ran
   past the right edge and the call to action was clipped off screen - and once
   clipped it is not merely off-screen, it is unpressable.

   The guides link is the one that goes: it is a shortcut to a section that is
   also linked from the menu and the footer, so nothing becomes unreachable. The
   wordmark, the menu and the call to action are the three a visitor needs. */
@media (max-width: 430px) {
  .nav a.nav__link { display: none; }
  .nav__inner { gap: 10px; }
  .nav a.btn { padding-inline: 14px; }
}


/* --- back to top ---------------------------------------------------------------
   The page is long on a phone - around twelve screens - and the top bar is the
   only thing that gets you back to the menu, so a visitor who has read to the
   bottom has to scroll the whole way up. This floats above the corner once they
   are past the opening, and stays out of the way before that. */
/* --- contact stickers ---------------------------------------------------------
   Pinned to the bottom LEFT, opposite the back-to-top button, and only as tall as
   a thumb. A pill rather than a round icon because the words do the work: a green
   circle with a glyph in it is a guess for anyone who does not know the mark, and
   "WhatsApp" with the number one tap away is not. The mark itself is drawn from
   two primitives (a rounded rectangle and a tail) instead of a traced logo, so it
   renders identically everywhere and costs no request. ---------------------- */
.stickers {
  position: fixed;
  left: clamp(14px, 2.6vw, 26px);
  bottom: clamp(14px, 2.6vw, 26px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.sticker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  font-size: calc(19px * var(--text-scale));
  font-weight: 700;
  letter-spacing: -.005em;
  text-decoration: none;
  box-shadow: 0 8px 22px -10px rgba(20, 20, 30, .45);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.sticker svg { width: 21px; height: 21px; display: block; flex: none; }
.sticker:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(20, 20, 30, .5); }
.sticker:focus-visible { outline: 3px solid rgba(105, 65, 198, .5); outline-offset: 3px; }

/* the message one wears WhatsApp's own green, with white type on it */
.sticker--wa { background: #25d366; color: #ffffff; fill: currentColor; }
.sticker--wa:hover { background: #1fbe5b; }

/* the email one stays in the site's own palette so the pair does not look like
   two different kits */
.sticker--mail { background: #ffffff; color: var(--accent, #0a1f78); border: 1px solid rgba(10, 31, 120, .22); }
.sticker--mail:hover { background: #f4f6ff; }

/* on a phone they sit together at the left, clear of the back-to-top button and
   of the home bar */
@media (max-width: 760px) {
  .stickers {
    left: clamp(10px, 3vw, 16px);
    bottom: clamp(10px, 3vw, 16px);
    gap: 8px;
  }
  /* Icon only on a phone. A pill carrying the word "WhatsApp" is 133px wide, and
     at the bottom-left of a 390px screen it sits across the first words of every
     line that scrolls past it - measured covering the About paragraph. A 46px
     circle is a fifth of that footprint and still says what it is by its colour
     and mark; the label stays in the markup, hidden visually, so the accessible
     name is unchanged. */
  .sticker {
    width: 46px;
    height: 46px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }
  .sticker svg { width: 22px; height: 22px; }
  .sticker__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(105, 65, 198, .22);
  background: #ffffff;
  color: var(--d-ink, #171717);
  box-shadow: 0 6px 22px rgba(60, 45, 100, .17), 0 1px 3px rgba(60, 45, 100, .1);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, background-color .2s ease;
}

.to-top svg { width: 21px; height: 21px; display: block; }

.to-top:hover { background: #f7f4ff; }

.to-top:focus-visible {
  outline: 3px solid rgba(105, 65, 198, .5);
  outline-offset: 3px;
}

/* shown once the visitor is past the opening banner */
.to-top.is-on {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* never sits on top of the phone's home bar, and reaches a thumb on the right */
@media (max-width: 760px) {
  .to-top {
    width: 48px;
    height: 48px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .01s linear; transform: none; }
}

/* --- the hero title lockup ------------------------------------------------------
   The three lines read as one sentence — "Direct it, don't / just generate it" —
   but each started somewhere different: the middle line carried a 92.8px left
   padding and the blue line 23.2px, so the lockup stepped 53 -> 145 -> 76 and
   read as three loose lines rather than one title. All three sit on one axis now.

   The weight also failed to rank them: every line was 500, so the biggest word
   and the small one carried identical emphasis and the eye had nowhere to land
   first. The word leads at 700, the blue half of the sentence follows at 600,
   and the small line stays light as the quiet connective between them.

   The small line was also 82% ink over the brightest part of the page, which is
   the one place faint text fails. Lifted to near-full ink. */
.hero__core .hero__small,
.hero__small {
  padding-left: 0;
  color: var(--ink);
  opacity: .9;
}

.hero__core .panels,
.panels { padding-left: 0; }

.hero__core .hero__word,
.hero__word { font-weight: 700; }

.hero__core .panel__script,
.panel__script { font-weight: 600; }

/* on a phone the lockup is tight already; the axis change holds at every width */
@media (max-width: 620px) {
  .hero__small { letter-spacing: -0.022em; }
}

/* ============================================================================
   TYPE SCALE  —  one size per role, site-wide
   ============================================================================
   An audit of the rendered page found 62 distinct type styles and eleven
   different sizes doing the job of "body text", from 20.7px to 29.1px, with no
   logic between them. Worse, the ranking was inverted: an H4 in the "how it
   works" section rendered at 32px, larger than the 30.7px H3 directly above it
   in the reading order, so the hierarchy actively misled.

   Every role below resolves to exactly one size. Scale is the only thing that
   carries rank now, which is how it should work - it survives greyscale,
   colour-blindness and a bright screen.

     H2      section statement        34 -> 46px   w600
     H3      subsection / card title   26 -> 32px   w600
     BODY    the main explanation      20 -> 24px   w400
     SMALL   supporting notes          18 -> 21px   w400
     LABEL   eyebrows and metadata     17 -> 20px   w700  uppercase
     FAQ     questions and answers     22px         (one step under body)
     BUTTON  every button             19 -> 22px   w600

   The largest step is the section statement and the smallest is metadata, with
   no exceptions - which is what the audit could not say before. */
:root {
  --fs-h2:     clamp(34px, 3.6vw, 46px);
  --fs-h3:     clamp(26px, 2.5vw, 32px);
  --fs-body:   clamp(20px, 1.9vw, 24px);
  --fs-small:  clamp(18px, 1.7vw, 21px);
  --fs-label:  clamp(17px, 1.6vw, 20px);
  --fs-faq:    clamp(20px, 1.75vw, 22px);
  --fs-btn:    clamp(19px, 1.8vw, 22px);
  --prose:     62ch;   /* one reading measure, everywhere */
  --prose-wide: 72ch;
}

/* ---- H2: the section statement -------------------------------------------- */
.band .h2, .band h2.h2, .section-head .h2, h2.h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ---- H3 and H4: subsection and card titles, one size for both -------------
   The H4 used to outrank the H3. They share a step now, which is correct: both
   name a subsection, and rank below them is carried by the H2 alone. */
.band h3, .band h4, .card h3, .guide h3, .workshop h3, .h3, .stack h3,
#problem h3, #how h4, footer h4 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ---- BODY: one size for every paragraph, list and card description --------- */
.lede, .band .lede, .about .lede,
.about__item, .about__text,
.decisions li, .callout,
.workshop__points li, .workshop > p,
.card p, .guide p, .stack p, .layer p,
.step-panel__example, .step-panel__q,
.hero__aside,
.footer__tag, .footer li, .footer__wa-link {
  font-size: var(--fs-body);
  line-height: 1.48;
}

/* prose is held to one measure so lines do not run the width of the page */
.lede, .band .lede, .about .lede { max-width: var(--prose); }
.about__text, .callout, .card p, .guide p, .stack p { max-width: var(--prose); }
.decisions li, .workshop__points li { max-width: var(--prose-wide); }

/* ---- SMALL: supporting notes, never the size of body copy ----------------- */
.tiny, .reel__meta, .step-btn__n, .prompt-weak__text {
  font-size: var(--fs-small);
  line-height: 1.45;
}

/* ---- LABEL: eyebrows, tags and metadata, all one size ---------------------
   These ran at 22, 23 and 25px across six different components. */
.eyebrow, .band .eyebrow,
.workshop__flag, .band .workshop__flag,
.prompt-weak__tag,
.workshop__facts dt, .band .workshop__facts dt,
.footer__wa-label, .reel__name, .guide__n {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.35;
}

/* ---- FAQ: questions and answers deliberately the same size ---------------- */
.band .faq summary, .faq summary,
.band .faq details > p, .faq details > p {
  font-size: var(--fs-faq);
  line-height: 1.5;
}
.faq summary { font-weight: 600; }
.faq details > p { font-weight: 400; max-width: var(--prose-wide); }

/* ---- BUTTON: one size, and it is a button not a headline ------------------- */
.btn, a.btn, .btn--lg, a.btn--lg { font-size: var(--fs-btn); font-weight: 600; }

/* the hero's display lockup keeps its own oversized step - it is a display
   statement, not body copy, and it is the one place scale may exceed the scale */
.hero__eyebrow { font-size: var(--fs-label); }
.panel__script, .panel--wide .panel__script { font-size: clamp(34px, 6.6vw, 82px); }
.hero__small { font-size: clamp(28px, 4.4vw, 54px); }

/* --- the last roles still off the scale ---------------------------------------
   Each of these was being won by an older, more specific rule - the footer's
   own heading and list sizes, the hero's guide strip, and the link inside the
   offer band. Matched on specificity rather than order, because order had
   already proven not to be enough here. Two of them also fix the same inverted
   ranking the audit found: a footer H4 at 24px was smaller than the body text
   beneath it, so the heading was quieter than its own list. */
footer h4, .footer h4, .footer__col h4, .band footer h4 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.footer li, footer li, .footer__col li, .footer ul li {
  font-size: var(--fs-body);
  line-height: 1.45;
}

.footer__legal, footer .footer__legal, .footer__sub span, footer .footer__sub span {
  font-size: var(--fs-small);
  line-height: 1.45;
}

.hero__strip li, .hero .hero__strip li {
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.35;
}

.path .guide__n, .guide .guide__n, .band .guide__n, .guide__n {
  font-weight: 700;
}

.offer__free a, .band .offer__free a, #offer .offer__free a {
  font-size: var(--fs-body);
  font-weight: 600;
}

/* links inside body text inherit the body step rather than drifting */
.band p a, .band li a { font-size: inherit; }

/* --- the page must never scroll sideways ---------------------------------------
   A 40px horizontal scroll appeared on a phone. It is not from an element:
   walking every node in the DOM found nothing extending past the viewport
   without a clipping ancestor, and the video rail - which is 2436px wide - is
   correctly clipped by its own container. That means the overflow comes from a
   pseudo-element or a text node, neither of which the DOM walk can see.

   The root is clipped instead. `clip` rather than `hidden`, deliberately:
   `overflow-x: hidden` on the root breaks position: sticky in several engines,
   and the sticky top bar is load-bearing here. `clip` stops the sideways scroll
   without that side effect.

   Worth knowing it was intermittent: the doves and the bubbles are animated and
   move in and out of the frame, so this appeared and disappeared depending on
   where they were in their loop when the page was measured. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* --- the last two roles off the scale ------------------------------------------
   The offer's fact value was 32px on a phone - larger than the section's own H3
   at 26px, so a price line outranked the heading above it. It sits at the
   subsection step now. Footer links were escaping their rule as well. */
.workshop__facts dd, .band .workshop__facts dd, #offer .workshop__facts dd {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
}

.footer ul li, footer ul li, .footer__col ul li, .band footer ul li {
  font-size: var(--fs-body);
  line-height: 1.45;
}

/* --- the middle step: tablet ----------------------------------------------------
   The clamps alone gave a phone and a desktop scale and nothing between, so a
   768px tablet rendered the phone's type exactly - headings at 34px and body at
   20px on a screen with twice the width of a phone. Three explicit steps now:
   phone, tablet, desktop. Type that only knows two sizes is not a responsive
   scale, it is two scales with a gap. */
@media (min-width: 621px) and (max-width: 1024px) {
  :root {
    --fs-h2: 40px;
    --fs-h3: 29px;
    --fs-body: 22px;
    --fs-small: 19px;
    --fs-label: 18px;
    --fs-faq: 21px;
    --fs-btn: 20px;
  }
}

/* and one more strip of room for the section statement on a wide display */
@media (min-width: 1440px) {
  :root { --fs-h2: 50px; }
}

/* ============================================================================
   PHONES — the recomposition layer.

   The desktop page places several things in the wide margins and in columns
   that only exist on a wide screen: the two drifting bubbles roam a viewport
   with empty air in it, the opening banner is composed as a 16:9 frame with
   the sky on the left and the machine on the right, and the clip cards carry
   overlay type sized for a 236px-wide card. None of that survives a 390px
   screen by being shrunk — the bubbles become the width of a column and park
   on the words, the banner crops to a middle band of laptop, and the card
   labels wrap straight off the bottom of the card. So each one is RECOMPOSED
   here rather than scaled: the bubbles are sized as a share of the screen, the
   banner keeps the word in the sky with a soft halo behind it, and the card
   and fact type is measured from its own box instead of from the page.

   Everything below is inside a max-width query, so the desktop layout is
   untouched by design, not by accident.
   ========================================================================== */
@media (max-width: 620px) {

  /* --- 1. the drifting bubbles ------------------------------------------
     Sized as a SHARE of the screen, not in the pixels the desktop uses. At
     the desktop clamp's 150px minimum the big bubble is 38% of a 390px
     screen and crosses the body text constantly at half opacity, which reads
     as a graphic sitting on the words rather than as a bubble drifting past
     them. 20vw keeps the same relationship to the screen it has at 1440px,
     so the motion is preserved and the words stay clean underneath. */
  /* On a phone these were shrunk to 78px at 28% opacity, which the owner could
     not see at all. Bigger and far more solid here: at 32vw the bubble is about
     125px on a 390px screen, and .7 is still translucent enough to read a line of
     text through. */
  .drifter   { width: clamp(116px, 32vw, 210px); opacity: .7; }
  .drifter--b { width: clamp(52px, 14vw, 92px); }

  /* --- 2. the opening banner --------------------------------------------
     Two faults on a phone, both caused by the desktop composition:
     the machine's image layer paints ABOVE the wordmark (so its diagonal
     edge slices the word in half), and what is left of the word sits on the
     brightest part of the sky in white. The word is lifted above the machine
     and given a soft dark halo of its own, which is applied only under the
     word so the photograph keeps its colour everywhere else. */
  .cloud__words { z-index: 6; top: 15%; padding-inline: 16px; }
  .cloud__words::before {
    content: "";
    position: absolute;
    inset: -18% -26%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(58% 62% at 50% 52%,
                rgba(9, 33, 76, .58), rgba(9, 33, 76, 0) 74%);
  }
  .cloud__word  { font-size: clamp(52px, 19vw, 92px); }
  /* same width as KARA here too: .26em letter spacing on this breakpoint, so a
     slightly larger multiplier than the wide-screen one */
  .cloud__learn { font-size: calc(clamp(52px, 19vw, 92px) * .505); }

  /* the small line in the corner was set at 11px — legible on a 27-inch
     display, not on a phone held at arm's length */
  .cloud__note  { font-size: 13px; top: 12px; right: 14px; }


  /* --- 3. the clip cards ------------------------------------------------
     The label was a fixed 27px inside a card that is 150px wide on a phone,
     so four words wrapped to four lines and ran off the bottom of the card.
     Measuring the type from the card itself (a container query on the card)
     keeps the desktop proportion at every card size instead of picking a
     size that is only right at one of them. */
  .reel { container-type: inline-size; }
  .reel__name { font-size: clamp(15px, 11cqw, 27px); }
  .reel__meta { font-size: clamp(12px, 8cqw, 23px); }
  .reel__cap  { left: 11px; right: 11px; bottom: 11px; }


  /* --- 4. the workshop facts -------------------------------------------
     Two 122px columns of 23px uppercase labels inside a 268px card: the
     labels wrapped to two lines each and the values overflowed their cell.
     Stacked, each label sits over its own value. */
  .workshop__facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  /* --- 5. the proof rail ------------------------------------------------
     On a wide screen the clips travel past on their own, which is a pleasant
     thing to watch in a wide empty margin. On a phone it is the opposite: the
     section's whole job is "press one to play it", and a card that is moving
     cannot be pressed reliably, while the masked ends leave the first and last
     clips looking sliced mid-word. Phones get a normal swipeable row with snap
     points instead — the cards hold still under the thumb, one full clip plus a
     sliver of the next shows there is more to see, and the duplicate set (which
     exists only so the marquee can loop without a seam) is dropped so no clip
     appears twice. */
  .rail {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    padding-inline: 20px;
    padding-block: 4px 12px;
    -webkit-mask-image: none;
            mask-image: none;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__track { width: auto; gap: 12px; animation: none; transform: none; }
  .rail__set { gap: 12px; }
  .rail__set + .rail__set { display: none; }
  .rail .reel { flex: 0 0 clamp(196px, 62vw, 300px); scroll-snap-align: start; }

  /* --- 6. the doves -----------------------------------------------------
     The same flight that reads as a glide across a 1265px banner is a
     near-static speck on a 390px one: the bird is a third of the size and
     crosses a third of the distance in the same seconds. Phones get shorter
     flights AND a larger share of the frame, plus a slightly firmer shadow,
     because a white dove drawn small against a bright cloud is a smudge
     whatever its speed. The largest is still ~15% of the frame on a phone,
     well short of the third of the width that made a bird look like it was
     filling the sky. */
  .bird { filter: drop-shadow(0 2px 3px rgba(30, 50, 82, .72))
                  drop-shadow(0 0 3px rgba(38, 60, 96, .44)); }
  .bird--1 { animation-duration: 11s;   width: min(120px, 13cqw); }
  .bird--2 { animation-duration: 13s;   width: min(74px, 8cqw); }
  .bird--3 { animation-duration: 12s;   width: min(101px, 11cqw); }
  .bird--4 { animation-duration: 14s;   width: min(60px, 6.5cqw); }
  .bird--5 { animation-duration: 11.5s; width: min(136px, 14.5cqw); }
  .bird--6 { animation-duration: 13.5s; width: min(82px, 9cqw); }
  .bird--7 { animation-duration: 15s;   width: min(51px, 5.5cqw); }

  /* --- 7. the clouds ------------------------------------------------
     Same trap as the doves: the tile is the frame's own width, so a duration
     that drifts calmly across a 1425px banner moves a phone's clouds at under
     3px a second, which reads as a still picture. Shorter loops on phones so
     the sky is visibly moving at both ends of the range. */
  /* On a phone the laptop sits below the wordmark, so every cloud works in the
     top third of the sky and can therefore travel much further sideways without
     passing behind anything. */
  .cloudlet--1 .cloudlet__body { --x1: 30cqw; animation-duration: 16s; }
  .cloudlet--2 .cloudlet__body { --y: 6cqh; --x1: 44cqw; animation-duration: 22s; }
  .cloudlet--3 .cloudlet__body { --y: 18cqh; --x1: 48cqw; animation-duration: 26s; }
  .cloudlet--4 .cloudlet__body { --y: 26cqh; --x1: 54cqw; animation-duration: 30s; }
}


/* ==========================================================================
   MESSAGE FORM — the Email sticker opens this instead of the visitor's mail
   app. Appended at the end of the file: nothing above it moves, and the popup
   sits above .stickers (z-index 60) because it has to cover everything.
   ========================================================================== */
.mform {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}
.mform[hidden] { display: none; }

.mform__scrim { position: absolute; inset: 0; background: rgba(8, 12, 28, .58); }

.mform__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  background: var(--surface, #fff);
  color: var(--ink, #1d1d1d);
  border: 1px solid rgba(10, 31, 120, .12);
  border-radius: 20px;
  padding: 28px 28px 24px;
  box-shadow: 0 34px 80px -24px rgba(8, 14, 34, .55);
  animation: mform-in .24s var(--ease, cubic-bezier(.4, 0, .2, 1)) both;
}
@keyframes mform-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
}

.mform__x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(29, 29, 29, .2);
  background: #fff;
  color: var(--ink, #1d1d1d);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.mform__x:hover { background: #f1f2f7; }

.mform__title {
  font-size: calc(27px * var(--text-scale));
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.mform__lede {
  color: var(--ink-2, rgba(29, 29, 29, .68));
  font-size: calc(16px * var(--text-scale));
  margin: 0 0 18px;
}

.mfield { margin-bottom: 14px; }
.mfield label {
  display: block;
  margin-bottom: 6px;
  font-size: calc(13px * var(--text-scale));
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2, rgba(29, 29, 29, .68));
}
.mfield input,
.mfield textarea {
  width: 100%;
  font: inherit;
  font-size: calc(17px * var(--text-scale));
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(29, 29, 29, .22);
  background: #fff;
  color: var(--ink, #1d1d1d);
}
.mfield input::placeholder,
.mfield textarea::placeholder { color: rgba(29, 29, 29, .42); }
.mfield input:focus,
.mfield textarea:focus {
  outline: 3px solid var(--accent-soft, rgba(10, 31, 120, .1));
  border-color: var(--accent, #0a1f78);
}
.mfield textarea { min-height: 112px; resize: vertical; }

/* the errors are the one thing on this panel that must not be missable */
.mfield__err,
.mform__err {
  color: #b3261e;
  font-size: calc(14px * var(--text-scale));
  font-weight: 700;
  margin: 6px 0 0;
}
.mform__err { margin: 0 0 12px; }

.mform__send { width: 100%; justify-content: center; }
.mform__note {
  font-size: calc(13px * var(--text-scale));
  color: var(--ink-3, rgba(29, 29, 29, .52));
  margin: 10px 0 0;
}
.mform__done { text-align: center; padding: 6px 0 2px; }
.mform__done .mform__send { width: auto; }
.mform__done--page { padding: 6px 0; }

/* the standalone /contact page shows the same fields in the page body */
.mform__page { max-width: 560px; }

/* phones: the panel takes the screen, so the on-screen keyboard cannot push
   the Send button out of reach and nothing hides behind the home bar */
@media (max-width: 620px) {
  .mform { padding: 10px; }
  .mform__panel {
    width: 100%;
    max-height: calc(100vh - 20px);
    padding: 22px 18px 18px;
    border-radius: 16px;
  }
  .mform__title { font-size: calc(23px * var(--text-scale)); }
}

@media (prefers-reduced-motion: reduce) {
  .mform__panel { animation: none; }
}


/* ============================================================ ARTICLES ===
   The article template and the article hub. Same visual system as the rest of
   the site (off-white ground, one grotesque, hairline rules, the indigo accent
   used only where it means something), with one deliberate difference: running
   text is set for reading, not for display.

   Everything sits on one solid panel. The page's ambient orb is fixed behind the
   content, and prose read over a bright moving blob is exactly the low-contrast
   text the owner keeps flagging — so the column gets a flat ground and the orb
   shows either side of it instead of through it.
   ========================================================================== */
.art__paper {
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .035);
  /* The page has TWO decorative layers behind the content — the fixed ambient
     orb, and `.drifters` at z-index 3, which floats small canvases over the whole
     page. Prose read under a drifting blob is exactly the low-contrast text the
     owner keeps flagging, so the reading column is lifted above both; the orb and
     the drifters still show either side of it.
     The width is in px on purpose: the site's base type is ~29px, so a ch-based
     cap silently resolves to about 1300px here. */
  position: relative;
  z-index: 4;
  /* Full width, edge to edge: the owner did not want the animated background
     showing down either side of the reading panel. The column of TEXT is held to a
     readable measure below instead of the whole panel being narrowed, so the panel
     covers the page while the prose stays at a comfortable line length. */
  max-width: none;
  margin: 0;
  border-left: 0;
  border-right: 0;
  padding: clamp(20px, 3.2vw, 44px) clamp(18px, 4vw, 60px);
}
.art__head, .art__body { max-width: 820px; margin-inline: auto; }
.art__head { padding-bottom: 0; }
.art__title {
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 12px 0 0;
}
.art__meta {
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
}

/* The lead picture, shown whole. It used to be forced into a 16:9 frame with
   `object-fit: cover`, which is fine for a photograph but cuts the sides off an
   infographic - the owner saw the four columns cropped on a phone. The picture now
   keeps its own ratio at every width; the 4:3 phone override went with it. Any
   lead picture should be delivered already at the shape it should appear in. */
.art__lead { margin-top: 26px; }
.art__lead img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ground-2);
}
.art__lead figcaption {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* a picture inside a section — the infographic in the "four kinds of course"
   piece. Not cropped like the lead: an infographic is drawn to a fixed canvas and
   cutting it to 16:9 would slice a column off, so it keeps its own ratio. */
.art__fig { margin: 22px 0 6px; }
.art__fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ground-2);
  background: var(--ground-2);
}
.art__fig a { display: block; }
.art__fig-open { color: var(--ink); font-weight: 600; white-space: nowrap; }
.art__fig figcaption {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* the standfirst: the whole answer in one paragraph, so an answer engine can lift
   it on its own, and so a reader knows in ten seconds whether to stay */
.art__answer {
  margin-top: 26px;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.55;
  color: var(--ink);
}

.art__short {
  margin-top: 28px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 18px 20px;
}
.art__short-h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}
.art__short ul { margin: 11px 0 0; padding-left: 20px; }
.art__short li {
  font-size: calc(17px * var(--text-scale));
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 9px;
}
.art__short li:last-child { margin-bottom: 0; }

.art__sec { margin-top: 42px; }
.art__sec:first-child { margin-top: 0; }
.art__h {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 0 0 15px;
}
.art__body p {
  font-size: calc(20px * var(--text-scale));
  line-height: 1.68;
  color: var(--ink);
  margin-bottom: 17px;
}
.art__body p:last-child { margin-bottom: 0; }

/* Our take is the last section of every piece and the only one ruled off: it is
   the studio's own view rather than reporting, and should be mistaken for
   neither the facts above it nor the sources below. */
.art__sec--take {
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--hairline);
  padding: 24px 0 4px;
}

.art__sources { margin-top: 52px; border-top: 1px solid var(--hairline); padding-top: 22px; }
.art__sources ol { list-style: none; margin: 0; padding: 0; counter-reset: src; }
.art__sources li {
  counter-increment: src;
  position: relative;
  padding-left: 28px;
  margin-bottom: 11px;
  /* The list item inherits the panel's ~29px type, and an inline anchor's smaller
     font does not shrink the line boxes around it — so a source link that wrapped
     onto a second line had a 29px-tall line gap around 12px text. Setting the size
     here tightens the wrap; the anchor then only has to set its own size. */
  font-size: calc(13.5px * var(--text-scale));
  line-height: 1.45;
}
.art__sources li::before {
  content: counter(src);
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
/* The source links are deliberately smaller than the prose. The selector has to
   out-rank `.band p a, .band li a { font-size: inherit }` (line 3324), which is
   more specific than a bare `.art__sources a` and quietly undid the size: the
   links measured 29px - the panel's inherited size - while this rule sat in the
   sheet looking correct. */
.art__paper .art__sources li a {
  font-size: calc(13.5px * var(--text-scale));
  line-height: 1.4;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.art__sources a:hover { color: var(--accent); }
.art__src-meta {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--ink-2);
}
.art__note {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.art__back { margin-top: 46px; font-size: 16px; font-weight: 600; }
.art__back a { border-bottom: 1px solid var(--ink-4); }

/* ---- the hub ------------------------------------------------------------ */
.art-index { margin-top: 34px; border-top: 1px solid var(--hairline); }
.art-card { padding: 28px 0; border-bottom: 1px solid var(--hairline); }
.art-card__meta {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
}
.art-card__h { margin: 10px 0 12px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.028em; }
.art-card__h a { color: var(--ink); }
.art-card__h a:hover { color: var(--accent); }
.art-card__sum { font-size: calc(17px * var(--text-scale)); line-height: 1.6; color: var(--ink); }
.art-card__more { margin-top: 12px; font-size: 16px; font-weight: 600; color: var(--accent); }

@media (max-width: 640px) {
  .art__sec { margin-top: 34px; }
  .art__paper { padding: 18px 16px; }
}


/* --- THE NOVEMBER COURSE BAND (added 19 October 2026) -----------------------
   Kara Learning's pointer to Elza's 12-13 November 2026 course. Everything here uses the
   site's own tokens so the band cannot drift away from the rest of the page, and every
   line a reader has to read is at full ink strength: the rule on every one of her
   projects is that nothing important is faint. The two lists sit side by side on a
   laptop and stack on a phone. */
.band--nov .nov__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 10px;
}
.nov__h {
  font-size: clamp(calc(28px * var(--text-scale)), calc(2.6vw * var(--text-scale)), calc(32px * var(--text-scale)));
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 16px;
}
.nov__list { list-style: none; margin: 0; padding: 0; }
.nov__list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 15px;
  font-size: calc(26px * var(--text-scale));
  line-height: 1.4;
  color: var(--ink);
}
.nov__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .38em;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent);
}
.nov__facts { margin-top: 40px; }
.nov__facts .workshop__facts { border-top: 1px solid var(--ink-4); padding-top: 26px; }
.nov__facts .workshop__facts dt {
  font-size: calc(20px * var(--text-scale));
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}
/* the shared rule prints a price at 32px; these values are dates and times, so they
   are set a touch smaller and in full ink */
.nov__facts .workshop__facts dd.nov__fact {
  font-size: calc(30px * var(--text-scale));
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.nov__trainer {
  margin-top: 30px;
  font-size: calc(26px * var(--text-scale));
  line-height: 1.45;
  color: var(--ink);
}
.nov__acts { margin-top: 28px; }
/* the funding line is a correction, not small print: it is set in full ink and bold so
   nobody can miss that this course is paid in full */
.nov__foot {
  margin-top: 20px;
  font-size: calc(23px * var(--text-scale));
  line-height: 1.45;
  font-weight: 700;
  color: var(--ink);
}
@media (max-width: 900px) {
  .band--nov .nov__grid { grid-template-columns: 1fr; gap: 28px; }
}


/* --- THE OPTIONAL "HOW DID YOU HEAR ABOUT US?" LINE -------------------------
   Under the WhatsApp button on the contact page. An invitation, not a form field: the
   choices are printed so an answer is easy to give, and the note says plainly that
   skipping it changes nothing. Set in full ink — nothing a reader has to read is faint. */
.howheard {
  max-width: 62ch;
  margin-top: 30px;
  padding: 26px 28px;
  border: 1px solid var(--ink-4);
  border-radius: 14px;
  background: var(--ground-2);
}
.howheard strong {
  display: block;
  font-size: calc(26px * var(--text-scale));
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}
.howheard__choices {
  display: block;
  font-size: calc(25px * var(--text-scale));
  font-weight: 700;
  line-height: 1.7;
  color: var(--accent);
}
.howheard__note {
  display: block;
  margin-top: 12px;
  font-size: calc(24px * var(--text-scale));
  line-height: 1.45;
  color: var(--ink);
}


/* The two ways in from the November band sit on one line and wrap on a phone. */
.nov__acts .btn { margin: 0 14px 14px 0; }


/* --- THE WHATSAPP HAND ----------------------------------------------------------------
   Her instruction, 21 October 2026, and then 22 October 2026: an icon on every page, and it must
   be a ROUND button in the bottom right hand corner. Same button as on elzatian.com, so the two
   sites behave identically for a visitor. WhatsApp's own green, because that is what makes it
   recognisable before anything is read; the <a> carries the words a screen reader needs. */
.wa-float {
  position: fixed;
  right: clamp(14px, 2.4vw, 28px);
  bottom: clamp(14px, 2.4vw, 28px);
  z-index: 85;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  transition: background .2s ease, transform .2s ease;
}
.wa-float:hover { background: #1EBE5A; transform: translateY(-2px); }
.wa-float:focus-visible { outline: 3px solid #0A0A0A; outline-offset: 3px; }
.wa-float svg { display: block; width: 30px; height: 30px; }
.wa-float__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 560px) {
  .wa-float { width: 54px; height: 54px; }
  .wa-float svg { width: 28px; height: 28px; }
}


/* ========================================================================== AI VIDEO LAB FOR TEAMS
   The corporate page on karalearning.com, her instruction 22 October 2026. The same Creative Studio
   palette as the Elzatian page — deep charcoal, warm cream, burnt orange — scoped under `.vt` so it
   touches nothing else on this site. Every rule is prefixed `vt-`. */
.vt {
  --vt-paper:  #F4F0E8;
  --vt-paper-2:#FBF8F2;
  --vt-ink:    #111111;
  --vt-body:   #2E2C29;
  --vt-soft:   #6B665E;
  --vt-orange: #E65B32;
  --vt-orange-2:#C9481F;
  --vt-line:   rgba(17, 17, 17, .16);
  --vt-line-2: rgba(17, 17, 17, .08);
  --vt-r:      14px;
  --vt-w:      1160px;
  --vt-gap:    clamp(18px, 2.4vw, 30px);
  background: var(--vt-paper);
  color: var(--vt-ink);
}
.vt .vt-shell { width: 100%; max-width: var(--vt-w); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.vt .vt-shell--narrow { max-width: 860px; }
.vt .vt-eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--vt-orange); margin: 0 0 16px; }
.vt .vt-h1 { margin: 0 0 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-size: clamp(34px, 5.4vw, 66px); font-family: var(--f-display, 'Space Grotesk', 'Inter', sans-serif); }
.vt .vt-h1__line, .vt .vt-h2__line { display: block; }
.vt .vt-h1__line--accent { color: var(--vt-orange); }
.vt .vt-h2 { margin: 0 0 18px; font-weight: 800; letter-spacing: -.025em; line-height: 1.04; font-size: clamp(26px, 3.4vw, 44px); font-family: var(--f-display, 'Space Grotesk', 'Inter', sans-serif); }
.vt .vt-h2--light { color: var(--vt-paper); }
.vt .vt-h3 { margin: 0 0 8px; font-weight: 800; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.2; }
.vt .vt-h3--xl { font-size: clamp(22px, 2.4vw, 30px); }
.vt .vt-lead { font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.65; color: var(--vt-body); margin: 0 0 16px; max-width: 62ch; }
.vt .vt-lead--narrow { max-width: 64ch; }
.vt .vt-lead--light { color: rgba(244, 240, 232, .82); }
.vt .vt-body { font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.68; color: var(--vt-body); margin: 0 0 14px; }
.vt .vt-micro { font-size: 13.5px; line-height: 1.6; color: var(--vt-soft); margin: 12px 0 0; }
.vt .vt-micro--center { text-align: center; margin-top: 28px; }
.vt .vt-micro--light { color: rgba(244, 240, 232, .72); }
.vt .vt-num { font-size: clamp(26px, 2.8vw, 38px); font-weight: 800; color: var(--vt-orange); margin: 0 0 8px; line-height: 1; font-family: var(--f-display, 'Space Grotesk', 'Inter', sans-serif); }
.vt .vt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 10px; background: var(--vt-orange); color: #fff; border: 1px solid var(--vt-orange); font-size: 15.5px; font-weight: 700; text-decoration: none; min-height: 46px; transition: background .18s ease; }
.vt .vt-btn:hover { background: var(--vt-orange-2); border-color: var(--vt-orange-2); }
.vt .vt-btn--quiet { background: transparent; color: var(--vt-ink); border-color: var(--vt-line); }
.vt .vt-btn--block { display: flex; width: 100%; }
.vt .vt-btn--lg { padding: 17px 32px; font-size: 16.5px; }
.vt .vt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.vt .vt-hero { padding: clamp(30px, 4.6vw, 70px) 0 clamp(36px, 5vw, 80px); }
.vt .vt-hero__grid { display: grid; grid-template-columns: 58fr 42fr; gap: clamp(26px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .vt .vt-hero__grid { grid-template-columns: 1fr; } .vt .vt-hero__media { margin-top: 28px; } }
.vt .vt-facts { font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--vt-line); }
.vt .vt-sec { padding: clamp(48px, 6vw, 96px) 0; }
.vt .vt-sec--sunk { background: var(--vt-paper-2); border-top: 1px solid var(--vt-line-2); border-bottom: 1px solid var(--vt-line-2); }
.vt .vt-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vt-gap); margin-top: 34px; }
@media (max-width: 980px) { .vt .vt-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vt .vt-four { grid-template-columns: 1fr; } }
.vt .vt-item { border-top: 1px solid var(--vt-line); padding-top: 18px; }
.vt .vt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vt-gap); margin-top: 36px; align-items: start; }
@media (max-width: 980px) { .vt .vt-cards { grid-template-columns: 1fr; max-width: 660px; } }
.vt .vt-card { border: 1px solid var(--vt-line); border-radius: var(--vt-r); overflow: hidden; }
.vt .vt-card--t1 { background: var(--vt-paper); }
.vt .vt-card--t2 { background: #EFE8DB; }
.vt .vt-card--t3 { background: #E9E1D2; }
.vt .vt-card__body { padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; }
.vt .vt-card__eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--vt-orange); margin: 0 0 10px; }
.vt .vt-card__sub { font-size: 15.5px; font-weight: 600; color: var(--vt-soft); margin: 0 0 14px; }
.vt .vt-level { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 12px 6px 10px; border: 1px solid var(--vt-line); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; background: rgba(255,255,255,.5); }
.vt .vt-level__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vt-orange); }
.vt .vt-list { list-style: none; margin: 0 0 16px; padding: 0; }
.vt .vt-list li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: 15.5px; line-height: 1.55; color: var(--vt-body); }
.vt .vt-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 3px; background: var(--vt-orange); opacity: .9; }
.vt .vt-list--light li { color: rgba(244, 240, 232, .86); }
.vt .vt-project { font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; padding: 13px 15px; border: 1px solid var(--vt-line); border-radius: var(--vt-r); }
.vt .vt-project strong { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.vt .vt-reqs { margin: 0 0 16px; padding: 15px 16px 13px; border-radius: var(--vt-r); background: #EFE2DA; }
.vt .vt-reqs__head { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--vt-soft); }
.vt .vt-reqs__list { list-style: none; margin: 0; padding: 0; }
.vt .vt-reqs__list li { margin-bottom: 7px; font-size: 14px; line-height: 1.5; color: var(--vt-body); }
.vt .vt-meta { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 14px; }
.vt .vt-meta div { padding: 9px 0; border-top: 1px solid var(--vt-line-2); }
.vt .vt-meta dt { font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--vt-soft); margin-bottom: 3px; }
.vt .vt-meta dd { margin: 0; font-size: 14.5px; font-weight: 600; }
.vt .vt-price { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 16px; font-family: var(--f-display, 'Space Grotesk', 'Inter', sans-serif); }
.vt .vt-notes { margin-top: 32px; display: grid; gap: 12px; }
.vt .vt-notes__item { margin: 0 auto; max-width: 76ch; text-align: center; font-size: 15px; line-height: 1.6; color: var(--vt-body); }
.vt .vt-notes__item:first-child { padding: 15px 18px; border: 1px solid var(--vt-line); border-left: 3px solid var(--vt-orange); border-radius: var(--vt-r); background: var(--vt-paper-2); text-align: left; font-weight: 600; color: var(--vt-ink); }
.vt .vt-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vt-gap); margin-top: 34px; align-items: start; }
@media (max-width: 880px) { .vt .vt-plans { grid-template-columns: 1fr; } }
.vt .vt-plan { padding: clamp(22px, 2.6vw, 36px); border: 1px solid var(--vt-line); border-radius: var(--vt-r); background: var(--vt-paper); }
.vt .vt-plan--dark { background: var(--vt-ink); border-color: var(--vt-ink); color: var(--vt-paper); }
.vt .vt-plan--dark .vt-list li { color: rgba(244, 240, 232, .86); }
.vt .vt-plan__label { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--vt-soft); margin: 0 0 10px; }
.vt .vt-plan__badge { display: inline-block; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; background: var(--vt-orange); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.vt .vt-plan__price { font-size: 36px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 6px; font-family: var(--f-display, 'Space Grotesk', 'Inter', sans-serif); }
.vt .vt-plan__price--xl { font-size: clamp(42px, 5vw, 58px); }
.vt .vt-plan__save { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 15px; font-weight: 700; color: var(--vt-orange); margin: 0 0 18px; }
.vt .vt-plan--dark .vt-plan__save { color: #F08A66; }
.vt .vt-plan__was { font-size: 14.5px; font-weight: 600; color: var(--vt-soft); text-decoration: line-through; }
.vt .vt-plan--dark .vt-plan__was { color: rgba(244, 240, 232, .78); }
.vt .vt-plan .vt-btn { margin-top: 20px; }
.vt .vt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vt-gap); margin-top: 30px; }
@media (max-width: 900px) { .vt .vt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vt .vt-grid { grid-template-columns: 1fr; } }
.vt .vt-tile { margin: 0; border: 1px solid var(--vt-line); border-radius: var(--vt-r); overflow: hidden; background: var(--vt-paper); }
.vt .vt-tile figcaption { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px 15px; }
.vt .vt-tile__title { font-size: 15.5px; font-weight: 700; }
.vt .vt-tile__meta { font-size: 12.5px; color: var(--vt-soft); }
.vt .vt-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 4vw, 60px); align-items: start; }
@media (max-width: 880px) { .vt .vt-two { grid-template-columns: 1fr; } }
.vt .vt-log { margin: 18px 0 0; }
.vt .vt-log div { display: flex; gap: 16px; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--vt-line-2); }
.vt .vt-log dt { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--vt-soft); }
.vt .vt-log dd { margin: 0; font-size: 15px; font-weight: 600; text-align: right; }
.vt .vt-trainer__sub { font-size: 14.5px; font-weight: 700; color: var(--vt-orange); margin: 0 0 16px; }
.vt .vt-faq { margin-top: 26px; border-top: 1px solid var(--vt-line); }
.vt .vt-q { border-bottom: 1px solid var(--vt-line); }
.vt .vt-q summary { cursor: pointer; list-style: none; padding: 18px 32px 18px 0; position: relative; font-size: clamp(16px, 1.4vw, 18px); font-weight: 700; color: var(--vt-ink); }
.vt .vt-q summary::-webkit-details-marker { display: none; }
.vt .vt-q summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 700; color: var(--vt-orange); }
.vt .vt-q[open] summary::after { content: "\2013"; }
.vt .vt-q .vt-body { padding: 0 32px 18px 0; margin: 0; }
.vt .vt-close { background: var(--vt-ink); color: var(--vt-paper); padding: clamp(52px, 7vw, 104px) 0; }
.vt .vt-close .vt-btn { margin-top: 10px; }
.vt .vt-media-wrap { display: block; }
.vt .vt-frame { aspect-ratio: var(--vt-ar, 16 / 9); overflow: hidden; border-radius: var(--vt-r); background: #101012; }
.vt .vt-frame--tall { width: min(100%, 232px); margin-inline: auto; }
.vt .vt-frame__el { display: block; width: 100%; height: 100%; object-fit: cover; }
.vt .vt-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vt .vt-media-wrap:has(.vt-frame--tall) .vt-bar { justify-content: center; }
.vt .vt-bar__btn { display: inline-flex; align-items: center; padding: 9px 15px; border-radius: 9px; cursor: pointer; background: var(--vt-paper); color: var(--vt-ink); border: 1px solid var(--vt-line); font: inherit; font-size: 13px; font-weight: 700; }
.vt .vt-bar__btn:hover { background: #fff; border-color: var(--vt-ink); }
.vt .vt-bar__btn[hidden] { display: none; }


/* Kara's ambient background and its drifting shapes are part of its own look, and on this page they
   paint over the cards. Turned off for this one page only, matched by the page wrapper, so every
   other page on the site keeps them. */
body:has(.vt-page) .drifters,
body:has(.vt-page) .ambient {
  display: none !important;
}


/* ==========================================================================
   Article additions (30 October 2026)
   A step or a question inside an article section is a real H3, and the prose can
   carry links. Both are written as `.art__paper .art__body ...` on purpose: the
   sheet already has `.band p a, .band li a { font-size: inherit }`, which is more
   specific than a bare class selector and silently undid the source links' size
   once already.
   ========================================================================== */
.art__h--sub {
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.25;
  margin: 26px 0 12px;
}
/* The questions band. Each question is a real H3 under the section headings and each answer
   is a paragraph in the same column, so a reader recognises it at once - and so the markup
   that tells an answer engine about the pair matches what is printed. */
.art__faq { margin-top: 52px; border-top: 1px solid var(--hairline); padding-top: 22px; }
.art__faq-item { margin-bottom: 24px; }
.art__faq-item:last-child { margin-bottom: 0; }
.art__faq .art__h--sub { margin: 0 0 8px; color: var(--ink); }
.art__faq p { margin: 0; }
/* A list inside the prose. The site resets every list to `list-style: none` for its own
   layout blocks, and a bare `li` inherits the panel's display type rather than the body
   column's, so both have to be set here: with markers, at the same size and colour as the
   paragraphs around it. */
.art__list { list-style: disc; margin: 6px 0 20px; padding-left: 26px; }
.art__list li {
  list-style: disc;
  font-size: calc(20px * var(--text-scale));
  line-height: 1.62;
  color: var(--ink);
  margin-bottom: 9px;
}
.art__list li:last-child { margin-bottom: 0; }
.art__list li::marker { color: var(--accent); font-size: 0.9em; }
.art__paper .art__body p a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.art__paper .art__body p a:hover { background: var(--accent-soft); }

/* the closing call to action, in the site's own button language */
.art__cta {
  margin: 46px 0 6px;
  padding: 24px 24px 26px;
  border: 1px solid rgba(10, 31, 120, .22);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
}
.art__cta-h {
  margin: 0 0 10px;
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.art__cta-b {
  margin: 0 0 18px;
  font-size: calc(19px * var(--text-scale));
  line-height: 1.55;
  color: var(--ink-2);
}
.art__cta-acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.art__paper .art__cta-acts a.btn {
  font-size: 18px;
  font-weight: 600;
  padding: 14px 22px;
  text-decoration: none;
  line-height: 1.2;
}
/* A link inside the CTA is a button, not a prose link. The prose rule above sets every anchor
   in the body column to the accent colour, and its specificity beat the button's own white
   type on the violet primary - so the button read navy on purple. The buttons keep their own
   colours: white on the primary, ink on the ghost. */
.art__paper .art__cta-acts a.btn--primary,
.art__paper .art__cta-acts a.btn--primary:hover { color: #fff; }
.art__paper .art__cta-acts a.btn--ghost { color: var(--ink); }