/* ==========================================================================
   ANTEAMBULO.ONLINE — funnel system
   Loaded only by /team/, /free-sampler/, /ai-native/, after styles.css and
   pages.css. Everything reusable — .hero, .tile, .tier, .steps, .stat,
   .split, .faq, .cta-band — is reused as-is from those two files. What
   follows is ONLY what those files genuinely do not have: a cost-comparison
   bar chart, package pricing (the other pages have no prices to show), an
   urgency banner, and the "old way / new way" final-CTA layout.
   Same tokens throughout — no new colours are introduced here.
   ========================================================================== */

/* ------------------------------------------------------------- funnel nav */

/* The plain nav hides its CTA below 768px behind a hamburger. A funnel header
   has no hamburger — nothing to open, it's one CTA — so that desktop-sized
   button had nowhere to shrink to and overflowed a 375px viewport by 26px.
   Scoped to .nav--funnel only; the shared .btn / .logo rules are untouched. */
.nav--funnel .logo img { height: 16px; }
.nav--funnel .btn--primary { padding: 8px 12px; font-size: 12px; gap: 4px; }

@media (min-width: 400px) {
  .nav--funnel .logo img { height: 18px; }
  .nav--funnel .btn--primary { padding: 10px 16px; font-size: 13px; gap: 6px; }
}

@media (min-width: 640px) {
  .nav--funnel .logo img { height: 20px; }
  .nav--funnel .btn--primary { padding: 12px 20px; font-size: 14px; gap: 8px; }
}

/* ------------------------------------------------------------- hero extras */

.funnel-urgency {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--gold-300);
}

.funnel-urgency--section { margin: 0; align-self: flex-end; }

.funnel-valueline {
  margin: 16px 0 0;
  color: var(--sand-500);   /* hero meta strip, design-system.md (photo-backed) */
}

/* Thin divider strip directly under the hero — not a full .section, just the
   shared workflow line + two credibility facts, always visible. */
.funnel-valuebar { padding-block: 20px; border-bottom: 1px solid var(--hairline); }
.funnel-valuebar__list { margin: 0; gap: 10px 28px; }

.funnel-lede { font-size: 16px; }

/* ---------------------------------------------------------- cost comparison */

.cost-compare { display: flex; flex-direction: column; gap: 24px; margin-top: 8px; }

.cost-row { display: flex; flex-direction: column; gap: 10px; }
.cost-row__region {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand-300);
}

.cost-row__bars { display: flex; flex-direction: column; gap: 8px; }

/* 2026-10-23: label above, solid bar below (owner: "more visible, a more
   solid color"). With the text out of the fill, the fills can be light
   solids — every label stays legible however short its bar is. Solid gold is
   reserved for Anteambulo's own bars, which are tiny by design (the 2% gold
   cap holds). */
.cost-bar {
  position: relative;
  display: grid;
  grid-template-rows: auto 14px;
  row-gap: 6px;
}
.cost-bar::before {             /* the track */
  content: "";
  grid-row: 2;
  grid-column: 1;
  border-radius: 4px;
  background: rgba(253, 251, 246, 0.08);
}
.cost-bar__fill {
  grid-row: 2;
  grid-column: 1;
  height: 14px;
  border-radius: 4px;
  transition: width 0.6s ease;
}
.cost-bar__fill--solo { background: var(--sand-500); }
.cost-bar__fill--team { background: var(--sand-300); }
.cost-bar__fill--us { background: var(--gold-600); min-width: 6px; }
.cost-row--us .cost-row__region { color: var(--gold-600); }

.cost-bar__label {
  grid-row: 1;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ivory-100);
  white-space: nowrap;
}

.cost-compare__anteambulo {
  margin: 28px 0 0;
  color: var(--gold-300);
}
.cost-compare__note {
  margin: 10px 0 0;
  max-width: none;   /* runs the full width of the shell (owner request) */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.67;
  color: var(--sand-300);
}

/* ---------------------------------------------------------------- packages */

