/* Home page — page-specific layout. Reuses tokens/components from site.css. */

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(1rem, .5rem + 3vw, 3rem); padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); overflow: clip; }
.hero__grid { display: grid; align-items: center; }
/* < 64em: copy children join the hero grid so the art can sit inside the first screen */
@media (max-width: 63.99em) {
  .hero__copy { display: contents; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "title" "art" "lead" "actions" "facts"; column-gap: var(--space-l); }
  .hero__eyebrow { grid-area: eyebrow; } .hero__title { grid-area: title; } .hero-art { grid-area: art; }
  .hero__lead { grid-area: lead; } .hero__actions { grid-area: actions; } .hero__facts { grid-area: facts; }
  .hero-art { width: min(74vw, 300px); margin: var(--space-m) auto 0; }
  .hero-art .hero-art__cap, .hero-art .hero-label, .hero-art .hero-art__ringtext, .hero-art .hero-art__leaders { display: none; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-areas: "eyebrow art" "title art" "lead art" "actions art" "facts facts"; align-items: start; }
  .hero-art { width: 100%; margin: 0; align-self: center; }
}
@media (min-width: 64em) {
  .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 0; min-height: min(calc(100svh - var(--header-h) - 3rem), 860px); }
  .hero__copy { position: relative; z-index: 2; }
}
.hero__title {
  font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: "SOFT" 30, "WONK" 0;
  font-size: clamp(3.1rem, 1.05rem + 8.6vw, 7.6rem); line-height: .99; font-weight: 330; letter-spacing: -0.04em;
  margin-top: var(--space-m);
}
@media (min-width: 64em) { .hero__title { font-size: clamp(5rem, .6rem + 5.6vw, 7.4rem); margin-right: -6vw; } }
.hero__title em { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 300; color: var(--blood-700); letter-spacing: -0.03em; padding-right: .04em; }
.hero__lead { margin-top: var(--space-l); max-width: 34ch; }
@media (min-width: 64em) { .hero__lead { margin-top: var(--space-m); } .hero__actions { margin-top: var(--space-l) !important; } }
.hero__actions { margin-top: var(--space-xl); }
.hero__facts { list-style: none; padding: 0; margin-top: clamp(2rem, 1.6rem + 2vw, 3rem); display: grid; gap: var(--space-m) var(--space-l); grid-template-columns: 1fr 1fr; max-width: 40rem; }
.hero__facts .hero-fact--text { grid-column: 1 / -1; }
@media (min-width: 30em) { .hero__facts { grid-template-columns: auto auto minmax(0, 1.4fr); } .hero__facts .hero-fact--text { grid-column: auto; } }
.hero-fact { padding-top: .9rem; border-top: 1px solid var(--line-strong); }
.hero-fact__v { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: "SOFT" 0, "WONK" 0; font-size: var(--step-3); line-height: 1; font-weight: 320; letter-spacing: -0.03em; white-space: nowrap; }
.hero-fact__v small { font-size: .5em; letter-spacing: 0; margin-left: 0; }
.hero-fact__v, .hero-fact__l { display: block; }
.hero-fact__l { margin-top: .4rem; font-size: var(--step--1); color: var(--text-2); line-height: 1.4; }
.hero-fact--text .hero-fact__l { margin-top: 0; }
.hero-fact--text .hero-fact__l strong { display: block; color: var(--ink); font-weight: 600; }

