/* Akshar: pages for parents (landing, welcome, progress, privacy, terms). The look comes from the landing page:
   warm paper, deep indigo ink, the chalk slate in a wooden frame, marigold for the one action. Solid fills only. */
:root {
  --paper: #F5EDE0;
  --ink: #1E2452;
  --ink-soft: #4B4F72;
  --slate: #1B2048;
  --slate-raised: #262C5E;
  --chalk: #F3EBDD;
  --chalk-soft: #C9C6D6;
  --marigold: #E9A23B;
  --marigold-deep: #D48C22;
  --terracotta: #B5532F;
  --terracotta-ink: #A4482A;
  --wood: #8E4B2E;
  --rule: #DCCFB9;
  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Hind", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --script-te: "Tiro Telugu", "Noto Serif Telugu", "Kohinoor Telugu", "Telugu Sangam MN", serif;
  --script-hi: "Tiro Devanagari Hindi", "Noto Serif Devanagari", "Kohinoor Devanagari", "Devanagari Sangam MN", serif;
  --script-font: serif; /* set from config.languages for the child's language */
}

/* Price versions: both are in the markup; the root attribute picks one before the first paint. */
html[data-price="99"] .p49 { display: none !important; }
html:not([data-price="99"]) .p99 { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-variant-numeric: lining-nums;
}
p { margin: 0; }
a { color: inherit; }
[lang="te"] { font-family: var(--script-te); }
[lang="hi"] { font-family: var(--script-hi); }
.script { font-family: var(--script-font); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1160px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.narrow { max-width: 600px; }

/* Header */
.top { padding-top: 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.mark {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.top-link { font-size: 15px; color: var(--ink-soft); text-underline-offset: 3px; }

/* ---------- Landing ---------- */
.hero { padding-top: 26px; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(29px, 8.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0;
}
.hero h1 .after { display: block; color: var(--terracotta); margin-top: 4px; }
.sub { font-size: 19px; line-height: 1.45; color: var(--ink-soft); margin-top: 14px; max-width: 30em; }

/* Video slot: a child's practice slate in a wooden frame. Without a video file it is simply art. */
.video { margin: 26px 0 0; }
.video figure { margin: 0; }
.poster {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--wood);
  color: var(--chalk);
  font: inherit;
  text-align: left;
}
.has-video .poster { cursor: pointer; }
.slate-art {
  position: absolute;
  top: 7px; right: 7px; bottom: 7px; left: 7px;
  border-radius: 8px;
  background: var(--slate);
  overflow: hidden;
  container-type: size;
}
.line { position: absolute; left: 0; right: 0; height: 1px; background: var(--chalk); opacity: 0.16; }
.line.l1 { top: 14%; }
.line.l2 { top: 64%; }
.line.l3 { top: 88%; }
.glyph, .practice { position: absolute; line-height: 1; color: var(--chalk); white-space: nowrap; }
/* Measured ink (Tiro, line-height 1): Telugu ink 0.235em to 0.775em, baseline 0.76em;
   Devanagari head bar starts at 0.127em, ink ends at 0.77em. */
.glyph[lang="te"] { left: 6.5%; top: -7.8%; font-size: 92.6cqh; }
.glyph[lang="hi"] { left: 7.5%; top: 1.5%; font-size: 81cqh; }
.practice { opacity: 0.5; letter-spacing: 0.32em; }
.practice[lang="te"] { left: 9.4%; top: 73.6%; font-size: 19cqh; }
.practice[lang="hi"] { left: 8.8%; top: 75.8%; font-size: 16cqh; }
/* Without a video the art fills the space the play button would take: a second, smaller letter on the line. */
.glyph2 { position: absolute; line-height: 1; color: var(--chalk); opacity: 0.32; white-space: nowrap; }
.glyph2[lang="te"] { left: 58%; top: 12.6%; font-size: 56cqh; }
.glyph2[lang="hi"] { left: 59%; top: 18.6%; font-size: 49cqh; }
.has-video .glyph2 { display: none; }
.play {
  position: absolute;
  right: 9%;
  top: 39%;
  width: 30cqh;
  height: 30cqh;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--marigold);
  color: var(--slate);
  display: none;
  place-items: center;
}
.has-video .play { display: grid; }
.play svg { width: 40%; height: 40%; margin-left: 9%; }
@supports not (font-size: 1cqh) {
  .glyph[lang="te"] { font-size: min(44.5vw, 272px); }
  .glyph[lang="hi"] { font-size: min(39vw, 238px); }
  .glyph2[lang="te"] { font-size: min(27vw, 164px); }
  .glyph2[lang="hi"] { font-size: min(23.6vw, 144px); }
  .practice[lang="te"] { font-size: min(9.1vw, 56px); }
  .practice[lang="hi"] { font-size: min(7.7vw, 47px); }
  .play { width: min(14.4vw, 88px); height: min(14.4vw, 88px); }
}
@supports not (aspect-ratio: 16 / 9) {
  .poster { height: 0; padding-top: 56.25%; }
}
.video figcaption { margin-top: 9px; font-size: 14px; color: var(--ink-soft); display: none; }
.has-video .video figcaption { display: block; }
.video video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: var(--slate); }

/* The three lines, marked with the script's own first letters like a primer's a, b, c */
.points { margin: 44px 0 0; padding: 0; list-style: none; }
.points li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.points li:last-child { border-bottom: 1px solid var(--rule); }
.points .mk { font-size: 28px; line-height: 1; color: var(--terracotta); }
.points .mk[lang="te"] { font-size: 34px; }
.points .lead { font-family: var(--serif); font-size: 19px; color: var(--ink); }

/* Offer */
.offer {
  margin: 40px 0 0;
  padding: 26px 20px 24px;
  background: var(--slate);
  color: var(--chalk);
  border-radius: 18px;
}
.offer-label { font-weight: 600; font-size: 16px; color: var(--marigold); }
.offer-price { font-family: var(--serif); font-size: 23px; line-height: 1.2; margin-top: 4px; }
.offer-price .amount { display: block; font-size: 64px; line-height: 1; letter-spacing: -0.02em; margin: 2px 0 6px; }
.offer-terms { margin-top: 10px; font-size: 17px; line-height: 1.45; color: var(--chalk-soft); }
.offer-hours { margin-top: 6px; font-size: 17px; line-height: 1.45; color: var(--chalk); }
.cta, .btn {
  display: block;
  width: 100%;
  min-height: 60px;
  margin-top: 22px;
  padding: 14px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--marigold);
  color: var(--slate);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.cta:active, .btn:active { transform: translateY(1px); }
.btn[disabled] { background: var(--rule); color: var(--ink-soft); cursor: not-allowed; transform: none; }
.note { margin-top: 12px; font-size: 16px; color: var(--marigold); font-weight: 500; }
.note:empty { display: none; }
.offer-fine { margin-top: 16px; font-size: 14px; color: var(--chalk-soft); }
.offer-fine a { color: var(--chalk); }

/* FAQ */
.faq { margin-top: 48px; }
.qa { padding: 18px 0; border-top: 1px solid var(--rule); }
.qa:last-child { border-bottom: 1px solid var(--rule); }
.qa h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.25; margin: 0 0 6px; }
.qa p { color: var(--ink-soft); }

