/* ============================================================
   Mo 2 Enterprise
   The Erianux layout, rebuilt for a Las Vegas tax practice.
   Blue on black. One home screen, a menu, and the
   inner pages behind it. Nothing else on the home.
   ============================================================ */

:root {
  --bg:          #0A0C10;   /* black with a blue cast                     */
  --bg-lift:     #10131A;
  --ink:         #ECEFF4;
  --ink-mid:     #98A0AD;
  --ink-faint:   #5F6774;
  --rule:        #1B2029;
  --rule-lit:    #2A313D;

  --accent:      #2F6BFF;   /* the brand: blue. rules, fills              */
  --accent-lit:  #6B97FF;   /* the brand, lit - type on the dark ground   */
  --paper:       #ECEFF4;

  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:    "Public Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono:    "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  --edge: clamp(20px, 3.2vw, 44px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* THE HOME DOES NOT SCROLL. One screen; the menu is the way anywhere. */
body.home { height: 100svh; overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; font-family: var(--display); }
p { margin: 0; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 1px solid var(--accent-lit); outline-offset: 4px; }

.micro {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1;
}
.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; }

/* ------------------------------------------------------------ chrome --
   Four fixed corners: menu tab top right, mark top left, copyright
   bottom left, social + phone bottom right. The overlay menu the tab
   drives. Identical grammar to the Erianux chrome. */
.menu-tab, .identity, .est, .corner-br {
  position: fixed;
  z-index: 60;
}

.menu-tab { top: var(--edge); right: var(--edge); display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 11px; padding: 0; }
.tab-bars { display: block; width: 22px; height: 9px; position: relative; }
.tab-bars i { position: absolute; left: 0; width: 100%; height: 1px; background: var(--ink); transition: transform 0.42s var(--ease-io), width 0.42s var(--ease-io); }
.tab-bars i:nth-child(1) { top: 0; }
.tab-bars i:nth-child(2) { bottom: 0; width: 62%; }
.menu-tab:hover .tab-bars i:nth-child(2) { width: 100%; }
.tab-bars.is-x i:nth-child(1) { top: 4px; transform: rotate(45deg); }
.tab-bars.is-x i:nth-child(2) { bottom: 4px; width: 100%; transform: rotate(-45deg); }
.tab-label { transition: color 0.3s var(--ease); color: var(--ink-mid); }
.menu-tab:hover .tab-label { color: var(--ink); }

.identity { top: var(--edge); left: var(--edge); display: block; line-height: 0; }
.idm { height: 28px; width: auto; overflow: visible; display: block; }
.idm path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: square; stroke-linejoin: miter; transition: stroke 0.4s var(--ease); }
.identity:hover .idm path { stroke: var(--accent-lit); }

.est { bottom: var(--edge); left: var(--edge); }
.copyr { color: var(--ink-mid); letter-spacing: 0.04em; white-space: nowrap; }

.corner-br { bottom: var(--edge); right: var(--edge); display: grid; justify-items: end; gap: 8px; }
.soc { display: inline-flex; align-items: center; gap: 14px; }
.soc-a { display: inline-flex; color: var(--ink-mid); transition: color 0.25s var(--ease); }
.soc-a:hover { color: var(--accent-lit); }
.soc-a svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.phone-br { color: var(--ink-mid); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.phone-br:hover { color: var(--ink-mid); }

/* scrim so the corners have something to sit on once an inner page moves */
.chrome-scrim { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--edge) * 2 + 34px); z-index: 55; pointer-events: none; background: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 62%, transparent 100%); opacity: 0; transition: opacity 0.22s var(--ease); }
html[data-scrolled="1"] .chrome-scrim { opacity: 1; }
body:has(.console) .chrome-scrim { background: linear-gradient(to bottom, var(--con-bg) 0%, color-mix(in srgb, var(--con-bg) 82%, transparent) 62%, transparent 100%); }

/* ------------------------------------------------------------ menu --- */
.menu { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--edge) * 3) var(--edge) var(--edge); }
.menu[hidden] { display: none; }
.menu-fill { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(107, 151, 255, 0.06), transparent 60%), #10131A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scaleY(0); transform-origin: top; transition: transform 0.72s var(--ease-io); }
.menu.is-open .menu-fill { transform: scaleY(1); }
.tab-close .tab-bars i { background: #ECEFF4; }
.tab-close .tab-label { color: #98A0AD; }
.tab-close { z-index: 2; opacity: 0; transition: opacity 0.4s 0.35s; }
.menu.is-open .tab-close { opacity: 1; }
.menu-nav { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1180px; margin-inline: auto; margin-block: auto; width: 100%; }
.menu-link { display: flex; align-items: baseline; justify-content: center; gap: clamp(14px, 2.4vw, 30px); padding-block: clamp(12px, 1.7vh, 20px); overflow: hidden; }
.menu-n { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; color: #6B97FF; transform: translateY(118%); transition: transform 0.82s var(--ease); }
.menu-word { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1.1; letter-spacing: -0.01em; color: #ECEFF4; transform: translateY(118%); transition: color 0.3s var(--ease), transform 0.82s var(--ease); }
.menu.is-open .menu-word, .menu.is-open .menu-n { transform: translateY(0); }
.menu-link:nth-child(1) .menu-word { transition-delay: 0.30s; } .menu-link:nth-child(1) .menu-n { transition-delay: 0.30s; }
.menu-link:nth-child(2) .menu-word { transition-delay: 0.355s; } .menu-link:nth-child(2) .menu-n { transition-delay: 0.355s; }
.menu-link:nth-child(3) .menu-word { transition-delay: 0.41s; } .menu-link:nth-child(3) .menu-n { transition-delay: 0.41s; }
.menu-link:nth-child(4) .menu-word { transition-delay: 0.465s; } .menu-link:nth-child(4) .menu-n { transition-delay: 0.465s; }
.menu-link:nth-child(5) .menu-word { transition-delay: 0.52s; } .menu-link:nth-child(5) .menu-n { transition-delay: 0.52s; }
.menu-link:nth-child(6) .menu-word { transition-delay: 0.575s; } .menu-link:nth-child(6) .menu-n { transition-delay: 0.575s; }
.menu-link:nth-child(7) .menu-word { transition-delay: 0.63s; } .menu-link:nth-child(7) .menu-n { transition-delay: 0.63s; }
.menu.is-open .menu-link:hover .menu-word { color: var(--accent-lit); }
.menu-foot { position: relative; z-index: 2; justify-content: center; color: #98A0AD; border-top-color: #1B2029; margin-top: clamp(24px, 4vh, 48px); padding-top: 18px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 10px 28px; max-width: 1180px; margin-inline: auto; width: 100%; color: var(--ink-faint); }
.menu-foot a:hover { color: #ECEFF4; }

/* ------------------------------------------------------------ field --
   The hairline ladder behind the home, bowing away from the cursor. */
.field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* the home: the city, full bleed, washed toward the ground so the type reads */
.hero-media { position: fixed; inset: -3%; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: saturate(0.5) brightness(0.8); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 46% 60% at 50% 52%, rgba(10, 12, 16, 0.78), rgba(10, 12, 16, 0.45) 70%, rgba(10, 12, 16, 0.3) 100%), linear-gradient(to bottom, rgba(10, 12, 16, 0.5), rgba(10, 12, 16, 0.45) 60%, rgba(10, 12, 16, 0.85)); }

/* ------------------------------------------------------------ home ---
   The stage: one screen. Mark, one line, the services rail. */
.stage { position: relative; z-index: 1; height: 100svh; display: grid; grid-template-columns: 100%; place-items: center; padding: calc(var(--edge) * 3) var(--edge); }
.stage::before { content: none; }
.stage-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 4.6vh, 56px); perspective: 1100px; width: 100%; max-width: 100%; }

.mark-hold { display: grid; place-items: center; justify-items: center; gap: 18px; position: relative; }
.mark-big { width: clamp(96px, 15vw, 168px); height: auto; overflow: visible; }
.mark-big path { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.mark-big .mark-rise { stroke: var(--accent-lit); }
.wordmark { text-align: center; }
.wordmark b { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: 0; color: var(--ink); }
.wordmark small { display: block; margin-top: 8px; color: var(--ink-mid); font-size: 0.74rem; }

.strap { font-family: var(--display); font-weight: 400; margin: 0; font-size: clamp(1.5rem, 2.9vw, 2.4rem); line-height: 1.3; letter-spacing: 0; text-align: center; color: #FFFFFF; white-space: nowrap; }
.strap em { font-style: normal; color: var(--accent-lit); }
@media (max-width: 680px) { .strap { white-space: normal; max-width: 24ch; } }

/* the seven services, moving - where Erianux runs its platform logos */
.rail { width: min(760px, 100%); overflow: hidden; border-top: 1px solid rgba(236, 239, 244, 0.28); border-bottom: 1px solid rgba(236, 239, 244, 0.28); padding-block: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.rail-run { display: flex; width: max-content; animation: rail 30s linear infinite; }
.rail:hover .rail-run { animation-play-state: paused; }
.rail-set { display: flex; align-items: center; gap: clamp(22px, 3vw, 36px); padding-inline: clamp(11px, 1.5vw, 18px); list-style: none; margin: 0; flex-wrap: nowrap; }
.rail-set li { display: flex; align-items: center; gap: 12px; flex: none; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; transition: color 0.3s var(--ease); }
.rail-set li i { width: 5px; height: 5px; background: var(--accent-lit); transform: rotate(45deg); }
.rail-set li:hover { color: var(--ink); }
@keyframes rail { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.stage-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border: 1px solid var(--rule-lit); border-radius: 2px; font-family: var(--sans); font-size: 0.95rem; font-weight: 500; letter-spacing: 0; color: var(--ink); transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease); }
.cta:hover { color: var(--accent-lit); border-color: var(--accent); }
.cta-solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.cta-solid:hover { background: var(--accent-lit); border-color: var(--accent-lit); color: #fff; }
.stage-cta .cta:not(.cta-solid) { border-color: rgba(236, 239, 244, 0.45); color: #FFFFFF; }
.stage-cta .cta:not(.cta-solid):hover { color: var(--accent-lit); }

[data-in] { opacity: 0; transition: opacity 0.9s var(--ease); }
[data-in].in { opacity: 1; }


/* ------------------------------------------------------------ inner ---
   The measured column. Index, kicker, title, lede; then movements. */
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--edge); }
.page { position: relative; z-index: 1; }
.page-head { padding-top: clamp(120px, 20vh, 220px); padding-bottom: clamp(40px, 7vw, 84px); }
.page-index { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(24px, 4vw, 42px); }
.page-index i { width: 40px; height: 1px; background: var(--accent); display: block; }
.page-index span:first-child { color: var(--accent-lit); }
.page-title { font-family: var(--display); font-weight: 500; font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: 1.06; letter-spacing: -0.015em; max-width: 18ch; }
.page-title em { font-style: normal; color: var(--accent-lit); }
.page-lede { margin-top: clamp(22px, 3vw, 34px); font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.6; color: var(--ink-mid); max-width: 54ch; }
.page-body { padding-bottom: clamp(50px, 8vw, 100px); }
.page-body-full { width: 100%; max-width: none; margin-inline: 0; padding-inline: clamp(10px, 1.6vw, 22px); padding-top: clamp(58px, 8vh, 88px); padding-bottom: clamp(18px, 3vw, 34px); }

.movement { display: grid; grid-template-columns: minmax(0, 15ch) minmax(0, 1fr); gap: clamp(20px, 5vw, 70px); padding-block: clamp(46px, 7vw, 92px); border-top: 1px solid var(--rule); }
@media (max-width: 760px) { .movement { grid-template-columns: 1fr; gap: 14px; } }
.movement > h2 { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; padding-top: 0.6em; line-height: 1.6; }
.movement-body > * + * { margin-top: 1.15em; }
.movement-body p { color: var(--ink-mid); font-size: 1.08rem; line-height: 1.75; max-width: 62ch; }
.movement-body strong { color: var(--ink); font-weight: 500; }
.movement-body .big { font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); max-width: 28ch; }
.movement-body .big em { font-style: normal; color: var(--accent-lit); }

.ruleset { list-style: none; padding: 0; margin: 0; }
.ruleset li { padding-block: 20px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 2.6ch 1fr; gap: 16px; }
.ruleset li:first-child { border-top: 0; padding-top: 4px; }
.ruleset b { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--accent-lit); font-weight: 500; padding-top: 0.45em; }
.ruleset strong { color: var(--ink); font-weight: 500; font-family: var(--display); font-size: 1.25rem; }
.ruleset .rs-t { display: block; margin-bottom: 3px; }
.ruleset span { color: var(--ink-mid); font-size: 1.02rem; line-height: 1.7; }

.matrix { border-top: 1px solid var(--rule-lit); }
.matrix-row { display: grid; grid-template-columns: minmax(0, 20ch) minmax(0, 1fr) auto; gap: clamp(14px, 3vw, 40px); align-items: baseline; padding-block: 22px; border-bottom: 1px solid var(--rule); }
.matrix-name { color: var(--ink); font-weight: 500; font-size: 1.2rem; letter-spacing: 0; font-family: var(--display); }
.matrix-note .meta { display: inline-block; margin-top: 6px; color: var(--accent-lit); }
.matrix-note { color: var(--ink-mid); font-size: 1rem; line-height: 1.65; }
.status { font-family: var(--sans); font-size: 0.82rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 6px 12px; border: 1px solid var(--rule-lit); border-radius: 2px; color: var(--ink-faint); white-space: nowrap; justify-self: end; }
.status-primary { color: var(--accent-lit); border-color: rgba(107, 151, 255, 0.45); }
.status-live { color: var(--paper); }
@media (max-width: 700px) { .matrix-row { grid-template-columns: 1fr auto; row-gap: 6px; } .matrix-note { grid-column: 1 / -1; } }

.aside { border-left: 1px solid var(--accent); padding: 4px 0 4px 22px; color: var(--ink-mid); font-size: 1.15rem; font-family: var(--display); line-height: 1.6; max-width: 58ch; }

.figure { margin: 0; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; background: var(--bg-lift); }
.figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.figure figcaption { padding: 10px 14px; color: var(--ink-faint); }
.figure.wide img { aspect-ratio: 2.4 / 1; }

.who { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.who > div { border: 1px solid var(--rule); border-top: 2px solid var(--rule-lit); border-radius: 3px; padding: 22px 24px; background: rgba(255, 255, 255, 0.008); transition: border-color 0.3s var(--ease); }
.who > div:hover { border-top-color: var(--accent); }
.who .role { color: var(--accent-lit); margin-bottom: 12px; }
.who h3 { font-size: 1.8rem; margin-bottom: 10px; font-weight: 500; }
.who p { color: var(--ink-mid); font-size: 1rem; line-height: 1.7; }

/* contact form + booking, in the inner-page materials */
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.f-grid .wide { grid-column: 1 / -1; }
@media (max-width: 620px) { .f-grid { grid-template-columns: 1fr; } }
.f { display: grid; gap: 7px; }
.f label { color: var(--ink-faint); }
.f input, .f textarea, .f select { width: 100%; background: var(--bg-lift); border: 1px solid var(--rule-lit); border-radius: 2px; padding: 12px 13px; color: var(--ink); font: inherit; font-size: 1rem; transition: border-color 0.25s var(--ease); }
.f input:focus, .f textarea:focus, .f select:focus { outline: none; border-color: var(--accent); }
.f textarea { resize: vertical; min-height: 140px; }
.f select option { background: var(--bg-lift); color: var(--ink); }
.note { margin-top: 16px; padding: 12px 14px; border-left: 2px solid var(--accent); background: rgba(107, 151, 255, 0.06); color: var(--ink-mid); font-size: 0.9rem; line-height: 1.55; border-radius: 0 4px 4px 0; }
.note.ok { border-color: #6FA987; background: rgba(111, 169, 135, 0.08); }

.bk-steps { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.bk-s { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-faint); }
.bk-s .dot { width: 8px; height: 8px; border: 1px solid var(--rule-lit); transform: rotate(45deg); }
.bk-s[data-state="active"] { color: var(--ink); }
.bk-s[data-state="active"] .dot { border-color: var(--accent); background: var(--accent); }
.bk-s[data-state="done"] { color: var(--ink-mid); }
.bk-s[data-state="done"] .dot { border-color: var(--accent-lit); }
.bk-sep { width: 26px; height: 1px; background: var(--rule-lit); }
.panel { display: none; }
.panel.on { display: block; }
.panel h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin-bottom: 8px; font-weight: 500; }
.panel .sub { color: var(--ink-mid); margin-bottom: 24px; font-size: 1.05rem; }
.pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.pick button { text-align: left; border: 1px solid var(--rule); border-top: 2px solid var(--rule-lit); border-radius: 3px; padding: 18px 18px 16px; background: rgba(255, 255, 255, 0.008); display: grid; gap: 6px; transition: border-color 0.25s var(--ease); position: relative; }
.pick button:hover { border-top-color: var(--accent); }
.pick button[aria-pressed="true"] { border-color: var(--accent); border-top-color: var(--accent); background: rgba(107, 151, 255, 0.06); }
.pick .pn { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; color: var(--accent-lit); }
.pick .pt { font-family: var(--display); font-weight: 500; font-size: 1.3rem; letter-spacing: 0; }
.pick .pd { color: var(--ink-mid); font-size: 0.95rem; line-height: 1.55; }
.pick .pr { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; font-variant-numeric: tabular-nums; }
.pick button[aria-pressed="true"] .pr { color: var(--accent-lit); }
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 28px; align-items: start; }
@media (max-width: 760px) { .cal-wrap { grid-template-columns: 1fr; } }
.cal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-top h3 { font-size: 1.1rem; }
.rnd { width: 34px; height: 34px; border: 1px solid var(--rule-lit); border-radius: 4px; color: var(--ink-mid); display: grid; place-items: center; }
.rnd:hover:not([disabled]) { color: var(--ink); border-color: var(--accent); }
.rnd[disabled] { opacity: 0.35; cursor: default; }
.dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.dow span { text-align: center; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.day { height: 42px; border: 1px solid var(--rule); border-radius: 4px; color: var(--ink); font-family: var(--mono); font-size: 0.85rem; font-variant-numeric: tabular-nums; position: relative; }
.day:hover:not([disabled]) { border-color: var(--accent); }
.day[disabled] { color: var(--ink-faint); opacity: 0.4; cursor: default; }
.day.empty { border: 0; }
.day.today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; background: var(--accent-lit); transform: translateX(-50%) rotate(45deg); }
.day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.slot-head { margin-bottom: 12px; color: var(--ink); font-family: var(--display); font-weight: 500; font-size: 1.15rem; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot { padding: 10px 6px; border: 1px solid var(--rule-lit); border-radius: 4px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.slot:hover:not([disabled]) { color: var(--ink); border-color: var(--accent); }
.slot[disabled] { opacity: 0.32; cursor: default; text-decoration: line-through; }
.slot[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.bk-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; align-items: center; }
.sum { border: 1px solid var(--rule-lit); border-top: 2px solid var(--accent); border-radius: 3px; padding: 20px 22px; background: rgba(255, 255, 255, 0.008); position: sticky; top: calc(var(--edge) * 2 + 34px); }
.sum h3 { font-size: 1.1rem; margin-bottom: 4px; }
.sum .sm { color: var(--ink-faint); margin-bottom: 16px; }
.srow { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--rule); margin: 0; }
.srow dt { color: var(--ink-faint); }
.srow dd { margin: 0; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.srow dd.none { color: var(--ink-faint); }
.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 900px) { .bk-grid { grid-template-columns: 1fr; } .sum { position: static; } }

.next { display: block; border-top: 1px solid var(--rule); padding-block: clamp(34px, 5vw, 60px); margin-bottom: calc(var(--edge) * 2.4); transition: background-color 0.35s var(--ease); }
.next:hover { background: rgba(255, 255, 255, 0.016); }
.next-inner { display: flex; align-items: baseline; gap: 20px; }
.next-word { font-family: var(--display); font-weight: 500; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -0.01em; transition: color 0.3s var(--ease), transform 0.45s var(--ease); }
.next-arrow { margin-left: auto; color: var(--ink-faint); font-size: 1.4rem; transition: transform 0.45s var(--ease), color 0.3s var(--ease); }
.next:hover .next-word { color: var(--accent-lit); }
.next:hover .next-arrow { color: var(--accent-lit); transform: translateX(6px); }

[data-r] { opacity: 0; transform: translateY(10px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-r].in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ gate ---
   Sign in: the pattern stage with one centred card. */
.gate { padding-block: clamp(48px, 9vh, 132px) clamp(12px, 2vw, 24px); }
.gate-stage { min-height: min(76svh, 780px); position: relative; display: grid; place-items: center; align-content: center; gap: 18px; padding: clamp(36px, 6vw, 84px) clamp(16px, 4vw, 48px); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(107, 151, 255, 0.10), transparent 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 16px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 16px), var(--bg); }
.gate-card { position: relative; width: 100%; max-width: 400px; border: 1px solid var(--rule-lit); border-top: 2px solid var(--accent); border-radius: 4px; padding: clamp(26px, 4vw, 40px); background: color-mix(in srgb, var(--bg) 92%, #10131A); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.gate-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.gate-brand svg { width: 22px; height: 22px; overflow: visible; }
.gate-brand svg path { fill: none; stroke: var(--accent-lit); stroke-width: 4; stroke-linecap: square; }
.gate-word { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); }
.gate-title { font-size: 2.1rem; letter-spacing: -0.01em; color: var(--ink); margin: 0; font-weight: 500; }
.gate-sub { color: var(--ink-mid); font-size: 1rem; margin: 8px 0 26px; }
.gate-form { display: grid; gap: 7px; }
.gate-form label { color: var(--ink-faint); margin-top: 10px; }
.gate-form label:first-child { margin-top: 0; }
.gate-form input { width: 100%; background: var(--bg-lift); border: 1px solid var(--rule); border-radius: 4px; padding: 11px 12px; color: var(--ink); font: inherit; font-size: 0.97rem; transition: border-color 0.25s var(--ease); }
.gate-form input:focus { outline: none; border-color: var(--accent); }
.gate-go { margin-top: 22px; width: 100%; background: var(--accent); border: 1px solid var(--accent); border-radius: 2px; color: #fff; font-family: var(--sans); font-size: 0.9rem; font-weight: 500; letter-spacing: 0; padding: 12px; cursor: pointer; transition: filter 0.25s var(--ease); }
.gate-go:hover { filter: brightness(1.16); }
.gate-msg { margin: 10px 0 0; color: var(--ink-mid); line-height: 1.5; }
.gate-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--ink-faint); }
.gate-home { position: relative; color: var(--ink-faint); transition: color 0.25s var(--ease); }
.gate-home:hover { color: var(--accent-lit); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-in], [data-r] { opacity: 1; transform: none; }
  /* the rail keeps moving: the owner asked for it by name (2026-09-02) */
  .rail-run { animation: rail 30s linear infinite !important; animation-duration: 30s !important; animation-iteration-count: infinite !important; }
}