/* Private pilot cost & timeline page. Scoped to .pp-page so it cannot leak
   into the rest of the site (bootstrap + flycarolina.css own everything else). */
.pp-page {
  --panel: #fbfbfa;
  --ink: #14202c;
  --ink-2: #4a5663;
  --ink-3: #86909a;
  --rule: #d7dcdf;
  --rule-soft: #e8ecee;
  --sky: #2a6ea8;
  --sky-soft: #e2edf6;
  --sky-ink: #1c5484;
  --amber: #b8791a;
  --amber-bg: #fff6e4;

  max-width: 820px;
  margin: 0 auto;
  padding: 10px 0 40px;
  color: var(--ink);
  font-family: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}
.pp-page * { box-sizing: border-box; }

.pp-page h1, .pp-page h2, .pp-page h3 { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; text-wrap: balance; margin: 0; line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); }
.pp-page h1 { font-size: 52px; font-weight: 800; }
.pp-page h2 { font-size: 30px; font-weight: 700; margin: 56px 0 10px; }
.pp-page h3 { font-size: 19px; font-weight: 700; margin: 0 0 4px; }
.pp-page p { max-width: 64ch; margin: 0 0 12px; }
.pp-page .eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.pp-page .lede { font-size: 21px; color: var(--ink-2); margin-top: 16px; max-width: 58ch; }

.pp-page .answers { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 30px; }
.pp-page .answer { background: var(--panel); border: 1px solid var(--rule); padding: 18px 20px 16px; }
.pp-page .answer b { display: block; font-family: "Archivo", sans-serif; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.pp-page .answer b small { font-size: 17px; font-weight: 600; color: var(--ink-3); margin-left: 3px; letter-spacing: 0; }
.pp-page .answer span { display: block; color: var(--ink-2); font-size: 15px; margin-top: 8px; line-height: 1.35; }

.pp-page .steps { counter-reset: step; display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--rule); }
.pp-page .step { display: grid; grid-template-columns: 52px 1fr 150px; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.pp-page .step::before { counter-increment: step; content: counter(step); font-family: "Archivo", sans-serif; font-size: 30px; font-weight: 800; color: var(--sky); line-height: 1; }
.pp-page .step p { font-size: 16px; color: var(--ink-2); margin: 0; }
.pp-page .step .when { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; color: var(--ink-3); text-align: right; line-height: 1.4; }
.pp-page .step .when b { display: block; color: var(--ink); font-weight: 500; font-size: 15px; }

.pp-page .thesis { background: var(--sky-soft); border-left: 4px solid var(--sky); padding: 16px 20px; margin: 22px 0 20px; }
.pp-page .thesis p { color: var(--sky-ink); font-size: 19px; font-weight: 600; margin: 0; max-width: none; }

.pp-page .chart { background: var(--panel); border: 1px solid var(--rule); padding: 16px 18px 10px; overflow-x: auto; position: relative; }
.pp-page .chart svg { display: block; width: 100%; height: auto; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; }
.pp-page .chart text { fill: var(--ink-2); }
.pp-page .chart .lab { fill: var(--ink); font-family: "Source Sans 3", sans-serif; font-size: 15px; font-weight: 600; }
.pp-page .chart .sub { fill: var(--ink-3); font-family: "Source Sans 3", sans-serif; font-size: 13px; }
.pp-page .chart .grid { stroke: var(--rule-soft); }
.pp-page .chart .val { fill: var(--ink); font-weight: 500; }
.pp-page .tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; font-size: 13px; padding: 6px 9px; border-radius: 3px; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); display: none; }
.pp-page .tip.on { display: block; }

.pp-page table { border-collapse: collapse; width: 100%; font-size: 16px; background: var(--panel); border: 1px solid var(--rule); }
.pp-page th, .pp-page td { padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); text-align: left; vertical-align: top; }
.pp-page th { font-family: "Archivo", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.pp-page td.n, .pp-page th.n { text-align: right; font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-page td small { display: block; color: var(--ink-3); font-size: 14px; }
.pp-page tr.total td { border-top: 2px solid var(--ink); font-weight: 600; font-size: 17px; }
.pp-page tr.sub td { color: var(--ink-2); }
.pp-page .tablewrap { overflow-x: auto; }

.pp-page .hours { display: grid; gap: 10px; margin-top: 16px; }
.pp-page .hrow { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: center; font-size: 16px; }
.pp-page .hrow .bar { height: 26px; background: var(--rule-soft); position: relative; }
.pp-page .hrow .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sky); }
.pp-page .hrow .bar.muted i { background: var(--ink-3); }
.pp-page .hrow .bar b { position: absolute; top: 0; white-space: nowrap; line-height: 26px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 13px; color: var(--ink); }
.pp-page .hrow span { color: var(--ink-2); }

.pp-page .fine { font-size: 15px; color: var(--ink-3); }
.pp-page .fine li { margin-bottom: 6px; }
.pp-page ul { padding-left: 20px; max-width: 70ch; }
.pp-page .track { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-top: 20px; }
.pp-page .track h3 { color: var(--sky-ink); }
.pp-page .track p { font-size: 16px; color: var(--ink-2); margin: 0; }
.pp-page .note { background: var(--amber-bg); border-left: 3px solid var(--amber); padding: 10px 14px; font-size: 15px; color: var(--ink-2); max-width: none; margin-top: 20px; }
.pp-page .note b { color: var(--amber); }

.pp-page .cta { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--rule); }

@media (max-width: 700px) {
  .pp-page .answers { grid-template-columns: 1fr; }
  .pp-page .track { grid-template-columns: 1fr; }
  .pp-page h1 { font-size: 38px; }
  .pp-page .step { grid-template-columns: 40px 1fr; }
  .pp-page .step .when { grid-column: 2; text-align: left; }
  .pp-page .step .when b { display: inline; margin-right: 8px; }
  .pp-page .hrow { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
  .pp-page .hrow .bar i { transition: width .5s ease; }
}