/**
 * Mailsoftly Blog Engine - Help Center guide styles.
 * All selectors scoped under #ms-help. Design language borrowed from the
 * landing-page shell (tools/visuals/lp-template/style.css): same font stack,
 * color tokens, card / radius / shadow language, framed screenshots, Google
 * CTA styles, and the .ms-rv / .ms-in reveal classes.
 */

@font-face{font-family:'InterFallback-ms';src:local('Arial');size-adjust:107.4%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%}

#ms-help{
  --ms-ink:#0f2438;
  --ms-muted:#44607a;
  --ms-soft:#7089a0;
  --ms-blue:#0288D1;
  --ms-blue2:#03A9F4;
  --ms-line:rgba(2,98,142,0.1);
  --ms-bg:#f6fafe;
  --ms-radius:16px;
  --ms-shadow:0 14px 34px rgba(15,36,56,0.08);
  font-family:'Inter','InterFallback-ms',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--ms-ink);
  background:#fff;
}
#ms-help *{box-sizing:border-box}
#ms-help a{color:var(--ms-blue);text-decoration:none}
#ms-help a:hover{color:#02628E}

/* Layout ------------------------------------------------------------------ */
#ms-help .ms-help__wrap{max-width:1120px;margin:0 auto;padding:0 24px}
#ms-help .ms-help__top{border-bottom:1px solid var(--ms-line);background:linear-gradient(180deg,#fff,#f4f9fe);padding:22px 0 26px}
#ms-help .ms-help__layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:52px;padding-top:40px;padding-bottom:80px;align-items:start}
#ms-help .ms-help__aside{position:sticky;top:96px}
#ms-help .ms-help__article{min-width:0}

/* Header ------------------------------------------------------------------ */
#ms-help .ms-help__heading{font-size:40px;line-height:1.08;font-weight:900;letter-spacing:-0.035em;margin:0}
#ms-help .ms-help__lede{font-size:19px;line-height:1.6;color:var(--ms-muted);font-weight:500;margin:16px 0 0}
#ms-help .ms-help__header{margin-bottom:34px}

/* Breadcrumbs ------------------------------------------------------------- */
#ms-help .ms-help-crumbs{margin-bottom:18px}
#ms-help .ms-help-crumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
#ms-help .ms-help-crumbs__item{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
#ms-help .ms-help-crumbs__link{color:var(--ms-soft)}
#ms-help .ms-help-crumbs__link:hover{color:var(--ms-blue)}
#ms-help .ms-help-crumbs__current{color:var(--ms-ink)}
#ms-help .ms-help-crumbs__plain{color:var(--ms-soft)}
#ms-help .ms-help-crumbs__sep{color:#c3d2df}

/* Search ------------------------------------------------------------------ */
/* Scoped to the widget mount attribute [data-ms-help-search] rather than a
   surface id, so the exact same dropdown styling applies wherever the widget
   renders: guide pages (#ms-help), the help hub (#ms-hub) and any future hub
   (e.g. a TR hub) inherit it with no duplication. The block declares its own
   local vars (--mss-*) so it never depends on a surface defining --ms-* or the
   hub defining --blue etc. */
