:root { --navy: #1b2a4a; --teal: #0e7490; --cyan: #0891b2; --ink: #24364a; --body: #4b5c6e; --muted: #5c6b7a; --line: #dbe3e7; --paper: #f5f8f8; --white: #fff; --error: #a82727; --radius: 16px; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 15px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
::selection { color: var(--navy); background: #bce5eb; }
a { color: var(--teal); text-underline-offset: 4px; }
button, input, textarea { font: inherit; }
button, a, summary, input, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
button, a, summary { touch-action: manipulation; }
svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 20; left: 16px; top: -100px; padding: 12px 20px; color: white; background: var(--navy); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.wrap, .nav-wrap { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 80px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); font-size: 22px; font-weight: 750; letter-spacing: -.025em; white-space: nowrap; }
.brand > span > span { color: var(--teal); }
.nav-links { display: flex; align-items: center; gap: 34px; font-size: 13px; font-weight: 600; }
.nav-links a { text-decoration: none; color: var(--body); }
.nav-links a:hover { color: var(--teal); }
.nav-product { display: inline-flex; align-items: center; gap: 8px; }
.nav-product svg { width: 17px; }
.intro { display: flex; justify-content: space-between; align-items: end; gap: 36px; padding-top: 58px; padding-bottom: 36px; }
h1, h2, h3, p { margin: 0; }
h1 { max-width: 760px; font-size: 42px; line-height: 1.14; font-weight: 750; letter-spacing: -.035em; text-wrap: balance; color: var(--navy); }
.eyebrow { margin-bottom: 12px; color: var(--teal); font-size: 13px; font-weight: 650; letter-spacing: .01em; line-height: 1.4; }
.lede { margin-top: 20px; max-width: 680px; color: var(--body); font-size: 16px; line-height: 1.65; }
.free-note { padding-left: 24px; position: relative; white-space: nowrap; color: var(--teal); font-size: 13px; font-weight: 600; line-height: 1.7; margin-bottom: 5px; }
.free-note svg { position: absolute; left: 0; top: 1px; width: 17px; }
.free-note span { color: var(--muted); font-weight: 400; }
.calculator { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.input-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px 22px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.panel-heading h2, .result-title h2 { font-size: 19px; line-height: 1.3; letter-spacing: -.025em; font-weight: 650; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 0; border: 0; background: transparent; color: var(--teal); font-size: 12px; line-height: 1.5; font-weight: 600; white-space: nowrap; }
.text-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-button svg { width: 14px; height: 14px; }
.example-note { position: relative; margin-bottom: 24px; padding: 12px 14px; background: #edf5f6; border-radius: 8px; }
.example-note > span { color: #226072; font-size: 12px; font-weight: 700; }
.example-note p { color: #3b6470; font-size: 12px; line-height: 1.5; margin-top: 2px; }
.example-note .text-button { margin-top: 4px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.field { min-width: 0; }
.field label { display: block; color: var(--ink); font-size: 13px; line-height: 1.5; font-weight: 650; margin-bottom: 4px; }
.field label span { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 4px; }
.field-help { font-size: 12px; line-height: 1.6; color: var(--muted); margin-bottom: 9px; }
.input-shell { display: flex; align-items: center; min-width: 0; min-height: 49px; border: 1px solid #c5d2da; border-radius: 8px; background: #fff; transition: border-color .18s; }
.input-shell:focus-within { border-color: var(--teal); outline: 2px solid #b8dce5; outline-offset: 1px; }
.input-shell > span { padding-left: 14px; color: #566b7b; font-size: 15px; }
.input-shell input { padding: 10px 12px 10px 8px; width: 100%; min-width: 0; border: 0; background: none; outline: 0; color: var(--navy); font-size: 18px; line-height: 1.5; font-weight: 500; font-variant-numeric: tabular-nums; caret-color: var(--teal); }
.input-shell.suffix input { padding-left: 14px; }
.input-shell.suffix > span { padding: 0 14px 0 0; font-size: 12px; }
.input-shell:has([aria-invalid="true"]) { border-color: var(--error); }
.field-error { margin-top: 6px; color: var(--error); font-size: 12px; line-height: 1.5; }
.full-field { margin-bottom: 22px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.field-pair .field { display: flex; flex-direction: column; }
.field-pair .input-shell { margin-top: auto; }
.last-pair { margin-bottom: 20px; }
.extra-options { border-top: 1px solid var(--line); }
.extra-options summary { padding: 15px 0; color: var(--body); font-size: 12px; font-weight: 500; cursor: pointer; }
.extra-options summary span { color: var(--muted); margin-left: 4px; font-weight: 400; }
.extra-options .field { padding-bottom: 18px; }
.goal-field { margin-top: 4px; margin-bottom: 8px; }
.pace-panel { padding-bottom: 8px; }
.pace-status { color: var(--navy); font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.pace-note, .pace-line, .pace-progress { color: var(--body); font-size: 13px; line-height: 1.5; margin-bottom: 6px; }
.pace-bar { height: 8px; margin: 10px 0 8px; border-radius: 99px; background: #e6eef0; overflow: hidden; }
.pace-bar span { display: block; height: 100%; width: 0; background: var(--teal); border-radius: inherit; }
.privacy-note { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 16px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.privacy-note svg { width: 14px; height: 14px; }
.result-column { position: sticky; top: 24px; }
.result-panel { padding: 29px 30px 24px; border-radius: var(--radius); background: var(--navy); color: #fff; }
.result-title { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.result-title svg { color: #88d1dd; }
.result-mode { margin-top: 8px; color: #c0d0df; font-size: 12px; }
.monthly-result { padding-top: 26px; }
.monthly-result output { display: block; color: #fff; font-size: 54px; line-height: 1.1; font-weight: 650; letter-spacing: -.04em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.monthly-result > span { display: block; margin-top: 7px; color: #c0d0df; font-size: 13px; }
.result-starting { margin-top: 8px; max-width: 28ch; color: #c0d0df; font-size: 13px; line-height: 1.45; }
.goal-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin-top: 16px; color: #c0d0df; font-size: 12px; }
.goal-result strong { color: #fff; font-size: 22px; font-weight: 650; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.daily-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 22px; padding-top: 19px; border-top: 1px solid #41516c; color: #c0d0df; font-size: 12px; }
.daily-result strong { color: #a7e0df; font-weight: 650; font-size: 22px; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.result-breakdown { margin-top: 27px; }
.result-breakdown h3 { font-size: 12px; font-weight: 500; color: #f5f8fc; margin-bottom: 14px; }
dl { margin: 0; }
.result-breakdown dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-top: 8px; color: #c0d0df; font-size: 12px; }
dt { min-width: 0; }
dd { flex-shrink: 0; margin: 0; font-variant-numeric: tabular-nums; color: #f5f8fc; }
.variable-row { padding-top: 12px; border-top: 1px solid #41516c; margin-top: 14px !important; }
.variable-row dt span { margin-left: 4px; font-size: 12px; }
.button { min-height: 44px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 16px; border: 1px solid transparent; font-size: 12px; font-weight: 600; text-decoration: none; line-height: 1.5; transition: background .18s, border-color .18s; }
.button svg { width: 16px; height: 16px; }
.button-light { color: var(--navy); background: #fff; }
.button-light:hover:not(:disabled) { background: #e8f4f5; }
.button-dark { color: #fff; background: transparent; border-color: #75839a; }
.button-dark:hover:not(:disabled) { background: #34435f; }
.button-teal { background: var(--teal); color: #fff; font-size: 13px; }
.button-teal:hover { background: #075e76; }
.result-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.action-status { font-size: 12px; color: #c9e9eb; margin-top: 10px; }
.action-status:empty { display: none; }
.result-footnote { color: var(--muted); font-size: 12px; line-height: 1.6; padding: 14px 12px 0; }
.empty-result { min-height: 340px; display: flex; flex-direction: column; align-items: start; justify-content: center; }
.empty-result > svg { width: 40px; height: 40px; color: #8dcbd6; margin-bottom: 20px; }
.empty-result h3 { font-size: 20px; line-height: 1.3; font-weight: 600; margin-bottom: 12px; }
.empty-result p { font-size: 13px; color: #c0d0df; max-width: 30ch; }
.copy-fallback { margin-top: 20px; }
.copy-fallback label { font-size: 12px; font-weight: 600; }
.copy-fallback textarea { width: 100%; padding: 12px; margin-top: 8px; font-size: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; }
.conversation { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-top: 64px; padding-block: 38px 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.conversation h2, .newsletter-invitation h2 { color: var(--navy); font-size: 28px; line-height: 1.2; font-weight: 650; letter-spacing: -.03em; }
.conversation-intro > p:not(.founder-sign) { margin-top: 18px; max-width: 43ch; color: var(--body); font-size: 14px; }
.founder-sign { margin-top: 17px; font-size: 15px; font-weight: 650; }
.founder-sign span { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.conversation-questions h3 { font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.conversation-questions ul { list-style: none; padding: 0; margin: 0; }
.conversation-questions li { position: relative; padding-left: 18px; margin-bottom: 15px; color: var(--body); font-size: 13px; }
.conversation-questions li::before { position: absolute; left: 0; top: .65em; content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.next-step { padding-top: 14px; border-top: 1px solid var(--line); color: var(--body); font-size: 12px; }
.next-step strong { color: var(--ink); font-weight: 600; }
.method details { border-bottom: 1px solid var(--line); }
.method summary { display: flex; justify-content: space-between; gap: 24px; list-style: none; padding-block: 23px; font-size: 13px; color: var(--body); font-weight: 500; cursor: pointer; }
.method summary::-webkit-details-marker { display: none; }
.method summary svg { width: 16px; height: 16px; transition: transform .18s; }
.method details[open] summary svg { transform: rotate(180deg); }
.method-content { max-width: 74ch; padding-bottom: 24px; }
.method-content p { margin-bottom: 14px; font-size: 13px; line-height: 1.8; color: var(--body); }
.newsletter-invitation { display: flex; justify-content: space-between; align-items: center; gap: 60px; padding-block: 45px 48px; }
.newsletter-invitation > div:first-child { max-width: 560px; }
.newsletter-invitation > div:first-child p { margin-top: 14px; font-size: 13px; line-height: 1.7; color: var(--body); }
.signup-card { flex: 0 1 380px; width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.signup-card .field { margin-bottom: 14px; }
.signup-card .field label span { color: var(--muted); font-size: 12px; font-weight: 400; }
.signup-input { width: 100%; min-height: 49px; border: 1px solid #c5d2da; border-radius: 8px; padding: 10px 12px; background: #fff; color: var(--navy); font-size: 15px; }
.signup-input:focus { border-color: var(--teal); outline: 2px solid #b8dce5; outline-offset: 1px; }
.signup-card .button { width: 100%; }
.signup-privacy, .signup-optional { font-size: 12px; line-height: 1.5; color: var(--muted); }
.signup-privacy { margin-bottom: 12px; }
.signup-optional { margin-top: 10px; text-align: center; }
.nl-status { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.nl-status:empty { display: none; }
.nl-status.is-error { color: var(--error); }
.nl-status.is-success { color: var(--teal); font-weight: 650; }
.nl-download { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.nl-download a { font-weight: 700; }
.nl-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 24px 30px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.footer-privacy { flex: 1 0 100%; margin: 0; line-height: 1.6; }
.site-footer div { display: flex; gap: 25px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--teal); text-decoration: underline; }
.tool-list { display: grid; gap: 16px; padding-bottom: 72px; }
.tool-card { display: block; padding: 28px 30px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; }
.tool-card h2 { color: var(--navy); font-size: 22px; line-height: 1.3; letter-spacing: -.03em; font-weight: 650; }
.tool-card p { margin-top: 8px; color: var(--body); font-size: 15px; line-height: 1.6; max-width: 62ch; }
.tool-card span { display: inline-block; margin-top: 16px; color: var(--teal); font-size: 13px; font-weight: 650; }
.tool-card:hover h2 { color: var(--teal); }
.tools-note { margin-top: 8px; font-size: 14px; color: var(--muted); }
.tools-note a { font-weight: 650; }
#print-sheet { display: none; }
.notice { color: var(--error); padding-bottom: 20px; }
@media (min-width: 1100px) { .result-actions { flex-direction: row; } .result-actions .button { flex: 1; padding-inline: 10px; } }
@media (max-width: 950px) { .intro { gap: 25px; } h1 { font-size: 36px; } .free-note { display: none; } .calculator { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; } .input-panel, .result-panel { padding: 24px; } .panel-heading { align-items: start; } .panel-heading h2 { max-width: 180px; } .field-pair { gap: 15px; } .monthly-result output { font-size: 45px; } .conversation { gap: 40px; } }
@media (max-width: 760px) { .wrap, .nav-wrap { width: calc(100% - 40px); } .nav-wrap { min-height: 72px; } .brand { font-size: 20px; gap: 8px; } .brand img { width: 30px; height: 30px; } .nav-links > a:first-child { display: none; } .nav-product { font-size: 12px; } .nav-product svg { width: 14px; } .intro { padding-top: 36px; padding-bottom: 28px; } h1 { font-size: 32px; line-height: 1.15; letter-spacing: -.03em; } .lede { margin-top: 18px; font-size: 14px; } .calculator { grid-template-columns: 1fr; gap: 20px; } .input-panel, .result-panel { padding: 24px; } .panel-heading h2 { max-width: none; font-size: 18px; } .panel-heading { align-items: center; gap: 15px; } .result-column { position: static; } .monthly-result output { font-size: 52px; } .result-actions { flex-direction: row; } .result-actions .button { flex: 1; padding-inline: 8px; font-size: 12px; } .conversation { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; padding-block: 30px; } .conversation h2, .newsletter-invitation h2 { font-size: 26px; } .conversation-intro > p:not(.founder-sign) { font-size: 14px; } .newsletter-invitation { flex-direction: column; align-items: start; gap: 26px; padding-block: 32px; } .signup-card { flex-basis: auto; } .site-footer { align-items: start; font-size: 12px; } .site-footer div { gap: 14px; } }
@media (max-width: 380px) { .input-panel, .result-panel { padding: 20px; } .field-pair { grid-template-columns: 1fr; gap: 18px; } .panel-heading { align-items: start; } .field label span { font-size: 12px; } .brand { font-size: 18px; } .nav-product { font-size: 12px; } .result-actions { flex-direction: column; } .site-footer { flex-direction: column; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
@page { size: letter; margin: 16mm; }
@media print { body { background: white; color: #111; font: 10pt/1.45 Arial, sans-serif; } body > :not(#print-sheet) { display: none !important; } #print-sheet { display: block; } #print-sheet h1 { font-size: 23pt; color: #1b2a4a; max-width: none; margin-bottom: 8pt; } #print-sheet > p { color: #4b5c6e; font-size: 10pt; margin-bottom: 17pt; } #print-content { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; } .print-review { margin-top: 20pt; padding-top: 14pt; border-top: 1pt solid #dbe3e7; } .print-review p { margin-bottom: 14pt; } }