/* ==========================================================================
   Longevity Coach IQ -- homepage additions
   --------------------------------------------------------------------------
   Scoped under .hmx. Defines no tokens, no fonts and no colors of its own.
   Every value resolves to base.css.

   Loaded after home.css, so it only ever adds. Nothing here overrides an
   existing component. The homepage still does almost all of its work with
   .section, .step-rows, .feat-grid, .encyc-showcase, .honesty, .faq-item
   and the rest of home.css.

   Only four things are new, and each exists because nothing in the system
   already did the job:
     .hmx-jobs    the four jobs of longevity coaching, a numbered sequence
     .hmx-vs      the options comparison table. .compare-table would have
                  been right, but it lives in doc.css and encyc.css and the
                  homepage loads neither. Duplicating one table is cheaper
                  than pulling 24KB of document styles onto the landing page.
     .hmx-split   the two-column tick and cross lists
     .hmx-kicker  the pull line that closes the four jobs
   ========================================================================== */

/* --------------------------------------------------------------------------
   The four jobs. A numbered sequence, not a card grid, because the order is
   the argument: a tracker stops after one, a clinic panel after two.
   -------------------------------------------------------------------------- */
.hmx-jobs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
}
.hmx-job {
  padding: 26px 28px 30px 0;
  border-right: 1px solid var(--border);
}
.hmx-job:last-child { border-right: 0; padding-right: 0; }
.hmx-job + .hmx-job { padding-left: 28px; }

.hmx-job-n {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emerald-deep);
  margin-bottom: 14px;
}
.hmx-job h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.hmx-job p { font-size: 15.5px; line-height: 1.6; color: var(--slate); }

@media (max-width: 980px) {
  .hmx-jobs { grid-template-columns: 1fr 1fr; }
  .hmx-job { padding-inline: 0 28px; border-bottom: 1px solid var(--border); }
  .hmx-job + .hmx-job { padding-left: 0; }
  .hmx-job:nth-child(even) { padding-left: 28px; padding-right: 0; border-right: 0; }
  .hmx-job:nth-child(odd) { border-right: 1px solid var(--border); }
}
@media (max-width: 620px) {
  .hmx-jobs { grid-template-columns: 1fr; }
  .hmx-job,
  .hmx-job:nth-child(even),
  .hmx-job:nth-child(odd) { padding-inline: 0; border-right: 0; }
}

.hmx-kicker {
  max-width: 620px;
  margin: 48px auto 0;
  text-align: center;
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.hmx-kicker em { font-style: normal; color: var(--emerald-deep); }

/* --------------------------------------------------------------------------
   Options comparison. Scrolls rather than widening the page below 900px,
   per the table rule in the style guide.
   -------------------------------------------------------------------------- */
.hmx-vs-wrap { max-width: 1080px; margin: 0 auto; }

.hmx-vs {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper-panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  font-size: 15px;
}
.hmx-vs caption {
  caption-side: top;
  text-align: left;
  font-size: 13px;
  color: var(--slate-light);
  padding-bottom: 12px;
}
.hmx-vs th,
.hmx-vs td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.hmx-vs thead th {
  background: var(--paper-alt);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.hmx-vs thead th span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--slate-light);
  margin-top: 5px;
}
.hmx-vs tbody th {
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
}
.hmx-vs tbody td { color: var(--slate); }
.hmx-vs tbody tr:last-child th,
.hmx-vs tbody tr:last-child td { border-bottom: 0; }

/* The column that is us. */
.hmx-vs .hmx-col { background: var(--emerald-tint); color: var(--ink); }
.hmx-vs thead .hmx-col { background: var(--emerald-glow); color: var(--emerald-deep); }

@media (max-width: 900px) {
  .hmx-vs { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hmx-vs thead,
  .hmx-vs tbody { display: table; width: 100%; min-width: 780px; }
  .hmx-vs caption { display: block; min-width: 0; }
}

/* --------------------------------------------------------------------------
   Two-column tick and cross lists.
   -------------------------------------------------------------------------- */
.hmx-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 760px) { .hmx-split { grid-template-columns: 1fr; gap: 36px; } }

.hmx-split h3 {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--ink);
}
.hmx-split-no h3 { border-bottom-color: var(--border); color: var(--slate); }

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

/* The summary under the options table. .depth-note is shared with /app/, where
   it sits in a 780px text column, so the width and spacing are set here rather
   than on the base class. Matches .hmx-vs-wrap so the paragraph lines up with
   the table above it. */
.hmx .hmx-vs-note {
  max-width: 1080px;
  margin: 32px auto 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--slate);
}

/* --------------------------------------------------------------------------
   Risk comparison, ported from the /app/ page's .apx-compare pattern. The
   homepage does not load app.css, so the rules are duplicated here under
   .hmx- names rather than pulling in 25KB for one block. Amber is the site's
   "needs attention" colour, so a flagged risk reads the same as it does
   everywhere else.
   -------------------------------------------------------------------------- */
.hmx-compare { display: grid; gap: 16px; }
.hmx-compare-card {
  background: var(--paper-panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}
.hmx-compare-card.hmx-is-vague { background: #FDF8F1; border-color: #EFDCC2; }
.hmx-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: 22px;
}
.hmx-is-vague .hmx-compare-tag { color: var(--amber); }
.hmx-compare-verdict {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 22px 0 10px;
}
.hmx-compare-card p { font-size: 14.5px; line-height: 1.6; color: var(--slate); margin: 0; }

/* The wide reference band, drawn deliberately vague next to the rule. */
.hmx-band { position: relative; height: 22px; border-bottom: 1px solid #EFDCC2; margin-bottom: 7px; }
.hmx-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);
}
.hmx-band-scale {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--slate-light);
}
.hmx-band .hmx-pin { background: var(--amber); }
.hmx-band .hmx-pin::after { background: var(--amber); box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.14); }

/* The calibrated rule: a position rather than a verdict. */
.hmx-rule-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 7px; }
.hmx-rule-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.hmx-rule-val {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 700; color: var(--amber);
}
.hmx-track { position: relative; height: 22px; border-bottom: 1px solid var(--border); }
.hmx-track::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background-image: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px 10%);
}
.hmx-fill { position: absolute; left: 0; bottom: 1px; height: 3px; border-radius: 2px; background: var(--amber); }
.hmx-pin { position: absolute; bottom: -4px; width: 2px; height: 16px; background: var(--amber); transform: translateX(-1px); }
.hmx-pin::after {
  content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 999px; background: var(--amber);
  box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.14);
}

/* The single-marker card: one reading, comfortably inside a wide band. */
.hmx-val-ok { color: var(--emerald-deep) !important; }
.hmx-rule-single .hmx-band { margin-top: 4px; }

/* The stacked markers. Four compact rows so the count itself carries the
   argument: one number against four read together. */
.hmx-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.hmx-mini { display: grid; grid-template-columns: 104px 1fr 26px; align-items: center; gap: 12px; }
.hmx-mini-name { font-size: 13px; color: var(--slate); }
.hmx-mini-track { position: relative; height: 6px; border-radius: 3px; background: var(--paper-alt); }
.hmx-mini-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--amber); opacity: .75; }
.hmx-mini-val {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 12.5px; color: var(--slate-light); text-align: right;
}

/* The roll-up line: where four markers become one named risk. */
.hmx-rollup {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.hmx-rollup-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.hmx-rollup-val {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber);
}
@media (max-width: 420px) { .hmx-mini { grid-template-columns: 88px 1fr 24px; gap: 9px; } }

/* The four-jobs block now sits on a dark surface. Its heading, rules and body
   copy default to the light-surface tokens, so they need the dark variants or
   the titles render ink-on-ink. */
.dark-surface .hmx-jobs { border-top-color: var(--dark-panel-border); }
.dark-surface .hmx-job { border-right-color: var(--dark-panel-border); border-bottom-color: var(--dark-panel-border); }
.dark-surface .hmx-job:nth-child(odd) { border-right-color: var(--dark-panel-border); }
.dark-surface .hmx-job h3 { color: var(--dark-ink); }
.dark-surface .hmx-job p { color: var(--dark-slate); }
.dark-surface .hmx-job-n { color: var(--emerald-bright); }