/* Big Sky Command™ — Experience Engine
   Reusable stylesheet, shared by every client's Experience. No
   client-specific colors, copy, or imagery live here — --exp-primary /
   --exp-secondary are set at runtime by app.js from the loaded Supabase
   record.

   Design intent: this is not a landing page. There are no card
   components, no section labels, no badges — just one continuous
   atmosphere (a "sky") that deepens as the visitor descends through the
   experience, the way a room feels different the further you walk into
   it. Every future client gets their own sky, generated entirely from
   their own brand colors. Defaults below are Big Sky Lead Partners' own
   palette (Dusk Navy / Horizon Gold). */

:root {
  /* Client-controlled (Business Overlay) */
  --exp-primary: #1b2a41;    /* Dusk Navy */
  --exp-secondary: #d4af37;  /* Horizon Gold — the implied light source */

  /* Engine-owned constants, all derived from the two above so the whole
     page stays tonally coherent no matter what color a client picks. */
  --exp-sky: color-mix(in oklch, var(--exp-primary) 42%, white);
  --exp-night: color-mix(in oklch, var(--exp-primary) 55%, black);   /* cool, up high — no sun reaches it */
  --exp-horizon-warm: color-mix(in oklch, var(--exp-secondary) 22%, var(--exp-primary)); /* the sun, just out of frame */
  --exp-mid: color-mix(in oklch, var(--exp-primary) 85%, black);
  --exp-deep: color-mix(in oklch, var(--exp-primary) 96%, black);
  --exp-ink: rgba(255, 255, 255, 0.94);
  --exp-ink-muted: rgba(255, 255, 255, 0.6);
  --exp-glass: rgba(255, 255, 255, 0.05);
  --exp-glass-border: rgba(255, 255, 255, 0.14);
  --exp-radius: 16px;
  --exp-radius-lg: 22px;
  --exp-max-width: 560px;
  --exp-font-display: "Fraunces", Georgia, serif;
  --exp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --exp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

/* Guarantees the loading / fallback / experience states never show at the
   same time — several rules below set `display` on these same elements,
   which would otherwise silently override the browser's default
   handling of the `hidden` attribute that app.js relies on. */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--exp-deep);
  color: var(--exp-ink);
  font-family: var(--exp-font-body);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img, video { max-width: 100%; display: block; }
button { font-family: inherit; }
h1, h2 { margin: 0; }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--exp-secondary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------------- Loading / fallback states ---------------- */
/* Styled dark from the very first paint (using the default tokens above)
   so there's no white flash before the real experience loads in. */

.state-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  gap: 16px;
  font-family: var(--exp-font-body);
}

.state-screen h1 {
  font-size: 1.4rem;
  font-family: var(--exp-font-display);
  font-weight: 500;
  color: var(--exp-ink);
}

.state-screen p {
  max-width: 40ch;
  color: var(--exp-ink-muted);
  line-height: 1.5;
}

/* Load-failure fallback actions — new, but every value below is an
   existing design token (--exp-font-body, --exp-radius, --exp-deep,
   --exp-secondary, --exp-ink-muted, --exp-glass-border). No new colors
   or fonts introduced. */
.state-screen-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 280px;
}

.state-action {
  font-family: var(--exp-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--exp-radius);
  padding: 12px 24px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  border: none;
}

.state-action-primary {
  color: var(--exp-deep);
  background: var(--exp-secondary);
}

.state-action-secondary {
  color: var(--exp-ink-muted);
  background: transparent;
  border: 1px solid var(--exp-glass-border);
}

.spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--exp-secondary);
  animation: exp-spin 0.8s linear infinite;
}

@keyframes exp-spin {
  to { transform: rotate(360deg); }
}

/* ---------------- Experience shell: one continuous sky ---------------- */

