/* Marketing pages built by site/build.py (features, pricing, tools, guides, compare). Uses the tokens in styles.css. */

.page { padding-top: 76px; }
.crumbs { padding-top: 22px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* hero */
.page-hero { padding: 44px 0 56px; }
.page-hero .display { font-size: clamp(40px, 5.6vw, 72px); margin: 18px 0 20px; max-width: 16em; }
.page-hero .lede { margin: 0 0 26px; }
.page-hero .cta-row { margin-top: 6px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; color: var(--muted); }
.ticks li { display: inline-flex; gap: 8px; align-items: center; }
.ticks svg { width: 15px; height: 15px; color: var(--green); }

/* the short answer at the top of a page (answer engines quote this) */
.answer { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 20px 24px; margin: 0 0 8px; max-width: 760px; }
.answer b:first-child { display: block; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 6px; }
.answer p { margin: 0; color: var(--ink-2); }

/* sections */
.sec-tight { padding: 24px 0 72px; }
.band { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 72px 0; }

/* long-form text */
.prose { max-width: 740px; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; color: var(--ink); margin-top: 48px; }
.prose h3 { font-family: var(--sans); font-size: 19px; font-weight: 600; color: var(--ink); margin-top: 32px; }
.prose p, .prose ul, .prose ol { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--accent-ink); text-underline-offset: 3px; }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose blockquote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--line-2); color: var(--muted); }
.prose figure { margin: 24px 0; }
.updated { font-size: 13.5px; color: var(--muted); margin: 0 0 22px; }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tbl th, .tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--paper-2); font-weight: 600; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .yes { color: var(--green); font-weight: 600; }
.tbl .no { color: var(--muted); }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; }

/* link cards (hubs, related) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cards-lg { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 44px 20px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.card:hover { border-color: var(--ink); transform: translateY(-1px); }
.card b { font-weight: 600; font-size: 16.5px; color: var(--ink); }
.card span { font-size: 14.5px; color: var(--muted); line-height: 1.45; }
.card i { position: absolute; right: 18px; top: 20px; font-style: normal; color: var(--accent); }
.related { padding: 8px 0 72px; }
.related .h3 { margin: 0 0 16px; }

/* calculators */
.tool { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin: 8px 0 24px; }
.tool-in { padding: 28px; display: grid; gap: 16px; align-content: start; }
.tool-out { padding: 28px; background: var(--night); color: #f2ede4; display: grid; gap: 14px; align-content: start; }
.tool label { display: grid; gap: 6px; font-size: 14px; font-weight: 550; color: var(--ink); }
.tool input, .tool select { width: 100%; font: inherit; font-size: 17px; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink); }
.tool input:focus, .tool select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.tool .hint { font-weight: 400; font-size: 13px; color: var(--muted); }
.tool .seg { display: flex; flex-wrap: wrap; gap: 8px; }
.tool .seg button { font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; }
.tool .seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tool-out .row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; border-bottom: 1px solid var(--night-line); padding-bottom: 10px; }
.tool-out .row span:last-child { font-variant-numeric: tabular-nums; }
.tool-out .big { font-family: var(--serif); font-size: 46px; line-height: 1; letter-spacing: -0.02em; }
.tool-out .label { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--night-muted); }
.tool-out p { margin: 0; font-size: 14px; color: var(--night-muted); }
@media (max-width: 820px) { .tool { grid-template-columns: 1fr; } .tool-in, .tool-out { padding: 22px; } }

/* call to action band (every page) */
.cta-band { padding: 80px 0 110px; text-align: center; border-top: 1px solid var(--line); }
.cta-band .h2 { margin: 0 auto 16px; }
.cta-band .lede { margin: 0 auto 28px; }
.cta-band .cta-row { justify-content: center; }

.page-faq { padding: 72px 0; }
.note-box { background: var(--accent-soft); border: 1px solid #e6c6b7; color: var(--accent-ink); border-radius: var(--radius); padding: 14px 18px; font-size: 15px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.split > * { min-width: 0; }   /* tables inside a column must not widen the page on phones */
.prose ol.steps { list-style: none; padding: 0; counter-reset: step; }
.prose ol.steps > li { counter-increment: step; position: relative; padding-left: 44px; }
.prose ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 600; display: grid; place-items: center; }
.band + .sec, .band + .sec-tight, .sec-tight + .band { margin-top: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 28px; } .page { padding-top: 64px; } .page-hero { padding: 28px 0 40px; } }