/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  LORE LABYRINTH - STATIC CLONE STYLESHEET                        ║
   ║  Palette, fonts, layout, animations.                              ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── Fonts ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: "BlueCurve";
  /* WOFF2 first (49% smaller than TTF) so browsers that support it
     avoid the TTF download. TTF remains as fallback for the legacy
     segment that doesn't support WOFF2 (~0.3% globally). */
  src: url("./assets/Bluecurve-Light.woff2") format("woff2"),
       url("./assets/Bluecurve-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BlueCurve";
  src: url("./assets/Bluecurve-Regular.woff2") format("woff2"),
       url("./assets/Bluecurve-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BlueCurve";
  src: url("./assets/Bluecurve-Bold.woff2") format("woff2"),
       url("./assets/Bluecurve-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IsamiRi Display";
  src: url("./assets/IsamiRiDisplay-Regular.woff2") format("woff2"),
       url("./assets/IsamiRiDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────────── */
:root {
  --bg-deep:    #1a0b3e;
  --bg-deeper:  #120830;
  --bg-deepest: #0a041e;
  --bg-light:   #2d1a5e;
  --bg-mid:     #1e1043;
  --accent:     #b8a9ff;
  --accent-2:   #9a7fff;
  --accent-3:   #c4b5ff;
  --muted:      #6b5b9a;
  --text:       #ffffff;
  --text-soft:  rgba(255, 255, 255, 0.86);
  --text-dim:   rgba(255, 255, 255, 0.6);

  --shadow-text: 0 2px 4px rgba(0, 0, 0, 0.35);
  --pad-section: clamp(64px, 9vw, 128px);
  --pad-section-tight: clamp(48px, 7vw, 96px);

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --ease-out: cubic-bezier(.44, .22, .47, .99);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-snap: cubic-bezier(.16, 1, .3, 1);

  /* Driven from JS - 0..1 fill ratio of document scroll */
  --scroll-ratio: 0;
  /* Preloader fill, 0..100 */
  --preload: 0;
  /* Safe-area insets - env() for top/bottom (real notches), 0px for sides (layout-safe) */
  --sat: env(safe-area-inset-top,    0px);
  --sar: 0px;
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: 0px;
  /* Extra hero height past the fullscreen viewport. Drives .hero's
     height, .hero__content's centered translate, and .hero__scroll's
     viewport-bottom anchor (so the indicator never slips below the
     fold as the hero grows). Decoupled from --header-bg-threshold -
     the two answer different questions (how tall vs how soon). */
  --hero-extra: 500px;
  /* Scroll distance after which the fixed header gains its dark
     background and the breadcrumb reveals. Independent of
     --hero-extra so the bg can fire well before the hero ends
     (for a "still over the hero" feel) or after, depending on
     intent. Accepts px or dvh; px is straightforward, dvh adapts
     to viewport height on resize (would need a JS resize handler
     if you swap to dvh - see readHeaderBgThreshold). */
  --header-bg-threshold: 200px;
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Accessibility utilities ───────────────────────────────────────────
   .sr-only - visually-hidden but accessible to assistive tech.
   .skip - Skip-to-content link: off-screen by default, on focus shows as
           a pill anchored top-left. The existing <a class="skip" href="#content">
           line in index.html now has styling. */
.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 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 10px 16px;
  margin: 8px;
  background: var(--bg-deep);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-family: "BlueCurve", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.15s var(--ease-out);
}
.skip:focus,
.skip:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; overflow-y: scroll; }
body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: "BlueCurve", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, p { margin: 0; }

/* ── Scrollbar theming - matches site aesthetic ───────────────── */
/* Firefox (thin, dark track, accent thumb) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}
/* WebKit (Chrome, Safari, Edge) */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--accent-2);
}

/* ── Globals ───────────────────────────────────────────────────────── */
.container { width: min(1290px, 92vw); margin-inline: auto; }
.section   { padding-block: var(--pad-section); position: relative; }

.eyebrow {
  display: inline-block;
  font-family: "IsamiRi Display", serif;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.eyebrow--light { color: #fff; opacity: 0.85; }

.section__title {
  font-family: "IsamiRi Display", serif;
  font-weight: 900;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
  text-shadow: var(--shadow-text);
  margin-bottom: 18px;
}
@media (min-width: 1921px) {
  .section__title { font-size: clamp(3.6rem, 3.2vw, 5.5rem); }
}
.section__title--light { color: #fff; }
.section__title em { font-style: italic; color: var(--accent); }

.section__lede {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: var(--text-soft);
  max-width: 56ch;
  margin-bottom: 18px;
  text-shadow: var(--shadow-text);
}
.section__lede--light { color: rgba(255, 255, 255, 0.92); }

.section__body { color: var(--text-dim); max-width: 56ch; margin-bottom: 20px; }
.section__body--light { color: rgba(255, 255, 255, 0.8); max-width: 56ch; }

.section__header { margin-bottom: 56px; max-width: 760px; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  position: relative;
  transition: transform .3s var(--ease-out),
              background-color .3s var(--ease-out),
              border-color .3s var(--ease-out),
              color .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}
.btn--primary {
  background: var(--accent);
  color: var(--bg-deep);
  box-shadow: 0 4px 20px rgba(184, 169, 255, 0.3);
}
.btn--primary:hover {
  transform: translateY(-3px);
  background: #fff;
  box-shadow: 0 10px 28px rgba(184, 169, 255, 0.45);
}
.btn--primary:disabled,
.btn--primary[disabled] {
  opacity: 0.45;
  filter: grayscale(0.6);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.45);
}
.btn--ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-deep);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(184, 169, 255, 0.4);
}
.btn--lg { padding: 18px 32px; font-size: 0.95rem; }

/* ── Section depth gradient (bottom edge) ─────────────────────────── */
.section::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;
  background: linear-gradient(to top, var(--bg-deepest), transparent);
  pointer-events: none;
  z-index: 1;
}
/* Exclude sections with full background images from the gradient overlay */
.about::after,
.games::after,
.we-create::after,

/* ── Scroll Progress - driven from --scroll-ratio ──────────────────── */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
  background: transparent;
}
.scroll-progress__bar {
  display: block;
  height: 100%;
  width: calc(var(--scroll-ratio) * 100%);
  background: linear-gradient(90deg, var(--muted), var(--accent));
  box-shadow: 0 0 12px var(--accent);
  transition: width 80ms linear;
}

/* ── Preloader ─────────────────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg-deeper);
  display: grid;
  place-items: center;
  transition: opacity .8s var(--ease-out), visibility .8s;
}
#preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: min(420px, 80vw);
}
.preloader__logo {
  width: 100%;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 0 24px rgba(184, 169, 255, 0.4));
  animation: preloader-pulse 2.2s ease-in-out infinite, scaleIn .8s var(--ease-out) both;
}
@keyframes preloader-pulse {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 24px rgba(184, 169, 255, 0.4)); }
  50%      { transform: translateY(-8px) scale(1.03); filter: drop-shadow(0 0 36px rgba(184, 169, 255, 0.7)); }
}
.preloader__progress {
  position: relative;
  height: 2px;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.preloader__bar {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--preload) * 1%);
  background: linear-gradient(90deg, var(--accent), #fff);
  border-radius: 2px;
  transition: width 100ms linear;
  box-shadow: 0 0 12px rgba(184, 169, 255, 0.5);
}
.preloader__count {
  font-family: "IsamiRi Display", serif;
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.15em;
  animation: pulse 2s ease-in-out infinite;
}

/* ── Header ────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: calc(26px + var(--sat)) clamp(20px, 4vw, 60px) 26px clamp(20px, 4vw, 60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: transform .4s var(--ease-out),
              background-color .4s var(--ease-out),
              backdrop-filter .4s var(--ease-out);
  background: linear-gradient(180deg, rgba(26, 11, 62, 0.5) 0%, rgba(26, 11, 62, 0) 100%);
}
.site-header.is-scrolled {
  background: rgba(18, 8, 48, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

/* ── Centered-brand split nav - menus flank the logo (left: Apps | Games | Lab,
   right: About | Jobs | Legal), logo dead-centre between them ── */
.site-header--split { padding-left: clamp(20px, 4vw, 60px); padding-right: clamp(20px, 4vw, 60px); }
.nav--split {
  display: grid;
  /* aside | left menu | logo | right menu | aside - the two 1fr menu
     columns are always equal, so the logo stays dead-centre even when
     the left and right menus differ in length. */
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  width: 100%;
  position: relative;
}
/* Centered nav group: all items in one row with logo in the middle */
.nav__center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
}
.nav__list {
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  align-items: center;
}

/* Sidebars (left: account+welcome, right: connect) */
.nav__aside {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.nav__aside--left {
  justify-content: flex-start;
}
.nav__aside--right {
  justify-content: flex-end;
}

/* ── Centred-logo split (desktop) ──────────────────────────────────
   The centre group (left menu + logo + right menu) is unwrapped with
   display: contents, so the two nav lists become the grid's equal-width
   1fr columns flanking the logo. The logo is therefore perfectly
   centred regardless of how different the two menus are in length
   ("Apps | Games | Lab" vs "About | Jobs | Legal"); one side being a
   little longer is fine. Menus hug the logo (flex-end / flex-start)
   and the leftover column space falls symmetrically on the outer sides
   next to the account and connect asides.

   Narrow desktops (881px–~960px) can't fit both menus at natural width
   AND equal columns, so the columns fall back to content width and the
   logo drifts a few px off-centre - intentional, better than overlap,
   and strictly better than the old always-offset layout. */
@media (min-width: 881px) {
  .nav__center { display: contents; }
  .nav__center .nav__list { justify-content: flex-end; }
  .nav__center .nav__list:last-child { justify-content: flex-start; }
}
/* Narrow desktops (just above the mobile breakpoint): tighten the grid
   and item gaps so the menu columns can still equalize and the logo
   keeps its dead-centre position without the menus ever overlapping it. */
@media (min-width: 881px) and (max-width: 1065px) {
  .nav--split { gap: clamp(8px, 1.5vw, 12px); }
  .nav__list  { gap: clamp(8px, 1.5vw, 14px); }
}

/* Welcome text and login link */
.nav__welcome {
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.nav__username {
  color: var(--accent-3);
  font-weight: 700;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand--center {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform .4s var(--ease-out);
}
.brand--center:hover { transform: translateY(-1px) scale(1.02); }
.brand__mark { width: 48px; height: auto; }
.brand--center .brand__mark {
  width: auto;
  height: clamp(40px, 5vh, 56px);
  filter: drop-shadow(0 4px 18px rgba(184, 169, 255, 0.4));
}
.nav__link {
  position: relative;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  padding: 8px 0;
  text-transform: uppercase;
  font-weight: 700;
  transition: color .25s var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 4px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav__link:hover { color: var(--accent); }
.nav__link:hover::after { transform: scaleX(1); }
/* Drop CTA-style variant - top nav stays symmetric on the live site. */
/* ── Legal dropdown ────────────────────────────────────────────── */
.nav__dropdown {
  position: relative;
}
.nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 8px 0;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "BlueCurve", system-ui, sans-serif;
  color: var(--text);
  transition: color .25s var(--ease-out);
}
.nav__dropdown-toggle:hover {
  color: var(--accent);
}
.nav__dropdown-toggle svg {
  transition: transform .3s var(--ease-out);
}
.nav__dropdown-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Desktop dropdown panel */
.nav__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(18, 8, 48, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(184, 169, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 8px;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease-out),
              visibility .25s var(--ease-out),
              transform .25s var(--ease-out);
  z-index: 60;
  pointer-events: none;
}
.nav__dropdown-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(4px);
  pointer-events: auto;
}
.nav__dropdown-menu li {
  margin: 0;
}
.nav__dropdown-menu button,
.nav__dropdown-menu a {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  color: var(--text-soft);
  font-size: 0.85rem;
  font-family: "BlueCurve", system-ui, sans-serif;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color .2s var(--ease-out),
              color .2s var(--ease-out);
}
.nav__dropdown-menu button:hover,
.nav__dropdown-menu a:hover {
  background: rgba(184, 169, 255, 0.12);
  color: var(--accent);
}

/* ── Account trigger (left sidebar): chevron + signed-in dropdown ── */
.nav__aside--left {
  position: relative;
}
.nav__account-chevron {
  display: none;
  color: var(--text-dim);
  transition: transform .3s var(--ease-out);
}
.nav__aside--left.is-signed-in .nav__account-chevron {
  display: inline-flex;
}
.nav__aside--left[aria-expanded="true"] .nav__account-chevron svg {
  transform: rotate(180deg);
}

/* Signed-in account dropdown (View Account / Log Off) - mirrors the
   nav__dropdown-menu treatment so the two menus read as one family. */
.nav__account-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 200px;
  background: rgba(18, 8, 48, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(184, 169, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .25s var(--ease-out),
              visibility .25s var(--ease-out),
              transform .25s var(--ease-out);
  z-index: 60;
  pointer-events: none;
}
.nav__account-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__account-menu a,
.nav__account-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  color: var(--text-soft);
  font-size: 0.85rem;
  font-family: "BlueCurve", system-ui, sans-serif;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease-out),
              color .2s var(--ease-out);
}
.nav__account-menu a:hover,
.nav__account-menu button:hover {
  background: rgba(184, 169, 255, 0.12);
  color: var(--accent);
}

/* ── Connect button (right sidebar) ─────────────────────────────── */
.nav__connect {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--text-soft);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s var(--ease-out),
              background-color .25s var(--ease-out),
              border-color .25s var(--ease-out),
              transform .25s var(--ease-out);
}
.nav__connect:hover {
  color: var(--bg-deep);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ── Developer console link (right sidebar) ─────────────────────────
   Icon-only, immediately left of the Connect pill. chrome.js injects the
   anchor only after /api/identity/me reports lore_ids.is_developer, so
   for every other visitor this rule styles nothing. On mobile it rides
   the existing reveal of .nav__aside--right inside the open menu.     */
.nav__dev-console {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--text-soft);
  border: 1px solid rgba(255,255,255,0.2);
  transition: color .25s var(--ease-out),
              background-color .25s var(--ease-out),
              border-color .25s var(--ease-out),
              transform .25s var(--ease-out);
}
.nav__dev-console:hover,
.nav__dev-console:focus-visible {
  color: var(--accent);
  background: rgba(184, 169, 255, 0.12);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ── Account icon (circular, inside left sidebar) ──────────────── */
.nav__account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--text-soft);
  border: 1px solid rgba(255,255,255,0.2);
  transition: color .25s var(--ease-out),
              background-color .25s var(--ease-out),
              border-color .25s var(--ease-out),
              transform .25s var(--ease-out);
  flex-shrink: 0;
}
.nav__account:hover {
  color: var(--accent);
  background: rgba(184, 169, 255, 0.12);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.nav__account svg {
  display: block;
  width: 18px;
  height: 18px;
}

.hamburger {
  display: none;
  background: transparent;
  border: 0;
  padding: 6px;
  flex-direction: column;
  gap: 5px;
}
.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--text);
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav--split {
    grid-template-columns: 1fr auto auto;
    gap: 8px;
  }
  .nav__list { gap: 18px; }
  .nav__link { font-size: 1.1rem; }
  .hamburger { display: inline-flex; z-index: 51; }

  /* Left sidebar: account icon + welcome text. overflow stays
     visible so the signed-in account dropdown can escape the aside
     (the welcome span handles its own ellipsis truncation). */
  .nav__aside--left {
    min-width: 0;
    overflow: visible;
  }
  .nav__welcome {
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav__account {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  .nav__account svg {
    width: 16px;
    height: 16px;
  }

  /* Right sidebar: Connect button hidden by default on mobile, shown in overlay */
  .nav__aside--right {
    display: none;
  }

  /* Mobile overlay - .nav__center becomes full-screen */
  .nav__center {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    background: var(--bg-deeper);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .4s var(--ease-out);
    z-index: 49;
    pointer-events: none;
  }
  .nav__center.is-open {
    transform: scaleY(1);
    pointer-events: auto;
  }
  /* The overlay is position:fixed; inset:0 INSIDE the fixed header. A
     fixed descendant is only sized to the viewport while no ancestor
     acts as its containing block - but .site-header.is-scrolled adds
     backdrop-filter, which turns the header into that containing block
     and collapses the "fullscreen" menu into a thin header strip once
     the user scrolls. The menu's opaque background covers the header
     anyway, so dropping the blur only while it's open is invisible. */
  .site-header:has(.nav__center.is-open) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav__center .nav__list {
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    transform: none;
    pointer-events: auto;
  }
  /* Logo in the overlay: slightly smaller, separator lines above/below */
  .nav__center .brand--center {
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 10px 24px;
    margin: 4px 0;
    width: 100%;
  }
  .nav__center .brand--center .brand__mark {
    height: 38px;
  }
  .nav__center .nav__link { font-size: 1.15rem; }

  /* Connect button appears at bottom of mobile overlay */
  .nav__center.is-open ~ .nav__aside--right {
    display: flex;
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 52;
  }
  .nav__center.is-open ~ .nav__aside--right .nav__connect {
    font-size: 0.75rem;
    padding: 10px 24px;
    border-color: rgba(255,255,255,0.2);
  }
  /* Developer console mark in the mobile menu - same row as the Connect
     button, sized to match its proportions. */
  .nav__center.is-open ~ .nav__aside--right .nav__dev-console {
    width: 30px;
    height: 30px;
  }

  /* Dropdown becomes accordion inside mobile menu */
  .nav__dropdown {
    width: 100%;
    text-align: center;
  }
  .nav__dropdown-toggle {
    justify-content: center;
    width: 100%;
    padding: 6px 16px;
    font-size: 1.15rem;
    gap: 6px;
  }
  .nav__dropdown-menu {
    position: static;
    background: transparent;
    backdrop-filter: none;
    border: none;
    padding: 0;
    min-width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--ease-out),
                padding .35s var(--ease-out);
  }
  .nav__dropdown-menu.is-open {
    max-height: 300px;
    padding: 6px 0;
  }
  .nav__dropdown-menu button,
  .nav__dropdown-menu a {
    text-align: center;
    padding: 10px 16px;
    font-size: 0.9rem;
    color: var(--text-dim);
  }
  .nav__dropdown-menu button:hover,
  .nav__dropdown-menu a:hover {
    background: rgba(184, 169, 255, 0.08);
    color: var(--accent);
  }
}

