/* ==========================================================================
   BaitLine marketing site - design tokens
   Palette: dawn on the water - deep pine, warm paper, fishing-line gold
   Type: Literata (display) + Public Sans (body)
   ========================================================================== */

/* Fonts (Literata + Public Sans) load from Google Fonts via a <link> in includes/header.php - not an @import, which delays them until this file has downloaded. */

:root {
  /* Colors */
  --color-ink: #16302B;      /* deep pine - primary text, headlines */
  --color-paper: #F1EFE6;    /* warm paper background */
  --color-line: #C89B3C;     /* fishing-line gold - accent, links, focus */
  --color-line-tint: #F8EBCB; /* pale gold - behind small text, where full gold is too mid-toned to read */
  --color-rust: #8C4A2F;     /* muted rust - tags, secondary accent */
  --color-mist: #A9BFB8;     /* pale sage - borders, muted text */
  --color-deep: #0E211D;     /* near-black pine - footer, dark panels */

  /* Typography */
  --font-display: 'Literata', Georgia, serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --measure: 62ch;

  /* Layout */
  --radius: 3px;

  /* Spacing Scale (8px base) */
  --space-xs: 4px;           /* 8px / 2 - extra small */
  --space-sm: 8px;           /* 8px × 1 - small */
  --space-md: 16px;          /* 8px × 2 - medium */
  --space-lg: 24px;          /* 8px × 3 - large */
  --space-xl: 32px;          /* 8px × 4 - extra large */
  --space-2xl: 48px;         /* 8px × 6 - 2x large */
  --space-3xl: 64px;         /* 8px × 8 - 3x large */

  /* Touch Targets (mobile) */
  --touch-min: 44px;         /* min button/input height for comfortable touch */
  --touch-md: 48px;          /* preferred button/input height for touch */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

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

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 0.5em;
  color: var(--color-ink);
}

h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); font-optical-sizing: auto; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; font-weight: 600; }

p {
  max-width: var(--measure);
  margin: 0 0 1.1em;
}

a {
  color: var(--color-ink);
  text-decoration-color: var(--color-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-line);
  outline-offset: 2px;
}

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

/* ---------- header ---------- */

.site-header {
  padding: var(--space-lg) 0 0;
}

/* Wider than the page's .wrap: the Afrikaans nav, auth links and Google Play
   badge need about 1230px on one row. */
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  max-width: 1280px;
  border-bottom: 1px solid var(--color-mist);
  padding-bottom: var(--space-md);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.wordmark span {
  color: var(--color-line);
  font-weight: 300;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: transform 250ms ease-out, opacity 200ms ease-out;
}

.logo-link:hover {
  transform: scale(1.05);
}

.logo-link:active {
  transform: scale(0.98);
}

.logo-icon {
  /* Rounded corners are already baked into the SVG itself - no CSS
     border-radius here, to avoid doubling/clipping the vector's own
     rounding at odd sub-pixel positions. */
  height: 44px;
  width: 44px;
  display: block;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.header-auth {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.auth-link {
  text-decoration: none;
  color: var(--color-ink);
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.auth-link:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-line);
}

.lang-switcher {
  position: relative;
}

.lang-switcher summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  padding: 6px 10px;
  border: 1px solid var(--color-mist);
  border-radius: var(--radius);
}

.lang-switcher summary::-webkit-details-marker { display: none; }
/* `content: ''` alone doesn't reliably suppress the native disclosure
   triangle in every browser (it can still reserve/paint a marker box) -
   `display: none` removes it outright, so only our own ::after chevron
   shows. */
.lang-switcher summary::marker { display: none; content: ''; }

.lang-switcher summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
}

.lang-switcher:hover summary,
.lang-switcher[open] summary {
  border-color: var(--color-line);
}

.lang-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  padding: 4px;
  background: var(--color-paper);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  z-index: 20;
}

.lang-switcher-menu a {
  padding: 8px 10px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-ink);
  font-size: 0.92rem;
}

.lang-switcher-menu a:hover { background: var(--color-mist); }

.lang-switcher-menu a[aria-current="true"] {
  font-weight: 700;
  color: var(--color-rust);
}

/* Two classes, because .btn is declared later in this file and would otherwise win. */
.btn.btn-sm {
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9rem;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-nav {
  display: flex;
  gap: 20px;
  font-size: 0.95rem;
  font-weight: 500;
}

.site-nav a {
  text-decoration: none;
  color: var(--color-ink);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid transparent;
  transition: border-color 200ms ease-out;
  /* A multi-word label wrapping mid-phrase onto two lines reads as
     broken layout, not responsive design - if the row is ever this
     tight again, better to let it overflow (or hit the hamburger
     breakpoint) than to wrap "Why BaitLine" into "Why" / "BaitLine". */
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--color-line);
  color: var(--color-ink);
}

/* Hamburger toggle - hidden on desktop, where the nav is always shown
   inline; the mobile breakpoint below switches it on and collapses
   .header-right behind it. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-ink);
  transition: transform 200ms ease-out, opacity 150ms ease-out;
}

.site-header.is-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.is-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.site-header.is-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- hero ---------- */

.hero {
  padding: var(--space-3xl) 0 72px;
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}

.hero-copy .eyebrow {
  color: var(--color-rust);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: var(--space-md);
  display: block;
}

.hero-copy p.lede {
  font-size: 1.15rem;
  color: #33473F;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

/* Google's badge rules: at least 28px tall, with clear space of a quarter of
   its height on every side. */
.play-badge {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 7px;
}

.play-badge img {
  display: block;
  height: 58px;
  width: auto;
}

.header-auth .play-badge img {
  height: 44px;
}

.info-box .play-badge {
  margin-top: var(--space-xs);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: var(--space-md) var(--space-lg);
  min-height: var(--touch-min);
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid var(--color-ink);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease-out, color 200ms ease-out;
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: scale(1.05);
  }

  .btn:active {
    transform: scale(0.97);
  }
}

.btn-primary {
  background: var(--color-ink);
  color: var(--color-paper);
}

.btn-primary:hover {
  background: var(--color-deep);
  color: var(--color-paper);
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
}

.btn-ghost:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* The app home screen, beside the hero copy. It reuses the tour's .phone frame. */

.hero-phone {
  width: 100%;
  max-width: 290px;
  justify-self: center;
}

/* ---------- features ---------- */

.features {
  padding: 56px 0;
  border-top: 1px solid var(--color-mist);
}

.section-lede {
  color: #5B7369;
  margin-bottom: 0;
}

/* Feature tour: copy beside real app screenshots, alternating sides. */
.tour {
  display: grid;
  gap: 88px;
  margin-top: 56px;
}

.tour-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.tour-row:nth-child(even) .tour-copy { order: 2; }

.tour-copy .mark {
  color: var(--color-line);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  display: block;
  margin-bottom: var(--space-md);
}

.tour-copy h3 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin-bottom: var(--space-sm);
}

.tour-copy p { color: #33473F; }

/* Two classes, or .tour-copy p's lighter text colour wins. */
.tour-copy .tag-premium {
  display: inline-block;
  background: var(--color-line-tint);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 3px var(--space-sm);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
}

.tour-screens {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* stretch would pad the un-offset phone with an empty bezel */
  gap: var(--space-lg);
}

/* Offsetting the second phone reads as a set of screens, not a grid. */
.tour-screens .phone + .phone { margin-top: 48px; }

.phone {
  flex: 0 1 240px;
  min-width: 0;
  background: var(--color-deep);
  padding: 7px;
  border-radius: 30px;
  box-shadow: 0 18px 40px rgba(14, 33, 29, 0.22);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 23px;
}

.tour-screens-single .phone { flex-basis: 280px; }

.phone-card {
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}

.phone-card img { border-radius: 0; }

.hero-note {
  margin-top: var(--space-md);
  font-size: 0.92rem;
  color: #5B7369;
}

/* ---------- band / how it works ---------- */

.band {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 60px 0;
}

.band h2 { color: var(--color-paper); }

.band p { color: var(--color-mist); }

.steps {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-lg);
}

.step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid #2B463E;
}

.step:last-child { border-bottom: none; padding-bottom: 0; }

.step .num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-line);
  font-size: 1.3rem;
}

.step h3 { color: var(--color-paper); margin-bottom: 4px; }
.step p { color: var(--color-mist); margin-bottom: 0; }

/* ---------- CTA ---------- */

.cta {
  padding: 72px 0;
  text-align: left;
}

.cta h2 { max-width: 24ch; }

.iphone-install {
  margin-top: var(--space-xl);
  max-width: 60ch;
  scroll-margin-top: 96px;
}

.iphone-install ol {
  padding-left: 1.4em;
  margin-bottom: var(--space-md);
}

.iphone-install li { margin-bottom: var(--space-sm); }

/* ---------- accessibility helpers ---------- */

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -60px;
  z-index: 100;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus { top: var(--space-md); color: var(--color-paper); }

main:focus { outline: none; }

/* ---------- simple content pages ---------- */

.page-head {
  padding: 56px 0 var(--space-lg);
  border-bottom: 1px solid var(--color-mist);
}

.page-head .updated {
  color: var(--color-rust);
  font-weight: 600;
  font-size: 0.9rem;
}

.page-body {
  padding: 40px 0 72px;
  display: flex;
  justify-content: center;
}

/* .page-head and .page-body share one default column width - matching
   the two isn't enough on its own (see .wrap, 1120px) when the actual
   text inside is also capped by the global `p { max-width: var(--measure) }`
   rule: a 1120px container around ~600px-wide paragraphs just leaves a
   big empty gutter next to the text. Keeping both sections at the same
   narrower width that roughly tracks the text measure is what actually
   makes the heading and body line up. contact.php and plans.php opt
   into a wider variant on both their .page-head and .page-body wrap
   (see .wrap.contact-layout / .wrap.plans-wrap below), so heading and
   body stay matched there too. */
.page-head .wrap,
.page-body .wrap {
  max-width: 780px;
}

/* A flex item won't shrink below its widest child, so a wide table would push the column off a phone screen. */
.page-body > .wrap {
  width: 100%;
  min-width: 0;
}

.wrap.contact-layout {
  max-width: 1120px;
}

.wrap.plans-wrap {
  max-width: 960px;
}

.page-body h2 {
  margin-top: 2.2em;
  font-size: 1.4rem;
}

.page-body ul, .page-body ol {
  max-width: var(--measure);
  padding-left: 1.2em;
}

.page-body li { margin-bottom: 0.5em; }

.info-box {
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  margin: 1.6em 0;
  background: #FBFAF5;
}

.info-box h3 { margin-bottom: var(--space-md); }
.info-box p:last-child { margin-bottom: 0; }

.page-screens { margin: var(--space-2xl) 0; }

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

/* ---------- compare page ---------- */

.compare-table-wrap {
  overflow-x: auto;
  margin: 1.6em 0;
  border: 1px solid var(--color-mist);
  border-radius: var(--radius);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.compare-table th,
.compare-table td {
  padding: var(--space-md);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-mist);
}

.compare-table th {
  font-family: var(--font-display);
  font-weight: 600;
  background: #E7E3D4;
}

.compare-table tr:last-child td { border-bottom: none; }

.compare-table td:first-child { font-weight: 600; }

/* ---------- fishing guide species and knot pages ---------- */

.guide-scientific {
  font-style: italic;
  color: #5B7369;
  margin-bottom: var(--space-md);
}

.guide-fish {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto var(--space-lg);
}

.page-body .guide-compare {
  list-style: none;
  padding-left: 0;
}

.page-body .guide-compare li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-md);
  align-items: center;
  margin-bottom: var(--space-md);
}

.guide-compare img {
  width: 100%;
  height: auto;
}

.guide-hint {
  display: block;
  font-size: 0.88rem;
  font-weight: 400;
  color: #5B7369;
}

.page-body .guide-chips {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.page-body .guide-chips li {
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--color-mist);
  border-radius: 999px;
  background: #FBFAF5;
  font-size: 0.92rem;
}

.page-body .guide-links li { padding: 0; }

.page-body .guide-links a {
  display: block;
  padding: 4px 12px;
}

.guide-rating-best,
.guide-level-3,
.guide-impact-high { font-weight: 600; color: var(--color-ink); }

.guide-rating-no,
.guide-level-0,
.guide-impact-low { color: #5B7369; }

/* ---------- plans page ---------- */

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
  align-items: stretch;
}

.plan-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  padding: var(--space-lg);
  background: #FBFAF5;
  position: relative;
}

.plan-card-featured {
  border-width: 2px;
  background: var(--color-paper);
}

.plan-badge {
  position: absolute;
  top: -14px;
  right: var(--space-lg);
  background: var(--color-line-tint);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 2px var(--space-sm);
  border-radius: var(--radius);
}

.plan-card h2 {
  font-size: 1.3rem;
  margin-top: 0; /* overrides .page-body h2's section spacing */
  margin-bottom: var(--space-xs);
}

.plan-tagline {
  font-size: 0.88rem;
  color: #5B7369;
  min-height: 2.6em;
  margin-bottom: var(--space-md);
}

.plan-price {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0;
}

.plan-price span {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: #5B7369;
}

/* Used where a plan's actual price lives only in the app (it can change
   without notice, so this site never hardcodes a figure) - a shorter,
   sans-serif phrase reads better here than forcing prose into the
   large serif number style meant for "R0"/a short price. */
.plan-price-inapp {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
}

.plan-price-inapp span {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: #5B7369;
  margin-top: 2px;
}

.plan-annual-note {
  font-size: 0.8rem;
  color: var(--color-rust);
  font-weight: 600;
  margin: 2px 0 0;
}

.plan-annual-note-muted {
  color: #5B7369;
  font-weight: 400;
  margin: var(--space-sm) 0 0;
}

.plan-annual-note-muted a {
  color: inherit;
}

.plan-cta {
  margin-top: var(--space-lg);
  width: 100%;
}

.plan-list {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  font-size: 0.92rem;
}

.plan-list li {
  position: relative;
  padding: var(--space-xs) 0 var(--space-xs) 1.4em;
}

.plan-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-line);
  font-weight: 700;
}

.plans-note {
  font-size: 0.88rem;
  color: #5B7369;
}

/* ---------- plans page: showcase screenshots ---------- */

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

.showcase-item {
  margin: 0;
  text-align: center;
}

/* The app's own UI uses a similar warm/neutral palette to this site, so
   a bare screenshot barely stands out against the page background -
   a contrasting frame gives it an edge to read against. A fixed height
   (rather than each image's own natural aspect ratio) keeps all three
   screenshots reading as one consistent set despite very different
   source dimensions (a phone-width app screen vs. a tall share-card
   canvas export). */
.showcase-frame {
  background: var(--color-deep);
  border-radius: 16px;
  padding: var(--space-lg) var(--space-md);
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.showcase-item figcaption {
  margin-top: var(--space-md);
  font-size: 0.85rem;
  color: #5B7369;
}

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

@media (max-width: 700px) {
  .plans-grid { grid-template-columns: 1fr; }
  .showcase-grid { grid-template-columns: 1fr; }
  .plan-tagline { min-height: 0; }
}

/* ---------- contact form ---------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: start;
  width: 100%;
}

.contact-details-title { margin-top: 0; }

.alert-list {
  margin: 0;
  padding-left: 1.1em;
}

.contact-details dl {
  margin-top: var(--space-lg);
}

.contact-details dt {
  font-size: 0.85rem;
  color: var(--color-rust);
  font-weight: 600;
  margin-top: var(--space-md);
}

.contact-details dd {
  margin: var(--space-xs) 0 0;
}

form.contact-form {
  background: #FBFAF5;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  padding: var(--space-xl);
}

.field {
  margin-bottom: var(--space-lg);
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: var(--space-sm);
  color: var(--color-ink);
  transition: color 150ms ease-out;
}

.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: var(--space-md) var(--space-lg);
  min-height: var(--touch-min);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
  transition: border-color 150ms ease-out, background 150ms ease-out, box-shadow 150ms ease-out;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-line);
  box-shadow: 0 0 0 3px rgba(200, 155, 60, 0.1);
}

.field textarea {
  resize: vertical;
  min-height: 130px;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

/* honeypot field - hidden from real visitors, catches simple bots */
.field.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  font-size: 0.9rem;
  color: #5B7369;
  margin-top: -4px;
  margin-bottom: var(--space-lg);
}

