/* =========================================================================
   Voila fonts (Google Fonts) — Newsreader (serif display), Hanken Grotesk
   (sans/UI), Spline Sans Mono (figures).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root {
	--font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
	--font-sans:  'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono:  'Spline Sans Mono', ui-monospace, 'SF Mono', monospace;

	--coral: #F95341;  --coral-hover: #E63E2C;  --coral-press: #C7331F;
	--coral-tint: #FDE7E2;  --coral-tint-2: #FBD3CA;  --on-coral: #FFFFFF;
	--clay: #CC785C;  --blue: #849BEC;  --blue-tint: #E9EDFB;
	--gold: #D3A952;  --gold-tint: #F6EED9;  --rust: #E16662;  --rust-tint: #FBE5E4;

	--canvas: #FAF9F5;  --canvas-sunk: #F0EEE7;  --paper: #FFFFFF;  --paper-2: #FBFAF6;
	--ink: #1A1915;  --ink-secondary: #56544C;  --ink-muted: #8A887D;  --ink-faint: #B4B2A7;
	--line: #E5E2D8;  --line-strong: #D6D3C7;

	--success: #3E8B63;  --success-tint: #E2EFE7;
	--status-draft-fg: #6B695F;  --status-draft-bg: #ECEAE1;
	--status-sent-fg: #A66A1E;  --status-sent-bg: #F8ECD6;
	--status-paid-fg: #2F6B4C;  --status-paid-bg: #E2EFE7;
	--status-overdue-fg: #B23320;  --status-overdue-bg: #FBE0DB;

	--radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 12px;  --radius-lg: 16px;  --radius-xl: 24px;  --radius-pill: 999px;
	--shadow-xs: 0 1px 2px rgba(26,25,19,0.05);
	--shadow-sm: 0 1px 3px rgba(26,25,19,0.07), 0 1px 2px rgba(26,25,19,0.04);
	--shadow-md: 0 4px 14px rgba(26,25,19,0.08);
	--shadow-lg: 0 12px 32px rgba(26,25,19,0.12);
	--focus-ring: rgba(249,83,65,0.35);
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--dur-fast: 120ms;  --dur-base: 180ms;
	--maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0; background: var(--canvas); color: var(--ink-secondary);
	font-family: var(--font-sans); font-size: 16px; line-height: 1.55;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--coral-tint-2); color: var(--coral-press); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { color: var(--ink); font-weight: 500; margin: 0; }
.serif { font-family: var(--font-serif); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.overline {
	font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--coral); display: inline-flex; align-items: center; gap: 8px;
}
.overline .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }

/* Buttons — DS Button component (radius-sm, press scale, coral fill) */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 1; cursor: pointer;
	border: none; border-radius: var(--radius-sm); height: 48px; padding: 0 22px;
	background: var(--coral); color: var(--on-coral); box-shadow: var(--shadow-xs);
	transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
	white-space: nowrap;
}
.btn:hover { background: var(--coral-hover); }
.btn:active { background: var(--coral-press); transform: scale(0.98); }
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-dark { background: var(--ink); }
.btn-dark:hover { background: #000; }
.btn-onpaper { background: var(--paper); color: var(--coral-press); }
.btn-onpaper:hover { background: var(--paper-2); }

/* Header — shared "navbar" architecture (blog pages use a simplified top-bar in blog.css) */
header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(250,249,245,0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}
.navbar-inner { position: relative; display: flex; align-items: center; gap: 24px; padding: 14px 24px; max-width: var(--maxw); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand .name { font-family: var(--font-serif); font-weight: 600; font-size: 23px; letter-spacing: -0.02em; color: var(--ink); }
.navbar-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.navbar-links a { font-size: 14px; color: var(--ink-secondary); font-weight: 500; }
.navbar-links a:hover { color: var(--ink); }
.nav-right { margin-left: 0; display: flex; align-items: center; gap: 16px; }

/* Language switcher — JS-driven, shared with the blog (restyled to Voila's light UI) */
.lang-switcher { position: relative; display: inline-flex; }
.lang-switcher-btn { display: flex; align-items: center; padding: 0; border: none; background: transparent; cursor: pointer; }
.lang-switcher-btn img { width: 22px; height: 22px; object-fit: cover; border-radius: 50%; border: 1px solid var(--line); transition: border-color var(--dur-fast) var(--ease-standard); }
.lang-switcher-btn:hover img { border-color: var(--line-strong); }
.lang-switcher-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; min-width: 8rem; padding: 6px; display: none; flex-direction: column; gap: 2px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.lang-switcher.is-open .lang-switcher-dropdown { display: flex; }
.lang-switcher-dropdown a { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--radius-xs); color: var(--ink-secondary); font-size: 13px; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.lang-switcher-dropdown a:hover { background: var(--canvas-sunk); color: var(--ink); }
.lang-switcher-dropdown a.is-current { color: var(--ink); font-weight: 600; }
.lang-switcher-dropdown a img { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }

/* Mobile menu — JS-driven, shared with the blog (hidden until small screens) */
.mobile-menu-toggle, .mobile-menu-panel { display: none; }

/* Sections */
section { padding: 96px 0; }
.section-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-family: var(--font-serif); font-size: clamp(34px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.018em; margin-top: 14px; }
.section-head p { margin-top: 14px; font-size: 17px; color: var(--ink-secondary); }
.sunk { background: var(--canvas-sunk); }
.on-paper { background: var(--paper); }

/* Hero */
.hero { padding: 96px 0 84px; }
.hero-grid { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.hero-copy { flex: 1 1 460px; min-width: 320px; }
.hero-copy h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(42px, 5.4vw, 66px); line-height: 1.03; letter-spacing: -0.022em; margin: 18px 0 0; }
.hero-copy .lead { font-size: 19px; color: var(--ink-secondary); margin: 22px 0 0; max-width: 520px; }
.hero-visual { flex: 1 1 380px; min-width: 300px; display: flex; justify-content: center; }

/* Email form */
.beta-form { margin-top: 34px; max-width: 500px; }
.beta-form .row { display: flex; gap: 10px; flex-wrap: wrap; }
.beta-form input[type=email] {
	flex: 1 1 240px; height: 48px; font-family: var(--font-sans); font-size: 15px; color: var(--ink);
	background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
	padding: 0 16px; outline: none;
}
.beta-form input[type=email]:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--focus-ring); }
.beta-form .fineprint { font-size: 13px; color: var(--ink-muted); margin: 12px 0 0; }
.beta-success {
	display: none; align-items: center; gap: 14px; background: var(--success-tint);
	border: 1px solid #BFE0CD; border-radius: var(--radius-md); padding: 16px 18px;
}
.beta-success.show { display: flex; }
.beta-form.done .beta-fields { display: none; }
.beta-success .check { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--success); color: #fff; border-radius: 50%; }
.beta-success b { color: var(--ink); font-size: 15px; }
.beta-success span.sub { display: block; font-size: 13.5px; color: var(--ink-secondary); }

