/* PeptideJury production public-site layer. */

:root {
  --v2-glow: rgba(var(--accent-rgb), .15);
  --v2-panel: var(--panel);
  --v2-line: rgba(151, 187, 206, .16);
}

html { scroll-padding-top: 104px; overflow-x: hidden; }
body { overflow-x: hidden; }

.v2-header .header-row { min-height: 76px; }
.v2-header .brand { flex: 0 0 auto; }
.v2-header .primary-nav { gap: 2px; }
.v2-header .primary-nav a { white-space: nowrap; }
/* Air between the last text link and the report button, so the current-
   page underline under "Specials" does not run into the button. */
.v2-header .primary-nav a.nav-report-button { margin-left: 14px; }
.header-tools { display: flex; align-items: center; gap: 9px; margin-left: 12px; }
/* The account button must never wrap into two lines - German labels are
   longer, and with the flag in the language menu the row got tight enough
   for "Mein Konto" to fold. Keep the tools rigid, and give up the brand
   tagline first on widths where the full row no longer fits. */
.v2-header .header-tools { flex: 0 0 auto; }
.v2-header .header-tools .button { white-space: nowrap; }
@media (max-width: 1400px) { .v2-header .brand-copy small { display: none; } }
/* Same height as the small buttons beside it, no wider than "🇩🇪 DE" plus a
   chevron needs, and the label centred on the row - the browser's own
   select chrome padded the flag low and the box wide. */
.language-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 36px;
  height: 36px;
  line-height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--control-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%2383d7f7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 9px center;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 0 26px 0 10px;
  cursor: pointer;
}
.language-select:focus-visible { outline: none; border-color: rgba(var(--accent-rgb), .56); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .07); }

.v2-main { padding-top: 0; padding-bottom: 32px; }

.scamcheck-home {
  position: relative;
  min-height: 0;
  padding: 64px 0 48px;
  text-align: center;
}
.scamcheck-home::before {
  content: "";
  position: absolute;
  width: min(920px, 90vw);
  height: 520px;
  left: 50%;
  top: -120px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .1), transparent 66%);
  pointer-events: none;
}
.scamcheck-intro {
  position: relative;
  z-index: 1;
  max-width: 850px;
  margin: 0 auto 28px;
}
.scamcheck-intro h1 {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(32px, 4.3vw, 50px);
  line-height: 1.12;
  letter-spacing: -.035em;
  font-weight: 700;

  text-wrap: balance;}
.scamcheck-intro .hero-lead {
  max-width: 650px;
  margin: 18px auto 0;
  font-size: 16px;
}

.scamcheck-search-shell {
  position: relative;
  z-index: 2;
  max-width: 840px;
  margin-inline: auto;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 22px;
  text-align: left;
  background: var(--surface-gradient);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
}
.quick-check-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.scamcheck-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 36px; margin-top: 22px; }
.scamcheck-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--muted-2);
  font-size: 14px;
  font-weight: 500;
}
.scamcheck-stat strong { font-size: 25px; font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;}
.quick-check-input-wrap {
  min-height: 58px;
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  background: var(--surface-inset);
}
.quick-check-input-wrap:focus-within {
  border-color: rgba(var(--accent-rgb), .56);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .07);
}
.quick-check-input-wrap > span { color: var(--accent); font-size: 20px; }
.quick-check-input-wrap input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;

  min-width: 0;}
.quick-check-input-wrap input::placeholder { color: var(--muted); }
.quick-check-form .button { min-height: 58px; padding-inline: 20px; }

.quick-result { min-height: 0; margin-top: 0; }
.public-result-card,
.no-result-card {
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface-inset);
  padding: 18px;
  animation: v2ResultIn .2s ease-out;
}
@keyframes v2ResultIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.result-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;}
.result-topline .eyebrow { margin: 0; }
.public-result-seller { margin: 5px 0 0; font-size: 26px; letter-spacing: -.025em;
  overflow-wrap: anywhere;}
.result-privacy-pill {
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}
.result-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px;
  margin: 22px 0 16px;

  align-items: stretch;}
.trust-score-block,
.source-count-block {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;

  min-width: 0;}
.trust-score-block > span,
.source-count-block > span {
  color: var(--muted-2);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
.trust-score-block strong {
  margin-top: 8px;
  color: var(--accent-strong);
  font-size: 48px;
  line-height: 1;
  letter-spacing: -.035em;

  font-weight: 700;
  font-variant-numeric: tabular-nums;}
.trust-score-block strong small { color: var(--muted); font-size: 18px; font-weight: 500;
  letter-spacing: 0;}
.source-count-block strong { color: var(--text); font-size: 36px; line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;}
.score-track { height: 5px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.05); }
.score-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }
.result-limit-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55;
  max-width: 440px;}
.no-result-card { display: flex; align-items: flex-start; gap: 14px; }
.no-result-card h2 { margin: 0 0 5px; font-size: 17px; }
.no-result-card p { margin: 0 0 13px; color: var(--muted); font-size: 14px; }
.no-result-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--accent);
}

.v2-section { padding: 40px 0; }
.v2-section + .v2-section { border-top: 1px solid rgba(151, 187, 206,.08); }
.v2-section-heading { max-width: 760px; margin-bottom: 24px; }
.v2-section-heading h2 { margin: 0; font-size: clamp(27px, 3.1vw, 36px); line-height: 1.18; letter-spacing: -.03em;
  text-wrap: balance;}
.v2-section-heading p:not(.eyebrow) { max-width: 680px; margin: 14px 0 0; color: var(--muted-2); font-size: 16px; }
.legal-copy { max-width: 760px; margin-top: 24px; }
.legal-copy h2 { margin: 34px 0 10px; font-size: clamp(19px, 2.4vw, 24px); letter-spacing: -.02em; line-height: 1.25; }
.legal-copy h2:first-child { margin-top: 0; }
.legal-copy p { margin: 0 0 12px; color: var(--muted-2); line-height: 1.65; }
.legal-copy a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.legal-copy em { color: var(--muted); font-style: normal; font-size: 13px; }
.method-teaser { max-width: none; }
.method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.method-card {
  min-height: 220px;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  background: var(--surface-gradient);
}
.method-code { display: inline-grid; place-items: center; width: 38px; height: 30px; border: 1px solid rgba(var(--accent-rgb), .24); border-radius: 8px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.method-card h3 { margin: 34px 0 8px; font-size: 19px; letter-spacing: -.03em; }
.method-card p { margin: 0; color: var(--muted); font-size: 13px; }

.community-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px;
  background: var(--action-bg);
}
.community-band h2 { margin: 0; font-size: clamp(25px, 3vw, 32px); letter-spacing: -.025em; line-height: 1.2;
  max-width: 650px;}
.community-band p:not(.eyebrow) { color: var(--muted-2); }
.community-actions { display: flex; justify-content: flex-end; }

.privacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.privacy-copy,
.not-shop-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  background: var(--panel);
}
.privacy-copy h2 { margin: 0 0 12px; font-size: 25px; letter-spacing: -.02em;
  line-height: 1.24;}
.privacy-copy p,
.not-shop-card p { margin: 0; color: var(--muted-2); }
.not-shop-card { display: flex; align-items: center; gap: 15px; }
.not-shop-card span { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(240, 180, 41,.28); border-radius: 12px; color: var(--warning); }
.not-shop-icon { width: 26px; height: 26px; }

/* Shared standalone-page form surfaces used by auth/account/report tasks. */
.v2-form-card {
  max-width: 720px;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  background: var(--v2-panel);
}
.v2-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.v2-form-grid .wide { grid-column: 1 / -1; }
.v2-form-grid label { display: block; margin-bottom: 6px; color: var(--muted-2); font-size: 12px; font-weight: 700; }
.v2-form-grid input,
.v2-form-grid select,
.v2-form-grid textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-inset);
  color: var(--text);
  padding: 11px;
  outline: none;
}
.v2-form-grid textarea { min-height: 120px; resize: vertical; }
.v2-form-grid input:focus,
.v2-form-grid select:focus,
.v2-form-grid textarea:focus { border-color: rgba(var(--accent-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .06); }
.field-error { min-height: 16px; display: block; margin-top: 4px; color: var(--danger); font-size: 10px; }

.v2-footer { padding: 34px 0 42px; border-top: 1px solid var(--border); }
.v2-footer-top { display: flex; justify-content: space-between; gap: 28px; align-items: flex-start; }
.v2-footer p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.legal-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 16px; }
.legal-links a { color: var(--muted-2); font-size: 13px; font-weight: 600; }
.legal-links a:hover { color: var(--accent-strong); }

:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .62); outline-offset: 3px; }

