/* =============================================================================
   Lipi - mobile & tablet-first, kid-friendly styles
   ========================================================================== */
:root{
  /* Lipi teal/mint palette (legacy --indigo* names kept for compatibility) */
  --ink:#142824; --muted:#4a6460; --faint:#8aa8a3;
  --indigo:#1e9b8c; --indigo-dark:#157a6f; --indigo-soft:#e8f7f4;
  --primary:#1e9b8c; --primary-dark:#157a6f;
  --lipi-teal:#0d8f82; --lipi-mint:#72d4bf;
  --good:#16a34a; --bad:#e11d48; --warn:#f59e0b;
  --bg:#f6fcfa; --card:#ffffff; --line:#d4ebe6;
  --radius:20px; --radius-sm:14px; --shadow:0 6px 24px rgba(21,122,111,.08);
  --maxw:1080px;
  /* rotating accent colours for tiles */
  --accent-pink:#ff8fb1; --accent-amber:#ffc25c; --accent-teal:#37d4c4; --accent-sky:#5bb8ff;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Fredoka','Inter',ui-rounded,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font);
  line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased;
}
a{color:var(--indigo); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}
h1,h2,h3{font-family:var(--font-display); line-height:1.12; color:var(--ink); margin:0 0 .4em; font-weight:700; letter-spacing:-.01em;}
h1{font-size:clamp(30px,6.4vw,50px); font-weight:700;}
h2{font-size:clamp(23px,4.2vw,34px);}
h3{font-size:19px;}
p{margin:0 0 1em;}

/* accessibility: skip link + focus rings */
.skip-link{position:absolute; left:12px; top:-48px; z-index:200; background:var(--primary); color:#fff;
  padding:10px 16px; border-radius:0 0 12px 12px; font-weight:700; transition:top .15s ease;}
.skip-link:focus{top:0; text-decoration:none;}
:focus-visible{outline:3px solid var(--primary); outline-offset:2px; border-radius:6px;}
.container{max-width:var(--maxw); margin:0 auto;
  padding-right:max(18px, env(safe-area-inset-right));
  padding-left:max(18px, env(safe-area-inset-left));}
.muted{color:var(--muted);}
.center{text-align:center;}

/* --- Buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:999px; padding:14px 26px; font-size:15.5px; font-weight:700;
  font-family:var(--font-display); min-height:48px;
  cursor:pointer; transition:transform .08s ease, box-shadow .18s ease, background .18s ease;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{text-decoration:none; transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--primary); color:#fff; box-shadow:0 8px 22px rgba(30,155,140,.30);}
.btn-primary:hover{background:var(--primary-dark); box-shadow:0 12px 28px rgba(30,155,140,.40);}
.btn-ghost{background:var(--card); color:var(--ink); box-shadow:var(--shadow); border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--primary); color:var(--primary);}
.btn-soft{background:var(--indigo-soft); color:var(--indigo);}
.btn-block{display:flex; width:100%;}
.btn-lg{padding:17px 30px; font-size:17px; min-height:54px;}
.btn-sm{padding:10px 18px; font-size:14px; min-height:40px;}
.btn-oauth{background:#fff; color:var(--ink); box-shadow:var(--shadow); border:1px solid var(--line);}
.oa-ic{display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; font-weight:800; color:#4285F4;}

/* --- Header / nav ---------------------------------------------------------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px;}
.brand{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:18px; color:var(--ink);}
.brand:hover{text-decoration:none;}
.brand .logo{width:36px; height:36px; border-radius:0; object-fit:contain; flex:0 0 auto;}
.brand-wordmark{
  font-family:var(--font-display); font-size:clamp(1.55rem,3.2vw,1.95rem); font-weight:700;
  letter-spacing:-.03em; line-height:1; white-space:nowrap;
  background:linear-gradient(165deg,var(--lipi-teal) 0%,var(--primary) 45%,var(--lipi-mint) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (max-width:479px){.brand-wordmark{display:none;}}
.nav-links{display:flex; align-items:center; gap:2px;}
.nav-links a{color:var(--ink); font-weight:600; font-size:15px; padding:9px 12px; border-radius:11px; white-space:nowrap;}
.nav-links a:hover{background:var(--indigo-soft); color:var(--indigo); text-decoration:none;}
.nav-links .btn{padding:10px 18px; font-size:14px; min-height:0;}
.nav-toggle{display:none; background:none; border:none; font-size:26px; cursor:pointer; color:var(--ink); padding:6px; line-height:1;}

/* Collapse to a hamburger for phones AND tablet-portrait (the full row only fits on wide screens). */
@media (max-width:900px){
  .nav-toggle{display:block;}
  .nav-links{
    position:absolute; top:66px; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:2px; background:#fff; border-bottom:1px solid var(--line); padding:10px 14px 18px;
    box-shadow:var(--shadow); display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:13px 12px; font-size:16px;}
  .nav-links .btn{margin-top:8px; align-self:flex-start;}
}

