/* 5P Diagnostics page. Same FMDC system, with a precision / measurement layer:
   calibration marks, measured arcs, controlled grids, three measurement languages
   (pulse wave · proportional segments · force vectors). */

@keyframes x-line { from { transform: translateY(105%); } }
@keyframes x-fade { from { opacity: 0; transform: translateY(1rem); } }
@keyframes x-in { from { opacity: 0; } }
@keyframes x-draw { from { stroke-dashoffset: var(--len, 1400); } to { stroke-dashoffset: 0; } }

.btn--light { background: var(--c-paper); color: var(--c-indigo); }
.btn--light:hover { background: #fff; }

/* ---------- Header over the dark hero (until the page scrolls) ---------- */
.x-page .site-header:not(.is-scrolled) .brand__name { color: var(--c-on-dark); }
.x-page .site-header:not(.is-scrolled) .brand__full { color: var(--c-on-dark-2); }
.x-page .site-header:not(.is-scrolled) .brand__logo { border-radius: 50%; background: #fff; }
.x-page .site-header:not(.is-scrolled) .primary-nav a { color: var(--c-on-dark-2); }
.x-page .site-header:not(.is-scrolled) .primary-nav a:hover,
.x-page .site-header:not(.is-scrolled) .primary-nav a.is-current { color: var(--c-on-dark); }
.x-page .site-header:not(.is-scrolled) .lang-switch__item { color: var(--c-on-dark); }
.x-page .site-header:not(.is-scrolled) .lang-switch__item.is-pending { color: var(--c-on-dark-2); }
.x-page .site-header:not(.is-scrolled) .lang-switch li + li::before { background: var(--c-rule-dark); }
.x-page .site-header:not(.is-scrolled) .header-call { color: var(--c-on-dark); border-color: var(--c-rule-dark); }
.x-page .site-header:not(.is-scrolled) .header-call:hover { background: rgba(246, 241, 232, .08); border-color: var(--c-on-dark-2); }
.x-page .site-header:not(.is-scrolled) .menu-toggle { color: var(--c-on-dark); }
.x-page .site-header:not(.is-scrolled) :focus-visible { outline-color: var(--c-cyan-soft); }

/* ---------- The measurement dial (hero + synthesis) ---------- */
.dial { --dial-ink: var(--c-on-dark); --dial-soft: rgba(246, 241, 232, .22); --dial-accent: var(--c-cyan); --dial-accent-2: var(--c-cyan-soft); --dial-label: var(--c-on-dark-2);
  display: block; inline-size: 100%; block-size: auto; }
.dial__ticks { fill: none; stroke: var(--dial-soft); stroke-width: 1; }
.dial__base { fill: none; stroke: var(--dial-soft); stroke-width: 1; }
.dial__wave { fill: none; stroke: var(--dial-accent); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1400; }
.dial__seg { fill: none; stroke: var(--dial-ink); stroke-width: 10; }
.dial__seg--1 { stroke-opacity: .9; } .dial__seg--2 { stroke-opacity: .65; } .dial__seg--3 { stroke-opacity: .45; } .dial__seg--4 { stroke-opacity: .28; }
.dial__vec { fill: none; stroke: var(--dial-accent-2); stroke-width: 1.4; stroke-linecap: round; }
.dial__dots { fill: var(--dial-ink); }
.dial__conv { fill: none; stroke: var(--dial-soft); stroke-width: 1; stroke-dasharray: 3 5; }
.dial__core { fill: none; stroke: var(--dial-soft); stroke-width: 1; }
.dial__core-in { fill: none; stroke: var(--dial-accent); stroke-opacity: .55; stroke-width: 1; }
.dial__center { fill: var(--dial-accent); }
.dial__labels text { font: 500 14px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; fill: var(--dial-label); text-anchor: middle; dominant-baseline: middle; }
.dial__lab-n { fill: var(--dial-accent-2); }
.dial__arc { transition: opacity .45s var(--ease-soft); }
.dial[data-active] .dial__arc { opacity: .18; }
.dial[data-active="vascular"] .dial__arc--a,
.dial[data-active="composition"] .dial__arc--b,
.dial[data-active="movement"] .dial__arc--c { opacity: 1; }

/* =========================================================
   HERO
   ========================================================= */
.x-hero {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 5.5rem)) 0;
  color: var(--c-on-dark);
  background:
    linear-gradient(rgba(246, 241, 232, .04) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(90deg, rgba(246, 241, 232, .04) 1px, transparent 1px) 0 0 / 3rem 3rem,
    radial-gradient(55rem 40rem at 80% 40%, rgba(0, 176, 240, .13), transparent 70%),
    var(--c-indigo-night);
  overflow: hidden;
}
.x-hero :focus-visible { outline-color: var(--c-cyan-soft); }
.x-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.x-dot { inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: var(--c-cyan); flex: none; }
.x-hero__eyebrow { color: var(--c-on-dark-2); }
.x-hero__title { margin-block: 1.5rem 1.75rem; font-size: clamp(2.8rem, 1.1rem + 5vw, 6rem); line-height: 1; letter-spacing: -.035em; color: var(--c-on-dark); }
.x-hero__title .line { display: block; overflow: hidden; padding-block-end: .08em; margin-block-end: -.08em; }
.x-hero__title .line > * { display: inline-block; }
.x-hero__title em { color: var(--c-cyan-soft); }
.x-hero__lead { max-inline-size: 34rem; font-size: var(--fs-lead); line-height: 1.6; color: var(--c-on-dark-2); }
.x-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-block-start: 2.25rem; }
.x-link { display: inline-flex; align-items: center; gap: .6rem; padding-block: .5rem; font: 500 .9375rem/1.2 var(--font-sans); color: var(--c-on-dark); background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; transition: background-size .5s var(--ease-out), color .3s; }
.x-link:hover { background-size: 0 1px; background-position: 100% 100%; color: var(--c-cyan-soft); }

