/* Screenshot-led Discover UI. One responsive stylesheet, shared by both pages. */
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  color-scheme: light;
  --navy: #0d1c29;
  --text: #101e29;
  --text-muted: #586d85;
  --text-faint: #526780;
  --accent: #007f9d;
  --cyan: #00b2d3;
  --surface: #fff;
  --surface-2: #f5f8fa;
  --border: #dce5ed;
  --border-strong: #c7d4df;
  --success: #087d65;
  --success-bg: #edf8f5;
  --success-border: #a5d8cc;
  --warn: #9b5804;
  --warn-bg: #fff8ed;
  --warn-border: #e7c38d;
  --danger: #c53428;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow: 0 2px 2px rgba(13,28,41,.05), 0 18px 30px -18px rgba(13,28,41,.23);
  --font-mono: "Consolas", "SFMono-Regular", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; background: #fff; }
body { margin: 0; color: var(--text); background: #fff; font: 16px/1.65 "Manrope", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -.035em; }
p { color: var(--text-muted); }
p + p { margin-top: 12px; }
a { color: var(--accent); text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button { border: 0; }
svg, img { flex-shrink: 0; }
a, p, h1, h2, h3, dd { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.container { width: min(1440px, calc(100% - 2 * clamp(16px, 4vw, 64px))); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 8px; left: 16px; padding: 10px 18px; z-index: 200; background: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.eyebrow { display: block; font: 12px/1.65 var(--font-mono); text-transform: uppercase; letter-spacing: .21em; color: var(--text-faint); }
.btn, .btn-outline, .compose-submit, .btn-book-call {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 10px 27px; border: 1px solid var(--navy); border-radius: 12px;
  color: #fff; background: var(--navy); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none;
  transition: background .15s, box-shadow .15s;
}
.btn:hover, .compose-submit:hover, .btn-book-call:hover { background: #19374b; box-shadow: var(--shadow); }
.btn-outline { background: #fff; border-color: var(--border); color: var(--navy); }
.btn-outline:hover { border-color: var(--accent); background: #f4fbfd; }
.text-link { padding: 0; color: var(--accent); background: none; font-size: 14px; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.header-inner { display: flex; align-items: center; gap: 40px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--text); text-decoration: none; }
.brand-logo-frame { display: block; width: 32px; height: 32px; overflow: hidden; flex: none; }
.brand-logo { display: block; width: 50px; height: 50px; max-width: none; transform: translate(-9px, -9px); }
.wordmark { font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: -.04em; white-space: nowrap; }
.wordmark > span { color: var(--accent); }
.wordmark .brand-product { font-weight: 500; color: var(--text-muted); margin-left: .15em; }
.brand-by { display: block; margin-top: 3px; font: 8px/1.3 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--text-faint); }
.primary-nav { display: flex; align-items: center; gap: 28px; }
.primary-nav a, .mobile-nav a { color: var(--text-muted); font-size: 14px; text-decoration: none; }
.primary-nav a:hover, .mobile-nav a:hover { color: var(--accent); }
.header-cta { margin-left: auto; min-height: 40px; padding: 9px 14px; font-size: 13px; white-space: nowrap; }
.menu-toggle { display: none; }
.mobile-nav { padding-block: 10px 20px; max-height: calc(100dvh - 68px); overflow-y: auto; }
.mobile-nav a { display: block; padding: 12px 0; border-top: 1px solid var(--border); }
.hero { border-top: 4px solid var(--cyan); background: radial-gradient(ellipse 70% 34% at 50% 0, #e2f7fb 0%, #fff 78%); padding: clamp(26px, 3.4vh, 38px) 0 clamp(30px, 3.4vw, 44px); }
.hero-copy { max-width: clamp(768px, 66.4vw, 1020px); margin-inline: auto; }
.hero-intro { text-align: center; }
.hero-intro, .checker, .hero-stats { min-width: 0; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 5px 13px; margin-bottom: 14px; background: #fff; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; box-shadow: 0 1px 2px rgba(13,28,41,.05); }
.hero-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.hero-title { margin-inline: auto; font-size: clamp(30px, 3.1vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -.045em; margin-bottom: 10px; }
.hero-title > span { color: #0093b2; }
.hero-sub { max-width: clamp(600px, 48vw, 760px); margin-inline: auto; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.55; margin-bottom: clamp(20px, 2.2vw, 30px); }
.checker { width: min(100%, 920px); margin-inline: auto; border: 1px solid var(--border); border-radius: 22px; background: #fff; scroll-margin-top: 92px; box-shadow: 0 1px 2px rgba(13,28,41,.06), 0 28px 50px -26px rgba(13,28,41,.32); }
.checker-intro { background: var(--surface-2); padding: 18px clamp(22px, 2.2vw, 30px) 16px; border-bottom: 1px solid var(--border); border-radius: 21px 21px 0 0; }
.checker-intro h2 { font-size: 17px; letter-spacing: -.02em; }
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); padding: 5px; gap: 4px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.seg-btn { display: flex; gap: 8px; justify-content: center; align-items: center; min-height: 44px; border-radius: 10px; background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 600; padding: 9px; transition: background .15s, color .15s; }
.seg-btn.active { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(13,28,41,.14), 0 0 0 1px rgba(13,28,41,.05); }
.seg-btn:hover { color: var(--accent); }
.tab-panel { padding: clamp(28px, 2.3vw, 36px); }
.input-kicker { margin-bottom: 16px; }
.compose-field { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 12px; position: relative; }
.compose-field .search-icon { position: absolute; left: 16px; color: var(--text-muted); pointer-events: none; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-width: 0; min-height: 58px; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; color: var(--text); background: #fff; font-size: 16px; line-height: 1.5;
}
input::placeholder, textarea::placeholder { color: #61758a; opacity: 1; }
.compose-field input { grid-column: 1 / 3; min-height: 54px; padding-left: 44px; border-radius: 14px; box-shadow: inset 0 1px 2px rgba(16,42,70,.05); }
.compose-submit { min-height: 54px; min-width: 150px; border-radius: 14px; padding-inline: 22px; font-size: 15px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.org-field { margin-top: 12px; }
.correlation-disclosure { margin-top: 10px; }
.correlation-disclosure > summary { color: var(--accent); font: 12px/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; padding-block: 12px; }
.correlation-fields { margin: 8px 0 16px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.correlation-fields legend { font-size: 14px; }
.correlation-fields p { font-size: 14px; margin-bottom: 12px; }
.correlation-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.correlation-grid label, .relationship-field label { font-size: 14px; color: var(--text-muted); }
.correlation-grid input { margin-top: 6px; }
.consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; color: var(--text-muted); font-size: 13px; line-height: 1.65; }
.consent strong { color: var(--text); }
.consent input { flex: none; width: 18px; height: 18px; margin: 2px 0; accent-color: var(--accent); cursor: pointer; }
.company-note { font-size: 14px; margin-bottom: 20px; }
.relationship-field { margin-top: 16px; }
.relationship-field label { display: block; margin-bottom: 6px; }
.fraud-panel p { margin: 12px 0; }
.fraud-badge { color: var(--accent); font: 12px var(--font-mono); text-transform: uppercase; letter-spacing: .12em; }
.hero-stats-section { border-top: 1px solid var(--border); background: #fff; padding: 24px 0; }
.hero-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; max-width: 880px; margin-inline: auto; text-align: center; }
.hero-stats strong { display: block; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.3; margin-bottom: 5px; letter-spacing: -.03em; }
.content-block { padding: clamp(30px, 3vw, 40px) 0; border-top: 1px solid var(--border); }
.soft { background: var(--surface-2); }
.section-title { font-size: clamp(28px, 3vw, 38px); font-weight: 800; line-height: 1.2; margin: 8px 0 16px; letter-spacing: -.05em; }
.section-intro { font-size: 16px; line-height: 1.7; }
.how-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 22px; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.how-step { padding: 24px 22px; min-width: 0; }
.how-step + .how-step { border-left: 1px solid var(--border); }
.step-number { display: block; color: var(--accent); font: 12px var(--font-mono); letter-spacing: .15em; margin-bottom: 16px; }
.how-step h3 { font-size: 19px; margin-bottom: 12px; }
.how-step p { font-size: 14px; }
.problem-grid, .xray-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; }
.problem-grid { align-items: start; }
.why-grid { display: grid; gap: 14px; }
.why-card { border: 1px solid var(--border); border-radius: 20px; background: #fff; padding: 20px; }
.why-card h3 { display: flex; align-items: center; gap: 8px; font: 12px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .18em; color: var(--text-muted); margin-bottom: 18px; }
.why-card h3 svg { display: none; }
.why-card p { font-size: 14px; }
.capability-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; margin-top: 18px; }
.capability-item { padding: 20px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.capability-item:nth-child(4n) { border-right: 0; }
.capability-item:nth-child(n+5) { border-bottom: 0; }
.capability-item h3 { font-size: 16px; line-height: 1.4; margin-bottom: 10px; }
.capability-item svg { display: block; margin-bottom: 14px; color: var(--accent); }
.capability-item p { font-size: 14px; }
.trust-band { background: var(--navy); color: #fff; padding: clamp(30px, 3vw, 40px) 0; }
.trust-band .section-kicker { display: block; font: 12px/1.65 var(--font-mono); letter-spacing: .21em; text-transform: uppercase; color: #b0c0ca; }
.trust-copy .section-title { max-width: 800px; margin: 8px 0 24px; }
.trust-pillars { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; padding-top: 26px; border-top: 1px solid #ffffff2b; }
.trust-pillar strong { display: block; font-size: 26px; letter-spacing: -.03em; line-height: 1.4; }
.trust-pillar span { display: block; margin-top: 6px; color: #afbdc8; font: 12px/1.7 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.industries { margin-top: 22px; }
.industries .eyebrow { color: #afbdc8; margin-bottom: 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { border: 1px solid #ffffff38; border-radius: 999px; padding: 5px 14px; font-size: 14px; }
.xray-section { border-top: 0; }
.xray-copy .btn { margin-top: 22px; }
.xray-preview { border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.preview-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--text-faint); font: 12px/1.6 var(--font-mono); }
.preview-head span:last-child { color: var(--accent); }
.xray-preview dl { margin: 8px 20px 18px; font: 13px/1.6 var(--font-mono); }
.xray-preview dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.xray-preview dl > div:last-child { border-bottom: 0; }
.xray-preview dt { color: var(--text-muted); }
.xray-preview dd { margin: 0; font-weight: 700; text-align: right; }
.preview-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px; background: var(--surface-2); border-top: 1px solid var(--border); }
.preview-tags span { padding: 3px 11px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text-muted); font-size: 12px; }
.closing-cta { display: flex; align-items: center; gap: 20px; padding: 28px; background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); }
.closing-cta > svg { color: var(--accent); }
.closing-cta > div { flex: 1; }
.closing-cta h2 { font-size: 25px; margin-bottom: 12px; }
.closing-cta p { font-size: 14px; }
.closing-cta .btn { flex: none; }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.support-grid section { padding: 20px; border: 1px solid var(--border); border-radius: 20px; background: #fff; }
.support-grid .eyebrow { margin-bottom: 16px; }
.support-grid p { font-size: 13px; margin-bottom: 16px; }
.support-email { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px; border: 1px solid #92d6e5; border-radius: 10px; background: #eefaff; font-size: 14px; text-decoration: none; }
.site-footer { background: var(--surface-2); border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding-block: 40px; }
.footer-about p { font-size: 14px; margin: 18px 0; }
.footer-about > .eyebrow { font-size: 10px; }
.footer-grid h2 { margin-bottom: 18px; }
.footer-grid nav > a, .footer-grid > div > .text-link { display: block; color: var(--text-muted); font-size: 14px; text-decoration: none; padding-block: 4px; margin-bottom: 2px; }
.footer-grid a:hover, .footer-grid button:hover { color: var(--accent); text-decoration: underline; }
.lang-switch { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 18px; }
.footer-grid .lang-switch a { display: inline-flex; min-height: 36px; align-items: center; margin: 0; font-size: 13px; }
.lang-switch a.active { font-weight: 800; color: var(--navy); }
.footer-bottom { border-top: 1px solid var(--border); padding-block: 20px; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 20px; color: var(--text-faint); font: 11px/1.65 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; }
.terms-dialog { width: min(640px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 28px; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); color: var(--text); background: #fff; }
.terms-dialog::backdrop { background: #0d1c2999; backdrop-filter: blur(3px); }
body:has(.terms-dialog[open]) { overflow: hidden; }
.terms-head { display: flex; align-items: flex-start; gap: 20px; justify-content: space-between; margin-bottom: 20px; }
.terms-head h2 { font-size: 24px; }
.dialog-close { flex: none; width: 44px; height: 44px; background: var(--surface-2); border-radius: 50%; color: var(--navy); font-size: 24px; }
.terms-dialog p { margin-bottom: 18px; font-size: 14px; }
.error { width: min(1112px, calc(100% - 32px)); padding: 16px; margin: 20px auto; border: 1px solid #e5a39e; border-radius: 12px; color: #9c2018; background: #fff3f1; }
.qa-preview-banner { padding: 10px 16px; color: #fff; background: #8a4b00; text-align: center; font-weight: 800; letter-spacing: .01em; }
#loading-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow-y: auto; padding: 24px; background: #f5f8faed; backdrop-filter: blur(6px); }
.loading-card { width: min(440px,100%); max-height: calc(100dvh - 48px); overflow-y: auto; text-align: center; border: 1px solid var(--border); border-radius: 20px; padding: 36px; background: #fff; box-shadow: var(--shadow); }
.loading-brand { display: block; width: 72px; height: 72px; overflow: hidden; margin: 0 auto 20px; opacity: .45; transform-origin: center; }
.loading-brand img { display: block; width: 108px; height: 108px; max-width: none; transform: translate(-18px, -18px); }
#loading-overlay:not([hidden]) .loading-brand { animation: discover-breathe 2.6s ease-in-out infinite; }
@keyframes discover-breathe {
  0%, 100% { opacity: .35; transform: scale(.97); }
  50% { opacity: .6; transform: scale(1.02); }
}
.loading-track { height: 4px; margin-top: 24px; overflow: hidden; background: var(--border); border-radius: 9px; }
.loading-track::after { content: ""; display: block; width: 35%; height: 100%; background: var(--cyan); animation: loading 1.4s ease-in-out infinite alternate; }
@keyframes loading { to { transform: translateX(190%); } }
/* Report: summary first, complete evidence remains one disclosure away. */
.report-hero { padding: 44px 0 48px; background: radial-gradient(ellipse at 55% 0%, #d6f1f6, var(--surface-2) 75%); border-bottom: 1px solid var(--border); }
.report-back { display: inline-block; margin-bottom: 28px; text-decoration: none; }
.report-hero-grid, .report-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 40px; }
.report-hero-grid { align-items: start; }
.report-subject { font-size: clamp(28px,3.2vw,40px); margin: 12px 0 18px; letter-spacing: -.05em; }
.report-headline { font-size: 16px; max-width: 700px; }
.report-website { margin: -6px 0 12px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.verdict-card { border: 1px solid var(--border-strong); border-radius: 20px; padding: 28px; text-align: center; background: #fff; }
.verdict-card > strong { display: block; font-size: clamp(30px,3.3vw,48px); line-height: 1.1; letter-spacing: -.04em; margin: 12px 0 8px; }
.verdict-card.high { color: var(--danger); border-color: #eca59f; background: #c5342809; }
.verdict-card.moderate { color: var(--warn); border-color: var(--warn-border); background: #9b580408; }
.verdict-card.low { color: var(--success); border-color: var(--success-border); background: #087d6508; }
.verdict-card.inconclusive { color: var(--text-muted); }
.score-label { display: block; color: var(--text-faint); font: 12px/1.6 var(--font-mono); }
.verdict-card p { font-size: 12px; line-height: 1.6; margin-top: 14px; }
meter { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 6px; border: 0; background: var(--border); border-radius: 6px; overflow: hidden; margin: 10px 0; }
meter::-webkit-meter-bar { border: 0; background: var(--border); border-radius: 6px; height: 6px; }
meter::-webkit-meter-optimum-value { background: var(--cyan); border-radius: 6px; }
meter::-moz-meter-bar { background: var(--cyan); border-radius: 6px; }
.verdict-card meter { margin-top: 20px; }
.verdict-card.high meter::-webkit-meter-optimum-value { background: var(--danger); }
.verdict-card.moderate meter::-webkit-meter-optimum-value { background: var(--warn); }
.verdict-card.low meter::-webkit-meter-optimum-value { background: var(--success); }
.verdict-card.high meter::-moz-meter-bar { background: var(--danger); }
.verdict-card.moderate meter::-moz-meter-bar { background: var(--warn); }
.verdict-card.low meter::-moz-meter-bar { background: var(--success); }
.report-content { padding-block: 56px 80px; }
.report-executive-summary { margin-bottom: 40px; padding: 28px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-2); }
.report-executive-summary > h2 { margin: 8px 0 16px; font-size: clamp(24px, 3vw, 36px); }
.report-executive-summary > h3 { margin: 20px 0 12px; font-size: clamp(20px, 2.4vw, 28px); }
.report-executive-summary .answer-summary { max-width: 1000px; }
.report-findings > h2 { font-size: 22px; }
.findings-intro { font-size: 14px; margin: 10px 0 24px; }
.report-finding, .dimensions-card { border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: var(--shadow); padding: 20px; }
.report-finding { margin-bottom: 16px; }
.finding-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; font: 11px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.status-pill { display: inline-flex; border: 1px solid var(--border-strong); padding: 2px 10px; border-radius: 999px; }
.status-pill.high { color: var(--danger); border-color: #efaba5; background: #fff3f1; }
.status-pill.moderate { color: var(--warn); border-color: var(--warn-border); background: var(--warn-bg); }
.status-pill.low { color: var(--success); border-color: var(--success-border); background: var(--success-bg); }
.report-finding h3 { font-size: 17px; margin-bottom: 12px; }
.report-finding p { font-size: 14px; }
.finding-source { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; border-top: 1px solid var(--border); margin-top: 16px; padding-top: 12px; font: 11px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.finding-source a { display: inline-flex; align-items: center; min-height: 30px; }
.dimensions-card h2 { margin-bottom: 18px; }
.dimension-item + .dimension-item { margin-top: 18px; }
.dimension-label { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; font-weight: 600; line-height: 1.45; }
.dimension-label > span:last-child { font: 12px var(--font-mono); color: var(--text-muted); }
.dimension-item p { font-size: 12px; margin-top: 5px; }
.report-important { border: 1px solid var(--border); border-radius: 20px; padding: 22px 20px; background: var(--surface-2); margin-top: 24px; }
.report-important h2 { margin-bottom: 16px; }
.report-important p { font-size: 12px; }
.report-important .text-link { margin-top: 14px; }
.input-interpretation-notice { padding: 14px 18px; border-radius: 12px; border: 1px solid var(--warn-border); background: var(--warn-bg); color: var(--warn); margin-top: 20px; font-size: 14px; }
.results-input-context { margin-top: 16px; font-size: 14px; }
.report-notice { width: 100%; margin: 24px 0 0; padding: 14px 18px; border: 1px solid var(--success-border); border-radius: 12px; background: var(--success-bg); color: var(--success); font-size: 14px; }
.report-notice.error { border-color: #e5a39e; background: #fff3f1; color: #9c2018; }
.empty-findings { border: 1px dashed var(--border-strong); border-radius: 20px; padding: 24px; }
.full-report, .result-context-details { border: 1px solid var(--border); border-radius: 16px; margin-top: 32px; }
.full-report > summary, .result-context-details > summary { padding: 18px 22px; font-size: 16px; font-weight: 700; color: var(--navy); }
.result-context-details > summary { font-size: 14px; }
.key-findings, .top-actions { padding: 0 22px 18px; }
.key-findings-label, .top-actions-label { font-weight: 700; font-size: 14px; }
.key-findings ul, .top-actions ol { margin: 8px 0 0; padding-left: 20px; color: var(--text-muted); font-size: 14px; }
.report-details { padding: 24px; border-top: 1px solid var(--border); min-width: 0; }
.report-details h2 { font-size: 24px; margin: 24px 0 12px; }
.report-details h3 { font-size: 18px; margin: 18px 0 10px; }
.report-details p, .report-details li { font-size: 14px; }
.report-details section { margin-bottom: 28px; }
.report-details .findings-brief { padding: 24px; background: var(--surface-2); border-radius: 16px; }
.findings-brief-grid, .company-intel-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-block: 20px; }
.findings-brief-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.findings-brief-grid strong { font-size: 14px; }
.findings-brief-kicker, .brief-kicker { font: 12px/1.6 var(--font-mono); color: var(--accent); text-transform: uppercase; }
.findings-brief-coverage { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 20px; }
.executive-brief-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(200px,.4fr); gap: 24px; }
.brief-decision, .company-intel-card, .sales-cta, .sent-note { padding: 20px; border: 1px solid var(--border); border-radius: 16px; min-width: 0; }
.brief-decision { align-self: start; background: var(--surface-2); }
.brief-decision strong { display: block; margin-bottom: 8px; font-size: 14px; }
.brief-decision span { font-size: 14px; }
.brief-metrics, .company-assessment, .service-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 18px; }
.brief-metrics > span, .company-assessment > span, .service-chip { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.brief-table-wrap, .company-intel-card, .technical-details { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.brief-table-wrap { border: 1px solid var(--border); border-radius: 12px; margin-block: 16px; }
.brief-table-wrap, .company-intel-card { container-type: inline-size; container-name: report-table; }
.report-details table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.report-details .brief-table { min-width: 1000px; table-layout: fixed; }
.brief-table th:nth-child(1) { width: 18%; }
.brief-table th:nth-child(2) { width: 12%; }
.brief-table th:nth-child(3) { width: 13%; }
.brief-table th:nth-child(4) { width: 12%; }
.brief-table th:nth-child(5) { width: 23%; }
.brief-table th:nth-child(6) { width: 22%; }
.report-details th, .report-details td { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.report-details th { background: var(--navy); color: #fff; font-size: 13px; }
.report-details td { color: var(--text-muted); }
.report-details small { display: block; font-size: 12px; }
.report-details .compact-evidence-table { min-width: 940px; table-layout: fixed; }
/* Reflow whole records instead of shrinking text or hiding evidence columns.
   Container queries also cover narrow cards on desktop report grids. */
@container report-table (max-width: 640px) {
  .report-details .responsive-table { display: block; min-width: 0; table-layout: auto; }
  .responsive-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .responsive-table tbody { display: block; }
  .responsive-table tbody tr { display: block; padding: 12px; border-bottom: 1px solid var(--border-strong); }
  .responsive-table tbody tr:last-child { border-bottom: 0; }
  .report-details .responsive-table td { display: grid; grid-template-columns: minmax(88px, .4fr) minmax(0, 1fr); column-gap: 14px; padding: 8px 0; border: 0; min-width: 0; }
  .responsive-table td::before { content: attr(data-label); color: var(--navy); font-size: 12px; font-weight: 700; }
  .responsive-table td > * { grid-column: 2; min-width: 0; max-width: 100%; }
  .responsive-table td a { overflow-wrap: anywhere; }
}
.brief-status, .route-status { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); font-size: 12px; }
.brief-status.attention { color: var(--danger); background: #fff0ee; }
.brief-status.partial, .route-status.candidate { color: var(--warn); background: var(--warn-bg); }
.brief-status.clear, .route-status.found, .route-status.clear { color: var(--success); background: var(--success-bg); }
.company-intel-wide { grid-column: 1 / -1; }
.methodology-note, .not-assessed-reason { font-size: 13px; margin-block: 12px; color: var(--text-faint); }
.dim-heading { scroll-margin-top: 90px; }
.dim-count { font-size: 12px; border-radius: 999px; padding: 3px 8px; background: var(--surface-2); }
.evidence-detail-list { margin: 12px 0; }
.evidence-detail-row { border-top: 1px solid var(--border); padding-block: 8px; }
.evidence-detail-row dt { font-weight: 700; font-size: 13px; }
.evidence-detail-row dd { margin: 0; }
.evidence-links, .report-details ul, .report-details ol { padding-left: 20px; }
.timeline-event { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 20px; padding-block: 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.timeline-event time { color: var(--accent); font: 12px/1.6 var(--font-mono); }
.capabilities-strip, .disclaimer { padding: 18px; background: var(--surface-2); border-radius: 12px; margin-block: 24px; }
.results-bottom-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-block: 24px; }
.form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.sales-cta label { display: block; font-size: 14px; margin: 14px 0 5px; }
.sales-cta textarea { min-height: 110px; resize: vertical; }
/* Layout changes are content-led, not device detection. */
/* The reference hero stays stacked at every width. Scale its type and cards,
   never move the checker alongside the copy or couple their row heights. */
@media (min-width: 901px) and (max-height: 880px) {
  .header-inner { min-height: 60px; }
  .hero { min-height: calc(100svh - 60px); padding: 28px 0 40px; }
  .hero-kicker { margin-bottom: 10px; padding-block: 3px; }
  .hero-title { max-width: 760px; font-size: clamp(40px, 3.6vw, 50px); margin-bottom: 8px; }
  .hero-sub { max-width: 800px; font-size: 14px; line-height: 1.42; margin-bottom: 14px; }
  .checker-intro { padding-block: 16px; }
  .checker-intro h2 { font-size: 18px; }
  .seg-btn { min-height: 50px; }
  .tab-panel { padding: 22px 28px; }
  .input-kicker { margin-bottom: 12px; }
  .compose-field input, .compose-submit { min-height: 54px; }
  .correlation-disclosure > summary { padding-block: 9px; }
  .consent { margin-top: 10px; font-size: 12px; line-height: 1.5; }
}
@media (max-width: 1100px) {
  .header-inner { gap: 24px; } .primary-nav { gap: 18px; }
  .report-hero-grid, .report-grid { grid-template-columns: minmax(0,1fr) 280px; gap: 28px; }
  .footer-grid { gap: 28px; }
  .closing-cta { flex-wrap: wrap; } .closing-cta .btn { margin-left: 62px; }
}
@media (max-width: 900px) {
  .primary-nav { display: none; } .menu-toggle { display: inline-flex; min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .header-inner { gap: 12px; } .header-cta { margin-left: auto; }
  .hero-title { font-size: 48px; } .desktop-break { display: none; }
  .hero-copy { max-width: 768px; } .hero-sub { max-width: 650px; }
  .content-block, .trust-band { padding-block: 36px; }
  .problem-grid, .xray-grid { grid-template-columns: 1fr; gap: 32px; }
  .why-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .capability-item:nth-child(2n) { border-right: 0; }
  .capability-item:nth-child(n+5) { border-bottom: 1px solid var(--border); }
  .capability-item:nth-last-child(-n+2) { border-bottom: 0; }
  .how-step { padding: 24px 20px; }
  .report-hero-grid { grid-template-columns: minmax(0,1fr) 240px; }
  .verdict-card { padding: 20px; }
  .report-grid { grid-template-columns: 1fr; }
  .report-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .report-important { margin-top: 0; }
  .footer-grid { grid-template-columns: 1.4fr 1fr; gap: 36px; }
}
@media (max-width: 760px) {
  .report-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .report-sidebar { grid-template-columns: 1fr; }
  .report-details { padding: 16px; }
  .company-intel-grid, .findings-brief-grid, .executive-brief-head { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 84px; }
  .container { width: calc(100% - 32px); }
  .header-inner { min-height: 64px; } .header-cta { display: none; } .menu-toggle { margin-left: auto; }
  .wordmark { font-size: 17px; } .brand-by { font-size: 8px; }
  .hero { min-height: calc(100svh - 64px); padding: 22px 0 36px; }
  .hero-kicker { font-size: 10px; letter-spacing: .1em; padding-inline: 10px; margin-bottom: 12px; }
  .hero-title { font-size: clamp(30px,8.4vw,44px); line-height: 1.08; letter-spacing: -.045em; margin-bottom: 12px; }
  .hero-sub { font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
  .checker-intro { padding: 18px 20px; }
  .checker-intro h2 { font-size: 18px; }
  .tab-panel { padding: 22px 20px; }
  .seg-btn { font-size: 14px; gap: 6px; }
  .seg-btn svg { width: 16px; height: 16px; }
  .compose-field { grid-template-columns: 18px minmax(0,1fr); }
  .compose-field .search-icon { top: 17px; }
  .compose-submit { grid-column: 1 / -1; width: 100%; }
  .correlation-grid { grid-template-columns: 1fr; }
  .correlation-disclosure > summary { letter-spacing: .04em; font-size: 12px; }
  .hero-stats-section { padding: 26px 0; }
  .hero-stats { gap: 12px; }
  .hero-stats strong { font-size: 23px; }
  .hero-stats .eyebrow { font-size: 10px; letter-spacing: .09em; }
  .content-block, .trust-band { padding-block: 30px; }
  .section-title { font-size: 30px; }
  .how-grid { grid-template-columns: 1fr; margin-top: 20px; }
  .how-step { padding: 20px; }
  .how-step + .how-step { border-left: 0; border-top: 1px solid var(--border); }
  .step-number { margin-bottom: 14px; }
  .why-grid, .support-grid, .trust-pillars { grid-template-columns: 1fr; }
  .trust-copy .section-title { margin-bottom: 20px; }
  .trust-pillars { gap: 20px; padding-top: 20px; }
  .trust-pillar strong { font-size: 24px; }
  .capability-item { padding: 18px; }
  .capability-item h3 { font-size: 15px; }
  .capability-item p { font-size: 14px; }
  .preview-head { flex-wrap: wrap; }
  .closing-cta { padding: 24px; gap: 18px; }
  .closing-cta > div { flex-basis: calc(100% - 60px); }
  .closing-cta h2 { font-size: 23px; }
  .closing-cta .btn { margin-left: 0; width: 100%; }
  .support-grid { gap: 16px; margin-top: 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; padding-block: 30px; }
  .footer-about { grid-column: 1 / -1; }
  .footer-grid .eyebrow { font-size: 11px; letter-spacing: .12em; }
  .footer-bottom .container { flex-direction: column; gap: 12px; }
  .report-hero { padding: 28px 0 32px; }
  .report-hero-grid, .report-sidebar { grid-template-columns: 1fr; gap: 24px; }
  .report-subject { font-size: 32px; }
  .report-back { font-size: 11px; }
  .verdict-card { padding: 24px; } .verdict-card > strong { font-size: 36px; }
  .result-actions > * { width: 100%; }
  .report-content { padding-block: 32px 48px; }
  .report-finding { padding: 20px; }
  .report-details { padding: 16px; }
  .report-details .findings-brief { padding: 16px; }
  .findings-brief-grid, .company-intel-grid, .executive-brief-head, .form-row { grid-template-columns: 1fr; }
  .report-details h2 { font-size: 22px; }
  .timeline-event { grid-template-columns: 1fr; gap: 6px; }
  .terms-dialog { padding: 20px; }
}
@media (max-width: 360px) {
  .container { width: calc(100% - 24px); }
  .checker-intro, .tab-panel { padding: 16px; }
  .seg-btn { font-size: 13px; gap: 5px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-item { border-right: 0; border-bottom: 1px solid var(--border) !important; }
  .capability-item:last-child { border-bottom: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (hover: none) and (pointer: coarse) {
  .header-cta, .menu-toggle, .seg-btn, .text-link, .footer-grid nav > a, .finding-source a { min-height: 44px; }
}
.report-details .report-metrics { min-width: 0; table-layout: fixed; }
.report-metrics td:first-child { width: 56%; }
.technical-details .overall-concern-score td { padding-block: 18px; background: #eefafd; font-weight: 700; }
.technical-details .overall-concern-score td:last-child { font-size: clamp(22px, 3vw, 30px); line-height: 1.25; }
.report-recap { padding-left: 1.6em; }
.report-recap li { display: list-item; margin-block: 0 12px; padding-left: 4px; }
.report-closing { border-top: 2px solid var(--cyan, #00b4d8); margin-top: 28px; padding-top: 18px; }
.report-closing p { margin-block: 10px; }
@media print {
  .site-header, .site-footer, .result-actions, .report-back, #loading-overlay { display: none !important; }
  .container { width: 100%; } .report-grid, .report-hero-grid { grid-template-columns: 1fr; }
  .report-finding, .dimensions-card { box-shadow: none; break-inside: avoid; }
}

/* ---------------------------------------------------------------------------
   The Griffynx report.

   Sits above the dossier and is meant to be read rather than scanned, so it
   gets a longer measure and more line height than the cards below it. The
   share block is visually separate because it is the one part meant to leave
   the page.
   --------------------------------------------------------------------------- */
.griffynx-report {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e4e4e7);
  border-radius: 14px;
  padding: 28px 30px;
  margin-bottom: 28px;
}
.griffynx-report .gx-section { margin-top: 22px; }
.griffynx-report .gx-section:first-of-type { margin-top: 14px; }
.griffynx-report h3 {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.62;
  margin: 0 0 8px;
}
.griffynx-report p {
  max-width: 64ch;
  line-height: 1.62;
  margin: 0 0 10px;
}
/* The opening is the part people actually read, so it is set larger. */
.griffynx-report .gx-section-lead p { font-size: 1.08rem; line-height: 1.55; }
.griffynx-report .gx-interval {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #e4e4e7);
  font-size: 0.92rem;
  opacity: 0.78;
}
.griffynx-report .gx-share {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--surface-alt, #f6f6f7);
  border-radius: 10px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.griffynx-report .gx-share-kicker { margin: 0; font-weight: 600; max-width: 48ch; }
@media (max-width: 640px) {
  .griffynx-report { padding: 22px 18px; }
  .griffynx-report .gx-share { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------- X-Ray
   The gated playground: a hero, two doors, and a console. It reuses the
   report styles from the free result page so a trial report and a free one
   look like one product, and adds only what a signed-in console needs. */
.xray-page { background: linear-gradient(180deg, var(--surface-2) 0%, #fff 420px); }
.xray-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 36px); }
.xray-hero .container { max-width: 980px; }
.xray-title { margin: 10px 0 14px; font-size: clamp(34px, 5vw, 52px); letter-spacing: -.04em; }
.xray-lede { max-width: 62ch; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; }

.xray-points { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 26px 0 0; padding: 0; list-style: none; }
.xray-points li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-muted); }
.xray-points svg { width: 17px; height: 17px; color: var(--accent); }

.xray-body { padding: 0 0 clamp(56px, 7vw, 88px); }
.xray-body .container { max-width: 980px; }

.xray-alert { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px;
  padding: 13px 17px; border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); background: #fff; color: var(--text); font-size: 14.5px; line-height: 1.6; }
.xray-alert svg { width: 17px; height: 17px; margin-top: 2px; color: var(--accent); }
.xray-alert.error { border-left-color: var(--danger); }
.xray-alert.error svg { color: var(--danger); }

/* two doors, side by side, neither competing with the other */
.xray-doors { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 22px; align-items: start; }
.xray-card { position: relative; padding: 30px 30px 28px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
.xray-door-tag { display: inline-block; margin-bottom: 14px; padding: 5px 11px;
  border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-faint);
  font: 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.xray-door-request { border-color: var(--border-strong); }
.xray-door-request .xray-door-tag { background: var(--navy); color: #fff; }
.xray-card-title { margin: 0 0 8px; font-size: 21px; letter-spacing: -.03em; }
.xray-card-note { margin: 0 0 20px; color: var(--text-muted); font-size: 14.5px; line-height: 1.65; }

.xray-form { display: grid; gap: 16px; }
.xray-form .btn { justify-self: start; }
.xray-label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--text); }
.xray-input { width: 100%; padding: 12px 14px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: #fff; color: var(--text); font: inherit;
  transition: border-color .15s, box-shadow .15s; }
.xray-input::placeholder { color: #9aabbd; }
.xray-input:hover { border-color: #aebecd; }
.xray-input:focus-visible { outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,127,157,.16); }
.xray-input.has-error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(197,52,40,.12); }
select.xray-input { appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23586d85' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.xray-textarea { resize: vertical; min-height: 88px; line-height: 1.6; }
.xray-code { font: 26px/1.2 var(--font-mono); letter-spacing: .38em; text-align: center; padding: 14px; }

.xray-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.xray-grow { min-width: 0; }
.xray-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px;
  line-height: 1.6; color: var(--text-muted); }
.xray-consent input { margin-top: 3px; flex-shrink: 0; }
.xray-fine { margin: 0; color: var(--text-faint); font-size: 12.5px; line-height: 1.6; }
.xray-resend { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }

.xray-thanks { display: flex; gap: 16px; align-items: flex-start; padding: 22px;
  border-radius: var(--radius-md); background: var(--success-bg); border: 1px solid var(--success-border); }
.xray-thanks svg { color: var(--success); }
.xray-thanks p { margin: 0; color: #17564a; font-size: 15px; line-height: 1.65; }

/* the console */
.xray-strip { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  padding: 13px 22px; margin-bottom: 20px; border: 1px solid var(--border);
  border-radius: var(--radius-pill); background: #fff; font-size: 13px; color: var(--text-muted); }
.xray-who { font-weight: 700; color: var(--text); }
.xray-meter { position: relative; padding-left: 21px; }
.xray-meter::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px;
  margin-top: -3.5px; border-radius: 50%; background: var(--success); }
.xray-flag { padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn); font-weight: 600; }
.xray-out { margin-left: auto; }

.xray-console-card { padding: 26px; }
.xray-compose { display: grid; grid-template-columns: minmax(150px, 190px) 1fr auto; gap: 10px;
  padding: 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-2); }
.xray-compose .xray-input { border-color: transparent; background: #fff; }
.xray-compose-go { white-space: nowrap; }

.xray-result-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
  justify-content: space-between; padding-bottom: 18px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border); }
.xray-result-head h2 { margin: 6px 0 0; font-size: 24px; letter-spacing: -.03em; overflow-wrap: anywhere; }
.xray-score { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.xray-score strong { font-size: 38px; line-height: 1; letter-spacing: -.04em; color: var(--navy); }
.xray-score span { margin-top: 5px; font: 11px/1.5 var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint); }

.xray-coverage { margin-top: 24px; padding: 20px 22px; border-radius: var(--radius-md);
  background: var(--surface-2); }
.xray-coverage h3 { margin: 0 0 8px; font-size: 15px; }
.xray-coverage p { margin: 0; color: var(--text-muted); font-size: 14px; }
.xray-gaps { margin: 12px 0 0; padding-left: 18px; color: var(--text-muted); font-size: 14px; }
.xray-gaps li { margin-bottom: 5px; }
.xray-gaps li::marker { color: var(--accent); }

@media (max-width: 900px) {
  .xray-doors { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .xray-row, .xray-compose { grid-template-columns: 1fr; }
  .xray-card { padding: 24px 20px; }
  .xray-result-head { flex-direction: column; }
  .xray-score { align-items: flex-start; text-align: left; flex-direction: row;
    align-items: baseline; gap: 10px; }
}

.fraud-actions { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 18px; }

/* the two steps of signing in, both always visible */
.xray-steps { display: flex; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none;
  font-size: 12.5px; color: var(--text-faint); }
.xray-steps li { display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); }
.xray-step-n { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border-strong); font-size: 11px; font-weight: 700; }
.xray-steps li.is-now { border-color: var(--accent); background: #fff; color: var(--text); font-weight: 600; }
.xray-steps li.is-now .xray-step-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.xray-steps li.is-done .xray-step-n { background: var(--success); border-color: var(--success); color: #fff; }
.xray-resend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }

/* the counter */
.xray-meter.is-open::before { background: var(--accent); }
.xray-badge { padding: 3px 11px; border-radius: var(--radius-pill); background: var(--navy);
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.xray-bar { position: relative; width: 76px; height: 5px; border-radius: 3px;
  background: var(--border); overflow: hidden; }
.xray-bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 3px; }

/* ---------------------------------------------------------------- the trust picture
   Shown above the written report on both surfaces. The headline is how
   complete the picture is, which is the assessment's interval inverted, so it
   is a real measurement that moves per subject. It is deliberately not a
   trust score: see core/trust_picture.py for why a number rating the subject
   would be the same for everybody today. */
.trust-panel { padding: 26px 28px 22px; margin-bottom: 24px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
.trust-headline { display: flex; gap: 22px; align-items: center; }
.trust-dial { position: relative; flex-shrink: 0; width: 96px; height: 96px; display: grid;
  place-items: center; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--border) 0); }
.trust-dial::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.trust-dial strong { position: relative; z-index: 1; font-size: 27px; letter-spacing: -.04em;
  line-height: 1; color: var(--navy); }
.trust-dial strong span { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.trust-headline-copy { min-width: 0; }
.trust-headline-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--text);
  letter-spacing: -.02em; }
.trust-headline-note { margin: 0; font-size: 14.5px; line-height: 1.6; }

.trust-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin: 24px 0 0; padding: 0; background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden; }
.trust-figures > div { padding: 15px 16px; background: #fff; }
.trust-figures dt { font: 11px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); }
.trust-figures dd { margin: 5px 0 0; font-size: 25px; font-weight: 700; letter-spacing: -.035em;
  color: var(--navy); }
.trust-unit { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.trust-caveat { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-faint); }

@media (max-width: 640px) {
  .trust-panel { padding: 22px 18px 18px; }
  .trust-headline { gap: 16px; }
  .trust-dial { width: 78px; height: 78px; }
  .trust-dial strong { font-size: 22px; }
  .trust-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the verdict, which is Discover's policy and says so */
.trust-verdict { display: flex; gap: 20px; align-items: center; padding: 20px 22px;
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); }
.trust-verdict-mark { display: grid; place-items: center; flex-shrink: 0; width: 66px; height: 66px;
  border-radius: 50%; background: #fff; border: 2px solid var(--border-strong); }
.trust-verdict-mark strong { font-size: 26px; letter-spacing: -.04em; line-height: 1; }
.trust-verdict-mark span { font-size: 26px; font-weight: 700; color: var(--text-faint); }
.trust-verdict-band { margin: 0 0 5px; font-size: 19px; font-weight: 700; letter-spacing: -.025em;
  color: var(--text); }
.trust-verdict-note { margin: 0; font-size: 14.5px; line-height: 1.6; }
.trust-verdict-consistent { background: var(--success-bg); border-color: var(--success-border); }
.trust-verdict-consistent .trust-verdict-mark { border-color: var(--success); color: var(--success); }
.trust-verdict-mixed { background: var(--warn-bg); border-color: var(--warn-border); }
.trust-verdict-mixed .trust-verdict-mark { border-color: var(--warn); color: var(--warn); }
.trust-verdict-questionable { background: #fdf1f0; border-color: #eec0bb; }
.trust-verdict-questionable .trust-verdict-mark { border-color: var(--danger); color: var(--danger); }

.trust-reasons { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.trust-reason { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.6;
  color: var(--text); }
.trust-reason-mark { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px;
  margin-top: 1px; border-radius: 50%; font-size: 13px; font-weight: 700; }
.trust-reason-supports .trust-reason-mark { background: var(--success-bg); color: var(--success); }
.trust-reason-weakens .trust-reason-mark { background: #fdf1f0; color: var(--danger); }
.trust-rubric-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-faint); }

.trust-coverage { display: flex; gap: 22px; align-items: center; margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--border); }

@media (max-width: 640px) {
  .trust-verdict, .trust-coverage { gap: 16px; }
  .trust-verdict-mark { width: 54px; height: 54px; }
  .trust-verdict-mark strong, .trust-verdict-mark span { font-size: 21px; }
}

/* what the checker offers, and who you may point it at, directly under it */
.checker-offer { width: min(100%, 920px); margin: 20px auto 0; padding: 18px 22px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(255,255,255,.7); }
.checker-offer-title { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text);
  letter-spacing: -.01em; }
.checker-offer-body { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
.checker-offer-terms { margin: 0; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.6; color: var(--text-faint); }

/* ---------------------------------------------------------------- the analyst report
   Prose, then the verdict and its two scales, then a table per evidence
   domain. The tables are the part a reader checks our working against, so
   they are quiet by default and legible at any width. */
.ar { padding: 30px 32px 26px; margin-bottom: 26px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
.ar-head { padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.ar-subject { margin: 8px 0 6px; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.035em;
  overflow-wrap: anywhere; }
.ar-meta { margin: 0; font: 12px/1.6 var(--font-mono); color: var(--text-faint); }

.ar-summary { margin-top: 24px; }
.ar-summary h3, .ar-section h3 { margin: 0 0 12px; font-size: 16px; letter-spacing: -.02em; }
.ar-summary p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.7; color: var(--text); }
.ar-summary p:last-child { margin-bottom: 0; }

.ar-verdict { margin-top: 26px; padding: 20px 22px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface-2); }
.ar-verdict-head { display: flex; gap: 18px; align-items: center; }
.ar-verdict-mark { display: grid; place-items: center; flex-shrink: 0; width: 58px; height: 58px;
  border-radius: 50%; background: #fff; border: 2px solid var(--border-strong); }
.ar-verdict-mark strong { font-size: 23px; letter-spacing: -.04em; }
.ar-verdict-mark span { font-size: 23px; font-weight: 700; color: var(--text-faint); }
.ar-verdict-band { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -.025em;
  color: var(--text); }
.ar-verdict-note { margin: 0; font-size: 14px; line-height: 1.6; }
.ar-verdict-consistent { background: var(--success-bg); border-color: var(--success-border); }
.ar-verdict-consistent .ar-verdict-mark { border-color: var(--success); color: var(--success); }
.ar-verdict-mixed { background: var(--warn-bg); border-color: var(--warn-border); }
.ar-verdict-mixed .ar-verdict-mark { border-color: var(--warn); color: var(--warn); }
.ar-verdict-questionable { background: #fdf1f0; border-color: #eec0bb; }
.ar-verdict-questionable .ar-verdict-mark { border-color: var(--danger); color: var(--danger); }

.ar-scales { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px;
  padding-top: 18px; border-top: 1px solid rgba(13,28,41,.1); }
.ar-scale h4 { margin: 0 0 9px; font: 11px/1.5 var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint); }
.ar-scale ul { margin: 0; padding-left: 17px; font-size: 14px; line-height: 1.6; }
.ar-scale li { margin-bottom: 6px; }
.ar-scale-against li::marker { color: var(--danger); }
.ar-scale-for li::marker { color: var(--success); }
.ar-none { margin: 0; font-size: 14px; color: var(--text-faint); }

.ar-section { margin-top: 28px; }
.ar-section-prose { margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; }
.ar-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.ar-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ar-table th, .ar-table td { padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border); }
.ar-table thead th { font: 11px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); background: var(--surface-2); white-space: nowrap; }
.ar-table tbody tr:last-child th, .ar-table tbody tr:last-child td { border-bottom: 0; }
.ar-table tbody th { font-weight: 600; white-space: nowrap; }
.ar-when, .ar-conf { white-space: nowrap; color: var(--text-muted); font-size: 13px; }
.ar-row-none td, .ar-row-none th { color: var(--text-muted); }
.ar-row-unavailable { background: #fbfcfd; }
.ar-dir { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 6px;
  border-radius: 50%; font-size: 12px; font-weight: 700; vertical-align: middle; }
.ar-dir-for { background: var(--success-bg); color: var(--success); }
.ar-dir-against { background: #fdf1f0; color: var(--danger); }

.ar-unseen ul, .ar-next ol, .ar-methods ul { margin: 0; padding-left: 19px; font-size: 14.5px;
  line-height: 1.65; }
.ar-unseen li, .ar-next li, .ar-methods li { margin-bottom: 7px; }
.ar-methods { color: var(--text-muted); }
.ar-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); }
.ar-foot p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--text-faint); }

@media (max-width: 640px) {
  .ar { padding: 22px 18px 20px; }
  .ar-scales { grid-template-columns: 1fr; }
  .ar-verdict-head { gap: 14px; }
}

/* the intake assistant, directly above the checker it fills in */
.assist { width: min(100%, 920px); margin: 0 auto 18px; padding: 20px 22px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: rgba(255,255,255,.82); }
.assist-label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 700;
  color: var(--text); }
.assist-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.assist-input { width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font: inherit; background: #fff; }
.assist-input:focus-visible { outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,127,157,.16); }
.assist-go { min-height: 46px; white-space: nowrap; }
.assist-starters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0;
  list-style: none; }
.assist-chip { padding: 7px 13px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: #fff; color: var(--text-muted); font-size: 13px; line-height: 1.4;
  transition: border-color .15s, color .15s; }
.assist-chip:hover { border-color: var(--accent); color: var(--accent); }
.assist-answer { margin-top: 16px; padding: 15px 17px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); }
.assist-said { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.assist-said strong { font-weight: 700; overflow-wrap: anywhere; }
.assist-why { margin: 7px 0 0; font-size: 14px; line-height: 1.6; }
.assist-hint { margin: 9px 0 0; font-size: 12.5px; color: var(--text-faint); }

@media (max-width: 640px) {
  .assist-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- the chat surface
   One thread, one composer, one pin. It replaced a hero with three tabs and a
   suggestion box beside them, which asked a person to choose a product before
   they had said what happened to them. */
.chat { border-top: 4px solid var(--cyan);
  background: radial-gradient(ellipse 80% 40% at 50% 0, #e4f8fc 0%, #fff 72%);
  padding: clamp(28px, 4vh, 46px) 0 clamp(30px, 4vw, 52px); }
.chat-shell { width: min(880px, calc(100% - 2 * clamp(16px, 4vw, 40px))); margin-inline: auto; }

.chat-head { text-align: center; margin-bottom: clamp(22px, 3vw, 32px); }
.chat-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 5px 13px;
  margin-bottom: 14px; background: #fff; border: 1px solid var(--border); border-radius: 999px;
  font: 11px/1.65 var(--font-mono); text-transform: uppercase; letter-spacing: .21em;
  color: var(--text-faint); box-shadow: 0 1px 2px rgba(13,28,41,.05); }
.chat-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.chat-title { margin: 0 0 10px; font-size: clamp(28px, 3.2vw, 42px); font-weight: 800;
  letter-spacing: -.045em; line-height: 1.1; }
.chat-sub { max-width: 56ch; margin-inline: auto; font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6; }

.chat-alert { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px;
  padding: 12px 16px; border: 1px solid var(--warn-border); border-radius: var(--radius-sm);
  background: var(--warn-bg); color: var(--warn); font-size: 14px; line-height: 1.6; }

/* the thread */
.chat-thread { display: flex; flex-direction: column; gap: 18px; margin-bottom: 18px; }
.turn { display: flex; gap: 12px; align-items: flex-start; }
.turn-mark { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px;
  border-radius: 50%; background: var(--navy); color: #fff; margin-top: 2px; }
.turn-body { min-width: 0; }
.turn-gx .turn-body { flex: 1; padding: 14px 18px; border: 1px solid var(--border);
  border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: var(--shadow); }
.turn-you { justify-content: flex-end; }
.turn-you .turn-body { max-width: 78%; padding: 12px 17px; border-radius: 16px 4px 16px 16px;
  background: var(--navy); color: #fff; }
.turn-body p { margin: 0; font-size: 15px; line-height: 1.65; color: inherit; overflow-wrap: anywhere; }
.turn-you .turn-body p { color: #fff; }
.turn-pinned { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.turn-chip { padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.16);
  font: 10px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; }
.turn-offer { margin-top: 14px; display: grid; gap: 12px; justify-items: start; }
.turn-run { min-height: 42px; }
.turn-report { margin-top: 16px; }
.turn-report .ar { margin-bottom: 0; padding: 0; border: 0; box-shadow: none; background: none; }

/* the composer */
.composer { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: center; padding: 9px 9px 9px 11px; border: 1px solid var(--border-strong);
  border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgba(13,28,41,.06), 0 16px 34px -22px rgba(13,28,41,.3); }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,127,157,.14); }
.composer-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.composer-input { width: 100%; min-height: 42px; padding: 10px 4px; border: 0; outline: 0;
  font: inherit; background: transparent; color: var(--text); }
.composer-input::placeholder { color: #9aabbd; }
.composer-send { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  background: var(--navy); color: #fff; transition: background .15s; }
.composer-send:hover { background: #17334a; }

/* the pin */
.pin { position: relative; }
.pin-button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
  cursor: pointer; list-style: none; transition: border-color .15s, color .15s, background .15s; }
.pin-button::-webkit-details-marker { display: none; }
.pin-button:hover { border-color: var(--accent); color: var(--accent); background: #fff; }
.pin[open] .pin-button { border-color: var(--accent); color: var(--accent); background: #fff; }
.pin-panel { position: absolute; bottom: calc(100% + 12px); left: 0; z-index: 30;
  width: min(460px, calc(100vw - 40px)); padding: 20px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: #fff;
  box-shadow: 0 2px 4px rgba(13,28,41,.07), 0 24px 48px -20px rgba(13,28,41,.36); }
.pin-lede { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; }
.pin-types { display: grid; gap: 7px; margin: 0 0 14px; padding: 0; list-style: none; }
.pin-type { display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color .15s, background .15s; }
.pin-type:hover { border-color: var(--border-strong); background: var(--surface-2); }
.pin-type input { margin-top: 3px; flex-shrink: 0; }
.pin-type:has(input:checked) { border-color: var(--accent); background: #f2fbfd; }
.pin-type-body { display: grid; gap: 2px; min-width: 0; }
.pin-type-body strong { font-size: 14px; }
.pin-type-body span { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.pin-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.pin-input { width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font: inherit; }
.pin-input:focus-visible { outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,127,157,.16); }

/* the terms: very small print, and a box that has to be ticked */
.terms { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; cursor: pointer; }
.terms input { margin-top: 2px; flex-shrink: 0; }
.terms-text { font-size: 10.5px; line-height: 1.55; color: var(--text-faint); }
.terms-inline { margin-top: 0; max-width: 62ch; }

.chat-starters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 18px 0 0; padding: 0; list-style: none; }
.chat-chip { padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--text-muted); font-size: 13px; line-height: 1.4;
  transition: border-color .15s, color .15s; }
.chat-chip:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 640px) {
  .turn-you .turn-body { max-width: 88%; }
  .pin-panel { left: -9px; width: calc(100vw - 32px); }
  .pin-row { grid-template-columns: 1fr; }
}
.ar-verdict-thin, .trust-verdict-thin { background: var(--surface-2); border-color: var(--border-strong); }
.ar-verdict-thin .ar-verdict-mark, .trust-verdict-thin .trust-verdict-mark {
  border-color: var(--text-faint); color: var(--text-muted); }

/* the three tabs, over the thread */
.tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 18px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--surface-2); }
.tab { display: flex; flex: 1; gap: 8px; justify-content: center; align-items: center;
  min-height: 42px; padding: 9px 12px; border-radius: 10px; color: var(--text-muted);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .15s, color .15s, box-shadow .15s; }
.tab:hover { color: var(--accent); }
.tab.is-on { background: #fff; color: var(--navy);
  box-shadow: 0 1px 2px rgba(13,28,41,.14), 0 0 0 1px rgba(13,28,41,.05); }
.tab svg { flex-shrink: 0; }

/* the X-Ray tab is an invitation, not a third kind of check */
.xray-invite { padding: 30px 32px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: #fff; box-shadow: var(--shadow); text-align: center; }
.xray-invite-tag { display: inline-block; margin-bottom: 14px; padding: 5px 12px;
  border-radius: var(--radius-pill); background: var(--navy); color: #fff;
  font: 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.xray-invite h2 { margin: 0 0 10px; font-size: clamp(21px, 2.2vw, 27px); letter-spacing: -.03em; }
.xray-invite p { max-width: 56ch; margin: 0 auto 20px; font-size: 15px; line-height: 1.65; }
.xray-invite-actions { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center;
  justify-content: center; }

/* the pin panel scrolls rather than running off the top of a short window */
.pin-panel { max-height: min(62vh, 520px); overflow-y: auto; overscroll-behavior: contain; }

@media (max-width: 560px) {
  .tab span { display: none; }
  .tab { min-height: 44px; }
}

/* one line, and then the air a chat app leaves before its input */
.chat-lead { margin: clamp(34px, 8vh, 76px) 0 clamp(28px, 6vh, 56px); text-align: center;
  font-size: clamp(19px, 2.1vw, 25px); font-weight: 600; letter-spacing: -.025em;
  line-height: 1.45; color: var(--text); }
.chat-thread:empty { display: none; }

/* ---------------------------------------------------------------- the chat, shaped like a chat
   Headline high, the input at the bottom of the first screen, the small print
   under it. The thread grows into the space between them. */
.chat { display: flex; min-height: calc(100svh - 69px); padding-bottom: clamp(16px, 3vh, 28px); }
.chat-shell { display: flex; flex-direction: column; width: min(880px, calc(100% - 2 * clamp(16px, 4vw, 40px)));
  margin-inline: auto; padding-top: clamp(20px, 3vh, 32px); }
.chat-thread { flex: 1 1 auto; justify-content: flex-end; min-height: 0; }
.chat-lead { flex: 0 0 auto; }
.composer { flex: 0 0 auto; margin-top: auto; }
.chat-starters { flex: 0 0 auto; order: 3; }

/* the small print, under the input, on the page */
.terms-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start;
  margin: 10px 2px 0; }
.terms-line { display: flex; gap: 8px; align-items: flex-start; margin: 10px 2px 0;
  font-size: 10.5px; line-height: 1.5; color: var(--text-faint); }
.terms-agree { margin: 0; flex: 1 1 420px; cursor: pointer; }
.terms-agree input { margin-top: 1px; flex-shrink: 0; }
.terms-go { padding: 4px 11px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: #fff; color: var(--text-muted); font-size: 11px; }
.terms-go:hover { border-color: var(--accent); color: var(--accent); }

/* the pin opens upward from an input that now sits at the bottom, so it has
   the whole screen above it. It was being clipped off the top of the window,
   which left only the last radio visible. */
.pin-panel { bottom: calc(100% + 12px); max-height: min(56vh, 460px); }

@media (max-width: 640px) {
  .chat { min-height: calc(100svh - 60px); }
  .pin-panel { max-height: 52vh; }
}

/* ---------------------------------------------------------------- the language switch in the header
   It was only ever in the footer, which on the chat screen is a full page
   away, so people reported it as appearing sometimes and not others. */
.lang-switch-header { display: none; gap: 2px; margin-left: auto; margin-right: 10px; }
.lang-switch-header a { padding: 4px 7px; border-radius: 7px; font: 600 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); text-decoration: none; }
.lang-switch-header a:hover { background: var(--surface-2); color: var(--accent); }
.lang-switch-header a.active { background: var(--navy); color: #fff; }
@media (min-width: 900px) { .lang-switch-header { display: flex; } }

/* ---------------------------------------------------------------- starting over
   There was no way to run a second check: the thread lived in a cookie for a
   day and the starters vanished after the first turn. */
.chat-top { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }
.chat-top .tabs { flex: 1 1 auto; margin-bottom: 0; }
.chat-new-form { flex: 0 0 auto; }
.chat-new { display: inline-flex; gap: 6px; align-items: center; min-height: 42px; padding: 9px 14px;
  border: 1px solid var(--border-strong); border-radius: 12px; background: #fff;
  color: var(--text-muted); font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: border-color .15s, color .15s; }
.chat-new:hover { border-color: var(--accent); color: var(--accent); }

/* X-Ray is a different product behind a login, not a third kind of check. */
.tab-xray { color: var(--text-faint); }
.tab-xray.is-on { background: var(--navy); color: #fff; }
.tab-xray:not(.is-on)::after { content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--warn); opacity: .7; }

/* consent beside the button that acts on it */
.turn-terms { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px; max-width: 60ch;
  font-size: 10.5px; line-height: 1.5; color: var(--text-faint); cursor: pointer; }
.turn-terms input { margin-top: 1px; flex-shrink: 0; }

/* what to do with a finished report */
.report-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.report-actions form { margin: 0; }
.turn-expired { margin: 6px 0 0; font-size: 13px; color: var(--text-faint); }
.thread-anchor { display: block; height: 1px; }

/* ---------------------------------------------------------------- print one report
   The browser's own print-to-PDF, which is why there is no renderer here. */
@media print {
  .site-header, .site-footer, .skip-link, .composer, .chat-top, .chat-lead, .chat-starters,
  .terms-form, .terms-line, .chat-alert, .no-print, .qa-preview-banner,
  .hero-stats-section, .content-block, .trust-band, .xray-section, .xray-invite { display: none !important; }
  body { background: #fff; }
  .chat, .chat-shell { display: block; min-height: 0; padding: 0; width: auto; }
  body.printing .turn { display: none !important; }
  body.printing .turn.is-printing { display: block !important; }
  .turn.is-printing .turn-mark { display: none !important; }
  .turn-report { border: 0; padding: 0; box-shadow: none; }
  .ar-table { page-break-inside: auto; }
  .ar-section { page-break-inside: avoid; }
  a[href]::after { content: ""; }
}

@media (max-width: 560px) {
  .chat-top { flex-wrap: wrap; }
  .chat-new { min-height: 38px; padding: 8px 12px; font-size: 12px; }
  /* The report's actions were running off the side on a phone, which is why
     "run another check" was reported as invisible on mobile. */
  .report-actions { flex-direction: column; align-items: stretch; }
  .report-actions .btn, .report-actions .btn-outline { width: 100%; }
}

/* ---------------------------------------------------------------- the landing state
   Headline, then subhead, then the tabs. Both collapse once there is a turn:
   on a phone they would otherwise take a third of the first screen away from
   the conversation and the report, which are what somebody came for. */
.chat-intro { flex: 0 0 auto; margin: clamp(10px, 3vh, 26px) 0 clamp(18px, 3.5vh, 30px); text-align: center; }
.chat-headline { font-size: clamp(30px, 4.4vw, 47px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1.08; color: var(--navy); }
.chat-subhead { max-width: 60ch; margin: 14px auto 0; font-size: clamp(14.5px, 1.25vw, 17px);
  line-height: 1.6; color: var(--text-muted); }

/* The old headline, demoted. It is guidance for an empty box now, so it sits
   on the box rather than over the page, at the weight of a hint. */
.chat-lead { margin: 0 0 12px; text-align: center; font-size: clamp(13.5px, 1.05vw, 15px);
  font-weight: 500; letter-spacing: 0; line-height: 1.55; color: var(--text-faint); }

@media (max-width: 640px) {
  .chat-intro { margin-top: 4px; }
  .chat-headline { font-size: clamp(27px, 8vw, 34px); }
  .chat-subhead { font-size: 14px; margin-top: 10px; }
}

/* The error pages. A mistyped URL used to get Flask's own white page, which
   is someone else's software showing through a product about whether a site
   is what it claims to be. */
.error-page { padding: clamp(48px, 12vh, 120px) 0; max-width: 640px; }
.error-code { margin: 0; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.error-page h1 { margin: 8px 0 0; font-size: clamp(26px, 5vw, 36px); }
.error-lede { margin: 12px 0 28px; color: var(--text-muted); font-size: 16px; line-height: 1.6; }

/* The picture: the check's graph as server-drawn SVG (core/graph_picture.py). */
.gx-picture { margin: 8px 0 14px; padding: 12px; border: 1px solid var(--line, #e3e8ef); border-radius: 12px; background: #fff; overflow-x: auto; }
.gx-graph { display: block; max-width: 100%; height: auto; font: 13px/1 ui-sans-serif, system-ui, sans-serif; }
.gx-picture .gx-graph { width: auto; }
.gx-node rect { fill: #f4f7fb; stroke: #9fb0c4; stroke-width: 1.25; }
.gx-node text { fill: #1c2a3a; }
.gx-node-subject rect { fill: #0d1c29; stroke: #0d1c29; }
.gx-node-subject text { fill: #fff; font-weight: 600; }
.gx-node-found rect { fill: #e8f4ef; stroke: #2f8f6b; }
.gx-node-vendor rect { fill: #f1f3f6; stroke: #b9c3cf; stroke-dasharray: 4 3; }
.gx-node-vendor text { fill: #586d85; }
.gx-node-lead rect { fill: #fff; stroke: #2f8f6b; stroke-dasharray: 4 3; }
.gx-node-unnamed rect { fill: #fff; stroke: #9fb0c4; stroke-dasharray: 2 3; }
.gx-node-unnamed text { fill: #586d85; font-style: italic; }
.gx-node-more rect { fill: #fff; stroke: #c9d2dd; }
.gx-node-more text { fill: #586d85; }
.gx-edge { stroke: #2f8f6b; stroke-width: 1.5; color: #2f8f6b; }
.gx-edge-vendor { stroke: #b9c3cf; color: #b9c3cf; stroke-dasharray: 4 3; }
.gx-caption { fill: #586d85; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.gx-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 10px; font-size: 12px; color: #586d85; }
.gx-key::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; border: 1.5px solid #9fb0c4; background: #f4f7fb; }
.gx-key-subject::before { background: #0d1c29; border-color: #0d1c29; }
.gx-key-found::before { background: #e8f4ef; border-color: #2f8f6b; }
.gx-key-vendor::before { border-style: dashed; border-color: #b9c3cf; background: #f1f3f6; }
.gx-key-lead::before { border-style: dashed; border-color: #2f8f6b; background: #fff; }
.ar-leads li { color: #586d85; }
@media print { .gx-picture { border: none; padding: 0; overflow: visible; } }

.gx-badge { fill: rgba(13,28,41,.08); stroke: none; }
.gx-badge-square { fill: rgba(13,28,41,.08); stroke: none; }
.gx-badge-text { fill: #1c2a3a; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.gx-node-subject .gx-badge, .gx-node-subject .gx-badge-square { fill: rgba(255,255,255,.14); }
.gx-node-subject .gx-badge-text { fill: #fff; }
.gx-node-vendor .gx-badge-text, .gx-node-unnamed .gx-badge-text { fill: #586d85; }
.gx-edge-label { fill: #2f8f6b; font-size: 10px; letter-spacing: .02em; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.gx-edge-label-vendor { fill: #8a98a8; }
.gx-subgraph { margin-top: 14px; }
.gx-subgraph-title { margin: 0 0 6px; font-size: 13px; color: #586d85; letter-spacing: .04em; text-transform: uppercase; }

/* ================================================================ 2026-09-18: the investigation sheet
   Everything below supersedes the older chat-turn and report rules above.
   The report is a sheet, not a bubble; the picture is its index; each
   thing found is a card; consent is two lines beside the one button that
   needs it; a running check says what it is doing. */

/* ---------------------------------------------------------------- consent on the offer */
.consent { display: block; margin: 12px 0 6px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2); max-width: 64ch; }
.consent-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: 13.5px; line-height: 1.55; color: var(--text); }
.consent-check input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.consent-full { margin: 8px 0 0 27px; font-size: 12.5px; color: var(--text-muted); }
.consent-full summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; }
.consent-full summary::-webkit-details-marker { display: none; }
.consent-full summary::after { content: " ›"; }
.consent-full[open] summary::after { content: " ‹"; }
.consent-full p { margin: 8px 0 0; line-height: 1.6; }
.turn-offer .turn-run { margin-top: 10px; }
.turn-offer:has(input[name="terms"]:not(:checked)) .turn-run { opacity: .55; }

.terms-line { display: block; margin: 10px 2px 0; font-size: 12px; line-height: 1.6;
  color: var(--text-faint); }
.terms-line .text-link { font-size: 12px; margin-left: 4px; }
.terms-statement { font-weight: 600; color: var(--text); }

/* ---------------------------------------------------------------- the pin says what it sees */
.pin-detected { margin: 8px 2px 0; min-height: 1.2em; font-size: 12.5px; color: var(--accent); }

/* ---------------------------------------------------------------- a check in progress */
.turn-working .turn-body { border-color: rgba(0,127,157,.35); background: #f6fcfd; }
.working-title { font-weight: 700; margin-bottom: 8px !important; overflow-wrap: anywhere; }
.working-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.working-steps li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5;
  color: var(--text-faint); transition: color .3s; }
.working-steps li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 11px; height: 11px;
  border-radius: 50%; border: 1.5px solid var(--border-strong); background: #fff; }
.working-steps li.is-done { color: var(--text-muted); }
.working-steps li.is-done::before { background: var(--success); border-color: var(--success);
  box-shadow: inset 0 0 0 2px #fff; }
.working-steps li.is-now { color: var(--text); font-weight: 600; }
.working-steps li.is-now::before { border-color: var(--accent); border-top-color: transparent;
  animation: gx-spin .9s linear infinite; }
.working-time { margin-top: 10px !important; font: 12px/1.5 var(--font-mono) !important;
  color: var(--text-faint) !important; }
@keyframes gx-spin { to { transform: rotate(360deg); } }
.typing-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong);
  animation: gx-bounce 1.2s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes gx-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .working-steps li.is-now::before, .typing-dots i { animation: none; }
}

/* ---------------------------------------------------------------- the report as a sheet
   It breaks out of the chat column to the width a picture and two columns of
   cards need, and centres itself on the page rather than on the bubble. */
.turn-gx:has(.turn-report) { display: block; }
.turn-gx:has(.turn-report) > .turn-mark { display: none; }
.turn-gx:has(.turn-report) > .turn-body { padding: 0; border: 0; background: none; box-shadow: none; }
.turn-report { position: relative; left: 50%; width: min(1120px, calc(100vw - 32px));
  transform: translateX(-50%); margin-top: 6px; }
.turn-report .ar { padding: clamp(20px, 3vw, 36px); border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); margin-bottom: 0; }
.report-actions { justify-content: center; }

.ar-hero { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.ar-kicker { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 0; }
.ar-subject { display: flex; gap: 12px; align-items: center; margin: 10px 0 16px;
  font-size: clamp(24px, 3vw, 36px); letter-spacing: -.04em; line-height: 1.15; }
.ar-subject-name { overflow-wrap: anywhere; }
.ar-badge { display: inline-grid; place-items: center; min-width: 38px; height: 24px; padding: 0 6px;
  border-radius: 6px; background: var(--navy); color: #fff; font: 700 11px/1 var(--font-mono);
  letter-spacing: .04em; flex-shrink: 0; }
.ar-subject .ar-badge { height: 30px; min-width: 46px; font-size: 12px; }
.ar-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.ar-stats > div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); min-width: 108px; }
.ar-stats dt { font: 11px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--text-faint); }
.ar-stats dd { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--text); }
.ar-stat-of { font-size: 14px; font-weight: 500; color: var(--text-faint); }
.ar-stat-meter dd { display: flex; align-items: center; gap: 10px; }
.ar-meter { position: relative; display: inline-block; width: 84px; height: 7px; border-radius: 99px;
  background: var(--border); overflow: hidden; }
.ar-meter > span { position: absolute; inset: 0 auto 0 0; width: calc(var(--pct) * 1%);
  background: linear-gradient(90deg, var(--accent), var(--cyan)); border-radius: inherit; }
.ar-certainty { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }

.ar-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto;
  margin: 0 calc(-1 * clamp(20px, 3vw, 36px)); padding: 10px clamp(20px, 3vw, 36px);
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border); scrollbar-width: none; }
.ar-nav::-webkit-scrollbar { display: none; }
.ar-nav a { flex-shrink: 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.ar-nav a:hover, .ar-nav a:focus-visible { border-color: var(--accent); color: var(--accent); }

.ar-block { margin-top: 30px; scroll-margin-top: 64px; }
.ar-block > h3 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.025em; }
.ar-lede { margin: -4px 0 14px; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.ar-story p { margin: 0 0 14px; max-width: 72ch; font-size: 16.5px; line-height: 1.75; color: var(--text); }
.ar-story p:first-of-type { font-size: 18px; }
.ar-story p:last-child { margin-bottom: 0; }

/* the picture, with tabs when it was split */
.gx-picture { margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: #fbfcfd; overflow: hidden; }
.gx-scroll { overflow-x: auto; padding: 14px; }
.gx-picture .gx-graph { max-width: none; }
.gx-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 14px;
  border-top: 1px solid var(--border); background: #fff; }
.gx-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.gx-tab-bar { display: flex; gap: 4px; overflow-x: auto; padding: 8px 8px 0; border-bottom: 1px solid var(--border);
  background: #fff; }
.gx-tab-bar label { flex-shrink: 0; padding: 8px 14px; border: 1px solid transparent; border-bottom: 0;
  border-radius: 9px 9px 0 0; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer;
  white-space: nowrap; }
.gx-tabs .gx-pane { display: none; }
.gx-tabs .gx-tab-input:nth-of-type(1):checked ~ .gx-pane-0,
.gx-tabs .gx-tab-input:nth-of-type(2):checked ~ .gx-pane-1,
.gx-tabs .gx-tab-input:nth-of-type(3):checked ~ .gx-pane-2,
.gx-tabs .gx-tab-input:nth-of-type(4):checked ~ .gx-pane-3,
.gx-tabs .gx-tab-input:nth-of-type(5):checked ~ .gx-pane-4,
.gx-tabs .gx-tab-input:nth-of-type(6):checked ~ .gx-pane-5,
.gx-tabs .gx-tab-input:nth-of-type(7):checked ~ .gx-pane-6 { display: block; }
.gx-tabs .gx-tab-input:nth-of-type(1):checked ~ .gx-tab-bar label:nth-child(1),
.gx-tabs .gx-tab-input:nth-of-type(2):checked ~ .gx-tab-bar label:nth-child(2),
.gx-tabs .gx-tab-input:nth-of-type(3):checked ~ .gx-tab-bar label:nth-child(3),
.gx-tabs .gx-tab-input:nth-of-type(4):checked ~ .gx-tab-bar label:nth-child(4),
.gx-tabs .gx-tab-input:nth-of-type(5):checked ~ .gx-tab-bar label:nth-child(5),
.gx-tabs .gx-tab-input:nth-of-type(6):checked ~ .gx-tab-bar label:nth-child(6),
.gx-tabs .gx-tab-input:nth-of-type(7):checked ~ .gx-tab-bar label:nth-child(7) {
  border-color: var(--border); background: #fbfcfd; color: var(--text); }
.gx-tab-input:focus-visible + .gx-tab-input, .gx-tab-bar label:hover { color: var(--accent); }
.gx-subgraph-title { margin: 12px 14px 0; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.gx-link { cursor: pointer; }
.gx-link:hover .gx-node rect:first-child, .gx-link:focus .gx-node rect:first-child { stroke: var(--accent); stroke-width: 2.25; }
.gx-link:focus { outline: none; }
.ar-route { margin-top: 12px; font-size: 14px; }
.ar-route summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.ar-route p { margin: 8px 0 0; line-height: 1.6; color: var(--text-muted); }

/* the cards, by hop */
.ar-hop + .ar-hop { margin-top: 26px; }
.ar-hop-head { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.ar-hop-n { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: #fff; font: 700 12px/1 var(--font-mono); }
.ar-hop-lede { color: var(--text-muted); font-weight: 400; }
.ar-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.ar-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff;
  scroll-margin-top: 72px; transition: box-shadow .3s, border-color .3s; }
.ar-card.is-subject { grid-column: 1 / -1; border-color: var(--border-strong); background: linear-gradient(180deg, #fbfdfe, #fff); }
.ar-card.has-against { border-left: 3px solid var(--danger); }
.ar-card.is-unnamed { background: #fcfcfd; }
.ar-card.is-unnamed h4 { font-style: italic; color: var(--text-muted); }
.ar-card.is-lit { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0,178,211,.18); }
.ar-card:focus { outline: none; }
.ar-card-head { display: flex; gap: 10px; align-items: center; }
.ar-card-head h4 { margin: 0; font-size: 16px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ar-card-route { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--accent); font-weight: 600; }
.ar-card-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
.ar-card-supplier { margin: 8px 0 0; padding: 7px 10px; border-radius: 8px; background: var(--surface-2);
  font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.ar-card-checked, .ar-card-silent { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-faint); }

.ar-facts { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ar-fact { display: flex; gap: 10px; align-items: flex-start; }
.ar-fact-mark { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; background: var(--surface-2); color: var(--text-faint); font-weight: 700; font-size: 14px; line-height: 1; }
.ar-fact-weakens .ar-fact-mark { background: #fdf1f0; color: var(--danger); }
.ar-fact-supports .ar-fact-mark { background: var(--success-bg); color: var(--success); }
.ar-fact-body { min-width: 0; }
.ar-fact-kind { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0;
  font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.ar-fact-text { margin: 3px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.ar-fact-when { font: 11.5px/1.4 var(--font-mono); font-weight: 400; color: var(--text-faint); }
.ar-pill { padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.ar-pill-established { background: var(--success-bg); color: var(--success); }
.ar-pill-likely { background: #eef6fb; color: #1f6d8f; }
.ar-pill-thin { background: var(--warn-bg); color: var(--warn); }
.ar-more { margin-top: 18px; padding: 14px 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.ar-more-head { margin: 0; font-size: 14px; }

/* what public pages say */
.ar-quotes { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ar-quotes blockquote { margin: 0; padding: 12px 16px; border-left: 3px solid var(--cyan);
  background: var(--surface-2); border-radius: 0 10px 10px 0; font-size: 15px; line-height: 1.65; }
.ar-quote-src { margin: 6px 0 0 19px; font: 12px/1.5 var(--font-mono); color: var(--text-faint); }

/* for and against, in words */
.ar-weigh { padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.ar-weigh.ar-verdict-consistent { background: var(--success-bg); border-color: var(--success-border); }
.ar-weigh.ar-verdict-mixed { background: var(--warn-bg); border-color: var(--warn-border); }
.ar-weigh.ar-verdict-questionable { background: #fdf1f0; border-color: #eec0bb; }
.ar-weigh-band { margin: 0; font-size: 15px; line-height: 1.6; }
.ar-weigh .ar-scales { margin-top: 16px; }

/* the limits */
.ar-limits { display: grid; gap: 22px; }
.ar-limits h3 { margin: 0 0 10px; font-size: 16px; letter-spacing: -.02em; }
.ar-limits ul { margin: 0; padding-left: 19px; font-size: 14px; line-height: 1.65; color: var(--text-muted); }
.ar-limits p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.65; }
.ar-declined { padding: 16px 18px; border-radius: var(--radius-md); background: #f3f6fa; border: 1px solid var(--border); }
.ar-next ol { margin: 0; padding-left: 21px; font-size: 15px; line-height: 1.7; }
.ar-next li { margin-bottom: 8px; }
.ar-methods { padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.ar-methods summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--text-muted); }
.ar-methods ul { margin: 10px 0 0; padding-left: 19px; font-size: 13.5px; line-height: 1.65; color: var(--text-muted); }

@media (max-width: 640px) {
  .turn-report { width: calc(100vw - 20px); }
  .ar-stats > div { min-width: calc(50% - 5px); flex: 1 1 calc(50% - 5px); }
  .ar-story p, .ar-story p:first-of-type { font-size: 15.5px; }
  .ar-card { padding: 14px; }
  .gx-scroll { padding: 10px; }
}

@media print {
  .turn-report { position: static; left: auto; width: auto; transform: none; }
  .ar-nav, .gx-tab-bar, .consent, .terms-line { display: none !important; }
  .gx-tabs .gx-pane { display: block !important; }
  .ar-card, .ar-block { break-inside: avoid; }
  .ar-methods { display: block; }
  .ar-methods > ul { display: block !important; }
}

/* A thread with a report reads from the top: the chat's full-height, bottom-anchored
   layout left a screen of empty space above the question once the answer was long. */
.chat:has(.turn-report) { min-height: 0; }
.chat:has(.turn-report) .chat-thread { justify-content: flex-start; }
/* One card at a hop takes the row rather than a third of it. */
.ar-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.consent-full { margin-left: 27px; }

/* ===================================================================== Sprint 3: three checks, at a glance */
.d3-hero { padding: clamp(40px, 6vw, 72px) 0 12px; }
.d3-hero h1 { font-size: clamp(30px, 4.2vw, 50px); max-width: 20ch; margin: 10px 0 14px; }
.d3-lede { max-width: 68ch; font-size: 17px; }
.d3-checks { padding: 24px 0 48px; }
.d3-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.d3-pick { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border: 1.5px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface); color: var(--text); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.d3-pick:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.d3-pick.is-active { border-color: var(--navy); box-shadow: var(--shadow); background: linear-gradient(180deg, #fff, var(--surface-2)); }
.d3-pick-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--surface-2); color: var(--accent); }
.d3-pick.is-active .d3-pick-icon { background: var(--navy); color: #fff; }
.d3-pick-text { display: flex; flex-direction: column; gap: 2px; }
.d3-pick-text strong { font-size: 17px; }
.d3-pick-text span { color: var(--text-muted); font-size: 14px; line-height: 1.45; }
.d3-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 22px; align-items: start; }
.d3-glance { padding: 26px 28px; border-radius: var(--radius-lg); background: var(--navy); color: #eef4f8; }
.d3-glance .eyebrow { color: #7fd6e8; }
.d3-glance h2 { color: #fff; font-size: 24px; margin: 6px 0 8px; }
.d3-glance h3 { color: #fff; font-size: 15px; margin: 22px 0 8px; letter-spacing: 0; }
.d3-glance p { color: #c5d3de; }
.d3-who { font-size: 15px; }
.d3-rule { margin-bottom: 10px; color: #fff !important; font-weight: 600; }
.d3-inputs, .d3-returns { list-style: none; margin: 0; padding: 0; }
.d3-inputs li { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.1); }
.d3-input-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.d3-input-head strong { color: #fff; }
.d3-adds { display: block; color: #aebfcc; font-size: 14px; margin-top: 2px; }
.d3-returns li { position: relative; padding: 4px 0 4px 22px; color: #d9e4ec; font-size: 14.5px; }
.d3-returns li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); }
.d3-depth-note { margin-top: 18px !important; padding: 12px 14px; border-radius: 12px; background: rgba(0,178,211,.12); font-size: 14px; }
.d3-depth-note a { color: #7fd6e8; }
.d3-badge { display: inline-block; padding: 1px 9px; border-radius: var(--radius-pill); font: 600 11px/1.7 "Manrope", sans-serif; letter-spacing: .02em; white-space: nowrap; }
.d3-badge-req { background: #fde8e6; color: #9e2a20; }
.d3-badge-one { background: #fff3dd; color: #8a5200; }
.d3-badge-opt { background: #e8f1f7; color: #3b5870; }
.d3-glance .d3-badge-req { background: #ffd6d1; }
.d3-form { padding: 26px 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
.d3-form h2 { font-size: 22px; margin-bottom: 16px; }
.d3-field { margin-bottom: 16px; }
.d3-field label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-weight: 600; font-size: 14.5px; }
.d3-field input, .d3-field select, .d3-field textarea, .d3-sales-form input, .d3-sales-form textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--border-strong); border-radius: 12px; background: #fff; color: var(--text); }
.d3-field input:focus, .d3-field select:focus, .d3-field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(0,127,157,.15); }
.d3-help { display: block; margin-top: 5px; font-size: 13px; color: var(--text-muted); }
.d3-field.has-error input, .d3-field.has-error select, .d3-field.has-error textarea { border-color: var(--danger); }
.d3-error { margin: 0 0 16px; padding: 12px 14px; border: 1px solid #f1b8b2; border-radius: 12px; background: #fdf0ee; color: #8b2219; font-weight: 600; }
.d3-consent { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 18px; padding: 14px 16px; border: 1.5px solid var(--border-strong); border-radius: 12px; background: var(--surface-2); cursor: pointer; font-size: 14.5px; }
.d3-consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--navy); flex-shrink: 0; }
.d3-consent.has-error { border-color: var(--danger); background: #fdf0ee; }
.d3-submit { width: 100%; min-height: 52px; font-size: 15px; }
.d3-submit:disabled { opacity: .7; cursor: progress; }
.d3-small { margin-top: 10px; font-size: 13px; }
.d3-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 8px 0 64px; }
.d3-how > div { padding: 20px; border-top: 2px solid var(--navy); }
.d3-how h3 { font-size: 17px; margin: 6px 0; }
.footer-note { font-size: 13px; }

/* progress */
.d3-progress { padding: 56px 0 72px; max-width: 820px; }
.d3-progress h1 { font-size: clamp(28px, 4vw, 42px); margin: 8px 0 10px; }
.d3-progress-card { margin: 26px 0; padding: 24px 26px; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.d3-bar { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin-bottom: 18px; }
.d3-bar span { display: block; width: 35%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--cyan)); animation: d3-slide 1.6s ease-in-out infinite; }
@keyframes d3-slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.d3-stages { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.d3-stages li { position: relative; padding: 8px 0 8px 36px; color: var(--text-faint); counter-increment: s; }
.d3-stages li::before { content: counter(s); position: absolute; left: 0; top: 7px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--text-muted); }
.d3-stages li.is-done { color: var(--text); }
.d3-stages li.is-done::before { content: "\2713"; background: var(--success-bg); color: var(--success); }
.d3-stages li.is-now { color: var(--text); font-weight: 700; }
.d3-stages li.is-now::before { background: var(--navy); color: #fff; }
.d3-given { margin: 18px 0; padding: 18px 22px; border-radius: var(--radius-md); background: var(--surface-2); }
.d3-given h2 { font-size: 15px; margin-bottom: 8px; }
.d3-given dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 22px; margin: 0; }
.d3-given dt { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); }
.d3-given dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* report */
.d3-report { padding: 40px 0 64px; }
.d3-report-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.d3-report-head .eyebrow { width: 100%; }
.d3-report-head h1 { font-size: clamp(26px, 3.6vw, 40px); max-width: 30ch; }
.d3-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.d3-depth { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; margin: 12px 0 22px; padding: 22px 26px; border-radius: var(--radius-lg); background: var(--navy); color: #eef4f8; }
.d3-depth p { color: #c5d3de; margin: 0 0 6px; }
.d3-depth-num { font-size: 52px; font-weight: 800; color: #fff; line-height: 1; }
.d3-depth-level > span:nth-child(2) { color: #8fa6b7; margin-left: 4px; }
.d3-meter { display: flex; gap: 4px; margin-top: 10px; }
.d3-meter i { flex: 1; height: 6px; border-radius: 3px; background: #2d4153; }
.d3-meter i.on { background: #34d399; }
.d3-depth-headline strong { color: #34d399; font-size: 17px; }
.d3-depth-label { color: #fff !important; font-weight: 700; }
.d3-depth-ai { color: #b8c4ff !important; font-style: italic; }
.d3-sales-link { color: #062e22; background: #34d399; padding: 2px 10px; border-radius: 8px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.d3-verdict { margin: 12px 0 20px; padding: 20px 24px; border-radius: var(--radius-lg); border: 2px solid var(--border-strong); }
.d3-verdict strong { display: block; font-size: 30px; letter-spacing: .02em; margin: 2px 0 6px; }
.d3-verdict-scam, .d3-verdict-likely_scam { border-color: #e7a39b; background: #fdf0ee; }
.d3-verdict-scam strong, .d3-verdict-likely_scam strong { color: #b1261b; }
.d3-verdict-suspicious { border-color: var(--warn-border); background: var(--warn-bg); }
.d3-verdict-suspicious strong { color: var(--warn); }
.d3-verdict-safe { border-color: var(--success-border); background: var(--success-bg); }
.d3-verdict-safe strong { color: var(--success); }
.d3-section { margin: 26px 0; }
.d3-section h2 { font-size: 19px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 2px solid var(--navy); }
.d3-section p { margin-bottom: 8px; }
.d3-section-todo { padding: 18px 22px; border-radius: var(--radius-md); background: var(--success-bg); border: 1px solid var(--success-border); }
.d3-section-todo h2 { border-bottom-color: var(--success); }
.d3-summary { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.d3-summary li { padding: 10px 14px; border-left: 3px solid var(--cyan); background: var(--surface-2); border-radius: 0 12px 12px 0; }
.d3-summary .eyebrow { font-size: 11px; }
.d3-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.d3-table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.d3-table-wrap th { text-align: left; padding: 10px 14px; background: var(--surface-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.d3-table-wrap td { padding: 10px 14px; border-top: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.d3-table-wrap td:first-child { font-weight: 600; }
.d3-table-wrap td.is-yours { color: var(--success); font-weight: 700; }
.d3-table-wrap td.is-maybe { color: var(--warn); }
.d3-sales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin: 40px 0 18px; padding: 26px 28px; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--border); }
.d3-sales h2 { font-size: 22px; margin: 6px 0 8px; }
.d3-sales-form { display: grid; gap: 10px; }
.d3-sales-form label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.d3-notice { padding: 16px 18px; border-radius: 12px; background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success); }
.d3-report-foot { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-faint); }
.d3-xray { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding: 48px 0 72px; align-items: start; }
.d3-xray h1 { font-size: clamp(28px, 3.6vw, 42px); margin: 8px 0 12px; }
.d3-xray .d3-returns li { color: var(--text); }

@media (max-width: 960px) {
  .d3-picker, .d3-how, .d3-panel, .d3-sales, .d3-xray, .d3-summary, .d3-depth { grid-template-columns: minmax(0, 1fr); }
  .d3-glance, .d3-form { padding: 22px 18px; }
}
@media (max-width: 640px) {
  .d3-table-wrap thead { display: none; }
  .d3-table-wrap tr { display: block; padding: 8px 0; border-top: 1px solid var(--border); }
  .d3-table-wrap td { display: block; border: 0; padding: 4px 14px; }
  .d3-table-wrap td::before { content: attr(data-label); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
}
@media print {
  .site-header, .site-footer, .no-print, .skip-link { display: none !important; }
  .d3-report { padding: 0; }
  .d3-depth, .d3-glance, .d3-summary li, .d3-table-wrap th, .d3-verdict { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .d3-table-wrap { overflow: visible; border: 0; }
  tr { page-break-inside: avoid; }
  .d3-section h2 { page-break-after: avoid; }
  a { color: inherit; }
}

/* ---- One screen, four tabs (2026-09-27): the tabs and the active form are what loads, on a laptop and a phone. */
.d3-app .primary-nav { display: none; }
.d3-app .d3-checks { padding: 14px 0 28px; }
.d3-titlebar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 2px 0 12px; }
.d3-titlebar h1 { margin: 0; font-size: clamp(18px, 2.1vw, 25px); letter-spacing: -.02em; line-height: 1.25; }
.d3-level { font: 600 11.5px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.d3-app .d3-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.d3-app .d3-pick { align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; }
.d3-app .d3-pick:hover { transform: none; }
.d3-app .d3-pick-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; }
.d3-app .d3-pick-text strong { font-size: 15px; white-space: nowrap; }
.d3-app .d3-pick-text span { font-size: 12.5px; line-height: 1.35; }
.d3-app .d3-panel { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 16px; }
.d3-app .d3-form { padding: 18px 20px; }
.d3-app .d3-form h2 { margin-bottom: 12px; font-size: 18px; }
.d3-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.d3-fields .d3-field-textarea { grid-column: 1 / -1; }
.d3-app .d3-field { margin-bottom: 12px; }
.d3-app .d3-field label { margin-bottom: 4px; font-size: 14px; }
.d3-app .d3-help { margin-top: 3px; font-size: 12px; }
.d3-app .d3-consent { margin: 2px 0 12px; padding: 10px 12px; font-size: 13.5px; }
.d3-app .d3-submit { min-height: 48px; }
.d3-app .d3-small { margin-top: 8px; font-size: 12.5px; }
.d3-app .d3-glance { padding: 18px 20px; }
.d3-app .d3-glance h3 { margin: 14px 0 6px; }
.d3-app .d3-inputs li { padding: 7px 0; }
.d3-app .d3-notice h2 { margin-bottom: 6px; }
.d3-glance summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; cursor: pointer; }
.d3-glance summary::-webkit-details-marker { display: none; }
.d3-glance summary svg { color: #7fd6e8; transform: rotate(90deg); transition: transform .15s; }
.d3-glance[open] summary svg { transform: rotate(-90deg); }
@media (min-width: 861px) {
  .d3-glance summary { pointer-events: none; }
  .d3-glance summary svg { display: none; }
}
@media (max-width: 1180px) {
  .d3-app .d3-pick-text span { display: none; }
}
@media (max-width: 860px) {
  .d3-app .d3-checks { padding-top: 10px; }
  .d3-app .d3-picker { display: flex; gap: 8px; margin-inline: -16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .d3-app .d3-picker::-webkit-scrollbar { display: none; }
  .d3-app .d3-pick { flex: 0 0 auto; padding: 8px 12px; scroll-snap-align: start; }
  .d3-app .d3-pick-icon { width: 28px; height: 28px; }
  .d3-app .d3-panel { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .d3-app .d3-form, .d3-app .d3-glance { padding: 16px; }
  .d3-fields { grid-template-columns: minmax(0, 1fr); }
  .d3-titlebar h1 { font-size: 18px; }
  .d3-app .d3-help { display: none; }
  .d3-app .d3-field input, .d3-app .d3-field select { min-height: 46px; padding-block: 10px; }
  .d3-app .d3-field { margin-bottom: 10px; }
}

/* ---- The form, not the title, is what a first screen shows (2026-09-27): a laptop browser leaves ~650px. */
.d3-app .header-inner { min-height: 56px; }
.d3-app .d3-checks { padding-top: 10px; }
.d3-titlebar { flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0 0 8px; }
.d3-titlebar h1 { font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d3-level { font-size: 10.5px; }
.d3-app .d3-picker { margin-bottom: 10px; }
.d3-app .d3-pick { padding: 7px 12px; }
.d3-app .d3-pick-icon { width: 28px; height: 28px; border-radius: 8px; }
.d3-app .d3-pick-text span { display: none; }
.d3-app .d3-form { padding: 14px 18px; }
.d3-app .d3-form h2 { margin-bottom: 8px; font-size: 16px; }
.d3-app .d3-field { margin-bottom: 8px; }
.d3-app .d3-field label { margin-bottom: 3px; font-size: 13.5px; }
.d3-app .d3-field input, .d3-app .d3-field select { min-height: 42px; padding-block: 8px; }
.d3-app .d3-field textarea { min-height: 0; }
.d3-app .d3-help { margin-top: 2px; font-size: 11.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d3-app .d3-consent { margin: 0 0 10px; padding: 8px 12px; font-size: 13px; }
.d3-app .d3-submit { min-height: 44px; }
.d3-app .d3-small { margin-top: 6px; font-size: 12px; }
.d3-app .d3-glance { padding: 14px 18px; font-size: 14px; }
@media (max-width: 860px) {
  .d3-titlebar { flex-wrap: wrap; gap: 2px 10px; }
  .d3-titlebar h1 { white-space: normal; font-size: 14px; }
}
@media (max-width: 860px) {
  .d3-app .d3-form h2 { display: none; }
  .d3-app .d3-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .d3-app .d3-fields > .d3-field:first-child, .d3-app .d3-field-email, .d3-app .d3-field-textarea { grid-column: 1 / -1; }
  .d3-app .d3-field label { font-size: 13px; }
  .d3-app .d3-field label .d3-badge { padding: 0 6px; font-size: 10px; }
  .d3-app .d3-field input, .d3-app .d3-field select { min-height: 40px; padding: 7px 10px; font-size: 16px; }
  .d3-app .d3-consent { font-size: 12.5px; }
  .d3-app .d3-small { display: none; }
}
@media (max-width: 860px) {
  .d3-app .brand-by { display: none; }
  .d3-app .header-inner { min-height: 48px; }
  .d3-titlebar h1 { font-size: 13px; }
  .d3-app .d3-field label { justify-content: flex-start; gap: 6px; white-space: nowrap; overflow: hidden; }
  .d3-app .d3-field label > span:first-child { overflow: hidden; text-overflow: ellipsis; }
  .d3-app .d3-field .d3-badge-opt, .d3-app .d3-field .d3-badge-one { display: none; }
  .d3-app .d3-field-tel { grid-column: 1 / -1; }
}

/* ---- The sales tab: what you need, as tiles; then company and email (2026-09-27). */
.d3-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.d3-uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; border: 0; }
.d3-use { position: relative; display: flex; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 14px; cursor: pointer; background: #fff; }
.d3-use input { margin-top: 3px; accent-color: var(--navy); flex: none; }
.d3-use > span { display: flex; flex-direction: column; gap: 3px; }
.d3-use strong { font-size: 15px; }
.d3-use span span { color: var(--text-muted); font-size: 13px; line-height: 1.4; }
.d3-use:has(input:checked) { border-color: var(--navy); box-shadow: var(--shadow); background: linear-gradient(180deg, #fff, var(--surface-2)); }
.d3-use-minor { grid-column: 1 / -1; padding: 8px 14px; }
.d3-use-minor strong { font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.d3-uses.has-error .d3-use { border-color: var(--danger); }
@media (max-width: 860px) {
  .d3-uses { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .d3-use { padding: 10px 12px; }
  .d3-use span span { font-size: 12.5px; }
}
@media (max-width: 400px) {
  .d3-use span span { display: none; }
}