/*
 * RentCeiling — global stylesheet
 * Consumes:
 *   /design/tokens.css     (palette, spacing, radii, shadows, motion, layout)
 *   /design/typography.css (Inter / Fraunces / JetBrains Mono + type scale)
 *
 * No utility framework, no build step. Plain CSS that maps wireframes.md
 * components onto the locked tokens.
 *
 * If you find yourself reaching for an inline hex or a one-off font-size,
 * stop and either (a) use an existing token or (b) add one to tokens.css /
 * typography.css with a comment.
 */

@import url('/design/tokens.css');
@import url('/design/typography.css');

/* ---- Reset ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }

/* ---- Layout primitives ------------------------------------------------- */

.container       { width: 100%; margin: 0 auto; padding: 0 var(--space-5); max-width: var(--container-default); }
.container-narrow { width: 100%; margin: 0 auto; padding: 0 var(--space-5); max-width: var(--container-narrow); }
.container-wide  { width: 100%; margin: 0 auto; padding: 0 var(--space-5); max-width: var(--container-wide); }

.section { padding: var(--space-9) 0; }
.section-tight { padding: var(--space-7) 0; }

/* Visually-hidden but accessible to screen readers */
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Header ------------------------------------------------------------ */

.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(247, 248, 250, 0.85);
	backdrop-filter: saturate(180%) blur(8px);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	border-bottom: var(--border-hairline);
}
.site-header .inner {
	display: flex; align-items: center; justify-content: space-between;
	height: 64px;
}
.site-header .brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.site-header .brand img { height: 32px; width: auto; }
.site-header nav { display: flex; align-items: center; gap: var(--space-5); }
.site-header nav a {
	font: 500 var(--text-body-sm)/1 var(--font-ui);
	color: var(--color-ink); text-decoration: none;
}
.site-header nav a:hover { color: var(--color-primary-accent); }

.breadcrumb {
	font: 400 var(--text-body-sm)/1 var(--font-ui);
	color: var(--color-slate);
	padding: var(--space-4) 0 0;
}
.breadcrumb a { color: var(--color-slate); }
.breadcrumb a:hover { color: var(--color-primary-accent); }

/* ---- Buttons ----------------------------------------------------------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	font: 600 var(--text-body)/1 var(--font-ui);
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	transition: background var(--duration-fast) var(--ease-standard),
	            color var(--duration-fast) var(--ease-standard),
	            border-color var(--duration-fast) var(--ease-standard);
	text-decoration: none;
}
.btn-primary {
	background: var(--color-primary); color: var(--color-surface);
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary {
	background: transparent; color: var(--color-ink);
	border: var(--border-default);
}
.btn-secondary:hover { border-color: var(--color-primary-accent); color: var(--color-primary-accent); }
.btn-block { display: flex; width: 100%; }

/* ---- Card -------------------------------------------------------------- */

.card {
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-sm);
}

/* ---- Hero -------------------------------------------------------------- */

.hero { padding: var(--space-8) 0 var(--space-7); }
.hero h1 {
	font: 700 var(--text-display-xl)/var(--lh-display-xl) var(--font-display);
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-3);
}
.hero h1 .line-2 {
	display: block;
	font-size: var(--text-display-lg);
	line-height: var(--lh-display-lg);
	font-weight: 500;
	color: var(--color-ink-soft);
}
.hero .lede {
	font: 400 var(--text-body-lg)/var(--lh-body-lg) var(--font-ui);
	color: var(--color-slate);
	max-width: 60ch;
	margin: 0 0 var(--space-4);
}
.hero .coverage {
	font: 500 var(--text-body)/var(--lh-body) var(--font-ui);
	color: var(--color-ink);
	margin: 0 0 var(--space-7);
}

/* Mobile */
@media (max-width: 640px) {
	.hero h1 { font-size: 36px; }
	.hero h1 .line-2 { font-size: 26px; }
}

/* ---- Calculator -------------------------------------------------------- */

.calc {
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-md);
}
.calc-header {
	font: 500 var(--text-caption) var(--font-ui);
	color: var(--color-primary-accent);
	margin: 0 0 var(--space-4);
}
.calc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}
.calc-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) {
	.calc-grid { grid-template-columns: 1fr; }
}
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label {
	font: 500 var(--text-body-sm)/1.2 var(--font-ui);
	color: var(--color-ink);
}
.field input,
.field select {
	font: 400 var(--text-body)/1.2 var(--font-ui);
	color: var(--color-ink);
	background: var(--color-paper);
	border: var(--border-default);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	min-height: 44px;
	appearance: none;
	-webkit-appearance: none;
}
.field input:focus,
.field select:focus {
	outline: 2px solid var(--color-primary-accent);
	outline-offset: 1px;
	border-color: var(--color-primary-accent);
}
.field .hint {
	font: 400 var(--text-caption)/1.4 var(--font-ui);
	color: var(--color-slate);
	text-transform: none;
	letter-spacing: 0;
}

/* ---- ResultCard -------------------------------------------------------- */

