/* Bearium Cyber Scan — report styling.
   Dark navy surface, glassy cards and pill CTAs, matching the Bearium site.
   Sits inside an iframe on the marketing site, so the page owns no fixed
   heights and never scrolls horizontally. */

:root {
  /* Bearium Networks palette
       9DDF4B  bright green — primary CTAs, best scores
       4BB748  mid green    — CTA hover
       0B2545  navy         — page surface
       187C9D  teal         — structure, secondary accents
       37B3D2  light blue   — labels, links, low-severity */
  --green: #9DDF4B;
  --green-2: #4BB748;
  --navy: #0B2545;
  --teal: #187C9D;
  --sky: #37B3D2;

  /* Surfaces, stepped up from the navy so cards read without hard borders. */
  --bg: #08192F;
  --surface: #0E2A4C;
  --surface-2: #123457;
  --raised: rgba(255, 255, 255, .045);
  --hairline: rgba(55, 179, 210, .18);
  --hairline-2: rgba(255, 255, 255, .08);

  /* Text. Checked against --bg: primary 15.0:1, body 7.9:1, dim 4.9:1. */
  --text: #EEF4FB;
  --text-2: #A8BCD4;
  --text-3: #7C93AC;

  /* Score + severity, brightened for a dark surface. */
  --good: #9DDF4B;
  --ok: #4BB748;
  --warn: #FFC24B;
  --poor: #FF8A3D;
  --bad: #FF5A5A;
  --unknown: #6C819A;

  --critical: #FF5A5A;
  --high: #FF8A3D;
  --medium: #FFC24B;
  --low: #37B3D2;

  --radius: 14px;
  --radius-sm: 10px;
  --pill: 26px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .28);
  --glow-green: 0 8px 32px rgba(157, 223, 75, .28);

  --sans: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  /* Monospace is reserved for technical values — DNS records, headers, ports —
     where character alignment genuinely helps. Not used for UI chrome. */
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
}

/* Embedded in the (dark) marketing site — inherit its background. Both the
   root and the body must be transparent, or some browsers paint the iframe's
   default white behind the content. */
html:has(body.embedded) { background: transparent; }
body.embedded { background: transparent; }

a { color: var(--sky); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 28px 20px 56px; }

/* ---------------------------------------------------------------- typography */

.eyebrow {
  color: var(--sky);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

h1, h2, h3 { line-height: 1.15; margin: 0; font-weight: 800; }

.display { font-size: clamp(28px, 5vw, 42px); letter-spacing: -.02em; }
.title-md { font-size: clamp(20px, 3vw, 27px); font-weight: 800; }

.lede { color: var(--text-2); font-size: 16px; line-height: 1.7; }
.small { font-size: 13px; }
.muted { color: var(--text-3); }
.mono { font-family: var(--mono); }

.section-title {
  color: var(--sky);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* -------------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  margin-bottom: 18px;
}

.card-tight { padding: 18px 20px; }
.card-flat { background: var(--raised); border-color: var(--hairline-2); box-shadow: none; }

.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 820px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

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

.hero-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0B2545 0%, #124063 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 30px;
  margin-bottom: 18px;
}
/* Soft glow behind the score, echoing the site's CTA bands. */
.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 12% 50%, rgba(157, 223, 75, .13) 0%, transparent 62%);
  pointer-events: none;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 30px;
  align-items: center;
}

@media (max-width: 780px) {
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; }
}

.ring { position: relative; width: 140px; height: 140px; flex: none; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring-track { stroke: rgba(255, 255, 255, .1); }
.ring-value { stroke-linecap: round; transition: stroke-dashoffset 1s ease; }

.ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.ring-score { font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.ring-outof { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.ring-caption {
  color: var(--text-3); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; text-align: center; margin-top: 10px; font-weight: 600;
}

.hero-domain {
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 800;
  letter-spacing: -.015em;
  word-break: break-word;
}
.hero-sub { color: var(--text-3); font-size: 13px; margin-top: 8px; }

.gradebox { text-align: center; }
.gradebox .grade { font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.gradebox .gradecap {
  color: var(--text-3); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 600; margin-top: 2px;
}

/* ------------------------------------------------------------------ actions */

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: .01em;
  padding: 12px 26px; border-radius: var(--pill); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

/* Navy on green — white would be 1.6:1 here. */
.btn-primary { background: var(--green); color: var(--navy); box-shadow: var(--glow-green); }
.btn-primary:hover { background: var(--green-2); }

.btn-ghost { background: transparent; color: var(--text); border-color: rgba(255, 255, 255, .32); }
.btn-ghost:hover { border-color: var(--sky); color: var(--sky); }

.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--sky); color: var(--navy); }

.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-lg { padding: 15px 32px; font-size: 15px; }

/* ---------------------------------------------------------------- risk panel */

.riskflag {
  display: inline-block; font-size: 11px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--pill); margin-bottom: 14px;
  border: 1px solid transparent;
}
.riskflag.good { background: rgba(157, 223, 75, .16); color: var(--good); border-color: rgba(157, 223, 75, .45); }
.riskflag.ok { background: rgba(75, 183, 72, .16); color: var(--ok); border-color: rgba(75, 183, 72, .45); }
.riskflag.warn { background: rgba(255, 194, 75, .14); color: var(--warn); border-color: rgba(255, 194, 75, .42); }
.riskflag.poor { background: rgba(255, 138, 61, .14); color: var(--poor); border-color: rgba(255, 138, 61, .42); }
.riskflag.bad { background: rgba(255, 90, 90, .14); color: var(--bad); border-color: rgba(255, 90, 90, .45); }
.riskflag.unknown { background: var(--raised); color: var(--text-3); border-color: var(--hairline-2); }

.findings { margin: 18px 0 0; padding: 0; list-style: none; }
.findings li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
  font-size: 14.5px; color: var(--text-2); line-height: 1.65;
}
.findings li::before {
  content: '→'; position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 700;
}
.findings strong { color: var(--text); font-weight: 700; }

/* -------------------------------------------------------------- module cards */

.module {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-top: 3px solid var(--unknown);
  border-radius: var(--radius-sm);
  padding: 20px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.module:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 0, 0, .34); }

.module.good { border-top-color: var(--good); }
.module.ok { border-top-color: var(--ok); }
.module.warn { border-top-color: var(--warn); }
.module.poor { border-top-color: var(--poor); }
.module.bad { border-top-color: var(--bad); }
.module.unknown { border-top-color: var(--unknown); }

.module-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 14px;
}
.module-name {
  font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .01em;
}

.chip {
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 3px 10px; border-radius: var(--pill);
  min-width: 30px; text-align: center; border: 1px solid transparent;
}
.chip.good { background: rgba(157, 223, 75, .16); color: var(--good); border-color: rgba(157, 223, 75, .4); }
.chip.ok { background: rgba(75, 183, 72, .16); color: var(--ok); border-color: rgba(75, 183, 72, .4); }
.chip.warn { background: rgba(255, 194, 75, .14); color: var(--warn); border-color: rgba(255, 194, 75, .4); }
.chip.poor { background: rgba(255, 138, 61, .14); color: var(--poor); border-color: rgba(255, 138, 61, .4); }
.chip.bad { background: rgba(255, 90, 90, .14); color: var(--bad); border-color: rgba(255, 90, 90, .4); }
.chip.unknown { background: var(--raised); color: var(--text-3); border-color: var(--hairline-2); }

.module-score { font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.module-score .of { font-size: 13px; color: var(--text-3); font-weight: 500; letter-spacing: 0; }
.module-score.good { color: var(--good); }
.module-score.ok { color: var(--ok); }
.module-score.warn { color: var(--warn); }
.module-score.poor { color: var(--poor); }
.module-score.bad { color: var(--bad); }
.module-score.unknown { color: var(--unknown); }

.bar {
  height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .09);
  margin: 12px 0; overflow: hidden;
}
.bar > span { display: block; height: 100%; border-radius: 3px; transition: width .9s ease; }
.bar > span.good { background: var(--good); }
.bar > span.ok { background: var(--ok); }
.bar > span.warn { background: var(--warn); }
.bar > span.poor { background: var(--poor); }
.bar > span.bad { background: var(--bad); }
.bar > span.unknown { background: var(--unknown); }

