/* ————————————————————————————————————————————————————————————
   Exec landing variant (/execs.html) — A/B test against /index.html.
   Loaded AFTER styles.css. Reuses brand tokens and shared primitives
   (.nav .btn .section .card .band .trust .faq .footer .scorecard .ledger).
   Everything new is namespaced .ex-* / .calc-* so the control page is
   never touched by changes here.
   ———————————————————————————————————————————————————————————— */

/* ————— Nav ————— */
/* Belt-and-braces with the shortened labels: never break a label mid-phrase, and
   tighten the gaps before the row runs out of width. */
.nav-links a { white-space: nowrap; }
@media (max-width: 1180px) {
  .nav { gap: 24px; }
  .nav-links { gap: 20px; }
}
/* styles.css only drops the section links at 640px, but wordmark + 6 links + the
   CTA needs ~870px — below that the button was pushed off the right edge and the
   page scrolled horizontally. Drop the links early; wordmark + CTA is the right
   tablet nav for this page anyway. */
@media (max-width: 900px) {
  .nav-links { display: none; }
}

/* ————— Alternating-band alignment normalization —————
   styles.css gives `.section-alt > *` auto side margins. For any child with a
   max-width that centers it instead of aligning it: `.section h2` has
   max-width:21em, so alt-band headings land ~98px in from their own kicker.
   The bands themselves also sit 24px left of normal `.section` bands, because
   `.section` puts its 24px padding INSIDE a 1120 box while `.section-alt` puts
   it outside one. Result is a left edge that jogs as you scroll.

   Pin every alt child to the same 1120-grid content column `.section` uses.
   Longhand margins only, so each element keeps its own vertical rhythm.
   Fixed here rather than in styles.css: that file is shared with the control
   variant, which must stay byte-identical for the A/B test to mean anything. */
/* `.section-alt` already contributes the gutter via `.section`'s own padding, so
   these margins only need to center the content column inside what's left. The
   column is `--maxw` minus both gutters, matching what a normal `.section`
   yields (its max-width is border-box, gutters included). --ex-gutter tracks the
   padding styles.css narrows to 20px at 640px. */
:root {
  --ex-gutter: 24px;
  --ex-col: calc(var(--maxw) - 2 * var(--ex-gutter));
}
.section-alt > *,
.section-alt > .kicker,
.section-alt > h2,
.section-alt > .section-lede {
  margin-left: max(0px, calc((100% - var(--ex-col)) / 2));
  margin-right: max(0px, calc((100% - var(--ex-col)) / 2));
  padding-left: 0;
  padding-right: 0;
}

/* ————— Hero ————— */
.ex-hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 24px 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 52px;
  /* Top-aligned, not centered: the copy column is ~150px taller than the card,
     so centering pushed the email capture 74px further down for no visual gain.
     The nudge lines the card's top edge up with the headline rather than the
     kicker above it. */
  align-items: start;
}
.ex-hero .calc { margin-top: 30px; }
/* Capped at 54px so the headline sets in 3 lines, not 4. The extra line pushed
   the email capture — the whole point of this variant — below the fold on a
   ~750px laptop viewport. */
.ex-hero h1 {
  font-size: clamp(36px, 4.4vw, 54px);
  letter-spacing: -0.032em;
  margin-bottom: 20px;
  text-wrap: balance;
}
.ex-hero h1 em { font-style: normal; color: var(--emerald-deep); }
.ex-hero-copy, .ex-hero .calc { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ex-hero .calc { animation-delay: 0.15s; }

.ex-audience {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-45);
}
.ex-audience::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
}

.ex-subpoints {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--ink-08);
  display: grid;
  gap: 9px;
}
.ex-subpoints li {
  font-size: 15px;
  color: var(--ink-70);
  padding-left: 26px;
  position: relative;
}
.ex-subpoints li::before {
  content: "\2733";
  position: absolute;
  left: 0; top: 1px;
  color: var(--emerald-deep);
  font-size: 0.78em;
}
.ex-subpoints b { color: var(--ink); font-weight: 600; }

