/* === Medical Theme Variables (Green Variant) ===
   Medical is its own vertical with its own identity — green, the site's
   health/success hue (#46d39a) — the same way auto-audit is red and
   solar-audit is amber. This overrides only --accent/--accent-hover (the page
   content accent); the sitewide chrome uses --qc-accent and stays cyan. */
:root {
  --accent: #46d39a;         /* Medical green */
  --accent-hover: #6fe3b5;   /* Brighter green */
}

main h1 {
  font-size: 1.75rem;
  font-weight: bold;
  color: var(--accent);
  text-align: center;
  text-shadow: 0 2px 8px rgba(70, 211, 154, 0.3);
  letter-spacing: 0.03em;
  margin-bottom: 1.5rem;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--fg);
    height: auto !important;
    min-height: 100vh;
    overflow-y: auto !important;
  }

  body.tool-page {
    position: relative;
    background: var(--bg);
    padding: 0;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 35%, rgba(70, 211, 154, 0.08), transparent 75%);
    z-index: -1;
    pointer-events: none;
  }

  #cortex {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    pointer-events: none;
  }

  main {
    max-width: 800px;
    margin: 4rem auto;
    padding: 2rem;
    background: linear-gradient(
      to bottom,
      rgba(70, 211, 154, 0.05),
      rgba(0, 20, 26, 0.85)
    );
    border: 1px solid rgba(70, 211, 154, 0.15);
    border-radius: 10px;
    /*
      The Audit Scanner reads THROUGH the panel, and it was reading through the
      words. The canvas paints live numerals and rules straight behind the body
      copy, and at 0.85 alpha with nothing between them the two competed — the
      founder's report was simply that the text is too hard to read.
    
      `backdrop-filter` is the fix rather than more opacity: blur destroys the
      canvas's high-frequency detail and keeps only its luminance, so the
      atmosphere survives while the moving edges that fight the text do not. And
      it is scoped to this element's own box, which is exactly the behaviour
      asked for — the scanner is untouched everywhere the panel is not, and goes
      quiet the moment it passes behind it. Saturation is pushed with the blur so
      the glow stays coloured instead of going frosted grey, the same pairing the
      Pro shell's glass uses.
    */
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
    box-shadow: inset 0 0 60px rgba(70,211,154,0.02);
    animation: fadeIn 0.6s ease forwards;
    opacity: 0;
  }

  @keyframes fadeIn {
    to { opacity: 1; }
  }

  textarea {
    width: 100%;
    min-height: 160px;
    padding: 1rem;
    background: rgba(0, 20, 26, 0.78);
    color: var(--accent);
    border: 1px solid rgba(70, 211, 154, 0.3);
    border-radius: 6px;
    font-family: var(--font);
    transition: border 0.2s ease, box-shadow 0.3s ease;
  }

  textarea:focus {
    outline: none;
    border-color: var(--accent-hover);
    box-shadow: 0 0 14px rgba(70,211,154,0.25);
  }

  button {
    margin: 1.5rem auto;
    display: block;
    padding: 0.8rem 1.6rem;
    font-family: var(--font);
    font-weight: bold;
    font-size: 1rem;
    color: #000;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  }

  button:hover {
    background: var(--accent-hover);
    box-shadow: 0 0 14px var(--accent-hover);
  }

  button:active {
    transform: scale(0.98);
    box-shadow: 0 0 10px var(--accent);
  }

  input[type="file"] {
    display: block;
    width: 100%;
    margin: 1rem 0;
    padding: 0.6rem;
    background: rgba(0, 20, 26, 0.85);
    color: var(--accent);
    border: 1px solid rgba(70, 211, 154, 0.35);
    border-radius: 4px;
    font-family: var(--font);
    font-size: 0.9rem;
  }

  input[type="file"]::file-selector-button {
    background: var(--accent);
    color: #000;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font);
    font-weight: bold;
    margin-right: 0.8rem;
  }

  input[type="file"]::file-selector-button:hover {
    background: var(--accent-hover);
  }

  .output-area {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .audit-card {
    background: linear-gradient(
      to bottom,
      rgba(70, 211, 154, 0.04),
      rgba(0, 18, 24, 0.78)
    );
    border: 1px solid rgba(70, 211, 154, 0.1);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 0 10px rgba(70,211,154,0.05);
    animation: popIn 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .audit-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(70,211,154,0.15);
  }

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

  .audit-card .category {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--accent);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .audit-card .item,
  .audit-card .price,
  .audit-card .flagged {
    color: #ccc;
    font-size: 0.95rem;
    margin: 0.3rem 0;
  }

  .audit-card .flagged {
    color: #f55;
  }

  .audit-card .flagged.good {
    color: limegreen;
  }

  #qc-loader,
  .qc-loader {
    background: linear-gradient(
      160deg,
      rgba(70, 211, 154, 0.06),
      rgba(0, 24, 32, 0.78)
    );
    border: 1px solid rgba(70, 211, 154, 0.2);
    border-radius: 14px;
    box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.78);
  }

  .loading {
    color: var(--accent);
  }

  .analyzing-text {
    color: #bffaff;
    text-shadow: 0 0 20px rgba(70, 211, 154, 0.18);
  }

  .qc-micro {
    color: rgba(176, 255, 255, 0.72);
  }

@media (max-width: 540px) {
  #qc-loader,
  .qc-loader {
    padding: 1rem 1.1rem;
    max-width: min(100%, 18rem);
  }

  .qc-micro {
    font-size: 0.85rem;
  }
}

.flagged.soft {
  color: gold;
  font-weight: bold;
}

.details {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #94cbd4;
  line-height: 1.4;
}

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

  footer.site-footer {
    width: 100%;
    margin: 0;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    background: #000;
    color: var(--text-muted, #adcdda);
    font-size: 0.85rem;
    text-align: center;
  }

  footer.site-footer a {
    color: inherit;
    text-decoration: underline;
  }

/* ----- Mobile footer behavior ----- */
@media (max-width:600px){
  body.tool-page{
    display:flex;
    flex-direction:column;
    min-height:100vh;
  }
  main{
    flex:1 0 auto;
  }
  footer.site-footer{
    position:static;
    margin-top:auto;
  }
}

/* === Shared utilities === */
.accent-text { color: var(--accent); }

.legal-disclaimer {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--text-muted, #adcdda);
  text-align: center;
  line-height: 1.4;
}

.privacy-note {
  color: #aaa;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 1rem;
}
.preframe-note {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--text-muted, #adcdda);
  text-align: center;
}

#pro-modal {
  position: fixed;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.95);
  border: 1px solid var(--accent);
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  z-index: 999;
  border-radius: 8px;
  color: var(--fg);
  font-family: var(--font);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 40px rgba(70,211,154,0.1);
  text-align: center;
}

#pro-modal .modal-submit {
  background: var(--accent);
  color: #000;
  font-weight: bold;
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font);
  display: inline-block;
  text-decoration: none;
}

#pro-modal .close-btn {
  margin-top: 1.5rem;
  background: none;
  border: none;
  color: var(--accent-hover);
  cursor: pointer;
  font-family: var(--font);
}

.modal-msg { margin: 1rem 0 1.5rem; }
.modal-note { font-size: 0.95rem; }

/* Terms & Privacy Modal */
#legalModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.95);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 2rem;
  max-width: 26rem;
  z-index: 999;
  text-align: center;
  box-shadow: 0 0 40px rgba(70,211,154,0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}
#legalModal.fade-in { opacity: 1; }
.legal-check { display: block; margin: 1rem 0; }
.legal-actions { display: flex; justify-content: center; gap: 1rem; }
.legal-title { margin-top: 0; }
.legal-footer {
  font-size: 0.85rem;
  color: var(--text-muted, #adcdda);
  margin-top: 0.5rem;
}

/* Privacy TL;DR bullet list */
.privacy-tldr-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  text-align: left;
  line-height: 1.4;
}

.privacy-tldr-list li::before {
  content: "\2022";
  margin-right: 0.5rem;
}

/* --- Next-steps action buttons --- */
.next-steps-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

.next-step-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.next-step-btn:hover {
  transform: translateY(-1px);
}

.next-step-free {
  background: var(--accent);
  color: #000;
  border: none;
}

.next-step-free:hover {
  box-shadow: 0 0 14px rgba(70, 211, 154, 0.3);
}

.next-step-pro {
  background: rgba(70, 211, 154, 0.08);
  color: #cfeef2;
  border: 1px solid rgba(70, 211, 154, 0.2);
}

.next-step-pro:hover {
  border-color: rgba(70, 211, 154, 0.45);
  box-shadow: 0 0 12px rgba(70, 211, 154, 0.15);
}

.next-step-pro-cta {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 6px;
  font-family: var(--font);
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 0 18px rgba(70, 211, 154, 0.2);
  text-align: center;
}

