/* ══════════════════════════════════════════════════════════════════════
   KITCHEN BCS™ — LANDING PAGE
   Design System — Root Tokens (single source of truth)
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 9%;
  --card: 0 0% 98%;
  --card-foreground: 0 0% 9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;
  --accent: 0 0% 96%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 0% 20%;
  --radius: .5rem;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, -apple-system, sans-serif;
  font-feature-settings: "rlig" 1, "calt" 1;
  letter-spacing: -.01em;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-weight: 600; letter-spacing: -.03em; }
h1,h2 { letter-spacing: -.05em; }
* { border-color: hsl(var(--border)); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── Animatable custom property for shiny-cta border ── */
@property --gradient-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes border-spin {
  to { --gradient-angle: 360deg; }
}

/* ── Shared keyframes ── */
@keyframes aurora {
  from { background-position: 50% 50%, 50% 50%; }
  to   { background-position: 350% 50%, 350% 50%; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulseIndicator {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}

/* ── Shared shadows ── */
.shadow-beautiful-sm {
  box-shadow:
    0px 2px 3px -1px rgba(0,0,0,.1),
    0px 1px 0px 0px rgba(25,28,33,.02),
    0px 0px 0px 1px rgba(25,28,33,.08);
}
.shadow-beautiful-md {
  box-shadow:
    0px 0px 0px 1px rgba(0,0,0,.06),
    0px 1px 1px -.5px rgba(0,0,0,.06),
    0px 3px 3px -1.5px rgba(0,0,0,.06),
    0px 6px 6px -3px rgba(0,0,0,.06),
    0px 12px 12px -6px rgba(0,0,0,.06),
    0px 24px 24px -12px rgba(0,0,0,.06);
}
.shadow-subtle {
  box-shadow: 0 1px 1px #00000008, 0 0 2px #0000001a, 0 5px 5px #00000008;
}

/* ── Shared layout ── */
.section-pad {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}
.container--narrow { max-width: 720px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
.container--wide   { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }

/* ── Block transition connector ── */
.block-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  position: relative;
}
.block-bridge::before {
  content: '';
  width: 1px;
  height: clamp(1rem, 2vw, 1.5rem);
  background: linear-gradient(to bottom, transparent, hsl(var(--border)) 40%, hsl(var(--border)) 60%, transparent);
}
.block-bridge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(var(--border));
  margin: 6px 0;
  flex-shrink: 0;
}
.block-bridge::after {
  content: '';
  width: 1px;
  height: clamp(0.75rem, 1.5vw, 1.25rem);
  background: linear-gradient(to bottom, hsl(var(--border)), transparent);
}

/* ── Shared reveal system ── */
[data-reveal] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-duration: .65s;
  will-change: opacity, transform;
}
[data-reveal].is-visible        { opacity: 1; transform: none !important; }
[data-reveal="fade-up"]         { transform: translateY(24px); }
[data-reveal="fade-up-sm"]      { transform: translateY(12px); transition-duration: .45s; }
[data-reveal="slide-left"]      { transform: translateX(-20px); }
[data-reveal="slide-right"]     { transform: translateX(20px); }
[data-reveal="scale"]           { transform: translateY(16px) scale(.985); transform-origin: center top; }

/* ── Shared aurora ── */
.aurora-inset {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.aurora-layer {
  --wg: repeating-linear-gradient(100deg,#fff 0%,#fff 7%,transparent 10%,transparent 12%,#fff 16%);
  --ag: repeating-linear-gradient(100deg,#3b82f6 10%,#a5b4fc 15%,#93c5fd 20%,#ddd6fe 25%,#60a5fa 30%);
  position: absolute; inset: -10px;
  background-image: var(--wg), var(--ag);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(14px) invert(1);
  opacity: .38;
  will-change: transform;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
  mask-image:         radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
}
.aurora-layer::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--wg), var(--ag);
  background-size: 200%, 100%;
  background-position: 50% 50%, 50% 50%;
  background-attachment: fixed;
  mix-blend-mode: difference;
  animation: aurora 60s linear infinite;
}

/* ── Shared reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .aurora-layer, .aurora-layer::after { animation: none !important; }
  [data-reveal] { transform: none !important; transition-duration: .2s !important; }
}


/* ── Bloco 1 ────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — ROOT TOKENS
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

* { border-color: hsl(var(--border)); }

/* ══════════════════════════════════════════════════════════════════════
   SHADOWS
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   AURORA
   ══════════════════════════════════════════════════════════════════════ */

  to   { background-position: 350% 50%, 350% 50%; }
}

/* ══════════════════════════════════════════════════════════════════════
   ENTRY ANIMATIONS
   ══════════════════════════════════════════════════════════════════════ */

  to   { opacity: 1; transform: translateY(0); }
}

  to   { opacity: 1; transform: scale(1); }
}

  50%       { opacity: .35; }
}

/* ══════════════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════════════ */
.container--hero {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 3rem);
}

/* ══════════════════════════════════════════════════════════════════════
   BLOCO 1
   ══════════════════════════════════════════════════════════════════════ */
.bloco-1 {
  position: relative;
  background-color: hsl(var(--background));
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  overflow: hidden;
}

/* Content stack */
.bloco-1-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Progressive vertical rhythm — no rules needed, just space */
  gap: 0;
}

/* ── Thin connector — used SPARINGLY, only between score and headline ── */
.elem-connector {
  width: 1px;
  height: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(to bottom, transparent, hsl(var(--border)), transparent);
  margin: 0;
}

/* ── Space blocks — progressive gaps replacing elem-rules ── */
.gap-sm  { height: clamp(1.5rem, 3vw, 2rem); }
.gap-md  { height: clamp(2rem,   4vw, 3rem); }
.gap-lg  { height: clamp(2.5rem, 5vw, 4rem); }

/* ══════════════════════════════════════════════════════════════════════
   1 — SCORE DISPLAY
   ══════════════════════════════════════════════════════════════════════ */
/* ── RenovationWise logo ── */
.b1-logo {
  display: block;
  height: 44px;
  width: auto;
  margin: 18px auto 32px;
  opacity: .85;
  pointer-events: none;
}
@media (max-width: 600px) {
  .b1-logo { height: 32px; margin: 14px auto 24px; }
}

.score-block {
  width: 100%;
  animation: fadeInUp .55s cubic-bezier(0,0,.2,1) both;
}
.score-overline {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.25rem;
}
/* ── Gauge card (glassmorphic + tilt) ── */
.gauge-card-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 8px;
  padding-bottom: 60px;
}
.tilt-scene {
  perspective: 1000px;
  width: min(400px, 92vw);
  position: relative;
}
.gc {
  width: 100%;
  position: relative;
  border-radius: 32px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(48px) saturate(200%);
  -webkit-backdrop-filter: blur(48px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -1px 0 rgba(0,0,0,0.03) inset,
    0 4px 12px rgba(0,0,0,0.06),
    0 16px 40px rgba(0,0,0,0.09),
    0 40px 80px rgba(0,0,0,0.07);
  transform-style: preserve-3d;
  will-change: transform;
}
.gc::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 70%, transparent);
  z-index: 2;
}
.gc::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.0) 70%);
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}
.gc-grid {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
#bgGridCanvas { display: block; }
.gauge-card-wrap .card-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 200px;
  height: 100px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0;
  transition: background 0.9s ease, opacity 1.4s ease;
  pointer-events: none;
  z-index: 0;
}
.gc-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateZ(24px);
  transform-style: preserve-3d;
}
.gc-reflection {
  width: 100%;
  position: absolute;
  bottom: -2px;
  left: 0;
  transform-origin: top center;
  transform: rotateX(180deg) translateZ(-1px) scaleY(0.5);
  border-radius: 32px;
  overflow: hidden;
  opacity: 0.28;
  pointer-events: none;
  filter: blur(2px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
}
.gc-reflection-inner {
  width: 100%;
  background: rgba(255,255,255,0.52);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 32px;
  padding: 28px 24px 24px;
  min-height: 120px;
}
.gc-shadow {
  position: absolute;
  bottom: -28px;
  left: 8%; right: 8%;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.16) 0%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
}
.gauge-card-wrap .gauge-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.gauge-card-wrap canvas#gaugeCanvas {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
}
.gauge-card-wrap .score-overlay {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateZ(44px) translateX(-50%);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}
.gauge-card-wrap .score-number {
  font-family: 'Sora', sans-serif;
  font-size: clamp(50px, 13vw, 72px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -3px;
  color: #1d1d1f;
  transition: color 0.5s ease;
}
.gauge-card-wrap .score-unit {
  font-size: 11px;
  font-weight: 300;
  color: rgba(0,0,0,0.36);
  letter-spacing: 0.14em;
  margin-top: 1px;
}
.gauge-card-wrap .zone-strip {
  width: 100%;
  max-width: 320px;
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  transform: translateZ(16px);
}
.gauge-card-wrap .zone-item { display: flex; align-items: center; gap: 4px; }
.gauge-card-wrap .zone-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.gauge-card-wrap .zone-name { font-size: 9px; font-weight: 400; letter-spacing: 0.07em; color: rgba(0,0,0,0.36); text-transform: uppercase; white-space: nowrap; }
.gauge-card-wrap .gauge-divider { width: 100%; height: 0.5px; background: rgba(0,0,0,0.08); margin: 18px 0; }
.gauge-card-wrap .outcome-section { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; transition: opacity 0.9s ease; transform: translateZ(32px); }
.gauge-card-wrap .outcome-section.visible { opacity: 1; }
.gauge-card-wrap .outcome-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 16px; border-radius: 100px; border: 0.5px solid rgba(255,255,255,0.7); background: rgba(255,255,255,0.55); backdrop-filter: blur(12px); box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(255,255,255,0.4) inset; }
.gauge-card-wrap .outcome-indicator { width: 6px; height: 6px; border-radius: 50%; animation: gaugeIndicatorPulse 2s ease-in-out infinite; flex-shrink: 0; }
.gauge-card-wrap .outcome-label { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.gauge-card-wrap .stats-row { width: 100%; display: grid; grid-template-columns: 1fr 1px 1fr; margin-top: 2px; }
.gauge-card-wrap .stat-divider { background: rgba(0,0,0,0.07); }
.gauge-card-wrap .stat { text-align: center; padding: 10px 6px; }
.gauge-card-wrap .stat-value { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 600; color: #1d1d1f; letter-spacing: -0.5px; line-height: 1; }
.gauge-card-wrap .stat-label { font-size: 9px; font-weight: 300; color: rgba(0,0,0,0.36); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 3px; }
@keyframes gaugeIndicatorPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.4; transform:scale(0.7); }
}

/* ══════════════════════════════════════════════════════════════════════
   2 — HEADLINE
   ══════════════════════════════════════════════════════════════════════ */
.headline-block {
  width: 100%;
  animation: fadeInUp .55s cubic-bezier(0,0,.2,1) .18s both;
}
.bloco-headline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  font-weight: 700; line-height: 1.15;
  letter-spacing: -.05em;
  color: hsl(var(--foreground));
}

/* ══════════════════════════════════════════════════════════════════════
   3 — SUBHEADLINE
   ══════════════════════════════════════════════════════════════════════ */
.sub-block {
  width: 100%;
  animation: fadeInUp .55s cubic-bezier(0,0,.2,1) .26s both;
}
.bloco-sub {
  font-size: 1.0625rem; font-weight: 400;
  line-height: 1.75; color: hsl(var(--muted-foreground));
  max-width: 540px; margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════════════
   4 — CTA BUTTON
   ══════════════════════════════════════════════════════════════════════ */
.cta-block {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem;
  animation: fadeInUp .55s cubic-bezier(0,0,.2,1) .34s both;
}
.btn-cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center;
  justify-content: center; gap: .625rem;
  width: 100%; max-width: 480px;
  padding: 1.125rem 2rem;
  font-family: Inter, sans-serif; font-size: 1rem;
  font-weight: 600; line-height: 1.35;
  text-align: center; color: #fff;
  border: none; border-radius: var(--radius);
  cursor: pointer; text-decoration: none;
  letter-spacing: -.01em;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #3b82f6 100%);
  background-size: 200% 200%; background-position: 0% 50%;
  box-shadow:
    0 4px 24px rgba(37,99,235,.30),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition:
    background-position 250ms cubic-bezier(0.16,1,0.3,1),
    box-shadow          250ms cubic-bezier(0.16,1,0.3,1),
    transform           250ms cubic-bezier(0.16,1,0.3,1);
}
.btn-cta:hover {
  background-position: 100% 50%;
  box-shadow:
    0 6px 32px rgba(37,99,235,.45),
    inset 0 1px 0 rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.btn-cta:active { transform: scale(.98); }
.btn-cta::after {
  content: ''; position: absolute;
  top: -50%; left: -75%; width: 50%; height: 200%;
  background: linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform: skewX(-15deg);
  transition: left 0.6s cubic-bezier(0.16,1,0.3,1);
}
.btn-cta:hover::after { left: 125%; }
.btn-cta-text { position: relative; flex: 1; min-width: 0; }
.btn-cta-arrow {
  position: relative; font-size: 1.1em; flex-shrink: 0;
  transition: transform .2s cubic-bezier(0.16,1,0.3,1);
}
.btn-cta:hover .btn-cta-arrow { transform: translateX(5px); }

/* ══════════════════════════════════════════════════════════════════════
   5 — TRUST STRIP
   ══════════════════════════════════════════════════════════════════════ */
.trust-strip {
  display: flex; flex-wrap: wrap;
  gap: .25rem .875rem;
  justify-content: center; align-items: center;
}
.trust-item {
  display: inline-flex; align-items: center;
  gap: .3rem; font-size: .72rem;
  color: hsl(var(--muted-foreground)); white-space: nowrap;
}
.trust-item svg {
  width: 11px; height: 11px;
  flex-shrink: 0; color: #2563eb;
}
.trust-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: hsl(var(--border)); flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   6 — MICROPROOF (one line, no card, no border)
   ══════════════════════════════════════════════════════════════════════ */
.microproof-block {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center; gap: .625rem;
  animation: fadeInUp .55s cubic-bezier(0,0,.2,1) .44s both;
}
.microproof-row {
  display: inline-flex; align-items: center;
  gap: .875rem; flex-wrap: wrap;
  justify-content: center;
}
.avatar-stack {
  display: flex; align-items: center;
}
.avatar {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid hsl(var(--background));
  background: hsl(var(--secondary));
  display: flex; align-items: center; justify-content: center;
  font-size: 6.5px; font-weight: 700;
  color: hsl(var(--muted-foreground));
  margin-left: -6px; flex-shrink: 0;
}
.avatar:first-child { margin-left: 0; }
.avatar:nth-child(2) { background: hsl(var(--muted)); }
.avatar:nth-child(3) { background: hsl(var(--border)); }
.avatar-more { font-size: 6.5px; background: hsl(var(--border)); }

.stars-row { display: flex; gap: 2px; }
.stars-row svg { width: 10px; height: 10px; fill: #2563eb; }

.microproof-text {
  font-size: .75rem; color: hsl(var(--muted-foreground));
}
.microproof-text strong {
  color: hsl(var(--foreground)); font-weight: 600;
}

/* ── Bridge line — sem card, sem borda ── */
.bridge-line {
  font-family: Newsreader, serif;
  font-style: italic;
  font-weight: 300;
  font-size: .9375rem;
  line-height: 1.65;
  letter-spacing: -.01em;
  color: hsl(var(--muted-foreground));
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  animation: fadeInUp .55s cubic-bezier(0,0,.2,1) .40s both;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .bloco-1 { padding: 2.5rem 0 3.5rem; }
  .gc { padding: 20px 16px 16px; border-radius: 24px; }
  .gc-reflection-inner { border-radius: 24px; padding: 20px 16px 16px; }
  .btn-cta { font-size: .9rem; padding: 1rem 1.25rem; max-width: 100%; }
  .microproof-text { white-space: normal; font-size: .6875rem; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-layer, 
  .score-block, .headline-block, .sub-block, .cta-block, .microproof-block, .bridge-line {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .gauge-card-wrap .outcome-indicator { animation: none !important; }
  .btn-cta::after { display: none; }
}
/* ── Bloco 2 ────────────────────────────────────────── */
/* ══ DS TOKENS ═══════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

*{border-color:hsl(var(--border));}

.container{max-width:1060px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem);}

/* ══ REVEAL — premium spring motion ════════════════════════════ */

[data-reveal="up"]      {transform:translateY(18px);}
[data-reveal="up-sm"]   {transform:translateY(10px);transition-duration:.3s;}
[data-reveal="left"]    {transform:translateX(-16px);}
[data-reveal="right"]   {transform:translateX(16px);}
[data-reveal="scale"]   {transform:translateY(10px) scale(.982);transform-origin:center top;}
/* Stagger: delays activate ONLY after .is-visible is added (no pre-delay freeze) */
[data-reveal-d="1"].is-visible{transition-delay:.055s;}
[data-reveal-d="2"].is-visible{transition-delay:.11s;}
[data-reveal-d="3"].is-visible{transition-delay:.165s;}
[data-reveal-d="4"].is-visible{transition-delay:.22s;}
[data-reveal-d="5"].is-visible{transition-delay:.275s;}
[data-reveal-d="6"].is-visible{transition-delay:.33s;}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{transform:none!important;transition-duration:.1s!important;}
  [data-reveal-d].is-visible{transition-delay:0s!important;}
}

/* ══ OPENING ════════════════════════════════════════════════════ */
.bloco-2{background:hsl(var(--background));position:relative;}

/* ── Section grid texture — top-of-block, fades down (CSS ::before, no canvas) ── */
.bloco-2::before,
.bloco-3::before,
.sec-contents::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(hsl(var(--border) / .55) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--border) / .55) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, white 0%, transparent 52%);
  mask-image: linear-gradient(to bottom, white 0%, transparent 52%);
  pointer-events: none;
  z-index: 0;
}
.bloco-2 > .container,
.bloco-3 > .container,
.bloco-3 > .case-carousel-header,
.bloco-3 > .case-carousel-outer,
.bloco-3 > .case-carousel-dots,
.bloco-3 > .b3-outcomes,
.sec-contents > .container,
.sec-contents > .hscroll-outer,
.sec-contents > .stack-simplicity-wrap,
.sec-contents > .system-components-label {
  position: relative;
  z-index: 1;
}
.b2-header{max-width:600px;margin:0 auto clamp(4rem,8vw,6rem);text-align:center;}
.b2-eyebrow{font-size:.5625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:hsl(var(--muted-foreground));margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:.75rem;}
.b2-eyebrow::before,.b2-eyebrow::after{content:'';flex:0 0 36px;height:1px;background:hsl(var(--border));}
.b2-headline{font-family:'Playfair Display',serif;font-size:clamp(2rem,4.5vw,2.875rem);font-weight:700;letter-spacing:-.055em;line-height:1.1;color:hsl(var(--foreground));margin-bottom:.5rem;}
.b2-subheadline{font-size:.9375rem;line-height:1.72;color:hsl(var(--muted-foreground));font-family:Newsreader,serif;font-style:italic;font-weight:300;margin-bottom:1.5rem;}
.b2-trust{display:inline-flex;flex-wrap:wrap;justify-content:center;border:1px solid hsl(var(--border));border-radius:calc(var(--radius)*1.5);background:hsl(var(--card));overflow:hidden;}
.b2-trust-item{font-size:.5625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--muted-foreground));padding:.4375rem .875rem;border-right:1px solid hsl(var(--border));white-space:nowrap;display:flex;align-items:center;gap:.375rem;}
.b2-trust-item:last-child{border-right:none;}
.b2-trust-dot{width:5px;height:5px;border-radius:50%;background:#2563eb;flex-shrink:0;}

/* ══════════════════════════════════════════════════════════════════
   CHAPTER DIVIDER — breaks editorial rhythm
   ══════════════════════════════════════════════════════════════════ */
.chapter-break{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin:0 0 clamp(1.5rem,2.5vw,2rem);
  opacity:.6;
}
.chapter-break-line{width:60px;flex:none;height:1px;background:hsl(var(--border));opacity:.5;}
.chapter-break-label{
  font-size:.5rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));white-space:nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   TOOL ROW — asymmetric two-column
   Image enters HIGHER in flow (40/60 split, image column wider)
   ══════════════════════════════════════════════════════════════════ */
.tool-row{
  display:grid;
  /* Slight asymmetry: image slightly wider */
  grid-template-columns:1.08fr .92fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:stretch;
  padding:clamp(2rem,4vw,3rem) 0;
  border-bottom:1px solid hsl(var(--border));
}
.tool-row:last-of-type{border-bottom:none;}
/* Flip: text wider, image narrower */
.tool-row.flip{grid-template-columns:.92fr 1.08fr;}
.tool-row.flip .tool-vis{order:2;}
.tool-row.flip .tool-txt{order:1;}

/* ── Product canvas — no frame ── */
.product-canvas{
  border-radius:18px;overflow:hidden;
  border:1px solid #e8e8e8;
  box-shadow:0 2px 4px rgba(0,0,0,.03),0 10px 28px rgba(0,0,0,.07),0 22px 48px rgba(0,0,0,.05);
  position:relative;
}
.product-canvas img{width:100%;height:auto;display:block;}
/* Tool number — smaller, no badge feel */
.tool-n{
  position:absolute;top:-10px;left:-10px;
  width:28px;height:28px;border-radius:50%;
  background:hsl(var(--foreground));color:hsl(var(--primary-foreground));
  font-family:'Playfair Display',serif;font-size:.8125rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;letter-spacing:-.02em;
  box-shadow:0 2px 8px rgba(0,0,0,.18);z-index:3;
}

/* ── Guided narrative — NOT editorial ── */
.tool-txt{
  display:flex;flex-direction:column;gap:1.25rem;
  justify-content:space-between;
  height:100%;min-height:280px;
  /* Slight top offset — creates asymmetric feel vs image */
  padding-top:clamp(.5rem,2vw,1.5rem);
}

/* Tool label row */
.tool-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.tool-badge{font-size:.5rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:hsl(var(--muted-foreground));background:hsl(var(--muted));border:1px solid hsl(var(--border));border-radius:4px;padding:.2rem .5rem;}
.tool-fn{font-size:.5625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--muted-foreground));}
.timing-tag{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:.325rem;
  font-size:.5625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));
  background:hsl(var(--muted));border:1px solid hsl(var(--border));
  border-radius:999px;padding:.25rem .625rem;white-space:nowrap;
}
.tdot{width:5px;height:5px;border-radius:50%;background:#22c55e;flex-shrink:0;animation:t-pulse 2.2s ease-in-out infinite;}
@keyframes t-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* Headline */
.tool-headline{
  font-family:'Playfair Display',serif;font-size:clamp(1.375rem,2.8vw,1.75rem);
  font-weight:700;letter-spacing:-.045em;line-height:1.2;color:hsl(var(--foreground));
}

/* Fragmented statement (NOT continuous paragraph) */
.tool-statement{
  display:flex;flex-direction:column;gap:.25rem;
}
.stmt-line{
  font-size:.9375rem;line-height:1.4;color:hsl(var(--muted-foreground));
  display:block;
}
.stmt-line.em{
  font-family:'Playfair Display',serif;font-style:italic;
  color:hsl(var(--foreground));font-size:.9375rem;
}

/* ── Core output — UI ELEMENT, not subtitle ── */
.core-ui{
  display:inline-flex;align-items:center;gap:.625rem;
  padding:.5625rem .875rem;
  border-radius:8px;
  background:#f6f7f9;border:1px solid #e5e7eb;
  width:fit-content;max-width:100%;
}
.core-ui-status{
  width:7px;height:7px;border-radius:50%;background:#22c55e;flex-shrink:0;
  animation:t-pulse 2.2s ease-in-out infinite;
}
.core-ui-label{font-size:.6875rem;font-weight:600;letter-spacing:-.01em;color:hsl(var(--foreground));line-height:1.2;}
.core-ui-sub{font-size:.625rem;color:hsl(var(--muted-foreground));margin-left:.125rem;}

/* ── Category system strip — not decorative tags ── */
.cat-system{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:.375rem;
}
.cat-chip{
  font-size:.625rem;font-weight:600;letter-spacing:.04em;
  padding:.375rem .625rem;
  border-radius:7px;
  background:#f3f3f3;border:1px solid #e2e2e2;
  color:hsl(var(--foreground));
  transition:background .15s,border-color .15s,color .15s;
  cursor:default;text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.cat-chip:hover{background:#eaeaea;border-color:#d0d0d0;}

/* ── Feature pair — 2-col, SHORT cards ── */
.feature-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem;
}
.fpair-item{
  padding:.875rem;border:1px solid hsl(var(--border));border-radius:10px;
  background:hsl(var(--card));
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s;
}
.fpair-item:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.06);border-color:rgba(37,99,235,.2);}
.fp-label{font-size:.5625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--muted-foreground));margin-bottom:.3rem;}
.fp-val{font-size:.875rem;font-weight:600;letter-spacing:-.02em;color:hsl(var(--foreground));line-height:1.3;margin-bottom:.25rem;}
.fp-desc{font-size:.6875rem;line-height:1.55;color:hsl(var(--muted-foreground));}

