/* AEVINI — Marketing surface stylesheet
 *
 * Shared design system for the public pages served at
 *   /       → landing.html
 *   /beta   → beta.html
 *   /beta/thanks → beta-thanks.html
 *
 * Kept in sync with the app's aesthetic tokens (see the app's
 * theme.css / brand palette): --bg #060709, --accent #F4C27D,
 * Syne for headings, DM Sans for body.
 *
 * Legal pages (privacy.html, terms.html) keep their own inline
 * styles so they can be edited standalone without touching this
 * file. If we redesign the marketing surface later, those pages
 * are unaffected. Intentional decoupling.
 */

:root {
  --bg:             #060709;
  --bg-elevated:    #111318;
  --bg-input:       #0d0f14;
  --text:           #dde0ee;
  --text-muted:     #888ca6;
  --text-dim:       #4d5068;
  --accent:         #F4C27D;
  --accent-hover:   #f7cc93;
  --accent-dim:     #7a6142;
  --border:         #252836;
  --border-subtle:  #1c1f2b;
  --border-focus:   #F4C27D;
  --danger:         #e26b6b;
  --success:        #7fd39a;

  --font-sans:      'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display:   'Syne', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 150ms ease;
}
a:hover { color: var(--accent-hover); }

/* ── Layout ────────────────────────────────────────────────────── */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;  /* anchor for .bg-strip absolute positioning */
}

/* ── Ambient hero backdrop (landing page only) ─────────────────── */
/* Full-width, top-anchored, ~420px tall on desktop. The image
   (public/hero-bg.jpg — the shots.so product mockup) is loaded via
   an <img> child so browsers can lazy-decode without CSS pain,
   then blurred, desaturated, dimmed, and top-faded via filter +
   mask on the strip container. Same recipe as the previous
   TMDB-poster wallpaper: readers feel it, they don't read it.

   Lives on landing.html only — the terms and privacy pages don't
   include the .bg-strip element, and beta/thanks pages use their
   own layouts. */

.bg-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(320px, 42vw, 480px);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Mobile default: gentler blur. 5px reads as ~0.35% of a 1440px
     desktop viewport (subtle atmosphere), but the same 5px is ~1.3%
     of a 390px iPhone viewport (aggressive smudge). Desktop bumps it
     back up in the media query below. */
  filter: blur(2px) saturate(0.85) brightness(0.55);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1)  0%,
    rgba(0,0,0,1)  40%,
    rgba(0,0,0,0)  100%
  );
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1)  0%,
    rgba(0,0,0,1)  40%,
    rgba(0,0,0,0)  100%
  );
}

/* Mobile: also fade in from the top of the strip so the phones emerge
   from transparency rather than being clipped at the viewport top by
   iOS's status bar. The source mockup has the middle phone's tip near
   the top of the image, and on mobile the aspects are close enough
   that cover-fit shows essentially the whole source — so the phone's
   top edge would otherwise butt right up against the notch. On
   desktop we don't need this since the strip is taller and the phones
   sit lower in the frame. */
@media (max-width: 719px) {
  .bg-strip {
    mask-image: linear-gradient(to bottom,
      transparent    0%,
      rgba(0,0,0,1)  18%,
      rgba(0,0,0,1)  45%,
      transparent    100%
    );
    -webkit-mask-image: linear-gradient(to bottom,
      transparent    0%,
      rgba(0,0,0,1)  18%,
      rgba(0,0,0,1)  45%,
      transparent    100%
    );
  }
}

.bg-hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Composition-centered — the source image has three phones
     grouped around a dominant center phone (Tonight screen), which
     is the visual anchor at every viewport size. Bias slightly
     toward the top of the phones so the notch/tabs stay in-frame
     rather than getting cropped by the mask fade. */
  object-position: center 35%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

@media (min-width: 720px) {
  .bg-strip {
    filter: blur(4px) saturate(0.85) brightness(0.55);
  }
}

/* Content stacks above the strip. Header + main are given explicit
   z-index so the strip fade sits beneath the wordmark and CTA. */
.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

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

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

/* ── Header ────────────────────────────────────────────────────── */

.site-header {
  padding: 28px 0 12px;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-decoration: none;
}
.wordmark:hover { color: var(--accent-hover); }

