/* ============================================================
   ZOFFER SITE — section components
   Built on styles/tokens.css. The alias block below maps the
   proven component styles (ported from the facelift build) onto
   design-system tokens, so every value resolves to a token.
   Claude Design handoff: retune via tokens.css, not here.
   ============================================================ */

.zoffer {
  /* token aliases (names that differ from tokens.css) */
  --navy:       var(--zoffer-navy);
  --orange:     var(--zoffer-orange);
  --orange-hv:  var(--orange-hover);
  --cream:      var(--zoffer-cream);
  --ink:        var(--zoffer-ink);
  --muted:      var(--zoffer-muted);
  --line:       var(--border-default);
  --line-soft:  var(--border-subtle);
  --font-head:  var(--font-headline);
  --font-hand:  var(--font-casual);

  /* semantic tints reused from tokens */
  --success-bg2:  var(--success-bg);
  --warning-bg2:  var(--warning-bg);
  --danger:       var(--zoffer-orange);
  --danger-bg2:   var(--orange-12);
  --accent-soft:  var(--orange-08);

  /* WhatsApp mockup palette — depicts the third-party app, not brand chrome */
  --wa-green:  #075e54;
  --wa-bg:     #e7ddd2;
  --wa-out:    #dcf8c6;
  --wa-in:     #ffffff;
}

/* subtle dot-grid page decoration (brand texture) */
body.zoffer-root {
  background-image: radial-gradient(rgba(16, 51, 92, 0.07) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-block: var(--space-8) var(--space-9); }
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
}
.hero-copy { max-width: 560px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy);
  background: var(--bg-surface);
  border: var(--bw-hairline) solid var(--line);
  border-radius: var(--radius-full);
  padding: 6px 14px 6px 12px;
  box-shadow: var(--shadow-md);
}
.badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-20);
}

.zoffer .hero h1 {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.04;
  letter-spacing: var(--ls-tight);
  margin: var(--space-5) 0 0;
}
.zoffer .hero h1 em { font-style: italic; font-weight: 700; color: var(--orange); }

.zoffer .sub {
  font-size: var(--fs-body-lg);
  color: var(--muted);
  margin: var(--space-4) 0 0;
  max-width: 480px;
}
.zoffer .sub strong { color: var(--navy); font-weight: 600; }

.ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 0; }

.zoffer .tagline {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--navy);
  margin: var(--space-5) 0 0;
}
.tagline .spark, .spark { color: var(--orange); }

.trust {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin: var(--space-3) 0 0;
  font-size: var(--fs-caption);
  color: var(--muted);
}
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust .tick { color: var(--success); flex: none; }

/* ── hero phone ── */
.hero-visual { display: flex; justify-content: center; }
.phone {
  position: relative;
  width: 340px; height: 640px;
  background: #1f1f24;
  border-radius: 44px;
  padding: 12px;
  box-shadow: var(--shadow-xl), 0 0 0 2px var(--navy-04);
}
.phone-notch {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 26px;
  background: #1f1f24;
  border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
  z-index: 3;
}
.wa {
  height: 100%;
  border-radius: 33px;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--wa-bg);
}
.wa-head {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  background: var(--wa-green);
  color: #fff;
  padding: 30px 14px 10px;
}
.wa-av {
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; display: grid; place-items: center; flex: none;
}
.wa-av img { width: 24px; height: 24px; object-fit: contain; }
.wa-id { display: flex; flex-direction: column; line-height: 1.2; }
.wa-name { font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.wa-id small { font-size: 11.5px; opacity: 0.85; }

.wa-body {
  flex: 1; overflow-y: auto;
  padding: 14px 12px 16px;
  display: flex; flex-direction: column; gap: 9px;
  scroll-behavior: smooth;
}
.wa-body::-webkit-scrollbar { width: 5px; }
.wa-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 99px; }

