/* ============================================================================
   css/sections.css — the CONTENT agent's file (home body sections + sub-pages)
   ----------------------------------------------------------------------------
   Only what site.css lacks. Semantic tokens only (tokens.css Part 2), no hex.

   Contents
     0  Ink block (the stage on the light page, a lifted surface on the dark page)
     1  Cost cards (10-cost)
     2  Bento tiles (20-refocus)
     3  Compare cards (30-engine)
     4  Trust cards — struck-through objections (40-trust)
     5  Powered by VEX band (50-powered)
     6  Steps (60-how)
     7  Story — the true-story ink block (70-story)
     8  Closing + register form (90-closing)
     9  Forms: success / error states, honeypot
    10  Pricing — the temporary pilot page (the plans/FAQ styles are kept below it, parked)
    11  About (story split, stack visual)
    12  Contact (info list + form)
    13  Compliance (pill row)
    14  Motion gates + responsive
   ============================================================================ */


/* ============================================================================
   0  INK BLOCK — an element that carries data-theme="dark". On the light page it
      is the stage (like the hero); when the page itself is dark it lifts one
      step to --surface with a hairline so it still stands out. Radius 12.
   ============================================================================ */

.ink-block { background: var(--bg); border: 1px solid var(--hair-2); border-radius: var(--radius-xl); }
[data-theme="dark"] .ink-block { background: var(--surface); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ink-block { background: var(--surface); }
}


/* ============================================================================
   1  COST CARDS — three hairline cards, the number, a quiet bar, one line
   ============================================================================ */

.cost-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-16); }
.cost-card { display: flex; flex-direction: column; }
.cost-card .stat__value { margin-top: var(--spacing-16); }
.cost-card p { margin-top: var(--spacing-16); }
/* the bar: track = subtle surface, fill = cobalt (what VEX found). --w is the share of the month */
.cost-bar { display: block; height: 3px; width: 100%; background: var(--surface-2); border-radius: 2px; overflow: hidden; margin-top: var(--spacing-20); }
.cost-bar > i { display: block; height: 100%; width: var(--w, 100%); min-width: 6px; background: var(--accent-blue); border-radius: 2px; }
.js .cost-card .cost-bar > i { width: 0; min-width: 0; transition: width 1.4s var(--reveal-ease) 250ms, min-width 0s 250ms; }
.js .cost-card.in .cost-bar > i { width: var(--w, 100%); min-width: 6px; }
.cost-foot { max-width: 60ch; margin: var(--spacing-48) auto 0; text-align: center; color: var(--ink-2); font-size: var(--fs-body); text-wrap: balance; }
.cost-foot a { color: var(--ink); }


/* ============================================================================
   2  BENTO TILES — five tiles on a six-column grid: three across, then a wide
      ink tile + a narrow one. Fills are token washes; text on every tile ≥ 4.5:1
      (ink / graphite on lemon-quiet 16.2 / 9.0 · on blue-wash 15.0 / 8.4 ·
      on bone 15.7 / 8.8 · on win-wash 15.2 / 8.5 · ivory / ink-2 on the stage
      16.9 / 11.8; dark washes: ivory 12.9–14.0, ink-2 9.0–9.8). No shadows.
   ============================================================================ */

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--spacing-16); }
.tile {
  grid-column: span 2;
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  color: var(--ink);
}
.tile--wide { grid-column: span 4; }
.tile__icon { width: 28px; height: 28px; flex: none; color: inherit; margin-bottom: clamp(28px, 4vw, 56px); }
.tile__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.01em; color: inherit; text-wrap: balance; }
.tile p { margin-top: var(--spacing-12); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); max-width: 46ch; }
.tile--wide p { max-width: 58ch; }
/* the fills */
.tile--lemon { background: var(--accent-lemon-quiet); color: var(--on-lemon-quiet); }
.tile--blue  { background: var(--accent-blue-wash); }
.tile--bone  { background: var(--bg-band); border-color: var(--hair); }
.tile--win   { background: var(--st-win-wash); }
/* the ink tile: data-theme="dark" + .ink-block do the colours (stage on light, lifted surface on dark); .tile's transparent border is restored to the ink-block hairline */
.tile--ink { border-color: var(--hair-2); }


/* ============================================================================
   3  COMPARE — chatbot-on-your-data (dash list) vs the VexelX Engine (checks)
   ============================================================================ */

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-16); }
.compare .card { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px); }
.compare .card .compare__title { margin-top: 0; font-size: 22px; line-height: 1.2; }
.compare .card .compare__tag { align-self: flex-start; margin-bottom: var(--spacing-16); }
.compare .card ul { margin-top: var(--spacing-24); }
.compare .card--strong .list-check > li { color: var(--ink); }
.compare .card--strong .list-check > li::before { color: var(--accent-blue); }
/* dash list — a quiet en dash instead of a cross: the chatbot column is a description, not a scoreboard */
.list-dash { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spacing-12); }
.list-dash > li { display: flex; gap: var(--spacing-12); align-items: flex-start; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.list-dash > li::before { content: "–"; flex: none; width: 14px; text-align: center; color: var(--muted); }


/* ============================================================================
   4  TRUST CARDS — the objection struck through, the answer in serif, the proof in the foot
   ============================================================================ */

.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-16); }
.trust-card { display: flex; flex-direction: column; padding: clamp(32px, 3.4vw, 44px); }
.trust-card .objection { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.trust-card .objection s { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: currentColor; }
.trust-card .h3--serif { margin-top: var(--spacing-20); font-size: clamp(26px, 2.6vw, 34px); }
.trust-card .h3--serif + p { font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: var(--spacing-24); }
.trust-card .card__foot { margin-top: auto; padding-top: var(--spacing-20); display: flex; align-items: center; gap: var(--spacing-8); color: var(--ink); }
.trust-card .card__foot::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--accent-blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }


/* ============================================================================
   5  POWERED BY VEX — the dark stage; ring left, the merged copy right (no counts)
   ============================================================================ */

.powered { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.powered__ring { width: 240px; height: 240px; justify-self: center; }
.powered__ring [data-vex-ring] { width: 240px; height: 240px; border-radius: 50%; overflow: hidden; }
/* no JS: the locked still (a frame of the same ring) fills the box — gated on html:not(.js) so the 430 KB PNG is never fetched when hero.js will draw the ring */
html:not(.js) .powered__ring [data-vex-ring]:empty { background: var(--bg) url("/assets/motion/LOCKED-hero-still.png") center / cover no-repeat; }
.powered__copy .lede { margin-top: var(--spacing-24); max-width: 54ch; }
/* three hairline rows: mono label | one line of Geist */
.powered__facts { list-style: none; margin: var(--spacing-40) 0 0; padding: 0; border-top: 1px solid var(--hair-2); max-width: 620px; }
.powered__facts li { max-width: none; display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--spacing-16); align-items: baseline; padding-block: var(--spacing-16); border-bottom: 1px solid var(--hair-2); }
.powered__k { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.powered__v { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.powered__promise { margin-top: var(--spacing-32); }
#powered { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }


/* ============================================================================
   6  STEPS — mono number over a hairline, serif title, one paragraph
   ============================================================================ */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-48); }