.header-link {
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.header-link:hover { color: var(--text); }

/* ── Hero ──────────────────────────────────────────────────────── */

.hero {
  padding: 72px 0 16px;
  text-align: center;
}

.hero-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(64px, 12vw, 112px);
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0 0 24px;
  color: var(--text);
}

.hero-logo {
  display: block;
  margin: 0 auto 24px;
  /* Same rule as #splash-logo in index.html so the mark reads at a
     consistent physical size across the app's surfaces. Native
     aspect ~1.4:1 (1000x718), height auto-computes to ~158px.
     min(220px, 80vw) — protects narrow viewports (foldables, watches).
     max-height: 40vh    — protects short landscape viewports. */
  width: min(220px, 80vw);
  height: auto;
  max-height: 40vh;
  aspect-ratio: 1000 / 718;
}

.hero-tagline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(18px, 2.4vw, 22px);
  color: var(--text-muted);
  margin: 0 auto 40px;
  max-width: 520px;
  line-height: 1.45;
}

.hero-cta-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Buttons ───────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 100ms ease;
  text-decoration: none;
  line-height: 1;
}

.btn-primary {
  background: var(--accent);
  color: #1a1408;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #1a1408;
}
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
  color: #3a2f1a;
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.btn-arrow {
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
}

/* ── Section labels ────────────────────────────────────────────── */

.section-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

/* ── Value props ───────────────────────────────────────────────── */

.props {
  padding: 16px 0 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 720px) {
  .props { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

.prop {
  padding: 32px 28px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}

.prop h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 12px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.prop p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* ── Screenshot carousel ──────────────────────────────────────── */

.carousel-section {
  padding: 16px 0 16px;
  position: relative;
  /* Contain child overflow — the fade masks below sit at the edges
     and would otherwise spill horizontally on some browsers. */
  overflow-x: clip;
}

.shots-heading {
  text-align: center;
  margin: 0 0 24px;
}

.shots-heading h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}

.carousel {
  position: relative;
  /* Explicit max-width caps how much of the viewport the carousel
     occupies on wide displays. Previously we relied on padding-inline
     calc() to squeeze the visible content area, which worked in
     principle but let too many cards through on very wide viewports.
     With max-width + margin auto, the entire carousel (track, arrows,
     scrollbar) is a bounded block centered on the page. */
  max-width: 1120px;
  margin: 0 auto;
}

/* Horizontally-scrolling flex row with snap points. Native swipe on
   touch, arrows fire scrollBy() on desktop. Simple padding-inline
   now that .carousel above caps the outer width — no calc needed. */
.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 8px 24px 24px;
  scrollbar-width: none;
  outline: none;
}

/* Right-edge fade — softens the ultrawide "sudden cutoff" where the
   bounded carousel meets the dark background. Applied only on
   viewports where the carousel is capped by its max-width (i.e. wider
   than the carousel itself); below that there's no blank space beyond
   the carousel, so no fade is needed. Left edge intentionally NOT
   faded — the first card sits at the left at scroll=0 and would just
   get dimmed. JS toggles .at-end to remove the fade when the user
   scrolls to the last card, so that card isn't visually chopped off. */
@media (min-width: 1200px) {
  .carousel-track:not(.at-end) {
    mask-image: linear-gradient(to right,
      #000 0%,
      #000 calc(100% - 72px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(to right,
      #000 0%,
      #000 calc(100% - 72px),
      transparent 100%
    );
  }
}
.carousel-track::-webkit-scrollbar { display: none; }

/* Each card = one phone shot + caption. Fixed width so however many
   fit at a given viewport is what shows. Sized deliberately so the
   next card visibly peeks past the current one — the peek is the
   affordance that says "swipe / scroll for more." Slimmer on mobile
   where peek space is scarce, wider on desktop where the wrap is
   generous. Phone images are cropped tight to the bezel, so card
   width ≈ phone width (no wasted transparent surround). */
.shot-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;  /* <figure> default */
}

@media (min-width: 720px) {
  .shot-card { flex: 0 0 320px; }
}

.shot-frame {
  /* The screenshots already have transparent bezel surrounds baked
     in from the mockup generator, so no additional frame/shadow
     needed here — just let the image breathe. */
  position: relative;
}

.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: transform 200ms ease, filter 200ms ease;
  outline-offset: 4px;
  border-radius: 12px;  /* matches the phone's rounded corners so focus ring hugs them */
}

.shot-frame img:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.shot-caption {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 18px 20px 20px;
  /* Grow to fill available space in the card. Since .shot-card is
     display:flex column and cards stretch to the tallest card's
     height via .carousel-track's default align-items:stretch, this
     makes every caption box render at the same height across the
     row — determined by whichever card has the longest caption. */
  flex: 1 1 auto;
}

.shot-caption h3 {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.shot-caption p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Edge fade masks removed — they were 80px overlays intended to
   hint 'more off-screen,' but they landed on top of the actual
   first and last cards (dimming captions and screens). The next
   card visibly peeking past the current one is already the
   scroll affordance, and much more polished. If we ever want a
   subtler version back, apply mask-image to .carousel-track
   itself rather than absolute-positioned pseudo-elements. */

/* Prev/next arrows — desktop only (touch devices use native swipe).
   Positioned mid-height of the phone image, above the caption.
   Formula: card_width * (image_h / image_w) = phone display height,
   halved to center. Image is 600x1133 (aspect 0.53). */
.carousel-arrow {
  position: absolute;
  top: calc((220px * 1133 / 600) / 2 + 8px);
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(17, 19, 24, 0.92);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 150ms ease, color 150ms ease, opacity 150ms ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (min-width: 720px) {
  .carousel-arrow {
    top: calc((320px * 1133 / 600) / 2 + 8px);
  }
}

/* Only reveal arrows on hoverable pointers (desktop) — touch users
   swipe, and dangling desktop-style arrows over a touch UI is ugly. */
@media (hover: hover) and (pointer: fine) {
  .carousel-arrow { display: inline-flex; }
}

.carousel-arrow:hover {
  background: rgba(30, 33, 40, 0.95);
  color: var(--accent);
  border-color: var(--accent-dim);
}

.carousel-arrow:active { transform: translateY(-50%) scale(0.96); }

.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: default;
  color: var(--text-dim);
}

.carousel-arrow-prev { left: 8px; }
.carousel-arrow-next { right: 8px; }

/* ── Scroll progress indicator ─────────────────────────────────── */
/* Persistent bar below the track, clickable to jump to a position.
   Visible on both mobile and desktop, since native scrollbars either
   hide entirely (touch) or look out of place (desktop). Track = neutral
   rail; thumb = accent pill that mirrors both the fraction of content
   in view (its width) and the scroll position (its horizontal offset). */

.carousel-progress {
  position: relative;
  width: min(240px, 60%);
  height: 6px;
  margin: 20px auto 0;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  transition: background 150ms ease;
  /* Enlarge the tappable area without changing the visual size —
     6px is too thin for a comfortable tap target on touch. */
  padding: 0;
}
.carousel-progress::before {
  content: '';
  position: absolute;
  inset: -14px 0;  /* extend hitbox vertically by 14px each side */
}

.carousel-progress:hover {
  background: rgba(255, 255, 255, 0.16);
}

.carousel-progress-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 33%;  /* JS overrides on load */
  background: var(--accent);
  border-radius: 999px;
  /* NOTE: transition + update on `left` (%) not `transform: translateX` (%)
     because CSS percentage translates are relative to the element's OWN
     width, not the parent's. Using `left` gives us a proper parent-relative
     percentage: left: 80% actually puts the thumb's left edge at 80% of
     the parent track. */
  transition: left 120ms ease-out, width 150ms ease-out;
  will-change: left, width;
  pointer-events: none;
}

