/* ============================================================
   Breach Guard — design tokens
   ============================================================ */
:root {
  --midnight: #0b1f3a;
  --midnight-2: #122b4e;
  --ink: #16233a;
  --ink-soft: #47546b;
  --paper: #f6f8fb;
  --card: #ffffff;
  --line: #dde4ee;
  --teal: #0fa98a;
  --teal-dark: #0c8a71;
  --teal-soft: #e2f5f0;
  --amber: #f5a623;
  --amber-soft: #fdf3e0;
  --coral: #e4573d;
  --coral-soft: #fceae6;
  --blue-soft: #e7eefb;
  --blue: #0055c6;       /* V1 primary accent (matches home/Figma) */
  --blue-dark: #0046a5;  /* hover */
  --v1-ink: #181c24;
  --v1-dark: #262424;    /* dark surfaces: featured card, etc. */
  --radius: 14px;
  --shadow: 0 8px 28px rgba(11, 31, 58, 0.10);
  --font-display: "Sora", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 17px; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 1rem;
}
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; letter-spacing: -0.01em; }

/* ============================================================
   Header / footer
   ============================================================ */
/* Header rebuilt to match the V1 Figma design: white bar, blue brand mark,
   dark nav links, and a solid blue "Check my risk" pill. Aligned to the same
   1072px content column as the hero so the logo lines up with the hero copy. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid #ececf0;
}
.site-header-inner {
  width: min(1072px, 100% - 48px); margin: 0 auto; padding: 14px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: #0055c6; color: #ffffff;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-family: "Inter", sans-serif; font-weight: 700; font-size: 1.125rem; color: #181c24; }
.brand-tagline { font-family: "Instrument Sans", sans-serif; font-size: 0.72rem; color: #6b7280; font-weight: 400; }
.header-nav { display: flex; align-items: center; gap: 28px; }
.nav-link { text-decoration: none; font-family: "Inter", sans-serif; font-weight: 500; color: #181c24; font-size: 15px; }
.nav-link:hover { color: #0055c6; }
.header-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: #0055c6; color: #ffffff; text-decoration: none;
  font-family: "Inter", sans-serif; font-weight: 700; font-size: 15px;
  padding: 10px 18px; border-radius: 10px;
  transition: background 0.15s ease;
}
.header-cta:hover { background: #0047a6; }
.header-cta-arrow { font-size: 15px; line-height: 1; }

.auth-control { display: flex; align-items: center; gap: 10px; }
.auth-control .nav-link-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: "Inter", sans-serif; text-decoration: none; font-weight: 500;
  color: #181c24; font-size: 15px;
}
.auth-control .nav-link-btn:hover { color: #0055c6; }
.auth-control .header-user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--ink-soft);
}
.auth-control .header-user-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.auth-control .header-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Footer rebuilt to match the V1 Figma design: near-black band, Inter
   headings, muted links, and the big metallic BreachGuard wordmark. */
