/* InvoiceGuard marketing site, round 2.
   Design language: the printed ledger. Pale green account-book paper,
   double rules over section titles, figures set in mono, one loud
   moment (a rubber stamp landing on the invoice) and quiet elsewhere.
   Brand green is taken from the existing logo shield. Stamp red is
   the only accent and appears only where ink would: stamps and
   overdue states. Shape rule: paper artifacts 2px, controls 4px. */

@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/franklin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/franklin-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/franklin-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/franklin-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/franklin-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("../fonts/franklin-900.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plexmono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plexmono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --paper: #eff3e9;
  --sheet: #fcfcf7;
  --ink: #182420;
  --ink-soft: #3d4a42;
  --faint: #5c6b62;
  --pine: #0c4a3a;
  --pine-deep: #093528;
  --pine-hover: #0a3d2f;
  --stamp: #a62b1f;
  --rule: #cbd6c6;
  --rule-dark: #a9bba4;
  --chip: #e4ecdc;
  --term-bg: #14231c;
  --term-ink: #dce8d8;
  --term-comment: #7fa88e;
  --sans: "Libre Franklin", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
a { color: var(--pine); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--pine-hover); }
::selection { background: var(--chip); color: var(--pine-deep); }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; }
section { scroll-margin-top: 88px; }
code { font-family: var(--mono); font-size: 0.86em; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(239, 243, 233, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-dark);
  box-shadow: 0 1px 0 rgba(252, 252, 247, 0.7);
}
.nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
  height: 66px; display: flex; align-items: center; gap: 28px;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  color: var(--ink); font-size: 19px; font-weight: 800; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--ink); }
.nav-links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav-links a {
  color: var(--ink-soft); text-decoration: none; font-size: 14.5px; font-weight: 500;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--pine); text-decoration: underline; text-underline-offset: 4px; }
.nav-cta {
  background: var(--pine); color: var(--sheet) !important;
  padding: 9px 18px; border-radius: 4px; font-weight: 700;
  transition: background 0.15s ease, transform 0.15s ease;
}
.nav-cta:hover { background: var(--pine-hover); text-decoration: none !important; transform: translateY(-1px); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px; margin-left: auto; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; }

/* ---------- hero ---------- */
.hero { padding: 84px 0 96px; overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center;
}
.hero-grid > * { min-width: 0; }
.hero h1 { font-size: 56px; font-weight: 800; margin: 0 0 22px; max-width: 12em; }
.hero-sub { font-size: 19px; color: var(--ink-soft); max-width: 34em; margin: 0 0 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.btn {
  display: inline-block; padding: 13px 26px; border-radius: 4px;
  font-weight: 700; font-size: 15.5px; text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--pine); color: var(--sheet); border: 1px solid var(--pine); }
.btn-primary:hover { background: var(--pine-hover); color: var(--sheet); transform: translateY(-1px); }
.btn-ghost { border: 1px solid var(--rule-dark); color: var(--ink); background: var(--sheet); }
.btn-ghost:hover { border-color: var(--pine); color: var(--pine); transform: translateY(-1px); }
.install-line {
  display: inline-flex; align-items: center; gap: 16px;
  background: var(--term-bg); border-radius: 2px; padding: 12px 16px;
  font-family: var(--mono); font-size: 14.5px; color: var(--term-ink);
}
.install-line .prompt { color: var(--term-comment); font-weight: 600; }
.copy-btn {
  background: transparent; border: 1px solid rgba(220, 232, 216, 0.35); color: var(--term-ink);
  border-radius: 4px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--sans); transition: border-color 0.15s ease, background 0.15s ease;
}
.copy-btn:hover { border-color: var(--term-ink); background: rgba(220, 232, 216, 0.08); }

