/* Luthando — Home page
   Implements "Luthando Home.dc.html" from the Claude Design project "Luthando App".
   Colour tokens per the Luthando web design brief §5.1. */

:root {
  --gold-500: #D4AF37;
  --gold-600: #B8860B;
  --gold-300: #E6C547;
  --gold-800: #8C6A14;
  --ink-900: #141110;
  --ink-600: #57514B;
  --paper: #FFFFFF;
  --paper-warm: #FBF8F1;
  --night-900: #1A1633;
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--gold-800); }
a:hover { color: var(--gold-600); }
::selection { background: var(--gold-300); color: var(--ink-900); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 200;
  background: var(--ink-900);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; color: var(--paper); }

#lt-root {
  position: relative;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-body);
  overflow: clip;
}

/* ---------- Golden thread ---------- */
#golden-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
  overflow: visible;
}
#golden-thread-path {
  opacity: .95;
  filter: drop-shadow(0 0 5px rgba(212, 175, 55, .4));
}

/* Below 768px the thread simplifies to a static left-margin rule (brief §10) */
@media (max-width: 767px) {
  #golden-thread { display: none; }
  .knot { display: none; }
  #lt-root::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 0;
    height: 100%;
    width: 2px;
    border-radius: 2px;
    background: var(--gold-500);
    opacity: .45;
    pointer-events: none;
    z-index: 60;
  }
}

/* ---------- Shared ---------- */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--gold-800);
  text-transform: uppercase;
  font-weight: 500;
}

.section-title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--ink-900);
}

.lede {
  margin: 16px 0 0;
  font-size: clamp(15.5px, 1.4vw, 17px);
  line-height: 1.65;
  color: var(--ink-600);
  text-wrap: pretty;
}

.link-slide {
  color: var(--ink-600);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  padding: 4px 0;
  background-image: linear-gradient(var(--gold-500), var(--gold-500));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size .25s ease, color .2s;
}
.link-slide:hover { background-size: 100% 2px; color: var(--ink-900); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--gold-500);
  color: var(--ink-900);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 14px;
  transition: background .2s, transform .2s;
}
.btn-primary:hover { background: var(--gold-600); color: var(--ink-900); }

/* ---------- Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(20, 17, 16, .08);
}
.nav-bar {
  padding-block: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink-900);
}
.brand:hover { color: var(--ink-900); }
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold-500);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.03em;
  color: var(--ink-900);
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.01em;
}
.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 30px);
  flex-wrap: wrap;
}
.btn-nav {
  background: var(--gold-500);
  color: var(--ink-900);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 12px;
  transition: background .2s, transform .2s;
}
.btn-nav:hover { background: var(--gold-600); color: var(--ink-900); transform: translateY(-1px); }

/* ---------- Hero ---------- */
.hero { background: var(--paper); }
.hero-grid {
  padding-block: clamp(52px, 8vh, 96px) clamp(64px, 9vh, 110px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.hero-grid > * { min-width: 0; }
.hero h1 { margin: 0; font-weight: 400; }

.greet-stack {
  display: grid;
  justify-items: start;
  position: relative;
}
.greet {
  grid-area: 1 / 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  opacity: 0;
  transition: opacity .6s ease;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(54px, 7.2vw, 84px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ink-900);
}
.greet:first-child { opacity: 1; }
.greet-lang {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--gold-800);
}
.hero-title {
  display: block;
  margin-top: 26px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(27px, 2.9vw, 40px);
  line-height: 1.16;
  letter-spacing: -.015em;
  color: var(--ink-900);
  max-width: 19ch;
  text-wrap: pretty;
}
.hero-lede {
  margin: 20px 0 30px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.65;
  color: var(--ink-600);
  max-width: 52ch;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.hero-cta { display: inline-flex; flex-direction: column; gap: 7px; }
.hero-cta .btn-primary { box-shadow: 0 10px 24px -12px rgba(184, 134, 11, .55); }
.hero-cta .btn-primary:hover { transform: translateY(-1px); }
.btn-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--ink-600);
  text-transform: uppercase;
  padding-left: 4px;
}
.link-arrow {
  color: var(--ink-900);
  text-decoration: none;
  font-weight: 500;
  font-size: 15.5px;
  padding: 4px 0;
  background-image: linear-gradient(var(--gold-500), var(--gold-500));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  transition: color .2s;
}
.link-arrow:hover { color: var(--gold-800); }
.hero-meta {
  margin: 34px 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--ink-600);
  text-transform: uppercase;
}

