/* Sections 2 (fact strip) and 3 (how it works), plus footer additions.
   Layout follows Sola's framed sections: content inside the 1px frame lines at --pad, a hairline on top of each
   block with 5px dots where it meets the frame, 48px Hedvig serif for big figures and headings, Inter 14–16px/500.
   Wording: IDRHealth/product/site/content/SITE-TEXT-FINAL-2026-09-28.md. */

.frame { display: flex; justify-content: center; }
.frame-box {
  position: relative;
  width: calc(100% - 2 * var(--pad));
  max-width: calc(var(--max) - 2 * var(--pad));
  border-left: 1px solid var(--token-line);
  border-right: 1px solid var(--token-line);
}
.dot-tl, .dot-tr { position: absolute; top: -3px; bottom: auto; }
.dot-tl { left: -3px; }
.dot-tr { right: -3px; left: auto; }

.eyebrow {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--token-grey-61);
}
.h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 48px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--token-ink);
  text-wrap: balance;
}

/* Scroll reveal: same spring and offset as the hero load */
.reveal {
  opacity: 0.001; transform: translateY(10px);
  transition: opacity var(--dur-appear) var(--ease-appear) var(--delay, 0s), transform var(--dur-appear) var(--ease-appear) var(--delay, 0s);
}
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------------- SECTION 2: FACT STRIP ---------------- */
.facts-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--token-line);
}
.fact {
  position: relative;
  display: flex; flex-direction: column;
  padding: 40px 32px 36px;
}
.fact + .fact { border-left: 1px solid var(--token-line); }
.fact-big {
  font-family: var(--font-serif);
  font-size: 40px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--token-ink);
  text-wrap: balance;
}
.fact-text {
  position: relative;
  margin-top: 20px; padding-left: 14px;
  font-size: 15px; font-weight: 500; line-height: 1.45; letter-spacing: -0.03em;
  color: var(--token-ink-2);
  max-width: 40ch;
}
/* Sola's accent bar beside each stat caption, here in our gold */
.fact-text::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; background: var(--brand-accent); }
.fact-src {
  margin-top: auto; padding-top: 24px;
  font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: -0.02em;
  color: var(--token-grey-7a);
}

/* ---------------- SECTION 3: HOW IT WORKS ---------------- */
.how-head {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 96px 32px 64px;
  border-top: 1px solid var(--token-line);
  text-align: center;
}
/* Frame-line rule for the whole page (integrator, v14): every section draws only its own top line, and its corner
   dots sit on that line. Inner lines (head → content) have no dots, as on Sola. Nothing draws a bottom line, so two
   sections can never double up; the last framed section (FAQ) ends on the closing CTA panel. */
.how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--token-line);
}
.step { display: flex; flex-direction: column; min-width: 0; }
.step + .step { border-left: 1px solid var(--token-line); }
.step-view {
  position: relative;
  height: 276px;
  padding: 28px 28px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--token-line);
  background:
    radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .07) 1px, transparent 1.4px) 0 0 / 14px 14px,
    var(--token-surface);
}
/* the view sinks into the panel at the bottom, as in Sola's cards */
.step-view::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(rgba(247, 246, 240, 0), var(--token-surface)); pointer-events: none; }

