/* ---------------------------------------------------------------------------
   farmyourcalm.com — the site wears the app's own skin.

   Same palette tokens as the app (styles/tokens.css), same three faces plus
   nothing new: Bricolage Grotesque carries the fat rounded display work at
   its heaviest weight, Poppins does the game-facing numbers and chips,
   Geist does the reading. The "energetic" register comes from scale, tilt
   and the sticker sprites — not from new colours.
--------------------------------------------------------------------------- */

:root {
  --ink-950: #060b07;
  --ink-900: #0c1410;
  --ink-850: #101a14;
  --ink-800: #14211a;
  --ink-700: #1b2b22;
  --bone: #eff2e8;
  --bone-2: rgba(239, 242, 232, 0.68);
  --bone-3: rgba(239, 242, 232, 0.46);
  --leaf: #bce07a;
  --leaf-deep: #7fa851;
  --gold: #ebbf4a;
  --hairline: rgba(239, 242, 232, 0.12);
  --glass: rgba(239, 242, 232, 0.06);
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Geist', system-ui, sans-serif;
  --font-data: 'Poppins', system-ui, sans-serif;
  --r-lg: 22px;
  --r-pill: 999px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--ink-900);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--leaf); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Keyboard users get the same affordance a hover gives everyone else. */
:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ---------------- nav ---------------- */

/**
 * Floating chrome, not a bar. The brand sits left, the links live in
 * their own glass pill (each with a leaf dot, the site's one recurring
 * mark), and the store CTA rides right. Over the hero panel's deep green
 * it reads as game chrome rather than website furniture.
 */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 14px 0 6px;
  background: linear-gradient(180deg, var(--ink-900) 55%, rgba(12, 20, 16, 0));
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  max-width: 1180px;
  margin: 0 auto;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: inherit;
}

.nav-brand:hover { text-decoration: none; }

.nav-inner img { width: 40px; height: 40px; border-radius: 11px; }

.nav-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.nav-pill {
  margin: 0 auto;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-pill);
  background: rgba(239, 242, 232, 0.07);
  border: 1px solid rgba(239, 242, 232, 0.14);
}

.nav-pill a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  color: var(--bone-2);
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 13.5px;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-pill a:hover {
  background: rgba(239, 242, 232, 0.1);
  color: var(--bone);
  text-decoration: none;
}

.dot {
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--leaf);
  flex: none;
}

.btn-nav { padding: 11px 20px; font-size: 14.5px; }

/* Legal pages keep a plain quiet bar. */
.nav-legal .nav-inner { justify-content: space-between; }
.nav-legal .nav-links { display: flex; gap: 8px; font-family: var(--font-data); font-weight: 500; font-size: 13.5px; }
.nav-legal .nav-links a { color: var(--bone-2); padding: 10px 6px; display: inline-block; }

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

/**
 * One big rounded panel, inset from the viewport — the world seen through
 * a window rather than a full-bleed backdrop. Drenched in the brand's own
 * deep green, with faint vertical pinstripes for surface interest and the
 * valley art glowing faintly through the bottom edge so the imagery stays
 * present without fighting the type.
 */
.hero { padding: 8px 14px 0; }

.hero-panel {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 30px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 10px;
  padding: clamp(40px, 6vw, 84px) clamp(26px, 4.5vw, 64px);
  min-height: min(78vh, 720px);
  background:
    repeating-linear-gradient(90deg, rgba(239, 242, 232, 0.025) 0 1px, transparent 1px 96px),
    radial-gradient(120% 90% at 78% 18%, #23402d 0%, #16301f 46%, #0e2015 100%);
  border: 1px solid rgba(239, 242, 232, 0.1);
}

/* The valley, breathing through the panel's floor. */
.hero-panel::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: url('assets/hero.jpg') center 68% / cover no-repeat;
  opacity: 0.16;
  mask-image: linear-gradient(180deg, transparent, #000 85%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 85%);
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 1;
  animation: rise-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-eyebrow::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--gold);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(42px, 5.6vw, 78px);
  line-height: 1.0;
  letter-spacing: -0.038em;
  margin: 16px 0 18px;
  text-wrap: balance;
}

.hero h1 em { font-style: normal; color: var(--leaf); }

.hero p {
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  color: var(--bone-2);
  max-width: 46ch;
  margin: 0 0 30px;
  text-wrap: pretty;
}

/* ---------------- the mascot stage ---------------- */

.hero-stage {
  position: relative;
  z-index: 1;
  min-height: 340px;
  display: grid;
  place-items: center;
  /* The flock pill lives in this band; the mascot stays below it. */
  padding-top: 48px;
}

.mascot {
  width: min(100%, 430px);
  filter: drop-shadow(0 26px 34px rgba(4, 9, 6, 0.5));
  animation: float 6s ease-in-out infinite;
}

.mascot-side {
  position: absolute;
  right: 2%;
  bottom: 4%;
  width: clamp(90px, 10vw, 140px);
  filter: drop-shadow(0 14px 18px rgba(4, 9, 6, 0.45));
  animation: float 6s ease-in-out -2.4s infinite;
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

.doodle {
  position: absolute;
  stroke: rgba(239, 242, 232, 0.65);
  stroke-width: 2.4;
  stroke-linecap: round;
  fill: none;
  pointer-events: none;
}

.doodle-swirl { width: 74px; left: 13%; bottom: 30%; rotate: 34deg; }

.doodle-spark { width: 34px; right: 8%; top: 6%; rotate: 18deg; }

/**
 * The reference's avatar cluster, in this world's terms: the animals are
 * the accounts here, and naming them is the closest thing the app has to
 * a social feature.
 */
.flock-pill {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 14px 6px 8px;
  border-radius: var(--r-pill);
  background: rgba(12, 20, 16, 0.55);
  border: 1px solid rgba(239, 242, 232, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.flock-pill img {
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: rgba(239, 242, 232, 0.1);
  padding: 2px;
  margin-left: -6px;
}

.flock-pill img:first-child { margin-left: 0; }

.flock-pill span {
  margin-left: 8px;
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 11.5px;
  color: var(--bone-2);
  white-space: nowrap;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  transition: transform 0.15s ease;
}

.btn:hover { transform: translateY(-2px) scale(1.02); text-decoration: none; }

.btn-leaf {
  background: linear-gradient(160deg, #cdea90, var(--leaf) 55%, #a3cc5f);
  color: #1c2a12;
  box-shadow: 0 10px 30px rgba(188, 224, 122, 0.28);
}

.btn-go .go {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: -4px -12px -4px 2px;
  border-radius: 9px;
  background: rgba(12, 20, 16, 0.22);
  font-size: 19px;
  line-height: 1;
}

.btn-ghost {
  background: rgba(12, 20, 16, 0.55);
  color: var(--bone);
  border: 1px solid rgba(239, 242, 232, 0.3);
  backdrop-filter: blur(8px);
}

.store-note {
  margin-top: 16px;
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--bone-2);
  text-shadow: 0 1px 8px rgba(6, 11, 7, 0.8);
}

/* ---------------- sections ---------------- */

section { padding: 84px 0; }

/**
 * The site's one recurring mark: a bordered chip with the leaf dot, same
 * grammar as the nav pill. Sentence case on purpose — the tracked-caps
 * eyebrow is retired.
 */
.chip-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(239, 242, 232, 0.16);
  background: rgba(239, 242, 232, 0.05);
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--bone-2);
  margin-bottom: 16px;
}

h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
  text-wrap: balance;
}

.lede { color: var(--bone-2); max-width: 620px; margin-bottom: 40px; }

/* The three verbs. */
.verbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.verb {
  background: linear-gradient(165deg, var(--ink-800), var(--ink-850));
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 26px 24px 28px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.verb:hover { transform: translateY(-4px); border-color: rgba(188, 224, 122, 0.35); }

.verb img { width: 84px; height: 84px; object-fit: contain; margin-bottom: 6px; }

.verb h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.verb p { font-size: 14.5px; color: var(--bone-2); }

.verb .num {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 12px;
  color: var(--bone-2);
  letter-spacing: 0.1em;
}

/* Session cards, tilted like dealt cards. */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.card {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--ink-800);
  transition: transform 0.18s ease;
}

.card:nth-child(odd) { rotate: -1.2deg; }
.card:nth-child(even) { rotate: 1.1deg; }
.card:hover { transform: translateY(-6px); rotate: 0deg; }

.card img { aspect-ratio: 1; object-fit: cover; }

.card figcaption { padding: 13px 15px 15px; }

.card b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.02em;
  display: block;
}

.card span {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 12px;
  color: var(--bone-2);
}

/* The promises — the ethics as a scoreboard. */
.nevers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.never {
  display: flex;
  gap: 14px;
  align-items: baseline;
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 18px 20px;
}

.never b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--leaf);
  white-space: nowrap;
}

.never span { font-size: 14.5px; color: var(--bone-2); }

/* Sticker marquee. */
.marquee {
  overflow: hidden;
  padding: 26px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Margins rather than flex gap: the track is two identical halves and the
   animation jumps back by exactly 50%, so the halves must measure the same
   to the pixel. A trailing flex gap between the halves made the loop lurch
   22px every cycle. */
.marquee-track { display: flex; width: max-content; animation: slide 36s linear infinite; }

.marquee img { width: 76px; height: 76px; object-fit: contain; margin-right: 44px; }

@keyframes slide { to { transform: translateX(-50%); } }

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

footer {
  border-top: 1px solid var(--hairline);
  padding: 44px 0 56px;
  background: var(--ink-950);
}

.foot-grid { display: flex; flex-wrap: wrap; gap: 34px; justify-content: space-between; }

.foot-brand { display: flex; align-items: center; gap: 12px; }

.foot-brand img { width: 34px; height: 34px; border-radius: 9px; }

.foot-brand b { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; }

.foot-links { display: flex; gap: 26px; flex-wrap: wrap; font-size: 14px; }

.foot-links a { color: var(--bone-2); }

.disclaimer {
  margin-top: 30px;
  font-size: 12.5px;
  color: var(--bone-3);
  max-width: 720px;
  line-height: 1.65;
}

/* ---------------- legal pages ---------------- */

.legal { max-width: 720px; margin: 0 auto; padding: 60px 22px 90px; }

.legal h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 48px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: 8px;
}

.legal .updated { font-family: var(--font-data); font-size: 12.5px; color: var(--bone-3); margin-bottom: 36px; }

.legal h2 { font-size: 22px; margin: 36px 0 10px; }

.legal p, .legal li { color: var(--bone-2); font-size: 15.5px; }

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

.legal li { margin-bottom: 6px; }

/* ---------------- small screens ---------------- */

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

  /**
   * On phones the whole bar becomes one floating glass pill — the same
   * object grammar as the desktop link pill, shrunk to brand + CTA. The
   * loose full-width row it replaces read as three unrelated blocks on
   * bare black, which is to say: cheap.
   */
  .nav {
    padding: 10px 12px 4px;
    background: none;
  }

  .nav-inner {
    padding: 7px 7px 7px 14px;
    gap: 10px;
    border-radius: var(--r-pill);
    background: rgba(16, 26, 20, 0.72);
    border: 1px solid rgba(239, 242, 232, 0.14);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 8px 26px rgba(4, 9, 6, 0.4), inset 0 1px 0 rgba(239, 242, 232, 0.08);
  }

  .nav-inner img { width: 30px; height: 30px; border-radius: 8px; }

  .nav-name { font-size: 16px; }

  .btn-nav {
    margin-left: auto;
    padding: 9px 16px;
    font-size: 13px;
  }
}

@media (max-width: 840px) {
  .hero { padding: 6px 10px 0; }
  .hero-panel { grid-template-columns: 1fr; padding: 34px 24px 30px; min-height: 0; gap: 26px; }
  .hero-stage { min-height: 0; margin-top: 6px; padding-top: 56px; }
  .mascot { width: min(78%, 320px); }
  .doodle-swirl { display: none; }
  .flock-pill span { display: none; }
  .flock-pill { padding-right: 8px; }

  .verbs { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .nevers { grid-template-columns: 1fr; }
  section { padding: 60px 0; }

  /* The home nav's in-page anchors wrapped the bar to three lines at
     phone widths; keep only Support there. The legal pages' navs carry
     their three real page links instead (this rule once hid those too,
     which left the privacy page unable to reach the terms). Their name
     yields instead — the icon is identity enough at this width. */
  .nav-links { gap: 8px; font-size: 13px; }
  .nav-home .nav-links a:not(:last-child) { display: none; }
  .nav-legal .nav-name { display: none; }

}

/* Short desktop windows (720p laptops, split screens): the hero's type
   scale was sized for tall viewports, and the bee garnish lands on the
   eyebrow when everything compresses. Tighten the scale, lose the bee. */
@media (max-height: 800px) and (min-width: 841px) {
  .hero-inner { padding: 36px 22px 48px; }
  .hero h1 { font-size: clamp(40px, 6.6vw, 72px); }
  .hero p { margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .mascot, .mascot-side { animation: none; }
  .hero-copy { animation: none; }
  .btn:hover, .verb:hover, .card:hover { transform: none; }
}