/* SpeakLab Saturdays — a curated weekend experience, sold as an invitation
   rather than a seat.

   Light theme, matched to the rest of the site: the same #fafafa canvas,
   Outfit type, navy→gold→teal gradient headings, white cards with soft
   shadows and the navy/teal/amber accent trio from style.css. Warm amber is
   the signature accent here (the weekend colour), so the page still reads as
   its own thing without ever leaving the site's palette.

   Self-contained on purpose — this page must never be broken by an edit to
   style.css, and vice versa. Every selector is namespaced .sat-.

   Written mobile-first: this page is opened almost entirely from an Instagram
   link on a phone, so the phone layout is the base and desktop rules are the
   exceptions. */

:root {
  --sat-bg: #fafafa;
  --sat-surface: #ffffff;
  --sat-surface-2: #fbfcfe;
  --sat-line: #e6e8f0;
  --sat-line-soft: #eef0f6;

  --sat-ink: #0f172a;
  --sat-body: #475569;
  --sat-muted: #94a3b8;

  /* Site accent trio, plus a warm gold as the Saturdays signature. */
  --sat-navy: #1e3a8a;
  --sat-blue: #3b82f6;
  --sat-teal: #0f766e;
  --sat-teal-lt: #14b8a6;
  --sat-amber: #d97706;
  --sat-gold: #f59e0b;
  --sat-gold-lt: #fbbf24;
  --sat-violet: #7c3aed;
  --sat-pink: #e11d73;

  --sat-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  --sat-shadow-lg: 0 24px 60px -24px rgba(15, 23, 42, 0.18);

  --sat-radius: 22px;
  --sat-radius-sm: 14px;
  --sat-max: 1080px;

  /* Every horizontal gutter pulls from here, so the hero, the cards and the
     form can never drift out of alignment on a narrow screen. */
  --sat-gutter: 20px;
}

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

/* The buttons and steps rely on the `hidden` attribute to show one thing at a
   time. `.sat-btn` sets display:inline-flex, which would otherwise beat the
   UA `[hidden]{display:none}` rule and leave every nav button visible at once
   — so `hidden` is made to win everywhere on this page. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background-color: var(--sat-bg);
  color: var(--sat-ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Same soft radial washes as the homepage hero, so the two pages feel like
     one site the moment you land. */
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(217, 119, 6, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 12%, rgba(30, 58, 138, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 90%, rgba(15, 118, 110, 0.06) 0%, transparent 50%);
  background-attachment: fixed;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.sat-wrap {
  width: 100%;
  max-width: var(--sat-max);
  margin: 0 auto;
  padding-inline: var(--sat-gutter);
}

/* ── Top bar ──────────────────────────────────────────────────────────── */
.sat-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px var(--sat-gutter);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05);
}

.sat-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sat-body);
  text-decoration: none;
  padding: 8px 10px;
  margin-left: -10px;
  border-radius: 10px;
  transition: color 0.2s, background 0.2s;
}
.sat-back:hover { color: var(--sat-ink); background: #f1f5f9; }

.sat-brand {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sat-ink);
}

.sat-topbar-tag {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sat-amber);
  background: #fff7ed;
  border: 1px solid #fed7aa;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ── Shared bits ──────────────────────────────────────────────────────── */
.sat-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sat-amber);
  background: #fff7ed;
  border: 1px solid #fed7aa;
  padding: 8px 14px;
  border-radius: 999px;
}

.sat-dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55);
  animation: sat-pulse 2.2s infinite;
}