@media (max-width: 1000px) {
  .header-tools { margin-left: auto; }
  .scamcheck-home { min-height: auto; padding: 48px 0 36px; }
  .method-grid { grid-template-columns: 1fr; }
  .method-card { min-height: 0; }
  .community-band { grid-template-columns: 1fr; }
  .community-actions { justify-content: flex-start; }
  .legal-links { flex-wrap: wrap; }
}

/* Below this width the header also carries the .mobile-nav-toggle button
   (see .mobile-nav-toggle in styles.css) - fitting the brand, toggle,
   language switcher and login link into one row crowded them together and
   pushed the row past the viewport width. Stack into two rows instead: the
   brand centered on its own row, then toggle/language/login spread evenly
   across a second row. .header-tools becomes display:contents so its
   children (label, select, login link) act as direct grid items of
   .header-row instead of a nested box - the div itself carries no visual
   styling of its own, only layout, so this changes nothing but their
   position. */
@media (max-width: 900px) {
  .header-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "brand brand brand" "toggle lang login";
    gap: 10px;
    padding-block: 12px;
    min-height: 0;
  }
  .brand { grid-area: brand; justify-self: center; }
  .v2-header .brand-copy small { display: none; }
  /* toggle, language select and login stretch to fill their equal-width
     grid columns, so all three read as the same size instead of a small
     square next to two differently-sized controls. */
  .mobile-nav-toggle { grid-area: toggle; justify-self: stretch; width: auto; height: 42px; margin-left: 0; }
  .header-tools { display: contents; }
  .header-tools label { grid-area: lang; }
  .language-select { grid-area: lang; justify-self: stretch; min-height: 42px; text-align: center; text-align-last: center; }
  .header-tools [data-account-link] { grid-area: login; justify-self: stretch; min-height: 42px; }
  .v2-header .primary-nav a.nav-report-button { margin-left: 0; margin-top: 6px; }
}

@media (max-width: 720px) {
  .shell { width: min(100% - 28px, var(--shell)); }
  .brand-copy small { display: none; }
  .header-tools .button { padding-inline: 10px; }
  .scamcheck-home { padding-top: 36px; }
  .scamcheck-intro h1 { font-size: clamp(30px, 7.5vw, 40px); }
  .scamcheck-search-shell { padding: 15px; border-radius: 18px; }
  .quick-check-form { grid-template-columns: 1fr; }
  .result-metrics { grid-template-columns: 1fr; }
  .source-count-block { min-height: 88px; }
  .privacy-grid { grid-template-columns: 1fr; }
  .v2-form-grid { grid-template-columns: 1fr; }
  .v2-form-grid .wide { grid-column: auto; }
  .v2-footer-top { flex-direction: column; }
  .legal-links { justify-content: flex-start; flex-wrap: wrap; }
}

.legal-copy table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 13px; }
.legal-copy th, .legal-copy td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-copy th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
.legal-copy td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent-strong); white-space: nowrap; }

/* Account page: a logout button next to the title, reachable from every tab. */
.account-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.account-page-head h1 { margin-bottom: 0; }
.account-logout-button { min-height: 44px; padding: 10px 22px; font-size: 14px; border-color: var(--accent); }
.account-logout-button:hover { border-color: var(--accent-strong); }
@media (max-width: 620px) { .account-logout-button { width: 100%; justify-content: center; } }
/* Login page: "Create account" first, then "Forgot password?", both as clearly visible buttons. */
.auth-alt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.auth-alt-actions .button { min-height: 48px; padding: 12px 22px; font-size: 15px; border-color: var(--accent); }
.auth-alt-actions .button:hover { border-color: var(--accent-strong); }
@media (max-width: 620px) { .auth-alt-actions .button { flex: 1 1 100%; justify-content: center; } }
/* Replaces the registration form once the account exists. */
.register-welcome { display: grid; gap: 14px; padding: 30px 28px; }
.register-welcome p { margin: 0; color: var(--muted-2); font-size: 16px; line-height: 1.65; max-width: 62ch; }
.register-welcome-title { margin: 0; color: var(--text); font-size: clamp(24px, 3vw, 30px); line-height: 1.2; overflow-wrap: anywhere; }
.register-welcome .register-welcome-lead { color: var(--text); font-weight: 600; }
.register-welcome .register-welcome-mail { min-height: 0; overflow-wrap: anywhere; }
.register-welcome .register-welcome-thanks { color: var(--text); font-weight: 700; }
.register-welcome .register-welcome-login-hint { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.register-welcome .register-welcome-login { justify-self: start; min-height: 48px; padding: 12px 26px; font-size: 15px; }
@media (max-width: 620px) { .register-welcome .register-welcome-login { justify-self: stretch; justify-content: center; } }
.register-welcome:focus { outline: none; }
/* Offered next to a login refused as unconfirmed or a registration whose mail failed. */
.verification-resend-button { display: inline-flex; margin: 4px 12px 14px 0; }
/* The confirmation page: confirm by click (link scanners do not click). */
.verification-confirm-button { display: inline-flex; margin: 14px 0 4px; }
/* A translucent, near-neutral dark veil with only a hint of the logo's green:
   the page shows through (blurred), so the banner stands apart without shouting. */
.cookie-consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: linear-gradient(180deg, rgba(20, 32, 30, .86) 0%, rgba(13, 22, 21, .9) 100%); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); border-top: 1px solid rgba(93, 223, 153, .12); box-shadow: 0 -14px 44px rgba(0,0,0,.28); }
/* Without backdrop blur the page text behind would compete with the banner text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cookie-consent-banner { background: linear-gradient(180deg, rgba(20, 32, 30, .95) 0%, rgba(13, 22, 21, .97) 100%); }
}
/* About twice the height of the old one-line bar (capped at about 195 px on desktop): a title, the text, and one
   large "accept all" button; "necessary only" and "settings" stay visible on
   the first layer as two equal, quieter text actions below it. */
