/* ═══════════════════════════════════════════════════════════════
   SYSTEMS — the four builds sorted by the constraint they fix,
   and the small dark instruments that show each one working.
   Shared by the homepage section and the four service pages.
   Load after bluecore.css (and bluecore-pages.css on subpages).

   Every instrument is drawn in its FINISHED state by this sheet.
   /assets/systems.js rewinds it and plays it with GSAP only once
   it scrolls into view, so with no script, no GSAP, or reduced
   motion the visitor sees the end of the story, never a blank.
   ═══════════════════════════════════════════════════════════════ */

/* ── The picker in the section head ───────────────────────── */
.sys-pick{display:flex;flex-direction:column;gap:8px}
.sys-opt{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.02em;line-height:1.4;
  color:var(--headline);background:#fff;
  border:1px solid var(--edge-paper);border-radius:2px;padding:12px 14px;
  box-shadow:var(--pill);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),border-color .2s,color .2s,background .2s,box-shadow .22s;
}
.sys-opt::before{
  content:'';width:9px;height:9px;border:1.5px solid currentColor;border-radius:50%;flex-shrink:0;
  transition:background .2s,border-color .2s;
}
.sys-opt:hover{border-color:var(--blue);color:var(--blue)}
.sys-opt[aria-pressed="true"]{
  background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.30), inset 0 -1px 0 rgba(255,255,255,.12);
}
.sys-opt[aria-pressed="true"]::before{background:#fff;border-color:#fff}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .sys-opt:hover{transform:translateY(-2px);box-shadow:var(--pill-hi)}
  .sys-opt[aria-pressed="true"]:hover{transform:none;box-shadow:inset 0 2px 5px rgba(0,0,0,.30)}
}
.sys-verdict{min-height:4.8em}
.sys-verdict b{color:var(--headline);font-weight:600}

/* ── The grid of four ─────────────────────────────────────── */
.sys-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.sys{
  display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid var(--edge-paper);border-radius:var(--r);
  padding:12px 12px 26px;
  box-shadow:var(--bevel-paper), var(--lift-1);
  transition:opacity .45s cubic-bezier(.22,1,.36,1),
             filter .45s cubic-bezier(.22,1,.36,1),
             border-color .3s, box-shadow .3s;
}
.sys-body{display:flex;flex-direction:column;flex:1;padding:24px 14px 0}
.sys-ref{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate-dim);margin-bottom:16px;
}
/* .sys-body > p (below) sets the reading size for the card copy and
   would otherwise outrank this label, which is also a <p>. */
.sys-body > .sys-ref{font-size:10.5px;line-height:1.4;color:var(--slate-dim);margin-bottom:16px}
.sys-k{
  font-size:10px;letter-spacing:.12em;padding:4px 8px;border-radius:2px;
  border:1px solid currentColor;
}
.sys-k--supply{color:var(--green);background:rgba(7,106,71,.06)}
.sys-k--demand{color:var(--blue);background:rgba(0,82,255,.06)}
.sys h3{
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:clamp(20px,1.9vw,24px);line-height:1.14;letter-spacing:-.02em;
  color:var(--headline);margin-bottom:12px;text-wrap:balance;
}
.sys h3 a{color:inherit;transition:color .2s}
.sys h3 a:hover{color:var(--blue)}
.sys-body > p{font-size:15.5px;line-height:1.62;color:var(--graphite);margin-bottom:16px}
.sys-body > p.sys-math{
  margin-top:auto;margin-bottom:20px;
  font-family:var(--mono);font-size:12.5px;line-height:1.6;letter-spacing:.01em;
  color:var(--graphite);background:var(--paper);
  border-left:2px solid var(--blue);border-radius:0 var(--r) var(--r) 0;padding:12px 14px;
}
.sys-math b{color:var(--headline);font-weight:600}
.sys-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sys-link,.sys-try{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue);
  display:inline-flex;align-items:center;gap:8px;transition:gap .22s,color .2s;
}
.sys-link:hover{gap:14px}
.sys-try{color:var(--graphite);border-bottom:1px dashed var(--edge-paper);padding-bottom:2px;text-align:left}
.sys-try:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* The cards also carry .rise, whose transition rule outranks .sys, so the
   reveal and the filter states are both declared here at a weight that
   wins. Dimming is applied to the card's CONTENTS, not the card, so it
   never fights the reveal's own opacity. */
