/* ============================================================
   Miranium AI — product and services pages
   Layered on top of styles.css. Nothing here is used by the
   home page; everything here is used by more than one page
   below it. Per-product tint comes from --pc / --pc-rgb,
   defaulted on :root and overridden per <body data-product="…">
   — the services page is not a product page and uses the hero,
   crumbs, chips, table and accordion at the default accent.
   ============================================================ */

:root {
  --amber: var(--ochre);
  --sky:   var(--cobalt);
  --rose:  var(--signal);
}

/* Default tint is the brand accent; each product page overrides it below.
   Declared on :root rather than on [data-product] so the components in this
   file work on a page that is not a product page — the services page uses the
   hero, crumbs, chips, table and accordion, and without a default every one of
   those would resolve var(--pc) to nothing and lose its colour. */
:root, [data-product] { --pc: var(--accent); --pc-rgb: var(--accent-rgb); }

[data-product="diagnosis"]  { --pc: var(--verdigris); --pc-rgb: 10, 107, 87; }
[data-product="cost"]       { --pc: var(--ochre);     --pc-rgb: 149, 82, 10; }
[data-product="management"] { --pc: var(--amethyst);  --pc-rgb: 91, 63, 184; }
[data-product="os"]         { --pc: var(--cobalt);    --pc-rgb: 29, 90, 158; }
[data-product="miraos"]     { --pc: var(--umber);     --pc-rgb: 124, 75, 40; }

/* A job posting is tinted by the product it sells, so a candidate moving
   between /careers/sales-gable and /products/gable stays in one colour. */
[data-product="sales-gable"]      { --pc: var(--verdigris); --pc-rgb: 10, 107, 87; }
[data-product="sales-mirashield"] { --pc: var(--cobalt);    --pc-rgb: 29, 90, 158; }

/* retint the pieces styles.css hard-codes to the brand teal */
[data-product] .kicker,
[data-product] .card-ico,
[data-product] .step-n,
[data-product] .ticker-run i { color: var(--pc); }

[data-product] .tags li::before { background: var(--pc); }

[data-product] .card:hover      { box-shadow: 5px 5px 0 rgba(var(--pc-rgb), 0.2); }
[data-product] .assure li       { border-left-color: var(--pc); }
[data-product] .btn-primary:hover { background: var(--pc); border-color: var(--pc); }
[data-product] .pulse { background: var(--pc); }
[data-product] .grad { color: var(--pc); text-decoration-color: rgba(var(--pc-rgb), 0.35); }

/* ---------- product hero ---------- */