.step__n { display: block; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); padding-bottom: var(--spacing-16); border-bottom: 1px solid var(--hair-2); }
.step__n b { font-weight: var(--font-weight-regular); color: var(--ink); }
.step .h3--serif { margin-top: var(--spacing-24); }
.step p { margin-top: var(--spacing-12); color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.steps-foot { max-width: 60ch; margin: var(--spacing-48) auto 0; text-align: center; color: var(--ink-2); font-size: var(--fs-small); text-wrap: pretty; }
.steps-foot a { color: var(--ink); }


/* ============================================================================
   7  STORY — the true story as a standout ink block: copy left, three
      Playfair values with mono captions right, hairlines between
   ============================================================================ */

.story {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
  padding: clamp(32px, 5vw, 64px) clamp(28px, 5vw, 64px);
}
.story .eyebrow { margin-bottom: var(--spacing-20); }
.story .h2 { max-width: 16ch; }
.story__copy p { margin-top: var(--spacing-24); color: var(--ink-2); max-width: 54ch; }
.story__stats { list-style: none; margin: 0; padding: 0; }
.story__stats li { max-width: none; display: flex; flex-direction: column; gap: var(--spacing-8); padding-block: var(--spacing-24); border-bottom: 1px solid var(--hair-2); }
.story__stats li:first-child { padding-top: 0; }
.story__stats li:last-child { border-bottom: 0; padding-bottom: 0; }
.story__v { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.015em; font-variant-numeric: lining-nums; color: var(--ink); white-space: nowrap; }   /* lining figures: Playfair's default old-style "100" reads as "1oo" */
.story__k { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }


/* ============================================================================
   8  CLOSING — headline + CTAs left, the register form right
   ============================================================================ */

.section--register { padding-block: var(--section-y-close); }
.closing { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.closing .lede { margin-top: var(--spacing-24); }
.closing .btn-row { margin-top: var(--spacing-32); }
.register-card { padding: clamp(28px, 3vw, 40px); }
.register-card .register-card__title { font-family: var(--font-sans); font-weight: var(--font-weight-medium); font-size: var(--text-heading-sm); letter-spacing: -0.3px; color: var(--ink); }
.register-card > p { margin-top: var(--spacing-8); }
.register-card form { margin-top: var(--spacing-24); }
.register-card .btn { width: 100%; margin-top: var(--spacing-24); }
.register-card .caption { margin-top: var(--spacing-12); text-align: center; }


/* ============================================================================
   9  FORMS — progressive: the form posts to Netlify without JS; with JS the
      success block replaces it in place. Honeypot hidden, never display:none
      on the input itself would also do; we hide the wrapper.
   ============================================================================ */

.form-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; }
.form-status.is-shown { display: block; }
.form-success { padding: var(--spacing-16) 0 var(--spacing-8); }
.register-card.is-done > p, .contact-card.is-done > p { display: none; }   /* the intro line goes once the form has been sent */
.form-success .h3--serif { font-size: clamp(24px, 2.4vw, 30px); }
.form-success p { margin-top: var(--spacing-12); color: var(--ink-2); font-size: var(--fs-small); }
.form-success::before { content: ""; display: block; width: 28px; height: 28px; margin-bottom: var(--spacing-16); background: var(--accent-blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.form-error { margin-top: var(--spacing-16); padding: var(--spacing-12) var(--spacing-16); border-radius: var(--radius-lg); background: var(--st-critical-wash); color: var(--st-critical); font-size: var(--fs-small); }
.form-error a { color: inherit; }
form.is-sending .btn { opacity: 0.6; pointer-events: none; }
form.is-done { display: none; }
/* selects: native arrow off, a masked chevron in --muted on the wrapper (no hex anywhere) */
.field--select { position: relative; }
.field--select select { appearance: none; -webkit-appearance: none; padding-right: 40px; }
.field--select::after, .cur-wrap::after { content: ""; position: absolute; right: 14px; bottom: 17px; width: 14px; height: 14px; pointer-events: none; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-16); }
.field-row .field + .field { margin-top: 0; }
.field-row + .field { margin-top: var(--spacing-16); }


/* ============================================================================
   10  PRICING — the temporary pilot page: statement + walkthrough CTA left,
       the pricing-interest form (register-card) right. Below it, the parked
       plans-table / FAQ styles stay for the day pricing goes public
       (markup: sections/pricing/_10-plans.html, _20-faq.html).
   ============================================================================ */

.section--pilot { padding-block: calc(var(--nav-h) + clamp(64px, 9vw, 120px)) var(--section-y-close); }
.pilot { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.pilot__copy .lede { margin-top: var(--spacing-24); }
.pilot__copy .btn-row { margin-top: var(--spacing-32); }
.pilot__note { margin-top: var(--spacing-16); max-width: 44ch; }

/* --- parked: plans table + FAQ (no markup on the page today) --- */
.pricing-controls { margin-top: var(--spacing-32); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-16); }
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-pill); border: 1px solid var(--hair); background: var(--surface); }
.seg button {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: var(--font-weight-medium); line-height: 1;
  padding: 9px 16px; border-radius: var(--radius-pill);
  color: var(--ink-2); background: transparent;
  transition: background-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--ink-inverse); }