/* ————— Savings calculator card ————— */
.calc {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(11, 18, 32, 0.05),
    0 16px 40px -18px rgba(11, 18, 32, 0.25);
}
.calc-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  font-size: 12px;
  color: var(--ink-45);
  background: var(--paper);
  border-bottom: 1px solid var(--ink-08);
}
.calc-bar .vc-dots i { background: var(--ink-12); }
.calc-bar .calc-tag { margin-left: auto; color: var(--emerald-deep); }
/* No bottom padding: .calc-form is flush to the card's bottom edge. */
.calc-body { padding: 24px 26px 0; }

.calc-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 10px;
}
.calc-spend {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 4px;
}
.calc-spend span {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-45);
  letter-spacing: 0;
}

/* range input, restyled in both engines */
.calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  cursor: pointer;
  margin: 8px 0 2px;
  display: block;
}
.calc-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--ink-12);
}
.calc-range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--ink-12);
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--emerald);
  border: 3px solid var(--card);
  box-shadow: 0 1px 6px rgba(11, 18, 32, 0.3);
}
.calc-range::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--emerald);
  border: 3px solid var(--card);
  box-shadow: 0 1px 6px rgba(11, 18, 32, 0.3);
}
.calc-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-45);
  margin-bottom: 20px;
}

.calc-out {
  border-top: 1px solid var(--ink-08);
  padding-top: 18px;
}
.calc-runrate {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-45);
  margin: 0 0 12px;
}
.calc-runrate b { color: var(--ink-70); font-weight: 500; }
.calc-outlabel {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0 0 6px;
}
.calc-figure {
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--emerald-deep);
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}
/* ————— Hero split bar —————
   The hero card carries no controls, so this bar is the entire graphic: one
   length, cut once. The 28% emerald slice is the midpoint of the 15 to 40%
   range quoted beside it. The range itself stays in text rather than being
   drawn: drawing it needs a second boundary on the bar, which is one more
   thing to decode in a graphic whose whole job is to be read at a glance. */
.split-cap {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0 0 12px;
}
.split-bar {
  display: flex;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink-08);
}
.split-keep {
  flex: 0 0 72%;
  background: var(--ink-12);
}
.split-save {
  flex: 1 1 auto;
  background: var(--emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Anchor the wipe on the right edge so the slice reads as carved out of the
     bar rather than pushing the rest of it aside. */
  transform-origin: right center;
  animation: split-wipe 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
.split-save b {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  /* The parent scaleX would squash the glyphs mid-wipe, so hold the label back
     until the slice has finished opening (0.45s delay + 0.8s wipe). */
  animation: split-label 0.35s ease 1.25s both;
}
@keyframes split-label {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes split-wipe {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.split-legend {
  display: flex;
  margin-top: 9px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--ink-45);
}
/* Match the bar's own split so each label sits under its segment. The keep
   label is the long one, so give it the room and let the save label hug right. */
.split-leg.keep { flex: 0 0 72%; padding-right: 10px; }
.split-leg.save { flex: 1 1 auto; color: var(--emerald-deep); }
.split-sub {
  font-size: 14.5px;
  color: var(--ink-70);
  margin: 0 0 4px;
  max-width: 34em;
}
/* No slider above it, so the divider the closer card needs would float here. */
.ex-hero .calc-out { border-top: 0; padding-top: 22px; }
/* The hero card's whole job is the size of the prize, so the dollar figure runs
   larger here than in the closer card, where the slider shares the billing. */
.ex-hero .calc-figure { font-size: clamp(32px, 4.6vw, 46px); margin-bottom: 8px; }
.calc-figure small {
  font-size: 0.42em;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-45);
}

/* Body copy runs to different lengths across the three problem cards, which left
   the pull-quotes on a ragged baseline. Push them to a common bottom edge. */
.ex-cards .card { display: flex; flex-direction: column; }
.ex-cards .card blockquote { margin-top: auto; }

.calc-form {
  border-top: 1px solid var(--ink-08);
  background: var(--paper);
  padding: 18px 26px 22px;
  margin: 0 -26px;
}
.calc-fields { display: flex; gap: 9px; flex-wrap: wrap; }
.calc-form input[type="email"] {
  flex: 1 1 190px;
  min-width: 0;
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--ink-12);
  border-radius: 8px;
  padding: 12px 14px;
}
.calc-form input[type="email"]::placeholder { color: var(--ink-45); }
.calc-form button { flex: 0 0 auto; }
.calc-form button[disabled] { opacity: 0.55; cursor: progress; }
.calc-hp {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}
.calc-fine {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-45);
  margin: 12px 0 0;
}
.calc-msg { font-size: 14px; margin: 12px 0 0; }
.calc-msg.err { color: var(--red); }
.calc-msg.ok { color: var(--emerald-deep); }
.calc-form.done .calc-fields, .calc-form.done .calc-fine { display: none; }