.phero {
  position: relative;
  padding-block: 148px 74px;
  border-bottom: 1px solid var(--line);
  background-image:
  linear-gradient(rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}
.phero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 56px;
  align-items: center;
}
.phero h1 {
  margin: 0 0 20px;
  font-size: clamp(2.3rem, 4.8vw, 3.7rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.phero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--pc);
}
.phero .lede { font-size: 1.06rem; max-width: 33em; }
.phero .hero-actions { justify-content: flex-start; margin: 34px 0 0; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.crumbs a { transition: color 0.25s; }
.crumbs a:hover { color: var(--text); }
.crumbs span { color: var(--pc); }

/* ---------- mock interface panels ---------- */

.mock {
  border: 1px solid var(--text);
  border-radius: var(--r);
  background: var(--surface-2);
  box-shadow: 8px 8px 0 rgba(var(--pc-rgb), 0.16);
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.mock-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.mock-dots { display: flex; gap: 5px; flex: none; }
.mock-dots i {
  width: 8px; height: 8px;
  background: var(--line);
  display: block;
}
.mock-dots i:first-child { background: var(--pc); }
.mock-title {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.mock-body { padding: 18px; display: grid; gap: 12px; }
.mock-foot {
  padding: 11px 16px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: var(--bg-alt);
}

/* chat bubbles */
.bub {
  padding: 12px 15px;
  border-radius: var(--r);
  font-size: 0.87rem;
  line-height: 1.62;
  max-width: 88%;
}
.bub.me {
  margin-left: auto;
  background: rgba(var(--pc-rgb), 0.08);
  border: 1px solid rgba(var(--pc-rgb), 0.3);
  color: var(--text);
}
.bub.ai {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-dim);
  max-width: 100%;
}
.bub strong { color: var(--text); font-weight: 600; }

.attach {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 5px 11px;
  border-radius: 2px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-dim);
}

/* citation + status chips */
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.chip.ok   { color: #07503f; border-color: rgba(10, 107, 87, 0.35); background: rgba(10, 107, 87, 0.08); }
.chip.warn { color: #6e3c05; border-color: rgba(149, 82, 10, 0.35); background: rgba(149, 82, 10, 0.08); }
.chip.hot  { color: #862a14; border-color: rgba(178, 58, 30, 0.35); background: rgba(178, 58, 30, 0.07); }
.chip.cool { color: #164678; border-color: rgba(29, 90, 158, 0.35); background: rgba(29, 90, 158, 0.08); }
.chip.mute { color: var(--text-mute); }

/* hazard / notice bar */
.notice {
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid rgba(149, 82, 10, 0.35);
  border-left: 3px solid var(--ochre);
  background: rgba(149, 82, 10, 0.07);
  font-size: 0.82rem;
  line-height: 1.6;
  color: #5a3104;
}
.notice svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--amber); }

/* itemized line rows */
.lines {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.85rem;
}
.line:last-child { border-bottom: 0; }
.line b { font-weight: 500; color: var(--text); display: block; }
.line small {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 3px;
}
.line span { font-family: var(--mono); font-size: 0.83rem; color: var(--text-dim); white-space: nowrap; }
.line.total {
  background: rgba(var(--pc-rgb), 0.07);
  border-top: 2px solid var(--text);
}
.line.total b, .line.total span { color: var(--text); font-weight: 600; }
.line.total span { font-size: 0.95rem; }

/* comparison gauge */
.gauge { display: grid; gap: 8px; }
.gauge-bar {
  position: relative;
  height: 8px;
  background: linear-gradient(90deg,
  rgba(29, 90, 158, 0.45) 0%,
  rgba(10, 107, 87, 0.55) 32%,
  rgba(10, 107, 87, 0.55) 58%,
  rgba(149, 82, 10, 0.6) 78%,
  rgba(178, 58, 30, 0.7) 100%);
}
.gauge-pin {
  position: absolute;
  top: 50%;
  width: 3px; height: 22px;
  border-radius: 1px;
  background: var(--text);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--surface-2);
}
.gauge-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* work-order / list rows */
.rows { display: grid; gap: 8px; }
.rowi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color 0.2s;
}
.rowi:hover { border-color: var(--pc); }
.rowi b { display: block; font-size: 0.88rem; font-weight: 500; }
.rowi small { display: block; font-size: 0.76rem; color: var(--text-mute); margin-top: 2px; }

/* approval card */
.approve {
  border: 1px solid rgba(var(--pc-rgb), 0.4);
  border-left: 3px solid var(--pc);
  border-radius: var(--r);
  background: rgba(var(--pc-rgb), 0.06);
  padding: 15px 16px;
}
.approve .lbl {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pc);
  margin-bottom: 9px;
}
.approve p { margin: 0 0 14px; font-size: 0.9rem; color: var(--text); line-height: 1.6; }
.approve .acts { display: flex; gap: 8px; }
.fauxbtn {
  padding: 6px 14px;
  border-radius: var(--r);
  font-size: 0.79rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.fauxbtn.go  { background: var(--pc); color: #fff; }
.fauxbtn.no  { border-color: var(--line-field); color: var(--text-dim); }

/* audit ledger */
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.ledger li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.81rem;
  color: var(--text-dim);
}
.ledger li:last-child { border-bottom: 0; }
.ledger time { font-family: var(--mono); font-size: 0.68rem; color: var(--text-mute); }
.ledger em { font-style: normal; color: var(--text); }

/* inline code inside product copy */
[data-product] code {
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
}

/* ---------- pipeline / flow ---------- */

.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  counter-reset: flow;
}
.flow li {
  position: relative;
  padding: 20px 20px 22px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--text);
  border-radius: var(--r);
  background: var(--surface);
}
.flow li::before {
  counter-increment: flow;
  content: counter(flow, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--pc);
  margin-bottom: 14px;
}
.flow h3 { margin: 0 0 8px; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; }
.flow p  { margin: 0; font-size: 0.86rem; font-weight: 400; line-height: 1.66; color: var(--text-dim); }
.flow .term {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  border-top: 1px dashed var(--line);
  padding-top: 9px;
}

