/* =========================================================================
   KRAGOS BRAND-1 , STRUCTURE STYLESHEET, candidate B "CONSOLE".
   BRAND-STONE-3, RULING 4: the ONE permitted template edit. Display-font
   headings (h1-h4, .panel__t, .card__name, .ladder__item-name, .ind__t,
   .sheet__nm, .stagerung__sub, .mcol__head) now read font-weight from
   --fw-heading, set to 500 in the token block. Nothing else moved: UI labels
   (.btn, .eyebrow, .field>span, .linkrow, .ptable th, current nav link,
   .logoslot) keep --fw-strong 600. The fallback keeps 600 if no token file.
   Copied verbatim from SITE-V3-DESIGN-1 with ONE change: the :root token
   block has been lifted out into svg/<D>/tokens.css so a direction can be
   swapped without touching a single rule below. No layout rule was edited.
   ========================================================================= */

/* :root lives in svg/<D>/tokens.css. It is linked BEFORE this file so the
   [data-c="B"] adjustments below still win on equal specificity. */

/* candidate-level token adjustments (structure differs, tokens still rule) */
[data-c="A"] { --wrap: 760px;  --fs-hero: 2.75rem; }
[data-c="B"] { --wrap: 1040px; --fs-hero: 2.875rem; }
[data-c="C"] { --wrap: 1240px; --fs-hero: 4rem; --fs-h1: 3rem; --fs-h2: 2.25rem; --tr-tight: -0.03em; }

@media (min-width: 900px) {
  :root { --fs-h1: 3rem; --fs-h2: 2rem; --fs-hero: 3.5rem; }
  [data-c="A"] { --fs-hero: 3.25rem; }
  [data-c="C"] { --fs-hero: 5.25rem; --fs-h1: 4rem; --fs-h2: 2.75rem; }
}

/* ---- reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: var(--fw-heading, 600); letter-spacing: var(--tr-tight); line-height: var(--lh-tight); margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-ink); color: var(--c-inverse-ink);
  padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ---- layout primitives --------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); }
@media (min-width: 700px) { .wrap { padding-inline: var(--sp-6); } }
.section { padding-block: var(--sp-8); }
.section + .section { border-top: 1px solid var(--c-line-2); }
@media (min-width: 900px) { .section { padding-block: var(--sp-9); } }
[data-c="C"] .section { padding-block: var(--sp-9); }
@media (min-width: 900px) { [data-c="C"] .section { padding-block: var(--sp-10); } }

.eyebrow {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tr-wide);
  color: var(--c-ink-3); font-weight: 600; margin-bottom: var(--sp-4);
}
.lead { font-size: var(--fs-lead); color: var(--c-ink-2); max-width: var(--measure); }
.muted { color: var(--c-ink-3); }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.rule { height: 1px; background: var(--c-line-2); border: 0; margin: 0; }

/* ---- logo slot (marked empty placeholder) --------------------------- */
.logoslot {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  border: 1px dashed var(--c-line); border-radius: var(--r-sm);
  padding: 6px 10px; background: transparent;
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.14em; font-size: var(--fs-small);
  color: var(--c-ink); line-height: 1;
}
.logoslot::after {
  content: "logo slot"; font-family: var(--font-sans); font-weight: 500;
  letter-spacing: 0; font-size: 9px; color: var(--c-ink-4);
  border-left: 1px solid var(--c-line-2); padding-left: var(--sp-2);
}
.logoslot--mark {
  width: 56px; height: 56px; justify-content: center; padding: 0;
  border-radius: var(--r-md); letter-spacing: 0.06em; font-size: var(--fs-small);
}
.logoslot--mark::after { content: none; }

