/*!
 * Mindset Staff Induction, front-end styles.
 * Generated from induction-form.html: every selector is scoped to .mch-induction and
 * the layout breakpoints are container queries, so the journey lays itself out from
 * the width it is given rather than the width of the window.
 */
.mch-induction{
  --ink:#0f2620; --ink-2:#33544a; --ink-3:#6b857c;
  --line:#e2e8e4; --line-2:#eef2ef;
  --sand:#f7f5f0; --card:#fff;
  --brand:#1a6350; --brand-2:#2b8a6c; --brand-ink:#0f3a2e; --brand-wash:#eaf3ef;
  --amber:#c47a2c; --amber-wash:#fdf4e7;
  --rose:#a83a2f; --rose-wash:#fdf0ee;
  --ok:#1c7a55;
  --r:16px; --r-sm:10px;
  --sh-1:0 1px 2px rgba(15,38,32,.05), 0 1px 3px rgba(15,38,32,.04);
  --sh-2:0 2px 4px rgba(15,38,32,.04), 0 12px 32px rgba(15,38,32,.07);
  --sh-3:0 4px 8px rgba(15,38,32,.05), 0 24px 64px rgba(15,38,32,.10);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
}
.mch-induction *{box-sizing:border-box}
.mch-induction{
  background:var(--sand); color:var(--ink);
  font:16px/1.65 var(--sans); font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
}
.mch-induction h1, .mch-induction h2, .mch-induction h3, .mch-induction .display{font-family:var(--serif); font-weight:600; letter-spacing:-.015em; line-height:1.15}
.mch-induction p{margin:0 0 14px}
.mch-induction a{color:var(--brand)}

/* ══════════ shell ══════════ */
.mch-induction .app{display:grid; grid-template-columns:1fr; min-height:100vh}
@container mch (min-width:1040px){.mch-induction .app{grid-template-columns:266px 1fr}
.mch-induction.at-welcome .app{grid-template-columns:1fr}

}
.mch-induction .main{min-width:0; display:flex; flex-direction:column}
.mch-induction .stage{flex:1; padding:0 20px 190px; width:100%; max-width:760px; margin:0 auto}
.mch-induction.at-welcome .stage{max-width:none; padding:0}
@container mch (min-width:1040px){.mch-induction .stage{padding:0 40px 190px}
 }

