/* ────────────────────────────────────────────────────────────────
   AviatorWatch marketing site
   Backwoods grass-strip palette: icon-blue sky overhead, weathered
   off-white "hangar paint" for the body, grass-green underfoot in
   the footer. Subtle cross-hatching kept for paper-texture feel.
   Saira Semi Condensed throughout for the hand-painted-sign vibe.
   ──────────────────────────────────────────────────────────────── */

:root {
  /* Sky — matches the app icon gradient */
  --sky-deep:    #3578F7;
  --sky:         #54BAF8;
  --sky-soft:    #DCEEFB;
  --sky-mist:    #F1F8FE;

  /* Hangar paint / aged signage */
  --paint:       #F2EEE2;   /* weathered off-white */
  --paint-deep:  #E5DECC;   /* slightly more aged */
  --paint-rule:  #C8BEA0;   /* subtle dividers */

  /* Ink */
  --ink:         #1F1F23;   /* near-black */
  --ink-soft:    #3D3D44;
  --ink-muted:   #6E6E76;

  /* Grass underfoot */
  --grass:       #4F7A3D;   /* hearty grass-strip green */
  --grass-deep:  #325626;   /* shaded under the wing */
  --grass-mist:  #C9DBB6;   /* sun-bleached tips */

  /* Pop */
  --windsock:    #E8742E;   /* wind-faded orange */
  --runway-paint:#F4F1E8;   /* faded white runway markings */
  --wood:        #8B6E4F;   /* weathered fence post */

  /* Functional (flight categories) */
  --vfr-green:    #4F8A3D;
  --mvfr-blue:    #3D6A9E;
  --ifr-red:      #B5362B;
  --lifr-purple:  #6B3487;

  --runway-black:#1A1A1A;
}

/* ────────────────── Reset + Base ────────────────── */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: "Saira Semi Condensed", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  /* Whole-page sky — deep blue at the top where the hero lives, fading
     to soft sky-mist across the body so dark text stays readable. The
     subtle diagonal crosshatch is retained from the previous design
     but tinted white instead of wood-brown, so it reads as atmospheric
     haze on the blue rather than chart-paper on cream.
     `background-size: 100% 100%` stretches the gradient across the
     entire scrollable document (not the viewport) — iOS Safari doesn't
     reliably honor `background-attachment: fixed`, so this gives
     consistent behavior everywhere. */
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.06) 0,
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px,
      transparent 12px
    ),
    linear-gradient(
      to bottom,
      var(--sky-deep) 0%,
      var(--sky) 18%,
      var(--sky-soft) 55%,
      var(--sky-mist) 100%
    );
  background-size: auto, 100% 100%;
  background-repeat: repeat, no-repeat;
  min-height: 100vh;
  position: relative;
  /* Bottom padding keeps the last bit of content from sliding under the
     fixed footer. Tuned to slim desktop footer height; mobile override below. */
  padding-bottom: 96px;
}

main {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px) clamp(40px, 5vw, 64px);
  position: relative;
  z-index: 1;
}

section {
  padding: clamp(36px, 5vw, 56px) 0;
  /* Subtle haze divider — a hair of white so the line reads on the
     blue sky without being a hard rule. Previous divider was cream,
     which looked like a seam with the old chart-paper background. */
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

section:first-of-type { border-top: none; }

/* ────────────────── Compass watermark removed; using a windsock ────────────────── */
.compass-watermark { display: none; }

/* ────────────────── Typography ────────────────── */

h1, h2, h3 {
  font-family: "Saira Semi Condensed", sans-serif;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}

h1.wordmark {
  /* Slightly smaller ceiling so the hero clears the fold. */
  font-size: clamp(42px, 7.5vw, 64px);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 12px 0 8px;
  color: var(--paint);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

h2 {
  font-size: clamp(22px, 3.4vw, 28px);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.005em;
  margin-bottom: 14px;
  color: var(--ink);
}

p {
  color: var(--ink-soft);
  font-size: clamp(16px, 1.8vw, 18px);
  margin: 0 0 14px;
}

a {
  color: var(--sky-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--windsock); }

.section-note {
  font-size: 14px;
  color: var(--ink-muted);
  font-style: italic;
}

.section-fine-print {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 10px;
}

.inline-link {
  background: none;
  border: none;
  color: var(--sky-deep);
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.inline-link:hover { color: var(--windsock); }

/* ────────────────── Hero — floats on the page's sky gradient ────────────────── */

.hero {
  position: relative;
  text-align: center;
  /* Tightened vs. original (was 48–80 top, 60–88 bottom) so the
     watch mockups below sit above the fold on ~1040px viewports.
     Bottom padding is especially slim since the .watch-showcase
     has its own breathing room immediately below. */
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px) clamp(16px, 2vw, 24px);
}

.hero-inner {
  position: relative;
  z-index: 2;
}

.hero-icon {
  display: inline-block;
  /* Slightly smaller than before (was 124) so the hero fits the
     above-the-fold budget. */
  width: 100px;
  height: 100px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.32),
    0 4px 10px rgba(0, 0, 0, 0.16),
    inset 0 0 0 2px rgba(255, 255, 255, 0.3);
  position: relative;
}

.icon-gradient {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #3578F7 0%, #54BAF8 100%);
  background: linear-gradient(to bottom,
    color(display-p3 0.208 0.478 0.969) 0%,
    color(display-p3 0.329 0.729 0.976) 100%);
  position: relative;
}

.icon-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.2);
}
.icon-layer.icon-ticks { transform: scale(1.1); }

