.brief-introduction { margin-bottom: 22px; }
.intro-heading { margin-bottom: 24px; gap: 24px; }
.context-flow {
  display: grid;
  grid-template-columns: minmax(240px, 1.15fr) minmax(70px, .65fr) 126px minmax(48px, .55fr) minmax(250px, 1fr);
  align-items: center;
  min-height: 260px;
  padding: 10px 18px 18px 0;
}
.flow-inputs { display: grid; gap: 32px; }
.flow-input { display: flex; align-items: center; gap: 17px; min-height: 86px; position: relative; }
.brief-introduction .flow-index { align-self: flex-start; padding-top: 10px; color: var(--paper-blue); font: .6875rem/1.5 var(--mono); }
.flow-input h3 { font: 400 1.875rem/1.16 var(--font-display); letter-spacing: -.015em; }
.flow-input p { margin-top: 8px; color: var(--muted); font-size: .8125rem; line-height: 1.55; }
.input-endpoint { width: 5px; height: 5px; position: absolute; right: -2px; top: calc(50% - 2px); border-radius: 50%; background: var(--paper-blue); }
.flow-merge, .flow-output-line { display: block; width: 100%; height: 204px; overflow: visible; color: var(--paper-blue); }
.context-flow svg path { vector-effect: non-scaling-stroke; stroke-width: 1; fill: none; }
.flow-track { stroke: var(--line-strong); }
.flow-ink { stroke: var(--paper-blue); opacity: .65; }
.flow-resonner { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; height: 204px; }
.flow-mark { display: block; width: 72px; height: 72px; margin-top: 66px; flex-shrink: 0; }
.flow-mark img { display: block; width: 100%; height: 100%; }
.flow-mark .flow-logo-dark { display: none; }
[data-theme="dark"] .flow-mark .flow-logo-light { display: none; }
[data-theme="dark"] .flow-mark .flow-logo-dark { display: block; }
.flow-name { margin-top: 9px; font-size: 1.125rem; letter-spacing: -.06em; }
.flow-caption { margin-top: 3px; font-size: .625rem; color: var(--muted); white-space: nowrap; }
.flow-result { --intro-paper: url('/landing/paper/brief-folded-light.webp'); position: relative; isolation: isolate; min-height: 238px; padding: 26px 30px 23px; transform: rotate(-2deg); }
[data-theme="dark"] .flow-result { --intro-paper: url('/landing/paper/brief-folded-dark.webp'); }
.flow-result::before { content: ""; position: absolute; z-index: -1; inset: 0; border: 32px solid transparent; border-image: var(--intro-paper) 250 fill / 32px / 0 round; mix-blend-mode: var(--brief-paper-blend); }
.flow-result .mini-label { color: var(--paper-blue); font-size: .625rem; letter-spacing: .035em; }
.flow-result h3 { margin: 10px 0 13px; font: 400 2.0625rem/1.03 var(--font-display); letter-spacing: -.025em; }
.flow-result h3 em { font-style: italic; color: var(--paper-blue); }
.flow-result p { color: var(--muted); font-size: .8125rem; line-height: 1.65; }
.flow-result p span { display: block; }
.result-registration { position: absolute; bottom: 18px; right: 20px; color: var(--paper-blue); font: .875rem/1 var(--mono); }
.example-handoff { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 23px; }
.example-handoff p { color: var(--muted); font-size: .875rem; line-height: 1.65; }
.example-handoff .mini-label { display: block; font-size: .6875rem; margin-bottom: 7px; color: var(--paper-blue); }
.example-handoff strong { font-weight: 500; color: var(--foreground); }
.intro-product-link { font-size: .8125rem; max-width: 300px; }
.handoff-break { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .context-flow.is-arriving .flow-ink { stroke-dasharray: 1; animation: context-line 1000ms cubic-bezier(.2,.65,.3,1) both; }
  .context-flow.is-arriving .flow-output-line .flow-ink { animation-delay: 450ms; }
  .context-flow.is-arriving .flow-result { animation: context-paper 800ms cubic-bezier(.2,.65,.3,1) 700ms both; }
  @keyframes context-line { from { stroke-dashoffset: 1; opacity: .2; } to { stroke-dashoffset: 0; opacity: .65; } }
  @keyframes context-paper { from { opacity: .45; transform: translateY(7px) rotate(0); } to { opacity: 1; transform: translateY(0) rotate(-2deg); } }
}

@media (max-width: 1050px) and (min-width: 701px) {
  .context-flow { grid-template-columns: minmax(180px, 1fr) minmax(24px, .25fr) 96px minmax(24px, .25fr) minmax(215px, 1fr); padding-right: 8px; }
  .flow-input { gap: 12px; }
  .flow-input h3 { font-size: 1.625rem; }
  .flow-input p { font-size: .75rem; max-width: 160px; }
  .flow-mark { width: 62px; height: 62px; margin-top: 71px; }
  .flow-result { padding-inline: 24px; }
  .flow-result h3 { font-size: 1.875rem; }
  .intro-heading { align-items: flex-start; }
  .example-handoff { align-items: flex-end; }
  .intro-product-link { max-width: 210px; }
  .handoff-break { display: initial; }
}

@media (max-width: 700px) {
  .intro-heading { flex-direction: column; gap: 4px; margin-bottom: 24px; }
  .intro-heading .eyebrow { font-size: .6875rem; }
  .intro-heading h2 { font-size: 2.125rem; }
  .context-flow { grid-template-columns: minmax(0, 1fr); padding: 0; margin-inline: 0; }
  .flow-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .flow-input { align-items: flex-start; flex-direction: column; gap: 5px; padding-bottom: 18px; border-bottom: 1px solid var(--line-strong); min-height: 116px; }
  .brief-introduction .flow-index { padding-top: 0; }
  .flow-input h3 { font-size: 1.5rem; }
  .flow-input p { font-size: .75rem; margin-top: 7px; }
  .input-endpoint { top: auto; bottom: -3px; right: calc(50% - 2px); }
  .flow-merge { display: none; }
  .flow-resonner { height: 66px; flex-direction: row; justify-content: center; gap: 9px; margin-top: 16px; padding: 12px 0; }
  .flow-resonner::before { content: ""; position: absolute; inset: -16px 25% auto; height: 16px; border-left: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
  .flow-mark { width: 36px; height: 36px; margin: 0; }
  .flow-name { margin-top: 0; font-size: 1rem; }
  .flow-caption { display: none; }
  .flow-output-line { display: none; }
  .flow-result { width: min(100%, 310px); min-height: 135px; justify-self: center; padding: 17px 27px; }
  .flow-result::after { content: ""; position: absolute; width: 1px; height: 12px; background: var(--paper-blue); left: 50%; top: -12px; opacity: .45; }
  .flow-result h3 { font-size: 1.75rem; margin-block: 9px; }
  .flow-result h3 br { display: none; }
  .flow-result p { font-size: .75rem; }
  .flow-result p span { display: inline; }
  .example-handoff { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 25px; padding-top: 18px; }
  .example-handoff p { font-size: .8125rem; }
  .handoff-break { display: initial; }
  .intro-product-link { display: none; }
}