/* ==========================================================================
   JHub — J&I Digital Solutions LLC
   Visual world: container registry / ISO 6346 yard marking.
   Painted steel, stencilled owner marks, bolted data plates.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4,
p, figure, blockquote,
dl, dd, ol, ul { margin: 0; padding: 0; }

ol[class], ul[class] { list-style: none; }

img, svg { display: block; max-width: 100%; }

/* --- Tokens --------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Galvanised steel ground */
  --steel-050: #f4f6f5;
  --steel-100: #e9ecea;
  --steel-200: #dbe0de;
  --steel-300: #c4cbc8;
  --steel-400: #a6afac;
  --steel-500: #7f8a87;

  /* Ink */
  --ink:       #111716;
  --ink-soft:  #38423f;
  --ink-faint: #5c6663;

  /* Container paint — the owner colour, carries whole regions */
  --paint:       #0d4a43;
  --paint-deep:  #082e2a;
  --paint-lift:  #14625a;
  --stencil:     #f2f5f4;
  --stencil-dim: #a9bcb8;

  /* Signal — active marks. Three tiers so small text clears AA on each ground. */
  --hazard: #d9541e;       /* fields, rules, focus rings; small text on ink only */
  --hazard-deep: #a63c10;  /* small text on the steel grounds */
  --hazard-lift: #f7a271;  /* small text on the paint grounds */

  /* Rib rhythm of the corrugation — the page grid derives from it */
  --rib: 36px;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --bay: clamp(4rem, 9vw, 8rem);

  --edge: 2px;
  --radius: 10px;

  /* Depth: real offset + soft blur, never a flat halo */
  --rest:  0 1px 2px rgba(8, 26, 24, 0.07), 0 3px 10px rgba(8, 26, 24, 0.06);
  --raise: 0 6px 12px rgba(8, 26, 24, 0.10), 0 18px 40px rgba(8, 26, 24, 0.14);
  --rest-dark:  0 1px 2px rgba(0, 0, 0, 0.28), 0 4px 14px rgba(0, 0, 0, 0.24);
  --raise-dark: 0 8px 16px rgba(0, 0, 0, 0.32), 0 22px 46px rgba(0, 0, 0, 0.34);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Material: corrugated steel ------------------------------------------- */

.ribbed {
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.055) 0, rgba(255, 255, 255, 0.055) 2px,
      transparent 2px, transparent calc(var(--rib) - 6px),
      rgba(0, 0, 0, 0.17) calc(var(--rib) - 6px), rgba(0, 0, 0, 0.17) calc(var(--rib) - 2px),
      rgba(255, 255, 255, 0.035) calc(var(--rib) - 2px), rgba(255, 255, 255, 0.035) var(--rib)
    );
}

/* --- Base ----------------------------------------------------------------- */

body {
  background: var(--steel-100);
  color: var(--ink);
  font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variation-settings: "wdth" 100;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scrollbar-color: var(--steel-500) var(--steel-200);
}

::selection { background: var(--paint); color: var(--stencil); }

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

.wrap {
  width: min(100% - (var(--gutter) * 2), 1240px);
  margin-inline: auto;
}

.wrap--narrow { width: min(100% - (var(--gutter) * 2), 820px); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--hazard);
  color: var(--stencil);
  padding: 0.75rem 1.25rem;
  z-index: 50;
  font: 700 0.8rem/1 "Martian Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* --- Type ----------------------------------------------------------------- */

.mark {
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.95;
  text-wrap: balance;
}

.mark--yard  { font-size: clamp(3.1rem, 12vw, 8.5rem); letter-spacing: -0.035em; }
.mark--gate  { font-size: clamp(2rem, 5.2vw, 3.6rem); }
.mark--panel { font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-variation-settings: "wdth" 106; }

.label {
  font-family: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variation-settings: "wdth" 100;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.lede {
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.4rem);
  line-height: 1.5;
  max-width: 46ch;
  text-wrap: pretty;
}

.prose p,
.prose li { max-width: var(--measure); text-wrap: pretty; }
.prose p + p { margin-top: 1.1em; }

/* --- Links ---------------------------------------------------------------- */
/* Signature: a painted rule that deepens like fresh paint. */

.ink-link {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--hazard), var(--hazard));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding-bottom: 2px;
  transition: background-size 320ms var(--ease), color 320ms var(--ease);
}
.ink-link:hover,
.ink-link:focus-visible { background-size: 100% 7px; }

.paint-link {
  color: var(--stencil);
  text-decoration: none;
  background-image: linear-gradient(var(--hazard), var(--hazard));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding-bottom: 2px;
  transition: background-size 320ms var(--ease);
}
.paint-link:hover,
.paint-link:focus-visible { background-size: 100% 7px; }

/* --- Stencilled actions --------------------------------------------------- */

.act {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  border: var(--edge) solid currentColor;
  font-family: "Martian Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  transition: background-color 240ms var(--ease), color 240ms var(--ease);
}

.act__arrow { transition: transform 320ms var(--ease); }
.act:hover .act__arrow,
.act:focus-visible .act__arrow { transform: translateX(4px); }

.act--paint { color: var(--stencil); }
.act--paint:hover,
.act--paint:focus-visible { background: var(--stencil); color: var(--paint-deep); }

.act--fill {
  color: var(--paint-deep);
  background: var(--hazard);
  border-color: var(--hazard);
}
.act--fill:hover,
.act--fill:focus-visible { background: var(--stencil); border-color: var(--stencil); }

.act--ink { color: var(--ink); }
.act--ink:hover,
.act--ink:focus-visible { background: var(--ink); color: var(--steel-050); }

/* --- Header --------------------------------------------------------------- */

.site-header {
  background: var(--ink);
  color: var(--steel-050);
  border-bottom: 4px solid var(--hazard);
}

.site-header__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.1rem;
}

.owner-code {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.owner-code__mark {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--steel-050);
}

.owner-code__suffix {
  font-family: "Martian Mono", monospace;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--hazard);
  text-transform: uppercase;
}

.nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.9rem; }

.nav a {
  color: var(--steel-300);
  text-decoration: none;
  font-family: "Martian Mono", monospace;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color 220ms var(--ease), border-color 220ms var(--ease);
}
.nav a:hover { color: var(--steel-050); border-bottom-color: var(--steel-500); }
.nav a[aria-current="page"] { color: var(--steel-050); border-bottom-color: var(--hazard); }

/* --- Hero: the painted container face ------------------------------------- */

.yard {
  position: relative;
  background-color: var(--paint);
  color: var(--stencil);
  overflow: hidden;
}

.yard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0, 0, 0, 0.32) 0%, transparent 42%, rgba(255, 255, 255, 0.06) 100%);
  pointer-events: none;
}

.yard__in {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 11vw, 8.5rem);
}

.yard__mark {
  color: var(--stencil);
  max-width: 15ch;
}

.yard__lede {
  margin-top: 1.9rem;
  color: var(--stencil);
  opacity: 0.92;
}

.yard__acts {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Corner mark — the painted registration corner of a container face */
.yard__corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(90px, 16vw, 190px);
  height: clamp(90px, 16vw, 190px);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--hazard) 0 14px,
      transparent 14px 28px
    );
  opacity: 0.62;
  pointer-events: none;
}

/* --- Data plate ----------------------------------------------------------- */

.plate {
  --rivet: 13px;
  position: relative;
  background-color: var(--steel-200);
  background-image:
    radial-gradient(circle at var(--rivet) var(--rivet), var(--steel-050) 0 1.5px, var(--steel-400) 2px 3.4px, transparent 3.6px),
    radial-gradient(circle at calc(100% - var(--rivet)) var(--rivet), var(--steel-050) 0 1.5px, var(--steel-400) 2px 3.4px, transparent 3.6px),
    radial-gradient(circle at var(--rivet) calc(100% - var(--rivet)), var(--steel-050) 0 1.5px, var(--steel-400) 2px 3.4px, transparent 3.6px),
    radial-gradient(circle at calc(100% - var(--rivet)) calc(100% - var(--rivet)), var(--steel-050) 0 1.5px, var(--steel-400) 2px 3.4px, transparent 3.6px);
  background-repeat: no-repeat;
  border: var(--edge) solid var(--ink);
  color: var(--ink);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}

.plate__title {
  font-family: "Martian Mono", monospace;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-bottom: 0.9rem;
  margin-bottom: 1.4rem;
  border-bottom: var(--edge) solid var(--ink);
}

.plate__rows { display: grid; gap: 1.1rem; }

.plate__row {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
}

.plate__row dt { color: var(--ink-faint); }

.plate__row dd {
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.45;
}

@media (max-width: 46rem) {
  .plate__row { grid-template-columns: 1fr; }
}

/* --- Bays: the stacked sections ------------------------------------------- */

.bay { padding-block: var(--bay); }

.bay--steel { background: var(--steel-100); }
.bay--deck  { background: var(--steel-200); }
.bay--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.bay--paint {
  background-color: var(--paint-deep);
  color: var(--stencil);
}
.bay--paint .bay__head { border-top-color: var(--stencil-dim); }
.bay--paint .bay__head .label { color: var(--hazard-deep); }

.bay__head {
  border-top: var(--edge) solid var(--ink);
  padding-top: 1.1rem;
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 2rem;
}

.bay__head .label { color: var(--hazard-deep); }

.bay__title { max-width: 22ch; }

/* --- Units: one statement each -------------------------------------------- */

.units {
  display: grid;
  gap: 1px;
  background: var(--ink);
  border: var(--edge) solid var(--ink);
}

@media (min-width: 56rem) {
  .units--pair { grid-template-columns: repeat(2, 1fr); }
}

.unit {
  background: var(--steel-050);
  padding: clamp(1.8rem, 3.4vw, 2.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.unit--filled { background: var(--paint); color: var(--stencil); }
.unit--filled .unit__label { color: var(--hazard-lift); }

.unit__label { color: var(--ink-faint); }

.unit p { max-width: 44ch; }

/* Emphasis by field size, not by piling on type weight */
@media (min-width: 56rem) {
  .unit--wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: clamp(2rem, 5vw, 4.5rem);
    row-gap: 0.9rem;
    align-items: start;
  }
  .unit--wide .unit__label { grid-column: 1; grid-row: 1; }
  .unit--wide h2,
  .unit--wide h3 { grid-column: 1; grid-row: 2; }
  .unit--wide p { grid-column: 2; grid-row: 1 / 3; max-width: 52ch; }
}

/* --- Register: the verification sweep ------------------------------------- */

.register {
  border: var(--edge) solid var(--stencil-dim);
}

.register__row {
  display: grid;
  grid-template-columns: minmax(10rem, 18rem) 1fr;
  gap: 0.5rem 2.5rem;
  padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.4rem, 2.6vw, 2.2rem);
  border-bottom: 1px solid rgba(169, 188, 184, 0.4);
}
.register__row:last-child { border-bottom: 0; }

.register__row dt {
  color: var(--hazard-lift);
  padding-top: 0.25rem;
}

.register__row dd { max-width: 58ch; }

@media (max-width: 46rem) {
  .register__row { grid-template-columns: 1fr; }
}

/* --- Closing band --------------------------------------------------------- */

.gate {
  background-color: var(--hazard);
  color: var(--ink);
  padding-block: clamp(3.2rem, 7vw, 5.5rem);
}

.gate__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.gate p { max-width: 40ch; margin-top: 0.9rem; font-weight: 500; }

.gate .act--ink { border-color: var(--ink); color: var(--ink); }
.gate .act--ink:hover,
.gate .act--ink:focus-visible { background: var(--ink); color: var(--hazard); }

/* --- Document pages (legal + prose) --------------------------------------- */

.doc-head {
  background-color: var(--paint);
  color: var(--stencil);
  padding-block: clamp(3rem, 7vw, 5rem);
  position: relative;
  overflow: hidden;
}
.doc-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0, 0, 0, 0.28) 0%, transparent 55%);
  pointer-events: none;
}
.doc-head__in { position: relative; z-index: 1; }
.doc-head .label { color: var(--hazard-lift); }
.doc-head h1 { margin-top: 0.9rem; }
.doc-head__meta {
  margin-top: 1.4rem;
  color: var(--stencil-dim);
}

.doc { padding-block: clamp(3rem, 6vw, 5rem); }

.doc h2 {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 106;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.45rem);
  line-height: 1.15;
  margin-top: 3.2rem;
  padding-top: 1rem;
  border-top: var(--edge) solid var(--ink);
}
.doc h2:first-child { margin-top: 0; }

.doc h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin-top: 1.9rem;
  margin-bottom: 0.4rem;
}

.doc p { margin-top: 1rem; max-width: var(--measure); text-wrap: pretty; }

.doc ul { margin-top: 1rem; padding-left: 1.4rem; }
.doc li { max-width: var(--measure); margin-top: 0.5rem; }
.doc ul { list-style: none; padding-left: 0; }
.doc ul li {
  position: relative;
  padding-left: 1.5rem;
}
.doc ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 2px;
  background: var(--hazard);
}

.doc__note {
  margin-top: 2.8rem;
  border-top: var(--edge) solid var(--ink);
  padding-top: 1.1rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.doc__toc {
  margin-bottom: 3rem;
  padding: 1.5rem;
  background: var(--steel-200);
  border: var(--edge) solid var(--ink);
}
.doc__toc ul { list-style: none; padding: 0; margin: 0.9rem 0 0; columns: 2; column-gap: 2rem; }
.doc__toc li { margin: 0 0 0.5rem; break-inside: avoid; padding-left: 0; }
.doc__toc li::before { display: none; }
@media (max-width: 40rem) { .doc__toc ul { columns: 1; } }

/* --- Contact channels ----------------------------------------------------- */

.channels {
  display: grid;
  gap: 1px;
  background: var(--ink);
  border: var(--edge) solid var(--ink);
  margin-top: 2.5rem;
}
@media (min-width: 52rem) { .channels { grid-template-columns: repeat(3, 1fr); } }

.channel {
  background: var(--steel-050);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.channel__label { color: var(--hazard-deep); }
.channel p { font-size: 0.97rem; color: var(--ink-soft); }
.channel a { margin-top: auto; padding-top: 0.6rem; font-weight: 600; word-break: break-word; }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  background-color: var(--ink);
  color: var(--steel-300);
  padding-top: clamp(3.2rem, 6vw, 4.5rem);
  border-top: 4px solid var(--hazard);
}

.site-footer a { color: var(--steel-300); }

.foot-grid {
  display: grid;
  gap: 2.6rem;
  padding-bottom: 3rem;
}

@media (min-width: 52rem) {
  .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 3rem; }
}

.foot-brand__mark {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  font-size: 1.9rem;
  text-transform: uppercase;
  color: var(--steel-050);
  line-height: 1;
}

.foot-brand p {
  margin-top: 1rem;
  font-size: 0.92rem;
  max-width: 32ch;
  color: var(--steel-400);
}

.foot-col h2 {
  color: var(--hazard);
  margin-bottom: 1.1rem;
}

.foot-col ul { display: grid; gap: 0.65rem; list-style: none; margin: 0; padding: 0; }

.foot-col a {
  text-decoration: none;
  font-size: 0.93rem;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.foot-col a:hover { color: var(--steel-050); border-bottom-color: var(--hazard); }

.foot-bar {
  border-top: 1px solid var(--ink-soft);
  padding-block: 1.6rem 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}

.foot-bar p { font-size: 0.85rem; color: var(--steel-400); }

.foot-entity {
  color: var(--steel-050);
  font-weight: 600;
}

/* --- Motion: one authored moment ------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .yard__mark,
  .yard__lede,
  .yard__acts {
    animation: paint-on 900ms var(--ease) both;
  }
  .yard__lede { animation-delay: 110ms; }
  .yard__acts { animation-delay: 200ms; }

  @keyframes paint-on {
    from { clip-path: inset(0 100% 0 0); opacity: 0.4; }
    to   { clip-path: inset(0 0 0 0); opacity: 1; }
  }
}

@media print {
  .site-header, .gate, .yard__corner { background: none !important; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   Cards, depth and disclosure
   ========================================================================== */

/* --- Units: cards that react ---------------------------------------------- */

.unit__icon {
  width: 30px;
  height: 30px;
  color: var(--paint);
  margin-bottom: 0.2rem;
  transition: transform 420ms var(--ease), color 420ms var(--ease);
}
.unit--filled .unit__icon { color: var(--hazard-lift); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .unit:hover .unit__icon { transform: translateY(-3px) scale(1.07); color: var(--hazard-deep); }
  .unit--filled:hover .unit__icon { color: var(--hazard); }
}

@media (min-width: 56rem) {
  .unit--wide .unit__icon { grid-column: 1; grid-row: 1; }
  .unit--wide .unit__label { grid-row: 2; }
  .unit--wide h2,
  .unit--wide h3 { grid-row: 3; }
  .unit--wide p { grid-row: 1 / 4; }
  .unit--wide { grid-template-rows: auto auto auto; row-gap: 0.6rem; }
}


.units {
  gap: clamp(1rem, 2vw, 1.4rem);
  background: none;
  border: 0;
}

.unit {
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
  box-shadow: var(--rest);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}

.unit--filled {
  border-color: var(--paint-lift);
  box-shadow: var(--rest-dark);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .unit:hover { transform: translateY(-5px); box-shadow: var(--raise); }
  .unit--filled:hover { box-shadow: var(--raise-dark); }
}

/* --- Plate keeps its bolted character, softened --------------------------- */

.plate { border-radius: var(--radius); box-shadow: var(--rest); }

/* --- Disclosure: questions that open -------------------------------------- */

.qa {
  display: grid;
  gap: 0.7rem;
}

.qa__item {
  background: rgba(244, 246, 245, 0.05);
  border: 1px solid rgba(169, 188, 184, 0.34);
  border-radius: var(--radius);
  overflow: hidden;
  transition: background-color 340ms var(--ease), border-color 340ms var(--ease);
}

.qa__item[open] {
  background: rgba(244, 246, 245, 0.08);
  border-color: var(--hazard);
}

.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem clamp(1.1rem, 2.4vw, 1.75rem);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.01rem;
  color: var(--stencil);
  transition: color 240ms var(--ease);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__item:hover .qa__q { color: #fff; }

/* drawn marker: a cross that becomes a minus */
.qa__sign {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.qa__sign::before,
.qa__sign::after {
  content: "";
  position: absolute;
  background: var(--hazard-lift);
  transition: transform 380ms var(--ease), opacity 380ms var(--ease);
}
.qa__sign::before { inset: 7px 0 7px 0; }
.qa__sign::after  { inset: 0 7px 0 7px; }
.qa__item[open] .qa__sign::after { transform: scaleY(0); opacity: 0; }

.qa__a {
  padding: 0 clamp(1.1rem, 2.4vw, 1.75rem) 1.4rem;
  color: var(--stencil-dim);
  max-width: 58ch;
}
.qa__a a { color: var(--stencil); }

@media (prefers-reduced-motion: no-preference) {
  .qa__item[open] .qa__a { animation: unfold 380ms var(--ease) both; }
  @keyframes unfold {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Light-ground variant, for the lifecycle list */
.qa--steel .qa__item {
  background: var(--steel-050);
  border-color: var(--steel-300);
  box-shadow: var(--rest);
}
.qa--steel .qa__item[open] { border-color: var(--hazard); }
.qa--steel .qa__q { color: var(--ink); }
.qa--steel .qa__item:hover .qa__q { color: var(--paint); }
.qa--steel .qa__sign::before,
.qa--steel .qa__sign::after { background: var(--hazard-deep); }
.qa--steel .qa__a { color: var(--ink-soft); }
.qa--steel .qa__a a { color: var(--ink); }

/* --- Softening the remaining hard rectangles ------------------------------ */

.act { border-radius: 6px; }
.channels { gap: clamp(1rem, 2vw, 1.3rem); background: none; border: 0; }
.channel {
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
  box-shadow: var(--rest);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .channel:hover { transform: translateY(-5px); box-shadow: var(--raise); }
}
.doc__toc { border-radius: var(--radius); border-width: 1px; border-color: var(--steel-300); box-shadow: var(--rest); }
.yard__corner { border-top-left-radius: var(--radius); }