.final .beta-form .row { background: var(--paper); border-radius: var(--radius-md); padding: 8px; }
.final .beta-form input[type=email] { border: none; }
.final .beta-success { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); }
.final .beta-success b, .final .beta-success span.sub { color: #fff; }
.final .fineprint { color: rgba(255,255,255,0.85); }

/* Trust chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 26px; }
.chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-secondary); }
.chip svg { color: var(--coral); flex: none; }

/* Phone mockup shell (stand-in for the app screenshots) */
.phone-wrap { position: relative; background: var(--coral-tint); border-radius: 28px; padding: 48px 28px; width: 100%; max-width: 440px; display: flex; justify-content: center; }
.phone { position: relative; width: 262px; background: var(--paper); border: 1px solid var(--line); border-radius: 42px; box-shadow: var(--shadow-lg); padding: 11px; }
.phone.sm { width: 270px; }
.phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 92px; height: 18px; background: var(--canvas-sunk); border-radius: 999px; z-index: 2; }
.phone-screen { position: relative; width: 100%; height: 520px; border-radius: 32px; background: var(--paper-2); overflow: hidden; padding: 22px 16px; }
.float-card {
	position: absolute; background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
	box-shadow: var(--shadow-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 9px;
	animation: figFloat 6s ease-in-out infinite; z-index: 3;
}
.float-card.alt { flex-direction: row; align-items: center; gap: 10px; padding: 11px 13px; animation-delay: -3s; }
@keyframes figFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.status-pill { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 11px; border-radius: var(--radius-pill); font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; }
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.status-sent { background: var(--status-sent-bg); color: var(--status-sent-fg); }
.status-paid { background: var(--status-paid-bg); color: var(--status-paid-fg); }
.amount-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }

/* Beta banner */
.banner { background: var(--coral); padding: 34px 0; }
.banner-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.banner-copy h2 { font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; color: var(--on-coral); }
.banner-copy p { font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,0.9); margin: 8px 0 0; max-width: 640px; }

/* Pillars / feature grids */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.grid-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.card { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; }
.on-paper .card, .trust-card { background: var(--paper); box-shadow: var(--shadow-sm); }
.card .ico, .trust-card .ico {
	display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center;
	background: var(--coral-tint); color: var(--coral-press); border-radius: var(--radius-md);
}
.card h3 { font-family: var(--font-sans); font-weight: 600; font-size: 20px; margin: 20px 0 8px; }
.card p { font-size: 15px; color: var(--ink-secondary); margin: 0; }

/* Feature split rows */
.feature { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.feature.rev { flex-wrap: wrap-reverse; }
.feature-copy { flex: 1 1 400px; min-width: 300px; }
.feature-copy h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.015em; margin-top: 14px; }
.feature-copy p { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--ink-secondary); max-width: 520px; }
.feature-visual { flex: 1 1 340px; min-width: 280px; display: flex; justify-content: center; }
.ticks { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ticks.col { display: flex; flex-direction: column; gap: 14px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink); }
.ticks .tk { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--coral-tint); color: var(--coral-press); display: inline-flex; align-items: center; justify-content: center; }

/* Estimate -> invoice visual */
.convert-visual { display: flex; align-items: center; gap: 0; }
.convert-card { position: relative; width: 186px; background: var(--paper); border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow-md); padding: 8px; }
.convert-card.z2 { box-shadow: var(--shadow-lg); z-index: 2; }
.convert-screen { width: 100%; height: 380px; border-radius: 24px; background: var(--paper-2); padding: 16px 12px; }
.convert-arrow { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: var(--coral); color: #fff; border-radius: 50%; box-shadow: var(--shadow-md); margin: 0 -14px; z-index: 3; }

/* AI assist mock */
.ai-mock { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-md); padding: 22px; }
.ai-prompt-row { display: flex; align-items: center; gap: 10px; background: var(--canvas); border: 1px solid var(--line-strong); border-radius: 14px; padding: 12px 14px; }
.ai-prompt-row span.txt { font-size: 14.5px; color: var(--ink-secondary); }
.ai-send { margin-left: auto; display: inline-flex; width: 32px; height: 32px; flex: none; align-items: center; justify-content: center; background: var(--coral); color: #fff; border-radius: 9px; }
.ai-arrow-row { display: flex; justify-content: center; margin: 12px 0; }
.ai-arrow-row span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.ai-draft { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.ai-draft .row-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.ai-draft .label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.ai-draft .name { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 3px; }
.ai-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--coral-tint); color: var(--coral-press); border-radius: var(--radius-pill); padding: 5px 11px; font-size: 11.5px; font-weight: 600; }
.ai-draft .line { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.ai-draft .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; }
.ai-draft .total span:first-child { font-size: 14px; font-weight: 700; color: var(--ink); }
.ai-draft .total span:last-child { font-size: 20px; font-weight: 600; color: var(--coral-press); }
.ai-note { margin-top: 18px; font-size: 13.5px; color: var(--ink-muted); display: flex; align-items: center; gap: 8px; }

/* Trust blocks */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 44px; }
.trust-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; }
.trust-card h3 { font-family: var(--font-sans); font-weight: 600; font-size: 19px; color: var(--ink); margin: 20px 0 8px; }
.trust-card p { font-size: 15px; color: var(--ink-secondary); margin: 0; }

/* Tool cards */
.tool { display: block; background: var(--canvas); border: 1px solid var(--line); border-radius: 14px; padding: 24px; transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.tool:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tool .ico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; background: var(--coral-tint); color: var(--coral-press); border-radius: 11px; }
.tool h3 { font-family: var(--font-sans); font-weight: 600; font-size: 16px; color: var(--ink); margin: 16px 0 5px; }
.tool p { font-size: 13.5px; color: var(--ink-muted); margin: 0; }

/* Audience mosaic */
.who-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-radius: var(--radius-xl); overflow: hidden; }
.who-tile { position: relative; aspect-ratio: 1; overflow: hidden; }
.who-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.who-tile span {
	position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 14px;
	background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 60%);
	color: #fff; font-weight: 700; font-size: 16px; line-height: 1.2;
}

/* Social proof */
.community-head { max-width: 920px; margin: 0 auto; text-align: center; }
.community-head h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.018em; margin-top: 14px; }
.avatars-pill { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px 10px 12px; }
.avatars { display: flex; }
.avatars span { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid var(--paper); }
.avatars span:not(:first-child) { margin-left: -9px; }
.avatars-pill .txt strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.quote-card { background: var(--canvas); border: 1px solid var(--line); border-radius: 20px; padding: 40px; margin-top: 40px; text-align: left; max-width: 920px; margin-left: auto; margin-right: auto; }
.quote-card svg.quote-ico { color: var(--coral-tint-2); }
.quote-card p { font-family: var(--font-serif); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; color: var(--ink); margin: 12px 0 0; letter-spacing: -0.01em; }
.quote-who { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.quote-who img { width: 38px; height: 38px; border-radius: 10px; }
.quote-who .n { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--ink); }
.quote-who .r { font-size: 13px; color: var(--ink-muted); }

/* FAQ */
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-list details { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 4px 20px; }
.faq-list summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 16.5px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .pm { color: var(--coral); transition: transform var(--dur-base) var(--ease-standard); flex: none; display: inline-flex; }
.faq-list details[open] summary .pm { transform: rotate(45deg); }
.faq-list .ans { padding: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--ink-secondary); margin: 0; }

/* Final CTA */
.final-inner { background: var(--coral); border-radius: var(--radius-xl); padding: 64px 80px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; justify-content: center; }
.final-copy { flex: 1 1 460px; min-width: 300px; }
.final-copy h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(32px, 4vw, 48px); line-height: 1.06; letter-spacing: -0.02em; color: var(--on-coral); }
.final-copy p { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.92); margin: 18px 0 0; max-width: 500px; }
.final .beta-form { margin-top: 30px; }
.final-visual { flex: 0 0 auto; display: flex; justify-content: center; }
.final-phone { position: relative; width: 220px; background: var(--paper); border: 1px solid rgba(0,0,0,0.06); border-radius: 38px; box-shadow: var(--shadow-lg); padding: 10px; transform: rotate(3deg); }
.final-phone .phone-screen { height: 440px; border-radius: 30px; }

/* Footer */
footer { background: var(--canvas-sunk); border-top: 1px solid var(--line); padding: 64px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand p { font-size: 14px; line-height: 1.55; color: var(--ink-secondary); margin: 14px 0 0; max-width: 280px; }
.foot-col h4 { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--ink); margin: 0 0 14px; }
.foot-col ul { display: flex; flex-direction: column; gap: 10px; }
.foot-col a { font-size: 14px; color: var(--ink-secondary); }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot-bottom .copy { font-size: 13px; color: var(--ink-muted); }
.foot-legal { display: flex; align-items: center; gap: 22px; }
.foot-legal a { font-size: 13px; color: var(--ink-muted); }
.foot-legal .lang { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-secondary); }

