/* ===========================================================================
 * The public site (D221) — the landing page at / for a visitor, /see-the-value,
 * and the header and footer the way-in pages share with them.
 *
 * The founders' troph-e.app, rebuilt on the app's tokens: DM Sans in the two
 * weights the app has, the app's gold ramp and pill buttons, surfaces as washes
 * over the dark (never flat fills, never a shadow), and focus drawn with
 * outline. The one addition is the paper band (`.site-paper`) that alternates
 * with the dark, as the founders' page does; its colours are site-only tokens.
 *
 * Phone first: everything is one column until 651px, and nothing scrolls
 * sideways at 320.
 * =========================================================================== */

/* --- The page ------------------------------------------------------------ */

.site {
  background: var(--bg-base);
  overflow-x: clip;
}

.site [hidden],
.site-lightbox [hidden] {
  display: none;
}

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

html:has(body.site) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.site) {
    scroll-behavior: auto;
  }
}

.site section[id] {
  scroll-margin-top: var(--site-header-height);
}

.site-skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--gradient-gold);
  color: var(--text-on-gold);
  font-weight: var(--font-weight-semibold);
  transform: translateY(-200%);
}

.site-skip:focus-visible {
  transform: none;
}

/* The two band colours. Dark is the app's base with its gold glow; paper is
   the founders' warm light band, with its own inks. */
.site-dark {
  background:
    radial-gradient(60% 50% at 85% 0%, var(--gold-wash-hover) 0%, transparent 70%),
    var(--bg-base);
  color: var(--text-primary);
}

.site-paper {
  background: var(--site-paper);
  color: var(--site-ink);
}

.site-paper h1,
.site-paper h2,
.site-paper h3 {
  color: var(--site-ink);
}

.site-paper p {
  color: var(--site-ink-secondary);
}

/* --- Type ----------------------------------------------------------------- */

.site-eyebrow {
  margin: 0 0 var(--space-5);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--site-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-100);
}

.site .site-paper .site-eyebrow {
  color: var(--site-gold-ink);
}

.site-display,
.site-hero-title {
  margin: 0;
  font-size: var(--site-type-display);
  line-height: var(--site-leading-display);
  letter-spacing: var(--site-tracking-display);
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
}

.site-hero-title {
  font-size: var(--site-type-hero);
}

/* The founders set a phrase in gold for emphasis. No italics anywhere in the
   app's type (styleguide §3), so emphasis is the colour alone. */
.site-display em,
.site-hero-title em {
  font-style: normal;
  color: var(--gold-100);
}

.site-paper .site-display em {
  color: var(--site-gold-ink);
}

.site-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  font-weight: var(--font-weight-semibold);
  color: var(--text-gold);
}

.site-paper .site-text-link {
  color: var(--site-gold-ink);
}

.site-text-link:focus-visible,
.site-zoom:focus-visible,
.site-header a:focus-visible,
.site-footer a:focus-visible {
  outline: var(--focus-ring-outline);
  outline-color: var(--focus-colour-neutral);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.site-paper .site-text-link:focus-visible,
.site-paper .site-zoom:focus-visible {
  outline-color: var(--site-gold-ink);
}

/* The app's primary button at the sticky CTA's height, the size the
   founders' page gives its calls to action. */
.site .site-button {
  height: var(--cta-height);
  padding: 0 var(--space-6);
}

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: var(--z-topbar);
  border-bottom: var(--border-width) solid var(--divider);
}

/* Over the landing's hero: pinned, with the founders' dark fade so the links
   read over the photograph, and a blur behind it. */
.site-header--overlay {
  position: fixed;
  inset: 0 0 auto;
  border-bottom: 0;
  background: linear-gradient(to bottom, var(--site-scrim), var(--site-scrim-soft) 70%, transparent);
  backdrop-filter: blur(var(--blur-overlay));
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--site-max-width);
  height: var(--site-header-height-phone);
  margin: 0 auto;
  padding: 0 var(--site-gutter);
}

.site-header__brand {
  display: flex;
  flex: none;
  color: inherit;
}

.site-header__logo {
  width: var(--site-logo-width-phone);
  height: auto;
}

.site-header__nav {
  display: none;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
}

.site-header__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  white-space: nowrap;
  font-size: var(--type-body-size);
  color: var(--text-secondary);
}

.site-header__link--wide {
  display: none;
}

.site-header__nav a {
  color: var(--text-secondary);
  font-size: var(--type-body-size);
}

@media (hover: hover) {
  .site-header__nav a:hover,
  .site-header__link:hover {
    color: var(--text-primary);
    text-decoration: none;
  }
}

.site .site-header__cta,
.shell--entry .site-header__cta {
  height: var(--button-height);
  padding: 0 var(--space-4);
}

/* A phone shows the logo, Sign in and the demo button, tightened below 420;
   below 360 the demo button gives way, so the way in is never squeezed out. */
@media (max-width: 419px) {
  .site-header__inner,
  .site-header__actions {
    gap: var(--space-3);
  }

  .site-header__logo {
    width: var(--site-logo-width-small);
  }

  .site .site-header__cta,
  .shell--entry .site-header__cta {
    padding: 0 var(--space-3);
  }
}

@media (max-width: 359px) {
  .site-header__cta {
    display: none;
  }
}

@media (min-width: 651px) {
  .site-header__inner {
    height: var(--site-header-height);
  }

  .site-header__logo {
    width: var(--site-logo-width);
  }

  .site-header__link--wide {
    display: inline-flex;
  }
}

@media (min-width: 1001px) {
  .site-header__nav {
    display: flex;
    gap: var(--space-8);
    margin-left: auto;
  }

  .site-header__actions {
    margin-left: auto;
  }
}

/* The way-in pages: the bar is a plain rule over the ambient base, and the
   column below is the player's (D37). */
.shell--entry .site-header {
  flex: none;
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  border-top: var(--border-width) solid var(--divider);
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: var(--space-10) var(--site-gutter);
}

.site-footer__logo {
  width: var(--site-logo-width-phone);
  height: auto;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: var(--text-secondary);
}

/* "Built by" credit: the Hyper logo is black, so it is turned light for the
   dark footer and kept quiet until hovered or focused. */
.site-footer__credit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-footer__credit .site-footer__credit-link {
  min-height: var(--touch-target-min);
}

.site-footer__credit-logo {
  height: var(--space-4);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.6;
}

.site-footer__credit-link:hover .site-footer__credit-logo,
.site-footer__credit-link:focus-visible .site-footer__credit-logo {
  opacity: 1;
}

@media (min-width: 651px) {
  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* --- Zoomable pictures and the lightbox ----------------------------------- */

.site-zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}

.site-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--easing-standard);
}

@media (hover: hover) {
  .site-zoom:hover img {
    transform: scale(var(--site-image-zoom));
  }
}

.site-lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--space-16) var(--space-2) var(--space-6);
  border: 0;
  background: var(--site-scrim-strong);
  color: var(--text-primary);
  backdrop-filter: blur(var(--overlay-blur));
}

.site-lightbox[open] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

.site-lightbox::backdrop {
  background: transparent;
}

.site-lightbox__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
}

.site-lightbox__image {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: var(--border-width) solid var(--border-default);
}

.site-lightbox__caption {
  max-width: var(--site-measure);
  text-align: center;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--text-secondary);
}

.site-lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

@media (min-width: 651px) {
  .site-lightbox {
    padding: var(--space-8);
  }

  .site-lightbox[open] {
    gap: var(--space-4);
  }

  .site-lightbox__image {
    max-height: 82vh;
  }
}

/* --- The analytics banner on the public site (D217) ----------------------- */

.analytics-consent--site {
  bottom: var(--space-5);
  max-width: var(--shell-player-width);
  margin: 0 var(--space-4) var(--space-5) auto;
}

@media (min-width: 651px) {
  .analytics-consent--site {
    margin-right: var(--site-gutter);
  }
}

/* ===========================================================================
 * The landing page
 * =========================================================================== */

.landing > section {
  padding: var(--site-section-space) var(--site-gutter);
}

.landing-section-head {
  max-width: var(--site-measure-wide);
  margin-bottom: var(--space-16);
}

/* --- Hero ------------------------------------------------------------------ */

.landing .landing-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--site-hero-phone-min-height);
  padding-top: var(--site-header-height-phone);
  padding-bottom: var(--space-10);
  overflow: hidden;
  background: var(--site-black);
}

.landing-hero__media img {
  position: absolute;
  top: var(--site-header-height-phone);
  left: 0;
  width: 100%;
  height: 58%;
  object-fit: cover;
  object-position: right top;
}

/* The phone fade: the picture sits in the top half and the copy reads on
   near-black below it. */
.landing-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--site-scrim-strong) 0%, var(--site-scrim-strong) 36%, var(--site-scrim) 52%, transparent 76%);
  pointer-events: none;
}

.landing-hero__copy,
.landing-hero__caption {
  position: relative;
  z-index: 1;
}

.landing-hero__copy {
  max-width: var(--site-hero-measure);
}

.landing-hero__title {
  margin: 0 0 var(--space-6);
  font-size: var(--site-type-hero);
  line-height: var(--site-leading-display);
  letter-spacing: var(--site-tracking-display);
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
}

.landing-hero__lead {
  max-width: var(--site-measure);
  font-size: var(--site-type-lead);
  line-height: 1.4;
  color: var(--text-secondary);
}

.landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
}

.landing-hero__caption {
  display: none;
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--site-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

@media (min-width: 651px) {
  .landing .landing-hero {
    justify-content: center;
    min-height: max(100svh, var(--site-hero-min-height));
    padding-top: var(--site-header-height);
  }

  .landing-hero__media img {
    top: 0;
    height: 100%;
    object-position: center;
  }

  .landing-hero::after {
    background:
      linear-gradient(90deg, var(--site-scrim) 0%, var(--site-scrim-soft) 45%, transparent 62%),
      linear-gradient(0deg, var(--site-scrim-soft), transparent 42%);
  }

}

@media (min-width: 1001px) {
  .landing-hero__caption {
    display: block;
    position: absolute;
    right: var(--site-gutter);
    bottom: var(--space-6);
  }
}

/* --- Statement ------------------------------------------------------------- */

.landing .landing-statement {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-16);
}

.landing-statement__body {
  max-width: var(--site-measure);
  font-size: var(--site-type-body);
  line-height: 1.5;
}

@media (min-width: 1001px) {
  .landing .landing-statement {
    grid-template-columns: 0.8fr 2fr 1.1fr;
    gap: var(--space-10);
    align-items: start;
  }
}

/* --- The four renders ------------------------------------------------------ */

.landing .landing-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2);
}

.landing-gallery__tile {
  height: var(--site-tile-height);
  margin: 0;
  overflow: hidden;
  background: var(--site-black);
}

@media (min-width: 651px) {
  .landing .landing-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-4);
  }
}

@media (min-width: 1001px) {
  .landing .landing-gallery {
    grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  .landing-gallery__tile {
    height: calc(var(--site-tile-height) * 0.82);
  }

  .landing-gallery__tile--tall {
    height: var(--site-tile-height);
  }
}

/* --- Three ways to create -------------------------------------------------- */

.landing-modes__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.landing-mode {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

.landing-mode--featured {
  border-color: var(--warning-border);
  background:
    radial-gradient(circle at 75% 80%, var(--gold-wash-active), transparent 40%),
    var(--surface-1);
}

.landing-mode__number {
  font-size: var(--type-caption-size);
  color: var(--text-muted);
}

.landing-mode__kicker {
  margin-top: var(--space-4);
  font-size: var(--type-caption-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--site-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-100);
}

.landing-mode__title {
  max-width: var(--site-mode-title-measure);
  font-size: var(--site-type-title);
  line-height: 1.05;
  letter-spacing: var(--site-tracking-display);
}

.landing-mode__body {
  max-width: var(--site-measure);
}

.landing-mode__visual {
  position: relative;
  height: var(--site-mode-visual-height);
  margin-top: auto;
  padding-top: var(--space-4);
}

.landing-mode__visual > .site-zoom {
  border: var(--border-width) solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--plate-render);
}

.landing-mode__visual > .site-zoom img {
  object-fit: contain;
  padding: var(--space-2);
}

.landing-mode__label {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--scrim);
  backdrop-filter: blur(var(--scrim-blur));
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--site-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  pointer-events: none;
}

