/* ══════════════════════════════════════════
   FIRST SERVICE — css/first-service.css
   Page-specific styles only.
   Requires: css/global.css, css/nav.css
   ══════════════════════════════════════════ */

/* ── Per-study accent: amber/broadcast (First Service only) ── */
:root {
  --accent: #C2683A;
  --accent-deep: #9A4F2A;
  --accent-soft: rgba(194,104,58,0.12);

  /* Broadcast palette remaps — light glass shell with dark artifact scoping below */
  --void: var(--bg);
  --base: var(--glass);
  --surf: rgba(255,255,255,0.30);
  --panel: var(--glass-2);
  --panel-2: rgba(255,255,255,0.42);
  --line-soft: rgba(27,35,46,0.06);
  --faint: var(--muted-soft);
  --amber: var(--accent);
  --amber-soft: #D98E5E;
  --program: #BE2F2C;
  --preview: #1E8E54;
  --max: 1120px;
}

/* ── Page layout ── */
html { scroll-padding-top: 132px; }
body { padding-top: 128px; line-height: 1.62; }

/* ── Type overrides: General Sans for display, IBM Plex Mono for data ── */
h1, h2, h3 { font-family: 'General Sans', sans-serif; line-height: 1.04; letter-spacing: -0.02em; }
.mono { font-family: 'IBM Plex Mono', monospace; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 30px; }

  /* title-safe framing motif */
  .safe{position:relative;border:1px dashed var(--line);border-radius:4px}
  .safe::before,.safe::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--amber);opacity:.7}
  .safe::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
  .safe::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-radius:0 0 4px 0}

  /* ── Hero ── */
  .hero { padding: 5rem 0 6rem; }
  .hero-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
  }
  @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

  .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; }
  .hero-tag {
    display: inline-flex; align-items: center;
    font-family: var(--sans); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
    margin-bottom: 1.4rem;
  }
  .hero-title {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    line-height: 1.0; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 1.4rem;
  }
  .hero-title em { font-style: italic; color: var(--accent); }
  .hero-sub {
    font-family: var(--sans); font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 300; line-height: 1.65; color: var(--muted); max-width: 480px; margin-bottom: 2rem;
  }

  /* thesis stat block */
  .thesis {
    display: inline-block; background: var(--glass);
    backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--glass-edge); border-radius: 16px;
    box-shadow: var(--glass-shadow), var(--glass-inset);
    padding: 1.4rem 1.8rem; margin-top: 0.5rem;
  }
  .thesis__label {
    font-family: var(--sans); font-size: 0.65rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-soft); margin-bottom: 0.9rem;
  }
  .thesis__row { display: flex; align-items: center; gap: 1.2rem; }
  .thesis__cell { text-align: center; }
  .thesis__cell .k {
    font-family: var(--sans); font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-soft); margin-bottom: 0.3rem;
  }
  .thesis__v {
    font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1;
  }
  .thesis__v.before { color: var(--muted); }
  .thesis__v.after { color: var(--accent); }
  .thesis__arrow { font-size: 1.4rem; color: var(--muted-soft); }

  /* arch card (right side of hero) */
  .arch {
    background: var(--glass);
    backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-edge); border-radius: 20px;
    box-shadow: var(--glass-shadow), var(--glass-inset);
    padding: 2.4rem; display: flex; flex-direction: column; gap: 1rem;
  }
  .arch__icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--accent-soft); display: flex; align-items: center; justify-content: center;
    color: var(--accent);
  }
  .arch__cap {
    font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  }
  .arch__note {
    font-family: var(--sans); font-size: 0.9rem; font-weight: 300;
    line-height: 1.65; color: var(--muted);
  }

  /* phase spine — Double Diamond */
  .phase{border-top:1px solid var(--line);padding:74px 0}
  .phase-tag{display:flex;align-items:center;gap:14px;margin-bottom:10px}
  .diamond{display:flex;gap:5px}
  .diamond span{width:9px;height:9px;transform:rotate(45deg);border:1.5px solid var(--line)}
  .diamond span.on{background:var(--amber);border-color:var(--amber)}
  .phase-tag .lbl{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--amber)}
  .phase-tag .sub{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--faint)}
  h2{font-size:clamp(30px,4.6vw,46px);font-weight:700;max-width:880px;margin-top:6px}
  .lead{font-size:clamp(17px,2vw,19.5px);color:var(--muted);max-width:760px;margin-top:18px}
  .lead b{color:var(--ink);font-weight:600}
  .kicker{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--faint);margin:40px 0 14px;display:flex;align-items:center;gap:10px}
  .kicker::after{content:"";flex:1;height:1px;background:var(--line-soft)}

  /* JTBD */
  .jtbd{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);
    border-radius:10px;padding:28px 30px;margin-top:8px}
  .jtbd .q{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:clamp(20px,2.6vw,27px);
    line-height:1.3;color:var(--ink)}
  .jtbd .q u{text-decoration:none;color:var(--amber);border-bottom:2px solid rgba(255,162,62,.35)}
  .jtbd .dims{display:flex;flex-wrap:wrap;gap:22px;margin-top:18px;font-size:13px;color:var(--muted)}
  .jtbd .dims span b{color:var(--ink);font-weight:600;display:block;font-family:"IBM Plex Mono",monospace;
    font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;color:var(--faint)}

  .twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:26px}
  .card .tag{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--faint);margin-bottom:12px}
  .card h3{font-size:21px;font-weight:700;margin-bottom:10px}
  .card.built h3{color:var(--amber)} .card p{color:var(--muted);font-size:15px}

  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
  .q-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}
  .q-card p{font-size:14.5px;color:var(--ink)}
  .q-card .s{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--faint);margin-top:12px;letter-spacing:.04em}
  .wedge{margin-top:18px;background:linear-gradient(180deg,rgba(255,162,62,.1),rgba(255,162,62,.02));
    border:1px solid rgba(255,162,62,.32);border-radius:12px;padding:28px}
  .wedge p{font-size:clamp(18px,2.2vw,23px);color:var(--ink);max-width:840px}
  .wedge b{color:var(--amber)}

  /* ===== HEURISTIC SEVERITY MATRIX (interactive) ===== */
  .heur-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 16px}
  .heur-ctrl .t{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--faint);letter-spacing:.1em;margin-right:4px}
  .chip{font-family:"IBM Plex Mono",monospace;font-size:11.5px;border:1px solid var(--line);background:var(--panel);
    color:var(--muted);border-radius:100px;padding:6px 13px;cursor:pointer;transition:.15s}
  .chip.on{background:var(--ink);color:var(--void);border-color:var(--ink)}
  .chip[data-sev="4"].on{background:var(--program);border-color:var(--program);color:#fff}
  .chip[data-sev="3"].on{background:#E8843C;border-color:#E8843C;color:#1c1304}
  .heur{border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .hrow{border-bottom:1px solid var(--line-soft);transition:background .15s}
  .hrow:last-child{border-bottom:none}
  .hrow.hide{display:none}
  .hhead{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;padding:16px 20px;cursor:pointer}
  .hrow:hover .hhead{background:var(--panel)}
  .sev{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:12px;width:54px;height:30px;border-radius:6px;
    display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
  .sev.s4{background:rgba(255,75,79,.16);color:var(--program);border-color:rgba(255,75,79,.4)}
  .sev.s3{background:rgba(232,132,60,.16);color:#F19A52;border-color:rgba(232,132,60,.4)}
  .sev.s2{background:rgba(175,184,196,.1);color:var(--muted)}
  .hhead .htitle{font-weight:600;font-size:15.5px}
  .hhead .heuristic{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--faint);letter-spacing:.04em;margin-top:3px}
  .hhead .exp{font-family:"IBM Plex Mono",monospace;font-size:18px;color:var(--faint);transition:transform .2s}
  .hrow.open .exp{transform:rotate(45deg)}
  .hbody{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .hrow.open .hbody{max-height:260px}
  .hbody .inner{padding:0 20px 20px 88px;display:grid;gap:12px}
  .hbody .blk b{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--faint);display:block;margin-bottom:4px}
  .hbody .blk.fix b{color:var(--preview)} .hbody .blk p{font-size:14.5px;color:var(--muted)}
  .hbody .blk.fix p{color:var(--ink)}
  .heur-foot{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--faint);margin-top:10px}

  /* ===== PEAK-END CURVE ===== */
  .panelbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px 22px 18px;margin-top:8px}
  .legend{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:16px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
  .legend span{display:inline-flex;align-items:center;gap:7px} .legend i{width:18px;height:3px;border-radius:2px}
  .cw{width:100%;overflow-x:auto}
  svg.curve{width:100%;min-width:680px;height:auto;display:block}
  .axis{stroke:var(--line)} .grid{stroke:var(--line-soft)}
  path.ln{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:3400;stroke-dashoffset:3400;transition:stroke-dashoffset 1.9s ease}
  .reveal path.ln{stroke-dashoffset:0}
  path.today{stroke:var(--program)} path.fixed{stroke:var(--preview)}
  .dot{opacity:0;transition:opacity .4s ease 1s}.reveal .dot{opacity:1}
  .vt{fill:var(--program)} .vf{fill:var(--preview)}
  .hit{fill:transparent;cursor:pointer}
  .marker{fill:none;stroke:var(--amber);stroke-width:1;stroke-dasharray:3 3;opacity:0}
  .xl{fill:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:11px}
  .yl{fill:var(--faint);font-family:"IBM Plex Mono",monospace;font-size:10.5px}
  .ptag{fill:var(--program);font-family:"IBM Plex Mono",monospace;font-size:10.5px}
  .endtag{fill:var(--preview);font-family:"IBM Plex Mono",monospace;font-size:10.5px}
  .cdetail{margin-top:14px;background:var(--surf);border:1px solid var(--line);border-radius:9px;padding:14px 16px;min-height:58px;
    display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
  .cdetail .s{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);white-space:nowrap}
  .cdetail .x{font-size:14px;color:var(--muted)}.cdetail .x b{color:var(--ink)}.cdetail .x .f{color:var(--preview)}

  /* ===== FOGG ACTION-LINE PLOT (interactive) ===== */
  .fogg{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;margin-top:8px;align-items:start}
  .fogg-svgwrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
  svg.fogg-plot{width:100%;height:auto;display:block;touch-action:none}
  .fline{fill:rgba(55,210,127,.06);stroke:var(--preview);stroke-width:1.5;stroke-dasharray:5 4}
  .fhandle{fill:var(--amber);stroke:#1c1304;stroke-width:2;cursor:grab}
  .fhandle:active{cursor:grabbing}
  .fghost{fill:none;stroke:var(--program);stroke-width:1.5;stroke-dasharray:3 3}
  .faxis{stroke:var(--line)} .faxis-lbl{fill:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:11px}
  .fnote{fill:var(--faint);font-family:"IBM Plex Mono",monospace;font-size:10px}
  .fogg-side .read{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;margin-bottom:14px}
  .read .verdict{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:20px;margin-bottom:6px}
  .read.below .verdict{color:var(--program)} .read.above .verdict{color:var(--preview)}
  .read .vals{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);display:flex;gap:18px;margin-top:10px}
  .read .vals b{color:var(--ink)}
  .read p{font-size:14px;color:var(--muted);margin-top:8px}
  .preset{display:flex;gap:8px;margin-bottom:14px}
  .preset button{flex:1;font-family:"IBM Plex Mono",monospace;font-size:12px;border:1px solid var(--line);
    background:var(--panel);color:var(--ink);border-radius:8px;padding:11px;cursor:pointer;transition:.15s}
  .preset button:hover{border-color:var(--muted)}
  .preset button.today{border-color:rgba(255,75,79,.4);color:var(--program)}
  .preset button.fixed{border-color:rgba(55,210,127,.4);color:var(--preview)}
  .fogg-take{font-size:14.5px;color:var(--muted)}.fogg-take b{color:var(--ink)}

  /* reframe */
  .reframe{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center;margin-top:8px}
  .rbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px;text-align:center}
  .rbox .l{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
  .rbox .big{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(20px,2.8vw,28px);font-weight:700}
  .rbox.from .big{color:var(--muted)} .rbox.to{border-color:rgba(255,162,62,.45)} .rbox.to .big{color:var(--amber)}
  .rbox small{color:var(--muted);display:block;margin-top:10px}
  .rarrow{font-size:28px;color:var(--amber)}

  /* concepts mapped to frameworks */
  .concepts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
  .concept{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:24px}
  .concept .peak{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--program);letter-spacing:.06em;
    text-transform:uppercase;display:flex;align-items:center;gap:7px;margin-bottom:12px}
  .concept .peak i{width:7px;height:7px;border-radius:1px;background:var(--program)}
  .concept h3{font-size:19px;font-weight:700;margin-bottom:9px}
  .concept p{font-size:14px;color:var(--muted)}
  .concept .frame{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:12.5px;
    color:var(--preview);font-family:"IBM Plex Mono",monospace}

  /* ===== INTERACTIVE PROTOTYPE — screen-accurate, cross-platform ===== */
  .sim-bar{display:flex;align-items:center;gap:10px;margin:18px 0 0;flex-wrap:wrap}
  .seg{display:inline-flex;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px;gap:4px}
  .seg .oslabel{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--faint);letter-spacing:.12em;padding:0 4px 0 6px}
  .seg button{font-family:"IBM Plex Mono",monospace;font-size:12px;background:transparent;color:var(--muted);border:none;padding:8px 14px;border-radius:6px;cursor:pointer;transition:.15s}
  .seg button.on{background:var(--amber);color:#1c1304;font-weight:500}
  .sim-hint{font-size:13px;color:var(--muted)}
  .loadstat{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--faint)}
  .loadstat b{font-size:17px;color:var(--amber)}
  .app{margin-top:16px;background:var(--base);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 30px 70px -34px rgba(0,0,0,.85)}
  .app.win{border-radius:7px}
  .chrome{display:flex;align-items:center;height:38px;background:#15181E;border-bottom:1px solid var(--line);padding:0 12px;position:relative}
  .app.win .chrome{background:#23262D}
  .traffic{display:none;gap:8px}.app.mac .traffic{display:flex}
  .traffic i{width:12px;height:12px;border-radius:50%}
  .traffic .r{background:#FF5F57}.traffic .y{background:#FEBC2E}.traffic .g{background:#28C840}
  .appicon{display:none;width:15px;height:15px;border-radius:3px;background:linear-gradient(135deg,var(--amber),#E8843C);margin-right:9px}
  .app.win .appicon{display:inline-block}
  .ctitle{position:absolute;left:0;right:0;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted);pointer-events:none}
  .app.win .ctitle{text-align:left;left:36px;right:auto}
  .winbtns{display:none;margin-left:auto}.app.win .winbtns{display:flex}
  .winbtns span{width:44px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px}
  .winbtns span:hover{background:rgba(255,255,255,.07)}.winbtns span:last-child:hover{background:#E81123;color:#fff}
  .menubar{display:none;align-items:center;gap:18px;height:30px;padding:0 14px;background:#1B1E24;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
  .app.win .menubar{display:flex}.menubar span:first-child{color:var(--ink);font-weight:500}
  .tbar{display:flex;align-items:center;gap:7px;min-height:46px;padding:7px 12px;background:var(--panel-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
  .tbtn{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);background:var(--panel);border:1px solid var(--line);padding:6px 10px;border-radius:6px;transition:.2s}
  .tbtn.po.dim{opacity:.28;filter:grayscale(1)}
  .tsep{width:1px;height:20px;background:var(--line);margin:0 3px}
  .modes{display:flex;gap:4px}
  .tbtn.active{color:var(--amber);border-color:rgba(255,162,62,.5);background:rgba(255,162,62,.1)}
  .tbar .vbadge{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--amber);border:1px solid rgba(255,162,62,.45);padding:5px 11px;border-radius:5px}
  .body3{display:grid;grid-template-columns:198px 1fr 250px}
  .pane{border-right:1px solid var(--line);min-width:0}.pane:last-child{border-right:none}
  .ph{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:12px 13px 8px;display:flex;justify-content:space-between}
  .libwrap{padding:0 8px 12px}
  .libgrp{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--faint);padding:9px 6px 3px;letter-spacing:.08em}
  .libgrp.extra{display:none}.app.pro .libgrp.extra{display:block}
  .litem{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:7px 8px;border-radius:6px;cursor:pointer}
  .litem:hover{background:var(--panel)}.litem.sel{background:rgba(255,162,62,.12);color:var(--ink)}
  .litem.extra{display:none}.app.pro .litem.extra{display:flex}
  .center{display:flex;flex-direction:column}
  .gridscroll{padding:12px}
  .slides{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .tile{border:2px solid var(--line);border-radius:7px;overflow:hidden;cursor:pointer;background:#0c0e12;transition:.15s;position:relative;text-align:left}
  .tile:hover{border-color:var(--muted)}
  .tile .thumb{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12.5px;color:#dde2e8;padding:8px;background:radial-gradient(120% 120% at 50% 18%,#1b2129,#0c0e12);font-family:"Bricolage Grotesque",sans-serif;font-weight:600;line-height:1.15}
  .tile .tlabel{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--faint);padding:5px 7px;border-top:1px solid var(--line);display:flex;justify-content:space-between}
  .tile.live{border-color:var(--program);box-shadow:0 0 0 2px rgba(255,75,79,.3)}.tile.live .tlabel{color:var(--program)}
  .tile.next{border-color:var(--preview)}.tile.next .tlabel{color:var(--preview)}
  .tile .badge{position:absolute;top:6px;left:6px;font-family:"IBM Plex Mono",monospace;font-size:8px;padding:2px 5px;border-radius:3px;letter-spacing:.05em;display:none}
  .tile.live .badge{display:block;background:var(--program);color:#fff}.tile.next .badge{display:block;background:rgba(55,210,127,.25);color:var(--preview)}
  .gridfoot{border-top:1px solid var(--line);padding:9px 12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .fumble{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--program);background:transparent;border:1px solid rgba(255,75,79,.4);border-radius:6px;padding:6px 10px;cursor:pointer}
  .kbd{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--faint)}.kbd b{color:var(--muted)}
  .evtoggle{margin-left:auto;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
  .evtoggle .sw{width:30px;height:16px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);position:relative;transition:.2s}
  .evtoggle .sw::after{content:"";position:absolute;top:1px;left:1px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:.2s}
  .evtoggle.on .sw{background:var(--amber);border-color:var(--amber)}.evtoggle.on .sw::after{left:15px;background:#1c1304}
  .easyview{display:none;padding:14px;border-top:1px solid var(--line);background:#0c0e12}.easyview.show{display:block}
  .easyview .ev-now{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--faint);letter-spacing:.1em;margin-bottom:6px}
  .easyview .ev-text{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(20px,3vw,30px);color:#fff;line-height:1.1}
  .right{display:flex;flex-direction:column;padding:12px;gap:12px}
  .preview{aspect-ratio:16/9;border:1px solid var(--line);border-radius:8px;overflow:hidden;position:relative;background:var(--surf);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;transition:.3s}
  .preview .pmain{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(16px,2.2vw,22px);color:#fff;padding:0 10px}
  .preview .psub{font-size:12px;color:#C9D0D8}
  .preview.logo{background:radial-gradient(120% 120% at 50% 22%,#1b2129,var(--surf))}.preview.logo .pmain{color:var(--muted);font-size:15px}
  .preview.broken{border-color:var(--program)}.preview.broken .pmain{color:var(--program);font-size:15px}
  .ptally{position:absolute;top:8px;left:8px;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;background:rgba(255,75,79,.92);color:#fff;padding:2px 7px;border-radius:3px;display:flex;align-items:center;gap:5px}
  .ptally i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.6s infinite}
  .preview.logo .ptally,.preview.cleared .ptally{display:none}
  .clears{display:flex;flex-direction:column;gap:5px}
  .clearbtn{font-family:"IBM Plex Mono",monospace;font-size:11px;text-align:left;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:9px 10px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:.15s}
  .clearbtn:hover{border-color:var(--muted)}
  .clearbtn .dotc{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none}
  .clearbtn.active .dotc{background:var(--program)}
  .clearbtn.big{background:var(--preview);color:#06180e;border-color:var(--preview);font-weight:600;justify-content:center}
  .clearbtn.proonly{display:none}.app.pro .clearbtn.proonly{display:flex}
  .clearbtn.volonly{display:none}.app.volunteer .clearbtn.volonly{display:flex}
  .showctrls{display:none;grid-template-columns:1fr 1fr 1fr;gap:5px}.app.pro .showctrls{display:grid}
  .sc{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:8px 3px;text-align:center}
  .vonly{display:none}.app.volunteer .vonly{display:block}
  .stage{background:var(--surf);border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:10px}
  .stage .sh{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:7px;display:flex;justify-content:space-between}
  .stage .cur{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:16px;color:#fff}
  .stage .nx{font-size:12px;color:var(--preview);margin-top:7px}.stage .nx span{color:var(--faint)}
  .meter-h{display:flex;justify-content:space-between;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
  .meter-h b{color:var(--ink);font-weight:500}
  .meter{height:9px;border-radius:5px;background:var(--panel-2);overflow:hidden;border:1px solid var(--line)}
  .meter .fill{height:100%;width:20%;background:var(--amber);transition:width .5s ease,background .5s ease}
  .meter-cap{font-size:12.5px;color:var(--muted);margin:9px 0 0;min-height:34px}
  .safe-strip{display:flex;align-items:center;gap:10px;margin-top:11px;padding:11px 12px;background:rgba(55,210,127,.1);border:1px solid rgba(55,210,127,.42);border-radius:8px}
  .safe-strip .l{font-size:12px;color:var(--preview)}
  .safe-strip button{margin-left:auto;background:var(--preview);color:#06180e;border:none;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;padding:8px 11px;border-radius:6px;cursor:pointer}
  .mediabin{display:none;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:#13161b;overflow-x:auto}
  .app.pro .mediabin{display:flex}
  .mediabin .mh{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--faint);letter-spacing:.1em;white-space:nowrap}
  .mthumb{width:62px;height:35px;border-radius:4px;border:1px solid var(--line);background:radial-gradient(120% 120% at 40% 20%,#222a34,#0c0e12);flex:none}
  .modkey{font-family:"IBM Plex Mono",monospace;color:var(--amber)}
  .ia-note{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
  .ia-note div{font-size:14px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:18px}
  .ia-note b{color:var(--ink);font-weight:600;display:block;margin-bottom:5px;font-size:14.5px}

  /* measurement */
  .metrics{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:8px}
  .mrow{display:grid;grid-template-columns:1.4fr 1fr 1fr;border-bottom:1px solid var(--line-soft)}
  .mrow:last-child{border-bottom:none}.mrow>div{padding:15px 20px;display:flex;align-items:center;font-size:14.5px}
  .mrow .m-name{color:var(--ink);font-weight:500}.mrow .m-base{color:var(--program);font-family:"IBM Plex Mono",monospace;font-size:13px}
  .mrow .m-target{color:var(--preview);font-family:"IBM Plex Mono",monospace;font-size:13px}
  .mrow.head>div{background:var(--panel-2);font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:12px 20px}
  .mrow.head .m-base,.mrow.head .m-target{color:var(--faint);font-size:10.5px}
  .a11y{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
  .a11y div{font-size:13.5px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:15px 16px;display:flex;gap:11px;align-items:flex-start}
  .a11y div i{color:var(--preview);font-family:"IBM Plex Mono",monospace;font-size:12px;margin-top:2px}
  .a11y b{color:var(--ink);font-weight:600}

  .score{margin-top:18px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .srow{display:grid;grid-template-columns:1fr 1.3fr;border-bottom:1px solid var(--line-soft)}.srow:last-child{border-bottom:none}
  .srow>div{padding:17px 22px}
  .srow .v{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:16px;background:var(--panel);display:flex;align-items:center;gap:11px;color:var(--ink)}
  .srow .v::before{content:"";width:8px;height:8px;border-radius:1px;background:var(--amber)}
  .srow .h{color:var(--muted);font-size:14.5px;display:flex;align-items:center}
  .srow.head>div{background:var(--panel-2);font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:12px 22px}
  .srow.head .v{font-weight:400}.srow.head .v::before{display:none}

  footer{padding:66px 0 90px;border-top:1px solid var(--line)}
  .sign h3{font-size:24px;font-weight:700}
  .sign p{color:var(--muted);max-width:620px;margin-top:10px;font-size:15px}
  .sign .by{margin-top:22px;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--faint);letter-spacing:.05em}
  .sign .by b{color:var(--amber);font-weight:500}

  /* ---- prev/next pager + related + footer hub ---- */
  .pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
  @media(max-width:640px){.pager{grid-template-columns:1fr}}
  .pager-card{display:block;text-decoration:none;padding:20px 22px;border:1px solid var(--line);border-radius:12px;background:var(--panel);transition:border-color .2s,background .2s,transform .2s}
  .pager-card:hover{border-color:var(--amber);background:var(--panel-2);transform:translateY(-2px)}
  .pager-card.is-next{text-align:right}
  .pager-card.is-disabled{opacity:.4;pointer-events:none}
  .pager-dir{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
  .pager-name{font-size:20px;font-weight:700;color:var(--ink);margin-top:6px}
  .related-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
  @media(max-width:640px){.related-grid{grid-template-columns:1fr}}
  .related-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;padding:20px 22px;border:1px solid var(--line);border-radius:12px;background:var(--panel);transition:border-color .2s,background .2s,transform .2s}
  .related-card:hover{border-color:var(--amber);background:var(--panel-2);transform:translateY(-2px)}
  .related-card .rc-tag{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
  .related-card .rc-title{font-size:18px;font-weight:700;color:var(--ink)}
  .related-card .rc-desc{font-size:13.5px;color:var(--muted);line-height:1.55}
  /* SHARED FOOTER COMPONENT (global site navigation) — same component as the
     homepage & Care Gap; identical IA, layout logic, nav structure, interaction
     & accessibility. First Service skin (broadcast / control-room, dark). */
  .site-footer__inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;margin-top:46px;padding-top:34px;border-top:1px solid var(--line)}
  @media(max-width:860px){.site-footer__inner{grid-template-columns:1fr 1fr;gap:28px 22px}}
  @media(max-width:480px){.site-footer__inner{grid-template-columns:1fr}}
  .sf-brand .sf-logo{font-size:20px;font-weight:700;color:var(--ink);text-decoration:none;display:inline-block;margin-bottom:8px}
  .sf-brand .sf-logo em{font-style:normal;color:var(--amber)}
  .sf-brand p{font-size:13.5px;color:var(--muted);max-width:260px}
  .sf-col h4{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
  .sf-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  .sf-col a{font-size:14px;color:var(--muted);text-decoration:none;transition:color .15s,padding-left .15s}
  .sf-col a:hover{color:var(--amber);padding-left:3px}
  .site-footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--faint);letter-spacing:.05em}
  .site-footer__bottom .sf-meta{color:var(--amber)}
  .kicker.solo{margin-bottom:14px}

  .personas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
  .pcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}
  .pcard .role{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
  .pcard h3{font-size:18px;font-weight:700;margin:8px 0 7px}
  .pcard p{font-size:14px;color:var(--muted)}
  .hmw{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
  .hmw span{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--preview);border-radius:10px;padding:18px;font-size:15.5px;color:var(--muted)}
  .hmw b{color:var(--ink);font-weight:600}
  .fid{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;color:var(--amber);border:1px solid rgba(255,162,62,.4);border-radius:4px;padding:2px 7px;margin-left:8px;text-transform:none}
  .crazy8{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
  .c8{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 12px 10px;position:relative}
  .c8.pick{border-color:rgba(55,210,127,.5);box-shadow:0 0 0 1px rgba(55,210,127,.25)}
  .c8 svg{width:100%;height:86px;display:block}
  .c8 .cap{font-family:"Caveat","Bricolage Grotesque",cursive;font-size:19px;color:var(--ink);margin-top:4px;line-height:1.05;text-align:center}
  .c8.pick .cap{color:var(--preview)}
  .c8 .num{position:absolute;top:8px;left:11px;font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--faint)}
  .c8 .keep{position:absolute;top:7px;right:9px;font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--preview)}
  .sketchwrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:8px;overflow-x:auto}
  svg.sketch{width:100%;min-width:560px;height:auto;display:block}
  .ann-hand{font-family:"Caveat","Bricolage Grotesque",cursive}
  .ladder{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;font-family:"IBM Plex Mono",monospace;font-size:12px}
  .ladder .step{border:1px solid var(--line);border-radius:100px;padding:7px 14px;color:var(--muted)}
  .ladder .step.done{border-color:rgba(55,210,127,.45);color:var(--preview)}
  .ladder .step.now{border-color:var(--amber);color:var(--amber)}
  .ladder .arr{color:var(--faint)}
  .reflect{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
  .reflect div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}
  .reflect b{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
  .reflect p{font-size:14.5px;color:var(--muted)}

  .fade{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
  .fade.in{opacity:1;transform:none}

  @media(max-width:880px){
    .twocol,.quotes,.concepts,.fogg,.a11y{grid-template-columns:1fr}
    .personas,.hmw,.reflect{grid-template-columns:1fr}
    .crazy8{grid-template-columns:repeat(2,1fr)}
    .body3{grid-template-columns:1fr}.pane{border-right:none;border-bottom:1px solid var(--line)}
    .slides{grid-template-columns:repeat(2,1fr)}
    .reframe{grid-template-columns:1fr}.rarrow{transform:rotate(90deg)}
    .mrow,.srow{grid-template-columns:1fr}.mrow>div,.srow .v{border-bottom:1px solid var(--line-soft)}
    .cdetail{grid-template-columns:1fr}.hbody .inner{padding-left:20px}
    .loadstat{margin-left:0}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;scroll-behavior:auto}
    .fade{opacity:1;transform:none;transition:none}path.ln{stroke-dashoffset:0;transition:none}.dot{opacity:1}
  }
  :focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

  /* ===================== ADDED: case-study structure ===================== */

  /* generic anchored section (uses .phase spacing without the diamond spine) */
  .sec{border-top:1px solid var(--line);padding:64px 0;scroll-margin-top:120px}
  .sec.tight{padding:52px 0}
  .seclabel{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--amber);margin-bottom:8px;display:flex;align-items:center;gap:10px}
  .seclabel .n{color:var(--faint)}
  .phase{scroll-margin-top:96px}
/* ── Spacing utilities (replaces inline style attributes) ── */
.mt-0  { margin-top: 0 !important; }
.mt-sm { margin-top: 14px !important; }
.mt-md { margin-top: 18px !important; }
.mt-lg { margin-top: 26px !important; }
.mt-xl { margin-top: 28px !important; }
.h2-display { font-size: clamp(26px, 3.6vw, 38px); }

  /* snapshot */
  .snapwrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:14px;background:var(--panel)}
  .snaphead{display:flex;align-items:center;gap:10px;padding:14px 22px;background:var(--panel-2);
    border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--faint)}
  .snaphead i{width:8px;height:8px;border-radius:1px;background:var(--amber)}
  .snapgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft)}
  .snapgrid>div{background:var(--panel);padding:18px 20px}
  .snapgrid .k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--faint);margin-bottom:7px}
  .snapgrid .v{font-size:14.5px;color:var(--ink);line-height:1.45}
  .snapgrid .v b{color:var(--amber);font-weight:600}
  .snapgrid .v.small{font-size:13px;color:var(--muted)}
  .snapgrid .wide{grid-column:span 2}
  .snapgrid .full{grid-column:1 / -1}
  @media(max-width:760px){.snapgrid{grid-template-columns:1fr 1fr}.snapgrid .wide,.snapgrid .full{grid-column:1 / -1}}

  /* ───────── Project Snapshot (care-gap parity) ───────── */
.band {
  padding: 6.5rem 0;
  position: relative;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.2rem 0;
}
.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}
.sec-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 2.4rem 0;
}
.sec-title em {
  font-style: italic;
  color: var(--accent);
}
.overview-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 48px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 44px rgba(27, 35, 46, 0.10);
  border-radius: 24px;
}
.overview-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.overview-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--accent);
}
.overview-item p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}
@media (max-width: 900px) {
  .overview-card { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 650px) {
  .overview-card { grid-template-columns: 1fr; }
}
  /* contribution bars */
  .contrib{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:22px 24px;background:var(--panel)}
  .contrib .head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
  .contrib .head b{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
  .contrib .head span{font-size:13px;color:var(--muted)}
  .cbar{display:grid;grid-template-columns:200px 1fr 44px;gap:14px;align-items:center;margin-bottom:11px}
  .cbar .lbl{font-size:13.5px;color:var(--ink)}
  .cbar .track{height:9px;border-radius:5px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
  .cbar .fill{height:100%;background:linear-gradient(90deg,var(--amber),var(--amber-soft))}
  .cbar .pct{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);text-align:right}
  @media(max-width:620px){.cbar{grid-template-columns:1fr 40px;gap:6px 12px}.cbar .track{grid-column:1 / -1;order:3}}

  /* executive summary + plain key-value */
  .deflist{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
    border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:8px}
  .deflist>div{background:var(--panel);padding:16px 18px}
  .deflist .k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
  .deflist .v{font-size:14px;color:var(--ink)}
  @media(max-width:760px){.deflist{grid-template-columns:1fr 1fr}}

  /* problem statement */
  .problem{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--program);
    border-radius:10px;padding:26px 28px;margin-top:8px}
  .problem .p{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:clamp(19px,2.4vw,25px);line-height:1.32;color:var(--ink)}
  .problem .p u{text-decoration:none;color:var(--program);border-bottom:2px solid rgba(255,75,79,.35)}
  .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
  .pgrid div{background:var(--surf);border:1px solid var(--line);border-radius:9px;padding:15px}
  .pgrid b{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
  .pgrid p{font-size:13px;color:var(--muted)}
  @media(max-width:760px){.pgrid{grid-template-columns:1fr 1fr}}

  /* research goals / assumptions / questions */
  .rgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
  .rbox2{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px}
  .rbox2 h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);font-weight:500;margin-bottom:12px}
  .rbox2 ul{list-style:none;display:grid;gap:10px}
  .rbox2 li{font-size:14px;color:var(--muted);padding-left:18px;position:relative}
  .rbox2 li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:1px;background:var(--amber);transform:rotate(45deg)}
  .rbox2.assume li::before{background:var(--faint)}
  .rbox2 li b{color:var(--ink);font-weight:600}
  @media(max-width:760px){.rgrid{grid-template-columns:1fr}}

  /* method track */
  .track2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
  .track2 div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}
  .track2 .tk{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
  .track2 .done .tk{color:var(--preview)} .track2 .plan .tk{color:var(--amber)}
  .track2 p{font-size:14px;color:var(--muted)} .track2 b{color:var(--ink)}
  @media(max-width:760px){.track2{grid-template-columns:1fr}}

  /* competitive analysis table */
  .ctable{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:8px;overflow-x:auto}
  .ctable table{width:100%;border-collapse:collapse;min-width:680px}
  .ctable th,.ctable td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line-soft);font-size:13.5px}
  .ctable thead th{background:var(--panel-2);font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--faint);font-weight:500}
  .ctable tbody tr:last-child td{border-bottom:none}
  .ctable td:first-child,.ctable th:first-child{position:sticky;left:0;background:var(--panel);font-weight:600;color:var(--ink)}
  .ctable thead th:first-child{background:var(--panel-2)}
  .ctable .rate{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
  .ctable .hi{color:var(--preview)} .ctable .lo{color:var(--program)} .ctable .mid{color:var(--amber)}
  .ctable tr.us td{background:rgba(255,162,62,.06)} .ctable tr.us td:first-child{background:rgba(255,162,62,.1);color:var(--amber)}

  /* affinity mapping */
  .affinity{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
  .acluster{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}
  .acluster .ah{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:12px;display:flex;justify-content:space-between}
  .acluster .ah .ct{color:var(--faint)}
  .anote{font-size:12.5px;color:var(--muted);background:var(--surf);border:1px solid var(--line-soft);border-radius:6px;padding:9px 11px;margin-bottom:7px}
  .acluster .opp{font-size:12.5px;color:var(--preview);margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
  .acluster .opp b{color:var(--preview);font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:4px}
  @media(max-width:760px){.affinity{grid-template-columns:1fr}}

  /* full personas */
  .pfull{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
  .pf{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px}
  .pf .top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
  .pf .av{width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
    font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:18px;color:#1c1304;background:linear-gradient(135deg,var(--amber),var(--amber-soft))}
  .pf.sec .av{background:linear-gradient(135deg,#7E8893,#AFB8C4);color:#0c0e13}
  .pf .role{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
  .pf h3{font-size:19px;font-weight:700}
  .pf .tagline{font-size:13.5px;color:var(--muted);font-style:italic;margin-bottom:16px}
  .pf .meta{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pf .meta>div b{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
  .pf .meta>div p{font-size:13px;color:var(--muted)}
  .pf .prof{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
  .pf .prof .lbl{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:7px;display:flex;justify-content:space-between}
  .pf .pdots{display:flex;gap:5px}
  .pf .pdots i{width:100%;height:6px;border-radius:3px;background:var(--panel-2);border:1px solid var(--line)}
  .pf .pdots i.on{background:var(--amber);border-color:var(--amber)}
  @media(max-width:760px){.pfull{grid-template-columns:1fr}.pf .meta{grid-template-columns:1fr}}

  /* journey table */
  .journey{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:14px;overflow-x:auto}
  .journey table{width:100%;border-collapse:collapse;min-width:820px}
  .journey th,.journey td{padding:14px 15px;text-align:left;border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);vertical-align:top;font-size:13px}
  .journey td:last-child,.journey th:last-child{border-right:none}
  .journey thead th{background:var(--panel-2);font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:500}
  .journey tbody th{background:var(--panel);font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:14px;color:var(--ink);text-align:left}
  .journey .emo{font-family:"IBM Plex Mono",monospace;font-size:11px}
  .journey .emo.neg{color:var(--program)} .journey .emo.pos{color:var(--preview)} .journey .emo.neu{color:var(--amber)}
  .journey .pain{color:var(--muted)} .journey .opp{color:var(--preview)}
  .journey tbody tr:last-child td,.journey tbody tr:last-child th{border-bottom:none}

  /* opportunity statements */
  .opps{display:grid;gap:12px;margin-top:8px}
  .opp-row{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:var(--panel);
    border:1px solid var(--line);border-radius:10px;padding:18px 20px}
  .opp-row .num{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:26px;color:var(--amber);line-height:1}
  .opp-row p{font-size:15px;color:var(--muted)} .opp-row p b{color:var(--ink);font-weight:600}
  .opp-row .pri{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--preview);letter-spacing:.06em;margin-top:6px}

  /* prioritization 2x2 */
  .prio{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;margin-top:14px}
  svg.prio-svg{width:100%;height:auto;display:block;max-width:560px;margin:0 auto}
  .prio .pa{stroke:var(--line);stroke-width:1}
  .prio .pl{fill:var(--faint);font-family:"IBM Plex Mono",monospace;font-size:11px}
  .prio .dot{r:8}
  .prio .lbl{fill:var(--ink);font-size:12px;font-family:"Inter",sans-serif}

  /* design principles */
  .principles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
  .prin{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px;position:relative}
  .prin .pn{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--amber)}
  .prin h3{font-size:18px;font-weight:700;margin:8px 0 8px}
  .prin p{font-size:13.5px;color:var(--muted)}
  .prin .maps{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-size:11.5px;color:var(--preview);font-family:"IBM Plex Mono",monospace}
  @media(max-width:760px){.principles{grid-template-columns:1fr}}

  /* decision matrix */
  .matrix{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:14px;overflow-x:auto}
  .matrix table{width:100%;border-collapse:collapse;min-width:640px}
  .matrix th,.matrix td{padding:13px 14px;border-bottom:1px solid var(--line-soft);font-size:13.5px;text-align:center}
  .matrix th:first-child,.matrix td:first-child{text-align:left}
  .matrix thead th{background:var(--panel-2);font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:500}
  .matrix td:first-child{font-weight:600;color:var(--ink)}
  .matrix .sc{font-family:"IBM Plex Mono",monospace;color:var(--muted)}
  .matrix tr.win td{background:rgba(55,210,127,.07)}
  .matrix tr.win td:first-child{color:var(--preview)}
  .matrix .total{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:var(--ink)}
  .matrix tr.win .total{color:var(--preview)}

  /* rejected ideas */
  .rejected{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
  .rej{background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;grid-template-columns:auto 1fr;gap:14px}
  .rej .x{font-family:"IBM Plex Mono",monospace;color:var(--program);font-size:18px;line-height:1}
  .rej b{color:var(--ink);font-size:14.5px} .rej p{font-size:13px;color:var(--muted);margin-top:5px}
  @media(max-width:760px){.rejected{grid-template-columns:1fr}}

  /* IA trees */
  .iagrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
  .iacol{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px}
  .iacol.before{border-color:rgba(255,75,79,.3)} .iacol.after{border-color:rgba(55,210,127,.35)}
  .iacol .ih{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
  .iacol.before .ih{color:var(--program)} .iacol.after .ih{color:var(--preview)}
  .tree{font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.9;color:var(--muted)}
  .tree .l0{color:var(--ink)} .tree .l1{padding-left:18px} .tree .l2{padding-left:36px;color:var(--faint)}
  .tree .hidden{color:var(--faint);opacity:.55} .tree .new{color:var(--preview)}
  @media(max-width:760px){.iagrid{grid-template-columns:1fr}}

  /* user flows */
  .flows{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
  .flowcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px}
  .flowcard .fh{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .flowcard .fnum{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--amber);border:1px solid rgba(255,162,62,.4);border-radius:4px;padding:3px 8px}
  .flowcard h3{font-size:17px;font-weight:700}
  .fsteps{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:14px}
  .fstep{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);background:var(--surf);
    border:1px solid var(--line);border-radius:6px;padding:7px 10px}
  .fstep.safe{border-color:rgba(55,210,127,.45);color:var(--preview)}
  .fstep.risk{border-color:rgba(255,75,79,.4);color:var(--program)}
  .farr{color:var(--faint);font-family:"IBM Plex Mono",monospace}
  .flowcard .why{font-size:13px;color:var(--muted);padding-top:12px;border-top:1px solid var(--line)}
  .flowcard .why b{color:var(--preview);font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:5px}
  @media(max-width:760px){.flows{grid-template-columns:1fr}}

  /* design system */
  .dsblock{margin-top:26px}
  .dsh{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);margin:0 0 14px;display:flex;align-items:center;gap:10px}
  .dsh::before{content:"";width:8px;height:8px;background:var(--amber);transform:rotate(45deg)}
  .swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .sw{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
  .sw .chip2{height:64px} .sw .meta{padding:11px 13px}
  .sw .nm{font-size:13px;color:var(--ink);font-weight:600} .sw .hex{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--faint);margin-top:3px}
  .sw .use{font-size:11px;color:var(--muted);margin-top:6px}
  @media(max-width:760px){.swatches{grid-template-columns:1fr 1fr}}

  .typescale{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
  .typescale .tr{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:baseline;padding:14px 20px;border-bottom:1px solid var(--line-soft)}
  .typescale .tr:last-child{border-bottom:none}
  .typescale .spec{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--faint);letter-spacing:.06em}
  .typescale .samp{color:var(--ink)}

  .scalerow{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
  .scalerow .u{display:flex;flex-direction:column;align-items:center;gap:6px}
  .scalerow .u .box{background:rgba(255,162,62,.18);border:1px solid rgba(255,162,62,.4);border-radius:4px}
  .scalerow .u .t{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--faint)}

  .tokens{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:6px;overflow-x:auto}
  .tokens table{width:100%;border-collapse:collapse;min-width:560px}
  .tokens th,.tokens td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-soft);font-size:13px}
  .tokens thead th{background:var(--panel-2);font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:500}
  .tokens td:first-child{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--amber)}
  .tokens .swi{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--line);vertical-align:middle;margin-right:8px}
  .tokens tbody tr:last-child td{border-bottom:none}

  .compgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
  .compcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}
  .compcard .ch{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
  .compcard .demo{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
  .compcard .note{font-size:12.5px;color:var(--muted)}
  .btn-demo{font-family:"IBM Plex Mono",monospace;font-size:12px;border-radius:7px;padding:9px 14px;border:1px solid var(--line);cursor:default}
  .btn-demo.primary{background:var(--amber);color:#1c1304;border-color:var(--amber);font-weight:600}
  .btn-demo.safe{background:var(--preview);color:#06180e;border-color:var(--preview);font-weight:600}
  .btn-demo.ghost{background:transparent;color:var(--muted)}
  .btn-demo.danger{background:transparent;color:var(--program);border-color:rgba(255,75,79,.45)}
  .alert-demo{display:flex;align-items:center;gap:10px;width:100%;border-radius:8px;padding:11px 13px;font-size:13px}
  .alert-demo.warn{background:rgba(255,75,79,.1);border:1px solid rgba(255,75,79,.4);color:var(--program)}
  .alert-demo.ok{background:rgba(55,210,127,.1);border:1px solid rgba(55,210,127,.42);color:var(--preview)}
  .status-demo{display:inline-flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;padding:3px 8px;border-radius:4px}
  .status-demo.live{background:var(--program);color:#fff} .status-demo.next{background:rgba(55,210,127,.25);color:var(--preview)}
  .status-demo.idle{background:var(--panel-2);color:var(--faint);border:1px solid var(--line)}
  .empty-demo{width:100%;border:1px dashed var(--line);border-radius:8px;padding:18px;text-align:center;color:var(--faint);font-size:13px}
  .empty-demo b{display:block;color:var(--muted);margin-bottom:4px}
  @media(max-width:760px){.compgrid{grid-template-columns:1fr}}

  /* test plan */
  .testplan{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
  .tp{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}
  .tp h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);font-weight:500;margin-bottom:12px}
  .tp ul{list-style:none;display:grid;gap:9px} .tp li{font-size:13.5px;color:var(--muted);padding-left:16px;position:relative}
  .tp li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--amber)}
  .tp li b{color:var(--ink)}
  @media(max-width:760px){.testplan{grid-template-columns:1fr}}

  /* iteration */
  .iters{display:grid;gap:14px;margin-top:8px}
  .iter{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .iter .ihead{display:flex;align-items:center;gap:12px;padding:15px 20px;background:var(--panel-2);border-bottom:1px solid var(--line)}
  .iter .icyc{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--amber);border:1px solid rgba(255,162,62,.4);border-radius:4px;padding:3px 8px}
  .iter .ihead b{font-size:15px;color:var(--ink)}
  .iter .ibody{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft)}
  .iter .ibody>div{background:var(--panel);padding:16px 18px}
  .iter .ibody .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
  .iter .ibody .v{font-size:13px;color:var(--muted)}
  .iter .ibody .v.impact{color:var(--preview)}
  @media(max-width:760px){.iter .ibody{grid-template-columns:1fr 1fr}}

  /* outcomes */
  .ocols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
  .ocard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}
  .ocard .oh{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:12px}
  .ocard ul{list-style:none;display:grid;gap:9px} .ocard li{font-size:13.5px;color:var(--muted);padding-left:15px;position:relative}
  .ocard li::before{content:"+";position:absolute;left:0;color:var(--preview);font-family:"IBM Plex Mono",monospace}
  .ocard li b{color:var(--ink)}
  @media(max-width:760px){.ocols{grid-template-columns:1fr}}

  /* projected banner */
  .projected{display:flex;align-items:center;gap:10px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
    color:var(--amber);background:rgba(255,162,62,.08);border:1px solid rgba(255,162,62,.3);border-radius:8px;
    padding:11px 14px;margin-top:14px;letter-spacing:.02em}
  .projected i{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}

  /* why renewed vision */
  .why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
  .why-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px}
  .why-card b{display:block;color:var(--amber);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:9px}
  .why-card p{font-size:14px;color:var(--muted)}
  @media(max-width:760px){.why-grid{grid-template-columns:1fr}}

  .scaleeco{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
  .ecocard{background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:20px}
  .ecocard .pn{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:17px;color:var(--ink);margin-bottom:8px}
  .ecocard p{font-size:13px;color:var(--muted)}
  @media(max-width:760px){.scaleeco{grid-template-columns:1fr}}


  /* ============================================================
     EXPANSION COMPONENTS  (UX Designer II depth pass)
     Reuses existing tokens: --void --base --panel --panel-2 --line
     --ink --muted --faint --program --preview --amber --amber-soft
     ============================================================ */

  /* shared small label used across new artifacts */
  .arte{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--faint)}
  .lede2{color:var(--muted);max-width:760px;margin:6px 0 22px;font-size:15.5px;line-height:1.6}

  /* ---- stakeholder map (SVG container) ---- */
  .svgwrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin-top:14px;overflow:hidden}
  .svgwrap svg{display:block;width:100%;height:auto}
  .svgcap{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--faint);margin-top:10px;letter-spacing:.04em}

  /* ---- business impact chain ---- */
  .bimpact{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
  .bimpact .bcell{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 13px}
  .bimpact .bcell h5{margin:0 0 5px;font-size:13.5px;color:var(--ink)}
  .bimpact .bcell p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
  .bimpact .bcell .tag{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--amber);display:block;margin-bottom:6px}

  /* ---- generic two-col explainer grid ---- */
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
  .duo .card2{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:18px}
  .duo .card2 h4{margin:0 0 8px;font-size:15px;color:var(--ink)}
  .duo .card2 ul{margin:0;padding-left:18px}
  .duo .card2 li{font-size:13px;color:var(--muted);margin:5px 0;line-height:1.5}

  /* ---- risk / engineering register tables ---- */
  .regtable{width:100%;border-collapse:collapse;margin-top:14px;font-size:12.5px;
    border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .regtable th{background:var(--panel-2);color:var(--faint);font-family:"IBM Plex Mono",monospace;
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:10px 12px;font-weight:600}
  .regtable td{background:var(--panel);border-top:1px solid var(--line);padding:11px 12px;color:var(--muted);
    vertical-align:top;line-height:1.5}
  .regtable td b{color:var(--ink);font-weight:600}
  .sev{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;
    padding:2px 8px;border-radius:20px;white-space:nowrap}
  .sev.hi{background:rgba(255,75,79,.14);color:var(--program);border:1px solid rgba(255,75,79,.4)}
  .sev.med{background:rgba(255,162,62,.14);color:var(--amber);border:1px solid rgba(255,162,62,.4)}
  .sev.low{background:rgba(55,210,127,.13);color:var(--preview);border:1px solid rgba(55,210,127,.38)}

  /* ---- dependency map (chips + arrows via SVG) ---- */
  .depnote{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.55}

  /* ---- tradeoff matrix ---- */
  .tomx{width:100%;border-collapse:collapse;margin-top:14px;font-size:12.5px;border:1px solid var(--line);
    border-radius:10px;overflow:hidden}
  .tomx th{background:var(--panel-2);color:var(--faint);font-family:"IBM Plex Mono",monospace;font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:10px 12px}
  .tomx td{background:var(--panel);border-top:1px solid var(--line);padding:11px 12px;color:var(--muted);vertical-align:top}
  .tomx td b{color:var(--ink)}
  .pick{color:var(--preview);font-weight:600}

  /* ---- why-not decision cards ---- */
  .whynot{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
  .whynot .wn{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;position:relative}
  .whynot .wn .q{font-size:15px;color:var(--ink);font-weight:600;margin:0 0 8px;display:flex;gap:8px;align-items:flex-start}
  .whynot .wn .q::before{content:"✕";color:var(--program);font-family:"IBM Plex Mono",monospace;font-size:13px;flex:none;margin-top:2px}
  .whynot .wn p{margin:0 0 8px;font-size:12.5px;color:var(--muted);line-height:1.55}
  .whynot .wn .verdict{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;
    color:var(--preview);border-top:1px dashed var(--line);padding-top:9px;margin-top:4px}
  .whynot .wn .verdict b{color:var(--preview)}

  /* ---- interview guide ---- */
  .iguide{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 0;margin-top:14px}
  .iguide .seg{border-top:1px solid var(--line);padding:14px 20px}
  .iguide .seg:first-child{border-top:none}
  .iguide .seg h5{margin:0 0 3px;font-size:13.5px;color:var(--ink)}
  .iguide .seg .meta{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--amber);margin-bottom:9px}
  .iguide .seg ol{margin:0;padding-left:20px}
  .iguide .seg li{font-size:13px;color:var(--muted);margin:6px 0;line-height:1.55}
  .iguide .seg li em{color:var(--faint);font-style:italic}

  /* ---- participant / recruitment matrix ---- */
  .pmx{width:100%;border-collapse:collapse;margin-top:14px;font-size:12.5px;border:1px solid var(--line);
    border-radius:10px;overflow:hidden}
  .pmx th{background:var(--panel-2);color:var(--faint);font-family:"IBM Plex Mono",monospace;font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:10px 12px}
  .pmx td{background:var(--panel);border-top:1px solid var(--line);padding:11px 12px;color:var(--muted);vertical-align:top}
  .pmx td b{color:var(--ink)}

  /* ---- mental model two columns ---- */
  .mmcol{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:14px;border:1px solid var(--line);
    border-radius:12px;overflow:hidden}
  .mmcol .mm{padding:18px 20px}
  .mmcol .mm:first-child{background:var(--panel);border-right:1px solid var(--line)}
  .mmcol .mm:last-child{background:var(--panel-2)}
  .mmcol .mm h5{margin:0 0 10px;font-size:12px;font-family:"IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
  .mmcol .mm:first-child h5{color:var(--muted)}
  .mmcol .mm:last-child h5{color:var(--amber)}
  .mmcol .mm p{font-size:13px;color:var(--muted);margin:8px 0;line-height:1.5;padding-left:16px;position:relative}
  .mmcol .mm p::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%}
  .mmcol .mm:first-child p::before{background:var(--faint)}
  .mmcol .mm:last-child p::before{background:var(--amber)}

  /* ---- confidence-by-stage bars ---- */
  .confstage{margin-top:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
  .confrow{display:grid;grid-template-columns:130px 1fr 46px;gap:12px;align-items:center;margin:11px 0}
  .confrow .lab{font-size:12px;color:var(--muted);font-family:"IBM Plex Mono",monospace;letter-spacing:.02em}
  .confrow .track{height:13px;background:var(--panel-2);border-radius:7px;overflow:hidden;position:relative;border:1px solid var(--line-soft)}
  .confrow .fill{height:100%;border-radius:7px}
  .confrow .val{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--faint);text-align:right}
  .conflegend{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap}
  .conflegend span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--faint);display:flex;align-items:center;gap:6px}
  .conflegend i{width:11px;height:11px;border-radius:3px;display:inline-block}

  /* ---- competitive scorecards ---- */
  .scorewrap{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
  .scorecard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
  .scorecard h5{margin:0 0 12px;font-size:13.5px;color:var(--ink);display:flex;justify-content:space-between;align-items:baseline}
  .scorecard h5 span{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--faint);letter-spacing:.08em}
  .scorerow{display:grid;grid-template-columns:88px 1fr 26px;gap:9px;align-items:center;margin:8px 0}
  .scorerow .nm{font-size:11.5px;color:var(--muted)}
  .scorerow .bar{height:8px;background:var(--panel-2);border-radius:5px;overflow:hidden}
  .scorerow .bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--amber),var(--amber-soft))}
  .scorerow .sc{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--faint);text-align:right}
  .scorerow.us .nm{color:var(--preview);font-weight:600}
  .scorerow.us .bar i{background:linear-gradient(90deg,var(--preview),#7fe6ad)}

  /* ---- accessibility audit ---- */
  .a11ygrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
  .a11ygrid .ac{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:15px 17px}
  .a11ygrid .ac .h{display:flex;align-items:center;gap:9px;margin-bottom:7px}
  .a11ygrid .ac .h .wcag{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.06em;color:var(--void);
    background:var(--preview);padding:2px 7px;border-radius:5px;font-weight:700}
  .a11ygrid .ac .h h5{margin:0;font-size:13px;color:var(--ink)}
  .a11ygrid .ac p{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
  .checklist{margin-top:14px;border:1px solid var(--line);border-radius:11px;overflow:hidden}
  .checklist .ck{display:grid;grid-template-columns:24px 1fr auto;gap:10px;padding:11px 16px;border-top:1px solid var(--line);
    align-items:center;background:var(--panel)}
  .checklist .ck:first-child{border-top:none}
  .checklist .ck .tick{color:var(--preview);font-size:14px;text-align:center}
  .checklist .ck .txt{font-size:12.5px;color:var(--muted);line-height:1.45}
  .checklist .ck .txt b{color:var(--ink)}
  .checklist .ck .lvl{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--faint);letter-spacing:.06em}

  /* ---- contrast matrix ---- */
  .contrast{width:100%;border-collapse:collapse;margin-top:14px;font-size:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .contrast th{background:var(--panel-2);color:var(--faint);font-family:"IBM Plex Mono",monospace;font-size:10px;
    letter-spacing:.08em;text-transform:uppercase;padding:9px 12px;text-align:left}
  .contrast td{background:var(--panel);border-top:1px solid var(--line);padding:10px 12px;color:var(--muted)}
  .contrast .ratio{font-family:"IBM Plex Mono",monospace;color:var(--ink)}
  .contrast .swatch{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:middle;
    margin-right:7px;border:1px solid rgba(255,255,255,.15)}
  .pass{color:var(--preview);font-family:"IBM Plex Mono",monospace;font-size:10.5px}

  /* ---- keyboard map ---- */
  .keymap{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;margin-top:14px}
  .keymap .km{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:11px 13px}
  .keymap .km .act{font-size:11.5px;color:var(--muted);margin-bottom:7px}
  kbd{font-family:"IBM Plex Mono",monospace;font-size:10.5px;background:var(--panel-2);border:1px solid var(--line);
    border-bottom-width:2px;border-radius:5px;padding:2px 6px;color:var(--ink);white-space:nowrap}

  /* ---- platform / shortcut parity table ---- */
  .platx{width:100%;border-collapse:collapse;margin-top:14px;font-size:12.5px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .platx th{background:var(--panel-2);color:var(--faint);font-family:"IBM Plex Mono",monospace;font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:10px 12px}
  .platx td{background:var(--panel);border-top:1px solid var(--line);padding:11px 12px;color:var(--muted);vertical-align:top}
  .platx td b{color:var(--ink)}
  .platx .os{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--amber);letter-spacing:.08em}

  /* ---- validation phases ---- */
  .vphase{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
  .vphase .vp{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;position:relative;overflow:hidden}
  .vphase .vp::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
  .vphase .vp.p1::before{background:var(--preview)}
  .vphase .vp.p2::before{background:var(--amber)}
  .vphase .vp.p3::before{background:var(--program)}
  .vphase .vp .pn{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
  .vphase .vp h5{margin:5px 0 4px;font-size:15px;color:var(--ink)}
  .vphase .vp .when{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--amber);margin-bottom:10px}
  .vphase .vp ul{margin:0;padding-left:17px}
  .vphase .vp li{font-size:12px;color:var(--muted);margin:5px 0;line-height:1.45}
  .vmetrics{width:100%;border-collapse:collapse;margin-top:16px;font-size:12.5px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .vmetrics th{background:var(--panel-2);color:var(--faint);font-family:"IBM Plex Mono",monospace;font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:10px 12px}
  .vmetrics td{background:var(--panel);border-top:1px solid var(--line);padding:11px 12px;color:var(--muted)}
  .vmetrics td b{color:var(--ink)}
  .vmetrics .tgt{color:var(--preview);font-family:"IBM Plex Mono",monospace}

  /* ---- responsive ---- */
  @media(max-width:760px){
    .bimpact{grid-template-columns:1fr 1fr}
    .duo,.whynot,.mmcol{grid-template-columns:1fr}
    .scorewrap{grid-template-columns:1fr}
    .a11ygrid{grid-template-columns:1fr}
    .vphase{grid-template-columns:1fr}
    .confrow{grid-template-columns:96px 1fr 40px}
    .regtable,.tomx,.pmx,.contrast,.platx,.vmetrics{font-size:11.5px}
    .regtable th,.tomx th,.pmx th,.platx th{font-size:9px}
  }

/* ══════════════════════════════════════════
   FIRST SERVICE — page-specific shell styles
   (global.css owns body, cursor, atmos, glass, skip-link, footer chrome)
   ══════════════════════════════════════════ */

/* ── Reading progress bar ── */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--accent); z-index: 200; transition: width 0.1s linear;
}

/* ── TOC (sticky section nav) ── */
.toc {
  position: fixed; top: 72px; left: 0; right: 0; z-index: 89;
  overflow-x: auto; scrollbar-width: none;
}
.toc::-webkit-scrollbar { display: none; }
.toc-inner {
  display: flex; gap: 0;
  max-width: 1140px; margin: 0 auto; padding: 0 2.4rem;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--glass-edge);
}
.toc-link {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.06em; color: var(--muted-soft);
  padding: 0.75rem 1rem; white-space: nowrap;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.toc-link:hover { color: var(--ink); }
.toc-link.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Glass frame for kept-dark artifacts (prototype + sketches) ── */
.artifact-frame {
  margin-top: 18px; padding: 14px; border-radius: 20px;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}
.artifact-cap {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-soft); margin: 2px 4px 12px;
  display: flex; align-items: center; gap: 8px;
}
.artifact-cap::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* ── Frost glass on all panel card surfaces ── */
.jtbd, .card, .q-card, .heur, .panelbox, .fogg-svgwrap, .read, .rbox, .concept, .ia-note div,
.metrics, .a11y div, .score, .snapwrap, .contrib, .problem, .rbox2, .track2 div, .ctable, .acluster,
.pf, .journey, .opp-row, .prio, .prin, .matrix, .iacol, .flowcard, .sw, .typescale, .tokens, .compcard,
.tp, .iter, .ocard, .why-card, .svgwrap, .duo .card2, .whynot .wn, .iguide, .confstage, .scorecard,
.a11ygrid .ac, .keymap .km, .vphase .vp, .deflist, .reflect div, .pcard, .snaphead,
.iter .ihead, .mmcol {
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
/* ── Dark broadcast palette scoped to prototype + hand-drawn artifacts ── */
.sim-bar, .app, .sketchwrap, .crazy8, .c8 {
  --void: #0C0E13; --base: #11141B; --surf: #0A0C10; --panel: #181C25; --panel-2: #1F2530;
  --line: #2C333F; --line-soft: #222834; --ink: #EEF1F6; --muted: #AFB8C4; --faint: #828D9B;
  --amber: #FFA23E; --amber-soft: #FFC081; --program: #FF4B4F; --preview: #37D27F; --accent: #FFA23E;
}
.sketchwrap, .c8 { background: #181C25; border-color: #2C333F; }

/* ── Hero overview meta bar ── */
.cs-overview-bar {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; margin-top: 24px;
  border-radius: 18px; overflow: hidden; background: var(--glass);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow), var(--glass-inset);
}
.cs-overview-item { padding: 16px 18px; background: rgba(255,255,255,0.18); }
.cs-overview-item.is-outcome { background: var(--accent-soft); }
.cs-overview-label {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.cs-overview-value { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.3; }
@media (max-width: 860px) { .cs-overview-bar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .cs-overview-bar { grid-template-columns: 1fr; } }

/* ── Next project / keep reading ── */
.cs-keep { max-width: 760px; margin: 0 auto; }
.cs-keep-title {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted-soft); margin-bottom: 18px;
}
.cs-keep-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cs-keep-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-size: 22px; color: var(--ink);
  text-decoration: none; transition: color .2s, gap .2s;
}
.cs-keep-link:hover { color: var(--accent); gap: 12px; }
.cs-back-link {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; color: var(--accent); text-decoration: none;
}

  /* ── Reduced motion: hide cursor ── */
  @media(prefers-reduced-motion:reduce){ .cursor,.cursor-ring{ display:none; } }