/* ProLend /learn/ pillar — hub + article styling. Builds on styles.css tokens. */

.page-content .content-main { width: min(1200px, 94vw); margin: 0 auto; padding: 24px 0 80px; }
.page-content .content-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1190px; margin-inline: auto; padding: 8px 0 34px; }
.page-content .brand-image { width: 164px; }
.page-content .home-link { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--text-soft); }
.page-content .home-link:hover { color: var(--accent); }

/* Breadcrumb */
.crumb { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--text-faint); margin: 0 0 22px; }
.crumb a { color: var(--text-soft); }
.crumb a:hover { color: var(--accent); }
.crumb span { color: var(--text-faint); margin: 0 6px; }

/* Hub */
.learn-hero { padding: 6px 0 8px; }
.learn-eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.learn-hero h1 { font-family: "Schibsted Grotesk", sans-serif; font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 0; max-width: none; width: 100%; }
.learn-hero p { margin: 18px 0 0; font-size: 17px; line-height: 1.55; color: var(--text-soft); max-width: 64ch; }

.learn-group { margin-top: 52px; }
.learn-group h2 { font-family: "Schibsted Grotesk", sans-serif; font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-weight: 600; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.learn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.learn-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md, 12px); padding: 22px 24px; transition: border-color 160ms ease, transform 160ms ease; }
.learn-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.learn-card .k { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.learn-card h3 { font-family: "Schibsted Grotesk", sans-serif; margin: 10px 0 0; font-size: 19px; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); }
.learn-card p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-soft); }
.learn-card.soon { opacity: 0.6; pointer-events: none; }
.learn-card.soon .k { color: var(--text-faint); }

/* ===== Article — full-width hero, then three-zone body: contents · reading column · CTA rail ===== */
.article-shell {
  display: grid;
  grid-template-columns: 190px minmax(0, 680px) 224px;
  grid-template-areas:
    "hero hero rail"
    "toc  body rail";
  column-gap: 48px;
  align-items: start;
  justify-content: center;
}

/* Hero spans the contents + reading columns so the H1 breathes across the top */
.article-hero { grid-area: hero; margin: 0 0 20px; }
.article-hero .crumb { margin-bottom: 20px; }
.article-hero h1 { font-family: "Schibsted Grotesk", sans-serif; font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; margin: 0; max-width: none; width: 100%; }
.article-hero .standfirst { margin: 24px 0 0; font-size: 20px; line-height: 1.5; color: var(--text-soft); max-width: 62ch; }

.article { grid-area: body; width: 100%; max-width: 680px; margin: 0; }

/* Left — sticky "on this page" contents */
.article-toc { grid-area: toc; position: sticky; top: 28px; align-self: start; }
.article-toc .tk { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 16px; }
.article-toc nav { display: flex; flex-direction: column; }
.article-toc nav a { padding: 8px 0 8px 16px; border-left: 2px solid var(--line); font-family: "Schibsted Grotesk", sans-serif; font-size: 13.5px; line-height: 1.35; color: var(--text-soft); transition: border-color 150ms ease, color 150ms ease; }
.article-toc nav a:hover { border-left-color: var(--accent); color: var(--accent); }
.article-toc nav a.active { border-left-color: var(--accent); color: var(--text); font-weight: 600; }

