/* ==========================================================================
   Adrian Ekrem - landing design system
   Field-based world: deep forest green, saffron yellow, warm cream.
   Sections own whole colour fields; colour is the structure, not decoration.
   ========================================================================== */

/* ---------- Fonts: self-hosted -----------------------------------------
   Served from this domain so a page view sends nothing to Google before
   the visitor consents. Latin + Latin Extended (Polish) only. The icon font
   is subset to the icons the site uses — regenerate it with the
   icon_names parameter if you add a new one (see docs/DEPLOY-CHECKLIST.md). */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url("/fonts/material-symbols-outlined-subset.woff2") format("woff2");
}

:root {
  /* Fields */
  --green-900: #0B241B;
  --green-800: #123D2F;
  --green-700: #1A5241;
  --green-600: #2A6B56;
  --yellow-500: #F4C63D;
  --yellow-400: #F8D765;
  --yellow-200: #FBEAAE;
  --cream: #FBF6EA;
  --cream-200: #F1E7D2;
  --surface: #FFFFFF;        /* cards that must lift off the cream ground */

  /* Status - the only hues outside the three fields */
  --ok-bg: #D6EEDF;
  --ok-ink: #0E3D28;
  --err-bg: #FADEDB;
  --err-ink: #7A1810;
  --err-line: #B3261E;

  /* Ink */
  --ink: #14261F;
  --ink-70: rgba(20, 38, 31, .72);
  --ink-55: rgba(20, 38, 31, .58);
  --on-green: #F4EFE1;
  --on-green-soft: #AECBBA;
  --on-yellow-soft: #5C4A13;

  /* Type */
  --font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 62ch;
  /* The single reading column for long-form articles. Hero, prose and
     post-end all take this width so the page keeps one left AND one
     right edge from breadcrumb to footer. */
  --article-measure: 44rem;
  /* Text measure inside .prose. Articles set this to 100% because their
     column is already the measure; wide marketing sections leave it at
     the default so prose stays readable while tables, tiles and steps
     break out to the full field width. */
  --prose-measure: 44rem;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* Form */
  --r-xs: .35rem;
  --r-sm: .625rem;
  --r-md: 1.125rem;
  --r-lg: 1.75rem;
  --r-xl: 2.5rem;
  --r-pill: 999px;

  --shadow-card: 0 18px 40px -18px rgba(11, 36, 27, .45), 0 3px 8px -3px rgba(11, 36, 27, .22);
  --shadow-lift: 0 30px 60px -24px rgba(11, 36, 27, .55), 0 6px 14px -6px rgba(11, 36, 27, .25);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

/* Components below set their own display, so [hidden] needs the last word. */
[hidden] { display: none !important; }

/* The nav is sticky, so in-page anchors must clear it. */
[id] { scroll-margin-top: 92px; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

::selection { background: var(--yellow-500); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--yellow-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- Layout primitives ------------------------------------------ */

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 920px; }

.field { position: relative; padding-block: var(--section-y); }
.field--green { background: var(--green-800); color: var(--on-green); }
.field--green-deep { background: var(--green-900); color: var(--on-green); }
.field--yellow { background: var(--yellow-500); color: var(--ink); }
.field--cream { background: var(--cream); color: var(--ink); }

.measure { max-width: var(--measure); }

/* ---------- Type -------------------------------------------------------- */

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

.display {
  font-size: clamp(2.75rem, 1.4rem + 6.2vw, 6rem);
  line-height: .96;
  letter-spacing: -.04em;
}

.section-title {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
  line-height: 1.02;
}

.section-lead {
  margin: 1.25rem 0 0;
  max-width: 54ch;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  line-height: 1.55;
}

.field--green .section-lead { color: var(--on-green-soft); }
.field--yellow .section-lead { color: var(--on-yellow-soft); }
.field--cream .section-lead { color: var(--ink-70); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* A drawn highlight behind a word - the one flourish the world allows. */
.mark {
  position: relative;
  display: inline-block;
  color: var(--yellow-500);
}
.mark::after {
  content: "";
  position: absolute;
  left: -.06em; right: -.06em; bottom: .02em;
  height: .12em;
  background: currentColor;
  border-radius: 999px;
  opacity: .45;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.75rem;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.015em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s var(--ease-out), background-color .22s var(--ease-out),
              color .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn--primary {
  background: var(--yellow-500);
  color: var(--ink);
  box-shadow: 0 10px 24px -14px rgba(11, 36, 27, .8);
}
.btn--primary:hover { background: var(--yellow-400); box-shadow: 0 18px 34px -16px rgba(11, 36, 27, .85); }

.btn--ink { background: var(--green-900); color: var(--on-green); }
.btn--ink:hover { background: var(--green-800); }

.btn--ghost {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 2px currentColor;
}
.btn--ghost:hover { background: rgba(244, 239, 225, .12); }
.field--cream .btn--ghost:hover, .field--yellow .btn--ghost:hover { background: rgba(20, 38, 31, .07); }

.btn--lg { padding: 1.1rem 2.15rem; font-size: 1.1875rem; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn .ico { font-size: 1.25em; line-height: 1; }

/* ---------- Pills / tags ------------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .9rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill--yellow { background: var(--yellow-500); color: var(--ink); }
.pill--outline { box-shadow: inset 0 0 0 1.5px rgba(174, 203, 186, .55); color: var(--on-green-soft); }
.pill--green { background: var(--green-800); color: var(--on-green); }

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--green-900);
  color: var(--on-green);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 72px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin-right: auto;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: 1.0625rem;
}
.nav__monogram {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--yellow-500);
  color: var(--green-900);
  font-size: .8125rem;
  letter-spacing: 0;
}
.nav__links { display: none; align-items: center; gap: .25rem; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .55rem .9rem;
  border: 0;
  background: none;
  border-radius: var(--r-pill);
  color: var(--on-green);
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease-out);
}
.nav__link:hover { background: rgba(244, 239, 225, .12); }
.nav__link .ico { font-size: 1.125rem; }

.nav__menu {
  position: absolute;
  top: calc(100% + .35rem);
  left: 50%;
  translate: -50% 6px;
  min-width: 215px;
  padding: .4rem;
  background: var(--green-700);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease-out), translate .2s var(--ease-out), visibility .2s;
}
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; translate: -50% 0; }
.nav__menu a {
  display: block;
  padding: .55rem .75rem;
  border-radius: var(--r-sm);
  color: var(--on-green);
  font-size: .9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav__menu a:hover { background: rgba(244, 239, 225, .14); }

.nav__cta { padding: .65rem 1.3rem; font-size: .9375rem; white-space: nowrap; }
/* Narrow phones keep the action but drop the tail of its label. */
.nav__cta-tail { display: none; }
@media (min-width: 420px) { .nav__cta-tail { display: inline; } }
.nav__burger {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(244, 239, 225, .12);
  color: var(--on-green);
  cursor: pointer;
}

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__burger { display: none; }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--green-900);
  color: var(--on-green);
  padding: 1.25rem var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .42s var(--ease-out), visibility .42s;
}
.drawer[data-open="true"] { transform: translateY(0); visibility: visible; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.drawer__list { display: flex; flex-direction: column; gap: .1rem; margin-top: 1.5rem; }
.drawer__list a {
  padding: .7rem 0;
  border-bottom: 1px solid rgba(174, 203, 186, .18);
  color: var(--on-green);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.03em;
  text-decoration: none;
}
.drawer__foot { margin-top: 1.75rem; display: grid; gap: .75rem; }

/* ==========================================================================
   Hero - the figure stands in the green field
   ========================================================================== */

.hero {
  position: relative;
  background: var(--green-800);
  color: var(--on-green);
  overflow: hidden;
  isolation: isolate;
}
/* A pool of light behind the figure so the cut-out is seated, not pasted. */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -12%;
  bottom: -32%;
  width: min(125vw, 1150px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 107, 86, .8) 0%, rgba(18, 61, 47, 0) 68%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2.75rem, 6vw, 5rem);
}

.hero__credentials { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
/* Narrow phones keep one tidy row of credentials; the ticker repeats the rest. */
@media (max-width: 519px) {
  .hero__credentials .pill { padding: .35rem .7rem; font-size: .75rem; }
  .hero__credentials .pill:nth-child(n + 4) { display: none; }
}

.hero h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(2.375rem, 1.35rem + 4.3vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.042em;
  max-width: 14ch;
}

.hero__lead {
  max-width: 34ch;
  font-size: clamp(1.125rem, 1.02rem + .5vw, 1.4375rem);
  line-height: 1.5;
  color: var(--on-green-soft);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.hero__figure {
  position: relative;
  align-self: end;
  justify-self: center;
  width: min(100%, 440px);
}
/* Two organic shapes seat the cut-out in the field instead of a soft gradient. */
.hero__blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.hero__blob--green {
  inset: 12% -14% -6% -14%;
  background: var(--green-600);
  border-radius: 58% 42% 46% 54% / 52% 44% 56% 48%;
}
/* The yellow shape layers under the green one, not beside it. */
.hero__blob--yellow {
  width: 44%;
  aspect-ratio: 1.15;
  top: 17%;
  left: -13%;
  background: var(--yellow-500);
  border-radius: 62% 38% 52% 48% / 46% 58% 42% 54%;
}
.hero__portrait {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(11, 36, 27, .5));
}

/* Floating proof cards that overlap the figure */
.proof {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .95rem 1.2rem;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.proof__value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}
.proof__label { font-size: .8125rem; line-height: 1.3; font-weight: 600; }
.proof--yellow { background: var(--yellow-500); color: var(--ink); }
.proof--yellow .proof__label { color: var(--on-yellow-soft); }
.proof--cream { background: var(--cream); color: var(--ink); }
.proof--cream .proof__label { color: var(--ink-55); }

/* The proof chips ride on the photograph at every width, so the portrait
   reaches the first viewport on phones instead of sitting below the fold. */
.hero__proofs { display: none; }
.proof--float { position: absolute; z-index: 3; }
.proof--float.is-topright { top: 4%; right: -.5rem; }
.proof--float.is-botright { bottom: 10%; left: -.5rem; }
.proof--float.is-midleft { display: none; }

@media (max-width: 899px) {
  /* Tighten the copy so the face clears the fold on a 390x844 phone. */
  .hero__grid { gap: 1rem; padding-top: 2rem; }
  .hero__credentials { margin-bottom: 1.25rem; }
  .hero h1 { margin-bottom: 1.1rem; }
  .hero__actions { margin-top: 1.5rem; gap: .5rem; flex-wrap: nowrap; }
  .hero__actions .btn { flex: 1 1 auto; padding: .95rem 1rem; font-size: 1rem; white-space: nowrap; }
  .hero__actions .btn .ico { display: none; }
  .hero__lead { font-size: 1.0625rem; line-height: 1.45; }
  .hero__figure { width: min(100%, 350px); }
  .proof--float { padding: .7rem .95rem; }
  .proof--float .proof__value { font-size: 1.375rem; }
  .proof--float .proof__label { font-size: .75rem; }
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    align-items: end;
    gap: clamp(1rem, 2vw, 2.5rem);
  }
  .hero__copy { padding-bottom: clamp(3.5rem, 7vw, 7rem); }
  .hero__figure { width: 100%; max-width: 540px; justify-self: end; }
  .hero__proofs { display: none; }

  /* Desktop has room for the third chip, out to the left of the figure. */
  .proof--float.is-topright { top: 10%; right: -3%; }
  .proof--float.is-midleft { display: flex; top: 58%; left: -12%; }
  .proof--float.is-botright { bottom: 12%; right: -6%; left: auto; }
}

@media (min-width: 1140px) {
  .proof--float.is-midleft { top: 54%; left: -18%; }
  .proof__value { font-size: 2rem; }
}

/* ==========================================================================
   Ticker
   ========================================================================== */

.ticker {
  background: var(--yellow-500);
  color: var(--ink);
  padding-block: .9rem;
  overflow: hidden;
  border-block: 3px solid var(--green-900);
}
.ticker__track { display: flex; width: max-content; animation: ticker 44s linear infinite; }
.ticker__row { display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; }
.ticker__row span {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.ticker__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-900); flex: none; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ==========================================================================
   Audience index - an editorial directory, not a card grid
   ========================================================================== */

.index { border-top: 2px solid rgba(20, 38, 31, .14); }
.index__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 2px solid rgba(20, 38, 31, .14);
  color: inherit;
  text-decoration: none;
  transition: background-color .3s var(--ease-out);
}
.index__row > * { transition: transform .3s var(--ease-out); }
.index__row:hover { background: rgba(20, 38, 31, .045); }
/* The row indents on hover via transform, so nothing reflows. */
.index__row:hover > :first-child { transform: translateX(clamp(.5rem, 2vw, 1.5rem)); }
.index__row:hover > .index__meta { transform: translateX(calc(-1 * clamp(.5rem, 2vw, 1.5rem))); }
.index__name {
  position: relative;
  isolation: isolate;
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.1rem + 2.1vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
}
/* The marker swash behind the name — the world's own highlight. It rests as a
   full-width rule so the mark exists on touch and never stops mid-word, then
   swells into the marker stroke on hover. Scaled, not resized, so it composites. */
.index__name::after {
  content: "";
  position: absolute;
  left: -.12em; bottom: .04em;
  width: calc(100% + .24em);
  height: .34em;
  background: var(--yellow-500);
  border-radius: 999px;
  z-index: -1;
  transform: scaleY(.3);
  transform-origin: bottom;
  transition: transform .32s var(--ease-out);
}
.index__row:hover .index__name::after,
.index__row:focus-visible .index__name::after { transform: scaleY(1); }

/* Each path owns a colour, carried at 52px on the arrow rather than as a bullet. */
.index__row { --accent: var(--green-700); }
.index__row:nth-child(2) { --accent: #8A5A06; }
.index__row:nth-child(3) { --accent: #14595C; }
.index__row:nth-child(4) { --accent: #8E4423; }
.index__desc { margin: .45rem 0 0; max-width: 48ch; color: var(--ink-70); font-size: 1rem; }
.index__meta { display: flex; align-items: center; gap: 1.25rem; }
.index__tag {
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-55);
  display: none;
  text-align: right;
}
.index__arrow {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--cream);
  transition: transform .3s var(--ease-out), background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.index__row:hover .index__arrow { transform: translateX(6px); background: var(--yellow-500); color: var(--ink); }
@media (min-width: 760px) { .index__tag { display: block; } }

/* ==========================================================================
   Method - three steps on yellow
   ========================================================================== */

.method__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.method__grid > * { min-width: 0; }
@media (min-width: 960px) { .method__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); } }

.method__stack { display: grid; gap: 1.25rem; }

.steps { display: grid; gap: 1.5rem; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid rgba(20, 38, 31, .16);
}
.steps .step:last-child { border-bottom: 0; padding-bottom: 0; }
.step__num {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--green-800);
  color: var(--yellow-500);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
}
.step h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); margin-bottom: .5rem; }
.step p { color: var(--on-yellow-soft); margin: 0; }

.method__media {
  border-radius: var(--r-lg);
  background: var(--cream);
  box-shadow: var(--shadow-card);
  padding: 1rem;
}
.method__media img { border-radius: var(--r-md); }
.method__caption { margin: .85rem .25rem .1rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-70); max-width: none; }

/* ==========================================================================
   Accent / audio
   ========================================================================== */

.accent { text-align: center; }
.accent .section-lead { margin-inline: auto; }

/* ==========================================================================
   Proof: quote + reviews
   ========================================================================== */

.quote { margin: 0; }
.quote__mark {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 800;
  line-height: .6;
  color: var(--green-600);
  display: block;
}
.quote blockquote {
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.12;
  max-width: 18ch;
}
.quote figcaption { margin-top: 1.5rem; font-size: .9375rem; color: var(--ink-55); }
.quote figcaption strong { display: block; font-size: 1.0625rem; color: var(--ink); letter-spacing: -.01em; font-family: var(--font-display); }

.proof-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.proof-layout > * { min-width: 0; }
@media (min-width: 900px) { .proof-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); } }

.reviews { display: grid; gap: 1.25rem; }
.review {
  padding: 1.5rem 1.65rem;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.review--dark { background: var(--green-800); color: var(--on-green); }
.review--dark .review__who small { color: var(--on-green-soft); }
.review__stars { color: #B0770A; letter-spacing: .12em; font-size: .9375rem; }
.review--dark .review__stars { color: var(--yellow-500); }
.review p { margin: .7rem 0 1.1rem; font-size: 1.0625rem; }
.review__who { display: flex; align-items: center; gap: .75rem; }
.review__who strong { font-family: var(--font-display); letter-spacing: -.02em; }
.review__who small { display: block; font-size: .8125rem; color: var(--ink-55); font-weight: 500; }
.review__avatar {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: var(--yellow-500);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
}

.gscore {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  border-radius: var(--r-md);
  background: var(--yellow-200);
  color: var(--ink);
}
.gscore__num { font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.gscore__meta { font-size: .9375rem; line-height: 1.4; }
.gscore__meta a { color: var(--ink); }

/* ==========================================================================
   Pricing
   ========================================================================== */

.plans { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .plans--3 { grid-template-columns: repeat(3, 1fr); } }
.plans + .note { margin-top: clamp(2rem, 4vw, 3rem); }

.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--r-lg);
  background: var(--cream);
  box-shadow: var(--shadow-card);
}
.plan--feature { background: var(--green-800); color: var(--on-green); }
.plans > * { min-width: 0; }
.plan__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; }
.plan__head > div { min-width: 0; }
.plan h3 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.plan__where { margin: .35rem 0 0; font-size: .9375rem; color: var(--ink-55); }
.plan--feature .plan__where { color: var(--on-green-soft); }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin: 1.5rem 0 .25rem;
  font-family: var(--font-display);
  letter-spacing: -.045em;
}
.plan__amount { font-size: clamp(3rem, 2.2rem + 3vw, 4.25rem); font-weight: 800; line-height: .9; }
.plan__unit { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.plan__per { font-size: .9375rem; color: var(--ink-55); }
.plan--feature .plan__per { color: var(--on-green-soft); }
.plan ul { list-style: none; margin: 1.75rem 0 2rem; padding: 0; display: grid; gap: .7rem; }
.plan li { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start; font-size: 1rem; }
.plan li .ico { font-size: 1.25rem; color: var(--green-600); }
.plan--feature li .ico { color: var(--yellow-500); }
.plan .btn { margin-top: auto; }
.plan__note { margin: 2rem auto 0; text-align: center; font-size: .9375rem; color: var(--on-yellow-soft); max-width: 60ch; }
.plan__note a { color: inherit; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { display: grid; gap: .75rem; max-width: 880px; }
.faq details {
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 10px 26px -20px rgba(11, 36, 27, .6);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -.025em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: rgba(20, 38, 31, .04); }
.faq summary .ico {
  flex: none;
  transition: transform .3s var(--ease-out);
  color: var(--green-600);
}
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq__body { padding: 0 1.4rem 1.35rem; }
.faq__body p { color: var(--ink-70); }
.faq__body a { color: var(--green-700); }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact__layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.contact__layout > * { min-width: 0; }
@media (min-width: 940px) {
  .contact__layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: stretch; }
  .contact__col { display: flex; flex-direction: column; }
  .contact__col .next-steps { margin-top: auto; }
}

.contact__points { display: grid; gap: 1.1rem; margin: 2rem 0 0; list-style: none; padding: 0; }
.contact__points li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; }
.contact__points .ico { color: var(--yellow-500); }
.contact__points a { color: var(--on-green); text-decoration-color: rgba(174, 203, 186, .5); text-underline-offset: 3px; }
.contact__points small { display: block; color: var(--on-green-soft); font-size: .875rem; }

/* What happens after you press send — the step the visitor is buying. */
.next-steps {
  counter-reset: ns;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 1.5rem 1.65rem;
  border-radius: var(--r-md);
  background: rgba(244, 239, 225, .07);
  box-shadow: inset 0 0 0 1px rgba(174, 203, 186, .22);
  display: grid;
  gap: 1rem;
}
.next-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  color: var(--on-green-soft);
  font-size: .9375rem;
  line-height: 1.5;
}
.next-steps li > span { display: block; min-width: 0; }
.next-steps li::before {
  counter-increment: ns;
  content: counter(ns);
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--yellow-500);
  color: var(--green-900);
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 800;
}
.next-steps strong { color: var(--on-green); font-weight: 700; }

.form {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
}
.form__grid { display: grid; gap: 1.1rem; }
.form__row2 { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form__row2 { grid-template-columns: 1fr 1fr; } }

.field-group { display: grid; gap: .4rem; }
.field-group label { font-family: var(--font-display); font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
.field-group .req { color: var(--err-ink); }

.input, .select, .textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 2px solid rgba(20, 38, 31, .18);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: rgba(20, 38, 31, .55); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(20, 38, 31, .34); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 4px rgba(42, 107, 86, .2);
}
.textarea { resize: vertical; min-height: 130px; }
.select { appearance: none; padding-right: 2.75rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314261F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; }

.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--err-line);
  box-shadow: 0 0 0 4px rgba(179, 38, 30, .14);
}
.field-error { font-size: .875rem; color: var(--err-ink); font-weight: 600; }
.field-error:empty { display: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .25rem; }
.form__small { font-size: .8125rem; color: var(--ink-55); max-width: 34ch; margin: 0; }

.form__status { margin: 0; padding: .9rem 1.1rem; border-radius: var(--r-sm); font-size: .9375rem; font-weight: 600; max-width: none; }
.form__status[data-state="ok"] { background: var(--ok-bg); color: var(--ok-ink); }
.form__status[data-state="err"] { background: var(--err-bg); color: var(--err-ink); }
.form__status:empty { display: none; padding: 0; margin: 0; }

.spinner {
  width: 17px; height: 17px;
  border: 2.5px solid rgba(20, 38, 31, .3);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot { background: var(--green-900); color: var(--on-green); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot__grid { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }
.foot h4 {
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--yellow-500);
  margin-bottom: 1rem;
  font-weight: 700;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .9375rem; }
.foot a { color: var(--on-green-soft); text-decoration: none; }
.foot a:hover { color: var(--on-green); text-decoration: underline; text-underline-offset: 3px; }
.foot p { color: var(--on-green-soft); font-size: .9375rem; }
.foot__brand { font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; color: var(--on-green); margin-bottom: .75rem; }
.foot__contact li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; color: var(--on-green-soft); }
.foot__contact .ico { color: var(--yellow-500); font-size: 1.125rem; }
.foot__base {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(174, 203, 186, .2);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .8125rem; color: rgba(174, 203, 186, .85);
}
.foot__base > p { margin: 0; }
.foot .foot__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; font-size: inherit; }
.foot__legal a,
.foot__linkbtn {
  color: rgba(174, 203, 186, .85);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(174, 203, 186, .4);
}
.foot__linkbtn { background: none; border: 0; padding: 0; cursor: pointer; }
.foot__legal a:hover, .foot__linkbtn:hover { color: var(--on-green); }
/* The same control inside body copy, on a light field. */
.prose .consent-inline { color: var(--green-700); font-weight: 700; text-decoration-color: currentColor; }
.prose .consent-inline:hover { color: var(--ink); }
.foot__social { display: flex; gap: .6rem; }
.foot__social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(244, 239, 225, .1);
  color: var(--on-green);
}
.foot__social a:hover { background: var(--yellow-500); color: var(--green-900); }

/* ==========================================================================
   Wave seam between fields
   ========================================================================== */

/* Every field change carries a seam. --from is the field above, --to below. */
.seam {
  display: block;
  width: 100%;
  line-height: 0;
  background: var(--from, transparent);
  color: var(--to, transparent);
}
.seam svg { display: block; width: 100%; height: clamp(26px, 4vw, 54px); }

/* ==========================================================================
   Motion - one authored grammar, content visible without JS
   ========================================================================== */

.js [data-rise] { opacity: 0; transform: translateY(26px); }
.js [data-rise].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rise] { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Icons */
.ico {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
.ico--outline { font-variation-settings: "FILL" 0, "wght" 500; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: .5rem; top: -100px;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--yellow-500); color: var(--ink);
  border-radius: var(--r-sm); font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: .5rem; }
/* ==========================================================================
   Page archetypes — everything outside the landing page.
   Interior header, prose, article furniture, cards, tables, callouts,
   course syllabus, location blocks, CTA bands.
   ========================================================================== */

/* ---------- Interior page header ---------------------------------------- */

.page-hero {
  position: relative;
  background: var(--green-800);
  color: var(--on-green);
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -14%;
  top: -40%;
  width: min(90vw, 760px);
  aspect-ratio: 1;
  border-radius: 58% 42% 46% 54% / 52% 44% 56% 48%;
  background: var(--green-700);
  opacity: .55;
  pointer-events: none;
}
.page-hero > .wrap { position: relative; z-index: 1; }

.page-hero h1 {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
  line-height: 1.02;
  max-width: 20ch;
}
.page-hero__lead {
  margin: 1.25rem 0 0;
  max-width: 56ch;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  line-height: 1.55;
  color: var(--on-green-soft);
}
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.page-hero__pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }

/* A compact stat strip that can sit in any interior header */
.page-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1.25rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(174, 203, 186, .28);
}
.page-hero__stats div { display: grid; gap: .1rem; }
.page-hero__stats b {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--yellow-500);
}
.page-hero__stats span { font-size: .875rem; color: var(--on-green-soft); line-height: 1.35; }

/* ---------- Breadcrumbs -------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: .875rem;
  color: var(--on-green-soft);
}
.crumbs li { display: flex; align-items: center; gap: .5rem; }
.crumbs li + li::before { content: "/"; opacity: .5; }
.crumbs a { color: var(--on-green-soft); text-decoration: none; }
.crumbs a:hover { color: var(--on-green); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--on-green); font-weight: 600; }

/* ---------- Article shell ------------------------------------------------ */

.article { padding-block: clamp(3rem, 6vw, 5rem); }
/* Inside an article the grid column already equals the measure. */
.article .prose { --prose-measure: 100%; }
.article__layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.article__layout > * { min-width: 0; }

/* Mobile/tablet: one column, and the contents-list is hoisted directly under
   the hero image where it is actually useful. Source order carries this, so
   keyboard and screen-reader order agree with the visual order. */

@media (min-width: 1040px) {
  .article__layout {
    grid-template-columns: minmax(0, var(--article-measure)) minmax(0, 280px);
    grid-template-areas:
      "hero  rail"
      "prose rail"
      "end   rail";
    justify-content: space-between;
  }
  .article__hero  { grid-area: hero; }
  .article__layout > .prose { grid-area: prose; }
  .post-end       { grid-area: end; }
  .article__aside { grid-area: rail; position: sticky; top: 96px; }
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  margin: 1.75rem 0 0;
  font-size: .875rem;
  color: var(--on-green-soft);
}
.article__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.article__author { display: flex; align-items: center; gap: .6rem; }
.article__author img {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--yellow-500);
}
.article__author b { color: var(--on-green); font-weight: 600; }

.article__hero {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream-200);
  box-shadow: var(--shadow-card);
}
/* Every hero is a 1024x1024 square, which at full column width stood 704px
   tall and pushed the article's opening line below the fold. A 3:2 crop
   keeps the subject and drops the dead margin above and below it. */
.article__hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 45%;
  display: block;
}

/* ---------- Prose -------------------------------------------------------- */

/* .prose lays its children on two tracks: a reading column capped at
   --prose-measure, and the remaining width. Prose sits in the reading
   column; structural blocks opt into the full width via .prose > breakout
   selectors below. Articles set --prose-measure:100% so both collapse to
   one column and every child shares the same two edges. */
.prose {
  min-width: 0;
  max-width: none;
  display: grid;
  grid-template-columns:
    [full-start measure-start] minmax(0, var(--prose-measure))
    [measure-end] minmax(0, 1fr) [full-end];
  align-content: start;
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  line-height: 1.7;
}
.prose > * { grid-column: measure; min-width: 0; }
/* Blocks that are structure, not prose: let them use the whole field. */
.prose > .tiles,
.prose > .ledger,
.prose > .watch-set,
.prose > .table-scroll,
.prose > .steps,
.prose > .syllabus,
.prose > .bars,
.prose > .split,
.prose > .phons,
.prose > .media-frame,
.prose > figure { grid-column: full; }
.prose > * + * { margin-top: 1.15em; }

.prose h2 {
  margin-top: 2.5em;
  margin-bottom: .1em;
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.035em;
  scroll-margin-top: 92px;
}
.prose h3 {
  margin-top: 1.9em;
  margin-bottom: .1em;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -.03em;
  scroll-margin-top: 92px;
}
.prose h4 {
  margin-top: 1.6em;
  margin-bottom: .1em;
  font-size: 1.125rem;
  letter-spacing: -.02em;
}
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }

.prose p { max-width: none; margin-bottom: 0; }
.prose strong { font-weight: 700; }
.prose a {
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(26, 82, 65, .35);
}
.prose a:hover { text-decoration-color: currentColor; background: var(--yellow-200); }

.prose ul, .prose ol { padding-left: 1.4em; display: grid; gap: .5em; }
.prose li { padding-left: .2em; }
.prose li::marker { color: var(--green-600); font-weight: 700; }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin-top: .5em; }

.prose img { border-radius: var(--r-md); margin-block: 1.75em; }
.prose figure { margin-block: 1.75em; }
.prose figcaption { margin-top: .7rem; font-size: .9375rem; color: var(--ink-55); }

.prose hr {
  margin-block: 2.5em;
  border: 0;
  border-top: 2px solid rgba(20, 38, 31, .14);
}

.prose blockquote {
  margin-block: 1.75em;
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-md);
  background: var(--yellow-200);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.4;
}
.prose blockquote p { margin: 0; }
.prose blockquote cite {
  display: block;
  margin-top: .75rem;
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 500;
  font-style: normal;
  color: var(--on-yellow-soft);
}

.prose code {
  padding: .15em .4em;
  border-radius: .35rem;
  background: rgba(20, 38, 31, .08);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .9em;
}
.prose pre {
  max-width: 100%;
  margin-block: 1.75em;
  padding: 1.25rem 1.4rem;
  border-radius: var(--r-md);
  background: var(--green-900);
  color: var(--on-green);
  overflow-x: auto;
  font-size: .9375rem;
  line-height: 1.6;
}
.prose pre code { padding: 0; background: none; color: inherit; }

/* English example sentences inside Polish prose */
.prose .en {
  font-style: italic;
  color: var(--green-700);
}

/* ---------- Tables ------------------------------------------------------- */

.table-scroll { max-width: 100%; overflow-x: auto; margin-block: 1.75em; border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.tbl {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 1rem;
  text-align: left;
}
.tbl thead { background: var(--green-800); color: var(--on-green); }
.tbl th {
  padding: .9rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: -.01em;
}
.tbl td { padding: .85rem 1.1rem; border-top: 1px solid rgba(20, 38, 31, .12); vertical-align: top; }
.tbl tbody tr:nth-child(even) { background: rgba(20, 38, 31, .025); }
.tbl .yes { color: var(--green-600); font-weight: 700; }
.tbl .no { color: var(--err-ink); font-weight: 700; }

/* ---------- Callouts ----------------------------------------------------- */

.note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  margin-block: 1.9em;
  padding: 1.25rem 1.4rem;
  border-radius: var(--r-md);
  background: var(--cream-200);
  font-size: 1rem;
  line-height: 1.6;
}
/* The icon spans the block; every other child stacks in the second column,
   so a note with a label plus body text does not scatter across the grid. */
.note > .ico { grid-row: 1 / -1; font-size: 1.5rem; color: var(--green-600); }
.note > *:not(.ico) { grid-column: 2; }
.note p { margin: 0; max-width: none; }
.note > * + *:not(.ico) { margin-top: .7em; }
.note ul, .note ol { margin: 0; padding-left: 1.3em; display: grid; gap: .4em; }
.note b, .note strong { font-family: var(--font-display); letter-spacing: -.015em; }
.note--tip { background: var(--yellow-200); }
.note--tip > .ico { color: var(--on-yellow-soft); }
.note--warn { background: var(--err-bg); }
.note--warn > .ico { color: var(--err-ink); }
.note--key { background: var(--green-800); color: var(--on-green); }
.note--key > .ico { color: var(--yellow-500); }
.note--key a { color: var(--yellow-500); }

/* Wrong / right pairs — the single most useful shape in language teaching */
.swap { display: grid; gap: .75rem; margin-block: 1.9em; }
@media (min-width: 640px) { .swap { grid-template-columns: 1fr 1fr; } }
.swap > div {
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-md);
  font-size: 1rem;
  line-height: 1.55;
}
.swap__bad { background: var(--err-bg); color: var(--err-ink); }
.swap__good { background: #DCEFE3; color: #0E3D28; }
.swap b {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--font-display);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------- Table of contents -------------------------------------------- */

.toc {
  padding: 1.35rem 1.5rem;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.toc h2 {
  margin: 0 0 .9rem;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-700);
}
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: .55rem; }
.toc li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; font-size: .9375rem; line-height: 1.4; }
.toc li::before {
  counter-increment: toc;
  content: counter(toc);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8125rem;
  color: var(--green-600);
  padding-top: .15em;
}
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Article end: share, author, next ----------------------------- */

.post-end { max-width: none; margin-top: clamp(3rem, 6vw, 4.5rem); }

.author-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: clamp(1.35rem, 3vw, 1.85rem);
  border-radius: var(--r-lg);
  background: var(--green-800);
  color: var(--on-green);
}
.author-card img {
  width: 76px; height: 76px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
}
.author-card h2 { font-size: 1.25rem; margin-bottom: .35rem; }
.author-card p { margin: 0; color: var(--on-green-soft); font-size: .9375rem; max-width: none; }
.author-card .btn { margin-top: 1.1rem; }

.postnav { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 720px) { .postnav { grid-template-columns: 1fr 1fr; } }
.postnav a {
  display: grid;
  gap: .3rem;
  padding: 1.1rem 1.35rem;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--ink);
  transition: transform .25s var(--ease-out);
}
.postnav a:hover { transform: translateY(-3px); }
.postnav small { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-55); font-weight: 700; }
.postnav b { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -.02em; line-height: 1.3; }
.postnav .next { text-align: right; }

/* ---------- Post cards / index ------------------------------------------- */

.post-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.post-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--ink);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.post-card__media { aspect-ratio: 16 / 9; background: var(--cream-200); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.35rem 1.4rem; }
.post-card__cat {
  align-self: flex-start;
  margin-bottom: .7rem;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: var(--yellow-200);
  color: var(--on-yellow-soft);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.post-card h3 {
  font-size: 1.1875rem;
  line-height: 1.22;
  letter-spacing: -.028em;
  margin-bottom: .5rem;
}
.post-card p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--ink-70); max-width: none; }
.post-card__foot {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(20, 38, 31, .1);
  font-size: .8125rem;
  color: var(--ink-55);
}
.post-card__foot .ico { font-size: 1rem; }

/* Featured card spans two columns on wide screens */
@media (min-width: 900px) {
  .post-card--wide { grid-column: span 2; flex-direction: row; }
  .post-card--wide .post-card__media { aspect-ratio: auto; flex: 0 0 46%; }
  .post-card--wide .post-card__body { justify-content: center; padding: clamp(1.5rem, 3vw, 2.25rem); }
  .post-card--wide h3 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
  .post-card--wide p { font-size: 1rem; }
}

/* Category filter row */
.cat-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.cat-tab {
  padding: .55rem 1.1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(20, 38, 31, .07);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.cat-tab:hover { background: rgba(20, 38, 31, .13); }
.cat-tab[aria-pressed="true"], .cat-tab[aria-current="page"] {
  background: var(--green-800);
  color: var(--on-green);
}

.empty-state {
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--r-lg);
  background: var(--cream-200);
  text-align: center;
}
.empty-state h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.empty-state p { margin: 0 auto; color: var(--ink-70); max-width: 44ch; }

/* ---------- Checklists / feature lists ----------------------------------- */

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.checks li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.checks .ico { font-size: 1.25rem; color: var(--green-600); }
.field--green .checks .ico, .field--green-deep .checks .ico { color: var(--yellow-500); }
.field--yellow .checks .ico { color: var(--green-800); }

/* ---------- Generic content cards ---------------------------------------- */

.tiles {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.tile {
  padding: clamp(1.35rem, 3vw, 1.85rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.field--green .tile { background: rgba(244, 239, 225, .07); box-shadow: inset 0 0 0 1px rgba(174, 203, 186, .22); color: var(--on-green); }
.field--yellow .tile { background: var(--cream); }
.tile h3 { font-size: 1.1875rem; margin-bottom: .55rem; }
.tile p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--ink-70); max-width: none; }
.field--green .tile p { color: var(--on-green-soft); }
.tile__ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--yellow-500);
  color: var(--ink);
}
.tile__ico .ico { font-size: 1.5rem; }

/* ---------- Numbered programme / syllabus -------------------------------- */

.syllabus { display: grid; gap: 1rem; counter-reset: mod; }
.mod {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.field--green .mod { background: rgba(244, 239, 225, .07); box-shadow: inset 0 0 0 1px rgba(174, 203, 186, .22); }
.field--yellow .mod { background: var(--cream); }
.mod::before {
  counter-increment: mod;
  content: counter(mod, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--green-600);
  padding-top: .1em;
}
.field--green .mod::before { color: var(--yellow-500); }
.mod h3 { font-size: 1.1875rem; margin-bottom: .4rem; }
.mod p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--ink-70); max-width: none; }
.field--green .mod p { color: var(--on-green-soft); }

/* ---------- Location blocks ---------------------------------------------- */

.places { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.place {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: -.015em;
  transition: transform .25s var(--ease-out), background-color .25s var(--ease-out);
}
.place:hover { transform: translateY(-2px); background: var(--yellow-200); }
/* Converted markup can leave a <p> inside a chip; it must wrap, not push. */
.place { min-width: 0; flex-wrap: wrap; }
.place > * { min-width: 0; }
.place p { margin: 0; max-width: none; font: inherit; }
.place .ico { color: var(--green-600); font-size: 1.2rem; }
.place[aria-current="page"] { background: var(--green-800); color: var(--on-green); }
.place[aria-current="page"] .ico { color: var(--yellow-500); }

/* ---------- Closing CTA band --------------------------------------------- */

.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem); max-width: 18ch; margin-inline: auto; }
.cta-band p { margin: 1.25rem auto 0; max-width: 50ch; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); }
.field--green .cta-band p { color: var(--on-green-soft); }
.field--yellow .cta-band p { color: var(--on-yellow-soft); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; }

/* ---------- 404 ----------------------------------------------------------- */

.notfound { min-height: 68vh; display: grid; place-items: center; text-align: center; }
.notfound__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 14vw, 12rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .85;
  color: var(--yellow-500);
}
.notfound h1 { margin-top: 1rem; font-size: clamp(1.625rem, 1.2rem + 2vw, 2.75rem); }
.notfound p { margin: 1.1rem auto 0; max-width: 46ch; color: var(--on-green-soft); }

/* ---------- Small shared helpers ----------------------------------------- */

.stack-lg { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.split > * { min-width: 0; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 900px) { .split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
@media (min-width: 900px) { .split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }

.media-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream-200);
  box-shadow: var(--shadow-card);
}
.media-frame img { width: 100%; height: auto; }

.lede {
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  line-height: 1.5;
  font-weight: 500;
}

/* A call to action lifted out of a paragraph by the design pass. */
.prose .cta-row { margin-top: 1.6em; }
.prose .cta-row a { text-decoration: none; }
.prose a.btn { text-decoration: none; background-image: none; }
.prose a.btn:hover { background: var(--yellow-400); }
.prose a.btn--ink:hover { background: var(--green-800); }

/* ==========================================================================
   Prepaid package tiers
   ========================================================================== */

.packs {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  align-items: start;
}
.pack {
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.pack--feature { background: var(--green-800); color: var(--on-green); }
.pack__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.pack__head > div { min-width: 0; }
.pack h3 { font-size: 1.25rem; letter-spacing: -.03em; }
.pack__hours { margin: .3rem 0 0; font-size: .875rem; color: var(--ink-55); }
.pack--feature .pack__hours { color: var(--on-green-soft); }

.pack__rows { list-style: none; margin: 1.35rem 0 0; padding: 0; display: grid; gap: .1rem; }
.pack__rows li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: .75rem;
  padding: .6rem 0;
  border-top: 1px solid rgba(20, 38, 31, .1);
}
.pack--feature .pack__rows li { border-top-color: rgba(174, 203, 186, .25); }
.pack__rows li span { font-size: .9375rem; }
.pack--feature .pack__rows li span { color: var(--on-green-soft); }
.pack__rows li b {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.pack--feature .pack__rows li b { color: var(--yellow-500); }
.pack__rows li small {
  grid-column: 2;
  font-size: .8125rem;
  color: var(--ink-55);
  text-align: right;
  white-space: nowrap;
}
.pack--feature .pack__rows li small { color: var(--on-green-soft); }

.pack__note {
  margin: 1.25rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid rgba(20, 38, 31, .1);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ink-70);
  max-width: none;
}
.pack--feature .pack__note { color: var(--on-green-soft); border-top-color: rgba(174, 203, 186, .25); }
.pack__note b { font-family: var(--font-display); color: var(--ink); }
.pack--feature .pack__note b { color: var(--yellow-500); }
.pack .pill { white-space: normal; text-align: center; }

/* ==========================================================================
   Comparison bars (o-mnie: lesson time split)
   ========================================================================== */

.bars { margin-block: 1.75em; display: grid; gap: .9rem; }
.bars__legend { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .875rem; color: var(--ink-70); }
.bars__legend span { display: inline-flex; align-items: center; gap: .45rem; }
.bars__key { width: 14px; height: 14px; border-radius: var(--r-xs, .35rem); display: inline-block; }
.bars__key--mine { background: var(--green-700); }
.bars__key--school { background: var(--cream-200); box-shadow: inset 0 0 0 1px rgba(20,38,31,.2); }

.bars__row { display: grid; grid-template-columns: 7.5rem 1fr; gap: .3rem .9rem; align-items: center; }
.bars__label { grid-row: span 2; font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
.bars__track { background: rgba(20, 38, 31, .07); border-radius: 999px; height: 1.6rem; overflow: hidden; }
.bars__fill {
  display: flex; align-items: center; justify-content: flex-end;
  height: 100%; border-radius: 999px; padding-right: .6rem;
  font-style: normal; font-size: .8125rem; font-weight: 700;
}
.bars__fill--mine { background: var(--green-700); color: var(--on-green); }
.bars__fill--school { background: var(--cream-200); color: var(--ink-70); }
.bars__note { margin: .4rem 0 0; font-size: .9375rem; color: var(--ink-70); max-width: none; }
@media (max-width: 560px) {
  .bars__row { grid-template-columns: 1fr; }
  .bars__label { grid-row: auto; }
}

/* ==========================================================================
   Mobile conversion: the form comes before the sales copy on a phone
   ========================================================================== */

.contact__layout .form { order: -1; }
@media (min-width: 940px) { .contact__layout .form { order: 0; } }

/* ==========================================================================
   Sticky mobile action bar — long pages leave no CTA within reach mid-scroll
   ========================================================================== */

.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: none;
  gap: .5rem;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(11, 36, 27, .96);
  backdrop-filter: blur(8px);
  box-shadow: 0 -8px 24px -12px rgba(11, 36, 27, .7);
  transform: translateY(110%);
  transition: transform .3s var(--ease-out);
}
.mobile-cta .btn { flex: 1; padding: .8rem 1rem; font-size: 1rem; white-space: nowrap; }
.mobile-cta .btn--ghost { flex: 0 0 auto; color: var(--on-green); }
@media (max-width: 899px) {
  .mobile-cta { display: flex; }
  .mobile-cta.is-up { transform: translateY(0); }
  /* Reserve the space unconditionally: toggling it with the bar made the
     content jump 72px at the moment the reader reached the form. */
  body { padding-bottom: 4.5rem; }
}
/* Off-screen means out of the tab order, not merely invisible. */
.mobile-cta:not(.is-up) { visibility: hidden; }
.mobile-cta.is-up { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .mobile-cta { transition: none; } }

/* ==========================================================================
   Third-party rating badge — the score and its source, never separated
   ========================================================================== */

.rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .6rem;
  margin-block: 1.4em;
  padding: .7rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--yellow-200);
  color: var(--ink);
  text-decoration: none;
  transition: background-color .2s var(--ease-out);
}
.rating:hover { background: var(--yellow-400); }
.rating__stars { color: #B0770A; letter-spacing: .1em; font-size: .9375rem; }
.rating__score { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; }
.rating__meta { font-size: .9375rem; color: var(--on-yellow-soft); display: inline-flex; align-items: center; gap: .3rem; }
.rating__meta .ico { font-size: 1rem; }
.field--green .rating { background: rgba(244, 239, 225, .1); color: var(--on-green); }
.field--green .rating__meta { color: var(--on-green-soft); }
.field--green .rating__stars { color: var(--yellow-500); }

/* The price and the free trial, stated before the visitor has to hunt. */
.hero__price {
  margin: 1.5rem 0 0;
  max-width: 46ch;
  padding: .85rem 1.1rem;
  border-radius: var(--r-md);
  background: rgba(244, 239, 225, .08);
  box-shadow: inset 0 0 0 1px rgba(174, 203, 186, .25);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--on-green-soft);
}
.hero__price b { color: var(--on-green); font-weight: 700; }

/* ==========================================================================
   Audio clip — one component for every recording on the site.
   Markup is a real <audio controls>; js/site.js swaps in this UI. Without
   JS the native player shows and still works.
   ========================================================================== */

.clip {
  --clip-btn: var(--green-800);
  --clip-btn-ink: var(--yellow-500);
  --clip-card: var(--surface);
  --clip-ink: var(--ink);
  --clip-soft: var(--ink-55);
  --clip-rail: rgba(20, 38, 31, .14);
  --clip-fill: var(--green-700);
  margin: 2rem 0;
  padding: 1rem 1.25rem 1rem 1rem;
  border-radius: var(--r-lg);
  background: var(--clip-card);
  color: var(--clip-ink);
  box-shadow: var(--shadow-card);
  text-align: left;
  min-width: 0;
}
.field--yellow .clip { --clip-card: var(--cream); }
.field--green .clip {
  --clip-btn: var(--yellow-500);
  --clip-btn-ink: var(--green-900);
  --clip-card: rgba(244, 239, 225, .08);
  --clip-ink: var(--on-green);
  --clip-soft: var(--on-green-soft);
  --clip-rail: rgba(174, 203, 186, .28);
  --clip-fill: var(--yellow-500);
  box-shadow: inset 0 0 0 1px rgba(174, 203, 186, .25);
}

