:root {
  color-scheme: light;
  --ink: #101522;
  --ink-soft: #4b5365;
  --paper: #f7f8fb;
  --paper-blue: #eef6ff;
  --paper-violet: #f4f1ff;
  --paper-rose: #fff2f9;
  --white: #ffffff;
  --night: #030817;
  --night-soft: #09152a;
  --blue: #4da6ff;
  --blue-deep: #326fe8;
  --violet: #a581ff;
  --rose: #ee8fd5;
  --cyan: #72e4ff;
  --line: rgba(20, 32, 58, 0.13);
  --line-light: rgba(255, 255, 255, 0.34);
  --page-pad: clamp(1.25rem, 4vw, 5rem);
  --section-gap: clamp(6rem, 11vw, 11rem);
  --display: "Bahnschrift", "DIN Alternate", "Arial Narrow", "Segoe UI Variable Display", sans-serif;
  --body: "Segoe UI Variable Text", "Aptos", "Helvetica Neue", Arial, sans-serif;
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  font-family: var(--body);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 80% 10%, rgba(164, 129, 255, 0.09), transparent 30rem),
    var(--paper);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

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

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 1rem;
  inset-inline-start: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  color: var(--ink);
  background: var(--white);
  transform: translateY(-180%);
  transition: transform 180ms ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.site-shell {
  position: relative;
  min-height: 100vh;
  overflow: clip;
  background: var(--paper);
}

.reveal-secondary,
.hero-path,
.local-status {
  opacity: 0;
  transform: translateY(1.3rem);
}

.site-shell .reveal-secondary,
.site-shell .hero-path,
.site-shell .local-status {
  animation: content-fade 1.15s var(--ease-expo) both;
}

.site-shell .site-header {
  animation-delay: 80ms;
}

.site-header {
  position: absolute;
  z-index: 15;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  padding: 1.65rem var(--page-pad);
}

.wordmark {
  justify-self: start;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 430;
  letter-spacing: 0.34em;
  color: var(--ink);
}

.main-nav {
  display: flex;
  gap: clamp(1.2rem, 3vw, 3rem);
  font-size: .8125rem;
  font-weight: 620;
  letter-spacing: 0.04em;
  color: #323b4d;
}

.main-nav a {
  position: relative;
  padding: 0.5rem 0;
}

.main-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.1rem;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--blue), var(--violet), var(--rose));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms var(--ease-expo);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-action {
  justify-self: end;
  padding: 0.7rem 1.25rem;
  border: 1px solid rgba(89, 104, 142, 0.22);
  border-radius: 999px;
  color: #303a50;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 0.6rem 1.8rem rgba(79, 96, 136, 0.08);
  font-size: .8125rem;
  font-weight: 650;
  cursor: pointer;
  backdrop-filter: blur(14px);
}

.hero {
  position: relative;
  min-height: min(61rem, 100svh);
  display: grid;
  align-content: center;
  padding: clamp(8.5rem, 13vh, 11rem) var(--page-pad) 9rem;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 1) 0 34%, rgba(255, 255, 255, 0.82) 48%, rgba(248, 249, 255, 0.18) 73%, rgba(247, 240, 255, 0.34) 100%),
    linear-gradient(180deg, #fff, #f6f8ff);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -12%;
  bottom: -32%;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(159, 129, 255, 0.18);
  box-shadow:
    0 0 0 4rem rgba(113, 194, 255, 0.035),
    0 0 0 9rem rgba(235, 139, 216, 0.025);
}

.quiet-label {
  margin: 0 0 1.5rem;
  color: #5a6790;
  font-size: .8125rem;
  font-weight: 720;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.15rem, 5.9vw, 6.55rem);
  font-weight: 320;
  font-stretch: 88%;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.9rem 1.45rem;
  border: 0;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  cursor: pointer;
  transition:
    transform 260ms var(--ease-expo),
    box-shadow 260ms ease,
    background 260ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button-gradient {
  color: #fff;
  background: linear-gradient(110deg, #3e9cef, #7d8eea 55%, #d27bd0);
  box-shadow: 0 1rem 2.7rem rgba(93, 132, 226, 0.25);
}

.button-quiet {
  border: 1px solid rgba(68, 90, 139, 0.22);
  background: rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(12px);
}

.section-pad {
  padding: var(--section-gap) var(--page-pad);
}

.journey {
  color: #f6f9ff;
  background:
    radial-gradient(circle at 20% 10%, rgba(61, 132, 255, 0.22), transparent 30rem),
    radial-gradient(circle at 85% 75%, rgba(178, 107, 232, 0.15), transparent 36rem),
    linear-gradient(148deg, #07101f, #0a1730 58%, #080e1b);
}

.product {
  display: grid;
  grid-template-columns: minmax(20rem, 0.7fr) minmax(35rem, 1.3fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
  background:
    radial-gradient(circle at 0 20%, rgba(77, 166, 255, 0.12), transparent 30rem),
    radial-gradient(circle at 100% 90%, rgba(238, 143, 213, 0.1), transparent 34rem),
    #fbfbfd;
}

.closing-orbit {
  position: absolute;
  width: min(70vw, 58rem);
  aspect-ratio: 1;
  border: 1px solid rgba(145, 202, 255, 0.2);
  border-radius: 50%;
  box-shadow:
    0 0 0 5rem rgba(119, 156, 255, 0.025),
    0 0 0 10rem rgba(197, 122, 225, 0.018);
  animation: none;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 2.2rem var(--page-pad);
  color: rgba(255, 255, 255, 0.58);
  background: #05070b;
  font-size: .8125rem;
}

.site-footer .wordmark {
  color: #fff;
}

.site-footer p {
  margin: 0;
  text-align: center;
}

.site-footer p:last-child {
  justify-self: end;
}

.vision-dialog {
  width: min(92vw, 42rem);
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 2rem;
  color: var(--ink);
  background: rgba(250, 251, 255, 0.96);
  box-shadow: 0 3rem 8rem rgba(12, 22, 49, 0.3);
  backdrop-filter: blur(24px);
}

.vision-dialog::backdrop {
  background: rgba(5, 11, 25, 0.72);
  backdrop-filter: blur(8px);
}

.vision-dialog h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.1rem, 5vw, 4.1rem);
  font-weight: 330;
  line-height: 1;
  letter-spacing: -0.05em;
}

.vision-dialog > p:not(.quiet-label) {
  margin: 1.5rem 0 2rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.dialog-close {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  padding: 0.5rem;
  border: 0;
  color: #647087;
  background: transparent;
  font-size: .8125rem;
  text-transform: uppercase;
  cursor: pointer;
}

.button-dark {
  color: #fff;
  background: #111a2e;
}













@keyframes content-fade {
  from { opacity: 0; transform: translateY(1.3rem); filter: blur(0.4rem); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}


@media (max-width: 1100px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .main-nav {
    display: none;
  }

  .hero {
    min-height: 62rem;
    align-content: start;
    padding-top: 10rem;
  }

        .section-intro,
  .journey-heading,
  .product {
    grid-template-columns: 1fr;
  }

    .product {
    gap: 4rem;
  }
}

@media (max-width: 820px) {
        .hero {
    min-height: 59rem;
    padding-bottom: 8rem;
  }

    .hero h1 {
    font-size: clamp(2.9rem, 12vw, 4.85rem);
  }

                          .site-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .site-footer p:last-child {
    justify-self: center;
  }
}

@media (max-width: 560px) {
  .site-header {
    padding-top: 1.2rem;
  }

  .nav-action {
    padding: 0.62rem 0.9rem;
  }

  .hero {
    min-height: 57rem;
    padding-top: 8.2rem;
  }

  .hero h1 {
    font-size: clamp(2.55rem, 12.6vw, 4.15rem);
  }

                              }

.nav-menu {
  display: none;
  position: relative;
  z-index: 25;
  justify-self: end;
}

.nav-menu summary {
  min-width: 3.25rem;
  min-height: 2.75rem;
  display: inline-grid;
  place-items: center;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(89, 104, 142, 0.22);
  border-radius: 999px;
  color: #303a50;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0.6rem 1.8rem rgba(79, 96, 136, 0.08);
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  backdrop-filter: blur(14px);
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary:focus-visible {
  outline: 3px solid rgba(63, 145, 238, 0.42);
  outline-offset: 3px;
}

.nav-menu nav {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  width: min(18rem, calc(100vw - 2rem));
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem;
  border: 1px solid rgba(91, 112, 155, 0.18);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 1.4rem 4rem rgba(44, 61, 99, 0.2);
}

.nav-menu nav a {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border-radius: 0.8rem;
  color: #2f3950;
  font-size: 0.82rem;
  font-weight: 650;
}

.nav-menu nav a:hover,
.nav-menu nav a:focus-visible {
  background: #f1f5fc;
}

.scope-dialog-note {
  padding: 1rem 1.1rem;
  border-left: 3px solid #9a7fe1;
  color: #4e5870 !important;
  background: #f3f0fb;
  font-size: 0.82rem !important;
}

@media (max-width: 1100px) {
  .site-header {
    grid-template-columns: 1fr auto auto;
    gap: 0.65rem;
  }

  .nav-menu {
    display: block;
  }

  .hero {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-content: initial;
    padding-top: 7.2rem;
    padding-bottom: 4.5rem;
  }

              }

@media (max-width: 700px) {
  .site-header {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .nav-action {
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    font-size: .8125rem;
  }

  .hero {
    padding-top: 6.4rem;
  }

              }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .closing-orbit {
    transform: none !important;
  }
}

@media (min-width: 860px) {
  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] {
    align-content: start;
    padding-top: calc(var(--hero-header-height) + 12vh);
  }

        .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .hero-copy .quiet-label,
  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] h1,
  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .hero-story-body,
  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .hero-support,
  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .hero-actions,
  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .hero-safety {
    width: min(39rem, calc(42vw - var(--page-pad)));
  }

  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .quiet-label {
    margin-bottom: 1.1875rem;
  }

  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] h1 {
    font-size: clamp(2.4375rem, 5.25vw, 5rem);
    line-height: 0.98;
  }

      .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .button {
    min-height: 3.1rem;
    padding: 0.82rem 1.12rem;
    font-size: clamp(.8125rem, 1.04vw, 0.9375rem);
  }

  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .button-quiet {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(100deg, #6679ea 0%, #b94eba 100%);
    box-shadow: 0 0.9rem 2.2rem rgba(102, 76, 191, 0.2);
  }

  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .button-quiet:hover,
  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .button-quiet:focus-visible {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(100deg, #596fe5 0%, #ad42b2 100%);
    box-shadow: 0 1rem 2.5rem rgba(91, 69, 186, 0.28);
  }

  }

@media (min-width: 860px) and (max-width: 1100px) {
  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] {
    padding-top: calc(var(--hero-header-height) + 9vh);
  }

  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .hero-copy .quiet-label,
  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] h1,
  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .hero-story-body,
  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .hero-support,
  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .hero-actions,
  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .hero-safety {
    width: min(27rem, calc(43vw - var(--page-pad)));
  }

  .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] h1 {
    font-size: clamp(2.4375rem, 4.7vw, 3.35rem);
  }

      .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .button {
    padding-right: 0.78rem;
    padding-left: 0.78rem;
    font-size: clamp(.8125rem, 1.05vw, .8125rem);
  }
}

@media (max-width: 859px) {
      .hero[data-hero-concept="luminous-world-039"][data-hero-variant="c2"] .button-quiet {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(100deg, #6679ea 0%, #b94eba 100%);
    box-shadow: 0 0.85rem 2rem rgba(102, 76, 191, 0.18);
  }

  }

:root {
  --lower-pearl: #f7faff;
  --lower-paper: #ffffff;
  --lower-ink: #0a1730;
  --lower-muted: #59677f;
  --lower-line: rgba(84, 112, 159, 0.17);
  --lower-glass: rgba(255, 255, 255, 0.84);
  --lower-sky: #73c7f4;
  --lower-lilac: #a98de9;
  --lower-rose: #e999c9;
}

.purpose,
.journey,
.product {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--lower-ink);
}

.journey {
  background:
    radial-gradient(ellipse at 8% 24%, rgba(115, 199, 244, 0.18), transparent 33rem),
    radial-gradient(ellipse at 92% 64%, rgba(233, 153, 201, 0.14), transparent 34rem),
    radial-gradient(ellipse at 52% 100%, rgba(169, 141, 233, 0.1), transparent 38rem),
    linear-gradient(180deg, var(--lower-pearl), #ffffff 54%, #fbfaff);
}

.product {
  display: grid;
  grid-template-columns: minmax(20rem, 0.72fr) minmax(34rem, 1.28fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
  background:
    radial-gradient(circle at 4% 20%, rgba(115, 199, 244, 0.15), transparent 29rem),
    radial-gradient(circle at 96% 84%, rgba(233, 153, 201, 0.12), transparent 31rem),
    linear-gradient(180deg, #fbfaff, var(--lower-pearl));
}

.closing-orbit {
  width: min(54vw, 38rem);
  animation: none;
}

#main-content:focus {
  outline: none;
}

html.lower-motion-ready .lower-reveal {
  opacity: 1;
  transform: translateY(0.75rem);
}

html.lower-motion-ready .lower-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 520ms ease,
    transform 520ms var(--ease-expo);
}

@media (max-width: 1100px) {
  .purpose-layout,
  .product {
    grid-template-columns: 1fr;
  }

            }

@media (max-width: 700px) {
  .purpose,
  .journey,
  .product {
    padding-right: 1.15rem;
    padding-left: 1.15rem;
  }

                    .product {
    gap: 3.5rem;
  }

              }

@media (prefers-reduced-motion: reduce) {
  html.lower-motion-ready .lower-reveal,
  html.lower-motion-ready .lower-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .closing-orbit,
  .journey-lightline,
  .purpose-ribbon {
    animation: none !important;
    transform: none !important;
  }
}

.site-header > .wordmark:focus-visible {
  outline: 3px solid rgba(63, 145, 238, 0.48);
  outline-offset: 0.45rem;
  border-radius: 0.2rem;
}

.hero h1 {
  font-size: clamp(3.15rem, 5.45vw, 6.05rem);
}

@media (min-width: 860px) {
  .hero {
    min-height: min(61rem, 100svh);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    align-content: initial;
    padding-top: clamp(5.6rem, 10vh, 7rem);
    padding-bottom: clamp(1.6rem, 3.5vh, 2.5rem);
  }

          .hero-copy .quiet-label,
  .hero h1,
  .hero-story-body,
  .hero-support,
  .hero-copy .hero-actions {
    width: min(42rem, 46vw);
  }

        }

@media (min-width: 860px) and (max-width: 1100px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(0.7rem, 1.5vw, 1.1rem);
    padding: 1.05rem clamp(1.25rem, 3vw, 2rem);
  }

  .site-header > .wordmark {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    font-size: 0.94rem;
    letter-spacing: 0.28em;
    white-space: nowrap;
  }

  .main-nav {
    justify-self: center;
    display: flex;
    gap: clamp(0.65rem, 1.5vw, 1.1rem);
    font-size: clamp(.8125rem, 1.08vw, .8125rem);
    white-space: nowrap;
  }

  .main-nav a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }

  .nav-menu {
    display: none;
  }

  .nav-action {
    min-height: 2.75rem;
    padding: 0.58rem 0.78rem;
    font-size: .8125rem;
    white-space: nowrap;
  }

  .hero {
    min-height: 100svh;
    padding-top: clamp(4.8rem, 12vh, 5.8rem);
    padding-right: clamp(1.5rem, 4vw, 2.6rem);
    padding-bottom: clamp(1.2rem, 3vh, 1.8rem);
    padding-left: clamp(1.5rem, 4vw, 2.6rem);
  }

    .hero-copy .quiet-label,
  .hero h1,
  .hero-story-body,
  .hero-support,
  .hero-copy .hero-actions {
    width: min(29rem, 47vw);
  }

    .hero h1 {
    font-size: clamp(3.05rem, 5.85vw, 3.75rem);
    line-height: 0.91;
  }

              }

@media (min-width: 860px) {
  .site-header {
    --hero-header-height: 4.25rem;
    min-height: var(--hero-header-height);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(55, 72, 106, 0.12);
    background: rgba(255, 254, 251, 0.985);
    box-shadow: 0 0.7rem 2.4rem rgba(39, 54, 88, 0.055);
    backdrop-filter: none;
  }

  .site-header > .wordmark,
  .main-nav,
  .nav-action {
    color: #18243b;
  }

  .site-header > .wordmark,
  .main-nav a,
  .nav-action {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }

  .nav-action {
    border-color: rgba(51, 69, 106, 0.24);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 0.45rem 1.4rem rgba(56, 72, 111, 0.075);
    backdrop-filter: none;
  }

  .hero {
    --hero-header-height: 4.25rem;
    padding-top: calc(var(--hero-header-height) + clamp(1.5rem, 4.5vh, 3.2rem));
    background: #fff;
  }

  .hero::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: var(--hero-header-height);
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      #fffefb 0 42%,
      rgba(255, 254, 251, 0.995) 44%,
      rgba(255, 254, 251, 0.94) 47%,
      rgba(255, 254, 251, 0.66) 51%,
      rgba(255, 254, 251, 0.24) 54%,
      rgba(255, 254, 251, 0) 56%
    );
  }

            .hero-copy .quiet-label,
  .hero h1,
  .hero-story-body,
  .hero-support,
  .hero-copy .hero-actions {
    width: min(38rem, calc(44vw - var(--page-pad) - 1rem));
  }

    .hero h1 {
    color: #0d1931;
    font-size: clamp(3.35rem, 5.55vw, 6.15rem);
    font-weight: 370;
    line-height: 0.94;
    letter-spacing: -0.042em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92);
  }

            }

@media (min-width: 860px) and (max-width: 1100px) {
  .site-header,
  .hero {
    --hero-header-height: 4.25rem;
  }

  .site-header {
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
  }

  .hero {
    padding-top: calc(var(--hero-header-height) + clamp(0.85rem, 2.2vh, 1.4rem));
    padding-bottom: clamp(1rem, 2.4vh, 1.45rem);
  }

  .hero::before {
    background: linear-gradient(
      90deg,
      #fffefb 0 42%,
      rgba(255, 254, 251, 0.995) 44%,
      rgba(255, 254, 251, 0.94) 47%,
      rgba(255, 254, 251, 0.68) 51%,
      rgba(255, 254, 251, 0.26) 54%,
      rgba(255, 254, 251, 0) 56%
    );
  }

      .hero-copy .quiet-label,
  .hero h1,
  .hero-story-body,
  .hero-support,
  .hero-copy .hero-actions {
    width: min(27rem, calc(44vw - var(--page-pad) - 0.5rem));
  }

  .hero h1 {
    font-size: clamp(2.82rem, 5vw, 3.2rem);
    line-height: 0.93;
  }

          }

.hero[data-hero-concept="luminous-world-039"]::after,
.hero[data-hero-concept="luminous-world-039"] .hero-aurora {
  display: none;
}

@media (min-width: 860px) {
  .site-header {
    --hero-header-height: 4.25rem;
    min-height: var(--hero-header-height);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(44, 62, 101, 0.14);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 0.6rem 2rem rgba(34, 49, 82, 0.06);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  .site-header > .wordmark,
  .main-nav,
  .nav-action {
    color: #111d34;
  }

  .main-nav a,
  .nav-action,
  .site-header > .wordmark {
    min-height: 2.75rem;
  }

  .nav-action {
    padding-right: 1.3rem;
    padding-left: 1.3rem;
    border-color: rgba(49, 68, 106, 0.26);
    background: rgba(255, 255, 255, 0.82);
  }

  .hero[data-hero-concept="luminous-world-039"] {
    --hero-header-height: 4.25rem;
    min-height: max(44rem, 100svh);
    padding-top: calc(var(--hero-header-height) + clamp(1.25rem, 3.6vh, 2.8rem));
    padding-bottom: clamp(1.25rem, 3vh, 2.25rem);
    background: #fffefb;
  }

  .hero[data-hero-concept="luminous-world-039"]::before {
    top: var(--hero-header-height);
    background: linear-gradient(
      90deg,
      #fffefb 0 37%,
      rgba(255, 254, 251, 0.995) 39%,
      rgba(255, 254, 251, 0.9) 43%,
      rgba(255, 254, 251, 0.54) 47%,
      rgba(255, 254, 251, 0.12) 51%,
      rgba(255, 254, 251, 0) 54%
    );
  }

          .hero[data-hero-concept="luminous-world-039"] .hero-copy .quiet-label,
  .hero[data-hero-concept="luminous-world-039"] h1,
  .hero[data-hero-concept="luminous-world-039"] .hero-story-body,
  .hero[data-hero-concept="luminous-world-039"] .hero-support,
  .hero[data-hero-concept="luminous-world-039"] .hero-actions,
  .hero[data-hero-concept="luminous-world-039"] .hero-safety {
    width: min(35rem, calc(40vw - var(--page-pad) - 0.75rem));
  }

  .hero[data-hero-concept="luminous-world-039"] .quiet-label {
    margin-bottom: 0.9rem;
    color: #46577d;
  }

  .hero[data-hero-concept="luminous-world-039"] h1 {
    color: #0b1730;
    font-size: clamp(3.25rem, 5.2vw, 5.85rem);
    line-height: 0.93;
  }

        .hero[data-hero-concept="luminous-world-039"] .button {
    min-height: 2.9rem;
    padding: 0.76rem 1.05rem;
    font-size: .8125rem;
    white-space: nowrap;
  }

      }

@media (min-width: 860px) and (max-width: 1100px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(0.45rem, 1vw, 0.75rem);
    padding-right: clamp(1.15rem, 2.5vw, 1.7rem);
    padding-left: clamp(1.15rem, 2.5vw, 1.7rem);
  }

  .main-nav {
    display: flex;
    gap: clamp(0.55rem, 1.15vw, 0.9rem);
    font-size: clamp(.8125rem, 0.94vw, .8125rem);
  }

  .nav-menu {
    display: none;
  }

  .nav-action {
    padding-right: 0.85rem;
    padding-left: 0.85rem;
    font-size: .8125rem;
  }

  .hero[data-hero-concept="luminous-world-039"] {
    min-height: max(41rem, 100svh);
    padding-right: clamp(1.25rem, 3vw, 2rem);
    padding-left: clamp(1.25rem, 3vw, 2rem);
  }

    .hero[data-hero-concept="luminous-world-039"] .hero-copy .quiet-label,
  .hero[data-hero-concept="luminous-world-039"] h1,
  .hero[data-hero-concept="luminous-world-039"] .hero-story-body,
  .hero[data-hero-concept="luminous-world-039"] .hero-support,
  .hero[data-hero-concept="luminous-world-039"] .hero-actions,
  .hero[data-hero-concept="luminous-world-039"] .hero-safety {
    width: min(25rem, calc(42vw - var(--page-pad) - 0.35rem));
  }

  .hero[data-hero-concept="luminous-world-039"] h1 {
    font-size: clamp(2.74rem, 5vw, 3.2rem);
  }

        .hero[data-hero-concept="luminous-world-039"] .button {
    padding-right: 0.82rem;
    padding-left: 0.82rem;
    font-size: .8125rem;
  }

        }

@media (max-width: 859px) {
  .site-header {
    position: relative;
    z-index: 20;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.55rem;
    min-height: 4.25rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(44, 62, 101, 0.13);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0.5rem 1.8rem rgba(34, 49, 82, 0.05);
  }

  .site-header > .wordmark,
  .nav-menu summary,
  .nav-action {
    min-height: 2.75rem;
  }

  .site-header > .wordmark {
    display: inline-flex;
    align-items: center;
    font-size: 0.98rem;
    letter-spacing: 0.28em;
  }

  .main-nav {
    display: none;
  }

  .nav-menu {
    display: block;
  }

  .nav-action {
    padding: 0.58rem 0.82rem;
    color: #17243d;
    background: #fff;
    font-size: .8125rem;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .hero[data-hero-concept="luminous-world-039"] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 0 3.25rem;
    background: #fffefb;
  }

  .hero[data-hero-concept="luminous-world-039"]::before {
    display: none;
  }

          .hero[data-hero-concept="luminous-world-039"] .hero-copy .quiet-label,
  .hero[data-hero-concept="luminous-world-039"] h1,
  .hero[data-hero-concept="luminous-world-039"] .hero-story-body,
  .hero[data-hero-concept="luminous-world-039"] .hero-support,
  .hero[data-hero-concept="luminous-world-039"] .hero-actions,
  .hero[data-hero-concept="luminous-world-039"] .hero-path,
  .hero[data-hero-concept="luminous-world-039"] .hero-safety {
    width: 100%;
    max-width: 42rem;
  }

  .hero[data-hero-concept="luminous-world-039"] .quiet-label {
    margin-bottom: 0.8rem;
  }

  .hero[data-hero-concept="luminous-world-039"] h1 {
    font-size: clamp(2.7rem, 11.9vw, 4.75rem);
    line-height: 0.94;
  }

              }

@media (max-width: 520px) {
  .site-header {
    gap: 0.4rem;
  }

  .site-header > .wordmark {
    font-size: 0.9rem;
    letter-spacing: 0.23em;
  }

  .nav-menu summary,
  .nav-action {
    padding-right: 0.7rem;
    padding-left: 0.7rem;
    font-size: .8125rem;
  }

        .hero[data-hero-concept="luminous-world-039"] .button {
    width: 100%;
  }

    }

:root {
  --signal-navy: #071127;
  --signal-indigo: #4038d8;
  --signal-violet: #8b72ff;
  --signal-cyan: #63d8ff;
  --signal-amber: #ffbd66;
  --signal-mist: #f2f5fb;
  --signal-line: rgba(19, 35, 72, 0.14);
}

.site-header .nav-action {
  white-space: nowrap;
}

.section-pad {
  padding-block: clamp(5.5rem, 9vw, 9.5rem);
}

.purpose .quiet-label,
.journey .quiet-label,
.industry .quiet-label,
.product .quiet-label,
.safety-section .quiet-label,
.closing .quiet-label {
  font-size: 0.875rem;
}

.journey {
  position: relative;
  overflow: hidden;
  color: #f5f7ff;
  background:
    radial-gradient(circle at 15% 0%, rgba(73, 87, 225, 0.33), transparent 33rem),
    radial-gradient(circle at 90% 80%, rgba(99, 216, 255, 0.12), transparent 32rem),
    var(--signal-navy);
}

.journey::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: linear-gradient(to bottom, black, transparent 74%);
}


.industry {
  color: #15213b;
  background: #f6f3ed;
}

.product {
  display: block;
  padding-inline: var(--page-pad);
  color: #17223d;
  background:
    linear-gradient(rgba(72, 85, 131, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 85, 131, 0.055) 1px, transparent 1px),
    #f3f6fb;
  background-size: 4rem 4rem;
}

.control-nav button:focus-visible,
.control-panel:focus-visible,
.button:focus-visible,
.text-link:focus-visible,
.nav-action:focus-visible {
  outline: 3px solid #4b88f1;
  outline-offset: 3px;
}

@media (max-width: 780px) {
  .section-pad {
    padding-block: 5rem;
  }

                                }

@media (max-width: 520px) {
  .site-header .nav-action {
    max-width: 7rem;
    line-height: 1.1;
    white-space: normal;
  }

                        }

@media (forced-colors: active) {
  .outcome-card-featured,
  .industry-pill-active,
  .journey,
  .safety-section,
  .closing,
  .control-topbar {
    border: 1px solid CanvasText;
    color: CanvasText;
    background: Canvas;
  }

  .operating-path::after,
  .purpose::after,
  .journey::before {
    display: none;
  }
}

