/* ===========================================================================
   Scanner — withdrawal page
   Self-contained. No Bricks CSS, no WordPress assets, no build step.

   PALETTE is read from scanner.biz/privacy/'s own stylesheet (the Bricks
   inline :root block), not eyeballed:
       --primary: #00AEEF   the hero band
       --cta:     #00A9B3   the footer band
   White on those two measures 2.53:1 and 2.87:1, so one of the colour and the
   text had to give. THIS IS A TRIAL of darkening the bands and putting the
   text back to white — the conventional treatment. The two darkened values
   keep the originals' hue and saturation exactly (196.3deg/100% and
   183.0deg/100%, verified) and drop only lightness.

   TO REVERT, edit --band-cyan and --band-teal below, and --on-band with them.
   Every pair in this file is measured; the figures are in the README.
   =========================================================================== */

:root {
  /* THE TWO BAND COLOURS. Each appears exactly once in this file; every band
     and the submit button read them through these. Darkened from scanner.biz's
     live --primary #00AEEF and --cta #00A9B3, same hue and saturation.
     Revert = put the two originals back here and flip --on-band to var(--ink). */
  --band-cyan: #006F99;   /* was #00AEEF · white on it: 5.62:1 */
  --band-teal: #00747A;   /* was #00A9B3 · white on it: 5.56:1 */

  /* The one colour for text and rules sitting ON a band. Third declaration in
     the revert: bright bands need var(--ink) here, dark bands need white. */
  --on-band: #FFFFFF;

  /* Text + UI, chosen to clear AA on white and on the tint. Unaffected by the
     band change — none of these sits on a band. */
  --ink:     #0A2E38;   /* 14.38 on white · 13.18 on the tint */
  --link:    #006E77;   /* 6.01 on white · 5.51 on the tint */
  --muted:   #55606E;   /* 6.39 on white · 5.86 on the tint             */
  --border:  #767F8C;   /* 4.05 on white · 3.71 on the tint (>=3 UI)    */
  --error:   #B3261E;   /* 6.54 on white · 5.99 on the tint             */

  --surface: #FFFFFF;
  --tint:    #F4F5F7;   /* scanner.biz --bg */

  /* scanner.biz serves Lexend from its own wp-content/uploads path. This page
     does NOT load it — see the README. "Lexend" stays first so a visitor who
     has it installed, or a later vendored @font-face, gets it for free. */
  --font: "Lexend", ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display",
          "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue",
          Arial, sans-serif;

  --measure: 760px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;          /* scanner.biz body: 1.7rem on a 62.5% root */
  line-height: 1.7;
  color: var(--ink);
  background: var(--surface);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--font); font-weight: 600; line-height: 1.2; }

/* Ink ring by default: 14.38:1 on white, 13.18:1 on the tint, and 14.38:1 in
   the white breadcrumb pill. It is NOT usable on the dark bands (2.56:1 on the
   cyan, 2.59:1 on the teal), so the one control group that sits directly on a
   band — the footer links — overrides it to white further down. The pill keeps
   the ink ring: a white ring on a white pill is 1.00:1 and would vanish. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--ink);
  padding: 12px 20px; z-index: 10; text-decoration: underline;
}
.skip:focus { left: 16px; top: 16px; }

/* --- header ------------------------------------------------------------- */

.site-header {
  display: flex; align-items: center;
  padding: 16px 24px;
  max-width: 1280px; margin: 0 auto;
}
.site-header__logo { display: inline-flex; line-height: 0; }
.site-header__logo img { width: 40px; height: 40px; border-radius: 8px; }

/* --- hero band ---------------------------------------------------------- */

.hero { background: var(--band-cyan); }

.hero__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 32px 24px 48px;
  display: flex; flex-direction: column; align-items: center;
}

/* the breadcrumb pill — white, radius 5px, as on /privacy/ */
.crumbs__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0; padding: 10px 28px;
  list-style: none;
  background: var(--surface);
  border-radius: 5px;
  font-size: 15px;
}
.crumbs__item a { color: var(--link); font-weight: 500; }
.crumbs__item [aria-current="page"] { color: var(--ink); font-weight: 500; }
.crumbs__item[aria-hidden="true"] { color: var(--muted); }

.hero__title {
  margin: 32px 0 0;
  font-size: clamp(2.375rem, 5vw, 3.4375rem);  /* 38px -> 55px, as /privacy/ */
  font-weight: 500;
  color: var(--on-band);            /* 5.62:1 on the dark cyan band */
  text-align: center;
}

/* the rule under the h1 — 4px x 5rem on /privacy/ */
.hero__rule {
  width: 80px; height: 0;
  margin: 21px 0 0;
  border: 0; border-top: 4px solid var(--on-band);   /* 5.62:1 on the band */
}

/* --- prose -------------------------------------------------------------- */

.doc {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 48px 24px 64px;
}

.doc h2 {
  font-size: clamp(1.75rem, 3vw, 2rem);   /* 28px -> 32px */
  margin: 40px 0 12px;
}
.doc p { margin: 0 0 16px; }
.doc a { color: var(--link); }

.lead { font-size: 19px; font-weight: 500; }

.reqs { margin: 0 0 16px; padding-left: 24px; }
.reqs li { margin-bottom: 6px; }

/* --- the no-JavaScript notice ------------------------------------------- */

/* Shown only when scripting is off. The support address inside it is plain
   text, not a link — see the comment on the <noscript> block in index.html. */
.wd__noscript {
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--surface);
  border-left: 4px solid var(--error);
  color: var(--ink);                /* 14.38:1 on white */
  font-size: 16px;
}

/* --- the reference box on /withdrawal/submitted/ ------------------------- */

.refbox {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.refbox__label {
  font-size: 15px; font-weight: 500; color: var(--muted);   /* 5.86:1 on the tint */
  text-transform: uppercase; letter-spacing: 0.06em;
}
.refbox__value {
  font-size: 20px; font-weight: 600; color: var(--ink);     /* 13.18:1 on the tint */
}

/* --- form --------------------------------------------------------------- */

.wd {
  margin-top: 24px;
  padding: 28px 24px;
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.wd__field { margin-bottom: 24px; }

.wd__label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--ink);
}

.wd__input {
  display: block; width: 100%;
  padding: 12px 14px;
  font: inherit; font-size: 17px;   /* >=16px: iOS does not zoom on focus */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.wd__input:focus-visible { border-color: var(--ink); }

.wd__help {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  color: var(--muted);
}

.wd__notice {
  margin: 0 0 24px;
  font-size: 16px;
  color: var(--ink);
}
.wd__notice p { margin: 0 0 12px; }
.wd__notice p:last-child { margin-bottom: 0; }

/* honeypot — off-screen rather than display:none, and never tabbable */
.wd__hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.wd__error {
  margin: 0 0 16px;
  color: var(--error);
  font-weight: 500;
}
.wd__error:empty { display: none; margin: 0; }

#wd-recaptcha:not(:empty) { margin-bottom: 20px; }

.wd__submit {
  display: inline-block;
  padding: 14px 32px;
  font: inherit; font-size: 17px; font-weight: 600;
  color: var(--on-band);            /* 5.62 on the darkened cyan fill */
  background: var(--band-cyan);
  border: 2px solid var(--band-cyan);
  border-radius: 8px;
  cursor: pointer;
}
/* Hover used to go to a white fill, which with a white label is 1.00:1.
   It darkens to ink instead: white on ink is 14.38:1. */
.wd__submit:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); }
.wd__submit:disabled { cursor: not-allowed; opacity: 1; background: var(--tint); border-color: var(--border); color: var(--muted); }

/* --- footer ------------------------------------------------------------- */

.site-footer { background: var(--band-teal); color: var(--on-band); }

.site-footer__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 40px 24px;
  display: flex; flex-direction: column; gap: 24px;
}

.site-footer__nav ul {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  margin: 0; padding: 0; list-style: none;
}
.site-footer__nav a { color: var(--on-band); font-weight: 500; }

/* The only focusable elements sitting directly on a band. */
.site-footer__nav a:focus-visible { outline-color: var(--on-band); }

.site-footer__address {
  font-style: normal;
  font-size: 16px;
  color: var(--on-band);            /* 5.56:1 on the dark teal band */
}

/* --- links -------------------------------------------------------------- */

a { text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }