/* The website check: its full-screen section with the address box, and the pictures in
   the report. On two pages, each in 21 languages, and linked by those only, after the
   tools' shared stylesheet (business-tools.css), so a rule here wins a tie with a rule
   there:
     /tools/                 the first thing on the page, above the page's own heading, in
                             place of a card that opens a window;
     /tools/website-check/   the top of the tool's own page.
   Until 2026-10-07 the section was a band on the services page; this file's name is from then.

   It sits inside the page's .bt column, which has side padding of --pad, and is pulled
   out to both edges. Classes are its own (no .kicker, no .wrap).

   Both pages start with it, and the column's padding above is taken off (60px, 30px on a
   phone). The site's bar is sticky, 52px tall, takes room at the top of the page and
   slides away once the page is scrolled down.
     - Without scripts the section starts under the bar and is one screen less those 52px.
     - With scripts (html.wsc-over, set in <head> by these two pages) the bar LIES OVER the
       section until the page is scrolled: see-through, with a white menu, the way MM
       Carz's opens (owner, 2026-10-08). The section is pulled up under it, is a whole
       screen, and keeps the bar's 52px as extra room above its words. Past 8px of
       scrolling motion.js sets html.scrolled and the bar is the frosted light one again.
       Only with scripts, because that switch back is a script: without it a white menu
       would stay white over the white page below. */
.bt[data-tool=website-check], .bt.bt-hub { padding-top: 0; }
.wsc {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; align-items: center;
  min-height: calc(100svh - 52px);
  margin: 0 calc(-1 * var(--pad)) clamp(40px, 5vw, 68px);
  padding: clamp(36px, 6vh, 72px) var(--pad) clamp(48px, 8vh, 96px);
  color: #fff; background: #071634;
  scroll-margin-top: 52px;
}
/* Not in the window a tool opens in from the tools page (html.bt-embedded): no bar there. */
html.wsc-over:not(.bt-embedded) .wsc {
  min-height: 100svh; margin-top: -52px; scroll-margin-top: 0;
  padding-top: calc(52px + clamp(36px, 6vh, 72px));
}

