/* ============================================================
   JIIVE — HOME SECTIONS (v3 · gold period)
   Everything on Home after the scroll story, in page order. Loaded
   after css/home.css (base, buttons, footer), css/page.css (grid,
   field label, pull quote, ghost pill) and css/pricing.css (tiers,
   ledger rows, ledger-plans), whose rules it reuses so Home and the
   inner pages stay one system. Every value is a token from
   css/tokens.css; see DESIGN.md "Layout" and "Components".
   ============================================================ */

/* ---------- Shared ---------- */
.sec-loose { padding-top: var(--space-section-loose); }
.field-label + .sec-head { margin-top: var(--space-md); }
.sec-intro {
  margin: var(--space-md) 0 0;
  max-width: var(--measure);
  font-size: var(--text-intro);
  line-height: var(--leading-copy);
  color: var(--color-text-secondary);
}

/* the period at rest: a still gold bead (only landed periods beat) */
.period {
  display: inline-block;
  width: var(--size-period-numeral);
  height: var(--size-period-numeral);
  margin-left: 0.045em;
  border-radius: var(--radius-full);
  background: var(--gold-bead);
  box-shadow: var(--shadow-bead);
}

/* report flags: semantic chips, report results only */
.flag {
  display: inline-block;
  padding: var(--space-chip-y) var(--space-chip-x);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-mono-meta);
  letter-spacing: var(--tracking-meta);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  white-space: nowrap;
}
.flag-ok { background: var(--color-flag-ok-bg); color: var(--color-flag-ok-text); }
.flag-watch { background: var(--color-flag-watch-bg); color: var(--color-flag-watch-text); }
.flag-act { background: var(--color-flag-act-bg); color: var(--color-flag-act-text); }

/* ---------- What you get: body diagram (1–5) beside ledger-organ (6–12) ---------- */
.organs-grid { align-items: center; row-gap: var(--space-block); }
.body-col {
  grid-column: 1 / span 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}