[data-ms-help-search]{
  --mss-ink:#0f2438;--mss-muted:#44607a;--mss-soft:#7089a0;--mss-blue:#0288D1;
  --mss-line:rgba(2,98,142,0.1);--mss-bg:#f6fafe;
  position:relative;max-width:640px;margin:16px 0 0;text-align:left
}
[data-ms-help-search] .ms-help-search__bar{display:flex;align-items:center;gap:12px;padding:13px 16px;background:#fff;border:1.5px solid var(--mss-line);border-radius:14px;box-shadow:0 8px 24px rgba(15,36,56,0.06);transition:border-color .15s ease,box-shadow .15s ease}
[data-ms-help-search] .ms-help-search__bar:focus-within{border-color:rgba(3,169,244,0.55);box-shadow:0 10px 28px rgba(3,169,244,0.16)}
[data-ms-help-search] .ms-help-search__icon{color:var(--mss-soft);flex:0 0 20px}
[data-ms-help-search] .ms-help-search__input{flex:1;min-width:0;border:0 !important;outline:0 !important;box-shadow:none !important;-webkit-appearance:none;appearance:none;background:transparent !important;font:inherit;font-size:16px;color:var(--mss-ink)}
[data-ms-help-search] .ms-help-search__input:focus,[data-ms-help-search] .ms-help-search__input:focus-visible{border:0 !important;outline:0 !important;box-shadow:none !important}
[data-ms-help-search] .ms-help-search__input::placeholder{color:var(--mss-soft)}
[data-ms-help-search] .ms-help-search__hint{flex:0 0 auto;font-family:inherit;font-size:12px;font-weight:700;color:var(--mss-soft);background:var(--mss-bg);border:1px solid var(--mss-line);border-radius:7px;padding:2px 8px}
/* The "/" badge is the keyboard shortcut hint; meaningless without a keyboard. */
@media (hover:none) and (pointer:coarse){[data-ms-help-search] .ms-help-search__hint{display:none}}
[data-ms-help-search] .ms-help-search__panel{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:40;max-height:min(70vh,560px);overflow:auto;background:#fff;border:1px solid var(--mss-line);border-radius:16px;box-shadow:0 30px 70px rgba(15,36,56,0.18);padding:8px}
/* Belt-and-suspenders hide: the attribute rule mirrors the UA [hidden] rule so
   a stripped/duplicate stylesheet can never leave the panel visible on load. */
[data-ms-help-search] .ms-help-search__panel[hidden]{display:none}
[data-ms-help-search] .ms-help-sgroup{padding:6px 6px 10px}
[data-ms-help-search] .ms-help-sgroup__label{font-size:11.5px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--mss-soft);padding:8px 10px 6px}
[data-ms-help-search] .ms-help-sresult{display:block;padding:11px 12px;border-radius:11px;cursor:pointer;color:var(--mss-ink)}
[data-ms-help-search] .ms-help-sresult:hover,[data-ms-help-search] .ms-help-sresult.is-active{background:var(--mss-bg)}
[data-ms-help-search] .ms-help-sresult__title{display:block;font-size:15px;font-weight:700;color:var(--mss-ink);line-height:1.35}
[data-ms-help-search] .ms-help-sresult__exc{display:block;font-size:13px;color:var(--mss-muted);line-height:1.5;margin-top:3px}
[data-ms-help-search] .ms-help-sresult mark{background:rgba(3,169,244,0.18);color:inherit;border-radius:3px;padding:0 1px}
[data-ms-help-search] .ms-help-sempty{padding:14px 12px 8px}
[data-ms-help-search] .ms-help-sempty__title{font-size:13px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--mss-soft);margin:0 0 6px;padding:0 2px}
[data-ms-help-search] .ms-help-scontact{display:flex;align-items:center;gap:14px;margin-top:10px;padding:16px;border-radius:12px;background:linear-gradient(135deg,rgba(3,169,244,0.09),rgba(3,169,244,0.03));border:1px solid rgba(3,169,244,0.18)}
[data-ms-help-search] .ms-help-scontact__ic{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(15,36,56,0.14)}
[data-ms-help-search] .ms-help-scontact__ic svg{width:18px;height:18px;display:block}
[data-ms-help-search] .ms-help-scontact__txt{flex:1;min-width:0}
[data-ms-help-search] .ms-help-scontact__txt b{display:block;font-size:14.5px;font-weight:800;color:var(--mss-ink)}
[data-ms-help-search] .ms-help-scontact__txt span{display:block;font-size:13px;color:var(--mss-muted);margin-top:2px}
/* Contact CTA: a dedicated class (not the shared .btn-google) so it is fully
   self-styled. color is forced with !important on purpose: every surface sets
   a generic descendant link colour via an id selector (#ms-help a / #ms-hub a)
   that would otherwise win on specificity and paint the label blue on a blue
   button (the original "blank blue rectangle"). This single guard keeps the
   label white and readable on all surfaces. */
[data-ms-help-search] .ms-help-scontact__cta{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:10px;background:var(--mss-blue);color:#fff !important;font:inherit;font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap;box-shadow:0 8px 18px -10px rgba(2,136,209,0.7);transition:background .15s ease,transform .15s ease}
[data-ms-help-search] .ms-help-scontact__cta:hover{background:#0273b8;color:#fff !important;transform:translateY(-1px)}
@media (max-width:480px){
  [data-ms-help-search] .ms-help-scontact{flex-wrap:wrap}
  [data-ms-help-search] .ms-help-scontact__cta{width:100%;margin-top:4px}
}

/* Reading progress -------------------------------------------------------- */
#ms-help .ms-help-progress{height:3px;border-radius:100px;background:var(--ms-line);overflow:hidden;margin-bottom:20px}
#ms-help .ms-help-progress__bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ms-blue2),var(--ms-blue));transition:width .12s linear}

/* Table of contents ------------------------------------------------------- */
#ms-help .ms-help-toc__title{font-size:12px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--ms-soft);margin:0 0 12px}
#ms-help .ms-help-toc__list{list-style:none;margin:0;padding:0;counter-reset:ms-toc;border-left:2px solid var(--ms-line)}
#ms-help .ms-help-toc__item{position:relative}
#ms-help .ms-help-toc__link{display:block;padding:7px 0 7px 18px;margin-left:-2px;border-left:2px solid transparent;font-size:14px;line-height:1.4;color:var(--ms-muted);font-weight:600}
#ms-help .ms-help-toc__link:hover{color:var(--ms-blue)}
#ms-help .ms-help-toc__link.is-active{color:var(--ms-blue);border-left-color:var(--ms-blue)}

/* TOC utility row: copy page link + print / save PDF ---------------------- */
#ms-help .ms-help-utils{display:flex;flex-direction:column;gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--ms-line)}
#ms-help .ms-help-util{display:flex;width:100%;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--ms-line);border-radius:8px;background:#fff;font:inherit;font-size:13px;font-weight:600;color:var(--ms-soft);cursor:pointer;text-align:left;transition:border-color .15s ease,color .15s ease,background .15s ease}
#ms-help .ms-help-util:hover{border-color:rgba(3,169,244,0.5);color:var(--ms-blue);background:var(--ms-bg)}
#ms-help .ms-help-util:focus-visible{outline:2px solid var(--ms-blue);outline-offset:2px}
#ms-help .ms-help-util svg{width:16px;height:16px;display:block;flex:0 0 16px}
#ms-help .ms-help-util__label{line-height:1}
#ms-help .ms-help-util.is-copied{border-color:#16a34a;color:#16a34a;background:rgba(22,163,74,0.06)}

/* Article body ------------------------------------------------------------ */
#ms-help .ms-help__body{font-size:17px;line-height:1.7;color:var(--ms-ink);counter-reset:ms-step}
#ms-help .ms-help__body p{margin:0 0 18px}
#ms-help .ms-help__body ul,#ms-help .ms-help__body ol{margin:0 0 18px;padding-left:22px}
#ms-help .ms-help__body li{margin:0 0 8px}
#ms-help .ms-help__body h3{font-size:22px;font-weight:800;letter-spacing:-0.02em;margin:34px 0 12px}
#ms-help .ms-help__body a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
#ms-help .ms-help__body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.9em;background:var(--ms-bg);border:1px solid var(--ms-line);border-radius:6px;padding:2px 6px}
/* Framed screenshots, matching the LP presentation. */
#ms-help .ms-help__body img{max-width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 26px 52px rgba(15,36,56,0.14),0 0 0 1px rgba(2,98,142,0.08);margin:24px auto}
#ms-help .ms-help__body figure{margin:24px 0}
#ms-help .ms-help__body figure img{margin:0 auto}
/* Zoomable screenshots open the self-contained lightbox (see .ms-lb below). */
#ms-help .ms-shot .ms-zoomable{display:block;cursor:zoom-in}
#ms-help .ms-help__body figcaption{text-align:center;font-size:13.5px;color:var(--ms-soft);font-weight:500;margin-top:10px}

/* Click-to-load video facade (guides.js hydrates .ms-video). 16:10 stage with a
   poster fill and a centered, design-system play affordance; the Stream iframe
   only mounts on click. */
#ms-help .ms-video{position:relative;margin:28px 0;border-radius:var(--ms-radius);overflow:hidden;background:var(--ms-ink);box-shadow:var(--ms-shadow);aspect-ratio:16/10}
#ms-help .ms-video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#ms-help .ms-video__play{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;cursor:pointer;background:rgba(15,36,56,0.26);transition:background .18s ease}
#ms-help .ms-video__play:hover{background:rgba(15,36,56,0.42)}
#ms-help .ms-video__play:focus-visible{outline:3px solid var(--ms-blue2);outline-offset:-4px}
#ms-help .ms-video__play-ic{display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;background:#fff;box-shadow:0 14px 32px rgba(15,36,56,0.34);transition:transform .18s ease}
#ms-help .ms-video__play:hover .ms-video__play-ic{transform:scale(1.08)}
#ms-help .ms-video__play-ic svg{width:34px;height:34px;margin-left:4px;fill:var(--ms-blue);display:block}
#ms-help .ms-video__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (prefers-reduced-motion: reduce){
  #ms-help .ms-video__play,#ms-help .ms-video__play-ic{transition:none}
}
@media print{
  #ms-help .ms-video{display:none}
}

/* Numbered step headings (h2 id="step-n"). */
#ms-help .ms-help__body h2[id^="step-"]{position:relative;counter-increment:ms-step;font-size:26px;font-weight:900;letter-spacing:-0.025em;line-height:1.2;margin:44px 0 16px;padding-left:56px;scroll-margin-top:96px}
#ms-help .ms-help__body h2[id^="step-"]::before{content:counter(ms-step);position:absolute;left:0;top:-2px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--ms-blue2),#0273b8);border-radius:12px;box-shadow:0 10px 22px rgba(3,169,244,0.32)}
#ms-help .ms-help__body h2:not([id^="step-"]){font-size:26px;font-weight:900;letter-spacing:-0.025em;margin:40px 0 14px;scroll-margin-top:96px}
/* Check-off control (guides.js swaps the CSS counter badge for a real button).
   Without JS the ::before counter above still shows; has-check hides it once
   the interactive button is injected. */
#ms-help .ms-help__body h2.has-check::before{display:none}
#ms-help .ms-step-check{position:absolute;left:0;top:-2px;width:40px;height:40px;padding:0;border:0;cursor:pointer;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--ms-blue2),#0273b8);box-shadow:0 10px 22px rgba(3,169,244,0.32);transition:background .15s ease,box-shadow .15s ease,transform .12s ease}
#ms-help .ms-step-check:hover{transform:translateY(-1px)}
#ms-help .ms-step-check:focus-visible{outline:2px solid var(--ms-blue);outline-offset:3px}
#ms-help .ms-step-check__num{font-size:18px;font-weight:900;line-height:1}
#ms-help .ms-step-check__done{display:none;width:22px;height:22px}
#ms-help .ms-step-check__done svg{width:22px;height:22px;display:block;stroke:#fff}
#ms-help .ms-step-check[aria-pressed="true"]{background:linear-gradient(135deg,#22c55e,#15a34a);box-shadow:0 10px 22px rgba(22,163,74,0.32)}
#ms-help .ms-step-check[aria-pressed="true"] .ms-step-check__num{display:none}
#ms-help .ms-step-check[aria-pressed="true"] .ms-step-check__done{display:flex;align-items:center;justify-content:center}
/* Subtle muted done state on the heading + its TOC entry (no strikethrough). */
#ms-help .ms-help__body h2.is-done{color:var(--ms-soft)}
#ms-help .ms-help-toc__link.is-done{color:var(--ms-soft)}
#ms-help .ms-help-toc__link.is-done::after{content:"";display:inline-block;width:14px;height:14px;margin-left:7px;vertical-align:-2px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%2316a34a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Reset progress link at the end of the TOC utility row (guides.js toggles it). */
#ms-help .ms-help-reset{align-self:flex-start;margin-top:2px;padding:2px 0;border:0;background:none;font:inherit;font-size:12.5px;font-weight:700;color:var(--ms-soft);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
#ms-help .ms-help-reset:hover{color:var(--ms-blue)}
#ms-help .ms-help-reset[hidden]{display:none}
/* Copy-link icon added by guides.js on step headings. */
#ms-help .ms-help-anchor{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:10px;padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important;font:inherit;line-height:1;border-radius:8px;color:var(--ms-soft);vertical-align:middle;opacity:0;transition:opacity .15s ease,background .15s ease}
#ms-help .ms-help__body h2:hover .ms-help-anchor,#ms-help .ms-help-anchor:focus{opacity:1}
#ms-help .ms-help-anchor:hover{background:var(--ms-bg) !important;color:var(--ms-blue)}
#ms-help .ms-help-anchor svg{width:16px;height:16px;display:block}
#ms-help .ms-help-anchor.is-copied{color:#16a34a;opacity:1}
#ms-help .ms-help-anchor{position:relative}
#ms-help .ms-help-anchor.is-copied::after{content:"Link copied";position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;background:var(--ms-ink);color:#fff;font-size:12px;font-weight:600;line-height:1;padding:6px 10px;border-radius:6px;pointer-events:none}
#ms-help .ms-help-anchor.is-copied::before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ms-ink);pointer-events:none}

/* Google + Microsoft CTA styles (copied from the LP shell). */
#ms-help .btn-google{display:inline-flex;align-items:center;justify-content:center;background:#4285F4;color:#fff;font-weight:700;font-size:16px;border-radius:12px;padding:10px 26px 10px 10px;box-shadow:0 8px 18px -10px rgba(66,133,244,.55)}
#ms-help .btn-google:hover{background:#3a78db;color:#fff}
#ms-help .btn-microsoft{display:inline-flex;align-items:center;justify-content:center;background:#2F2F2F;color:#fff;font-weight:700;font-size:16px;border-radius:12px;padding:10px 26px 10px 10px;box-shadow:0 8px 18px -10px rgba(15,23,42,.55)}
#ms-help .btn-microsoft:hover{background:#1a1a1a;color:#fff}
#ms-help .ms-gicon,#ms-help .ms-msicon{width:34px;height:34px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;margin-right:12px;flex:0 0 34px;box-shadow:0 1px 3px rgba(15,36,56,0.14)}
#ms-help .ms-gicon svg,#ms-help .ms-msicon svg{width:18px;height:18px;display:block}

/* CTA band placeholder ---------------------------------------------------- */
#ms-help .ms-help-cta:empty{display:none}
#ms-help .ms-help-cta{margin:44px 0 0}

/* Prev / next pager ------------------------------------------------------- */
#ms-help .ms-help-pager{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:48px 0 0}
#ms-help .ms-help-pager__spacer{display:block}
#ms-help .ms-help-pager__link{display:flex;flex-direction:column;gap:5px;padding:18px 22px;border:1px solid var(--ms-line);border-radius:14px;background:#fff;box-shadow:var(--ms-shadow);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
#ms-help .ms-help-pager__link:hover{border-color:rgba(3,169,244,0.5);transform:translateY(-2px);box-shadow:0 20px 40px rgba(15,36,56,0.1)}
#ms-help .ms-help-pager__next{text-align:right}
#ms-help .ms-help-pager__dir{font-size:11.5px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--ms-blue)}
#ms-help .ms-help-pager__title{font-size:16px;font-weight:800;color:var(--ms-ink);line-height:1.35}

/* Related guides ---------------------------------------------------------- */
#ms-help .ms-help-related{margin:64px 0 0}
#ms-help .ms-help-related__title{font-size:24px;font-weight:900;letter-spacing:-0.025em;margin:0 0 24px}
#ms-help .ms-help-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#ms-help .ms-help-rc{display:flex;flex-direction:column;gap:8px;padding:22px;background:var(--ms-bg);border:1px solid var(--ms-line);border-radius:var(--ms-radius);box-shadow:var(--ms-shadow);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
#ms-help .ms-help-rc:hover{transform:translateY(-3px);border-color:rgba(3,169,244,0.4);box-shadow:0 22px 44px rgba(15,36,56,0.1)}
#ms-help .ms-help-rc__cat{font-size:11px;font-weight:800;letter-spacing:0.09em;text-transform:uppercase;color:var(--ms-blue)}
#ms-help .ms-help-rc__title{font-size:16.5px;font-weight:800;color:var(--ms-ink);line-height:1.35;letter-spacing:-0.015em}
#ms-help .ms-help-rc__exc{font-size:13.5px;color:var(--ms-muted);line-height:1.55}

/* Orientation panel (render.js emits .ms-guide-brief at the top of the body). */
#ms-help .ms-guide-brief{margin:0 0 30px;padding:22px 24px;background:linear-gradient(180deg,#fff,var(--ms-bg));border:1px solid var(--ms-line);border-radius:var(--ms-radius);box-shadow:var(--ms-shadow)}
#ms-help .ms-guide-brief__meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
#ms-help .ms-guide-brief__chip{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 10px;background:#fff;border:1px solid var(--ms-line);border-radius:100px;font-size:13px;font-weight:700;color:var(--ms-muted)}
#ms-help .ms-guide-brief__chip-ic{display:inline-flex;color:var(--ms-blue)}
#ms-help .ms-guide-brief__chip-ic svg{width:16px;height:16px;display:block}
#ms-help .ms-guide-brief__cols{display:grid;grid-template-columns:1fr 1fr;gap:22px 34px}
#ms-help .ms-guide-brief__label{font-size:11.5px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--ms-soft);margin:0 0 12px}
#ms-help .ms-guide-brief__list{list-style:none;margin:0;padding:0}
#ms-help .ms-guide-brief__item{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;font-size:15px;line-height:1.5;color:var(--ms-ink);font-weight:500}
#ms-help .ms-guide-brief__item:last-child{margin-bottom:0}
#ms-help .ms-guide-brief__item-ic{flex:0 0 20px;display:inline-flex;color:#16a34a;margin-top:1px}
#ms-help .ms-guide-brief__item-ic--need{color:var(--ms-blue)}
#ms-help .ms-guide-brief__item-ic svg{width:20px;height:20px;display:block}
#ms-help .ms-guide-brief__link{font-weight:700;text-decoration:none;color:var(--ms-blue)}
#ms-help .ms-guide-brief__link:hover{text-decoration:underline;text-underline-offset:2px}

/* Callouts in step / intro prose (render.js: > Tip: / > Note: / > Careful:). */
#ms-help .ms-callout{margin:0 0 20px;padding:14px 18px 14px 16px;border-left:4px solid;border-radius:12px}
#ms-help .ms-callout__label{display:block;font-size:11.5px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;margin:0 0 4px}
#ms-help .ms-callout p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ms-ink)}
#ms-help .ms-callout--tip{border-left-color:#16a34a;background:rgba(22,163,74,0.07)}
#ms-help .ms-callout--tip .ms-callout__label{color:#15803d}
#ms-help .ms-callout--note{border-left-color:var(--ms-blue);background:rgba(3,169,244,0.08)}
#ms-help .ms-callout--note .ms-callout__label{color:#0273b8}
#ms-help .ms-callout--warn{border-left-color:#f59e0b;background:rgba(245,158,11,0.1)}
#ms-help .ms-callout--warn .ms-callout__label{color:#b45309}

/* Keep going next-step cards (render.js emits .ms-guide-next, curated). ---- */
#ms-help .ms-guide-next{margin:56px 0 0}
#ms-help .ms-guide-next__title-h{font-size:24px;font-weight:900;letter-spacing:-0.025em;margin:0 0 24px}
#ms-help .ms-guide-next__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#ms-help .ms-guide-next__card{display:flex;flex-direction:column;gap:9px;padding:24px;background:#fff;border:1px solid var(--ms-line);border-radius:var(--ms-radius);box-shadow:var(--ms-shadow);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
#ms-help .ms-guide-next__card:hover{transform:translateY(-3px);border-color:rgba(3,169,244,0.4);box-shadow:0 22px 44px rgba(15,36,56,0.12)}
#ms-help .ms-guide-next__cat{font-size:11px;font-weight:800;letter-spacing:0.09em;text-transform:uppercase;color:var(--ms-blue)}
#ms-help .ms-guide-next__title{font-size:17px;font-weight:800;color:var(--ms-ink);line-height:1.32;letter-spacing:-0.015em}
#ms-help .ms-guide-next__exc{font-size:13.5px;color:var(--ms-muted);line-height:1.55}
#ms-help .ms-guide-next__go{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:13px;font-weight:800;color:var(--ms-blue)}
#ms-help .ms-guide-next__go svg{width:16px;height:16px;display:block;transition:transform .15s ease}
#ms-help .ms-guide-next__card:hover .ms-guide-next__go svg{transform:translateX(3px)}

/* Was this helpful widget (injected by guides.js). ------------------------ */
#ms-help .ms-help-feedback{margin:48px 0 0;padding:24px;border:1px solid var(--ms-line);border-radius:var(--ms-radius);background:#fff;text-align:center}
#ms-help .ms-help-feedback__q{font-size:16px;font-weight:800;color:var(--ms-ink);margin:0 0 14px}
#ms-help .ms-help-feedback__btns{display:inline-flex;gap:12px}
#ms-help .ms-help-feedback__btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border:1.5px solid var(--ms-line);border-radius:100px;background:#fff;font:inherit;font-size:14.5px;font-weight:700;color:var(--ms-muted);cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}
#ms-help .ms-help-feedback__btn:hover{border-color:rgba(3,169,244,0.5);color:var(--ms-blue)}
#ms-help .ms-help-feedback__btn.is-picked{border-color:var(--ms-blue);color:var(--ms-blue);background:rgba(3,169,244,0.07)}
#ms-help .ms-help-feedback__btn svg{width:18px;height:18px}
#ms-help .ms-help-feedback__thanks{font-size:14.5px;color:var(--ms-muted);font-weight:600;margin:14px 0 0}
#ms-help .ms-help-feedback__support{display:none;margin:14px 0 0}
#ms-help .ms-help-feedback__support.is-visible{display:block}
#ms-help .ms-help-feedback__support a{font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* Scroll reveals (JS adds .ms-rv only at runtime; .ms-in animates once). --- */
#ms-help .ms-rv{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease}
#ms-help .ms-rv.ms-in{opacity:1;transform:none}

/* Responsive -------------------------------------------------------------- */
@media (max-width:1279px){
  #ms-help .ms-help__layout{grid-template-columns:230px minmax(0,1fr);gap:38px}
  #ms-help .ms-help__heading{font-size:34px}
  #ms-help .ms-help-related__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:834px){
  #ms-help .ms-help__layout{grid-template-columns:1fr;gap:0;padding-bottom:56px}
  #ms-help .ms-help__aside{position:static;margin-bottom:28px}
  #ms-help .ms-help-progress{position:sticky;top:0;z-index:20;margin:0 0 18px}
  #ms-help .ms-help-toc{border:1px solid var(--ms-line);border-radius:14px;padding:18px 20px;background:var(--ms-bg)}
  #ms-help .ms-help__heading{font-size:30px}
  #ms-help .ms-help__lede{font-size:17px}
  #ms-help .ms-help-related__grid{grid-template-columns:1fr}
  #ms-help .ms-guide-brief__cols{grid-template-columns:1fr;gap:18px}
  #ms-help .ms-guide-next__grid{grid-template-columns:1fr}
}
@media (max-width:390px){
  #ms-help .ms-help__wrap{padding:0 16px}
  #ms-help .ms-help__heading{font-size:26px}
  #ms-help .ms-help__body{font-size:16px}
  #ms-help .ms-help__body h2[id^="step-"]{font-size:22px;padding-left:48px}
  #ms-help .ms-help__body h2[id^="step-"]::before{width:34px;height:34px;font-size:16px}
  #ms-help .ms-step-check{width:34px;height:34px}
  #ms-help .ms-step-check__num{font-size:16px}
  #ms-help .ms-help-pager{grid-template-columns:1fr}
  #ms-help .ms-help-pager__next{text-align:left}
}

@media (prefers-reduced-motion: reduce){
  #ms-help .ms-rv{opacity:1;transform:none;transition:none}
  #ms-help .ms-help-progress__bar{transition:none}
}

/* Bottom CTA band (render.js emits .ms-guide-cta inside the guide body). */
#ms-help .ms-guide-cta{margin:56px 0 8px;padding:44px 28px;text-align:center;background:linear-gradient(135deg,#f4f9fe 0%,#e8f4fd 100%);border:1px solid var(--ms-line);border-radius:var(--ms-radius);box-shadow:var(--ms-shadow)}
#ms-help .ms-guide-cta-title{font-size:26px;font-weight:900;letter-spacing:-0.02em;margin:0 0 8px;color:var(--ms-ink)}
#ms-help .ms-guide-cta-sub{font-size:16px;color:var(--ms-muted);margin:0 0 20px}
#ms-help .ms-guide-cta-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
#ms-help .ms-guide-cta .btn-google,#ms-help .ms-guide-cta .btn-microsoft{font-size:17px}
@media (max-width:600px){
  #ms-help .ms-guide-cta{padding:32px 18px}
  #ms-help .ms-guide-cta-title{font-size:22px}
  #ms-help .ms-guide-cta-btns{flex-direction:column;align-items:stretch}
  #ms-help .ms-guide-cta .btn-google,#ms-help .ms-guide-cta .btn-microsoft{width:100%;font-size:16px}
}

/* Print / save as PDF ----------------------------------------------------- */
/* Strip the site chrome and helper UI, leaving a clean article: h1, intro,
   numbered steps and screenshots on white. Triggered by the TOC print button
   (window.print) or the browser's own print / save as PDF. */
@media print{
  /* Site shell + preview chrome + the body-level lightbox overlay. */
  .ms-preview-header,.ms-preview-note,
  header.site-header,#masthead,#site-header,.site-header,.elementor-location-header,#ekit-megamenu,
  footer.site-footer,#colophon,.site-footer,.elementor-location-footer,
  .ms-lb{display:none !important}

  /* Helper UI inside the guide that does not belong on the printed page. */
  #ms-help .ms-help__top,
  #ms-help .ms-help__aside,
  #ms-help .ms-help-utils,
  #ms-help .ms-applink-wrap,
  #ms-help .ms-help-cta,
  #ms-help .ms-guide-cta,
  #ms-help .ms-help-feedback,
  #ms-help .ms-help-pager,
  #ms-help .ms-help-related,
  #ms-help .ms-guide-next,
  #ms-help .ms-help-reset,
  #ms-help .ms-help-anchor{display:none !important}

  /* Keep the check-off badge readable on paper (mirrors the counter badge). */
  #ms-help .ms-step-check{background:none !important;box-shadow:none !important;color:#000 !important;border:2px solid #000}
  #ms-help .ms-step-check__done svg{stroke:#000}

  /* Full-width single column, plain black text on white. */
  #ms-help{background:#fff;color:#000}
  #ms-help .ms-help__layout{display:block;padding:0;gap:0}
  #ms-help .ms-help__article{min-width:0;width:100%}
  #ms-help .ms-help__body{font-size:12pt;color:#000}
  #ms-help .ms-help__heading{color:#000}
  #ms-help .ms-help__lede{color:#333}

  /* Keep step number badges visible without relying on printed backgrounds. */
  #ms-help .ms-help__body h2[id^="step-"]{page-break-after:avoid;break-after:avoid}
  #ms-help .ms-help__body h2[id^="step-"]::before{background:none !important;box-shadow:none !important;color:#000 !important;border:2px solid #000}

  /* Screenshots fit the page and never break across a page. */
  #ms-help .ms-help__body img{max-width:100%;height:auto;box-shadow:none;border:1px solid #ccc}
  #ms-help .ms-help__body figure{page-break-inside:avoid;break-inside:avoid}
}

/* Self-contained image lightbox ------------------------------------------- */
/* The overlay is appended to <body>, OUTSIDE #ms-help, so these selectors are
   scoped under .ms-lb rather than #ms-help. Built + driven by guides.js. */
body.ms-lb-lock{overflow:hidden}
/* touch-action:none: the open overlay is a dedicated gesture surface - without
   it a pinch that starts with one finger off the image is taken by the browser
   (page zoom) instead of reaching the touchmove pinch handler. */
.ms-lb{position:fixed;inset:0;z-index:100000;display:none;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px 24px;background:rgba(9,17,28,0.92);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);font-family:'Inter','InterFallback-ms',-apple-system,BlinkMacSystemFont,sans-serif;touch-action:none}
.ms-lb.ms-lb--open{display:flex}
.ms-lb *{box-sizing:border-box}
.ms-lb__frame{display:flex;align-items:center;justify-content:center;gap:14px;max-width:100%;max-height:calc(100vh - 150px)}
.ms-lb__stage{display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:100%;max-height:calc(100vh - 150px);border-radius:12px}
.ms-lb__img{display:block;width:auto;height:auto;max-width:min(1200px,calc(100vw - 170px));max-height:calc(100vh - 150px);border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,0.55);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.ms-lb__cap{margin:18px 0 0;max-width:min(1200px,calc(100vw - 170px));text-align:center;color:#e8eef5;font-size:14px;font-weight:600;line-height:1.45}
.ms-lb__nav,.ms-lb__close,.ms-lb__zbtn{border:0;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,0.55);transition:background .15s ease}
.ms-lb__nav:hover,.ms-lb__close:hover,.ms-lb__zbtn:hover{background:rgba(15,23,42,0.9)}
.ms-lb__nav:focus-visible,.ms-lb__close:focus-visible,.ms-lb__zbtn:focus-visible{outline:2px solid #03A9F4;outline-offset:2px}
.ms-lb__nav{flex:0 0 auto;width:46px;height:46px;border-radius:50%}
.ms-lb__nav svg{width:22px;height:22px}
.ms-lb__close{position:fixed;top:16px;right:14px;width:38px;height:38px;border-radius:50%}
.ms-lb__close svg{width:18px;height:18px}
.ms-lb__zoom{position:fixed;right:14px;top:74px;display:flex;flex-direction:column;gap:8px}
.ms-lb__zbtn{width:38px;height:38px;border-radius:50%}
.ms-lb__zbtn svg{width:18px;height:18px;stroke-width:2.2}
.ms-lb__nav svg,.ms-lb__close svg,.ms-lb__zbtn svg{display:block;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){
  .ms-lb{padding:56px 12px 16px}
  .ms-lb__frame{gap:6px}
  .ms-lb__nav{width:40px;height:40px}
  .ms-lb__img{max-width:calc(100vw - 100px)}
}
/* v1.8: on a touchscreen the chips ARE the magnifier (a tap on a button has no
   timing window to get wrong, unlike a double-tap), so they get a real finger
   target instead of a hover-sized one. */
@media (hover:none){
  .ms-lb__zoom{gap:10px;top:64px}
  .ms-lb__zbtn{width:52px;height:52px;background:rgba(15,23,42,0.72)}
  .ms-lb__zbtn svg{width:24px;height:24px}
  .ms-lb__close{width:46px;height:46px}
  .ms-lb__close svg{width:22px;height:22px}
}
@media (prefers-reduced-motion: reduce){
  .ms-lb__img{transition:none !important}
}