/* ==========================================================================
   TEQNIX — Continuous Offensive Security Testing
   Design system

   Concept: the page is a line, not a stack. One unbroken hairline runs the
   full height of every page; content hangs off it. Point-in-time testing
   looks like separate blocks — this deliberately does not.

   Duality (human / agent) is expressed in line weight, not a second hue:
     .is-human  solid, filled
     .is-agent  hairline, outlined

   Colour rules:
     --teal (#00B4AA) is the logo colour. It clears AA on the dark ground but
     NOT on paper (2.4:1), so on light it is used only for decorative marks.
     Anything that carries meaning uses --teal-ink (5.4:1 on paper).
   ========================================================================== */

/* Self-hosted so there is no third-party font request. Latin subset only.
   Syne stays for the rare display accent (h1, .statement). Body copy and
   headings moved from Literata (a reading/editorial serif) to IBM Plex Sans
   — an engineered, technical face designed for interfaces rather than long-
   form prose. IBM Plex Mono replaces DM Mono for the one machine-artefact
   block, keeping the whole system inside one type family. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibmplexmono-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+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('/assets/fonts/ibmplexmono-500.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 Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibmplexsans-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibmplexsans-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/syne-700.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: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/syne-800.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;
}

/* ── Tokens: light (default) ─────────────────────────────────────────────── */
:root {
  --paper:      #F3F5F5;
  --paper-2:    #EAEEEE;
  --paper-3:    #E1E7E7;
  --ink:        #0C1719;
  --ink-soft:   #4A5A5C;
  --rule:       #C9D3D3;
  --rule-soft:  #DDE4E4;
  --teal:       #00B4AA;
  --teal-ink:   #00706A;
  --teal-wash:  rgba(0, 180, 170, 0.07);
  --focus:      #00706A;

  --font-display: 'Syne', ui-sans-serif, system-ui, sans-serif;
  --font-text:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* type scale */
  --t-xs:   0.8125rem;  /* 13 */
  --t-sm:   0.875rem;   /* 14 */
  --t-base: 1rem;       /* 16 */
  --t-md:   1.125rem;   /* 18 */
  --t-lg:   1.375rem;   /* 22 */
  --t-xl:   1.75rem;    /* 28 */
  --t-2xl:  2.5rem;     /* 40 */
  --t-3xl:  3.5rem;     /* 56 */

  --shell-max: 1120px;
  --pad:       clamp(1rem, 5vw, 3.5rem);
  --rail-gap:  2rem;
  --measure:   68ch;

  color-scheme: light;
}

/* ── Tokens: dark ────────────────────────────────────────────────────────────
   Light is the default for every visitor, including those whose operating
   system is set to dark. Dark applies only when someone chooses it with the
   toggle, which is stored in localStorage.
   Designed, not inverted: deep slate ground with a teal bias, and the brand
   teal at full strength because it clears 6.8:1 here. */
:root[data-theme='dark'] {
  --paper:     #0E1A1C;
  --paper-2:   #142529;
  --paper-3:   #1B3035;
  --ink:       #E6EDED;
  --ink-soft:  #9DB0B2;
  --rule:      #2A3E42;
  --rule-soft: #1F3034;
  --teal:      #00B4AA;
  --teal-ink:  #2FD4C6;
  --teal-wash: rgba(0, 180, 170, 0.10);
  --focus:     #2FD4C6;
  color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* An author `display` beats the UA [hidden] rule, so hiding a flex or grid
   element with el.hidden would otherwise do nothing. Keep this above any
   component that sets display. */
[hidden] { display: none !important; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-md);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }
ul, ol { list-style: none; }

a {
  color: var(--teal-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--teal); color: #05100F; }

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

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

/* Syne appears only on the wordmark, h1, and one statement per page.
   Keeping it rare is what keeps it a signature. */
h1, .statement {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

h1 { font-size: clamp(1.875rem, 5.5vw, var(--t-3xl)); }
.statement { font-size: clamp(1.5rem, 3.6vw, var(--t-2xl)); }
h2 { font-size: clamp(1.375rem, 3vw, var(--t-xl)); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); font-weight: 600; }

p, li { hanging-punctuation: first; }
strong { font-weight: 600; }

.lede {
  font-size: clamp(var(--t-md), 2.2vw, var(--t-lg));
  line-height: 1.5;
  color: var(--ink);
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose ul { display: flex; flex-direction: column; gap: 0.55em; }
.prose ul li { padding-left: 1.1em; position: relative; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.68em;
  width: 0.5em; height: 1px;
  background: var(--teal-ink);
}

.muted { color: var(--ink-soft); }
.small { font-size: var(--t-sm); }

/* Section eyebrows are used sparingly and are never all-caps tracked-out
   labels above every heading — they carry a real value (a phase, a number). */
.label {
  font-family: var(--font-text);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

/* ── Shell and the rail ─────────────────────────────────────────────────── */
.shell {
  position: relative;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* The unbroken line. Spans the whole shell, never interrupted by a section. */
.shell::before {
  content: '';
  position: absolute;
  left: var(--pad);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
  z-index: 0;
}

/* The live head of the timeline. */
.shell::after {
  content: '';
  position: absolute;
  left: var(--pad);
  top: 0;
  width: 1px;
  height: 7.5rem;
  background: linear-gradient(to bottom, var(--teal), transparent);
  z-index: 1;
}

.band {
  position: relative;
  z-index: 1;
  padding-left: var(--rail-gap);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.band + .band { border-top: 1px solid var(--rule-soft); }
.band--tight { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.band--flush { padding-top: clamp(2.25rem, 5vw, 3.5rem); }
/* The home hero carries more weight, so it gets more room above it. */
.band--hero { padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(3rem, 7vw, 5rem); }

/* A node marks where content attaches to the line. */
.band > .node {
  position: absolute;
  left: calc(var(--rail-gap) * -1 - 3px);
  top: calc(clamp(2.5rem, 6vw, 4.5rem) + 0.45em);
  width: 7px; height: 7px;
  background: var(--teal-ink);
  z-index: 2;
}
.band > .node--hollow {
  background: var(--paper);
  border: 1px solid var(--teal-ink);
}

/* ── Nav ────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: 0.875rem var(--pad);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.nav__logo svg { width: 26px; height: 26px; flex-shrink: 0; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin-left: auto;
}
.nav__links a {
  font-size: var(--t-sm);
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
}
.nav__links a:hover { border-bottom-color: var(--rule); }
.nav__links a[aria-current='page'] { border-bottom-color: var(--teal-ink); }

.nav__end { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }

.theme-toggle {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--teal-ink); color: var(--ink); }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .icon-dark { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-dark { display: block; }
:root[data-theme='dark'] .theme-toggle .icon-light { display: none; }
}

.nav__burger {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  width: 2rem; height: 2rem;
  cursor: pointer;
  position: relative;
}
.nav__burger span {
  display: block;
  width: 14px; height: 1px;
  background: var(--ink);
  margin: 3px auto;
}
.nav__mobile { display: none; border-top: 1px solid var(--rule-soft); }
.nav__mobile.open { display: block; }
.nav__mobile ul { padding: 0.5rem var(--pad) 1rem; }
.nav__mobile li + li { border-top: 1px solid var(--rule-soft); }
.nav__mobile a {
  display: block;
  padding: 0.7rem 0;
  font-size: var(--t-base);
  color: var(--ink);
  text-decoration: none;
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__end { margin-left: auto; }
}

/* Below this the logo, toggle, call button and burger stop fitting on one
   line, and a non-wrapping flex row would widen the whole document. The
   call to action is in the mobile menu, so drop it from the bar. */
@media (max-width: 560px) {
  .nav__inner { gap: 0.6rem; }
  .nav__end .btn { display: none; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-text);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 0.7rem 1.15rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn--primary { background: var(--teal-ink); color: var(--paper); }
.btn--primary:hover { background: var(--ink); }
.btn--line { border-color: var(--rule); color: var(--ink); background: none; }
.btn--line:hover { border-color: var(--teal-ink); }
.btn--sm { padding: 0.45rem 0.8rem; font-size: var(--t-xs); }

/* Inline forward link. No appended arrow glyphs in the markup. */
.jump {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 600;
}

/* ── Duality: human / agent ─────────────────────────────────────────────── */
.halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  margin-top: 1.75rem;
}
.half { padding: 1.5rem 1.6rem; }
.half + .half { border-left: 1px solid var(--rule); }
.half__who {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.half__who::before {
  content: '';
  width: 0.7rem; height: 0.7rem;
  flex-shrink: 0;
}
/* agents: hairline, outlined — coverage */
.half--agent .half__who::before { border: 1px solid var(--teal-ink); }
/* humans: solid, filled — judgement and control */
.half--human .half__who::before { background: var(--teal-ink); }
.half ul { display: flex; flex-direction: column; gap: 0.6rem; }
.half li { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; }
.half--human li { color: var(--ink); }

@media (max-width: 640px) {
  .halves { grid-template-columns: 1fr; }
  .half + .half { border-left: none; border-top: 1px solid var(--rule); }
}

/* ── Module list (not a card grid) ──────────────────────────────────────── */
.modules { display: flex; flex-direction: column; margin-top: 1.5rem; }
.module-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.05rem 0;
  border-top: 1px solid var(--rule-soft);
  text-decoration: none;
  color: inherit;
}
.module-row:last-child { border-bottom: 1px solid var(--rule-soft); }
.module-row:hover { background: var(--teal-wash); }
.module-row__name {
  font-weight: 600;
  font-size: var(--t-md);
  color: var(--ink);
}
.module-row__what { font-size: var(--t-sm); color: var(--ink-soft); }
.module-row__tag {
  font-size: var(--t-xs);
  color: var(--teal-ink);
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .module-row { grid-template-columns: 1fr; gap: 0.3rem; padding: 0.9rem 0; }
}

/* ── Comparison table ───────────────────────────────────────────────────────
   The one bold element on the site. Everything else stays quiet. */
.compare { margin-top: 1.75rem; }
.compare table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.compare caption {
  text-align: left;
  font-size: var(--t-xs);
  color: var(--ink-soft);
  padding-bottom: 0.75rem;
}
.compare th, .compare td {
  text-align: left;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  font-size: var(--t-sm);
}
.compare thead th {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  line-height: 1.4;
}
.compare tbody th { font-weight: 400; color: var(--ink-soft); width: 32%; }
.compare td { color: var(--ink); }
.compare .col-continuous { background: var(--teal-wash); }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: none;
  border-top: 1px solid var(--rule);
  font-weight: 600;
  font-size: var(--t-base);
}
.compare__note {
  margin-top: 1.1rem;
  font-size: var(--t-md);
  max-width: 54ch;
}

/* 5 discrete marks versus one unbroken rule: the argument, drawn. */
.ticks {
  display: inline-flex;
  gap: 5px;
  margin-right: 0.65rem;
  vertical-align: -0.15em;
}
.ticks i { width: 2px; height: 1rem; background: var(--ink-soft); display: block; }
.runline {
  display: inline-block;
  width: 3.5rem; height: 2px;
  background: var(--teal-ink);
  margin-right: 0.65rem;
  vertical-align: 0.3em;
}

/* At narrow widths each row becomes its own block. No horizontal scrolling. */
@media (max-width: 640px) {
  .compare thead { display: none; }
  .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  /* A caption inside a display:block table collapses to its longest word,
     so give it back a normal block box. */
  .compare caption, .grid-table caption { display: block; width: 100%; text-align: left; }
  .compare tbody tr {
    border: 1px solid var(--rule);
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
  }
  .compare tbody th {
    width: auto;
    padding: 0 0 0.55rem;
    border: none;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--ink);
  }
  .compare tbody td {
    padding: 0.35rem 0 0.35rem 0;
    border: none;
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: 0.5rem;
    align-items: baseline;
  }
  .compare tbody td::before {
    content: attr(data-col);
    font-size: var(--t-xs);
    color: var(--ink-soft);
  }
  .compare .col-continuous { background: none; }
  .compare tbody tr:last-child { border-color: var(--teal-ink); }
  .compare tbody tr:last-child th,
  .compare tbody tr:last-child td { border-top: none; }
}

/* ── Plain data table (cadence, phases) ─────────────────────────────────── */
.grid-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.grid-table caption {
  text-align: left;
  font-size: var(--t-xs);
  color: var(--ink-soft);
  padding-bottom: 0.75rem;
}
.grid-table th, .grid-table td {
  text-align: left;
  font-size: var(--t-sm);
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  line-height: 1.5;
}
.grid-table thead th {
  font-size: var(--t-xs);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}
.grid-table tbody th { font-weight: 600; color: var(--ink); width: 26%; }
.grid-table td { color: var(--ink-soft); }
.grid-table .cell-agent { color: var(--ink-soft); }
.grid-table .cell-human { color: var(--ink); }
.grid-table .cell-none { color: var(--ink-soft); }

@media (max-width: 700px) {
  .grid-table thead { display: none; }
  .grid-table table, .grid-table tbody, .grid-table tr, .grid-table th, .grid-table td { display: block; width: auto; }
  .grid-table tbody tr { border: 1px solid var(--rule); padding: 0.85rem 1rem; margin-bottom: 0.7rem; }
  .grid-table tbody th { width: auto; padding: 0 0 0.5rem; border: none; }
  .grid-table tbody td { border: none; padding: 0.3rem 0; }
  .grid-table tbody td::before {
    content: attr(data-col) ': ';
    font-size: var(--t-xs);
    color: var(--ink-soft);
  }
}

/* ── Limits / boundary statements ───────────────────────────────────────────
   Set in the same type as capabilities. Never smaller, never greyed out. */
.limits { border-left: 2px solid var(--rule); padding-left: 1.35rem; margin-top: 1.5rem; }
.limits ul { display: flex; flex-direction: column; gap: 0.7rem; }
.limits li { font-size: var(--t-md); }

.inset {
  border: 1px solid var(--rule);
  padding: 1.35rem 1.5rem;
  margin-top: 1.5rem;
}
.inset h3 { font-size: var(--t-md); margin-bottom: 0.5rem; }

/* Machine artefact: the only monospace on the site. */
.log {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.7;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 1rem 1.15rem;
  margin-top: 1.25rem;
  overflow-x: auto;
  color: var(--ink-soft);
}
.log b { color: var(--ink); font-weight: 500; }

/* ── Price ──────────────────────────────────────────────────────────────── */
.price { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.25rem; }
.price__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.price__unit { font-size: var(--t-md); color: var(--ink-soft); }
.price__year { font-size: var(--t-sm); color: var(--ink-soft); }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.crumb { font-size: var(--t-xs); color: var(--ink-soft); }
.crumb a { color: var(--ink-soft); }
.crumb a:hover { color: var(--teal-ink); }

/* ── Figure caption (illustrative interface shots) ──────────────────────── */
figure { margin-top: 1.5rem; }
figcaption {
  font-size: var(--t-xs);
  color: var(--ink-soft);
  margin-top: 0.6rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--rule);
}

/* ── Client portal preview ──────────────────────────────────────────────────
   Illustrative views of the real portal. Tabs respond to clicks; nothing
   animates on its own. */
.portal { margin-top: 1.75rem; }
.portal__tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--rule); }
.portal__tab {
  font-family: var(--font-text);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  margin-bottom: -1px;
}
.portal__tab:hover { color: var(--ink); }
.portal__tab.is-active { color: var(--ink); border-bottom-color: var(--teal-ink); font-weight: 600; }

.portal__screen { border: 1px solid var(--rule); border-top: none; background: var(--paper-2); }
.portal__bar {
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-xs);
  color: var(--ink-soft);
}
.portal__url { font-family: var(--font-mono); }
.portal__panel { padding: 1.25rem 1.35rem 1.5rem; }
.portal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.portal__head h3 { font-size: var(--t-md); }
.pill {
  font-size: var(--t-xs);
  color: var(--teal-ink);
  border: 1px solid var(--border-teal);
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}

.portal__table { width: 100%; border-collapse: collapse; }
.portal__table th, .portal__table td {
  text-align: left;
  font-size: var(--t-sm);
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.portal__table thead th { font-size: var(--t-xs); color: var(--ink-soft); font-weight: 400; }
.portal__table tbody td:first-child { font-family: var(--font-mono); font-size: var(--t-xs); }
.portal__table tbody tr:last-child td { border-bottom: none; }

.dot { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.45rem; }
.dot--open { background: var(--ink); }
.dot--clear { background: none; border: 1px solid var(--rule); }
.dot--watch { background: var(--teal-ink); }

.portal__list { display: flex; flex-direction: column; }
.portal__list li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  font-size: var(--t-sm);
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.portal__list li:last-child { border-bottom: none; }
.portal__list em {
  font-style: normal;
  font-size: var(--t-xs);
  color: var(--ink-soft);
  margin-left: auto;
  font-family: var(--font-mono);
}
.portal__list--files em { font-family: var(--font-text); }

.sev { font-size: var(--t-xs); font-weight: 600; padding: 0.15rem 0.45rem; white-space: nowrap; }
.sev--crit { background: var(--ink); color: var(--paper); }
.sev--high { border: 1px solid var(--ink); color: var(--ink); }
.sev--med  { border: 1px solid var(--rule); color: var(--ink-soft); }
.sev--low  { border: 1px solid var(--rule-soft); color: var(--ink-soft); }

.tagline { font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.tagline--new { color: var(--ink); }
.tagline--gone { color: var(--ink-soft); }

.portal__note { font-size: var(--t-xs); color: var(--ink-soft); margin-top: 1rem; max-width: 52ch; }
.portal__caption {
  font-size: var(--t-xs);
  color: var(--ink-soft);
  margin-top: 0.7rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--rule);
  max-width: 60ch;
}

/* ── Services list (point-in-time engagements) ──────────────────────────── */
.svc-list { display: flex; flex-direction: column; gap: 0; margin-top: 1.5rem; }
.svc-item {
  padding: 1.6rem 0 1.6rem 1.5rem;
  border-top: 1px solid var(--rule-soft);
  border-left: 2px solid var(--rule);
}
.svc-item:last-child { border-bottom: 1px solid var(--rule-soft); }
.svc-item:hover { border-left-color: var(--teal-ink); }
.svc-item h3 { font-size: var(--t-md); margin-bottom: 0.4rem; }
.svc-item > p { font-size: var(--t-sm); color: var(--ink-soft); max-width: 62ch; }
.svc-item ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 1.5rem;
  margin-top: 0.9rem;
}
@media (max-width: 700px) { .svc-item ul { grid-template-columns: 1fr; } }
.svc-item li {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  padding-left: 1.1rem;
  position: relative;
}
.svc-item li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.68em;
  width: 0.5em; height: 1px;
  background: var(--teal-ink);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
@media (max-width: 860px) {
  .form-layout { grid-template-columns: 1fr; gap: 2.5rem; }
}
.form-aside h2 { font-size: var(--t-sm); font-weight: 600; }
.form-aside { border-left: 1px solid var(--rule); padding-left: 1.75rem; }
@media (max-width: 860px) {
  .form-aside { border-left: none; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 1.75rem; }
}

.form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 34rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: var(--t-sm); font-weight: 600; }
.field input, .field select, .field textarea {
  font-family: var(--font-text);
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 0.65rem 0.8rem;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--teal-ink);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.field__hint { font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.5; }
.form button[type='submit'] { align-self: flex-start; }

/* ── Sent confirmation ──────────────────────────────────────────────────────
   Shown in the form's place rather than below it, so there is no live Send
   button left on screen to press twice. Solid rule and filled node: a
   consultant picks this up, not a queue. */
.sent {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--teal-ink);
  background: var(--paper-2);
  padding: 1.6rem 1.75rem;
  max-width: 34rem;
  margin-top: 1.5rem;
}
.sent:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sent__lede { font-size: var(--t-lg); line-height: 1.45; }
.sent__lede::before {
  content: '';
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--teal-ink);
  margin-bottom: 0.9rem;
}
.sent__meta { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.55; margin-top: 0.9rem; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1.5rem; }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(6, 14, 16, 0.6); }
.modal__box {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.75rem;
  max-width: 26rem;
  width: 100%;
}
.modal__box h2 { font-size: var(--t-md); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--rule); margin-top: 3rem; }
.footer__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: 3rem var(--pad) 2rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer__brand p {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin-top: 0.75rem;
  max-width: 30ch;
}
.footer h2 {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.9rem;
}
.footer ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer a { font-size: var(--t-sm); color: var(--ink); text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.footer__base {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: 1.25rem var(--pad) 2.5rem;
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-xs);
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 800px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
  .footer__inner { grid-template-columns: 1fr; }
}

/* ── Utilities ──────────────────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; }
.stack-sm { gap: 0.75rem; }
.stack-md { gap: 1.25rem; }
.stack-lg { gap: 2rem; }
.row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.mt-1 { margin-top: 0.75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  font-size: var(--t-sm);
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }