/* ============================================================================
   RAVITRA · /learn — long-form explainer articles (SEO / AEO / GEO surface).
   Shared stylesheet for the /learn index + every /learn/<slug> article.
   Self-contained, no CDN JS, no build. Cosmos design tokens mirror the
   homepage (static/site/index.html) so /learn reads as the same product.
   Served by routers/marketing.py at GET /learn/learn.css.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700&family=Tiro+Devanagari+Hindi:ital@0;1&display=swap');

:root{
  --ink-0:#070A1C; --ink-1:#0C1130; --ink-2:#161C42; --ink-3:#1E2658;
  --line:rgba(200,196,255,0.12);
  --cream:#F3EEE1; --cream-2:#DBD5C6; --mist:#A9ABCE; --mist-2:#8B8FBB;
  --gold:#E7B873; --gold-bright:#F6DDA6; --gold-deep:#C9974B;
  --peri:#8E93C8; --peri-bright:#B9BEEC;
  --serif:'Spectral',Georgia,serif;
  --sans:'Hanken Grotesk',-apple-system,system-ui,sans-serif;
  --deva:'Tiro Devanagari Hindi','Spectral',serif;
  --maxw:720px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;}
body{
  font-family:var(--sans); color:var(--cream); background:#070914;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; line-height:1.65;
}
.page-bg{position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(125% 85% at 50% -5%, #0C1024 0%, #070914 55%, #050610 100%);}
a{color:var(--gold); text-decoration:none; transition:color .25s;}
a:hover{color:var(--gold-bright);}
a:focus-visible, button:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px; border-radius:8px;}
img,svg{display:block; max-width:100%;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}

/* ── top bar ─────────────────────────────────────────────────────────── */
.topbar{border-bottom:1px solid var(--line); padding:18px 0;}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{font-family:var(--serif); font-weight:600; font-size:20px; color:var(--cream); letter-spacing:.01em;}
.brand .dv{font-family:var(--deva); font-weight:400; color:var(--gold); margin-left:8px; font-size:18px;}
.topbar nav a{font-family:var(--sans); font-weight:600; font-size:14px; color:var(--mist); margin-left:20px;}
.topbar nav a:hover{color:var(--gold-bright);}

/* ── shared type ─────────────────────────────────────────────────────── */
.kicker{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);}
.crumb{font-family:var(--sans); font-size:13px; color:var(--mist-2); margin:34px 0 8px;}
.crumb a{color:var(--mist);}

h1.title{font-family:var(--serif); font-weight:500; color:var(--cream);
  font-size:clamp(29px,5.2vw,44px); line-height:1.14; letter-spacing:-.012em; margin:6px 0 0;}
.dek{font-family:var(--serif); font-size:clamp(17px,2.4vw,20px); line-height:1.55;
  color:var(--cream-2); margin:18px 0 0;}
.meta{font-family:var(--sans); font-size:13px; color:var(--mist-2); margin:22px 0 0;
  padding-bottom:26px; border-bottom:1px solid var(--line);}

article{padding:8px 0 20px;}
article h2{font-family:var(--serif); font-weight:600; color:var(--cream);
  font-size:clamp(22px,3.4vw,28px); line-height:1.22; letter-spacing:-.01em; margin:44px 0 0;}
article h3{font-family:var(--sans); font-weight:700; color:var(--cream);
  font-size:18px; margin:30px 0 0; letter-spacing:.005em;}
article p{margin:16px 0 0; color:var(--cream-2); font-size:17px;}
article p.lead{font-size:19px; color:var(--cream);}
article strong{color:var(--cream); font-weight:600;}
article em{font-style:italic; color:var(--gold-bright);}
article ul,article ol{margin:16px 0 0; padding-left:22px; color:var(--cream-2); font-size:17px;}
article li{margin:9px 0 0;}
.hi{font-family:var(--deva); color:var(--gold-bright); font-style:normal;}

/* answer capsule — the AEO snippet target */
.answer{margin:26px 0 0; padding:20px 22px; border:1px solid var(--line);
  border-radius:16px; background:linear-gradient(180deg,rgba(231,184,115,0.06),rgba(231,184,115,0.02));}
