/* Ridgeline (demo) — screen-specific layout */

/* ---------- Brand mark ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand__mark { width: 30px; height: 30px; color: var(--accent); }
.brand__word { font-family: var(--f-display); font-weight: 560; font-size: 22px; letter-spacing: -.02em; }
.brand__word i { font-style: italic; font-weight: 500; }

/* ---------- Welcome ---------- */
.welcome .page { padding-bottom: 0; }
.welcome__bar { display: flex; align-items: center; justify-content: space-between; padding: var(--s5) 0 var(--s4); }
.welcome__art {
  margin: 0 calc(var(--pad) * -1); position: relative; overflow: hidden;
}
.welcome__art svg { width: 100%; height: auto; }
.welcome__hero { padding: var(--s6) 0 var(--s6); display: grid; gap: var(--s4); }
.section { padding: var(--s6) 0; border-top: 1px solid var(--line); display: grid; gap: var(--s4); }
.track-card { display: grid; gap: var(--s3); align-content: start; padding: var(--s4); border-radius: var(--r-l); min-height: 188px; }
.track-card--pine { background: var(--pine); color: var(--on-pine); }
.track-card--pine .eyebrow, .track-card--pine li { color: var(--on-pine); opacity: .88; }
.track-card--ember { background: var(--accent); color: var(--on-accent); }
.track-card--ember .eyebrow, .track-card--ember li { color: var(--on-accent); opacity: .92; }
.track-card h3 { font-family: var(--f-display); font-weight: 520; font-size: 21px; line-height: 1.1; letter-spacing: -.01em; }
.track-card ul { display: grid; gap: 6px; font-size: 13.5px; line-height: 1.35; font-weight: 500; }
.track-card li { display: flex; gap: 6px; }
.track-card li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 7px; border-radius: 50%; background: currentColor; }
.steps { display: grid; gap: var(--s4); counter-reset: s; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: var(--s3); align-items: start; }
.step .num { font-size: 52px; color: var(--accent-text); }
.included { display: grid; gap: 0; }
.included li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.included li + li { box-shadow: inset 0 1px 0 var(--line); }
.included .icon { color: var(--pine-text); margin-top: 1px; }
.cta-bar {
  position: sticky; bottom: 0; margin: 0 calc(var(--pad) * -1); padding: 12px var(--pad) calc(14px + env(safe-area-inset-bottom));
  background: var(--bg); box-shadow: 0 -1px 0 var(--line); display: grid; gap: 8px; z-index: 5;
}

/* ---------- Home ---------- */
.today { padding: var(--s5); border-radius: var(--r-xl); display: grid; gap: var(--s3); }
.today__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.today__head .num { flex: none; white-space: nowrap; }
.today__head .unit { margin-left: .2em; }
.weight-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.weight-hero > div:last-child { text-align: right; white-space: nowrap; flex: none; }
.weight-hero .num--xl { font-size: 68px; }
.metric { display: grid; gap: var(--s3); justify-items: start; }
.metric .ring-wrap { align-self: center; }
.dateline { display: flex; gap: 8px; align-items: center; }

/* ---------- Stub ---------- */
.stub-hero { border-radius: var(--r-xl); padding: var(--s6) var(--s5); background: var(--inv-bg); color: var(--inv-ink); display: grid; gap: var(--s3); }
.stub-hero .eyebrow { color: var(--inv-ink-2); }
.stub-hero p { color: var(--inv-ink-2); }

/* ---------- Gallery ---------- */
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.swatch { display: grid; gap: 6px; font-size: 12px; font-weight: 600; }
.swatch i { display: block; height: 56px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.swatch span { color: var(--ink-3); font-weight: 520; font-family: var(--f-ui); }
.type-sample { display: grid; gap: 10px; }
.g-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }