/*
 * BYLD site stylesheet. Tokens are the BYLD Design System v2 values and
 * nothing else: gold signals action or earned progress, status colors are
 * functional, AI stays gold.
 *
 * Two layers live here:
 *   1. Tokens plus the shared header and footer (.site-header, .site-footer).
 *      Every page on the site loads this file, including the older pages that
 *      carry their own styles, so the chrome is written defensively and never
 *      relies on page CSS.
 *   2. Base and components for the redesigned pages, all scoped under
 *      body.b-page so they cannot restyle an older page that shares a class
 *      name such as .btn.
 */

:root {
  /* Brand */
  --b-gold: #C8922A;
  --b-gold-hover: #E8A830;

  /* Dark surfaces */
  --b-page: #080807;
  --b-graphite: #0F0F0D;
  --b-card: #111110;
  --b-slate: #1E2027;
  --b-concrete: #2A2D36;
  --b-text: #EDE9E0;

  /* Status. AI is gold, never purple. */
  --b-on-track: #22C55E;
  --b-watch: #FBB724;
  --b-at-risk: #EF4444;
  --b-info: #3B82F6;

  /* Light surfaces: marketing bands and the client card */
  --b-light-page: #F8F6F1;
  --b-light-card: #FFFFFF;
  --b-light-border: #E8E2D8;
  --b-light-text: #1A1917;

  /* Derived from the tokens above, never new hues */
  --b-text-85: rgba(237, 233, 224, 0.85);
  --b-text-70: rgba(237, 233, 224, 0.7);
  --b-text-62: rgba(237, 233, 224, 0.62);
  --b-text-55: rgba(237, 233, 224, 0.55);
  --b-text-45: rgba(237, 233, 224, 0.45);
  --b-line: rgba(237, 233, 224, 0.1);
  --b-line-soft: rgba(237, 233, 224, 0.07);
  --b-line-strong: rgba(237, 233, 224, 0.25);
  --b-gold-line: rgba(200, 146, 42, 0.3);
  --b-gold-wash: rgba(200, 146, 42, 0.07);
  --b-gold-chip: rgba(200, 146, 42, 0.18);
  --b-header-bg: rgba(8, 8, 7, 0.86);

  /* Type */
  --b-font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --b-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --b-size-hero: clamp(40px, 7vw, 85px);   /* 64pt ceiling */
  --b-size-section: clamp(32px, 4.4vw, 60px);
  --b-size-module: clamp(30px, 3.8vw, 52px);
  --b-size-closer: clamp(38px, 5.6vw, 80px);

  /* Layout */
  --b-radius: 12px;
  --b-radius-lg: 16px;
  --b-tap: 44px;
  --b-max: 1240px;
  --b-gutter: 32px;
  --b-section-y: 128px;

  /* Motion: UI transitions stay within 150 to 250ms */
  --b-dur: 200ms;
  --b-dur-slow: 250ms;
  --b-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

@media (max-width: 900px) {
  :root { --b-gutter: 24px; --b-section-y: 96px; }
}
@media (max-width: 560px) {
  :root { --b-gutter: 16px; --b-section-y: 72px; }
}

/* ───────────────────────── Shared chrome ───────────────────────── */

.site-header, .site-header *, .site-footer, .site-footer * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  float: none;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
  font-style: normal;
}