/* ---- the site's bar while it lies over the section (top of the page, scripts on) ---- */
html.wsc-over:not(.scrolled) .bar { color: #fff; }
html.wsc-over:not(.scrolled) .bar nav a { color: rgba(255, 255, 255, .84); }
html.wsc-over:not(.scrolled) .bar nav a:hover,
html.wsc-over:not(.scrolled) .bar .wordmark b { color: #fff; }
/* The mark is navy on a white ground, multiplied into a light page. Turned to white on
   black and screened instead, the ground vanishes into the navy and the mark is white. */
html.wsc-over:not(.scrolled) .bar .wordmark img { filter: grayscale(1) invert(1) brightness(1.7); mix-blend-mode: screen; }
html.wsc-over:not(.scrolled) .bar .bar-burger,
html.wsc-over:not(.scrolled) .bar .music-btn,
html.wsc-over:not(.scrolled) .bar .site-language-button { color: rgba(255, 255, 255, .88); }
html.wsc-over:not(.scrolled) .bar .bar-burger:hover,
html.wsc-over:not(.scrolled) .bar .music-btn:hover,
html.wsc-over:not(.scrolled) .bar .site-language-button:hover { color: #fff; background: rgba(255, 255, 255, .14); }
html.wsc-over:not(.scrolled) .bar .bar-actions .bar-cta { color: #fff; border-color: rgba(255, 255, 255, .72); }
html.wsc-over:not(.scrolled) .bar .bar-actions .bar-cta::before { background: #fff; }
html.wsc-over:not(.scrolled) .bar .bar-actions .bar-cta:hover { color: var(--navy); }
@media (max-width: 1000px) {
  /* the call button is a round icon here, with no sweep behind it */
  html.wsc-over:not(.scrolled) .bar .bar-actions .bar-cta:hover { color: #fff; background: rgba(255, 255, 255, .14); }
}
.wsc::before, .wsc::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.wsc::before {
  z-index: -2;
  background:
    radial-gradient(ellipse 68% 58% at 84% 6%, rgba(72, 108, 252, .5), transparent 70%),
    radial-gradient(ellipse 58% 52% at 0% 100%, rgba(72, 108, 252, .24), transparent 70%),
    linear-gradient(180deg, #0c2454 0%, #071634 100%);
}
.wsc::after {
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 72% at 50% 34%, #000 18%, transparent 76%);
          mask-image: radial-gradient(ellipse 80% 72% at 50% 34%, #000 18%, transparent 76%);
}
.wsc-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(36px, 6vw, 104px); align-items: center;
  width: 100%; max-width: 1312px; margin: 0 auto;
}
.wsc-copy { min-width: 0; }
.wsc .wsc-back { padding: 0 0 clamp(22px, 4.5vh, 48px); color: rgba(255, 255, 255, .66); transition: color .2s; }
.wsc .wsc-back:hover { color: #fff; }
.wsc a:focus-visible, .wsc button:focus-visible { outline-color: #a9bcff; }
/* One heading in two parts: the small line names the tool, the large one invites. The
   shared h1 rule (a display size, tight tracking) is undone on the heading itself. */
.wsc .wsc-heading { margin: 0; font: 400 1rem/1.4 var(--sans); letter-spacing: 0; color: inherit; }
.wsc-kicker {
  display: block; margin: 0 0 18px; font: 600 .72rem/1.4 var(--sans); letter-spacing: .16em;
  text-transform: uppercase; color: #a9bcff;
}
.wsc-title {
  display: block; margin: 0 0 22px; color: #fff; font-family: var(--sans); font-weight: 500;
  font-size: clamp(2.3rem, 4.5vw, 4.1rem); line-height: 1.08; letter-spacing: -.05em; text-wrap: balance;
}
.wsc-lede { margin: 0 0 34px; max-width: 46ch; font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.75; color: rgba(255, 255, 255, .82); }
.wsc-label { display: block; margin: 0 0 10px; font: 600 .76rem/1.4 var(--sans); color: rgba(255, 255, 255, .86); }
.wsc-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 10px; max-width: 660px; }
.wsc .wsc-row input {
  min-width: 0; width: 100%; height: 58px; padding: 0 18px;
  font: 400 1rem/1 var(--sans); color: #fff;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .34); border-radius: 12px;
  transition: border-color .2s, background-color .2s;
}
.wsc .wsc-row input::placeholder { color: rgba(255, 255, 255, .56); }
.wsc .wsc-row input:hover { border-color: rgba(255, 255, 255, .6); }
.wsc .wsc-row input:focus-visible { outline: 2px solid #a9bcff; outline-offset: 2px; background: rgba(255, 255, 255, .14); }
/* The label is one line beside the box; a long translated label keeps the box usable
   because the box may shrink to 180px before the row would have to wrap. The shared
   button rule (.bt button) is more specific than one class, hence the two here. */
.wsc .wsc-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 10px 26px; border: 0; border-radius: 12px; cursor: pointer; white-space: nowrap;
  font: 600 .88rem/1 var(--sans); color: var(--navy); background: #fff;
  transition: background-color .2s, transform .2s;
}
.wsc .wsc-go:hover { background: #dfe7ff; }
.wsc .wsc-go:active { transform: translateY(1px); }
.wsc .wsc-go:focus-visible { outline: 2px solid #a9bcff; outline-offset: 3px; }
.wsc .wsc-go:disabled { opacity: .6; cursor: progress; }
.wsc-go b { font-weight: 500; }
/* What the check is doing, or why it could not: room is kept for one line so nothing jumps. */
.wsc .wsc-status { min-height: 22px; margin: 14px 0 0; max-width: 660px; font-size: .8rem; line-height: 1.6; color: #bfe9d2; }
.wsc .wsc-status[data-error=true] { color: #ffbdb8; }
.wsc-promise { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 14px 0 0; font-size: .78rem; color: rgba(255, 255, 255, .7); }
.wsc-promise span + span::before { content: "\00B7"; margin: 0 10px; color: rgba(255, 255, 255, .4); }

/* The example: a white card in the report's own style. */
.wsc-card {
  justify-self: end; width: 100%; max-width: 500px; min-width: 0;
  padding: clamp(24px, 2.6vw, 34px); border-radius: 22px;
  color: var(--ink); background: #fff;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .12);
}
.wsc-card-kicker { margin: 0 0 12px; font: 600 .66rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.wsc-score { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--hair); font-size: .84rem; color: var(--ink-3); }
.wsc-score b { align-self: flex-start; font: 500 2.5rem/1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.wsc-group + .wsc-group { margin-top: 18px; }
.wsc-group > p { margin: 0 0 10px; font: 600 .8rem/1.4 var(--sans); color: var(--navy); }
.wsc-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* A row of the example looks like a row of the real report: the check's picture in a tile
   tinted by how it went (.wsc-pic, an empty span in the markup), with the tick, ! or cross
   as a badge on its corner. The picture is a mask, so it takes the tile's colour. */
.wsc-group li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center;
  min-height: 32px; font-size: .82rem; line-height: 1.5; color: var(--ink-2);
}
.wsc-pic { position: relative; width: 32px; height: 32px; border-radius: 10px; background: #eef1f6; color: #5d6880; }
.wsc-pic::before {
  content: ""; position: absolute; inset: 7px; background: currentColor;
  -webkit-mask: var(--wsc-pic) center / contain no-repeat; mask: var(--wsc-pic) center / contain no-repeat;
}
.wsc-pic::after {
  position: absolute; inset-block-end: -4px; inset-inline-end: -4px; width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center; font: 700 9px/1 var(--sans); color: #fff; box-shadow: 0 0 0 2px #fff;
}
.wsc-group li[data-s=pass] .wsc-pic { background: #e8f5ee; color: #1c6e45; }
.wsc-group li[data-s=warn] .wsc-pic { background: #fdf3dc; color: #855600; }
.wsc-group li[data-s=fail] .wsc-pic { background: #fdecea; color: #a8261f; }
.wsc-group li[data-s=pass] .wsc-pic::after { content: "\2713"; background: #1f7a4d; }
.wsc-group li[data-s=warn] .wsc-pic::after { content: "!"; background: #a86f00; }
.wsc-group li[data-s=fail] .wsc-pic::after { content: "\2715"; background: #b3261e; }
/* example-pictures:start (written by example_icons.py from SHAPES in tools/website-check.mjs) */
.wsc-group li[data-check=phone] .wsc-pic { --wsc-pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.wsc-group li[data-check=hours] .wsc-pic { --wsc-pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); }
.wsc-group li[data-check=viewport] .wsc-pic { --wsc-pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.wsc-group li[data-check=https] .wsc-pic { --wsc-pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.wsc-group li[data-check=business] .wsc-pic { --wsc-pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5L5.5 4h13L20 9.5'/%3E%3Cpath d='M4 9.5a2.67 2.67 0 0 0 5.33 0 2.67 2.67 0 0 0 5.34 0 2.67 2.67 0 0 0 5.33 0'/%3E%3Cpath d='M5.5 12v8h13v-8M10 20v-4.5h4V20'/%3E%3C/svg%3E"); }
.wsc-group li[data-check=ai] .wsc-pic { --wsc-pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3.5l1.9 5.1 5.1 1.9-5.1 1.9L11 17.5l-1.9-5.1L4 10.5l5.1-1.9z'/%3E%3Cpath d='M18.5 15.5v5M16 18h5'/%3E%3C/svg%3E"); }
/* example-pictures:end */

@media (max-width: 1000px) {
  .wsc { padding-top: clamp(28px, 5vh, 56px); }
  html.wsc-over:not(.bt-embedded) .wsc { padding-top: calc(52px + clamp(28px, 5vh, 56px)); }
  .wsc-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .wsc-card { justify-self: start; max-width: 560px; }
}
@media (max-width: 600px) {
  .wsc-title { font-size: clamp(2rem, 9.4vw, 2.6rem); margin-bottom: 16px; }
  .wsc-lede { margin-bottom: 26px; font-size: .96rem; }
  .wsc-row { grid-template-columns: minmax(0, 1fr); }
  .wsc .wsc-row input { height: 54px; font-size: 16px; }
  .wsc .wsc-go { width: 100%; min-height: 54px; white-space: normal; line-height: 1.3; text-align: center; }
  .wsc-card { padding: 22px; border-radius: 18px; }
  .wsc-score b { font-size: 2.1rem; }
}
/* Opened from the tools page the tool sits in a window of its own (html.bt-embedded):
   there the opening is a panel, not a screen, and the example gives way to the result. */
.bt-embedded .wsc { min-height: 0; margin: 0 0 26px; padding: 26px clamp(18px, 3vw, 30px) 28px; border-radius: 18px; }
.bt-embedded .wsc-grid { grid-template-columns: minmax(0, 1fr); }
.bt-embedded .wsc-card { display: none; }
.bt-embedded .wsc-title { font-size: clamp(1.6rem, 4.2vw, 2.2rem); margin-bottom: 14px; }
.bt-embedded .wsc-lede { margin-bottom: 22px; font-size: .95rem; }
@media print { .wsc { display: none; } }

/* ---- the report: a picture for each check, tinted by how it went ----
   website-check.mjs draws the picture (.wc-icon) and puts the old tick, ! or cross
   (.wc-mark) inside it, where it becomes a badge on the corner. */
.wc-check { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.wc-check > div { padding-top: 1px; }
.wc-icon {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: #eef1f6; color: #5d6880;
}
.wc-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wc-check[data-status=pass] .wc-icon { background: #e8f5ee; color: #1c6e45; }
.wc-check[data-status=warn] .wc-icon { background: #fdf3dc; color: #855600; }
.wc-check[data-status=fail] .wc-icon { background: #fdecea; color: #a8261f; }
.wc-check .wc-icon .wc-mark {
  position: absolute; inset-block-end: -5px; inset-inline-end: -5px;
  width: 18px; height: 18px; margin: 0; font-size: 10px; color: #fff; box-shadow: 0 0 0 2px #fff;
}
.wc-check[data-status=pass] .wc-icon .wc-mark { background: #1f7a4d; color: #fff; }
.wc-check[data-status=warn] .wc-icon .wc-mark { background: #a86f00; color: #fff; }
.wc-check[data-status=fail] .wc-icon .wc-mark { background: #b3261e; color: #fff; }
.wc-check[data-status=none] .wc-icon .wc-mark { background: #8792a8; color: #fff; }
.wc-check[data-status=pending] .wc-icon .wc-mark { width: 16px; height: 16px; margin: 0; background: #fff; }

/* ---- the report's heading: the checked site's own picture beside its name ----
   Its first letter until (and unless) the picture loads. */
.wc-summary > p[data-wc-host] { display: flex; align-items: center; gap: 10px; }
.wc-site-logo {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden;
  border-radius: 8px; background: #eef2f8; color: var(--navy); font: 600 13px/1 var(--sans);
  box-shadow: 0 0 0 1px #e2e6ed;
}
.wc-site-logo[data-loaded] { background: #fff; }
.wc-site-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }