/* ───────────────────────────────────────────────────────────────────────
   InvoicePro — marketing mockup stylesheet

   Tokens lifted verbatim from StatementPro's app/globals.css so the two
   products read as one house. The ONLY deliberate divergence is --accent:
   StatementPro is teal #0F5F5C, InvoicePro is ink blue #17466B. Sibling,
   not clone. To make them identical, change the three --accent* lines.
   ─────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* The palette lives in tokens.css, linked before this file by every page,
 * so the marketing site and the application at /convert cannot drift apart.
 * Only --border-subtle and the *-bg tints were added there; every other
 * value is the one this file used to declare. */

html, body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  font-weight: var(--font-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }

.page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-page); }
.grow { flex: 1; }

/* ─── Nav ────────────────────────────────────────────────────────────── */

.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-page);
  position: sticky; top: 0; z-index: 50;
}
.brandLink { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-primary); }
.brandWord { font-size: var(--text-base); font-weight: 600; letter-spacing: -0.01em; }
.navRight { display: flex; align-items: center; gap: var(--space-5); }
.navLinks { display: flex; align-items: center; gap: var(--space-4); }
.navLink { font-size: var(--text-sm); color: var(--text-secondary); transition: color 120ms ease; }
.navLink:hover { color: var(--text-primary); }
.navCtas { display: flex; align-items: center; gap: var(--space-2); }

/* ─── Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: var(--font-medium);
  border-radius: var(--radius-md); border: 1px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap; user-select: none;
  padding: var(--space-3) var(--space-5); font-size: var(--text-sm);
  line-height: var(--leading-snug); min-height: 40px;
}
.btn-sm { padding: var(--space-2) var(--space-4); min-height: 36px; }
.btn-primary { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-muted); border-color: var(--text-tertiary); }
.btn-quiet { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn-quiet:hover { color: var(--text-primary); background: var(--bg-muted); }
.btn-block { width: 100%; }

/* ─── Hero ───────────────────────────────────────────────────────────── */

.hero {
  max-width: 800px; margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-10);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--space-5);
}
.heroTitle {
  font-size: var(--text-3xl); font-weight: var(--font-medium); color: var(--text-primary);
  letter-spacing: -0.025em; line-height: var(--leading-tight); max-width: 720px;
}
.heroSubtitle {
  font-size: var(--text-lg); color: var(--text-secondary);
  line-height: var(--leading-relaxed); max-width: 560px;
}
.heroCtas { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); }
.finePrint { font-size: var(--text-xs); color: var(--text-tertiary); line-height: var(--leading-snug); }

/* ─── Chip strip ─────────────────────────────────────────────────────── */

.stripSection {
  max-width: 960px; margin: 0 auto; width: 100%;
  padding: 0 var(--space-6) var(--space-10);
  border-bottom: 1px solid var(--border-default);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
}
.stripLabel {
  font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--text-tertiary);
  letter-spacing: .12em; text-transform: uppercase; line-height: var(--leading-snug); text-align: center;
}
.chipGrid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.chip {
  padding: var(--space-1) var(--space-3); font-size: var(--text-xs); color: var(--text-secondary);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-full); line-height: 1.8;
}

/* ─── Sections ───────────────────────────────────────────────────────── */

.section {
  max-width: 1080px; margin: 0 auto; width: 100%;
  padding: var(--space-10) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-8);
}
.sectionAlt {
  max-width: 100%; background: var(--bg-muted);
  border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default);
}
.sectionAlt > * { max-width: 1080px; margin-left: auto; margin-right: auto; width: 100%; }
.sectionHeader {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-2); max-width: 680px; margin: 0 auto;
}
.eyebrow {
  font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--accent);
  letter-spacing: .16em; text-transform: uppercase; line-height: var(--leading-snug);
}
.sectionTitle {
  font-size: var(--text-2xl); font-weight: var(--font-medium); color: var(--text-primary);
  letter-spacing: -0.02em; line-height: var(--leading-tight);
}
.sectionSubtitle { font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* ─── Cards ──────────────────────────────────────────────────────────── */

.card {
  display: flex; flex-direction: column;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-5); position: relative;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.card-highlight { background: var(--accent-muted); border-color: var(--accent); }

.stepGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.stepCard { gap: var(--space-3); }
.stepNumber { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--accent); letter-spacing: .16em; }
.stepTitle { font-size: var(--text-base); font-weight: var(--font-medium); line-height: var(--leading-snug); }
.stepBody { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }

.whyGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.whyCard { gap: var(--space-2); }
.whyIcon { font-size: 22px; line-height: 1; margin-bottom: var(--space-1); }
.whyTitle { font-size: var(--text-base); font-weight: var(--font-medium); line-height: var(--leading-snug); }
.whyBody { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* ─── Product panel (the mock app screen) ────────────────────────────── */

.panel {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
.panelBar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default); background: var(--bg-muted);
}
.dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--border-strong); }
.panelUrl {
  margin-left: var(--space-3); font-family: var(--font-mono);
  font-size: var(--text-xs); color: var(--text-tertiary);
}
.panelBody { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

.quoteBox {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-4); background: var(--bg-muted);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.quoteLine { display: flex; justify-content: space-between; font-size: var(--text-sm); }
.quoteLabel { color: var(--text-secondary); }
.quoteValue { font-family: var(--font-mono); color: var(--text-primary); }
.quoteTotal { border-top: 1px solid var(--border-strong); padding-top: var(--space-2); margin-top: var(--space-1); font-weight: var(--font-medium); }

table.rows { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
table.rows th {
  text-align: left; font-weight: var(--font-medium); color: var(--text-tertiary);
  letter-spacing: .08em; text-transform: uppercase; font-size: 10px;
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-default); white-space: nowrap;
}
table.rows td {
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary); vertical-align: top;
}
table.rows td.num { font-family: var(--font-mono); color: var(--text-primary); text-align: right; white-space: nowrap; }
table.rows tr.flagged td { background: #FDF6F5; }
.tableScroll { overflow-x: auto; }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border-radius: var(--radius-full);
  font-size: 10px; font-weight: var(--font-medium); letter-spacing: .04em;
  border: 1px solid transparent; white-space: nowrap;
}
.badge-ok { background: #EDF5F0; color: var(--success); border-color: #CFE4D8; }
.badge-flag { background: #FAEDEC; color: var(--danger); border-color: #EED6D4; }
.badge-info { background: var(--accent-muted); color: var(--accent); border-color: #CFDCE7; }
.badge-warn { background: #FBF3E7; color: var(--warning); border-color: #EEDFC6; }

/* ─── Proof / evidence block ─────────────────────────────────────────── */

.proofGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); align-items: start; }
.mono { font-family: var(--font-mono); }
.codeBlock {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7;
  background: var(--bg-muted); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: var(--space-4); color: var(--text-secondary);
  overflow-x: auto; white-space: pre;
}
.codeBlock .hl { color: var(--danger); }
.codeBlock .ok { color: var(--success); }

.statGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.statValue { font-size: var(--text-xl); font-weight: var(--font-medium); letter-spacing: -0.02em; font-family: var(--font-mono); }
.statLabel { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-snug); }
.statNote { font-size: var(--text-xs); color: var(--text-tertiary); }

/* ─── Pricing ────────────────────────────────────────────────────────── */

.priceHero { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.priceBig { font-size: var(--text-4xl); font-weight: var(--font-medium); letter-spacing: -0.03em; line-height: 1; font-family: var(--font-mono); }
.priceUnit { font-size: var(--text-base); color: var(--text-secondary); }
.includeList { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; }
.includeList li { display: flex; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-snug); }
.tick { color: var(--accent); flex-shrink: 0; }
.cross { color: var(--text-tertiary); flex-shrink: 0; }

/* ─── Legal / prose pages ────────────────────────────────────────────── */

.prose { max-width: 760px; margin: 0 auto; width: 100%; padding: var(--space-10) var(--space-6); }
.proseHeader { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding-bottom: var(--space-8); }
.proseTitle { font-size: var(--text-3xl); font-weight: var(--font-medium); letter-spacing: -0.025em; line-height: var(--leading-tight); }
.proseLede { font-size: var(--text-base); color: var(--text-secondary); max-width: 560px; }
.proseVersion { font-size: var(--text-xs); color: var(--text-tertiary); font-family: var(--font-mono); }
.prose h2 { font-size: var(--text-xl); font-weight: var(--font-medium); letter-spacing: -0.015em; margin: var(--space-8) 0 var(--space-4); }
.prose p { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); }
.prose ul { margin: 0 0 var(--space-4) var(--space-5); }
.prose li { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-2); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); font-size: var(--text-xs); }
.prose th { text-align: left; font-weight: var(--font-medium); color: var(--text-primary); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-strong); }
.prose td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-default); color: var(--text-secondary); vertical-align: top; }

.note {
  border-left: 2px solid var(--accent); background: var(--accent-muted);
  padding: var(--space-3) var(--space-4); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4);
}

/* ─── FAQ ────────────────────────────────────────────────────────────── */

.faqList { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; margin: 0 auto; width: 100%; }
.faqItem { border-bottom: 1px solid var(--border-default); padding-bottom: var(--space-4); }
.faqQ { font-size: var(--text-base); font-weight: var(--font-medium); margin-bottom: var(--space-2); }
.faqA { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* ─── Auth card ──────────────────────────────────────────────────────── */

.authPage { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-6); background: var(--bg-page); }
.authCard { width: 100%; max-width: 400px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.authTitle { font-size: var(--text-xl); font-weight: var(--font-medium); letter-spacing: -0.015em; }
.authSub { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-1); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.label { font-size: var(--text-sm); font-weight: var(--font-medium); }
.req { color: var(--danger); }
.input {
  width: 100%; padding: var(--space-3); font-family: var(--font-sans); font-size: var(--text-sm);
  color: var(--text-primary); background: var(--bg-surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
}
.input:focus { outline: 2px solid var(--border-focus); outline-offset: -1px; border-color: var(--accent); }
.authFoot { font-size: var(--text-xs); color: var(--text-tertiary); text-align: center; line-height: var(--leading-relaxed); }
.authFoot a { color: var(--accent); }

/* ─── CTA band + footer ──────────────────────────────────────────────── */

.ctaBand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); padding: var(--space-12) var(--space-6); }
.ctaTitle { font-size: var(--text-2xl); font-weight: var(--font-medium); letter-spacing: -0.02em; line-height: var(--leading-tight); }
.ctaBody { font-size: var(--text-base); color: var(--text-secondary); max-width: 520px; }

.footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border-default);
  background: var(--bg-page); font-size: var(--text-xs); color: var(--text-tertiary);
}
.footerLinks { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.footerLinks a { color: var(--text-tertiary); transition: color 120ms ease; }
.footerLinks a:hover { color: var(--text-primary); }

@media (max-width: 640px) {
  :root { --text-3xl: 34px; --text-4xl: 46px; --text-2xl: 26px; }
  .navLinks { display: none; }
  .section, .hero { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* ─── Video ──────────────────────────────────────────────────────────────
   preload="none" on the element and a poster image here: a 9MB file must not
   download itself for every visitor who never presses play. The poster is
   122KB and carries the frame that explains the product on its own. */
.videoFrame {
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  line-height: 0;
}
.videoFrame video { width: 100%; height: auto; display: block; background: #000; }