/* THE LOCAL CUSTOMER SYSTEM — page-unique act content only.
   Act I (the three leaks) runs on shared .decide/.act-payoff.
   This file: the act CTA row, the three ways, the five modules (Act II),
   the value stack, and the guarantee card. */

/* Act I CTA row (below the payoff, inside the dark act) */
.act-cta { margin-top: var(--space-5); }

/* Ambient template chips — home-swarm grammar: fade in on load, drift forever.
   Decorative layer: z1 (above vignette, below the stage), pointer-events none. */
.tchips { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tchip {
  position: absolute; left: var(--x); top: var(--y);
  font-family: var(--font-label);
  font-size: clamp(0.78rem, 0.68rem + 0.4vw, 0.95rem);
  color: var(--slope); white-space: nowrap;
  padding: var(--space-3) var(--space-5);
  border: 1px solid rgba(236,237,236,0.14); border-radius: 999px;
  background: rgba(236,237,236,0.03);
  opacity: 0;
  animation: tchip-in 1.2s var(--ease-entrance) forwards,
             tchip-drift var(--drift, 24s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s), calc(var(--delay, 0s) + 1.2s);
}
@keyframes tchip-in { to { opacity: var(--depth, .8); } }
@keyframes tchip-drift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(var(--dx,12px), var(--dy,-14px), 0); }
}
@media (max-width: 999px) { .tchips { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .tchip { animation: none; opacity: var(--depth, .8); }
}
.no-js .tchip { animation: none; opacity: var(--depth, .8); }

/* Act I carries more content than the reference act (three-line rival
   headline, five staged elements plus a CTA row) — compress the vertical
   budget so the centered stage clears the topline on shorter viewports. */
.act .decide { margin-top: var(--space-5); gap: var(--space-3); }
.act .decide__step p { max-width: 64ch; }
.act .act-payoff { margin-top: var(--space-5); }

/* 01 · The turn — three option cards */
.ways { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .ways { grid-template-columns: repeat(3, 1fr); } }
.way {
  background: var(--card); border: 1px solid rgba(14,19,24,0.1); border-radius: 16px;
  padding: var(--space-6); display: grid; gap: var(--space-2); align-content: start;
  box-shadow: 0 2px 10px rgba(14,19,24,0.04);
}
.way__k { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--label-ink); }
.way h3 { font-size: var(--text-h4); color: var(--ink); }
.way p { font-size: var(--text-small); color: var(--body-ink); }
.way--this { border-color: var(--logo); box-shadow: 0 10px 34px color-mix(in srgb, var(--logo) 14%, transparent); }
.way--this .way__k { color: var(--logo); }

/* ACT II · the five modules — staged rows on the paper field.
   Two columns on wide screens so all five fit inside the 100svh pin. */
.mods { display: grid; gap: var(--space-3) var(--space-12); max-width: 1080px; }
@media (min-width: 900px) { .mods { grid-template-columns: repeat(2, 1fr); } }
.mod { padding-top: var(--space-4); border-top: 1px solid rgba(14,19,24,0.14); }
.mod__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); align-items: baseline; }
.mod__tag { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--logo); }
.mod__meta { font-family: var(--font-label); font-size: var(--text-caption); color: var(--label-ink);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* Per-module weight bar: word count drawn relative to the largest module
   (9,135 words = full track). Driven directly by the act's --sub so it draws
   with its row; reduced-motion and no-js get the finished bar. */
.mod__track { display: block; height: 5px; margin-top: var(--space-2);
  background: rgba(14,19,24,0.07); border-radius: 3px; overflow: hidden; }
.mod__bar { display: block; height: 100%; border-radius: 3px; background: var(--logo);
  transform: scaleX(calc(var(--w, 1) * var(--sub, 1))); transform-origin: left center; }
@media (prefers-reduced-motion: reduce) { .mod__bar { transform: scaleX(var(--w, 1)); } }
.no-js .mod__bar { transform: scaleX(var(--w, 1)); }

.mod h3 { font-size: var(--text-h4); color: var(--ink); margin-top: var(--space-1); }
.mod p { margin-top: var(--space-1); font-size: var(--text-small); color: var(--body-ink); line-height: var(--leading-snug); max-width: 58ch; }
.mods-total { margin-top: var(--space-6); font-size: var(--text-body-lg); color: var(--ink); max-width: 54ch; }
.mods-total strong { font-weight: 800; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Act II runs tighter vertically than a free section — keep it inside the pin */
.act.stage-lit .mods h3 { font-size: var(--text-body-lg); }

/* 03 · the value stack */
.stack { display: grid; max-width: 760px; }
.stackrow {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6);
  padding: var(--space-4) 0; border-top: 1px solid rgba(14,19,24,0.14);
  font-size: var(--text-small); color: var(--body-ink);
}
.stackrow__cost { font-family: var(--font-label); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }
.stackrow--total { font-weight: 700; color: var(--ink); }
.stackrow--you { border-top: 2px solid var(--logo); font-weight: 700; color: var(--ink); }
.stackrow--you .stackrow__cost { color: var(--logo); font-size: var(--text-h4); }

/* The value-stack payoff pair sits under the itemized rows */
.stack-pair { margin-top: var(--space-8); max-width: 760px; }

/* Four product-fact stats sit better in four columns than the shared three */
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* 04 · the guarantee card */
.guar {
  background: var(--card); border: 1px solid rgba(14,19,24,0.1); border-radius: 16px;
  padding: var(--space-12); max-width: 860px;
  box-shadow: 0 2px 10px rgba(14,19,24,0.04);
}
.guar h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); color: var(--ink); margin-top: var(--space-4); }
.guar p { margin-top: var(--space-4); font-size: var(--text-small); color: var(--body-ink); max-width: 64ch; }
.guar a { color: var(--logo); border-bottom: 1px solid color-mix(in srgb, var(--logo) 40%, transparent); }