.alert {
  padding: var(--space-md) var(--space-md);
  border-radius: var(--radius);
  margin-bottom: var(--space-lg);
  font-weight: 500;
  border: 1px solid;
}

.alert-success {
  background: #E7EFE4;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.alert-error {
  background: #F5E7E1;
  border-color: var(--color-rust);
  color: var(--color-rust);
  animation: slideDown 300ms ease-out, shake 400ms 300ms ease-in-out !important;
}

@media (prefers-reduced-motion: reduce) {
  .alert-error {
    animation: slideDown 300ms ease-out !important;
  }
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--color-deep);
  color: var(--color-mist);
  padding: var(--space-2xl) 0 var(--space-xl);
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.footer-grid .wordmark { color: var(--color-paper); }
.footer-grid .wordmark span { color: var(--color-line); }

.footer-links {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  font-size: 0.92rem;
}

.footer-links a {
  color: var(--color-mist);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}

.footer-links a:hover { 
  color: var(--color-paper);
  border-bottom-color: var(--color-line);
}

.footer-tagline {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid #2B463E;
  font-size: 0.85rem;
  color: #93A89F; /* was #6E877D - 4.1:1 on the footer, below WCAG AA */
}

.footer-fine {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  color: #93A89F;
}

/* ---------- Animation Keyframes ---------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
  }
}

/* ---------- responsive ---------- */

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

  .tour { gap: 64px; }
  .tour-row { grid-template-columns: 1fr; gap: var(--space-xl); }
  .tour-row:nth-child(even) .tour-copy { order: 0; }
}

@media (max-width: 1300px) {
  /* Below this width the nav + auth links no longer fit on one line, so
     they collapse behind a hamburger toggle instead of dumping a tall
     stacked list inline (which used to push the hero 400px+ down the
     page). The logo and toggle stay on one row; .header-right becomes a
     dropdown panel underneath, shown only while .site-header.is-open. */
  .site-header .wrap {
    flex-wrap: wrap;
    row-gap: 0;
    padding-bottom: var(--space-md);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .header-right {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /* visibility (not just opacity/height) takes the collapsed links out
       of the tab order and the accessibility tree - delayed on close so
       the fade-out still plays. */
    visibility: hidden;
    transition: max-height 250ms ease-out, opacity 200ms ease-out, visibility 0s linear 250ms;
  }

  .site-header.is-open .header-right {
    max-height: 720px;
    opacity: 1;
    visibility: visible;
    transition: max-height 250ms ease-out, opacity 200ms ease-out, visibility 0s;
    margin-top: var(--space-md);
    /* The language dropdown's menu extends below its own row - the
       max-height collapse above needs overflow:hidden while closed/
       animating, but clipping it while open would cut the open menu off. */
    overflow: visible;
  }

  .site-nav {
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
  }

  .site-nav a {
    display: block;
    padding: var(--space-md) 0;
    border-bottom-width: 0;
    border-left: 3px solid transparent;
    padding-left: var(--space-md);
    transition: border-left-color 200ms ease-out;
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    border-left-color: var(--color-line);
    border-bottom: none;
  }

  .header-auth {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-mist);
  }

  /* Its own row above Log in/Sign up, rather than getting spread out as
     a third item in the same space-between row as those two. */
  .header-auth .lang-switcher {
    flex-basis: 100%;
  }

  .lang-switcher-menu {
    left: 0;
    right: auto;
  }
}

@media (max-width: 700px) {
  .tour-screens { gap: var(--space-md); }
  .tour-screens .phone + .phone { margin-top: 32px; }
  .phone { padding: 5px; border-radius: 22px; }
  .phone img { border-radius: 17px; }
}

@media (max-width: 600px) {
  .site-nav { gap: var(--space-md); font-size: 0.88rem; }
  .header-auth { gap: 12px; }
  .page-body .wrap { padding-left: var(--space-lg); }
  form.contact-form { padding: var(--space-lg); }
  .wrap { padding: 0 var(--space-lg); }
}