/* ---- buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 12px 20px; border-radius: var(--r-sm);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid transparent; cursor: pointer; background: none;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.btn--primary { background: var(--c-ink); color: var(--c-inverse-ink); }
.btn--primary:hover { background: var(--accent); transform: translateY(var(--lift)); box-shadow: var(--sh-3); }
.btn--ghost { border-color: var(--c-line); color: var(--c-ink); background: var(--c-surface); }
.btn--ghost:hover { border-color: var(--c-ink); transform: translateY(var(--lift)); box-shadow: var(--sh-2); }
.btn--quiet { padding-inline: 0; color: var(--accent); }
.btn--quiet:hover { color: var(--c-ink); }
.btn[disabled], .btn--inert { cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.arrow { transition: transform var(--dur-1) var(--ease-out); }
.btn:hover .arrow, .linkrow:hover .arrow { transform: translateX(3px); }
.linkrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); font-weight: 600; color: var(--accent); }

/* ---- header / nav -------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--c-line-2);
}
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 64px; }
.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.nav__link {
  display: block; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: var(--fs-small); font-weight: 500; color: var(--c-ink-2);
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.nav__link:hover { color: var(--c-ink); background: var(--c-bg-2); }
.nav__link[aria-current="page"] { color: var(--c-ink); font-weight: 600; }
.nav__signin { margin-left: var(--sp-3); border: 1px solid var(--c-line); }
.nav__signin:hover { border-color: var(--c-ink); }
.navtoggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--c-line); background: var(--c-surface);
  border-radius: var(--r-sm); padding: 8px 12px; font-size: var(--fs-small); font-weight: 600; cursor: pointer;
}
.navtoggle__bars { display: grid; gap: 3px; }
.navtoggle__bars i { display: block; width: 16px; height: 1.5px; background: var(--c-ink); transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out); }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

.navdrawer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-2) var(--ease-inout);
  border-top: 0 solid var(--c-line-2);
}
.navdrawer > div { overflow: hidden; }
.navdrawer.is-open { grid-template-rows: 1fr; border-top-width: 1px; }
.navdrawer .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--sp-3); }
.navdrawer .nav__link { padding: 12px 4px; border-bottom: 1px solid var(--c-line-2); border-radius: 0; }
.navdrawer .nav__signin { margin: var(--sp-3) 0 0; border-radius: var(--r-sm); text-align: center; }

@media (min-width: 1040px) {
  .nav { display: block; }
  .navtoggle { display: none; }
  .navdrawer { display: none; }
}

/* ---- footer -------------------------------------------------------- */
.ftr { background: var(--c-inverse-bg); color: var(--c-inverse-ink-2); padding-block: var(--sp-7); margin-top: var(--sp-8); }
.ftr__in { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5); align-items: center; justify-content: space-between; }
.ftr .logoslot { border-color: var(--c-inverse-line); color: var(--c-inverse-ink); }
.ftr .logoslot::after { color: var(--c-inverse-ink-3); border-left-color: var(--c-inverse-line); }
.ftr__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-small); }
.ftr__meta a { color: var(--c-inverse-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-inverse-rule); }
.ftr__meta a:hover { text-decoration-color: currentColor; }
.ftr__note { font-size: var(--fs-micro); color: var(--c-inverse-ink-3); width: 100%; margin-top: var(--sp-3); }

/* ---- persistent bubble --------------------------------------------- */
.bubble { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
@media (min-width: 700px) { .bubble { right: var(--sp-6); bottom: var(--sp-6); } }
.bubble__card {
  max-width: 268px; background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: var(--sh-4); padding: var(--sp-4);
  font-size: var(--fs-small); color: var(--c-ink-2); line-height: 1.5;
  opacity: 0; transform: translateY(8px) scale(.97); transform-origin: bottom right;
  pointer-events: none; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-settle);
}
.bubble.is-open .bubble__card, .bubble:hover .bubble__card, .bubble:focus-within .bubble__card {
  opacity: 1; transform: none; pointer-events: auto;
}
.bubble__pill {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--c-ink); color: var(--c-inverse-ink);
  border: 0; border-radius: var(--r-pill); padding: 12px 18px;
  font-size: var(--fs-small); font-weight: 600; cursor: pointer; box-shadow: var(--sh-3);
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.bubble__pill:hover { background: var(--accent); transform: translateY(var(--lift)); }
.bubble__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-inverse-ink); flex: none; }
/* the breathe is a box-shadow ring: it never inflates the pill's own scroll box */
.bubble__pill { animation: breathe 4.4s var(--ease-inout) infinite; }
@keyframes breathe {
  0%   { box-shadow: var(--sh-3), 0 0 0 0   color-mix(in srgb, var(--c-ink) 26%, transparent); }
  70%  { box-shadow: var(--sh-3), 0 0 0 14px color-mix(in srgb, var(--c-ink) 0%, transparent); }
  100% { box-shadow: var(--sh-3), 0 0 0 0   color-mix(in srgb, var(--c-ink) 0%, transparent); }
}
.bubble__label { white-space: nowrap; }
@media (max-width: 699px) {
  .bubble__pill { padding: 14px; }
  .bubble__label { display: none; }
  .bubble.is-open .bubble__label { display: inline; }
  .bubble.is-open .bubble__pill { padding: 12px 18px; }
}

