/* ===========================================================================
   survivalops.io

   THE IDEA: a field manual plate rendered on a phosphor terminal. Institutional
   severity, equipment rather than decoration, heat implied rather than shouted.
   The product answers in a green-on-black console, so the site is set like the
   document that would ship in the case with it: a numbered margin rail down the
   page, registration ticks on the plates, hairline rules, and tracked mono
   labels doing the work a designer would otherwise give to icons.

   COLOUR MEANS SOMETHING HERE, and this is the rule the whole palette hangs on:

       GREEN  = a real document says this.
       AMBER  = act, or pay attention. Used sparingly, and never decoratively.
       RED    = stop, or different rules apply.
       Everything else is neutral ink.

   Green is the product's sourcing colour. In the console it marks the state
   where an answer is backed by a page you can open. If this site spent green on
   unrelated emphasis, the meaning would be diluted before anyone installs the
   app, so on these pages green appears on citations and sources and nowhere
   else. Meaning is never carried by colour alone: every coloured state also
   says what it is in words.

   CARRIED FROM THE PRODUCT, to be kept in step: the :root palette, the scanline
   recipe, the signal meanings, and the pairing of tracked uppercase mono for
   chrome against a sans for reading. Copied from the app console
   (rag/static/index.html) and the ops portal (ops/dashboard/static/index.html).

   DELIBERATE DIVERGENCES from the console, and why:
     - Fonts are named and self-hosted rather than system stacks. The console
       uses system stacks because it renders off an SSD on a machine with no
       internet. A website has no such excuse, and every other static site on
       this origin self-hosts subset woff2 already.
     - Corner radius drops from 14px to 3px on the plates. The console is a
       touch UI and should look tappable. This is a document about the device,
       and 14px reads as an app-store screenshot. Pills stay pills.
     - --meta replaces the console's --dim2 caption grey. 3.9:1 is fine on a
       tool you opted into and not fine on a public page read outdoors.

   No JavaScript. No third-party requests. No glow stacked on the mark, no
   gradient washes, no neon: the mark carries the idea and the page stays quiet
   around it. Every texture below is CSS or a data URI.
   =========================================================================== */

/* ------------------------------------------------------------------ fonts
   Subset to the 119 glyphs the site actually uses, so five faces together cost
   less than one unsubset weight would. font-display:swap, because text that is
   readable in a fallback beats text that is invisible. */
@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/archivo-400.woff2) format('woff2')}
@font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/archivo-500.woff2) format('woff2')}
@font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/archivo-600.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/jbmono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/jbmono-700.woff2) format('woff2')}

:root{
  /* ---- surfaces, darkest to lightest. Console values, do not drift. ---- */
  --bg:#070a0e;
  --panel:#0f1620;
  --panel2:#0b1119;
  --panelup:#141d29;
  --line:#1e2b3a;
  --line2:#2c3f54;

  /* ---- ink ---- */
  --txt:#dbe7f4;   /* 15.8:1 on --bg */
  --dim:#8498ae;   /*  6.7:1 on --bg, body-copy safe */

  /* ---- signal. Meanings fixed above. ---- */
  --green:#3fdc78; /* 11.1:1 */
  --amber:#e8a72b; /*  9.4:1 */
  --red:#f8574f;   /*  5.4:1 */
  --cyan:#59c8d8;  /* 10.1:1, links */

  /* ---- type. Console stacks, with the self-hosted face at the head. ---- */
  --mono:'JetBrains Mono',ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --ui:Archivo,system-ui,-apple-system,"Segoe UI","Noto Sans","DejaVu Sans",sans-serif;

  /* ---- geometry ---- */
  --r-pill:999px;
  --r-plate:3px;   /* web only, see the divergence note above */

  --shadow:0 18px 44px rgba(0,0,0,.55);
  --focus-ring:0 0 0 2px rgba(246,193,92,.9);

  /* ---- translucent accents ---- */
  --amber-soft:rgba(232,167,43,.14);
  --amber-line:rgba(232,167,43,.46);
  --green-soft:rgba(63,220,120,.12);
  --green-line:rgba(63,220,120,.42);
  --red-soft:rgba(248,87,79,.09);
  --red-line:rgba(248,87,79,.40);

  --amber-lit:#f6c15c;
  --ink-on-amber:#160f02;  /* 9.1:1 on the amber fill */
  --surface:linear-gradient(168deg,rgba(17,25,35,.92),rgba(10,15,22,.92));
  --scanline:repeating-linear-gradient(180deg,rgba(180,220,255,.022) 0 1px,transparent 1px 3px);

  /* Film grain, so a flat black plate has a surface. A data URI, so it costs
     no request and cannot fail to load. Texture, not a wash. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- web only ---- */
  --meta:#93a6bb;  /* 7.9:1, replaces the console's 3.9:1 --dim2 */
  --tick:#33465c;  /* registration marks at rest */
  --focus:#f6c15c;
  --rail:150px;
  --gap:44px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;background:var(--bg);color:var(--txt);
  font:400 17px/1.72 var(--ui);
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;overflow-x:hidden;
}

/* ------------------------------------------------------- the CRT backdrop
   Two fixed layers and no images: the console's own scanline, and grain. No
   coloured wash and no vignette. A flat plate with a surface on it. */
.veil{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--scanline),var(--bg);
}
.veil::after{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);background-size:140px 140px;
  opacity:.05;mix-blend-mode:overlay;
}

/* ---------------------------------------------------------------- a11y */
a{color:var(--cyan);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#8bdcea}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--amber);color:var(--ink-on-amber);
  padding:13px 20px;border-radius:0 0 var(--r-plate) 0;
  font:700 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:0}

/* --------------------------------------------------------------- header */
header.top{
  position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--line);
  background:rgba(7,10,14,.92);
  backdrop-filter:blur(10px);
}
.topin{
  max-width:1120px;margin:0 auto;padding:10px 24px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:11px;min-height:44px;text-decoration:none;color:inherit}
/* No drop-shadow on the mark. It is the same emblem the launcher icon uses,
   with the ring dropped and sized by its enclosing circle by the same code
   (Elysium app/src/sidecar/icon-source/generate_icons.py), so the phone and
   the browser tab are visibly one product. It does not need help. */
.brand img{width:30px;height:30px;flex:none}
.wordmark{
  font:700 14px/1.2 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--txt);
}
.wordmark b{color:var(--amber);font-weight:700}

nav.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
nav.nav a{
  display:flex;align-items:center;min-height:44px;padding:8px 14px;
  border:1px solid transparent;border-radius:var(--r-pill);
  color:var(--dim);font:500 14.5px/1 var(--ui);text-decoration:none;
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
nav.nav a:hover{color:var(--txt);border-color:var(--line2)}
nav.nav a[aria-current=page]{
  color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft);
}
/* Below 680 the nav drops onto its own row. Five items will not always fit
   362px of viewport, and a flex row that is allowed to shrink breaks a word
   inside a pill rather than admitting it. So: never shrink, never wrap, scroll
   if it must. On most phones all five fit and nothing scrolls. */
@media(max-width:680px){
  .topin{padding:9px 14px;gap:6px}
  nav.nav{
    margin-left:0;width:100%;gap:2px;flex-wrap:nowrap;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-right:-14px;padding-right:14px;
  }
  nav.nav::-webkit-scrollbar{display:none}
  nav.nav a{
    flex:0 0 auto;padding:8px 9px;font-size:13.5px;
    white-space:nowrap;border-radius:var(--r-plate);
  }
}
@media(max-width:360px){nav.nav a{font-size:12.5px;padding:8px 7px}}

/* ------------------------------------------------------------ the page */
main{max-width:1120px;margin:0 auto;padding:0 24px 110px}
@media(max-width:680px){main{padding:0 18px 84px}}

p{margin:0 0 19px}
p:last-child{margin-bottom:0}
.prose{max-width:66ch}
.prose strong{color:var(--txt);font-weight:600}

/* ------------------------------------------------------------ type scale */
h1{
  font:600 clamp(35px,6.8vw,58px)/1.06 var(--ui);
  letter-spacing:-.028em;margin:14px 0 20px;color:var(--txt);text-wrap:balance;
}
h1 b{color:var(--amber);font-weight:600}
h2{
  font:600 clamp(24px,3.2vw,32px)/1.17 var(--ui);
  letter-spacing:-.022em;margin:0 0 14px;color:var(--txt);text-wrap:balance;
}
h3{font:600 18px/1.34 var(--ui);letter-spacing:-.012em;margin:0 0 9px;color:var(--txt)}

.kicker{
  font:500 11px/1.4 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--amber);margin:0;
}
.lede{font-size:19.5px;line-height:1.6;color:var(--dim);max-width:56ch;letter-spacing:-.004em}
.lede b{color:var(--txt);font-weight:500}

/* ------------------------------------------------- the numbered margin rail
   The one structural idea. On a wide screen every section keeps a left-hand
   column carrying its number and label, the way a plate in a technical manual
   is set. It sticks while its section scrolls, so you always know which part of
   the document you are in without a floating widget saying so. Below 920px it
   folds into an inline eyebrow. */
.sec{padding:66px 0 0}
.sec:first-of-type{padding-top:34px}

.rail{display:flex;align-items:baseline;gap:12px;margin:0 0 16px}
.rail .num{font:700 13px/1 var(--mono);letter-spacing:.08em;color:var(--amber)}
.rail .rlabel{font:400 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--meta)}

@media(min-width:920px){
  /* Two children only: the rail, and a .secbody holding everything else, so
     the grid cannot decide for itself which paragraph belongs in the margin. */
  .sec,.hero{
    display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
    column-gap:var(--gap);align-items:start;
  }
  .rail{
    display:block;position:sticky;top:98px;margin:0;padding-top:27px;
    text-align:right;
  }
  .rail .num{display:block;font-size:29px;line-height:1;letter-spacing:-.03em;margin:0 0 10px}
  .rail .rlabel{display:block;line-height:1.55}
}

/* .secbody and .herobody exist only to be the grid's second child.
   The rule across the top of every .secbody is the sheet the margin notes are
   written against; it is what turns a stack of sections into a document. */
.secbody,.herobody{min-width:0}
.sec > .secbody{border-top:1px solid var(--line2);padding-top:26px}

/* ------------------------------------------------------------ section head */
.sechead{margin:0 0 24px}
.sechead h2{margin:0}
.sechead .note{display:block;margin-top:9px;font-size:15.5px;color:var(--dim);max-width:52ch}

/* ------------------------------------------------------------------- hero */
.hero{padding:52px 0 0}
.hero .heromark{display:block;width:84px;height:84px;margin:0 0 24px}
.hero .lede{margin-top:4px}
@media(min-width:920px){
  /* The mark sits in the margin column like a stamp on a crate, and the
     headline starts where every section below it starts. */
  .hero{padding:72px 0 0}
  .hero .heromark{justify-self:end;width:126px;height:126px;margin:0}
  /* Inner pages carry no mark, so the hero has a single child. Pin the body to
     column two or it lands in the 150px margin rail and sets the headline nine
     words deep. */
  .hero > .herobody{grid-column:2}
}

/* ------------------------------------------------------------------ actions
   Flat fill, no gradient. A control, not a button on a pricing page. */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 28px;border-radius:var(--r-plate);
  border:1px solid var(--amber);cursor:pointer;text-decoration:none;
  background:var(--amber);color:var(--ink-on-amber);
  font:700 14px/1 var(--mono);letter-spacing:.16em;text-indent:.16em;
  text-transform:uppercase;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{background:var(--amber-lit);border-color:var(--amber-lit);color:var(--ink-on-amber)}
.btn.ghost{
  background:transparent;border-color:var(--line2);color:var(--txt);font-weight:400;
}
.btn.ghost:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-soft)}

/* ------------------------------------------------------------------ the bar
   Three facts that are the whole product, set as a tracked mono strip rather
   than as pills. Quieter than three chips and it reads as a stencil. */
.bar-facts{
  display:flex;flex-wrap:wrap;gap:10px 0;align-items:center;
  margin:30px 0 0;padding:0;list-style:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.bar-facts li{
  font:400 11.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt);padding:15px 0;
}
.bar-facts li + li{padding-left:20px;margin-left:20px;border-left:1px solid var(--line)}
.bar-facts li.q{color:var(--meta)}
@media(max-width:620px){
  .bar-facts{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .bar-facts li{padding:13px 0;font-size:11px}
  .bar-facts li + li{padding-left:16px;margin-left:16px}
  .bar-facts li:nth-child(odd){border-left:0;padding-left:0;margin-left:0}
  .bar-facts li:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ------------------------------------------------------------------ plates
   Registration ticks at two opposite corners, the way a drawing plate is
   marked for alignment. The site's signature, and it costs two pseudo-elements
   and no bytes. */
.plate{position:relative;border-radius:var(--r-plate)}
.plate::before,.plate::after{
  content:"";position:absolute;width:11px;height:11px;pointer-events:none;
  border:1px solid var(--tick);transition:border-color .22s ease;
}
.plate::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.plate::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.plate:hover::before,.plate:hover::after{border-color:var(--amber-line)}

/* ------------------------------------------------------------- readout box
   A status plate, not a mocked-up conversation. Everything it prints is a fact
   about the product, so nothing on this site pretends to be the model's own
   answer. Every value is a word, so no row depends on its colour to be read. */
.readout{
  border:1px solid var(--line2);background:var(--surface);box-shadow:var(--shadow);
  margin:34px 0 0;overflow:hidden;
}
.readout .bar{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:13px 18px;border-bottom:1px solid var(--line);
  background:rgba(7,10,14,.6);
  font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--meta);
}
/* A drawn tick, not a status LED. Equipment, not a dashboard. */
.readout .bar .mk{width:7px;height:7px;flex:none;border:1px solid var(--meta)}
.readout .bar .right{margin-left:auto;color:var(--txt)}
.readout dl{margin:0;padding:8px 0;font:400 13.5px/1.5 var(--mono)}
.readout dt,.readout dd{padding:11px 18px}
.readout dt{color:var(--dim);letter-spacing:.01em}
.readout dd{margin:0;text-align:right;color:var(--txt);letter-spacing:.05em}
/* Green ONLY where the row is about a document backing an answer. */
.readout dd.src{color:var(--green)}
.readout dd.a{color:var(--amber)}
@media(min-width:520px){
  .readout dl{display:grid;grid-template-columns:1fr auto;padding:0}
  .readout dt,.readout dd{border-top:1px solid rgba(30,43,58,.55)}
  .readout dl > dt:first-of-type,.readout dl > dt:first-of-type + dd{border-top:0}
}
@media(max-width:519px){
  .readout dl{font-size:12.5px;padding:4px 0}
  .readout dt{padding-bottom:2px}
  .readout dd{text-align:left;padding-top:0;padding-bottom:13px}
}
.readout .foot{
  padding:15px 18px;border-top:1px solid var(--line);
  background:rgba(7,10,14,.45);font-size:14.5px;color:var(--dim);
}

/* ------------------------------------------------------------------- cards
   No ticks: four plates in a row would turn the signature into noise. A top
   edge segment instead, which runs the full width on hover. */
.grid{display:grid;gap:14px;margin:0;padding:0;list-style:none}
@media(min-width:760px){
  .grid.two{grid-template-columns:repeat(2,1fr)}
  .grid.three{grid-template-columns:repeat(3,1fr)}
}
.card{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-plate);
  background:var(--surface);padding:24px 22px;
  transition:border-color .22s ease;
}
.card::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:32px;
  background:var(--line2);
  transition:width .3s cubic-bezier(.2,.7,.3,1),background .3s ease;
}
.card:hover{border-color:var(--line2)}
.card:hover::before{width:100%;background:var(--amber)}
/* The sourcing card is the one green edge on the page, and its text says so. */
.card.src::before{background:var(--green)}
.card .tag{
  font:400 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--meta);display:block;margin:0 0 11px;
}
.card.src .tag{color:var(--green)}
.card p{color:var(--dim);font-size:15.5px;line-height:1.64;margin:0}
.card p + p{margin-top:12px}

/* ------------------------------------------------------------------- packs
   A dense index of the document library, not a feature grid. */
.packs{
  display:grid;gap:0;margin:0;padding:0;list-style:none;
  border-top:1px solid var(--line2);
}
@media(min-width:760px){.packs{grid-template-columns:repeat(2,1fr);column-gap:30px}}
.packs li{padding:20px 0;border-bottom:1px solid var(--line)}
.packs h3{
  font:400 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--txt);margin:0 0 11px;
}
.packs p{margin:0;color:var(--dim);font-size:15.5px;line-height:1.62}
.packs .rule{
  display:block;margin:11px 0 0;font:400 10.5px/1.5 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);
}

/* -------------------------------------------------------------------- steps */
ol.steps{margin:0;padding:0;list-style:none;counter-reset:step}
ol.steps li{counter-increment:step;position:relative;padding:0 0 30px 56px}
ol.steps li::after{
  content:"";position:absolute;left:15px;top:32px;bottom:2px;width:1px;background:var(--line);
}
ol.steps li:last-child{padding-bottom:0}
ol.steps li:last-child::after{display:none}
ol.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:0;width:31px;height:31px;
  background:var(--panel2);border:1px solid var(--amber-line);border-radius:var(--r-plate);
  color:var(--amber);font:700 11px/29px var(--mono);text-align:center;letter-spacing:.04em;
}
ol.steps p{color:var(--dim);font-size:15.5px;margin:0;max-width:62ch}

/* ------------------------------------------------------------------ notice */
.notice{
  border:1px solid var(--line);border-left:2px solid var(--amber-line);
  background:rgba(11,17,25,.66);padding:20px 22px;margin:28px 0 0;
}
.notice p{font-size:15.5px;color:var(--dim);margin:0;max-width:70ch}
.notice p + p{margin-top:11px}
.notice strong{color:var(--txt);font-weight:600}
.notice.med{border-left-color:var(--red-line);background:var(--red-soft)}
.notice .h{
  font:400 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);display:block;margin:0 0 11px;
}
.notice.med .h{color:#ff9d94}

/* --------------------------------------------------------------------- faq */
.faq{margin:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 46px 22px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
/* summary takes one heading element by spec, which is how these stay real h3s
   in the outline without a JavaScript accordion. It must not inherit h3's own
   margin or scale. */
.faq summary h3{
  font:500 17.5px/1.44 var(--ui);letter-spacing:-.012em;color:var(--txt);
  margin:0;display:inline;transition:color .18s ease;
}
.faq summary::after{
  content:"";position:absolute;right:9px;top:28px;width:10px;height:10px;
  border-right:1px solid var(--amber);border-bottom:1px solid var(--amber);
  transform:rotate(45deg);transition:transform .22s ease,top .22s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:33px}
.faq summary:hover h3{color:var(--amber-lit)}
.faq .a{padding:0 0 26px;max-width:66ch}
.faq .a p{color:var(--dim);font-size:16px;margin:0 0 14px}
.faq .a p:last-child{margin-bottom:0}

/* -------------------------------------------------------------------- form */
form.wl{
  border:1px solid var(--line2);background:var(--surface);box-shadow:var(--shadow);
  padding:26px 24px;margin:30px 0 0;max-width:560px;
}
form.wl label{
  display:block;font:400 10.5px/1 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--meta);margin:0 0 10px;
}
form.wl input[type=email],
form.wl input[type=text],
form.wl select,
form.wl textarea{
  width:100%;min-height:52px;padding:14px 15px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-plate);
  color:var(--txt);font:400 16px/1.5 var(--ui);
  transition:border-color .18s ease,box-shadow .18s ease;
}
form.wl textarea{min-height:118px;resize:vertical;line-height:1.6}
form.wl input:focus,form.wl select:focus,form.wl textarea:focus{
  outline:none;border-color:var(--amber);box-shadow:var(--focus-ring);
}
form.wl .field{margin:0 0 20px}
form.wl .hint{font-size:14px;color:var(--dim);margin:9px 0 0}
/* Honeypot. display:none on the WRAPPER, never offscreen positioning:
   Chromium ignores autocomplete=off and will autofill an offscreen field, the
   endpoint then fake-succeeds, and a real lead dies with no trace. */
.hp{display:none}
form.wl .btn{width:100%}
@media(min-width:520px){form.wl .btn{width:auto}}

/* ------------------------------------------------------------------ footer */
footer.foot{
  border-top:1px solid var(--line);background:rgba(7,10,14,.55);padding:44px 24px 52px;
}
.footin{max-width:1120px;margin:0 auto;display:grid;gap:30px}
@media(min-width:760px){
  /* The first column is the rail, deliberately empty: it is a margin, so the
     footer lines up with the body text rather than starting in the gutter. */
  .footin{grid-template-columns:var(--rail) minmax(0,1fr) auto;column-gap:var(--gap)}
  .footin > div{grid-column:2}
  .footin > .footnav{grid-column:3}
}
.footin p{font-size:15px;color:var(--dim);max-width:44ch;margin:14px 0 0}
.footnav{display:flex;flex-direction:column;gap:2px}
.footnav a{color:var(--dim);text-decoration:none;font-size:15.5px;padding:7px 0;min-height:34px}
.footnav a:hover{color:var(--amber)}
.legal{
  max-width:1120px;margin:32px auto 0;padding-top:22px;border-top:1px solid var(--line);
  font:400 11px/1.8 var(--mono);letter-spacing:.05em;color:var(--meta);
}

/* --------------------------------------------------------------- misc bits */
.bread{
  font:400 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--meta);padding:26px 0 0;
}
.bread a{color:var(--meta);text-decoration:none}
.bread a:hover{color:var(--amber)}
.bread span{color:var(--line2);margin:0 9px}

.next{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  margin:38px 0 0;padding-top:24px;border-top:1px solid var(--line);
}
.next .lbl{font:400 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--meta)}
.next .sep{color:var(--line2)}

ul.plain{margin:0;padding:0;list-style:none;color:var(--dim);font-size:16px;max-width:68ch}
ul.plain li{position:relative;padding:0 0 15px 26px;line-height:1.68}
ul.plain li::before{
  content:"";position:absolute;left:2px;top:12px;width:8px;height:1px;background:var(--dim);
}
ul.plain li:last-child{padding-bottom:0}
ul.plain strong{color:var(--txt);font-weight:600}

code{
  font:400 .88em/1.5 var(--mono);background:rgba(7,10,14,.7);
  border:1px solid var(--line);border-radius:2px;padding:2px 6px;color:var(--txt);
}

/* ------------------------------------------------------------------ motion
   One quiet reveal on first paint, staggered like a terminal painting the
   screen a line at a time. No bloom, no bounce. It animates FROM the hidden
   state, so if animations never run the content is simply there rather than
   invisible. */
@keyframes phos-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.hero .heromark,.herobody > *{animation:phos-in .5s cubic-bezier(.22,.68,.28,1) both}
.hero .heromark{animation-delay:.02s}
.herobody > .kicker{animation-delay:.10s}
.herobody > h1{animation-delay:.16s}
.herobody > .lede{animation-delay:.23s}
.herobody > .readout{animation-delay:.30s}
.herobody > .bar-facts{animation-delay:.37s}
.herobody > .actions,.herobody > form.wl,
.herobody > .notice,.herobody > ul.plain{animation-delay:.42s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
}

/* --------------------------------------------------------------------- print
   Somebody will print the FAQ and put it in the bag. Give them ink on paper
   rather than a black rectangle, and open every answer. */
@media print{
  .veil,header.top,.actions,.next,.footnav,.plate::before,.plate::after{display:none}
  body{background:#fff;color:#000;font:11pt/1.5 var(--ui)}
  a{color:#000;text-decoration:underline}
  h1,h2,h3,p,li,dt,dd,.lede,.kicker,.rail{color:#000 !important}
  .sec,.hero,.footin{display:block;padding:14pt 0 0}
  .faq .a,details:not([open]) .a{display:block !important}
  .readout,.card,.notice,form.wl{border:1px solid #999;background:none;box-shadow:none}
}