/* =============================================================================
 * AMBASSADORS PAGE — local CSS for animations, form transitions, sticky CTA
 * Reused by ambassadors/index.html via /css/ambassadors.css
 * ============================================================================= */

/* --- Hero: silhouettes split layout --------------------------------------- */
/*
   Left column = rallying copy + CTAs. Right column = the silhouettes image
   (transparent PNG) sitting on a soft purple-cyan halo, with floating chips
   showing program benefits and a banner overhead. Echoes the slogans on the
   shirts (STOP THE BOTS / FAIR LAUNCH NOW / REJECT MEV).
*/
.amb-hero-copy { animation: ambHeroFadeUp 800ms cubic-bezier(0.2,0.7,0.2,1) both; }
@keyframes ambHeroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Tier cards (Who can join): NEUTRAL by default, tier color on HOVER ---- */
.amb-tier-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.amb-tier-card:hover {
  background: var(--tier-bg-hover);
  border-color: var(--tier-border-hover);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 24px var(--tier-icon-glow);
}

.amb-tier-icon-wrap {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.55);
}
.amb-tier-card:hover .amb-tier-icon-wrap {
  background: var(--tier-icon-bg);
  border-color: var(--tier-icon-border);
  color: var(--tier-color);
  transform: scale(1.1);
}
.amb-tier-card:hover .amb-tier-icon-glow {
  background: var(--tier-icon-glow);
  opacity: 0.7;
}

.amb-tier-money {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.amb-tier-card:hover .amb-tier-money {
  background: var(--tier-money-bg);
  border-color: var(--tier-money-border);
}
.amb-tier-card:hover .amb-tier-money-num {
  text-shadow: 0 2px 14px var(--tier-money-glow);
}
.amb-tier-card:hover .amb-tier-money-unit {
  color: var(--tier-color);
}

.amb-tier-dot {
  background: rgba(255,255,255,0.30);
}
.amb-tier-card:hover .amb-tier-dot {
  background: var(--tier-color);
  box-shadow: 0 0 4px var(--tier-dot-glow);
}

.amb-tier-card:hover .amb-tier-promote {
  color: var(--tier-color);
}

/* Architect — keep the "★ Invite" badge visible always (it's a label, not a color treatment) */
.amb-tier-invite-badge {
  /* Stays visible by default — the gold pill is part of the tier identity, not just decoration */
}

/* --- Hero halo: slow breathing pulse behind the figures ------------------- */
/*
   The red → purple → cyan radial glow at the bottom slowly breathes,
   adding heat without motion. 4-second in-out cycle, opacity 0.6 ↔ 1.0,
   with a faint accompanying scale (0.98 ↔ 1.04) so the glow feels like
   it's expanding and contracting — energy gathering, then settling.
*/
.amb-hero-halo {
  transform-origin: 50% 100%;
  animation: ambHeroHaloBreathe 4s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes ambHeroHaloBreathe {
  0%, 100% { opacity: 0.62; transform: translateX(-50%) scale(0.98); }
  50%      { opacity: 1.0;  transform: translateX(-50%) scale(1.04); }
}

.amb-hero-silhouettes {
  /* Sized to fill the hero width with the figures hugging the bottom edge */
  width: 100%;
  max-width: 1400px;
  height: auto;
  /* Pull the figures up off the bottom edge slightly so the bottom-fade gradient blends them */
  bottom: 0;
  filter: drop-shadow(0 -10px 30px rgba(98,84,241,0.18)) drop-shadow(0 24px 30px rgba(0,0,0,0.45));
  user-select: none;
  animation: ambHeroSilhouettesIn 1200ms cubic-bezier(0.2,0.7,0.2,1) 200ms both;
}
@keyframes ambHeroSilhouettesIn {
  from { opacity: 0; transform: translateX(-50%) translateY(40px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Mobile: scale the figures down a bit so they don't overpower the text */
@media (max-width: 640px) {
  .amb-hero-silhouettes {
    width: 130%;
    max-width: 130%;
  }
}

.amb-hero-tag {
  opacity: 0;
  animation: ambHeroTagIn 700ms ease-out 1100ms forwards;
}
@keyframes ambHeroTagIn { to { opacity: 1; } }

/* --- TL;DR strip stagger -------------------------------------------------- */
.amb-tldr-item { opacity: 0; transform: translateY(12px); transition: opacity .5s ease-out, transform .5s ease-out; }
.amb-tldr-item.is-in { opacity: 1; transform: translateY(0); }

/* --- Compensation: animated gradient border on the highlighted column ----- */
.amb-comp-highlight {
  position: relative;
  background: linear-gradient(180deg, rgba(98,84,241,0.04), rgba(5,225,247,0.04));
}
.amb-comp-highlight::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--ambAngle, 0deg), #6254f1, #05e1f7, #6254f1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ambGradSpin 6s linear infinite;
  pointer-events: none;
}
@property --ambAngle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ambGradSpin { to { --ambAngle: 360deg; } }

/* --- Compensation: L3 → L2 → L1 → You dot flow --------------------------- */
/* Fees flow up the chain toward the ambassador, so dots travel right-to-left.
   Track gradient and dot keyframes are mirrored to match.
   Track sits at the circle's vertical centre (half of the 36px / w-9 circles),
   so the connecting line meets the circles edge-to-edge instead of running
   through the column-centre below them. */
.amb-flow-row { position: relative; }
.amb-flow-track {
  position: relative; height: 2px;
  margin-top: 17px;       /* half of 36px circle - 1px (half of 2px track) */
  background: linear-gradient(to left, rgba(98,84,241,0.35), rgba(5,225,247,0.35));
}
.amb-flow-dot {
  position: absolute; top: 50%; left: 100%;
  width: 6px; height: 6px; border-radius: 9999px;
  transform: translate(-50%, -50%);
  background: #05e1f7;
  /* Two-layer glow + a soft trail to the right (the direction the dot came
     from). The trail offsets stay constant relative to the dot so the dot
     reads as a comet sliding toward You. */
  box-shadow:
    0 0 6px  rgba(5, 225, 247, 0.85),
    0 0 14px rgba(5, 225, 247, 0.35),
    8px 0 10px rgba(5, 225, 247, 0.25),
    16px 0 14px rgba(5, 225, 247, 0.12);
  /* Smoother movement: cubic-bezier ease-in-out keeps a steadier visual flow
     than `linear`, which can feel mechanical at this short distance. */
  animation: ambFlowDot 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: left, opacity;
}
.amb-flow-dot.delay-1 { animation-delay: 1.66s; }
.amb-flow-dot.delay-2 { animation-delay: 3.33s; }
@keyframes ambFlowDot {
  0%   { left: 100%; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { left: 0%;   opacity: 0; }
}

/* "You" circle — gold/purple gradient border (canonical CSS double-bg trick) */
.amb-flow-you {
  background:
    linear-gradient(rgba(20,17,48,0.95), rgba(20,17,48,0.95)) padding-box,
    linear-gradient(135deg, #8176f4 0%, #d4a843 100%) border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 18px rgba(212, 168, 67, 0.18), 0 0 24px rgba(129, 118, 244, 0.18);
}

/* --- HowWeReview: animated progress comet on the connecting line --------- */
/* The hairline between step icons gets a brand-purple→cyan glow that slides
   left-to-right across the track in a continuous loop, conveying forward
   motion through the application journey (Apply → Review → Call → Fair launch).
   The base hairline (Tailwind classes on the same element) stays static. */
.amb-review-track::after {
  content: '';
  position: absolute;
  top: -1px; bottom: -1px;
  left: 0;
  width: 35%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(129, 118, 244, 0.45) 30%,
    rgba(5, 225, 247, 0.95) 50%,
    rgba(129, 118, 244, 0.45) 70%,
    transparent 100%);
  filter: blur(0.5px);
  animation: ambReviewTrack 5s linear infinite;
  will-change: transform, opacity;
  pointer-events: none;
}
@keyframes ambReviewTrack {
  0%   { transform: translateX(-50%); opacity: 0; }   /* born at Step 1, invisible */
  10%  { opacity: 1; }                                /* visible just past Step 1 */
  90%  { opacity: 1; }                                /* still visible just before Step 4 */
  100% { transform: translateX(236%); opacity: 0; }   /* dies at Step 4, invisible */
}

/* As the comet's center reaches each circle, two short bright dashes (one for
   each arc direction) slide simultaneously around the circle:
   • Top arc dash slides clockwise from 9 o'clock through 12 o'clock toward 3 o'clock.
   • Bottom arc dash slides counter-clockwise from 9 o'clock through 6 o'clock toward 3.
   They meet at 3 o'clock (right side) and exit, continuing along the line.
   Each dash is rendered as 3 stacked layers (trail-1 leading, trail-2 + trail-3
   progressively dimmer + behind) so the moving dash leaves a comet-like trail.
   The slower 25% sweep window (vs the original 12%) gives a smoother flow.
   Comet timing on the line: Step 1 at t=0, Step 2 at t=1.66s, Step 3 at t=3.33s,
   Step 4 at t=4.5s. Slide midpoint in the keyframe is at 50%, so
   animation-delay = peak_clock_time - 2.5s. */
.amb-circle-sweep {
  position: absolute;
  inset: -4px;
  width: 76px;
  height: 76px;
  pointer-events: none;
  overflow: visible;
}
.amb-sweep-arc {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 22 220;      /* 22 visible, large gap so no second dash */
  stroke-dashoffset: 22;         /* dash hidden before path entry */
  opacity: 0;
}
.amb-sweep-trail-1 {
  /* Leading head — brightest, with a soft glow */
  filter: drop-shadow(0 0 4px rgba(98, 84, 241, 0.55));
}
@keyframes ambSweepTrail {
  0%, 35%, 100% {
    stroke-dashoffset: 22;
    opacity: 0;
  }
  37% {
    /* Dash arrives at path start (9 o'clock) */
    stroke-dashoffset: 0;
    opacity: var(--trail-op, 1);
  }
  58% {
    /* Dash near path end (just before 3 o'clock) */
    stroke-dashoffset: -85;
    opacity: var(--trail-op, 1);
  }
  60% {
    /* Dash exits past 3 o'clock and fades */
    stroke-dashoffset: -107;
    opacity: 0;
  }
}

/* Step 1 — comet is born here. Sweep peaks at cycle wrap (t=0). */
.amb-review-step-1 .amb-sweep-trail-1 { animation: ambSweepTrail 5s linear infinite -2.50s; --trail-op: 0.85; }
.amb-review-step-1 .amb-sweep-trail-2 { animation: ambSweepTrail 5s linear infinite -2.40s; --trail-op: 0.50; }
.amb-review-step-1 .amb-sweep-trail-3 { animation: ambSweepTrail 5s linear infinite -2.30s; --trail-op: 0.22; }

/* Step 2 — peak at t=1.66s */
.amb-review-step-2 .amb-sweep-trail-1 { animation: ambSweepTrail 5s linear infinite -0.84s; --trail-op: 0.85; }
.amb-review-step-2 .amb-sweep-trail-2 { animation: ambSweepTrail 5s linear infinite -0.74s; --trail-op: 0.50; }
.amb-review-step-2 .amb-sweep-trail-3 { animation: ambSweepTrail 5s linear infinite -0.64s; --trail-op: 0.22; }

/* Step 3 — peak at t=3.33s */
.amb-review-step-3 .amb-sweep-trail-1 { animation: ambSweepTrail 5s linear infinite  0.83s; --trail-op: 0.85; }
.amb-review-step-3 .amb-sweep-trail-2 { animation: ambSweepTrail 5s linear infinite  0.93s; --trail-op: 0.50; }
.amb-review-step-3 .amb-sweep-trail-3 { animation: ambSweepTrail 5s linear infinite  1.03s; --trail-op: 0.22; }

/* Step 4 — peak at t=4.5s */
.amb-review-step-4 .amb-sweep-trail-1 { animation: ambSweepTrail 5s linear infinite  2.00s; --trail-op: 0.85; }
.amb-review-step-4 .amb-sweep-trail-2 { animation: ambSweepTrail 5s linear infinite  2.10s; --trail-op: 0.50; }
.amb-review-step-4 .amb-sweep-trail-3 { animation: ambSweepTrail 5s linear infinite  2.20s; --trail-op: 0.22; }

/* --- HowWeReview: mobile vertical layout -------------------------------- */
/* Vertical connecting track with downward-flowing comet on mobile */
.amb-review-track-v::after {
  content: '';
  position: absolute;
  left: -1px; right: -1px;
  top: 0;
  height: 35%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(129, 118, 244, 0.45) 30%,
    rgba(5, 225, 247, 0.95) 50%,
    rgba(129, 118, 244, 0.45) 70%,
    transparent 100%);
  filter: blur(0.5px);
  animation: ambReviewTrackV 5s linear infinite;
  will-change: transform, opacity;
  pointer-events: none;
}
@keyframes ambReviewTrackV {
  0%   { transform: translateY(-50%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(236%); opacity: 0; }
}

/* Mobile step reveal — starts hidden, fades/slides up when in view.
   Uses max-width: 1023px to match the Tailwind md breakpoint (1024px). */
@media (max-width: 1023px) {
  .amb-review-step {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }
  .amb-review-step.amb-review-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Stagger the delays */
  .amb-review-step:nth-child(2) { transition-delay: 0.1s; }
  .amb-review-step:nth-child(3) { transition-delay: 0.2s; }
  .amb-review-step:nth-child(4) { transition-delay: 0.3s; }

  /* Rotate circle sweep 90° so the comet travels top→bottom (vertical) */
  .amb-circle-sweep {
    transform: rotate(90deg);
  }
}

/* --- Movement card icons -------------------------------------------------- */
/* Uses CSS mask-image so the PNG icons (line-art with alpha) inherit the
   surrounding box's `color` — same icon shape, colour comes from the parent
   (.amb-mvmt-icon-box). */
.amb-mvmt-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) no-repeat center / contain;
          mask: var(--icon-url) no-repeat center / contain;
}

/* --- Movement cards: Matrix red-pill / blue-pill on hover ---------------- */
/* Both cards render neutral white-on-dark by default. On hover, the card
   adopts its Matrix pill colour (harvest = red, fair launch = blue) and a
   bright comet sweeps the perimeter via a conic-gradient on a ::before
   pseudo-element (clipped to a 2-px ring with the padding-box mask trick).
   Custom properties drive everything — wrapper, eyebrow, icon-box, comet —
   so the whole card cohesively shifts colour from a single hover trigger. */

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

.amb-mvmt-card {
  --mvmt-card-bg:        rgba(255, 255, 255, 0.03);
  --mvmt-card-border:    rgba(255, 255, 255, 0.10);
  --mvmt-card-eyebrow:   rgba(255, 255, 255, 0.45);
  --mvmt-icon-bg:        rgba(255, 255, 255, 0.04);
  --mvmt-icon-border:    rgba(255, 255, 255, 0.12);
  --mvmt-icon-color:     rgba(255, 255, 255, 0.55);
  /* --mvmt-pill, --mvmt-pill-soft, --mvmt-pill-glow are set by the modifier
     classes below (.amb-mvmt-card--harvest / .amb-mvmt-card--fair). */
  position: relative;
  background-color: var(--mvmt-card-bg);
  border-color: var(--mvmt-card-border);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.amb-mvmt-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--mvmt-spin, 0deg),
    transparent 0deg,
    transparent 280deg,
    var(--mvmt-pill-soft, transparent) 320deg,
    var(--mvmt-pill, transparent) 350deg,
    var(--mvmt-pill, transparent) 360deg
  );
  /* Padding-box mask trick: a solid mask on content-box subtracted from a
     solid mask on padding-box leaves only the 2-px ring visible. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.amb-mvmt-card:hover::before,
.amb-mvmt-card.amb-mvmt-active::before {
  opacity: 1;
  /* 7s per full revolution — slower than the 3s default; the comet glides
     around the perimeter rather than racing, which reads smoother. */
  animation: amb-mvmt-comet 7s linear infinite;
}
@keyframes amb-mvmt-comet {
  to { --mvmt-spin: 360deg; }
}

.amb-mvmt-eyebrow {
  color: var(--mvmt-card-eyebrow);
  transition: color .35s ease;
}
.amb-mvmt-icon-box {
  background-color: var(--mvmt-icon-bg);
  border: 1px solid var(--mvmt-icon-border);
  color: var(--mvmt-icon-color);
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}

/* Red pill = the harsh truth we're fighting */
.amb-mvmt-card--harvest {
  --mvmt-pill:      rgb(239, 68, 68);
  --mvmt-pill-soft: rgba(239, 68, 68, 0.30);
  --mvmt-pill-glow: rgba(239, 68, 68, 0.18);
}
.amb-mvmt-card--harvest:hover,
.amb-mvmt-card--harvest.amb-mvmt-active {
  --mvmt-card-bg:      rgba(239, 68, 68, 0.04);
  --mvmt-card-eyebrow: rgb(239, 68, 68);
  --mvmt-icon-bg:      rgba(239, 68, 68, 0.08);
  --mvmt-icon-border:  rgba(239, 68, 68, 0.30);
  --mvmt-icon-color:   rgb(239, 68, 68);
  box-shadow: 0 0 36px var(--mvmt-pill-glow);
}

/* Blue pill = the alternative we're building */
.amb-mvmt-card--fair {
  --mvmt-pill:      rgb(59, 130, 246);
  --mvmt-pill-soft: rgba(59, 130, 246, 0.30);
  --mvmt-pill-glow: rgba(59, 130, 246, 0.18);
}
.amb-mvmt-card--fair:hover,
.amb-mvmt-card--fair.amb-mvmt-active {
  --mvmt-card-bg:      rgba(59, 130, 246, 0.04);
  --mvmt-card-eyebrow: rgb(59, 130, 246);
  --mvmt-icon-bg:      rgba(59, 130, 246, 0.08);
  --mvmt-icon-border:  rgba(59, 130, 246, 0.30);
  --mvmt-icon-color:   rgb(59, 130, 246);
  box-shadow: 0 0 36px var(--mvmt-pill-glow);
}

