/* Self-hosted display font (SIL OFL 1.1) -- see THIRD_PARTY_LICENSES.md.
   No third-party font CDN is ever contacted at runtime; the woff2 ships
   with the app itself (17KB, latin subset, single 800 weight). */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-v9-latin-800.woff2") format("woff2");
}

/* ============================================================
   MarkMyAss -- design tokens, built from zero.

   Direction: a high-converting indie-software landing page first,
   a pirates-vs-ghosts brand personality layered on top of it second.
   Bright warm-cream base, deep navy ink, punchy coral CTAs, gold and
   turquoise reserved for decoration (icons/borders/badges), never for
   small text -- both fail 4.5:1 against a bright cream background at
   full saturation, so keeping them decorative-only lets them stay
   vivid instead of getting muddied down to "readable brown/teal".
   Every color used as TEXT below is WCAG-verified at >=4.5:1 against
   whatever background it actually sits on. See DESIGN_SYSTEM.md.
   ============================================================ */

:root {
  --bg: #fff6e7;
  --bg-void: #fbeac9;
  --surface: #ffffff;
  --surface-2: #fff1dc;
  --border: #f0ddba;
  --text: #12213d;
  --muted: #56638a;

  /* The one vivid color used for TEXT (links, kicker, hover, CTAs) --
     verified >=4.5:1 against bg, surface-2 and white. */
  --accent: #cc2a14;
  --accent-ink: #ffffff;

  /* Decorative-only vivid accents: icon fills, borders, tinted
     backgrounds, badge chips with dark text on top. Never used as a
     foreground text color -- at full saturation none of these pass
     4.5:1 against a bright cream page. --brand-salmon is the official
     MarkMyAss logo's badge color (sampled from the approved asset) --
     a restrained brand signature, never a text color and never a
     replacement for the site palette. */
  --brass: #e8a233;
  --spectral: #12b8a6;
  --brand-salmon: #f87868;

  /* Status text -- each independently checked against the tinted
     surface-2 chip background it renders on. */
  --found: #aa4b16;
  --notfound: #177843;
  --unknown: #56638a;
  --danger: #d4242f;
  --pass: #177843;
  --partial: #aa4b16;

  --parchment: #f6dfaf;
  --parchment-ink: #12213d;

  /* Modern, bold, internet-native type. Body stays the fast system
     sans; display type is a bundled contemporary grotesque (single 800
     weight) -- distinctive and characterful without being an antique
     pirate poster face. No display serif anywhere in this identity. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --font-display: "Bricolage Grotesque", var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  /* "Sticker" hard shadow -- flat color offset, no blur. Reads as bold
     and internet-native, not a soft muted parchment drop-shadow. */
  --shadow-card: 4px 4px 0 var(--text);
  --shadow-card-hover: 6px 6px 0 var(--text);
  --shadow-btn: 3px 3px 0 var(--text);

  --dur-fast: 180ms;
  --dur-base: 260ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1b33;
    --bg-void: #081222;
    --surface: #16294a;
    --surface-2: #1e3a63;
    --border: #2c4a72;
    --text: #fbf3e2;
    --muted: #a9bad9;
    --accent: #ff6b4a;
    --accent-ink: #0e1b33;
    --brass: #f2b84d;
    --spectral: #4fe0cc;
    --brand-salmon: #f87868;
    --found: #ffb066;
    --notfound: #6fe0a0;
    --unknown: #a9bad9;
    --danger: #ff8a80;
    --pass: #6fe0a0;
    --partial: #ffb066;
    --parchment: #f5dfb0;
    --parchment-ink: #12213d;
    --shadow-card: 4px 4px 0 #081222;
    --shadow-card-hover: 6px 6px 0 #081222;
    --shadow-btn: 3px 3px 0 #081222;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

/* Brand signature: text selection in the logo's salmon (navy text on
   top stays AA -- 6.0:1 against #f87868). */
::selection { background: var(--brand-salmon); color: #12213d; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.5;
  /* Nothing on this site is meant to require horizontal scroll on any
     viewport -- a flex child with a large intrinsic size can otherwise
     force the page wider than the viewport even with max-width:100%
     on the image itself, since flex items default to min-width:auto. */
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

/* Everything but the wide hero band reverts to a focused reading/
   interaction column, even though .wrap itself is wide enough to host
   the full-width hero. Scoped to the homepage (.wrap without
   .article-wrap) so it never narrows the footer on Lab/Benchmarks/Run
   Local pages, which use their own (780px) .article-wrap measure. */
.tool-flow, .promo-bottom, .run-local-teaser, .info-section,
.wrap:not(.article-wrap) > footer {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.promo-top {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 1rem;
}
.promo-top a { color: var(--accent); }

.top-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}
.top-nav a { color: var(--muted); text-decoration: none; }
.top-nav a:hover { color: var(--accent); }
.top-nav .brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}
.top-nav .brand-link:hover { color: var(--accent); }
/* Discreet Moseisley acquisition chip: visually secondary to every
   product link -- outline only, salmon on hover. */
.top-nav .nav-cta {
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  font-weight: 600;
}
.top-nav .nav-cta:hover {
  color: #12213d;
  border-color: var(--text);
  background: var(--brand-salmon);
}
.brand-mark { flex-shrink: 0; }
.brand-kicker img { vertical-align: -3px; }

/* ---- Hero: product-first, headline+CTA read in under 3 seconds ----
   Classic conversion layout: copy/CTAs in the left column, the brand
   illustration contained in the right column, and the cleaner panel in
   its own strong block immediately below the hero. The illustration is
   large enough to carry the brand but never pushes the headline or the
   tool down the page. */
.hero {
  display: grid;
  /* The illustration column is deliberately the WIDER of the two -- it
     carries the brand, so it reads as a true hero image rather than a
     small supporting card. The copy column keeps a comfortable measure
     (its own content is width-capped), so conversion hierarchy is
     unharmed. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 2.25rem;
  padding: 1.5rem 0 0;
}
.hero-copy { min-width: 0; }
/* The brand lockup above the H1: approved round badge + a plain
   salmon wordmark. No pill, no border, no background -- just the logo
   and the name. WCAG 1.4.3 exempts text that is part of a logo or
   brand name from contrast requirements, so the wordmark may use the
   brand salmon directly; every INFORMATIONAL text element on the page
   still follows the normal contrast rules. Sized ~30% above the
   navbar brand (0.98rem -> 1.28rem), well below the H1. */
.brand-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1.6rem;
}
.brand-kicker .brand-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-salmon);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.15rem + 2.6vw, 3.05rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.7rem;
  max-width: 18ch;
}
/* The Inspect -> Clean -> Verify sequence as pure typography -- bold
   display-type labels with accent arrows. Deliberately NOT a stepper
   widget: no numbered chips, no pills. */
.hero-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.8rem;
  padding: 0;
}
.hero-flow .flow-step {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.hero-flow .flow-sep {
  color: var(--brand-salmon);
  font-weight: 700;
  font-size: 1.15rem;
}
.subheadline {
  margin: 0.6rem 0 0;
  color: var(--text);
  font-size: 1.15rem;
  max-width: 46ch;
}
.tagline {
  margin: 0.35rem 0 0;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
}
.honesty-note { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--muted); font-style: italic; }

/* Cross-LLM support band: a full-width salmon brand strip that makes
   "not only for Claude" visible at a glance. Tool names appear as
   restrained cream wordmark chips (nominative text, no third-party
   logo files) so ecosystem compatibility reads instantly without any
   external brand overpowering ours. All text is deep navy on the
   salmon field (6.0:1) or on cream chips (14.9:1). */
.llm-band {
  margin: 2.25rem 0 0;
  padding: 1.5rem 1.75rem 1.6rem;
  background: var(--brand-salmon);
  border: 2px solid var(--text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
  color: #12213d;
}
.llm-band h2 {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  color: #12213d;
}
.llm-band-logos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 0.6rem;
  margin: 0 0 0.9rem;
  padding: 0;
}
.llm-band-logos li {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: #12213d;
  background: #fff6e7;
  border: 2px solid #12213d;
  border-radius: 999px;
  padding: 0.32rem 1rem;
}
/* The one-glance value line: big, plain words, no jargon. */
.llm-band-lead {
  margin: 0 auto 0.55rem;
  max-width: 46ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  line-height: 1.35;
  color: #12213d;
}
/* The honesty fine print stays visible but secondary. */
.llm-band-fine {
  margin: 0 auto;
  max-width: 64ch;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #12213d;
  opacity: 0.88;
}
@media (max-width: 640px) {
  .llm-band { padding: 1.2rem 1rem 1.3rem; }
  .llm-band-logos li { font-size: 0.88rem; padding: 0.28rem 0.8rem; }
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.6rem;
}
/* Both hero CTAs share one component family: identical fixed height,
   identical radius, text vertically centered via inline-flex. The
   hierarchy lives in fill (salmon primary vs outline secondary),
   type size and horizontal padding -- never in mismatched heights. */
