/* The public resources — /articles, /guides and their pages — on a phone
   ("Option A", the design handoff of 2026-10-08). resources_shell.py renders
   the pieces (every class here starts res- or ec-), resources.js and
   earnings-calc.js add behaviour.

   Scope: ≤ 640px is the redesign. Above it the pages keep their layout, with
   two deliberate exceptions the handoff asks for at every width: the public
   guides wear the site's light brand theme (no dark docs theme), and the
   earnings calculator is the rebuilt one.

   Rules of the system: cards are a 1px --r-line border (no heavy ink borders —
   ink is for a selected state); text on the brand colour is ink below 24px;
   touch targets ≥ 44px; every number tabular. */

@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"); size-adjust: 96%; ascent-override: 98%; descent-override: 26%; }
@font-face { font-family: "Caprasimo Fallback"; src: local("Georgia"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; }

body.res {
  --r-ink: #1A1713; --r-ink-2: #4A443C; --r-muted: #6B6358;
  --r-bg: #F7F0E2; --r-surface: #FFFCF5; --r-sunk: #EFE6D3;
  --r-line: #E6DCC8; --r-line-soft: #EFE6D3; --r-line-strong: #D9CDB5;
  --r-brand: #E4572E; --r-brand-ink: #B83F1C;
  --r-sun: #F2B33D; --r-sun-soft: #FBE6B8;
  --r-gain: #1F6A47; --r-gain-dark: #9FD8B9; --r-loss-dark: #F4A98C;
  --r-warn-soft: #FBE3D9; --r-warn-ink: #7A2A12;
  --r-dark-2: #24201B; --r-dark-3: #2A251F; --r-dark-line: #3A342C;
  --r-cream: #FFF8EC; --r-muted-dark: #CFC6B5;
  --r-card: 20px; --r-tile: 14px; --r-pill: 999px;
  --r-float: 0 12px 28px -12px rgba(26,23,19,.55);
  --r-head: 56px;
  font-family: "Instrument Sans", "Instrument Sans Fallback", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
body.res .display { font-family: "Caprasimo", "Caprasimo Fallback", Georgia, serif; }
@media (prefers-reduced-motion: no-preference) { html:has(body.res) { scroll-behavior: smooth; } }
body.res h2[id], body.res #calculator, body.res #impact { scroll-margin-top: calc(var(--r-head) + 56px); }

/* Phone-only and desktop-only pieces. */
@media (min-width: 641px) { body.res .res-m { display: none !important; } }
@media (max-width: 640px) { body.res .res-d { display: none !important; } }

/* ── shared atoms ─────────────────────────────────────────────────────────── */
.res-tag { flex: none; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--r-ink); background: var(--r-sunk); }
.res-tag-sun { background: var(--r-sun); }
.res-btn { height: 48px; border-radius: 24px; font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1; display: flex; align-items: center;
           justify-content: center; gap: 8px; text-decoration: none; cursor: pointer; padding: 0 14px; }
.res-btn-line { border: 1px solid var(--r-ink); background: transparent; color: var(--r-ink); }
.res-btn-ink { border: 0; background: var(--r-ink); color: var(--r-cream); }
body.res .res-btn-line:hover { color: var(--r-ink); } body.res .res-btn-ink:hover { color: var(--r-cream); }
.res-btn:focus-visible, .res-row:focus-visible, .res-feat:focus-visible { outline: 2.5px solid var(--r-brand-ink); outline-offset: 2px; }
.res-chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.res-chip { padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.res-chip-ink { background: var(--r-ink); color: var(--r-cream); }
.res-chip-sun { background: var(--r-sun); color: var(--r-ink); }
.res-chip-cream { background: var(--r-surface); color: var(--r-ink); box-shadow: inset 0 0 0 1px var(--r-line); }
.res-crumb { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--r-ink); }
body.res .res-crumb a { color: var(--r-ink); text-decoration: underline; }
.res-h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--r-muted); }
.res-sun { color: var(--r-sun); }

/* Rows: the hub's lists, "Keep going". */
.res-list { background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--r-card); overflow: hidden; }
.res-row { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; color: var(--r-ink); text-decoration: none; min-height: 44px; }
body.res .res-row:hover { color: var(--r-ink); background: rgba(239,230,211,.45); }
.res-list .res-row + .res-row { border-top: 1px solid var(--r-line-soft); }
.res-list .res-row.res-first { border-top: 0; }
.res-row > svg { flex: none; color: var(--r-muted); }
.res-row-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.res-kind { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--r-brand-ink); }
.res-kind-g { color: var(--r-gain); }
.res-row-t { margin-top: 3px; font-size: 16px; font-weight: 600; line-height: 1.28; }
.res-meta { margin-top: 4px; font-size: 13px; color: var(--r-muted); }
.res-tile { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.res-card { background: var(--r-surface); border: 1px solid var(--r-line); border-radius: 18px; padding: 14px; gap: 14px; }
.res-stack { display: flex; flex-direction: column; gap: 10px; }

/* ── the phone shell ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.res .wrap { padding: 0 16px; }
  /* header: 56px, logo + Try free + menu */
  body.res .nav { padding: 8px 0; min-height: var(--r-head); }
  body.res .word svg { width: 28px; height: 28px; }
  body.res .word span { font-size: 22px; }
  .res-try { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--r-cream);
             color: var(--r-ink) !important; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  body.res .nav-actions { gap: 6px; }

  /* article hero: compact, left-aligned on a phone (paper at every width since 2026-10-10) */
  body.res-article .hero-leaf, body.res-article .hero .stage, body.res-article .hero .cta-row,
  body.res-article .hero .cta-note, body.res-article .hero .eyebrow { display: none; }
  body.res-article .hero-grid { padding: 18px 0 24px; gap: 0; text-align: left; }
  body.res-article .hero h1.display { margin: 10px 0 12px; font-size: 32px; line-height: 1.05; letter-spacing: -.01em; color: var(--r-ink); }
  body.res-article .hero .sub { margin: 0; font-size: 17px; line-height: 1.45; color: var(--r-ink); opacity: 1; }

  .res-top { padding-top: 16px; }
  .res-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
  .res-incard { margin-top: 16px; background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--r-card); padding: 14px 16px 4px; }
  .res-incard-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--r-muted); }
  .res-incard-h span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .08em; }
  .res-incard ol { margin: 6px 0 0; padding: 0; list-style: none; }
  .res-incard li { border-bottom: 1px solid var(--r-line-soft); }
  .res-incard li a { display: flex; gap: 12px; align-items: center; min-height: 46px; color: var(--r-ink); text-decoration: none; }
  .res-n { width: 20px; flex: none; font-family: "Caprasimo", "Caprasimo Fallback", Georgia, serif; font-size: 15px; color: var(--r-brand-ink); }
  .res-l { flex: 1; font-size: 15px; line-height: 1.3; }
  .res-more { width: 100%; height: 44px; border: 0; background: transparent; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1; color: var(--r-ink);
              display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
  .res-more[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* the chapter bar: sticky under the header once the reader is past the card */
  .res-chap { position: fixed; left: 0; right: 0; top: var(--r-head); z-index: 19; background: var(--r-bg); border-bottom: 1px solid var(--r-line); }
  .res-chap[hidden] { display: none !important; }
  .res-chap-btn { width: 100%; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 0; background: transparent;
                  font-family: inherit; font-size: 14px; line-height: 1; color: var(--r-ink); cursor: pointer; text-align: left; }
  .res-chap-n { font-weight: 700; color: var(--r-brand-ink); }
  .res-chap-t { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .res-chap-c { display: flex; align-items: center; gap: 4px; color: var(--r-ink-2); font-weight: 500; }
  .res-chap-p { height: 3px; background: var(--r-sunk); }
  .res-chap-p i { display: block; height: 3px; width: 0; background: var(--r-brand); }

  /* body text and headings */
  body.res .section { padding: 40px 0 0; }
  body.res .section + .closing { margin-top: 40px; }
  body.res .section .eyebrow, body.res .timeback .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--r-brand-ink) !important; }
  body.res .section h2.display, body.res .timeback h2.display { margin: 6px 0 14px; font-size: 27px; line-height: 1.12; }
  body.res .section .lead, body.res .timeback .lead { font-size: 17px; line-height: 1.6; color: var(--r-ink); }

  /* figure list: one card, hairline rows */
  body.res .prog { display: block; margin-top: 18px; background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--r-card); padding: 0 16px; }
  body.res .prog > div { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--r-line-soft); padding: 14px 0; }
  body.res .prog > div:first-child { border-top: 0; }
  body.res .prog b { font-family: "Caprasimo", "Caprasimo Fallback", Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1.15; }
  body.res .prog span { display: block; color: var(--r-ink-2); font-size: 15px; line-height: 1.45; }
  body.res .prog span b { font-family: inherit; font-size: inherit; font-weight: 700; display: inline; }

  /* callout */
  .res-callout { margin-top: 20px; background: var(--r-sun-soft); border-radius: var(--r-card); padding: 18px 18px 18px 16px; display: flex; gap: 12px; }
  .res-callout svg { flex: none; margin-top: 2px; }
  .res-callout p { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 600; }

  /* stacked bar */
  .res-split { margin: 18px 0 0; background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--r-card); padding: 16px; }
  .res-split figcaption { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
  .res-split figcaption span { font-size: 13px; color: var(--r-muted); }
  .res-split-bar { margin-top: 12px; display: flex; gap: 2px; height: 26px; border-radius: 8px; overflow: hidden; }
  .res-split dl { margin: 12px 0 0; }
  .res-split dl div { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px; }
  .res-split dt { flex: 1; display: flex; align-items: center; gap: 10px; }
  .res-split dt i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
  .res-split dd { margin: 0; font-weight: 700; }
  .res-split .res-keep-row dt { font-weight: 700; }

  /* numbered list: orange dots, hairline rows */
  body.res ol.steps { gap: 0; margin-top: 18px; }
  body.res ol.steps li { background: none; border: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--r-line);
                         padding: 14px 0 14px 42px; font-size: 15px; line-height: 1.5; color: var(--r-ink-2); }
  body.res ol.steps li::before { left: 0; top: 14px; width: 28px; height: 28px; font-size: 14px; background: var(--r-brand); color: var(--r-ink);
                                 border: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
  body.res ol.steps li > b:first-child { display: block; font-size: 16px; color: var(--r-ink); }
  body.res ol.steps li.res-cost > b:first-child { padding-right: 96px; }
  .res-amt { position: absolute; right: 0; top: 14px; font-size: 16px; font-weight: 700; color: var(--r-ink); white-space: nowrap; }

  /* scenario tiles, the recommended one in ink */
  body.res .two { display: block; }
  body.res .two > .prog { display: none; }
  .res-tiles { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .res-tiles > div { background: var(--r-surface); border: 1px solid var(--r-line); border-radius: 18px; padding: 14px; }
  .res-tiles span, .res-tiles small { display: block; font-size: 13px; color: var(--r-muted); }
  .res-tiles b { display: block; margin: 6px 0 4px; font-family: "Caprasimo", "Caprasimo Fallback", Georgia, serif; font-weight: 400; font-size: 26px; }
  .res-tiles .res-tile-ink { background: var(--r-ink); border-color: var(--r-ink); color: var(--r-cream); }
  .res-tiles .res-tile-ink span, .res-tiles .res-tile-ink small { color: var(--r-muted-dark); }
  .res-tiles .res-tile-ink b { color: var(--r-sun); }

  /* tool teaser (and the hub's featured card share the figures) */
  .res-teaser { margin-top: 32px; display: block; background: var(--r-ink); color: var(--r-cream) !important; border-radius: 24px; padding: 18px 16px 16px;
                text-decoration: none; box-shadow: 0 18px 36px -20px rgba(26,23,19,.7); }
  .res-teaser-e { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--r-sun); }
  .res-teaser-t { display: block; margin-top: 6px; font-family: "Caprasimo", "Caprasimo Fallback", Georgia, serif; font-size: 26px; line-height: 1.1; }
  .res-teaser-b { margin-top: 14px; height: 48px; border-radius: 24px; background: var(--r-sun); color: var(--r-ink); font-size: 15px; font-weight: 700;
                  display: flex; align-items: center; justify-content: center; }

  /* the "what the spreadsheet never shows" style card lists → one card */
  body.res .timeback { padding: 40px 0 0; }
  body.res .benefits { margin-top: 18px; display: block; background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--r-card); padding: 0 16px; }
  body.res .benefit { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 14px 0; border-top: 1px solid var(--r-line-soft); }
  body.res .benefit:first-child { border-top: 0; }
  body.res .benefit .name { font-size: 16px; }
  body.res .benefit p { margin-top: 4px; font-size: 15px; color: var(--r-ink-2); }

  /* Good to know: one card, rows that open */
  body.res .faq { gap: 0; margin-top: 12px; background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--r-card); padding: 0 16px; }
  body.res .faq details { background: none; border: 0; border-radius: 0; padding: 0; border-top: 1px solid var(--r-line-soft); }
  body.res .faq details:first-child { border-top: 0; }
  body.res .faq summary { min-height: 56px; display: flex; align-items: center; gap: 10px; font-size: 16px; padding: 4px 0; }
  body.res .faq summary::after { content: ""; margin-left: auto; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--r-ink);
                                 border-bottom: 2px solid var(--r-ink); transform: rotate(45deg) translateY(-3px); float: none; }
  body.res .faq details[open] summary::after { content: ""; transform: rotate(-135deg) translateY(-3px); }
  body.res .faq details p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--r-ink-2); }

  /* Keep going */
  .res-keep { padding-top: 36px; }
  .res-keep .res-row-t { margin-top: 2px; }
  .res-keep .res-meta { margin-top: 2px; }

  /* the closing (on paper since 2026-10-10) */
  body.res .closing { padding: 32px 0; }
  body.res .closing .leaf-bg { display: none; }
  body.res .closing h2 { font-size: 30px; line-height: 1.08; }
  body.res .closing p { font-size: 17px; line-height: 1.45; color: var(--r-ink-2); }
  body.res .closing .closing-grid { display: grid; gap: 18px; }
  body.res .closing .btn-ink { display: flex; align-items: center; justify-content: center; height: 52px; width: 100%; border-radius: 26px; }
}

