/* ================================================
   BUG IDENTIFIER — Premium CSS
   ================================================ */

/* ---- TYPEFACES ----
   Self-hosted rather than pulled from fonts.googleapis.com. The Google
   stylesheet sat in the critical path and blocked the first paint for ~1s:
   the browser had to resolve a second origin, negotiate TLS, read the CSS,
   and only then learn which font files it needed. Serving them from our own
   origin collapses that into one hop the browser has already paid for.

   Both faces are variable, so a single file spans every weight the site uses
   (500, 600, 650, 700) instead of one download per weight. Latin subset only
   — anything outside it falls back to the system stack below. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fraunces-latin-var.woff2') format('woff2');
}

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

/* ---- PALETTE ----
   These are the site's own tokens, lifted from bugidentifier.net so the tool
   and the pages around it read as one product. See DESIGN-SYSTEM.md.

   Every colour in this file comes from a token below — no rule names a hex of
   its own, which is what made swapping the whole palette a one-block edit. */
:root {
  /* The design system's names, kept verbatim so the two can be compared. */
  --forest: #1f3d2f;
  --moss: #2f6e4f;
  --leaf: #3d8a63;
  --mint: #a7e0c4;
  --mist: #eef4f0;
  --paper: #f9fbfa;
  --ink: #16241d;
  --slate: #5a6b62;
  --line: #dbe7e0;

  /* The tool's own names, mapped onto the above. */
  --bg: var(--paper);
  --bg-2: var(--mist);
  --bg-3: #e7eeea;
  --surface: #ffffff;
  --surface-2: var(--mist);
  --border: var(--line);
  --border-hover: var(--mint);
  --text: var(--ink);
  --text-muted: var(--slate);
  --text-soft: #33403a;
  --green: var(--moss);
  --green-light: var(--leaf);
  --green-glow: rgba(47,110,79,0.12);

  /* Accents. The old blue and purple are deliberately gone: everything
     decorative now sits inside the same green family. */
  --blue: var(--leaf);
  --purple: var(--forest);
  --amber: #b06a2c;
  --red: #b23b2e;

  --radius: 18px;
  --radius-sm: 11px;
  --shadow: 0 4px 20px rgba(22,36,29,0.06), 0 1px 3px rgba(22,36,29,0.04);
  --shadow-lg: 0 18px 50px rgba(22,36,29,0.12);
  --shadow-btn: 0 6px 16px rgba(47,110,79,0.28);
  --font: 'Inter', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --transition: 0.25s cubic-bezier(0.4,0,0.2,1);

  /* Surfaces that used to be hardcoded per theme. */
  --nav-panel: rgba(255,255,255,0.98);
  --nav-scrolled: rgba(249,251,250,0.92);
  --overlay: rgba(22,36,29,0.45);
  --overlay-drag: rgba(238,244,240,0.94);
  --phone-screen: radial-gradient(ellipse at center, #ffffff 0%, var(--mist) 100%);
  --ring-track: var(--line);
  --hairline: rgba(22,36,29,0.07);
  --shimmer: rgba(22,36,29,0.06);
  --orb-opacity: 0.22;

  /* On the hero and the result header the ground is a dark green gradient, so
     these few read as light-on-dark rather than following the page. */
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255,255,255,0.82);
  --glass: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.4);
  --scrim: rgba(22,36,29,0.5);
  --scrim-strong: rgba(22,36,29,0.72);

  /* Danger levels — the most-read part of a result. */
  --safe-bg: var(--mint);
  --safe-text: var(--forest);
  --caution-bg: #b06a2c;
  --caution-text: #ffffff;
  --danger-bg: #b23b2e;
  --danger-text: #ffffff;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;   /* stop mobile Safari inflating text */
}

/* Visible keyboard focus everywhere (mouse clicks stay unaffected) */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* ===== NAVBAR ===== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0 24px;
  transition: background var(--transition), box-shadow var(--transition);
}
.navbar.scrolled {
  background: var(--nav-scrolled);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--border);
}
.nav-container {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 32px;
  height: 68px;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; flex-shrink: 0;
}
.brand-icon { font-size: 1.4rem; }
.brand-name {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
  color: var(--text);
}
.brand-accent { color: var(--green); }
.nav-links { display: flex; gap: 6px; margin-left: auto; }
.nav-link {
  padding: 8px 14px; color: var(--text-soft); font-size: 0.9rem; font-weight: 500;
  text-decoration: none; border-radius: 8px;
  transition: all var(--transition);
}
.nav-link:hover { color: var(--text); background: var(--surface); }
.nav-right { display: flex; align-items: center; gap: 10px; }

/* Before the first scroll the bar floats over the hero's dark green field, so
   everything in it has to read light. Once .scrolled paints the white panel
   behind it, the page's own ink colours take back over. */
.navbar:not(.scrolled) .brand-name { color: var(--on-dark); }
.navbar:not(.scrolled) .brand-accent { color: var(--mint); }
.navbar:not(.scrolled) .nav-link { color: var(--on-dark-soft); }
.navbar:not(.scrolled) .nav-link:hover { color: var(--on-dark); background: var(--glass); }
/* The bars were turned light for the dark hero but the button itself kept its
   white surface, which made the icon invisible until the navbar scrolled. */
.navbar:not(.scrolled) .nav-toggle {
  background: var(--glass);
  border-color: var(--glass-border);
}
.navbar:not(.scrolled) .nav-toggle:hover { border-color: var(--mint); }
.navbar:not(.scrolled) .nav-toggle span { background: var(--on-dark); }

.btn-nav {
  padding: 9px 18px;
  background: linear-gradient(135deg, var(--forest), var(--moss));
  border-radius: 10px; color: white; font-size: 0.88rem; font-weight: 600;
  text-decoration: none; transition: all var(--transition);
  white-space: nowrap;
}
.btn-nav:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(47,110,79,0.35); }

/* Mobile menu toggle — hidden until the nav links collapse at 768px */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 36px; padding: 0 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer;
  transition: all var(--transition);
}
.nav-toggle:hover { border-color: var(--green); }
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--text-soft); border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ===== HERO =====
   The one dark surface on the page. Same radial gradient the site's own hero
   uses, so a visitor arriving from the homepage lands on the same colour. */
.hero {
  background: radial-gradient(130% 130% at 12% 8%, var(--forest) 0%, var(--moss) 62%, var(--leaf) 100%);
  color: var(--on-dark);
  position: relative;
  /* Deliberately NOT 100vh. The hero holds the identifier now, and a
     full-viewport hero is exactly what pushed the tool 2.25 folds down. */
  display: flex; align-items: center; justify-content: center;
  /* A minimum, not a fixed height: on a phone the stacked content is taller
     than this and must be allowed to grow. svh so mobile browser chrome
     cannot turn it into overflow. */
  min-height: 95vh;
  min-height: 95svh;
  /* The navbar is 68px tall and floats over this, so the top figure is
     clearance below it, not from the top of the page. */
  padding: clamp(108px, 8vw, 144px) clamp(24px, 5vw, 80px) clamp(72px, 6vw, 108px);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.grid-overlay {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.16) 1px, transparent 0);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: var(--orb-opacity);
  animation: orbFloat 8s ease-in-out infinite;
}
.orb-1 { width: 500px; height: 500px; background: var(--leaf); top: -100px; left: -100px; animation-delay: 0s; }
.orb-2 { width: 400px; height: 400px; background: var(--mint); bottom: 0; right: 10%; animation-delay: -3s; }
.orb-3 { width: 300px; height: 300px; background: var(--forest); top: 40%; left: 40%; animation-delay: -5s; }
@keyframes orbFloat { 0%,100%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(-30px) scale(1.05); } }

/* The two-column row. It exists so the columns can be top-aligned to each
   other while the hero still centres the pair vertically — .hero itself
   cannot do both at once. */
.hero-inner {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(48px, 8vw, 140px);
  width: 100%;
}

/* The text column is a single stack; .hero-tool is its sibling in .hero-inner. */
.hero-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  flex: 0 1 500px;
  padding-top: 6px;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 100px; padding: 6px 16px;
  font-size: 0.82rem; font-weight: 500; color: var(--on-dark);
  margin-bottom: 20px; width: fit-content;
}
.badge-dot { width: 7px; height: 7px; background: var(--mint); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.5; transform:scale(0.8); } }

.hero-title {
  font-family: var(--font-display); font-size: clamp(2.8rem,5vw,4.2rem); font-weight: 600;
  line-height: 1.12; margin-bottom: 20px; letter-spacing: -0.01em;
  color: var(--on-dark);
}
/* Second line of the headline, the way the site sets it — a flat mint, not a
   clipped gradient, which washes out against the green behind it. */
.gradient-text { color: var(--mint); }
.hero-subtitle { color: var(--on-dark-soft); font-size: 1.05rem; line-height: 1.65; max-width: 460px; margin-bottom: 28px; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: #ffffff;
  border-radius: var(--radius-sm); color: var(--forest); font-size: 1rem; font-weight: 600;
  text-decoration: none; transition: all var(--transition);
  border: none; cursor: pointer;
  box-shadow: 0 8px 20px rgba(22,36,29,0.16);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(22,36,29,0.22); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  color: var(--on-dark); font-size: 1rem; font-weight: 500;
  text-decoration: none; transition: all var(--transition);
  background: var(--glass);
}
.btn-ghost:hover { background: rgba(255,255,255,0.2); }

.hero-stats { display: flex; align-items: center; gap: 24px; }
.stat { display: flex; flex-direction: column; }
.stat-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--on-dark); }
.stat-label { font-size: 0.78rem; color: var(--on-dark-soft); }
.stat-divider { width: 1px; height: 36px; background: var(--glass-border); }

/* Hero Visual */
.hero-visual {
  position: relative; z-index: 1;
  flex: 0 0 auto;
}
.phone-mockup {
  width: 280px; height: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--hairline);
}
.phone-screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px;
  background: var(--phone-screen);
}
.scan-animation { position: relative; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; }
.scan-ring {
  position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(47,110,79,0.3);
  animation: scanPulse 3s ease-in-out infinite;
}
.scan-ring-1 { width: 80px; height: 80px; animation-delay: 0s; }
.scan-ring-2 { width: 120px; height: 120px; animation-delay: 0.5s; }
.scan-ring-3 { width: 160px; height: 160px; animation-delay: 1s; }
@keyframes scanPulse { 0%,100%{ opacity:0.3; transform:scale(1); } 50%{ opacity:0.8; transform:scale(1.02); } }
.scan-icon { font-size: 2.6rem; z-index: 1; animation: iconFloat 3s ease-in-out infinite; }
@keyframes iconFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.scan-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  animation: scanLine 2s ease-in-out infinite;
  top: 0;
}
@keyframes scanLine { 0%{ top:0; opacity:1; } 100%{ top:100%; opacity:0; } }
.scan-result-chip {
  background: rgba(47,110,79,0.1); border: 1px solid rgba(47,110,79,0.3);
  border-radius: 100px; padding: 6px 14px;
  font-size: 0.72rem; font-weight: 500; color: var(--green);
  display: flex; align-items: center; gap: 6px;
}
.chip-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; animation: pulse 1.5s infinite; }

/* ===== SECTIONS COMMON ===== */
.section-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.how-it-works, .identifier-section, .bug-library { padding: 100px 0; }
.how-it-works { background: var(--bg-2); }
.bug-library { background: var(--bg-2); }

.section-header { text-align: center; margin-bottom: 64px; }
.section-tag {
  display: block; color: var(--green);
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-display); font-size: clamp(1.7rem,3.6vw,2.4rem);
  font-weight: 600; margin-bottom: 12px; letter-spacing: -0.01em; line-height: 1.12;
}
.section-subtitle { color: var(--text-soft); font-size: 1.05rem; max-width: 520px; margin: 0 auto; }

/* ===== HOW IT WORKS STEPS ===== */
.steps-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
  gap: 20px;
}
.step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: all var(--transition);
  animation: fadeUp 0.5s ease both;
  animation-delay: var(--delay, 0s);
}
.step-card:hover { border-color: var(--border-hover); transform: translateY(-4px); box-shadow: var(--shadow); }

.step-icon-wrap {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--mist);
  display: flex; align-items: center; justify-content: center;
  color: var(--green); margin-bottom: 14px;
}
.step-number { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.step-title { font-size: 1.03rem; font-weight: 700; margin-bottom: 7px; }
.step-desc { font-size: 0.875rem; color: var(--text-soft); line-height: 1.6; }

@keyframes fadeUp { from { opacity:0; transform: translateY(24px); } to { opacity:1; transform: translateY(0); } }

/* ===== IDENTIFIER — STEP WIZARD ===== */
/* Photo, then context, then the scan, then the answer. Asking for all of it at
   once made the first screen read as a form to fill in rather than a photo to
   drop. Steps are hidden, never unmounted, so stepping back keeps the photo and
   the chips the visitor already chose. */
.wizard {
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column;
}
.wizard-step { display: none; flex-direction: column; gap: 20px; }
.wizard-step.is-active { display: flex; animation: fadeUp 0.45s ease both; }

.wizard-rail {
  display: flex; align-items: center; justify-content: center;
  list-style: none;
  max-width: 720px; margin: 0 auto 32px;
}
.rail-step {
  display: flex; align-items: center; gap: 9px;
  color: var(--text-muted); font-size: 0.82rem; font-weight: 600;
  white-space: nowrap;
}
/* The connector belongs to the step that follows it, so it always spans the
   real gap however the row wraps. */
.rail-step + .rail-step::before {
  content: ''; width: clamp(16px, 5vw, 56px); height: 1px;
  background: var(--border); margin: 0 12px;
}
.rail-dot {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 0.78rem; font-weight: 700;
  transition: all var(--transition);
}
.rail-step.is-done { color: var(--text-soft); }
.rail-step.is-done .rail-dot {
  background: rgba(47,110,79,0.12);
  border-color: rgba(47,110,79,0.4);
  color: var(--green);
}
.rail-step.is-current { color: var(--text); }
.rail-step.is-current .rail-dot {
  background: linear-gradient(135deg, var(--forest), var(--moss));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 14px rgba(47,110,79,0.3);
}

/* Step 1 — the tips sit under the dropzone rather than in a side panel */
#step1 .tips-list { align-items: center; }

/* Step 2 — the photo they picked, shown back to them */
.chosen-photo {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.chosen-photo img {
  display: block; width: 100%;
  max-height: 320px; object-fit: cover;
}
.chosen-photo-meta {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(to top, rgba(22,36,29,0.72), transparent);
}
.chosen-photo-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 100px;
  background: var(--moss); color: var(--on-dark);
  font-size: 0.72rem; font-weight: 700;
}
.btn-change-photo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 100px;
  background: rgba(22,36,29,0.55); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-family: inherit; font-size: 0.76rem; font-weight: 600;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: background var(--transition);
}
.btn-change-photo:hover { background: rgba(22,36,29,0.78); }

.wizard-nav { display: flex; align-items: stretch; gap: 12px; }
.wizard-nav .btn-identify { flex: 1; }
.btn-back {
  display: inline-flex; align-items: center; gap: 7px;
  flex-shrink: 0; padding: 0 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-soft);
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: all var(--transition);
}
.btn-back:hover { color: var(--text); border-color: var(--text-muted); }

.form-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color var(--transition);
}
.form-block:focus-within { border-color: rgba(47,110,79,0.3); }

.form-block-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.form-block-header h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.step-badge {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, var(--forest), var(--moss));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: white; flex-shrink: 0;
}
.optional-tag { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); background: var(--bg-3); border-radius: 4px; padding: 1px 6px; }

/* ===== GLOBAL DRAG OVERLAY ===== */
.drag-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: var(--overlay-drag);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.drag-overlay.visible { opacity: 1; pointer-events: all; }

.drag-overlay-inner {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  border: 2.5px dashed var(--green);
  border-radius: 28px; padding: 60px 80px;
  animation: overlayPulse 1.5s ease-in-out infinite;
  background: rgba(47,110,79,0.05);
}
@keyframes overlayPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(47,110,79,0.3); }
  50% { box-shadow: 0 0 0 20px rgba(47,110,79,0); }
}
.drag-overlay-icon {
  color: var(--green);
  animation: overlayBounce 1s ease-in-out infinite;
}
@keyframes overlayBounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.drag-overlay-inner .drag-title {
  font-family: var(--font-display); font-size: 2rem; font-weight: 600;
  color: var(--text);
}
.drag-overlay-inner p { color: var(--green); font-size: 1rem; font-weight: 500; }

/* Upload Zone */
.upload-zone {
  border: 2px dashed var(--mint);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s ease;
  background: linear-gradient(#fbfefc, #f2f8f4);
  cursor: pointer;
}
.upload-zone:hover {
  border-color: var(--green);
  background: #f4faf6;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(47,110,79,0.10);
}
.upload-zone.drag-over {
  border-color: var(--green);
  background: #e9f4ee;
  box-shadow: 0 0 0 4px rgba(47,110,79,0.1);
}

.upload-placeholder {
  padding: 40px 24px 32px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  pointer-events: none;
}

/* Drop zone icon */
.dropzone-icon-wrap {
  position: relative;
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.dropzone-arrow {
  width: 60px; height: 60px;
  background: var(--mist);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
  animation: arrowBounce 2s ease-in-out infinite;
}
@keyframes arrowBounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.dropzone-bug-icon {
  position: absolute; bottom: -4px; right: -4px;
  font-size: 1.4rem;
  background: var(--surface);
  border-radius: 50%;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border);
  animation: bugWiggle 3s ease-in-out infinite;
}
@keyframes bugWiggle {
  0%,90%,100% { transform: rotate(0deg); }
  92% { transform: rotate(-10deg); }
  96% { transform: rotate(10deg); }
}

.upload-title {
  font-weight: 700; font-size: 1.12rem;
  color: var(--text); margin-bottom: 5px;
}
.upload-or {
  font-size: 0.78rem; color: var(--text-muted); margin: 4px 0 6px;
  letter-spacing: 0.05em;
}
.upload-hint { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 20px; }
.upload-actions { display: flex; gap: 10px; pointer-events: all; }

.btn-upload, .btn-camera {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 8px;
  font-size: 0.85rem; font-weight: 500; cursor: pointer;
  transition: all var(--transition);
}
.btn-upload {
  background: linear-gradient(135deg, var(--forest), var(--moss));
  border: none; color: white;
}
.btn-upload:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(47,110,79,0.3); }
.btn-camera {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-soft);
}
.btn-camera:hover { border-color: var(--border-hover); color: var(--text); }

.upload-preview { position: relative; min-height: 200px; }
.upload-preview img {
  width: 100%; max-height: 280px; object-fit: cover; display: block;
}
.preview-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--scrim), transparent);
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 12px;
}
.btn-remove {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: rgba(255,255,255,0.9);
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--forest); font-size: 0.78rem; cursor: pointer;
  transition: all var(--transition);
}
.btn-remove:hover { background: #ffffff; border-color: var(--mint); }
.preview-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--mint); border: 1px solid var(--mint);
  border-radius: 8px; padding: 5px 10px;
  color: var(--forest); font-size: 0.76rem; font-weight: 600;
}

/* Camera */
.camera-container {
  border-radius: var(--radius-sm); overflow: hidden;
  position: relative; background: #000;
}
.camera-container video { width: 100%; max-height: 280px; object-fit: cover; display: block; }
.camera-controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 16px;
  background: linear-gradient(to top, var(--scrim-strong), transparent);
}
.btn-capture {
  width: 60px; height: 60px; border-radius: 50%;
  background: white; border: 4px solid rgba(255,255,255,0.4);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.btn-capture:hover { transform: scale(1.08); }
.capture-inner { width: 44px; height: 44px; background: white; border-radius: 50%; transition: all var(--transition); }
.btn-capture:hover .capture-inner { background: #e2e8f0; transform: scale(0.9); }
.btn-stop-camera {
  padding: 8px 14px; background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 8px; color: white; font-size: 0.82rem; cursor: pointer;
}
.btn-stop-camera:hover { background: rgba(255,255,255,0.25); }

/* Input Group */
.input-group { position: relative; display: flex; }
.input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.form-input {
  width: 100%; padding: 13px 48px 13px 40px;
  background: var(--bg-2); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 0.9rem;
  transition: all var(--transition); outline: none;
}
.form-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-glow); }
.form-input::placeholder { color: var(--text-muted); }
.btn-gps {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer; transition: all var(--transition);
}
.btn-gps:hover { border-color: var(--green); color: var(--green); }

/* Env Grid */
.env-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.env-chip {
  padding: 7px 14px; background: var(--bg-2);
  border: 1.5px solid var(--border); border-radius: 100px;
  color: var(--text-soft); font-size: 0.82rem; font-weight: 500;
  cursor: pointer; transition: all var(--transition);
}
.env-chip:hover { border-color: var(--green); color: var(--green); background: var(--green-glow); }
.env-chip.selected { border-color: var(--green); color: var(--green); background: var(--green-glow); }

/* Identify Button */
.btn-identify {
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, var(--forest), var(--moss), var(--leaf));
  background-size: 200% 200%;
  border: none; border-radius: var(--radius-sm);
  color: white; font-size: 1rem; font-weight: 700;
  cursor: pointer; position: relative; overflow: hidden;
  transition: all var(--transition);
  animation: gradShift 4s ease infinite;
}
@keyframes gradShift { 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.btn-identify:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(47,110,79,0.4); }
.btn-identify:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; animation: none; }
.btn-identify::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--shimmer), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s;
}
.btn-identify:not(:disabled):hover::after { transform: translateX(100%); }

.btn-identify-content, .btn-identify-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
}

/* Spinner */
.spinner {
  width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: white; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Error Toast */
.error-toast {
  /* Sits under whichever step is showing, so it needs its own breathing room */
  margin-top: 20px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: rgba(178,59,46,0.08);
  border: 1px solid rgba(178,59,46,0.28); border-radius: var(--radius-sm);
  color: var(--red); font-size: 0.85rem;
  animation: slideDown 0.3s ease;
}
.error-toast.rate-limit {
  background: rgba(176,106,44,0.08);
  border-color: rgba(176,106,44,0.28);
  color: var(--amber);
}
@keyframes slideDown { from{ opacity:0; transform:translateY(-8px); } }

/* Rate-limit countdown badge in loading panel */
.results-loading h3.countdown {
  color: var(--amber);
  font-size: 1.1rem;
}
.countdown-bar-wrap {
  width: 100%; max-width: 240px;
  height: 4px; background: var(--surface-2);
  border-radius: 2px; overflow: hidden;
  margin: 4px 0 0;
}
.countdown-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--amber), #c98341);
  border-radius: 2px;
  transition: width 1s linear;
}


/* ===== STEP 3 — SCAN ===== */
/* The sweep runs over the visitor's own photo. A generic scanner graphic gave
   no sense that their picture was the thing being looked at. */
.scan-stage {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(47,110,79,0.35);
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(47,110,79,0.08), 0 20px 50px rgba(22,36,29,0.35);
}
.scan-stage img {
  display: block; width: 100%;
  max-height: 420px; object-fit: contain;
  background: var(--mist);
}
.scan-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(47,110,79,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,110,79,0.22) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
}
.scan-sweep {
  /* top:0 matters — without it the band sits at its static position, which is
     below the photo, and the sweep never appears over the image at all. */
  position: absolute; top: 0; left: 0; right: 0; height: 44%;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent,
    rgba(47,110,79,0.2) 82%,
    rgba(61,138,99,0.95));
  box-shadow: 0 6px 22px rgba(47,110,79,0.55);
  animation: scanSweep 2.1s cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes scanSweep {
  0%   { transform: translateY(-46%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(228%); opacity: 0; }
}
.scan-corner {
  position: absolute; width: 26px; height: 26px;
  border: 2px solid var(--green); pointer-events: none;
}
.scan-corner.tl { top: 12px; left: 12px;    border-width: 2px 0 0 2px; border-radius: 6px 0 0 0; }
.scan-corner.tr { top: 12px; right: 12px;   border-width: 2px 2px 0 0; border-radius: 0 6px 0 0; }
.scan-corner.bl { bottom: 12px; left: 12px; border-width: 0 0 2px 2px; border-radius: 0 0 0 6px; }
.scan-corner.br { bottom: 12px; right: 12px;border-width: 0 2px 2px 0; border-radius: 0 0 6px 0; }

/* Photo tips (step 1) and the loading checklist (step 3) */
.tips-list { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.tip {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: 0.82rem;
}
.tip svg { color: var(--green); flex-shrink: 0; }

/* Loading copy under the scan stage */
.results-loading { display: flex; flex-direction: column; align-items: center; text-align: center; }

.results-loading h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.results-loading p { color: var(--text-soft); font-size: 0.875rem; max-width: 280px; margin-bottom: 24px; }
.loading-steps { display: flex; flex-direction: column; gap: 8px; text-align: left; min-width: 220px; }
.loading-step {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.82rem; color: var(--text-muted);
  padding: 6px 10px; border-radius: 8px;
  transition: all 0.3s;
}
.loading-step.active { color: var(--green); background: var(--green-glow); }
.loading-step.done { color: var(--text-soft); }
.ls-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted);
  transition: background 0.3s; flex-shrink: 0;
}
.loading-step.active .ls-dot { background: var(--green); animation: pulse 1s infinite; }
.loading-step.done .ls-dot { background: var(--green); }

/* ===== RESULT CARD =====
   The shape the site uses on its homepage: a green gradient header carrying the
   answer and the danger badge, then the confidence, then numbered rows. Anything
   the model returns is set with textContent, never markup. */
.results-content { animation: fadeIn 0.5s ease; justify-content: flex-start; }
@keyframes fadeIn { from{ opacity:0; } }

.result-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin-bottom: 18px;
}

.result-top {
  background: linear-gradient(135deg, var(--forest), var(--moss));
  padding: 18px 22px;
  color: var(--on-dark);
  display: flex; align-items: center; gap: 14px;
}
.result-top-text { flex: 1; min-width: 0; }

/* The photo they uploaded, so the name and the thing can be compared without
   scrolling back up to step 2. */
.result-thumb {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 10px; object-fit: cover;
  border: 1px solid var(--glass-border);
}

.result-name {
  font-family: var(--font-display); font-size: 1.22rem; font-weight: 600;
  line-height: 1.2; color: var(--on-dark);
}
.result-scientific {
  font-size: 0.82rem; color: var(--on-dark-soft); font-style: italic;
  margin-top: 2px;
}

.result-badge {
  flex-shrink: 0;
  padding: 5px 12px; border-radius: 99px;
  font-size: 0.78rem; font-weight: 700; white-space: nowrap;
  background: var(--safe-bg); color: var(--safe-text);
}
.result-badge.safe { background: var(--safe-bg); color: var(--safe-text); }
.result-badge.caution { background: var(--caution-bg); color: var(--caution-text); }
.result-badge.danger { background: var(--danger-bg); color: var(--danger-text); }

.result-confidence {
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}
.confidence-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 7px;
}
.confidence-sub {
  font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.confidence-pct { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--green); }
.confidence-track {
  height: 7px; border-radius: 99px; overflow: hidden;
  background: var(--mist);
}
.confidence-fill {
  height: 100%; width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--mint), var(--leaf));
}

.result-rows { list-style: none; }
.result-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line);
}
.result-row:last-child { border-bottom: none; }
.row-num {
  width: 26px; height: 26px; flex: 0 0 auto;
  border-radius: 8px;
  background: var(--mist); color: var(--green);
  display: grid; place-items: center;
  font-weight: 700; font-size: 0.8rem;
}
.row-body { min-width: 0; }
.row-label { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.row-value { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; margin-top: 1px; }

.result-desc-block, .result-behavior-block, .result-fun-facts {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 12px;
}
.result-desc-block h4, .result-behavior-block h4, .result-fun-facts h4 {
  font-size: 0.8rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px;
}
.result-desc-block p, .result-behavior-block p { font-size: 0.875rem; color: var(--text-soft); line-height: 1.65; }
.result-fun-facts ul { padding-left: 16px; }
.result-fun-facts li { font-size: 0.85rem; color: var(--text-soft); line-height: 1.6; margin-bottom: 4px; }

/* Safety */
.result-safety {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 16px;
  border: 1px solid;
}
.result-safety.safe { background: rgba(47,110,79,0.07); border-color: rgba(47,110,79,0.2); }
.result-safety.caution { background: rgba(176,106,44,0.07); border-color: rgba(176,106,44,0.2); }
.result-safety.danger { background: rgba(178,59,46,0.07); border-color: rgba(178,59,46,0.2); }
.safety-icon-wrap { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.safety-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 2px; }
.safety-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
.result-safety.safe .safety-title { color: var(--green); }
.result-safety.caution .safety-title { color: var(--amber); }
.result-safety.danger .safety-title { color: var(--red); }

.result-actions {
  display: flex; gap: 10px; margin-top: 20px;
}
.btn-reset, .btn-share {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 600; cursor: pointer;
  transition: all var(--transition);
}
.btn-reset { background: var(--bg-2); border: 1px solid var(--border); color: var(--text-soft); }
.btn-reset:hover { border-color: var(--border-hover); color: var(--text); }
.btn-share { background: linear-gradient(135deg, var(--forest), var(--moss)); border: none; color: white; }
.btn-share:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(47,110,79,0.35); }

/* ===== BUG LIBRARY ===== */
.library-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.library-card {
  /* rendered as a <button> so it is keyboard-reachable — reset button chrome */
  width: 100%; display: block; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 20px;
  text-align: center; cursor: pointer;
  transition: all var(--transition);
  animation: fadeUp 0.5s ease both;
}
.library-card:hover { border-color: var(--border-hover); transform: translateY(-4px); box-shadow: var(--shadow); }
.library-card:hover .library-photo img { transform: scale(1.08); }

.library-photo {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  margin-bottom: 14px; overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.library-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.library-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.library-scientific { font-size: 0.75rem; color: var(--text-muted); font-style: italic; margin-bottom: 8px; }
.library-tag {
  display: inline-block; padding: 2px 8px; border-radius: 100px;
  font-size: 0.68rem; font-weight: 600;
}

/* ===== FOOTER ===== */
.footer { border-top: 1px solid var(--border); background: var(--bg-2); padding: 60px 0 0; }
.footer-container {
  max-width: 1280px; margin: 0 auto; padding: 0 24px 48px;
  display: flex; gap: 60px; flex-wrap: wrap;
}
.footer-brand { max-width: 320px; }
.footer-logo {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
  margin-bottom: 12px;
}
.footer-logo span { color: var(--green); }
.footer-brand p { color: var(--text-muted); font-size: 0.875rem; line-height: 1.6; margin-bottom: 16px; }
.footer-badges { display: flex; gap: 8px; }
.footer-badge {
  padding: 4px 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 100px; font-size: 0.75rem; color: var(--text-muted);
}
.footer-links { display: flex; gap: 48px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col .footer-heading { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.footer-col a { color: var(--text-soft); font-size: 0.875rem; text-decoration: none; transition: color var(--transition); }
.footer-col a:hover { color: var(--green); }
.footer-bottom {
  border-top: 1px solid var(--border); padding: 20px 24px; text-align: center;
  color: var(--text-muted); font-size: 0.8rem;
}

/* ===== TOOL SWITCHER ===== */
.tool-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin: 0 auto 36px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  width: fit-content;
  max-width: 100%;
}
.tool-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  background: transparent; border: none;
  border-radius: 100px;
  color: var(--text-soft);
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.tool-tab:hover { color: var(--text); background: var(--bg-2); }
.tool-tab.active {
  background: linear-gradient(135deg, var(--forest), var(--moss));
  color: #fff;
  box-shadow: 0 4px 14px rgba(47,110,79,0.3);
}
.tool-tab-icon { font-size: 1.05rem; line-height: 1; }

/* ===== MEDICAL DISCLAIMER (bug-bite tool) ===== */
.medical-disclaimer {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 18px; padding: 14px 16px;
  background: rgba(176,106,44,0.08);
  border: 1px solid rgba(176,106,44,0.28);
  border-radius: var(--radius-sm);
}
.medical-disclaimer .md-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1.4; }
.medical-disclaimer p {
  font-size: 0.8rem; line-height: 1.6; color: var(--text-soft); margin: 0;
}
.medical-disclaimer strong { color: var(--amber); }

/* A result block that carries a warning (e.g. "When to See a Doctor") */
.result-desc-block.block-warning {
  border-left: 3px solid var(--amber);
  padding-left: 13px;
}
.result-desc-block.block-warning h4 { color: var(--amber); }

@media (max-width: 768px) {
  .tool-tabs {
    width: 100%;
    border-radius: var(--radius-sm);
    justify-content: stretch;
  }
  .tool-tab { flex: 1 1 auto; justify-content: center; padding: 11px 12px; font-size: 0.85rem; }
}
@media (max-width: 480px) {
  .tool-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .tool-tab { width: 100%; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hero { padding: clamp(104px, 8vw, 132px) clamp(20px, 4vw, 52px) clamp(60px, 5vw, 84px); }
  .hero-inner { flex-direction: column; align-items: stretch; gap: clamp(28px, 5vw, 48px); }
  .hero-content { padding-top: 0; }
  .hero-content { flex: 1 1 auto; max-width: 640px; }
  .hero-visual { display: none; }
}
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: 62px; left: 12px; right: 12px;
    flex-direction: column; gap: 0; margin-left: 0;
    padding: 6px;
    /* Opaque on purpose: at 98% with a blur behind it, the white tool card
       underneath read straight through the panel. */
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
  .nav-links.open { animation: navDrop 0.18s ease both; }
  @keyframes navDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
  /* Inside an opaque panel the links are dark whatever the navbar is doing. */
  .nav-links .nav-link,
  .navbar:not(.scrolled) .nav-links .nav-link {
    color: var(--text);
    border-radius: 9px;
    font-weight: 600;
  }
  .nav-links .nav-link + .nav-link { border-top: 1px solid var(--line); }
  .nav-links .nav-link:hover,
  .navbar:not(.scrolled) .nav-links .nav-link:hover,
  .nav-links .nav-link:active {
    color: var(--forest);
    background: var(--mist);
  }
  .nav-links.open { display: flex; }
  .nav-link { padding: 13px 14px; }        /* comfortable tap target */

  /* Tighten the generous desktop rhythm so mobile isn't mostly empty space */
  .how-it-works, .identifier-section, .bug-library { padding: 64px 0; }
  .section-header { margin-bottom: 40px; }
  .section-container { padding: 0 18px; }
  .hero-title { font-size: 2.4rem; }
  .hero-subtitle { font-size: 1rem; }

  .steps-grid { grid-template-columns: 1fr 1fr; }
  .wizard-nav { flex-direction: column-reverse; }
  .btn-back { padding: 13px 20px; justify-content: center; }
  .form-block { padding: 20px 18px; }
  .footer-container { flex-direction: column; gap: 32px; }

  /* 16px keeps iOS from zooming the page when a field is focused */
  .form-input { font-size: 16px; }   /* 16px stops iOS zooming on focus */

  /* Bigger touch targets */
  .env-chip { padding: 10px 16px; font-size: 0.86rem; }
  .btn-upload, .btn-camera { padding: 12px 18px; }
  .btn-gps { width: 38px; height: 38px; }
}

@media (max-width: 480px) {
  /* On a phone the tool sits immediately under this bar, so a button whose only
     job is to scroll down to it earns nothing — and its 111px was what pushed
     the menu toggle clean off the right edge once the wordmark grew from
     "BugLens" to "Bug Identifier". The toggle has to stay reachable. */
  .btn-nav { display: none; }

  .steps-grid { grid-template-columns: 1fr; }
  .hero-stats { flex-wrap: wrap; gap: 12px 14px; }
  .stat-divider { height: 26px; }
  /* The badge needs its own line once the name has nowhere left to shrink. */
  .result-top { flex-wrap: wrap; }
  .result-top-text { flex: 1 1 100%; order: 2; }
  .result-badge { order: 1; margin-left: auto; }
  .result-row, .result-confidence, .result-top { padding-left: 16px; padding-right: 16px; }

  .section-container { padding: 0 14px; }
  .hero-title { font-size: 2rem; }
  .rail-label { display: none; }
  .rail-step + .rail-step::before { margin: 0 8px; }
  .form-block { padding: 18px 14px; }

  /* Two photos per row still reads well at phone widths */
  .library-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .library-card { padding: 14px 12px; }
  .library-name { font-size: 0.88rem; }
  .library-scientific { font-size: 0.7rem; }

  /* Stack the two result buttons so neither gets squeezed */
  .result-actions { flex-direction: column; }
  .btn-reset, .btn-share { padding: 13px 16px; }

  .upload-actions { flex-direction: column; width: 100%; }
  .btn-upload, .btn-camera { justify-content: center; width: 100%; }
}

@media (max-width: 360px) {
  .library-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 1.8rem; }
}

