/* Pilot Payback Calculator — OptimAI Solutions */

/* ===== Fonts (self-hosted, variable) ===== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/dmsans-latin.woff2') format('woff2');
}

/* ===== Tokens ===== */
:root {
  --navy: #0F1B3D;
  --navy-light: #1A2D5A;
  --teal: #0EA5A0;        /* graphics, markers, accents on navy */
  --teal-deep: #0B7A76;   /* teal for text and button fills, passes AA on white */
  --teal-deeper: #0A6B67; /* hover state for teal-deep */
  --royal: #2563EB;
  --amber: #F5A623;
  --white: #FFFFFF;
  --charcoal: #1E293B;

  --bg-light: #F4F6FA;
  --border: #D6DDEA;
  --muted: #55627A; /* AA on white and on --bg-light */

  --font-head: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale, 1.25 ratio */
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.563rem;
  --fs-xl: 1.953rem;
  --fs-2xl: 2.441rem;
  --fs-3xl: 3.052rem;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --radius: 8px;
  --maxw: 62rem;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--white);
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; color: var(--navy); }
h1 { font-size: clamp(var(--fs-xl), 5vw, var(--fs-3xl)); font-weight: 800; }
h2 { font-size: clamp(var(--fs-lg), 3.5vw, var(--fs-2xl)); }
h3 { font-size: var(--fs-md); }

a { color: var(--royal); }
img { max-width: 100%; height: auto; }

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-2); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.75rem 1.75rem;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-base);
  border: none; border-radius: var(--radius); cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--teal-deep); color: var(--white); }
.btn-primary:hover { background: var(--teal-deeper); }
.btn-secondary { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-secondary:hover { background: var(--navy); color: var(--white); }
.btn-ghost { background: transparent; color: var(--royal); border: 2px solid var(--royal); }
.btn-ghost:hover { background: var(--royal); color: var(--white); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Hero ===== */
.hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 100%);
  color: var(--white);
  padding: var(--space-2) 0 var(--space-5);
}
.hero .logo-bar { display: flex; align-items: center; padding: var(--space-2) 0; }
.hero .logo-bar img { height: clamp(96px, 14vw, 140px); width: auto; }
.hero h1 { color: var(--white); margin: var(--space-4) 0 var(--space-2); max-width: 40rem; }
.hero .subhead { font-size: var(--fs-md); max-width: 38rem; color: #E7ECF6; }
.hero .cred {
  margin-top: var(--space-3); font-size: var(--fs-sm); color: #B9C4DC;
  max-width: 38rem; line-height: 1.7;
}
.hero .cta-row { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.hero .time-promise { font-size: var(--fs-sm); color: #B9C4DC; }

@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .subhead, .hero .cred, .hero .cta-row {
    opacity: 0; transform: translateY(12px);
    animation: hero-in 0.5s ease-out forwards;
  }
  .hero .subhead { animation-delay: 0.12s; }
  .hero .cred { animation-delay: 0.24s; }
  .hero .cta-row { animation-delay: 0.36s; }
}
@keyframes hero-in { to { opacity: 1; transform: none; } }

/* ===== Progress bar ===== */
.progress {
  position: sticky; top: 0; z-index: 20;
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: var(--space-1) 0;
}
.progress ol { display: flex; list-style: none; gap: 0.25rem; }
.progress li {
  flex: 1; text-align: center; font-size: var(--fs-sm);
  padding: 0.5rem 0.25rem; border-bottom: 4px solid var(--border);
  color: var(--muted); font-weight: 500;
}
.progress li[aria-current="step"] { border-color: var(--teal); color: var(--navy); font-weight: 700; }
.progress li.done { border-color: var(--navy-light); color: var(--navy); }

/* ===== Form ===== */
.calc-section { padding: var(--space-4) 0 var(--space-5); background: var(--bg-light); }
.step { display: none; }
.step.active { display: block; }
.step h2 { margin-bottom: var(--space-1); }
.step .step-intro { color: var(--muted); margin-bottom: var(--space-3); max-width: 36rem; }

.field { margin-bottom: var(--space-3); max-width: 26rem; }
.field label { display: block; font-weight: 500; margin-bottom: 0.35rem; color: var(--navy); }
.field .helper { font-size: var(--fs-sm); color: var(--muted); margin-top: 0.35rem; }
.field .correction { font-size: var(--fs-sm); color: #8A5A00; margin-top: 0.35rem; font-weight: 500; }
.field .error { font-size: var(--fs-sm); color: #B42318; margin-top: 0.35rem; font-weight: 500; }
.field input[type="text"],
.field input[type="number"],
.field input[type="email"],
.field input[type="tel"],
.field select {
  width: 100%; min-height: 48px; padding: 0.6rem 0.9rem;
  font-family: var(--font-body); font-size: var(--fs-base); color: var(--charcoal);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--white);
}
.field input:focus, .field select:focus { border-color: var(--royal); }

.slider-field output {
  font-family: var(--font-head); font-weight: 700; color: var(--navy);
  display: inline-block; margin-left: 0.5rem;
}
input[type="range"] {
  width: 100%; height: 44px; accent-color: var(--teal); cursor: pointer;
}

/* Problem cards */
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 768px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .card-grid { grid-template-columns: 1fr 1fr 1fr; } }

.problem-card {
  position: relative; display: block; background: var(--white);
  border: 2px solid var(--border); border-radius: var(--radius);
  padding: var(--space-2); cursor: pointer;
}
.problem-card:hover { border-color: var(--royal); }
.problem-card input { position: absolute; top: var(--space-2); right: var(--space-2); width: 24px; height: 24px; accent-color: var(--teal); }
.problem-card h3 { padding-right: 2.5rem; margin-bottom: 0.4rem; font-size: var(--fs-base); }
.problem-card p { font-size: var(--fs-sm); color: var(--muted); }
.problem-card .range { display: block; margin-top: 0.5rem; font-size: var(--fs-sm); color: var(--teal-deep); font-weight: 500; }
.problem-card:has(input:checked) { border-color: var(--teal); background: #F0FAF9; }
.problem-card:has(input:focus-visible) { outline: 3px solid var(--royal); outline-offset: 2px; }
.cap-note { margin: var(--space-2) 0; font-size: var(--fs-sm); color: var(--muted); }
.cap-note.limit { color: #8A5A00; font-weight: 500; }

.nav-row { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); }

/* ===== Results ===== */
.results { padding: var(--space-5) 0; }
.results h2 { margin-bottom: var(--space-3); }

.verdict { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-md); margin-top: var(--space-2); }
.verdict.good { color: var(--teal-deep); }
.verdict.caution { color: #8A5A00; }
.verdict.stop { color: #B42318; }
.verdict-line { color: var(--muted); max-width: 36rem; }

/* Payback meter */
.meter { margin: var(--space-3) 0 var(--space-4); }
.meter-track {
  position: relative; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, var(--bg-light), var(--border));
  margin: 3.5rem 0 0.5rem;
}
.meter-kill {
  position: absolute; top: -8px; bottom: -8px; width: 3px;
  background: var(--amber); left: 75%; /* 18 of 24 */
}
.meter-kill-label {
  position: absolute; top: -2rem; left: 75%; transform: translateX(-50%);
  font-size: var(--fs-sm); color: #8A5A00; font-weight: 500; white-space: nowrap;
}
.meter-marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal); border: 4px solid var(--white);
  box-shadow: 0 1px 4px rgba(15, 27, 61, 0.35);
}
.meter-marker.amber { background: var(--amber); }
.meter-value {
  position: absolute; top: -3.4rem; transform: translateX(-50%);
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-xl);
  color: var(--navy); white-space: nowrap;
}
.meter-value small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-sm); color: var(--muted); }
.meter-scale { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--muted); }

.free-stats { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-bottom: var(--space-4); }
@media (min-width: 768px) { .free-stats { grid-template-columns: 1fr 1fr; } }
.stat-card { background: var(--bg-light); border-radius: var(--radius); padding: var(--space-3); }
.stat-card .big { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-2xl); color: var(--navy); }
.stat-card .label { color: var(--muted); font-size: var(--fs-sm); }

.chart-box { position: relative; width: 100%; max-width: 40rem; overflow-x: auto; }
.chart-box table { width: 100%; border-collapse: collapse; }
.chart-box th, .chart-box td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.chart-box th { font-family: var(--font-head); color: var(--navy); }

.warn-note {
  border-left: 4px solid var(--amber); background: #FDF6E7;
  padding: var(--space-2); border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--space-2) 0; max-width: 36rem; font-size: var(--fs-sm);
}

/* ===== Gate ===== */
.gate {
  background: var(--navy); color: var(--white);
  border-radius: var(--radius); padding: var(--space-4);
  margin: var(--space-4) 0; max-width: 40rem;
}
.gate h2 { color: var(--white); font-size: var(--fs-lg); }
.gate p { color: #C9D3E8; margin: var(--space-1) 0 var(--space-3); }
.gate ul { color: #C9D3E8; margin: 0 0 var(--space-3) 1.25rem; font-size: var(--fs-sm); }
.gate .field { max-width: 100%; }
.gate .field label { color: var(--white); }
.gate .fine-print { font-size: var(--fs-sm); color: #8FA0C4; margin-top: var(--space-2); }
.gate .field input { border-color: var(--navy-light); }
.gate-grid { display: grid; gap: 0 var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 768px) { .gate-grid { grid-template-columns: 1fr 1fr; } }
.honey { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ===== Full report ===== */
.report { display: none; }
.report.unlocked { display: block; }

.scenario-toggle { display: inline-flex; border: 2px solid var(--navy); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-3); }
.scenario-toggle button {
  min-height: 44px; padding: 0.5rem 1.25rem; border: none; background: var(--white);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
  color: var(--navy); cursor: pointer;
}
.scenario-toggle button[aria-pressed="true"] { background: var(--navy); color: var(--white); }

.table-wrap { overflow-x: auto; margin: var(--space-2) 0 var(--space-4); }
.report table { width: 100%; max-width: 40rem; border-collapse: collapse; }
.report th, .report td { text-align: right; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.report th:first-child, .report td:first-child { text-align: left; }
.report thead th { font-family: var(--font-head); color: var(--navy); border-bottom: 2px solid var(--navy); }
.report td.neg { color: #B42318; }

.kill-block { background: var(--bg-light); border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-2); }
.kill-block h4 { margin-bottom: var(--space-1); }
.kill-block dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; font-size: var(--fs-sm); }
.kill-block dt { font-family: var(--font-head); font-weight: 700; color: var(--navy); white-space: nowrap; }
.kill-block .tool-line { margin-top: var(--space-2); font-size: var(--fs-sm); }
.kill-block .tool-line strong { color: var(--teal-deep); }

.report-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* ===== Proof / next action ===== */
.proof { background: var(--bg-light); padding: var(--space-5) 0; }
.proof-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin: var(--space-3) 0 var(--space-4); }
@media (min-width: 768px) { .proof-grid { grid-template-columns: 1fr 1fr 1fr; } }
.proof-card { background: var(--white); border-radius: var(--radius); padding: var(--space-3); }
.proof-card h3 { font-size: var(--fs-base); margin-bottom: 0.4rem; }
.proof-card p { font-size: var(--fs-sm); color: var(--muted); }

footer { background: var(--navy); color: #8FA0C4; padding: var(--space-3) 0; font-size: var(--fs-sm); }
footer a { color: #C9D3E8; }

/* ===== Print ===== */
@media print {
  .hero .cta-row, .progress, .calc-section, .gate, .proof, footer,
  .report-actions, .scenario-toggle, .no-print { display: none !important; }
  .hero { background: none; color: var(--charcoal); padding: 0; }
  .hero h1 { color: var(--navy); font-size: 20pt; }
  .hero .subhead, .hero .cred, .hero .time-promise { color: var(--charcoal); }
  .report { display: block !important; }
  body { font-size: 10pt; }
  .results, .report { padding: 0; }
  .stat-card, .kill-block { border: 1px solid var(--border); page-break-inside: avoid; }
  a::after { content: ''; }
}