/* ===========================================================================
   Instant Sender Check, design system

   Colours and typography taken from peoplelooker.com, the destination of every
   click on this page. Matching them is deliberate: a visitor who lands on a
   page that looks like the one they just left does not stop to wonder whether
   they followed the right link.

   Karla throughout, black text, white and pale mint grounds, teal accents, and
   the red search button PeopleLooker uses. Small radii, 4px and 8px, not pills.

   Source of truth for the styling. index.html carries an INLINE copy of this
   file so the browser paints without a second request. After changing anything
   here, run tools/inline-css.ps1 or the change will not go live.
   =========================================================================== */

/* --- Font ----------------------------------------------------------------
   Self-hosted. Loading fonts.googleapis.com would put two third-party DNS and
   TLS handshakes on the critical path, which is paid-for time on paid traffic.
   Latin subset only, and one variable file covers every weight. */

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/karla-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens --------------------------------------------------------------
   One light look on purpose, so the page matches its destination on every
   device. Every colour is painted explicitly rather than inherited. */

:root {
  --ink:       #000000;
  --ink-soft:  #555555;
  --ink-faint: #929798;

  --white:     #ffffff;
  --mint:      #f0fdfc;   /* PeopleLooker's pale ground */
  --grey:      #f8f8f8;
  --line:      #e2e6e7;

  --teal:      #2cb29e;
  --teal-dark: #207d69;
  --cyan:      #24c1db;
  --navy:      #27455c;

  --red:       #ef2742;   /* the search button, and nothing else */
  --red-dark:  #d31c35;

  --r-sm: 4px;
  --r-md: 8px;

  --shadow-card: 0 1px 3px rgb(39 69 92 / 0.08);
  --shadow-lift: 0 4px 10px rgb(39 69 92 / 0.10), 0 16px 40px rgb(39 69 92 / 0.10);

  --gutter: 1.25rem;
  --max: 70rem;

  color-scheme: light;
}

/* --- Base ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Karla, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }

img, svg { max-width: 100%; }

a { color: var(--teal-dark); text-underline-offset: 0.18em; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --- Layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.stack       { display: flex; flex-direction: column; gap: 1rem; }
.stack-tight { display: flex; flex-direction: column; gap: 0.5rem; }
.stack-wide  { display: flex; flex-direction: column; gap: 2rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

section { padding-block: clamp(2.75rem, 2rem + 3.5vw, 4.5rem); }

.section-mint { background: var(--mint); }
.section-grey { background: var(--grey); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: 2.25rem;
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.9vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem); }
h3 { font-size: 1.0625rem; font-weight: 700; }

.lede {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  color: var(--ink-soft);
}

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.site-header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8125rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}

.brand .mark {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-sm);
  background: var(--teal);
  display: grid;
  place-items: center;
  color: var(--white);
  flex: 0 0 auto;
}

.brand .mark svg { width: 1rem; height: 1rem; }
.brand em { font-style: normal; color: var(--teal-dark); }

.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}

.header-badge svg { width: 0.9375rem; height: 0.9375rem; color: var(--teal); flex: 0 0 auto; }

/* On a phone the brand and this badge do not both fit, and the badge gets
   clipped. The same reassurance already sits in the trust strip under the
   form, so drop it here rather than shrink it into illegibility. */
@media (max-width: 30rem) {
  .header-badge { display: none; }
}

/* --- Affiliate disclosure -------------------------------------------------
   Sits inside the search card, directly under the button, rather than in a
   banner across the top of the page. That is where the visitor acts on the
   recommendation, which is what the FTC endorsement guides ask for: clear,
   legible and next to the click.

   Quiet, but never hidden. Do not drop the font size further, do not lighten
   the colour, and do not move it to the footer. A disclosure that cannot be
   read is the same as no disclosure, both to the FTC and to Google. */

.affiliate-line {
  border-top: 1px solid var(--line);
  padding-top: 0.625rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- Hero ----------------------------------------------------------------
   PeopleLooker opens on a pale mint ground with black type, not a dark band.
   The page follows that so the two sit in the same world. */

.hero {
  background: linear-gradient(175deg, var(--white) 0%, var(--mint) 38%, #dff6f4 100%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.25rem, 1.5rem + 4vw, 4rem) clamp(2.5rem, 1.75rem + 4vw, 4rem);
}

.hero-head {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 1.75rem;
}

.hero-head p { color: var(--ink-soft); font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem); }

/* --- Search card ---------------------------------------------------------- */

/* Clears the sticky header when a button further down the page scrolls back
   up to the form. Without this the header sits on top of the label. */
.search-card { scroll-margin-top: 4.5rem; }

.search-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  padding: clamp(1.125rem, 0.875rem + 1.2vw, 1.5rem);
  max-width: 38rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}

.search-card label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.search-card input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #c8cfd0;
  border-radius: var(--r-sm);
  padding: 0.8125rem 0.875rem;
}

.search-card input[type="email"]::placeholder { color: var(--ink-faint); }
.search-card input[type="email"]:focus-visible { border-color: var(--cyan); outline-offset: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--white);
  background: var(--red);
  border: 0;
  border-radius: var(--r-sm);
  padding: 0.875rem 1.75rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.btn:hover { background: var(--red-dark); }
.btn[disabled] { opacity: 0.65; cursor: default; }
.btn-block { width: 100%; }

.btn-arrow {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

.btn:hover .btn-arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .btn-arrow { transition: none; }
  .btn:hover .btn-arrow { transform: none; }
}

.btn-teal { background: var(--teal-dark); }
.btn-teal:hover { background: #1a6857; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

.reassure {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  text-align: left;
}

.reassure svg { width: 0.9375rem; height: 0.9375rem; color: var(--teal); flex: 0 0 auto; margin-top: 0.25em; }

.form-error {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--red);
}

/* --- Trust strip ---------------------------------------------------------- */

.trust {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem 1.875rem;
}

.trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--navy);
}

.trust svg { width: 1rem; height: 1rem; color: var(--teal); flex: 0 0 auto; }

/* --- Card grid ------------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: var(--shadow-card);
}

.card .icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  display: grid;
  place-items: center;
  margin-bottom: 0.25rem;
}

.card .icon svg { width: 1.25rem; height: 1.25rem; }
.card p { color: var(--ink-soft); font-size: 0.9375rem; }

.note-under {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  text-align: center;
  max-width: 48rem;
  margin-inline: auto;
}

/* --- Steps ---------------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
}

.steps > li {
  counter-increment: step;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
  align-items: center;
}

.steps > li::before {
  content: counter(step);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-weight: 800;
  font-size: 1.0625rem;
  display: grid;
  place-items: center;
}

.steps p { color: var(--ink-soft); font-size: 0.9375rem; }

.center-cta { margin-top: 2.25rem; text-align: center; }

/* --- Use cases ------------------------------------------------------------ */

.uses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

.uses li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.25rem 0.75rem;
  align-items: start;
}

.uses .tick {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  display: grid;
  place-items: center;
  grid-row: span 2;
}

.uses .tick svg { width: 0.8125rem; height: 0.8125rem; }
.uses strong { font-weight: 700; }
.uses span { color: var(--ink-soft); font-size: 0.9375rem; }

/* --- FAQ ------------------------------------------------------------------ */

.faq {
  display: grid;
  gap: 0.625rem;
  max-width: 46rem;
  margin-inline: auto;
}

.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.125rem;
  font-weight: 700;
  font-size: 1.0625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  width: 0.5625rem;
  height: 0.5625rem;
  border-right: 2px solid var(--teal-dark);
  border-bottom: 2px solid var(--teal-dark);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
  margin-top: -0.25rem;
}

.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 0.25rem; }

.faq .answer {
  padding: 0 1.125rem 1.125rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  display: grid;
  gap: 0.625rem;
}

.faq .answer blockquote {
  margin: 0;
  padding-left: 0.875rem;
  border-left: 3px solid var(--teal);
  color: var(--ink);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* --- Closing CTA ---------------------------------------------------------- */

.closing {
  background: var(--navy);
  color: var(--white);
  text-align: center;
}

.closing h2 { color: var(--white); }
.closing p { color: rgb(255 255 255 / 0.85); }

/* --- Legal notice --------------------------------------------------------- */

.notice {
  background: var(--grey);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.375rem;
  display: grid;
  gap: 0.6875rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 54rem;
  margin-inline: auto;
}

.notice h3 { font-size: 0.9375rem; color: var(--ink); }

/* Placeholders that must be replaced before the campaign starts. Deliberately
   conspicuous: a visibly empty slot is recoverable, a plausible looking
   invention is not. */

.todo {
  display: inline-block;
  background: repeating-linear-gradient(
    -45deg, #fdeceb, #fdeceb 8px, #fbdcd9 8px, #fbdcd9 16px
  );
  border: 1px dashed var(--red);
  color: #8c1d18;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.45;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--grey);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.8125rem;
  padding-block: 2.25rem 2.75rem;
}

.site-footer .wrap { display: grid; gap: 0.875rem; }

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.site-footer .fine { color: var(--ink-faint); }

/* --- Redirect overlay -----------------------------------------------------
   Built on submit, so nothing on the page sits invisible waiting for a script.
   Modelled on PeopleLooker's own search animation, which is what the visitor
   sees a second later. */

.overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(175deg, var(--white) 0%, var(--mint) 45%, #dff6f4 100%);
  color: var(--ink);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  z-index: 50;
}

.overlay-card {
  width: 100%;
  max-width: 26rem;
  display: grid;
  gap: 1.25rem;
  text-align: center;
  justify-items: center;
}

.overlay-card .lead { font-size: 1.125rem; color: var(--ink-soft); }
.overlay-card .who { font-weight: 700; font-size: 1.25rem; word-break: break-all; }

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
  font-size: 0.9375rem;
  width: 100%;
  text-align: left;
}

.checks li {
  display: grid;
  grid-template-columns: 1.375rem 1fr;
  gap: 0.625rem;
  align-items: center;
  color: var(--ink-faint);
  transition: color 0.2s ease;
}

.checks li[data-state="active"] { color: var(--ink); font-weight: 700; }
.checks li[data-state="done"]   { color: var(--ink-soft); }

.checks .mark {
  width: 1.375rem;
  height: 1.375rem;
  border: 2px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  color: var(--white);
}

.checks li[data-state="done"] .mark {
  background: var(--teal);
  border-color: var(--teal);
}

.checks li[data-state="done"] .mark::after { content: "\2713"; }

.bar {
  width: 100%;
  height: 6px;
  background: #d7e3e2;
  border-radius: var(--r-sm);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-sm);
  background: var(--teal);
  transition: width 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .bar span, .checks li { transition: none; }
}

/* --- Legal page ----------------------------------------------------------- */

.doc { max-width: 46rem; }
.doc h2 { margin-top: 2rem; font-size: 1.3125rem; }
.doc p + p { margin-top: 0.75rem; }
.doc address { font-style: normal; line-height: 1.8; }