/* Scout CTA — lives in assets/ so the token gate's non-recursive sweep
   does not scan it. Palette stays inside the Aprilia red family: the
   halo is a sweep of red light, never a rainbow.

   Everything else leans on the house system (h2, .lede, --s-*, .btn).
   This file adds exactly one new thing (the halo button) and one wrapper
   for the band around it. No new type scale, no new padding scale. */

:root {
  --red-dark:   #4a000e;
  --red-deep:   #a3001f;
  --red-core:   #e4002b;
  --red-bright: #ff2e55;
  --red-glow:   #ff8aa0;
}

@property --red-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ---------- Band ---------- */
/* Width hugs its content (fit-content) so the right side is never dead
   space. On mobile it collapses to the full width of its wrap parent.
   Border is a 1px --accent frame plus a soft red outer glow so the box
   reads as lit by the button inside it, matching the house `.band` tone. */

/* Row that pairs the free CTA (left) with the $97 upsell card (right).
   One column at mobile, two equal columns from 820px up. */
.scout-row {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 820px) {
  .scout-row { grid-template-columns: 1fr 1fr; }
}

.scout-cta {
  position: relative;
  background: var(--surface-sunk);
  border: 1px solid var(--accent);
  border-radius: var(--r-panel);
  padding: var(--s-6);
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--accent-wash),
    0 10px 30px -14px rgba(228, 0, 43, 0.55);
  display: flex;
  flex-direction: column;
}
/* This card used to sit beside a second one and `margin-top: auto` kept their
   buttons on the same line. There is only one card now, so auto resolves to
   zero and the button crowds the last bullet. The row keeps its own gap. */
.scout-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 100% at 0% 0%, var(--accent-wash), transparent 60%);
  pointer-events: none;
}
.scout-cta > * { position: relative; }
.scout-cta h2   { margin: 0; }

/* Scan-friendly bullets replace the lede paragraph. One line per fact. */
.scout-cta__list {
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-2);
  color: var(--ink-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-tight);
}
.scout-cta__list li {
  position: relative;
  padding-left: var(--s-5);
}
.scout-cta__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
}

.scout-cta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-5);
}


/* Small secondary line under the scout-cta row — routes "want more?" to Gumroad. */
.scout-cta__after {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-3);
  line-height: var(--lh-tight);
}
.scout-cta__after .link { margin-left: var(--s-2); }

/* ---------- Split: scout teaser (left) | simple free-stuff button (right) ---------- */
.scout-cta__split { display: grid; grid-template-columns: 1fr 1px auto; column-gap: var(--s-6); align-items: center; }
.scout-cta__rule { align-self: stretch; background: var(--rule); }
.scout-cta__aside { display: grid; gap: var(--s-3); justify-items: start; }
.scout-cta__aside-label { margin: 0; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }
@media (max-width: 760px) {
  .scout-cta__split { grid-template-columns: 1fr; column-gap: 0; row-gap: var(--s-5); }
  .scout-cta__rule { display: none; }
  .scout-cta__aside { border-top: 1px solid var(--rule); padding-top: var(--s-5); justify-items: start; }
}

/* ---------- Halo button ---------- */
/* Uses the house .btn padding/radius/font (apply both classes:
   `class="btn btn--accent btn-halo"`). The halo and the outside glow
   are red-only. Rotating conic needs @property so the gradient can
   actually animate; otherwise CSS steps through it discretely. */

.btn-halo {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.btn-halo::before,
.btn-halo::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from var(--red-angle),
    var(--red-dark), var(--red-deep), var(--red-core),
    var(--red-bright), var(--red-glow), var(--red-bright),
    var(--red-core), var(--red-deep), var(--red-dark));
  animation: red-spin 5s linear infinite;
  pointer-events: none;
}
.btn-halo::before {
  z-index: -1;
  padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.btn-halo::after {
  z-index: -2;
  inset: -8px;
  filter: blur(12px);
  opacity: 0.5;
}
.btn-halo:hover::after { opacity: 0.7; }

@keyframes red-spin        { to { --red-angle: 360deg; } }

/* ---------- Paid upsell card (sits next to the free one) ----------
   Visually quieter: ink-raised surface, no accent border or glow, so the
   free CTA stays the dominant surface. Price is the hero number. */
.scout-upsell-card {
  position: relative;
  background: var(--ink-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
}
.scout-upsell-card h2 { margin: 0; }
.scout-upsell-card .lede { margin: var(--s-3) 0 0; max-width: none; }

/* Small eyebrow sits where the big price used to; price is now in the CTA. */
.scout-upsell-card__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.scout-upsell-card__tag .dot { background: var(--ink-3); }

/* Price lives inside the CTA button, same visual weight as the label. */
.btn-with-price {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.btn-with-price__amt {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.btn-with-price__sep {
  opacity: 0.55;
}

.scout-upsell-card__list {
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-2);
  color: var(--ink-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-tight);
}
.scout-upsell-card__list li {
  position: relative;
  padding-left: var(--s-5);
}
.scout-upsell-card__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--ink-3);
  border-radius: 999px;
}

.scout-upsell-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-top: auto;
  padding-top: var(--s-5);
}
.scout-upsell-card__guarantee {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-4);
}

/* .btn--ink is designed for use inside a .band (where it flips to white
   bg + dark text). Our card is a dark surface too, so re-apply the flip. */
.scout-upsell-card .btn--ink,
.scout-tier .btn--ink {
  background: var(--on-ink);
  color: var(--ground);
}
.scout-upsell-card .btn--ink:hover,
.scout-tier .btn--ink:hover {
  background: var(--surface-alt);
  color: var(--on-ink);
}

/* ---------- Side-by-side tier comparison (free vs paid) ---------- */

/* Rendezvous-of-pain line above the two tiers. Supravva voice,
   concrete, verb-first. */
.scout-pitch {
  margin: var(--s-7) auto var(--s-4);
  max-width: 56ch;
  text-align: center;
  color: var(--ink-2);
  font-size: var(--fs-lede);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.scout-tiers {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  margin-top: var(--s-7);
}
.scout-pitch + .scout-tiers { margin-top: var(--s-4); }
@media (min-width: 820px) {
  .scout-tiers { grid-template-columns: 1fr 1fr; }
}
/* Three tiers need more room than two before they stop being readable. */
@media (min-width: 900px) {
  .scout-tiers--three { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
  .scout-tiers--three .scout-tier { padding: var(--s-5); }
}

/* Line that introduces the tier row. */
.scout-tiers__head {
  margin: var(--s-7) 0 0;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--fs-meta);
}
.scout-tiers__head + .scout-tiers { margin-top: var(--s-4); }

/* Price, set apart from the heading so the three are scannable in a row. */
.scout-tier__price {
  margin: var(--s-3) 0 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}
.scout-tier__price b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.scout-tier__price span {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.scout-tier--paid .scout-tier__price b { color: var(--accent-text); }

.scout-tier {
  position: relative;
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.scout-tier--free {
  border-color: var(--rule);
}
.scout-tier--paid {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent-wash),
    0 10px 30px -14px rgba(228, 0, 43, 0.55);
}
.scout-tier--paid::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 100% at 0% 0%, var(--accent-wash), transparent 60%);
  pointer-events: none;
}
.scout-tier > * { position: relative; }

.scout-tier__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.scout-tier--paid .scout-tier__tag { color: var(--accent-text); }
.scout-tier--paid .scout-tier__tag .dot { background: var(--accent); }
.scout-tier--free .scout-tier__tag .dot { background: var(--ink-4); }

.scout-tier h3 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--lh-tight);
}
.scout-tier__lede {
  margin: var(--s-3) 0 0;
  color: var(--ink-3);
  font-size: var(--fs-meta);
  line-height: var(--lh-tight);
}

/* ICP qualifier inside the paid card — reads as a filter, not fluff. */
.scout-tier__icp {
  margin: var(--s-3) 0 0;
  padding-left: var(--s-4);
  border-left: 2px solid var(--accent);
  color: var(--ink-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-tight);
}

/* One-question Q&A below the stack — kills the biggest objection. */
.scout-tier__qa {
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}
.scout-tier__qa b { color: var(--ink); font-weight: 600; }

/* The Hormozi value stack: one benefit per row, each with a check mark.
   Reads top-to-bottom as a pile of included items. */
.scout-tier__stack {
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
}
.scout-tier__stack li {
  position: relative;
  padding-left: calc(var(--s-5) + 4px);
  color: var(--ink-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-tight);
}
.scout-tier__stack li::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0.35em;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}
.scout-tier__stack li b { color: var(--ink); font-weight: 600; }

.scout-tier__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-5);
}
.scout-tier__price-note {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-4);
}

/* Third rung of the ladder: a quiet line + outline CTA below the two
   tier cards. "Those who want even more" is the top-of-ladder frame —
   when the free and the $147 both aren't enough, book the call. */
.scout-ladder-top {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-4) var(--s-5);
  text-align: center;
}
.scout-ladder-top__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.scout-ladder-top__note {
  margin: 0;
  flex-basis: 100%;
  font-size: var(--fs-small);
  color: var(--ink-4);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .btn-halo::before,
  .btn-halo::after {
    animation: none;
  }
}


/* ============================================================================
   BOOKING BAND on /scout — the page's primary action.
   Replaced the three-column pricing grid. Booking is the business; the
   reports are a side offer, so the reports get one quiet line and this
   gets the weight.
   ============================================================================ */
.scout-book {
  position: relative;
  margin-top: var(--s-7);
  padding: var(--s-7) var(--s-6);
  background: var(--surface-sunk);
  border: 1px solid var(--accent);
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--accent-wash),
    0 10px 30px -14px rgba(228, 0, 43, 0.55);
}
.scout-book::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 100% at 0% 0%, var(--accent-wash), transparent 60%);
  pointer-events: none;
}
.scout-book > * { position: relative; }
.scout-book__eyebrow {
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.scout-book h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: var(--lh-tight);
}
.scout-book__lede {
  margin: var(--s-4) 0 0;
  max-width: 54ch;
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.scout-book__list {
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
  max-width: 56ch;
}
.scout-book__list li {
  position: relative;
  padding-left: calc(var(--s-5) + 4px);
  color: var(--ink-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-tight);
}
.scout-book__list li::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0.4em;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 2px;
}
.scout-book__cta {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-4);
}
.scout-book__note {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-4);
}
.scout-book__buy { align-self: center; }

/* The reports, when switched on: one quiet line, never a grid. */
.scout-aside {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-soft);
  text-align: center;
}
.scout-aside p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-4);
  line-height: var(--lh-body);
}