/* Home page (calculator/home.html, `/`): the editorial direction the user picked
   (~/Downloads/Editorial Salary Planning Dashboard.png). Light warm paper, serif headlines
   (Newsreader), navy actions, pastel number tiles, small charts. UI text stays Inter and
   numbers Geist Mono, the site's own self-hosted faces (mobile-shell-fonts.css), so the home
   and the dark tools inside still feel like one product. Colours carry meaning everywhere:
   blue = in-hand / retirement, rose = tax, green = PF / Salary Pulse, orange = FIRE. */

:root {
    --paper: #f7f5f0;
    --surface: #ffffff;
    --sage: #eef2ec;
    --sand: #f4efe6;
    --ink: #121826;
    --ink-2: #4a5160;
    --muted: #6b7280;
    --line: #e4dfd5;
    --navy: #1b2d4f;
    --navy-ink: #ffffff;
    --blue: #2c63e0;
    --blue-soft: #e9f0fd;
    --rose: #d34a5f;
    --rose-soft: #fdeef0;
    --green: #1f9d6a;
    --green-soft: #e6f5ee;
    --orange: #ea7a2c;
    --orange-soft: #fdf0e5;
    --pink: #e04f86;
    --pink-soft: #fdeaf2;
    --shadow: 0 1px 2px rgba(18, 24, 38, 0.04), 0 8px 24px rgba(18, 24, 38, 0.06);
    --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    color-scheme: light;
}
html[data-theme="dark"] {
    --paper: #12151b;
    --surface: #1a1e26;
    --sage: #161b1a;
    --sand: #1a1813;
    --ink: #eef0f4;
    --ink-2: #b4bac6;
    --muted: #8a92a1;
    --line: #2b313c;
    --navy: #e8edf7;
    --navy-ink: #12151b;
    --blue: #6f9cf5;
    --blue-soft: #1c2638;
    --rose: #f07a8b;
    --rose-soft: #2d1d22;
    --green: #4fc394;
    --green-soft: #17271f;
    --orange: #f39a5c;
    --orange-soft: #2c2117;
    --pink: #f07fab;
    --pink-soft: #2c1b24;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
}

* { box-sizing: border-box; }
/* `hidden` must win over component display rules (.btn is inline-flex), or both header
   versions and swapped-out blocks show at once. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    background: var(--paper);
    color: var(--ink);
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.num, .ctc__input, .tile__value, .stats dd, .latest td:last-child, .pcol__rows dd, .city__amt {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

/* ---------- type ---------- */
.eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.display {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.display--sm { font-size: clamp(26px, 2.8vw, 36px); }
.lede { margin: 14px 0 0; max-width: 42ch; font-size: 17px; color: var(--ink-2); }
.text-link {
    display: inline-flex;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
}
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* A bigger tap area than the text, without changing the layout. */
.text-link, .period button { position: relative; }
.text-link::after { content: ''; position: absolute; inset: -10px -4px; }
.period button::after { content: ''; position: absolute; inset: -10px 0; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--blue); cursor: pointer; text-decoration: none; }
.link-btn:hover { text-decoration: underline; }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 10px;
    border: 1px solid transparent;
    font: 600 15px var(--sans);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s;
}
.btn--sm { padding: 9px 16px; font-size: 14px; }
.btn--navy { background: var(--navy); color: var(--navy-ink); }
.btn--navy:hover { filter: brightness(1.15); }
.btn--line { background: transparent; border-color: color-mix(in srgb, var(--ink) 30%, transparent); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); }
.icon-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.theme-icon--sun { display: none; }
html[data-theme="dark"] .theme-icon--moon { display: none; }
html[data-theme="dark"] .theme-icon--sun { display: block; }

/* ---------- header ---------- */
.site-head {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(10px);
}
.site-head__row {
    display: flex;
    align-items: center;
    gap: 40px;
    height: 76px;
    border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; line-height: 1.1; }
.brand__text { display: flex; flex-direction: column; }
.brand__logo { height: 36px; width: 36px; flex-shrink: 0; }
.brand__logo--dark { display: none; }
html[data-theme="dark"] .brand__logo--light { display: none; }
html[data-theme="dark"] .brand__logo--dark { display: block; }
.brand__name { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; }
.brand__tm { font-size: 11px; font-weight: 600; margin-left: 1px; vertical-align: 11px; line-height: 0; }
.brand small { font-size: 12px; color: var(--ink-2); }
.site-nav { display: flex; gap: 6px; }
.site-nav a {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}
.site-nav a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.site-nav a[aria-current="true"] { color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); }
/* A bookmarked section lands just under the sticky header, not behind it. */
main > section[id] { scroll-margin-top: 76px; }
.site-head__end { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* ---------- hero ---------- */
.hero { padding: 56px 0 60px; border-bottom: 1px solid var(--line); }
/* Columns end level: the calculator card stretches to the left column's height (its last
   button sits on the bottom edge), so neither visitor type gets a gap beside the other column. */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: stretch; }