.landing-mode__label--top {
  top: var(--space-2);
  bottom: auto;
  left: var(--space-2);
  z-index: 1;
}

.landing-elite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-6) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-2) 0;
  align-items: stretch;
}

.landing-elite__half {
  position: relative;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--plate-render);
}

.landing-elite__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-100);
}

.landing-elite__caption {
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--text-tertiary);
}

@media (min-width: 1001px) {
  .landing-modes__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .landing-mode {
    padding: var(--space-8);
  }
}

/* --- It was what the trophy meant ----------------------------------------- */

.landing .landing-showcase {
  padding-top: 0;
}

.landing-split {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.landing-split__body {
  max-width: var(--site-measure);
  font-size: var(--site-type-body);
  line-height: 1.5;
  color: var(--text-tertiary);
}

.landing-showcase__scene {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--site-black);
}

@media (min-width: 651px) {
  .landing-showcase__scene {
    aspect-ratio: 16 / 8.8;
  }
}

@media (min-width: 1001px) {
  .landing-split {
    grid-template-columns: 0.8fr 1.6fr 1fr;
    gap: var(--space-10);
    align-items: start;
  }
}

/* --- How it works ---------------------------------------------------------- */

.landing .landing-how {
  display: grid;
  gap: var(--space-10);
}

.landing-how__body {
  max-width: var(--site-measure);
  margin-top: var(--space-8);
  font-size: var(--site-type-body);
  line-height: 1.5;
}

.landing-steps {
  margin: 0;
  padding: 0;
  border-top: var(--border-width) solid var(--site-rule);
}

.landing-step {
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-8) 0;
  border-bottom: var(--border-width) solid var(--site-rule);
}

.landing-step__number {
  font-size: var(--type-caption-size);
  font-weight: var(--font-weight-semibold);
  color: var(--site-gold-ink);
}

.landing-step__title {
  margin-bottom: var(--space-2);
  font-size: var(--site-type-step);
  line-height: 1.15;
  letter-spacing: var(--site-tracking-display);
}

@media (min-width: 1001px) {
  .landing .landing-how {
    grid-template-columns: 1fr 1fr;
    gap: 9vw;
  }

  .landing-how__copy {
    position: sticky;
    top: calc(var(--site-header-height) + var(--space-10));
    align-self: start;
  }
}

/* --- The cabinet ----------------------------------------------------------- */

.landing .landing-cabinet {
  display: grid;
  gap: var(--space-16);
  align-items: center;
  background:
    radial-gradient(circle at 75% 45%, var(--gold-wash-active), transparent 32%),
    var(--bg-base);
}

.landing-cabinet__body {
  max-width: var(--site-measure);
  margin-top: var(--space-8);
  font-size: var(--site-type-body);
  line-height: 1.5;
}

.landing-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: var(--space-10) 0 0;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  overflow: hidden;
}

.landing-proof__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-bottom: var(--border-width) solid var(--divider);
}

.landing-proof__item:last-child {
  border-bottom: 0;
}

.landing-proof dt {
  font-size: var(--type-h3-size);
  font-weight: var(--font-weight-semibold);
  color: var(--gold-100);
}

.landing-proof dd {
  margin: 0;
  color: var(--text-tertiary);
}

.landing-cabinet__device {
  justify-self: center;
  width: min(var(--site-cabinet-width), 100%);
}

.landing-cabinet__device img {
  width: 100%;
  height: auto;
}

@media (min-width: 651px) {
  .landing-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-proof__item:nth-child(odd) {
    border-right: var(--border-width) solid var(--divider);
  }

  .landing-proof__item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (min-width: 1001px) {
  .landing .landing-cabinet {
    grid-template-columns: 1fr 0.78fr;
    gap: 9vw;
  }
}

/* --- What could your club create? ----------------------------------------- */

.landing .landing-teaser {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  border-top: var(--border-width) solid var(--warning-border);
  border-bottom: var(--border-width) solid var(--warning-border);
  background: var(--site-band);
}

.landing-teaser .site-display {
  margin-bottom: var(--space-5);
}

.landing-teaser__body {
  max-width: var(--site-measure);
  font-size: var(--site-type-body);
}

@media (min-width: 801px) {
  .landing .landing-teaser {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-10);
  }

  .landing-teaser .site-button {
    flex: none;
  }
}

/* --- More meaning for players ---------------------------------------------- */

.landing-value__intro {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.landing-value__body {
  max-width: var(--site-measure);
  font-size: var(--site-type-lead);
  line-height: 1.5;
}

.landing-value__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--border-width) solid var(--site-rule);
  border-left: var(--border-width) solid var(--site-rule);
}

.landing-value__cell {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  border-right: var(--border-width) solid var(--site-rule);
  border-bottom: var(--border-width) solid var(--site-rule);
}

.landing-value__number {
  font-size: var(--type-caption-size);
  color: var(--site-gold-ink);
}

.landing-value__title {
  margin: var(--space-10) 0 var(--space-4);
  font-size: var(--site-type-step);
  line-height: 1.15;
  letter-spacing: var(--site-tracking-display);
}

@media (min-width: 651px) {
  .landing-value__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1001px) {
  .landing-value__intro {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 7vw;
    align-items: end;
  }

  .landing-value__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .landing-value__title {
    margin-top: var(--space-16);
  }
}

/* --- Closing call ---------------------------------------------------------- */

.landing .landing-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--site-cta-min-height);
  overflow: hidden;
  text-align: center;
  background: var(--site-black);
}

.landing-cta__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: brightness(0.3) saturate(0.92);
}

.landing-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--site-scrim-soft), var(--site-scrim) 70%);
}

.landing-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--site-measure-wide);
}

.landing-cta .site-display {
  margin-bottom: var(--space-6);
}

.landing-cta__body {
  max-width: var(--site-measure);
  margin-bottom: var(--space-8);
  font-size: var(--site-type-lead);
  line-height: 1.45;
}

/* ===========================================================================
 * /see-the-value
 * =========================================================================== */

.value > section {
  padding: var(--site-section-space) var(--site-gutter);
}

.value .value-intro {
  padding-top: var(--space-16);
}

.value-intro__lead {
  max-width: var(--site-measure);
  margin-top: var(--space-6);
  font-size: var(--site-type-lead);
  line-height: 1.45;
}

.value-packages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: var(--site-measure);
  margin-top: var(--space-10);
}

.value-package {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-5);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-standard),
              border-color var(--duration-fast) var(--easing-standard);
}

.value-package:hover {
  background: var(--surface-2);
}

.value-package[aria-pressed="true"] {
  border-color: var(--gold-100);
  background: var(--gold-wash-selected);
}

.value-package__name {
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--site-tracking-eyebrow);
  color: var(--gold-100);
}

.value-package__price {
  font-size: var(--site-type-title);
  line-height: 1.1;
  font-weight: var(--font-weight-semibold);
}

.value-package:focus-visible,
.value-scenario:focus-visible,
.value-stepper__button:focus-visible,
.value-award:focus-visible {
  outline: var(--focus-ring-outline);
  outline-color: var(--focus-colour-neutral);
  outline-offset: var(--focus-ring-offset);
}

.site-paper .value-scenario:focus-visible,
.site-paper .value-stepper__button:focus-visible {
  outline-color: var(--site-gold-ink);
}

/* --- The workshop ---------------------------------------------------------- */

.value-workshop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.value-meter {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: var(--space-2) var(--space-8);
  min-width: min(100%, var(--dashboard-card-min));
}

.value-meter__figure {
  display: flex;
  flex-direction: column;
}

