:root{
  --primary:#EE542F; --primary-dark:#D4441F; --primary-light:#FFF0EC;
  --accent:#0EA5A0; --accent-light:#E8FAF9;
  --charcoal:#1E1E20; --g900:#2D2D30; --g700:#4A4A50; --g600:#6B6B73;
  --g500:#8E8E96; --g400:#ABABAF; --g300:#D1D1D4; --g200:#E8E8EA;
  --g100:#F3F3F4; --g50:#F9F9FA; --white:#fff; --cream:#FDFCFB;

  /* the four actors */
  --mem:#3B6FD4;  --mem-l:#EAF0FC;  --mem-b:#BED0F0;
  --bot:#7A5AF8;  --bot-l:#F1EDFE;  --bot-b:#D5C9FC;
  --ob:#0E8F72;   --ob-l:#E6F5F0;   --ob-b:#A9DCC7;
  --staff:#D4441F;--staff-l:#FFF0EC;--staff-b:#F8C9B9;

  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --head:"DM Sans",Poppins,-apple-system,sans-serif;
  --shadow-sm:0 1px 2px rgba(30,30,32,.06),0 1px 3px rgba(30,30,32,.05);
  --shadow-md:0 4px 12px rgba(30,30,32,.07),0 2px 4px rgba(30,30,32,.04);
  --shadow-lg:0 12px 32px rgba(30,30,32,.10),0 4px 8px rgba(30,30,32,.05);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--g900);
  font:400 1rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--head);line-height:1.2;margin:0;letter-spacing:-.018em;color:var(--charcoal)}
p{margin:0 0 1em}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.narrow{max-width:900px;margin:0 auto;padding:0 32px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:5px}

/* ---------- masthead ---------- */
.mast{position:sticky;top:0;z-index:60;background:rgba(253,252,251,.93);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--g200)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:62px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--head);font-weight:700;
  font-size:1rem;color:var(--charcoal);letter-spacing:-.02em;text-decoration:none}
.brand .dot{width:26px;height:26px;border-radius:7px;flex:0 0 auto;background:var(--primary);
  display:grid;place-items:center;color:#fff;font-size:.72rem;font-weight:700}
.mast-for{font-size:.78rem;color:var(--g600);display:flex;align-items:center;gap:9px}
.mast-for b{color:var(--g900);font-weight:600}
.pill{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 9px;border-radius:9999px;
  background:var(--primary-light);color:var(--primary-dark);border:1px solid #F8C9B9}

/* ---------- hero ---------- */
.hero{padding:72px 0 54px;background:
  radial-gradient(880px 340px at 80% -10%,var(--accent-light) 0%,transparent 62%),
  radial-gradient(680px 300px at 6% 0%,var(--primary-light) 0%,transparent 58%)}
.eyebrow{font-family:var(--head);font-size:.73rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--primary);margin-bottom:18px}
.hero h1{font-size:3.2rem;max-width:16ch;margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--primary)}
.lede{font-size:1.14rem;line-height:1.62;color:var(--g700);max-width:64ch;font-weight:300}
.lede strong{font-weight:600;color:var(--g900)}
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:center}
.hero-split .hero-main .lede{max-width:none}
.glance{background:var(--white);border:1px solid var(--g200);border-radius:14px;box-shadow:var(--shadow-md);padding:22px 22px 8px}
.glance-t{font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--g500);margin-bottom:14px}
.glance-col{border-radius:10px;padding:14px 16px 6px;margin-bottom:14px}
.glance-col.g-before{background:var(--g50);border:1px solid var(--g200)}
.glance-col.g-after{background:var(--accent-light);border:1px solid #BfE8E5}
.glance-h{font:600 .95rem/1.3 var(--head);color:var(--charcoal);margin-bottom:8px}
.g-after .glance-h{color:#0B7F7B}
.glance ul{margin:0;padding:0 0 0 18px;font-size:.92rem;line-height:1.5;color:var(--g700)}
.glance li{margin-bottom:8px}
.glance li strong{color:var(--g900);font-weight:600}
@media (max-width:1000px){.hero-split{grid-template-columns:1fr;gap:32px}}
.why-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:34px}
.why-pt{background:var(--white);border:1px solid var(--g200);border-top:3px solid var(--primary);border-radius:10px;padding:18px 20px;box-shadow:var(--shadow-sm)}
.why-pt-h{font:600 1.02rem/1.3 var(--head);color:var(--charcoal);margin-bottom:8px}
.why-pt p{margin:0;font-size:.93rem;line-height:1.55;color:var(--g700)}
@media (max-width:900px){.why-points{grid-template-columns:1fr}}
.byline{margin:1.2em 0 0;font-size:.9rem;color:var(--g500)}
.byline strong{color:var(--g700);font-weight:600}
.castrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.cast{display:inline-flex;align-items:center;gap:8px;background:var(--white);
  border:1px solid var(--g200);border-radius:9999px;padding:7px 15px 7px 11px;
  font-size:.82rem;font-weight:500;color:var(--g700);box-shadow:var(--shadow-sm)}
.cast i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:0 0 auto}
.cast b{font-weight:600;color:var(--g900)}
.a-mem{--c:var(--mem);--c-l:var(--mem-l);--c-b:var(--mem-b)}
.a-bot{--c:var(--bot);--c-l:var(--bot-l);--c-b:var(--bot-b)}
.a-ob{--c:var(--ob);--c-l:var(--ob-l);--c-b:var(--ob-b)}
.a-staff{--c:var(--staff);--c-l:var(--staff-l);--c-b:var(--staff-b)}

/* ---------- section furniture ---------- */
section{padding:66px 0}
.sec-head{max-width:72ch;margin-bottom:38px}
.sec-num{font-family:var(--mono);font-size:.74rem;color:var(--primary);font-weight:500;
  letter-spacing:.06em;margin-bottom:11px}
.sec-head h2{font-size:2.05rem;margin-bottom:14px}
.sec-head p{color:var(--g700);font-size:1.02rem;line-height:1.62;font-weight:300;margin:0}
.sec-head p strong{font-weight:600;color:var(--g900)}
.rule{height:1px;background:var(--g200);border:0;margin:0}

/* ---------- the scroll story ---------- */
.storysec{background:var(--white);border-top:1px solid var(--g200);border-bottom:1px solid var(--g200)}
.story{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:start;position:relative}
.story>*{min-width:0}
.steps,.stage,.step,.shot{min-width:0}

/* left: the pinned stage */
.stage{position:sticky;top:max(84px,calc(50vh - 300px));align-self:start}
.stage-in{background:var(--g50);border:1px solid var(--g200);border-radius:16px;
  padding:16px;box-shadow:var(--shadow-md);position:relative}
.stage-lab{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--g500);margin-bottom:11px;min-height:15px}
.stage-lab i{width:8px;height:8px;border-radius:50%;background:var(--g300);flex:0 0 auto;transition:.3s}
.frames{position:relative;min-height:470px}
.frame{opacity:0;visibility:hidden;transition:opacity .38s ease;position:absolute;
  inset:0;pointer-events:none}
.frame.on{opacity:1;visibility:visible;position:relative;pointer-events:auto}
.stage-foot{margin-top:12px;min-height:34px}
.fires{background:var(--bot-l);border:1px solid var(--bot-b);border-radius:9px;padding:8px 11px;
  font-family:var(--mono);font-size:.68rem;color:#4B3A9E;line-height:1.5;
  opacity:0;transition:opacity .3s}
.fires.on{opacity:1}
.fires b{font-weight:500;color:#2F2470}

/* right: the steps */
.steps{padding-bottom:20vh}
.step{min-height:70vh;display:flex;flex-direction:column;justify-content:center;
  padding:26px 0 26px 30px;border-left:2px solid var(--g200);position:relative;transition:border-color .35s}
.step.on{border-left-color:var(--c)}
.step::before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--white);
  border:2px solid var(--g300);transition:.35s}
.step.on::before{border-color:var(--c);background:var(--c);box-shadow:0 0 0 5px var(--c-l)}
.step-meta{display:flex;align-items:center;gap:11px;margin-bottom:13px;flex-wrap:wrap}
.who{display:inline-flex;align-items:center;gap:7px;background:var(--c-l);border:1px solid var(--c-b);
  color:var(--c);border-radius:9999px;padding:4px 12px;font-size:.72rem;font-weight:700;
  letter-spacing:.03em}
.when{font-family:var(--mono);font-size:.68rem;color:var(--g500);letter-spacing:.04em}
.step h3{font-size:1.45rem;margin-bottom:12px;max-width:22ch}
.step p{font-size:.98rem;line-height:1.66;color:var(--g700);max-width:52ch;font-weight:300}
.step p strong{font-weight:600;color:var(--g900)}
.step p code{font-family:var(--mono);font-size:.84em;background:var(--g100);padding:1px 5px;
  border-radius:4px;border:1px solid var(--g200);font-weight:400}
.aside{margin-top:16px;border-left:2px solid var(--c-b);padding:2px 0 2px 15px;max-width:50ch}
.aside .at{font-family:var(--head);font-size:.74rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--c);margin-bottom:5px}
.aside p{font-size:.87rem;line-height:1.58;color:var(--g600);margin:0}

/* progress rail */
.rail{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:9px;opacity:0;transition:opacity .3s;pointer-events:none}
.rail.on{opacity:1;pointer-events:auto}
.rail button{width:9px;height:9px;padding:0;border-radius:50%;border:1.5px solid var(--g300);
  background:var(--white);cursor:pointer;transition:.25s;display:block}
.rail button[aria-current="true"]{background:var(--c);border-color:var(--c);
  transform:scale(1.45)}
.rail button:hover{border-color:var(--g500)}

/* ---------- mockups: member portal / staff system / n8n / workflow / email ---------- */
.shot{border:1px solid var(--g300);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm);
  background:#fff}
.shot-bar{background:var(--g100);border-bottom:1px solid var(--g200);padding:7px 11px;
  display:flex;align-items:center;gap:8px}
.shot-bar .dots{display:flex;gap:5px}
.shot-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--g300);display:block}
.shot-bar .url{font-family:var(--mono);font-size:.65rem;color:var(--g600);background:#fff;
  border:1px solid var(--g200);border-radius:5px;padding:2px 9px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Member portal */
.pt{font-family:Montserrat,var(--sans);font-size:12px;color:#393939;background:#f7f7f7}
.pt-top{background:var(--portal,#005db8);color:#fff;padding:9px 13px;display:flex;align-items:center;
  justify-content:space-between}
.pt-logo{font-weight:700;font-size:12.5px;display:flex;align-items:center;gap:7px}
.pt-logo span{background:#fff;color:var(--portal,#005db8);border-radius:3px;padding:1px 5px;font-size:10.5px}
.pt-nav{display:flex;gap:13px;font-size:10px;font-weight:500;opacity:.93}
.pt-nav b{border-bottom:2px solid #ffb810;padding-bottom:2px;font-weight:600}
.pt-body{padding:14px 15px 16px}
.pt-h{font-size:15px;font-weight:700;color:var(--portal-dark,#00305e);margin:0 0 3px}
.pt-sub{font-size:10px;color:#6d6d6d;margin:0 0 12px}
.pt-card{background:#fff;border:1px solid #e3e6ea;border-radius:6px;padding:12px 13px;margin-bottom:10px}
.pt-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;
  border-top:1px solid #eef0f3;font-size:10.5px}
.pt-row:first-of-type{border-top:0}
.pt-row .lab{color:#4d4d4d}
.pt-row .val{font-weight:600;color:#1f1f1f;font-variant-numeric:tabular-nums}
.pt-tot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;
  padding-top:9px;border-top:2px solid var(--portal,#005db8);font-size:12.5px;font-weight:700;color:var(--portal-dark,#00305e)}
.pt-btn{display:block;background:var(--portal,#005db8);color:#fff;border-radius:4px;padding:9px;
  font:600 11.5px Montserrat,sans-serif;text-align:center;margin-top:10px}
.pt-fld{margin-bottom:9px}
.pt-fld label{display:block;font-size:9.5px;font-weight:600;color:#5a5a5a;margin-bottom:3px}
.pt-fld .in{border:1px solid #ccd2d8;border-radius:4px;padding:6px 8px;font-size:10.5px;
  color:#333;background:#fff}
.pt-fld .in.sel{display:flex;justify-content:space-between;align-items:center;color:#333}
.pt-fld .in.sel::after{content:"\25BE";color:#8a94a0;font-size:9px}
.pt-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pt-note{font-size:9px;color:#7a7a7a;margin-top:7px;line-height:1.45}
.pt-pill{display:inline-block;background:#e6f4ec;color:#1b7f5a;font-size:9px;font-weight:700;
  padding:2px 7px;border-radius:9999px}
.pt-units{background:#f4f8fc;border:1px solid #d7e4f2;border-radius:5px;padding:9px 11px}
.pt-unit{display:flex;justify-content:space-between;padding:4px 0;font-size:10.5px;
  border-top:1px dashed #dce7f3}
.pt-unit:first-of-type{border-top:0}
.pt-unit .u{color:#5a6a7a} .pt-unit .v{font-weight:600;color:var(--portal-dark,#00305e)}

/* iMIS staff chrome */
.ad{font-family:"Segoe UI",Tahoma,sans-serif;font-size:12px;color:#333;background:#fff}
.ad-top{background:#33454f;color:#e8edf0;padding:7px 12px;display:flex;
  justify-content:space-between;align-items:center;font-size:10.5px}
.ad-top .l{font-weight:600;letter-spacing:.03em}
.ad-top .r{opacity:.75;font-size:9.5px}
.ad-nav{background:#4a5f6b;color:#dfe7eb;padding:0 12px;display:flex;gap:2px;font-size:10px}
.ad-nav div{padding:6px 10px}
.ad-nav div.on{background:#f2f5f6;color:#33454f;font-weight:600}
.ad-crumb{padding:6px 12px;font-size:9.5px;color:#7b8b93;border-bottom:1px solid #e2e8ea;background:#f8fafb}
.ad-crumb b{color:#33454f;font-weight:600}
.ad-area{padding:12px}
.ipart{border:1px solid #d6dfe3;border-radius:5px;background:#fff;overflow:hidden}
.ipart-h{background:#f2f5f6;border-bottom:1px solid #d6dfe3;padding:7px 11px;
  display:flex;justify-content:space-between;align-items:center}
.ipart-h .t{font-weight:600;font-size:11px;color:#33454f}
.ipart-h .tag{font-family:var(--mono);font-size:8px;color:#7b8b93;background:#fff;
  border:1px solid #d6dfe3;border-radius:3px;padding:1.5px 6px}
.ipart-b{padding:10px 11px;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:10px}
.tbl th{text-align:left;background:#f8fafb;color:#5d6f78;font-weight:600;font-size:9px;
  letter-spacing:.04em;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid #dde5e8}
.tbl td{padding:6px 8px;border-bottom:1px solid #eef2f4;color:#444}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.hot td{background:#fffaf3}
.tbl .lnk{color:var(--portal,#005db8);font-weight:600}
.tbl .mut{color:#8b979d}
.chip{display:inline-block;font-size:8.5px;font-weight:600;padding:1.5px 6px;border-radius:9999px}
.chip.g{background:#e6f4ec;color:#1b7f5a} .chip.a{background:#fdf3e4;color:#b4670c}
.chip.b{background:#e8f0fa;color:var(--portal,#005db8)} .chip.r{background:#fdecec;color:#b3261e}
.chip.n{background:#eef1f4;color:#6b7780}

/* n8n canvas */
.n8n{background:#f4f4f6;background-image:radial-gradient(#d9d9de 1px,transparent 1px);
  background-size:14px 14px;padding:16px 14px}
.n8n-flow{display:flex;align-items:center;flex-wrap:nowrap;overflow-x:auto;padding:14px 0 6px}
.n8n-node{background:#fff;border:1px solid #dcdce4;border-radius:7px;padding:7px 9px;
  min-width:86px;flex:0 0 auto;box-shadow:0 1px 3px rgba(0,0,0,.07);position:relative}
.n8n-node.trig{border-left:3px solid #ff6d5a;border-radius:20px 7px 7px 20px;padding-left:12px}
.n8n-node.imisn{border-left:3px solid var(--portal,#005db8)}
.n8n-node.wf{border-left:3px solid #0EA5A0}
.n8n-node.logic{border-left:3px solid #b98cff}
.n8n-node.mail{border-left:3px solid #ffb810}
.n8n-node.now{box-shadow:0 0 0 2.5px rgba(122,90,248,.32),0 1px 3px rgba(0,0,0,.07)}
.n8n-node .nn{font-size:9.5px;font-weight:600;color:#2d2d30;line-height:1.25}
.n8n-node .ns{font-size:7.5px;color:#8e8e96;margin-top:2px;font-family:var(--mono)}
.n8n-wire{flex:0 0 30px;height:1.5px;background:#c4c4cc;position:relative}
.n8n-wire.lab{flex:0 0 58px}
.n8n-wire::after{content:"";position:absolute;right:-1px;top:-3px;border-left:6px solid #c4c4cc;
  border-top:4px solid transparent;border-bottom:4px solid transparent}
.n8n-lab{font-size:7px;font-family:var(--mono);color:#8e8e96;position:absolute;top:-14px;
  left:50%;transform:translateX(-50%);white-space:nowrap;background:#f4f4f6;padding:0 3px}

/* Workflow Manager / Formio */
.wm{font-family:var(--sans);font-size:12px;background:#fff}
.wm-top{background:#0EA5A0;color:#fff;padding:8px 13px;display:flex;justify-content:space-between;
  align-items:center;font-size:11px;font-weight:600}
.wm-top .r{font-weight:400;opacity:.9;font-size:9.5px}
.wm-b{padding:13px 14px}
.wm-h{font-size:13px;font-weight:700;color:var(--charcoal);margin:0 0 2px;font-family:var(--head)}
.wm-meta{font-size:9px;color:var(--g500);margin-bottom:12px;font-family:var(--mono)}
.fld{margin-bottom:10px}
.fld label{display:block;font-size:9.5px;font-weight:600;color:var(--g700);margin-bottom:4px}
.fld .inp{border:1px solid var(--g300);border-radius:5px;padding:6px 9px;font-size:10.5px;
  color:var(--g900);background:#fff}
.fld .inp.ro{background:var(--g50);color:var(--g600)}
.fld .radios{display:flex;gap:7px}
.fld .radios span{flex:1;border:1px solid var(--g300);border-radius:5px;padding:6px 8px;
  font-size:10px;color:var(--g600);text-align:center}
.fld .radios span.on{border-color:var(--ob);background:var(--ob-l);color:var(--ob);font-weight:600}
.wm-btn{display:inline-block;background:var(--charcoal);color:#fff;border-radius:5px;
  padding:8px 17px;font:600 10.5px var(--sans);margin-top:3px}

/* Howler email */
.mail-shot{background:#eef1f5;padding:14px}
.mail-inner{background:#fff;border-radius:5px;overflow:hidden;border:1px solid #e0e3e8;
  font-family:Montserrat,Arial,sans-serif;font-size:11px;color:#3a3a3a}
.mail-hd{background:var(--portal,#005db8);padding:12px;text-align:center;color:#fff;font-weight:700;
  font-size:12px;letter-spacing:.04em}
.mail-sub{background:#f4f7fa;border-bottom:1px solid #e4e9ef;padding:7px 14px;font-size:9.5px;
  color:#5d6b7a}
.mail-sub b{color:var(--portal-dark,#00305e);font-weight:600}
.mail-bd{padding:13px 15px;line-height:1.6}
.mail-bd p{margin:0 0 9px;font-size:11px}
.mail-box{background:#f7f9fb;border:1px solid #e2e8ef;border-radius:4px;padding:9px 11px;margin:10px 0}
.mail-box .mr{display:flex;justify-content:space-between;padding:3px 0;font-size:10px}
.mail-box .mr .k{color:#6d7b88} .mail-box .mr .v{font-weight:600;color:#20303f}
.mail-flag{background:#fff6e6;border:1px solid #f0dcb4;border-radius:4px;padding:8px 11px;
  margin:10px 0;font-size:10px;color:#8a6414;line-height:1.5}
.mail-flag b{color:#6b4c0c}
.mail-cta{display:block;background:#ffb810;color:var(--portal-dark,#00305e);font-weight:700;text-align:center;
  padding:9px;border-radius:4px;font-size:11px;margin:11px 0 5px}
.mail-cta.g{background:var(--portal,#005db8);color:#fff}
.mail-ft{background:#f7f7f7;border-top:1px solid #e6e6e6;padding:10px 15px;font-size:8.5px;
  color:#8a8a8a;text-align:center;line-height:1.5}

/* ---------- cards, stats, footer ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.card{background:var(--white);border:1px solid var(--g200);border-radius:15px;
  padding:26px 28px;box-shadow:var(--shadow-sm)}
.split > div > .card + .card{margin-top:18px}
/* two cards side by side read better matched than ragged */
.split > .card{align-self:stretch}
.card h3{font-size:1.14rem;margin-bottom:11px}
.card p{font-size:.92rem;color:var(--g700);line-height:1.62}
.card p:last-child{margin-bottom:0}
.card ul{margin:0;padding-left:0;list-style:none}
.card li{font-size:.885rem;line-height:1.56;color:var(--g700);padding-left:20px;
  position:relative;margin-bottom:9px}
.card li:last-child{margin-bottom:0}
.card li::before{content:"";position:absolute;left:2px;top:.52em;width:7px;height:7px;
  border-radius:2px;background:var(--primary);opacity:.5}
.card li strong{color:var(--g900);font-weight:600}
.card code,.shot-cap code{font-family:var(--mono);font-size:.83em;background:var(--g100);
  padding:1px 5px;border-radius:4px;border:1px solid var(--g200)}
.shot-cap{font-size:.75rem;color:var(--g500);line-height:1.55;margin:12px 0 0;font-style:italic}


/* ---------- the shell and its interchangeable panels ---------- */
.bay{display:grid;grid-template-columns:290px 1fr;gap:28px;align-items:start;margin-top:6px}
.bay-lab{font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--g500);margin-bottom:11px;display:block}
.pglist{display:flex;flex-direction:column;gap:7px}
.pg{display:block;width:100%;text-align:left;background:var(--white);border:1.5px solid var(--g200);
  border-radius:9px;padding:10px 12px;cursor:pointer;font:inherit;color:inherit;transition:.18s;
  box-shadow:var(--shadow-sm)}
.pg:hover{border-color:var(--g400)}
.pg .pp{display:block;font-family:var(--head);font-size:.9rem;font-weight:700;color:var(--g900)}
.pg .pn{display:block;font-size:.76rem;color:var(--g500);margin-top:3px}
.pg[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-light)}
.pg[aria-pressed="true"] .pp{color:var(--primary-dark)}
.pg[aria-pressed="true"] .pn{color:var(--g700)}
.pgnote{font-size:.74rem;color:var(--g500);line-height:1.5;margin:12px 0 0}

/* the dashed frame is the part that lives in iMIS and never changes */
.shellframe{border:2px dashed var(--g300);border-radius:16px;padding:34px 16px 16px;
  background:var(--g50);position:relative}
.shellframe::before{content:"INSIDE iMIS \00B7 ON THE MEMBER\2019S RECORD";position:absolute;
  top:11px;left:18px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--g500)}
.shellframe::after{content:"";position:absolute;top:11px;right:18px;
  font-family:var(--mono);font-size:.6rem;color:var(--g400)}
.slot{position:relative;min-height:262px}
.pod{opacity:0;visibility:hidden;position:absolute;inset:0;transition:opacity .3s}
.pod.on{opacity:1;visibility:visible;position:relative}
.podhead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#f2f5f6;border:1px solid #d6dfe3;border-bottom:0;border-radius:6px 6px 0 0;
  padding:7px 11px}
.podhead .t{font:600 11px "Segoe UI",sans-serif;color:#33454f}
.podhead .tag{font-family:var(--mono);font-size:8px;color:#7b8b93;background:#fff;
  border:1px solid #d6dfe3;border-radius:3px;padding:1.5px 6px}
.podbody{border:1px solid #d6dfe3;border-radius:0 0 6px 6px;background:#fff;padding:10px 11px;
  font-family:"Segoe UI",Tahoma,sans-serif}
.kv{display:flex;justify-content:space-between;padding:5px 0;font-size:10.5px;
  border-top:1px dashed #e6ecef}
.kv:first-child{border-top:0}
.kv .k{color:#6d7b88} .kv .v{font-weight:600;color:#20303f}

.trace{margin-top:16px;background:var(--charcoal);border-radius:11px;padding:13px 16px;
  font-family:var(--mono);font-size:.7rem;line-height:1.85;color:#C9C9CE;overflow-x:auto}
.trace b{color:#fff;font-weight:500}
.trace .ar{color:var(--primary);padding:0 5px}
.trace .cm{color:var(--g500)}

.costs{width:100%;border-collapse:collapse;margin-top:4px}
.costs th{text-align:left;font:700 .66rem var(--head);letter-spacing:.1em;text-transform:uppercase;
  color:var(--g500);padding:0 0 9px;border-bottom:1px solid var(--g200)}
.costs td{padding:11px 0;border-bottom:1px solid var(--g100);font-size:.875rem;
  color:var(--g700);vertical-align:top;line-height:1.5}
.costs tr:last-child td{border-bottom:0}
.costs td:last-child{text-align:right;white-space:nowrap;padding-left:16px}
.costs .hero td{background:var(--primary-light)}
.costs .hero td:first-child{border-radius:7px 0 0 7px;padding-left:11px}
.costs .hero td:last-child{border-radius:0 7px 7px 0;padding-right:11px}
.costs code{font-family:var(--mono);font-size:.82em;background:var(--g100);padding:2px 6px;
  border-radius:4px;border:1px solid var(--g200);color:var(--g900)}
.costs .hero code{background:#fff;border-color:#F3C0AE;color:var(--primary-dark);font-weight:500}
@media (max-width:900px){
  .bay{grid-template-columns:1fr;gap:20px}
  .slot{min-height:0}
  .pod{position:absolute}
  .pod.on{position:relative}
  .costs td:last-child{text-align:left;padding-left:0;white-space:normal}
}

/* ---------- a real segment of an n8n canvas ---------- */
.cv{position:relative;background:#faf9fb;
  background-image:radial-gradient(#dcdce4 1px,transparent 1px);background-size:15px 15px;
  border-bottom:1px solid var(--g200);overflow:hidden}
.cv-bar{display:flex;align-items:center;gap:9px;padding:7px 11px;background:#fff;
  border-bottom:1px solid var(--g200)}
.cv-bar .nm{font-size:10.5px;font-weight:600;color:#2d2d30}
.cv-bar .st{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:8.5px;
  font-weight:600;color:#1b7f5a;background:#e8f6f0;border:1px solid #bfe3d1;border-radius:9999px;
  padding:2px 8px}
.cv-bar .st i{width:5px;height:5px;border-radius:50%;background:#1b7f5a;display:block}
.cv-bar .zoom{font-family:var(--mono);font-size:8px;color:#a5a5ae;border:1px solid var(--g200);
  border-radius:4px;padding:1px 5px}
.cv-in{position:relative;height:232px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch}
.cv-stage{position:relative;width:444px;height:100%}
.cv-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nd{position:absolute;width:50px;height:50px;border-radius:9px;background:#fff;
  border:1px solid #d9d9e1;box-shadow:0 1px 2px rgba(0,0,0,.06);display:grid;place-items:center}
.nd.trig{border-radius:25px 9px 9px 25px}
.nd svg{position:static;width:20px;height:20px;overflow:visible}
.nd .lb{position:absolute;top:55px;left:50%;transform:translateX(-50%);width:86px;
  text-align:center;font-size:8.5px;line-height:1.25;color:#5a5a63;font-weight:500}
.nd .ok{position:absolute;top:-5px;right:-5px;width:13px;height:13px;border-radius:50%;
  background:#1b9e6a;border:2px solid #faf9fb;display:grid;place-items:center}
.nd .ok::after{content:"";width:4px;height:2px;border-left:1.5px solid #fff;
  border-bottom:1.5px solid #fff;transform:rotate(-45deg) translate(0,-1px)}
.cv-tag{position:absolute;font-family:var(--mono);font-size:7.5px;color:#9a9aa4;
  background:#faf9fb;padding:0 3px}
.out{border-top:1px solid var(--g200);background:#fff;padding:11px 12px}
.out-lab{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--g400);margin-bottom:8px}
.cv-cap{font-size:.75rem;color:var(--g500);line-height:1.5;padding:10px 12px;background:#fff;
  font-style:italic}
/* ---------- the pieces ---------- */
/* hairline-separated lists in columns, not cards inside cards */
.who-key{display:flex;gap:26px;flex-wrap:wrap;align-items:baseline;margin:0 0 30px;
  font-size:.8rem;color:var(--g600)}
.who-key b{font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  margin-right:7px}
.ow-tdn{color:var(--primary)} .ow-asi{color:var(--accent)} .ow-tp{color:var(--g500)}

.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:stretch}
.lane{padding:0 30px}
.lane:first-child{padding-left:0}
.lane:last-child{padding-right:0}
.lane+.lane{border-left:1px solid var(--g200)}
.lane h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--g400);font-weight:500;margin-bottom:6px}
.lane .why{font-size:.83rem;color:var(--g600);line-height:1.5;margin:0 0 4px;min-height:3em}
.piece{padding:15px 0;border-top:1px solid var(--g100)}
.piece:first-of-type{border-top:1.5px solid var(--g300)}
.piece .n{font-family:var(--head);font-weight:700;font-size:.94rem;color:var(--charcoal);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;line-height:1.3}
.piece .n em{font-style:normal;font-family:var(--sans);font-size:.6rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;color:var(--g400)}
.piece.tdn .n em{color:var(--primary)}
.piece.asi .n em{color:var(--accent)}
.piece .d{font-size:.83rem;color:var(--g600);line-height:1.55;margin-top:5px}

/* n8n is not a peer of the other systems, it is the thing joining them */
.orch{margin-top:34px;background:#F8F6FE;border:1px solid #E3DAFB;border-radius:12px;
  padding:20px 22px 19px;position:relative}
.orch::before{content:"";position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  width:1px;height:18px;background:#D5C9FC}
.orch-h{display:flex;align-items:flex-start;gap:12px}
.orch-h .dotn{width:9px;height:9px;border-radius:50%;background:#7A5AF8;flex:0 0 auto;margin-top:6px}
.orch-h h3{font-size:1.04rem;margin:0 0 4px;color:#2F2470}
.orch-h p{margin:0;font-size:.86rem;color:#5B4E8C;line-height:1.55;max-width:72ch}
.orch-h .tag{margin-left:auto;font-size:.6rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--primary);white-space:nowrap;flex:0 0 auto;padding-top:3px}
.orch-row{display:flex;flex-wrap:wrap;margin-top:15px;column-gap:24px;row-gap:9px}
.oc{font-size:.81rem;color:#4B3A9E;position:relative;padding-left:14px}
.oc::before{content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;
  border-radius:50%;background:#A991F7}
@media (max-width:1000px){
  .lanes{grid-template-columns:1fr;gap:8px}
  .lane{padding:0}
  .lane+.lane{border-left:0;border-top:1px solid var(--g200);padding-top:22px;margin-top:14px}
  .lane .why{min-height:0}
  .orch-h .tag{display:none}
}
.foot{background:var(--g50);border-top:1px solid var(--g200);padding:44px 0 52px}
.foot-in{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-end}
.foot h4{font-size:1.18rem;margin-bottom:8px}
.foot p{font-size:.88rem;color:var(--g600);margin:0;max-width:54ch}
.btn{display:inline-block;background:var(--primary);color:#fff;text-decoration:none;
  font:600 .92rem var(--sans);padding:13px 26px;border-radius:9999px;transition:.18s;
  box-shadow:var(--shadow-sm);white-space:nowrap}
.btn:hover{background:var(--primary-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.foot-meta{font-size:.75rem;color:var(--g500);margin-top:30px;padding-top:20px;
  border-top:1px solid var(--g200);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hero h1{font-size:2.5rem}
  .split{grid-template-columns:1fr;gap:30px}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .rail{display:none}
  .story{grid-template-columns:1fr;gap:0}
  .stage{position:static}
  .stage.mobile-off{display:none}
  .steps{padding-bottom:0}
  .step{min-height:0;padding:30px 0 34px 22px;justify-content:flex-start}
  .step::before{top:38px;transform:none}
  .step .shot{margin-top:20px;max-width:100%}
  .step .fires{margin-top:14px;max-width:100%;opacity:1}
}
@media (max-width:768px){
  .wrap,.narrow{padding:0 20px}
  .hero{padding:44px 0 34px}
  .hero h1{font-size:2rem;max-width:none}
  .lede{font-size:1.02rem}
  section{padding:46px 0}
  .sec-head h2{font-size:1.6rem}
  .step h3{font-size:1.2rem}
  .mast-for .hide-sm{display:none}
  .stats{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .frame{transition:none}
}

/* ---------- sheet screen: a spreadsheet ---------- */
.xl{font-family:Aptos,Calibri,"Segoe UI",Arial,sans-serif;font-size:11px;color:#1f1f1f;background:#fff}
.xl-title{display:flex;align-items:center;gap:8px;background:#217346;color:#fff;padding:6px 10px;font-size:11.5px}
.xl-logo{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:3px;background:#fff;color:#217346;font-weight:800;font-size:10px}
.xl-file{font-weight:600}
.xl-saved{margin-left:auto;opacity:.75;font-size:10.5px}
.xl-ribbon{display:flex;gap:14px;background:#f3f2f1;border-bottom:1px solid #e1dfdd;padding:5px 10px 0}
.xl-ribbon span{padding:0 0 5px;color:#444}
.xl-ribbon span.on{color:#217346;font-weight:600;border-bottom:2px solid #217346}
.xl-fx{display:flex;align-items:center;border-bottom:1px solid #d4d4d4;background:#fff}
.xl-ref{width:52px;padding:4px 6px;border-right:1px solid #d4d4d4;color:#333}
.xl-fxl{padding:4px 8px;color:#777;font-style:italic;border-right:1px solid #d4d4d4}
.xl-formula{padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Consolas,var(--mono);font-size:10.5px;color:#333}
.xl-grid{width:100%;border-collapse:collapse;table-layout:auto}
.xl-grid th{background:#f3f3f3;color:#555;font-weight:400;border:1px solid #d9d9d9;padding:3px 5px;text-align:center;font-size:10.5px}
.xl-grid thead th{height:18px}
.xl-grid tbody th{width:26px}
.xl-corner{width:26px}
.xl-grid td{border:1px solid #e3e3e3;padding:4px 7px;height:21px;white-space:nowrap;color:#1f1f1f}
.xl-grid tr.xl-head td{font-weight:700;background:#dde8f0;border-color:#c9d6e0}
.xl-grid td.ok{color:#1b7f3a;text-align:center;font-weight:700}
.xl-grid td.q{color:#c42b1c;text-align:center;font-weight:700}
.xl-grid tr.hot td{background:#fff4c2}
.xl-grid td.sel{outline:2px solid #217346;outline-offset:-2px;background:#fff}
.xl-tabs{display:flex;gap:2px;align-items:flex-end;background:#f3f2f1;border-top:1px solid #d4d4d4;padding:0 8px;font-size:10.5px}
.xl-tabs span{padding:5px 12px;color:#555}
.xl-tabs span.on{background:#fff;color:#217346;font-weight:600;border-bottom:2px solid #217346}
.xl-plus{color:#888}