/* Right — sticky CTA rail (balances the layout, drives conversion) */
.article-rail { grid-area: rail; position: sticky; top: 28px; align-self: start; display: flex; flex-direction: column; gap: 14px; }
.rail-card { border: 1px solid var(--line); border-radius: var(--radius-md, 12px); background: #fff; padding: 20px; }
.rail-card.dark { background: var(--panel); border-color: var(--panel); }
.rail-card .rk { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.rail-card.dark .rk { color: var(--green, #6ec489); }
.rail-card h3 { font-family: "Schibsted Grotesk", sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.rail-card.dark h3 { color: #fff; }
.rail-card p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-soft); }
.rail-card.dark p { color: rgba(255,255,255,0.7); }
.rail-card .btn { margin-top: 16px; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; background: var(--accent); color: #fff; border-radius: var(--radius-sm, 8px); font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
.rail-card .btn:hover { background: #264a64; }
.rail-card .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); margin-top: 8px; }
.rail-card.dark .btn.ghost { color: #fff; border-color: rgba(255,255,255,0.25); }
.rail-card .btn.ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

@media (max-width: 1140px) {
  .article-shell { grid-template-columns: 180px minmax(0, 680px); grid-template-areas: "hero hero" "toc body"; }
  .article-rail { display: none; }
}
@media (max-width: 900px) {
  .article-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "body"; }
  .article-toc { display: none; }
  .article { margin: 0 auto; }
  .article-hero h1 { max-width: none; }
}
@media (max-width: 560px) {
  .article-hero h1 { font-size: clamp(28px, 8vw, 34px); }
  .article-hero .standfirst { font-size: 18px; }
  .article-body h2 { font-size: 22px; }
  .article-body p, .article-body li { font-size: 16px; }
  .inline-cta { flex-direction: column; align-items: flex-start; }
  .keyfacts { grid-template-columns: 1fr; }
}
.article-eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.article-body { margin-top: 4px; }
.article-body h2 { font-family: "Schibsted Grotesk", sans-serif; font-size: 25px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 44px 0 0; }
.article-body h3 { font-family: "Schibsted Grotesk", sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 30px 0 0; }
.article-body p { margin: 16px 0 0; font-size: 17px; line-height: 1.72; color: var(--text); }
.article-body ul, .article-body ol { margin: 16px 0 0; padding-left: 22px; }
.article-body li { font-size: 17px; line-height: 1.7; color: var(--text); margin-top: 8px; }
.article-body strong { font-weight: 600; }
.article-body a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.article-body a:hover { text-decoration-color: var(--accent); }

.keytakeaway { margin: 30px 0 0; padding: 20px 24px; background: var(--accent-soft, rgba(47,88,119,0.08)); border-radius: var(--radius-md, 12px); }
.keytakeaway .kt { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.keytakeaway p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); }

.inline-cta { margin: 44px 0 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-md, 12px); background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.inline-cta .t { font-family: "Schibsted Grotesk", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; max-width: 40ch; }
.inline-cta a { flex: none; display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; background: var(--accent); color: #fff; border-radius: var(--radius-sm, 8px); font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.inline-cta a:hover { background: #264a64; }

.article-faq { margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line); }
.article-faq h2 { font-family: "Schibsted Grotesk", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.article-faq details { border-top: 1px solid var(--line); }
.article-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.article-faq summary { list-style: none; cursor: pointer; padding: 16px 30px 16px 0; position: relative; font-family: "Schibsted Grotesk", sans-serif; font-size: 16px; font-weight: 600; }
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-family: "IBM Plex Mono", monospace; color: var(--accent); font-size: 18px; }
.article-faq details[open] summary::after { content: "–"; }
.article-faq .a { padding: 0 20px 18px 0; font-size: 15.5px; line-height: 1.65; color: var(--text-soft); }

.related { margin-top: 46px; }
.related .rk { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 12px; }
.related a { display: block; padding: 12px 0; border-top: 1px solid var(--line); font-family: "Schibsted Grotesk", sans-serif; font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.related a:last-child { border-bottom: 1px solid var(--line); }
.related a:hover { color: var(--accent); }

.article-disc { margin-top: 40px; font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.6; color: var(--text-faint); }

/* Article meta (byline / dates) — E-E-A-T signal */
.article-meta { margin: 18px 0 0; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--text-faint); line-height: 1.7; }
.article-meta span { margin: 0 8px; color: var(--line-hover); }
.article-meta .rev { color: var(--text-soft); }

/* Sources & references — YMYL trust / citations */
.article-sources { margin: 40px 0 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-md, 12px); background: #fff; }
.article-sources .sk { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 12px; }
.article-sources ul { margin: 0; padding-left: 18px; }
.article-sources li { font-size: 14px; line-height: 1.55; color: var(--text-soft); margin-top: 8px; }
.article-sources a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.article-sources a:hover { text-decoration-color: var(--accent); }
.article-sources .note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }

/* Current-rate note — dated, self-correcting */
.ratenote { margin: 30px 0 0; padding: 14px 18px; border-left: 3px solid var(--green, #6ec489); background: var(--accent-soft, rgba(47,88,119,0.06)); border-radius: var(--radius-sm, 8px); font-size: 14px; line-height: 1.6; color: var(--text-soft); }
.ratenote strong { color: var(--text); font-weight: 600; }

/* Comparison table — extractable for AEO */
.article-body .table-wrap { margin: 24px 0 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md, 12px); }
.article-body table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 460px; }
.article-body thead th { text-align: left; padding: 12px 16px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; background: var(--accent-soft, rgba(47,88,119,0.06)); border-bottom: 1px solid var(--line); }
.article-body tbody th { text-align: left; padding: 13px 16px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line); vertical-align: top; width: 32%; }
.article-body tbody td { padding: 13px 16px; color: var(--text-soft); border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.article-body tbody tr:last-child th, .article-body tbody tr:last-child td { border-bottom: none; }

/* ===== Editorial components (the pillar's component library) ===== */

/* Section kicker — mono label above each H2 (Stripe-docs feel) */
.article-body .kicker { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 56px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.article-body .kicker + h2 { margin-top: 10px; }

/* Key facts strip */
.keyfacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md, 12px); overflow: hidden; margin: 34px 0 0; }
.keyfacts div { background: #fff; padding: 18px 20px; }
.keyfacts .n { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.keyfacts .v { font-family: "Schibsted Grotesk", sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; color: var(--text); line-height: 1.2; }

/* Callout aside — a side-note inside the flow */
.callout { margin: 30px 0 0; padding: 20px 22px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm, 8px); background: #fff; }
.callout .ck { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.callout p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--text-soft); }
.callout p + p { margin-top: 10px; }
.callout strong { color: var(--text); font-weight: 600; }

/* Pull quote */
.pullquote { margin: 42px 0 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--accent); }
.pullquote p { font-family: "Schibsted Grotesk", sans-serif; font-size: 23px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.36; color: var(--text); margin: 0; }

/* Worked example card */
.example { margin: 34px 0 0; border: 1px solid var(--line); border-radius: var(--radius-md, 12px); overflow: hidden; background: #fff; }
.example .eh { background: var(--panel); color: #fff; padding: 13px 22px; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.example .eb { padding: 20px 22px; }
.example .row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.example .row:last-child { border-bottom: none; }
.example .row .l { color: var(--text-soft); }
.example .row .r { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.example .row.total .l, .example .row.total .r { color: var(--accent); font-weight: 700; }
.example .fine { margin: 12px 0 0; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; line-height: 1.5; color: var(--text-faint); }

@media (max-width: 640px) { .learn-grid { grid-template-columns: 1fr; } .keyfacts { grid-template-columns: 1fr; } }


/* ── Long-form content beneath a product calculator ───────────────────────────
   The calculator above sits in the full 1200px product frame. Dropping the
   explainer into a 720px column left a jarring step — a wide tool above, a
   narrow strip below, on a page asking people to commit serious money.

   So the PANEL spans the same width and aligns to the same edges, and the
   READING MEASURE is controlled inside it. Wide frame, comfortable line length,
   edges that line up. */
.product-article {
  width: 100%;
  margin: 56px 0 0;
  padding: 64px 64px 68px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 4px);
}
.product-article > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.product-article .article-body { margin-top: 0; }
.product-article .article-body > h2:first-child { margin-top: 0; }
.product-article .article-faq { margin-top: 56px; }
.product-article .related { margin-top: 56px; }

@media (max-width: 900px) {
  .product-article { padding: 40px 32px 44px; margin-top: 40px; }
}
@media (max-width: 620px) {
  .product-article { padding: 32px 22px 36px; }
}

/* ── Related-reading cards ────────────────────────────────────────────────────
   The grid stretches every card in a row to the tallest one, so a card whose
   neighbour has a two-line title gets a void under its text — measured at 44px
   against 13px everywhere else. Card content varies by nature and always will,
   so let each card hug its own content rather than trying to police the copy
   into equal lengths forever. */
/* EVERY card the same size. `align-items: start` let each hug its own content,
   which removed the voids but produced three different card heights in one
   grid — worse, and against the point of a grid. `grid-auto-rows: 1fr` makes
   every row match the tallest, so all six are identical whatever the copy does.
   The card is a flex column so its content sits from the top rather than
   floating in the middle of the extra space. */
.related .learn-grid { grid-auto-rows: 1fr; gap: 16px; }
.related .learn-card { display: flex; flex-direction: column; padding: 22px 24px 24px; }
.related .learn-card h3 { text-wrap: balance; }
.related h2 { margin-bottom: 18px; }