/* The public site: what the farm is, for anyone.

   app.css carries the tokens, the header, the cards and the metrics band,
   so the site and the dashboard look like one product. This file is what
   the site has that the dashboard does not: a hero with artwork, a nav
   that is links rather than panels, sections meant to be read top to
   bottom, a footer. Nothing here is loaded by the dashboard. */

body.site{display:flex;flex-direction:column}
body.site main{flex:1 0 auto;padding-top:22px}
body.site .connection{display:flex}
body.site .connection .button{padding:8px 12px;font-size:.8rem;text-decoration:none;border-radius:7px}
body.site nav a.nav-item{text-decoration:none;border-radius:7px}
body.site nav a.nav-item[aria-current=page]{background:var(--panel-2);color:var(--ink)}

/* Section rhythm: a heading, a line of context, then the thing. */
.site-section{margin:44px 0 0}
.site-section>header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}
.site-section>header h2{font-size:clamp(1.3rem,2.4vw,1.8rem);text-transform:none;letter-spacing:-.03em}
.site-section>header p{margin:0;max-width:52ch;color:var(--muted)}
.site-section>header .eyebrow{margin-bottom:6px}

/* The hero and the scenes: generated editorial hardware artwork. */
.site-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;margin:14px 0 34px}
.site-hero h1{font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.02;letter-spacing:-.055em;text-wrap:balance}
.site-hero h1 em{font-style:normal;color:var(--accent)}
.site-hero .lede{max-width:46ch;margin:22px 0 0;font-size:1.05rem}
.site-hero .hero-note{max-width:46ch;margin:14px 0 0;font-size:.85rem;color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-actions .button.quiet{background:#263631;color:var(--ink)}
.hero-art{margin:0;display:grid;gap:10px;width:min(560px,48vw)}
.hero-photo{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:13px;border:1px solid var(--line);box-shadow:0 18px 40px #0008}
.hero-art figcaption{text-align:center;font-size:.72rem;color:var(--muted)}
.site-hero.compact{margin-bottom:10px}
.site-hero.compact h1{font-size:clamp(2rem,4.6vw,3.2rem)}

/* Live numbers: the metrics band from app.css, with room for a note. */
.site .metrics article small{display:block;margin-top:6px;line-height:1.35}
.site .metrics article small strong{display:inline;font-size:inherit;letter-spacing:0;color:var(--ink)}
.site .metrics strong{font-variant-numeric:tabular-nums}
.metrics.five{grid-template-columns:repeat(5,1fr)}

/* Three things, side by side, each its own object. */
.site-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.site-grid article{margin:0}
.site-grid h3{margin:0 0 8px;font-size:1.05rem;letter-spacing:-.02em}
.site-grid p{margin:0;color:var(--muted)}
.site-grid p+p{margin-top:8px}
.site-grid .glyph{display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:12px;border-radius:9px;background:#63e6be1a;color:var(--accent);font-weight:750;font-size:.85rem;letter-spacing:.04em}

/* How a run happens: four stages in the order the farm runs them. This is a
   real sequence -- the farm's own stage names -- so the numbers mean it. */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:stage;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--panel)}
.stages li{list-style:none;padding:20px 18px 18px;border-left:1px solid var(--line);counter-increment:stage}
.stages li:first-child{border-left:0}
.stages li::before{content:counter(stage,decimal-leading-zero);display:block;margin-bottom:10px;color:var(--accent);font-size:.7rem;font-weight:750;letter-spacing:.2em}
.stages h3{margin:0 0 6px;font-size:1rem;letter-spacing:-.01em}
.stages p{margin:0;color:var(--muted);font-size:.9rem}
.stages code{font-size:.8em}

/* Scenes: two pictures with a line each, beside a paragraph. */
.scenes{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:14px;margin:18px 0 0}
.scene{margin:0;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:13px}
.scene img{display:block;width:100%;height:260px;object-fit:cover}
.scene figcaption{padding:11px 14px;color:var(--muted);font-size:.76rem}
.scene figcaption strong{color:var(--ink)}

/* Prose sections on the longer pages: one readable column, real headings. */
.site-prose{max-width:72ch}
.site-prose h3{margin:26px 0 8px;font-size:1.1rem;letter-spacing:-.02em}
.site-prose h3:first-child{margin-top:0}
.site-prose p,.site-prose li{color:var(--muted)}
.site-prose p strong,.site-prose li strong{color:var(--ink);font-weight:650}
.site-prose ul{padding-left:20px}
.site-prose li{margin:5px 0}
.site-prose a{color:var(--accent)}
.two-up{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
.two-up aside{margin:0;position:sticky;top:calc(var(--header) + 18px)}
.two-up aside h3{margin-top:0}
.two-up aside ul{padding-left:18px}

/* What is public and what is not: a rule that is easier to read as a table. */
.rule-table{width:100%;border-collapse:collapse;margin-top:8px}
.rule-table th,.rule-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.rule-table th{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.rule-table td:first-child{color:var(--ink);font-weight:650;white-space:nowrap}

/* The rigs and the software: cards on a grid, as the world page had them. */
.site-rigs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:18px}
.site-rig{margin:0}
.site-rig h3{margin:0;font-size:1.2rem;letter-spacing:-.02em}
.site-rig .title-row small{display:block;margin-top:2px}
.site-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px 14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.site-facts small{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}
.site-facts span{display:block;margin-top:2px}
.setup-chips{margin-top:10px}
.family{display:inline-block;margin:0 10px 0 0}
.family strong{display:inline;font-size:inherit;letter-spacing:0;color:var(--ink)}

/* A wide call to action before the footer. */
.site-cta{margin:48px 0 0;padding:28px;border:1px solid #63e6be45;border-radius:13px;background:linear-gradient(145deg,#12211d,#0d1614);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
.site-cta h2{text-transform:none;letter-spacing:-.03em;font-size:1.5rem;margin:0 0 6px}
.site-cta p{margin:0;color:var(--muted);max-width:56ch}
.site-cta .hero-actions{margin:0}

/* The footer: where else to go, and who to write to. */
.site-footer{max-width:1180px;margin:0 auto;padding:26px 22px 60px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
.site-footer a{color:var(--accent);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer nav{gap:14px}
.site-note{margin:14px 0 0;color:var(--muted);font-size:.85rem}

@media(max-width:850px){
  body.site .connection{display:flex;justify-self:end}
  .site-hero{grid-template-columns:1fr;gap:26px}
  .hero-art{width:100%;justify-items:start}
  .scenes{grid-template-columns:1fr}
  .scene img{height:auto}
  .stages{grid-template-columns:1fr 1fr}
  .stages li:nth-child(3){border-left:0}
  .stages li:nth-child(n+3){border-top:1px solid var(--line)}
  .two-up{grid-template-columns:1fr}
  .two-up aside{position:static}
  .metrics.five{grid-template-columns:repeat(2,1fr)}
  .site-cta{grid-template-columns:1fr}
  .site-section>header{flex-direction:column;align-items:flex-start}
}
@media(max-width:520px){
  .stages{grid-template-columns:1fr}
  .stages li{border-left:0;border-top:1px solid var(--line)}
  .stages li:first-child{border-top:0}
  .rule-table td:first-child{white-space:normal}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.page{animation:none}}
/* The dashboard as it is: screenshots shown whole, never cropped like the scenes above. */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 0;align-items:start}
.shot{margin:0;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:13px}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:11px 14px;color:var(--muted);font-size:.76rem}
.shot figcaption strong{color:var(--ink)}
.diagram{margin:0 0 28px}
.diagram img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:13px}
.diagram figcaption{margin-top:8px;color:var(--muted);font-size:.76rem;text-align:center}
@media(max-width:760px){.shots{grid-template-columns:1fr}}
.site-prose .shot{margin:16px 0 18px}