.experience {
  position: relative;
  flex: 1;
  width: 100%;
  background: linear-gradient(
    180deg,
    var(--exp-night) 0%,
    var(--exp-primary) 22%,
    var(--exp-mid) 48%,
    var(--exp-deep) 100%
  );
}

/* Quiet film grain across the whole experience — the fastest way to read
   as a frame of film instead of a vector illustration. Static, fixed to
   the viewport so it never tiles visibly or draws attention to itself. */
.experience::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.exp-section-inner {
  width: 100%;
  max-width: var(--exp-max-width);
  margin: 0 auto;
  padding: 88px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--exp-ease), transform 0.9s var(--exp-ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------- 1. Hero ---------------- */

/* ---------------- Signature Entry (reusable) ---------------- */
/* Full-viewport, config-driven opening sequence. No client-specific
   colors or copy here — every value below is either an existing
   design token (--exp-primary/secondary, --exp-font-display,
   --exp-ease, etc.) or a new rule generic enough to serve any future
   client's Signature Entry configuration, not just Big Sky Lead
   Partners'. Hidden and a complete no-op for any experience without a
   configuration — see index.html and signature-entry-adapter.js. */

.exp-signature-entry {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px 28px;
  background: var(--exp-deep);
  text-align: center;
  overflow-y: auto; /* the ten-item Manifest can exceed viewport height on smaller screens; harmless no-op for every other act, which never overflows */
}

.exp-signature-entry-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    var(--exp-night) 0%,
    var(--exp-primary) 60%,
    var(--exp-deep) 100%
  );
}

.exp-signature-entry-text {
  margin: 0;
  max-width: 20ch;
  font-family: var(--exp-font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 6vw, 2.3rem);
  line-height: 1.35;
  color: var(--exp-ink);
}

/* Exit fade — new, since the existing exp-focus-in keyframe only
   covers reveal, not exit. Same easing/duration language as the rest
   of the template, not a new visual style. */
.exp-signature-entry-exit {
  animation: exp-signature-entry-fade-out 0.5s var(--exp-ease) both;
}

@keyframes exp-signature-entry-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

/* THE THRESHOLD — deliberately not a button. The visitor isn't
   clicking a call-to-action; they're accepting an invitation, so this
   borrows the template's own horizon motif (see .exp-hero::before —
   "the one quiet signature motif of this template") instead of a UI
   affordance. Typography is --exp-font-display, italic — the same
   register used for the headline, the Philosophy line, and the AI
   Concierge heading, every other moment of emotional weight in this
   template — not --exp-font-body, which is reserved for captions and
   UI elsewhere. No fill, no border-radius, no box: the tap target is
   real (generous padding) but invisible, the same pattern a text link
   uses, with the horizon line beneath standing in for an underline. */
.exp-signature-entry-cta {
  position: relative;
  font-family: var(--exp-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  letter-spacing: 0.01em;
  color: var(--exp-secondary);
  background: transparent;
  border: none;
  padding: 14px 24px 22px;
  cursor: pointer;
}

/* The horizon line — closed by default, opens on reveal. Same gradient
   treatment as .exp-hero::before, so it reads as the same motif
   returning, not a new decoration invented for this one moment. */
.exp-signature-entry-cta::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--exp-secondary), transparent);
  transform: translateX(-50%);
  transition: width 700ms var(--exp-ease);
}

.exp-signature-entry-cta-open::after {
  width: 220px;
}

/* A small, quiet response on hover — the horizon extending slightly as
   you approach it, not a glow or a color shift. Desktop only in
   practice, since touch has no hover state; tap works identically
   either way. */
.exp-signature-entry-cta:hover::after {
  width: 260px;
}

/* The words arrive first; the line opens beneath them roughly 900ms
   later (see the JS timer in showCta()) — the invitation is spoken,
   then the way opens. Smaller rise than a filled button would need
   (18px, not 28px) — the content is lighter now, no box to fill, so
   the motion is proportionate to what's actually moving. */