.js .sys.rise{
  transition:opacity .95s cubic-bezier(.22,1,.36,1),
             transform .95s cubic-bezier(.22,1,.36,1),
             border-color .3s, box-shadow .3s;
}
.sys > *{transition:opacity .4s cubic-bezier(.22,1,.36,1), filter .4s cubic-bezier(.22,1,.36,1)}

/* Filtered: the cards that fit move to the front (systems.js) and keep
   running; the rest step back and stop. A dark panel faded over paper
   turns a flat grey that reads as broken, so the instrument only loses
   its colour and stays dark, and the copy is what fades. */
.sys-grid[data-filter] .sys > .sys-body{opacity:.45}
.sys-grid[data-filter] .sys > .viz{filter:grayscale(1) brightness(.8)}
.sys-grid[data-filter="demand"] .sys[data-k="demand"] > *,
.sys-grid[data-filter="supply"] .sys[data-k="supply"] > *{opacity:1;filter:none}
.sys-grid[data-filter="demand"] .sys[data-k="demand"]{
  border-color:var(--blue);
  box-shadow:var(--bevel-paper), var(--lift-2), 0 0 0 1px var(--blue);
}
.sys-grid[data-filter="supply"] .sys[data-k="supply"]{
  border-color:var(--green);
  box-shadow:var(--bevel-paper), var(--lift-2), 0 0 0 1px var(--green);
}

.sys-note{
  margin-top:40px;padding-top:24px;border-top:1px solid var(--edge-paper);
  font-size:15.5px;line-height:1.65;color:var(--graphite);max-width:72ch;
}
.sys-note b{color:var(--headline);font-weight:600}
.sys-fine{
  display:block;margin-top:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-dim);
}

@media(max-width:900px){ .sys-grid{grid-template-columns:1fr} }
@media(max-width:560px){ .sys{padding:8px 8px 22px} .sys-body{padding:20px 10px 0} }

/* ═══ THE INSTRUMENTS ══════════════════════════════════════ */
.viz{
  container-type:inline-size;
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--ink-panel),var(--ink-raised));
  border:1px solid var(--edge-ink);border-radius:var(--r);
  color:var(--slate);font-family:var(--mono);
  --slate-dim:var(--dim-ink);
  box-shadow:
    var(--bevel-ink),
    0 2px 4px rgba(var(--shade),.28),
    0 14px 30px -14px rgba(var(--shade),.42);
}
.vz-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--rule-ink);
  background:rgba(255,255,255,.02);
  font-size:10.5px;letter-spacing:.06em;color:var(--slate-dim);
}
.vz-bar b{color:var(--slate);font-weight:500}
.vz-live{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--live);
}
.vz-body{position:relative;padding:18px 16px;height:262px;overflow:hidden}
.vz-k{
  display:block;font-size:9.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--slate-dim);margin-bottom:8px;
}
.vz-chips{display:flex;gap:6px;flex-wrap:wrap}
.vz-chips span{
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--edge-ink);border-radius:2px;padding:4px 8px;color:var(--slate);
}
.vz-chips .ok{color:var(--live);border-color:rgba(15,185,129,.4);background:rgba(15,185,129,.08)}

/* Play button: a triangle, so it reads as audio without an icon font. */
.vn-play{
  position:relative;width:24px;height:24px;flex-shrink:0;border-radius:2px;
  background:var(--live);
}
.vn-play::after{
  content:'';position:absolute;left:9px;top:7px;
  border-left:8px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent;
}