@keyframes sat-pulse {
  70% { box-shadow: 0 0 0 9px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.sat-section { padding: 46px 0; }
.sat-section-tight { padding: 28px 0; }

.sat-h2 {
  font-size: clamp(1.75rem, 7.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--sat-ink);
}

.sat-lede {
  color: var(--sat-body);
  font-size: 1rem;
  line-height: 1.7;
  margin-top: 14px;
}

.sat-center { text-align: center; }
.sat-center .sat-lede { max-width: 560px; margin-inline: auto; }

/* Animated navy→gold→teal wordmark — the exact gradient the homepage H1 uses,
   so a headline here is unmistakably the same brand. */
.sat-grad {
  background: linear-gradient(90deg, #1e3a8a 0%, #d97706 33%, #0f766e 66%, #1e3a8a 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sat-flow 8s linear infinite;
}

@keyframes sat-flow {
  to { background-position: 300% center; }
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.sat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 17px 26px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  /* 54px+ tall so it stays a comfortable thumb target on a phone. */
  min-height: 54px;
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s, background 0.2s;
}
.sat-btn:active { transform: scale(0.975); }

/* Warm signature CTA. Amber reads premium on a light page and ties to the
   weekend theme while still being a site palette colour. */
.sat-btn-gold {
  color: #fff;
  background: linear-gradient(135deg, var(--sat-gold), var(--sat-amber));
  box-shadow: 0 10px 26px -8px rgba(217, 119, 6, 0.5);
}
.sat-btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -8px rgba(217, 119, 6, 0.6);
  filter: brightness(1.05);
}

.sat-btn-ghost {
  color: var(--sat-ink);
  background: var(--sat-surface);
  border: 1px solid var(--sat-line);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.sat-btn-ghost:hover { background: #f8fafc; border-color: #d7dbe6; }

.sat-btn-block { width: 100%; }

.sat-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.sat-hero {
  position: relative;
  overflow: hidden;
  padding: 48px 0 40px;
  text-align: center;
}

/* Two slow-drifting colour blobs — soft on a light background, they give the
   hero life on first paint without shipping a video to a phone on mobile
   data. */
.sat-hero::before,
.sat-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.sat-hero::before {
  width: 320px; height: 320px;
  top: -120px; left: -120px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.5), transparent 65%);
  animation: sat-float-a 15s ease-in-out infinite;
}
.sat-hero::after {
  width: 300px; height: 300px;
  bottom: -130px; right: -110px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.35), transparent 65%);
  animation: sat-float-b 18s ease-in-out infinite;
}

@keyframes sat-float-a {
  50% { transform: translate(60px, 50px) scale(1.14); }
}
@keyframes sat-float-b {
  50% { transform: translate(-55px, -45px) scale(1.1); }
}

.sat-hero-inner { position: relative; z-index: 1; }

.sat-hero h1 {
  font-size: clamp(2.4rem, 12.5vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 22px 0 0;
  color: var(--sat-ink);
}

/* The rotating word sits in its own clipped box so the headline never
   reflows as the words swap — on a 360px screen a reflow is very visible. */
.sat-rotator {
  display: block;
  height: 1.05em;
  overflow: hidden;
  position: relative;
}
.sat-rotator span {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(60%);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.sat-rotator span.is-in { opacity: 1; transform: translateY(0); }
.sat-rotator span.is-out { opacity: 0; transform: translateY(-60%); }

.sat-hero-sub {
  color: var(--sat-body);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 430px;
  margin: 20px auto 0;
}

.sat-hero-cta { margin-top: 28px; }

.sat-hero-note {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--sat-muted);
}

/* ── Countdown ────────────────────────────────────────────────────────── */
.sat-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 380px;
  margin: 30px auto 0;
}

.sat-cd-cell {
  background: var(--sat-surface);
  border: 1px solid var(--sat-line);
  border-radius: 16px;
  padding: 12px 4px 10px;
  box-shadow: var(--sat-shadow);
}

.sat-cd-num {
  display: block;
  font-size: clamp(1.4rem, 6.5vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--sat-navy);
}

.sat-cd-lbl {
  display: block;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sat-muted);
  margin-top: 3px;
}

/* ── Marquee ──────────────────────────────────────────────────────────── */
.sat-marquee {
  overflow: hidden;
  border-block: 1px solid var(--sat-line);
  background: rgba(255, 255, 255, 0.6);
  padding: 13px 0;
  /* Fade the ends so the loop point is never visible. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.sat-marquee-track {
  display: flex;
  width: max-content;
  gap: 26px;
  animation: sat-scroll 26s linear infinite;
}
.sat-marquee-track.is-reverse { animation-direction: reverse; }
.sat-marquee-fast .sat-marquee-track { animation-duration: 18s; }

@keyframes sat-scroll {
  /* The track holds the list twice, so shifting by exactly half loops
     seamlessly regardless of how wide the content ends up. */
  to { transform: translateX(-50%); }
}

.sat-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sat-body);
  white-space: nowrap;
}
.sat-marquee-item::after {
  content: "✦";
  color: var(--sat-gold);
  font-size: 0.7rem;
}

/* ── Ticket (this week's experience) ──────────────────────────────────── */
.sat-ticket {
  position: relative;
  background: var(--sat-surface);
  border: 1px solid var(--sat-line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--sat-shadow-lg);
}

/* A warm gradient stripe across the top so the ticket reads as the hero card
   of the page, not just another white box. */
.sat-ticket::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--sat-gold), var(--sat-amber), var(--sat-navy), var(--sat-teal));
  z-index: 2;
}

.sat-ticket-top { padding: 28px 22px 22px; }

.sat-ticket-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sat-amber);
}

.sat-ticket-emoji {
  font-size: 2.6rem;
  line-height: 1;
  margin: 16px 0 10px;
  display: block;
}

.sat-ticket h3 {
  font-size: clamp(1.5rem, 6.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--sat-ink);
}

.sat-ticket-desc {
  color: var(--sat-body);
  font-size: 0.95rem;
  margin-top: 10px;
}

/* The perforated divider: a dashed rule with a notch punched out of each
   side, so the card reads as a physical ticket rather than a box. The
   notches are filled with the page background colour. */
.sat-ticket-rip {
  position: relative;
  height: 0;
  border-top: 2px dashed #e2e6ef;
  margin: 4px 0;
}
.sat-ticket-rip::before,
.sat-ticket-rip::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* The page background colour punched through the card edge — this is what
     turns a dashed rule into a torn ticket stub. */
  background: var(--sat-bg);
}
.sat-ticket-rip::before { left: -13px; }
.sat-ticket-rip::after { right: -13px; }

.sat-ticket-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--sat-line-soft);
  padding: 1px 0 0;
}

.sat-ticket-cell {
  background: var(--sat-surface);
  padding: 16px 20px;
}

.sat-ticket-k {
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sat-muted);
  margin-bottom: 5px;
}

.sat-ticket-v {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sat-ink);
}
.sat-ticket-v small {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--sat-muted);
  margin-top: 2px;
}
.sat-ticket-v .sat-strike {
  color: var(--sat-muted);
  text-decoration: line-through;
  font-weight: 600;
  margin-right: 6px;
}

.sat-ticket-foot { padding: 20px 22px 24px; }

/* ── Seats meter ──────────────────────────────────────────────────────── */
.sat-seats { margin-bottom: 16px; }

.sat-seats-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sat-muted);
  margin-bottom: 10px;
}
.sat-seats-head strong { color: var(--sat-amber); }

.sat-seat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sat-seat {
  width: 100%;
  max-width: 22px;
  aspect-ratio: 1;
  flex: 1 1 18px;
  border-radius: 7px;
  background: #f1f5f9;
  border: 1px solid var(--sat-line);
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
}
.is-in .sat-seat { transform: scale(1); opacity: 1; }
.sat-seat.is-taken {
  background: linear-gradient(150deg, var(--sat-gold-lt), var(--sat-amber));
  border-color: transparent;
  box-shadow: 0 4px 12px -4px rgba(217, 119, 6, 0.55);
}

/* ── "Not a workshop" negatives ───────────────────────────────────────── */
.sat-nots {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

.sat-not {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--sat-surface);
  border: 1px solid var(--sat-line);
  border-radius: var(--sat-radius-sm);
  padding: 14px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sat-body);
  text-decoration: line-through;
  text-decoration-color: rgba(225, 29, 115, 0.6);
  text-decoration-thickness: 2px;
  box-shadow: var(--sat-shadow);
}
.sat-not span:first-child {
  flex: none;
  text-decoration: none;
  color: var(--sat-pink);
  font-size: 1.05rem;
}

/* ── Philosophy verbs ─────────────────────────────────────────────────── */
.sat-quote {
  font-size: clamp(2rem, 10vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 6px 0 0;
}

.sat-verbs {
  list-style: none;
  margin-top: 30px;
  border-top: 1px solid var(--sat-line);
}

.sat-verbs li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--sat-line);
  font-size: clamp(1.15rem, 5.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sat-ink);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-in .sat-verbs li { opacity: 1; transform: none; }