.body-wrap { position: relative; width: min(100%, var(--size-body-max)); aspect-ratio: 200 / 440; }
.body-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.body-wrap svg g { fill: url(#figG); stroke: url(#figG); filter: url(#figS); }
.body-wrap .fig-light { stop-color: var(--color-figure-light); }
.body-wrap .fig-shade { stop-color: var(--color-figure-shade); }
.body-wrap feDropShadow { flood-color: var(--color-figure-shadow); }
.organ {
  position: absolute;
  width: var(--size-organ-hit);
  height: var(--size-organ-hit);
  margin: calc(var(--size-organ-hit) / -2) 0 0 calc(var(--size-organ-hit) / -2);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
  z-index: var(--z-stage-copy);
}
.organ:focus-visible { outline-offset: calc(var(--size-focus-offset) * -2); }
.body-hint {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-copy);
  color: var(--color-text-secondary);
  text-align: center;
}
.organs-copy { grid-column: 6 / -1; }

/* the Jiive Age block */
.age {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-xl);
  align-items: end;
  margin-top: var(--space-block);
}
.age-title {
  font-size: var(--text-title);
  line-height: var(--leading-head);
}
.age-copy { margin: var(--space-xs) 0 0; max-width: var(--measure); }
.age-figures {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xxs);
  margin: 0;
  text-align: right;
}
.age-birthday {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  text-decoration-thickness: var(--size-hairline);
}
.age-num {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-optical-sizing: auto;
  font-size: var(--text-stat);
  line-height: var(--leading-head);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-emerald-ink);
}
.age-label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ledger-organ: ID · system · what's measured (with its flag) · score */
.ledger-organ { margin-top: var(--space-block); }
.lo-head, .lo-btn {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 3.6fr) minmax(0, 1fr);
  column-gap: var(--grid-gutter);
  padding-inline: var(--space-sm);
}
.lo-head {
  padding-block: var(--space-md);
  border-top: var(--size-hairline) solid var(--color-emerald-ink);
  border-bottom: var(--size-hairline) solid var(--color-border);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-field-label);
  letter-spacing: var(--tracking-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
/* tick marks hang from the top rule at each column start */
.lo-head span {
  padding-top: var(--space-md);
  margin-top: calc(-1 * var(--space-md));
  background: linear-gradient(var(--color-emerald-ink), var(--color-emerald-ink)) no-repeat 0 0 / var(--size-hairline) var(--size-ledger-tick);
}
.lo-head span:last-child { text-align: right; background-position: 100% 0; }
.lo-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--size-hairline) solid var(--color-emerald-ink);
}
.lo-row + .lo-row { border-top: var(--size-hairline) solid var(--color-border); }
.lo-btn {
  width: 100%;
  align-items: baseline;
  padding-block: var(--space-md);
  border: 0;
  border-radius: var(--radius-input);
  background-color: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-200) var(--ease-out);
}
.lo-btn[aria-pressed="true"] { background-color: var(--color-surface); }
/* explicit columns: the shared ledger cells in css/pricing.css carry 8-column spans */
.lo-btn .ledger-id { grid-column: 1; }
.lo-btn .ledger-name { grid-column: 2; }
.lo-note { grid-column: 3; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.lo-btn .ledger-value { grid-column: 4; text-align: right; }
.unit { color: var(--color-text-secondary); }
.flag-line {
  margin: var(--space-lg) 0 0;
  font-size: var(--text-caption);
  line-height: var(--leading-copy);
  color: var(--color-text-secondary);
}
.flag-line .flag { margin: var(--space-xxs) var(--space-xxs) var(--space-xxs) 0; }

/* ---------- Meet Lumi: copy (1–5) beside the 9:16 frame (7–11) ---------- */
.lumi-grid { align-items: center; row-gap: var(--space-block); }
.lumi-copy { grid-column: 1 / span 5; }
.lumi-sub {
  margin: var(--space-md) 0 0;
  max-width: var(--measure);
  font-size: var(--text-lead);
  line-height: var(--leading-copy);
}
.lumi-copy .pull { margin: var(--space-xl) 0; }
.lumi-note { margin: var(--space-md) 0 0; color: var(--color-text-secondary); }
.nowrap { white-space: nowrap; }
.media-frame {
  grid-column: 7 / span 5;
  justify-self: center;
  display: flex;
  flex-direction: column;
  width: min(100%, var(--size-frame-max));
  aspect-ratio: 9 / 16;
  margin: 0;
  border-radius: var(--radius-frame);
  background: var(--color-emerald-ink);
  box-shadow: var(--shadow-frame);
  overflow: hidden;
}

/* chat parts, shared by the Lumi frame and the report specimen */
.chat-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-emerald-ink);
  color: var(--color-ink-contrast);
}
.chat-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--size-chat-avatar);
  height: var(--size-chat-avatar);
  border-radius: var(--radius-full);
  background: var(--color-band-glow);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-optical-sizing: auto;
  font-size: var(--text-card-title);
  line-height: 1;
  color: var(--color-ink-contrast);
}
.chat-who { display: flex; flex-direction: column; min-width: 0; }
.chat-name { font-weight: var(--weight-strong); font-size: var(--text-caption); line-height: var(--leading-snug); }
.chat-status { font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--color-on-dark-muted); }
.chat-sample { margin-left: auto; color: var(--color-on-dark-muted); }
.chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  background: var(--color-bg);
}
.chat-day {
  align-self: center;
  padding: var(--space-chip-y) var(--space-chip-x);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}
.bubble {
  max-width: 85%;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border: var(--size-hairline) solid var(--color-border);
  border-radius: var(--radius-bubble);
  background: var(--color-surface);
  box-shadow: var(--shadow-bubble);
  font-size: var(--text-caption);
  line-height: var(--leading-copy);
  color: var(--color-emerald-deep);
}
.bubble-in { align-self: flex-start; border-bottom-left-radius: var(--radius-tail); }
.bubble-out { align-self: flex-end; border-bottom-right-radius: var(--radius-tail); }
.bubble-meta { display: block; margin-top: var(--space-xxs); color: var(--color-text-secondary); }

/* ---------- Trust line: one ruled band of reassurances ---------- */
.trust-line {
  padding: var(--space-lg) 0;
  border-top: var(--size-hairline) solid var(--color-border);
  border-bottom: var(--size-hairline) solid var(--color-border);
}
.trust-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-items li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-xs);
  row-gap: var(--space-xxs);
  align-items: baseline;
  align-content: start;
}
.trust-items svg {
  align-self: center;
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  color: var(--color-vital-green);
}
.trust-title { color: var(--color-emerald-ink); }
.trust-text {
  grid-column: 2;
  font-size: var(--text-caption);
  line-height: var(--leading-copy);
  color: var(--color-text-secondary);
}
.trust-cover {
  margin: var(--space-lg) 0 0;
  max-width: var(--measure);
  font-size: var(--text-caption);
  line-height: var(--leading-copy);
  color: var(--color-text-secondary);
}