@media (prefers-reduced-motion: reduce) {
  .amb-mvmt-card,
  .amb-mvmt-eyebrow,
  .amb-mvmt-icon-box {
    transition: none !important;
  }
  .amb-mvmt-card:hover::before {
    /* Stop the rotation, but keep the static red/blue ring + glow on hover */
    animation: none !important;
  }
}

/* --- Architect tier: rotating perimeter ---------------------------------- */
.amb-tier-architect {
  position: relative;
  background: linear-gradient(180deg, #141130 0%, #0a0818 100%);
}
.amb-tier-architect::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--ambAngle, 0deg), #d4a843, #6254f1, #05e1f7, #d4a843);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ambGradSpin 15s linear infinite;
  pointer-events: none;
}

/* --- Sticky CTA pill ----------------------------------------------------- */
.amb-sticky-cta {
  position: fixed; bottom: 16px; right: 16px; z-index: 40;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s ease-out, transform .25s ease-out;
}
.amb-sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (max-width: 575px) {
  .amb-sticky-cta { bottom: 12px; right: 12px; left: 12px; }
  .amb-sticky-cta a { width: 100%; justify-content: center; }
}

/* --- Two-step form transition ------------------------------------------- */
.amb-form-step { transition: opacity .25s ease-out, transform .25s ease-out; }
.amb-form-step.is-leaving { opacity: 0; transform: translateX(-12px); position: absolute; left: 0; right: 0; }
.amb-form-step.is-entering { opacity: 0; transform: translateX(12px); }
.amb-form-step.is-entered  { opacity: 1; transform: translateX(0); }

