/* Tereka — static content pages (salary pages, Detty December, rent and japa planners, how we make money).
   Loaded after styles.css, only by those pages. Uses the same colour tokens, so dark mode follows. */

.page { padding: 28px 0 72px; }
.page > section, .page > .block { margin: 0 0 48px; }
.page h2 { font: 800 clamp(1.4rem, 3.4vw, 1.8rem)/1.15 var(--display); letter-spacing: -0.02em; margin: 0 0 12px; }
.page h1 { font: 800 clamp(2rem, 6vw, 3.2rem)/1.02 var(--display); letter-spacing: -0.035em; color: var(--zobo); margin: 8px 0 14px; max-width: 22ch; }
.page .lede { max-width: 40em; }
.page .lede strong { color: var(--ink); }
.narrow { max-width: 760px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; font-size: .88rem; color: var(--muted); }
.crumbs li + li::before { content: '›'; margin-right: 6px; }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* result card: reuses .receipt + .lines from styles.css */
.take-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.take-grid .receipt { position: static; }
.receipt h2 { font-size: 1.25rem; margin: 0 0 6px; }
.receipt .lines .total dd { font-size: clamp(1.7rem, 6vw, 2.2rem); }
.year-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.year-table caption { text-align: left; font: 700 1.1rem/1.2 var(--display); margin-bottom: 8px; }
.year-table th, .year-table td { padding: 11px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.year-table th:first-child, .year-table td:first-child { text-align: left; padding-left: 0; }
.year-table td:last-child, .year-table th:last-child { padding-right: 0; }
.year-table thead th { font-size: .85rem; color: var(--muted); font-weight: 600; }
.year-table tr.net td, .year-table tr.net th { font-weight: 800; color: var(--good); border-bottom: 0; }
.year-table .neg { color: var(--bad); }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.stat-row div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.stat-row dt { font-size: .82rem; color: var(--muted); }
.stat-row dd { margin: 2px 0 0; font: 800 1.2rem/1.15 var(--display); font-variant-numeric: tabular-nums; }

/* big call to action */
.cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; background: var(--gold-soft); border-radius: 28px; padding: clamp(20px, 4vw, 36px); }
.cta-band h2 { color: var(--zobo); margin: 0 0 6px; }
.cta-band p { margin: 0; color: var(--ink); }
.cta-band .btn { min-height: 56px; padding: 0 28px; font-size: 1.08rem; }
.cta-band .small { color: var(--muted); margin-top: 6px; }

/* cups */
.cup-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cup-cards li { background: var(--card); border: 1px solid var(--line); border-top: 5px solid var(--c); border-radius: var(--radius-lg); padding: 14px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 12px; align-items: center; align-content: start; }
.cup-cards .cup { grid-row: span 2; }
.cup-cards h3 { margin: 0; display: flex; justify-content: space-between; gap: 6px; font-size: 1rem; }
.cup-cards h3 span { color: var(--ct); }
.cup-cards .amt { margin: 0; font: 800 1.25rem/1.1 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.cup-cards .amt small { display: block; font: 500 .8rem var(--body); color: var(--muted); letter-spacing: 0; }
.cup-cards .desc { grid-column: 1 / -1; margin: 6px 0 0; font-size: .86rem; color: var(--muted); }
.tier-note { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 14px 16px; margin: 16px 0 0; }
.tier-note p { margin: 0; }

/* tax bands */
.bands { width: 100%; max-width: 760px; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .95rem; }
.bands td { white-space: nowrap; }
.bands th, .bands td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.bands th:first-child, .bands td:first-child { text-align: left; padding-left: 0; }
.bands thead th { font-size: .82rem; color: var(--muted); font-weight: 600; }
.bands tr.unused td { color: var(--muted); opacity: .7; }
.bands tfoot td { font-weight: 800; border-bottom: 0; }
.table-scroll { overflow-x: auto; }

.prose-block p, .prose-block li { max-width: 66ch; }
.prose-block ul { padding-left: 1.2em; }

/* neighbours */
.nbrs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.nbrs a { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); background: var(--card); }
.nbrs a:hover { border-color: var(--zobo); }
.nbrs a.next { text-align: right; }
.nbrs span { font-size: .85rem; color: var(--muted); }
.nbrs strong { font: 800 1.2rem/1.2 var(--display); color: var(--zobo); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); text-decoration: none; color: var(--ink); font-weight: 600; font-size: .92rem; font-variant-numeric: tabular-nums; }
.chips a:hover { border-color: var(--zobo); color: var(--zobo); }
.chips a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.disclaimer { font-size: .9rem; color: var(--muted); background: var(--paper-2); border-radius: var(--radius); padding: 14px 16px; }
.disclaimer p { margin: 0 0 6px; } .disclaimer p:last-child { margin: 0; }
.faq.page-faq { max-width: none; }

