/* ==========================================================================
   AD LANDING PAGES — page-specific composition only.
   Every value comes from tokens.css. Layout primitives come from page.css
   (hero / trust / cta grids), which these pages reuse verbatim from the
   homepage so the three LPs read as the same site.
   ========================================================================== */

/* --- Yellow interrupt: the PROMISE band. One per page. ------------------- */
.promise-band { padding: var(--space-24) 0; }
.promise-band .container { text-align: center; }
.promise-band h2 { max-width: 24ch; margin-inline: auto; }
.promise-band p { max-width: 62ch; margin: var(--space-4) auto 0; font-size: var(--text-lg); line-height: 1.6; }

/* --- Pain agitation ------------------------------------------------------ */
/* The hinge of the argument, centred under the cards. No accent rule: the
   copy carries it on its own. */
.pain-line {
  margin: var(--space-12) auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: var(--text-lg); color: var(--color-text); line-height: 1.65;
}

/* --- Mechanism (runs on .section--light) --------------------------------- */
.mech-steps .step { border-bottom-color: rgba(15, 17, 18, 0.1); }
.mech-steps .step-content h3 { color: var(--on-light-text); }
.mech-steps .step-content > p { color: var(--on-light-muted); }

/* Closes the mechanism section on who does the work. Sits on .section--light,
   so it takes the on-light ramp — and never carries <em>, which is yellow. */
.mech-close {
  margin-top: var(--space-10); padding-left: var(--space-6);
  border-left: 3px solid var(--color-primary);
  max-width: 68ch; font-size: var(--text-lg); line-height: 1.65;
}
.section--light .mech-close { color: var(--on-light-text); }

/* --- Tangibilization / proof (section 04) -------------------------------
   Text + stack tags on the left, client logos in their own right-hand column,
   and the client quote full width underneath. */
.proof-grid { display: grid; gap: var(--space-10); align-items: center; margin-top: var(--space-10); }
.proof-body p { font-size: var(--text-lg); line-height: 1.7; }

/* Centred head: index, eyebrow, headline, then the stack tags. .tech-list
   already centres its own chips, so it only needs the spacing. */
/* Centred section heads — 02 and 04. The index, eyebrow and headline centre;
   the body copy under them stays left-aligned and readable.

   .eyebrow is display:inline-block in base.css, so it shrink-wraps to its own
   text and text-align alone cannot move it. It has to become a block first. */
#pain .eyebrow,  #pain > .container > h2,
#proof .eyebrow, #proof > .container > h2 { text-align: center; }
#pain .eyebrow, #proof .eyebrow { display: block; }
#pain > .container > h2  { max-width: 32ch; margin-inline: auto; }  /* LP1's is 102ch */
#proof > .container > h2 { max-width: 26ch; margin-inline: auto; }

/* Tech stack closes the section, under its own quiet label. .tech-list already
   centres its chips; .section-label is the kit's small heading and is themed
   for the dark/light/brand backgrounds already. */
.proof-tech { margin-top: var(--space-12); text-align: center; }
.proof-tech .section-label { margin-bottom: var(--space-4); }
.proof-stack { margin-top: 0; }

/* Right column. Logos own the space now, so they can run larger than they did
   sitting above the paragraph. Client logos always render white. */
.proof-logos {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: var(--space-8) var(--space-10);
}
.proof-logo img {
  max-height: 76px; max-width: 240px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* The kit's .card--quote carries a 3px left yellow rule. In section 04's full
   width bottom row that read as a stray alignment mark, so the card takes the
   plain .card border on all four sides instead. Padding already matches .card. */
#proof .card--quote { border-left: 1px solid var(--color-border); }

/* Bottom row. auto-fit means one quote spans the full width while a pair of
   support cards sits side by side, with no per-page modifier. */
.proof-bottom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
}

@media (min-width: 768px) {
  .proof-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .mech-steps .step-number { min-width: 140px; }
}
@media (max-width: 767px) {
  .mech-steps .step { flex-direction: column; gap: var(--space-3); }
  .mech-steps .step-number { font-size: var(--text-5xl); min-width: 0; }
}

/* The hero topbar carries the logo alone now that the cross-LP pager is gone. */
.hero-topbar { display: flex; align-items: center; }

/* --- LP1 hero visual: isometric circuit board ---------------------------
   Ported from firmware.bytenana.tech. The canvas sizes itself off its own
   clientWidth (js/circuit-board.js sets the height to keep the board's
   aspect), so it only needs a width here. */
.hero-visual {
  position: relative;
  min-width: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Yellow bloom behind the board, so it reads as lit rather than pasted on.
   Sits under the canvas and cannot intercept a pointer. */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 46% at 50% 55%,
    color-mix(in srgb, var(--color-primary) 18%, transparent) 0%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero-circuit {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100%;          /* fill the column; the column is what caps it */
}

/* Push the board to the right edge of the hero and give it more of the row.
   :has() scopes the wider column to the one page that carries a circuit, so
   the other four keep page.css's even 1fr / 1fr split. Browsers without :has()
   still get the larger board — they just keep the even split. */
@media (min-width: 768px) {
  .hero-visual { justify-content: flex-end; }
  .hero-grid:has(.hero-visual) { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}
@media (min-width: 1024px) {
  .hero-grid:has(.hero-visual) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
/* Matches how page.css treats .hero-hub: no hero animation on mobile, which
   keeps LCP down on the pages that carry paid traffic. */
@media (max-width: 767px) {
  .hero-visual { display: none; }
}

/* --- Section 02 motion (js/lp-motion.js) --------------------------------
   .reveal-up, .type-char and .type-caret are only ever applied by that script,
   so if it does not run nothing here is hidden. --ease-reveal is a softer
   sibling of the kit's --ease-out: same shape, longer tail, which is what makes
   a slow entrance read as a glide rather than a slide-and-stop. */
:root { --ease-reveal: cubic-bezier(0.16, 0.84, 0.24, 1); }

.reveal-up {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.9s var(--ease-reveal) var(--reveal-delay, 0ms),
    transform 0.9s var(--ease-reveal) var(--reveal-delay, 0ms);
  will-change: opacity, transform;   /* the script clears this once it has run */
}
.reveal-up.is-visible { opacity: 1; transform: none; }

/* Section 03's numbered steps enter from the left, one after the other. */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 0.8s var(--ease-reveal) var(--reveal-delay, 0ms),
    transform 0.8s var(--ease-reveal) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-left.is-visible { opacity: 1; transform: none; }

/* Characters are revealed, never inserted, so the paragraph never reflows and
   nothing below it shifts. */
.type-char { opacity: 0; }
.type-char.is-typed { opacity: 1; }

/* Zero-width caret: a border whose negative margins cancel its own box, so
   moving it between characters cannot nudge the line. */
.type-caret {
  display: inline-block;
  width: 0;
  margin-left: -1px;
  margin-right: -1px;
  border-left: 2px solid var(--color-primary);
  align-self: stretch;
  animation: type-blink 1s steps(2, start) infinite;
}
@keyframes type-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-left { opacity: 1; transform: none; transition: none; will-change: auto; }
  .type-char { opacity: 1; }
  .type-caret { display: none; }
}