/* ----------------------------------------------------------------
   Match Cut — shared styles for landing, about, support, beta and
   privacy pages. Structure is shared with wander-site; the brand
   layer is what differs.

   The palette comes from the app itself: the teal of the icon's
   ground, and the SMPTE test-pattern colors the app uses for its
   verdict and rating buttons. The wordmark is set in Comic Neue,
   which is the face on the app's own launch screen, so the site and
   the first thing you see on opening the app agree.

   The hero is a painted gradient rather than a photograph. Match Cut
   has no photography of its own, and a stock image would say less
   than the color the app already owns.
   ---------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');

:root {
  --color-text: #1c1c1e;
  --color-text-muted: #4a4a4f;
  --color-bg: #f2f5f5;
  --color-card: #ffffff;
  --color-link: #006666;
  --color-link-hover: #004d4d;
  --color-accent: #006666;
  --color-rule: rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-device: 0 30px 80px rgba(0, 0, 0, 0.22), 0 10px 24px rgba(0, 0, 0, 0.12);
  --radius-card: 18px;
  --radius-icon: 22.5%;
  --hero-overlay: linear-gradient(180deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.06) 35%,
    rgba(0, 0, 0, 0.22) 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #ececef;
    --color-text-muted: #b2b2b6;
    --color-bg: #101616;
    --color-card: #1a2222;
    --color-link: #4db8b8;
    --color-link-hover: #7ad1d1;
    --color-rule: rgba(255, 255, 255, 0.08);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  color-scheme: light dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--color-link-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

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

.hero {
  position: relative;
  min-height: 480px;
  padding: 96px 24px 80px;
  text-align: center;
  background-image: radial-gradient(120% 90% at 50% 0%, #0a8f8f 0%, #008080 45%, #005f5f 100%);
  color: white;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .hero {
    background-image: radial-gradient(120% 90% at 50% 0%, #0a6b6b 0%, #005252 45%, #003636 100%);
  }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}

/* The emoji field: fire for Match, scissors for Cut, popcorn and clapperboard
   for the films. The tile itself repeats on the axes, and the whole layer is
   rotated here rather than the tile being built on the diagonal, which would
   have to solve for a lattice that still tiles after rotation. Inset by half
   the hero's size so the rotated square still covers the corners, and the
   hero's own overflow clip does the rest.

   Drawn at 80%. The emoji are the decoration rather than a texture under it,
   so they stay close to full strength; the small step back only takes the
   hardest edge off against the teal. */
.hero::after {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: url("pattern.svg");
  background-repeat: repeat;
  background-size: 150px 150px;
  transform: rotate(45deg);
  opacity: 0.8;
  pointer-events: none;
}
/* The emoji field occupies the level the hero's children used to sit on, so
   the whole ladder moved up one: content 2, nav 3, dropdown 4. Raising only
   the content is what put the open menu behind the app icon, since the nav
   was left level with its own siblings and lost on DOM order. */
.hero > * { position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), 0 4px 28px rgba(0, 0, 0, 0.55);
  margin: 0 0 12px;
}
/* Comic Neue is the *brand-name* wordmark, not a generic h1 style — so
   it's scoped to the landing-page hero only. The compact heroes on
   `support.html` / `privacy.html` carry page titles ("Support",
   "Privacy Policy"), which should keep their system-stack font so
   they read as section headings rather than as brand marks. */
.hero:not(.compact) h1 {
  font-family: 'Comic Neue', 'Comic Sans MS', cursive;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hero p.tagline {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 400;
  opacity: 1;
  /* Two shadows rather than one: a tight dark halo that separates the letters
     from whatever emoji sits behind them, and a wider soft one for depth. The
     alternative was fading the emoji, which is the thing being asked for. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 18px rgba(0, 0, 0, 0.65);
  margin: 0 auto 32px;
  max-width: 36ch;
}
.hero .hero-icon {
  width: 132px;
  height: 132px;
  border-radius: var(--radius-icon);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
  margin: 0 auto 28px;
}
.hero-actions {
  margin-top: 28px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Compact hero variant for support / privacy pages */
.hero.compact {
  min-height: 280px;
  padding: 80px 24px 56px;
}
.hero.compact .hero-icon {
  width: 88px;
  height: 88px;
  margin-bottom: 20px;
}

/* ---------- Layout ---------- */

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 24px;
}

.wrap.narrow { max-width: 720px; }

/* ---------- Cards ---------- */

.card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  padding: 32px 36px;
  margin: 0 0 24px;
  box-shadow: var(--shadow-card);
}
.card h2 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}
.card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 22px 0 4px;
}
.card h3:first-of-type { margin-top: 0; }
.card p { margin: 0 0 12px; color: var(--color-text); }
.card p:last-child { margin-bottom: 0; }
.card ol, .card ul { margin: 0 0 12px 24px; }
.card li { margin-bottom: 6px; }
.card a { font-weight: 500; }

/* ---------- Feature sections (landing page) ---------- */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 64px 0;
  border-bottom: 1px solid var(--color-rule);
}
.feature:last-of-type { border-bottom: none; }
.feature.reverse .feature-copy { order: 2; }
.feature.reverse .feature-image { order: 1; }

.feature-copy h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--color-text);
}
.feature-copy p {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 38ch;
}

.feature-image img {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  /* Concentric corners: sized so the corner curve keeps even spacing
     around the playback bar (capsule radius ≈61px + 62px side gap ≈ 123px
     on the 1320×2868 capture → 9.3% of width / 4.3% of height). The
     hardware 62pt corner is larger than concentric and read as
     over-rounded against the in-app chrome. x/y percentages keep the
     curve circular and scale with the rendered size. */
  border-radius: 9.3% / 4.3%;
  box-shadow: var(--shadow-device);
}

/* iPad showcase: a wider cap so the 4:3 iPad shot reads as the larger
   device rather than shrinking to the phone width. */
.feature-image.ipad img {
  max-width: 460px;
  /* iPad Pro 13": measured from the simulator's screen mask —
     ~29pt corners → 2.12% of width / 2.82% of height. */
  border-radius: 2.12% / 2.82%;
}

@media (max-width: 720px) {
  .feature {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 0;
    text-align: center;
  }
  .feature.reverse .feature-copy,
  .feature.reverse .feature-image { order: initial; }
  .feature-copy p { margin: 0 auto; }
}

/* ---------- Privacy callout strip ---------- */

.privacy-strip {
  background: var(--color-card);
  padding: 56px 24px;
  text-align: center;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.privacy-strip h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.privacy-strip p {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  max-width: 50ch;
  margin: 0 auto;
}

.closing-cta {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}
/* The brand word ("Wander" in the closing CTA, "Wanders." in the
   Activities section headline) gets the same Comic Neue treatment as the
   hero h1 and topnav wordmark (see
   `.hero:not(.compact) h1` for context). Reusable `.brand` utility. */
.brand {
  font-family: 'Comic Neue', 'Comic Sans MS', cursive;
  font-weight: 700;
}

/* ---------- App Store badge ---------- */

.btn-primary {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.btn-primary:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.app-store-badge {
  display: inline-block;
}
.app-store-badge img {
  height: 56px;
  width: auto;
  display: block;
}

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

footer {
  text-align: center;
  padding: 40px 24px 56px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  border-top: 1px solid var(--color-rule);
}
footer p { margin: 0 0 8px; }
footer a { margin: 0 6px; }
footer a:not(:last-child)::after {
  content: "·";
  margin-left: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  display: inline-block;
}

/* ---------- Top navigation ---------- */
/* Overlays the photographic hero. White text with the same soft shadow
   the hero headline uses, so it stays legible on the sunrise photo. */

.hero .topnav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
}
.hero .topnav .wordmark {
  font-family: 'Comic Neue', 'Comic Sans MS', cursive;
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.hero .topnav .wordmark:hover {
  color: white;
  opacity: 0.85;
  text-decoration: none;
}
/* Hamburger button. Sits in place of the old inline link row —
   white stroke with the same soft drop-shadow the hero headline
   uses so it stays legible over the photographic background.
   Hit target is 44×44 (Apple's standard minimum). */
.hero .topnav .nav-toggle {
  background: transparent;
  border: none;
  padding: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  border-radius: 10px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  transition: background-color 0.18s ease;
}
.hero .topnav .nav-toggle:hover {
  background-color: rgba(255, 255, 255, 0.12);
}
.hero .topnav .nav-toggle:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

/* Dropdown menu. Anchored to the upper-right of the hero. Animated
   in via opacity + slight translateY for a smooth open. Hidden via
   `visibility: hidden` + `pointer-events: none` rather than
   `display: none`, so the transition runs in both directions and
   keyboard users can't tab into closed-menu links. */
.hero .topnav .nav-links {
  position: absolute;
  top: calc(100% + 6px);
  right: 28px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 8px;
  background: var(--color-card);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.hero .topnav .nav-toggle[aria-expanded="true"] + .nav-links {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
.hero .topnav .nav-links a {
  display: block;
  padding: 10px 14px;
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.98rem;
  border-radius: 8px;
  text-shadow: none;
}
.hero .topnav .nav-links a:hover {
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  opacity: 1;
}
.hero .topnav .nav-links a[aria-current="page"] {
  color: var(--color-link);
  background: var(--color-bg);
}

@media (max-width: 480px) {
  .hero .topnav { padding: 16px 18px; }
  .hero .topnav .nav-links { right: 18px; min-width: 170px; }
}

/* ---------- Releases page ---------- */

/* Each release sits on a `.card` and adds a small header treatment
   for the version + date. The version reads as the dominant element
   so the page scans like a timeline ("ah, 1.1 — what changed").
   Date stays muted, matching the tone of the rest of the site
   (warm, archival, not corporate changelog). */
.release-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 14px;
}
.release-header h2 {
  font-family: 'Comic Neue', 'Comic Sans MS', cursive;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-text);
}
.release-meta {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
/* The hero's ground is dark in both schemes, so the muted body color
   disappears against it. */
.hero .release-meta {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 18px rgba(0, 0, 0, 0.65);
}
.hero .release-meta a { color: #fff; }
.release ul { margin-top: 0; }
.release p { color: var(--color-text-muted); }
.release p + ul { margin-top: 6px; }

@media (max-width: 480px) {
  .release-header { gap: 10px; }
  .release-header h2 { font-size: 1.7rem; }
  .release-meta { font-size: 0.88rem; }
}