/* ============================================================
   SERVICE PAGES — the dark tier.  v2, 2026-08-25.

   v1 was a token-flip of the light page: same cards, same grid,
   same rhythm, inverted. It read as grey boxes on black and was
   rejected. v2 is designed as a dark page, and it borrows the
   structure that already works on the Install Day site
   (workshop.selrai.com.au): hero -> form -> ticket -> before and
   after -> proof -> who -> the shape of the day -> what you own.

   Three rules carried over from that page, and they are the whole
   difference between this and v1:

   1. NO FLAT SECTION FILLS. Every band is a vertical gradient that
      starts and ends on one shared seam value, so no join can ever
      show at any section height.
   2. NO ALL-ROUND HAIRLINES. Cards separate with a lit top edge and
      a fill gradient, the way a real surface catches light. A 1px
      box on every side is what made v1 read as boxes.
   3. THE OFFER IS AN OBJECT. The ticket is the hero moment: real
      punched notches, a dashed tear line, a purple stub.

   Imagery register B (selr-design-language): near-black #161920,
   blue-leaning, colour only inside spectral light. The aurora is
   that light, kept low enough to read as a trail rather than a tint.

   Nav and footer re-pin the light token set on purpose. They are
   site constants, and the dark ground reads as a tier between them.
   ============================================================ */

/* ---------- tokens: the dark ground ---------- */
body.svc-lux {
  /* the shell tokens the hub/private-install components read */
  --svc-canvas: #161920;
  --svc-surface: #1E222D;
  --svc-surface-2: #232834;
  --svc-dark: #12141A;
  --svc-ink: #FFFFFA;
  --svc-muted: rgba(255, 255, 250, 0.62);
  --svc-invert: #FFFFFA;
  --svc-on-purple: #EEE8FF;
  --svc-glass: rgba(18, 20, 26, 0.55);
  --svc-glass-hair: rgba(255, 255, 250, 0.12);

  /* v2's own system */
  --svx-seam: #12141A;      /* every band begins and ends here */
  --svx-field: #191E29;     /* the standard swell */
  --svx-field-2: #1E2431;   /* the lifted swell */
  --svx-card: #1E222D;
  --svx-card-hi: #262B38;
  --svx-ink: #FFFFFA;
  --svx-mut: rgba(255, 255, 250, 0.62);
  --svx-mut-2: rgba(255, 255, 250, 0.40);
  --svx-hair: rgba(255, 255, 250, 0.10);
  --svx-lit: rgba(255, 255, 250, 0.085);   /* the top-edge light */
  --svx-purple: #6736E2;
  --svx-purple-press: #5024C0;
  --svx-on-purple: #EEE8FF;

  background: var(--svx-seam);
  color: var(--svx-ink);
}

/* the nav is a light island. Site constant, deliberate. */
.svc-lux .svc-nav {
  --svc-ink: #242424;
  --svc-muted: #616161;
  --svc-invert: #FFFFFA;
  --svc-surface: #FFFFFA;
  --svc-canvas: #F7F5EF;
}
.svc-lux .svc-nav-cta { background: #FFFFFA; color: #242424; }
.svc-lux .svc-nav-cta:hover { background: var(--svx-purple); color: #FFFFFA; }
.svc-lux .svc-mobile-menu { background: #FFFFFF; }

/* the footer is the other light island */
.svc-lux .svc-footerwrap {
  --svc-canvas: #F7F5EF;
  --svc-surface: #FFFFFA;
  --svc-surface-2: #FCFCFA;
  --svc-dark: #242424;
  --svc-ink: #242424;
  --svc-muted: #616161;
  --svc-invert: #FFFFFA;
  --svc-glass: rgba(255, 255, 255, 0.35);
  --svc-glass-hair: rgba(227, 227, 227, 0.45);
}

/* ============================================================
   SHELL
   ============================================================ */
.svx-sec {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  background: var(--svx-seam);
}
.svx-sec > .svx-in {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
.svx-sec[id] { scroll-margin-top: 96px; }

/* the band rhythm. Each one swells off the seam and returns to it. */
.svx-band-a { background: linear-gradient(180deg, var(--svx-seam) 0%, var(--svx-field) 30%, var(--svx-field) 70%, var(--svx-seam) 100%); }
.svx-band-b { background: linear-gradient(180deg, var(--svx-seam) 0%, var(--svx-field-2) 34%, var(--svx-field-2) 66%, var(--svx-seam) 100%); }
.svx-band-flat { background: var(--svx-seam); }

@media (max-width: 809.98px) {
  .svx-sec > .svx-in { padding: 70px 20px; gap: 28px; }
}

/* ---------- the spectral field (imagery register B, as light) ----------
   Colour on this page lives inside light, never as a global tint. Five
   very low radial fields in the measured hue order, heavily blurred and
   masked at the edges, so the near-black stays near-black and the page
   still has somewhere for the eye to rest. */
.svx-aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 150%;
  pointer-events: none;
  z-index: 0;
  opacity: .9;
  background:
    radial-gradient(46% 40% at 22% 22%, rgba(103, 54, 226, .34) 0%, rgba(103, 54, 226, 0) 68%),
    radial-gradient(38% 34% at 74% 14%, rgba(53, 198, 226, .16) 0%, rgba(53, 198, 226, 0) 70%),
    radial-gradient(42% 38% at 86% 52%, rgba(226, 69, 91, .13) 0%, rgba(226, 69, 91, 0) 70%),
    radial-gradient(34% 30% at 50% 84%, rgba(232, 163, 58, .10) 0%, rgba(232, 163, 58, 0) 72%),
    radial-gradient(30% 26% at 12% 70%, rgba(70, 201, 138, .08) 0%, rgba(70, 201, 138, 0) 72%);
  filter: blur(30px);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 40%, #000 0%, rgba(0, 0, 0, .55) 62%, transparent 100%);
  mask-image: radial-gradient(72% 62% at 50% 40%, #000 0%, rgba(0, 0, 0, .55) 62%, transparent 100%);
}
/* one fine grain so the big gradients never band on a cheap panel */
.svx-grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .30; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

/* ============================================================
   TYPE
   ============================================================ */
.svc-lux h1, .svc-lux h2, .svc-lux h3, .svc-lux h4 {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 400;
  font-variation-settings: "wght" 585;
  color: var(--svx-ink);
  margin: 0;
}
.svx-kicker {
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 13px; line-height: 1.3; letter-spacing: -0.025em;
  color: var(--svx-mut);
  margin: 0;
}
.svx-h2 {
  font-size: 60px; line-height: 1.05; letter-spacing: -0.04em;
  text-wrap: balance; margin: 0;
}
.svx-h2-c { text-align: center; max-width: 900px; }
.svx-h3 { font-size: 34px; line-height: 1.15; letter-spacing: -0.035em; }
.svx-h4 { font-size: 20px; line-height: 1.3; letter-spacing: -0.03em; }
.svx-dim, .svc-lux .svc-dim { color: var(--svx-mut); }
.svx-lead {
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 20px; line-height: 1.4; letter-spacing: -0.03em;
  color: var(--svx-mut); margin: 0; max-width: 640px;
}
.svx-lead-c { text-align: center; }
.svx-body {
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 17px; line-height: 1.5; letter-spacing: -0.03em;
  color: var(--svx-mut); margin: 0;
}
.svx-sm {
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 15px; line-height: 1.5; letter-spacing: -0.03em;
  color: var(--svx-mut); margin: 0;
}
.svx-label {
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 12px; line-height: 1.3; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--svx-mut-2); margin: 0;
}
@media (max-width: 1199.98px) {
  .svx-h2 { font-size: 46px; }
  .svx-h3 { font-size: 28px; }
}
@media (max-width: 809.98px) {
  .svx-h2 { font-size: 35px; }
  .svx-h3 { font-size: 25px; }
  .svx-lead { font-size: 17px; }
  .svx-body { font-size: 15px; }
}

/* ---------- buttons ---------- */
.svx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 28px; border-radius: 40px;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: -0.02em;
  text-decoration: none; width: fit-content; border: 0; cursor: pointer;
  transition: background-color .3s var(--svc-ease), color .3s var(--svc-ease), transform .2s var(--svc-ease);
}
.svx-btn:active { transform: scale(.98); }
.svx-btn--purple { background: var(--svx-purple); color: #FFFFFA; }
.svx-btn--purple:hover { background: var(--svx-purple-press); }
.svx-btn--light { background: #FFFFFA; color: #242424; }
.svx-btn--light:hover { background: var(--svx-on-purple); }
.svx-btn--ghost {
  background: rgba(255, 255, 250, .06); color: var(--svx-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 250, .16);
  gap: 11px;
}
.svx-btn--ghost:hover { background: rgba(255, 255, 250, .12); }
.svx-play-ico {
  width: 22px; height: 22px; border-radius: 50%;
  background: #FFFFFA; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.svx-play-ico::after {
  content: ""; width: 0; height: 0; margin-left: 2px;
  border-left: 7px solid #12141A;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.svx-link {
  color: var(--svx-ink); text-decoration: underline;
  text-decoration-color: var(--svx-purple);
  text-decoration-thickness: 2px; text-underline-offset: 2px;
  transition: color .6s var(--svc-ease-sym);
}
.svx-link:hover { color: var(--svx-on-purple); }

/* ---------- the chip ---------- */
.svx-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 17px 0 14px; border-radius: 30px;
  background: var(--svx-purple); color: #FFFFFA;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 14px; letter-spacing: -0.02em; line-height: 1;
  white-space: nowrap; width: fit-content;
}
.svx-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFA; flex: none; }

/* ============================================================
   HERO
   ============================================================ */
.svx-hero {
  position: relative;
  width: 100%;
  padding: 150px 20px 76px;
  overflow: clip;
  background: linear-gradient(180deg, #12141A 0%, #161920 46%, var(--svx-seam) 100%);
}
.svx-hero-in {
  position: relative; z-index: 1;
  width: min(1320px, 100%); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 56px;
}
.svx-hero-copy {
  width: min(1000px, 100%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.svx-mark { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.svx-mark-name {
  margin: 0;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 400; font-variation-settings: "wght" 585;
  font-size: 38px; line-height: 1.1; letter-spacing: -0.04em;
  color: var(--svx-ink);
}
.svx-mark-meta {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: -0.02em;
  color: var(--svx-mut);
}
.svx-mark-meta span:nth-child(even) { color: var(--svx-mut-2); }
.svx-hero-h1 {
  margin: 30px 0 0;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 400; font-variation-settings: "wght" 585;
  /* line-height under 1.05 clips the descenders into the paragraph below */
  font-size: clamp(42px, 6.0vw, 86px); line-height: 1.06; letter-spacing: -0.04em;
  text-wrap: balance; color: var(--svx-ink);
}
.svx-hero-h1 .svx-dim { color: var(--svx-mut); }
.svx-hero-sub {
  margin: 30px 0 0; max-width: 660px;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 20px; line-height: 1.5; letter-spacing: -0.03em;
  color: var(--svx-mut);
}
.svx-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.svx-hero-proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 30px; }
.svx-stars { display: inline-flex; gap: 3px; color: var(--svx-purple); font-size: 13px; letter-spacing: .04em; }
.svx-proof-line {
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: -0.025em; color: var(--svx-mut);
}

/* the film card */
.svx-film {
  position: relative; width: min(1120px, 100%);
  aspect-ratio: 16 / 9; border-radius: 30px; overflow: hidden;
  background: #12141A;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 250, .12);
}
.svx-film img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svx-film::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 20, 26, .16) 0%, rgba(18, 20, 26, .52) 100%);
}
.svx-film-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 80px; height: 80px; border-radius: 50%; border: 0; cursor: pointer; z-index: 2;
  background: rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .3s var(--svc-ease), transform .3s var(--svc-ease-over);
}
.svx-film-play::after {
  content: ""; position: absolute; left: 52%; top: 50%; transform: translate(-50%, -50%);
  width: 0; height: 0; border-left: 17px solid #FFFFFA;
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.svx-film-play:hover { background: rgba(255, 255, 255, .48); transform: translate(-50%, -50%) scale(1.04); }
.svx-film-label {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  padding: 9px 18px; border-radius: 40px;
  background: rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: -0.025em; color: #FFFFFA;
}
/* no film recorded yet: the poster carries it alone. selr-film-lightbox.js
   walks closest('.lux-film') for this, so that class stays on the card. */
.svx-film.is-still .svx-film-play, .svx-film.is-still .svx-film-label,
.lux-film.is-still .svx-film-play, .lux-film.is-still .svx-film-label { display: none; }

@media (max-width: 809.98px) {
  .svx-hero { padding: 120px 20px 50px; }
  .svx-hero-in { gap: 34px; }
  .svx-mark-name { font-size: 26px; }
  .svx-hero-h1 { margin-top: 20px; }
  .svx-hero-sub { font-size: 16px; margin-top: 20px; }
  .svx-hero-cta { margin-top: 26px; width: 100%; flex-direction: column; }
  .svx-hero-cta .svx-btn { width: 100%; }
  .svx-film { border-radius: 24px; }
  .svx-film-play { width: 58px; height: 58px; }
  .svx-film-play::after { border-left-width: 13px; border-top-width: 8px; border-bottom-width: 8px; }
}

/* ============================================================
   APPLY: the form, directly under the hero
   ============================================================ */
.svx-apply { background: var(--svx-seam); }
.svx-apply > .svx-in { padding-top: 0; padding-bottom: 60px; }
.svx-apply-card {
  width: min(1160px, 100%);
  display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: 56px; align-items: start;
  padding: 48px;
  border-radius: 40px;
  background:
    linear-gradient(180deg, rgba(255, 255, 250, .055) 0%, rgba(255, 255, 250, .012) 46%, rgba(255, 255, 250, 0) 100%),
    var(--svx-card);
  box-shadow: inset 0 1px 0 var(--svx-lit), inset 0 0 0 1px rgba(255, 255, 250, .05);
}
.svx-apply-text { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 110px; }
.svx-apply-h { font-size: 45px; line-height: 1.1; letter-spacing: -0.04em; margin: 0; }
.svx-apply-points { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.svx-apply-points li {
  position: relative; padding-left: 26px;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 15px; line-height: 1.5; letter-spacing: -0.03em; color: var(--svx-mut);
}
.svx-apply-points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--svx-purple);
}
@media (max-width: 1199.98px) {
  .svx-apply-card { grid-template-columns: 1fr; gap: 34px; }
  .svx-apply-text { position: static; }
}
@media (max-width: 809.98px) {
  .svx-apply > .svx-in { padding-bottom: 34px; }
  .svx-apply-card { padding: 26px 20px; border-radius: 30px; gap: 26px; }
  .svx-apply-h { font-size: 32px; }
}

/* ============================================================
   THE TICKET — the hero moment.
   The offer is a day in a room, so it gets a physical object with
   real punched notches rather than a rectangle. Body and stub each
   carry a two-hole radial mask composited to intersect, and the
   wrapper's drop-shadow follows that alpha, so the punch reads on
   any ground. Painted discs would never match the band gradients.
   ============================================================ */
.svx-ticket-sec > .svx-in { padding-top: 24px; padding-bottom: 84px; }
.svx-ticket {
  --tk-notch: 14px;
  --tk-r: 30px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) 1.35fr 300px;
  width: 100%; max-width: 1120px; min-height: 380px;
  font-family: "Manrope", sans-serif;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5)) drop-shadow(0 26px 60px rgba(0, 0, 0, .45));
}
.svx-tk-photo {
  position: relative; min-height: 100%;
  background: #12141A; overflow: hidden;
  border-radius: var(--tk-r) 0 0 var(--tk-r);
}
.svx-tk-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.svx-tk-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18, 20, 26, .38) 0%, rgba(18, 20, 26, 0) 55%);
}
.svx-tk-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 44px 34px; min-width: 0;
  background: linear-gradient(180deg, #262B38 0%, #1D2029 100%);
  -webkit-mask:
    radial-gradient(circle var(--tk-notch) at 100% 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--tk-notch) at 100% 100%, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--tk-notch) at 100% 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--tk-notch) at 100% 100%, transparent 98%, #000 100%);
  mask-composite: intersect;
}
.svx-tk-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.svx-tk-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.3;
  color: var(--svx-mut-2); text-transform: uppercase;
}
.svx-tk-brand { display: block; height: 19px; width: auto; opacity: .85; }
.svx-tk-title {
  margin: 0 0 34px;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 400; font-variation-settings: "wght" 585;
  font-size: 40px; line-height: 1.02; letter-spacing: -0.04em; color: var(--svx-ink);
}
.svx-tk-title span { display: block; color: var(--svx-mut); }
.svx-tk-block { display: flex; flex-direction: column; gap: 4px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 250, .12); }
.svx-tk-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.3;
  color: var(--svx-mut-2); text-transform: uppercase; margin-bottom: 8px;
}
.svx-tk-lead {
  font-size: 20px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2;
  color: var(--svx-ink); margin-bottom: 5px; text-wrap: balance;
}
.svx-tk-line { font-size: 15px; line-height: 1.5; letter-spacing: -0.02em; color: var(--svx-mut); }
.svx-tk-fine {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.4;
  color: rgba(255, 255, 250, .48);
}
.svx-tk-stub {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 4px; padding: 42px 34px 36px 40px;
  background: linear-gradient(170deg, #7043E8 0%, #6736E2 52%, #5C2CD8 100%);
  color: #FFFFFA;
  border-left: 2px dashed rgba(255, 255, 250, .55);
  border-radius: 0 var(--tk-r) var(--tk-r) 0;
  -webkit-mask:
    radial-gradient(circle var(--tk-notch) at 0 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--tk-notch) at 0 100%, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--tk-notch) at 0 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--tk-notch) at 0 100%, transparent 98%, #000 100%);
  mask-composite: intersect;
}
.svx-tk-stub-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.3;
  color: var(--svx-on-purple); text-transform: uppercase; margin-bottom: 10px;
}
.svx-tk-big {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 400; font-variation-settings: "wght" 585;
  font-size: 30px; letter-spacing: -0.035em; line-height: 1.08; color: #FFFFFA;
}
.svx-tk-sub { font-size: 15px; line-height: 1.5; letter-spacing: -0.02em; color: var(--svx-on-purple); margin-top: 6px; }
.svx-tk-cta { margin-top: 26px; height: 44px; padding: 0 22px; }
.svx-tk-barcode {
  width: 100%; height: 26px; margin-top: 30px; opacity: .55;
  background: repeating-linear-gradient(90deg,
    #FFFFFA 0 2px, transparent 2px 4px,
    #FFFFFA 4px 5px, transparent 5px 8px,
    #FFFFFA 8px 11px, transparent 11px 13px,
    #FFFFFA 13px 14px, transparent 14px 18px,
    #FFFFFA 18px 20px, transparent 20px 21px,
    #FFFFFA 21px 22px, transparent 22px 26px);
}
@media (max-width: 1099.98px) {
  .svx-ticket { grid-template-columns: minmax(220px, 0.8fr) 1.3fr 250px; }
  .svx-tk-body { padding: 32px 30px 28px; }
  .svx-tk-stub { padding: 34px 26px 30px 30px; }
  .svx-tk-title { font-size: 32px; }
  .svx-tk-big { font-size: 25px; }
}
@media (max-width: 809.98px) {
  .svx-ticket { --tk-r: 26px; grid-template-columns: 1fr; min-height: 0; }
  .svx-tk-photo { min-height: 0; height: 210px; border-radius: var(--tk-r) var(--tk-r) 0 0; }
  .svx-tk-photo img { position: static; height: 210px; }
  .svx-tk-body { padding: 26px 22px 24px; -webkit-mask: none; mask: none; }
  .svx-tk-title { font-size: 28px; margin-bottom: 26px; }
  .svx-tk-stub {
    border-left: 0; border-top: 2px dashed rgba(255, 255, 250, .55);
    border-radius: 0 0 var(--tk-r) var(--tk-r);
    padding: 28px 22px 26px;
    -webkit-mask:
      radial-gradient(circle 12px at 0 0, transparent 98%, #000 100%),
      radial-gradient(circle 12px at 100% 0, transparent 98%, #000 100%);
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle 12px at 0 0, transparent 98%, #000 100%),
      radial-gradient(circle 12px at 100% 0, transparent 98%, #000 100%);
    mask-composite: intersect;
  }
  .svx-tk-barcode { margin-top: 22px; }
}

/* ============================================================
   BEFORE AND AFTER
   ============================================================ */
.svx-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; max-width: 1120px; }
.svx-cmp-card { border-radius: 40px; padding: 46px 42px; display: flex; flex-direction: column; gap: 30px; }
.svx-cmp-card.is-before {
  background: linear-gradient(180deg, rgba(255, 255, 250, .045) 0%, rgba(255, 255, 250, 0) 60%), var(--svx-card);
  box-shadow: inset 0 1px 0 var(--svx-lit);
}
.svx-cmp-card.is-after {
  background: linear-gradient(168deg, #7043E8 0%, #6736E2 54%, #5C2CD8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 250, .22);
}
.svx-cmp-label { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: -0.025em; }
.svx-cmp-card.is-before .svx-cmp-label { color: var(--svx-mut-2); }
.svx-cmp-card.is-after .svx-cmp-label { color: var(--svx-on-purple); }
.svx-cmp-h { font-size: 34px; line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; }
.svx-cmp-card.is-before .svx-cmp-h { color: var(--svx-mut); }
.svx-cmp-card.is-after .svx-cmp-h { color: #FFFFFA; }
.svx-cmp-items { display: flex; flex-direction: column; gap: 18px; margin-top: auto; }
.svx-cmp-item {
  display: flex; align-items: flex-start; gap: 14px;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 17px; line-height: 1.35; letter-spacing: -0.025em;
}
.svx-cmp-card.is-before .svx-cmp-item { color: rgba(255, 255, 250, .70); }
.svx-cmp-card.is-after .svx-cmp-item { color: #FFFFFA; }
.svx-mark-ico {
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
}
.svx-cmp-card.is-before .svx-mark-ico { background: rgba(255, 255, 250, .10); color: rgba(255, 255, 250, .62); }
.svx-cmp-card.is-after .svx-mark-ico { background: #FFFFFA; color: var(--svx-purple); }
.svx-mark-ico svg { width: 14px; height: 14px; }
@media (max-width: 809.98px) {
  .svx-cmp { grid-template-columns: 1fr; gap: 16px; }
  .svx-cmp-card { padding: 28px 24px; border-radius: 30px; gap: 22px; }
  .svx-cmp-h { font-size: 25px; }
  .svx-cmp-item { font-size: 15px; }
}

/* ============================================================
   PROOF STAGE — the quote, the case, the numbers, on one object
   ============================================================ */
.svx-stage {
  width: 100%; max-width: 1120px;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  border-radius: 40px; overflow: hidden;
  background: linear-gradient(180deg, #262B38 0%, #191D26 100%);
  box-shadow: inset 0 1px 0 var(--svx-lit);
}
.svx-stage-main { padding: 50px 48px; display: flex; flex-direction: column; gap: 34px; }
.svx-quote { margin: 0; display: flex; flex-direction: column; gap: 26px; }
.svx-quote blockquote {
  margin: 0;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 400; font-variation-settings: "wght" 585;
  font-size: 30px; line-height: 1.25; letter-spacing: -0.035em; color: var(--svx-ink);
  text-wrap: balance;
}
.svx-quote figcaption { display: flex; align-items: center; gap: 14px; }
.svx-quote img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.svx-quote figcaption span {
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 15px; line-height: 1.4; letter-spacing: -0.025em; color: var(--svx-mut);
}
.svx-quote figcaption b { color: var(--svx-ink); display: block; }
.svx-case {
  border-radius: 30px; padding: 32px 30px;
  background: rgba(255, 255, 250, .045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 250, .07);
  display: flex; flex-direction: column; gap: 22px;
}
.svx-case-h { font-size: 25px; line-height: 1.25; letter-spacing: -0.03em; text-wrap: balance; }
.svx-case-stats { display: flex; flex-wrap: wrap; gap: 34px; }
.svx-case-stats div { display: flex; flex-direction: column; gap: 2px; }
.svx-num {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 400; font-variation-settings: "wght" 585;
  font-size: 40px; line-height: 1; letter-spacing: -0.04em; color: var(--svx-ink);
}
.svx-num-label {
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: -0.025em; color: var(--svx-mut-2);
}
.svx-stage-rail {
  padding: 50px 34px;
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  background: rgba(0, 0, 0, .22);
}
.svx-rail-row { padding: 20px 0; border-top: 1px solid rgba(255, 255, 250, .10); }
.svx-rail-row:first-child { border-top: 0; padding-top: 0; }
.svx-rail-num {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 400; font-variation-settings: "wght" 585;
  font-size: 40px; line-height: 1.05; letter-spacing: -0.04em; color: var(--svx-ink);
}
.svx-rail-num sup { font-size: .5em; vertical-align: super; }
.svx-rail-label {
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 13px; line-height: 1.4; letter-spacing: -0.025em; color: var(--svx-mut-2);
}
.svx-rail-partner { display: flex; align-items: center; gap: 12px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 250, .10); margin-top: 6px; }
.svx-rail-partner img { height: 30px; width: auto; display: block; opacity: .92; }
.svx-rail-partner span {
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 12px; letter-spacing: -0.02em; color: var(--svx-mut-2);
}
@media (max-width: 999.98px) {
  .svx-stage { grid-template-columns: 1fr; }
  .svx-stage-main { padding: 32px 24px; gap: 26px; }
  .svx-stage-rail { padding: 28px 24px; }
  .svx-quote blockquote { font-size: 22px; }
  .svx-rail-num { font-size: 32px; }
}

/* ============================================================
   WHO IT IS FOR
   ============================================================ */
.svx-who { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; max-width: 1120px; align-items: stretch; }
.svx-who-card {
  border-radius: 40px; padding: 46px 44px;
  display: flex; flex-direction: column; gap: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 250, .05) 0%, rgba(255, 255, 250, 0) 55%), var(--svx-card);
  box-shadow: inset 0 1px 0 var(--svx-lit);
}
.svx-who-h { font-size: 30px; line-height: 1.2; letter-spacing: -0.035em; text-wrap: balance; }
.svx-who-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.svx-who-list li {
  display: flex; align-items: flex-start; gap: 14px;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 16px; line-height: 1.45; letter-spacing: -0.025em; color: var(--svx-mut);
}
.svx-who-list li > span:not(.svx-mark-ico) { flex: 1; }
.svx-who-list .svx-mark-ico { background: var(--svx-purple); color: #FFFFFA; }
.svx-pullquote {
  margin: auto 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 250, .10);
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 400; font-variation-settings: "wght" 585;
  font-size: 25px; line-height: 1.25; letter-spacing: -0.03em; color: var(--svx-ink);
}
.svx-pullquote cite {
  display: block; margin-top: 10px; font-style: normal;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: -0.025em; color: var(--svx-mut-2);
}
@media (max-width: 809.98px) {
  .svx-who { grid-template-columns: 1fr; gap: 16px; }
  .svx-who-card { padding: 28px 24px; border-radius: 30px; }
  .svx-who-h { font-size: 22px; }
  .svx-who-list li { font-size: 15px; }
}

/* ============================================================
   THE SHAPE OF THE DAY — heading left, the day as a stack right
   ============================================================ */
.svx-sched-sec > .svx-in { align-items: stretch; }
.svx-sched { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 60px; width: 100%; align-items: start; }
.svx-sched-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; position: sticky; top: 120px; }
.svx-sched-head .svx-h2 { text-align: left; }
.svx-sched-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.svx-slot {
  display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 26px;
  padding: 24px 28px; border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 250, .05) 0%, rgba(255, 255, 250, .012) 100%), var(--svx-card);
  box-shadow: inset 0 1px 0 var(--svx-lit);
  transition: background-color .3s var(--svc-ease);
}
.svx-slot-time {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 400; font-variation-settings: "wght" 585;
  font-size: 19px; letter-spacing: -0.03em; line-height: 1.3; color: var(--svx-ink);
}
.svx-slot-title {
  margin: 0 0 6px;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 400; font-variation-settings: "wght" 585;
  font-size: 19px; line-height: 1.3; letter-spacing: -0.03em; color: var(--svx-ink);
}
.svx-slot-desc {
  margin: 0; max-width: 54ch;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 15px; line-height: 1.5; letter-spacing: -0.03em; color: var(--svx-mut);
}
/* the one accent on the stack: the row where the day becomes theirs */
.svx-slot.is-last {
  background: linear-gradient(168deg, #7043E8 0%, #6736E2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 250, .22);
}
.svx-slot.is-last .svx-slot-time { color: var(--svx-on-purple); }
.svx-slot.is-last .svx-slot-title { color: #FFFFFA; }
.svx-slot.is-last .svx-slot-desc { color: var(--svx-on-purple); }
.svx-sched-break {
  display: flex; align-items: center; gap: 16px; padding: 6px 0;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: -0.025em; color: var(--svx-mut-2);
}
.svx-sched-break::before, .svx-sched-break::after { content: ""; flex: 1; border-top: 1px solid rgba(255, 255, 250, .10); }
@media (max-width: 999.98px) {
  .svx-sched { grid-template-columns: 1fr; gap: 34px; }
  .svx-sched-head { position: static; }
}
@media (max-width: 809.98px) {
  .svx-slot { grid-template-columns: 1fr; gap: 8px; padding: 22px 20px; }
}

/* ============================================================
   WHAT YOU OWN — the four tiles
   ============================================================ */
.svx-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; }
.svx-tile {
  border-radius: 30px; padding: 30px 26px 32px;
  display: flex; flex-direction: column; gap: 26px; min-height: 250px;
  background: linear-gradient(180deg, rgba(255, 255, 250, .055) 0%, rgba(255, 255, 250, 0) 62%), var(--svx-card);
  box-shadow: inset 0 1px 0 var(--svx-lit);
}
.svx-tile-num {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 400; font-variation-settings: "wght" 585;
  font-size: 15px; letter-spacing: 0; color: var(--svx-purple);
}
.svx-tile-body { display: flex; flex-direction: column; gap: 10px; }
.svx-tile h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.03em; }
.svx-tile p {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 15px; line-height: 1.5; letter-spacing: -0.03em; color: var(--svx-mut);
}
.svx-own {
  width: 100%; max-width: 860px;
  padding: 30px 34px; border-radius: 30px; text-align: center;
  background: rgba(103, 54, 226, .10);
  box-shadow: inset 0 0 0 1px rgba(103, 54, 226, .35);
}
.svx-own p {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 16px; line-height: 1.55; letter-spacing: -0.03em; color: var(--svx-mut);
}
.svx-own b { color: var(--svx-ink); }
@media (max-width: 1199.98px) { .svx-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 809.98px) {
  .svx-tiles { grid-template-columns: 1fr; }
  .svx-tile { min-height: 0; gap: 20px; padding: 24px 22px 26px; }
  .svx-own { padding: 22px 20px; }
}

/* ============================================================
   THE JOURNEY — the cross-sell
   ============================================================ */
.svx-journey {
  width: 100%; max-width: 1120px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  padding: 50px 48px; border-radius: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 250, .05) 0%, rgba(255, 255, 250, 0) 60%), var(--svx-card);
  box-shadow: inset 0 1px 0 var(--svx-lit);
}
.svx-journey-left { display: flex; flex-direction: column; gap: 14px; }
.svx-journey h2 { font-size: 40px; line-height: 1.1; letter-spacing: -0.04em; text-wrap: balance; }
.svx-journey-right { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
@media (max-width: 809.98px) {
  .svx-journey { grid-template-columns: 1fr; gap: 26px; padding: 28px 24px; border-radius: 30px; }
  .svx-journey h2 { font-size: 28px; }
}

/* ============================================================
   THE CLOSE — the purple sandwich that wraps the footer card
   ============================================================ */
.svx-close {
  position: relative;
  width: 100%; overflow: clip;
  background: linear-gradient(180deg, var(--svx-seam) 0%, #2A1A55 34%, #4A26A8 68%, var(--svx-purple) 100%);
}
.svx-close-in {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto;
  padding: 130px 20px 120px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px;
}
.svx-close-in h2 { font-size: 60px; line-height: 1.05; letter-spacing: -0.04em; color: #FFFFFA; text-wrap: balance; }
.svx-close-in p {
  margin: 0; max-width: 560px;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 17px; line-height: 1.5; letter-spacing: -0.03em; color: var(--svx-on-purple);
}
.svx-close-in .svx-btn { margin-top: 10px; }
.svx-close .svx-aurora {
  inset: -10% -10% auto -10%; height: 120%; filter: blur(40px); opacity: .55;
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(53, 198, 226, .30) 0%, rgba(53, 198, 226, 0) 70%),
    radial-gradient(42% 40% at 80% 24%, rgba(226, 69, 91, .22) 0%, rgba(226, 69, 91, 0) 70%),
    radial-gradient(38% 36% at 62% 82%, rgba(232, 163, 58, .18) 0%, rgba(232, 163, 58, 0) 72%);
}
@media (max-width: 809.98px) {
  .svx-close-in { padding: 80px 20px 76px; }
  .svx-close-in h2 { font-size: 32px; }
}

/* ============================================================
   FILM LIGHTBOX — the site overlay, wide frame, native video
   ============================================================ */
.selr-lb {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(10, 10, 10, 0.86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.selr-lb.is-open { opacity: 1; pointer-events: auto; }
.selr-lb-x {
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 100%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  transition: background-color .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.selr-lb-x:hover { background: rgba(255, 255, 255, 0.2); }
.selr-lb-film .selr-lb-frame {
  width: min(92vw, 1280px); height: auto; aspect-ratio: 16 / 9; max-height: 88vh;
  border-radius: 30px; overflow: hidden; background: #000;
}
.selr-lb-film video { width: 100%; height: 100%; display: block; background: #000; }

/* ============================================================
   THE GATE FORM SKIN — sgf- prefix. The engine draws its own head
   and card; here the heading lives in the left column, so the head
   is hidden and the fields sit straight on the apply card.
   ============================================================ */
.selr-gate-form {
  --sgf-surface: #1E222D;
  --sgf-surface-hi: #262B38;
  --sgf-ink: #FFFFFA;
  --sgf-muted: rgba(255, 255, 250, 0.62);
  --sgf-accent: #6736E2;
  --sgf-bad: #C25D5D;
  --sgf-hair: rgba(255, 255, 250, 0.14);
  --sgf-field: rgba(255, 255, 250, 0.05);
  --sgf-field-focus: rgba(255, 255, 250, 0.10);
  --sgf-spring: cubic-bezier(0.4, 0, 0.2, 1);

  font-family: 'Manrope', 'Manrope Placeholder', sans-serif;
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  color: var(--sgf-ink);
}
.selr-gate-form *, .selr-gate-form *::before, .selr-gate-form *::after { box-sizing: border-box; }
.selr-gate-form a { color: var(--sgf-ink); text-decoration: underline; text-decoration-color: var(--sgf-accent); text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* the left column already carries the heading */
.svx-apply-form .selr-gate-form .head { display: none; }
.svx-apply-form .selr-gate-form .card { padding: 0; }
.selr-gate-form .head { padding: 0 0 22px; }
.selr-gate-form .head h2 { font-weight: 600; font-size: 26px; letter-spacing: -0.03em; color: var(--sgf-ink); margin: 0 0 8px; }
.selr-gate-form .head .support { margin: 0; font-size: 15px; color: var(--sgf-muted); letter-spacing: -0.01em; }

/* ---------- fields ---------- */
.selr-gate-form .fields { display: flex; flex-direction: column; gap: 16px; }
.selr-gate-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.selr-gate-form label { display: block; }
.selr-gate-form .label { display: block; font-weight: 600; font-size: 13px; letter-spacing: -0.025em; color: var(--sgf-ink); margin-bottom: 7px; }
.selr-gate-form .label .optional { color: var(--sgf-muted); font-weight: 500; }
.selr-gate-form .field {
  background: var(--sgf-field);
  border: 1px solid var(--sgf-hair);
  border-radius: 20px; padding: 12px 16px;
  transition: background .3s var(--sgf-spring), border-color .3s var(--sgf-spring);
}
.selr-gate-form .field:focus-within { background: var(--sgf-field-focus); border-color: var(--sgf-accent); }
.selr-gate-form .field input, .selr-gate-form .field textarea {
  width: 100%; border: 0; outline: 0; background: transparent; padding: 0;
  font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 500;
  letter-spacing: -0.03em; color: var(--sgf-ink); line-height: 1.2;
}
.selr-gate-form .field textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.selr-gate-form ::placeholder { color: rgba(255, 255, 250, 0.4); opacity: 1; }
.selr-gate-form .field.invalid { border-color: var(--sgf-bad); }
.selr-gate-form .err { display: none; margin: 6px 0 0; font-size: 13px; color: var(--sgf-bad); letter-spacing: -0.01em; }
.selr-gate-form .invalid + .err { display: block; }
.selr-gate-form .check {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  color: var(--sgf-muted); font-size: 13px; letter-spacing: -0.01em; cursor: pointer;
}
.selr-gate-form .check input { width: 16px; height: 16px; margin: 0; accent-color: var(--sgf-accent); }
.selr-gate-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- steps ---------- */
.selr-gate-form .step.entering { animation: sgf-step-in 280ms var(--sgf-spring) both; }
.selr-gate-form .step.leaving  { animation: sgf-step-out 120ms var(--sgf-spring) both; }
@keyframes sgf-step-in { from { opacity: 0.001; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sgf-step-out { from { opacity: 1; transform: none; } to { opacity: 0.001; transform: translateY(-8px); } }

/* ---------- progress ---------- */
.selr-gate-form .progress { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.selr-gate-form .progress-label { font-weight: 600; font-size: 12px; letter-spacing: -0.01em; color: var(--sgf-muted); white-space: nowrap; }
.selr-gate-form .progress-segs { flex: 1; display: flex; gap: 6px; }
.selr-gate-form .progress-segs i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 250, 0.12); transition: background .3s var(--sgf-spring); }
.selr-gate-form .progress-segs i.is-done { background: var(--sgf-accent); }
.selr-gate-form .progress-segs i.is-now { background: var(--sgf-accent); opacity: .45; }

/* ---------- questions and tiles ---------- */
.selr-gate-form .q {
  margin: 0 0 16px; font-weight: 600; font-size: 26px;
  letter-spacing: -0.035em; line-height: 1.12; color: var(--sgf-ink); text-wrap: balance;
}
.selr-gate-form .q-note {
  margin: -8px 0 16px; font-size: 14px; font-weight: 500; line-height: 1.45;
  letter-spacing: -0.01em; color: var(--sgf-muted); max-width: 46ch;
}
.selr-gate-form .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.selr-gate-form .opt {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 12px 14px 12px 12px; cursor: pointer;
  background: var(--sgf-field); border: 1px solid var(--sgf-hair); border-radius: 20px;
  transition: background .2s var(--sgf-spring), border-color .2s var(--sgf-spring), transform .2s var(--sgf-spring);
}
.selr-gate-form .opt:hover { border-color: rgba(103, 54, 226, 0.6); background: var(--sgf-surface-hi); transform: translateY(-1px); }
.selr-gate-form .opt:active { transform: scale(.99); }
.selr-gate-form .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.selr-gate-form .opt-key {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px; color: var(--sgf-muted);
  background: rgba(255, 255, 250, 0.08);
  transition: background .2s var(--sgf-spring), color .2s var(--sgf-spring);
}
.selr-gate-form .opt-label { flex: 1; font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: var(--sgf-ink); line-height: 1.25; }
.selr-gate-form .opt-mark { width: 18px; height: 18px; border-radius: 50%; flex: none; opacity: 0; transition: opacity .2s var(--sgf-spring); }
/* a chosen tile flips solid purple, the locked rule for choice controls */
.selr-gate-form .opt:has(input:checked) { background: var(--sgf-accent); border-color: var(--sgf-accent); }
.selr-gate-form .opt:has(input:checked) .opt-label { color: #FFFFFA; }
.selr-gate-form .opt:has(input:checked) .opt-key { background: rgba(255, 255, 250, 0.22); color: #FFFFFA; }
.selr-gate-form .opt:has(input:checked) .opt-mark {
  opacity: 1;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3.2L14 6' fill='none' stroke='%23FFFFFA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 18px 18px; background-repeat: no-repeat; background-position: center;
}
.selr-gate-form .opt:hover:has(input:checked) { background: var(--sgf-accent); }
.selr-gate-form .opt:has(input:focus-visible) { outline: 2px solid var(--sgf-accent); outline-offset: 2px; }
.selr-gate-form .q-err { margin-top: 10px; }
.selr-gate-form .step-q.invalid .q-err { display: block; }

/* ---------- actions ---------- */
.selr-gate-form .actions { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.selr-gate-form .btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; height: 46px; padding: 0 26px; border-radius: 40px;
  background: var(--sgf-accent); color: #FFFFFA;
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: -0.02em;
  transition: background .3s var(--sgf-spring), transform .3s var(--sgf-spring);
}
.selr-gate-form .btn:hover { background: #5024C0; }
.selr-gate-form .btn:active { transform: scale(0.98); }
.selr-gate-form .btn[disabled] { opacity: .5; cursor: default; }
.selr-gate-form .back {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0;
  font-family: 'Manrope', sans-serif; font-size: 13px; color: var(--sgf-muted);
  letter-spacing: -0.01em; transition: color .2s var(--sgf-spring);
}
.selr-gate-form .back:hover { color: var(--sgf-ink); }
.selr-gate-form .fineprint { margin: 20px 0 0; font-size: 12px; line-height: 1.5; letter-spacing: -0.01em; color: var(--sgf-muted); }
.selr-gate-form .form-error { display: none; margin: 16px 0 0; font-size: 14px; color: var(--sgf-bad); }
.selr-gate-form .form-error.show { display: block; }

/* ---------- success ---------- */
.selr-gate-form .done { display: none; padding: 8px 0; }
.selr-gate-form form.sent { display: none; }
.selr-gate-form form.sent + .done { display: block; }
.selr-gate-form .done h2 { font-weight: 600; font-size: 30px; letter-spacing: -0.035em; color: var(--sgf-ink); margin: 0 0 10px; }
.selr-gate-form .done .done-line { margin: 0; font-size: 16px; line-height: 1.5; color: var(--sgf-muted); max-width: 46ch; }

@media (max-width: 809px) {
  .selr-gate-form .row { grid-template-columns: 1fr; }
  .selr-gate-form .opts { grid-template-columns: 1fr; }
  .selr-gate-form .opt { min-height: 52px; }
  .selr-gate-form .opt-key { display: none; }
  .selr-gate-form .q { font-size: 23px; }
}

/* ============================================================
   MOTION — the reveal tiers the page shell already runs
   ============================================================ */
@keyframes svx-word-in {
  from { opacity: .001; filter: blur(5px); transform: translateY(2px) scale(.9); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
.svc-lux .svc-reveal > span { display: inline-block; animation: svx-word-in 660ms var(--svc-ease-over) both; }
.svc-lux .svc-reveal > span:nth-child(1) { animation-delay: 0ms; }
.svc-lux .svc-reveal > span:nth-child(2) { animation-delay: 20ms; }
.svc-lux .svc-reveal > span:nth-child(3) { animation-delay: 40ms; }
.svc-lux .svc-reveal > span:nth-child(4) { animation-delay: 60ms; }
.svc-lux .svc-reveal > span:nth-child(5) { animation-delay: 80ms; }
.svc-lux .svc-reveal > span:nth-child(6) { animation-delay: 100ms; }
.svc-lux .svc-reveal > span:nth-child(7) { animation-delay: 120ms; }
.svc-lux .svc-reveal > span:nth-child(8) { animation-delay: 140ms; }
.svc-lux .svc-reveal > span:nth-child(9) { animation-delay: 160ms; }
.svc-lux .svc-reveal > span:nth-child(n+10) { animation-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .svc-lux .svc-reveal > span { animation: none; }
  .selr-lb, .selr-lb-x, .svx-film-play,
  .selr-gate-form .step.entering, .selr-gate-form .step.leaving { transition: none !important; animation: none !important; }
}

/* ---------- old v1 component leftovers: neutralised ----------
   selr-private-install.css still loads before this file and owns the
   .pi-* light-page components. v2 does not use them, but any that
   survive in a stray page must not paint a light card on the dark
   ground while it is being cleaned up. */
.svc-lux .pi-card, .svc-lux .pi-tile, .svc-lux .pi-who-card, .svc-lux .pi-case, .svc-lux .pi-own {
  background: var(--svx-card); color: var(--svx-ink); border-color: rgba(255, 255, 250, .10);
}

/* ============================================================
   SPECIFICITY RESTATEMENT — read this before adding a margin.

   selr-services-hub.css carries `.svc-body p { margin: 0 }` and this
   file carries `.svc-lux h1, h2, h3, h4 { margin: 0 }`. Both are
   (0,1,1) and both outrank a single-class rule like `.svx-hero-sub`,
   so every margin set on a p or a heading above this line silently
   computes to 0. The hub sheet hit the same wall and solved it the
   same way at its own line 1043.

   Every heading and paragraph margin that actually has to land is
   restated here at (0,2,0). If you add one above, add it here too.
   ============================================================ */
.svc-lux .svx-hero-h1 { margin: 30px 0 0; }
.svc-lux p.svx-hero-sub { margin: 30px 0 0; }
.svc-lux .svx-tk-title { margin: 0 0 30px; }
.svc-lux p.svx-tk-label { margin: 0 0 8px; }
.svc-lux p.svx-tk-lead { margin: 0 0 5px; }
.svc-lux p.svx-tk-fine { margin: 24px 0 0; }
.svc-lux p.svx-tk-stub-label { margin: 0 0 10px; }
.svc-lux p.svx-tk-sub { margin: 6px 0 0; }
.svc-lux .svx-slot-title { margin: 0 0 6px; }
.svc-lux p.svx-pullquote { margin: auto 0 0; }
.svc-lux .svx-apply-h,
.svc-lux .svx-h2,
.svc-lux .svx-h3,
.svc-lux .svx-journey h2,
.svc-lux .svx-close-in h2 { margin: 0; }
@media (max-width: 809.98px) {
  .svc-lux .svx-hero-h1 { margin: 20px 0 0; }
  .svc-lux p.svx-hero-sub { margin: 20px 0 0; }
  .svc-lux .svx-tk-title { margin: 0 0 24px; }
}

/* ---------- the panel-tier hero ----------
   Adoption Partnership is a request page, not a marketing page, so its hero
   carries the name and one line and hands straight to the form. No film card
   under it, so the hero runs shorter and the headline runs at panel scale
   rather than display scale. */
.svx-hero--panel { padding: 150px 20px 20px; }
.svx-hero--panel .svx-hero-in { gap: 0; }
.svc-lux .svx-hero--panel .svx-hero-h1 {
  font-size: clamp(32px, 3.9vw, 56px); line-height: 1.1; margin: 26px 0 0;
  max-width: 880px;
}
@media (max-width: 809.98px) {
  .svx-hero--panel { padding: 120px 20px 10px; }
  .svc-lux .svx-hero--panel .svx-hero-h1 { font-size: 28px; margin: 18px 0 0; }
}

/* ---------- the footer bridge ----------
   The Private Install runs into the footer through the purple close band.
   The request page has no close band, so the near-black would butt straight
   against the cream footer card. This is the same seam trick the bands use:
   the last section fades out rather than ending on an edge. */
.svx-apply--last > .svx-in { padding-bottom: 130px; }
.svx-apply--last {
  background: linear-gradient(180deg, var(--svx-seam) 0%, var(--svx-seam) 62%, #191625 84%, #241E3A 100%);
}
@media (max-width: 809.98px) { .svx-apply--last > .svx-in { padding-bottom: 80px; } }