/* Phone mock */
.hero-phone { display: flex; justify-content: center; }
.phone {
  width: min(308px, 82vw);
  aspect-ratio: 308 / 636;
  background: var(--ink-900);
  border-radius: 46px;
  padding: 11px;
  box-shadow: 0 0 0 1px rgba(20, 17, 16, .08), 0 36px 72px -30px rgba(20, 17, 16, .5);
  box-sizing: border-box;
}
.phone-screen {
  width: 100%;
  height: 100%;
  background: var(--paper);
  border-radius: 36px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lesson-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 10px;
}
.lesson-head-text { display: flex; flex-direction: column; gap: 2px; }
.lesson-title { font-weight: 600; font-size: 13.5px; color: var(--ink-900); }
.lesson-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--gold-800);
}
.lesson-progress {
  margin: 0 16px;
  height: 5px;
  border-radius: 99px;
  background: #F1ECDF;
  overflow: hidden;
}
.lesson-progress-fill {
  width: 42%;
  height: 100%;
  border-radius: 99px;
  background: var(--gold-500);
}
.lesson-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px;
}
.lesson-card {
  background: var(--paper-warm);
  border: 1px solid rgba(20, 17, 16, .06);
  border-radius: 18px;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.lesson-letter {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 66px;
  line-height: 1;
  color: var(--ink-900);
}
.lesson-word-row { display: flex; align-items: baseline; gap: 8px; }
.lesson-word { font-weight: 600; font-size: 17px; color: var(--ink-900); }
.lesson-gloss {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--gold-800);
}
.lesson-audio {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--gold-500);
  display: grid;
  place-items: center;
  margin-top: 6px;
  box-shadow: 0 8px 18px -8px rgba(184, 134, 11, .6);
}
.lesson-hint {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ink-600);
}
.lesson-next {
  margin-top: 14px;
  display: block;
  text-align: center;
  background: var(--ink-900);
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 13px;
  border-radius: 13px;
}
.lesson-next:hover { color: var(--paper); }
.lesson-tabs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 8px 14px;
  border-top: 1px solid rgba(20, 17, 16, .07);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--ink-600);
}
.tab.active { color: var(--gold-800); }
.tab-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
}

/* ---------- Languages ---------- */
.languages {
  background: var(--paper-warm);
  border-top: 1px solid rgba(20, 17, 16, .05);
  border-bottom: 1px solid rgba(20, 17, 16, .05);
}
.languages .container { padding-block: clamp(60px, 9vh, 104px); }
.languages-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.languages-head .eyebrow { margin-top: 26px; }
.languages-head .lede { margin-inline: auto; max-width: 56ch; }
.beads {
  position: relative;
  z-index: 61;
  display: flex;
  gap: 11px;
  padding: 4px 2px;
}
.bead { width: 10px; height: 10px; border-radius: 50%; }
.lang-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
  gap: 14px;
}
.lang-tile {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(20, 17, 16, .07);
  border-radius: 14px;
  padding: 20px 18px;
  transition: transform .2s, box-shadow .2s;
}
.lang-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(20, 17, 16, .35);
}
.tile-dot {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.tile-greeting {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink-900);
}
.tile-lang {
  display: block;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-600);
}
.tag-new {
  color: var(--gold-800);
  border: 1px solid var(--gold-300);
  border-radius: 99px;
  padding: 1px 7px;
  margin-left: 5px;
  font-size: 9.5px;
}
.lang-note {
  margin: 22px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-600);
}

