:root {
  --bg: #0c0b09;
  --bg-alt: #131110;
  --surface: #17140f;
  --surface-alt: #1f1a13;
  --border: #332a1c;
  --border-soft: #241f16;
  --text: #f4eee2;
  --text-dim: #a89a83;
  --text-faint: #6f6455;
  --beige: #e9dcc3;
  --gold: #b8874b;
  --gold-rgb: 184, 135, 75;
  --gold-bright: #e0bd83;
  --gold-deep: #7c4a24;
  --bronze: #7c4a24;
  --accent-text: #0c0b09;
  --gold-gradient: linear-gradient(135deg, var(--gold-bright), var(--gold) 48%, var(--bronze) 100%);
  --radius: 8px;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.75);
  --shadow-gold: 0 12px 32px -14px rgba(var(--gold-rgb), 0.45);
  --max: 1160px;
}

* {
  box-sizing: border-box;
}

/* Components below set their own `display` (flex/block/etc.) at the same
   specificity as the browser's default [hidden] rule, which lets the
   component's rule win the cascade and silently defeats `el.hidden = true`.
   Force it back with !important so toggling `.hidden` always actually
   hides the element, on any component. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

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

a {
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: "Sora", "Segoe UI", system-ui, sans-serif;
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* Top signature rule */
.gold-rule {
  height: 3px;
  background: var(--gold-gradient);
}

/* Intro animation — plays once on every load of the homepage, before the
   real header/hero underneath. Pure CSS (runs even with no JS, and even if
   style.css is slow — it's the first rule the browser applies once the
   stylesheet loads), so there's nothing to fail open on. */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg);
  pointer-events: none;
  animation: introOverlayOut 2.1s ease forwards;
}

.intro-overlay__mark {
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  letter-spacing: 0.01em;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  animation: introMarkIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.intro-overlay__line {
  width: 0;
  height: 2px;
  background: var(--gold-gradient);
  animation: introLineIn 0.7s ease-out 0.35s forwards;
}

.intro-overlay__tag {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0;
  animation: introTagIn 0.6s ease 0.55s forwards;
}

@keyframes introMarkIn {
  to { opacity: 1; transform: none; }
}
@keyframes introLineIn {
  to { width: 96px; }
}
@keyframes introTagIn {
  to { opacity: 1; }
}
@keyframes introOverlayOut {
  0%, 62% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-overlay { display: none; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 3px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  padding: 12px 20px;
  font-size: 0.8rem;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--gold-gradient);
  color: var(--accent-text);
  box-shadow: var(--shadow-gold);
}

.btn--primary:hover {
  box-shadow: 0 16px 40px -14px rgba(var(--gold-rgb), 0.6);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.btn--lg {
  padding: 15px 28px;
  font-size: 0.85rem;
}

.btn--nav {
  margin-left: auto;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 11, 9, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand__name {
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav {
  display: flex;
  gap: 26px;
}

.nav a {
  position: relative;
  text-decoration: none;
  color: var(--text-dim);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 4px;
}

.nav a:not(.nav-secondary)::before {
  content: "> ";
  color: var(--gold);
  opacity: 0.55;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.2s ease;
}

.nav a:hover {
  color: var(--gold-bright);
}

.nav a:hover::after {
  width: 100%;
}

.nav a.nav-secondary {
  margin-left: auto;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.nav-secondary::after {
  display: none;
}

.nav-secondary:hover,
.nav-secondary.is-active {
  color: var(--gold-bright);
  border-color: var(--gold);
}

/* "We're hiring" banner — top of the homepage, above the client bar */
.hiring-bar {
  background: color-mix(in srgb, var(--gold) 14%, var(--surface-alt));
  border-bottom: 1px solid var(--border-soft);
}

.hiring-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 24px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  text-align: center;
}

.hiring-bar__badge {
  background: var(--gold);
  color: #111;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.hiring-bar__inner > span:not(.hiring-bar__badge) {
  color: var(--text-dim);
}

.hiring-bar__inner a {
  color: var(--gold-bright);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}

.hiring-bar__inner a:hover {
  color: var(--gold);
}

/* "Already a client?" banner — top of the homepage, above the hero */
.client-bar {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-soft);
}

.client-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 24px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  text-align: center;
}

.client-bar__inner span {
  color: var(--text-dim);
}

.client-bar__inner a {
  color: var(--gold-bright);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}

.client-bar__inner a:hover {
  color: var(--gold);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--gold);
  display: block;
}

/* Hero */
.hero,
.activate-hero {
  position: relative;
  padding: 108px 0 84px;
  overflow: hidden;
}

.hero::before,
.activate-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(var(--gold-rgb), 0.05) 0,
      rgba(var(--gold-rgb), 0.05) 1px,
      transparent 1px,
      transparent 64px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(var(--gold-rgb), 0.05) 0,
      rgba(var(--gold-rgb), 0.05) 1px,
      transparent 1px,
      transparent 64px
    ),
    radial-gradient(circle at 82% 12%, rgba(var(--gold-rgb), 0.14), transparent 45%);
  mask-image: linear-gradient(to bottom, black, transparent 96%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 56px;
  align-items: center;
}

/* Live digital-network backdrop: slow, restrained movement that suggests
   connected systems and automation without competing with the page copy. */
