/* Dubashi Learn — course pages (tools/seo_pages.dart). Brand tokens, spec §8.1. */
:root {
  --paper:#EFE4CE; --card:#FBF6EB; --well:#F5ECD6; --line:#D9C7A2; --soft:#E8DBBE;
  --ink:#1A140C; --ink2:#3D2F22; --muted:#7A6852; --faint:#A8987C;
  --terra:#B8482C; --terra-d:#9C3B22; --saffron:#E3A23C; --gold:#8A6E3F;
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --deva:'Noto Sans Devanagari','Hanken Grotesk',sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:72px; }
body { margin:0; background:var(--paper); color:var(--ink); font:16.5px/1.6 var(--sans); }
[lang="hi"] { font-family:var(--deva); }
a { color:var(--terra); }
h1,h2,h3 { font-family:var(--serif); font-weight:600; color:var(--ink); }
h1 { font-size:clamp(30px,6.4vw,44px); line-height:1.12; margin:6px 0 10px; letter-spacing:-.01em; }
h2 { font-size:clamp(22px,4.6vw,28px); line-height:1.2; margin:0 0 8px; }
h3 { font-size:18px; margin:0 0 4px; }
p { margin:0; }
main { max-width:780px; margin:0 auto; padding:0 18px 120px; }
main > section { margin-top:40px; }
svg { width:16px; height:16px; fill:currentColor; }

/* top bar */
.top { position:sticky; top:0; z-index:20; background:rgba(239,228,206,.94); backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line); }
.top-in { max-width:1040px; margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:14px; }
.logo { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); }
.logo img { border-radius:8px; }
.logo span { font:600 18px var(--serif); }
.menu { margin-left:auto; display:flex; gap:4px; align-items:center; }
.menu a { text-decoration:none; color:var(--ink2); font-weight:500; font-size:15px; padding:7px 10px; border-radius:999px; }
.menu a:hover { background:var(--well); }
.menu .menu-dl { background:var(--terra); color:#fff; padding:7px 14px; }
@media (max-width:620px) {
  .logo span { display:none; }
  .menu { gap:0; } .menu a { padding:7px 8px; font-size:14.5px; }
  .menu .menu-dl { padding:7px 11px; }
}

/* hero */
.hero { padding-top:22px; }
.crumbs { font-size:13.5px; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap; }
.crumbs a { text-decoration:none; }
.eyebrow { margin-top:18px; color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.hi-title { font-size:18px; color:var(--ink2); }
.hi-title em { color:var(--muted); }
.lede { margin-top:12px; color:var(--ink2); font-size:17px; max-width:640px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--terra); color:#fff;
  font:600 15.5px var(--sans); text-decoration:none; border:0; border-radius:999px; padding:13px 22px; cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.08); }
.btn:hover { background:var(--terra-d); }
.btn-ghost { background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.btn-ghost:hover { background:var(--well); }
.btn-ghost svg { color:var(--terra); }
.play-all.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.play-all.on svg { color:#fff; }
@media (max-width:620px) { .hero-actions .btn { width:100%; } }

/* cards and text */
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; }
.label { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.roman { color:var(--muted); font-size:14px; font-style:italic; margin-top:2px; }
.how { color:var(--muted); font-size:15px; margin-bottom:14px; }
.situation p[lang="hi"] { font-size:17px; }

/* conversation */
.line { display:flex; flex-direction:column; align-items:flex-start; margin:14px 0; transition:opacity .2s; }
.line.you { align-items:flex-end; }
.line .who { font-size:12.5px; font-weight:700; color:var(--gold); margin:0 6px 4px; letter-spacing:.04em; }
.line.you .who { color:var(--terra); }
.bubble { max-width:92%; background:var(--card); border:1px solid var(--line); border-radius:18px 18px 18px 6px; padding:12px 14px; }
.line.you .bubble { background:#FFF4EC; border-color:#E9C7B6; border-radius:18px 18px 6px 18px; }
.line.active .bubble { border-color:var(--saffron); box-shadow:0 0 0 3px rgba(227,162,60,.28); }
body.playing .line:not(.active) { opacity:.45; }
.en { display:flex; gap:10px; align-items:flex-start; font:500 19px/1.35 var(--serif); color:var(--ink); }
.sound { font-size:16.5px; color:var(--ink2); margin-top:6px; }
.meaning { font-size:15.5px; color:var(--ink2); margin-top:4px; }
.tip { margin-top:10px; font-size:14.5px; color:var(--ink2); background:var(--well); border-radius:12px; padding:9px 11px;
  display:flex; gap:10px; align-items:flex-start; }
.turn { margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:var(--saffron); color:var(--ink); border-radius:12px; padding:10px 12px; font-weight:700; }
.turn[hidden] { display:none; }
.turn-go { background:var(--ink); color:#fff; border:0; border-radius:999px; padding:8px 16px; font:600 14.5px var(--sans); cursor:pointer; }
button.play { flex:0 0 36px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:#fff;
  color:var(--terra); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
button.play svg { width:14px; height:14px; margin-left:2px; }
button.play.on { background:var(--terra); color:#fff; border-color:var(--terra); animation:pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 6px rgba(184,72,44,.18); } }

/* patterns */
.pattern { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; margin:12px 0; }
.frame { font:600 20px var(--serif); }
.frame + .meaning { margin-top:4px; }
ul.phrases, ul.scenes, ul.sentences, ul.ticks { list-style:none; margin:0; padding:0; }
ul.phrases { margin-top:12px; border-top:1px solid var(--soft); }
ul.phrases li { display:grid; grid-template-columns:36px 1fr; gap:2px 10px; padding:10px 0; border-bottom:1px solid var(--soft); }
ul.phrases li .en { font-size:17px; align-self:center; display:block; }
ul.phrases li .slot { grid-column:2; font-size:14px; color:var(--muted); }
.more { margin-top:10px; font-size:14.5px; color:var(--muted); font-style:italic; }

/* notes */
.note { padding:12px 0; border-top:1px solid var(--soft); }
.note p[lang="hi"] { display:flex; gap:10px; align-items:flex-start; font-size:16px; }
.note .roman { padding-left:46px; }

/* CTA card */
.cta-card { background:linear-gradient(160deg,#2E3A59 0%,#3A3550 100%); color:#F5ECD6; border-radius:22px; padding:24px 20px; text-align:center; }
.cta-card h2 { color:#FBF6EB; }
.cta-card .ticks { text-align:left; max-width:440px; margin:14px auto 18px; }
.cta-card .ticks li { padding-left:26px; position:relative; margin:8px 0; color:#E8DBBE; }
.cta-card .ticks li::before { content:'✓'; position:absolute; left:0; color:var(--saffron); font-weight:700; }
.cta-card .small { margin-top:10px; font-size:13px; color:#C9BBA0; }

/* pager */
.pager { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px; }
.pager a { display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; text-decoration:none; color:var(--ink); font-weight:600; }
.pager a:last-child { text-align:right; }
.pager small { display:block; color:var(--muted); font-weight:500; font-size:12.5px; }

/* hub */
.ladder-demo { margin-top:24px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; max-width:460px; }
.ladder-demo .keys { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.ladder-demo .keys span { font-size:12px; background:var(--well); color:var(--muted); border-radius:999px; padding:3px 9px; }
ul.scenes { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:640px) { ul.scenes { grid-template-columns:1fr 1fr; } }
.scene-card { display:grid; grid-template-columns:40px 1fr; gap:1px 10px; height:100%; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:14px; text-decoration:none; color:inherit; transition:transform .12s, border-color .12s; }
.scene-card:hover { transform:translateY(-1px); border-color:var(--terra); }
.scene-card .n { grid-row:span 4; font:600 22px var(--serif); color:var(--saffron); }
.scene-card .t { font:600 18px/1.3 var(--serif); color:var(--ink); }
.scene-card .hi { color:var(--ink2); font-size:15px; }
.scene-card .q { color:var(--muted); font-size:14.5px; font-style:italic; }
.scene-card .tag { justify-self:start; margin-top:6px; font-size:12px; font-weight:600; color:var(--gold); background:var(--well); border-radius:999px; padding:2px 9px; }
.sentences-teaser .btn { margin-top:14px; }
.steps { display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px; }
@media (min-width:640px) { .steps { grid-template-columns:repeat(3,1fr); } }
.step { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; }
.step span { display:inline-flex; width:28px; height:28px; border-radius:50%; background:var(--terra); color:#fff; font-weight:700;
  align-items:center; justify-content:center; margin-bottom:8px; }
.step p { color:var(--ink2); font-size:15px; }
.shots { display:flex; gap:14px; justify-content:center; margin-top:20px; }
.phone { width:min(42vw,190px); border:7px solid var(--ink); border-radius:26px; overflow:hidden; background:var(--ink); }
.phone img { display:block; width:100%; height:auto; }

/* sentences page */
.toc { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.toc a { font-size:13.5px; text-decoration:none; color:var(--ink2); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 11px; }
.group h2 span { display:block; font:400 16px var(--deva); color:var(--muted); margin-top:2px; }
ul.sentences li { display:grid; grid-template-columns:36px 1fr; gap:10px; padding:12px 0; border-bottom:1px solid var(--soft); }
ul.sentences .en { font-size:18px; display:block; }
.see { margin-top:10px; font-size:14.5px; } .see a { text-decoration:none; font-weight:600; }

/* guide */
.guide h2 { margin-top:28px; }
.guide p { margin-top:8px; color:var(--ink2); font-size:17px; }
.guide .lede { font-size:18px; }
.guide .say { margin:12px 0; }
.guide .say .bubble p { margin-top:2px; }
.pdf-dl { margin-top:16px; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:12px; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; }
.pdf-dl p { margin:0; color:var(--ink2); font-size:15px; flex:1 1 260px; }
.post-list { list-style:none; padding:0; margin:12px 0; display:grid; gap:10px; }
.post-list li { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.post-list a { text-decoration:none; }
.post-list p { margin:4px 0 0; }
.post-meta { color:var(--muted); font-size:13.5px; margin-top:8px; }
.pair-grid { margin-top:18px; }
.pair-card h3 { margin:8px 0 4px; }
.pair-main { display:block; text-decoration:none; color:inherit; }
.pair-sub { list-style:none; margin:10px 0 0; padding:10px 0 0; border-top:1px solid var(--soft); display:flex; flex-wrap:wrap; gap:4px 16px; font-size:15px; }
.finder button, .finder input { font:inherit; }
.pair-icon { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--saffron); color:#1A140C; font-weight:700; }
.pair-go { display:inline-block; margin-top:8px; color:var(--terra); font-weight:600; }
.draft-banner { background:#C53A2A; color:#fff; text-align:center; font-weight:700; padding:6px; font-size:14px; }

/* Part 2 blocks */
.start-here { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:640px) { .start-here { grid-template-columns:repeat(2,1fr); } }
.card.start { text-decoration:none; color:inherit; display:block; }
.card.start:hover { border-color:var(--terra); }
.card.start p { color:var(--ink2); font-size:15px; }
.toc b { color:var(--terra); font-weight:600; margin-left:2px; }
.convo-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.convo-head h3 { font-size:20px; }
section.convo + section.convo { border-top:1px solid var(--line); padding-top:24px; }
.spaced { margin-top:12px; }
.step p[lang="hi"] { color:var(--ink); margin-bottom:6px; }
.features { display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px; }
@media (min-width:640px) { .features { grid-template-columns:1fr 1fr; } }
.feature { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; }
.feature p { color:var(--ink2); font-size:15.5px; }
ul.ticks.plain li { padding-left:26px; position:relative; margin:8px 0; color:var(--ink2); }
ul.ticks.plain li::before { content:'✓'; position:absolute; left:0; color:var(--terra); font-weight:700; }
.scene-card.small { display:block; padding:12px 14px; }
.cta-gap { margin:0 0 16px; }
@media (max-width:520px) { .hide-sm { display:none; } }

/* footer */
.foot { border-top:1px solid var(--line); background:var(--well); margin-top:56px; }
.foot-in { max-width:780px; margin:0 auto; padding:26px 18px 110px; text-align:center; }
.trust { color:var(--ink2); font-size:14.5px; max-width:560px; margin:0 auto; }
.links { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.links a { text-decoration:none; font-weight:600; font-size:14.5px; }
.foot .small { margin-top:12px; font-size:12.5px; color:var(--muted); }

/* sticky download bar (phones) */
.sticky-dl { position:fixed; left:0; right:0; bottom:0; z-index:30; display:none; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(251,246,235,.97); border-top:1px solid var(--line);
  box-shadow:0 -6px 18px rgba(26,20,12,.08); }
.sticky-dl span { font-weight:600; font-size:14.5px; color:var(--ink); }
.sticky-dl .btn { padding:10px 18px; font-size:15px; }
@media (max-width:760px) { .sticky-dl { display:flex; } }
@media (min-width:761px) { .foot-in { padding-bottom:40px; } main { padding-bottom:60px; } }