/* Older pages style bare nav and footer elements; none of that may leak in. */
.site-header nav, .site-footer nav {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  height: auto;
  min-height: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  float: none;
  transform: none;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 200;
  padding: 12px 16px;
  border-radius: var(--b-radius);
  background: var(--b-gold);
  color: var(--b-page);
  font: 600 14px/1 var(--b-font-body);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.site-header {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  z-index: 100;
  display: block;
  width: 100%;
  height: auto;
  background: var(--b-header-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 0;
  border-bottom: 1px solid var(--b-line-soft);
  box-shadow: none;
  font-family: var(--b-font-body);
  line-height: 1.4;
}
.site-header .site-nav {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 32px;
  max-width: var(--b-max);
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 10px var(--b-gutter);
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
}
.site-header a {
  display: inline-flex;
  align-items: center;
  min-height: var(--b-tap);
  color: var(--b-text-62);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  border: 0;
  background: none;
  transition: color var(--b-dur) ease;
}
.site-header a:hover { color: var(--b-text); }
.site-header a[aria-current="page"] { color: var(--b-text); box-shadow: inset 0 -1px 0 var(--b-gold); }
.site-header .site-brand { margin-right: auto; padding: 6px 0; }
.site-header a.site-brand[aria-current="page"] { box-shadow: none; }
/* Wordmark artwork is 335 x 120; set height only so the aspect ratio holds. */
.site-logo { display: block; width: auto; max-width: none; height: 32px; border: 0; }
.site-header .site-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; list-style: none; }
.site-header .site-actions { display: flex; align-items: center; gap: 20px; }
.site-header .site-cta { gap: 0.35em; color: var(--b-gold); font-weight: 600; }
.site-header .site-cta:hover { color: var(--b-gold-hover); }
.site-header .site-cta[aria-current="page"] { color: var(--b-text); }

/* Narrow screens: brand and actions share the first row, sections wrap below. */
@media (max-width: 1023px) {
  .site-header .site-nav { gap: 0 20px; padding-top: 6px; padding-bottom: 6px; }
  .site-header .site-actions { order: 2; gap: 16px; }
  .site-header .site-links {
    order: 3;
    flex: 1 1 100%;
    gap: 0 20px;
    border-top: 1px solid var(--b-line-soft);
  }
}
/* Phones: three rows of chrome is too much to pin, so it scrolls away. */
@media (max-width: 767px) {
  .site-header { position: relative; }
}
@media (max-width: 400px) {
  .site-header .site-links { gap: 0 16px; }
  .site-header .site-actions { gap: 14px; }
}

.site-footer {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(237, 233, 224, 0.08);
  background: var(--b-page);
  color: var(--b-text);
  font-family: var(--b-font-body);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  box-shadow: none;
}
.site-footer .site-footer-inner { max-width: var(--b-max); margin: 0 auto; padding: 72px var(--b-gutter) 40px; }
.site-footer .site-footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; }
.site-footer .site-footer-brand { flex: 1 1 240px; min-width: 0; }
.site-footer .site-footer-id { display: flex; align-items: center; }
.site-footer .site-logo { height: 40px; }
.site-footer .site-footer-tag { margin-top: 28px; font-family: var(--b-font-display); font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--b-gold); }
.site-footer .site-footer-sub { margin-top: 8px; font-size: 14px; color: var(--b-text-62); }
.site-footer .site-footer-nav {
  flex: 3 1 640px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-items: start;
  justify-content: stretch;
  gap: 32px 32px;
}
.site-footer .site-footer-col { display: flex; flex-direction: column; gap: 2px; list-style: none; }
.site-footer .site-footer-head {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(237, 233, 224, 0.5);
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: rgba(237, 233, 224, 0.66);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  border: 0;
  background: none;
  transition: color var(--b-dur) ease;
}
.site-footer a:hover { color: var(--b-text); }
.site-footer .site-footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(237, 233, 224, 0.08);
  font-size: 12px;
  line-height: 1.6;
  color: var(--b-text-55);
}
@media (max-width: 560px) {
  .site-footer .site-footer-inner { padding-top: 56px; }
  .site-footer .site-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
}

