/* Slate's public site.

   The pages a stranger sees, built from the product's own tokens rather than
   a second design language: `--page`, `--card`, `--hair`, `--ink`, `--ink2`,
   `--accent`, `--plum`, `--moss`, `--amber`, `--r`, `--ui`, `--num` all come
   from static/console.css, and the masthead is literally the product's
   `.workspace-topbar` / `.workspace-brand` markup from static/workspace.css.
   Nothing here redefines a token or a class that belongs to another file;
   everything is namespaced `.site-`.

   Light only, on purpose. The product has eight themes and stores the choice
   per machine in localStorage; a marketing page that read that would need a
   blocking script and would show a stranger a dark surface because of a
   preference they set on an unrelated screen. The public documents carry
   `data-theme="light"` in the markup, so no script runs and the tokens above
   resolve to their light values.

   The 390px column is the constraint that shapes most of the media queries.
   Every rule that could produce a horizontal scrollbar at that width -- fixed
   widths, wide tables, the browser frame around the hero screenshot, the
   pricing grid -- either collapses to one column or scrolls inside its own
   box. `tests/test_public_site.py` cannot measure that; the acceptance check
   is real Chrome at 1800, 1440 and 390. */


/* ----------------------------------------------------------------------------
   1. SHELL
   ---------------------------------------------------------------------------- */

/* Two site-local values, both of them contrast repairs measured against the
   product's own light palette (--page #f4f1e9, --card #fffdf8, --ink
   #17211d, --accent #e85d3f, --line #9b9588).

   --site-accent-ink: --accent as TEXT on --page measures 3.07:1, which is
   under the 4.5:1 bar this codebase holds itself to. Darkening it toward
   --ink by a third gives 5.13:1 on --page, 5.69:1 on --card and 4.56:1 on
   --sunk, so link text, the accent eyebrow and the quiet text link all pass
   on every surface they are used on. --accent itself is untouched and stays
   the fill colour on buttons and rules, where it is a surface rather than
   text and carries --on-accent at 5.13:1.

   --site-control-line: --line as a 1px control border measures 2.64:1 on
   --page and 2.93:1 on --card, both under the 3:1 bar for control edges.
   Darkening it gives 4.29:1 and 4.76:1. Only the form inputs use it; the
   hairlines that separate content keep --hair, which is decoration. */
:root {
  --site-accent-ink: color-mix(in srgb, var(--accent) 68%, var(--ink));
  --site-control-line: color-mix(in srgb, var(--line) 70%, var(--ink));
  /* --ink2 is 4.34:1 on --sunk and 4.46:1 on --plum-wash: fine as the
     dominant body colour on --page and --card, just under the bar on the
     two tinted panels this site introduces. 86% of the way from --ink2 to
     --ink measures 5.05:1 and 5.19:1 on those two, so the tinted panels use
     this and everything else keeps --ink2 unchanged. */
  --site-ink2-strong: color-mix(in srgb, var(--ink2) 86%, var(--ink));
}

.site-body {
  min-height: 100vh;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.site-body *,
.site-body *::before,
.site-body *::after { box-sizing: border-box; }

/* Deliberately NOT `.site-body a { color: var(--accent) }`. That rule reads
   as harmless and is not: `.site-body a` is one class and one element, which
   outranks the single class on `.site-cta`, on `.workspace-brand` and on
   `.workspace-nav a`. The measured result was a primary button painted
   `--accent` with its label also painted `--accent` -- an orange rectangle
   with no visible text -- and a brand mark that changed colour between the
   site and the product it is supposed to be the same object as. Anchors that
   are controls carry their own colour; only anchors inside running prose are
   coloured here, and `:not([class])` is what keeps this rule -- two classes
   and two elements -- from outranking `.site-cta` on a button that happens
   to sit inside a paragraph. That exact case shipped once in this file: the
   hero action rendered its label in link colour on the accent fill. */
.site-body main p a:not([class]),
.site-body main li a:not([class]),
.site-body main dd a:not([class]),
.site-body main figcaption a:not([class]) {
  color: var(--site-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-body img { max-width: 100%; height: auto; display: block; }
.site-body button,
.site-body input,
.site-body textarea { font: inherit; color: inherit; }

.site-body :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 46%, transparent);
  outline-offset: 3px;
}

/* Wider than the product's 1180px frame: the app is a working surface with a
   rail, the site is a reading surface with two- and three-up rows. */
.site-frame {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
}

/* The keyboard visitor's way past the masthead and into the page. Visible
   only when focused, which is the only time it is useful. */
.site-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--page);
  text-decoration: none;
}
.site-skip:focus { left: 12px; top: 12px; }


/* ----------------------------------------------------------------------------
   2. MASTHEAD AND FOOTER
   ---------------------------------------------------------------------------- */

/* The bar itself is .workspace-topbar; this only pins it and supplies the
   paper behind it, so the brand mark on the site and the brand mark inside
   the product are the same object rendered by the same rules. */
.site-masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
}

.site-masthead .workspace-topbar { border-bottom: 1px solid var(--hair); }

.site-masthead__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Two doors, and only one of them is drawn. The page ships with the
   signed-out pair visible; slate/web/public.py flips data-signed-in on the
   body when the visitor already has a live session, and the swap is a
   stylesheet rule rather than a script. */
[data-signed-in="true"] .site-when-signed-out,
[data-signed-in="false"] .site-when-signed-in { display: none; }

.site-footer {
  margin-top: 96px;
  padding: 56px 0 72px;
  border-top: 1px solid var(--hair);
  background: var(--card);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.site-footer h2 {
  margin: 0 0 14px;
  font-family: var(--num);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink2);
}

.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: var(--ink2); text-decoration: none; font-size: 14px; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }

.site-footer__note {
  max-width: 42ch;
  margin: 14px 0 0;
  color: var(--ink2);
  font-size: 13.5px;
  line-height: 1.65;
}

.site-footer__base {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: baseline;
  color: var(--ink2);
  font-family: var(--num);
  font-size: 11px;
  letter-spacing: .04em;
}


/* ----------------------------------------------------------------------------
   3. TYPE AND SECTION FURNITURE
   ---------------------------------------------------------------------------- */

.site-eyebrow {
  margin: 0 0 14px;
  color: var(--ink2);
  font-family: var(--num);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-eyebrow--accent { color: var(--site-accent-ink); }
.site-eyebrow--plum { color: var(--plum); }

.site-h1 {
  margin: 0 0 22px;
  max-width: 19ch;
  font-size: clamp(38px, 4.6vw, 62px);
  font-weight: 640;
  line-height: 1.06;
  letter-spacing: -0.032em;
}

.site-h2 {
  margin: 0 0 18px;
  max-width: 24ch;
  font-size: clamp(27px, 2.6vw, 36px);
  font-weight: 640;
  line-height: 1.15;
  letter-spacing: -0.024em;
}

.site-h3 {
  margin: 0 0 10px;
  font-size: 18.5px;
  font-weight: 640;
  line-height: 1.3;
  letter-spacing: -0.014em;
}

.site-lede {
  margin: 0 0 20px;
  max-width: 62ch;
  color: var(--ink2);
  font-size: clamp(16.5px, 1.35vw, 19px);
  line-height: 1.62;
}

.site-body p { max-width: 68ch; }

.site-section { padding: 84px 0; }
.site-section--tight { padding: 56px 0; }
.site-section--sunk { background: var(--card); border-block: 1px solid var(--hair); }

.site-section__head { margin-bottom: 44px; }
.site-section__head .site-lede { margin-bottom: 0; }

/* Metadata, prices, meter read-outs, "last updated". Mono is the product's
   device for anything a person reads as a figure rather than a sentence. */
.site-meta {
  color: var(--ink2);
  font-family: var(--num);
  font-size: 11.5px;
  letter-spacing: .05em;
}

.site-rule { height: 1px; margin: 0; border: 0; background: var(--hair); }


/* ----------------------------------------------------------------------------
   4. BUTTONS
   ---------------------------------------------------------------------------- */

.site-cta,
.site-cta--quiet {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 620;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.site-cta:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); text-decoration: none; }

.site-cta--quiet {
  border-color: var(--hair);
  background: var(--card);
  color: var(--ink);
}
.site-cta--quiet:hover { border-color: var(--line); background: var(--sunk); }

/* --on-accent is #26130f, which is 2.80:1 on --plum and unreadable. The
   paper token is 6.23:1 on it. Measured, not guessed. */
.site-cta--plum { border-color: var(--plum); background: var(--plum); color: var(--card); }
.site-cta--plum:hover { background: color-mix(in srgb, var(--plum) 86%, var(--ink)); }

.site-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.site-cta-row--spaced { margin-top: 26px; }

.site-textlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--site-accent-ink);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}
.site-textlink:hover { text-decoration: underline; }


/* ----------------------------------------------------------------------------
   5. HERO AND THE BROWSER FRAME
   ---------------------------------------------------------------------------- */

.site-hero { padding: 76px 0 20px; }

.site-hero__promise {
  max-width: 54ch;
  margin: 0 0 30px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.55;
}

.site-hero__figure { margin: 60px 0 0; }

/* A screenshot of a working screen is a claim about a real thing, so it is
   drawn as a window rather than floated as decoration: chrome, an address
   bar with the address it was actually captured at, and a caption saying the
   data is scratch data. Nothing here is retouched. */
.site-window {
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 22px 48px -30px rgba(23, 24, 28, .38);
}

.site-window__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--hair);
  background: var(--sunk);
}

.site-window__dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.site-window__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hair);
  border: 1px solid color-mix(in srgb, var(--line) 46%, transparent);
}

.site-window__address {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink2);
  font-family: var(--num);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-window__shot { display: block; width: 100%; height: auto; }


.site-caption {
  margin: 12px 0 0;
  color: var(--ink2);
  font-family: var(--num);
  font-size: 11px;
  letter-spacing: .04em;
}


/* ----------------------------------------------------------------------------
   6. STEPS, PILLARS, CARD GRIDS
   ---------------------------------------------------------------------------- */

.site-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.site-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.site-card {
  padding: 26px 24px 28px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--card);
}
.site-card p { margin: 0; color: var(--ink2); font-size: 15px; }
.site-card p + p { margin-top: 12px; }

/* One step per row, because a step whose screenshot is 172px tall is a
   texture rather than a screen, and "each step is a real screen" is the
   whole point of the section. At the 1240px frame the capture renders about
   760px wide -- 42% of the 1800px original, which is where the headings in
   these screens stop being legible. */
.site-steps { display: grid; gap: 56px; }
.site-stepwide {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.site-stepwide__text p { margin: 0; color: var(--ink2); font-size: 15.5px; }
.site-stepwide__figure { margin: 0; }

.site-step { display: flex; flex-direction: column; }
.site-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  margin-bottom: 16px;
  border: 1px solid var(--hair);
  border-radius: 50%;
  color: var(--ink2);
  font-family: var(--num);
  font-size: 12px;
}
.site-step__shot {
  margin-top: 20px;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--sunk);
}
/* The step images are wide screenshots shown small. Cropping to the top of
   the frame keeps the part of the screen the step is about in view instead
   of scaling the whole 1800px capture down to an unreadable strip. */
.site-step__shot img {
  width: 100%;
  height: 172px;
  object-fit: cover;
  object-position: top left;
}

.site-pillar__detail {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  color: var(--ink2);
  font-family: var(--num);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .02em;
}

/* A plain list of short factual lines: "what a playbook changes", "what
   Slate does not do", the security bullet lists. */
.site-list { margin: 0; padding: 0; list-style: none; }
.site-list li {
  position: relative;
  margin: 0 0 11px;
  padding-left: 20px;
  color: var(--ink2);
  font-size: 15px;
  line-height: 1.58;
}
.site-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 1px;
  background: var(--line);
}
.site-list--no li::before { width: 9px; height: 9px; top: .45em; border-radius: 2px;
  background: none; border: 1px solid var(--line); }
.site-list strong { color: var(--ink); font-weight: 620; }