.answer p{margin:0; color:var(--cream); font-size:18px;}
.answer p+p{margin-top:12px;}

/* score-band table */
.tbl{width:100%; border-collapse:collapse; margin:20px 0 0; font-size:16px;}
.tbl th,.tbl td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line);}
.tbl th{font-family:var(--sans); font-weight:700; color:var(--cream); font-size:13px;
  letter-spacing:.05em; text-transform:uppercase;}
.tbl td{color:var(--cream-2);}
.tbl td:first-child{font-family:var(--serif); color:var(--gold-bright); white-space:nowrap;}
.tbl-wrap{overflow-x:auto;}

/* honesty note */
.note{margin:24px 0 0; padding:16px 20px; border-left:3px solid var(--gold-deep);
  background:rgba(200,196,255,0.03); border-radius:0 12px 12px 0;}
.note p{margin:0; color:var(--mist); font-size:16px;}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{margin-top:12px;}
.faq details{border-bottom:1px solid var(--line); padding:18px 0;}
.faq summary{font-family:var(--sans); font-weight:600; color:var(--cream); font-size:17px;
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; color:var(--gold); font-size:22px; line-height:1; flex:none;}
.faq details[open] summary::after{content:'–';}
.faq details p{margin:12px 0 0; color:var(--cream-2); font-size:16px;}

/* ── CTA card ────────────────────────────────────────────────────────── */
.cta{margin:48px 0 8px; padding:28px 26px; border:1px solid var(--line); border-radius:20px;
  background:radial-gradient(120% 140% at 0% 0%, rgba(231,184,115,0.10), rgba(231,184,115,0) 60%), var(--ink-1);
  text-align:center;}
.cta h3{font-family:var(--serif); font-weight:500; color:var(--cream); font-size:23px; margin:0;}
.cta p{margin:10px auto 0; color:var(--mist); font-size:16px; max-width:46ch;}
.play-badge{display:inline-flex; align-items:center; gap:12px; margin:20px 0 0; cursor:pointer; border:none;
  background:linear-gradient(180deg,#F6DDA6,#E7B873 58%,#D7A656); color:#20150A;
  border-radius:14px; padding:12px 24px 12px 18px; min-height:56px;
  box-shadow:0 10px 30px rgba(231,184,115,0.24), inset 0 1px 0 rgba(255,255,255,0.55);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;}
.play-badge:hover{transform:translateY(-2px);}
.play-badge .pb-txt{display:flex; flex-direction:column; align-items:flex-start; line-height:1.05; text-align:left;}
.play-badge .pb-small{font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.72;}
.play-badge .pb-big{font-family:var(--serif); font-weight:600; font-size:20px; line-height:1.15;}

/* ── related / index list ───────────────────────────────────────────── */
.related{margin:44px 0 0; padding-top:26px; border-top:1px solid var(--line);}
.related h2{font-size:20px; margin:0 0 6px;}
.cardlist{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px;}
.cardlist a{display:block; padding:18px 20px; border:1px solid var(--line); border-radius:14px;
  background:var(--ink-1); transition:border-color .25s, transform .25s;}
.cardlist a:hover{border-color:rgba(231,184,115,0.4); transform:translateY(-2px);}
.cardlist .c-t{font-family:var(--serif); font-weight:500; color:var(--cream); font-size:19px;}
.cardlist .c-d{font-family:var(--sans); color:var(--mist); font-size:14px; margin-top:5px;}

/* ── index hero ─────────────────────────────────────────────────────── */
.lead-hero{padding:44px 0 8px;}
.lead-hero .sub{font-family:var(--serif); font-size:clamp(16px,2.2vw,19px); color:var(--mist);
  margin:14px 0 0; max-width:58ch;}

/* ── footer ─────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line); margin-top:56px; padding:30px 0 44px;}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between;}
footer a{font-family:var(--sans); font-size:14px; color:var(--mist);}
footer .fnote{font-family:var(--sans); font-size:13px; color:var(--mist-2); width:100%;}

@media (max-width:560px){
  .topbar nav a{margin-left:14px;}
  article p,article ul,article ol{font-size:16.5px;}
}