/* ── HERO - layered stage: bg + chrome overlay + scene edges + crew ──── */
.hero {
  position: relative;
  min-height: 100vh;                                /* fallback for older browsers */
  min-height: calc(100dvh + var(--hero-extra, 0px)); /* extends past 100dvh so the header
                                                          stays over the hero while the user
                                                          scrolls past --hero-extra */
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding:
    calc(130px + var(--sat))
    clamp(20px, 4vw, 60px)
    calc(clamp(40px, 6vh, 80px) + 100px)
    clamp(20px, 4vw, 60px);
  overflow: hidden;
  isolation: isolate;
  /* Dark fallback - the hero image (llweb_hero_01.jpg) covers this completely. */
  background-color: #0d0624;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__bg-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  transform-origin: center 30%;
  filter: brightness(0.7) saturate(1.05);
}
/* ── Fog overlay - llweb_fog.mp4 keyed out over the hero art ─────
   MP4 has no alpha channel, so the black pixels of the fog plate
   are keyed out with mix-blend-mode: screen (black → transparent,
   bright mist stays). Sits inside .hero__bg, above the bg image,
   below .hero__chrome / .hero__layer. pointer-events: none so it
   never intercepts CTA clicks. */
.hero__fog {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: 0.5;
  pointer-events: none;
}
/* ── Light bloom overlay - warm ambient glow over the hero scene ── */
.hero__chrome {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
  background:
    radial-gradient(ellipse 80% 40% at 50% 25%, rgba(255, 200, 120, 0.25), transparent 70%),
    radial-gradient(ellipse 60% 30% at 20% 80%, rgba(255, 160, 80, 0.15), transparent 60%),
    radial-gradient(ellipse 50% 25% at 85% 70%, rgba(255, 180, 100, 0.12), transparent 55%);
  animation: hero-glow 6s ease-in-out infinite alternate;
}
@keyframes hero-glow {
  0%   { opacity: 0.4; }
  100% { opacity: 0.65; }
}

/* ── Hero decorative foreground layer ────────────────────────────────
   Pins to .hero's full extended height (top:0 + bottom:0 + height:100%;
   relative to hero's `min-height: calc(100dvh + var(--hero-extra, 0px))`).
   Box dimensions now match the asset's natural aspect (1440×1536, ≈0.938)
   so the asset renders at original aspect - no stretch, no letter-box.
   On a 1920×1080 desktop, the box auto-sizes to ~77vw × hero-height;
   on a 390-px iPhone, the box becomes ~323vw wide with most of the
   asset intentionally off-screen by design (the user explicitly accepted
   this trade-off "Yes I know that means more of it may be off the screen"
   in exchange for a full-height decorative column at native aspect).

   Initial CSS position: each panel is anchored by its INNER edge so the
   5vw / 95vw peek windows read identically to the prior 40vw-wide setup:
     LEFT  panel: `right: 95vw` puts box-right  (inner edge) at 5vw.
     RIGHT panel: `left:  95vw` puts box-left   (inner edge) at 95vw.
   With box width ≈77vw, the box's outer edges sit at -72vw (LEFT) and
   +172vw (RIGHT) - off-screen by design. The full scrub (runHeroZoom)
   translates each panel by ±45vw so the inner edges meet at the
   centreline (50vw) at hero's centre-on-top. GSAP translateX is
   independent of starting left / box width - a stronger anchor than
   the prior `left: -35vw; width: 40vw` summary.

   `pointer-events: none` keeps the panels click-through; `z-index: 1`
   sits beneath .hero__content's z-index 2 so the CTA stays tappable
   during the entire scrub. */
.hero__layer {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  /* Box dimensions derived from the asset's intrinsic aspect, NOT from a
     fixed vw width:
       height: 100%               ← matches .hero's full extended height
       aspect-ratio: 1440 / 1536  ← matches the asset (0.938, near-square)
       width: auto                ← derived: hero-height × 0.9375
     This preserves asset aspect regardless of viewport - desktop shows
     ≈77vw × 1580px, iPhone shows ≈323vw × 1344px (mostly off-screen).

     `object-fit: cover` is defensive: when box aspect is exactly equal
     to asset aspect, fill and cover render identically. Cover keeps a
     sub-pixel guarantee against future hero-extra or asset-aspect
     retunes (and CLI users who tweak --hero-extra to a value that
     changes the box aspect by 0.001 won't get a sudden letterbox). */
  aspect-ratio: 1440 / 1536;
  width: auto;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 18px 48px rgba(0,0,0,0.5));
}
/* Inner-edge anchor (mirror pair) - pre-scrub box-inner at 5vw / 95vw.
   GSAP's +45vw / -45vw translate still lands both inner edges exactly
   at 50vw (centreline) at full scrub; the translateX is independent
   of the box's now-larger width.
     LEFT  asset ~ decoration typically on its RIGHT edge → image-RIGHT at box-RIGHT (`100% center`).
     RIGHT asset ~ decoration typically on its LEFT  edge → image-LEFT  at box-LEFT  (`0%   center`). */
.hero__layer--left  { left:  auto; right:  85vw; object-position: 100% center; }
.hero__layer--right { right: auto; left:   95vw; object-position: 0%   center; }
/* Landscape phones - no room for full-height side panels. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero__layer { display: none; }
}

.hero__content {
  text-align: center;
  max-width: 920px;
  position: relative;
  z-index: 2;
  /* The hero is taller than the viewport by --hero-extra, and the hero
     is a centered grid, so .hero__content's center sits hero-extra/2
     below the viewport's center. Pull it back up by the same amount so
     the logo + CTA read as visually centered in the visible viewport
     (and stay clear of the SCROLL pill anchored at viewport bottom). */
  transform: translateY(calc(var(--hero-extra, 0px) / -2));
}
.hero__eyebrow {
  font-family: "IsamiRi Display", serif;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 0.9rem;
  margin-bottom: 24px;
}
.hero__brand-logo {
  width: clamp(200px, 42vw, 480px);
  height: auto;
  margin: 0 auto 20px;
  filter: drop-shadow(0 8px 32px rgba(184, 169, 255, 0.35));
}
.hero__tagline {
  font-family: "IsamiRi Display", serif;
  font-size: clamp(0.9rem, 1.4vw, 1.15rem);
  color: var(--text-soft);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0 auto 40px;
  text-shadow: var(--shadow-text);
}

/* ── Rotating CTA button with timer ring ── */
.hero__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hero__cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px 16px 28px;
  /* Border removed - the SVG timer track ring serves as the visual outline */
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-weight: 700;
  font-family: "BlueCurve", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(0.78rem, 1.1vw, 0.92rem);
  cursor: pointer;
  transition: background-color .3s var(--ease-out),
              transform .3s var(--ease-out);
}
.hero__cta-btn:hover {
  background: var(--accent);
  color: var(--bg-deep);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(184, 169, 255, 0.35);
}
.hero__cta-btn:hover .hero__cta-arrow {
  transform: translateX(3px);
}
/* Timer ring - sits on top of the button content */
.hero__cta-timer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero__cta-ring {
  transition: stroke-dashoffset 0.1s linear;
  filter: drop-shadow(0 0 6px rgba(184, 169, 255, 0.4));
}
.hero__cta-arrow {
  transition: transform .3s var(--ease-out);
}

/* ── Dot pagination ── */
.hero__cta-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.hero__cta-dots span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background-color .35s var(--ease-out),
              transform .35s var(--ease-out);
  cursor: default;
}
.hero__cta-dots span.is-active {
  background: var(--accent);
  transform: scale(1.4);
  box-shadow: 0 0 10px rgba(184, 169, 255, 0.5);
}

.hero__scroll {
  /* bottom is offset by --hero-extra so the indicator sticks to the
     viewport's bottom edge instead of the hero's absolute bottom
     (which now sits hero-extra px below the fold). */
  position: absolute;
  left: 50%; bottom: calc(var(--hero-extra, 0px) + 28px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.8);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  z-index: 4;
}
.hero__scroll-pill { border: 1px solid rgba(255,255,255,0.6); padding: 4px 14px; border-radius: 999px; }
.hero__scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: scroll-line 1.6s ease-in-out infinite;
}
@keyframes scroll-line { 0%,100% { transform: scaleY(0.6); } 50% { transform: scaleY(1); } }

/* ── Scroll-to-top button - organic morphing blob ── */
.scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 45;
  width: 50px;
  height: 50px;
  /* Irregular blob shape - "points" slowly morph via animation */
  border-radius: 44% 56% 60% 40% / 54% 48% 52% 46%;
  background: #c9952e;
  border: none;
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  pointer-events: none;
  transition:
    opacity .4s var(--ease-out),
    transform .4s var(--ease-out),
    background-color .3s var(--ease-out),
    box-shadow .4s var(--ease-out);
  box-shadow:
    0 4px 20px rgba(201, 149, 46, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.25);
  overflow: hidden;
  animation: blob-morph 7s ease-in-out infinite;
}
@keyframes blob-morph {
  0%   { border-radius: 44% 56% 60% 40% / 54% 48% 52% 46%; }
  25%  { border-radius: 50% 50% 68% 32% / 40% 60% 40% 60%; }
  50%  { border-radius: 60% 40% 50% 50% / 52% 44% 56% 48%; }
  75%  { border-radius: 38% 62% 44% 56% / 62% 40% 60% 38%; }
  100% { border-radius: 44% 56% 60% 40% / 54% 48% 52% 46%; }
}
.scroll-top::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 25%, rgba(255, 220, 130, 0.35), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.scroll-top:hover {
  background: #dbb153;
  box-shadow:
    0 8px 32px rgba(201, 149, 46, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-3px) scale(1.06);
  animation-play-state: paused;
}
.scroll-top:active {
  transform: translateY(0) scale(0.95);
  box-shadow:
    0 2px 12px rgba(201, 149, 46, 0.3);
}

/* ── Animated elements inside the blob ── */
/* All children use grid-area: 1/1 to stack on the same centered grid cell */
.scroll-top__arrow {
  grid-area: 1 / 1;
  place-self: center;
  position: relative;
  z-index: 2;
  display: block;
  width: 24px;
  height: 24px;
  transition: transform .35s var(--ease-snap);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.scroll-top:hover .scroll-top__arrow {
  transform: translateY(-4px) scale(1.12);
}


/* ── Foldable / short viewport / ultra-wide awareness ────────────── */
/* Short viewport (landscape foldable, small laptop) - reduce hero chrome */
@media (max-height: 560px) and (orientation: landscape) {
  .hero {
    padding-top: calc(60px + var(--sat));
    padding-bottom: clamp(12px, 3vh, 32px);
    place-items: start center;
  }
  .hero__content { padding-top: 0; }
  .hero__eyebrow       { font-size: 0.75rem; margin-bottom: 10px; }
  .hero__title         { font-size: clamp(1.6rem, 3.5vw, 2.8rem); margin-bottom: 10px; }
  .hero__title-line.is-in:nth-child(2) { transform: none; }
  .hero__tagline       { font-size: clamp(0.8rem, 1.4vw, 1rem); margin-bottom: 14px; }
  .hero__cta           { padding: 10px 20px; font-size: 0.72rem; }
  .hero__scroll        { display: none; }
}
/* Very short (foldable landscape ~280px tall) - minimal hero */
@media (max-height: 400px) and (orientation: landscape) {
  .hero { padding-top: calc(30px + var(--sat)); }
  .hero__content { padding: 0; }
  .hero__title         { font-size: clamp(1.2rem, 2.8vw, 2rem); flex-direction: row; gap: 0.3em; }
  .hero__title-line.is-in:nth-child(2) { transform: none; }
  .hero__tagline       { display: none; }
  .hero__cta           { padding: 8px 16px; font-size: 0.65rem; }
}

/* Ultra-wide displays (≥21:9) - keep line lengths readable */
@media (min-aspect-ratio: 21/9) {
  .hero__content       { max-width: min(52vw, 920px); }
  .hero__tagline       { max-width: 48ch; }
}
/* Extreme ultra-wide (≥32:9) - further constrain */
@media (min-aspect-ratio: 32/9) {
  .hero__content       { max-width: min(42vw, 820px); }
}

/* Foldable viewport segments - treat as single logical viewport (default), no special span needed */
/* If the browser supports viewport segments, the content naturally flows within the available space */
/* Ensure content is never lost in a hinge gap by keeping it within safe-area-inset boundaries */
@media (horizontal-viewport-segments: 2) {
  .hero__content,
  .footer__grid,
  .nav--split { max-width: calc(100vw - var(--sal) - var(--sar)); margin-inline: auto; }
}
@media (vertical-viewport-segments: 2) {
  .site-header { padding-top: calc(26px + var(--sat) + 20px); }
  .hero { padding-top: calc(130px + var(--sat) + 20px); }
}

/* ── ABOUT ─────────────────────────────────────────────────────────── */
.about, .we-create, .apps, .games, .contact-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
}
.about { background: var(--bg-deep); isolation: isolate; overflow: hidden; }
.about__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.about__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 8, 48, 0.75) 0%,
    rgba(18, 8, 48, 0.55) 45%,
    rgba(18, 8, 48, 0.75) 100%
  );
  z-index: 1;
}
.about__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.about__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}
.about__text { max-width: 520px; }
.about__card {
  background: rgba(10, 4, 30, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 169, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 32px);
}
/* about__figure removed - replaced by flying book graphic */
@media (max-width: 880px) {
  .about__grid { grid-template-columns: 1fr; text-align: center; }
  .about__text { margin-inline: auto; }
}

/* ── About badge - location pin ────────────────────────────────── */
.about__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(184, 169, 255, 0.08);
  border: 1px solid rgba(184, 169, 255, 0.2);
  font-size: 0.82rem;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
  transition: background-color .3s var(--ease-out),
              border-color .3s var(--ease-out),
              transform .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}
.about__badge:hover {
  background: rgba(184, 169, 255, 0.14);
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(184, 169, 255, 0.15);
  transform: translateY(-2px);
}
.about__badge-icon {
  flex-shrink: 0;
  color: var(--accent-3);
}
.about__badge strong {
  color: var(--accent);
  font-weight: 700;
}

/* ── About CTA - learn more button ──────────────────────────── */
.about__cta {
  margin-top: 28px;
  width: 100%;
  justify-content: center;
  border-color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  padding: 16px 26px;
  transition: background-color .3s var(--ease-out),
              border-color .3s var(--ease-out),
              color .3s var(--ease-out),
              transform .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}
.about__cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-deep);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(184, 169, 255, 0.35);
}
.about__cta svg {
  transition: transform .3s var(--ease-out);
}
.about__cta:hover svg {
  transform: translateX(4px);
}
@media (max-width: 880px) {
  .about__badge { margin-inline: auto; }
}

/* ── Flying book - flies in from the right on scroll, flutters ──── */
.about__book {
  position: absolute;
  top: 30%;
  right: -25vw;
  width: clamp(396px, 48vw, 792px);
  z-index: 2;
  pointer-events: none;
}
.about__book-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,0.55));
  animation: book-flutter 5s ease-in-out infinite;
}
@keyframes book-flutter {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  30%      { transform: translateY(-8px) rotate(2deg); }
  60%      { transform: translateY(-3px) rotate(-0.5deg); }
  80%      { transform: translateY(-11px) rotate(2.5deg); }
}

@media (max-width: 880px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__book {
    /* On mobile the book sits below the text column + badge, aligned right */
    position: relative;
    top: auto;
    right: auto;
    width: min(374px, 72vw);
    margin: -20px 0 0 auto;
    transform: none;
    /* Still flies in from off-screen right, GSAP animate right → 0 */
  }
  .about__book-img {
    filter: drop-shadow(0 12px 30px rgba(0,0,0,0.5));
  }
}

/* ── Hero divider - straddles the #hero / #about seam ────────────────
   Asset: llweb_divider_01.png (1381 × 88, ratio ≈ 1:15.7).
   At 100% width, the rendered image is ~6.37vw tall. Half that
   (~3.19vw) is the amount each side overlaps the section boundary.

   Two-part trick to get a true 50/50 visual overlap:
   1. The img is `transform: translateY(-50%)` - CSS transform %
      refers to the element's OWN height, so this shifts the image
      up by ~3.19vw (half of the ~6.37vw rendered height). Without
      help, the img's bottom half would land inside the wrapper's
      empty in-flow space below the boundary - not on #about.
   2. The wrapper has `margin-bottom: -full-img-height` which collapses
      its in-flow space so #about's top edge lands exactly on the
      section boundary (not at the wrapper's natural bottom). Result:
      img's bottom half visually crosses onto #about rather than into
      wrapper whitespace.

   Placed as a sibling of #hero (not a child!) because #hero has
   overflow:hidden used by its parallax layers - an absolutely
   positioned child extending below hero's natural bottom would
   clip. Wrapper z-index:10 lifts it above both sections' bg
   layers. */
/* Horizontal dividers - sit between every pair of adjacent sections
   and STRADDLE the section boundary perfectly (.hero-divider for the
   hero→about seam; .section-divider for every other section seam).

   Math (asset is llweb_divider_01.png - 1381×88, applied identically
   at every boundary):

     (a) img has `aspect-ratio: 1381/88` + `width: 100%` so the in-flow
         box reserves the exact rendered height BEFORE the asset paints
         - eliminates CLS as the divider image loads;
     (b) `transform: translateY(-50%)` on the img lifts the rendered
         img so its vertical midpoint lands precisely on the boundary
         line - top half paints over the previous section, bottom half
         over the next;
     (c) `margin-bottom: calc(-88 / 1381 * 100%)` cancels the img's
         in-flow height so the next section begins exactly where the
         previous one ended - zero gap, zero content overlap.

   Two notes on the unit choice:
     - We use `100%`, not `100vw`, for margin-bottom. `100%` resolves
       against the parent's containing-block width, which matches
       `width: 100%` on the sibling img byte-for-byte. `100vw` includes
       the OS-scrollbar width on Windows (~15–17px), producing a ~1px
       over-pull that nudges the next section up past the boundary by
       that amount. `100%` keeps the math exact on every browser.
     - Update the 1381/88 pair if the divider asset changes - both
       aspect-ratio and the negative-margin calc must move in lockstep
       so (a) reserved box height and (c) margin-cancel stay equal. */
.hero-divider,
.section-divider {
  position: relative;
  width: 100%;
  line-height: 0;
  z-index: 10;
  pointer-events: none;
  margin-bottom: calc(-88 / 1381 * 100%);
}
.hero-divider img,
.section-divider > img:not(.section-divider__keys) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1381 / 88;
  transform: translateY(-50%);
}

/* ── Hanging keys - decorative element on the right side of the
     divider above the Mission section. The PNG hangs below the
     divider seam, swinging gently from a pivot at its top centre.
     `clamp()` keeps it visible but proportional at all widths.     */
.section-divider__keys {
  position: absolute;
  top: -2vw;
  right: clamp(20px, 6%, 80px);
  height: clamp(180px, 30vw, 500px);
  width: auto;
  z-index: 2;
  transform-origin: center top;
  animation: keysSwing 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes keysSwing {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}




/* ── GAMES ─────────────────────────────────────────────────────────── */
/* ── Apps section - right-aligned CTA card ────────────────────── */
.apps { isolation: isolate; }
.apps__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.apps__gradient {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 8, 48, 0.75) 0%,
    rgba(18, 8, 48, 0.55) 45%,
    rgba(18, 8, 48, 0.75) 100%
  );
}  

.apps__header { text-align: right; margin-left: auto; }
.apps__header .section__lede { margin-left: auto; }

.apps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.apps__cta-wrap { text-align: center; margin-top: 48px; }

/* ── Apps section - floating anvil ─────────────────────────────── */
.apps__anvil {
  position: absolute;
  top: clamp(60px, 10vw, 140px);
  left: -18vw;
  width: clamp(320px, 40vw, 680px);
  z-index: -1;
  pointer-events: none;
}
.apps__anvil-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.5));
  animation: anvil-bob 6s ease-in-out infinite;
}
@keyframes anvil-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  25%      { transform: translateY(-10px) rotate(1.5deg); }
  50%      { transform: translateY(-4px) rotate(-0.5deg); }
  75%      { transform: translateY(-14px) rotate(2deg); }
}

@media (max-width: 880px) {
  .apps__anvil {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    width: min(280px, 70vw);
    margin: -30px auto 0 0;
    transform: none;
  }
}

@media (max-width: 960px) {
  .apps__grid,
  .games__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 880px) {
  .apps__header { text-align: center; }
  .apps__header .section__lede { margin-left: 0; }
  .apps__cta-wrap { text-align: center; }
}

/* ── Lab section - right-aligned CTA card ─────────────────────── */
.apps-copy__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: saturate(0.85);
}

/* ── Apps section - background image ──────────────────────────── */
.apps-bg-img {  
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: saturate(0.85);
}

.games { isolation: isolate; }
.games__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.games__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 8, 48, 0.75) 0%,
    rgba(18, 8, 48, 0.55) 45%,
    rgba(18, 8, 48, 0.75) 100%
  );
  z-index: 1;
}
.games__bg-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }

/* ── Labs section - floating dynamite ──────────────────────────── */
.apps__dynamite {
  position: absolute;
  top: clamp(80px, 12vw, 160px);
  left: -18vw;
  width: clamp(300px, 38vw, 650px);
  z-index: -1;
  pointer-events: none;
}
.apps__dynamite-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 36px rgba(0,0,0,0.5));
  animation: dynamite-float 5s ease-in-out infinite;
}
@keyframes dynamite-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  25%      { transform: translateY(-8px) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(2.5deg); }
  75%      { transform: translateY(-12px) rotate(-1deg); }
}

@media (max-width: 880px) {
  .apps__dynamite {
    position: relative;
    top: auto;
    left: auto;
    width: min(250px, 63vw);
    margin: -30px auto 0 0;
    transform: none;
  }
}

.games__cta-wrap { text-align: center; margin-top: 48px; }

/* ── Games section - floating chess piece ──────────────────────── */
.games__chess {
  position: absolute;
  top: clamp(60px, 10vw, 140px);
  right: -18vw;
  width: clamp(270px, 33vw, 570px);
  z-index: -1;
  pointer-events: none;
}
.games__chess-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.5));
  animation: chess-sway 7s ease-in-out infinite;
}
@keyframes chess-sway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20%      { transform: translateY(-6px) rotate(1.8deg); }
  45%      { transform: translateY(-2px) rotate(-1.2deg); }
  70%      { transform: translateY(-10px) rotate(2.2deg); }
}

@media (max-width: 880px) {
  .games__chess {
    position: relative;
    top: auto;
    right: auto;
    width: min(240px, 60vw);
    margin: -30px 0 0 auto;
    transform: none;
  }
}

/* Adventurer's backpack on the Jobs page - same treatment as the
   Games-page chess piece: flies in from the right and sways in place.
   Intrinsic art is 391x400 (vs chess 492x400), so the width clamps
   scale proportionally. */
.jobs__backpack {
  position: absolute;
  top: clamp(60px, 10vw, 140px);
  right: -18vw;
  width: clamp(215px, 26vw, 455px);
  z-index: -1;
  pointer-events: none;
}
.jobs__backpack-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.5));
  animation: chess-sway 7s ease-in-out infinite;
}

@media (max-width: 880px) {
  .jobs__backpack {
    position: relative;
    top: auto;
    right: auto;
    width: min(190px, 48vw);
    margin: -30px 0 0 auto;
    transform: none;
  }
}

.games__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.game-card, .app-card, .job-card {
  position: relative;
  background: rgba(0,0,0,0.32);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  transition:
    transform .4s var(--ease-out),
    border-color .3s var(--ease-out),
    box-shadow .4s var(--ease-out);
}
.game-card:hover, .app-card:hover, .job-card:hover {
  transform: translateY(-8px);
  border-color: var(--accent-2);
  box-shadow: 0 30px 70px -20px rgba(184, 169, 255, 0.4);
}
.game-card__media, .app-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }

.game-card__body, .app-card__body { padding: 22px 24px 26px; }
.game-card__title, .app-card__title, .job-card__title {
  font-family: "IsamiRi Display", serif;
  font-weight: 900;
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.game-card__desc, .app-card__desc, .job-card__desc { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 18px; }
.game-card__stores, .app-card__stores {
  display: flex;
  flex-wrap: wrap;   /* 3-badge row (web + App Store + Google Play) wraps on narrow cards */
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.game-card__stores img, .app-card__stores img { height: 40px; transition: transform .3s var(--ease-out); }
.game-card__stores a:hover img, .app-card__stores a:hover img { transform: translateY(-2px); }

/* Coming-soon store badge - grayed out, non-interactive (aria-disabled span) */
.app-card__store--soon img {
  filter: grayscale(1) opacity(.45);
  cursor: not-allowed;
}
@media (max-width: 420px) {
  .game-card__stores img, .app-card__stores img { height: 36px; }
}

/* More-information link - visual clickability hint that the whole card
   will eventually navigate. For now it's a static href="#" placeholder
   marked with data-card-more for future JS targeting. Sits beneath the
   App Store / Google Play badges, accent-coloured, arrow nudges on
   hover. */
.game-card__more, .app-card__more, .job-card__more {
  display: flex;            /* block-level flex so justify-content applies */
  justify-content: flex-end; /* push text + arrow to the right end of the row */
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: opacity 0.25s var(--ease-out);
}
.game-card__more:hover, .app-card__more:hover, .job-card__more:hover { opacity: 0.85; }
.game-card__more-arrow, .app-card__more-arrow, .job-card__more-arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}
.game-card__more:hover .game-card__more-arrow,
.app-card__more:hover .app-card__more-arrow,
.job-card__more:hover .job-card__more-arrow { transform: translateX(4px); }

/* ── MISSION ───────────────────────────────────────────────────────── */
/* ── WE CREATE (repurposed as Mission) ─────────────────────────────── */
.we-create { isolation: isolate; }
.we-create__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.we-create__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 8, 48, 0.75) 0%,
    rgba(18, 8, 48, 0.55) 45%,
    rgba(18, 8, 48, 0.75) 100%
  );
  z-index: 1;
}
.we-create__bg-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }

.we-create__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.we-create__item {
  position: relative;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(227,179,232,0.18);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: transform .4s var(--ease-out), background .35s var(--ease-out), box-shadow .4s var(--ease-out);
}
.we-create__item:hover {
  transform: translateY(-5px);
  background: rgba(45, 26, 94, 0.7);
  box-shadow: 0 20px 50px -15px rgba(184, 169, 255, 0.25);
}
.we-create__icon { font-size: 1.6rem; display: block; margin-bottom: 12px; }
.we-create__item h3 { font-family: "IsamiRi Display", serif; font-weight: 900; font-size: 1.2rem; margin-bottom: 6px; }
.we-create__item p { color: var(--text-dim); font-size: 0.95rem; }

