/* Shared component styling: logo, nav, footer, CTA. Scaffolding only. */

.sb-header {
  border-bottom: 1px solid var(--sb-color-border);
}

.sb-footer {
  border-top: 1px solid var(--sb-color-border);
}

.sb-logo__text {
  font-weight: 700;
  font-size: var(--sb-font-size-lg);
  color: var(--sb-color-text);
}

.sb-nav__list {
  display: flex;
  gap: var(--sb-space-md);
}

.sb-nav__link {
  color: var(--sb-color-text-muted);
}

.sb-nav__link--active {
  color: var(--sb-color-text);
}

.sb-cta {
  display: inline-block;
  padding: var(--sb-space-sm) var(--sb-space-md);
  background-color: var(--sb-color-accent);
  color: var(--sb-color-bg);
  border-radius: var(--sb-radius-sm);
  font-weight: 600;
}

.sb-footer__brand {
  font-weight: 600;
}

/* ==========================================================================
   Main hero prototype — scoped to Main only, see layout.css for the
   `.sb-site--main` scoping note. Namespaced under `.main-hero*`.
   ========================================================================== */

/* --- Glass header: a wide floating panel, not a slab and not a pill.
   Visual treatment lives on `-inner` (the positioning/alignment wrapper
   is in layout.css); resting state is intentionally light/transparent,
   and only firms up once scrolled, so it reads as glass over the hero
   image rather than a dark bar sitting on top of it.

   Border-radius note: the rendered bar is ~69px tall (0.65rem vertical
   padding ×2 plus the 3rem logo), so a radius anywhere near half that
   height (~34px) still draws as a fully rounded stadium/pill end,
   regardless of which token produced the px value — `--sb-radius-lg`
   (32px) was tried first and is in fact still mathematically close to a
   pill at this height. `--sb-radius-md` (20px) is clearly sub-half-height,
   which is what actually reads as a rounded-rect panel instead of a
   capsule. */

/* Top scrim gradient — see layout.css for the positioning/z-index. Deep
   Void fading to fully transparent; deliberately not a flat/solid tone
   so it reads as a cinematic veil, not a second header bar. */

.main-hero__header::before {
  background: linear-gradient(180deg, rgba(5, 7, 13, 0.6) 0%, rgba(5, 7, 13, 0.32) 45%, rgba(5, 7, 13, 0) 100%);
}

.main-hero__header-inner {
  border-radius: var(--sb-radius-md);
  background-color: rgba(11, 16, 32, 0.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(244, 239, 230, 0.12);
  box-shadow: 0 8px 28px -14px rgba(0, 0, 0, 0.5);
  transition: background-color 240ms ease, box-shadow 240ms ease;
}

.main-hero__header.is-scrolled .main-hero__header-inner {
  background-color: var(--sb-color-surface-glass-strong);
  box-shadow: 0 10px 32px -10px rgba(0, 0, 0, 0.55);
}

.main-hero__logo {
  display: inline-flex;
  align-items: center;
}

.main-hero__logo-img {
  display: block;
  height: 3rem;
  width: auto;
}

.main-hero__nav-link {
  color: var(--sb-color-text-secondary);
  font-size: var(--sb-font-size-sm);
  font-weight: 500;
  transition: color 200ms ease;
}

.main-hero__nav-link:hover,
.main-hero__nav-link:focus-visible {
  color: var(--sb-color-text);
}

.main-hero__nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.05rem;
  border-radius: var(--sb-radius-pill);
  background-color: rgba(11, 16, 32, 0.5);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: var(--sb-color-text);
  font-weight: 600;
  font-size: var(--sb-font-size-sm);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.main-hero__nav-cta:hover,
.main-hero__nav-cta:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(85, 221, 251, 0.55);
  box-shadow: 0 0 20px -6px rgba(139, 92, 246, 0.4);
}

/* --- Hero overlays --- */

.main-hero__overlay {
  background:
    linear-gradient(
      100deg,
      rgba(5, 7, 13, 0.93) 0%,
      rgba(5, 7, 13, 0.62) 38%,
      rgba(5, 7, 13, 0.28) 65%,
      rgba(5, 7, 13, 0.16) 100%
    ),
    linear-gradient(180deg, rgba(5, 7, 13, 0.05) 0%, rgba(5, 7, 13, 0.32) 65%, rgba(5, 7, 13, 0.96) 100%);
}

.main-hero__glow {
  background:
    radial-gradient(circle at 82% 18%, rgba(139, 92, 246, 0.22), transparent 55%),
    radial-gradient(circle at 60% 78%, rgba(85, 221, 251, 0.16), transparent 50%);
  mix-blend-mode: screen;
}

/* --- Hero copy --- */

.main-hero__eyebrow {
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-color-accent-alt);
}

.main-hero__headline {
  font-family: var(--sb-font-serif);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--sb-color-text);
}

.main-hero__subheadline {
  font-size: var(--sb-font-size-lg);
  line-height: 1.45;
  color: var(--sb-color-text-secondary);
  max-width: 34rem;
}

.main-hero__supporting {
  font-size: 0.9375rem;
  color: rgba(174, 182, 200, 0.65);
}

.main-hero__scrollhint {
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-muted);
  opacity: 0.7;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: no-preference) {
  .main-hero__scrollhint {
    animation: main-hero-scrollhint-bob 2.4s ease-in-out infinite;
  }
}

@keyframes main-hero-scrollhint-bob {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 6px);
  }
}

/* --- Buttons --- */

.main-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: var(--sb-radius-pill);
  font-weight: 600;
  font-size: var(--sb-font-size-base);
  border: 1px solid transparent;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.main-hero__btn--primary {
  background-color: rgba(11, 16, 32, 0.55);
  background-image: linear-gradient(160deg, rgba(139, 92, 246, 0.22), rgba(85, 221, 251, 0.15));
  border-color: rgba(139, 92, 246, 0.5);
  color: var(--sb-color-text);
  box-shadow: 0 0 18px -8px rgba(139, 92, 246, 0.28);
}

.main-hero__btn--primary:hover,
.main-hero__btn--primary:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(85, 221, 251, 0.65);
  box-shadow: 0 0 30px -6px rgba(139, 92, 246, 0.48);
}

.main-hero__btn--secondary {
  background-color: transparent;
  color: var(--sb-color-text);
  border-color: var(--sb-color-border-strong);
}

.main-hero__btn--secondary:hover,
.main-hero__btn--secondary:focus-visible {
  border-color: var(--sb-color-mist-gray);
  transform: translateY(-1px);
}

/* --- First continuation section copy: serif headline continues the
   hero's editorial language; points use a thin accent mark instead of
   an icon/card, kept deliberately small and low-opacity so it reads as
   a subtle detail, not a bright gradient block. --- */

.main-continuation__headline {
  font-family: var(--sb-font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--sb-color-text);
}

.main-continuation__body {
  font-size: var(--sb-font-size-lg);
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

.main-continuation__point-mark {
  display: block;
  width: 1.75rem;
  height: 2px;
  margin-bottom: var(--sb-space-sm);
  background: linear-gradient(90deg, var(--sb-color-accent), var(--sb-color-accent-alt));
  opacity: 0.75;
}

.main-continuation__point-title {
  font-size: var(--sb-font-size-lg);
  font-weight: 650;
  color: var(--sb-color-text);
  margin-bottom: var(--sb-space-xs);
}

.main-continuation__point-body {
  font-size: var(--sb-font-size-base);
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
  max-width: 30rem;
}

/* --- Second continuation section copy: same eyebrow/serif-headline
   language as the sections above it, scaled down slightly since this is
   the most concrete/quietest of the three so far. --- */

.main-platform__eyebrow {
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-color-accent-alt);
}

.main-platform__headline {
  font-family: var(--sb-font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--sb-color-text);
}

.main-platform__body {
  font-size: var(--sb-font-size-lg);
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

.main-platform__case-title {
  font-size: var(--sb-font-size-base);
  font-weight: 650;
  color: var(--sb-color-text);
  margin-bottom: var(--sb-space-xs);
}

.main-platform__case-body {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

/* --- Final CTA copy. The button reuses `.main-hero__btn`/`--primary`
   directly (see public/main/index.php) rather than duplicating that
   visual language under a new name — same restrained dark-glass +
   violet/cyan border treatment used everywhere else this page has a
   primary action. Panel gets a soft glass tint (no blur — nothing
   scrolls behind it to blur) so it reads as one deliberate closing
   moment, not a flat continuation of the page background. --- */

.main-cta__inner {
  border: 1px solid var(--sb-color-border);
  border-radius: var(--sb-radius-lg);
  background-color: var(--sb-color-surface-glass);
}

.main-cta__eyebrow {
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-color-accent-alt);
}

.main-cta__headline {
  font-family: var(--sb-font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--sb-color-text);
}

.main-cta__body {
  font-size: var(--sb-font-size-lg);
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
  max-width: 30rem;
}

/* --- Early-access form (Main only). Inputs reuse the panel's own glass
   tone, one step darker, so they read as recessed fields inside the
   panel rather than separate cards; focus/error states use the existing
   accent tokens (Lucid Cyan for focus, the feedback-error token from
   tokens.css for validation) instead of introducing a new color theme. --- */

.main-cta__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-md);
  text-align: left;
}

.main-cta__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sb-space-md);
}

.main-cta__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.main-cta__label {
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  color: var(--sb-color-text-secondary);
}

.main-cta__input {
  width: 100%;
  font: inherit;
  font-size: var(--sb-font-size-base);
  color: var(--sb-color-text);
  background-color: rgba(5, 7, 13, 0.4);
  border: 1px solid var(--sb-color-border);
  border-radius: var(--sb-radius-sm);
  padding: 0.65rem 0.85rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.main-cta__textarea {
  resize: vertical;
  min-height: 4.5rem;
}

.main-cta__select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sb-color-mist-gray) 50%), linear-gradient(135deg, var(--sb-color-mist-gray) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) center, calc(100% - 0.75rem) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.main-cta__input::placeholder {
  color: var(--sb-color-text-muted);
}

.main-cta__input:hover {
  border-color: var(--sb-color-border-strong);
}

.main-cta__input:focus-visible {
  outline: none;
  border-color: var(--sb-color-accent-alt);
  box-shadow: 0 0 0 3px rgba(85, 221, 251, 0.16);
}

.main-cta__input--error {
  border-color: var(--sb-color-feedback-error);
}

.main-cta__field-error,
.main-cta__form-error {
  font-size: 0.875rem;
  color: var(--sb-color-feedback-error);
}

.main-cta__form-error {
  margin: 0;
}

.main-cta__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.main-cta__checkbox {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--sb-color-accent-alt);
  flex-shrink: 0;
}

.main-cta__consent label {
  font-size: 0.9375rem;
  color: var(--sb-color-text-secondary);
}

.main-cta__submit {
  align-self: flex-start;
  margin-top: 0.25rem;
}

/* Honeypot: visually hidden but still present/focusable in the DOM so
   simple bots that fill every input still trip it; real users never
   see or reach it via normal tab order in practice (off-screen + not a
   real tab stop). */
.main-cta__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}

.main-cta__success {
  width: 100%;
  padding: var(--sb-space-md) var(--sb-space-lg);
  border: 1px solid var(--sb-color-border);
  border-radius: var(--sb-radius-sm);
  background-color: rgba(85, 221, 251, 0.08);
}

.main-cta__success-text {
  color: var(--sb-color-text);
  font-size: var(--sb-font-size-lg);
}

@media (max-width: 640px) {
  .main-cta__row {
    grid-template-columns: 1fr;
  }
}

/* --- Real footer copy (Main only) --- */

.main-footer__name {
  font-weight: 650;
  color: var(--sb-color-text);
}

.main-footer__tagline,
.main-footer__copyright {
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-muted);
}

.main-footer__nav a {
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-secondary);
  transition: color 200ms ease;
}

.main-footer__nav a:hover,
.main-footer__nav a:focus-visible {
  color: var(--sb-color-text);
}

/* --- Quiet footer legal links (Main only) — deliberately smaller and
   more muted than .main-footer__nav above, so they read as a quiet
   utility row, not a second primary nav. --- */

.main-footer__legal a {
  font-size: 0.8125rem;
  color: var(--sb-color-text-muted);
  transition: color 200ms ease;
}

.main-footer__legal a:hover,
.main-footer__legal a:focus-visible {
  color: var(--sb-color-text-secondary);
}

/* --- Legal page copy (Main only) — Privacy, Cookies, AI Notice, Terms,
   Do Not Sell or Share. Same restrained dark/glass language as the rest
   of Main: serif title matching other section headlines, Mist Gray body
   text, a thin border separating the title block from the long-form
   content instead of a heavier card/panel treatment. --- */

.main-legal__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-secondary);
  text-decoration: none;
  margin-bottom: var(--sb-space-lg);
  transition: color 200ms ease;
}

.main-legal__back:hover,
.main-legal__back:focus-visible {
  color: var(--sb-color-text);
}

.main-legal__eyebrow {
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-color-accent-alt);
}

.main-legal__title {
  font-family: var(--sb-font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--sb-color-text);
  margin-top: var(--sb-space-xs);
}

.main-legal__updated {
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-muted);
  margin-top: var(--sb-space-sm);
  margin-bottom: var(--sb-space-lg);
  padding-bottom: var(--sb-space-lg);
  border-bottom: 1px solid var(--sb-color-border);
}

.main-legal__content h2 {
  font-size: var(--sb-font-size-lg);
  font-weight: 650;
  color: var(--sb-color-text);
  margin-top: var(--sb-space-xl);
  margin-bottom: var(--sb-space-sm);
}

.main-legal__content h2:first-child {
  margin-top: 0;
}

.main-legal__content p,
.main-legal__content li {
  font-size: var(--sb-font-size-base);
  line-height: 1.6;
  color: var(--sb-color-text-secondary);
}

.main-legal__content p + p,
.main-legal__content ul {
  margin-top: var(--sb-space-sm);
}

.main-legal__content ul {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-left: 1.25rem;
}

.main-legal__content a {
  color: var(--sb-color-accent-alt);
  text-underline-offset: 0.15em;
}

.main-legal__content a:hover,
.main-legal__content a:focus-visible {
  color: var(--sb-color-text);
}

/* --- Reveal-on-scroll (progressive enhancement, JS-driven, see main.js) --- */

@media (prefers-reduced-motion: no-preference) {
  .main-hero-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .main-hero-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* --- Responsive: keep the larger logo from feeling oversized on a
   narrow, already-compact mobile header (see layout.css for the matching
   header/content padding adjustments at this breakpoint). --- */

@media (max-width: 640px) {
  .main-hero__logo-img {
    height: 2.5rem;
  }
}

/* ==========================================================================
   Worlds hero v1 — scoped to Worlds only, see layout.css for the
   `.sb-site--worlds` scoping note. Namespaced under `.worlds-*`.

   Reuses the exact same hero-background video assets as Main on purpose
   (per project direction), but reads as a distinct, cooler space through
   colour only: Lucid Cyan leads here instead of Aurora Violet (which is
   secondary/restrained), the base overlay is pushed a little darker than
   Main's, and a faint cyan-tinted construction-grid texture sits between
   the overlay and the glow — a quiet nod to "building/reshaping a
   space" without becoming a literal UI grid or cyberpunk noise.
   ========================================================================== */

.worlds-hero__header::before {
  background: linear-gradient(180deg, rgba(5, 7, 13, 0.6) 0%, rgba(5, 7, 13, 0.32) 45%, rgba(5, 7, 13, 0) 100%);
}

.worlds-hero__header-inner {
  border-radius: var(--sb-radius-md);
  /* No scroll-linked "is-scrolled" state here (see layout.css) — uses the
     slightly firmer of Main's two glass states as its single resting
     look, so it stays legible over the bright parts of the video at any
     scroll position. */
  background-color: var(--sb-color-surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(244, 239, 230, 0.12);
  box-shadow: 0 8px 28px -14px rgba(0, 0, 0, 0.5);
}

.worlds-hero__logo {
  display: inline-flex;
  align-items: center;
}

.worlds-hero__logo-img {
  display: block;
  height: 3rem;
  width: auto;
}

/* Persistent brand/tag pair for the fixed header — unlike the hero
   eyebrow (`.worlds-hero__eyebrow`), this stays visible while scrolled
   past the hero, since the header itself is `position: fixed`. Sits
   between the logo and the CTA via `flex: 1` on the centered text
   column, so it self-centers in whatever space is left regardless of
   how wide the logo/CTA happen to be. Hidden at narrower widths below —
   where there isn't room for it next to the logo and "Request Access"
   pill without crowding. The responsive overrides live here rather than
   in layout.css because this file loads after layout.css: an override
   of equal specificity placed in layout.css would lose the cascade tie
   to this file's unconditional base rule regardless of the media query. */
.worlds-hero__brand {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  line-height: 1.3;
  text-align: center;
}

.worlds-hero__brand-name {
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  color: var(--sb-color-text);
}

.worlds-hero__brand-tag {
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--sb-color-text-secondary);
}

/* Tablet: the logo + "Request Access" pill already take up enough of
   the header row that the tag line is the first thing to go — the
   brand name alone still fits without crowding. */
@media (max-width: 768px) {
  .worlds-hero__brand-tag {
    display: none;
  }
}

/* Narrow phones: logo + CTA pill alone already fill the row; drop the
   whole brand block rather than let it wrap or squeeze. */
@media (max-width: 640px) {
  .worlds-hero__brand {
    display: none;
  }
}

.worlds-hero__nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.05rem;
  border-radius: var(--sb-radius-pill);
  background-color: rgba(11, 16, 32, 0.5);
  border: 1px solid rgba(85, 221, 251, 0.4);
  color: var(--sb-color-text);
  font-weight: 600;
  font-size: var(--sb-font-size-sm);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.worlds-hero__nav-cta:hover,
.worlds-hero__nav-cta:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 0 20px -6px rgba(85, 221, 251, 0.4);
}

/* --- Hero overlays --- */

.worlds-hero__overlay {
  /* Pushed a little darker/cooler than Main's equivalent overlay
     (higher opacity stops, slightly bluer tone) per "darker Deep Void
     base" direction.

     Tint strength reduced 30% (each alpha × 0.7, e.g. 0.95 → 0.665) per
     design adjustment — same colors and same gradient angles/stop
     positions as before, only the alpha values changed, so more of the
     raw video shows through without altering the tint's shape. */
  background:
    linear-gradient(
      100deg,
      rgba(4, 6, 11, 0.665) 0%,
      rgba(5, 8, 15, 0.49) 38%,
      rgba(6, 10, 18, 0.252) 65%,
      rgba(6, 10, 18, 0.14) 100%
    ),
    linear-gradient(180deg, rgba(4, 6, 11, 0.07) 0%, rgba(5, 8, 15, 0.28) 65%, rgba(3, 5, 9, 0.679) 100%);
}

/* Faint construction-grid texture — two repeating hairline gradients
   tinted Lucid Cyan, kept just barely visible (low opacity + screen
   blend) so it reads as atmosphere/depth, never as an actual UI grid or
   neon cyberpunk line-work. Overall opacity trimmed further (0.5 -> 0.32,
   ~36%) per v1 polish feedback — same line/gap contrast as before
   (rgba alpha inside the gradients is unchanged), just dimmer overall so
   it's barely felt rather than noticed. */

.worlds-hero__grid {
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(85, 221, 251, 0.05) 0,
      rgba(85, 221, 251, 0.05) 1px,
      transparent 1px,
      transparent 64px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(85, 221, 251, 0.05) 0,
      rgba(85, 221, 251, 0.05) 1px,
      transparent 1px,
      transparent 64px
    );
  mix-blend-mode: screen;
  opacity: 0.32;
}

.worlds-hero__glow {
  /* Lucid Cyan leads, Aurora Violet is the restrained secondary accent —
     the reverse priority from Main's glow, per the accepted per-site
     accent direction (docs/09_visual_direction.md). */
  background:
    radial-gradient(circle at 78% 22%, rgba(85, 221, 251, 0.26), transparent 55%),
    radial-gradient(circle at 58% 80%, rgba(139, 92, 246, 0.14), transparent 50%);
  mix-blend-mode: screen;
}

/* --- Hero copy --- */

.worlds-hero__eyebrow {
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-color-accent-alt);
}

.worlds-hero__headline {
  font-family: var(--sb-font-serif);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--sb-color-text);
}

.worlds-hero__subheadline {
  font-size: var(--sb-font-size-lg);
  line-height: 1.45;
  color: var(--sb-color-text-secondary);
  max-width: 34rem;
}

.worlds-hero__supporting {
  font-size: 0.9375rem;
  color: rgba(174, 182, 200, 0.65);
}

.worlds-hero__scrollhint {
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-muted);
  opacity: 0.7;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: no-preference) {
  .worlds-hero__scrollhint {
    animation: main-hero-scrollhint-bob 2.4s ease-in-out infinite;
  }
}

/* --- Buttons. Same shape/sizing language as Main's `.main-hero__btn`,
   but the primary variant swaps which accent leads — cyan border/glow
   here instead of violet — to match the glow treatment above. --- */

.worlds-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: var(--sb-radius-pill);
  font-weight: 600;
  font-size: var(--sb-font-size-base);
  border: 1px solid transparent;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.worlds-hero__btn--primary {
  background-color: rgba(11, 16, 32, 0.55);
  background-image: linear-gradient(160deg, rgba(85, 221, 251, 0.24), rgba(139, 92, 246, 0.14));
  border-color: rgba(85, 221, 251, 0.5);
  color: var(--sb-color-text);
  box-shadow: 0 0 18px -8px rgba(85, 221, 251, 0.3);
}

.worlds-hero__btn--primary:hover,
.worlds-hero__btn--primary:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 0 30px -6px rgba(85, 221, 251, 0.48);
}

.worlds-hero__btn--secondary {
  background-color: transparent;
  color: var(--sb-color-text);
  border-color: var(--sb-color-border-strong);
}

.worlds-hero__btn--secondary:hover,
.worlds-hero__btn--secondary:focus-visible {
  border-color: var(--sb-color-mist-gray);
  transform: translateY(-1px);
}

/* --- Value proposition copy ("Describe it. Step inside it.") and its
   media stage / feature tray — see layout.css for the structural side
   of all of the below. --- */

.worlds-value__eyebrow {
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sb-color-accent-alt);
}

/* Large two-line editorial display headline. Each
   `.worlds-value__headline-line` is a separate `<span>` in the markup
   (not a single wrapped string), so the "Describe it." / "Step inside
   it." break is always exactly where the copy wants it, not wherever
   the container happens to wrap — see the `<em>inside</em>` treatment
   below for the italic display accent word, and the `white-space:
   nowrap` + min-content grid track in layout.css that keeps each line
   from breaking again internally. This clamp is tuned to comfortably
   fit "Step inside it." (the longer of the two lines) inside the ~43%
   editorial column at typical desktop widths — see the `1024px`
   step-down below for the matching narrower-column case. */
.worlds-value__headline {
  font-family: var(--sb-font-serif);
  font-size: clamp(2.75rem, 4.4vw, 3.85rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--sb-color-text);
}

@media (max-width: 1024px) {
  .worlds-value__headline {
    font-size: clamp(2.25rem, 4.6vw, 3rem);
  }
}

.worlds-value__headline em {
  font-style: italic;
  font-weight: 500;
}

.worlds-value__body {
  font-size: var(--sb-font-size-lg);
  line-height: 1.55;
  color: var(--sb-color-text-secondary);
}

/* --- Media stage permanent edge blending. No ambient glow (removed
   entirely — it was making the rectangular boundary it sat behind
   *more* visible, not less). No color-veil overlay either (an earlier
   attempt painted an opaque `::before` over the video near the top —
   that only ever hid the symptom: the real source rectangle was still
   there underneath, just painted over with a color that's an
   approximation of, not identical to, everything actually behind it).
   One real four-edge alpha mask instead, applied directly to the media
   itself, so the video/poster genuinely become transparent at their
   real edges rather than being covered by anything.

   Rebuilt in this pass to stop relying on `mask-composite`/
   `-webkit-mask-composite` at all: the previous version put *two*
   gradient layers (side fade + vertical fade) on the same element and
   depended on `mask-composite: intersect` to combine them — and after
   two tuning passes on the vertical gradient's stops produced no visible
   change at the top edge, the composite step itself (not the gradient
   math) is the more likely culprit. Sides/bottom looked fine throughout
   only because the *fallback* `::after` layer below (plain stacked
   `background` layers, no compositing property involved at all) was
   quietly doing that work regardless of whether the real mask's
   compositing ever took effect — and the top, deliberately left to the
   real mask alone both times, had no such safety net.

   The fix: split the two fades across *two different elements* instead
   of combining them on one. `.worlds-media-stage__visual` gets the
   vertical (top+bottom) fade; `.worlds-media-stage__poster`/`__video`
   each get the horizontal (side) fade individually. Since the
   poster/video are children of `.visual`, a child's own side-masked
   alpha is naturally reduced further by its ancestor's own vertical
   mask when the browser composites the child into its parent — a
   single mask-image per element, so nothing here needs
   `mask-composite` to be understood at all, only that `mask-image`
   itself renders a gradient's alpha correctly, which is universally
   more reliable. The bottom-corner rounding ellipse from the previous
   version is dropped for the same reason (it also depended on a third
   composited layer) — the `::after` fallback's own corner ellipses
   already produce that rounding unconditionally, in every browser,
   regardless of what the real mask does, so nothing is lost. */
@supports (mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent)) {
  /* Vertical: top and bottom. The top transition is deliberately long
     (22%) and multi-stop — genuinely `transparent` at the true edge,
     ramping gradually rather than snapping to opaque — strong/deep
     enough to fully remove the source boundary while still reading as
     a soft dissolve. Bottom (`82%` → `100%`) is unchanged from the
     already-accepted result. */
  .worlds-media-stage__visual {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.18) 3%,
      rgba(0, 0, 0, 0.42) 7%,
      rgba(0, 0, 0, 0.7) 12%,
      rgba(0, 0, 0, 0.92) 17%,
      #000 22%,
      #000 82%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.18) 3%,
      rgba(0, 0, 0, 0.42) 7%,
      rgba(0, 0, 0, 0.7) 12%,
      rgba(0, 0, 0, 0.92) 17%,
      #000 22%,
      #000 82%,
      transparent 100%
    );
  }

  /* Horizontal: sides. Values unchanged from the accepted result —
     only *where* this fade is declared moved, from the shared wrapper
     to each replaced element individually, for the reasons above. */
  .worlds-media-stage__poster,
  .worlds-media-stage__video {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%);
  }
}

/* Universal fallback for browsers *without* mask-image support — see
   the structural half of this rule (`position`/`inset`/`z-index`) in
   layout.css. Left/right/bottom/corners only here, deliberately
   unchanged from the accepted result: reaches the section's *exact*
   background color (`var(--sb-color-bg)`, no reduced opacity) at the
   true outer edges. All layers use the same solid color, so their
   stacking order doesn't matter (a transparent area simply reveals
   whichever layer beneath *is* opaque there). No top-fade layer in
   *this* rule — see the `@supports not(...)` block directly below,
   which adds one only where the real mask above can't run, instead of
   unconditionally here where it would otherwise double up with the
   mask's own new top fade and risk compositing into an excessively
   dark band. */
.worlds-media-stage__visual::after {
  background:
    radial-gradient(ellipse 38% 34% at 0% 0%, var(--sb-color-bg) 0%, transparent 100%),
    radial-gradient(ellipse 38% 34% at 100% 0%, var(--sb-color-bg) 0%, transparent 100%),
    radial-gradient(ellipse 42% 46% at 0% 100%, var(--sb-color-bg) 0%, transparent 100%),
    radial-gradient(ellipse 42% 46% at 100% 100%, var(--sb-color-bg) 0%, transparent 100%),
    linear-gradient(to right, var(--sb-color-bg) 0%, transparent 11%, transparent 89%, var(--sb-color-bg) 100%),
    linear-gradient(to bottom, transparent 82%, var(--sb-color-bg) 100%);
}

