/* Shared styling for the /learn/ answer pages.
   Palette and type lifted from extension.html so these read as the same site
   without pulling in the homepage's 176KB of scroll machinery. These pages
   exist to answer one question quickly, so they load as plain documents. */
:root{
  --ink:#161028; --muted:#5b5470; --accent:#6E5BD2; --bg:#faf8f4;
  --line:#e7e2f0; --card:#fff;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.75 "Inter Tight",Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:740px; margin:0 auto; padding:40px 24px 96px; }
a{ color:var(--accent); }
a:hover{ text-decoration:none; }

.back{ display:inline-block; margin-bottom:28px; color:var(--muted); text-decoration:none; font-size:15px; }
.back:hover{ color:var(--accent); }

h1{ font-size:clamp(1.9rem,5vw,2.6rem); line-height:1.15; letter-spacing:-.02em; margin:.1em 0 .3em; }
h2{ font-size:1.3rem; line-height:1.3; margin:2.4em 0 .5em; letter-spacing:-.01em; }
h3{ font-size:1.05rem; margin:1.8em 0 .3em; }
.lede{ font-size:1.15rem; color:var(--muted); margin:0 0 2em; }

ul,ol{ padding-left:1.3em; }
li{ margin:.4em 0; }
hr{ border:none; border-top:1px solid var(--line); margin:3em 0; }

.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 24px; margin:1.6em 0; }
.card h3{ margin-top:0; }
.card.plain{ color:var(--muted); }

/* Spoken examples. Urdu lines carry lang+dir on the element itself so screen
   readers switch voice and the text lays out right to left properly. */
.say{ background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
      border-radius:10px; padding:12px 18px; margin:.7em 0; }
.say[dir="rtl"]{ border-left:1px solid var(--line); border-right:3px solid var(--accent);
                 text-align:right; font-size:1.15rem; line-height:2; }
.say .en{ display:block; color:var(--muted); font-size:.92rem; margin-top:.3em; }

.honest{ background:#fbf7ec; border:1px solid #e8dfc4; border-radius:14px; padding:20px 24px; margin:2em 0; }
.honest h3{ margin-top:0; }

.cta-row{ margin:2.4em 0 0; }
.cta{ display:inline-block; background:var(--accent); color:#fff; padding:12px 24px;
      border-radius:11px; text-decoration:none; font-weight:600; }
.cta:hover{ opacity:.92; }
.cta-note{ display:block; color:var(--muted); font-size:.93rem; margin-top:.8em; }

/* The FAQ must be VISIBLE, not just marked up. Schema describing answers a
   reader cannot find is a guideline violation, and a collapsed <details> still
   counts as on the page because the text ships in the HTML. */
details{ background:var(--card); border:1px solid var(--line); border-radius:12px;
         padding:14px 20px; margin:.6em 0; }
summary{ cursor:pointer; font-weight:600; list-style:none; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; float:right; color:var(--accent); font-weight:400; }
details[open] summary::after{ content:"\2013"; }
details .ans{ margin-top:.7em; color:var(--muted); }

.more{ margin-top:3em; padding-top:1.6em; border-top:1px solid var(--line); }
.more h2{ margin-top:0; font-size:1.05rem; }
.more ul{ list-style:none; padding:0; }
.more li{ margin:.5em 0; }

footer.page{ margin-top:3.5em; padding-top:1.6em; border-top:1px solid var(--line);
             color:var(--muted); font-size:.9rem; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }