/* ──────────────────────────────────────────────────────────────────────────
   unburdn.css — artifact-specific components for unburdn.psyrcuit.com
   Built ENTIRELY from the psyrcuit-website token system in screen.css
   (--violet, --violet-light, --violet-rgb, --ink*, --line, .sec, .wrap, .pxh…).
   No new palette. New elements only: smart search, embed cards, ROI,
   settings-editor demo, document modal, timeline expanders.
   ────────────────────────────────────────────────────────────────────────── */

/* The artifact runs on the light theme like the subpages, but several proof
   surfaces (embeds, demos) are dark panels that ride on top. */
body.theme-light{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ body.theme-light{ scroll-behavior:auto; } }

/* The artifact is a light-theme page. Small accent/description text (subtitles,
   labels, tags, path subs) uses a DEEPER violet so it reads clearly on white,
   while structural violet (markers, the canvas section titles, active tab) stays
   the site's brighter primary. */
body.theme-light{ --violet-light:#7c3aed; }
/* keep accents bright where they sit on the dark embed panels */
.demo-modal-live, .demo-modal-newtab, .bl-demo-live, .bl-demo-cta .arr{ color:#8b5cf6; }

/* a little white breathing room up top so the name clears the pixel field fade */
#top{ padding-top:clamp(5rem,15vh,11rem); }

/* Keep the DESKTOP layout on phones. Instead of stacking columns, scale the whole
   page down proportionally (everything is rem-based, so this is a crisp zoom-out,
   not a raster scale). Columns stay side by side, text just gets smaller. */
@media (max-width:600px){ html{ font-size:14px; } }
@media (max-width:430px){ html{ font-size:12.5px; } }
@media (max-width:360px){ html{ font-size:11px; } }

/* keep anchored sections clear of the sticky jump-bar */
.screen-content [id]{ scroll-margin-top:3.6rem; }

/* One circuit divider BETWEEN sections, centered in the gap. The divider block
   adds no padding and the rule no margin, so the equal top/bottom padding of the
   two adjacent .sec blocks leaves identical space above and below it. */
.secdiv{padding:0;}
.secdiv .pxrule{margin:0;}

/* sub-section kickers inside a section (settings, ROI, support, docs) need their
   own breathing room now that the in-section dividers are gone */
.kicker.sub{margin-top:clamp(2.6rem,7vw,4.2rem);}

/* ── A small reusable "proof tag" used under headline claims ───────────────── */
.proof-tag{display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--violet-light); margin:.2rem 0 .9rem;}
.proof-tag .d{width:6px; height:6px; background:var(--violet); display:inline-block;
  box-shadow:0 0 8px rgba(var(--violet-rgb),0.55);}

/* a quiet framing line / aside */
.aside{font-size:.92rem; line-height:1.6; color:var(--ink-3);
  border-left:1px solid rgba(var(--violet-rgb),0.35); padding:.1rem 0 .1rem 1rem; margin:1.2rem 0;}

/* the honest "two stories, never blurred" split block (MFC) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:1.6rem 0; }
@media(min-width:760px){ .split{gap:1.4rem;} }
.split-card{border:1px solid var(--line); padding:1.2rem 1.25rem; position:relative;}
.split-card .lab{font-size:.68rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--violet-light); margin-bottom:.55rem; display:block;}
.split-card p{font-size:.98rem; line-height:1.6; color:var(--ink-2);}
.split-card.is-soft{background:rgba(var(--violet-rgb),0.04);}

/* ── Single sticky bar: brand + section jump-nav, flush at the very top ─────── */
.ujump{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:.15rem; overflow-x:auto;
  background:rgba(255,255,255,0.94); backdrop-filter:blur(10px); border-bottom:1px solid rgba(var(--violet-rgb),0.18);
  padding:.5rem .8rem; scrollbar-width:none; -ms-overflow-style:none;}
.ujump::-webkit-scrollbar{display:none;}
.ujump-brand{flex:none; display:inline-flex; align-items:center; gap:.45rem; font-weight:700;
  letter-spacing:0.16em; font-size:.66rem; color:var(--ink); padding:.45rem .6rem .45rem 0; margin-right:.3rem;
  border-right:1px solid var(--line);}
.ujump-brand .pxdot{width:6px; height:6px;}
.ujump-brand:hover{color:var(--violet);}
.ujump a:not(.ujump-brand){flex:none; font-size:.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3);
  padding:.45rem .75rem; white-space:nowrap; border-bottom:2px solid transparent; transition:color .2s ease, border-color .2s ease;}
.ujump a:not(.ujump-brand):hover,.ujump a:not(.ujump-brand):focus-visible{color:var(--violet); outline:none;}
.ujump a.active{color:var(--ink); border-bottom-color:var(--violet);}
@media(min-width:760px){ .ujump{justify-content:center; gap:.4rem;} }
/* fit all five tabs across a narrow phone (~360-430px) with no horizontal scroll */
@media(max-width:480px){
  .ujump{ padding:.4rem .25rem; gap:0; justify-content:space-between; }
  .ujump a{ padding:.4rem .3rem; letter-spacing:0.02em; }
}

/* ── Loom / video embed (same width as a section, 16:9) ─────────────────────── */
.loomwrap{position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden;
  margin:1.3rem 0 .4rem; background:#07070b; border:1px solid var(--celled);}
.loomwrap iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}

/* ── Stat tags + bullet lists + subheads (the de-text-ify kit) ─────────────── */
.statrows{margin:.6rem 0 1.2rem;}
.statrow{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:.35rem 0;}
.stat{font-size:.74rem; letter-spacing:0.01em; color:var(--ink-2); border:1px solid var(--line);
  padding:.38rem .72rem; background:rgba(var(--violet-rgb),0.04); white-space:nowrap;}
.stat b{color:var(--violet-light); font-weight:700;}
.subh{font-size:1.2rem; font-weight:700; letter-spacing:-0.01em; color:var(--ink); line-height:1.35; margin-top:1.9rem;}
.blist{list-style:none; margin:.5rem 0 0; padding:0;}
.blist li{position:relative; padding:.24rem 0 .24rem 1.1rem; font-size:.95rem; line-height:1.5; color:var(--ink-2);}
.blist li::before{content:""; position:absolute; left:0; top:.62rem; width:6px; height:6px;
  background:var(--violet); box-shadow:0 0 6px rgba(var(--violet-rgb),.5);}
.blist-wide li{font-size:1rem; padding-top:.3rem; padding-bottom:.3rem;}

/* ── Embed card (button-gated live surface) — lifted from homepage .bl-demo ── */
.bl-demo{display:block; width:100%; margin:1.3rem 0 .4rem; padding:0; position:relative; overflow:hidden;
  background:#07070b; color:inherit; text-align:left; cursor:pointer; border:1px solid rgba(var(--violet-rgb),0.28);
  transition:border-color .25s ease, box-shadow .25s ease;}
.bl-demo:hover,.bl-demo:focus-visible{border-color:var(--violet);
  box-shadow:0 0 0 1px rgba(var(--violet-rgb),0.25), 0 16px 44px rgba(0,0,0,0.5); outline:none;}
.bl-demo-screen{display:block; position:relative; width:100%; aspect-ratio:1600/1000; background:#07070b; overflow:hidden;}
.bl-demo-shot{display:block; width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .5s ease;}
.bl-demo:hover .bl-demo-shot{transform:scale(1.015);}
/* fallback poster when no screenshot is supplied yet: a labeled dark panel */
.bl-demo-poster{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.6rem; text-align:center; padding:1.5rem; color:#cfd2e0;
  background:radial-gradient(120% 90% at 50% 0%, rgba(var(--violet-rgb),0.14), #07070b 70%);}
.bl-demo-poster .pt{font-size:.95rem; font-weight:700; color:#edeef4; letter-spacing:.01em;}
.bl-demo-poster .ps{font-size:.78rem; color:#aeb2c4; max-width:34ch; line-height:1.5;}
.bl-demo-glow{position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 70px rgba(var(--violet-rgb),0.10);
  background:radial-gradient(125% 80% at 50% -5%, transparent 52%, rgba(3,3,8,0.55) 100%);}
.bl-demo-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(10,8,18,0.5); border:1px solid rgba(var(--violet-rgb),0.55); backdrop-filter:blur(3px);
  pointer-events:none; transition:background .25s ease, transform .25s ease;}
.bl-demo:hover .bl-demo-play{background:rgba(var(--violet-rgb),0.32); transform:translate(-50%,-50%) scale(1.06);}
.bl-demo-play svg{width:22px; height:22px; fill:#fff; margin-left:3px;}
.bl-demo-bar{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.6rem .9rem; background:#0a0a12; border-top:1px solid rgba(var(--violet-rgb),0.18);}
.bl-demo-live{display:inline-flex; align-items:center; gap:.5rem; font-size:.66rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--violet-light);}
.bl-demo-live .d{width:6px; height:6px; border-radius:50%; background:var(--violet-light);
  box-shadow:0 0 8px rgba(var(--violet-rgb),0.7); animation:bldemopulse 2.2s ease-in-out infinite;}
@keyframes bldemopulse{0%,100%{opacity:1} 50%{opacity:.32}}
.bl-demo-cta{font-size:.72rem; letter-spacing:0.04em; color:#cfd2e0;}
.bl-demo-cta .arr{color:var(--violet-light);}

/* ── Full-screen live-demo viewer — lifted verbatim from homepage ─────────── */
body.demo-open{overflow:hidden;}
.demo-modal{position:fixed; inset:0; z-index:1000; display:flex; padding:0;
  background:rgba(3,3,8,0.93); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;}
.demo-modal.open{opacity:1; visibility:visible;}
.demo-modal-panel{position:relative; margin:auto; width:min(1340px,96vw); height:min(94vh,100%);
  display:flex; flex-direction:column; background:#070710; overflow:hidden;
  border:1px solid rgba(var(--violet-rgb),0.32); box-shadow:0 30px 90px rgba(0,0,0,0.6);}
.demo-modal-top{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1rem; border-bottom:1px solid rgba(255,255,255,0.08);}
.demo-modal-titles{display:flex; align-items:center; gap:.8rem; min-width:0;}
.demo-modal-live{display:inline-flex; align-items:center; gap:.45rem; font-size:.62rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--violet-light); white-space:nowrap;}
.demo-modal-live .d{width:6px; height:6px; border-radius:50%; background:var(--violet-light);
  box-shadow:0 0 8px rgba(var(--violet-rgb),0.7);}
.demo-modal-title{font-size:1rem; font-weight:700; color:#edeef4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.demo-modal-close{flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(255,255,255,0.16); color:#edeef4; font-size:1rem; cursor:pointer;
  transition:border-color .2s ease, background .2s ease;}
.demo-modal-close:hover,.demo-modal-close:focus-visible{border-color:var(--violet); background:rgba(var(--violet-rgb),0.12); outline:none;}
.demo-modal-explainer{margin:0; padding:.7rem 1rem; font-size:.84rem; line-height:1.5; color:#aeb2c4;
  border-bottom:1px solid rgba(255,255,255,0.06);}
.demo-modal-explainer strong{color:var(--violet-light); font-weight:600;}
.demo-modal-stage{position:relative; flex:1 1 auto; min-height:0; background:#0c0c14;}
.demo-modal-scroll{position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch;}
.demo-frame-sizer{position:relative;}
.demo-modal-frame{border:0; display:block; transform-origin:top left; background:#fff;}
.demo-modal-loading{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; gap:1rem;
  align-items:center; justify-content:center; background:#0c0c14; color:#aeb2c4;
  font-size:.74rem; letter-spacing:0.12em; text-transform:uppercase; text-align:center; padding:1rem;}
.demo-modal-loading.done{display:none;}
.demo-modal-loading a{color:var(--violet-light);}
.demo-spin{width:34px; height:34px; border:2px solid rgba(var(--violet-rgb),0.25); border-top-color:var(--violet-light);
  border-radius:50%; animation:demospin .8s linear infinite;}
@keyframes demospin{to{transform:rotate(360deg)}}
.demo-modal-controls{display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap;
  padding:.6rem 1rem; border-top:1px solid rgba(255,255,255,0.08);}
.demo-zoom{display:inline-flex; align-items:center; gap:.4rem;}
.demo-zoom button{min-width:40px; height:32px; padding:0 .55rem; background:transparent; color:#edeef4;
  border:1px solid rgba(255,255,255,0.16); font-size:.85rem; line-height:1; cursor:pointer;
  transition:border-color .2s ease, background .2s ease;}
.demo-zoom button:hover,.demo-zoom button:focus-visible{border-color:var(--violet); background:rgba(var(--violet-rgb),0.12); outline:none;}
.demo-hint{font-size:.7rem; letter-spacing:0.04em; color:#8a8ea3;}
.demo-modal-newtab{font-size:.76rem; letter-spacing:0.04em; color:var(--violet-light); white-space:nowrap;}
.demo-modal-newtab:hover{color:#fff;}
@media (max-width:560px){
  .demo-modal-panel{width:100vw; height:100vh; border:0;}
  .demo-modal-explainer{font-size:.8rem;}
  .demo-hint{flex-basis:100%; order:3;}
}

/* ── Native ROI element (rebuilt, capture removed) ────────────────────────── */
.roi{border:1px solid var(--line); margin-top:1.6rem; background:rgba(var(--violet-rgb),0.03);}
.roi-head{padding:1rem 1.2rem; border-bottom:1px solid var(--line);}
.roi-head .t{font-size:1rem; font-weight:700; color:var(--ink);}
.roi-head .s{font-size:.82rem; color:var(--ink-3); margin-top:.25rem; line-height:1.5;}
.roi-body{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; padding:1rem;}
@media(min-width:760px){ .roi-body{gap:1.4rem; padding:1.2rem;} }
.roi-field{margin-bottom:.95rem;}
.roi-field label{display:block; font-size:.78rem; letter-spacing:0.04em; color:var(--ink-2); margin-bottom:.35rem;}
.roi-field .hint{color:var(--ink-3); font-size:.72rem;}
.roi-field input[type=range]{width:100%; accent-color:var(--violet);}
.roi-field select,.roi-field input[type=number]{width:100%; font-family:inherit; font-size:.92rem;
  color:var(--ink); background:transparent; border:1px solid var(--line); padding:.5rem .6rem;}
.roi-field .val{float:right; color:var(--violet-light); font-weight:600;}
.roi-out{background:rgba(var(--violet-rgb),0.05); border:1px solid rgba(var(--violet-rgb),0.2); padding:1.1rem;}
.roi-metric{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.55rem 0;
  border-bottom:1px solid var(--line);}
.roi-metric:last-child{border-bottom:0;}
.roi-metric .k{font-size:.8rem; color:var(--ink-2);}
.roi-metric .v{font-size:1.15rem; font-weight:700; color:var(--ink); white-space:nowrap;}
.roi-metric.big .v{font-size:1.5rem; color:var(--violet-light);}
.roi-note{font-size:.72rem; color:var(--ink-3); line-height:1.55; padding:.9rem 1.2rem; border-top:1px solid var(--line);}

/* ── Native settings-editor demo (illustrative, synthetic data) ───────────── */
.seditor{border:1px solid var(--line); margin-top:1.4rem; overflow:hidden;}
.seditor-bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.7rem 1rem; background:rgba(var(--violet-rgb),0.05); border-bottom:1px solid var(--line);}
.seditor-bar .t{font-size:.85rem; font-weight:700; color:var(--ink);}
.seditor-demo-tag{font-size:.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--violet-light);
  border:1px solid rgba(var(--violet-rgb),0.35); padding:.2rem .5rem;}
.seditor-body{padding:1rem;}
/* the visible config hierarchy you edit in place */
.cfgtree{font-size:.86rem; border:1px solid var(--line); padding:.7rem .9rem; margin-bottom:.9rem;
  background:rgba(var(--violet-rgb),0.03);}
.cfg-group{margin:.15rem 0;}
.cfg-gkey{color:var(--ink-2); font-weight:700; letter-spacing:0.02em;}
.cfg-line{display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.3rem .4rem .3rem 1.3rem; border-bottom:1px dotted var(--line);}
.cfg-line:last-child{border-bottom:0;}
.cfg-key{color:var(--ink-3);}
.cfg-val{color:var(--ink); text-align:right; white-space:nowrap;}
.cfg-old{color:var(--ink-3); text-decoration:line-through; margin-right:.45rem;}
.cfg-new{color:var(--violet-light); font-weight:600;}
.cfg-line.is-pending{background:rgba(var(--violet-rgb),0.08);}
.cfg-line.is-set{box-shadow:inset 3px 0 0 #d8b400;}
.cfg-line.is-add{box-shadow:inset 3px 0 0 var(--violet);}
.cfg-line.is-remove{box-shadow:inset 3px 0 0 #e06a6a;}
.cfg-flag{font-size:.6rem; letter-spacing:0.12em; text-transform:uppercase; margin-left:.5rem; color:var(--ink-3);}
/* nested config hierarchy (processes > optionGroups > options > children; fees > tiers) */
.cfgtree{overflow-x:auto;}
.cfg-line.depth-0{padding-left:.3rem; border-bottom:0; margin-top:.45rem;}
.cfg-line.depth-0:first-child{margin-top:0;}
.cfg-grouprow .cfg-key{color:var(--ink-2); font-weight:700; letter-spacing:0.04em;}
.cfg-line.depth-1{padding-left:1rem;}
.cfg-line.depth-1 .cfg-key{color:var(--ink-2); font-weight:600;}
.cfg-line.depth-2{padding-left:2rem;}
.cfg-line.depth-3{padding-left:3rem;}
.cfg-line.depth-4{padding-left:4rem;}
.cfg-line.depth-5{padding-left:5rem;}
.cfg-line.depth-3 .cfg-key,.cfg-line.depth-4 .cfg-key,.cfg-line.depth-5 .cfg-key{color:var(--ink-3);}
.cfg-line.depth-2 .cfg-val,.cfg-line.depth-3 .cfg-val,.cfg-line.depth-4 .cfg-val{color:var(--ink-2);}
.seditor-status.reject{color:#e06a6a;}
.seditor-input{display:flex; gap:.5rem; flex-wrap:wrap;}
.seditor-input input{flex:1; min-width:200px; font-family:inherit; font-size:.9rem; color:var(--ink);
  background:transparent; border:1px solid var(--line); padding:.55rem .65rem;}
.seditor-examples{display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 0;}
.seditor-ex{cursor:pointer; font-family:inherit; font-size:.72rem; color:var(--ink-2); background:transparent;
  border:1px solid var(--line); padding:.3rem .6rem;}
.seditor-ex:hover{border-color:var(--violet); color:var(--violet-light);}
.btn{cursor:pointer; font-family:inherit; font-size:.85rem; letter-spacing:0.03em; padding:.55rem 1.1rem;
  border:1px solid rgba(var(--violet-rgb),0.4); color:var(--violet-light); background:transparent;
  transition:all .2s ease;}
.btn:hover{border-color:var(--violet); background:rgba(var(--violet-rgb),0.08);}
.btn.primary{background:rgba(var(--violet-rgb),0.14); color:var(--ink); border-color:var(--violet);}
.btn:disabled{opacity:.4; cursor:not-allowed;}
.seditor-actions{display:flex; gap:.6rem; align-items:center; margin-top:.9rem; flex-wrap:wrap;}
.seditor-actions[hidden]{display:none;}
.seditor-status{font-size:.8rem; color:var(--ink-3); line-height:1.4;}
.seditor-status.applied{color:var(--violet-light);}
.seditor-status.pending{color:#d8b400;}

/* ── Document modal (safe trio) ───────────────────────────────────────────── */
.docrow{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:1.3rem;}
@media(min-width:640px){ .docrow{gap:.8rem;} }
.doccard{cursor:pointer; text-align:left; font-family:inherit; background:transparent;
  border:1px solid var(--line); padding:1rem; transition:border-color .2s ease, background .2s ease;}
.doccard:hover,.doccard:focus-visible{border-color:var(--violet); background:rgba(var(--violet-rgb),0.05); outline:none;}
.doccard .dt{font-size:.92rem; font-weight:700; color:var(--ink); line-height:1.3;}
.doccard .dd{font-size:.78rem; color:var(--ink-3); margin-top:.4rem; line-height:1.5;}
.doccard .dmeta{font-size:.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--violet-light); margin-top:.6rem;}
.docmodal{position:fixed; inset:0; z-index:1000; display:flex; padding:0;
  background:rgba(3,3,8,0.6); backdrop-filter:blur(4px); opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;}
.docmodal.open{opacity:1; visibility:visible;}
.docmodal-panel{position:relative; margin:auto; width:min(820px,94vw); height:min(90vh,100%);
  display:flex; flex-direction:column; background:#fff; color:#0a0a0c; overflow:hidden;
  border:1px solid rgba(var(--violet-rgb),0.3); box-shadow:0 30px 90px rgba(0,0,0,0.5);}
body:not(.theme-light) .docmodal-panel{background:#0b0b12; color:#edeef4;}
.docmodal-top{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.1rem; border-bottom:1px solid var(--line);}
.docmodal-title{font-size:.95rem; font-weight:700;}
.docmodal-close{flex:none; width:36px; height:36px; border:1px solid var(--line); background:transparent;
  color:inherit; cursor:pointer; font-size:1rem;}
.docmodal-close:hover{border-color:var(--violet);}
.docmodal-body{flex:1; overflow:auto; padding:1.3rem 1.4rem; -webkit-overflow-scrolling:touch;}
.docmodal-body h4{font-size:1rem; margin:1.2rem 0 .5rem; color:var(--violet-light);}
.docmodal-body h4:first-child{margin-top:0;}
.docmodal-body .docmeta{font-size:.74rem; color:var(--ink-3); margin:0 0 .4rem; letter-spacing:.01em;}
.docmodal-body p,.docmodal-body li{font-size:.9rem; line-height:1.6; margin-bottom:.6rem;}
.docmodal-body ul{padding-left:1.2rem; margin-bottom:.8rem;}
.docmodal-body table{width:100%; border-collapse:collapse; font-size:.82rem; margin:.6rem 0 1rem;}
.docmodal-body th,.docmodal-body td{border:1px solid var(--line); padding:.5rem .6rem; text-align:left; vertical-align:top;}
.docmodal-body th{color:var(--violet-light); font-weight:700;}
.docmodal-note{font-size:.74rem; color:var(--ink-3); padding:.7rem 1.1rem; border-top:1px solid var(--line);}
.docmodal-note a,.docmodal-loading a{color:var(--violet-light); text-decoration:underline;}
.docmodal-body .docpage{display:block; width:100%; height:auto; margin:0 auto 14px; border:1px solid var(--line); border-radius:4px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.18);}
.docmodal-body .docpage:last-child{margin-bottom:0;}
.docmodal-loading{display:flex; align-items:center; justify-content:center; gap:.6rem; padding:3rem 1rem; font-size:.85rem; color:var(--ink-3);}

/* ── Timeline (open-by-default + collapsed expanders) ─────────────────────── */
.tl{margin-top:2rem; position:relative;}
.tl-item{border-top:1px solid var(--line); padding:1.4rem 0;}
.tl-item:last-child{border-bottom:1px solid var(--line);}
.tl-when{font-size:.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--violet-light); margin-bottom:.4rem;}
.tl-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:.8rem;}
@media(min-width:760px){ .tl-grid{gap:1.2rem;} }
.tl-title{font-size:1.1rem; font-weight:700; color:var(--ink); line-height:1.3;}
.tl-sub{font-size:.92rem; color:var(--violet-light); margin-top:.2rem; line-height:1.4;}
.tl-body{font-size:.94rem; line-height:1.6; color:var(--ink-2); margin-top:.55rem;}
.tl-map{border-left:1px solid rgba(var(--violet-rgb),0.4); padding:.2rem 0 .2rem 1rem; align-self:start;}
.tl-map .ml{font-size:.66rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--violet-light); margin-bottom:.35rem;}
.tl-map p{font-size:.85rem; line-height:1.55; color:var(--ink-3);}
/* collapsed minor beats */
.tl-collapsed{border-top:1px solid var(--line);}
.tl-toggle{display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; cursor:pointer;
  font-family:inherit; background:transparent; border:0; padding:1rem 0; color:var(--ink-2);}
.tl-toggle:hover{color:var(--violet-light);}
.tl-toggle .pm{flex:none; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--violet-light); font-size:.9rem; line-height:1;}
.tl-toggle .lbl{font-size:.92rem; letter-spacing:0.02em;}
.tl-toggle[aria-expanded=true] .pm{border-color:var(--violet);}
/* animatable so the section grows smoothly and the divider below rides down */
.tl-panel{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.tl-panel.show{max-height:32rem;}
.tl-panel p{font-size:.9rem; line-height:1.6; color:var(--ink-3); padding:.1rem 0 1.2rem 1.45rem;}
@media (prefers-reduced-motion: reduce){ .tl-panel{transition:none;} }

/* ── Range proof cards (reuse .bl look, lighter) ──────────────────────────── */
/* range cards carry more text, so on phones they read better stacked full-width
   (shorter, wider boxes) than as three tall narrow columns */
.range{display:grid; grid-template-columns:1fr; gap:.7rem; margin-top:1.6rem;}
@media(min-width:760px){ .range{grid-template-columns:repeat(3,1fr); gap:1rem;} }
.rangecard{border:1px solid var(--line); padding:1.1rem 1.15rem;}
.rangecard .rt{font-size:1rem; font-weight:700; color:var(--ink); line-height:1.3;}
.rangecard .rb{font-size:.88rem; line-height:1.55; color:var(--ink-2); margin-top:.5rem;}

/* ── Payoff "Run" callout ─────────────────────────────────────────────────── */
.runline{border:1px solid rgba(var(--violet-rgb),0.35); background:rgba(var(--violet-rgb),0.05);
  padding:1.4rem 1.4rem; margin-top:1.4rem;}
.runline .rk{font-size:.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--violet-light); margin-bottom:.5rem;}
.runline p{font-size:1.05rem; line-height:1.6; color:var(--ink);}

/* visually-hidden, for accessible labels */
.vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}

/* ── Unified container system ──────────────────────────────────────────────
   Every container, tag, and button shares one violet tint family, a touch darker
   than the white page, so they read as distinct "this is a thing" surfaces vs.
   plain body text. Two levels: standard and emphasis. */
body.theme-light{
  --cellbg:rgba(var(--violet-rgb),0.10);     /* standard container */
  --cellbg2:rgba(var(--violet-rgb),0.16);    /* emphasis / inner / tags */
  --celled:rgba(var(--violet-rgb),0.32);     /* shared border */
}
.split-card,.doccard,.rangecard,.roi,.seditor{ background:var(--cellbg); border-color:var(--celled); }
.split-card.is-soft,.roi-out,.seditor-bar,.cfgtree,.runline{ background:var(--cellbg2); border-color:var(--celled); }
.stat{ background:var(--cellbg2); border-color:var(--celled); }
.doccard:hover,.doccard:focus-visible{ background:var(--cellbg2); }
/* buttons + chips share the same family so they read as actionable surfaces */
.btn,.seditor-ex,.email-btn{ background:var(--cellbg); border-color:var(--celled); }
.btn:hover,.seditor-ex:hover,.email-btn:hover{ background:var(--cellbg2); }
.btn.primary{ background:rgba(var(--violet-rgb),0.22); border-color:var(--violet); }
.seditor-demo-tag{ background:var(--cellbg); border-color:var(--celled); }

/* ════════════════════════════════════════════════════════════════════════════
   PRODUCT SKINS — the interactive boxes look like the real products they are.
   MFC boxes (Tool section) take MFC's dark, glassy Outfit look with a cyan
   accent; Screen boxes (Test section) take Screen's cream + teal editorial look
   with Fraunces/Hanken. Copy OUTSIDE the boxes keeps the neutral page style.
   ════════════════════════════════════════════════════════════════════════════ */

/* ---------- MFC skin (Beat 1: #mfc) ---------- */
#mfc .roi, #mfc .seditor, #mfc .split-card, #mfc .doccard, #mfc .bl-demo, #mfc .loomwrap, #mfc .stat {
  --ink:#e8e8f0; --ink-2:#b9b9c9; --ink-3:#8a8a9d; --line:rgba(139,92,246,0.22);
  background:#0f0f16; color:#e8e8f0; border:1px solid rgba(139,92,246,0.22); border-radius:14px;
  font-family:'Outfit',system-ui,sans-serif;
}
#mfc .roi, #mfc .seditor { overflow:hidden; }
#mfc .loomwrap { border-radius:14px; }
#mfc .stat { padding:.4rem .8rem; border-radius:999px; color:#b9b9c9; }
#mfc .stat b { color:#00f0ff; font-family:'JetBrains Mono',monospace; }
/* values stay mono like the real MFC UI */
#mfc .cfg-key, #mfc .cfg-val, #mfc .roi-metric .v, #mfc .roi-field .val, #mfc .seditor-bar .t { font-family:'JetBrains Mono',monospace; }
/* MFC cyan accent */
#mfc .seditor-demo-tag { color:#00f0ff; border-color:rgba(0,240,255,0.4); }
#mfc .roi-metric.big .v { color:#00f0ff; }
#mfc .cfg-new { color:#00f0ff; }
#mfc .roi-head .t, #mfc .split-card .lab { font-family:'Outfit',sans-serif; }
#mfc .roi-out { background:rgba(0,240,255,0.06); border:1px solid rgba(0,240,255,0.22); border-radius:10px; }
#mfc .roi-note, #mfc .seditor .seditor-status, #mfc .roi-field .hint { color:#8a8a9d; }
#mfc .roi-field input[type=range] { accent-color:#8b5cf6; }
#mfc .roi-field select, #mfc .seditor-input input {
  background:rgba(0,0,0,0.4); color:#e8e8f0; border:1px solid rgba(139,92,246,0.3); border-radius:8px; font-family:'Outfit',sans-serif;
}
#mfc .cfgtree { background:rgba(0,0,0,0.35); border:1px solid rgba(139,92,246,0.2); border-radius:10px; }
#mfc .seditor-bar { background:rgba(139,92,246,0.12); border-bottom:1px solid rgba(139,92,246,0.2); }
#mfc .btn { border-radius:8px; font-family:'Outfit',sans-serif; color:#a78bfa; border-color:rgba(139,92,246,0.5); }
#mfc .btn:hover { background:rgba(139,92,246,0.12); border-color:#8b5cf6; }
#mfc .btn.primary { background:linear-gradient(135deg,#00e676,#00b860); color:#04130b; border-color:transparent; }
#mfc .seditor-ex { border-radius:7px; color:#b9b9c9; border-color:rgba(139,92,246,0.25); font-family:'Outfit',sans-serif; }
#mfc .seditor-ex:hover { border-color:#00f0ff; color:#00f0ff; }
#mfc .doccard .dmeta { color:#00f0ff; }
#mfc .doccard .dt { color:#e8e8f0; }
#mfc .split-card.is-soft { background:#0c1419; border-color:rgba(0,240,255,0.22); }
#mfc .bl-demo { background:#0b0b12; }

/* ---------- Screen skin (Beat 2: #screen) ---------- */
#screen .bl-demo, #screen .split-card {
  --ink:#1c1b17; --ink-2:#5a574e; --ink-3:#5a574e; --line:#ddd6c7;
  background:#fbf9f4; color:#1c1b17; border:1px solid #ddd6c7; border-radius:14px;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
}
#screen .split-card .lab { font-family:'Fraunces',Georgia,serif; color:#1f5f5b; font-weight:600; }
#screen .split-card p, #screen .blist li { color:#5a574e; font-family:'Hanken Grotesk',sans-serif; }
#screen .split-card.is-soft { background:#e4edeb; }
#screen .blist li::before { background:#1f5f5b; }
#screen .bl-demo { overflow:hidden; }
#screen .bl-demo-poster { background:radial-gradient(120% 100% at 50% 0%, #143b38 0%, #0e2a28 70%); }
#screen .bl-demo-poster .pt { color:#f4f0e8; font-family:'Fraunces',Georgia,serif; }
#screen .bl-demo-poster .ps { color:#cfe0dc; }
#screen .bl-demo-bar { background:#fbf9f4; border-top:1px solid #ddd6c7; }
#screen .bl-demo-live { color:#1f5f5b; }
#screen .bl-demo-live .d { background:#1f5f5b; }
#screen .bl-demo-cta { color:#5a574e; }
#screen .bl-demo-cta .arr { color:#1f5f5b; }
#screen .bl-demo-play { background:rgba(31,95,91,0.28); }
#screen .bl-demo:hover .bl-demo-play { background:rgba(31,95,91,0.42); }