/* --- Confirmation panel scale-in ---------------------------------------- */
.amb-confirmation { animation: ambConfirm 500ms cubic-bezier(.18,.89,.32,1.28) both; }
@keyframes ambConfirm {
  0%   { opacity: 0; transform: scale(.92); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}
.amb-check-circle { animation: ambCheck 700ms cubic-bezier(.18,.89,.32,1.28) both; }
@keyframes ambCheck {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* --- Form-card background swap on confirmation ----------------------------
 * When the form transitions to the confirmation panel, JS toggles
 * `is-confirmation` on `#amb-form-card`. The form-card's static
 * gradient background is swapped for the same hero silhouettes image,
 * darkened with a vertical gradient so the check circle, heading, and
 * Discord/X icon buttons stay readable.
 *
 * Side effect: visitors close the page on the same image they opened it
 * with — the silhouettes that issued the rallying cry now welcome them
 * into the program. */
#amb-form-card.is-confirmation {
  background-image:
    linear-gradient(180deg, rgba(10, 8, 24, 0.85) 0%, rgba(10, 8, 24, 0.55) 45%, rgba(10, 8, 24, 0.95) 100%),
    url('/assets/ambassadors/hero-silhouettes.png');
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  /* Override the existing tailwind from-/to- gradient by raising specificity
     via the `.is-confirmation` class on the same element. */
  background-color: transparent;
  transition: background-image .4s ease;
}

/* --- Form fields --------------------------------------------------------- */
.amb-input {
  width: 100%;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(10, 8, 24, 0.6);
  padding: 12px 18px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.amb-input::placeholder { color: rgba(255,255,255,0.35); }
.amb-input:focus { outline: none; border-color: #8176f4; box-shadow: 0 0 0 3px rgba(129,118,244,0.25); }
.amb-input.amb-textarea { border-radius: 18px; min-height: 120px; padding: 14px 18px; resize: vertical; }

/* --- Select / dropdown trigger ------------------------------------------- */
/* Polished native <select>: pill-shape trigger, custom chevron in brand purple,
   hover lift, focus ring, dark-themed options where the browser allows it. */
.amb-input.amb-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 46px;
  background-color: rgba(10, 8, 24, 0.65);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a198f7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px 14px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.amb-input.amb-select:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background-color: rgba(20, 17, 48, 0.85);
}
.amb-input.amb-select:focus {
  outline: none;
  border-color: #8176f4;
  background-color: rgba(20, 17, 48, 0.92);
  box-shadow: 0 0 0 3px rgba(129, 118, 244, 0.28), 0 4px 18px rgba(98, 84, 241, 0.12);
}
.amb-input.amb-select:active { transform: translateY(0.5px); }
/* Native option / optgroup styling — Chromium fully respects, Firefox partial */
.amb-input.amb-select option,
.amb-input.amb-select optgroup {
  background: #141130;
  color: #fff;
  padding: 8px 14px;
}
.amb-input.amb-select optgroup {
  font-weight: 700;
  color: #a198f7;
  letter-spacing: 0.02em;
}
.amb-input.amb-select option {
  font-weight: 500;
  font-size: 14px;
}
.amb-input.amb-select option:checked {
  background: linear-gradient(0deg, rgba(98, 84, 241, 0.4), rgba(98, 84, 241, 0.4)), #141130;
  font-weight: 600;
}
.amb-input.amb-select option[value=""] {
  color: rgba(255, 255, 255, 0.4);
}
/* Empty-value shows the placeholder colour up top, too */
.amb-input.amb-select:has(option[value=""]:checked):not(:focus) {
  color: rgba(255, 255, 255, 0.55);
}
.amb-label { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); margin-bottom: 6px; letter-spacing: .02em; text-transform: uppercase; }
.amb-help  { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 6px; line-height: 1.5; }
.amb-error { font-size: 12px; color: #f87171; margin-top: 6px; min-height: 16px; }
.amb-input[aria-invalid="true"] { border-color: #f87171; }
.amb-checkbox-row { display: flex; gap: 12px; align-items: flex-start; }
.amb-checkbox-row input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: #6254f1; flex-shrink: 0; }
.amb-checkbox-row label { font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.5; }
.amb-honeypot { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; }

.amb-radio-group { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
@media (min-width: 576px) { .amb-radio-group { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.amb-radio-tile {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px; padding: 10px 12px;
  font-size: 13px; color: rgba(255,255,255,0.7);
  cursor: pointer; transition: all .15s ease-out;
  background: rgba(10,8,24,0.4);
}
.amb-radio-tile:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
.amb-radio-tile.is-active { border-color: #8176f4; background: rgba(98,84,241,0.18); color: #fff; }
.amb-radio-tile.is-disabled { opacity: 0.4; cursor: not-allowed; }
.amb-radio-tile input { display: none; }

/* --- Form progress indicator -------------------------------------------- */
.amb-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.amb-progress-step { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 8px; transition: color .25s ease; }
.amb-progress-step.is-active { color: #fff; }
.amb-progress-step.is-done    { color: #53b96a; }
.amb-progress-num {
  width: 22px; height: 22px; border-radius: 9999px;
  border: 1px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  position: relative;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
/* Active step: explicit white fill + dark text. Avoid `currentColor` here —
   the `color: #0a0818` rule below would propagate into background/border via
   currentColor, collapsing the whole pill into the same dark colour as the
   form-card surface (i.e. invisible). */
.amb-progress-step.is-active .amb-progress-num {
  background: #fff;
  border-color: #fff;
  color: #0a0818;
}
/* Done state: green pill with a checkmark, number itself is hidden */
.amb-progress-step.is-done .amb-progress-num {
  background: #53b96a;
  border-color: #53b96a;
  color: transparent;
  font-size: 0;
}
.amb-progress-step.is-done .amb-progress-num::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0818' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  animation: ambProgressCheckIn .3s cubic-bezier(.18, .89, .32, 1.28) both;
}
@keyframes ambProgressCheckIn {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}
.amb-progress-bar { flex: 1; height: 1px; background: rgba(255,255,255,0.1); position: relative; }
.amb-progress-bar::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(to right, #6254f1, #05e1f7);
  transition: width .35s ease-out;
}
.amb-progress-bar.is-half::after { width: 50%; }
.amb-progress-bar.is-full::after { width: 100%; }

/* --- Multi-select chip group (content_types, languages) ------------------ */
.amb-chip-group {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.amb-chip {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 9999px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.7);
  background: rgba(10,8,24,0.4);
  cursor: pointer;
  transition: all .15s ease-out;
  font-family: inherit;
}
.amb-chip:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
.amb-chip:focus-visible { outline: 2px solid #8176f4; outline-offset: 2px; }
.amb-chip.is-active {
  border-color: #8176f4;
  background: rgba(98,84,241,0.18);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(129,118,244,0.4) inset;
}
.amb-chip.is-active::before {
  content: '✓';
  margin-right: 6px;
  font-size: 11px;
  color: #a198f7;
}

/* --- Collapsible toggle (optional secondary / tertiary platform) --------- */
.amb-collapsible-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.75);
  background: transparent;
  border: 1px dashed rgba(129,118,244,0.4);
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: all .15s ease-out;
  font-family: inherit;
}
.amb-collapsible-toggle:hover {
  border-color: #8176f4;
  background: rgba(98,84,241,0.06);
  color: #fff;
}
.amb-collapsible-toggle:focus-visible { outline: 2px solid #8176f4; outline-offset: 2px; }
.amb-collapsible-toggle[aria-expanded="true"] {
  border-style: solid;
  border-color: #8176f4;
  background: rgba(98,84,241,0.1);
  color: #fff;
}
.amb-collapsible-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 9999px;
  background: rgba(129,118,244,0.25);
  color: #fff;
  font-size: 14px; font-weight: 700;
  line-height: 1;
}
.amb-collapsible-content {
  animation: ambCollapseIn .25s ease-out both;
}
@keyframes ambCollapseIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Program Rules: card hover animation -------------------------------- */
.amb-rules-card {
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.amb-rules-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(129, 118, 244, 0.35);
  transform: translateY(-4px);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(129, 118, 244, 0.08);
}

/* --- Program Rules: strike-system colour progression -------------------- */
.amb-strike-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.amb-strike-dot--warning { background: #d4a843; box-shadow: 0 0 6px rgba(212, 168, 67, 0.4); }
.amb-strike-dot--cut     { background: #f97316; box-shadow: 0 0 6px rgba(249, 115, 22, 0.4); }
.amb-strike-dot--removal { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .amb-hero-copy,
  .amb-hero-tag,
  .amb-tldr-item,
  .amb-form-step,
  .amb-confirmation,
  .amb-check-circle,
  .amb-collapsible-content {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .amb-hero-silhouettes {
    animation: none !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
  }
  .amb-hero-halo {
    animation: none !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
  }
  .amb-flow-dot,
  .amb-comp-highlight::before,
  .amb-tier-architect::before,
  .amb-progress-step.is-done .amb-progress-num::after,
  .amb-review-track::after {
    animation: none !important;
    opacity: 0 !important;
  }
  .amb-review-step-1 .amb-sweep-arc,
  .amb-review-step-2 .amb-sweep-arc,
  .amb-review-step-3 .amb-sweep-arc,
  .amb-review-step-4 .amb-sweep-arc {
    animation: none !important;
    opacity: 0 !important;
  }
  .amb-sticky-cta { transition: none !important; }
  /* Site-wide niceness — also disable the hero gradient + scroll-reveal slides */
  .hero-gradient-bg,
  .hero-icon { animation: none !important; }
  .scroll-reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
}