/* ---------------------------------------------------------------------------
   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 ---------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(12, 20, 16, 0.82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--hairline);
}

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

.nav img { width: 38px; height: 38px; border-radius: 10px; }

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

.nav-links {
  margin-left: auto;
  display: flex;
  gap: 22px;
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 13.5px;
}

.nav-links a {
  color: var(--bone-2);
  /* 22px of text is not a tap target. Padding does it without moving the bar. */
  padding: 10px 4px;
  display: inline-block;
}
.nav-links a:hover { color: var(--bone); text-decoration: none; }

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

.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('assets/hero.jpg') center 30% / cover no-repeat;
}

/* Readability over the valley without flattening it. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(6, 11, 7, 0.18), rgba(6, 11, 7, 0.66) 78%),
    linear-gradient(180deg, rgba(12, 20, 16, 0.5), rgba(12, 20, 16, 0) 22%, rgba(12, 20, 16, 0) 62%, var(--ink-900));
}

.hero-inner { padding: 64px 22px 84px; max-width: 800px; }

.hero-eyebrow {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--leaf);
  text-shadow: 0 1px 10px rgba(6, 11, 7, 0.8);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(46px, 8.6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 18px 0 20px;
  text-shadow: 0 2px 26px rgba(6, 11, 7, 0.75);
  text-wrap: balance;
}

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

.hero p {
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--bone);
  text-shadow: 0 1px 12px rgba(6, 11, 7, 0.85);
  max-width: 560px;
  margin: 0 auto 34px;
  text-wrap: balance;
}

.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-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);
}

/* Stickers scattered over the hero, like the game spilling out of it. */
.sticker {
  position: absolute;
  width: clamp(64px, 9vw, 110px);
  filter: drop-shadow(0 10px 18px rgba(4, 9, 6, 0.5));
  animation: bob 5.2s ease-in-out infinite;
  pointer-events: none;
}

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

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

section { padding: 84px 0; }

.kicker {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: 12px;
}

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: 840px) {
  .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; }

  /* Stickers share the hero with a lot of text on a narrow screen. Two
     survive, pinned to the top corners where the text never reaches; the
     rest return at tablet widths. */
  .sticker { display: none; }
  /* The corner stickers need headroom the desktop hero no longer reserves:
     trimming .hero-inner for short desktops pulled the eyebrow up under
     them here. Phones have vertical room to spare, so it goes back. */
  .hero-inner { padding-top: 104px; }
  .sticker.keep {
    display: block;
    width: 52px;
    top: 3% !important;
    bottom: auto !important;
  }
}

/* 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; }
  .sticker.garnish { display: none; }
}

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