/* Tally Ridge website v1 (R1.10) — brand tokens and layout.
   Ridge Navy #0F2D46 · Field Gray #5B6770 · Tally Copper #B87333 · darker copper #8F4E20 · Summit White #F6F5F2
   R1.3 polish: warm ivory header #FBFAF7, cool alternate sections #F3F6F8, Before / With / Gain tints; flat colour only, nothing moves. */

:root {
  --navy: #0F2D46;
  --navy-deep: #0A2033;
  --gray: #5B6770;
  --copper: #B87333;
  --copper-ink: #8F4E20;
  --copper-tint: #F8EFE6;
  --summit: #F6F5F2;
  --ivory: #FBFAF7;
  --cool: #F3F6F8;
  --before-bg: #F4F4F2;
  --with-bg: #FBF3EA;
  --gain-bg: #EDF5EF;
  --gain-ink: #2F6846;
  --white: #FFFFFF;
  --ink: #1B2630;
  --line: #D9DDE1;
  --ok: #1E6B3A;
  --ok-bg: #E8F3EC;
  --warn: #7A4E00;
  --warn-bg: #FFF4DC;
  --info: #24496B;
  --info-bg: #EAF1F7;
  --planned: #3E4A54;
  --planned-bg: #E9ECEF;
  --radius: 12px;
  --shadow: 0 6px 24px rgba(15, 45, 70, 0.08);
  --gutter: 16px;
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  background: var(--summit);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--summit);
  overflow-wrap: anywhere;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { color: var(--navy); line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 5.5vw, 3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
a { color: var(--navy); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--copper-ink); }

:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.muted { color: var(--gray); font-weight: 400; font-size: 0.9rem; }
.note { color: var(--gray); font-size: 0.95rem; margin-top: 1.25rem; }

/* Skip link */
.skip-link {
  position: absolute; left: var(--gutter); top: -100px;
  background: var(--navy); color: var(--white);
  padding: 12px 16px; border-radius: 8px; z-index: 20;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: 44px; padding: 10px 22px;
  border-radius: 8px; border: 2px solid transparent;
  font: inherit; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
}
.btn-primary { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white); }
.btn-secondary { background: var(--white); color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--white); color: var(--copper-ink); border-color: var(--copper-ink); }

/* Header: warm ivory with a subtle bottom border */
.site-header { background: var(--ivory); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(15, 45, 70, 0.04); }
.header-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; padding-top: 10px; padding-bottom: 10px;
}
.logo-link { display: inline-flex; align-items: center; min-height: 44px; }
.logo { width: 210px; height: auto; }
.nav-toggle {
  min-height: 44px; min-width: 44px; padding: 8px 16px;
  background: var(--white); color: var(--navy);
  border: 2px solid var(--navy); border-radius: 8px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.site-nav { flex-basis: 100%; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.site-nav a {
  display: flex; align-items: center; min-height: 44px; padding: 10px 12px;
  border-radius: 8px; text-decoration: none; font-weight: 600; color: var(--navy);
  white-space: nowrap; overflow-wrap: normal;
}
.site-nav a:hover { background: var(--copper-tint); color: var(--copper-ink); }
.site-nav a.nav-cta { background: var(--navy); color: var(--white); justify-content: center; margin-top: 6px; }
.site-nav a.nav-cta:hover { background: var(--navy-deep); color: var(--white); }

html.js .site-nav:not(.is-open) { display: none; }
html:not(.js) .nav-toggle { display: none; }

@media (min-width: 880px) {
  .nav-toggle { display: none; }
  html.js .site-nav:not(.is-open) { display: block; }
  .site-nav { flex-basis: auto; }
  .site-nav ul { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; }
  .site-nav a.nav-cta { margin-top: 0; margin-left: 8px; padding-left: 16px; padding-right: 16px; }
}

/* Hero */
.hero { padding: 36px 0 44px; }
.hero-grid { display: grid; gap: 28px; }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; }
.status-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--copper-tint); color: var(--copper-ink);
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em;
  padding: 6px 12px; border-radius: 999px;
}
.status-badge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--copper); }
.status-note { color: var(--gray); font-weight: 600; font-size: 0.95rem; }
.category { color: var(--gray); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; margin-bottom: 10px; }
.lede { font-size: 1.2rem; max-width: 36em; }
.audience { color: var(--gray); font-weight: 600; }
/* R1.8: the human-outcome line, secondary to the H1 (bold navy body size, copper rule), above the CTAs. */
.outcome { margin: 14px 0 0; padding-left: 14px; border-left: 4px solid var(--copper); color: var(--navy); font-weight: 700; font-size: 1.1rem; line-height: 1.4; max-width: 30em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 14px; }
.reassure { color: var(--gray); font-size: 0.95rem; line-height: 1.5; }

/* Product proof: an actual private-preview screen (desktop crop on wide screens, phone crop below 900px),
   shown at full container width so the interface stays readable instead of being shrunk into a card. */
.product-figure { margin: 0; width: 100%; }
.figure-kicker { margin: 0 0 8px; color: var(--copper-ink); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.product-figure picture { display: block; }
.product-figure img {
  width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); background: var(--white);
}
.product-figure figcaption { color: var(--gray); font-size: 0.9rem; margin-top: 10px; }
@media (max-width: 899px) { .product-figure { max-width: 520px; } }

@media (min-width: 900px) {
  .hero { padding: 56px 0 56px; }
  .hero-grid { gap: 44px; }
  .hero-copy { max-width: 46em; }
}

/* Sections */
.section { padding: 48px 0; }
.section-alt { background: var(--cool); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-lede { font-size: 1.1rem; color: var(--gray); max-width: 40em; margin-bottom: 1.5rem; }
@media (min-width: 900px) { .section { padding: 72px 0; } }

/* Value stories: Before -> With Tally Ridge -> What you gain.
   Each story is one grouped row container. From 760px: three aligned columns with arrow cues between them, under
   shared column headers. Below 760px: one grouped block per story, Before, down-arrow, With, down-arrow, Gain,
   with clear spacing before the next story. DOM order is always Before, With, Gain. */
.section-value { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.value-lede { font-size: 1.15rem; font-weight: 600; color: var(--navy); margin-bottom: 1.5rem; }
.story-head { display: none; }
.stories { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.story {
  display: grid; gap: 4px; padding: 12px;
  background: var(--summit); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.story-cell { padding: 12px 14px; border-radius: 10px; border: 1px solid transparent; }
.story-cell p { margin: 0; }
.story-label { display: block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.story-before { background: var(--before-bg); border-color: var(--line); }
.story-before .story-label { color: var(--gray); }
.story-with { background: var(--with-bg); border-color: #E6C9A8; }
.story-with .story-label { color: var(--copper-ink); }
.story-gain { background: var(--gain-bg); border-color: #C8DECD; }
.story-gain .story-label { color: var(--gain-ink); }
.gain-title { font-size: 1.2rem; line-height: 1.2; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--gain-ink); margin: 0 0 4px !important; }
.gain-line { color: var(--ink); }
.story-arrow { display: flex; align-items: center; justify-content: center; min-height: 24px; color: var(--copper); font-weight: 700; line-height: 1; }
.story-arrow::before { content: "\2193"; font-size: 1.3rem; }
.guidance { position: relative; margin: 32px 0 0; padding-top: 18px; text-align: center; font-weight: 700; font-size: 1.15rem; color: var(--navy); }
.guidance::before { content: ""; position: absolute; top: 0; left: 50%; width: 56px; height: 3px; margin-left: -28px; background: var(--copper); border-radius: 2px; }
@media (min-width: 760px) {
  .story-head {
    display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr; gap: 8px; margin: 0 0 10px; padding: 0 13px;
    font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .story-head-before { color: var(--gray); padding-left: 14px; }
  .story-head-with { color: var(--copper-ink); padding-left: 14px; }
  .story-head-gain { color: var(--gain-ink); padding-left: 14px; }
  .stories { gap: 16px; }
  .story { grid-template-columns: 1fr 32px 1fr 32px 1fr; gap: 8px; align-items: stretch; }
  .story-cell { padding: 14px 16px; }
  .story-arrow::before { content: "\2192"; font-size: 1.5rem; }
}

/* How it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.steps li { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--white); font-weight: 700; margin-bottom: 12px;
  border: 2px solid var(--copper);
}
.steps p { margin-bottom: 0; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* Sample status: compact and persistent, not an error banner */
.sample-notice {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  background: var(--copper-tint); color: var(--copper-ink);
  border: 1px solid var(--copper); border-left-width: 5px; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 16px; font-size: 0.95rem;
}
.sample-notice strong { font-size: 1rem; }
.nojs-note { font-weight: 600; color: var(--navy); }
html.js .nojs-note { display: none; }

/* Sample walkthrough */
.sample { background: var(--summit); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
/* Step controls: real buttons (keyboard and touch), any step can be opened directly. */
.stepper { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.stepper li { margin: 0; padding: 0; }
.step-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px;
  border-radius: 8px; background: var(--white); border: 1px solid var(--line); color: var(--gray);
  font: inherit; font-weight: 600; line-height: 1.2; text-align: left; cursor: pointer;
}
.step-btn:hover { border-color: var(--navy); color: var(--navy); }
.stepper-num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%; background: var(--planned-bg); color: var(--planned); font-size: 0.9rem;
}
.step-btn.is-active { color: var(--navy); border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.step-btn.is-active .stepper-num { background: var(--navy); color: var(--white); }
.step-btn.is-done { color: var(--ok); }
.step-btn.is-done .stepper-num { background: var(--ok-bg); color: var(--ok); }
@media (min-width: 640px) { .stepper { grid-template-columns: repeat(3, 1fr); } }

/* Without JavaScript the three panels read as one sequence; JS-only controls are not shown. */
html:not(.js) .stepper, html:not(.js) .panel-actions { display: none; }
html:not(.js) .panel { margin-bottom: 16px; }

.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.panel h3 { margin-bottom: 0.4em; }
.panel h3:focus { outline: none; }
.panel h3:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.source-doc { border: 1px dashed var(--gray); border-radius: 8px; padding: 14px; background: var(--summit); }
.doc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.doc-tag { color: var(--copper-ink); font-size: 0.9rem; }
.doc-meta { margin: 0 0 12px; display: grid; gap: 6px; }
.doc-meta div { display: grid; grid-template-columns: minmax(7em, 9em) 1fr; gap: 8px; }
.doc-meta dt { color: var(--gray); font-weight: 600; }
.doc-meta dd { margin: 0; }
.summary-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.summary-list li { padding: 8px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.summary-list strong { color: var(--navy); }

.source-details { border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.source-details summary {
  cursor: pointer; padding: 10px 14px; min-height: 48px; display: flex; align-items: center;
  font-weight: 700; color: var(--navy); list-style: none; border-radius: 8px;
}
.source-details summary::-webkit-details-marker { display: none; }
.source-details summary::before { content: "+"; display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; margin-right: 10px; color: var(--copper-ink); font-size: 1.2rem; flex-shrink: 0; }
.source-details[open] summary::before { content: "–"; }
.source-details .table-wrap { padding: 0 14px 10px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--navy); font-weight: 700; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tfoot th, tfoot td { border-bottom: 0; }
tfoot .total th, tfoot .total td { border-top: 2px solid var(--navy); font-size: 1.1rem; }
th { overflow-wrap: normal; }

/* Narrow screens: tables become stacked label/value rows so nothing is squeezed or broken mid-word. */
@media (max-width: 639px) {
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack-table tbody tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .stack-table tbody td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; text-align: left; white-space: normal; }
  .stack-table tbody td::before { content: attr(data-label); color: var(--gray); font-weight: 600; flex: 0 0 auto; }
  .stack-table tbody td:first-child { display: block; font-weight: 700; color: var(--navy); }
  .stack-table tbody td:first-child::before { content: none; }
  .stack-table tfoot tr { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
  .stack-table tfoot th, .stack-table tfoot td { display: block; padding: 2px 0; border: 0; min-width: 0; }
  .stack-table tfoot th { white-space: normal; text-align: left; }
  .stack-table tbody td { min-width: 0; }
  .stack-table tfoot .total { border-top: 2px solid var(--navy); margin-top: 4px; padding-top: 8px; }
  tfoot .total th, tfoot .total td { border-top: 0; }
  .stack-table tfoot .total th, .stack-table tfoot .total td { font-size: 1.05rem; }
  .sample { padding: 12px; }
  .panel { padding: 16px 14px; }
  .source-doc { padding: 12px 10px; }
  .source-details .table-wrap { padding: 0 8px 8px; }
}

/* Step 2: what is included (neutral) versus what is worth a look (attention), labelled in text, not colour alone */
.review-list { margin-top: 18px; }
.review-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.review-item { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: start; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--summit); }
.review-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.review-item.included .review-tag { background: var(--planned-bg); color: var(--planned); }
.review-item.look { background: var(--warn-bg); border-color: #E3B96A; }
.review-item.look .review-tag { background: var(--warn); color: var(--white); }
.review-item.look .review-body { color: var(--warn); }
.review-body strong { display: block; color: var(--navy); }
@media (max-width: 479px) { .review-item { grid-template-columns: 1fr; gap: 6px; } }

/* Step 3: the sample invoice as a client-facing document on a neutral canvas */
.invoice-canvas { background: var(--planned-bg); border-radius: 10px; padding: 28px 24px; }
.invoice { max-width: 760px; margin: 0 auto; background: var(--white); border: 1px solid #C9CFD5; box-shadow: 0 10px 30px rgba(15, 45, 70, 0.14); overflow: hidden; }
.invoice-banner { margin: 0; background: var(--copper-tint); color: var(--copper-ink); font-weight: 700; font-size: 0.9rem; padding: 6px 16px; text-align: center; border-bottom: 1px solid var(--copper); }
.inv-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 24px; padding: 32px 40px 0; }
.inv-brand { display: flex; align-items: flex-start; gap: 14px; }
.inv-mark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 10px; background: var(--navy); color: var(--white);
  font-weight: 800; font-size: 1.35rem; letter-spacing: 0.04em; border-bottom: 4px solid var(--copper);
}
.inv-from, .inv-to, .inv-due { margin: 0; }
.inv-from span, .inv-to span, .inv-due span { display: block; }
.inv-from strong, .inv-to strong { display: block; color: var(--navy); font-size: 1.1rem; }
.invoice .label { display: block; color: var(--gray); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.inv-qualifier { color: var(--gray); font-size: 0.9rem; }
.inv-title-block { text-align: right; }
.inv-title { margin: 0; font-size: 2rem; font-weight: 800; color: var(--navy); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }
.inv-stamp {
  display: inline-block; margin: 8px 0 0; padding: 3px 10px; border: 2px solid var(--copper-ink); border-radius: 4px;
  color: var(--copper-ink); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-4deg);
}
.inv-details { display: grid; gap: 18px 32px; padding: 28px 40px 20px; border-bottom: 1px solid var(--line); }
.inv-meta { margin: 0; display: grid; gap: 4px; align-content: start; }
.inv-meta div { display: grid; grid-template-columns: minmax(7em, 8.5em) 1fr; gap: 8px; }
.inv-meta dt { color: var(--gray); }
.inv-meta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.inv-to strong { overflow-wrap: normal; }
.inv-due {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px;
  background: var(--summit); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px;
}
.inv-due .label { margin: 0; flex: 1 1 100%; }
.inv-due strong { color: var(--navy); font-size: 1.6rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.inv-due span:last-child { color: var(--gray); font-size: 0.95rem; }
.invoice .table-wrap { padding: 8px 40px 0; }
.invoice-table thead th { font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray); }
.inv-foot { margin: 8px 0 0; padding: 18px 40px 28px; color: var(--gray); font-size: 0.92rem; border-top: 1px solid var(--line); }
@media (min-width: 640px) {
  .inv-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .invoice-table tfoot .total th, .invoice-table tfoot .total td { font-size: 1.15rem; }
}
@media (max-width: 639px) {
  .invoice-canvas { padding: 10px 6px; }
  .inv-top { padding: 18px 12px 0; }
  .inv-title-block { text-align: left; }
  .inv-details { padding: 16px 12px 14px; }
  .inv-meta div { grid-template-columns: 1fr; gap: 0; }
  .inv-meta dt { font-size: 0.9rem; }
  .invoice .table-wrap { padding: 4px 12px 0; }
  .inv-foot { padding: 14px 12px 18px; }
}

/* Benefits */
.benefits { list-style: none; margin: 0 0 36px; padding: 0; display: grid; gap: 18px; }
.benefits li { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border-left: 5px solid var(--copper); }
.benefits p { margin-bottom: 0; }
@media (min-width: 760px) { .benefits { grid-template-columns: repeat(3, 1fr); } }

.status-heading { font-size: 1.4rem; margin-top: 8px; }
.status-grid { display: grid; gap: 16px; }
.status-col { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.status-col h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.status-sub { color: var(--gray); font-weight: 500; font-size: 0.95rem; }
.status-col ul { margin: 0; padding-left: 1.2em; }
.status-col li { margin-bottom: 6px; }
.pill { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.9rem; font-weight: 700; }
.pill-available { background: var(--ok-bg); color: var(--ok); }
.pill-testing { background: var(--copper-tint); color: var(--copper-ink); }
.pill-planned { background: var(--planned-bg); color: var(--planned); }
@media (min-width: 760px) { .status-grid { grid-template-columns: repeat(3, 1fr); } }

/* Privacy facts */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.facts li { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--summit); }
.facts h3 { font-size: 1.1rem; }
.facts p { margin-bottom: 0; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.faq summary {
  cursor: pointer; padding: 12px 16px; min-height: 48px; display: flex; align-items: center;
  font-weight: 700; color: var(--navy); list-style: none; border-radius: 10px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; margin-right: 10px; color: var(--copper-ink); font-size: 1.2rem; flex-shrink: 0; }
.faq details[open] summary::before { content: "–"; }
.faq summary:hover { color: var(--copper-ink); }
.faq-body { padding: 0 16px 14px 50px; }
.faq-body p { margin: 0; }

/* Footer (light, so the approved logo keeps its own colours) */
.site-footer { background: var(--ivory); border-top: 1px solid var(--line); color: var(--ink); padding: 32px 0; margin-top: 16px; }
.footer-row { display: grid; gap: 6px; }
.footer-row p { margin: 0; }
.footer-logo { width: 190px; margin-bottom: 10px; }
.footer-slogan { font-weight: 700; color: var(--navy); }
.footer-outcome { color: var(--ink); max-width: 44em; }
.footer-line { color: var(--gray); }
.footer-small { color: var(--gray); font-size: 0.9rem; margin-top: 6px; }
.site-footer a { color: var(--navy); display: inline-block; min-height: 44px; line-height: 44px; }

/* R1.5: audience recognition (#built-for) — a restrained strip of five groups, icon + title + one line.
   Icons are inline SVG, decorative (aria-hidden); the title is always the identifier. */
.section-audience { padding-top: 40px; padding-bottom: 40px; }
.audiences { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.audience-item {
  display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start;
  padding: 16px 18px; border-radius: 12px; background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
}
.audience-icon { width: 48px; height: 48px; margin-top: 2px; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.audience-icon .ic-accent { stroke: var(--copper); }
.audience-text h3 { font-size: 1.1rem; margin: 0 0 4px; }
.audience-text p { margin: 0; color: var(--ink); }
.audience-sub { color: var(--copper-ink); font-size: 0.9rem; font-weight: 600; margin-bottom: 4px !important; }
@media (min-width: 640px) { .audiences { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (min-width: 900px) {
  .section-audience { padding-top: 56px; padding-bottom: 56px; }
  .audiences { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .audience-item { grid-column: span 2; }
  /* 3 + 2: the fourth item starts at the second column of the second row so the pair is centred */
  .audience-item:nth-child(4) { grid-column: 2 / span 2; }
}

/* R1.5: product proof (#inside-tally-ridge) — two real screens in restrained frames */
.proof { margin: 0 0 32px; }
.proof h3 { font-size: 1.25rem; margin: 0 0 10px; }
.screen-frame { background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
.screen-label { margin: 0; padding: 8px 14px; background: var(--ivory); border-bottom: 1px solid var(--line); color: var(--gray); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.screen-frame img { width: 100%; height: auto; display: block; }
.proof figcaption { color: var(--gray); font-size: 0.95rem; margin-top: 10px; max-width: 48em; }
.proof-phone .screen-frame { max-width: 360px; }
.proof-note { margin: 0; color: var(--gray); font-size: 0.9rem; }
@media (min-width: 760px) {
  .proof-phone { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto 1fr; grid-template-areas: "title frame" "cap frame"; column-gap: 40px; align-items: start; }
  .proof-phone h3 { grid-area: title; align-self: start; margin-top: 4px; }
  .proof-phone .screen-frame { grid-area: frame; }
  .proof-phone figcaption { grid-area: cap; align-self: start; font-size: 1.05rem; color: var(--ink); }
}

/* R1.7: whole-solution money workflow (#money-workflow) — six stages on one connected path.
   Phones (< 640px): one vertical path; a copper spine runs down the icon column from each stage into the next, ending
   in an arrowhead. Tablet (640–899px): three rows of two. Desktop (>= 900px): two rows of three. Both wide layouts read
   left to right with an arrow between neighbours and a drawn return connector (down, back, down) from the last stage of
   a row into the first stage of the next, so the sequence 1 -> 6 is visible before any sentence is read.
   Connectors are plain CSS borders on pseudo-elements (li::before/::after carry the incoming path, .stage-link::before/
   ::after the outgoing one): no images, no colour ramps, no motion. Status is always a visible text label. */
.section-workflow { --jrow: 28px; --jcol: 32px; }
.section-kicker { margin: 0 0 10px; color: var(--copper-ink); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.workflow-lede { max-width: 46em; color: var(--ink); margin-bottom: 1.75rem; }
.journey { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jrow) var(--jcol); position: relative; }
.stage {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 16px 18px 16px 16px; border-radius: 12px; background: var(--white);
  border: 1px solid var(--line); border-left: 4px solid var(--navy);
}
.stage[data-status="your-work"] { background: var(--summit); border-left-color: var(--gray); }
/* Planned stages (R1.8): a real white card with a dashed slate outline and a "Coming next" label in navy, so the future
   steps read as the next extension of the same path, while the dashed outline, outlined numeral and Planned pill keep
   them unmistakably not live. */
.stage[data-status="planned"] { background: var(--white); border-style: dashed; border-color: #7D8A95; border-left: 4px solid #7D8A95; }
.stage[data-status="planned"] .status-sub { color: var(--navy); font-weight: 600; }
.stage-icon { width: 48px; height: 48px; margin-top: 2px; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stage-icon .ic-accent { stroke: var(--copper); }
.stage-text { min-width: 0; }
.stage-text h3 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; margin: 0 0 6px; }
.stage-num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--white);
  font-size: 0.85rem; font-weight: 700; border: 2px solid var(--copper);
}
.stage[data-status="your-work"] .stage-num { background: var(--gray); border-color: var(--gray); }
.stage[data-status="planned"] .stage-num { background: var(--white); color: var(--planned); border-color: #7D8A95; }
.stage-text p { margin: 0; color: var(--ink); }
.stage-text .stage-status { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pill-yours { background: var(--white); color: var(--gray); border: 1px solid var(--gray); padding-top: 2px; padding-bottom: 2px; }
.stage-link { position: absolute; inset: 0; pointer-events: none; }
.stage::before, .stage::after, .stage-link::before, .stage-link::after { content: none; position: absolute; pointer-events: none; }
/* Phones: outgoing vertical line from the icon column (centre x = 16px padding + 24px) and an arrowhead at the next stage. */
.stage:not(:last-child)::before { content: ""; top: 100%; left: 39px; width: 2px; height: calc(var(--jrow) + 1px); border-left: 2px solid var(--copper); }
.stage:not(:last-child)::after { content: ""; top: calc(100% + var(--jrow) - 12px); left: 35px; width: 10px; height: 10px; border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(45deg); }
.workflow-testing {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 24px 0 0; padding: 10px 14px; max-width: 56em;
  background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--copper); border-radius: 8px; color: var(--ink); font-size: 0.95rem;
}
.workflow-testing span:last-child { flex: 1 1 18em; }

/* Wide layouts: the phone spine is off; neighbours get an arrow at the icon centre line (y = 40px). The last stage of a
   row gets a return connector and the first stage of the next row an incoming curve + arrowhead (defined per layout). */
@media (min-width: 640px) {
  .stage:not(:last-child)::before, .stage:not(:last-child)::after { content: none; }
  .stage-link::before { content: ""; top: 39px; left: 100%; width: var(--jcol); height: 2px; border-top: 2px solid var(--copper); }
  .stage-link::after { content: ""; top: 35px; left: calc(100% + var(--jcol) - 12px); width: 10px; height: 10px; border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(-45deg); }
  .stage:last-child .stage-link::before, .stage:last-child .stage-link::after { content: none; }
}

/* Tablet: two columns; rows end at stages 2 and 4, start at 3 and 5. */
@media (min-width: 640px) and (max-width: 899px) {
  .section-workflow { --jrow: 44px; --jcol: 32px; }
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage:nth-child(2n) .stage-link::before { top: 100%; left: auto; right: 50%; width: calc(100% + var(--jcol) - 3px); height: calc(var(--jrow) / 2 + 2px); border: 0; border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper); border-bottom-right-radius: 10px; }
  .stage:nth-child(2n) .stage-link::after { content: none; }
  .stage:nth-child(2n+1):not(:first-child)::before { content: ""; top: auto; bottom: 100%; left: calc(50% - 2px); width: 12px; height: calc(var(--jrow) / 2 + 2px); border-left: 2px solid var(--copper); border-top: 2px solid var(--copper); border-top-left-radius: 10px; }
  .stage:nth-child(2n+1):not(:first-child)::after { content: ""; top: auto; bottom: calc(100% + 3px); left: calc(50% - 6px); width: 10px; height: 10px; border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(45deg); }
}

/* Desktop: three columns; row 1 ends at stage 3, row 2 starts at stage 4. */
@media (min-width: 900px) {
  .section-workflow { --jrow: 48px; --jcol: 36px; }
  .journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage:nth-child(3) .stage-link::before { top: 100%; left: auto; right: 50%; width: calc(200% + 2 * var(--jcol) + 2px); height: calc(var(--jrow) / 2 + 2px); border: 0; border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper); border-bottom-right-radius: 10px; }
  .stage:nth-child(3) .stage-link::after { content: none; }
  .stage:nth-child(4)::before { content: ""; top: auto; bottom: 100%; left: calc(50% - 2px); width: 12px; height: calc(var(--jrow) / 2 + 2px); border-left: 2px solid var(--copper); border-top: 2px solid var(--copper); border-top-left-radius: 10px; }
  .stage:nth-child(4)::after { content: ""; top: auto; bottom: calc(100% + 3px); left: calc(50% - 6px); width: 10px; height: 10px; border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(45deg); }
  .workflow-testing { margin-top: 28px; }
}

/* R1.9: Coming-next stages (5 and 6) — the primary label is a filled copper "COMING NEXT" pill; "Planned — not yet
   available" stays as plain readable text next to it and the supporting line sits below. Same arrows, same card size,
   a solid copper rule and warm border instead of the Available navy rule: an active next step, not a disabled one. */
.pill-next { background: var(--copper-ink); color: var(--white); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; padding: 4px 12px; }
.stage[data-status="planned"] { background: var(--white); border-style: solid; border-color: #E2C8AC; border-left: 4px solid var(--copper-ink); opacity: 1; }
.stage[data-status="planned"] .stage-num { background: var(--copper-ink); color: var(--white); border-color: var(--navy); }
.stage[data-status="planned"] .status-sub { color: var(--ink); font-weight: 500; font-size: 0.95rem; }
.stage-text .stage-support { margin-top: 6px; color: var(--navy); font-weight: 600; font-size: 0.95rem; }

/* R1.9: plan preview (#plans) — three levels on one continuous ridgeline, no prices, no buttons.
   Desktop (>= 760px): one contour drawing spans the width (ground fill, two inner contour lines, the ridge line, a
   copper marker at Foothill / Ridgeline / Summit and a dashed tick down into each column); three columns sit under
   the ticks, separated by thin rules, the middle one on white. Phones: the wide contour is hidden and each level shows
   its own small rising-contour mark with its point filled; a copper spine with an arrowhead links Foothill ↓ Ridgeline
   ↓ Summit. Flat colour only. */
.section-plans { background: var(--ivory); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); --prow: 26px; }
.plans-lede { color: var(--navy); font-weight: 600; margin-bottom: 0.75rem; }
.plans-intro { max-width: 44em; margin-bottom: 1.5rem; }
.ridge { display: none; }
.ridge-svg { display: block; width: 100%; height: auto; }
.ridge-ground { fill: #EFE8DD; stroke: none; }
.ridge-contour { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ridge-contour-2 { stroke-opacity: 0.28; }
.ridge-contour-3 { stroke-opacity: 0.16; }
.ridge-line { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ridge-tick { fill: none; stroke: var(--copper); stroke-width: 2; stroke-dasharray: 5 5; }
.ridge-marker { fill: var(--white); stroke: var(--copper); stroke-width: 4; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--prow); }
.plan {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; align-content: start;
  padding: 16px 18px 14px 16px; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--copper); border-radius: 12px;
}
.plan-mark { width: 48px; height: 30px; margin-top: 4px; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-mark circle { fill: var(--white); stroke: var(--navy); stroke-width: 2; }
.plan-mark .mark-here { fill: var(--copper); stroke: var(--copper); }
.plan-text { min-width: 0; }
.plan-text h3 { font-size: 1.15rem; margin: 0 0 4px; }
.plan-line { margin: 0 0 4px; color: var(--navy); font-weight: 700; }
.plan-for { margin: 0 0 10px; color: var(--gray); font-size: 0.95rem; }
.plan-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plan-points li { position: relative; padding-left: 16px; font-size: 0.98rem; }
.plan-points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 2px; background: var(--copper); }
.plan::before, .plan::after { content: none; position: absolute; pointer-events: none; }
.plan:not(:last-child)::before { content: ""; top: 100%; left: 39px; width: 2px; height: calc(var(--prow) + 4px); border-left: 2px solid var(--copper); }
.plan:not(:last-child)::after { content: ""; top: calc(100% + var(--prow) - 9px); left: 35px; width: 10px; height: 10px; border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(45deg); }
.plans-principle { position: relative; margin: 32px auto 0; padding-top: 18px; max-width: 40em; text-align: center; }
.plans-principle::before { content: ""; position: absolute; top: 0; left: 50%; width: 56px; height: 3px; margin-left: -28px; background: var(--copper); border-radius: 2px; }
.principle-title { margin: 0 0 4px; font-weight: 700; font-size: 1.2rem; color: var(--navy); }
.principle-line { margin: 0; color: var(--ink); }
.plans-next { margin: 20px auto 0; max-width: 44em; text-align: center; color: var(--gray); font-size: 0.95rem; }
.plans-availability {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 18px auto 0; padding: 10px 14px; max-width: 52em;
  background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: 8px; color: var(--ink); font-size: 0.95rem;
}
.plans-availability strong { color: var(--navy); }
@media (min-width: 760px) {
  .section-plans { --prow: 0px; }
  .ridge { display: block; margin: 8px 0 0; }
  .plan-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .plan { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 18px 22px 14px; background: transparent; border: 0; border-top: 3px solid var(--copper); border-radius: 0; }
  .plan + .plan { border-left: 1px solid var(--line); }
  .plan-ridgeline { background: var(--white); border-top: 4px solid var(--navy); }
  .plan-mark { margin: 0 0 10px; }
  .plan::before, .plan::after, .plan:not(:last-child)::before, .plan:not(:last-child)::after { content: none; }
}