/* FoneFarm shared stylesheet — fone.farm (data-site="farm") and fonefarm.ai
   (data-site="ai"), both dark since 2026-10-18. Palette taken from the two FoneFarm
   images: field teal, circuit green, signal mint, screen blue, dawn sand. */

@font-face {
  font-family: "Audiowide";
  src: url("/fonts/audiowide-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --field: #0f3d3a;
  --field-deep: #0a2a28;
  --circuit: #8deb8a;
  --mint: #4fd1b0;
  --screen: #5bb8e8;
  --sand: #f7d9a6;
  --paper: #f2faf6;
  --ink: #10231f;

  --bg: var(--paper);
  --surface: #ffffff;
  --text: var(--ink);
  --muted: #3f5a54;
  --line: #cfe5dc;
  --accent: #127a5e;
  --accent-ink: #ffffff;
  --bar: rgba(242, 250, 246, 0.92);

  --step: 18px;
  --wrap: 72rem;
  --radius-lg: 22px;
  --radius-sm: 10px;
}

[data-site="ai"],
[data-site="farm"] {
  --bg: var(--field-deep);
  --surface: #113b37;
  --text: #e9f7f1;
  --muted: #a9cfc4;
  --line: #24524c;
  --accent: var(--circuit);
  --accent-ink: #0a2a28;
  --bar: rgba(10, 42, 40, 0.9);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: var(--step);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.brandmark {
  font-family: "Audiowide", "Manrope", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

/* ── Top bar: emblem (menu trigger) left, brandmark centred ───────────── */
.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bar);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 10px 20px;
}
.emblem-btn {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.emblem-btn img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--mint), 0 0 18px rgba(79, 209, 176, 0.45);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.emblem-btn:hover img, .emblem-btn[aria-expanded="true"] img { transform: rotate(-18deg) scale(1.05); }
.emblem-btn .emblem-hint { font-size: 16px; font-weight: 600; color: var(--muted); }
.bar .brandmark { font-size: clamp(26px, 5vw, 38px); text-decoration: none; color: var(--accent); }
.bar-spacer { justify-self: end; }

/* ── Left folding menu ─────────────────────────────────────────────── */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6, 26, 24, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.scrim.is-open { opacity: 1; pointer-events: auto; }
.menu {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 70;
  width: min(380px, 100%);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--field-deep);
  color: #e9f7f1;
  border-right: 1px solid #24524c;
  transform: translateX(-100%);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}
.menu.is-open { transform: translateX(0); }
.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #24524c;
}
.menu-head .brandmark { font-size: 28px; color: var(--circuit); text-decoration: none; }
.menu-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #2f6a62;
  background: none;
  color: #e9f7f1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.menu nav { padding: 12px 12px 8px; }
.fold { border-bottom: 1px solid #1d4843; }
.fold summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 10px;
  font-size: 21px;
  font-weight: 700;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--circuit);
  border-bottom: 2px solid var(--circuit);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.25s;
}
.fold[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.fold ul { list-style: none; margin: 0; padding: 0 10px 14px 18px; border-left: 2px solid #2f6a62; margin-left: 12px; }
.fold li a {
  display: block;
  padding: 9px 10px;
  text-decoration: none;
  color: #cfeee4;
  border-radius: 8px;
}
.fold li a:hover { background: #143f3b; color: #ffffff; }
.menu-foot { margin-top: auto; padding: 18px 22px 26px; font-size: 16px; color: #9fc7bc; }
.menu-foot a { color: var(--circuit); }

/* ── Layout primitives ─────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
section { padding: 72px 0; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.01em; }
h1 { font-size: clamp(34px, 5.2vw, 58px); font-weight: 800; }
h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; }
h3 { font-size: 22px; font-weight: 700; }
p { margin: 0 0 16px; max-width: 64ch; }
.lead { font-size: 21px; color: var(--muted); }
.muted { color: var(--muted); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks + p { margin-top: 16px; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--mint);
  border-bottom: 3px solid var(--mint);
  transform: rotate(-45deg);
}
.crosses li::before {
  content: "\00d7";
  border: 0;
  width: auto;
  height: auto;
  top: -0.12em;
  left: 0;
  transform: none;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1;
  color: #e0796b;
}

/* Steps — a real sequence, so numbered. */
.steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 64px 22px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 22px;
  top: 18px;
  font-family: "Audiowide", sans-serif;
  font-size: 30px;
  color: var(--mint);
}
.steps h3 { margin-bottom: 8px; }
.steps p { margin: 0; font-size: 17px; color: var(--muted); }

/* Waitlist form */
.join { background: var(--field); color: #e9f7f1; border-radius: var(--radius-lg); padding: 40px clamp(20px, 4vw, 48px); }
.join h2 { color: #ffffff; }
.join p { color: #bfe0d6; }
.join form { display: grid; gap: 14px; grid-template-columns: 1fr; max-width: 560px; margin-top: 20px; }
.join label { display: grid; gap: 6px; font-weight: 600; font-size: 16px; }
.join input, .join select {
  min-height: 52px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #2f6a62;
  background: #0a2a28;
  color: #ffffff;
  font: inherit;
}
.join .btn { background: var(--circuit); border-color: var(--circuit); color: var(--field-deep); justify-self: start; }
.join-done { font-size: 21px; font-weight: 700; color: var(--circuit); }
.join-err { color: #ffb4a8; font-weight: 600; }

footer { padding: 40px 0 56px; border-top: 1px solid var(--line); font-size: 16px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
footer .brandmark { font-size: 22px; color: var(--accent); }

/* Footer social links (added 2026-10-18): a full-width row under the footer line. */
footer .social { flex-basis: 100%; }
footer .social ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer .social a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; color: var(--text); font-weight: 600; }
footer .social svg { width: 28px; height: 28px; fill: currentColor; flex: none; }
footer .social a:hover { color: var(--accent); }

@media (min-width: 720px) {
  .join form { grid-template-columns: 1fr 1fr; }
  .join form .full { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .emblem-btn .emblem-hint { display: none; }
  .emblem-btn img { width: 48px; height: 48px; }
  section { padding: 52px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}