/* ---------- How it works: a numbered timeline on one rule ---------- */
.steps-head { max-width: calc(100% * 9 / 12); }
.timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  margin: var(--space-block) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--size-hairline) solid var(--color-emerald-ink);
}
.tl-step {
  position: relative;
  padding: var(--space-lg) var(--space-xl) 0 0;
}
/* each step hangs from the rule on a tick, like a ledger column */
.tl-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size-hairline);
  height: var(--size-ledger-tick);
  background: var(--color-emerald-ink);
}
.tl-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-field-label);
  letter-spacing: var(--tracking-label);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-vital-green);
}
.tl-title {
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-size: var(--text-card-title);
  line-height: var(--leading-snug);
  letter-spacing: normal;
}
.tl-line { margin: var(--space-xs) 0 0; max-width: var(--measure); color: var(--color-text-secondary); }
.steps-cta { margin-top: var(--space-block); }

/* ---------- Why Jiive: head (1–5) beside ledger-compare (6–12), ledger-facts under ---------- */
.why-grid { align-items: start; row-gap: var(--space-block); }
.why-head { grid-column: 1 / span 5; }
/* the compare ledger reuses ledger-plans (css/pricing.css); here it sits on 6–12 */
.ledger-compare { grid-column: 6 / -1; margin-top: 0; }
/* ledger-facts: the figure on 1–3, the claim and its source on 4–11 */
.ledger-facts {
  margin: var(--space-block) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--size-hairline) solid var(--color-emerald-ink);
  border-bottom: var(--size-hairline) solid var(--color-emerald-ink);
}
.fact {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: baseline;
  padding: var(--space-lg) 0;
}
.fact + .fact { border-top: var(--size-hairline) solid var(--color-border); }
.fact-value {
  grid-column: 1 / span 3;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-optical-sizing: auto;
  font-size: var(--text-stat);
  line-height: var(--leading-head);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-emerald-ink);
  white-space: nowrap;
}
.fact-body { grid-column: 4 / span 8; }
.fact-claim { margin: 0; max-width: var(--measure); }
.fact-cite { margin: var(--space-xs) 0 0; color: var(--color-text-secondary); }

/* ---------- Sample report: specimen (1–5) beside numbered annotations (7–12) ---------- */
.report-head { max-width: calc(100% * 9 / 12); }
.report-grid { margin-top: var(--space-block); align-items: start; row-gap: var(--space-block); }
.specimen {
  grid-column: 1 / span 5;
  margin: 0;
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.spec-body { gap: var(--space-md); padding: var(--space-lg); }
/* each message leaves a gutter on its right for the numbered markers */
.spec-msg { position: relative; padding-right: calc(var(--size-spec-mark) + var(--space-sm)); }
.spec-msg .bubble { max-width: none; }
.bubble-title {
  display: block;
  margin-bottom: var(--space-xxs);
  font-weight: var(--weight-strong);
  color: var(--color-emerald-ink);
}
.spec-mark {
  position: absolute;
  right: 0;
  top: var(--space-sm);
  display: grid;
  place-items: center;
  width: var(--size-spec-mark);
  height: var(--size-spec-mark);
  border: var(--size-hairline) solid var(--color-vital-green);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-mono-meta);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-vital-green);
}
.spec-mark-organs { top: auto; bottom: var(--space-sm); }
.spec-age {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0;
  padding-bottom: var(--space-sm);
  border-bottom: var(--size-hairline) solid var(--color-emerald-ink);
}
.spec-age-label { color: var(--color-text-secondary); }
.spec-age-num {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-optical-sizing: auto;
  font-size: var(--text-stat);
  line-height: var(--leading-head);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-emerald-ink);
}
.spec-age-num .unit { font-family: var(--font-body); font-size: var(--text-caption); letter-spacing: normal; }
.spec-rows { margin: 0; padding: 0; list-style: none; }
.spec-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-sm);
  row-gap: var(--space-xxs);
  align-items: baseline;
  padding: var(--space-xs) 0;
}
.spec-rows li + li { border-top: var(--size-hairline) solid var(--color-border); }
.spec-name { font-weight: var(--weight-medium); color: var(--color-emerald-ink); }
.spec-score {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-mono-meta);
  letter-spacing: var(--tracking-meta);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-emerald-ink);
}
.spec-rows .flag { grid-column: 1 / -1; justify-self: start; }

.spec-notes { grid-column: 7 / -1; }
.notes { margin: 0; padding: 0; list-style: none; border-bottom: var(--size-hairline) solid var(--color-emerald-ink); }
.note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
  column-gap: var(--grid-gutter);
  padding: var(--space-lg) 0;
}
.note + .note { border-top: var(--size-hairline) solid var(--color-border); }
.note-num {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-optical-sizing: auto;
  font-size: var(--text-stat);
  line-height: var(--leading-head);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-vital-green);
}
.note-label { margin: 0; color: var(--color-text-secondary); }
.note-title {
  margin-top: var(--space-xs);
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-size: var(--text-card-title);
  line-height: var(--leading-snug);
  letter-spacing: normal;
}
.note-line { margin: var(--space-xs) 0 0; max-width: var(--measure); color: var(--color-text-secondary); }
.note-line .flag { margin: var(--space-xxs) var(--space-xxs) 0 0; }
.spec-notes .btn { margin-top: var(--space-block); }