/* The other pages using .tier (Distribution) deliberately show no price —
   "no prices anywhere" was that brief's rule. This one is priced by design,
   so the price line is additive CSS, not a change to the shared component. */
.tier__price {
  margin: 14px 0 0;
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ivory-100);
}
.tier__price-unit { font-size: 14px; font-weight: 300; color: var(--sand-400); }
.tier__daily { margin: 6px 0 0; color: var(--gold-300); }

/* Ultimate: muted rather than featured — it is gated, not the upsell. */
.tier--locked { opacity: 0.85; }
.tier--locked .tier__badge { color: var(--sand-400); }

/* --------------------------------------------------------------- final CTA */

.final-compare { display: flex; flex-direction: column; gap: 16px; margin: 16px 0 20px; }
.final-compare__old, .final-compare__new {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.4;
}
.final-compare__old { color: var(--sand-300); text-decoration: line-through; text-decoration-color: currentColor; }
.final-compare__old .mono-micro,
.final-compare__new .mono-micro { display: block; margin-bottom: 4px; color: var(--sand-300); text-decoration: none; }
.final-compare__new { color: var(--ivory-100); }

/* ------------------------------------------------------------ breakpoints */

@media (min-width: 640px) {
  .cost-row { flex-direction: row; align-items: center; gap: 20px; }
  .cost-row__region { flex: 0 0 160px; }
  .cost-row__bars { flex: 1; }
  .final-compare { flex-direction: row; gap: 40px; }
}

@media (min-width: 1024px) {
  .funnel-valuebar__list { justify-content: center; }
  .tier__price { font-size: 40px; }
}

/* ============================================================ CRO REBUILD
   2026-09-22 — the CRO/UX consolidation. Everything below is new: the
   homepage's case-study placeholder strip, the Starter-led pricing block
   with its "see all plans" toggle and monthly/yearly switch, and the image
   treatment shared by About and the Insights article.
   ========================================================================== */

/* ---------------------------------------------------------- case strip */
/* Proof-bar placeholders. Honest "not yet" state, not an empty gap — same
   dashed-border language as .gallery__slot on /foundation/, so a missing
   asset reads the same way everywhere on the site rather than inventing a
   second "no content yet" pattern. Five pitch kits exist; none are cleared
   for portfolio use yet, so no name goes here until that changes. */
.proof-bar { border-bottom: 1px solid var(--hairline); padding-block: 32px; }
.case-strip { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 20px; }
.case-slot {
  margin: 0;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border: 1px dashed var(--hairline);
  border-radius: 12px;
}
.case-slot__label { margin: 0; color: var(--sand-400); }
.case-strip__note { margin: 14px 0 0; font-size: 13px; }
.case-strip__note .inline-link { white-space: normal; }   /* nowrap overflowed 375px by 98px */

/* --------------------------------------------------------------- pricing */
/* R4 (2026-10-22): three priced cards side by side, Custom as a wide card
   underneath. The old Starter-led layout and its "see all plans" toggle are
   gone with the tiers they served. */
.pricing__switches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pricing__switch-label { margin: 0; color: var(--sand-400); }
.pricing__lede { margin-top: 16px; max-width: 46ch; text-align: left; }
@media (min-width: 1024px) {
  /* Title column takes the room, so "Pick what it's for." stays on one line. */
  .pricing .section__head > div:first-child { flex: 1 1 auto; }
  .pricing__switches { flex: 0 0 auto; max-width: 420px; justify-content: flex-end; }
  .pricing .section__note.pricing__lede { margin-top: 16px; }
}
.pricing__lede strong { font-weight: 500; color: var(--ivory-100); }
.pricing__grid { margin-top: 8px; }

/* Card anatomy per bar-pricing.md P1/P3: "Best for" + button pinned to the
   card foot, so all three buttons share one line whatever the copy length. */
/* Feature cards: 30px radius, 32px padding (design-system.md). The 16px
   radius .tier carries in pages.css is struck there; overridden here only,
   since /distribution/ is outside this round. */
