:root {
  --ink: #1d1d1f;
  --ink-soft: #424245;
  --ink-muted: #6e6e73;
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --rule: #d2d2d7;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --nav-h: 48px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  overflow-x: hidden;
}

body {
  font-family: "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47059;
  letter-spacing: -0.022em;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

/* Consolidated top bar */
body > header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: var(--nav-h);
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
body { padding-top: var(--nav-h); }

body > header nav {
  max-width: 1024px;
  height: 100%;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 40px;
}

body > header nav .brand { display: inline-flex; flex-shrink: 0; }

body > header nav .brand img {
  height: 20px;
  width: auto;
  filter: brightness(0) invert(1);
}

body > header nav > #tabs {
  display: flex;
  align-items: center;
  margin-left: auto;
  min-width: 0;
}

body > header nav .nav-menu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body > header nav .nav-menu-item,
body > header nav .nav-menu-item:link,
body > header nav .nav-menu-item:visited {
  display: inline-flex;
  align-items: center;
  appearance: none;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 6px 12px;
  border-radius: 980px;
  cursor: pointer;
  text-transform: capitalize;
  transition: background 140ms ease, color 140ms ease;
}
body > header nav .nav-menu-item:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
body > header nav .nav-menu-item[aria-current="page"] {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
body > header nav .nav-menu-item-label {
  color: inherit;
  white-space: nowrap;
}

/* Kitchensink section dropdown — sits in the dark top bar */
body > header nav .nav-tabs--dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
body > header nav .nav-tabs--dropdown::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.78);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.78);
  transform: translateY(-72%) rotate(45deg);
  pointer-events: none;
}
body > header nav .nav-tabs-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 980px;
  padding: 6px 32px 6px 14px;
  cursor: pointer;
  text-transform: capitalize;
  min-width: 160px;
  transition: background 140ms ease, border-color 140ms ease;
}
body > header nav .nav-tabs-select:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.28);
}
body > header nav .nav-tabs-select:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}
body > header nav .nav-tabs-select option {
  color: var(--ink);
  background: #ffffff;
}

/* Main / page */
main {
  width: 100%;
  min-height: calc(100vh - var(--nav-h) - 60px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 22px 96px;
}

/* When the first section is full-bleed, sit it flush beneath the fixed top
   bar (body already reserves --nav-h) — otherwise main's top padding shows
   as a white strip above the bleed. */
main:has(> .hero--bleed:first-child),
main:has(> .text-block--bleed:first-child),
main:has(> .numbers--bleed:first-child),
main:has(> .timeline--bleed:first-child),
main:has(> .countdown--bleed:first-child),
main:has(> .calendar-block--bleed:first-child),
main:has(> .clock--bleed:first-child),
main:has(> .video--bleed:first-child),
main:has(> .cards--bleed:first-child),
main:has(> .gallery--bleed:first-child) {
  padding-top: 0;
}

.page-hero {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.page-hero h2 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-transform: capitalize;
  margin-bottom: 16px;
}

.page-hero .lede {
  font-size: 21px;
  line-height: 1.381;
  letter-spacing: 0.011em;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto;
}

/* Content page (no form) */
.page--content {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Configurator layout */
.config-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: start;
}

.config-layout--full {
  grid-template-columns: minmax(0, 1fr);
}

.config-steps {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

/* Step */
.step {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 32px;
}

.step-head {
  margin-bottom: 20px;
}

.step-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.step h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.step-hint {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.5;
}

.step--inline { padding: 20px 32px; }

/* Option cards */
.options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.option {
  appearance: none;
  background: var(--bg);
  border: 2px solid var(--rule);
  border-radius: 16px;
  padding: 20px 18px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.18s ease, transform 0.1s ease;
}

.option:hover { border-color: var(--ink-muted); }
.option:active { transform: scale(0.99); }

.option[aria-checked="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.option-name {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  text-transform: capitalize;
}

.option-sub {
  font-size: 13px;
  color: var(--ink-muted);
}

/* Step inputs */
.step input[type="text"],
.step input[type="email"],
.step input[type="password"],
.step input[type="tel"],
.step input[type="number"],
.step input[type="date"],
.step input[type="file"],
.step textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}

.step textarea { min-height: 120px; resize: vertical; }

.step input:focus,
.step textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

/* Stepper */
.stepper-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.stepper-suffix {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 980px;
  padding: 6px;
  background: var(--bg);
}

.stepper-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease;
}

.stepper-btn:hover:not(:disabled) { background: var(--bg-alt); }
.stepper-btn:disabled { color: var(--ink-muted); cursor: not-allowed; opacity: 0.4; }

.stepper-value {
  min-width: 140px;
  padding: 0 20px;
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Bids list (per-panel) */
.bids {
  list-style: none;
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--bg-alt);
}

.bid-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.bid-name {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  text-transform: capitalize;
}

.bid-width {
  font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.bid-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.bid-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.bid-control-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.bid-subtotal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 14px;
  margin-left: auto;
  border-left: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}

.bid-subtotal-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.bid-subtotal strong {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

/* Standalone file upload */
.file-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  border: 1px dashed var(--rule);
  border-radius: 16px;
  background: var(--bg-alt);
  font-size: 15px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.file-drop:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg);
}

.file-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-drop-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Calendar */
.calendar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

.cal-month {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cal-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  text-transform: capitalize;
  letter-spacing: -0.01em;
}

.cal-dow,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-dow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}

