/* =========================================================================
   digital(R)evolution — home page composition layer
   Requires assets/tokens.css. Nothing here introduces a colour outside it.
   ========================================================================= */

/* ---------- Section scaffolding ----------------------------------------- */

.sec { padding-block: var(--space-9); border-top: var(--border); scroll-margin-top: 76px; }
.sec--alt { background: var(--color-bg-section); }

.sec-head { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-6); margin-bottom: var(--space-8); }
.sec-head__index {
  font-family: var(--font-mono); font-size: var(--text-overline); letter-spacing: 0.09em;
  color: var(--color-text-muted); padding-top: 10px; border-top: 2px solid var(--color-primary);
  height: fit-content;
}
.sec-head__body > h2 { max-width: 20ch; }
.sec-head__body > p { margin-top: var(--space-4); font-size: var(--text-body-lg); }
.sec-head__body > p + p { margin-top: var(--space-3); color: var(--color-text-muted); }

/* Closing statement band — the line that resolves a section */
.coda {
  display: grid; grid-template-columns: 2px minmax(0, 1fr); gap: var(--space-5);
  margin-top: var(--space-7);
}
.coda::before { content: ''; grid-row: 1 / -1; background: var(--color-primary); border-radius: 1px; }
.coda p { grid-column: 2; font-size: var(--text-body-lg); color: var(--color-text-primary); max-width: 64ch; }
.coda p + p { margin-top: var(--space-3); color: var(--color-text-secondary); font-size: var(--text-body); }

/* ---------- Hero --------------------------------------------------------- */

.hero { padding-block: var(--space-9) var(--space-9); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-8); align-items: start; }
.hero h1 { font-size: clamp(2.5rem, 4.6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.03em; margin-top: var(--space-4); max-width: 15ch; }
.hero__body { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.hero__body p { font-size: var(--text-body-lg); max-width: 56ch; }
.hero__body p:last-child { color: var(--color-text-muted); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); }

/* Run record — a real request moving through the operating boundary */
.record { border: var(--border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.record__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); border-bottom: var(--border); background: var(--color-bg-section);
}
.record__title { font-family: var(--font-mono); font-size: var(--text-overline); letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-muted); }
.record__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); border-bottom: var(--border); }
.record__row:last-child { border-bottom: 0; }
.record__key { font-family: var(--font-mono); font-size: var(--text-overline); letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-muted); padding-top: 3px; }
.record__val { font-size: var(--text-small); color: var(--color-text-primary); min-width: 0; }
.record__val .q { color: var(--color-text-secondary); }
.record__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--space-3);
  border: var(--border); border-radius: var(--radius-pill); background: var(--color-bg-section);
  font-family: var(--font-mono); font-size: var(--text-overline); letter-spacing: 0.06em; color: var(--color-text-muted);
}
.tag--ok { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 50%, transparent); }
.tag--hold { color: var(--color-warm-accent); border-color: color-mix(in srgb, var(--color-warm-accent) 45%, transparent); }
.record__gate {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4); background: var(--color-bg-section); border-top: var(--border);
}
.record__gate .small { color: var(--color-text-muted); }

/* ---------- 01 · Symptom records ---------------------------------------- */

.symptoms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.symptom { padding: var(--space-6); background: var(--color-surface); border-left: var(--border); border-top: var(--border); }
.symptom:nth-child(-n+2) { border-top: 0; }
.symptom:nth-child(odd) { border-left: 0; }
.symptom__idx { font-family: var(--font-mono); font-size: var(--text-overline); letter-spacing: 0.09em; color: var(--color-warm-accent); }
.symptom h3 { margin-top: var(--space-3); font-size: 1.25rem; max-width: 26ch; }
.symptom ul { list-style: none; margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.symptom li { position: relative; padding-left: var(--space-5); font-size: var(--text-small); color: var(--color-text-secondary); }
.symptom li::before { content: ''; position: absolute; left: 0; top: 10px; width: 10px; height: 1px; background: var(--color-border-strong); }

/* ---------- 02 · Service tabs -------------------------------------------- */

/* overflow-y must be explicit: overflow-x:auto alone makes the Y axis
   scrollable too, which paints a phantom scrollbar next to the tabs */
.tabs { display: flex; gap: var(--space-2); border-bottom: var(--border); margin-bottom: var(--space-7); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { height: 0; }
.tab {
  position: relative; flex: none; padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
  background: transparent; border: 0; cursor: pointer; text-align: left;
  color: var(--color-text-muted); font-family: var(--font-body); transition: color var(--dur) var(--ease);
}
.tab:hover { color: var(--color-text-secondary); }
.tab__n { display: block; font-family: var(--font-mono); font-size: var(--text-overline); letter-spacing: 0.09em; }
.tab__t { display: block; margin-top: 6px; font-size: var(--text-body); font-weight: var(--weight-emphasize); letter-spacing: -0.01em; }
.tab[aria-selected='true'] { color: var(--color-text-primary); }
.tab[aria-selected='true']::after { content: ''; position: absolute; left: 0; right: var(--space-3); bottom: 0; height: 2px; background: var(--color-primary); }

.panel[hidden] { display: none; }
.panel__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-8); align-items: start; }
.panel__lead p { font-size: var(--text-body-lg); }
.panel__lead p + p { margin-top: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-body); }
.panel__lead .q { color: var(--color-text-primary); }

.caps { border: var(--border); border-radius: var(--radius-lg); background: var(--color-surface); }
.caps__head { padding: var(--space-4) var(--space-5); border-bottom: var(--border); }
.caps__list { list-style: none; }
.caps__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: var(--border); font-size: var(--text-small); color: var(--color-text-secondary); }
.caps__list li:last-child { border-bottom: 0; }
.caps__list svg { margin-top: 3px; color: var(--color-text-muted); }
.panel__foot { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.panel__note p { color: var(--color-text-primary); }
.panel__note p + p { margin-top: 6px; color: var(--color-text-muted); font-size: var(--text-small); }

/* ---------- 03 · Outcome matrix ------------------------------------------ */

.matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.matrix__col { background: var(--color-surface); border-left: var(--border); }
.matrix__col:first-child { border-left: 0; }
.matrix__head { padding: var(--space-5); border-bottom: var(--border); background: var(--color-bg-section); min-height: 116px; }
.matrix__head p { font-size: var(--text-small); color: var(--color-text-primary); font-weight: var(--weight-emphasize); }
.matrix__ico { color: var(--color-primary); margin-bottom: var(--space-3); }
.matrix__col ol { list-style: none; counter-reset: m; }
.matrix__col li { counter-increment: m; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--border); font-size: var(--text-small); }
.matrix__col li:last-child { border-bottom: 0; }
.matrix__col li::before { content: counter(m, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--text-overline); letter-spacing: 0.06em; color: var(--color-text-muted); padding-top: 3px; }

/* ---------- 04 · Process ladder ------------------------------------------ */

.stepbar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin-bottom: var(--space-8); }
.stepbar__node { position: relative; padding-top: var(--space-6); padding-right: var(--space-3); }
.stepbar__node::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--color-border); }
.stepbar__node:last-child::before { right: auto; width: 16px; }
.stepbar__node::after { content: ''; position: absolute; left: 0; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-border-strong); }
.stepbar__node--final::after { background: var(--color-primary); border-color: var(--color-primary); }
.stepbar__n { font-family: var(--font-mono); font-size: var(--text-overline); letter-spacing: 0.09em; color: var(--color-warm-accent); }
.stepbar__t { display: block; margin-top: 4px; font-size: var(--text-caption); color: var(--color-text-muted); line-height: 1.4; }

.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.step { border: var(--border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-5); }
.step--wide { grid-column: 1 / -1; }
.step__n { font-family: var(--font-display); font-size: 1.75rem; font-weight: var(--weight-announce); color: var(--color-warm-accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.step h3 { margin-top: var(--space-2); font-size: 1.125rem; }
.step p { margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-text-secondary); }
.step__q { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border); }
.step__q span { font-size: var(--text-small); color: var(--color-text-muted); padding-left: var(--space-5); position: relative; }
.step__q span::before { content: '?'; position: absolute; left: 0; top: 0; font-family: var(--font-mono); color: var(--color-primary); font-size: var(--text-caption); }

/* ---------- 05 · Control grid -------------------------------------------- */

.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.control { padding: var(--space-5); background: var(--color-surface); border-left: var(--border); border-top: var(--border); }
.control:nth-child(-n+3) { border-top: 0; }
.control:nth-child(3n+1) { border-left: 0; }
.control--wide { grid-column: 1 / -1; border-left: 0; }
.control__ico { color: var(--color-primary); margin-bottom: var(--space-4); }
.control h3 { font-size: 1.0625rem; }
.control p { margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-text-secondary); }
.control p + p { margin-top: var(--space-2); color: var(--color-text-muted); }

/* ---------- 06 · Experience ledger --------------------------------------- */

.ledger { border: var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ledger__row { display: grid; grid-template-columns: 56px minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-5); align-items: start; padding: var(--space-5); background: var(--color-surface); border-top: var(--border); }
.ledger__row:first-child { border-top: 0; }
.ledger__n { font-family: var(--font-mono); font-size: var(--text-overline); letter-spacing: 0.09em; color: var(--color-warm-accent); padding-top: 5px; }
.ledger__row h3 { font-size: 1.0625rem; }
.ledger__row p { font-size: var(--text-small); color: var(--color-text-secondary); }

/* ---------- 07 · FAQ ------------------------------------------------------ */

.faq { max-width: 920px; }
.faq .accordion__body p + p { margin-top: var(--space-3); }
.faq .accordion__body ul { list-style: none; margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.faq .accordion__body li { position: relative; padding-left: var(--space-5); }
.faq .accordion__body li::before { content: ''; position: absolute; left: 0; top: 10px; width: 10px; height: 1px; background: var(--color-border-strong); }

/* ---------- Closing CTA --------------------------------------------------- */

.close-cta { border-top: var(--border); background: var(--color-bg-section); padding-block: var(--space-9); }
.close-cta__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); align-items: end; }
.close-cta h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); letter-spacing: -0.02em; max-width: 16ch; }
.close-cta p { margin-top: var(--space-5); font-size: var(--text-body-lg); }
.close-cta__aside { border: var(--border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-6); }

/* ---------- Header nav dropdown ------------------------------------------ */

.has-menu { position: relative; }
.nav__trigger {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--space-3);
  background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--text-small);
  font-weight: var(--weight-emphasize); letter-spacing: 0.01em;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__trigger:hover { color: var(--color-text-primary); background: var(--color-bg-section); }
.nav__trigger svg { transition: transform var(--dur) var(--ease); }
.nav__trigger[aria-expanded='true'] svg { transform: rotate(180deg); }
.menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; min-width: 320px;
  background: var(--color-surface); border: var(--border); border-radius: var(--radius-lg);
  padding: var(--space-2); display: none;
}
.menu[data-open='true'] { display: block; }
.menu a { display: block; padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-md); color: var(--color-text-primary); }
.menu a:hover { background: var(--color-bg-section); }
.menu strong { display: block; font-size: var(--text-small); font-weight: var(--weight-emphasize); }
.menu span { display: block; margin-top: 3px; font-size: var(--text-caption); color: var(--color-text-muted); }

/* Language switcher as routing, not JS translation */
.lang a { border: 0; }
.lang__btn[aria-current='page'] { background: var(--color-surface); color: var(--color-text-primary); border: var(--border); }

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 1023px) {
  .hero__grid, .panel__grid, .close-cta__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control:nth-child(3n+1) { border-left: var(--border); }
  .control:nth-child(-n+3) { border-top: var(--border); }
  .control:nth-child(-n+2) { border-top: 0; }
  .control:nth-child(odd) { border-left: 0; }
  .stepbar { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-5); }
  .stepbar__node:nth-child(4)::before { right: auto; width: 16px; }
  .ledger__row { grid-template-columns: 44px minmax(0, 1fr); }
  .ledger__row p { grid-column: 2; }
  .menu { position: static; min-width: 0; margin: var(--space-2) 0; }
}
@media (max-width: 767px) {
  .sec { padding-block: var(--space-8); }
  .sec-head { grid-template-columns: 1fr; gap: var(--space-4); }
  .sec-head__index { border-top: 0; padding-top: 0; }
  .symptoms, .matrix, .controls, .steps { grid-template-columns: 1fr; }
  .symptom, .control { border-left: 0 !important; border-top: var(--border) !important; }
  .symptom:first-child, .control:first-child { border-top: 0 !important; }
  .matrix__col { border-left: 0; border-top: var(--border); }
  .matrix__col:first-child { border-top: 0; }
  .matrix__head { min-height: 0; }
  .stepbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepbar__node:nth-child(2n)::before { right: auto; width: 16px; }
  .ledger__row { grid-template-columns: 1fr; gap: var(--space-3); }
  .ledger__row p { grid-column: 1; }
  .hero h1 { max-width: none; }
}