.next-step-pro-cta:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 22px rgba(70, 211, 154, 0.3);
}

.pro-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  background: rgba(70, 211, 154, 0.18);
  color: var(--accent);
  margin-left: 0.35rem;
  vertical-align: middle;
}

.quota-context {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted, #adcdda);
  text-align: left;
}

/* --- Pro upsell card (post-results) --- */
.pro-upsell {
  margin-top: 1rem;
  border: 1px solid rgba(70, 211, 154, 0.25);
  background: linear-gradient(160deg, rgba(70, 211, 154, 0.06), rgba(0, 24, 32, 0.82));
  text-align: center;
}

/* --- Quota modal improvements --- */
.modal-benefits {
  text-align: left;
  margin: 1rem 0;
}

.modal-benefits-lead {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: #cfeef2;
}

.modal-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.modal-benefits-list li {
  padding: 0.25rem 0;
  font-size: 0.9rem;
  color: #cfeef2;
}

.modal-benefits-list li::before {
  content: "\2713";
  color: var(--accent);
  margin-right: 0.5rem;
  font-weight: bold;
}

.modal-price {
  font-size: 0.88rem;
  color: #aaa;
  margin: 0.75rem 0 1rem;
}

.modal-reset {
  font-size: 0.85rem;
  color: var(--text-muted, #adcdda);
  margin: 0.75rem 0 0;
}

/* --- Section labels for grouped audit results --- */
.section-label {
  margin-top: 1.2rem;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #aaa;
}

@media (max-width: 540px) {
  .next-steps-actions {
    grid-template-columns: 1fr;
  }
}

/* === Medical-specific styles === */

/* 501(r) rights box */
.rights-box {
  border: 1px solid rgba(70, 211, 154, 0.45);
  background: rgba(70, 211, 154, 0.08);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-top: 0.75rem;
}

.rights-box h3 {
  margin: 0 0 0.4rem;
  color: #46d39a;
  font-size: 0.95rem;
}

.rights-box p {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: #cfeef2;
  line-height: 1.5;
}

.rights-box a {
  color: var(--accent);
  font-size: 0.85rem;
}

/* Medical line item row */
.medical-line-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed rgba(70, 211, 154, 0.15);
  font-size: 0.9rem;
  color: #ccc;
}

.medical-line-item:last-child {
  border-bottom: none;
}

/* Sub-verticals tag line */
.subverticals-note {
  font-size: 0.85rem;
  color: #9fc4cf;
  margin-top: 0.3rem;
  margin-bottom: 0.6rem;
}

/* Medical red flag item */
.medical-flag {
  border-left: 3px solid #f55;
  padding: 0.45rem 0.8rem;
  margin: 0.4rem 0;
  background: rgba(255, 107, 107, 0.08);
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  color: #f88;
}

/* Privacy notice — stronger for health data */
.medical-privacy-note {
  background: rgba(70, 211, 154, 0.06);
  border: 1px solid rgba(70, 211, 154, 0.18);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: #9fc4cf;
  line-height: 1.5;
}

.medical-privacy-note strong {
  color: var(--accent);
}

/* Entrance rhythm: stagger the first dozen result cards (40ms steps) so the
   audit reads as a delivery rather than a one-frame dump; later cards share
   the cap so long audits don't crawl. */
#output .audit-card { animation-fill-mode: backwards; } /* hidden during its delay */
#output .audit-card:nth-child(1) { animation-delay: 0ms; }
#output .audit-card:nth-child(2) { animation-delay: 40ms; }
#output .audit-card:nth-child(3) { animation-delay: 80ms; }
#output .audit-card:nth-child(4) { animation-delay: 120ms; }
#output .audit-card:nth-child(5) { animation-delay: 160ms; }
#output .audit-card:nth-child(6) { animation-delay: 200ms; }
#output .audit-card:nth-child(7) { animation-delay: 240ms; }
#output .audit-card:nth-child(8) { animation-delay: 280ms; }
#output .audit-card:nth-child(9) { animation-delay: 320ms; }
#output .audit-card:nth-child(10) { animation-delay: 360ms; }
#output .audit-card:nth-child(n + 11) { animation-delay: 400ms; }

/* Reduced motion: results appear immediately — no pop, no stagger, and the
   `both` fill can't hide cards behind a delayed start. */
@media (prefers-reduced-motion: reduce) {
  #output .audit-card {
    animation: none;
    transition: none;
  }
}