/* Bye Spy, a free browser privacy test by heySec, in heySec's look: a night
   hero with the fine shield outline, warm grounds, ink type, capsule controls.

   One vocabulary on every surface: what leaks (red), what partly leaks
   (orange), what is safe (green), what every site sees (grey). Brand yellow
   is for actions and eyebrows only, never a result. The file is the signature:
   values that leak are printed as a tracker would note them, values the
   browser hid are blacked out.

   Nothing loads from another site. The heySec logo and shield (brand/) and
   Inter (fonts/) are copied unchanged from the heySec website theme. Inter is
   registered as "heySec Inter", never "Inter": the fingerprint check in fp.js
   asks whether a font called Inter is installed, and a web font under that
   name would answer yes for every visitor. */

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

:root {
  color-scheme: light dark;

  --yellow: #f9ce19;
  --yellow-hover: #ffdf58;
  --yellow-pressed: #efc000;
  --night: #0e0d0a;
  --night-2: #1a1915;
  --night-3: #24231e;
  --ink-on-yellow: #030107;

  --sans: "heySec Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* The light page, and the example file lying on the night hero. */
:root {
  --surface: #ffffff;
  --ground: #f7f7f4;
  --card: #ffffff;
  --ink: #030107;
  --text-2: #5d5d57;
  --text-3: #74746d;
  --sep: rgba(3, 1, 7, 0.08);
  --ring: rgba(3, 1, 7, 0.22);
  --fill: rgba(3, 1, 7, 0.05);
  --fill-hover: rgba(3, 1, 7, 0.09);
  --redact: #030107;
  --focus: #146c79;
  --info: #146c79;
  --info-tint: rgba(20, 108, 121, 0.1);
  --leak: #b92f28;
  --leak-tint: rgba(185, 47, 40, 0.1);
  --partial: #b94a20;
  --partial-dot: #d85c2e;
  --partial-tint: rgba(216, 92, 46, 0.12);
  --safe: #18753b;
  --safe-tint: rgba(24, 117, 59, 0.11);
  --shadow-md: 0 10px 30px rgba(42, 38, 25, 0.08), 0 2px 6px rgba(3, 1, 7, 0.04);
  --symbol: rgba(249, 206, 25, 0.24);
}

/* Night: the hero, the bar above it, the footer and the small window, in
   both colour schemes. The dark scheme below turns the whole page to night. */
.topbar, .stage, .footer, .solo {
  --surface: var(--night);
  --card: var(--night-2);
  --ink: #ffffff;
  --text-2: rgba(255, 255, 255, 0.72);
  --text-3: rgba(255, 255, 255, 0.55);
  --sep: rgba(255, 255, 255, 0.1);
  --ring: rgba(255, 255, 255, 0.3);
  --fill: rgba(255, 255, 255, 0.1);
  --fill-hover: rgba(255, 255, 255, 0.16);
  --redact: #f7f7f4;
  --focus: #3fb4c6;
  --info: #3fb4c6;
  --info-tint: rgba(63, 180, 198, 0.14);
  --leak: #f05f59;
  --leak-tint: rgba(240, 95, 89, 0.16);
  --partial: #ff8a3d;
  --partial-dot: #ff8a3d;
  --partial-tint: rgba(255, 138, 61, 0.16);
  --safe: #24b986;
  --safe-tint: rgba(36, 185, 134, 0.16);
  --shadow-md: none;
  --symbol: var(--yellow);
  background: var(--night);
  color: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: var(--night);
    --ground: var(--night);
    --card: var(--night-2);
    --ink: #ffffff;
    --text-2: rgba(255, 255, 255, 0.72);
    --text-3: rgba(255, 255, 255, 0.55);
    --sep: rgba(255, 255, 255, 0.1);
    --ring: rgba(255, 255, 255, 0.3);
    --fill: rgba(255, 255, 255, 0.1);
    --fill-hover: rgba(255, 255, 255, 0.16);
    --redact: #f7f7f4;
    --focus: #3fb4c6;
    --info: #3fb4c6;
    --info-tint: rgba(63, 180, 198, 0.14);
    --leak: #f05f59;
    --leak-tint: rgba(240, 95, 89, 0.16);
    --partial: #ff8a3d;
    --partial-dot: #ff8a3d;
    --partial-tint: rgba(255, 138, 61, 0.16);
    --safe: #24b986;
    --safe-tint: rgba(36, 185, 134, 0.16);
    --shadow-md: none;
    --symbol: var(--yellow);
  }
}

/* Tones: the colour of a result wherever it is drawn. */
[data-tone="leak"], [data-group="leaks"] { --tone: var(--leak); }
[data-tone="partial"] { --tone: var(--partial-dot); }
[data-tone="safe"], [data-group="safe"] { --tone: var(--safe); }
[data-tone="untested"], [data-group="context"] { --tone: var(--ring); }

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Inter's character variants mean other glyphs in a monospace font. */
.file-subject, .file-row dd, .facts dd { font-family: var(--mono); font-feature-settings: normal; }

[hidden] { display: none !important; }

::selection { background: var(--yellow); color: var(--ink-on-yellow); }

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover { text-decoration-thickness: 2px; }

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* Small capitals: eyebrows carry the yellow dot, plain labels don't. */
.eyebrow, .label, .file-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before, .file-label::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
}

.section-title {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

/* --- The bar on top: heySec logo, the tool's name, a way to heySec.com --------- */

/* It lies over the hero, as heysec.com's does. */
.topbar { position: absolute; inset: 0 0 auto; z-index: 10; background: transparent; }

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.75rem;
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--ink);
  text-decoration: none;
}

.lockup-logo { display: block; width: auto; height: 26px; }

.lockup-name {
  padding-left: 14px;
  border-left: 1px solid var(--ring);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 26px;
  white-space: nowrap;
}

.topbar-link {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.906rem;
  font-weight: 550;
  text-decoration: none;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.topbar-link:hover { color: var(--ink); background: var(--fill); }

/* --- The stage: a night hero that holds the intro, the run, then the verdict ---- */

.stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: 4.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* The shield as a fine outline, always cropped by the right edge. */
.stage::after, .solo::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: max(-180px, -12vw);
  top: 50%;
  width: min(760px, 64vw);
  aspect-ratio: 1;
  background: url("brand/heysec-shield-outline.svg") no-repeat center / contain;
  opacity: 0.16;
  transform: translateY(-46%);
  pointer-events: none;
}

/* Before a run the hero is a photo, darkened on the copy side, with no shield. */
.stage-image { display: none; }

.stage-photo { display: flex; align-items: center; min-height: max(640px, 92svh); }
.stage-photo::after { display: none; }

.stage-photo .stage-image {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 45%;
}

.stage-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(14, 13, 10, 0.9) 0%, rgba(14, 13, 10, 0.7) 36%, rgba(14, 13, 10, 0.1) 70%),
    linear-gradient(0deg, rgba(14, 13, 10, 0.7) 0%, transparent 32%);
}

@media (max-width: 760px) {
  .stage-photo { align-items: flex-end; min-height: 0; padding-top: 14rem; }
  .stage-photo .stage-image { object-position: 78% 30%; }
  .stage-photo::before {
    background: linear-gradient(180deg, rgba(14, 13, 10, 0.2) 0%, rgba(14, 13, 10, 0.55) 30%, rgba(14, 13, 10, 0.94) 62%);
  }
}

.intro { padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 9vw, 7rem); }
.intro > * { max-width: 40rem; }

h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.75rem, 6.2vw, 5.25rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

/* A friend's score: a plate over the photo, its ring filled to the score. */
.friend-score {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 1.75rem;
  padding: 0.6rem 1.75rem 0.6rem 0.6rem;
  background: rgba(26, 25, 21, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.friend-ring { position: relative; flex: none; display: grid; place-items: center; width: 88px; height: 88px; }
.friend-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.friend-ring circle { fill: none; stroke-width: 8; }
.friend-ring-track { stroke: rgba(255, 255, 255, 0.14); }
.friend-ring-value { stroke: var(--yellow); stroke-linecap: round; animation: ring-fill 1.1s var(--ease-out) 0.2s both; }
.friend-ring-number { font-size: 1.875rem; font-weight: 800; letter-spacing: -0.04em; }

/* From empty to the score the server drew. */
@keyframes ring-fill {
  from { stroke-dashoffset: 276.46; }
}

.friend-score-text { display: grid; gap: 0.15rem; }
.friend-score-text strong { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.015em; }
.friend-score-text > span { color: var(--text-3); font-size: 0.875rem; }

@media (max-width: 480px) {
  .friend-score { border-radius: var(--r-lg); padding-right: 1.25rem; }
}

.lede {
  max-width: 32rem;
  margin: 0 0 2.25rem;
  color: var(--text-2);
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
}

/* Three short promises, each with a yellow tick, as on heySec Home's hero. */
.proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 550;
  list-style: none;
}

.proof li { display: inline-flex; align-items: center; gap: 0.5rem; }

.proof li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink-on-yellow);
  font-size: 0.625rem;
  font-weight: 800;
}

.option {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  max-width: 34rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sep);
  color: var(--text-3);
  font-size: 0.875rem;
  line-height: 1.55;
  cursor: pointer;
}

.option input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.15rem 0 0;
  accent-color: var(--yellow);
}

.option strong { color: var(--text-2); font-weight: 600; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink-on-yellow);
  font: 650 1rem/1 var(--sans);
  cursor: pointer;
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
}

.button:hover { background: var(--yellow-hover); box-shadow: 0 6px 20px rgba(249, 206, 25, 0.35); }
.button:active { background: var(--yellow-pressed); transform: scale(0.97); }

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);
}

.button-quiet { background: var(--fill); color: var(--ink); }
.button-quiet:hover { background: var(--fill-hover); box-shadow: none; }

.fine {
  margin: 0.9rem 0 0;
  color: var(--text-3);
  font-size: 0.875rem;
}

.noscript-note { font-weight: 600; }

/* --- Running ---------------------------------------------------------------------- */

.run { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); }

.phases {
  display: grid;
  gap: 0.15rem;
  max-width: 36rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.phases li {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding-block: 0.5rem;
  color: var(--text-3);
  font-size: 1.0625rem;
}

.phases li::before {
  content: "";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ring);
  color: var(--ink-on-yellow);
  font-size: 0.75rem;
  font-weight: 800;
}

.phases li[data-state="active"] { color: var(--ink); font-weight: 600; }
.phases li[data-state="active"]::before { box-shadow: inset 0 0 0 2px var(--yellow); animation: pulse 1.2s var(--ease) infinite; }
.phases li[data-state="done"] { color: var(--ink); }
.phases li[data-state="done"]::before { content: "✓"; background: var(--yellow); box-shadow: none; }

@keyframes pulse {
  50% { box-shadow: inset 0 0 0 2px var(--yellow), 0 0 0 6px rgba(249, 206, 25, 0.18); }
}

/* A note with a status dot: yellow asks you to act, teal informs, red failed. */
.notice {
  position: relative;
  max-width: 60rem;
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem 1.1rem 2.6rem;
  background: var(--card);
  border-radius: var(--r-md);
}

.notice::before {
  content: "";
  position: absolute;
  top: 1.62rem;
  left: 1.3rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot, var(--yellow));
}

.notice-info { --dot: var(--info); }
.notice-error { --dot: var(--leak); }
.notice p { margin: 0 0 0.6rem; line-height: 1.55; }
.notice p:last-child { margin-bottom: 0; }
.notice strong { font-weight: 650; }
.notice-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

/* --- Verdict: the count in words, the grade, then each area --------------------- */

.verdict { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); }

.beats {
  max-width: 60rem;
  margin: 0 0 1.75rem;
  font-size: clamp(2.25rem, 5.2vw, 4.25rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.beat { white-space: nowrap; }
.beat-n { color: var(--tone); }

.verdict-grade {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  max-width: 60rem;
  margin-bottom: 3rem;
}

.grade {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0;
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--tone, var(--ink));
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.verdict-line { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.45; }
.verdict-grade .fine { margin-top: 0.2rem; }

/* Share your score: the result's last block, on its column and edges, with the
   picture people will see beside one main action and the networks as a quiet
   line of links, as heysec.com lists them. */
.share-card {
  display: grid;
  gap: 1.25rem 2.25rem;
  align-items: center;
  max-width: 60rem;
  margin-top: 2.5rem;
  padding: 0.75rem 0.75rem 1.4rem;
  background: var(--card);
  border-radius: var(--r-lg);
}

@media (min-width: 760px) {
  .share-card { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); padding: 0.75rem 2.25rem 0.75rem 0.75rem; }
}

.share-preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.share-body { padding-inline: 0.65rem; }

@media (min-width: 760px) {
  .share-body { padding-inline: 0; }
}

.share-title { margin: 0 0 0.25rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
.share-note { margin: 0; color: var(--text-3); font-size: 0.9375rem; }
.share-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.share-actions .button { min-height: 46px; padding: 0 24px; }

@media (max-width: 759px) {
  .share-actions .button { flex: 1 1 auto; }
}

.share-networks { margin: 1rem 0 0; color: var(--text-3); font-size: 0.875rem; line-height: 1.7; }
.share-network { white-space: nowrap; }
.share-networks a { color: var(--text-2); }
.share-networks a:hover { color: var(--ink); }

.share-status { margin: 0.75rem 0 0; color: var(--text-2); font-size: 0.875rem; overflow-wrap: anywhere; }
.share-status:empty { display: none; }

.area-summary { max-width: 60rem; }
.area-summary .label { margin-bottom: 0.25rem; }

.area-rows { margin: 0; padding: 0; list-style: none; }

.area-row {
  display: grid;
  grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr) minmax(0, 18rem);
  gap: 0.5rem 1.5rem;
  align-items: center;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--sep);
}

.area-name { font-weight: 600; text-decoration: none; }
.area-name:hover { text-decoration: underline; }

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

/* One segment per check, coloured by its result. */
.segments { display: flex; gap: 4px; min-width: 0; }

.segment {
  flex: 1 1 0;
  min-width: 4px;
  height: 10px;
  border-radius: 999px;
  background: var(--tone);
}

.segment[data-tone="untested"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ring); }

/* Counts in words, each with its dot: "2 leaks · 1 partial · 3 safe". */
.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  color: var(--text-2);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  list-style: none;
}

.tally li { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.tally li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.tally li[data-tone="untested"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ring); }

/* --- Light bands -------------------------------------------------------------------- */

.band { padding-block: clamp(5rem, 11vw, 8.75rem); background: var(--surface); }
.band-ground { background: var(--ground); }

/* The file and the findings share one warm ground. */
.file-section + .findings { padding-top: 0; }

/* What it checks: a centred head, then four symbol tiles. */
.band-head { max-width: 42rem; margin: 0 auto clamp(3rem, 6vw, 4.5rem); text-align: center; }

.area-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2.75rem 2.5rem;
}

.symbol {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border-radius: 14px;
  background: var(--symbol);
}

.symbol img { display: block; width: 24px; height: 24px; }

.area-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.area-card p { margin: 0; color: var(--text-2); font-size: 0.9375rem; line-height: 1.6; }

/* --- The file: what leaks beside what is safe ---------------------------------------- */

.file {
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.file-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1rem;
}

.file-head .file-label { margin: 0; }