/* Staggered so the list reads as a sequence, not a block that appears. */
.is-in .sat-verbs li:nth-child(1) { transition-delay: 0.00s; }
.is-in .sat-verbs li:nth-child(2) { transition-delay: 0.08s; }
.is-in .sat-verbs li:nth-child(3) { transition-delay: 0.16s; }
.is-in .sat-verbs li:nth-child(4) { transition-delay: 0.24s; }
.is-in .sat-verbs li:nth-child(5) { transition-delay: 0.32s; }

.sat-verbs em {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--sat-gold);
  min-width: 26px;
}

/* ── Experience deck (swipeable) ──────────────────────────────────────── */
.sat-deck-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.sat-swipe-hint {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sat-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sat-swipe-hint::after {
  content: "→";
  animation: sat-nudge 1.6s ease-in-out infinite;
}
@keyframes sat-nudge {
  50% { transform: translateX(5px); }
}

/* Bleeds past the page gutter so a card edge peeks in from the right — that
   peek is the whole reason a phone user knows to swipe. */
.sat-deck {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px var(--sat-gutter) 18px;
  margin-inline: calc(var(--sat-gutter) * -1);
  scroll-padding-inline: var(--sat-gutter);
}
.sat-deck::-webkit-scrollbar { display: none; }

.sat-xp {
  flex: 0 0 78%;
  max-width: 320px;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--sat-radius);
  border: 1px solid var(--sat-line);
  background: var(--sat-surface);
  padding: 22px 20px 24px;
  box-shadow: var(--sat-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sat-xp:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px color-mix(in srgb, var(--xp) 55%, transparent);
  border-color: color-mix(in srgb, var(--xp) 40%, var(--sat-line));
}

/* Each card carries its own accent in a custom property so the glow, the
   chip and the rule all pull from one value and cannot drift apart. */
.sat-xp::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--xp), transparent 68%);
  opacity: 0.14;
  pointer-events: none;
}

.sat-xp-emoji {
  font-size: 2rem;
  line-height: 1;
  position: relative;
}

.sat-xp h3 {
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 14px 0 8px;
  position: relative;
  color: var(--sat-ink);
}

.sat-xp p {
  color: var(--sat-body);
  font-size: 0.88rem;
  line-height: 1.6;
  position: relative;
  flex: 1;
}

.sat-xp-tag {
  align-self: flex-start;
  margin-top: 16px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--xp);
  background: color-mix(in srgb, var(--xp) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--xp) 30%, transparent);
  padding: 6px 12px;
  border-radius: 999px;
  position: relative;
}

.sat-deck-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
}

.sat-deck-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d5d9e3;
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.sat-deck-dots button.is-active {
  width: 22px;
  background: var(--sat-amber);
}

/* ── Experience stack — cards deal in from the right ──────────────────────
   Base state (no JS / reduced motion) is a plain readable column so the cards
   are always reachable. initHstack pins the section and drives the deal. */
.sat-hstack-stage {
  position: relative;
  max-width: 540px;
  margin: 22px auto 0;
}
.sat-hstack-stage > .sat-xp {
  width: 100%;
  max-width: none;
  flex: none;
  margin-bottom: 18px;
}
.sat-hstack-stage > .sat-xp:last-child { margin-bottom: 0; }

/* Pinned/active mode (class added by JS). The pin holds still while the page
   scrolls through it; the stage becomes an absolute stack the JS animates. */