.hero__pitch { display: flex; flex-direction: column; justify-content: center; }
.hero__title {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(34px, 3.8vw, 52px);
    text-wrap: balance;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.02em;
}
.hero__sub { margin: 24px 0 0; max-width: 46ch; font-size: 18px; color: var(--ink-2); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 40px 0 0; }
.stats > div { display: flex; flex-direction: column; padding: 0 18px; border-left: 1px solid var(--line); }
.stats > div:first-child { padding-left: 0; border-left: 0; }
.stats dd { margin: 0; font-size: 22px; font-weight: 600; }
.stat-short { display: none; }
.stats dt { font-size: 13px; color: var(--ink-2); line-height: 1.35; }

/* The live calculator card */
.calc {
    display: flex;
    flex-direction: column;
    padding: 24px 26px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    scroll-margin-top: 96px;
}
.calc__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.calc__title { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.calc__fy { font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink-2); }
.ctc { margin-top: 10px; }
.ctc__label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--ink-2); }
.ctc__label-fy { display: none; }
.ctc__row { display: flex; gap: 10px; }
.ctc__field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    cursor: text;
}
.ctc__field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.ctc__rupee { font-family: var(--mono); font-size: 20px; color: var(--ink-2); }
.ctc__input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 22px; font-weight: 600; outline: none; padding: 0; text-align: right; }
.regime { display: flex; padding: 4px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.regime__opt { border: 0; background: transparent; color: var(--ink-2); font: 600 14px var(--sans); padding: 0 18px; border-radius: 8px; cursor: pointer; }
.regime__opt[aria-checked="true"] { background: var(--navy); color: var(--navy-ink); }
.ctc__words { margin: 6px 2px 0; font-size: 13px; color: var(--ink-2); }
.ctc__error { margin: 6px 2px 0; font-size: 13px; color: var(--rose); font-weight: 600; }
/* Not an input error: the daily limit or a failed request. Calm, with a way forward. */
.ctc__notice {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--sand);
    font-size: 13px;
    color: var(--ink-2);
}
.ctc__notice a { color: var(--blue); font-weight: 600; }
.save-note { margin: 8px 2px 0; font-size: 13px; color: var(--ink-2); }
.save-note .ok { color: var(--green); font-weight: 700; margin-right: 2px; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 18px; } /* the full-calculator button below sits at margin-top: auto */
/* "Where your ₹1.5L goes, every [month | year]": the switch reads as part of the sentence. */
.period-line {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px;
    margin: 18px 0 0; font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.3;
}
#periodLead::after { content: ','; }
.period-pick { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.period {
    display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 999px;
    font-family: inherit; font-size: 16px;
}
.period button {
    font: inherit; color: var(--muted); background: none; border: 0; border-radius: 999px;
    padding: 2px 12px; cursor: pointer; transition: background .15s, color .15s;
}
.period button:hover { color: var(--ink); }
.period button[aria-checked="true"] { background: var(--navy); color: var(--navy-ink); }
.period button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (max-width: 480px) {
    /* One line: "Where your ₹1.5L goes   [month | year]". */
    .period-line { flex-wrap: nowrap; justify-content: space-between; font-size: 16px; }
    #periodLead { white-space: nowrap; }
    #periodLead::after, .period-every { display: none; }
    .period { font-size: 14px; }
    .period button { padding: 3px 11px; }
}
.tile { padding: 12px 14px; border-radius: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile--blue { background: var(--blue-soft); }
.tile--rose { background: var(--rose-soft); }
.tile--green { background: var(--green-soft); }
.tile__label { font-size: 13px; color: var(--ink-2); }
.tile__value { font-size: 21px; font-weight: 600; white-space: nowrap; }
.tile--blue .tile__value { color: var(--blue); }
.tile--rose .tile__value { color: var(--rose); }
.tile--green .tile__value { color: var(--green); }
.tile small { font-size: 12px; color: var(--ink-2); }
.answer.is-stale .tile__value { opacity: 0.5; }

.hero__truth {
    margin: 22px 0 0;
    padding-left: 16px;
    border-left: 4px solid var(--rose);
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: balance;
}
/* The way into the full calculator: a navy button with its own voice, not a footnote. */
.calc__more {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--navy);
    color: var(--navy-ink);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.calc__more:hover { transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--navy) 35%, transparent); }
