/* ===========================================================
   Forge41 — one stylesheet for every page.

   All IBM Plex Mono. The type rule, written down:
     mono weight 600  anything named, priced or labelled
     mono weight 400  everything else
   No rule, border or fill that isn't doing a job. Tables are
   bordered; prose is not. Nothing on the page is a card.
   =========================================================== */

/* IBM Plex Mono (SIL OFL 1.1), self-hosted from /fonts — no request leaves
   this domain. Two subsets per weight: the text glyphs, and a 632-byte file
   holding nothing but the two arrows. */
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/ibm-plex-mono-400.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+2074, 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: 600; font-display: swap;
  src: url("/fonts/ibm-plex-mono-600.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+2074, 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/ibm-plex-mono-400-arrows.woff2") format("woff2");
  unicode-range: U+2190, U+2192;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/ibm-plex-mono-600-arrows.woff2") format("woff2");
  unicode-range: U+2190, U+2192;
}

/* -- Tokens ----------------------------------------------- */
:root {
  --p:        #ffffff;
  --surface:  #ffffff;
  --i:        #101110;
  --m:        #4f5150;
  --f:        #90928f;
  --ln:       #dcdddb;
  --tint:     #f6f6f4;
  --tint-ln:  #e5e5e2;
  --ac:       #1a3fd0;

  /* packhorse.app  --adm-accent / -strong / -soft */
  --ph: #2453c4;  --ph-d: #1c42a3;  --ph-w: #e9eefb;
  /* ottertrack.co.uk  indigo-600 / indigo-700 */
  --ot: #4f46e5;  --ot-d: #4338ca;  --ot-w: #ecebfc;
  /* signal.forge41.co.uk  --green / --green-deep / --green-wash */
  --sg: #2f654f;  --sg-d: #275642;  --sg-w: #edf4ef;

  /* state, from packhorse.app  --adm-ok / -warn / -crit */
  --ok: #217a3c;  --warn: #96650a;  --crit: #bb3a33;

  /* currency matrix states */
  --mx-due:  #b26a00;  --mx-due-w: #fbf1dd;  --mx-gap: #b9bab7;
  --mx-rl:   #d7d8d5;  --mx-ch:    #e6e7e4;

  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p:        #121311;
    --surface:  #181916;
    --i:        #eae8e2;
    --m:        #a9aaa4;
    --f:        #85877e;
    --ln:       #2f312c;
    --tint:     #1a1b18;
    --tint-ln:  #262822;
    --ac:       #93b0f2;

    --ph: #93b3f7;  --ph-d: #b7cbfa;  --ph-w: rgba(147, 179, 247, 0.15);
    --ot: #818cf8;  --ot-d: #a8b4fd;  --ot-w: rgba(129, 140, 248, 0.15);
    --sg: #7fc3a4;  --sg-d: #a6d9c0;  --sg-w: rgba(127, 195, 164, 0.15);

    --ok: #63c9a4;  --warn: #e0a458;  --crit: #e0776c;

    --mx-due: #e0a458;  --mx-due-w: rgba(224, 164, 88, 0.18);  --mx-gap: #55574f;
    --mx-rl:  #35372f;  --mx-ch:  #292b25;
  }
}
:root[data-theme="dark"] {
  --p:        #121311;
  --surface:  #181916;
  --i:        #eae8e2;
  --m:        #a9aaa4;
  --f:        #85877e;
  --ln:       #2f312c;
  --tint:     #1a1b18;
  --tint-ln:  #262822;
  --ac:       #93b0f2;

  --ph: #93b3f7;  --ph-d: #b7cbfa;  --ph-w: rgba(147, 179, 247, 0.15);
  --ot: #818cf8;  --ot-d: #a8b4fd;  --ot-w: rgba(129, 140, 248, 0.15);
  --sg: #7fc3a4;  --sg-d: #a6d9c0;  --sg-w: rgba(127, 195, 164, 0.15);

  --ok: #63c9a4;  --warn: #e0a458;  --crit: #e0776c;

  --mx-due: #e0a458;  --mx-due-w: rgba(224, 164, 88, 0.18);  --mx-gap: #55574f;
  --mx-rl:  #35372f;  --mx-ch:  #292b25;
}

/* -- Base ------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--p);
  color: var(--i);
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
svg { display: block; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 52px 48px;
}

/* -- Masthead --------------------------------------------- */
.bar { display: flex; align-items: center; gap: 18px; }

.wm {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.pill {
  display: inline-block;
  padding: 4px 12px 5px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
  background: var(--pw);
  color: var(--pd);
}

.bar .back {
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--f);
}
.bar .back:hover { color: var(--i); }

.bar .cta {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--pd, var(--ac));
}
.bar .cta:hover { text-decoration: underline; text-underline-offset: 3px; }

/* -- Prose ------------------------------------------------ */
.open {
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.62;
  max-width: 62ch;
}

.ctaline {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.72;
  max-width: 62ch;
  color: var(--m);
}
.ctaline a {
  font-weight: 600;
  color: var(--pd, var(--ac));
  border-bottom: 1px solid currentColor;
}

.block { padding-top: 26px; }
.block h4 {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--f);
}
.block p { margin-top: 11px; color: var(--m); }
.block p + p { margin-top: 11px; }
.block .quiet { color: var(--f); font-size: 12.5px; }
.block a { font-weight: 600; color: var(--pd, var(--ac)); border-bottom: 1px solid currentColor; }

ul.b { list-style: none; padding: 0; }
ul.b li {
  padding-left: 16px;
  text-indent: -16px;
  color: var(--m);
}
ul.b li::before { content: "— "; color: var(--f); }
.block ul.b { margin-top: 11px; line-height: 1.86; }

/* -- Two columns: prose left, table right ----------------- */
.two {
  display: flex;
  gap: 72px;
  align-items: flex-start;
  padding-top: 24px;
}
.two .col-a { flex: 1; min-width: 0; }
.col-a > .open:first-child { margin-top: 0; }
.two .col-b { width: 348px; flex: none; }

/* -- Tables ----------------------------------------------- */
.table { border: 1px solid var(--ln); }

.table .head {
  padding: 16px 20px 13px;
  background: var(--surface);
  border-bottom: 1px solid var(--ln);
}
.plans .head svg { width: 100%; height: auto; }
.products .head { display: flex; justify-content: center; padding: 18px 20px 16px; }
.products .head svg { width: 168px; height: auto; }
.table .head .cap {
  margin-top: 10px;
  font-size: 9.5px;
  line-height: 1.7;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--f);
}
.table .head .cap .key { margin-right: 14px; white-space: nowrap; }
.table .head .cap .key i {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: -1px;
}

.table .thead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 20px 11px;
  background: var(--surface);
  border-bottom: 1px solid var(--ln);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--f);
}

.table .row {
  display: block;
  padding: 15px 20px 16px;
  background: var(--tint);
  border-top: 1px solid var(--tint-ln);
}
.table .head + .row,
.table .thead + .row,
.table > .row:first-child { border-top: 0; }

.table .foot {
  display: flex;
  gap: 12px;
  padding: 11px 20px 12px;
  background: var(--surface);
  border-top: 1px solid var(--ln);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--f);
}
.table .foot .cta { margin-left: auto; font-weight: 600; color: var(--pd, var(--ac)); }
.table .foot .cta:hover { text-decoration: underline; text-underline-offset: 3px; }

/* plain-row table: white rows, name beside or above its lines */
.table.plain .row { background: var(--p); border-top: 1px solid var(--ln); }
.table.plain > .row:first-child { border-top: 0; }

/* -- Product rows (home) ---------------------------------- */
.products .row { padding: 16px 20px 17px; }
.namerow { display: flex; align-items: center; gap: 10px; }
.more {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pd);
}
a.row:hover .more { text-decoration: underline; text-underline-offset: 3px; }
a.row:hover .pill { background: var(--pc); color: var(--p); }
.desc { display: block; margin-top: 9px; font-size: 12.5px; line-height: 1.7; color: var(--m); }
.tags { display: block; margin-top: 8px; font-size: 10.5px; line-height: 1.74; letter-spacing: 0.03em; color: var(--f); }
.state {
  display: block;
  margin-top: 8px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pd);
}
.p-ph { --pc: var(--ph); --pd: var(--ph-d); --pw: var(--ph-w); }
.p-ot { --pc: var(--ot); --pd: var(--ot-d); --pw: var(--ot-w); }
.p-sg { --pc: var(--sg); --pd: var(--sg-d); --pw: var(--sg-w); }

/* -- Example state list (packhorse plans head) ------------ */
.statelist .sh {
  display: flex; gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ln);
  font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--f);
}
.statelist .sh .ex { margin-left: auto; }
.statelist .sr { padding: 8px 0 7px; border-bottom: 1px solid var(--tint-ln); font-size: 11.5px; }
.statelist .sr:last-child { border-bottom: 0; padding-bottom: 1px; }
.statelist .sn { display: block; font-weight: 600; color: var(--i); }
.statelist .sv { display: block; margin-top: 2px; line-height: 1.55; }
.statelist .sv::before {
  content: ""; display: inline-block;
  width: 7px; height: 7px; border-radius: 2px;
  margin-right: 7px; vertical-align: 1px;
  background: currentColor;
}
.statelist .ok { color: var(--ok); }
.statelist .warn { color: var(--warn); }
.statelist .crit { color: var(--crit); }
.statelist .sv b {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px 2px; border-radius: 999px;
  background: var(--pw); color: var(--pd);
  font-size: 9px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
}

/* -- In-development chip ---------------------------------- */
.chip {
  display: inline-block;
  padding: 2px 9px 3px; border-radius: 999px;
  border: 1px solid var(--pc);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--pd);
}

/* -- Plans ------------------------------------------------ */
.plans .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  padding: 12px 20px 13px;
}
.plans .tier { font-size: 13px; font-weight: 600; }
.plans .price {
  font-size: 14px;
  font-weight: 600;
  color: var(--pd);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.plans .price .from {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f);
  margin-right: 3px;
}
.plans .price .unit { font-size: 10.5px; font-weight: 400; color: var(--f); }
.plans .users { font-size: 10.5px; letter-spacing: 0.04em; color: var(--f); }

/* -- Feature list ----------------------------------------- */
.list { margin-top: 34px; }
.list .row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; padding: 14px 20px 15px; }
.list .key { font-size: 13px; font-weight: 600; color: var(--pd, var(--ac)); }
.list .val { font-size: 12.5px; line-height: 1.7; color: var(--m); }
.list ul.b { font-size: 12.5px; line-height: 1.78; }

/* -- Every plan ------------------------------------------- */
.everyplan {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  padding-top: 26px;
}
.everyplan h4 {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--f);
}
.everyplan p { font-size: 11px; line-height: 1.9; letter-spacing: 0.03em; color: var(--m); }

/* -- Pro section ------------------------------------------ */
.pro { border: 1px solid var(--pc); margin-top: 34px; }
.pro .prohead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 20px 15px;
  background: var(--pw);
  border-bottom: 1px solid var(--pc);
}
.pro .prohead .nm { font-size: 16px; font-weight: 600; color: var(--pd); }
.pro .prohead .sub { font-size: 12px; color: var(--pd); }
.pro .prohead .pr {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--pd);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pro .prohead .pr .from {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-right: 3px;
}
.pro .row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  padding: 14px 20px 15px;
  background: var(--p);
  border-top: 1px solid var(--ln);
}
.pro .prohead + .row { border-top: 0; }
.pro .key { font-size: 13px; font-weight: 600; color: var(--i); }
.pro ul.b { font-size: 12.5px; line-height: 1.78; }
.pro .profoot {
  display: block;
  padding: 13px 20px 14px;
  background: var(--tint);
  border-top: 1px solid var(--ln);
  font-size: 11px;
  line-height: 1.74;
  color: var(--f);
}
.pro .profoot b {
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pd);
}

/* -- Document (privacy) --------------------------------- */
.doc { max-width: 78ch; padding-top: 28px; }
.doc .kicker { font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--f); }
.doc .title { margin-top: 6px; font-size: 24px; font-weight: 600; letter-spacing: -0.012em; }
.doc h2 {
  margin-top: 32px;
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--f);
}
.doc p { margin-top: 11px; color: var(--m); }
.doc ul.b { margin-top: 11px; line-height: 1.82; }
.doc ul.b b { font-weight: 600; color: var(--i); }
.doc a { font-weight: 600; color: var(--ac); border-bottom: 1px solid currentColor; }
.doc .addr { margin-top: 11px; color: var(--m); }
.doc .addr span { display: block; }
.doc .updated { margin-top: 30px; font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--f); }
.doc + .foot { margin-top: 20px; }

/* -- Close and footer ------------------------------------- */
.close { text-align: center; padding: 40px 0 36px; }
.close .label {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--f);
}
.close .big {
  font-size: 19px;
  font-weight: 600;
  color: var(--pd, var(--ac));
  border-bottom: 2px solid currentColor;
}

.foot {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-top: 30px;
}
.mail {
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  color: var(--pd, var(--ac));
  border-bottom: 2px solid currentColor;
}
.block .mail { margin-top: 11px; }
.foot .mail { font-size: 13px; border-bottom-width: 1px; }
/* when the footer carries only the company line, keep it left */
.foot .meta:only-child { margin-left: 0; }
.foot .meta {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--f);
}
.foot .meta a:hover { color: var(--i); }
.foot .home {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--f);
}
.foot .home:hover { color: var(--i); }

/* -- The anvil -------------------------------------------- */
.anvil .fp { fill: var(--surface); stroke: var(--f); stroke-width: 2; stroke-linejoin: round; opacity: 0.85; }
.anvil .p1 { fill: var(--ph-w); stroke: var(--ph); stroke-width: 2; stroke-linejoin: round; }
.anvil .l1 { fill: none; stroke: var(--ph); stroke-width: 2; stroke-linecap: round; opacity: 0.8; }
.anvil .l2 { fill: none; stroke: var(--ot); stroke-width: 2; stroke-linecap: round; }
.anvil .l3 { fill: none; stroke: var(--sg); stroke-width: 2; stroke-linecap: round; }
.anvil .d1 { fill: var(--ph); }

/* -- Currency matrix -------------------------------------- */
.cap .key.cur i { background: color-mix(in srgb, var(--ot) 20%, transparent); border: 1px solid var(--ot); }
.cap .key.due i { background: var(--mx-due-w); border: 1px solid var(--mx-due); }
.cap .key.gap i { background: transparent; border: 1px dashed var(--mx-gap); }
.matrix .cur { fill: color-mix(in srgb, var(--ot) 20%, transparent); stroke: var(--ot); stroke-width: 1.4; }
.matrix .due { fill: var(--mx-due-w); stroke: var(--mx-due); stroke-width: 1.4; }
.matrix .gap { fill: none; stroke: var(--mx-gap); stroke-width: 1.4; stroke-dasharray: 3 3; }
.matrix .rl { fill: var(--mx-rl); }
.matrix .ch { fill: var(--mx-ch); }

/* -- Narrow ----------------------------------------------- */
@media (max-width: 760px) {
  .wrap { padding: 22px 20px 26px; }

  .wm { font-size: 16px; letter-spacing: 0.28em; }
  .pill { font-size: 14px; }
  .bar { gap: 10px; flex-wrap: wrap; }
  /* the footer carries "back to home", so the bar does not need it too */
  .bar .back { display: none; }
  .bar .cta { font-size: 10px; letter-spacing: 0.09em; }

  .open { margin-top: 18px; font-size: 15px; line-height: 1.66; }
  .ctaline { margin-top: 12px; font-size: 12.5px; line-height: 1.74; }

  .block { padding-top: 24px; }
  .block p { margin-top: 9px; font-size: 13px; line-height: 1.72; }
  .block ul.b { margin-top: 9px; font-size: 13px; line-height: 1.84; }

  /* one column, and the table drops in between the prose blocks */
  .two { display: flex; flex-direction: column; padding-top: 18px; }
  .two .col-a, .two .col-b { display: contents; }
  .o1 { order: 1; }
  .o2 { order: 2; margin-top: 22px; }
  .o3 { order: 3; }
  .o4 { order: 4; }
  .o5 { order: 5; }

  .table .head { padding: 13px 16px 11px; }
  .products .head { padding: 14px 16px 12px; }
  .products .head svg { width: 128px; }
  .table .thead { padding: 9px 16px 10px; }
  .table .row { padding: 13px 16px 14px; }
  .table .foot { padding: 10px 16px 11px; }

  .plans .row { padding: 11px 16px 12px; }

  .list { margin-top: 26px; }
  .list .row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 16px 13px; }
  .list ul.b { font-size: 12.5px; line-height: 1.74; }

  .everyplan { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 22px; }

  .pro { margin-top: 26px; }
  .pro .prohead { flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px 13px; }
  .pro .prohead .sub { flex-basis: 100%; }
  .pro .prohead .pr { margin-left: 0; }
  .pro .row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 16px 13px; }
  .pro ul.b { font-size: 12.5px; line-height: 1.74; }
  .pro .profoot { padding: 12px 16px 13px; }

  .doc { padding-top: 22px; }
  .doc .title { font-size: 20px; }
  .doc h2 { margin-top: 26px; }

  .close { padding: 30px 0 26px; }
  .close .big { font-size: 16px; }


  .foot { display: block; padding-top: 24px; }
  .foot .meta { display: block; margin: 12px 0 0; }
  .foot .home { display: inline-block; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}