.hero-art { position: relative; margin: 0 auto; width: 100%; max-width: 640px; color: var(--ink); }
@media (min-width: 64em) { .hero-art { max-width: none; width: min(100%, calc((100svh - var(--header-h) - 2rem) * 0.842)); justify-self: end; margin-right: -1rem; } }
.hero-art__stage { position: relative; }
.hero-art__svg { width: 100%; height: auto; overflow: visible; }
.hero-art__ringtext { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .24em; fill: var(--ink-3); }
.hero-art__ticks { transform-origin: 320px 410px; }
.hero-art__leaders { color: var(--ink-2); }
.hero-label { position: absolute; z-index: 2; display: grid; gap: .15rem; font-size: var(--step--2); line-height: 1.35; color: var(--ink-2); max-width: 17ch; padding: .35rem .5rem; border-radius: 6px; background: rgb(244 239 229 / .86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hero-label b { font-family: var(--font-mono); font-weight: 500; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.hero-label--1 { left: calc(32 / 640 * 100%); top: calc(232 / 760 * 100%); transform: translateY(-100%); }
.hero-label--2 { right: 0; top: calc(376 / 760 * 100%); transform: translateY(-100%); text-align: right; justify-items: end; }
.hero-label--3 { right: 0; top: calc(596 / 760 * 100%); transform: translateY(-100%); text-align: right; justify-items: end; }
@media (max-width: 47.99em) {
  .hero-label { max-width: 12ch; font-size: .72rem; }
  .hero-label span { display: none; }
}
.hero-art__cap { margin-top: var(--space-m); max-width: 40ch; margin-left: calc(80 / 640 * 100%); }

/* Hero motion */
@media (prefers-reduced-motion: no-preference) {
  .hero-art__ticks { animation: ring-spin 140s linear infinite; }
  .rbc-drift { animation: rbc-drift var(--t, 12s) ease-in-out infinite alternate; }
  .js .hero-art__drop { animation: drop-in 1400ms var(--ease-out) both 100ms; transform-origin: 320px 680px; }
  .js .hero-art__shadow { animation: fade-in 1600ms var(--ease-out) both 300ms; }
  .js .hero-art__net .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-in 1100ms var(--ease-out) forwards; animation-delay: var(--d); transition: none; }
  .js .hero-art__nodes circle { opacity: 0; animation: node-in 900ms var(--ease-out) forwards; animation-delay: var(--d); }
  .js .hero-art__nodes circle[opacity] { animation-name: node-in-soft; }
  .js .hero-art__contact circle:first-child { transform-origin: 250px 330px; animation: ripple 2.8s var(--ease-out) 600ms infinite; }
  .js .hero-label { opacity: 0; animation: fade-up 900ms var(--ease-out) forwards; }
  .js .hero-label--1 { animation-delay: 2000ms; } .js .hero-label--2 { animation-delay: 2300ms; } .js .hero-label--3 { animation-delay: 2600ms; }
  .js .hero-art__leaders .draw { transition-duration: 900ms; }
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes rbc-drift { to { transform: translate(var(--dx), var(--dy)); } }
@keyframes drop-in { from { opacity: 0; transform: scale(.94) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes draw-in { to { stroke-dashoffset: 0; } }
@keyframes node-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes node-in-soft { from { opacity: 0; } to { opacity: .5; } }
@keyframes ripple { 0% { transform: scale(.6); opacity: 0; } 20% { opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }

/* ---------- Moments (scroll-told mechanism) ---------- */
.moments { padding-block: var(--section-y); overflow: clip; }
.moments .section-head { margin-bottom: clamp(2rem, 1rem + 4vw, 4rem); }
.moments__grid { display: grid; gap: 0 var(--grid-gap); }
.mfig { position: sticky; top: var(--header-h-condensed); z-index: 2; margin-inline: calc(var(--gutter) * -1); padding: .75rem var(--gutter) .5rem; background: linear-gradient(var(--night) 85%, rgb(21 17 15 / 0)); }
.mfig__frame { position: relative; border: 1px solid var(--line-night); border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, #2A1A16 0%, var(--night-2) 55%, #1A1412 100%); }
.mfig__stage { position: relative; width: 100%; max-width: calc(34svh * 600 / 410); margin-inline: auto; }
.mfig__svg { width: 100%; height: auto; }
.mfig::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; background: linear-gradient(var(--night), rgb(21 17 15 / 0)); pointer-events: none; }
.mfig__label { position: absolute; margin: 0; font-family: var(--font-mono); font-size: max(11px, .68rem); letter-spacing: .1em; text-transform: uppercase; color: var(--on-night); line-height: 1.2; transform: translateY(-120%); white-space: nowrap; transition: opacity var(--dur-4) var(--ease-out); }
.mfig__label--1 { left: calc(20 / 600 * 100%); top: calc(94 / 410 * 100%); }
.mfig__label--2 { right: calc(18 / 600 * 100%); top: calc(138 / 410 * 100%); text-align: right; }
.mfig__label--3 { left: calc(20 / 600 * 100%); top: calc(180 / 410 * 100%); color: var(--blood-300); }
.mfig__label--vessel { left: calc(20 / 600 * 100%); top: calc(330 / 410 * 100%); color: var(--blood-300); transform: none; }
.mfig__label--tissue { left: calc(20 / 600 * 100%); top: calc(372 / 410 * 100%); color: var(--on-night-2); transform: none; }
.mfig__label--1, .mfig__label--2, .m-lead-1, .m-lead-2 { opacity: 0; }
.mfig[data-active="1"] .mfig__label--1, .mfig[data-active="1"] .m-lead-1, .mfig[data-active="2"] .mfig__label--2, .mfig[data-active="2"] .m-lead-2 { opacity: 1; }
.m-lead { transition: opacity var(--dur-4) var(--ease-out); }
.mfig[data-active="1"] .mfig__label--3, .mfig[data-active="2"] .mfig__label--3, .mfig[data-active="1"] .m-lead-3, .mfig[data-active="2"] .m-lead-3 { opacity: 0; }
.mfig__cascade { position: absolute; right: calc(18 / 600 * 100%); top: 3rem; width: min(46%, 15.5rem); padding: .8rem .9rem; border: 1px solid var(--line-night); border-radius: var(--r-sm); background: rgb(21 17 15 / .72); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.mfig[data-active="1"] .mfig__cascade, .mfig[data-active="2"] .mfig__cascade { opacity: 0; transform: translateY(-6px); }
.mfig__cascade-h { font-family: var(--font-mono); font-size: max(11px, .66rem); letter-spacing: .1em; text-transform: uppercase; color: var(--on-night-2); margin-bottom: .55rem; }
.mfig__cascade-h span { color: var(--moss-300); }
.mfig__cascade ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.mfig__cascade li { display: flex; align-items: center; gap: .3rem; font-family: var(--font-mono); font-size: max(11px, .7rem); color: var(--on-night); }
.mfig__cascade li svg, .mfig__cascade-compact svg { width: 10px; height: 10px; color: var(--moss-300); flex: none; }
.mfig__cascade-compact { display: none; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--on-night); }
@media (max-width: 47.99em) {
  .mfig__label--vessel, .mfig__label--tissue { display: none; }
  .mfig__cascade { width: auto; padding: .35rem .6rem; top: auto; bottom: .6rem; right: .6rem; }
  .mfig__cascade-h, .mfig__cascade ul { display: none; }
  .mfig__cascade-compact { display: flex; }
}
.mfig__hud { position: absolute; left: 1rem; right: 1rem; top: .85rem; display: flex; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-2); pointer-events: none; }
.mfig__counter b { color: var(--on-night); font-weight: 500; }
.mfig__dots { display: flex; gap: 6px; align-items: center; }
.mfig__dots i { width: 18px; height: 2px; background: var(--line-night); border-radius: 2px; transition: background-color var(--dur-3), width var(--dur-3) var(--ease-out); }
.mfig[data-active="1"] .mfig__dots i:nth-child(1), .mfig[data-active="2"] .mfig__dots i:nth-child(2), .mfig[data-active="3"] .mfig__dots i:nth-child(3), .mfig:not([data-active]) .mfig__dots i:nth-child(3) { background: var(--blood-300); width: 30px; }
.mfig__counter [data-show] { display: none; }
.mfig[data-active="1"] [data-show="1"], .mfig[data-active="2"] [data-show="2"], .mfig[data-active="3"] [data-show="3"], .mfig:not([data-active]) [data-show="3"] { display: inline; }
@media (min-width: 64em) {
  .moments__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .mfig { top: calc(var(--header-h-condensed) + 6vh); align-self: start; margin: 0; padding: 0; background: none; grid-row: 1 / span 3; }
  .mfig__stage { max-width: calc((100svh - var(--header-h-condensed) - 16vh) * 600 / 410); }
  .mfig::after { display: none; }
  .mfig__hud { left: 1.5rem; right: 1.5rem; top: 1.25rem; }
}
.mstep { position: relative; display: grid; align-content: center; gap: var(--space-s); min-height: 56svh; padding-block: var(--space-2xl); }
.mstep:first-of-type { padding-top: var(--space-xl); }
.mstep:last-child { min-height: auto; padding-bottom: var(--space-l); }
@media (min-width: 64em) { .mstep:last-child { min-height: 60svh; } }
@media (min-width: 64em) { .mstep { min-height: 72svh; padding-left: clamp(1.5rem, 3vw, 3.5rem); } }
.mstep__n { display: flex; align-items: baseline; gap: 1rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-2); }
.mstep__n b { font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 0; font-weight: 250; font-size: var(--step-5); letter-spacing: -0.04em; color: var(--blood-300); line-height: .9; }
.mstep__title { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: var(--fr-display); font-size: var(--step-4); line-height: 1.04; font-weight: 340; letter-spacing: -0.03em; color: var(--on-night); }
.mstep__title em { font-style: italic; font-variation-settings: var(--fr-italic); }
.mstep__body { color: var(--on-night-2); max-width: 40ch; font-size: var(--step-0); }
.mstep__time { display: inline-flex; align-self: start; justify-self: start; align-items: center; gap: .5rem; padding: .35rem .75rem; border: 1px solid var(--line-night); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: var(--on-night); }
.mstep__time::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blood-300); }
.factors { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem; list-style: none; padding: 0; }
.factors li { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: var(--r-xs); background: rgb(244 238 228 / .06); border: 1px solid var(--line-night); font-family: var(--font-mono); font-size: .72rem; color: var(--on-night); }
.factors li svg { width: 10px; height: 10px; color: var(--moss-300); }
.mstep::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 0; background: var(--blood-300); transform: translateY(-50%); transition: height var(--dur-4) var(--ease-out); display: none; }
@media (min-width: 64em) { .mstep::before { display: block; } }
.mstep.is-active::before { height: 9rem; }
.mstep__n b { transition: color var(--dur-3); }
.js [data-steps] .mfig[data-active] ~ .mstep:not(.is-active) .mstep__n b { color: var(--on-night-2); }
.js [data-steps] .mfig[data-active] ~ .mstep:not(.is-active) .mstep__title { color: #D9D0C5; }

/* Figure states */
.m-rbc { transform: translate(var(--bx), var(--by)); transition: transform 1300ms var(--ease-out) var(--rd); }
.mfig[data-active="1"] .m-rbc { transform: translate(var(--ax), var(--ay)); }
.m-net path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1200ms var(--ease-out) var(--d); }
.mfig[data-active="1"] .m-net path { stroke-dashoffset: 1; transition-duration: 300ms; transition-delay: 0ms; }
.m-nodes, .m-cap, .m-l3 { transition: opacity var(--dur-4) var(--ease-out); }
.mfig[data-active="1"] .m-nodes { opacity: 0; }
.mfig[data-active="1"] .m-cap, .mfig[data-active="2"] .m-cap, .mfig[data-active="1"] .m-l3, .mfig[data-active="2"] .m-l3 { opacity: 0; }
.m-l2 { opacity: 0; transition: opacity var(--dur-4); }
.mfig[data-active="2"] .m-l2 { opacity: 1; }
.m-drops, .m-l1 { opacity: 0; transition: opacity var(--dur-4) var(--ease-out); }
.mfig[data-active="1"] .m-drops, .mfig[data-active="1"] .m-l1 { opacity: 1; }
.m-pool { transition: opacity var(--dur-5) var(--ease-out); opacity: .6; }
.mfig[data-active="1"] .m-pool { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .mfig[data-active="1"] .m-drop { animation: m-fall 2.6s var(--ease-in-out) infinite; animation-delay: calc(var(--i) * 420ms); }
  .mfig[data-active="3"] .m-cap { animation: dash 18s linear infinite; }
}
@keyframes m-fall { 0% { transform: translateY(-30px); opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(150px); opacity: 0; } }
@keyframes dash { to { stroke-dashoffset: -180; } }

/* ---------- Plants ---------- */
.plates { display: grid; gap: var(--space-s); grid-template-columns: 1fr; counter-reset: plate; }
.plates .plate { --plate-bg: var(--raised); }
@media (max-width: 39.99em) {
  .plates .plate { display: grid; grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1rem; padding: .7rem; }
  .plates .plate__no { grid-column: 1 / -1; }
  .plates .plate__art { grid-row: 2 / span 2; padding: .35rem 0 0; }
  .plates .plate__art svg { max-height: 150px; }
  .plates .plate__text { align-self: center; }
}
@media (min-width: 40em) { .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plates .plate:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--space-s) / 2); } }
@media (min-width: 56em) { .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plates .plate:last-child { grid-column: auto; width: auto; } }
@media (min-width: 72em) { .plates { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-s); } }
.plate { transition: box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.plate:hover { box-shadow: var(--shadow-2); }
.plate__text { padding-top: .25rem; border-top: 1px solid var(--line); }
.plate__text .plate__latin { margin-top: .6rem; }
.plants-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-m); align-items: center; margin-top: var(--space-xl); }