.calc__more-icon {
    flex: 0 0 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--navy-ink) 14%, transparent);
}
.calc__more-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.calc__more-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.calc__more-text b { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.calc__more-text > span { font-size: 13.5px; opacity: 0.85; }
.calc__more-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.calc__more-chips i {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--navy-ink) 14%, transparent);
}
.calc__more-go {
    flex: 0 0 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    background: var(--navy-ink);
    color: var(--navy);
    transition: transform 0.2s ease;
}
.calc__more:hover .calc__more-go { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
    .calc__more, .calc__more-go { transition: none; }
    .calc__more:hover, .calc__more:hover .calc__more-go { transform: none; }
}

/* ---------- returning visitor states (home-2030-personal.js) ---------- */
.welcome {
    margin: 26px 0 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--green-soft);
    color: var(--ink-2);
    font-size: 15px;
}
.welcome b { color: var(--ink); }
.recover { margin: 26px 0 0; padding: 16px 18px; border-radius: 12px; background: var(--blue-soft); }
.recover__text { margin: 0; font-size: 15px; }
.recover__actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; }

/* ---------- bands ---------- */
.band { padding: 64px 0; border-bottom: 1px solid var(--line); }
.band--tight { padding: 48px 0; }
.band--sage { background: var(--sage); }
.band--sand { background: var(--sand); border-bottom: 0; }

