/* ---------------------------------------------------------------------------
   Stockkeep — stockkeep.app
   DESIGN DECISIONS. Read before editing; these are choices, not defaults.

   1. DIRECTION: a ledger, not a SaaS landing page. The product is cost
      accounting for physical stock, so the page is laid out as a costing
      document: ruled rows, a left gutter of line numbers, tabular figures,
      square corners. No cards, no hero-plus-three-icon-boxes skeleton.
   2. COLOUR: paper white, warm black ink, one accent — #a4231f, the red of
      accounting ink, used ONLY to mark a figure that is wrong. Explicitly not
      indigo/violet (the generator default) and explicitly not a cream page.
   3. TYPE: three faces, three jobs. Archivo (a grotesque drawn for forms and
      signage) sets headings; Source Serif 4 sets prose, because reading a
      paragraph of it is the point; IBM Plex Mono sets every number and label.
      Self-hosted — the page makes zero third-party requests, which is what
      lets the privacy policy say so.
   4. RADIUS 0, no shadows, no gradients, no animation, no icons, no emoji.
      Rules and space do the separating.
   5. LAYOUT PRIMITIVE: `.row` — a hairline-topped grid with a mono index in
      the left gutter. It is the only repeating structure on the page.
   6. Light only, on purpose. A document has a paper colour.

   No build step, no JavaScript. One HTML file, one stylesheet inside it.
--------------------------------------------------------------------------- */

@font-face{font-family:Archivo;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/Archivo-400_700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/Archivo-400_700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fonts/SourceSerif4-400_600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fonts/SourceSerif4-400_600-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/IBMPlexMono-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/IBMPlexMono-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/IBMPlexMono-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/IBMPlexMono-500-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;
  --paper:#fff;
  --panel:#f6f3ed;
  --ink:#1b1815;
  --ink-2:#4a443d;
  --rule:#ddd7cd;
  --rule-hard:#b3aa9c;
  --red:#a4231f;

  --display:Archivo,"Helvetica Neue",Arial,sans-serif;
  --text:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --gutter:4.25rem;
  --page:66rem;
  --measure:33rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:1.0625rem;
  line-height:1.62;
  font-synthesis-weight:none;
}
a{color:inherit;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.055em;text-decoration-color:var(--rule-hard)}
a:hover{text-decoration-color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;letter-spacing:-.018em;line-height:1.1}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--page);margin:0 auto;padding:0 1.75rem}

/* --- masthead ----------------------------------------------------------- */
.masthead{border-bottom:1.5px solid var(--ink)}
.masthead .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem 1.5rem;padding-top:1.4rem;padding-bottom:1.1rem;flex-wrap:wrap}
.wordmark a{text-decoration:none}
.wordmark{font-family:var(--display);font-weight:700;font-size:1.3125rem;letter-spacing:-.03em}
.masthead .meta{font-family:var(--mono);font-size:.75rem;color:var(--ink-2)}

/* --- the one layout primitive: ruled row with a numbered gutter ---------- */
.row{display:grid;grid-template-columns:var(--gutter) minmax(0,1fr);border-top:1px solid var(--rule);padding:1.35rem 0}
.row:first-of-type{border-top:1.5px solid var(--rule-hard)}
.idx{font-family:var(--mono);font-size:.75rem;color:var(--ink-2);padding-top:.42em}

/* --- hero --------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3.5rem;padding:4rem 0 3.75rem;align-items:start}
h1{font-size:clamp(2rem,1.15rem + 3.1vw,3.25rem);letter-spacing:-.028em;line-height:1.055;max-width:15ch}
.lede{font-size:1.1875rem;margin-top:1.5rem;max-width:var(--measure);color:var(--ink-2)}
.lede strong{color:var(--ink);font-weight:600}
.actions{margin-top:2rem;display:flex;align-items:center;gap:.75rem 1.5rem;flex-wrap:wrap}
.cta{font-family:var(--display);font-weight:600;font-size:.9375rem;background:var(--ink);color:var(--paper);
  padding:.72rem 1.15rem;text-decoration:none;display:inline-block}
.cta:hover{background:var(--red)}
.actions .aside{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2)}
.availability{margin-top:1.15rem;font-family:var(--mono);font-size:.8125rem;line-height:1.55;color:var(--ink-2);max-width:40ch}

/* --- install request ---------------------------------------------------- */
/* Inputs are ruled underneath rather than boxed. A box with a radius is the
   generic SaaS field; a rule is what a line on a form actually looks like, and
   it keeps rule 4 (radius 0, no shadows) intact. */
.request{margin-top:2rem;max-width:26rem}
.request .field{display:block;margin-bottom:1.05rem}
.request .field>span{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:.3rem}
.request .field>span em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--rule-hard)}
.request input{width:100%;font-family:var(--mono);font-size:.9375rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule-hard);border-radius:0;padding:.4rem 0}
.request input::placeholder{color:var(--rule-hard)}
.request input:focus{outline:0;border-bottom-color:var(--ink);border-bottom-width:2px;padding-bottom:calc(.4rem - 1px)}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.request .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.request .actions{margin-top:1.6rem}
button.cta{border:0;cursor:pointer;line-height:1.2}

/* --- the ledger --------------------------------------------------------- */
.ledger{margin:0;background:var(--panel);border:1px solid var(--rule-hard);padding:1.5rem 1.5rem 1.35rem;
  font-family:var(--mono);font-size:.8125rem;line-height:1.5;font-variant-numeric:tabular-nums}
.ledger .head{color:var(--ink-2);padding-bottom:.9rem;border-bottom:1px solid var(--rule-hard)}
.ledger table{width:100%;border-collapse:collapse;font-size:inherit}
.ledger th,.ledger td{text-align:right;padding:.42rem 0 .42rem .7rem;font-weight:400}
.ledger th{color:var(--ink-2);font-weight:500;border-bottom:1px solid var(--rule);padding-top:.85rem}
.ledger th:first-child,.ledger td:first-child{text-align:left;padding-left:0}
.ledger td.landed{font-weight:500}
.ledger .note{color:var(--ink-2);padding-top:.7rem;border-top:1px solid var(--rule)}
.calc{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--rule-hard)}
.calc .caption{color:var(--ink-2);margin-bottom:.55rem}
.calc dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:.3rem 1.5rem}
.calc dt{color:var(--ink-2)}
.calc dd{margin:0;text-align:right}
.calc .sum{border-top:1px solid var(--rule);padding-top:.5rem;margin-top:.25rem;font-weight:500;color:var(--ink)}
.verdict{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--rule-hard);color:var(--ink-2)}
.wrong{color:var(--red);font-weight:500}

/* --- sections ----------------------------------------------------------- */
section{padding:3.5rem 0}
section + section{border-top:1.5px solid var(--ink)}
.section-head{max-width:var(--measure);margin-bottom:2.25rem}
h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem)}
.section-head p{margin-top:.8rem;color:var(--ink-2)}
h3{font-size:1.125rem;letter-spacing:-.012em}
.row p{margin-top:.42rem;max-width:var(--measure);color:var(--ink-2);font-size:1rem}
.row .qual{font-family:var(--mono);font-size:.75rem;color:var(--ink-2);margin-top:.55rem;display:block;line-height:1.5}
ul.plain{list-style:none;margin:0;padding:0}
.prose{max-width:var(--measure)}

/* --- price -------------------------------------------------------------- */
.price{display:flex;align-items:baseline;gap:.4rem 1.1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.price .amount{font-family:var(--display);font-weight:700;font-size:clamp(2.5rem,1.8rem + 2.4vw,3.5rem);letter-spacing:-.035em;line-height:1}
.price .terms{font-family:var(--mono);font-size:.875rem;color:var(--ink-2)}

/* --- scopes ------------------------------------------------------------- */
.scopes{font-family:var(--mono);font-size:.8125rem;line-height:1.7;margin:0;padding:0;list-style:none;
  border-top:1px solid var(--rule);max-width:46rem}
.scopes li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.25rem 1rem;border-bottom:1px solid var(--rule);padding:.65rem 0}
.scopes b{font-weight:500;color:var(--ink-2)}
.scopes .never{color:var(--red)}

/* --- footer ------------------------------------------------------------- */
footer{border-top:1.5px solid var(--ink);padding:2rem 0 3.5rem;font-family:var(--mono);font-size:.8125rem;color:var(--ink-2)}
footer .wrap{display:flex;justify-content:space-between;gap:1rem 2.5rem;flex-wrap:wrap}
footer nav{display:flex;gap:1.5rem;flex-wrap:wrap}

@media (max-width:60rem){
  :root{--gutter:3rem}
  .hero{grid-template-columns:minmax(0,1fr);gap:2.5rem;padding:3rem 0}
  h1{max-width:18ch}
}
@media (max-width:34rem){
  :root{--gutter:2.5rem}
  .wrap{padding:0 1.15rem}
  .ledger{padding:1.15rem 1rem;font-size:.75rem}
  .scopes li{grid-template-columns:minmax(0,1fr)}
  section{padding:2.75rem 0}
}
/* --- long-form document pages (privacy) --------------------------------- */
.doc{max-width:40rem;padding:3.5rem 0 4rem}
.doc h1{font-size:clamp(1.75rem,1.4rem + 1.4vw,2.375rem);max-width:none;line-height:1.1}
.doc .stamp{font-family:var(--mono);font-size:.75rem;color:var(--ink-2);margin-top:.9rem}
.doc h2{font-size:1.25rem;margin-top:2.75rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
.doc h2 + *{margin-top:.9rem}
.doc h3{font-size:1rem;margin-top:1.6rem}
.doc ul{padding-left:1.15rem;margin:0 0 1.05em}
.doc li{margin-bottom:.35em}
.doc li:last-child{margin-bottom:0}
.doc .keys{list-style:none;padding:0;font-family:var(--mono);font-size:.8125rem;line-height:1.65;
  border-top:1px solid var(--rule)}
.doc .keys li{border-bottom:1px solid var(--rule);padding:.6rem 0;margin:0}
.doc .keys b{font-weight:500;color:var(--ink-2);display:block}
.doc .short{background:var(--panel);border:1px solid var(--rule-hard);padding:1.25rem 1.4rem;margin:1.75rem 0}
.doc .short ul{margin:0;padding-left:1.1rem}