/* ─────────────────────────────────────────────────────────────────────────
   Farmalytics — marketing, docs and download site.

   Shares the live map's palette and typography on purpose: a customer moves
   between this site and the map, and they should read as one product. Tokens
   are copied rather than imported because the map is a self-contained HUD
   and must never depend on this file.

   Committed to a single dark world, like the map. Every colour is painted
   explicitly so the page never inherits a host background.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;

  /* Farming Simulator, not a spreadsheet and not a void.
     Two earlier passes missed in opposite directions: the live map's
     near-black reads as oppressive across a whole site, and a clean white
     reads as a blank template with no product in it. So the body sits on warm
     field tones — parchment and dried grass rather than paper — and the
     header, hero and footer are anchored in deep field green. That contrast
     is what makes it look designed rather than defaulted.

     Committed to one scheme on purpose, like the live map. An auto dark mode
     on top of an already-warm palette gives two half-considered looks instead
     of one deliberate one. */

  /* Body surfaces — warm, low-chroma, never pure white. */
  --ground:#F2EFE3;        /* parchment */
  --band:#EAE6D6;          /* alternating section, one step deeper */
  --panel:#FBF9F1;         /* cards and tables lift off the ground */
  --raise:#E3DFCC;         /* inset: code, table heads */
  --line:#CBC7AF;
  --line-soft:#DCD8C4;

  /* Ink */
  --ink:#1B2317;
  --dim:#4C5844;
  --faint:#727D68;

  /* Deep field green — header, hero, footer. */
  --deep:#17281A;
  --deep-2:#1E3422;        /* raised surface on deep */
  --deep-line:#2C4630;
  --deep-ink:#EDF2E4;
  --deep-dim:#A9BCA1;
  --deep-acc:#A8CE3A;      /* 9.4:1 on --deep */

  /* Accents on light surfaces. */
  --acc:#3F6B0E;           /* links / accent text: 6.3:1 on --ground */
  --acc-strong:#365C0C;    /* solid fill, white text: 7.2:1 */
  --acc-ink:#FFFFFF;
  --acc-wash:rgba(63,107,14,.10);

  --live:#2C7130;
  --warn:#8A5F04;
  --danger:#A62C1E;

  --shadow:0 1px 2px rgba(23,40,26,.07),0 12px 30px rgba(23,40,26,.10);
  --hud:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:Barlow,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.6 2.8 8.2l1.1-1.1 2.3 2.3 5.9-5.9 1.1 1.1z'/%3E%3C/svg%3E");
  --gutter:16px;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:16px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
img{max-width:100%;display:block}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.lbl{
  font-family:var(--hud);font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}

/* ── header ────────────────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:50;
  background:var(--deep);
  border-bottom:1px solid var(--deep-line);
}
.nav{display:flex;align-items:center;gap:24px;height:62px}
.brand{
  font-family:var(--hud);font-weight:700;font-size:23px;letter-spacing:.01em;
  color:var(--deep-ink);display:flex;align-items:center;gap:2px;
}
.brand:hover{text-decoration:none}
.brand .dot{color:var(--deep-acc)}
.nav nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav nav a{color:var(--deep-dim);font-size:15px;font-weight:500}
.nav nav a:hover,.nav nav a[aria-current=page]{color:var(--deep-ink);text-decoration:none}
.nav nav a[aria-current=page]{color:var(--deep-acc)}
.burger{display:none;margin-left:auto;background:none;border:0;color:var(--deep-ink);
  padding:8px;cursor:pointer}
@media (max-width:760px){
  .burger{display:block}
  .nav nav{
    position:absolute;top:62px;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--deep-2);
    border-bottom:1px solid var(--deep-line);margin-left:0;
  }
  .nav nav[hidden]{display:none}
  .nav nav a{padding:13px var(--gutter);border-top:1px solid var(--deep-line)}
}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:7px;font-weight:600;font-size:15px;
  border:1px solid transparent;cursor:pointer;line-height:1.2;
  transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--acc-strong);color:var(--acc-ink);border-color:var(--acc-strong)}
.btn-primary:hover{filter:brightness(1.12)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc)}
.btn-lg{padding:15px 30px;font-size:16px}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{
  padding:86px 0 72px;background:var(--deep);color:var(--deep-ink);
  border-bottom:1px solid var(--deep-line);
}
.hero .lbl{color:var(--deep-acc)}
.hero h1{color:var(--deep-ink)}
.hero .sub{color:var(--deep-dim)}
.hero .note{color:var(--deep-dim)}
.hero .btn-ghost{border-color:var(--deep-line);color:var(--deep-ink)}
.hero .btn-ghost:hover{border-color:var(--deep-acc);color:var(--deep-acc)}
.hero .btn-primary{background:var(--deep-acc);color:var(--deep);border-color:var(--deep-acc)}
.hero h1{
  font-family:var(--hud);font-weight:700;
  font-size:clamp(2.6rem,7vw,4.4rem);line-height:1.03;
  margin:16px 0 0;letter-spacing:-.015em;max-width:15ch;
}
.hero h1 .acc{color:var(--deep-acc)}
.hero .sub{font-size:clamp(1.05rem,2.4vw,1.28rem);color:var(--dim);
  max-width:56ch;margin:20px 0 0}
.hero .cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.hero .note{margin-top:17px;color:var(--faint);font-size:14px}

/* ── sections ──────────────────────────────────────────────────────────── */
section{padding:72px 0}
section + section{border-top:1px solid var(--line-soft)}
/* Alternating bands, so a long page reads as distinct chapters rather than
   one continuous scroll. */
main > section:nth-of-type(even){background:var(--band)}
h2{font-family:var(--hud);font-weight:700;font-size:clamp(1.8rem,4vw,2.5rem);
  margin:12px 0 0;letter-spacing:-.01em;line-height:1.12}
.sec-intro{color:var(--dim);max-width:62ch;margin:14px 0 0;font-size:17px}
h3{font-family:var(--hud);font-weight:600;font-size:1.32rem;margin:0 0 8px;
  letter-spacing:.005em}

/* ── cards ─────────────────────────────────────────────────────────────── */
.grid{display:grid;gap:18px;margin-top:38px}
.g3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.card{
  background:var(--panel);border:1px solid var(--line-soft);
  border-radius:11px;padding:24px;
}
.card p{color:var(--dim);margin:0;font-size:15px}
.card .ico{
  width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  background:var(--acc-wash);color:var(--acc);margin-bottom:15px;
  font-size:19px;
}

/* ── pricing ───────────────────────────────────────────────────────────── */
.tier{
  background:var(--panel);border:1px solid var(--line-soft);
  border-radius:11px;padding:26px;display:flex;flex-direction:column;
}
.tier.feature{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc-wash)}
.tier .name{font-family:var(--hud);font-weight:700;font-size:1.4rem}
.tier .price{font-size:2.1rem;font-weight:700;margin:10px 0 2px;
  font-family:var(--hud)}
.tier .price .per{font-size:.95rem;color:var(--faint);font-weight:500}
.tier ul{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:10px}
.tier li{display:flex;gap:10px;color:var(--dim);font-size:15px;align-items:flex-start}
.tier li::before{content:"";flex:0 0 auto;width:15px;height:15px;margin-top:4px;
  background:var(--acc);
  -webkit-mask:var(--tick) center/contain no-repeat;
  mask:var(--tick) center/contain no-repeat;}
.tier .btn{margin-top:auto}
.tag{
  display:inline-block;font-family:var(--hud);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc-ink);background:var(--acc-strong);
  padding:3px 9px;border-radius:4px;margin-left:9px;vertical-align:3px;
}

/* ── tables / command reference ────────────────────────────────────────── */
.cmds{margin-top:26px;border:1px solid var(--line-soft);border-radius:11px;
  overflow:hidden;background:var(--panel)}
.cmds .row{display:grid;grid-template-columns:minmax(190px,270px) 1fr;gap:18px;
  padding:13px 20px;border-top:1px solid var(--line-soft);align-items:baseline}
.cmds .row:first-child{border-top:0}
.cmds code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;color:var(--acc);white-space:nowrap}
.cmds .d{color:var(--dim);font-size:15px}
@media (max-width:640px){
  .cmds .row{grid-template-columns:1fr;gap:4px}
  .cmds code{white-space:normal;word-break:break-word}
}
.group-head{
  padding:15px 20px;background:var(--raise);border-top:1px solid var(--line);
  font-family:var(--hud);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-size:12px;color:var(--dim);
}
.cmds .group-head:first-child{border-top:0}

/* ── steps ─────────────────────────────────────────────────────────────── */
ol.steps{counter-reset:s;list-style:none;padding:0;margin:32px 0 0;display:grid;gap:18px}
ol.steps > li{
  counter-increment:s;position:relative;padding-left:52px;
  color:var(--dim);font-size:15px;
}
ol.steps > li::before{
  content:counter(s);position:absolute;left:0;top:-2px;
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--acc-wash);color:var(--acc);
  font-family:var(--hud);font-weight:700;font-size:16px;
}
ol.steps > li strong{color:var(--ink);display:block;margin-bottom:3px;
  font-family:var(--hud);font-size:1.12rem;font-weight:600}
ol.steps code,p code,li code,td code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;background:var(--raise);border:1px solid var(--line-soft);
  padding:1px 6px;border-radius:4px;color:var(--acc);
}

/* ── download panel ────────────────────────────────────────────────────── */
.dl{
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:30px;margin-top:34px;box-shadow:var(--shadow);
}
.dl .top{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.dl .ver{font-family:var(--hud);font-size:2rem;font-weight:700;line-height:1}
.dl .meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:20px;
  padding-top:20px;border-top:1px solid var(--line-soft);font-size:14px;color:var(--dim)}
.dl .meta b{color:var(--ink);font-weight:600}
.sum{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;color:var(--faint);word-break:break-all;margin-top:14px;
}

/* ── callout ───────────────────────────────────────────────────────────── */
.note-box{
  border-left:3px solid var(--acc);background:var(--raise);
  padding:15px 19px;border-radius:0 8px 8px 0;margin-top:24px;
  color:var(--dim);font-size:15px;
}
.note-box.warn{border-left-color:var(--warn)}
.note-box strong{color:var(--ink)}

/* ── footer ────────────────────────────────────────────────────────────── */
footer{
  background:var(--deep);border-top:1px solid var(--deep-line);
  padding:48px 0 60px;color:var(--deep-dim);font-size:14px;
}
footer .brand{color:var(--deep-ink)}
footer .brand .dot{color:var(--deep-acc)}
.foot{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start}
.foot nav{display:flex;flex-wrap:wrap;gap:20px;margin-left:auto}
.foot nav a{color:var(--deep-dim)}
.foot nav a:hover{color:var(--deep-acc)}

/* ─────────────────────────────────────────────────────────────────────────
   Page furniture.

   Everything below exists so no page needs a style attribute. That is not
   tidiness for its own sake: with no inline styles and no inline scripts the
   Content-Security-Policy can be 'self' with no 'unsafe-inline' anywhere,
   which is the single biggest hardening win available to a static site.
   ───────────────────────────────────────────────────────────────────────── */
.page-head{
  padding:58px 0 46px;background:var(--deep);color:var(--deep-ink);
  border-bottom:1px solid var(--deep-line);
}
.page-head .lbl{color:var(--deep-acc)}
.page-head h1{color:var(--deep-ink)}
.page-head .sub{color:var(--deep-dim)}
.page-head h1{
  font-family:var(--hud);font-weight:700;letter-spacing:-.012em;
  font-size:clamp(2.1rem,5.2vw,3.2rem);line-height:1.06;margin:14px 0 0;
}
.page-head .sub{color:var(--dim);max-width:58ch;margin:16px 0 0;font-size:17px}
.tight{padding-top:46px}
.mt-l{margin-top:52px}
.mt-m{margin-top:30px}
.mt-s{margin-top:16px}

/* ── spec list: denser and less templated than a grid of identical cards ── */
.spec{
  margin-top:36px;border-top:1px solid var(--line-soft);
}
.spec > div{
  display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:12px 30px;
  padding:20px 0;border-bottom:1px solid var(--line-soft);align-items:start;
}
.spec h3{margin:0;font-size:1.14rem;color:var(--ink)}
.spec p{margin:0;color:var(--dim);font-size:15px}
.spec p + p{margin-top:7px}
@media (max-width:680px){
  .spec > div{grid-template-columns:1fr;gap:5px}
}

/* ── sample: a rendered stand-in for what the bot posts ───────────────── */
.sample{
  margin-top:32px;background:#1B1D21;border-radius:8px;overflow:hidden;
  border:1px solid #2B2E33;max-width:540px;
  font:15px/1.5 var(--body);
}
.sample .bar{display:flex;gap:9px;align-items:center;padding:11px 15px;
  border-bottom:1px solid #2B2E33;color:#B5BAC1;font-size:13px}
.sample .bar b{color:#F2F3F5;font-weight:600}
.sample .emb{display:flex;margin:13px 15px 15px}
/* The mock-up imitates Discord, which is dark in both site themes, so its
   colours are fixed rather than tokenised. */
.sample .spine{width:4px;border-radius:4px 0 0 4px;background:#A3C42C;flex:0 0 auto}
.sample .in{background:#2B2D31;border-radius:0 8px 8px 0;padding:13px 16px;flex:1;min-width:0}
.sample .t{color:#F2F3F5;font-weight:600;margin:0 0 9px;font-size:15px}
.sample dl{display:grid;grid-template-columns:1fr 1fr;gap:11px 16px;margin:0}
.sample dt{color:#B5BAC1;font-size:12px;font-weight:600;margin:0 0 1px}
.sample dd{color:#DBDEE1;margin:0;font-size:14px}
.sample .ft{color:#949BA4;font-size:12px;margin:12px 0 0}
.sample .ppl{color:#DBDEE1;font-size:14px;margin:0}
.sample .ppl span{color:#949BA4}

/* ── plain tables ──────────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{
  text-align:left;padding:13px 20px;font-weight:600;color:var(--faint);
  font-family:var(--hud);letter-spacing:.09em;text-transform:uppercase;font-size:12px;
}
.tbl td{padding:13px 20px;color:var(--dim);border-top:1px solid var(--line-soft)}
.tbl td b{color:var(--ink);font-weight:600}
.panel{background:var(--panel);border:1px solid var(--line-soft);
  border-radius:11px;overflow:hidden;margin-top:26px}
@media (max-width:620px){
  .tbl th,.tbl td{padding:11px 13px}
  .tbl .opt{display:none}
}

/* ── status block ──────────────────────────────────────────────────────── */
.status{display:flex;align-items:center;gap:14px}
#dot{width:13px;height:13px;border-radius:50%;background:var(--faint);flex:0 0 auto}
#dot.up{background:var(--live)}
#dot.down{background:var(--danger)}
.status .big{font-family:var(--hud);font-size:1.5rem;font-weight:700;
  display:block;line-height:1.1}
.push{margin-left:auto}

/* ── misc ──────────────────────────────────────────────────────────────── */
.lede{color:var(--dim);max-width:64ch;font-size:17px;margin:14px 0 0}
.cols2{columns:2;column-gap:40px;margin-top:26px}
.cols2 p{break-inside:avoid;margin:0 0 15px;color:var(--dim);font-size:15px}
@media (max-width:680px){.cols2{columns:1}}
.foot p{margin:8px 0 0}
.foot p + p{margin-top:6px}

/* ── changelog rendering (download page) ───────────────────────────────── */
.chg h3{margin:30px 0 0;font-size:1.2rem}
.chg .lbl{margin:18px 0 6px}
.chg ul{color:var(--dim);font-size:15px;padding-left:20px;display:grid;gap:8px;margin:0}
.sum b{color:var(--dim)}
.dl .ver{line-height:1}

/* ── invite call-to-action ─────────────────────────────────────────────── */
/* Sits in the deep-green header, so it uses the on-deep accent rather than
   the light-surface one. */
.nav .invite{
  background:var(--deep-acc);color:var(--deep);
  padding:8px 17px;border-radius:6px;font-weight:600;font-size:14px;
  white-space:nowrap;line-height:1.4;
}
.nav .invite:hover{text-decoration:none;filter:brightness(1.08)}
.nav nav a.invite{color:var(--deep)}
.nav nav a.invite:hover,.nav nav a.invite[aria-current=page]{color:var(--deep)}
@media (max-width:760px){
  .nav nav a.invite{
    margin:12px var(--gutter) 14px;text-align:center;border-top:0;
    padding:11px 17px;
  }
}
/* Permission list on the docs page. */
.perms{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px;
  max-width:60ch}
.perms li{display:flex;gap:10px;color:var(--dim);font-size:15px;
  align-items:flex-start}
.perms li::before{content:"";flex:0 0 auto;width:15px;height:15px;margin-top:4px;
  background:var(--acc);
  -webkit-mask:var(--tick) center/contain no-repeat;
  mask:var(--tick) center/contain no-repeat}
.perms li b{color:var(--ink);font-weight:600}