/* --- Hero ------------------------------------------------------------------ */
.hero{padding:60px 0 48px; text-align:center;
  background:
    radial-gradient(120% 120% at 15% 0%, #dff5f0 0%, rgba(223,245,240,0) 55%),
    radial-gradient(120% 120% at 90% 10%, #ecfdf8 0%, rgba(236,253,248,0) 50%),
    var(--bg);
}
.hero .tag{display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--primary);
  font-weight:700; font-size:13px; padding:7px 15px; border-radius:999px; margin-bottom:18px;
  box-shadow:var(--shadow); border:1px solid var(--line);}
.hero p.lead, .lead{font-size:clamp(16px,2.4vw,20px); color:var(--muted); max-width:640px; margin:0 auto 26px;}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.hero-scripts{margin-top:30px; font-size:clamp(26px,5vw,38px); letter-spacing:6px; color:var(--indigo-dark); opacity:.9;}

/* Hero split layout (home) */
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; text-align:left;}
.hero-copy{min-width:0;}
.hero-card{background:var(--card); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow);
  padding:28px 30px 26px; display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(290px,30vw,360px); position:relative; overflow:hidden;}
.hero-card .hc-tag{align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; color:var(--primary); background:var(--indigo-soft);
  padding:6px 13px; border-radius:999px;}
.hero-card .hc-lines{display:flex; flex-direction:column; gap:11px;}
.hero-card .hc-rule{height:2px; background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 18px);}
.hero-card .hc-caption{margin:16px 0 0; text-align:center; font-size:13px;}
/* cycling script glyphs in hero (fade only, no movement) */
.hc-script-cycle{position:relative; flex:1 1 auto; min-height:clamp(120px,15vw,170px);
  display:flex; align-items:center; justify-content:center; margin:6px 0 4px;}
