[data-concept='flow'] .fl path { stroke-linecap: butt; stroke-linejoin: miter; }


[data-concept='flow'] {
  --fs-hero: clamp(3.25rem, -1.25rem + 7.5vw, 5.5rem);
  --fs-line: clamp(2rem, 1.25rem + 2.4vw, 3.5rem);
  --fs-h2: clamp(2.25rem, 1.2rem + 3.4vw, 4.75rem);
  --fs-body: clamp(1.125rem, 1.02rem + .25vw, 1.25rem);
  --line-h: calc(var(--fs-line) * 1.15);
  
  --fs-belief: clamp(1.3125rem, .90625rem + 1.094vw, 2.5rem);
  --fs-beats: clamp(1.125rem, .1625rem + 1.4375vw, 1.5rem);
}


[data-concept='flow'] .hero { align-items: stretch; padding-bottom: 0; }
[data-concept='flow'] .hero-text {
  display: grid; grid-template-rows: auto 1fr; min-height: 100svh; max-width: none;
  padding: clamp(120px, 19svh, 200px) 0 clamp(56px, 11svh, 120px);
}
[data-concept='flow'] .hero-text h1 { max-width: none; font-weight: 500; letter-spacing: -.03em; line-height: .98; }
[data-concept='flow'] .hero .h1-line { white-space: nowrap; }

[data-concept='flow'] .hero .h1-line[data-line='0'] { font-weight: 600; letter-spacing: -.035em; }


[data-concept='flow'] .intro {
  position: relative; overflow: clip;
  padding: clamp(96px, 14svh, 160px) var(--gutter) calc(50svh - 1.2 * var(--fs-belief));
}
[data-concept='flow'] .slot--intro { position: absolute; inset: 0; z-index: 0; }
[data-concept='flow'] .slot--intro svg { display: block; width: 100%; height: 100%; }
[data-concept='flow'] .intro-text { position: relative; z-index: 1; }
[data-concept='flow'] .intro-heading {
  font-size: var(--fs-line); font-weight: 500; letter-spacing: -.025em; line-height: 1.08; color: var(--v-ink); max-width: none;
}
[data-concept='flow'] .intro-line { display: block; }
[data-concept='flow'] :is(.intro-belief, .intro-hook) {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-belief); line-height: 1.2;
  letter-spacing: -.02em; color: var(--v-ink);
}
[data-concept='flow'] .intro-belief { margin-top: clamp(40px, 6svh, 64px); }
[data-concept='flow'] .intro-body {
  margin-top: 28px; max-width: 30em; font-size: var(--fs-beats); line-height: 1.45; color: var(--v-text-primary);
}
[data-concept='flow'] .intro-beat { display: block; }
[data-concept='flow'] .intro-beat[data-echo]:not([data-beat='0']) { margin-top: .6em; }
[data-concept='flow'] .intro-echo { font-weight: 500; }
[data-concept='flow'] .intro-hook { margin-top: 18svh; max-width: 20em; text-wrap: balance; }
@media (min-width: 900px) {
  
  [data-concept='flow'] .intro-text { max-width: var(--intro-max, calc(57.5vw - var(--gutter))); }
  [data-concept='flow'] :is(.intro-line, .intro-belief) { white-space: nowrap; }
}

[data-concept='flow'] .slot--fixed { position: fixed; inset: 0; z-index: 0; }
[data-concept='flow'] .slot--fixed svg { display: block; width: 100%; height: 100%; }
 :where(html:not(.motion-ok)) [data-concept='flow'] .slot--fixed { display: none; } 


[data-concept='flow'] .moment-signoff {
  --mk: calc((1.1em + .72em) * 298 / 266); 
  display: flex; align-items: last baseline; gap: calc(var(--mk) * .27); margin-top: 2.75rem; width: fit-content;
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lede); line-height: 1.1;
  letter-spacing: -.018em; color: var(--v-ink);
}
[data-concept='flow'] .signoff-text { max-width: 11.6em; text-wrap: balance; }
[data-concept='flow'] .signoff-mark { display: block; flex: none; }
[data-concept='flow'] .signoff-mark svg {
  display: block; width: auto; height: var(--mk);
  margin-left: calc(var(--mk) * -20 / 298); margin-bottom: calc(var(--mk) * -16 / 298);
}


[data-concept='flow'] .verge-line { font-weight: 500; letter-spacing: -.025em; color: var(--v-ink); }
[data-concept='flow'] .completion { font-weight: 500; letter-spacing: -.025em; color: var(--v-ink); max-width: 18ch; text-wrap: balance; }
[data-concept='flow'] .moment-body { color: var(--v-text-primary); max-width: 31rem; text-wrap: pretty; }
[data-concept='flow'] .slot--moments { overflow: clip; }


  :where(html.motion-ok) [data-concept='flow'] .slot--moments { margin-bottom: 0; }
  :where(html.motion-ok) [data-concept='flow'] .verge-line { margin-top: -100svh; }


@media (min-width: 900px) {
  :where(html.motion-ok) [data-concept='flow'] .moments { padding-bottom: 8svh; }
}


[data-concept='flow'] .slot[class*='slot--moment-'] { display: none; }

@media (max-width: 899.98px) {
  [data-concept='flow'] .hero-text { padding-top: clamp(96px, 15svh, 140px); }
  [data-concept='flow'] .hero .h1-line { white-space: normal; }
  
  
  [data-concept='flow'] .intro { padding-top: calc(18svh + 144px); padding-bottom: calc(20svh - 1.2 * var(--fs-belief)); }
  [data-concept='flow'] .intro-hook { max-width: var(--intro-hook, 20em); }
  [data-concept='flow'] .intro-heading { font-size: 1.75rem; }
  [data-concept='flow'] .intro-hook { margin-top: 12svh; }
  [data-concept='flow'] .moment-signoff { margin-top: 1.75rem; font-size: 1.25rem; }
  
  [data-concept='flow'] .verge { --line-top: 46svh; }
  [data-concept='flow'] .completion { max-width: 20ch; }
}


  :where(html:not(.motion-ok)) [data-concept='flow'] .slot--moments { display: none; }
  :where(html:not(.motion-ok)) [data-concept='flow'] .slot[class*='slot--moment-'] {
    display: block; position: absolute; top: 12svh; right: var(--gutter); width: min(44vw, 600px); height: 76svh;
  }
  :where(html:not(.motion-ok)) [data-concept='flow'] .slot[class*='slot--moment-'] svg { width: 100%; height: 100%; overflow: hidden; }
  :where(html:not(.motion-ok)) [data-concept='flow'] .moment { min-height: 100svh; }
  
  :where(html:not(.motion-ok)) [data-concept='flow'] .verge-line {
    position: sticky; top: var(--line-top); width: fit-content; padding-bottom: 6px; background: var(--v-ivory);
  }

@media (max-width: 899.98px) {
  :where(html:not(.motion-ok)) [data-concept='flow'] .moment { display: flex; flex-direction: column; }
  :where(html:not(.motion-ok)) [data-concept='flow'] .slot[class*='slot--moment-'] {
    order: 2; position: relative; top: auto; right: auto; width: 100%; height: 40svh; margin-top: 28px;
  }
  :where(html:not(.motion-ok)) [data-concept='flow'] .verge { --line-top: 64px; }
}