.cookie-consent-inner { max-width: var(--shell); margin: 0 auto; padding: 45px 24px 46px; display: flex; align-items: center; gap: 28px 48px; flex-wrap: wrap; }
.cookie-consent-copy { flex: 1 1 420px; display: grid; gap: 10px; }
.cookie-consent-copy p { margin: 0; }
.cookie-consent-title { color: var(--text); font-size: 21px; font-weight: 800; line-height: 1.25; }
.cookie-consent-body { color: var(--muted-2); font-size: 15px; line-height: 1.65; max-width: 62ch; }
.cookie-consent-actions { flex: 0 1 320px; display: grid; justify-items: center; gap: 14px; }
.cookie-consent-accept { width: 100%; min-height: 58px; padding: 15px 38px; border: 1px solid var(--accent-strong); border-radius: 14px; background: linear-gradient(180deg, #6fd0f5, #36a6d6); color: #03141c; font: inherit; font-size: 17px; font-weight: 850; letter-spacing: .01em; cursor: pointer; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16), 0 12px 32px rgba(var(--accent-rgb), .32); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.cookie-consent-accept:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .22), 0 14px 36px rgba(var(--accent-rgb), .4); }
.cookie-consent-accept:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.cookie-consent-secondary { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.cookie-consent-quiet { padding: 4px 2px; border: 0; background: none; color: #adbdb8; font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(173, 189, 184, .5); cursor: pointer; }
.cookie-consent-quiet:hover { color: var(--muted-2); text-decoration-color: currentColor; }
.cookie-consent-quiet:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 4px; }

.cookie-settings-panel { max-width: 760px; margin-top: 40px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.cookie-settings-panel h2 { margin: 0 0 18px; font-size: 20px; }
.cookie-settings-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.cookie-settings-row:first-of-type { border-top: 0; }
.cookie-settings-row strong { display: block; margin-bottom: 4px; }
.cookie-settings-row p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cookie-settings-locked { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.cookie-settings-toggle { position: relative; flex: 0 0 auto; display: inline-block; width: 42px; height: 24px; }
.cookie-settings-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cookie-settings-toggle span { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: background .15s ease; }
.cookie-settings-toggle span::before { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: transform .15s ease; }
.cookie-settings-toggle input:checked + span { background: var(--accent); }
.cookie-settings-toggle input:checked + span::before { transform: translateX(18px); }
.cookie-settings-toggle input:focus-visible + span { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.cookie-settings-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.cookie-settings-actions span { color: var(--success); font-size: 13px; font-weight: 700; }

@media (max-width: 620px) {
  /* Phones: text, then the full-width accept button, then the two quiet
     options - tall enough to be noticed, still leaving most of the page. */
  .cookie-consent-inner { padding: 22px 16px 18px; gap: 16px; }
  .cookie-consent-copy { flex: 1 1 100%; gap: 6px; }
  .cookie-consent-title { font-size: 17px; }
  .cookie-consent-body { font-size: 13px; line-height: 1.5; }
  .cookie-consent-actions { flex: 1 1 100%; gap: 10px; }
  .cookie-consent-accept { min-height: 52px; font-size: 16px; }
  .cookie-consent-quiet { font-size: 13px; }
  .legal-copy table { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* Homepage explanations stay readable without introducing another large panel. */
.home-method-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 28px 0; }
.home-method-steps li { min-width: 0; border-top: 1px solid var(--border-strong); padding-top: 18px; }
.home-step-number { color: var(--accent); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.home-method-steps h3 { margin: 10px 0 8px; font-size: 16px; line-height: 1.35; letter-spacing: -.015em; }
.home-method-steps p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted-2); }
.quick-result:not(:empty) { margin-top: 24px; }
.public-result-card { border: 0; border-top: 1px solid var(--border-strong); border-radius: 0; background: transparent; padding: 22px 0 0; }
.source-count-block { border-left: 1px solid var(--border-strong); padding-left: 24px; gap: 8px; }
.result-score-guide { margin: 0 0 6px; color: var(--text); font-size: 15px; line-height: 1.6; }
.result-source-guide { margin: 0; color: var(--muted-2); font-size: 14px; line-height: 1.6; }
.result-footer { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.result-footer .button { flex-shrink: 0; }
.result-topline > div { min-width: 0; }
.search-icon { color: var(--accent); }
.search-spinner { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 3px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: search-spin .8s linear infinite; }
@keyframes search-spin { to { transform: rotate(360deg); } }
.method-teaser-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 36px; align-items: center; }
.method-teaser-intro .v2-section-heading { margin-bottom: 0; }
.evidence-visual { width: 100%; max-width: 400px; height: auto; justify-self: end; }
.home-step-top { display: flex; align-items: center; justify-content: space-between; }
.home-step-icon { width: 32px; height: 32px; color: var(--accent-strong); }
.home-method-steps li { transition: border-color .25s ease; }
.home-method-steps li:hover { border-color: var(--accent); }
.button, .primary-nav a, .language-select { transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.quick-check-input-wrap { transition: border-color .2s ease, box-shadow .2s ease; }
.button:active:not(:disabled) { transform: translateY(1px); }
.scamcheck-intro { animation: hero-enter .6s cubic-bezier(.2,.7,.2,1) both; }
.scamcheck-search-shell { animation: hero-enter .65s .08s cubic-bezier(.2,.7,.2,1) both; }
.score-track span { transform-origin: left; animation: score-enter .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hero-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes score-enter { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) {
  .button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.16); }
}
@media (prefers-reduced-motion: reduce) {
  .scamcheck-intro, .scamcheck-search-shell, .score-track span { animation: none; }
  .search-spinner { animation: none; }
  .button:hover:not(:disabled), .button:active:not(:disabled) { transform: none; }
}
.v2-form-grid label { font-size: 14px; }
.method-card p, .no-result-card p { font-size: 14px; }

@media (max-width: 1000px) {
  .home-method-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .method-teaser-intro { grid-template-columns: 1fr; gap: 12px; }
  .evidence-visual { max-width: 340px; justify-self: center; }
  .scamcheck-stats { gap: 24px; margin-top: 18px; }
  .scamcheck-stat { flex-direction: column; align-items: center; gap: 0; font-size: 13px; }
  .scamcheck-stat strong { font-size: 25px; }
  .result-metrics { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
  .source-count-block { padding-left: 16px; }
  .trust-score-block strong { font-size: 40px; }
  .trust-score-block strong small { font-size: 16px; }
  .source-count-block strong { font-size: 32px; }
  .result-footer { flex-direction: column; align-items: stretch; }
  .result-footer .button { width: 100%; }
  .community-band { padding: 22px; }
}
@media (max-width: 440px) {
  .home-method-steps { grid-template-columns: 1fr; gap: 18px; }
  .home-method-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; }
  .home-step-number { grid-row: 1 / 3; padding-top: 2px; }
  .home-step-top { grid-row: 1 / 3; align-self: start; flex-direction: column; gap: 10px; }
  .home-step-icon { width: 28px; height: 28px; }
  .home-method-steps h3 { margin-top: 0; }
  .home-method-steps p { grid-column: 2; }
  .result-privacy-pill { font-size: 11px; }
}

/* A small padlock says "members only" wherever a login is needed - on the
   Specials overview and on the vendor profiles, so it lives in the shared sheet. */
.specials-tool-lock, .vendor-lock, .vendor-cta-lock { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--border-strong); border-radius: 7px; color: var(--muted-2); background: rgba(255, 255, 255, .04); flex: 0 0 auto; }
.specials-tool-lock svg, .vendor-lock svg, .vendor-cta-lock svg { width: 13px; height: 13px; }

/* "What you get as a member": on the login and registration pages and the
   vial tracker's gate. Five benefits, each with a picture of the real thing. */
.member-benefits { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--border); }
.member-benefits h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.03em; line-height: 1.15; }
.member-benefits-lead { max-width: 720px; margin: 12px 0 22px; color: var(--muted-2); font-size: 16px; line-height: 1.6; }
.member-benefits-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.member-benefit { display: flex; flex-direction: column; gap: 10px; min-width: 0; border: 1px solid var(--border); border-radius: 18px; padding: 18px; background: var(--surface-gradient); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.member-benefit-wide { grid-column: span 2; }
.member-benefit h3 { margin: 4px 0 0; font-size: 17px; letter-spacing: -.02em; }
.member-benefit p { margin: 0; color: var(--muted-2); font-size: 14px; line-height: 1.55; }
.member-benefit-visual { display: grid; place-items: center; min-height: 120px; border-radius: 12px; background: var(--surface-inset); overflow: hidden; }
.benefit-figure { width: 100%; max-width: 260px; height: auto; display: block; }
.member-benefit-vial .vial-svg { width: 62px; height: auto; padding: 8px 0; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35)); }
.member-benefit-vial .vial-liquid { transition: none; }
.member-benefit-chart { padding: 8px 6px 2px; }
.member-benefit-chart .level-chart { width: 100%; height: auto; }
.member-benefits-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 22px 0 0; }
.member-benefits-actions .button { min-height: 48px; padding: 12px 24px; font-size: 15px; }
.member-benefits-note { color: var(--muted); font-size: 13px; }
.member-benefits[hidden] { display: none; }
@media (max-width: 900px) { .member-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .member-benefits-grid { grid-template-columns: 1fr; } .member-benefit-wide { grid-column: auto; } }

/* The level chart is drawn on the tracker and as a preview on the login and
   registration pages, so its styles live in the shared sheet. */
.vial-level h3 { margin: 0 0 4px; font-size: 15px; }
.vial-level-subtitle { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.level-chart-wrap { position: relative; }
.level-chart { display: block; width: 100%; height: auto; touch-action: pan-y; }
.level-grid { stroke: rgba(151, 187, 206, .16); stroke-width: 1; }
.level-axis-label { fill: var(--muted); font-size: 10px; text-anchor: middle; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.level-axis-y { text-anchor: end; }
.level-area { fill: rgba(var(--accent-rgb), .12); }
.level-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.level-line.planned { stroke-dasharray: 5 4; stroke-opacity: .8; }
.level-now { stroke: rgba(233, 240, 243, .55); stroke-width: 1; }
.level-now-label { fill: var(--muted-2); font-size: 10px; text-anchor: middle; font-family: var(--font-sans); }
.level-dot { fill: var(--accent); stroke: var(--surface-inset); stroke-width: 2; }
.level-dot.planned { fill: var(--surface-inset); stroke: var(--accent); stroke-width: 2; }
.level-dot.current { fill: var(--accent-strong); stroke: var(--surface-inset); stroke-width: 2; }
.level-current-label { fill: var(--text); font-size: 11px; font-weight: 700; font-family: var(--font-sans); }
.level-current-label.right { text-anchor: end; }
.level-cursor { stroke: var(--accent-strong); stroke-width: 1; stroke-opacity: .7; }
.level-cursor-dot { fill: var(--accent-strong); stroke: var(--surface-inset); stroke-width: 2; }
.level-cursor[hidden], .level-cursor-dot[hidden] { display: none; }
.level-hit { cursor: crosshair; }
.level-tooltip { position: absolute; top: 6px; transform: translateX(10px); display: grid; gap: 1px; padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--panel); box-shadow: var(--shadow); pointer-events: none; white-space: nowrap; font-size: 12px; }
.level-tooltip.flip { transform: translateX(calc(-100% - 10px)); }
.level-tooltip strong { font-size: 13px; }
.level-tooltip span { color: var(--muted); font-size: 11px; }
.level-tooltip[hidden] { display: none; }

/* Compact variant: the five benefits in one row across the top of the login
   page, the registration page and the tracker's gate - the prompt to log in
   or register follows below, so a visitor sees what an account is for
   before being asked for one, all above the fold on a laptop screen. */
.member-benefits--compact { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 14px; }
.member-benefits--compact h2 { font-size: 18px; }
.member-benefits--compact .member-benefits-lead { display: none; }
.member-benefits--compact .eyebrow { margin-bottom: 4px; }
.member-benefits--compact .member-benefits-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.member-benefits--compact .member-benefit, .member-benefits--compact .member-benefit-wide { grid-column: auto; gap: 4px; padding: 8px; border-radius: 11px; box-shadow: none; }
.member-benefits--compact .member-benefit-visual { min-height: 54px; height: 54px; border-radius: 7px; }
.member-benefits--compact .benefit-figure { max-width: 108px; }
.member-benefits--compact .member-benefit-vial .vial-svg { width: 26px; padding: 1px 0; filter: none; }
.member-benefits--compact .member-benefit-chart { padding: 2px; }
.member-benefits--compact .member-benefit-chart .level-axis-label, .member-benefits--compact .member-benefit-chart .level-now-label, .member-benefits--compact .member-benefit-chart .level-current-label { display: none; }
.member-benefits--compact .member-benefit h3 { margin: 2px 0 0; font-size: 12.5px; line-height: 1.25; }
.member-benefits--compact .member-benefit p { font-size: 11.5px; line-height: 1.35; }
.member-benefits--compact .member-benefits-actions { display: none; }

/* Tracker gate below the benefits: the login form itself, laid out like the
   login page, so both places look the same. */
.vial-gate-layout { display: block; margin-top: 0; }
.vial-gate-layout[hidden] { display: none; }
.vial-gate { margin-top: 0; max-width: none; border: 0; padding: 0; background: none; box-shadow: none; }
.vial-gate[hidden] { display: none; }
.vial-gate h2 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.03em; line-height: 1.15; }
.vial-gate .eyebrow { margin-bottom: 4px; }
/* The tracker page starts gated (the gate is what a visitor sees first, no
   script needed): the intro shrinks to its title; once the script finds a
   signed-in member it restores the full intro. */
.vial-tracker-page:not(.is-signed-in) .page-intro { padding-top: 18px; max-width: none; }
.vial-tracker-page:not(.is-signed-in) .page-intro .hero-lead { display: none; }
.vial-tracker-page:not(.is-signed-in) .specials-back-row { display: none; }
.vial-tracker-page:not(.is-signed-in) .page-intro h1 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 14px; }
.vial-tracker-page:not(.is-signed-in) .page-intro .eyebrow { margin-bottom: 4px; }

/* Login and registration: the benefits above, the form below - compact. */
.auth-page--with-benefits { padding-top: 18px; }
.auth-page--with-benefits .auth-main { min-width: 0; }
.auth-page--with-benefits .auth-main .eyebrow { margin-bottom: 4px; }
.v2-section.auth-page--with-benefits .auth-main h1 { font-size: 26px; margin: 0 0 8px; letter-spacing: -.03em; line-height: 1.15; }
.auth-page--with-benefits .auth-main > p:not(.eyebrow) { margin: 0 0 10px; font-size: 14px; color: var(--muted-2); }
/* Same compact form on the login page and on the tracker gate. */
.auth-page--with-benefits .v2-form-card, .vial-gate-form { max-width: 720px; padding: 16px 18px; }
.auth-page--with-benefits .v2-form-grid input, .vial-gate-form .v2-form-grid input { padding: 9px 11px; }
.auth-page--with-benefits .v2-form-grid label, .vial-gate-form .v2-form-grid label { margin-bottom: 4px; font-size: 13px; }
.auth-page--with-benefits .form-status, .vial-gate-form .form-status { min-height: 0; margin: 8px 0; }
.auth-page--with-benefits .form-status:empty, .vial-gate-form .form-status:empty { display: none; }
.auth-page--with-benefits .auth-alt-actions, .vial-gate .auth-alt-actions { margin-top: 12px; }
.auth-page--with-benefits .auth-alt-actions .button, .vial-gate .auth-alt-actions .button { min-height: 40px; padding: 8px 16px; font-size: 14px; }

@media (max-width: 1000px) { .member-benefits--compact .member-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .member-benefits--compact .member-benefits-grid { grid-template-columns: 1fr; } }
  .member-benefits--compact { margin-top: 22px; }
}