/* ── the contents sheet ───────────────────────────────────────────────────── */
.res-sheet-back { position: fixed; inset: 0; z-index: 60; background: rgba(26,23,19,.5); }
.res-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
             background: var(--r-bg); color: var(--r-ink); border-radius: 24px 24px 0 0;
             padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 32px -16px rgba(26,23,19,.5); }
.res-sheet[hidden], .res-sheet-back[hidden] { display: none; }
.res-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--r-muted-dark); margin: 0 auto 14px; }
.res-sheet-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.res-sheet-top h3 { margin: 0; font-family: "Caprasimo", "Caprasimo Fallback", Georgia, serif; font-weight: 400; font-size: 24px; }
.res-sheet-sub { margin: 2px 0 0; font-size: 13px; color: var(--r-muted); }
.res-x { width: 44px; height: 44px; flex: none; border-radius: 22px; border: 0; background: var(--r-sunk); color: var(--r-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.res-sheet-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.res-sheet-list a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 10px; border-radius: 12px; color: var(--r-ink); text-decoration: none; }
.res-sheet-list a[aria-current="location"] { background: var(--r-surface); box-shadow: inset 0 0 0 1px var(--r-ink); font-weight: 700; }
.res-dot { width: 26px; height: 26px; flex: none; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
           background: var(--r-sunk); color: var(--r-ink-2); }
.res-sheet-list a.res-done .res-dot { background: var(--r-gain); color: #fff; }
.res-sheet-list a[aria-current="location"] .res-dot { background: var(--r-brand); color: var(--r-ink); }
.res-sheet-foot { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html.res-locked { overflow: hidden; }
.res-sheet a:focus-visible, .res-sheet button:focus-visible { outline: 2.5px solid var(--r-brand-ink); outline-offset: 2px; }

/* ── the hub ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.res-hubpage .hero, body.res-hubpage .timeback { display: none; }
  body.res-hubpage .footer { padding-bottom: 104px; }
  .res-hub { padding: 22px 16px 24px; }
  .res-eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--r-brand-ink); }
  .res-h1 { margin: 8px 0; font-family: "Caprasimo", "Caprasimo Fallback", Georgia, serif; font-weight: 400; font-size: 32px; line-height: 1.05; letter-spacing: -.01em; }
  .res-lede { margin: 0; font-size: 16px; line-height: 1.45; color: var(--r-ink-2); }
  .res-seg { margin-top: 16px; padding: 4px; background: var(--r-sunk); border-radius: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .res-seg-b { height: 40px; border-radius: 10px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px;
               color: var(--r-ink-2) !important; text-decoration: none; }
  .res-seg-b[aria-current="page"] { background: var(--r-surface); color: var(--r-ink) !important; box-shadow: 0 1px 2px rgba(26,23,19,.12); }
  .res-count { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: #E2D7C1; color: var(--r-ink-2); }
  .res-seg-b[aria-current="page"] .res-count { background: var(--r-ink); color: var(--r-cream); }
  .res-fchips { display: flex; gap: 8px; padding: 14px 16px 2px; margin: 0 -16px; overflow-x: auto; scrollbar-width: none; }
  .res-fchips::-webkit-scrollbar { display: none; }
  .res-fchip { flex: none; height: 36px; padding: 0 14px; border-radius: 18px; font-family: inherit; font-weight: 500; font-size: 14px; line-height: 1; cursor: pointer;
               border: 1px solid var(--r-line-strong); background: var(--r-surface); color: var(--r-ink); }
  .res-fchip[aria-pressed="true"] { border-color: var(--r-ink); background: var(--r-ink); color: var(--r-cream); }
  .res-hub-list { padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }
  .res-note { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--r-ink-2); }
  .res-empty { margin: 0; font-size: 14px; color: var(--r-muted); }
  .res-feat { display: block; background: var(--r-ink); color: var(--r-cream) !important; border-radius: var(--r-card); padding: 16px 16px 14px;
              text-decoration: none; box-shadow: 0 10px 24px -14px rgba(26,23,19,.6); }
  .res-feat-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--r-muted-dark); }
  .res-feat-top span:first-child { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--r-sun); }
  .res-feat-t { display: block; margin-top: 8px; font-size: 19px; font-weight: 600; line-height: 1.25; }
  .res-feat-go { margin-top: 12px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
  .res-sticky { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 30; background: var(--r-ink);
                color: var(--r-cream); border-radius: 18px; padding: 8px 8px 8px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--r-float);
                transition: transform .2s ease, opacity .2s ease; }
  .res-sticky p { flex: 1; margin: 0; font-size: 14px; line-height: 1.3; }
  .res-sticky p span { color: var(--r-muted-dark); }
  .res-sticky a { flex: none; height: 44px; padding: 0 18px; border-radius: 22px; background: var(--r-sun); color: var(--r-ink) !important; font-size: 15px;
                  font-weight: 700; display: flex; align-items: center; text-decoration: none; }
  .res-sticky.res-away { transform: translateY(140%); opacity: 0; pointer-events: none; }
}
.res-feat-figs { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--r-dark-line); border-radius: 12px; overflow: hidden; }
.res-feat-figs > span { background: var(--r-dark-2); padding: 10px 12px; display: flex; flex-direction: column; }
.res-feat-figs > span > span { font-size: 12px; color: var(--r-muted-dark); }
.res-feat-figs b { margin-top: 2px; font-family: "Caprasimo", "Caprasimo Fallback", Georgia, serif; font-weight: 400; font-size: 22px; }
@media (prefers-reduced-motion: reduce) { .res-sticky { transition: none; } }

/* ── the public guides: the site's light brand theme, every width ──────────── */
body.res-guide { background: var(--r-bg); color: var(--r-ink); margin: 0; }
body.res-guide .help-frame { display: block; }
/* the guide's hero: paper, like every hero since 2026-10-10 — centred on a desktop, compact and left-aligned on a phone */
.res-ghero { background: var(--r-bg); padding: 18px 16px 24px; border-bottom: 1px solid var(--r-line); }
.res-gwrap { max-width: 46rem; margin: 0 auto; }
.res-ghero .eyebrow { margin: 0 0 10px; color: var(--r-brand-ink); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.res-ghero h1.display { margin: 10px 0 12px; font-size: 32px; line-height: 1.05; letter-spacing: -.01em; color: var(--r-ink); }
.res-gmeta { margin: 0; font-size: 17px; line-height: 1.45; color: var(--r-ink-2); }
body.res-guide .res-top .res-gwrap { padding: 0 16px; }
body.res-guide .help-main { max-width: 46rem; margin: 0 auto; padding: 8px 16px 8px; }
body.res-guide .prose h2 { margin: 36px 0 12px; font-family: "Caprasimo", "Caprasimo Fallback", Georgia, serif; font-weight: 400; font-size: 27px; line-height: 1.12; color: var(--r-ink); }
body.res-guide .prose h2.res-step { display: flex; gap: 12px; align-items: flex-start; }
body.res-guide .prose h2.res-step::before { content: attr(data-step); flex: none; width: 32px; height: 32px; margin-top: 1px; border-radius: 50%;
  background: var(--r-brand); color: var(--r-ink); font: 700 15px/32px "Instrument Sans", "Instrument Sans Fallback", system-ui, sans-serif; text-align: center; }
body.res-guide .prose h3 { margin: 24px 0 8px; font-size: 18px; font-weight: 700; }
body.res-guide .prose p, body.res-guide .prose li { font-size: 17px; line-height: 1.6; color: var(--r-ink); }
body.res-guide .prose p { margin: 0 0 16px; }
body.res-guide .prose ol, body.res-guide .prose ul { margin: 0 0 16px; padding-left: 22px; }
body.res-guide .prose ol { list-style: decimal; } body.res-guide .prose ul { list-style: disc; }
body.res-guide .prose li { margin: 6px 0; }
body.res-guide .prose a { color: var(--r-brand-ink); text-decoration: underline; overflow-wrap: anywhere; }
body.res-guide .prose strong { font-weight: 700; }
body.res-guide .prose code { background: var(--r-sunk); padding: 1px 6px; border-radius: 6px; font-size: .88em; overflow-wrap: anywhere; }
body.res-guide .prose img { max-width: 100%; height: auto; border-radius: 12px; }
body.res-guide .note { margin: 20px 0; background: var(--r-sun-soft); border: 0; border-radius: var(--r-card); padding: 16px 18px; }
body.res-guide .note.warn, body.res-guide .note.warning { background: var(--r-warn-soft); }
body.res-guide .note.warn p, body.res-guide .note.warning p { color: var(--r-warn-ink); }
body.res-guide .note p { margin: 0; font-size: 16px; }
body.res-guide .note p + p { margin-top: 8px; }
@media (min-width: 641px) {
  .res-ghero { padding: 40px 24px 44px; text-align: center; }
  .res-ghero .eyebrow { margin-bottom: 0; }
  .res-ghero h1.display { margin: 14px auto 0; font-size: clamp(36px, 5vw, 56px); line-height: 1.04; }
  .res-gmeta { margin: 14px auto 0; font-size: clamp(17px, 2vw, 20px); max-width: 44ch; }
  body.res-guide .help-main { padding: 24px 24px 16px; }
}

/* ── the earnings calculator (every width) ─────────────────────────────────── */
.ec { margin-top: 22px; }
.ec-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .ec-grid { grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } }
.ec-in, .ec-out { display: grid; gap: 12px; min-width: 0; align-content: start; }
.ec-card { background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--r-card); padding: 6px 14px; }
.ec-card-h { display: flex; justify-content: space-between; align-items: center; height: 40px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--r-muted); }
.ec-reset { height: 36px; padding: 0 4px; border: 0; background: transparent; font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1; color: var(--r-ink-2); text-decoration: underline; cursor: pointer; }
.ec-row { display: flex; align-items: center; gap: 10px; min-height: 64px; border-top: 1px solid var(--r-line-soft); }
.ec-lab { flex: 1; min-width: 0; }
.ec-lab span { display: block; font-size: 15px; font-weight: 600; }
.ec-lab small { display: block; font-size: 12px; color: var(--r-muted); margin-top: 1px; }
.ec-step { display: flex; align-items: center; flex: none; border: 1px solid var(--r-line-strong); border-radius: 22px; background: var(--r-bg); }
.ec-step button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--r-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 22px; }
.ec-step input { width: 66px; height: 44px; border: 0; background: transparent; text-align: center; font-family: inherit; font-weight: 700; font-size: 17px; line-height: 1;
                 color: var(--r-ink); font-variant-numeric: tabular-nums; -moz-appearance: textfield; padding: 0; }
.ec-step input::-webkit-outer-spin-button, .ec-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ec-step button:focus-visible, .ec-step input:focus-visible { outline: 2.5px solid var(--r-brand-ink); outline-offset: 1px; }
.ec-costs { padding: 0 14px; }
.ec-costs summary { list-style: none; min-height: 64px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ec-costs summary::-webkit-details-marker { display: none; }
.ec-costs summary > span:first-child { flex: 1; }
.ec-costs summary b { display: block; font-size: 15px; }
.ec-costs summary small { display: block; font-size: 12px; color: var(--r-muted); margin-top: 1px; }
.ec-costs-v { font-size: 16px; font-weight: 700; }
.ec-costs summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--r-ink); border-bottom: 2px solid var(--r-ink); transform: rotate(45deg) translateY(-3px); flex: none; }
.ec-costs[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.ec-today { padding: 16px; }
.ec-cap { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--r-muted); }
.ec-big { margin: 6px 0 0; font-family: "Caprasimo", "Caprasimo Fallback", Georgia, serif; font-size: 40px; line-height: 1; }
.ec-rate { margin: 6px 0 0; font-size: 14px; color: var(--r-ink-2); }
.ec-dl { margin: 14px 0 0; display: flex; flex-direction: column; }
.ec-dl div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--r-line-soft); font-size: 15px; }
.ec-dl dt { color: var(--r-ink-2); } .ec-dl dd { margin: 0; font-weight: 600; }
.ec-dl .ec-lost { margin-top: 6px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--r-warn-soft); color: var(--r-warn-ink); }
.ec-dl .ec-lost dt { color: var(--r-warn-ink); font-weight: 600; } .ec-dl .ec-lost dd { font-weight: 700; }
.ec-note { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--r-muted); }
.ec-pam { background: var(--r-ink); color: var(--r-cream); border-radius: 24px; padding: 18px 16px 16px; box-shadow: 0 18px 36px -18px rgba(26,23,19,.7); }
.ec-pam-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--r-sun); }
.ec-price { padding: 3px 8px; border-radius: 6px; background: var(--r-dark-3); font-weight: 400; letter-spacing: 0; color: var(--r-muted-dark); white-space: nowrap; }
.ec-gain { margin: 8px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ec-gain b { font-family: "Caprasimo", "Caprasimo Fallback", Georgia, serif; font-weight: 400; font-size: 54px; line-height: .95; color: var(--r-sun); }
.ec-gain span { font-size: 15px; color: #E6DDCB; }
.ec-bars { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.ec-bars p { margin: 0 0 5px; display: flex; justify-content: space-between; font-size: 13px; }
.ec-bars p span { color: var(--r-muted-dark); } .ec-bars p .ec-sun { color: var(--r-sun); font-weight: 600; }
.ec-track { height: 12px; border-radius: 6px; background: var(--r-dark-3); }
.ec-track i { display: block; height: 12px; border-radius: 6px; background: #8C8273; }
.ec-track i.ec-bar-sun { background: var(--r-sun); }
.ec-tiles { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--r-dark-line); border-radius: 14px; overflow: hidden; }
.ec-tiles div { background: var(--r-dark-2); padding: 10px; min-width: 0; }
.ec-tiles b { display: block; font-size: 17px; font-weight: 700; }
.ec-tiles span { display: block; font-size: 12px; color: var(--r-muted-dark); margin-top: 2px; }
.ec-teach { margin-top: 18px; }
.ec-q { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.ec-seg { margin-top: 10px; display: flex; gap: 6px; }
.ec-seg button { flex: 1; height: 44px; border-radius: 12px; font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer;
                 border: 1px solid var(--r-ink-2); background: transparent; color: var(--r-cream); }
.ec-seg button[aria-checked="true"] { border-color: var(--r-sun); background: var(--r-sun); color: var(--r-ink); }
.ec-seg button:focus-visible { outline: 2.5px solid var(--r-cream); outline-offset: 2px; }
.ec-tnote { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--r-muted-dark); }
.ec-break { margin: 16px 0 0; padding: 4px 12px; border-radius: 14px; background: var(--r-dark-2); }
.ec-break div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; }
.ec-break div + div { border-top: 1px solid var(--r-dark-line); }
.ec-break dt { color: #E6DDCB; } .ec-break dd { margin: 0; font-weight: 700; white-space: nowrap; }
.ec-up { color: var(--r-gain-dark); } .ec-down { color: var(--r-loss-dark); }
.ec-break .ec-keep { font-size: 15px; } .ec-break .ec-keep dt { color: var(--r-cream); font-weight: 700; } .ec-break .ec-keep dd { color: var(--r-sun); }
.ec-cta { margin-top: 16px; height: 52px; border-radius: 26px; background: var(--r-sun); color: var(--r-ink) !important; font-size: 16px; font-weight: 700;
          display: flex; align-items: center; justify-content: center; text-decoration: none; }
.ec-cta:focus-visible { outline: 2.5px solid var(--r-cream); outline-offset: 2px; }
.ec-small { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--r-muted-dark); }
.ec-disc { margin: 14px 4px 0; font-size: 12.5px; line-height: 1.5; color: var(--r-muted); max-width: 70ch; }
.ec-sticky { display: none; }
@media (max-width: 640px) {
  .ec-sticky:not([hidden]) { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 25;
    background: var(--r-surface); border: 1px solid var(--r-line); border-radius: 18px; padding: 8px 8px 8px 14px; display: flex; align-items: center; gap: 10px;
    box-shadow: 0 12px 28px -14px rgba(26,23,19,.45); }
  .ec-sticky > div { flex: 1; min-width: 0; }
  .ec-sticky small { display: block; font-size: 12px; color: var(--r-muted); }
  .ec-sticky > div b { display: block; font-size: 18px; font-weight: 700; }
  .ec-sticky a { height: 46px; padding: 0 14px; border-radius: 23px; background: var(--r-ink); color: var(--r-cream) !important; display: flex; align-items: center;
                 gap: 8px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .ec-sticky a b { font-size: 16px; color: var(--r-sun); }
  #calculator { padding-bottom: 84px; }
  .ec-gain b { font-size: 48px; }
}