/* ---- hero ---------------------------------------------------------- */
.hero { padding-block: var(--sp-8) var(--sp-8); }
@media (min-width: 900px) { .hero { padding-block: var(--sp-9) var(--sp-9); } }
.hero__h1 { font-size: var(--fs-hero); max-width: 18ch; }
.hero__sub { margin-top: var(--sp-5); font-size: var(--fs-lead); color: var(--c-ink-2); max-width: 56ch; }
.hero__btns { margin-top: var(--sp-6); }
.hero__meta { margin-top: var(--sp-7); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--c-ink-4); }

[data-c="A"] .hero { text-align: center; }
[data-c="A"] .hero__h1, [data-c="A"] .hero__sub { margin-inline: auto; }
[data-c="A"] .hero__btns, [data-c="A"] .hero__meta { justify-content: center; }
[data-c="A"] .wrap--col { max-width: var(--wrap); }
[data-c="A"] .section > .wrap > .stack-lg { text-align: left; }

[data-c="C"] .hero { padding-block: var(--sp-10) var(--sp-9); }
[data-c="C"] .hero__h1 { max-width: 15ch; line-height: 1.02; }
[data-c="C"] .hero__sub { font-size: 1.25rem; max-width: 44ch; }

/* ---- section head -------------------------------------------------- */
.shead { max-width: var(--measure); }
.shead__h2 { font-size: var(--fs-h2); }
.shead__note { margin-top: var(--sp-3); color: var(--c-ink-3); }
[data-c="C"] .shead__h2 { max-width: 16ch; }

/* =========================================================================
   EXPANDABLE PANELS (story panels + capability "Does" panels)
   Collapsed by default: title visible, body reveals on click.
   ========================================================================= */
.panels { border-top: 1px solid var(--c-line); }
.panel { border-bottom: 1px solid var(--c-line); }
.panel__btn {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: var(--sp-5) 0; color: inherit;
  transition: color var(--dur-1) var(--ease-out);
}
.panel__btn:hover { color: var(--accent); }
.panel__n { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--c-ink-4); padding-top: 6px; flex: none; letter-spacing: .06em; }
.panel__t { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-heading, 600); letter-spacing: var(--tr-tight); line-height: var(--lh-snug); flex: 1; }
.panel__sign { flex: none; width: 22px; height: 22px; margin-top: 5px; position: relative; }
.panel__sign::before, .panel__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--c-ink-3);
  transition: transform var(--dur-2) var(--ease-settle), background var(--dur-1) var(--ease-out);
}
.panel__sign::before { width: 13px; height: 1.5px; transform: translate(-50%,-50%); }
.panel__sign::after  { width: 1.5px; height: 13px; transform: translate(-50%,-50%); }
.panel.is-open .panel__sign::after { transform: translate(-50%,-50%) rotate(90deg) scaleX(0); }
.panel.is-open .panel__sign::before { background: var(--accent); }
.panel__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-inout); }
.panel__body > div { overflow: hidden; }
.panel.is-open .panel__body { grid-template-rows: 1fr; }
.panel__inner { padding-bottom: var(--sp-6); max-width: var(--measure); color: var(--c-ink-2); }

/* A , LEDGER: bodies arrive as a stacked card that slides up and settles */
[data-c="A"] .panel__inner {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: var(--sp-5); margin-bottom: var(--sp-5); box-shadow: var(--sh-1);
  opacity: 0; transform: translateY(22px) scale(.985);
  transition: opacity var(--dur-2) var(--ease-out) 40ms,
              transform var(--dur-3) var(--ease-settle) 40ms,
              box-shadow var(--dur-3) var(--ease-out) 40ms;
}
[data-c="A"] .panel.is-open .panel__inner { opacity: 1; transform: none; box-shadow: var(--sh-3); }

