/* ============================================================================
   Industry pages — loaded only by includes/industry-page.php, after theme.css
   and pages.css.

   Same rules as the template: colour through tokens, DARK is the base and
   [data-theme="light"] overrides it, and .section--dark stays dark in both
   themes. Every class is prefixed ind- so nothing here can reach another page.
   ========================================================================== */

.ind-top, .ind-sec{ --ind-acc: var(--cyan); --ind-acc-soft: rgba(24,198,220,.12); }
[data-theme="light"] .ind-top,
[data-theme="light"] .ind-sec:not(.section--dark){ --ind-acc: var(--blue); --ind-acc-soft: rgba(11,103,201,.08); }

/* ---------- hero ---------- */
.ind-hero-grid{ align-items: center; }
.ind-reviewed{ margin: 14px 0 0; font-size: 11.5px; color: #8fb2cf; letter-spacing: .2px; }
.ind-snap{
  background: rgba(4,20,42,.72); border: 1px solid rgba(120,200,240,.22); border-radius: 14px;
  padding: 20px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.30); backdrop-filter: blur(10px);
}
.ind-snap-k{ margin: 0 0 12px; color: var(--orange); font-size: 10.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.ind-snap dl{ margin: 0; display: grid; gap: 0; }
.ind-snap dl > div{ display: grid; grid-template-columns: minmax(96px, 36%) 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(120,200,240,.14); }
.ind-snap dl > div:first-child{ border-top: 0; padding-top: 0; }
.ind-snap dt{ color: #8fb2cf; font-size: 12px; }
.ind-snap dd{ margin: 0; color: #eaf4ff; font-size: 13px; line-height: 1.5; font-weight: 600; }
.ind-snap dd strong{ color: var(--cyan); }

/* ---------- short answer + contents ---------- */
.ind-top{ padding-bottom: 8px; }
.ind-answer{
  position: relative; border: 1px solid var(--line); border-left: 4px solid var(--ind-acc);
  background: var(--surface); border-radius: 10px; padding: 22px 26px; max-width: 980px;
  box-shadow: var(--shadow-md);
}
.ind-answer-k{ margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--ind-acc); }
.ind-answer p:last-child{ font-size: 16.5px; line-height: 1.7; color: var(--ink); margin: 0; }
.ind-toc{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px;
  position: sticky; top: calc(var(--header-h, 76px) + 6px); z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
  padding: 8px 0;
}
.ind-toc span{ flex: none; white-space: nowrap; font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.ind-toc a{ border: 1px solid var(--line); border-radius: 30px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--surface); }
.ind-toc a:hover{ border-color: var(--ind-acc); color: var(--ind-acc); }
@media (max-width: 820px){ .ind-toc{ position: static; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .ind-toc a{ flex: none; } }

.ind-note{ font-size: 13px; color: var(--muted); max-width: 90ch; margin-top: 16px; }
.ind-cite{ font-size: .78em; font-weight: 700; color: var(--ind-acc); vertical-align: super; line-height: 0; margin-left: 2px; }
.section--dark .ind-cite{ color: var(--cyan); }

/* ---------- section eyebrows ----------
   The shared section head prints its eyebrow as plain body text; on these long
   pages it is a navigation cue, so it gets the label treatment the hero uses.
   Base (dark theme) is the brand orange; light theme takes a deeper amber for
   contrast on white. */
.ind-sec .section-head .eyebrow,
.ind-prose .eyebrow{
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--orange);
}
.ind-sec .section-head .eyebrow::before,
.ind-prose .eyebrow::before{ content: ""; width: 18px; height: 2px; background: var(--orange); }
[data-theme="light"] .ind-sec:not(.section--dark) .section-head .eyebrow,
[data-theme="light"] .ind-sec:not(.section--dark) .ind-prose .eyebrow{ color: #b35f00; }
.ind-sec .section-head{ margin-bottom: 26px; }
.ind-sec .section-head > p:not(.eyebrow){ color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 76ch; }

/* ---------- prose ---------- */
.ind-prose{ display: grid; gap: 40px; }
.ind-prose--aside{ grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); align-items: start; }
.ind-prose .prose{ max-width: none; }
.ind-prose .prose p{ font-size: 15.5px; line-height: 1.8; color: var(--muted); max-width: 72ch; }
/* The eyebrow is a <p> too and must not inherit the body size. */
.ind-prose .prose p.eyebrow{ font-size: 10.5px; line-height: 1.4; max-width: none; }
.ind-prose .prose > .eyebrow + h2{ margin-top: 6px; }
.ind-prose .prose p strong{ color: var(--ink); }
.section--dark .ind-prose .prose p{ color: #a9bfd6; }
.section--dark .ind-prose .prose p strong{ color: #fff; }
.ind-aside{ border: 1px solid var(--line); border-top: 3px solid var(--orange); background: var(--surface); border-radius: 10px; padding: 22px; position: sticky; top: calc(var(--header-h, 76px) + 70px); }
.ind-aside-k{ font-size: 10.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--orange); margin: 0 0 10px; }
.ind-aside p{ font-size: 14px; line-height: 1.7; color: var(--muted); }
.ind-aside p strong{ color: var(--ink); }
.section--dark .ind-aside{ background: rgba(255,255,255,.04); border-color: rgba(120,200,240,.18); }
@media (max-width: 900px){ .ind-prose--aside{ grid-template-columns: 1fr; } .ind-aside{ position: static; } }

/* ---------- stats ---------- */
.ind-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.ind-stat{ border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 22px 20px; }
.ind-stat b{ display: block; font-family: "Space Grotesk", sans-serif; font-size: clamp(28px, 3vw, 38px); line-height: 1; letter-spacing: -1px; color: var(--ind-acc); margin-bottom: 10px; }
.ind-stat span{ font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.section--dark .ind-stat{ background: rgba(255,255,255,.04); border-color: rgba(120,200,240,.18); }
.section--dark .ind-stat b{ color: var(--cyan); }
.section--dark .ind-stat span{ color: #a9bfd6; }

/* ---------- attack scenarios ---------- */
.ind-scen-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.ind-scen{ position: relative; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 24px 22px 20px; display: flex; flex-direction: column; }
.ind-scen-n{ position: absolute; top: 18px; right: 20px; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 13px; color: var(--muted); opacity: .6; }
.ind-scen h3{ font-size: 1.02rem; margin: 0 26px 14px 0; }
.ind-chain{ display: grid; gap: 0; margin: 0 0 12px; flex: 1; }
.ind-chain li{ position: relative; padding: 0 0 12px 22px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.ind-chain li::before{ content: ""; position: absolute; left: 4px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--ind-acc); }
.ind-chain li::after{ content: ""; position: absolute; left: 7.5px; top: 18px; bottom: 2px; width: 1px; background: var(--line); }
.ind-chain li:last-child::before{ background: #e0452f; }
.ind-chain li:last-child::after{ display: none; }
.ind-chain span{ display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink); margin-bottom: 2px; }
.ind-scen-test{ margin: 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.ind-scen-test b{ color: var(--ind-acc); }
.section--dark .ind-scen{ background: rgba(255,255,255,.04); border-color: rgba(120,200,240,.18); }
.section--dark .ind-chain li, .section--dark .ind-scen-test{ color: #a9bfd6; }
.section--dark .ind-chain span, .section--dark .ind-scen h3{ color: #fff; }

/* ---------- timeline ---------- */
.ind-timeline{ position: relative; display: grid; gap: 0; max-width: 940px; }
.ind-timeline::before{ content: ""; position: absolute; left: 150px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.ind-timeline li{ position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 34px; padding: 0 0 26px; }
.ind-timeline li::before{ content: ""; position: absolute; left: 144px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--muted); }
.ind-timeline li.is-now::before{ border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 5px rgba(255,173,24,.2); }
.ind-timeline li.is-next::before{ border-color: var(--ind-acc); border-style: dashed; }
.ind-tl-when{ font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 14px; color: var(--ind-acc); text-align: right; padding-top: 1px; }
.ind-timeline h3{ font-size: 1rem; margin: 0 0 6px; }
.ind-timeline p{ font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0; }
.ind-tag{ display: inline-block; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; background: rgba(255,173,24,.16); color: var(--orange); vertical-align: middle; margin-left: 6px; }
[data-theme="light"] .ind-sec:not(.section--dark) .ind-tag:not(.ind-tag--next){ color: #9a5b00; }
.ind-tag--next{ background: var(--ind-acc-soft); color: var(--ind-acc); }
@media (max-width: 700px){
  .ind-timeline::before{ left: 6px; }
  .ind-timeline li{ grid-template-columns: 1fr; gap: 4px; padding-left: 30px; }
  .ind-timeline li::before{ left: 0; }
  .ind-tl-when{ text-align: left; }
}

/* ---------- incident clock ---------- */
.ind-clock{ display: grid; gap: 12px; max-width: 1000px; }
.ind-clock li{ display: grid; grid-template-columns: 116px 1fr; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.ind-clock-t{ display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px 10px;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 15px; line-height: 1.2;
  background: linear-gradient(160deg, var(--navy2), var(--navy)); color: #fff; }
.ind-clock-b{ padding: 16px 22px; }
.ind-clock-b h3{ font-size: 1rem; margin: 0 0 6px; }
.ind-clock-b p{ font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0; }
.ind-clock-b .ind-duty{ margin-top: 10px; display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--orange); background: rgba(255,173,24,.14); border: 1px solid rgba(255,173,24,.35); border-radius: 6px; padding: 5px 10px; }
[data-theme="light"] .ind-sec:not(.section--dark) .ind-clock-b .ind-duty{ color: #8a5200; }
.section--dark .ind-clock li{ background: rgba(255,255,255,.04); border-color: rgba(120,200,240,.18); }
.section--dark .ind-clock-b p{ color: #a9bfd6; }
.section--dark .ind-clock-b h3{ color: #fff; }
@media (max-width: 640px){ .ind-clock li{ grid-template-columns: 1fr; } .ind-clock-t{ justify-content: flex-start; padding: 10px 18px; } }

/* ---------- tables (matrix, compare) ---------- */
.ind-table-wrap{ overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ind-table-wrap:focus-visible{ outline-offset: 2px; }
.ind-table{ width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.ind-table th, .ind-table td{ padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.55; }
.ind-table thead th{ font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.ind-table tbody th{ font-weight: 700; color: var(--ink); min-width: 170px; position: sticky; left: 0; background: var(--surface); }
.ind-table td{ color: var(--muted); }
.ind-table td strong{ color: var(--ink); }
.ind-table tbody tr:last-child > *{ border-bottom: 0; }
.ind-table td.is-yes{ color: #1f9d55; font-weight: 800; font-size: 16px; text-align: center; }
.ind-table td.is-no{ color: var(--muted); text-align: center; opacity: .6; }
.section--dark .ind-table-wrap, .section--dark .ind-table tbody th{ background: #071a33; border-color: rgba(120,200,240,.18); }
.section--dark .ind-table thead th{ background: #0a2344; color: #a9bfd6; }
.section--dark .ind-table th, .section--dark .ind-table td{ border-color: rgba(120,200,240,.14); }
.section--dark .ind-table td{ color: #a9bfd6; }
.section--dark .ind-table tbody th, .section--dark .ind-table td strong{ color: #fff; }

/* ---------- checklist ---------- */
.ind-check{ display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 26px; align-items: start; }
.ind-check-list{ display: grid; gap: 10px; }
.ind-check-list li{ position: relative; }
.ind-check-list input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.ind-check-list label{ display: block; cursor: pointer; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 14px 16px 14px 52px; transition: border-color .2s var(--ease), background .2s var(--ease); }
.ind-check-list label::before{ content: ""; position: absolute; left: 16px; top: 16px; width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--muted); background: var(--surface); transition: all .2s var(--ease); }
.ind-check-list input:checked + label{ border-color: #1f9d55; background: rgba(31,157,85,.06); }
.ind-check-list input:checked + label::before{ background: #1f9d55; border-color: #1f9d55; box-shadow: inset 0 0 0 3px var(--surface); }
.ind-check-list input:focus-visible + label{ outline: 3px solid var(--orange); outline-offset: 2px; }
.ind-check-list b{ display: block; font-size: 14.5px; color: var(--ink); line-height: 1.45; }
.ind-check-list span{ display: block; font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.ind-check-score{ position: sticky; top: calc(var(--header-h, 76px) + 70px); border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 22px; box-shadow: var(--shadow-md); }
.ind-check-k{ margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); }
.ind-check-n{ margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 44px; font-weight: 700; line-height: 1; color: var(--ink); }
.ind-check-n small{ font-size: 15px; color: var(--muted); font-weight: 600; }
.ind-meter{ height: 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); margin: 14px 0; overflow: hidden; }
.ind-meter i{ display: block; height: 100%; width: 0; background: linear-gradient(90deg, #e0452f, var(--orange), #1f9d55); background-size: 300% 100%; transition: width .35s var(--ease); }
.ind-check-band{ font-weight: 800; color: var(--ink); margin: 0 0 6px; font-size: 15px; }
.ind-check-advice{ font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; }
.ind-check-priv{ font-size: 11.5px; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 900px){ .ind-check{ grid-template-columns: 1fr; } .ind-check-score{ position: static; } }

/* ---------- calculator ---------- */
.ind-calc{ display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: 22px; align-items: stretch; }
.ind-calc-in{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 22px; }
.ind-field{ display: grid; gap: 6px; align-content: start; }
.ind-field span{ font-size: 13px; font-weight: 700; color: var(--ink); }
.ind-field input{ font: inherit; font-size: 16px; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); }
.ind-field input:focus{ outline: 3px solid var(--orange); outline-offset: 1px; }
.ind-field small{ font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.ind-calc-out{ border-radius: 14px; padding: 24px; background: linear-gradient(160deg, var(--navy2), var(--navy)); color: #fff; }
.ind-calc-out .ind-check-k{ color: #8fb2cf; }
.ind-calc-total{ font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(32px, 4vw, 46px); line-height: 1.05; margin: 6px 0 18px; color: var(--orange); }
.ind-calc-break{ margin: 0; display: grid; gap: 8px; }
.ind-calc-break div{ display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(120,200,240,.16); padding-top: 8px; font-size: 13.5px; }
.ind-calc-break dt{ color: #a9bfd6; }
.ind-calc-break dd{ margin: 0; font-weight: 700; color: #fff; }
@media (max-width: 900px){ .ind-calc{ grid-template-columns: 1fr; } }

/* ---------- quiz / decision helper ---------- */
.ind-quiz{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.ind-quiz-q{ display: grid; gap: 12px; }
.ind-quiz fieldset{ border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 16px 18px; margin: 0; }
.ind-quiz legend{ font-weight: 800; font-size: 14.5px; color: var(--ink); padding: 0 4px; }
.ind-quiz label{ display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); padding: 7px 0; cursor: pointer; }
.ind-quiz input{ margin-top: 4px; accent-color: var(--blue); }
.ind-quiz-out{ position: sticky; top: calc(var(--header-h, 76px) + 70px); border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 22px; box-shadow: var(--shadow-md); display: grid; gap: 14px; }
.ind-outcome{ border-top: 1px solid var(--line); padding-top: 14px; }
.ind-outcome h3{ font-size: 1.05rem; margin: 0 0 6px; }
.ind-outcome p{ font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.ind-quiz.is-ready .ind-outcome{ display: none; }
.ind-quiz.is-ready .ind-outcome.is-shown{ display: block; border-top: 0; padding-top: 0; }
@media (max-width: 900px){ .ind-quiz{ grid-template-columns: 1fr; } .ind-quiz-out{ position: static; } }

/* ---------- myths ---------- */
.ind-myths{ display: grid; gap: 12px; }
.ind-myth{ display: grid; grid-template-columns: 1fr 1.25fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.ind-myth p{ margin: 0; padding: 18px 20px; font-size: 14px; line-height: 1.65; }
.ind-myth span{ display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 6px; }
.ind-myth-m{ background: var(--surface-2); color: var(--muted); }
.ind-myth-m span{ color: #d9543f; }
.ind-myth-r{ color: var(--ink); }
.ind-myth-r span{ color: #1f9d55; }
@media (max-width: 760px){ .ind-myth{ grid-template-columns: 1fr; } }

/* ---------- roadmap ---------- */
.ind-roadmap{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ind-roadmap > li{ border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 22px 20px; border-top: 4px solid var(--ind-acc); }
.ind-roadmap > li:nth-child(2){ border-top-color: var(--orange); }
.ind-roadmap > li:nth-child(3){ border-top-color: #1f9d55; }
.ind-roadmap > li:nth-child(4){ border-top-color: #7b5cd6; }
.ind-road-k{ display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ind-roadmap h3{ font-size: 1.02rem; margin: 0 0 12px; }
.ind-roadmap ul{ display: grid; gap: 8px; }
.ind-roadmap ul li{ position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.ind-roadmap ul li::before{ content: "→"; position: absolute; left: 0; color: var(--ind-acc); font-weight: 700; }
.section--dark .ind-roadmap > li{ background: rgba(255,255,255,.04); border-color: rgba(120,200,240,.18); border-top-color: var(--cyan); }
.section--dark .ind-roadmap ul li{ color: #a9bfd6; }
.section--dark .ind-roadmap h3{ color: #fff; }

/* ---------- personas ---------- */
.ind-personas{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ind-persona{ border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 22px 20px; }
.ind-persona h3{ font-size: 1.05rem; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ind-persona dl{ margin: 0; display: grid; gap: 12px; }
.ind-persona dt{ font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ind-acc); margin-bottom: 3px; }
.ind-persona dl div:nth-child(3) dt{ color: #1f9d55; }
.ind-persona dd{ margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* ---------- attack path ---------- */
.ind-path{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; }
.ind-path li{ position: relative; padding: 22px 22px 20px; border: 1px solid var(--line); background: var(--surface); margin-right: -1px; }
.ind-path li:first-child{ border-radius: 12px 0 0 12px; }
.ind-path li:last-child{ border-radius: 0 12px 12px 0; border-color: rgba(224,69,47,.5); background: rgba(224,69,47,.05); }
.ind-path li:not(:last-child)::after{ content: ""; position: absolute; right: -9px; top: 26px; width: 16px; height: 16px; background: var(--surface); border-top: 1px solid var(--line); border-right: 1px solid var(--line); transform: rotate(45deg); z-index: 1; }
.ind-path-n{ display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ind-acc); color: #fff; font-weight: 800; font-size: 12px; margin-bottom: 10px; }
.ind-path li:last-child .ind-path-n{ background: #e0452f; }
.ind-path h3{ font-size: .98rem; margin: 0 0 6px; }
.ind-path p{ font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0; }
.ind-path .ind-path-test{ margin-top: 10px; font-size: 12px; font-weight: 700; color: #1f9d55; }
.ind-path .ind-path-test::before{ content: "✓ "; }
.ind-path-out{ margin-top: 18px; font-size: 14.5px; color: var(--ink); max-width: 90ch; border-left: 3px solid var(--orange); padding-left: 14px; }
.section--dark .ind-path li{ background: rgba(255,255,255,.04); border-color: rgba(120,200,240,.18); }
.section--dark .ind-path li:not(:last-child)::after{ background: #0b2140; border-color: rgba(120,200,240,.18); }
.section--dark .ind-path p{ color: #a9bfd6; }
.section--dark .ind-path h3, .section--dark .ind-path-out{ color: #fff; }
@media (max-width: 900px){
  .ind-path{ grid-template-columns: 1fr; }
  .ind-path li{ margin: 0 0 -1px; border-radius: 0 !important; }
  .ind-path li:first-child{ border-radius: 12px 12px 0 0 !important; }
  .ind-path li:last-child{ border-radius: 0 0 12px 12px !important; }
  .ind-path li:not(:last-child)::after{ right: calc(50% - 8px); top: auto; bottom: -9px; transform: rotate(135deg); }
}

/* ---------- how we help ---------- */
.ind-helps{ display: grid; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.ind-help{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); border-top: 1px solid var(--line); }
.ind-help:first-child{ border-top: 0; }
.ind-help-need{ margin: 0; padding: 20px 22px; font-weight: 700; font-size: 14.5px; line-height: 1.5; color: var(--ink); background: var(--surface-2); }
.ind-help-do{ padding: 18px 22px; }
.ind-help-do p{ font-size: 14px; line-height: 1.65; color: var(--muted); margin: 6px 0 0; }
.ind-help-do .link-arrow{ margin-top: 8px; }
.ind-kind{ display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; }
.ind-kind--service{ background: rgba(255,173,24,.16); color: var(--orange); }
[data-theme="light"] .ind-kind--service{ color: #9a5b00; }
.ind-kind--platform{ background: var(--ind-acc-soft); color: var(--ind-acc); }
@media (max-width: 760px){ .ind-help{ grid-template-columns: 1fr; } .ind-help-need{ padding-bottom: 10px; } }

/* ---------- questions ---------- */
.ind-questions{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; counter-reset: q; }
.ind-questions li{ counter-increment: q; position: relative; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 20px 20px 18px 62px; }
.ind-questions li::before{ content: counter(q, decimal-leading-zero); position: absolute; left: 18px; top: 18px; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 20px; color: var(--ind-acc); }
.ind-questions h3{ font-size: .98rem; margin: 0 0 6px; line-height: 1.45; }
.ind-questions p{ font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ---------- glossary ---------- */
.ind-glossary{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 28px; margin: 0; }
.ind-glossary > div{ padding: 14px 0; border-bottom: 1px solid var(--line); }
.ind-glossary dt{ font-weight: 800; font-size: 14.5px; color: var(--ink); margin-bottom: 4px; }
.ind-glossary dd{ margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* ---------- mid-page call to action ---------- */
.ind-callout{ display: grid; grid-template-columns: minmax(0, 1.6fr) auto; gap: 28px; align-items: center;
  border-radius: 16px; padding: 32px 34px; color: #fff;
  background: radial-gradient(circle at 90% 10%, rgba(24,198,220,.22), transparent 55%), linear-gradient(150deg, var(--navy2), var(--navy)); }
.ind-callout h2{ color: #fff; margin: 6px 0 10px; font-size: clamp(22px, 2.4vw, 30px); }
.ind-callout h2 .accent{ color: var(--cyan); }
.ind-callout p{ color: #a9bfd6; margin: 0; font-size: 15px; line-height: 1.7; max-width: 70ch; }
.ind-callout .eyebrow{ color: var(--orange); font-size: 10.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin: 0; }
.ind-callout-list{ margin-top: 14px; display: grid; gap: 6px; }
.ind-callout-list li{ position: relative; padding-left: 22px; color: #d7e7f6; font-size: 14px; }
.ind-callout-list li::before{ content: "✓"; position: absolute; left: 0; color: var(--cyan); font-weight: 800; }
.ind-callout-act{ display: grid; gap: 10px; justify-items: start; }
.ind-callout-act small{ color: #8fb2cf; font-size: 12px; max-width: 26ch; }
@media (max-width: 820px){ .ind-callout{ grid-template-columns: 1fr; padding: 26px 22px; } }

/* ---------- sources + back link ---------- */
.ind-sources h2{ font-family: "Space Grotesk", sans-serif; font-size: 1.3rem; margin: 0 0 4px; }
.ind-sources ol{ margin-top: 14px; display: grid; gap: 7px; counter-reset: s; }
.ind-sources li{ counter-increment: s; position: relative; padding-left: 34px; font-size: 13px; line-height: 1.55; color: var(--muted); scroll-margin-top: 140px; }
.ind-sources li::before{ content: "[" counter(s) "]"; position: absolute; left: 0; font-weight: 700; color: var(--ind-acc); }
.ind-sources li:target{ background: rgba(255,173,24,.14); border-radius: 4px; }
.ind-sources a{ color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.ind-sources a:hover{ text-decoration-color: currentColor; }
.ind-back{ margin-top: 26px; }
.ind-sources + .related{ margin-top: 40px; }

@media print{
  .ind-toc, .ind-callout, .cta-band{ display: none !important; }
}

/* Inline links inside body copy (written as [label](/slug) in the data). They
   inherit muted body colour otherwise and stop looking like links. */
.ind-prose .prose p a, .ind-aside p a, .ind-scen-test a, .ind-chain a, .ind-help-do p a,
.ind-questions p a, .ind-myth a, .ind-table a, .ind-clock-b a, .ind-roadmap a,
.ind-timeline p a, .ind-persona dd a, .ind-path p a, .ind-glossary dd a, .ind-check-list a,
.ind-outcome p a, .ind-answer a, .ind-sec .faq .a a{
  color: var(--ind-acc); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.section--dark .ind-prose .prose p a, .section--dark .ind-table a{ color: var(--cyan); }