/* ── Lightbox ──────────────────────────────────────────────────── */
/* Fullscreen overlay for enlarged screenshots. Backdrop darkens the
   page, blurs subtly for depth. Image sizes to fit viewport with
   contain semantics (never larger than natural res, never overflows).
   Close button top-right, always accessible over any part of the
   image. safe-area-inset used for iPhone notch clearance. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  padding-top:    max(48px, env(safe-area-inset-top,    0px));
  padding-bottom: max(48px, env(safe-area-inset-bottom, 0px));
  background: rgba(6, 7, 9, 0.94);
  backdrop-filter: blur(24px) saturate(0.8);
  -webkit-backdrop-filter: blur(24px) saturate(0.8);
  animation: lightbox-in 200ms ease-out;
}

.lightbox[hidden] { display: none; }

@keyframes lightbox-in {
  from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
  to   { opacity: 1; }
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
  border-radius: 24px;
  animation: lightbox-img-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
  /* Prevent the image from responding to hover styles inherited
     from .shot-frame img — the lightbox img is a distinct element. */
  cursor: default;
  transform: none !important;
  filter: none !important;
}

@keyframes lightbox-img-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

.lightbox-close {
  position: absolute;
  top:   max(16px, env(safe-area-inset-top,   0px) + 8px);
  right: max(16px, env(safe-area-inset-right, 0px) + 8px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 150ms ease, color 150ms ease, transform 100ms ease;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--accent);
}
.lightbox-close:active { transform: scale(0.96); }

/* ── CTA repeat block ──────────────────────────────────────────── */

.cta-repeat {
  padding: 16px 0 40px;
  text-align: center;
  border-top: 1px solid var(--border-subtle);
}

.cta-repeat h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  margin: 0 0 24px;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* App Store badge cluster — official black SVG from Apple's marketing
   resources + a "Coming soon" caption. Sits below the Request beta
   access CTA in .cta-repeat. Kept muted so it reads as a signal of
   what's coming, not as a competing call-to-action. */
.app-store-badge {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.app-store-badge img {
  display: block;
  height: 47px;
  width: auto;
  opacity: 0.75;      /* dimmed slightly since it's aspirational, not live */
  transition: opacity 200ms ease;
}
.app-store-badge:hover img { opacity: 1; }

.app-store-note {
  margin: 0;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Beta form ─────────────────────────────────────────────────── */

.beta-page {
  padding: 40px 0 64px;
}

.beta-intro h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 24px 0 12px;
  color: var(--text);
}

.beta-intro p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 40px;
  max-width: 480px;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.field { display: flex; flex-direction: column; gap: 8px; }

.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}

.field-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: -2px;
}

.field-input,
.field-select {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 150ms ease, background 150ms ease;
}

.field-input:focus,
.field-select:focus {
  outline: none;
  border-color: var(--border-focus);
  background: #101218;
}

.field-input::placeholder { color: var(--text-dim); }

.field-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23888ca6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.radio-option:hover { border-color: #363a4a; }

.radio-option input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  margin: 2px 0 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  background: transparent;
  transition: border-color 150ms ease;
}

.radio-option input[type="radio"]:checked {
  border-color: var(--accent);
}
.radio-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.radio-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(244, 194, 125, 0.04);
}

.radio-option-text {
  flex: 1;
  line-height: 1.35;
}

.radio-option-title {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.radio-option-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Honeypot — hidden from humans, present for bots. Off-screen, not
   display:none, because some bots skip display:none fields. */
.honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-submit-row {
  display: flex;
  justify-content: flex-start;
  padding-top: 8px;
}

.form-submit-row .btn { min-width: 200px; }

.form-error {
  padding: 12px 14px;
  background: rgba(226, 107, 107, 0.08);
  border: 1px solid rgba(226, 107, 107, 0.25);
  border-radius: 10px;
  color: var(--danger);
  font-size: 14px;
  line-height: 1.45;
}

.form-error:empty { display: none; }

/* ── Thanks page ───────────────────────────────────────────────── */

.thanks {
  padding: 96px 0 72px;
  text-align: center;
}

.thanks-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(244, 194, 125, 0.08);
  border: 1px solid rgba(244, 194, 125, 0.25);
  color: var(--accent);
  margin: 0 auto 28px;
}

.thanks h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--text);
}

.thanks p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 auto 32px;
  max-width: 440px;
}

.thanks-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Footer ────────────────────────────────────────────────────── */

.site-footer {
  margin-top: auto;
  padding: 32px 0 40px;
  border-top: 1px solid var(--border-subtle);
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--text-dim);
}

.site-footer a {
  color: var(--text-muted);
}
.site-footer a:hover { color: var(--accent); }

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

/* ── Focus visibility (keyboard) ───────────────────────────────── */

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