/* readability pass: +2px on every font-size (applied) */
/* register · page-specific */

/* ---------------- hero signature: YouTube Studio growth line ---------------- */
.growth { position: relative; width: min(1076px, calc(100% - 2 * clamp(20px, 5vw, 32px))); height: clamp(96px, 13vw, 168px); margin: clamp(48px, 7vh, 72px) auto 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%); }
.growth svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.growth .g-grid line { stroke: rgba(226, 255, 236, 0.07); stroke-width: 1; stroke-dasharray: 3 7; }
.growth .g-fill { fill: url(#gFill); }
.growth .g-line { fill: none; stroke: url(#gStroke); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.growth .g-draw { clip-path: inset(0 0 0 0); }
.growth .g-dot { position: absolute; right: 0; top: 13.75%; width: 12px; height: 12px; margin: -6px -6px 0 0; border-radius: 50%; background: var(--accent-2);
  box-shadow: 0 0 0 5px rgba(59, 227, 107, .18), 0 0 24px 4px rgba(59, 227, 107, .45); }
.growth .g-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: livePulse 2.4s var(--ease) infinite 2s; }

/* the draw: the line rises left to right once on load, then the dot lands */
@media (prefers-reduced-motion: no-preference) {
  .growth .g-draw { animation: gDraw 1.9s cubic-bezier(0.16, 1, 0.3, 1) .35s both; }
  .growth .g-dot { animation: gDot .6s var(--ease) 1.85s both; }
}
@keyframes gDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gDot { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .growth .g-dot::after { animation: none; } }

/* pillars sit right under the chart */
.pillars-sec { padding-top: clamp(40px, 6vh, 64px); }

/* reviews under the videos */
.reviews { margin-top: clamp(56px, 8vh, 80px); }

/* bottom CTA */
.end-cta { padding: clamp(24px, 4vh, 40px) 0 clamp(72px, 11vh, 112px); text-align: center; }

@media (max-width: 700px) {
  .growth { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%); }
}

/* JS off: the Save my seat links target #optinModal, so the modal still opens and posts to ../thank-you/ */
html:not(.js) .modal-overlay:target { opacity: 1; visibility: visible; }
html:not(.js) .modal-overlay:target .modal { opacity: 1; transform: none; }