.wa-day {
  align-self: center;
  background: rgba(255,255,255,0.85);
  color: var(--muted);
  font-size: 11px; font-weight: 500;
  padding: 3px 12px; border-radius: 8px; margin-bottom: 2px;
}
.bub {
  position: relative;
  max-width: 80%;
  padding: 7px 10px 18px;
  border-radius: 10px;
  font-size: 13px; color: var(--ink);
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
  word-wrap: break-word;
}
.bub.user { align-self: flex-end; background: var(--wa-out); border-top-right-radius: 3px; }
.bub.bot  { align-self: flex-start; background: var(--wa-in); border-top-left-radius: 3px; }
.bub p { margin: 0; }
.bub .ts { position: absolute; right: 9px; bottom: 5px; font-size: 10px; color: var(--muted); }
.bub-img { display: block; }
.bub-img img { display: block; width: 190px; max-width: 100%; border-radius: 6px; }

.card-ttl { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--navy); margin-bottom: 6px; }
.tick.g { color: var(--success); flex: none; }
.card-rows { display: flex; flex-direction: column; gap: 3px; border-top: var(--bw-hairline) solid var(--line-soft); padding-top: 6px; }
.card-rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.card-rows span { color: var(--muted); }
.card-rows b { color: var(--ink); font-weight: 600; }
.card-note { margin-top: 7px; font-size: 11.5px; color: var(--muted); background: var(--navy-04); border-left: 2px solid var(--orange); padding: 5px 8px; border-radius: 4px; }

.wa-input { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px 12px; background: var(--wa-bg); }
.wa-field { flex: 1; background: #fff; border-radius: var(--radius-full); padding: 9px 14px; font-size: 13px; color: var(--muted); }
.wa-send { width: 38px; height: 38px; border-radius: 50%; background: var(--wa-green); display: grid; place-items: center; flex: none; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero-copy, .sub { max-width: 100%; }
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar { padding-block: 0; margin-top: calc(-1 * var(--space-5)); }
.stats-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bg-surface);
  border: var(--bw-hairline) solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.stat { padding: 22px 24px; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line-soft); }
.stat .num { display: block; font-family: var(--font-head); font-weight: 800; font-size: 34px; color: var(--navy); line-height: 1; }
.stat .num .unit { font-size: 17px; color: var(--orange); margin-left: 1px; }
.stat .lbl { display: block; margin-top: 7px; font-size: var(--fs-body-sm); color: var(--muted); }

@media (max-width: 640px) {
  .stats-inner { grid-template-columns: 1fr; }
  .stat + .stat::before { display: none; }
  .stat + .stat { border-top: var(--bw-hairline) solid var(--line-soft); }
}

/* ============================================================
   SECTION HEADING (extends site.css .sec-head)
   ============================================================ */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}
.zoffer .h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  color: var(--navy);
  margin: var(--space-3) 0 0;
}
.zoffer .h2 em { font-style: italic; font-weight: 700; color: var(--orange); }
.lede {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
  margin: var(--space-4) 0 0;
}
.sec-head-center { margin-inline: auto; text-align: center; }
.sec-head-center .lede { margin-inline: auto; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.step {
  background: var(--bg-surface);
  border: var(--bw-hairline) solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.step-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 40px;
  color: var(--orange);
  line-height: 1;
}
.zoffer .step-title { margin: var(--space-3) 0 var(--space-2); }
.zoffer .step-body { color: var(--muted); margin: 0; font-size: var(--fs-body); }

@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ============================================================
   PRODUCT SHOWCASES
   ============================================================ */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.showcase.flip .showcase-copy { order: 2; }
.showcase + .showcase { margin-top: var(--space-10); }
.showcase-copy .eyebrow { margin-bottom: var(--space-4); }
.showcase-copy .h2 { margin-top: 0; margin-bottom: var(--space-4); }
.showcase-copy .lede { margin-top: 0; margin-bottom: var(--space-6); }
.showcase-center { display: flex; justify-content: center; }

.showcase-list { margin: 0 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.showcase-list li { display: flex; gap: 12px; font-size: 15px; color: var(--gray-700); line-height: 1.5; }
.showcase-list li .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--orange); display: grid; place-items: center; margin-top: 1px; font-size: 12px; font-weight: 700; }
.showcase-list li b { color: var(--navy); font-weight: 600; }

