/* ==========================================================================
   ClientOS: the free check that runs on every AI tool page.
   Loaded only by /clients/ai-tools/<slug>.php. Extends ai-tools.css and
   portal.css and overrides neither. Every colour is a portal token, so this
   cannot drift from the rest of the product.

   No purple in any hue, tint, shade, gradient, shadow, border or state.
   Mobile first. Every motion rule is disabled under prefers-reduced-motion.
   ========================================================================== */

/* One local token, and the measurement behind it.
   ---------------------------------------------------------------------------
   The portal's --ok is #1a7f5a. On --ok-bg (#e7f6ef) that measures 4.45:1,
   which carries large text but not the 11px and 12.5px bold labels used below,
   where WCAG AA asks for 4.5:1. #146b4b on the same background measures 5.82:1
   and reads as the same green.

   --ok itself is left alone, because it is used across the whole portal and
   changing it here would be changing it everywhere. This token is for small
   text on a success background, and nothing else.

   Both figures were computed from the relative luminance formula, not
   estimated. */
.mt,.mtgate{--mt-ok-text:#146b4b}

/* --------------------------------------------------------------- Shell --- */
.mt{max-width:880px;margin:0 auto}
.mt p,.mt li,.mt h2,.mt h3,.mt h4,.mt dd,.mt dt{overflow-wrap:anywhere}

/* One panel at a time. Which one is decided on the server for a visitor with no
   JavaScript, and by the script after that, so there is never a moment where
   two states are both on screen. */
.mt__panel{display:none}
.mt__panel.is-on{display:block}

/* ---------------------------------------------------------------- Form --- */
.mtform{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 20px;box-shadow:var(--shadow-lg)}
.mtform__head{margin:0 0 18px}
.mtform__kicker{display:inline-flex;align-items:center;gap:7px;background:var(--teal-050);
  color:var(--teal-800);border:1px solid var(--teal-100);border-radius:20px;padding:5px 13px;
  font-size:14.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin:0 0 12px}
.mtform__kicker i{font-size:14px;color:var(--teal-600)}
.mtform__head h2{font-size:clamp(20px,2.7vw,25px);margin:0 0 8px;line-height:1.25}
.mtform__head p{font-size:16px;line-height:1.65;margin:0;color:var(--muted-2)}

.mtform__fields{display:grid;gap:0}
.mtfield{margin:0 0 17px}
.mtfield label{display:block;font-size:15.5px;font-weight:700;color:var(--teal-900);margin:0 0 6px}
.mtfield__req{color:var(--muted);font-weight:600;font-size:15px;margin-left:5px}
.mtfield .hint{font-size:15px;color:var(--muted-2);line-height:1.55;margin:6px 0 0}
.mtfield textarea.input{min-height:96px;resize:vertical;line-height:1.6}

/* Reusing .input, .input--bad and .fielderr from ai-tools.css on purpose, so a
   field on this form behaves identically to a field on the signup form. */

.mtform__go{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:22px 0 0}
.mtform__note{font-size:15px;color:var(--muted);line-height:1.6;margin:14px 0 0;
  display:flex;gap:7px;align-items:flex-start}
.mtform__note i{color:var(--teal-600);margin-top:2px;flex:none}

/* A form level problem, such as being asked to wait. Not a field error. */
.mtform__err{background:var(--red-bg);border:1px solid var(--red-line);color:var(--red);
  border-radius:var(--radius-sm);padding:13px 15px;font-size:15.5px;font-weight:600;
  line-height:1.6;margin:0 0 18px;display:flex;gap:10px;align-items:flex-start}
.mtform__err i{margin-top:2px;flex:none}
/* The server side signup error lists each field it refers to as a link, so
   the summary stacks above the list rather than sitting beside it. */
.mtform__err:has(.mtform__errlist){flex-direction:column}
.mtform__errlist{margin:0;padding-left:18px;list-style:disc;display:grid;gap:4px}
.mtform__errlist a{color:inherit;text-decoration:underline}

/* ------------------------------------------------------------- Console --- */
/* WHAT THIS SCREEN IS FOR
   -------------------------------------------------------------------------
   The check, section by section, in the same pattern as the AI page audit. A
   numbered stepper says what is ready, what is being analyzed, and what is up
   next. Each section's content appears the moment that work is done, so the
   visitor reads what we found on their website while public sources are
   searched, and the full result opens by itself at the end.

   It replaced a percentage ring, a running clock, a stage list that said
   "(waiting)" three times, and a rotating line of context. A clock measures
   only the wait. The sections show the work, and the work is about the
   visitor's own business, which is the reason to stay.

   WHAT IT COSTS
   -------------------------------------------------------------------------
   Every animation moves only transform and opacity, which the compositor
   handles without touching layout or paint. The skeleton shimmer is a
   translated pseudo element, not an animated background position. Nothing
   animates once its section is ready, and every animation is switched off
   under prefers-reduced-motion. Borders use --line, never --line-2, which is
   a dark grey in the portal palette. */

.mtrun{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 16px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}

/* A slow teal wash across the top edge, so the panel itself reads as live.
   Pure transform, and it is removed entirely once the run finishes. */
.mtrun::before{content:"";position:absolute;inset:0 auto auto 0;height:3px;width:40%;
  background:linear-gradient(90deg,transparent,var(--teal-500,#0a9a8f),transparent);
  transform:translateX(-100%);animation:mtsweep 2.4s var(--ease) infinite;will-change:transform}
.mtrun.is-settled::before{display:none}

@keyframes mtsweep{
  0%   {transform:translateX(-100%)}
  100% {transform:translateX(350%)}
}
@keyframes mtblink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@keyframes mtshimmer{
  0%   {transform:translateX(-100%)}
  100% {transform:translateX(320%)}
}
@keyframes mtpop{
  0%   {transform:scale(.55)}
  62%  {transform:scale(1.2)}
  100% {transform:scale(1)}
}
@keyframes mtfadein{
  0%   {opacity:0;transform:translateY(6px)}
  100% {opacity:1;transform:none}
}

/* ---- Head: what is running, for whom ---- */
.mtrun__head{margin:0 0 16px}
.mtrun__kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;
  font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-800);background:var(--teal-050);border:1px solid var(--teal-100);
  border-radius:20px;padding:5px 12px}
.mtrun__live{width:8px;height:8px;border-radius:50%;background:var(--teal-600);flex:none;
  animation:mtblink 1.6s var(--ease) infinite}
.mtrun.is-settled .mtrun__live{animation:none;background:var(--mt-ok-text)}
.mtrun__h{font-size:clamp(20px,1.05rem + .9vw,24px);line-height:1.3;color:var(--teal-900);margin:0 0 6px}
.mtrun__for{color:var(--teal-700)}
.mtrun__sub{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0;max-width:64ch}

/* ---- The stepper ---- */
/* Numbers on a line, the way a buyer already reads a checkout. Each step is a
   link to its section, which matters on a phone, where the sections stack. */
.mtstepper{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);gap:6px}
.mtstepper[hidden]{display:none}
.mtstepper__i{position:relative;min-width:0}
.mtstepper__i:not(:last-child)::after{content:"";position:absolute;top:27px;left:calc(50% + 23px);
  width:calc(100% - 40px);height:2px;border-radius:2px;background:var(--line)}