/* hub calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.calc form label { display: block; font-weight: 600; margin-bottom: 8px; }
.calc .hint a { font-weight: 600; }
.all-salaries td a { font-weight: 700; }

/* footer on content pages can carry more links */
.footer nav { flex-wrap: wrap; row-gap: 8px; }
.footer .legal { margin-top: 10px; max-width: 70ch; font-size: .84rem; }

/* ---------- Detty December planner ---------- */
.dd-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; }
.dd-count { background: var(--zobo); color: #fff; border-radius: 24px; padding: 16px 20px; text-align: center; min-width: 150px; }
.dd-count strong { display: block; font: 800 2.6rem/1 var(--display); color: var(--gold); }
.dd-count span { font-size: .9rem; }
.dd-count em { display: block; font-style: normal; font-weight: 700; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.25); font-variant-numeric: tabular-nums; }
.dd-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.vibes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
.vibes legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.vibes label { position: relative; }
.vibes input { position: absolute; opacity: 0; inset: 0; }
.vibes span { display: inline-block; padding: 9px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); font-weight: 600; font-size: .92rem; cursor: pointer; }
.vibes input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.vibes input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.dd-items { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dd-items li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 150px); gap: 10px; align-items: center; }
.dd-items label { font-weight: 600; line-height: 1.25; }
.dd-items label small { display: block; font-weight: 400; color: var(--muted); font-size: .84rem; }
.dd-items .money-input { padding: 0 10px; }
.dd-items .money-input input { padding: 10px 0; font-size: 1rem; }
.dd-out .lines .total dd { font-size: clamp(1.8rem, 7vw, 2.4rem); }
.dd-paydays { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dd-paydays li { background: color-mix(in srgb, var(--r-fg) 12%, transparent); border-radius: 999px; padding: 4px 10px; font-size: .86rem; font-variant-numeric: tabular-nums; }
.jan { margin-top: 16px; border-radius: var(--radius); padding: 14px 16px; background: color-mix(in srgb, var(--r-fg) 10%, transparent); }
.jan h3 { color: var(--gold); margin: 0 0 4px; }
.jan p { margin: 0; font-size: .95rem; color: color-mix(in srgb, var(--r-fg) 85%, transparent); }
.dd-fit { margin-top: 12px; font-size: .95rem; }
.dd-fit.over { background: #F5A3A322; border-left: 3px solid #F5A3A3; padding: 10px 12px; border-radius: 6px; }
.dd-reset { margin-top: -6px; padding-left: 0; }

/* ---------- Rent planner (reuses the Detty December layout) ---------- */
.rp-fees { margin-bottom: 1.25rem; }
.rp-example { margin: 0 0 10px; }
.rp-example strong { color: var(--ink); }
.rp-fee-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rp-fee-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 10px; align-items: center; }
.rp-fee-list label { font-weight: 600; line-height: 1.25; margin: 0; }
.rp-fee-list label small { display: block; font-weight: 400; color: var(--muted); font-size: .84rem; }
.rp-fee-in { display: grid; grid-template-columns: minmax(0, 72px) minmax(0, 1fr); gap: 6px; }
.rp-fee-in .text-input { padding: 10px; font-size: 1rem; min-width: 0; }
.rp-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; margin: 16px 0 0; padding-bottom: 20px; }
.rp-bar { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.rp-bar i { display: block; width: 100%; background: #16827F; border-radius: 4px 4px 0 0; min-height: 2px; }
.rp-bar.now i { background: color-mix(in srgb, var(--r-fg) 45%, transparent); }
.rp-bar.full i { background: var(--gold); }
.rp-bar span { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); font-size: .7rem; white-space: nowrap; color: color-mix(in srgb, var(--r-fg) 70%, transparent); }
.rp-bars-key { font-size: .86rem; margin: 6px 0 0; }

/* ---------- Japa planner ---------- */
.jp-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.jp-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.jp-lines li.user { grid-template-columns: minmax(0, 1fr) minmax(0, 150px); }
.jp-lines .jp-line-text, .jp-lines label { font-weight: 600; line-height: 1.25; margin: 0; }
.jp-lines small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.jp-lines small a { color: var(--muted); }
.jp-lines output { font: 800 1.05rem/1.1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jp-lines .money-input { padding: 0 10px; }
.jp-lines .money-input input { padding: 10px 0; font-size: 1rem; }
.jp-small { max-width: 140px; }
.jp-progress { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--r-fg) 15%, transparent); overflow: hidden; margin-top: 14px; }
.jp-progress i { display: block; height: 100%; width: 0; background: #D9612B; border-radius: 999px; transition: width .3s; }
.so-band { background: var(--zobo); color: #fff; border-radius: 28px; padding: clamp(20px, 4vw, 36px); }
.so-band .eyebrow { color: var(--gold); }
.so-band h2 { color: #fff; }
.so-band p { max-width: 60ch; color: rgba(255,255,255,.88); }
.so-band strong { color: #fff; }
.so-band .btn-ghost { border-color: #fff; color: #fff; margin-top: 6px; }
.so-band .btn-ghost:hover { background: #fff; color: var(--zobo); }
.jp-sources { max-width: none; }
.jp-sources th[scope=rowgroup] { vertical-align: top; text-align: left; font-weight: 700; white-space: normal; min-width: 9em; }
.jp-sources th, .jp-sources td { white-space: normal; text-align: left; padding-left: 0; }
.jp-sources tr td:last-child a { white-space: nowrap; }

/* ---------- how we make money ---------- */
.promises { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.promises li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.promises h3 { margin: 0 0 4px; color: var(--zobo); }
.promises p { margin: 0; color: var(--muted); }
.firewall { background: var(--ink); color: var(--paper); border-radius: 28px; padding: clamp(20px, 4vw, 36px); }
.firewall h2 { color: var(--gold); }
.firewall p, .firewall li { color: color-mix(in srgb, var(--paper) 86%, transparent); max-width: 66ch; }
.firewall strong { color: var(--paper); }
.plans { counter-reset: p; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.plans li { counter-increment: p; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
.plans li::before { content: counter(p); font: 800 1.8rem/1 var(--display); color: var(--gold); }
.plans h3 { margin: 4px 0 4px; }
.plans p { margin: 0; color: var(--muted); max-width: 66ch; }

@media (max-width: 960px) {
  .cup-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .take-grid, .calc, .dd-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .cta-band { grid-template-columns: minmax(0, 1fr); }
  .cta-band .btn { width: 100%; }
  .stat-row { grid-template-columns: minmax(0, 1fr); }
  .promises { grid-template-columns: minmax(0, 1fr); }
  .dd-hero { grid-template-columns: minmax(0, 1fr); }
  .dd-count { justify-self: start; }
}
@media (max-width: 600px) {
  .all-salaries th:nth-child(2), .all-salaries td:nth-child(2), .all-salaries th:nth-child(5), .all-salaries td:nth-child(5) { display: none; }
  .bands th, .bands td { padding: 10px 5px; }
}
@media (max-width: 480px) {
  .bands { font-size: .84rem; }
  .bands td:first-child { white-space: normal; }
  .cup-cards { grid-template-columns: minmax(0, 1fr); }
  .nbrs strong { font-size: 1.05rem; }
  .dd-items li { grid-template-columns: minmax(0, 1fr) 130px; }
  .rp-fee-list li, .jp-lines li.user { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .jp-sources { font-size: .84rem; }
  .jp-sources th[scope=rowgroup] { min-width: 6em; }
  .year-table th, .year-table td { padding: 10px 4px; font-size: .92rem; }
}

/* Get the app (/app/) */
.get-app .ga-hero { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; margin-bottom: 24px; }
.get-app .ga-icon { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 10px 24px -12px rgba(36, 21, 25, .5); }
.get-app .ga-hero h1 { margin-top: 4px; }
.ga-now { border: 2px solid var(--zobo); margin-bottom: 20px; }
.ga-now h2 { margin: 0 0 6px; }
.ga-now p { margin: 0 0 14px; }
.ga-now .btn.big { min-height: 56px; padding: 0 32px; font-size: 1.1rem; }
.ga-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ga-steps h2 { margin: 0; }
.ga-steps ol { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 14px; }
.ga-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.ga-steps .n { width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #241519; font: 800 1rem/34px var(--display); text-align: center; }
.ga-steps .ico { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.25em; margin: 0 2px; }
.ga-steps .dim { opacity: .55; }
.ga-qr { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center; }
.ga-qr .qr { width: 180px; height: 180px; border-radius: 12px; }
.ga-qr h2 { margin: 0 0 6px; }
.get-app-link { margin: 14px 0 0; font-weight: 700; }
@media (max-width: 640px) {
  .ga-steps, .ga-qr { grid-template-columns: 1fr; }
  .ga-qr .qr { width: 160px; height: 160px; }
  .get-app .ga-hero { grid-template-columns: 1fr; gap: 10px; }
  .get-app .ga-icon { width: 64px; height: 64px; border-radius: 16px; }
}

/* research / transparency posts */
.research section { margin-bottom: 34px; }
.research .callout { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: var(--radius); padding: 12px 16px; margin-top: 12px; }
.research .facts { padding-left: 1.2em; }
.research .facts li { margin: 6px 0; }
.research .sources li { margin: 6px 0; font-size: .92rem; }

/* email auto-import page */
.autoimport section { margin-bottom: 30px; }
.ai-privacy { border: 2px solid var(--good); }
.ai-privacy h2 { margin-top: 0; }
.ai-privacy li, .ai-need li { margin: 6px 0; }
.ai-need { list-style: none; padding: 0; }
.ai-steps { list-style: none; padding: 0; display: grid; gap: 14px; }
.ai-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
.ai-steps .n { width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #241519; font: 800 1rem/34px var(--display); text-align: center; }
.ai-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.autoimport .callout { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: var(--radius); padding: 12px 16px; }