.site-footer { background: #262424; color: rgba(255, 255, 255, 0.6); margin-top: 0; }
.footer-inner { width: min(1072px, 100% - 48px); margin: 0 auto; padding: 64px 0 40px; }
.footer-top {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px;
  padding-bottom: 44px;
}
.footer-brand-col .footer-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: "Inter", sans-serif; font-weight: 700; color: #fff; margin-bottom: 16px; font-size: 1.15rem;
}
.footer-brand-mark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: #ffffff; color: #262424;
}
.footer-note { font-family: "Instrument Sans", sans-serif; font-size: 0.9rem; line-height: 1.55; max-width: 340px; color: rgba(255, 255, 255, 0.55); }
.footer-col h4 {
  font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45); margin-bottom: 16px; font-weight: 600;
}
.footer-col ul { list-style: none; display: grid; gap: 12px; }
.footer-col a { color: rgba(255, 255, 255, 0.8); text-decoration: none; font-family: "Instrument Sans", sans-serif; font-size: 0.95rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding-top: 8px;
}
.footer-wordmark { display: flex; align-items: center; gap: 18px; min-width: 0; }
.footer-wordmark-shield { width: 84px; height: 84px; flex: none; }
.footer-wordmark-text {
  font-family: "Inter", sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  font-size: clamp(2.75rem, 8vw, 5.5rem);
  background: linear-gradient(180deg, #f2f3f5 0%, #b7bcc4 52%, #74787f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-copy { font-family: "Instrument Sans", sans-serif; font-size: 0.8rem; line-height: 1.5; color: rgba(255, 255, 255, 0.4); max-width: 270px; text-align: right; flex: none; }

/* ============================================================
   Buttons
   ============================================================ */
.btn[hidden] { display: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: 999px;
  font-weight: 600; text-decoration: none;
  padding: 14px 28px; font-size: 1rem;
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(0, 85, 198, 0.28); }
.btn-primary:hover { background: var(--blue-dark); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink-soft); }
.btn-small { padding: 9px 18px; font-size: 0.9rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* ============================================================
   Layout helpers
   ============================================================ */
.page { animation: pageIn 0.35s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.section { max-width: 1280px; margin: 0 auto; padding: clamp(28px, 4vw, 48px) 24px; }
.section-title { font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin-bottom: 12px; }
.section-lede { color: var(--ink-soft); max-width: 620px; margin-bottom: 36px; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--v1-ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 15px; margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ============================================================
   Home — hero
   ============================================================ */
/* Hero rebuilt to match the V1 Figma design (1280 desktop frame).
   Content column 504px, media 504px, 64px gap => 1072px content width. */
.hero {
  position: relative;
  background: #ffffff;
  color: #181c24;
}
.hero-inner {
  position: relative;
  width: min(1072px, 100% - 48px);
  margin-inline: auto;
  padding: 56px 0 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hero-title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #181c24;
}
.hero-accent { color: #0055c6; white-space: nowrap; }
.hero-sub {
  margin: 0;
  max-width: 504px;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #424655;
}
.hero-cta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hero-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hero-feat { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero-feat-ic {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  background: var(--blue-soft); color: var(--blue); display: grid; place-items: center;
}
.hero-feat-ic svg { width: 24px; height: 24px; }
.hero-feat-txt h3 { margin: 0 0 4px; font-family: "Inter", sans-serif; font-weight: 700; font-size: 15px; color: #181c24; }
.hero-feat-txt p { margin: 0; font-family: "Instrument Sans", sans-serif; font-size: 13.5px; line-height: 1.4; color: #424655; }
.btn-hero-arrow { font-weight: 600; margin-left: 2px; }
.hero-trust {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 0;
  font-family: "Instrument Sans", sans-serif; font-size: 14px; color: #6b7280;
}
.hero-trust-ic { width: 17px; height: 17px; flex: none; color: #9aa3b2; }
/* Right column: video stacked above the trust badge. */
.hero-right { display: flex; flex-direction: column; align-items: center; gap: 20px; min-width: 0; width: 100%; }
.hero-trustbar {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: 0; text-align: center;
}
.hero-trustbar-title { font-family: "Inter", sans-serif; font-weight: 700; font-size: 15px; color: #181c24; }
.hero-rating {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.hero-stars { color: #f5a623; font-size: 17px; letter-spacing: 2px; line-height: 1; }
.hero-rating-score { font-family: "Inter", sans-serif; font-weight: 700; font-size: 14px; color: #181c24; }
.btn-hero-full { width: 100%; justify-content: center; padding: 18px 24px; font-size: 17px; }
.btn-hero {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 32px; border-radius: 12px; border: none;
  background: #0055c6; color: #ffffff;
  font-family: "Inter", sans-serif; font-weight: 700; font-size: 16px; line-height: 24px;
  text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-hero:hover { background: #0047a6; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 85, 198, 0.28); }
.btn-hero-ic { width: 20px; height: 20px; flex: none; }
.hero-terms {
  margin: 0;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: "Inter", sans-serif; font-weight: 400; font-size: 12px; line-height: 16px;
  color: rgba(66, 70, 85, 0.6);
}
.hero-terms-arrow { font-size: 13px; }
.hero-media {
  position: relative;
  width: 100%; min-width: 0;
  aspect-ratio: 504 / 464;
  border-radius: 24px; border: 1px solid #dadada;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  background: var(--midnight);
}
.hero-video {
  width: 100%; height: 100%; display: block;
  object-fit: contain; /* show the whole 16:9 frame, never crop */
  background: var(--midnight);
}

/* Custom hero video controls: play/pause, seek bar, mute/unmute */
.hero-video-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0));
  z-index: 2;
}
.hvc-btn {
  flex: 0 0 auto;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.16); color: #fff; cursor: pointer;
  transition: background 0.15s ease;
}
.hvc-btn:hover { background: rgba(255,255,255,0.3); }
.hvc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hvc-btn svg { width: 20px; height: 20px; }
/* icon toggling driven by JS state classes (specificity kept above .hvc-btn svg) */
.hvc-btn .hvc-ic-play, .hvc-btn .hvc-ic-pause, .hvc-btn .hvc-ic-muted, .hvc-btn .hvc-ic-sound { display: none; }
#hvcPlay.is-playing .hvc-ic-pause { display: block; }
#hvcPlay:not(.is-playing) .hvc-ic-play { display: block; }
#hvcMute.is-muted .hvc-ic-muted { display: block; }
#hvcMute:not(.is-muted) .hvc-ic-sound { display: block; }
.hvc-time { flex: 0 0 auto; color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0.95; }
.hvc-seek {
  flex: 1 1 auto; min-width: 40px; height: 5px; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,0.32); border-radius: 6px; cursor: pointer;
}
.hvc-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%; background: #fff; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.hvc-seek::-moz-range-thumb {
  width: 14px; height: 14px; border: none; border-radius: 50%; background: #fff; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.hvc-seek:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* phone mock */
.phone-mock-wrap { position: relative; justify-self: center; }
.phone-mock {
  position: relative; z-index: 1;
  width: min(280px, 80%); margin: 0 auto; border-radius: 34px;
  background: #0a1830; border: 1.5px solid rgba(255,255,255,0.14);
  padding: 14px 10px 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  animation: phoneFloat 6s ease-in-out infinite;
}
.phone-mock.static { width: 100%; max-width: 260px; animation: none; }
@keyframes phoneFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.phone-notch { width: 90px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.14); margin: 0 auto 14px; }
.call-card {
  background: #13294a; border-radius: 16px; padding: 16px; margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0; animation: callIn 0.5s ease forwards;
}
.call-card:nth-child(2) { animation-delay: 0.5s; }
.call-card:nth-child(3) { animation-delay: 1s; }
.call-card:nth-child(4) { animation-delay: 1.5s; }
@keyframes callIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.call-card .call-num { font-family: var(--font-mono); font-size: 0.95rem; color: #fff; }
.call-card .call-tag {
  display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
}
.tag-blocked { background: rgba(228, 87, 61, 0.18); color: #ff9c8a; }
.tag-safe { background: rgba(15, 169, 138, 0.18); color: #7ee8cf; }
.call-detail { font-size: 0.78rem; color: #c4d1e4; margin-top: 8px; }
.call-reco { font-size: 0.78rem; font-weight: 600; color: #fff; margin-top: 6px; }
.phone-caption { text-align: center; font-size: 0.78rem; color: #8fa3c0; margin-top: 10px; }

/* hero phone row: 3 separate static phone mockups, side by side, no overlap/no rotation */
.hero-phone-fan { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; width: 100%; margin: 0 auto; }
.hero-phone-fan .showcase-phone { display: flex; justify-content: center; flex: 1 1 0; }
.hero-phone-fan .showcase-phone .phone-mock.static {
  width: 100%; max-width: 220px; aspect-ratio: 9 / 19; overflow: hidden;
  padding: 16px 12px 18px; display: flex; flex-direction: column;
}
.hero-phone-fan .phone-notch { margin-bottom: 12px; flex-shrink: 0; }
.hero-phone-fan .call-card { padding: 13px; margin-bottom: 9px; flex-shrink: 0; }
.hero-phone-fan .call-card .call-num { font-size: 0.85rem; }
.hero-phone-fan .call-card .call-tag { font-size: 0.66rem; padding: 3px 9px; margin-top: 7px; }
.hero-phone-fan .phone-caption { font-size: 0.72rem; margin-top: 8px; }
.hero-phone-fan .showcase-label { font-size: 0.66rem; margin-bottom: 12px; flex-shrink: 0; }
.hero-phone-fan .scam-row { padding: 9px 2px; gap: 9px; flex-shrink: 0; }
.hero-phone-fan .scam-label { font-size: 0.78rem; }
.hero-phone-fan .scam-flag { font-size: 0.66rem; padding: 3px 9px; }
.hero-phone-fan .explain-card { padding: 12px; margin-bottom: 10px; flex-shrink: 0; }
.hero-phone-fan .explain-eyebrow { font-size: 0.62rem; }
.hero-phone-fan .explain-body { font-size: 0.72rem; line-height: 1.4; }
.showcase-phone { display: flex; justify-content: center; }
.showcase-icon {
  width: 48px; height: 48px; margin: 6px auto 16px; border-radius: 13px;
  display: grid; place-items: center;
}
.showcase-icon-lock { background: rgba(126, 232, 207, 0.14); color: #7ee8cf; }
.showcase-heading { color: #fff; font-size: 1rem; text-align: center; margin-bottom: 8px; }
.showcase-body { color: #c4d1e4; font-size: 0.85rem; text-align: center; }
.showcase-label {
  display: block; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: #7ee8cf; text-align: center; margin-bottom: 14px;
}

/* scam pattern list (showcase screen 2) */
.scam-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.scam-row:last-of-type { border-bottom: none; }
.scam-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex-shrink: 0; }
.scam-label { flex: 1; color: #fff; font-size: 0.85rem; }
.scam-flag {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: #ff9c8a; background: rgba(228, 87, 61, 0.18); padding: 3px 8px; border-radius: 999px;
}

/* plain-language explanation (showcase screen 3) */
.explain-card { background: #13294a; border-radius: 16px; padding: 16px; border: 1px solid rgba(255,255,255,0.08); }
.explain-eyebrow {
  display: block; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: #7ee8cf; margin-bottom: 8px;
}
.explain-body { color: #c4d1e4; font-size: 0.85rem; line-height: 1.55; }

.link-btn {
  background: none; border: none; padding: 0; margin: 0; color: var(--teal-dark); font-weight: 700;
  text-decoration: underline; cursor: pointer; font-size: inherit; font-family: inherit;
}
.link-btn:hover { color: var(--ink); }
.link-btn-light { color: #7ee8cf; }
.link-btn-light:hover { color: #fff; }

/* pain-point stats — its own full-width section, 3 across */
.pain-subhead { font-weight: 700; font-size: 1.05rem; color: var(--ink); max-width: 620px; margin-bottom: 14px; }
.hero-pain-stats { display: flex; flex-direction: column; gap: 10px; }
.pain-grid { flex-direction: row; flex-wrap: wrap; gap: 20px; margin-top: 8px; }
.pain-grid .pain-stat { flex: 1 1 240px; }
.pain-stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); }
.pain-num { font-family: var(--font-mono); font-weight: 700; font-size: 1.4rem; color: var(--teal-dark); }
.pain-lbl { font-size: 0.85rem; color: var(--ink-soft); margin-top: 5px; }
.pain-note { font-size: 0.82rem; color: var(--ink-soft); font-style: italic; margin-top: 8px; }
.pain-goodnews {
  margin-top: 28px; padding: 24px 26px; border-radius: var(--radius);
  background: var(--teal-soft); border: 1px solid #bfe8dd;
}
.pain-goodnews .eyebrow { margin-bottom: 8px; }
.pain-goodnews-lede { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin-bottom: 10px; }
.pain-goodnews p { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 8px; }
.pain-goodnews p:last-child { margin-bottom: 0; }
.pain-goodnews-close { font-weight: 700; color: var(--teal-dark); }

/* Report-highlights popup — real key figures inline, since the source PDF
   can't be embedded (forced-download response, confirmed directly). */
.report-modal-overlay, .pdf-modal-overlay {
  position: fixed; inset: 0; background: rgba(11, 31, 58, 0.72); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.report-modal {
  position: relative; background: #fff; border-radius: 20px;
  width: min(480px, 100%); max-height: 85vh; padding: 28px;
  display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.report-modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; padding-right: 32px; }
.report-modal-header h3 { font-size: 1.1rem; margin-bottom: 4px; }
.report-modal-header p { font-size: 0.82rem; color: var(--ink-soft); }
.report-modal-body { overflow-y: auto; overflow-x: hidden; margin-bottom: 18px; }
.report-modal-body h4 { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--blue-dark); margin: 18px 0 8px; }
.report-modal-body h4:first-child { margin-top: 0; }
.report-alert { border-radius: 10px; padding: 12px 14px; margin: 6px 0 8px; font-size: 0.88rem; line-height: 1.5; }
.report-alert-danger { background: var(--coral-soft); border: 1px solid #f3b7ab; color: #9a2515; }
.report-alert-caution { background: var(--amber-soft); border: 1px solid #f0d99a; color: #8a5d0c; }
.report-facts { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 4px 0 6px; }
.report-fact { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; font-size: 0.86rem; border-bottom: 1px solid var(--line); }
.report-fact:last-child { border-bottom: none; }
.report-fact span { color: var(--ink-soft); }
.report-fact strong { color: var(--ink); font-weight: 600; text-align: right; word-break: break-word; }
/* "Number details" for the phone report: two field-pairs per row = four
   columns (label, value, label, value). Collapses to two columns on mobile. */
.phone-info-grid {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  margin: 4px 0 6px; font-size: 0.86rem;
}
.phone-info-grid > div { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.phone-info-grid .pig-label { color: var(--ink-soft); white-space: nowrap; }
.phone-info-grid .pig-value { color: var(--ink); font-weight: 600; word-break: break-word; }
/* Divider before the second pair on each row (children 3, 7, 11, … = 4n+3). */
.phone-info-grid > div:nth-child(4n+3) { border-left: 1px solid var(--line); }
@media (max-width: 560px) {
  .phone-info-grid { grid-template-columns: max-content 1fr; }
  .phone-info-grid > div:nth-child(4n+3) { border-left: none; }
}
.report-stat-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem;
}
.report-stat-row:last-child { border-bottom: none; }
.report-stat-row span { color: var(--ink-soft); }
.report-stat-row strong { font-family: var(--font-mono); color: var(--ink); white-space: nowrap; }

/* Mobile breach report — risk-level badges reuse the same three colors as
   the quiz's .band-low/.band-moderate/.band-high, plus a "critical" tier
   (filled, not just tinted) for anything more severe than "high". */
.risk-badge {
  display: inline-flex; align-items: center; font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.risk-badge-critical { background: var(--coral); color: #fff; }
.risk-badge-high { background: var(--coral-soft); color: var(--coral); }
.risk-badge-moderate { background: var(--amber-soft); color: #9a6a12; }
.risk-badge-low { background: var(--blue-soft); color: var(--blue-dark); }

.report-summary-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 14px 16px; margin-bottom: 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px;
}
.report-summary-count { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-soft); }
.report-summary-count strong { color: var(--ink); }

/* Report letterhead/title block — mirrors the PDF export's layout so the
   on-screen result reads as a formatted report, not a stack of app cards. */
.report-letterhead { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.report-letterhead .brand-mark { width: 26px; height: 26px; border-radius: 8px; }
.report-letterhead .brand-name { font-size: 0.86rem; }
.report-title-block { margin-bottom: 16px; }
.report-title-block h2 { font-size: 1.3rem; margin-bottom: 4px; }
.report-title-block p { font-size: 0.84rem; color: var(--ink-soft); }
.report-result-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 16px; margin-bottom: 18px;
}
.report-result-bar strong { font-size: 0.86rem; }
.report-disclaimer {
  font-size: 0.72rem; color: var(--ink-soft); border-top: 1px solid var(--line);
  padding-top: 14px; margin-top: 18px;
}

.report-finding { display: flex; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.report-finding:last-child { border-bottom: none; }
.report-finding-accent { width: 4px; border-radius: 2px; flex-shrink: 0; align-self: stretch; }
.report-finding-accent-critical, .report-finding-accent-high { background: var(--coral); }
.report-finding-accent-moderate { background: var(--amber); }
.report-finding-accent-low { background: var(--blue); }
.report-finding-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.report-stat-row strong em { font-style: normal; color: var(--teal-dark); font-size: 0.8rem; margin-left: 4px; }

/* Shared breach logo chip (timeline cards). */
.breach-logo { width: 40px; height: 40px; border-radius: 9px; object-fit: contain; background: #fff; border: 1px solid var(--line); flex-shrink: 0; }
.breach-logo-fallback { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: var(--teal-dark); background: var(--teal-soft); border-color: transparent; }

/* Home-page section CTA: centered button flanked by inward-nudging chevrons. */
.attention-cta { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 4px auto 48px; padding: 0 16px; }
.attention-cta-btn { text-align: center; }
.attention-chevrons { display: inline-flex; color: var(--teal); flex-shrink: 0; }
.attention-chevrons-left { animation: chev-nudge-right 1.1s ease-in-out infinite; }
.attention-chevrons-right { animation: chev-nudge-left 1.1s ease-in-out infinite; }
@keyframes chev-nudge-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes chev-nudge-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .attention-chevrons-left, .attention-chevrons-right { animation: none; }
}

/* Hero scam-card carousel: 3 cards visible, auto-advancing (2-up tablet,
   1-up mobile for readability), with manual navigation dots. */
/* min-width:0 stops this grid item's wide flex track from blowing out the
   hero column past its 1.3fr share (which pushed cards off-screen). */
.scam-carousel { width: 100%; min-width: 0; }
.scam-carousel-viewport { overflow: hidden; width: 100%; }
.scam-carousel-track { display: flex; gap: 16px; align-items: flex-start; }
/* Each card is half the carousel width (2 visible at a time). */
.scam-carousel-card { flex: 0 0 calc((100% - 16px) / 2); min-width: 0; display: flex; justify-content: center; align-items: flex-start; }
/* Every slide is one fixed size and a proper phone (portrait) ratio; content
   sits at the top and the dark frame fills the rest, like a real phone screen. */
.scam-carousel-card .phone-mock {
  width: 100%; max-width: 248px; aspect-ratio: 10 / 19; margin: 0 auto;
  box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column;
}
/* Hide the scam-card carousel entirely on mobile. */
@media (max-width: 760px) {
  .scam-carousel { display: none; }
}
.scam-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.carousel-nav-dot {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  background: var(--line); transition: background 0.2s, transform 0.2s;
}
.carousel-nav-dot:hover { background: var(--teal); }
.carousel-nav-dot.active { background: var(--teal); transform: scale(1.3); }

/* Full-screen overlay + spinner shown during the post-login handshake. */
.auth-loading-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--paper);
}
.auth-loading-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid var(--line); border-top-color: var(--teal);
  animation: auth-spin 0.8s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-loading-text { color: var(--ink-soft); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) { .auth-loading-spinner { animation-duration: 1.8s; } }

/* Indeterminate progress bar for the "checking…" state. */
.check-progress { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 18px; }
.check-progress-bar { height: 100%; width: 40%; border-radius: 999px; background: var(--teal); animation: check-progress-slide 1.3s ease-in-out infinite; }
@keyframes check-progress-slide {
  0% { margin-left: -40%; }
  100% { margin-left: 100%; }
}

/* ============================================================
   Email breach report — vertical timeline. Alternating cards on
   wide screens, single-sided (spine on the left) on narrow ones.
   ============================================================ */
.breach-timeline { position: relative; margin: 20px 0 8px; }
.breach-timeline::before {
  content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%;
  width: 2px; background: var(--line); transform: translateX(-50%);
}
.bt-entry { position: relative; width: 50%; box-sizing: border-box; padding: 0 40px 30px; }
.bt-entry.bt-left { left: 0; }
.bt-entry.bt-right { left: 50%; }
.bt-node {
  position: absolute; top: 0; width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--midnight); color: #fff; z-index: 1;
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; line-height: 1.05;
  border: 4px solid #fff; box-shadow: 0 2px 8px rgba(11, 31, 58, 0.18);
}
.bt-node-muted { background: var(--ink-soft); }
.bt-left .bt-node { right: -27px; }
.bt-right .bt-node { left: -27px; }
.bt-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: 0 1px 3px rgba(11, 31, 58, 0.05); }
.bt-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.bt-card-head h4 { font-size: 1rem; font-weight: 700; word-break: break-word; min-width: 0; }
.bt-desc { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.bt-compromised { margin-top: 12px; }
.bt-compromised strong { font-size: 0.85rem; }
.bt-compromised ul { margin: 6px 0 0; padding-left: 18px; }
.bt-compromised li { font-size: 0.85rem; color: var(--ink-soft); margin: 2px 0; }
.bt-details-btn {
  margin-top: 14px; padding: 7px 16px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1.5px solid var(--teal); color: var(--teal-dark);
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
}
.bt-details-btn:hover { background: var(--teal-soft); }
.bt-details { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.bt-detail-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.82rem; padding: 3px 0; }
.bt-detail-row span { color: var(--ink-soft); }
.bt-detail-link { display: inline-block; margin-top: 8px; font-size: 0.82rem; color: var(--teal-dark); font-weight: 600; }

@media (max-width: 760px) {
  .breach-timeline::before { left: 20px; }
  .bt-entry, .bt-entry.bt-left, .bt-entry.bt-right { width: 100%; left: 0; padding: 0 0 26px 52px; }
  .bt-left .bt-node, .bt-right .bt-node { left: -7px; right: auto; }
}

/* ============================================================
   Scams Around You — result cards
   ============================================================ */
.nearby-result {
  display: flex; gap: 12px; padding: 16px 4px; border-bottom: 1px solid var(--line);
}
.nearby-result:last-child { border-bottom: none; }
.nearby-result-accent { width: 4px; border-radius: 2px; flex-shrink: 0; align-self: stretch; background: var(--teal); }
.nearby-result-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nearby-result-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft);
}
.nearby-result-chip {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  background: var(--teal-soft); color: var(--teal-dark); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.nearby-result-distance { color: var(--ink-soft); font-weight: 600; }
.nearby-empty {
  text-align: center; padding: 40px 20px; color: var(--ink-soft);
}

/* Search-left / results-right split layout — collapses to a single centered
   column while .nearby-results-col is [hidden] (no search run yet). The
   search card is comfortably wide on its own (matching the standalone
   quiz-card look elsewhere) and only narrows to make room once results
   actually appear beside it — without the .compact modifier, the 3-tab
   toggle row gets squeezed and its labels wrap awkwardly. */
.nearby-layout { display: flex; gap: 32px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.nearby-search-col { flex: 1 1 480px; max-width: 480px; width: 100%; }
.nearby-search-col.compact { flex: 0 0 430px; max-width: 430px; }
.nearby-results-col { flex: 1 1 480px; min-width: 0; max-width: 720px; }
.nearby-results-col[hidden] { display: none; }

/* Scanning-map animation */
.scan-map-wrap { text-align: center; padding: 28px 20px; }
.scan-map-svg { width: 100%; max-width: 460px; height: auto; margin: 0 auto; display: block; }
.scan-map-outline { fill: rgba(0, 85, 198, 0.06); stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; animation: scanOutlinePulse 2s ease-in-out infinite; }
.scan-map-borders { fill: none; stroke: var(--blue); stroke-width: 1; stroke-linejoin: round; opacity: 0.35; }
.scan-map-beam { animation: scanBeamMove 10s linear; }
.scan-map-dot { fill: var(--blue); animation: scanDotPulse 1.2s ease-in-out infinite; }
@keyframes scanBeamMove { from { transform: translateX(0); } to { transform: translateX(1200px); } }
@keyframes scanOutlinePulse { 0%, 100% { stroke-opacity: 0.55; } 50% { stroke-opacity: 1; } }
@keyframes scanDotPulse { 0%, 100% { opacity: 0.15; r: 3; } 50% { opacity: 1; r: 6; } }
.scan-map-status { margin-top: 14px; }
.scan-map-percent { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; color: var(--blue); }
.scan-map-label { font-size: 0.86rem; color: var(--ink-soft); margin-top: 4px; }

/* Pagination */
.nearby-pagination { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.nearby-pagination-summary { font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 10px; text-align: center; }
.nearby-pagination-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.nearby-page-btn {
  font-family: var(--font-mono); font-size: 0.78rem; padding: 6px 10px; border-radius: 8px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
}
.nearby-page-btn:hover:not(:disabled) { border-color: var(--teal); color: var(--teal-dark); }
.nearby-page-btn.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.nearby-page-btn:disabled { opacity: 0.4; cursor: default; }
.nearby-page-next { min-width: 52px; display: inline-flex; align-items: center; justify-content: center; }
.nearby-spinner {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(15, 169, 138, 0.3); border-top-color: var(--teal);
  animation: nearbySpin 0.7s linear infinite;
}
@keyframes nearbySpin { to { transform: rotate(360deg); } }
.nearby-load-error { display: block; color: var(--coral); margin-top: 4px; }

@media (max-width: 760px) {
  .nearby-search-col { flex-basis: 100%; max-width: 100%; }
  .nearby-results-col { flex-basis: 100%; }
}
.report-modal.expanded {
  width: min(1000px, 94vw); max-height: 92vh; height: 92vh; padding: 18px;
}
.report-modal.expanded .report-modal-header { margin-bottom: 8px; }
.report-modal.expanded .report-modal-header p { display: none; }
.report-modal.expanded .report-modal-header h3 { font-size: 0.95rem; margin-bottom: 0; }
.report-pdf-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.report-pdf-view[hidden] { display: none; }
.report-pdf-toolbar { display: flex; align-items: center; margin-bottom: 8px; }
/* .report-pdf-frame used to be the <iframe> itself; it's now a plain div
   hosting one <canvas> per page, rendered by pdf.js (see renderPdfInto in
   app.js) instead of the browser's native PDF viewer — so it owns its own
   scrolling now, the way an iframe's internal document used to. */
.report-pdf-frame {
  flex: 1; width: 100%; min-height: 0; border: 1px solid var(--line); border-radius: 12px;
  overflow-y: auto; overflow-x: hidden; background: #4a4f54; padding: 14px 0;
}
.pdf-page-list { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pdf-page { width: calc(100% - 28px); max-width: 720px; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.3); position: relative; }
.pdf-page-canvas { display: block; width: 100%; height: 100%; }
.pdf-error { padding: 20px; color: #fff; font-size: 0.88rem; text-align: center; }
.pdf-error a { color: var(--teal-soft, #7fd8c5); }
.pdf-loading-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; border-radius: 12px; color: var(--ink-soft); font-size: 0.9rem;
}
.pdf-loading-overlay[hidden] { display: none; }
.pdf-spinner {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid rgba(15, 169, 138, 0.25); border-top-color: var(--teal);
  animation: nearbySpin 0.8s linear infinite;
}
.pdf-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
  display: grid; place-items: center; cursor: pointer; font-size: 1rem; color: var(--ink);
}
.pdf-modal-close:hover { border-color: var(--teal); color: var(--teal-dark); }


/* ============================================================
   Home — trust strip (encryption / privacy commitments)
   ============================================================ */
/* V1 ticker: pale mint bar, dark uppercase text, blue "Read more". */
.trust-strip { background: #e6f5ee; overflow: hidden; padding: 9px 0; }
.trust-marquee {
  display: flex; align-items: center; width: max-content;
  animation: trustMarquee 20s linear infinite;
}
.trust-strip:hover .trust-marquee { animation-play-state: paused; }
.trust-marquee p {
  color: #181c24; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500;
  line-height: 1; white-space: nowrap; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0 48px; flex-shrink: 0;
}
.trust-marquee strong { color: #181c24; font-weight: 700; }
.trust-readmore {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: #0055c6;
}
.trust-readmore:hover { text-decoration: underline; }
/* Two copies of the same sentence placed back to back, sliding from
   translateX(0) to translateX(-50%) — since that's exactly one copy's
   width, the moment the first copy finishes crossing off to the left the
   second is in the exact position the first started in, so the loop has
   no visible seam. Direction is right-to-left (decreasing translateX). */
@keyframes trustMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   Home — "Your digital safety net" (icon-card grid)
   ============================================================ */
.safety-net-desc { max-width: 620px; margin-bottom: 28px; }
.safety-net-desc p { color: var(--ink-soft); margin-bottom: 8px; }
.safety-net-desc p:last-child { margin-bottom: 0; font-weight: 600; color: var(--ink); }
.safety-net-icon { font-size: 20px; }

/* ============================================================
   Home — stat cards with mini charts
   ============================================================ */
.stat-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 8px; }
.stat-chart-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; text-align: left;
}
.stat-chart-card .num { font-family: var(--font-mono); font-weight: 700; font-size: 1.9rem; color: var(--midnight); }
.stat-chart-card .lbl { font-size: 0.88rem; color: var(--ink-soft); margin: 4px 0 16px; }
.stat-chart-card svg { width: 100%; height: auto; display: block; }

/* ============================================================
   Home — sticky stacking feature cards ("Smarter, safer protection")
   Each card sticks at the same top offset; later cards naturally
   cover earlier ones as the page scrolls, echoing guard.io's effect.
   ============================================================ */
.stack-intro { padding-bottom: 8px; }
.stack-cards-wrap {
  max-width: 1280px; margin: 0 auto; padding: 8px 24px clamp(28px, 4vw, 48px);
}
.stack-card {
  position: sticky; top: 84px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 0;
  min-height: 420px;
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: 0 24px 60px rgba(11, 31, 58, 0.14);
  margin-bottom: 32px; overflow: hidden;
}
.stack-card:last-child { margin-bottom: 0; }
.stack-card-content { padding: clamp(32px, 5vw, 56px); }
.stack-card-icon {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--teal-soft); color: var(--teal-dark); margin-bottom: 16px;
}
.stack-card-type {
  display: block; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal-dark); margin-bottom: 10px;
}
.stack-card-content h3 { font-size: clamp(1.2rem, 2.4vw, 1.55rem); margin-bottom: 10px; }
.stack-card-content p { color: var(--ink-soft); font-size: 0.98rem; max-width: 420px; }
.stack-card-media {
  height: 100%; min-height: 420px; display: flex; align-items: center; justify-content: center;
  background: var(--paper); padding: 32px;
}
.stack-card-media .phone-mock,
.stack-card-media .text-mock,
.stack-card-media .msg-alert,
.stack-card-media .leak-mock,
.stack-card-media .local-alerts-mock { box-shadow: none; }

/* text-screening mockup (unused now that .msg-alert replaced it in the
   scam-message stack card — kept in case another mockup wants plain chat
   bubbles again). */
.text-mock {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
.text-bubble {
  background: var(--paper); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
  font-size: 0.86rem; color: var(--ink-soft); position: relative;
}
.text-bubble.flagged { background: var(--coral-soft); color: #8a3521; }
.text-bubble .flag-row {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 0.74rem; font-weight: 700; color: var(--coral); text-transform: uppercase; letter-spacing: 0.04em;
}

/* scam-message alert mockup — a diagnostic-report style card (why it's
   flagged + what to do), replacing the old chat-bubble mockup so it reads
   as reassuring guidance rather than just a flagged label. */
.msg-alert {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); text-align: left;
}
.msg-alert-header { font-weight: 700; color: var(--coral); font-size: 0.95rem; margin-bottom: 14px; }
.msg-alert-label {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 6px;
}
.msg-alert-reasons { list-style: none; margin-bottom: 14px; display: grid; gap: 4px; }
.msg-alert-reasons li { font-size: 0.86rem; color: var(--ink-soft); padding-left: 14px; position: relative; }
.msg-alert-reasons li::before { content: "•"; position: absolute; left: 0; color: var(--coral); }
.msg-alert-reco { font-weight: 700; color: var(--ink); font-size: 0.9rem; }

/* leak-scan mockup */
.leak-mock {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow); text-align: center;
}
.leak-mock .leak-item {
  display: flex; justify-content: space-between; font-size: 0.84rem; padding: 8px 0;
  border-top: 1px solid var(--line); color: var(--ink-soft);
}
.leak-mock .leak-item:first-of-type { border-top: none; }
.leak-mock .leak-ok { color: var(--teal-dark); font-weight: 600; }
.leak-lastchecked { font-size: 0.76rem; color: var(--ink-soft); margin-top: 14px; text-align: center; }

/* local-alerts mockup */
.local-alerts-mock {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); text-align: left;
}
.local-alerts-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.local-alerts-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--teal-soft); color: var(--teal-dark);
}
.local-alerts-title { font-weight: 700; color: var(--ink); font-size: 1rem; }
.local-alerts-list { list-style: none; display: grid; gap: 12px; margin-bottom: 14px; }
.local-alerts-list li { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--ink-soft); }
.local-alert-icon { flex-shrink: 0; color: var(--amber); font-size: 1.05rem; }
.local-alerts-updated { font-size: 0.76rem; color: var(--ink-soft); }

/* ============================================================
   Home — features & stats
   ============================================================ */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.feature-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px;
}
.feature-card h3 { font-size: 1.05rem; margin: 14px 0 8px; }
.feature-stat { font-family: var(--font-mono); font-weight: 700; font-size: 0.86rem; color: var(--teal-dark); margin-bottom: 8px; }
.feature-card p { font-size: 0.92rem; color: var(--ink-soft); }
.feature-checklist { list-style: none; margin-top: 14px; display: grid; gap: 6px; }
.feature-checklist li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.82rem; color: var(--ink-soft); }
.feature-checklist li::before { content: "✓"; color: var(--teal-dark); font-weight: 700; flex-shrink: 0; }
.feature-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--teal-soft); color: var(--teal-dark);
}
.card-image-placeholder {
  width: 100%; aspect-ratio: 320 / 245; border-radius: 12px; overflow: hidden; margin-bottom: 18px;
}
.card-image-placeholder svg { display: block; width: 100%; height: 100%; }

/* ============================================================
   Home — 3D cover-flow carousel (feature grid)
   The centered item sits flat; others rotate away in 3D perspective,
   scale down, and fade based on distance from the viewport center.
   ============================================================ */
.coverflow-wrap { position: relative; max-width: 1280px; margin: 0 auto; padding: 8px 0 clamp(28px, 4vw, 48px); }
.coverflow-viewport {
  /* No scroll-snap-type here: combined with the wheel handler's programmatic
     scrollLeft writes, snap correction was reverting those writes on the
     same tick, which is why wheel-driven scrolling stopped moving the
     carousel at all. The continuous 3D transform already provides the
     "settle into place" feel without needing native snap. */
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  perspective: 1400px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.coverflow-viewport::-webkit-scrollbar { display: none; }
.coverflow-track {
  display: flex; align-items: stretch; gap: 28px;
  padding: 30px 0;
  transform-style: preserve-3d;
}
/* Real flex children instead of container padding — trailing padding on a
   scrollable flex container is silently excluded from scrollWidth in some
   browsers, which capped the scroll range short of centering the last card. */
.coverflow-spacer { flex: 0 0 calc(50% - 178px); }
.coverflow-item {
  flex: 0 0 300px;
  /* preserve-3d must stay unbroken from the perspective-establishing
     ancestor down to the element actually being rotated — a "flat" element
     anywhere in that chain (the default) collapses the rotation into a 2D
     skew instead of a true perspective tilt. */
  transform-style: preserve-3d;
}
.coverflow-item-inner {
  height: 100%; transform-style: preserve-3d; will-change: transform, opacity;
}
.coverflow-item .feature-card { height: 100%; }
.threats-source { max-width: 1280px; margin: 0 auto; padding: 0 24px clamp(28px, 4vw, 48px); text-align: left; }

.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px; margin-top: 8px;
}
.stat-cell { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-align: center; }
.stat-cell .num { font-family: var(--font-mono); font-weight: 600; font-size: 1.6rem; color: var(--midnight); }
.stat-cell .lbl { font-size: 0.85rem; color: var(--ink-soft); margin-top: 4px; }
.stat-source { font-size: 0.78rem; color: var(--ink-soft); margin-top: 14px; font-family: var(--font-mono); }

/* ============================================================
   Home — comparison table
   ============================================================ */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare th, .compare td { padding: 16px 18px; text-align: center; font-size: 0.93rem; border-bottom: 1px solid var(--line); }
.compare th { font-family: var(--font-display); font-size: 0.95rem; }
.compare td:first-child, .compare th:first-child { text-align: left; font-weight: 500; }
.compare tr:last-child td { border-bottom: none; }
.compare .col-bg { background: var(--teal-soft); }
.compare th.col-bg { color: var(--teal-dark); }
.mark-yes { color: var(--teal-dark); font-weight: 700; }
.mark-no { color: #b3bdcc; font-weight: 600; }
.mark-part { color: var(--amber); font-weight: 700; }
.compare-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 12px; }

/* ============================================================
   Home — testimonials (sample / placeholder feedback)
   ============================================================ */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 8px; }
.testimonial-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; display: flex; flex-direction: column;
}
.testimonial-quote-mark { margin-bottom: 10px; }
.testimonial-quote { color: var(--ink); font-size: 0.96rem; flex: 1; margin-bottom: 20px; }
.testimonial-person { display: flex; align-items: center; gap: 10px; }
.testimonial-avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal-soft); color: var(--teal-dark); font-weight: 700; font-size: 0.85rem;
}
.testimonial-name { font-weight: 600; font-size: 0.9rem; }

/* ============================================================
   Home — impact numbers (illustrative target metrics)
   ============================================================ */
.impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 8px; }
.impact-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 20px; text-align: center;
}
.impact-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--teal-soft); color: var(--teal-dark); margin: 0 auto 14px;
}
.impact-num { font-family: var(--font-mono); font-weight: 700; font-size: 1.7rem; color: var(--midnight); }
.impact-lbl { font-size: 0.88rem; color: var(--ink-soft); margin-top: 4px; }

.cta-band { background: var(--midnight); border-radius: var(--radius); color: #fff; padding: clamp(36px, 5vw, 56px); text-align: center; }
.cta-band h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 10px; }
.cta-band p { color: #c4d1e4; margin-bottom: 26px; }

/* "Why use Breach Guard?" — light card; heading/lede reuse the site-wide
   .section-title / .section-lede type so the font, size and colour match the
   rest of the site. Only the centering is overridden here. */
/* ---- V1 section system: full-bleed bands (alternating white / #F7F7F7)
   with a 1072px centered content column, Inter titles, Instrument Sans ledes. */
.v1-band { width: 100%; }
.v1-band-white { background: #ffffff; }
.v1-band-gray { background: #f7f7f7; }
.v1-inner { width: min(1072px, 100% - 48px); margin: 0 auto; padding: 72px 0; }
.v1-title {
  margin: 0; text-align: center;
  font-family: "Inter", sans-serif; font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; color: #181c24;
}
.v1-lede {
  margin: 16px auto 0; text-align: center; max-width: 720px;
  font-family: "Instrument Sans", sans-serif; font-weight: 400;
  font-size: 18px; line-height: 28px; color: #424655;
}

.why-use { text-align: center; }
.why-use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.why-use-chip {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 64px;
  padding: 16px 20px; border-radius: 12px; text-decoration: none;
  background: #ffffff; border: 1px solid #dadada;
  color: #181c24; font-family: "Inter", sans-serif; font-weight: 600; font-size: 16px;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.why-use-chip:hover { border-color: #0055c6; color: #0055c6; box-shadow: 0 2px 10px rgba(0, 85, 198, 0.08); }
@media (max-width: 760px) {
  .v1-inner { padding: 48px 0; }
  .why-use-grid { grid-template-columns: 1fr; }
}

/* ---- V1 Section 2: "the risk is real" bento grid ---- */
.v1-eyebrow {
  display: block; font-family: "IBM Plex Mono", monospace; font-size: 12px;
  letter-spacing: 0.09em; text-transform: uppercase; color: #6b7280; margin-bottom: 14px;
}
.v1-title-left { text-align: left; }
.risk-bento { text-align: left; }
.bento-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
  gap: 16px; margin-top: 32px;
}
.bento-grid > :nth-child(1) { grid-column: 1; grid-row: 1; }
.bento-grid > :nth-child(2) { grid-column: 1; grid-row: 2; }
.bento-grid > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.bento-grid > :nth-child(4) { grid-column: 3; grid-row: 1; }
.bento-grid > :nth-child(5) { grid-column: 3; grid-row: 2; }
.bento-card {
  background: #ffffff; border: 1px solid #e8e8ec; border-radius: 20px;
  padding: 28px; display: flex; flex-direction: column;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}
.bento-statement p {
  margin: 0; font-family: "Inter", sans-serif; font-weight: 600; font-size: 20px;
  line-height: 1.4; color: #181c24;
}
.bento-lbl { font-family: "Instrument Sans", sans-serif; font-size: 15px; line-height: 1.45; color: #424655; }
.bento-num {
  margin-top: auto; padding-top: 18px;
  font-family: "Inter", sans-serif; font-weight: 700; font-size: 40px;
  line-height: 1.05; color: #181c24; letter-spacing: -0.02em;
}
.bento-num-red { color: #e4573d; }
.bento-note { margin-top: 8px; font-family: "Instrument Sans", sans-serif; font-size: 13px; font-style: italic; color: #6b7280; line-height: 1.4; }
.bento-dark { background: #262424; color: #ffffff; position: relative; overflow: hidden; }
.bento-dark .bento-num-lg { margin-top: 0; padding-top: 0; font-size: 44px; color: #ffffff; }
.bento-lbl-light { margin-top: auto; padding-top: 18px; color: #ffffff; font-size: 18px; font-weight: 500; }
.bento-note-light { color: rgba(255, 255, 255, 0.6); }
.bento-shield {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.bento-dark > :not(.bento-shield) { position: relative; z-index: 1; }
.bento-link {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 16px;
  text-decoration: none; color: #181c24;
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 17px; line-height: 1.35;
  transition: border-color 0.15s, color 0.15s;
}
.bento-link:hover { border-color: #0055c6; color: #0055c6; }
.bento-arrow { flex: none; font-size: 20px; color: #0055c6; }
@media (max-width: 860px) {
  .bento-grid { grid-template-columns: 1fr 1fr; }
  .bento-grid > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .bento-grid > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .bento-grid > :nth-child(3) { grid-column: 1 / span 2; grid-row: 2; min-height: 220px; }
  .bento-grid > :nth-child(4) { grid-column: 1; grid-row: 3; }
  .bento-grid > :nth-child(5) { grid-column: 2; grid-row: 3; }
}
@media (max-width: 560px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-grid > * { grid-column: 1 !important; grid-row: auto !important; }
}

/* ---- V1 Section 3: "your digital safety net" ---- */
.safety-net { text-align: center; }
.v1-badge {
  display: inline-block; margin-bottom: 18px;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #424655; background: #ffffff; border: 1px solid #e0e0e6; border-radius: 999px; padding: 7px 16px;
}
.safety-net .v1-lede strong { color: #181c24; font-weight: 600; }
.safety-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 16px; margin-top: 44px; text-align: left; }
.safety-card {
  background: #ffffff; border: 1px solid #e8e8ec; border-radius: 16px; padding: 24px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}
.safety-ic {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: #eaf1fc; color: #0055c6; margin-bottom: 18px;
}
.safety-ic svg { width: 24px; height: 24px; }
.safety-card h3 { margin: 0 0 6px; font-family: "Inter", sans-serif; font-weight: 700; font-size: 18px; color: #181c24; }
.safety-card p { margin: 0; font-family: "Instrument Sans", sans-serif; font-size: 15px; line-height: 1.45; color: #424655; }
@media (max-width: 860px) {
  .safety-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .safety-grid { grid-template-columns: 1fr; }
}

/* ---- V1 Section 4: feature carousel with app-UI mockups ---- */
.feature-carousel { text-align: left; }
.feature-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.feature-head-copy { min-width: 0; }
.feature-head .v1-lede { margin-top: 12px; }
.feature-nav { display: flex; gap: 12px; flex: none; }
.feature-arrow {
  width: 48px; height: 48px; border-radius: 12px; border: none; cursor: pointer;
  background: #181c24; color: #fff; display: grid; place-items: center;
  transition: background 0.15s ease;
}
.feature-arrow svg { width: 22px; height: 22px; }
.feature-arrow:hover { background: #0055c6; }
.feature-track {
  display: flex; gap: 20px; margin-top: 36px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px;
}
.feature-track::-webkit-scrollbar { display: none; }
.feature-slide {
  flex: 0 0 calc((100% - 40px) / 3); min-width: 288px; scroll-snap-align: start;
  background: #fff; border: 1px solid #e8e8ec; border-radius: 18px; padding: 20px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}
.feature-slide h3 { margin: 22px 0 16px; font-family: "Inter", sans-serif; font-weight: 700; font-size: 20px; color: #181c24; }
.feature-checklist { list-style: none; display: grid; gap: 13px; margin: 0; padding: 0; }
.feature-checklist li { position: relative; padding-left: 26px; font-family: "Instrument Sans", sans-serif; font-size: 15px; color: #424655; }
.feature-checklist li::before { content: "\2713"; position: absolute; left: 0; color: #181c24; font-weight: 700; }
/* real Figma mockup image */
.feature-mock-img { border-radius: 14px; overflow: hidden; line-height: 0; }
.feature-mock-img img { width: 100%; height: auto; display: block; }
/* CSS mockup fallback (used until the real image is exported) */
.fmock { position: relative; height: 210px; border-radius: 14px; background: #f4f5f7; overflow: hidden; }
.fmock-ic { position: absolute; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; z-index: 3; }
.fmock-ic svg { width: 20px; height: 20px; }
.fmock-ic-bell { top: 16px; right: 16px; background: #fdecec; color: #e5484d; }
.fmock-ic-pin { bottom: 16px; left: 16px; background: #eaf1fc; color: #0055c6; }
.fmock-ic-win { top: 16px; right: 16px; background: #eaf1fc; color: #0055c6; }
.fmock-ic-warn { top: 16px; right: 16px; background: #fdecec; color: #e5484d; }
.fmock-card { background: #fff; border-radius: 10px; box-shadow: 0 8px 22px rgba(16, 24, 40, 0.1); padding: 14px; }
.fmock-card-back { position: absolute; top: 26px; left: 28px; right: 28px; opacity: 0.55; }
.fmock-card-front { position: absolute; top: 58px; left: 22px; right: 22px; z-index: 2; }
.fmock-lbl { font-family: "Inter", sans-serif; font-weight: 600; font-size: 12px; color: #181c24; margin-bottom: 8px; }
.fmock-mut { font-family: "Inter", sans-serif; font-size: 12px; color: #9aa1ac; }
.fmock-input { border: 1px solid #e4e6ea; border-radius: 7px; padding: 9px 10px; font-family: "Instrument Sans", sans-serif; font-size: 11px; color: #9aa1ac; }
.fmock-phone-input { display: flex; align-items: center; gap: 8px; border: 1px solid #e4e6ea; border-radius: 7px; padding: 8px 9px; font-size: 11px; }
.fmock-flag { font-size: 11px; color: #181c24; white-space: nowrap; }
.fmock-ph { color: #9aa1ac; font-family: "Instrument Sans", sans-serif; }
.fmock-btn { margin-top: 10px; background: #181c24; color: #fff; text-align: center; border-radius: 7px; padding: 9px; font-family: "Inter", sans-serif; font-weight: 600; font-size: 12px; }
.fmock-alert { margin-top: 10px; color: #e5484d; font-size: 11px; font-family: "Instrument Sans", sans-serif; font-weight: 600; }
.fmock-alert-ok { color: #067a4e; }
.fmock-vpn-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #e4e6ea; border-radius: 7px; padding: 9px 10px; }
.fmock-vpn-loc { font-family: "Instrument Sans", sans-serif; font-size: 11px; color: #6b7280; }
.fmock-toggle { position: relative; flex: none; width: 30px; height: 17px; border-radius: 999px; background: #067a4e; }
.fmock-toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.fmock-phone { background: #fff; }
.fmock-status { display: flex; justify-content: space-between; padding: 12px 16px 4px; font-family: "Inter", sans-serif; font-weight: 600; font-size: 11px; color: #181c24; }
.fmock-status-r { letter-spacing: 1px; }
.fmock-msg-head { display: flex; align-items: center; gap: 10px; padding: 4px 16px 10px; border-bottom: 1px solid #f0f0f2; }
.fmock-back { color: #0055c6; font-size: 18px; line-height: 1; }
.fmock-avatar { width: 26px; height: 26px; border-radius: 50%; background: #dbe7fb; }
.fmock-bubble { margin: 14px 16px; background: #f1f1f4; border-radius: 12px; padding: 10px 12px; font-family: "Instrument Sans", sans-serif; font-size: 11.5px; color: #181c24; line-height: 1.45; }
.fmock-link { color: #0055c6; text-decoration: underline; word-break: break-all; }
@media (max-width: 620px) {
  .feature-nav { display: none; }
}

/* ---- V1 dark band + light-on-dark helpers ---- */
.v1-band-dark { background: #262424; }
.v1-title-light { color: #ffffff; }
.v1-lede-left { text-align: left; margin-inline: 0; max-width: 640px; }
.v1-lede-light { color: rgba(255, 255, 255, 0.72); }

/* ---- V1 Section 5: "why call and text scams matter" stat cards ---- */
.stat-scale { text-align: center; }
.stat-chart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; text-align: left; }
.stat-chart-card {
  background: #ffffff; border: 1px solid #e8e8ec; border-radius: 20px; padding: 28px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04); display: flex; flex-direction: column;
}
.stat-chart-card .num { font-family: "Inter", sans-serif; font-weight: 700; font-size: 2.25rem; color: #181c24; line-height: 1; }
.stat-chart-card .lbl { font-family: "Instrument Sans", sans-serif; font-size: 15px; line-height: 1.45; color: #424655; margin: 10px 0 0; }
.stat-chart-card svg { width: 100%; height: auto; display: block; margin-top: auto; padding-top: 24px; }
.stat-source { text-align: center; font-family: "Instrument Sans", sans-serif; font-size: 14px; color: #6b7280; margin-top: 28px; }

/* ---- V1 Section 7: impact stats row (dark band) ---- */
.impact-v1 { text-align: left; }
.impact-row {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 44px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; overflow: hidden;
}
.impact-item { padding: 28px 32px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.impact-item:first-child { border-left: none; }
.impact-num { font-family: "Inter", sans-serif; font-weight: 700; font-size: 2.5rem; color: #ffffff; line-height: 1; }
.impact-lbl { font-family: "Instrument Sans", sans-serif; font-size: 15px; color: rgba(255, 255, 255, 0.6); margin-top: 8px; }

/* ---- V1 Section 8: comparison table ---- */
.compare-v1 { text-align: center; }
.compare-wrap { margin-top: 40px; overflow-x: auto; border: none; background: transparent; border-radius: 0; box-shadow: none; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 680px; }
.compare th, .compare td { padding: 18px 20px; text-align: center; font-family: "Instrument Sans", sans-serif; font-size: 15px; border-bottom: 1px solid #e4e4e8; }
.compare thead th { font-family: "Inter", sans-serif; font-weight: 700; font-size: 15px; color: #181c24; }
.compare td:first-child, .compare th:first-child { text-align: left; color: #181c24; font-weight: 500; }
.compare tbody tr:last-child td { border-bottom: none; }
.compare .col-bg { background: #0055c6; color: #ffffff; }
.compare thead th.col-bg { color: #ffffff; border-top-left-radius: 14px; border-top-right-radius: 14px; border-bottom: none; }
.compare tbody tr:last-child .col-bg { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.compare .col-bg.mark-yes, .compare .col-bg.mark-no { color: #ffffff; font-weight: 700; }
.compare .col-bg strong { color: #ffffff; font-size: 1.15rem; }
.mark-yes { color: #17994f; font-weight: 700; }
.mark-no { color: #c2c6cf; font-weight: 600; }
.mark-part { color: #e0952a; font-weight: 700; }
.compare-note { text-align: center; font-family: "Instrument Sans", sans-serif; font-size: 13px; color: #6b7280; margin-top: 16px; }

@media (max-width: 860px) {
  .stat-chart-grid { grid-template-columns: 1fr; }
  .impact-row { grid-template-columns: 1fr 1fr; }
  .impact-item { border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .impact-item:nth-child(1), .impact-item:nth-child(2) { border-top: none; }
  .impact-item:nth-child(3) { border-left: none; }
}
@media (max-width: 480px) {
  .impact-row { grid-template-columns: 1fr; }
  .impact-item { border-left: none; }
  .impact-item:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, 0.14); }
}

/* ============================================================
   Quiz
   ============================================================ */
.quiz-shell, .narrow-shell { max-width: 620px; margin: 0 auto; padding: clamp(36px, 6vw, 64px) 24px; }
.progress-rail { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 10px; }
.progress-fill { height: 100%; background: var(--teal); border-radius: 999px; transition: width 0.4s ease; }
.progress-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 26px; }

.quiz-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); }
.quiz-q { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin-bottom: 6px; }
.quiz-hint { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 22px; }

.option-list { display: grid; gap: 12px; }
.option {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fff;
  text-align: left; transition: border-color 0.12s ease, background 0.12s ease;
}
.option:hover { border-color: var(--teal); }
.option.selected { border-color: var(--teal); background: var(--teal-soft); }
.option .opt-check {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  border: 2px solid var(--line); display: grid; place-items: center;
  color: #fff; font-size: 0.8rem; font-weight: 700;
}
.option.selected .opt-check { background: var(--teal); border-color: var(--teal); }
.option .opt-label { font-weight: 500; }

.fact-callout {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 22px; padding: 14px 16px; border-radius: 12px;
  background: var(--blue-soft); border: 1px solid #cddbf5;
  font-size: 0.88rem; color: var(--ink-soft);
}
.fact-callout strong { color: var(--ink); }
.fact-icon { flex-shrink: 0; color: var(--midnight); margin-top: 2px; }

.quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; }

/* ============================================================
   Result — the honest gauge
   ============================================================ */
.result-head { text-align: center; margin-bottom: 8px; max-width: 620px; margin-left: auto; margin-right: auto; }
.gauge-wrap { width: min(320px, 90%); margin: 0 auto; }
.gauge-score {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 2.6rem; text-align: center; margin-top: -76px;
}
.gauge-band { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin-top: 2px; }
.gauge-sub { text-align: center; color: var(--ink-soft); font-size: 0.9rem; max-width: 420px; margin: 10px auto 0; }
.band-low { color: var(--blue); }
.band-moderate { color: var(--amber); }
.band-high { color: var(--coral); }

.factor-list { margin-top: 34px; display: grid; gap: 10px; }
.factor {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 16px; font-size: 0.92rem;
}
.factor .f-pts { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.f-up { color: var(--coral); }
.f-down { color: var(--teal-dark); }
.honesty-note {
  margin-top: 22px; padding: 14px 16px; border-radius: 12px;
  background: var(--teal-soft); border: 1px solid #bfe8dd;
  font-size: 0.86rem; color: var(--ink-soft);
}

/* ============================================================
   Scan
   ============================================================ */
.scan-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.scan-toggle-3col { grid-template-columns: 1fr 1fr 1fr; }
.scan-tab {
  padding: 20px; border-radius: 14px; border: 1.5px solid var(--line);
  background: #fff; font-weight: 700; font-size: 1.02rem; color: var(--v1-ink);
  display: grid; gap: 6px; justify-items: start; text-align: left;
}
.scan-tab-icon {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue); margin-bottom: 8px;
}
.scan-tab small { font-weight: 400; color: var(--ink-soft); font-size: 0.85rem; }
.scan-tab.selected { border-color: var(--blue); background: #eff5ff; }
.scan-tab.selected .scan-tab-icon { background: var(--blue); color: #fff; }

.field-row { display: flex; gap: 10px; }
.field-row select {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 0 10px;
  font-family: var(--font-mono); font-size: 0.95rem; background: #fff;
}
.text-input {
  flex: 1; min-width: 0; padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid var(--line); font-size: 1rem; font-family: var(--font-mono);
}
.text-input:focus { border-color: var(--blue); outline: none; }
.input-error { color: var(--coral); font-size: 0.84rem; margin-top: 8px; min-height: 1.2em; }

/* Searchable country dial-code dropdown (phone scan) */
.cc-combo { position: relative; flex: none; }
.cc-trigger {
  height: 100%; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; border: 1.5px solid var(--line); border-radius: 12px;
  background: #fff; cursor: pointer; font-family: var(--font-mono); font-size: 0.95rem;
}
.cc-trigger:focus-visible { outline: none; border-color: var(--blue); }
.cc-flag { font-size: 1.15rem; line-height: 1; }
.cc-caret { color: var(--ink-soft); font-size: 0.7rem; }
.cc-panel {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: 320px; max-width: 84vw; background: #fff;
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(11,31,58,0.18); padding: 8px;
}
.cc-search {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; font: inherit; margin-bottom: 6px;
}
.cc-search:focus { border-color: var(--blue); outline: none; }
.cc-list { list-style: none; margin: 0; padding: 0; max-height: 264px; overflow-y: auto; }
.cc-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 0.92rem; }
.cc-item:hover, .cc-item.active { background: var(--blue-soft); }
.cc-name { flex: 1; min-width: 0; color: var(--v1-ink); }
.cc-item-dial { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cc-empty { padding: 14px; text-align: center; color: var(--ink-soft); font-size: 0.9rem; }

/* ============================================================
   Dropzone — drag & drop / paste / click image upload
   ============================================================ */
.dropzone {
  border: 1.5px dashed var(--line); border-radius: 14px; background: var(--paper);
  padding: 32px 20px; display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover { border-color: var(--teal); }
.dropzone.dragover { border-color: var(--teal); background: var(--teal-soft); }
.dropzone-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--teal-soft); color: var(--teal-dark); flex-shrink: 0;
}
.dropzone-title { font-weight: 600; font-size: 0.95rem; }
.dropzone-hint { color: var(--ink-soft); font-size: 0.82rem; }
.dropzone-hint kbd {
  font-family: var(--font-mono); background: #fff; border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; font-size: 0.78rem;
}
.dropzone input[type="file"] { display: none; }

.dropzone-preview {
  border: 1.5px solid var(--line); border-radius: 14px; padding: 14px;
  display: flex; align-items: center; gap: 14px; background: #fff;
}
.dropzone-preview img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); flex-shrink: 0;
}
.dropzone-preview-info { flex: 1; min-width: 0; }
.dropzone-preview-name { font-weight: 600; font-size: 0.9rem; word-break: break-all; }
.dropzone-preview-size { color: var(--ink-soft); font-size: 0.8rem; }
.dropzone-preview-remove {
  background: none; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 10px;
  font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); flex-shrink: 0;
}
.dropzone-preview-remove:hover { border-color: var(--coral); color: var(--coral); }

.usage-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; margin-bottom: 18px; background: var(--blue-soft);
  border: 1px solid #c7d8f5; border-radius: 12px; font-size: 0.84rem; color: var(--blue-dark); font-weight: 600;
}
.usage-strip.low { background: var(--amber-soft); border-color: #f0d99a; color: #9a6a12; }
.usage-strip.empty { background: var(--coral-soft); border-color: #f3c4b8; color: var(--coral); }

.consent-row { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 22px; font-size: 0.9rem; color: var(--ink-soft); }
.consent-row input { margin-top: 3px; width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--blue); }

/* scanning console */
.scan-console {
  background: var(--midnight); border-radius: var(--radius);
  padding: 22px; font-family: var(--font-mono); font-size: 0.86rem;
  color: #9fd8c8; min-height: 220px;
}
.scan-console .line { opacity: 0; animation: lineIn 0.3s ease forwards; margin-bottom: 8px; }
@keyframes lineIn { to { opacity: 1; } }
.scan-console .line .ok { color: #7ee8cf; }
.scan-target { color: #fff; font-weight: 600; }
.scan-bar-rail { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.12); margin-top: 14px; overflow: hidden; }
.scan-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #0fa98a, #7ee8cf); transition: width 0.5s linear; }

.scan-done { text-align: center; margin-top: 28px; }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 6px 18px rgba(15,169,138,0.35); } 50% { box-shadow: 0 6px 30px rgba(15,169,138,0.65); } }

/* ============================================================
   Login
   ============================================================ */
.login-card { text-align: center; }
.lock-badge {
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 18px;
  background: var(--teal-soft); color: var(--teal-dark); display: grid; place-items: center;
}
.btn-google {
  background: #fff; border: 1.5px solid var(--line); color: var(--ink);
  font-weight: 600;
}
.btn-google:hover { border-color: var(--ink-soft); background: #fafbfd; }
.login-fineprint { font-size: 0.8rem; color: var(--ink-soft); margin-top: 18px; }
.demo-chip {
  display: inline-block; margin-bottom: 16px; padding: 5px 12px; border-radius: 999px;
  background: var(--amber-soft); color: #9a6a12; border: 1px solid #f2ddb0;
  font-family: var(--font-mono); font-size: 0.75rem;
}

/* ============================================================
   Pricing
   ============================================================ */
/* Billing toggle */
.billing-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px; margin: 0 auto 36px; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.billing-toggle button {
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 0.92rem; color: var(--ink-soft);
  padding: 9px 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
}
.billing-toggle button.active { background: var(--paper); color: var(--v1-ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.billing-save { background: var(--blue-soft); color: var(--blue-dark); font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; align-items: stretch; }
.plans-loading { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); padding: 40px 0; }
.plan {
  /* The card's own gradient is set inline from the backend (full strength on
     EVERY card, so monthly/yearly and featured/non-featured all look the same
     when they share colours). Text colour adapts via .plan-on-dark/-on-light. */
  border: 1px solid rgba(0,0,0,0.08); border-radius: 20px;
  padding: 32px 28px; display: flex; flex-direction: column; position: relative;
  /* No overflow:hidden — the tag badge sits above the card top (-13px) and
     would be clipped. The gradient background already respects border-radius. */
}
/* Featured is emphasis only now — a bigger shadow (and a slight lift on wide
   screens), NOT a different colour treatment. */
.plan.featured { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.28); }
@media (min-width: 900px) { .plan.featured { transform: scale(1.03); z-index: 1; } }

/* --- Adaptive text over whatever gradient the card carries. Selectors are
   compounded with .plan so they outrank the base `.plan h3/.price/li` rules
   defined further down regardless of source order. --- */
.plan.plan-on-dark { color: #fff; border-color: rgba(255,255,255,0.16); }
.plan.plan-on-dark h3, .plan.plan-on-dark .price, .plan.plan-on-dark .price-amt { color: #fff; }
.plan.plan-on-dark .price small { color: rgba(255,255,255,0.68); }
.plan.plan-on-dark li { color: rgba(255,255,255,0.94); }
.plan.plan-on-dark .price-was { color: rgba(255,255,255,0.6); }
.plan.plan-on-light .price-was { color: var(--ink-soft); }
/* Check bullets: blue on light cards, white on dark cards. */
.plan.plan-on-dark li::before { background: rgba(255,255,255,0.92); color: #0b1f3a; }

.price-was { text-decoration: line-through; font-size: 1.1rem; font-weight: 600; opacity: 0.75; }
.plan-save {
  display: inline-block; margin: -14px 0 18px; align-self: flex-start;
  font-size: 0.78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}
.plan.plan-on-light .plan-save { background: rgba(16,185,129,0.14); color: #047857; }
.plan.plan-on-dark .plan-save { background: rgba(255,255,255,0.2); color: #fff; }

/* Buy button wears its OWN gradient (set inline); text colour adapts to it.
   A faint light ring keeps it separated from the card even when a plan hasn't
   set button_gradient yet and the button falls back to the card gradient. */
.plan-cta { border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
.plan-cta-dark { color: #fff !important; }
.plan-cta-light { color: var(--v1-ink) !important; }
.plan-cta:hover { filter: brightness(1.06); }
/* On a dark card the ghost (Free) button needs light borders/text to show. */
.plan-on-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.plan-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: #fff; color: var(--v1-ink); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; padding: 5px 15px; border-radius: 999px; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}
.plan-icon { display: none; }
.plan h3 { font-size: 1.25rem; color: var(--v1-ink); margin-bottom: 18px; }
.plan .price {
  font-family: var(--font-body); font-weight: 700; font-size: 2.7rem; line-height: 1;
  color: var(--v1-ink); margin: 0 0 24px; display: flex; align-items: baseline; gap: 8px;
}
.plan .price small { font-size: 0.8rem; color: var(--ink-soft); font-weight: 400; line-height: 1.2; }
.plan ul { list-style: none; margin: 0 0 26px; display: grid; gap: 14px; font-size: 0.95rem; }
.plan li { display: flex; gap: 11px; align-items: center; color: var(--v1-ink); }
.plan li::before {
  content: "✓"; flex-shrink: 0; color: #fff; background: var(--blue);
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.plan .btn { margin-top: auto; border-radius: 12px; }

/* ---- Personalized-discount popup + shared countdown --------------------- */
.discount-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(11,31,58,0.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: discountFade 0.18s ease;
}
@keyframes discountFade { from { opacity: 0; } to { opacity: 1; } }
.discount-modal {
  position: relative; width: min(440px, 100%);
  background: #fff; border-radius: 20px; padding: 34px 30px 28px;
  text-align: center; box-shadow: 0 30px 60px -15px rgba(0,0,0,0.4);
  animation: discountPop 0.22s cubic-bezier(0.2,0.8,0.3,1.2);
}
@keyframes discountPop { from { transform: translateY(12px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.discount-close {
  position: absolute; top: 12px; right: 14px; border: none; background: transparent;
  font-size: 1.6rem; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
.discount-badge {
  display: inline-block; background: var(--blue-soft); color: var(--blue-dark);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
}
.discount-title { font-size: 1.5rem; line-height: 1.2; color: var(--v1-ink); margin: 0 0 10px; }
.discount-sub { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 20px; }
.discount-timer {
  display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: 22px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 22px;
}
.discount-clock { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.discount-timer-label { font-size: 0.82rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.discount-cta { width: 100%; justify-content: center; padding: 15px; font-size: 1.02rem; }
.discount-dismiss { width: 100%; justify-content: center; margin-top: 8px; padding: 11px; font-size: 0.9rem; }
.coupon-note {
  max-width: 560px; margin: 40px auto 0; text-align: center;
  font-size: 1rem; color: var(--ink-soft);
}
.user-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-size: 0.85rem; color: var(--ink-soft); background: var(--card);
  border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px;
}
.user-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

/* ============================================================
   Sticky bottom banner — quiz nudge, then subscription upsell once the
   quiz is done, hidden entirely once actually subscribed.
   ============================================================ */
.sticky-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: var(--midnight); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 14px 24px; flex-wrap: wrap; text-align: center;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.25);
}
.sticky-banner[hidden] { display: none; }
.sticky-banner-text { font-size: 0.92rem; color: #fff; max-width: 640px; }
.sticky-banner-text strong { color: #7ee8cf; }
.sticky-banner-btn { flex-shrink: 0; }

/* ============================================================
   Responsive & motion
   ============================================================ */
@media (max-width: 820px) {
  .sticky-banner { padding: 12px 16px; gap: 10px 16px; }
  .sticky-banner-text { font-size: 0.84rem; }
  .report-modal.expanded {
    width: 96vw; height: 96vh; max-height: 96vh; padding: 12px;
  }
  .report-modal.expanded .report-modal-header { padding-right: 30px; margin-bottom: 6px; }
  .report-modal.expanded .report-modal-header h3 { font-size: 0.85rem; }
  .report-pdf-toolbar { margin-bottom: 6px; }
  .hero-inner { grid-template-columns: 1fr; gap: 36px; padding: 32px 0 48px; }
  .hero-right { order: -1; } /* keep the video (now wrapping the badge) above the copy on mobile */
  .hero-media { aspect-ratio: 16 / 10; }
  .hero-title { white-space: normal; }
  .hero-phone-fan {
    max-width: 280px; margin: 32px auto 0;
    flex-direction: column; gap: 20px;
  }
  .hero-phone-fan .showcase-phone { width: 100%; }
  .hero-phone-fan .showcase-phone .phone-mock.static { width: 100%; max-width: 260px; aspect-ratio: auto; height: auto; overflow: visible; }
  .pain-grid { flex-direction: column; }
  .pain-grid .pain-stat { flex: none; }
  .header-nav .nav-link { display: none; }
  .header-cta { display: none; }
  .header-nav { flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; }
  .auth-control .header-user-name { display: none; }
  .stack-card {
    position: static; grid-template-columns: 1fr; min-height: 0; margin-bottom: 20px;
  }
  .stack-card-media { min-height: 260px; }
  .stack-card-content { text-align: center; }
  .stack-card-content p { margin-inline: auto; }
  .stack-card-icon { margin-inline: auto; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-note { max-width: none; }
  .coverflow-item { flex-basis: 240px; }
  .coverflow-track { padding: 24px 0; gap: 20px; }
  .coverflow-spacer { flex-basis: calc(50% - 140px); }
  .trust-marquee p { font-size: 11px; padding: 0 28px; }
  .trust-readmore { font-size: 11px; }
}
@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .phone-mock { animation: none; }
  .float-chip { animation: none; }
}