.sat-hstack.is-hstack .sat-hstack-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;              /* clips cards waiting off to the right */
}
.sat-hstack.is-hstack .sat-hstack-stage > .sat-xp {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  transition: none;              /* transform is scroll-driven; no lag */
  transform-origin: 50% 50%;
  /* Promote each card to its own GPU layer and keep its paint contained, so
     moving them is a cheap composite — this is what kills the scroll jank. */
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: layout paint;
  /* Lighter shadow than a static card: a big blur radius repaints expensively
     on every frame while the card slides. */
  border-color: color-mix(in srgb, var(--xp) 28%, var(--sat-line));
  box-shadow:
    0 14px 28px -16px color-mix(in srgb, var(--xp) 70%, transparent),
    0 3px 10px rgba(15, 23, 42, 0.06);
}
.sat-hstack.is-hstack .sat-hstack-stage > .sat-xp::before {
  width: 260px; height: 260px; opacity: 0.32;
}
.sat-hstack.is-hstack .sat-hstack-stage > .sat-xp::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--xp) 82%, #fff), transparent);
  opacity: 0.8;
}
.sat-hstack.is-hstack .sat-deck-dots { margin-top: 18px; }
.sat-hstack.is-hstack .sat-deck-dots button { pointer-events: none; }

/* ── Checklist ────────────────────────────────────────────────────────── */
.sat-checks {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.sat-check {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: var(--sat-surface);
  border: 1px solid var(--sat-line);
  border-radius: var(--sat-radius-sm);
  padding: 15px 16px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--sat-ink);
  box-shadow: var(--sat-shadow);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-in .sat-check { opacity: 1; transform: none; }
.is-in .sat-check:nth-child(1) { transition-delay: 0.00s; }
.is-in .sat-check:nth-child(2) { transition-delay: 0.07s; }
.is-in .sat-check:nth-child(3) { transition-delay: 0.14s; }
.is-in .sat-check:nth-child(4) { transition-delay: 0.21s; }
.is-in .sat-check:nth-child(5) { transition-delay: 0.28s; }

.sat-check-tick {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--sat-gold-lt), var(--sat-amber));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  margin-top: 1px;
}

/* ── Who it's for ─────────────────────────────────────────────────────── */
.sat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.sat-chip {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sat-ink);
  background: var(--sat-surface);
  border: 1px solid var(--sat-line);
  border-radius: 999px;
  padding: 11px 18px;
  box-shadow: var(--sat-shadow);
}

/* ── Generic panel ────────────────────────────────────────────────────── */
.sat-panel {
  background: var(--sat-surface);
  border: 1px solid var(--sat-line);
  border-radius: var(--sat-radius);
  padding: 26px 22px;
  box-shadow: var(--sat-shadow);
}

.sat-panel h2 { margin-bottom: 4px; }

/* ── Two-panel 3D swap ────────────────────────────────────────────────────
   Base (no JS / reduced motion): the two panels are a plain readable stack.
   JS adds .is-3d, which floats them into a shared 3D space where they trade
   front/back forever. Pure transform + opacity keyframes = smooth. */
.sat-swap { position: relative; max-width: 560px; margin: 0 auto; }
.sat-swap > .sat-panel + .sat-panel { margin-top: 14px; }

.sat-swap.is-3d {
  perspective: 1500px;
  /* Extra room below so the back card can peek out under the front one. */
  height: calc(var(--swap-h, 320px) + 66px);
}
.sat-swap.is-3d > .sat-panel {
  position: absolute;
  inset: 0 0 auto 0;
  margin: 0;
  transform-origin: 50% 100%;    /* hinge at the bottom, so it tilts up like a lid */
  backface-visibility: hidden;
  will-change: transform, opacity;
  animation: sat-swap-a 9s ease-in-out infinite;
}
.sat-swap.is-3d > .sat-panel:nth-child(2) { animation-name: sat-swap-b; }
/* The front card casts over the peeking one so the stack reads as depth. */
.sat-swap.is-3d > .sat-panel { box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.28); }
/* Let people actually read — hovering (desktop) freezes the loop. */
.sat-swap.is-3d:hover > .sat-panel { animation-play-state: paused; }

/* Two states only, so the pair always reads as one FRONT card (flat, forward)
   and one BACK card (dropped down and pushed away, tilted back so it clearly
   peeks out under the front one). A is front first; B is front second; the
   z-index flips at the mid-cross so they trade cleanly. */
