.hero{padding-block:8px 12px}
.hero__stage{position:relative;display:grid;grid-template-columns:1fr;gap:8px 40px;align-items:center}
.hero__art{justify-self:center;order:-1;margin-bottom:-6px}
.hero h1{font-size:var(--step-4);margin-bottom:16px;max-width:15ch}
.hero__lede{font-size:var(--step-1);line-height:1.5;color:#334155;max-width:34rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
@media (min-width:820px){.hero{padding-block:24px 24px}
.hero__stage{grid-template-columns:minmax(0,1fr) 400px}
.hero__art{order:0;justify-self:end;margin:0}
}
.hero-callout{margin-top:26px}
.index{padding-block:36px 16px}
.index h2{font-size:var(--step-3);margin-bottom:6px}
.index>.wrap>p{color:var(--muted);max-width:38rem}
.chips{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){.chips{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:980px){.chips{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.chip{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 14px 8px 8px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);text-decoration:none;font-weight:720;line-height:1.25}
.chip:hover{color:var(--ink);background:color-mix(in srgb,var(--chip-tint) 45%,#FFFFFF);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--chip-deep) 38%,var(--line))}
.chip__icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--tint);color:var(--deep);flex:none}
.chip__icon .icon{width:22px;height:22px}
.chip small{display:block;font-weight:600;color:var(--muted);font-size:.8rem}
.az{margin-top:18px}
.az summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:740;color:var(--accent-deep);list-style:none}
.az summary::-webkit-details-marker{display:none}
.az ul{columns:16rem;column-gap:32px;padding:6px 0 0 1.1em;margin:0}
.az li{margin-bottom:.35em;break-inside:avoid}
.scenes{--gap:clamp(120px,22vh,230px);padding-block:40px 20px}
.scene{--in:1;--out:0;position:relative;padding-inline:10px;scroll-margin-top:16px}
.scene + .scene{margin-top:var(--gap)}
.scene__stage{position:relative;max-width:var(--wide);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:0 40px;padding:26px 20px 26px}
.scene__vessel{position:absolute;inset:0;z-index:0;pointer-events:none}
.v-surface{position:absolute;inset:0;border-radius:var(--r-xl);background:var(--tint);background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 55%,#ffffff),var(--tint));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--deep) 16%,transparent),inset 0 1px 0 rgb(255 255 255 / .45)}
.scene__art{position:relative;z-index:1;order:-1;justify-self:end;margin:-6px -4px -34px 0;pointer-events:none}
.scene__body{position:relative;z-index:2;min-width:0}
.scene__fx{position:absolute;left:0;right:0;top:100%;height:var(--gap);pointer-events:none;z-index:3}
.scene__kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;color:color-mix(in srgb,var(--deep) 85%,#2E2A25);font-weight:800;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase}
.scene__kicker .icon{width:18px;height:18px}
.scene__title{font-size:var(--step-3);margin-bottom:10px;letter-spacing:-0.028em}
.scene__lede{font-size:1.12rem;color:#334155;max-width:36rem}
.scene__cards{list-style:none;margin:12px 0 0;padding:0;border-top:1.5px solid color-mix(in srgb,var(--deep) 24%,transparent)}
.scene__cards>li{border-bottom:1.5px solid color-mix(in srgb,var(--deep) 24%,transparent)}
.scene__cards .card__title{font-size:1.22rem}
@media (min-width:760px){.scene{padding-inline:var(--gutter)}
.scene__stage{grid-template-columns:minmax(0,1fr) 280px;padding:52px 52px 48px}
.scene__art{position:sticky;top:14vh;order:0;grid-column:2;grid-row:1;align-self:start;justify-self:center;margin:0}
}
.scene__head>*{transform:translateY(calc((1 - var(--in)) * 30px));opacity:clamp(0,var(--in) * 1.6 - .2,1)}
.scene__cards>li{--k:clamp(0,(var(--in) - .3 - var(--i,0) * .07) / .35,1);transform:translateY(calc((1 - var(--k)) * 34px));opacity:var(--k)}
.scene:focus-within .scene__cards>li,.scene:focus-within .scene__head>*{opacity:1;transform:none}
.scene.is-live .motif *,.scene.is-live .scene__fx>*,.scene.is-live .scene__vessel>*{will-change:transform,opacity}
.closing{padding-block:72px 8px}
.closing .card--feature{max-width:42rem}