/* ==========================================================================
   Longevity Coach IQ -- /app/ page
   --------------------------------------------------------------------------
   Scoped entirely under .apx so nothing leaks into the nav, footer or any
   other page. Defines no tokens, no fonts and no colors of its own. Every
   value below resolves to base.css.

   This file is a full replacement. The previous assets/app.css was corrupt
   from line 28 onward: an HTML comment and a <link> block had been pasted
   into it, so every rule after .photo-img failed to parse. That is why the
   page rendered unstyled, with overlapping text and full-size images.

   Only six things here are genuinely new. Everything else on the page uses
   existing components from base.css and home.css:
     .apx-hero-grid    two-column hero
     .apx-instrument   the score card in the hero
     .apx-rule         the percentile rule, this page's one signature device
     .apx-compare      the "in range" versus percentile pair
     .apx-split        two-column list blocks (who it is for, price anchor)
     .apx-blocks       the three named training blocks

   No scroll-reveal and no page JS. The rest of the site does not use one,
   and content that starts invisible is a failure mode with no upside.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.apx-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.apx-hero-grid .page-header-inner { max-width: none; }
.apx-hero-grid .page-header-inner p { max-width: 34em; }
@media (max-width: 980px) {
  .apx-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* --------------------------------------------------------------------------
   Instrument: the score card. Dark panel, matches .summary-box treatment.
   -------------------------------------------------------------------------- */
.apx-instrument {
  background: var(--dark-panel);
  border: 1px solid var(--dark-panel-border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-dark-lifted);
}
@media (max-width: 640px) { .apx-instrument { padding: 20px; } }

.apx-inst-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--dark-panel-border);
}
.apx-inst-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark-slate-dim);
  margin-bottom: 10px;
}
.apx-inst-score {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  color: var(--dark-ink);
}
.apx-inst-score span { font-size: 18px; color: var(--dark-slate-dim); }
.apx-inst-rank {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--emerald-bright);
  margin-top: 10px;
}
.apx-inst-badge {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emerald-bright);
  background: rgba(20, 185, 129, 0.1);
  border: 1px solid rgba(20, 185, 129, 0.25);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}
.apx-inst-flag {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--dark-panel-border);
  font-size: 15px;
  line-height: 1.55;
  color: var(--dark-slate);
}
.apx-inst-flag b { color: var(--dark-ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   The percentile rule. A calibrated scale with a pin at your position.
   Used in the hero and again in the comparison, because a range is not a
   verdict and a position on it is. Percentages are set per element with
   an inline width or left value, which is the one case the style guide
   allows inline style for.
   -------------------------------------------------------------------------- */
.apx-rule { margin-bottom: 16px; }
.apx-rule:last-child { margin-bottom: 0; }

.apx-rule-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 7px;
}
.apx-rule-name { font-size: 14.5px; font-weight: 600; color: var(--dark-ink); }
.apx-rule-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
  color: var(--emerald-bright);
}

.apx-track { position: relative; height: 22px; border-bottom: 1px solid var(--dark-track); }
.apx-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background-image: repeating-linear-gradient(to right, var(--dark-track) 0 1px, transparent 1px 10%);
}
.apx-fill {
  position: absolute;
  left: 0;
  bottom: 1px;
  height: 3px;
  border-radius: 2px;
  background: var(--emerald-bright);
}
.apx-pin {
  position: absolute;
  bottom: -4px;
  width: 2px;
  height: 16px;
  background: var(--emerald-bright);
  transform: translateX(-1px);
}
.apx-pin::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--emerald-bright);
  box-shadow: 0 0 0 4px rgba(20, 185, 129, 0.16);
}

/* Below-par marker. Amber is the site's "not worth doing / needs attention"
   color, so a low domain reads the same here as it does everywhere else. */
.apx-rule-low .apx-rule-val { color: #e8973d; }
.apx-rule-low .apx-fill,
.apx-rule-low .apx-pin { background: #e8973d; }
.apx-rule-low .apx-pin::after { background: #e8973d; box-shadow: 0 0 0 4px rgba(232, 151, 61, 0.18); }

/* Light-surface variant, used inside the comparison cards. */
.apx-rule-light .apx-rule-name { color: var(--ink); }
.apx-rule-light .apx-rule-val { color: var(--amber); }
.apx-rule-light .apx-track { border-bottom-color: var(--border); }
.apx-rule-light .apx-track::before {
  background-image: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px 10%);
}
.apx-rule-light .apx-fill,
.apx-rule-light .apx-pin { background: var(--amber); }
.apx-rule-light .apx-pin::after { background: var(--amber); box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.14); }

/* --------------------------------------------------------------------------
   Comparison: what a reference range tells you, next to what a percentile
   tells you.
   -------------------------------------------------------------------------- */
.apx-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 760px) { .apx-compare { grid-template-columns: 1fr; } }

.apx-compare-card {
  background: var(--paper-panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
}
.apx-compare-card.apx-is-vague { background: #FDF8F1; border-color: #EFDCC2; }
.apx-compare-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin-bottom: 24px;
}
.apx-is-vague .apx-compare-tag { color: var(--amber); }
.apx-compare-verdict {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 26px 0 10px;
}
.apx-compare-card p { font-size: 15px; line-height: 1.65; color: var(--slate); }

/* The wide reference band, drawn deliberately vague next to the rule. */
.apx-band { position: relative; height: 22px; border-bottom: 1px solid #EFDCC2; margin-bottom: 7px; }
.apx-band-fill {
  position: absolute;
  left: 12%;
  right: 6%;
  bottom: 1px;
  height: 11px;
  border-radius: 2px;
  background: repeating-linear-gradient(45deg, #F6E6CE 0 5px, #EFDCC2 5px 10px);
}
/* The pin inside the band is not part of a .apx-rule, so it needs the
   amber treatment restating rather than inheriting the emerald default. */
.apx-band .apx-pin { background: var(--amber); }
.apx-band .apx-pin::after {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.14);
}
.apx-band-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--slate-light);
}

/* --------------------------------------------------------------------------
   Two-column list block. Used for who it is for, and for the price anchor.
   -------------------------------------------------------------------------- */
.apx-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 760px) { .apx-split { grid-template-columns: 1fr; gap: 36px; } }

.apx-split h3 {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--ink);
}
.apx-split-no h3 { border-bottom-color: var(--border); color: var(--slate); }
.apx-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.apx-list li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate);
}
.apx-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-weight: 700;
}
.apx-split-yes .apx-list li::before { content: "\2713"; color: var(--emerald); }
.apx-split-no .apx-list li::before { content: "\2715"; color: var(--amber); }

/* --------------------------------------------------------------------------
   Price anchor. Three cards, the third highlighted.
   -------------------------------------------------------------------------- */
.apx-price {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 860px) { .apx-price { grid-template-columns: 1fr; } }

.apx-price-card {
  background: var(--paper-panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
}
.apx-price-card.apx-is-us {
  border-color: var(--emerald);
  background: var(--emerald-tint);
  box-shadow: var(--shadow-panel);
}
.apx-price-amount {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.apx-is-us .apx-price-amount { color: var(--emerald-deep); }
.apx-price-per {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--slate-light);
  margin: 8px 0 16px;
}
.apx-price-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.apx-price-card p { font-size: 15px; line-height: 1.65; color: var(--slate); }

/* --------------------------------------------------------------------------
   The three named training blocks.
   -------------------------------------------------------------------------- */
.apx-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 980px;
  margin: 0 auto 36px;
}
@media (max-width: 860px) { .apx-blocks { grid-template-columns: 1fr; } }

.apx-block {
  background: var(--paper-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--emerald);
  border-radius: 12px;
  padding: 20px 22px;
}
.apx-block-wk {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emerald-deep);
  margin-bottom: 8px;
}
.apx-block h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.apx-block p { font-size: 15px; line-height: 1.6; color: var(--slate); }

/* --------------------------------------------------------------------------
   Lifestyle photograph, used once.
   -------------------------------------------------------------------------- */
.apx-photo {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lifted);
}

/* Hero CTAs align left with the copy on desktop. .hero-ctas centres by
   default because the homepage hero is centred; this hero is two-column. */
.apx-hero-grid .hero-ctas { justify-content: flex-start; }
@media (max-width: 980px) { .apx-hero-grid .hero-ctas { justify-content: center; } }

/* --------------------------------------------------------------------------
   Adaptive training: the same week re-typed around the weakest domain. Taken
   from the table in the best-workout entry, condensed to fit the square visual
   slot the step rows use. Bordered like .compare-table in encyc.css so it
   reads as the same component as every other table on the site.
   -------------------------------------------------------------------------- */
.apx .apx-adapt { display: flex; flex-direction: column; justify-content: center; }
.apx .apx-adapt-cap {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-light);
  margin-bottom: 14px;
}
.apx .apx-adapt-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--paper-panel);
}
.apx .apx-adapt-table th {
  text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: white; background: var(--ink); padding: 11px 12px;
}
.apx .apx-adapt-table td {
  font-size: 12.5px; color: var(--ink);
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  vertical-align: top; white-space: nowrap;
}
.apx .apx-adapt-table tr:last-child td { border-bottom: 0; }
.apx .apx-adapt-table tbody tr:nth-child(even) td { background: var(--paper-alt); }
.apx .apx-adapt-slot { font-family: var(--font-mono); color: var(--slate-light); width: 34px; }
.apx .apx-adapt-base { color: var(--slate); }
.apx .apx-adapt-rest { color: var(--slate-light); }
.apx .apx-adapt-pri {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px; margin-left: 2px;
}
.apx .apx-pri-high { background: var(--emerald-tint); color: var(--emerald-deep); }
.apx .apx-pri-low  { background: var(--paper-alt); color: var(--slate-light); }
.apx .apx-adapt-note { font-size: 12.5px; line-height: 1.5; color: var(--slate); margin: 14px 0 0; }
@media (max-width: 520px) {
  .apx .apx-adapt-table th, .apx .apx-adapt-table td { font-size: 11px; padding: 8px 6px; }
  .apx .apx-adapt-pri { display: none; }
}

/* The step visuals are transparent illustrations, not flat screenshots, so the
   frame reads as a second competing edge. Same override the homepage uses. */
.apx .step-image { box-shadow: none; border: 0; border-radius: 0; max-width: 560px; }