.exp-signature-entry-cta-rise {
  animation: exp-signature-entry-cta-rise 1000ms var(--exp-ease) both;
}

@keyframes exp-signature-entry-cta-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.exp-signature-entry-skip {
  position: absolute;
  bottom: 30px;
  right: 24px;
  background: transparent;
  border: none;
  color: var(--exp-ink-muted);
  font-size: 0.85rem;
  cursor: pointer;
}

/* ---------------- Act II: The Turn — cards ---------------- */
/* Reuses the same frosted-glass treatment already established for
   lead capture (.exp-form-panel) rather than inventing a new surface
   for this moment — each card is a quiet, bordered row, not a filled
   button, consistent with the restraint established at the Threshold. */

.exp-the-turn-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: var(--exp-max-width);
}

.exp-the-turn-card {
  font-family: var(--exp-font-body);
  font-size: 0.98rem;
  text-align: left;
  color: var(--exp-ink);
  background: var(--exp-glass);
  border: 1px solid var(--exp-glass-border);
  border-radius: var(--exp-radius);
  padding: 16px 20px;
  cursor: pointer;
}

.exp-the-turn-card:hover {
  border-color: var(--exp-secondary);
}

.exp-the-turn-continue {
  background: transparent;
  border: none;
  color: var(--exp-ink-muted);
  font-family: var(--exp-font-body);
  font-size: 0.85rem;
  cursor: pointer;
}

/* ---------------- Act III: The Vision — name and promise inputs ---------------- */
/* Reuses the same frosted-glass surface as the lead-capture form
   (.exp-form-panel) and Act II's cards, rather than a third distinct
   input treatment — one visual language for "this is a place you can
   put something," used consistently. */

.exp-the-vision-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: var(--exp-max-width);
}

.exp-the-vision-prompt {
  margin: 0;
  font-family: var(--exp-font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 3.6vw, 1.4rem);
  color: var(--exp-ink);
  text-align: center;
}

.exp-the-vision-input {
  width: 100%;
  font-family: var(--exp-font-body);
  font-size: 1rem;
  color: var(--exp-ink);
  background: var(--exp-glass);
  border: 1px solid var(--exp-glass-border);
  border-radius: var(--exp-radius);
  padding: 14px 18px;
  text-align: center;
}

.exp-the-vision-input::placeholder {
  color: var(--exp-ink-muted);
}

.exp-the-vision-input:focus {
  outline: none;
  border-color: var(--exp-secondary);
}

.exp-the-vision-step-actions {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* The name reveal reuses the exact Hero headline treatment
   (--exp-font-display, the same weight/scale register) — the whole
   point is that the visitor's own name gets the same visual weight
   Big Sky's own name has elsewhere in this template. The promise
   reveal sits beneath it in a quieter register, matching the locked
   script in docs/14: identity first and largest, intention after and
   smaller. */
.exp-the-vision-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.exp-the-vision-reveal-name {
  margin: 0;
  font-family: var(--exp-font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  color: var(--exp-ink);
}

.exp-the-vision-reveal-promise {
  margin: 0;
  font-family: var(--exp-font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  color: var(--exp-ink-muted);
  max-width: 36ch;
}

/* ---------------- Act IV: The Invitation ---------------- */
/* Deliberately small — the tone line reuses .exp-the-vision-prompt,
   the CTA reuses .exp-signature-entry-cta (the Threshold treatment),
   the calendar/form panel reuses .exp-form-panel, the curtain reuses
   .exp-curtain outright. This is genuinely everything new. */

.exp-the-invitation-cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.exp-the-invitation-curtain-marker {
  position: absolute;
  z-index: 3;
  font-family: var(--exp-font-body);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--exp-ink-muted);
}

.exp-the-invitation-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.exp-the-invitation-footer {
  padding: 12px 0 0;
}

/* THE MANIFEST — deliberately plain. Every item uses the exact same
   typography and color regardless of its status ("Captured" vs
   "Awaiting Command Launch(TM)") — no checkmarks, no color-coding, no
   progress-bar visual language. The honesty lives entirely in the
   words; giving different statuses different visual weight would
   start to read as a tracker, which this explicitly is not. */
.exp-the-invitation-manifest {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: var(--exp-max-width);
}

.exp-the-invitation-manifest-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--exp-glass-border);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s var(--exp-ease), transform 0.6s var(--exp-ease);
}

.exp-the-invitation-manifest-item.is-visible {
  opacity: 1;
  transform: none;
}

.exp-the-invitation-manifest-label {
  font-family: var(--exp-font-body);
  font-size: 0.95rem;
  color: var(--exp-ink);
  text-align: left;
}

.exp-the-invitation-manifest-status {
  font-family: var(--exp-font-body);
  font-size: 0.85rem;
  color: var(--exp-ink-muted);
  text-align: right;
  white-space: nowrap;
}

/* Reusable utility — applies the EXISTING exp-focus-in keyframe
   (defined below, under Hero) to any element, not just the headline.
   The keyframe itself is not duplicated; this is the one new selector
   needed to reuse it elsewhere. */
.exp-focus-in-el {
  animation: exp-focus-in 0.9s var(--exp-ease) both;
}

/* ---------------- 1. Hero — where the visitor arrives ---------------- */

.exp-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

/* The atmosphere: cool and dark up high, warmth pooling at the horizon —
   a quiet continuation of whatever light and color the visitor just saw,
   not a second illustration trying to out-do it. */
.exp-hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    180deg,
    var(--exp-night) 0%,
    var(--exp-primary) 46%,
    var(--exp-horizon-warm) 78%,
    var(--exp-primary) 100%
  );
}

/* Horizon line: a thin band of the accent color — the one quiet signature
   motif of this template, built entirely from CSS so it re-skins
   automatically for every future client's own brand colors. */
.exp-hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--exp-secondary), transparent);
  opacity: 0.5;
  z-index: -1;
}

/* Vignette — a quiet cinematic finish, cheap and effective either way. */
.exp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 85% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
}

.exp-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
  text-align: center;
}

.exp-hero .exp-eyebrow {
  margin: 0;
  font-family: var(--exp-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--exp-secondary);
  opacity: 0.9;
  animation: exp-focus-in 0.9s var(--exp-ease) 0s both;
}

.exp-headline {
  font-family: var(--exp-font-display);
  font-weight: 500;
  font-size: clamp(2rem, 7.5vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 15ch;
  color: var(--exp-ink);
  animation: exp-focus-in 0.9s var(--exp-ease) 0.15s both;
}

.exp-subheadline {
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 36ch;
  color: var(--exp-ink-muted);
  animation: exp-focus-in 0.9s var(--exp-ease) 0.3s both;
}

/* Headline arrives like a camera settling into focus, not a UI element
   fading in — a small blur-to-sharp resolve alongside the fade. */
@keyframes exp-focus-in {
  from { opacity: 0; transform: translateY(10px) scale(1.015); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* Curtain — a brief, graceful arrival. This page is a place the visitor
   is delivered to, not a second dramatic opening competing with the one
   that already happened, so this stays quick and quiet on purpose. */
.exp-curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--exp-deep);
  pointer-events: none;
  animation: exp-curtain-lift 0.8s var(--exp-ease) both;
}

@keyframes exp-curtain-lift {
  from { opacity: 1; }
  to { opacity: 0; }
}

.exp-scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.45));
}

.exp-scroll-cue span {
  position: absolute;
  top: 0;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--exp-secondary);
  animation: exp-scroll-drop 2.4s ease-in-out infinite;
}