/* ── Data alert — system warning, not footnote ── */
.data-alert{
  padding:.875rem 1rem .875rem 1.125rem;
  border-left:3px solid #3b82f6;
  background:#f3f6fb;
  border-radius:0 10px 10px 0;
}
.da-intro{font-size:.5rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#3b5998;margin-bottom:.375rem;}
.da-value{font-size:1.0625rem;font-weight:700;letter-spacing:-.03em;color:hsl(var(--foreground));line-height:1.2;margin-bottom:.25rem;}
.da-value span{color:#1d4ed8;}
.da-text{font-size:.75rem;line-height:1.6;color:hsl(var(--muted-foreground));font-style:italic;font-family:Newsreader,serif;font-weight:300;}

/* ══════════════════════════════════════════════════════════════════
   BONUS — hierarchical narrative v8
   ══════════════════════════════════════════════════════════════════ */
.bonus-zone{padding-top:clamp(2rem,3.5vw,2.5rem);margin-top:clamp(1.5rem,3vw,2.5rem);}
.section-divider{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 clamp(1.5rem,3vw,2.5rem);}
.section-divider::before,.section-divider::after{content:'';width:48px;flex:none;height:1px;background:hsl(var(--border));opacity:.4;}
.section-divider span{font-size:.5rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:hsl(var(--muted-foreground));white-space:nowrap;}
.bonus-header{text-align:center;margin-bottom:clamp(1.5rem,3vw,2rem);}
.bonus-headline{font-family:'Playfair Display',serif;font-size:clamp(1.5rem,3.5vw,2.25rem);font-weight:700;letter-spacing:-.05em;line-height:1.15;color:hsl(var(--foreground));margin-bottom:.375rem;}
.bonus-subline{font-size:.9375rem;line-height:1.65;color:hsl(var(--muted-foreground));font-family:Newsreader,serif;font-style:italic;font-weight:300;}
.bonus-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:20px;align-items:stretch;}
.bonus-card{border-radius:calc(var(--radius)*2.5);overflow:hidden;display:flex;flex-direction:column;height:100%;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease,box-shadow .25s cubic-bezier(.16,1,.3,1);}
.bonus-card.is-visible{opacity:1;transform:translateY(0);}
/* ══ REEL CAROUSEL ══════════════════════════════════════════ */
.reel-carousel{position:relative;overflow-x:hidden;}
.reel-viewport{overflow:visible;}
.reel-track{display:flex;will-change:transform;transition:transform .55s cubic-bezier(.16,1,.3,1);}
.reel-slide{flex:0 0 78%;padding:0 10px;box-sizing:border-box;opacity:.4;transform:scale(.95);transition:opacity .45s ease,transform .45s ease;}
.reel-slide.is-active{opacity:1;transform:scale(1);}
.reel-slide .bonus-card{opacity:1 !important;transform:none !important;}

/* ── Desktop: image left 40%, text right 60% ── */
.reel-slide .bonus-card {
  flex-direction: row !important;
  height: 300px !important;
  min-height: unset !important;
}
.reel-slide .bonus-img {
  flex: 0 0 40% !important;
  width: 40% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
  overflow: hidden;
}
.reel-slide .bonus-img img {
  width: 100%; height: 100%;
  object-fit: cover !important;
  object-position: center center;
  display: block;
}
.reel-slide .bonus-body {
  flex: 1 1 60% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 1.375rem 1.375rem 1.125rem 1.5rem !important;
  gap: 0 !important;
  overflow: hidden;
}

/* ── 3-zone vertical structure ── */
.bonus-zone-top { display: flex; flex-direction: column; gap: .25rem; }
.bonus-zone-mid { display: flex; flex-direction: column; gap: .375rem; }
.bonus-zone-bot {
  border-top: 1px solid hsl(var(--border));
  padding-top: .625rem;
}

/* footer-level condition line */
.reel-slide .bonus-condition {
  font-size: .5375rem !important;
  font-weight: 500;
  letter-spacing: .01em;
  color: hsl(var(--muted-foreground));
  opacity: .7;
  line-height: 1.5;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* ── Mobile: vertical card ── */
@media (max-width: 600px) {
  .reel-slide { flex: 0 0 92%; }
  .reel-slide .bonus-card {
    flex-direction: column !important;
    min-height: unset !important;
    height: auto !important;
  }
  .reel-slide .bonus-img {
    flex: none !important;
    width: 100% !important;
    height: 190px !important;
  }
  .reel-slide .bonus-body {
    padding: 1rem !important;
  }
  .bonus-zone-mid { padding: .5rem 0; }
  .bonus-zone-top .bonus-fn { display: none; }
  .bonus-desc { font-size: .8125rem; line-height: 1.6; }
  .bonus-key  { font-size: .75rem; line-height: 1.45; }
  .reel-slide .bonus-condition { font-size: .5rem !important; }
}
/* Nav */
.reel-nav{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;gap:.75rem;}
.reel-arrows{display:flex;gap:.5rem;}
.reel-btn{width:36px;height:36px;border-radius:50%;background:hsl(var(--card));border:1px solid hsl(var(--border));display:flex;align-items:center;justify-content:center;cursor:pointer;color:hsl(var(--foreground));transition:background .2s,transform .12s;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.reel-btn:hover{background:hsl(var(--muted));}
.reel-btn:active{transform:scale(.9);}
.reel-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* Dots */
.reel-dots{display:flex;align-items:center;gap:6px;}
.reel-dot{width:6px;height:6px;border-radius:50%;background:hsl(var(--border));border:none;padding:0;cursor:pointer;transition:background .25s,width .3s cubic-bezier(.16,1,.3,1);}
.reel-dot.is-active{background:hsl(var(--foreground));width:20px;border-radius:99px;}
/* Progress */
.reel-progress{flex:1;height:2px;background:hsl(var(--border));border-radius:99px;overflow:hidden;}
.reel-progress-fill{height:100%;width:0%;background:hsl(var(--foreground));border-radius:99px;}
.side-bonus{background:#ffffff;border:1px solid #ececec;box-shadow:0 0 0 1px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.04),0 8px 20px rgba(0,0,0,.03);}
.featured-bonus{background:#f3f6fb;border:1px solid #dbe3f0;box-shadow:0 0 0 1px rgba(37,99,235,.1),0 4px 16px rgba(37,99,235,.07),0 16px 40px rgba(0,0,0,.07);}
.side-bonus:hover{box-shadow:0 0 0 1px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.10),0 24px 48px rgba(0,0,0,.09);transform:translateY(-3px)!important;}
.featured-bonus:hover{box-shadow:0 0 0 1px rgba(37,99,235,.22),0 8px 24px rgba(37,99,235,.12),0 32px 64px rgba(0,0,0,.10);transform:scale(1.02) translateY(-4px)!important;}
.bonus-
.bonus-img 
.bonus-card:hover .bonus-img 
.side-bonus .bonus-
.featured-bonus .bonus-
.bonus-body{padding:1.125rem 1.125rem 1.25rem;flex:1;display:flex;flex-direction:column;gap:.375rem;justify-content:space-between;}
.bonus-num{font-size:.5rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:hsl(var(--muted-foreground));}
.bonus-star-badge{display:inline-flex;align-items:center;font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1d4ed8;background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.18);border-radius:999px;padding:.2rem .5rem;width:fit-content;margin-bottom:.125rem;}
.bonus-name{font-family:'Playfair Display',serif;font-size:.9375rem;font-weight:700;letter-spacing:-.03em;line-height:1.3;color:hsl(var(--foreground));}
.featured-bonus .bonus-name{font-size:1.0625rem;}
.bonus-fn{font-size:.625rem;font-style:italic;font-family:Newsreader,serif;color:hsl(var(--muted-foreground));}
.bonus-desc{font-size:.8125rem;line-height:1.68;color:hsl(var(--muted-foreground));margin-top:.25rem;flex:1;}
.bonus-key{font-size:.75rem;font-weight:600;letter-spacing:-.01em;color:hsl(var(--foreground));line-height:1.45;padding-top:.625rem;border-top:1px solid hsl(var(--border));margin-top:auto;}
.bonus-condition{font-size:.5625rem;font-weight:500;letter-spacing:.01em;color:hsl(var(--muted-foreground));line-height:1.5;margin-top:.625rem;padding-top:.5rem;border-top:1px solid hsl(var(--border));opacity:.75;}

/* ══ COMPARISON ══════════════════════════════════════════════════ */
.compare-zone{padding-top:clamp(3rem,7vw,5.5rem);margin-top:clamp(3rem,6vw,5rem);border-top:1px solid hsl(var(--border));}
.compare-header{text-align:center;margin-bottom:clamp(2rem,4vw,3rem);}
.compare-headline{font-family:'Playfair Display',serif;font-size:clamp(1.5rem,3.5vw,2.25rem);font-weight:700;letter-spacing:-.05em;line-height:1.15;color:hsl(var(--foreground));}
.compare-colhead{display:grid;grid-template-columns:180px 1fr 1fr;border:1px solid hsl(var(--border));border-radius:calc(var(--radius)*2) calc(var(--radius)*2) 0 0;overflow:hidden;}
.cch-phase{background:hsl(var(--muted));padding:.875rem 1.25rem;}
.cch-without{background:hsl(var(--foreground));padding:.875rem 1.25rem;text-align:center;}
.cch-with{background:#1e3a8a;padding:.875rem 1.25rem;text-align:center;}
.cch-label{font-size:.5rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
.cch-phase .cch-label{color:hsl(var(--muted-foreground));}
.cch-without .cch-label{color:rgba(255,255,255,.4);}
.cch-with .cch-label{color:rgba(255,255,255,.6);}
.compare-body{border:1px solid hsl(var(--border));border-top:none;border-radius:0 0 calc(var(--radius)*2) calc(var(--radius)*2);overflow:hidden;}
.cmp-row{display:grid;grid-template-columns:180px 1fr 1fr;border-bottom:1px solid hsl(var(--border));}
.cmp-row:last-child{border-bottom:none;}
.cmp-row:nth-child(even) .cr-phase{background:rgba(0,0,0,.018);}
.cmp-row:nth-child(even) .cr-without{background:rgba(0,0,0,.01);}
.cmp-row:nth-child(even) .cr-with{background:rgba(30,58,138,.03);}
.cr-phase{padding:1.125rem;font-size:.6875rem;font-weight:700;letter-spacing:-.01em;color:hsl(var(--foreground));background:hsl(var(--card));border-right:1px solid hsl(var(--border));display:flex;align-items:flex-start;line-height:1.4;}
.cr-without{padding:1.125rem;font-size:.8125rem;line-height:1.65;color:hsl(var(--muted-foreground));border-right:1px solid hsl(var(--border));}
.cr-with{padding:1.125rem;font-size:.8125rem;line-height:1.65;color:hsl(var(--foreground));font-weight:500;background:rgba(30,58,138,.025);}
.ix{color:hsl(var(--destructive));margin-right:.25rem;}
.ik{color:#22c55e;margin-right:.25rem;}
.compare-foot{padding:1rem 1.25rem;background:hsl(var(--foreground));border-radius:0 0 calc(var(--radius)*2) calc(var(--radius)*2);text-align:center;margin-top:1px;}
.compare-foot p{font-size:.875rem;font-style:italic;font-family:Newsreader,serif;font-weight:300;color:rgba(255,255,255,.6);}
.compare-foot strong{font-style:normal;font-family:Inter,sans-serif;font-weight:600;color:#fff;}

/* ══ RESPONSIVE ═════════════════════════════════════════════════ */
@media(max-width:860px){
  .tool-row,.tool-row.flip{grid-template-columns:1fr;gap:1.75rem;padding:clamp(2.5rem,6vw,4rem) 0;}
  .tool-row .tool-vis,.tool-row.flip .tool-vis,.tool-row .tool-txt,.tool-row.flip .tool-txt{order:unset!important;}
  .tool-row.flip .tool-vis{order:0!important;}
  .tool-row.flip .tool-txt{order:1!important;}
  .feature-pair{grid-template-columns:1fr 1fr;}
  .reel-slide{flex:0 0 86%;}
  .compare-colhead{grid-template-columns:88px 1fr 1fr;}
  .compare-body .cmp-row{grid-template-columns:88px 1fr 1fr;}
  .cr-phase{font-size:.625rem;padding:.875rem .75rem;}
  .timing-tag{margin-left:0;}
}
@media(max-width:639px){
  .container{padding:0 1.25rem;}
  .tool-row,.tool-row.flip{gap:0;padding:2.5rem 0;}
  /* Copy first, image second */
  .tool-txt{order:1!important;display:flex;flex-direction:column;gap:1rem;margin-bottom:0;padding-top:0;height:auto;min-height:unset;justify-content:flex-start;}
  .tool-vis{order:2!important;margin:1rem 0 1.5rem;}
  .tool-row.flip .tool-txt{order:1!important;}
  .tool-row.flip .tool-vis{order:2!important;}
  /* Headline */
  .tool-headline{font-size:clamp(1.75rem,8vw,2.125rem);letter-spacing:-.05em;margin-bottom:.5rem;}
  /* Statements */
  .stmt-line{font-size:.9375rem;line-height:1.45;}
  /* Core UI */
  .core-ui{width:100%;}
  /* Category system */
  .cat-system{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:.3125rem;}
  .cat-chip{font-size:.5625rem;padding:.3125rem .5rem;}
  /* Feature pair → 1 col */
  .feature-pair{grid-template-columns:1fr;gap:.625rem;}
  .fpair-item{padding:.875rem;}
  /* Data alert */
  .da-value{font-size:1rem;}
  .da-text{font-size:.75rem;}
  /* Chapter break */
  .chapter-break{margin-bottom:2.5rem;}
  /* Trust bar */
  .b2-trust{width:100%;}
  .b2-trust-item{flex:1 0 45%;justify-content:center;border-right:none;border-bottom:1px solid hsl(var(--border));}
  .b2-trust-item:nth-child(odd){border-right:1px solid hsl(var(--border));}
  .b2-trust-item:last-child{border-bottom:none;border-right:none;flex:0 0 100%;}
  /* Compare */
  .cch-without,.cr-without{display:none;}
  .compare-colhead{grid-template-columns:80px 1fr;}
  .compare-body .cmp-row{grid-template-columns:80px 1fr;}
  .cr-phase{font-size:.5625rem;padding:.875rem .625rem;}
  /* Bonus */
  .reel-slide{flex:0 0 92%;}
  .b2-header{margin-bottom:2.5rem;}
  .tool-n{width:24px;height:24px;font-size:.75rem;top:-8px;left:-8px;}
}
@media(max-width:380px){
  .tool-headline{font-size:1.625rem;}
  .cat-system{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));}
}

/* ══ PATH SIMULATOR ═════════════════════════════════════════ */
.sim-section{padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(3rem,6vw,5rem);}
.sim-wrap{max-width:560px;margin:0 auto;}
.sim-head{text-align:center;margin-bottom:clamp(1.25rem,2.5vw,1.75rem);}
.sim-title{
  font-size:clamp(.9375rem,1.8vw,1.125rem);font-weight:700;letter-spacing:-.03em;margin-bottom:.375rem;line-height:1.2;
  background:linear-gradient(180deg,#111 0%,#555 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sim-sub{font-size:.8125rem;color:hsl(var(--muted-foreground));line-height:1.6;}
/* Panel — state-aware background */
.sim-panel{
  background:linear-gradient(180deg,#ffffff 0%,#fafafa 100%);
  border:1px solid rgba(0,0,0,.06);
  border-radius:calc(var(--radius)*3);overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.08),0 40px 80px rgba(0,0,0,.06);
  transition:background .4s ease;
}
.sim-panel.exposed{background:linear-gradient(180deg,#ffffff 0%,#fff8f8 100%);}
.sim-panel.contained{background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);}
.sim-panel-head{padding:1rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;}
/* Toggle — depth + animated pill */
.sim-toggle{position:relative;display:inline-flex;background:rgba(0,0,0,.04);border-radius:999px;padding:4px;gap:0;box-shadow:inset 0 1px 2px rgba(0,0,0,.06);}
.sim-toggle-indicator{position:absolute;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:999px;background:#111;pointer-events:none;transition:transform .35s cubic-bezier(.16,1,.3,1);box-shadow:0 2px 6px rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,255,255,.2);}
.sim-toggle-btn{position:relative;z-index:1;padding:5px 14px;border-radius:999px;border:none;background:transparent;font-size:.75rem;font-weight:500;cursor:pointer;transition:color .25s ease,transform .2s ease;color:hsl(var(--muted-foreground));white-space:nowrap;flex:1;}
.sim-toggle-btn.active{color:#fff;font-weight:600;transform:translateY(-1px);}
/* Chip — pulsing state dot */
.sim-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.5rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:.275rem .7rem;transition:all .3s ease;}
.sim-chip.exposed{background:rgba(239,68,68,.08);color:#dc2626;border:1px solid rgba(239,68,68,.2);}
.sim-chip.contained{background:rgba(59,130,246,.08);color:#1d4ed8;border:1px solid rgba(59,130,246,.2);}
.sim-chip-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;animation:subtlePulse 3s ease-in-out infinite;}
.sim-chip.exposed .sim-chip-dot{background:#dc2626;}
.sim-chip.contained .sim-chip-dot{background:#1d4ed8;}
@keyframes subtlePulse{0%,100%{opacity:1}50%{opacity:.5}}
/* Scenario — fade+slide transition */
.sim-scenario{display:none;opacity:0;transform:translateY(10px);}
.sim-scenario.active{display:block;animation:simFadeIn .3s ease forwards;}
@keyframes simFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* Rows — interactive, lateral bar */
.sim-row{position:relative;display:grid;grid-template-columns:74px 1fr;gap:.75rem;padding:13px 1.375rem 13px 1.625rem;border-bottom:1px solid rgba(0,0,0,.05);align-items:start;transition:background .2s ease,transform .2s ease;cursor:default;}
.sim-row:last-child{border-bottom:none;}
.sim-row:hover{background:rgba(0,0,0,.018);transform:translateX(3px);}
/* Lateral progress bar */
.sim-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:0 2px 2px 0;opacity:.75;}
.scenario-without .sim-row::before{background:linear-gradient(to bottom,#ef4444,transparent);}
.scenario-with .sim-row::before{background:linear-gradient(to bottom,#3b82f6,transparent);}
.sim-phase-label{font-size:.5rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;padding-top:2px;opacity:.7;}
.scenario-without .sim-phase-label{color:#dc2626;}
.scenario-with .sim-phase-label{color:#1d4ed8;}
.sim-outcome{display:flex;flex-direction:column;gap:.2rem;}
.sim-outcome-head{font-size:.875rem;font-weight:600;color:hsl(var(--foreground));letter-spacing:-.02em;line-height:1.3;}
.sim-outcome-sub{font-size:.75rem;color:hsl(var(--muted-foreground));line-height:1.55;}
/* £4,000 — event block */
.sim-outcome-impact{
  font-size:1.125rem;font-weight:700;color:#ef4444;
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.18);
  padding:5px 10px;border-radius:6px;
  margin-top:.375rem;display:inline-block;
  animation:impactPop .4s ease both;
}
@keyframes impactPop{0%{transform:scale(.88);opacity:.5}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
.sim-footer{padding:.875rem 1.5rem;border-top:1px solid rgba(0,0,0,.06);text-align:center;font-size:.75rem;color:hsl(var(--muted-foreground));line-height:1.6;background:rgba(0,0,0,.018);}
.sim-footer strong{color:hsl(var(--foreground));font-weight:600;}
@media(max-width:600px){
  .sim-panel-head{flex-direction:column;align-items:flex-start;gap:.625rem;padding:.875rem 1rem;}
  .sim-row{grid-template-columns:60px 1fr;padding:11px 1rem 11px 1.25rem;}
  .sim-footer{padding:.75rem 1rem;}
}
/* ── Bloco 3 ────────────────────────────────────────── */
/* DS tokens */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

*{border-color:hsl(var(--border));}

.container{max-width:1100px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem);}

.bloco-3{background:hsl(var(--background));position:relative;}
.bloco-3::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:clamp(180px,25vw,320px);
  background:radial-gradient(ellipse 90% 100% at 75% 100%, rgba(59,130,246,.05) 0%, rgba(165,180,252,.03) 30%, transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* Header */
.b3-header{max-width:560px;margin:0 auto clamp(3rem,6vw,4.5rem);text-align:center;}
.b3-eyebrow{font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:hsl(var(--muted-foreground));margin-bottom:.875rem;display:flex;align-items:center;justify-content:center;gap:.75rem;}
.b3-eyebrow::before,.b3-eyebrow::after{content:'';flex:0 0 36px;height:1px;background:hsl(var(--border));}
.b3-headline{font-family:'Playfair Display',serif;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;letter-spacing:-.05em;line-height:1.15;color:hsl(var(--foreground));margin-bottom:.5rem;}
.b3-subhead{font-size:.875rem;font-family:Newsreader,serif;font-style:italic;font-weight:300;color:hsl(var(--muted-foreground));}

/* ── Gallery4 Carousel — case cards ────────────────────────────────
   Mirrors Gallery4 component: full-width overflow bleed, drag-free
   scroll, arrow buttons, dot nav, gradient mask on sides.
   Cards: fixed 320px wide (360px lg+), don't stretch to fill.
   ───────────────────────────────────────────────────────────────── */

/* Header row: headline left, arrows right (md+) */
.case-carousel-header {
  max-width: 600px;
  margin: 0 auto clamp(2rem,4vw,3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.case-carousel-header-text { display: flex; flex-direction: column; gap: .5rem; }
.case-carousel-arrows {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
  margin-top: .5rem;
}

.carousel-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .2s cubic-bezier(.16,1,.3,1), opacity .15s;
  color: hsl(var(--foreground));
  flex-shrink: 0;
}
.carousel-arrow:hover:not(:disabled) {
  background: hsl(var(--muted));
  border-color: hsl(var(--foreground));
  transform: scale(1.06);
}
.carousel-arrow:disabled { opacity: .3; cursor: not-allowed; pointer-events: none; transform: none; }
.carousel-arrow svg { width: 16px; height: 16px; }

/* Outer wrapper — full viewport width, bleeds past .container */
.case-carousel-outer {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Scrollable track */
.case-carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-left: clamp(1.25rem, 5vw, 3rem);
  /* Right pad so last card doesn't bleed into mask */
  padding-right: clamp(1.25rem, 5vw, 3rem);
  padding-bottom: 20px; /* avoid clipping box-shadow / card bottom edge */
}
.case-carousel-track::-webkit-scrollbar { display: none; }

/* Individual slide wrapper */
.case-carousel-item {
  flex: 0 0 350px;
  scroll-snap-align: start;
  cursor: default;
}
.case-carousel-item.is-next {
  cursor: pointer;
}
.case-carousel-item.is-prev {
  cursor: pointer;
}
@media (min-width: 768px) { .case-carousel-item { flex: 0 0 640px; } }
@media (min-width: 1024px) { .case-carousel-item { flex: 0 0 720px; } }

/* Case card — base */
.case-grid { display: contents; } /* neutralised — kept for data-reveal compat */
.case-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius)*2.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.04);
  transition: box-shadow .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1);
}
.case-card:hover {
  box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.07), 0 20px 40px rgba(0,0,0,.07);
  transform: translateY(-2px);
}

/* ── Split card (horizontal image + content) ── */
.case-card--split {
  flex-direction: row;
  height: auto;
}
.cc-img {
  flex: 0 0 38%;
  width: 38%;
  overflow: hidden;
  position: relative;
  min-height: 320px;
}
.cc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cc-body {
  flex: 1 1 62%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.375rem 1.375rem 1.125rem;
  gap: .625rem;
  min-width: 0;
}
.cc-top {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.cc-meta-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .4rem;
  flex-wrap: wrap;
}
.case-card--split .case-result-amount {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: 1;
  color: hsl(var(--foreground));
  display: block;
}
.case-card--split .case-result-label {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  line-height: 1.4;
}
.case-card--split .case-timing {
  margin-top: .25rem;
}
.case-card--split .case-city {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: hsl(var(--foreground));
}
.case-card--split .case-type {
  font-size: .5rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  letter-spacing: .03em;
}
.case-card--split .case-excerpt {
  font-family: Newsreader, serif;
  font-style: italic;
  font-size: .8125rem;
  line-height: 1.65;
  color: hsl(var(--muted-foreground));
  margin: 0;
  /* no line-clamp — multi-paragraph quotes must display in full */
}
.case-card--split .case-excerpt p {
  margin: 0;
}
.case-card--split .case-excerpt p + p {
  margin-top: .5em;
}
.case-card--split .case-footer {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: 0;
  border-top: 1px solid hsl(var(--border));
  padding-top: .75rem;
  margin-top: auto;
}
/* Mobile: vertical layout */
@media (max-width: 767px) {
  .case-card--split { flex-direction: column; }
  .cc-img { flex: none; width: 100%; height: 200px; min-height: unset; }
  .cc-body { padding: 1rem; gap: .5rem; }
  .case-carousel-item { flex: 0 0 92vw; }
}

/* Dot navigation */
.case-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
.case-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  padding: 0;
  background: hsl(var(--border));
  transition: background .2s, width .25s cubic-bezier(.16,1,.3,1);
}
.case-dot.active {
  background: hsl(var(--foreground));
  width: 20px;
}

/* Location bar */
.case-location{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-bottom:1px solid hsl(var(--border));background:hsl(var(--background));gap:.75rem;}
.case-city{font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:hsl(var(--foreground));white-space:nowrap;}
.case-type{font-size:.5625rem;font-weight:500;letter-spacing:.03em;color:hsl(var(--muted-foreground));text-align:right;line-height:1.4;}

/* Illustration */
.case-illustration{width:100%;height:210px;display:block;overflow:hidden;}
.case-illustration 
.case-illustration svg{width:100%;height:100%;}

/* Result anchor */
.case-result{padding:1.5rem 1.25rem 1rem;border-bottom:1px solid hsl(var(--border));}
.case-result-amount-wrap{display:inline-flex;flex-direction:column;align-items:flex-start;margin-bottom:.625rem;}
.case-result-amount{font-family:'Playfair Display',serif;font-size:clamp(1.875rem,4vw,2.5rem);font-weight:900;letter-spacing:-.06em;line-height:1;color:hsl(var(--foreground));display:block;}
.case-result-bar{display:block;height:3px;border-radius:2px;margin-top:.3rem;background:linear-gradient(90deg,#2563eb 0%,#3b82f6 55%,transparent 100%);width:80%;}
.case-result-label{font-size:.5625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--muted-foreground));}
/* Timing badge */
.case-timing{display:inline-flex;align-items:center;gap:.375rem;margin-top:.625rem;padding:.25rem .5rem;border-radius:2rem;background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.15);}
.case-timing-dot{width:5px;height:5px;border-radius:50%;background:#2563eb;flex-shrink:0;}
.case-timing-text{font-size:.5rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1d4ed8;}

/* Key Financial Outcomes strip */
/* ════════════════════════════════════════════════════════════════
   KEY FINANCIAL OUTCOMES — Premium animated section
   Architecture:
   · Scrolling ticker of 7 outcome chips (marquee, seamless loop)
   · Aggregate total card with count-up animation
   · Staggered micro-stats row (count-up per value)
   ════════════════════════════════════════════════════════════════ */

/* Section wrapper */
.b3-outcomes {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid hsl(var(--border));
}

/* Outcomes light editorial lede */
.b3-outcomes-lede {
  text-align: center;
  font-family: Newsreader, serif;
  font-style: italic;
  font-weight: 300;
  font-size: .9375rem;
  color: hsl(var(--muted-foreground));
  letter-spacing: -.01em;
  line-height: 1.6;
  max-width: 520px;
  margin: -.75rem auto clamp(1.75rem, 3.5vw, 2.5rem);
}

/* ── Eyebrow ── */
.b3-outcomes-eyebrow {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.b3-outcomes-eyebrow::before,
.b3-outcomes-eyebrow::after {
  content: '';
  flex: 0 0 40px;
  height: 1px;
  background: hsl(var(--border));
}

/* ── Ticker track (marquee of chips) ──────────────────────────── */
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.outcomes-ticker-wrap {
  overflow: hidden;
  position: relative;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  /* Fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.outcomes-ticker-track {
  display: flex;
  gap: .75rem;
  width: max-content;
  animation: ticker-scroll 22s linear infinite;
  will-change: transform;
}
.outcomes-ticker-track:hover { animation-play-state: paused; }

/* Individual outcome chip */
.outcome-chip {
  display: inline-flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem 1.375rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 2);
  flex-shrink: 0;
  min-width: 180px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
  transition: box-shadow .2s, transform .2s cubic-bezier(.16,1,.3,1), border-color .2s;
}
.outcome-chip:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.07), 0 8px 24px rgba(0,0,0,.06);
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.2);
}

.chip-amount {
  font-family: 'Playfair Display', serif;
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  color: hsl(var(--foreground));
}
.chip-bar {
  display: block;
  height: 2px;
  width: 40px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 60%, transparent 100%);
}
.chip-label {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: hsl(var(--foreground));
  line-height: 1.4;
}
.chip-city {
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin-top: .125rem;
}

/* ── Stats row: 3 aggregates ──────────────────────────────────── */
.outcomes-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: hsl(var(--border));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.03), 0 2px 8px rgba(0,0,0,.04);
}

.outcome-stat {
  background: hsl(var(--card));
  padding: 1.375rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  position: relative;
  overflow: hidden;
  transition: background .2s;
}
.outcome-stat:hover { background: hsl(var(--background)); }

/* Ghost number behind each stat — removed */
.outcome-stat::before {
  content: none;
}

.stat-micro {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.stat-amount {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: 1;
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
}
.bloco-3 .stat-label {
  font-size: .6875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  letter-spacing: -.01em;
  line-height: 1.4;
}
.stat-sub {
  font-size: .5625rem;
  color: hsl(var(--muted-foreground));
  font-family: Newsreader, serif;
  font-style: italic;
  margin-top: .125rem;
}

@media (max-width: 600px) {
  .outcomes-stats-row { grid-template-columns: 1fr; }
  .outcomes-ticker-wrap { -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .outcomes-ticker-track { animation: none !important; }
}

/* Excerpt */
.case-excerpt{padding:1rem 1.25rem;font-size:.8125rem;line-height:1.72;color:hsl(var(--muted-foreground));font-family:Newsreader,serif;font-style:italic;font-weight:300;letter-spacing:0;flex:1;}

/* Footer */
.case-footer{padding:.875rem 1.25rem;border-top:1px solid hsl(var(--border));background:hsl(var(--background));display:flex;align-items:flex-start;gap:.75rem;}
.case-initial{width:30px;height:30px;border-radius:50%;background:hsl(var(--muted));border:1px solid hsl(var(--border));display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:700;color:hsl(var(--muted-foreground));flex-shrink:0;letter-spacing:.02em;margin-top:1px;}
.case-name{font-size:.8125rem;font-weight:600;letter-spacing:-.02em;color:hsl(var(--foreground));line-height:1.3;}
.case-scope{font-size:.625rem;color:hsl(var(--muted-foreground));line-height:1.5;margin-top:.125rem;}

/* Footnote */
.b3-footnote{text-align:center;margin-top:clamp(2rem,4vw,3rem);font-size:.6875rem;color:hsl(var(--muted-foreground));font-style:italic;opacity:.7;}

/* ── "In their own words" section wrapper ── */
.b3-qual-section { margin-top: clamp(3rem,6vw,4.5rem); padding-top: clamp(2.5rem,5vw,3.5rem); border-top: 1px solid hsl(var(--border)); }
.b3-qual-eyebrow { font-size: .5625rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--muted-foreground)); text-align: center; margin-bottom: clamp(1.75rem,3.5vw,2.5rem); display: flex; align-items: center; justify-content: center; gap: .75rem; }
.b3-qual-eyebrow::before, .b3-qual-eyebrow::after { content: ''; flex: 0 0 40px; height: 1px; background: hsl(var(--border)); }

/* ── "In their own words" — scrolling marquee columns ─────────────
   Mirrors the TestimonialsColumn React/Motion component pattern.
   Pure CSS animation — no external deps.
   3 columns desktop · 2 columns tablet · 1 column mobile
   Each column scrolls at a different speed (15s / 19s / 17s)
   Mask gradient fades cards in/out at top and bottom.
   ───────────────────────────────────────────────────────────────── */
.qual-columns-wrap {
  display: flex;
  gap: 1.25rem;
  max-height: 680px;
  overflow: hidden;
  /* Fade top and bottom — identical to Motion component's mask-image */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
  mask-image:         linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
}

/* Each column is a clipped viewport */
.qual-col {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.qual-col:nth-child(2) { display: none; }
.qual-col:nth-child(3) { display: none; }

@media (min-width: 640px)  { .qual-col:nth-child(2) { display: flex; } }
@media (min-width: 1024px) { .qual-col:nth-child(3) { display: flex; } }

/* The scrolling track — contains cards × 2 for seamless loop */
.qual-track {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  /* Animation is set inline per column via --dur custom property */
  animation: qual-scroll var(--dur, 15s) linear infinite;
  will-change: transform;
}

@keyframes qual-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .qual-track { animation: none !important; }
}

/* Card — preserved exactly from original qual-card design */
.qual-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 2.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.04);
  /* No hover transform — cards are in motion */
  flex-shrink: 0;
}
.qual-meta    { padding: .875rem 1.25rem .75rem; border-bottom: 1px solid hsl(var(--border)); }
.qual-location{ font-size: .5rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: .25rem; }
.qual-name    { font-size: .9375rem; font-weight: 700; letter-spacing: -.03em; color: hsl(var(--foreground)); }
.qual-body    { padding: 1.25rem 1.25rem 1rem; flex: 1; display: flex; flex-direction: column; gap: .75rem; }
.qual-headline{ font-family: 'Playfair Display', serif; font-size: clamp(1.1rem,2.5vw,1.375rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.25; color: hsl(var(--foreground)); }
.qual-description{ font-size: .8125rem; line-height: 1.72; color: hsl(var(--muted-foreground)); font-family: Newsreader, serif; font-style: italic; font-weight: 300; }
.qual-stat    { display: flex; align-items: baseline; gap: .375rem; padding: .875rem 1.25rem; border-top: 1px solid hsl(var(--border)); background: hsl(var(--background)); }
.qual-stat-amount   { font-family: 'Playfair Display', serif; font-size: 1.125rem; font-weight: 900; letter-spacing: -.05em; color: hsl(var(--foreground)); }
.qual-stat-bar{ display: block; height: 2px; border-radius: 2px; width: 28px; background: linear-gradient(90deg, #2563eb, #3b82f6); flex-shrink: 0; align-self: center; margin: 0 .25rem; }
.qual-stat-context  { font-size: .625rem; color: hsl(var(--muted-foreground)); letter-spacing: -.01em; line-height: 1.4; }

/* Scroll reveal */
[data-reveal]{opacity:0;transition-property:opacity,transform;transition-timing-function:cubic-bezier(.16,1,.3,1);transition-duration:.65s;}

[data-reveal="fade-up"]{transform:translateY(20px);}
[data-reveal="fade-up-sm"]{transform:translateY(10px);transition-duration:.5s;}
[data-reveal="case-1"]{transform:translateY(24px);transition-duration:.6s;}
[data-reveal="case-2"]{transform:translateY(24px);transition-duration:.6s;transition-delay:.1s;}
[data-reveal="case-3"]{transform:translateY(24px);transition-duration:.6s;transition-delay:.2s;}
[data-reveal="case-4"]{transform:translateY(24px);transition-duration:.6s;transition-delay:.3s;}
[data-reveal="case-5"]{transform:translateY(24px);transition-duration:.6s;transition-delay:.4s;}
[data-reveal="case-6"]{transform:translateY(24px);transition-duration:.6s;transition-delay:.5s;}
[data-reveal="case-7"]{transform:translateY(24px);transition-duration:.6s;transition-delay:.6s;}
[data-reveal="qual-1"]{transform:translateY(24px);transition-duration:.6s;}
[data-reveal="qual-2"]{transform:translateY(24px);transition-duration:.6s;transition-delay:.1s;}
[data-reveal="qual-3"]{transform:translateY(24px);transition-duration:.6s;transition-delay:.2s;}

/* Responsive */
@media(max-width:860px){[data-reveal="case-2"],[data-reveal="case-3"]{transition-delay:0s;}[data-reveal="qual-2"],[data-reveal="qual-3"]{transition-delay:0s;}}
@media(max-width:480px){.case-result-amount{font-size:2rem;}}
@media(max-width:860px){.case-card:hover{transform:none;}}
@media(prefers-reduced-motion:reduce){[data-reveal]{transform:none!important;transition-duration:.2s!important;transition-delay:0s!important;}.case-card{transition:none!important;}.case-carousel-track{scroll-behavior:auto;}}

/* ── Mobile qual single column ─────────────────────────────────────
   < 640px: hide the three desktop columns, show a single column
   containing all 14 cards in the same vertical auto-scroll animation.
   Duration 70s — all cards complete one full loop at reading pace
   (≈ 5 seconds per card). Identical mechanics to desktop columns.
   ─────────────────────────────────────────────────────────────── */
.qual-col--mobile { display: none; }   /* hidden on desktop */

@media (max-width: 639px) {
  .qual-col--mobile          { display: flex; }     /* show on mobile */
  .qual-col:not(.qual-col--mobile) { display: none !important; } /* hide desktop cols */
}
/* ── Bloco 4 ────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — ROOT TOKENS
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

* { border-color: hsl(var(--border)); }

/* ── Keyframes ── */

  to   { background-position: 350% 50%, 350% 50%; }
}
@keyframes scarcity-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}
@keyframes total-pop {
  0%   { transform: scale(.95); opacity: .5; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes count-up-flash {
  0%   { opacity: .4; }
  100% { opacity: 1; }
}

/* ── Section shell ── */
.bloco-4 {
  position: relative;
  background: hsl(var(--background));
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(3rem, 7vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
/* Aurora bleed — soft glow at the very top of bloco-4 */
.bloco-4::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(100px, 18vw, 220px);
  background: linear-gradient(180deg, rgba(59,130,246,.04) 0%, rgba(165,180,252,.02) 40%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
/* ── Bloco-4 aurora refactor: hide animated layer, use static gradients ── */
.bloco-4 .aurora-inset { display: none !important; }
.bloco-4::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 85% 10%, rgba(59,130,246,.06) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 15% 90%, rgba(165,180,252,.04) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* ── Zone layout ── */
.zone {
  position: relative; z-index: 1;
  margin-left: auto; margin-right: auto;
  padding-left: clamp(1.25rem, 5vw, 2.5rem);
  padding-right: clamp(1.25rem, 5vw, 2.5rem);
}
.zone--wide   { max-width: 760px; }
.zone--narrow { max-width: 520px; }
.zone--mid    { max-width: 620px; }
.zone--hero   { max-width: 440px; }

/* ══════════════════════════════════════════════════════════════════════
   BLOCK HEADER
   ══════════════════════════════════════════════════════════════════════ */
.b4-header { text-align: center; margin-bottom: clamp(3rem, 6vw, 5rem); }
.b4-overline {
  font-size: .625rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: hsl(var(--muted-foreground));
  margin-bottom: .875rem;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
}
.b4-overline::before, .b4-overline::after {
  content: ''; flex: 0 0 40px; height: 1px; background: hsl(var(--border));
}
.b4-headline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 700;
  letter-spacing: -.06em; line-height: 1.1;
  color: hsl(var(--foreground)); margin-bottom: .5rem;
}
.b4-subhead {
  font-size: .875rem; font-style: italic;
  color: hsl(var(--muted-foreground));
  font-family: Newsreader, serif; font-weight: 300;
}

/* ══════════════════════════════════════════════════════════════════════
   PUNCH 1 — VISUAL PROOF
   Cost stack: 3 items only, no descriptions, no labels
   ══════════════════════════════════════════════════════════════════════ */
.punch-1 {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  position: relative; z-index: 1;
}

.cost-stack {
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.06),
    0 40px 80px rgba(0,0,0,.08);
  background: hsl(var(--background));
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.cost-stack-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: .625rem 1.5rem;
  background: hsl(var(--foreground));
}
.cost-stack-head-label {
  font-size: .5rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
}

.cost-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid hsl(var(--border));
  gap: 1rem;
  opacity: 0; transform: translateX(-12px);
  transition: opacity .4s cubic-bezier(.16,1,.3,1),
              transform .4s cubic-bezier(.16,1,.3,1),
              background .12s;
}
.cost-item:last-child { border-bottom: none; }
.cost-item:hover {
  background: rgba(0,0,0,.025);
  transform: translateX(4px);
}
.cost-item.is-visible { opacity: 1; transform: none; }
.cost-item.is-visible:hover { transform: translateX(4px); }

.cost-item-name {
  font-size: .9375rem; font-weight: 400;
  color: hsl(var(--foreground)); line-height: 1.4;
  display: flex; flex-direction: column; gap: .3rem;
}
.cost-item-qual {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .5rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: hsl(var(--muted-foreground));
  opacity: .65; font-style: normal;
}
.cost-item-qual::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; flex-shrink: 0; opacity: .7;
}
.cost-item-value {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 700;
  color: hsl(var(--foreground)); letter-spacing: -.03em;
  white-space: nowrap; font-variant-numeric: toolular-nums;
  flex-shrink: 0;
}

/* Total row */
.cost-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 1.5rem;
  background: hsl(var(--foreground));
  gap: 1rem;
}
.cost-total-label {
  font-size: .5rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
  white-space: nowrap;
}
.cost-total-number {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 900;
  color: #fff; letter-spacing: -.05em;
  font-variant-numeric: toolular-nums; line-height: 1;
  white-space: nowrap;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.cost-total-number.flash {
  animation: total-pop .5s cubic-bezier(.16,1,.3,1) forwards;
}

/* Context line under the stack */
.cost-context {
  font-size: .875rem; line-height: 1.7;
  color: hsl(var(--muted-foreground));
  text-align: center;
}
.cost-context strong {
  color: hsl(var(--foreground)); font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   PUNCH 2 — REFRAME
   £14.70 is not the decision. These are.
   ══════════════════════════════════════════════════════════════════════ */
.punch-2 {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid hsl(var(--border));
  position: relative; z-index: 1;
}

.reframe-block {
  display: flex; flex-direction: column; gap: 0;
}

.reframe-primary {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 4vw, 2.125rem); font-weight: 700;
  letter-spacing: -.05em; line-height: 1.15;
  color: hsl(var(--foreground));
  padding-bottom: 1.375rem;
  border-bottom: 1px solid hsl(var(--border));
}

/* Cycle line — replaces reframe-secondary */
.reframe-cycle-line {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 4vw, 2.125rem); font-weight: 700;
  letter-spacing: -.05em; line-height: 1.15;
  color: hsl(var(--foreground));
  padding-top: 1.375rem; padding-bottom: 1.375rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
}

/* The sliding stage — clips the word */
.cycle-wrapper {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  position: relative;
}
.cycle-stage {
  display: inline-flex;
  align-items: baseline;
  transition: width .35s cubic-bezier(.16,1,.3,1);
}
.cycle-word {
  display: inline-block;
  white-space: nowrap;
  color: hsl(var(--foreground));
  will-change: transform, opacity;
}
/* Keyframes for word transitions */
@keyframes word-in {
  0%   { transform: translateY(-18px); opacity: 0; filter: blur(6px); }
  100% { transform: translateY(0);     opacity: 1; filter: blur(0px); }
}
@keyframes word-out {
  0%   { transform: translateY(0);    opacity: 1; filter: blur(0px); }
  100% { transform: translateY(18px); opacity: 0; filter: blur(6px); }
}
.cycle-word.entering {
  animation: word-in .38s cubic-bezier(.16,1,.3,1) forwards;
}
.cycle-word.exiting {
  animation: word-out .28s cubic-bezier(.4,0,1,1) forwards;
}
.cycle-suffix {
  display: inline-block;
  margin-left: .18em;
}

.reframe-tertiary {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.25rem, 3.5vw, 1.75rem); font-weight: 700;
  letter-spacing: -.05em; line-height: 1.2;
  color: hsl(var(--foreground));
  padding-top: 1.375rem;
}

/* ══════════════════════════════════════════════════════════════════════
   PUNCH 3 — DECISION / COMPARISON + PRICE BOX
   ══════════════════════════════════════════════════════════════════════ */
.punch-3 {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  position: relative; z-index: 1;
}

/* Inline comparison — no heavy card */
.inline-compare {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
}
.compare-col {
  flex: 1; padding: 1.5rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.compare-col--right {
  background: linear-gradient(135deg, #0f172a, #111827);
  border-left: 1px solid hsl(var(--border));
}
.compare-label {
  font-size: .5rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: hsl(var(--muted-foreground));
}
.compare-col--right .compare-label { color: rgba(255,255,255,.4); }
.compare-value {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.375rem, 4vw, 1.75rem); font-weight: 900;
  letter-spacing: -.05em; line-height: 1;
  color: hsl(var(--foreground)); font-variant-numeric: toolular-nums;
}
.compare-col--right .compare-value { color: #fff; }
.compare-sub {
  font-size: .6875rem; color: hsl(var(--muted-foreground));
  line-height: 1.4; margin-top: auto;
}
.compare-col--right .compare-sub { color: rgba(255,255,255,.45); }
.compare-was {
  font-family: 'Playfair Display', serif;
  font-size: .875rem; font-weight: 600;
  color: rgba(255,255,255,.35);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,.35);
  line-height: 1; margin-bottom: -.25rem;
}

/* ── Price box (unchanged from v2) ── */
.price-reveal-section {
  position: relative; z-index: 1;
}
.price-reveal-box {
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 2.5);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06),
    0 4px 8px rgba(0,0,0,.05),
    0 24px 60px rgba(0,0,0,.09);
  background: hsl(var(--background));
}
.prb-scarcity-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .625rem 1.5rem;
  background: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--border));
  font-size: .6875rem; font-weight: 500;
  color: hsl(var(--foreground));
}
.prb-scarcity-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ef4444; flex-shrink: 0;
  animation: scarcity-pulse 1.6s ease-in-out infinite;
}
.prb-product-row {
  padding: 1.5rem 1.5rem .875rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.prb-product {
  font-size: .75rem; font-weight: 600;
  color: hsl(var(--foreground)); letter-spacing: -.01em;
  margin-bottom: .375rem;
}
.prb-components {
  font-size: .6rem; color: hsl(var(--muted-foreground));
  line-height: 1.6; letter-spacing: .01em;
}
.prb-dot { margin: 0 .25rem; opacity: .4; }
.prb-body {
  padding: 1.5rem; display: flex; flex-direction: column;
  align-items: center; gap: 1rem; text-align: center;
}
.prb-price-row {
  display: flex; align-items: baseline;
  justify-content: center; gap: .5rem;
}
.prb-price-was {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em;
  color: hsl(var(--muted-foreground));
  text-decoration: line-through;
  text-decoration-color: hsl(var(--muted-foreground));
  opacity: .5; line-height: 1;
}
.prb-price-arrow { font-size: .75rem; color: hsl(var(--border)); flex-shrink: 0; }
.prb-price {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 9vw, 3.75rem); font-weight: 900;
  letter-spacing: -.06em; line-height: 1; color: hsl(var(--foreground));
}
.prb-conditions {
  font-size: .6875rem; color: hsl(var(--muted-foreground));
  letter-spacing: .01em; opacity: .8;
}
.btn-prb {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .625rem; width: 100%;
  padding: 1.125rem 2rem;
  font-family: Inter, sans-serif; font-size: 1rem;
  font-weight: 600; line-height: 1.35; text-align: center;
  color: #fff; border: none; border-radius: var(--radius);
  cursor: pointer; text-decoration: none; letter-spacing: -.01em;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #3b82f6 100%);
  background-size: 200% 200%; background-position: 0% 50%;
  box-shadow:
    0 4px 24px rgba(37,99,235,.30),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition:
    background-position 250ms cubic-bezier(0.16,1,0.3,1),
    box-shadow          250ms cubic-bezier(0.16,1,0.3,1),
    transform           250ms cubic-bezier(0.16,1,0.3,1);
}
.btn-prb:hover {
  background-position: 100% 50%;
  box-shadow:
    0 6px 32px rgba(37,99,235,.45),
    inset 0 1px 0 rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.btn-prb:active { transform: scale(.98); }
.btn-prb::after {
  content: ''; position: absolute;
  top: -50%; left: -75%; width: 50%; height: 200%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: skewX(-15deg);
  transition: left 0.6s cubic-bezier(0.16,1,0.3,1);
}
.btn-prb:hover::after { left: 125%; }
.btn-arrow {
  position: relative; font-size: 1.1em; flex-shrink: 0;
  transition: transform .2s cubic-bezier(0.16,1,0.3,1);
}
.btn-prb:hover .btn-arrow { transform: translateX(5px); }
.prb-footer {
  padding: .875rem 1.5rem; border-top: 1px solid rgba(0,0,0,.06);
  text-align: center; background: rgba(0,0,0,.015);
  font-size: .625rem; color: hsl(var(--muted-foreground));
  font-style: italic; opacity: .75;
}

/* ══════════════════════════════════════════════════════════════════════
   SCROLL REVEAL — mixed directions for rhythm
   ══════════════════════════════════════════════════════════════════════ */

[data-reveal="fade-up"]     { transform: translateY(24px); }
[data-reveal="fade-up-sm"]  { transform: translateY(12px); transition-duration: .45s; }
[data-reveal="slide-left"]  { transform: translateX(-20px); }
[data-reveal="slide-right"] { transform: translateX(20px); }
[data-reveal="scale"]       { transform: translateY(16px) scale(.985); transform-origin: center top; }

/* ── Responsive ── */
@media (max-width: 560px) {
  .inline-compare { flex-direction: column; }
  .compare-col--right { border-left: none; border-top: 1px solid hsl(var(--border)); }
  .cost-stack-head { padding: .625rem 1rem; }
  .cost-item { padding: 1rem; }
  .cost-total-row { padding: 1rem; }
  .prb-product-row, .prb-body, .prb-footer, .prb-scarcity-row {
    padding-left: 1.125rem; padding-right: 1.125rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transform: none !important; transition-duration: .2s !important; }
  
  .btn-prb::after { display: none; }
  .prb-scarcity-dot { animation: none !important; }
  .cost-item { transition-duration: .2s !important; }
  .cost-item:hover { transform: none; }
  .cost-total-number.flash { animation: none !important; }
}
/* ── Drift typing sequence ── */
.drift-typing {
  padding: 1.125rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  background: hsl(var(--foreground));
  font-size: 1.125rem;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  line-height: 1.6;
  letter-spacing: -.01em;
  min-height: 0;
  overflow: hidden;
}
.drift-typing .drift-line {
  display: block;
  overflow: hidden;
  white-space: pre;
}
.drift-typing .drift-cursor {
  display: inline-block;
  width: 2px; height: 1.1em;
  background: rgba(255,255,255,.5);
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: cursor-blink .65s step-end infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.drift-typing .drift-line + .drift-line {
  margin-top: .25rem;
}
@media (max-width: 560px) {
  .drift-typing { font-size: 1rem; padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .drift-typing .drift-cursor { animation: none !important; }
}
/* ── Bloco 5 ────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — ROOT TOKENS — copied without modifications
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════════════ */

/* Two-column layout */
.bundle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}

/* Document stack scene */
.stack-scene {
  position: relative;
  height: clamp(540px, 62vw, 800px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-card {
  position: absolute;
  width: clamp(270px, 32vw, 420px);
  border-radius: 12px;
  overflow: hidden;
  transform-origin: center bottom;
  transition: transform .38s cubic-bezier(.16,1,.3,1),
              box-shadow .38s cubic-bezier(.16,1,.3,1);
}

.doc-card.bonus-3 {
  transform: rotate(-5.5deg) translate(-26px, 30px);
  box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.05);
  z-index: 1;
}
.doc-card.bonus-2 {
  transform: rotate(-2.5deg) translate(-12px, 17px);
  box-shadow: 0 6px 20px rgba(0,0,0,.09), 0 2px 5px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.05);
  z-index: 2;
}
.doc-card.bonus-1 {
  transform: rotate(1.5deg) translate(12px, 8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05);
  z-index: 3;
}
.doc-card.main-xlsx {
  transform: rotate(0deg) translate(0, 0);
  z-index: 4;
}

/* Hover: fan out */
.stack-scene:hover .doc-card.bonus-3 { transform: rotate(-9deg) translate(-94px, 44px); }
.stack-scene:hover .doc-card.bonus-2 { transform: rotate(-4deg) translate(-50px, 28px); }
.stack-scene:hover .doc-card.bonus-1 { transform: rotate(3.5deg) translate(36px, 16px); }

/* Card internals */
.doc-header {
  padding: 13px 15px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.doc-icon {
  width: 32px; height: 32px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.doc-icon svg { width: 17px; height: 17px; }
.doc-meta { flex: 1; min-width: 0; }
.doc-filename {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-type-label {
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin-top: 1px;
}
.doc-body { padding: 13px 15px 15px; }
.doc-title {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: hsl(var(--foreground));
  line-height: 1.3;
  margin-bottom: 4px;
}
.doc-desc { font-size: .6875rem; color: hsl(var(--muted-foreground)); line-height: 1.5; }

.bonus-tag {
  display: inline-flex;
  align-items: center;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 9999px;
  border: 1px solid;
  margin-bottom: 6px;
}
.bonus-tag.b1 { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.bonus-tag.b2 { background: #dbeafe; border-color: #bfdbfe; color: #1d4ed8; }
.bonus-tag.b3 { background: #f3e8ff; border-color: #e9d5ff; color: #6b21a8; }

/* ── Excel card ── */
.main-xlsx { background: #fff; }
.main-xlsx .doc-header { background: #f0fdf4; border-color: #d1fae5; }
.main-xlsx .doc-icon   { background: #dcfce7; }
.main-xlsx .doc-filename { color: #166534; }
.main-xlsx .doc-type-label { color: #16a34a; }

.xlsx-preview {
  padding: 10px 13px 8px;
  border-bottom: 1px solid hsl(var(--border));
}
.xlsx-row {
  display: grid;
  grid-template-columns: 88px 1fr 62px;
  gap: 4px;
  margin-bottom: 3px;
  align-items: center;
}
.xlsx-cell { height: 13px; border-radius: 2px; background: hsl(var(--muted)); }
.xlsx-cell.header  { background: #dcfce7; height: 14px; }
.xlsx-cell.value   { background: #f0fdf4; }
.xlsx-cell-text {
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  padding: 0 3px;
  display: flex;
  align-items: center;
  height: 14px;
}
.xlsx-output {
  margin-top: 8px;
  padding: 7px 10px;
  background: #166534;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.xlsx-output-label { font-size: .5625rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #86efac; }
.xlsx-output-value { font-size: .75rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.xlsx-tabs {
  display: flex; gap: 2px;
  padding: 6px 13px 8px;
  background: #f8fffe;
}
.xlsx-tab {
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: #fff;
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
}
.xlsx-tab.active { background: #166534; color: #fff; border-color: #166534; }

/* ── Bloco 5 — sec-contents header ── */
.sec-contents { background: hsl(var(--background)); position: relative; }
.contents-header {
  text-align: center;
  margin-bottom: clamp(.625rem, 1.5vw, 1rem);
}
.contents-eyebrow {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: .75rem;
}
.contents-headline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1.1;
  color: hsl(var(--foreground));
  margin-bottom: .625rem;
}
.contents-sub {
  font-size: .9375rem;
  color: hsl(var(--muted-foreground));
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── Bonus PDF cards ── */
.doc-card.bonus-1 { background: #fff; }
.doc-card.bonus-1 .doc-header { background: #fffbeb; border-color: #fde68a; }
.doc-card.bonus-1 .doc-icon { background: #fef3c7; }
.doc-card.bonus-2 { background: #fff; }
.doc-card.bonus-2 .doc-header { background: #eff6ff; border-color: #bfdbfe; }
.doc-card.bonus-2 .doc-icon { background: #dbeafe; }
.doc-card.bonus-3 { background: #fff; }
.doc-card.bonus-3 .doc-header { background: #fdf4ff; border-color: #e9d5ff; }
.doc-card.bonus-3 .doc-icon { background: #f3e8ff; }

.pdf-lines { padding: 10px 14px; border-bottom: 1px solid hsl(var(--border)); }
.pdf-line { height: 7px; border-radius: 20px; background: hsl(var(--muted)); margin-bottom: 5px; }
.pdf-line:last-child { margin-bottom: 0; }
.pdf-line.short { width: 65%; }
.pdf-line.shorter { width: 45%; }
.pdf-checklist { padding: 10px 14px; }
.pdf-check-row { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.pdf-check-box { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.pdf-check-line { height: 6px; border-radius: 20px; background: hsl(var(--muted)); flex: 1; }

/* ── Contents list panel ── */
.contents-panel { display: flex; flex-direction: column; gap: 0; }

.contents-intro {
  font-size: .9375rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.72;
  margin-bottom: 1.75rem;
}

.item-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
  border: 1px dashed hsl(var(--border));
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
}

.item-row {
  display: flex;
  gap: 14px;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px dashed hsl(var(--border));
  align-items: flex-start;
  transition: background .18s;
  position: relative;
  overflow: hidden;
}

/* Grid pattern — topleft radial fade, same logic as grid-feature-cards */
.item-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(hsl(var(--border) / .7) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--border) / .7) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 55% 90% at top left, white 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 55% 90% at top left, white 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Raise content above grid pattern */
.item-row > * { position: relative; z-index: 1; }

.item-row:hover { background: rgba(0,0,0,.025); }
.item-row:first-child { border-top: none; }
.item-row:last-child { border-bottom: none; }

.item-icon-wrap {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.item-icon-wrap svg { width: 18px; height: 18px; }
.item-info { flex: 1; }
.item-tag {
  display: inline-block;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 9999px;
  border: 1px solid;
  margin-bottom: 4px;
}
.item-tag.main   { background: #dcfce7; border-color: #86efac; color: #166534; }
.item-tag.bonus  { background: hsl(var(--muted)); border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.item-title { font-size: .9375rem; font-weight: 600; letter-spacing: -.03em; color: hsl(var(--foreground)); margin-bottom: 3px; }
.item-desc { font-size: .8125rem; color: hsl(var(--muted-foreground)); line-height: 1.55; }

/* ── Price block ── */
.price-block {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 2);
  padding: 1.375rem 1.5rem 1.5rem;
}
.price-line {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .375rem;
}
.price-amount {
  font-family: 'Playfair Display', serif;
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -.05em;
  color: hsl(var(--foreground));
  line-height: 1;
}
.price-context { font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.price-conditions {
  font-size: .75rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

/* Shiny CTA — GPU-accelerated border spin via ::before rotate */
.shiny-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 9999px;
  padding: 1rem 2rem;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -.01em;
  cursor: pointer;
  border: none;
  background: #111;
  box-shadow: inset 0 0 0 1px #1a1818, 0 4px 24px rgba(37,99,235,.20);
  outline: none;
  overflow: hidden;
  z-index: 0;
  will-change: transform;
  transition: opacity .2s, box-shadow .2s;
  text-align: center;
}
/* Spinning light beam — GPU-composited (transform: rotate) */
.shiny-cta::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent 0%, #2563eb 5%, #3b82f6 15%, #2563eb 30%, transparent 40%, transparent 100%
  );
  animation: shiny-spin 2.5s linear infinite;
  z-index: -2;
  will-change: transform;
}
/* Solid fill that masks the inner area — only the 2px border ring shows */
.shiny-cta::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: #111;
  z-index: -1;
}
@keyframes shiny-spin {
  to { transform: rotate(360deg); }
}
.shiny-cta:hover {
  opacity: .9;
  box-shadow: inset 0 0 0 1px #1a1818, 0 6px 32px rgba(37,99,235,.35);
}

.guarantee-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: .875rem;
  font-size: .75rem;
  color: hsl(var(--muted-foreground));
}
.guarantee-line svg { width: 14px; height: 14px; color: #2563eb; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════
   S11B — GUARANTEE + WHO THIS IS FOR (light, same section)
   ══════════════════════════════════════════════════════════════════════ */
.sec-guarantee { background: hsl(var(--background)); }

.guarantee-section-rule {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}
.guarantee-section-rule-line {
  height: 1px;
  background: hsl(var(--border));
}

.guarantee-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
}

/* Guarantee card */
.guarantee-card-main {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 2.5);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  position: relative;
  overflow: hidden;
}
/* Top highlight */
.guarantee-card-main::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 1px solid rgba(255,255,255,.8);
  pointer-events: none;
}
.guarantee-card-top {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.guarantee-seal {
  width: 52px; height: 52px;
  background: hsl(var(--muted));
  border: 1.5px solid hsl(var(--border));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #2563eb;
  flex-shrink: 0;
  position: relative;
}
.guarantee-seal::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid hsl(var(--border));
}
.guarantee-eyebrow {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: .25rem;
}
.guarantee-headline {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.2;
  color: hsl(var(--foreground));
}
.guarantee-body-text {
  font-size: .875rem;
  line-height: 1.75;
  color: hsl(var(--muted-foreground));
}
.guarantee-body-text p + p { margin-top: .625rem; }
.guarantee-body-text a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }

.guarantee-punchy {
  padding-top: .75rem;
  border-top: 1px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.guarantee-punch {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: .9375rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  line-height: 1.45;
}

/* Who card */
/* ── Who — System Match (new design) ─────────────── */
.who-match {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 2.5);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
}

.who-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.who-col-header {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: 1.125rem 1.5rem .875rem;
  border-bottom: 1px solid hsl(var(--border));
}
.who-col--yes .who-col-header { background: #eff6ff; }
.who-col--no  .who-col-header { background: #fef2f2; }
.who-col--no  { border-left: 1px solid hsl(var(--border)); }

.who-col-icon-wrap {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.who-col--yes .who-col-icon-wrap { background: rgba(37,99,235,.12); color: #2563eb; }
.who-col--no  .who-col-icon-wrap { background: rgba(239,68,68,.10); color: #dc2626; }
.who-col-icon-wrap svg { width: 13px; height: 13px; }

.who-col-title {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
}
.who-col--yes .who-col-title { color: #1e40af; }
.who-col--no  .who-col-title { color: #991b1b; }

.who-list-new {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: .375rem 0;
}

.who-item-new {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid hsl(var(--border) / .6);
  transition: background .14s;
}
.who-item-new:last-child { border-bottom: none; }
.who-col--yes .who-item-new:hover { background: rgba(37,99,235,.035); }
.who-col--no  .who-item-new:hover { background: rgba(239,68,68,.03); }

.who-item-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.who-col--yes .who-item-icon { background: #eff6ff; color: #2563eb; }
.who-col--no  .who-item-icon { background: #fef2f2; color: #dc2626; }
.who-item-icon svg { width: 17px; height: 17px; }

.who-item-text {
  flex: 1;
  font-size: .8125rem;
  line-height: 1.6;
  color: hsl(var(--foreground));
  font-weight: 500;
  padding-top: .125rem;
  max-width: 260px;
}
.who-item-text em {
  font-style: normal;
  font-weight: 600;
}

.who-match-footer {
  padding: .875rem 1.5rem;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / .5);
  text-align: center;
  font-size: .8125rem;
  font-style: italic;
  color: hsl(var(--muted-foreground));
}

@media (max-width: 640px) {
  .who-columns { grid-template-columns: 1fr; }
  .who-col--no { border-left: none; border-top: 1px solid hsl(var(--border)); }
  .who-col-header { padding: 1rem 1.25rem .75rem; }
  .who-item-new { padding: .75rem 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   FAQ (dark section)
   ══════════════════════════════════════════════════════════════════════ */
.sec-faq {
  background: #171717;
  color: hsl(0 0% 98%);
}

.faq-header { text-align: center; margin-bottom: 2.5rem; }
.faq-eyebrow {
  font-size: .625rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: #3b82f6; margin-bottom: .75rem;
}
.faq-headline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1.2;
  color: hsl(0 0% 98%);
}

.faq-list { display: flex; flex-direction: column; gap: .625rem; }

.faq-item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
  transition: border-color .2s cubic-bezier(.16,1,.3,1);
}
.faq-item.open { border-color: rgba(59,130,246,.35); }

.faq-btn {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 1.25rem 1.375rem;
  text-align: left; color: hsl(0 0% 98%);
  transition: background .15s;
}
.faq-btn:hover { background: rgba(255,255,255,.03); }

/* CRITICAL — never crushes on mobile */
.faq-text {
  flex: 1; min-width: 0;
  font-family: Inter, sans-serif;
  font-size: .9375rem; font-weight: 600;
  line-height: 1.45; letter-spacing: -.01em;
}
.faq-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  margin-top: .1rem;
  transition: transform .3s cubic-bezier(.16,1,.3,1),
              border-color .2s, background .2s, color .2s;
  color: rgba(255,255,255,.5);
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  border-color: #3b82f6;
  background: rgba(59,130,246,.14);
  color: #3b82f6;
}
.faq-icon svg { width: 10px; height: 10px; }

.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height .4s cubic-bezier(.16,1,.3,1);
}
.faq-item.open .faq-answer { max-height: 500px; }

.faq-answer-inner {
  padding: 0 1.375rem 1.375rem;
  font-size: .875rem;
  line-height: 1.78;
  color: rgba(255,255,255,.52);
}
.faq-answer-inner p + p { margin-top: .75rem; }

/* ══════════════════════════════════════════════════════════════════════
   FINAL CTA (dark, flows from FAQ)
   ══════════════════════════════════════════════════════════════════════ */
.sec-final-cta {
  background: #171717;
  padding-top: 0;
}

.final-inner {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}

.dark-rule {
  width: 100%; height: 1px;
  background: rgba(255,255,255,.07);
  margin: 3.5rem 0;
}

.final-statement { margin-bottom: 2.75rem; }
.final-stmt-line {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.25rem, 3.5vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.3;
  color: hsl(0 0% 98%);
}
.final-stmt-line + .final-stmt-line { margin-top: .625rem; }
.final-stmt-line em { color: #3b82f6; font-style: normal; }

/* What you get — matches reference item-list style but dark */
.wyg-box {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: calc(var(--radius) * 2);
  padding: 1.75rem;
  text-align: left;
  margin-bottom: 2rem;
}
.wyg-eyebrow {
  font-size: .625rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: #3b82f6; margin-bottom: 1.125rem;
}
.wyg-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.wyg-row {
  display: flex;
  gap: 12px;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  align-items: flex-start;
}
.wyg-row:last-child { border-bottom: none; padding-bottom: 0; }
.wyg-row:first-child { padding-top: 0; }
.wyg-check {
  flex-shrink: 0;
  width: 18px; height: 18px;
  background: rgba(59,130,246,.15);
  border: 1px solid rgba(59,130,246,.3);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  margin-top: .15rem;
  color: #3b82f6;
}
.wyg-check svg { width: 9px; height: 9px; }
.wyg-text { font-size: .875rem; line-height: 1.5; color: rgba(255,255,255,.72); }
.wyg-text strong { color: rgba(255,255,255,.9); font-weight: 600; }

.wyg-note {
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: .75rem;
  font-style: italic;
  color: rgba(255,255,255,.32);
  text-align: center;
}

/* Stats row */
.stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.stat-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.04em; line-height: 1;
  color: hsl(0 0% 98%);
}
.stat-label {
  font-size: .625rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.stat-sep { width: 1px; height: 36px; background: rgba(255,255,255,.1); }

/* Price strip */
.price-strip-final {
  display: flex; flex-wrap: wrap; gap: .25rem .75rem;
  justify-content: center;
  margin-bottom: 1.75rem;
  font-size: .75rem;
  color: rgba(255,255,255,.38);
  align-items: center;
}
.price-strip-num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem; font-weight: 900;
  color: #3b82f6;
  letter-spacing: -.05em; line-height: 1;
}
.price-strip-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  flex-shrink: 0; align-self: center;
}

/* CTA block */
.cta-wrap-final {
  width: 100%; max-width: 480px;
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem;
}

/* Shiny CTA final — GPU-accelerated, static border glow */
.shiny-cta-final {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  border-radius: 9999px;
  padding: 1.125rem 2rem;
  font-family: Inter, sans-serif;
  font-size: 1rem; font-weight: 600;
  line-height: 1.35; color: #fff;
  letter-spacing: -.01em;
  cursor: pointer;
  border: none;
  background: #111;
  box-shadow: inset 0 0 0 1px #1a1818, 0 4px 24px rgba(37,99,235,.25);
  outline: none;
  overflow: hidden;
  z-index: 0;
  will-change: transform;
  transition: opacity .2s, box-shadow .2s, transform .15s cubic-bezier(.16,1,.3,1);
  text-align: center;
  text-decoration: none;
}
/* Static border glow — no animation, just decorative ring */
.shiny-cta-final::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent 0%, #2563eb 5%, #3b82f6 15%, #2563eb 30%, transparent 40%, transparent 100%
  );
  z-index: -2;
}
.shiny-cta-final::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: #111;
  z-index: -1;
}
.shiny-cta-final:hover {
  opacity: .9;
  box-shadow: inset 0 0 0 1px #1a1818, 0 6px 32px rgba(37,99,235,.40);
  transform: translateY(-1px);
}
.shiny-cta-final:active { transform: translateY(0); }

/* Trust strip dark */
.trust-dark {
  display: flex; flex-wrap: wrap;
  gap: .25rem .875rem;
  justify-content: center; align-items: center;
}
.trust-item-dark {
  display: inline-flex; align-items: center;
  gap: .3rem; font-size: .72rem;
  color: rgba(255,255,255,.32); white-space: nowrap;
}
.trust-item-dark svg { width: 11px; height: 11px; flex-shrink: 0; color: #3b82f6; }
.trust-dot-dark {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,.14); flex-shrink: 0;
}

/* Closing Newsreader italic lines */
.closing-micro {
  margin-top: 3rem;
  display: flex; flex-direction: column;
  gap: .375rem; align-items: center;
}
.closing-line {
  font-family: Newsreader, serif;
  font-style: italic; font-weight: 300;
  font-size: 1rem; line-height: 1.65;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.38);
}

/* Inevitability micro-copy before final CTA */
.inevitability-line {
  font-family: Newsreader, serif;
  font-style: italic; font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.5);
  text-align: center;
  margin-bottom: .25rem;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .bundle-grid { grid-template-columns: 1fr; gap: 3rem; }
  .stack-scene { height: clamp(420px, 75vw, 640px); }
  .doc-card { width: clamp(230px, 62vw, 320px); }
  .guarantee-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}
@media (max-width: 560px) {
  .faq-btn { padding: 1rem 1.125rem; }
  .faq-answer-inner { padding: 0 1.125rem 1.125rem; }
  .wyg-box { padding: 1.25rem; }
  .shiny-cta, .shiny-cta-final { font-size: .9rem; padding: 1rem 1.25rem; }
}
/* ══════════════════════════════════════════════════════════════════════
   S11 — PRICE BLOCK ADDITIONS: strikethrough + scarcity notice
   ══════════════════════════════════════════════════════════════════════ */
.price-scarcity-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #d97706;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 9999px;
  padding: 3px 10px;
  margin-bottom: .75rem;
}
.price-scarcity-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #d97706;
  flex-shrink: 0;
  animation: pulse-dot 1.6s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
/* Strikethrough "was" price in S11 price block */
.price-was-sm {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: hsl(var(--muted-foreground));
  text-decoration: line-through;
  text-decoration-color: hsl(var(--muted-foreground));
  letter-spacing: -.01em;
  margin-right: .25rem;
  align-self: baseline;
}

/* ══════════════════════════════════════════════════════════════════════
   S12 — SCARCITY BANNER + PRICE REVEAL (final CTA section)
   ══════════════════════════════════════════════════════════════════════ */

/* Scarcity banner */
.scarcity-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(217,119,6,.12);
  border: 1px solid rgba(217,119,6,.30);
  border-radius: 9999px;
  padding: 5px 14px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fbbf24;
  margin-bottom: 1.5rem;
}
.scarcity-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
  animation: pulse-dot 1.6s cubic-bezier(.4,0,.6,1) infinite;
}

/* Price reveal row: strikethrough £47 → £14.70 */
.sec-final-cta .price-reveal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.price-reveal-row {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  justify-content: center;
}
.price-was {
  font-family: 'Playfair Display', serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: rgba(255,255,255,.28);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,.25);
  letter-spacing: -.03em;
  line-height: 1;
}
.price-arrow {
  font-size: .9rem;
  color: rgba(255,255,255,.22);
  font-weight: 400;
  flex-shrink: 0;
}
.price-now {
  font-family: 'Playfair Display', serif;
  font-size: 2.75rem;
  font-weight: 900;
  color: #3b82f6;
  letter-spacing: -.05em;
  line-height: 1;
}
.price-savings-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4ade80;
  background: rgba(74,222,128,.1);
  border: 1px solid rgba(74,222,128,.25);
  border-radius: 9999px;
  padding: 3px 11px;
}

/* ══════════════════════════════════════════════════════════════════════
   CARD PRICE ROWS — Main workbook + Bonus 1
   ══════════════════════════════════════════════════════════════════════ */
.item-price-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px dashed hsl(var(--border));
}
.item-price-old {
  font-family: 'Playfair Display', serif;
  font-size: .9375rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-decoration: line-through;
  text-decoration-color: hsl(var(--muted-foreground));
  letter-spacing: -.02em;
}
.item-price-arrow {
  font-size: .75rem;
  color: hsl(var(--border));
  flex-shrink: 0;
}
.item-price-current {
  font-family: 'Playfair Display', serif;
  font-size: 1.1875rem;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: -.03em;
  line-height: 1;
}
.item-price-free {
  display: inline-flex;
  align-items: center;
  font-family: Inter, sans-serif;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 9999px;
  padding: 3px 10px;
}

/* ══════════════════════════════════════════════════════════════════════
   BONUS COUNTDOWN TIMER — item list
   ══════════════════════════════════════════════════════════════════════ */
.item-row--timer {
  background: hsl(var(--muted));
  border-radius: calc(var(--radius) * 1.5);
  padding: .875rem 1rem;
  border: 1px dashed hsl(var(--border)) !important;
  margin-top: .625rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
}
.item-row--timer::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #2563eb var(--progress, 100%), transparent 0);
  transition: background 1s linear;
}
.item-row--timer.expired {
  opacity: .45;
}
.bonus-countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}
.bonus-countdown__label {
  font-family: Inter, sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: hsl(var(--muted-foreground));
  line-height: 1.4;
  flex: 1;
}
.bonus-countdown__display {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.bonus-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.bonus-countdown__digits {
  font-family: 'Playfair Display', serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: #2563eb;
  line-height: 1;
  min-width: 2ch;
  text-align: center;
  letter-spacing: -.02em;
}
.bonus-countdown__unit-label {
  font-family: Inter, sans-serif;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.bonus-countdown__colon {
  font-family: 'Playfair Display', serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: hsl(var(--border));
  line-height: 1;
  margin-bottom: .875rem;
}

/* Free badge timer variant */
.item-price-free--timer {
  transition: opacity .3s ease, background .3s ease;
}

@media (max-width: 480px) {
  .bonus-countdown {
    flex-direction: column;
    align-items: flex-start;
    gap: .625rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   GUARANTEE CARD — scroll expand
   Collapsed: text visibly clamped to 2 lines with gradient fade
   Expanded: full text revealed
   ══════════════════════════════════════════════════════════════════════ */
.guarantee-body-separator { display: none; }

.guarantee-body-text {
  position: relative;
  max-height: 3em;           /* ~2 lines collapsed */
  overflow: hidden;
  transition: max-height .7s cubic-bezier(.16,1,.3,1);
}
/* gradient fade over clamped text */
.guarantee-body-text::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2em;
  background: linear-gradient(transparent, hsl(var(--card)));
  pointer-events: none;
  transition: opacity .4s;
}
.guarantee-card-main.revealed .guarantee-body-text {
  max-height: 400px !important;
}
.guarantee-card-main.revealed .guarantee-body-text::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .guarantee-body-text { max-height: 400px !important; transition: none !important; }
  .guarantee-body-text::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   BEAMS BACKGROUND — dark zone wrapper
   Canvas positioned absolute BEFORE sections (z-index layering via HTML order)
   ══════════════════════════════════════════════════════════════════════ */
.dark-zone {
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
  isolation: isolate;           /* own stacking context */
}
/* Beams canvas + overlay disabled — replaced by static CSS gradients */
#beamsCanvas, #beamsOverlay { display: none !important; }
.dark-zone::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(59,130,246,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 70%, rgba(165,180,252,.04) 0%, transparent 50%),
    radial-gradient(ellipse 90% 30% at 50% 100%, rgba(96,165,250,.05) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 70% 10%, rgba(147,197,253,.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
/* Sections float above canvas via stacking context (isolation: isolate on .dark-zone) */
.dark-zone .sec-faq,
.dark-zone .sec-final-cta {
  position: relative;           /* participate in stacking */
  background: transparent !important;
}
.dark-zone .section-divider {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .shiny-cta, .shiny-cta-final, .shiny-cta::before { animation: none !important; }
  .doc-card { transition: none !important; }
  .stack-scene:hover .doc-card { transform: none !important; }
  .faq-answer, .faq-icon, .faq-item { transition: none !important; }
  .scarcity-dot, .price-scarcity-dot { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER — INSTITUTIONAL (v9 — motion-inspired grid layout)
   ══════════════════════════════════════════════════════════════════════ */
.site-footer {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 1.5rem 1.5rem 0 0;
  padding: clamp(2.75rem, 5vw, 4rem) clamp(1.25rem, 5vw, 3rem) clamp(2rem, 4vw, 2.75rem);
  /* Radial gradient — same as React component's 35%/128px arc */
  background: radial-gradient(35% 128px at 50% 0%, rgba(255,255,255,.05), transparent);
  overflow: hidden;
}

/* Blur line at the top centre — exact translation of the React ::before pseudo */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 33%;
  height: 1px;
  background: rgba(255,255,255,.22);
  border-radius: 9999px;
  filter: blur(2px);
  pointer-events: none;
}

/* Two-column XL grid: brand col (1fr) + links col (2fr) */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: start;
  }
}

/* ── Brand col ── */
.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}

.footer-seal {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  opacity: .9;
  display: block;
  mix-blend-mode: screen;
  filter: brightness(1.3) contrast(1.1);
  border-radius: 6px;
}

.footer-brand-text {}

.footer-brand-name {
  font-family: Inter, sans-serif;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(255,255,255,.82);
  line-height: 1.2;
}

.footer-brand-desc {
  font-family: Inter, sans-serif;
  font-size: .75rem;
  font-weight: 400;
  color: rgba(255,255,255,.50);
  margin-top: .3rem;
  letter-spacing: 0;
}

/* Copyright lives in the brand col on desktop */
.footer-copy {
  font-family: Inter, sans-serif;
  font-size: .6875rem;
  font-weight: 400;
  color: rgba(255,255,255,.28);
  letter-spacing: .01em;
  margin-top: .25rem;
}

/* ── Links col: 3 sections side by side ── */
.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
}

@media (min-width: 640px) {
  .footer-links-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer-links-section {}

.footer-links-label {
  font-family: Inter, sans-serif;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.30);
  margin-bottom: .875rem;
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.footer-nav-link {
  font-family: Inter, sans-serif;
  font-size: .8125rem;
  font-weight: 400;
  color: rgba(255,255,255,.42);
  text-decoration: none;
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}

.footer-nav-link:hover {
  color: rgba(255,255,255,.75);
}

/* ── Entrance animation (IntersectionObserver equivalent of whileInView) ── */
.footer-anim {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-8px);
  transition:
    opacity    .8s cubic-bezier(.16,1,.3,1),
    filter     .8s cubic-bezier(.16,1,.3,1),
    transform  .8s cubic-bezier(.16,1,.3,1);
}
.footer-anim.is-visible {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}
.footer-anim[data-delay="1"] { transition-delay: .10s; }
.footer-anim[data-delay="2"] { transition-delay: .20s; }
.footer-anim[data-delay="3"] { transition-delay: .30s; }
.footer-anim[data-delay="4"] { transition-delay: .40s; }

/* Reduced motion — skip all transitions */
@media (prefers-reduced-motion: reduce) {
  .footer-anim {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 640px) {
  .footer-seal {
    width: 34px;
    height: 34px;
  }
  .footer-brand-name {
    font-size: .8125rem;
  }
}

/* Hide old dot separators if still present */
.footer-nav-dot { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   GLASSY BUTTON — final CTA (adapted from Framer Glassy button)
   Metallic polished capsule, layered shadows, inner highlight
   ══════════════════════════════════════════════════════════════════════ */
.glassy-cta-wrap {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.glassy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 2.5rem;
  height: 60px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: #0a0a0a;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.95)  0%,
    rgba(210,210,210,0.92)  9%,
    rgba(170,170,170,0.90) 32%,
    rgba(130,130,130,0.88) 73%,
    rgba(255,255,255,0.95) 100%
  );
  box-shadow:
    0px 1px 0.5px 0px rgba(0,0,0,0),
    0px 2.4px 1.2px 0px rgba(0,0,0,0),
    0px 4.4px 2.2px 0px rgba(0,0,0,0.01),
    0px 7.2px 3.6px 0px rgba(0,0,0,0.01),
    0px 11.7px 5.9px 0px rgba(0,0,0,0.02),
    0px 19.1px 9.6px 0px rgba(0,0,0,0.03),
    0px 33px 16.5px 0px rgba(0,0,0,0.05),
    0px 60px 30px 0px rgba(0,0,0,0.10),
    inset 0px 1.5px 0px 0px rgba(255,255,255,0.90),
    inset 0px -1px 0px 0px rgba(0,0,0,0.12);
  transition:
    box-shadow .3s cubic-bezier(.16,1,.3,1),
    transform  .15s cubic-bezier(.16,1,.3,1),
    background .2s ease;
  will-change: transform;
}

.glassy-btn::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 9999px;
  background: linear-gradient(
    150deg,
    rgba(215,215,215,0.7) 0%,
    rgba(235,235,235,0.85) 50%,
    rgba(205,205,205,0.7) 100%
  );
  pointer-events: none;
  z-index: 0;
  transition: background .2s ease;
}

.glassy-btn::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 12%;
  right: 12%;
  height: 1px;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.9) 30%,
    rgba(255,255,255,1)   50%,
    rgba(255,255,255,0.9) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

.glassy-btn span {
  position: relative;
  z-index: 1;
}

.glassy-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0px 1px 0.5px 0px rgba(0,0,0,0),
    0px 2.4px 1.2px 0px rgba(0,0,0,0),
    0px 4.4px 2.2px 0px rgba(0,0,0,0.01),
    0px 7.2px 3.6px 0px rgba(0,0,0,0.01),
    0px 11.7px 5.9px 0px rgba(0,0,0,0.01),
    0px 19.1px 9.6px 0px rgba(0,0,0,0.02),
    0px 33px 16.5px 0px rgba(0,0,0,0.04),
    0px 60px 30px 0px rgba(0,0,0,0.07),
    inset 0px 1.5px 0px 0px rgba(255,255,255,0.95),
    inset 0px -1px 0px 0px rgba(0,0,0,0.08);
}
.glassy-btn:hover::before {
  background: linear-gradient(
    150deg,
    rgba(215,215,215,0.6) 0%,
    rgba(245,245,245,0.92) 50%,
    rgba(205,205,205,0.6) 100%
  );
}

.glassy-btn:active {
  transform: translateY(0);
  box-shadow:
    0px 1px 0.4px -0.4px rgba(0,0,0,0.03),
    0px 2.4px 1px -0.75px rgba(0,0,0,0.03),
    0px 4.4px 1.7px -1.1px rgba(0,0,0,0.03),
    0px 7.2px 2.9px -1.5px rgba(0,0,0,0.03),
    0px 11.7px 4.7px -1.9px rgba(0,0,0,0.03),
    0px 19.1px 7.7px -2.25px rgba(0,0,0,0.03),
    0px 33px 13.2px -2.6px rgba(0,0,0,0.02),
    0px 60px 24px -3px rgba(0,0,0,0.02),
    inset 0px 1.5px 0px 0px rgba(255,255,255,0.80),
    inset 0px -1px 0px 0px rgba(0,0,0,0.16),
    inset 0px 2px 4px 0px rgba(0,0,0,0.08);
}

@media (max-width: 560px) {
  .glassy-btn { height: 54px; font-size: .9rem; padding: 0 1.75rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   HORIZONTAL SCROLLER — S11 item cards
   Faithful translation of framer.com/m/HorizontalScroller-RFzU
   spring: stiffness 500 / damping 60 / mass 1
   ══════════════════════════════════════════════════════════════════════ */

/* ── Stack scene — centred standalone ── */
.stack-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}

/* ── Outer scroll zone (tall = provides vertical scroll distance) ── */
.hscroll-outer {
  position: relative;
  width: 100%;
  /* height set by JS = trackScrollWidth - viewportWidth + viewportHeight */
}

/* ── Sticky viewport ── */
.hscroll-sticky {
  position: sticky;
  top: 0;
  height: clamp(340px, 48vh, 480px);   /* compact — no dead space above cards */
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* ── Scroll hint pill ── */
.hscroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  opacity: 1;
  transition: opacity .4s;
  pointer-events: none;
}
.hscroll-hint svg { width: 14px; height: 14px; flex-shrink: 0; }
.hscroll-outer.scrolled .hscroll-hint { opacity: 0; }

/* ── Track ── */
.hscroll-track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 28px;
  padding: 2rem clamp(1.25rem, 5vw, 3rem);
  padding-right: clamp(2rem, 6vw, 5rem);
  will-change: transform;
  /* JS applies transform: translateX() */
}

/* ── Individual card ── */
.hcard {
  flex-shrink: 0;
  width: clamp(300px, 32vw, 420px);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 2.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  transition: box-shadow .3s cubic-bezier(.16,1,.3,1),
              transform  .3s cubic-bezier(.16,1,.3,1);
  position: relative;
}
.hcard:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.10);
  transform: translateY(-2px);
}

/* Grid texture on each card (same as item-row::before) */
.hcard::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(hsl(var(--border) / .6) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--border) / .6) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at top left, white 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 80% at top left, white 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.hcard > * { position: relative; z-index: 1; }

/* Card header strip */
.hcard-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1.125rem 1.375rem .875rem;
  border-bottom: 1px solid hsl(var(--border));
}
.hcard-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hcard-icon svg { width: 20px; height: 20px; }
.hcard-meta { flex: 1; }
.hcard-tag {
  display: inline-block;
  font-size: .5625rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 9999px; border: 1px solid;
  margin-bottom: 3px;
}
.hcard-tag.main  { background:#dcfce7; border-color:#86efac; color:#166534; }
.hcard-tag.step  { background:#fef3c7; border-color:#fde68a; color:#92400e; }
.hcard-tag.b1    { background:#dbeafe; border-color:#bfdbfe; color:#1d4ed8; }
.hcard-tag.b2    { background:#f3e8ff; border-color:#e9d5ff; color:#6b21a8; }
.hcard-filename  { font-size: .6875rem; font-weight: 600; color: hsl(var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcard-filetype  { font-size: .5625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-top: 1px; }

/* Card body */
.hcard-body {
  padding: 1.25rem 1.375rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.hcard-title { font-size: 1rem; font-weight: 600; letter-spacing: -.03em; color: hsl(var(--foreground)); line-height: 1.3; }
.hcard-desc  { font-size: .8125rem; color: hsl(var(--muted-foreground)); line-height: 1.6; flex: 1; }

/* Card price footer */
.hcard-price {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.375rem 1.125rem;
  border-top: 1px dashed hsl(var(--border));
  margin-top: auto;
}
.hcard-price-old {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-decoration: line-through;
  text-decoration-color: hsl(var(--muted-foreground));
  letter-spacing: -.02em;
}
.hcard-price-arrow { font-size: .75rem; color: hsl(var(--border)); flex-shrink: 0; }
.hcard-price-current {
  font-family: 'Playfair Display', serif;
  font-size: 1.3125rem; font-weight: 700;
  color: #2563eb; letter-spacing: -.03em; line-height: 1;
}
.hcard-price-free {
  display: inline-flex; align-items: center;
  font-family: Inter, sans-serif;
  font-size: .5625rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #166534; background: #dcfce7;
  border: 1px solid #86efac; border-radius: 9999px;
  padding: 3px 11px;
}

/* ── Contents bottom (below scroller) — single column, timer above CTA ── */
.contents-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 600px;
  margin: 0 auto;
}
/* timer row fills full width of the column */
.contents-bottom > div { width: 100%; }
/* price block also full width */
.contents-bottom .price-block { width: 100%; }

/* Progress bar under sticky */
.hscroll-progress-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  transition: width .05s linear;
  z-index: 10;
}

/* Mobile: disable scroll-driven, show normal overflow drag */
@media (max-width: 720px) {
  /* ── outer: collapse to natural flow ── */
  .hscroll-outer  { height: auto !important; overflow: visible !important; }
  .hscroll-ghost  { display: none !important; }
  .hscroll-hint   { display: none !important; }
  .hscroll-progress-bar { display: none !important; }

  /* ── sticky: plain block, no overflow clipping ── */
  .hscroll-sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }

  /* ── WRAPPER: the real scroll container — sits between sticky and track ── */
  /* We create an .hscroll-mobile-wrap via JS that wraps the track */
  /* Fallback: make the sticky itself the scroll container */

  /* ── track: scrollable row ── */
  .hscroll-track {
    transform: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* negative margins break out of container padding */
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 1rem 1.25rem 1.5rem !important;
    gap: 16px !important;
    width: calc(100% + 2.5rem) !important;
    /* prevent parent overflow:hidden from clipping */
    position: relative;
    z-index: 1;
  }
  .hscroll-track::-webkit-scrollbar { display: none; }

  /* ── cards ── */
  .hcard {
    flex: 0 0 82vw !important;
    max-width: 300px !important;
    min-width: 240px !important;
    scroll-snap-align: start;
  }

  /* ── ensure section doesn't clip ── */
  .sec-contents { overflow: visible !important; }
  .hscroll-outer, .hscroll-sticky { overflow: visible !important; }
}

/* ── Inline free timer — beside FREE badge on bonus cards ── */
.hcard-free-timer-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.hcard-free-timer {
  font-family: Inter, sans-serif;
  font-size: .6875rem;
  font-weight: 400;
  color: hsl(var(--muted-foreground));
  letter-spacing: -.005em;
  white-space: nowrap;
}
.hcard-free-timer strong {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: hsl(var(--foreground));
}
.hcard-free-timer.expired {
  opacity: .38;
  text-decoration: line-through;
}

/* ── Section header micro-proof ── */
.contents-micro-proof {
  margin-top: .875rem;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  font-size: .8125rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.65;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.contents-micro-proof__device {
  font-size: .75rem;
  color: hsl(var(--muted-foreground) / .75);
  font-style: italic;
}

/* lifecycle sentence removed */

/* ── hcard body hierarchy ── */
.hcard-mech {
  font-size: .8125rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  line-height: 1.45;
  letter-spacing: -.015em;
}
.hcard-steps {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #2563eb;
  text-transform: none;
  margin-top: .125rem;
}
.hcard-format {
  font-size: .6875rem;
  color: hsl(var(--muted-foreground));
  margin-top: auto;
  padding-top: .625rem;
  font-style: italic;
}
/* override old desc for cards that now use new structure */
.hcard .hcard-desc { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   SIMPLICITY BLOCK — anchored below stack-scene with overlap
   Removes friction: "I don't need to know spreadsheets"
   ══════════════════════════════════════════════════════════════════════ */

/* Wrap stack-scene + simplicity block together as one visual unit */
.stack-simplicity-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0;
  gap: 0;
}

/* Stack scene gets relative so overlap can pull up */
.stack-simplicity-wrap .stack-scene {
  position: relative;
  z-index: 2;
}

/* ── The simplicity card ── */
.simplicity-block {
  position: relative;
  z-index: 3;
  background: #ffffff;
  border: 1px solid #E5E5E5;
  border-radius: 14px;
  padding: 16px 20px;
  max-width: 340px;             /* compact — UI panel, not marketing card */
  width: calc(100% - 2.5rem);
  margin-top: -64px;            /* tight — immediate visual response */
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 4px rgba(0,0,0,.06),
    0 8px 24px rgba(0,0,0,.09),
    0 1px 0 #E5E5E5;            /* bottom edge definition */
  text-align: left;

  /* entrance animation state — JS will trigger .is-visible */
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  .55s cubic-bezier(.16,1,.3,1) .18s,
    transform .55s cubic-bezier(.16,1,.3,1) .18s;
}
.simplicity-block.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Also animate the stack-scene itself */
.stack-simplicity-wrap .stack-scene {
  opacity: 0;
  transform: scale(0.97);
  transition:
    opacity  .5s cubic-bezier(.16,1,.3,1),
    transform .5s cubic-bezier(.16,1,.3,1);
}
.stack-simplicity-wrap .stack-scene.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Typography ── */
.simplicity-lead {
  font-family: Inter, sans-serif;
  font-size: .9375rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  letter-spacing: -.025em;
  line-height: 1.35;
  margin-bottom: .75rem;
}

.simplicity-

.simplicity-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .875rem;
}
.simplicity-checklist li {
  font-family: Inter, sans-serif;
  font-size: .8125rem;
  font-weight: 400;
  color: hsl(var(--muted-foreground));
  letter-spacing: -.005em;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.simplicity-checklist li::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5.5l2 2 4-4' stroke='%2316a34a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}

.simplicity-close {
  font-family: Inter, sans-serif;
  font-style: normal;
  font-size: .9375rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  letter-spacing: -.02em;
  line-height: 1.4;
  margin-bottom: 0;
}

.simplicity-sub {
  font-size: .6875rem;
  font-weight: 400;
  color: hsl(var(--muted-foreground));
  letter-spacing: .005em;
  line-height: 1.5;
  margin-top: .75rem;
}

/* ── Divider below the block (connects to scroller section) ── */
.simplicity-connector {
  width: 1px;
  height: clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(to bottom, rgba(0,0,0,.12), transparent);
  margin: 0 auto;
}

/* ── Mobile adjustments ── */
@media (max-width: 640px) {
  .simplicity-block {
    margin-top: -28px;
    width: calc(100% - 2rem);
    border-radius: 12px;
    padding: 14px 16px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .simplicity-block,
  .stack-simplicity-wrap .stack-scene {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Visual connector: glow line between preview and simplicity card ── */
.simplicity-block::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.10) 60%, rgba(0,0,0,.12) 100%);
  pointer-events: none;
}

/* ── System components label above horizontal scroller ── */
.system-components-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 1.5rem;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;           /* centred on page */
}