/* ---------- Salary Pulse ---------- */
.pulse__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.pulse__intro .btn { margin-top: 22px; }
.dist { position: relative; margin: 0; padding-top: 56px; }
.dist__chart { display: block; width: 100%; height: 170px; }
.dist__bar { fill: color-mix(in srgb, var(--blue) 28%, var(--surface)); }
.dist__bar--median { fill: var(--blue); }
.dist__bar--you { fill: var(--navy); }
.dist__median, .dist__you {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
    pointer-events: none;
}
.dist__median { top: 0; }
.dist__median b { display: block; font-family: var(--serif); font-size: 22px; font-weight: 600; }
.dist__median span { font-size: 12px; color: var(--ink-2); }
.dist__you {
    top: 66px;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--navy);
    color: var(--navy-ink);
}
.dist__you span { display: block; font-size: 11px; opacity: 0.8; }
.dist__you b { font-family: var(--mono); font-size: 14px; }
.dist__axis { position: relative; height: 22px; margin-top: 6px; border-top: 1px solid var(--line); }
.dist__axis span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 12px; color: var(--muted); }
.dist__caption { margin-top: 10px; font-size: 14px; color: var(--ink-2); display: flex; flex-direction: column; gap: 8px; }
.dist__caption #pulseYou { color: var(--ink); font-weight: 500; }
.dist__pick select, .pcol__select {
    margin-left: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: 500 14px var(--sans);
    max-width: 100%;
}
.latest-card { padding: 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.latest-card__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.latest-card__head h3 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 600; }
/* Two lines per salary for a narrow card: company, then role · city small and muted. */
.latest { width: 100%; border-collapse: collapse; }
.latest td { padding: 9px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.latest td:first-child { padding-right: 12px; }
.latest td b { display: block; font-size: 13px; font-weight: 600; }
.latest td span { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
.latest td:last-child { text-align: right; font-size: 13px; font-weight: 600; color: var(--green); white-space: nowrap; }

/* ---------- plans ---------- */
.plans-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch; }
.plans-intro { padding-right: 40px; align-self: center; }
.pcols { display: contents; }
.pcol__cta { align-self: flex-start; }
/* "These plans are worked out for someone who is [30] years old." — the age is part of the sentence. */
.age { margin: 18px 0 0; font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.5; color: var(--ink); max-width: 30ch; }
.age__pick { white-space: nowrap; }
.age__input {
    width: 2.6em;
    margin: 0 2px;
    padding: 0 2px 1px;
    border: 0;
    border-bottom: 2px solid var(--blue);
    border-radius: 0;
    background: color-mix(in srgb, var(--blue) 12%, transparent);
    color: var(--blue);
    font: 600 19px var(--mono);
    text-align: center;
    -moz-appearance: textfield;
}
.age__input::-webkit-outer-spin-button,
.age__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.age__input:focus { outline: none; background: color-mix(in srgb, var(--blue) 22%, transparent); }
.age__hint { display: block; margin-top: 4px; font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--muted); }
.pcol { display: flex; flex-direction: column; padding: 0 28px; border-left: 1px solid var(--line); min-width: 0; }
.pcol__num { font-size: 13px; color: var(--muted); font-family: var(--mono); }
.pcol__title { margin: 6px 0 0; font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.pcol__sub { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.pcol__tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    vertical-align: 1px;
}
.pcol__lead { margin: 18px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.pcol__lead b { color: var(--ink); }
.pcol__big { margin: 2px 0 0; font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.pcol__chart { display: block; width: 100%; height: 64px; margin-top: 14px; }
.bar--blue { fill: var(--blue); }
.area--orange { fill: color-mix(in srgb, var(--orange) 16%, transparent); }
.line--orange { fill: none; stroke: var(--orange); stroke-width: 2; vector-effect: non-scaling-stroke; }
.line--need { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.dot--orange { fill: var(--orange); }
.pcol__rows { margin: 14px 0 0; }
.pcol__rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.pcol__rows dt { color: var(--ink-2); }
.pcol__rows dd { margin: 0; font-weight: 600; white-space: nowrap; }
.pcol__note { margin: 10px 0 14px; font-size: 12.5px; color: var(--muted); flex: 1; }
/* Horizontal bars: they fit a narrow column without cutting city names or amounts. */
/* Each city: name and amount on one line, then a full-width bar, so bars use the whole
   column and compare fairly. */
.cities { display: grid; gap: 12px; margin-top: 14px; }
.city { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amt" "track track"; row-gap: 5px; }
.city__name { grid-area: name; }
.city__amt { grid-area: amt; }
.city__track { grid-area: track; }
.city__name { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.city--home .city__name { color: var(--ink); font-weight: 600; }
.city__track { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--green) 12%, transparent); overflow: hidden; }
.city__bar { display: block; height: 100%; border-radius: 5px; background: color-mix(in srgb, var(--green) 50%, var(--surface)); }
.city--home .city__bar { background: var(--green); }
.city__amt { font-family: var(--sans); font-size: 13px; font-weight: 600; white-space: nowrap; text-align: right; }

/* ---------- tools ---------- */
.tools__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; }
/* Every tool: four plain columns of links under the four questions. */
.tools-all { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.tools-all__group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tools-all h3 { margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tools-all a { font-size: 15px; color: var(--ink); text-decoration: none; }
.tools-all a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .tools-all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 32px; }
/* Inside the shell the full list folds behind one row (home.html, embed only). */
.tools-more { margin-top: 28px; border-top: 1px solid var(--line); }
.tools-more summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; font-size: 15px; font-weight: 600; color: var(--blue);
    cursor: pointer; list-style: none;
}
.tools-more summary::-webkit-details-marker { display: none; }
.tools-more summary::after { content: '+'; font-size: 20px; line-height: 1; }
.tools-more[open] summary::after { content: '−'; }
.tools-more .tools-all { margin-top: 0; padding-top: 4px; border-top: 0; }
.tool { display: flex; gap: 16px; padding: 4px 24px; border-left: 1px solid var(--line); text-decoration: none; font-size: 14px; color: var(--ink-2); }
.tool:first-child { border-left: 0; padding-left: 0; }
.tool b { display: block; margin-bottom: 4px; font-size: 16px; color: var(--ink); }
.tool:hover b { color: var(--blue); }
.tool__icon {
    flex: 0 0 52px; height: 52px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--soft); color: var(--c);
}
.tool__icon svg, .ahead__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool__icon--blue { --c: var(--blue); --soft: var(--blue-soft); }
.tool__icon--green { --c: var(--green); --soft: var(--green-soft); }
.tool__icon--orange { --c: var(--orange); --soft: var(--orange-soft); }
.tool__icon--pink { --c: var(--pink); --soft: var(--pink-soft); }
.soon { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font: normal 600 11px var(--sans); color: var(--pink); background: var(--pink-soft); vertical-align: 2px; }

/* ---------- social proof ---------- */
.proof__title { margin: 0; text-align: center; font-family: var(--serif); font-size: 24px; font-weight: 600; }
.proof__title--quotes { margin-top: 48px; }
.logos { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 36px; }
.logos__item { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.logos__img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: #fff; padding: 2px; }
.logos__badge { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.proof__note { margin: 14px auto 0; max-width: 62ch; text-align: center; font-size: 12px; color: var(--muted); }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.quote { margin: 0; display: flex; gap: 16px; padding: 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.quote--placeholder { border-style: dashed; }
.quote__photo { flex: 0 0 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: flex-end; justify-content: center; overflow: hidden; background: var(--sage); color: var(--muted); }
.quote__tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--orange-soft); color: var(--orange); }
.quote__text { margin: 6px 0 10px; font-family: var(--serif); font-size: 16px; color: var(--ink-2); }
.quote__name { display: block; font-size: 14px; font-weight: 700; color: var(--muted); }
.quote__role { display: block; font-size: 12px; color: var(--muted); }

/* ---------- founder note ---------- */
.founder {
    display: flex;
    align-items: center;
    gap: 36px;
    max-width: 920px;
    margin: 56px auto 0;
    padding: 32px 36px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.founder__photo {
    flex: 0 0 120px;
    width: 120px; height: 120px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center calc(50% + 6px);
}
.founder .eyebrow { margin-bottom: 10px; }
.founder__quote { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 1.45; letter-spacing: -0.005em; }
.founder__who { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 14px; color: var(--ink-2); }
.founder__who b { color: var(--ink); }
.founder:first-child { margin-top: 0; }

/* ---------- the two truths, in place ---------- */
.regime-note { margin: 0 0 16px; padding: 8px 12px; border-radius: 8px; background: var(--rose-soft); font-size: 13px; color: var(--ink-2); }
.regime-note b { color: var(--ink); }
.infl-note { margin: 14px 0 0; padding-left: 12px; border-left: 3px solid var(--blue); font-size: 14px; color: var(--ink-2); max-width: 42ch; }
.infl-note:empty { display: none; }

/* ---------- stay ahead ---------- */
.ahead__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 48px; align-items: center; }
.ahead__inner .btn { margin-top: 22px; }
.ahead__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ahead__list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink-2);
}
.ahead__list b { display: block; font-size: 15px; color: var(--ink); }
.ahead__icon { flex: 0 0 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--soft); color: var(--c); }
.ahead__icon--blue { --c: var(--blue); --soft: var(--blue-soft); }
.ahead__icon--orange { --c: var(--orange); --soft: var(--orange-soft); }
.ahead__icon--green { --c: var(--green); --soft: var(--green-soft); }