/* ---------- metric tiles ---------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: 2px solid var(--text);
  border-radius: var(--r);
  overflow: hidden;
  margin: 0;
}
.metrics > div { background: var(--surface); padding: 24px 22px; }
.metrics strong {
  display: block;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--pc);
  line-height: 1.1;
  margin-bottom: 8px;
}
.metrics span { font-size: 0.865rem; color: var(--text-dim); font-weight: 400; line-height: 1.6; display: block; }

/* ---------- callout ---------- */

.callout {
  display: grid;
  gap: 14px;
  padding: 28px 30px;
  border: 1px solid rgba(var(--pc-rgb), 0.35);
  border-left: 3px solid var(--pc);
  border-radius: var(--r);
  background: rgba(var(--pc-rgb), 0.05);
  margin-top: 44px;
}
.callout h3 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; }
.callout p  { margin: 0; color: var(--text-dim); font-size: 0.93rem; font-weight: 400; line-height: 1.72; }

/* ---------- two-column prose ---------- */

.two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 34px;
}
.two h3 { margin: 0 0 10px; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }
.two p  { margin: 0; color: var(--text-dim); font-size: 0.92rem; font-weight: 400; line-height: 1.72; }

/* ---------- spec table ---------- */

.spec {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-top: 2px solid var(--text);
  border-radius: var(--r);
  overflow: hidden;
  font-size: 0.9rem;
}
.spec th, .spec td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec th {
  width: 33%;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-alt);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.spec td { color: var(--text-dim); font-weight: 400; background: var(--surface); line-height: 1.7; }

/* A comparison: products across the top, facts down the side. The row labels
   narrow to leave the columns the room, and each column head takes its
   product's pigment from the inline --pc the template sets. */
.spec.compare { min-width: 720px; }
.spec.compare th[scope="row"] { width: 16%; }
.spec.compare thead td,
.spec.compare thead th { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.spec.compare th[scope="col"] {
  width: auto;
  font-family: var(--serif);
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}
.spec.compare th[scope="col"] a { color: var(--pc); text-decoration: none; }
.spec.compare th[scope="col"] a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- faq ---------- */

.faq { display: grid; gap: 0; border-top: 2px solid var(--text); }
.faq details {
  border-bottom: 1px solid var(--line);
  transition: background 0.2s;
}
.faq details[open] { background: var(--surface); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 6px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--pc);
  font-size: 1.05rem;
  flex: none;
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p {
  margin: 0;
  padding: 0 6px 20px;
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.75;
}

/* ---------- product index cards ---------- */

.plist {
  display: grid;
  /* `min(320px, 100%)`, not a bare 320px. SC 1.4.10 asks that the page reflow
     into a 320px viewport without a horizontal scrollbar, and a bare minmax
     floor is a MINIMUM the track holds even when its container is narrower —
     at 320px the container is 268px inside the wrap's padding, the track stayed
     320px, and the page scrolled sideways by 24px. `min()` lets the floor
     collapse to the container on the one screen where it cannot be honoured. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}
@media (min-width: 900px) { .plist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* An odd card out spans the row rather than leaving a hole beside it, and its
   list runs in two columns so the wider card is no taller than its siblings. */
@media (min-width: 900px) {
  .plist > .pcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .plist > .pcard:last-child:nth-child(odd) .tags { columns: 2; column-gap: 40px; }
  .plist > .pcard:last-child:nth-child(odd) .tags li { break-inside: avoid; }
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--pc);
  border-radius: var(--r);
  background: var(--surface);
  transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.pcard:hover { transform: translate(-3px, -3px); border-color: var(--pc); background: var(--surface-2); box-shadow: 6px 6px 0 rgba(var(--pc-rgb), 0.2); }
.pcard > * { position: relative; z-index: 1; }

.pcard .pc-ico {
  width: 38px; height: 38px;
  margin-bottom: 20px;
  color: var(--pc);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pcard .pc-eyebrow {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pc);
  margin-bottom: 12px;
}
.pcard h3 { margin: 0 0 12px; font-size: 1.7rem; font-weight: 500; letter-spacing: -0.015em; }
.pcard p  { margin: 0 0 22px; color: var(--text-dim); font-size: 0.94rem; font-weight: 400; line-height: 1.72; }
.pcard .tags { margin-bottom: 24px; }
.pcard .more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.89rem;
  font-weight: 500;
  color: var(--pc);
}
.pcard .more svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.pcard:hover .more svg { transform: translateX(4px); }

/* ---------- cross-links ---------- */

.cross {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.cross a {
  display: block;
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color 0.2s, background 0.2s;
}
.cross a:hover { border-color: var(--text); background: var(--surface-2); }
.cross .cx-k {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: block;
  margin-bottom: 10px;
}
.cross strong { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.cross span   { display: block; font-size: 0.855rem; color: var(--text-dim); font-weight: 400; line-height: 1.6; }

/* per-product tint on the cross-link cards */
.cross a[data-t="diagnosis"]:hover  { border-color: var(--verdigris); }
.cross a[data-t="cost"]:hover       { border-color: var(--ochre); }
.cross a[data-t="management"]:hover { border-color: var(--amethyst); }
.cross a[data-t="os"]:hover         { border-color: var(--cobalt); }

/* ---------- provenance note ---------- */

.prov {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 34px;
  padding: 16px 20px;
  border: 1px dashed var(--line-field);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--text-mute);
  font-weight: 400;
  line-height: 1.68;
  max-width: 720px;
}
.prov svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--pc); }
.prov b { color: var(--text-dim); font-weight: 500; }

/* ---------- home-page teaser ---------- */

.teaser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: 2px solid var(--text);
  border-radius: var(--r);
  overflow: hidden;
}
.teaser a {
  background: var(--surface);
  padding: 26px 24px 24px;
  transition: background 0.4s;
}
.teaser a:hover { background: var(--surface-2); }
.teaser .t-ico { width: 26px; height: 26px; margin-bottom: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.teaser .t-ico { color: var(--pc, var(--accent)); }
.teaser strong { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 8px; }
.teaser span   { display: block; font-size: 0.86rem; color: var(--text-dim); font-weight: 400; line-height: 1.62; }

/* ---------- services page ---------- */

/* A service card runs the full content width, and a lone column of six bullets
   leaves half of it empty while the prose above runs to a 1100px measure.
   Two columns: what it is on the left, what you actually get on the right. */
.svc { display: grid; gap: 4px 46px; }
.svc-head { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; }
.svc-head .card-ico { margin: 0; flex: none; }
.svc-head h3 { margin: 0; }
.svc p { margin: 0; }
.svc .tags { border-top: 0; padding-top: 0; }
.svc .note { margin-top: 16px; }

/* This body copy is set at 300, where a browser's default bold is a jump of
   400 and reads as a different font rather than as emphasis — and in the spec
   table it did not visibly render at all, so the committed numbers, which are
   the only thing anyone reads that table for, sat flat in the prose. */
.svc p strong, .lede strong, .spec td strong { color: var(--text); font-weight: 500; }

@media (min-width: 900px) {
  .svc { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); }
  .svc-head { grid-column: 1 / -1; }
  /* The bullets are a list, not a continuation of the sentence beside them —
     the rule is what says so once they are no longer underneath it. */
  .svc .tags { border-left: 1px solid var(--line-soft); padding-left: 26px; }
}

@media (max-width: 899px) {
  .svc .tags { border-top: 1px solid var(--line-soft); padding-top: 20px; margin-top: 20px; }
}

/* On a phone these names wrap to three lines, and beside a centred icon each
   of those lines sits in a different place. Stack it. */
@media (max-width: 560px) {
  .svc-head { display: block; }
  .svc-head .card-ico { margin-bottom: 14px; }
}

/* Six phases, where auto-fit gives five across and one orphan. */
@media (min-width: 900px) {
  .flow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The duration reads as a footer, so it belongs at the foot of the card rather
   than wherever that card's prose happened to stop. */
.flow li { display: flex; flex-direction: column; }
.flow li .term { margin-top: auto; }

/* ---------- responsive ---------- */

@media (max-width: 940px) {
  .phero-grid { grid-template-columns: 1fr; gap: 44px; }
  .phero { padding-block: 128px 60px; }
  .phero .hero-actions { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .ledger li { grid-template-columns: 1fr; gap: 4px; }
  .callout { padding: 24px 22px; }
  .spec th { width: auto; }
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; }
  .spec th { border-bottom: 0; padding-bottom: 4px; }
  .spec td { padding-top: 4px; }
}

/* ---------- deep-detail disclosure ---------- */
/*
   The Gable page carries four capability write-ups that used to be four pages.
   Rendered flat that was 56 screens of scroll on a phone — past the point where
   anybody reaches the fourth one, which made the merge a way of hiding the
   material rather than of presenting it. Each capability now shows its lead
   section and its FAQ, with the four detail sections behind one of these.

   Collapsed, NOT removed: the markup is in the DOM, so a crawler indexes it,
   `knowledge._page_chunks` still reads it, and every section keeps the id its
   redirect and its Mira citation point at. main.js opens the right one when an
   anchor inside it is targeted. */
.deep {
  border-block: 1px solid var(--line);
  background: var(--bg-alt);
}
.deep + .deep { border-top: 0; }
.deep > summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: var(--wrap, 1180px);
  margin-inline: auto;
  padding: 26px clamp(20px, 5vw, 40px);
  cursor: pointer;
  list-style: none;
  transition: background 0.25s;
}
.deep > summary::-webkit-details-marker { display: none; }
.deep > summary:hover { background: rgba(var(--pc-rgb), 0.04); }
.deep > summary:focus-visible { outline: 2px solid var(--pc); outline-offset: -2px; }
.deep-label {
  position: relative;
  padding-right: 28px;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
}
/* A chevron drawn in CSS rather than shipped as a sixth inline SVG. */
.deep-label::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--pc);
  border-bottom: 2px solid var(--pc);
  transform: rotate(45deg);
  transition: transform 0.25s;
}
.deep[open] > summary .deep-label::after { transform: rotate(-135deg); margin-top: -2px; }
.deep-blurb { font-size: 0.92rem; color: var(--text-dim); max-width: 62ch; }
/* The sections inside keep their own vertical rhythm; this just stops the
   first one doubling the summary's padding. */
.deep-body > section:first-child { padding-top: clamp(8px, 2vw, 16px); }

/* ---------- careers: a plain hero and a plain list ---------- */
/*
   The careers surfaces deliberately opt out of the product treatment. A
   candidate is deciding whether to spend an hour writing an application, and
   the chrome that helps a buyer skim a product line — tinted cards, icons, tag
   rows, a stat grid, a gradient headline — reads as a company selling the job.
   Plain type, one list, and the facts a candidate filters on. */
.phero-plain { padding-bottom: clamp(20px, 3vw, 32px); }
.phero-plain h1 {
  font-size: clamp(2rem, 5vw, 2.9rem);
  letter-spacing: -0.03em;
  margin: 18px 0 18px;
}

.openings { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.openings > li {
  padding: 26px 0;
  border-bottom: 1px solid var(--line-soft);
}
.openings h2 {
  margin: 0 0 6px;
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.openings h2 a { color: var(--text); transition: color 0.2s; }
.openings h2 a:hover { color: var(--accent); }
.openings-meta {
  margin: 0 0 8px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.openings > li > p:last-child { margin: 0; color: var(--text-dim); max-width: 62ch; }

/* A posting is one column of prose and lists, not a two-column layout with
   side rails — the rails were repeating facts the prose already carried. */
.wrap-narrow { max-width: 760px; }
/* Section headings at reading scale, not at the display scale a marketing
   section uses. "About the role" set at 3rem is the page announcing itself. */
.wrap-narrow h2 {
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.wrap-narrow .lede { font-size: 1rem; max-width: 66ch; }
.wrap-narrow .lede + .lede { margin-top: 14px; }
.posting-meta {
  margin: 14px 0 20px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.plain-list { margin: 0; padding-left: 1.15em; }
.plain-list li {
  margin-bottom: 10px;
  color: var(--text-dim);
  line-height: 1.62;
  max-width: 66ch;
}
.plain-list li::marker { color: var(--pc); }
/* A posting from MiraOS: its description, rendered from Markdown, so its
   elements arrive without classes and take the posting's look from here. */
.posting-body h2 { margin-top: 34px; }
.posting-body h2:first-child { margin-top: 0; }
.posting-body p { color: var(--text-dim); line-height: 1.62; max-width: 66ch; }
.posting-body ul, .posting-body ol { margin: 0 0 16px; padding-left: 1.15em; }
.posting-body li { margin-bottom: 10px; color: var(--text-dim); line-height: 1.62; max-width: 66ch; }
.posting-body li::marker { color: var(--pc); }
.posting-body table { border-collapse: collapse; margin: 0 0 16px; }
.posting-body th, .posting-body td { border: 1px solid var(--line, rgba(0,0,0,.12)); padding: 6px 10px; text-align: left; }
/* Pictures from MiraOS (/media): never wider than the column, never stretched. */
.posting-body img { display: block; max-width: 100%; height: auto; margin: 8px 0 16px; border-radius: 8px; }
.posting-body a { color: var(--pc, inherit); }
.openings h3 { margin: 0 0 6px; font-size: 1.06rem; font-weight: 600; letter-spacing: -0.02em; }
.openings h3 a { color: var(--text); transition: color 0.2s; }
.openings h3 a:hover { color: var(--accent); }

/* A buyer segment leads with the segment name, so the name carries the weight
   and the qualifier after the dash reads as the qualifier it is. `.tags li` is
   set at mute; without this the bold would be bold mute, which is neither. */
.tags li strong { color: var(--text-dim); font-weight: 600; }

/* The capability proof points inside a cross-link card. Smaller than a normal
   `.tags` list because the card is a link, not a section: these are what the
   capability claims, not an argument for it. */
.cx-points { margin-top: 12px; gap: 6px; }
.cx-points li { font-size: 0.79rem; }

/* ---------- product screenshots ---------- */
/*
   Real captures of the running software, not mockups. The site had no <img> at
   all until these: every visual was inline SVG, on a site whose argument is
   that the software exists and can be opened.

   Sized in the markup (`width`/`height`) so the box is reserved before the
   bytes arrive and nothing below it jumps, and lazy below the fold. */
.shot {
  margin: 26px 0 0;
  border: 1px solid var(--text);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  /* The captures are light-UI screenshots; the hairline separates the white
     of the capture from its caption. */
  border-bottom: 1px solid var(--line-soft);
}
.shot figcaption {
  padding: 13px 16px;
  font-size: 0.84rem;
  color: var(--text-dim);
  background: var(--surface-2);
}
.shot figcaption strong { color: var(--text); font-weight: 600; }

/* ---------- product logo, beside the name ---------- */
/* Sized by HEIGHT with the width left to the file's own ratio, because the two
   logos are different KINDS: Gable Pro's is a lockup (340x96) and MiraShield's
   is a bare mark (64x64). A fixed square box squashed the lockup flat. The
   markup carries the computed width so nothing reflows on load. */
.product-logo {
  height: 38px;
  width: auto;
  flex: none;
  vertical-align: -8px;
  margin-right: 9px;
}
/* The real logo sits where the drawn icon did, so the card keeps its rhythm. */
.pc-logo, .pcard .pc-logo { height: 30px; width: auto; object-fit: contain; }

/* ---------- framework and provider grids ---------- */

/* WHY THIS IS NOT A LOGO WALL, since a logo wall is what a reader expects here
   and what was asked for. ISO forbids its mark to anyone but a certification
   body; the AICPA's SOC 2 mark means a licensed CPA firm attested something;
   NIST, IRS, CJIS and CMMC are government seals. Rendered together on a page
   read by compliance buyers they say "certified by these", which is the exact
   claim `test_mira_claims_no_credentials_we_do_not_hold` exists to prevent.

   So the readability comes from grouping and from typography instead: the
   family is the heading, the count is the number a buyer is actually weighing,
   and the sentence underneath is the thing a logo could never say. */
.fw-family { margin-top: 30px; }
.fw-family > h3 {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 12px;
}
/* SEPARATE TILES, NOT ONE BORDERED BLOCK, and the reason is the last row. A
   seamless grid draws a cell whether or not anything is in it, so a family of
   five in four columns shows one card and three empty boxes - and because the
   columns auto-fit, the number left over changes at every width, so there is no
   count that fixes it. Tiles with a gap have no empty cell to draw. */
.fw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 10px;
}
.fw {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px 20px;
}
.fw-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 3px;
}
.fw-count {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 9px;
}
/* On a product page the label takes the product's pigment, as the kicker
   does; the MiraShield page sets no pigment of its own and keeps the accent. */
[data-product] .fw-count { color: var(--pc); }
.fw p {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-mute);
}