.site-header :focus-visible, .site-footer :focus-visible, .skip-link:focus-visible {
  outline: 2px solid var(--b-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .site-header *, .site-footer * { transition: none !important; }
}

/* ─────────────────── Redesigned pages: base ─────────────────── */

body.b-page {
  margin: 0;
  min-height: 100vh;
  background: var(--b-page);
  color: var(--b-text);
  font-family: var(--b-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
.b-page *, .b-page *::before, .b-page *::after { box-sizing: border-box; }
.b-page main { display: block; overflow-x: clip; }
.b-page [id] { scroll-margin-top: 96px; }
/* Element defaults use :where() so any component class outranks them. */
:where(.b-page) :where(img, svg) { max-width: 100%; }
:where(.b-page) a { color: var(--b-gold); text-decoration: none; }
:where(.b-page) a:hover { color: var(--b-gold-hover); }
:where(.b-page) :focus-visible { outline: 2px solid var(--b-gold); outline-offset: 3px; }
:where(.b-page) :where(h1, h2, h3, p, figure, ul, ol, dl, dd) { margin: 0; }
:where(.b-page) :where(ul, ol) { padding: 0; list-style: none; }
:where(.b-page) :where(button, input, select, textarea) { font: inherit; }
.b-page .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;
}

.b-page .wrap { max-width: var(--b-max); margin: 0 auto; padding-left: var(--b-gutter); padding-right: var(--b-gutter); }
.b-page .section { padding: var(--b-section-y) var(--b-gutter); }
.b-page .section > .inner { max-width: var(--b-max); margin: 0 auto; }
.b-page .rule-b { border-bottom: 1px solid var(--b-line-soft); }
.b-page .bg-graphite { background-color: var(--b-graphite); }

/* Split layouts used by every module: copy beside a mockup. */
.b-page .split { display: flex; flex-wrap: wrap; align-items: center; gap: 56px 80px; }
.b-page .split.rev { flex-wrap: wrap-reverse; }
.b-page .split-copy { flex: 1 1 360px; min-width: 0; }
.b-page .split-media { flex: 1.5 1 560px; min-width: 0; }
.b-page .head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px; }
.b-page .head-row > :first-child { flex: 1 1 520px; min-width: 0; }
.b-page .head-row > p { flex: 1 1 340px; min-width: 0; }

/* ─────────────────── Redesigned pages: type ─────────────────── */

.b-page .disp { font-family: var(--b-font-display); }
.b-page .num { font-variant-numeric: tabular-nums; }

/* Section label. The leading rule is drawn, not typed. */
.b-page .kicker {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--b-gold);
}
.b-page .kicker::before { content: ""; flex: 0 0 auto; width: 1.4em; height: 1px; background: currentColor; }
.b-page .kicker.plain::before { display: none; }
.b-page .kicker.hero-k { margin-bottom: 32px; }
.b-page .band-light .kicker { color: var(--b-light-text); font-weight: 600; }

.b-page .label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237, 233, 224, 0.5);
}
.b-page .label-wide { letter-spacing: 0.22em; color: var(--b-text-55); }

.b-page .h-hero {
  font-family: var(--b-font-display);
  font-size: var(--b-size-hero);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.b-page .h-section {
  font-family: var(--b-font-display);
  font-size: var(--b-size-section);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.b-page .h-module {
  font-family: var(--b-font-display);
  font-size: var(--b-size-module);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.b-page .h-closer {
  margin: 0 auto;
  max-width: 16ch;
  font-family: var(--b-font-display);
  font-size: var(--b-size-closer);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}
.b-page .h-band {
  font-family: var(--b-font-display);
  font-size: clamp(36px, 5.4vw, 76px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}
.b-page .gold { color: var(--b-gold); }
.b-page .lead { font-size: 17px; line-height: 1.65; color: rgba(237, 233, 224, 0.68); max-width: 42ch; }
.b-page .muted { color: var(--b-text-62); }
.b-page .note { margin-top: 14px; font-size: 12px; color: rgba(237, 233, 224, 0.5); }
.b-page .numeral { font-style: italic; font-weight: 500; font-size: 17px; color: var(--b-gold); }

/* ─────────────────── Redesigned pages: controls ─────────────────── */

.b-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--b-radius);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--b-dur) ease, color var(--b-dur) ease, border-color var(--b-dur) ease, transform var(--b-dur) ease;
}
.b-page .btn:hover { transform: translateY(-2px); }
.b-page .btn-lg { min-height: 54px; padding: 0 28px; }
.b-page .btn-gold { background-color: var(--b-gold); color: var(--b-page); }
.b-page .btn-gold:hover { background-color: var(--b-gold-hover); color: var(--b-page); }
.b-page .btn-line { border-color: var(--b-line-strong); background: transparent; color: var(--b-text-85); font-weight: 500; }
.b-page .btn-line:hover { border-color: var(--b-text); color: var(--b-text); }
.b-page .btn-dark { background-color: var(--b-light-text); color: var(--b-light-page); }
.b-page .btn-dark:hover { color: var(--b-light-page); }
.b-page .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.b-page .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.b-page .actions.center { justify-content: center; }
.b-page .or { font-size: 15px; color: rgba(237, 233, 224, 0.6); }

.b-page .text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--b-tap);
  color: var(--b-light-text);
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--b-light-border);
  transition: text-decoration-color var(--b-dur) ease;
}
.b-page .text-link:hover { color: var(--b-light-text); text-decoration-color: var(--b-gold); }