.hc-script-cycle .hc-glyph{
  position:absolute; font-size:clamp(92px,13vw,150px); line-height:1;
  font-family:var(--font-display); font-weight:600; opacity:0; transition:opacity .45s ease;
  background:linear-gradient(165deg,var(--lipi-teal) 0%,var(--primary) 55%,var(--lipi-mint) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hc-script-cycle .hc-glyph.is-active{opacity:1;}
@media (prefers-reduced-motion:reduce){.hc-script-cycle .hc-glyph{transition:none;}}
@media (max-width:840px){
  .hero-grid{grid-template-columns:1fr; text-align:center; gap:24px;}
  .hero-copy{order:1;} .hero-card{order:2; max-width:520px; margin:0 auto; width:100%;}
  .hero-grid .hero-cta{justify-content:center;}
}

/* --- Sections / cards ------------------------------------------------------ */
section{padding:46px 0;}
@media (max-width:600px){
  section{padding:36px 0;}
  .hero{padding:40px 0 36px;}
}
.section-head{text-align:center; max-width:640px; margin:0 auto 34px;}
.grid{display:grid; gap:18px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
@media (max-width:860px){ .grid-3{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .grid-3,.grid-2{grid-template-columns:1fr;} }

.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:24px; border:1px solid var(--line);}
.card .ico{font-size:34px; margin-bottom:10px; line-height:1;}
.card h3{margin-bottom:4px;}
.card p{margin:0; color:var(--muted); font-size:14.5px;}

/* Language tiles */
a.lang-tile{display:flex; flex-direction:column; gap:7px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
  color:var(--ink); transition:transform .1s ease, box-shadow .18s ease; position:relative; overflow:hidden;}
a.lang-tile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--accent-sky);}
a.lang-tile:nth-child(4n+1)::before{background:var(--accent-pink);}
a.lang-tile:nth-child(4n+2)::before{background:var(--accent-amber);}
a.lang-tile:nth-child(4n+3)::before{background:var(--accent-teal);}
a.lang-tile:nth-child(4n)::before{background:var(--accent-sky);}
a.lang-tile:hover{text-decoration:none; transform:translateY(-4px); box-shadow:0 14px 30px rgba(21,122,111,.14);}
.lang-tile .native{font-size:34px; line-height:1; color:var(--indigo-dark); font-family:var(--font-display);}
.lang-tile .name{font-weight:700; font-size:16.5px; font-family:var(--font-display);}
.lang-tile .blurb{font-size:13px; color:var(--muted); margin:0;}
.badge{align-self:flex-start; font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px;}
.badge.free{background:#dcfce7; color:#15803d;}
.badge.pro{background:#fef3c7; color:#92400e;}

/* --- Trust strip (home) --------------------------------------------------- */
.trust-strip{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:26px;}
.hero-grid .trust-strip{justify-content:flex-start;}
@media (max-width:840px){ .hero-grid .trust-strip{justify-content:center;} }
.trust-chip{display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  box-shadow:var(--shadow); border-radius:999px; padding:9px 16px 9px 13px; font-size:13px; font-weight:600;
  color:var(--ink); transition:transform .1s ease, border-color .15s ease, box-shadow .15s ease;}
.trust-chip::before{content:""; width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--primary); box-shadow:0 0 0 3px rgba(30,155,140,.16);}
.trust-chip:hover{transform:translateY(-2px); border-color:var(--primary);
  box-shadow:0 10px 22px rgba(21,122,111,.12);}

/* --- Section variants ----------------------------------------------------- */
.section-soft{background:var(--indigo-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.exam-block{background:var(--indigo-soft); border-bottom:1px solid var(--line);}
.section-head--left{text-align:left; max-width:none; margin-left:0; margin-right:0;}

/* --- Learn page (/learn) -------------------------------------------------- */
.learn-page{padding-top:28px;}
.learn-top{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:22px;}
.learn-head{margin:0; text-align:left; max-width:640px;}
.learn-head h1{margin-bottom:6px;}
.chip-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:12px; margin-bottom:36px;}
@media (min-width:600px){.chip-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));}}
.chip{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 10px 14px;
  box-shadow:var(--shadow); color:var(--ink); text-decoration:none; min-height:118px;
  transition:transform .1s ease, box-shadow .15s ease, border-color .15s ease;
}
a.chip:hover{text-decoration:none; transform:translateY(-3px); box-shadow:0 12px 28px rgba(21,122,111,.12); border-color:#b8e8de;}
.chip--soon{opacity:.55; cursor:default;}
.chip-char{font-size:32px; line-height:1; font-family:var(--font-display); color:var(--primary);}
.chip-name{font-weight:700; font-size:13px; line-height:1.25; font-family:var(--font-display);}
.chip-badge{font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; margin-top:auto;}
.chip-badge--pro{background:var(--indigo-soft); color:var(--primary);}
.chip-badge--forever{background:#f3e8ff; color:#7c3aed;}
.chip-badge--soon{background:#fef3c7; color:#92400e;}
.chip-badge--free{background:#ecfdf5; color:#15803d;}
.learn-boards{max-width:720px;}
.feedback-banner{
  display:block; text-align:center; background:#fffbeb; border:1px solid #fde68a; color:#854d0e;
  border-radius:var(--radius-sm); padding:14px 16px; margin:0 0 36px; text-decoration:none; font-size:14px; line-height:1.5;
}
.feedback-banner:hover{text-decoration:none; background:#fef9c3;}

/* --- Stylus shop modal ---------------------------------------------------- */
.hw-modal{display:none; position:fixed; inset:0; z-index:300; align-items:center; justify-content:center; padding:18px;}
.hw-modal.hw-modal--open{display:flex;}
.hw-modal[hidden]{display:none !important;}
.hw-modal-backdrop{position:absolute; inset:0; background:rgba(29,27,46,.45); backdrop-filter:blur(4px);}
.hw-modal-panel{
  position:relative; background:#fff; border-radius:var(--radius); box-shadow:0 24px 60px rgba(29,27,46,.22);
  padding:26px 22px 20px; max-width:400px; width:100%; border:1px solid var(--line);
}
.hw-modal-x{
  position:absolute; top:12px; right:14px; border:none; background:none; font-size:26px; line-height:1;
  cursor:pointer; color:var(--faint); padding:4px;
}
.hw-modal-x:hover{color:var(--ink);}
.hw-modal-panel h2{font-size:20px; margin:0 28px 8px 0;}
.hw-modal-lead{font-size:14px; margin:0 0 18px; line-height:1.55;}
.shop-row{display:flex; flex-direction:column; gap:10px; margin-bottom:18px;}
.shop-btn{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700; font-size:14px;
  border:1px solid var(--line); transition:transform .08s ease, box-shadow .15s ease;
}
.shop-btn:hover{text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow);}
.shop-btn--amazon{background:#fff; color:#111;}
.shop-btn--flipkart{background:#fff; color:#2874f0;}
.shop-logo{font-size:15px; font-weight:800; letter-spacing:-.02em;}
.shop-logo--amazon{color:#ff9900; text-transform:lowercase; font-family:Arial,sans-serif;}
.shop-logo--amazon::first-letter{color:#232f3e;}
.shop-logo--flipkart{color:#2874f0; font-style:italic;}
.shop-action{font-size:13px; color:var(--muted); font-weight:600;}
.hw-modal-foot{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end;}
.hw-modal-foot .btn{min-height:42px; padding:10px 18px; font-size:14px;}

/* --- FAQ accordion -------------------------------------------------------- */
.faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); overflow:hidden;}
.faq summary{list-style:none; cursor:pointer; padding:17px 20px; font-weight:700; font-family:var(--font-display);
  font-size:16px; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-size:22px; color:var(--primary); transition:transform .2s ease; line-height:1;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details > p{margin:0; padding:0 20px 18px; color:var(--muted); font-size:14.5px;}

/* --- 3 steps -------------------------------------------------------------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:step;}
@media (max-width:720px){ .steps{grid-template-columns:1fr;} }
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px 22px;}
.step .num{counter-increment:step; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; background:var(--indigo-soft); color:var(--primary);
  font-weight:800; font-family:var(--font-display); font-size:18px; margin-bottom:12px;}
.step .num::before{content:counter(step);}
.step h3{margin-bottom:5px;}
.step p{margin:0; color:var(--muted); font-size:14.5px;}

/* --- Pricing -------------------------------------------------------------- */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:760px; margin:0 auto;}
@media (max-width:620px){ .price-grid{grid-template-columns:1fr;} }
.plan{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow);}
.plan.featured{border:2px solid var(--indigo); position:relative;}
.plan.featured::before{content:"Most popular"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--indigo); color:#fff; font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px;}
.plan .amt{font-size:40px; font-weight:800; color:var(--ink);}
.plan .amt small{font-size:15px; font-weight:600; color:var(--muted);}
.plan ul{list-style:none; padding:0; margin:18px 0; }
.plan li{padding:7px 0 7px 26px; position:relative; color:var(--ink); font-size:14.5px;}
.plan li::before{content:"✓"; position:absolute; left:0; color:var(--good); font-weight:800;}
.plan li.no{color:var(--faint);}
.plan li.no::before{content:"·"; color:var(--faint);}

/* --- Auth / narrow pages --------------------------------------------------- */
.narrow{max-width:420px; margin:0 auto; padding:50px 0;}
.auth-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:32px 26px; text-align:center;}
.oauth-btns{display:flex; flex-direction:column; gap:10px; margin:22px 0 0;}

/* --- Account -------------------------------------------------------------- */
.acct-row{display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--line);}
.acct-row:last-child{border-bottom:none;}
.pill{font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px;}
.pill.pro{background:#fef3c7; color:#92400e;}
.pill.free{background:#e2e8f0; color:#475569;}

/* --- Flash messages ------------------------------------------------------- */
.flash{padding:12px 16px; border-radius:11px; margin:0 0 16px; font-size:14px; font-weight:600;}
.flash.error{background:#fee2e2; color:#b91c1c;}
.flash.success{background:#dcfce7; color:#15803d;}

/* --- Prose (legal/details) ------------------------------------------------ */
.prose{max-width:760px; margin:0 auto;}
.prose h2{margin-top:32px;}
.prose ul,.prose ol{padding-left:20px;}
.prose li{margin:6px 0;}
.legal-meta{color:var(--muted); font-size:14px; margin:0 0 22px; padding-bottom:14px; border-bottom:1px solid var(--line);}

/* --- Footer --------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line); background:#fff; padding:34px 0; margin-top:30px;}
.foot-grid{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center;}
.foot-links{display:flex; gap:18px; flex-wrap:wrap;}
.foot-links a{color:var(--muted); font-size:14px;}
.site-footer .copy{color:var(--faint); font-size:13px;}

/* --- Learn app shell (full-bleed iframe) ---------------------------------- */
.app-shell{display:flex; flex-direction:column; height:100vh; height:100dvh; background:var(--bg);}
.app-bar{display:flex; align-items:center; justify-content:space-between; gap:10px;
  height:54px; padding:0 12px; background:var(--card); border-bottom:1px solid var(--line); flex:0 0 auto;}
.app-bar-left{display:flex; align-items:center; gap:10px; min-width:0; flex:0 1 auto;}
.app-bar-left .brand .brand-wordmark{display:none;}
@media (min-width:520px){.app-bar-left .brand .brand-wordmark{display:inline;}}
.app-bar-back{font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap;}
.app-bar-back:hover{color:var(--primary); text-decoration:none;}
.app-bar .theme-switch{margin:0; flex:0 0 auto;}
.app-bar .back{display:flex; align-items:center; gap:7px; font-weight:700; color:var(--ink); font-size:15px;}
.app-bar .title{font-weight:700; font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; text-align:center;}
.app-bar .right{display:flex; align-items:center; gap:6px;}
.app-bar .right a{font-size:13px; font-weight:700;}
.app-frame{flex:1 1 auto; width:100%; border:0; display:block;}

/* fullscreen / expand button in the app bar */
.app-expand{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:1px solid var(--line); background:#fff; border-radius:12px; cursor:pointer; font-size:18px;
  color:var(--ink); line-height:1; transition:background .15s ease;}
.app-expand:hover{background:var(--indigo-soft); color:var(--primary);}

/* --- Immersive (YouTube-style) fullscreen practice ------------------------ */
.app-shell--immersive{position:fixed; inset:0; z-index:999; height:100vh; height:100dvh;}
.app-shell--immersive .app-bar{display:none;}
.app-shell--immersive .speak-cta{display:none;}
.app-shell--immersive .app-frame{height:100vh; height:100dvh;}
/* floating exit button shown only in immersive */
.hw-immersive-exit{display:none; position:fixed; top:max(12px,env(safe-area-inset-top)); right:14px; z-index:1001;
  align-items:center; gap:7px; background:rgba(29,27,46,.78); color:#fff; border:none; border-radius:999px;
  padding:10px 16px; font-weight:700; font-family:var(--font-display); font-size:14px; cursor:pointer;
  backdrop-filter:blur(6px); box-shadow:0 6px 18px rgba(0,0,0,.3);}
.app-shell--immersive .hw-immersive-exit{display:inline-flex;}

/* rotate-your-device hint (portrait phones in immersive) */
.rotate-hint{display:none; position:fixed; inset:0; z-index:1000; background:rgba(29,27,46,.92); color:#fff;
  flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; gap:14px;}
.rotate-hint .rot-ic{font-size:60px; animation:rothint 1.6s ease-in-out infinite;}
.rotate-hint p{margin:0; font-size:18px; font-weight:600; max-width:320px;}
@keyframes rothint{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}
.app-shell--immersive.show-rotate-hint .rotate-hint{display:flex;}

.speak-cta{
  display:block; text-align:center; text-decoration:none; font-size:14px; line-height:1.45;
  font-weight:600; padding:11px 14px; border-bottom:1px solid var(--line);
  background:#e8f7f4; color:#157a6f;
}
.speak-cta .speak-cta-go{color:var(--primary); font-weight:700;}
.theme-dark .speak-cta{background:#15302b; color:#9af0e0; border-color:var(--line);}

/* in-iframe floating expand button (injected into /play demos) */
.hw-expand-btn{position:fixed; bottom:max(14px,env(safe-area-inset-bottom)); right:14px; z-index:9998;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:var(--primary); color:#fff; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(30,155,140,.45);}
.hw-expand-btn:active{transform:scale(.94);}

/* --- Theme switch (light / dark / device) --------------------------------- */
.theme-switch{display:inline-flex; align-items:center; gap:2px; padding:3px; margin-left:4px;
  border:1px solid var(--line); border-radius:999px; background:var(--card);}
.theme-switch button{display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; border:none; background:none; border-radius:999px;
  cursor:pointer; color:var(--muted); transition:background .15s ease, color .15s ease;}
.theme-switch button:hover{color:var(--ink);}
.theme-switch button svg{width:16px; height:16px;}
.theme-switch button[aria-pressed="true"]{background:var(--primary); color:#fff;}

/* =============================================================================
   Dark theme - applied via .theme-dark on <html>, set before paint by an inline
   script. Covers both an explicit "Dark" choice and "Device" + OS-dark.
   ========================================================================== */
:root.theme-dark{
  --ink:#e6f3ef; --muted:#9cbab4; --faint:#6f8d87;
  --indigo:#26b3a1; --indigo-dark:#5fd6c4; --indigo-soft:#15302b;
  --primary:#26b3a1; --primary-dark:#1e9b8c;
  --bg:#0c1715; --card:#13211e; --line:#26352f;
  --shadow:0 6px 24px rgba(0,0,0,.45);
}
/* brighten the wordmark gradient in dark mode */
.theme-dark .brand-wordmark{background:linear-gradient(165deg,#3fcab6 0%,#5fd6c4 50%,#9af0e0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}

/* surfaces that were hardcoded white */
.theme-dark .site-header{background:rgba(12,23,21,.82);}
.theme-dark .nav-links{background:var(--card);}
.theme-dark .btn-ghost,.theme-dark .btn-oauth,.theme-dark .hero .tag,.theme-dark .hero-card,
.theme-dark .card,.theme-dark .step,.theme-dark .plan,.theme-dark .auth-card,
.theme-dark .faq details,.theme-dark a.lang-tile,.theme-dark .chip,.theme-dark .site-footer,
.theme-dark .app-bar,.theme-dark .app-expand,.theme-dark .hw-modal-panel,
.theme-dark .shop-btn{background:var(--card); border-color:var(--line); color:var(--ink);}
.theme-dark .app-expand:hover{background:var(--indigo-soft); color:var(--indigo-dark);}
.theme-dark .btn-ghost:hover{border-color:var(--indigo-dark); color:var(--indigo-dark);}
.theme-dark .shop-btn--amazon{color:#ffd9a3;}
.theme-dark .shop-btn--flipkart{color:#7fb0ff;}

/* tinted section backgrounds */
.theme-dark .section-soft,.theme-dark .exam-block{background:var(--indigo-soft);}
.theme-dark .hero{background:
  radial-gradient(120% 120% at 15% 0%, rgba(38,179,161,.12) 0%, rgba(38,179,161,0) 55%),
  radial-gradient(120% 120% at 90% 10%, rgba(95,214,196,.09) 0%, rgba(95,214,196,0) 50%),
  var(--bg);}

/* badges / chips with pale pastel fills */
.theme-dark .chip-badge--pro{background:#16302b; color:#5fd6c4;}
.theme-dark .chip-badge--forever{background:#241a33; color:#c79bff;}
.theme-dark .chip-badge--free,.theme-dark .badge.free,.theme-dark .flash.success{background:#10241a; color:#5fcf94;}
.theme-dark .badge.pro,.theme-dark .pill.pro{background:#33260c; color:#f0c869;}
.theme-dark .pill.free{background:#23302c; color:#9cbab4;}
.theme-dark .flash.error{background:#3a1620; color:#f49bb0;}
.theme-dark .feedback-banner{background:#2a2410; border-color:#4d4218; color:#f5e6b8;}
.theme-dark .feedback-banner:hover{background:#332b14;}
.theme-dark .chip-badge--soon{background:#33260c; color:#f0c869;}
.theme-dark img{opacity:.96;}