.result {
	margin-top: var(--space-5);
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	border: var(--border-hairline);
	background: var(--color-paper);
}
.result.is-hidden { display: none; }
.result h3 {
	font: 600 var(--text-body-sm)/1 var(--font-ui);
	color: var(--color-slate);
	text-transform: uppercase; letter-spacing: 0.04em;
	margin: 0 0 var(--space-2);
}
.result .max {
	font: 400 var(--text-display-lg)/1.05 var(--font-mono);
	color: var(--color-primary);
	margin: 0 0 var(--space-3);
}
.result .summary {
	font: 500 var(--text-body-lg)/var(--lh-body-lg) var(--font-ui);
	color: var(--color-ink);
	margin: 0 0 var(--space-3);
}
.result .summary .badge { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-caption); margin-right: var(--space-2); vertical-align: middle; }
.result.under .summary .badge { background: rgba(18, 138, 94, 0.12); color: var(--color-success); }
.result.at    .summary .badge { background: rgba(201, 136, 30, 0.14); color: var(--color-warning); }
.result.over  .summary .badge { background: rgba(180, 36, 36, 0.10); color: var(--color-danger); }
.result .formula,
.result .citation,
.result .notice {
	font: 400 var(--text-body-sm)/var(--lh-body-sm) var(--font-ui);
	color: var(--color-slate);
	margin: 0 0 var(--space-2);
}
.result .citation a { color: var(--color-primary-accent); }
.result-actions {
	display: flex; gap: var(--space-3); flex-wrap: wrap;
	margin-top: var(--space-5);
}

/* ---- "Why this exists" 3-col ------------------------------------------ */

.why { background: var(--color-surface); border-top: var(--border-hairline); border-bottom: var(--border-hairline); }
.why h2 {
	font: 700 var(--text-h1)/var(--lh-h1) var(--font-display);
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-6);
}
.why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }
.why-card { padding: var(--space-5) 0; }
.why-card .dot {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: var(--radius-pill);
	background: rgba(31, 75, 142, 0.08); color: var(--color-primary);
	font-weight: 700; margin-bottom: var(--space-4);
}
.why-card h3 { margin: 0 0 var(--space-3); }
.why-card p {
	font: 400 var(--text-body-sm)/var(--lh-body-sm) var(--font-ui);
	color: var(--color-slate);
	margin: 0;
}

/* ---- Jurisdictions grid ----------------------------------------------- */

.jx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--space-4);
	margin-top: var(--space-5);
}
.jx-card {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-lg);
	padding: var(--space-5) var(--space-3);
	text-decoration: none; color: inherit;
	transition: box-shadow var(--duration-base) var(--ease-standard),
	            border-color var(--duration-base) var(--ease-standard),
	            transform var(--duration-base) var(--ease-standard);
}
.jx-card:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--color-primary-accent);
	transform: translateY(-2px);
}
.jx-card .abbr {
	font: 700 28px/1 var(--font-display);
	color: var(--color-primary);
	letter-spacing: -0.01em;
}
.jx-card .cap {
	font: 400 var(--text-mono)/1 var(--font-mono);
	color: var(--color-slate);
	margin-top: var(--space-2);
}
.jx-coming {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	border: 1px dashed rgba(26, 31, 46, 0.20);
	border-radius: var(--radius-lg);
	padding: var(--space-5) var(--space-3);
	color: var(--color-slate);
	font: 500 var(--text-body-sm)/1.2 var(--font-ui);
}

/* ---- Pricing ---------------------------------------------------------- */

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }

.tier {
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
	display: flex; flex-direction: column; gap: var(--space-3);
}
.tier.is-featured {
	border: 2px solid var(--color-primary);
	box-shadow: var(--shadow-lg);
	position: relative;
}
.tier .badge {
	position: absolute; top: -12px; right: var(--space-5);
	background: var(--color-warning); color: var(--color-surface);
	padding: 2px var(--space-3);
	font: 500 var(--text-caption) var(--font-ui);
	border-radius: var(--radius-pill);
}
.tier .name {
	font: 600 var(--text-h2)/var(--lh-h2) var(--font-ui);
}
.tier .price {
	font: 700 var(--text-display-lg)/1 var(--font-display);
	color: var(--color-primary);
}
.tier .price small {
	font: 500 var(--text-body)/1 var(--font-ui);
	color: var(--color-slate);
	margin-left: var(--space-1);
}
.tier ul { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-2); }
.tier li {
	font: 400 var(--text-body-sm)/var(--lh-body-sm) var(--font-ui);
	color: var(--color-ink);
	padding-left: var(--space-5); position: relative;
}
.tier li::before {
	content: "✓"; position: absolute; left: 0; top: 0;
	color: var(--color-primary-accent); font-weight: 600;
}
.tier .cta { margin-top: auto; }

/* ---- Section heads ---------------------------------------------------- */

.section-head { margin-bottom: var(--space-6); }
.section-head h2 {
	font: 700 var(--text-h1)/var(--lh-h1) var(--font-display);
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-3);
	color: var(--color-ink);
}
.section-head .eyebrow {
	font: 500 var(--text-caption) var(--font-ui);
	color: var(--color-primary-accent);
	margin: 0 0 var(--space-2);
}
.section-head .sub {
	font: 400 var(--text-body)/var(--lh-body) var(--font-ui);
	color: var(--color-slate);
	max-width: 65ch;
	margin: 0;
}

/* ---- Statute / overrides table --------------------------------------- */

.tbl { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.tbl th, .tbl td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: var(--border-hairline); }
.tbl th {
	font: 500 var(--text-caption)/1 var(--font-ui);
	color: var(--color-slate);
	background: var(--color-paper);
}
.tbl td { font: 400 var(--text-body-sm)/var(--lh-body-sm) var(--font-ui); }
.tbl td.num { font-family: var(--font-mono); color: var(--color-primary); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }

/* ---- Plain prose blocks ---------------------------------------------- */

.prose { font: 400 var(--text-body)/var(--lh-body) var(--font-ui); color: var(--color-ink); }
.prose p, .prose ul { margin: 0 0 var(--space-4); }
.prose ul { padding-left: var(--space-5); }
.prose ul li { margin-bottom: var(--space-2); }
.prose strong { font-weight: 600; color: var(--color-ink); }
.prose .source-note {
	font: 400 var(--text-body-sm)/var(--lh-body-sm) var(--font-ui);
	color: var(--color-slate);
	border-left: 3px solid var(--color-primary-accent);
	padding: var(--space-2) var(--space-4);
	margin: var(--space-5) 0;
	background: var(--color-surface);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ---- FAQ accordion --------------------------------------------------- */

.faq { display: grid; gap: var(--space-3); }
.faq details {
	background: var(--color-surface);
	border: var(--border-hairline);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
}
.faq summary {
	cursor: pointer;
	font: 600 var(--text-body)/1.4 var(--font-ui);
	color: var(--color-ink);
	list-style: none;
	display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+";
	font: 400 22px/1 var(--font-ui);
	color: var(--color-primary-accent);
	margin-left: var(--space-3);
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
	font: 400 var(--text-body-sm)/var(--lh-body-sm) var(--font-ui);
	color: var(--color-slate);
	margin: var(--space-3) 0 0;
}

/* ---- CTA strip ------------------------------------------------------- */

.cta-strip {
	background: var(--color-primary);
	color: var(--color-surface);
	padding: var(--space-7) var(--space-5);
	border-radius: var(--radius-lg);
	display: grid; gap: var(--space-4);
	margin: var(--space-7) 0;
}
.cta-strip h2 {
	font: 700 var(--text-h1)/var(--lh-h1) var(--font-display);
	color: var(--color-surface);
	margin: 0;
}
.cta-strip p {
	font: 400 var(--text-body-lg)/var(--lh-body-lg) var(--font-ui);
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}
.cta-strip .actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cta-strip .btn-primary {
	background: var(--color-surface);
	color: var(--color-primary);
}
.cta-strip .btn-primary:hover { background: var(--color-paper); }
.cta-strip .btn-secondary {
	color: var(--color-surface);
	border-color: rgba(255, 255, 255, 0.40);
}
.cta-strip .btn-secondary:hover {
	border-color: var(--color-surface);
	color: var(--color-surface);
}

/* ---- Footer ---------------------------------------------------------- */

.site-footer {
	background: var(--color-ink);
	color: rgba(247, 248, 250, 0.70);
	padding: var(--space-8) 0 var(--space-5);
}
.site-footer .grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--space-6);
	margin-bottom: var(--space-7);
}
@media (max-width: 800px) {
	.site-footer .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.site-footer .grid { grid-template-columns: 1fr; }
}
.site-footer .col h4 {
	font: 500 var(--text-caption) var(--font-ui);
	color: var(--color-paper);
	margin: 0 0 var(--space-3);
}
.site-footer .col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.site-footer a { color: var(--color-paper); text-decoration: none; opacity: 0.8; }
.site-footer a:hover { opacity: 1; }
.site-footer .brand-block .tag {
	font: 400 var(--text-body-sm)/var(--lh-body-sm) var(--font-ui);
	color: rgba(247, 248, 250, 0.65);
	margin-top: var(--space-3);
	max-width: 32ch;
}
.site-footer .disclaimer {
	border-top: 1px solid rgba(247, 248, 250, 0.10);
	padding-top: var(--space-4);
	font: 400 var(--text-body-sm)/var(--lh-body-sm) var(--font-ui);
	color: rgba(247, 248, 250, 0.55);
}
.site-footer .disclaimer p { margin: 0 0 var(--space-2); }

/* ---- Subtle entrance animation (matches old style.css cadence) ------- */

@media (prefers-reduced-motion: no-preference) {
	.hero h1, .hero .lede, .hero .coverage, .hero .calc {
		animation: fadeUp 600ms var(--ease-standard) both;
	}
	.hero .lede    { animation-delay: 60ms; }
	.hero .coverage { animation-delay: 120ms; }
	.hero .calc    { animation-delay: 180ms; }
}
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}