/* ─────────────────── Redesigned pages: surfaces ─────────────────── */

.b-page .hero { position: relative; background-color: var(--b-page); border-bottom: 1px solid var(--b-line-soft); }
/* Pages tune hero spacing with --hero-pt and --hero-pb; phones always get 64px. */
.b-page .hero > .wrap { padding-top: var(--hero-pt, 112px); padding-bottom: var(--hero-pb, 96px); }
@media (max-width: 560px) {
  .b-page .hero { --hero-pt: 64px; --hero-pb: 64px; }
}
.b-page .glow-tr { background-image: radial-gradient(ellipse 55% 80% at 80% 20%, rgba(200, 146, 42, 0.1), transparent 70%); }
.b-page .glow-top { background-image: radial-gradient(ellipse 50% 80% at 50% 0%, rgba(200, 146, 42, 0.1), transparent 70%); }

.b-page .frame {
  border-radius: var(--b-radius-lg);
  border: 1px solid rgba(237, 233, 224, 0.09);
  background-color: var(--b-graphite);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}
.b-page .frame-pad { padding: 28px; }
@media (max-width: 560px) {
  .b-page .frame-pad { padding: 18px; }
}
.b-page .tile {
  padding: 18px;
  border-radius: var(--b-radius);
  border: 1px solid rgba(237, 233, 224, 0.08);
  background-color: var(--b-card);
}
.b-page .tile.gold-edge { border-color: rgba(200, 146, 42, 0.25); }
.b-page .card {
  padding: 32px;
  border-radius: var(--b-radius-lg);
  border: 1px solid rgba(237, 233, 224, 0.09);
  background-color: var(--b-card);
}
.b-page a.card { display: flex; flex-direction: column; gap: 10px; color: var(--b-text); }
.b-page .card-gold { border-color: var(--b-gold); background-color: var(--b-gold-wash); }
.b-page .lift { transition: border-color var(--b-dur) ease, transform var(--b-dur-slow) ease; }
.b-page .lift:hover { border-color: rgba(200, 146, 42, 0.5); transform: translateY(-4px); }

/* iBYLD insight. AI is gold. */
.b-page .ai-note {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--b-radius);
  border: 1px solid var(--b-gold-line);
  background-color: var(--b-gold-wash);
}
.b-page .ai-i {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: var(--b-gold-chip);
  color: var(--b-gold);
  font-family: var(--b-font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}
.b-page .ai-title { font-size: 14px; font-weight: 600; }
.b-page .ai-body { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--b-text-62); }
.b-page .ai-src { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--b-gold); }
.b-page .ai-src.ok { color: var(--b-on-track); }

.b-page .window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--b-line-soft);
  background-color: var(--b-card);
}
.b-page .window-bar i { display: block; width: 10px; height: 10px; border-radius: 50%; background-color: var(--b-concrete); }
.b-page .window-bar span { margin-left: 14px; font-size: 12px; color: rgba(237, 233, 224, 0.5); }

.b-page .dot { display: block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background-color: currentColor; }
.b-page .ok { color: var(--b-on-track); }
.b-page .watch { color: var(--b-watch); }
.b-page .risk { color: var(--b-at-risk); }
.b-page .health { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--b-on-track); }

.b-page .tag { padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
.b-page .tag.risk { background-color: rgba(239, 68, 68, 0.14); }
.b-page .tag.ok { background-color: rgba(34, 197, 94, 0.14); }
.b-page .tag.watch { background-color: rgba(251, 183, 36, 0.14); }

.b-page .bar-track { height: 4px; border-radius: 2px; background-color: var(--b-concrete); overflow: hidden; }
.b-page .bar-track.thick { height: 5px; border-radius: 3px; }
.b-page .bar-fill { height: 100%; }
.b-page .fill-risk { background-color: var(--b-at-risk); }
.b-page .fill-ok { background-color: var(--b-on-track); }
.b-page .fill-watch { background-color: var(--b-watch); }
.b-page .fill-gold { background-color: var(--b-gold); }

.b-page .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.b-page .kpi-value { margin-top: 10px; font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Bordered list used beside every module. */
.b-page .rule-list { margin-top: 32px; border-top: 1px solid var(--b-line); }
.b-page .rule-list li { padding: 14px 0; border-bottom: 1px solid var(--b-line); font-size: 16px; line-height: 1.5; }

/* Tables scroll inside their own box. */
.b-page .table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.b-page .table-box { border-radius: var(--b-radius); border: 1px solid var(--b-line-soft); }
.b-page table { width: 100%; border-collapse: collapse; font-size: 14px; }
.b-page th { text-align: left; }
.b-page .t-dark th[scope="col"] {
  padding: 14px 16px;
  background-color: var(--b-card);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237, 233, 224, 0.5);
}
.b-page .t-dark td { padding: 16px; }
.b-page .t-dark td.num { white-space: nowrap; }
.b-page .t-dark tbody tr { border-top: 1px solid rgba(237, 233, 224, 0.06); }

/* Light marketing band. */
.b-page .band-light { background-color: var(--b-light-page); color: var(--b-light-text); }
.b-page .band-light .lead { color: var(--b-light-text); }
.b-page .band-light a:not(.btn) { color: var(--b-light-text); text-decoration: underline; text-decoration-color: var(--b-gold); text-underline-offset: 3px; }
.b-page .vs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 64px; border-top: 1px solid var(--b-light-text); }
.b-page .vs-grid > div { padding: 32px; border-right: 1px solid var(--b-light-border); }
.b-page .vs-grid > div:first-child { padding-left: 0; }
.b-page .vs-grid > div:last-child { padding-right: 0; border-right: 0; }
@media (max-width: 860px) {
  .b-page .vs-grid > div, .b-page .vs-grid > div:first-child, .b-page .vs-grid > div:last-child {
    padding: 28px 0;
    border-right: 0;
    border-bottom: 1px solid var(--b-light-border);
  }
  .b-page .vs-grid > div:last-child { border-bottom: 0; }
}
.b-page .vs-name { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.b-page .vs-claim { margin-top: 16px; font-family: var(--b-font-display); font-size: 22px; line-height: 1.3; font-weight: 600; }
.b-page .vs-ours { margin-top: 20px; font-size: 16px; line-height: 1.55; }

/* Closing call to action on every page. */
.b-page .closer { border-top: 1px solid var(--b-gold); background-color: var(--b-page); text-align: center; }
.b-page .closer > .wrap { padding-top: 128px; padding-bottom: 128px; }
.b-page .closer .actions { justify-content: center; margin-top: 44px; }
@media (max-width: 560px) {
  .b-page .closer > .wrap { padding-top: 88px; padding-bottom: 88px; }
}

/* Numbered rows on Home (i. Scheduling and so on). */
.b-page .index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 48px; }
.b-page .index-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  gap: 16px;
  align-items: baseline;
  margin-bottom: -1px;
  padding: 26px 12px;
  border-top: 1px solid var(--b-line);
  border-bottom: 1px solid var(--b-line);
  color: var(--b-text);
  transition: background-color var(--b-dur) ease, border-color var(--b-dur) ease;
}
.b-page .index-row:hover { color: var(--b-text); background-color: var(--b-card); border-color: rgba(200, 146, 42, 0.45); }
.b-page .index-row .t { display: block; font-family: var(--b-font-display); font-size: 21px; font-weight: 600; }
.b-page .index-row .d { display: block; margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--b-text-62); }
.b-page .index-row .arrow { color: var(--b-gold); }
@media (max-width: 560px) {
  .b-page .index-row { grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 12px; padding: 22px 4px; }
}

/* Forms (Request access). */
.b-page .field-label { font-size: 13px; color: var(--b-text-70); }
.b-page .field {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border-radius: var(--b-radius);
  border: 1px solid rgba(237, 233, 224, 0.12);
  background-color: var(--b-card);
  color: var(--b-text);
  font-size: 16px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.b-page select.field { padding: 0 12px; }
.b-page textarea.field { min-height: 96px; padding: 12px 14px; resize: vertical; }
.b-page .field:focus { border-color: var(--b-gold); outline: none; box-shadow: 0 0 0 3px rgba(200, 146, 42, 0.22); }
.b-page .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px; }
.b-page .field-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* ─────────────────── Redesigned pages: motion ─────────────────── */

.b-page .marquee { animation: b-marquee 60s linear infinite; }
.b-page .marquee:hover { animation-play-state: paused; }

.b-page .rise { animation: b-rise 0.9s var(--b-ease) both; }
.b-page .r2 { animation-delay: 0.15s; }
.b-page .r3 { animation-delay: 0.3s; }
.b-page .r4 { animation-delay: 0.5s; }
.b-page .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: b-draw 11s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.b-page .d2 { animation-delay: 0.5s; }
.b-page .d3 { animation-delay: 1s; }
.b-page .fl { animation: b-fade 11s ease infinite both; }
.b-page .pop { animation: b-pop 11s ease infinite both; }
.b-page .pop8 { animation: b-pop8 8s ease infinite both; }
.b-page .grow { transform-origin: left center; animation: b-grow 1.4s var(--b-ease) both; }
.b-page .strike { transform-origin: left center; animation: b-grow 0.6s cubic-bezier(0.65, 0, 0.35, 1) both; }
.b-page .scan { animation: b-scan 6s ease-in-out infinite; }
.b-page .scan7 { animation: b-scan 7s ease-in-out infinite; }
.b-page .det { animation: b-det 7s ease infinite both; }
.b-page .blink { animation: b-blink 1.05s steps(1) infinite; }
.b-page .dots span { animation: b-dot 1.2s ease-in-out infinite; }
.b-page .pulse { animation: b-pulse 2.4s ease-out infinite; }
.b-page .eq { transform-origin: center; animation: b-eq 1s ease-in-out infinite; }
.b-page .dash { stroke-dasharray: 4 5; animation: b-dash 1.2s linear infinite; }

@keyframes b-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes b-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 38% { stroke-dashoffset: 0; } 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes b-fade { 0%, 32% { opacity: 0; } 42%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes b-pop { 0%, 26% { opacity: 0; transform: translateY(10px); } 34%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes b-pop8 { 0%, 18% { opacity: 0; transform: translateY(10px); } 26%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes b-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes b-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes b-scan { 0% { top: 0%; } 50% { top: calc(100% - 1px); } 100% { top: 0%; } }
@keyframes b-det { 0%, 12% { opacity: 0; transform: scale(0.96); } 20%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes b-blink { 50% { opacity: 0; } }
@keyframes b-dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes b-pulse { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes b-eq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes b-dash { to { stroke-dashoffset: -9; } }

/* Reduced motion: everything rests in its finished state. */
@media (prefers-reduced-motion: reduce) {
  .b-page *, .b-page *::before, .b-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .b-page .draw { stroke-dashoffset: 0; }
  .b-page .marquee { transform: none; }
}

/* Printed pages (the memo, the legal terms) carry no site chrome. */
@media print {
  .skip-link, .site-header, .site-footer { display: none !important; }
}