/* ═══════════════════════════════════════════════════════════════
   SnipeWork Ledger Design System — v1 (2026-07)
   Light "financial instrument" theme. One accent: SnipeWork green.
   Typography: Inter Tight 300/400. No shadows. Depth = tint shifts.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Accent — green replaces indigo per brand */
  --accent: #00a45f;            /* filled buttons, active states */
  --accent-hover: #00b96c;      /* hover of filled */
  --accent-text: #008f53;       /* links, emphasized phrases */
  --accent-wash: #e6f9f0;       /* lightest green surface, tag pills */
  --accent-border: #a9e8c9;     /* ghost button border */
  --accent-border-soft: #cff2e0;/* tertiary ghost border */
  --accent-deep: #045c38;       /* rare heavy stroke */

  /* Ink & neutrals */
  --ink: #061b31;               /* headings + primary body */
  --slate: #64748d;             /* secondary text */
  --steel: #50617a;             /* tertiary text, helper copy */
  --smoke: #8fa3c0;             /* decorative large text only */
  --canvas: #ffffff;
  --mist: #f8fafd;              /* section banding, footer */
  --frost: #e5edf5;             /* borders, dividers, hover bg */

  /* Type scale */
  --font: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-caption: 12px;  --lh-caption: 1.45;  --ls-caption: -0.12px;
  --text-body-sm: 14px;  --lh-body-sm: 1.4;   --ls-body-sm: -0.14px;
  --text-body: 16px;     --lh-body: 1.4;      --ls-body: -0.16px;
  --text-body-lg: 20px;  --lh-body-lg: 1.4;   --ls-body-lg: -0.2px;
  --text-subheading: 22px; --lh-subheading: 1.2; --ls-subheading: -0.22px;
  --text-heading-sm: 26px; --lh-heading-sm: 1.12; --ls-heading-sm: -0.26px;
  --text-heading: 32px;    --lh-heading: 1.1;  --ls-heading: -0.64px;
  --text-heading-lg: 48px; --lh-heading-lg: 1.03; --ls-heading-lg: -0.96px;
  --text-display: 56px;    --lh-display: 1.03; --ls-display: -1.4px;
  --w-light: 300; --w-regular: 400;

  /* Layout */
  --page-max: 1320px;
  --content-max: 1080px;
  --section-gap: 96px;
  --card-pad: 32px;
  --gap: 8px;
  --radius: 4px;
  --radius-tag: 9999px;
  --nav-h: 76px;
}

/* ── Base ─────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-weight: var(--w-light);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--ink);
  background: var(--canvas);
  font-feature-settings: 'ss01' on, 'tnum' on;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-text); text-decoration: none; }
a.u { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

h1, h2, h3, h4 { font-weight: var(--w-light); color: var(--ink); }
.t-display   { font-size: clamp(36px, 5.4vw, var(--text-display)); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.t-heading-lg{ font-size: clamp(32px, 4.4vw, var(--text-heading-lg)); line-height: var(--lh-heading-lg); letter-spacing: var(--ls-heading-lg); }
.t-heading   { font-size: var(--text-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.t-heading-sm{ font-size: var(--text-heading-sm); line-height: var(--lh-heading-sm); letter-spacing: var(--ls-heading-sm); }
.t-subheading{ font-size: var(--text-subheading); line-height: var(--lh-subheading); letter-spacing: var(--ls-subheading); }
.t-body-lg   { font-size: var(--text-body-lg); line-height: var(--lh-body-lg); letter-spacing: var(--ls-body-lg); }
.t-body-sm   { font-size: var(--text-body-sm); line-height: var(--lh-body-sm); letter-spacing: var(--ls-body-sm); }
.t-caption   { font-size: var(--text-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); }
.t-slate { color: var(--slate); }
.t-steel { color: var(--steel); }
.t-accent { color: var(--accent-text); }

/* ── Layout helpers ───────────────────────────────────────── */
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 24px; }
.content { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-gap) 0; }
.divider { border: 0; border-top: 1px solid var(--frost); width: 100%; }
.band { background: var(--mist); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: var(--w-regular);
  font-size: var(--text-body-sm); letter-spacing: var(--ls-body-sm);
  border-radius: var(--radius); cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  border: 1px solid transparent; white-space: nowrap;
}
.btn-primary {
  background: var(--accent); color: #fff; padding: 15px 24px 16px;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost {
  background: transparent; color: var(--accent-text);
  border-color: var(--accent-border); padding: 14px 24px 15px;
}
.btn-ghost:hover { background: var(--accent-wash); }
.btn-tertiary {
  background: transparent; color: var(--accent-text);
  border-color: var(--accent-border-soft); padding: 9px 16px 10px;
}
.btn-tertiary:hover { background: var(--accent-wash); }
.btn-sm { padding: 9px 16px 10px; }
.link-cta { font-weight: var(--w-regular); color: var(--accent-text); }
.link-cta::after { content: ' ›'; }
.link-cta:hover { color: var(--accent); }

/* ── Tag / pill ───────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-wash); color: var(--accent-deep);
  border-radius: var(--radius-tag); padding: 5px 14px 6px;
  font-size: var(--text-caption); font-weight: var(--w-regular);
  letter-spacing: var(--ls-caption);
}
.tag .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: ledger-pulse 2.2s ease-in-out infinite;
}
@keyframes ledger-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ── Navigation ───────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--frost); height: var(--nav-h);
}
.nav-inner {
  max-width: var(--page-max); margin: 0 auto; padding: 0 24px;
  height: 100%; display: flex; align-items: center; gap: 32px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.nav-logo img { width: 28px; height: 28px; border-radius: 6px; }
.nav-logo span { font-size: 17px; font-weight: var(--w-regular); letter-spacing: -0.2px; }
.nav-logo b { font-weight: var(--w-regular); color: var(--accent-text); }
.nav-menu { display: flex; align-items: center; gap: 24px; flex: 1; }
.nav-menu a {
  color: var(--ink); font-size: var(--text-body-sm); font-weight: var(--w-regular);
  letter-spacing: var(--ls-body-sm);
}
.nav-menu a:hover { color: var(--accent-text); }
.nav-actions { display: flex; align-items: center; gap: var(--gap); }
.nav-burger { display: none; background: none; border: 1px solid var(--frost); border-radius: var(--radius); width: 40px; height: 40px; cursor: pointer; color: var(--ink); font-size: 18px; }

/* ── Cards (chrome-free) ──────────────────────────────────── */
.card { background: var(--canvas); border-radius: var(--radius); padding: var(--card-pad); }
.card-frost { border: 1px solid var(--frost); }
.card-wash { background: var(--accent-wash); }
.card-mist { background: var(--mist); }
.card-label {
  font-size: var(--text-caption); font-weight: var(--w-regular);
  color: var(--accent-text); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 12px;
}

/* ── Stat block — quiet monument ──────────────────────────── */
.stat-number {
  font-size: clamp(36px, 4.6vw, var(--text-display));
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
  color: var(--ink); font-weight: var(--w-light);
  font-feature-settings: 'tnum' on;
}
.stat-label { color: var(--slate); font-size: var(--text-body); margin-top: 8px; }

/* ── Section heading block — "Stripe statement" ───────────── */
.statement { max-width: 720px; }
.statement h2 { margin-bottom: 24px; }
.statement p { color: var(--slate); font-size: var(--text-subheading); line-height: 1.4; letter-spacing: var(--ls-subheading); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-item { border-top: 1px solid var(--frost); }
.faq-item:last-child { border-bottom: 1px solid var(--frost); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0; cursor: pointer;
  font-size: var(--text-body-lg); font-weight: var(--w-light); color: var(--ink);
  letter-spacing: var(--ls-body-lg);
}
.faq-q::after { content: '+'; color: var(--accent-text); font-size: 22px; font-weight: var(--w-light); transition: transform .2s; }
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; color: var(--steel); line-height: 1.55; }
.faq-item.open .faq-a { max-height: 300px; padding-bottom: 22px; }
.faq-a a { text-decoration: underline; text-underline-offset: 2px; }

/* ── Footer ───────────────────────────────────────────────── */
.footer { background: var(--mist); border-top: 1px solid var(--frost); padding: 64px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer h4 { font-size: var(--text-body-sm); font-weight: var(--w-regular); margin-bottom: 16px; color: var(--ink); }
.footer a { display: block; color: var(--steel); font-size: var(--text-body-sm); margin-bottom: 10px; }
.footer .nav-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.footer .nav-logo span { color: var(--ink); }
.footer a:hover { color: var(--accent-text); }
.footer-note { color: var(--slate); font-size: var(--text-caption); line-height: 1.5; margin-top: 12px; max-width: 360px; }
.footer-bottom { border-top: 1px solid var(--frost); margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--slate); font-size: var(--text-caption); }

/* ── Tables (ledger style) ────────────────────────────────── */
.ltable { width: 100%; border-collapse: collapse; font-feature-settings: 'tnum' on; }
.ltable th {
  text-align: left; font-weight: var(--w-regular); font-size: var(--text-body-sm);
  color: var(--ink); padding: 14px 16px; border-bottom: 1px solid var(--frost);
}
.ltable td { padding: 14px 16px; border-bottom: 1px solid var(--frost); color: var(--steel); font-size: var(--text-body-sm); }
.ltable td.y { color: var(--accent-text); }
.ltable td.n { color: var(--smoke); }
.ltable tr:hover td { background: var(--mist); }

/* ── Google button icon ───────────────────────────────────── */
.gicon { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --section-gap: 64px; }
  .nav-menu { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--frost);
    flex-direction: column; align-items: flex-start; padding: 16px 24px; gap: 16px; }
  .nav-menu.open { display: flex; }
  .nav-burger { display: block; margin-left: auto; }
  .nav-actions { margin-left: 0; }
  .nav-actions .btn-ghost { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .btn-primary, .btn-ghost { width: 100%; }
}