.text-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; color: var(--orange); }
.text-link .arr { transition: transform var(--dur-base) var(--ease-out); }
.text-link:hover .arr { transform: translateX(3px); }

.mini-stats { display: flex; gap: var(--space-6); margin-bottom: var(--space-6); }
.mini-stats .ms .n { font-family: var(--font-head); font-weight: 700; font-size: 30px; color: var(--navy); letter-spacing: -.02em; }
.mini-stats .ms .n em { font-style: italic; color: var(--orange); }
.mini-stats .ms .l { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* in-product WhatsApp chat (navy header — distinct from hero phone) */
#product .wa { width: 100%; max-width: 360px; background: #e6ddd3; border-radius: 18px; overflow: hidden; border: var(--bw-hairline) solid var(--line); box-shadow: var(--shadow-lg); height: auto; }
#product .wa-head { background: var(--navy); display: flex; align-items: center; gap: 10px; padding: 13px 16px; }
#product .wa-head .av { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
#product .wa-head .av img { width: 22px; height: 22px; object-fit: contain; }
#product .wa-head .nm { color: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
#product .wa-head .vf { width: 14px; height: 14px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; }
#product .wa-head small { color: rgba(255,255,255,.6); font-size: 11px; }
#product .wa-body { padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; background-image: radial-gradient(rgba(16,51,92,.05) 1px, transparent 1px); background-size: 16px 16px; }
#product .bub { max-width: 82%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
#product .bub.user { align-self: flex-end; background: #d6f3c8; border-bottom-right-radius: 4px; color: #15300a; }
#product .bub.bot { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; color: var(--ink); }
#product .bub .t { display: block; font-size: 9.5px; color: rgba(0,0,0,.4); text-align: right; margin-top: 4px; }
#product .bub-img { width: 150px; border-radius: 8px; overflow: hidden; background: var(--gray-200); }
#product .bub-img img { width: 100%; display: block; }
#product .rich-ttl { font-weight: 700; font-size: 12.5px; color: var(--navy); margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
#product .rich-det { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
#product .rich-det b { color: var(--ink); }
#product .rich-det .row { display: flex; justify-content: space-between; gap: 14px; }
#product .draftpill { margin-top: 9px; font-size: 11px; font-weight: 600; color: var(--warning); background: var(--warning-bg2); padding: 6px 9px; border-radius: 7px; line-height: 1.4; }
#product .postedpill { margin-top: 9px; font-size: 11px; font-weight: 600; color: var(--success); background: var(--success-bg2); padding: 6px 9px; border-radius: 7px; display: inline-flex; align-items: center; gap: 6px; }

/* browser frame (Phase 4 fills with Verification Station) */
.browser { border-radius: 12px; overflow: hidden; background: var(--bg-surface); border: var(--bw-hairline) solid var(--line); box-shadow: var(--shadow-lg); width: 100%; }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #f3f1ed; border-bottom: var(--bw-hairline) solid var(--line-soft); }
.browser-bar .dots { display: flex; gap: 6px; }
.browser-bar .dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.browser-bar .dots i:nth-child(1) { background: #ff5f57; }
.browser-bar .dots i:nth-child(2) { background: #febc2e; }
.browser-bar .dots i:nth-child(3) { background: #28c840; }
.browser-bar .url { margin-left: 10px; font-size: 12.5px; color: var(--muted); background: #fff; border: var(--bw-hairline) solid var(--line-soft); border-radius: 6px; padding: 4px 12px; font-family: var(--font-mono); flex: 1; max-width: 280px; }

/* ── Verification Station mock ── */
.vs { display: grid; grid-template-columns: 40% 60%; min-height: 400px; background: var(--bg-surface); }

.vs-queue { border-right: var(--bw-hairline) solid var(--line-soft); padding: 12px 10px; display: flex; flex-direction: column; gap: 9px; background: var(--bg-surface-2); }
.vs-search { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); background: #fff; border: var(--bw-hairline) solid var(--line-soft); border-radius: 8px; padding: 7px 10px; }
.vs-tabs { display: flex; gap: 5px; }
.vs-tab { font-size: 10px; font-weight: 600; color: var(--muted); padding: 4px 8px; border-radius: var(--radius-full); background: #fff; border: var(--bw-hairline) solid var(--line-soft); white-space: nowrap; }
.vs-tab b { color: var(--muted); font-weight: 700; }
.vs-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.vs-tab.active b { color: var(--zoffer-orange); }
.vs-rows { display: flex; flex-direction: column; gap: 7px; }
.vs-row { display: flex; align-items: center; gap: 8px; background: #fff; border: var(--bw-hairline) solid var(--line-soft); border-radius: 9px; padding: 9px 10px; }
.vs-row.selected { border-color: var(--zoffer-orange); border-left-width: 3px; box-shadow: var(--shadow-sm); }
.vs-status { width: 15px; height: 15px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.vs-status.draft { background: var(--gray-300); }
.vs-status.done { background: var(--success); }
.vs-row-main { flex: 1; min-width: 0; }
.vs-row-main b { display: block; font-size: 12px; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-row-main small { font-size: 10px; color: var(--muted); }
.vs-row-amt { text-align: right; flex: none; }
.vs-row-amt b { display: block; font-family: var(--font-head); font-size: 12.5px; color: var(--navy); font-weight: 700; }
.vs-row-amt small { font-size: 9px; color: var(--muted); }

.vs-form { padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; }
.vs-form-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vs-form-eyebrow { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.zoffer .vs-form-name { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--navy); margin: 3px 0 0; }
.vs-chip { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-full); flex: none; }
.vs-chip-draft { color: var(--warning); background: var(--warning-bg2); }
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vs-fld label { display: block; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 3px; }
.vs-val { font-size: 12.5px; color: var(--ink); font-weight: 500; background: var(--bg-surface-2); border: var(--bw-hairline) solid var(--line-soft); border-radius: 7px; padding: 7px 10px; }

.vs-items { border: var(--bw-hairline) solid var(--line-soft); border-radius: 9px; overflow: hidden; }
.vs-items-head, .vs-item { display: grid; grid-template-columns: 1.6fr 0.8fr 0.5fr 0.8fr 1fr; gap: 6px; align-items: center; padding: 7px 11px; font-size: 11px; }
.vs-items-head { background: var(--bg-surface-2); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.vs-item { border-top: var(--bw-hairline) solid var(--line-soft); color: var(--gray-700); }
.vs-item .vs-amt { text-align: right; font-weight: 600; color: var(--ink); }
.vs-items-head span:last-child { text-align: right; }
.vs-addline { display: block; padding: 7px 11px; font-size: 10.5px; font-weight: 600; color: var(--zoffer-orange); border-top: var(--bw-hairline) solid var(--line-soft); }

.vs-totals { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
.vs-totals div { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.vs-totals b { color: var(--ink); font-weight: 600; }
.vs-total-grand { border-top: var(--bw-hairline) solid var(--line-soft); padding-top: 5px; margin-top: 2px; }
.vs-total-grand span { color: var(--navy); font-weight: 700; }
.vs-total-grand b { font-family: var(--font-head); font-size: 15px; color: var(--navy); font-weight: 800; }

.vs-catrow { display: flex; align-items: center; gap: 10px; }
.vs-catrow label { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.vs-cat { font-size: 11px; font-weight: 600; color: var(--navy); background: var(--navy-08); border-radius: var(--radius-full); padding: 4px 11px; }

.vs-actions { display: flex; gap: 8px; margin-top: auto; }
.vs-approve { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700; color: #fff; background: var(--zoffer-orange); border: none; border-radius: 8px; padding: 10px; }
.vs-savedraft { display: inline-block; font-size: 12px; font-weight: 600; color: var(--muted); background: #fff; border: var(--bw-hairline) solid var(--line); border-radius: 8px; padding: 10px 14px; }

@media (max-width: 520px) {
  .vs { grid-template-columns: 1fr; }
  .vs-queue { border-right: none; border-bottom: var(--bw-hairline) solid var(--line-soft); }
  .vs-rows { flex-direction: row; overflow-x: auto; }
  .vs-row { min-width: 180px; }
}

/* ITC alert card */
.alert-wrap { width: 100%; max-width: 360px; }
.alert-card { width: 100%; background: var(--bg-surface); border-radius: 14px; padding: 16px 18px; border: var(--bw-hairline) solid var(--line-soft); box-shadow: var(--shadow-xl); }
.alert-card .top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.alert-card .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--danger-bg2); color: var(--danger); flex: none; }
.alert-card .ttl { font-size: 13px; font-weight: 700; color: var(--navy); }
.alert-card .tag { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--danger); }
.zoffer .alert-card p { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
.alert-card p b { color: var(--ink); }
.alert-card .act { display: flex; gap: 8px; }
.alert-card .act span { flex: 1; font-size: 12px; font-weight: 600; padding: 8px; border-radius: 8px; border: none; text-align: center; }
.alert-card .act .go { background: var(--orange); color: #fff; }
.alert-card .act .skip { background: var(--navy-04); color: var(--muted); border: var(--bw-hairline) solid var(--line-soft); }

@media (max-width: 860px) {
  .showcase { grid-template-columns: 1fr; gap: var(--space-6); }
  .showcase.flip .showcase-copy { order: 0; }
  .showcase + .showcase { margin-top: var(--space-8); }
}

/* ============================================================
   INTEGRATIONS FORK
   ============================================================ */
.integrations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-6); }
.int-card { border-radius: var(--radius-lg); padding: var(--space-7); position: relative; box-shadow: var(--shadow-md); }
.int-zoho { background: var(--bg-surface); border: var(--bw-hairline) solid var(--line-soft); }
.int-tally { background: var(--navy); }
.int-pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--success); background: var(--success-bg2); border-radius: var(--radius-full); padding: 4px 11px; margin-bottom: var(--space-4); }
.int-pill-soon { color: #fff; background: rgba(255,255,255,0.16); }
.zoffer .int-name { font-family: var(--font-head); font-weight: 800; font-size: 26px; margin: 0 0 var(--space-2); }
.int-zoho .int-name { color: var(--navy); }
.int-tally .int-name { color: #fff; }
.zoffer .int-desc { font-size: 15px; line-height: 1.55; margin: 0 0 var(--space-5); }
.int-zoho .int-desc { color: var(--muted); }
.int-tally .int-desc { color: var(--fg-on-navy-muted); }

@media (max-width: 760px) { .integrations-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PRICING
   ============================================================ */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-7); align-items: start; }
.price-card {
  background: var(--bg-surface);
  border: var(--bw-hairline) solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  position: relative;
}
.price-card-featured {
  border-color: var(--orange);
  border-top: var(--bw-thick) solid var(--orange);
  box-shadow: var(--shadow-lg);
}
.price-badge {
  position: absolute; top: -12px; right: var(--space-5);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: var(--orange);
  border-radius: var(--radius-full); padding: 4px 12px;
}
.zoffer .price-name { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--navy); margin: 0 0 var(--space-3); }
.price-amt { font-family: var(--font-head); font-weight: 800; font-size: 44px; color: var(--navy); line-height: 1; margin-bottom: var(--space-5); display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; }
.price-amt .cur { font-size: 26px; }
.price-amt .per { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.price-was { font-family: var(--font-body); font-size: 18px; font-weight: 500; color: var(--fg-3); text-decoration: line-through; margin-right: 8px; align-self: center; }
.price-feats { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 0 var(--space-6); font-size: 14px; color: var(--gray-700); flex: 1; }
.price-feats li { display: flex; align-items: flex-start; gap: 9px; }
.price-feats .ck { color: var(--success); font-weight: 700; flex: none; }
.price-cta { width: 100%; justify-content: center; }
.zoffer .price-note { text-align: center; margin-top: var(--space-5); font-size: var(--fs-body-sm); color: var(--muted); }

@media (max-width: 860px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* ============================================================
   FOR CA FIRMS
   ============================================================ */
.ca-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); align-items: center; }
.ca-benefits { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-6) 0 0; }
.ca-benefits li { display: flex; gap: 12px; font-size: 15px; color: var(--gray-700); line-height: 1.5; }
.ca-benefits li .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--orange); display: grid; place-items: center; margin-top: 1px; font-size: 12px; font-weight: 700; }
.ca-benefits li b { color: var(--navy); font-weight: 600; }

.ca-card {
  background: var(--navy);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  color: #fff;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.ca-card-eyebrow { display: block; font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); margin-bottom: var(--space-4); }
.ca-price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-3); }
.ca-was { font-size: 22px; color: var(--fg-on-navy-faint); text-decoration: line-through; margin-right: 6px; }
.ca-now { font-family: var(--font-head); font-weight: 800; font-size: 48px; line-height: 1; color: #fff; }
.ca-now .cur { font-size: 28px; }
.ca-price .per { font-size: 15px; color: var(--fg-on-navy-muted); }
.zoffer .ca-note { font-size: var(--fs-body-sm); color: var(--fg-on-navy-muted); margin: 0 0 var(--space-5); }
.ca-cta { width: 100%; justify-content: center; }

@media (max-width: 860px) { .ca-inner { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ============================================================
   FOUNDER STORY
   ============================================================ */
.founder-inner { max-width: 780px; margin-inline: auto; text-align: center; }
.founder-quote {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.5;
  color: var(--ink);
  margin: var(--space-6) 0 0;
}
.zoffer .founder-by { margin: var(--space-5) 0 0; font-size: var(--fs-body-lg); color: var(--muted); }
.founder-by b { color: var(--navy); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { max-width: 760px; margin: var(--space-7) auto 0; }
.faq-item { border-bottom: var(--bw-hairline) solid var(--line-soft); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: none; border: none;
  padding: var(--space-5) 0;
  text-align: left;
  font-family: var(--font-body); font-size: var(--fs-body-lg); font-weight: 600; color: var(--navy);
}
.faq-icon { flex: none; font-size: 22px; font-weight: 400; color: var(--orange); transition: transform var(--dur-base) var(--ease-out); }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height var(--dur-slow) var(--ease-out); }
.faq-item.open .faq-a { max-height: 320px; }
.zoffer .faq-a p { margin: 0; padding: 0 0 var(--space-5); color: var(--muted); font-size: var(--fs-body); line-height: 1.6; max-width: 64ch; }

/* ============================================================
   FINAL CTA BAND
   ============================================================ */
.cta-band { background: var(--navy); }
.cta-inner { text-align: center; padding-block: var(--space-9); }
.zoffer .cta-title { font-family: var(--font-head); font-weight: 800; font-size: clamp(30px, 4vw, 46px); color: #fff; margin: 0; letter-spacing: var(--ls-tight); }
.zoffer .cta-caveat { font-family: var(--font-hand); font-size: 24px; color: var(--zoffer-cream); margin: var(--space-3) 0 0; }
.cta-btns { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }

@media (prefers-reduced-motion: reduce) {
  .wa-body { scroll-behavior: auto; }
}