/* ---------- footer ---------- */
.site-foot { padding: 24px 0 40px; font-size: 13px; color: var(--muted); background: var(--sand); border-top: 1px solid var(--line); }
.site-foot__row { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--ink); }

/* PREVIEW ONLY: visitor-state switch */
.mnav { display: none; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
    .site-head__row { gap: 20px; }
    .site-nav { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .site-nav::-webkit-scrollbar { display: none; }
    .brand small { display: none; }
    .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .hero__title { font-size: 46px; }
    .pulse__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .plans-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .plans-intro { padding-right: 0; }
    .pcol { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
    .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .tool:nth-child(3) { border-left: 0; padding-left: 0; }
    .quotes { grid-template-columns: minmax(0, 1fr); }
    .ahead__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
    .wrap { padding: 0 16px; }
    /* Brand and theme switch on one line; the section bar (same bookmarks as desktop) sits
       under them and scrolls sideways, staying with the sticky header. */
    .site-head__row { height: auto; flex-wrap: wrap; gap: 0 10px; padding-top: 8px; }
    .brand { height: 46px; }
    .site-head__end { height: 46px; }
    .head-signin { display: none; }
    .site-nav { order: 3; flex: 0 0 100%; margin: 0 -16px; padding: 2px 16px 8px; gap: 4px; }
    .site-nav a { padding: 6px 12px; font-size: 13.5px; }
    main > section[id] { scroll-margin-top: 108px; }
    .brand__name { font-size: 22px; }
    .hero { padding: 32px 0 44px; }
    .hero__title { font-size: 34px; }
    .hero__sub { font-size: 16px; }
    .hero__ctas { flex-direction: column; }
    .hero__ctas .btn { width: 100%; }
    .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px; }
    .stats > div { padding: 0 8px; }
    .stats dd { font-size: 17px; }
    .stats dt { font-size: 11px; white-space: nowrap; }
    .stat-full { display: none; }
    .stat-short { display: inline; }
    .calc { padding: 18px; }
    .ctc__input { font-size: 20px; }
    .tiles { grid-template-columns: 1fr 1fr; }
    .tiles .tile:first-child { grid-column: 1 / -1; }
    .band { padding: 36px 0; }
    .tools { grid-template-columns: minmax(0, 1fr); }
    .tool, .tool:nth-child(3) { border-left: 0; padding: 0; }
    .logos { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
    .logos__item { flex: 0 0 auto; }
    .quotes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .quote { flex: 0 0 88%; scroll-snap-align: start; }
    .founder { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px; }
    .founder__photo { flex-basis: auto; width: 88px; height: 88px; }
    .founder__quote { font-size: 18px; }
    /* Phones: the calculator should arrive early. The eyebrow goes (the card carries the FY
       badge), the headline tightens and the truth line fits on one row. */
    .hero .eyebrow { display: none; }
    .hero__title { font-size: 28px; }
    .hero__truth { margin-top: 12px; padding-left: 10px; border-left-width: 3px; font-size: 16px; }
    body { padding-bottom: 76px; }
    .mnav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 30;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, var(--surface) 94%, transparent);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--line);
    }
    .mnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; text-decoration: none; color: var(--muted); padding: 4px 0; }
    .mnav a[aria-current="page"] { color: var(--blue); }
    .mnav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    /* The header slides away while reading down and comes back on any scroll up
       (home-2030.js), so the page gets the whole screen between the shell's bars. */
    .site-head { transition: transform 0.25s ease; }
    .site-head.is-tucked { transform: translateY(-100%); }
    /* The section bar scrolls sideways: fade its right edge so that reads. */
    .site-nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
    .site-nav a { padding: 8px 12px; }

    /* Calculator card: the answer on the first screen. The FY badge moves into the CTC
       label so the title stays on one line. */
    .calc__fy { display: none; }
    .ctc__label-fy { display: inline; }
    .calc__title { font-size: 24px; }
    .ctc { margin-top: 6px; }
    .period-line { margin-top: 14px; }
    /* The in-hand tile has the full row: it is the answer, so it reads like one. */
    .tile--blue .tile__value { font-size: clamp(28px, 9vw, 36px); line-height: 1.1; letter-spacing: -0.02em; }
    .tile small { font-size: 13px; }
    .calc__more { gap: 12px; padding: 14px 16px; }
    .calc__more-icon { display: none; }
    .calc__more-text b { font-size: 17px; }
    .calc__more-text > span { font-size: 13px; }

    /* Touch: inputs and controls at least ~36px tall. */
    .btn--sm { padding: 11px 16px; }
    .age__input { padding: 4px 2px 5px; }
    .dist__pick select, .pcol__select { padding: 7px 10px; }
    .dist__pick select { margin-left: 0; width: 100%; }
    .dist__pick { display: flex; flex-direction: column; gap: 6px; }
    .tools-all__group { gap: 0; }
    .tools-all a { padding: 7px 0; }
    .site-foot a { padding: 8px 0; }

    /* Smallest text at 13px. */
    .latest td b { font-size: 14px; }
    .latest td span { font-size: 13px; }
    .latest td:last-child { font-size: 14px; }
    .pcol__note, .proof__note { font-size: 13px; }

    /* Plans: a swipe row of cards instead of three full columns stacked (2.7 screens). The
       next card peeks in from the right. */
    .plans-grid { gap: 22px; }
    .pcols {
        display: flex;
        gap: 12px;
        margin: 0 -16px;
        padding: 2px 16px 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        scrollbar-width: none;
    }
    .pcols::-webkit-scrollbar { display: none; }
    .pcol {
        flex: 0 0 86%;
        scroll-snap-align: start;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
    }
    .pcol__title { margin-top: 0; font-size: 22px; }
    .pcol__big { font-size: 30px; }

    .founder__sep { display: none; }
    .founder__role { flex-basis: 100%; }
}


/* ---------- inside the mobile shell's Home tab (html.is-embed, /home/embed/) ---------- */
/* The shell has its own bottom bar, so the page doesn't reserve room for one, and the
   header carries the brand, the theme switch and the section bar. */
html.is-embed body { padding-bottom: 16px; }
html.is-embed .site-head .btn--navy { display: none; }
/* The shell's own bottom bar has Salary and Pulse, so the hero's two buttons would repeat them. */
html.is-embed .hero__ctas { display: none; }
/* The calculator is the first thing a phone sees: the paragraph repeats the headline, and the
   counts are said again under Salary Pulse and in the sign-up band. */
@media (max-width: 760px) {
    html.is-embed .hero { padding-top: 24px; }
    html.is-embed .hero__sub, html.is-embed .stats { display: none; }
    html.is-embed .hero__grid { gap: 24px; }
}