.seg__badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--radius-pill); background: var(--accent-lemon); color: var(--accent-lemon-ink); }
.seg button[aria-pressed="true"] .seg__badge { background: var(--accent-lemon); color: var(--accent-lemon-ink); }
.currency-line { font-size: var(--fs-small); color: var(--ink-2); display: inline-flex; align-items: center; gap: var(--spacing-8); flex-wrap: wrap; justify-content: center; }
.cur-wrap { position: relative; display: inline-block; }
.cur-wrap::after { right: 9px; bottom: 9px; width: 12px; height: 12px; }
.cur-select {
  font: inherit; font-size: 14px; font-weight: var(--font-weight-medium); color: var(--ink);
  background: var(--surface); border: 1px solid var(--hair-2); border-radius: var(--radius-md);
  padding: 6px 28px 6px 10px; appearance: none; -webkit-appearance: none;
}

.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-16); align-items: stretch; }
.price-card { display: flex; flex-direction: column; position: relative; padding: clamp(28px, 3vw, 40px); }
.price-card > * + * { margin-top: 0; }
.price-card .price-card__flag { position: absolute; top: -13px; left: clamp(28px, 3vw, 40px); }
.price-card .h3 { margin-top: 0; }
.price-card__for { margin-top: var(--spacing-8); color: var(--ink-2); font-size: var(--fs-small); min-height: 3.1em; }
.price { margin-top: var(--spacing-24); display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.price__amount { font-family: var(--font-sans); font-weight: var(--font-weight-medium); font-size: clamp(36px, 3.6vw, 46px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.price__per { font-size: var(--fs-small); color: var(--ink-2); }
.price-card__annual { margin-top: var(--spacing-8); font-size: var(--fs-small); color: var(--ink-2); min-height: 1.5em; }
.price-card__billed { margin-top: var(--spacing-4); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); min-height: 1.6em; }
.price-card__plus { margin-top: var(--spacing-24); font-size: var(--fs-small); color: var(--ink); font-weight: var(--font-weight-medium); }
.price-card .list-check { margin-top: var(--spacing-24); padding-top: var(--spacing-24); border-top: 1px solid var(--hair); }
.price-card__plus + .list-check { margin-top: var(--spacing-12); padding-top: 0; border-top: 0; }
.price-card .list-check > li { color: var(--ink-2); }
.price-card .list-check > li::before { color: var(--accent-blue); }
.price-card .btn { margin-top: var(--spacing-32); width: 100%; }
.price-card .list-check { flex: 1; align-content: start; }
.pricing-foot { max-width: 60ch; margin: var(--spacing-32) auto 0; text-align: center; text-wrap: pretty; }

.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-24); padding: var(--spacing-20) 0; font-size: var(--fs-body); font-weight: var(--font-weight-medium); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ink-2); }
.faq summary:focus-visible { outline-offset: -2px; }
.faq__chev { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform var(--ui-duration) var(--ui-ease); }
.faq details[open] .faq__chev { transform: rotate(180deg); }
.faq__a { padding: 0 0 var(--spacing-24); color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-small); max-width: 62ch; }
.faq-foot { margin-top: var(--spacing-48); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-16) var(--spacing-24); }
.faq-foot p { color: var(--ink-2); }


/* ============================================================================
   11  ABOUT — story split + the four-layer stack, three rules
   ============================================================================ */

.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.split .prose > h2:first-child { margin-top: 0; }
.stack-visual { position: sticky; top: calc(var(--nav-h) + 40px); list-style: none; margin: 0; padding: 0; counter-reset: none; }
.stack-visual li {
  max-width: none;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--spacing-16); align-items: baseline;
  padding: var(--spacing-20) var(--spacing-24);
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg);
}
.stack-visual li + li { margin-top: var(--spacing-8); }
.stack-visual li:first-child { border-color: var(--ink); }
.stack-visual .stack__n { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); color: var(--muted); }
.stack-visual .stack__t { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink); }
.stack-visual .stack__t small { display: block; margin-top: 4px; font-family: var(--font-sans); font-size: var(--fs-small); letter-spacing: normal; text-transform: none; color: var(--ink-2); }
.stack-caption { margin-top: var(--spacing-16); text-align: center; }
.rules-grid .card .h3--serif { font-size: clamp(22px, 2.2vw, 28px); }
.rules-grid .card p { font-size: var(--fs-body); line-height: var(--lh-body); }
.rules-grid .rule-n { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }


/* ============================================================================
   12  CONTACT — hairline info list left, the form card right
   ============================================================================ */

.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.info-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.info-list li { max-width: none; padding-block: var(--spacing-24); border-bottom: 1px solid var(--hair); }
.info-list .h4 { margin-bottom: var(--spacing-8); }
.info-list p { color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.info-list a { color: var(--ink); }
.contact-card { padding: clamp(28px, 3vw, 40px); }
.contact-card .h3 { margin-top: 0; }
.contact-card > p { margin-top: var(--spacing-8); }
.contact-card form { margin-top: var(--spacing-24); }
.contact-card .btn { width: 100%; margin-top: var(--spacing-24); }
.contact-card .caption { margin-top: var(--spacing-12); text-align: center; }


/* ============================================================================
   13  COMPLIANCE — the four promises as quiet pills, the updated line
   ============================================================================ */

.pill-row { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-top: var(--spacing-32); }
.updated { margin-top: var(--spacing-24); }


/* ============================================================================
   14  MOTION GATES + RESPONSIVE
   ============================================================================ */

/* #noanim (site.js also honours it) → nothing waits on a transition */
.no-anim .cost-card .cost-bar > i { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .cost-card .cost-bar > i { width: var(--w, 100%); min-width: 6px; transition: none; }
  .faq__chev { transition: none; }
}

@media (max-width: 1024px) {
  /* bento → two columns: three tiles + the narrow one pair up, the wide tile takes the last full row */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile--wide { grid-column: span 1; }
  .tile--wide { grid-column: span 2; order: 6; }
  .tile__icon { margin-bottom: var(--spacing-24); }
}

@media (max-width: 900px) {
  .cost-grid, .compare, .trust-grid, .price-grid, .steps { grid-template-columns: 1fr; }
  .story, .closing, .pilot, .split, .contact-grid, .powered { grid-template-columns: 1fr; }
  .powered__ring { justify-self: start; }
  .powered__facts { max-width: none; }
  .story { padding: clamp(28px, 6vw, 48px) clamp(24px, 5vw, 40px); }
  .story .h2 { max-width: none; }
  .story__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-24); border-top: 1px solid var(--hair-2); padding-top: var(--spacing-24); }
  .story__stats li { border-bottom: 0; padding-block: 0; }
  .stack-visual { position: static; }
  .steps { gap: var(--spacing-32); }
}

@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .tile, .tile--wide { grid-column: span 1; order: 0; }
  .story__stats { grid-template-columns: 1fr; gap: 0; }
  .story__stats li { padding-block: var(--spacing-16); border-bottom: 1px solid var(--hair-2); }
  .story__stats li:last-child { border-bottom: 0; }
  .story__stats li:first-child { padding-top: 0; }
  .powered__facts li { grid-template-columns: 1fr; gap: var(--spacing-4); }
  .field-row { grid-template-columns: 1fr; }
  .field-row .field + .field { margin-top: var(--spacing-16); }
  .powered__ring, .powered__ring [data-vex-ring] { width: 200px; height: 200px; }
  .powered { grid-template-columns: 1fr; }
  .seg button { padding: 9px 12px; font-size: 13px; }
}