/* B , CONSOLE: two columns, titles left, body right on expand */
@media (min-width: 860px) {
  [data-c="B"] .panel { display: grid; grid-template-columns: minmax(0,40ch) 1fr; column-gap: var(--sp-6); align-items: start; }
  [data-c="B"] .panel__btn { padding-right: var(--sp-4); }
  [data-c="B"] .panel__body { align-self: stretch; }
  [data-c="B"] .panel__inner { padding-top: var(--sp-5); border-left: 2px solid var(--c-line-2); padding-left: var(--sp-5); }
}
[data-c="B"] .panel__inner {
  opacity: 0; transform: translateX(-10px);
  transition: opacity var(--dur-2) var(--ease-out) 30ms, transform var(--dur-3) var(--ease-settle) 30ms, border-color var(--dur-3) var(--ease-out);
}
[data-c="B"] .panel.is-open .panel__inner { opacity: 1; transform: none; border-left-color: var(--accent); }
[data-c="B"] .panel.is-open { background: linear-gradient(90deg, var(--c-bg-2), transparent 42%); }

/* C , STAGE: expand in place with a depth reveal */
[data-c="C"] .panel__t { font-size: var(--fs-h2); max-width: 20ch; }
[data-c="C"] .panel__btn { padding-block: var(--sp-6); }
[data-c="C"] .panel__inner {
  font-size: var(--fs-lead); max-width: 62ch;
  opacity: 0; transform: translateY(30px) scale(.965); transform-origin: top left;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-settle);
}
[data-c="C"] .panel.is-open .panel__inner { opacity: 1; transform: none; }
[data-c="C"] .panel { transition: background var(--dur-3) var(--ease-out); }
[data-c="C"] .panel.is-open { background: var(--c-surface); }

/* on mobile the collapsed secondary blocks read as one accordion list,
   not four near-empty full-height sections */
@media (max-width: 767px) {
  .section--mcol { padding-block: 0; }
  .section--mcol + .section--mcol { border-top: 0; }
  .section:not(.section--mcol) + .section--mcol { padding-top: var(--sp-6); }
  .section--mcol:last-of-type { padding-bottom: var(--sp-7); }
}

/* mobile-collapsed secondary blocks */
.mcol > .mcol__head { display: none; }
@media (max-width: 767px) {
  .mcol > .mcol__head {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: 0; border-bottom: 1px solid var(--c-line); cursor: pointer;
    padding: var(--sp-4) 0; text-align: left; font-family: var(--font-display);
    font-weight: var(--fw-heading, 600); font-size: var(--fs-h4); letter-spacing: var(--tr-tight); color: inherit;
  }
  .mcol > .mcol__head .panel__sign { margin: 0; }
  .mcol > .mcol__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-inout); }
  .mcol > .mcol__body > div { overflow: hidden; }
  .mcol.is-open > .mcol__body { grid-template-rows: 1fr; }
  .mcol > .mcol__body .mcol__pad { padding-block: var(--sp-5); }
  .mcol > h2, .mcol > .shead { display: none; }
}

/* =========================================================================
   LADDER , one order, three structures
   ========================================================================= */
.ladder__item-name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-heading, 600); letter-spacing: var(--tr-tight); }
.ladder__item-sub { color: var(--c-ink); font-weight: 600; margin-top: var(--sp-1); }
.ladder__item-body { color: var(--c-ink-2); margin-top: var(--sp-3); max-width: var(--measure); }

/* A , vertical four-step rail with a moving progress line */
.rail { position: relative; padding-left: 44px; }
.rail::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--c-line); border-radius: 2px; }
.rail__progress {
  position: absolute; left: 11px; top: 6px; width: 2px; height: 0; background: var(--accent);
  border-radius: 2px; transition: height var(--dur-2) linear;
}
.rail__step { position: relative; padding-block: var(--sp-6); }
.rail__step + .rail__step { border-top: 1px solid var(--c-line-2); }
.rail__dot {
  position: absolute; left: -44px; top: calc(var(--sp-6) + 4px);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-bg); border: 2px solid var(--c-line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--c-ink-4);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-settle);
}
.rail__step.is-live .rail__dot { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); transform: scale(1.14); }
.rail__step a.rail__link { display: block; color: inherit; }
.rail__step a.rail__link:hover .ladder__item-name { color: var(--accent); }

/* B , horizontal four-tile band, hover-lift, tab-like expansion */
.band { display: grid; gap: var(--sp-3); }
@media (min-width: 760px) { .band { grid-template-columns: repeat(4, 1fr); } }
.band__tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
  text-align: left; background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: var(--sp-5); cursor: pointer; width: 100%;
  transition: transform var(--dur-2) var(--ease-settle), box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.band__tile:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: var(--c-ink-4); }
.band__tile[aria-selected="true"] { border-color: var(--c-ink); background: var(--c-surface); box-shadow: var(--sh-2); transform: translateY(-2px); }
.band__num { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--c-ink-4); }
.band__detail {
  margin-top: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-surface); box-shadow: var(--sh-2);
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-inout);
}
.band__detail > div { overflow: hidden; }
.band__detail.is-open { grid-template-rows: 1fr; }
.band__detail-inner {
  padding: var(--sp-6); display: grid; gap: var(--sp-4);
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--dur-2) var(--ease-out) 60ms, transform var(--dur-3) var(--ease-settle) 60ms;
}
.band__detail.is-open .band__detail-inner { opacity: 1; transform: none; }
@media (min-width: 760px) {
  .band__detail-inner { grid-template-columns: minmax(0,28ch) 1fr; gap: var(--sp-6); align-items: start; }
}

/* C , four full-bleed bands with pinned titles */
.stagerung { border-top: 1px solid var(--c-line); background: var(--c-bg); }
.stagerung:nth-child(even) { background: var(--c-surface); }
.stagerung__in { display: grid; gap: var(--sp-5); padding-block: var(--sp-8); }
@media (min-width: 900px) {
  .stagerung__in { grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: var(--sp-8); padding-block: var(--sp-9); align-items: start; }
  .stagerung__pin { position: sticky; top: 96px; }
}
.stagerung__name { font-size: clamp(2.25rem, 6vw, 4.25rem); line-height: .98; letter-spacing: var(--tr-tight); }
.stagerung__num { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--c-ink-4); display: block; margin-bottom: var(--sp-3); letter-spacing: .1em; }
.stagerung__sub { font-size: var(--fs-h3); font-family: var(--font-display); font-weight: var(--fw-heading, 600); letter-spacing: var(--tr-tight); }
.stagerung__body { margin-top: var(--sp-4); font-size: var(--fs-lead); color: var(--c-ink-2); max-width: 54ch; }
.stagerung__cta { margin-top: var(--sp-5); }
/* Reveals are visible by default. JS adds .js-reveal to <html> before paint and
   only then are they staged, so nothing is ever invisible without scripting. */
.js-reveal .reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-settle); }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* ---- B: left rail nav on desktop ----------------------------------- */
@media (min-width: 1040px) {
  [data-c="B"] body { padding-left: var(--rail-w); }
  [data-c="B"] .hdr {
    position: fixed; inset: 0 auto 0 0; width: var(--rail-w);
    background: var(--c-surface); border-right: 1px solid var(--c-line); border-bottom: 0;
    backdrop-filter: none; overflow-y: auto;
  }
  [data-c="B"] .hdr__in {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: var(--sp-6); padding: var(--sp-6) var(--sp-5); min-height: 100%;
  }
  [data-c="B"] .hdr__in .wrapless { display: contents; }
  [data-c="B"] .nav { flex: 1; }
  [data-c="B"] .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  [data-c="B"] .nav__link { padding: 9px 10px; }
  [data-c="B"] .nav__signin { margin: var(--sp-4) 0 0; text-align: center; }
  [data-c="B"] .hdr__rail-note { display: block; font-size: var(--fs-micro); color: var(--c-ink-4); letter-spacing: .08em; text-transform: uppercase; }
  [data-c="B"] .hdr__in > .wrap { max-width: none; padding: 0; }
}

/* ---- cards + carousel ---------------------------------------------- */
.cards { display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .cards--2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .cards--3 { grid-template-columns: repeat(3,1fr); } }
.card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
  transition: transform var(--dur-2) var(--ease-settle), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.card--lift:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: var(--c-ink-4); }
.card__name { font-family: var(--font-display); font-weight: var(--fw-heading, 600); font-size: var(--fs-h4); letter-spacing: var(--tr-tight); }
.card__line { font-size: var(--fs-small); color: var(--c-ink-3); }
.card__result { font-size: var(--fs-small); color: var(--c-ink-2); border-top: 1px solid var(--c-line-2); padding-top: var(--sp-3); }
.card__quote { font-size: var(--fs-small); color: var(--c-ink-3); font-style: italic; }

.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr);
  gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-4); scrollbar-width: thin;
}
.carousel__track > * { scroll-snap-align: start; }
@media (min-width: 900px) { .carousel__track { grid-auto-columns: minmax(268px, 1fr); } }
.carousel__ctrls { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.carousel__btn {
  width: 38px; height: 38px; border-radius: var(--r-pill); border: 1px solid var(--c-line);
  background: var(--c-surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.carousel__btn:hover { border-color: var(--c-ink); transform: translateY(-2px); }

/* ---- capability page pieces ---------------------------------------- */
.forlist { display: grid; gap: var(--sp-3); }
.forlist li { display: flex; gap: var(--sp-3); align-items: baseline; color: var(--c-ink-2); }
.forlist li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-2px); }
.prooflist { display: grid; gap: var(--sp-3); }
.prooflist li { border-left: 2px solid var(--accent-line); padding-left: var(--sp-4); color: var(--c-ink-2); }
.steps { display: grid; gap: var(--sp-4); counter-reset: s; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3,1fr); } }
.steps li {
  counter-increment: s; border-top: 2px solid var(--c-line); padding-top: var(--sp-4); color: var(--c-ink-2);
  transition: border-color var(--dur-2) var(--ease-out);
}
.steps li::before {
  content: counter(s); display: block; font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--c-ink-4); margin-bottom: var(--sp-2);
}
.steps li:hover { border-color: var(--accent); }
.ptable { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.ptable th, .ptable td { text-align: left; vertical-align: top; padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; border-bottom: 1px solid var(--c-line-2); }
.ptable th { width: 34%; font-weight: 600; color: var(--c-ink); }
.ptable td { color: var(--c-ink-2); }
.pnote { font-size: var(--fs-small); color: var(--c-ink-3); }

/* ---- forms (visual only, inert) ------------------------------------ */
.form { display: grid; gap: var(--sp-4); max-width: 560px; }
.form--wide { max-width: none; }
@media (min-width: 700px) { .form--2 { grid-template-columns: repeat(2,1fr); } .form--2 .field--full { grid-column: 1 / -1; } }
.field { display: grid; gap: var(--sp-2); }
.field > span { font-size: var(--fs-small); font-weight: 600; color: var(--c-ink-2); }
.field input, .field select, .field textarea {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-sm);
  padding: 11px 12px; font-size: var(--fs-body); width: 100%;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { min-height: 118px; resize: vertical; }
.formnote { font-size: var(--fs-micro); color: var(--c-ink-4); }

/* ---- industries ----------------------------------------------------- */
.indgrid { display: grid; gap: var(--sp-3); }
@media (min-width: 700px) { .indgrid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .indgrid { grid-template-columns: repeat(3,1fr); } }
.ind {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: var(--sp-5); display: grid; align-content: start;
  transition: transform var(--dur-2) var(--ease-settle), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.ind:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--c-ink-4); }
.ind.is-on { border-color: var(--c-ink); box-shadow: var(--sh-2); }
.ind.is-on .ind__t { color: var(--accent); }
.ind__btn {
  display: grid; gap: var(--sp-2); width: 100%; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
}
.ind__t { font-family: var(--font-display); font-weight: var(--fw-heading, 600); letter-spacing: var(--tr-tight); font-size: var(--fs-h4); }
.ind__l { font-size: var(--fs-small); color: var(--c-ink-3); }
.ind__fill { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-inout); }
.ind__fill > div { overflow: hidden; }
.ind.is-on .ind__fill { grid-template-rows: 1fr; }
.ind__fill ul { padding-top: var(--sp-3); display: grid; gap: 6px; font-size: var(--fs-small); color: var(--c-ink-2); }
.ind__fill li::before { content: "· "; color: var(--c-ink-4); }
.brief__rows { display: grid; gap: var(--sp-2); }
.brief__row { display: flex; gap: var(--sp-2); align-items: center; }
.brief__row input { flex: 1; }
.brief__empty { font-size: var(--fs-small); color: var(--c-ink-4); }

/* ---- kragpod -------------------------------------------------------- */
.empty {
  border: 1px dashed var(--c-line); border-radius: var(--r-md); padding: var(--sp-7);
  text-align: center; color: var(--c-ink-3); background: var(--c-surface);
}
.player {
  border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface);
  padding: var(--sp-5); display: grid; gap: var(--sp-4);
}
.player__bar { height: 4px; background: var(--c-line-2); border-radius: 2px; position: relative; }
.player__bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--accent); border-radius: 2px; }
.player__row { display: flex; align-items: center; gap: var(--sp-4); color: var(--c-ink-4); font-size: var(--fs-small); }
.player__pp { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-line); background: var(--c-bg); flex: none; }
.listen { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.listen__slot { border: 1px dashed var(--c-line); border-radius: var(--r-sm); width: 132px; height: 44px; }

/* ---- contact sheet (root) ------------------------------------------ */
.sheet { max-width: 1400px; margin-inline: auto; padding: var(--sp-7) var(--sp-5) var(--sp-9); }
.sheet h1 { font-size: var(--fs-h1); }
.sheet__grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
@media (min-width: 1000px) { .sheet__grid { grid-template-columns: repeat(3,1fr); } }
.sheet__col { border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); overflow: hidden; display: flex; flex-direction: column; }
.sheet__hd { padding: var(--sp-5); border-bottom: 1px solid var(--c-line-2); }
.sheet__key { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--c-ink-4); letter-spacing: .1em; }
.sheet__nm { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-heading, 600); letter-spacing: var(--tr-tight); }
.sheet__tag { font-size: var(--fs-small); color: var(--c-ink-3); margin-top: var(--sp-2); }
.sheet__shot { display: block; border-bottom: 1px solid var(--c-line-2); background: var(--c-bg-2); }
.sheet__shot img { display: block; width: 100%; height: auto; }
.sheet__body { padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.sheet__links { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet__links a {
  font-size: var(--fs-micro); border: 1px solid var(--c-line); border-radius: var(--r-pill);
  padding: 5px 10px; color: var(--c-ink-2); transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.sheet__links a:hover { border-color: var(--c-ink); color: var(--c-ink); }
.sheet__sub { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--c-ink-4); }
.sheet__note { margin-top: var(--sp-7); font-size: var(--fs-small); color: var(--c-ink-3); max-width: 78ch; }

/* ---- reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .panel__inner, .band__detail-inner, .bubble__card, .reveal, .js-reveal .reveal,
  [data-c="A"] .panel__inner, [data-c="B"] .panel__inner, [data-c="C"] .panel__inner {
    opacity: 1 !important; transform: none !important;
  }
  .bubble__card { opacity: 0 !important; }
  .bubble.is-open .bubble__card, .bubble:focus-within .bubble__card { opacity: 1 !important; }
  .card--lift:hover, .band__tile:hover, .ind:hover, .btn:hover, .carousel__btn:hover, .bubble__pill:hover { transform: none !important; }
  .bubble__pill { animation: none !important; box-shadow: var(--sh-3) !important; }
  .carousel__track { scroll-behavior: auto; }
}

/* ---- utilities ------------------------------------------------------ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hdr__rail-note { display: none; }
.hdr .wrap { max-width: 1160px; }
[data-c="C"] .hdr .wrap { max-width: 1240px; }

/* =========================================================================
   THE MARK SLOTS, AS <img>   (Lane SITE-V3-BUILD-1)

   BRAND-HANDOVER §1: every surface REFERENCES the brand source, nothing copies
   it. The ratified design inlined each mark as SVG path data with the fills
   swapped to var(--brand-ink); that path data is byte-identical to
   spine/brand/kragos/stone/svg/, which makes it a copy. Every slot on this site
   is now an <img> against /brand/stone/svg/, the tree sync_brand.py derives.

   Consequence: the token file's slot geometry is written `.brandmark--x svg`,
   so it no longer reaches these marks. The size travels on the <img> width and
   height attributes instead, computed at build time from the token width and
   the mark's own viewBox, which also means every mark reserves its box before
   it paints. What is left here is the two things an attribute cannot express.

   NOTHING BELOW IS A COLOUR. A dark ground takes the source's own -dark twin,
   whose fill is --k-cream, which is what --brand-ink resolves to under .on-dark.

   The two widths are MIRRORED from kragos.stone.tokens.css. prove_site_v3.py
   re-reads that file and reds if either stops matching, so the mirror cannot
   drift in silence.
   ========================================================================= */
.brandmark img { max-width: none; flex: none; }
@media (max-width: 699px)  { .brandmark--rail img    { width: 92px; height: auto; } }
@media (max-width: 1039px) { .brandmark--caplock img { width: 96px; height: auto; } }

/* =========================================================================
   UTILITIES  (Lane SITE-V3-BUILD-1)

   The ratified design carried 32 inline style="" attributes, all of them one
   of seven spacing constants and every value already a token. A strict CSP
   style-src refuses an inline style attribute, so chromium was dropping every
   one of them: measured, one console refusal per attribute per page. Moving
   them here means the policy needs NO inline exception at all, which is
   stronger than adding 'unsafe-inline' would have been. No value changed.
   ========================================================================= */
.u-mt-0 { margin-top: 0; }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-7 { margin-top: var(--sp-7); }
.u-ml-auto { margin-left: auto; }
.u-bleed { max-width: none; padding: 0; }

/* Every table gets a scroll container of its own. The legal pages carry bare
   tables, the Information Regulator's contact block and the sub-processor
   register among them, and at 390 they pushed privacy.html to a 543px
   scrollWidth: the whole page scrolled sideways. The table scrolls now, the
   page does not, and the column layout that makes a register readable is
   kept, which `table{display:block}` would have thrown away. */
.tablewrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablewrap > table { min-width: max-content; }

/* =========================================================================
   THE FREE-TOOL DISCLAIMER, ON EVERY PAGE  (Lane SITE-V3-BUILD-1)

   The ratified design puts <span class="bubble__dis"> carrying the ruled
   free-tool disclaimer inside the calendar bubble on ALL 17 pages, but styles
   it only inside the legal pages' scoped block. On the other ten it was an
   unstyled span, so the ruled line ran into the bubble copy as one paragraph
   instead of sitting apart from it as the ruling intends.

   The bubble is site chrome present on every page, so its rules belong in the
   site stylesheet. Lifted VERBATIM from the design's own block, token for
   token. No value invented, no colour written.
   ========================================================================= */
.bubble__dis { display: block; margin-top: 6px; padding-top: 6px;
               border-top: 1px solid var(--c-line-2); font-size: var(--fs-micro);
               color: var(--c-ink-3); line-height: 1.45; }

/* =========================================================================
   THE LEGAL GRID WITHOUT A TABLE OF CONTENTS  (Lane SITE-V3-BUILD-1)

   legal.css gives .lgl__wrap two columns above 1040px: the sticky TOC, then
   the document. compliance.html is the only one of the six legal pages that
   carries no TOC, so its whole document landed in the 232px TOC column, 180px
   of text in a 1440px window, while terms.html measured 666px on the same run.

   The modifier lives here, not in legal.css, because that sheet is derived
   from the ratified design and refuses a hand edit. Two classes outrank one,
   so this wins on specificity whatever the link order. Geometry only.
   ========================================================================= */
@media (min-width: 1040px) {
  .lgl__wrap.lgl__wrap--solo { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   THE SHORT-PAGE FOOTER  (Lane SITE-V3-BUILD-1)

   The 404 page is the only page on the site whose document is shorter than
   the viewport: measured 900px against a 900px window, with the footer ending
   at 683px and 217px of bare ground below it. Every other page's footer ends
   exactly at the document bottom, so this is the 404's own problem and not the
   design's. The rail is position:sticky, not fixed, so a flex column on the
   body does not disturb it.

   Scoped to the one page that needs it. Geometry only.
   ========================================================================= */
body.is-short { min-height: 100vh; display: flex; flex-direction: column; }
body.is-short > main { flex: 1 0 auto; }
body.is-short > .ftr { flex: 0 0 auto; }

/* The marked-empty Turnstile slot. Reserved geometry, no widget, no key, no script.
   (Lane SITE-V3-BUILD-1) */
.turnstile { border: 1px dashed var(--c-line-2); border-radius: var(--r-sm);
             padding: var(--sp-3) var(--sp-4); background: var(--c-surface); }