/* /flow/ : the Flow add-on page. Everything here is prefixed fl- and only used by tools/pages/flow.html. */

/* calls to action: left-aligned under the hero, centred under the video */
.fl-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 30px; }
.page-hero .note { margin-top: 16px; }
.fl-cta-demo { justify-content: center; margin-top: 34px; }
.fl-cta-end { margin-top: 48px; }

/* sections */
.fl-sec { max-width: 1180px; margin: 0 auto; padding: 120px 24px 0; scroll-margin-top: 70px; }
.fl-sec > .sec-head .sec-lede { max-width: 680px; }
.fl-steps { margin-top: 40px; }
.fl-steps .card { background: hsl(var(--card)); }
.fl-n { margin: 0 0 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 600 13px 'JetBrains Mono', monospace; background: hsl(var(--primary) / .14); color: hsl(var(--primary)); }
.fl-sec > .note { margin-top: 56px; }

/* feature blocks: words beside one real still, alternating sides */
.fl-feats { display: grid; gap: 88px; margin-top: 64px; }
.fl-feat { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 48px; align-items: center; }
.fl-feat.flip { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); }
.fl-feat.flip .fl-copy { order: 2; }
.fl-feat.wide { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.fl-feat.wide .fl-copy { max-width: 760px; }
.fl-feat-text { grid-template-columns: minmax(0, 1fr); }
.fl-feat-text .fl-copy { max-width: 760px; padding: 28px 30px; border-radius: 20px; background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .07); }
.fl-copy .fl-tab { margin: 0 0 12px; font: 500 12px/1 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: hsl(198 93% 70%); }
.fl-copy h3 { margin: 0 0 14px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.03em; }
.fl-copy p { margin: 0 0 14px; color: hsl(var(--muted)); font-size: 16.5px; line-height: 1.65; }
.fl-copy p em { color: hsl(var(--fg)); font-style: normal; font-weight: 500; }
.fl-copy .note { margin-top: 18px; font-size: 13.5px; }
.fl-feat .still figcaption em { color: hsl(var(--fg)); font-style: normal; }

/* capacity */
.fl-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: center; padding: 44px 44px 40px; border-radius: 24px; background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .07), 0 0 80px -30px hsl(var(--blue) / .35); }
.fl-cap h2 { margin: 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.035em; }
.fl-cap-big { max-width: 46ch; margin: 18px 0 0; font-size: clamp(20px, 2vw, 25px); line-height: 1.4; letter-spacing: -0.015em; color: hsl(var(--fg)); }
.fl-cap .note { margin-top: 16px; max-width: 62ch; }
.fl-cap-cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 200px; }
.fl-cap-cta .btn { justify-content: center; }

/* faq */
.fl-faq { max-width: 860px; margin-top: 36px; border-top: 1px solid hsl(0 0% 100% / .08); }
.fl-faq details { border-bottom: 1px solid hsl(0 0% 100% / .08); }
.fl-faq summary { position: relative; list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.fl-faq summary::-webkit-details-marker { display: none; }
.fl-faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid hsl(var(--muted)); border-bottom: 2px solid hsl(var(--muted)); transform: rotate(45deg); transition: transform .3s var(--spring), border-color .2s; }
.fl-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; border-color: hsl(var(--primary)); }
.fl-faq summary:hover { color: hsl(var(--primary)); }
.fl-faq summary:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; border-radius: 6px; }
.fl-faq details p { margin: 0 0 14px; max-width: 70ch; color: hsl(var(--muted)); font-size: 16px; line-height: 1.7; }
.fl-faq details p:last-child { margin-bottom: 22px; }

@media (max-width: 980px) {
  .fl-sec { padding-top: 96px; }
  .fl-feats { gap: 64px; margin-top: 48px; }
  .fl-feat, .fl-feat.flip { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .fl-feat.flip .fl-copy { order: 0; }
  .fl-cap { grid-template-columns: minmax(0, 1fr); padding: 32px 26px 30px; }
  .fl-cap-cta { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .fl-cap-cta .btn { justify-content: flex-start; }
}
@media (max-width: 680px) {
  .fl-sec { padding-top: 80px; }
  .fl-faq summary { font-size: 17px; }
  .fl-feat-text .fl-copy { padding: 22px 20px; }
}

/* phones: keep the console text readable by letting the screenshot scroll sideways inside its own frame */
@media (max-width: 680px) {
  .fl-feat .still { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fl-feat .still img { width: 640px; max-width: none; }
  .fl-feat.wide .still img { width: 860px; }
  .fl-feat .still figcaption { position: sticky; left: 0; width: calc(100vw - 48px); }
}