.cal-day,
.cal-blank {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.cal-day {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cal-day:hover:not(:disabled):not([aria-selected="true"]) {
  border-color: var(--rule);
  background: var(--bg-alt);
}

.cal-day:disabled {
  color: var(--ink-muted);
  opacity: 0.35;
  cursor: not-allowed;
}

.cal-day[aria-selected="true"] {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}

/* Muted step (placeholder) */
.step--muted {
  background: var(--bg-alt);
  border-style: dashed;
}

.step--muted .step-head h3 {
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 20px;
}

/* Summary additions */
.summary-bids {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
}

.summary-bids li {
  font-size: 13px;
  color: var(--ink);
}

.summary-total {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  color: var(--ink);
  cursor: pointer;
}

.check-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  margin: 0;
}

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

.request-form .request-message {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  resize: vertical;
  min-height: 96px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}

.request-form .request-message:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

.request-form .cta {
  align-self: flex-start;
  padding: 12px 28px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 980px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.1s ease;
}

.request-form .cta:hover { background: var(--accent-hover); }
.request-form .cta:active { transform: scale(0.98); }

.request-warning {
  margin: 0;
  font-size: 14px;
  color: var(--warn, #b25400);
}

.request-success {
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(48, 164, 108, 0.08);
  border: 1px solid rgba(48, 164, 108, 0.32);
  border-radius: 16px;
  color: var(--ink);
  animation: request-success-in 0.32s ease both;
}

.request-success__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(48, 164, 108, 0.18);
  color: #1f8f5b;
}

.request-success__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.request-success__title { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.request-success__text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2, #4b4b4b); }

@keyframes request-success-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Configurator right column — summary only, sticky */
.config-right {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Summary */
.summary {
  background: var(--bg-alt);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Inline proposal upload + comments inside the offer summary */
.summary-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

.side-file {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px dashed var(--rule);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.side-file:hover {
  border-color: var(--accent);
  background: var(--bg);
}

.side-file input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.side-file-text {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.3;
  text-align: center;
  word-break: break-word;
}

.side-textarea {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.side-textarea-label {
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

.side-textarea textarea {
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
  outline: none;
  resize: vertical;
  min-height: 70px;
  transition: border-color 0.15s ease;
}

.side-textarea textarea:focus {
  border-color: var(--accent);
}

.summary h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.summary-empty {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.5;
}

.summary dl {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 0;
}

.summary dl div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.summary dl div:last-child { border-bottom: none; padding-bottom: 0; }

.summary dt {
  color: var(--ink-muted);
  text-transform: capitalize;
  flex-shrink: 0;
}

.summary dd {
  color: var(--ink);
  font-weight: 500;
  text-transform: capitalize;
  text-align: right;
}

.summary-cadence {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-muted);
  margin-left: 4px;
  text-transform: lowercase;
}

.summary-totals {
  display: flex;
  flex-direction: column;
}

.summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  font-size: 14px;
  border-top: 1px solid var(--rule);
}

.summary-line span {
  color: var(--ink-muted);
}

.summary-line strong {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.summary-grand-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.summary-grand-total span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.summary-grand-total strong {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.summary-rate-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-muted);
  text-align: right;
}

.summary .cta {
  width: 100%;
  padding: 12px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 980px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.1s ease;
}

.summary .cta:hover { background: var(--accent-hover); }
.summary .cta:active { transform: scale(0.98); }

.summary-note {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
  text-align: center;
}

/* Footer */
body > footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--rule);
  padding: 18px 22px;
  text-align: center;
}

body > footer small {
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--ink-muted);
}

/* Shared step variant: vertical split (header left, content right).
   Any .step card can opt in by adding .step--split. */
.step--split {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.step--split .step-head { margin-bottom: 0; }
.step--split .step-content { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* Party form: full-width split card above the configurator */
.party-form { margin-bottom: 32px; }

.party-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}

.party-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.party-label {
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.party-req {
  color: #c8102e;
  font-weight: 600;
}

.party-field input {
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
  outline: none;
  transition: border-color 0.15s ease;
}

.party-field input:focus {
  border-color: var(--accent);
}

.party-warning,
.summary-warning {
  font-size: 12px;
  color: #c8102e;
  margin: 0;
  line-height: 1.4;
}

.party-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.party-reset {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: var(--ink, #1d1d1f);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.party-reset:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.32);
}

.summary-success {
  padding: 14px 16px;
  border-radius: 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #14532d;
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-success-id {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #15803d;
  word-break: break-all;
  margin: 0;
}

.cta[disabled],
.cta[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Invitation form */
.invitation { max-width: 720px; margin: 0 auto; }

.invitation-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 32px;
}

.invitation-message {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.invitation-message textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  resize: vertical;
  min-height: 96px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}

.invitation-message textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

.invitation-form .cta {
  align-self: flex-start;
  padding: 12px 28px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 980px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.1s ease;
}

.invitation-form .cta:hover { background: var(--accent-hover); }
.invitation-form .cta:active { transform: scale(0.98); }

.invitation-success {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #14532d;
  font-size: 13px;
  line-height: 1.45;
}

/* ------------------------------------------------------------------
 * Reference badges — small monospace label rendered in the
 * top-left of any [data-ref] section. Used as visual nomenclature
 * (H1, T1, D1, M1, N1...) for easy reference between user and code.
 * ------------------------------------------------------------------ */
[data-ref] { position: relative; }
[data-ref]::before {
  content: attr(data-ref);
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 20;
  font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 4px 9px;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.hero--dark[data-ref]::before,
.text-block--dark[data-ref]::before,
.numbers--dark[data-ref]::before {
  color: #d2d2d7;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------------
 * Hero system — Apple-style tiles
 * Base tile, then layout (full | split | split-reverse | half),
 * theme (light | dark — auto-applied when backed by media),
 * position (center | bottom-left | bottom-right | top-left | top-right),
 * and tall modifier.
 * ------------------------------------------------------------------ */
.hero {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 12px;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hero-bg, linear-gradient(160deg, #f5f5f7 0%, #e8e8ed 100%));
  padding: 72px 54px;
  isolation: isolate;
}
.hero:last-child { margin-bottom: 56px; }
.hero-pair + .hero,
.hero + .hero,
.hero + .hero-pair { margin-top: 0; }

.hero--tall { min-height: 680px; }
.hero--short {
  min-height: calc((100vh - var(--nav-h)) / 3);
  padding: 32px 54px;
}
.hero--short .hero-text h2,
.hero--short .hero-text h1 { font-size: clamp(28px, 3.6vw, 44px); }
.hero--short .hero-text .lede { font-size: clamp(15px, 1.4vw, 18px); margin-top: 6px; }
.hero--short .hero-text .eyebrow { margin-bottom: 6px; }
.hero--half {
  min-height: calc((100vh - var(--nav-h)) / 2);
  padding: 48px 54px;
}
.hero--half .hero-text h2,
.hero--half .hero-text h1 { font-size: clamp(32px, 4.6vw, 56px); }
.hero--half .hero-text .lede { font-size: clamp(16px, 1.5vw, 20px); margin-top: 8px; }
.hero--half .hero-text .eyebrow { margin-bottom: 8px; }
.hero--three-quarters {
  min-height: calc((100vh - var(--nav-h)) * 0.75);
  padding: 56px 54px;
}
.hero--three-quarters .hero-text h2,
.hero--three-quarters .hero-text h1 { font-size: clamp(36px, 5.2vw, 64px); }
.hero--three-quarters .hero-text .lede { font-size: clamp(16px, 1.6vw, 22px); margin-top: 8px; }

/* Base alignment (from align tag — center | left | right) */
.hero--center { justify-content: center; text-align: center; }
.hero--left { justify-content: flex-start; text-align: left; }
.hero--left .hero-text { text-align: left; max-width: 560px; }
.hero--right { justify-content: flex-end; text-align: right; }
.hero--right .hero-text { text-align: right; max-width: 560px; }

/* Position — pins overlay text to a corner */
.hero--pos-top-left,
.hero--pos-top-right { align-items: flex-start; }
.hero--pos-bottom-left,
.hero--pos-bottom-right { align-items: flex-end; }
.hero--pos-top-left,
.hero--pos-bottom-left { justify-content: flex-start; }
.hero--pos-top-right,
.hero--pos-bottom-right { justify-content: flex-end; }
.hero--pos-top-left .hero-text,
.hero--pos-bottom-left .hero-text { text-align: left; max-width: 560px; }
.hero--pos-top-right .hero-text,
.hero--pos-bottom-right .hero-text { text-align: right; max-width: 560px; }
.hero--pos-bottom-center { align-items: flex-end; justify-content: center; }
.hero--pos-bottom-center .hero-text { text-align: center; }
.hero--pos-top-center { align-items: flex-start; justify-content: center; }
.hero--pos-top-center .hero-text { text-align: center; }

/* Media fill — absolute cover under text */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero--focus-left .hero-media img { object-position: 0% 50%; }
.hero--focus-right .hero-media img { object-position: 100% 50%; }
.hero--focus-top .hero-media img { object-position: 50% 0%; }
.hero--focus-bottom .hero-media img { object-position: 50% 100%; }
.hero--focus-top-left .hero-media img { object-position: 0% 0%; }
.hero--focus-top-right .hero-media img { object-position: 100% 0%; }
.hero--focus-bottom-left .hero-media img { object-position: 0% 100%; }
.hero--focus-bottom-right .hero-media img { object-position: 100% 100%; }
.hero--has-media:not(.hero--split):not(.hero--split-reverse) .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.5) 100%);
}

/* Text block */
.hero-text {
  position: relative;
  z-index: 1;
  max-width: 720px;
  text-align: center;
}
.hero-text .eyebrow {
  color: var(--accent);
  margin-bottom: 12px;
}
.hero-text h2,
.hero-text h1 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  color: var(--ink);
  white-space: pre-line;
}
.hero-text .lede {
  font-size: 21px;
  line-height: 1.381;
  letter-spacing: 0.011em;
  color: var(--ink-soft);
  max-width: 620px;
}
.hero--center .hero-text .lede { margin-left: auto; margin-right: auto; }
.hero-text .hero-docs {
  font-size: 15px;
  line-height: 1.47;
  color: var(--ink-muted);
  margin-top: 14px;
  max-width: 560px;
}
.hero--center .hero-text .hero-docs { margin-left: auto; margin-right: auto; }

/* Overlay text when media is the backdrop */
.hero--has-media:not(.hero--split):not(.hero--split-reverse) .hero-text {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.hero--has-media:not(.hero--split):not(.hero--split-reverse) .hero-text h2,
.hero--has-media:not(.hero--split):not(.hero--split-reverse) .hero-text h1 { color: #fff; }
.hero--has-media:not(.hero--split):not(.hero--split-reverse) .hero-text .lede,
.hero--has-media:not(.hero--split):not(.hero--split-reverse) .hero-text .hero-docs {
  color: rgba(255, 255, 255, 0.9);
}
.hero--has-media:not(.hero--split):not(.hero--split-reverse) .hero-text .eyebrow {
  color: #fff;
  opacity: 0.85;
}

/* Dark theme — black tile, white text */
.hero--dark { background: var(--hero-bg, #000); color: #f5f5f7; }
.hero--dark .hero-text h2,
.hero--dark .hero-text h1 { color: #f5f5f7; text-shadow: none; }
.hero--dark .hero-text .lede { color: #a1a1a6; text-shadow: none; }
.hero--dark .hero-text .hero-docs { color: #86868b; }
.hero--dark .hero-text .eyebrow { color: #2997ff; opacity: 1; }
.hero--dark .btn--link { color: #2997ff; }
.hero--dark.hero--text-only .hero-text { text-shadow: none; }

/* Light theme — force white background tile */
.hero--light { background: var(--hero-bg, #fbfbfd); color: var(--ink); }
.hero--light .hero-text h2,
.hero--light .hero-text h1 { color: var(--ink); text-shadow: none; }
.hero--light .hero-text .lede { color: var(--ink-soft); text-shadow: none; }

/* Text-only hero — roomier, no media overlay. Sits inside the main grid
   just like media-backed heroes so left/right edges line up. Use
   `bleed` keyword → .hero--bleed to break out to the viewport edges. */
.hero--text-only {
  min-height: 420px;
  padding: 96px 40px;
}
.hero--text-only .hero-text h2,
.hero--text-only .hero-text h1 {
  font-size: clamp(44px, 6.8vw, 80px);
}

/* Full-bleed — block spans the full viewport width & height, no radius.
   Parameter on any block that supports it (hero, text-block, numbers,
   timeline, countdown, calendar, clock, video). Combine with `tall`
   keyword → 100vh exactly. */
.hero.hero--bleed,
.text-block.text-block--bleed,
.numbers.numbers--bleed,
.timeline.timeline--bleed,
.countdown.countdown--bleed,
.calendar-block.calendar-block--bleed,
.clock.clock--bleed,
.video.video--bleed,
.cards.cards--bleed,
.gallery.gallery--bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: calc(100vh - var(--nav-h));
  border-radius: 0;
}
.hero--bleed.hero--short { min-height: calc((100vh - var(--nav-h)) / 3); }
.hero--bleed.hero--half { min-height: calc((100vh - var(--nav-h)) / 2); }
.hero--bleed.hero--three-quarters { min-height: calc((100vh - var(--nav-h)) * 0.75); }
@media (orientation: portrait) {
  #valla_title.hero--bleed { min-height: calc((100vh - var(--nav-h)) / 2); }
}
.hero--flush { margin-top: -64px; }
.hero--no-text { padding: 0; }
.hero--no-text .hero-media::after { content: none !important; }
/* For no-text heroes the image IS the content (e.g. diagrams) — never crop it */
.hero--no-text .hero-media img { object-fit: contain; }
.hero--bleed.hero--tall,
.text-block--bleed.text-block--tall,
.numbers--bleed.numbers--tall,
.timeline--bleed.timeline--tall,
.countdown--bleed.countdown--tall,
.calendar-block--bleed.calendar-block--tall,
.clock--bleed.clock--tall,
.video--bleed.video--tall,
.cards--bleed.cards--tall,
.gallery--bleed.gallery--tall { min-height: 100vh; }
.text-block--tall,
.numbers--tall,
.timeline--tall,
.countdown--tall,
.calendar-block--tall,
.clock--tall,
.video--tall,
.cards--tall,
.gallery--tall { min-height: 680px; }
.hero--bleed.hero--split .hero-split,
.hero--bleed.hero--split-reverse .hero-split { min-height: calc(100vh - var(--nav-h)); }
.hero--bleed.hero--hd { aspect-ratio: auto; }

/* Split / split-reverse — 50/50 media + text inside a single tile */
.hero--split,
.hero--split-reverse {
  padding: 0;
  min-height: 520px;
  display: block;
}
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}
.hero--tall.hero--split .hero-split,
.hero--tall.hero--split-reverse .hero-split { min-height: 680px; }
.hero-split > .hero-text {
  padding: 72px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  max-width: none;
  color: var(--ink);
  text-shadow: none;
}
.hero-split > .hero-text .lede { color: var(--ink-soft); max-width: none; }
.hero-split > .hero-text .hero-docs { max-width: none; }
.hero-split > .hero-media {
  position: relative;
  inset: auto;
  min-height: 320px;
}
.hero-split > .hero-media::after { content: none; }
.hero--split.hero--dark .hero-split > .hero-text,
.hero--split-reverse.hero--dark .hero-split > .hero-text { color: #f5f5f7; }
.hero--split.hero--dark .hero-split > .hero-text h2,
.hero--split.hero--dark .hero-split > .hero-text h1,
.hero--split-reverse.hero--dark .hero-split > .hero-text h2,
.hero--split-reverse.hero--dark .hero-split > .hero-text h1 { color: #f5f5f7; }
.hero--split.hero--dark .hero-split > .hero-text .lede,
.hero--split-reverse.hero--dark .hero-split > .hero-text .lede { color: #a1a1a6; }

/* Half-width tile — sized to sit in hero-pair grid */
.hero--half {
  min-height: 560px;
  padding: 56px 40px;
}
.hero--half.hero--text-only { padding: 72px 40px; }
.hero-pair .hero--half .hero-text h2,
.hero-pair .hero--half .hero-text h1 { font-size: clamp(32px, 3.4vw, 48px); }
.hero-pair .hero--half .hero-text .lede { font-size: 19px; }

/* Pair container — N half/third tiles side by side (cols tag → CSS var) */
.hero-pair {
  display: grid;
  grid-template-columns: repeat(var(--hero-pair-cols, 2), minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.hero-pair:last-child { margin-bottom: 56px; }
.hero-pair .hero { margin-bottom: 0; height: 100%; }

/* Slideshow — cycles through hero slides with cross-fade.
   Each slide is a regular hero, layered absolutely; only the active
   one is opaque and interactive. */
.hero-slideshow {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 12px;
  isolation: isolate;
  min-height: 520px;
}
.hero-slideshow:last-child { margin-bottom: 56px; }
.hero-slideshow + .hero,
.hero + .hero-slideshow,
.hero-pair + .hero-slideshow,
.hero-slideshow + .hero-pair,
.hero-slideshow + .hero-slideshow { margin-top: 0; }

.hero-slideshow--tall { min-height: 680px; }
.hero-slideshow--hd { aspect-ratio: 16 / 9; min-height: 0; }

/* Square — 1:1 frame, capped width so it stays a comfortable size on
   wide screens but fills the container on narrow ones. */
.hero-slideshow--square {
  aspect-ratio: 1 / 1;
  min-height: 0;
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  background: #000;
}

/* Square + bleed — fill the viewport width. Height follows the image's
   natural aspect (no letterboxing), so 100vw of image, edge to edge. */
.hero-slideshow--square.hero-slideshow--bleed {
  aspect-ratio: auto;
  border-radius: 0;
  max-width: none;
  width: 100vw;
  height: auto;
  min-height: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* When contain + bleed: layer slides via grid so the slideshow grows to
   the image's natural height at full width. Image renders in flow at
   100% width, height auto — no object-fit letterbox. */
.hero-slideshow--contain.hero-slideshow--bleed .hero-slideshow__track {
  display: grid;
  grid-template-areas: "stack";
}
.hero-slideshow--contain.hero-slideshow--bleed .hero-slideshow__slide {
  position: relative;
  inset: auto;
  grid-area: stack;
  width: 100%;
}
.hero-slideshow--contain.hero-slideshow--bleed .hero-slideshow__slide > .hero {
  padding: 0;
  height: auto;
  min-height: 0;
}
.hero-slideshow--contain.hero-slideshow--bleed .hero-media {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
}
.hero-slideshow--contain.hero-slideshow--bleed .hero-media img {
  width: 100%;
  height: auto;
  object-fit: initial;
  background: transparent;
  display: block;
}

/* Slow — long, cinematic cross-fade between slides. */
.hero-slideshow--slow .hero-slideshow__slide {
  transition: opacity 2400ms ease-in-out;
}
.hero-slideshow--slow.hero-slideshow--slide .hero-slideshow__slide {
  transition: transform 2400ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 1600ms ease-in-out;
}

/* Contain — show the entire image without cropping (letterbox bars).
   Pairs with --square but works at any aspect. */
.hero-slideshow--contain { background: #000; }
.hero-slideshow--contain .hero-media img {
  object-fit: contain;
  background: #000;
}
.hero-slideshow--contain .hero-media::after { content: none !important; }
.hero-slideshow--contain .hero-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 28px 40px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
}

.hero-slideshow--bleed {
  border-radius: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: calc(100vh - var(--nav-h));
}
.hero-slideshow--bleed.hero-slideshow--hd { aspect-ratio: auto; }

/* Flush — sit edge-to-edge against the top of the page (under the nav)
   with no gap below. Top offset matches main's top padding
   (64px desktop, 40px mobile). */
.hero-slideshow--flush { margin-top: -64px; margin-bottom: 0; }
.hero-slideshow--flush + .d15,
.hero-slideshow--flush + .hero,
.hero-slideshow--flush + .hero-pair { margin-top: 0; }
@media (max-width: 680px) {
  .hero-slideshow--flush { margin-top: -40px; }
}

.hero-slideshow__track {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.hero-slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}
.hero-slideshow__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* Inner hero inside a slide should fill the frame edge-to-edge
   without doubled rounding or doubled bottom margin. */
.hero-slideshow__slide > .hero {
  margin: 0;
  border-radius: 0;
  width: 100%;
  height: 100%;
  min-height: inherit;
}
/* Slide variant: horizontal swipe instead of fade. */
.hero-slideshow--slide .hero-slideshow__slide {
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 400ms ease;
  transform: translateX(100%);
}
.hero-slideshow--slide .hero-slideshow__slide.is-active {
  transform: translateX(0);
}
.hero-slideshow--slide .hero-slideshow__slide.is-prev {
  transform: translateX(-100%);
}

/* Arrow controls */
.hero-slideshow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: background 200ms ease, transform 200ms ease, opacity 200ms ease;
  opacity: 0;
}
.hero-slideshow:hover .hero-slideshow__arrow,
.hero-slideshow:focus-within .hero-slideshow__arrow {
  opacity: 1;
}
.hero-slideshow__arrow:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: translateY(-50%) scale(1.05);
}
.hero-slideshow__arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  opacity: 1;
}
.hero-slideshow__arrow--prev { left: 16px; }
.hero-slideshow__arrow--next { right: 16px; }

/* Dot indicators */
.hero-slideshow__dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.hero-slideshow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
  transition: background 200ms ease, width 200ms ease;
}
.hero-slideshow__dot:hover { background: rgba(255, 255, 255, 0.75); }
.hero-slideshow__dot.is-active {
  background: #fff;
  width: 22px;
  border-radius: 4px;
}
.hero-slideshow__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .hero-slideshow { min-height: 420px; }
  .hero-slideshow--tall { min-height: 560px; }
  .hero-slideshow__arrow {
    width: 36px;
    height: 36px;
    font-size: 22px;
    opacity: 1;
    background: rgba(255, 255, 255, 0.22);
  }
  .hero-slideshow__arrow--prev { left: 10px; }
  .hero-slideshow__arrow--next { right: 10px; }
  .hero-slideshow__dots { bottom: 14px; padding: 6px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slideshow__slide,
  .hero-slideshow--slide .hero-slideshow__slide {
    transition: opacity 200ms ease;
    transform: none;
  }
}

/* HD — locks 16:9 aspect ratio across full / half / split / text-only */
.hero--hd {
  aspect-ratio: 16 / 9;
  min-height: 0;
  height: auto;
}
.hero--hd.hero--tall { aspect-ratio: 16 / 9; min-height: 0; }
.hero--hd.hero--text-only { padding: 6% 8%; min-height: 0; }
.hero--hd.hero--full,
.hero--hd.hero--half { padding: 5% 6%; }
.hero--hd.hero--split,
.hero--hd.hero--split-reverse { padding: 0; }
.hero--hd .hero-split { min-height: 0; height: 100%; }
.hero--hd.hero--tall.hero--split .hero-split,
.hero--hd.hero--tall.hero--split-reverse .hero-split { min-height: 0; }
.hero--hd .hero-split > .hero-text { padding: 6% 7%; }
.hero--hd .hero-split > .hero-media { min-height: 0; }
.hero-pair .hero--hd { aspect-ratio: 16 / 9; }
.hero--hd .hero-text h2,
.hero--hd .hero-text h1 { font-size: clamp(28px, 4.2vw, 64px); }
.hero--hd.hero--half .hero-text h2,
.hero--hd.hero--half .hero-text h1 { font-size: clamp(22px, 2.6vw, 38px); }
.hero-pair[style*="--hero-pair-cols:3"] .hero--hd .hero-text h2,
.hero-pair[style*="--hero-pair-cols:3"] .hero--hd .hero-text h1,
.hero-pair[style*="--hero-pair-cols:4"] .hero--hd .hero-text h2,
.hero-pair[style*="--hero-pair-cols:4"] .hero--hd .hero-text h1 {
  font-size: clamp(18px, 1.8vw, 28px);
}
.hero-pair[style*="--hero-pair-cols:3"] .hero--hd .hero-text .lede,
.hero-pair[style*="--hero-pair-cols:4"] .hero--hd .hero-text .lede {
  font-size: 15px;
}

/* H2 — half HD height (32:9 banner strip) */
.hero--h2 {
  aspect-ratio: 32 / 9;
  min-height: 180px;
  max-height: 360px;
  height: auto;
  max-width: 1280px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.hero--h2.hero--bleed { max-width: none; }
.hero-pair > .hero--h2 { max-width: none; }
.hero--h2.hero--tall { aspect-ratio: 32 / 9; min-height: 180px; max-height: 400px; }
.hero--h2.hero--text-only { padding: 28px 40px 32px; min-height: 180px; }
.hero--h2.hero--full,
.hero--h2.hero--half { padding: 24px 36px 30px; }
.hero--h2.hero--split,
.hero--h2.hero--split-reverse { padding: 0; }
.hero--h2 .hero-split { min-height: 0; height: 100%; }
.hero--h2 .hero-split > .hero-text { padding: 5% 6%; }
.hero--h2 .hero-split > .hero-media { min-height: 0; }
.hero-pair .hero--h2 { aspect-ratio: 32 / 9; }
.hero--h2 .hero-text h2,
.hero--h2 .hero-text h1 { font-size: clamp(20px, 2.8vw, 36px); }
.hero--h2 .hero-text .lede { font-size: clamp(13px, 1.3vw, 16px); margin-top: 8px; }
.hero--h2 .eyebrow { margin-bottom: 6px; }

/* H4 — quarter HD height (64:9 ultra-wide banner) */
.hero--h4 {
  aspect-ratio: 64 / 9;
  min-height: 140px;
  max-height: 220px;
  height: auto;
  max-width: 1080px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.hero--h4.hero--bleed { max-width: none; }
.hero-pair > .hero--h4 { max-width: none; }
.hero--h4 .hero-text h2,
.hero--h4 .hero-text h1 { margin-bottom: 4px; }
.hero--h4.hero--tall { aspect-ratio: 64 / 9; min-height: 140px; max-height: 240px; }
.hero--h4.hero--text-only { padding: 22px 32px 26px; min-height: 140px; }
.hero--h4.hero--full,
.hero--h4.hero--half { padding: 20px 32px 26px; }
.hero--h4.hero--split,
.hero--h4.hero--split-reverse { padding: 0; }
.hero--h4 .hero-split { min-height: 0; height: 100%; }
.hero--h4 .hero-split > .hero-text { padding: 3% 5%; }
.hero--h4 .hero-split > .hero-media { min-height: 0; }
.hero-pair .hero--h4 { aspect-ratio: 64 / 9; }
.hero--h4 .hero-text h2,
.hero--h4 .hero-text h1 { font-size: clamp(15px, 1.8vw, 24px); line-height: 1.15; }
.hero--h4 .hero-text .lede {
  font-size: clamp(12px, 1vw, 14px);
  margin-top: 4px;
  max-width: none;
}
.hero--h4 .eyebrow { margin-bottom: 4px; font-size: 10px; }
.hero--h4 .hero-actions { margin-top: 8px; gap: 12px; }
.hero--h4 .btn { font-size: 13px; padding: 7px 14px; }

/* Actions row (CTAs) */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
  align-items: center;
}
.hero--center .hero-actions { justify-content: center; }
.hero--right .hero-actions,
.hero--pos-top-right .hero-actions,
.hero--pos-bottom-right .hero-actions { justify-content: flex-end; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.022em;
  padding: 12px 22px;
  border-radius: 980px;
  transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
  white-space: nowrap;
}
.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-hover); text-decoration: none; }
.btn--link {
  color: var(--accent);
  padding: 0;
  background: transparent;
  font-size: 17px;
}
.btn--link:hover { text-decoration: underline; }
.hero--has-media:not(.hero--split):not(.hero--split-reverse) .btn--link { color: #fff; }

/* ------------------------------------------------------------------
 * Text blocks — Apple-style typographic surfaces
 * Size (display | large | default | compact | caption),
 * layout (single | wide | two-col | narrow),
 * align (center | left | right),
 * theme (dark | light).
 * ------------------------------------------------------------------ */
.text-block {
  position: relative;
  border-radius: 24px;
  padding: 96px 40px;
  margin-bottom: 12px;
  background: transparent;
  color: var(--ink);
}
.text-block:last-child { margin-bottom: 56px; }

/* When a text-block introduces a card row (verticals, quadrants,
   taxonomy), the heading reads as that row's header — collapse the
   bottom padding so they form one tight block. The dark variant keeps
   its own padding-bottom rule (defined later, equal specificity, wins
   by source order). */
.text-block:has(+ .verticals),
.text-block:has(+ .quadrants),
.text-block:has(+ .taxonomy) {
  padding-bottom: 24px;
}

/* Triplet sandwich: text-block heading → hero diagram → text-block body.
   Collapse all interstitial padding so the three read as one tight unit. */
.text-block:has(+ .hero + .text-block) {
  padding-bottom: 16px;
  margin-bottom: 0;
}
.text-block + .hero:has(+ .text-block) {
  margin-top: 0;
  margin-bottom: 0;
}
.text-block + .hero + .text-block {
  padding-top: 16px;
}
.text-block + .text-block,
.text-pair + .text-block,
.text-block + .text-pair { margin-top: 0; }

/* Flush — the next text-block is read as a continuation of the previous
   element (display headline → standfirst, statement → body, gallery/grid
   → caption). Collapse the interstitial padding/margin so the two read
   as one unit. */
.text-block--flush { padding-top: 16px; }
.text-block:has(+ .text-block--flush) { padding-bottom: 24px; }
.container-grid:has(+ .text-block--flush) { margin-bottom: 0; }

.text-block-inner { margin: 0 auto; }
.text-block--center .text-block-inner { text-align: center; }
.text-block--left .text-block-inner { text-align: left; }
.text-block--right .text-block-inner { text-align: right; margin-left: auto; }

.text-block--center .hero-actions { justify-content: center; }
.text-block--right .hero-actions { justify-content: flex-end; }

.text-block-logo { display: block; height: auto; margin: 0 0 28px; }
.text-block--center .text-block-logo { margin-left: auto; margin-right: auto; }
.text-block--right .text-block-logo { margin-left: auto; }
.text-block-logo--small { width: 128px; }
.text-block-logo--medium { width: 160px; }
.text-block-logo--large { width: 240px; }
@media (max-width: 720px) {
  .text-block-logo--small { width: 104px; }
  .text-block-logo--medium { width: 128px; }
  .text-block-logo--large { width: 180px; }
}

/* Layout — column width / arrangement */
.text-block--narrow .text-block-inner { max-width: 540px; }
.text-block--single .text-block-inner { max-width: 720px; }
.text-block--wide .text-block-inner { max-width: 820px; }
.text-block--two-col .text-block-inner { max-width: 980px; }
.text-block--two-col .text-body {
  column-count: 2;
  column-gap: 56px;
}
.text-block--two-col .text-body p { break-inside: avoid; }

.text-block--four-col .text-block-inner { max-width: 1280px; }
.text-block--four-col .text-body {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.text-block--four-col .text-body p { margin-bottom: 0; }
@media (max-width: 1024px) {
  .text-block--four-col .text-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .text-block--four-col .text-body { grid-template-columns: 1fr; gap: 22px; }
}

/* Typography defaults */
.text-block .eyebrow { color: var(--accent); margin-bottom: 14px; }
.text-block h2 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.07;
  color: var(--ink);
  margin-bottom: 20px;
}
.text-block .text-lede {
  font-size: 21px;
  line-height: 1.381;
  letter-spacing: 0.011em;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.text-block .text-body p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.text-block .text-body p:last-child { margin-bottom: 0; }
.text-block .text-attribution {
  font-size: 15px;
  color: var(--ink-muted);
  margin-top: 28px;
  font-style: italic;
}

/* Size — typography scale */
.text-block--display h2 {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.text-block--display .text-lede { font-size: 24px; line-height: 1.33; }
.text-block--large h2 { font-size: clamp(36px, 4.4vw, 56px); }
.text-block--default h2 { font-size: clamp(28px, 3vw, 40px); }
.text-block--compact { padding: 56px 40px; }
.text-block--compact h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  margin-bottom: 14px;
}
.text-block--compact .text-lede { font-size: 17px; margin-bottom: 16px; }
.text-block--compact .text-body p { font-size: 15px; line-height: 1.5; margin-bottom: 12px; }
.text-block--caption { padding: 28px 32px; border: 1px solid var(--rule); }
.text-block--caption h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.text-block--caption .text-lede {
  font-size: 13px;
  line-height: 1.47;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.text-block--caption .text-body p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

/* Theme */
.text-block--dark { background: #000; color: #f5f5f7; }
.text-block--dark h2 { color: #f5f5f7; }
.text-block--dark .text-lede { color: #d2d2d7; }
.text-block--dark .text-body p { color: #a1a1a6; }
.text-block--dark .eyebrow { color: #2997ff; }
.text-block--dark .text-attribution { color: #86868b; }
.text-block--dark .btn--link { color: #2997ff; }

.text-block--light { background: #fbfbfd; }

/* Pair — two text blocks side by side */
.text-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.text-pair:last-child { margin-bottom: 56px; }
.text-pair .text-block { margin-bottom: 0; height: 100%; }

/* ------------------------------------------------------------------
 * Numbers — quantitative factoid grid (KPIs, stats, specs)
 * cols tag → --numbers-cols (default 4). Each cell:
 *   item.name → eyebrow label (small uppercase)
 *   item.string → big number
 *   item.docs → unit/sublabel
 *   item.desc → optional explanatory line
 * ------------------------------------------------------------------ */
.numbers {
  position: relative;
  border-radius: 24px;
  padding: 80px 40px;
  margin-bottom: 12px;
  background: var(--numbers-bg, transparent);
  color: var(--ink);
}
.numbers:last-child { margin-bottom: 56px; }
.numbers + .numbers,
.numbers + .hero,
.hero + .numbers,
.text-block + .numbers,
.numbers + .text-block,
.numbers + .hero-pair,
.hero-pair + .numbers,
.numbers + .text-pair,
.text-pair + .numbers { margin-top: 0; }

.numbers-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.numbers--left .numbers-head { text-align: left; margin-left: 0; }
.numbers--right .numbers-head { text-align: right; margin-left: auto; margin-right: 0; }
.numbers-head .eyebrow { color: var(--accent); margin-bottom: 12px; }
.numbers-head h2 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.07;
  color: var(--ink);
  margin-bottom: 14px;
}
.numbers-head .lede {
  font-size: 19px;
  line-height: 1.421;
  letter-spacing: 0.011em;
  color: var(--ink-soft);
  max-width: 620px;
}
.numbers--center .numbers-head .lede { margin-left: auto; margin-right: auto; }

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(var(--numbers-cols, 4), minmax(0, 1fr));
  gap: 40px 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.number {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.numbers--center .number { align-items: center; text-align: center; }
.numbers--right .number { align-items: flex-end; text-align: right; }

.number-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.number-value {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(44px, 5.2vw, 76px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 10px;
}
.number-unit {
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink-soft);
  letter-spacing: 0.011em;
}
.number-desc {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-muted);
  margin-top: 10px;
  max-width: 28ch;
}

/* Tighter scale at higher column counts */
.numbers[style*="--numbers-cols:5"] .number-value,
.numbers[style*="--numbers-cols:6"] .number-value {
  font-size: clamp(28px, 3.2vw, 44px);
}
.numbers[style*="--numbers-cols:5"] .number-unit,
.numbers[style*="--numbers-cols:6"] .number-unit { font-size: 14px; }
.numbers[style*="--numbers-cols:5"] .number-label,
.numbers[style*="--numbers-cols:6"] .number-label { margin-bottom: 10px; }

/* Single-cell centerpiece */
.numbers[style*="--numbers-cols:1"] .number-value {
  font-size: clamp(72px, 11vw, 156px);
  margin-bottom: 18px;
}
.numbers[style*="--numbers-cols:1"] .number-unit { font-size: 21px; }

/* Theme */
.numbers--dark { background: var(--numbers-bg, #000); color: #f5f5f7; }
.numbers--dark .numbers-head h2 { color: #f5f5f7; }
.numbers--dark .numbers-head .lede { color: #d2d2d7; }
.numbers--dark .numbers-head .eyebrow { color: #2997ff; }
.numbers--dark .number-label { color: #86868b; }
.numbers--dark .number-value { color: #f5f5f7; }
.numbers--dark .number-unit { color: #a1a1a6; }
.numbers--dark .number-desc { color: #86868b; }

.numbers--light { background: var(--numbers-bg, #fbfbfd); }

/* Compact — tighter padding, no forced min-height even when bleed */
.numbers--compact { padding: 56px 40px; min-height: auto; }
.numbers--bleed.numbers--compact { min-height: auto; }
.numbers--compact .numbers-head { margin-bottom: 32px; }
.numbers--compact .number-value { font-size: clamp(32px, 3.6vw, 52px); }
.numbers--compact .numbers-grid { gap: 24px 28px; }

/* ------------------------------------------------------------------
 * D15 — status strip. Compact key/value bar that sits flush after
 * a hero. Blue label on top, large value below.
 * ------------------------------------------------------------------ */
.d15 {
  background: var(--d15-bg, #000);
  color: #f5f5f7;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 28px 40px;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 56px;
}
.hero + .d15,
.hero-pair + .d15 { margin-top: -12px; }
.panorama + .d15 { margin-top: 0; }
.d15-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 64px;
  max-width: 1200px;
  margin: 0 auto;
}
.d15--center .d15-row { justify-content: center; text-align: center; }
.d15--right .d15-row { justify-content: flex-end; text-align: right; }
.d15--edges { padding-left: 24px; padding-right: 24px; }
.d15--edges .d15-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  max-width: none;
  gap: 16px 64px;
}
.d15--edges .d15-row > :nth-child(n+3) { text-align: right; justify-self: end; }
@media (max-width: 640px) {
  .d15--edges .d15-row { grid-template-columns: 1fr; grid-auto-flow: row; }
  .d15--edges .d15-row > :nth-child(n+3) { text-align: left; justify-self: start; }
}
.d15-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.d15-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2997ff;
  margin: 0 0 8px;
}
.d15-value {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #f5f5f7;
  margin: 0;
}
.d15--light { background: var(--d15-bg, #fbfbfd); color: var(--ink); border-color: rgba(0, 0, 0, 0.06); }
.d15--light .d15-label { color: var(--accent); }
.d15--light .d15-value { color: var(--ink); }
@media (max-width: 640px) {
  .d15 { padding: 20px 24px; }
  .d15-row { gap: 18px 32px; }
}

/* ------------------------------------------------------------------
 * Temporal — timeline, countdown, calendar, clock.
 * Apple-style typographic surfaces with shared head pattern.
 * ------------------------------------------------------------------ */

/* Shared head treatment */
.timeline,
.countdown,
.calendar-block,
.clock {
  position: relative;
  border-radius: 24px;
  padding: 80px 40px;
  margin-bottom: 12px;
  background: transparent;
  color: var(--ink);
}
.timeline:last-child,
.countdown:last-child,
.calendar-block:last-child,
.clock:last-child { margin-bottom: 56px; }

.timeline + .timeline,
.timeline + .countdown,
.timeline + .calendar-block,
.timeline + .clock,
.countdown + .timeline,
.countdown + .countdown,
.countdown + .calendar-block,
.countdown + .clock,
.calendar-block + .timeline,
.calendar-block + .countdown,
.calendar-block + .calendar-block,
.calendar-block + .clock,
.clock + .timeline,
.clock + .countdown,
.clock + .calendar-block,
.clock + .clock,
.timeline + .hero, .hero + .timeline,
.timeline + .text-block, .text-block + .timeline,
.timeline + .numbers, .numbers + .timeline,
.countdown + .hero, .hero + .countdown,
.countdown + .text-block, .text-block + .countdown,
.countdown + .numbers, .numbers + .countdown,
.calendar-block + .hero, .hero + .calendar-block,
.calendar-block + .text-block, .text-block + .calendar-block,
.calendar-block + .numbers, .numbers + .calendar-block,
.clock + .hero, .hero + .clock,
.clock + .text-block, .text-block + .clock,
.clock + .numbers, .numbers + .clock { margin-top: 0; }

.timeline-head,
.countdown-head,
.calendar-head,
.clock-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.timeline-head .eyebrow,
.countdown-head .eyebrow,
.calendar-head .eyebrow,
.clock-head .eyebrow { color: var(--accent); margin-bottom: 12px; }

.timeline-head h2,
.countdown-head h2,
.calendar-head h2,
.clock-head h2 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.07;
  color: var(--ink);
  margin-bottom: 14px;
}
.timeline-head .lede,
.countdown-head .lede,
.calendar-head .lede,
.clock-head .lede {
  font-size: 19px;
  line-height: 1.421;
  letter-spacing: 0.011em;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------
 * Timeline — vertical phase list with nested events
 * ------------------------------------------------------------------ */
.timeline-phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.timeline-phase {
  position: relative;
  padding-left: 32px;
  border-left: 2px solid var(--rule);
}

.timeline-phase-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 24px;
  position: relative;
}
.timeline-phase-head::before {
  content: "";
  position: absolute;
  left: -41px;
  top: 8px;
  width: 18px;
  height: 18px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--bg);
}

.timeline-phase-num {
  font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 4px;
}

.timeline-phase-meta { flex: 1; min-width: 0; }
.timeline-phase-meta h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 6px;
  text-transform: capitalize;
}
.timeline-phase-range {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.timeline-phase-string {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
}

.timeline-phase--past { opacity: 0.55; }
.timeline-phase--past .timeline-phase-meta h3,
.timeline-phase--past .timeline-phase-range,
.timeline-phase--past .timeline-phase-string,
.timeline-phase--past .timeline-event-title,
.timeline-phase--past .timeline-event-string,
.timeline-phase--past .timeline-event-date,
.timeline-phase--past .timeline-event-time {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.timeline-phase--past .timeline-event-cta { pointer-events: none; opacity: 0.6; }

.timeline-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.timeline-event {
  position: relative;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding-left: 6px;
}
.timeline-event::before {
  content: "";
  position: absolute;
  left: -39px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--bg);
  border: 2px solid var(--ink-muted);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--bg);
}
.timeline-event--milestone::before {
  background: var(--ink);
  border-color: var(--ink);
}

.timeline-event-date {
  font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  text-transform: capitalize;
  font-variant-numeric: tabular-nums;
}
.timeline-event-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 4px;
  text-transform: capitalize;
}
.timeline-event-string {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-muted);
}
.timeline-event-time {
  display: block;
  font-size: 11px;
  margin-top: 3px;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.timeline-event-link {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: #0071e3;
  border-radius: 980px;
  text-decoration: none;
  line-height: 1;
}
.timeline-event-link:hover { background: #0077ed; }
.timeline--dark .timeline-event-link { background: #2997ff; color: #000; }
.timeline--dark .timeline-event-link:hover { background: #47a9ff; }
.timeline-event--zoom .timeline-event-title { font-weight: 600; }
.timeline-event-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}
.timeline-event-cta--mailto { background: #2D8CFF; }
.timeline-event-cta--mailto:hover { background: #1a75e8; transform: translateY(-1px); }
.timeline-event-cta--zoom { background: #2D8CFF; }
.timeline-event-cta--zoom:hover { background: #1a75e8; transform: translateY(-1px); }
.timeline-event-cta-icon { width: 28px; height: 28px; flex-shrink: 0; }

/* Timeline dark theme */
.timeline--dark { background: #000; color: #f5f5f7; }
.timeline--dark .timeline-head h2 { color: #f5f5f7; }
.timeline--dark .timeline-head .lede { color: #d2d2d7; }
.timeline--dark .timeline-head .eyebrow { color: #2997ff; }
.timeline--dark .timeline-phase { border-left-color: #2a2a2c; }
.timeline--dark .timeline-phase-head::before { box-shadow: 0 0 0 4px #000; background: #2997ff; }
.timeline--dark .timeline-phase-num { color: #2997ff; }
.timeline--dark .timeline-phase-meta h3 { color: #f5f5f7; }
.timeline--dark .timeline-phase-range { color: #86868b; }
.timeline--dark .timeline-phase-string { color: #a1a1a6; }
.timeline--dark .timeline-event::before { background: #000; border-color: #424245; box-shadow: 0 0 0 3px #000; }
.timeline--dark .timeline-event--milestone::before { background: #f5f5f7; border-color: #f5f5f7; }
.timeline--dark .timeline-event-date { color: #86868b; }
.timeline--dark .timeline-event-title { color: #f5f5f7; }
.timeline--dark .timeline-event-string { color: #86868b; }

/* ------------------------------------------------------------------
 * Countdown — D / H / M / S tiles, live ticking
 * ------------------------------------------------------------------ */
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
}

.countdown-cell {
  background: var(--bg-alt);
  border-radius: 20px;
  padding: 36px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.countdown-num {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.countdown-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.countdown-target {
  margin: 28px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.countdown-expired-msg {
  text-align: center;
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  color: var(--ink-muted);
  padding: 40px 0;
}

.countdown--dark { background: #000; color: #f5f5f7; }
.countdown--dark .countdown-head h2 { color: #f5f5f7; }
.countdown--dark .countdown-head .lede { color: #d2d2d7; }
.countdown--dark .countdown-head .eyebrow { color: #2997ff; }
.countdown--dark .countdown-cell { background: #1d1d1f; }
.countdown--dark .countdown-num { color: #f5f5f7; }
.countdown--dark .countdown-label { color: #86868b; }
.countdown--dark .countdown-target { color: #a1a1a6; }
.countdown--dark .countdown-expired-msg { color: #86868b; }

.countdown--light { background: #fbfbfd; }
.countdown--bleed.countdown--compact { min-height: 0; padding: 52px 40px; }
.countdown-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
  margin: 36px auto 0;
}
.countdown-zoom-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 36px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  flex-wrap: wrap;
}
.countdown-zoom-body { flex: 1; min-width: 200px; }
.countdown-zoom-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2997ff;
  margin-bottom: 8px;
}
.countdown-zoom-date {
  font-size: 24px;
  font-weight: 600;
  color: #f5f5f7;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  line-height: 1.2;
}
.countdown-zoom-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #a1a1a6;
}
.countdown-zoom-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #2D8CFF;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
.countdown-zoom-btn:hover { background: #1a75e8; transform: translateY(-1px); }
.countdown-zoom-btn--site { background: #2D8CFF; }
.countdown-zoom-btn--site:hover { background: #1a75e8; }
.countdown-zoom-eyebrow--site { color: #2997ff; }
.countdown-zoom-icon { width: 32px; height: 32px; flex-shrink: 0; }

/* ------------------------------------------------------------------
 * Calendar — month grid with event dots
 * ------------------------------------------------------------------ */
.calendar-months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px 32px;
  max-width: 1100px;
  margin: 0 auto;
}

.calendar-month {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.calendar-month-title {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: capitalize;
}

.calendar-dow,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-dow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}

.calendar-cell,
.calendar-blank {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 10px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.calendar-cell--has {
  background: rgba(0, 113, 227, 0.08);
  color: var(--accent);
  font-weight: 500;
}

.calendar-num { line-height: 1; }
.calendar-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.calendar-block--dark { background: #000; color: #f5f5f7; }
.calendar-block--dark .calendar-head h2 { color: #f5f5f7; }
.calendar-block--dark .calendar-head .lede { color: #d2d2d7; }
.calendar-block--dark .calendar-head .eyebrow { color: #2997ff; }
.calendar-block--dark .calendar-month-title { color: #f5f5f7; }
.calendar-block--dark .calendar-dow { color: #86868b; border-bottom-color: #2a2a2c; }
.calendar-block--dark .calendar-cell { color: #f5f5f7; }
.calendar-block--dark .calendar-cell--has {
  background: rgba(41, 151, 255, 0.18);
  color: #2997ff;
}
.calendar-block--dark .calendar-dot { background: #2997ff; }

.calendar-block--light { background: #fbfbfd; }

/* ------------------------------------------------------------------
 * Clock — multi-timezone live grid
 * ------------------------------------------------------------------ */
.clock-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--clock-cols, 3), minmax(0, 1fr));
  gap: 20px;
}

.clock-cell {
  background: var(--bg-alt);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clock-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.clock-time {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

.clock-date {
  font-size: 14px;
  color: var(--ink-soft);
  text-transform: capitalize;
}

.clock-sub {
  font-size: 13px;
  color: var(--ink-muted);
}

.clock--dark { background: #000; color: #f5f5f7; }
.clock--dark .clock-head h2 { color: #f5f5f7; }
.clock--dark .clock-head .lede { color: #d2d2d7; }
.clock--dark .clock-head .eyebrow { color: #2997ff; }
.clock--dark .clock-cell { background: #1d1d1f; }
.clock--dark .clock-label { color: #86868b; }
.clock--dark .clock-time { color: #f5f5f7; }
.clock--dark .clock-date { color: #d2d2d7; }
.clock--dark .clock-sub { color: #86868b; }

.clock--light { background: #fbfbfd; }

/* Process — integrated state banner + progress + month strip.
   Single SSOT: pod.start/end + milestone child pods (kind tag). */
.process {
  position: relative;
  border-radius: 24px;
  padding: 44px 48px 40px;
  background: var(--process-bg, linear-gradient(160deg, #f5f5f7 0%, #e8e8ed 100%));
  color: var(--ink);
  margin-bottom: 12px;
  isolation: isolate;
}
.process:last-child { margin-bottom: 56px; }
.process + .process,
.process + .hero, .hero + .process,
.process + .text-block, .text-block + .process,
.process + .timeline, .timeline + .process,
.process + .countdown, .countdown + .process,
.process + .calendar-block, .calendar-block + .process,
.process + .clock, .clock + .process,
.process + .cards, .cards + .process,
.process + .numbers, .numbers + .process { margin-top: 0; }
.process--bleed {
  border-radius: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(48px, 6vw);
  padding-right: max(48px, 6vw);
}

.process--dark {
  background: var(--process-bg, #0c0c0e);
  color: #f5f5f7;
}
.process--dark .eyebrow { color: #2997ff; }
.process .eyebrow { color: var(--accent); }

.process-head { margin-bottom: 12px; max-width: 820px; }
.process-state-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 500;
}
.process-state-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #86868b;
  flex: none;
  align-self: center;
}
.process-state-dot--pending { background: #a1a1a6; }
.process-state-dot--active {
  background: #30d158;
  box-shadow: 0 0 0 4px rgba(48, 209, 88, 0.18);
  animation: process-state-pulse 2s ease-in-out infinite;
}
.process-state-dot--done { background: #86868b; }
@keyframes process-state-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(48, 209, 88, 0.18); }
  50% { box-shadow: 0 0 0 10px rgba(48, 209, 88, 0); }
}
.process-state-label {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}
.process--active .process-state-label { color: #30d158; }
.process--dark .process-state-label { color: #86868b; }
.process--dark.process--active .process-state-label { color: #30d158; }
.process-headline {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.process--dark .process-headline { color: #f5f5f7; }

.process-title {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--ink);
}
.process--dark .process-title { color: #f5f5f7; }
.process .lede {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 640px;
}
.process--dark .lede { color: #a1a1a6; }

/* Progress rail */
.process-track {
  margin: 72px 12px 16px;
  position: relative;
}
.process-track-rail {
  position: relative;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
}
.process--dark .process-track-rail { background: rgba(255, 255, 255, 0.1); }
.process-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, #2997ff 0%, #30d158 100%);
  border-radius: 999px;
  transition: width 1s linear;
}
.process--pending .process-track-fill { display: none; }
.process--done .process-track-fill {
  background: linear-gradient(90deg, #86868b 0%, #6e6e73 100%);
}

.process-now {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  z-index: 4;
}
.process-now-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(48, 209, 88, 0.5);
}
.process--dark .process-now-dot {
  box-shadow: 0 0 0 3px #0c0c0e, 0 0 0 4px rgba(48, 209, 88, 0.55);
}
.process-now-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(48, 209, 88, 0.65);
  transform: translate(-50%, -50%);
  animation: process-now-pulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes process-now-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}
.process-now-label {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: #30d158;
  white-space: nowrap;
}

.process-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: block;
  cursor: default;
}
.process-marker-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #86868b;
  box-shadow: 0 0 0 3px #fff;
  transition: transform 0.2s ease;
}
.process--dark .process-marker-dot { box-shadow: 0 0 0 3px #0c0c0e; }
.process-marker--open     .process-marker-dot { background: #2997ff; }
.process-marker--close    .process-marker-dot { background: #ff453a; }
.process-marker--result   .process-marker-dot { background: #ff9f0a; }
.process-marker--contract .process-marker-dot { background: #bf5af2; }
.process-marker--submit   .process-marker-dot { background: #64d2ff; }
.process-marker--past .process-marker-dot { opacity: 0.45; }
.process-marker--next .process-marker-dot { transform: scale(1.35); }
.process-marker:hover .process-marker-dot { transform: scale(1.5); }

.process-marker-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
}
.process--dark .process-marker-label { color: #a1a1a6; }
.process-marker--above .process-marker-label { bottom: 18px; top: auto; }
.process-marker--below .process-marker-label { top: 18px; bottom: auto; }
.process-marker-name {
  display: block;
  font-weight: 500;
  color: var(--ink);
  font-size: 12px;
}
.process--dark .process-marker-name { color: #f5f5f7; }
.process-marker-date {
  display: block;
  font-size: 10px;
  letter-spacing: 0.03em;
}

.process-endpoints {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.process--dark .process-endpoints { color: #86868b; }

.process-months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px 24px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.process--dark .process-months { border-top-color: rgba(255, 255, 255, 0.1); }
.process-month-title {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
  font-weight: 600;
}
.process--dark .process-month-title { color: #86868b; }
.process-month-cells {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.process-day {
  font-size: 11px;
  text-align: center;
  padding: 6px 0;
  border-radius: 6px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.04);
  font-variant-numeric: tabular-nums;
}
.process--dark .process-day {
  color: #f5f5f7;
  background: rgba(255, 255, 255, 0.05);
}
.process-day--out { opacity: 0.25; }
.process-day--ms {
  font-weight: 600;
  color: #fff;
}
.process-day--open     { background: #2997ff; }
.process-day--close    { background: #ff453a; }
.process-day--result   { background: #ff9f0a; }
.process-day--contract { background: #bf5af2; }
.process-day--submit   { background: #64d2ff; }
.process-day--now {
  outline: 2px solid #30d158;
  outline-offset: -2px;
}

@media (max-width: 780px) {
  .process { padding: 32px 24px 28px; border-radius: 20px; }
  .process-track { margin: 56px 4px 14px; }
  .process-marker-label { display: none; }
  .process-marker--next .process-marker-label { display: block; }
  .process-months {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 24px;
  }
}

/* Program — integrated C0 banner + C1 countdown + C2 timeline from one SSOT. */
.program {
  position: relative;
  border-radius: 24px;
  background: var(--program-bg, linear-gradient(180deg, #0c0c0e 0%, #1a1a1d 52%, #fbfbfd 52%, #fbfbfd 100%));
  color: #f5f5f7;
  margin-bottom: 12px;
  isolation: isolate;
  overflow: hidden;
  max-width: 1280px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.program:last-child { margin-bottom: 56px; }
.program--bleed {
  max-width: none;
  border-radius: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.program + .program,
.program + .hero, .hero + .program,
.program + .text-block, .text-block + .program,
.program + .process, .process + .program { margin-top: 0; }

.program--light {
  background: var(--program-bg, linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 48%, #ffffff 48%, #ffffff 100%));
  color: var(--ink);
}

/* Banner region — mirrors .hero--h4.hero--dark look */
.program-banner {
  padding: 26px 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #f5f5f7;
}
.program--light .program-banner { color: var(--ink); }
.program-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #2997ff;
  margin-bottom: 6px;
}
.program--light .program-eyebrow { color: var(--accent); }
.program-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a1a1a6;
  display: inline-block;
  flex: none;
}
.program-pulse--pending { background: #a1a1a6; }
.program-pulse--active {
  background: #30d158;
  box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.25);
  animation: program-pulse 2s ease-in-out infinite;
}
.program-pulse--done { background: #86868b; }
@keyframes program-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.25); }
  50% { box-shadow: 0 0 0 8px rgba(48, 209, 88, 0); }
}
.program-title {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(18px, 2.1vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  color: inherit;
}
.program-lede {
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.45;
  color: #a1a1a6;
  margin: 4px 0 0;
  max-width: 640px;
}
.program--light .program-lede { color: var(--ink-soft); }
.program-docs {
  font-size: 13px;
  color: #86868b;
  margin: 6px 0 0;
  max-width: 560px;
}
.program-actions { margin-top: 12px; }
.program-actions .btn { font-size: 13px; padding: 7px 14px; }

/* Countdown strip — mirrors .countdown look */
.program-countdown {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 20px 36px 28px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.program--light .program-countdown {
  background: rgba(0, 0, 0, 0.02);
  border-top-color: rgba(0, 0, 0, 0.06);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
.program-countdown--done {
  grid-template-columns: 1fr;
  text-align: center;
  padding: 28px 36px;
}
.program-cd-head .eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2997ff;
  margin-bottom: 4px;
}
.program--light .program-cd-head .eyebrow { color: var(--accent); }
.program-cd-title {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 2px;
  color: #f5f5f7;
  letter-spacing: -0.005em;
}
.program--light .program-cd-title { color: var(--ink); }
.program-cd-meta {
  font-size: 12px;
  color: #86868b;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.program-cd-grid {
  display: flex;
  gap: 8px;
}
.program-cd-cell {
  min-width: 68px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.program--light .program-cd-cell { background: rgba(0, 0, 0, 0.04); }
.program-cd-num {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #f5f5f7;
  line-height: 1;
}
.program--light .program-cd-num { color: var(--ink); }
.program-cd-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #86868b;
}

/* Timeline region — mirrors .timeline phases, on light background */
.program-phases {
  list-style: none;
  padding: 40px 36px 48px;
  margin: 0;
  background: #f0f0f2;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 44px;
  border-radius: 0 0 24px 24px;
}
.program--bleed .program-phases { border-radius: 0; }
.program--light .program-phases { background: #f2f2f4; }

.program-phase {
  position: relative;
  padding-left: 40px;
  border-left: 2px solid rgba(0, 0, 0, 0.12);
}
.program-phase-num {
  position: absolute;
  left: -9px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f0f0f2;
  border: 2px solid rgba(0, 0, 0, 0.2);
  font-size: 0;
  box-shadow: 0 0 0 3px #f0f0f2;
}
.program--light .program-phase-num {
  background: #f2f2f4;
  box-shadow: 0 0 0 3px #f2f2f4;
}
.program-phase--past .program-phase-num {
  background: #86868b;
  border-color: #86868b;
}
.program-phase--active .program-phase-num {
  background: #30d158;
  border-color: #30d158;
  box-shadow: 0 0 0 3px #f0f0f2, 0 0 0 6px rgba(48, 209, 88, 0.2);
  animation: program-pulse-phase 2s ease-in-out infinite;
}
@keyframes program-pulse-phase {
  0%, 100% { box-shadow: 0 0 0 3px #f0f0f2, 0 0 0 6px rgba(48, 209, 88, 0.25); }
  50% { box-shadow: 0 0 0 3px #f0f0f2, 0 0 0 12px rgba(48, 209, 88, 0); }
}
.program-phase-meta h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.program-phase-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.program-phase-tag {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: var(--ink-soft);
}
.program-phase-tag--past {
  background: rgba(134, 134, 139, 0.15);
  color: #6e6e73;
}
.program-phase-tag--active {
  background: rgba(48, 209, 88, 0.15);
  color: #248a3d;
}
.program-phase-tag--upcoming {
  background: rgba(41, 151, 255, 0.14);
  color: #1a6fbf;
}
.program-phase-range {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 4px 0 0;
  letter-spacing: 0.02em;
}
.program-phase-string {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 8px 0 0;
  line-height: 1.5;
  max-width: 640px;
}
.program-phase--past .program-phase-meta h3,
.program-phase--past .program-phase-string { color: #86868b; }

.program-events {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.program-event {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  position: relative;
  padding-left: 22px;
}
.program-event::before {
  content: "";
  position: absolute;
  left: -46px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f0f0f2;
  border: 2px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 3px #f0f0f2;
}
.program--light .program-event::before {
  background: #f2f2f4;
  box-shadow: 0 0 0 3px #f2f2f4;
}
.program-event--past::before {
  background: #86868b;
  border-color: #86868b;
}
.program-event--close::before {
  background: #ff453a;
  border-color: #ff453a;
}
.program-event--next::before {
  background: #ff453a;
  border-color: #ff453a;
  animation: program-pulse-next 1.8s ease-in-out infinite;
}
@keyframes program-pulse-next {
  0%, 100% { box-shadow: 0 0 0 3px #f0f0f2, 0 0 0 6px rgba(255, 69, 58, 0.3); }
  50% { box-shadow: 0 0 0 3px #f0f0f2, 0 0 0 12px rgba(255, 69, 58, 0); }
}
.program-event-date {
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding-top: 2px;
  text-transform: capitalize;
}
.program-event--past .program-event-date,
.program-event--past .program-event-title,
.program-event--past .program-event-string { opacity: 0.55; }
.program-event-title {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.program-event--close .program-event-title { color: #d0311f; font-weight: 600; }
.program-event-string {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 3px 0 0;
  line-height: 1.45;
}

@media (max-width: 780px) {
  .program { border-radius: 20px; }
  .program-banner { padding: 22px 22px 20px; }
  .program-countdown {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 22px 22px;
  }
  .program-cd-grid { justify-content: flex-start; }
  .program-cd-cell { min-width: 62px; padding: 10px 10px; }
  .program-cd-num { font-size: 22px; }
  .program-phases { padding: 32px 22px 40px; gap: 36px; border-radius: 0 0 20px 20px; }
  .program-phase-meta h3 { font-size: 19px; }
  .program-event {
    grid-template-columns: 1fr;
    gap: 2px;
    padding-left: 18px;
  }
  .program-event::before { left: -12px; top: 5px; width: 8px; height: 8px; }
}

/* Cards section */
.cards {
  margin-bottom: 12px;
}
.cards:last-child { margin-bottom: 56px; }
.cards + .cards,
.cards + .hero,
.hero + .cards,
.cards + .text-block,
.text-block + .cards,
.cards + .numbers,
.numbers + .cards,
.cards + .timeline,
.timeline + .cards,
.cards + .countdown,
.countdown + .cards,
.cards + .calendar-block,
.calendar-block + .cards,
.cards + .clock,
.clock + .cards,
.cards + .gallery,
.gallery + .cards,
.cards + .video,
.video + .cards { margin-top: 0; }

/* Filled variant — activates when `bg` is set so the color/gradient has
   breathing room around the grid. Also used by the `bleed` keyword. */
.cards--filled,
.cards--bleed {
  padding: 80px 40px;
  border-radius: 24px;
}
.cards--bleed { border-radius: 0; }

.cards-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
}

.cards-head h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}

.cards-head .lede {
  font-size: 17px;
  line-height: 1.47;
  color: var(--ink-muted);
}

.cards-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(var(--cards-cols, 3), minmax(0, 1fr));
  gap: 20px;
}

.card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, transform 0.1s ease;
}

.card:hover { border-color: var(--ink-muted); }

.card-media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-body h4 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.card-body p {
  font-size: 15px;
  line-height: 1.47;
  color: var(--ink-soft);
}

.card-meta {
  font-size: 14px;
  color: var(--ink-muted);
}

.card-meta a { color: var(--accent); }

/* quadrants — 2×2 image-backed cards with dark veil for legibility.
   Title (h-scale) + short paragraph per cell. Used as a feature
   summary block before deeper sections like the configurator. */
.quadrants { margin-bottom: 12px; }
.quadrants:last-child { margin-bottom: 56px; }
.quadrants + .quadrants,
.quadrants + .text-block, .text-block + .quadrants,
.quadrants + .configurator, .configurator + .quadrants,
.quadrants + .numbers, .numbers + .quadrants,
.quadrants + .d6, .d6 + .quadrants,
.quadrants + .hero, .hero + .quadrants { margin-top: 0; }

.quadrants--bleed {
  padding: 0;
  border-radius: 0;
}

.quadrants-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
}
.quadrants-head h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}
.quadrants-head .lede {
  font-size: 17px;
  line-height: 1.47;
  color: var(--ink-muted);
}

.quadrants-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(var(--quadrants-cols, 2), minmax(0, 1fr));
  gap: 20px;
}

.quadrant-cell {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  background-color: #0f0f10;
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  align-items: flex-end;
}
.quadrant-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.15) 38%,
    rgba(0, 0, 0, 0.65) 78%,
    rgba(0, 0, 0, 0.85) 100%
  );
  z-index: 1;
}
.quadrant-cell--bg .quadrant-veil { background: none; }
.quadrant-body {
  position: relative;
  z-index: 2;
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quadrant-title {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}
.quadrant-text {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  max-width: 44ch;
}

@media (max-width: 1024px) {
  .quadrants-grid { grid-template-columns: repeat(min(var(--quadrants-cols, 2), 2), minmax(0, 1fr)); }
  .quadrant-cell--span-2 { grid-column: span 2; aspect-ratio: 2 / 1; }
}
@media (max-width: 640px) {
  .quadrants-grid { grid-template-columns: 1fr; }
  .quadrant-cell--span-2 { grid-column: auto; aspect-ratio: 1 / 1; }
  .quadrant-body { padding: 22px 22px 24px; }
  .quadrant-title { font-size: 21px; }
}

/* verticals — minimalist card grid for specialized agent verticals.
   Title + short blurb per card, optional badge for integrations
   (e.g. VTEX). Defaults to 4 columns; collapses 4→2→1. */
.verticals { margin-bottom: 12px; }
.verticals:last-child { margin-bottom: 56px; }
.verticals + .verticals,
.verticals + .text-block, .text-block + .verticals,
.verticals + .quadrants, .quadrants + .verticals,
.verticals + .taxonomy, .taxonomy + .verticals,
.verticals + .configurator, .configurator + .verticals { margin-top: 0; }

.verticals-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
}
.verticals-head h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}
.verticals-head .lede {
  font-size: 17px;
  line-height: 1.47;
  color: var(--ink-muted);
}

.verticals-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(var(--verticals-cols, 4), minmax(0, 1fr));
  gap: 16px;
}

.vertical-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 22px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.vertical-card:hover {
  border-color: var(--ink-muted);
  transform: translateY(-1px);
}
.vertical-logo {
  height: 28px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 6px;
  opacity: 0.9;
}
.vertical-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.vertical-title {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.vertical-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(0, 113, 227, 0.08);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.vertical-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 1024px) {
  .verticals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vertical-card--span-2 { grid-column: span 2; }
}
@media (max-width: 640px) {
  .verticals-grid { grid-template-columns: 1fr; }
  .vertical-card--span-2 { grid-column: auto; }
}

.vertical-card--bg {
  border-color: transparent;
  color: #fff;
}
.vertical-card--bg:hover { border-color: rgba(255, 255, 255, 0.32); }
.vertical-card--bg .vertical-title { color: #fff; }
.vertical-card--bg .vertical-text { color: rgba(255, 255, 255, 0.86); }
.vertical-card--bg .vertical-badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}
.vertical-card--bg .vertical-logo { filter: brightness(0) invert(1); opacity: 0.92; }

/* Dark theme — pairs with .text-block--dark so a tinted intro flows
   continuously into its card row. */
.verticals--dark {
  padding: 0 40px 96px;
  margin-bottom: 12px;
}
.verticals--dark .verticals-head h3 { color: #f5f5f7; }
.verticals--dark .verticals-head .lede { color: #d2d2d7; }
.verticals--dark .vertical-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.verticals--dark .vertical-card:hover { border-color: rgba(255, 255, 255, 0.28); }
.verticals--dark .vertical-title { color: #f5f5f7; }
.verticals--dark .vertical-text { color: #d2d2d7; }
.verticals--dark .vertical-badge {
  color: #2997ff;
  background: rgba(41, 151, 255, 0.14);
}
.verticals--dark .vertical-logo {
  filter: invert(1) brightness(1.6);
  opacity: 0.85;
}

/* Seamless join: when a dark text-block is followed by a dark verticals,
   collapse the gap and merge their rounded shells into a single card —
   the text-block contributes the top corners, the verticals the bottom. */
.text-block--dark:has(+ .verticals--dark) {
  margin-bottom: 0;
  padding-bottom: 40px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.text-block--dark + .verticals--dark {
  margin-top: 0;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

/* Breathing room before a dark Licenciamiento band that follows a light
   verticals row (e.g. tecnologia → licenciamiento). Overrides the
   collapsed gap rule above. */
.verticals + .text-block--dark { margin-top: 64px; }

/* taxonomy — categorized key/value cards. Used to render a sample
   profile (demografía, comportamiento, etc.) where each category is
   a card with a definition list inside. */
.taxonomy { margin-bottom: 12px; }
.taxonomy:last-child { margin-bottom: 56px; }
.taxonomy + .taxonomy,
.taxonomy + .text-block, .text-block + .taxonomy,
.taxonomy + .quadrants, .quadrants + .taxonomy,
.taxonomy + .configurator, .configurator + .taxonomy { margin-top: 0; }

.taxonomy-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
}
.taxonomy-head h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}
.taxonomy-head .lede {
  font-size: 17px;
  line-height: 1.47;
  color: var(--ink-muted);
}

.taxonomy-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(var(--taxonomy-cols, 3), minmax(0, 1fr));
  gap: 16px;
}

.taxonomy-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.taxonomy-cat {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.taxonomy-pairs {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.taxonomy-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.taxonomy-pair:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.taxonomy-pair dt {
  font-size: 14px;
  color: var(--ink-muted);
  margin: 0;
}
.taxonomy-pair dd {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  text-align: right;
}

@media (max-width: 1024px) {
  .taxonomy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .taxonomy-grid { grid-template-columns: 1fr; }
}

/* d6 — 3×2 linked tile grid. Image + name per tile, each tile links
   to a top-level section. Used on overview pages to surface lots. */
.d6 { margin-bottom: 12px; }
.d6:last-child { margin-bottom: 56px; }
.d6 + .d6,
.d6 + .hero, .hero + .d6,
.d6 + .cards, .cards + .d6,
.d6 + .numbers, .numbers + .d6,
.d6 + .timeline, .timeline + .d6,
.d6 + .countdown, .countdown + .d6,
.d6 + .text-block, .text-block + .d6 { margin-top: 0; }

.d6--filled,
.d6--bleed {
  padding: 80px 40px;
  border-radius: 24px;
}
.d6--bleed { border-radius: 0; }

.d6-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
}
.d6-head h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}
.d6-head .lede {
  font-size: 17px;
  line-height: 1.47;
  color: var(--ink-muted);
}
.d6-docs {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 12px auto 0;
}

.d6-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(var(--d6-cols, 3), minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
}

.d6-tile { display: flex; }

.d6-link {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.d6-link:hover {
  border-color: var(--ink-muted);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
  text-decoration: none;
}
.d6-link:hover .d6-title { text-decoration: none; }
.d6-link:hover .d6-arrow { transform: translateX(4px); }

.d6-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0f0f10;
}
.d6-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.d6-media--contain img { object-fit: contain; padding: 18px; }
.d6-media--empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(1200px 200px at 50% -20%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(135deg, #1c1c1e 0%, #2c2c2e 50%, #1c1c1e 100%);
}
.d6-media-placeholder {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.65);
}

.d6-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.d6-title {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.d6-hint {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.d6-arrow {
  margin-top: auto;
  align-self: flex-start;
  color: var(--accent);
  font-size: 18px;
  transition: transform 0.18s ease;
}

@media (max-width: 1024px) {
  .d6-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .d6-grid { grid-template-columns: 1fr; }
  .d6-media { aspect-ratio: 16 / 9; }
  .d6--filled, .d6--bleed { padding: 48px 20px; }
}

/* Gallery */
.gallery {
  margin-bottom: 12px;
}
.gallery:last-child { margin-bottom: 56px; }
.gallery + .gallery,
.gallery + .hero,
.hero + .gallery,
.gallery + .text-block,
.text-block + .gallery,
.gallery + .numbers,
.numbers + .gallery,
.gallery + .timeline,
.timeline + .gallery,
.gallery + .countdown,
.countdown + .gallery,
.gallery + .calendar-block,
.calendar-block + .gallery,
.gallery + .clock,
.clock + .gallery,
.gallery + .video,
.video + .gallery { margin-top: 0; }

.gallery--filled,
.gallery--bleed {
  padding: 80px 40px;
  border-radius: 24px;
}
.gallery--bleed { border-radius: 0; }

.gallery-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
}

.gallery-head h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}

.gallery-head .lede {
  font-size: 17px;
  line-height: 1.47;
  color: var(--ink-muted);
}

.gallery-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 3), minmax(0, 1fr));
  gap: 14px;
}

.gallery-item { margin: 0; }

.gallery-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 16px;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform 0.18s ease;
  font: inherit;
  color: inherit;
}

.gallery-thumb:focus-visible {
  outline: 2px solid var(--accent, #06c);
  outline-offset: 2px;
}

.gallery-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-thumb:hover { transform: translateY(-2px); }
.gallery-thumb:hover img { transform: scale(1.04); }

.gallery-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  letter-spacing: -0.005em;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.gallery-thumb:hover .gallery-caption,
.gallery-thumb:focus-visible .gallery-caption { opacity: 1; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 40px 80px;
  animation: lightbox-fade 0.18s ease;
}

@keyframes lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox-figure {
  margin: 0;
  max-width: min(1400px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.lightbox-figure img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  object-fit: contain;
  display: block;
  animation: lightbox-pop 0.22s ease;
}

@keyframes lightbox-pop {
  from { transform: scale(0.98); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.lightbox-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #f5f5f7;
  text-align: center;
  max-width: 720px;
}

.lightbox-title {
  font-size: 17px;
  font-weight: 600;
  color: #f5f5f7;
  letter-spacing: -0.005em;
}

.lightbox-docs {
  font-size: 15px;
  line-height: 1.4;
  color: #d2d2d7;
}

.lightbox-credit {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #86868b;
  margin-top: 4px;
}

.lightbox-nav,
.lightbox-close {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #f5f5f7;
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.1s ease;
  line-height: 1;
  font-family: inherit;
}

.lightbox-nav:hover,
.lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox-nav:active,
.lightbox-close:active { transform: scale(0.96); }

.lightbox-nav {
  width: 48px;
  height: 48px;
  font-size: 32px;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-nav:active { transform: translateY(-50%) scale(0.96); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

.lightbox-close {
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  font-size: 24px;
}

.lightbox-counter {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: #86868b;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 780px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .gallery-caption { opacity: 1; padding: 10px 12px; font-size: 13px; }
  .lightbox { padding: 20px; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 26px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-counter { top: 16px; }
  .lightbox-figure img { max-height: 70vh; }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* Video section */
.video {
  margin-bottom: 12px;
}
.video:last-child { margin-bottom: 56px; }
.video + .video,
.video + .hero,
.hero + .video,
.video + .text-block,
.text-block + .video,
.video + .numbers,
.numbers + .video,
.video + .timeline,
.timeline + .video,
.video + .countdown,
.countdown + .video,
.video + .calendar-block,
.calendar-block + .video,
.video + .clock,
.clock + .video { margin-top: 0; }

.video--filled,
.video--bleed {
  padding: 80px 40px;
  border-radius: 24px;
}
.video--bleed { border-radius: 0; }
.video--bleed .video-frame { max-width: 1200px; margin: 0 auto; }

.video-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 24px;
}

.video-head h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}

.video-head .lede {
  font-size: 17px;
  line-height: 1.47;
  color: var(--ink-muted);
}

.video-frame {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
}

.video-frame .video-el,
.video-frame .video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.video-caption {
  max-width: 720px;
  margin: 16px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.47;
  color: var(--ink-muted);
}

.video-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: #a1a1a6;
  font-size: 14px;
}

/* Autoplay variant — ambient, no controls chrome, slightly softer frame */
.video--autoplay .video-frame {
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

/* Background video hero */
.video-bg {
  position: relative;
  width: 100%;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 24px;
  overflow: hidden;
  color: #fff;
  margin-bottom: 24px;
  isolation: isolate;
}

.video-bg--tall { min-height: 680px; }

.video-bg-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.video-bg-media .video-el {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* YouTube/Vimeo iframes can't be cropped with object-fit; scale so 16:9 always
   covers the container. One of the two dimensions will be larger than the
   container and bleed — that's the intent. */
.video-bg--youtube .video-bg-media .video-iframe,
.video-bg--vimeo .video-bg-media .video-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}

.video-bg-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.55) 60%,
    rgba(0, 0, 0, 0.75) 100%
  );
  pointer-events: none;
}

.video-bg-text {
  position: relative;
  z-index: 1;
  max-width: 720px;
  text-align: center;
}

.video-bg--left { justify-content: flex-start; }
.video-bg--left .video-bg-text { text-align: left; max-width: 600px; }
.video-bg--right { justify-content: flex-end; }
.video-bg--right .video-bg-text { text-align: right; max-width: 600px; }

.video-bg--pos-top-left { align-items: flex-start; justify-content: flex-start; }
.video-bg--pos-top-right { align-items: flex-start; justify-content: flex-end; }
.video-bg--pos-bottom-left { align-items: flex-end; justify-content: flex-start; }
.video-bg--pos-bottom-right { align-items: flex-end; justify-content: flex-end; }
.video-bg--pos-top-center { align-items: flex-start; justify-content: center; }
.video-bg--pos-bottom-center { align-items: flex-end; justify-content: center; }
.video-bg--pos-top-left .video-bg-text,
.video-bg--pos-bottom-left .video-bg-text {
  text-align: left;
  max-width: 600px;
}
.video-bg--pos-top-right .video-bg-text,
.video-bg--pos-bottom-right .video-bg-text {
  text-align: right;
  max-width: 600px;
}

.video-bg-text .eyebrow {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}

.video-bg-text h1,
.video-bg-text h2 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 16px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.video-bg-text .lede {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.38;
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
  margin: 0 auto;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.video-bg--left .video-bg-text .lede,
.video-bg--pos-top-left .video-bg-text .lede,
.video-bg--pos-bottom-left .video-bg-text .lede { margin-left: 0; }
.video-bg--right .video-bg-text .lede,
.video-bg--pos-top-right .video-bg-text .lede,
.video-bg--pos-bottom-right .video-bg-text .lede { margin-right: 0; }

.video-bg-docs {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  max-width: 520px;
}
.video-bg--center .video-bg-text .video-bg-docs,
.video-bg--pos-top-center .video-bg-text .video-bg-docs,
.video-bg--pos-bottom-center .video-bg-text .video-bg-docs {
  margin-left: auto;
  margin-right: auto;
}

.video-bg .hero-actions { margin-top: 24px; }

/* Light variant — lighter gradient + dark text */
.video-bg--light { color: var(--ink); }
.video-bg--light .video-bg-media::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.55) 60%,
    rgba(255, 255, 255, 0.8) 100%
  );
}
.video-bg--light .video-bg-text h1,
.video-bg--light .video-bg-text h2 {
  color: var(--ink);
  text-shadow: none;
}
.video-bg--light .video-bg-text .lede {
  color: var(--ink-soft);
  text-shadow: none;
}
.video-bg--light .video-bg-text .eyebrow { color: var(--accent); }
.video-bg--light .video-bg-docs { color: var(--ink-muted); }

/* Stacking with siblings — keep rhythm consistent with .hero */
.video-bg + .hero,
.video-bg + .hero-pair,
.video-bg + .text-block,
.video-bg + .video,
.video-bg + .video-bg,
.hero + .video-bg,
.hero-pair + .video-bg,
.text-block + .video-bg,
.video + .video-bg { margin-top: 0; }

@media (max-width: 780px) {
  .video-bg {
    min-height: 440px;
    padding: 72px 20px;
  }
  .video-bg--tall { min-height: 540px; }
  .video-frame { border-radius: 14px; }
}

/* Panorama / VR tour section */
.panorama {
  margin-bottom: 12px;
}
.panorama:last-child { margin-bottom: 56px; }

/* Fullscreen variant — edge-to-edge and full viewport height */
.panorama--fullscreen {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 0;
}
.panorama--fullscreen .panorama-stage {
  height: calc(100vh - var(--nav-h));
  min-height: calc(100vh - var(--nav-h));
  border-radius: 0;
}
.panorama--fullscreen.panorama--half .panorama-stage {
  height: calc((100vh - var(--nav-h)) / 2);
  min-height: calc((100vh - var(--nav-h)) / 2);
}
.panorama--fullscreen.panorama--three-quarters .panorama-stage {
  height: calc((100vh - var(--nav-h)) * 0.75);
  min-height: calc((100vh - var(--nav-h)) * 0.75);
}
.panorama--fullscreen.panorama--overlay { position: relative; }
.panorama--fullscreen.panorama--overlay .panorama-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 56px 32px 88px;
  text-align: left;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
  color: #fff;
}
.panorama--fullscreen.panorama--overlay .panorama-head .eyebrow { color: var(--pano-accent, #fff); }
.panorama--fullscreen.panorama--overlay .panorama-head h3 { color: #fff; max-width: 720px; }
.panorama--fullscreen.panorama--overlay .panorama-head .lede { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0; }
.panorama--fullscreen.panorama--flush { margin-top: -64px; }
.panorama + .text-block,
.panorama + .numbers,
.panorama + .hero,
.panorama + .hero-pair,
.panorama + .video,
.panorama + .video-bg,
.panorama + .map,
.text-block + .panorama,
.numbers + .panorama,
.hero + .panorama,
.hero-pair + .panorama,
.video + .panorama,
.video-bg + .panorama,
.map + .panorama { margin-top: 0; }

/* `spaced` keyword on numbers → force breathing room against neighbors. */
.numbers.numbers--spaced { margin-top: 72px; margin-bottom: 72px; }
.panorama + .numbers.numbers--spaced,
.numbers + .numbers.numbers--spaced,
.hero + .numbers.numbers--spaced,
.hero-pair + .numbers.numbers--spaced,
.text-block + .numbers.numbers--spaced,
.text-pair + .numbers.numbers--spaced,
.gallery + .numbers.numbers--spaced,
.video + .numbers.numbers--spaced,
.map + .numbers.numbers--spaced { margin-top: 72px; }
.numbers.numbers--spaced + .panorama,
.numbers.numbers--spaced + .gallery,
.numbers.numbers--spaced + .numbers,
.numbers.numbers--spaced + .hero,
.numbers.numbers--spaced + .hero-pair,
.numbers.numbers--spaced + .text-block,
.numbers.numbers--spaced + .text-pair,
.numbers.numbers--spaced + .video,
.numbers.numbers--spaced + .map { margin-top: 0; }

.panorama-head {
  max-width: 800px;
  margin: 0 auto 24px;
  text-align: center;
  padding: 0 20px;
}
.panorama-head .eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.panorama-head h3 {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.panorama-head .lede {
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto;
}

.panorama-stage {
  position: relative;
  width: 100%;
  min-height: 420px;
  background: #0a0a0a;
  color: #fff;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  touch-action: none;
  outline: none;
  font-family: inherit;
}
.panorama-stage:focus-visible {
  box-shadow: 0 0 0 2px var(--pano-accent, #2997ff);
}

.panorama-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
.panorama-canvas:active { cursor: grabbing; }

/* Loading */
.panorama-loading {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.panorama-loading.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.panorama-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.panorama-loading-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.panorama-loading-track {
  width: 180px;
  height: 2px;
  background: rgba(255,255,255,0.12);
  border-radius: 1px;
  overflow: hidden;
}
.panorama-loading-fill {
  height: 100%;
  width: 0%;
  background: var(--pano-accent, #2997ff);
  border-radius: 1px;
  transition: width 0.3s ease;
}

/* Transition overlay */
.panorama-transition {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #0a0a0a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.panorama-transition.active { opacity: 1; }

/* Scene title */
.panorama-scene-title {
  position: absolute;
  left: 0; right: 0;
  bottom: 96px;
  z-index: 20;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  padding: 0 16px;
}
.panorama-scene-title.visible {
  opacity: 1;
  transform: translateY(0);
}
.panorama-scene-title h4 {
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 20px rgba(0,0,0,0.7);
  margin: 0;
}
.panorama-scene-title p {
  font-size: 11px;
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 6px 0 0;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}

/* Compass */
.panorama-compass {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 15;
  width: 36px;
  height: 36px;
  pointer-events: none;
  opacity: 0.55;
}
.panorama-compass-needle {
  transform-origin: center;
  transition: transform 0.15s ease-out;
}

/* Controls cluster */
.panorama-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.panorama-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.panorama-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.32);
  color: #fff;
}
.panorama-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}
.panorama-btn.active {
  background: color-mix(in srgb, var(--pano-accent, #2997ff) 45%, transparent);
  border-color: color-mix(in srgb, var(--pano-accent, #2997ff) 70%, transparent);
  color: #fff;
}
.panorama-lang-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.panorama-audio-btn { display: none; }
.panorama-audio-btn.has-audio { display: flex; }
.panorama-btn#gyro-pulse-target.active svg,
.panorama-btn.active.panorama-gyro-pulse svg {
  animation: panorama-gyro-pulse 2s ease-in-out infinite;
}
@keyframes panorama-gyro-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.45; }
}

/* Tour nav */
.panorama-tour-nav {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 48px 16px 16px;
  gap: 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
  pointer-events: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.panorama-tour-nav::-webkit-scrollbar { display: none; }
.panorama-tour-nav > * { pointer-events: auto; }

.panorama-tour-stop {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.25);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.3s, transform 0.25s, box-shadow 0.3s;
  flex-shrink: 0;
  background: #1a1a1a;
  padding: 0;
}
.panorama-tour-stop:hover {
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-2px);
}
.panorama-tour-stop.active {
  border-color: var(--pano-accent, #2997ff);
  box-shadow:
    0 0 0 1px var(--pano-accent, #2997ff),
    0 6px 24px color-mix(in srgb, var(--pano-accent, #2997ff) 35%, transparent);
}
.panorama-tour-stop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.panorama-tour-stop-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  font-size: 9px;
  line-height: 1.1;
  text-align: center;
  padding: 3px 2px;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}
.panorama-tour-divider {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  margin-bottom: 26px;
  flex-shrink: 0;
}

/* Hotspot tooltip */
.panorama-hotspot-tooltip {
  position: absolute;
  z-index: 22;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -120%) scale(0.92);
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
.panorama-hotspot-tooltip.visible {
  opacity: 1;
  transform: translate(-50%, -120%) scale(1);
}
.panorama-hotspot-tooltip-inner {
  background: rgba(0,0,0,0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}

/* Debug coord picker */
.panorama-debug-coords {
  position: absolute;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -140%);
  transition: opacity 0.25s ease;
  white-space: nowrap;
}
.panorama-debug-coords.visible { opacity: 1; }
.panorama-debug-coords-inner {
  background: color-mix(in srgb, var(--pano-accent, #2997ff) 82%, #000 0%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11px;
  font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
  color: #fff;
  text-align: center;
  line-height: 1.5;
}
.panorama-debug-coords-inner small {
  display: block;
  font-size: 9px;
  opacity: 0.65;
  margin-top: 2px;
  letter-spacing: 0.05em;
}

/* Fullscreen tweaks: when the stage itself is fullscreened, drop the border radius */
.panorama-stage:fullscreen,
.panorama-stage:-webkit-full-screen {
  border-radius: 0;
  min-height: 100vh;
}
.panorama-stage:fullscreen .panorama-canvas,
.panorama-stage:-webkit-full-screen .panorama-canvas {
  height: 100vh;
}

@media (max-width: 680px) {
  .panorama-stage { min-height: 360px; }
  .panorama-tour-stop { width: 48px; height: 48px; }
  .panorama-controls { bottom: 12px; right: 12px; gap: 6px; }
  .panorama-btn { width: 36px; height: 36px; border-radius: 8px; }
  .panorama-compass { top: 12px; right: 12px; width: 32px; height: 32px; }
  .panorama-scene-title { bottom: 92px; }
}

/* Map section */
.map {
  margin-bottom: 12px;
}
.map:last-child { margin-bottom: 56px; }
.map + .text-block,
.map + .numbers,
.map + .hero,
.map + .hero-pair,
.map + .text-pair,
.text-block + .map,
.numbers + .map,
.hero + .map,
.hero-pair + .map,
.text-pair + .map { margin-top: 0; }
.map + .text-block { padding-top: 40px; }

.map-head {
  max-width: 720px;
  margin: 0 auto 24px;
  text-align: center;
}

.map-eyebrow {
  display: block;
  font-family: "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #06c);
  margin-bottom: 10px;
}

.map-head h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.15;
  margin: 0;
}

/* ------------------------------------------------------------
 * Document section — pdf, markdown, tiptap.
 * ------------------------------------------------------------ */
.document {
  max-width: 980px;
  margin: 0 auto 56px;
  padding: 0 32px;
}
.document + .document { margin-top: 0; }

.document-head {
  max-width: 720px;
  margin: 0 auto 24px;
  text-align: center;
}
.document-head h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.15;
  margin: 0;
}
.document-head .lede {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.45;
}
.document-caption {
  margin-top: 16px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.document-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--ink-muted);
  font-size: 15px;
}
.document-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
}
.document-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.pdf-viewer { background: #525659; }

/* PDF.js custom viewer — minimal toolbar (page nav + zoom + spread toggle). */
.document--bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}
.document--bleed .document-frame {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
.pdfjs-viewer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #525659;
}
.pdfjs-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #323639;
  color: #e8e8e8;
  border-bottom: 1px solid #1f2123;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.pdfjs-btn {
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  width: 30px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pdfjs-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.pdfjs-btn:disabled { opacity: 0.35; cursor: default; }
.pdfjs-mode[aria-pressed="true"] { background: rgba(255, 255, 255, 0.12); }
.pdfjs-pageinfo,
.pdfjs-zoom {
  min-width: 64px;
  text-align: center;
}
.pdfjs-spacer { flex: 1; }
.pdfjs-pages {
  flex: 1;
  overflow: auto;
  display: flex;
  justify-content: safe center;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  background: #525659;
}
.pdfjs-page {
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  display: block;
  flex-shrink: 0;
}

/* Markdown viewer — readable prose. */
.markdown-viewer {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 36px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
}
.markdown-viewer > :first-child { margin-top: 0; }
.markdown-viewer > :last-child { margin-bottom: 0; }
.markdown-viewer h1,
.markdown-viewer h2,
.markdown-viewer h3,
.markdown-viewer h4 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 28px 0 12px;
  line-height: 1.2;
}
.markdown-viewer h1 { font-size: 32px; margin-top: 0; }
.markdown-viewer h2 { font-size: 24px; }
.markdown-viewer h3 { font-size: 19px; }
.markdown-viewer p { margin: 0 0 14px; }
.markdown-viewer ul,
.markdown-viewer ol { margin: 0 0 14px; padding-left: 22px; }
.markdown-viewer li { margin: 4px 0; }
.markdown-viewer blockquote {
  margin: 18px 0;
  padding: 12px 18px;
  border-left: 3px solid var(--accent);
  background: var(--bg-alt);
  color: var(--ink-soft);
  border-radius: 0 8px 8px 0;
}
.markdown-viewer code {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 14px;
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: 4px;
}
.markdown-viewer pre {
  margin: 18px 0;
  padding: 16px 18px;
  background: #1d1d1f;
  color: #f5f5f7;
  border-radius: 10px;
  overflow-x: auto;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
}
.markdown-viewer pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
.markdown-viewer a { color: var(--accent); }
.markdown-viewer a:hover { text-decoration: underline; }
.markdown-viewer hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 24px 0;
}

/* Tiptap editor — toolbar + content area. */
.tiptap-shell {
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.tiptap-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-alt);
  position: sticky;
  top: var(--nav-h);
  z-index: 1;
}
.tiptap-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  min-width: 32px;
  line-height: 1.1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tiptap-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--rule);
}
.tiptap-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tiptap-btn--active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.tiptap-editor {
  padding: 28px 36px;
  min-height: 320px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}
.tiptap-editor .ProseMirror { outline: none; min-height: 280px; }
.tiptap-editor .ProseMirror > :first-child { margin-top: 0; }
.tiptap-editor .ProseMirror > :last-child { margin-bottom: 0; }
.tiptap-editor h1,
.tiptap-editor h2,
.tiptap-editor h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 24px 0 12px;
  line-height: 1.2;
}
.tiptap-editor h1 { font-size: 30px; margin-top: 0; }
.tiptap-editor h2 { font-size: 22px; }
.tiptap-editor h3 { font-size: 18px; }
.tiptap-editor p { margin: 0 0 14px; }
.tiptap-editor ul,
.tiptap-editor ol { margin: 0 0 14px; padding-left: 22px; }
.tiptap-editor li { margin: 4px 0; }
.tiptap-editor blockquote {
  margin: 18px 0;
  padding: 12px 18px;
  border-left: 3px solid var(--accent);
  background: var(--bg-alt);
  color: var(--ink-soft);
  border-radius: 0 8px 8px 0;
}
.tiptap-editor code {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 14px;
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: 4px;
}
.tiptap-editor pre {
  margin: 18px 0;
  padding: 16px 18px;
  background: #1d1d1f;
  color: #f5f5f7;
  border-radius: 10px;
  overflow-x: auto;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
}
.tiptap-editor pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* Mermaid viewer */
.mermaid-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 36px;
  background: #f5f5f7;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow-x: auto;
}
.document--mermaid.document--bleed {
  max-width: 100vw;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 56px 0;
  background: #f5f5f7;
}
.document--mermaid.document--bleed .document-head {
  max-width: 720px;
  margin: 0 auto 24px;
  padding: 0 22px;
}
.document--mermaid.document--bleed .mermaid-shell {
  max-width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 22px;
}
.mermaid-viewer {
  display: flex;
  justify-content: center;
  min-width: fit-content;
}
.mermaid-viewer svg {
  height: auto;
  max-width: none;
  overflow: visible;
}
.mermaid-viewer foreignObject {
  overflow: visible;
}
.mermaid-viewer foreignObject > div {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  line-height: 1.35;
  padding: 2px 4px;
}
.mermaid-error {
  color: #b71c1c;
  background: #fff5f5;
  border: 1px solid #f1c4c4;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 13px;
  white-space: pre-wrap;
  margin-bottom: 16px;
}

/* Spreadsheet viewer */
.spreadsheet-shell {
  max-width: 980px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.spreadsheet-viewer {
  width: 100%;
  font-family: "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
}
.spreadsheet-viewer .jexcel,
.spreadsheet-viewer .jss,
.spreadsheet-viewer table {
  font-size: 14px;
}

/* Google Doc viewer (uses .document-frame for sizing) */
.googledoc-viewer { background: #fff; }

/* Code editor — CodeMirror 6 */
.code-shell {
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
}
.code-shell--dark {
  background: #282c34;
  border-color: #1d1f23;
}
.code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-alt);
  font-family: "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
}
.code-shell--dark .code-toolbar {
  background: #21252b;
  border-color: #1d1f23;
}
.code-lang {
  display: inline-flex;
  align-items: center;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 3px 8px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.code-shell--dark .code-lang {
  color: #abb2bf;
  background: #1d1f23;
  border-color: #1d1f23;
}
.code-editor {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 14px;
  line-height: 1.55;
  min-height: 320px;
}
.code-editor .cm-editor {
  height: auto;
  min-height: 320px;
  outline: none;
}
.code-editor .cm-scroller { font-family: inherit; }
.code-editor .cm-content { padding: 18px 0; }
.code-editor .cm-gutters {
  background: transparent;
  border-right: 1px solid var(--rule);
}
.code-shell--dark .code-editor .cm-gutters { border-right-color: #21252b; }

.map-caption {
  max-width: 640px;
  margin: 16px auto 0;
  text-align: center;
  font-family: "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted, #6e6e73);
}

.map-frame {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-alt);
}

.map-frame iframe,
.map-frame arcgis-embedded-map {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Responsive */
@media (max-width: 960px) {
  .config-layout { grid-template-columns: 1fr; }
  .config-right { position: static; }
  .step--split { grid-template-columns: 1fr; gap: 20px; }
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-pair[style*="--hero-pair-cols:3"],
  .hero-pair[style*="--hero-pair-cols:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-pair[style*="--hero-pair-cols:3"] .hero--hd .hero-text h2,
  .hero-pair[style*="--hero-pair-cols:3"] .hero--hd .hero-text h1,
  .hero-pair[style*="--hero-pair-cols:4"] .hero--hd .hero-text h2,
  .hero-pair[style*="--hero-pair-cols:4"] .hero--hd .hero-text h1 { font-size: clamp(20px, 2.6vw, 32px); }
  .numbers[style*="--numbers-cols:5"] .numbers-grid,
  .numbers[style*="--numbers-cols:6"] .numbers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numbers[style*="--numbers-cols:5"] .number-value,
  .numbers[style*="--numbers-cols:6"] .number-value { font-size: clamp(32px, 4.4vw, 48px); }
  .text-block--two-col .text-body { column-gap: 36px; }
  .map-frame { max-height: 70vh; }
  .clock[style*="--clock-cols:4"] .clock-grid,
  .clock[style*="--clock-cols:5"] .clock-grid,
  .clock[style*="--clock-cols:6"] .clock-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards[style*="--cards-cols:4"] .cards-grid,
  .cards[style*="--cards-cols:5"] .cards-grid,
  .cards[style*="--cards-cols:6"] .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery[style*="--gallery-cols:4"] .gallery-grid,
  .gallery[style*="--gallery-cols:5"] .gallery-grid,
  .gallery[style*="--gallery-cols:6"] .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .clock-grid,
  .clock[style*="--clock-cols:3"] .clock-grid,
  .clock[style*="--clock-cols:4"] .clock-grid,
  .clock[style*="--clock-cols:5"] .clock-grid,
  .clock[style*="--clock-cols:6"] .clock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards[style*="--cards-cols:3"] .cards-grid,
  .cards[style*="--cards-cols:4"] .cards-grid,
  .cards[style*="--cards-cols:5"] .cards-grid,
  .cards[style*="--cards-cols:6"] .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-pair { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  body > header nav { gap: 20px; }
  body > header nav .nav-menu-item { font-size: 12px; padding: 5px 10px; }
  main { padding: 40px 16px 64px; }
  .page-hero { margin-bottom: 36px; }
  .page-hero h2 { font-size: 36px; }
  .page-hero .lede { font-size: 17px; }
  .step { padding: 24px 20px; }
  .step h3 { font-size: 22px; }
  .option { padding: 16px 14px; }
  .option-name { font-size: 15px; }
  .party-grid { grid-template-columns: 1fr; }
  .hero { padding: 48px 24px; min-height: 420px; min-width: 0; max-width: 100%; }
  .hero-text { min-width: 0; max-width: 100%; }
  .hero-text h1, .hero-text h2 { overflow-wrap: break-word; hyphens: auto; }
  .hero-pair { min-width: 0; max-width: 100%; }
  .hero--hd { max-width: 100%; }
  .hero--tall { min-height: 520px; }
  .hero--text-only { padding: 64px 24px; min-height: 320px; }
  .hero.hero--bleed,
  .text-block.text-block--bleed,
  .numbers.numbers--bleed,
  .timeline.timeline--bleed,
  .countdown.countdown--bleed,
  .calendar-block.calendar-block--bleed,
  .clock.clock--bleed,
  .video.video--bleed,
  .cards.cards--bleed,
  .gallery.gallery--bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    min-height: calc(100vh - var(--nav-h));
  }
  .hero--bleed.hero--tall,
  .text-block--bleed.text-block--tall,
  .numbers--bleed.numbers--tall,
  .timeline--bleed.timeline--tall,
  .countdown--bleed.countdown--tall,
  .calendar-block--bleed.calendar-block--tall,
  .clock--bleed.clock--tall,
  .video--bleed.video--tall { min-height: 100vh; }
  .hero--half { min-height: 440px; padding: 40px 24px; }
  .hero--hd.hero--full,
  .hero--hd.hero--half { min-height: 0; padding: 5% 6%; }
  .hero--split,
  .hero--split-reverse { min-height: 0; }
  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero--tall.hero--split .hero-split,
  .hero--tall.hero--split-reverse .hero-split { min-height: 0; }
  .hero-split > .hero-text { padding: 48px 28px; }
  .hero-split > .hero-media { min-height: 260px; }
  .hero--split .hero-split > .hero-media { order: -1; }
  .hero--split-reverse .hero-split > .hero-media { order: -1; }
  .hero-pair { grid-template-columns: minmax(0, 1fr); }
  .hero--hd.hero--split,
  .hero--hd.hero--split-reverse { aspect-ratio: auto; }
  .hero--hd.hero--text-only { padding: 48px 24px; }
  .hero--h2,
  .hero--h2.hero--tall { aspect-ratio: auto; min-height: 160px; max-height: none; }
  .hero--h2.hero--text-only { padding: 24px 20px 28px; min-height: 160px; }
  /* Diagrams (no-text) keep their wide ratio on mobile so the image isn't cropped */
  .hero--h2.hero--no-text,
  .hero--h2.hero--no-text.hero--tall { aspect-ratio: 32 / 9; min-height: 0; max-height: none; }
  .hero--h2.hero--full,
  .hero--h2.hero--half { padding: 22px 20px 26px; }
  .hero--h2 .hero-text h2,
  .hero--h2 .hero-text h1 { font-size: clamp(20px, 5.4vw, 28px); }
  .hero--h2 .hero-text .lede { font-size: clamp(13px, 3.4vw, 15px); }
  .hero--h4,
  .hero--h4.hero--tall { aspect-ratio: auto; min-height: 120px; max-height: none; }
  .hero--h4.hero--text-only { padding: 18px 18px 22px; min-height: 120px; }
  .hero--h4.hero--full,
  .hero--h4.hero--half { padding: 16px 18px 22px; }
  .hero--h4 .hero-text h2,
  .hero--h4 .hero-text h1 { font-size: clamp(15px, 4.2vw, 20px); }
  .hero--h4 .hero-text .lede { font-size: clamp(11px, 3.1vw, 13px); }
  .hero--h4 .hero-actions { margin-top: 10px; gap: 10px; }
  .text-block { padding: 56px 24px; }
  .text-block--display { padding: 72px 24px; }
  .text-block--compact { padding: 40px 24px; }
  .text-block--caption { padding: 24px; }
  .text-block--two-col .text-body { column-count: 1; }
  .text-pair { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .card-media img { height: 180px; }
  .numbers { padding: 48px 20px; }
  .numbers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .numbers[style*="--numbers-cols:1"] .numbers-grid { grid-template-columns: 1fr; }
  .numbers[style*="--numbers-cols:1"] .number-value { font-size: clamp(56px, 18vw, 96px); }
  .numbers-head { margin-bottom: 36px; }
  .numbers-head h2 { font-size: clamp(24px, 6vw, 32px); }
  .numbers-head .lede { font-size: 16px; }
  .map-frame { max-height: 55vh; }
  [data-ref]::before { top: 8px; left: 8px; font-size: 10px; padding: 3px 7px; }
  .timeline,
  .countdown,
  .calendar-block,
  .clock { padding: 48px 20px; }
  .timeline-head,
  .countdown-head,
  .calendar-head,
  .clock-head { margin-bottom: 32px; }
  .timeline-phases { gap: 40px; }
  .timeline-phase { padding-left: 24px; }
  .timeline-phase-head::before { left: -33px; width: 14px; height: 14px; }
  .timeline-phase-meta h3 { font-size: 20px; }
  .timeline-event { grid-template-columns: 1fr; gap: 4px; padding-left: 0; }
  .timeline-event::before { left: -31px; top: 6px; width: 10px; height: 10px; }
  .timeline-event-date { font-size: 12px; }
  .timeline-event-title { font-size: 16px; }
  .countdown-grid { gap: 8px; }
  .countdown-cell { padding: 24px 8px; border-radius: 14px; gap: 6px; }
  .countdown-num { font-size: clamp(32px, 11vw, 48px); }
  .countdown-label { font-size: 10px; letter-spacing: 0.06em; }
  .calendar-months { grid-template-columns: 1fr; gap: 32px; }
  .clock-grid { grid-template-columns: 1fr !important; }
  .clock-cell { padding: 24px 22px; }
}

@media (max-width: 480px) {
  .numbers[style*="--numbers-cols:6"] .numbers-grid { grid-template-columns: 1fr; }
  .numbers[style*="--numbers-cols:6"] .number { flex-direction: row; align-items: baseline; gap: 12px; }
  .numbers[style*="--numbers-cols:6"] .number-label { margin-bottom: 0; min-width: 110px; }
  .numbers[style*="--numbers-cols:6"] .number-value { font-size: 28px; margin-bottom: 0; }
  .numbers[style*="--numbers-cols:6"] .number-unit { margin-left: auto; }
  .hero-text h2,
  .hero-text h1 { font-size: clamp(28px, 8vw, 40px); }
  .hero-text .lede { font-size: 17px; }
  .text-block--display h2 { font-size: clamp(36px, 10vw, 48px); }
}

/* =====================================================================
 * Container components — card, grid, apple-style tabs.
 * Generic primitives that host content of any schemaID via nested pods.
 * ===================================================================== */

.container-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  min-height: 240px;
  padding: 40px;
  border-radius: 16px;
  background-color: var(--bg-alt);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ink);
}

.container-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.container-card-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.container-card .eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  color: inherit;
}

.container-card h3 {
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: inherit;
}

.container-card .lede {
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: inherit;
}

.container-card .body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  line-height: 1.55;
  color: inherit;
  opacity: 0.88;
}
.container-card .body p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.container-card--size-sm .body { font-size: 14px; }
.container-card--size-md .body { font-size: 15px; }
.container-card--size-lg .body { font-size: 16px; }
.container-card--size-xl .body { font-size: 17px; }

.container-card--size-sm h3 { font-size: 20px; }
.container-card--size-sm .lede { font-size: 14px; }
.container-card--size-md h3 { font-size: clamp(24px, 3vw, 30px); }
.container-card--size-md .lede { font-size: 16px; }
.container-card--size-lg h3 { font-size: clamp(36px, 5vw, 48px); }
.container-card--size-lg .lede { font-size: 20px; }
.container-card--size-xl h3 { font-size: clamp(44px, 7vw, 72px); }
.container-card--size-xl .lede { font-size: 22px; }

.container-card--shadow-text .container-card-text {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.3);
}

.container-card--pos-top-left      { align-items: flex-start; justify-content: flex-start; text-align: left; }
.container-card--pos-top-center    { align-items: center;     justify-content: flex-start; text-align: center; }
.container-card--pos-top-right     { align-items: flex-end;   justify-content: flex-start; text-align: right; }
.container-card--pos-center        { align-items: center;     justify-content: center;     text-align: center; }
.container-card--pos-bottom-left   { align-items: flex-start; justify-content: flex-end;   text-align: left; }
.container-card--pos-bottom-center { align-items: center;     justify-content: flex-end;   text-align: center; }
.container-card--pos-bottom-right  { align-items: flex-end;   justify-content: flex-end;   text-align: right; }
.container-card--pos-split         { justify-content: space-between; }
.container-card--pos-split .container-card-text--top    { align-items: flex-start; text-align: left; }
.container-card--pos-split .container-card-text--bottom { align-items: flex-start; text-align: left; margin-top: auto; }

.container-card--dark { background-color: #1d1d1f; color: #ffffff; }
.container-card--light { background-color: #ffffff; color: #1d1d1f; }

.container-card-actions { margin-top: 8px; }

/* ---- Grid ---- */
.container-grid {
  max-width: 1200px;
  margin: 48px auto;
  padding: 0 22px;
}
.container-grid--bleed {
  max-width: none;
  margin: 0;
  padding: 48px;
}

.container-grid-head {
  margin: 0 0 24px;
}
.container-grid-head h3 {
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.container-grid-head .eyebrow {
  margin-bottom: 8px;
}

.container-grid-body {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
  gap: var(--grid-gap, 16px);
  grid-auto-rows: auto;
}

.container-grid-cell {
  display: flex;
  min-width: 0;
}
.container-grid-cell > * {
  width: 100%;
}

/* ---- Apple-style tabs ---- */
.container-tabs {
  max-width: 1200px;
  margin: 48px auto;
  padding: 0 22px;
}
.container-tabs--bleed {
  max-width: none;
  margin: 0;
  padding: 48px;
}

.container-tabs-head {
  margin: 0 0 20px;
}
.container-tabs-head h3 {
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.container-tabs-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  max-width: 100%;
  min-width: 0;
}
.container-tabs--align-center .container-tabs-bar-wrap {
  justify-content: center;
}
.container-tabs--align-center .container-tabs-head {
  text-align: center;
}

.container-tabs-bar {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: rgba(60, 60, 67, 0.36);
  border-radius: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  min-width: 0;
  max-width: 100%;
}
.container-tabs-bar::-webkit-scrollbar { display: none; }

.container-tabs--overflow .container-tabs-bar {
  flex: 1;
}

.container-tabs-arrow {
  display: none;
  appearance: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(60, 60, 67, 0.10);
  color: var(--ink);
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 180ms ease, opacity 180ms ease, transform 120ms ease;
}
.container-tabs--overflow .container-tabs-arrow {
  display: inline-flex;
}
.container-tabs-arrow:hover:not(:disabled) {
  background: rgba(60, 60, 67, 0.18);
}
.container-tabs-arrow:active:not(:disabled) {
  transform: scale(0.94);
}
.container-tabs-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.container-tabs-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.015em;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 180ms ease, box-shadow 180ms ease,
    transform 120ms ease, color 180ms ease;
}
.container-tabs-btn:hover {
  color: var(--ink);
}
.container-tabs-btn[aria-selected="true"] {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08),
    0 3px 8px rgba(0, 0, 0, 0.04);
}
.container-tabs-btn:active {
  transform: scale(0.98);
}

.container-tabs-panel {
  animation: containerTabsFade 260ms ease;
}
@keyframes containerTabsFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.container-tabs--bleed .container-tabs-panel > * {
  margin: 0;
  max-width: none;
}

/* Nested containers collapse their own outer margins when inside a tab panel */
.container-tabs-panel > .container-grid,
.container-tabs-panel > .container-tabs {
  margin: 0;
  padding: 0;
  max-width: none;
}

@media (max-width: 720px) {
  .container-grid, .container-tabs { margin: 32px auto; padding: 0 16px; }
  .container-grid--bleed, .container-tabs--bleed { padding: 32px 16px; }
  .container-grid-body { grid-template-columns: 1fr; }
  .container-grid-cell { grid-column: auto !important; }
  .container-card { padding: 28px; min-height: 220px; }
  .container-card--size-xl h3 { font-size: clamp(32px, 10vw, 48px); }
  .container-card--size-lg h3 { font-size: clamp(28px, 8vw, 40px); }
  .container-tabs-btn { white-space: nowrap; }
  .container-tabs-arrow { width: 30px; height: 30px; font-size: 20px; }
}

/* =====================================================================
 * Sidebar — vertical nav + content pane
 * ===================================================================== */
.container-sidebar {
  max-width: 1200px;
  margin: 48px auto;
  padding: 0 22px;
}
.container-sidebar--bleed {
  max-width: none;
  margin: 0;
  padding: 48px;
}

.container-sidebar-head {
  margin: 0 0 20px;
}
.container-sidebar-head h3 {
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.container-sidebar-body {
  display: grid;
  grid-template-columns: var(--sidebar-width, 220px) minmax(0, 1fr);
  gap: 16px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--bg);
  overflow: hidden;
}

.container-sidebar--h-fixed .container-sidebar-body {
  height: var(--sidebar-height, 520px);
}
.container-sidebar--h-half .container-sidebar-body {
  height: 50vh;
  min-height: 380px;
}
.container-sidebar--h-full .container-sidebar-body {
  height: calc(100vh - var(--nav-h) - 96px);
  min-height: 480px;
}

.container-sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  background: var(--bg-alt);
  border-right: 1px solid var(--rule);
  overflow-y: auto;
}

.container-sidebar-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.container-sidebar-item:hover {
  background: rgba(0, 0, 0, 0.05);
}
.container-sidebar-item[aria-selected="true"] {
  background: var(--accent);
  color: #ffffff;
}
.container-sidebar-icon {
  font-size: 18px;
  line-height: 1;
  width: 20px;
  text-align: center;
}

.container-sidebar-content {
  padding: 24px;
  overflow-y: auto;
  min-width: 0;
  animation: containerSidebarFade 260ms ease;
}
@keyframes containerSidebarFade {
  from { opacity: 0; transform: translateX(4px); }
  to   { opacity: 1; transform: translateX(0); }
}
.container-sidebar-content > .container-card,
.container-sidebar-content > .container-grid,
.container-sidebar-content > .container-list {
  margin: 0;
  padding: 0;
  max-width: none;
}
.container-sidebar-empty {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ink-soft);
}

/* =====================================================================
 * Accordion — stacked collapsible panels
 * ===================================================================== */
.container-accordion {
  max-width: 1200px;
  margin: 48px auto;
  padding: 0 22px;
}
.container-accordion--bleed {
  max-width: none;
  margin: 0;
  padding: 48px;
}
.container-accordion--filled {
  border-radius: 18px;
  padding: 48px 40px;
}
.container-accordion--filled.container-accordion--bleed { border-radius: 0; }

.container-accordion-head {
  margin: 0 0 20px;
}
.container-accordion-head h3 {
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.container-accordion-body {
  display: flex;
  flex-direction: column;
}

.container-accordion--bordered .container-accordion-body {
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
}

.container-accordion-panel + .container-accordion-panel {
  border-top: 1px solid var(--rule);
}

.container-accordion-trigger {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 22px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease;
}
.container-accordion-trigger:hover {
  background: rgba(0, 0, 0, 0.03);
}
.container-accordion-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.container-accordion-chevron {
  color: var(--ink-muted);
  font-size: 22px;
  line-height: 1;
  transition: transform 240ms ease;
  transform: rotate(90deg);
}
.container-accordion-panel.is-open .container-accordion-chevron {
  transform: rotate(270deg);
  color: var(--accent);
}

.container-accordion-content {
  padding: 0 22px 20px;
  animation: containerAccordionFade 240ms ease;
}
@keyframes containerAccordionFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.container-accordion-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.container-accordion-text .muted {
  color: var(--ink-muted);
  font-size: 14px;
}
.container-accordion-content > .container-card,
.container-accordion-content > .container-grid,
.container-accordion-content > .container-list {
  margin: 8px 0 0;
  padding: 0;
  max-width: none;
}

/* =====================================================================
 * List — Ionic-style rows, plain, and master/detail variants
 * ===================================================================== */
.container-list {
  max-width: 1200px;
  margin: 48px auto;
  padding: 0 22px;
}
.container-list--bleed {
  max-width: none;
  margin: 0;
  padding: 48px;
}

.container-list-head {
  margin: 0 0 16px;
}
.container-list-head h3 {
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.container-list-body {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.container-list--no-divider .container-list-body {
  border: 0;
  background: transparent;
}

.container-list--inset {
  max-width: 920px;
}
.container-list--inset .container-list-body {
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Ionic-style row */
.container-list-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  min-height: 56px;
}
.container-list-item + .container-list-item {
  border-top: 1px solid var(--rule);
}
.container-list--no-divider .container-list-item + .container-list-item {
  border-top: 0;
}

.container-list-btn {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 0;
  margin: -14px -18px;
  padding: 14px 18px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease;
}
.container-list-btn:hover { background: rgba(0, 0, 0, 0.035); }
.container-list-btn:active { background: rgba(0, 0, 0, 0.06); }
.container-list-item.is-active .container-list-btn {
  background: rgba(0, 113, 227, 0.08);
}

.container-list-lead {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-soft);
}

.container-list-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.container-list-title {
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container-list-sub {
  color: var(--ink-soft);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container-list-note {
  color: var(--ink-muted);
  font-size: 12px;
}

.container-list-badge {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--ink-soft);
}

.container-list-trail {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-size: 20px;
  line-height: 1;
  margin-left: 2px;
}
.container-list-item.is-active .container-list-trail { color: var(--accent); }

/* Plain list */
.container-list--plain .container-list-body {
  border: 0;
  background: transparent;
  padding: 0;
}
.container-list-item--plain {
  display: list-item;
  list-style: disc inside;
  padding: 6px 0;
  min-height: 0;
  color: var(--ink-soft);
  line-height: 1.5;
  border: 0 !important;
}

/* Master/detail split */
.container-list--split .container-list-split {
  position: relative;
  display: grid;
  grid-template-columns: var(--list-width, 320px) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  min-height: 300px;
}
.container-list--split .container-list-body {
  border: 0;
  border-right: 1px solid var(--rule);
  border-radius: 0;
  background: var(--bg-alt);
  overflow-y: auto;
  max-height: 640px;
}
.container-list-detail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--list-width, 320px);
  padding: 0;
  overflow: auto;
  min-width: 0;
  animation: containerListFade 260ms ease;
}
@keyframes containerListFade {
  from { opacity: 0; transform: translateX(4px); }
  to   { opacity: 1; transform: translateX(0); }
}
.container-list-detail > .container-card,
.container-list-detail > .container-grid,
.container-list-detail > .container-accordion {
  margin: 0;
  max-width: none;
  height: 100%;
  min-height: 100%;
  border-radius: 0 !important;
}
.container-list-detail-fallback {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ink-soft);
}
.container-list-detail-fallback .muted { color: var(--ink-muted); font-size: 14px; }

/* Hotel rates: image scales to container height, gray fills the rest */
#hotel_rates_master_detail .container-list-split { min-height: 360px; }
#hotel_rates_master_detail .container-list-detail { overflow: hidden; }
#hotel_rates_master_detail .container-list-body { max-height: none; overflow: hidden; }
#hotel_rates_master_detail .container-list-detail > .container-card {
  background-color: #ececec;
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
}

/* Responsive: collapse sidebar and master/detail to stacked layout */
@media (max-width: 720px) {
  .container-sidebar, .container-accordion, .container-list {
    margin: 32px auto;
    padding: 0 16px;
  }
  .container-sidebar--bleed,
  .container-accordion--bleed,
  .container-list--bleed { padding: 32px 16px; }

  .container-sidebar-body {
    grid-template-columns: 1fr;
    height: auto !important;
  }
  .container-sidebar-menu {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding: 10px;
    gap: 6px;
    scrollbar-width: none;
  }
  .container-sidebar-menu::-webkit-scrollbar { display: none; }
  .container-sidebar-item {
    white-space: nowrap;
    padding: 8px 14px;
  }
  .container-sidebar-content { padding: 18px; }

  .container-accordion-trigger { padding: 16px 18px; font-size: 16px; }
  .container-accordion-content { padding: 0 18px 16px; }

  .container-list--split .container-list-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .container-list--split .container-list-body {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    max-height: none;
  }
  .container-list-detail { position: static; padding: 18px; }
  .container-list-item { padding: 12px 16px; }

}

/* -------- modal -------- */
.container-modal {
  position: relative;
  margin: 48px auto;
  padding: 48px 24px;
  max-width: 880px;
  background: var(--bg-alt);
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
}
.container-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  z-index: 0;
}
.container-modal-surface {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: min(var(--modal-width, 520px), 92%);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow: hidden;
}
.container-modal-head {
  padding: 22px 24px 6px;
}
.container-modal-head .eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.container-modal-head h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.container-modal-blurb {
  color: var(--ink-muted);
  font-size: 13px;
  margin-top: 4px;
}
.container-modal-error {
  margin: 8px 24px 0;
  padding: 10px 14px;
  background: #fde2e2;
  border-radius: 10px;
  color: #8a1d1d;
  font-size: 13px;
}
.container-modal-body {
  padding: 18px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  overflow-y: auto;
}
.container-modal-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.container-modal-field.span-2 { grid-column: 1 / -1; }
.container-modal-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.container-modal-field input,
.container-modal-field textarea {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #fff;
  width: 100%;
}
.container-modal-field textarea { resize: vertical; min-height: 72px; }
.container-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--rule);
}
.container-modal-btn {
  appearance: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.container-modal-btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.container-modal-btn--primary {
  background: var(--accent);
  color: #fff;
  border: none;
}
.container-modal-btn--primary:hover { background: var(--accent-hover); }
.container-modal-notes {
  position: relative;
  z-index: 1;
  margin: 24px auto 0;
  max-width: 640px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}
.container-modal-notes p { margin-bottom: 10px; }

@media (max-width: 720px) {
  .container-modal { padding: 24px 12px; }
  .container-modal-body { grid-template-columns: 1fr; }
}

/* ==============================================================
 * Chat — kitchensink template (RENDERERS.chat in kitchensink.html).
 * Bubble UI with streaming + variations.
 * Driven by tags (eyebrow, model, placeholder, greeting, layout, bg)
 * and keywords (streaming, compact, terminal, bleed, inline, seeded).
 * ============================================================== */
.chat {
  --chat-bg: var(--bg);
  --chat-fg: var(--ink);
  --chat-muted: var(--ink-muted);
  --chat-rule: var(--rule);
  --chat-bubble-user: var(--accent);
  --chat-bubble-user-fg: #fff;
  --chat-bubble-assistant: var(--bg-alt);
  --chat-bubble-assistant-fg: var(--ink);
  --chat-radius: 18px;
  position: relative;
  padding: 64px max(24px, calc((100vw - 980px) / 2));
  background: var(--chat-bg);
  color: var(--chat-fg);
}
.chat--bleed { padding-left: 0; padding-right: 0; }
.chat--bleed .chat-head,
.chat--bleed .chat-surface {
  margin-left: max(24px, calc((100vw - 980px) / 2));
  margin-right: max(24px, calc((100vw - 980px) / 2));
}

.chat-head {
  max-width: 720px;
  margin: 0 auto 24px;
  text-align: left;
}
.chat-head .eyebrow {
  margin-bottom: 8px;
  color: var(--chat-muted);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chat-head h2 {
  margin: 0 0 8px;
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.chat-lede {
  color: var(--chat-muted);
  font-size: 15px;
  line-height: 1.55;
}

.chat-surface {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--chat-rule);
  border-radius: 24px;
  background: var(--chat-bg);
  overflow: hidden;
}

.chat-thread {
  min-height: 180px;
  max-height: 540px;
  overflow-y: auto;
  padding: 24px 20px 4px;
}
.chat--compact .chat-thread { max-height: 360px; min-height: 120px; }

.chat-bubbles {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-bubble {
  display: flex;
  max-width: 80%;
}
.chat-bubble--user { align-self: flex-end; }
.chat-bubble--assistant { align-self: flex-start; }
.chat-bubble--system { align-self: center; max-width: 100%; }

.chat-bubble-body {
  padding: 10px 14px;
  border-radius: var(--chat-radius);
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-bubble--user .chat-bubble-body {
  background: var(--chat-bubble-user);
  color: var(--chat-bubble-user-fg);
  border-bottom-right-radius: 6px;
}
.chat-bubble--assistant .chat-bubble-body {
  background: var(--chat-bubble-assistant);
  color: var(--chat-bubble-assistant-fg);
  border-bottom-left-radius: 6px;
}
.chat--compact .chat-bubble-body { font-size: 14px; padding: 8px 12px; }

.chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}
.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chat-muted);
  opacity: 0.6;
  animation: chat-typing 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.chat-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px;
}
.chat-chip {
  border: 1px solid var(--chat-rule);
  background: var(--chat-bg);
  color: var(--chat-fg);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.chat-chip:hover:not(:disabled) {
  background: var(--bg-alt);
  border-color: var(--ink-muted);
}
.chat-chip:disabled { opacity: 0.5; cursor: default; }

.chat-composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--chat-rule);
}
.chat-input {
  flex: 1;
  border: 1px solid var(--chat-rule);
  border-radius: 22px;
  background: var(--chat-bg);
  color: var(--chat-fg);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chat-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}
.chat-input--multiline { min-height: 44px; max-height: 160px; }
.chat-input:disabled { opacity: 0.6; }

.chat-send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.05s;
}
.chat-send:hover:not(:disabled) { background: var(--accent-hover); }
.chat-send:active:not(:disabled) { transform: scale(0.96); }
.chat-send:disabled { opacity: 0.4; cursor: default; }

.chat-send-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: chat-spin 0.7s linear infinite;
}
@keyframes chat-spin { to { transform: rotate(360deg); } }

.chat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 12px;
  font-size: 12px;
  color: var(--chat-muted);
}
.chat-tag {
  padding: 2px 8px;
  border: 1px solid var(--chat-rule);
  border-radius: 999px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.chat-reset {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--chat-muted);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.chat-reset:hover { color: var(--chat-fg); background: var(--bg-alt); }

/* Inline (single-shot) variation */
.chat--inline .chat-thread {
  min-height: 0;
  padding: 0;
}
.chat--inline .chat-inline-answer {
  padding: 18px 20px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--chat-fg);
  border-bottom: 1px solid var(--chat-rule);
  min-height: 60px;
  white-space: pre-wrap;
}
.chat--inline .chat-inline-answer:empty { display: none; }

/* Terminal variation — monospace, dark */
.chat--terminal {
  --chat-bg: #0a0a0a;
  --chat-fg: #d4d4d4;
  --chat-muted: #888;
  --chat-rule: #2a2a2a;
  --chat-bubble-user: #1a1a1a;
  --chat-bubble-user-fg: #00ff9c;
  --chat-bubble-assistant: transparent;
  --chat-bubble-assistant-fg: #d4d4d4;
}
.chat--terminal .chat-head h2,
.chat--terminal .chat-input,
.chat--terminal .chat-bubble-body {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.chat--terminal .chat-bubble {
  max-width: 100%;
  align-self: stretch;
}
.chat--terminal .chat-bubble--user .chat-bubble-body::before { content: "$ "; opacity: 0.7; }
.chat--terminal .chat-bubble--assistant .chat-bubble-body { padding-left: 0; padding-right: 0; }
.chat--terminal .chat-input { background: #111; border-color: #2a2a2a; color: #d4d4d4; }
.chat--terminal .chat-input:focus { border-color: #00ff9c; box-shadow: 0 0 0 2px rgba(0, 255, 156, 0.18); }
.chat--terminal .chat-send {
  background: #00ff9c;
  color: #0a0a0a;
  border-radius: 6px;
  width: auto;
  padding: 0 14px;
  height: 40px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chat--terminal .chat-send:hover:not(:disabled) { background: #00d984; }
.chat--terminal .chat-tag { color: #888; border-color: #2a2a2a; }
.chat--terminal .chat-surface { border-color: #2a2a2a; }
.chat--terminal .chat-chip { background: #111; color: #d4d4d4; border-color: #2a2a2a; }
.chat--terminal .chat-chip:hover:not(:disabled) { background: #1a1a1a; border-color: #00ff9c; color: #00ff9c; }

/* Split variation — image at left, chat at right */
.chat--split { padding: 0; }
.chat--split .chat-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}
.chat--split .chat-media {
  position: relative;
  overflow: hidden;
  background: #000;
}
.chat--split .chat-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat--split .chat-panel {
  display: flex;
  flex-direction: column;
  padding: 48px max(24px, calc((100vw - 980px) / 2 - 100px)) 32px 32px;
  gap: 16px;
}
.chat--split .chat-head { margin: 0; }
.chat--split .chat-surface {
  margin: 0;
  flex: 1;
  border-radius: 18px;
}
@media (max-width: 820px) {
  .chat--split .chat-split { grid-template-columns: 1fr; }
  .chat--split .chat-media { min-height: 220px; }
  .chat--split .chat-panel { padding: 24px; }
}

/* Compact variation — denser surface */
.chat--compact { padding: 32px max(24px, calc((100vw - 880px) / 2)); }
.chat--compact .chat-surface { max-width: 600px; }
.chat--compact .chat-head { margin-bottom: 16px; }

/* Dark theme for chat surface */
.chat--dark {
  --chat-bg: #141415;
  --chat-fg: #f5f5f7;
  --chat-muted: #a1a1a6;
  --chat-rule: #2d2d30;
  --chat-bubble-assistant: #252527;
  --chat-bubble-assistant-fg: #f5f5f7;
}

@media (max-width: 720px) {
  .chat { padding: 40px 16px; }
  .chat-bubble { max-width: 90%; }
  .chat-thread { padding: 16px 14px 4px; }
  .chat-composer { padding: 10px; }
}

/* ------------------------------------------------------------------
 * Button system — extends the .btn base (declared near the hero CTA
 * styles). Variants × sizes × shapes × states × icons.
 * ------------------------------------------------------------------ */

/* Variants */
.btn--secondary {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink);
}
.btn--secondary:hover { background: rgba(0, 0, 0, 0.10); text-decoration: none; }

.btn--tertiary {
  background: transparent;
  color: var(--accent);
}
.btn--tertiary:hover { background: rgba(0, 113, 227, 0.08); text-decoration: none; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover { background: rgba(0, 0, 0, 0.06); text-decoration: none; }

.btn--outline {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink-muted);
}
.btn--outline:hover {
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
}

.btn--destructive {
  background: #ff453a;
  color: #fff;
}
.btn--destructive:hover { background: #e6392f; text-decoration: none; }

.btn--plain {
  background: transparent;
  color: var(--ink);
  padding: 0;
}
.btn--plain:hover { color: var(--accent); }

/* Sizes — apply uniformly. Plain & link override padding back to 0. */
.btn--xs { font-size: 12px; padding: 6px 12px; gap: 6px; }
.btn--sm { font-size: 14px; padding: 8px 16px; gap: 7px; }
.btn--md { font-size: 17px; padding: 12px 22px; gap: 8px; }
.btn--lg { font-size: 19px; padding: 14px 28px; gap: 10px; }
.btn--xl { font-size: 22px; padding: 18px 36px; gap: 12px; }

.btn--plain.btn--xs,
.btn--plain.btn--sm,
.btn--plain.btn--md,
.btn--plain.btn--lg,
.btn--plain.btn--xl,
.btn--link.btn--xs,
.btn--link.btn--sm,
.btn--link.btn--md,
.btn--link.btn--lg,
.btn--link.btn--xl { padding: 0; }

/* Shapes (default = pill) */
.btn--rounded { border-radius: 12px; }
.btn--square { border-radius: 0; }

/* Width */
.btn--block { width: 100%; display: flex; }

/* States */
.btn[disabled],
.btn--disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}
.btn--loading { pointer-events: none; }
.btn--loading .btn-label,
.btn--loading .btn-icon { opacity: 0.55; }
.btn--selected {
  background: var(--ink);
  color: #fff;
}
.btn--selected:hover { background: var(--ink); }

/* Icons */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  line-height: 1;
}
.btn-icon--lead { margin-left: -2px; }
.btn-icon--trail { margin-right: -2px; }

/* Icon-only — square aspect at every size */
.btn--icon-only {
  width: 2.6em;
  padding: 0;
  aspect-ratio: 1 / 1;
}
.btn--icon-only.btn--xs { width: 2em; }
.btn--icon-only.btn--sm { width: 2.3em; }
.btn--icon-only.btn--lg { width: 3em; }
.btn--icon-only.btn--xl { width: 3.4em; }
.btn--icon-only .btn-icon { margin: 0; font-size: 1.15em; }

/* Spinner */
.btn-spinner {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------
 * Buttons showcase section (.buttons schema).
 * Mirrors .numbers / .text-block conventions for headers + theming.
 * ------------------------------------------------------------------ */
.buttons {
  position: relative;
  border-radius: 24px;
  padding: 80px 40px;
  margin-bottom: 12px;
  background: transparent;
  color: var(--ink);
}
.buttons:last-child { margin-bottom: 56px; }
.buttons + .buttons,
.buttons + .text-block,
.text-block + .buttons,
.numbers + .buttons,
.buttons + .numbers,
.hero + .buttons,
.buttons + .hero { margin-top: 0; }

.buttons-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.buttons--left .buttons-head { text-align: left; margin-left: 0; }
.buttons--right .buttons-head { text-align: right; margin-left: auto; margin-right: 0; }
.buttons-head .eyebrow { color: var(--accent); margin-bottom: 12px; }
.buttons-head h2 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.07;
  color: var(--ink);
  margin-bottom: 14px;
}
.buttons-head .lede {
  font-size: 19px;
  line-height: 1.421;
  letter-spacing: 0.011em;
  color: var(--ink-soft);
  max-width: 620px;
}
.buttons--center .buttons-head .lede { margin-left: auto; margin-right: auto; }

.buttons-grid {
  display: grid;
  grid-template-columns: repeat(var(--buttons-cols, 4), minmax(0, 1fr));
  gap: 36px 24px;
  align-items: center;
}
.buttons--row .buttons-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  grid-template-columns: none;
}
.buttons--stack .buttons-grid {
  display: flex;
  flex-direction: column;
  max-width: 360px;
  margin: 0 auto;
  gap: 14px;
  grid-template-columns: none;
}
.buttons--inline .buttons-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  grid-template-columns: none;
}

.buttons-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.buttons--center .buttons-cell { align-items: center; text-align: center; }
.buttons--right .buttons-cell { align-items: flex-end; text-align: right; }
.buttons--row .buttons-cell,
.buttons--inline .buttons-cell { flex-direction: row-reverse; align-items: center; gap: 12px; }
.buttons--row .buttons-caption,
.buttons--inline .buttons-caption { font-size: 11px; }

.buttons-caption {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Section themes */
.buttons--light { background: var(--bg-alt); }
.buttons--dark {
  background: #000;
  color: #f5f5f7;
}
.buttons--dark .buttons-head h2 { color: #f5f5f7; }
.buttons--dark .buttons-head .lede { color: #d2d2d7; }
.buttons--dark .buttons-head .eyebrow { color: #2997ff; }
.buttons--dark .buttons-caption { color: #86868b; }
.buttons--dark .btn--secondary { background: rgba(255, 255, 255, 0.10); color: #f5f5f7; }
.buttons--dark .btn--secondary:hover { background: rgba(255, 255, 255, 0.18); }
.buttons--dark .btn--tertiary { color: #2997ff; }
.buttons--dark .btn--tertiary:hover { background: rgba(41, 151, 255, 0.12); }
.buttons--dark .btn--ghost { color: #f5f5f7; }
.buttons--dark .btn--ghost:hover { background: rgba(255, 255, 255, 0.10); }
.buttons--dark .btn--outline { color: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32); }
.buttons--dark .btn--outline:hover { background: #f5f5f7; color: #000; }
.buttons--dark .btn--plain { color: #f5f5f7; }
.buttons--dark .btn--plain:hover { color: #2997ff; }
.buttons--dark .btn--selected { background: #f5f5f7; color: #000; }
.buttons--dark .btn--selected:hover { background: #f5f5f7; }
.buttons--dark .btn--link { color: #2997ff; }

@media (max-width: 720px) {
  .buttons { padding: 56px 20px; }
  .buttons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
}

/* ------------------------------------------------------------
 * Mockups — device frames (phone, tablet, computer).
 * Pure-CSS chrome wrapping a screen that holds an external image
 * or an in-app simulator (e.g. Telegram).
 * ------------------------------------------------------------ */
.mockup {
  padding: 72px 24px;
  margin-bottom: 12px;
}
.mockup:last-child { margin-bottom: 56px; }
.mockup + .mockup { margin-top: 0; }

.mockup-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
}
.mockup-head .eyebrow { color: var(--accent); margin-bottom: 10px; }
.mockup-head h3 {
  font-family: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}
.mockup-head .lede {
  font-size: 17px;
  line-height: 1.47;
  color: var(--ink-muted);
}
.mockup-head .mockup-body {
  margin-top: 18px;
}
.mockup-head .mockup-body p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.mockup-head .mockup-body p:last-child { margin-bottom: 0; }

/* Split — copy on the left (or right), phone on the other side. On
   narrow screens it collapses into a single column with the phone on
   top and the copy below. */
.mockup--split-left .mockup-split,
.mockup--split-right .mockup-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px;
}
.mockup--split-right .mockup-split { grid-template-columns: auto minmax(0, 1fr); }
.mockup--split-left .mockup-head,
.mockup--split-right .mockup-head {
  text-align: left;
  max-width: 460px;
  margin: 0;
}
@media (max-width: 900px) {
  .mockup--split-left .mockup-split,
  .mockup--split-right .mockup-split {
    grid-template-columns: 1fr;
    gap: 32px;
    justify-items: center;
  }
  .mockup--split-left .mockup-stage,
  .mockup--split-right .mockup-stage { order: 1; }
  .mockup--split-left .mockup-head,
  .mockup--split-right .mockup-head {
    order: 2;
    text-align: center;
    max-width: 540px;
  }
}

.mockup-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1600px;
}

.mockup-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mockup-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--bg-alt);
  color: var(--ink-muted);
  font-size: 13px;
}

/* ---- Phone frame -------------------------------------------- */
.phone-frame {
  position: relative;
  width: 320px;
  aspect-ratio: 9 / 19.5;
  background: #1d1d1f;
  border-radius: 54px;
  padding: 14px;
  box-shadow:
    inset 0 0 0 2px #2c2c2e,
    inset 0 0 0 4px #000,
    0 30px 60px -25px rgba(0, 0, 0, 0.45),
    0 12px 24px -12px rgba(0, 0, 0, 0.25);
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.phone-notch {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 28px;
  background: #000;
  border-radius: 18px;
  z-index: 3;
  pointer-events: none;
}

.phone-side {
  position: absolute;
  background: #2c2c2e;
  border-radius: 2px;
}
.phone-side--power {
  right: -2px;
  top: 132px;
  width: 3px;
  height: 56px;
}
.phone-side--vol-up {
  left: -2px;
  top: 110px;
  width: 3px;
  height: 36px;
}
.phone-side--vol-down {
  left: -2px;
  top: 154px;
  width: 3px;
  height: 36px;
}

/* ---- Telegram simulator ------------------------------------- */
.tg-app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 20% 10%, rgba(0, 136, 204, 0.10) 0, transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(0, 136, 204, 0.10) 0, transparent 40%),
    #e7ebf0;
  font-size: 12px;
  color: #1d1d1f;
}

.tg-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #517da2;
  position: relative;
  z-index: 2;
}
.tg-statusbar-time { letter-spacing: -0.01em; }
.tg-statusbar-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tg-icon-signal,
.tg-icon-wifi,
.tg-icon-battery {
  display: inline-block;
  background: #fff;
  border-radius: 1px;
}
.tg-icon-signal { width: 14px; height: 8px; clip-path: polygon(0 100%, 25% 100%, 25% 75%, 50% 75%, 50% 50%, 75% 50%, 75% 25%, 100% 25%, 100% 0, 100% 100%); }
.tg-icon-wifi { width: 12px; height: 8px; border-radius: 6px 6px 0 0; }
.tg-icon-battery { width: 18px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1px #fff; background: transparent; position: relative; }
.tg-icon-battery::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: #fff;
  border-radius: 1px;
  width: 70%;
}
.tg-icon-battery::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: #fff;
  border-radius: 0 1px 1px 0;
}

.tg-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 8px;
  background: #517da2;
  color: #fff;
}
.tg-back {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.tg-call {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 18px;
  margin-left: auto;
  padding: 0 6px;
  cursor: pointer;
}
.tg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0088cc;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.tg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tg-titles { display: flex; flex-direction: column; min-width: 0; }
.tg-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tg-status {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
}

.tg-thread {
  list-style: none;
  margin: 0;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-width: none;
}
.tg-thread::-webkit-scrollbar { display: none; }

.tg-msg {
  display: flex;
  max-width: 80%;
}
.tg-msg--in { align-self: flex-start; }
.tg-msg--out { align-self: flex-end; }

.tg-bubble {
  padding: 6px 9px 5px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.32;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.tg-msg--in .tg-bubble {
  background: #fff;
  border-bottom-left-radius: 4px;
  color: #1d1d1f;
}
.tg-msg--out .tg-bubble {
  background: #effdde;
  border-bottom-right-radius: 4px;
  color: #1d1d1f;
}

.tg-name {
  font-size: 11px;
  font-weight: 600;
  color: #0088cc;
  margin-bottom: 2px;
}
.tg-text { word-break: break-word; }
.tg-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  margin-left: 8px;
  float: right;
  color: #707579;
  font-size: 10px;
  line-height: 1;
}
.tg-time { font-variant-numeric: tabular-nums; }
.tg-ticks { color: #707579; font-size: 10px; }
.tg-ticks--read { color: #0088cc; }

.tg-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fff;
  border-top: 1px solid #d9d9d9;
}
.tg-attach,
.tg-mic {
  appearance: none;
  border: 0;
  background: transparent;
  color: #707579;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
}
.tg-input {
  flex: 1 1 auto;
  background: #f1f3f4;
  border-radius: 16px;
  padding: 6px 12px;
  color: #9aa0a6;
  font-size: 12px;
}

.tg-composer--live { padding: 6px 8px; }
.tg-input--live {
  appearance: none;
  border: 0;
  outline: none;
  font-family: inherit;
  color: #1d1d1f;
  background: #f1f3f4;
  border-radius: 16px;
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.2;
  width: auto;
  min-width: 0;
}
.tg-input--live::placeholder { color: #9aa0a6; }
.tg-input--live:focus { background: #fff; box-shadow: inset 0 0 0 1px #0088cc; }
.tg-input--live:disabled { opacity: 0.6; }

.tg-send {
  appearance: none;
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0088cc;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
  flex-shrink: 0;
}
.tg-send:hover:not(:disabled) { background: #0077b3; }
.tg-send:active:not(:disabled) { transform: scale(0.94); }
.tg-send:disabled { opacity: 0.5; cursor: default; }

.tg-msg--typing .tg-bubble { padding: 8px 12px 7px; }
.tg-typing {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.tg-typing > span {
  width: 5px;
  height: 5px;
  background: #707579;
  border-radius: 50%;
  animation: tg-typing-bounce 1.2s infinite ease-in-out both;
}
.tg-typing > span:nth-child(1) { animation-delay: -0.24s; }
.tg-typing > span:nth-child(2) { animation-delay: -0.12s; }
@keyframes tg-typing-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.45; }
  40% { transform: scale(1); opacity: 1; }
}

.tg-homebar {
  height: 5px;
  margin: 6px auto 8px;
  width: 110px;
  background: #1d1d1f;
  border-radius: 3px;
  opacity: 0.85;
}

/* ---- Tablet frame ------------------------------------------- */
.tablet-frame {
  position: relative;
  background: #1d1d1f;
  border-radius: 28px;
  padding: 22px 14px;
  box-shadow:
    inset 0 0 0 2px #2c2c2e,
    inset 0 0 0 4px #000,
    0 30px 60px -25px rgba(0, 0, 0, 0.45),
    0 12px 24px -12px rgba(0, 0, 0, 0.25);
}
.mockup--tablet-portrait .tablet-frame {
  width: 420px;
  aspect-ratio: 3 / 4;
}
.mockup--tablet-landscape .tablet-frame {
  width: 640px;
  aspect-ratio: 4 / 3;
  padding: 14px 22px;
}
.tablet-screen {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.tablet-camera {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #2c2c2e;
  border-radius: 50%;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.15);
}
.mockup--tablet-landscape .tablet-camera {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

/* ---- Computer frame ----------------------------------------- */
.computer-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 760px;
}

.computer-bezel {
  position: relative;
  width: 100%;
  background: #1d1d1f;
  border-radius: 14px 14px 4px 4px;
  padding: 22px 18px 18px;
  box-shadow:
    inset 0 0 0 1px #2c2c2e,
    0 24px 48px -28px rgba(0, 0, 0, 0.45);
}
.computer-screen {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #000;
  border-radius: 2px;
  overflow: hidden;
}
.computer-camera {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #2c2c2e;
  border-radius: 50%;
}

/* Laptop: hinge + tapered base */
.computer-hinge {
  width: 100%;
  height: 4px;
  background: linear-gradient(180deg, #2c2c2e 0%, #1d1d1f 100%);
  border-radius: 0 0 4px 4px;
}
.computer-base {
  width: 110%;
  max-width: 840px;
  height: 14px;
  background: linear-gradient(180deg, #d2d2d7 0%, #a1a1a6 100%);
  border-radius: 0 0 14px 14px;
  position: relative;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.3);
}
.computer-base::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 6px;
  background: #1d1d1f;
  border-radius: 0 0 8px 8px;
}

/* Desktop: neck + pedestal */
.computer-neck {
  width: 14px;
  height: 36px;
  background: linear-gradient(180deg, #d2d2d7 0%, #a1a1a6 100%);
  border-radius: 0 0 4px 4px;
}
.computer-stand {
  width: 200px;
  height: 12px;
  background: linear-gradient(180deg, #d2d2d7 0%, #86868b 100%);
  border-radius: 6px;
  box-shadow: 0 8px 14px -6px rgba(0, 0, 0, 0.25);
}

@media (max-width: 720px) {
  .mockup { padding: 48px 16px; }
  .phone-frame { width: 260px; }
  .mockup--tablet-portrait .tablet-frame { width: 320px; }
  .mockup--tablet-landscape .tablet-frame { width: 100%; max-width: 480px; }
  .computer-frame { max-width: 100%; }
  .computer-stand { width: 60%; }
}

/* ─── Showcase slider ──────────────────────────────────────────────────────── */
.showcase {
  padding: 64px 22px;
  max-width: 960px;
  margin: 0 auto;
}
.showcase-head {
  text-align: center;
  margin-bottom: 36px;
}
.showcase-stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}
.showcase-track {
  width: 100%;
  height: 100%;
  position: relative;
}
.showcase-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
.showcase-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.showcase-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.showcase-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms, opacity 200ms;
  opacity: 0;
  color: var(--ink);
}
.showcase-stage:hover .showcase-arrow { opacity: 1; }
.showcase-arrow:hover { background: #fff; }
.showcase-arrow--prev { left: 14px; }
.showcase-arrow--next { right: 14px; }
.showcase-caption {
  padding: 22px 0 0;
}
.showcase-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.showcase-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--rule);
  cursor: pointer;
  transition: background 200ms, width 200ms, border-radius 200ms;
}
.showcase-dot.is-active {
  background: var(--ink);
  width: 22px;
  border-radius: 3px;
}
.showcase-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.showcase-brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 5px;
}
.showcase-title {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 8px;
}
.showcase-desc {
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
  max-width: 68ch;
}
@media (max-width: 720px) {
  .showcase { padding: 40px 16px; }
  .showcase-stage { border-radius: 10px; }
  .showcase-arrow { opacity: 1; width: 34px; height: 34px; }
  .showcase-title { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-slide { transition: opacity 150ms ease; }
}

/* ============================================================
 * Standalone top bar — text brand + nav links + Sign up CTA.
 * (Pages navigate via real <a> links; no SPA tab dropdown.)
 * ============================================================ */
body > header nav a.brand,
body > header nav a.brand:link,
body > header nav a.brand:visited {
  color: #fff;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  align-items: center;
}
body > header nav a.brand:hover { text-decoration: none; opacity: 0.82; }

body > header nav .nav-menu { margin-left: auto; gap: 6px; }

/* a.nav-menu-item links (standalone) reuse the button styles */
body > header nav a.nav-menu-item:hover { text-decoration: none; }

body > header nav .nav-menu-item--cta,
body > header nav a.nav-menu-item--cta:link,
body > header nav a.nav-menu-item--cta:visited {
  background: var(--accent);
  color: #fff;
  padding: 6px 16px;
}
body > header nav .nav-menu-item--cta:hover { background: var(--accent-hover); color: #fff; }
body > header nav .nav-menu-item--cta[aria-current="page"] { background: var(--accent-hover); }

/* ============================================================
 * Form renderer (RENDERERS.form) — centered card, labeled grid.
 * ============================================================ */
.form-block {
  padding: 72px 22px 96px;
  display: flex;
  justify-content: center;
}
.form-inner {
  width: 100%;
  max-width: 560px;
}
.form-head { margin-bottom: 32px; }
.form-head .eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 8px;
}
.form-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.form-lede {
  margin-top: 12px;
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.form-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 20px;
}
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field--full { grid-column: 1 / -1; }
.form-field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.form-req { color: var(--accent); margin-left: 2px; }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 96px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}
.form-actions {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.form-actions .btn--primary { padding: 13px 28px; }
.form-error { color: #d70015; font-size: 14px; }
.form-inner--done {
  text-align: center;
  padding: 48px 0;
}
.form-inner--done h2 {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
@media (max-width: 600px) {
  .form-fields { grid-template-columns: 1fr; }
  .form-block { padding: 48px 20px 72px; }
}