/* FutureReady — /lead-form
   Tokens → base → intro + portfolio wall → flow chrome → controls → steps → booking → confirmation → motion prefs. */

:root {
  --bg: #050B19;
  --bg-2: #0B1428;
  --card: #101D36;
  --blue: #2488FF;
  --cyan: #43C5FF;
  --violet: #9A5BFF;
  --lav: #C5A3FF;
  --text: #F8FAFF;
  --text-2: #C3D0E6;
  --muted: #98A9C6;
  --line: rgba(160, 190, 255, 0.16);
  --line-2: rgba(160, 190, 255, 0.28);
  --err: #FFA3B1;
  --grad: linear-gradient(100deg, #2488FF 0%, #3F73FF 50%, #8257FF 100%);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 87.5rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --safe-l: max(var(--gutter), env(safe-area-inset-left));
  --safe-r: max(var(--gutter), env(safe-area-inset-right));
  color-scheme: dark;
}

/* Same wide-screen scaling as /matrix: everything is rem, so big monitors scale up instead of leaving empty sides. */
html { font-size: max(16px, min(100vw / 90, 100vh / 45)); -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, p, ol { margin: 0; }
button { font: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #7CC8FF; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.app { position: relative; min-height: 100vh; min-height: 100dvh; isolation: isolate; }

/* ── Ambient light (gradients only, no blur filters) ───────────────────── */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: .55; transition: opacity .8s var(--ease); }
.ambient i { position: absolute; width: 70rem; height: 70rem; border-radius: 50%; will-change: transform; }
.amb-a { left: -28rem; top: -34rem; background: radial-gradient(closest-side, rgba(36, 136, 255, .16), rgba(36, 136, 255, 0)); animation: drift 26s ease-in-out infinite alternate; }
.amb-b { right: -30rem; bottom: -40rem; background: radial-gradient(closest-side, rgba(154, 91, 255, .12), rgba(154, 91, 255, 0)); animation: drift 32s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate3d(6rem, 4rem, 0) scale(1.08); } }
[data-scene="flow"] .ambient { opacity: 1; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.top {
  position: absolute; z-index: 6; top: 0; left: 0; right: 0;
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(env(safe-area-inset-top) + 1.35rem) var(--safe-r) 0 var(--safe-l);
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.brand { display: inline-flex; border-radius: .4rem; }
.brand img { display: block; height: 2.1rem; width: auto; opacity: .95; }
.chip-test {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .65rem; border-radius: 999px;
  font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: #FFD58A; background: rgba(255, 190, 80, .1); border: 1px solid rgba(255, 190, 80, .3);
}

.main { position: relative; z-index: 3; pointer-events: none; }

/* ── Scene 1: intro ─────────────────────────────────────────────────────── */
.intro {
  min-height: 100vh; min-height: 100dvh;
  max-width: var(--max); margin: 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 6rem var(--safe-r) calc(env(safe-area-inset-bottom) + 1.75rem) var(--safe-l);
}
.intro > * { pointer-events: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: #9DB8E6;
}
.intro .eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: linear-gradient(90deg, var(--cyan), rgba(67, 197, 255, 0)); }

.hero {
  margin-top: 1.1rem;
  font-size: clamp(2.25rem, 10.4vw, 3.25rem);
  font-weight: 600; line-height: 1.02; letter-spacing: -.04em;
  text-wrap: balance;
}
.hero .line { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.hero .line > span { display: inline-block; animation: rise 1s var(--ease) both; animation-delay: var(--d); }
.hero em {
  font-style: normal;
  background: linear-gradient(100deg, #5DBBFF 0%, #3F86FF 42%, #A37BFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { margin-top: 1.1rem; max-width: 31rem; font-size: 1.0625rem; line-height: 1.55; color: var(--muted); }
.intro-cta { margin-top: 1.75rem; }
.fine { margin-top: .95rem; font-size: .75rem; color: rgba(152, 169, 198, .78); letter-spacing: .01em; }
.fine i { font-style: normal; margin: 0 .15rem; opacity: .5; }
.fine span { white-space: nowrap; }

.intro-in { animation: fadeUp .8s var(--ease) both; animation-delay: var(--d); }
@keyframes rise { from { transform: translate3d(0, 108%, 0); } }
@keyframes fadeUp { from { opacity: 0; transform: translate3d(0, 12px, 0); } }

/* ── Portfolio wall ─────────────────────────────────────────────────────── */
.wall {
  position: fixed; inset: 0; z-index: 1; overflow: hidden;
  perspective: 1500px; perspective-origin: 50% 30%;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.plane {
  position: absolute; inset: -12% -70% 34% -70%;
  display: flex; flex-direction: column; justify-content: center; gap: 1.25rem;
  transform-style: preserve-3d;
  transform: rotateX(20deg) rotateZ(-13deg);
}
.track { --w: 15rem; --gap: 1.1rem; --dur: 70s; transform-style: preserve-3d; animation: trackIn 1.2s var(--ease) both; animation-delay: calc(200ms + var(--i) * 220ms); }
.t-back { --w: 12rem; --dur: 189s; transform: translateZ(-200px); opacity: .78; }
.t-main { --w: 15.5rem; --dur: 123s; transform: translateZ(30px); }
.t-mid  { --w: 13.5rem; --dur: 154s; transform: translateZ(-80px); opacity: .95; }
@keyframes trackIn { from { opacity: 0; } }

.belt {
  display: flex; width: max-content;
  animation: belt var(--dur) linear infinite;
  animation-delay: calc(var(--i, 0) * -17s); /* replaced by a random start in portfolio.js */
  will-change: transform;
}
.belt.is-reverse { animation-direction: reverse; }
@keyframes belt { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.card {
  position: relative; display: block; flex: none;
  width: var(--w); margin: 0 var(--gap) 0 0; padding: 0;
  border: 0; border-radius: .8rem; overflow: hidden;
  background: var(--bg-2); color: inherit; text-align: left;
  box-shadow: 0 0 0 1px rgba(160, 190, 255, .13), 0 28px 50px -28px rgba(0, 0, 0, .9), 0 10px 20px -12px rgba(0, 0, 0, .55);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(140, 205, 255, .5), 0 0 0 1px rgba(67, 197, 255, .18);
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.card.is-lit::after { opacity: 1; }
.card-chrome {
  display: flex; align-items: center; gap: .28rem;
  height: 1.55rem; padding: 0 .6rem;
  background: #0D1830; border-bottom: 1px solid rgba(160, 190, 255, .09);
}
.card-chrome i { width: .38rem; height: .38rem; border-radius: 50%; background: rgba(160, 190, 255, .22); flex: none; }
.card-addr {
  margin-left: .55rem; max-width: 62%; height: .95rem; padding: 0 .55rem;
  display: flex; align-items: center; border-radius: 999px;
  font-size: .56rem; color: rgba(152, 169, 198, .85); background: rgba(160, 190, 255, .07);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-shot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0B1428; }
.card-shot img, .card-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.card-glint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(122deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .01) 26%, rgba(255, 255, 255, 0) 40%); }
.card-tag {
  position: absolute; left: .7rem; bottom: .7rem;
  padding: .38rem .7rem; border-radius: .55rem;
  font-size: .75rem; font-weight: 500; color: #fff;
  background: rgba(5, 11, 25, .82); border: 1px solid rgba(160, 190, 255, .2);
  opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.wall-light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42rem 26rem at 64% 44%, rgba(36, 136, 255, .14), rgba(36, 136, 255, 0) 70%); }
.wall-cursor {
  position: absolute; left: 0; top: 0; width: 34rem; height: 34rem; margin: -17rem 0 0 -17rem;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(67, 197, 255, .085), rgba(67, 197, 255, 0));
  opacity: 0; transition: opacity .5s var(--ease); will-change: transform;
}
.wall-cursor.is-on { opacity: 1; }

/* Readability veils: one for the intro, one for the form; cross-faded rather than re-painted. */
.veil { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.veil::before, .veil::after { content: ""; position: absolute; inset: 0; transition: opacity .7s var(--ease); }
.veil::before {
  background:
    linear-gradient(180deg, rgba(5, 11, 25, .45) 0%, rgba(5, 11, 25, 0) 12%, rgba(5, 11, 25, 0) 30%, rgba(5, 11, 25, .82) 46%, var(--bg) 58%);
}
.veil::after { opacity: 0; background: radial-gradient(70% 60% at 50% 42%, rgba(5, 11, 25, .9), rgba(5, 11, 25, .72)); }

[data-scene="flow"] .wall { opacity: .3; transform: scale(.94); pointer-events: none; }
[data-scene="flow"][data-quiet] .wall { opacity: .16; }
[data-scene="flow"] .veil::before { opacity: 0; }
[data-scene="flow"] .veil::after { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .card:not(.is-static) { cursor: pointer; }
  .belt:hover { animation-play-state: paused; }
  .card:not(.is-static):hover { transform: translate3d(0, -.5rem, 40px); box-shadow: 0 0 0 1px rgba(140, 205, 255, .45), 0 40px 70px -30px rgba(0, 0, 0, .95), 0 16px 40px -20px rgba(36, 136, 255, .45); }
  .card:not(.is-static):hover .card-tag, .card:focus-visible .card-tag { opacity: 1; transform: none; }
}

/* ── Desktop / landscape composition ────────────────────────────────────── */
@media (min-width: 48rem) {
  .brand img { height: 2.5rem; }
  .intro { justify-content: center; padding-top: 7rem; padding-bottom: 5rem; }
  .intro > * { max-width: 36rem; }
  .intro > .hero { max-width: none; }
  .hero { font-size: min(4.5rem, 10.5vh); margin-top: 1.4rem; }
  .hero .line > span { white-space: nowrap; }
  .fine { font-size: .8125rem; }
  .lede { font-size: 1.1875rem; margin-top: 1.5rem; }
  .intro-cta { margin-top: 2.5rem; }

  .wall { perspective-origin: 70% 45%; }
  .plane { inset: -40% -45% -40% 44%; gap: 2.25rem; transform: rotateX(24deg) rotateY(-12deg) rotateZ(-15deg); }
  .track { --gap: 2rem; }
  .t-back { --w: 21rem; }
  .t-main { --w: 27rem; }
  .t-mid  { --w: 23.5rem; }

  .veil::before {
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(5, 11, 25, .97) 36%, rgba(5, 11, 25, .6) 49%, rgba(5, 11, 25, 0) 62%),
      linear-gradient(0deg, rgba(5, 11, 25, .6) 0%, rgba(5, 11, 25, 0) 16%),
      linear-gradient(180deg, rgba(5, 11, 25, .5) 0%, rgba(5, 11, 25, 0) 14%);
  }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  --h: 3.5rem;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  height: var(--h); padding: 0 .45rem 0 1.4rem;
  border: 0; border-radius: 1.1rem;
  font: 600 1rem/1 var(--font); letter-spacing: -.005em; color: #fff; text-decoration: none;
  background: var(--grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(10, 10, 40, .3), 0 1px 2px rgba(0, 0, 0, .4), 0 14px 32px -14px rgba(52, 120, 255, .75);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .3s var(--ease), filter .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%); }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
}
.btn-label { white-space: nowrap; }
.btn-arrow {
  position: relative; flex: none; display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.btn-arrow svg { width: 1.1rem; height: 1.1rem; transition: transform .35s var(--ease), opacity .2s; }
.btn-spin { position: absolute; inset: .6rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .28); border-top-color: #fff; opacity: 0; }
.btn:hover:not(:disabled) { filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(10, 10, 40, .3), 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -14px rgba(52, 120, 255, .95); }
.btn:hover:not(:disabled)::after { transform: translateX(380%) skewX(-18deg); transition: transform .9s var(--ease); }
.btn:hover:not(:disabled) .btn-arrow svg { transform: translateX(3px); }
.btn:active:not(:disabled) { transform: scale(.985); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 2px 6px rgba(10, 10, 40, .35), 0 8px 18px -12px rgba(52, 120, 255, .7); }
.btn:disabled { cursor: default; filter: saturate(.5) brightness(.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn.is-loading:disabled { filter: none; cursor: progress; }
.btn.is-loading .btn-arrow svg { opacity: 0; }
.btn.is-loading .btn-spin { opacity: 1; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.btn-lg { --h: 4rem; width: 100%; padding-left: 1.6rem; border-radius: 1.2rem; font-size: 1.0625rem; }
.btn-lg .btn-arrow { width: 3rem; height: 3rem; }
.btn-sm { --h: 2.9rem; gap: .9rem; padding-left: 1.1rem; border-radius: .95rem; font-size: .9375rem; }
.btn-sm .btn-arrow { width: 2.1rem; height: 2.1rem; }
@media (min-width: 30rem) { .btn-lg { width: auto; } }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.9rem; padding: 0 1.1rem; border-radius: .9rem;
  border: 1px solid var(--line-2); background: rgba(16, 29, 54, .6);
  color: var(--text); font: 500 .9375rem var(--font); text-decoration: none; cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .2s var(--ease);
}
.btn-ghost:hover { border-color: rgba(67, 197, 255, .5); background: rgba(22, 40, 74, .7); }
.btn-ghost:active { transform: scale(.985); }
.btn-ghost-sm { min-height: 2.5rem; padding: 0 .9rem; font-size: .875rem; }
.btn-ghost.is-strong { background: rgba(36, 136, 255, .22); border-color: rgba(67, 197, 255, .5); }
.btn-text {
  min-height: 2.75rem; padding: .5rem .5rem; border: 0; background: none; cursor: pointer;
  color: var(--muted); font: 500 .9375rem var(--font);
  text-decoration: underline; text-decoration-color: rgba(152, 169, 198, .35); text-underline-offset: .28em;
  transition: color .25s;
}
.btn-text:hover { color: var(--text); }
.btn-text-sm { min-height: 0; padding: .2rem; font-size: inherit; }

.ico { display: inline-grid; place-items: center; flex: none; }
.ico svg { width: 1.15rem; height: 1.15rem; }
.ico-sm svg { width: .95rem; height: .95rem; }
.ico-xs svg { width: .8rem; height: .8rem; }

/* ── Flow chrome ────────────────────────────────────────────────────────── */
.flow {
  pointer-events: auto;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(env(safe-area-inset-top) + 4.75rem) var(--safe-r) calc(env(safe-area-inset-bottom) + 3rem) var(--safe-l);
}
.flow-head, .stage { width: 100%; max-width: 36rem; transition: max-width .45s var(--ease); }
.flow.is-wide .flow-head, .flow.is-wide .stage { max-width: 52rem; }
.flow.is-done .flow-head, .flow.is-done .stage { max-width: 66rem; }
.flow-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; margin-bottom: clamp(1.75rem, 5vh, 3.25rem); }
.flow.is-done .flow-head { grid-template-columns: 1fr auto; }

.back {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.75rem; padding: 0 .85rem 0 .55rem; margin-left: -.55rem;
  border: 0; border-radius: .8rem; background: transparent; cursor: pointer;
  color: var(--muted); font-size: .875rem; font-weight: 500;
  transition: color .25s, background .25s;
}
.back svg { width: 1.05rem; height: 1.05rem; transition: transform .3s var(--ease); }
.back:hover { color: var(--text); background: rgba(160, 190, 255, .06); }
.back:hover svg { transform: translateX(-2px); }

.progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.seg { position: relative; height: 3px; border-radius: 3px; background: rgba(160, 190, 255, .14); }
.seg i {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, #2488FF, #43C5FF);
  box-shadow: 0 0 10px rgba(36, 136, 255, .45);
  transform-origin: left center; transform: scaleX(var(--f, 0));
  transition: transform .75s var(--ease);
}
.seg::after {
  content: ""; position: absolute; top: 50%; left: calc(var(--f, 0) * 100%);
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: #C8EEFF; box-shadow: 0 0 0 3px rgba(67, 197, 255, .18), 0 0 12px 2px rgba(67, 197, 255, .6);
  opacity: 0; transition: left .75s var(--ease), opacity .3s;
}
.seg.is-active::after { opacity: 1; }
.count { font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (min-width: 48rem) {
  .flow { padding-top: calc(6.5rem + 5vh); }
}

/* ── Step typography ────────────────────────────────────────────────────── */
.step-title { font-size: clamp(1.75rem, 7.4vw, 2.75rem); font-weight: 600; line-height: 1.08; letter-spacing: -.032em; text-wrap: balance; }
.step-title:focus { outline: none; }
.step-desc { margin-top: .75rem; font-size: 1.0625rem; line-height: 1.55; color: var(--muted); }

/* ── Selection cards ────────────────────────────────────────────────────── */
.choices { display: grid; gap: .875rem; margin-top: 2rem; }
.tone-cyan   { --tone: 67, 197, 255;  --tone-hi: 170, 228, 255; }
.tone-violet { --tone: 154, 91, 255;  --tone-hi: 214, 190, 255; }
.tone-blue   { --tone: 36, 136, 255;  --tone-hi: 176, 212, 255; }
.tone-green  { --tone: 37, 211, 102;  --tone-hi: 150, 240, 185; }
.tone-amber  { --tone: 255, 166, 64;  --tone-hi: 255, 210, 150; }

.choice {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  min-height: 5.5rem; padding: 1rem 1.1rem;
  border: 1px solid var(--line); border-radius: 1.25rem;
  background: linear-gradient(180deg, rgba(19, 33, 61, .8), rgba(12, 22, 42, .8));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 40px -28px rgba(0, 0, 0, .9);
  color: var(--text); text-align: left; text-decoration: none; cursor: pointer;
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.choice::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(16rem circle at var(--mx, 50%) var(--my, 50%), rgba(var(--tone), .11), rgba(var(--tone), 0) 60%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.choice-art {
  display: grid; place-items: center; flex: none;
  width: 5rem; aspect-ratio: 120 / 84; border-radius: .85rem;
  background: radial-gradient(70% 80% at 50% 55%, rgba(var(--tone), .16), rgba(var(--tone), 0) 75%), rgba(5, 11, 25, .4);
  border: 1px solid rgba(var(--tone), .14);
}
.choice-art svg { width: 82%; height: auto; overflow: visible; filter: drop-shadow(0 0 8px rgba(var(--tone), .35)); transition: filter .35s var(--ease); }
.a-fill { fill: rgba(var(--tone), .1); }
.a-line { fill: none; stroke: rgba(var(--tone), .8); stroke-width: 1.2; }
.a-dash { stroke-dasharray: 4 4; }
.a-dot { fill: rgba(var(--tone), .5); }
.a-ink { fill: rgb(var(--tone-hi)); }
.a-soft { fill: rgba(var(--tone), .32); }
.a-panel { fill: rgba(var(--tone), .24); }
.a-ink-line { fill: none; stroke: rgb(var(--tone-hi)); stroke-width: 2.2; stroke-linecap: round; }

.choice-text { display: flex; flex-direction: column; min-width: 0; }
.choice-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.25; }
.choice-sub { margin-top: .25rem; font-size: .9375rem; color: var(--muted); line-height: 1.4; }
.choice-go {
  position: relative; display: grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--line); color: var(--muted);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.choice-go svg { position: absolute; width: 1rem; height: 1rem; transition: transform .35s var(--ease), opacity .25s var(--ease); }
.choice-go svg:last-child { opacity: 0; transform: scale(.6); }

/* Travelling perimeter light on selection (conic border, animated angle). */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.choice-ring {
  position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--a), rgba(var(--tone), 0) 0deg, rgba(var(--tone), 0) 220deg, rgba(var(--tone), 1) 320deg, #fff 352deg, rgba(var(--tone), 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
}
.choice.is-confirming .choice-ring { animation: ring .7s var(--ease) forwards; }
@keyframes ring { 0% { --a: 0deg; opacity: 1; } 80% { opacity: 1; } 100% { --a: 360deg; opacity: 0; } }

.choice.is-selected {
  border-color: rgba(var(--tone), .7);
  background: linear-gradient(180deg, rgba(var(--tone), .13), rgba(12, 22, 42, .86));
  box-shadow: 0 0 0 1px rgba(var(--tone), .22), 0 22px 50px -26px rgba(var(--tone), .5), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.choice.is-selected .choice-art svg { filter: drop-shadow(0 0 12px rgba(var(--tone), .6)) brightness(1.15); }
.choice.is-selected .choice-go { background: rgb(var(--tone-hi)); border-color: transparent; color: #061226; }
.choice.is-selected .choice-go svg:first-child { opacity: 0; transform: translateX(6px); }
.choice.is-selected .choice-go svg:last-child { opacity: 1; transform: none; }
.choice.is-confirming .choice-go { animation: settle .45s var(--ease); }
@keyframes settle { from { transform: scale(.82); } }
.choice:active { transform: scale(.985); }

@media (hover: hover) and (pointer: fine) {
  .choice:hover { transform: translateY(-3px); border-color: rgba(var(--tone), .45); background: linear-gradient(180deg, rgba(24, 41, 74, .88), rgba(14, 26, 50, .88)); }
  .choice:hover::after { opacity: 1; }
  .choice:hover .choice-art svg { filter: drop-shadow(0 0 12px rgba(var(--tone), .5)) brightness(1.15); }
  .choice:hover .choice-go { border-color: rgba(var(--tone), .5); color: var(--text); }
  .choice:hover:not(.is-selected) .choice-go svg:first-child { transform: translateX(3px); }
  .choice.is-selected:hover { background: linear-gradient(180deg, rgba(var(--tone), .16), rgba(12, 22, 42, .86)); }
}

/* Two big cards side by side once there's room. */
@media (min-width: 34rem) {
  .choices-2:not(.methods) { grid-template-columns: 1fr 1fr; }
  .choices-2:not(.methods) .choice {
    grid-template-columns: 1fr auto; grid-template-areas: "art art" "text go";
    align-items: end; gap: 1.25rem; min-height: 15rem; padding: 1.1rem 1.1rem 1.3rem 1.3rem;
  }
  .choices-2:not(.methods) .choice-art { grid-area: art; width: 100%; aspect-ratio: auto; height: 9rem; }
  .choices-2:not(.methods) .choice-art svg { width: 9rem; }
  .choices-2:not(.methods) .choice-text { grid-area: text; }
  .choices-2:not(.methods) .choice-go { grid-area: go; }
}

/* Contact-method tiles. */
.is-tile .choice-art {
  width: 3.4rem; height: 3.4rem; aspect-ratio: auto; border-radius: 1rem;
  background: linear-gradient(155deg, rgba(var(--tone), .3), rgba(var(--tone), .07));
  border: 1px solid rgba(var(--tone), .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 28px -12px rgba(var(--tone), .65);
}
.is-tile.tone-blue .choice-art { background: linear-gradient(155deg, rgba(36, 136, 255, .38), rgba(154, 91, 255, .2)); border-color: rgba(120, 150, 255, .45); }
.is-tile .choice-art > svg { width: 2.2rem; filter: none; }
.tile-glyph { display: grid; place-items: center; color: rgb(var(--tone-hi)); }
.tile-glyph svg { width: 1.55rem; height: 1.55rem; }
.live {
  display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .35rem;
  font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #86E8B0;
}
.live i { width: 6px; height: 6px; border-radius: 50%; background: #34D27B; box-shadow: 0 0 0 3px rgba(52, 210, 123, .18); }
.method-alt { margin-top: 1.25rem; text-align: center; }

@media (min-width: 40rem) {
  .methods.choices-2 { grid-template-columns: 1fr 1fr; }
  .methods.choices-3 { grid-template-columns: repeat(3, 1fr); }
  .methods .choice { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; min-height: 12rem; padding: 1.5rem; }
  .methods .choice-art { width: 3.75rem; height: 3.75rem; }
  .methods .choice-text { margin-top: auto; }
  .methods .choice-title { font-size: 1.1875rem; }
  .methods .choice-go { position: absolute; top: 1.25rem; right: 1.25rem; }
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.step-form { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }
.field-label { display: block; margin-bottom: .5rem; font-size: .8125rem; font-weight: 500; color: var(--text-2); letter-spacing: .01em; }
.input-wrap {
  position: relative; display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 1rem;
  background: rgba(11, 20, 40, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.input-wrap:hover { border-color: var(--line-2); }
.input-wrap:focus-within {
  border-color: rgba(67, 197, 255, .68); background: #0F1C36;
  box-shadow: 0 0 0 4px rgba(36, 136, 255, .12), 0 16px 32px -18px rgba(36, 136, 255, .6);
  animation: focusEdge .7s var(--ease);
}
@keyframes focusEdge { from { border-color: rgba(36, 136, 255, .45); } }
.input {
  flex: 1; min-width: 0; height: 3.5rem; padding: 0 1.1rem;
  border: 0; outline: 0; border-radius: inherit; background: transparent;
  color: var(--text); font: 400 1.0625rem var(--font); /* ≥16px: no iOS zoom on focus */
  -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: rgba(152, 169, 198, .55); }
.input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 100px #0F1C36 inset; caret-color: var(--text); }
.has-error .input-wrap { border-color: rgba(255, 138, 155, .55); }
.field-err { display: flex; align-items: center; gap: .4rem; margin-top: .45rem; font-size: .8125rem; color: var(--err); }
.field-err:empty { display: none; }
.field-hint { margin-top: .45rem; font-size: .8125rem; color: var(--muted); }

.phone-prefix { position: relative; display: flex; align-items: center; padding: 0 .55rem 0 1rem; border-right: 1px solid var(--line); flex: none; }
.dial { display: flex; align-items: center; gap: .3rem; font-size: 1rem; color: var(--text); pointer-events: none; }
.dial-iso { font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.dial .ico { color: var(--muted); margin-left: .1rem; }
.country { position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
.phone-prefix:focus-within .dial-iso { color: var(--cyan); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.step-form .actions { margin-top: .5rem; }
.step-form .btn { width: 100%; }
@media (min-width: 34rem) { .step-form .btn { width: auto; min-width: 12.5rem; } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-error { display: none; }
.form-error.is-on {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .8rem 1rem; border-radius: .85rem;
  border: 1px solid rgba(255, 138, 155, .3); background: rgba(255, 120, 140, .08);
  color: #FFC2CB; font-size: .9rem; line-height: 1.45;
}
.form-error .ico { margin-top: .1rem; }

.disclosure { margin-top: 1.5rem; }
.reassure { font-size: .9375rem; color: var(--text-2); }
.consent { margin-top: .5rem; font-size: .75rem; line-height: 1.6; color: rgba(152, 169, 198, .82); }
.consent a, .done-foot a, .handoff a:not(.btn-ghost) { color: #9CC8FF; text-underline-offset: .2em; }

/* ── Booking ────────────────────────────────────────────────────────────── */
.booking {
  margin-top: 2rem; padding: 1.25rem;
  border: 1px solid var(--line); border-radius: 1.4rem;
  background: linear-gradient(180deg, rgba(16, 29, 54, .8), rgba(11, 20, 40, .85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 30px 60px -40px rgba(0, 0, 0, .9);
}
.book-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: 1.5rem; margin-bottom: .9rem; font-size: .8125rem; color: var(--muted); }
.book-note:empty { display: none; }
.tz-pick { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.tz-pick label { white-space: nowrap; }
.tz-field { position: relative; display: inline-flex; align-items: center; }
.tz-select {
  -webkit-appearance: none; appearance: none;
  min-height: 2.5rem; padding: 0 2rem 0 .85rem; border-radius: .75rem;
  border: 1px solid var(--line-2); background: rgba(5, 11, 25, .5);
  color: var(--text); font: 500 16px var(--font); cursor: pointer; /* 16px: no iOS zoom */
  transition: border-color .25s var(--ease);
}
.tz-select:hover, .tz-select:focus-visible { border-color: rgba(67, 197, 255, .55); }
.tz-select option { background: #0E1A33; color: var(--text); }
.tz-field .ico { position: absolute; right: .7rem; pointer-events: none; color: var(--muted); }
@media (max-width: 30rem) {
  .tz-pick { margin-left: 0; width: 100%; }
  .tz-field { flex: 1; min-width: 0; }
  .tz-select { width: 100%; }
}
.day-row { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity; padding: .25rem .25rem .75rem; margin: 0 -.25rem; scrollbar-width: none; }
.day-row::-webkit-scrollbar { display: none; }
.day, .time {
  border: 1px solid var(--line); background: rgba(5, 11, 25, .4); color: var(--text); cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.day { flex: none; width: 4.6rem; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: .12rem; padding: .7rem 0 .65rem; border-radius: 1rem; }
.day-dow, .day-mon { font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.day-num { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .4rem; max-height: 17.5rem; overflow: auto; overscroll-behavior: contain; }
.time { min-height: 2.9rem; border-radius: .8rem; font: 500 .9375rem var(--font); font-variant-numeric: tabular-nums; }
.day:active, .time:active { transform: scale(.97); }
.day.is-on, .time.is-on {
  border-color: rgba(67, 197, 255, .7);
  background: linear-gradient(180deg, rgba(36, 136, 255, .3), rgba(36, 136, 255, .08));
  box-shadow: 0 10px 24px -14px rgba(36, 136, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.day.is-on .day-dow, .day.is-on .day-mon { color: #BFE6FF; }
@media (hover: hover) { .day:hover:not(.is-on), .time:hover:not(.is-on) { border-color: rgba(67, 197, 255, .4); } }
@media (min-width: 40rem) { .time-grid { grid-template-columns: repeat(4, 1fr); } }
.sk { display: block; border-radius: 1rem; background: rgba(160, 190, 255, .07); animation: skel 1.4s ease-in-out infinite; }
.sk-day { flex: none; width: 4.6rem; height: 5.1rem; }
.sk-time { height: 2.9rem; border-radius: .8rem; }
@keyframes skel { 50% { opacity: .4; } }
.book-confirm { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.book-confirm .btn { width: 100%; }
.book-summary { color: var(--muted); }
.book-summary strong { color: var(--text); font-weight: 600; }
.booking .form-error.is-on { margin-top: 1rem; }
.book-fallback { display: grid; gap: 1rem; padding: .5rem 0; }
.book-fallback > p:first-child { color: var(--text-2); }
.muted { color: var(--muted); font-size: .875rem; }
@media (min-width: 40rem) {
  .book-confirm { flex-direction: row; align-items: center; justify-content: space-between; }
  .book-confirm .btn { width: auto; }
  .booking { padding: 1.5rem; }
}

/* ── Confirmation ───────────────────────────────────────────────────────── */
.done-grid { display: grid; gap: 2rem; }
.done-copy .eyebrow { gap: .6rem; }
.ok { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: rgba(52, 210, 123, .16); color: #7BE8AA; }
.ok svg { width: .8rem; height: .8rem; }
.step-done .step-title { margin-top: 1rem; }
.booked { margin-top: 1.5rem; padding: 1.2rem 1.35rem; border: 1px solid rgba(67, 197, 255, .35); border-radius: 1.2rem; background: linear-gradient(180deg, rgba(36, 136, 255, .15), rgba(16, 29, 54, .6)); }
.booked-when { margin-top: .45rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.booked-tz { margin-top: .2rem; font-size: .875rem; color: var(--muted); }
.booked .chip-test { margin-top: .8rem; }
.caller { display: flex; gap: .9rem; margin-top: 1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: 1.1rem; background: rgba(16, 29, 54, .55); }
.caller-ico { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(36, 136, 255, .18); color: #9CC8FF; }
.caller-ico svg { width: 1.05rem; height: 1.05rem; }
.caller-body { min-width: 0; }
.caller-num { margin: .55rem 0 .85rem; font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.caller-num a { color: var(--text); text-decoration: none; }
.caller-title { font-weight: 600; letter-spacing: -.01em; }
.caller-desc { margin-top: .25rem; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.handoff { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: 1.1rem; background: rgba(16, 29, 54, .55); }
.handoff > p:first-child { font-size: .9375rem; color: var(--text-2); }
.handoff .actions { margin-top: .75rem; }
.handoff .muted { margin-top: .75rem; }
.next-label { margin-top: 2.25rem; font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #9DB8E6; }
.next { list-style: none; margin-top: 1rem; padding: 0; display: grid; gap: 1.1rem; }
.next li { display: grid; grid-template-columns: 2rem 1fr; gap: .9rem; }
.next-n { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: .8125rem; font-weight: 600; color: #BFE6FF; border: 1px solid rgba(67, 197, 255, .35); background: rgba(36, 136, 255, .1); }
.next strong { font-weight: 600; }
.next p { margin-top: .15rem; font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.done-foot { margin-top: 2rem; font-size: .875rem; color: var(--muted); }

/* Website preview assembling itself — ~2.5s, plays once. */
.assemble { order: -1; width: 100%; max-width: 24rem; perspective: 1200px; }
.as-frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 11;
  border: 1px solid rgba(160, 190, 255, .18); border-radius: 1rem;
  background: #0A142A;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95), 0 24px 60px -36px rgba(36, 136, 255, .45);
  transform: rotateY(-9deg) rotateX(5deg);
  animation: asFrame 1s var(--ease) both;
}
.as-chrome { display: flex; align-items: center; gap: .3rem; height: 9%; padding: 0 4%; background: #0D1932; border-bottom: 1px solid rgba(160, 190, 255, .1); }
.as-chrome i { width: .45rem; height: .45rem; border-radius: 50%; background: rgba(160, 190, 255, .24); }
.as-addr { width: 40%; height: 45%; margin-left: 4%; border-radius: 999px; background: rgba(160, 190, 255, .08); }
.as-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 4% 5% 3%; animation: asIn .6s var(--ease) .35s both; }
.as-logo { max-width: 46%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .8rem; font-weight: 700; letter-spacing: -.01em; color: #EAF1FF; }
.as-links { display: flex; gap: .45rem; margin-left: auto; }
.as-links i { width: 1.5rem; height: .28rem; border-radius: .2rem; background: rgba(160, 190, 255, .24); }
.as-cta { width: 3.4rem; height: 1.1rem; border-radius: .4rem; background: var(--grad); }
.as-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6%; height: 46%; padding: 1% 5% 0; }
.as-copy { display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.as-copy > span { display: block; border-radius: .25rem; animation: asSlide .7s var(--ease) both; }
.as-h1 { height: .8rem; width: 94%; background: #E6EDFA; animation-delay: .55s !important; }
.as-h1.short { width: 64%; background: linear-gradient(90deg, #43C5FF, #9A5BFF); animation-delay: .63s !important; }
.as-p { height: .36rem; width: 82%; margin-top: .25rem; background: rgba(160, 190, 255, .26); animation-delay: .74s !important; }
.as-btn { width: 40%; height: 1.25rem; margin-top: .45rem; border-radius: .45rem !important; background: var(--blue); animation-delay: .84s !important; }
.as-img { position: relative; overflow: hidden; border-radius: .7rem; background: linear-gradient(140deg, rgba(36, 136, 255, .55), rgba(154, 91, 255, .38) 62%, rgba(67, 197, 255, .3)), #13254A; animation: asImg .8s var(--ease) .7s both; }
.as-img::after { content: ""; position: absolute; inset: 45% 0 0; background: rgba(5, 11, 25, .45); clip-path: polygon(0 60%, 28% 18%, 46% 46%, 64% 6%, 100% 54%, 100% 100%, 0 100%); }
.as-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; padding: 5% 5% 0; }
.as-panels span { height: 2.6rem; border-radius: .55rem; background: #101D36; border: 1px solid rgba(160, 190, 255, .1); animation: asIn .6s var(--ease) both; }
.as-panels span:nth-child(1) { animation-delay: 1.05s; }
.as-panels span:nth-child(2) { animation-delay: 1.15s; }
.as-panels span:nth-child(3) { animation-delay: 1.25s; }
.as-sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(67, 197, 255, 0) 35%, rgba(67, 197, 255, .2) 50%, rgba(67, 197, 255, 0) 65%); transform: translateX(-100%); animation: sweep 1.1s var(--ease) 1.45s both; }
@keyframes asFrame { from { opacity: 0; transform: rotateY(-9deg) rotateX(5deg) translateY(16px) scale(.97); } }
@keyframes asIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes asSlide { from { opacity: 0; transform: translateX(-14px); } }
@keyframes asImg { from { opacity: 0; transform: scale(.93); } }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@media (min-width: 56rem) {
  .done-grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 4rem; }
  .assemble { order: 0; max-width: none; }
  .as-logo { font-size: .95rem; }
}

/* ── Preview dialog ─────────────────────────────────────────────────────── */
.preview {
  width: min(62rem, calc(100vw - 2 * var(--gutter))); max-height: 92vh; max-height: 92dvh;
  padding: 0; overflow: auto; border: 1px solid rgba(160, 190, 255, .2); border-radius: 1.25rem;
  background: var(--bg-2); color: var(--text);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .95);
}
.preview[open] { animation: dlg .45s var(--ease); }
.preview::backdrop { background: rgba(3, 7, 16, .74); }
@keyframes dlg { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.preview-frame .card-chrome { height: 2.2rem; }
.preview-frame .card-addr { height: 1.25rem; font-size: .72rem; }
.preview-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.preview-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem 1.4rem; }
.preview-title { margin-top: .3rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.preview-actions { display: flex; align-items: center; gap: 1.25rem; }
.preview-close { position: absolute; top: .55rem; right: .6rem; z-index: 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(5, 11, 25, .75); color: #fff; cursor: pointer; }
.preview-close svg { width: 1.1rem; height: 1.1rem; }
.link-quiet { display: inline-flex; align-items: center; gap: .4rem; font-size: .9375rem; color: var(--text-2); text-decoration: none; transition: color .25s; }
.link-quiet:hover { color: #fff; }

/* ── Consent bar (opt-in mode only) ─────────────────────────────────────── */
.consent-bar {
  position: fixed; z-index: 30; left: var(--safe-l); right: var(--safe-r); bottom: calc(env(safe-area-inset-bottom) + 1rem);
  max-width: 34rem; margin: 0 auto; padding: .9rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
  border: 1px solid var(--line-2); border-radius: 1rem; background: #0E1A33; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
  font-size: .875rem; color: var(--text-2);
}
.consent-bar .actions { gap: .5rem; }

.noscript { position: relative; z-index: 10; max-width: 36rem; margin: 0 auto; padding: 2rem var(--gutter); color: var(--text-2); }
.noscript a { color: #9CC8FF; }

/* Short portrait phones (iPhone SE etc.): the copy fills more of the screen, so the veil darkens sooner. */
@media (max-width: 47.99rem) and (max-height: 700px) and (orientation: portrait) {
  .veil::before { background: linear-gradient(180deg, rgba(5, 11, 25, .7) 0%, rgba(5, 11, 25, 0) 10%, rgba(5, 11, 25, .2) 14%, rgba(5, 11, 25, .9) 24%, var(--bg) 36%); }
  .plane { inset: -20% -70% 50% -70%; }
  .intro { padding-top: 4.5rem; }
}

@media (max-width: 47.99rem) and (max-height: 600px) and (orientation: portrait) {
  .intro .eyebrow { display: none; }
  .hero { font-size: 2.15rem; margin-top: 0; }
  .lede { font-size: .975rem; margin-top: .85rem; }
  .intro-cta { margin-top: 1.35rem; }
  .btn-lg { --h: 3.6rem; }
}

/* Narrow desktop / tablet / landscape phone: copy takes more width, so the wall moves further right. */
@media (min-width: 48rem) and (max-width: 68rem) {
  .hero { font-size: min(3.5rem, 6vw, 11vh); }
  .intro > .lede { max-width: 27rem; }
  .plane { inset: -40% -50% -40% 58%; }
  .veil::before {
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(5, 11, 25, .97) 48%, rgba(5, 11, 25, .72) 62%, rgba(5, 11, 25, 0) 80%),
      linear-gradient(0deg, rgba(5, 11, 25, .85) 0%, rgba(5, 11, 25, 0) 24%);
  }
}

/* ── Short landscape phones ─────────────────────────────────────────────── */
@media (max-height: 32rem) and (orientation: landscape) {
  .intro { padding-top: 4.5rem; padding-bottom: 1.5rem; }
  .hero { font-size: min(2.6rem, 11vh); }
  .lede { margin-top: .8rem; font-size: 1rem; }
  .intro-cta { margin-top: 1.25rem; }
  .btn-lg { --h: 3.4rem; }
  .flow { padding-top: 4rem; }
}

/* ── Reduced motion: no travel, no choreography — everything simply appears. ─ */
@media (prefers-reduced-motion: reduce) {
  .belt, .ambient i, .sk { animation: none !important; }
  .intro-in, .hero .line > span, .track { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .assemble *, .as-frame, .choice-ring, .choice-go { animation: none !important; }
  .as-sweep { display: none; }
  *, *::before, *::after { transition-duration: 1ms !important; }
  .btn:hover:not(:disabled)::after { transform: skewX(-18deg); }
}