/* ==========================================================================
   Strider — playstrider.com
   Soft-dark theme mirroring the app's in-app palette.
   Hand-written, no framework, no external requests, no trackers.

   Contents
     1.  Tokens
     2.  Base
     3.  Layout helpers
     4.  Reveal on scroll
     5.  Header
     6.  Buttons
     7.  Hero
     8.  Marquee strip
     9.  Feature sections (alternating)
     10. Mock UI (stands in for screenshots)
     11. Card grid
     12. Closing CTA
     13. Footer
     14. Legal / long-form pages
     15. 404
     16. Breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces — straight from the app's soft-dark palette */
  --bg: #2c2c2e;
  --surface: #3a3a3c;
  --chip: #48484a;
  --separator: #5a5a5c;

  /* Brand */
  --brand: #73b37c;
  --brand-strong: #86c48e;
  --brand-muted: rgba(115, 179, 124, 0.18);
  --brand-faint: rgba(115, 179, 124, 0.08);
  --brand-line: rgba(115, 179, 124, 0.35);

  /* Type — all AA or better against --bg */
  --text: #f5f5f7;
  --text-secondary: #a9a9ae;
  --text-tertiary: #8e8e93;

  /* Shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.65);

  /* Rhythm */
  --gutter: 20px;
  --measure: 1120px;
  --nav-h: 60px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

p {
  margin: 0;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  color: var(--brand-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

ul {
  margin: 0;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--brand-muted);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--brand);
  color: #1f2a21;
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus {
  left: 0;
  text-decoration: none;
}

.eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Reveal on scroll
   Driven by one IntersectionObserver in app.js. Elements are only hidden
   once JS confirms it is running, so the page is fully readable without it.
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children of a revealed group. */
.js .reveal[data-delay="1"] { transition-delay: 0.08s; }
.js .reveal[data-delay="2"] { transition-delay: 0.16s; }
.js .reveal[data-delay="3"] { transition-delay: 0.24s; }
.js .reveal[data-delay="4"] { transition-delay: 0.32s; }
.js .reveal[data-delay="5"] { transition-delay: 0.40s; }
.js .reveal[data-delay="6"] { transition-delay: 0.48s; }

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

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* .is-scrolled is toggled in app.js past the first scroll threshold. */
.site-header.is-scrolled {
  background: rgba(44, 44, 46, 0.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--separator);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--nav-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.wordmark:hover {
  color: var(--text);
  text-decoration: none;
}

/* Logo tile.
   The mark is near-black (#161616), so it would vanish against the page
   background. Setting it on a white rounded tile reads as the app icon —
   which is what it is — and keeps the brand colours untouched. */
.logo-tile {
  flex: none;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.logo-tile img {
  display: block;
  width: 78%;
  height: 78%;
}

.wordmark .logo-tile {
  width: 30px;
  height: 30px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.site-nav .link {
  display: none;
  padding: 8px 12px;
  color: var(--text-secondary);
  border-radius: var(--r-sm);
}

.site-nav .link:hover {
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--brand);
  color: #1f2a21; /* 5.5:1 against the brand green */
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--brand-strong);
  color: #1f2a21;
}

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

.btn-secondary:hover {
  background: var(--surface);
  border-color: var(--chip);
  color: var(--text);
}

.btn-sm {
  padding: 9px 16px;
  font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 64px;
  text-align: center;
}

/* Soft brand glow behind the headline. */
.hero::before {
  content: "";
  position: absolute;
  top: -260px;
  left: 50%;
  width: 820px;
  height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    var(--brand-muted) 0%,
    rgba(115, 179, 124, 0) 68%
  );
  pointer-events: none;
}

.hero > * {
  position: relative;
}

/* Oversized app icon above the headline — the standard app-landing shape. */
.hero-mark {
  width: 88px;
  height: 88px;
  margin: 0 auto 28px;
  border-radius: 21px;
  box-shadow: var(--shadow-lg);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 12px;
  margin-bottom: 26px;
  background: var(--brand-muted);
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  color: var(--brand-strong);
  font-size: 14px;
  font-weight: 600;
}

.badge .dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

.badge .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}

.hero h1 {
  max-width: 16ch;
  margin-inline: auto;
  font-size: clamp(2.25rem, 7.4vw, 3.875rem);
  letter-spacing: -0.035em;
}

.hero h1 .accent {
  color: var(--brand);
}

