/* ═══════════════════════════════════════════════════════════════════════════
   learn.css — the answer hub.                                 added 2026-10-03

   Built on fund.css's own tokens, not on a palette of its own. The first
   version of this file was written light-on-dark and the public pages are warm
   cream — so every paragraph came out near-invisible. Using --ink, --paper and
   --brand means these pages cannot drift from the rest of the site, and a theme
   change lands here for free.

   Reading, not scanning: one column at a comfortable measure, and the answer
   itself set apart at the top so the eye lands on it before anything else.
   ═══════════════════════════════════════════════════════════════════════════ */
.lrn{max-width:830px;margin:0 auto;padding:0 22px 60px}

.lrn-crumb{font-size:12px;color:var(--mut);margin:20px 0 8px}
.lrn-crumb a{color:var(--brand-d);text-decoration:none}
.lrn-crumb a:hover{text-decoration:underline}
.lrn-crumb span{margin:0 7px;opacity:.5}
.lrn-crumb b{color:var(--ink2);font-weight:600}

.lrn-topic{
  display:inline-block;font:700 9.5px/1 'DM Sans',system-ui,sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand-d);
  padding:6px 11px;border:1px solid var(--line2);border-radius:20px;background:#fff;
}
.lrn-hero{padding:22px 0 6px}
.lrn-hero h1,.lrn-art h1{
  font:650 clamp(25px,3.3vw,36px)/1.18 'DM Sans',system-ui,sans-serif;
  letter-spacing:-.8px;color:var(--navy);margin:14px 0 10px;
}
.lrn-hero p{max-width:66ch;color:var(--ink2);line-height:1.8;font-size:14.5px}
.lrn-meta{font-size:12px;color:var(--mut);margin:0}

/* the answer, first and apart */
.lrn-short{
  margin:22px 0 8px;padding:20px 23px;border-radius:15px;
  background:var(--t-gold);border:1px solid var(--line);
  border-left:3px solid var(--brand);box-shadow:var(--sh-sm);
}
.lrn-short p{margin:0;font-size:16.5px;line-height:1.75;color:var(--navy)}

.lrn-body h2{
  font:650 19px/1.3 'DM Sans',system-ui,sans-serif;color:var(--navy);
  margin:32px 0 10px;letter-spacing:-.3px;
}
.lrn-body p,.lrn-body li{color:var(--ink2);line-height:1.85;font-size:14.8px}
.lrn-body ul{padding-left:20px;margin:10px 0}
.lrn-body li{margin:6px 0}
.lrn-body strong,.lrn-body em{color:var(--navy)}
.lrn-body em{font-style:italic}

.lrn-faq{margin-top:34px}
.lrn-faq h2,.lrn-see h2,.lrn-more h2{
  font:650 17px/1.3 'DM Sans',system-ui,sans-serif;color:var(--navy);margin:0 0 12px;
}
.lrn-faq details{
  border:1px solid var(--line);border-radius:12px;background:var(--paper2);
  padding:14px 17px;margin:9px 0;box-shadow:var(--sh-sm);
}
.lrn-faq summary{cursor:pointer;color:var(--navy);font-size:14px;font-weight:600}
.lrn-faq p{margin:10px 0 0;color:var(--ink2);line-height:1.8;font-size:14px}

.lrn-see,.lrn-more{
  margin-top:28px;padding:19px 21px;border-radius:14px;
  background:var(--paper2);border:1px solid var(--line);box-shadow:var(--sh-sm);
}
.lrn-sub{margin:-4px 0 12px;font-size:12.5px;color:var(--mut);line-height:1.7}
.lrn-see ul,.lrn-more ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.lrn-see a,.lrn-more a{color:var(--brand-d);text-decoration:none;font-size:14px;font-weight:500}
.lrn-see a:hover,.lrn-more a:hover{text-decoration:underline}

