/* ==========================================================================
   Free Email Spoofing Test - "Toybox Daylight", after the Free Cyber Security Games pages
   Shared by Views/Public/SupplyChain.cshtml (the tool), SupplyChainResult.cshtml (the report) and the
   _ReceiverSupplyChain partial the report loads. Both views link it in their FinalHeader section with a ?v=
   cache buster from StaticAssetVersion. Every class starts with es- (checked against Front BS4, Silicon BS5,
   hs-mega-menu, toastr and the 2026 chrome: none of them use one). Tokens live on .es-root, not :root.
   The visual language (ink outlines, drop shadows, Fredoka, the palette) is copied from
   assets/css/cyber-security-games.css rather than shared, so the two pages can change independently.
   Toned down on 27 September 2026 to match the SAT price comparison (assets/css/sat-price-comparison.css): no
   illustrations, cartoon logo words, starbursts, sparkles, tilts, pop or wobble animations, or overshooting
   easing; lighter drop shadows.
   ========================================================================== */
/* Arial Bold scaled to Fredoka's metrics while the web font loads (both views preload the Latin woff2) */
@font-face { font-family: 'Fredoka Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial'); font-weight: 500 700; size-adjust: 94%; ascent-override: 103.5%; descent-override: 25%; line-gap-override: 0%; }
.es-root {
  --es-ink: #2F2A4F;
  --es-ink-2: #433D69;
  --es-muted: #5B5680;
  --es-line: rgba(47, 42, 79, .14);
  --es-cream: #FFF6E6;
  --es-sky-0: #F5FAFF;
  --es-sky-1: #EAF6FF;
  --es-sky-2: #CFEAFF;
  --es-sky: #52B4FF;
  --es-coral: #FF7A5C;
  --es-green: #3FCB7F;
  --es-yellow: #FFC94D;
  --es-teal: #36CBB1;
  --es-pink: #FF7A8A;
  --es-violet: #8C7CF0;
  --es-night: #27225E;
  --es-deep: #0F0C2C;
  --es-link: #3B33B5;
  /* Severities: text on each background holds 4.5:1 or better */
  --es-sev-very-high: #7E1D49;
  --es-sev-high: #FF6B6B;
  --es-sev-medium: #FFC94D;
  --es-sev-low: #52B4FF;
  --es-sev-mitigated: #3FCB7F;
  --es-sev-unknown: #D9E1EE;
  --es-r: 24px;
  --es-drop: 0 5px 0 var(--es-ink);
  --es-drop-lg: 0 8px 0 var(--es-ink);
  --es-display: 'Fredoka', 'Fredoka Fallback', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --es-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --es-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
  position: relative;
  font-family: var(--es-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--es-ink);
  background: var(--es-sky-1);
  overflow-x: clip;
}
.es-root *, .es-root *::before, .es-root *::after { box-sizing: border-box; }
/* Front's theme.min.css sets svg { margin-bottom: -8px } on every SVG, which drops centred icons 4px low */
.es-root svg { margin-bottom: 0; }
/* Element resets sit in :where(), so they weigh what the themes' element rules weigh and win on source order,
   while every es- class rule still beats them without !important */
:where(.es-root) h1, :where(.es-root) h2, :where(.es-root) h3, :where(.es-root) h4 { font-family: var(--es-display); font-weight: 700; color: var(--es-ink); margin: 0; letter-spacing: 0; line-height: 1.12; }
:where(.es-root) p { margin: 0 0 1em; }
:where(.es-root) ul, :where(.es-root) ol { margin: 0; padding: 0; list-style: none; }
:where(.es-root) dl, :where(.es-root) dd { margin: 0; }
:where(.es-root) img { max-width: 100%; }
:where(.es-root) table { border-collapse: collapse; }
:where(.es-root) a:not([class]) { color: var(--es-link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
:where(.es-root) a:not([class]):hover { color: var(--es-ink); }
:where(.es-root) button { font-family: inherit; }
:where(.es-root) code { font-family: var(--es-mono); }
.es-root :focus-visible { outline: 3px solid var(--es-ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--es-yellow); }
.es-root .es-team__panel :focus-visible, .es-root .es-crumbs :focus-visible, .es-root .es-rhero :focus-visible { outline: 3px solid #fff; outline-offset: 4px; box-shadow: none; }
.es-root .es-team__panel .es-btn:focus-visible, .es-root .es-rhero .es-btn:focus-visible { box-shadow: 0 5px 0 var(--es-deep); }
.es-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.es-root [hidden] { display: none !important; }

/* Container: the box of the site header's Silicon .container, so content lines up with the logo */
.es-wrap { width: 100%; margin: 0 auto; padding: 0 16px; }
@media (min-width: 500px) { .es-wrap { max-width: 97%; padding: 0 12px; } }
@media (min-width: 768px) { .es-wrap { max-width: 95%; } }
@media (min-width: 1400px) { .es-wrap { max-width: 1320px; } }

.es-section { position: relative; padding: 72px 0; scroll-margin-top: 76px; }
@media (min-width: 992px) { .es-section { padding: 104px 0; } }
.es-root [id] { scroll-margin-top: 96px; }
/* Focus moving up the page scrolls the control to the top edge, under the fixed 76px header: keep it clear */
.es-root :is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])) { scroll-margin-top: 96px; }

/* ---------- Type ---------- */
.es-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 6px 14px 5px; background: #fff; border: 2px solid var(--es-ink); border-radius: 999px; box-shadow: 0 3px 0 var(--es-ink); font: 600 .8125rem/1.2 var(--es-display); letter-spacing: .08em; text-transform: uppercase; color: var(--es-ink); }
.es-eyebrow i { font-size: 1.05rem; color: var(--es-coral); }
.es-root .es-h2 { font: 700 clamp(2rem, 1.35rem + 2.4vw, 3.25rem)/1.05 var(--es-display); color: var(--es-ink); margin: 0 0 14px; }
.es-root .es-h2, .es-lede, .es-qa__q { text-wrap: balance; }
.es-root p { text-wrap: pretty; }
.es-mark { position: relative; white-space: nowrap; z-index: 0; }
.es-mark::after { content: ""; position: absolute; left: -.06em; right: -.06em; bottom: .05em; height: .36em; background: var(--es-yellow); border-radius: .18em; z-index: -1; }
.es-lede { font-size: 1.125rem; line-height: 1.6; color: var(--es-ink-2); max-width: 46rem; }
.es-head { margin-bottom: 36px; }
.es-head--center { text-align: center; }
.es-head--center .es-lede { margin-left: auto; margin-right: auto; }
.es-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.es-head--row .es-lede { margin-bottom: 0; }

/* ---------- Buttons and links ---------- */
.es-btn { --b: var(--es-yellow); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 52px; padding: .65em 1.35em .6em; border: 3px solid var(--es-ink); border-radius: 999px; background-color: var(--b); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 58%); color: var(--es-ink); font: 700 1.125rem/1 var(--es-display); letter-spacing: .01em; text-decoration: none; white-space: nowrap; box-shadow: 0 5px 0 var(--es-ink); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.es-btn i { font-size: 1.3em; line-height: 0; }
.es-btn:hover, .es-btn:focus { color: var(--es-ink); text-decoration: none; }
.es-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--es-ink); }
.es-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--es-ink); }
.es-btn[disabled], .es-btn[aria-disabled="true"] { cursor: progress; transform: none; box-shadow: 0 5px 0 var(--es-ink); }
.es-btn--green { --b: var(--es-green); }
.es-btn--white { --b: #fff; background-image: none; }
.es-btn--lg { min-height: 58px; font-size: 1.25rem; padding: .7em 1.5em .65em; }
.es-btn--sm { min-height: 42px; font-size: 1rem; padding: .5em 1.05em .45em; box-shadow: 0 4px 0 var(--es-ink); }
.es-arrow { display: inline-flex; align-items: center; gap: 4px; font: 600 1.0625rem/1.2 var(--es-display); color: var(--es-ink); text-decoration: none; border-bottom: 3px solid var(--es-yellow); padding-bottom: 2px; }
.es-arrow:hover, .es-arrow:focus { color: var(--es-ink); text-decoration: none; border-bottom-color: var(--es-coral); }
.es-arrow i { transition: transform .2s ease; }
.es-arrow:hover i:last-child { transform: translateX(3px); }
.es-linkbtn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 6px 4px; font: 600 .9375rem/1.2 var(--es-display); color: var(--es-ink-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; cursor: pointer; }
.es-linkbtn:hover { color: var(--es-ink); }

/* ---------- Chips and pills ---------- */
.es-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 4px; border: 2px solid var(--es-ink); border-radius: 999px; background: #fff; font: 600 .875rem/1.2 var(--es-display); color: var(--es-ink); white-space: nowrap; }
.es-chip i { font-size: 1.05rem; }
.es-chip--yellow { background: var(--es-yellow); }
a.es-chip { text-decoration: none; transition: transform .15s ease, background-color .2s ease; }
a.es-chip:hover { color: var(--es-ink); background: var(--es-yellow); transform: translateY(-2px); }
.es-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.es-sev { --s: var(--es-sev-unknown); display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 2px; border: 2px solid var(--es-ink); border-radius: 999px; background: var(--s); font: 700 .8125rem/1.25 var(--es-display); letter-spacing: .02em; color: var(--es-ink); white-space: nowrap; text-decoration: none; }
.es-sev i { font-size: 1rem; }
a.es-sev:hover, a.es-sev:focus { color: var(--es-ink); text-decoration: underline; text-underline-offset: 3px; }
.es-sev--very-high { --s: var(--es-sev-very-high); color: #fff; }
a.es-sev--very-high:hover, a.es-sev--very-high:focus { color: #fff; }
.es-sev--high { --s: var(--es-sev-high); }
.es-sev--medium { --s: var(--es-sev-medium); }
.es-sev--low { --s: var(--es-sev-low); }
.es-sev--mitigated { --s: var(--es-sev-mitigated); }
.es-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 1px; border-radius: 999px; border: 2px solid var(--es-ink); font: 700 .8125rem/1.3 var(--es-display); white-space: nowrap; }
.es-status i { font-size: .95rem; }
.es-status--clean { background: #DDF7E8; }
.es-status--listed { background: #FFE0DC; }
.es-status--unknown { background: #fff; border-style: dashed; color: var(--es-muted); }

/* ==========================================================================
   TOOL PAGE - a compact dark header that fades into the page's sky, with the scan card under it: the layout of
   the SAT price comparison (assets/css/sat-price-comparison.css), so the free tools read as one family
   ========================================================================== */
/* The stops are percentages, not the price comparison's pixels: this header is shorter than that one, and the fade must
   reach the next section's sky exactly at the bottom edge */
.es-hero { position: relative; padding: 100px 0 72px; color: #fff; background:
    radial-gradient(ellipse 300px 70px at 12% 24%, rgba(255, 255, 255, .14), transparent 70%),
    radial-gradient(ellipse 380px 90px at 88% 16%, rgba(255, 255, 255, .12), transparent 70%),
    linear-gradient(180deg, #211B58 0%, #2D2981 14%, #3F50C2 34%, #5B92EC 56%, #98CEFF 78%, var(--es-sky-1) 100%); }
@media (min-width: 992px) { .es-hero { padding: 104px 0 88px; } }
.es-hero__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.es-hero__copy { flex: 1 1 560px; max-width: 800px; }
/* The title (H1): the CanIBeSpoofed tag, then white words with the key phrase on a flat yellow card. It reads
   "CanIBeSpoofed: Free email spoofing test", as the stroked logo it replaced did. */
.es-root .es-hero__title { margin: 0 0 14px; font: 700 clamp(2.15rem, 1.45rem + 2.6vw, 3.5rem)/1.08 var(--es-display); color: #fff; text-wrap: balance; }
.es-hero__tag { display: flex; width: fit-content; align-items: center; gap: 6px; margin: 0 0 14px; padding: 5px 13px 4px; background: #fff; border: 2px solid var(--es-ink); border-radius: 999px; box-shadow: 0 3px 0 var(--es-ink); font: 600 .8125rem/1.2 var(--es-display); letter-spacing: .08em; text-transform: uppercase; color: var(--es-ink); }
.es-hero__tag i { font-size: 1.05rem; color: var(--es-coral); }
.es-hero__hl { display: inline-block; max-width: 100%; margin-top: .1em; padding: 0 .24em .05em; border: 3px solid var(--es-ink); border-radius: .26em; background: var(--es-yellow); box-shadow: 0 5px 0 var(--es-deep); color: var(--es-ink); }
.es-hero__lede { margin: 0; max-width: 44rem; font-size: 1.125rem; line-height: 1.6; color: #E9E7FA; }
.es-hero__lede strong { color: #fff; }
.es-hero__chips { flex: 0 1 auto; }
.es-hero__chips .es-chip { box-shadow: 0 3px 0 var(--es-ink); }
@media (min-width: 1200px) { .es-hero__chips { flex-direction: column; align-items: flex-end; } }

/* The scan card: the form, and what the report will show */
.es-scancard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin: 30px 0 0; overflow: hidden; background: #fff; border: 3px solid var(--es-ink); border-radius: 28px; box-shadow: var(--es-drop-lg), 0 30px 60px -24px rgba(33, 28, 90, .4); color: var(--es-ink); }
@media (min-width: 992px) { .es-scancard { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.es-scancard__form { display: flex; flex-direction: column; justify-content: center; padding: 24px 18px; }
@media (min-width: 768px) { .es-scancard__form { padding: 30px 32px; } }
.es-scancard .es-scan__label { margin-bottom: 12px; font: 700 1.125rem/1.25 var(--es-display); }
.es-scancard__side { padding: 22px 18px 24px; background: var(--es-sky-0); border-top: 3px solid var(--es-ink); }
@media (min-width: 768px) { .es-scancard__side { padding: 26px 32px 28px; } }
@media (min-width: 992px) { .es-scancard__side { padding: 30px 32px; border-top: 0; border-left: 3px solid var(--es-ink); } }
.es-root .es-scancard__title { margin: 0 0 14px; font: 700 1.125rem/1.25 var(--es-display); color: var(--es-ink); }
.es-scancard__side .es-ticks { margin-bottom: 18px; }
.es-scancard__side .es-arrow { font-size: 1rem; }

/* ---------- The scan form (the tool page's scan card, the report's header and the page foot) ---------- */
.es-scan { margin: 0; }
.es-scan__label { display: block; margin: 0 0 8px; font: 600 1rem/1.2 var(--es-display); color: var(--es-ink); }
.es-scan__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.es-scan__field { position: relative; flex: 1 1 240px; min-width: 0; display: flex; align-items: center; }
.es-scan__field > i { position: absolute; left: 16px; top: 50%; margin-top: -.6em; font-size: 1.3rem; line-height: 1.2; color: var(--es-muted); pointer-events: none; }
.es-root .es-scan__input { display: block; width: 100%; min-height: 58px; margin: 0; padding: 12px 16px 12px 46px; border: 3px solid var(--es-ink); border-radius: 18px; background: var(--es-sky-0); box-shadow: inset 0 3px 0 rgba(47, 42, 79, .08); font: 600 1.125rem/1.2 var(--es-body); color: var(--es-ink); -webkit-appearance: none; appearance: none; transition: background-color .2s ease, box-shadow .2s ease; }
.es-root .es-scan__input::placeholder { color: #8A85A8; font-weight: 500; opacity: 1; }
.es-root .es-scan__input:hover { background: #fff; }
.es-root .es-scan__input:focus { background: #fff; outline: none; box-shadow: 0 0 0 4px var(--es-yellow); }
.es-root .es-scan__input[aria-invalid="true"] { border-color: #C0392B; box-shadow: 0 0 0 4px rgba(255, 107, 107, .35); }
.es-scan__row .es-btn { flex: 0 0 auto; min-height: 58px; }
@media (max-width: 519.98px) { .es-scan__row .es-btn { flex: 1 1 100%; } }
.es-scan__error { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-weight: 700; font-size: .9375rem; color: #A1242F; }
.es-scan__hint { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; font-size: .875rem; line-height: 1.45; color: var(--es-muted); }
/* Icons beside text that can wrap sit at flex-start, so each gets exactly one text line of height to centre in */
.es-scan__hint i { flex: none; font-size: 1.05rem; line-height: calc(.875rem * 1.45); color: var(--es-green); }
/* A flex row like .es-btn itself: as plain inline content the icon sat on the text's baseline, 4-6px above centre */
.es-scan__go { display: inline-flex; align-items: center; gap: .45em; }
.es-scan__busy { display: none; }
.es-scan.is-busy .es-scan__go { display: none; }
.es-scan.is-busy .es-scan__busy { display: inline-flex; align-items: center; gap: .45em; }
.es-spinner { display: inline-block; width: 1.05em; height: 1.05em; border: 3px solid rgba(47, 42, 79, .25); border-top-color: var(--es-ink); border-radius: 50%; animation: es-spin .8s linear infinite; }
@keyframes es-spin { to { transform: rotate(360deg); } }
/* While the POST runs (a scan takes a few seconds): the steps the server is working through */
.es-steps-live { margin: 14px 0 0; padding: 12px 14px; border: 2px dashed rgba(47, 42, 79, .3); border-radius: 16px; background: var(--es-sky-0); }
.es-steps-live li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: .9375rem; font-weight: 600; color: var(--es-muted); }
.es-steps-live li i { font-size: 1.15rem; }
.es-steps-live li .bx-check-circle { display: none; color: #1E8C52; }
.es-steps-live li.is-done { color: var(--es-ink); }
.es-steps-live li.is-done .bx-check-circle { display: inline; }
.es-steps-live li.is-done .es-spinner, .es-steps-live li:not(.is-active):not(.is-done) .es-spinner { display: none; }
.es-steps-live li:not(.is-active):not(.is-done)::before { content: ""; display: inline-block; width: 1.05em; height: 1.05em; border: 2px dashed rgba(47, 42, 79, .3); border-radius: 50%; }
/* The compact version in the report's dark header */
.es-scan--compact .es-scan__label { color: #fff; font-size: .9375rem; }
.es-root .es-scan--compact .es-scan__input { min-height: 50px; font-size: 1rem; border-radius: 16px; background: #fff; }
.es-scan--compact .es-btn { min-height: 50px; font-size: 1.0625rem; box-shadow: 0 5px 0 var(--es-deep); border-color: var(--es-deep); }
.es-scan--compact .es-scan__error { color: #FFD0D0; }

/* ==========================================================================
   TOOL PAGE - what the test checks, how it works, severities
   ========================================================================== */
.es-checks { padding-top: 40px; background:
    radial-gradient(ellipse 340px 90px at 8% 18%, rgba(255, 255, 255, .9), transparent 70%),
    radial-gradient(ellipse 420px 110px at 92% 62%, rgba(255, 255, 255, .85), transparent 70%),
    linear-gradient(180deg, var(--es-sky-1) 0%, #DDF0FF 100%); }
@media (min-width: 992px) { .es-checks { padding-top: 56px; } }
.es-count { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 1rem/1.2 var(--es-display); color: var(--es-ink-2); }
.es-count b { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border: 2px solid var(--es-ink); border-radius: 999px; background: var(--es-green); color: var(--es-ink); font-weight: 700; box-shadow: 0 3px 0 var(--es-ink); }
/* The three checks, as icon cards (the price comparison's tool cards): the icon sits over the card's top edge, so
   the grid leaves room above each row */
.es-grid { display: grid; gap: 48px 28px; grid-template-columns: minmax(0, 1fr); padding-top: 22px; }
@media (min-width: 768px) and (max-width: 1199.98px) { .es-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .es-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .es-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; } }
.es-tile { --es-accent: var(--es-sky); position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px 22px 22px; background: #fff; border: 3px solid var(--es-ink); border-radius: var(--es-r); box-shadow: var(--es-drop); color: var(--es-ink); }
.es-tile__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: -48px 0 14px; border: 3px solid var(--es-ink); border-radius: 18px; background: var(--es-accent); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%); box-shadow: 0 4px 0 var(--es-ink); font-size: 1.75rem; color: var(--es-ink); }
.es-tile__kicker { margin: 0 0 4px; font: 700 .75rem/1.2 var(--es-display); letter-spacing: .08em; text-transform: uppercase; color: var(--es-muted); }
.es-root .es-tile__title { margin: 0 0 8px; font: 700 1.5rem/1.15 var(--es-display); color: var(--es-ink); }
.es-tile > p:not([class]) { margin: 0 0 12px; color: var(--es-ink-2); line-height: 1.55; }
.es-tile .es-arrow { margin-top: auto; align-self: flex-start; font-size: 1rem; }
.es-ticks { display: grid; gap: 7px; margin: 0 0 16px; }
.es-ticks li { display: flex; align-items: flex-start; gap: 9px; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--es-ink); }
.es-ticks i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -1px; border: 2px solid var(--es-ink); border-radius: 50%; background: var(--es-green); color: var(--es-ink); font-size: .95rem; }

/* The smaller extras under the tiles */
.es-extras { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 768px) { .es-extras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.es-extra { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 3px dashed rgba(47, 42, 79, .45); border-radius: 20px; background: rgba(255, 255, 255, .75); }
.es-extra > i { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid var(--es-ink); border-radius: 14px; background: var(--a, var(--es-sky)); box-shadow: 0 3px 0 var(--es-ink); font-size: 1.5rem; color: var(--es-ink); }
.es-extra h3 { font-size: 1.1rem; line-height: 1.25; margin: 2px 0 4px; }
.es-extra p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--es-ink-2); }

.es-how { background: #fff; }
.es-steps { position: relative; display: grid; gap: 22px; }
@media (min-width: 768px) { .es-steps { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
/* The dashed line joins the step icons: it starts 24px past a 72px icon and runs through its middle */
@media (min-width: 1200px) { .es-steps { grid-template-columns: repeat(4, 1fr); } .es-step:not(:last-child)::after { content: ""; position: absolute; left: 96px; right: -14px; top: 34px; border-top: 4px dashed rgba(47, 42, 79, .22); z-index: -1; } }
.es-step { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 0 0 4px; }
.es-step__node { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin: 0 0 18px; border: 3px solid var(--es-ink); border-radius: 22px; background: var(--node, var(--es-sky)); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%); box-shadow: 0 4px 0 var(--es-ink); font-size: 2rem; color: var(--es-ink); }
.es-step__num { position: absolute; top: -10px; right: -12px; display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid var(--es-ink); border-radius: 50%; background: #fff; font: 700 .9375rem/1 var(--es-display); }
.es-step h3 { font-size: 1.35rem; margin-bottom: 6px; }
.es-step p { margin: 0; color: var(--es-ink-2); }
@media (max-width: 767.98px) { .es-step { display: grid; grid-template-columns: 76px 1fr; gap: 0 16px; align-items: start; } .es-step__node { grid-row: span 2; margin: 0; } .es-step h3 { margin-top: 6px; } }

/* Severity legend */
.es-sevs-sec { background:
    radial-gradient(circle at 12% 20%, rgba(255, 201, 77, .28) 0 3px, transparent 4px) 0 0 / 46px 46px,
    linear-gradient(180deg, #FFF6E6 0%, #FFF1DA 100%); }
.es-sevs { display: grid; gap: 18px; }
@media (min-width: 640px) { .es-sevs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .es-sevs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } }
.es-sevcard { position: relative; display: flex; flex-direction: column; padding: 18px 18px 20px; background: #fff; border: 3px solid var(--es-ink); border-radius: 20px; box-shadow: 0 5px 0 var(--es-ink); }
.es-sevcard .es-sev { align-self: flex-start; margin-bottom: 10px; font-size: .875rem; }
.es-sevcard h3 { font-size: 1.15rem; line-height: 1.25; margin-bottom: 6px; }
.es-sevcard p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--es-ink-2); }
.es-sevs__note { margin: 26px 0 0; text-align: center; font-size: .9375rem; color: var(--es-muted); }

/* ---------- Details / summary (the deep dive and the FAQ) ---------- */
.es-qa-sec { background: var(--es-sky-1); }
.es-qa-layout { display: grid; gap: 28px; }
@media (min-width: 992px) { .es-qa-layout { grid-template-columns: 340px 1fr; gap: 56px; align-items: start; } .es-qa-intro { position: sticky; top: 110px; } .es-root .es-qa-intro .es-h2 { font-size: 2.6rem; } }
.es-qa-intro p:not([class]) { color: var(--es-ink-2); }
.es-qa-intro .es-arrow + .es-arrow { margin-left: 18px; }
.es-qa-list { display: grid; gap: 14px; }
.es-qa { background: #fff; border: 3px solid var(--es-ink); border-radius: 18px; box-shadow: 0 4px 0 var(--es-ink); scroll-margin-top: 110px; }
.es-qa[open] { box-shadow: 0 5px 0 var(--es-ink); }
.es-qa summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; border-radius: 15px; }
.es-qa summary::-webkit-details-marker { display: none; }
.es-qa summary::marker { content: ""; }
.es-qa__ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--es-ink); border-radius: 13px; background: var(--a, var(--es-sky)); font-size: 1.35rem; color: var(--es-ink); }
.es-root .es-qa__q { flex: 1; margin: 0; font: 600 1.125rem/1.35 var(--es-display); color: var(--es-ink); }
.es-qa__icon { flex: none; position: relative; width: 32px; height: 32px; border: 2px solid var(--es-ink); border-radius: 50%; background: var(--es-yellow); transition: background-color .2s ease; }
.es-qa__icon::before, .es-qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; margin: -1.5px 0 0 -7px; background: var(--es-ink); border-radius: 2px; }
/* The plus turns into a minus */
.es-qa__icon::after { transform: rotate(90deg); transition: transform .25s ease; }
.es-qa[open] .es-qa__icon { background: var(--es-green); }
.es-qa[open] .es-qa__icon::after { transform: rotate(0); }
.es-qa summary:hover .es-qa__icon { background: #FFD776; }
.es-qa[open] summary:hover .es-qa__icon { background: #6BD99C; }
.es-qa__a { padding: 0 18px 18px; color: var(--es-ink-2); }
.es-qa__a p:last-child { margin-bottom: 0; }
.es-qa__a ul { display: grid; gap: 6px; margin: 0 0 1em; }
.es-qa__a ul li { position: relative; padding-left: 20px; }
.es-qa__a ul li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--es-coral); border: 2px solid var(--es-ink); }

/* ---------- About CanIBeSpoofed + the two next activities ---------- */
.es-about { background: #fff; }
.es-about__layout { display: grid; gap: 36px; }
@media (min-width: 992px) { .es-about__layout { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; } }
.es-about__text p:not([class]) { font-size: 1.0625rem; color: var(--es-ink-2); }
.es-about__links { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 8px; }
.es-acts { display: grid; gap: 18px; }
.es-act { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding: 20px; background: var(--es-sky-0); border: 3px solid var(--es-ink); border-radius: 20px; box-shadow: 0 5px 0 var(--es-ink); }
.es-act__num { grid-row: span 3; display: grid; place-items: center; width: 52px; height: 52px; border: 3px solid var(--es-ink); border-radius: 16px; background: var(--a, var(--es-yellow)); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%); font: 700 1.5rem/1 var(--es-display); box-shadow: 0 3px 0 var(--es-ink); }
.es-act h3 { font-size: 1.25rem; line-height: 1.25; margin: 2px 0 4px; }
.es-act p { margin: 0 0 8px; color: var(--es-ink-2); }
.es-act .es-arrow { justify-self: start; font-size: .9375rem; }

/* ---------- Team call to action (tool page and report) ---------- */
.es-team { background: #fff; padding-top: 0; }
.es-team--sky { background: var(--es-sky-1); padding-top: 72px; }
.es-team__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 40px 24px; border: 3px solid var(--es-ink); border-radius: 32px; background: var(--es-night); background-image:
    radial-gradient(circle at 3% 4%, var(--es-yellow) 0 5px, transparent 6px),
    radial-gradient(circle at 97.5% 3%, var(--es-coral) 0 6px, transparent 7px),
    radial-gradient(circle at 46% 98.5%, var(--es-green) 0 5px, transparent 6px),
    radial-gradient(circle at 62% 3%, var(--es-sky) 0 4px, transparent 5px),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(140, 124, 240, .45), transparent 70%),
    radial-gradient(ellipse 50% 70% at 0 100%, rgba(82, 180, 255, .25), transparent 70%);
  box-shadow: var(--es-drop-lg); color: #fff; overflow: hidden; }
@media (min-width: 992px) { .es-team__panel { grid-template-columns: 1.1fr .9fr; align-items: center; padding: 56px; } }
.es-root .es-team__panel .es-h2 { color: #fff; }
.es-team__panel .es-eyebrow { background: var(--es-yellow); }
.es-team__text { color: #E4E1F7; font-size: 1.0625rem; }
.es-team__ticks { display: grid; gap: 10px; margin: 0 0 28px; }
@media (min-width: 576px) { .es-team__ticks { grid-template-columns: 1fr 1fr; } }
.es-team__ticks li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; color: #fff; line-height: 1.4; }
.es-team__ticks i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; background: var(--es-green); color: var(--es-ink); font-size: 1.1rem; }
.es-root .es-team__panel a:not([class]) { color: #fff; text-decoration-color: var(--es-yellow); }
.es-team__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.es-team__ctas .es-btn--white { box-shadow: 0 5px 0 var(--es-deep); border-color: var(--es-deep); }
@media (max-width: 399.98px) { .es-team__ctas .es-btn { white-space: normal; text-align: center; } }
.es-team__small { margin: 16px 0 0; font-size: .875rem; color: #C9C4EC; }
/* The panel's picture (Views/Public/_SpoofFixGraphic.cshtml): a spoofable domain turning into a protected one, drawn
   with the report's verdict colours rather than art. Decorative (aria-hidden). */
.es-team__art { display: grid; gap: 14px; width: 100%; max-width: 440px; margin: 0 auto; pointer-events: none; }
.es-fix { width: 86%; padding: 16px 18px; background: var(--fx-bg, #fff); color: var(--es-ink); border: 3px solid var(--es-deep); border-radius: 20px; box-shadow: 0 6px 0 var(--es-deep); }
.es-fix--before { --fx: var(--es-sev-high); --fx-bg: #FFE3DF; }
.es-fix--after { --fx: var(--es-green); --fx-bg: #DDF7E8; justify-self: end; }
.es-fix__label { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 10px; padding: 4px 11px 3px; border: 2px solid var(--es-ink); border-radius: 10px; background: var(--fx, var(--es-sky)); font: 700 .8125rem/1.2 var(--es-display); letter-spacing: .06em; text-transform: uppercase; color: var(--es-ink); }
.es-fix__label i { font-size: 1.1rem; }
.es-fix__domain { margin: 0 0 10px; font: 700 1.35rem/1.15 var(--es-display); color: var(--es-ink); }
.es-fix__records { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.es-fix__records code { padding: 2px 8px; border: 2px solid var(--es-ink); border-radius: 8px; background: #fff; font: 600 .8125rem/1.4 var(--es-mono); color: var(--es-ink); }
.es-team__sticker { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 6px; border: 3px solid var(--es-deep); border-radius: 14px; background: var(--es-yellow); box-shadow: 0 5px 0 var(--es-deep); font: 700 .9375rem/1.1 var(--es-display); color: var(--es-ink); white-space: nowrap; }

/* ==========================================================================
   REPORT - dark header (crumbs, title, rescan), verdict, panels
   ========================================================================== */
.es-rhero { position: relative; padding: 100px 0 150px; color: #fff; background:
    radial-gradient(ellipse 300px 70px at 12% 48%, rgba(255, 255, 255, .14), transparent 70%),
    radial-gradient(ellipse 380px 90px at 88% 36%, rgba(255, 255, 255, .12), transparent 70%),
    linear-gradient(180deg, #211B58 0, #2D2981 110px, #3F50C2 280px, #5B7FE0 420px); }
@media (min-width: 992px) { .es-rhero { padding-top: 104px; } }
.es-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0 0 12px; font-size: .8125rem; font-weight: 600; color: rgba(255, 255, 255, .9); }
.es-crumbs li { display: inline-flex; align-items: center; }
.es-crumbs li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 9px 0 7px; border-top: 2px solid rgba(255, 255, 255, .7); border-right: 2px solid rgba(255, 255, 255, .7); transform: rotate(45deg); }
.es-crumbs a { display: inline-flex; align-items: center; color: #fff; text-decoration: none; border-bottom: 2px solid rgba(255, 255, 255, .35); }
.es-crumbs a:hover { color: #fff; border-bottom-color: var(--es-yellow); }
.es-crumbs i { margin-right: 4px; font-size: .95rem; }
.es-rhead { display: grid; gap: 22px 40px; align-items: end; }
@media (min-width: 992px) { .es-rhead { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); } }
.es-rtitle { margin: 0; font: 700 clamp(2rem, 1.4rem + 2vw, 3.1rem)/1.08 var(--es-display); color: #fff; }
.es-root .es-rtitle { color: #fff; font-family: var(--es-display); }
.es-root .es-rtitle--long { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.25rem); line-height: 1.15; }
/* The same chip as the tool page's CanIBeSpoofed tag (.es-hero__tag) */
.es-rtitle__eyebrow { display: table; margin: 0 0 14px; padding: 5px 13px 4px; background: #fff; border: 2px solid var(--es-ink); border-radius: 999px; box-shadow: 0 3px 0 var(--es-ink); font: 600 .8125rem/1.2 var(--es-display); letter-spacing: .08em; text-transform: uppercase; color: var(--es-ink); }
.es-rtitle__domain { display: inline-block; max-width: 100%; margin: 0 .08em .3em; padding: 0 .28em .06em; border: 3px solid var(--es-ink); border-radius: .32em; background: var(--es-yellow); box-shadow: 0 5px 0 var(--es-ink); color: var(--es-ink); overflow-wrap: anywhere; }
.es-rhero__chips { margin-top: 18px; }
.es-rhero__chips .es-chip { box-shadow: 0 3px 0 var(--es-ink); }
/* Beside the title from 992px; narrower screens get a chip that jumps to the form at the foot of the report,
   so the verdict stays in the first screen */
.es-rescan { display: none; }
@media (min-width: 992px) { .es-rescan { display: block; } .es-root .es-only-narrow { display: none; } }
.es-rescan { padding: 16px 18px 18px; border: 2px solid rgba(255, 255, 255, .28); border-radius: 22px; background: rgba(15, 12, 44, .28); backdrop-filter: blur(4px); }

.es-report { position: relative; margin-top: -118px; padding-bottom: 80px; }
.es-verdict { --v: #DDF7E8; --va: var(--es-green); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: #fff; border: 4px solid var(--es-ink); border-radius: 30px; box-shadow: 0 8px 0 var(--es-ink), 0 30px 60px -20px rgba(33, 28, 90, .45); }
.es-verdict--spoofable { --v: #FFE3DF; --va: var(--es-sev-high); }
.es-verdict--at-risk { --v: #FFF1C2; --va: var(--es-yellow); }
.es-verdict--protected { --v: #DDF7E8; --va: var(--es-green); }
.es-verdict--inconclusive { --v: var(--es-sky-1); --va: var(--es-sky); }
.es-verdict--error { --v: #EEEAFD; --va: #B3A7F6; }
/* The verdict beside a summary column (the issue tally and the report's sections), as the price comparison pairs its
   controls and results: no art */
@media (min-width: 992px) { .es-verdict { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); } }
.es-verdict__body { position: relative; padding: 28px 24px 26px; background: var(--v); }
@media (min-width: 768px) { .es-verdict__body { padding: 36px 40px 34px; } }
.es-verdict__label { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 7px 14px 6px; border: 3px solid var(--es-ink); border-radius: 14px; background: var(--va); box-shadow: 0 4px 0 var(--es-ink); font: 700 1rem/1.1 var(--es-display); letter-spacing: .06em; text-transform: uppercase; color: var(--es-ink); }
.es-verdict__label i { font-size: 1.35rem; }
.es-root .es-verdict__title { margin: 0 0 12px; font: 700 clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)/1.08 var(--es-display); color: var(--es-ink); overflow-wrap: anywhere; }
.es-root .es-verdict--long .es-verdict__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.95rem); }
.es-verdict__summary { margin: 0 0 22px; font-size: 1.0625rem; line-height: 1.55; color: var(--es-ink-2); max-width: 40rem; }
.es-verdict__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.es-verdict__aside { padding: 22px 24px 24px; background: #fff; border-top: 4px solid var(--es-ink); }
@media (min-width: 768px) { .es-verdict__aside { padding: 28px 40px 30px; } }
@media (min-width: 992px) { .es-verdict__aside { padding: 34px 30px; border-top: 0; border-left: 4px solid var(--es-ink); } }
.es-verdict__aside-title { margin: 0 0 10px; font: 700 .75rem/1.2 var(--es-display); letter-spacing: .08em; text-transform: uppercase; color: var(--es-muted); }
.es-tally { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.es-tally .es-sev { font-size: .875rem; padding: 4px 11px 3px; box-shadow: 0 3px 0 var(--es-ink); }
.es-tally .es-sev b { font-size: 1rem; }

/* "In this report": the jump links, a row each in the verdict's summary column (two or more across when it sits under
   the verdict on narrower screens) */
.es-jump { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; }
@media (min-width: 992px) { .es-jump { grid-template-columns: minmax(0, 1fr); } }
.es-jump .es-chip { box-shadow: 0 3px 0 var(--es-ink); }
.es-jump .es-chip b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: auto; padding: 0 6px; border-radius: 999px; background: var(--es-ink); color: #fff; font-size: .75rem; }

.es-cols { display: grid; gap: 28px; margin-top: 36px; }
@media (min-width: 1200px) { .es-cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.es-panel { position: relative; min-width: 0; margin-top: 36px; background: #fff; border: 3px solid var(--es-ink); border-radius: var(--es-r); box-shadow: var(--es-drop); }
.es-cols > .es-panel { margin-top: 0; }
.es-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 20px 22px 16px; border-bottom: 2px solid var(--es-line); }
.es-panel__ico { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border: 3px solid var(--es-ink); border-radius: 16px; background: var(--a, var(--es-sky)); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%); box-shadow: 0 3px 0 var(--es-ink); font-size: 1.6rem; color: var(--es-ink); }
.es-panel__titles { flex: 1 1 220px; min-width: 0; }
.es-root .es-panel__title { margin: 0; font: 700 1.5rem/1.15 var(--es-display); color: var(--es-ink); }
.es-panel__sub { margin: 3px 0 0; font-size: .9375rem; color: var(--es-muted); }
.es-panel__body { padding: 20px 22px 22px; }
.es-note { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--es-sky-0); border: 2px dashed rgba(47, 42, 79, .25); font-size: .875rem; line-height: 1.45; color: var(--es-ink-2); }
.es-note i { flex: none; font-size: 1.15rem; line-height: calc(.875rem * 1.45); color: var(--es-violet); }

/* ---------- Issues ---------- */
.es-issues { display: grid; gap: 14px; counter-reset: es-issue; }
.es-issue { --s: var(--es-sev-unknown); position: relative; padding: 16px 18px 16px 24px; border: 3px solid var(--es-ink); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--es-ink); overflow: hidden; }
.es-issue::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--s); border-right: 3px solid var(--es-ink); }
.es-issue--very-high { --s: var(--es-sev-very-high); }
.es-issue--high { --s: var(--es-sev-high); }
.es-issue--medium { --s: var(--es-sev-medium); }
.es-issue--low { --s: var(--es-sev-low); }
.es-issue--mitigated { --s: var(--es-sev-mitigated); background: #FBFFFC; }
.es-issue__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; padding-left: 4px; }
.es-issue__code { font: 600 .8125rem/1.2 var(--es-display); letter-spacing: .06em; text-transform: uppercase; color: var(--es-muted); }
.es-root .es-issue__title { margin: 0 0 6px; padding-left: 4px; font: 700 1.2rem/1.25 var(--es-display); color: var(--es-ink); }
.es-issue__detail { margin: 0 0 10px; padding-left: 4px; font-size: .9688rem; line-height: 1.55; color: var(--es-ink-2); overflow-wrap: anywhere; }
.es-issue__fix { padding-left: 4px; }
.es-issue__fix .es-arrow { font-size: .9375rem; }
.es-empty { display: grid; justify-items: center; gap: 8px; padding: 26px 18px 24px; text-align: center; border: 3px dashed rgba(47, 42, 79, .35); border-radius: 20px; background: #F4FFF8; }
.es-empty i { display: grid; place-items: center; width: 64px; height: 64px; border: 3px solid var(--es-ink); border-radius: 20px; background: var(--es-green); box-shadow: 0 4px 0 var(--es-ink); font-size: 2rem; }
.es-empty h3 { font-size: 1.4rem; }
.es-empty p { margin: 0; color: var(--es-ink-2); max-width: 30rem; }
.es-empty--error { background: #FFF4F2; }
.es-empty--error i { background: var(--es-sev-high); }

/* ---------- Records ---------- */
.es-records { display: grid; gap: 18px; }
.es-record__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 8px; }
.es-root .es-record__name { margin: 0; font: 700 1.125rem/1.2 var(--es-display); color: var(--es-ink); }
.es-record__top .es-status { font-size: .75rem; }
.es-copy { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px 4px; border: 2px solid var(--es-ink); border-radius: 999px; background: #fff; font: 600 .8125rem/1.2 var(--es-display); color: var(--es-ink); cursor: pointer; box-shadow: 0 2px 0 var(--es-ink); }
.es-copy:hover { background: var(--es-yellow); }
.es-copy.is-copied { background: var(--es-green); }
.es-code { display: block; margin: 0; padding: 14px 14px 12px; border: 3px solid var(--es-ink); border-radius: 16px; background: #1D1946; color: #E9E6FF; font: 500 .9063rem/1.75 var(--es-mono); white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.es-tok { display: inline; padding: 1px 5px; margin: 0 1px; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.es-tok--version { color: #B7B1E6; }
.es-tok--good { background: rgba(63, 203, 127, .28); color: #9CF2C2; box-shadow: inset 0 0 0 1.5px rgba(63, 203, 127, .8); }
.es-tok--warn { background: rgba(255, 201, 77, .22); color: #FFE08A; box-shadow: inset 0 0 0 1.5px rgba(255, 201, 77, .75); }
.es-tok--bad { background: rgba(255, 107, 107, .25); color: #FFB8B8; box-shadow: inset 0 0 0 1.5px rgba(255, 107, 107, .85); }
.es-tok--include { color: #9FD6FF; }
.es-tok--ip { color: #D8C9FF; }
.es-tok--mech { color: #8FF0DD; }
.es-tok--tag { color: #E9E6FF; }
.es-code .es-tok--good, .es-code .es-tok--warn, .es-code .es-tok--bad, .es-code .es-tok--version { white-space: nowrap; }
/* The qualifier and mechanism name ("-include:", "?mx") stay together; the value after them can still wrap */
.es-tok__lead { white-space: nowrap; }
.es-missing { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; border: 3px dashed #C0392B; border-radius: 16px; background: #FFF4F2; font-weight: 600; color: #7A1F28; }
.es-missing i { flex: none; font-size: 1.3rem; line-height: 1.6rem; }
.es-missing--neutral { border-color: rgba(47, 42, 79, .35); background: var(--es-sky-0); color: var(--es-ink-2); }
.es-legend { display: grid; gap: 6px; margin: 10px 0 0; }
.es-legend li { display: flex; align-items: baseline; gap: 8px; font-size: .875rem; line-height: 1.4; color: var(--es-ink-2); }
.es-legend code { flex: none; padding: 1px 7px; border-radius: 6px; border: 2px solid var(--es-ink); background: var(--es-sky-0); font-size: .8125rem; font-weight: 600; color: var(--es-ink); }
.es-legend code.es-tok-key--good { background: #DDF7E8; }
.es-legend code.es-tok-key--warn { background: #FFF1C2; }
.es-legend code.es-tok-key--bad { background: #FFE0DC; }

/* ---------- Mail receivers (the AJAX partial) ---------- */
.es-rx-loading { display: grid; justify-items: center; gap: 10px; padding: 30px 16px; text-align: center; color: var(--es-ink-2); }
.es-rx-loading .es-spinner { width: 42px; height: 42px; border-width: 5px; }
.es-rx-loading p { margin: 0; font: 600 1.0625rem/1.4 var(--es-display); color: var(--es-ink); }
.es-rx-loading small { font-size: .875rem; color: var(--es-muted); }
.es-rx__status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; padding: 14px 16px; border: 3px solid var(--es-ink); border-radius: 18px; background: var(--rx, #DDF7E8); box-shadow: 0 4px 0 var(--es-ink); }
.es-rx__status--warn { --rx: #FFF1C2; }
.es-rx__status--bad { --rx: #FFE3DF; }
.es-rx__status--none { --rx: var(--es-sky-0); }
.es-rx__status > i { display: grid; place-items: center; width: 44px; height: 44px; border: 3px solid var(--es-ink); border-radius: 14px; background: #fff; font-size: 1.5rem; }
.es-rx__status > div { flex: 1 1 240px; min-width: 0; }
.es-rx__status strong { display: block; font: 700 1.15rem/1.25 var(--es-display); color: var(--es-ink); }
.es-rx__status span { display: block; font-size: .9375rem; color: var(--es-ink-2); }
.es-rx__grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .es-rx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .es-rx__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.es-rx__cell { min-width: 0; padding: 14px 16px 16px; border: 3px solid var(--es-ink); border-radius: 18px; background: var(--es-sky-0); }
.es-rx__cell dt { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font: 600 .8125rem/1.2 var(--es-display); letter-spacing: .08em; text-transform: uppercase; color: var(--es-muted); }
.es-rx__cell dt i { font-size: 1.15rem; color: var(--es-coral); }
.es-rx__cell dd { margin: 0; font: 700 1.0625rem/1.35 var(--es-display); color: var(--es-ink); overflow-wrap: anywhere; }
.es-rx__cell dd ul { display: grid; gap: 4px; }
.es-rx__cell dd.es-rx__mx { font: 600 .875rem/1.5 var(--es-mono); }
.es-rx__cell .es-rx__unknown { color: var(--es-muted); font-weight: 500; }
.es-rx__findings { display: grid; gap: 10px; margin: 18px 0 0; }
.es-rx__findings li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 2px solid var(--es-ink); border-radius: 14px; background: #FFFBEF; font-size: .9375rem; line-height: 1.5; color: var(--es-ink-2); overflow-wrap: anywhere; }
.es-rx__findings li > i { flex: none; font-size: 1.3rem; color: #B4570F; }
.es-rx__findings li > span { min-width: 0; }
/* Long direct-delivery host names must wrap (Bootstrap's code { word-wrap: break-word } alone won't let them shrink) */
.es-rx__findings code { font-size: .875rem; padding: 0 4px; border-radius: 4px; background: #fff; border: 1px solid var(--es-line); color: var(--es-ink); overflow-wrap: anywhere; word-break: break-word; }
.es-rx-error { display: grid; justify-items: center; gap: 10px; padding: 24px 16px; text-align: center; }
.es-rx-error p { margin: 0; font-weight: 600; color: var(--es-ink-2); }

/* ---------- Mail senders ---------- */
.es-stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 20px; }
@media (min-width: 768px) { .es-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.es-stat { position: relative; padding: 14px 14px 12px; border: 3px solid var(--es-ink); border-radius: 18px; background: var(--c, var(--es-sky-0)); box-shadow: 0 4px 0 var(--es-ink); }
.es-stat b { display: block; font: 700 clamp(1.7rem, 1.4rem + 1vw, 2.3rem)/1 var(--es-display); color: var(--es-ink); font-variant-numeric: tabular-nums; }
.es-stat span { display: block; margin-top: 4px; font-size: .875rem; font-weight: 700; line-height: 1.3; color: var(--es-ink-2); }
.es-stat i { position: absolute; top: 10px; right: 12px; font-size: 1.4rem; color: rgba(47, 42, 79, .45); }
.es-stat--warn { --c: #FFE3DF; }
.es-stat--ok { --c: #DDF7E8; }
.es-map { position: relative; height: 380px; margin: 0 0 22px; border: 3px solid var(--es-ink); border-radius: 20px; overflow: hidden; background: #D8EEFF; }
@media (min-width: 992px) { .es-map { height: 440px; } }
.es-map__canvas { position: absolute; inset: 0; }
.es-map__placeholder { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; padding: 16px; text-align: center; background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .7) 0 2px, transparent 3px) 0 0 / 28px 28px,
    linear-gradient(180deg, #D8EEFF, #C3E3FF); color: var(--es-ink-2); font-weight: 600; }
.es-map__placeholder i { font-size: 2.6rem; color: var(--es-ink); }
.es-map__info { max-width: 240px; font: 600 .875rem/1.4 var(--es-body); color: #2F2A4F; }
.es-map__info b { display: block; font-family: var(--es-display); font-size: 1rem; }
.es-tree__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; }
.es-root .es-tree__title { margin: 0; font: 700 1.25rem/1.2 var(--es-display); }
.es-tree { display: grid; gap: 10px; }
.es-group { min-width: 0; margin-left: calc(var(--d, 0) * 18px); border: 3px solid var(--es-ink); border-radius: 16px; background: #fff; box-shadow: 0 3px 0 var(--es-ink); }
@media (max-width: 575.98px) { .es-group { margin-left: calc(min(var(--d, 0), 3) * 10px); } }
.es-group--listed { background: #FFF7F5; }
.es-group > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 11px 14px; cursor: pointer; list-style: none; border-radius: 13px; }
.es-group > summary::-webkit-details-marker { display: none; }
.es-group > summary::marker { content: ""; }
.es-group > summary:hover { background: var(--es-sky-0); }
.es-group__caret { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--es-ink); border-radius: 50%; background: var(--es-yellow); font-size: 1.1rem; transition: transform .2s ease; }
.es-group[open] > summary .es-group__caret { transform: rotate(90deg); }
.es-group__kind { flex: none; padding: 1px 8px; border-radius: 8px; background: var(--es-ink); color: #fff; font: 700 .6875rem/1.5 var(--es-display); letter-spacing: .08em; text-transform: uppercase; }
.es-group__kind--a, .es-group__kind--mx { background: #1E7F70; }
.es-group__kind--root { background: var(--es-coral); color: var(--es-ink); }
.es-group__name { min-width: 0; flex: 1 1 200px; font: 600 .9375rem/1.35 var(--es-mono); color: var(--es-ink); overflow-wrap: anywhere; }
.es-group__via { display: block; font: 600 .75rem/1.3 var(--es-body); color: var(--es-muted); }
.es-group__meta { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.es-group__meta .es-status { font-size: .75rem; }
.es-group__count { font: 600 .8125rem/1.2 var(--es-display); color: var(--es-muted); white-space: nowrap; }
.es-group__body { padding: 0 12px 12px; }
.es-group__none { margin: 0; padding: 4px 4px 2px; font-size: .875rem; color: var(--es-muted); }
.es-tablewrap { overflow-x: auto; border: 2px solid var(--es-line); border-radius: 12px; }
.es-table { width: 100%; min-width: 560px; font-size: .875rem; }
.es-table th { padding: 8px 10px; background: var(--es-sky-0); border-bottom: 2px solid var(--es-line); font: 700 .6875rem/1.2 var(--es-display); letter-spacing: .08em; text-transform: uppercase; color: var(--es-muted); text-align: left; white-space: nowrap; }
.es-table td { padding: 8px 10px; border-bottom: 1px solid var(--es-line); vertical-align: top; color: var(--es-ink); }
.es-table tr:last-child td { border-bottom: 0; }
.es-table td:first-child { font-family: var(--es-mono); font-weight: 600; overflow-wrap: anywhere; }
.es-table .es-muted { color: var(--es-muted); }
.es-table__why { display: block; margin-top: 4px; font-size: .8125rem; line-height: 1.4; color: #7A1F28; }
/* Stacked up to 767px: below that the indented groups are narrower than the table's 560px and hide the status column */
@media (max-width: 767.98px) {
  .es-tablewrap { overflow: visible; }
  .es-table { min-width: 0; }
  .es-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .es-table, .es-table tbody, .es-table tr, .es-table td { display: block; }
  .es-table tr { padding: 8px 10px; border-bottom: 1px solid var(--es-line); }
  .es-table tr:last-child { border-bottom: 0; }
  .es-table td { padding: 2px 0; border: 0; }
  /* The label is visual only (the hidden header row names the column); "/ ''" keeps it out of the accessible name where supported */
  .es-table td:not(:first-child)::before { content: attr(data-label) ": "; content: attr(data-label) ": " / ""; font: 700 .6875rem/1.2 var(--es-display); letter-spacing: .08em; text-transform: uppercase; color: var(--es-muted); }
}
/* "Try again" moves focus to the panel while the markup inside is replaced */
#receiverSupplyChain:focus, .es-root #receiverSupplyChain:focus-visible { outline: none; box-shadow: none; }

/* ---------- Scan again (the report's foot) ---------- */
.es-again { margin-top: 72px; }
.es-again__card { display: grid; gap: 22px 44px; padding: 28px 22px; background: #fff; border: 3px solid var(--es-ink); border-radius: var(--es-r); box-shadow: var(--es-drop); }
@media (min-width: 992px) { .es-again__card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; padding: 36px 40px; } }
.es-root .es-again__card .es-h2 { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); }
.es-again__card p:not([class]) { margin: 0; color: var(--es-ink-2); }

/* ---------- Next steps ---------- */
.es-next { display: grid; gap: 22px; margin-top: 36px; }
@media (min-width: 768px) { .es-next { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 991.98px) { .es-next { grid-template-columns: 1fr; } }
.es-nextcard { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; background: #fff; border: 3px solid var(--es-ink); border-radius: var(--es-r); box-shadow: var(--es-drop); }
.es-nextcard__icon { display: grid; place-items: center; width: 58px; height: 58px; margin: -48px 0 14px; border: 3px solid var(--es-ink); border-radius: 18px; background: var(--a); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%); box-shadow: 0 4px 0 var(--es-ink); font-size: 1.8rem; color: var(--es-ink); }
.es-nextcard h3 { font-size: 1.35rem; margin-bottom: 8px; }
.es-nextcard p { margin: 0 0 14px; color: var(--es-ink-2); font-size: .98rem; }
.es-nextcard .es-arrow { margin-top: auto; align-self: flex-start; font-size: 1rem; }
.es-next { padding-top: 26px; }

/* ---------- Site header on these pages ----------
   Below 992px the layout's hamburger is dark and the header is transparent until the page scrolls, so over the
   purple hero and the report's dark header it all but vanished: white until the header turns white on scroll. */
@media (max-width: 991.98px) { #header:not(.js-header-fix-moment) .navbar-toggler { color: #fff; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .es-root *, .es-root *::before, .es-root *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}