.flow-system-intro {
display: grid;
width: min(100%, var(--flow-max-width));
margin: 0 auto;
padding: clamp(104px, 10vw, 148px) clamp(28px, 6.5vw, 94px)
clamp(92px, 9vw, 132px);
border-right: 1px solid var(--flow-line);
border-bottom: 1px solid var(--flow-line);
border-left: 1px solid var(--flow-line);
background: #f6f8fc;
gap: 58px;
scroll-margin-top: var(--rp-nav-height);
}
.flow-system-intro > div:first-child {
max-width: 960px;
}
.flow-section-eyebrow,
.flow-final > div:first-child > span {
color: var(--flow-accent);
font-family: var(--flow-mono);
font-size: 10px;
font-weight: 720;
letter-spacing: 0.13em;
}
.flow-system-intro h2 {
max-width: 940px;
margin: 22px 0 0;
color: var(--flow-text);
font-size: clamp(42px, 5vw, 68px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.04;
text-wrap: balance;
}
.flow-system-intro p {
max-width: 880px;
margin: 26px 0 0;
color: var(--flow-muted);
font-size: 16px;
line-height: 1.76;
}
.flow-system-map {
display: grid;
min-width: 0;
padding: 18px;
border: 1px solid var(--flow-line-strong);
border-radius: 18px;
background: var(--flow-surface);
box-shadow: 0 26px 58px -44px rgb(15 35 70 / 50%);
align-items: stretch;
gap: 42px;
grid-template-columns:
minmax(165px, 0.84fr) minmax(190px, 1fr) minmax(165px, 0.84fr)
minmax(175px, 0.94fr);
}
.flow-system-map article {
position: relative;
display: flex;
min-width: 0;
min-height: 116px;
padding: 17px;
border: 1px solid var(--flow-line);
border-radius: 12px;
background: var(--flow-bg);
align-items: center;
gap: 12px;
}
.flow-system-map article > span {
display: grid;
width: 38px;
height: 38px;
flex: 0 0 auto;
border-radius: 9px;
background: var(--flow-accent-soft);
color: var(--flow-accent);
place-items: center;
}
.flow-system-map article strong,
.flow-system-map article small {
display: block;
}
.flow-system-map article strong {
color: var(--flow-text);
font-size: 12px;
font-weight: 690;
}
.flow-system-map article small {
margin-top: 5px;
color: var(--flow-faint);
font-size: 9px;
line-height: 1.5;
}
.flow-system-map__surfaces {
position: relative;
display: grid;
gap: 8px;
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.flow-system-map__surfaces article {
min-height: 74px;
padding: 12px 14px;
}
.flow-system-map__surfaces article > span {
width: 32px;
height: 32px;
}
.flow-system-map > .is-manifest::after,
.flow-system-map__surfaces::after,
.flow-system-map > .is-compiler::after {
position: absolute;
top: 50%;
right: -31px;
color: var(--flow-border-strong);
content: '→';
font-family: var(--flow-mono);
font-size: 17px;
transform: translate(50%, -50%);
}
.flow-system-map__surfaces::after {
right: -31px;
}
.flow-system-map > .is-runtime {
border-color: color-mix(in srgb, var(--flow-accent) 30%, var(--flow-line));
background: var(--flow-accent-soft);
}
.flow-system-map > .is-runtime > span {
background: var(--flow-surface);
}