.mtstepper__i.is-ready:not(:last-child)::after{background:var(--teal-600)}
.mtstepper__a{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  padding:10px 4px;border-radius:11px;color:inherit;text-decoration:none;min-height:44px}
.mtstepper__a:hover{background:var(--teal-050);text-decoration:none}
.mtstepper__a:focus-visible{outline:3px solid var(--teal-600);outline-offset:2px}
.mtstepper__n{position:relative;z-index:1;flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;
  background:var(--card);border:2px solid var(--line);color:var(--ink-2);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.mtstepper__tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.mtstepper__t{font-size:15px;font-weight:700;line-height:1.3;color:var(--teal-900)}
.mtstepper__s{font-size:15px;font-weight:700;line-height:1.3;color:var(--ink-2)}

.mtstepper__i.is-running .mtstepper__n{border-color:var(--teal-600);color:var(--teal-800);
  box-shadow:0 0 0 4px var(--teal-050)}
.mtstepper__i.is-running .mtstepper__n::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--teal-500,#0a9a8f);opacity:0;animation:mtripple 1.8s var(--ease) infinite}
.mtstepper__i.is-running .mtstepper__s{color:var(--teal-700)}
.mtstepper__i.is-ready .mtstepper__n{background:var(--teal-600);border-color:var(--teal-600);color:#fff}
.mtstepper__i.is-ready .mtstepper__s{color:var(--mt-ok-text)}
.mtstepper__i.is-failed .mtstepper__n{background:var(--amber-bg);border-color:var(--amber);color:var(--amber-ink)}
.mtstepper__i.is-failed .mtstepper__s{color:var(--amber-ink)}

@keyframes mtripple{
  0%   {opacity:.7;transform:scale(.85)}
  100% {opacity:0;transform:scale(1.25)}
}

/* ---- The sections ---- */
.mtsecs{display:grid;gap:12px}
.mtsec{border:1px solid var(--line);border-radius:13px;background:var(--card);padding:16px;
  scroll-margin-top:96px;transition:border-color .3s var(--ease),background .3s var(--ease)}
.mtsec.is-running{border-color:var(--teal-600)}
.mtsec.is-next,.mtsec.is-waiting{background:var(--bg)}
.mtsec.is-failed{border-color:var(--amber-line);background:var(--amber-bg)}

/* The chip sits under the title on a phone, so the title keeps the width, and
   beside it from 560px. */
.mtsec__head{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:12px;align-items:start}
.mtsec__ic{width:38px;height:38px;border-radius:10px;background:var(--teal-050);color:var(--teal-700);
  display:flex;align-items:center;justify-content:center;font-size:15px}
.mtsec.is-ready .mtsec__ic{background:var(--teal-600);color:#fff}
.mtsec.is-failed .mtsec__ic{background:var(--card);color:var(--amber-ink)}
.mtsec__titles{min-width:0}
.mtsec__h{font-size:18px;line-height:1.35;margin:0 0 3px;color:var(--teal-900)}
.mtsec__n{color:var(--teal-700)}
.mtsec__about{font-size:15.5px;line-height:1.5;color:var(--ink-2);margin:0}
.mtsec__chip{grid-column:2;justify-self:start;margin-top:8px;font-size:14.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;border-radius:20px;padding:4px 10px;white-space:nowrap;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2)}
.mtsec__chip--ready{background:var(--ok-bg);border-color:var(--ok-line);color:var(--mt-ok-text)}
.mtsec__chip--running{background:var(--teal-050);border-color:var(--teal-100);color:var(--teal-800)}
.mtsec__chip--next{color:var(--teal-800)}
.mtsec__chip--failed{background:var(--card);border-color:var(--amber-line);color:var(--amber-ink)}

.mtsec__body{margin:14px 0 0}
.mtsec__sum{font-size:16px;font-weight:700;line-height:1.5;color:var(--teal-900);margin:0 0 10px}
.mtsec__sum--warn{color:var(--amber-ink);display:flex;gap:8px;align-items:flex-start}
.mtsec__sum--warn i{margin-top:3px;flex:none}
.mtsec__pts{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.mtsec__pts li{display:flex;gap:10px;font-size:16px;line-height:1.6;color:var(--ink)}
.mtsec__pts i{flex:none;margin-top:5px;font-size:14px;color:var(--mt-ok-text)}
.mtsec__chips{margin:14px 0 0}
.mtsec__chipsl{font-size:14.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-800);margin:0 0 7px}
.mtsec__chips ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mtsec__chips li{font-size:15px;font-weight:600;line-height:1.4;color:var(--teal-900);
  background:var(--teal-050);border:1px solid var(--teal-100);border-radius:20px;padding:4px 11px;
  overflow-wrap:anywhere}
.mtsec__chips li.mtsec__more{background:var(--card);border-color:var(--line);color:var(--ink-2)}
.mtsec__note{font-size:15px;line-height:1.55;color:var(--ink-2);margin:12px 0 0}
.mtsec__note i{color:var(--teal-600)}

/* Being analyzed: one plain sentence, a pulse, and three placeholder lines
   the content will replace. */
.mtsec__doing{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;
  line-height:1.5;color:var(--teal-800);margin:0 0 12px}
.mtsec__pulse{width:10px;height:10px;border-radius:50%;background:var(--teal-600);flex:none;
  animation:mtblink 1.4s var(--ease) infinite}
.mtskel{display:grid;gap:9px}
.mtskel span{position:relative;display:block;height:12px;border-radius:6px;background:var(--teal-050);overflow:hidden}
.mtskel span:nth-child(1){width:92%}
.mtskel span:nth-child(2){width:78%}
.mtskel span:nth-child(3){width:58%}
.mtskel span::after{content:"";position:absolute;inset:0;width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  transform:translateX(-100%);animation:mtshimmer 1.5s var(--ease) infinite;will-change:transform}
.mtsec__weigh{font-size:14.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--teal-800);margin:16px 0 8px}
.mtsec__checks{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.mtsec__checks li{display:flex;gap:9px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.mtsec__checks i{flex:none;margin-top:3px;color:var(--teal-600)}
.mtsec__wait{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin:0}

/* Ready: the score lands here first, then the full result opens. */
/* The circle is sized for "out of 100" at the 14px floor on one line, and on
   a narrow screen the teaser stacks, so the headline keeps a readable measure
   instead of breaking two words to a line beside the circle. */
.mtsec__teaser{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:center;margin:2px 0 0;padding:16px;border-radius:12px;
  background:var(--teal-050);border:1px solid var(--teal-100)}
.mtsec__score{flex:none;width:100px;height:100px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:var(--card);border:4px solid var(--teal-600)}
.mtsec__score b{font-size:30px;line-height:1;color:var(--teal-900);font-variant-numeric:tabular-nums}
.mtsec__score small{font-size:14px;font-weight:700;line-height:1.2;color:var(--ink-2);margin-top:4px;white-space:nowrap}
.mtsec__score--strong{border-color:var(--ok)}
.mtsec__score--warn{border-color:var(--amber)}
.mtsec__score--bad{border-color:#b3341f}
.mtsec__tz{flex:1 1 220px;min-width:0}
.mtsec__metric{font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--teal-800);margin:0 0 4px}
.mtsec__hl{font-size:17px;font-weight:700;line-height:1.45;color:var(--teal-900);margin:0}
.mtsec__opening{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  margin:12px 0 0;font-size:16px;font-weight:600;color:var(--teal-800)}
.mtsec__opening .btn-primary{min-height:44px}

/* The moment a section is ready: its content fades up once and its icon
   lands. Nothing keeps moving afterwards. */
.mtsec.is-justready .mtsec__body{animation:mtfadein .45s var(--ease)}
.mtsec.is-justready .mtsec__ic{animation:mtpop .45s var(--ease)}

@media (min-width:560px){
  .mtsec__head{grid-template-columns:38px minmax(0,1fr) auto}
  .mtsec__chip{grid-column:3;margin-top:2px}
  .mtsec__body{margin-left:50px}
  .mtstepper__t{font-size:16px}
}
@media (min-width:860px){
  .mtrun{padding:28px}
  .mtsec{padding:18px 20px}
}

/* ---- What the result is based on ---- */
/* The evidence sections, kept on the finished result, so nothing somebody was
   reading while the check ran disappears when the result opens. */
.mtread{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 16px}
.mtread__h{font-size:18.5px;line-height:1.35;color:var(--teal-900);margin:0 0 4px}
.mtread__sub{font-size:16px;line-height:1.55;color:var(--ink-2);margin:0 0 14px}
.mtread__grid{display:grid;gap:12px}
.mtread__card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.mtread__k{font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-800);margin:0 0 8px}
.mtread__k i{margin-right:5px;color:var(--teal-600)}
.mtread__sum{font-size:16px;font-weight:700;line-height:1.5;color:var(--teal-900);margin:0 0 8px}
.mtread__sum--warn{color:var(--amber-ink)}
.mtread__pts{margin:0;padding-left:18px;list-style:disc outside;display:grid;gap:6px}
.mtread__pts li::marker{color:var(--teal-600)}
.mtread__pts li{display:list-item;font-size:16px;line-height:1.6;color:var(--ink)}
.mtread__chips{font-size:15px;line-height:1.55;color:var(--ink-2);margin:10px 0 0;overflow-wrap:anywhere}
.mtread__chips b{color:var(--teal-900)}
@media (min-width:760px){
  .mtread{padding:24px}
  .mtread__grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}

/* The plain spinner, kept for the no-script stage list. */
.mtspin{display:inline-block;width:11px;height:11px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:mtspin .7s linear infinite}
@keyframes mtspin{to{transform:rotate(360deg)}}



/* -------------------------------------------------------------- Result --- */
.mtres{display:grid;gap:18px}

/* The answer, first, above everything else. */
.mtscore{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:24px 20px;display:grid;gap:18px}
.mtscore__top{display:grid;gap:16px;align-items:start}
.mtscore__dial{display:flex;align-items:center;gap:15px}
.mtscore__num{font-size:44px;font-weight:800;line-height:1;color:var(--teal-900);
  font-variant-numeric:tabular-nums}
.mtscore__of{font-size:15px;color:var(--muted);font-weight:600;display:block;margin:5px 0 0}
.mtscore__meta{min-width:0}
.mtscore__metric{font-size:14.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-700);margin:0 0 5px}
.mtscore__label{display:inline-flex;align-items:center;gap:7px;border-radius:20px;
  padding:4px 13px;font-size:15px;font-weight:800}
.mtscore__label--strong{background:var(--ok-bg);color:var(--mt-ok-text);border:1px solid var(--ok-line)}
.mtscore__label--ok{background:var(--teal-050);color:var(--teal-800);border:1px solid var(--teal-100)}
.mtscore__label--warn{background:var(--amber-bg);color:var(--amber-ink);border:1px solid var(--amber-line)}
.mtscore__label--bad{background:var(--red-bg);color:var(--red);border:1px solid var(--red-line)}

.mtscore__headline{font-size:clamp(18.5px,2.4vw,21.5px);line-height:1.35;color:var(--teal-900);
  font-weight:700;margin:0}
.mtscore__answer{font-size:16.5px;line-height:1.7;color:var(--ink-2);margin:0}

/* How the score was reached. Open by choice, because a number nobody can
   check is a number nobody trusts. */
.mtwhy{border-top:1px solid var(--line-2);padding:14px 0 0;margin:2px 0 0}
.mtwhy>summary{cursor:pointer;list-style:none;font-size:15px;font-weight:700;
  color:var(--teal-700);display:flex;align-items:center;gap:8px;min-height:32px}
.mtwhy>summary::-webkit-details-marker{display:none}
.mtwhy>summary .chev{font-size:14px;transition:transform .2s var(--ease)}
.mtwhy[open]>summary .chev{transform:rotate(180deg)}
.mtwhy__body{font-size:15px;line-height:1.7;color:var(--muted-2);padding:11px 0 0}
.mtwhy__body p{margin:0 0 9px}
.mtwhy__body p:last-child{margin-bottom:0}

/* The shape of the problem, free for everybody. */
.mttally{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;list-style:none;margin:0;padding:0}
.mttally li{background:var(--bg);border:1px solid var(--line-2);border-radius:11px;
  padding:12px 13px;text-align:center}
.mttally b{display:block;font-size:22px;font-weight:800;line-height:1;color:var(--teal-900);
  font-variant-numeric:tabular-nums}
.mttally span{display:block;font-size:16px;color:var(--muted);margin:6px 0 0;
  font-weight:600;letter-spacing:.02em}
.mttally li.is-critical b{color:var(--red)}
.mttally li.is-high b{color:var(--amber-ink)}

/* ------------------------------------------------------------ Findings --- */
.mtfind{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:18px 17px;display:grid;gap:11px}
.mtfind__top{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mtfind__sev{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:3px 11px;
  font-size:14px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.mtfind__sev--critical{background:var(--red-bg);color:var(--red);border:1px solid var(--red-line)}
.mtfind__sev--high{background:var(--amber-bg);color:var(--amber-ink);border:1px solid var(--amber-line)}
.mtfind__sev--medium{background:var(--teal-050);color:var(--teal-800);border:1px solid var(--teal-100)}
.mtfind__sev--low{background:var(--bg);color:var(--muted-2);border:1px solid var(--line)}
.mtfind__tag{font-size:16px;color:var(--muted);font-weight:600}
.mtfind__tag i{margin-right:4px;color:var(--teal-600)}
.mtfind__h{font-size:17.5px;font-weight:700;line-height:1.35;color:var(--teal-900);margin:0}
.mtfind__p{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0}
.mtfind__why{font-size:15.5px;line-height:1.65;color:var(--muted-2);margin:0;
  border-left:3px solid var(--teal-100);padding-left:13px}
.mtfind__ev{font-size:15px;line-height:1.6;color:var(--muted-2);background:var(--bg);
  border:1px solid var(--line-2);border-radius:9px;padding:11px 13px;margin:0}
.mtfind__ev b{display:block;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-700);margin:0 0 5px}
.mtfind__src{font-size:15px;margin:0}
.mtfind__src a{color:var(--teal-700);text-decoration:underline;overflow-wrap:anywhere}

/* The fix. This is the part an account buys, so when it is present it reads
   as the answer, and when it is not, its absence is explained rather than
   silently left out. */
.mtfix{background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:10px;
  padding:13px 15px;margin:0}
.mtfix b{display:block;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mt-ok-text);margin:0 0 6px}
.mtfix p{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin:0}

.mtlock{background:var(--bg);border:1px dashed var(--line);border-radius:10px;
  padding:13px 15px;margin:0;display:flex;gap:10px;align-items:flex-start;
  font-size:15px;line-height:1.6;color:var(--muted-2)}
.mtlock i{color:var(--teal-600);margin-top:2px;flex:none}

/* ------------------------------------------------------------- The gate --- */
/* What is held back, said plainly and counted honestly, because a vague
   promise converts worse than a specific one and is less true. */
.mtgate{background:linear-gradient(160deg,var(--teal-900),var(--teal-800) 62%,var(--teal-700));
  color:#eafffb;border-radius:var(--radius);padding:26px 20px;box-shadow:var(--shadow-lg)}
.mtgate h3{font-size:clamp(19px,2.5vw,22px);color:#fff;margin:0 0 10px;line-height:1.3}
.mtgate__lede{font-size:16px;line-height:1.7;color:#cdeae4;margin:0 0 18px}
.mtgate__list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
.mtgate__list li{display:flex;gap:11px;align-items:flex-start;font-size:16px;line-height:1.6;
  color:#eafffb}
.mtgate__list i{color:#7fd8c8;margin-top:4px;flex:none;font-size:14px}
.mtgate__list b{color:#fff}
.mtgate__foot{font-size:15px;color:#8fc4bd;margin:16px 0 0;line-height:1.7;text-align:center}
.mtgate__foot i{margin-right:5px}
.mtgate__foot a{color:#bfe6e0;text-decoration:underline}

/* The signup form inside the gate. White panel on the deep band, because a
   form on a dark background is harder to read and converts worse. */
.mtgate__form{background:var(--card);border-radius:12px;padding:20px 18px}
.mtgate__form .mtfield label{color:var(--teal-900)}
.mtgate__formh{font-size:17px;font-weight:700;color:var(--teal-900);margin:0 0 5px}
.mtgate__formp{font-size:15px;color:var(--muted-2);line-height:1.6;margin:0 0 18px}

/* --------------------------------------------------------- Action plan --- */
.mtplan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 19px;box-shadow:var(--shadow)}
.mtplan__h{font-size:18.5px;color:var(--teal-900);margin:0 0 6px}
.mtplan__sub{font-size:15.5px;color:var(--muted-2);line-height:1.6;margin:0 0 18px}
.mtplan__list{list-style:none;margin:0;padding:0;display:grid;gap:11px;counter-reset:mtp}
.mtplan__list li{display:flex;gap:13px;align-items:flex-start;background:var(--bg);
  border:1px solid var(--line-2);border-radius:11px;padding:14px 15px}
.mtplan__n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--teal-600);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}
.mtplan__tx{min-width:0}
.mtplan__t{font-size:16px;font-weight:700;color:var(--teal-900);line-height:1.4;margin:0 0 6px}
.mtplan__d{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin:0}
.mtplan__m{font-size:16px;color:var(--muted);margin:8px 0 0;font-weight:600}
.mtplan__m i{color:var(--teal-600);margin-right:4px}

/* ------------------------------------------------------ Strengths, etc. --- */
.mtside{display:grid;gap:14px}
.mtbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 17px}
.mtbox h4{font-size:16px;color:var(--teal-900);margin:0 0 10px;display:flex;gap:8px;align-items:center}
.mtbox h4 i{color:var(--teal-600);font-size:14px}
.mtbox ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mtbox li{font-size:15.5px;line-height:1.6;color:var(--muted-2);display:flex;gap:9px;align-items:flex-start}
.mtbox li i{color:var(--teal-600);margin-top:4px;flex:none;font-size:14px}
.mtbox--honest li i{color:var(--amber)}
.mtbox__src{font-size:15px;line-height:1.6}
.mtbox__src a{color:var(--teal-700);text-decoration:underline;overflow-wrap:anywhere}

/* ----------------------------------------------------------- Failed run --- */
.mtfail{background:var(--amber-bg);border:1px solid var(--amber-line);color:var(--amber-ink);
  border-radius:var(--radius);padding:22px 19px}
.mtfail h3{font-size:18.5px;margin:0 0 9px;color:var(--amber-ink)}
.mtfail p{font-size:16px;line-height:1.7;margin:0 0 14px}
.mtfail p:last-child{margin-bottom:0}

/* ------------------------------------------------------------- Notices --- */
.mtnote{background:var(--teal-050);border:1px solid var(--teal-100);border-radius:10px;
  padding:12px 14px;font-size:15px;line-height:1.6;color:var(--teal-900);
  display:flex;gap:9px;align-items:flex-start;margin:0}
.mtnote i{color:var(--teal-600);margin-top:3px;flex:none}

/* ---------------------------------------------------------- Wider screens --- */
@media (min-width:620px){
  .mtform,.mtrun,.mtscore,.mtgate__form{padding-left:26px;padding-right:26px}
  .mtform__fields{grid-template-columns:1fr 1fr;gap:0 18px}
  .mtform__fields .mtfield--wide{grid-column:1 / -1}
  .mttally{grid-template-columns:repeat(4,1fr)}
  .mtscore__top{grid-template-columns:auto 1fr;gap:22px;align-items:center}
  .mtgate{padding:32px 28px}
}
@media (min-width:900px){
  .mtscore{padding:30px 28px}
}

/* ----------------------------------------------------------- Reveal, motion --- */
/* Guarded so a page with JavaScript switched off is never left blank. The site
   has been caught by exactly this before. */
html.js .mt [data-mtreveal]{opacity:0;transform:translateY(10px)}
html.js .mt [data-mtreveal].is-in{opacity:1;transform:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}

@media (prefers-reduced-motion:reduce){
  /* Every moving thing stops. Nothing is merely slowed, because a slower
     animation is still an animation to somebody who asked for none. A ready
     section is shown outright rather than faded in, so no content depends on
     a transition that will not run. The state is still clear without motion:
     every step and every section carries its status in words. */
  .mtspin{animation:none;border-right-color:currentColor;opacity:.55}
  .mtrun::before,
  .mtrun__live,
  .mtsec__pulse,
  .mtskel span::after,
  .mtstepper__i.is-running .mtstepper__n::after,
  .mtsec.is-justready .mtsec__body,
  .mtsec.is-justready .mtsec__ic{animation:none}
  .mtrun::before,.mtskel span::after,.mtstepper__i.is-running .mtstepper__n::after{display:none}
  .mtrun__live,.mtsec__pulse{opacity:1;transform:none}
  .mtsec,.mtstepper__n{transition:none}
  html.js .mt [data-mtreveal]{opacity:1;transform:none}
  html.js .mt [data-mtreveal].is-in{transition:none}
  .mtwhy>summary .chev{transition:none}
}

/* Printing a result is a real thing people do with it, so the page that comes
   out is the report rather than the furniture around it. */
@media print{
  .mtform,.mtrun,.mtgate,.mt__panel:not(.is-on){display:none!important}
  .mtscore,.mtfind,.mtplan,.mtbox{box-shadow:none;border-color:#ccc;break-inside:avoid}
  .mtgate__form{display:none!important}
}

/* ------------------------------------------------------ Report subject --- */
/* WHAT THIS REPORT IS ABOUT
   -------------------------------------------------------------------------
   A page of findings with no subject line is a page nobody can trust or share.
   Somebody may have run three checks, opened a saved link a week later, or
   been sent it by a colleague who was not there when it ran. The first
   question in all three cases is the same, so it is answered first.

   Built from the run's own inputs using each field's own label, so it is
   correct for every one of the thirty checks with no per tool work. */
.mtsubject{background:var(--teal-050);border:1px solid var(--teal-100);
  border-radius:var(--radius);padding:18px 19px}
.mtsubject__k{font-size:14.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-700);margin:0 0 13px}
.mtsubject__k i{margin-right:7px;color:var(--teal-600)}

.mtsubject__list{margin:0;display:grid;gap:10px}
.mtsubject__row{display:grid;gap:2px}
.mtsubject__row dt{font-size:16px;font-weight:700;color:var(--teal-700);
  letter-spacing:.02em;margin:0}
.mtsubject__row dd{font-size:16.5px;font-weight:700;color:var(--teal-900);margin:0;
  line-height:1.4;overflow-wrap:anywhere}
.mtsubject__site{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:16px;letter-spacing:-.01em}

.mtsubject__when{font-size:15px;line-height:1.6;color:var(--ink-2);
  margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--teal-100)}

@media (min-width:620px){
  .mtsubject{padding:20px 24px}
  .mtsubject__list{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 26px}
}

/* ------------------------------------------------------- Severity bars --- */
/* WHY THIS IS CSS AND NOT A CHART LIBRARY
   -------------------------------------------------------------------------
   Four numbers do not need two hundred kilobytes of JavaScript. This bar draws
   itself the instant the result appears, which matters here more than anywhere
   else on the page: it is the first thing somebody sees when their check
   finishes, and a chart that arrives a second later has already lost them.

   The unlocked report does use the governed chart API, because the action plan
   is a genuine two dimensional question and a real chart answers it better
   than anything that can be drawn in CSS. */
.mtsplit{display:grid;gap:12px;margin:2px 0 0}
.mtsplit__h{font-size:14.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-700);margin:0}

.mtbar{display:flex;height:34px;border-radius:9px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg)}
.mtbar__seg{display:flex;align-items:center;justify-content:center;font-size:15px;
  font-weight:800;color:#fff;min-width:0;overflow:hidden;white-space:nowrap;
  transform:scaleX(0);transform-origin:left center}
html:not(.js) .mtbar__seg,
.mtbar.is-in .mtbar__seg{transform:scaleX(1);
  transition:transform .65s var(--ease)}
.mtbar.is-in .mtbar__seg:nth-child(2){transition-delay:.09s}
.mtbar.is-in .mtbar__seg:nth-child(3){transition-delay:.18s}
.mtbar.is-in .mtbar__seg:nth-child(4){transition-delay:.27s}

/* Each one carries white 12px bold text, so each one has to clear 4.5:1
   against white. Measured, not assumed: 6.13, 4.67, 5.20 and 5.19 to one.
   The low tone started at #7f9694, which measured 3.14 and failed, and was
   darkened until it cleared. */
.mtbar__seg--critical{background:#b3341f}
.mtbar__seg--high{background:#a86412}
.mtbar__seg--medium{background:var(--teal-600)}
.mtbar__seg--low{background:#5c716f}

.mtkey{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;padding:0}
.mtkey li{display:flex;align-items:center;gap:7px;font-size:15px;color:var(--ink-2)}
.mtkey b{font-weight:800;color:var(--teal-900);font-variant-numeric:tabular-nums}
.mtkey__sw{width:11px;height:11px;border-radius:3px;flex:none}

/* The locked split. This one is the conversion moment, so it is the loudest
   thing in the block and it counts honestly rather than teasing. */
.mtlocked{background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:15px 16px}
.mtlocked__h{font-size:15.5px;font-weight:700;color:var(--teal-900);margin:0 0 11px}
.mtlocked__bar{display:flex;height:30px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.mtlocked__open{background:var(--teal-600);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:800;white-space:nowrap;min-width:0;overflow:hidden}
/* Light stripes. They used --line-2, a dark grey in the portal palette, which
   left the "1 more" label as dark text on dark stripes. #003737 on the darker
   stripe, #d5dfdf, measures 9.3 to 1. */
.mtlocked__shut{background:repeating-linear-gradient(135deg,#d5dfdf,#d5dfdf 7px,#eef3f3 7px,#eef3f3 14px);
  color:var(--teal-900);display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:15px;font-weight:800;white-space:nowrap;min-width:0;overflow:hidden}
.mtlocked__note{font-size:15px;line-height:1.6;color:var(--muted-2);margin:10px 0 0}

@media (prefers-reduced-motion:reduce){
  .mtbar__seg,.mtbar.is-in .mtbar__seg{transform:none;transition:none}
}

/* --------------------------------------------------------- Saved link ---- */
/* A result that lives only in one browser session is a result that dies when
   the tab closes. This gives every one of them a permanent address somebody
   can keep or send on. */
.mtsave{margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--teal-100)}
.mtsave__l{display:block;font-size:15px;font-weight:700;color:var(--teal-800);margin:0 0 8px}
.mtsave__l i{margin-right:6px;color:var(--teal-600)}
.mtsave__row{display:flex;gap:8px;align-items:stretch}
.mtsave__i{flex:1 1 auto;min-width:0;font-size:15px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--card)}
.mtsave__b{flex:none;white-space:nowrap}
.mtsave .hint{margin-top:7px}

/* ------------------------------------------------------------- Trend ----- */
/* Only rendered when a second genuine measurement exists. One score is a
   score, not a direction. */
.mttrend{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.6;
  margin:12px 0 0;padding:11px 13px;border-radius:10px;border:1px solid var(--teal-100);
  background:var(--card);color:var(--ink-2)}
.mttrend i{margin-top:3px;flex:none;color:var(--teal-600)}
.mttrend b{color:var(--teal-900)}
.mttrend--ok{border-color:var(--ok-line);background:var(--ok-bg)}
.mttrend--ok i{color:var(--mt-ok-text)}
.mttrend--amber{border-color:var(--amber-line);background:var(--amber-bg);color:var(--amber-ink)}
.mttrend--amber i{color:var(--amber)}
.mttrend--amber b{color:var(--amber-ink)}

/* --------------------------------------------------- What to run next ---- */
/* Thirty checks with nothing joining them are thirty separate moments. This is
   the moment somebody is most willing to look at the next thing. */
.mtnext{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 19px;box-shadow:var(--shadow)}
.mtnext__h{font-size:18.5px;color:var(--teal-900);margin:0 0 6px}
.mtnext__sub{font-size:15.5px;line-height:1.65;color:var(--muted-2);margin:0 0 18px}
.mtnext__list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.mtnext__item{display:flex;gap:13px;align-items:flex-start;flex-wrap:wrap;
  background:var(--bg);border:1px solid var(--line-2);border-radius:11px;padding:15px 16px;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.mtnext__item:hover{border-color:var(--teal-100);background:var(--teal-050)}
.mtnext__ic{flex:none;width:34px;height:34px;border-radius:9px;background:var(--teal-050);
  color:var(--teal-700);display:flex;align-items:center;justify-content:center;font-size:14px}
.mtnext__item:hover .mtnext__ic{background:var(--teal-600);color:#fff}
/* The recommendation rows use the check's own artwork when it has any. The
   hover inversion above is for the glyph chip only: inverting a picture would
   just put a teal block behind a white tile. */
.mtnext__ic--img{width:60px;height:60px;border-radius:12px;background:#fff;
  border:1px solid var(--line-2);overflow:hidden;padding:0}
.mtnext__item:hover .mtnext__ic--img{background:#fff;border-color:var(--teal-100)}
.mtnext__ic--img .toolicon{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:560px){
  .mtnext__ic--img{width:48px;height:48px;border-radius:11px}
}
.mtnext__tx{flex:1 1 220px;min-width:0;display:grid;gap:4px}
.mtnext__t{font-size:16px;font-weight:700;color:var(--teal-900);text-decoration:none;line-height:1.35}
.mtnext__t:hover{text-decoration:underline}
.mtnext__q{font-size:15px;line-height:1.55;color:var(--ink-2)}
.mtnext__why{font-size:15px;line-height:1.55;color:var(--teal-700);font-weight:600}
.mtnext__go{flex:none;align-self:center}
.mtnext__all{font-size:15px;margin:16px 0 0;text-align:center}
.mtnext__all a{color:var(--teal-700);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .mtnext__item{transition:none}
}
@media (min-width:620px){
  .mtnext{padding:26px 24px}
}

/* ==========================================================================
   THE CHECK IN THE HERO

   The check is the reason somebody is on this page, so it is above the fold
   and it is the loudest thing on the screen. The copy beside it argues for it;
   the panel is the thing itself.

   On a phone the copy comes first and the panel follows, because a form with
   no context above it on a small screen reads as a demand rather than an
   offer. On a wide screen they sit side by side and both are above the fold.
   ========================================================================== */

/* Deliberately not max-width:none. The wrapper is a full width column now, so
   a hero with no cap would run edge to edge while every band beside it stops at
   1290px, and the page would look broken at exactly the widest screens. */
.tphero--split{max-width:1290px;padding:30px 0 12px}
.tphero__copy{min-width:0}
.tphero--split h1{font-size:clamp(24px,3.5vw,36px)}
.tphero--split .tphero__lead{margin:0 0 20px}

/* The three promises. Each one answers something somebody hesitates over
   before typing their own website into a stranger's form. */
.tphero__points{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px}
.tphero__points li{display:flex;gap:11px;align-items:flex-start;font-size:16px;
  line-height:1.6;color:var(--ink-2)}
.tphero__points i{color:var(--teal-600);margin-top:3px;flex:none;font-size:14px}
.tphero__points b{color:var(--teal-900)}
.tphero__alt{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0}
.tphero__alt a{color:var(--teal-700);text-decoration:underline}

/* The panel. Deliberately the most prominent object on the page: a heavier
   shadow than any other card, a teal edge, and a tinted frame that separates
   it from the copy without a hard border between two columns. */
.tphero__tool{min-width:0;position:relative}
.tphero__tool .mt{max-width:none}
.tphero__tool .mtform,
.tphero__tool .mtrun{border:1px solid var(--teal-100);border-top:4px solid var(--teal-600);
  box-shadow:0 18px 44px rgba(0,55,55,.13),0 2px 6px rgba(0,55,55,.05)}

/* Above the fold means the form is reachable without scrolling, so the fields
   are tighter here than they would be in a standalone section. */
.tphero__tool .mtform{padding:22px 20px}
.tphero__tool .mtform__head{margin:0 0 15px}
.tphero__tool .mtform__head h2{font-size:19px;margin:0 0 6px}
.tphero__tool .mtform__head p{font-size:15.5px}
.tphero__tool .mtfield{margin:0 0 14px}
.tphero__tool .mtform__go{margin:18px 0 0}
.tphero__tool .mtform__go .btn-primary{width:100%;justify-content:center}
.tphero__tool .mtform__note{margin:12px 0 0;font-size:15px}

/* An anchor with no height, so #run still lands in the right place now that
   the section wrapper is gone. */
.mtanchor{display:block;height:0;overflow:hidden;scroll-margin-top:90px}

/* ==========================================================================
   THE REPORT SECTION

   The running console and the finished report used to render inside the hero's
   right hand column, capped at 880px and narrower than that in practice. A
   report carries a score, a severity bar, findings with their evidence, the
   sources read and a chart. None of that reads in a third of a screen.

   They now have their own band below the hero, so they get the same 1290px
   every other section on the page uses. The form stays in the hero, because it
   is one input and it is the reason somebody is on the page.

   [data-mt] wraps both, so the script still finds all three panels in one root
   and show() is unchanged.
   ========================================================================== */
.mt--page{max-width:none;margin:0}
.mtband{background:var(--teal-050);padding:34px 0 48px;scroll-margin-top:80px}
.mtband[hidden]{display:none}

/* The report is wide now, so it gets its own breathing room rather than the
   tight spacing the hero column needed. */
.mtband .mtrun,
.mtband .mtresult{max-width:1100px;margin-inline:auto}
.mtband .mtrun{border:1px solid var(--teal-100);border-top:4px solid var(--teal-600);
  box-shadow:0 18px 44px rgba(0,55,55,.10),0 2px 6px rgba(0,55,55,.04)}

@media (max-width:760px){
  .mtband{padding:24px 0 34px}
}

/* A finished result is given the whole width. A report squeezed into a hero
   column is unreadable, and by then the copy beside it has done its work. */
.tphero--result .tphero__copy{display:none}

@media (min-width:980px){
  .tphero--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,470px);
    gap:44px;align-items:start;padding:34px 0 16px}
  .tphero--split .tphero__copy{padding-top:6px}
  /* Sticky so the argument stays beside the panel while somebody reads down
     the form. Disabled the moment a result exists, because the result owns
     the screen then. */
  .tphero--split:not(.tphero--result) .tphero__copy{position:sticky;top:90px}
  .tphero--result{grid-template-columns:1fr}
  .tphero__tool .mtform{padding:26px 24px}
}

@media (min-width:1200px){
  .tphero--split{grid-template-columns:minmax(0,1fr) 500px;gap:56px}
}

@media (prefers-reduced-motion:reduce){
  .tphero--split .tphero__copy{position:static}
}

/* ==========================================================================
   THE REAL PRODUCT SCREEN

   A picture of the real screen is a claim somebody can check. A drawn
   illustration is decoration. The disclosure travels with the picture and is
   readable at a glance, because every figure inside these screens is an
   example and a reader who sees numbers beside marketing copy will otherwise
   take them for somebody's real result.
   ========================================================================== */
.tpshot{margin:0;max-width:1000px;margin-inline:auto}
.tpshot__frame{position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-lg);
  line-height:0}
.tpshot__img{display:block;width:100%;height:auto}

/* The disclosure that sits on the picture itself, so it cannot be separated
   from it by a screenshot, a crop, or a social card. */
.tpshot__tag{position:absolute;top:12px;right:12px;z-index:1;
  background:var(--teal-900);color:#fff;border-radius:20px;padding:5px 13px;
  font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.4;box-shadow:0 2px 10px rgba(0,55,55,.28)}

.tpshot__cap{display:grid;gap:7px;margin:15px 0 0;text-align:center}
.tpshot__what{font-size:16px;font-weight:700;color:var(--teal-900);line-height:1.5}
.tpshot__note{font-size:15px;line-height:1.65;color:var(--muted-2);
  max-width:660px;margin-inline:auto}

@media (min-width:620px){
  .tpshot__tag{top:16px;right:16px;font-size:16px;padding:6px 15px}
}

/* ==========================================================================
   The confirmation above a result a signup has just opened (2026-09-26).
   Outside the result panel, so nothing the script does to the panel can
   remove it. Colours come from the portal tokens this page already loads.
   ========================================================================== */
.mtwelcome{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin:0 0 22px;padding:18px 20px;
  background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:var(--radius);color:var(--ink);
  animation:mtwelcomein .45s var(--ease) both}
@keyframes mtwelcomein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mtwelcome:focus{outline:none}
.mtwelcome:focus-visible{outline:3px solid var(--teal-600);outline-offset:3px}
.mtwelcome__ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;
  color:var(--ok);font-size:22px;border:1px solid var(--ok-line)}
.mtwelcome__h{margin:2px 0 6px;font-size:19px;font-weight:800;line-height:1.35;color:var(--teal-900)}
.mtwelcome__body p{margin:0 0 10px;font-size:16.5px;line-height:1.55;color:var(--ink-2)}
.mtwelcome__body strong{color:var(--ink);word-break:break-word}
.mtwelcome__acts{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0!important}
@media(max-width:640px){.mtwelcome{padding:16px 14px;gap:12px}.mtwelcome__acts .btn-primary,.mtwelcome__acts .btn-secondary{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.mtwelcome{animation:none}}