/* ----------------------------------------------------------------------------
   7. ACCOUNT PROTECTION: THE EXAMPLE METER
   ---------------------------------------------------------------------------- */

/* The product draws this meter from the collector's daily ledger. The site
   has no ledger and will not invent one, so the numbers below are written
   into the markup and the block is labelled as an example in the markup as
   well -- not in a tooltip, and not in grey 9px type under the fold. */
.site-protect {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.site-meter {
  padding: 24px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--card);
}

.site-meter__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.site-meter__label {
  margin: 0;
  color: var(--ink2);
  font-family: var(--num);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-meter__value {
  color: var(--ink);
  font-family: var(--num);
  font-size: 22px;
  letter-spacing: -0.01em;
}
.site-meter__value small {
  color: var(--ink2);
  font-size: 12px;
  letter-spacing: .04em;
}

.site-meter__track {
  height: 10px;
  border-radius: 999px;
  background: var(--sunk);
  overflow: hidden;
  display: flex;
}
.site-meter__fill { height: 100%; background: var(--accent); }
.site-meter__fill--held { background: color-mix(in srgb, var(--accent) 34%, var(--sunk)); }

.site-meter__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.site-meter__legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink2);
  font-family: var(--num);
  font-size: 11px;
  letter-spacing: .03em;
}
.site-meter__legend i { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); }
.site-meter__legend i.held { background: color-mix(in srgb, var(--accent) 34%, var(--sunk)); }
.site-meter__legend i.free { background: var(--sunk); border: 1px solid var(--hair); }

.site-meter__foot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  color: var(--ink2);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Says, in the layout rather than the copy, that these figures describe a
   shape and not a measurement. */
.site-example {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 9px;
  border: 1px solid var(--amber);
  border-radius: 999px;
  background: var(--amber-wash);
  color: var(--amber);
  font-family: var(--num);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.site-guard { display: grid; gap: 0; margin-top: 26px; }
.site-guard__row {
  display: grid;
  grid-template-columns: minmax(0, 15ch) minmax(0, 1fr);
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--hair);
}
.site-guard__row:last-child { border-bottom: 1px solid var(--hair); }
.site-guard__row dt {
  margin: 0;
  color: var(--ink);
  font-family: var(--num);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-guard__row dd { margin: 0; color: var(--ink2); font-size: 14.5px; line-height: 1.55; }


/* ----------------------------------------------------------------------------
   8. THE ARCHITECTURE DIAGRAM
   ---------------------------------------------------------------------------- */

/* Inlined from static/public/diagram.svg so its strokes and labels inherit
   the page's tokens. It scales with the column and has no fixed pixel size
   of its own. */
.site-diagram {
  padding: 30px 26px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--card);
}
.site-diagram svg { width: 100%; height: auto; display: block; }
.site-diagram figcaption {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  color: var(--ink2);
  font-size: 14.5px;
  line-height: 1.55;
}


/* ----------------------------------------------------------------------------
   9. THE M&A BLOCK
   ---------------------------------------------------------------------------- */

/* Plum is the second product's colour everywhere in Slate. It is the only
   thing that changes here: same hairlines, same type, same spacing. */
.site-ma {
  border: 1px solid color-mix(in srgb, var(--plum) 34%, var(--hair));
  border-radius: var(--r);
  background: var(--plum-wash);
  padding: 44px 40px;
}
.site-ma .site-h2 { color: var(--ink); }
.site-ma__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
}
.site-ma .site-list li::before { background: var(--plum); }
.site-ma .site-list li,
.site-ma .site-meta,
.site-ma .site-caption { color: var(--site-ink2-strong); }
.site-ma__evidence { margin: 40px 0 0; }

.site-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--plum);
  border-radius: 999px;
  color: var(--plum);
  font-family: var(--num);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
}


/* ----------------------------------------------------------------------------
   10. PRICING
   ---------------------------------------------------------------------------- */

.site-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.site-plan {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 32px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--card);
}
.site-plan--ma { border-color: color-mix(in srgb, var(--plum) 34%, var(--hair)); }

.site-plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 6px 0 18px;
  color: var(--ink);
  font-family: var(--num);
  font-size: 34px;
  letter-spacing: -0.02em;
}
.site-plan__price span {
  color: var(--ink2);
  font-size: 13px;
  letter-spacing: .04em;
}

.site-plan .site-list { flex: 1 1 auto; margin-bottom: 22px; }

.site-plan__driver {
  margin: 0 0 20px;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  background: var(--sunk);
  color: var(--site-ink2-strong);
  font-size: 13.5px;
  line-height: 1.55;
}
.site-plan__driver b { color: var(--ink); font-weight: 620; }
.site-plan__driver .num { color: var(--ink); }

/* Wide tables are the one thing on this site that cannot reflow to 390px, so
   they scroll inside their own box rather than pushing the document sideways.
   The wrapper is focusable so a keyboard can reach the scroll. */
.site-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--card);
}

.site-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.site-table caption {
  padding: 18px 22px 0;
  text-align: left;
  color: var(--ink2);
  font-family: var(--num);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-table th,
.site-table td {
  padding: 14px 22px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hair);
}
.site-table thead th {
  color: var(--ink2);
  font-family: var(--num);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-table tbody th { color: var(--ink); font-weight: 620; }
.site-table td { color: var(--ink2); }
.site-table tbody tr:last-child th,
.site-table tbody tr:last-child td { border-bottom: 0; }
.site-table .num { font-family: var(--num); color: var(--ink); white-space: nowrap; }
.site-table .yes { color: var(--moss); font-family: var(--num); font-size: 13px; }
.site-table .no { color: var(--ink2); font-family: var(--num); font-size: 13px; }

.site-faq { display: grid; gap: 0; }
.site-faq__item { padding: 22px 0; border-top: 1px solid var(--hair); }
.site-faq__item:last-child { border-bottom: 1px solid var(--hair); }
.site-faq__item h3 { margin: 0 0 8px; font-size: 16px; font-weight: 620; }
.site-faq__item p { margin: 0; color: var(--ink2); font-size: 15px; }


/* ----------------------------------------------------------------------------
   11. EDITORIAL PAGES (security, terms, privacy)
   ---------------------------------------------------------------------------- */

.site-doc {
  display: grid;
  grid-template-columns: minmax(0, 232px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding: 56px 0 0;
}

.site-doc__index {
  position: sticky;
  top: 96px;
  padding: 20px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--card);
}
.site-doc__index h2 {
  margin: 0 0 12px;
  color: var(--ink2);
  font-family: var(--num);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.site-doc__index ol { margin: 0; padding: 0; list-style: none; counter-reset: idx; }
.site-doc__index li { counter-increment: idx; margin-bottom: 3px; }
.site-doc__index a {
  display: flex;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  color: var(--ink2);
  font-size: 13.5px;
  text-decoration: none;
}
.site-doc__index a::before {
  content: counter(idx, decimal-leading-zero);
  color: var(--line);
  font-family: var(--num);
  font-size: 11px;
  line-height: 1.6;
}
.site-doc__index a:hover { background: var(--sunk); color: var(--ink); text-decoration: none; }

.site-doc__body { max-width: 74ch; padding-bottom: 40px; }
/* Anchors land under the sticky masthead without this. */
.site-doc__body section { scroll-margin-top: 96px; padding-bottom: 34px; }
.site-doc__body h2 {
  margin: 34px 0 14px;
  font-size: 23px;
  font-weight: 640;
  letter-spacing: -0.018em;
}
.site-doc__body h3 { margin: 26px 0 8px; font-size: 16.5px; font-weight: 620; }
.site-doc__body p { margin: 0 0 15px; color: var(--ink2); }
.site-doc__body section > :first-child { margin-top: 0; }

.site-note {
  margin: 22px 0;
  padding: 18px 20px;
  border: 1px solid var(--hair);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--card);
}
.site-note p { margin: 0; font-size: 14.5px; }
.site-note--amber { border-left-color: var(--amber); background: var(--amber-wash); }
.site-note--amber p { color: color-mix(in srgb, var(--amber) 78%, var(--ink)); }


/* ----------------------------------------------------------------------------
   12. FORMS
   ---------------------------------------------------------------------------- */

.site-formwrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding: 56px 0 0;
}

.site-form {
  padding: 30px 28px 32px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--card);
}

.site-field { margin-bottom: 18px; }
.site-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 620;
}
.site-field__hint {
  display: block;
  margin-bottom: 7px;
  color: var(--ink2);
  font-size: 12.5px;
  font-weight: 400;
}
.site-field input,
.site-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid var(--site-control-line);
  border-radius: var(--r-sm);
  background: var(--page);
  font-size: 15px;
}
.site-field textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
.site-field input:focus,
.site-field textarea:focus { border-color: var(--accent); }

/* The honeypot. Not display:none -- a script that reads computed style skips
   hidden inputs, and this one is only useful if a script fills it in. */
.site-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.site-form__foot {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.55;
}

/* Result banners. The form posts to its own address and is redirected back
   with ?sent=1 or ?error=..., which slate/web/public.py turns into a body
   attribute; these three rules are the whole of the interaction. */
.site-banner {
  display: none;
  margin-bottom: 24px;
  padding: 18px 20px;
  border: 1px solid var(--moss);
  border-radius: var(--r-sm);
  background: var(--moss-wash);
  color: color-mix(in srgb, var(--moss) 76%, var(--ink));
}
.site-banner h2 { margin: 0 0 6px; font-size: 16.5px; font-weight: 640; }
.site-banner p { margin: 0; font-size: 14.5px; }
.site-banner--error { border-color: var(--amber); background: var(--amber-wash);
  color: color-mix(in srgb, var(--amber) 78%, var(--ink)); }

[data-sent="true"] .site-banner--sent { display: block; }
[data-sent="true"] .site-form form { display: none; }
[data-error] .site-banner--error { display: block; }
[data-error="missing"] .site-banner__missing,
[data-error="email"] .site-banner__email,
[data-error="server"] .site-banner__server { display: block; }
.site-banner--error p { display: none; }


/* ----------------------------------------------------------------------------
   13. RESPONSIVE
   ---------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .site-protect,
  .site-ma__grid,
  .site-formwrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .site-doc { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .site-doc__index { position: static; top: auto; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 860px) {
  .site-grid,
  .site-grid--2,
  .site-plans { grid-template-columns: minmax(0, 1fr); }
  .site-section { padding: 60px 0; }
  .site-hero { padding: 52px 0 12px; }
  .site-hero__figure { margin-top: 42px; }
  .site-ma { padding: 32px 24px; }
  .site-step__shot img { height: auto; object-fit: contain; }
  .site-stepwide { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .site-steps { gap: 44px; }
}

@media (max-width: 620px) {
  .site-frame { width: calc(100% - 32px); }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .site-guard__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .site-masthead { position: static; }
  /* The pill nav and the long primary action are the two masthead elements
     with no room at 390: "Start with your LinkedIn seat" measures 255px
     beside a brand that already takes 180, which is a horizontally scrolling
     document. Both are dropped here rather than shrunk, and neither loses a
     route: the nav links are all in the footer, and the hero repeats the
     primary action two hundred pixels further down every page that has one.
     "Sign in" and "Open Slate" stay, because those are the doors somebody
     arriving on a phone is most likely to want. */
  .site-masthead .workspace-nav { display: none; }
  .site-masthead__actions .site-cta.site-when-signed-out { display: none; }
  /* A long label on a full-width action wraps rather than pushing the
     document sideways. nowrap is right at desktop widths, where these sit in
     a row beside each other; at 390 each one is the whole column. */
  .site-cta,
  .site-cta--quiet {
    width: 100%;
    padding: 10px 16px;
    white-space: normal;
    text-align: center;
  }
  .site-masthead__actions .site-cta,
  .site-masthead__actions .site-cta--quiet { width: auto; }
  .site-window__address { display: none; }
  .site-form,
  .site-plan { padding: 22px 20px 24px; }
  .site-diagram { padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-body * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

@media print {
  .site-masthead, .site-footer, .site-doc__index { display: none; }
  .site-doc { grid-template-columns: minmax(0, 1fr); }
}