.hero__ambient{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:.96}
.hero__ambient::before{content:"";position:absolute;inset:-15%;background:linear-gradient(115deg,transparent 18%,rgba(var(--gold-rgb),.025) 34%,rgba(var(--gold-rgb),.075) 49%,rgba(var(--gold-rgb),.025) 64%,transparent 82%);transform:translateX(-45%);animation:ambientSweep 24s ease-in-out infinite}
.hero__ambient::after{content:"";position:absolute;width:34vw;height:34vw;min-width:280px;min-height:280px;right:-9%;top:8%;border:1px solid rgba(var(--gold-rgb),.28);border-radius:50%;box-shadow:0 0 0 52px rgba(var(--gold-rgb),.05),0 0 0 104px rgba(var(--gold-rgb),.032);animation:ambientOrbit 26s linear infinite}
.hero__ambient span{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--gold-bright);box-shadow:0 0 0 6px rgba(var(--gold-rgb),.14),0 0 28px rgba(var(--gold-rgb),.62);animation:ambientNode 6s ease-in-out infinite}
.hero__ambient span::after{content:"";position:absolute;left:9px;top:4px;width:clamp(90px,16vw,240px);height:1px;background:linear-gradient(90deg,rgba(var(--gold-rgb),.58),transparent);transform-origin:left center}
.hero__ambient span:nth-child(1){left:7%;top:21%;animation-delay:-1s}.hero__ambient span:nth-child(1)::after{transform:rotate(18deg)}
.hero__ambient span:nth-child(2){left:24%;top:72%;animation-delay:-4s}.hero__ambient span:nth-child(2)::after{transform:rotate(-22deg)}
.hero__ambient span:nth-child(3){left:46%;top:14%;animation-delay:-2.5s}.hero__ambient span:nth-child(3)::after{transform:rotate(32deg)}
.hero__ambient span:nth-child(4){left:67%;top:68%;animation-delay:-5s}.hero__ambient span:nth-child(4)::after{transform:rotate(-34deg)}
.hero__ambient span:nth-child(5){left:83%;top:30%;animation-delay:-3s}.hero__ambient span:nth-child(5)::after{transform:rotate(145deg)}
.hero__ambient span:nth-child(6){left:92%;top:78%;animation-delay:-.5s}.hero__ambient span:nth-child(6)::after{transform:rotate(202deg)}
.hero__ambient i{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--gold);box-shadow:18px 32px var(--gold),54px 9px var(--gold),91px 48px var(--gold),126px 22px var(--gold);opacity:.32;animation:ambientDrift 18s linear infinite}
.hero__ambient i:nth-of-type(1){left:11%;top:33%}.hero__ambient i:nth-of-type(2){left:53%;top:55%;animation-delay:-7s}.hero__ambient i:nth-of-type(3){left:76%;top:12%;animation-delay:-13s}
@keyframes ambientSweep{0%,100%{transform:translateX(-48%)}50%{transform:translateX(48%)}}
@keyframes ambientOrbit{to{transform:rotate(360deg)}}
@keyframes ambientNode{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-13px);opacity:1}}
@keyframes ambientDrift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(35px,-24px,0)}100%{transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){.hero__ambient::before,.hero__ambient::after,.hero__ambient span,.hero__ambient i{animation:none}}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gold-bright);
  margin-bottom: 20px;
}

.eyebrow::before {
  content: "$";
  color: var(--gold);
  font-weight: 700;
}

.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 700;
  margin-bottom: 22px;
  color: var(--beige);
}

.cursor {
  display: inline-block;
  width: 0.5em;
  height: 0.9em;
  margin-left: 3px;
  background: var(--gold-bright);
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.hero__lead {
  font-size: 1.1rem;
  color: var(--text-dim);
  max-width: 620px;
}

.hero__lead strong {
  color: var(--text);
  font-weight: 750;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 30px 0 20px;
}

.hero__note {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  color: var(--text-faint);
  letter-spacing: 0.03em;
  margin-bottom: 44px;
}

.hero__note span {
  color: var(--gold);
  margin: 0 8px;
}

.hero__stats {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border-soft);
  max-width: 620px;
}

.hero__stats li {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px 0 0;
  border-right: 1px solid var(--border-soft);
}

.hero__stats li:last-child {
  border-right: none;
  padding-right: 0;
}

.hero__stats strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold-bright);
}

.hero__stats span {
  color: var(--text-faint);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hero rotator — the medium-sized box beside the hero copy that cycles
   through "why you need this" reasons every few seconds. Same terminal
   "chrome" language as .terminal-window (gold-gradient border, dot bar)
   so it reads as part of the same design system, not a bolted-on widget. */
.hero__rotator {
  position: relative;
  background: linear-gradient(155deg, #1c170f, #0e0c09 75%);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero__rotator::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1px;
  background: var(--gold-gradient);
  opacity: 0.35;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hero__rotator-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.hero__rotator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.hero__rotator-dot:nth-child(1) {
  opacity: 0.9;
}

.hero__rotator-dot:nth-child(2) {
  opacity: 0.6;
}

.hero__rotator-dot:nth-child(3) {
  opacity: 0.35;
}

.hero__rotator-label {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--text-faint);
  letter-spacing: 0.05em;
}

.hero__rotator-body {
  position: relative;
  padding: 26px 24px 24px;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__rotator-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 12px;
}

.hero__rotator-headline {
  font-family: "Sora", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold-bright);
  margin: 0 0 10px;
  line-height: 1.35;
}

.hero__rotator-text {
  font-size: 0.92rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
}

.hero__rotator-eyebrow,
.hero__rotator-headline,
.hero__rotator-text {
  transition: opacity 0.25s ease;
}

.hero__rotator-body.is-fading .hero__rotator-eyebrow,
.hero__rotator-body.is-fading .hero__rotator-headline,
.hero__rotator-body.is-fading .hero__rotator-text {
  opacity: 0;
}

.hero__rotator-progress {
  position: relative;
  height: 2px;
  background: var(--border-soft);
  overflow: hidden;
}

.hero__rotator-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--gold-gradient);
}

.hero__rotator-progress span.is-animating {
  animation: hero-rotator-progress 5s linear;
}

@keyframes hero-rotator-progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* Sections */
section {
  padding: 84px 0;
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.section__tag {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--gold);
  font-weight: 600;
}

.section__title {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.section__lead {
  color: var(--text-dim);
  max-width: 620px;
  margin-bottom: 0;
}

.section__lead a {
  color: var(--gold-bright);
  text-decoration: underline;
}

/* Services grid */
.grid {
  display: grid;
  gap: 20px;
}

.grid--services {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  counter-reset: svc;
}

.service-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 28px;
  counter-increment: svc;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card::before {
  content: counter(svc, decimal-leading-zero);
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  color: var(--text-faint);
  opacity: 0.7;
}

.service-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold);
}

.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  margin-bottom: 18px;
}

.icon-chip svg {
  width: 24px;
  height: 24px;
  stroke: var(--gold-bright);
}

.service-card:hover .icon-chip {
  border-color: var(--gold);
}

.service-card h3 {
  font-size: 1.04rem;
}

.service-card p {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin: 0;
}

/* How it works */
.how {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.step {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 26px 24px;
}

.step__num {
  position: absolute;
  top: -18px;
  right: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 4.4rem;
  font-weight: 600;
  color: rgba(var(--gold-rgb), 0.1);
  line-height: 1;
  pointer-events: none;
}

.step__tag {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 10px;
}

.step h3 {
  font-size: 1.05rem;
  position: relative;
}

.step p {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin: 0;
  position: relative;
}

.access-explainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 56px;
}

.access-explainer__text h3 {
  font-size: 1.3rem;
}

.access-explainer__text p {
  color: var(--text-dim);
  margin-bottom: 0;
}

.access-explainer__card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Terminal / code-block component — used for the illustrative account
   record on the homepage and for the live lookup result on activate.html */
.terminal-window {
  position: relative;
  background: linear-gradient(155deg, #1c170f, #0e0c09 75%);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  max-width: 400px;
  justify-self: center;
}

.terminal-window::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1px;
  background: var(--gold-gradient);
  opacity: 0.35;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.terminal-window__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.terminal-window__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.terminal-window__dot:nth-child(1) {
  opacity: 0.9;
}

.terminal-window__dot:nth-child(2) {
  opacity: 0.6;
}

.terminal-window__dot:nth-child(3) {
  opacity: 0.35;
}

.terminal-window__filename {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--text-faint);
  letter-spacing: 0.05em;
}

.terminal-body {
  padding: 20px 22px 24px;
  font-size: 0.86rem;
  line-height: 1.8;
}

/* Preview frame — an actual visual preview (e.g. a website screenshot),
   shown instead of the terminal-window JSON block when a client account
   has a previewImageUrl set. Same "chrome" language as .terminal-window,
   styled as a browser instead of a code editor. The whole thing is a
   link (.preview-frame-link) to the same image, so clicking it opens
   the full preview. */
.preview-frame-link {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-bottom: 20px;
}

.preview-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.preview-frame-link:hover .preview-frame {
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.preview-frame__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(155deg, #1c170f, #0e0c09 75%);
}

.preview-frame__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.preview-frame__dot:nth-child(1) {
  opacity: 0.9;
}

.preview-frame__dot:nth-child(2) {
  opacity: 0.6;
}

.preview-frame__dot:nth-child(3) {
  opacity: 0.35;
}

.preview-frame__url {
  margin-left: 10px;
  font-size: 0.74rem;
  color: var(--text-faint);
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-frame__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  background: var(--bg);
}

.preview-frame__cta {
  padding: 10px 16px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  background: var(--surface-alt);
  border-top: 1px solid var(--border-soft);
}

.code-line {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.code-line--indent {
  padding-left: 1.4em;
}

.code-key {
  color: var(--text-dim);
}

.code-string {
  color: var(--gold-bright);
}

.code-punct {
  color: var(--text-faint);
}

/* Account card — a plain, human-readable stand-in for the terminal-window
   component used on this section only: this is marketing copy shown to
   any visitor, not a real system response, so it deliberately doesn't
   look like code (no braces/quotes) even though it shares the same
   browser-chrome visual language. */
.account-card {
  position: relative;
  background: linear-gradient(155deg, #1c170f, #0e0c09 75%);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  max-width: 400px;
  justify-self: center;
}

.account-card__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.account-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.account-card__dot:nth-child(1) {
  opacity: 0.9;
}

.account-card__dot:nth-child(2) {
  opacity: 0.6;
}

.account-card__dot:nth-child(3) {
  opacity: 0.35;
}

.account-card__label {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--text-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.account-card__body {
  padding: 20px 22px 22px;
}

.account-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}

.account-card__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.account-card__key {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.account-card__value {
  font-size: 0.92rem;
  color: var(--gold-bright);
  text-align: right;
}

.access-card__caption {
  width: 100%;
  margin-top: 14px;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  text-align: center;
}

@media (max-width: 780px) {
  .access-explainer {
    grid-template-columns: 1fr;
  }
}

/* Showcase — invented example businesses (see examples.html) */
.showcase-intro {
  max-width: 720px;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 18px 0 8px;
}

.showcase-section {
  padding: 56px 0;
  border-top: 1px solid var(--border-soft);
}

.showcase-section:first-of-type {
  border-top: none;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 8px;
}

.showcase-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.showcase-card h3 {
  margin: 22px 0 6px;
  font-size: 1.04rem;
}

.showcase-card p:not(.access-card__caption) {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0;
}

.showcase-card__frame {
  width: 100%;
  background: linear-gradient(155deg, #1c170f, #0e0c09 75%);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.showcase-card:hover .showcase-card__frame {
  border-color: var(--gold);
  transform: translateY(-4px);
}

.showcase-card__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.showcase-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.showcase-card__dot:nth-child(1) { opacity: 0.9; }
.showcase-card__dot:nth-child(2) { opacity: 0.6; }
.showcase-card__dot:nth-child(3) { opacity: 0.35; }

.showcase-card__url {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

.showcase-card__body {
  line-height: 0;
}

.showcase-card__body img {
  display: block;
  width: 100%;
  height: auto;
}

.how__note {
  margin-top: 36px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 22px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  color: var(--text-dim);
  max-width: 680px;
}

.how__note strong {
  color: var(--gold-bright);
}

/* Enquiry form */
.enquire {
  position: relative;
}

.enquiry-form {
  max-width: 660px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow);
}

.form-row {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-row--split {
  flex-direction: row;
  gap: 18px;
}

.form-row--split > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-row--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.form-row--checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

.form-row--checkbox label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  color: var(--text-dim);
}

label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

input, select, textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
  color: var(--text);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.95rem;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.15);
}

input[type="file"] {
  padding: 8px 10px;
  color: var(--text-faint);
  font-size: 0.85rem;
}

input[type="file"]::file-selector-button {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 14px;
  margin-right: 12px;
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

input[type="file"]::file-selector-button:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

textarea {
  resize: vertical;
}

.form-note {
  margin: 16px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  color: var(--gold-bright);
  min-height: 1.2em;
}

.activate-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.activate-cta p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.92rem;
}

/* Activate page */
.activate-hero__inner {
  position: relative;
  max-width: 560px;
}

.activate-form {
  margin: 32px 0 0;
  max-width: none;
  padding: 28px;
}

.activate-result {
  margin-top: 24px;
}

.embedded-checkout {
  margin-top: 24px;
  min-height: 420px;
  border: 1px solid var(--line, var(--border));
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.activate-result .terminal-window {
  max-width: none;
  margin-bottom: 18px;
}

.activate-result__message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}

.activate-result--error .activate-result__message {
  border-left: 2px solid #a85d3f;
}

.activate-result__message p {
  margin: 0;
  color: var(--text-dim);
}

.activate-result__message a {
  color: var(--gold-bright);
}

/* Order summary — service preview + price shown after a matched code */
.order-summary {
  padding: 26px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  background: var(--surface);
}

.order-summary__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin: 0 0 10px;
}

.order-summary__service {
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.order-summary__preview {
  color: var(--text-dim);
  margin-bottom: 22px;
}

.order-summary__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 22px;
}

.order-summary__price-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.order-summary__price {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.order-summary__note {
  margin: 16px 0 0;
  font-size: 0.86rem;
  color: var(--text-faint);
}

.activate-footnote {
  margin-top: 28px;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.activate-footnote a {
  color: var(--gold-bright);
  text-decoration: none;
}

.activate-footnote code {
  background: var(--surface-alt);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85em;
}

/* Admin (New Client Setup) page */
.admin-hint {
  margin: 6px 0 0;
  font-size: 0.8rem;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
}

.admin-service-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 10px;
}

.admin-service-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  cursor: pointer;
}

.admin-service-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
}

#adminServiceOther {
  margin-top: 12px;
}

.form-consent {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--text-faint);
}

.form-consent a {
  color: var(--text-dim);
  text-decoration: underline;
}

.form-consent a:hover {
  color: var(--gold-bright);
}

.admin-hint code {
  background: var(--surface-alt);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9em;
  color: var(--text-dim);
}

.admin-image-thumb {
  display: block;
  margin-top: 12px;
  max-width: 220px;
  max-height: 140px;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  object-fit: cover;
}

.admin-actions {
  margin-top: 4px;
}

.admin-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 2.2rem; }
.admin-hub-card { display: block; padding: 2rem 1.8rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface, #12100b); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.admin-hub-card:hover, .admin-hub-card:focus-visible { border-color: var(--gold); transform: translateY(-3px); }
.admin-hub-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); font-size: 1.25rem; color: var(--gold); margin-bottom: 1rem; }
.admin-hub-card h3 { margin: 0 0 .6rem; font-family: "Sora", sans-serif; color: var(--text); font-size: 1.3rem; }
.admin-hub-card p { margin: 0; color: var(--text-faint); font-size: .92rem; line-height: 1.55; }
.admin-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.admin-back-link { display: inline-block; margin-bottom: 1.2rem; color: var(--gold); font: 600 .78rem/1 "IBM Plex Mono", monospace; text-decoration: none; letter-spacing: .04em; }
.admin-back-link:hover { text-decoration: underline; }

.admin-output {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.admin-output__block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-output__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-output__message {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px 16px;
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  resize: vertical;
}

#saveBlock {
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  background: var(--surface);
  align-items: flex-start;
}

#saveBlock .btn {
  width: 100%;
}

#saveNote {
  margin: 12px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  color: var(--gold-bright);
}

/* Pipeline Tester page — mirrors admin.html + activate.html entirely in
   localStorage, so it needs its own tab switcher and test-client list on
   top of the components those pages already define above. */
.tabs {
  display: flex;
  gap: 10px;
  margin: 28px 0 32px;
}

.tab {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.tab:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.tab.is-active {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: var(--surface);
}

.client-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.clients-search {
  width: 100%;
  margin-top: 16px;
}

.client-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-alt);
  flex-wrap: wrap;
}

.client-row__info {
  flex: 1;
  min-width: 200px;
}

.client-row__account {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  color: var(--gold-bright);
}

.client-row__service {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.client-row__code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.client-row__email {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  color: var(--gold-bright);
}

.client-row__actions {
  display: flex;
  gap: 8px;
}

.status-pill {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.status-pill--pending {
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold-bright);
  border: 1px solid rgba(var(--gold-rgb), 0.35);
}

.status-pill--active {
  background: rgba(100, 180, 130, 0.12);
  color: #7dd6a0;
  border: 1px solid rgba(100, 180, 130, 0.35);
}

.status-pill--refunded {
  background: rgba(224, 122, 107, 0.12);
  color: #e07a6b;
  border: 1px solid rgba(224, 122, 107, 0.35);
}

.empty-note {
  color: var(--text-faint);
  font-size: 0.88rem;
}

.btn--sm {
  padding: 7px 14px;
  font-size: 0.72rem;
}

.btn--danger {
  border-color: #6b3324;
  color: #d08a6f;
}

.btn--danger:hover {
  border-color: #a85d3f;
  color: #e8ab8f;
}

/* Reveal-on-scroll (progressive enhancement, see script.js) */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Footer */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-soft);
  padding-top: 60px;
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 36px;
}

.brand--footer {
  margin-bottom: 14px;
}

.footer__tagline {
  color: var(--text-dim);
  font-size: 0.92rem;
  max-width: 320px;
}

.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--gold-bright);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.footer__social a:hover {
  background: var(--gold-gradient);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
}

.footer__social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer__contact h4,
.footer__links h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 16px;
}

.footer__contact p {
  font-size: 0.9rem;
  color: var(--text-dim);
}

.footer__contact a {
  color: var(--gold-bright);
  text-decoration: none;
}