/* ══════════ rail (desktop) ══════════ */
.mch-induction .rail{display:none; position:sticky; top:0; height:100vh; overflow-y:auto;
  background:var(--brand-ink); color:#dbe9e3; padding:26px 20px 30px}
@container mch (min-width:1040px){.mch-induction .rail{display:block}
.mch-induction.at-welcome .rail{display:none}
 }
.mch-induction .rail .mark{display:flex; gap:10px; align-items:center; margin:0 0 26px}
.mch-induction .rail .mark .dot{width:30px; height:30px; border-radius:9px; background:var(--brand-2);
  display:grid; place-items:center; flex:0 0 auto}
.mch-induction .rail .mark b{font-family:var(--serif); font-size:15px; color:#fff; line-height:1.25; display:block}
.mch-induction .rail .mark small{font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.6}
.mch-induction .rail h4{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#7fae9c;
  margin:22px 0 10px; font-family:var(--sans); font-weight:600}
.mch-induction .rail h4:first-of-type{margin-top:0}
.mch-induction .chap{list-style:none; margin:0 0 4px; padding:0}
.mch-induction .chap li{margin:0}
.mch-induction .chap button{width:100%; text-align:left; background:none; border:0; color:#c7ddd4;
  font:inherit; font-size:13.5px; padding:7px 10px; border-radius:8px; cursor:pointer;
  display:flex; gap:9px; align-items:flex-start; line-height:1.35}
.mch-induction .chap button:hover{background:rgba(255,255,255,.07); color:#fff}
.mch-induction .chap button[disabled]{opacity:.42; cursor:default}
.mch-induction .chap button[disabled]:hover{background:none; color:#c7ddd4}
.mch-induction .chap li.on button{background:var(--brand-2); color:#fff; font-weight:600}
.mch-induction .chap .pip{width:16px; height:16px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35);
  flex:0 0 auto; margin-top:2px; display:grid; place-items:center; font-size:9px}
.mch-induction .chap li.done .pip{background:#5fc79f; border-color:#5fc79f; color:#0f3a2e}
.mch-induction .chap li.done .pip:after{content:"✓"; font-weight:700}
.mch-induction .chap li.on .pip{border-color:#fff}
.mch-induction .rail .foot{margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14);
  font-size:11.5px; line-height:1.5; color:#8fb5a6}

/* ══════════ top bar ══════════ */
.mch-induction .topbar{position:sticky; top:0; z-index:40; background:rgba(247,245,240,.88);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.mch-induction.at-welcome .topbar{display:none}
.mch-induction .topbar .in{max-width:760px; margin:0 auto; padding:11px 20px; display:flex; align-items:center; gap:14px}
@container mch (min-width:1040px){.mch-induction .topbar .in{padding:11px 40px}
 }
.mch-induction .tb-label{font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:.02em; white-space:nowrap}
.mch-induction .segs{display:flex; gap:3px; flex:1; min-width:0}
.mch-induction .segs i{flex:1; height:5px; border-radius:99px; background:var(--line); transition:background .3s}
.mch-induction .segs i.done{background:var(--brand-2)}
.mch-induction .segs i.on{background:var(--brand); box-shadow:0 0 0 3px rgba(43,138,108,.14)}
.mch-induction .tb-pct{font-size:12px; font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums}

/* autosave status */
.mch-induction .tb-save{display:inline-flex; align-items:center; gap:6px; flex:none; height:24px; padding:0 10px 0 8px;
  border-radius:99px; background:var(--card); border:1px solid var(--line); font-size:11.5px; font-weight:600;
  color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums; transition:color .25s, border-color .25s, background .25s}
.mch-induction .tb-save:empty{display:none}
.mch-induction .tb-save i{width:7px; height:7px; border-radius:50%; background:var(--ink-3); flex:none; transition:background .25s}
.mch-induction .tb-save .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.mch-induction .tb-save.is-saved, .mch-induction .tb-save.is-synced, .mch-induction .tb-save.is-local{color:var(--ok)}
.mch-induction .tb-save.is-saved i, .mch-induction .tb-save.is-synced i, .mch-induction .tb-save.is-local i{background:var(--ok)}
.mch-induction .tb-save.is-saved{animation:mchSaved .6s ease 1}
.mch-induction .tb-save.is-saving i{background:var(--brand-2); animation:mchPulse 1s ease-in-out infinite}
.mch-induction .tb-save.is-offline, .mch-induction .tb-save.is-retry{color:var(--amber); background:var(--amber-wash); border-color:#f2ddbe}
.mch-induction .tb-save.is-offline i, .mch-induction .tb-save.is-retry i{background:var(--amber)}
.mch-induction .tb-save.is-signin{color:var(--rose); background:var(--rose-wash); border-color:#f3cfc9}
.mch-induction .tb-save.is-signin i{background:var(--rose)}
@keyframes mchPulse{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.35; transform:scale(.7)}}
@keyframes mchSaved{0%{box-shadow:0 0 0 0 rgba(28,122,85,.35)}100%{box-shadow:0 0 0 7px rgba(28,122,85,0)}}
@media (prefers-reduced-motion:reduce){.mch-induction .tb-save, .mch-induction .tb-save i{animation:none !important}}
@container mch (max-width:520px){
  .mch-induction .tb-save{padding:0; width:24px; justify-content:center}
  .mch-induction .tb-save span:not(.sr){display:none}
}

/* ══════════ welcome ══════════ */
.mch-induction .hero{position:relative; overflow:hidden; color:var(--hero-text,#eaf3ef);
  background:radial-gradient(120% 90% at 15% 0%, var(--hero-1,#22775f) 0%, var(--hero-2,#12463a) 55%, var(--hero-3,#0d3229) 100%)}
.mch-induction .hero:after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 85% 15%, rgba(196,122,44,.22), transparent 70%)}
.mch-induction .hero .in{position:relative; z-index:1; max-width:760px; margin:0 auto; padding:70px 20px 62px}
@container mch (min-width:1040px){.mch-induction .hero .in{padding:96px 40px 86px}
 }
.mch-induction .kicker{display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#a8d4c3;
  border:1px solid rgba(255,255,255,.22); border-radius:99px; padding:6px 13px; margin:0 0 22px}
.mch-induction .hero h1{font-size:clamp(36px,7vw,62px); color:#fff; margin:0 0 16px; letter-spacing:-.03em}
.mch-induction .hero .sub{font-size:clamp(17px,2.6vw,21px); color:#c9e2d8; max-width:30ch; margin:0 0 30px;
  font-family:var(--serif); font-weight:400; line-height:1.4}
.mch-induction .hero .meta{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 34px}
.mch-induction .hero .meta span{font-size:12.5px; padding:6px 12px; border-radius:99px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16)}
.mch-induction .wcards{display:grid; gap:12px; grid-template-columns:1fr; margin:0 0 34px}
@container mch (min-width:640px){.mch-induction .wcards{grid-template-columns:repeat(3,1fr)}
 }
.mch-induction .wcard{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-sm); padding:16px 16px 18px}
.mch-induction .wcard svg{color:#8fd3b8; margin-bottom:9px}
.mch-induction .wcard b{display:block; font-size:14.5px; color:#fff; margin-bottom:3px}
.mch-induction .wcard span{font-size:13px; color:#a9cec0; line-height:1.5}
.mch-induction .hero .note{font-size:13.5px; color:#a9cec0; max-width:56ch; margin:0 0 30px}
.mch-induction .hero .startline{font-size:13px; color:#8fb5a6; margin:14px 0 0}

/* ══════════ steps ══════════ */
.mch-induction .step{display:none}
.mch-induction .step.on{display:block; animation:rise .42s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0; transform:translateY(14px)}
 to{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){.mch-induction .step.on{animation:none}
.mch-induction{scroll-behavior:auto}
 }
.mch-induction .eyebrow{display:flex; align-items:center; gap:10px; margin:34px 0 12px;
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand)}
.mch-induction .eyebrow:after{content:""; flex:1; height:1px; background:var(--line)}
.mch-induction .step h2{font-size:clamp(27px,4.6vw,38px); margin:0 0 12px}
.mch-induction .step .lede{font-size:17px; color:var(--ink-2); margin:0 0 26px; max-width:62ch}
.mch-induction .badge-row{display:flex; align-items:center; gap:14px; margin:34px 0 18px}
.mch-induction .badge{width:52px; height:52px; border-radius:14px; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--brand-2),var(--brand)); color:#fff; box-shadow:var(--sh-2)}
.mch-induction .badge-row .txt{min-width:0}
.mch-induction .badge-row .txt small{display:block; font-size:11.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--brand); margin-bottom:3px}
.mch-induction .badge-row .txt h2{font-size:clamp(24px,4vw,32px); margin:0}
.mch-induction .readtime{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-3);
  background:var(--card); border:1px solid var(--line); border-radius:99px; padding:4px 11px; margin:0 0 22px}
.mch-induction .prose{font-size:16.5px; line-height:1.72}
.mch-induction .prose h4{font-family:var(--serif); font-size:19px; font-weight:600; margin:30px 0 10px}
.mch-induction .prose ul{margin:0 0 16px; padding:0; list-style:none}
.mch-induction .prose ul li{position:relative; padding-left:26px; margin:0 0 11px}
.mch-induction .prose ul li:before{content:""; position:absolute; left:6px; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--brand-2)}
.mch-induction .prose .kv{width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; margin:0 0 18px; font-size:15px}
.mch-induction .prose .kv td{padding:11px 14px; border-bottom:1px solid var(--line-2); vertical-align:top}
.mch-induction .prose .kv tr:last-child td{border-bottom:0}
.mch-induction .prose .kv td:first-child{width:36%; color:var(--ink-3); font-weight:600; font-size:13.5px;
  background:#fbfcfb; letter-spacing:.01em}
@container mch (max-width:560px){.mch-induction .prose .kv td{display:block; border-bottom:0; padding:9px 14px 0}
.mch-induction .prose .kv td:first-child{width:auto; background:none; padding-top:12px}
.mch-induction .prose .kv td:last-child{padding-bottom:12px; border-bottom:1px solid var(--line-2)}

}
.mch-induction .callout{border-radius:var(--r-sm); padding:16px 18px; margin:0 0 20px; font-size:15.5px; line-height:1.6}
.mch-induction .callout b{display:block; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px}
.mch-induction .callout.amber{background:var(--amber-wash); border:1px solid #f2ddbe; color:#6b4413}
.mch-induction .callout.amber b{color:var(--amber)}
.mch-induction .callout.rose{background:var(--rose-wash); border:1px solid #f3cfc9; color:#7a2a21}
.mch-induction .callout.rose b{color:var(--rose)}
.mch-induction .keyrule{display:flex; gap:14px; align-items:flex-start; background:var(--brand-ink); color:#e6f2ec;
  border-radius:var(--r); padding:18px 20px; margin:26px 0 4px; box-shadow:var(--sh-2)}
.mch-induction .keyrule svg{color:#7fd3b3; flex:0 0 auto; margin-top:2px}
.mch-induction .keyrule b{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#7fae9c; margin-bottom:5px}
.mch-induction .keyrule span{font-size:16px; line-height:1.55; font-family:var(--serif)}

/* ══════════ acknowledge ══════════ */
.mch-induction .ackbox{margin:26px 0 0}
.mch-induction .ackbtn{display:flex; gap:14px; align-items:flex-start; width:100%; text-align:left;
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--r);
  padding:18px 20px; cursor:pointer; font:inherit; font-size:15.5px; color:var(--ink);
  transition:border-color .2s, background .2s, box-shadow .2s}
.mch-induction .ackbtn:hover{border-color:var(--brand-2); box-shadow:var(--sh-1)}
.mch-induction .ackbtn .box{width:24px; height:24px; border-radius:7px; border:1.5px solid var(--ink-3);
  flex:0 0 auto; display:grid; place-items:center; color:#fff; transition:all .2s}
.mch-induction .ackbtn .box svg{opacity:0; transform:scale(.5); transition:all .22s cubic-bezier(.2,1.4,.3,1)}
.mch-induction .ackbtn.yes{border-color:var(--brand); background:var(--brand-wash)}
.mch-induction .ackbtn.yes .box{background:var(--brand); border-color:var(--brand)}
.mch-induction .ackbtn.yes .box svg{opacity:1; transform:none}
.mch-induction .ackbtn.shake{animation:shake .4s; border-color:var(--rose)}
@keyframes shake{0%,100%{transform:none}
25%{transform:translateX(-6px)}
75%{transform:translateX(6px)}
}
.mch-induction .ackbtn input{position:absolute; opacity:0; pointer-events:none}
.mch-induction .ackbtn .t b{display:block; font-weight:600; margin-bottom:2px}
.mch-induction .ackbtn .t span{color:var(--ink-2); font-size:14.5px}

/* ══════════ fields ══════════ */
.mch-induction .grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@container mch (max-width:600px){.mch-induction .grid{grid-template-columns:1fr}
 }
.mch-induction .field label{display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin:0 0 6px}
.mch-induction .field label .req{color:var(--rose)}
.mch-induction input[type=text], .mch-induction input[type=date], .mch-induction input[type=tel], .mch-induction input[type=email], .mch-induction select{
  width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--card);
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:11px 13px;
  transition:border-color .18s, box-shadow .18s}
.mch-induction input:hover, .mch-induction select:hover{border-color:#cdd8d2}
.mch-induction input:focus, .mch-induction select:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 4px rgba(26,99,80,.12)}
.mch-induction input.bad, .mch-induction select.bad{border-color:var(--rose); background:#fffafa}
.mch-induction .hint{font-size:12.5px; color:var(--ink-3); margin:6px 0 0}

/* ══════════ sign-off tables ══════════ */
.mch-induction .tblcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1); overflow:hidden; margin:0 0 20px}
.mch-induction .tblcard > header{padding:15px 18px; border-bottom:1px solid var(--line-2); background:#fbfcfb;
  display:flex; align-items:center; gap:10px}
.mch-induction .tblcard > header .n{font-size:11.5px; font-weight:700; color:var(--brand); background:var(--brand-wash);
  border-radius:6px; padding:3px 8px; letter-spacing:.04em}
.mch-induction .tblcard > header h3{font-size:16px; margin:0; font-family:var(--serif)}
.mch-induction .tblcard > header .cnt{margin-left:auto; font-size:12px; color:var(--ink-3); font-weight:600; white-space:nowrap}
.mch-induction .tblcard > header .go{display:inline-flex; align-items:center; gap:5px}
.mch-induction .rows{padding:6px 0}
.mch-induction .row{padding:12px 18px; border-bottom:1px solid var(--line-2)}
.mch-induction .row:last-child{border-bottom:0}
.mch-induction .row .topic{font-size:15px; margin:0 0 9px; display:flex; gap:9px; align-items:flex-start}
.mch-induction .row .topic .tick{width:17px; height:17px; border-radius:50%; border:1.5px solid var(--line);
  flex:0 0 auto; margin-top:3px; display:grid; place-items:center; font-size:9px; color:#fff;
  transition:all .2s}
.mch-induction .row.filled .topic .tick{background:var(--ok); border-color:var(--ok)}
.mch-induction .row.filled .topic .tick:after{content:"✓"; font-weight:700}
.mch-induction .row .three{display:grid; grid-template-columns:1fr 132px 88px; gap:8px; padding-left:26px}
@container mch (max-width:600px){.mch-induction .row .three{grid-template-columns:1fr 1fr; padding-left:0}
.mch-induction .row .three .f-by{grid-column:1/-1}
 }
.mch-induction .row input{font-size:14.5px; padding:8px 11px}
.mch-induction .row input:placeholder{color:#a9b8b1}

/* ══════════ signature ══════════ */
.mch-induction .sigcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1); padding:18px; margin:0 0 18px}
.mch-induction .sigcard > b{display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin:0 0 10px}
.mch-induction .sigpad{width:100%; height:160px; border:1.5px dashed #cfdad4; border-radius:var(--r-sm);
  background:linear-gradient(#fff,#fdfefd); touch-action:none; display:block; cursor:crosshair}
.mch-induction .sigpad.bad{border-color:var(--rose)}
.mch-induction .sigbar{display:flex; align-items:center; gap:12px; margin-top:10px}
.mch-induction .sigbar .hint{margin:0; flex:1}
.mch-induction .linkbtn{background:none; border:0; color:var(--brand); font:inherit; font-size:13px;
  font-weight:600; cursor:pointer; padding:4px; text-decoration:underline; text-underline-offset:2px}

/* ══════════ review ══════════ */
.mch-induction .rev{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1); overflow:hidden; margin:0 0 18px}
.mch-induction .rev .r{display:flex; gap:14px; align-items:center; padding:15px 18px; border-bottom:1px solid var(--line-2)}
.mch-induction .rev .r:last-child{border-bottom:0}
.mch-induction .rev .ic{width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center}
.mch-induction .rev .ic.ok{background:var(--brand-wash); color:var(--ok)}
.mch-induction .rev .ic.warn{background:var(--amber-wash); color:var(--amber)}
.mch-induction .rev .tx{flex:1; min-width:0}
.mch-induction .rev .tx b{display:block; font-size:15px; font-weight:600}
.mch-induction .rev .tx span{font-size:13.5px; color:var(--ink-3)}
.mch-induction .rev .go{background:none; border:1px solid var(--line); border-radius:8px; color:var(--brand);
  font:inherit; font-size:12.5px; font-weight:600; padding:6px 11px; cursor:pointer; white-space:nowrap}
.mch-induction .rev .go:hover{border-color:var(--brand); background:var(--brand-wash)}

/* ══════════ nav ══════════ */
.mch-induction .nav{position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:linear-gradient(rgba(247,245,240,0),rgba(247,245,240,.96) 34%);
  padding:26px 20px 18px; pointer-events:none}
.mch-induction .nav .in{max-width:760px; margin:0 auto; display:flex; align-items:center; gap:12px; pointer-events:auto}
@container mch (min-width:1040px){.mch-induction .nav{left:266px}
.mch-induction.at-welcome .nav{left:0}
.mch-induction .nav .in{padding:0 40px}
 }
.mch-induction .btn{font:inherit; font-weight:600; font-size:15.5px; border-radius:12px; padding:14px 26px;
  border:1.5px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  transition:transform .12s, box-shadow .2s, background .2s}
.mch-induction .btn:active{transform:translateY(1px)}
.mch-induction .btn.go{background:var(--brand); color:#fff; box-shadow:0 6px 18px rgba(26,99,80,.28)}
.mch-induction .btn.go:hover{background:#155645; box-shadow:0 8px 24px rgba(26,99,80,.34)}
.mch-induction .btn.light{background:#fff; color:var(--brand-ink); box-shadow:0 10px 30px rgba(0,0,0,.22)}
.mch-induction .btn.light:hover{background:#f3faf7; transform:translateY(-1px)}
.mch-induction .btn.back{background:var(--card); color:var(--ink-2); border-color:var(--line); box-shadow:var(--sh-1)}
.mch-induction .btn.back:hover{border-color:var(--brand); color:var(--brand)}
.mch-induction .btn.big{font-size:17px; padding:16px 32px}
.mch-induction .btn[disabled]{opacity:.55; cursor:not-allowed; box-shadow:none}
.mch-induction .nav .msg{flex:1; min-width:0; font-size:13px; color:var(--ink-3)}
.mch-induction .nav .msg.err{color:var(--rose); font-weight:600}
.mch-induction .nav .msg.ok{color:var(--ok); font-weight:600}
@container mch (max-width:640px){.mch-induction .nav .in{flex-wrap:wrap}
.mch-induction .nav .msg{order:-1; flex:1 0 100%; text-align:center; margin:0 0 8px}
.mch-induction .nav .msg:empty{display:none}
.mch-induction .btn{padding:13px 20px}
.mch-induction .tblcard > header{flex-wrap:wrap}
.mch-induction .tblcard > header .n{order:1}
.mch-induction .tblcard > header .cnt{order:2}
.mch-induction .tblcard > header .go{order:3}
.mch-induction .tblcard > header h3{order:4; flex:1 0 100%; margin-top:4px}

}
.mch-induction .spin{width:15px; height:15px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}
}

/* ══════════ finish ══════════ */
.mch-induction .finish{text-align:center; padding:60px 0 40px}
.mch-induction .finish .ring{width:88px; height:88px; margin:0 auto 26px; border-radius:50%;
  background:linear-gradient(150deg,var(--brand-2),var(--brand)); color:#fff;
  display:grid; place-items:center; box-shadow:0 10px 34px rgba(26,99,80,.32);
  animation:pop .55s cubic-bezier(.2,1.5,.35,1) both}
@keyframes pop{from{transform:scale(.4); opacity:0}
 to{transform:none; opacity:1}
}
.mch-induction .finish h2{font-size:clamp(30px,5.4vw,42px); margin:0 0 12px}
.mch-induction .finish p{color:var(--ink-2); max-width:50ch; margin:0 auto 14px; font-size:16.5px}
.mch-induction .finish .acts{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.mch-induction #confetti{position:fixed; inset:0; pointer-events:none; z-index:60; display:none}
.mch-induction footer.legal{text-align:center; font-size:12px; color:var(--ink-3); padding:0 20px 40px; max-width:760px; margin:0 auto}
.mch-induction .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION ACCENTS
   Every section carries its own colour, so reading fourteen of them in a row
   never feels like the same page fourteen times. All fourteen are dark enough
   to hold white text on the icon badge.
   ══════════════════════════════════════════════════════════════════════════ */
.mch-induction .step{--acc:var(--brand); --acc-2:var(--brand-2); --acc-wash:var(--brand-wash)}
.mch-induction .step.acc-1{--acc:#1a6350; --acc-2:#2f8f6f; --acc-wash:#eaf3ef}
.mch-induction .step.acc-2{--acc:#0f6f6a; --acc-2:#1f958e; --acc-wash:#e5f3f2}
.mch-induction .step.acc-3{--acc:#17627f; --acc-2:#2a8bad; --acc-wash:#e6f2f7}
.mch-induction .step.acc-4{--acc:#275f8f; --acc-2:#3e86bd; --acc-wash:#e9f1f8}
.mch-induction .step.acc-5{--acc:#414c93; --acc-2:#626ec2; --acc-wash:#ecedfa}
.mch-induction .step.acc-6{--acc:#5b4593; --acc-2:#7c63c0; --acc-wash:#efebf9}
.mch-induction .step.acc-7{--acc:#7a3f76; --acc-2:#a35c9d; --acc-wash:#f6edf5}
.mch-induction .step.acc-8{--acc:#8a3c62; --acc-2:#b45884; --acc-wash:#f9edf2}
.mch-induction .step.acc-9{--acc:#9c3d45; --acc-2:#c46068; --acc-wash:#fbedee}
.mch-induction .step.acc-10{--acc:#9c5334; --acc-2:#c47a4f; --acc-wash:#fbf0ea}
.mch-induction .step.acc-11{--acc:#8a6415; --acc-2:#b8892a; --acc-wash:#faf3e3}
.mch-induction .step.acc-12{--acc:#6d711c; --acc-2:#949a31; --acc-wash:#f4f5e4}
.mch-induction .step.acc-13{--acc:#4c7429; --acc-2:#6d9c42; --acc-wash:#eef5e7}
.mch-induction .step.acc-14{--acc:#26714a; --acc-2:#3a9a68; --acc-wash:#e8f4ed}
.mch-induction .sec-head{
  position:relative; overflow:hidden; background:var(--acc-wash);
  border-radius:var(--r); padding:22px 24px 18px; margin:30px 0 24px;
}
.mch-induction .sec-head:after{
  content:attr(data-n); position:absolute; right:18px; bottom:-26px;
  font-family:var(--serif); font-weight:600; font-size:112px; line-height:1;
  color:var(--acc); opacity:.11; pointer-events:none; letter-spacing:-.04em;
}
.mch-induction .sec-head .badge-row{margin:0 0 14px}
.mch-induction .sec-head .readtime{margin:0; background:rgba(255,255,255,.72); border-color:rgba(255,255,255,.9); color:var(--acc)}
.mch-induction .badge{background:linear-gradient(150deg,var(--acc-2),var(--acc))}
.mch-induction .badge-row .txt small{color:var(--acc)}
.mch-induction .prose ul li:before{background:var(--acc-2)}
.mch-induction .keyrule{border-left:4px solid var(--acc-2)}
.mch-induction .keyrule svg{color:var(--acc-2)}
.mch-induction .ackbtn:hover{border-color:var(--acc-2)}
.mch-induction .ackbtn.yes{border-color:var(--acc); background:var(--acc-wash)}
.mch-induction .ackbtn.yes .box{background:var(--acc); border-color:var(--acc)}
.mch-induction .eyebrow{color:var(--acc)}

/* the opening paragraph of a section gets a little more presence */
.mch-induction .prose > p:first-of-type{font-size:17.5px; color:var(--ink); line-height:1.66}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE FIXES
   ══════════════════════════════════════════════════════════════════════════ *//* a signature is drawn small: a 700px-wide pad just looks broken */
.mch-induction .sigpad{max-width:520px}

/* every control stays a real tap target */
.mch-induction .tblcard > header .go{min-height:34px; padding:0 13px}
.mch-induction .linkbtn{min-height:34px; padding:6px 6px}
.mch-induction .row input{min-height:38px}

/* 23 separate pips are noise on a phone: show one continuous bar instead */
@container mch (max-width:620px){.mch-induction .segs{gap:0; height:5px; border-radius:99px; background:var(--line); overflow:hidden}
.mch-induction .segs i{height:5px; border-radius:0; background:transparent; box-shadow:none}
.mch-induction .segs i.done, .mch-induction .segs i.on{background:var(--brand-2); box-shadow:none}
.mch-induction .tb-label{font-size:11.5px}
.mch-induction .sec-head{padding:18px 18px 15px; margin:22px 0 20px}
.mch-induction .sec-head:after{font-size:76px; right:10px; bottom:-18px}
.mch-induction .badge{width:44px; height:44px; border-radius:12px}
.mch-induction .step .lede{font-size:16px}
.mch-induction .prose{font-size:16px}
.mch-induction .prose > p:first-of-type{font-size:16.5px}
.mch-induction .keyrule{padding:15px 16px; gap:11px}
.mch-induction .keyrule span{font-size:15px}
.mch-induction .ackbtn{padding:15px 16px}
.mch-induction .hero .in{padding:44px 20px 40px}
.mch-induction .wcards{gap:10px}

}

/* very small phones */
@container mch (max-width:380px){.mch-induction .stage{padding-left:15px; padding-right:15px}
.mch-induction .nav{padding-left:15px; padding-right:15px}
.mch-induction .btn{font-size:14.5px; padding:12px 16px; gap:7px}
.mch-induction .sec-head:after{font-size:62px}
.mch-induction .tblcard > header{gap:7px}
.mch-induction .tblcard > header h3{font-size:15px}

}

/* ══════════════════════════════════════════════════════════════════════════
   MOVEMENT: small, calm, and switched off for anyone who asks
   ══════════════════════════════════════════════════════════════════════════ */
.mch-induction .hero:before{
  content:""; position:absolute; width:540px; height:540px; border-radius:50%;
  top:-210px; left:-140px; pointer-events:none;
  background:radial-gradient(circle, var(--hero-glow,rgba(111,214,173,.30)), transparent 62%);
  animation:drift 20s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translate3d(90px,60px,0) scale(1.15)}
}
.mch-induction .btn.go.pulse{animation:pulse 1.15s ease-out 2}
@keyframes pulse{
  0%{box-shadow:0 6px 18px rgba(26,99,80,.28), 0 0 0 0 rgba(43,138,108,.45)}

  100%{box-shadow:0 6px 18px rgba(26,99,80,.28), 0 0 0 16px rgba(43,138,108,0)}

}
.mch-induction .ackbtn.yes .box{animation:stamp .32s cubic-bezier(.2,1.5,.35,1)}
@keyframes stamp{from{transform:scale(.7)}
 to{transform:scale(1)}
}

/* a quiet word of encouragement at each quarter of the journey */
.mch-induction .toast{
  position:fixed; left:50%; bottom:104px; z-index:60;
  transform:translateX(-50%) translateY(16px); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:10px;
  background:var(--brand-ink); color:#e9f4ef; border-radius:99px;
  padding:12px 22px 12px 18px; font-size:14.5px; font-weight:600;
  box-shadow:var(--sh-3); transition:opacity .32s, transform .32s;
  max-width:calc(100% - 32px);
}
.mch-induction .toast svg{color:#7fd3b3; flex:0 0 auto}
.mch-induction .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){.mch-induction .hero:before{animation:none}
.mch-induction .btn.go.pulse{animation:none}
.mch-induction .ackbtn.yes .box{animation:none}
.mch-induction .toast{transition:none}

}

/* on a wide screen the toast sits in the margin, not over the words */
@container mch (min-width:900px){.mch-induction .toast{left:auto; right:32px; transform:translateY(16px)}
.mch-induction .toast.show{transform:translateY(0)}

}

/* ══════════════════════════════════════════════════════════════════════════
   MOTION, PART TWO
   Each step deals itself in: the header first, then the words, then the rule,
   then the thing you have to tick. Nothing moves for longer than half a second.
   ══════════════════════════════════════════════════════════════════════════ */
.mch-induction .step.on > *{animation:deal .5s cubic-bezier(.2,.7,.3,1) both}
.mch-induction .step.on > *:nth-child(1){animation-delay:0s}
.mch-induction .step.on > *:nth-child(2){animation-delay:.05s}
.mch-induction .step.on > *:nth-child(3){animation-delay:.1s}
.mch-induction .step.on > *:nth-child(4){animation-delay:.15s}
.mch-induction .step.on > *:nth-child(5){animation-delay:.2s}
.mch-induction .step.on > *:nth-child(n+6){animation-delay:.25s}
@keyframes deal{from{opacity:0; transform:translateY(10px)}
 to{opacity:1; transform:none}
}
.mch-induction .step.on .sec-head:after{animation:ghost .8s .15s cubic-bezier(.2,.7,.3,1) both}
@keyframes ghost{from{opacity:0; transform:translate(18px,10px)}
 to{opacity:.11; transform:none}
}
.mch-induction .step.on .badge{animation:badgePop .55s .08s cubic-bezier(.2,1.4,.35,1) both}
@keyframes badgePop{from{opacity:0; transform:scale(.55) rotate(-8deg)}
 to{opacity:1; transform:none}
}

/* the welcome cards arrive one after another */
.mch-induction .at-welcome .wcard{animation:deal .55s cubic-bezier(.2,.7,.3,1) both}
.mch-induction .at-welcome .wcard:nth-child(1){animation-delay:.14s}
.mch-induction .at-welcome .wcard:nth-child(2){animation-delay:.22s}
.mch-induction .at-welcome .wcard:nth-child(3){animation-delay:.3s}
.mch-induction .hero h1{animation:deal .6s .02s cubic-bezier(.2,.7,.3,1) both}
.mch-induction .hero .sub{animation:deal .6s .1s cubic-bezier(.2,.7,.3,1) both}

/* a pip in the rail marks itself off */
.mch-induction .chap li.done .pip{animation:pipIn .4s cubic-bezier(.2,1.5,.35,1)}
@keyframes pipIn{from{transform:scale(.4)}
 to{transform:scale(1)}
}

/* the progress bar and the percentage move together */
.mch-induction .segs i{transition:background .45s ease, box-shadow .3s ease}
.mch-induction .tb-pct{transition:color .3s ease}
.mch-induction .tb-pct.bump{animation:bump .45s cubic-bezier(.2,1.5,.35,1)}
@keyframes bump{0%{transform:scale(1)}
 40%{transform:scale(1.22)}
 100%{transform:scale(1)}
}

/* small invitations to press things */
.mch-induction .tblcard{transition:box-shadow .25s ease, transform .25s ease}
.mch-induction .tblcard:hover{box-shadow:var(--sh-2)}
.mch-induction .btn svg{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.mch-induction .btn.go:hover svg{transform:translateX(3px)}
.mch-induction .btn.back:hover svg{transform:translateX(-3px)}
.mch-induction .rev .r{transition:background .2s ease}
.mch-induction .rev .r:hover{background:#fbfcfb}
.mch-induction .wcard{transition:transform .25s ease, background .25s ease}
.mch-induction .wcard:hover{transform:translateY(-2px); background:rgba(255,255,255,.13)}

/* the logo, when there is one */
.mch-induction .herologo{display:block; max-width:190px; max-height:64px; object-fit:contain;
  margin:0 0 22px; animation:deal .6s both}
.mch-induction .rail .mark .dot.logo{background:#fff; padding:4px}
.mch-induction .rail .mark .dot.logo img{display:block; width:100%; height:100%; object-fit:contain}
.mch-induction .hero .addr{font-size:13.5px; color:#a9cec0; margin:-18px 0 26px}
@media (prefers-reduced-motion:reduce){.mch-induction .step.on > *, .mch-induction .step.on .sec-head:after, .mch-induction .step.on .badge, .mch-induction .at-welcome .wcard, .mch-induction .hero h1, .mch-induction .hero .sub, .mch-induction .chap li.done .pip, .mch-induction .tb-pct.bump, .mch-induction .herologo{animation:none}
.mch-induction .btn svg, .mch-induction .wcard{transition:none}

}

/* the countersignature is fixed by the home, so staff see it rather than fill it in */
.mch-induction .countersign{display:flex; gap:14px; align-items:flex-start; background:var(--card);
  border:1px solid var(--line); border-left:3px solid var(--brand-2);
  border-radius:var(--r); padding:16px 18px; margin:0 0 8px}
.mch-induction .countersign.plain{border-left-color:var(--ink-3)}
.mch-induction .countersign .cs-ic{width:34px; height:34px; border-radius:10px; flex:0 0 auto;
  display:grid; place-items:center; background:var(--brand-wash); color:var(--brand)}
.mch-induction .countersign.plain .cs-ic{background:var(--line-2); color:var(--ink-3)}
.mch-induction .countersign b{display:block; font-size:15px; margin-bottom:2px}
.mch-induction .countersign span{font-size:14px; color:var(--ink-2); line-height:1.5}


/* ══════════════════════════════════════════════════════════════════════════
   EMBEDDED MODE — overrides so the journey sits inside a WordPress theme
   ══════════════════════════════════════════════════════════════════════════ */

.mch-induction{
  display:block; border-radius:20px; overflow:hidden; box-shadow:var(--sh-2);
  isolation:isolate;
  container-type:inline-size; container-name:mch;
}

/* Browsers without container queries fall back to the single-column layout,
   which is complete and usable — the side rail is the only thing lost. */
@supports not (container-type: inline-size) {
  .mch-induction .rail{display:none}
}
.mch-induction .app{min-height:0}
.mch-induction .rail{height:auto; max-height:none; min-height:100%; position:relative; top:auto}
@container mch (min-width:1040px){
  .mch-induction .rail{position:sticky; top:0; height:calc(100vh - 0px); max-height:900px; overflow-y:auto}
}
.mch-induction .stage{padding-bottom:40px}

/* A short step must not collapse the whole block — the page would jump every time
   someone moved from a long section to a short one. */
.mch-induction .main{min-height:min(820px, 84vh)}
.mch-induction.at-welcome .main{min-height:0}
.mch-induction.at-welcome .stage{padding:0}
.mch-induction .hero .in{padding:56px 24px 52px}
@container mch (min-width:1040px){ .mch-induction .hero .in{padding:72px 40px 66px} }
.mch-induction .topbar{position:sticky; top:0}

/* the action bar sticks to the bottom of the journey, not the browser window */
.mch-induction .nav{
  position:sticky; left:auto; right:auto; bottom:0; z-index:5;
  margin:0; padding:22px 20px 20px;
  background:linear-gradient(rgba(247,245,240,0), var(--sand) 40%);
}
@container mch (min-width:1040px){ .mch-induction .nav{left:auto; padding:22px 40px 20px} }
.mch-induction.at-welcome .nav{left:auto}
.mch-induction .nav .in{padding:0}
@container mch (min-width:1040px){ .mch-induction .nav .in{padding:0} }

/* the theme must not restyle our controls */
.mch-induction button{margin:0; text-transform:none; letter-spacing:normal; line-height:1.2}
.mch-induction input,.mch-induction select{margin:0; max-width:100%; box-shadow:none; height:auto; min-height:0}
.mch-induction input[type=checkbox]{width:auto}
.mch-induction table{margin:0; border:0; font-size:inherit; background:none}
.mch-induction table td,.mch-induction table th{border:0}
.mch-induction ul{list-style:none}
.mch-induction a{text-decoration:none}
.mch-induction p:last-child{margin-bottom:0}

/* [mindset_induction full_width="1"] escapes a theme's content column */
/* Break out of a theme's constrained column. WordPress's layout CSS sets
   `margin-inline: auto !important` on children, so these need !important too, and
   --mch-vw (set in JS) is the viewport WITHOUT the scrollbar — 100vw includes it
   and pushes the whole page sideways. */
.mch-induction.is-fullwidth{
  width:var(--mch-vw, 100vw) !important;
  max-width:var(--mch-vw, 100vw) !important;
  margin-left:calc(50% - var(--mch-vw, 100vw) / 2) !important;
  margin-right:calc(50% - var(--mch-vw, 100vw) / 2) !important;
  border-radius:0;
}

/* honeypot — visible to bots, never to people */
.mch-hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}

/* an admin-only banner shown above the journey */
.mch-notice{
  background:var(--amber-wash); border:1px solid #f2ddbe; border-left:3px solid var(--amber);
  color:#6b4413; padding:12px 16px; font-size:14px; line-height:1.5;
}
.mch-notice code{background:rgba(0,0,0,.05); padding:1px 5px; border-radius:4px}
.mch-induction

/* A staff member who has already finished sees this instead of a blank form.
   `has-completed` sits on the root element itself, so these selectors are written
   by hand rather than generated. */
.mch-induction .mch-alreadydone{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:44px 32px 34px; text-align:center; box-shadow:var(--sh-2); margin:24px;
}
.mch-induction .mch-alreadydone .ad-ic{
  width:72px; height:72px; margin:0 auto 22px; border-radius:50%;
  display:grid; place-items:center; color:#fff; box-shadow:0 10px 30px rgba(26,99,80,.28);
  background:linear-gradient(150deg,var(--brand-2),var(--brand));
}
.mch-induction .mch-alreadydone h2{font-size:clamp(26px,4.4vw,34px); margin:0 0 12px; font-family:var(--serif); font-weight:600}
.mch-induction .mch-alreadydone p{max-width:52ch; margin:0 auto 10px; color:var(--ink-2); font-size:16.5px}
.mch-induction .mch-alreadydone .ad-acts{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:24px 0 16px}
.mch-induction .mch-alreadydone .ad-acts .btn{text-decoration:none}
.mch-induction .mch-alreadydone .ad-note{font-size:13.5px; color:var(--ink-3)}
.mch-induction.has-completed .app,
.mch-induction.has-completed .nav{display:none}

/* ── sign-in ───────────────────────────────────────────────────────────────
   Shown in place of the journey when an account is required. Plugin-only, so
   these selectors are written by hand rather than generated. */
.mch-induction.is-signin{display:grid; place-items:center; padding:48px 20px; background:var(--sand)}
.mch-induction .mch-signin{
  width:100%; max-width:420px; background:var(--card); border:1px solid var(--line);
  border-radius:20px; padding:38px 32px 30px; box-shadow:var(--sh-2); text-align:center;
}
.mch-induction .mch-signin .si-logo{display:block; max-width:170px; max-height:60px;
  object-fit:contain; margin:0 auto 22px}
.mch-induction .mch-signin .si-kicker{font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand); margin:0 0 8px}
.mch-induction .mch-signin h2{font-family:var(--serif); font-weight:600; font-size:27px;
  letter-spacing:-.015em; margin:0 0 10px}
.mch-induction .mch-signin .si-lead{font-size:15px; color:var(--ink-2); line-height:1.6; margin:0 0 24px}
.mch-induction .mch-signin form{text-align:left}
.mch-induction .mch-signin p{margin:0 0 14px}
.mch-induction .mch-signin label{display:block; font-size:13px; font-weight:600;
  color:var(--ink-2); margin:0 0 6px}
.mch-induction .mch-signin input[type=text],
.mch-induction .mch-signin input[type=password]{
  width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--card);
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:11px 13px;
  transition:border-color .18s, box-shadow .18s;
}
.mch-induction .mch-signin input[type=text]:focus,
.mch-induction .mch-signin input[type=password]:focus{
  outline:0; border-color:var(--brand); box-shadow:0 0 0 4px rgba(26,99,80,.12);
}
.mch-induction .mch-signin .login-remember label{display:flex; gap:9px; align-items:center;
  font-weight:400; font-size:14px; color:var(--ink-2)}
.mch-induction .mch-signin .login-remember input{width:auto; margin:0}
.mch-induction .mch-signin .login-submit input[type=submit]{
  width:100%; font:inherit; font-weight:600; font-size:15.5px; border:0; cursor:pointer;
  border-radius:12px; padding:14px 22px; color:#fff; background:var(--brand);
  box-shadow:0 6px 18px rgba(26,99,80,.28); transition:background .2s;
}
.mch-induction .mch-signin .login-submit input[type=submit]:hover{background:#155645}
.mch-induction .mch-signin .mch-signin-error{padding:10px 12px; border:1px solid #f3cfc9; border-radius:var(--r-sm); background:var(--rose-wash); color:#7a2a21; font-size:13.5px; font-weight:600; line-height:1.45}
.mch-induction .mch-signin .si-help{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; text-align:center; margin:18px 0 0; font-size:14px; color:var(--ink-2)}
.mch-induction .mch-signin .si-help .si-reset{display:inline-flex; align-items:center; min-height:38px; padding:7px 12px; border:1px solid var(--brand); border-radius:9px; color:var(--brand); font-weight:700; text-decoration:none}
.mch-induction .mch-signin .si-help .si-reset:hover,.mch-induction .mch-signin .si-help .si-reset:focus-visible{background:var(--brand-wash); outline:none}
.mch-induction .mch-signin .si-note{text-align:center; font-size:13px; color:var(--ink-3);
  border-top:1px solid var(--line-2); margin:18px 0 0; padding-top:16px; line-height:1.5}

/* who is filling this in, and a way out on a shared computer */
.mch-induction .rail .foot .whoami{margin:0 0 10px; color:#a8cabb; line-height:1.5}
.mch-induction .rail .foot .whoami b{color:#fff; font-weight:600}
.mch-induction .rail .foot .whoami a{display:inline-block; color:#7fd3b3; text-decoration:underline;
  text-underline-offset:2px; margin-left:6px}

.mch-induction .hero .startline b{color:#dcefe7; font-weight:600}
.mch-induction .hero .startline .signout{color:#9ad8bd; text-decoration:underline;
  text-underline-offset:2px; margin-left:4px}

/* ══════════════════════════════════════════════════════════════════════════
   MOTION, PART THREE
   Going back slides the other way, anything below the fold rises in as it is
   reached, and a flow of steps lights up one link at a time.
   ══════════════════════════════════════════════════════════════════════════ */
.mch-induction.going-back .step.on > *{animation-name:dealBack}
@keyframes dealBack{from{opacity:0; transform:translateX(-14px)}
 to{opacity:1; transform:none}
}

.mch-induction .rv{opacity:0; transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--rv-d,0s)}
.mch-induction .rv.in{opacity:1; transform:none}

/* a flow: numbered chips joined by arrows */
.mch-induction .flow{list-style:none; margin:6px 0 22px; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:10px 0}
.mch-induction .flow li{display:flex; align-items:center; margin:0; padding:0}
.mch-induction .flow .chip{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:14.5px; font-weight:600; color:var(--acc,var(--brand)); background:var(--card);
  border:1.5px solid var(--acc-wash,var(--brand-wash)); border-radius:99px; padding:6px 14px 6px 6px;
  box-shadow:var(--sh-1); transition:background .3s, border-color .3s}
.mch-induction .flow .fn{display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--acc,var(--brand)); color:#fff; font-size:12px; font-weight:700}
.mch-induction .flow li + li:before{content:""; flex:0 0 auto; width:26px; height:12px; margin:0 3px;
  background:var(--acc-2,var(--brand-2)); transform-origin:left center;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M1 6h20M17 1.5 22.5 6 17 10.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M1 6h20M17 1.5 22.5 6 17 10.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

.mch-induction .flow.rv{opacity:1; transform:none}
.mch-induction .flow.rv li{opacity:0}
.mch-induction .flow.rv.in li{animation:chipIn .45s cubic-bezier(.2,1.4,.35,1) both; animation-delay:calc(var(--k) * .14s)}
.mch-induction .flow.rv.in li + li:before{animation:linkDraw .3s ease-out both; animation-delay:calc(var(--k) * .14s)}
@keyframes chipIn{from{opacity:0; transform:translateY(8px) scale(.92)}
 to{opacity:1; transform:none}
}
@keyframes linkDraw{from{transform:scaleX(0)}
 to{transform:scaleX(1)}
}
/* after arriving, a light travels along the chain, slowly, so the order is felt */
.mch-induction .flow.in .chip{animation:chipGlow 7s ease-in-out infinite; animation-delay:calc(1.4s + var(--k) * .5s)}
@keyframes chipGlow{0%,12%,100%{background:var(--card)}
 5%{background:var(--acc-wash,var(--brand-wash)); border-color:var(--acc-2,var(--brand-2))}
}

/* the one rule to remember catches the light once */
.mch-induction .keyrule{position:relative; overflow:hidden}
.mch-induction .step.on .keyrule:after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  transform:skewX(-18deg); animation:sheen 1.4s .7s ease-in-out both; pointer-events:none}
@keyframes sheen{from{left:-60%}
 to{left:130%}
}

/* the current segment of the progress bar breathes */
.mch-induction .segs i.on{background-image:linear-gradient(90deg,var(--brand),var(--brand-2),var(--brand));
  background-size:200% 100%; animation:segFlow 1.8s linear infinite}
@keyframes segFlow{to{background-position:-200% 0}
}

/* ticking a box sends a ring outwards */
.mch-induction .ackbtn .box{position:relative}
.mch-induction .ackbtn.yes .box:after{content:""; position:absolute; inset:-2px; border-radius:9px;
  border:2px solid var(--brand-2); animation:ring .6s ease-out both; pointer-events:none}
@keyframes ring{from{opacity:.8; transform:scale(1)}
 to{opacity:0; transform:scale(2.1)}
}

/* sign-off lines stamp themselves, and each group fills a thin bar */
.mch-induction .row.filled .topic .tick{animation:stamp .34s cubic-bezier(.2,1.5,.35,1)}
.mch-induction .row{transition:background .35s ease}
.mch-induction .row.filled{background:linear-gradient(90deg, rgba(28,122,85,.045), transparent 60%)}
.mch-induction .tblcard > header{position:relative}
.mch-induction .gbar{position:absolute; left:0; right:0; bottom:-1px; height:3px; background:transparent}
.mch-induction .gbar b{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brand-2),var(--ok));
  border-radius:0 3px 3px 0; transition:width .6s cubic-bezier(.2,.7,.3,1)}

/* the welcome screen: a second, slower glow and a sheen on the start button */
.mch-induction .hero:after{animation:drift2 26s ease-in-out infinite alternate}
@keyframes drift2{to{transform:translate3d(-70px,40px,0) scale(1.2)}
}
.mch-induction .hero .btn.light{position:relative; overflow:hidden}
.mch-induction .hero .btn.light:after{content:""; position:absolute; top:0; bottom:0; left:-80%; width:50%;
  background:linear-gradient(100deg, transparent, rgba(26,99,80,.12), transparent);
  transform:skewX(-18deg); animation:sheen 3.2s 1.2s ease-in-out infinite}
.mch-induction .hero .kicker{animation:deal .6s both}
.mch-induction .hero .note, .mch-induction .hero .btn.light, .mch-induction .hero .startline{animation:deal .6s .38s cubic-bezier(.2,.7,.3,1) both}

/* the finish ring draws a halo */
.mch-induction .finish .ring{position:relative}
.mch-induction .finish .ring:after{content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--brand-2); animation:ring 1.2s .35s ease-out 2 both}

@media (prefers-reduced-motion:reduce){
.mch-induction.going-back .step.on > *, .mch-induction .flow.rv.in li, .mch-induction .flow.rv.in li + li:before,
.mch-induction .flow.in .chip, .mch-induction .step.on .keyrule:after, .mch-induction .segs i.on,
.mch-induction .ackbtn.yes .box:after, .mch-induction .row.filled .topic .tick, .mch-induction .hero:after,
.mch-induction .hero .btn.light:after, .mch-induction .hero .kicker, .mch-induction .hero .note,
.mch-induction .hero .btn.light, .mch-induction .hero .startline, .mch-induction .finish .ring:after{animation:none}
.mch-induction .rv, .mch-induction .flow.rv li{opacity:1; transform:none; transition:none}
.mch-induction .gbar b{transition:none}
}
@media print{.mch-induction .rv, .mch-induction .flow.rv li{opacity:1 !important; transform:none !important}
}

/* the rail numbers each section inside its circle; a finished one shows a tick instead */
.mch-induction .chap .pip[data-n]{width:22px; height:22px; margin-top:-1px; font-size:10.5px; font-weight:700;
  color:#c7ddd4; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.mch-induction .chap .pip[data-n]:before{content:attr(data-n)}
.mch-induction .chap li.on .pip[data-n]{color:#fff}
.mch-induction .chap li.done .pip[data-n]:before{content:none}
.mch-induction .chap button[disabled] .pip[data-n]{color:rgba(255,255,255,.55)}

/* ---------- Home documents (Statement of Purpose, Business Continuity Plan) ---------- */
.mch-induction .doccard{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1); padding:18px 20px; margin:0 0 20px}
.mch-induction .doccard.is-open{box-shadow:var(--sh-2); border-color:var(--brand-2)}
.mch-induction .doccard .dc-head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.mch-induction .doccard .dc-ic{flex:none; width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:var(--brand-wash); color:var(--brand)}
.mch-induction .doccard .dc-txt{flex:1; min-width:0}
.mch-induction .doccard .dc-txt b{display:block; font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink); line-height:1.25}
.mch-induction .doccard .dc-txt small{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px}
.mch-induction .doccard .dc-flag{flex:none; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rose); background:var(--rose-wash); border-radius:999px; padding:4px 10px}
.mch-induction .doccard p{margin:0 0 12px; color:var(--ink-2); font-size:15.5px; line-height:1.6}
.mch-induction .doccard .dc-warn{font-size:13.5px; color:var(--rose)}
.mch-induction .doccard .dc-seen{flex:none; display:none; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  color:var(--ok); background:var(--brand-wash); border-radius:99px; padding:4px 10px 4px 8px}
.mch-induction .doccard.is-seen .dc-seen{display:inline-flex}
.mch-induction .doccard.is-seen .dc-ic{background:var(--ok); color:#fff}
.mch-induction .doccard .dc-acts{display:flex; flex-wrap:wrap; gap:10px}
.mch-induction .doccard .dc-acts .btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:11px 18px; font-size:14.5px}
.mch-induction .doccard .dc-warn.flash{animation:mchDocFlash 1.2s ease 1}
@keyframes mchDocFlash{0%,100%{background:transparent}30%{background:var(--rose-wash)}}
.mch-induction .doccard .dc-frame{margin-top:16px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#5b6763; height:78vh; min-height:480px; max-height:1000px; overflow-y:auto; overscroll-behavior:contain;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.mch-induction .doccard .dc-frame:fullscreen{height:100vh; max-height:none; border:0; border-radius:0}
.mch-induction .doccard .dc-frame:-webkit-full-screen{height:100vh; max-height:none; border:0; border-radius:0}
.mch-induction .doccard .dc-pages{display:flex; flex-direction:column; align-items:center; gap:14px; padding:14px}
.mch-induction .doccard .dc-page{position:relative; width:100%; max-width:900px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.25)}
.mch-induction .doccard .dc-page canvas{display:block; width:100%; height:100%; pointer-events:none}
.mch-induction .doccard .dc-pgmsg{position:absolute; inset:0; display:grid; place-items:center; padding:20px; text-align:center;
  font-size:13.5px; color:var(--ink-3)}
.mch-induction .doccard .dc-page[data-state="done"] .dc-pgmsg{display:none}
.mch-induction .doccard .dc-page.is-failed .dc-pgmsg{color:var(--rose)}
.mch-induction .doccard .dc-pgno{position:absolute; right:8px; bottom:-2px; transform:translateY(100%); font-size:11.5px; color:#e8eeeb}
@media print{
  .mch-induction .doccard .dc-frame{display:none !important}
  .mch-induction .doccard:after{content:"This document cannot be printed from the induction."; display:block; margin-top:10px; font-weight:600}
}
@container mch (max-width:560px){
  .mch-induction .doccard{padding:16px}
  .mch-induction .doccard .dc-head{flex-wrap:wrap}
  .mch-induction .doccard .dc-acts .btn{flex:1 1 100%; justify-content:center}
  .mch-induction .doccard .dc-frame{height:72vh; min-height:420px}
  .mch-induction .doccard .dc-pages{padding:8px; gap:12px}
}