:root{
  /* the page keeps its own names; the brand block supplies the values */
  --bg:var(--ink); --bg-2:var(--ink-2);
  --text:var(--paper); --muted:var(--slate-2); --dim:var(--slate);
  --accent:var(--signal); --accent-2:var(--ember); --accent-3:var(--signal);
  --human:var(--probe); --transform:var(--signal); --growth:var(--ember);
  --warn:var(--signal);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  font-family:var(--body);
  background:var(--bg);color:var(--text);line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.15;letter-spacing:-0.02em;font-weight:700}
h1{font-size:clamp(2.4rem,6vw,4.2rem)}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
h3{font-size:1.35rem}
h4{font-size:1.02rem;letter-spacing:-0.01em}
p{color:var(--muted)}
.gradient{background:linear-gradient(120deg,var(--signal) 0%,var(--ember) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-3);margin-bottom:1.1rem;
}
.lede{font-size:clamp(1.02rem,1.8vw,1.22rem);color:var(--muted);max-width:60ch}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(18,21,26,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:1.5rem;
  padding:.85rem 24px;
  padding-top:calc(.85rem + env(safe-area-inset-top, 0px));
}
.nav-links{display:flex;gap:1.6rem;align-items:center;margin-left:auto}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-cta{
  background:var(--signal);
  color:var(--ink)!important;padding:.55rem 1.1rem;border-radius:8px;font-weight:600!important;white-space:nowrap;
}
.nav-cta:hover{opacity:.9}
.menu-toggle{display:none;background:none;border:0;color:var(--text);font-size:1.6rem;cursor:pointer;margin-left:auto;padding:.2rem .4rem}

/* ---------- hero ---------- */
.hero{position:relative;padding:11rem 0 4.5rem;overflow:hidden}
.hero::before{
  content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:1100px;height:1100px;max-width:160vw;
  background:radial-gradient(circle,rgba(255,158,27,.10) 0%,rgba(226,87,30,.06) 40%,transparent 68%);
  pointer-events:none;
}
.hero .wrap{position:relative}
.hero h1{margin-bottom:1.4rem}
.hero .lede{margin-bottom:2rem;font-size:clamp(1.05rem,2vw,1.3rem)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.btn{
  display:inline-block;padding:.95rem 1.7rem;border-radius:10px;text-decoration:none;
  font-weight:600;font-size:1rem;transition:transform .2s,opacity .2s,border-color .2s;border:1px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--signal);color:var(--ink);box-shadow:0 10px 30px rgba(255,158,27,.22)}
.btn-ghost{border-color:var(--border-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent-3)}
.hero-note{margin-top:1.1rem;font-size:.88rem;color:var(--dim)}

/* ---------- proof bar ---------- */
.proof{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-2)}
.proof-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border)}
.proof-cell{background:var(--bg-2);padding:1.6rem 1.2rem}
.proof-num{font-family:var(--mono);font-size:1.75rem;font-weight:600;color:var(--probe);line-height:1;letter-spacing:-.02em}
.proof-lbl{font-size:.82rem;color:var(--muted);margin-top:.5rem;line-height:1.4}

/* ---------- sections ---------- */
section{padding:5.5rem 0}
section[id]{scroll-margin-top:76px}
.sec-head{margin-bottom:3rem;max-width:64ch}
.sec-head h2{margin-bottom:1rem}

/* ---------- pulse ---------- */
#pulse{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.pulse-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:start}
.steps{list-style:none;counter-reset:s;display:grid;gap:1.4rem;margin-bottom:2rem}
.steps li{
  counter-increment:s;display:grid;grid-template-columns:2rem 1fr;
  column-gap:1rem;row-gap:.2rem;align-items:start;
}
.steps li::before{
  content:counter(s);grid-column:1;grid-row:1 / span 2;
  font-family:var(--mono);font-size:.9rem;font-weight:600;
  width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,158,27,.12);color:var(--signal);border:1px solid rgba(255,158,27,.32);
}
.steps strong{grid-column:2;grid-row:1;color:var(--text);font-weight:600;font-size:1.02rem}
.steps span{grid-column:2;grid-row:2;color:var(--muted);font-size:.95rem}
.panel{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.8rem}
.panel h3{font-size:1.05rem;margin-bottom:1.1rem}
.getlist{list-style:none;display:grid;gap:.75rem}
.getlist li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;font-size:.94rem;color:var(--muted);align-items:start}
.getlist li::before{content:'';width:7px;height:7px;border-radius:2px;background:var(--signal);margin-top:.55rem}
/* #170: the Report and Snapshot "what you get" panels open section by section (native details/summary) */
.acc-group{margin-top:1.6rem;border-bottom:1px solid var(--border)}
.acc{border-top:1px solid var(--border)}
.acc>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;padding:1.05rem .25rem;color:var(--text);font-weight:650;font-size:1rem}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:'+';color:var(--signal);font-size:1.45rem;font-weight:400;line-height:1;transition:transform .2s ease}
.acc[open]>summary::after{transform:rotate(45deg)}
.acc>summary small{display:block;color:var(--dim);font-weight:400;font-size:.84rem;margin-top:.2rem}
.acc>summary:hover{color:var(--signal)}
.acc>summary:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:6px}
.acc-body{padding:.1rem .25rem 1.4rem}
.acc-body>p+p{margin-top:.8rem}
.acc-body .getlist li b{color:var(--text)}
/* #176 (Mike, 6 Oct): each level's panel wears its icon color: the Report signal orange, the Snapshot ember (ink on ember is 4.9:1) */
#snapshot-detail .getlist li::before{background:var(--ember)}
#snapshot-detail .acc>summary::after,#snapshot-detail .acc>summary:hover{color:var(--ember)}
#snapshot-detail .acc>summary:focus-visible{outline-color:var(--ember)}
#custom-detail .getlist li::before{background:var(--probe)}
.scale{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:2.2rem}
.scale div{padding:.9rem .7rem;border-left:1px solid var(--border);background:var(--card)}
.scale div:first-child{border-left:0}
.scale b{display:block;font-family:var(--mono);font-size:1.4rem;color:var(--probe);line-height:1;margin-bottom:.35rem}
.scale span{font-size:.72rem;color:var(--dim);line-height:1.3;display:block}

/* ---------- ladder ---------- */
.ladder{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.rung{background:var(--card);padding:1.6rem 1.7rem;display:grid;grid-template-columns:minmax(190px,1fr) 2.2fr auto;gap:1.6rem;align-items:center;transition:background .2s}
.rung:hover{background:var(--card-hover)}
.rung-name{font-weight:700;font-size:1.06rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.rung-meta{font-family:var(--mono);font-size:.76rem;color:var(--dim);margin-top:.35rem;letter-spacing:.02em}
.rung p{font-size:.94rem}
.pill{font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;padding:.24rem .55rem;border-radius:5px;white-space:nowrap;font-weight:600}
.pill-free{background:rgba(95,196,139,.14);color:var(--ok);border:1px solid rgba(95,196,139,.34)}
.pill-live{background:rgba(242,240,236,.07);color:var(--slate-2);border:1px solid var(--border-2)}
.pill-avail{background:rgba(95,196,139,.16);color:#237a48;border:1px solid #5fc48b}
.pill-soon{background:rgba(242,240,236,.07);color:var(--slate-2);border:1px dashed var(--border-2)}
.pill-custom{background:rgba(255,158,27,.14);color:var(--signal);border:1px solid var(--signal)}
.pill-build{background:rgba(255,158,27,.14);color:var(--signal);border:1px solid rgba(255,158,27,.36)}
/* #178 (Mike, 6 Oct): the data pack + Power BI dashboard announced as a new, included output */
.pill-new{background:var(--signal);color:var(--ink);border:1px solid var(--signal);font-weight:700;letter-spacing:.06em}
.newbox{margin-top:1.4rem;padding:1.1rem 1.25rem 1.2rem;border:1px solid var(--signal);border-radius:12px;background:linear-gradient(135deg,rgba(255,158,27,.16),rgba(255,158,27,.03) 70%)}
.newbox h4{margin:.55rem 0 .4rem;font-size:1.02rem;color:var(--text)}
.newbox p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.6}
.newbox ul{margin:.6rem 0 0}
#snapshot-detail .newbox{border-color:var(--ember);background:linear-gradient(135deg,rgba(226,87,30,.18),rgba(226,87,30,.03) 70%)}
/* #180 (Mike, 6 Oct): the dashboard is the wow factor. "Included free", a compact strip of the four pages, click to enlarge. */
.pill-free{background:var(--ok);color:var(--ink);border:1px solid var(--ok);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.dash-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin:.9rem 0 .35rem}
.dash-strip a{display:block;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#f3f2ef;line-height:0;transition:transform .15s,border-color .15s}
.dash-strip a:hover,.dash-strip a:focus-visible{transform:translateY(-2px);border-color:var(--signal)}
.dash-strip img{width:100%;height:auto;display:block}
.dash-cap{font-size:.76rem!important;color:var(--dim)!important;font-family:var(--mono)}
@media (max-width:700px){.dash-strip{grid-template-columns:repeat(2,1fr)}}
.dash-lb{border:0;padding:0;margin:auto;background:transparent;width:min(94vw,1100px);max-width:none}
.dash-lb::backdrop{background:rgba(5,8,14,.86)}
.dash-lb img{width:100%;height:auto;border-radius:10px;display:block}
.dash-lb p{color:#e8e6e1;font-size:.85rem;margin:.6rem 0 0;text-align:center}
.dash-x{position:fixed;top:14px;right:14px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(18,21,26,.82);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35)}.dash-x:hover,.dash-x:focus-visible{background:#12151a;outline:2px solid #fff;outline-offset:2px}
.matrix tr.row-free th,.matrix tr.row-free td{background:color-mix(in srgb,var(--ok) 10%,var(--card))}
.matrix tr.row-free th[scope=row]{color:var(--text);font-weight:700;box-shadow:inset 3px 0 0 var(--ok)}
.matrix tr.row-free td.yes{font-weight:800}
.matrix tr.row-free td.no{opacity:1}
.matrix .pill-free{font-size:.62rem;padding:.12rem .45rem;margin-left:.35rem;vertical-align:middle}
#snapshot-detail .pill-new{background:var(--ember);border-color:var(--ember)}
.matrix .pill-new{font-size:.62rem;padding:.12rem .4rem;margin-left:.35rem;vertical-align:middle}
.pill-next{background:rgba(79,184,201,.13);color:var(--probe);border:1px solid rgba(79,184,201,.32)}
.pill-map{background:rgba(139,149,163,.12);color:var(--slate);border:1px solid rgba(139,149,163,.28)}
.lvl-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;flex:none;border:1px solid currentColor;background:color-mix(in srgb,currentColor 12%,transparent)}
.lvl-1{color:var(--ok)}.lvl-2{color:var(--signal)}.lvl-3{color:var(--ember)}.lvl-4{color:var(--probe)}.lvl-5{color:var(--probe)}
.lvl-txt{display:flex;flex-direction:column;gap:.1rem}
.lvl-tag{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600}
.matrix thead .lvl-ico{width:30px;height:30px;border-radius:8px;margin-bottom:.4rem}
.matrix thead .lvl-ico svg{width:18px;height:18px}
.lvl-pair{display:flex;gap:.3rem;justify-content:center}
.rung-act{white-space:nowrap;font-size:.9rem;font-weight:600;color:var(--accent-3);text-decoration:none}
.rung-act:hover{text-decoration:underline}
/* Tier comparison matrix (ready-queue item 1). Scrolls inside its own box on phones; the page never scrolls sideways. */
.matrix-wrap{margin-top:2.4rem;border:1px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden}
.matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.matrix{width:100%;min-width:640px;border-collapse:collapse;font-size:.88rem}
.matrix-title{padding:1.2rem 1.4rem .5rem;font-weight:700;font-size:1.02rem;margin:0}
.matrix th,.matrix td{padding:.7rem .9rem;border-top:1px solid var(--border);text-align:center;vertical-align:top}
.matrix thead th{border-top:0;font-size:.92rem}
.matrix thead th small{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-top:.25rem}
.matrix th[scope=row]{text-align:left;font-weight:500;color:var(--dim);width:32%}
.matrix .yes{color:var(--ok);font-weight:700}
.matrix .no{color:var(--dim);opacity:.6}
.matrix th[scope=row],.matrix thead th:first-child{position:sticky;left:0;background:var(--card);z-index:1}
.matrix-hint{display:none;padding:0 1.4rem .3rem;font-family:var(--mono);font-size:.7rem;color:var(--dim);letter-spacing:.04em}
@media (max-width:700px){.matrix-hint{display:block}.matrix th[scope=row]{width:auto;min-width:9.5em}}
.matrix-note{padding:.9rem 1.4rem 1.2rem;border-top:1px solid var(--border);margin:0;font-size:.8rem;color:var(--dim)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.why-h{font-size:1.2rem;font-weight:700;margin:0 0 1rem}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:0 0 2.2rem}
.why div{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.2rem}
.why b{display:block;font-size:.98rem;margin-bottom:.35rem}
.why span{font-size:.86rem;color:var(--dim);line-height:1.5}
@media (max-width:900px){.why{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.why{grid-template-columns:1fr}}

/* ---------- layers ---------- */
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.layer{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2rem;display:flex;flex-direction:column;border-top:3px solid var(--l)}
.layer .lnum{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lt,var(--l))}
.layer h3{margin:.5rem 0 .3rem}
.layer .tag{font-size:.93rem;color:var(--text);opacity:.85;margin-bottom:.9rem}
.layer p{font-size:.93rem;margin-bottom:1.2rem}
.layer ul{list-style:none;display:grid;gap:.45rem;margin-bottom:1.5rem}
.layer li{font-size:.87rem;color:var(--muted);padding-left:1rem;position:relative}
.layer li::before{content:'';position:absolute;left:0;top:.6rem;width:5px;height:5px;border-radius:50%;background:var(--l)}
.layer a{margin-top:auto;color:var(--lt,var(--l));text-decoration:none;font-weight:600;font-size:.92rem}
.layer a:hover{text-decoration:underline}

/* ---------- capabilities ---------- */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1rem}
.cap{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.4rem;transition:border-color .2s,transform .2s}
.cap:hover{border-color:var(--border-2);transform:translateY(-3px)}
.cap h4{margin-bottom:.5rem}
.cap p{font-size:.88rem}

/* ---------- roadmap ---------- */
#whats-coming{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.road-group{margin-bottom:2.6rem}
.road-group:last-of-type{margin-bottom:0}
.road-head{display:flex;align-items:center;gap:.85rem;margin-bottom:1.2rem}
.road-head h3{font-size:1.1rem}
.road{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1rem}
.rcard{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;transition:border-color .2s}
.rcard:hover{border-color:var(--border-2)}
.rcard h4{margin-bottom:.55rem}
.rcard p{font-size:.89rem;margin-bottom:1.2rem}
.notify{
  margin-top:auto;background:none;border:1px solid var(--border-2);color:var(--text);
  font:inherit;font-size:.85rem;font-weight:600;padding:.55rem .95rem;border-radius:8px;
  cursor:pointer;align-self:flex-start;transition:border-color .2s,color .2s;
}
.notify:hover{border-color:var(--accent-3);color:var(--accent-3)}
.road-note{
  margin-top:2.8rem;padding:1.4rem 1.6rem;border-left:3px solid var(--accent-3);
  background:rgba(255,158,27,.05);border-radius:0 10px 10px 0;
}
.road-note p{color:var(--text);font-size:.97rem;margin:0}

/* ---------- contact ---------- */
#contact{padding-bottom:6rem}
.contact-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:2.4rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form-group{margin-bottom:1.1rem;display:flex;flex-direction:column}
.form-group label{font-size:.87rem;font-weight:600;margin-bottom:.45rem;color:var(--text)}
.req{color:var(--accent-3)}
input,select,textarea{
  background:var(--bg);border:1px solid var(--border-2);border-radius:9px;
  padding:.8rem .9rem;color:var(--text);font:inherit;font-size:.95rem;width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
textarea{min-height:120px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .8rem center;background-size:1.1em;padding-right:2.4rem}
.form-submit{
  width:100%;background:var(--signal);color:var(--ink);
  border:0;border-radius:10px;padding:1rem;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;margin-top:.5rem;
}
.form-submit:hover{opacity:.92}
.form-submit:disabled{opacity:.55;cursor:not-allowed}
.form-note{font-size:.8rem;color:var(--dim);text-align:center;margin-top:.9rem}
.form-note a,.sms-optin-links a{color:var(--accent-3)}
.form-success,.form-error{display:none;padding:1.1rem 1.3rem;border-radius:10px;margin-bottom:1.4rem}
.form-success{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.35)}
.form-success h3{color:var(--ok);font-size:1.05rem;margin-bottom:.35rem}
.form-error{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.35)}
.form-error p{color:var(--err);margin:0}
.sms-optin{border:1px solid var(--border-2);border-radius:10px;padding:1.1rem 1.2rem;margin-bottom:1.2rem;background:var(--bg)}
.sms-optin-header{display:flex;gap:.7rem;align-items:flex-start}
.sms-optin-header input{width:18px;height:18px;flex:0 0 18px;margin-top:.22rem;accent-color:var(--accent-3)}
.sms-optin-label{font-size:.92rem;font-weight:600;cursor:pointer;color:var(--text)}
.sms-optin-details{display:none;margin-top:.9rem;font-size:.82rem;color:var(--muted)}
.sms-optin-details ul{margin:.7rem 0 .7rem 1.1rem;display:grid;gap:.4rem}
.sms-optin-details strong{color:var(--text)}
.sms-optin-links{margin-top:.6rem}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border);padding:3.5rem 0 2.5rem;background:var(--bg-2)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot-grid .zmark{width:30px;height:30px}
.foot-grid .zword{font-size:1.18rem}
.foot-grid h5{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:.9rem;font-weight:700}
.foot-grid ul{list-style:none;display:grid;gap:.55rem}
.foot-grid a{color:var(--muted);text-decoration:none;font-size:.9rem}
.foot-grid a:hover{color:var(--text)}
.foot-blurb{font-size:.88rem;color:var(--muted);max-width:38ch;margin-top:.7rem}
.foot-bottom{border-top:1px solid var(--border);padding-top:1.6rem;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;justify-content:space-between;font-size:.82rem;color:var(--dim)}
.foot-bottom a{color:var(--dim);text-decoration:none}
.foot-bottom a:hover{color:var(--muted)}

/* ---------- reveal ---------- */
.js .fade{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}   /* #540: only hidden when a script is running to reveal it */
.js .fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .fade{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .pulse-grid{grid-template-columns:1fr;gap:2.2rem}
  .layers{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .proof-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--bg-2);border-bottom:1px solid var(--border);padding:.6rem 0;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.75rem 24px}
  .nav-cta{margin:.5rem 24px;text-align:center}
  .menu-toggle{display:block}
  .hero{padding:8.5rem 0 3.5rem}
  section{padding:4rem 0}
  .rung{grid-template-columns:1fr;gap:.8rem}
  .rung-act{justify-self:start}
  .form-row{grid-template-columns:1fr;gap:0}
  .contact-card{padding:1.6rem}
  .scale{grid-template-columns:repeat(3,1fr)}
  .scale div:nth-child(4){border-left:0}
  .scale div:nth-child(n+4){border-top:1px solid var(--border)}
}
@media (max-width:560px){
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .proof-cell:last-child{grid-column:span 2}
  .wrap{padding:0 18px}
}


/* Zanto light design v1 (GO 152, 9 Oct). Injected by build.py --theme=light after the page's own styles.
   Light page, contained ink panels, one action colour (signal fill, ink text). Spec: vault 30_Projects/zanto-core/design-light-v1.md */
:root{
  --bg:#ffffff; --bg-2:#f2f5f8; --text:#12151a; --muted:#39414e; --dim:#5b6472;
  --card:#ffffff; --card-hover:#f7f9fb; --border:#dfe4ea; --border-2:#c6ced8;
  --accent-3:#a85400;
  --signal-deep:#a85400; --ember-deep:#b8441a; --probe-deep:#1b7483; --ok-deep:#237a48;
  --mist:#f2f5f8; --panel-r:28px;
}
/* the dark scope: nav, footer and the contained ink panels keep the original tokens */
nav, footer, .ink, #pulse>.wrap, #contact .ink-panel, [style*="background:var(--ink)"]{
  --bg:#12151a; --bg-2:#171b22; --text:#f2f0ec; --muted:#b6bfca; --dim:#8b95a3;
  --card:#1b212a; --card-hover:#222935; --border:rgba(242,240,236,.10); --border-2:rgba(242,240,236,.20);
  --accent-3:#ff9e1b; color:var(--text);
}
body{background:#fff;color:var(--text)}
p{color:var(--muted)}
h1,h2,h3,h4{color:var(--text)}
nav{background:#12151a}
.eyebrow{color:var(--probe-deep);letter-spacing:.14em}

/* hero: white, text left, the real dashboard right */
.hero{padding:9.5rem 0 4.5rem;background:#fff}
.hero::before{display:none}
.hero .gradient{background:linear-gradient(120deg,var(--ember-deep) 0%,var(--ember) 100%);-webkit-background-clip:text;background-clip:text}
@media (min-width:980px){
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;column-gap:3.5rem;align-items:center}
  .hero .wrap>*:not(.hero-vis){grid-column:1}
  .hero-vis{grid-column:2;grid-row:1 / span 6}
}
.hero-vis{margin:2.5rem 0 0;position:relative}
.hero-vis .frame{background:#12151a;border-radius:20px;padding:14px 14px 10px;box-shadow:0 30px 60px -28px rgba(18,21,26,.45)}
.hero-vis .bar{display:flex;gap:6px;margin:0 0 10px 4px}
.hero-vis .bar i{width:9px;height:9px;border-radius:50%;background:#39414e}
.hero-vis img{width:100%;height:auto;display:block;border-radius:10px}
.hero-vis figcaption{font-size:.8rem;color:var(--dim);margin-top:.7rem}
.btn-primary{box-shadow:0 10px 24px -10px rgba(168,84,0,.45)}
.btn-ghost{border-color:var(--border-2);color:var(--text);background:#fff}
.btn-ghost:hover{border-color:var(--text)}
.hero-note{color:var(--dim)}
.tax-note{display:block;font-size:.85rem;color:var(--dim);margin-top:.35rem}

/* proof bar on mist */
.proof{background:var(--mist);border-color:var(--border)}
.proof-grid{background:var(--border)}
.proof-cell{background:var(--mist)}
.proof-num{color:var(--probe-deep)}

/* sections breathe more */
section{padding:6rem 0}
@media (max-width:700px){section{padding:3.5rem 0}}

/* the Pulse block becomes a contained ink panel (Salesforce rhythm) */
#pulse{background:#fff;border:0;padding:3rem 0 5rem}
#pulse>.wrap{background:#12151a;border-radius:var(--panel-r);padding:3.5rem 3rem;max-width:1200px;margin:0 24px}
@media (min-width:1248px){#pulse>.wrap{margin:0 auto}}
@media (max-width:700px){#pulse>.wrap{padding:2.2rem 1.25rem;border-radius:20px;margin:0 12px}}
#pulse .steps li::before{background:rgba(255,158,27,.12);color:#ff9e1b}

/* coloured text on light uses the deep shades */
.acc>summary::after,.acc>summary:hover{color:var(--signal-deep)}
#snapshot-detail .acc>summary::after,#snapshot-detail .acc>summary:hover{color:var(--ember-deep)}
.scale b{color:var(--probe-deep)}
.pill-build{color:var(--signal-deep);background:#fff4e6;border-color:#f3c98e}
.pill-next{color:var(--probe-deep);background:#e8f5f7;border-color:#9fd3db}
.pill-live,.pill-soon{color:var(--dim);background:#f5f7f9}
.pill-map{color:var(--dim)}
.lvl-1{color:var(--ok-deep)}.lvl-2{color:var(--signal-deep)}.lvl-3{color:#9b2c6f}.lvl-4,.lvl-5{color:var(--probe-deep)}
#pulse .lvl-1{color:#5fc48b}#pulse .lvl-2{color:#ff9e1b}
.matrix .yes{color:var(--ok-deep)}
.matrix tr.row-free th,.matrix tr.row-free td{background:#eef8f2}
.form-success h3{color:var(--ok-deep)}
.getlist li::before{background:var(--signal)}
.newbox{background:linear-gradient(135deg,#fff4e6,#fff 70%)}
#snapshot-detail .newbox{background:linear-gradient(135deg,#fdeee7,#fff 70%)}
.dash-strip a{background:#fff}

/* cards: white with a soft edge, mist bands between */
.panel,.ladder,.matrix-wrap{box-shadow:0 1px 0 rgba(18,21,26,.03)}
#layers{background:var(--mist)}
.layer{background:#fff}
.layer[style*="--human"]{--lt:var(--probe-deep)!important}
.layer[style*="--transform"]{--lt:var(--signal-deep)!important}
.layer[style*="--growth"]{--lt:var(--ember-deep)!important}
#whats-coming{background:#fff}
#solutions{background:#fff}

/* closing: contact on mist, the form a white card */
#contact{background:var(--mist)}
#contact form,#contact .form-card,#contact .panel{background:#fff;border:1px solid var(--border);box-shadow:0 20px 40px -30px rgba(18,21,26,.35)}
#contact input:not([type=checkbox]):not([type=radio]),#contact select,#contact textarea{background:#fff;color:var(--text);border-color:var(--border-2)}
#contact .sms-optin{background:#fff}
#contact input::placeholder,#contact textarea::placeholder{color:#7a8391}

/* footer: the ink band that closes the page */
footer{background:#12151a}

/* outcome circles (the one bold element): ink discs with a signal arc, like the report's score dial */
#outcomes{background:#fff;padding-top:5rem}
#outcomes .sec-head{margin-left:auto;margin-right:auto;text-align:center}
#outcomes .sec-head p{margin:0 auto}
.oc-switch{display:flex;justify-content:center;gap:.4rem;margin:0 auto 3rem;padding:.35rem;background:var(--mist);border-radius:999px;width:max-content;max-width:100%}
.oc-switch input{position:absolute;opacity:0;pointer-events:none}
.oc-switch label{padding:.6rem 1.2rem;border-radius:999px;font-weight:600;font-size:.95rem;color:var(--muted);cursor:pointer}
#oc-mfg:checked~.oc-switch label[for=oc-mfg],#oc-hc:checked~.oc-switch label[for=oc-hc]{background:#12151a;color:#fff}
#oc-mfg:focus-visible~.oc-switch label[for=oc-mfg],#oc-hc:focus-visible~.oc-switch label[for=oc-hc]{outline:3px solid var(--signal-deep);outline-offset:2px}
#outcomes input[name=oc]{position:absolute;opacity:0;width:1px;height:1px;margin:0;left:0}
.oc-set{display:none}
#oc-mfg:checked~.oc-sets .oc-mfg,#oc-hc:checked~.oc-sets .oc-hc{display:block}
.oc-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:3rem 2.5rem}
.oc-hc .oc-grid{grid-template-columns:repeat(5,1fr);gap:2.6rem 1.6rem}
@media (max-width:980px){.oc-grid,.oc-hc .oc-grid{grid-template-columns:repeat(2,1fr);gap:2.4rem 1.4rem}}
@media (max-width:520px){.oc-grid,.oc-hc .oc-grid{grid-template-columns:1fr}}
.oc{text-align:center}
.oc a{text-decoration:none;color:inherit;display:block;border-radius:16px;padding:.4rem}
.oc a:focus-visible{outline:3px solid var(--signal-deep);outline-offset:4px}
.oc-disc{width:148px;height:148px;margin:0 auto 1.3rem;position:relative}
.oc-hc .oc-disc{width:120px;height:120px}
.oc-disc svg{width:100%;height:100%;display:block}
.oc-disc .arc{transition:stroke-dashoffset .5s ease}
.oc a:hover .arc{stroke-dashoffset:0}
.oc h3{font-size:1.28rem;line-height:1.2;margin-bottom:.55rem;letter-spacing:-.01em}
.oc-hc .oc h3{font-size:1.08rem}
.oc p{font-size:.95rem;line-height:1.55;max-width:30ch;margin:0 auto}
.oc .area{display:block;font-family:var(--mono);font-size:.74rem;color:var(--probe-deep);margin-bottom:.45rem;letter-spacing:.02em}
.oc-cta{text-align:center;margin-top:3.4rem}
@media (prefers-reduced-motion:reduce){.oc-disc .arc{transition:none}}

/* inside the ink panels, the bright accents come back */
#pulse .eyebrow,.ink .eyebrow{color:#4fb8c9}
#pulse .scale b{color:#4fb8c9}
#pulse .pill-soon,#pulse .pill-live{color:#b6bfca;background:rgba(242,240,236,.07);border-color:rgba(242,240,236,.2)}
.eyebrow[style*="var(--probe)"]{color:var(--probe-deep)!important}
/* legal and SMS pages (their own stylesheet uses the brand names directly): remap the brand names on light */
body:not(:has(.wrap)){--paper:#12151a;--slate-2:#39414e;--slate:#5b6472;--signal:#a85400;background:#fff}
body:not(:has(.wrap)) nav,body:not(:has(.wrap)) footer{--paper:#f2f0ec;--slate-2:#b6bfca;--slate:#8b95a3;--signal: #ff9e1b}

/* ---------- #2557: Mike's review, 9 Oct ---------- */
/* Top strip: one action above the nav */
.topstrip{background:#ff9e1b;border-bottom:1px solid #e8851a;color:#12151a;font-size:.88rem;padding-top:env(safe-area-inset-top,0px)}
nav:has(.topstrip) .nav-inner{padding-top:.85rem}
body:has(.topstrip) .hero{padding-top:11.5rem}
body:has(.topstrip) section[id]{scroll-margin-top:118px}
body:has(.topstrip) #report-detail,body:has(.topstrip) #snapshot-detail{scroll-margin-top:130px!important}
@media (max-width:640px){body:has(.topstrip) .hero{padding-top:9.8rem}.topstrip{font-size:.8rem}.topstrip a{font-size:.72rem;letter-spacing:.03em}.topstrip span{display:none}.topstrip-in{padding:.4rem 16px}}
.topstrip-in{max-width:1200px;margin:0 auto;padding:.55rem 20px;display:flex;flex-wrap:wrap;gap:.35rem 1rem;justify-content:center;align-items:center;text-align:center}
.topstrip span{color:#12151a;font-weight:500}
.topstrip a{font-family:var(--mono,"IBM Plex Mono",monospace);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;color:#12151a;font-weight:700;text-decoration:underline;text-decoration-color:#12151a;text-decoration-thickness:2px;text-underline-offset:3px}
.topstrip a:hover{color:#ffffff;text-decoration-color:#ffffff}

/* Level matrix: hovering any cell of a level lights its whole column */
.matrix td,.matrix thead th{transition:background-color .18s,box-shadow .18s}
.matrix:has(tr>:nth-child(2):hover) tr>:nth-child(2){background:#eef8f2}
.matrix:has(tr>:nth-child(3):hover) tr>:nth-child(3){background:#fff4e3}
.matrix:has(tr>:nth-child(4):hover) tr>:nth-child(4){background:#f8e6f0}
.matrix:has(tr>:nth-child(5):hover) tr>:nth-child(5),.matrix:has(tr>:nth-child(6):hover) tr>:nth-child(6){background:#e9f5f7}
.matrix:has(tr>:nth-child(2):hover) thead th:nth-child(2){border-top-color:#237a48}
.matrix:has(tr>:nth-child(3):hover) thead th:nth-child(3){border-top-color:#ff9e1b}
.matrix:has(tr>:nth-child(4):hover) thead th:nth-child(4){border-top-color:#9b2c6f}
.matrix:has(tr>:nth-child(5):hover) thead th:nth-child(5),.matrix:has(tr>:nth-child(6):hover) thead th:nth-child(6){border-top-color:#1b7483}
.matrix:has(tr>:nth-child(n+2):hover) tr>:nth-child(n+2):not(:hover){transition-delay:0s}
.matrix tbody th[scope=row]{transition:none}

/* Capabilities and What's coming: visible containers that respond */
.cap,.rcard{border:1px solid #d5dce4;box-shadow:0 1px 2px rgba(18,21,26,.04);position:relative;overflow:hidden}
.cap::before,.rcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cap-c,#ff9e1b);transform:scaleY(0);transform-origin:top;transition:transform .25s ease}
.cap:hover,.rcard:hover,.cap:focus-within,.rcard:focus-within{border-color:var(--cap-c,#ff9e1b);background:var(--cap-bg,#fff8ee);box-shadow:0 10px 28px rgba(18,21,26,.08)}
.cap:hover::before,.rcard:hover::before,.cap:focus-within::before,.rcard:focus-within::before{transform:scaleY(1)}
.cap:nth-child(4n+1),.rcard:nth-child(4n+1){--cap-c:#ff9e1b;--cap-bg:#fff8ee}
.cap:nth-child(4n+2),.rcard:nth-child(4n+2){--cap-c:#1b7483;--cap-bg:#eff8fa}
.cap:nth-child(4n+3),.rcard:nth-child(4n+3){--cap-c:#237a48;--cap-bg:#f0f8f3}
.cap:nth-child(4n+4),.rcard:nth-child(4n+4){--cap-c:#b8441a;--cap-bg:#fdf3ee}
.cap:hover h4,.rcard:hover h4{color:#12151a}

/* Why now */
#why-now{background:#ffffff}
.wn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2rem}
.wn{display:flex;flex-direction:column;gap:.55rem;text-decoration:none;color:inherit;background:#fff;border:1px solid #d5dce4;border-top:4px solid var(--w);border-radius:14px;padding:1.4rem 1.3rem;transition:transform .2s,box-shadow .2s}
.wn:hover,.wn:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px rgba(18,21,26,.09)}
.wn-k{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#5b6472}
.wn h3{font-size:1.08rem;line-height:1.3;margin:0;color:#12151a}
.wn p{font-size:.9rem;margin:0;color:#39414e;flex:1}
.wn-s{font-size:.8rem;font-weight:600;color:#a85400}
.wn-cta{margin-top:1.6rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;background:#12151a;border-radius:18px;padding:1.5rem 1.8rem}
.wn-cta p{margin:0;color:#c9d0d9;max-width:620px}
.wn-cta p b{color:#ffffff}
.wn-btns{display:flex;flex-wrap:wrap;gap:.7rem}
.wn-cta .btn-ghost{color:#ffffff;border-color:rgba(255,255,255,.35);background:transparent}
.wn-cta .btn-ghost:hover{border-color:#ff9e1b}
@media (max-width:980px){.wn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.wn-grid{grid-template-columns:1fr}.wn-cta{padding:1.3rem}}
@media (prefers-reduced-motion:reduce){.wn,.cap::before,.rcard::before{transition:none}}

/* Levels stand out everywhere: a solid level badge, a level colour on each rung and each matrix column */
.lvl-tag{display:inline-block!important;white-space:nowrap;font-size:.7rem!important;letter-spacing:.1em;color:#fff!important;background:#5b6472;padding:.2rem .55rem;border-radius:999px;margin-bottom:.35rem}
.lvl-ico.lvl-1+.lvl-txt .lvl-tag,.lvl-ico.lvl-1~.lvl-tag{background:#237a48}
.lvl-ico.lvl-2+.lvl-txt .lvl-tag,.lvl-ico.lvl-2~.lvl-tag{background:#a85400}
.lvl-ico.lvl-3+.lvl-txt .lvl-tag,.lvl-ico.lvl-3~.lvl-tag{background:#9b2c6f}
.lvl-ico.lvl-4+.lvl-txt .lvl-tag,.lvl-ico.lvl-4~.lvl-tag,.lvl-ico.lvl-5+.lvl-txt .lvl-tag{background:#1b7483}
#pulse .lvl-tag{color:#12151a!important}
#pulse .lvl-ico.lvl-1+.lvl-txt .lvl-tag{background:#5fc48b}
#pulse .lvl-ico.lvl-2+.lvl-txt .lvl-tag{background:#ff9e1b}
.lvl-txt{display:flex;flex-direction:column;align-items:flex-start}
#assessments .rung{border-left:6px solid #d5dce4}
#assessments .rung:has(.lvl-1){border-left-color:#237a48}
#assessments .rung:has(.lvl-2){border-left-color:#ff9e1b}
#assessments .rung:has(.lvl-3){border-left-color:#9b2c6f}
#assessments .rung:has(.lvl-4),#assessments .rung:has(.lvl-5){border-left-color:#1b7483}
#assessments .rung:hover{background:#f7f9fb}
.matrix thead th:nth-child(n+2){border-top:5px solid #d5dce4}
.matrix thead th:nth-child(2){border-top-color:#237a48;background:#f3faf6}
.matrix thead th:nth-child(3){border-top-color:#ff9e1b;background:#fff8ee}
.matrix thead th:nth-child(4){border-top-color:#9b2c6f;background:#fbf0f6}
.matrix thead th:nth-child(5),.matrix thead th:nth-child(6){border-top-color:#1b7483;background:#f0f8f9}
.matrix:has(tr>:nth-child(2):hover) tr>:nth-child(2){background:#e2f3e9}
.matrix:has(tr>:nth-child(3):hover) tr>:nth-child(3){background:#ffeccd}
.matrix:has(tr>:nth-child(4):hover) tr>:nth-child(4){background:#f6dfeb}
.matrix:has(tr>:nth-child(5):hover) tr>:nth-child(5),.matrix:has(tr>:nth-child(6):hover) tr>:nth-child(6){background:#dcf0f3}
.matrix thead th .lvl-ico{display:flex;margin:0 auto .45rem}
.matrix thead th .lvl-ico+.lvl-ico{display:inline-flex;margin:0 .15rem .45rem}
.matrix thead th:has(.lvl-ico+.lvl-ico) .lvl-ico{display:inline-flex;margin:0 .15rem .45rem}
.matrix thead .lvl-tag{display:block!important;width:fit-content!important;margin:0 auto .45rem;padding:.22rem .6rem!important;white-space:nowrap;box-sizing:content-box}
.matrix thead th:nth-child(2) .lvl-tag{background:#237a48}
.matrix thead th:nth-child(3) .lvl-tag{background:#a85400}
.matrix thead th:nth-child(4) .lvl-tag{background:#9b2c6f}
.matrix thead th:nth-child(5) .lvl-tag,.matrix thead th:nth-child(6) .lvl-tag{background:#1b7483}
.cap,.rcard{background:#fbfcfd}

/* ---------- #2558: less scrolling (Mike, 9 Oct: "the page never ends") ---------- */
/* #2563: comparison table. The level headers always show; a prominent + button opens the full table */
.cmp{display:flex;flex-direction:column;margin-top:2rem}
.cmp-c{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.cmp .matrix-wrap{margin-top:0!important;order:1}
.cmp-s{order:2;display:flex;align-items:center;gap:.8rem;margin-top:.8rem;padding:1rem 1.3rem;border-radius:14px;background:#12151a;color:#fff;font-weight:700;font-size:1.02rem;cursor:pointer;box-shadow:0 8px 22px rgba(18,21,26,.16)}
.cmp-s:hover{background:#232a35}
.cmp-c:focus-visible~.cmp-s{outline:3px solid #ff9e1b;outline-offset:3px}
.cmp-c:not(:checked)~.matrix-wrap :is(tbody,.matrix-note,.matrix-hint){display:none}
.cmp-less,.cmp-c:checked~.cmp-s .cmp-more{display:none}
.cmp-c:checked~.cmp-s .cmp-less{display:inline}
/* the + / - mark used by every "open more" control */
.pm{flex:none;position:relative;width:30px;height:30px;border-radius:50%;background:#ff9e1b}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2.5px;margin:-1.25px 0 0 -6.5px;background:#12151a;border-radius:2px;transition:transform .2s}
.pm::after{transform:rotate(90deg)}
.cmp-c:checked~.cmp-s .pm::after,.pd-on .pd-open .pm::after{transform:rotate(0deg)}
/* the two "what you get" detail panels: a short teaser, then a + button opens everything in place */
html.js :is(#report-detail,#snapshot-detail):not(.pd-on)>:is(.proof-grid,.newbox,.acc-group,p){display:none}
.pd-open{display:flex!important;align-items:center;gap:.8rem;margin-top:1.1rem;padding:.85rem 1.1rem;border:1.5px solid #12151a;border-radius:14px;background:#fff;font-weight:700;color:#12151a;text-decoration:none;width:fit-content;max-width:100%}
.pd-open:hover{background:#fff4e3;border-color:#ff9e1b}
html:not(.js) .pd-open{display:none!important}
.pd-less,.pd-on .pd-more{display:none}
.pd-on .pd-less{display:inline}
/* Level tabs: phones and small tablets see one level at a time */
.lv-r{position:absolute;opacity:0;width:1px;height:1px;margin:0;left:0}
.lv-tabs{display:none}
@media (max-width:820px){
  .lv-tabs{display:flex;gap:.45rem;overflow-x:auto;padding:.2rem 0 .8rem;margin-top:1.4rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .lv-tabs label{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;padding:.55rem .85rem;border:1.5px solid #d5dce4;border-radius:12px;background:#fff;font-size:.9rem;font-weight:600;color:#39414e;cursor:pointer}
  .lv-tabs label b{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
  .lv-tabs label[for=lv1] b{color:#237a48}.lv-tabs label[for=lv2] b{color:#a85400}.lv-tabs label[for=lv3] b{color:#9b2c6f}.lv-tabs label[for=lv4] b,.lv-tabs label[for=lv5] b{color:#1b7483}
  #lv1:checked~.lv-tabs label[for=lv1]{border-color:#237a48;background:#eef8f2;color:#12151a}
  #lv2:checked~.lv-tabs label[for=lv2]{border-color:#ff9e1b;background:#fff4e3;color:#12151a}
  #lv3:checked~.lv-tabs label[for=lv3]{border-color:#9b2c6f;background:#f8e6f0;color:#12151a}
  #lv4:checked~.lv-tabs label[for=lv4],#lv5:checked~.lv-tabs label[for=lv5]{border-color:#1b7483;background:#e9f5f7;color:#12151a}
  .lv-r:focus-visible~.lv-tabs{outline:2px solid #ff9e1b;outline-offset:4px;border-radius:12px}
  .lv-tabs~.ladder{margin-top:.4rem}
  #assessments .ladder{display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:88%;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;background:none!important;border:0!important;padding:.2rem 2px 1rem}
  #assessments .ladder>.rung{scroll-snap-align:start;min-width:0;border:1px solid #d5dce4;border-left-width:6px;border-radius:16px}
}
/* Swipe rows on phones: cards slide sideways with the next one peeking in */
@media (max-width:640px){
  .oc-grid,.wn-grid,.caps,.road,.layers,#assessments .why,#pulse .ladder{display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:82%;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:.3rem 2px 1rem;margin-left:0;margin-right:0;scrollbar-width:thin}
  .oc-grid>*,.wn-grid>*,.caps>*,.road>*,.layers>*,#assessments .why>*,#pulse .ladder>*{scroll-snap-align:start;min-width:0}
  .oc-grid{grid-auto-columns:62%}
  :is(.oc-grid,.wn-grid,.caps,.road,.layers,#pulse .ladder,#assessments .ladder,.eng-flow,.ways-grid,.eng-vs) .fade{opacity:1!important;transform:none!important}   /* cards off to the side never scroll into view */
  .swipe-hint{display:block}
}
.swipe-hint{display:none;font-size:.8rem;color:#5b6472;margin:.2rem 0 0}

/* #2559/#2562: swipe cues. See-through arrows sit in the middle of each side of a sideways area; "Swipe for more"
   and dots sit under card rows; the right edge fades while there is more to see. */
.swipe-ui{display:none}
.lv-hint{display:none}
.sw-wrap{position:relative}
.sw-ov{display:none}
.sw-wrap.sw-on>.sw-ov{display:grid;place-items:center;position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);
  background:rgba(18,21,26,.72);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(18,21,26,.25);cursor:pointer;opacity:.9;transition:opacity .2s,background .2s}
.sw-wrap.sw-on>.sw-ov[hidden]{display:none}
.sw-ov-l{left:4px}.sw-ov-r{right:4px}
.sw-wrap>.sw-ov:hover,.sw-wrap>.sw-ov:focus-visible{opacity:1;background:#ff9e1b;border-color:#ff9e1b;color:#12151a}
.sw-wrap:not(.sw-used)>.sw-ov-r{animation:sw-pulse 1.8s ease-in-out 3}
@keyframes sw-pulse{0%,100%{box-shadow:0 4px 14px rgba(18,21,26,.25)}50%{box-shadow:0 0 0 8px rgba(255,158,27,.35)}}
.sw-wrap.sw-on>:is(.oc-grid,.wn-grid,.caps,.road,.layers,.why,.ladder,.matrix-scroll):not(.sw-end){-webkit-mask-image:linear-gradient(90deg,#000 82%,rgba(0,0,0,.3));mask-image:linear-gradient(90deg,#000 82%,rgba(0,0,0,.3))}
.swipe-ui:not([hidden]){display:flex;align-items:center;justify-content:center;gap:.8rem;margin:.1rem 0 .4rem}
.sw-lbl{font-size:.82rem;font-weight:700;color:#12151a;white-space:nowrap}
.sw-lbl::before{content:"\2194";display:inline-block;margin-right:.35rem;color:#a85400;animation:sw-nudge 1.4s ease-in-out infinite}
.swipe-ui.sw-used .sw-lbl::before{animation:none}
.sw-dots{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.sw-dots i{width:7px;height:7px;border-radius:50%;background:#c3ccd6}
.sw-dots i.on{background:#a85400;width:18px;border-radius:4px}
.sw-count{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:.8rem;font-weight:600;color:#39414e}
#pulse .swipe-ui .sw-lbl{color:#ffffff}#pulse .swipe-ui .sw-lbl::before{color:#ff9e1b}
#pulse .swipe-ui .sw-dots i{background:#4a5260}#pulse .swipe-ui .sw-dots i.on{background:#ff9e1b}#pulse .sw-count{color:#c9d0d9}
@media (max-width:820px){.lv-hint{display:block;font-size:.82rem;font-weight:700;color:#12151a;margin:1.2rem 0 -.6rem}}
@keyframes sw-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
/* the level deck on desktop: say that scrolling brings each level forward */
.deck-hint{display:none}
@media (min-width:821px){.deck-hint{display:flex;align-items:center;gap:.5rem;justify-content:center;margin:2rem 0 1rem;font-weight:700;color:#12151a}
  .deck-hint span{display:inline-block;color:#a85400;animation:deck-bob 1.6s ease-in-out infinite}}
@keyframes deck-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.sw-lbl::before,.deck-hint span,.sw-wrap>.sw-ov-r{animation:none!important}}

/* ---------- #2560: the five levels as a stacked card deck on desktop (Mike, 9 Oct: Salesforce-style "wheel") ----------
   Each level is a full colour card that sticks under the nav; the next card slides up over it and leaves the
   previous card's header strip showing, so all five live in one container. Phones keep the Level 1-5 tabs. */
@media (min-width:821px){
  #assessments .ladder{display:block;background:none;border:0;border-radius:0;overflow:visible;padding-bottom:2rem}
  #assessments .ladder>.rung{--deck:120px;position:sticky;top:calc(var(--deck) + var(--i,0) * 58px);min-height:300px;margin:0 0 1.6rem;border-radius:24px;border:0!important;
    padding:1.35rem 2rem 2rem;align-items:start;color:#fff;box-shadow:0 -10px 30px rgba(18,21,26,.14),0 18px 40px rgba(18,21,26,.12);
    background:linear-gradient(120deg,var(--c1),var(--c2))!important}
  #assessments .ladder>.rung:nth-child(1){--i:0;--c1:#0f3d27;--c2:#237a48}
  #assessments .ladder>.rung:nth-child(2){--i:1;--c1:#7a4300;--c2:#c77700}
  #assessments .ladder>.rung:nth-child(3){--i:2;--c1:#3e1030;--c2:#8e2763}
  #assessments .ladder>.rung:nth-child(4){--i:3;--c1:#0b343c;--c2:#1b6f7d}
  #assessments .ladder>.rung:nth-child(5){--i:4;--c1:#12151a;--c2:#2c3542}
  #assessments .ladder>.rung:hover{filter:none}
  #assessments .ladder>.rung .rung-name{font-size:1.35rem;color:#fff}
  #assessments .ladder>.rung .lvl-ico{color:#fff!important;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
  #assessments .ladder>.rung .lvl-tag{background:rgba(255,255,255,.95)!important;color:#12151a!important}
  #assessments .ladder>.rung .rung-meta{color:rgba(255,255,255,.82)}
  #assessments .ladder>.rung p,#assessments .ladder>.rung p *{color:rgba(255,255,255,.92)!important}
  #assessments .ladder>.rung .pill{background:rgba(255,255,255,.14)!important;color:#fff!important;border-color:rgba(255,255,255,.4)!important}
  #assessments .ladder>.rung .pill-free{background:#5fc48b!important;color:#12151a!important;border-color:#5fc48b!important}
  #assessments .ladder>.rung .rung-act{color:#fff!important;text-decoration:underline;text-decoration-color:#ff9e1b;text-decoration-thickness:2px;text-underline-offset:4px}
  #assessments .ladder>.rung .btn-primary,#assessments .ladder>.rung a.rung-act.btn{color:#12151a!important;text-decoration:none}
  #assessments .ladder>.rung .btn-ghost{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.55)!important}
  #assessments .ladder>.rung .btn-ghost:hover{border-color:#ff9e1b!important}
  #assessments .ladder>.rung a:not(.btn):not(.rung-act){color:#fff}
}
@media (min-width:821px) and (prefers-reduced-motion:reduce){#assessments .ladder>.rung{position:relative;top:auto}}

/* #2561: section links always visible; the current section is highlighted */
.nav-chips{display:none}
.nav-links a.on{color:#ffffff;box-shadow:inset 0 -2px 0 #ff9e1b}
@media (max-width:820px){
  .nav-chips{display:flex;gap:.4rem;overflow-x:auto;padding:0 16px .6rem;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .nav-chips::-webkit-scrollbar{display:none}
  .nav-chips a{flex:none;font-size:.8rem;font-weight:600;color:#c9d0d9;text-decoration:none;padding:.32rem .7rem;border:1px solid rgba(255,255,255,.22);border-radius:999px;white-space:nowrap}
  .nav-chips a.on{background:#ff9e1b;border-color:#ff9e1b;color:#12151a}
  body:has(.topstrip) .hero{padding-top:11.6rem}
  body:has(.topstrip) section[id]{scroll-margin-top:160px}
}

/* #2563: FREE stands out in the top strip; contact form header */
.topstrip .free{display:inline-block;background:#12151a;color:#ffffff;border-radius:6px;padding:.08rem .45rem;margin:0 .1rem;letter-spacing:.1em;text-decoration:none;font-weight:800}
.topstrip a:hover .free{background:#ffffff;color:#12151a}
.cc-head{display:flex;align-items:center;gap:.6rem;margin:-.2rem 0 1.2rem;padding-bottom:.9rem;border-bottom:1px solid #d5dce4;font-family:var(--display,Archivo,sans-serif);font-weight:800;font-size:1.15rem;color:#12151a}
.cc-head::before{content:"";width:10px;height:10px;border-radius:50%;background:#ff9e1b}
.topstrip .m-hide{font-style:normal}
@media (max-width:640px){.topstrip .m-hide{display:none}.topstrip a{font-size:.78rem!important}}

/* ---------- #2564: Mike's review, 9 Oct afternoon ---------- */
/* Healthcare has its own colour: blue. Plant stays orange. */
.btn-hc{background:#1e5aa8;color:#ffffff!important;border:1px solid #1e5aa8;box-shadow:0 10px 26px rgba(30,90,168,.22)}
.btn-hc:hover{background:#184a8c;border-color:#184a8c}
.wn-opt{display:flex;flex-direction:column;gap:.35rem;text-decoration:none}
.wn-opt small{font-size:.72rem;font-weight:600;letter-spacing:.02em;color:#c9d0d9}
.wn-opt .btn{text-align:center}
.oc-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}
/* the Manufacturing / Health system switch reads as two clear buttons */
.oc-switch{background:none!important;padding:0!important;gap:.7rem!important}
.oc-switch label{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;padding:.75rem 1.3rem!important;border:2px solid #c3ccd6;border-radius:14px!important;background:#fff;color:#12151a!important;box-shadow:0 2px 6px rgba(18,21,26,.06)}
.oc-switch label b{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#5b6472}
.oc-switch label:hover{border-color:#12151a}
#oc-mfg:checked~.oc-switch label[for=oc-mfg]{background:#ff9e1b!important;border-color:#ff9e1b;color:#12151a!important}
#oc-mfg:checked~.oc-switch label[for=oc-mfg] b{color:#12151a}
#oc-hc:checked~.oc-switch label[for=oc-hc]{background:#1e5aa8!important;border-color:#1e5aa8;color:#fff!important}
#oc-hc:checked~.oc-switch label[for=oc-hc] b{color:#dbe7f7}
#oc-hc:checked~.oc-sets .arc{stroke:#5b9cf0}
/* the healthcare Pulse card in the dark panel gets the blue level badge */
#pulse .ladder>.rung:nth-child(2) .lvl-tag{background:#5b9cf0!important;color:#12151a!important}
#pulse .ladder>.rung:nth-child(2) .lvl-ico{color:#5b9cf0!important}
/* "Decades of expertise": four distinct cards in a colour used nowhere else (indigo) */
#assessments .why{gap:1rem!important}
#assessments .why>div{position:relative;background:linear-gradient(160deg,#f3f3fd,#e9eafb);border:1px solid #d3d5f3;border-top:4px solid #4b4fb0;border-radius:16px;padding:1.3rem 1.2rem 1.2rem!important;transition:transform .2s,box-shadow .2s}
#assessments .why>div:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(75,79,176,.16)}
#assessments .why>div b{color:#2b2e7a}
#assessments .why>div span{color:#39414e}
/* #2569: the logo has a heartbeat, so the site reads as alive from the first second */
nav .zlock{position:relative;padding-bottom:9px}
.nav-ecg{position:absolute;left:44px;right:0;bottom:-3px;height:12px;width:auto;overflow:visible}
.nav-ecg polyline{fill:none;stroke:#ff9e1b;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:150;stroke-dashoffset:150;animation:nav-ecg 2.4s linear infinite;filter:drop-shadow(0 0 3px rgba(255,158,27,.7))}
@keyframes nav-ecg{0%{stroke-dashoffset:150}60%{stroke-dashoffset:0}100%{stroke-dashoffset:-150}}
@media (prefers-reduced-motion:reduce){.nav-ecg polyline{animation:none;stroke-dashoffset:0}}

/* #2574: reviewer round (14 years in manufacturing, 9 Oct) */
/* the engine flow, the three ways and the old-vs-new strip swipe sideways on phones like every other card row */
@media (max-width:640px){
  .ways-grid,.eng-vs{display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:86%;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.3rem 2px 1rem}
  .ways-grid>*,.eng-vs>*{scroll-snap-align:start;min-width:0}
  /* #2906: the brain card shows first, stacked, no sideways swipe */
  .eng-flow{display:grid!important;grid-auto-flow:row;grid-template-columns:1fr!important;gap:.9rem;overflow:visible}
  .eng-flow>*{min-width:0}
  .eng-core{order:-1}
  .eng-node::after{display:none!important}
}
/* the deck: every card's header reads the same (icon, badge, name), and enough of each header stays visible to read the name */
@media (min-width:821px){
  #assessments .ladder>.rung{top:calc(var(--deck) + var(--i,0) * 76px)!important;padding-top:1rem!important}
  #assessments .ladder>.rung>div:first-child{display:flex;flex-direction:column;gap:.4rem}
  #assessments .ladder>.rung .rung-name{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.75rem;row-gap:.15rem;align-items:center;justify-items:start}
  #assessments .ladder>.rung .rung-name>.lvl-ico{grid-row:1 / span 2}
  #assessments .ladder>.rung .rung-name>.lvl-ico+.lvl-ico{display:none}
  #assessments .ladder>.rung .rung-name>.pill{grid-column:2}
  #assessments .ladder>.rung .lvl-txt{flex-direction:row;align-items:center;flex-wrap:wrap;gap:.6rem}
  #assessments .ladder>.rung .lvl-txt .lvl-tag{margin:0}
}
/* every "open more" control shows its + on the left */
.acc>summary{grid-template-columns:auto 1fr!important}
.acc>summary::after{display:none}
.acc>summary::before{content:"+";display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ff9e1b;color:#12151a;font-weight:700;font-size:1.1rem;line-height:1;grid-row:1 / span 2}
.acc[open]>summary::before{content:"\2212"}
/* Level 3 reads plum everywhere so it never blurs into Level 2 orange */
#snapshot-detail{--ember:#9b2c6f;--ember-deep:#9b2c6f;border-left-color:#9b2c6f!important}
#snapshot-detail .pill-new{color:#fff}   /* #3636: dark ink on the plum fell below 4.5:1; white on #9b2c6f is about 7:1 */
#snapshot-detail .newbox{background:linear-gradient(135deg,#f8e6f0,#fff 70%)}

.sw-wrap>[tabindex]:focus-visible{outline:3px solid var(--signal-deep,#0f6b8c);outline-offset:2px}   /* #2861: the keyboard stop on a sideways-scrolling area is visible */

/* #2998 (Mike 13 Oct): levels as steps in the hero, the traditional study crossed out, the platform named, Health in blue */
.h2-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:.2rem 0 .5rem;padding:0}
.h2-steps a{display:flex;flex-direction:column;gap:.1rem;height:100%;padding:.6rem .7rem;border:1.5px solid #c3ccd6;border-radius:12px;background:#fff;color:#12151a;text-decoration:none}
.h2-steps a:hover,.h2-steps a:focus-visible{border-color:var(--ember)}
.h2-steps i{font-style:normal;font-family:var(--mono,"IBM Plex Mono",monospace);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#5b6472}
.h2-steps b{font-size:1.15rem;color:#12151a}
.h2-steps span{font-size:.8rem;color:#3d4550;line-height:1.3}
.h2-steps li:first-child a{border-color:var(--ember);background:#fff7ec}
.h2-steps-note{font-size:.85rem;color:#5b6472;margin:0 0 1rem}
@media (max-width:640px){.h2-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vs-old b{text-decoration:line-through;text-decoration-color:#c62828;text-decoration-thickness:2px;color:#6b7380}
.vs-x{display:inline-grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;background:#c62828;color:#fff;font-size:.8em;margin-right:.3em;vertical-align:middle}
.vs-old{border-color:#e7b4b4!important}
.ways-sub{max-width:48rem;margin:.3rem auto 1.2rem;text-align:center;color:#3d4550}
.pkg-hook{margin:.75rem 0 0;font-weight:700;font-size:1.02rem}
.oc-switch label[for=oc-mfg]{border-color:#ff9e1b}
.oc-switch label[for=oc-hc]{border-color:#1e5aa8;color:#1e5aa8!important}
.oc-switch label[for=oc-hc] b{color:#1e5aa8}
#oc-hc:checked~.oc-switch label[for=oc-hc]{color:#fff!important}
#oc-hc:checked~.oc-switch label[for=oc-hc] b{color:#dbe7f7}
@media (min-width:961px){#snapshot-detail .proof-grid{grid-template-columns:repeat(3,1fr)}}
/* #3003 (Mike 13 Oct 11:24): Health in blue before it is picked; level steps in their package colours; Other industries as a Level 1 card in violet */
.lq-tabs label[for=lq-h]{border-color:#5b9cf0;color:#9cc4f5}
.lq-tabs label[for=lq-m]{border-color:#ff9e1b;color:#ffc56b}
.h2-steps li:nth-child(1) a{border-color:#237a48;background:#eef8f2}.h2-steps li:nth-child(1) i{color:#237a48}
.h2-steps li:nth-child(2) a{border-color:#ff9e1b;background:#fff4e3}.h2-steps li:nth-child(2) i{color:#a85400}
.h2-steps li:nth-child(3) a{border-color:#9b2c6f;background:#fbeef5}.h2-steps li:nth-child(3) i{color:#9b2c6f}
.h2-steps li:nth-child(4) a{border-color:#1b7483;background:#eaf5f6}.h2-steps li:nth-child(4) i{color:#1b7483}
.h2-steps a:hover,.h2-steps a:focus-visible{box-shadow:0 4px 14px rgba(18,21,26,.12)}
#pulse .ladder>.rung#otherIndustries .lvl-tag{background:#a78bfa!important;color:#12151a!important}
#pulse .ladder>.rung#otherIndustries .lvl-ico{color:#a78bfa!important}
#pulse .ladder>.rung#otherIndustries .rung-act{color:#a78bfa}
/* #3004 (Mike 13 Oct 11:58): the three Level 1 cards stack the same way; the compare link under the level steps */
#pulse .ladder>.rung .rung-name{flex-direction:column;align-items:flex-start}
.h2-compare{display:inline-block;margin-top:.35rem;font-weight:700;color:#12151a;text-decoration:underline;text-underline-offset:3px}
.h2-compare:hover{color:var(--ember)}
#compare-levels .matrix-wrap{margin-top:0}
body:has(#compare-levels) .hero{padding-bottom:1.5rem}
#compare-levels{padding-top:1rem}