/* ---------- Origin ---------- */
.origin__grid { display: grid; gap: var(--space-2xl) var(--grid-gap); }
@media (min-width: 64em) { .origin__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.origin__quote { margin: 0; }
.origin__statement { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: "SOFT" 40, "WONK" 0; font-size: var(--step-4); line-height: 1.08; font-weight: 320; letter-spacing: -0.028em; }
.origin__statement .hang { margin-left: max(-.42em, calc(4px - var(--gutter))); }
.origin__src { margin-top: var(--space-m); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .04em; color: var(--ink-2); }
.origin__src i { font-style: italic; }
.origin__statement em { font-style: italic; font-variation-settings: var(--fr-italic); color: var(--blood-700); }
.origin__meta { margin-top: var(--space-l); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
.origin__list { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.origin__list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-strong); color: var(--text-2); font-size: var(--step--1); }
.origin__list svg { width: 22px; height: 22px; color: var(--blood-700); margin-top: .1rem; }
.origin__list strong { display: block; color: var(--ink); font-weight: 600; font-size: var(--step-0); margin-bottom: .1rem; }

/* ---------- Evidence ---------- */
.evidence__grid { display: grid; gap: var(--space-2xl) var(--grid-gap); }
@media (min-width: 64em) { .evidence__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.pyramid { margin: 0; }
.pyramid__svg { width: 100%; max-width: 480px; height: auto; }
.pyramid text { font-family: var(--font-mono); }
.pyr-tier__label { font-family: var(--font-sans) !important; font-size: 17px; font-weight: 600; fill: var(--ink); }
.pyr-tier__meta { font-size: 13px; letter-spacing: .08em; fill: var(--slate-700); text-transform: uppercase; }
.pyramid__legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: var(--space-m); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--slate-700); }
.pyramid__legend span { display: inline-flex; align-items: center; gap: .5rem; }
.pyramid__legend i { width: 18px; height: 12px; border-radius: 2px; background: var(--slate-700); }
.pyramid__legend i.is-open { background: transparent; border: 1.5px dashed var(--slate-700); }
.ledger { display: grid; gap: var(--space-xl) var(--grid-gap); }
@media (min-width: 48em) { .ledger { grid-template-columns: 1fr 1fr; } }
.ledger__col h3 { display: flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--slate-700); padding-bottom: .9rem; border-bottom: 1px solid rgb(62 74 82 / .3); }
.ledger__col h3 svg { width: 16px; height: 16px; }
.ledger__col ul { list-style: none; padding: 0; }
.ledger__col li { padding: 1rem 0; border-bottom: 1px solid rgb(62 74 82 / .16); font-size: var(--step--1); color: var(--ink-2); line-height: 1.55; }
.ledger__col li strong { color: var(--ink); font-weight: 600; }
.refcards { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
@media (min-width: 48em) { .refcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .refcard { padding: 1.25rem; } }
.refcard .card__title { font-size: var(--step-1); line-height: 1.25; }
.refcard .card__foot { flex-wrap: wrap; row-gap: .5rem; }
.refcard__src { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--slate-700); }
.refcard__authors { font-size: var(--step--1); color: var(--ink-2); }
.evidence__foot { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; justify-content: space-between; }

/* ---------- Product forms ---------- */
/* Products (the two forms distributed in Germany; photo slots until client photos land) */
.products { display: grid; gap: var(--grid-gap); }
@media (min-width: 48em) { .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.product { display: grid; gap: var(--space-m); align-content: start; }
.product__photo { margin: 0; }
.product__n { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.product__n b { font-weight: 500; color: var(--blood-800); letter-spacing: .04em; }
.product__title { margin-top: .5rem; font-family: var(--font-display); font-variation-settings: var(--fr-display); font-optical-sizing: auto; font-size: var(--step-3); font-weight: 360; letter-spacing: -0.02em; line-height: 1.06; }
.product__title em { font-style: italic; font-variation-settings: var(--fr-italic); }
.product__desc { margin-top: .5rem; font-size: var(--step--1); color: var(--text-2); line-height: 1.55; max-width: 46ch; }
.product__meta { margin-top: .6rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .03em; color: var(--ink-2); }
.product__note { margin-top: .35rem; font-size: var(--step--2); color: var(--ink-3); }
.range__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s) var(--space-l); margin-top: var(--space-xl); }

/* Trust strip (directly under the hero) */
.trust { border-block: 1px solid var(--line); background: var(--paper-2); }
.trust__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trust__list li { display: grid; align-content: start; gap: .3rem; padding: 1rem .9rem 1rem 0; }
.trust__list li:nth-child(odd) { border-right: 1px solid var(--line); }
.trust__list li:nth-child(even) { padding-left: .9rem; }
.trust__list li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.trust__k { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.trust__v { font-size: var(--step--1); color: var(--ink); line-height: 1.4; }
.trust__link { display: inline; text-decoration: underline; text-decoration-color: var(--blood-700); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.trust__link:hover { color: var(--blood-800); }
.trust__link svg { display: inline-block; width: .85em; height: .85em; margin-left: .25em; vertical-align: -.08em; }
@media (min-width: 64em) {
  .trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust__list li { padding: 1.25rem 1.25rem 1.25rem 0; border-bottom: 0 !important; border-right: 1px solid var(--line); }
  .trust__list li + li { padding-left: 1.25rem; }
  .trust__list li:last-child { border-right: 0; }
}

/* Mobile length (≤ 47.99em): compact moments + application rows without descriptions */
@media (max-width: 47.99em) {
  .mstep { min-height: 0; padding-block: var(--space-l); gap: var(--space-xs); }
  .mstep:first-of-type { padding-top: var(--space-l); }
  .mstep__n b { font-size: var(--step-3); }
  .mstep__title { font-size: var(--step-3); }
  .mstep__body { font-size: var(--step--1); }
  .mstep .factors { display: none; }
  #applications .index-row__desc { display: none; }
}

/* ---------- CTA ---------- */
/* .cta and .refs-wrap moved to site.css (shared components) */

@media (max-width: 47.99em) { .pyr-tier__label { font-size: 19px; } .pyr-tier__meta { font-size: 15px; } }
.pyramid__src { color: var(--slate-700); }
.index-note { margin-top: var(--space-m); max-width: 60ch; }

/* round 2 */
.hero__title .line:nth-child(3) > span { padding-left: .05em; }
@media (max-width: 47.99em) {
  .hero-art { width: min(50vw, 190px); margin: 0 auto -.75rem; }
  .hero__lead { margin-top: var(--space-s); font-size: var(--step-0); }
  .hero { padding-top: .75rem; }
  .hero__actions { margin-top: var(--space-l) !important; }
  .mfig__long { display: none; }
}
.origin__statement { position: relative; }
.origin__statement .hang { position: absolute; right: 100%; top: 0; margin: 0; padding-right: .04em; }
@media (max-width: 47.99em) { .origin__statement .hang { position: static; } }
.pyramid__legend .pyramid__src, .pyramid__legend .pyramid__src span { display: inline; gap: 0; }
@media (min-width: 48em) and (max-width: 63.99em) {
  .refcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .refcards .refcard:last-child { grid-column: 1 / -1; }
  .refcard .card__title { font-size: var(--step-0); }
}

/* Mobile length pass (≤ 47.99em): trim the tallest bands without touching desktop or content.
   Targets Home well under 11k px at 375 (see DESIGN.md 2026-10-27). */
@media (max-width: 47.99em) {
  .section { padding-block: clamp(2.5rem, 1.8rem + 3vw, 3.25rem); }
  .products { gap: var(--space-xl); }
  /* Evidence: tighter ledger + refcards */
  .ledger__col li { padding: .7rem 0; }
  .refcards { margin-top: var(--space-xl); gap: var(--space-s); }
  .refcard { padding: 1rem; }
  .refcard .card__title { font-size: var(--step-0); }
  .trust__list li { padding-block: .75rem; }
  .section-head { gap: var(--space-s); margin-bottom: var(--space-xl); }
  .section-head__intro { font-size: var(--step-0); }
  .mstep { padding-block: var(--space-m); }
  #evidence .refcards { display: none; }
}

/* ---------- Two products (rich cards, mirrored from the product page) ---------- */
.prods { display: grid; gap: var(--space-2xl); }
.prod { display: grid; gap: var(--space-l) var(--grid-gap); align-items: center; }
@media (min-width: 56em) {
  .prod { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2rem, 1rem + 3vw, 4.5rem); }
  .prod:nth-child(even) .prod__media { order: 2; }
}
.prod__media { display: grid; gap: var(--space-m); align-content: start; }
.prod__photo { margin: 0; }
.prod__seq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); }
.prod__seq--single { grid-template-columns: minmax(0, 1fr); }
.prod__step { margin: 0; display: grid; gap: .5rem; }
.prod__thumb { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper-2); }
.prod__thumb--wide { aspect-ratio: 3 / 2; }
.prod__thumb--box { aspect-ratio: 1200 / 454; }
.prod__thumb picture, .prod__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prod__step figcaption { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .04em; color: var(--ink-3); text-align: center; text-wrap: balance; }
.prod__step--wide figcaption { text-align: left; }
.prod__kicker { display: flex; align-items: center; gap: .75rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.prod__n { color: var(--blood-700); }
.prod__name { margin-top: .6rem; font-family: var(--font-display); font-variation-settings: var(--fr-display); font-optical-sizing: auto; font-size: var(--step-4); line-height: 1.02; font-weight: 340; letter-spacing: -0.03em; }
.prod__ger { margin-top: .35rem; font-size: var(--step--1); color: var(--ink-3); }
.prod__ger i { font-family: var(--font-display); font-style: italic; font-variation-settings: var(--fr-italic); color: var(--ink-2); }
.prod__desc { margin-top: .9rem; color: var(--text-2); max-width: 48ch; }
.prod__spec { margin-top: var(--space-m); display: grid; gap: 0; border-top: 1px solid var(--line); }
.prod__spec > div { display: grid; grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr); gap: .25rem 1.25rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.prod__spec dt { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.prod__spec dd { color: var(--ink); font-size: var(--step--1); }
.prod__note { margin-top: var(--space-m); font-size: var(--step--1); color: var(--text-2); max-width: 48ch; }
.prod__cta { margin-top: var(--space-m); }
.prod__cta--buy { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }