/* Vocabi Ambassadors
   Vocabi is the forest; the ambassador is the trail blaze, the painted mark on
   a trunk that tells a walker which way to go. The public door is the forest
   in daylight (lichen ground, forest ink). The invite door goes deeper in,
   back to the app's own night green. Blaze yellow appears only where it marks
   the way: steps on the trail, the word a teacher flagged, the primary figure.
   Vocabi's own marks (the logo, the three-bubble meter, the sapling) come from
   includes/brand.php and keep the app's exact colours. */

:root {
  --lichen: #e6edda;
  --lichen-deep: #d3dec2;
  --paper: #fafbf5;
  --forest: #16301a;
  --forest-lift: #24452a;
  --moss: #3d5c3b;           /* secondary text on lichen, 6.9:1 */
  --blaze: #f2b82e;
  --blaze-deep: #c98f0a;
  --candy: #a9dc68;          /* Vocabi's own CTA green */
  --meter: #4f8a2a;          /* meter fill on paper, 3.9:1 */
  --pen: #233a7a;            /* the teacher's ink */
  --rule-blue: #c9d8ec;
  --margin-red: #e7a7a0;

  /* Vocabi's mark. The cloud is the legacy ink on a light page; the invite
     door swaps it for the app's pale cloud. */
  --mark-cloud: #0e1320;
  --mark-pale: #edf8fb;
  --mark-leaf: #aed24e;
  --mark-leaf-deep: #6d9a34;   /* the leaf, for light grounds (LearnTally) */
  --mark-sage-deep: #4f6b5e;   /* a slipping word: sage, never red */

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-hand: 'Shantell Sans', 'Comic Sans MS', cursive;

  /* Type scale: a perfect fourth (1.333) from an 18px body */
  --t-small: 0.875rem;
  --t-body: 1.125rem;
  --t-h3: 1.333rem;
  --t-h2: clamp(1.9rem, 3.4vw, 2.66rem);
  --t-display: clamp(2.8rem, 7vw, 5.6rem);

  --gutter: clamp(16px, 5vw, 64px);
  --measure: 34em;
  --section: clamp(72px, 11vw, 144px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--lichen);
  color: var(--forest);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--blaze-deep); outline-offset: 3px; border-radius: 4px; }

.shell { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--moss); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  padding: 10px 16px; border-radius: 8px;
  background: var(--forest); color: var(--paper); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ── Type ─────────────────────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 600;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 0 0.4em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 560;
  font-variation-settings: 'opsz' 72, 'SOFT' 80;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  font-variation-settings: 'opsz' 24, 'SOFT' 60;
  line-height: 1.25;
  margin: 0 0 0.35em;
}
.lede { font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 30em; }
.hand { font-family: var(--font-hand); }

/* ── Buttons and links ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  border: 0; border-radius: 10px;
  background: var(--forest); color: var(--paper);
  font: 600 1.05rem/1 var(--font-body);
  text-decoration: none; cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  transition: background-color 0.15s ease;
}
.btn:hover { background: var(--forest-lift); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-small { min-height: 40px; padding: 0 18px; font-size: 0.95rem; }
.link-quiet { font-weight: 600; text-decoration-color: var(--blaze-deep); text-decoration-thickness: 2px; }
.link-quiet:hover { text-decoration-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 2rem; }

/* ── Masthead ─────────────────────────────────────────────────────────── */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 22px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem;
  font-variation-settings: 'opsz' 36, 'SOFT' 100;
  text-decoration: none; line-height: 1;
}
.wordmark-sub { font-weight: 400; font-style: italic; }
/* The Vocabi mark leads; "Ambassadors" is the program under it */
.wordmark-mark { width: 44px; height: 44px; flex: none; margin: -8px -4px -8px -6px; }
.mark-cloud { fill: var(--mark-cloud); }
.mark-swoosh { stroke: var(--mark-cloud); }
.masthead-nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 30px); font-size: 0.98rem; }
.masthead-nav a:not(.btn) { text-decoration: none; font-weight: 600; }
.masthead-nav a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--blaze-deep); text-decoration-thickness: 2px; }
/* The other language, by its code: small, but always there, phones included */
.masthead-nav .lang-switch {
  min-width: 40px; min-height: 40px;
  display: inline-grid; place-items: center;
  border: 1.5px solid currentColor; border-radius: 10px;
  font-size: 0.85rem; letter-spacing: 0.04em;
}
@media (max-width: 760px) {
  .masthead-nav a:not(.btn):not(.lang-switch) { display: none; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding-top: clamp(40px, 7vw, 96px);
  padding-bottom: var(--section);
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
}

/* The teacher's sheet: school paper, blue rules, red margin, a pen hand.
   The meters are the only part Vocabi prints on it, and they are the app's own
   (LearnTally, light theme, compact). */
.sheet { margin: 0; justify-self: center; width: min(100%, 460px); }
.sheet-paper {
  --rule: 2.4rem;
  position: relative;
  padding: 1.6rem 1.6rem 1.4rem 3.6rem;
  background:
    linear-gradient(90deg, transparent 2.6rem, var(--margin-red) 2.6rem, var(--margin-red) calc(2.6rem + 1.5px), transparent calc(2.6rem + 1.5px)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--rule) - 1px), var(--rule-blue) calc(var(--rule) - 1px) var(--rule)),
    var(--paper);
  background-position: 0 0, 0 0.7rem, 0 0;
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(22, 48, 26, 0.08),
    0 18px 40px -18px rgba(22, 48, 26, 0.45);
  transform: rotate(-1.4deg);
  color: var(--pen);
}
.sheet-title, .sheet-for {
  margin: 0; max-width: none;
  line-height: var(--rule);
}
.sheet-title { font-size: 1.35rem; font-weight: 600; }
.sheet-for { font-size: 1rem; color: var(--moss); transform: rotate(-1deg); transform-origin: left; }
.sheet-words { list-style: none; margin: 0; padding: 0; }
.sheet-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 76px;
  align-items: center; gap: 12px;
  height: var(--rule);
}
.sheet-word { font-size: 1.12rem; position: relative; justify-self: start; white-space: nowrap; }
@media (max-width: 480px) {
  .sheet-paper { padding-right: 1.1rem; }
  .sheet-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) 72px; gap: 8px; }
  .sheet-word { font-size: 1rem; }
  .sheet-gloss { font-size: 0.85rem; }
}
.sheet-gloss { font-size: 0.95rem; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The flagged word gets the teacher's highlighter, drawn last */
.is-flagged .sheet-word::before {
  content: ''; position: absolute; z-index: -1;
  left: -6px; right: -6px; top: 18%; bottom: 8%;
  background: var(--blaze); opacity: 0.85;
  border-radius: 3px 8px 4px 9px;
  transform: skewX(-8deg) scaleX(var(--hl, 1));
  transform-origin: left;
}
.sheet-word { isolation: isolate; }

/* The meter: three of the mark's bubbles count the streak; the hairline shows
   the 75% clause once a word has four attempts. Values are LearnTally's. */
.tally {
  --pill-face: #fffdf8;
  --pill-ink: #241d17;
  --pill-shadow: 0 1px 0 rgb(255 255 255 / 70%) inset, 0 6px 16px -8px rgb(36 29 23 / 55%);
  position: relative; justify-self: start;
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 10px 0 9px;
  border-radius: 999px;
  background: var(--pill-face);
  box-shadow: var(--pill-shadow);
}
/* the bubbles break the pill's edge: in the mark they sit on the cloud's edge */
.tally .badge { width: 27px; height: 27px; margin-left: -6px; flex: none; overflow: visible; }
.tally .home { fill: none; stroke: color-mix(in srgb, var(--pill-ink) 32%, transparent); stroke-width: 16; }
.tally .bub { transform-box: fill-box; transform-origin: center; }
.hair {
  position: relative; flex: 0 0 28px; height: 2px; border-radius: 1px;
  background: color-mix(in srgb, var(--pill-ink) 18%, transparent);
}
.hair-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 1px;
  background: color-mix(in srgb, var(--pill-ink) 62%, transparent);
}
.hair-fill.under { background: var(--mark-sage-deep); }
.hair-notch {
  position: absolute; top: -2px; width: 1px; height: 6px;
  background: color-mix(in srgb, var(--pill-ink) 55%, transparent);
}
/* Learned: the pill becomes the mark's own cloud and grows its tail */
.tally.spoken {
  --pill-face: var(--mark-pale);
  --pill-ink: var(--mark-cloud);
  --pill-shadow: 0 0 0 2px var(--mark-leaf-deep), 0 6px 16px -8px rgb(36 29 23 / 45%);
}
.tally .tail {
  position: absolute; left: 55%; top: calc(100% - 2px);
  width: 18px; height: 12px; overflow: visible;
}
/* In the app the tail is the pale cloud, which vanishes on paper; here it
   takes the ring's leaf so the cloud's outline carries on into it */
.tail path { stroke: var(--mark-leaf-deep); stroke-dasharray: 1; stroke-dashoffset: 0; }

.sheet-caption {
  margin: 1.4rem 0 0 0.6rem;
  font-size: 1rem; color: var(--moss);
  max-width: 28em;
}
.sheet-caption em { font-family: var(--font-hand); font-style: normal; color: var(--pen); }

/* The one orchestrated moment: each row's bubbles land in turn with the app's
   spring, learned pills turn into the cloud and unfurl their tails, and the
   teacher's highlighter swipes last. */
@media (prefers-reduced-motion: no-preference) {
  .tally .bub {
    animation: lt-land 0.6s cubic-bezier(0.3, 1.6, 0.45, 1) both;
    animation-delay: calc(0.35s + var(--i) * 0.11s + var(--b) * 0.14s);
  }
  .tally.spoken { animation: lt-speak 0.52s ease both; animation-delay: calc(0.95s + var(--i) * 0.11s); }
  .tally .tail path { animation: lt-unfurl 0.62s ease both; animation-delay: calc(1.2s + var(--i) * 0.11s); }
  .is-flagged .sheet-word::before { animation: highlight 0.45s cubic-bezier(0.5, 0, 0.3, 1) 2.1s both; }
}
@keyframes lt-land {
  0% { opacity: 0; transform: scale(0.35); }
  35% { opacity: 1; transform: scale(1.4); }
  70% { transform: scale(0.93); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes lt-speak {
  from { background: #fffdf8; box-shadow: 0 1px 0 rgb(255 255 255 / 70%) inset, 0 6px 16px -8px rgb(36 29 23 / 55%); }
}
@keyframes lt-unfurl { from { stroke-dashoffset: 1; } }
@keyframes highlight { from { transform: skewX(-8deg) scaleX(0); } }

/* ── Role ─────────────────────────────────────────────────────────────── */
.role {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 6vw, 96px);
  padding-bottom: var(--section);
}
.role .h2 { max-width: 13em; }
.role-body p:first-child { font-size: 1.2rem; }
@media (max-width: 800px) { .role { grid-template-columns: 1fr; } }

/* ── How it works: the trail ──────────────────────────────────────────── */
.how {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 6vw, 96px);
  padding-bottom: var(--section);
}
.how-head { align-self: start; position: sticky; top: 32px; }
@media (max-width: 800px) {
  .how { grid-template-columns: 1fr; }
  .how-head { position: static; }
}
.trail { list-style: none; margin: 0; padding: 0; position: relative; }
/* The path between blazes: a worn, dashed track */
.trail::before {
  content: ''; position: absolute;
  left: 15px; top: 20px; bottom: 40px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--moss) 0 6px, transparent 6px 14px);
  opacity: 0.45;
}
.trail-step { position: relative; padding: 0 0 clamp(36px, 5vw, 56px) 64px; }
.trail-step:last-child { padding-bottom: 0; }
.trail-step p { color: var(--moss); margin-bottom: 0; }
.blaze {
  position: absolute; left: 4px; top: 0;
  width: 24px; height: 44px;
  display: grid; place-items: center;
  background: var(--blaze);
  color: var(--forest);
  font: 700 0.95rem/1 var(--font-body);
  border-radius: 2px 4px 3px 5px;
}
.trail-step:nth-child(2) .blaze { transform: rotate(2deg); }
.trail-step:nth-child(3) .blaze { transform: rotate(-1.5deg); }
.trail-step:nth-child(4) .blaze { transform: rotate(1deg); }
.trail-step:nth-child(5) .blaze { transform: rotate(-1deg); }
/* An optional step: the blaze is outlined, not painted. You can walk past it. */
.trail-step.is-optional .blaze {
  background: var(--lichen);
  box-shadow: inset 0 0 0 2.5px var(--blaze-deep);
  color: var(--moss);
}

/* ── Languages: Vocabi's own round flags, read live from vocabi-api ───── */
.langs { padding-bottom: var(--section); }
.langs-head { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 8px clamp(24px, 6vw, 96px); align-items: end; margin-bottom: 2.2rem; }
.langs-head .h2, .langs-head p { margin: 0; }
.langs-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  border-top: 2px solid var(--forest);
}
.lang {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--lichen-deep);
}
.lang-flag {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--paper), 0 2px 6px -2px rgba(22, 48, 26, 0.4);
}
.lang-flag-none {
  display: grid; place-items: center;
  background: var(--paper); color: var(--moss);
  font: 600 1rem/1 var(--font-body);
}
.lang-text { display: flex; flex-direction: column; min-width: 0; }
.lang-name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; font-variation-settings: 'opsz' 24, 'SOFT' 60; line-height: 1.2; }
/* Alphabet-only and announced languages say so; announced ones sit back */
.lang-status {
  align-self: flex-start; margin-top: 5px;
  padding: 1px 8px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; line-height: 1.5;
  background: var(--paper); color: var(--moss);
  box-shadow: inset 0 0 0 1px var(--lichen-deep);
}
.lang-soon .lang-flag { filter: grayscale(0.85); opacity: 0.6; }
.lang-soon .lang-name { color: var(--moss); }
.lang-endonym { color: var(--moss); font-size: 0.95rem; line-height: 1.3; text-align: left; }  /* RTL names stay by their flag */
@media (max-width: 800px) {
  .langs-head { grid-template-columns: 1fr; }
  .langs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Who it's for ─────────────────────────────────────────────────────── */
.who { padding-bottom: var(--section); }
.who-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2.2rem;
  border-top: 2px solid var(--forest);
}
.who-item { padding: 1.6rem clamp(16px, 2.5vw, 36px) 0 0; }
.who-item + .who-item { padding-left: clamp(16px, 2.5vw, 36px); border-left: 1px solid var(--lichen-deep); }
.who-item p { color: var(--moss); margin: 0; }
@media (max-width: 800px) {
  .who-grid { grid-template-columns: 1fr; }
  .who-item + .who-item { padding-left: 0; border-left: 0; border-top: 1px solid var(--lichen-deep); }
  .who-item { padding-bottom: 1.6rem; }
}

/* ── The grove: one band of the app's own night green ─────────────────── */
.grove {
  background:
    radial-gradient(100% 90% at 12% 0%, rgba(169, 220, 104, 0.14), transparent 60%),
    var(--forest);
  color: #eef7d8;
  padding-block: var(--section);
}
.grove-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: clamp(24px, 6vw, 96px); }
.grove-copy { align-self: start; }
.grove-lede { color: rgba(238, 247, 216, 0.78); }
.grove-list { margin: 0; }
.grove-list div {
  display: grid; grid-template-columns: 9rem 1fr; gap: 16px;
  padding-block: 1rem;
  border-top: 1px solid rgba(238, 247, 216, 0.16);
}
.grove-list div:last-child { border-bottom: 1px solid rgba(238, 247, 216, 0.16); }
.grove-list dt { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--candy); }
.grove-list dd { margin: 0; color: rgba(238, 247, 216, 0.85); }
.link-light { color: var(--candy); font-weight: 600; }
.link-light:hover { color: #c8ee92; }
@media (max-width: 800px) {
  .grove-inner { grid-template-columns: 1fr; }
  .grove-list { margin-top: 2rem; }
  .grove-list div { grid-template-columns: 1fr; gap: 2px; }
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { padding-block: var(--section); max-width: 880px; margin-inline: auto; }
.faq-list { border-top: 2px solid var(--forest); }
.faq-item { border-bottom: 1px solid var(--lichen-deep); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 1.2rem 0;
  font-weight: 600; font-size: 1.15rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--forest), var(--forest)) center / 14px 2px no-repeat,
    linear-gradient(var(--forest), var(--forest)) center / 2px 14px no-repeat;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--moss); padding-bottom: 1.2rem; margin: 0; }

/* ── Apply ────────────────────────────────────────────────────────────── */
.apply {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 6vw, 96px);
  padding-bottom: var(--section);
}
.apply-copy p { color: var(--moss); }
.apply-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  padding: clamp(20px, 3.5vw, 40px);
  background: var(--paper);
  border-radius: 6px;
  border-top: 6px solid var(--blaze);
}
.field-wide { grid-column: 1 / -1; }
.apply-form, .calc-inputs { align-items: end; }
@media (max-width: 800px) {
  .apply { grid-template-columns: 1fr; }
  .apply-form { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 0.98rem; }
.optional { font-weight: 400; color: var(--moss); }
.field input:not([type='range']), .field select {
  width: 100%; min-height: 48px; padding: 10px 12px;
  font: inherit; font-size: 1rem; color: var(--forest);
  background: #fff;
  border: 1.5px solid #b5c4a5; border-radius: 8px;
}
.field input:focus, .field select:focus { outline: 3px solid var(--blaze); outline-offset: 0; border-color: var(--forest); }
.field input::placeholder { color: #7d8f78; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.form-status { margin: 0; color: var(--moss); }
/* Sent: Vocabi's sapling grows once beside the confirmation (SaplingLoader's
   drawing and timing, played a single time rather than looped) */
.form-foot .sapling { display: none; width: 38px; height: 49px; margin: -12px -10px -6px 0; }
.apply-form.is-sent .sapling { display: block; }
.sapling .soil { stroke: #6fae3f; stroke-width: 3; stroke-linecap: round; }
.sapling .stem { fill: none; stroke: #6fae3f; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 64; }
.sapling .leaf { fill: #8ec94f; transform-origin: 40px 52px; }
.sapling .bud { fill: #ffcc66; transform-origin: 40px 39px; }
@media (prefers-reduced-motion: no-preference) {
  .is-sent .sapling .stem { animation: sap-stem 1.2s ease-in-out both; }
  .is-sent .sapling .leaf-l { animation: sap-leaf 0.9s ease-in-out 0.55s both; }
  .is-sent .sapling .leaf-r { animation: sap-leaf 0.9s ease-in-out 0.9s both; }
  .is-sent .sapling .bud { animation: sap-leaf 0.9s ease-in-out 1.2s both; }
}
@keyframes sap-stem { from { stroke-dashoffset: 64; } to { stroke-dashoffset: 0; } }
@keyframes sap-leaf { 0% { transform: scale(0); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
.form-status.is-error { color: #a1321f; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--lichen-deep); padding-block: 36px 48px; font-size: var(--t-small); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
.footer-mark { margin: 0; color: var(--moss); }
.footer-nav { display: flex; gap: 22px; }

/* ════════════════════════════════════════════════════════════════════════
   The invite door: deeper in the forest
   ════════════════════════════════════════════════════════════════════════ */
.door-invite {
  --ink-soft: rgba(238, 247, 216, 0.74);
  --ink-line: rgba(238, 247, 216, 0.16);
  background:
    radial-gradient(90% 60% at 85% -5%, rgba(242, 184, 46, 0.10), transparent 60%),
    radial-gradient(110% 70% at 10% -10%, rgba(169, 220, 104, 0.12), transparent 60%),
    var(--forest);
  background-repeat: no-repeat;
  color: #eef7d8;
}
.door-invite .muted { color: var(--ink-soft); }
.door-invite { --mark-cloud: var(--mark-pale); }
.door-invite .btn { background: var(--blaze); color: var(--forest); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
.door-invite .btn:hover { background: #f7c94f; }
.door-invite .masthead-nav a:not(.btn):hover { text-decoration-color: var(--blaze); }
.door-invite :focus-visible { outline-color: var(--blaze); }
.door-invite .footer { border-top-color: var(--ink-line); }
.door-invite .footer-mark { color: var(--ink-soft); }
.door-invite .field label { color: #eef7d8; }

.invite-hero { padding-top: clamp(48px, 8vw, 112px); padding-bottom: clamp(48px, 7vw, 96px); }
.invite-hero .display { max-width: 11em; }
.invite-hero .lede { color: var(--ink-soft); }
.invite-note {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--blaze); font-weight: 600; margin-bottom: 1.6rem;
}
.invite-note::before {
  content: ''; width: 8px; height: 18px; background: var(--blaze);
  border-radius: 1px 2px 1px 3px;
}

/* The two plans, as the table they are */
.plans { padding-bottom: var(--section); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plans-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.plans-table th, .plans-table td { text-align: left; vertical-align: top; padding: 1.4rem 1.6rem; }
.plans-table thead th { padding-top: 1.8rem; border-bottom: 2px solid #eef7d8; }
.plans-table tbody th[scope='row'] {
  width: 22%; padding-left: 0;
  font-weight: 600; color: var(--ink-soft);
}
.plans-table tbody tr + tr > * { border-top: 1px solid var(--ink-line); }
.plans-table td strong {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15;
  font-variation-settings: 'opsz' 72, 'SOFT' 100;
  margin-bottom: 0.4rem;
}
.plans-table td span { color: var(--ink-soft); font-size: 1rem; display: block; max-width: 24em; }
.plan-name { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; font-variation-settings: 'opsz' 48, 'SOFT' 100; }
.plan-sub { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.98rem; }
/* Premium is the column the blaze points at */
.plans-table .is-premium { background: rgba(242, 184, 46, 0.08); }
.plans-table thead .is-premium { border-top: 6px solid var(--blaze); border-bottom-color: var(--blaze); }
.plans-table tbody .is-premium strong { color: var(--blaze); }
.plans-foot { margin-top: 1.4rem; font-size: 1rem; }

/* Calculator: paper on the forest floor */
.calc { padding-bottom: var(--section); }
.calc-head { margin-bottom: 1.8rem; }
.calc-panel {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  background: var(--paper); color: var(--forest);
  border-radius: 6px; overflow: hidden;
}
.calc-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: clamp(20px, 3.5vw, 40px); }
.calc-inputs .field:first-child, .calc-inputs .field:last-child { grid-column: 1 / -1; }
.door-invite .calc-panel .field label { color: var(--forest); }
.calc-inputs output { font-weight: 700; }
.calc-inputs input[type='range'] { width: 100%; accent-color: var(--forest); min-height: 32px; }
.calc-result {
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
  padding: clamp(20px, 3.5vw, 40px);
  background: var(--lichen);
  border-left: 1px solid var(--lichen-deep);
}
.calc-figure { display: flex; flex-direction: column; gap: 4px; }
.calc-amount {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.calc-figure:first-child .calc-amount { text-decoration: underline; text-decoration-color: var(--blaze); text-decoration-thickness: 0.14em; text-underline-offset: 0.14em; text-decoration-skip-ink: none; }
.calc-label { color: var(--moss); font-size: 1rem; }
@media (max-width: 860px) {
  .calc-panel { grid-template-columns: 1fr; }
  .calc-result { border-left: 0; border-top: 1px solid var(--lichen-deep); }
}
@media (max-width: 520px) {
  .calc-inputs { grid-template-columns: 1fr; }
}

/* Rates by country */
.rates { padding-bottom: var(--section); }
.rates-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; margin-bottom: 1.4rem; }
.rates-head .h2 { margin: 0; }
.rates-search { width: min(100%, 300px); }
.door-invite .field input:not([type='range']) { border-color: #b5c4a5; }
.rates-table { width: 100%; border-collapse: collapse; min-width: 820px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.rates-table th, .rates-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--ink-line); }
.rates-table thead th { font-weight: 600; color: var(--ink-soft); font-size: 0.92rem; border-bottom: 2px solid #eef7d8; white-space: nowrap; }
.rates-table tbody th { font-weight: 600; }
.rates-table th:first-child, .rates-table td:first-child { padding-left: 0; }
.rates-table .num { text-align: right; white-space: nowrap; }
/* Money and rates set in Fraunces: Atkinson's slashed zero reads as a theta in prices */
.rates-table td.num, .calc-inputs input[type='number'], .calc-inputs output {
  font-family: var(--font-display); font-variation-settings: 'opsz' 14;
  font-variant-numeric: lining-nums tabular-nums;
}
.rates-table .pending { font-family: var(--font-body); }
.rates-table td.num strong { color: var(--blaze); font-weight: 700; }
.rates-table tbody tr:hover > * { background: rgba(238, 247, 216, 0.04); }
.pending { color: rgba(238, 247, 216, 0.45); font-style: italic; }
.rates-empty { padding: 1.4rem 0; color: var(--ink-soft); }
.rates-foot { margin-top: 1.2rem; font-size: 1rem; }

.invite-close { padding-bottom: var(--section); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.invite-close .h2 { margin: 0; }

/* ════════════════════════════════════════════════════════════════════════
   Signed-in pages: onboarding and the dashboard
   ════════════════════════════════════════════════════════════════════════ */
.signout { margin: 0; }
.account { padding-block: clamp(24px, 5vw, 64px) clamp(48px, 7vw, 96px); }
.account-panel { max-width: 46rem; }
.account-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-top: 1.5rem;
  padding: clamp(20px, 3.5vw, 40px);
  background: var(--paper);
  border-radius: 6px;
  border-top: 6px solid var(--blaze);
}
.field-hint { margin: 0; font-size: var(--t-small); color: var(--moss); }
.field-error { margin: 0; font-size: var(--t-small); font-weight: 600; color: #a1321f; }
.terms { margin: 0; padding: 0; border: 0; }
.terms ul { margin: 0 0 1rem; padding-left: 1.2em; }
.terms li { margin-bottom: 0.4em; }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--forest); }

.card {
  padding: clamp(20px, 3vw, 32px);
  background: var(--paper);
  border-radius: 6px;
}
.card-link { border-top: 6px solid var(--blaze); margin-bottom: 22px; }
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.link-row { display: flex; gap: 10px; align-items: center; }
.link-field {
  flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px;
  font: 600 1rem var(--font-body); color: var(--forest);
  background: #fff; border: 1.5px solid #b5c4a5; border-radius: 8px;
}
.link-field:focus { outline: 3px solid var(--blaze); outline-offset: 0; }
.link-code { margin: 0.6rem 0 0; }
.code { font-family: ui-monospace, monospace; letter-spacing: 0.12em; }
.qr { width: 168px; margin-top: 1rem; }
.qr:empty { display: none; }
.qr svg { display: block; width: 100%; height: auto; }
.account-foot { margin-top: 2rem; }
@media (max-width: 800px) {
  .account-form, .card-grid { grid-template-columns: 1fr; }
  .link-row { flex-wrap: wrap; }
}