.hero-cta-row .btn.btn-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  margin-top: 0;
  border-radius: var(--radius-sm);
}
.btn-lg { padding: 0 1.8rem; font-size: 1.05rem; margin-top: 0; }
.hero-cta-row .btn.secondary.btn-lg {
  padding: 0 1.15rem;
  font-size: 0.95rem;
  box-shadow: 2px 2px 0 var(--text);
}

.trust-bar {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  margin: 1.5rem 0 0;
  padding: 0;
}
.trust-bar li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.trust-bar li::before { content: "\2713"; color: var(--notfound); }

.privacy-note { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--muted); }

/* ---- Hero illustration -- the mandatory brand scene: pirates
   actively hunting spectral ghosts aboard their ship. Deliberately NOT
   a framed card: the artwork sits directly on the page background as an
   integrated scene anchored to the right, bleeding toward the viewport
   edge, with a soft fade on its left edge so it melts into the hero
   background instead of reading as "an image in a box". The artwork's
   own sky is the same warm cream family as --bg, so no border is needed
   for it to feel intentional. Plays a single settle-in animation on
   load, never loops. */
.hero-scene {
  margin: 0;
  min-width: 0;
  /* Bleed out of the centered 1140px .wrap toward the right viewport
     edge (the max() keeps it sane below the wrap's max-width; body has
     overflow-x hidden as the scrollbar-width safety net). */
  margin-right: calc(-1 * max((100vw - 1140px) / 2, 0px) - 1.25rem);
  animation: hero-settle var(--dur-base) var(--ease-out);
}
.hero-scene img {
  display: block;
  width: 100%;
  height: auto;
  /* Soft blend into the page: fade the left edge (protects text
     readability) and every outer edge so the artwork's rectangle never
     shows against the page background. Two mask layers intersected --
     horizontal fade x vertical fade. The single-layer -webkit fallback
     still kills the most important (left) edge on engines without
     mask-composite. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 97%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 16%, #000 97%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
@keyframes hero-settle {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    text-align: center;
  }
  .hero h1 { margin-left: auto; margin-right: auto; }
  .subheadline { margin-left: auto; margin-right: auto; }
  .hero-flow, .hero-cta-row, .trust-bar { justify-content: center; }
  /* Full-width illustration below the text -- still frameless; fade
     both side edges gently instead of only the left. */
  .hero-scene {
    margin: 0 calc(50% - 50vw);
  }
  .hero-scene img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-composite: intersect;
  }
}

.stage-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.stage-icon { flex-shrink: 0; }
.section-flavor.with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card, .input-section {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--text);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
  box-shadow: var(--shadow-card);
}

/* A small brand ghost peeking over the top edge of the cleaner card --
   a deliberate "something is hiding inside" wink right where files get
   inspected. Decorative only (empty alt). */
.card-peek {
  position: absolute;
  top: -30px;
  right: 26px;
  transform: rotate(-7deg);
  pointer-events: none;
}

/* Small in-universe spot illustration floated inside an info section
   (e.g. the crate-ghosts scene beside "What MarkMyAss actually
   removes"). Radial mask melts its cream edges into the card. */
.section-spot {
  float: right;
  width: 215px;
  height: auto;
  margin: -0.4rem -0.3rem 0.4rem 1rem;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 52%, transparent 95%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 52%, transparent 95%);
}
@media (max-width: 640px) {
  .section-spot { width: 150px; margin-right: -0.5rem; }
}

.tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.tab {
  flex: 1;
  padding: 0.6rem;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
}
.tab.active { background: var(--brand-salmon); border-color: var(--text); color: #12213d; font-weight: 700; }

.skip-link {
  position: absolute;
  top: -100%;
  left: 0.5rem;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.6rem 1rem;
  border-radius: 0 0 8px 8px;
  z-index: 100;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 0; }

.panel.hidden, .hidden { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

textarea {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  font-family: inherit;
  resize: vertical;
}

/* Always-visible supported-formats line under the Paste/Upload tabs --
   small, secondary, but readable at a glance in BOTH tabs. */
.formats-hint {
  margin: -0.35rem 0 0.9rem;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.01em;
}

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  color: var(--muted);
}
.dropzone.dragover { border-color: var(--accent); color: var(--text); }
.dropzone-or { font-size: 0.8rem; }

.btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--text);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-btn);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
/* Primary action = the brand salmon (color grammar: SALMON =
   MarkMyAss / actions / marks). Navy text on salmon is 6.0:1 (AA). */
.btn.primary { background: var(--brand-salmon); color: #12213d; }
.btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--brand-salmon) 88%, white); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--text); }
.btn.primary:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--text); }
.btn.primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn.secondary { background: var(--surface); color: var(--text); border: 2px solid var(--text); margin-top: 0; padding: 0.5rem 1rem; font-size: 0.9rem; }
.btn.secondary:hover { background: var(--surface-2); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--text); }
.btn:focus-visible { outline: 2px solid var(--spectral); outline-offset: 2px; }

.error { color: var(--danger); margin-top: 0.75rem; font-weight: 600; }

.flow-arrow { text-align: center; font-size: 1.5rem; color: var(--muted); margin: -0.5rem 0 0.5rem; }

.signal-table { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; }
.signal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-sm);
}
.signal-row:has(.status-found), .signal-row:has(.status-detected) { border-left-color: var(--found); }
.signal-row:has(.status-not_found), .signal-row:has(.status-not_detected), .signal-row:has(.status-removed) { border-left-color: var(--notfound); }
.signal-label { font-weight: 600; }
.signal-status { font-weight: 800; font-size: 0.85rem; padding: 0.15rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.status-found, .status-detected { color: var(--found); background: color-mix(in srgb, var(--found) 15%, transparent); }
.status-not_found, .status-not_detected, .status-removed { color: var(--notfound); background: color-mix(in srgb, var(--notfound) 15%, transparent); }
.status-unknown, .status-unverified, .status-partial, .status-unsupported { color: var(--unknown); background: color-mix(in srgb, var(--unknown) 15%, transparent); }
.experimental-tag { font-size: 0.75rem; color: var(--found); margin-left: 0.4rem; }

/* Native tag-level field detail under a detected signal row. */
.field-list {
  list-style: none;
  margin: -0.15rem 0 0.6rem;
  padding: 0.45rem 0.8rem 0.45rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: var(--muted);
  border-left: 3px solid var(--border);
}
.field-list li { overflow-wrap: anywhere; }
.field-category {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--found);
  background: color-mix(in srgb, var(--found) 12%, transparent);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  margin-right: 0.25rem;
}
.field-preview { color: var(--text); }

.summary { font-weight: 700; margin-top: 1rem; }
.original-preserved { color: var(--notfound); font-size: 0.9rem; font-weight: 600; }

/* Secondary, in-theme flavor line under a STEP heading -- never
   replaces the precise technical heading/status text next to it. */
.section-flavor {
  margin: -0.4rem 0 0.9rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.ghost-glyph { color: var(--spectral); vertical-align: -2px; margin-right: 0.35rem; }
.verdict-icon { vertical-align: -3px; margin-right: 0.4rem; }

.lab-teaser {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 1rem 0 0;
}
.lab-teaser a { color: var(--accent); font-weight: 600; }

#verify-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.verify-column h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.5rem; }
@media (max-width: 560px) {
  #verify-before-after { grid-template-columns: 1fr; }
}

.exiftool-panel, .verdict-panel {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-left: 4px solid var(--border);
  transition: border-color var(--dur-base) var(--ease-out);
}
.exiftool-panel h3, .verdict-panel h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.exiftool-panel div { font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.7; }
.verdict-badge {
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-size: 0.95rem;
  border: 1px solid transparent;
  animation: seal-stamp var(--dur-base) var(--ease-out);
}
/* Emotional-state mapping for the verdict panel border -- reinforces
   the badge's own color+text without relying on color alone (the
   badge text always spells out the verdict, e.g. "VERIFIED CLEAN"). */
.verdict-panel:has(.verdict-verified_clean) { border-left-color: var(--pass); }
.verdict-panel:has(.verdict-partial) { border-left-color: var(--partial); }
.verdict-panel:has(.verdict-unverified),
.verdict-panel:has(.verdict-not_applicable) { border-left-color: var(--unknown); border-left-style: dashed; }
.verdict-panel:has(.verdict-failed) { border-left-color: var(--danger); }
/* The verdict badge "stamps in" once when a result appears -- a
   single, short, non-looping animation (disabled entirely under
   prefers-reduced-motion via the global rule above). */
@keyframes seal-stamp {
  from { transform: scale(1.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Signal detected: a small ghost glyph briefly appears next to a
   FOUND row (see app.js). Single play, not a loop. */
.ghost-appear { animation: ghost-in var(--dur-base) var(--ease-out); }
@keyframes ghost-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.85); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cleaning: a detected signal row dissolves as it's removed. */
.ghost-dissolve { animation: ghost-out calc(var(--dur-base) * 1.1) var(--ease-in) forwards; }
@keyframes ghost-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.9); }
}

.verdict-verified_clean { background: color-mix(in srgb, var(--pass) 18%, transparent); color: var(--pass); border-color: color-mix(in srgb, var(--pass) 45%, transparent); }
.verdict-partial { background: color-mix(in srgb, var(--partial) 18%, transparent); color: var(--partial); border-color: color-mix(in srgb, var(--partial) 45%, transparent); }
.verdict-unverified { background: color-mix(in srgb, var(--unknown) 18%, transparent); color: var(--unknown); border-color: color-mix(in srgb, var(--unknown) 45%, transparent); }
.verdict-not_applicable { background: color-mix(in srgb, var(--unknown) 18%, transparent); color: var(--unknown); border-color: color-mix(in srgb, var(--unknown) 45%, transparent); }
.verdict-failed { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

.watermark-note { font-size: 0.82rem; color: var(--muted); margin-top: 1rem; }
.watermark-note a { color: var(--accent); font-weight: 600; }

.explain-panel {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 2px solid var(--border);
}
.explain-panel h3 { margin: 0 0 0.4rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.explain-panel ul { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; }
.explain-panel li { margin: 0.3rem 0; }
.explain-panel p { margin: 0; font-size: 0.92rem; line-height: 1.6; }
.explain-panel + .explain-panel { margin-top: 0.75rem; }

/* Capability / limits / use-case checklists on the homepage's "what
   MarkMyAss actually removes" section. */
.info-section h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; font-size: 1.55rem; }

.capability-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1rem 0 1.25rem;
}
@media (max-width: 640px) {
  .capability-columns { grid-template-columns: 1fr; gap: 1.25rem; }
}
.capability-columns h3 {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.capability-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.92rem;
  line-height: 1.5;
}
.capability-list li { padding-left: 1.4rem; position: relative; }
.capability-list--good li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--notfound);
  font-weight: 700;
}
.capability-list--limit li::before {
  content: "!";
  position: absolute;
  left: 0.15rem;
  color: var(--partial);
  font-weight: 700;
}