/* ---------- How it works ---------- */
.how { background: var(--paper); }
.how .container { padding-block: clamp(64px, 9vh, 110px); }
.how .section-title { max-width: 16ch; }
.how .lede { max-width: 52ch; }
.how-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 18px;
}
.how-card {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(20, 17, 16, .09);
  border-radius: 16px;
  padding: 28px 22px 24px;
  transition: transform .2s, box-shadow .2s;
}
.how-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -20px rgba(20, 17, 16, .35);
}
.step-dot {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 5px var(--paper);
  z-index: 61;
}
.step-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--gold-800);
}
.how-verb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.how-verb {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 25px;
  color: var(--ink-900);
}
.how-card p {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-600);
  text-wrap: pretty;
}

/* ---------- Story time ---------- */
.stories { background: var(--night-900); }
.stories-grid {
  padding-block: clamp(72px, 10vh, 120px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.stories .eyebrow { color: var(--gold-300); }
.stories .section-title {
  color: var(--gold-300);
  line-height: 1.1;
  max-width: 15ch;
  text-wrap: pretty;
}
.stories p {
  margin: 18px 0 0;
  font-size: clamp(15.5px, 1.4vw, 17px);
  line-height: 1.7;
  color: rgba(244, 241, 252, .82);
  max-width: 50ch;
  text-wrap: pretty;
}
.stories-link {
  display: inline-block;
  margin-top: 26px;
  color: var(--gold-300);
  text-decoration: none;
  font-weight: 500;
  font-size: 15.5px;
  padding: 4px 0;
  background-image: linear-gradient(var(--gold-500), var(--gold-500));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  transition: color .2s;
}
.stories-link:hover { color: #FFFFFF; }
.stories-photo {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 0 0 1px rgba(230, 197, 71, .3), 0 30px 60px -30px rgba(0, 0, 0, .7);
  position: relative;
}
.stories-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Who it's for ---------- */
.for { background: var(--paper); }
.for .container { padding-block: clamp(64px, 9vh, 110px); }
.for .section-title { max-width: 20ch; }
.for-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
  gap: 18px;
}
.for-card {
  background: var(--paper);
  border: 1px solid rgba(20, 17, 16, .09);
  border-radius: 16px;
  padding: 26px 22px;
  transition: transform .2s, box-shadow .2s;
}
.for-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -20px rgba(20, 17, 16, .35);
}
.role-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
}
.role-label.gold { color: var(--gold-800); }
.role-label.amber { color: #92400E; }
.role-label.teal { color: #0F766E; }
.role-dot { width: 9px; height: 9px; border-radius: 50%; }
.for-card h3 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--ink-900);
}
.for-card p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-600);
  text-wrap: pretty;
}
.for-link {
  display: inline-block;
  margin-top: 14px;
  color: #0F766E;
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  transition: color .2s;
}
.for-link:hover { color: var(--ink-900); }

