/* ============================================================
   SkillFiller — सब सीखेंगे
   Design language: "Indian Railway Journey" letterpress poster.
   Indigo ink + marigold + vermillion on warm cream paper.
   Mobile-first. No frameworks. No images.
   ============================================================ */

:root {
  --paper:        #F7EFDE;
  --paper-deep:   #EFE3C8;
  --card:         #FFFDF4;
  --ink:          #1D2452;
  --ink-deep:     #11163A;
  --ink-soft:     #3A4170;
  --marigold:     #F7A823;
  --marigold-hi:  #FFC34D;
  --vermillion:   #DE4A24;
  --peacock:      #0F7B7C;
  --henna:        #1F7A4D;
  --shadow:       6px 6px 0 rgba(29, 36, 82, .92);
  --shadow-sm:    4px 4px 0 rgba(29, 36, 82, .92);
  --line:         2px solid var(--ink);
  --perf:         2px dashed rgba(29, 36, 82, .35);
  --r:            14px;
  --r-sm:         10px;

  --font-display: 'Bricolage Grotesque', 'Mukta', sans-serif;
  --font-deva:    'Yatra One', 'Mukta', sans-serif;
  --font-body:    'Mukta', 'Noto Sans', system-ui, sans-serif;

  --w: min(1120px, 92vw);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; border-radius: 4px; }

.wrap { width: var(--w); margin-inline: auto; }

/* ---------------- Typography ---------------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.015em;
}
/* Devanagari headings need more vertical room than the Latin display font: at
   line-height 1.04 the top matras (shirorekha + ि/ी/े/ै/ो/ौ) clip and the
   heading rides up into the chip/element above it. Hindi-only (I18N.apply keeps
   html[lang] in sync with the chosen language), so Latin headings keep their
   tight display spacing. */
html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3,
html[lang="hi"] .display { line-height: 1.3; }
.deva { font-family: var(--font-deva); font-weight: 400; letter-spacing: 0; }
.accent-v { color: var(--vermillion); }
.accent-m { color: var(--marigold); }
.accent-p { color: var(--peacock); }

/* ---------------- Platform signboard (section kicker) ---------------- */
.platform-sign {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  background: var(--marigold);
  border: var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  padding: .3em .85em .34em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-deep);
  transform: rotate(-1.2deg);
}
.platform-sign::before {
  content: "";
  width: .55em; height: .55em;
  border-radius: 50%;
  background: var(--ink-deep);
  flex: none;
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  padding: .78em 1.5em;
  border: var(--line);
  border-radius: var(--r-sm);
  background: var(--marigold);
  color: var(--ink-deep);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  min-height: 48px; /* touch target */
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(29,36,82,.92); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(29,36,82,.92); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--ink-deep); }
.btn--ver { background: var(--vermillion); color: var(--card); }
.btn--block { width: 100%; }
.btn--sm { font-size: .9rem; padding: .5em 1em; min-height: 40px; }

/* share fallback menu — shown on desktop where there's no native share sheet */
.share-wrap { position: relative; display: inline-flex; }
.share-menu {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 50;
  display: flex; flex-direction: column; gap: .15rem; min-width: 210px;
  background: var(--card); border: var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow); padding: .35rem;
}
.share-menu[hidden] { display: none; }
.share-opt {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; text-align: left;
  background: none; border: 0; border-radius: 8px; padding: .6rem .7rem;
  cursor: pointer; color: var(--ink); text-decoration: none;
}
.share-opt:hover { background: var(--paper-deep); }
.share-ok { color: var(--henna); font-weight: 800; }

/* ---------------- Greeting marquee ---------------- */
.marquee {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  border-bottom: var(--line);
  font-size: .92rem;
  padding-block: .42em;
}
.marquee__track {
  display: flex;
  gap: 2.4em;
  width: max-content;
  animation: marquee 38s linear infinite;
  white-space: nowrap;
}
.marquee__track span { opacity: .92; }
.marquee__track .dot { color: var(--marigold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------- Header ---------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--line);
}
.site-head__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: .65rem;
}
.logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  margin-right: auto;
}
.logo__stamp {
  width: 40px; height: 40px;
  background: var(--vermillion);
  color: var(--card);
  border: var(--line);
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  transform: rotate(-5deg);
  box-shadow: 3px 3px 0 rgba(29,36,82,.92);
  position: relative;
}
.logo__stamp::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1.5px dashed rgba(255,253,244,.75);
  border-radius: 6px;
}
.logo__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.02em;
}
.logo__tag {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.site-nav { display: none; gap: 1.4rem; font-weight: 600; }
.site-nav a { text-decoration: none; opacity: .85; }
.site-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--marigold); text-decoration-thickness: 3px; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  flex: none;                 /* never let flex squeeze it (caused per-character wrap) */
  white-space: nowrap;        /* "EN"/"HI" stays on one line */
  border: var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: .42em .95em;
  font-weight: 700;
  font-size: .95rem;
  box-shadow: 3px 3px 0 rgba(29,36,82,.92);
  transition: transform .15s ease;
  min-height: 42px;
}
.lang-btn:hover { transform: translate(-1px,-1px); }
.lang-btn .globe { font-size: 1.05em; }

@media (min-width: 900px) {
  .site-nav { display: flex; }
}

/* ---- mobile marketing header: one clean row, nothing wraps ----
   The language button shows the short code (EN/HI, set in i18n.js apply()).
   On phones the tagline collapses and the wordmark shrinks; on the narrowest
   phones the wordmark drops too, leaving the SG stamp (which always stays and
   still links home). The CTA + language button never wrap. */
.site-head .btn--sm { flex: none; }   /* CTA keeps its size; logo absorbs slack */
@media (max-width: 600px) {
  .site-head__in { gap: .45rem; }
  /* Keep the BRAND — the SG stamp + "Skill the Gap" name stay on every screen.
     Only the secondary tagline collapses on phones (it is too wide to share the
     row with the bell + language + CTA); it returns in full at >=600px. The name
     is forced onto one clean line (no per-word wrap); the language button + CTA
     compact to make room so the wordmark always fits. */
  .site-head .logo { gap: .45rem; }
  .site-head .logo__tag { display: none; }
  .site-head .logo__name { font-size: 1rem; white-space: nowrap; }
  .site-head .btn--sm { white-space: nowrap; padding-inline: .65em; font-size: .88rem; }
  .lang-btn { padding-inline: .48em; }
}
@media (max-width: 360px) {
  .site-head__in { gap: .3rem; }
  .site-head .logo { gap: .35rem; }
  .site-head .logo__name { font-size: .8rem; }
  .site-head .btn--sm { padding-inline: .5em; font-size: .8rem; }
  .lang-btn { padding-inline: .4em; }
}
@media (max-width: 340px) {   /* iPhone SE / tiniest budget phones: keep the brand, fit everything */
  .site-head__in { gap: .25rem; }
  .site-head .logo__name { font-size: .72rem; }
  .site-head .btn--sm { padding-inline: .4em; font-size: .72rem; }
  .lang-btn { padding-inline: .32em; gap: .3em; }
}

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  padding-block: clamp(2.6rem, 7vw, 5.5rem) clamp(2.2rem, 5vw, 4rem);
  overflow: hidden;
}
.hero__sun {
  position: absolute;
  top: -160px;
  right: -160px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--marigold) 0deg 5deg, transparent 5deg 13deg);
  opacity: .16;
  animation: sunspin 90s linear infinite;
  pointer-events: none;
}
@keyframes sunspin { to { transform: rotate(360deg); } }

.hero__grid {
  display: grid;
  gap: 2.6rem;
  align-items: center;
}
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 3rem; }
}

.hero__kicker {
  display: inline-block;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vermillion);
  margin-bottom: 1rem;
}
.hero h1 {
  font-size: clamp(2.7rem, 9vw, 4.9rem);
  margin-bottom: 1.1rem;
}
.hero h1 .deva { font-size: .94em; }
.hero__sub {
  font-size: clamp(1.05rem, 2.6vw, 1.22rem);
  max-width: 34em;
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.4rem; }
.hero__note { font-size: .88rem; font-weight: 600; color: var(--ink-soft); display: flex; align-items: center; gap: .5em; }
.hero__note::before { content: "✓"; color: var(--henna); font-weight: 800; }

/* Route map */
.route-card { position: relative; }
.route {
  width: 100%;
  height: auto;
  overflow: visible;
}
.route .rail-base { stroke: var(--ink); stroke-width: 6; fill: none; stroke-linecap: round; }
.route .rail-ties  { stroke: var(--paper); stroke-width: 2.4; fill: none; stroke-dasharray: 2 9; stroke-linecap: round; }
.route .stn { fill: var(--card); stroke: var(--ink); stroke-width: 3; }
.route .stn--done { fill: var(--marigold); }
.route .stn--goal { fill: var(--vermillion); }
.route text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  fill: var(--ink);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.route .train { fill: var(--vermillion); stroke: var(--ink); stroke-width: 2.5; }

/* draw-in when revealed */
.rv .rail-base, .rv .rail-ties { stroke-dashoffset: 0; }

/* ---------------- Ticket ---------------- */
.ticket {
  position: relative;
  background: var(--card);
  border: var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 24px; height: 24px;
  background: var(--paper);
  border: var(--line);
  border-radius: 50%;
  transform: translateY(-50%);
}
.ticket::before { left: -14px; }
.ticket::after  { right: -14px; }

.ticket--hero {
  margin-top: 1.4rem;
  padding: 1rem 1.6rem 1.1rem;
  transform: rotate(1.4deg);
}
.ticket__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.ticket__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ticket__big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
}
.ticket__perf { border-top: var(--perf); margin-block: .7rem; }
.ticket__free {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--vermillion);
  border: 2px solid var(--vermillion);
  border-radius: 6px;
  padding: .05em .5em;
  transform: rotate(-3deg);
  display: inline-block;
  font-size: .92rem;
  letter-spacing: .08em;
}

/* ---------------- Stats strip ---------------- */
.stats {
  background: var(--ink);
  color: var(--paper);
  border-block: var(--line);
  padding-block: 1.6rem;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem 1rem;
}
@media (min-width: 760px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; position: relative; }
.stat + .stat::before {
  content: "";
  position: absolute;
  left: -0.5rem; top: 12%;
  height: 76%;
  border-left: 2px dashed rgba(247,239,222,.25);
}
@media (max-width: 759px) { .stat:nth-child(3)::before { display: none; } }
.stat__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  color: var(--marigold);
  line-height: 1;
}
.stat__l { font-size: .92rem; opacity: .85; font-weight: 600; }

/* ---------------- Sections ---------------- */
.section { padding-block: clamp(3.2rem, 9vw, 6rem); }
.section--deep { background: var(--paper-deep); border-block: var(--line); }
/* The Reviews hero is now just a page title (the old live-rating block was
   removed), so it shouldn't reserve a whole section's bottom padding + head
   margin before the board — that left a big empty band. Tighten it. */
.com-hero { padding-bottom: clamp(1.4rem, 4vw, 2.2rem); }
.com-hero .section__head { margin-bottom: 0; }
.section__head { max-width: 38em; margin-bottom: 2.4rem; }
.section__head h2 {
  font-size: clamp(1.9rem, 5.6vw, 3rem);
  margin-top: 1rem;
}
.section__head p { margin-top: .8rem; color: var(--ink-soft); font-size: 1.05rem; }

/* ---------------- Language grid ---------------- */
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .7rem;
}
.lang-chip {
  border: var(--line);
  background: var(--card);
  border-radius: var(--r-sm);
  padding: .65rem .8rem;
  text-align: left;
  box-shadow: 3px 3px 0 rgba(29,36,82,.55);
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
  min-height: 60px;
}
.lang-chip:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 rgba(29,36,82,.8); background: var(--marigold-hi); }
.lang-chip.is-active { background: var(--marigold); box-shadow: 5px 5px 0 rgba(29,36,82,.92); }
.lang-chip__native { display: block; font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.lang-chip__name { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.lang-note {
  margin-top: 1.2rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-soft);
  display: flex;
  gap: .5em;
  align-items: flex-start;
}
.lang-note::before { content: "✦"; color: var(--vermillion); }

/* ---------------- Track tickets ---------------- */
.tracks {
  display: grid;
  gap: 2rem;
}
@media (min-width: 880px) { .tracks { grid-template-columns: 1fr 1fr; } }

.track { padding: 1.6rem 1.7rem 1.7rem; }
.track--ai   { background: linear-gradient(160deg, var(--card) 55%, #FFF3DA); }
.track--job  { background: linear-gradient(160deg, var(--card) 55%, #E4F2EF); }
.track__tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .25em .8em;
  border: var(--line);
  border-radius: 999px;
  margin-bottom: .9rem;
}
.track--ai  .track__tag { background: var(--marigold); }
.track--job .track__tag { background: var(--peacock); color: var(--card); }
.track h3 { font-size: clamp(1.5rem, 4vw, 1.9rem); margin-bottom: .4rem; }
.track > p { color: var(--ink-soft); margin-bottom: 1.2rem; }

.stops { list-style: none; position: relative; }
.stops::before {
  content: "";
  position: absolute;
  left: 9px; top: 10px; bottom: 10px;
  border-left: 3px solid var(--ink);
}
.stops li {
  position: relative;
  padding: .34rem 0 .34rem 2rem;
  font-weight: 600;
}
.stops li::before {
  content: "";
  position: absolute;
  left: 2px; top: .72em;
  width: 12px; height: 12px;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.track--ai  .stops li:first-child::before { background: var(--marigold); }
.track--job .stops li:first-child::before { background: var(--peacock); }
.stops li:last-child::before { background: var(--vermillion); }
.track__foot {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: var(--perf);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* ---------------- Audience cards ---------------- */
.who-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.who-card {
  background: var(--card);
  border: var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 1.3rem 1.3rem 1.2rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: transform .16s ease, box-shadow .16s ease;
}
.who-card:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 rgba(29,36,82,.92); }
.who-card__emoji {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  font-size: 1.6rem;
  background: var(--paper-deep);
  border: var(--line);
  border-radius: 12px;
  transform: rotate(-4deg);
}
.who-card h3 { font-size: 1.22rem; }
.who-card p { color: var(--ink-soft); font-size: .95rem; flex: 1; }
.who-card__go {
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--vermillion);
  font-size: .95rem;
}

/* ---------------- How it works ---------------- */
.how-grid {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: step;
}
.how-step { position: relative; padding: 1.5rem 1.4rem 1.4rem; background: var(--card); border: var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.how-step__stamp {
  position: absolute;
  top: -18px; left: 18px;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--vermillion);
  color: var(--card);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  border: var(--line);
  border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(29,36,82,.92);
  transform: rotate(-6deg);
}
.how-step__stamp::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px dashed rgba(255,253,244,.7);
  border-radius: 6px;
}
.how-step h3 { margin: .9rem 0 .4rem; font-size: 1.25rem; }
.how-step p { color: var(--ink-soft); font-size: .97rem; }

/* ---------------- Guru band (dark) ---------------- */
.guru-band {
  background: var(--ink);
  color: var(--paper);
  border-block: var(--line);
  position: relative;
  overflow: hidden;
}
.guru-band .platform-sign { transform: rotate(1deg); }
.guru-band__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 940px) { .guru-band__grid { grid-template-columns: 1fr 1fr; } }
.guru-band h2 { font-size: clamp(1.9rem, 5.5vw, 2.9rem); margin-top: 1rem; }
.guru-band .sub { margin-top: .8rem; opacity: .82; font-size: 1.05rem; max-width: 30em; }
.guru-band__cta { margin-top: 1.6rem; }

.chat-demo {
  background: var(--ink-deep);
  border: 2px solid rgba(247,239,222,.25);
  border-radius: var(--r);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  box-shadow: 8px 8px 0 rgba(0,0,0,.35);
}
.bubble {
  max-width: 85%;
  padding: .7rem 1rem;
  border-radius: 14px;
  font-size: .98rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(10px);
}
.rv.in .bubble { animation: bubblein .5s ease forwards; }
.bubble:nth-child(1) { animation-delay: .15s; }
.bubble:nth-child(2) { animation-delay: .65s; }
.bubble:nth-child(3) { animation-delay: 1.2s; }
.bubble:nth-child(4) { animation-delay: 1.7s; }
@keyframes bubblein { to { opacity: 1; transform: none; } }
.bubble--user {
  align-self: flex-end;
  background: var(--marigold);
  color: var(--ink-deep);
  border-bottom-right-radius: 4px;
  font-weight: 600;
}
.bubble--guru {
  align-self: flex-start;
  background: rgba(247,239,222,.12);
  border: 1px solid rgba(247,239,222,.25);
  border-bottom-left-radius: 4px;
}
.bubble--guru b { color: var(--marigold-hi); }
.chat-demo__note {
  font-size: .78rem;
  opacity: .6;
  text-align: center;
  margin-top: .3rem;
}

/* ---------------- Footer ---------------- */
.site-foot {
  background: var(--ink-deep);
  color: var(--paper);
  padding-block: clamp(3rem, 8vw, 5rem) 2rem;
}
.site-foot__slogan {
  font-size: clamp(2.4rem, 9vw, 5rem);
  line-height: 1.05;
  margin-bottom: 1.2rem;
}
.site-foot__slogan .deva { color: var(--marigold); }
/* English slogan ("Learning for everyone") uses the display face, not the Devanagari display face */
html[lang="en"] .site-foot__slogan .deva { font-family: var(--font-display); }
.site-foot__mission { max-width: 42em; opacity: .82; font-size: 1.04rem; margin-bottom: 2.2rem; }
.site-foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  border-top: 2px dashed rgba(247,239,222,.25);
  padding-top: 1.4rem;
  font-size: .88rem;
  opacity: .75;
}

/* ---------------- Language dialog ---------------- */
.lang-dialog {
  width: min(680px, 94vw);
  max-height: 84dvh;
  border: var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  padding: 0;
  box-shadow: 10px 10px 0 rgba(17,22,58,.5);
}
.lang-dialog::backdrop { background: rgba(17,22,58,.55); backdrop-filter: blur(3px); }
.lang-dialog__head {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--marigold);
  border-bottom: var(--line);
}
.lang-dialog__head h2 { font-size: 1.2rem; }
.lang-dialog__close {
  border: var(--line);
  background: var(--card);
  border-radius: 8px;
  width: 40px; height: 40px;
  font-size: 1.1rem;
  font-weight: 800;
}
.lang-dialog__body { padding: 1.2rem; }
.lang-dialog .lang-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* ---------------- Toast ---------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--marigold);
  border-radius: 12px;
  padding: .7rem 1.2rem;
  font-weight: 600;
  font-size: .92rem;
  max-width: min(440px, 92vw);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 200;
  box-shadow: var(--shadow-sm);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body.has-tabbar .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }

/* ---------------- Scroll reveal ---------------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .1s; }
.rv-d2 { transition-delay: .2s; }
.rv-d3 { transition-delay: .3s; }

/* ============================================================
   APP SHELL (app.html)
   ============================================================ */

.app-body { background: var(--paper); min-height: 100dvh; }

/* --- Onboarding --- */
.onboard {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  width: min(640px, 92vw);
  margin-inline: auto;
  padding-block: 1.4rem 2.4rem;
}
.onboard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.steps { display: flex; gap: .5rem; }
.steps i {
  width: 30px; height: 6px;
  border-radius: 99px;
  background: var(--paper-deep);
  border: 1.5px solid var(--ink);
}
.steps i.on { background: var(--marigold); }
.ob-step h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); margin-bottom: .5rem; }
.ob-step > p { color: var(--ink-soft); margin-bottom: 1.6rem; }
.ob-step { display: none; animation: obin .4s ease; }
.ob-step.on { display: block; }
@keyframes obin { from { opacity: 0; transform: translateY(14px); } }

.cat-grid { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
.cat-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  text-align: left;
  background: var(--card);
  border: var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.1rem;
  transition: transform .14s ease, background .14s ease;
  min-height: 76px;
}
.cat-card:hover { transform: translate(-2px,-2px); }
.cat-card.is-active { background: var(--marigold); }
.cat-card__emoji { font-size: 1.7rem; flex: none; }
.cat-card b { font-family: var(--font-display); font-size: 1.05rem; display: block; }
.cat-card span { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.cat-card.is-active span { color: var(--ink); }

.ob-field { margin-bottom: 1.4rem; }
.ob-field label { display: block; font-weight: 700; margin-bottom: .45rem; }
.ob-field input {
  width: 100%;
  font: inherit;
  font-weight: 600;
  padding: .85rem 1rem;
  border: var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 3px 3px 0 rgba(29,36,82,.08);
}
.ob-nav { display: flex; gap: .8rem; margin-top: 1.8rem; }
.ob-nav .btn { flex: 1; }

/* --- OTP code step (one big 6-digit input) --- */
.otp-input {
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: .4em;
  text-indent: .4em; /* re-centres the letter-spaced digits */
  padding: .7rem .6rem;
  border: var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 3px 3px 0 rgba(29,36,82,.08);
}
.otp-input.shake { animation: otpshake .3s ease; }
@keyframes otpshake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* --- App chrome --- */
.app-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: var(--line);
}
.app-head__in {
  width: min(760px, 94vw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-block: .6rem;
}
.app-head .logo { margin-right: auto; }
.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-weight: 800;
  font-size: .9rem;
  background: var(--card);
  border: var(--line);
  border-radius: 999px;
  padding: .3em .8em;
  box-shadow: 2px 2px 0 rgba(29,36,82,.9);
}

.app-main {
  width: min(760px, 94vw);
  margin-inline: auto;
  padding-block: 1.4rem calc(110px + env(safe-area-inset-bottom));
}
.app-view { display: none; animation: obin .35s ease; }
.app-view.on { display: block; }

.greet { font-size: clamp(1.6rem, 6vw, 2.2rem); margin-bottom: .2rem; }
.greet-sub { color: var(--ink-soft); font-weight: 600; margin-bottom: 1.4rem; }

/* continue card */
.next-card {
  padding: 1.3rem 1.4rem;
  margin-bottom: 1.8rem;
  background: linear-gradient(150deg, var(--card) 60%, #FFF1D6);
}
.next-card .ticket__label { margin-bottom: .3rem; display: block; }
.next-card h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.next-card p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1rem; }
.progress {
  height: 14px;
  border: var(--line);
  border-radius: 99px;
  background: var(--card);
  overflow: hidden;
  margin-bottom: 1rem;
}
.progress i {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(135deg, var(--marigold) 0 10px, var(--marigold-hi) 10px 20px);
  border-right: 2px solid var(--ink);
  transition: width .6s ease;
}

/* journey timeline */
.journey { list-style: none; position: relative; margin-top: 1rem; }
.journey::before {
  content: "";
  position: absolute;
  left: 17px; top: 14px; bottom: 14px;
  border-left: 4px solid var(--ink);
}
.journey li { position: relative; padding: 0 0 1.1rem 3rem; }
.journey li:last-child { padding-bottom: 0; }
.j-dot {
  position: absolute;
  left: 6px; top: 2px;
  width: 26px; height: 26px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 800;
}
.journey .done .j-dot { background: var(--henna); color: var(--card); }
.journey .now .j-dot { background: var(--marigold); animation: pulse 1.8s ease infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(247,168,35,.35); } }
.journey .lock { opacity: .55; }
.j-card {
  background: var(--card);
  border: var(--line);
  border-radius: var(--r-sm);
  padding: .7rem 1rem;
  box-shadow: 3px 3px 0 rgba(29,36,82,.7);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
}
.journey .now .j-card { border-width: 2.5px; box-shadow: 5px 5px 0 rgba(29,36,82,.92); }
.j-card b { font-size: 1rem; line-height: 1.3; }
.j-card small { display: block; color: var(--ink-soft); font-weight: 600; }
.j-card .btn { flex: none; }

/* learn list */
.learn-track { margin-bottom: 2rem; }
.learn-track h2 { font-size: 1.4rem; margin-bottom: .9rem; display: flex; align-items: center; gap: .6rem; }
.learn-track h2 .track__tag { margin: 0; }

/* ---------------- Course catalog ---------------- */
.cat-section-t {
  font-size: 1.05rem;
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.8rem 0 .9rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.cat-section-t::after { content: ""; flex: 1; border-top: var(--perf); }

.course-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .course-grid { grid-template-columns: 1fr 1fr; } }

.course-card {
  position: relative;
  background: var(--card);
  border: var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 1.15rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.course-card:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(29,36,82,.92); }
.course-card__top { display: flex; align-items: center; gap: .7rem; }
.course-card__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  font-size: 1.5rem;
  border: var(--line);
  border-radius: 12px;
  background: var(--paper-deep);
  transform: rotate(-4deg);
  flex: none;
}
.level-chip {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: .18em .7em;
  background: var(--paper);
  white-space: nowrap;
}
.level-chip--zero  { background: var(--marigold); }
.level-chip--basic { background: #DCF1E4; }
.level-chip--mid   { background: #E3E8FB; }
.level-chip--adv   { background: var(--vermillion); color: var(--card); }
.stream-chip {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1.5px dashed var(--ink-soft);
  border-radius: 999px;
  padding: .18em .7em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.course-card h3 { font-size: 1.18rem; line-height: 1.2; }
.course-card > p { color: var(--ink-soft); font-size: .92rem; flex: 1; }
.course-card__meta {
  display: flex;
  gap: 1rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink-soft);
  border-top: var(--perf);
  padding-top: .65rem;
}
.course-card__cta { display: flex; align-items: center; gap: .8rem; }
.course-card__cta .btn { flex: 1; }
.course-card .progress { flex: 1; margin: 0; height: 12px; }
.course-card__pct { font-size: .8rem; font-weight: 800; }
.course-card.is-booked { background: linear-gradient(150deg, var(--card) 70%, #FFF3DA); }
.course-card__stamp {
  position: absolute;
  top: -12px; right: 14px;
  background: var(--henna);
  color: var(--card);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .08em;
  padding: .25em .7em;
  border: 2px solid var(--ink);
  border-radius: 7px;
  transform: rotate(3deg);
  box-shadow: 2px 2px 0 rgba(29,36,82,.9);
}

/* ---------------- Checkout (free ticket booking) ---------------- */
.checkout-dialog {
  width: min(520px, 94vw);
  max-height: 88dvh;
  overflow: auto;
  border: var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  padding: 0;
  box-shadow: 10px 10px 0 rgba(17,22,58,.5);
}
.checkout-dialog::backdrop { background: rgba(17,22,58,.6); backdrop-filter: blur(3px); }
.checkout__head {
  padding: 1.1rem 1.3rem;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.checkout__head h2 { font-size: 1.25rem; }
.checkout__head .lang-dialog__close { flex: none; }
.checkout__body { padding: 1.3rem; }
.checkout__course {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1rem;
}
.checkout__course b { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; display: block; }
.checkout__course small { color: var(--ink-soft); font-weight: 600; }
.checkout__stops { margin: .9rem 0 1.1rem; }
.checkout__fare {
  background: var(--card);
  border: var(--line);
  border-radius: var(--r-sm);
  padding: .9rem 1.1rem;
  margin-bottom: 1.2rem;
}
.checkout__fare div {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  padding-block: .22rem;
}
.checkout__fare div + div { border-top: var(--perf); }
.checkout__fare .free {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--henna);
  font-size: 1.1rem;
}
.checkout__fare s { color: var(--ink-soft); margin-right: .5em; font-weight: 500; }
.checkout__actions { display: grid; gap: .7rem; }

/* error text under form fields */
.field-err {
  display: none;
  color: var(--vermillion);
  font-weight: 700;
  font-size: .85rem;
  margin-top: .35rem;
}
.field-err.show { display: block; }
.auth-alt {
  text-align: center;
  margin-top: 1.4rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.auth-alt button {
  background: none;
  border: none;
  color: var(--vermillion);
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.reg-note {
  margin-top: 1.2rem;
  font-size: .82rem;
  color: var(--ink-soft);
  font-weight: 600;
  border: 1.5px dashed var(--ink-soft);
  border-radius: var(--r-sm);
  padding: .6rem .9rem;
  background: var(--card);
}

/* lesson dialog */
.lesson-dialog {
  width: min(620px, 94vw);
  max-height: 86dvh;
  border: var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  padding: 0;
  box-shadow: 10px 10px 0 rgba(17,22,58,.5);
}
.lesson-dialog::backdrop { background: rgba(17,22,58,.55); }
.lesson-dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  background: var(--marigold);
  border-bottom: var(--line);
}
.lesson-dialog__head h2 { font-size: 1.3rem; }
.lesson-dialog__body { padding: 1.3rem 1.2rem 1.6rem; }
.lesson-dialog__body h3 { margin: 1.1rem 0 .4rem; font-size: 1.08rem; }
.lesson-dialog__body p { margin-bottom: .7rem; }
.lesson-dialog__body .btn { margin-top: 1.2rem; }
.quiz-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: var(--line);
  border-radius: var(--r-sm);
  padding: .7rem 1rem;
  font-weight: 600;
  margin-bottom: .6rem;
  transition: background .15s ease, transform .15s ease;
}
.quiz-opt:hover { transform: translate(-1px,-1px); }
.quiz-opt.ok { background: #DCF1E4; border-color: var(--henna); }
.quiz-opt.no { background: #FBE3DA; border-color: var(--vermillion); }

/* ---- interactive lesson checks ---- */
.lblk { margin: 0 0 .2rem; }
.lblk-tip {
  background: var(--paper-deep);
  border-left: 5px solid var(--marigold);
  border-radius: 10px;
  padding: .75rem .95rem;
  margin: .9rem 0;
  font-weight: 600;
}
.chk {
  background: var(--card);
  border: var(--line);
  border-radius: 14px;
  padding: .95rem 1.05rem;
  margin: 1.1rem 0;
  box-shadow: 4px 4px 0 rgba(29,36,82,.08);
}
.chk--pass { border-color: var(--henna); background: #F1FAF4; }
.chk__q { font-weight: 800; margin: 0 0 .75rem; line-height: 1.4; }
.chk__opts { display: flex; flex-direction: column; gap: .5rem; }
.chk-opt {
  text-align: left; width: 100%;
  background: var(--paper); border: var(--line); border-radius: 10px;
  padding: .65rem .9rem; font: inherit; font-weight: 600;
  transition: transform .12s ease, background .15s ease;
}
.chk-opt:hover:not(:disabled) { transform: translate(-1px,-1px); }
.chk-opt:disabled { cursor: default; opacity: .9; }
.chk-opt.is-ok { background: #DCF1E4; border-color: var(--henna); }
.chk-opt.is-no { background: #FBE3DA; border-color: var(--vermillion); }
.chk__fillrow { display: flex; gap: .5rem; }
.chk-fill {
  flex: 1; min-width: 0;
  border: var(--line); border-radius: 10px;
  padding: .6rem .8rem; font: inherit; font-weight: 600; background: var(--card);
}
.chk-fill:disabled { background: #F1FAF4; }
.chk__hint { font-size: .85rem; color: var(--ink-soft); margin: .55rem 0 0; }
.chk__pool { display: flex; flex-wrap: wrap; gap: .5rem; }
.chk-ord {
  background: var(--paper); border: var(--line); border-radius: 999px;
  padding: .5rem .95rem; font: inherit; font-weight: 700;
}
.chk-ord.is-picked { background: var(--ink); color: var(--card); }
.chk-ord__n {
  display: inline-grid; place-items: center;
  width: 1.35em; height: 1.35em; margin-right: .4em;
  background: var(--marigold); color: var(--ink-deep);
  border-radius: 999px; font-size: .78em;
}
.chk__fb { margin: .75rem 0 0; font-weight: 700; }
.chk__fb--ok { color: var(--henna); }
.chk__fb--no { color: var(--vermillion); }
.chk__fb--try { color: var(--ink); font-weight: 600; background: var(--paper-deep); padding: .7rem .9rem; border-radius: 10px; }
.chk__why { display: block; color: var(--ink-soft); font-weight: 600; margin-top: .35rem; }
.lblk-try {
  background: var(--paper-deep); border: 2px dashed var(--ink);
  border-radius: 14px; padding: .95rem 1.05rem; margin: 1.1rem 0;
}
.chk-try {
  width: 100%; border: var(--line); border-radius: 10px;
  padding: .6rem .8rem; font: inherit; resize: vertical; margin-bottom: .6rem;
}
.lesson-foot { margin-top: 1.5rem; }
.chk-progress { text-align: center; font-weight: 700; color: var(--ink-soft); margin: 0 0 .65rem; }
.btn--cert { background: var(--marigold); color: var(--ink-deep); border-color: var(--ink); }

/* read-aloud in progress (class set by speakText in learn.js) */
#lessonBody.is-reading #lessonListen {
  background: var(--marigold);
  animation: readpulse 1.6s ease-in-out infinite;
}
@keyframes readpulse {
  0%, 100% { box-shadow: 4px 4px 0 rgba(29,36,82,.92); }
  50%      { box-shadow: 4px 4px 0 rgba(29,36,82,.92), 0 0 0 6px rgba(247,168,35,.25); }
}
@media (prefers-reduced-motion: reduce) {
  #lessonBody.is-reading #lessonListen { animation: none; }
}

/* tiny celebration */
.confetti-dot {
  position: absolute; top: 6px; width: 9px; height: 9px; border-radius: 2px;
  background: var(--c, var(--marigold));
  animation: confetti-fall .82s ease-out forwards; pointer-events: none; z-index: 5;
}
@keyframes confetti-fall {
  0%   { opacity: 1; transform: translate(0,0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx,0), 130px) rotate(220deg); }
}

/* certificate dialog */
.cert-dialog {
  width: min(760px, 94vw);
  max-height: 92dvh;
  border: var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  padding: 1.1rem;
  box-shadow: 10px 10px 0 rgba(17,22,58,.5);
}
.cert-dialog::backdrop { background: rgba(17,22,58,.6); backdrop-filter: blur(3px); }
.cert-preview canvas { display: block; border-radius: 8px; box-shadow: 0 8px 24px rgba(29,36,82,.25); }
.cert-actions { display: flex; gap: .6rem; margin-top: 1rem; justify-content: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .confetti-dot { display: none; } }

/* guru chat */
.guru-wrap { display: flex; flex-direction: column; min-height: 62dvh; }
.guru-demo-chip {
  align-self: center;
  font-size: .78rem;
  font-weight: 700;
  background: var(--paper-deep);
  border: 1.5px dashed var(--ink);
  border-radius: 999px;
  padding: .25em .9em;
  margin-bottom: 1rem;
  color: var(--ink-soft);
}
.guru-model-card {
  align-self: center;
  display: flex;
  align-items: center;
  gap: .55em;
  font-size: .78rem;
  background: var(--cream, #FFFDF4);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(29,36,82,.9);
  padding: .4em .9em;
  margin: -.4rem 0 1rem;
  color: var(--ink-soft);
}
.guru-model-card b { color: var(--ink); font-family: var(--mono, monospace); }
.guru-model-card__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--henna, #1F7A4D);
  box-shadow: 0 0 0 3px rgba(31,122,77,.18);
  animation: guruPulse 2.2s ease-in-out infinite;
}
@keyframes guruPulse { 50% { box-shadow: 0 0 0 6px rgba(31,122,77,.07); } }
.guru-log { flex: 1; display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1rem; }
.guru-log .bubble { opacity: 1; transform: none; }
.guru-log .bubble--guru {
  background: var(--card);
  border: var(--line);
  color: var(--ink);
  box-shadow: 3px 3px 0 rgba(29,36,82,.6);
}
.guru-log .bubble--user { box-shadow: 3px 3px 0 rgba(29,36,82,.6); border: var(--line); }
.guru-log .typing i {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--ink-soft);
  animation: blink 1s infinite;
}
.guru-log .typing i:nth-child(2) { animation-delay: .2s; }
.guru-log .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: .25; } }

.guru-input {
  position: sticky;
  bottom: calc(86px + env(safe-area-inset-bottom));
  display: flex;
  gap: .6rem;
  background: var(--paper);
  padding-block: .5rem;
}
.guru-input input {
  flex: 1;
  font: inherit;
  font-weight: 600;
  padding: .8rem 1rem;
  border: var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  min-height: 50px;
}
.guru-input .btn { border-radius: 999px; padding-inline: 1.1em; }

/* profile */
.profile-ticket { padding: 1.4rem 1.6rem; margin-bottom: 1.6rem; }
.profile-ticket h2 { font-size: 1.6rem; }
/* the user's OWN sign-in email, shown under their name on their own ticket
   (self-only — the profile view is the signed-in user's own session). Lets a
   learner see which email their account uses. */
.profile-ticket__email { margin: .3rem 0 0; font-size: .92rem; font-weight: 600; color: var(--ink-soft); overflow-wrap: anywhere; }
.profile-rows { margin-top: 1rem; display: grid; gap: .55rem; }
.profile-rows div { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
.profile-rows dt { color: var(--ink-soft); font-size: .9rem; }
.profile-actions { display: grid; gap: .8rem; }

/* --- Tab bar --- */
.tabbar {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(560px, 94vw);
  display: flex;
  background: var(--ink);
  border: var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  z-index: 60;
  padding: .35rem;
}
.tabbar button,
.tabbar a {
  flex: 1;
  min-width: 0;                 /* allow equal cells to shrink so labels can ellipsize, never push neighbours */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  background: none;
  border: none;
  color: var(--paper);
  opacity: .65;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .04em;
  padding: .5rem .2rem .45rem;
  border-radius: 12px;
  transition: opacity .15s ease, background .15s ease;
  min-height: 54px;
}
.tabbar a { text-decoration: none; cursor: pointer; }   /* the Community tab is an <a>, not a <button> */
.tabbar button span,
.tabbar a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tabbar button svg,
.tabbar a svg { width: 22px; height: 22px; }
.tabbar button[aria-current="true"] {
  opacity: 1;
  background: var(--marigold);
  color: var(--ink-deep);
}
/* 6 tabs get tight on budget phones (<=360px): shrink the labels a touch so the
   existing five never clip. Wider phones keep the original .68rem look. */
@media (max-width: 360px) {
  .tabbar button,
  .tabbar a { font-size: .64rem; letter-spacing: .02em; padding-inline: .12rem; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .hero__sun { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .rv.in .bubble { animation: none; opacity: 1; transform: none; }
  .journey .now .j-dot { animation: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   contact — footer link, dialog form, honeypot
   (reuses .lang-dialog, .ob-field, .field-err, .btn primitives)
   ============================================================ */

/* footer "Contact us" link — sits in the foot row, looks like text */
.foot-contact {
  font: inherit;
  font-weight: 700;
  color: var(--paper);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--marigold);
  text-decoration-thickness: 2px;
}
.foot-contact:hover { color: var(--marigold-hi); }

/* dialog body copy */
.contact-intro {
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 1.3rem;
}
.contact-priv {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 1.1rem 0 .2rem;
}

/* textarea matches the .ob-field input look */
.contact-form textarea {
  width: 100%;
  font: inherit;
  font-weight: 600;
  padding: .85rem 1rem;
  border: var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 3px 3px 0 rgba(29, 36, 82, .08);
  resize: vertical;
  min-height: 110px;
}

/* honeypot — visually hidden, off-screen, ignored by AT and keyboard.
   Real users never see or tab to it; bots fill it and get dropped. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   mobile audit — budget Android (320px / 360px)
   Additive only: media queries + sizing. No DOM/class changes.
   ============================================================ */

/* --- tap targets: lift every interactive control to >= 44px --- */
/* mobile audit */
.btn--sm { min-height: 44px; }              /* was 40px */
.lang-btn { min-height: 44px; }             /* was 42px */
.lang-dialog__close,
.lesson-dialog__head .lang-dialog__close,
.checkout__head .lang-dialog__close {
  width: 44px; height: 44px;                /* was 40x40 */
}
.quiz-opt { min-height: 44px; }
.chk-opt,
.chk-fill,
.chk-fill-btn,
.chk-ord { min-height: 44px; }
.chk-ord { display: inline-flex; align-items: center; }
.lang-chip { min-height: 60px; }            /* already >= 44, kept explicit */
.tabbar button,
.tabbar a { min-height: 54px; }             /* already ok, kept explicit */
/* footer "Contact us" was a 0-padding inline target — give it real height */
.foot-contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- no horizontal overflow + wrapping on narrow screens --- */
@media (max-width: 480px) {
  /* mobile audit */

  /* long Hindi words must break instead of pushing the layout wider */
  body { overflow-wrap: break-word; word-break: break-word; }
  .hero h1,
  .site-foot__slogan,
  .chk__q,
  .course-card h3,
  .who-card h3,
  .track h3 { overflow-wrap: break-word; }

  /* fill-in-the-blank: input + Check button stack/wrap, never overflow */
  .chk__fillrow { flex-wrap: wrap; }
  .chk__fillrow .chk-fill { flex: 1 1 100%; }
  .chk__fillrow .chk-fill-btn { flex: 1 1 auto; }

  /* re-order pool chips already wrap (flex-wrap set); keep them tappable */
  .chk__pool { gap: .45rem; }

  /* hero ticket carries a rotation that can poke past the edge at 320px */
  .ticket--hero { transform: rotate(0.6deg); }

  /* certificate dialog + canvas must fit 320px; actions wrap */
  .cert-dialog { width: min(760px, 94vw); padding: .9rem; }
  .cert-actions { flex-wrap: wrap; }
  .cert-actions .btn { flex: 1 1 auto; }

  /* contact / lang / lesson dialog close button shouldn't crowd the title */
  .lang-dialog__head,
  .lesson-dialog__head,
  .checkout__head { gap: .6rem; }
}

@media (max-width: 360px) {
  /* mobile audit */
  /* single-column the language grids so 140-150px min never overflows 320px */
  .lang-grid { grid-template-columns: 1fr; }
  .lang-dialog .lang-grid { grid-template-columns: 1fr; }
  /* dialog action buttons go full width so labels never clip */
  .cert-actions .btn { flex: 1 1 100%; }
}

/* --- body text legibility: keep >= 15px on small screens --- */
@media (max-width: 480px) {
  /* mobile audit */
  body { font-size: 16px; }                 /* base stays comfortably > 15px */
  .chk__q { font-size: 1rem; }              /* readable question text */
  .chk__hint,
  .contact-priv,
  .lang-chip__name,
  .ticket__label,
  .chat-demo__note { font-size: max(.78rem, 12.5px); }
  /* form inputs >= 16px to stop iOS/Android zoom-on-focus jump */
  .ob-field input,
  .contact-form textarea,
  .chk-fill,
  .guru-input input { font-size: 16px; }
}

/* --- dialogs usable with the on-screen keyboard open --- */
/* mobile audit: dvh tracks the *visible* viewport so a raised keyboard
   doesn't push the submit button / inputs off-screen. */
.lang-dialog,
.contact-dialog,
.lesson-dialog,
.checkout-dialog { overflow: auto; }
@supports (max-height: 100dvh) {
  /* keep dialogs within the keyboard-shrunk viewport on small phones */
  @media (max-width: 480px) {
    .lang-dialog,
    .contact-dialog { max-height: 92dvh; }
    .lesson-dialog  { max-height: 90dvh; }
  }
}

/* --- sticky lesson foot: sane on small screens (no overlap, no clipping) --- */
@media (max-width: 480px) {
  /* mobile audit */
  .lesson-foot {
    position: sticky;
    bottom: 0;
    background: var(--paper);
    padding-top: .75rem;
    margin-top: 1.5rem;
    /* breathing room for safe-area + so content isn't hidden behind it */
    padding-bottom: calc(.4rem + env(safe-area-inset-bottom));
    z-index: 1;
  }
  .lesson-foot .btn { width: 100%; }
}

/* --- reduced motion: cover the animations grouped/touched above --- */
@media (prefers-reduced-motion: reduce) {
  /* mobile audit */
  .journey .now .j-dot { animation: none; }
  .confetti-dot { display: none; }
  .marquee__track { animation: none; }
}

/* ============================================================
   WAVE-1 ADDITIONS — header icons, library, bell, announcements,
   roadmap, ranks. Uses existing :root tokens. 320px-safe (wrap,
   no fixed widths); header stays one row on small phones.
   ============================================================ */

/* ---------------- header icon buttons (search + bell) ---------------- */
.head-icon-btn {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  line-height: 1;
  background: var(--card);
  border: var(--line);
  border-radius: 999px;
  box-shadow: 2px 2px 0 rgba(29, 36, 82, .9);
  cursor: pointer;
  transition: transform .15s ease;
}
.head-icon-btn:hover { transform: translate(-1px, -1px); }
.head-icon-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(29, 36, 82, .9); }

/* account avatar — persistent "you are signed in" cue in the app header,
   marigold so it stands apart from the other (cream) header buttons */
.acct-chip {
  flex: none;
  width: 44px; height: 44px;
  padding: 0;
  display: grid; place-items: center;
  background: var(--marigold);
  border: var(--line);
  border-radius: 999px;
  box-shadow: 2px 2px 0 rgba(29, 36, 82, .9);
  cursor: pointer;
  transition: transform .15s ease;
}
.acct-chip:hover { transform: translate(-1px, -1px); }
.acct-chip:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(29, 36, 82, .9); }
.acct-chip__ava { font-size: 1.05rem; font-weight: 800; color: var(--ink); line-height: 1; text-transform: uppercase; }
.bell-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 11px;
  height: 11px;
  background: var(--vermillion);
  border: 2px solid var(--card);
  border-radius: 50%;
}

/* keep the header on one row even on tiny screens */
@media (max-width: 480px) {
  .app-head__in { gap: .4rem; }
  .app-head .logo__name { display: none; }   /* stamp stays; full name hides */
}
@media (max-width: 360px) {
  .head-icon-btn { width: 40px; height: 40px; font-size: 1.05rem; }
  .acct-chip { width: 40px; height: 40px; }
  .streak-chip { padding: .3em .55em; }
}

/* ---------------- Library ---------------- */
.lib-xlink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .8rem 1rem;
  margin-bottom: 1.4rem;
  background: linear-gradient(150deg, var(--card) 60%, #FFF1D6);
  border: var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}
.lib-xlink span { min-width: 0; }
.lib-xlink .btn { flex: none; }

.lib-section-t {
  font-size: 1.15rem;
  font-weight: 800;
  font-family: var(--font-display);
  margin: 1.8rem 0 .9rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.lib-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .lib-grid { grid-template-columns: 1fr 1fr; } }

.lib-card {
  background: var(--card);
  border: var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.lib-card__top {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  flex-wrap: wrap;
}
.lib-card__name {
  font-size: 1.08rem;
  line-height: 1.25;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.lib-card__chips { display: flex; gap: .35rem; flex-wrap: wrap; flex: none; }
.lib-chip {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: .2em .6em;
  white-space: nowrap;
}
.lib-chip--free { background: var(--henna); color: var(--card); }
.lib-chip--pro  { background: #E3E8FB; color: var(--ink); }
.lib-card__desc { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; flex: 1; }
.lib-card__link { margin-top: .3rem; }

/* ---------------- announcements dialog (railway, like lesson dialog) ---------------- */
.ann-dialog .lesson-dialog__head { background: var(--peacock); }
.ann-dialog .lesson-dialog__head h2 { color: var(--card); }
/* the head is peacock here, so the ✕ must sit on a transparent button —
   otherwise the cream glyph on the default cream button is invisible
   (looks like a blank white square, though it still clicks). */
.ann-dialog .lesson-dialog__head .lang-dialog__close {
  color: var(--card);
  background: transparent;
  border-color: currentColor;
}
.ann-intro { color: var(--ink-soft); font-weight: 600; margin-bottom: 1rem; }
.ann-empty { color: var(--ink-soft); text-align: center; padding: 1.2rem 0; }
.ann-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ann-item {
  background: var(--card);
  border: var(--line);
  border-left: 6px solid var(--marigold);
  border-radius: var(--r-sm);
  padding: .9rem 1rem;
  box-shadow: 3px 3px 0 rgba(29, 36, 82, .7);
}
.ann-item__date {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--peacock);
}
.ann-item__t { margin: .25rem 0 .35rem; font-size: 1.05rem; line-height: 1.25; }
.ann-item__body { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }

.sub-block {
  margin-top: 1.6rem;
  padding: 1.1rem 1.1rem 1.2rem;
  background: linear-gradient(150deg, var(--card) 60%, #FFF1D6);
  border: var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}
.sub-block__t { margin: 0 0 .3rem; font-size: 1.1rem; }
.sub-block__s { margin: 0 0 .8rem; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.sub-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.sub-form input {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 16px;            /* no mobile zoom */
  padding: .6rem .8rem;
  border: var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
}
.sub-form .btn { flex: none; }

/* ---------------- home roadmap strip ---------------- */
.roadmap { margin-bottom: 1.8rem; }
.road-sub { margin-bottom: 1rem; }
.road-strip {
  display: flex;
  gap: .7rem;
  overflow-x: auto;
  padding: .25rem .25rem .6rem;
  margin: 0 -.25rem;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.road-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: .55rem;
  max-width: 14rem;
  text-align: left;
  background: var(--card);
  border: var(--line);
  border-radius: var(--r-sm);
  padding: .55rem .8rem;
  box-shadow: 3px 3px 0 rgba(29, 36, 82, .7);
  cursor: pointer;
  min-height: 44px;
}
.road-chip__n {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  font-weight: 800;
  font-size: .82rem;
}
.road-chip__body { display: flex; flex-direction: column; min-width: 0; }
.road-chip__t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11rem;
}
.road-chip__pct { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.road-chip.is-done .road-chip__n { background: var(--henna); color: var(--card); }
.road-chip.is-current {
  background: var(--marigold);
  border-width: 2.5px;
  box-shadow: 5px 5px 0 rgba(29, 36, 82, .92);
}
.road-chip.is-current .road-chip__pct { color: var(--ink-deep); }
.road-all { margin-top: .9rem; }

/* ---------------- home roadmap: iPod cover flow ---------------- */
.rmcf-stage {
  position: relative;
  height: 300px;
  margin: .4rem -.25rem 0;
  perspective: 1000px;
  perspective-origin: 50% 42%;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.rmcf-stage.is-drag { cursor: grabbing; }
.rmcf-lane { position: absolute; inset: 0; transform-style: preserve-3d; }
.rmcf {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 158px;
  height: 208px;
  margin: -118px 0 0 -79px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: .9rem .8rem;
  color: var(--ink);
  cursor: pointer;
  backface-visibility: hidden;
}
/* promote to a GPU layer only while actually moving, then release — no standing
   cost when idle on a budget phone's home screen */
.rmcf-stage.is-drag .rmcf { will-change: transform, opacity; }
/* the mirror is decorative and pixel-doubling: only the centre + neighbours get
   it, and reduced-motion / flat mode drops it entirely */
.rmcf.is-near { -webkit-box-reflect: below 7px linear-gradient(transparent 58%, rgba(29, 36, 82, .15)); }
.rmcf-stage.is-flat .rmcf { -webkit-box-reflect: none; }
.rmcf.snap { transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .45s ease; }
.rmcf__n {
  position: absolute;
  top: -13px;
  left: -13px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--ink);
  background: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .85rem;
}
.rmcf.is-done .rmcf__n { background: var(--henna); color: var(--card); }
.rmcf.is-current .rmcf__n { background: var(--marigold); }
.rmcf__ico { font-size: 2.6rem; line-height: 1; margin: .5rem 0 .45rem; }
.rmcf__t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.18;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  align-items: center;
  overflow: hidden;
}
.rmcf__lvl {
  margin-top: .45rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 2px solid var(--ink);
}
.rmcf__lvl--zero { background: var(--henna); }
.rmcf__lvl--basic { background: var(--peacock); }
.rmcf__lvl--mid { background: var(--marigold); color: var(--ink-deep); }
.rmcf__lvl--adv { background: #C23D1C; } /* darker than --vermillion so white label clears WCAG AA (≈5.3:1) */
.rmcf__pct {
  margin-top: .5rem;
  width: 78%;
  height: 7px;
  border-radius: 999px;
  background: var(--paper-deep);
  border: 1.5px solid var(--ink);
  overflow: hidden;
}
.rmcf__pct i { display: block; height: 100%; background: var(--henna); }
.rmcf-nav { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: .5rem; }
.rmcf-track { display: flex; align-items: center; justify-content: center; gap: .5rem; max-width: 100%; }
.rmcf-dots { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2px; max-width: 300px; }
.rmcf-dot { position: relative; width: 30px; height: 30px; padding: 0; border: none; background: transparent; cursor: pointer; display: grid; place-items: center; flex: none; border-radius: 50%; }
.rmcf-dot::before { content: ''; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--paper-deep); transition: transform .2s ease; }
.rmcf-dot.is-done::before { background: var(--henna); }
/* non-colour cue: a ✓ on done dots (shape, not just green) */
.rmcf-dot.is-done::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--card); pointer-events: none; }
/* non-colour cue: the recommended-next dot is a hollow ring, not a solid fill */
.rmcf-dot.is-current::before { background: var(--card); border-color: var(--marigold); border-width: 4px; box-shadow: 0 0 0 1.5px var(--ink); } /* dark edge so the marigold ring stays visible on the light page for low-vision */
/* where the wheel is currently parked */
.rmcf-dot.is-here::before { transform: scale(1.4); box-shadow: 0 0 0 3px rgba(247, 168, 35, .45); }
.rmcf-cta { min-width: 200px; margin-top: .15rem; background: #C23D1C; } /* darker than --vermillion so the white label clears WCAG AA */
.rmcf-arrow {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card);
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.rmcf-arrow:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(29, 36, 82, .92); }
.rmcf-now {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 380px) {
  .rmcf { width: 146px; margin-left: -73px; }
  .rmcf-stage { height: 288px; }
}
@media (prefers-reduced-motion: reduce) {
  .rmcf.snap { transition: none; }
}

/* ---------------- ranks ladder (profile) ---------------- */
.rank-card {
  background: var(--card);
  border: var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 1.3rem 1.4rem 1.4rem;
  margin-bottom: 1.6rem;
}
.rank-now { display: flex; align-items: center; gap: .9rem; }
.rank-now__badge {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  border: var(--line);
  border-radius: 14px;
  background: var(--marigold);
  transform: rotate(-4deg);
}
.rank-now__name { font-size: 1.35rem; line-height: 1.1; margin-top: .1rem; }
.rank-s { margin: .8rem 0 1rem; }
.rank-prog .progress { margin-bottom: .5rem; }
.rank-prog__nums { font-size: .88rem; font-weight: 700; color: var(--ink-soft); margin: 0; }
.rank-prog__max { font-weight: 700; color: var(--henna); margin: 0; }
.rank-ladder-t { margin-top: 1.4rem; }
.rank-ladder { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.rank-rung {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .7rem;
  border: 2px solid rgba(29, 36, 82, .18);
  border-radius: var(--r-sm);
  background: var(--paper);
  opacity: .6;
}
.rank-rung.is-got { opacity: 1; }
.rank-rung.is-current {
  background: var(--marigold);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 rgba(29, 36, 82, .8);
}
.rank-rung__ic { flex: none; font-size: 1.2rem; line-height: 1; }
.rank-rung__name { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.rank-rung__xp { flex: none; font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.rank-rung.is-current .rank-rung__xp { color: var(--ink-deep); }
.rank-rung__tick { flex: none; width: 1.1rem; text-align: center; color: var(--henna); font-weight: 800; }
.rank-note {
  margin: 1.2rem 0 0;
  font-size: .85rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ----- leaderboard (Top Yatris) — reuses the railway rank look ----- */
.lb { margin: .9rem 0 0; }
.lb-empty { margin: .4rem 0 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lb-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .7rem;
  border: 2px solid rgba(29, 36, 82, .18);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.lb-row.is-me {
  background: var(--marigold);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 rgba(29, 36, 82, .8);
}
.lb-row--gap {
  justify-content: center;
  border-style: dashed;
  opacity: .55;
  padding: .2rem;
  font-weight: 800;
  color: var(--ink-soft);
}
.lb-pos { flex: none; width: 1.8rem; text-align: center; font-weight: 800; font-size: 1rem; }
.lb-handle { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-handle em { font-style: normal; font-weight: 700; color: var(--henna); }
.lb-xp { flex: none; font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.lb-row.is-me .lb-xp { color: var(--ink-deep); }

/* onboarding field hint (under the @handle input) */
.field-hint { margin: .35rem 0 0; font-size: .8rem; color: var(--ink-soft); line-height: 1.4; }

/* ----- privacy notice (privacy.html) — readable long-form prose ----- */
.pp-prose { max-width: 760px; }
.pp-prose h2 { margin: 1.9rem 0 .55rem; font-size: 1.2rem; color: var(--ink); }
.pp-prose p { margin: 0 0 .85rem; line-height: 1.65; color: var(--ink); }
.pp-prose ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.pp-prose li { margin: 0 0 .5rem; line-height: 1.6; color: var(--ink); }
.pp-prose a { color: var(--henna); font-weight: 700; }
.pp-prose code { background: rgba(29,36,82,.07); padding: .05rem .35rem; border-radius: 5px; font-size: .92em; }
.pp-updated { font-size: .9rem; color: var(--ink-soft); }
.pp-cta { margin-top: 2.2rem; }

/* ============================================================
   Skill the Gap — command palette (Ctrl+K)
   Owned by js/search.js. Uses :root tokens from styles.css.
   Drop into styles.css or load as a separate stylesheet.
   ============================================================ */

.cmdk {
  width: min(620px, 94vw);
  max-height: 72dvh;
  margin-top: 9vh;          /* sit a little below the top, like a spotlight */
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
  box-shadow: 10px 10px 0 rgba(17, 22, 58, .5);
  overflow: hidden;
}
.cmdk::backdrop {
  background: rgba(17, 22, 58, .55);
  backdrop-filter: blur(3px);
}

.cmdk__box {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

/* search row */
.cmdk__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.cmdk__mag { font-size: 1.05rem; line-height: 1; flex: none; }
.cmdk__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;          /* never < 16px: stops mobile zoom */
  line-height: 1.4;
  padding: .35rem 0;
}
.cmdk__input::placeholder { color: var(--ink-soft); opacity: .85; }
.cmdk__input:focus { outline: none; }

/* results */
.cmdk__list {
  list-style: none;
  margin: 0;
  padding: .35rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.cmdk__row {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 44px;         /* tap target */
  padding: .5rem .7rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 2px solid transparent;
}
.cmdk__row.is-active {
  background: var(--marigold);
  border-color: var(--ink);
  color: var(--ink-deep);
}
.cmdk__ic {
  flex: none;
  width: 1.5rem;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1;
}
.cmdk__txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cmdk__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdk__sub {
  font-size: .82rem;
  color: var(--ink-soft);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdk__row.is-active .cmdk__sub { color: var(--ink-deep); opacity: .8; }

/* empty state */
.cmdk__empty {
  margin: 0;
  padding: 1.4rem 1.2rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: .95rem;
}

/* mobile: near-fullscreen sheet */
@media (max-width: 480px) {
  .cmdk {
    width: 96vw;
    max-height: 88dvh;
    margin-top: 6vh;
  }
  .cmdk__list { padding: .25rem; }
  .cmdk__label { font-size: 1.02rem; white-space: normal; }
}

/* ============================================================
   Skill the Gap — about.html (optional fragment)
   Append to css/styles.css if desired. Uses existing :root tokens.
   ============================================================ */

.about-hero .section__head h1 {
  margin-top: .2em;
}

.about-mission {
  max-width: 62ch;
  margin: 1.2rem auto 0;
}
.about-mission p {
  margin: 0 0 1rem;
  line-height: 1.7;
}

.about-slogan {
  margin-top: 1.4rem;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  color: var(--vermillion, #DE4A24);
  text-align: center;
}

/* what-you'll-find list — ticket-stub cards */
.about-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.about-list li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: .25rem 1rem;
  align-items: start;
  padding: 1.1rem 1.2rem;
  background: var(--cream, #FFFDF4);
  border: 1px solid rgba(29, 36, 82, .12);
  border-radius: 14px;
}
.about-list__ico {
  grid-row: 1 / span 2;
  font-size: 1.6rem;
  line-height: 1;
}
.about-list h3 {
  margin: 0;
  font-size: 1.05rem;
}
.about-list p {
  margin: .2rem 0 0;
  line-height: 1.6;
  font-size: .95rem;
}

.about-cta {
  text-align: center;
}
.about-cta .hero__ctas {
  justify-content: center;
  margin-top: 1.2rem;
}
.about-contact {
  max-width: 52ch;
  margin: 1.6rem auto 0;
  font-size: .9rem;
  opacity: .85;
}

/* ============================================================
   All-courses index  (#courses on the homepage)
   ------------------------------------------------------------
   The <ul> itself is GENERATED by tools/build-course-pages.mjs
   between the COURSE-INDEX markers in index.html. Before this,
   index.html linked to zero of the 17 course pages, so they were
   orphans — invisible to crawlers and to visitors alike.

   Bilingual without JS: js/i18n.js already sets <html lang>, so
   plain CSS shows the matching .lang-* span.
   ============================================================ */
#courses .ci-count {
  text-align: center;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
}
#courses .course-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
#courses .ci-link {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  height: 100%;
  padding: .9rem 1rem;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
#courses .ci-link:hover,
#courses .ci-link:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(29, 36, 82, .92);
}
#courses .ci-icon { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }
#courses .ci-txt  { flex: 1 1 auto; min-width: 0; }
#courses .ci-t {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
}
#courses .ci-s {
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: .15rem;
}
#courses .ci-meta {
  flex: 0 0 auto;
  font-size: .78rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: .8;
}

/* language visibility — EN by default, HI when <html lang="hi"> */
#courses .ci-t.lang-hi,
#courses .ci-s.lang-hi,
#courses .ci-count .lang-hi { display: none; }
#courses .ci-t.lang-en,
#courses .ci-s.lang-en { display: block; }
html[lang="hi"] #courses .ci-t.lang-en,
html[lang="hi"] #courses .ci-s.lang-en,
html[lang="hi"] #courses .ci-count .lang-en { display: none; }
html[lang="hi"] #courses .ci-t.lang-hi,
html[lang="hi"] #courses .ci-s.lang-hi { display: block; }
html[lang="hi"] #courses .ci-count .lang-hi { display: inline; }

@media (prefers-reduced-motion: reduce) {
  #courses .ci-link { transition: none; }
  #courses .ci-link:hover,
  #courses .ci-link:focus-visible { transform: none; }
}