/* =============================================================================
   OptiCheckout — feature pages (/order-bump, /frequently-bought-together,
   /ab-testing, /checkout-analytics).

   One page, one feature, one promise. The rule for this sheet: the visitor sees
   the thing working before they read a sentence about it. Every page opens with
   a live demo or a real product screenshot, and no block of body copy runs
   longer than about forty words.

   TWO PARTS:
     1. .wccp-bump*  — lifted VERBATIM from the plugin's own
        assets/css/checkout-glide.css (the shared base sheet all seven templates
        load). The bump on this page is not a drawing of the product, it IS the
        product's markup and CSS. Re-copy this block if the plugin's bump styles
        change; the demo is only honest while it matches.
     2. .fp-* / .obd-*  — the marketing chrome around it.
   ============================================================================= */


/* =============================================================================
   PART 1 — REAL PLUGIN CSS (verbatim from checkout-glide.css)

   The real rules are written against a `.woocommerce` ancestor, because on a
   live store the bump card is relocated inside WooCommerce's `.place-order`
   form row. The demo stage carries `class="woocommerce"` for exactly that
   reason, so these selectors resolve here the way they resolve on a real
   checkout, rather than being rewritten to suit the demo.
   ============================================================================= */

.wccp-bump {
  position: relative;
  margin: 20px 0 12px;
  padding: 24px 14px 14px;
  background: #fff;
  border: 1.5px solid var(--wccp-bump-accent, var(--wccp-accent, #1B4332));
  border-radius: var(--wccp-bump-radius, 12px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wccp-bump-accent, var(--wccp-accent, #1B4332)) 9%, transparent);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.wccp-bump-badge {
  position: absolute;
  top: -11px;
  left: 14px;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--wccp-on-accent, #fff);
  background: var(--wccp-bump-accent, var(--wccp-accent, #1B4332));
  border-radius: 5px;
  padding: 2px 9px;
  white-space: nowrap;
}
.wccp-bump-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.woocommerce .wccp-bump .wccp-bump-row {
  display: flex;
  align-items: flex-start;
  margin: 0;
  line-height: 1.4;
  position: static;
  top: auto;
  left: auto;
  transform: none;
  z-index: auto;
  pointer-events: auto;
}
.wccp-bump-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--wccp-bump-accent, var(--wccp-accent, #1B4332));
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  transition: background-color 120ms ease;
  color: var(--wccp-on-accent, #fff);
}
.wccp-bump-checkbox::after {
  content: "";
  width: 11px;
  height: 11px;
  opacity: 0;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  transition: opacity 120ms ease;
}
.wccp-bump-checkbox:checked { background: var(--wccp-bump-accent, var(--wccp-accent, #1B4332)); }
.wccp-bump-checkbox:checked::after { opacity: 1; }
.wccp-bump-checkbox:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--wccp-bump-accent, var(--wccp-accent, #1B4332)) 55%, #fff);
  outline-offset: 2px;
}
.wccp-bump-thumb {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 9px;
  background: #f0f0f0;
}
.wccp-bump-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wccp-bump-label {
  font-size: 15px;
  font-weight: 700;
  color: #1a2233;
  line-height: 1.3;
}
.wccp-bump-sub {
  font-size: 14px;
  color: #6a7280;
  line-height: 1.4;
  margin-top: 2px;
}
.wccp-bump-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  line-height: 1.25;
}
.wccp-bump-was {
  font-size: 14px;
  font-weight: 500;
  color: #646b78;
  text-decoration: line-through;
}
.wccp-bump-now {
  font-size: 15px;
  font-weight: 700;
  color: var(--wccp-bump-accent, var(--wccp-accent-text, var(--wccp-accent, #1B4332)));
}
.wccp-bump-save {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;
  background: #1FA86C;
  border-radius: 5px;
  padding: 2px 7px;
}
.wccp-bump-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.wccp-bump-cta {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #1a2233;
}
.wccp-bump--compact { padding: 10px 13px; }
.wccp-bump--compact .wccp-bump-row { gap: 10px; }
.wccp-bump--compact .wccp-bump-thumb { width: 40px; height: 40px; }
.wccp-bump--banner {
  background: color-mix(in srgb, var(--wccp-bump-accent, var(--wccp-accent, #1B4332)) 7%, #fff);
  border-color: color-mix(in srgb, var(--wccp-bump-accent, var(--wccp-accent, #1B4332)) 35%, #e6e6e6);
}
.wccp-bump-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 600px) {
  .wccp-bump-thumb { width: 46px; height: 46px; }
  .woocommerce .wccp-bump .wccp-bump-row { gap: 10px; }
}


/* =============================================================================
   PART 2 — FEATURE PAGE DESIGN: "THE LEDGER"

   THE IDEA. A checkout is arithmetic. Every feature on these four pages is one
   number and the thing that moves it: a bump moves the order total, a
   recommendation strip moves the subtotal, analytics finds where the number
   falls away, an A/B test decides which number wins. So the pages are built like
   a ledger, and each one opens by stating its own number as a before and after.

   WHAT CARRIES IT.
     - A second VOICE, not a second brand. Geist Mono, from the same family the
       whole site already uses, reserved strictly for money, metrics, labels and
       markers. A bespoke display face would have made these four pages look like
       a different company to the homepage they sit behind.
     - HAIRLINES INSTEAD OF CARDS. The old pages were white boxes on beige,
       everywhere, which flattened everything to one level. Rules and generous
       gutters carry the structure now; a box is reserved for something that is
       genuinely a surface (a live demo, a screenshot).
     - ONE INK BAND PER PAGE, at that page's strongest claim, so the beige has a
       spine and the eye has somewhere to land.
     - THE ACCENT IS SPENT ONLY WHERE MONEY MOVES. Not on decoration.

   EVERYTHING IS SCOPED UNDER .fp-page. These pages restyle global classes
   (.eyebrow, .lede, .section-head, .cta-final), and the same classes are used by
   the homepage, pricing and fourteen blog posts. The scope is what keeps this a
   redesign of four pages rather than of the whole site.
   ============================================================================= */

/* ⚠️ EVERY <figure> ON THESE PAGES, ONCE. The UA stylesheet gives a bare
   <figure> `margin: 1em 40px`, which silently eats 80px of width. It cost the
   setup screenshot 80 of 342 available pixels on a phone, and then cost the A/B
   panels again the moment they became <figure>s: 252px columns rendering
   172px cards. Killing it at the page scope means it cannot come back a third
   time on whatever the next figure is. */
.fp-page figure { margin: 0; }

.fp-page {
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --band: #0a1613;
  --band-2: #101f1a;
  --band-rule: rgba(255, 255, 255, .13);
  --band-ink: #e8efeb;
  --band-ink-2: #9db3aa;
  /* On near-black the shipped pine goes muddy; this is the same hue lifted to
     stay legible there, and it is used nowhere else. */
  --accent-lift: #35bd8a;
  --rule: #e0dccf;
  --rule-2: #cfc9b8;
}

/* ---------- shared type voice ---------- */
.fp-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: none;
  border: 0;
  padding: 0;
}
/* A rule, not a bullet: it reads as a ledger's leader line and ties the eyebrow
   to the hairlines that structure the rest of the page. */
.fp-page .eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.fp-page h1 {
  /* Sized to leave the hero's call to action above the fold. The first cut of
     this was clamp(42px, 5.4vw, 72px), which ran the headline to five lines and
     pushed the button off a 1440x900 screen entirely. */
  font-size: clamp(34px, 3.9vw, 52px);
  line-height: 1.03;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 20px 0 0;
  /* `balance` was the cause of the ragged headings, not the cure: it produced
     "It will not recommend / something a / shopper cannot buy", an 11-character
     middle line. `pretty` keeps normal greedy wrapping and only pulls back to
     avoid a short last line, which is what these headlines actually need. */
  text-wrap: pretty;
}
/* The headline is written as two beats, and the second beat is the promise. */
.fp-page h1 .display { display: block; color: var(--accent-ink); }

.fp-page h2 {
  font-size: clamp(27px, 3.3vw, 42px);
  line-height: 1.06;
  letter-spacing: -.028em;
  text-wrap: pretty;
}
.fp-page .section-head { max-width: 640px; margin-bottom: 40px; }
.fp-page .section-head .lede { margin-top: 14px; }
.fp-page .lede { font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.55; }

/* ---------- the signature: a before-and-after ledger line ----------
   The one element every page shares, stating that page's number. It is a
   receipt line: a label, the figure before, the figure after, and the delta. */
.fp-ledger {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 13px;
  margin: 30px 0 0;
  padding: 15px 0 16px;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.fp-ledger__k {
  flex: 1 0 100%;
  font-size: 11px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 9px;
}
.fp-ledger__a {
  font-size: clamp(19px, 2vw, 23px);
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.fp-ledger svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--ink-3);
  align-self: center;
}
.fp-ledger__b {
  font-size: clamp(27px, 3.1vw, 36px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.fp-ledger__d {
  margin-left: auto;
  align-self: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  background: var(--accent);
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
}

/* ---------- hero ----------
   Asymmetric on purpose. The old 50/50 split gave the copy and the demo equal
   billing, which made neither lead; the demo is the argument, so it gets the
   room. */
.fp-hero {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  gap: clamp(34px, 4.6vw, 68px);
  align-items: start;
}
.fp-hero > * { min-width: 0; }
.fp-hero__copy .lede { margin-top: 20px; max-width: none; }
.fp-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: 28px;
}
.fp-hero__note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.fp-hero__note svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); }

@media (max-width: 1000px) {
  .fp-hero { grid-template-columns: 1fr; gap: 34px; }
}
/* SHORT viewports, not narrow ones. A 1366x700 laptop is a real screen and the
   global section padding pushed the hero's primary CTA below the fold there,
   while 1440x900 and 390x844 both passed. Height is the axis that catches it. */
@media (max-height: 800px) and (min-width: 1001px) {
  .fp-hero-sec { padding-top: clamp(14px, 2vh, 26px); }
  .fp-page h1 { margin-top: 12px; }
  .fp-hero__copy .lede { margin-top: 13px; }
  .fp-ledger { margin-top: 18px; padding: 11px 0 12px; }
  .fp-hero__cta { margin-top: 18px; }
  .fp-hero__note { margin-top: 13px; }
}

/* ---------- the ink band: one dark moment per page ---------- */
.fp-band {
  position: relative;
  background: var(--band);
  color: var(--band-ink);
}
/* A faint ledger grid, so the dark band reads as ruled paper rather than a
   flat rectangle. Masked out at the edges so it never becomes a pattern. */
.fp-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--band-rule) 1px, transparent 1px);
  background-size: 100% 46px;
  -webkit-mask-image: radial-gradient(88% 70% at 50% 42%, #000 20%, transparent 82%);
  mask-image: radial-gradient(88% 70% at 50% 42%, #000 20%, transparent 82%);
  opacity: .8;
}
.fp-band .wrap { position: relative; z-index: 1; }
.fp-band h2, .fp-band h3 { color: #fff; }
.fp-page .fp-band .lede { color: var(--band-ink-2); }
.fp-page .fp-band .eyebrow { color: var(--accent-lift); }

/* ---------- proof: ledger columns, not three white boxes ---------- */
.fp-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule-2);
}
.fp-proof__item {
  background: none;
  border: 0;
  border-right: 1px solid var(--rule);
  border-radius: 0;
  padding: 26px 30px 4px 0;
  margin-right: 30px;
}
.fp-proof__item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
/* ⚠️ `.fp-proof__item span` (0,1,1) OUTRANKS `.fp-proof__k` (0,1,0), and the
   stat number IS a <span>, so it inherited the description's 15.5px and grey:
   the headline figures rendered at a fifth of their intended size for weeks.
   Two classes beat one class plus an element, so qualify it. */
.fp-proof__item .fp-proof__k {
  display: block;
  font-family: var(--mono);
  font-size: clamp(38px, 4.2vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fp-proof__item b {
  display: block;
  margin-top: 16px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.fp-proof__item span {
  display: block;
  margin-top: 7px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.fp-band .fp-proof { border-top-color: var(--band-rule); }
.fp-band .fp-proof__item { border-right-color: var(--band-rule); }
.fp-band .fp-proof__item .fp-proof__k { color: var(--accent-lift); }
.fp-band .fp-proof__item span { color: var(--band-ink-2); }

@media (max-width: 900px) {
  .fp-proof { grid-template-columns: 1fr; }
  .fp-proof__item {
    border-right: 0;
    margin-right: 0;
    padding: 22px 0 22px;
    border-bottom: 1px solid var(--rule);
  }
  .fp-proof__item:last-child { border-bottom: 0; }
  .fp-band .fp-proof__item { border-bottom-color: var(--band-rule); }
}

/* ---------- guards: a ruled list, not a chip grid ---------- */
.fp-guard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px;
  border-top: 1px solid var(--rule-2);
}
.fp-guard__item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 19px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font-size: 15.5px;
  line-height: 1.5;
}
.fp-guard__item svg { width: 17px; height: 17px; margin-top: 3px; color: var(--accent); }
.fp-guard__item b { font-weight: 650; letter-spacing: -.005em; }
.fp-guard__item span span { display: block; color: var(--ink-2); margin-top: 3px; }
.fp-band .fp-guard { border-top-color: var(--band-rule); }
.fp-band .fp-guard__item { border-bottom-color: var(--band-rule); color: #fff; }
.fp-band .fp-guard__item svg { color: var(--accent-lift); }
.fp-band .fp-guard__item span span { color: var(--band-ink-2); }
@media (max-width: 760px) { .fp-guard { grid-template-columns: 1fr; } }

/* ---------- placements: a numbered column, because it IS a sequence ----------
   Numbered markers are usually decoration. Here the order is the information:
   these are six positions down one checkout column, in the order a shopper
   meets them, so the figures earn their place. */
.fp-place {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
  border-top: 1px solid var(--rule-2);
}
.fp-place__slot {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font-size: 16px;
}
.fp-place__slot i {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.fp-place__slot.is-default { background: none; border-bottom-color: var(--accent); }
.fp-place__slot.is-default i { color: var(--accent); }
.fp-place__slot.is-default { font-weight: 600; }
.fp-place__slot em {
  margin-left: auto;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 900px) { .fp-place { grid-template-columns: 1fr; } }

/* ---------- steps ---------- */
.fp-steps { list-style: none; margin: 0; padding: 0; counter-reset: fpstep; }
.fp-steps li { position: relative; padding: 0 0 0 44px; margin: 0 0 24px; }
.fp-steps li:last-child { margin-bottom: 0; }
.fp-steps li::before {
  counter-increment: fpstep;
  content: counter(fpstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--accent);
  background: none;
  border: 0;
  width: auto;
  height: auto;
}
.fp-steps b { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.008em; }
.fp-steps span { display: block; margin-top: 5px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.fp-steps--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px 44px;
  margin-top: 44px;
}
.fp-steps--grid li { margin-bottom: 0; }

/* ---------- a real surface: demos and screenshots keep their box ---------- */
.fp-shot {
  margin: 0;
  border: 1px solid var(--rule-2);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 30px 60px -34px rgba(16, 31, 26, .3), 0 6px 16px -10px rgba(16, 31, 26, .12);
}
.fp-shot__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  background: #f4f2ea;
  border-bottom: 1px solid var(--rule);
}
.fp-shot__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-2); }
.fp-shot__bar span {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--ink-3);
}
.fp-shot img { width: 100%; height: auto; display: block; }
/* ⚠️ `.fp-page figure { margin: 0 }` (0,1,1) outranks `.fp-shot--narrow`
   (0,1,0), so the reset that fixed the width silently killed the centring and
   the A/B screenshot sat hard left. Scope this one to win. */
.fp-page .fp-shot--narrow { max-width: 900px; margin-inline: auto; }
/* A dialog screenshot is already a card. Stacking a fake browser bar on top of
   it gave the A/B wizard two frames and a grey lid with rounded corners. */
.fp-shot--bare .fp-shot__bar { display: none; }

.fp-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.fp-split > * { min-width: 0; }
@media (max-width: 1000px) { .fp-split { grid-template-columns: 1fr; } }

/* ---------- the top-up chain ---------- */
.fp-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.fp-chain__step {
  display: inline-flex;
  align-items: center;
  padding: 11px 16px;
  background: none;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
}
.fp-chain__step:first-child { border-color: var(--accent); color: var(--accent-ink); }
.fp-chain__arrow { width: 17px; height: 17px; flex: 0 0 auto; color: var(--ink-3); }
.fp-chain__foot { margin-top: 22px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }

/* ---------- where next ---------- */
.fp-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule-2); }
.fp-next__card {
  display: block;
  padding: 26px 32px 26px 0;
  margin-right: 32px;
  background: none;
  border: 0;
  border-right: 1px solid var(--rule);
  border-radius: 0;
  color: inherit;
  transition: opacity .18s var(--ease);
}
.fp-next__card:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.fp-next__card:hover { transform: none; box-shadow: none; opacity: .62; }
.fp-next__card b { display: block; font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.fp-next__card span { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.fp-next__card em {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.fp-next__card em svg { width: 15px; height: 15px; }
@media (max-width: 900px) {
  .fp-next { grid-template-columns: 1fr; }
  .fp-next__card { border-right: 0; margin-right: 0; padding: 22px 0; border-bottom: 1px solid var(--rule); }
  .fp-next__card:last-child { border-bottom: 0; }
}

/* ---------- closing call to action ----------
   Deliberately NOT a second dark slab. The ink band above is the page's one
   dark moment; the close is paper with a heavy rule, so the button is the
   loudest thing on it. */
.fp-page .cta-final {
  background: none;
  color: inherit;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  padding: 44px 0 0;
  text-align: left;
  max-width: none;
}
.fp-page .cta-final::before { display: none; }   /* the dark band's own glow */
.fp-page .cta-final { text-align: center; }
.fp-page .cta-final h2 { color: var(--ink) !important; max-width: 20ch; margin-inline: auto; }
.fp-page .cta-final .lede { color: var(--ink-2); margin-top: 14px; margin-inline: auto; max-width: 52ch; }
.fp-page .cta-final .btn-row { justify-content: center; margin-top: 28px; }

/* ---------- the live order-bump stage ---------- */
.obd {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--rule-2);
  border-radius: 16px;
  padding: 22px 22px 20px;
  box-shadow: 0 30px 60px -34px rgba(16, 31, 26, .3);
}
.obd__cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.obd__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.obd__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft); }
.obd__reset {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
}
.obd__reset:hover { color: var(--accent-ink); }
.obd__col {
  max-width: 452px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px 20px;
  font-size: 15px;
  color: #1a2233;
}
.obd__h {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #98a0aa;
  margin: 0 0 10px;
}
.obd__li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; line-height: 1.35; }
.obd__li b { font-weight: 500; }
.obd__li em { font-style: normal; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; }
.obd__li--rule { border-top: 1px solid #eceef1; margin-top: 6px; padding-top: 12px; }
.obd__li--tot { border-top: 1px solid #eceef1; margin-top: 6px; padding-top: 12px; font-size: 16px; }
.obd__li--tot b { font-weight: 700; }
.obd__li--tot em { font-size: 19px; font-weight: 600; }
.obd__li--added {
  overflow: hidden;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  color: var(--accent-ink);
  transition: max-height .26s var(--ease), opacity .2s ease, padding .26s var(--ease);
}
.obd.is-on .obd__li--added { max-height: 44px; opacity: 1; padding-top: 7px; padding-bottom: 7px; }
.obd__li--added b { font-weight: 600; }
.obd__amt.is-bumped { animation: obdFlash .62s var(--ease); }
@keyframes obdFlash {
  0% { color: var(--accent-2); transform: translateY(-2px); }
  100% { color: inherit; transform: none; }
}
.obd__pay {
  width: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  border: 0;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font: 700 16px/1.2 var(--font);
  font-variant-numeric: tabular-nums;
  cursor: default;
  text-align: center;
}
.obd__lock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #98a0aa;
}
.obd__lock svg { width: 12px; height: 12px; }
.obd__out {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-2);
  min-height: 22px;
}
.obd__out b { color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.obd__hint { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); }
.obd__hint svg { width: 15px; height: 15px; color: var(--accent); }
.obd:not(.is-on) .obd__hint { animation: obdNudge 2.8s ease-in-out infinite; }
@keyframes obdNudge {
  0%, 88%, 100% { transform: none; }
  92% { transform: translateX(-3px); }
  96% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .obd:not(.is-on) .obd__hint { animation: none; }
  .obd__amt.is-bumped { animation: none; }
  .obd__li--added { transition: none; }
}
@media (max-width: 620px) {
  .obd { padding: 16px 12px 16px; }
  .obd__cap { margin-bottom: 12px; }
  .obd__col { padding: 14px 12px 16px; }
  .obd__li { padding: 5px 0; }
  .obd__li--rule, .obd__li--tot { padding-top: 10px; margin-top: 4px; }
  /* Same specificity as the rule above and later in the sheet, so the collapsed
     row has to be re-asserted here or it re-opens to 10px. */
  .obd__li--added { padding-top: 0; padding-bottom: 0; }
  .obd.is-on .obd__li--added { padding-top: 5px; padding-bottom: 5px; }
  .obd__out { margin-top: 14px; }
}

/* ---------- the live side-cart stage ---------- */
.fbs {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--rule-2);
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 30px 60px -34px rgba(16, 31, 26, .3);
}
.fbs__frame {
  position: relative;
  width: 100%;
  height: 640px;
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.fbs__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.fbs__out {
  margin-top: 15px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-2);
}
@media (max-width: 620px) {
  .fbs { padding: 14px 12px 12px; }
  .fbs__frame { height: 560px; }
}

/* ---------- the funnel ----------
   IT HAS TO NARROW. The first version was a row of left-aligned bars in grey
   tracks, which is a bar chart wearing the word "funnel": nothing about it
   showed shoppers leaving. Now each stage is CENTRED, so the silhouette closes
   in down the page, and the space between two stages is a real taper cut to
   both widths, so the loss is a shape you can see rather than a number you have
   to read. The taper is a clip-path on known percentages, so it is exact at any
   size and needs no script.  */
.fpf {
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 16px;
  padding: 26px 26px 22px;
  box-shadow: 0 30px 60px -34px rgba(16, 31, 26, .3);
}
.fpf__row,
.fpf__gap {
  display: grid;
  grid-template-columns: minmax(0, 152px) minmax(0, 1fr) 74px;
  gap: 0 20px;
}
.fpf__row { align-items: center; }
.fpf__label { font-size: 15px; font-weight: 550; line-height: 1.25; letter-spacing: -.005em; }
.fpf__track {
  position: relative;
  height: 46px;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.fpf__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: calc(var(--w) * 1%);
  border-radius: 8px;
  background: linear-gradient(180deg, #17916a, #0f7a5a);
  opacity: 1;
}
/* The outcome, not another stage: the last bar is ringed so the eye stops. */
.fpf__row--paid .fpf__bar {
  background: linear-gradient(180deg, #0f7a5a, #0b5b43);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.fpf__row--worst .fpf__bar { background: linear-gradient(180deg, #17916a, #0f7a5a); }
.fpf__n {
  text-align: right;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.fpf__taper {
  grid-area: 1 / 2;
  height: 40px;
  background: linear-gradient(180deg, rgba(15, 122, 90, .28), rgba(15, 122, 90, .09));
  clip-path: polygon(
    calc(50% - var(--a) * 0.5%) 0%,
    calc(50% + var(--a) * 0.5%) 0%,
    calc(50% + var(--b) * 0.5%) 100%,
    calc(50% - var(--b) * 0.5%) 100%
  );
}
/* The loss sits in the label gutter, right-aligned against the taper, so it can
   never overflow a narrow wedge the way a centred label would. */
.fpf__loss {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: end;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fpf__gap--worst .fpf__taper {
  background: linear-gradient(180deg, rgba(183, 121, 31, .38), rgba(183, 121, 31, .10));
}
.fpf__gap--worst .fpf__loss { color: var(--amber); }
/* Only the widest wedge is roomy enough to carry a label on the shape itself,
   and it is the one worth naming. */
.fpf__mark {
  grid-area: 1 / 2;
  align-self: center;
  justify-self: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--amber);
  border-radius: 4px;
  padding: 4px 9px;
}

.fpf__verdict {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.55;
}
.fpf__verdict svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; color: var(--amber); }
.fpf__verdict b { display: block; letter-spacing: -.01em; }
.fpf__verdict span span { color: var(--ink-2); }

@media (max-width: 760px) {
  .fpf { padding: 20px 16px 18px; }
  .fpf__row, .fpf__gap { grid-template-columns: minmax(0, 1fr) 68px; }
  .fpf__label { grid-column: 1 / 3; margin-bottom: 4px; }
  .fpf__track { grid-column: 1 / 2; height: 38px; }
  .fpf__n { align-self: center; }
  .fpf__taper { grid-area: 1 / 1; height: 30px; }
  /* Both used to land dead-centre of the same cell, so the chip covered the
     percentage entirely. Park one at each end of the wedge instead. */
  .fpf__loss { grid-area: 1 / 1; align-self: center; justify-self: start; text-align: left; }
  .fpf__mark { grid-area: 1 / 1; align-self: center; justify-self: end; }
  .fpf__gap:not(.fpf__gap--worst) .fpf__loss { color: var(--ink-2); }
}

/* ---------- two variants and a verdict ----------
   THE PANELS SHOW THE ACTUAL CHECKOUTS. They used to be stacks of grey rounded
   rectangles, which is a wireframe placeholder: it reads as unfinished, and it
   asked the visitor to imagine the thing being tested. These are the real
   neutral-branded renders the templates gallery uses, cropped to the top so the
   difference under test is the visible part: a step rail on one, a single form
   on the other.  */
.fpv {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--rule-2);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 30px 60px -34px rgba(16, 31, 26, .3);
}
.fpv__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fpv__col { position: relative; }
.fpv__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
.fpv__card--b { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fpv__steps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px 12px 9px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fpv__steps span { white-space: nowrap; }
.fpv__steps span.is-on { color: var(--accent-ink); }
.fpv__steps i { flex: 1; height: 1px; background: var(--line-2); min-width: 6px; }
/* height:auto is load-bearing. The <img> carries width="1440" height="900" for
   layout stability, and without height:auto that HTML height wins over
   aspect-ratio: the panels rendered ~1600px tall, one zoomed slice each. */
.fpv__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}
.fpv__tag {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fpv__tag--win { color: var(--accent-ink); }
.fpv__tag--win svg { width: 14px; height: 14px; }

/* The crown sits ON the winning panel. Overhanging the top of the stage put it
   under the sticky nav, where it collided with the header button. */
.fpv__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px -6px rgba(11, 91, 67, .55);
}
.fpv__badge svg { width: 13px; height: 13px; }

.fpv__result {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-2);
  text-align: left;
}
.fpv__result div span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fpv__result div b {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.fpv__result div:last-child b { color: var(--accent-ink); }
@media (max-width: 560px) {
  .fpv { padding: 16px 14px 16px; }
  .fpv__cards { grid-template-columns: 1fr; }
  .fpv__result { grid-template-columns: 1fr; gap: 14px; }
}


/* ---------- confidence ladder ---------- */
.fp-ladder { background: none; border: 0; border-top: 1px solid var(--band-rule); border-radius: 0; padding: 22px 0 0; }
.fp-ladder__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fp-ladder__head b {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--band-ink-2);
}
.fp-ladder__head em {
  font-family: var(--mono);
  font-style: normal;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--accent-lift);
  font-variant-numeric: tabular-nums;
}
.fp-ladder__track { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.fp-ladder__fill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--accent-lift); }
.fp-ladder__key {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--band-ink-2);
}
.fp-ladder__foot { margin: 18px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--band-ink-2); }

/* ---------- honest-labelling comparison, on the band ---------- */
.fp-band .compare__card {
  background: rgba(255, 255, 255, .04);
  border-color: var(--band-rule);
}
.fp-band .compare__card--good {
  background: linear-gradient(180deg, rgba(53, 189, 138, .12), rgba(53, 189, 138, .03));
  border-color: rgba(53, 189, 138, .38);
  box-shadow: none;
}
.fp-band .compare__tag { color: var(--band-ink-2); font-family: var(--mono); letter-spacing: .15em; }
.fp-band .compare__card--good .compare__tag { color: var(--accent-lift); }
.fp-band .compare__card li { color: var(--band-ink-2); }
.fp-band .compare__card li b { color: #fff; }
.fp-band .compare__card--good li svg { color: var(--accent-lift); }

/* ---------- the amber aside ---------- */
.fp-page .ft-note {
  background: none;
  border: 0;
  border-left: 2px solid var(--amber);
  border-radius: 0;
  padding: 4px 0 4px 20px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.fp-page .ft-note svg { color: var(--amber); }

/* A loss is not a gain. The analytics page's ledger states what the checkout
   sheds, so its delta wears the warning colour rather than the accent, which is
   reserved on these pages for money going up. */
.fp-ledger__d--loss { background: var(--amber); }

/* The closing call to action used to sit on a dark slab, so its secondary
   button was painted white. Turning the slab to paper left that rule standing
   and the button measured 1.13:1 against the beige, i.e. invisible. Repaint it
   for the surface it is actually on. */
.fp-page .cta-final .btn--ghost {
  color: var(--ink);
  background: transparent;
  border-color: var(--line-2);
}
.fp-page .cta-final .btn--ghost:hover { border-color: var(--ink); background: rgba(16, 31, 26, .04); }

/* A funnel's opening count is not a superseded price, so it does not get the
   struck-through treatment the money ledgers use. Same component, honest
   semantics. */
.fp-ledger--flow .fp-ledger__a { text-decoration: none; }
.fpf__drop { line-height: 1.45; }

/* ---------- the icon set on the page ----------
   The page's own icon sits in its eyebrow, replacing the leader rule, so a page
   is visibly the same thing as the menu item that led to it. */
.fp-page .eyebrow .eyebrow__ic { width: 17px; height: 17px; color: var(--accent); }
.fp-page .eyebrow:has(.eyebrow__ic)::before { display: none; }

/* Guard icons carry meaning, so they are drawn per row rather than repeating one
   tick four times: a cart, a struck-through box, an unpicked swatch, a counter. */
.fp-guard__item svg { width: 19px; height: 19px; margin-top: 2px; color: var(--accent); }
.fp-band .fp-guard__item svg { color: var(--accent-lift); }

.fp-next__ic { display: block; width: 22px; height: 22px; color: var(--ink-3); margin-bottom: 14px; }
.fp-next__card:hover .fp-next__ic { color: var(--accent); }