/* ————— Hero lead form —————
   Three controls instead of two. Email and spend band share a row and wrap
   independently; the button always takes its own full-width row so the primary
   action never ends up as a 90px stub next to a wrapped input. */
.lead-form select {
  flex: 1 1 160px;
  min-width: 0;
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--ink-12);
  border-radius: 8px;
  padding: 12px 34px 12px 14px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230b1220' stroke-opacity='.45' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
/* Until a band is picked the placeholder option is showing, so grey it to read
   as a prompt rather than an answer. */
.lead-form select:invalid { color: var(--ink-45); }
/* `.btn` is inline-block, so centre with text-align, not justify-content. */
.lead-form button {
  flex: 1 1 100%;
  text-align: center;
}

/* ————— Big stat triad ————— */
/* Vertical margins only — the shorthand would zero the side margins that align
   this to the alt-band content column above. */
.ex-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 4px;
  margin-bottom: 18px;
}
.ex-stat {
  background: var(--card);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius);
  padding: 26px 24px;
}
/* Scoped with the parent so it outranks `.ex-stat p` below. */
.ex-stat .ex-stat-n {
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--emerald-deep);
  margin: 0 0 12px;
}
.ex-stat .ex-stat-n small {
  font-size: 0.5em;
  color: var(--ink-45);
  letter-spacing: -0.01em;
  margin-left: 2px;
}
.ex-stat h3 { font-size: 16.5px; margin-bottom: 5px; }
.ex-stat p { font-size: 14px; color: var(--ink-70); margin: 0; }

/* ————— Lever table ————— */
.ex-table-wrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius);
}
table.ex-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 660px;
}
.ex-table th, .ex-table td {
  text-align: left;
  padding: 15px 22px;
  border-bottom: 1px solid var(--ink-08);
  vertical-align: top;
}
.ex-table tr:last-child td { border-bottom: none; }
.ex-table th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-45);
  background: var(--paper);
  border-bottom: 1px solid var(--ink-12);
  white-space: nowrap;
}
.ex-table td:first-child { color: var(--ink); font-weight: 500; width: 24%; }
.ex-table td { color: var(--ink-70); }
.ex-table .ex-save {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--emerald-deep);
  white-space: nowrap;
  width: 20%;
}
.ex-table tbody tr:hover { background: rgba(16, 185, 129, 0.035); }
.ex-table-foot { font-size: 12.5px; color: var(--ink-45); margin: 16px 0 0; }

/* ————— Sub-heading inside a section ————— */
.ex-subhead {
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 64px 0 14px;
}

/* ————— Model price table ————— */
table.ex-prices { min-width: 560px; }
.ex-prices td:first-child { width: 34%; }
.ex-prices .ex-num {
  font-family: var(--mono);
  font-size: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  width: 22%;
}
.ex-prices th:not(:first-child) { text-align: right; }
/* Tier separators: label rows inside the body, not data. */
.ex-prices tr.ex-tier td {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-45);
  background: var(--paper);
  padding-top: 14px;
  padding-bottom: 10px;
  width: auto;
  font-weight: 400;
}
.ex-prices tr.ex-tier:hover { background: var(--paper); }
.ex-prices .ex-idx-hi { color: var(--amber); }
.ex-prices .ex-idx-lo { color: var(--emerald-deep); font-weight: 500; }