/* ================================================
   GUIDE + FAQ
   The content that sits under the tool. Everything here reuses the palette
   tokens above — see DESIGN-SYSTEM.md for where they come from.
   ================================================ */

.guide { padding: 96px 0; background: var(--surface); }
.guide-prose { max-width: 760px; margin: 0 auto; }

.guide-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.2vw, 2.15rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--forest);
  margin: 64px 0 18px;
  scroll-margin-top: 90px;
}
.guide-prose > .guide-h2:first-child { margin-top: 0; }

.guide-prose p { color: var(--text-soft); font-size: 1.02rem; line-height: 1.75; margin-bottom: 18px; }
.guide-prose strong { color: var(--ink); font-weight: 650; }

/* Front-loaded answer. Every H2 opens with one of these so a section lifted
   on its own still starts with the answer. */
.guide-lead {
  font-size: 1.12rem !important;
  color: var(--ink) !important;
  line-height: 1.65 !important;
  padding-left: 18px;
  border-left: 3px solid var(--mint);
}

/* ---- tables ---- */
.guide-table-wrap { overflow-x: auto; margin: 26px 0 30px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.guide-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 520px; }
.guide-table th {
  background: var(--mist); color: var(--forest); text-align: left;
  font-weight: 650; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.guide-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--text-soft); vertical-align: top; }
.guide-table tr:last-child td { border-bottom: none; }
.guide-table td strong { display: block; color: var(--ink); }
.gt-sci { display: block; font-style: italic; font-size: 0.85em; color: var(--text-muted); }

/* ---- 7-point checklist ---- */
.guide-checklist { list-style: none; margin: 26px 0 30px; display: grid; gap: 2px; }
.guide-checklist li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: var(--transition);
}
.guide-checklist li:hover { border-color: var(--border-hover); box-shadow: var(--shadow); }
.gc-num {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  background: var(--mist); color: var(--moss);
  display: grid; place-items: center; font-weight: 700; font-size: 0.85rem;
}
.guide-checklist h3 { font-size: 1rem; font-weight: 650; color: var(--ink); margin-bottom: 4px; }
.guide-checklist p { font-size: 0.95rem !important; margin-bottom: 0 !important; }

.guide-note {
  background: var(--mist); border-radius: var(--radius-sm);
  padding: 20px 22px; margin: 4px 0 30px;
  font-size: 0.97rem; line-height: 1.7; color: var(--text-soft);
}

/* ---- risk + tool cards ---- */
.guide-risks { display: grid; gap: 14px; margin: 26px 0 30px; }
.guide-risk { padding: 20px 22px; border: 1px solid var(--line); border-left: 3px solid var(--moss); border-radius: var(--radius-sm); }
.guide-risk h3 { font-size: 1.02rem; font-weight: 650; color: var(--forest); margin-bottom: 8px; }
.guide-risk p { margin-bottom: 0 !important; font-size: 0.96rem !important; }

.guide-tools { display: grid; gap: 16px; margin: 26px 0 30px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.guide-tool {
  padding: 24px 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: var(--transition);
}
.guide-tool:hover { transform: translateY(-4px); border-color: var(--border-hover); box-shadow: var(--shadow-lg); }
.gt-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--mist); font-size: 1.4rem; margin-bottom: 14px; }
.guide-tool h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.guide-tool p { font-size: 0.94rem !important; margin-bottom: 0 !important; }

/* ---- FAQ ---- */
.faq { padding: 96px 0; background: var(--bg-2); }
.faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; transition: var(--transition);
}
.faq-item:hover { border-color: var(--border-hover); }
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: 18px 52px 18px 22px; position: relative;
  font-weight: 600; font-size: 1rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: 22px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--moss); border-bottom: 2px solid var(--moss);
  transform: rotate(45deg); transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item[open] summary { color: var(--forest); }
.faq-item p { padding: 0 22px 20px; color: var(--text-soft); font-size: 0.97rem; line-height: 1.75; }

.faq-disclaimer {
  max-width: 760px; margin: 32px auto 0;
  font-size: 0.87rem; line-height: 1.7; color: var(--text-muted); text-align: center;
}

@media (max-width: 640px) {
  .guide, .faq { padding: 64px 0; }
  .guide-h2 { margin-top: 48px; }
  .guide-lead { padding-left: 14px; }
  .guide-checklist li { padding: 16px; gap: 13px; }
}

/* ================================================
   HERO TOOL PANEL
   The identifier lives in the hero. It sits on the dark gradient, so it needs
   its own light surface — the wizard's own rules all assume a light ground.
   ================================================ */

.hero-tool {
  position: relative; z-index: 1;
  flex: 0 1 520px;
  min-width: 0;
  /* A flat white rectangle on a dark gradient reads as a hole in the page. The
     short wash, the hairline ring and the tight double shadow give it a
     surface — depth from precision rather than from spread. */
  background:
    linear-gradient(180deg, var(--mist) 0%, var(--surface) 88px),
    var(--surface);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(10,26,18,0.06),
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 2px 6px rgba(10,26,18,0.10),
    0 18px 44px rgba(10,26,18,0.24);
  padding: 22px 22px 24px;
  scroll-margin-top: 84px;
  /* The hero sets white text for its own dark ground. This panel is light, so
     it has to take the page's ink back or anything inside it that inherits
     colour — the step-2 field headings did — turns white on white. */
  color: var(--text);
}