/* .we-create__props / .we-create__prop decorative parallax + float
   imagery (bottle.png, box.png) was removed by request; the rules
   are deleted here to avoid stacking-context surprises and orphan
   filter declarations lingering in the cascade. */

/* ── PROFESSIONALISM ───────────────────────────────────────────────── */


/* ── FIRE / CTA ────────────────────────────────────────────────────── */
/* ── Contact section - CSS background-image + ::before purple overlay ──
     No DOM elements for the bg - the image is set as a CSS background
     on the section itself, and the gradient overlay is a ::before
     pseudo-element (not a DOM node), so there is nothing that can
     intercept clicks on the form.                                */
.contact-section {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 24px;
  overflow: hidden;
  /* Background image set via CSS - no <img> element in the DOM */
  background-image: url("./assets/llweb_contactus_01.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Purple gradient overlay ::before - NOT a DOM element so it cannot
   capture pointer events. pointer-events: none is belt-and-braces. */
.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(26, 11, 62, 0.6) 0%, rgba(26, 11, 62, 0.2) 40%, rgba(26, 11, 62, 0.85) 100%);
}
.contact-section__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 880px) { .contact-section__inner { grid-template-columns: 1fr; } }

.contact-section__card {
  background: rgba(10, 4, 30, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 169, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 32px);
}

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  background: rgba(18, 8, 48, 0.7);
  border: 1px solid rgba(184, 169, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 32px;
  backdrop-filter: blur(8px);
}
.contact__field {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}  .contact__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .contact__field--full { grid-column: 1 / -1; }
.contact__field input,
.contact__field textarea {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-lg);
  color: var(--text);
  padding: 14px 18px;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  resize: vertical;
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.contact__field input::placeholder,
.contact__field textarea::placeholder { color: rgba(255,255,255,0.35); }
.contact__field input:focus,
.contact__field textarea:focus {
  border-color: var(--accent-3);
  outline: none;
  background: rgba(0,0,0,0.4);
  box-shadow: 0 0 0 3px rgba(210, 132, 218, 0.15);
}
.contact button[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
}
.contact__status {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  color: var(--text-dim);
}
.contact__status.is-success { color: var(--accent); }
.contact__status.is-error   { color: #ff8eaa; }
@media (max-width: 600px) { .contact { grid-template-columns: 1fr; } }

/* ── FOOTER ────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  padding:
    calc(clamp(80px, 10vw, 120px) + var(--sat))
    24px
    calc(40px + var(--sab))
    24px;
  isolation: isolate;
}
.footer__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.footer__bg-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
/* Purple gradient scrim - ensures text stays readable over any background image */
.footer__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(18, 8, 48, 0.92) 0%,
      rgba(18, 8, 48, 0.4) 30%,
      rgba(18, 8, 48, 0.45) 60%,
      rgba(18, 8, 48, 0.9) 100%
    );
  pointer-events: none;
}

.footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1.8fr 0.8fr 1.2fr;
  gap: clamp(36px, 5vw, 60px);
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1.2fr 1.5fr 1fr 1.2fr; gap: clamp(24px, 3vw, 40px); }
}
@media (max-width: 880px) {
  /* One centered column. The old layout kept two columns down to 480px,
     which left the middle band ragged on phones (uneven column heights,
     the Legal block hanging off one side). Everything now stacks and
     centers as a single block on tablets and phones. */
  .footer__grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .footer__brand { grid-column: auto; align-items: center; padding-right: 0; }
  .footer__social-row { justify-content: center; }
  .footer__tag { max-width: 40ch; margin-inline: auto; }
  .footer__col ul { justify-items: center; }
  .footer__coords li { align-items: center; }
  .footer__legal-divider { max-width: 320px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .footer__grid { gap: 32px; }
}
.footer__brand { display: flex; flex-direction: column; gap: 14px; padding-right: clamp(8px, 1.5vw, 24px); }
.footer__mark { width: 140px; height: auto; }
.footer__tag {
  color: var(--text-dim);
  max-width: 34ch;
  line-height: 1.6;
  font-size: 0.92rem;
}

.footer__social-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.footer__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text-soft);
  transition: color .25s var(--ease-out), transform .25s var(--ease-out), background-color .25s var(--ease-out);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
}
.footer__social-icon:hover {
  color: var(--accent);
  transform: translateY(-2px);
  background: rgba(184, 169, 255, 0.1);
  border-color: var(--accent);
}
.footer__social-icon svg {
  flex-shrink: 0;
}

.footer__col h4 {
  font-family: "IsamiRi Display", serif;
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.footer__col ul { display: grid; gap: 10px; }
.footer__col a, .footer__col button {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
  transition: color .25s var(--ease-out);
}
.footer__col a:hover, .footer__col button:hover { color: var(--accent); }

/* ── Coordinates column ─────────────────────────────────────────── */
.footer__col--coords ul { gap: 14px; }
.footer__coord-label {
  display: inline-block;
  font-family: "IsamiRi Display", serif;
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.12em;
  margin-bottom: 2px;
  opacity: 0.8;
}
.footer__coords li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}
.footer__coords a {
  color: var(--text-soft);
  font-size: 0.88rem;
  background: transparent;
  border: 0;
  padding: 0;
  transition: color .25s var(--ease-out);
}
.footer__coords a:hover { color: var(--accent); }

/* ── Legal: divider + security info ─────────────────────────────── */
.footer__legal-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 16px 0 14px;
}
.footer__security {
  display: grid;
  gap: 8px;
}
.footer__security li {
  color: var(--text-dim);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.footer__sec-label {
  color: var(--muted);
  font-family: "IsamiRi Display", serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 6px;
}

/* ── Bottom footer ──────────────────────────────────────────────── */
.footer__bottom {
  position: relative; z-index: 1;
  margin: 24px auto 0;
  width: min(1290px, 92vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 10px 32px;
  color: var(--text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.footer__bottom-left  { text-align: left; }
.footer__bottom-right { text-align: right; }
.footer__bottom-r2l {
  font-weight: 700;
  letter-spacing: 0.08em;
}

@media (min-width: 768px) {
  .footer__bottom-left,
  .footer__bottom-right {
    white-space: nowrap;
  }
}

.footer__time {
  color: var(--accent);
  font-family: "IsamiRi Display", serif;
  letter-spacing: 0.1em;
}
.footer__bottom [data-footer-node] {
  color: var(--accent-3);
  font-weight: 700;
}
.footer__bottom a {
  color: var(--accent);
  transition: color .25s var(--ease-out);
}
.footer__bottom a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 767px) {
  .footer__bottom {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 8px;
  }
  .footer__bottom-left  { text-align: center; }
  .footer__bottom-right { text-align: center; }
}
@media (max-width: 480px) {
  .footer__bottom { font-size: 0.7rem; gap: 6px; }
}

/* ── Account dialog (sliding tabs) ──────────────────────────────────── */
.modal--account {
  max-width: min(480px, 94vw);
  max-height: 85dvh;
  overflow-y: auto;
}
.modal__panel--account {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 85dvh;
}

/* Tab navigation */
.account-tabs__nav {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.15);
}
.account-tabs__tab {
  flex: 1;
  padding: 14px 10px;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: "IsamiRi Display", serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  transition: color .25s var(--ease-out),
              background-color .25s var(--ease-out);
  position: relative;
  cursor: pointer;
}
.account-tabs__tab::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .3s var(--ease-out);
}
.account-tabs__tab.is-active {
  color: var(--accent);
}
.account-tabs__tab.is-active::after {
  transform: scaleX(1);
}
.account-tabs__tab:hover:not(.is-active) {
  color: var(--text-soft);
  background: rgba(255,255,255,0.03);
}

/* Stage wraps panels in a stack - only .is-active panel is visible */
.account-tabs__stage {
  position: relative;
  min-height: 320px;
}
.account-tabs__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--ease-out),
              visibility .3s var(--ease-out);
}
.account-tabs__panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ── Signed-in panel (Phase 2 - injected by main.js) ───────────────
   Shown as panel 3 when a cookie session is active. Built dynamically
   so the account dialog markup stays identical across all pages. */
.account-signedin {
  padding: 28px 28px 30px;
  display: grid;
  gap: 14px;
  text-align: center;
  justify-items: center;
}
.account-signedin__hello {
  font-size: 1.05rem;
  color: var(--text);
}
.account-signedin__hello strong {
  color: var(--accent-3);
  font-weight: 700;
}
.account-signedin__email {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-top: -6px;
  word-break: break-all;
}
.account-signedin__logout {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}
.account-signedin__sessions {
  width: 100%;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 14px;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.account-signedin__session-list {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}
.account-signedin__session-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.18);
  color: var(--text-soft);
  font-size: 0.78rem;
  text-align: left;
}
.account-signedin__session-list li button {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255, 138, 170, 0.5);
  border-radius: 999px;
  padding: 4px 12px;
  color: #ff8eaa;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color .25s var(--ease-out),
              color .25s var(--ease-out);
}
.account-signedin__session-list li button:hover {
  background: rgba(255, 138, 170, 0.15);
  color: #ffb3c6;
}
.account-signedin__kill {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--text-soft);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color .25s var(--ease-out),
              border-color .25s var(--ease-out),
              transform .25s var(--ease-out);
}
.account-signedin__kill:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* "Manage your account →" link in the signed-in panel → account.html */
.account-signedin__manage {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: color .25s var(--ease-out);
}
.account-signedin__manage:hover {
  color: var(--accent-bright, #ffd1e0);
}

/* ── Account Center page (account.html) ────────────────────────── */
/* Defensive [hidden] guard: P2 added display rules to the dashboard
   shell; [hidden] (UA: display:none) is lower-specificity than any class
   rule, so it is pinned here so a future display:grid/flex can never reveal
   a panel that should be hidden. */
.account-page__gate[hidden],
.account-page__dash[hidden],
.account-overview[hidden],
.account-dash__panel[hidden],
.account-nav__menu[hidden] {
  display: none !important;
}

/* Tab nav - horizontal pills on mobile, vertical sidebar on desktop. */
.account-dash__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.5rem;
}
.account-dash__tab {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 8px 18px;
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s var(--ease-out),
              color .25s var(--ease-out),
              border-color .25s var(--ease-out);
}
.account-dash__tab:hover {
  color: var(--text-soft);
  border-color: rgba(255, 255, 255, 0.28);
}
.account-dash__tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a0b3e;
}
@media (min-width: 820px) {
  /* Desktop: identity header, drop-down navigator and panels all stay a
     single centered column (the Tome Tones profile-screen format). The
     navigator is capped narrower than the container so it reads as a
     focused control rather than a stretched bar. */
  .account-page__dash {
    display: block;
  }
  .account-page__dash .account-dash__panels {
    max-width: 980px;
    margin-inline: auto;
  }
  .account-page__status {
    text-align: center;
  }
}

.account-dash__panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 14px);
  background: rgba(0, 0, 0, 0.22);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.account-dash__lede {
  margin: 0 0 1.25rem;
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.55;
}
.account-dash__form {
  display: grid;
  gap: 16px;
}
.account-dash__form--marketing {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.account-dash__submit {
  justify-self: start;
}
.account-overview__quick {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.account-overview__quick h3 {
  width: 100%;
  margin: 0 0 2px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* P3: Security + Activity panel internals */
.account-dash__subtitle {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.account-dash__hint {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.account-dash__subsection {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.account-dash__subsection:first-of-type {
  margin-top: 1.5rem;
}

/* Activity lists (sessions / devices / locations / logins) */
.account-activity__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Recent logins + active sessions - one page (10 rows) rendered at a
   time with Back/Next controls; no inner scroll container needed. */
.account-activity__list--logins,
.account-activity__list--sessions {
  /* page-rendered: height is naturally capped at 10 rows */
}
.account-activity__empty {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.account-activity__pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}
.account-activity__pager-label {
  font-size: 0.74rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.account-activity__pager-btn {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--tt-parchment);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.account-activity__pager-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.3);
}
.account-activity__pager-btn:disabled { opacity: 0.35; cursor: default; }
.account-activity__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm, 8px);
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-soft);
  font-size: 0.8rem;
}
.account-activity__item button {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255, 138, 170, 0.5);
  border-radius: 999px;
  padding: 4px 12px;
  color: #ff8eaa;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s var(--ease-out),
              color .25s var(--ease-out);
}
.account-activity__item button:hover:not(:disabled) {
  background: rgba(255, 138, 170, 0.15);
  color: #ffb3c6;
}
.account-activity__item button:disabled {
  opacity: 0.45;
  cursor: default;
}
.account-activity__kill {
  margin-top: 10px;
  background: transparent;
  border: 1px solid rgba(255, 138, 170, 0.5);
  border-radius: 999px;
  padding: 6px 14px;
  color: #ff8eaa;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s var(--ease-out),
              color .25s var(--ease-out);
}
.account-activity__kill:hover:not(:disabled) {
  background: rgba(255, 138, 170, 0.15);
  color: var(--accent);
}
.account-activity__kill:disabled {
  opacity: 0.45;
  cursor: default;
}
.account-activity__item--login {
  justify-content: flex-start;
}
.account-activity__badge {
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.account-activity__badge.is-success {
  background: rgba(123, 216, 143, 0.15);
  color: #7bd88f;
}
.account-activity__badge.is-error {
  background: rgba(255, 138, 170, 0.15);
  color: #ff8eaa;
}

/* P4: Billing links + danger zone */
.account-dash__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.account-dash__form--danger {
  border: 1px solid rgba(255, 138, 170, 0.28);
  border-radius: var(--radius-md, 14px);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: rgba(255, 138, 170, 0.04);
}
.account-overview__title--danger {
  color: #ff8eaa;
}
.btn--danger {
  background: rgba(255, 138, 170, 0.14);
  border: 1px solid #ff8eaa;
  color: #ff8eaa;
  transition: background-color .25s var(--ease-out),
              color .25s var(--ease-out);
}
.btn--danger:hover:not(:disabled) {
  background: #ff8eaa;
  color: #1a0b3e;
}
.btn--danger:disabled {
  opacity: 0.45;
  cursor: default;
}

.account-page {
  position: relative;
  padding-top: clamp(4rem, 9vh, 7rem);
  padding-bottom: clamp(4rem, 9vh, 7rem);
}
.account-page__header {
  /* Matches the site's .section__header reading width norm. */
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.account-page__gate {
  margin: clamp(1.5rem, 4vh, 3rem) auto 0;
  max-width: 480px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 14px);
  background: rgba(0, 0, 0, 0.22);
  text-align: center;
}
.account-page__gate-title {
  margin: 0 0 1.25rem;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.5;
}
.account-page__dash {
  /* Base (mobile/single-column) - no cap; the .container bounds it.
     Desktop overrides switch to the sidebar + panel grid. */
  margin: clamp(2rem, 5vh, 3.5rem) auto 0;
  max-width: none;
}
.account-overview {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 14px);
  background: rgba(0, 0, 0, 0.22);
}
.account-overview__title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
}
.account-overview__grid {
  display: grid;
  gap: 0.75rem 1.5rem;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.account-overview__item {
  display: grid;
  gap: 4px;
}
.account-overview__item dt {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.account-overview__item dd {
  margin: 0;
  font-size: 1rem;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}
.account-page__status {
  min-height: 1.4em;
  margin: 1rem 0 0;
  font-size: 0.85rem;
  text-align: center;
}
.account-page__status.is-success { color: #7bd88f; }
.account-page__status.is-error   { color: #ff8eaa; }

/* ── Form base ─────────────────────────────────────────────────── */
.account-form {
  padding: 24px 28px 28px;
  display: grid;
  gap: 16px;
}
.account-form__intro {
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0 0 2px;
}
.account-form__field,
.account-form__fieldset {
  display: grid;
  gap: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* Flatten <fieldset> UA defaults when used as a labelled group row (Date of Birth).
   <fieldset> ships with border + padding + min-width:min-content which conflicts
   with the .account-form__field grid layout; <legend> ships with default
   padding + inline-block layout. Override both so the fieldset renders as a
   seamless label-equivalent row. */
.account-form__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.account-form__fieldset > legend {
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
}
.account-form__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.account-form__field input {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color .25s var(--ease-out),
              background-color .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
}
.account-form__field input::placeholder {
  color: rgba(255,255,255,0.25);
}
.account-form__field input:focus {
  border-color: var(--accent-3);
  outline: none;
  background: rgba(0,0,0,0.4);
  box-shadow: 0 0 0 3px rgba(184, 169, 255, 0.12);
}
.account-form__field input.has-error {
  border-color: #ff8eaa;
  box-shadow: 0 0 0 3px rgba(255, 142, 170, 0.12);
}
.account-form__field input.is-valid {
  border-color: rgba(184, 169, 255, 0.4);
}

/* ── Social login buttons ──────────────────────────────────────── */
.account-form__social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.account-form__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: background-color .25s var(--ease-out),
              border-color .25s var(--ease-out),
              transform .25s var(--ease-out);
  cursor: pointer;
}
.account-form__social-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-1px);
}
.account-form__social-btn:active {
  transform: translateY(0);
}
/* Social login (Google/Apple) is not wired up yet - greyed out and
   non-interactive until OAuth is configured. */
.account-form__social-btn:disabled {
  opacity: 0.4;
  filter: grayscale(0.9);
  cursor: not-allowed;
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  transform: none !important;
}
.account-form__social-btn svg {
  flex-shrink: 0;
}

/* ── Divider ───────────────────────────────────────────────────── */
.account-form__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.account-form__divider::before,
.account-form__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

/* ── Password wrapper with toggle ───────────────────────────────── */
.account-form__pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.account-form__pw-input {
  width: 100%;
  padding-right: 44px !important;
}
.account-form__pw-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 8px;
  color: var(--text-dim);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s var(--ease-out);
}
.account-form__pw-toggle:hover {
  color: var(--accent);
}

/* ── Forgot link ────────────────────────────────────────────────── */
.account-form__or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-dim);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: -4px 0;
}
.account-form__or-divider::before,
.account-form__or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

/* ── Register form section header & divider ─────────────────────── */
.account-form__section-header {
  font-family: "IsamiRi Display", serif;
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0;
  padding-bottom: 0;
}

.account-form__plain-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 0;
}

.account-form__select-wrap {
  position: relative;
}
.account-form__select-wrap select {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 12px 40px 12px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color .25s var(--ease-out),
              background-color .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
}
.account-form__select-wrap select:focus {
  border-color: var(--accent-3);
  outline: none;
  background: rgba(0,0,0,0.4);
  box-shadow: 0 0 0 3px rgba(184, 169, 255, 0.12);
}
.account-form__select-wrap select option {
  background: var(--bg-deeper);
  color: var(--text);
}
.account-form__select-wrap select:invalid {
  color: rgba(255,255,255,0.35);
}
.account-form__select-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.35);
  pointer-events: none;
}

.account-form__forgot-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-family: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255,255,255,0.1);
  transition: color .25s var(--ease-out),
              text-decoration-color .25s var(--ease-out);
  cursor: pointer;
}
.account-form__forgot-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ── Switch tab buttons ────────────────────────────────────────── */
.account-form__switch-btn {
  background: transparent;
  border: 0;
  padding: 6px 0;
  color: var(--muted);
  font-size: 0.85rem;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: color .25s var(--ease-out);
  cursor: pointer;
  text-align: center;
}
.account-form__switch-btn:hover {
  color: var(--accent);
}

/* ── Forgot success state ──────────────────────────────────────── */
.account-form__forgot-success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(184, 169, 255, 0.06);
  border: 1px solid rgba(184, 169, 255, 0.2);
  border-radius: var(--radius-md);
}
.account-form__forgot-success svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.account-form__forgot-success p {
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}
.account-form__forgot-success strong {
  color: var(--accent);
  font-weight: 700;
}

/* ── Password strength meter ────────────────────────────────────── */
.account-form__strength {
  margin-top: -6px;
}
.account-form__strength-bar {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}
.account-form__strength-bar span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width .3s var(--ease-out),
              background-color .3s var(--ease-out);
}
.account-form__strength-bar span.is-weak { width: 20%; background: #ff4d6d; }
.account-form__strength-bar span.is-fair { width: 40%; background: #ff8e53; }
.account-form__strength-bar span.is-good { width: 65%; background: #ffd60a; }
.account-form__strength-bar span.is-strong { width: 85%; background: var(--accent); }
.account-form__strength-bar span.is-perfect { width: 100%; background: #4ade80; }

.account-form__strength-checks {
  display: grid;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.account-form__strength-checks li {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  padding-left: 18px;
  position: relative;
  transition: color .25s var(--ease-out);
}
.account-form__strength-checks li::before {
  content: "○";
  position: absolute;
  left: 0;
  color: var(--muted);
  transition: color .25s var(--ease-out);
}
.account-form__strength-checks li.is-met {
  color: var(--accent-3);
}
.account-form__strength-checks li.is-met::before {
  content: "●";
  color: var(--accent);
}

/* ── Checkbox ──────────────────────────────────────────────────── */
/* Legal consents group header (registration: 4 mandatory documents) */
.account-form__legal-group {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 2px;
}
/* Stack the four consent rows tightly and keep the group visually one block */
.account-form__legal-group + .account-form__checkbox {
  margin-top: 8px;
}
.account-form__checkbox:has(+ .account-form__checkbox) {
  margin-bottom: 8px;
}

.account-form__checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  position: relative;
  user-select: none;
}
.account-form__checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.account-form__checkmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  background: rgba(0,0,0,0.2);
  flex-shrink: 0;
  transition: background-color .25s var(--ease-out),
              border-color .25s var(--ease-out);
}
.account-form__checkbox input:checked + .account-form__checkmark {
  background: var(--accent);
  border-color: var(--accent);
}
.account-form__checkbox input:checked + .account-form__checkmark::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  border: solid var(--bg-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -1px;
}
.account-form__checkbox input:focus-visible + .account-form__checkmark {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Links inside form text ────────────────────────────────────── */
.account-form__link {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--accent);
  font-family: inherit;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(184, 169, 255, 0.3);
  transition: color .25s var(--ease-out),
              text-decoration-color .25s var(--ease-out);
  cursor: pointer;
  display: inline;
}
.account-form__link:hover {
  color: #fff;
  text-decoration-color: #fff;
}

/* ── Submit & status ──────────────────────────────────────────── */
.account-form__submit {
  justify-self: stretch;
  justify-content: center;
  margin-top: clamp(12px, 2vh, 20px);
  transition: opacity .3s var(--ease-out), background-color .3s var(--ease-out);
}
.account-form__submit:disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.6);
}
.account-form__status {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}
.account-form__status.is-success { color: var(--accent); }
.account-form__status.is-error   { color: #ff8eaa; }

/* ── Availability indicator (tick/cross) ─────────────────────── */
.account-form__avail-wrap {
  position: relative;
}
.account-form__avail-wrap input {
  width: 100%;
  padding-right: 40px;
}
.account-form__avail-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity .25s var(--ease-out);
}
.account-form__avail-icon.is-checking {
  opacity: 1;
  width: 14px;
  height: 14px;
  border: 2px solid var(--muted);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: avail-spin .6s linear infinite;
  background: transparent;
}
.account-form__avail-icon.is-available {
  opacity: 1;
  background: #4ade80;
  color: #0a041e;
}
.account-form__avail-icon.is-available::after {
  content: "\2713";
}
.account-form__avail-icon.is-taken {
  opacity: 1;
  background: #ff4d6d;
  color: #fff;
}
.account-form__avail-icon.is-taken::after {
  content: "\2715";
  font-size: 0.65rem;
}

@keyframes avail-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* ── Date of birth ───────────────────────────────────────────── */
.account-form__dob-wrap {
  display: grid;
  grid-template-columns: 1fr 0.7fr 0.8fr;
  gap: 8px;
}
.account-form__dob-wrap select,
.account-form__dob-wrap input {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color .25s var(--ease-out),
              background-color .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.account-form__dob-wrap select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.account-form__dob-wrap select:focus,
.account-form__dob-wrap input:focus {
  border-color: var(--accent-3);
  outline: none;
  background-color: rgba(0,0,0,0.4);
  box-shadow: 0 0 0 3px rgba(184, 169, 255, 0.12);
}
.account-form__dob-wrap select option {
  background: var(--bg-deeper);
  color: var(--text);
}

/* ── Password confirmation match indicator ───────────────────── */
.account-form__pw-wrap.has-match .account-form__pw-input {
  border-color: #4ade80;
}
.account-form__pw-wrap.has-mismatch .account-form__pw-input {
  border-color: #ff4d6d;
}
.account-form__pw-wrap.has-error .account-form__pw-input {
  border-color: #ff4d6d;
}

/* ── Account dialog mobile & odd viewports ──────────────────────── */
/* Small-screens: full-screen dialog */
@media (max-width: 520px) {
  .modal--account {
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
    height: 100dvh;
  }
  .modal--account .modal__panel {
    border-radius: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .account-tabs__tab {
    font-size: 0.7rem;
    padding: 12px 6px;
  }
  .account-form {
    padding: 18px 18px 24px;
    gap: 14px;
  }
  .account-form__social {
    grid-template-columns: 1fr;
  }
  .account-form__strength-checks {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 400px) {
  .account-tabs__tab {
    font-size: 0.62rem;
    padding: 10px 4px;
    letter-spacing: 0.03em;
  }
  .account-form {
    padding: 14px 14px 20px;
    gap: 12px;
  }
  .account-form__strength-checks {
    grid-template-columns: 1fr;
  }
}

/* Short/landscape viewports: also full-screen to avoid clipping */
@media (max-height: 640px) {
  .modal--account {
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
    height: 100dvh;
  }
  .modal--account .modal__panel {
    border-radius: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

/* Landscape on foldables / very short screens: shrink tabs & padding */
@media (max-height: 480px) and (orientation: landscape) {
  .account-tabs__tab {
    font-size: 0.65rem;
    padding: 8px 6px;
  }
  .account-form {
    padding: 12px 16px 18px;
    gap: 10px;
  }
  .account-form__social {
    grid-template-columns: 1fr 1fr;
  }
  .account-form__intro {
    font-size: 0.82rem;
  }
  .account-form__field {
    font-size: 0.7rem;
  }
  .account-form__field input {
    padding: 8px 12px;
    font-size: 0.9rem;
  }
  .account-form__submit {
    margin-top: 6px;
    padding: 12px 20px;
    font-size: 0.8rem;
  }
  .account-form__strength-checks {
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }
  .account-form__strength-checks li {
    font-size: 0.7rem;
  }
  .account-form__dob-wrap {
    grid-template-columns: 1fr 0.6fr 0.7fr;
    gap: 6px;
  }
  .account-form__dob-wrap select,
  .account-form__dob-wrap input {
    padding: 8px 10px;
    font-size: 0.85rem;
  }
}

/* Dual-screen foldable landscape: treat as full-screen */
@media (horizontal-viewport-segments: 2) and (orientation: landscape) {
  .modal--account {
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
    height: 100dvh;
  }
  .modal--account .modal__panel {
    border-radius: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

/* On full-screen mobile, the stage fills remaining space */
.account-tabs__stage {
  position: relative;
  flex: 1 1 auto;
}

/* ── VisualViewport keyboard-aware shift ────────────────────────── */
/* Applies when the virtual keyboard is open on mobile */
:root.has-keyboard .modal--account {
  max-height: calc(100dvh - var(--keyboard-inset, 0px));
  transition: max-height .15s ease-out;
}
:root.has-keyboard .modal--account .modal__panel {
  height: 100%;
}

/* ── MODALS ────────────────────────────────────────────────────────── */
.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(640px, 92vw);
  width: 100%;
  border-radius: var(--radius-lg);
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal::backdrop {
  background: rgba(20, 12, 36, 0.75);
  backdrop-filter: blur(4px);
}
.modal__panel {
  background: var(--bg-deeper);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(184,169,255,0.2);
  padding: 0;
  overflow: hidden;
  /* Pinned header: panel is a flex column capped at 85dvh, so the
     head stays put while the body scrolls internally (same pattern
     as the account modal). */
  display: flex;
  flex-direction: column;
  max-height: 85dvh;
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.modal__head h2 {
  font-family: "IsamiRi Display", serif;
  font-size: 1.4rem;
  color: var(--accent);
}
.modal__close {
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 8px;
  transition: background .2s;
}
.modal__close:hover { background: rgba(255,255,255,0.1); }
.modal__body { padding: 24px; color: var(--text-soft); font-size: 0.95rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.modal__body h3 { font-family: "IsamiRi Display", serif; color: var(--text); margin: 20px 0 8px; font-size: 1.05rem; }
.modal__body p { line-height: 1.7; margin: 0 0 12px; }
.modal__body ul { padding-left: 18px; list-style: disc; }
.modal__body li { margin-bottom: 6px; line-height: 1.6; }
.modal__body ul ul { margin-top: 8px; list-style: circle; }
.modal__body strong { color: var(--text); }

/* Legal policies (Privacy, Terms, etc.) */
.modal__body--legal h3 {
  margin: 30px 0 10px;
  padding-top: 4px;
}
.modal__body--legal .clause-tag {
  display: block;
  font-family: "Bluecurve", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 6px;
}
.modal__body--legal .policy-date {
  color: var(--text);
  opacity: 0.75;
  font-size: 0.85rem;
  font-style: italic;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 12px;
  margin-bottom: 6px;
}
.modal__body--legal .legal-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity .2s;
}
.modal__body--legal .legal-link:hover { opacity: 0.75; }
.modal__body--legal .table-wrap { overflow-x: auto; margin: 4px 0 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; }
.modal__body--legal table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 380px; }
.modal__body--legal th {
  text-align: left;
  font-family: "Bluecurve", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.modal__body--legal td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); color: var(--text-soft); }
.modal__body--legal tbody tr:last-child td { border-bottom: 0; }
.modal__body--legal tbody tr:hover td { background: rgba(255,255,255,0.03); }
.modal__body--legal .legal-subhead {
  font-family: "IsamiRi Display", serif;
  color: var(--text);
  font-size: 1rem;
  margin: 22px 0 8px;
}
.modal__body--legal .consent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  margin: 8px 0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  transition: border-color .2s;
}
.modal__body--legal .consent-row:hover { border-color: rgba(184,169,255,0.4); }
.modal__body--legal .consent-checkbox {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.modal__body--legal .consent-checkbox:disabled { cursor: not-allowed; opacity: 0.7; }
.modal__body--legal .consent-label { color: var(--text-soft); font-size: 0.92rem; cursor: pointer; }
.modal__body--legal .consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 4px;
}
.modal__body--legal .legal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg-deep);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s var(--ease-out), background-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.modal__body--legal .legal-btn:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 8px 22px rgba(184,169,255,0.45);
}
.modal__body--legal .legal-btn--danger {
  background: transparent;
  color: #ff7b7b;
  border-color: rgba(255,123,123,0.55);
}
.modal__body--legal .legal-btn--danger:hover {
  background: #ff7b7b;
  color: #1a0b3e;
  box-shadow: 0 8px 22px rgba(255,123,123,0.4);
}
.modal__body--legal .consent-status {
  min-height: 1.3em;
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--accent);
  opacity: 0;
  transition: opacity .3s;
}
.modal__body--legal .consent-status.is-visible { opacity: 1; }

/* Regular modals: full-screen on small viewports */
@media (max-width: 520px), (max-height: 520px) {
  .modal {
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .modal__panel {
    border-radius: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  .modal__body {
    flex: 1 1 auto;
  }
}

/* Keyboard-aware: header & footer show when dialog is open */
:root.has-keyboard .modal {
  max-height: calc(100dvh - var(--keyboard-inset, 0px));
}

/* ── Reveal states (JS toggles .is-in) ─────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s var(--ease-snap), transform .9s var(--ease-snap);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Staggered reveal delays - 60ms cadence matches live-site pacing. */
[data-reveal-stagger="0"] { transition-delay: 0s; }
[data-reveal-stagger="1"] { transition-delay: .06s; }
[data-reveal-stagger="2"] { transition-delay: .12s; }
[data-reveal-stagger="3"] { transition-delay: .18s; }
[data-reveal-stagger="4"] { transition-delay: .24s; }
[data-reveal-stagger="5"] { transition-delay: .3s; }

/* ── Breadcrumb - centered under header, shows current section path ── */
.breadcrumb {
  position: absolute;
  top: 100%;
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease-out),
              margin-top .4s var(--ease-out);
  margin-top: -8px;
}
.breadcrumb.is-visible {
  opacity: 1;
  margin-top: 0;
  pointer-events: auto;
}
.breadcrumb.is-visible {
  opacity: 1;
  margin-top: 0;
  pointer-events: auto;
}
.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  background: rgba(18, 8, 48, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(184, 169, 255, 0.12);
  border-radius: 999px;
  list-style: none;
  margin: 0;
  transition: opacity .25s var(--ease-out);
}
.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.breadcrumb__item + .breadcrumb__item::before {
  content: ">";
  color: var(--muted);
  font-size: 0.6rem;
  opacity: 0.6;
}
.breadcrumb__link {
  color: var(--text-dim);
  text-decoration: none;
  transition: color .2s var(--ease-out);
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: 600;
}
.breadcrumb__link:hover {
  color: var(--accent-3);
}
.breadcrumb__link[aria-current="page"] {
  color: var(--accent);
  pointer-events: none;
  font-weight: 700;
}

@media (max-width: 880px) {
  .breadcrumb__list {
    padding: 3px 10px;
    gap: 4px;
  }
  .breadcrumb__item {
    font-size: 0.6rem;
  }
}

/* Hide breadcrumb when mobile nav overlay is open */
.site-header:has(.nav__center.is-open) .breadcrumb {
  display: none;
}

/* ── Skip link ─────────────────────────────────────────────────────── */
.skip {
  position: fixed;
  top: -44px;
  left: 12px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--bg-deep);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: top .2s var(--ease-out);
}
.skip:focus { top: 12px; outline: 2px solid #fff; }

/* ── Focus-visible: keyboard-only focus ring for all interactive elements ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Remove the default focus ring for mouse users while preserving it for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Ambient glow (live site technique) ──────────────────────────── */
/* Inset box-shadow vignette effect - must NOT remove element from flow. */
.ambient-glow {
  pointer-events: none;
  box-shadow: inset 0 0 132px 100px var(--bg-deepest);
}
/* ── Image reveal animations (enhanced scroll entrances) ────────── */
[data-reveal-image] {
}
/* Zoom: scale from 0.88 */
[data-reveal-image="zoom"] {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.85s var(--ease-snap),
              transform 0.85s var(--ease-snap);
}
[data-reveal-image="zoom"].is-in {
  opacity: 1;
  transform: scale(1);
}
/* Float: gentle rise from below */
[data-reveal-image="float"] {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.85s var(--ease-snap),
              transform 0.85s var(--ease-snap);
}
[data-reveal-image="float"].is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Slide: translateX from right + slight rotate */
[data-reveal-image="slide"] {
  opacity: 0;
  transform: translateX(45px) rotate(2deg);
  transition: opacity 0.85s var(--ease-snap),
              transform 0.85s var(--ease-snap);
}
[data-reveal-image="slide"].is-in {
  opacity: 1;
  transform: translateX(0) rotate(0);
}

/* ── Image hover effects ────────────────────────────────────────── */
.game-card__cover, .app-card__cover {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease-out), filter .6s var(--ease-out);
}
.game-card:hover .game-card__cover, .app-card:hover .app-card__cover {
  transform: scale(1.06);
  filter: brightness(1.08) saturate(1.1);
}

/* ── Cover placeholder - no art yet (In-Production titles) ───────── */
.app-card__cover--placeholder, .game-card__cover--placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 190, 90, 0.14), transparent 60%),
    linear-gradient(160deg, var(--bg-light) 0%, var(--bg-mid) 55%, var(--bg-deepest) 100%);
}
.card-cover__glyph {
  font-family: "IsamiRi Display", serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  color: var(--text-soft);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* ── Background Ken Burns (subtle drift on section BGs) ─────────── */
@keyframes kenBurns {
  0%   { transform: scale(1.05) translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1%, -0.5%); }
  100% { transform: scale(1.05) translate(0, 0); }
}