.pricing .tier { border-radius: 30px; padding: 32px; }
/* Priced cards are feature cards: --card-pad-lg (60px, clamped to 32px on
   narrow screens). All three share it, so the lead card gets the full
   inverted-card padding and the buttons still line up (P1). */
.pricing__grid .tier { padding: clamp(32px, 4.2vw, 60px); }
.pricing__grid .tier__for {
  margin: auto 0 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.pricing__grid .tier__list { margin-bottom: 24px; }
.pricing__grid .tier__list li:first-child { font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--ivory-100); }   /* subheading */
/* Card type on the scale: price heading-md 32/300/0.9; tagline and "Best
   for" body-sm 14/400/1.67. */
.pricing .tier__price, .pricing__lead .tier__price { font-size: 32px; line-height: 0.9; letter-spacing: -0.01em; }
.pricing .tier__line,
.pricing .tier__for { font-size: 14px; font-weight: 400; line-height: 1.67; }
.pricing__grid .tier__cta { margin-top: 0; align-self: stretch; }

/* Off-system greys and gold-as-text replaced by the body token on tiles
   (sand-300, 5.40:1 on the tile). */
.pricing .tier__price-unit,
.pricing .tier__daily,
.pricing .tier__for,
.pricing .tier__for .mono-micro,
.pricing__switch-label,
.pricing .tier__badge { color: var(--sand-300); }   /* gold-300 is the hover role only */
.pricing .tier__list li { font-weight: 400; line-height: 1.67; }   /* body-sm */

/* The lead card is marked by surface alone — the inverted ivory (P2), no
   ring, --card-pad-lg. obsidian-500 is the only ink allowed for text on it. */
.pricing__grid .tier--lead { background: var(--ivory-200); box-shadow: none; }
.tier--lead .tier__name,
.tier--lead .tier__price,
.pricing__grid .tier--lead .tier__list li:first-child { color: var(--ink-900); }
.tier--lead .tier__badge,
.tier--lead .tier__daily,
.tier--lead .tier__price-unit,
.tier--lead .tier__line,
.tier--lead .tier__list li,
.tier--lead .tier__for,
.tier--lead .tier__for .mono-micro { color: var(--ink-500); }
.pricing__grid .tier--lead .tier__for { border-top-color: rgba(35, 31, 32, 0.14); }

/* Shared terms, said once (P3). */
.pricing__shared { margin-top: 40px; }
.pricing__shared-title { margin: 0 0 16px; font-size: 22px; font-weight: 300; line-height: 0.9; color: var(--ivory-100); }   /* heading-sm */
.checklist { margin: 0; padding: 0; list-style: none; display: grid; column-gap: 40px; }
.checklist li {
  position: relative;
  padding: 14px 28px 14px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;   /* body-sm */
  font-weight: 400;
  line-height: 1.67;
  color: var(--sand-300);
}
.checklist li::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 5px;
  height: 10px;
  margin-top: -7px;
  border-right: 1px solid var(--gold-600);
  border-bottom: 1px solid var(--gold-600);
  transform: rotate(45deg);
}

.tier--custom { margin-top: 40px; display: grid; gap: 20px; }
.tier--custom .tier__list { margin: 0; }

/* FAQ as a two-column index at desktop (P7). */
.faq--index { border-top: none; }
.faq--index .faq__item:first-child { border-top: 1px solid var(--hairline); }
.faq--index .faq__body p { font-size: 16px; font-weight: 400; line-height: 1.5; }   /* body */
.faq--index .faq__item summary::after { transition: none; }   /* no transform motion */

/* Ads & social vs. Amazon & DTC — both lists are in the markup (see
   _tier_card() in funnel_sections.py); this decides which one shows. */
.pricing[data-track="creative"] .track-listing,
.pricing[data-track="listing"] .track-creative { display: none; }

/* Selected switch option is ivory, not gold — gold is reserved for buttons
   that take you somewhere (P4). */