/* Top-fade addition, *only* for browsers that support neither the
   standard nor the legacy mask syntax (mirrors the `@supports` guard on
   the real mask above, inverted) — in those browsers the real alpha
   mask above never ran at all, so without this the top edge would still
   be fully exposed. Short and weak on purpose ("as weak and short as
   possible" — a real center-preserving beam window isn't attempted
   here the way the real mask's does it; that took real alpha
   transparency to pull off safely, which this flat-color fallback
   doesn't have). Restates the full six-layer list from `::after` above
   plus this one extra layer, since `background` has no shorthand for
   "add one more layer to what's already declared." */
@supports not ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
  .worlds-media-stage__visual::after {
    background:
      radial-gradient(ellipse 38% 34% at 0% 0%, var(--sb-color-bg) 0%, transparent 100%),
      radial-gradient(ellipse 38% 34% at 100% 0%, var(--sb-color-bg) 0%, transparent 100%),
      radial-gradient(ellipse 42% 46% at 0% 100%, var(--sb-color-bg) 0%, transparent 100%),
      radial-gradient(ellipse 42% 46% at 100% 100%, var(--sb-color-bg) 0%, transparent 100%),
      linear-gradient(to right, var(--sb-color-bg) 0%, transparent 11%, transparent 89%, var(--sb-color-bg) 100%),
      linear-gradient(to bottom, transparent 82%, var(--sb-color-bg) 100%),
      linear-gradient(to bottom, var(--sb-color-bg) 0%, transparent 10%);
  }
}

/* --- Decorative beam extension (structural half — position/size/
   z-index — in layout.css, on the outer, unmasked `.worlds-media-stage`
   rather than the masked `.worlds-media-stage__visual`). Same color
   pairing already established for `.worlds-media-stage__scan` above
   (soft-ivory core, lucid-cyan glow) for visual consistency with the
   rest of this section's light effects. Kept deliberately faint (low
   opacity throughout, blurred) — this only needs to bridge the gap
   between the page and where the real beam becomes clearly visible
   again below the mask's new, deeper (22%) top fade, not compete with
   it — sized a little larger and slightly stronger than the previous
   pass's version to match that increased depth (see the matching
   `top`/`height` values in layout.css). */
.worlds-media-stage::before {
  background:
    radial-gradient(ellipse at 50% 68%, rgba(244, 239, 230, 0.17) 0%, rgba(85, 221, 251, 0.12) 34%, transparent 70%),
    linear-gradient(to bottom, transparent 0%, rgba(85, 221, 251, 0.14) 45%, rgba(85, 221, 251, 0.06) 76%, transparent 100%);
  filter: blur(5px);
}

/* --- Feature tray panel: one restrained deep-navy/glass surface (no
   per-column card underneath it — see the icon-left flex columns in
   layout.css). The edge treatment is a gradient-border pseudo-element
   (masked to a 1px ring) rather than a flat `border`, so it can be
   clearer near the top/corners and quieter toward the bottom, per the
   approved reference. No ambient glow around the whole tray. --- */
.worlds-feature-tray {
  background: linear-gradient(180deg, rgba(15, 21, 41, 0.86) 0%, rgba(7, 10, 20, 0.9) 100%);
}

.worlds-feature-tray::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(85, 221, 251, 0.34) 0%,
    rgba(85, 221, 251, 0.14) 30%,
    rgba(174, 182, 200, 0.1) 65%,
    rgba(174, 182, 200, 0.05) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Very subtle internal illumination, pinned high in the panel — kept
   well inside the surface (not an outer glow). */
.worlds-feature-tray::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 65% 50% at 50% -8%, rgba(85, 221, 251, 0.09), transparent 65%);
  pointer-events: none;
}

.worlds-feature-tray__item:not(:first-child)::before {
  background: linear-gradient(180deg, transparent 0%, rgba(133, 200, 221, 0.32) 18%, rgba(133, 200, 221, 0.32) 82%, transparent 100%);
}

.worlds-feature-tray__icon {
  border: 1px solid rgba(85, 221, 251, 0.3);
  background:
    radial-gradient(circle at 32% 28%, rgba(85, 221, 251, 0.16), transparent 60%),
    rgba(8, 12, 24, 0.65);
  box-shadow: inset 0 0 14px rgba(85, 221, 251, 0.08);
  color: var(--sb-color-accent-alt);
}

.worlds-feature-tray__index {
  display: block;
  font-size: var(--sb-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(85, 221, 251, 0.78);
  margin-bottom: 0.4rem;
}

.worlds-feature-tray__title {
  font-family: var(--sb-font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sb-color-text);
  margin-bottom: 0.3rem;
}

.worlds-feature-tray__body {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(174, 182, 200, 0.8);
}

/* Long fading rules either side of the mark+text, per the approved
   reference's footer composition — see the grid in layout.css. */
.worlds-feature-tray__footer {
  position: relative;
  z-index: 1;
  font-size: var(--sb-font-size-sm);
  letter-spacing: 0.05em;
  color: rgba(174, 182, 200, 0.62);
}

.worlds-feature-tray__footer::before,
.worlds-feature-tray__footer::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(85, 221, 251, 0.3) 55%, rgba(85, 221, 251, 0.3) 100%);
}

.worlds-feature-tray__footer::after {
  background: linear-gradient(90deg, rgba(85, 221, 251, 0.3) 0%, rgba(85, 221, 251, 0.3) 45%, transparent);
}

/* CSS-masked brand mark: `background-color: currentColor` picks up the
   same computed color as the footer text (set once, above, on
   `.worlds-feature-tray__footer`) rather than a separate hard-coded
   value, so mark and text can never drift out of sync. The mask asset
   itself — see tools/brand-assets/generate-simbrace-mark-assets.py —
   is a flat-color cutout; only its alpha channel is used here. */
.worlds-feature-tray__footer-mark {
  background-color: currentColor;
  -webkit-mask: url("/assets/brand/logo/simbrace-mark-mask-256.png") center / 88% no-repeat;
  mask: url("/assets/brand/logo/simbrace-mark-mask-256.png") center / 88% no-repeat;
}

/* Stacked layout swaps the separator to a horizontal fade (geometry in
   layout.css, same 860px breakpoint — wider than the 640px the rest of
   this section reflows at, see the comment there) — needs its own
   gradient direction, the vertical one above would be imperceptible at
   1px tall. */
@media (max-width: 860px) {
  .worlds-feature-tray__item:not(:first-child)::before {
    background: linear-gradient(90deg, transparent 0%, rgba(133, 200, 221, 0.32) 20%, rgba(133, 200, 221, 0.32) 80%, transparent 100%);
  }
}

/* --- Scroll-triggered materialization effect (media stage): a
   one-time, JS-driven reveal — see `data-materialize` in
   public/worlds/index.php and the IntersectionObserver block in
   shared/scripts/main.js (unchanged by this pass). JS only ever adds
   `.worlds-materialize-armed` (pre-animation hidden state) immediately
   before it is also able to add `.worlds-materialize-active` on
   scroll-into-view, so with no JS, or under
   `prefers-reduced-motion: reduce`, neither class is ever applied and
   the stage/overlays sit at their plain, fully-visible defaults below —
   no separate no-JS/reduced-motion branch needed.

   Organic/radial version: a growing circle (not a rectangular wipe)
   centered near the island itself (52% 50%, matching the
   `object-position`/`transform-origin` the permanent zoom/mask now use
   above), paired with a blur-to-sharp transition instead of a hard
   edge. Because the circle grows from that center point outward, the
   waterfall and lower cloud bank — both further from center, near the
   bottom edge — are naturally what the reveal reaches last, without
   needing a second, separate stage for them. This temporary
   `clip-path`/`filter` pairing stays on its own property, deliberately
   distinct from the permanent `mask-image` above, so the one-time
   reveal and the permanent edge fade can never overwrite one another —
   see the reduced-motion block below, where both simply apply
   together. */

.worlds-media-stage__wireframe {
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(85, 221, 251, 0.45) 0,
      rgba(85, 221, 251, 0.45) 1px,
      transparent 1px,
      transparent 48px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(85, 221, 251, 0.45) 0,
      rgba(85, 221, 251, 0.45) 1px,
      transparent 1px,
      transparent 48px
    );
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 52% 50%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 60% 55% at 52% 50%, #000 35%, transparent 78%);
  mix-blend-mode: screen;
  opacity: 0;
}

.worlds-media-stage__scan {
  background: radial-gradient(
    circle at 52% 50%,
    rgba(244, 239, 230, 0.55),
    rgba(85, 221, 251, 0.4) 32%,
    transparent 68%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.4);
}

@keyframes worlds-stage-reveal {
  from {
    clip-path: circle(0% at 52% 50%);
    filter: blur(18px);
  }
  to {
    clip-path: circle(150% at 52% 50%);
    filter: blur(0);
  }
}

@keyframes worlds-stage-wireframe {
  0% {
    opacity: 0;
  }
  16% {
    opacity: 0.85;
  }
  60% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
  }
}