.mock {
  background: var(--token-bg);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -12px rgba(0, 0, 0, .14);
  padding: 14px 16px 12px;
  font-size: 13px; font-weight: 500; letter-spacing: -0.02em; color: var(--token-ink);
}
.mock-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mock-head b { font-weight: 600; font-size: 13px; }
.sample {
  flex: none;
  padding: 2px 8px; border-radius: 30px;
  background: #FCF1E1; color: #8A5310;
  font-size: 11px; font-weight: 600; letter-spacing: -0.01em;
}
.mock-field {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; margin-bottom: 6px;
  border: 1px solid #e6e5df; border-radius: 8px; background: var(--token-surface);
  color: var(--token-grey-7a);
}
.mock-field svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.mock-field .typed.filled { color: var(--token-ink); font-feature-settings: "tnum"; }
.mock-rows { margin: 0; }
.mock-rows div { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-top: 1px solid #efeee8; }
.mock-rows div:first-child { border-top: 0; }
.mock-rows dt { color: var(--token-grey-61); }
.mock-rows dd { margin: 0; font-weight: 600; font-feature-settings: "tnum"; }
.mock-rows dd.neg { color: #B3261E; }

.mock-list, .mock-feed { display: flex; flex-direction: column; }
.mock-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.tick { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #E6F4EE; color: #0E7A57; }
.tick.up { background: #efeee8; color: var(--token-grey-54); }
.tick svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mock-list em, .mock-feed em { margin-left: auto; font-style: normal; font-weight: 600; font-size: 12px; font-feature-settings: "tnum"; }
.mock-list em { color: var(--token-grey-7a); }
.mock-feed li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #efeee8; }
.mock-feed li:first-child { border-top: 0; }
.mock-feed .d { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--token-grey-ad); }
.mock-feed .d.amber { background: #B06A12; }
.mock-feed .d.green { background: #0E7A57; }
.mock-feed em { padding: 2px 7px; border-radius: 6px; background: #efeee8; color: var(--token-grey-54); }
.mock-feed em.amber { background: #FCF1E1; color: #8A5310; }
.mock-feed em.green { background: #E6F4EE; color: #0E7A57; }

.step-body { display: flex; flex-direction: column; gap: 10px; padding: 28px 32px 36px; }
.step-n { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--token-grey-7a); }
.step h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.035em; color: var(--token-ink); }
.step-body p:last-child { font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: -0.03em; color: var(--token-grey-61); max-width: 46ch; }

/* ---------------- FOOTER additions ---------------- */
/* --foot-gap: space above the footer card. The homepage's closing CTA (css/11-cta.css) reads the same token to pull
   the footer up to an 8px seam, so there is one number to change, not two. */
:root { --foot-gap: 96px; }
.foot { position: relative; overflow: hidden; margin-top: var(--foot-gap); }
.foot-wrap { background: var(--token-bg); padding: 0 8px 8px; }
.foot { background: var(--brand-deep); }
.foot-slogan { max-width: 46ch; text-align: right; }
.foot-address { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: -0.035em; color: var(--token-grey-d1); }
/* Placeholders stay visible: plain gold on the dark grounds (footer, hero, dashboard panel, security band, CTA);
   inside main on light grounds the gold is too faint on #fffefa, so it becomes a gold highlighter (~5:1). */
.ph { color: var(--brand-accent); }
main .ph {
  color: #8A5310;
  background: rgba(242, 201, 121, .32);
  border-radius: 4px;
  padding: 0 .22em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
main :is(.hero, .showcase-panel, .security-band, .cta) .ph { color: var(--brand-accent); background: none; padding: 0; border-radius: 0; }
.foot-mark {
  margin: 40px 0 -0.22em; padding: 0 56px;
  width: 100%; max-width: var(--max);
  font-family: var(--font-serif);
  font-size: clamp(96px, 17vw, 260px); line-height: 1; letter-spacing: -0.04em;
  color: rgba(255, 255, 255, .05);
  user-select: none; pointer-events: none;
}
/* the watermark is drawn by CSS, not DOM text: decorative, so contrast checkers skip it (integrator, v14) */
.foot-mark::before { content: attr(data-mark); }

/* ---------------- Breakpoints ---------------- */
@media (max-width: 1199px) {
  .h2 { font-size: 42px; }
  .fact { padding: 32px 24px 28px; }
  .fact-big { font-size: 32px; }
  .how-grid { grid-template-columns: 1fr; }
  .step { display: grid; grid-template-columns: 1fr 1fr; }
  .step + .step { border-left: 0; border-top: 1px solid var(--token-line); }
  .step-view { height: auto; min-height: 240px; padding: 28px; border-bottom: 0; border-right: 1px solid var(--token-line); }
  .step-view::after { display: none; }
  .step-body { justify-content: center; }
}
/* narrow tablets: three fact columns of ~200px; one step smaller so no word sits alone on a line (integrator, v14) */
@media (min-width: 810px) and (max-width: 979px) {
  .fact { padding: 28px 20px 24px; }
  .fact-big { font-size: 28px; }
  .fact-text { font-size: 14px; }
}
@media (max-width: 809px) {
  .h2 { font-size: 32px; }
  .facts-grid { grid-template-columns: 1fr; }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--token-line); }
  .fact { padding: 28px 24px; }
  .fact-big { font-size: 30px; }
  .how-head { padding: 64px 24px 40px; }
  .step { display: flex; }
  .step-view { min-height: 0; padding: 20px 16px 0; border-right: 0; border-bottom: 1px solid var(--token-line); height: 236px; }
  .step-view::after { display: block; }
  .step-body { padding: 24px 24px 32px; }
  :root { --foot-gap: 64px; }
  .foot-slogan { text-align: left; }
  .foot-mark { padding: 0 16px; margin-top: 24px; }
}