:root {
  --hub-cream: #fff7ee;
  --hub-surface: #fffcf7;
  --hub-soft: #fbebd7;
  --hub-red: #c13a2e;
  --hub-red-dark: #9e2f25;
  --hub-gold: #97590f;
  --hub-ink: #4a2c21;
  --hub-muted: #6b5544;
  --hub-line: #f2e2cd;
}

* { box-sizing: border-box; }

html.hub-root,
html.hub-root body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.hub-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(46% 35% at 4% 5%, rgba(251, 235, 215, .95), transparent 70%),
    radial-gradient(42% 32% at 96% 1%, rgba(255, 226, 178, .55), transparent 72%),
    var(--hub-cream);
  color: var(--hub-ink);
  font-family: Nunito, Arial, sans-serif;
}

.hub-page a { color: inherit; }

.hub-main {
  width: min(100% - 32px, 1180px);
  min-height: 0;
  flex: 1 1 auto;
  margin-inline: auto;
  padding: 12px 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
}

.hub-hero,
.hub-closing,
.hub-card {
  background: rgba(255, 252, 247, .96);
  border: 1px solid var(--hub-line);
  box-shadow: 0 12px 34px rgba(74, 44, 33, .07);
}

.hub-hero {
  min-height: 0;
  padding: 17px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr);
  gap: 20px;
  align-items: center;
  border-radius: 22px;
}

.hub-kicker {
  margin: 0 0 4px;
  color: var(--hub-gold);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hub-hero h1 {
  margin: 0;
  font-size: clamp(31px, 3.5vw, 48px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1;
}

.hub-lead {
  max-width: 72ch;
  margin: 8px 0 0;
  color: var(--hub-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.38;
}

.hub-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.hub-proof div {
  min-width: 0;
  padding: 9px 8px;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--hub-soft);
  border-radius: 13px;
}

.hub-proof strong {
  color: var(--hub-red-dark);
  font-size: 19px;
  line-height: 1;
}

.hub-proof span {
  margin-top: 4px;
  color: var(--hub-muted);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.hub-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  counter-reset: hub-card;
}

.hub-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hub-grid--eight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hub-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hub-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 4px solid var(--hub-red);
  border-radius: 16px;
  text-decoration: none;
  counter-increment: hub-card;
}

.hub-card::after {
  content: counter(hub-card, decimal-leading-zero);
  position: absolute;
  top: 12px;
  right: 13px;
  color: rgba(193, 58, 46, .09);
  font-size: clamp(36px, 5vw, 70px);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: 1;
  pointer-events: none;
}

.hub-card > * {
  position: relative;
  z-index: 1;
}

.hub-card:hover,
.hub-card:focus-visible {
  background: var(--hub-soft);
  border-color: var(--hub-red-dark);
  transform: translateY(-1px);
}

.hub-card span {
  color: var(--hub-gold);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.1;
  text-transform: uppercase;
}

.hub-card h2 {
  margin: 4px 0 3px;
  color: var(--hub-ink);
  font-size: clamp(13px, 1.25vw, 17px);
  font-weight: 900;
  line-height: 1.1;
}

.hub-card p {
  margin: 0;
  color: var(--hub-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}

.hub-card b {
  margin-top: 7px;
  color: var(--hub-red-dark);
  font-size: 9px;
  font-weight: 900;
}

.hub-closing {
  min-height: 0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 16px;
}

.hub-closing h2 {
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 1.1;
}

.hub-closing p {
  margin: 0;
  color: var(--hub-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}

.hub-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex: 0 0 auto;
}

.hub-button,
.hub-text-link {
  white-space: nowrap;
  font-size: 10px;
  font-weight: 900;
}

.hub-button {
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--hub-red-dark);
  color: #fff !important;
  text-decoration: none;
}

.hub-button:hover,
.hub-button:focus-visible { background: var(--hub-red); }

.hub-text-link {
  color: var(--hub-red-dark) !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.error-main {
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
}

.error-card {
  width: min(860px, 100%);
  padding: clamp(18px, 4vw, 36px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .7fr);
  align-items: center;
  gap: clamp(18px, 4vw, 42px);
}

.error-card::after { display: none; }

.error-card h1 {
  margin: 0;
  max-width: 13ch;
  font-size: clamp(31px, 4.6vw, 52px);
  letter-spacing: -.04em;
  line-height: 1;
}

.error-card .hub-actions { justify-content: flex-start; margin-top: 18px; }
.error-art { width: min(100%, 300px); height: auto; justify-self: center; }

@media (max-width: 900px) {
  .hub-main {
    width: min(100% - 18px, 1180px);
    padding: 7px 0;
    gap: 6px;
  }

  .hub-hero {
    padding: 10px 12px;
    display: block;
    border-radius: 16px;
  }

  .hub-hero h1 { font-size: clamp(23px, 7vw, 30px); }
  .hub-lead { margin-top: 5px; font-size: 10.5px; line-height: 1.28; }

  .hub-proof {
    margin-top: 7px;
    gap: 5px;
  }

  .hub-proof div { padding: 5px 4px; border-radius: 9px; }
  .hub-proof strong { font-size: 15px; }
  .hub-proof span { font-size: 6.5px; }

  .hub-grid,
  .hub-grid--five,
  .hub-grid--eight,
  .hub-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .hub-grid--five .hub-card:last-child,
  .hub-grid--three .hub-card:last-child { grid-column: 1 / -1; }

  .hub-card {
    padding: 7px 8px;
    border-top-width: 3px;
    border-radius: 11px;
  }

  .hub-card::after {
    top: 7px;
    right: 8px;
    font-size: 34px;
  }

  .hub-card span { font-size: 6.5px; }
  .hub-card h2 { margin: 2px 0; font-size: 11px; }
  .hub-card p { font-size: 8px; line-height: 1.15; }
  .hub-card b { margin-top: 3px; font-size: 7px; }

  .hub-closing {
    padding: 7px 8px;
    gap: 8px;
    border-radius: 11px;
  }

  .hub-closing h2 { font-size: 10px; }
  .hub-closing p { font-size: 7.5px; }
  .hub-actions { gap: 7px; }
  .hub-button { padding: 6px 9px; font-size: 8px; }
  .hub-text-link { font-size: 8px; }

  .error-card {
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: center;
    gap: 1px;
    padding: 9px 13px;
    text-align: center;
  }

  .error-copy { order: 2; }
  .error-card h1 { margin-inline: auto; font-size: clamp(24px, 8vw, 33px); }
  .error-card .hub-lead { display: block; margin-inline: auto; }
  .error-card .hub-actions { justify-content: center; margin-top: 10px; }
  .error-art { order: 1; width: min(38vw, 150px); }
}

@media (max-width: 370px), (max-height: 700px) {
  .hub-main { padding: 5px 0; gap: 4px; }
  .hub-hero { padding: 7px 9px; }
  .hub-kicker { font-size: 7px; }
  .hub-hero h1 { font-size: 21px; }
  .hub-lead { font-size: 9px; }
  .hub-proof { margin-top: 4px; }
  .hub-proof div { padding: 4px 3px; }
  .hub-proof strong { font-size: 13px; }
  .hub-proof span { font-size: 5.8px; }
  .hub-card { padding: 5px 7px; }
  .hub-card h2 { font-size: 10px; }
  .hub-card p { display: none; }
  .hub-card b { font-size: 6.5px; }
  .hub-closing { padding: 5px 7px; }
  .hub-closing p { display: none; }
  .error-card h1 { font-size: 22px; }
  .error-card .hub-lead { display: block; font-size: 10px; }
  .error-card .hub-actions { margin-top: 7px; }
  .error-art { width: min(27vw, 105px); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Readability floor: remove optional microcopy before shrinking essential text. */
@media (max-width: 900px) {
  .hub-proof span,
  .hub-card span,
  .hub-card b,
  .hub-closing p,
  .hub-button,
  .hub-text-link { font-size: 9px; }

  .hub-card p { font-size: 9px; }
}

@media (max-width: 370px), (max-height: 700px) {
  .hub-kicker,
  .hub-proof span,
  .hub-card b { font-size: 9px; }

  .hub-lead { font-size: 10px; }
  .hub-card span { display: none; }
  .hub-card h2 { font-size: 11px; }
  .hub-closing h2 { font-size: 10px; }
}

/* Compact phones: unlock page scroll and keep a 14px type floor. Desktop lock is unchanged. */
@media (max-width: 900px) {
  html.hub-root,
  html.hub-root body {
    height: auto;
    min-height: 100%;
    overflow: auto;
  }

  .hub-page {
    height: auto;
    min-height: 100svh;
  }

  .hub-main {
    height: auto;
    grid-template-rows: auto auto auto;
  }

  .hub-kicker,
  .hub-proof span,
  .hub-card span,
  .hub-card p,
  .hub-card b,
  .hub-closing p,
  .hub-button,
  .hub-text-link {
    font-size: 14px;
  }

  .hub-lead,
  .error-card .hub-lead {
    font-size: 15px;
    line-height: 1.4;
  }

  .hub-proof strong {
    font-size: 16px;
  }

  .hub-card h2,
  .hub-closing h2 {
    font-size: 16px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .hub-card p,
  .hub-closing p {
    display: block;
  }

  .hub-closing {
    flex-direction: column;
    align-items: flex-start;
  }

  .hub-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .hub-button,
  .hub-text-link {
    white-space: normal;
  }
}

@media (max-width: 370px), (max-height: 700px) {
  html.hub-root,
  html.hub-root body {
    height: auto;
    overflow: auto;
  }

  .hub-kicker,
  .hub-proof span,
  .hub-card span,
  .hub-card p,
  .hub-card b,
  .hub-closing p,
  .hub-button,
  .hub-text-link {
    font-size: 14px;
  }

  .hub-card span,
  .hub-card p,
  .hub-closing p {
    display: block;
  }

  .hub-lead,
  .error-card .hub-lead {
    font-size: 15px;
  }

  .hub-proof strong {
    font-size: 16px;
  }

  .hub-card h2,
  .hub-closing h2 {
    font-size: 16px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .hub-closing {
    flex-direction: column;
    align-items: flex-start;
  }

  .hub-main {
    flex: 0 1 auto;
    align-content: start;
  }

  .hub-grid,
  .hub-grid--five,
  .hub-grid--eight,
  .hub-grid--three {
    align-content: start;
    align-items: stretch;
    height: auto;
  }

  .hub-card {
    justify-content: flex-start;
    height: auto;
    min-height: 0;
  }

  .hub-card::after {
    top: 8px;
    right: 8px;
    font-size: 18px;
  }

  .hub-proof {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .hub-proof div:first-child {
    grid-column: 1 / -1;
    place-content: start;
    text-align: left;
    padding: 10px 12px;
  }

  .hub-proof span {
    text-transform: none;
    letter-spacing: .01em;
    line-height: 1.4;
    white-space: normal;
  }
}

/* Mobile hub cards: content height, small numerals, readable stats. Applies at 390x844 too. */
@media (max-width: 900px) {
  .hub-main {
    flex: 0 1 auto;
    align-content: start;
  }

  .hub-grid,
  .hub-grid--five,
  .hub-grid--eight,
  .hub-grid--three {
    align-content: start;
    align-items: start;
    height: auto;
  }

  .hub-card {
    justify-content: flex-start;
    height: auto;
    min-height: 0;
  }

  .hub-card::after {
    top: 8px;
    right: 8px;
    font-size: 18px;
  }

  .hub-proof {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .hub-proof div:first-child {
    grid-column: 1 / -1;
    place-content: start;
    text-align: left;
    padding: 10px 12px;
  }

  .hub-proof span {
    text-transform: none;
    letter-spacing: .01em;
    line-height: 1.4;
    white-space: normal;
  }
}