/* the paper stack: contract behind, invoice on top, one stamp */
.paper-stack { position: relative; padding: 18px 10px 0 26px; }
.sheet {
  background: var(--sheet);
  border: 1px solid #d8dfd0;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(24, 36, 32, 0.07), 0 28px 48px -28px rgba(24, 36, 32, 0.35);
  padding: 30px 32px;
}
.sheet-contract {
  position: absolute; inset: 0 26px auto 0;
  transform: rotate(-1.6deg);
  padding-bottom: 44px;
}
.sheet-invoice { position: relative; margin-top: 74px; }
.doc-title {
  font-weight: 800; font-size: 21px; letter-spacing: 0.01em; margin: 0;
  text-transform: uppercase;
}
.doc-sub { margin: 3px 0 0; font-size: 13.5px; color: var(--faint); }
.doc-line { font-size: 13.5px; color: var(--ink-soft); margin: 10px 0 0; max-width: 30em; }
.doc-hash { font-family: var(--mono); font-size: 12px; color: var(--faint); margin: 14px 0 0; }
.inv-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  border-bottom: 2px solid var(--ink); padding-bottom: 14px;
}
.inv-meta {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap;
}
.inv-to { font-size: 14.5px; margin: 16px 0 6px; }
.inv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.inv-table td { padding: 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.inv-table .num {
  font-family: var(--mono); font-weight: 500; text-align: right; white-space: nowrap; padding-left: 18px;
}
.inv-total td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 700; padding-top: 13px; }
.inv-foot { font-size: 13px; color: var(--faint); margin: 14px 0 108px; max-width: 62%; }
.stamp {
  position: absolute; right: 26px; bottom: 22px;
  border: 3px double var(--stamp); border-radius: 6px;
  color: var(--stamp); mix-blend-mode: multiply;
  padding: 8px 20px 10px; text-align: center;
  transform: rotate(-9deg);
  opacity: 0.92;
}
.stamp-word {
  display: block; font-family: var(--mono); font-weight: 600;
  font-size: 40px; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase;
}
.stamp-sub {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase; margin-top: 5px;
}
@keyframes stamp-in {
  0% { opacity: 0; transform: rotate(-14deg) scale(2.3); }
  55% { opacity: 1; transform: rotate(-8deg) scale(0.93); }
  75% { transform: rotate(-9.5deg) scale(1.03); }
  100% { opacity: 0.92; transform: rotate(-9deg) scale(1); }
}
.stamp { animation: stamp-in 0.5s cubic-bezier(0.22, 0.9, 0.32, 1) 0.55s both; }
.artifact-cap { font-size: 13px; color: var(--faint); margin: 18px 4px 0; text-align: left; }

/* ---------- sections ---------- */
.section { padding: 92px 0; }
.sec-head { max-width: 720px; margin-bottom: 48px; position: relative; padding-top: 22px; }
.sec-head::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%;
  border-top: 2px solid var(--ink);
  box-shadow: 0 4px 0 -1px var(--paper), 0 5px 0 0 var(--rule-dark);
}
.sec-head h2 { font-size: 38px; font-weight: 800; margin: 0 0 14px; }
.sec-lead { font-size: 17.5px; color: var(--ink-soft); margin: 0; }

/* the chase, as a ledger */
.ledger { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.ledger th {
  text-align: left; font-weight: 700; font-size: 13.5px; color: var(--ink);
  padding: 0 18px 12px 0; border-bottom: 2px solid var(--ink);
}
.ledger th:last-child, .ledger td:last-child { padding-right: 0; }
.ledger td { padding: 17px 18px 17px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ledger tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
.ledger .when { font-family: var(--mono); font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--pine-deep); }
.ledger-note { font-size: 14.5px; color: var(--ink-soft); margin: 18px 0 0; }

/* features, as a grouped index */
.cluster { margin-bottom: 52px; }
.cluster:last-child { margin-bottom: 0; }
.cluster h3 { font-size: 21px; font-weight: 700; margin: 0 0 6px; }
.feat-list { margin: 0; }
.feat {
  display: grid; grid-template-columns: 250px 1fr; gap: 28px;
  padding: 17px 0; border-top: 1px solid var(--rule);
}
.feat:first-child { border-top: 2px solid var(--ink); }
.feat dt { font-weight: 700; font-size: 16.5px; }
.feat dd { margin: 0; color: var(--ink-soft); font-size: 15.5px; max-width: 62ch; }
.feat code, .faq code {
  background: var(--chip); color: var(--pine-deep);
  padding: 1px 6px; border-radius: 2px; white-space: nowrap;
}

/* terminal transcript */
.transcript {
  background: var(--term-bg); color: var(--term-ink);
  border-radius: 2px; padding: 28px 30px; margin: 0;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.7;
  overflow-x: auto;
  box-shadow: 0 24px 44px -26px rgba(24, 36, 32, 0.45);
}
.transcript code { font-size: inherit; background: none; padding: 0; }
.transcript .tc { color: var(--term-comment); }

/* screenshots */
.shot { margin: 0; }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule-dark); border-radius: 2px;
  box-shadow: 0 18px 36px -24px rgba(24, 36, 32, 0.35);
}
.shot figcaption { font-size: 14px; color: var(--ink-soft); margin-top: 14px; max-width: 56ch; }
.shot figcaption strong { color: var(--ink); }
.shots-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 34px; }
.shot-offset { margin-top: 52px; }