/* =========================================================================
   Tool / template pages (invoice-generator, invoice-template, etc.)
   ========================================================================= */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-muted); padding: 20px 0 0; }
.breadcrumb a { color: var(--ink-secondary); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--ink-faint); }
.breadcrumb span.here { color: var(--ink); font-weight: 600; }

.tool-hero { padding: 40px 0 72px; }
.tool-hero .lead { font-size: 19px; color: var(--ink-secondary); margin: 22px 0 0; max-width: 560px; }

.prose { max-width: 780px; }
.prose > p { font-size: 17px; line-height: 1.7; color: var(--ink-secondary); margin: 0 0 18px; }
.prose h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(26px, 3vw, 34px); line-height: 1.14; letter-spacing: -0.015em; margin: 44px 0 14px; }
.prose h3 { font-family: var(--font-sans); font-weight: 600; font-size: 19px; color: var(--ink); margin: 28px 0 8px; }
.prose ul.bullets { margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.prose ul.bullets li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.prose ul.bullets li::before { content: ''; position: absolute; left: 6px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.prose a.inline-link { color: var(--coral-press); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose ol { margin: 0 0 20px; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 12px; }
.prose ol li { position: relative; padding-left: 42px; font-size: 16px; line-height: 1.6; color: var(--ink); counter-increment: step; }
.prose ol li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 27px; height: 27px; border-radius: 50%; background: var(--coral-tint); color: var(--coral-press); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.prose .callout { margin: 26px 0; padding: 18px 22px; background: var(--coral-tint); border-radius: var(--radius-md); font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.prose .callout a { color: var(--coral-press); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Document-style example card (stand-in preview) */
.doc-card { width: 100%; max-width: 420px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px; }
.doc-card .doc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.doc-card .doc-title { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.doc-card .doc-amount { font-family: var(--font-serif); font-size: 30px; font-weight: 500; color: var(--ink); margin-top: 6px; letter-spacing: -0.01em; }
.doc-card .doc-row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.doc-card .doc-row span:last-child { color: var(--ink); }
.doc-card .doc-total { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--ink); }
.doc-card .doc-total b { color: var(--ink); font-size: 14px; }
.doc-card .doc-total .serif { font-size: 24px; color: var(--ink); }

@media (max-width: 900px) {
	.foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.grid-3, .trust-grid { grid-template-columns: 1fr 1fr; }
	.navbar-links { display: none; }
	.mobile-menu-toggle {
		order: -1; display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
		width: 38px; height: 38px; padding: 0; background: transparent; border: 0; cursor: pointer;
	}
	.mobile-menu-toggle span { display: block; width: 20px; height: 2px; border-radius: 999px; background: var(--ink); }
	.mobile-menu-panel {
		position: absolute; top: calc(100% + 8px); left: 16px; z-index: 200; min-width: 13rem;
		flex-direction: column; gap: 4px; padding: 8px; background: var(--paper);
		border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
	}
	.is-mobile-menu-open .mobile-menu-panel { display: flex; }
	.mobile-menu-panel a { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; color: var(--ink); }
	.mobile-menu-panel a:hover { background: var(--canvas-sunk); }
}
@media (max-width: 620px) {
	section { padding: 64px 0; }
	.hero { padding: 72px 0 56px; }
	.grid-3, .grid-4, .grid-5, .trust-grid, .foot-grid { grid-template-columns: 1fr; }
	.hero-copy h1 { font-size: 38px; }
	.final-visual { display: none; }
}

/* =========================================================================
   Template gallery (invoice-template page) — thumbnail cards
   ========================================================================= */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; }
.tpl-card { display: flex; flex-direction: column; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.tpl-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.tpl-thumb { display: block; aspect-ratio: 1 / 1.29; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-2); }
.tpl-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: top center; display: block; }
.tpl-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tpl-name { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--ink); }
.tpl-fmt { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-secondary); padding: 3px 0; }
.tpl-fmt img { width: 14px; height: 14px; display: block; }


/* =========================================================================
   Template download modal + email gate (invoice-template page)
   ========================================================================= */
.modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(26,25,19,0.5); }
.modal-overlay[hidden] { display: none; }
.modal { position: relative; width: 100%; max-width: 900px; max-height: 90vh; overflow: auto; background: var(--paper); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.modal-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--canvas-sunk); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-standard); }
.modal-close:hover { background: var(--line-strong); }
.modal-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; }
.modal-preview { background: var(--canvas-sunk); padding: 34px; display: flex; align-items: flex-start; justify-content: center; border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
.modal-preview img { width: 100%; max-width: 360px; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); background: #fff; }
.modal-body { padding: 40px; }
.modal-body h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.015em; }
.modal-desc { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-secondary); }
.modal-bullets { margin: 20px 0 0; display: flex; flex-direction: column; gap: 9px; }
.modal-bullets li { position: relative; padding-left: 24px; font-size: 15px; color: var(--ink); }
.modal-bullets li::before { content: ''; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.modal-kw { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }
.modal-dl { margin: 24px 0 0; padding: 20px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-md); }
.modal-dl-label { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--ink); }
.dl-gate .row { display: flex; gap: 10px; flex-wrap: wrap; }
.dl-gate input[type=email] { flex: 1 1 220px; height: 48px; font-family: var(--font-sans); font-size: 15px; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 16px; outline: none; }
.dl-gate input[type=email]:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--focus-ring); }
.dl-gate .fineprint { margin: 12px 0 0; font-size: 13px; color: var(--ink-muted); }
.dl-ready { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dl-ready[hidden] { display: none; }
.dl-more { font-size: 12.5px; color: var(--ink-muted); }
.modal-cta-note { margin: 22px 0 0; font-size: 14px; color: var(--ink-secondary); }
.modal-cta-note a { color: var(--coral-press); font-weight: 600; }
@media (max-width: 720px) {
	.modal-grid { grid-template-columns: 1fr; }
	.modal-preview { border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 24px; }
	.modal-body { padding: 28px 24px 32px; }
}


/* =========================================================================
   Templates mega-menu (top bar)
   ========================================================================= */
.nav-mega { position: relative; display: inline-flex; }
.nav-mega-trigger { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; color: var(--ink-secondary); cursor: pointer; }
.nav-mega-trigger:hover { color: var(--ink); }
.nav-mega-trigger svg { transition: transform var(--dur-base) var(--ease-standard); }
.nav-mega:hover .nav-mega-trigger svg, .nav-mega:focus-within .nav-mega-trigger svg { transform: rotate(180deg); }
.nav-mega-panel {
	position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
	min-width: 320px; padding: 8px; display: flex; flex-direction: column; gap: 2px;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
	opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); z-index: 200;
}
.nav-mega-panel::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-mega:hover .nav-mega-panel, .nav-mega:focus-within .nav-mega-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-mega-panel a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); }
.nav-mega-panel a:hover { background: var(--canvas-sunk); }
.nav-mega-panel a b { font-size: 14px; font-weight: 600; color: var(--ink); }
.nav-mega-panel a span { font-size: 12.5px; color: var(--ink-muted); }
@media (max-width: 860px) { .nav-mega, .nav-mega-panel { position: static; } .nav-mega-panel { display: none; } }


/* Download format chips (template modal) */
.dl-formats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.dl-fmt { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 7px 12px; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.dl-fmt:hover:not(.is-soon) { border-color: var(--line-strong); }
.dl-fmt.is-selected, .dl-fmt.is-selected:hover { border-color: var(--coral); }
.dl-fmt img { display: block; flex: none; }
.dl-fmt.is-soon { color: var(--ink-faint); background: transparent; border-style: dashed; cursor: not-allowed; }
.dl-email { margin: 0 0 10px; }
.dl-email input[type=email] { width: 100%; }
#dlSubmit { width: 100%; }
.btn img { display: block; flex: none; }