.value-meter__figure strong {
  font-size: var(--site-type-title);
  line-height: 1.1;
  font-weight: var(--font-weight-semibold);
}

.value-meter__figure span,
.value-meter small {
  font-size: var(--type-caption-size);
  color: var(--site-ink-tertiary);
}

.value-meter__bar {
  grid-column: 1 / -1;
  height: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--site-rule);
  overflow: hidden;
}

.value-meter__bar span {
  display: block;
  height: 100%;
  background: var(--site-gold-ink);
  transition: width var(--duration-base) var(--easing-standard);
}

.value-meter small {
  grid-column: 1 / -1;
}

.value-scenarios {
  margin-bottom: var(--space-6);
}

.value-scenarios__label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--site-tracking-eyebrow);
  color: var(--site-gold-ink);
}

.value-scenarios__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.value-scenario {
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--site-rule);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--site-ink);
  font: inherit;
  cursor: pointer;
}

.value-scenario:hover {
  border-color: var(--site-ink-tertiary);
}

.value-scenario[aria-pressed="true"] {
  border-color: var(--site-ink);
  background: var(--site-ink);
  color: var(--site-paper);
}

.value-tiers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.value-tier {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6);
  border: var(--border-width) solid var(--site-rule);
  border-radius: var(--radius-lg);
}

.value-tier__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.value-tier__number {
  font-size: var(--type-eyebrow-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--site-tracking-eyebrow);
  color: var(--site-gold-ink);
}

.value-tier__title {
  font-size: var(--site-type-step);
  line-height: 1.15;
  letter-spacing: var(--site-tracking-display);
}

.value-tier small {
  font-weight: var(--font-weight-semibold);
  color: var(--site-ink);
}

.value-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.value-stepper__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border: var(--border-width) solid var(--site-rule);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--site-ink);
  cursor: pointer;
}

.value-stepper__button:hover {
  border-color: var(--site-ink);
}

.value-stepper__button:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.value-stepper__count {
  font-size: var(--site-type-title);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.value-workshop__note {
  margin-top: var(--space-5);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

@media (min-width: 801px) {
  .value-tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- The collection -------------------------------------------------------- */

.value-collection__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.value-collection__head p:last-child {
  margin-top: var(--space-4);
  max-width: var(--site-measure);
}

.value-collection__total {
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  font-size: var(--type-caption-size);
  color: var(--text-secondary);
}

.value-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--site-value-tile-min), 40%), 1fr));
  gap: var(--space-3);
}

.value-award {
  position: relative;
  aspect-ratio: 3 / 4;
  border: var(--border-width) solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--plate-render);
}

.value-award__label {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(0deg, var(--site-scrim-strong), transparent);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--tracking-eyebrow);
  white-space: nowrap;
  color: var(--text-tertiary);
}

.value-award__label b {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.value-collection__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  text-align: center;
}

.value-collection__more p {
  font-size: var(--type-caption-size);
  color: var(--text-tertiary);
}

.value-collection__disclaimer {
  max-width: var(--site-measure-wide);
  margin: var(--space-10) auto 0;
  text-align: center;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--text-tertiary);
}

/* --- Close ----------------------------------------------------------------- */

.value .value-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
  background: var(--site-paper-deep);
}

.value-end .site-display {
  max-width: var(--site-measure-wide);
}

.value-end__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
}

/* "Troph-e" never breaks at its own hyphen. */
.site-nowrap {
  white-space: nowrap;
}

/* A button on paper: the gold button's white ring (D30) vanishes on the light
   band, so it takes the paper's gold ink, like every other control there. */
.site-paper .ui-button:focus-visible,
.site-paper .ui-button--primary:focus-visible {
  outline-color: var(--site-gold-ink);
}

/* The page under an open lightbox does not scroll; <dialog> alone leaves it
   free. And a horizontal swipe is the viewer's, not the browser's, so the
   pointer events that step through the pictures arrive on a touchscreen. */
html.site-lightbox-open {
  overflow: hidden;
}

.site-lightbox {
  touch-action: pan-y;
}