/* fine print */
.fineprint {
  background: var(--sheet); border: 1px solid var(--rule-dark); border-radius: 2px;
  padding: 36px 40px; max-width: 880px;
  box-shadow: 0 14px 30px -22px rgba(24, 36, 32, 0.3);
}
.fineprint h2 { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.fineprint-lead { font-size: 14.5px; color: var(--faint); margin: 0 0 18px; }
.fineprint ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.fineprint li { margin: 8px 0; }
.fineprint li::marker { color: var(--stamp); }

/* FAQ */
.faq { max-width: 820px; border-bottom: 2px solid var(--ink); }
.faq details { border-top: 1px solid var(--rule); }
.faq details:first-child { border-top: 2px solid var(--ink); }
.faq summary {
  cursor: pointer; padding: 19px 8px 19px 0; font-weight: 700; font-size: 16.5px;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--pine); font-size: 22px; font-weight: 400; line-height: 1;
  flex: 0 0 auto; transition: transform 0.18s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; margin: 0; color: var(--ink-soft); font-size: 15.5px; max-width: 68ch; }

/* final CTA: the tear-off stub */
.cta-section { padding: 0 0 96px; }
.stub {
  background: var(--sheet); border: 1px solid var(--rule-dark); border-top: 0; border-radius: 2px;
  padding: 52px 48px; position: relative;
  box-shadow: 0 18px 34px -24px rgba(24, 36, 32, 0.3);
}
.stub::before {
  content: ""; position: absolute; top: -2px; left: 0; right: 0;
  border-top: 2px dashed var(--rule-dark);
}
.stub h2 { font-size: 34px; font-weight: 800; margin: 0 0 12px; }
.stub p { color: var(--ink-soft); font-size: 17px; margin: 0 0 28px; max-width: 36em; }
.stub-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

/* footer */
footer.site-footer { background: var(--pine-deep); color: #a9bfaf; padding: 60px 0 36px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 42px; }
.foot-brand { display: flex; align-items: center; gap: 10px; color: var(--sheet); font-size: 19px; font-weight: 800; margin-bottom: 13px; }
.foot-grid p { font-size: 14px; margin: 0; max-width: 27em; line-height: 1.65; }
.foot-grid h4 { color: var(--sheet); font-size: 14.5px; font-weight: 700; margin: 0 0 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin: 8px 0; }
.foot-grid a { color: #a9bfaf; text-decoration: none; font-size: 14.5px; }
.foot-grid a:hover { color: var(--sheet); text-decoration: underline; }
.foot-base {
  border-top: 1px solid rgba(252, 252, 247, 0.16); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px;
}
.foot-links { display: flex; gap: 22px; }
.foot-base a { color: #a9bfaf; text-decoration: none; }
.foot-base a:hover { color: var(--sheet); text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .hero h1 { font-size: 44px; }
  .hero-grid { gap: 48px; }
}
@media (max-width: 900px) {
  .hero { padding: 60px 0 72px; }
  .hero-grid { grid-template-columns: 1fr; }
  .paper-stack { max-width: 560px; }
  .section { padding: 68px 0; }
  .shots-row { grid-template-columns: 1fr; }
  .shot-offset { margin-top: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav-links {
    display: none; position: absolute; top: 66px; left: 0; right: 0;
    background: var(--paper); flex-direction: column; align-items: stretch;
    padding: 8px 24px 16px; gap: 0; border-bottom: 1px solid var(--rule-dark);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .nav-links a:last-child { border-bottom: 0; margin-top: 10px; text-align: center; }
  .nav-toggle { display: block; }
  .feat { grid-template-columns: 1fr; gap: 5px; padding: 15px 0; }
}
@media (max-width: 720px) {
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; }
  .ledger thead { display: none; }
  .ledger tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .ledger tbody tr:last-child { border-bottom: 2px solid var(--ink); }
  .ledger td { border-bottom: 0; padding: 2px 0; }
  .ledger tbody tr:last-child td { border-bottom: 0; }
  .ledger .when { font-size: 12.5px; margin-bottom: 3px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .nav-inner { padding: 0 20px; }
  .hero h1 { font-size: 34px; }
  .hero-sub { font-size: 17px; }
  .section h2, .sec-head h2 { font-size: 29px; }
  .sheet { padding: 24px 22px; }
  .sheet-invoice { margin-top: 64px; }
  .stamp-word { font-size: 30px; }
  .stamp { right: 16px; bottom: 16px; padding: 6px 14px 8px; }
  .inv-meta { display: none; }
  .transcript { padding: 22px 18px; font-size: 12.5px; }
  .fineprint { padding: 28px 24px; }
  .stub { padding: 38px 26px; }
  .stub h2 { font-size: 27px; }
  .foot-grid { grid-template-columns: 1fr; }
  .install-line { font-size: 13px; max-width: 100%; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stamp { animation: none; opacity: 0.92; transform: rotate(-9deg); }
  .btn, .nav-cta, .faq summary::after { transition: none; }
}