/* Footer */
.foot { margin-top: 48px; padding-top: 22px; padding-bottom: 40px; font-size: 15px; color: var(--ink-soft); }
.foot .links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot .links a { color: var(--ink); }

@media (hover: hover) {
  .has-video .poster:hover .play, .cta:hover, .btn:not([disabled]):hover { background: var(--marigold-deep); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .wrap { max-width: 680px; }
}
@media (min-width: 900px) {
  .wrap { padding-left: 40px; padding-right: 40px; }
  .top { padding-top: 28px; }
  .mark { font-size: 32px; }
  .hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; padding-top: 48px; }
  .hero h1 { font-size: 54px; }
  .sub { font-size: 21px; margin-top: 20px; }
  .video { margin: 0; }
  .slate-art { top: 10px; right: 10px; bottom: 10px; left: 10px; border-radius: 9px; }
  .lower { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; margin-top: 72px; }
  .points { margin-top: 0; }
  .points li { grid-template-columns: 54px minmax(0, 1fr); padding: 24px 0; font-size: 18.5px; }
  .points .mk { font-size: 32px; }
  .points .mk[lang="te"] { font-size: 39px; }
  .points .lead { font-size: 21px; }
  .offer { margin-top: 0; padding: 32px 32px 30px; }
  .faq { margin-top: 72px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
  .qa, .qa:last-child { border-bottom: 0; padding: 22px 0 18px; }
  .qa h3 { font-size: 22px; margin-bottom: 10px; }
  .foot { margin-top: 72px; }
  .narrow { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Welcome, progress and the small pages ---------- */
.page { padding-top: 28px; padding-bottom: 8px; }
.kicker { font-size: 15px; font-weight: 600; color: var(--terracotta-ink); letter-spacing: 0.01em; }
.title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 8px 0 0;
}
.lede { margin-top: 12px; font-size: 18.5px; line-height: 1.45; color: var(--ink-soft); }

.consent {
  margin-top: 24px;
  padding: 20px 18px;
  background: var(--slate);
  color: var(--chalk);
  border-radius: 16px;
}
.consent label { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; font-size: 18px; line-height: 1.45; }
.consent input[type="checkbox"] { width: 28px; height: 28px; margin: 2px 0 0; accent-color: var(--marigold); cursor: pointer; }
.consent .agree { display: block; margin-top: 10px; color: var(--chalk); font-weight: 600; }
.small { font-size: 15px; color: var(--ink-soft); margin-top: 14px; }
.small a { color: var(--ink); }

.field { margin-top: 22px; }
.field > label, .field > .label { display: block; font-weight: 600; font-size: 17px; margin-bottom: 8px; }
.input {
  display: block;
  width: 100%;
  height: 58px;
  padding: 0 16px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 20px;
}
.input::placeholder { color: #7D7A8C; }
.ages { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.optional { font-weight: 400; color: var(--ink-soft); }
.ages legend { padding: 0; font-weight: 600; font-size: 17px; margin-bottom: 8px; }
.age { position: relative; }
.age input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.age span {
  display: grid;
  place-items: center;
  height: 58px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  background: transparent;
}
.age input:checked + span { background: var(--slate); color: var(--chalk); border-color: var(--slate); }
.age input:focus-visible + span { outline: 3px solid var(--marigold); outline-offset: 3px; }
.field-error { margin-top: 8px; color: var(--terracotta-ink); font-size: 15.5px; }
.langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.langs legend { padding: 0; font-weight: 600; font-size: 17px; margin-bottom: 8px; }
.langs .age span { font-family: var(--sans); font-size: 18px; font-weight: 500; }

.warn {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1.5px solid var(--terracotta);
  border-radius: 12px;
  color: var(--terracotta-ink);
  font-size: 16px;
  line-height: 1.45;
}
.ready-board { margin-top: 22px; background: var(--wood); border-radius: 16px; padding: 8px; }
.ready-board .slate-art { position: relative; inset: auto; height: 150px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 0.5em; }
.ready-board .big { color: var(--chalk); font-size: 92px; line-height: 1; }
.ready-board .big + .big { opacity: 0.55; }
.btn-ghost {
  display: inline-block;
  min-height: 48px;
  margin-top: 10px;
  padding: 10px 18px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16.5px;
  cursor: pointer;
}
@media (hover: hover) { .btn-ghost:hover { background: var(--ink); color: var(--chalk); } }

/* Another device: the lessons link and its QR code */
.device { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule); }
/* On /parents the learned list already ends on a rule: no second one above the device section. */
.learned:not(:empty) + .empty[hidden] + .device { margin-top: 0; border-top: 0; }
.device-title { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; margin: 0; }
.device-lede { margin-top: 8px; color: var(--ink-soft); }
.device-row { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.qr { display: block; flex: 0 0 auto; width: 184px; height: 184px; border: 1.5px solid var(--rule); border-radius: 12px; background: #FFFFFF; }
.device-link { flex: 1 1 220px; min-width: 0; }
.device-label { display: block; font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.link-input { font-size: 15px; height: 50px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: #FFFFFF; }

.btn-text {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Progress page */
.week-row { display: flex; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.week-row li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.week-row i { display: block; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--rule); }
.week-row li.on i { background: var(--marigold); box-shadow: none; }
.week-row li.today i { box-shadow: inset 0 0 0 2px var(--ink); }
.week-row li.today.on i { box-shadow: inset 0 0 0 2px var(--wood); }
.stat-list { margin: 22px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.stat-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.stat-list dt { font-size: 17px; color: var(--ink-soft); }
.stat-list dd { margin: 0; font-family: var(--serif); font-size: 24px; color: var(--ink); text-align: right; }
.stat-list dd small { display: block; font-family: var(--sans); font-size: 14.5px; color: var(--ink-soft); }
.stats { margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat { padding: 16px 10px 14px 0; }
.stat + .stat { border-left: 1px solid var(--rule); padding-left: 14px; }
.stat dt { font-size: 15px; color: var(--ink-soft); line-height: 1.3; }
.stat dd { margin: 4px 0 0; font-family: var(--serif); font-size: 38px; line-height: 1.05; color: var(--ink); }
.stat dd small { display: block; font-family: var(--sans); font-size: 14.5px; color: var(--ink-soft); margin-top: 4px; }
.section-title { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; margin: 40px 0 0; }
.learned { list-style: none; margin: 10px 0 0; padding: 0; }
.learned > li { padding: 16px 0; border-top: 1px solid var(--rule); }
.learned > li:last-child { border-bottom: 1px solid var(--rule); }
.learned .day { font-size: 15px; font-weight: 600; color: var(--terracotta-ink); }
.learned .letters { margin-top: 2px; font-size: 40px; line-height: 1.25; color: var(--ink); }
.learned .letters span + span { margin-left: 0.4em; }
.learned .words { margin: 6px 0 0; padding: 0; list-style: none; color: var(--ink-soft); }
.learned .words li { padding: 2px 0; }
.learned .words [lang] { font-size: 21px; color: var(--ink); margin-right: 6px; }
.empty { margin-top: 26px; padding: 20px 18px; border: 1.5px solid var(--rule); border-radius: 16px; color: var(--ink-soft); }
.next-box { margin-top: 32px; padding: 22px 20px; background: var(--slate); color: var(--chalk); border-radius: 16px; }
.next-box .nb-label { font-weight: 600; color: var(--marigold); font-size: 16px; }
.next-box .nb-title { font-family: var(--serif); font-size: 24px; line-height: 1.2; margin-top: 4px; }
.next-box .btn { margin-top: 16px; }
.contact { margin-top: 32px; font-size: 18px; }
.danger-zone { margin-top: 28px; }
.danger-zone .btn-text { color: var(--terracotta-ink); }
.confirm { margin-top: 10px; padding: 14px 16px; border: 1.5px solid var(--terracotta); border-radius: 12px; }
.confirm p { color: var(--ink); }
.confirm .row { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 8px; }
.btn-danger {
  min-height: 48px;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--terracotta);
  color: var(--chalk);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16.5px;
  cursor: pointer;
}

/* Privacy and Terms */
.doc { padding-top: 28px; }
.doc h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 8vw, 44px); line-height: 1.1; margin: 0; }
.doc .updated { margin-top: 8px; font-size: 15px; color: var(--ink-soft); }
.doc h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; margin: 30px 0 0; }
.doc p, .doc li { font-size: 17.5px; line-height: 1.55; color: var(--ink); }
.doc p { margin-top: 10px; }
.doc ul { margin: 10px 0 0; padding-left: 1.2em; }
.doc li + li { margin-top: 6px; }
@media (min-width: 900px) {
  .page, .doc { padding-top: 44px; }
  .consent { padding: 24px 24px; }
}