.authority-handoff {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(1.25rem, 3.5vw, 3rem);
  border: 1px solid rgba(76, 68, 181, 0.14);
  border-radius: clamp(1.5rem, 3vw, 2.6rem);
  background: linear-gradient(132deg, rgba(232, 249, 255, 0.94), rgba(242, 238, 255, 0.94) 52%, rgba(255, 241, 235, 0.92));
  box-shadow: 0 2rem 6rem rgba(58, 69, 117, 0.1);
  scroll-margin-top: 5.5rem;
}
.authority-heading { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 0.55fr); gap: 1.5rem 4rem; align-items: end; }
.authority-heading p,
.authority-heading h2 { margin: 0; }
.authority-heading > div > p { color: #5044bd; font-size: .8125rem; font-weight: 820; letter-spacing: 0.12em; }
.authority-heading h2 { max-width: 17ch; margin-top: 0.42rem; font-family: var(--display); font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 650; line-height: 0.98; letter-spacing: -0.05em; }
.authority-heading > p { max-width: 41ch; color: #59647d; font-size: 0.92rem; line-height: 1.58; }
.authority-state { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; border: 1px solid rgba(54, 63, 99, 0.11); border-radius: 1.2rem; background: rgba(255, 255, 255, 0.76); }
.authority-state-mark { width: 0.82rem; aspect-ratio: 1; border: 0.2rem solid rgba(78, 67, 190, 0.18); border-top-color: #5044bd; border-radius: 50%; animation: sports-state-spin 900ms linear infinite; }
.authority-state:not([data-authority-state="loading"]) .authority-state-mark { border: 0; background: #3aa6ca; box-shadow: 0 0 0 0.33rem rgba(58, 166, 202, 0.15); animation: none; }
.authority-state[data-authority-state="unauthenticated"] .authority-state-mark,
.authority-state[data-authority-state="selection-required"] .authority-state-mark,
.authority-state[data-authority-state="no-location"] .authority-state-mark { background: #d9895f; box-shadow: 0 0 0 0.33rem rgba(217, 137, 95, 0.15); }
.authority-state[data-authority-state="forbidden"] .authority-state-mark,
.authority-state[data-authority-state="incompatible"] .authority-state-mark,
.authority-state[data-authority-state="error"] .authority-state-mark { background: #c65c73; box-shadow: 0 0 0 0.33rem rgba(198, 92, 115, 0.15); }
.authority-state p,
.authority-state h3 { margin: 0; }
.authority-state [data-authority-label] { color: #5044bd; font-size: .8125rem; font-weight: 820; letter-spacing: 0.11em; }
.authority-state h3 { margin-top: 0.22rem; font-size: clamp(1.08rem, 1.6vw, 1.35rem); letter-spacing: -0.025em; }
.authority-state [data-authority-copy] { margin-top: 0.2rem; color: #626d84; font-size: 0.84rem; line-height: 1.48; }
.authority-state button { min-height: 2.8rem; padding: 0.65rem 0.95rem; border: 0; border-radius: 999px; color: white; background: #111a34; font: inherit; font-size: 0.82rem; font-weight: 760; cursor: pointer; }
.authority-state button:focus-visible { outline: 3px solid #4f8cff; outline-offset: 3px; }
.authority-summary { display: grid; grid-template-columns: minmax(13rem, 0.72fr) minmax(18rem, 1.1fr) minmax(15rem, 0.8fr); gap: 1rem; }
.authority-summary > * { min-width: 0; padding: 1.1rem; border: 1px solid rgba(54, 63, 99, 0.1); border-radius: 1.15rem; background: rgba(255, 255, 255, 0.68); }
.authority-summary-lead span,
.authority-permissions > p { color: #5044bd; font-size: .8125rem; font-weight: 820; letter-spacing: 0.1em; }
.authority-summary-lead h3 { margin: 0.55rem 0 0.28rem; font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -0.035em; }
.authority-summary-lead p { margin: 0; color: #626d84; font-size: 0.84rem; line-height: 1.48; }
.authority-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; margin: 0; }
.authority-summary dl div { min-width: 0; }
.authority-summary dt { color: #6a748a; font-size: .8125rem; font-weight: 720; }
.authority-summary dd { overflow-wrap: anywhere; margin: 0.2rem 0 0; color: #17213c; font-size: 0.83rem; font-weight: 780; }
.authority-permissions > p { margin: 0; }
.authority-permissions ul { display: grid; gap: 0.38rem; margin: 0.62rem 0 0; padding: 0; list-style: none; }
.authority-permissions li { overflow-wrap: anywhere; color: #4f5972; font-size: .8125rem; line-height: 1.35; }
.authority-boundary { margin: 0; color: #5d6780; font-size: .8125rem; line-height: 1.5; }

.sports-authority-handoff { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; margin-top: 1rem; padding: clamp(1.2rem, 2.8vw, 2rem); border: 1px solid rgba(74, 64, 181, 0.13); border-radius: 1.4rem; background: #111a34; color: white; }
.sports-authority-handoff p,
.sports-authority-handoff h2 { margin: 0; }
.sports-authority-handoff > div > p:first-child { color: #a8e8ff; font-size: .8125rem; font-weight: 820; letter-spacing: 0.11em; }
.sports-authority-handoff h2 { max-width: 24ch; margin-top: 0.4rem; font-size: clamp(1.35rem, 2.5vw, 2.2rem); line-height: 1.04; letter-spacing: -0.035em; }
.sports-authority-handoff h2 + p { max-width: 50ch; margin-top: 0.55rem; color: rgba(239, 244, 255, 0.72); font-size: 0.82rem; line-height: 1.5; }
.sports-authority-handoff .button { flex: 0 0 auto; min-width: 13rem; justify-content: space-between; text-decoration: none; }

@media (max-width: 900px) {
  .authority-summary { grid-template-columns: 1fr 1fr; }
  .authority-permissions { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .authority-heading,
  .authority-summary { grid-template-columns: 1fr; }
  .authority-permissions { grid-column: 1; }
  .authority-state { grid-template-columns: auto minmax(0, 1fr); }
  .authority-state button { grid-column: 1 / -1; width: 100%; }
  .sports-authority-handoff { align-items: stretch; flex-direction: column; }
  .sports-authority-handoff .button { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .authority-state-mark { animation: none; }
}

@media (forced-colors: active) {
  .authority-handoff,
  .authority-state,
  .authority-summary > *,
  .sports-authority-handoff { border: 1px solid CanvasText; color: CanvasText; background: Canvas; }
}

:root {
  --sports-ink: #14213f;
  --sports-copy: #39455f;
  --sports-line: rgba(55, 76, 132, 0.13);
  --sports-pearl: #fbfdff;
  --sports-sky: #e7f7ff;
  --sports-violet: #eeeaff;
  --sports-coral: #fff0e8;
  --sports-blue: #4b65e8;
  --sports-cyan: #62d8f4;
  --sports-warm: #ff9f7a;
}

.site-header {
  top: clamp(0.65rem, 1.3vw, 1rem);
  left: var(--page-pad);
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: calc(100% - (2 * var(--page-pad)));
  min-height: 4.1rem;
  padding: 0.52rem 0.62rem 0.52rem 1.2rem;
  border: 1px solid rgba(74, 93, 146, 0.14);
  border-radius: 999px;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.88), rgba(247, 250, 255, 0.72));
  box-shadow: 0 1.1rem 3.2rem rgba(40, 61, 106, 0.12), inset 0 1px rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(1.2);
}

.site-header::after {
  content: "";
  position: absolute;
  right: 8rem;
  bottom: -1px;
  left: 8rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8a78ff, #6dddf6, #ffae8c, transparent);
  opacity: 0.58;
  pointer-events: none;
}

.site-header > .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1rem;
  letter-spacing: 0.32em;
}

.main-nav {
  justify-self: center;
  gap: 0.18rem;
  padding: 0.26rem;
  border: 1px solid rgba(65, 83, 132, 0.08);
  border-radius: 999px;
  background: rgba(239, 245, 255, 0.55);
}

.main-nav a {
  padding: 0.58rem 0.78rem;
  border-radius: 999px;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.main-nav a::after {
  display: none;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: #2f3394;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.45rem 1.2rem rgba(64, 80, 132, 0.08);
}

.site-header .nav-action {
  min-height: 3rem;
  padding-inline: 1.05rem;
  border-color: rgba(81, 87, 183, 0.17);
  color: #30398d;
  background: linear-gradient(135deg, #ffffff, #eef2ff 58%, #e8faff);
  box-shadow: 0 0.7rem 1.8rem rgba(61, 75, 138, 0.1);
}

.purpose,
.journey,
.industry,
.product,
.safety-section,
.closing {
  color: var(--sports-ink);
}

.journey {
  background:
    radial-gradient(circle at 7% 8%, rgba(121, 108, 255, 0.19), transparent 31rem),
    radial-gradient(circle at 93% 84%, rgba(91, 216, 244, 0.23), transparent 32rem),
    linear-gradient(150deg, #f5f3ff, #eef8ff 54%, #f9fdff);
}

.journey::before {
  opacity: 0.28;
  background-image: linear-gradient(rgba(71, 89, 151, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(71, 89, 151, 0.06) 1px, transparent 1px);
}

.industry {
  background:
    radial-gradient(circle at 94% 6%, rgba(95, 215, 244, 0.25), transparent 30rem),
    radial-gradient(circle at 5% 96%, rgba(255, 159, 122, 0.17), transparent 27rem),
    linear-gradient(145deg, #f9fdff, #f6f3ff 58%, #edfaff);
}

.sports-taxonomy {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding: 0.75rem;
  border: 1px solid var(--sports-line);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 1.4rem 3.5rem rgba(49, 68, 112, 0.08);
}

.sports-taxonomy > div {
  padding: 1.2rem 1.3rem;
  border: 1px solid rgba(68, 82, 139, 0.1);
  border-radius: 1rem;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(238, 246, 255, 0.78));
}

.sports-taxonomy > div:nth-child(2) {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(244, 239, 255, 0.82));
}

.sports-taxonomy span {
  color: #534ab7;
  font-size: .8125rem;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sports-taxonomy p {
  margin: 0.65rem 0 0;
  color: #374661;
  font-size: 0.96rem;
  line-height: 1.65;
}

.sports-taxonomy small {
  grid-column: 1 / -1;
  padding: 0.45rem 0.65rem 0.15rem;
  color: #68748a;
  font-size: .8125rem;
}

.product {
  background:
    radial-gradient(circle at 91% 6%, rgba(96, 217, 244, 0.22), transparent 31rem),
    radial-gradient(circle at 6% 75%, rgba(133, 112, 255, 0.14), transparent 34rem),
    linear-gradient(rgba(72, 85, 131, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 85, 131, 0.035) 1px, transparent 1px),
    linear-gradient(145deg, #f4f3ff, #f0f9ff 55%, #fbfdff);
  background-size: auto, auto, 4rem 4rem, 4rem 4rem, auto;
}

@media (max-width: 1120px) {
  .main-nav {
    display: none;
  }

  .nav-menu {
    display: block;
  }

  .site-header {
    grid-template-columns: 1fr auto auto;
    gap: 0.55rem;
  }

  }

@media (max-width: 780px) {
                      .site-header {
    top: 0.55rem;
    left: 0.65rem;
    width: calc(100% - 1.3rem);
    min-height: 3.65rem;
    padding: 0.4rem 0.45rem 0.4rem 0.82rem;
  }

  .site-header::after {
    right: 3.5rem;
    left: 3.5rem;
  }

  .site-header .nav-action {
    min-height: 2.65rem;
    padding-inline: 0.76rem;
    font-size: .8125rem;
  }

              .sports-taxonomy {
    grid-template-columns: 1fr;
  }

  .sports-taxonomy small {
    grid-column: 1;
  }
}

@media (max-width: 520px) {
  .site-header .nav-action {
    display: none;
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }

          }

@media (forced-colors: active) {
  .site-header,
.purpose .lower-shell,
.sports-taxonomy,
.sports-taxonomy > div,
.safety-layout > div:first-child {
    border: 1px solid CanvasText;
    color: CanvasText;
    background: Canvas;
  }

  .galaxy-stage::before,
  .galaxy-stage::after,
  .site-header::after,
  .purpose-promise::after {
    display: none;
  }
}

.journey {
  background:
    radial-gradient(circle at 8% 0%, rgba(90, 100, 255, 0.42), transparent 34rem),
    radial-gradient(circle at 92% 82%, rgba(71, 213, 255, 0.2), transparent 34rem),
    linear-gradient(145deg, #071227 0%, #0b1834 52%, #102746 100%);
}

.journey::after {
  content: "";
  position: absolute;
  width: 22rem;
  aspect-ratio: 1;
  right: -8rem;
  top: -9rem;
  border: 1px solid rgba(143, 225, 255, 0.14);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(126, 108, 255, 0.04), 0 0 0 8rem rgba(98, 215, 255, 0.025);
  pointer-events: none;
}

.industry {
  background:
    radial-gradient(circle at 94% 8%, rgba(83, 205, 255, 0.23), transparent 29rem),
    radial-gradient(circle at 6% 96%, rgba(255, 181, 106, 0.2), transparent 28rem),
    linear-gradient(145deg, #fffdf8, #f4f8ff 58%, #eefbff);
}

.product {
  background:
    radial-gradient(circle at 90% 10%, rgba(91, 213, 255, 0.2), transparent 32rem),
    radial-gradient(circle at 5% 70%, rgba(133, 104, 255, 0.12), transparent 34rem),
    linear-gradient(rgba(72, 85, 131, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 85, 131, 0.045) 1px, transparent 1px),
    #f6f9ff;
  background-size: auto, auto, 4rem 4rem, 4rem 4rem, auto;
}

@media (forced-colors: active) {
    .purpose::before,
  .outcome-card::before,
  .outcome-result::before,
  .journey::after,
  .closing::before {
    display: none;
  }
}

body .journey {
  color: var(--sports-ink);
  background:
    radial-gradient(circle at 7% 8%, rgba(121, 108, 255, 0.19), transparent 31rem),
    radial-gradient(circle at 93% 84%, rgba(91, 216, 244, 0.23), transparent 32rem),
    linear-gradient(150deg, #f5f3ff, #eef8ff 54%, #f9fdff);
}

body .journey::before {
  opacity: 0.28;
  background-image: linear-gradient(rgba(71, 89, 151, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(71, 89, 151, 0.06) 1px, transparent 1px);
}

body .industry {
  background:
    radial-gradient(circle at 94% 6%, rgba(95, 215, 244, 0.25), transparent 30rem),
    radial-gradient(circle at 5% 96%, rgba(255, 159, 122, 0.17), transparent 27rem),
    linear-gradient(145deg, #f9fdff, #f6f3ff 58%, #edfaff);
}

body .product {
  background:
    radial-gradient(circle at 91% 6%, rgba(96, 217, 244, 0.22), transparent 31rem),
    radial-gradient(circle at 6% 75%, rgba(133, 112, 255, 0.14), transparent 34rem),
    linear-gradient(rgba(72, 85, 131, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 85, 131, 0.035) 1px, transparent 1px),
    linear-gradient(145deg, #f4f3ff, #f0f9ff 55%, #fbfdff);
  background-size: auto, auto, 4rem 4rem, 4rem 4rem, auto;
}

:root {
  --editorial-display: "Aptos Display", "Segoe UI Variable Display", "Helvetica Neue", Arial, sans-serif;
  --editorial-body: "Aptos", "Segoe UI Variable Text", "Helvetica Neue", Arial, sans-serif;
}

body .purpose,
body .journey,
body .industry,
body .product,
body .safety-section,
body .closing {
  font-family: var(--editorial-body);
}

body .purpose .quiet-label,
body .journey .quiet-label,
body .industry .quiet-label,
body .product .quiet-label,
body .safety-section .quiet-label,
body .closing .quiet-label {
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
  width: max-content;
  max-width: 100%;
  min-height: 2rem;
  margin-bottom: 0;
  padding: 0.38rem 0.68rem;
  border: 1px solid rgba(81, 76, 184, 0.14);
  border-radius: 999px;
  color: #4c47a8;
  background: rgba(255, 255, 255, 0.68);
  font-size: .8125rem;
  font-weight: 760;
  letter-spacing: 0.105em;
  line-height: 1.25;
  text-transform: uppercase;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9);
}

body .purpose .quiet-label::before,
body .journey .quiet-label::before,
body .industry .quiet-label::before,
body .product .quiet-label::before,
body .safety-section .quiet-label::before,
body .closing .quiet-label::before {
  content: "";
  flex: 0 0 auto;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #5e65e9, #67d9ef);
  box-shadow: 0 0 0 0.22rem rgba(100, 208, 235, 0.12);
}

body .sports-image-overview {
  display: block;
  width: 100%;
  height: auto;
}

body .sports-scene-stack {
  display: none;
}

body .sports-image-key {
  position: absolute;
  z-index: 2;
  right: 1.25rem;
  bottom: 3.25rem;
  left: 1.25rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body .sports-image-key li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.55rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 0.72rem;
  color: #182543;
  background: rgba(255, 255, 255, 0.82);
  font-size: .8125rem;
  font-weight: 720;
  backdrop-filter: blur(12px);
}

body .sports-image-key span {
  color: #534ab7;
  font-size: .8125rem;
  letter-spacing: 0.05em;
}

body .sports-taxonomy {
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  gap: 0;
  margin-top: 0.75rem;
  padding: 0;
  border-radius: 1.1rem;
  overflow: hidden;
}

body .sports-taxonomy > div {
  padding: 1.25rem 1.35rem;
  border: 0;
  border-radius: 0;
}

body .sports-taxonomy > div + div {
  border-left: 1px solid rgba(68, 82, 139, 0.1);
}

body .sports-taxonomy span {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.28rem 0.5rem;
  border-radius: 0.48rem;
  background: rgba(237, 237, 255, 0.76);
  font-size: .8125rem;
  letter-spacing: 0.085em;
}

body .sports-taxonomy p {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.58;
}

body .sports-taxonomy small {
  padding: 0.7rem 1.1rem;
  border-top: 1px solid rgba(68, 82, 139, 0.1);
  background: rgba(255, 255, 255, 0.52);
  font-size: .8125rem;
}

@media (max-width: 780px) {
  body .purpose .purpose-copy,
  body .journey-heading,
  body .industry-heading,
  body .product-copy,
  body .material-guide,
  body .sports-taxonomy {
    grid-template-columns: 1fr;
  }

          body .sports-image-overview,
  body .sports-image-key {
    display: none;
  }

  body .sports-scene-stack {
    grid-area: scenes;
    display: grid;
    gap: 0.6rem;
  }

  body .sports-scene {
    position: relative;
    min-height: clamp(10.5rem, 48vw, 14rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.84);
    border-radius: 0.9rem;
    background-color: #e7f7ff;
    background-image: url("assets/binari-sports-energy-053d.webp");
    background-repeat: no-repeat;
    box-shadow: 0 0.8rem 1.8rem rgba(39, 65, 104, 0.09);
  }

  body .sports-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 54%, rgba(22, 36, 65, 0.26));
    pointer-events: none;
  }

  body .sports-scene-soccer {
    background-size: 390% auto;
    background-position: 0% 50%;
  }

  body .sports-scene-swimming {
    background-size: 430% auto;
    background-position: 34% 50%;
  }

  body .sports-scene-tennis {
    background-size: 410% auto;
    background-position: 67% 50%;
  }

  body .sports-scene-martial {
    background-size: 360% auto;
    background-position: 100% 50%;
  }

  body .sports-scene > span {
    position: absolute;
    z-index: 2;
    right: 0.7rem;
    bottom: 0.65rem;
    left: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 720;
    letter-spacing: -0.01em;
  }

  body .sports-scene small {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 0.48rem;
    background: rgba(26, 37, 81, 0.36);
    font-size: .8125rem;
    letter-spacing: 0.04em;
    backdrop-filter: blur(8px);
  }

          body .material-guide ol,
  body .material-guide .text-link,
  body .sports-taxonomy small {
    grid-column: 1;
  }

  body .sports-taxonomy > div + div {
    border-top: 1px solid rgba(68, 82, 139, 0.1);
    border-left: 0;
  }

  }

@media (max-width: 520px) {
  body .purpose .quiet-label,
  body .journey .quiet-label,
  body .industry .quiet-label,
  body .product .quiet-label,
  body .safety-section .quiet-label,
  body .closing .quiet-label {
    white-space: normal;
  }

            }

@media (forced-colors: active) {
  body .sports-scene {
    border: 1px solid CanvasText;
    color: CanvasText;
    background: Canvas;
  }
}

.brand-shell {
  width: min(100%, 100rem);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.brand-eyebrow {
  margin: 0;
  color: #5143d9;
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.25;
  letter-spacing: 0.18em;
}

.brand-statement h2,
.brand-feature-copy h2,
.channel-heading h2,
.start-story-copy h2,
.brand-boundary h2,
.brand-closing h2 {
  margin: 0;
  font-family: var(--body);
  font-weight: 690;
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.brand-closing {
  display: grid;
  place-items: center;
  min-height: 43rem;
  padding-inline: var(--page-pad);
  color: #fff;
  background:
    radial-gradient(circle at 20% 15%, rgba(116, 225, 255, 0.78), transparent 28rem),
    radial-gradient(circle at 85% 76%, rgba(255, 145, 208, 0.58), transparent 30rem),
    linear-gradient(135deg, #3348d5, #6b4bd9 53%, #c250a7);
  text-align: center;
}

.brand-closing .brand-eyebrow {
  color: #d5f7ff;
}

.brand-closing h2 {
  max-width: 13ch;
  font-size: clamp(3rem, 6.7vw, 7rem);
  line-height: 0.92;
}

.brand-closing .button {
  margin-block: 0.5rem;
  color: #18203c;
  background: #fff;
}

.brand-closing > span {
  color: rgba(255, 255, 255, 0.68);
  font-size: .8125rem;
  letter-spacing: 0.04em;
}

.site-header .nav-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.start-page {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 88% 5%, rgba(117, 221, 255, 0.32), transparent 26rem),
    radial-gradient(circle at 8% 40%, rgba(238, 143, 213, 0.18), transparent 28rem),
    #f6f7fd;
}

.start-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5rem;
  padding-inline: var(--page-pad);
  border-bottom: 1px solid rgba(26, 36, 70, 0.09);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(1rem);
}

.start-header .wordmark,
.start-footer .wordmark {
  font-family: var(--body);
  font-size: 1.15rem;
  font-weight: 670;
  letter-spacing: 0.4em;
}

.start-main {
  width: min(100%, 100rem);
  margin-inline: auto;
  padding: clamp(3.5rem, 7vw, 7rem) var(--page-pad) clamp(5rem, 9vw, 9rem);
}

.start-workspace,
.start-summary {
  border: 1px solid rgba(39, 51, 96, 0.1);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2rem 6rem rgba(62, 72, 122, 0.1);
  backdrop-filter: blur(1.2rem);
}

.start-workspace {
  overflow: hidden;
  border-radius: 2.8rem;
}

.start-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: #101935;
}

.start-progress li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 5rem;
  padding: 1rem clamp(1rem, 2.5vw, 2rem);
  color: rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.start-progress li:last-child {
  border-right: 0;
}

.start-progress li[data-state="current"] {
  color: #fff;
  background: linear-gradient(115deg, rgba(80, 91, 226, 0.92), rgba(163, 87, 207, 0.86));
}

.start-progress li[data-state="complete"] {
  color: #c8f3ff;
}

.start-progress span {
  font-size: .8125rem;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.start-progress strong {
  font-size: 0.9rem;
}

.start-boundary {
  margin: 0;
  padding: 1rem clamp(1.25rem, 3vw, 2.5rem);
  color: #47516a;
  background: #edf9ff;
  font-size: 0.86rem;
  line-height: 1.5;
}

.start-field {
  display: grid;
  gap: 0.55rem;
  color: #26304d;
  font-size: 0.88rem;
  font-weight: 700;
}

.start-field input,
.start-field select {
  width: 100%;
  min-height: 3.4rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(35, 49, 94, 0.17);
  border-radius: 1rem;
  color: #151d38;
  background: rgba(248, 250, 255, 0.88);
  font-size: 1rem;
}

.start-field input:focus,
.start-field select:focus {
  border-color: #5c50d9;
  outline: 3px solid rgba(92, 80, 217, 0.16);
}

@media (max-width: 780px) {
                        .start-progress strong {
    display: none;
  }

  .start-progress li {
    justify-content: center;
  }

    }

@media (max-width: 540px) {
  .brand-statement h2,
  .brand-feature-copy h2,
  .channel-heading h2,
  .start-story-copy h2,
  .brand-boundary h2,
  .brand-closing h2,
  .start-hero h1 {
    letter-spacing: -0.052em;
  }

                .brand-closing {
    min-height: 38rem;
  }

  .start-header,
  .start-footer {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-block: 1.5rem;
  }

  .start-main {
    padding-top: 3rem;
  }

  .start-workspace {
    border-radius: 1.6rem;
  }

        }

@media (forced-colors: active) {
  .brand-photo,
  .brand-pillars article,
  .channel-stage,
  .channel-card,
  .channel-center,
  .boundary-points article,
  .start-workspace,
  .start-summary,
  .platform-option > span,
  .membership-option > span {
    border: 1px solid CanvasText;
  }
}


.intake {
  color: var(--sports-ink);
  background:
    radial-gradient(circle at 9% 10%, rgba(126, 111, 255, 0.17), transparent 30rem),
    radial-gradient(circle at 92% 78%, rgba(88, 214, 241, 0.2), transparent 32rem),
    linear-gradient(145deg, #f7f5ff, #eef9ff 56%, #fbfdff);
  font-family: var(--editorial-body);
}

.intake .quiet-label {
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
  width: max-content;
  max-width: 100%;
  min-height: 2rem;
  margin: 0;
  padding: 0.38rem 0.68rem;
  border: 1px solid rgba(81, 76, 184, 0.14);
  border-radius: 999px;
  color: #4c47a8;
  background: rgba(255, 255, 255, 0.68);
  font-size: .8125rem;
  font-weight: 760;
  letter-spacing: 0.105em;
  line-height: 1.25;
  text-transform: uppercase;
}

.intake .quiet-label::before {
  content: "";
  flex: 0 0 auto;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #5e65e9, #67d9ef);
}

.field-wide {
  grid-column: 1 / -1;
}

.field {
  display: grid;
  align-content: start;
  gap: 0.42rem;
  min-width: 0;
  color: #33415d;
}

.field > span,
.choice-group > legend {
  color: #4b5871;
  font-size: .8125rem;
  font-weight: 740;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.68rem 0.78rem;
  border: 1px solid rgba(59, 76, 128, 0.16);
  border-radius: 0.7rem;
  color: #182541;
  background: rgba(249, 252, 255, 0.92);
  font: 500 0.91rem/1.4 var(--editorial-body);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.field textarea {
  min-height: 5.4rem;
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.choice-group input:focus-visible,
.booking-mode-list input:focus-visible,
.rights-check input:focus-visible,
.media-drop input:focus-visible {
  border-color: #6259d8;
  box-shadow: 0 0 0 0.22rem rgba(98, 89, 216, 0.15);
}

.field input[aria-invalid="true"] {
  border-color: #b94d54;
  background: #fff8f8;
  box-shadow: 0 0 0 0.2rem rgba(185, 77, 84, 0.11);
}

.field > small {
  color: #758198;
  font-size: .8125rem;
}

.choice-group label,
.rights-check {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(70, 82, 139, 0.11);
  border-radius: 0.62rem;
  background: rgba(255, 255, 255, 0.74);
  font-size: .8125rem;
}

.choice-group input,
.rights-check input,
.booking-mode-list input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #5b56d7;
}

.rights-check {
  align-items: start;
  margin: 0.75rem 0;
}

.rights-check > span {
  display: grid;
  gap: 0.18rem;
  color: #556178;
  line-height: 1.45;
}

.rights-check strong {
  color: #283755;
}

@media (max-width: 780px) {
        .field-wide,
  .payment-boundary,
  .intake-submit {
    grid-column: 1;
  }

    }

:root {
  --h-ink: #111a33;
  --h-muted: #5c6880;
  --h-blue: #73cfff;
  --h-violet: #8f7cf4;
  --h-coral: #ff9d82;
  --h-mint: #92e3c5;
  --h-night: #0d1832;
  --h-line: rgba(26, 42, 79, 0.12);
}

.brand-shell,
.showcase-shell {
  width: min(100% - (2 * var(--page-pad)), 104rem);
  margin-inline: auto;
}

.value-story,
.fit-story,
.goal-story,
.trust-story {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 8%, rgba(114, 211, 255, 0.18), transparent 29rem),
    radial-gradient(circle at 10% 92%, rgba(255, 166, 137, 0.12), transparent 25rem),
    #f8f9fd;
}

.value-heading,
.fit-heading,
.goal-heading,
.trust-heading,
.showcase-intro > div:first-child,
.needs-heading {
  display: grid;
  gap: 1.15rem;
}

.brand-eyebrow {
  margin: 0;
  color: #5a4bd8;
  font-size: .8125rem;
  font-weight: 780;
  line-height: 1.2;
  letter-spacing: 0.16em;
}

.value-heading h2,
.fit-heading h2,
.goal-heading h2,
.trust-heading h2,
.showcase-intro h2,
.needs-heading h2 {
  max-width: 14ch;
  margin: 0;
  color: var(--h-ink);
  font-family: var(--display);
  font-size: clamp(2.3rem, 4vw, 4.35rem);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.value-heading > p:last-of-type,
.fit-heading > p:last-of-type,
.goal-heading > p:last-of-type,
.showcase-intro > div > p:last-child,
.needs-heading > p:last-of-type {
  max-width: 35rem;
  margin: 0;
  color: var(--h-muted);
  font-size: clamp(1rem, 1.28vw, 1.18rem);
  line-height: 1.65;
}

.industry-showcase {
  position: relative;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 16% 12%, rgba(96, 203, 255, 0.18), transparent 26rem),
    radial-gradient(circle at 92% 78%, rgba(246, 146, 207, 0.16), transparent 28rem),
    var(--h-night);
}

.showcase-shell {
  display: grid;
  grid-template-columns: minmax(17rem, 0.62fr) minmax(0, 1.38fr);
  grid-template-rows: 1fr auto;
  gap: 1.5rem clamp(2rem, 5vw, 5.5rem);
  align-items: stretch;
}

.showcase-intro {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  padding-block: 0.5rem;
}

.showcase-intro .brand-eyebrow {
  color: #a9e7ff;
}

.showcase-intro h2 {
  color: white;
  font-size: clamp(2.25rem, 3.5vw, 3.85rem);
}

.showcase-intro > div > p:last-child {
  color: rgba(230, 237, 255, 0.7);
}

.rail-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.rail-controls button {
  display: grid;
  place-items: center;
  min-width: 3.2rem;
  min-height: 3.2rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: white;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.rail-controls .rail-toggle {
  min-width: 5.9rem;
  padding-inline: 1rem;
  font-size: .8125rem;
  font-weight: 720;
}

.rail-controls button:hover,
.rail-controls button:focus-visible {
  color: var(--h-night);
  background: #b9eaff;
  transform: translateY(-2px);
}

.value-rail {
  grid-column: 2;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  cursor: grab;
}

.value-rail:active { cursor: grabbing; }
.value-rail::-webkit-scrollbar { display: none; }

.value-track {
  display: flex;
  gap: 1.15rem;
  width: max-content;
  margin: 0;
  padding: 0 8vw 0 0;
  list-style: none;
}

.value-slide {
  position: relative;
  flex: 0 0 clamp(19rem, 35vw, 34rem);
  min-height: clamp(30rem, 43vw, 40rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1.6rem;
  background: #14213d;
  scroll-snap-align: start;
  box-shadow: 0 1.8rem 5rem rgba(0, 0, 0, 0.24);
}

.value-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(5, 10, 25, 0.1) 52%, rgba(5, 10, 25, 0.96) 100%);
}

.value-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  transition: transform 800ms var(--ease-expo), filter 500ms ease;
}

.value-slide[data-state="current"] img {
  transform: scale(1.045);
}

.value-slide > div {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 0.55rem;
  padding: clamp(1.25rem, 3vw, 2.1rem);
}

.value-slide > div > span {
  color: #b9eaff;
  font-size: .8125rem;
  font-weight: 770;
  line-height: 1.4;
  letter-spacing: 0.11em;
}

.value-slide h3,
.value-slide p { margin: 0; }
.value-slide h3 { font-size: clamp(1.55rem, 2.3vw, 2.25rem); line-height: 1.08; letter-spacing: -0.025em; }
.value-slide p { max-width: 31rem; color: rgba(238, 243, 255, 0.78); font-size: 1rem; line-height: 1.5; }

.rail-footer {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.rail-position {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin: 0;
  color: rgba(255,255,255,0.52);
  font-size: .8125rem;
}

.rail-position strong { color: white; font-size: 1.45rem; }
.rail-dots { display: flex; gap: 0.45rem; }
.rail-dots button {
  width: 1.65rem;
  height: 0.35rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
  cursor: pointer;
  transition: width 220ms ease, background 220ms ease;
}
.rail-dots button[aria-current="true"] { width: 3.4rem; background: #a9e7ff; }

.brand-closing h2 {
  max-width: 16ch;
  font-size: clamp(2.6rem, 5.4vw, 5.8rem);
  line-height: 0.96;
}

.preview-boundary-link {
  width: fit-content;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.48);
  color: rgba(255,255,255,0.72);
  background: transparent;
  font-size: .8125rem;
  cursor: pointer;
}

@media (max-width: 1050px) {
    .showcase-shell { grid-template-columns: minmax(15rem, 0.55fr) minmax(0, 1.45fr); gap: 1.5rem 2rem; }
  .value-slide { flex-basis: min(31rem, 72vw); }
        }

@media (max-width: 780px) {
    .value-story-grid,
  .fit-grid,
  .showcase-shell,
  .needs-grid { grid-template-columns: 1fr; }
    .showcase-intro { grid-row: auto; gap: 2rem; }
  .value-rail,
  .rail-footer { grid-column: 1; }
  .value-slide { flex-basis: min(30rem, 86vw); min-height: min(34rem, 122vw); }
          }

@media (max-width: 560px) {
  .value-heading h2,
  .fit-heading h2,
  .goal-heading h2,
  .trust-heading h2,
  .showcase-intro h2,
  .needs-heading h2 { font-size: clamp(2.05rem, 10.4vw, 3rem); }
                .rail-controls { width: 100%; }
  .rail-controls .rail-toggle { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .value-rail { scroll-behavior: auto; }
  .value-slide img,
  .brand-link span,
  .rail-controls button,
  .rail-dots button,
  .goal-grid a { transition: none; }
  .value-slide[data-state="current"] img { transform: none; }
}

@media (forced-colors: active) {
  .value-flow li,
  .value-slide,
  .fit-map,
  .fit-map article,
  .fit-map > div,
  .goal-grid a,
  .trust-grid article,
  .rail-controls button { border: 1px solid CanvasText; }
  .rail-dots button[aria-current="true"] { outline: 2px solid Highlight; }
}

.start-page {
  color: var(--h-ink);
  background:
    radial-gradient(circle at 90% 8%, rgba(112, 210, 255, 0.25), transparent 28rem),
    radial-gradient(circle at 7% 62%, rgba(247, 157, 208, 0.14), transparent 26rem),
    #f7f8fd;
}

.start-header {
  position: sticky;
  z-index: 20;
  top: 0;
  min-height: 4.5rem;
  border-bottom: 1px solid rgba(35, 47, 86, 0.08);
  background: rgba(249, 250, 254, 0.82);
  backdrop-filter: blur(20px);
}

.start-header > p {
  margin: 0;
  color: var(--h-muted);
  font-size: .8125rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.start-exit {
  display: inline-flex;
  align-items: center;
  min-height: 2.8rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(39, 53, 94, 0.14);
  border-radius: 999px;
  color: #37318f;
  background: rgba(255,255,255,0.76);
  font-size: 0.85rem;
  font-weight: 720;
}

.start-main {
  width: min(100%, 94rem);
  padding: clamp(2.75rem, 6vw, 5.5rem) var(--page-pad) clamp(5rem, 8vw, 8rem);
}

.start-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.55fr);
  gap: 2rem clamp(3rem, 8vw, 8rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.start-intro > div {
  display: grid;
  gap: 0.9rem;
}

.start-intro h1 {
  max-width: none;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.65rem, 4.8vw, 4.8rem);
  font-weight: 650;
  line-height: 0.94;
  letter-spacing: -0.058em;
}

.start-intro > p {
  max-width: 36rem;
  margin: 0;
  color: var(--h-muted);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
}

.start-workspace {
  overflow: hidden;
  border: 1px solid rgba(38, 52, 94, 0.1);
  border-radius: 2rem;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 2rem 6rem rgba(56, 68, 118, 0.11);
  backdrop-filter: blur(18px);
}

.start-progress {
  display: block;
  margin: 0;
  padding: 0;
  background: var(--h-night);
}

.start-progress ol {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.start-progress li {
  display: block;
  min-height: 0;
  padding: 0;
  border-right: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.48);
  background: transparent;
}

.start-progress li[data-state="current"] {
  color: white;
  background: linear-gradient(125deg, rgba(71, 92, 221, 0.92), rgba(150, 87, 207, 0.88));
}

.start-progress li[data-state="complete"] {
  color: #c4efff;
}

.start-progress button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 4.6rem;
  padding: 0.8rem clamp(0.65rem, 1.4vw, 1.2rem);
  border: 0;
  color: inherit;
  background: transparent;
  font-size: .8125rem;
  font-weight: 720;
  cursor: pointer;
}

.start-progress button:disabled {
  cursor: not-allowed;
}

.start-progress button span {
  color: inherit;
  font-size: .8125rem;
}

.direction-form {
  padding: clamp(1.5rem, 4vw, 3.5rem);
}

.step-panel {
  min-height: 31rem;
}

.step-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.step-heading > span {
  display: grid;
  place-items: center;
  width: 3.2rem;
  aspect-ratio: 1;
  border: 1px solid rgba(72, 61, 186, 0.14);
  border-radius: 50%;
  color: #5144c6;
  background: #f1efff;
  font-size: .8125rem;
  font-weight: 800;
}

.step-heading > div {
  display: grid;
  gap: 0.4rem;
}

.step-heading p,
.step-heading h2,
.step-heading small {
  margin: 0;
}

.step-heading p {
  color: #5548c8;
  font-size: .8125rem;
  font-weight: 790;
  letter-spacing: 0.13em;
}

.step-heading h2 {
  max-width: 22ch;
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 3.45rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.042em;
}

.step-heading small {
  color: var(--h-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.choice-grid {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-grid-three,
.choice-grid-membership {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-grid-industries {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.choice-grid-industries .choice-featured {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 22rem;
  color: white;
  background: #17213b;
}

.choice-grid-materials {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 12.3rem;
  padding: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(37, 52, 94, 0.12);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(248,250,255,0.94), rgba(255,255,255,0.9));
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.choice-card:nth-child(3n + 2) { background: linear-gradient(145deg, rgba(241,239,255,0.96), rgba(255,255,255,0.9)); }
.choice-card:nth-child(3n) { background: linear-gradient(145deg, rgba(235,248,255,0.96), rgba(255,255,255,0.9)); }
.choice-card:hover { transform: translateY(-0.2rem); box-shadow: 0 1.1rem 2.5rem rgba(54, 67, 113, 0.09); }
.choice-card:has(input:checked) { border-color: #5c4cd3; background: linear-gradient(145deg, #ebe8ff, #e8f8ff); box-shadow: inset 0 0 0 1px #5c4cd3, 0 1.1rem 2.8rem rgba(75,61,185,0.12); }

.choice-card input {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.15rem;
  height: 1.15rem;
  accent-color: #5345c8;
}

.choice-card input:focus-visible {
  outline: 3px solid #4f8cff;
  outline-offset: 3px;
}

.choice-icon {
  display: grid;
  place-items: center;
  width: 2.8rem;
  aspect-ratio: 1;
  margin-bottom: auto;
  border-radius: 0.85rem;
  color: #5144c5;
  background: rgba(255,255,255,0.84);
  font-size: 1.2rem;
  box-shadow: 0 0.7rem 1.7rem rgba(60,71,113,0.08);
}

.choice-card strong {
  max-width: 16ch;
  min-width: 0;
  margin-top: 2.1rem;
  color: inherit;
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.choice-card small {
  max-width: 25ch;
  margin-top: 0.45rem;
  color: var(--h-muted);
  font-size: 0.86rem;
  line-height: 1.46;
}

.choice-featured img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.choice-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,16,35,0.05), rgba(9,16,35,0.88));
}

.choice-featured > *:not(img) { position: relative; z-index: 1; }
.choice-featured strong { margin-top: auto; font-size: 1.7rem; }
.choice-featured small { color: rgba(240,245,255,0.76); }

.choice-badge {
  width: fit-content;
  margin-bottom: auto;
  color: #5d50c7;
  font-size: .8125rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.choice-featured .choice-badge { color: #b9eaff; }

.start-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 64rem;
}

.start-fields label {
  display: grid;
  gap: 0.5rem;
  color: #27324f;
  font-size: 0.85rem;
  font-weight: 720;
}

.start-fields .field-wide { grid-column: 1 / -1; }

.start-fields input,
.start-fields select {
  width: 100%;
  min-height: 3.6rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(37, 51, 91, 0.16);
  border-radius: 0.9rem;
  color: var(--h-ink);
  background: rgba(248,250,255,0.88);
  font-size: 1rem;
}

.start-fields input:focus,
.start-fields select:focus {
  border-color: #5b4dcd;
  outline: 3px solid rgba(91,77,205,0.15);
}

.rights-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  max-width: 62rem;
  margin-top: 1.2rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(37, 51, 91, 0.12);
  border-radius: 1rem;
  background: rgba(241,247,255,0.88);
}
.rights-check input { width: 1.2rem; height: 1.2rem; accent-color: #5144c6; }
.rights-check span { display: grid; gap: 0.25rem; }
.rights-check strong { font-size: 0.95rem; }
.rights-check small { color: var(--h-muted); font-size: 0.82rem; line-height: 1.45; }

.direction-result {
  position: relative;
  display: grid;
  grid-template-columns: minmax(14rem, 0.55fr) minmax(0, 1fr);
  align-items: center;
  min-height: 27rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 1.8rem;
  background:
    radial-gradient(circle at 18% 50%, rgba(104, 207, 255, 0.3), transparent 18rem),
    radial-gradient(circle at 78% 30%, rgba(152, 110, 237, 0.18), transparent 23rem),
    linear-gradient(145deg, #edf9ff, #f8effb);
}

.direction-orbit {
  position: relative;
  width: min(16rem, 80%);
  aspect-ratio: 1;
  margin: auto;
  border: 1px solid rgba(80,67,190,0.22);
  border-radius: 50%;
}
.direction-orbit::before,
.direction-orbit::after { content: ""; position: absolute; inset: 15%; border: 1px solid rgba(80,67,190,0.2); border-radius: 50%; transform: rotate(55deg) scaleY(0.4); }
.direction-orbit::after { transform: rotate(-42deg) scaleY(0.52); }
.direction-orbit > span { position: absolute; inset: 32%; border-radius: 50%; background: linear-gradient(145deg, #73d3ff, #8f75ed 62%, #ff9d85); box-shadow: 0 0 3rem rgba(104,150,255,0.48); }
.direction-orbit > i { position: absolute; top: 6%; left: 50%; width: 0.8rem; aspect-ratio: 1; border-radius: 50%; background: white; box-shadow: 0 0 1.2rem #8f75ed; }
.direction-copy { position: relative; z-index: 1; }
.direction-copy > p { margin: 0; color: #5547c7; font-size: .8125rem; font-weight: 800; letter-spacing: 0.13em; }
.direction-copy h3 { max-width: 16ch; margin: 0.65rem 0 1.25rem; font-size: clamp(1.9rem, 3.2vw, 3.1rem); line-height: 1; letter-spacing: -0.04em; }
.direction-copy ul { display: grid; gap: 0.55rem; margin: 0; padding-left: 1.2rem; color: var(--h-muted); line-height: 1.48; }
.direction-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.4rem; }
.direction-tags span { padding: 0.48rem 0.68rem; border: 1px solid rgba(68,61,163,0.12); border-radius: 999px; color: #48418f; background: rgba(255,255,255,0.64); font-size: .8125rem; font-weight: 700; }

.start-review {
  display: grid;
  grid-template-columns: minmax(12rem, 0.38fr) minmax(0, 1fr);
  gap: 1rem 2rem;
  margin-top: 1.5rem;
  padding: 1.35rem;
  border: 1px solid rgba(36,51,92,0.11);
  border-radius: 1.2rem;
  background: #f6f9ff;
}
.start-review p,
.start-review h3 { margin: 0; }
.start-review > div > p { color: #594dca; font-size: .8125rem; font-weight: 800; letter-spacing: 0.12em; }
.start-review h3 { margin-top: 0.4rem; font-size: 1.4rem; }
.start-review dl { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.45rem; margin: 0; }
.start-review dl > div { padding: 0.7rem; border: 1px solid rgba(36,51,92,0.08); border-radius: 0.7rem; background: rgba(255,255,255,0.74); }
.start-review dt { color: var(--h-muted); font-size: .8125rem; font-weight: 760; text-transform: uppercase; }
.start-review dd { margin: 0.2rem 0 0; color: var(--h-ink); font-size: 0.84rem; font-weight: 700; }
.start-review > p { grid-column: 1 / -1; color: var(--h-muted); font-size: .8125rem; line-height: 1.45; }

.step-actions {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(38,51,91,0.1);
}
.step-actions p { margin: 0; color: var(--h-muted); font-size: .8125rem; text-align: center; }
.step-actions button:disabled { opacity: 0.45; cursor: not-allowed; }

.form-error {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-left: 0.25rem solid #c94b69;
  border-radius: 0.25rem 0.75rem 0.75rem 0.25rem;
  color: #7c2f45;
  background: #fff0f4;
  font-size: 0.9rem;
  font-weight: 650;
}

.start-boundary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1rem;
  padding: 1rem clamp(1.25rem, 3vw, 2rem);
  color: #48556d;
  background: #eaf8ff;
  font-size: .8125rem;
}
.start-boundary strong { color: #3e35a2; font-size: .8125rem; letter-spacing: 0.1em; }
.start-boundary span { flex: 1; }
.start-boundary button { padding: 0; border: 0; color: #3f35a5; background: transparent; font-weight: 760; cursor: pointer; }

@media (max-width: 900px) {
  .start-progress ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choice-grid-industries { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .choice-grid-materials { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .start-header > p { display: none; }
  .start-intro { grid-template-columns: 1fr; align-items: start; }
  .start-intro h1 { font-size: clamp(2.45rem, 12vw, 3.4rem); }
  .choice-grid-three,
  .choice-grid-membership { grid-template-columns: 1fr; }
  .choice-card { min-height: 10.8rem; }
  .start-fields,
  .direction-result,
  .start-review { grid-template-columns: 1fr; }
  .start-fields .field-wide { grid-column: 1; }
  .direction-orbit { width: 10.5rem; }
  .start-review dl { grid-template-columns: 1fr; }
  .step-actions { grid-template-columns: 1fr 1fr; }
  .step-actions p { grid-column: 1 / -1; grid-row: 1; }
}

@media (max-width: 500px) {
  .start-header { padding-inline: 1rem; }
  .start-header .wordmark { letter-spacing: 0.25em; }
  .start-exit { padding: 0.55rem 0.72rem; font-size: .8125rem; }
  .start-progress ol { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .start-progress button { min-height: 3.8rem; }
  .direction-form { padding: 1.1rem; }
  .step-panel { min-height: 0; }
  .step-heading { grid-template-columns: 1fr; }
  .step-heading > span { width: auto; aspect-ratio: auto; place-items: start; border: 0; background: transparent; }
  .choice-grid-industries,
  .choice-grid-materials { grid-template-columns: 1fr; }
  .choice-grid-industries .choice-featured { grid-column: 1; min-height: 19rem; }
}

@media (prefers-reduced-motion: reduce) {
  .choice-card { transition: none; }
  .choice-card:hover { transform: none; }
}

@media (forced-colors: active) {
  .start-workspace,
  .choice-card,
  .start-fields input,
  .start-fields select,
  .rights-check,
  .direction-result,
  .start-review,
  .start-review dl > div { border: 1px solid CanvasText; color: CanvasText; background: Canvas; }
}

body .value-story {
  min-height: 46rem;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 83% 20%, rgba(113, 208, 255, 0.28), transparent 25rem),
    radial-gradient(circle at 18% 82%, rgba(255, 167, 137, 0.18), transparent 24rem),
    linear-gradient(145deg, #fbfbff 0%, #f2f4ff 56%, #eef9ff 100%);
}

.value-statement {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}

.value-statement::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(64rem, 88vw);
  height: 22rem;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  filter: blur(0.2px);
  transform: translate(-50%, -50%) rotate(-4deg);
}

.value-statement h2 {
  max-width: 14ch;
  margin: 0;
  color: var(--h-ink);
  font-family: var(--display);
  font-size: clamp(2.7rem, 5.7vw, 5.5rem);
  font-weight: 640;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.value-statement > p:not(.brand-eyebrow) {
  max-width: 42rem;
  margin: 0;
  color: var(--h-muted);
  font-size: clamp(1.04rem, 1.45vw, 1.3rem);
  line-height: 1.58;
}

.value-pulse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.value-pulse li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #3f3b79;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.value-pulse li:not(:last-child)::after {
  content: "";
  width: 2.6rem;
  height: 1px;
  background: linear-gradient(90deg, #7768e5, #80d8f3);
}

body .industry-showcase {
  padding-block: clamp(5.5rem, 9vw, 9rem);
  color: var(--h-ink);
  background:
    radial-gradient(circle at 12% 20%, rgba(99, 204, 255, 0.23), transparent 28rem),
    radial-gradient(circle at 88% 76%, rgba(250, 157, 208, 0.18), transparent 30rem),
    linear-gradient(150deg, #f4faff, #f7f4ff 54%, #fff7f8);
}

body .showcase-shell {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 2rem;
  width: 100%;
}

body .showcase-intro {
  grid-row: auto;
  display: contents;
}

.showcase-intro > div:first-child {
  width: min(100% - (2 * var(--page-pad)), 104rem);
  margin-inline: auto;
}

body .showcase-intro .brand-eyebrow { color: #5647c8; }

body .showcase-intro h2 {
  max-width: 18ch;
  color: var(--h-ink);
  font-size: clamp(2.4rem, 4.5vw, 4.7rem);
  font-weight: 640;
}

body .showcase-intro > div > p:last-child {
  max-width: 37rem;
  color: var(--h-muted);
  line-height: 1.55;
}

body .rail-controls {
  align-self: end;
  width: auto;
  margin-right: var(--page-pad);
}

body .rail-controls button {
  border-color: rgba(25, 36, 73, 0.13);
  color: var(--h-ink);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0.8rem 2.4rem rgba(47, 56, 102, 0.08);
  backdrop-filter: blur(14px);
}

body .rail-controls button:hover,
body .rail-controls button:focus-visible {
  color: white;
  background: #171f3d;
}

body .value-rail {
  grid-column: 1 / -1;
  width: 100%;
  overflow: hidden;
  scroll-behavior: auto;
  scroll-snap-type: none;
  touch-action: pan-y;
  cursor: grab;
}

body .value-track {
  gap: clamp(0.85rem, 1.25vw, 1.35rem);
  padding: 0 var(--page-pad);
}

body .value-slide {
  flex-basis: clamp(20rem, 34vw, 32rem);
  min-height: 0;
  aspect-ratio: 1.14 / 1;
  border-color: rgba(255, 255, 255, 0.82);
  border-radius: 1.8rem;
  background: #dce7f5;
  box-shadow: 0 1.5rem 4rem rgba(53, 64, 111, 0.13);
  scroll-snap-align: none;
}

body .value-slide img {
  transform: scale(1.002);
  transition: transform 700ms var(--ease-expo), filter 450ms ease;
}

body .value-slide[data-state="current"] img { transform: scale(1.025); }

body .value-slide::after {
  background: linear-gradient(180deg, transparent 32%, rgba(7, 13, 32, 0.05) 50%, rgba(7, 13, 32, 0.9) 100%);
}

body .value-slide > div {
  gap: 0.35rem;
  padding: clamp(1.25rem, 2.4vw, 2rem);
}

body .value-slide > div > span {
  color: #bcecff;
  font-size: .8125rem;
}

body .value-slide h3 {
  max-width: 15ch;
  color: white;
  font-size: clamp(1.55rem, 2.15vw, 2.2rem);
}

body .value-slide p { color: rgba(246, 248, 255, 0.82); }

body .rail-footer {
  grid-column: 1 / -1;
  width: min(100% - (2 * var(--page-pad)), 104rem);
  margin-inline: auto;
}

body .rail-position { color: #7a8398; }
body .rail-position strong { color: var(--h-ink); }
body .rail-dots button { background: rgba(29, 40, 76, 0.16); }
body .rail-dots button[aria-current="true"] { background: linear-gradient(90deg, #6155d6, #56c8ef); }

.binari-roles {
  position: relative;
  overflow: hidden;
  background: #f8f9fd;
}

.roles-surface {
  position: relative;
  display: grid;
  gap: clamp(3rem, 6vw, 6.5rem);
  padding: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: clamp(2rem, 4vw, 4rem);
  background:
    radial-gradient(circle at 15% 20%, rgba(110, 211, 255, 0.31), transparent 24rem),
    radial-gradient(circle at 75% 28%, rgba(151, 126, 245, 0.25), transparent 26rem),
    radial-gradient(circle at 88% 86%, rgba(255, 159, 132, 0.27), transparent 23rem),
    linear-gradient(140deg, #edf9ff 0%, #f5f0ff 52%, #fff3ef 100%);
  box-shadow: 0 2.5rem 7rem rgba(55, 67, 118, 0.1);
}

.roles-surface::after {
  content: "";
  position: absolute;
  top: -40%;
  right: 10%;
  width: 28rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
}

.roles-heading {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.9rem;
}

.roles-heading h2 {
  max-width: 16ch;
  margin: 0;
  color: var(--h-ink);
  font-family: var(--display);
  font-size: clamp(2.65rem, 5.4vw, 5.4rem);
  font-weight: 640;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.role-flow {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.role-flow::before {
  content: "";
  position: absolute;
  top: 1.55rem;
  right: 8%;
  left: 8%;
  height: 2px;
  background: linear-gradient(90deg, #5e56d7, #55c9ed 50%, #ff9f87);
}

.role-flow li {
  position: relative;
  display: grid;
  gap: 2.6rem;
  padding-right: clamp(1rem, 3vw, 3.4rem);
}

.role-flow li + li { padding-left: clamp(1rem, 3vw, 3.4rem); }

.role-flow > li > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.2rem;
  aspect-ratio: 1;
  border: 0.45rem solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  color: white;
  background: #4239b8;
  font-size: .8125rem;
  font-weight: 800;
  box-shadow: 0 0.8rem 2.5rem rgba(63, 53, 178, 0.24);
}

.role-flow li:nth-child(2) > span { background: #339fc9; }
.role-flow li:nth-child(3) > span { background: #d87564; }
.role-flow h3,
.role-flow p { margin: 0; }
.role-flow h3 { color: var(--h-ink); font-size: clamp(1.55rem, 2.4vw, 2.35rem); letter-spacing: -0.035em; }
.role-flow p { max-width: 18ch; margin-top: 0.55rem; color: var(--h-muted); font-size: clamp(0.98rem, 1.25vw, 1.15rem); line-height: 1.5; }

body .brand-closing {
  min-height: 38rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.3rem;
  padding-inline: var(--page-pad);
  text-align: center;
  background:
    radial-gradient(circle at 50% 120%, rgba(109, 202, 255, 0.28), transparent 28rem),
    #111a34;
}

body .brand-closing h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(2.7rem, 5vw, 5.1rem);
  font-weight: 640;
  letter-spacing: -0.055em;
}

body .brand-closing > p:not(.brand-eyebrow) {
  margin: -0.35rem 0 0.6rem;
  color: rgba(236, 241, 255, 0.7);
  font-size: 1.03rem;
}

@media (max-width: 820px) {
  body .value-story { min-height: 39rem; }
  body .showcase-shell { grid-template-columns: 1fr; }
  body .showcase-intro { display: grid; grid-template-columns: 1fr; }
  body .showcase-intro > div:first-child { width: min(100% - (2 * var(--page-pad)), 104rem); }
  body .rail-controls { width: min(100% - (2 * var(--page-pad)), 104rem); margin-inline: auto; }
  body .value-rail,
  body .rail-footer { grid-column: 1; }
  body .value-slide { flex-basis: min(26rem, 84vw); aspect-ratio: 0.92 / 1; }
  .roles-surface { border-radius: 2.3rem; }
  .role-flow { grid-template-columns: 1fr; gap: 0; }
  .role-flow::before { top: 2rem; bottom: 2rem; left: 1.55rem; width: 2px; height: auto; }
  .role-flow li,
  .role-flow li + li { grid-template-columns: auto 1fr; gap: 1.35rem; padding: 0 0 2.35rem; }
  .role-flow li:last-child { padding-bottom: 0; }
  .role-flow > li > span { width: 3.1rem; }
  .role-flow p { max-width: 28ch; }
}

@media (max-width: 520px) {
  .value-statement h2,
  .roles-heading h2,
  body .showcase-intro h2,
  body .brand-closing h2 { font-size: clamp(2.35rem, 11vw, 3.25rem); }
  .value-pulse { display: grid; }
  .value-pulse li { justify-content: center; }
  .value-pulse li::after { display: none; }
  body .industry-showcase { padding-block: 4.8rem; }
  body .value-slide { flex-basis: 84vw; border-radius: 1.4rem; }
  body .rail-controls { flex-wrap: nowrap; }
  body .rail-controls .rail-toggle { flex: 1; }
  body .rail-dots { gap: 0.28rem; }
  body .rail-dots button { width: 0.72rem; }
  body .rail-dots button[aria-current="true"] { width: 1.8rem; }
  .roles-surface { padding: 1.55rem; border-radius: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  body .value-slide img { transition: none; }
  body .value-slide[data-state="current"] img { transform: none; }
}

@media (forced-colors: active) {
  .roles-surface,
  .role-flow > li > span,
  .value-pulse li { border: 1px solid CanvasText; color: CanvasText; background: Canvas; }
}

.roles-surface {
  gap: clamp(3.8rem, 7vw, 7rem);
  padding: clamp(2.25rem, 5.3vw, 5.6rem);
}

.roles-heading {
  grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.55fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: end;
}

.roles-heading > div {
  display: grid;
  gap: 1rem;
}

.roles-heading h2 {
  max-width: 17ch;
  font-size: clamp(2.8rem, 4.8vw, 4.85rem);
  line-height: 0.98;
}

.roles-intro {
  max-width: 33ch;
  margin: 0 0 0.35rem;
  color: #505b78;
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  line-height: 1.65;
}

.role-flow::before {
  top: 2.05rem;
  right: 11%;
  left: 11%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(91, 75, 213, 0.72), rgba(71, 188, 225, 0.72) 50%, rgba(235, 132, 108, 0.72));
  box-shadow: 0 0.6rem 1.8rem rgba(89, 126, 210, 0.2);
}

.role-flow li,
.role-flow li + li {
  min-width: 0;
  padding: 0 clamp(0.35rem, 1.5vw, 1.3rem);
}

.role-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1.6rem;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: 1.8rem;
  outline: none;
}

.role-node {
  display: grid;
  place-items: center;
  width: 4.1rem;
  aspect-ratio: 1;
  border: 0.48rem solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  color: white;
  background: #4c40c7;
  font-size: .8125rem;
  font-weight: 840;
  box-shadow: 0 0.9rem 2.6rem rgba(67, 53, 183, 0.25);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.role-flow li:nth-child(2) .role-node { background: #229bc7; }
.role-flow li:nth-child(3) .role-node { background: #d96f59; }

.role-copy {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  min-height: 16rem;
  padding: clamp(1.35rem, 2vw, 2rem);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 1.55rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.38));
  box-shadow: 0 1.4rem 4rem rgba(63, 75, 128, 0.09);
  backdrop-filter: blur(12px);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.role-kicker {
  color: #5850ce;
  font-size: .8125rem;
  font-weight: 820;
  letter-spacing: 0.16em;
}

.role-copy strong {
  max-width: 13ch;
  color: var(--h-ink);
  font-size: clamp(1.55rem, 2.2vw, 2.2rem);
  line-height: 1.04;
  letter-spacing: -0.038em;
}

.role-copy > span:not(.role-kicker):not(.role-link-text) {
  max-width: 29ch;
  color: #5c6680;
  font-size: clamp(0.94rem, 1.05vw, 1.06rem);
  line-height: 1.55;
}

.role-link-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  color: #322bb0;
  font-size: 0.83rem;
  font-weight: 780;
}

.role-link-text span {
  display: grid;
  place-items: center;
  width: 2.2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: white;
  background: #111a34;
  font-size: 1rem;
}

.role-step:hover .role-node,
.role-step:focus-visible .role-node {
  transform: translateY(-0.25rem) scale(1.04);
  box-shadow: 0 1.15rem 3rem rgba(67, 53, 183, 0.3);
}

.role-step:hover .role-copy,
.role-step:focus-visible .role-copy {
  transform: translateY(-0.35rem);
  border-color: rgba(83, 74, 202, 0.32);
  box-shadow: 0 1.8rem 4.6rem rgba(63, 75, 128, 0.15);
}

.role-step:focus-visible .role-copy {
  outline: 3px solid #171f3b;
  outline-offset: 4px;
}

@media (max-width: 820px) {
  .roles-heading { grid-template-columns: 1fr; gap: 1.35rem; }
  .roles-intro { max-width: 39ch; }
  .role-flow::before { top: 2.05rem; bottom: 2.05rem; left: 2.05rem; }
  .role-flow li,
  .role-flow li + li { padding: 0 0 1rem; }
  .role-flow li:last-child { padding-bottom: 0; }
  .role-step { grid-template-columns: auto 1fr; grid-template-rows: 1fr; gap: 1.1rem; }
  .role-copy { min-height: 0; }
}

@media (max-width: 520px) {
  .roles-heading h2 { font-size: clamp(2.15rem, 10.3vw, 3rem); }
  .role-flow { gap: 1.25rem; }
  .role-flow::before { display: none; }
  .role-flow li,
  .role-flow li + li { padding: 0; }
  .role-step {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 1rem;
  }
  .role-step::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 2.8rem;
    right: 1.25rem;
    left: 4.6rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(77, 64, 199, 0.7), rgba(77, 64, 199, 0.08));
  }
  .role-flow li:nth-child(2) .role-step::after { background: linear-gradient(90deg, rgba(34, 155, 199, 0.72), rgba(34, 155, 199, 0.08)); }
  .role-flow li:nth-child(3) .role-step::after { background: linear-gradient(90deg, rgba(217, 111, 89, 0.72), rgba(217, 111, 89, 0.08)); }
  .role-node {
    position: absolute;
    z-index: 3;
    top: 0.85rem;
    left: 1rem;
    width: 3.85rem;
  }
  .role-copy {
    width: 100%;
    padding: 4.7rem 1.35rem 1.35rem;
    border-radius: 1.3rem;
  }
  .role-copy strong { font-size: clamp(1.4rem, 7vw, 1.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .role-node,
  .role-copy { transition: none; }
}

@media (forced-colors: active) {
  .role-copy,
  .role-node { border: 1px solid CanvasText; color: CanvasText; background: Canvas; }
  .role-step:focus-visible .role-copy { outline-color: Highlight; }
}

body .brand-closing {
  position: relative;
  min-height: 43rem;
  overflow: hidden;
  isolation: isolate;
  place-items: stretch;
  align-content: center;
  gap: 0;
  padding-inline: var(--page-pad);
  color: var(--h-ink);
  text-align: left;
  background:
    radial-gradient(circle at 15% 18%, rgba(101, 207, 246, 0.3), transparent 27rem),
    radial-gradient(circle at 78% 22%, rgba(151, 126, 245, 0.27), transparent 28rem),
    radial-gradient(circle at 88% 86%, rgba(255, 160, 135, 0.28), transparent 26rem),
    linear-gradient(180deg, #f8f9fd 0%, #f1f5ff 42%, #fff4f0 100%);
}

body .brand-closing::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(64rem, 82vw);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 5rem rgba(255, 255, 255, 0.28);
}

.closing-orbit {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.closing-orbit::before {
  content: "";
  position: absolute;
  top: 12%;
  right: -9rem;
  width: 25rem;
  aspect-ratio: 1;
  border: 1px solid rgba(83, 73, 200, 0.12);
  border-radius: 50%;
}

.closing-orbit span {
  position: absolute;
  width: 0.65rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #5b4fd0;
  box-shadow: 0 0 2rem rgba(91, 79, 208, 0.48);
}

.closing-orbit span:nth-child(1) { top: 17%; left: 13%; }
.closing-orbit span:nth-child(2) { top: 28%; right: 18%; background: #42bce3; }
.closing-orbit span:nth-child(3) { right: 10%; bottom: 16%; background: #eb876f; }

.closing-content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(24rem, 0.92fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: end;
}

.closing-copy {
  display: grid;
  gap: 1.15rem;
}

body .brand-closing .brand-eyebrow { color: #5147c8; }

body .brand-closing h2 {
  max-width: 11ch;
  color: var(--h-ink);
  font-size: clamp(3.1rem, 5.25vw, 5.3rem);
  line-height: 0.96;
}

body .brand-closing .closing-copy > p:not(.brand-eyebrow) {
  max-width: 46ch;
  margin: 0;
  color: #56617e;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  line-height: 1.65;
}

.closing-path {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(42, 53, 91, 0.13);
}

.closing-path li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(42, 53, 91, 0.13);
}

.closing-path span {
  display: grid;
  place-items: center;
  width: 2.15rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #5046c8;
  background: rgba(255, 255, 255, 0.74);
  font-size: .8125rem;
  font-weight: 820;
  box-shadow: 0 0.65rem 1.5rem rgba(77, 78, 145, 0.1);
}

.closing-path strong {
  color: var(--h-ink);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  letter-spacing: -0.012em;
}

.closing-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  align-items: center;
  padding-top: 0.25rem;
}

body .brand-closing .closing-cta {
  display: inline-flex;
  gap: 1.4rem;
  align-items: center;
  justify-content: space-between;
  min-width: min(100%, 20rem);
  color: white;
  background: #111a34;
  box-shadow: 0 1.2rem 3rem rgba(31, 40, 74, 0.18);
}

body .brand-closing .closing-cta:hover { color: white; background: #3028a7; }

body .brand-closing .preview-boundary-link {
  color: #38425f;
  text-underline-offset: 0.24em;
}

body .brand-closing .preview-boundary-link:hover { color: #3028a7; }

@media (max-width: 820px) {
  body .brand-closing { min-height: 0; padding-block: 6.5rem; }
  .closing-content { grid-template-columns: 1fr; gap: 2.5rem; }
  .closing-copy { text-align: center; justify-items: center; }
  body .brand-closing h2 { max-width: 12ch; }
  body .brand-closing .closing-copy > p:not(.brand-eyebrow) { max-width: 42ch; }
  .closing-path { width: min(100%, 38rem); margin-inline: auto; }
  .closing-actions { justify-content: center; }
}

@media (max-width: 520px) {
  body .brand-closing { padding-block: 5rem; }
  body .brand-closing h2 { font-size: clamp(2.55rem, 12vw, 3.55rem); }
  .closing-actions { display: grid; justify-items: stretch; text-align: center; }
  .closing-cta { min-width: 0; width: 100%; }
}

@media (forced-colors: active) {
  body .brand-closing,
  .closing-path span,
  .closing-cta { border: 1px solid CanvasText; color: CanvasText; background: Canvas; }
}

.start-page {
  background:
    radial-gradient(circle at 8% 8%, rgba(93, 205, 244, 0.22), transparent 25rem),
    radial-gradient(circle at 90% 18%, rgba(150, 126, 245, 0.2), transparent 28rem),
    radial-gradient(circle at 78% 92%, rgba(255, 157, 132, 0.17), transparent 26rem),
    #f7f9fd;
}

.start-header {
  border-bottom: 1px solid rgba(34, 45, 79, 0.09);
  background: rgba(250, 252, 255, 0.82);
  backdrop-filter: blur(20px);
}

.start-header > p {
  color: #5c6680;
  font-size: .8125rem;
  font-weight: 760;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.start-main { padding-block: clamp(2.2rem, 5vw, 5.2rem); }

.start-intro {
  align-items: end;
  gap: clamp(2rem, 6vw, 8rem);
  padding-block: 0 clamp(2.2rem, 5vw, 4.5rem);
}

.start-intro h1 {
  max-width: none;
  font-size: clamp(3rem, 5.6vw, 5.7rem);
  line-height: 0.94;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.start-intro-note {
  display: grid;
  gap: 1.1rem;
  align-self: end;
  padding-bottom: 0.45rem;
}

.start-intro-note > p {
  max-width: 36ch;
  margin: 0;
  color: #56617b;
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.65;
}

.start-intro-note > span {
  width: fit-content;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(73, 63, 192, 0.15);
  border-radius: 999px;
  color: #4d44bd;
  background: rgba(255, 255, 255, 0.66);
  font-size: .8125rem;
  font-weight: 780;
  letter-spacing: 0.05em;
}

.start-workspace {
  overflow: hidden;
  border-color: rgba(66, 72, 116, 0.1);
  border-radius: 2.4rem;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 2.5rem 7rem rgba(58, 71, 116, 0.12);
  backdrop-filter: blur(18px);
}

.start-progress {
  padding: 0.8rem;
  border-bottom: 1px solid rgba(42, 51, 84, 0.09);
  background: rgba(245, 247, 253, 0.78);
}

.start-progress ol { gap: 0.45rem; }

.start-progress li {
  border-right-color: rgba(44, 55, 91, 0.08);
  color: #737c91;
}

.start-progress li[data-state="complete"] { color: #4640b7; }

.start-progress button {
  min-height: 4.4rem;
  border: 1px solid transparent;
  border-radius: 1.2rem;
}

.start-progress li[data-state="current"] button {
  border-color: rgba(78, 67, 195, 0.14);
  color: #332ab0;
  background: linear-gradient(135deg, rgba(239, 236, 255, 0.96), rgba(230, 248, 255, 0.96));
  box-shadow: 0 0.7rem 1.8rem rgba(65, 62, 155, 0.09);
}

.start-progress li[data-state="current"] { color: #332ab0; }

.direction-form { padding: clamp(1.5rem, 4.4vw, 4.2rem); }

.step-heading { margin-bottom: clamp(2rem, 4vw, 3.5rem); }

.step-heading h2 {
  max-width: 16ch;
  font-size: clamp(2.25rem, 4.1vw, 4.1rem);
  line-height: 0.98;
}

.choice-grid-three { gap: 1rem; }

.choice-grid-three .choice-card {
  min-height: 13.8rem;
  padding: 1.45rem;
  border-color: rgba(57, 66, 105, 0.1);
  border-radius: 1.55rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 246, 255, 0.9));
}

.choice-grid-three .choice-card:nth-child(3n + 2) { background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 238, 255, 0.92)); }
.choice-grid-three .choice-card:nth-child(3n) { background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 241, 236, 0.92)); }

.choice-grid-three .choice-card strong {
  max-width: 13ch;
  margin-top: 2.8rem;
  font-size: clamp(1.3rem, 1.8vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.choice-grid-three .choice-card small {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .start-main { padding-top: 2rem; }
  .start-intro { gap: 1.4rem; padding-bottom: 2.2rem; }
  .start-intro h1 { font-size: clamp(2.5rem, 12vw, 3.5rem); }
  .start-intro-note { justify-items: start; }
  .start-workspace { border-radius: 1.5rem; }
  .start-progress { overflow-x: auto; scrollbar-width: none; }
  .start-progress::-webkit-scrollbar { display: none; }
  .start-progress ol { grid-template-columns: repeat(6, minmax(7.4rem, 1fr)); width: max-content; min-width: 100%; }
  .start-progress button { min-height: 3.8rem; }
  .choice-grid-three .choice-card { min-height: 11.5rem; }
}

.direction-form { scroll-margin-top: 5.4rem; }

.choice-grid-industries,
.choice-grid-materials { gap: 1rem; }

.choice-grid-industries .choice-card:not(.choice-featured),
.choice-grid-materials .choice-card {
  border-radius: 1.45rem;
  box-shadow: 0 1rem 2.8rem rgba(56, 68, 112, 0.06);
}

.choice-grid-industries .choice-card:not(.choice-featured) strong,
.choice-grid-materials .choice-card strong { font-size: clamp(1.05rem, 1.35vw, 1.3rem); }

.start-fields { max-width: none; }

.start-fields label {
  padding: 1rem;
  border: 1px solid rgba(37, 51, 91, 0.1);
  border-radius: 1.2rem;
  background: rgba(248, 250, 255, 0.74);
}

.start-fields input,
.start-fields select { background: white; }

.membership-handoff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  margin-top: 1rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid rgba(78, 66, 195, 0.14);
  border-radius: 1.4rem;
  background:
    radial-gradient(circle at 88% 0%, rgba(113, 210, 246, 0.26), transparent 12rem),
    linear-gradient(135deg, rgba(239, 237, 255, 0.94), rgba(255, 246, 242, 0.94));
}

.membership-handoff > div { display: grid; gap: 0.45rem; }
.membership-handoff p,
.membership-handoff h3,
.membership-handoff span { margin: 0; }
.membership-handoff p { color: #5145c2; font-size: .8125rem; font-weight: 820; letter-spacing: 0.12em; }
.membership-handoff h3 { max-width: 22ch; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.05; letter-spacing: -0.03em; }
.membership-handoff > div > span { color: #5c6680; font-size: 0.82rem; line-height: 1.5; }

.membership-gate {
  display: inline-flex;
  gap: 1.4rem;
  align-items: center;
  justify-content: space-between;
  min-width: 19rem;
  color: white;
  background: #111a34;
  box-shadow: 0 1rem 2.7rem rgba(31, 40, 74, 0.17);
}

.membership-gate[aria-disabled="true"] {
  color: #798095;
  background: #e2e5ed;
  box-shadow: none;
  cursor: not-allowed;
}

.membership-gate[data-state="ready"]:hover { color: white; background: #332ab0; }

.membership-gate:focus,
.membership-gate:focus-visible {
  outline: 3px solid #4f8cff;
  outline-offset: 4px;
}

@media (max-width: 700px) {
  .membership-handoff { grid-template-columns: 1fr; }
  .membership-gate { min-width: 0; width: 100%; }
          }

@media (max-width: 500px) {
  .direction-form { scroll-margin-top: 4.8rem; }
  .choice-grid-three .choice-card { min-height: 10.5rem; }
            }

@media (forced-colors: active) {
  .membership-handoff,
  .membership-gate,
  .concept-statuses li,
  .concept-comparison,
  .concept-card,
  .concept-card button,
  .concept-feedback,
  .membership-boundary-panel,
  .membership-return-primary { border: 1px solid CanvasText; color: CanvasText; background: Canvas; }
}

.account-page {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--h-ink);
  background:
    radial-gradient(circle at 8% 8%, rgba(89, 207, 244, 0.22), transparent 26rem),
    radial-gradient(circle at 91% 14%, rgba(150, 124, 244, 0.2), transparent 29rem),
    radial-gradient(circle at 82% 88%, rgba(255, 158, 130, 0.18), transparent 28rem),
    #f7f9fd;
}

.account-page h1,
.account-page h2,
.account-page h3,
.account-page p,
.account-page span,
.account-page button,
.account-page dt,
.account-page dd,
.account-page strong,
.account-page small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.account-main {
  width: min(100%, 94rem);
  margin-inline: auto;
  padding: clamp(2.8rem, 6vw, 6rem) var(--page-pad) clamp(5rem, 8vw, 8rem);
}

.account-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.55fr);
  gap: 2rem clamp(3rem, 8vw, 8rem);
  align-items: end;
  margin-bottom: clamp(2.7rem, 5vw, 4.8rem);
}

.account-intro > div:first-child { display: grid; gap: 1rem; }

.account-intro h1 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  font-weight: 650;
  line-height: 0.94;
  letter-spacing: -0.058em;
}

.account-intro-copy { display: grid; gap: 1.25rem; }
.account-intro-copy > p { max-width: 37ch; margin: 0; color: #59637c; font-size: clamp(1rem, 1.2vw, 1.14rem); line-height: 1.62; }

.account-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-statuses li {
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(78, 67, 195, 0.14);
  border-radius: 999px;
  color: #5146c3;
  background: rgba(255, 255, 255, 0.72);
  font-size: .8125rem;
  font-weight: 820;
  letter-spacing: 0.07em;
  overflow-wrap: anywhere;
}

.account-workspace {
  display: grid;
  grid-template-columns: minmax(16rem, 0.32fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(51, 63, 102, 0.11);
  border-radius: clamp(1.8rem, 3vw, 3rem);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 2.4rem 7rem rgba(55, 67, 112, 0.12);
  backdrop-filter: blur(18px);
  scroll-margin-top: 5.5rem;
}

.account-journey {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-right: 1px solid rgba(47, 58, 94, 0.1);
  background:
    radial-gradient(circle at 20% 8%, rgba(113, 214, 247, 0.28), transparent 12rem),
    linear-gradient(180deg, #f4f9ff, #f4f1ff 62%, #fff5f1);
}

.account-journey > p:first-child {
  margin: 0 0 1.4rem;
  color: #5549c4;
  font-size: .8125rem;
  font-weight: 820;
  letter-spacing: 0.13em;
}

.account-journey ol { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.account-journey li { min-width: 0; }

.account-journey button {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.12rem 0.75rem;
  width: 100%;
  padding: 1rem;
  border: 1px solid transparent;
  border-radius: 1.2rem;
  color: #667087;
  background: rgba(255, 255, 255, 0.38);
  text-align: left;
  cursor: pointer;
}

.account-journey button:disabled { color: #8a91a2; cursor: not-allowed; }
.account-journey button span { grid-row: 1 / 3; display: grid; place-items: center; width: 2.25rem; aspect-ratio: 1; border-radius: 50%; color: white; background: #a5adbd; font-size: .8125rem; font-weight: 820; }
.account-journey button strong { align-self: end; color: inherit; font-size: 1rem; line-height: 1.15; }
.account-journey button small { align-self: start; color: inherit; font-size: .8125rem; font-weight: 760; letter-spacing: 0.04em; }

.account-journey li[data-state="current"] button {
  border-color: rgba(79, 68, 195, 0.18);
  color: #3129a9;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0.8rem 2rem rgba(65, 62, 155, 0.09);
}

.account-journey li[data-state="current"] button span { background: linear-gradient(145deg, #4b55db, #8175ee); }
.account-journey li[data-state="complete"] button { color: #4841b3; }
.account-journey li[data-state="complete"] button span { background: #6d64dd; }

.account-journey-note { margin: 2rem 0 0; color: #667087; font-size: 0.84rem; line-height: 1.55; }

.account-stage { min-width: 0; padding: clamp(1.5rem, 4vw, 4rem); }
.account-stage-status { color: #5b6580; font-size: .8125rem; font-weight: 720; }

.account-error {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(183, 65, 60, 0.2);
  border-radius: 1rem;
  color: #8d2d2a;
  background: #fff1ef;
  font-size: 0.9rem;
}

.account-panel { padding-top: clamp(2rem, 4vw, 3.5rem); }
.account-panel-heading { display: grid; gap: 0.65rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.account-panel-heading > * { margin: 0; }
.account-panel-heading > p:first-child { color: #564ac6; font-size: .8125rem; font-weight: 820; letter-spacing: 0.12em; }
.account-panel-heading h2 { max-width: 17ch; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 0.98; letter-spacing: -0.048em; }
.account-panel-heading h2:focus { outline: 3px solid #4f8cff; outline-offset: 5px; }
.account-panel-heading > p:last-child { max-width: 52ch; color: #5e6880; font-size: 1rem; line-height: 1.58; }

.account-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.account-choice-grid button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 18rem;
  padding: clamp(1.3rem, 2.8vw, 2rem);
  border: 1px solid rgba(46, 59, 99, 0.12);
  border-radius: 1.7rem;
  color: #111a34;
  background: linear-gradient(145deg, #f9fdff, #eaf7ff);
  text-align: left;
  cursor: pointer;
}

.account-choice-grid button:nth-child(2) { background: linear-gradient(145deg, #fbfaff, #f0ecff); }
.account-choice-grid button > span { color: #5549c5; font-size: .8125rem; font-weight: 820; letter-spacing: 0.1em; }
.account-choice-grid button strong { align-self: end; max-width: 11ch; font-size: clamp(1.65rem, 2.7vw, 2.5rem); line-height: 1; letter-spacing: -0.04em; }
.account-choice-grid button small { max-width: 30ch; margin-top: 0.7rem; color: #5c6680; font-size: 0.9rem; line-height: 1.5; }
.account-choice-grid button i { position: absolute; top: 1.3rem; right: 1.3rem; display: grid; place-items: center; width: 2.7rem; aspect-ratio: 1; border-radius: 50%; color: white; background: #111a34; font-style: normal; }
.account-choice-grid button[aria-pressed="true"] { border-color: #5549c5; box-shadow: inset 0 0 0 1px #5549c5, 0 1.5rem 4rem rgba(72, 62, 170, 0.13); transform: translateY(-0.25rem); }

.account-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 1.1rem;
  background: #f1f6ff;
}

.account-callout span { padding: 0.35rem 0.5rem; border-radius: 999px; color: #4c43b6; background: white; font-size: .8125rem; font-weight: 820; letter-spacing: 0.06em; overflow-wrap: anywhere; }
.account-callout p { margin: 0; color: #59647d; font-size: 0.88rem; line-height: 1.5; }

.account-example-card,
.location-preview-card {
  border: 1px solid rgba(48, 60, 99, 0.11);
  border-radius: 1.8rem;
  background: linear-gradient(145deg, #fbfdff, #edf7ff);
  box-shadow: 0 1.4rem 4rem rgba(55, 67, 110, 0.08);
}

.account-example-card { display: grid; padding: clamp(1.5rem, 3.5vw, 2.7rem); }
.account-example-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.account-example-top span,
.location-preview-card > div:last-child > span { color: #5548c3; font-size: .8125rem; font-weight: 820; letter-spacing: 0.1em; }
.account-example-top i { display: grid; place-items: center; width: 2.7rem; aspect-ratio: 1; border-radius: 50%; color: white; background: #111a34; font-style: normal; font-weight: 820; }
.account-example-card h3 { max-width: 15ch; margin: clamp(2.5rem, 5vw, 4.5rem) 0 1.5rem; font-size: clamp(2rem, 3.8vw, 3.6rem); line-height: 0.98; letter-spacing: -0.045em; }
.account-example-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 1.5rem; border-block: 1px solid rgba(51, 63, 99, 0.12); }
.account-example-card dl > div { display: grid; gap: 0.3rem; padding: 1rem; border-right: 1px solid rgba(51, 63, 99, 0.12); }
.account-example-card dl > div:last-child { border-right: 0; }
.account-example-card dt { color: #747d93; font-size: .8125rem; font-weight: 760; text-transform: uppercase; }
.account-example-card dd { margin: 0; color: #222b48; font-size: 0.9rem; font-weight: 680; line-height: 1.4; }

.account-example-card button,
.location-preview-card button,
.account-boundary-review {
  justify-self: start;
  min-height: 3.25rem;
  padding: 0.8rem 1.1rem;
  border: 1px solid rgba(31, 42, 76, 0.16);
  border-radius: 999px;
  color: #222b49;
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 780;
  cursor: pointer;
}

.account-example-card button[aria-pressed="true"],
.location-preview-card button[aria-pressed="true"],
.account-boundary-review[aria-pressed="true"] { color: white; border-color: #111a34; background: #111a34; }

.location-preview-card { display: grid; grid-template-columns: minmax(11rem, 0.45fr) minmax(0, 1fr); overflow: hidden; }
.location-orbit { position: relative; display: grid; place-items: center; min-height: 24rem; background: radial-gradient(circle, rgba(111, 102, 224, 0.2), transparent 55%); }
.location-orbit::before,
.location-orbit::after { content: ""; position: absolute; width: 62%; aspect-ratio: 1; border: 1px solid rgba(87, 74, 199, 0.25); border-radius: 50%; }
.location-orbit::after { width: 38%; transform: rotate(32deg) scaleY(0.45); }
.location-orbit span { width: 5rem; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg, #63c9f0, #7569e3 58%, #ff9a7f); box-shadow: 0 1rem 3rem rgba(84, 75, 190, 0.2); }
.location-orbit i { position: absolute; display: grid; place-items: center; width: 2.6rem; aspect-ratio: 1; border-radius: 50%; color: #5146c2; background: white; font-size: .8125rem; font-style: normal; font-weight: 820; }
.location-preview-card > div:last-child { display: grid; align-content: center; justify-items: start; padding: clamp(1.5rem, 4vw, 3.5rem); }
.location-preview-card h3 { max-width: 13ch; margin: 1.5rem 0 0.8rem; font-size: clamp(2rem, 3.8vw, 3.7rem); line-height: 0.98; letter-spacing: -0.045em; }
.location-preview-card p { max-width: 43ch; margin: 0 0 1.5rem; color: #5c6680; font-size: 0.95rem; line-height: 1.55; }

.scope-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.scope-map article { display: grid; align-content: start; min-width: 0; min-height: 16rem; padding: 1.35rem; border: 1px solid rgba(47, 59, 98, 0.11); border-radius: 1.5rem; background: linear-gradient(145deg, #fbfdff, #eef8ff); }
.scope-map article:nth-child(2) { background: linear-gradient(145deg, #fbfaff, #f0edff); }
.scope-map article:nth-child(3) { background: linear-gradient(145deg, #fffdfc, #fff0eb); }
.scope-map article > span { color: #5548c3; font-size: .8125rem; font-weight: 820; }
.scope-map strong { margin-top: 3rem; font-size: 1.3rem; line-height: 1.1; }
.scope-map p { margin: 0.7rem 0 1.4rem; color: #5c6680; font-size: 0.9rem; line-height: 1.48; }
.scope-map small { margin-top: auto; color: #5548c3; font-size: .8125rem; font-weight: 820; letter-spacing: 0.06em; }
.account-boundary-review { margin-top: 1rem; }

.account-finish { margin-top: 1rem; padding: 1.3rem; border: 1px solid rgba(77, 66, 193, 0.14); border-radius: 1.25rem; background: linear-gradient(135deg, #ecf8ff, #f4efff, #fff2ed); }
.account-finish > * { margin: 0; }
.account-finish > span { color: #5145bd; font-size: .8125rem; font-weight: 820; letter-spacing: 0.1em; }
.account-finish h3 { margin-top: 0.55rem; font-size: 1.65rem; line-height: 1.05; }
.account-finish p { max-width: 60ch; margin-top: 0.5rem; color: #58627a; font-size: 0.9rem; line-height: 1.5; }

.account-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: 1.3rem; border-top: 1px solid rgba(45, 57, 94, 0.1); }
.account-controls span { color: #737b91; font-size: .8125rem; text-align: center; }
.account-controls button { min-height: 3.25rem; padding: 0.8rem 1.1rem; border: 1px solid rgba(32, 43, 77, 0.14); border-radius: 999px; color: #222b48; background: white; font-size: 0.85rem; font-weight: 760; cursor: pointer; }
.account-controls button:last-child { min-width: 10rem; color: white; border-color: #111a34; background: #111a34; }
.account-controls button:disabled { color: #9198a8; border-color: #e2e5ec; background: #eef0f5; cursor: not-allowed; }

.account-boundary-panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem clamp(3rem, 8vw, 8rem); margin-top: clamp(2.5rem, 5vw, 5rem); padding: clamp(1.7rem, 4vw, 3.4rem); border: 1px solid rgba(73, 63, 185, 0.12); border-radius: 2rem; background: linear-gradient(135deg, rgba(238, 248, 255, 0.88), rgba(249, 239, 255, 0.88), rgba(255, 244, 239, 0.9)); }
.account-boundary-panel > div { display: grid; align-content: start; gap: 0.8rem; }
.account-boundary-panel p,
.account-boundary-panel h2 { margin: 0; }
.account-boundary-panel > div:first-child > p { color: #5447c2; font-size: .8125rem; font-weight: 820; letter-spacing: 0.11em; }
.account-boundary-panel h2 { max-width: 18ch; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; letter-spacing: -0.04em; }
.account-boundary-panel > div:last-child p { color: #58627b; font-size: 0.95rem; line-height: 1.58; }

.account-return { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: center; padding-top: clamp(2.5rem, 5vw, 4rem); }
.account-return a,
.account-return button { border: 0; color: #4036ab; background: transparent; font: inherit; font-size: 0.88rem; font-weight: 760; text-decoration: underline; text-underline-offset: 0.24em; cursor: pointer; }

.account-choice-grid button:focus,
.account-choice-grid button:focus-visible,
.account-journey button:focus,
.account-journey button:focus-visible,
.account-example-card button:focus,
.account-example-card button:focus-visible,
.location-preview-card button:focus,
.location-preview-card button:focus-visible,
.account-boundary-review:focus,
.account-boundary-review:focus-visible,
.account-controls button:focus,
.account-controls button:focus-visible,
.account-return a:focus,
.account-return a:focus-visible,
.account-return button:focus,
.account-return button:focus-visible,
.membership-account-preview:focus,
.membership-account-preview:focus-visible { outline: 3px solid #4f8cff; outline-offset: 4px; }

@media (max-width: 1050px) {
  .account-workspace { grid-template-columns: 1fr; }
  .account-journey { border-right: 0; border-bottom: 1px solid rgba(47, 58, 94, 0.1); }
  .account-journey ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .account-journey button { display: grid; grid-template-columns: 1fr; }
  .account-journey button span { grid-row: auto; }
  .account-journey-note { margin-top: 1.2rem; }
}

@media (max-width: 760px) {
  .account-intro,
  .account-boundary-panel { grid-template-columns: 1fr; gap: 1.5rem; }
  .account-intro h1 { font-size: clamp(2.55rem, 12vw, 3.7rem); }
  .account-journey { overflow-x: auto; scrollbar-width: none; }
  .account-journey::-webkit-scrollbar { display: none; }
  .account-journey ol { grid-template-columns: repeat(4, minmax(8.8rem, 1fr)); width: max-content; min-width: 100%; }
  .account-journey-note { min-width: 28rem; }
  .account-choice-grid,
  .location-preview-card,
  .scope-map { grid-template-columns: 1fr; }
  .account-choice-grid button { min-height: 14rem; }
  .account-example-card dl { grid-template-columns: 1fr; }
  .account-example-card dl > div { border-right: 0; border-bottom: 1px solid rgba(51, 63, 99, 0.12); }
  .account-example-card dl > div:last-child { border-bottom: 0; }
  .location-orbit { min-height: 16rem; }
  .scope-map article { min-height: 12rem; }
  .account-controls { grid-template-columns: 1fr 1fr; }
  .account-controls span { grid-column: 1 / -1; grid-row: 1; }
}

@media (max-width: 500px) {
  .account-header > p { display: none; }
  .account-main { padding-inline: 1rem; }
  .account-workspace { border-radius: 1.5rem; }
  .account-stage { padding: 1.25rem; }
  .account-callout { grid-template-columns: 1fr; }
  .account-controls { grid-template-columns: 1fr; }
  .account-controls span { grid-column: auto; }
  .account-controls button { width: 100%; }
  .account-return { display: grid; text-align: center; }
    }

@media (prefers-reduced-motion: reduce) {
  .account-choice-grid button { transition: none; }
  .account-choice-grid button[aria-pressed="true"] { transform: none; }
}

@media (forced-colors: active) {
  .membership-account-preview,
  .account-statuses li,
  .account-workspace,
  .account-journey button,
  .account-choice-grid button,
  .account-callout,
  .account-example-card,
  .location-preview-card,
  .scope-map article,
  .account-finish,
  .account-boundary-panel { border: 1px solid CanvasText; color: CanvasText; background: Canvas; }
}

.sports-intake-page {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--h-ink);
  background:
    radial-gradient(circle at 6% 8%, rgba(92, 206, 244, 0.24), transparent 28rem),
    radial-gradient(circle at 91% 14%, rgba(151, 126, 245, 0.22), transparent 31rem),
    radial-gradient(circle at 79% 91%, rgba(255, 159, 131, 0.19), transparent 29rem),
    #f7f9fd;
}

.sports-header > p span { color: #5146c3; }
.sports-main { width: min(100%, 94rem); margin-inline: auto; padding: clamp(2.5rem, 6vw, 5.6rem) var(--page-pad) clamp(5rem, 8vw, 8rem); }
.sports-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.55fr); gap: 2rem clamp(3rem, 8vw, 8rem); align-items: end; margin-bottom: clamp(2.2rem, 5vw, 4.2rem); }
.sports-intro h1 { max-width: none; text-wrap: balance; margin: 0.9rem 0 0; font-family: var(--display); font-size: clamp(2.8rem, 5vw, 5.2rem); font-weight: 650; line-height: 0.96; letter-spacing: -0.055em; }
.sports-intro-note { display: grid; gap: 1rem; align-content: end; }
.sports-intro-note p { max-width: 34ch; margin: 0; color: #56617b; font-size: clamp(1rem, 1.2vw, 1.14rem); line-height: 1.62; }
.sports-intro-note span { width: fit-content; padding: 0.52rem 0.78rem; border: 1px solid rgba(77, 65, 190, 0.14); border-radius: 999px; color: #4d43b7; background: rgba(255, 255, 255, 0.68); font-size: .8125rem; font-weight: 780; }

.sports-state { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; margin-bottom: 1rem; padding: 1.15rem 1.3rem; border: 1px solid rgba(70, 65, 166, 0.13); border-radius: 1.25rem; background: rgba(255, 255, 255, 0.72); box-shadow: 0 1rem 2.8rem rgba(55, 67, 111, 0.07); backdrop-filter: blur(16px); }
.sports-state-mark { width: 0.85rem; aspect-ratio: 1; border: 0.22rem solid rgba(79, 70, 197, 0.2); border-top-color: #5146c3; border-radius: 50%; animation: sports-state-spin 900ms linear infinite; }
.sports-state[data-state="success"] .sports-state-mark { border: 0; background: #36a7cf; box-shadow: 0 0 0 0.34rem rgba(54, 167, 207, 0.16); animation: none; }
.sports-state[data-state="empty"] .sports-state-mark,
.sports-state[data-state="offline"] .sports-state-mark { border: 0; background: #df895f; box-shadow: 0 0 0 0.34rem rgba(223, 137, 95, 0.16); animation: none; }
.sports-state[data-state="error"] .sports-state-mark,
.sports-state[data-state="incompatible"] .sports-state-mark { border: 0; background: #c95d73; box-shadow: 0 0 0 0.34rem rgba(201, 93, 115, 0.16); animation: none; }
.sports-state p,
.sports-state h2 { margin: 0; }
.sports-state [data-state-label] { color: #5549c5; font-size: .8125rem; font-weight: 820; letter-spacing: 0.11em; }
.sports-state h2 { margin-top: 0.25rem; font-size: clamp(1.1rem, 1.5vw, 1.35rem); letter-spacing: -0.025em; }
.sports-state [data-state-copy] { margin-top: 0.24rem; color: #657087; font-size: 0.86rem; line-height: 1.45; }
@keyframes sports-state-spin { to { transform: rotate(360deg); } }

.sports-shell { display: grid; grid-template-columns: minmax(16rem, 0.32fr) minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(53, 64, 104, 0.1); border-radius: clamp(1.7rem, 3vw, 2.7rem); background: rgba(255, 255, 255, 0.74); box-shadow: 0 2.5rem 7rem rgba(57, 68, 112, 0.12); backdrop-filter: blur(18px); scroll-margin-top: 5.5rem; }
.sports-roadmap { display: grid; align-content: start; gap: 1.6rem; padding: clamp(1.4rem, 3vw, 2.2rem); color: #f8fbff; background: radial-gradient(circle at 10% 8%, rgba(95, 201, 241, 0.24), transparent 15rem), radial-gradient(circle at 90% 82%, rgba(131, 100, 231, 0.32), transparent 17rem), #111a34; }
.sports-roadmap > div:first-child { display: grid; gap: 0.4rem; }
.sports-roadmap > div:first-child p { margin: 0; color: #b7eaff; font-size: .8125rem; font-weight: 820; letter-spacing: 0.12em; }
.sports-roadmap > div:first-child strong { max-width: 13ch; font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.02; letter-spacing: -0.035em; }
.sports-roadmap ol { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.sports-roadmap button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem; align-items: center; width: 100%; min-height: 3.7rem; padding: 0.7rem 0.8rem; border: 1px solid transparent; border-radius: 1rem; color: rgba(238, 243, 255, 0.72); background: transparent; text-align: left; cursor: pointer; }
.sports-roadmap button span { color: #9bdff6; font-size: .8125rem; font-weight: 820; letter-spacing: 0.08em; }
.sports-roadmap button strong { min-width: 0; font-size: 0.84rem; line-height: 1.25; }
.sports-roadmap button[data-state="current"] { border-color: rgba(178, 228, 248, 0.22); color: white; background: rgba(255, 255, 255, 0.1); }
.sports-roadmap button[data-state="complete"] { color: #c6f0ff; }
.sports-roadmap button:focus-visible { outline: 3px solid #74d7fb; outline-offset: 3px; }
.sports-connection-note { display: grid; grid-template-columns: auto 1fr; gap: 0.65rem; align-items: start; margin-top: 0.4rem; padding: 0.85rem; border: 1px solid rgba(183, 234, 255, 0.16); border-radius: 1rem; background: rgba(255, 255, 255, 0.06); }
.sports-connection-note > span { width: 0.58rem; aspect-ratio: 1; margin-top: 0.25rem; border-radius: 50%; background: #7bd8f6; }
.sports-connection-note p { display: grid; gap: 0.18rem; margin: 0; color: rgba(237, 244, 255, 0.66); font-size: .8125rem; line-height: 1.4; }
.sports-connection-note strong { color: white; }
.sports-workspace-main { min-width: 0; padding: clamp(1.2rem, 3.4vw, 3.2rem); }

.sports-selector-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(14rem, 0.72fr) auto; gap: 1rem 1.3rem; align-items: end; padding: 0 0 clamp(1.5rem, 3vw, 2.4rem); border-bottom: 1px solid rgba(48, 59, 96, 0.1); }
.sports-selector-panel p,
.sports-selector-panel h2 { margin: 0; }
.sports-selector-panel > div > p { color: #574bc7; font-size: .8125rem; font-weight: 820; letter-spacing: 0.11em; }
.sports-selector-panel h2 { max-width: 18ch; margin-top: 0.4rem; font-size: clamp(1.7rem, 2.9vw, 2.8rem); line-height: 1; letter-spacing: -0.045em; }
.sports-selector-panel label { display: grid; gap: 0.5rem; }
.sports-selector-panel label > span { color: #5a647e; font-size: .8125rem; font-weight: 760; }
.sports-selector-panel select,
.sports-field input,
.sports-field textarea,
.sports-field select,
.sports-question-group input,
.sports-file-field input { width: 100%; min-height: 3.1rem; padding: 0.72rem 0.85rem; border: 1px solid rgba(44, 55, 92, 0.16); border-radius: 0.9rem; color: #17213c; background: white; font: inherit; font-size: 0.94rem; }
.sports-refresh { min-height: 3.1rem; padding: 0.72rem 0.85rem; border: 0; color: #493fb5; background: transparent; font-weight: 780; cursor: pointer; }
.sports-selector-panel select:focus-visible,
.sports-field input:focus-visible,
.sports-field textarea:focus-visible,
.sports-field select:focus-visible,
.sports-question-group input:focus-visible,
.sports-file-field input:focus-visible,
.sports-refresh:focus-visible,
.sports-form-actions button:focus-visible { outline: 3px solid #4f8cff; outline-offset: 3px; }

.sports-profile { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); gap: 1rem 2rem; margin-top: clamp(1.4rem, 3vw, 2.3rem); padding: clamp(1.2rem, 2.7vw, 2rem); border: 1px solid rgba(75, 64, 187, 0.12); border-radius: 1.4rem; background: linear-gradient(135deg, rgba(235, 249, 255, 0.9), rgba(243, 239, 255, 0.92), rgba(255, 245, 241, 0.9)); }
.sports-profile p,
.sports-profile h2 { margin: 0; }
.sports-profile > div > p { color: #5548c3; font-size: .8125rem; font-weight: 820; letter-spacing: 0.11em; }
.sports-profile h2 { margin-top: 0.38rem; font-size: clamp(1.65rem, 2.8vw, 2.6rem); line-height: 1; letter-spacing: -0.04em; }
.sports-profile > p { align-self: end; max-width: 42ch; color: #5b6580; line-height: 1.55; }
.sports-profile ul { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 0.45rem; margin: 0.3rem 0 0; padding: 0; list-style: none; }
.sports-profile li { padding: 0.45rem 0.65rem; border: 1px solid rgba(70, 61, 168, 0.12); border-radius: 999px; color: #4d459d; background: rgba(255, 255, 255, 0.68); font-size: .8125rem; font-weight: 720; }

.sports-preview-form { margin-top: clamp(1.7rem, 4vw, 3.4rem); }
.sports-section-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.sports-section-heading > span { display: grid; place-items: center; min-width: 4.2rem; min-height: 4.2rem; border-radius: 50%; color: white; background: #111a34; font-size: .8125rem; font-weight: 820; }
.sports-section-heading > div { display: grid; gap: 0.35rem; }
.sports-section-heading p,
.sports-section-heading h2 { margin: 0; }
.sports-section-heading [data-section-key] { color: #5649c6; font-size: .8125rem; font-weight: 820; letter-spacing: 0.11em; }
.sports-section-heading h2 { max-width: 19ch; font-size: clamp(1.85rem, 3.4vw, 3.25rem); line-height: 1; letter-spacing: -0.045em; }
.sports-section-heading [data-section-help] { color: #667087; font-size: 0.84rem; line-height: 1.45; }

.sports-dynamic-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sports-field,
.sports-readonly-field,
.sports-choice-group,
.sports-question-group,
.sports-conditional-fields { min-width: 0; padding: 1.05rem; border: 1px solid rgba(45, 56, 94, 0.1); border-radius: 1.15rem; background: rgba(248, 250, 255, 0.78); }
.sports-field { display: grid; gap: 0.5rem; }
.sports-field > span,
.sports-readonly-field > span,
.sports-question-group > legend,
.sports-choice-group > legend { color: #222d4a; font-size: 0.9rem; font-weight: 780; }
.sports-field > small,
.sports-readonly-field > small,
.sports-choice-group > small,
.sports-question-group > small { color: #6a7388; font-size: .8125rem; line-height: 1.45; }
.sports-field textarea { min-height: 7rem; resize: vertical; }
.sports-readonly-field { display: grid; gap: 0.42rem; }
.sports-readonly-field strong { font-size: 1.25rem; }
.sports-choice-group,
.sports-question-group { margin: 0; }
.sports-choice-group { grid-column: 1 / -1; }
.sports-choice-group > legend,
.sports-question-group > legend { padding: 0 0.3rem; }
.sports-choice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.45rem; }
.sports-choice-list label { display: flex; gap: 0.65rem; align-items: center; min-height: 3rem; padding: 0.72rem 0.8rem; border: 1px solid rgba(48, 59, 96, 0.1); border-radius: 0.9rem; background: white; cursor: pointer; }
.sports-choice-list input { width: 1rem; height: 1rem; accent-color: #5549c5; }
.sports-choice-list input:focus-visible { outline: 3px solid #4f8cff; outline-offset: 3px; }
.sports-question-group { display: grid; grid-column: 1 / -1; gap: 0.8rem; }
.sports-question-group label { display: grid; gap: 0.42rem; padding: 0.85rem; border-radius: 0.95rem; background: white; }
.sports-question-group label > span { font-size: 0.88rem; font-weight: 740; }
.sports-question-group label > small { color: #6a7388; font-size: .8125rem; line-height: 1.4; }
.sports-file-field { grid-column: 1 / -1; }
.sports-conditional-fields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; background: linear-gradient(135deg, rgba(238, 248, 255, 0.84), rgba(247, 241, 255, 0.84)); }
.sports-conditional-heading,
.sports-fixed-boundary { grid-column: 1 / -1; }
.sports-conditional-heading h3,
.sports-conditional-heading p { margin: 0; }
.sports-conditional-heading h3 { font-size: 1.12rem; }
.sports-conditional-heading p { margin-top: 0.35rem; color: #657087; font-size: 0.84rem; line-height: 1.5; }
.sports-fixed-boundary { margin: 0; padding: 0.75rem; border-radius: 0.8rem; color: #4d459d; background: rgba(255, 255, 255, 0.72); font-size: .8125rem; font-weight: 720; line-height: 1.45; }

.sports-form-actions { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(48, 59, 96, 0.1); }
.sports-form-actions p { margin: 0; color: #626d85; font-size: .8125rem; text-align: center; }
.sports-form-actions button:disabled { opacity: 0.45; cursor: not-allowed; }
.sports-boundary-card { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: end; margin-top: clamp(2rem, 4vw, 3.5rem); padding: clamp(1.3rem, 3vw, 2.2rem); border: 1px solid rgba(74, 64, 181, 0.12); border-radius: 1.4rem; background: linear-gradient(135deg, rgba(236, 249, 255, 0.84), rgba(247, 239, 255, 0.84), rgba(255, 245, 240, 0.86)); }
.sports-boundary-card p,
.sports-boundary-card h2 { margin: 0; }
.sports-boundary-card > div > p { color: #5548c2; font-size: .8125rem; font-weight: 820; letter-spacing: 0.11em; }
.sports-boundary-card h2 { max-width: 20ch; margin-top: 0.38rem; font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.04; letter-spacing: -0.035em; }
.sports-boundary-card > p { color: #5c6680; font-size: 0.88rem; line-height: 1.58; }

@media (max-width: 980px) {
  .sports-shell { grid-template-columns: 1fr; }
  .sports-roadmap { gap: 1rem; }
  .sports-roadmap > div:first-child strong { max-width: none; }
  .sports-roadmap ol { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-x: auto; }
  .sports-roadmap button { min-width: 10rem; }
  .sports-connection-note { display: none; }
  .sports-selector-panel { grid-template-columns: 1fr minmax(14rem, 0.7fr); }
  .sports-refresh { grid-column: 2; justify-self: start; }
}

@media (max-width: 720px) {
  .sports-main { padding-top: 2rem; }
  .sports-intro,
  .sports-profile,
  .sports-boundary-card { grid-template-columns: 1fr; gap: 1.3rem; }
  .sports-intro h1 { font-size: clamp(2.5rem, 11.5vw, 3.6rem); }
  .sports-state { grid-template-columns: auto minmax(0, 1fr); }
  .sports-state button { grid-column: 1 / -1; width: 100%; }
  .sports-selector-panel { grid-template-columns: 1fr; }
  .sports-refresh { grid-column: 1; justify-self: start; }
  .sports-profile ul { grid-column: 1; }
  .sports-dynamic-fields,
  .sports-conditional-fields { grid-template-columns: 1fr; }
  .sports-choice-group,
  .sports-question-group,
  .sports-file-field,
  .sports-conditional-heading,
  .sports-fixed-boundary { grid-column: 1; }
}

@media (max-width: 500px) {
  .sports-main { padding-inline: 1rem; }
  .sports-header { padding-inline: 1rem; }
  .sports-header > p { display: none; }
  .sports-workspace-main { padding: 1rem; }
  .sports-roadmap { padding: 1rem; }
  .sports-roadmap ol { grid-template-columns: repeat(4, minmax(9rem, 1fr)); }
  .sports-section-heading { grid-template-columns: 1fr; }
  .sports-section-heading > span { place-items: start; min-width: 0; min-height: 0; color: #5549c5; background: transparent; }
  .sports-choice-list { grid-template-columns: 1fr; }
  .sports-form-actions { grid-template-columns: 1fr 1fr; }
  .sports-form-actions p { grid-column: 1 / -1; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sports-state-mark { animation: none; }
  .sports-intake-page * { scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .sports-state,
  .sports-shell,
  .sports-roadmap,
  .sports-roadmap button,
  .sports-profile,
  .sports-field,
  .sports-readonly-field,
  .sports-choice-group,
  .sports-question-group,
  .sports-conditional-fields,
  .sports-boundary-card { border: 1px solid CanvasText; color: CanvasText; background: Canvas; }
}

#site-shell > .site-header {
  position: fixed;
  z-index: 30;
}

#main-content > section[id]:not(#home) {
  scroll-margin-top: 6rem;
}

@media (max-width: 520px) {
  #site-shell > .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
}

@media (max-width: 360px) {
  #site-shell > .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    border-radius: 1.5rem;
  }

  #site-shell > .site-header .nav-action {
    grid-column: 1 / -1;
    justify-self: end;
  }

  #main-content > section[id]:not(#home) {
    scroll-margin-top: 9rem;
  }
}
body:has(> #site-shell) {
  min-width: 0;
}
.sports-intake-page .managed-preparation { min-width: 0; margin-top: 1.5rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid #dce2ef; border-radius: 1.5rem; background: #fff; color: #26334b; }
.sports-intake-page .managed-preparation [hidden] { display: none !important; }
.sports-intake-page .managed-preparation h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.2; }
.sports-intake-page .managed-preparation h3 { margin-block: 1.5rem .8rem; font-size: 1.3rem; }
.sports-intake-page .managed-preparation p { line-height: 1.6; overflow-wrap: anywhere; }
.sports-intake-page .managed-preparation label { display: block; margin-block: .85rem .4rem; font-size: .9rem; font-weight: 650; }
.sports-intake-page .managed-preparation input:not([type="checkbox"]),
.sports-intake-page .managed-preparation select,
.sports-intake-page .managed-preparation textarea { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 2.8rem; padding: .65rem; border: 1px solid #b8c3d6; border-radius: .6rem; background: #fff; color: #243149; font: inherit; }
.sports-intake-page .managed-preparation :focus-visible { outline: 3px solid #5549c5; outline-offset: 3px; }
.sports-intake-page .managed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sports-intake-page .managed-channel, .sports-intake-page .managed-statuses article { min-width: 0; padding: 1rem; border: 1px solid #dce2ef; border-radius: .85rem; background: #f7f9fd; }
.sports-intake-page .managed-choice { display: flex !important; align-items: center; gap: .6rem; }
.sports-intake-page .managed-choice input { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; }
.sports-intake-page .managed-note { padding: 1rem; border-radius: .8rem; background: #f0efff; }
.sports-intake-page .managed-progress, .sports-intake-page .managed-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-block: 1.3rem; }
.sports-intake-page .managed-progress button { flex: 1 1 8rem; min-height: 2.8rem; padding: .65rem; border: 1px solid #b8c3d6; border-radius: .7rem; background: #fff; color: #34405a; font: inherit; cursor: pointer; }
.sports-intake-page .managed-progress [aria-current="step"] { border-color: #5549c5; background: #f0efff; font-weight: 700; }
.sports-intake-page .managed-progress button:disabled { opacity: .5; cursor: default; }
.sports-intake-page .managed-error { padding: .8rem; border-left: 4px solid #a51c30; color: #8e182a; background: #fff0f2; }
.sports-intake-page .managed-summary { display: grid; gap: .8rem; margin-block: 1rem; }
.sports-intake-page .managed-summary > div { padding-bottom: .6rem; border-bottom: 1px solid #dce2ef; overflow-wrap: anywhere; }
.sports-intake-page .managed-summary dt { font-size: .8125rem; font-weight: 700; color: #53607a; }
.sports-intake-page .managed-summary dd { margin: .3rem 0 0; }
.sports-intake-page .managed-statuses { display: grid; gap: .7rem; }
.sports-intake-page .managed-statuses h4 { margin: 0; }
.sports-intake-page .managed-statuses p { margin-bottom: 0; }
.sports-intake-page .managed-preparation fieldset { min-width: 0; margin-top: 1rem; padding: 1rem; border: 1px solid #dce2ef; border-radius: .8rem; }
.sports-intake-page .managed-clear { padding: .6rem; border: 0; background: transparent; color: #5549c5; text-decoration: underline; font: inherit; cursor: pointer; }
@media (max-width: 600px) {
  .sports-intake-page .managed-grid { grid-template-columns: minmax(0, 1fr); }
  .sports-intake-page .managed-actions > button { width: 100%; white-space: normal; }
}

body.sports-intake-page { min-width: 0; }

.sports-intake-page .sports-concept-panel { margin-block: 1.5rem; padding: clamp(1rem, 2vw, 1.5rem); min-width: 0; border: 1px solid #dce2ef; border-radius: 1.1rem; background: #f8faff; }
.sports-intake-page .sports-concept-panel p { line-height: 1.6; overflow-wrap: anywhere; }
.sports-intake-page .sports-concept-panel fieldset { min-width: 0; margin: 1rem 0; padding: 0; border: 0; }
.sports-intake-page .sports-concept-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.sports-intake-page .sports-concept-card { display: grid; align-content: start; gap: .6rem; min-width: 0; padding: 1rem; border: 1px solid #c3cce0; border-radius: .85rem; background: #fff; cursor: pointer; overflow-wrap: anywhere; }
.sports-intake-page .sports-concept-card:has(input:checked) { border-color: #5549c5; background: #f0efff; box-shadow: inset 0 0 0 1px #5549c5; }
.sports-intake-page .sports-concept-card input { width: 1.2rem; height: 1.2rem; accent-color: #5549c5; }
.sports-intake-page .sports-concept-card small { color: #59627a; }
.sports-intake-page .sports-concept-panel :focus-visible { outline: 3px solid #5549c5; outline-offset: 3px; }
.sports-intake-page .sports-concept-panel select { box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 2.8rem; margin-block: .5rem; padding: .6rem; border: 1px solid #b8c3d6; border-radius: .6rem; background: #fff; color: #26334b; font: inherit; }
.sports-intake-page .sports-material-list { display: grid; gap: .75rem; padding-left: 1.25rem; }
.sports-intake-page .sports-material-list p { margin-bottom: .25rem; }
@media (max-width: 700px) {
  .sports-intake-page .sports-concept-cards { grid-template-columns: minmax(0, 1fr); }
}

.sports-intake-page .sports-concept-card { cursor: default; grid-template-rows: auto auto auto auto auto 1fr auto auto; }
.sports-intake-page .sports-concept-card h3 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.sports-intake-page .sports-concept-card h4 { margin: .4rem 0 0; font-size: 1rem; line-height: 1.4; }
.sports-intake-page .sports-concept-card p { margin: 0; font-size: .9rem; }
.sports-intake-page .sports-concept-scenes { margin: 0; padding-left: 1.3rem; font-size: .9rem; line-height: 1.6; }
.sports-intake-page .sports-concept-scenes li + li { margin-top: .5rem; }
.sports-intake-page .sports-example-player { min-width: 0; padding: .8rem; border: 1px dashed #bbc6dc; border-radius: .6rem; background: #f3f6fb; }
.sports-intake-page .sports-example-player video { width: 100%; max-height: 22rem; }
.sports-intake-page .sports-example-player [hidden] { display: none !important; }
.sports-intake-page .sports-concept-select { display: flex; align-items: center; gap: .6rem; padding: .8rem; min-height: 2.8rem; border: 1px solid #756bca; border-radius: .6rem; font-weight: 650; cursor: pointer; }
.sports-intake-page .sports-concept-select input { flex: 0 0 auto; }
@media (min-width: 701px) and (max-width: 1100px) {
  .sports-intake-page .sports-concept-cards { grid-template-columns: minmax(0, 1fr); }
}


body:has(> #site-shell) { overflow-x: clip; background: #f7f9ff; }
#site-shell { color: #11162f; background: #fff; }
#site-shell > .radiant-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  width: 100%;
  max-width: none;
  min-height: 5.75rem;
  margin: 0;
  padding: 1rem max(var(--page-pad), calc((100vw - 81rem) / 2));
  border: 0;
  border-bottom: 1px solid rgba(36, 49, 92, 0.1);
  border-radius: 0;
  color: #11162f;
  background: rgba(249, 251, 255, 0.9);
  box-shadow: 0 0.5rem 2rem rgba(32, 45, 92, 0.06);
  backdrop-filter: blur(18px);
}
#site-shell > .radiant-header::after { display: none; }
.radiant-header .wordmark { color: #11162f; }
.radiant-header .main-nav { display: flex; gap: clamp(1.2rem, 3vw, 2.7rem); }
.radiant-header .main-nav a { color: #303959; font-size: 0.86rem; }
.radiant-header .main-nav a::after { background: #5d5fef; }
.radiant-header .nav-action {
  min-height: 3.2rem;
  padding-inline: 1.45rem;
  border: 0;
  border-radius: 0.9rem;
  color: #fff;
  background: #111733;
  box-shadow: none;
}
#main-content { overflow: clip; }
body .radiant-hero {
  display: block;
  width: 100%;
  min-height: 48rem;
  margin: 0;
  padding: 8.2rem var(--page-pad) 3.4rem;
  border: 0;
  border-radius: 0;
  color: #11162f;
  background:
    radial-gradient(circle at 78% 45%, rgba(223, 230, 255, 0.94) 0, rgba(223, 230, 255, 0.62) 17rem, rgba(244, 232, 255, 0.48) 29rem, transparent 41rem),
    linear-gradient(120deg, #f9fbff 0%, #f4f7ff 64%, #fbf2ff 100%);
  box-shadow: none;
  isolation: isolate;
}
body .radiant-hero::before,
body .radiant-hero::after { display: none; }
.radiant-direction {
  width: fit-content;
  margin: 0 0 2rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  color: #4855a8;
  background: #e9edff;
  font-size: .8125rem;
  font-weight: 820;
  letter-spacing: 0.03em;
}
.radiant-eyebrow { margin: 0 0 1.5rem; color: #5d5fef; font-size: .8125rem; font-weight: 820; letter-spacing: 0.035em; }
body .radiant-hero h1 {
  max-width: 13.5ch;
  margin: 0;
  color: #11162f;
  font-family: var(--display);
  font-size: clamp(3.5rem, 5.1vw, 5.25rem);
  font-weight: 700;
  line-height: 1.01;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.radiant-description { max-width: 39rem; margin: 1.45rem 0 0; color: #5d6786; font-size: clamp(1rem, 1.25vw, 1.16rem); line-height: 1.58; }
.radiant-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.6rem; }
.radiant-button {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  padding-inline: 1.55rem;
  border-radius: 0.9rem;
  font-size: 0.94rem;
  font-weight: 780;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.radiant-button:hover { transform: translateY(-2px); }
.radiant-button:focus-visible { outline: 3px solid #5d5fef; outline-offset: 4px; }
.radiant-button-primary { color: #fff; background: #111733; box-shadow: 0 0.8rem 2rem rgba(17, 23, 51, 0.14); }
.radiant-button-secondary { border: 1px solid #d0d8ef; color: #1b244c; background: rgba(255, 255, 255, 0.84); }
.radiant-platform { padding: clamp(4.5rem, 8vw, 7rem) var(--page-pad); scroll-margin-top: 6rem; background: #fff; }
.radiant-platform-grid { display: grid; grid-template-columns: minmax(0, 0.93fr) minmax(31rem, 1.07fr); gap: clamp(3rem, 7vw, 6rem); align-items: center; width: min(100%, 81rem); margin: 0 auto; }
.radiant-platform-copy h2 { max-width: 12ch; margin: 0; font-family: var(--display); font-size: clamp(2.8rem, 4.3vw, 4.4rem); line-height: 1.02; letter-spacing: -0.05em; text-wrap: balance; }
.radiant-platform-copy > p:last-of-type { max-width: 35rem; margin: 1.5rem 0 0; color: #66708f; font-size: 1rem; line-height: 1.62; }
.radiant-workflow { display: flex; gap: 0.65rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }
.radiant-workflow li { flex: 1; min-width: 6rem; padding: 0.85rem 0.7rem; border-radius: 0.72rem; color: #314071; background: #e9edff; font-size: .8125rem; font-weight: 760; text-align: center; }
.radiant-workflow .is-active { color: #fff; background: #5d5fef; }
.radiant-product { overflow: hidden; border: 1px solid #dce2f3; border-radius: 1.5rem; background: #fff; box-shadow: 0 1.8rem 5rem rgba(40, 54, 112, 0.1); }
.radiant-windowbar { display: flex; min-height: 2.75rem; align-items: center; gap: 0.42rem; padding-inline: 1.1rem; color: #66708f; background: #f6f8ff; }
.radiant-windowbar strong { margin-left: 0.6rem; font-size: .8125rem; letter-spacing: 0.02em; }
.radiant-windowbar .dot { width: 0.62rem; height: 0.62rem; border-radius: 50%; }
.dot-red { background: #ff8492; }.dot-yellow { background: #ffc85f; }.dot-green { background: #63d2a2; }
.radiant-product-body { display: grid; grid-template-columns: 7.6rem 1fr; min-height: 20rem; }
.radiant-product-body aside { display: flex; flex-direction: column; gap: 1.05rem; padding: 1.6rem 1.1rem; color: #6d7693; background: #f4f6ff; font-size: .8125rem; }
.radiant-product-body aside p { margin: 0; font-size: .8125rem; font-weight: 820; }
.radiant-product-body aside strong { color: #151c38; }
.radiant-story-panel { padding: 1.75rem; }
.radiant-story-panel > p { margin: 0; color: #66708f; font-size: .8125rem; font-weight: 820; }
.radiant-story-panel h3 { max-width: 18ch; margin: 1rem 0 1.5rem; font-size: clamp(1.65rem, 2.7vw, 2.2rem); line-height: 1.08; letter-spacing: -0.035em; }
.radiant-story-row { display: grid; grid-template-columns: 1fr 7rem; gap: 0.75rem; }
.radiant-evidence-card,
.radiant-approved-card { padding: 1rem; border-radius: 1rem; background: #f5f7ff; }
.radiant-evidence-card strong,
.radiant-evidence-card span,
.radiant-approved-card strong,
.radiant-approved-card span { display: block; }
.radiant-evidence-card strong { font-size: .8125rem; }
.radiant-evidence-card i { display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.55rem; border-radius: 50%; background: #5d5fef; }
.radiant-evidence-card span { margin-top: 0.8rem; color: #66708f; font-size: .8125rem; line-height: 1.45; }
.radiant-approved-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; text-align: center; background: #eef1ff; }
.radiant-approved-card strong { color: #4955a8; font-size: .8125rem; }
.radiant-approved-card span { font-size: .8125rem; }
#sports,
#how,
#company { scroll-margin-top: 6rem; }

@media (max-width: 900px) {
  #site-shell > .radiant-header { grid-template-columns: auto 1fr auto; padding-inline: 1.25rem; }
  .radiant-header .main-nav { display: none; }
  .radiant-header .nav-menu { display: block; justify-self: end; }
  .radiant-header .nav-action { margin-left: 0; }
  .radiant-hero-grid,
  .radiant-platform-grid { grid-template-columns: 1fr; }
      .radiant-platform-grid { gap: 3.5rem; }
}

@media (max-width: 520px) {
  #site-shell > .radiant-header { min-height: 4.7rem; grid-template-columns: auto auto minmax(0, 1fr); gap: 0.65rem; padding: 0.7rem 1rem; }
  .radiant-header > .wordmark { font-size: 1rem; }
  .radiant-header .nav-menu { justify-self: center; }
  .radiant-header .nav-menu summary { min-height: 2.8rem; padding-inline: 0.8rem; font-size: .8125rem; }
  .radiant-header .nav-menu nav { position: fixed; top: 5.3rem; right: 1rem; left: 1rem; width: auto; }
  .radiant-header .nav-action { min-height: 2.8rem; justify-self: end; padding-inline: 0.82rem; font-size: .8125rem; white-space: normal; text-align: center; }
  body .radiant-hero { min-height: 0; padding: 7rem 1.5rem 2.8rem; }
    .radiant-direction { margin-bottom: 1.75rem; }
  body .radiant-hero h1 { max-width: none; font-size: clamp(2.65rem, 12vw, 3.25rem); line-height: 1.03; }
    .radiant-description { margin-top: 1.3rem; font-size: 1rem; }
  .radiant-actions { display: grid; margin-top: 2rem; }
  .radiant-button { width: 100%; }
            .radiant-platform { padding: 4rem 1.5rem; }
  .radiant-platform-copy h2 { max-width: none; font-size: 2.35rem; }
  .radiant-workflow { flex-direction: column; }
  .radiant-workflow li { width: 100%; }
  .radiant-product-body { display: block; }
  .radiant-product-body aside { display: none; }
  .radiant-story-panel { padding: 1.25rem; }
  .radiant-story-panel h3 { font-size: 1.55rem; }
  .radiant-story-row { grid-template-columns: 1fr; }
  .radiant-approved-card { min-height: 5rem; }
}

@media (max-width: 360px) {
  #site-shell > .radiant-header { grid-template-columns: auto auto; }
  .radiant-header .nav-action { display: none; }
}
.growth-os-preview{position:relative;background:#f4f7f8;color:#10202c;overflow:hidden}.growth-os-preview:before{content:"";position:absolute;width:480px;height:480px;right:-180px;top:-210px;border-radius:50%;background:radial-gradient(circle,rgba(152,222,246,.42),rgba(221,208,255,.15) 48%,transparent 70%)}.growth-os-shell{position:relative;z-index:1;max-width:1280px;margin:auto;padding:64px;border-radius:32px;background:linear-gradient(135deg,#fdfefe,#eaf3f7);border:1px solid rgba(26,65,82,.1);display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;box-shadow:0 28px 90px rgba(32,67,84,.09)}.growth-os-copy h2{margin:14px 0 18px;max-width:700px;font-size:clamp(38px,5vw,67px);line-height:1;letter-spacing:-.05em}.growth-os-copy>p:last-of-type{max-width:650px;color:#62727d;line-height:1.7}.growth-os-actions{display:flex;gap:22px;align-items:center;margin-top:28px}.growth-os-actions>a:last-child{color:#334b59;text-underline-offset:4px}.growth-loop-mini{display:grid;grid-template-columns:1fr 1fr;gap:12px;list-style:none;padding:0;margin:0}.growth-loop-mini li{min-height:150px;padding:21px;border:1px solid rgba(35,76,95,.1);border-radius:18px;background:rgba(255,255,255,.7);display:flex;flex-direction:column}.growth-loop-mini span{color:#4190b0;font-size:13px;letter-spacing:.12em}.growth-loop-mini strong{margin:22px 0 8px;font-size:19px}.growth-loop-mini small{color:#75838d;line-height:1.5}.growth-loop-mini li:last-child{color:#fff;background:#0d2433}.growth-loop-mini li:last-child small{color:#b9c9d3}@media(max-width:850px){.growth-os-shell{padding:32px;grid-template-columns:1fr;gap:35px}.growth-loop-mini{grid-template-columns:1fr}.growth-loop-mini li{min-height:120px}.growth-os-actions{align-items:flex-start;flex-direction:column}}