.games__bg-img { animation: kenBurns 22s ease-in-out infinite reverse; }
.we-create__bg-img { animation: kenBurns 24s ease-in-out infinite reverse; }

/* ── Pulse animation (matches live site) ──────────────────────────── */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.02); opacity: 0.92; }
}

/* ── Scale-in animation (matches live site) ──────────────────────── */
@keyframes scaleIn {
  0%   { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Float idle animation (moved from JS injection) ──────────────── */
@keyframes floatIdle {
  0%, 100% { transform: translateY(0) rotate(var(--idle-rot, 0deg)); }
  50%      { transform: translateY(-10px) rotate(calc(var(--idle-rot, 0deg) - 1.2deg)); }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (min-width: 1360px) {
  .container { width: min(1290px, 88vw); }
}@media (min-width: 1921px) {
  .section__lede { font-size: clamp(1.18rem, 1.2vw, 1.4rem); }
  .game-card__title, .app-card__title, .job-card__title { font-size: 1.8rem; }
}

/* ── Reduced motion (vestibular safety) ────────────────────────────────
   1. Targeted rules - kill specific parallax/transform/reveal animations
      so they don't fire even if the JS that drives them fails open.
   2. Blanket rules - emergency !important override for any animation
      or transition declared elsewhere that we forgot to enumerate.
   3. scroll-behavior: auto - cancels Lenis-style smooth scroll at the
      CSS layer (JS also gates it via matchMedia in main.js).
   4. Decorative hero overlays (.hero__chrome) are hidden entirely -
      flicker can trigger vestibular episodes independent of motion
      preference. */
@media (prefers-reduced-motion: reduce) {
  /* (1) Targeted gates - already-present gating rules, kept verbatim. */
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-reveal-image] { opacity: 1; transform: none; filter: none; transition: none; }
  .hero__title-line[data-reveal],
  .hero__title-line:nth-child(2),
  .hero__title-line:nth-child(3) { opacity: 1; transform: none; }
  [data-float] { animation: none !important; }
  /* Jobs empty-state hourglass icon idle float (added later - kept
     grouped with the other animation kills above). */
  .jobs-empty__icon { animation: none; }
  .preloader__logo { animation: none; }
  .hero__scroll-line { animation: none; }
  .preloader__count { animation: none; }
  .hero__bg-img, .games__bg-img,
  .we-create__bg-img, .apps__anvil-img, .games__chess-img, .apps__dynamite-img,
  .jobs__backpack-img { animation: none; }
  .hero__chrome { display: none; }
  /* Fog video is motion - hide entirely for vestibular safety (same
     rule as .hero__chrome above). */
  .hero__fog { display: none; }
  /* Extended Phase 0 sweep - kill hero parallax, divider translateY(n),
     card hover scale/translate micro-interactions, __more-link arrow nudge. */
  .hero__bg-img,
  .hero__layer,
  .hero-divider img,
  .section-divider img,
  .section-divider__keys { animation: none; transform: none !important; }
  .game-card:hover .game-card__cover,
  .app-card:hover .app-card__cover,
  .game-card__stores a:hover img,
  .app-card__stores a:hover img { transform: none !important; }
  .game-card__more-arrow,
  .app-card__more-arrow,
  .job-card__more-arrow,
  .job-overview__apply,
  .legal-page__doc,
  .legal-page__doc-cta span,
  .contact-page__reach-card,
  .contact-page__reach-hint,
  .contact-page__step { transition: none !important; transform: none !important; }
  /* (2) Blanket emergency gate - catches un-enumerated rules. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  /* (3) Cancel smooth scroll at the CSS layer. */
  html { scroll-behavior: auto !important; }
}

/* ════════════════════════════════════════════════════════════════════
   APPS CATALOG PAGE (apps.html) - hero header, status filter,
   grid, pagination
   ════════════════════════════════════════════════════════════════════ */
.apps-page, .games-page, .labs-page, .legal-page, .jobs-page, .about-page, .contact-page {
  min-height: 100vh;
  padding-top: calc(var(--pad-section) + 96px);
}

/* Contact page hero - the shared rule above forces a full viewport, but
   this section is just an eyebrow/title/lede header + 3 reach cards, so
   it collapses to its content instead of leaving a huge empty band. */
.contact-page {
  min-height: 0;
}

/* About-page “Learn More” CTA jumps to the Mission section - clear the
   fixed header so the section title isn't hidden behind it. Scoped to
   about.html (nothing else links to #weCreate). */
.about-page + .section-divider + #weCreate { scroll-margin-top: calc(var(--pad-section) + 96px); }

/* Jobs + legal content are document-heavy, so on large desktop screens
   they outgrow the shared 1290px container cap and read skinny. Widen
   just these two pages' containers on big viewports - the grids inside
   (jobs cards: repeat(auto-fit, minmax(280px, 1fr)); legal docs:
   repeat(2, 1fr)) both scale fluidly to the wider track. */
@media (min-width: 1600px) {
  .jobs-page .container,
  .legal-page .container {
    width: min(1600px, 94vw);
  }
}
.apps-page__header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 820px;
  /* Same glass text-box as the home page About card - improves legibility
     over the hero photo behind it. */
  background: rgba(10, 4, 30, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 169, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 32px);
}
.apps-page__header .section__lede { margin-left: auto; margin-right: auto; }
.apps-page__header .section__title {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
}

/* Anvil on the Apps page sits lower than on the home page - parked
   beside/behind the filter row instead of up by the headline. Only
   the top changes; the left fly-in and bob are untouched. Desktop-only:
   on <=880px the base rule switches the anvil to position: relative
   with top: auto, and this higher-specificity override must not win
   there (it would shove the in-flow anvil 380-520px down the page). */
@media (min-width: 881px) {
  .apps-page .apps__anvil {
    top: clamp(380px, 34vw, 520px);
  }
}

/* Chess on the Games page sits lower than on the home page - parked
   beside/behind the filter row (mirror of the Apps-page anvil above).
   Only the top changes; the right fly-in and sway are untouched.
   Desktop-only for the same reason as the anvil override. */
@media (min-width: 881px) {
  .games-page .games__chess {
    top: clamp(380px, 34vw, 520px);
  }
}

/* Backpack on the Jobs page sits lower than the home-page default -
   parked beside/behind the filter row (mirror of the chess/anvil
   overrides). Only the top changes; the right fly-in and sway are
   untouched. Desktop-only for the same reason as the others. */
@media (min-width: 881px) {
  .jobs-page .jobs__backpack {
    top: clamp(380px, 34vw, 520px);
  }
}

/* Dynamite on the Lab page sits lower than on the home page - parked
   beside/behind the filter row (mirror of the anvil/chess overrides).
   Only the top changes; the left fly-in and drift are untouched.
   Desktop-only for the same reason as the anvil override. */
@media (min-width: 881px) {
  .labs-page .apps__dynamite {
    top: clamp(380px, 34vw, 520px);
  }
}

/* ── Legal page (legal.html) - summary + 4 document buttons ──────────
   The four documents are opened as modals (data-open-modal) - the same
   dialogs the nav dropdown and footer legal column trigger. */
.legal-page__docs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(40px, 5vw, 64px);
}
.legal-page__doc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(22px, 2.6vw, 30px);
  background: rgba(10, 4, 30, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 169, 255, 0.14);
  border-radius: var(--radius-lg);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .3s var(--ease-out),
              border-color .3s var(--ease-out),
              background-color .3s var(--ease-out);
}
.legal-page__doc:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 169, 255, 0.45);
  background-color: rgba(18, 8, 48, 0.65);
}
.legal-page__doc-num {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.legal-page__doc-title {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
}
.legal-page__doc-desc {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  flex: 1 0 auto;
}
.legal-page__doc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.legal-page__doc-cta span {
  transition: transform .3s var(--ease-out);
}
.legal-page__doc:hover .legal-page__doc-cta span {
  transform: translateX(4px);
}

@media (max-width: 880px) {
  .legal-page__docs {
    grid-template-columns: 1fr;
  }
}

/* ── Contact page (contact.html) - reach cards + what-happens-next ────
   Reach cards sit under the frosted hero header; each is a quick
   contact route (email / phone / studio) driven by footer coords JSON. */
.contact-page__reach {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  margin-top: clamp(40px, 5vw, 64px);
}
.contact-page__reach-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: clamp(20px, 2.4vw, 28px);
  background: rgba(10, 4, 30, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 169, 255, 0.14);
  border-radius: var(--radius-lg);
  color: var(--text);
  text-decoration: none;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
a.contact-page__reach-card:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 169, 255, 0.45);
  background-color: rgba(18, 8, 48, 0.65);
  box-shadow: 0 16px 40px -16px rgba(184, 169, 255, 0.35);
}
.contact-page__reach-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.contact-page__reach-value {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
}
.contact-page__reach-hint {
  margin-top: auto;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color .3s var(--ease-out);
}
a.contact-page__reach-card:hover .contact-page__reach-hint { color: var(--accent-2); }

/* What happens next - numbered 3-step strip below the form */
.contact-page__steps-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(36px, 4.5vw, 56px);
  padding: 0;
}
.contact-page__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(22px, 2.6vw, 30px);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(227, 179, 232, 0.18);
  border-radius: var(--radius-lg);
  transition: transform .35s var(--ease-out), border-color .3s var(--ease-out), box-shadow .35s var(--ease-out);
}
.contact-page__step:hover {
  transform: translateY(-5px);
  border-color: rgba(184, 169, 255, 0.4);
  box-shadow: 0 20px 50px -18px rgba(184, 169, 255, 0.3);
}
.contact-page__step-num {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--accent);
}
.contact-page__step h3 {
  font-family: "IsamiRi Display", serif;
  font-weight: 900;
  font-size: 1.2rem;
  margin-bottom: 4px;
}
.contact-page__step p {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* ── Toolbar: status filter pills + view toggle ────────────────── */
.apps-page__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 56px;
  max-width: 900px;
}
.apps-page__toolbar .apps-page__filter {
  margin: 0;
  max-width: none;
}
.apps-page__filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.apps-page__view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(18, 8, 48, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}
.apps-page__view-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-family: "Bluecurve", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s var(--ease-out),
              color .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}
.apps-page__view-btn svg { flex: 0 0 auto; }
.apps-page__view-btn:hover { color: var(--text); }
.apps-page__view-btn.is-active {
  background: var(--accent);
  color: var(--bg-deep);
  box-shadow: 0 6px 24px rgba(184, 169, 255, 0.35);
}
.apps-page__filter-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--text);
  font-family: "Bluecurve", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .3s var(--ease-out),
              border-color .3s var(--ease-out),
              color .3s var(--ease-out),
              transform .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}
.apps-page__filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}
.apps-page__filter-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-deep);
  box-shadow: 0 6px 24px rgba(184, 169, 255, 0.35);
}

/* ── Status badge on cards ─────────────────────────────────────── */
.app-card__status {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: "Bluecurve", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(18, 8, 48, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text);
  backdrop-filter: blur(4px);
}
.app-card__status--released     { border-color: rgba(126, 231, 135, 0.5); color: #7ee787; }
.app-card__status--in-production { border-color: rgba(255, 197, 92, 0.5); color: #ffc55c; }
.app-card__status--upcoming     { border-color: rgba(126, 182, 255, 0.5); color: #7eb6ff; }

/* ── Horizontal card stack (list view) ─────────────────────────── */
.apps-page__grid.is-list {
  grid-template-columns: 1fr;
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}
.apps-page__grid.is-list .apps-page__card {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  align-items: stretch;
  overflow: hidden;
}
.apps-page__grid.is-list .apps-page__card .app-card__media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 240px;
}
.apps-page__grid.is-list .apps-page__card .app-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: clamp(24px, 4vw, 44px);
}
.apps-page__grid.is-list .apps-page__card .app-card__title { font-size: 1.7rem; }

@media (max-width: 860px) {
  .apps-page__grid.is-list .apps-page__card {
    grid-template-columns: 1fr;
  }
  .apps-page__grid.is-list .apps-page__card .app-card__media {
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
  }
}

/* ── Jobs page (jobs.html) - job cards ────────────────────────────
   Rendered by initJobsPage() through the shared initCatalogPage hook.
   No cover art / thumbnails / store badges - the head carries the team
   pill, followed by meta (location + type) and a short desc. */
.job-card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 30px);
  cursor: pointer; /* whole card opens the role overview modal */
}
.job-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 6px;
}
.job-card__title { margin-bottom: 0; }
.job-card__team {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(126, 182, 255, 0.45);
  color: #7eb6ff;
  background: rgba(126, 182, 255, 0.08);
  white-space: nowrap;
}
.job-card__team--world-narrative { border-color: rgba(184, 169, 255, 0.45); color: #b8a9ff; background: rgba(184, 169, 255, 0.08); }
.job-card__team--art-animation    { border-color: rgba(255, 157, 206, 0.45); color: #ff9dce; background: rgba(255, 157, 206, 0.08); }
.job-card__team--live-operations  { border-color: rgba(255, 197, 92, 0.45); color: #ffc55c; background: rgba(255, 197, 92, 0.08); }
.job-card__team--studio-production { border-color: rgba(126, 231, 135, 0.45); color: #7ee787; background: rgba(126, 231, 135, 0.08); }
.job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 4px;
}
.job-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 0.8rem;
}
.job-card__meta-item svg { flex-shrink: 0; }
.job-card__more { margin-top: auto; padding-top: 16px; }

/* Jobs list view - no media column, so the card becomes a two-column
   row: head (title + team badge stacked) + desc on the left, meta on
   the right. Overrides the shared is-list grid-template (which expects
   a media column) via specificity. */
.apps-page__grid.is-list .job-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 28px;
}
.apps-page__grid.is-list .job-card__head { margin-bottom: 0; }
.apps-page__grid.is-list .job-card__desc { margin-bottom: 0; }
.apps-page__grid.is-list .job-card__meta {
  justify-content: flex-end;
  text-align: right;
  margin-bottom: 0;
}
.apps-page__grid.is-list .job-card__more { padding-top: 0; }

/* ── Role overview modal (jobs page) ─────────────────────────────── */
.job-overview__body { display: flex; flex-direction: column; }
.job-overview__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
}
.job-overview__title {
  font-family: "IsamiRi Display", serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  color: var(--text);
  margin: 0;
}
.job-overview__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 18px;
}
.job-overview__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.job-overview__meta-item svg { flex-shrink: 0; }
.job-overview__desc { color: var(--text-soft); line-height: 1.7; margin-bottom: 22px; }
.job-overview__apply {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-deep);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(184, 169, 255, 0.3);
  transition: transform .3s var(--ease-out),
              background-color .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}
.job-overview__apply:hover {
  transform: translateY(-3px);
  background: #fff;
  box-shadow: 0 10px 28px rgba(184, 169, 255, 0.45);
}

/* ── In-production notice dialog (cards without a dedicated page) ──
   Opened when a card whose catalog entry has no site page is clicked.
   Reuses the shared .modal scaffold; only the body copy needs styling. */
.in-production__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.in-production__msg {
  color: var(--text-soft);
  line-height: 1.7;
  margin: 0;
  max-width: 46ch;
}
.in-production__ok {
  align-self: flex-start;
  padding: 12px 30px;
}

@media (max-width: 860px) {
  .apps-page__grid.is-list .job-card { grid-template-columns: 1fr; }
  .apps-page__grid.is-list .job-card__meta { justify-content: flex-start; text-align: left; }
}

/* ── Card entry animation (re-triggered on filter/page change) ── */
.apps-page__card { animation: appCardIn .55s var(--ease-out) both; }
@keyframes appCardIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ── Pagination ────────────────────────────────────────────────── */
.apps-page__pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 56px;
}
.apps-page__page-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  color: var(--text);
  font-family: "Bluecurve", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color .3s var(--ease-out),
              border-color .3s var(--ease-out),
              color .3s var(--ease-out),
              transform .3s var(--ease-out);
}
.apps-page__page-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}
.apps-page__page-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-deep);
}
.apps-page__page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.apps-page__empty {
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  padding: 48px 0;
}

/* ── Jobs empty state - big, bold, with an hourglass icon ──────── */
.jobs-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: clamp(48px, 8vw, 96px) 20px;
}
.jobs-empty__icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: radial-gradient(circle at 50% 35%, rgba(184, 169, 255, 0.22), rgba(184, 169, 255, 0.04) 70%);
  border: 1px solid rgba(184, 169, 255, 0.35);
  box-shadow: 0 0 40px rgba(184, 169, 255, 0.18), inset 0 0 24px rgba(184, 169, 255, 0.08);
  margin-bottom: 6px;
  animation: floatIdle 5s ease-in-out infinite;
}
.jobs-empty__title {
  font-family: "BlueCurve", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: #fff;
  margin: 0;
  text-shadow: 0 0 24px rgba(184, 169, 255, 0.25);
}
.jobs-empty__sub {
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 46ch;
  margin: 0;
}
.jobs-empty__cta {
  margin-top: 10px;
}

/* ════════════════════════════════════════════════════════════════
   COOKIE BANNER - first-visit consent, fixed bottom card
   ================================================================ */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: min(720px, calc(100% - 24px));
  z-index: 90;
  background: linear-gradient(160deg, var(--bg-light), var(--bg-deeper));
  border: 1px solid rgba(184, 169, 255, 0.28);
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.45);
  padding: 22px 26px calc(22px + var(--sab));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out), visibility .5s;
}
.cookie-banner.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cookie-banner__title {
  font-family: "IsamiRi Display", serif;
  font-size: 1.25rem;
  color: var(--accent-3);
  margin: 0;
  letter-spacing: 0.02em;
}
.cookie-banner__body {
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
  max-width: 62ch;
}
.cookie-banner__legal-title {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 18px 0 8px;
}
.cookie-banner__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.cookie-banner__legal a,
.cookie-banner__legal button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(184, 169, 255, 0.35);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.cookie-banner__legal a:hover,
.cookie-banner__legal button:hover {
  color: var(--accent-3);
  text-decoration-color: var(--accent-3);
}
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.cookie-banner__actions .btn {
  padding: 12px 20px;
  font-size: 0.9rem;
}
@media (max-width: 560px) {
  .cookie-banner__actions .btn {
    flex: 1 1 auto;
    padding: 12px 14px;
  }
  .cookie-banner__legal {
    flex-direction: column;
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .discord-banner__card::before { animation: none; opacity: 0; }
  .discord-banner__card:hover .discord-banner__cta,
  .discord-banner__card:focus-visible .discord-banner__cta { transform: none; }
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  ACCOUNT CENTER - Lore Labyrinth purple theme (Tome Tones profile-screen layout)                 ║
   ║  Forest-green glass cards, gold accents, glowing avatar identity  ║
   ║  header, drop-down section navigator. Scoped to .account-page -   ║
   ║  the site chrome (header/footer/buttons elsewhere) is untouched.  ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
.account-page {
  --tt-bg-deep: var(--bg-deepest);
  --tt-bg-card: var(--bg-mid);
  --tt-bg-card-2: var(--bg-deeper);
  --tt-gold: var(--accent-2);
  --tt-gold-soft: rgba(154, 127, 255, 0.16);
  --tt-parchment: var(--text);
  --tt-parchment-dim: var(--text-dim);
  --tt-line: rgba(154, 127, 255, 0.14);
  --tt-rose: #ff8eaa;
  --tt-teal: #7bd88f;
  --tt-radius: 22px;
}
/* Page canvas - deep forest gradient behind the whole section. */
.account-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 480px at 50% -120px, rgba(154, 127, 255, 0.07), transparent 65%),
    linear-gradient(180deg, var(--bg-deepest) 0%, var(--bg-deeper) 55%, var(--bg-deepest) 100%);
  pointer-events: none;
  z-index: -1;
}
.account-page .container { position: relative; }

/* Identity header - 2-column profile-screen layout: avatar + name + @
   handle on the left; platform/tier badges + feedback + log out on the
   right (matches the Tome Tones app profile screen). */
.account-id {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px 24px;
  margin: clamp(1rem, 4vh, 2.5rem) auto 0;
  max-width: 760px;
  text-align: left;
}
.account-id__left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.account-id__who { min-width: 0; }
.account-id__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.account-id__avatar {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--tt-gold);
  background:
    radial-gradient(circle at 50% 35%, rgba(154, 127, 255, 0.28), rgba(154, 127, 255, 0.05) 70%),
    var(--tt-bg-card);
  border: 1px solid rgba(154, 127, 255, 0.45);
  box-shadow:
    0 0 34px rgba(154, 127, 255, 0.22),
    0 0 90px rgba(154, 127, 255, 0.10),
    inset 0 0 18px rgba(154, 127, 255, 0.10);
}
.account-id__name {
  margin: 6px 0 0;
  font-family: "IsamiRi Display", serif;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  color: var(--tt-parchment);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.account-id__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tt-gold);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.account-id__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.account-id__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.account-id__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--tt-parchment);
  font-size: 0.74rem;
  font-weight: 600;
}
.account-id__badge--tier {
  background: var(--tt-gold-soft);
  border-color: rgba(154, 127, 255, 0.4);
  color: var(--tt-gold);
}
.account-id__handle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--tt-bg-card);
  border: 1px solid var(--tt-line);
  color: var(--tt-parchment);
  font-size: 0.8rem;
  font-weight: 600;
}
.account-id__logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--tt-parchment);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.account-id__feedback {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--tt-gold-soft);
  border: 1px solid rgba(154, 127, 255, 0.4);
  color: var(--tt-gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.account-id__feedback:hover {
  background: rgba(154, 127, 255, 0.16);
  border-color: rgba(154, 127, 255, 0.6);
}
@media (max-width: 640px) {
  .account-id { grid-template-columns: 1fr; text-align: center; }
  .account-id__left { flex-direction: column; justify-content: center; }
  .account-id__right { align-items: center; }
  .account-id__badges { justify-content: center; }
  .account-id__actions { align-items: center; }
}
.account-id__logout:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.3);
}
.account-id__logout:disabled { opacity: 0.5; cursor: default; }

/* Drop-down section navigator - the app's glass pill. */
.account-nav {
  position: relative;
  max-width: 760px;
  margin: clamp(1.5rem, 4vh, 2.5rem) auto 0;
}
.account-nav__trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 20px;
  border-radius: 999px;
  background: rgba(30, 16, 67, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--tt-parchment);
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.account-nav__trigger:hover,
.account-nav__trigger[aria-expanded="true"] {
  border-color: rgba(154, 127, 255, 0.4);
  background: rgba(30, 16, 67, 0.95);
}
.account-nav__trigger-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tt-gold-soft);
  color: var(--tt-gold);
  flex-shrink: 0;
}
/* Icon swap: only the active section's icon is visible. */
.account-nav__trigger-icon svg { display: none; }
.account-nav__trigger[data-active="0"] svg[data-nav-icon="0"],
.account-nav__trigger[data-active="1"] svg[data-nav-icon="1"],
.account-nav__trigger[data-active="2"] svg[data-nav-icon="2"],
.account-nav__trigger[data-active="3"] svg[data-nav-icon="3"],
.account-nav__trigger[data-active="4"] svg[data-nav-icon="4"],
.account-nav__trigger[data-active="5"] svg[data-nav-icon="5"],
.account-nav__trigger[data-active="6"] svg[data-nav-icon="6"],
.account-nav__trigger[data-active="7"] svg[data-nav-icon="7"],
.account-nav__trigger[data-active="8"] svg[data-nav-icon="8"] { display: block; }
.account-nav__trigger-label { flex: 1; text-align: left; }
.account-nav__chevron { flex-shrink: 0; opacity: 0.7; transition: transform .25s var(--ease-out); }
.account-nav__trigger[aria-expanded="true"] .account-nav__chevron { transform: rotate(180deg); }
.account-nav__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 20px;
  background: rgba(18, 8, 48, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
}
.account-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--tt-parchment-dim);
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.account-nav__item:hover { background: rgba(255, 255, 255, 0.05); color: var(--tt-parchment); }
.account-nav__item.is-active {
  background: var(--tt-gold-soft);
  color: var(--tt-gold);
}
.account-nav__item svg { flex-shrink: 0; }
.account-nav__item-label { flex: 1; }
.account-nav__item-tag {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* Section intros - gold ruled heading like the app. */
.account-sec__intro {
  margin: clamp(1.5rem, 4vh, 2.25rem) 0 1.1rem;
  max-width: 760px;
}
.account-sec__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "IsamiRi Display", serif;
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  color: var(--tt-gold);
  font-weight: 400;
}
.account-sec__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(154, 127, 255, 0.4), transparent);
}
.account-sec__title--danger { color: var(--tt-rose); }
.account-sec__title--danger::after {
  background: linear-gradient(90deg, rgba(255, 142, 170, 0.4), transparent);
}
.account-sec__caption {
  margin-top: 6px;
  color: var(--tt-parchment-dim);
  font-size: 0.88rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Panels become hairline-bordered forest cards, pushed below the intro. */
.account-page .account-dash__panel {
  background: rgba(30, 16, 67, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--tt-radius);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-top: 1.1rem;
}
.account-page .account-dash__form--danger {
  background: rgba(255, 142, 170, 0.05);
  border: 1px solid rgba(255, 142, 170, 0.25);
}

/* Info rows - the app's icon + label/value hairline list. */
.account-rows {
  display: grid;
  margin: 0;
  max-width: 760px;
}
.account-rows__item {
  display: grid;
  gap: 2px;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.account-rows__item:last-child { border-bottom: 0; }
.account-rows__item dt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-parchment-dim);
}
.account-rows__icon { display: grid; place-items: center; color: var(--tt-gold); opacity: 0.9; }
.account-rows__item dd {
  margin: 0;
  padding-left: 25px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--tt-parchment);
  overflow-wrap: anywhere;
}

/* Quick actions - the app's arrow-row buttons. */
.account-quick {
  margin-top: 1.5rem;
  max-width: 760px;
}
.account-quick__title {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-parchment-dim);
  margin-bottom: 10px;
}
.account-quick__grid { display: grid; gap: 8px; }
.account-quick__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--tt-parchment);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.account-quick__btn:hover {
  background: var(--tt-gold-soft);
  border-color: rgba(154, 127, 255, 0.35);
}
.account-quick__btn svg:first-child { color: var(--tt-gold); flex-shrink: 0; }
.account-quick__btn span { flex: 1; }
.account-quick__arrow { opacity: 0.45; flex-shrink: 0; }

/* Forms inside the dashboard - dark glass inputs, gold focus. */
.account-page .account-dash__form .account-form__field span {
  color: var(--tt-parchment-dim);
}
.account-page .account-form__field input,
.account-page .account-form__field textarea,
.account-page .account-form__field select {
  background: rgba(10, 4, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--tt-parchment);
  border-radius: 14px;
}
.account-page .account-form__field input::placeholder,
.account-page .account-form__field textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.account-page .account-form__field input:focus,
.account-page .account-form__field textarea:focus,
.account-page .account-form__field select:focus {
  border-color: var(--tt-gold);
  background: rgba(10, 4, 30, 0.75);
  box-shadow: 0 0 0 3px rgba(154, 127, 255, 0.15);
  outline: none;
}
/* App-style inputs: icon-prefixed rounded pills. */
.account-page .account-form__field input[type="password"],
.account-page .account-form__field input[type="text"],
.account-page .account-form__field input[type="email"],
.account-page .account-form__field input[type="number"],
.account-page .account-form__field input[type="time"],
.account-page .account-form__field input[type="date"],
.account-page .account-form__field input[type="url"] {
  padding: 14px 16px 14px 44px;
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 17px 17px;
}
.account-page .account-form__field input[type="password"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%239a7fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='2.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
.account-page .account-form__field input[type="email"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%239a7fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
.account-page .account-form__field input[type="text"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%239a7fff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-3.6 7.2'/%3E%3C/svg%3E");
}
/* Time/date/number/url keep native glyphs - just round them and pad. */
.account-page .account-form__field input[type="time"],
.account-page .account-form__field input[type="date"],
.account-page .account-form__field input[type="number"],
.account-page .account-form__field input[type="url"] {
  padding-left: 44px;
}

/* Account name (Public Profile) - read-only @ identity. Locked look:
   muted, no pointer, no focus glow. The icon prefix matches other rows. */
.account-page .account-form__field input[readonly][disabled] {
  color: rgba(255, 255, 255, 0.55);
  cursor: not-allowed;
  opacity: 1; /* keep the value readable - native disabled dims it */
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55);
  background-image: none; /* no @-glyph on top of the icon span */
}
.account-page .account-form__hint {
  font-size: 0.74rem;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tt-parchment-dim);
}

/* Bio - a normal writing surface: inherit the body font (the site's mono
   display face made sentences look like code), sentence-case placeholder,
   comfortable padding and resize handle. */
.account-page .account-form__field textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  resize: vertical;
}
.account-page .account-form__field textarea::placeholder {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
}

/* Primary submit buttons - solid gold pill, dark text (app CTA style). */
.account-page .account-dash__submit.btn--primary {
  background: var(--tt-gold);
  border-color: var(--tt-gold);
  color: var(--bg-deep);
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 24px rgba(154, 127, 255, 0.18);
  transition: filter .25s var(--ease-out), transform .25s var(--ease-out);
}
.account-page .account-dash__submit.btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.account-page .btn--danger {
  background: rgba(255, 142, 170, 0.85);
  border-color: rgba(255, 142, 170, 0.9);
  color: var(--bg-deepest);
  border-radius: 999px;
  font-weight: 800;
}
.account-page .btn--danger:hover:not(:disabled) {
  background: var(--tt-rose);
  color: var(--bg-deepest);
}

/* Toggle switches - gold when on, like the app.
   Base layout: the input is visually hidden; track/thumb form the control;
   label + hint text sit beside it. DOM order is input → track → text, so
   :checked styling must target the track through the general sibling. */
.account-page .account-switch {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(10, 4, 30, 0.45);
  cursor: pointer;
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.account-page .account-switch:hover {
  border-color: rgba(255, 255, 255, 0.18);
}
.account-page .account-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.account-page .account-switch__track {
  flex-shrink: 0;
  position: relative;
  width: 44px;
  height: 24px;
  margin-top: 1px;
  background: rgba(10, 4, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.account-page .account-switch input:checked ~ .account-switch__track {
  background: var(--tt-gold);
  border-color: var(--tt-gold);
}
.account-page .account-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--tt-parchment);
  border-radius: 50%;
  transition: transform .25s var(--ease-out), background-color .25s var(--ease-out);
}
.account-page .account-switch input:checked ~ .account-switch__track .account-switch__thumb {
  transform: translateX(20px);
  background: var(--bg-deep);
}
.account-page .account-switch input:focus-visible ~ .account-switch__track {
  box-shadow: 0 0 0 3px rgba(184, 169, 255, 0.3);
}
.account-page .account-switch__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.account-page .account-switch__text strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--tt-parchment);
}
.account-page .account-switch__text small {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--tt-parchment-dim);
  text-transform: none;
  letter-spacing: 0;
}

/* Preference form cards - the panels previously had no .account-card
   styling at all, so fields floated bare. Match the app's grouped-card
   look: one surface per logical group. */
.account-page .account-card--form {
  display: grid;
  gap: 16px;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(10, 4, 30, 0.45);
}
.account-page .account-card__sub {
  margin: 0;
  font-size: 0.82rem;
  color: var(--tt-parchment-dim);
}
.account-page .account-card__heading {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tt-parchment);
}
.account-page .account-card__note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--tt-parchment-dim);
}
/* Toggles stack as their own rows inside the marketing card. */
.account-page .account-card--form .account-switch + .account-switch {
  margin-top: 2px;
}
/* Input icon rows (clock / bell icon inside the field). */
.account-page .account-form__input-row {
  position: relative;
  display: flex;
  align-items: center;
}
.account-page .account-form__input-row svg {
  position: absolute;
  left: 13px;
  color: var(--tt-parchment-dim);
  pointer-events: none;
}
.account-page .account-form__input-row input {
  width: 100%;
  padding-left: 38px;
}

/* Password checklist - circles turning gold checks. */
.account-pwcheck {
  display: grid;
  gap: 5px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.account-pwcheck li {
  position: relative;
  padding-left: 24px;
  font-size: 0.8rem;
  color: var(--tt-parchment-dim);
  transition: color .2s var(--ease-out);
}
.account-pwcheck li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.account-pwcheck li::after {
  content: "";
  position: absolute;
  left: 4.2px;
  top: 4.6px;
  width: 6.5px;
  height: 3.5px;
  border-left: 1.8px solid transparent;
  border-bottom: 1.8px solid transparent;
  transform: rotate(-45deg);
  transition: border-color .2s var(--ease-out);
}
.account-pwcheck li.is-ok { color: var(--tt-parchment); }
.account-pwcheck li.is-ok::before {
  border-color: var(--tt-gold);
  background: var(--tt-gold-soft);
}
.account-pwcheck li.is-ok::after { border-color: var(--tt-gold); }

/* Danger callout - the app's rose warning banner. */
.account-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 142, 170, 0.3);
  background: rgba(255, 142, 170, 0.07);
  margin: 0 0 4px;
}
.account-callout p {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--tt-parchment);
  overflow-wrap: anywhere;
}
.account-callout__icon { color: var(--tt-rose); flex-shrink: 0; margin-top: 2px; }

/* Activity feed cards. */
.account-page .account-activity__item {
  background: rgba(10, 4, 30, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--tt-parchment-dim);
}
.account-page .account-activity__item button,
.account-page .account-activity__kill {
  border-color: rgba(255, 142, 170, 0.45);
  color: var(--tt-rose);
}
.account-page .account-activity__item button:hover:not(:disabled),
.account-page .account-activity__kill:hover:not(:disabled) {
  background: rgba(255, 142, 170, 0.12);
  color: #ffb3c6;
}
.account-page .account-activity__badge.is-success {
  background: rgba(123, 216, 143, 0.15);
  color: var(--tt-teal);
}
.account-page .account-activity__badge.is-error {
  background: rgba(255, 142, 170, 0.15);
  color: var(--tt-rose);
}

/* Ghost buttons inside the dashboard. */
.account-page .btn--ghost {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--tt-parchment);
}

/* Status text. */
.account-page .account-page__status.is-success { color: var(--tt-teal); }
.account-page .account-page__status.is-error { color: var(--tt-rose); }

/* Responsive: identity + nav keep the app's centered single column. */
@media (max-width: 560px) {
  .account-id__badges { gap: 6px; }
  .account-nav__menu { border-radius: 16px; }
  .account-rows__item dd { padding-left: 0; }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  DISCORD BANNER - low-height community card (index + contact)      ║
   ║  Container-wide glass card; blurple-tinted but site-native.        ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
/* Grouped with the contact section: sits inside the same .container flow,
   shares the contact backdrop, and tightens the section's bottom padding
   so the group reads as one unit. */
.contact-section:has(.discord-banner) {
  padding-bottom: clamp(48px, 7vw, 96px);
}
.contact-section .discord-banner {
  position: relative; /* paints above the section's ::before overlay */
  margin-top: clamp(20px, 3vw, 36px);
  padding: 0;
}
.discord-banner__card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 24px);
  padding: clamp(16px, 2.5vw, 22px) clamp(18px, 3vw, 32px);
  border-radius: var(--radius-lg, 24px);
  /* More opaque than before - reads as a solid card over the backdrop */
  background:
    linear-gradient(120deg, rgba(88, 101, 242, 0.34), rgba(154, 127, 255, 0.24) 55%, rgba(255, 255, 255, 0.08)),
    rgba(18, 8, 48, 0.62);
  border: 1px solid rgba(88, 101, 242, 0.45);
  box-shadow: 0 12px 40px rgba(10, 4, 30, 0.35);
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
/* Shimmer - a soft diagonal sheen sweeping across every few seconds.
   Sits behind the content, subtle enough not to distract. */
.discord-banner__card::before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -30%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.07) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.07) 55%, transparent 100%);
  transform: translateX(-120%) skewX(-12deg);
  animation: discord-shimmer 6s var(--ease-out) infinite;
}
@keyframes discord-shimmer {
  0%, 55% { transform: translateX(-120%) skewX(-12deg); }
  75%, 100% { transform: translateX(420%) skewX(-12deg); }
}
.discord-banner__card > * { position: relative; /* keep content above the sheen */ }
.discord-banner__card:hover {
  transform: translateY(-3px);
  border-color: rgba(88, 101, 242, 0.7);
  box-shadow: 0 18px 50px rgba(88, 101, 242, 0.22);
}
.discord-banner__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 16px;
  background: rgba(88, 101, 242, 0.2);
  border: 1px solid rgba(88, 101, 242, 0.45);
  color: #aab4ff;
}
.discord-banner__copy {
  flex: 1;
  display: grid;
  gap: 3px;
  min-width: 0;
}
.discord-banner__title {
  font-family: "IsamiRi Display", serif;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--text);
  line-height: 1.2;
}
.discord-banner__sub {
  font-size: clamp(0.82rem, 1.4vw, 0.92rem);
  color: var(--text-dim);
  line-height: 1.45;
}
/* Same hover language as .btn--primary (Send Message): lift + white fill + glow */
.discord-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-deep);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform .3s var(--ease-out), background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.discord-banner__card:hover .discord-banner__cta,
.discord-banner__card:focus-visible .discord-banner__cta {
  transform: translateY(-3px);
  background: #fff;
  box-shadow: 0 10px 28px rgba(184, 169, 255, 0.45);
}

/* ── Content-visibility performance utility ───────────────────────── */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
}
@media (max-width: 640px) {
  .discord-banner__card {
    flex-wrap: wrap;
  }
  .discord-banner__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ===========================================================================
   LOWEFORD LEGAL EMBED - style hooks for loweford-legal.js
   Fills the legal modals (terms/privacy/cookies/dpa) from the central
   document service; matches the existing modal typography.
   =========================================================================== */
.ll-legal__meta { opacity: .6; font-size: .85em; margin: 0 0 1.5em; }
.ll-legal__section { margin: 0 0 1.75em; }
.ll-legal__heading { margin: 1.25em 0 .6em; }
.ll-legal__text { margin: 0 0 .9em; }
.ll-legal__list { margin: 0 0 .9em; padding-left: 1.5em; }