/* SlabFlow marketing site.

   Palette, radius and elevation tokens are copied by hand from the "Quarry Bench" design
   system (slabflow-web/DESIGN.md, mirrored in slabflow-mockup/src/index.css) so this page reads
   as the same product. If the app's palette changes, re-copy the token block below — DESIGN.md
   there is the source of truth, this file is a static mirror of it.

   Layout, motion and type-scale patterns (sticky blurred header, eyebrow labels, ambient
   gradient glows, scroll-linked reveal, bento feature cards, a full-bleed closing band, a
   numbered step strip) are taken from two reference sites Darren pointed at — profitplate.work
   and storium.work — reworked in plain CSS for a repo with no build step and no JS. The hero
   mesh, gradient text, hero "job file" illustration and the brand-gradient icon tiles are this
   page's own invention, built from the mark's own colours rather than copied from either
   reference. Content, the logo and the palette stay SlabFlow's own; see CLAUDE.md / the task
   report for which pattern came from which site. */

@font-face {
  font-family: 'IBM Plex Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url('/fonts/ibm-plex-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --background: #f8f6f3;
  --foreground: #22262d;
  --card: #ffffff;
  --muted: #f1eee9;
  --muted-foreground: #5e636c;
  --border: #dfdad2;
  --primary: #16667a;
  --primary-foreground: #ffffff;
  --secondary: #eae6e0;
  --accent: #eae6e0;
  --ring: #16667a;

  /* The mark's own two blues, sampled from slabflow-mockup/public/brand/icon.png, used as bold
     decorative accents (gradients, icon tiles, connector lines, the hero mesh) rather than for
     body text — `--brand-sky`/`--brand-royal` are tuned so solid white text/icons on them still
     clear 4.5:1. `--brand-sky-ink` is the separate, theme-aware value used where the sky hue
     needs to sit as TEXT directly on the page background (eyebrows) and still pass AA there. */
  --brand-sky: #0c7aad;
  --brand-royal: #0b5fb0;
  --brand-sky-ink: #0b6a99;
  --glow-accent: #1aa3e0;

  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;

  /* Warm-hued shadows in light mode — a neutral-black shadow over these warm neutrals reads
     grey and dirty, same reasoning as the app's own elevation tokens. */
  --shadow-sm: 0 1px 2px rgb(41 33 22 / 0.06), 0 1px 3px rgb(41 33 22 / 0.05);
  --shadow-md: 0 4px 14px -2px rgb(41 33 22 / 0.09), 0 2px 5px -2px rgb(41 33 22 / 0.06);
  --shadow-lg: 0 16px 36px -10px rgb(41 33 22 / 0.16), 0 4px 10px -3px rgb(41 33 22 / 0.08);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #15181c;
    --foreground: #edebe7;
    --card: #1d2126;
    --muted: #22262b;
    --muted-foreground: #9da3ac;
    --border: #333941;
    --primary: #4fb3c9;
    --primary-foreground: #0b2028;
    --secondary: #2a2f35;
    --accent: #2a2f35;
    --ring: #4fb3c9;

    --brand-sky-ink: #3fc3ff;
    --glow-accent: #3fc3ff;

    /* True black shadows in dark mode — nothing warm underneath to muddy, same as the app. */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 14px -2px rgb(0 0 0 / 0.45), 0 2px 5px -2px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 20px 44px -12px rgb(0 0 0 / 0.55), 0 4px 10px -3px rgb(0 0 0 / 0.4);

    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family:
    'IBM Plex Sans Variable', 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--primary);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

img,
svg {
  max-width: 100%;
}

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Header — sticky, translucent + blurred so content passing underneath stays legible. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-mark {
  display: block;
  height: 26px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-nav a.nav-link {
  color: var(--muted-foreground);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: color 150ms ease;
}

.site-nav a.nav-link:hover,
.site-nav a.nav-link:focus-visible {
  color: var(--foreground);
}

/* Narrow header: only the logo, the one "primary" nav link (Contact on the homepage, Home on
   the legal/404 pages) and Sign in stay. Privacy/Terms are marked secondary and drop out —
   they're always reachable from the footer, which never collapses. */
@media (max-width: 640px) {
  .nav-link-secondary {
    display: none;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  min-height: 44px;
  border: 1px solid transparent;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease,
    background-color 150ms ease;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  opacity: 0.92;
}

.btn-secondary {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: var(--secondary);
}

.lift-on-hover:hover,
.lift-on-hover:focus-visible {
  transform: translateY(-2px);
}

/* Ambient depth — a soft radial-gradient mesh in the brand hue plus the mark's own sky-blue,
   with a faint dotted texture, behind alternating section bands (NOT the hero any more — the
   hero has its own bold dark mesh below). Pure CSS, no image assets, painted on a ::before
   layer so it never competes with foreground text for contrast. `--ambient-a-pos` /
   `--ambient-b-pos` place each glow; `.section-ambient--alt` swaps them so adjacent ambient
   sections read as alternating bands. */

.section-ambient {
  position: relative;
  isolation: isolate;
  --ambient-a-pos: 14% -12%;
  --ambient-b-pos: 90% 108%;
}

.section-ambient--alt {
  --ambient-a-pos: 88% -15%;
  --ambient-b-pos: 10% 112%;
}

.section-ambient::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(
      640px circle at var(--ambient-a-pos),
      color-mix(in srgb, var(--primary) 20%, transparent),
      transparent 60%
    ),
    radial-gradient(
      560px circle at var(--ambient-b-pos),
      color-mix(in srgb, var(--glow-accent) 16%, transparent),
      transparent 60%
    ),
    radial-gradient(color-mix(in srgb, var(--foreground) 10%, transparent) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: var(--ambient-a-pos), var(--ambient-b-pos), 0 0;
  mask-image: linear-gradient(to bottom, black, black 85%, transparent);
}

/* Eyebrow label above a section headline. */

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-sky-ink);
  margin: 0 0 12px;
}

/* Gradient text — a bright cyan-to-white shimmer, used once on a key hero phrase. Only ever
   placed over the hero's dark mesh, where both gradient stops clear body-text contrast against
   the background behind them (see the report for the numbers); never used on the plain page
   background. */

.text-gradient {
  background: linear-gradient(100deg, #86e2ff 0%, #ffffff 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Scroll-linked reveal (CSS only — `animation-timeline: view()`, no JS, no library).
   The finished state is the default: `.reveal`/`.reveal-grow` alone paint the fully visible
   final layout, so a browser without `animation-timeline: view()` support sees exactly that.
   Only inside `@supports`, and only without a reduced-motion preference, do elements start
   hidden and animate into place on scroll. */

@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reveal-grow {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.reveal,
.reveal-grow {
  opacity: 1;
  transform: none;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      animation-name: reveal-in;
      animation-timing-function: ease-out;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }

    .reveal-grow {
      opacity: 0;
      transform: scale(0.94);
      animation-name: reveal-grow;
      animation-timing-function: ease-out;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
  }
}

/* Hero — a bold, rich dark mesh built from the mark's own blues plus the brand teal, the same
   in light AND dark mode (a quiet page deserves one loud section, and the mark's colours only
   read as "the logo" when they're saturated, which a subtle light-mode tint can't do). Every
   child color below is fixed rather than theme-driven, since the section deliberately opts out
   of the page's light/dark swap. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 88px 0 84px;
  color: #f2fbff;
  background:
    radial-gradient(900px circle at 6% -15%, rgba(26, 163, 224, 0.55), transparent 55%),
    radial-gradient(760px circle at 100% 6%, rgba(11, 95, 176, 0.55), transparent 58%),
    radial-gradient(640px circle at 70% 118%, rgba(22, 102, 122, 0.65), transparent 62%),
    linear-gradient(160deg, #071b24 0%, #0b2e3d 38%, #0d3550 66%, #0a2540 100%);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.4px, transparent 1.4px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 48px;
}

.hero .eyebrow {
  color: #9fe3ff;
}

.hero h1 {
  font-size: clamp(2.25rem, 1.55rem + 3.2vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 22ch;
  color: #ffffff;
}

.hero p.lede {
  font-size: 1.25rem;
  color: rgba(238, 248, 255, 0.82);
  max-width: 56ch;
  margin: 0 0 32px;
}

.hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero .btn {
  padding: 12px 28px;
  font-size: 1.0625rem;
}

.hero .btn-primary {
  background: linear-gradient(120deg, var(--brand-sky), var(--brand-royal));
  color: #ffffff;
  box-shadow: 0 10px 30px -8px rgba(12, 122, 173, 0.55);
}

.hero .btn-secondary {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.38);
}

.hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Hero visual — a stylised, generic "job file" card: a stage track plus a couple of status
   chips. Deliberately illustrative, not a product screenshot — no real screens, prices, customer
   or shop names, or measurements appear anywhere on it. */

.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.job-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-2xl);
  padding: 26px 24px 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 30px 60px -20px rgba(3, 15, 25, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #ffffff;
  animation: card-float 6s ease-in-out infinite;
}

@keyframes card-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.job-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.job-card-badge {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-sky), var(--brand-royal));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
}