.hero .lede {
  max-width: 56ch;
  margin: 22px auto 0;
  color: var(--text-secondary);
  font-size: clamp(1.0625rem, 2.4vw, 1.1875rem);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.cta-note {
  margin-top: 16px;
  color: var(--text-tertiary);
  font-size: 14px;
}

.hero-stage {
  margin-top: 56px;
}

/* --------------------------------------------------------------------------
   8. Marquee strip
   -------------------------------------------------------------------------- */

.strip {
  padding: 22px 0;
  border-block: 1px solid var(--separator);
  background: rgba(0, 0, 0, 0.12);
}

.strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 28px;
  list-style: none;
}

.strip li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-secondary);
  font-size: 14.5px;
  font-weight: 500;
}

.strip svg {
  flex: none;
  color: var(--brand);
}

/* --------------------------------------------------------------------------
   9. Feature sections (alternating)
   -------------------------------------------------------------------------- */

.section {
  padding: 72px 0;
}

.section + .section {
  border-top: 1px solid var(--separator);
}

.section-head {
  max-width: 62ch;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(1.625rem, 4.4vw, 2.25rem);
}

.section-head p {
  margin-top: 14px;
  color: var(--text-secondary);
}

.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

.feature + .feature {
  margin-top: 88px;
}

.feature h2 {
  font-size: clamp(1.5rem, 4.2vw, 2rem);
}

.feature p {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 1.0625rem;
}

.feature .points {
  margin-top: 22px;
  list-style: none;
  display: grid;
  gap: 12px;
}

.feature .points li {
  position: relative;
  padding-left: 28px;
  color: var(--text-secondary);
  font-size: 15.5px;
}

.feature .points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-faint);
}

/* --------------------------------------------------------------------------
   10. Mock UI — CSS-drawn stand-ins for real screenshots.
   Each block is self-contained; swap any .mock for an <img> later.
   -------------------------------------------------------------------------- */

.mock {
  position: relative;
  padding: 22px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

.mock-stack {
  display: grid;
  gap: 14px;
}

.mock-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mock-label {
  color: var(--text-tertiary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mock-title {
  font-size: 1.0625rem;
  font-weight: 700;
}

.mock-sub {
  color: var(--text-secondary);
  font-size: 14px;
}

/* Level ring — conic gradient, no SVG needed. */
.ring {
  flex: none;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: conic-gradient(
    var(--brand) 0turn,
    var(--brand) 0.72turn,
    var(--chip) 0.72turn,
    var(--chip) 1turn
  );
}

.ring::before {
  content: "";
  position: absolute;
}

.ring .ring-inner {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  background: var(--surface);
  border-radius: 50%;
  line-height: 1.1;
  text-align: center;
}

.ring .lvl {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ring .num {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* XP bar */
.bar {
  height: 10px;
  background: var(--chip);
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-strong));
  border-radius: 999px;
}

/* Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.chips li {
  padding: 7px 13px;
  background: var(--chip);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
}

.chips li.on {
  background: var(--brand-muted);
  border: 1px solid var(--brand-line);
  color: var(--brand-strong);
}

/* Stat tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tile {
  padding: 14px 12px;
  background: var(--chip);
  border-radius: var(--r-md);
  text-align: center;
}

.tile .v {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.tile .k {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Feed rows */
.feed {
  display: grid;
  gap: 10px;
  list-style: none;
}

.feed li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--chip);
  border-radius: var(--r-md);
}

.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--brand);
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
}

.feed .who {
  font-size: 14.5px;
  font-weight: 600;
}

.feed .what {
  color: var(--text-secondary);
  font-size: 13px;
}

.feed .xp {
  margin-left: auto;
  flex: none;
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Watch metrics */
.metrics {
  display: grid;
  gap: 10px;
}

.metric {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  background: var(--chip);
  border-radius: var(--r-md);
}

.metric .v {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.metric .u {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.metric .k {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   11. Card grid
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.card {
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.card .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  background: var(--brand-muted);
  border-radius: 13px;
  color: var(--brand);
}

.card h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.card p {
  margin-top: 9px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   12. Closing CTA
   -------------------------------------------------------------------------- */

.cta-panel {
  position: relative;
  overflow: hidden;
  padding: 56px 28px;
  background: var(--surface);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-xl);
  text-align: center;
}

.cta-panel::before {
  content: "";
  position: absolute;
  top: -160px;
  left: 50%;
  width: 620px;
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    var(--brand-muted) 0%,
    rgba(115, 179, 124, 0) 70%
  );
  pointer-events: none;
}

.cta-panel > * {
  position: relative;
}

.cta-panel h2 {
  max-width: 20ch;
  margin-inline: auto;
  font-size: clamp(1.625rem, 4.6vw, 2.25rem);
}

.cta-panel p {
  max-width: 52ch;
  margin: 16px auto 0;
  color: var(--text-secondary);
}

/* Contact addresses under the CTA */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 760px;
  margin: 44px auto 0;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  text-align: left;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.contact-card:hover {
  background: var(--chip);
  border-color: var(--brand-line);
  text-decoration: none;
}

.contact-card .label {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.contact-card .addr {
  color: var(--brand);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding: 40px 0 52px;
  border-top: 1px solid var(--separator);
  color: var(--text-tertiary);
  font-size: 14px;
}

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

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

.footer-links a {
  color: var(--text-secondary);
}

.footer-links a:hover {
  color: var(--text);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   14. Legal / long-form pages
   -------------------------------------------------------------------------- */

.legal {
  padding: 52px 0 72px;
}

.legal-inner {
  max-width: 720px;
  margin-inline: auto;
}

.legal h1 {
  font-size: clamp(1.875rem, 5.5vw, 2.5rem);
}

.legal .updated {
  margin-top: 14px;
  color: var(--text-tertiary);
  font-size: 14px;
}

.legal-body {
  margin-top: 40px;
}

.legal-body h2 {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--separator);
  font-size: 1.3125rem;
}

.legal-body > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-body h3 {
  margin-top: 30px;
  font-size: 1.0625rem;
}

.legal-body p,
.legal-body ul,
.legal-body ol {
  margin-top: 16px;
  color: #e2e2e6;
  font-size: 16px;
  line-height: 1.7;
}

.legal-body ul,
.legal-body ol {
  padding-left: 22px;
}

.legal-body li {
  margin-top: 9px;
}

.legal-body li::marker {
  color: var(--brand);
}

.legal-body strong {
  color: var(--text);
  font-weight: 600;
}

.legal-body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Table of contents */
.toc {
  margin-top: 32px;
  padding: 22px 24px;
  background: var(--surface);
  border-radius: var(--r-md);
}

.toc h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.toc ol {
  margin-top: 14px;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 15px;
}

.toc li {
  margin-top: 7px;
}

.toc li::marker {
  color: var(--text-tertiary);
}

/* Callout used for the contact block at the end of the policy. */
.callout {
  margin-top: 26px;
  padding: 22px 24px;
  background: var(--surface);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.callout p {
  margin-top: 0;
}

.callout p + p {
  margin-top: 10px;
}

/* Build-time placeholder. Deliberately loud — it must never ship unnoticed. */
.placeholder {
  margin-top: 32px;
  padding: 26px 24px;
  background: rgba(255, 214, 10, 0.09);
  border: 1px dashed rgba(255, 214, 10, 0.55);
  border-radius: var(--r-md);
}

.placeholder h2 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  color: #ffd60a;
  font-size: 1rem;
  letter-spacing: 0;
}

.placeholder p {
  margin-top: 10px;
  color: #e2e2e6;
  font-size: 15px;
}

.placeholder code {
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   15. 404
   -------------------------------------------------------------------------- */

.center-page {
  display: grid;
  place-items: center;
  min-height: 62vh;
  padding: 60px 0;
  text-align: center;
}

.center-page h1 {
  font-size: clamp(2rem, 6vw, 2.75rem);
}

.center-page p {
  max-width: 46ch;
  margin: 16px auto 0;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   16. Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 560px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 700px) {
  :root {
    --gutter: 28px;
  }

  .site-nav .link {
    display: inline-flex;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero {
    padding: 88px 0 80px;
  }

  .section {
    padding: 96px 0;
  }

  .cta-panel {
    padding: 72px 48px;
  }
}

@media (min-width: 960px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .feature {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }

  .feature + .feature {
    margin-top: 128px;
  }

  /* Alternate: even feature blocks put the visual on the left. */
  .feature.flip .feature-text {
    order: 2;
  }

  .feature.flip .feature-visual {
    order: 1;
  }

  .hero {
    padding: 112px 0 88px;
  }
}