/* ---------- Pricing: the tiers, visuals and row alignment come from css/pricing.css ---------- */

/* ---------- FAQ split: serif head (1–4) beside the accordion (5–12) ---------- */
.faq-grid { align-items: start; row-gap: var(--space-block); }
.faq-head { grid-column: 1 / span 4; }
.faq-list {
  grid-column: 5 / -1;
  border-top: var(--size-hairline) solid var(--color-emerald-ink);
  border-bottom: var(--size-hairline) solid var(--color-emerald-ink);
}
.faq-item + .faq-item { border-top: var(--size-hairline) solid var(--color-border); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--size-tap);
  padding: var(--space-md) 0;
  list-style: none;
  font-weight: var(--weight-strong);
  font-size: var(--text-card-title);
  line-height: var(--leading-snug);
  color: var(--color-emerald-ink);
  overflow-wrap: anywhere;   /* a long place name never pushes the plus off a 320px row */
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color var(--dur-120) var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg {
  flex: none;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  color: var(--color-vital-green);
  transition: transform var(--dur-200) var(--ease-out);
}
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-item p {
  margin: 0;
  padding: 0 var(--space-xl) var(--space-lg) 0;
  max-width: var(--measure);
  overflow-wrap: anywhere;
  transition: opacity var(--dur-320) var(--ease-out), transform var(--dur-320) var(--ease-out);
}
/* an opened answer settles in; closing is instant */
@starting-style {
  .faq-item[open] p { opacity: 0; transform: translateY(var(--motion-swap)); }
}

/* ---------- Hover (fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .lo-btn:hover { background-color: var(--color-surface); }
  .faq-item summary:hover { color: var(--color-vital-green); }
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  /* splits collapse to one column; the body stays first so the markers' flight lands in view */
  .body-col, .organs-copy, .lumi-copy, .media-frame { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
  .steps-head, .report-head { max-width: none; }
  .why-head, .ledger-compare, .specimen, .spec-notes, .faq-head, .faq-list { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  /* the timeline turns vertical, its rule running down the left */
  .timeline {
    grid-template-columns: 1fr;
    row-gap: var(--space-xl);
    padding-left: var(--space-lg);
    border-top: 0;
    border-left: var(--size-hairline) solid var(--color-emerald-ink);
  }
  .tl-step { padding: 0; }
  .trust-items { grid-template-columns: 1fr; }
  .tl-step::before {
    left: calc(-1 * var(--space-lg));
    top: calc(var(--text-field-label) / 2);
    width: var(--size-ledger-tick);
    height: var(--size-hairline);
  }
}
@media (max-width: 760px) {
  .media-frame { width: min(70vw, var(--size-frame-max)); }
}
@media (max-width: 600px) {
  /* ledger-facts: the figure above its claim */
  .fact { grid-template-columns: 1fr; row-gap: var(--space-xs); }
  .fact-value, .fact-body { grid-column: 1; }
  /* ledger-organ: ID and name on one line with the score right-aligned, the note below, the flag below that */
  .lo-head { display: none; }
  .lo-rows { border-top: var(--size-hairline) solid var(--color-emerald-ink); }
  .lo-btn {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: var(--space-xxs);
  }
  .lo-btn .ledger-id { grid-column: 1; grid-row: 1; }
  .lo-btn .ledger-name { grid-column: 2; grid-row: 1; }
  .lo-btn .ledger-value { grid-column: 3; grid-row: 1; }
  .lo-note { grid-column: 2 / -1; grid-row: 2; }
  .age { grid-template-columns: 1fr; row-gap: var(--space-lg); }
  .age-figures { align-items: flex-start; text-align: left; }
}
@media (max-width: 380px) {
  /* the specimen gives its bubbles the room the longest flag chip ("Discuss with a doctor") needs */
  .spec-body { padding: var(--space-md) var(--space-sm); }
  .spec-msg .bubble { padding-inline: var(--space-sm); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lo-btn, .faq-item summary, .faq-item summary svg { transition: none; }
  /* an opened answer still fades in, with no movement */
  .faq-item p { transition: opacity var(--dur-320) var(--ease-out); }
  @starting-style {
    .faq-item[open] p { transform: none; }
  }
}