.file-subject {
  margin: 0;
  color: var(--text-3);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.file-title {
  margin: 0.6rem 0 1.75rem;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Groups stack, leaks first; each group's lines flow in columns, so a long
   list of leaks or of safe values never leaves an empty column beside it. */
.file-groups { display: grid; gap: 2.25rem; }

.file-group-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--tone);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.file-group-title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }

.file-group-note { margin: 0.6rem 0 0; color: var(--text-3); font-size: 0.85rem; }

.file-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.15rem 2.5rem;
  margin: 1.15rem 0 0;
}

.file-row { min-width: 0; animation: arrive 260ms ease-out both; }

.file-row dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.5rem;
  margin-bottom: 0.2rem;
  color: var(--text-3);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.file-tag {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--partial-tint);
  color: var(--partial);
}

.file-row dd { margin: 0; font-size: 0.9rem; line-height: 1.55; overflow-wrap: anywhere; }
.file-value-plain { color: var(--text-2); }

.redaction {
  display: inline-block;
  max-width: 100%;
  height: 1.05em;
  vertical-align: -0.14em;
  background: var(--redact);
  border-radius: 3px;
  transform-origin: left center;
  animation: redact 520ms var(--ease-out) both;
}

@keyframes redact {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* --- Findings ---------------------------------------------------------------------- */

.finding-group { margin-bottom: 3.5rem; scroll-margin-top: 1.5rem; }
.finding-group:last-child { margin-bottom: 0; }

.finding-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.4rem;
}

.finding-head h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.finding-blurb { max-width: 42rem; margin: 0 0 1.25rem; color: var(--text-2); }

/* One grouped card per area. Each check is one row: its name and its result;
   the explanation, what to do and what was measured open on click. */
.finding {
  background: var(--card);
  border-top: 1px solid var(--sep);
}

.finding:first-of-type { border-top: 0; border-radius: var(--r-md) var(--r-md) 0 0; }
.finding:last-of-type { border-radius: 0 0 var(--r-md) var(--r-md); }
.finding:only-of-type { border-radius: var(--r-md); }

.finding summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 1.05rem 3.25rem 1.05rem 1.4rem;
  position: relative;
  cursor: pointer;
  list-style: none;
}

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

/* A chevron that turns when the row opens. */
.finding summary::after, .more summary::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s var(--ease);
}

.finding[open] summary::after, .more[open] summary::after { transform: translateY(-30%) rotate(225deg); }

.finding-title { flex: 1 1 14rem; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.finding summary .chip { order: 2; }

.finding-body { padding: 0 1.4rem 1.35rem; }
.finding-body > p { max-width: 46rem; margin: 0 0 0.75rem; color: var(--text-2); line-height: 1.6; }

/* Status pills: the same words and colours as the file and the verdict. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
}

.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

[data-status="exposed"] .chip { background: var(--leak-tint); color: var(--leak); }
[data-status="partial"] .chip { background: var(--partial-tint); color: var(--partial); }
[data-status="partial"] .chip::before { background: var(--partial-dot); }
[data-status="protected"] .chip { background: var(--safe-tint); color: var(--safe); }
[data-status="setup"] .chip { background: var(--info-tint); color: var(--info); }
[data-status="error"] .chip::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

.facts { display: grid; margin: 0.25rem 0 0; font-size: 0.875rem; }
.facts div { display: grid; grid-template-columns: minmax(9rem, 17rem) minmax(0, 1fr); gap: 0.15rem 1rem; padding-block: 0.4rem; border-top: 1px solid var(--sep); }
.facts dt { color: var(--text-3); }
.facts dd { margin: 0; font-size: 0.8125rem; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .facts div { grid-template-columns: 1fr; }
}

.finding .advice {
  margin-top: 0;
  padding: 0.75rem 1rem;
  background: var(--ground);
  border-radius: var(--r-sm);
  color: var(--ink);
}

.advice strong { font-weight: 650; }

/* What this page doesn't test: folded away under the findings. */
.more { margin-top: 3.5rem; border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); }