/* ————— Caution callout ————— */
.ex-caution {
  margin-top: 28px;
  padding: 22px 26px;
  background: var(--card);
  border: 1px solid var(--ink-12);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.ex-caution h3 { font-size: 18.5px; margin-bottom: 8px; }
.ex-caution p { font-size: 15.5px; color: var(--ink-70); margin: 0; max-width: 62em; }

/* ————— Two-column proof block ————— */
/* Near-even split: at 0.85/1.15 the copy column fell to ~430px, which broke the
   h3 across two lines and over-hyphenated the body. The scorecard still has room
   for its label + track + delta grid at this width. */
.ex-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: center;
  margin-top: 8px;
}
.ex-proof-copy h3 { font-size: 22px; margin-bottom: 10px; }
.ex-proof-copy p { font-size: 16px; color: var(--ink-70); }
.ex-proof-copy p:last-child { margin-bottom: 0; }
.ex-proof .scorecard { width: 100%; }

/* ————— Numbered exec loop ————— */
.ex-loop {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.ex-loop li {
  border-top: 2px solid var(--emerald);
  padding-top: 18px;
}
.ex-loop .ex-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--emerald-deep);
  display: block;
  margin-bottom: 8px;
}
.ex-loop h3 { font-size: 19px; margin-bottom: 7px; }
.ex-loop p { font-size: 14.8px; color: var(--ink-70); margin: 0; }

/* ————— Video (secondary placement) ————— */
.ex-video { max-width: 720px; margin: 36px auto 0; }

/* ————— Closer form ————— */
.ex-closer { text-align: center; padding-bottom: 110px; }
.ex-closer h2, .ex-closer .section-lede { margin-left: auto; margin-right: auto; }
.ex-closer .calc { max-width: 480px; margin: 8px auto 0; text-align: left; }

/* ————— Responsive ————— */
@media (max-width: 1020px) {
  .ex-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 36px; }
  .ex-stats { grid-template-columns: 1fr; }
  .ex-proof { grid-template-columns: 1fr; gap: 28px; }
  .ex-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Below the table's min-width, restack rows as cards rather than hiding the
   "why it hasn't happened yet" column behind a horizontal scroll — that column
   carries the argument, so it can't be the one that falls off screen. */
@media (max-width: 700px) {
  .ex-table-wrap { overflow-x: visible; }
  table.ex-table { min-width: 0; display: block; font-size: 15px; }
  .ex-table thead { display: none; }
  .ex-table tbody, .ex-table tr, .ex-table td { display: block; width: auto; }
  .ex-table tr {
    padding: 18px 20px;
    border-bottom: 1px solid var(--ink-08);
  }
  .ex-table tbody tr:last-child { border-bottom: none; }
  .ex-table td { padding: 0; border-bottom: none; }
  .ex-table td:first-child { width: auto; font-size: 17px; margin-bottom: 3px; }
  .ex-table .ex-save { width: auto; margin-bottom: 7px; }
  .ex-table td:last-child { font-size: 14.5px; }

  /* The price table stays a table and scrolls. Stacking a 4-column numeric
     grid into 4 lines per model destroys the column-to-column comparison
     that is the entire point of it. */
  .ex-prices-wrap { overflow-x: auto; }
  table.ex-prices { display: table; min-width: 460px; font-size: 14px; }
  .ex-prices thead { display: table-header-group; }
  .ex-prices tbody { display: table-row-group; }
  .ex-prices tr { display: table-row; padding: 0; border-bottom: none; }
  .ex-prices td { display: table-cell; padding: 11px 14px; border-bottom: 1px solid var(--ink-08); }
  .ex-prices td:first-child { font-size: 14px; margin-bottom: 0; }
  .ex-prices .ex-num { font-size: 12.5px; }
  .ex-prices th { padding: 11px 14px; }
}

@media (max-width: 640px) {
  :root { --ex-gutter: 20px; }
  .ex-hero { padding: 24px 20px 48px; }
  .ex-loop { grid-template-columns: 1fr; }
  .calc-body { padding: 20px 18px 0; }
  .calc-form { padding: 16px 18px 20px; margin: 0 -18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-hero-copy, .ex-hero .calc { animation: none; }
  /* `animation: none` alone would drop the fill back to its unscaled state,
     which is fine here only because the from-state is the scaled-down one. */
  .split-save { animation: none; transform: none; }
  /* Its from-state is opacity 0, so this one does need an explicit reset. */
  .split-save b { animation: none; opacity: 1; }
}