@keyframes exp-scroll-drop {
  0% { top: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 32px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .exp-curtain { animation: none; opacity: 0; }
}

/* ---------------- Philosophy — one quiet, cinematic statement ---------------- */
/* Engine-level brand content (see index.html comment) — same words for
   every future client, the way the footer attribution is. Deliberately
   alone on screen: no eyebrow, no card, nothing competing with it. */

.exp-philosophy {
  margin: 0;
  font-family: var(--exp-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 3.6vw, 1.7rem);
  line-height: 1.5;
  color: var(--exp-ink);
  max-width: 48ch;
}

#exp-philosophy-section .exp-section-inner {
  max-width: 680px;
  padding-top: 64px;
  padding-bottom: 64px;
}

/* ---------------- 2. Welcome video — where the business is introduced ---------------- */

.exp-video-logo {
  max-height: 34px;
  width: auto;
  margin-bottom: 2px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.exp-video-caption {
  margin: 0;
  font-family: var(--exp-font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--exp-secondary);
}

.exp-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--exp-radius-lg);
  overflow: hidden;
  background: var(--exp-glass);
  box-shadow:
    0 0 0 1px var(--exp-glass-border),
    0 40px 70px -30px rgba(0, 0, 0, 0.65),
    0 0 32px -16px color-mix(in oklch, var(--exp-secondary) 28%, transparent);
}

.exp-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exp-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(120% 140% at 30% 20%, color-mix(in oklch, var(--exp-secondary) 14%, transparent), transparent 60%);
}

.exp-video-placeholder p {
  font-size: 0.9rem;
  color: var(--exp-ink-muted);
}

.exp-play-glyph {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--exp-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--exp-glass-border);
}

/* ---------------- 3. Lead capture — light spilling from a doorway ---------------- */

.exp-cta-heading {
  font-family: var(--exp-font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 4.8vw, 1.95rem);
  color: var(--exp-ink);
}

.exp-form-panel {
  width: 100%;
  background: var(--exp-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--exp-glass-border);
  border-radius: var(--exp-radius-lg);
  padding: 20px;
}

.exp-form-embed { width: 100%; }

/* GHL embeds often inject their own iframe; make sure it never overflows
   and inherits the panel's rounded corners. */
.exp-form-embed iframe {
  width: 100% !important;
  border: none;
  border-radius: calc(var(--exp-radius-lg) - 6px);
}

.exp-form-placeholder {
  padding: 26px 12px;
  text-align: center;
  color: var(--exp-ink-muted);
  font-size: 0.95rem;
}

/* ---------------- 4. AI Concierge (reserved) — a deepening night sky ---------------- */

.exp-ai-inner {
  position: relative;
  padding-top: 64px;
  padding-bottom: 64px;
}

.exp-ai-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
}

.exp-ai-stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--exp-secondary);
}

.exp-ai-heading {
  font-family: var(--exp-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 4.5vw, 1.6rem);
  color: var(--exp-ink);
}

.exp-ai-copy {
  color: var(--exp-ink-muted);
  line-height: 1.65;
  max-width: 40ch;
  font-size: 0.95rem;
}

/* ---------------- 5. Thank you ---------------- */

.exp-thankyou-inner {
  gap: 18px;
}

.exp-check {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--exp-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid color-mix(in oklch, var(--exp-secondary) 55%, transparent);
  box-shadow: 0 0 26px -6px color-mix(in oklch, var(--exp-secondary) 60%, transparent);
}

.exp-thankyou {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--exp-ink);
  max-width: 38ch;
}

/* ---------------- Footer ---------------- */

.exp-footer {
  text-align: center;
  padding: 30px 20px 44px;
}

.exp-footer p {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--exp-ink-muted);
  opacity: 0.6;
}

/* ---------------- Small phones ---------------- */

@media (max-width: 360px) {
  .exp-section-inner { padding: 68px 20px; }
}

/* ---------------- Larger screens ---------------- */

@media (min-width: 720px) {
  .exp-section-inner { padding: 112px 24px; }
  .exp-form-panel { padding: 30px; }
}