/* ---------- Pricing ---------- */
.pricing {
  background: var(--paper-warm);
  border-top: 1px solid rgba(20, 17, 16, .05);
  border-bottom: 1px solid rgba(20, 17, 16, .05);
}
.pricing .container { padding-block: clamp(64px, 9vh, 110px); }
.pricing .section-title {
  line-height: 1.12;
  max-width: 24ch;
  text-wrap: pretty;
}
.pricing-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 22px;
  align-items: start;
}
.plan-card {
  background: var(--paper);
  border: 1px solid rgba(20, 17, 16, .09);
  border-radius: 18px;
  padding: 32px 30px;
  box-shadow: 0 24px 48px -32px rgba(20, 17, 16, .3);
}
.plan-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-600);
}
.plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 18px;
}
.plan-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(58px, 6vw, 76px);
  line-height: 1;
  color: var(--ink-900);
  letter-spacing: -.02em;
}
.plan-per {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--ink-600);
}
.plan-features {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.plan-features li {
  display: flex;
  gap: 11px;
  align-items: baseline;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-600);
}
.plan-features li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-500);
  flex: none;
  transform: translateY(-2px);
}
.plan-cta {
  display: block;
  text-align: center;
  margin-top: 28px;
  background: var(--gold-500);
  color: var(--ink-900);
  text-decoration: none;
  font-weight: 600;
  font-size: 15.5px;
  padding: 14px;
  border-radius: 14px;
  transition: background .2s;
}
.plan-cta:hover { background: var(--gold-600); color: var(--ink-900); }
.packs { display: flex; flex-direction: column; gap: 14px; }
.pack-row {
  background: var(--paper);
  border: 1px solid rgba(20, 17, 16, .08);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pack-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pack-info { flex: 1; min-width: 150px; }
.pack-name { display: block; font-weight: 600; font-size: 15.5px; color: var(--ink-900); }
.pack-desc { display: block; font-size: 13px; color: var(--ink-600); margin-top: 2px; }
.pack-price { text-align: right; }
.pack-main {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-900);
}
.pack-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--ink-600);
  margin-top: 3px;
}
.affiliate-row {
  background: var(--paper);
  border: 1px dashed rgba(15, 118, 110, .4);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.affiliate-row .pack-dot { background: #0F766E; }
.affiliate-text {
  flex: 1;
  min-width: 170px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-900);
}
.affiliate-text strong { font-weight: 600; }
.pricing-foot {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--ink-600);
  text-transform: uppercase;
  line-height: 1.8;
}

/* ---------- Final CTA ---------- */
.cta { background: var(--paper); }
.cta .container {
  max-width: 820px;
  padding-block: clamp(72px, 11vh, 130px);
  text-align: center;
}
.cta-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink-900);
}
.cta-line {
  margin: 20px 0 0;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.6;
  color: var(--ink-600);
}
.cta-greet {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-900);
}
.badges {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--ink-900);
  color: #FFFFFF;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 12px;
  transition: transform .2s, background .2s;
}
.badge:hover { transform: translateY(-1px); background: #2A2422; color: #FFFFFF; }
.badge-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.badge-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .7);
}
.badge-store { font-weight: 600; font-size: 16.5px; }
.cta-note {
  margin: 24px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--ink-600);
  text-transform: uppercase;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--night-900); color: #F4F1FC; }
.site-footer .container { padding-block: clamp(56px, 8vh, 88px) 36px; }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(36px, 6vw, 84px);
  justify-content: space-between;
}
.footer-brand { max-width: 300px; }
.footer-brand .brand-row { display: flex; align-items: center; gap: 11px; }
.footer-brand .brand-name { color: #FFFFFF; }
.footer-tagline {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(244, 241, 252, .66);
  text-wrap: pretty;
}
.footer-contact { margin: 18px 0 0; font-size: 14px; line-height: 1.9; }
.footer-mail { color: var(--gold-300); text-decoration: none; transition: color .2s; }
.footer-mail:hover { color: #FFFFFF; }
.footer-site { color: rgba(244, 241, 252, .66); text-decoration: none; transition: color .2s; }
.footer-site:hover { color: var(--gold-300); }
.footer-cols {
  display: flex;
  gap: clamp(36px, 5vw, 72px);
  flex-wrap: wrap;
}
.footer-heading {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(244, 241, 252, .45);
  text-transform: uppercase;
}
.footer-link {
  display: block;
  margin-bottom: 10px;
  color: rgba(244, 241, 252, .78);
  text-decoration: none;
  font-size: 14px;
  transition: color .2s;
}
.footer-link:hover { color: var(--gold-300); }
.footer-bottom {
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid rgba(244, 241, 252, .14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.signoff { display: flex; align-items: center; gap: 16px; }
.knot { display: inline-block; width: 40px; height: 26px; }
.signoff-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--gold-300);
}
.copyright {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: rgba(244, 241, 252, .5);
}

/* ---------- Subpage components ---------- */
.link-slide[aria-current="page"] { background-size: 100% 2px; color: var(--ink-900); }

.page-hero { background: var(--paper); }
.page-hero .container { padding-block: clamp(48px, 7vh, 84px) clamp(44px, 6vh, 68px); }
.page-hero h1 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink-900);
  max-width: 22ch;
  text-wrap: pretty;
}
.page-hero .lede { max-width: 56ch; }

.section .container { padding-block: clamp(56px, 8vh, 96px); }
.section--warm {
  background: var(--paper-warm);
  border-top: 1px solid rgba(20, 17, 16, .05);
  border-bottom: 1px solid rgba(20, 17, 16, .05);
}
.section-more { margin-top: 36px; }

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.two-col > * { min-width: 0; }

.dot-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.dot-list li {
  display: flex;
  gap: 11px;
  align-items: baseline;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-600);
}
.dot-list li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-500);
  flex: none;
  transform: translateY(-2px);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-600);
  border: 1px solid rgba(20, 17, 16, .12);
  border-radius: 99px;
  padding: 5px 12px;
  background: var(--paper);
}

.photo {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(20, 17, 16, .08), 0 24px 48px -28px rgba(20, 17, 16, .35);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Language detail sections */
a.lang-tile { display: block; text-decoration: none; color: var(--ink-900); }
.lang-section {
  border-top: 1px solid rgba(20, 17, 16, .07);
  padding: clamp(36px, 5vh, 52px) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  scroll-margin-top: 90px;
}
.lang-section > * { min-width: 0; }
.lang-greeting {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink-900);
}
.lang-label {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--gold-800);
  text-transform: uppercase;
}
.lang-pron { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-600); }
.lang-pron em { color: var(--ink-900); font-style: normal; font-weight: 500; }
.lang-body p { margin: 0 0 4px; font-size: 15px; line-height: 1.65; color: var(--ink-600); text-wrap: pretty; }

/* Numbered flow (genuinely sequential content only) */
.flow {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
}
.flow-step {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(20, 17, 16, .09);
  border-radius: 16px;
  padding: 30px 24px;
}
.flow-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: var(--gold-500);
}
.flow-step h3 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--ink-900);
}
.flow-step p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-600);
  text-wrap: pretty;
}

/* Child / parent parallel view */
.split {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 14px;
}
.split-card {
  background: var(--paper);
  border: 1px solid rgba(20, 17, 16, .08);
  border-radius: 14px;
  padding: 20px;
}
.split-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
}
.split-label.child { color: #92400E; }
.split-label.parent { color: var(--gold-800); }
.split-card p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--ink-600);
  text-wrap: pretty;
}

/* Forms (degrade to mailto — no backend wired) */
.form { margin-top: 36px; display: grid; gap: 18px; max-width: 560px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 500; color: var(--ink-900); }
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 15px;
  color: var(--ink-900);
  background: var(--paper);
  border: 1px solid rgba(20, 17, 16, .18);
  border-radius: 12px;
  padding: 12px 14px;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 1px;
}
.form button.btn-primary {
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.form-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--ink-600);
  text-transform: uppercase;
  line-height: 1.8;
}

/* FAQ accordion */
.faq { margin-top: 44px; display: grid; gap: 12px; max-width: 780px; }
.faq details {
  background: var(--paper);
  border: 1px solid rgba(20, 17, 16, .09);
  border-radius: 14px;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--gold-800);
  flex: none;
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-body {
  margin: 0;
  padding: 0 20px 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-600);
  text-wrap: pretty;
}

/* Character family (About) */
.char-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 16px;
}
.char-card {
  margin: 0;
  background: var(--paper);
  border: 1px solid rgba(20, 17, 16, .08);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.char-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -20px rgba(20, 17, 16, .35);
}
.char-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.char-card figcaption { padding: 14px 16px 16px; }
.char-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink-900);
}
.char-role {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--ink-600);
  text-transform: uppercase;
}

/* Legal / long-form prose */
.prose { max-width: 68ch; }
.prose h2 {
  margin: 36px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--ink-900);
}
.prose p { margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink-600); }
.placeholder-note {
  margin-top: 36px;
  background: var(--paper-warm);
  border: 1px dashed rgba(140, 106, 20, .45);
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-600);
}

/* Mobile type scale (brief §5.2: display 40 on mobile) */
@media (max-width: 480px) {
  .greet { font-size: 42px; }
}

/* ---------- Motion system ----------
   Everything here sits behind prefers-reduced-motion: no-preference.
   Reduced-motion users get the static site (guards at the bottom). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes phone-in {
    from { opacity: 0; transform: translateY(32px) scale(.97); }
    to { opacity: 1; transform: none; }
  }
  @keyframes bead-pop {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes audio-pulse {
    0% { transform: scale(.85); opacity: .9; }
    70%, 100% { transform: scale(1.3); opacity: 0; }
  }
  @keyframes fill-progress {
    from { width: 0; }
  }

  /* Orchestrated page-load: hero content rises in sequence */
  .hero-copy > *,
  .page-hero .container > * { animation: rise-in .7s cubic-bezier(.2, .6, .2, 1) both; }
  .hero-copy > *:nth-child(2),
  .page-hero .container > *:nth-child(2) { animation-delay: .12s; }
  .hero-copy > *:nth-child(3),
  .page-hero .container > *:nth-child(3) { animation-delay: .24s; }
  .hero-copy > *:nth-child(4) { animation-delay: .34s; }
  .hero-title { animation: rise-in .7s .12s cubic-bezier(.2, .6, .2, 1) both; }
  .phone { animation: phone-in .9s .25s cubic-bezier(.2, .6, .2, 1) both; }

  /* Greeting cycler: incoming rises from below, outgoing exits upward (site.js) */
  .greet {
    transform: translateY(14px);
    transition: opacity .55s ease, transform .6s cubic-bezier(.2, .6, .2, 1);
  }
  .greet:first-child { transform: none; }

  /* Phone mock micro-motion */
  .lesson-progress-fill { animation: fill-progress 1.1s .9s cubic-bezier(.2, .6, .2, 1) backwards; }
  .lesson-audio { position: relative; }
  .lesson-audio::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(212, 175, 55, .5);
    animation: audio-pulse 2.8s ease-out .8s infinite;
  }

  /* Scroll reveals — elements below the fold are tagged .reveal by site.js
     and staggered per container via --rd */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .65s cubic-bezier(.2, .6, .2, 1), transform .65s cubic-bezier(.2, .6, .2, 1);
    transition-delay: var(--rd, 0ms);
  }
  .reveal.is-visible { opacity: 1; transform: none; }
  .stories-photo.reveal, .photo.reveal { transform: translateY(20px) scale(.98); }
  .stories-photo.reveal.is-visible, .photo.reveal.is-visible { transform: none; }

  /* Beadwork strand pops in bead by bead */
  .beads.reveal .bead { opacity: 0; transform: scale(0); }
  .beads.reveal.is-visible .bead { animation: bead-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
  .beads.reveal.is-visible .bead:nth-child(2) { animation-delay: .05s; }
  .beads.reveal.is-visible .bead:nth-child(3) { animation-delay: .1s; }
  .beads.reveal.is-visible .bead:nth-child(4) { animation-delay: .15s; }
  .beads.reveal.is-visible .bead:nth-child(5) { animation-delay: .2s; }
  .beads.reveal.is-visible .bead:nth-child(6) { animation-delay: .25s; }
  .beads.reveal.is-visible .bead:nth-child(7) { animation-delay: .3s; }
  .beads.reveal.is-visible .bead:nth-child(8) { animation-delay: .35s; }
  .beads.reveal.is-visible .bead:nth-child(9) { animation-delay: .4s; }
  .beads.reveal.is-visible .bead:nth-child(10) { animation-delay: .45s; }
  .beads.reveal.is-visible .bead:nth-child(11) { animation-delay: .5s; }

  /* Sticky header gains depth once the page scrolls (site.js) */
  .site-header { transition: box-shadow .25s ease; }
  .site-header.is-scrolled { box-shadow: 0 10px 28px -18px rgba(20, 17, 16, .3); }

  /* Gold buttons: a sheen sweeps across on hover */
  .btn-primary, .plan-cta, .btn-nav { position: relative; overflow: hidden; }
  .btn-primary::before, .plan-cta::before, .btn-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%);
    transform: translateX(-130%);
    transition: transform .55s ease;
    pointer-events: none;
  }
  .btn-primary:hover::before, .plan-cta:hover::before, .btn-nav:hover::before {
    transform: translateX(130%);
  }

  /* FAQ answers slide open (progressive enhancement — newer engines) */
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .35s ease, content-visibility .35s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }

  /* Cross-page transitions: content crossfades, header and footer hold still */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: lt-header; }
  .site-footer { view-transition-name: lt-footer; }
  ::view-transition-old(root) { animation-duration: .18s; }
  ::view-transition-new(root) { animation-duration: .26s; }

  /* ----- Motion system II ----- */

  /* Word cascade: split titles rise word by word (site.js splits them) */
  .split-words .w {
    display: inline-block;
    opacity: 0;
    transform: translateY(.5em);
    transition: opacity .5s cubic-bezier(.2, .6, .2, 1), transform .55s cubic-bezier(.2, .6, .2, 1);
    transition-delay: calc(var(--wi) * 60ms + var(--rd, 0ms));
  }
  .split-words.words-in .w,
  .split-words.reveal.is-visible .w { opacity: 1; transform: none; }

  /* Greeting letters cascade in as each greeting takes its turn */
  .greet .ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(.35em);
    transition: opacity .3s ease, transform .45s cubic-bezier(.2, .6, .2, 1);
    transition-delay: var(--chd, 0ms);
  }
  .greet.is-on .ch { opacity: 1; transform: none; }

  /* Directional reveals: language rows enter from the left, price rows from the right */
  .lang-section.reveal { transform: translateX(-28px); }
  .pack-row.reveal, .affiliate-row.reveal { transform: translateX(28px); }
  .lang-section.reveal.is-visible,
  .pack-row.reveal.is-visible,
  .affiliate-row.reveal.is-visible { transform: none; }

  /* Story heading glows up as it reveals */
  .stories .section-title { transition: text-shadow 1.2s ease .3s; }
  .stories .section-title.reveal.is-visible { text-shadow: 0 0 28px rgba(230, 197, 71, .35); }

  /* Scroll-linked zoom-settle: photos relax to rest as they scroll into view */
  @supports (animation-timeline: view()) {
    .photo, .stories-photo { overflow: hidden; }
    .photo img, .stories-photo img {
      animation: img-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
  }
  @keyframes img-settle {
    from { transform: scale(1.14); }
    to { transform: scale(1); }
  }

  /* Phone mock: perspective stage for the pointer tilt (site.js) */
  .hero-phone { perspective: 1100px; }
  .phone { will-change: transform; }

  /* Greeting marquee: outlined gold type drifting past (decorative) */
  .marquee-track { animation: marquee-scroll 48s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes marquee-scroll { to { transform: translateX(-50%); } }
}

/* Greeting marquee base (outside the motion guard so it lays out statically too) */
.marquee {
  overflow: hidden;
  background: var(--paper);
  border-top: 1px solid rgba(20, 17, 16, .05);
}
.marquee-track { display: flex; width: max-content; }
.marquee-run {
  flex: none;
  white-space: nowrap;
  padding-block: 26px;
  padding-inline-end: .6em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 4.5vw, 58px);
  letter-spacing: -.01em;
  color: rgba(140, 106, 20, .28);
}
@supports (-webkit-text-stroke: 1px black) {
  .marquee-run { color: transparent; -webkit-text-stroke: 1px rgba(140, 106, 20, .42); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .greet { transition: none; }
  .lang-tile, .how-card, .for-card, .badge, .btn-nav,
  .btn-primary, .link-slide, .link-arrow { transition: none; }
}