@keyframes sat-swap-a {
  0%,  40% { transform: translate3d(0,0,0) rotateX(0deg); opacity: 1; z-index: 2; }
  50%, 90% { transform: translate3d(0,54px,-150px) rotateX(9deg); opacity: 0.94; z-index: 1; }
  100%     { transform: translate3d(0,0,0) rotateX(0deg); opacity: 1; z-index: 2; }
}
@keyframes sat-swap-b {
  0%,  40% { transform: translate3d(0,54px,-150px) rotateX(9deg); opacity: 0.94; z-index: 1; }
  50%, 90% { transform: translate3d(0,0,0) rotateX(0deg); opacity: 1; z-index: 2; }
  100%     { transform: translate3d(0,54px,-150px) rotateX(9deg); opacity: 0.94; z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sat-swap.is-3d > .sat-panel { animation: none; }
}

/* ── Mission ──────────────────────────────────────────────────────────── */
.sat-mission {
  text-align: center;
  padding: 48px 0;
  position: relative;
}

.sat-mission p {
  font-size: clamp(1.3rem, 6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  max-width: 680px;
  margin: 0 auto;
  color: var(--sat-ink);
}

.sat-mission .sat-mission-small {
  font-size: 1rem;
  font-weight: 500;
  color: var(--sat-body);
  letter-spacing: 0;
  line-height: 1.7;
  margin-top: 20px;
}

/* ── Reading progress bar ─────────────────────────────────────────────── */
/* A thin gradient line pinned to the very top that fills as you scroll. On a
   long phone page it turns "how much is left?" into something you can see —
   which is exactly what keeps a first-time reader scrolling to the form. */
.sat-progress-top {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 70;
  background: linear-gradient(90deg, var(--sat-gold), var(--sat-amber), var(--sat-navy), var(--sat-teal));
  box-shadow: 0 1px 6px rgba(217, 119, 6, 0.4);
  transition: width 0.1s linear;
  will-change: width;
}

/* ── Reveal-on-scroll base + variants ─────────────────────────────────── */
/* One IntersectionObserver drives all of these — the direction and feel come
   entirely from the modifier class, so the page can have real variety
   (things slide in from the sides, scale up, un-blur) without a line of
   per-section JavaScript. */
.sat-reveal {
  opacity: 0;
  /* Kept small on purpose: the reveal should read as the text fading up into
     place, not as blocks sliding around the screen. */
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s ease;
  will-change: opacity, transform;
}
.sat-reveal.is-in { opacity: 1; transform: none; filter: none; }

.sat-reveal--left  { transform: translateX(-16px); }
.sat-reveal--right { transform: translateX(16px); }
.sat-reveal--scale { transform: scale(0.97); }
.sat-reveal--blur  { filter: blur(7px); transform: translateY(8px); }
.sat-reveal--rise  { transform: translateY(20px); }

/* Delay steps for hand-staggering a small cluster of reveals. */
.sat-reveal.d1 { transition-delay: 0.10s; }
.sat-reveal.d2 { transition-delay: 0.20s; }
.sat-reveal.d3 { transition-delay: 0.30s; }

/* Any grid/flex row tagged .sat-stagger animates its own direct children in
   sequence once the row itself reveals — used by the countdown and the
   who-it's-for chips. */
.sat-stagger > * {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sat-stagger.is-in > * { opacity: 1; transform: none; }
.sat-stagger.is-in > *:nth-child(1) { transition-delay: 0.04s; }
.sat-stagger.is-in > *:nth-child(2) { transition-delay: 0.10s; }
.sat-stagger.is-in > *:nth-child(3) { transition-delay: 0.16s; }
.sat-stagger.is-in > *:nth-child(4) { transition-delay: 0.22s; }
.sat-stagger.is-in > *:nth-child(5) { transition-delay: 0.28s; }
.sat-stagger.is-in > *:nth-child(6) { transition-delay: 0.34s; }

/* Emojis that gently bob, so the cards feel alive rather than printed. */
.sat-float { animation: sat-bob 3.4s ease-in-out infinite; }
.sat-float.f2 { animation-duration: 4.1s; animation-delay: 0.3s; }
.sat-float.f3 { animation-duration: 3.8s; animation-delay: 0.6s; }
@keyframes sat-bob {
  50% { transform: translateY(-7px) rotate(-4deg); }
}

/* Hero scroll cue — a soft nudge that this page keeps going. */
.sat-scrollcue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 30px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sat-muted);
}
.sat-scrollcue svg { animation: sat-cue 1.8s ease-in-out infinite; }
@keyframes sat-cue {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(5px); opacity: 1; }
}

/* ── Application form ─────────────────────────────────────────────────── */
.sat-apply {
  scroll-margin-top: 74px;
  padding-bottom: 120px;
}

.sat-form-card {
  background: var(--sat-surface);
  border: 1px solid var(--sat-line);
  border-radius: var(--sat-radius);
  padding: 24px 20px 26px;
  box-shadow: var(--sat-shadow-lg);
}

.sat-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sat-muted);
  margin-bottom: 9px;
}
.sat-progress-meta .sat-step-tag { color: var(--sat-amber); }

.sat-progress {
  height: 5px;
  border-radius: 999px;
  background: #edf0f5;
  overflow: hidden;
  margin-bottom: 24px;
}

.sat-progress-bar {
  height: 100%;
  width: 33%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sat-gold-lt), var(--sat-amber));
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sat-step-title {
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--sat-ink);
}

.sat-step-sub {
  color: var(--sat-body);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 7px 0 20px;
}

.sat-field { margin-bottom: 17px; }

.sat-field label,
.sat-legend {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sat-ink);
  margin-bottom: 8px;
}
.sat-field label .sat-opt {
  color: var(--sat-muted);
  font-weight: 500;
}

.sat-field input,
.sat-field select,
.sat-field textarea {
  width: 100%;
  font-family: inherit;
  /* 16px minimum — anything smaller makes iOS Safari zoom on focus, which
     throws the whole layout sideways mid-form. */
  font-size: 1rem;
  color: var(--sat-ink);
  background: #fbfcfe;
  border: 1px solid var(--sat-line);
  border-radius: 13px;
  padding: 14px 15px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.sat-field textarea { resize: vertical; min-height: 92px; line-height: 1.55; }

.sat-field select {
  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='%2394a3b8' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

.sat-field input::placeholder,
.sat-field textarea::placeholder { color: #aab0bd; }

.sat-field input:focus,
.sat-field select:focus,
.sat-field textarea:focus {
  outline: none;
  border-color: var(--sat-gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
}

.sat-field.has-error input,
.sat-field.has-error select,
.sat-field.has-error textarea { border-color: #ef4444; background: #fef2f2; }

.sat-error {
  display: none;
  font-size: 0.76rem;
  font-weight: 600;
  color: #dc2626;
  margin-top: 6px;
}
.sat-error.is-on { display: block; }

.sat-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.sat-fieldset { border: 0; margin-bottom: 20px; }

/* Big tappable choice rows — a native radio is far too small on a phone. */
.sat-choices { display: grid; gap: 9px; }

.sat-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fbfcfe;
  border: 1px solid var(--sat-line);
  border-radius: 13px;
  padding: 14px 15px;
  cursor: pointer;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--sat-ink);
  min-height: 52px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.sat-choice input { position: absolute; opacity: 0; pointer-events: none; }

.sat-choice-dot {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #cbd2de;
  position: relative;
  transition: border-color 0.2s;
}
.sat-choice-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--sat-amber);
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sat-choice.is-selected {
  border-color: var(--sat-gold);
  background: #fff7ed;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.10);
}
.sat-choice.is-selected .sat-choice-dot { border-color: var(--sat-amber); }
.sat-choice.is-selected .sat-choice-dot::after { transform: scale(1); }

.sat-counter {
  display: block;
  font-size: 0.72rem;
  color: var(--sat-muted);
  text-align: right;
  margin-top: 6px;
}

.sat-form-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.sat-nav {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.sat-nav .sat-btn { flex: 1; }

.sat-fineprint {
  font-size: 0.76rem;
  color: var(--sat-muted);
  text-align: center;
  line-height: 1.6;
  margin-top: 16px;
}

/* ── Screens (form / sending / done) ──────────────────────────────────── */
.sat-screen { display: none; }
.sat-screen.is-active { display: block; }

.sat-spinner {
  width: 38px;
  height: 38px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 3px solid #edf0f5;
  border-top-color: var(--sat-amber);
  animation: sat-spin 0.85s linear infinite;
}
@keyframes sat-spin { to { transform: rotate(360deg); } }

.sat-done { text-align: center; }

.sat-done-seal {
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, var(--sat-gold-lt), var(--sat-amber));
  box-shadow: 0 14px 32px -12px rgba(217, 119, 6, 0.6);
  animation: sat-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sat-pop {
  from { transform: scale(0.4); opacity: 0; }
}

.sat-done h2 {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--sat-ink);
}

.sat-done-body {
  color: var(--sat-body);
  font-size: 0.96rem;
  line-height: 1.7;
  margin-top: 12px;
}

.sat-done-steps {
  display: grid;
  gap: 12px;
  margin: 24px 0 22px;
  text-align: left;
}

.sat-done-step {
  display: flex;
  gap: 13px;
  background: #fbfcfe;
  border: 1px solid var(--sat-line);
  border-radius: var(--sat-radius-sm);
  padding: 15px 16px;
}
.sat-done-step h4 { font-size: 0.92rem; font-weight: 700; color: var(--sat-ink); }
.sat-done-step p { font-size: 0.83rem; color: var(--sat-body); margin-top: 3px; line-height: 1.55; }

.sat-num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--sat-amber);
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

/* ── Sticky mobile CTA ────────────────────────────────────────────────── */
.sat-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  padding: 12px var(--sat-gutter);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--sat-line);
  box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(120%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.sat-sticky.is-on { transform: none; }

.sat-sticky-copy {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.sat-sticky-copy strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--sat-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sat-sticky-copy span {
  font-size: 0.7rem;
  color: var(--sat-muted);
}

.sat-sticky .sat-btn {
  flex: none;
  min-height: 48px;
  padding: 13px 20px;
  font-size: 0.82rem;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.sat-footer {
  border-top: 1px solid var(--sat-line);
  background: #fff;
  padding: 34px 0 40px;
  text-align: center;
}
.sat-footer-word {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sat-amber);
}
.sat-footer p {
  font-size: 0.82rem;
  color: var(--sat-muted);
  margin-top: 10px;
}
.sat-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
  font-size: 0.82rem;
  font-weight: 600;
}
.sat-footer-links a {
  color: var(--sat-body);
  text-decoration: none;
}
.sat-footer-links a:hover { color: var(--sat-ink); }

/* ── Larger screens ───────────────────────────────────────────────────── */
@media (min-width: 700px) {
  :root { --sat-gutter: 32px; }

  .sat-section { padding: 62px 0; }
  .sat-section-tight { padding: 40px 0; }
  .sat-hero { padding: 68px 0 52px; }
  .sat-hstack-stage { max-width: 600px; }
  .sat-hero::before { width: 460px; height: 460px; }
  .sat-hero::after { width: 420px; height: 420px; }

  .sat-nots { flex-direction: row; }
  .sat-not { flex: 1; }

  .sat-ticket-top, .sat-ticket-foot { padding-inline: 30px; }
  .sat-ticket-cell { padding-inline: 30px; }
  .sat-ticket-grid { grid-template-columns: repeat(4, 1fr); }

  .sat-xp { flex-basis: 46%; }

  .sat-checks { grid-template-columns: 1fr 1fr; }

  .sat-form-card { padding: 34px 32px 36px; }

  .sat-done-steps { grid-template-columns: repeat(3, 1fr); }

  /* On desktop the page CTA is always visible, so the bar is just noise. */
  .sat-sticky { display: none; }
  .sat-apply { padding-bottom: 40px; }
}

@media (min-width: 1000px) {
  .sat-xp { flex-basis: 31%; }
  .sat-hero h1 { max-width: 12ch; margin-inline: auto; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Reveals must still end up visible when their transition is cancelled. */
  .sat-reveal,
  .sat-reveal--left,
  .sat-reveal--right,
  .sat-reveal--scale,
  .sat-reveal--blur,
  .sat-reveal--rise,
  .sat-stagger > *,
  .sat-verbs li,
  .sat-check,
  .sat-seat { opacity: 1; transform: none; filter: none; }
  .sat-progress-top { display: none; }
}