.more summary {
  position: relative;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.more summary::-webkit-details-marker { display: none; }
.more summary::after { right: 0.5rem; }

.not-covered { display: grid; gap: 0 3rem; margin: 0 0 1.5rem; }

@media (min-width: 760px) {
  .not-covered { grid-template-columns: 1fr 1fr; }
}

.not-covered div { padding-block: 1rem; border-top: 1px solid var(--sep); }
.not-covered dt { margin-bottom: 0.25rem; font-weight: 650; }
.not-covered dd { margin: 0; color: var(--text-2); }

/* Keep a copy: the whole report as PDF or Markdown, made in the browser. */
.export {
  display: grid;
  gap: 1.25rem 2.5rem;
  align-items: center;
  margin-top: 3rem;
  padding: 1.5rem 1.75rem;
  background: var(--card);
  border-radius: var(--r-lg);
}

@media (min-width: 820px) {
  .export { grid-template-columns: minmax(0, 1fr) auto; }
}

.export-title { margin: 0 0 0.3rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.export-note { max-width: 34rem; margin: 0; color: var(--text-2); font-size: 0.9375rem; }
.export-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.export-actions .button { min-height: 46px; padding: 0 22px; }
.export-status { grid-column: 1 / -1; margin: 0; color: var(--leak); font-size: 0.875rem; }
.export-status:empty { display: none; }

/* --- The closing band: brand yellow, a white display line, the white shield ---------- */

.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(6rem, 11vw, 9.5rem);
  background: var(--yellow);
  color: #ffffff;
  text-align: center;
}

.cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10%;
  bottom: -46%;
  width: min(820px, 84vw);
  aspect-ratio: 1;
  background: url("brand/heysec-shield-white.svg") no-repeat center / contain;
  opacity: 0.3;
  transform: rotate(-12deg);
  pointer-events: none;
}

/* White on yellow only as large display type, with a soft warm shadow. */
.cta-title {
  max-width: 15ch;
  margin: 0 auto 2.5rem;
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  text-shadow: 0 1px 2px rgba(122, 88, 0, 0.22);
}

.cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

.button-ink { background: var(--ink-on-yellow); color: #ffffff; }
.button-ink:hover { background: #26241f; box-shadow: 0 10px 30px rgba(120, 90, 0, 0.3); }
.button-light { background: #ffffff; color: var(--ink-on-yellow); }
.button-light:hover { background: #fffbe6; box-shadow: 0 10px 30px rgba(120, 90, 0, 0.2); }
.cta .button:focus-visible { box-shadow: 0 0 0 2px var(--yellow), 0 0 0 4px var(--ink-on-yellow); }

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

.footer { padding-block: 3.5rem 3rem; }
.footer-inner { display: grid; gap: 1.25rem; }
.footer-logo { display: block; width: auto; height: 28px; }
.footer p { max-width: 44rem; margin: 0; color: var(--text-2); font-size: 0.9rem; line-height: 1.6; }
.footer .footer-line { color: var(--ink); font-size: 1rem; font-weight: 600; }

.footer .footer-legal {
  max-width: none;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sep);
  color: var(--text-3);
  font-size: 0.8125rem;
}

/* --- Hidden frames, the small window ------------------------------------------------ */

.tracker-frame {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.solo {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.solo::after { width: min(520px, 110vw); right: max(-200px, -34vw); }

.solo main { max-width: 34rem; margin-inline: 0; padding-block: 2rem; }

.solo-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 1.5rem 0 0;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 650;
}

.solo-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }

.solo-title {
  margin: 1rem 0 0.75rem;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.solo p:not([class]) { color: var(--text-2); }
.solo .lockup { display: flex; width: fit-content; margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .redaction, .file-row, .friend-ring-value { animation: none; }
  .phases li[data-state="active"]::before { animation: none; }
  .button, .topbar-link { transition: none; }
  .button:active { transform: none; }
}