/* ============================================================
   Lean Finance — minimal multi-theme scaffold
   Neutral base + three swappable theme accents:
     .theme-blue   → Strategic Finance Partner
     .theme-green  → Investment Analytics & Advice
     .theme-yellow → Money Advice
   Type: Newsreader (serif headings) · Hanken Grotesk (sans) · Space Mono (labels/data)
   ============================================================ */

:root {
  --bg: #f6f5f0;
  --surface: #ffffff;
  --surface-2: #efeee7;
  --ink: #17160f;
  --ink-soft: #56544a;
  --ink-faint: #918d7e;
  --line: #e3e1d6;
  --line-soft: #edebe2;

  /* neutral accent (landing default) */
  --accent: #2a2820;
  --accent-dark: #17160f;
  --accent-soft: #eeece4;
  --accent-ink: #2a2820;
  --block-bg: #1d1c15;
  --block-ink: #f3f1e7;

  --up: #2f6b46;
  --down: #b1543b;

  --serif: "Newsreader", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --maxw: 1180px;
  --gutter: 40px;
  --radius: 6px;
  --section-y: 104px;

  --shadow-sm: 0 1px 2px rgba(23,22,15,.05);
  --shadow-md: 0 22px 50px -30px rgba(23,22,15,.4), 0 2px 8px rgba(23,22,15,.04);
}

/* ---- theme accents ---- */
.theme-blue   { --accent:#1f4fa3; --accent-dark:#143468; --accent-soft:#e8eff9; --accent-ink:#1a4490; --block-bg:#1f4fa3; --block-ink:#eaf1fb; }
.theme-green  { --accent:#2f6b46; --accent-dark:#173a27; --accent-soft:#e7f0ea; --accent-ink:#265a3a; --block-bg:#2f6b46; --block-ink:#e9f2ec; }
.theme-yellow { --accent:#9a7410; --accent-dark:#5f470a; --accent-soft:#f7efd6; --accent-ink:#7c5d0c; --block-bg:#e7b62f; --block-ink:#2c2406; }

[data-density="compact"] { --section-y: 76px; }
[data-density="comfy"]   { --section-y: 140px; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: 1340px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.018em; margin: 0; }
h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1.0; }
h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.05; }
h3 { font-size: 21px; line-height: 1.15; font-weight: 500; }
.serif-it { font-style: italic; }
.display-num { font-variant-numeric: tabular-nums; }
.lede { font-size: clamp(17px, 1.2vw, 19px); color: var(--ink-soft); line-height: 1.55; max-width: 54ch; }

.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 700; display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
.eyebrow.no-rule::before { display: none; }
.mono-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 22px; border-radius: 3px;
  font-weight: 600; font-size: 15px; border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: #000; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 14px; }
.arrow { display: inline-block; transition: transform .2s ease; }
.btn:hover .arrow, .lnk:hover .arrow, .block:hover .arrow, .feed-row:hover .arrow { transform: translateX(4px); }
.lnk { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--accent-ink); }
.lnk:hover { color: var(--ink); }

/* ============================================================
   NAV (fixed)
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 68px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .25s ease, background .25s ease;
}
.nav.scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 93%, transparent); }
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); height: 100%; display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 18px; letter-spacing: -0.02em; font-weight: 500; white-space: nowrap; padding: 8px 16px 8px 10px; border-radius: 11px; background: #1f4fa3; color: #f6f5f0; }
.brand .mark { width: 24px; height: 24px; border-radius: 50%; background: #f6f5f0; display: grid; place-items: center; flex: none; }
.brand .mark svg { display: block; }
.brand .mark svg path { stroke: #1f4fa3; }
.brand .mark svg circle { fill: #1f4fa3; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.nav-links a { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; font-size: 14px; font-weight: 500; color: var(--ink-soft); transition: color .15s ease; white-space: nowrap; }
.nav-links a .dot { width: 7px; height: 7px; border-radius: 50%; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.current { color: var(--ink); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-cta .signin { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.nav-cta .signin:hover { color: var(--accent-ink); }
/* distinct "Fractional FD" pill — soft blue, always brand-blue regardless of page theme */
.btn-fd { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #1f4fa3; background: #e7eef9; border: 1px solid #cdddf3; white-space: nowrap; transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.btn-fd:hover { background: #dbe7f7; border-color: #1f4fa3; }
.btn-fd:active { transform: translateY(1px); }
.btn-fd .pulse { width: 7px; height: 7px; border-radius: 50%; background: #1f4fa3; box-shadow: 0 0 0 0 rgba(31,79,163,.5); animation: fdpulse 2.4s ease-out infinite; }
@keyframes fdpulse { 0% { box-shadow: 0 0 0 0 rgba(31,79,163,.45); } 70% { box-shadow: 0 0 0 6px rgba(31,79,163,0); } 100% { box-shadow: 0 0 0 0 rgba(31,79,163,0); } }
@media (prefers-reduced-motion: reduce) { .btn-fd .pulse { animation: none; } }
.dot-blue { background: #1f4fa3; } .dot-green { background: #2f6b46; } .dot-yellow { background: #e7b62f; }

/* ============================================================
   PAGE HEADER (hero) — minimal
   ============================================================ */
.phead { padding: 142px 0 0; }
.phead .eyebrow { margin-bottom: 22px; }
.phead h1 { max-width: 18ch; }
.phead .lede { margin-top: 22px; }
.phead .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.phead.themed { border-top: 3px solid var(--accent); }

/* tinted band for theme page heads */
.phead-band { background: var(--accent-soft); border-bottom: 1px solid var(--line); padding: 132px 0 56px; }
.phead-band .eyebrow { margin-bottom: 20px; }
.phead-band h1 { max-width: 16ch; }
.phead-band .lede { margin-top: 20px; color: var(--ink-soft); }
.phead-band .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.phead-band .meta-row { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.phead-band .meta-row .mi .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.phead-band .meta-row .mi .v { font-family: var(--serif); font-size: 24px; margin-top: 4px; white-space: nowrap; }

/* two-column hero: copy + sticky toolkit quick-reference rail */
.phead-grid { display: grid; grid-template-columns: minmax(0,1fr) 336px; gap: 54px; align-items: start; }
.phead-main { min-width: 0; }

.toolkit-rail { position: sticky; top: 94px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(20,19,13,.04); }
.tr-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.tr-head .tr-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.tr-head .tr-count { font-family: var(--mono); font-size: 10.5px; color: var(--accent-ink); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; font-weight: 700; }
.rail-list { display: flex; flex-direction: column; }
.rail-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--line-soft); transition: background .16s ease; }
.rail-item:hover { background: var(--accent-soft); }
.rail-item .ri-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; }
.rail-item:hover .ri-ic { background: var(--surface); }
.rail-item .ri-ic svg { width: 17px; height: 17px; }
.rail-item .ri-name { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2; }
.rail-item .ri-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.rail-item .ri-go { color: var(--ink-faint); display: grid; place-items: center; opacity: 0; transform: translateX(-3px); transition: opacity .16s ease, transform .16s ease; }
.rail-item:hover .ri-go { opacity: 1; transform: none; color: var(--accent-ink); }
.rail-soon { display: flex; align-items: center; gap: 10px; padding: 12px 18px; color: var(--ink-faint); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.rail-soon .plus { width: 32px; height: 32px; border-radius: 8px; border: 1px dashed var(--line-strong); display: grid; place-items: center; color: var(--ink-faint); flex: none; }

/* compact toolkit icon grid (no descriptions, built to expand) */
.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.titem { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; min-height: 132px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.titem:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 26px -18px rgba(20,43,30,.4); }
.titem .ti-ic { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; }
.titem .ti-ic svg { width: 22px; height: 22px; }
.titem .ti-name { font-family: var(--serif); font-size: 18px; font-weight: 400; letter-spacing: -.01em; line-height: 1.1; margin-top: auto; }
.titem .ti-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; }
.titem.add { border-style: dashed; align-items: center; justify-content: center; text-align: center; color: var(--ink-faint); gap: 10px; }
.titem.add:hover { border-color: var(--accent); transform: none; box-shadow: none; }
.titem.add .ti-ic { background: transparent; border: 1px dashed var(--line-strong); color: var(--ink-faint); }
.titem.add .ti-lab { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section { scroll-margin-top: 84px; }
.section { padding: var(--section-y) 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 40px; }
.sec-head .st h2 { margin-top: 12px; }
.sec-head .st .eyebrow { margin-bottom: 0; }

/* ============================================================
   BLOCKS — big "block effect" links to topics / calculators
   ============================================================ */
.blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.blocks.two { grid-template-columns: repeat(2, 1fr); }
.block {
  position: relative; display: flex; flex-direction: column;
  min-height: 200px; padding: 26px; border-radius: var(--radius);
  background: var(--block-bg); color: var(--block-ink); overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.block:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.block .b-no { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; opacity: .7; }
.block .b-title { font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -.02em; margin-top: 14px; line-height: 1.05; }
.block .b-desc { font-size: 14px; margin-top: 10px; opacity: .82; line-height: 1.45; }
.block .b-foot { margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; }
.block .b-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.block .b-go { width: 34px; height: 34px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; opacity: .85; }
.block.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.block.ghost .b-go { border-color: var(--line); }
.block.ghost:hover { border-color: var(--accent); }

/* compact block (smaller tiles) */
.block.sm { min-height: 150px; padding: 22px; }
.block.sm .b-title { font-size: 21px; margin-top: 10px; }

/* ============================================================
   FEED — blog / news list (minimal)
   ============================================================ */
.feed { border-top: 1px solid var(--line); }
.feed-row {
  display: grid; grid-template-columns: 116px 1fr auto; gap: 26px; align-items: center;
  padding: 22px 8px; border-bottom: 1px solid var(--line);
  transition: background .2s ease, padding .2s ease;
}
.feed-row:hover { background: var(--surface); padding-left: 16px; padding-right: 16px; }
.feed-row .f-date { font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; color: var(--ink-faint); }
.feed-row .f-main { display: flex; flex-direction: column; gap: 6px; }
.feed-row .f-cat { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.feed-row .f-cat .dot { width: 7px; height: 7px; border-radius: 50%; }
.feed-row .f-title { font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
.feed-row:hover .f-title { color: var(--accent-ink); }
.feed-row .f-read { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.feed-row .arrow { color: var(--ink-faint); }

/* ============================================================
   LANDING THEME SECTIONS
   ============================================================ */
.theme-sec { padding: var(--section-y) 0; border-top: 1px solid var(--line); }
.theme-sec .ts-head { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; margin-bottom: 36px; }
.theme-sec .ts-head .chip { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #fff; background: var(--accent); padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.theme-yellow .ts-head .chip { color: #2c2406; background: var(--block-bg); }
.theme-sec .ts-head .ts-titles h2 { letter-spacing: -.02em; }
.theme-sec .ts-head .ts-titles p { margin: 6px 0 0; color: var(--ink-soft); font-size: 15px; }
.theme-sec .ts-head .ts-enter { white-space: nowrap; }

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* simple article/topic card */
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; transition: border-color .2s ease, transform .2s ease; }
.tcard:hover { border-color: var(--accent); transform: translateY(-3px); }
.tcard .tc-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.tcard h3 { margin-top: 14px; font-family: var(--serif); font-size: 22px; font-weight: 400; }
.tcard p { font-size: 14.5px; color: var(--ink-soft); margin: 10px 0 0; line-height: 1.5; }
.tcard .tc-foot { margin-top: auto; padding-top: 20px; }

/* ============================================================
   PRICING / PLANS
   ============================================================ */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; }
.plan.feature { background: var(--accent); color: #fff; border-color: var(--accent); }
.theme-yellow .plan.feature { background: var(--block-bg); color: #2c2406; border-color: var(--block-bg); }
.plan .p-name { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.plan .p-price { font-family: var(--serif); font-size: 48px; font-weight: 400; letter-spacing: -.02em; margin-top: 16px; line-height: 1; }
.plan .p-price small { font-size: 15px; color: var(--ink-soft); font-family: var(--sans); }
.plan.feature .p-price small { color: rgba(255,255,255,.8); }
.theme-yellow .plan.feature .p-price small { color: rgba(44,36,6,.7); }
.plan .p-sub { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }
.plan.feature .p-sub { color: rgba(255,255,255,.85); }
.theme-yellow .plan.feature .p-sub { color: rgba(44,36,6,.75); }
.plan ul { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.plan.feature ul { border-top-color: rgba(255,255,255,.25); }
.theme-yellow .plan.feature ul { border-top-color: rgba(44,36,6,.2); }
.plan li { display: grid; grid-template-columns: auto 1fr; gap: 11px; font-size: 14.5px; align-items: start; }
.plan li svg { width: 17px; height: 17px; margin-top: 2px; color: var(--accent); }
.plan.feature li svg { color: currentColor; }
.plan .p-cta { margin-top: auto; padding-top: 26px; }
.plan .btn { width: 100%; }
.plan.feature .btn-primary { background: #fff; color: var(--accent-dark); }
.theme-yellow .plan.feature .btn-primary { background: #2c2406; color: var(--block-bg); }

/* free call callout */
.callout { background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 38px 40px; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.callout h3 { font-family: var(--serif); font-size: 27px; font-weight: 400; }
.callout p { margin: 8px 0 0; color: var(--ink-soft); font-size: 15px; max-width: 50ch; }

/* ============================================================
   CALCULATORS (reusable)
   ============================================================ */
.calc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; }
.calc h3 { font-family: var(--serif); font-size: 25px; font-weight: 500; }
.calc .sub { font-size: 14px; color: var(--ink-soft); margin: 8px 0 26px; }
.field { margin-bottom: 22px; }
.field label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px; }
.field label .lv { font-family: var(--mono); font-size: 14px; color: var(--ink); font-weight: 700; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 999px; background: var(--line); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); cursor: pointer; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.seg button { border: 0; border-right: 1px solid var(--line); background: transparent; padding: 9px 16px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink-soft); transition: background .2s ease, color .2s ease; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--accent); color: #fff; }
.theme-yellow .seg button.on { color: #2c2406; background: var(--block-bg); }
.calc-result { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.calc-result .ro .k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.calc-result .ro .v { font-family: var(--serif); font-size: 42px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 8px; }
.breakdown { margin-top: 22px; }
.breakdown .bd { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.breakdown .bd:first-child { border-top: 0; }
.breakdown .bd .lab { color: var(--ink-soft); display: flex; align-items: center; gap: 10px; }
.breakdown .bd .lab .sw { width: 10px; height: 10px; border-radius: 2px; }
.breakdown .bd .amt { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.bar { height: 10px; border-radius: 999px; overflow: hidden; display: flex; margin: 6px 0 18px; background: var(--line-soft); }
.bar span { height: 100%; }

/* ============================================================
   ANALYSER / CHART CARD (reusable)
   ============================================================ */
.analyser { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.analyser-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }
.tick { display: flex; align-items: center; gap: 13px; }
.tick .logo { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--accent-ink); }
.tick .sym { font-weight: 700; font-size: 15px; }
.tick .name { font-size: 12.5px; color: var(--ink-faint); }
.price { text-align: right; }
.price .v { font-family: var(--mono); font-size: 19px; font-weight: 700; }
.price .chg { font-size: 12.5px; font-weight: 700; color: var(--up); }
.price .chg.neg { color: var(--down); }
.chart-body { padding: 10px 8px 0; }
.range-row { display: flex; gap: 4px; padding: 12px 16px 16px; }
.range-row .r { font-family: var(--mono); font-size: 11px; padding: 5px 11px; border-radius: 3px; color: var(--ink-faint); }
.range-row .r.active { background: var(--accent); color: #fff; font-weight: 700; }
.theme-yellow .range-row .r.active { color: #2c2406; background: var(--block-bg); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-soft); }
.metrics .m { padding: 15px 16px; border-right: 1px solid var(--line-soft); }
.metrics .m:last-child { border-right: 0; }
.metrics .m .k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.metrics .m .val { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; margin-top: 4px; }

/* analysed list */
.stock-list { border-top: 1px solid var(--line); }
.stock-row { display: grid; grid-template-columns: 44px 1.4fr 1fr 1fr 90px; gap: 18px; align-items: center; padding: 16px 8px; border-bottom: 1px solid var(--line); transition: background .2s ease; }
.stock-row:hover { background: var(--surface); }
.stock-row .s-logo { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-family: var(--serif); font-size: 14px; color: var(--accent-ink); }
.stock-row .s-name b { display: block; font-size: 15px; }
.stock-row .s-name span { font-size: 12px; color: var(--ink-faint); }
.stock-row .s-k { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.stock-row .s-v { font-family: var(--mono); font-weight: 700; font-size: 14px; }
.stock-row .s-verdict { font-family: var(--mono); font-size: 11px; font-weight: 700; text-align: right; padding: 5px 0; }
.stock-row .s-verdict.buy { color: var(--up); }
.stock-row .s-verdict.hold { color: var(--ink-soft); }

/* placeholder fill */
.ph { background-image: repeating-linear-gradient(45deg, rgba(23,22,15,.05) 0 2px, transparent 2px 10px); display: grid; place-items: center; color: var(--ink-faint); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* ============================================================
   CTA STRIP
   ============================================================ */
.cta-strip { background: var(--accent); color: #fff; border-radius: var(--radius); padding: clamp(40px, 6vw, 72px); text-align: center; position: relative; overflow: hidden; }
.theme-yellow .cta-strip { background: var(--block-bg); color: #2c2406; }
.cta-strip h2 { color: inherit; max-width: 18ch; margin: 0 auto; }
.cta-strip p { margin: 18px auto 0; max-width: 44ch; opacity: .85; }
.cta-strip .actions { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.cta-strip .btn-primary { background: #fff; color: var(--accent-dark); }
.theme-yellow .cta-strip .btn-primary { background: #2c2406; color: var(--block-bg); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #14130d; color: #a9a596; padding: 72px 0 34px; margin-top: 0; }
.footer-top { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer .brand { color: #f6f5f0; }
.footer-blurb { font-size: 14.5px; color: #847f6f; margin-top: 18px; max-width: 32ch; line-height: 1.55; }
.fcol h5 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #6f6a5b; margin: 0 0 16px; font-weight: 700; }
.fcol a { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: #a9a596; padding: 6px 0; transition: color .15s ease; }
.fcol a:hover { color: #f3f1e7; }
.fcol a .dot { width: 7px; height: 7px; border-radius: 50%; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 26px; font-family: var(--mono); font-size: 11px; color: #6f6a5b; flex-wrap: wrap; }
.footer-bottom .disclaimer { max-width: 70ch; line-height: 1.6; font-family: var(--sans); font-size: 12px; }

/* ============================================================
   reveal
   ============================================================ */
.reveal { opacity: 1; transform: none; }
.js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js-reveal .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   COMPACT LANDING — hero + theme blocks (left) + journal (right)
   ============================================================ */
.home-hero { padding: 116px 0 36px; }
.home-hero .eyebrow { margin-bottom: 16px; }
.home-hero h1 { font-size: clamp(34px, 4.2vw, 56px); max-width: 19ch; }
.home-hero .lede { margin-top: 16px; max-width: 60ch; }

.home { padding-bottom: 92px; }
.home-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; align-items: start; }

/* theme blocks (left column) */
.themes { display: grid; gap: 12px; }
.theme-card { background: var(--block-bg); color: var(--block-ink); border-radius: var(--radius); padding: 24px 26px 22px; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; }
.theme-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.theme-card .tc-top { position: relative; padding-right: 76px; }
.theme-card .tc-name { display: block; font-family: var(--serif); font-size: clamp(21px, 2.3vw, 29px); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
.theme-card .tc-name .num { font-family: var(--mono); font-size: 12px; opacity: .65; letter-spacing: .04em; margin-right: 11px; }
.theme-card .tc-enter { position: absolute; top: 5px; right: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.theme-card:hover .tc-enter .arrow { transform: translateX(4px); }
.theme-card .tc-desc { font-size: 14px; opacity: .82; margin-top: 9px; line-height: 1.45; max-width: 56ch; }
.theme-card .tc-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.theme-card .tc-links a {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 13px; border-radius: 999px; background: var(--chip-bg); color: inherit;
  display: inline-flex; align-items: center; gap: 7px; transition: background .2s ease, transform .2s ease;
}
.theme-card .tc-links a:hover { background: var(--chip-bg-h); transform: translateY(-1px); }
.theme-blue   { --chip-bg: rgba(255,255,255,.15); --chip-bg-h: rgba(255,255,255,.28); }
.theme-green  { --chip-bg: rgba(255,255,255,.15); --chip-bg-h: rgba(255,255,255,.28); }
.theme-yellow { --chip-bg: rgba(44,36,6,.10);   --chip-bg-h: rgba(44,36,6,.2); }

/* journal sidebar (right column) */
.journal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 22px 14px; position: sticky; top: 86px; }
.journal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 6px; }
.journal-head .jt { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.jrow { display: block; padding: 15px 0; border-top: 1px solid var(--line-soft); }
.jrow:first-of-type { border-top: 0; }
.jrow .jcat { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 7px; }
.jrow .jcat .dot { width: 7px; height: 7px; border-radius: 50%; }
.jrow .jtitle { font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.18; letter-spacing: -.01em; margin-top: 8px; transition: opacity .2s ease; }
.jrow:hover .jtitle { opacity: .62; }
.jrow .jmeta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 8px; }
.journal-foot { padding: 14px 0 4px; border-top: 1px solid var(--line); margin-top: 4px; }

@media (max-width: 980px) {
  .home-grid { grid-template-columns: 1fr; gap: 18px; }
  .journal { position: static; }
}


@media (max-width: 980px) {
  .blocks, .blocks.two, .grid-3, .plans { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --gutter: 22px; --section-y: 72px; }
  .nav-links { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .blocks, .blocks.two, .grid-3, .plans { grid-template-columns: 1fr; }
  .feed-row { grid-template-columns: 1fr auto; }
  .feed-row .f-date { display: none; }
  .theme-sec .ts-head { grid-template-columns: 1fr; gap: 14px; }
  .theme-sec .ts-head .ts-enter { justify-self: start; }
  .stock-row { grid-template-columns: 36px 1.4fr 70px; }
  .stock-row .s-pe, .stock-row .s-yield { display: none; }
  .callout { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
}