.job-card-label {
  font-weight: 600;
  font-size: 1.0625rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.chip-active {
  background: rgba(79, 211, 255, 0.22);
  color: #cdf1ff;
  margin-left: auto;
}

.chip-active::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6cd4f2;
  flex-shrink: 0;
  animation: chip-pulse 2.2s ease-out infinite;
}

@keyframes chip-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(108, 212, 242, 0.6);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(108, 212, 242, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(108, 212, 242, 0);
  }
}

.stage-track {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.stage-track::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 7px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-sky), var(--brand-royal));
  opacity: 0.5;
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.stage-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.34);
}

.stage.is-done .stage-dot {
  background: linear-gradient(135deg, var(--brand-sky), var(--brand-royal));
  border-color: transparent;
}

.stage.is-active .stage-dot {
  background: #ffffff;
  border-color: #6cd4f2;
  animation: dot-pulse 2.2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 5px rgba(108, 212, 242, 0.3);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(108, 212, 242, 0.12);
  }
}

.stage-label {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.66);
  text-align: center;
}

.stage.is-done .stage-label,
.stage.is-active .stage-label {
  color: #ffffff;
}

.job-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip-outline {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.86);
}

.chip-outline svg {
  flex-shrink: 0;
}

.hero-visual-caption {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

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

  .hero-visual {
    margin-top: 8px;
  }
}

/* Sections */

section {
  padding: 64px 0;
}

section.alt {
  background: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

h2 {
  font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.section-head {
  max-width: 720px;
  margin: 0 0 40px;
}

.section-lede {
  color: var(--muted-foreground);
  font-size: 1.0625rem;
  max-width: 65ch;
  margin: 0;
}

/* Icon tiles — brand-gradient fill, white icon, used for both the feature grid and the
   audience cards so the two read as one visual family. */

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-sky), var(--brand-royal));
  color: #ffffff;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand-royal) 60%, transparent);
  margin-bottom: 18px;
}

.icon-tile-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-sky), var(--brand-royal));
  color: #ffffff;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--brand-royal) 60%, transparent);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.feature-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-sky), var(--brand-royal));
  opacity: 0.9;
}

.feature-card:hover,
.feature-card:focus-within {
  transform: translateY(-5px);
  box-shadow:
    var(--shadow-md),
    0 14px 32px -14px color-mix(in srgb, var(--brand-sky) 45%, transparent);
}

.feature-card h3 {
  font-size: 1.125rem;
  margin: 0 0 8px;
}

.feature-card p {
  margin: 0;
  color: var(--muted-foreground);
}

/* How it works — a numbered step strip, the same five stages as the hero's job-card, joined by
   a gradient connector line. Descriptions are one-line paraphrases of the feature copy above —
   no new claims. */

.steps-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
}

.steps-track::before {
  content: '';
  position: absolute;
  top: 22px;
  left: calc(10% + 4px);
  right: calc(10% + 4px);
  height: 2px;
  background: linear-gradient(90deg, var(--brand-sky), var(--brand-royal));
  opacity: 0.35;
}

.step {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-sky), var(--brand-royal));
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9375rem;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand-royal) 55%, transparent);
}

.step h3 {
  font-size: 1rem;
  margin: 0;
}

.step p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
}

@media (max-width: 860px) {
  .steps-track {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .steps-track::before {
    display: none;
  }
}

.audience-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.audience-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}

.audience-card p {
  margin: 0;
}

.audience-card:hover {
  transform: translateY(-4px);
  box-shadow:
    var(--shadow-md),
    0 12px 26px -14px color-mix(in srgb, var(--brand-sky) 45%, transparent);
}

/* Closing band — a rich, fixed deep-teal-to-royal-blue gradient, the same in both colour
   schemes on purpose (see the report: a theme-driven band here read muddy in light mode and
   jarring in dark mode). White text throughout; the card and buttons below use hardcoded
   colours rather than the theme tokens so contrast holds regardless of `prefers-color-scheme`. */

.closing-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(125deg, #0a2b34 0%, #0d4257 42%, #0b5fb0 100%);
  color: #ffffff;
  border-top: none;
  border-bottom: none;
}

.closing-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(560px circle at 88% -10%, rgba(26, 163, 224, 0.35), transparent 60%);
}

.closing-band .section-head {
  max-width: 640px;
}

.closing-band .eyebrow {
  color: #9fe3ff;
}

.closing-band h2 {
  color: #ffffff;
}

.closing-band .section-lede {
  color: rgba(255, 255, 255, 0.85);
}

.contact-card {
  background: #ffffff;
  color: #20242b;
  border-radius: var(--radius-xl);
  padding: 32px;
  max-width: 640px;
  box-shadow: var(--shadow-lg);
}

.contact-card a {
  color: var(--brand-royal);
}

.contact-card dl {
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
}

.contact-card dt {
  color: #5e636c;
  font-weight: 600;
}

.contact-card dd {
  margin: 0;
}

.btn-on-primary {
  background: #ffffff;
  color: #0b3542;
}

.btn-on-primary:hover {
  opacity: 0.92;
}

.btn-secondary-on-primary {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-secondary-on-primary:hover {
  background: rgba(255, 255, 255, 0.14);
}

.closing-band .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
}

.site-footer .footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-brand .brand-mark {
  height: 18px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.site-footer a {
  color: var(--muted-foreground);
  text-decoration: underline;
}

.site-footer a:hover {
  color: var(--primary);
}

/* Legal pages */

.legal {
  padding: 56px 0 80px;
}

.legal .container {
  max-width: 780px;
}

.legal h1 {
  font-size: 2rem;
  margin-bottom: 4px;
}

.legal .meta {
  color: var(--muted-foreground);
  margin-bottom: 8px;
}

.legal .notice {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin: 20px 0 36px;
  font-size: 0.9375rem;
}

.legal h2 {
  font-size: 1.375rem;
  margin-top: 40px;
}

.legal h3 {
  font-size: 1.125rem;
  margin-top: 28px;
}

.legal ul,
.legal ol {
  padding-left: 1.4rem;
}

.legal li + li {
  margin-top: 6px;
}

/* 404 page */

.error-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}

.error-page h1 {
  font-size: 3rem;
  margin: 0 0 12px;
}

.error-page p {
  color: var(--muted-foreground);
  font-size: 1.125rem;
  margin: 0 0 28px;
}

@media (max-width: 640px) {
  .hero {
    padding: 48px 0 40px;
  }

  section {
    padding: 44px 0;
  }

  .site-header .container {
    flex-wrap: wrap;
  }

  .nav-links {
    gap: 14px;
  }

  .contact-card {
    padding: 24px;
  }

  .audience-card {
    padding: 16px 18px;
  }
}