/* ===== About (about.html) ===== */
/* paste the WHOLE <style> from about.html here, unchanged */

    :root{
      --bg:#ffffff;
      --fg:#0f172a;
      --muted:#475569;
      --border:#e2e8f0;
      --card:#f8fafc;
      --accent:#2563eb;
      --accent-ink:#ffffff;
      --warn:#ef4444;
      --radius:12px;
      --shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.06);
      --maxw:820px;
    }
    @media (prefers-color-scheme: dark){
      :root{
        --bg:#0b1220;
        --fg:#e6ebf5;
        --muted:#9aa6be;
        --border:#1f2937;
        --card:#0f172a;
        --accent:#3b82f6;
        --accent-ink:#0b1220;
        --warn:#f87171;
      }
    }
    *,*::before,*::after{ box-sizing: border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--fg);
      background:var(--bg);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a{ color:var(--accent); text-decoration: none; }
    a:hover{ text-decoration: underline; }
    a:focus-visible, button:focus-visible, summary:focus-visible{
      outline: 3px solid color-mix(in oklab, var(--accent) 50%, transparent);
      outline-offset: 2px;
      border-radius: 6px;
    }
    .skip-link{
      position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
    }
    .skip-link:focus{ position:static; width:auto; height:auto; padding:.5rem .75rem; background:var(--card); border:1px solid var(--border); border-radius:8px; }

    .wrap{ max-width:var(--maxw); margin:0 auto; padding:24px 20px 56px; }
    .topbar{ margin-bottom:8px; }
    .back{
      display:inline-flex; align-items:center; gap:.5rem; font-weight:500; color:var(--muted);
    }
    .back .chev{ display:inline-block; transform: translateY(-1px); }
    header h1{ font-size: clamp(28px, 3.2vw, 34px); line-height:1.25; margin:8px 0 8px; }
    header p.sub{ color:var(--muted); margin:0 0 8px; }

    section{ margin: 28px 0 0; }
    h2{ font-size: clamp(20px, 2.4vw, 22px); margin: 0 0 10px; }
    h3{ font-size: 18px; margin: 0 0 8px; }

    .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius: var(--radius);
      padding:16px 16px;
      box-shadow: var(--shadow);
    }
    .card.grid-2{
      display:grid; gap:12px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 768px){
      .card.grid-2{ grid-template-columns: 1fr 1fr; }
    }
    .caption{ color:var(--muted); font-size: 14px; margin-top: 4px; }

    .warn{
      border-left: 4px solid var(--warn);
      padding-left: 12px;
      background: color-mix(in oklab, var(--warn) 8%, var(--card));
    }

    .chips{
      display:grid; gap:12px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 900px){
      .chips{ grid-template-columns: repeat(3, 1fr); }
    }
    .chip{ border:1px solid var(--border); border-radius: 10px; padding:12px; background:var(--card); }

    details{
      border:1px solid var(--border);
      border-radius: var(--radius);
      background:var(--card);
      padding: 6px 10px;
    }
    details + details{ margin-top: 8px; }
    details[open]{ box-shadow: var(--shadow); }
    summary{
      list-style: none;
      cursor:pointer;
      display:flex; align-items:center; justify-content:space-between;
      gap: 12px; padding: 6px; font-weight:600;
    }
    /* Hide default marker and add chevron */
    summary::-webkit-details-marker{ display:none; }
    summary::after{
      content:"›";
      font-size: 20px;
      line-height:1;
      transform: rotate(90deg);
      color: var(--muted);
      transition: transform .2s ease;
    }
    details[open] summary::after{ transform: rotate(-90deg); }
    .accordion-body{ padding: 0 6px 10px 6px; color: var(--fg); }
    .faq .accordion-body{ padding-top: 0; }

    ul{ margin: 8px 0 0 1.2rem; }
    li + li{ margin-top: 4px; }

    .credits{
      display:flex; flex-wrap: wrap; gap: 6px 12px;
      word-break: break-word; overflow-wrap: anywhere;
    }

    .cta{
      margin-top: 24px;
      display:flex; align-items:center; gap:12px; flex-wrap: wrap;
    }
    .btn{
      display:inline-block; padding:12px 16px;
      background: var(--accent); color: var(--accent-ink);
      border-radius: 10px; font-weight:600;
      border: 1px solid color-mix(in oklab, var(--accent) 70%, black);
      text-decoration: none;
    }
    .btn:hover{ text-decoration: none; filter: brightness(1.05); }
    .btn:active{ transform: translateY(1px); }

    footer{
      margin-top: 32px; color: var(--muted); font-size: 14px;
      border-top: 1px solid var(--border); padding-top: 16px;
    }

/* ===== Feedback (feedback.html) ===== */
/* paste the WHOLE <style> from feedback.html here, unchanged */

    :root{--fg:#0f172a;--muted:#475569;--border:#e2e8f0;--card:#f8fafc;--accent:#2563eb;--maxw:720px}
    @media (prefers-color-scheme: dark){
      :root{--fg:#e6ebf5;--muted:#9aa6be;--border:#1f2937;--card:#0f172a;--accent:#3b82f6}
      body{background:#0b1220}
    }
    body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--fg)}
    a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
    .wrap{max-width:var(--maxw);margin:0 auto;padding:24px 18px 48px}
    .back{display:inline-flex;gap:.5rem;color:var(--muted)}
    h1{margin:10px 0 8px;font-size:clamp(26px,3vw,32px)}
    p.sub{color:var(--muted);margin:0 0 12px}
    .card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}
    label{display:block;font-weight:600;margin:12px 0 6px}
    select,input,textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px;background:transparent;color:inherit}
    textarea{min-height:140px;resize:vertical}
    .row{display:grid;gap:12px}
    @media(min-width:640px){.row-2{grid-template-columns:1fr 1fr}}
    .hint{font-size:14px;color:var(--muted)}
    .actions{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}
    .btn{display:inline-block;padding:12px 16px;background:var(--accent);color:#fff;border-radius:10px;border:1px solid #1d4ed8;text-decoration:none}
    .btn.secondary{background:transparent;color:var(--accent);border-color:var(--border)}
    .consent{display:flex;gap:10px;align-items:flex-start;margin-top:8px}

/* ===== Thanks (thanks.html) ===== */
/* paste the WHOLE <style> from thanks.html here, unchanged */

    body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
    .wrap{max-width:720px;margin:0 auto;padding:24px 18px}
    a{color:#2563eb;text-decoration:none} a:hover{text-decoration:underline}

/* ===== Shared utilities (to replace inline style="" attrs) ===== */
.small-note { font-size: 0.7rem; }
.footer-credit { margin-top: 8px; font-size: 0.9rem; color: #6b7280; }

/* Accessible “screen-reader only” helper */
.sr-only{
  position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important
}

/* === Calculator-only overrides to stop cross-page bleed === */
body.calc-page{
  background:#f8f9fa;
  color: var(--gray-900);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.6;
}
.calc-page .btn{
  padding: var(--spacing-sm) var(--spacing-lg);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
  background: var(--primary-blue);
  color: #fff;
}
.calc-page .btn-secondary{
  background: #fff;
  color: var(--gray-600);
  border: 1px solid var(--gray-300);
}
.calc-page .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.calc-page .nav-buttons{
  background: var(--gray-100);
  border-top: 1px solid var(--gray-200);
}
.calc-page .progress-bar{
  background:#fff;
  border-bottom:1px solid var(--gray-200);
}