/* Mobile composition is the default, expanded at tablet and desktop widths. */
.landing-page .fox-hero-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  align-items: center;
  gap: 1.25rem .75rem;
  min-height: 0;
  padding-top: 0;
}
.landing-page .fox-hero-dashboard {
  grid-column: 1 / -1; grid-row: 1;
  width: 100%; min-width: 0; transform: none;
}
.landing-page .fox-hero-mascot {
  display: block; grid-column: 2; grid-row: 2;
  position: static; width: 100%; max-width: 12rem;
  height: auto; max-height: none; justify-self: center;
}
.landing-page .fox-hero-note {
  display: block; grid-column: 1; grid-row: 2;
  position: static; max-width: none; transform: none; padding: .9rem;
}
.landing-page .organizer-visual {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.5rem; min-height: 0; padding: 1.5rem;
}
.landing-page .organizer-visual .paper-label {
  display: block; position: static; max-width: 100%;
  align-self: flex-start; transform: none;
}
.landing-page .organizer-visual img {
  position: static; width: 100%; height: 19rem;
  object-fit: contain; object-position: center;
}
.landing-page .final-brand-cta {
  grid-template-columns: minmax(0, 1fr); min-height: 0;
  padding-bottom: 1.5rem; padding-right: 1.5rem;
}
.landing-page .final-brand-cta > div { order: 0; }
.landing-page .final-brand-cta > button { order: 1; }
.landing-page .final-brand-fox {
  order: 2; position: static; width: 11rem;
  height: auto; justify-self: center;
}
/* The page and menu already provide these actions, without covering content. */
.landing-page > .fixed:has(.mobile-action-bar) { display: none; }
.landing-page .dashboard-proof { transform: none; }
.landing-page .dashboard-proof > div:first-child { gap: .75rem; }
.landing-page .dashboard-proof > div:first-child > span { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 639px) {
  .landing-header > div { height: 4rem; gap: .5rem; padding-inline: .75rem; }
  .landing-header .brand-logo { gap: .5rem; flex-shrink: 0; }
  .landing-header .brand-logo img { width: 2.25rem; height: 2.25rem; border-radius: .65rem; }
  .landing-header .brand-logo-name { font-size: .9rem; line-height: 1.2; white-space: nowrap; }
  .landing-header .btn-primary { display: none; }
  .landing-header button.hidden.min-h-10 {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    padding-inline: .4rem; font-size: .75rem;
  }
  .landing-header .icon-button { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; padding: .5rem; }
  .landing-header .flex.items-center.gap-2 { gap: .4rem; }
}
/* Component colour tokens apply to every screen size. */
html.dark .landing-page {
  --landing-text: #effcf8; --landing-muted: #b9d1d0;
  --landing-panel: #102c31; --landing-success: #1f6b61;
  --landing-success-text: #ecfff7;
}
html.dark .landing-page .dashboard-proof { border-color: var(--dark-border); }
html.dark .landing-page .dashboard-proof strong,
html.dark .landing-page .dashboard-proof h3 { color: var(--landing-text); }
html.dark .landing-page .dashboard-proof .proof-metric,
html.dark .landing-page .dashboard-proof article.bg-white { background: var(--landing-panel) !important; }
html.dark .landing-page .dashboard-proof .proof-metric span,
html.dark .landing-page .dashboard-proof p { color: var(--landing-muted); }
html.dark .landing-page .dashboard-proof span.bg-emerald-100 {
  background: var(--landing-success); color: var(--landing-success-text) !important;
}
html.dark .landing-page .brand-logo,
html.dark .landing-page .brand-logo-name { color: var(--landing-text); }
@media (min-width: 640px) {
  .landing-page .fox-hero-mascot { max-width: 15rem; }
  .landing-page .organizer-visual img { height: 24rem; }
  .landing-page .final-brand-cta { padding: 2.25rem; }
}
@media (min-width: 1024px) {
  .landing-page .fox-hero-stage { display: flex; min-height: 35rem; padding-top: 0; }
  .landing-page .fox-hero-dashboard { width: 77%; }
  .landing-page .fox-hero-mascot {
    position: absolute; bottom: -1rem; right: -2.5rem;
    width: min(48%, 22rem); max-width: none; max-height: 36rem;
  }
  .landing-page .fox-hero-note {
    position: absolute; top: 1.25rem; right: 0; bottom: auto; left: auto;
    max-width: 12rem; transform: rotate(1.5deg); padding: .75rem .9rem;
  }
  .landing-page .organizer-visual { display: block; min-height: 30rem; padding: 0; }
  .landing-page .organizer-visual .paper-label {
    position: absolute; top: 1.25rem; left: 1.25rem;
    max-width: 13rem; transform: rotate(-1.5deg);
  }
  .landing-page .organizer-visual img {
    position: absolute; inset: auto 3% 2.5%; width: 92%; height: 91%; object-position: bottom center;
  }
  .landing-page .final-brand-cta { grid-template-columns: 1fr auto; min-height: 15rem; padding-right: 17rem; }
  .landing-page .final-brand-fox { position: absolute; bottom: -4.7rem; right: 0; width: 16rem; }
}