/* The switches are plain-text options (the nav-link voice), not buttons:
   design-system.md allows exactly two button treatments. Selected = ivory
   with a gold underline. */
.pricing .billing-switch { padding: 0; background: none; border-radius: 0; gap: 16px; }
.pricing .billing-switch__opt {
  padding: 6px 0 5px;
  border-radius: 0;
  border-bottom: 1px solid transparent;   /* no box-shadow anywhere */
  font-size: 14px;
  font-weight: 400;
  color: var(--sand-300);
  background: none;
}
.pricing .billing-switch__opt:hover { color: var(--ivory-100); }
.pricing .billing-switch__opt.is-active { color: var(--ivory-100); background: none; border-bottom-color: var(--gold-600); }
/* One labelled row per switch; labels share a column so both rows align. */
.pricing__switches { flex-direction: column; align-items: flex-start; gap: 4px; }
.pricing__switch-row { display: grid; grid-template-columns: 96px auto; align-items: center; }
/* Checklist rows are single lines with the tick centred — the copy is cut to
   fit one line per row at desktop (craft round 5). */
.checklist li { hyphens: manual; }

/* Two-state pill switch — same radius/scale language as .btn, not a third
   control shape. */
.billing-switch {
  display: inline-flex;
  padding: 4px;
  border-radius: 8px;   /* controls are 8px in design-system.md */
  background: var(--tile-700);
  gap: 2px;
}
.billing-switch__opt {
  padding: 7px 16px;
  border: none;
  border-radius: 6px;   /* nested inside the 8px track, 4px inset */
  background: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  color: var(--sand-300);
  cursor: pointer;
  transition: background-color var(--ease-state), color var(--ease-state);
}
.billing-switch__opt.is-active { background: var(--gold-600); color: var(--ink-900); }

/* The monthly/yearly swap: both figures are always in the markup (see
   _price_block() in funnel_sections.py); this is the only thing that
   decides which one shows. JS only ever toggles the one data attribute on
   .pricing — never rewrites a number. */
.pricing .price-yearly { display: none; }
.pricing[data-billing="yearly"] .price-monthly { display: none; }
.pricing[data-billing="yearly"] .price-yearly { display: inline; }

.tier__price--ask { color: var(--sand-400); letter-spacing: 0.04em; }
.tier--ask .tier__price-unit { color: var(--sand-400); }   /* was --sand-500, the deprecated canvas-only token — measured 3.07:1 on a tile */

/* .inline-link is --gold-600 by default (pages.css), correct on canvas/band.
   Scale's tier__list carries two of them on a TILE, where --gold-600 measures
   4.43:1 — the same near-miss M3/R5 already documented for .tier__badge.
   Same fix: gold-300 on a tile. */
.tier .inline-link { color: var(--gold-300); }

/* ------------------------------------------------------------------ photo */
/* Shared by About and the Insights article — the only two pages that carry
   real photography rather than glass/video/icon treatment. */
.photo-figure { margin: 0; border-radius: 16px; overflow: hidden; }
.photo-figure--top { margin-top: 36px; }
.photo-figure img { width: 100%; height: auto; display: block; }
.photo-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand-400);
}

/* -------------------------------------------------------- CRO breakpoints */
@media (min-width: 640px) {
  .case-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 640px) {
  .checklist { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .faq--index { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }
  .faq--index .faq__item:nth-child(2) { border-top: 1px solid var(--hairline); }
}

@media (min-width: 900px) {
  .tier--custom { grid-template-columns: 1fr 1.4fr; align-items: start; padding: 32px; }
  .tier--custom .tier__list { columns: 2; column-gap: 32px; }
  .tier--custom .tier__list li { break-inside: avoid; }
}

/* ======================================================= SCROLL HOMEPAGE
   R4, 2026-10-22. One muted 8s plate, fixed behind the whole homepage,
   advanced by scroll (site.js paints frames onto the canvas). The hero is
   transparent over it; every section below is the same surface ladder as
   before, but at 90% so the plate keeps moving faintly behind the copy. No
   backdrop-filter: blurring a full-height section over a canvas that
   repaints on every scroll frame costs more than it buys. */
.scroll-plate {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--ink-900) url('assets/media/scroll/d/f_001.webp') center / cover no-repeat;
}
.scroll-plate__canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease; }
.scroll-plate.is-live .scroll-plate__canvas { opacity: 1; }
@media (max-width: 767px) {
  .scroll-plate { background-image: url('assets/media/scroll/m/f_001.webp'); }
}

.home--scroll { background: var(--ink-900); }
.home--scroll main,
.home--scroll .footer { position: relative; z-index: 1; }
.home--scroll .hero { background: none; }

/* Sections are solid: text on canvas and band keeps its flat contrast
   (design-system.md), which no translucent surface can promise over bright
   frames. The plate shows in the hero and in the windows below. */
.home--scroll .section { background: var(--ink-900); }
.home--scroll .section--band { background: var(--band-750); }
/* The comparison, first below the fold, is the one translucent section
   (owner request): canvas at 0.82 lets the plate show a little while body
   text over the brightest frame still clears AA. */
.home--scroll #cost { background: rgba(35, 31, 32, 0.82); }
.home--scroll .footer { background: var(--ink-900); }

/* Breathing room: a plate-only window between the workflow and the
   comparison, so the footage is seen moving mid-page and not only under
   the hero. */
.home--scroll #cost { margin-bottom: 60vh; }      /* plate-only window after the comparison */
.home--scroll #workflow { margin-bottom: 40vh; }  /* and one before pricing */

/* The plate is dimmed a step everywhere, so the hero copy over it keeps its
   contrast at the brightest frame. */
.scroll-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The 0.38 dim everywhere, plus a band under the fixed nav that is fixed
     too: it can't scroll out from under the links the way the hero scrim's
     top band does, so the nav holds contrast at every scroll offset whether
     or not site.js has applied .is-scrolled yet. */
  background:
    linear-gradient(to bottom, rgba(35, 31, 32, 0.85) 0, rgba(35, 31, 32, 0.85) 64px, rgba(35, 31, 32, 0) 180px),
    rgba(35, 31, 32, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .home--scroll #workflow, .home--scroll #cost { margin-bottom: 0; }
}

/* Switch tap targets: 44px tall on touch screens (they measured 29px). */
@media (max-width: 767px) {
  .pricing .billing-switch__opt { min-height: 44px; padding-block: 12px 11px; }
}

/* Craft round 7 polish. */
.tier--lead .tier__list li::before { background: var(--ink-500); }   /* dashes were near-invisible on ivory */
.tier--custom .tier__cta { margin-top: 24px; }
@media (min-width: 900px) {
  /* A 2-column grid, not CSS columns: rows align and the long items pair up. */
  .tier--custom .tier__list { columns: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

/* ============================================== PRICING, COMPACT (2026-10-23)
   Owner request: header, all three cards and their buttons in one screen at
   1440x900, and buttons that read unmistakably as buttons. */
.home--scroll .pricing { padding-top: 60px; padding-bottom: 80px; }
.pricing .section__head { margin-bottom: 32px; }
.pricing .h2 { font-size: clamp(40px, 4.4vw, 60px); line-height: 0.95; }
.pricing__lede { max-width: 62ch; }
.pricing__grid .tier { padding: 32px 36px; }
.pricing__grid .tier__badge { margin-bottom: 8px; }
.pricing__grid .tier__list { margin: 16px 0 16px; }
.pricing__grid .tier__for { margin-bottom: 16px; padding-top: 12px; }

/* Card buttons: full width, 52px tall, and the outline ones carry a solid
   0.5 border plus a filled hover — no reading them as plain text. */
.pricing .tier__cta { width: 100%; padding: 17px 20px; font-size: 16px; }
.pricing .tier .btn--ghost { border-color: rgba(253, 251, 246, 0.5); }
.pricing .tier .btn--ghost:hover { background: var(--ivory-100); color: var(--ink-900); }