.hero-tool-head {
  text-align: center;
  padding-bottom: 15px;
  margin-bottom: 17px;
  border-bottom: 1px solid var(--line);
}
.hero-tool-tag {
  display: block; color: var(--moss);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 6px; opacity: 0.85;
}
.hero-tool-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.22rem; line-height: 1.15; color: var(--forest);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.hero-tool-sub { color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; }

/* Inside the panel the wizard no longer needs its own centring width. */
.hero-tool .wizard,
.hero-tool .wizard-rail { max-width: 100%; }
.hero-tool .wizard-rail { margin-bottom: 24px; }
.hero-tool .tool-tabs { margin-bottom: 24px; }

/* Stats read as a caption under the headline rather than a feature row. */
.hero-stats { gap: 20px; }
.hero-stats .stat-num { font-size: 1.3rem; }

@media (max-width: 1024px) {
  .hero-tool { flex: 1 1 auto; width: 100%; margin-top: 8px; }
  .hero-content { align-items: flex-start; }
}
@media (max-width: 640px) {
  .hero { padding: 126px 16px 48px; }
  .hero-tool { padding: 18px 15px 20px; border-radius: var(--radius-sm); }

  /* Stacked on a phone the panel caption sits directly under the H1 and says
     the same thing twice. The active tab already names the tool. */
  .hero-tool-tag, .hero-tool-sub { display: none; }
  .hero-tool-head { margin-bottom: 16px; }
  .hero-tool-title { font-size: 1.15rem; margin-bottom: 0; }

  .hero-subtitle { margin-bottom: 20px; }
  .hero-stats { gap: 10px 12px; }
  .hero-stats .stat-num { font-size: 1.05rem; }
  .hero-stats .stat-label { font-size: 0.72rem; }
  .hero-tool .tool-tabs, .hero-tool .wizard-rail { margin-bottom: 18px; }
}

/* Recency is a retrieval signal, so the date is visible, not just in markup. */
.footer-updated {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.footer-updated time { font-variant-numeric: tabular-nums; }

/* ================================================
   TOOL PANEL — compact scale
   The wizard was sized for a full-width section. Inside a 520px panel it needs
   a smaller scale throughout, so everything below is scoped to .hero-tool
   rather than changed globally.
   ================================================ */

/* Step rail */
.hero-tool .wizard-rail { margin-bottom: 18px; }
.hero-tool .rail-step { font-size: 0.74rem; gap: 7px; }
.hero-tool .rail-dot {
  width: 22px; height: 22px;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.hero-tool .rail-step + .rail-step::before {
  width: clamp(12px, 3vw, 34px); margin: 0 9px;
}

/* Drop zone */
.hero-tool .upload-zone {
  border-width: 1.5px;
  border-color: rgba(167,224,196,0.9);
  border-radius: 14px;
  background: linear-gradient(180deg, #fcfefd, #f4faf6);
}
.hero-tool .upload-zone:hover {
  transform: none;
  border-color: var(--moss);
  box-shadow: 0 0 0 4px rgba(47,110,79,0.06);
}
.hero-tool .upload-placeholder { padding: 26px 18px 22px; }

.hero-tool .dropzone-icon-wrap { width: 58px; height: 58px; margin-bottom: 13px; }
.hero-tool .dropzone-arrow {
  width: 46px; height: 46px; border-radius: 13px;
  box-shadow: inset 0 0 0 1px rgba(47,110,79,0.08);
}
.hero-tool .dropzone-arrow svg { width: 24px; height: 24px; }
.hero-tool .dropzone-bug-icon {
  width: 23px; height: 23px; font-size: 1.02rem;
  bottom: -2px; right: -2px; border-width: 1.5px;
}

.hero-tool .upload-title { font-size: 0.97rem; font-weight: 650; margin-bottom: 3px; }
.hero-tool .upload-or { font-size: 0.7rem; margin: 2px 0 4px; }
.hero-tool .upload-hint { font-size: 0.71rem; margin-bottom: 14px; }

.hero-tool .upload-actions { gap: 8px; }
.hero-tool .btn-upload,
.hero-tool .btn-camera {
  padding: 8px 15px; font-size: 0.79rem; border-radius: 9px; font-weight: 600;
}
.hero-tool .btn-upload { box-shadow: 0 2px 6px rgba(47,110,79,0.22); }
.hero-tool .btn-upload:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(47,110,79,0.26); }

/* Tips read as a footnote, not a third column of content */
.hero-tool .tips-list { gap: 6px; margin-top: 2px; }
.hero-tool .tip { font-size: 0.745rem; gap: 7px; }
.hero-tool .tip svg { width: 11px; height: 11px; }

/* Step 2 onwards */
.hero-tool .wizard-step { gap: 15px; }
.hero-tool .form-block-header h3 { font-size: 0.93rem; }
.hero-tool .env-chip { padding: 7px 12px; font-size: 0.78rem; }
.hero-tool .btn-identify { padding: 12px 20px; font-size: 0.9rem; }
.hero-tool .btn-back { padding: 12px 16px; font-size: 0.85rem; }

@media (max-width: 640px) {
  .hero-tool { padding: 18px 15px 20px; border-radius: 15px; }
  .hero-tool .upload-placeholder { padding: 22px 14px 20px; }
}

/* ---- OFF-SCREEN RENDERING ----
   The page is ~14,500px tall on a phone but only the hero (~990px) is ever
   visible at load. Without this the browser lays out and paints all sixteen
   screens up front: on a throttled mobile profile that was 1,258ms of style
   and layout plus 1,066ms of rendering, against just 83ms of script.

   content-visibility lets it skip everything off-screen until it scrolls
   close. The intrinsic sizes are the real measured heights at 412px wide, so
   the scrollbar is honest before a section has rendered; `auto` then lets the
   browser remember each section's true height once it has. The hero is
   deliberately excluded — it is the one thing we want painted immediately. */
.how-it-works { content-visibility: auto; contain-intrinsic-size: auto 1496px; }
.guide        { content-visibility: auto; contain-intrinsic-size: auto 7947px; }
.bug-library  { content-visibility: auto; contain-intrinsic-size: auto 1794px; }
.faq          { content-visibility: auto; contain-intrinsic-size: auto 1770px; }
.footer       { content-visibility: auto; contain-intrinsic-size: auto 564px; }