@keyframes worlds-stage-scan {
  0% {
    transform: scale(0.35);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  55% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .worlds-materialize-armed .worlds-media-stage__visual {
    clip-path: circle(0% at 52% 50%);
    filter: blur(18px);
  }

  .worlds-materialize-active .worlds-media-stage__visual {
    animation: worlds-stage-reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.1s;
  }

  .worlds-materialize-active .worlds-media-stage__wireframe {
    animation: worlds-stage-wireframe 1.15s ease forwards;
  }

  .worlds-materialize-active .worlds-media-stage__scan {
    animation: worlds-stage-scan 0.95s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.05s;
  }

  /* --- Staged entrance for the tray's three feature columns. Hooks into
     the same `.is-visible` class the generic `[data-reveal]` observer in
     main.js already adds to `.worlds-value` itself (see main.js) — no
     extra JS needed just for this stagger.

     The initial hidden state is scoped to `.main-hero-reveal` (also
     added by that same observer, before `.is-visible`) rather than
     applied unconditionally: with JavaScript disabled neither class is
     ever added, so the items must stay at their plain, fully-visible
     defaults instead of getting stuck at `opacity: 0` forever. --- */
  .worlds-value.main-hero-reveal .worlds-feature-tray__item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .worlds-value.is-visible .worlds-feature-tray__item {
    opacity: 1;
    transform: none;
  }

  .worlds-value.is-visible .worlds-feature-tray__item:nth-child(1) {
    transition-delay: 0.05s;
  }

  .worlds-value.is-visible .worlds-feature-tray__item:nth-child(2) {
    transition-delay: 0.15s;
  }

  .worlds-value.is-visible .worlds-feature-tray__item:nth-child(3) {
    transition-delay: 0.25s;
  }
}

/* --- Restored immersive-creation visual: same cyan-tinted glass
   treatment as `.worlds-cta__inner` elsewhere on this page, deliberately
   identical values, just applied again. --- */

.worlds-details__visual {
  border: 1px solid rgba(85, 221, 251, 0.16);
  background-color: var(--sb-color-surface-glass);
  box-shadow: 0 0 40px -22px rgba(85, 221, 251, 0.28);
}

/* --- Closing CTA text (after "Who it's for") — same weight/size as
   `.worlds-feature-tray__title` (a subhead, not a section headline) so
   it reads as a calm closing line rather than a second hero. --- */

.worlds-final-cta__text {
  font-size: var(--sb-font-size-lg);
  font-weight: 650;
  color: var(--sb-color-text);
}

.worlds-final-cta__subtext {
  font-size: var(--sb-font-size-base);
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

/* --- Detailed "how it works" content copy. Numbered steps reuse the
   same hairline-divider/index-column language as the value prop's
   process steps elsewhere on the page; list items use a small dot mark
   (same gradient as the old conversation/cases point marks) plus a bold
   lead-in label so the lists read as scannable rows, not a wall of
   text. --- */

.worlds-details__group-headline {
  font-family: var(--sb-font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--sb-color-text);
}

.worlds-details__group-body {
  font-size: var(--sb-font-size-lg);
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

.worlds-details__step-index {
  font-family: var(--sb-font-serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--sb-color-accent-alt);
  opacity: 0.55;
}

.worlds-details__step-title {
  font-size: var(--sb-font-size-base);
  font-weight: 650;
  color: var(--sb-color-text);
  margin-bottom: var(--sb-space-xs);
}

.worlds-details__step-body {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

.worlds-details__item-mark {
  background: linear-gradient(135deg, var(--sb-color-accent-alt), var(--sb-color-accent));
  opacity: 0.75;
}

.worlds-details__item-body {
  font-size: var(--sb-font-size-base);
  line-height: 1.5;
  color: var(--sb-color-text-secondary);
}

.worlds-details__item-body strong {
  color: var(--sb-color-text);
  font-weight: 650;
}

/* --- Early-access form field copy (Worlds only). Form field styling
   intentionally mirrors Main's `.main-cta__*` values exactly (border,
   background, focus ring are already Lucid Cyan on Main too), so
   reusing the same numbers here doesn't make the hero form "louder"
   than Main's — only the submit button (which reuses
   `.worlds-hero__btn--primary`) carries the Worlds-specific cyan-led
   treatment already established above. --- */

.worlds-cta__input {
  width: 100%;
  font: inherit;
  font-size: var(--sb-font-size-base);
  color: var(--sb-color-text);
  background-color: rgba(5, 7, 13, 0.4);
  border: 1px solid var(--sb-color-border);
  border-radius: var(--sb-radius-sm);
  padding: 0.65rem 0.85rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.worlds-cta__input::placeholder {
  color: var(--sb-color-text-muted);
}

.worlds-cta__input:hover {
  border-color: var(--sb-color-border-strong);
}

.worlds-cta__input:focus-visible {
  outline: none;
  border-color: var(--sb-color-accent-alt);
  box-shadow: 0 0 0 3px rgba(85, 221, 251, 0.16);
}

.worlds-cta__input--error {
  border-color: var(--sb-color-feedback-error);
}

.worlds-cta__field-error,
.worlds-cta__form-error {
  font-size: 0.875rem;
  color: var(--sb-color-feedback-error);
}

.worlds-cta__form-error {
  margin: 0;
}

.worlds-cta__submit {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.worlds-hero__form-microcopy {
  font-size: 0.8125rem;
  color: var(--sb-color-text-muted);
  margin: 0;
}

.worlds-cta__success-text {
  color: var(--sb-color-text);
  font-size: var(--sb-font-size-lg);
}

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

.worlds-footer__name {
  font-weight: 650;
  color: var(--sb-color-text);
}

.worlds-footer__tagline,
.worlds-footer__copyright {
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-muted);
}

/* "part of" + logo lockup (same asset as the header logo, smaller and
   quieter here, now also a link to simbrace.com) instead of a second
   plain-text "Simbrace" — `aria-label` on the link is the link's
   accessible name (so it announces as "Go to Simbrace", not duplicated
   with the image's own `alt`), and the surrounding "part of" text
   doesn't repeat the brand name either way. Height has gone
   0.9rem -> 1.25rem -> 1.75rem across rounds of feedback (each prior
   size still read as too small) — still well under the header logo's
   3rem / 2.5rem (mobile), but now unmistakably an intentional lockup.
   Alignment is via `inline-flex` centering on the link wrapper, not an
   em-based nudge on the image, since the wrapper is what now sits
   inline with the "part of" text. */
.worlds-footer__tagline-link {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  border-radius: var(--sb-radius-sm);
  text-decoration: none;
}

.worlds-footer__tagline-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(85, 221, 251, 0.16);
}

.worlds-footer__tagline-logo {
  display: block;
  height: 1.75rem;
  width: auto;
}

.worlds-footer__nav a {
  font-size: var(--sb-font-size-sm);
  color: var(--sb-color-text-secondary);
  transition: color 200ms ease;
}

.worlds-footer__nav a:hover,
.worlds-footer__nav a:focus-visible {
  color: var(--sb-color-text);
}

.worlds-footer__legal a {
  font-size: 0.8125rem;
  color: var(--sb-color-text-muted);
  transition: color 200ms ease;
}

.worlds-footer__legal a:hover,
.worlds-footer__legal a:focus-visible {
  color: var(--sb-color-text-secondary);
}

/* --- Worlds responsive: same logo-size trim as Main at the same
   breakpoint, for the same reason (compact mobile header). --- */

@media (max-width: 640px) {
  .worlds-hero__logo-img {
    height: 2.5rem;
  }

  /* Mobile-only: lighten the dark overlay so the hero video reads as
     brighter on small screens, per v1 polish feedback. Same gradient
     shape/angles as the desktop overlay above, alpha stops scaled down
     ~25-30% — the bottom stop (where hero copy/form sit) is trimmed the
     least so text/field contrast holds up.

     Tint strength reduced a further 30% (each alpha × 0.7) on top of
     the existing mobile trim above, same as the desktop rule — same
     colors/gradient shape, alpha only. */
  .worlds-hero__overlay {
    background:
      linear-gradient(
        100deg,
        rgba(4, 6, 11, 0.49) 0%,
        rgba(5, 8, 15, 0.35) 38%,
        rgba(6, 10, 18, 0.182) 65%,
        rgba(6, 10, 18, 0.098) 100%
      ),
      linear-gradient(180deg, rgba(4, 6, 11, 0.049) 0%, rgba(5, 8, 15, 0.21) 65%, rgba(3, 5, 9, 0.56) 100%);
  }
}