/*
  OxVegas showcase theme (redesign concept — not the production stylesheet).
  Modeled on the real marketing posters in "oxvegas media/" (mainposter.png,
  poster_alt.png, appstorefrontcover.png) and Apple's own product-launch
  pages: white/light canvas, huge system-font headlines, the real product
  photography doing the work instead of decoration. Colors/red still match
  OxVegas/App/Theme/ColorTokens.swift; bar logos are the real remote URLs
  from VenueData.swift's `barLogos`.
*/

:root {
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --bg-soft2: #eceef1;

  --ink: #1d1d1f;
  --ink-secondary: #6e6e73;
  --ink-tertiary: #86868b;
  --line: rgba(0, 0, 0, 0.08);
  --line-soft: rgba(0, 0, 0, 0.05);

  --brick: #c8102e;
  --brick-deep: #8a0000;
  --blue: #3b82f6;

  --wait-low: #1fae5f;
  --wait-mid: #c98a12;
  --wait-high: #d9463f;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.22, 1.26, 0.36, 1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 1180px;
}

* { box-sizing: border-box; }

html { background: var(--bg); scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
  color: var(--ink);
}

.section-soft { background: var(--bg-soft); }

/* ---------- Nav ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line-soft);
}

.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 52px; transition: height 0.25s var(--ease-out); }

.site-nav { transition: box-shadow 0.25s var(--ease-out), background 0.25s var(--ease-out); }
.site-nav.is-scrolled { background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 0 var(--line); }
.site-nav.is-scrolled .wrap { height: 46px; }
.site-nav.is-scrolled .brand-logo { height: 19px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }

/* Real logo asset (assets/brand/oxvegas-logo.png), not a built-from-CSS
   imitation — see redesign/assets/brand/README.md. */
.brand-logo { height: 22px; width: auto; display: block; flex: none; transition: height 0.25s var(--ease-out); }

.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--ink); }
.nav-links a { text-decoration: none; color: var(--ink); opacity: 0.8; transition: opacity 0.15s ease; }
.nav-links a:hover { opacity: 1; }

.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }

@media (max-width: 860px) {
  .nav-links { display: none; }
}

/* Below ~380px even the two nav buttons don't fit beside the logo — this is
   what was overflowing the viewport and forcing a horizontal scrollbar.
   Drop "Contact" from the bar (it lives in its own section now, linked from
   the footer too) and let the primary CTA shrink instead of wrapping. */
@media (max-width: 480px) {
  .site-nav .wrap { padding: 0 14px; }
  .nav-actions .btn-outline { display: none; }
  .nav-actions .btn-sm { padding: 8px 13px; font-size: 12.5px; }
  .brand-logo { height: 19px; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease-out, opacity 0.12s ease-out, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.btn:active { transform: scale(0.96); opacity: 0.85; }

.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }

.btn-brick { background: var(--brick); color: #fff; }
.btn-brick:hover { background: var(--brick-deep); }

.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-outline:hover { border-color: var(--ink-tertiary); }

.btn-ghost { background: var(--bg-soft); color: var(--ink); }
.btn-ghost:hover { background: var(--bg-soft2); }

.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-block { width: 100%; }

/* Real "Download on the App Store" pill, recreated in markup rather than
   traced from a screenshot so it stays crisp at any size. */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px 10px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: transform 0.12s ease-out, opacity 0.12s ease-out, background 0.15s ease;
}

.store-badge:hover { background: #000; }
.store-badge:active { transform: scale(0.97); opacity: 0.9; }
.store-badge svg { flex: none; }
.store-badge .lines { display: flex; flex-direction: column; line-height: 1.05; }
.store-badge .lines .small { font-size: 10.5px; font-weight: 400; opacity: 0.9; }
.store-badge .lines .big { font-size: 18.5px; font-weight: 600; letter-spacing: -0.01em; margin-top: 1px; }

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

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

.hero .wrap { position: relative; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-secondary);
  margin-bottom: 18px;
}

.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brick); }

.hero h1 {
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.02;
  margin: 0 auto 20px;
  max-width: 16ch;
}

.hero p.lede {
  font-size: clamp(18px, 2vw, 22px);
  color: var(--ink-secondary);
  max-width: 46ch;
  margin: 0 auto 36px;
  font-weight: 400;
}

.hero-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }

.hero-figure { position: relative; margin-top: 44px; }
.hero-figure img {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: block;
  /* Cropped asymmetrically around the PHONE's own center (not the full
     hand+phone silhouette) — see assets/mockups/README.md — so this needs
     no CSS nudge; the phone is centered by construction. */
  /* Fades the hard bottom edge of the crop into the section below instead
     of a hard cutoff. */
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}

/* ---------- Stat / laurel strip ---------- */

.stat-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  padding: 56px 24px;
  text-align: center;
}

.stat-strip .stat .num { font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -0.02em; }
.stat-strip .stat .num .unit { font-size: 15px; font-weight: 500; color: var(--ink-tertiary); margin-left: 4px; }
.stat-strip .stat .label { font-size: 13.5px; color: var(--ink-secondary); margin-top: 2px; }
.stat-strip .stat.is-live .num { color: var(--wait-low); }

/* ---------- Logo wall -- real bar logos, real remote URLs ---------- */

.logo-wall { padding: 64px 0 76px; text-align: center; }
.logo-wall h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 8px; }
.logo-wall p.sub { color: var(--ink-secondary); font-size: 15px; margin: 0 0 40px; }

.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 760px) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }

.logo-tile {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s ease;
}

.logo-tile img { width: 100%; height: 100%; object-fit: cover; }

.logo-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.25); border-color: transparent; }

.logo-cell { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }
.logo-cell .cell-label { font-size: 11.5px; color: var(--ink-tertiary); text-align: center; }

/* ---------- Feature sections -- big image, short bold claim, Apple-style ---------- */

.feature { padding: 90px 0; text-align: center; }

.feature-eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--accent, var(--brick)); margin-bottom: 14px; }
.feature-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent, var(--brick)); }

.feature h2 { font-size: clamp(30px, 4.2vw, 48px); max-width: 16ch; margin: 0 auto 16px; }
.feature p.body { font-size: 19px; color: var(--ink-secondary); max-width: 42ch; margin: 0 auto 8px; font-weight: 400; }

.feature.is-soon .feature-figure { opacity: 0.94; }

/* ---------- Feature split -- image + left-aligned copy side by side,
   instead of the centered stack above. Used by Home/Explore/Rewards; Menu
   keeps the original centered treatment since its wide strip doesn't suit a
   column. ---------- */

.feature-split .wrap {
  display: flex;
  align-items: center;
  gap: 72px;
  text-align: left;
}

.feature-split .feature-figure { flex: 1 1 0; margin-top: 0; display: block; }
.feature-split .feature-figure img { margin: 0; max-width: 320px; }
.feature-split .feature-copy { flex: 1 1 0; min-width: 0; }

.feature-split .feature-eyebrow { justify-content: flex-start; }
.feature-split h2 { max-width: none; margin: 0 0 16px; }
.feature-split p.body { max-width: 42ch; margin: 0 0 8px; }

.feature-split .data-card { margin: 28px 0 0; }
.feature-split .explore-highlights { justify-content: flex-start; }

.feature-split--reverse .wrap { flex-direction: row-reverse; }

@media (max-width: 860px) {
  .feature-split .wrap { flex-direction: column; align-items: flex-start; gap: 36px; }
  .feature-split--reverse .wrap { flex-direction: column; }
  /* Copy stays left-aligned; just the mockup itself centers on its own line. */
  .feature-split .feature-figure { display: flex; justify-content: center; width: 100%; }
  .feature-split .feature-figure img { max-width: 260px; }
}

/* Thin rule instead of a dot, matching the reference layout's eyebrow. */
.feature-eyebrow .rule { width: 28px; height: 1px; background: currentColor; opacity: 0.5; flex: none; }
.feature-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-secondary);
  background: var(--bg-soft2);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  margin-top: 18px;
}

.feature--home { --accent: var(--brick); }
.feature--explore { --accent: var(--blue); }
.feature--menu { --accent: var(--blue); }
.feature--rewards { --accent: #b8860b; }

/* ---------- Explore -- replaces the old separate Late Eats / Safe Ride
   sections with one, since the app itself folds bars/food browsing into a
   single Explore tab (see OxVegas/Features/Explore/ExploreView.swift); Safe
   Ride joins it here as a third "what you can do here" highlight rather than
   a fourth top-level section. ---------- */

.explore-highlights {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.explore-highlights li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-secondary);
}

.explore-highlights .glyph {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--bg-soft2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}

/* ---------- Phone mockups -- no card/frame/shadow. Each mockup is a
   transparent, tightly-cropped PNG that just sits on the section's own
   background — nothing added around it. Home/Explore/Rewards share one
   max-width so "the same phone" reads as the same size everywhere. ---------- */

.feature-figure { margin-top: 48px; display: flex; justify-content: center; }

.feature-figure img {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  display: block;
}

@media (max-width: 480px) {
  .feature-figure img { max-width: 240px; }
}

/* ---------- Menu strip -- wider than the portrait mockups above, so it gets
   its own max-width instead of sharing .feature-figure img's. Shown in full
   on desktop; panned into view on mobile scroll (see script.js's "Menu strip
   creep" block), skipped under prefers-reduced-motion. ---------- */

.menu-strip-wrap { margin-top: 48px; overflow: hidden; }

.menu-strip { width: 100%; max-width: 900px; margin: 0 auto; }

@media (max-width: 760px) {
  /* Break out of .wrap's 24px side padding so the pan runs edge-to-edge
     instead of leaving a strip of background visible on each side. */
  .menu-strip-wrap {
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-right: -24px;
  }

  .menu-strip {
    width: 155%;
    max-width: none;
    /* Own compositing layer + no anti-alias seam at the translated edge —
       without this some browsers show a hairline gap of the wrap's
       background at the trailing edge mid-pan. */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}

/* ---------- Venue popover -- "tell me about this bar" on a logo-wall tap,
   with a link out to the app instead of the marketing site trying to be the
   app. ---------- */

.logo-wall .wrap { position: relative; }
.logo-cell { cursor: pointer; }
.logo-cell[aria-expanded="true"] .logo-tile { box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.22); }

.venue-popover {
  position: absolute;
  z-index: 30;
  width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.3);
  padding: 16px 18px;
  text-align: left;
  animation: pop-in 0.18s var(--ease-out) both;
}

.venue-popover-name { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.venue-popover-line { font-size: 12.5px; color: var(--ink-secondary); margin: 0 0 12px; line-height: 1.5; }

@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .venue-popover { animation: none; }
}

/* ---------- Live-data card -- light version of the "pull real data"
   panel, shown under a couple of feature claims. ---------- */

.data-card {
  max-width: 420px;
  margin: 36px auto 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.2);
  padding: 20px 22px 16px;
  text-align: left;
}

.data-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.data-card-head .name { font-weight: 700; font-size: 14.5px; }

.live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: var(--radius-pill); letter-spacing: 0.02em; }
.live-badge.is-live { color: #fff; background: var(--wait-low); }
.live-badge.is-sim { color: var(--ink-secondary); background: var(--bg-soft2); }
.live-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.live-badge.is-live .dot { animation: dot-pulse 1.8s ease-in-out infinite; }

@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.data-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.data-row:last-child { border-bottom: none; }
.data-row .label { display: flex; align-items: center; gap: 9px; color: var(--ink); min-width: 0; }
.data-row .label .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.data-row .label span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-row .value { font-weight: 700; color: var(--ink-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.data-row .price { color: var(--ink-secondary); font-weight: 600; white-space: nowrap; }

.data-card-foot { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--ink-tertiary); }

/* ---------- Card pulse -- a little sign of life in an otherwise static
   preview card: a small stack of "who's here" avatars plus a chat-style
   typing indicator. Purely decorative (the rows below already carry the
   real numbers) — just here so the card doesn't read as a dead screenshot. ---------- */

.card-pulse {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  font-size: 11.5px;
  color: var(--ink-tertiary);
}

.pulse-avatars { display: flex; flex: none; }
.pulse-avatars span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -6px;
  display: inline-block;
  animation: avatar-bob 1.6s ease-in-out infinite;
}
.pulse-avatars span:first-child { margin-left: 0; background: var(--brick); }
.pulse-avatars span:nth-child(2) { background: var(--blue); animation-delay: 0.2s; }
.pulse-avatars span:nth-child(3) { background: var(--wait-low); animation-delay: 0.4s; }

@keyframes avatar-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.typing-dots { display: inline-flex; gap: 2px; margin-left: 5px; vertical-align: middle; }
.typing-dots span {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  display: inline-block;
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-avatars span, .typing-dots span { animation: none; }
}

/* ---------- How it works ---------- */

.steps-section { padding: 90px 0; text-align: center; }
.steps-section h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 12px; }
.steps-section p.sub { color: var(--ink-secondary); max-width: 46ch; margin: 0 auto 52px; font-size: 17px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 960px; margin: 0 auto; text-align: left; }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }

.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 30px 26px; transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
.step:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.2); }

.step .num {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  color: #fff;
  font-weight: 700; font-size: 14px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.step h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--ink-secondary); margin: 0; }

/* ---------- CTA band -- the one full-bleed dark moment, like Apple's
   closing "Learn more / Buy" section. ---------- */

.cta-band {
  padding: 110px 0;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, #0f1013, #000 55%, #1a0505 100%);
  background-size: 180% 180%;
  animation: cta-glow 14s ease-in-out infinite;
}

@keyframes cta-glow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-band { animation: none; }
}
.cta-band h2 { color: #fff; font-size: clamp(32px, 4.6vw, 56px); margin-bottom: 16px; }
.cta-band p { color: rgba(255, 255, 255, 0.68); max-width: 44ch; margin: 0 auto 34px; font-size: 18px; }
.cta-band .fine { margin-top: 20px; font-size: 13px; color: rgba(255, 255, 255, 0.4); }
.cta-band .btn-primary { background: #fff; color: #000; }
.cta-band .btn-primary:hover { background: #f0f0f0; }

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

.site-footer { padding: 48px 0 32px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 32px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font-size: 12px; color: var(--ink-tertiary); margin: 0 0 12px; font-weight: 600; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.footer-grid a { color: var(--ink-secondary); text-decoration: none; }
.footer-grid a:hover { color: var(--ink); }
.footer-note { color: var(--ink-secondary); font-size: 13px; max-width: 38ch; line-height: 1.6; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-tertiary); }

.footer-logo { height: 26px; width: auto; display: block; margin-bottom: 14px; }

/* ---------- Contact / venue-partnership form ---------- */

.contact-section { padding: 90px 0; }
.contact-head { text-align: center; margin-bottom: 48px; }
.contact-head h2 { font-size: clamp(30px, 4.2vw, 44px); max-width: 18ch; margin: 0 auto 14px; }
.contact-head p { font-size: 17px; color: var(--ink-secondary); max-width: 46ch; margin: 0 auto; }

.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  max-width: 1040px;
  margin: 0 auto;
  align-items: stretch;
}

@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
}

.contact-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.18);
  padding: 32px clamp(20px, 4vw, 36px);
  text-align: left;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .field.full { grid-column: 1 / -1; }
@media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-grid .field { margin-bottom: 0; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-secondary); }
.field input,
.field select {
  font: inherit;
  font-size: 15px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.field input:focus,
.field select:focus { border-color: var(--ink-tertiary); background: #fff; outline: none; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-tertiary) 50%), linear-gradient(135deg, var(--ink-tertiary) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.contact-form .btn-primary { margin-top: 4px; }
.form-note { font-size: 12px; color: var(--ink-tertiary); margin: 12px 0 0; }
.form-status { font-size: 13.5px; font-weight: 600; margin: 14px 0 0; min-height: 18px; }
.form-status.is-ok { color: var(--wait-low); }
.form-status.is-err { color: var(--wait-high); }

/* Netlify's crawler needs the field present; hide it from people. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 320px;
  position: relative;
  background: var(--bg-soft2);
}

#contact-map { position: absolute; inset: 0; }

.map-pin-label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 500;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.3);
  max-width: calc(100% - 28px);
  pointer-events: none;
}

@media (max-width: 860px) { .contact-map-wrap { min-height: 260px; } }

/* ==========================================================================
   Motion -- restrained, Apple-style: a gentle fade + slight rise, once.
   ========================================================================== */

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: var(--reveal-delay, 0s); }
[data-reveal="scale"] { transform: scale(0.96) translateY(10px); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@keyframes load-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Transactional pages (auth callback / maintenance) ---------- */

.transact-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg-soft); }

.transact-card {
  width: 100%; max-width: 400px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.25);
  padding: 40px 28px;
  text-align: center;
  animation: load-rise 0.6s var(--ease-out) both;
}

.transact-icon {
  width: 54px; height: 54px; margin: 0 auto 22px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--brick), var(--brick-deep));
  display: flex; align-items: center; justify-content: center;
}

.transact-card h1 { font-weight: 700; font-size: 23px; margin-bottom: 12px; }
.transact-card p { color: var(--ink-secondary); margin: 0 0 20px; }

.transact-status { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-tertiary); font-size: 13px; margin: 0 0 20px; min-height: 18px; }

.spinner { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--brick); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.transact-fine { color: var(--ink-tertiary); font-size: 12px; margin-top: 16px; min-height: 15px; }

.app-store-link { opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.app-store-link.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.app-store-link.is-flashing { animation: flash-btn 0.85s ease-in-out 3; }
@keyframes flash-btn { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); } 50% { box-shadow: 0 0 0 8px rgba(200, 16, 46, 0.25); } }

/* ---------- Legal document pages (terms / privacy) ---------- */

.doc-shell { padding: 48px 20px 100px; background: var(--bg-soft); min-height: 100vh; }

.doc-topbar { max-width: 780px; margin: 0 auto 26px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; animation: load-rise 0.5s var(--ease-out) both; }
.doc-topbar a { color: var(--brick); text-decoration: none; font-weight: 600; }
.doc-topbar a:hover { text-decoration: underline; }

.doc-card {
  max-width: 780px; margin: 0 auto;
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.18);
  padding: 44px clamp(20px, 5vw, 58px);
  animation: load-rise 0.6s 0.08s var(--ease-out) both;
}

.doc-card h1 { font-weight: 700; font-size: 27px; color: var(--ink); margin: 0 0 4px; }
.doc-card .updated { color: var(--ink-tertiary); font-size: 14px; margin-bottom: 28px; }
.doc-card .lede { color: var(--ink-secondary); margin-bottom: 18px; }
.doc-card p.notice-strong { font-weight: 700; color: var(--ink); }

.doc-card .toc { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 18px 24px; margin: 24px 0 32px; }
.doc-card .toc h3 { font-size: 13px; color: var(--ink-tertiary); margin: 0 0 10px; font-weight: 700; }
.doc-card .toc ol { margin: 0; padding-left: 20px; }
.doc-card .toc li { font-size: 14.5px; margin-bottom: 6px; }
.doc-card .toc a { color: var(--ink); text-decoration: none; }
.doc-card .toc a:hover { color: var(--brick); text-decoration: underline; }
.doc-card .toc li.new-section a { color: var(--brick); font-weight: 700; }

.doc-card h2 { font-size: 18px; font-weight: 700; margin: 40px 0 6px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); scroll-margin-top: 20px; }
.doc-card h2:first-of-type { border-top: none; }
.doc-card h2.new-badge::after { content: "New"; display: inline-block; font-size: 10px; font-weight: 800; background: rgba(200, 16, 46, 0.1); color: var(--brick); border-radius: 6px; padding: 2px 7px; margin-left: 10px; vertical-align: middle; }

.doc-card h3.sub { font-size: 15px; font-weight: 700; margin: 20px 0 8px; color: var(--ink); }
.doc-card p { color: var(--ink-secondary); margin: 0 0 14px; font-size: 15px; }
.doc-card p.legal-caps { font-size: 13.5px; letter-spacing: 0.01em; }
.doc-card ul { margin: 0 0 14px; padding-left: 22px; color: var(--ink-secondary); font-size: 15px; }
.doc-card li { margin-bottom: 8px; }
.doc-card a { color: var(--brick); }
.doc-card .addr { color: var(--ink-secondary); font-size: 15px; line-height: 1.5; }

.doc-card .callout { background: rgba(200, 16, 46, 0.05); border: 1px solid rgba(200, 16, 46, 0.18); border-radius: 12px; padding: 18px 22px; margin: 16px 0 20px; }
.doc-card .callout p { margin: 0 0 10px; }
.doc-card .callout p:last-child { margin-bottom: 0; }

.doc-card .summary-box { background: rgba(200, 16, 46, 0.05); border: 1px solid rgba(200, 16, 46, 0.18); border-radius: 12px; padding: 20px 22px; margin: 24px 0 32px; }
.doc-card .summary-box h3 { margin: 0 0 12px; font-size: 13px; color: var(--brick); font-weight: 800; }
.doc-card .summary-box p { margin: 0 0 12px; font-size: 14.5px; }
.doc-card .summary-box p:last-child { margin-bottom: 0; }
.doc-card .summary-box strong { color: var(--ink); }

.doc-card .in-short { font-size: 14px; color: var(--ink-tertiary); font-style: italic; margin: 0 0 14px; }
.doc-card .highlight-new { background: rgba(59, 130, 246, 0.06); border-left: 3px solid var(--blue); padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 12px 0 14px; }
.doc-card .highlight-new p { margin: 0; color: var(--ink-secondary); }

.doc-card table { width: 100%; border-collapse: collapse; margin: 16px 0 20px; font-size: 13.5px; }
.doc-card th, .doc-card td { text-align: left; padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; color: var(--ink-secondary); }
.doc-card th { background: var(--bg-soft); color: var(--ink); font-weight: 700; font-size: 12.5px; }
.doc-card td.yn { text-align: center; font-weight: 700; white-space: nowrap; }

.doc-footer { text-align: center; margin-top: 40px; font-size: 13px; color: var(--ink-secondary); }
.doc-footer a { color: var(--brick); text-decoration: none; }


/* ---------- 2.0 mockups: hero phone, paired phones, Greek-org contact tab ---------- */
.hero-figure img.hero-phone { max-width: 340px; }
@media (max-width: 860px) {
  .feature--home .feature-figure img,
  .feature--rewards .feature-figure img,
  .feature--cards .feature-figure img { max-width: 340px; }
}
.feature-split .feature-figure--pair { display: flex; align-items: flex-start; justify-content: center; gap: 16px; }
.feature-split .feature-figure--pair img { max-width: calc(50% - 8px); }
.feature-split .feature-figure--pair img + img { margin-top: 48px; }
.feature--home .feature-figure img,
.feature--rewards .feature-figure img,
.feature--cards .feature-figure img { max-width: 420px; }

.contact-tabs { display: flex; justify-content: center; gap: 8px; margin: 0 auto 28px; }
.contact-tab {
  font: inherit; font-weight: 600; font-size: 14.5px; color: var(--ink-secondary);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 20px; cursor: pointer;
}
.contact-tab:hover { border-color: var(--ink-tertiary); }
.contact-tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.contact-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.contact-layout[hidden] { display: none; }
.contact-direct {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px clamp(20px, 4vw, 36px); display: flex; flex-direction: column; gap: 12px;
  justify-content: center; text-align: left;
}
.contact-direct h3 { margin: 0; font-size: 22px; }
.contact-direct p { margin: 0 0 8px; color: var(--ink-secondary); }

/* width/height attributes on the mockups reserve layout space; height:auto
   keeps the aspect ratio when CSS narrows the width. */
.hero-figure img,
.feature-figure img { height: auto; }