/* ── 01 · voice note → report ─────────────────────────────── */
.vv{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:16px;align-items:start}
.vn{
  display:flex;align-items:center;gap:10px;
  background:rgba(15,185,129,.08);border:1px solid rgba(15,185,129,.28);
  border-radius:var(--r);padding:9px 11px;
}
.vn-wave{display:flex;align-items:center;gap:2px;height:28px;flex:1;min-width:0}
.vn-wave i{flex:1;height:var(--h,50%);background:rgba(255,255,255,.62);border-radius:1px;transform-origin:center}
.vn-t{font-size:10.5px;color:var(--slate);font-variant-numeric:tabular-nums}
.vz-log{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.vz-log li{font-size:11px;line-height:1.45;color:var(--slate)}
.vz-log li::before{content:'›';color:#5A90FF;margin-right:7px}
.vz-log b{color:#fff;font-weight:500}
.vdoc{
  position:relative;background:#F4F5F8;color:var(--headline);
  border-radius:var(--r);padding:13px 13px 40px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 12px 26px -10px rgba(0,0,0,.65);
}
.vdoc-h{
  display:flex;align-items:center;gap:9px;
  padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid rgba(5,7,14,.12);
}
.vdoc-logo{width:16px;height:16px;flex-shrink:0;background:var(--blue);border-radius:2px}
.vdoc-h b{display:block;font-family:var(--display);font-size:12.5px;font-weight:700;line-height:1.2}
.vdoc-h span{display:block;font-size:9.5px;letter-spacing:.04em;color:#5C6780;margin-top:2px}
.vdoc-row{display:grid;grid-template-columns:56px 1fr;gap:8px;align-items:center;padding:4px 0}
.vdoc-row span{font-size:9.5px;letter-spacing:.04em;color:#5C6780}
.vdoc-row i{display:block;height:6px;width:var(--w,80%);background:#C5CCDB;border-radius:1px;transform-origin:left}
.vdoc-stamp{
  position:absolute;right:11px;bottom:11px;
  font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:var(--blue);background:rgba(0,82,255,.07);
  border:1.5px solid currentColor;border-radius:2px;padding:4px 7px;
  transform:rotate(-4deg);
}
.viz--voice .vz-chips{position:absolute;left:16px;right:16px;bottom:16px}
@container (max-width:470px){
  .vv{grid-template-columns:1fr;gap:12px}
  .vz-log{display:none}
  /* Stacked, the report is taller than the panel's fixed height, so the
     panel grows to fit and the chips drop into the flow under it. */
  .viz--voice .vz-body{height:auto}
  .viz--voice .vz-chips{position:static;margin-top:12px}
}

/* ── 02 · enquiry → paid → booked ─────────────────────────── */
.vz-track{position:relative;padding-left:24px}
.vz-rail{position:absolute;left:5px;top:14px;bottom:14px;width:1px;background:var(--edge-ink)}
.vz-fill{position:absolute;inset:0;background:var(--blue);transform-origin:top}
.vz-steps{display:flex;flex-direction:column}
.vz-steps li{
  position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:baseline;
  padding:8px 0;border-top:1px solid var(--rule-ink);font-size:11.5px;line-height:1.45;
}
.vz-steps li:first-child{border-top:0}
.st-dot{
  position:absolute;left:-24px;top:12px;width:11px;height:11px;border-radius:2px;
  background:var(--blue);border:1.5px solid var(--blue);
}
.vz-steps li:last-child .st-dot{background:var(--live);border-color:var(--live)}
.st-t{color:var(--slate-dim);font-variant-numeric:tabular-nums;font-size:10.5px}
.st-d{color:var(--slate);min-width:0}
.st-d b{color:#fff;font-weight:500}
.vz-steps li:last-child .st-d b{color:var(--live)}
.vz-foot{
  position:absolute;left:16px;right:16px;bottom:14px;
  display:flex;justify-content:space-between;gap:10px;
  padding-top:10px;border-top:1px solid var(--rule-ink);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-dim);
}
.vz-foot b{color:#fff;font-weight:600;font-size:12px;letter-spacing:0}
@container (max-width:470px){ .viz--intake .vz-body{height:292px} }

/* ── 03 · Creator OS ──────────────────────────────────────── */
.vc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;height:100%}
.vc-idea{
  display:flex;flex-direction:column;
  border:1px dashed rgba(255,255,255,.18);border-radius:var(--r);padding:12px;
}
.vc-idea-t{font-family:var(--display);font-size:15px;font-weight:700;line-height:1.25;color:#fff;letter-spacing:-.01em}
.vc-voice{margin-top:auto;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#B69BFF}
.vc-voice .vn-wave{height:18px;margin-bottom:8px}
.vc-voice .vn-wave i{background:rgba(182,155,255,.7)}
.vc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vc-tile{
  position:relative;display:flex;flex-direction:column;gap:6px;
  background:rgba(255,255,255,.035);border:1px solid var(--edge-ink);border-radius:var(--r);
  padding:9px 9px 30px;min-width:0;
}
.vc-k{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.vc-tile i{display:block;height:5px;width:var(--w,80%);background:rgba(255,255,255,.22);border-radius:1px;transform-origin:left}
.vc-frame{
  position:relative;height:38px;border-radius:2px;overflow:hidden;
  background:linear-gradient(135deg,#1B2547,#2A1F4E);display:flex;align-items:center;justify-content:center;
}
.vc-frame .vn-play{width:18px;height:18px;background:#fff}
.vc-frame .vn-play::after{left:7px;top:5px;border-left-width:6px;border-top-width:4px;border-bottom-width:4px}
.vc-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.15)}
.vc-prog span{position:absolute;inset:0;background:#B69BFF;transform-origin:left}
.vc-img{
  height:38px;border-radius:2px;
  background:
    radial-gradient(circle at 72% 35%,rgba(255,255,255,.55) 0 7px,transparent 8px),
    linear-gradient(160deg,#0052FF 0%,#6366F1 55%,#8B5CF6 100%);
}
.vc-ok{
  position:absolute;left:9px;bottom:8px;
  font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--live);
}
.vc-ok::before{content:'✓ '}
@container (max-width:470px){
  .vc{grid-template-columns:1fr;gap:10px}
  .vc-idea{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:10px}
  .vc-idea .vz-k{display:none}
  .vc-idea-t{font-size:13px}
  .vc-voice{margin-top:0;white-space:nowrap}
  .vc-voice .vn-wave{display:none}
  .viz--creator .vz-body{height:300px}
}

/* ── 04 · company brain ───────────────────────────────────── */
.vb-q,.vb-a{border-radius:var(--r);padding:10px 12px}
.vb-q{
  margin-left:auto;max-width:86%;
  background:var(--blue);color:#fff;
}
.vb-q .vz-k{color:rgba(255,255,255,.75)}
.vb-q-t,.vb-a-t{font-family:var(--body);font-size:13px;line-height:1.45;min-height:1.45em}
.vb-src{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.vb-src span{
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--edge-ink);border-radius:2px;padding:4px 8px;color:var(--slate-dim);
}
.vb-src span.hit{color:#fff;border-color:#5A90FF;background:rgba(0,82,255,.22)}
.vb-a{
  max-width:92%;
  background:rgba(255,255,255,.05);border:1px solid var(--rule-ink);color:rgba(255,255,255,.92);
}
.vb-cite{
  display:inline-block;margin-top:8px;
  font-size:9.5px;letter-spacing:.08em;color:#8FB4FF;
  border-bottom:1px solid rgba(143,180,255,.35);
}
@container (max-width:470px){ .viz--brain .vz-body{height:300px} .vb-q,.vb-a{max-width:100%} }

/* ── On a subpage: the instrument as the article's figure ──── */
/* Inside an <article>, bluecore-pages.css styles every ol, ul, li and p
   for reading: counters, dashes, 17.5px type, 20px margins. The
   instruments are not prose, so they opt out here, and the two lists
   that do want a marker get theirs back. */
.sys-figure .viz ol,.sys-figure .viz ul{margin:0;gap:0;font-size:inherit;line-height:inherit;counter-reset:none}
.sys-figure .viz li{padding-left:0}
.sys-figure .viz li::before{content:none}
.sys-figure .viz p{margin:0}
.sys-figure .viz ul.vz-log{margin-top:14px;gap:6px}
.sys-figure .viz .vz-log li::before{
  content:'›';position:static;width:auto;height:auto;background:none;
  color:#5A90FF;margin-right:7px;
}
.sys-figure .viz .vz-foot{line-height:1.4}
.sys-figure{margin:6px 0 40px}
.sys-figure figcaption{
  margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate-dim);
}
.sys-figure .vz-body{height:290px}
@container (max-width:470px){
  .sys-figure .vz-body{height:318px}
  .sys-figure .viz--voice .vz-body{height:auto}
}