/* =====================================================================
   TOKENS — the Snow palette, type and spacing.
   Colours are the ones in Snow's style.css; the accent is the favicon
   blue (#0366d6). Light only: there is no dark mode for this page.
   Every other stylesheet reads these and nothing else.
   ===================================================================== */
:root {
  color-scheme: light;

  /* surfaces */
  --snow: #f8f9fa;          /* the page */
  --paper: #ffffff;         /* cards, panels, inputs */
  --frost: #fbfcfd;         /* quiet fills: fact cells, rails */
  --mist: #f2f5f8;          /* pressed and inset fills */

  /* ink */
  --basalt: #16202a;        /* headings, primary buttons */
  --ink: #24292e;           /* body text */
  --ink-2: #3b4855;
  --muted: #586069;
  --faint: #8a97a3;
  --ghost: #a3aeb9;

  /* lines */
  --line: #d1d5da;
  --line-soft: #e8ecf1;
  --line-faint: #f0f3f6;

  /* accent: glacier, the Snow mark */
  --glacier: #0366d6;
  --glacier-deep: #0356b6;
  --glacier-line: #bcd9f5;
  --glacier-tint: #eaf3fd;
  --glacier-wash: #e8f0fb;

  /* signals */
  --moss: #1a7f37;          --moss-tint: #e9f8ee;
  --ember: #cf222e;         --ember-tint: #fdecee;   --ember-line: #f3c2c7;
  --amber: #9a6700;         --amber-tint: #fdf7e3;
  --violet: #8957e5;

  /* map surfaces */
  --sea: #e7eff8;
  --land: #ffffff;
  --coast: #c3ccd5;

  /* type — the three families Snow loads */
  --display: "Bricolage Grotesque", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1240px;
  --wrap-wide: 1440px;
  --section: clamp(72px, 11vw, 144px);
  --nav-h: 60px;

  /* shape */
  --r-sm: 6px; --r: 8px; --r-md: 12px; --r-lg: 14px; --pill: 999px;

  /* depth */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-2: 0 4px 12px rgba(3, 102, 214, .13);
  --shadow-3: 0 12px 32px rgba(15, 25, 40, .16);
  --shadow-4: 0 24px 70px rgba(15, 25, 40, .22), 0 2px 6px rgba(15, 25, 40, .12);
  --ring: 0 0 0 3px rgba(3, 102, 214, .15);

  /* time */
  --t-fast: .13s ease;
  --t-med: .22s ease;
  --ease-out: cubic-bezier(.2, .7, .1, 1);
}

/* No scrollbars, anywhere, on any page — scrolling still works
   (wheel, touch, keys). Firefox, old Edge, then WebKit/Blink. */
*, html, body { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar, html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }

/* No zoom-on-focus, anywhere, on any form. iOS Safari zooms into any
   field whose text is under 16px; at 16px it never does. Touch screens
   only, so desktop sizes are untouched; pinch-zoom still works. */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea, [contenteditable] { font-size: max(16px, 1em) !important; }
}

/* SECTION — NAV ------------------------------------------------------
   The one site bar, shared by the farm (landing/), the map, the articles
   (scripts/blog) and the buyer page (compute/): the word "Snow" on the left
   (it goes to the farm), then only the links that page needs, never the page
   you are on, and at most one solid action. Its edges line up with the
   page's content column (--wrap). The farm makes it see-through. */
#sitenav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  height: var(--nav-h);
  padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  background: rgba(248, 249, 250, .86);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 0; /* no line under the bar */
  transition: background var(--t-med, .2s);
}
#sitenav.scrolled { background: rgba(248, 249, 250, .92); }
#sitenav .mark {
  display: inline-flex; align-items: center;
  font: 800 27px/1 var(--display); letter-spacing: -.03em; color: var(--basalt); text-decoration: none;
} /* the bold wordmark, as the farm page first had it */
.navacts { display: inline-flex; align-items: center; gap: 4px; }
.navlink {
  padding: 8px 12px; border-radius: var(--pill);
  font: 500 13.5px/1 var(--sans); color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: color var(--t-fast, .12s), background var(--t-fast, .12s);
}
.navlink:hover { color: var(--basalt); background: var(--mist); }
.navlink[aria-current="page"] { color: var(--basalt); }
.navlink.solid { margin-left: 6px; padding: 10px 16px; background: var(--basalt); color: #fff; }
.navlink.solid:hover { background: var(--glacier); color: #fff; }
/* phones: the page you are on drops out of the list, and the links tighten up */
@media (max-width: 560px) {
  #sitenav { gap: var(--s2); }
  #sitenav .mark { font-size: 24px; }
  .navacts { gap: 0; }
  .navlink { padding: 8px 7px; font-size: 13px; }
  .navlink[aria-current="page"] { display: none; }
  .navlink.solid { margin-left: 4px; padding: 9px 12px; }
}
@media (max-width: 380px) { .navlink.solid { display: none; } }
/* the site footer: the same short line on every page but the farm.
   Only the company pages, never the page you are on (the bar already links the rest). */
.site-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: clamp(72px, 10vw, 128px);
  padding: 28px max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) calc(env(safe-area-inset-bottom, 0px) + 36px);
  font: 400 13px/1.4 var(--sans); color: var(--muted);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--basalt); }
@media print { #sitenav, .site-foot { display: none; } }

/* =====================================================================
   COMPUTE — the buyer page, at /compute/.
   Same family as the map and the articles: the snow-white page, light
   display headings, Inter and JetBrains Mono (tokens.css), and the shared
   site bar (src/sections/nav/nav.css). Snow blue marks the GPUs and choices.
   Layout: the site bar; a hero with the live rack drawing; the
   configurator (choices left, price right); then steps, specs, FAQ.
   ===================================================================== */
:root {
  /* the map's palette (tokens.css), under this page's own names */
  --ink: #24292e; --ink-soft: #586069; --line: #3b4855;
  --paper: #ffffff; --paper-2: #f2f5f8; --edge: #e1e6eb; --ground: #f8f9fa;
  --blue: #0366d6; --blue-dark: #0356b6; --blue-soft: #dbe9f9; --empty: #e8ecf1;
  --bad: #b42318;
  --c-tcs: #6d5fc0; --c-farm: #1f9a8a; --c-gly: #7c9a2a; /* the 40 ft's three liquid circuits */
  --body: var(--sans); /* --display and --mono come from tokens.css */
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--snow); color: var(--ink); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; margin: 0; color: var(--basalt); }
p { margin: 0; }
a { color: var(--blue); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sel { user-select: all; }
.eyebrow { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* buttons */
/* the map's buttons: pills, basalt for the main action, a quiet outline for the rest */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; font: 500 13.5px/1 var(--sans); letter-spacing: .005em; color: var(--ink); background: var(--paper); border: 1px solid #d1d5da; border-radius: var(--pill); padding: 0 16px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.btn:hover { border-color: var(--glacier-line); background: var(--glacier-tint); color: var(--glacier-deep); }
.btn.primary { background: var(--basalt); border-color: var(--basalt); color: #fff; }
.btn.primary:hover { background: var(--glacier); border-color: var(--glacier); color: #fff; }
.btn.big { min-height: 48px; font-size: 15px; padding: 0 26px; }
.btn.small { min-height: 28px; font-size: 12.5px; padding: 0 10px; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* bar: the shared site bar, src/sections/nav/nav.css */

main { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: 88px; padding-block: 48px 72px; }
.section-head { display: grid; gap: 10px; max-width: 64ch; margin-bottom: 28px; }
/* headings: the map's. Light display type for h1 and h2; h3 a small sans label */
h2 { font: 400 clamp(28px, 4vw, 50px)/1.04 var(--display); letter-spacing: -.025em; max-width: 22ch; }
h3 { font: 600 16px/1.35 var(--sans); letter-spacing: -.005em; }
.sub { color: var(--ink-soft); font-size: 17px; }
.hint { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; padding-top: clamp(32px, 6vw, 80px); }
.hero-head { grid-column: 1 / -1; display: grid; gap: var(--s5); }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.hero-copy { display: grid; gap: 20px; }
h1 { font: 300 clamp(44px, 8.4vw, 112px)/.96 var(--display); letter-spacing: -.035em; font-optical-sizing: auto; max-width: 16ch; }
.lede { font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
.facts { list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts li { min-width: 0; overflow-wrap: anywhere; padding: 12px 12px 12px 0; font-size: 13px; color: var(--ink-soft); line-height: 1.35; display: grid; gap: 2px; }
.facts li + li { padding-left: 12px; border-left: 1px solid var(--edge); }
.facts b { font: 600 21px/1.1 var(--mono); color: var(--ink); letter-spacing: -.02em; }
@media (max-width: 560px) { .facts b { font-size: 18px; } .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts li:nth-child(3) { padding-left: 0; border-left: 0; } .facts li:nth-child(n+3) { border-top: 1px solid var(--edge); } }
.row { display: flex; flex-wrap: wrap; gap: 10px; }

/* the rack drawing */
.rack { margin: 0; background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r-md); padding: 18px; display: grid; gap: 14px; }
.rack-head { display: flex; justify-content: space-between; gap: 10px; font: 500 12px/1.2 var(--mono); color: var(--ink-soft); flex-wrap: wrap; }
.rack-head span:last-child { color: var(--blue); font-weight: 500; }
.racks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.racks.big { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.racks.big .rk { padding: 6px 5px 8px; gap: 6px; }
.racks.big .srv { padding: 4px; gap: 3px; }
.rk.net { align-content: start; }
.rk.net .box { height: 16px; border-radius: 2px; background: var(--ink); opacity: .8; }
.rk.net .box + .box { opacity: .55; }
.rk { border: 1.5px solid var(--line); border-radius: 5px; padding: 8px 7px 10px; display: grid; gap: 8px; align-content: start; background: var(--ground); }
.rk .rk-gap { visibility: hidden; }   /* empty rack space, the height of rack A's network kit */
.rk-label { font: 500 10px/1 var(--mono); letter-spacing: .1em; color: var(--ink-soft); text-transform: uppercase; }
.srv { border: 1px solid var(--edge); background: var(--paper); border-radius: 3px; padding: 6px 5px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; transition: border-color .2s; }
.srv.on { border-color: var(--blue); }
.gpu { aspect-ratio: 1.6; border-radius: 2px; background: var(--empty); transition: background-color .25s ease; }
.srv.on .gpu { background: var(--blue); }
.srv.byo { border-color: var(--line); border-style: dashed; }
.srv.byo .gpu { background: repeating-linear-gradient(135deg, var(--blue-soft) 0 3px, var(--paper) 3px 6px); }
.rk-net { height: 10px; border-radius: 2px; background: var(--ink); opacity: .8; }
.rack figcaption { font-size: 13px; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .gpu, .srv { transition: none; } }

/* pod picker */
.pods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.pods button { text-align: left; display: grid; gap: 2px; border: 1px solid var(--edge); border-radius: 8px; padding: 12px; background: var(--ground); cursor: pointer; font: 400 13px var(--body); color: var(--ink-soft); }
.pods button b { font: 600 15px var(--body); color: var(--ink); }
.pods button .when { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.pods button[aria-pressed="true"] { border-color: var(--blue); background: var(--paper); box-shadow: inset 0 0 0 1px var(--blue); }
@media (max-width: 420px) { .pods { grid-template-columns: minmax(0, 1fr); } }
th[scope="col"] { font: 600 14px var(--body); color: var(--ink); width: auto; }

/* what your servers need (bring your own) */
.fit { border: 1px solid var(--edge); border-left: 3px solid var(--blue); background: var(--ground); border-radius: 8px; padding: 14px 16px; display: grid; gap: 8px; font-size: 14px; }
.fit b { font: 700 15px var(--body); }
.fit ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.fit li { padding-left: 20px; position: relative; }
.fit li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }
.fit p { color: var(--ink-soft); font-size: 13px; }
.rk-sub { font: 500 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); opacity: .8; }
.rk .box { display: block; height: 14px; border-radius: 2px; background: var(--ink); opacity: .8; }
.rk .box + .box { opacity: .55; }

/* configurator */
.config { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .config { grid-template-columns: minmax(0, 1fr); } }
.pick { display: grid; gap: 24px; background: var(--paper); border: 1px solid var(--edge); border-radius: 10px; padding: 22px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--paper-2); border-radius: 8px; }
.seg button { border: 0; background: transparent; font: 600 14px var(--body); color: var(--ink); padding: 11px 8px; border-radius: 6px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--blue); box-shadow: 0 0 0 1px var(--edge), 0 1px 2px rgba(0,0,0,.06); }
.field { display: grid; gap: 7px; min-width: 0; border: 0; margin: 0; padding: 0; }
.field label, .field legend { font-weight: 600; font-size: 14.5px; padding: 0; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.label-row output { font-size: 14px; color: var(--blue); font-weight: 500; }
input[type="range"] { width: 100%; accent-color: var(--blue); margin: 4px 0; }
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.term { position: relative; }
.term input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.term label { display: grid; gap: 2px; border: 1px solid var(--edge); border-radius: 8px; padding: 12px; background: var(--ground); cursor: pointer; font-weight: 400; height: 100%; }
.term label b { font: 600 15px var(--body); }
.term label span { font: 500 13.5px var(--mono); color: var(--ink-soft); }
.term label small { font-size: 12px; color: var(--blue); font-weight: 600; min-height: 1.2em; }
.term input:checked + label { border-color: var(--blue); background: var(--paper); box-shadow: inset 0 0 0 1px var(--blue); }
.term input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; }
/* phones: one row per term, name and saving on the left, price on the right, all the same height */
@media (max-width: 560px) {
  .terms { grid-template-columns: minmax(0, 1fr); }
  .term label { grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 14px 16px; }
  .term label b { grid-area: 1 / 1; }
  .term label small { grid-area: 1 / 2; min-height: 0; }
  .term label span { grid-area: 1 / 3; text-align: right; }
}

.quote { background: var(--ink); color: var(--paper); border-radius: 10px; padding: 22px; display: grid; gap: 16px; position: sticky; top: calc(var(--nav-h) + 24px); }
@media (max-width: 860px) { .quote { position: static; } }
.quote h3 { font: 500 11.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #b9c3cc; }
.price { display: grid; gap: 2px; }
.price .mono { font-size: clamp(34px, 4.4vw, 46px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; }
.price small { color: #b9c3cc; font-size: 13px; }
.lines { margin: 0; display: grid; gap: 0; border-top: 1px solid #4a5764; }
.lines div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #4a5764; font-size: 14px; }
.lines dt { color: #d3dae0; } .lines dd { margin: 0; text-align: right; }
.quote .hint { color: #b9c3cc; }

/* form */
.form { margin-top: 24px; background: var(--paper); border: 1px solid var(--edge); border-radius: 10px; padding: 22px; display: grid; gap: 18px; }
.form h3 { font-size: 20px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid .wide { grid-column: 1 / -1; }
@media (max-width: 860px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grid { grid-template-columns: minmax(0, 1fr); } }
input:not([type]), input[type="email"], select, textarea { width: 100%; font: 15px/1.4 var(--body); color: var(--ink); background: var(--ground); border: 1px solid var(--edge); border-radius: 6px; padding: 10px 11px; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: 2px solid var(--blue-soft); outline-offset: 0; }
input[aria-invalid="true"] { border-color: var(--bad); }
.opt { font-weight: 400; color: var(--ink-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.err { color: var(--bad); font-weight: 600; font-size: 14px; }
.done { margin-top: 24px; background: var(--paper); border: 1px solid var(--blue); border-radius: 10px; padding: 26px; display: grid; gap: 12px; justify-items: start; }
.done h3 { font-size: 26px; color: var(--blue); }
.done p { max-width: 64ch; }

/* steps */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1.5px solid var(--line); }
.steps li { counter-increment: s; padding: 16px 16px 0 0; display: grid; gap: 6px; align-content: start; position: relative; }
.steps li::before { content: counter(s, decimal-leading-zero); font: 500 12px/1 var(--mono); color: var(--blue); }
.steps li::after { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.steps b { font: 600 16px/1.35 var(--sans); }
.steps span { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1.5px solid var(--line); row-gap: 20px; } .steps li { padding: 0 0 0 20px; } .steps li::after { top: 2px; left: -5px; } }

/* why + specs */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; margin-bottom: 36px; }
@media (max-width: 860px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .why { grid-template-columns: minmax(0, 1fr); } }
.why div { display: grid; gap: 6px; align-content: start; border-top: 1px solid var(--edge); padding-top: 14px; }
.why h3 { font-size: 19px; }
.why p { color: var(--ink-soft); font-size: 15px; }
.specs { overflow-x: auto; }
/* phones: each spec becomes a small block, its two pods side by side, so nothing is squeezed */
@media (max-width: 640px) {
  .specs table { display: block; border: 0; background: transparent; border-radius: 0; }
  .specs caption { display: block; padding: 0 0 10px; }
  .specs tbody { display: block; background: var(--paper); border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; }
  .specs tr:first-child { display: none; }
  .specs tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; padding: 14px 16px; border-bottom: 1px solid var(--edge); }
  .specs tr:last-child { border-bottom: 0; }
  .specs th[scope="row"] { grid-column: 1 / -1; width: auto; padding: 0 0 2px; border: 0; white-space: normal; font: 600 14px/1.3 var(--body); color: var(--ink); }
  .specs td { padding: 0; border: 0; font-size: 14px; line-height: 1.45; }
  .specs td[data-pod]::before { content: attr(data-pod); display: block; margin-bottom: 2px; font: 500 10.5px/1.3 var(--mono); color: var(--ink-soft); }
  .specs td[colspan] { grid-column: 1 / -1; }
}
table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--edge); border-radius: 10px; font-size: 15px; }
caption { text-align: left; font: 500 11.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 10px; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--edge); vertical-align: top; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
th { font: 500 13px var(--mono); color: var(--ink-soft); width: 32%; white-space: nowrap; }

/* faq */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
@media (max-width: 760px) { .faq { grid-template-columns: minmax(0, 1fr); } }
details { border-bottom: 1px solid var(--edge); padding: 14px 0; }
summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 500 18px/1 var(--mono); color: var(--blue); }
details[open] summary::after { content: "−"; }
details p { margin-top: 8px; color: var(--ink-soft); max-width: 60ch; }

/* call */
.call { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r-md); padding: 28px; display: grid; gap: 12px; }
.contact { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 6px; }
.contact div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.contact .k { font: 500 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.contact .mono { font-size: 18px; }

.foot { margin: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); font-size: 13px; line-height: 1.5; color: var(--ink-soft); } /* the price note, just above the site footer */
.foot + .site-foot { margin-top: 8px; }

/* floor plan: drawn from the 3D models' own numbers (compute.js → PLANS) */
.plan { margin: 0 0 36px; background: var(--paper); border: 1px solid var(--edge); border-radius: 10px; padding: 20px; display: grid; gap: 14px; }
.plan-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.plan-head h3 { font-size: 20px; }
.plan-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.seg.mini { display: inline-grid; grid-template-columns: auto auto; }
.seg.mini button { padding: 8px 14px; font-size: 13px; }
.plan-scroll { overflow-x: auto; }
.plan-stage { position: relative; min-width: 760px; }
.plan-stage > svg { display: block; width: 100%; height: auto; font-family: var(--mono); }
.plan-stage > canvas, .plan-stage > .plan-labels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.plan-stage.flowing .pl-air, .plan-stage.flowing .pl-warm { opacity: 0; }   /* the particles replace the static arrows */
.plan-labels text { paint-order: stroke; stroke: var(--paper); stroke-width: var(--halo); stroke-linejoin: round; }
.plan-labels .pl-in { stroke: none; }   /* labels inside boxes need no halo */
.tkey { display: inline-flex; align-items: center; gap: 8px; }
.tkey b { width: 72px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #2a78d6, #4a9af0 28%, #b0a896 62%, #d9480f); display: inline-block; }
.plan-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--ink-soft); }
.plan-legend span { display: inline-flex; align-items: center; gap: 7px; }
.plan-legend i { width: 14px; height: 10px; border-radius: 2px; border: 1px solid var(--line); display: inline-block; }
.pl-shell { fill: var(--paper-2); stroke: var(--line); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.pl-floor { fill: var(--paper); }
.pl-room { fill: var(--ground); }
.pl-wall { fill: var(--ink-soft); }
.pl-fan { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pl-gap { fill: var(--paper); }
.pl-rack { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.pl-net { fill: var(--ink); stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pl-eq { fill: var(--empty); stroke: var(--ink-soft); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pl-line { fill: none; stroke: var(--ink-soft); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pl-dash { fill: none; stroke: var(--ink-soft); stroke-width: 1px; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.pl-air { fill: none; stroke: var(--blue); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.pl-warm { fill: none; stroke: #c4561d; stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.pl-dim { fill: none; stroke: var(--ink-soft); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.pl-t { fill: var(--ink); }
.pl-tm { fill: var(--ink-soft); }
.pl-tw { fill: var(--paper); }
.pl-tb { fill: var(--blue); }
.pl-tr { fill: #c4561d; }

/* the full 3D model, in the articles' viewer (the same overlay as the farm page) */
#full-view { position: fixed; inset: 0; z-index: 70; background: var(--ground); display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px calc(env(safe-area-inset-bottom, 0px) + 16px); gap: 12px; }
#full-view > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#full-view h2 { font-size: 26px; margin-top: 4px; }
.full-acts { display: flex; gap: 8px; flex-wrap: wrap; }
#full-body { flex: 1; min-height: 0; position: relative; }
#full-body .m3d-fig { position: absolute; inset: 0; margin: 0; }
#full-body .m3d { aspect-ratio: auto; height: 100%; }
body.full-open { overflow: hidden; }

/* required fields: a blue asterisk, as on the farm page's form */
.form .field > label i, .send .hint i { font-style: normal; color: var(--blue); font-weight: 600; }

/* the airflow toggle: the 3D viewer's Flow icon (m3d.js) */
.btn.icon { padding: 9px 11px; }
.btn.icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
#flowBtn[aria-pressed="true"] { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }

/* the 40 ft's liquid circuits */
.pl-pipe { fill: none; stroke-width: 2.6px; stroke-linejoin: round; stroke-linecap: round; opacity: .5; vector-effect: non-scaling-stroke; }
.pl-tcs { stroke: var(--c-tcs); } .pl-farm { stroke: var(--c-farm); } .pl-gly { stroke: var(--c-gly); }
.pl-bur { stroke-dasharray: 7 6; }
.pl-fanc { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.plan-legend .sw { width: 18px; height: 0; border: 0; border-top: 3px solid; border-radius: 2px; }
.tkey.liq b { background: linear-gradient(90deg, #2a78d6, #68a8ec 27%, #c99e52 68%, #c8281e); }