.download-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.receipt-downloads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.receipt-label { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.receipt-downloads .btn.secondary { margin-top: 0; }

/* Homepage Skill CTA -- a compact salmon-edged banner between the
   cleaner and the info sections: badge, one-line pitch, one action. */
.skill-cta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: 720px;
  margin: 0 auto 1.5rem;
  padding: 1.1rem 1.4rem;
  background: var(--surface);
  border: 2px solid var(--text);
  border-left: 6px solid var(--brand-salmon);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.skill-cta img { flex-shrink: 0; }
.skill-cta-copy { flex-grow: 1; min-width: 0; }
.skill-cta h2 { margin: 0 0 0.2rem; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.skill-cta p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.skill-cta .btn { flex-shrink: 0; margin-top: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .skill-cta { flex-direction: column; text-align: center; }
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 1rem 0 3rem;
}
@media (max-width: 860px) {
  .preview-grid { grid-template-columns: 1fr; }
}
.preview-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 2px solid var(--text);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.preview-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-card-hover); }
.preview-card:focus-visible { outline: 2px solid var(--spectral); outline-offset: 2px; }
/* Full-bleed illustrated cover band at the top of each preview card --
   each card shows its destination page's own scene (Lab chart room,
   Captain's Log, navigator), so the brand universe is visible on the
   homepage beyond the hero without repeating one image. */
.preview-thumb {
  width: calc(100% + 3rem);
  max-width: calc(100% + 3rem);
  height: 150px;
  object-fit: cover;
  margin: -1.5rem -1.5rem 0.25rem;
  border-radius: 13px 13px 0 0;
  border-bottom: 2px solid var(--text);
}
.preview-card h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.preview-card p { margin: 0; color: var(--muted); font-size: 0.92rem; flex-grow: 1; }
.preview-link { color: var(--accent); font-weight: 700; font-size: 0.9rem; }

/* Homepage Moseisley section -- the crew metaphor, low on the page,
   never above the cleaner. Reuses the existing chart-room crew scene. */
.crew-section {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  max-width: 860px;
  margin: 0 auto 3rem;
  padding: 1.75rem;
  border: 2px solid var(--text);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.crew-section-art {
  flex-shrink: 0;
  width: 260px;
  height: auto;
  border-radius: var(--radius-sm);
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 55%, transparent 97%);
  mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 55%, transparent 97%);
}
.crew-section-copy { min-width: 0; }
.crew-section h2 { margin: 0 0 0.5rem; font-size: 1.4rem; font-family: var(--font-display); font-weight: 800; }
.crew-section p { margin: 0 0 0.7rem; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.crew-section p a { color: var(--accent); font-weight: 600; }
.crew-tagline { font-weight: 700; color: var(--text) !important; }
.crew-section .btn { margin-top: 0.2rem; }
@media (max-width: 720px) {
  .crew-section { flex-direction: column; text-align: center; }
  .crew-section-art { width: 220px; }
}

/* Post-verify Moseisley conversion card: appears only after results,
   download and receipts are already on screen. */
.moseisley-cta {
  margin-top: 1.5rem;
  padding: 1.25rem 1.4rem;
  border: 2px solid var(--text);
  border-left: 6px solid var(--brand-salmon);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  text-align: center;
}
.moseisley-cta-kicker {
  margin: 0 0 0.1rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--notfound);
}
.moseisley-cta h3 { margin: 0 0 0.35rem; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.moseisley-cta p { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.9rem; }
.moseisley-cta .btn { margin-top: 0; }

footer { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 2rem; }
footer a { color: var(--accent); }
.footer-sitemap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.9rem;
  margin: 0.6rem 0;
}
.footer-sitemap a { color: var(--muted); }
.footer-sitemap a:hover { color: var(--accent); }

.run-local-teaser {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.run-local-teaser a { color: var(--accent); font-weight: 600; }

label { display: block; margin: 1rem 0 0.4rem; color: var(--muted); font-size: 0.9rem; font-weight: 600; }