.tagline {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 500;
  font-style: italic;
  color: rgba(255, 255, 255, 0.95);
  /* Tighter bottom margin — the watch mockup provides its own
     top padding via section spacing. */
  margin: 0 auto 4px;
  max-width: 560px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

/* App Store CTA — designed to feel like a hand-painted hangar sign tag */
.cta-row {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.app-store-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 28px;
  background: var(--paint);
  color: var(--ink);
  text-decoration: none;
  border-radius: 6px;
  border: 2px solid var(--ink);
  line-height: 1.1;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), 0 8px 18px rgba(0, 0, 0, 0.18);
  position: relative;
}
.app-store-badge:hover {
  transform: translateY(-2px);
  color: var(--ink);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.4), 0 10px 22px rgba(0, 0, 0, 0.22);
}
.app-store-badge:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.18);
}

.app-store-pre {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}
.app-store-mark {
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.01em;
}
.app-store-soon {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--windsock);
  margin-top: 2px;
  font-weight: 600;
}

/* ────────────────── Intro paragraph ────────────────── */

.intro p {
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.65;
  color: var(--ink);
}

.intro .aside {
  font-style: italic;
  color: var(--ink-muted);
  border-left: 3px solid var(--windsock);
  padding-left: 14px;
  margin-top: 16px;
}

/* ────────────────── Live weather block ────────────────── */

.section-lede {
  margin-bottom: 20px;
}

.nowcast-tile {
  background: var(--runway-black);
  color: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  font-family: "Saira Semi Condensed", sans-serif;
  min-height: 160px;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.nowcast-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--vfr-green);
}

.nowcast-tile[data-cat="MVFR"]::before { background: var(--mvfr-blue); }
.nowcast-tile[data-cat="IFR"]::before  { background: var(--ifr-red); }
.nowcast-tile[data-cat="LIFR"]::before { background: var(--lifr-purple); }

.nowcast-placeholder {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  text-align: center;
  padding: 40px 0;
}

.nowcast-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.nowcast-id {
  font-size: 26px;
  font-weight: 700;
  font-style: italic;
}
.nowcast-badge {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--vfr-green);
  color: #fff;
}
.nowcast-badge[data-cat="MVFR"] { background: var(--mvfr-blue); }
.nowcast-badge[data-cat="IFR"]  { background: var(--ifr-red); }
.nowcast-badge[data-cat="LIFR"] { background: var(--lifr-purple); }

.nowcast-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.nowcast-temp {
  font-size: 38px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
}
.nowcast-temp small {
  font-size: 18px;
  font-weight: 500;
  opacity: 0.7;
}
.nowcast-dewpoint {
  font-size: 13px;
  opacity: 0.6;
  margin-top: 4px;
}

.nowcast-stats {
  text-align: right;
  font-size: 14px;
}
.nowcast-stats .stat-label {
  opacity: 0.55;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
}
.nowcast-stats .stat-value {
  font-weight: 600;
  font-size: 15px;
}

.nowcast-footer {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  flex-wrap: wrap;
}
.nowcast-footer span { opacity: 0.85; }
.nowcast-footer .footer-muted { opacity: 0.5; }

.nowcast-error {
  color: #F5C99B;
  text-align: center;
  padding: 28px 12px;
  font-size: 14px;
}

/* ────────────────── Features checklist ────────────────── */

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

.feature-list li:last-child { border-bottom: none; }

.feat-mark {
  color: var(--sky-deep);
  font-weight: 700;
  flex-shrink: 0;
  width: 16px;
}

/* ────────────────── Complications gallery ────────────────── */

.comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.comp-card {
  margin: 0;
  padding: 16px;
  background: var(--paint-deep);
  border: 1px solid var(--paint-rule);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
}

.comp-card-wide { grid-column: span 2; }
@media (max-width: 480px) { .comp-card-wide { grid-column: span 1; } }

.comp-render {
  width: 100px;
  height: 100px;
  background: var(--runway-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.comp-card-wide .comp-render {
  width: 100%;
  max-width: 280px;
  height: 90px;
  border-radius: 14px;
}

.comp-card figcaption {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.comp-card figcaption strong {
  color: var(--ink);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

/* ────────────────── Honest (what it isn't) ────────────────── */

.honest-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.honest-list li {
  position: relative;
  padding: 10px 0 10px 32px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
}

.honest-list li::before {
  content: "✕";
  position: absolute;
  left: 6px;
  top: 10px;
  color: var(--windsock);
  font-weight: 700;
}

/* ────────────────── Sources ────────────────── */

.source-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.source-list li {
  padding: 12px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.35);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.source-list li:last-child { border-bottom: none; }
.source-list strong { color: var(--ink); font-weight: 600; }

/* ────────────────── Footer — grass underfoot, sticky to bottom ────────────────── */

footer {
  /* Pinned to the viewport bottom so the grass is always underfoot as
     the user scrolls. body's padding-bottom reserves the space so
     content never hides behind it. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background:
    /* Slight green-on-green vertical striations to suggest mowed grass. */
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.04) 0,
      rgba(0, 0, 0, 0.04) 1px,
      transparent 1px,
      transparent 7px
    ),
    linear-gradient(to bottom, var(--grass), var(--grass-deep));
  color: var(--paint);
  border-top: 4px solid var(--grass-deep);
}

/* Mowed-grass highlight band at the top of the footer — reinforces the
   "horizon line" feel where grass meets sky. */
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  pointer-events: none;
}

/* Windsock — planted in the grass (bottom of svg = top edge of footer),
   rising up into the sky above the footer. Position it to the right so
   it doesn't overlap the centered footer text. */
footer .windsock {
  position: absolute;
  bottom: 100%;           /* sit ON the grass, extending up into the sky */
  right: clamp(16px, 6vw, 64px);
  width: 84px;
  height: 110px;
  /* Tiny negative margin so the post appears to sink into the grass,
     not hover above it — 4px overlap reads as "planted." */
  margin-bottom: -4px;
  pointer-events: none;
  z-index: 1;
}

/* Subtle wind ripple — barely perceptible drift to the sock cone. */
@keyframes sockBreath {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(3deg); }
}
.windsock-cone {
  transform-origin: 12px 22px;
  animation: sockBreath 4.2s ease-in-out infinite;
}

.footer-band {
  max-width: 820px;
  margin: 0 auto;
  /* Slim strip — the old 44/36 padding made the grass dominate the
     viewport like a park bench. This reads more like a horizon line. */
  padding: 16px clamp(20px, 4vw, 40px) 12px;
  text-align: center;
  position: relative;
}

.footer-line {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.45;
}

.footer-primary {
  font-weight: 600;
  font-style: italic;
  color: var(--paint);
}
.footer-muted {
  color: rgba(242, 238, 226, 0.75);
  font-size: 12px;
}

.footer-meta {
  margin: 0;
  font-size: 11px;
  color: rgba(242, 238, 226, 0.65);
  letter-spacing: 0.04em;
}

/* ────────────────── Legal page (Privacy, Terms) ────────────────── */

main.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 44px clamp(20px, 5vw, 48px) 80px;
}

.legal-header {
  margin-bottom: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.legal-eyebrow {
  margin: 0 0 14px;
  font-size: 14px;
  letter-spacing: 0.02em;
}
/* The eyebrow sits at the top of the page where the sky gradient is at
   its deepest blue. A light-cream link color echoes the wordmark on the
   home page and keeps enough contrast for tappable affordance. */
.legal-eyebrow a {
  color: var(--paint);
  text-decoration: none;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.legal-eyebrow a:hover {
  text-decoration: underline;
  color: #fff;
}

/* The header block sits on the deepest part of the sky gradient, so the
   title and tagline use the cream paint color (same as the home-page
   wordmark) instead of ink. Ink-on-deep-blue washed out. */
main.legal h1 {
  font-size: clamp(36px, 5vw, 52px);
  font-style: italic;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--paint);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

.legal-tagline {
  margin: 0 0 6px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.92);
  font-style: italic;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.legal-effective {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.legal-section {
  margin: 28px 0;
}

.legal-section h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--ink);
}

.legal-section p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.legal-section ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.legal-section li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.legal-section a {
  color: var(--sky-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.legal-section a:hover { color: var(--ink); }

.legal-section strong {
  color: var(--ink);
  font-weight: 700;
}

.footer-meta a {
  color: rgba(242, 238, 226, 0.8);
  text-decoration: none;
}
.footer-meta a:hover {
  color: var(--paint);
  text-decoration: underline;
}

/* ────────────────── Responsive — mobile sticky footer tuning ────────────────── */

/* On phones the fixed footer can eat too much viewport if left at the
   desktop height. Tighten padding, shrink the windsock, and reduce the
   body's bottom padding in lockstep so the content area doesn't carry
   extra dead space at the bottom. */
@media (max-width: 640px) {
  body {
    padding-bottom: 82px;
  }
  .footer-band {
    padding: 14px 18px 10px;
  }
  .footer-line {
    font-size: 12px;
    margin-bottom: 4px;
  }
  .footer-muted {
    font-size: 11px;
  }
  .footer-meta {
    font-size: 10px;
  }
  footer .windsock {
    width: 58px;
    height: 76px;
    right: 12px;
  }
}

/* Really narrow (iPhone SE etc.) — stack the footer more compactly and
   tuck the windsock tighter. */
@media (max-width: 380px) {
  body {
    padding-bottom: 76px;
  }
  footer .windsock {
    width: 50px;
    height: 66px;
    right: 8px;
  }
}

/* Short viewports (landscape phones) — the fixed footer can cover half
   the screen. Allow it to auto-hide on small heights by dropping its
   vertical padding dramatically. */
@media (max-height: 520px) {
  body {
    padding-bottom: 64px;
  }
  .footer-band {
    padding: 10px 18px 8px;
  }
  footer .windsock {
    width: 48px;
    height: 62px;
  }
}

/* ────────────────── 404 — off the sectional ────────────────── */

main.notfound {
  max-width: 540px;
  margin: 0 auto;
  padding: clamp(60px, 10vw, 120px) clamp(20px, 5vw, 48px) 40px;
  text-align: center;
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.notfound-card {
  width: 100%;
}

/* Tiny caps "squawk" line sitting above the number — a small aviation
   easter egg. 7600 is the transponder code for lost-comms radio failure,
   which maps to "lost your way" pretty directly. */
.notfound-squawk {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 4px;
  text-transform: uppercase;
}

.notfound-code {
  font-size: clamp(96px, 18vw, 150px);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  margin: 0 0 8px;
  color: var(--paint);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
  letter-spacing: -0.03em;
}

.notfound-title {
  font-size: clamp(18px, 2.6vw, 22px);
  font-weight: 600;
  font-style: italic;
  color: var(--paint);
  margin: 0 0 16px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.notfound-body {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 420px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.notfound-actions {
  margin-top: 8px;
}

.notfound-home {
  display: inline-block;
  padding: 12px 22px;
  background: var(--paint);
  color: var(--ink);
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-weight: 700;
  font-style: italic;
  font-size: 15px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.4), 0 7px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.notfound-home:hover {
  transform: translateY(-2px);
  color: var(--ink);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.4), 0 9px 20px rgba(0, 0, 0, 0.22);
}
.notfound-home:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.18);
}

/* ────────────────── Watch mockups showcase ──────────────────
   Sits under the hero as the visual proof. Capped at 640px on
   desktop so the @0.5x source (984×500 native) never gets
   upscaled — that was the source of the fuzziness before. No
   drop shadow: the WebP's transparent edges meant the `filter`
   was drawing a rectangle around the full image box instead of
   hugging the watch silhouettes. */

.watch-showcase {
  border-top: none;
  padding-top: 0;
  padding-bottom: clamp(12px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.watch-showcase .watch-mockup {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
}

.watch-credit {
  margin: 6px 0 0;
  font-size: 12px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.watch-credit a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.watch-credit a:hover { color: var(--paint); }

/* CTA moved below the showcase — tight top padding so it sits
   just under the watches without a section-divider seam. */
.cta-section {
  border-top: none;
  padding: clamp(8px, 1.5vw, 16px) 0 clamp(20px, 4vw, 40px);
  display: flex;
  justify-content: center;
}