.clip__bar { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.clip__play {
  flex: none;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  border: 0; border-radius: 50%;
  background: var(--clip-btn);
  color: var(--clip-btn-ink);
  cursor: pointer;
  transition: transform .25s var(--ease-out);
}
.clip__play:hover { transform: scale(1.06); }
.clip__play:focus-visible { outline: 3px solid var(--clip-fill); outline-offset: 3px; }
.clip__play .ico { font-size: 2rem; }
.clip:not(.is-playing) .clip__play .ico { margin-left: .15rem; }

.clip__body { flex: 1; min-width: 0; display: grid; gap: .35rem; }
.clip__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0;
}
.clip__meta { display: flex; justify-content: space-between; gap: .75rem; font-size: .8125rem; color: var(--clip-soft); font-variant-numeric: tabular-nums; }
.clip__meta > span:last-child { white-space: nowrap; }

.clip__seek {
  --p: 0%;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1.25rem; margin: 0;
  background: transparent; cursor: pointer;
}
.clip__seek::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--clip-fill) var(--p), var(--clip-rail) var(--p));
}
.clip__seek::-moz-range-track { height: 6px; border-radius: 3px; background: var(--clip-rail); }
.clip__seek::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--clip-fill); }
.clip__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; margin-top: -5px;
  border-radius: 50%; border: 0;
  background: var(--clip-fill);
}
.clip__seek::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 0; background: var(--clip-fill); }
.clip__seek:focus-visible { outline: 2px solid var(--clip-fill); outline-offset: 4px; border-radius: 4px; }

.clip audio { width: 100%; margin-top: .75rem; }

.clip__transcript { margin-top: .85rem; border-top: 1px solid var(--clip-rail); padding-top: .7rem; }
.clip__transcript summary {
  cursor: pointer;
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--clip-soft);
}
.clip__transcript summary:hover { color: var(--clip-ink); }
.clip__transcript div { margin-top: .6rem; font-size: .9375rem; line-height: 1.6; }
.clip__transcript p { margin: 0 0 .6rem; max-width: none; color: inherit; }
.clip__transcript p:last-child { margin-bottom: 0; }

.clip__more { margin: .75rem 0 0; font-size: .9375rem; }
.clip__more a { color: inherit; font-weight: 600; }

/* The homepage sample is the one moment the page asks you to stop and
   listen, so it keeps the large button. */
.clip--feature { max-width: 34rem; margin: 2.25rem auto 1rem; padding: 1.25rem 1.5rem 1.25rem 1.25rem; }
.clip--feature .clip__play { width: 4.75rem; height: 4.75rem; box-shadow: 0 18px 44px -18px rgba(11, 36, 27, .9); }
.clip--feature .clip__play .ico { font-size: 2.6rem; }
.clip--feature .clip__title { font-size: 1.1875rem; }

.prose .clip { max-width: none; }
/* In a full-width section a 1100px seek bar reads as a banner, not a player. */
.wrap > .clip { max-width: 44rem; }
@media (max-width: 480px) {
  .clip { padding: .85rem 1rem .85rem .85rem; }
  .clip__play, .clip--feature .clip__play { width: 3.25rem; height: 3.25rem; }
  .clip__play .ico, .clip--feature .clip__play .ico { font-size: 1.85rem; }
}

/* ======================================================================== */
/* Alignment pass — one left edge per page                                  */
/* ======================================================================== */

/* An article's header sat in .wrap--narrow (920px) while its body sat in
   .wrap (1240px), so the H1 started 160px right of the article it titled.
   The header now uses the full wrap and caps its own children at the
   article measure, putting the breadcrumb, H1, lead and byline on exactly
   the same left edge and the same right edge as the prose below them. */
.page-hero--article > .wrap > * { max-width: min(100%, var(--article-measure)); }

/* ---------- Saffron never sits on saffron -------------------------------- */

/* On a yellow field the saffron button is the ground colour, so the action
   disappeared into it. DESIGN.md's Saffron Means Act rule inverts the
   action to ink here. Applies to the field and to any yellow note inside it. */
.field--yellow .btn--primary,
.note--tip .btn--primary {
  background: var(--green-900);
  color: var(--on-green);
}
.field--yellow .btn--primary:hover,
.note--tip .btn--primary:hover {
  background: var(--green-800);
  color: var(--on-green);
}
/* The ghost button needs a real edge on saffron too. */
.field--yellow .btn--ghost {
  color: var(--ink);
  box-shadow: inset 0 0 0 2px rgba(20, 38, 31, .5);
}
.field--yellow .btn--ghost:hover {
  background: var(--green-900);
  color: var(--on-green);
  box-shadow: inset 0 0 0 2px var(--green-900);
}

/* ---------- Phoneme chips ------------------------------------------------ */

/* Eight phonemes were carrying one symbol and one word each inside full
   content cards, so each one was ~340x170px of mostly empty surface. They
   are specimens, not cards: size the container to the content and let the
   row read as a set. */
.phons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .75rem;
  margin-block: 1.75rem 0;
}
.phon {
  display: grid;
  gap: .15rem;
  padding: .9rem 1rem;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.phon b {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--green-700);
}
.phon span {
  font-size: .875rem;
  color: var(--ink-70);
  line-height: 1.3;
}
.field--green .phon { background: rgba(244, 239, 225, .07); box-shadow: inset 0 0 0 1px rgba(174, 203, 186, .22); }
.field--green .phon b { color: var(--yellow-500); }
.field--green .phon span { color: var(--on-green-soft); }

/* ---------- Portrait ----------------------------------------------------- */

/* DESIGN.md: photography stands in the field, it is not framed in a
   rectangle. The portrait keeps its own shape on a soft pool of light
   instead of a hard grey box. */
.portrait {
  position: relative;
  margin: 0;
  display: grid;
  justify-items: start;
  isolation: isolate;
}
.portrait::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6% auto 0 -6%;
  width: min(100%, 460px);
  aspect-ratio: 1;
  border-radius: 48% 52% 44% 56% / 56% 48% 52% 44%;
  background: radial-gradient(closest-side, var(--yellow-200), transparent 78%);
  opacity: .85;
}
.portrait img {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--r-xl);
  filter: drop-shadow(0 18px 38px rgba(11, 36, 27, .22));
}

/* ---------- Ledger ------------------------------------------------------- */

/* Replaces the identical icon+heading+text card grids. Those carried four
   decorative icons reused in the same order in every block regardless of
   content, and DESIGN.md refuses that grid outright. A ruled list reads as
   a set, uses the full field width, and lets each entry size to its own
   content instead of padding out to a shared card height. */
.ledger {
  display: grid;
  border-top: 2px solid var(--rule, rgba(20, 38, 31, .16));
  margin-block: 0;
  counter-reset: ledger;
}
@media (min-width: 860px) {
  .ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  /* A lone trailing item on an odd-length list spans both tracks rather
     than leaving a half-width orphan. */
  .ledger__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ledger__item {
  display: grid;
  align-content: start;
  gap: .5rem;
  padding-block: clamp(1.35rem, 2.6vw, 1.9rem);
  border-bottom: 1px solid var(--rule, rgba(20, 38, 31, .16));
  min-width: 0;
}
.ledger__term {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: clamp(1.125rem, 1rem + .55vw, 1.4375rem);
  line-height: 1.1;
}
.ledger__item > p {
  margin: 0;
  max-width: 46ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-70);
}
.ledger__item > ul,
.ledger__item > ol {
  margin: 0;
  padding-left: 1.15em;
  display: grid;
  gap: .35em;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-70);
}
.ledger__item li::marker { color: var(--green-600); }

/* Numbered variant, for entries that are genuinely a sequence. */
.ledger--numbered .ledger__term::before {
  counter-increment: ledger;
  content: counter(ledger);
  display: inline-block;
  min-width: 1.6em;
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--green-600);
  vertical-align: .32em;
}

/* Each field carries its own rule colour and secondary ink. */
.field--green .ledger,
.field--green .ledger__item { --rule: rgba(174, 203, 186, .3); }
.field--green .ledger__item > p,
.field--green .ledger__item > ul,
.field--green .ledger__item > ol { color: var(--on-green-soft); }
.field--green .ledger__item li::marker { color: var(--yellow-500); }
.field--green .ledger--numbered .ledger__term::before { color: var(--yellow-500); }

.field--yellow .ledger,
.field--yellow .ledger__item { --rule: rgba(20, 38, 31, .28); }
.field--yellow .ledger__item > p,
.field--yellow .ledger__item > ul,
.field--yellow .ledger__item > ol { color: var(--on-yellow-soft); }
.field--yellow .ledger__item li::marker { color: var(--green-800); }
.field--yellow .ledger--numbered .ledger__term::before { color: var(--on-yellow-soft); }

/* ---------- Watch link --------------------------------------------------- */

/* The two BBC clips were built as a note containing a link containing a
   second note, whose icon and a raw play glyph rendered as loose marks under
   the thumbnail. DESIGN.md: nested cards are always wrong. One link, one
   thumbnail, one circular play control in the system's own vocabulary. */
.watch-set {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-block: 1.75rem;
}
.watch {
  display: grid;
  gap: .85rem;
  text-decoration: none;
  color: inherit;
}
.watch__frame {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream-200);
  box-shadow: var(--shadow-card);
  aspect-ratio: 16 / 9;
}
.watch__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .42s var(--ease-out);
}
.watch__play {
  position: absolute;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--yellow-500);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(11, 36, 27, .32);
  transition: transform .3s var(--ease-out), background .3s var(--ease-out);
}
.watch__play .ico { font-size: 2rem; }
.watch:hover .watch__frame img { transform: scale(1.04); }
.watch:hover .watch__play { transform: scale(1.08); }
.watch:focus-visible .watch__play { transform: scale(1.08); }
.watch__name {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.025em;
  font-size: 1.0625rem;
  line-height: 1.2;
}
.watch__note { margin: .2rem 0 0; font-size: .875rem; color: var(--ink-70); }
.field--green .watch__note { color: var(--on-green-soft); }
@media (prefers-reduced-motion: reduce) {
  .watch__frame img, .watch__play { transition: none; }
  .watch:hover .watch__frame img, .watch:hover .watch__play { transform: none; }
}

/* Structural blocks are a change of register, not the next paragraph:
   give them generous separation from the prose that introduces them. */
.prose > .ledger,
.prose > .tiles,
.prose > .table-scroll,
.prose > .watch-set,
.prose > .phons,
.prose > .steps,
.prose > .syllabus { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); }
.prose > .ledger + *,
.prose > .table-scroll + *,
.prose > .watch-set + *,
.prose > .phons + * { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); }

/* ---------- Dialogue ----------------------------------------------------- */

/* Worked conversations were marked up as <span>Speaker:</span><p>line</p><br>
   inside a note nested in another note. Nested cards are always wrong, and a
   dialogue is a structure in its own right: speaker and line, one row each. */
.dialogue {
  display: grid;
  gap: .55rem;
  margin-block: 1.1rem 0;
  padding-left: 1.1rem;
  border-left: 1px solid rgba(20, 38, 31, .18);
}
.dialogue__line {
  display: grid;
  grid-template-columns: minmax(3.5rem, auto) 1fr;
  gap: .25rem .75rem;
  margin: 0;
  max-width: none;
  font-size: .9375rem;
  line-height: 1.55;
}
.dialogue__line b {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--green-700);
}
.dialogue__stage {
  margin: 0;
  font-size: .875rem;
  font-style: italic;
  color: var(--ink-55);
}
@media (max-width: 520px) {
  .dialogue__line { grid-template-columns: 1fr; gap: .1rem; }
}

/* ==========================================================================
   Cookie consent — banner (first layer) and settings dialog (second layer)
   "Accept" and "Reject" share one style on purpose: EU regulators treat a
   weaker-looking reject button as a nudge that invalidates the consent.
   ========================================================================== */

.consent {
  position: fixed;
  z-index: 80;
  left: 1rem; right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  max-width: 40rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.35rem 1.4rem 1.25rem;
  border-radius: var(--r-lg);
  background: var(--green-900);
  color: var(--on-green);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(174, 203, 186, .22);
}
.consent__title {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--on-green);
}
.consent__text { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--on-green-soft); }
.consent__text strong { color: var(--on-green); }
.consent a, .consent-dialog a { color: inherit; text-underline-offset: 3px; }
.consent .consent__text a { color: var(--yellow-500); font-weight: 600; }

.consent__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.consent__btn { flex: 1 1 auto; justify-content: center; padding: .8rem 1.1rem; font-size: 1rem; white-space: nowrap; }
.consent .btn--ghost { color: var(--on-green); }
.consent__btn:focus-visible { outline: 3px solid var(--yellow-400); outline-offset: 3px; }

/* The sticky call-to-action bar would sit on top of the banner. */
.consent-pending .mobile-cta { visibility: hidden; }

@media (max-width: 560px) {
  .consent { left: .5rem; right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); padding: 1.1rem 1.1rem 1rem; }
  .consent__btn { flex-basis: 100%; }
}

.consent-dialog {
  width: min(40rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
}
.consent-dialog::backdrop { background: rgba(11, 36, 27, .6); }
.consent-dialog__inner { padding: 1.5rem 1.5rem 1.25rem; }
.consent-dialog__head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.consent-dialog h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.consent-dialog p { margin: .75rem 0 0; font-size: .9375rem; line-height: 1.55; color: var(--ink-70); }
.consent-dialog code { font-size: .85em; padding: .05em .3em; border-radius: var(--r-xs); background: var(--cream-200); }
.consent-dialog__close {
  flex: none;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 0; border-radius: 50%;
  background: var(--cream-200);
  color: var(--ink);
  cursor: pointer;
}
.consent-dialog__close:hover { background: var(--yellow-200); }

.consent-cat {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(20, 38, 31, .08);
}
.consent-cat__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.consent-cat h3 { margin: 0; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; }
.consent-cat h3 label { cursor: pointer; }
.consent-cat p { margin-top: .45rem; font-size: .875rem; }
.consent-cat__always { font-size: .8125rem; font-weight: 700; color: var(--green-700); white-space: nowrap; }

.consent-switch {
  -webkit-appearance: none; appearance: none;
  flex: none;
  position: relative;
  width: 3.25rem; height: 1.9rem;
  margin: 0;
  border-radius: var(--r-pill);
  background: rgba(20, 38, 31, .25);
  cursor: pointer;
  transition: background-color .2s var(--ease-out);
}
.consent-switch::after {
  content: "";
  position: absolute;
  top: .2rem; left: .2rem;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(11, 36, 27, .3);
  transition: transform .2s var(--ease-out);
}
.consent-switch:checked { background: var(--green-700); }
.consent-switch:checked::after { transform: translateX(1.35rem); }
.consent-switch:focus-visible { outline: 3px solid var(--green-600); outline-offset: 3px; }

.consent-dialog__status { font-size: .8125rem !important; color: var(--ink-55) !important; word-break: break-word; }
.consent-dialog .consent__actions { margin-top: 1.25rem; }
.consent-dialog__foot { font-size: .875rem !important; }

@media (prefers-reduced-motion: reduce) {
  .consent-switch, .consent-switch::after { transition: none; }
}