.module-blurb { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.module-weight { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.module-pending { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }

/* --------------------------------------------------------------- check lists */

.checks { width: 100%; border-collapse: collapse; }
.checks td {
  padding: 9px 0; border-bottom: 1px solid var(--hairline-2);
  font-size: 14px; vertical-align: top;
}
.checks tr:last-child td { border-bottom: 0; }
.checks .label { color: var(--text-2); }
.checks .val { text-align: right; white-space: nowrap; font-weight: 700; padding-left: 14px; }
.checks .val.pass { color: var(--good); }
.checks .val.warn { color: var(--warn); }
.checks .val.fail { color: var(--bad); }
.checks .val.unknown { color: var(--text-3); }
.checks .detail {
  font-size: 13px; color: var(--text-3); padding-top: 0; padding-bottom: 12px; line-height: 1.6;
}

/* ----------------------------------------------------------- recommendations */

.rec {
  background: var(--raised);
  border: 1px solid var(--hairline-2);
  border-left: 3px solid var(--unknown);
  border-radius: var(--radius-sm);
  padding: 18px 20px; margin-bottom: 12px;
}
.rec.critical { border-left-color: var(--critical); background: rgba(255, 90, 90, .06); }
.rec.high { border-left-color: var(--high); background: rgba(255, 138, 61, .06); }
.rec.medium { border-left-color: var(--medium); background: rgba(255, 194, 75, .055); }
.rec.low { border-left-color: var(--low); background: rgba(55, 179, 210, .055); }

.rec-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sev {
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--pill); flex: none; border: 1px solid transparent;
}
.sev.critical { background: rgba(255, 90, 90, .16); color: var(--critical); border-color: rgba(255, 90, 90, .45); }
.sev.high { background: rgba(255, 138, 61, .16); color: var(--high); border-color: rgba(255, 138, 61, .45); }
.sev.medium { background: rgba(255, 194, 75, .14); color: var(--medium); border-color: rgba(255, 194, 75, .45); }
.sev.low { background: rgba(55, 179, 210, .14); color: var(--low); border-color: rgba(55, 179, 210, .45); }

.rec-module { font-size: 12px; color: var(--text-3); }
.rec-title { font-weight: 800; font-size: 17px; color: var(--text); margin-bottom: 6px; }
.rec-teaser { font-size: 14.5px; color: var(--text-2); line-height: 1.6; }

.rec-detail { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline-2); }
.rec-detail p { margin: 0 0 12px; font-size: 14.5px; color: var(--text-2); line-height: 1.7; }
.rec-detail .h {
  color: var(--sky); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; margin-bottom: 7px;
}
.rec-fix { margin: 0; padding-left: 20px; font-size: 14.5px; color: var(--text-2); }
.rec-fix li { margin-bottom: 7px; line-height: 1.6; }
.rec-effort { font-size: 13px; color: var(--text-3); margin-top: 12px; }

.hipaa-note {
  background: rgba(24, 124, 157, .14);
  border: 1px solid rgba(55, 179, 210, .32);
  border-radius: var(--radius-sm);
  padding: 14px 16px; margin: 12px 0;
}
.hipaa-note .h { color: var(--sky); }
.hipaa-note p { margin: 0; color: var(--text-2); }

/* ------------------------------------------------------------------ lockbox */

.lock {
  border: 1px dashed rgba(55, 179, 210, .38);
  border-radius: var(--radius-sm);
  padding: 24px; text-align: center;
  background: rgba(24, 124, 157, .08);
  margin-top: 16px;
}
.lock-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.lock-text { font-size: 14px; color: var(--text-2); margin-bottom: 18px; line-height: 1.65; max-width: 62ch;
             margin-left: auto; margin-right: auto; }

/* ----------------------------------------------------------------- benchmark */

.bench-row {
  display: grid; grid-template-columns: 1fr 150px 48px;
  gap: 14px; align-items: center; padding: 10px 0; font-size: 14px;
}
.bench-row.you {
  background: rgba(157, 223, 75, .08);
  border: 1px solid rgba(157, 223, 75, .28);
  border-radius: var(--radius-sm);
  padding: 12px 14px; margin-top: 6px;
}
.bench-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.bench-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--sky); }
.bench-row.you .bench-bar > span { background: var(--green); }
.bench-score { text-align: right; font-weight: 800; font-size: 15px; }
.youtag {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--green); color: var(--navy); padding: 2px 8px;
  border-radius: var(--pill); margin-left: 10px;
}

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.stat {
  background: var(--raised); border: 1px solid var(--hairline-2);
  border-radius: var(--radius-sm); padding: 16px; text-align: center;
}
.stat .v { font-size: 28px; font-weight: 900; line-height: 1; }
.stat .k {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); margin-top: 6px; font-weight: 700;
}

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

.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--text); margin-bottom: 8px;
}
/* Covers the hero search box as well as the lead form — the hero input has no
   .field wrapper and would otherwise fall back to the browser's white default,
   which looks broken on the dark surface. */
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.scanbar input[type="text"] {
  width: 100%; padding: 14px 16px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .22); color: var(--text);
  transition: border-color .18s, box-shadow .18s;
}
.field input::placeholder,
.scanbar input::placeholder { color: var(--text-3); }
.field input:focus,
.scanbar input:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(157, 223, 75, .18);
}
.field .hint { font-size: 13px; color: var(--text-3); margin-top: 7px; }

.check-field { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 20px; }
.check-field input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--green); flex: none; }
.check-field label {
  font-size: 14px; font-weight: 400; color: var(--text-2); margin: 0; line-height: 1.6;
}

.scanbar { display: flex; gap: 12px; }
.scanbar input { flex: 1; }
@media (max-width: 620px) { .scanbar { flex-direction: column; } .scanbar .btn { justify-content: center; } }

.error {
  background: rgba(255, 90, 90, .12); border: 1px solid rgba(255, 90, 90, .4);
  color: #FFB3B3; padding: 13px 16px; border-radius: var(--radius-sm);
  font-size: 14px; margin-bottom: 16px;
}
.notice {
  background: rgba(157, 223, 75, .1); border: 1px solid rgba(157, 223, 75, .38);
  color: var(--good); padding: 13px 16px; border-radius: var(--radius-sm);
  font-size: 14px; margin-bottom: 16px;
}

/* ----------------------------------------------------------------- progress */

.progress-list { list-style: none; margin: 22px 0 0; padding: 0; }
.progress-list li {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--hairline-2); font-size: 14.5px; color: var(--text-2);
}
.progress-list li:last-child { border-bottom: 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); flex: none; }
.dot.running { background: var(--sky); animation: pulse 1.2s ease-in-out infinite; }
.dot.done { background: var(--green); }
.dot.timeout, .dot.error { background: var(--unknown); }
.state {
  margin-left: auto; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3); font-weight: 700;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .16);
  border-top-color: var(--sky); border-radius: 50%;
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ wave dividers */

/* Section transitions, matching the marketing site. */
.wave { line-height: 0; margin: 0 -20px; }
.wave svg { display: block; width: 100%; height: 42px; }

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

.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0B2545 0%, #103A5C 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 44px 28px; text-align: center; margin-top: 24px;
}
.cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(55, 179, 210, .14) 0%, transparent 68%);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta h2 { font-size: clamp(21px, 3.4vw, 30px); font-weight: 800; margin-bottom: 12px; }
.cta p { color: var(--text-2); font-size: 15.5px; margin: 0 auto 24px; max-width: 56ch; line-height: 1.7; }

/* --------------------------------------------------------------------- misc */

.disclaimer { font-size: 12px; color: var(--text-3); font-style: italic; margin-top: 14px; }
.scroll-x { overflow-x: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th, table.data td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--hairline-2); white-space: nowrap;
}
table.data th {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700;
}
table.data td { color: var(--text-2); }

.tag {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  background: var(--raised); border: 1px solid var(--hairline-2);
  color: var(--text-2); padding: 3px 9px; border-radius: var(--radius-sm);
  margin: 3px 5px 3px 0;
}
.tag-good { background: rgba(157, 223, 75, .13); border-color: rgba(157, 223, 75, .35); color: var(--good); }
.tag-bad { background: rgba(255, 90, 90, .13); border-color: rgba(255, 90, 90, .35); color: var(--bad); }