/* Home layout: cinematic hero (headline left, live lotus right), quiet ruled sections, the requisition board as working proof. */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, var(--bg)); z-index: -1; pointer-events: none; }
.hero canvas { position: absolute; z-index: -2; top: 0; right: 0; width: 100%; height: 22rem; }
.hero-in { padding-block: 19rem 3rem; display: grid; }
@media (min-width: 980px) { .hero canvas { width: 62%; height: 100%; } .hero-in { padding-block: clamp(6rem, 11vw, 9.5rem) clamp(5rem, 9vw, 8rem); } }
.hero h1 { font-size: var(--s4); font-weight: 600; line-height: .93; letter-spacing: -.045em; max-width: 11.5ch; }
.lede { margin-top: 1.75rem; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; max-width: 36ch; color: var(--dim); }
.lede strong { color: var(--fg); font-weight: 500; }

/* promise */
.promise .steps { grid-template-columns: none; }
@media (min-width: 900px) { .promise .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* products teaser */
.feature { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 980px) { .feature { grid-template-columns: 5fr 7fr; gap: 4.5rem; } }
.feature-copy { display: grid; gap: 1.2rem; align-content: start; }
.feature-copy h2 { font-size: var(--s3); font-weight: 600; line-height: 1; }
.feature-copy > p { color: var(--dim); max-width: 44ch; }
.feature-links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }