/* ============================================================
   FAC-T — marketing site styles
   ============================================================
   The visual language comes from financial statements, not from
   SaaS landing pages: tabular figures, right-aligned columns, and
   the double rule that in accounting means "final, checked total".
   The double rule is the only recurring ornament and it always
   carries that meaning.

   Palette is the FAC-T brand guide. Navy does the structural work,
   orange is reserved for actions only.
   ============================================================ */

:root {
  --ink:        #292929;
  --ink-soft:   #5A5754;
  --ink-faint:  #8C8781;
  --paper:      #EAE6E3;
  --sheet:      #FFFFFF;
  --navy:       #3B5B8A;
  --navy-deep:  #24395F;
  --navy-tint:  #E4EAF2;
  --orange:     #F28B30;
  --orange-deep:#C96A1A;
  --orange-tint:#FCE7D2;
  --rule:       #C9C3BD;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .wordmark {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1.1rem; max-width: var(--measure); }
a { color: var(--navy); }

/* Every figure on this site is set the way a statement sets figures. */
.fig {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
}

/* The double rule: a final, checked total. Used only where that
   meaning applies — under section headings and statement totals. */
.rule-double {
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  height: 3px;
  margin: 0;
}

/* ---------- shell ---------- */
.wrap { max-width: 1140px; margin: 0 auto; padding-inline: var(--gutter); }

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(234,230,227,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 68px;
}
.wordmark {
  font-size: 1.4rem; letter-spacing: 0.02em; color: var(--navy-deep);
  text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.5rem;
}
.wordmark span { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0.04em; }

.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a {
  text-decoration: none; color: var(--ink-soft); font-size: 0.94rem;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--orange); }

.nav-toggle { display: none; background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 0.4rem 0.6rem; font-size: 1rem; cursor: pointer; color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font: inherit; font-weight: 600; font-size: 0.95rem;
  padding: 0.72rem 1.4rem; border-radius: 4px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: background 120ms ease, color 120ms ease;
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-deep); }
.btn-quiet { background: transparent; color: var(--navy-deep); border-color: var(--navy); }
.btn-quiet:hover { background: var(--navy-tint); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px;
}

/* ---------- sections ---------- */
section { padding-block: clamp(3rem, 6vw, 4.75rem); }
.section-head { margin-bottom: 2.5rem; }
.section-head h2 { margin-bottom: 0.9rem; }
.section-head .rule-double { max-width: 76px; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { margin-bottom: 1.4rem; }
.hero-lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 46ch; }

/* The statement that acts as the hero image. */
.statement {
  background: var(--sheet);
  border: 1px solid var(--rule);
  padding: 1.9rem 1.7rem 1.5rem;
  box-shadow: 0 18px 40px -28px rgba(41,41,41,0.5);
}
.statement-head { margin-bottom: 1.1rem; }
.statement-head h3 { font-size: 0.98rem; color: var(--navy-deep); }
.statement-head p { font-size: 0.78rem; color: var(--ink-faint); margin: 0.2rem 0 0; }
.statement table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.statement td { padding: 0.32rem 0; vertical-align: baseline; }
.statement td.fig { padding-left: 1rem; }
.statement .grp td { font-weight: 600; color: var(--navy-deep); padding-top: 0.9rem; font-size: 0.8rem; }
.statement .item td:first-child { padding-left: 0.9rem; color: var(--ink-soft); }
.statement .sub td { border-top: 1px solid var(--rule); font-weight: 600; }
.statement .total td { padding-top: 0.7rem; font-weight: 700; }
.statement .total td.fig { border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); }
.balance-note {
  margin-top: 1.1rem; padding-top: 0.8rem; border-top: 1px solid var(--rule);
  font-size: 0.78rem; color: var(--navy-deep); display: flex; align-items: center; gap: 0.45rem;
}
.balance-note b { color: var(--orange-deep); }

/* ---------- opt-in ---------- */
.optin { background: var(--sheet); border: 1px solid var(--rule); padding: clamp(1.6rem, 3vw, 2.4rem); }
.optin h2 { font-size: 1.5rem; margin-bottom: 0.7rem; }
.optin p { font-size: 0.95rem; color: var(--ink-soft); }
.field-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.2rem; }
input[type="email"], input[type="text"], textarea, select {
  font: inherit; font-size: 0.95rem; padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet); color: var(--ink);
  width: 100%;
}
textarea { min-height: 140px; resize: vertical; }
.field-row input[type="email"] { flex: 1; min-width: 240px; width: auto; }
label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; }
.field { margin-bottom: 1.1rem; }
.hint { font-size: 0.78rem; color: var(--ink-faint); margin-top: 0.5rem; }

/* ---------- feature rows (ruled, not carded) ---------- */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: 200px 1fr; gap: clamp(1rem, 4vw, 3rem);
  padding-block: 1.9rem; border-bottom: 1px solid var(--rule);
}
.row h3 { color: var(--navy-deep); }
.row p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

/* ---------- steps (a genuine sequence, so numbered) ---------- */
.steps { counter-reset: step; display: grid; gap: 1.6rem; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.step::before {
  counter-increment: step; content: counter(step);
  font-family: 'Lora', serif; font-size: 1.5rem; color: var(--orange-deep);
  line-height: 1; padding-top: 0.15rem; min-width: 1.6rem;
}
.step h3 { margin-bottom: 0.35rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }

/* ---------- panels ---------- */
.panel { background: var(--sheet); border: 1px solid var(--rule); padding: clamp(1.5rem, 3vw, 2.2rem); }
.panel-navy { background: var(--navy-deep); color: #fff; border-color: var(--navy-deep); }
.panel-navy h2, .panel-navy h3 { color: #fff; }
.panel-navy p { color: rgba(255,255,255,0.82); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.plan { background: var(--sheet); border: 1px solid var(--rule); padding: 1.6rem; display: flex; flex-direction: column; }
.plan-mark { border-color: var(--navy); border-width: 2px; }
.plan h3 { color: var(--navy-deep); margin-bottom: 0.4rem; }
.plan .price { font-family: 'Lora', serif; font-size: 1.7rem; color: var(--ink); margin-bottom: 0.2rem; }
.plan .price small { font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--ink-faint); font-weight: 500; }
.plan ul { list-style: none; padding: 0; margin: 1.1rem 0 1.4rem; font-size: 0.93rem; color: var(--ink-soft); }
.plan li { padding: 0.32rem 0 0.32rem 1.2rem; position: relative; }
.plan li::before { content: '—'; position: absolute; left: 0; color: var(--orange); }
.plan .btn { margin-top: auto; text-align: center; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--rule); padding-block: 2.5rem; font-size: 0.88rem; color: var(--ink-soft); }
.foot-grid { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.site-foot a { color: var(--ink-soft); text-decoration: none; display: block; padding: 0.15rem 0; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
.foot-note { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: 0.8rem; color: var(--ink-faint); max-width: 70ch; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-grid, .two-col { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 0.5rem; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--gutter) 1rem;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
  .site-nav .btn { margin-top: 0.7rem; text-align: center; }
}