.lrn-group{margin:30px 0}
.lrn-group h2{
  font:700 10.5px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);margin:0 0 14px;
}
.lrn-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.lrn-list li{
  padding:19px 21px;border-radius:15px;background:var(--paper2);
  border:1px solid var(--line);box-shadow:var(--sh-sm);
  transition:border-color .16s ease,transform .16s cubic-bezier(.23,1,.32,1);
}
.lrn-list li:hover{border-color:var(--brand);transform:translateY(-1px)}
.lrn-list a{
  color:var(--navy);text-decoration:none;
  font:650 16.5px/1.4 'DM Sans',system-ui,sans-serif;letter-spacing:-.25px;
}
.lrn-list p{margin:7px 0 0;color:var(--ink2);font-size:13.5px;line-height:1.7}

.lrn-disc{
  margin:38px 0 10px;padding-top:18px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.8;color:var(--mut);
}
@media (prefers-reduced-motion:reduce){
  .lrn-list li{transition:none}
  .lrn-list li:hover{transform:none}
}
@media (max-width:620px){
  .lrn{padding:0 16px 48px}
  .lrn-short{padding:16px 17px}
  .lrn-short p{font-size:15px}
  .lrn-see,.lrn-more{padding:16px 17px}
}

/* ── tables inside an answer ───────────────────────────────────────────────
   A worked example is usually a small table, and a table is the one element
   that will blow a phone layout wide open. So it scrolls inside its own box
   rather than stretching the page: .lrn-tbl is always wrapped by the overflow
   rule below, and numeric columns are mono-spaced and right-aligned so the
   decimal points line up and the eye can compare down a column. */
.lrn-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:18px 0;max-width:100%;
}
/* The table stays a real table. Putting display:block on it to get a scrollbar
   throws away the table's own width model, so min-width is ignored and a
   five-column table silently crushes itself into 335px on a phone instead of
   scrolling. The wrapper scrolls; the table keeps its shape. */
.lrn-body table.lrn-tbl{
  border-collapse:collapse;font-size:13.5px;
  width:max-content;min-width:100%;
}
.lrn-tbl thead th{
  text-align:left;white-space:nowrap;padding:9px 13px 9px 0;
  border-bottom:1.5px solid var(--navy);
  font:700 10.5px/1.3 'DM Sans',system-ui,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mut);
}
.lrn-tbl tbody td{
  padding:10px 13px 10px 0;border-bottom:1px solid var(--line);
  color:var(--ink);line-height:1.5;vertical-align:top;
}
.lrn-tbl tbody tr:last-child td{border-bottom:0}
.lrn-tbl th.n,.lrn-tbl td.n{
  text-align:right;white-space:nowrap;padding-left:18px;padding-right:18px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;
}
/* Only the LAST cell may lose its right padding. A numeric column in the
   middle of a table needs it, or "₹340/month" runs straight into the next
   heading and reads as one word ("PRICEWHAT IT ADDS"). */
.lrn-tbl th.n:last-child,.lrn-tbl td.n:last-child{padding-right:0}
.lrn-tbl tbody tr:hover td{background:var(--paper2)}

/* Charts come from the site's own SVG builders, so they already carry the
   .ivc classes fund.css styles. All they need here is room to breathe. */
.lrn-body .ivc{display:block;width:100%;height:auto;margin:16px 0 6px}

/* ── the phrasings one page answers ────────────────────────────────────────
   Deliberately quiet. This block exists so a reader who arrived on one wording
   can see their question is the one being answered; it is not the content. */
.lrn-covers{
  margin:34px 0 0;padding:20px 22px;border-radius:15px;
  background:var(--paper2);border:1px solid var(--line);
}
.lrn-covers h2{
  margin:0 0 4px;font:700 11px/1 'DM Sans',system-ui,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mut);
}
.lrn-covers ul{margin:12px 0 0;padding:0 0 0 18px;columns:2;column-gap:28px}
.lrn-covers li{
  margin:0 0 7px;color:var(--ink2);font-size:13px;line-height:1.6;
  break-inside:avoid;
}
@media (max-width:700px){ .lrn-covers ul{columns:1} }