/* Future verified statement slot (hidden until FMDC approves the wording). */
.x-claim {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-block-start: 1.75rem;
  padding: .7rem 1.2rem .7rem .9rem;
  border: 1px solid var(--c-rule-dark);
  border-radius: 999px 999px 999px 0;
  font: 500 .875rem/1.4 var(--font-sans);
  color: var(--c-on-dark);
}
.x-claim::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--c-cyan); flex: none; }

.x-hero__dial { max-inline-size: 34rem; justify-self: center; inline-size: 100%; }

.x-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-block-start: clamp(3rem, 2rem + 3vw, 5rem);
  border-block-start: 1px solid var(--c-rule-dark);
}
.x-legend a { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; align-items: baseline; padding-block: 1.4rem 1.6rem; padding-inline-end: 1rem; color: var(--c-on-dark); transition: color .3s; }
.x-legend__n { grid-row: span 2; font: 500 .75rem/1 var(--font-sans); letter-spacing: .08em; color: var(--c-cyan-soft); }
.x-legend__d { font: 600 .6875rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-on-dark-2); }
.x-legend__t { font: 300 clamp(1.2rem, 1rem + .6vw, 1.6rem)/1.2 var(--font-serif); transition: transform .5s var(--ease-out); }
.x-legend a:hover .x-legend__t { color: var(--c-cyan-soft); transform: translateX(.3rem); }
[dir="rtl"] .x-legend a:hover .x-legend__t { transform: translateX(-.3rem); }

@media (prefers-reduced-motion: no-preference) {
  .x-hero__title .line > * { animation: x-line 1.1s var(--ease-out) both; }
  .x-hero__title .line:nth-child(2) > * { animation-delay: .12s; }
  .x-hero__eyebrow, .x-hero__lead, .x-hero__actions, .x-legend { animation: x-fade 1s var(--ease-out) both; }
  .x-hero__lead { animation-delay: .28s; }
  .x-hero__actions { animation-delay: .38s; }
  .x-legend { animation-delay: .6s; }
  .x-hero__dial .dial__ticks { animation: x-in 1.2s var(--ease-soft) .1s both; }
  .x-hero__dial .dial__base { animation: x-in 1s var(--ease-soft) .3s both; }
  .x-hero__dial .dial__wave { animation: x-draw 2s var(--ease-soft) .4s both; }
  .x-hero__dial .dial__seg { animation: x-in .8s var(--ease-soft) both; }
  .x-hero__dial .dial__seg--1 { animation-delay: .6s; } .x-hero__dial .dial__seg--2 { animation-delay: .75s; }
  .x-hero__dial .dial__seg--3 { animation-delay: .9s; } .x-hero__dial .dial__seg--4 { animation-delay: 1.05s; }
  .x-hero__dial .dial__vec, .x-hero__dial .dial__dots { animation: x-in 1s var(--ease-soft) .9s both; }
  .x-hero__dial .dial__conv, .x-hero__dial .dial__core, .x-hero__dial .dial__core-in { animation: x-in 1s var(--ease-soft) 1.5s both; }
  .x-hero__dial .dial__center { animation: x-in .6s var(--ease-soft) 2s both; }
  .x-hero__dial .dial__labels { animation: x-in 1s var(--ease-soft) 1.2s both; }
}

@media (max-width: 1023px) {
  .x-hero__grid { grid-template-columns: 1fr; }
  .x-hero__dial { max-inline-size: 26rem; order: -1; margin-block-end: 1rem; }
}
@media (max-width: 639px) {
  .x-hero__dial { max-inline-size: 18rem; }
  .x-hero__dial .dial__labels { display: none; }
  .x-legend { grid-template-columns: 1fr; }
  .x-legend a { padding-block: 1rem; border-block-end: 1px solid var(--c-rule-dark); }
  .x-hero__actions .btn { inline-size: 100%; justify-content: space-between; }
}

/* =========================================================
   01 · THE 5P APPROACH
   ========================================================= */
.x-approach { background: var(--c-paper); }
.x-approach__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.x-approach__head { display: grid; gap: 1.5rem; }
.x-approach__head h2 em { color: var(--c-indigo); }
.x-approach__body { display: grid; gap: 2.5rem; }
.x-approach__lead { font: 300 clamp(1.35rem, 1.1rem + .9vw, 1.9rem)/1.4 var(--font-serif); color: var(--c-ink); }
.x-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem clamp(1.5rem, 3vw, 3rem); }
.x-themes li { display: grid; gap: .6rem; align-content: start; padding-block-start: 1.25rem; border-block-start: 1px solid var(--c-rule-strong); }
.x-themes li:nth-child(2) { --reveal-delay: .08s; }
.x-themes li:nth-child(3) { --reveal-delay: .16s; }
.x-themes__k { font: 600 .6875rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-cyan-ink); }
.x-themes p { font-size: .9375rem; color: var(--c-ink-2); }
.x-approach__note { max-inline-size: 38rem; color: var(--c-ink-2); }
@media (max-width: 1023px) { .x-approach__grid { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .x-themes { grid-template-columns: 1fr; } }

/* =========================================================
   02 · WHY MEASURE — three measurement languages
   ========================================================= */
.x-why { background: var(--c-cream); }
.x-why__head { display: grid; gap: 1.5rem; max-inline-size: 48rem; }
.x-why__head h2 em { color: var(--c-indigo); }
.x-scales { margin-block-start: clamp(3rem, 2rem + 3vw, 5rem); border-block-start: 1px solid var(--c-rule-strong); }
.x-scales li:nth-child(2) { --reveal-delay: .1s; }
.x-scales li:nth-child(3) { --reveal-delay: .2s; }
.x-scale {
  display: grid;
  grid-template-columns: 2.5rem minmax(8rem, 1.1fr) minmax(0, 2fr) minmax(10rem, 2fr) minmax(8rem, 1fr);
  gap: 1rem clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: center;
  padding-block: 1.75rem;
  border-block-end: 1px solid var(--c-rule);
}
.x-scale__n { font: 500 .75rem/1 var(--font-sans); letter-spacing: .08em; color: var(--c-cyan-ink); }
.x-scale__d { font: 300 clamp(1.4rem, 1.15rem + .8vw, 2rem)/1.1 var(--font-serif); color: var(--c-ink); transition: color .3s; }
.x-scale__what { font-size: .9375rem; color: var(--c-ink-2); }
.x-scale__viz { display: block; }
.x-scale__t { justify-self: end; font: 500 .875rem/1.2 var(--font-sans); color: var(--c-indigo); }
.x-scale:hover .x-scale__d { color: var(--c-indigo); }

.strip { display: block; inline-size: 100%; block-size: 3rem; overflow: visible; }
.strip__base { fill: none; stroke: var(--c-rule-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.strip__line { fill: none; stroke: var(--c-indigo); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 2400; }
.strip__seg { fill: var(--c-indigo); }
.strip__seg--1 { fill-opacity: .9; } .strip__seg--2 { fill-opacity: .62; } .strip__seg--3 { fill-opacity: .4; } .strip__seg--4 { fill-opacity: .22; }
.strip__dots { fill: var(--c-cyan-ink); }
.js [data-reveal]:not(.is-in) .strip__line { stroke-dashoffset: 2400; }
.js [data-reveal] .strip__line { transition: stroke-dashoffset 2.2s var(--ease-soft) .25s; }
.js [data-reveal]:not(.is-in) .strip__seg { transform: scaleX(0); }
.js [data-reveal] .strip__seg { transform-origin: left; transform-box: fill-box; transition: transform 1s var(--ease-out) .3s; }

@media (max-width: 899px) {
  .x-scale { grid-template-columns: 2.25rem 1fr auto; grid-template-areas: "n d t" ". what what" ". viz viz"; row-gap: .6rem; }
  .x-scale__n { grid-area: n; } .x-scale__d { grid-area: d; } .x-scale__t { grid-area: t; }
  .x-scale__what { grid-area: what; } .x-scale__viz { grid-area: viz; }
}

/* =========================================================
   CHAPTERS
   ========================================================= */
.x-ch { padding-block: var(--section); scroll-margin-block-start: var(--header-h); }
.x-ch--mesi { background: var(--c-paper); }
.x-ch--zm { background: var(--c-cream); }
.x-ch__top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.x-ch__top--rev > :first-child { order: 2; }
.x-ch__head { display: grid; gap: 1rem; }
.x-ch__num { display: flex; align-items: baseline; gap: 1rem; font: 300 clamp(4rem, 2.8rem + 4vw, 7.5rem)/.9 var(--font-serif); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--c-indigo); }
.x-ch__num span { font: 600 .6875rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-3); -webkit-text-stroke: 0; }
@supports not (-webkit-text-stroke: 1px black) { .x-ch__num { color: var(--c-indigo); } }
.x-ch__dim { font: 600 .75rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-cyan-ink); }
.x-ch__title { font-size: clamp(3rem, 1.8rem + 4.2vw, 6.25rem); line-height: .96; letter-spacing: -.035em; }
.x-ch__lead { max-inline-size: 36rem; margin-block-start: .5rem; font: 300 clamp(1.25rem, 1.08rem + .6vw, 1.6rem)/1.45 var(--font-serif); color: var(--c-ink); }
.x-ch__h { font: 600 .75rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-2); }

/* Equipment "specimen plate": controlled scale, feathered edges, calibration corners. */
.x-plate {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  background: #fff;
  box-shadow: 0 0 0 1px var(--c-rule), 0 2rem 4rem -2.5rem rgba(26, 29, 58, .2);
  max-inline-size: 34rem;
  justify-self: center;
  inline-size: 100%;
}
.x-plate::before, .x-plate::after { content: ""; position: absolute; inline-size: 1.25rem; block-size: 1.25rem; border-color: var(--c-indigo); border-style: solid; opacity: .6; }
.x-plate::before { inset-block-start: .6rem; inset-inline-start: .6rem; border-width: 1px 0 0 1px; }
.x-plate::after { inset-block-end: .6rem; inset-inline-end: .6rem; border-width: 0 1px 1px 0; }
.x-plate picture, .x-plate img { inline-size: 100%; block-size: auto; }
.x-plate img { -webkit-mask-image: radial-gradient(ellipse 68% 64% at 50% 50%, #000 48%, transparent 100%); mask-image: radial-gradient(ellipse 68% 64% at 50% 50%, #000 48%, transparent 100%); }
.x-plate figcaption { font-size: .75rem; color: var(--c-ink-3); text-align: center; }

.x-ch__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; margin-block-start: clamp(4rem, 3rem + 4vw, 7rem); }
.x-limbs { display: grid; gap: 1.25rem; max-inline-size: 26rem; }
.x-limbs__svg { inline-size: 100%; }
.x-limbs__frame { fill: none; stroke: var(--c-rule-strong); stroke-dasharray: 3 5; }
.x-limbs__link { fill: none; stroke: var(--c-cyan); stroke-width: 1.2; stroke-dasharray: 400; }
.js .x-limbs:not(.is-in) .x-limbs__link { stroke-dashoffset: 400; }
.x-limbs__link { transition: stroke-dashoffset 1.6s var(--ease-soft) .3s; }
.x-limbs__c { fill: var(--c-paper); stroke: var(--c-indigo); }
.x-limbs__c-in { fill: var(--c-cyan); }
.x-limbs__nodes { fill: var(--c-indigo); }
.x-limbs__labels text { font: 500 12px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; fill: var(--c-ink-2); text-anchor: middle; }
.x-limbs figcaption { font-size: .9375rem; color: var(--c-ink-2); }
.x-limbs figcaption strong { display: block; margin-block-end: .25rem; font: 300 1.35rem/1.25 var(--font-serif); color: var(--c-ink); }

.x-ch__detail { display: grid; gap: 1.25rem; }
.x-readout { border-block-start: 1px solid var(--c-rule-strong); }
.x-readout > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: .5rem 2rem; padding-block: 1.25rem; border-block-end: 1px solid var(--c-rule); }
.x-readout dt { display: grid; gap: .45rem; font: 500 1.0625rem/1.35 var(--font-sans); color: var(--c-ink); }
.x-readout__n { font: 500 .75rem/1 var(--font-sans); letter-spacing: .08em; color: var(--c-cyan-ink); font-variant-numeric: tabular-nums; }
.x-readout dd { font-size: .9375rem; line-height: 1.55; color: var(--c-ink-2); }

.x-ch__foot { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem clamp(2.5rem, 6vw, 7rem); align-items: start; margin-block-start: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); padding-block-start: 2rem; border-block-start: 1px solid var(--c-rule-strong); }
.x-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.x-facts dt { font: 600 .6875rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); }
.x-facts dd { margin-block-start: .4rem; font: 300 clamp(1.2rem, 1.05rem + .5vw, 1.5rem)/1.25 var(--font-serif); color: var(--c-indigo); }
.x-ch__context { font-size: .9375rem; color: var(--c-ink-2); }
.x-ch__context span { display: block; margin-block-end: .35rem; font: 600 .6875rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); }
.x-ch__context a { color: var(--c-indigo); text-decoration: underline; text-underline-offset: .2em; }

/* Z-Metrix composition */
.x-comp { margin-block-start: clamp(4rem, 3rem + 4vw, 7rem); }
.x-comp__viz .strip { block-size: 2.5rem; }
.x-comp__groups { display: grid; grid-template-columns: 2fr 1fr 1.25fr; gap: 2rem clamp(1.5rem, 3.5vw, 3.5rem); margin-block-start: 1.75rem; }
.x-comp__group { display: grid; gap: 1rem; align-content: start; padding-block-start: 1.25rem; border-block-start: 1px solid var(--c-rule-strong); }
.x-comp__group:nth-child(2) { --reveal-delay: .08s; }
.x-comp__group:nth-child(3) { --reveal-delay: .16s; }
.x-comp__h { font: 600 .75rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-cyan-ink); }
.x-comp__group dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1.25rem 2rem; }
.x-comp__group dt { font: 300 clamp(1.25rem, 1.1rem + .5vw, 1.55rem)/1.2 var(--font-serif); color: var(--c-ink); }
.x-comp__group dd { margin-block-start: .3rem; font-size: .875rem; line-height: 1.5; color: var(--c-ink-2); }

.x-ch__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem clamp(2.5rem, 6vw, 7rem); margin-block-start: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.x-ch__cols > div { display: grid; gap: 1rem; align-content: start; }
.x-ch__cols p { max-inline-size: 36rem; color: var(--c-ink-2); }
.x-ch__cols strong { font-weight: 600; color: var(--c-ink); }
.x-caution { padding: .9rem 1.1rem; border-inline-start: 2px solid var(--c-error, #9b2c24); background: rgba(155, 44, 36, .05); font-size: .9375rem; color: var(--c-ink) !important; }

/* KINVENT — dark chapter with a precision grid */
.x-ch--kv {
  color: var(--c-on-dark);
  background:
    linear-gradient(rgba(246, 241, 232, .045) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(90deg, rgba(246, 241, 232, .045) 1px, transparent 1px) 0 0 / 3rem 3rem,
    radial-gradient(50rem 36rem at 10% 0%, rgba(0, 176, 240, .12), transparent 70%),
    var(--c-indigo-night);
}
.x-ch--kv :focus-visible { outline-color: var(--c-cyan-soft); }
.x-ch--kv .x-ch__num { -webkit-text-stroke-color: var(--c-cyan-soft); }
.x-ch--kv .x-ch__num span { color: var(--c-on-dark-2); }
.x-ch--kv .x-ch__dim { color: var(--c-cyan-soft); }
.x-ch--kv .x-ch__title, .x-ch--kv .x-ch__lead { color: var(--c-on-dark); }
.x-ch--kv .x-ch__h { color: var(--c-on-dark-2); }
.x-ch__top--kv { align-items: end; }
.x-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .75rem; }
.x-tags span { padding: .4rem .85rem; border: 1px solid var(--c-rule-dark); border-radius: 999px; font: 500 .8125rem/1.2 var(--font-sans); color: var(--c-on-dark); }
.x-kv-aside { display: grid; gap: 1rem; align-content: start; }
.x-kv-aside p { color: var(--c-on-dark-2); }
.x-kv-aside p:first-child { padding-block-end: 1.25rem; border-block-end: 1px solid var(--c-rule-dark); color: var(--c-on-dark); }

.x-sensors__h { margin-block-start: clamp(4rem, 3rem + 4vw, 6.5rem); }
.x-sensors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1.5rem, 3vw, 3rem); margin-block-start: 1.25rem; }
.x-sensors li { display: grid; grid-template-columns: 4.5rem 1fr; gap: .3rem 1.25rem; align-content: start; padding-block: 1.5rem; border-block-start: 1px solid var(--c-rule-dark); }
.x-sensors li:nth-child(3n + 2) { --reveal-delay: .06s; }
.x-sensors li:nth-child(3n + 3) { --reveal-delay: .12s; }
.x-sensors__icon { grid-row: span 3; inline-size: 4.5rem; block-size: auto; fill: none; stroke: var(--c-cyan); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.x-sensors__name { font: 300 1.5rem/1.1 var(--font-serif); color: var(--c-on-dark); }
.x-sensors__what { font-size: .9375rem; color: var(--c-on-dark); }
.x-sensors__why { font-size: .875rem; color: var(--c-on-dark-2); }

.x-count { display: grid; gap: 1.5rem; margin-block-start: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); max-inline-size: 52rem; }
.x-count__scale { position: relative; block-size: 3.75rem; border-block-end: 1px solid rgba(246, 241, 232, .35); }
.x-count__bar { position: absolute; inset-block-start: .5rem; block-size: 1.1rem; inset-inline-start: calc(var(--from) / 35 * 100%); inline-size: calc((var(--to) - var(--from)) / 35 * 100%); }
.x-count__bar--mini { background: var(--c-cyan-soft); }
.x-count__bar--full { background: repeating-linear-gradient(135deg, var(--c-cyan) 0 2px, transparent 2px 7px); border: 1px solid var(--c-cyan); }
.x-count__tick { position: absolute; inset-block-end: -1.6rem; inset-inline-start: calc(var(--at) / 35 * 100%); translate: -50% 0; font: 500 .75rem/1 var(--font-sans); color: var(--c-on-dark-2); font-variant-numeric: tabular-nums; }
[dir="rtl"] .x-count__tick { translate: 50% 0; }
.x-count__tick::before { content: ""; position: absolute; inset-inline-start: 50%; inset-block-end: 1.1rem; inline-size: 1px; block-size: .5rem; background: rgba(246, 241, 232, .35); }
.js .x-count:not(.is-in) .x-count__bar { transform: scaleX(0); }
.x-count__bar { transform-origin: left; transition: transform 1.2s var(--ease-out) .3s; }
[dir="rtl"] .x-count__bar { transform-origin: right; }
.x-count__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; margin-block-start: 1.75rem; }
.x-count__list dt { font: 600 .6875rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-cyan-soft); }
.x-count__list dd { margin-block-start: .4rem; color: var(--c-on-dark-2); }
.x-count__v { font: 300 2rem/1 var(--font-serif); color: var(--c-on-dark); margin-inline-end: .25rem; }

@media (max-width: 1023px) {
  .x-ch__top, .x-ch__body, .x-ch__foot, .x-ch__cols { grid-template-columns: 1fr; }
  .x-ch__top--rev > :first-child { order: 0; }
  .x-plate { max-inline-size: 30rem; justify-self: start; }
  .x-comp__groups { grid-template-columns: 1fr 1fr; }
  .x-comp__group:first-child { grid-column: 1 / -1; }
  .x-sensors { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .x-plate { padding: 1rem; }
  .x-readout > div { grid-template-columns: 1fr; }
  .x-facts { grid-template-columns: 1fr; gap: 1rem; }
  .x-comp__groups { grid-template-columns: 1fr; }
  .x-sensors { grid-template-columns: 1fr; }
  .x-sensors li { grid-template-columns: 3.5rem 1fr; }
  .x-sensors__icon { inline-size: 3.5rem; }
  .x-count__list { grid-template-columns: 1fr; }
}

/* =========================================================
   03 · THREE VIEWS — synthesis
   ========================================================= */
.x-synth { background: var(--c-paper); }
.x-synth__head { display: grid; gap: 1.5rem; max-inline-size: 48rem; }
.x-synth__head h2 em { color: var(--c-indigo); }
.x-synth__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; margin-block-start: clamp(3rem, 2rem + 3vw, 5rem); }
.x-synth__dial { max-inline-size: 30rem; justify-self: center; inline-size: 100%; }
.x-synth__dial .dial { --dial-ink: var(--c-indigo); --dial-soft: rgba(26, 29, 58, .2); --dial-accent: var(--c-cyan-ink); --dial-accent-2: var(--c-cyan-ink); --dial-label: var(--c-ink-2); }
.x-views { border-block-start: 1px solid var(--c-rule-strong); }
.x-views li:nth-child(2) { --reveal-delay: .08s; }
.x-views li:nth-child(3) { --reveal-delay: .16s; }
.x-view { position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: .3rem 0; padding-block: 1.5rem; border-block-end: 1px solid var(--c-rule); }
.x-view::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: -1px; inline-size: 2px; background: var(--c-cyan); transform: scaleY(0); transition: transform .5s var(--ease-out); }
.x-view__n { grid-row: span 3; padding-inline-start: .75rem; padding-block-start: .35rem; font: 500 .75rem/1 var(--font-sans); color: var(--c-cyan-ink); }
.x-view__d { font: 600 .6875rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); }
.x-view__t { font: 300 clamp(1.5rem, 1.2rem + 1vw, 2.2rem)/1.15 var(--font-serif); color: var(--c-ink); transition: color .3s; }
.x-view__o { font-size: .9375rem; color: var(--c-ink-2); }
.x-view:hover::before, .x-view:focus-visible::before, .x-view.is-active::before { transform: scaleY(1); }
.x-view:hover .x-view__t, .x-view:focus-visible .x-view__t, .x-view.is-active .x-view__t { color: var(--c-indigo); }
.x-synth__note { max-inline-size: 44rem; margin-block-start: 2.5rem; font: 300 clamp(1.2rem, 1.05rem + .5vw, 1.5rem)/1.45 var(--font-serif); color: var(--c-ink); }
@media (max-width: 1023px) {
  .x-synth__grid { grid-template-columns: 1fr; }
  .x-synth__dial { max-inline-size: 22rem; }
}
@media (max-width: 639px) { .x-synth__dial .dial__labels { display: none; } .x-synth__dial { max-inline-size: 17rem; } }

/* =========================================================
   04 · CHECK-UP 360° BRIDGE  ·  05 · WHICH ASSESSMENT
   ========================================================= */
.x-360 { padding-block: clamp(5rem, 3.5rem + 5vw, 8.5rem); background: var(--c-cream); }
.x-360__grid, .x-ask__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem clamp(2.5rem, 6vw, 7rem); align-items: start; }
.x-360__grid > div:first-child, .x-ask__grid > div:first-child { display: grid; gap: 1.5rem; }
.x-360 h2 em, .x-ask h2 em { color: var(--c-indigo); }
.x-360__body { display: grid; gap: 1.5rem; justify-items: start; }
.x-360__body > p:first-child { font: 300 clamp(1.25rem, 1.08rem + .6vw, 1.6rem)/1.45 var(--font-serif); color: var(--c-ink); }
.x-360__flow { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; padding-block: 1rem; border-block: 1px solid var(--c-rule); inline-size: 100%; font-size: .9375rem; color: var(--c-ink); }
.x-360__flow span { font: 600 .6875rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-cyan-ink); }

.x-ask { padding-block: var(--section); background: var(--c-paper); }
.x-ask__body { display: grid; gap: 1.75rem; justify-items: start; }
.x-ask__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.x-ask__call { font-size: .9375rem; color: var(--c-ink-2); }
.x-ask__call a { color: var(--c-indigo); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 1023px) { .x-360__grid, .x-ask__grid { grid-template-columns: 1fr; } }
@media (max-width: 559px) { .x-ask__actions .btn { inline-size: 100%; justify-content: space-between; } }