.footer__contact code {
  background: var(--surface-alt);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85em;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer__links a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer__links a:hover {
  color: var(--gold-bright);
}

.footer__bottom {
  border-top: 1px solid var(--border-soft);
  padding: 20px 24px;
  color: var(--text-faint);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.footer__bottom p {
  margin: 0;
}

.footer__legal-links a {
  color: var(--text-faint);
}

.footer__legal-links a:hover {
  color: var(--gold-bright);
}

.footer__legal-links span {
  margin: 0 8px;
}

/* A shorter footer for standalone pages (e.g. card.html) that skip the
   3-column .footer__inner grid — without this, .site-footer's 60px
   top padding leaves a bare gap above the bottom bar. */
.site-footer--minimal {
  padding-top: 24px;
}

/* Digital business card (card.html) — a shareable contact page, styled
   as an actual card rather than another marketing section. Reuses the
   site's foil-edge "chrome" language (see .terminal-window) at business
   card proportions. */
.card-page {
  padding: 72px 0 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.biz-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: linear-gradient(155deg, #1c170f, #0e0c09 75%);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 34px 32px;
}

html[data-theme="light"] .biz-card {
  background: linear-gradient(155deg, #fcfaf5, #eee5d3 75%);
}

.biz-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: var(--gold-gradient);
  opacity: 0.5;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.biz-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.biz-card__brand {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--gold-bright);
  margin: 0 0 4px;
}

.biz-card__tagline {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}

.biz-card__qr {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  background: #fdfbf6;
  border-radius: 8px;
  padding: 6px;
  box-shadow: var(--shadow-gold);
}

.biz-card__qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.biz-card__name {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--text);
  margin: 0 0 4px;
}

.biz-card__role {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  color: var(--gold-bright);
  margin: 0 0 22px;
}

.biz-card__divider {
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent 85%);
  margin-bottom: 20px;
}

.biz-card__contacts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.biz-card__contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.15s ease;
}

.biz-card__contact-row:hover {
  color: var(--gold-bright);
}

.biz-card__contact-row svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  stroke: var(--gold-bright);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.card-note {
  color: var(--text-faint);
  font-size: 0.82rem;
  text-align: center;
  max-width: 40ch;
}

/* Legal pages (terms.html, privacy.html) — plain prose, not the
   terminal/card language the rest of the site uses; legal text reads
   better as a simple column. */
.legal-page {
  padding: 64px 0 80px;
  max-width: 760px;
}

.legal-page h1 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin-bottom: 8px;
}

.legal-page__updated {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-bottom: 32px;
}

.legal-page__notice {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 0.88rem;
  color: var(--text-dim);
  margin-bottom: 40px;
}

.legal-page h2 {
  font-size: 1.25rem;
  margin-top: 40px;
  margin-bottom: 12px;
}

.legal-page p,
.legal-page li {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.75;
}

.legal-page ul,
.legal-page ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

.legal-page a {
  color: var(--gold-bright);
}

.legal-page strong {
  color: var(--text);
}

/* Responsive */
@media (max-width: 860px) {
  .footer__inner {
    grid-template-columns: 1fr;
  }

  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__rotator {
    max-width: 480px;
  }

  .hero__stats {
    flex-wrap: wrap;
  }

  .hero__stats li {
    flex: 1 1 45%;
    border-right: none;
    padding-right: 0;
  }
}

@media (max-width: 720px) {
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border-soft);
    flex-direction: column;
    padding: 18px 24px;
    display: none;
    gap: 16px;
  }

  .nav.is-open {
    display: flex;
  }

  .nav-toggle {
    display: flex;
  }

  .btn--nav {
    display: none;
  }

  .form-row--split {
    flex-direction: column;
  }

  .section__head {
    flex-direction: column;
  }
}


/* AI help centre */
.ai-help-launcher{position:fixed;right:24px;bottom:24px;z-index:100;width:62px;height:62px;border-radius:50%;border:1px solid rgba(var(--gold-rgb),.42);background:linear-gradient(145deg,var(--gold-bright),var(--gold-deep));color:var(--bg);display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 45px rgba(0,0,0,.5),0 0 28px rgba(var(--gold-rgb),.18);transition:transform .25s ease}.ai-help-launcher:hover{transform:translateY(-3px) scale(1.03)}.ai-help-launcher svg{width:28px;height:28px}.ai-help-panel{position:fixed;right:24px;bottom:98px;z-index:99;width:min(390px,calc(100vw - 30px));height:min(610px,calc(100vh - 125px));display:flex;flex-direction:column;background:rgba(12,11,9,.98);border:1px solid var(--border);border-radius:10px;box-shadow:0 26px 90px rgba(0,0,0,.68);backdrop-filter:blur(18px);overflow:hidden;opacity:0;transform:translateY(18px) scale(.97);pointer-events:none;transition:opacity .25s ease,transform .25s ease}.ai-help-panel.is-open{opacity:1;transform:none;pointer-events:auto}.ai-help-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border);background:linear-gradient(110deg,rgba(var(--gold-rgb),.14),transparent)}.ai-help-mark{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:var(--gold);color:var(--bg);font:700 13px "IBM Plex Mono",monospace}.ai-help-title{flex:1}.ai-help-title strong{display:block;font-family:"Sora",sans-serif;font-size:14px}.ai-help-title span{display:block;color:var(--text-faint);font:10px "IBM Plex Mono",monospace}.ai-help-close{border:0;background:none;color:var(--text-dim);font-size:24px;cursor:pointer}.ai-help-messages{flex:1;padding:18px;overflow:auto;display:flex;flex-direction:column;gap:13px}.ai-help-message{max-width:86%;padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.5;white-space:pre-wrap}.ai-help-message.ai,.ai-help-message--assistant{align-self:flex-start;background:var(--surface);border:1px solid var(--border-soft);color:var(--text-dim);border-bottom-left-radius:3px}.ai-help-message.user,.ai-help-message--user{align-self:flex-end;background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));color:var(--bg);font-weight:600;border-bottom-right-radius:3px}.ai-help-typing{display:flex;gap:4px;align-items:center}.ai-help-typing span{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:aiTyping 1s infinite alternate}.ai-help-typing span:nth-child(2){animation-delay:.2s}.ai-help-typing span:nth-child(3){animation-delay:.4s}@keyframes aiTyping{to{opacity:.25;transform:translateY(-3px)}}.ai-help-quick{display:flex;gap:7px;overflow-x:auto;padding:0 15px 12px}.ai-help-quick button{flex:none;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-dim);padding:8px 10px;font-size:11px;cursor:pointer}.ai-help-quick button:hover{border-color:var(--gold);color:var(--gold-bright)}.ai-help-composer{display:flex;gap:8px;padding:13px;border-top:1px solid var(--border);background:var(--bg)}.ai-help-composer input{min-width:0;flex:1;border-radius:7px;padding:12px}.ai-help-composer button{width:43px;border:0;border-radius:7px;background:var(--gold);color:var(--bg);font-size:18px;cursor:pointer}.ai-help-composer button:disabled{opacity:.45;cursor:wait}.ai-help-disclaimer{text-align:center;color:var(--text-faint);font:9px "IBM Plex Mono",monospace;padding:0 12px 10px}@media(max-width:560px){.ai-help-launcher{right:16px;bottom:16px}.ai-help-panel{right:15px;bottom:88px;height:calc(100vh - 110px)}}@media(prefers-reduced-motion:reduce){.ai-help-typing span{animation:none}}

.ai-help-launcher{background:var(--gold-gradient)!important;color:#fff!important;border:2px solid rgba(255,255,255,.9)!important;box-shadow:0 12px 34px rgba(104,70,12,.28),0 0 0 5px rgba(var(--gold-rgb),.12)!important}
.ai-help-launcher svg{width:31px!important;height:31px!important}
.theme-toggle{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-dim);padding:8px 11px;cursor:pointer;font:600 10px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.05em}
.theme-toggle svg{width:15px;height:15px}.theme-toggle__moon{display:none}.theme-toggle:hover{border-color:var(--gold);color:var(--gold-bright)}
html[data-theme="light"]{--bg:#f7f3ea;--bg-alt:#eee8dc;--surface:#fcfaf5;--surface-alt:#f1eadc;--border:#dfcfaa;--border-soft:#eee3ca;--text:#30291f;--text-dim:#6b6255;--text-faint:#8e8373;--beige:#3a3023;--gold:#b88732;--gold-rgb:184,135,50;--gold-bright:#d7ad58;--gold-deep:#8d5e16;--bronze:#8d5e16;--accent-text:#fff;--shadow:0 24px 60px -24px rgba(70,52,24,.2);--shadow-gold:0 12px 32px -14px rgba(var(--gold-rgb),.28)}
html[data-theme="light"] .site-header{background:rgba(247,243,234,.95)}
html[data-theme="light"] .hero{background:radial-gradient(circle at 78% 42%,rgba(184,135,50,.14),transparent 34%),#f7f3ea}
html[data-theme="light"] .hero::before,html[data-theme="light"] .hero::after{opacity:.38}
html[data-theme="light"] .hero__rotator,html[data-theme="light"] .terminal-window,html[data-theme="light"] .account-card,html[data-theme="light"] .showcase-card__frame{background:linear-gradient(155deg,#fcfaf5,#eee5d3 75%)}
html[data-theme="light"] .preview-frame__bar{background:linear-gradient(155deg,#fcfaf5,#eee5d3 75%)}
html[data-theme="light"] .hero__rotator-bar,html[data-theme="light"] .terminal-window__bar,html[data-theme="light"] .account-card__bar,html[data-theme="light"] .showcase-card__bar{background:rgba(218,190,133,.14)}
html[data-theme="light"] .hero__rotator::before,html[data-theme="light"] .terminal-window::before,html[data-theme="light"] .account-card::before{-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)}
html[data-theme="light"] .service-card,html[data-theme="light"] .process-card,html[data-theme="light"] .why-card,html[data-theme="light"] .admin-output__block{box-shadow:0 10px 32px rgba(30,25,15,.06)}
html[data-theme="light"] .ai-help-panel{background:rgba(252,250,245,.985)}
html[data-theme="light"] .ai-help-composer{background:#fcfaf5}
html[data-theme="light"] .ai-help-message.ai,html[data-theme="light"] .ai-help-message--assistant{background:#f8f2e6}
html[data-theme="light"] .theme-toggle__sun{display:none}html[data-theme="light"] .theme-toggle__moon{display:block}
@media(max-width:900px){.theme-toggle__label{display:none}.theme-toggle{padding:8px}}
.ai-help-handoff{padding:14px;border-top:1px solid var(--border);display:grid;gap:9px;background:var(--surface)}
.ai-help-handoff[hidden]{display:none}.ai-help-handoff strong{font:600 13px "Sora",sans-serif;color:var(--text)}
.ai-help-handoff input,.ai-help-handoff textarea{width:100%;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);padding:10px;font:12px "Sora",sans-serif;resize:none}
.ai-help-handoff__actions{display:flex;justify-content:flex-end;gap:8px}.ai-help-handoff__actions button{border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--text-dim);padding:8px 10px;cursor:pointer}
.ai-help-handoff__actions button[type="submit"]{background:var(--gold);border-color:var(--gold);color:var(--bg);font-weight:700}
.ai-help-handoff p{min-height:16px;margin:0;color:var(--text-dim);font-size:11px}
.agent-request-list{display:grid;gap:12px}.agent-request{padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.agent-request__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.agent-request__contact{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}.agent-request__message{margin:12px 0;color:var(--text-dim);white-space:pre-wrap}
.agent-transcript__message--agent{justify-self:start;border-left:3px solid var(--gold);color:var(--text)}
.ai-help-message--agent{align-self:flex-start;background:var(--surface);border:1px solid var(--gold);border-left-width:3px;color:var(--text);border-bottom-left-radius:3px}
.agent-reply-form{display:flex;gap:8px;margin:12px 0}.agent-reply-form input{min-width:0;flex:1;border:1px solid var(--border);border-radius:5px;background:var(--bg);color:var(--text);padding:10px 12px}.agent-reply-form button{flex:none}.agent-chat-status{min-height:18px;margin:5px 0;color:var(--text-dim);font-size:11px}
.agent-transcript{margin:14px 0;border-top:1px solid var(--border-soft);padding-top:12px}.agent-transcript summary{cursor:pointer;color:var(--gold-bright);font:600 11px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.05em}.agent-transcript__messages{display:grid;gap:8px;margin-top:12px}.agent-transcript__message{max-width:88%;padding:9px 11px;border-radius:7px;background:var(--surface-alt);color:var(--text-dim);font-size:12px;white-space:pre-wrap}.agent-transcript__message--user{justify-self:end;background:rgba(var(--gold-rgb),.16);color:var(--text)}
/* Members portal — deliberately uses the main site's existing colour,
   type, button and surface tokens so both themes remain visually identical. */
.members-page { min-height: calc(100vh - 88px); }
.members-hero { position: relative; overflow: hidden; padding: clamp(5rem, 10vw, 9rem) 0; border-bottom: 1px solid var(--border); }
.members-hero .hero__ambient { opacity: .55; }
.members-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.members-intro h1 { margin: 1rem 0 1.5rem; max-width: 760px; font-family: "Sora", sans-serif; font-size: clamp(3.2rem, 6.5vw, 6.8rem); line-height: .96; letter-spacing: -.06em; color: var(--text); }
.members-intro > p:not(.eyebrow) { max-width: 650px; margin-bottom: 2.2rem; font-size: 1.08rem; line-height: 1.75; color: var(--text-dim); }
.members-trust { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--border); }
.members-trust > span { font-family: "IBM Plex Mono", monospace; font-weight: 700; color: var(--gold); }
.members-trust p { margin: 0; color: var(--text-dim); line-height: 1.55; }
.members-trust strong { color: var(--text); }
.members-panel { position: relative; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.members-panel::after { content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1; border: 1px solid var(--border); }
.members-panel__bar { min-height: 58px; display: flex; align-items: center; gap: 9px; padding: 0 1.6rem; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.members-panel__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.members-panel__bar span:nth-child(2) { opacity: .65; }.members-panel__bar span:nth-child(3) { opacity: .35; }
.members-panel__bar p { margin: 0 0 0 auto; font: 600 .72rem/1 "IBM Plex Mono", monospace; letter-spacing: .08em; color: var(--text-faint); }
.members-panel__body { padding: clamp(1.7rem, 4vw, 3.5rem); }
.members-page.is-dashboard .members-hero { padding: 3rem 0 5rem; }
.members-page.is-dashboard .members-shell { display: block; }
.members-page.is-dashboard .members-intro { display: none; }
.members-page.is-dashboard .members-panel { width: 100%; }
.members-page.is-dashboard .members-panel::after { display: none; }
.members-page.is-dashboard .members-panel__body { padding: clamp(2rem, 5vw, 4.5rem); }
.members-page.is-dashboard .member-results__head h1 { margin: .6rem 0 .8rem; max-width: 850px; font-family: "Sora", sans-serif; font-size: clamp(2.7rem, 6vw, 5.5rem); line-height: .98; letter-spacing: -.055em; color: var(--text); }
.portal-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 2.2rem; padding: 4px; border: 1px solid var(--border); background: var(--bg); }
.portal-mode__button { min-height: 44px; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; font: 700 .72rem/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; transition: background .2s ease, color .2s ease; }
.portal-mode__button:hover { color: var(--gold-bright); }
.portal-mode__button.is-active { background: var(--gold-gradient); color: #fff; box-shadow: var(--shadow-gold); }
.members-panel__body h2 { margin: .55rem 0 .8rem; font-family: "Sora", sans-serif; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.04em; color: var(--text); }
.members-panel__lead { margin: 0 0 2rem; color: var(--text-dim); line-height: 1.65; }
.member-login { display: grid; gap: .75rem; }
.member-login label { margin-top: .55rem; font: 600 .78rem/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.member-login input { width: 100%; min-height: 58px; padding: 0 1rem; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: 500 1rem/1 "IBM Plex Sans", sans-serif; outline: none; }
.member-login input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .16); }
.member-login textarea { width: 100%; min-height: 110px; padding: 1rem; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: 500 1rem/1.5 "IBM Plex Sans", sans-serif; resize: vertical; }
.member-login textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .16); }
.member-onboarding { max-width: 760px; margin: 0 auto; }
.onboarding-progress { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.6rem; }
.onboarding-progress__bar { flex: 1; height: 4px; background: var(--border); overflow: hidden; }
.onboarding-progress__fill { height: 100%; background: var(--gold-gradient); transition: width .25s ease; }
#onboardingStepLabel { flex-shrink: 0; font: 700 .72rem/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.onboarding-step label { display: block; margin-bottom: .55rem; font: 700 1.05rem/1.4 "Sora", sans-serif; letter-spacing: -.01em; text-transform: none; color: var(--text); }
.onboarding-step input,
.onboarding-step textarea { font-size: 1.05rem; }
.onboarding-actions { display: flex; gap: .75rem; margin-top: 1.1rem; }
.onboarding-actions .btn { margin-top: 0; width: auto; flex: 1; }
.onboarding-actions #onboardingBackBtn { flex: 0 0 auto; }
.member-login #memberCode { font-family: "IBM Plex Mono", monospace; font-size: 1.2rem; letter-spacing: .14em; }
.member-login .btn { margin-top: .9rem; width: 100%; }
.portal-remember { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; margin-top: .7rem; }
.portal-remember input { width: 18px; min-height: 18px; accent-color: var(--gold); }
.portal-remember label { margin: 0; text-transform: none; letter-spacing: 0; line-height: 1.45; }
.portal-security { margin: 1.2rem 0 0; color: var(--text-faint); font: 500 .68rem/1.55 "IBM Plex Mono", monospace; }
.member-results__head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.5rem; }
.member-results__head h2 { margin-bottom: 0; }
.member-purchase { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 1.2rem; padding: 1.5rem 0; border-top: 1px solid var(--border); }
.member-purchase__number { font: 700 1.3rem/1 "IBM Plex Mono", monospace; color: var(--gold); opacity: .75; }
.member-purchase h3 { margin: .65rem 0 .35rem; font-family: "Sora", sans-serif; font-size: 1.5rem; color: var(--text); }
.member-purchase p { margin: 0; color: var(--text-dim); }
.member-purchase dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1.35rem 0; }
.member-purchase dl div { padding: .85rem; border: 1px solid var(--border); background: var(--surface-alt); }
.member-purchase dt { margin-bottom: .35rem; font: 600 .65rem/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.member-purchase dd { margin: 0; overflow-wrap: anywhere; font-size: .88rem; color: var(--text); }
.member-purchase__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.portal-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.portal-service { position: relative; min-height: 310px; overflow: hidden; padding: 1.4rem; border: 1px solid var(--border); background: var(--surface-alt); }
.portal-service h3 { margin: 1rem 0 .55rem; font-family: "Sora", sans-serif; font-size: 1.4rem; color: var(--text); }
.portal-service p { margin: 0; min-height: 3.2em; color: var(--text-dim); line-height: 1.55; }
.portal-service__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.portal-service__key { font-size: 1.4rem; }
.portal-service dl { display: grid; gap: .45rem; margin: 1.2rem 0; }
.portal-service dl div { display: grid; grid-template-columns: 88px 1fr; gap: .65rem; padding-top: .45rem; border-top: 1px solid var(--border-soft); }
.portal-service dt { font: 600 .64rem/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); }
.portal-service dd { margin: 0; overflow-wrap: anywhere; font-size: .82rem; color: var(--text); }
.portal-service--unlocked { border-color: var(--gold); box-shadow: inset 0 3px 0 var(--gold); }
.portal-service__active-note { align-self: center; color: var(--gold-bright); font: 700 .7rem/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.portal-service--locked { display: grid; place-items: center; width: 100%; text-align: inherit; color: inherit; cursor: pointer; font: inherit; }
.portal-service--locked:hover { border-color: var(--gold); }
.portal-service__blur { position: absolute; inset: 0; padding: 1.4rem; filter: blur(6px); opacity: .34; user-select: none; pointer-events: none; transform: scale(1.025); }
.portal-service__placeholder { width: 72%; height: 48px; margin-top: 1.4rem; border: 1px solid var(--border); background: var(--surface); }
.portal-service__lock { position: relative; z-index: 1; display: grid; justify-items: center; gap: .35rem; max-width: 210px; text-align: center; color: var(--text); }
.portal-service__lock > span { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--gold); border-radius: 50%; background: var(--surface); font-size: 1.5rem; box-shadow: var(--shadow-gold); }
.portal-service__lock strong { margin-top: .35rem; font: 700 .8rem/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-bright); }
.portal-service__lock small { color: var(--text-dim); line-height: 1.45; }
.portal-service__lock h3 { margin: .45rem 0 .15rem; text-align: center; }
.portal-quote-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1.5rem; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); }
.portal-quote-modal[hidden] { display: none; }
.portal-quote-modal__dialog { width: min(480px, 100%); padding: 2rem; border: 1px solid var(--gold); background: var(--surface); box-shadow: var(--shadow-gold); text-align: center; }
.portal-quote-modal__icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 1rem; border: 1px solid var(--gold); border-radius: 50%; font-size: 1.45rem; }
.portal-quote-modal__dialog h2 { margin: .65rem 0; }
.portal-quote-modal__dialog > p:not(.section__tag) { color: var(--text-dim); }
.portal-quote-modal__actions { display: flex; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.portal-more-service { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1.25rem 1.4rem; border: 1px solid var(--gold); background: var(--surface-alt); }
.portal-more-service p { margin: 0; font-family: "Sora", sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--text); }
.service-dashboard-page { min-height: calc(100vh - 88px); padding: clamp(3rem, 7vw, 6rem) 0; background: var(--bg); }
.service-dashboard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.service-dashboard__head h1,.service-dashboard-error h1 { margin: .65rem 0 1rem; font-family: "Sora", sans-serif; font-size: clamp(3rem, 7vw, 6rem); line-height: .95; letter-spacing: -.06em; color: var(--text); }
.service-dashboard__head > div > p:last-child,.service-dashboard-error p { max-width: 720px; color: var(--text-dim); font-size: 1.05rem; line-height: 1.7; }
.service-dashboard__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-top: 2rem; }
.service-dashboard__card { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--border); background: var(--surface); }
.service-dashboard__card--wide { grid-column: 1 / -1; }
.service-dashboard__card h2 { margin: .65rem 0 1rem; font-family: "Sora", sans-serif; font-size: clamp(1.7rem, 3vw, 2.5rem); color: var(--text); }
.service-dashboard__card > p:not(.section__tag) { color: var(--text-dim); line-height: 1.65; }
.service-dashboard__card dl { display: grid; gap: .8rem; margin: 1.5rem 0 0; }
.service-dashboard__card dl div { display: flex; justify-content: space-between; gap: 1rem; padding-top: .8rem; border-top: 1px solid var(--border-soft); }
.service-dashboard__card dt { font: 600 .7rem/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; color: var(--text-faint); }
.service-dashboard__card dd { margin: 0; color: var(--text); }
@media (max-width: 700px) { .service-dashboard__grid { grid-template-columns: 1fr; }.service-dashboard__card--wide { grid-column: auto; }.service-dashboard__head { display: block; }.service-dashboard__head > .status-pill { display: inline-block; margin-top: 1rem; } }
@media (max-width: 900px) { .members-shell { grid-template-columns: 1fr; }.members-panel { margin-right: 14px; }.members-intro h1 { font-size: clamp(3rem, 12vw, 5rem); } }
@media (max-width: 700px) { .portal-service-grid { grid-template-columns: 1fr; }.portal-more-service { align-items: stretch; flex-direction: column; } }
@media (max-width: 560px) { .members-hero { padding-top: 3.5rem; }.members-panel__bar p { display: none; }.members-panel__body { padding: 1.35rem; }.member-purchase { grid-template-columns: 1fr; }.member-purchase dl { grid-template-columns: 1fr; }.member-results__head { display: block; }.member-results__head .btn { margin-top: 1rem; } }
/* Administrator member access controls */
.admin-access-panel{margin:1.4rem 0;padding:1.2rem;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 92%,transparent);display:grid;gap:1rem}
.admin-access-panel>div:first-child{display:grid;gap:.45rem}
.admin-access-code{font-family:var(--mono);font-size:1.05rem;letter-spacing:.12em;color:var(--gold-light);overflow-wrap:anywhere}
.admin-access-panel details{border-top:1px solid var(--border);padding-top:1rem}
.admin-access-panel summary{cursor:pointer;font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text)}
.admin-access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin:1rem 0}
.admin-access-option{display:flex;align-items:center;gap:.65rem;padding:.75rem;border:1px solid var(--border);background:var(--bg);font-weight:600}
.admin-access-option input{width:1.1rem;height:1.1rem;accent-color:var(--gold)}
@media(max-width:700px){.admin-access-grid{grid-template-columns:1fr}}