/* #flows: "Test the flows that matter". The v1 section Jan liked, carried over 1:1 and polished:
 * equal plate and body rows on desktop (subgrid), the support card solid white instead of faded,
 * and one backed number in the edge-case strip (Study A retest). Uses base.css .card .tc .edge .ev. */

/* ---------- Cards ---------- */
#flows .tests{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
#flows .tc-art{display:flex;align-items:center;justify-content:center}
#flows .tc-body{display:flex;flex-direction:column;flex:1 1 auto}

/* line-art parts (same values as v1) */
#flows .p-line{fill:none;stroke:#e3e9f0;stroke-width:1.5}
#flows .p-scr{fill:#fff;stroke:#dfe5ec;stroke-width:1.2}
#flows .p-bar{fill:#eef2f6}

/* Support card: smaller column, quieter shadow, but solid white and full-strength text */
#flows .tc.is-support{background:#fff;box-shadow:0 1px 2px rgba(12,21,41,.04),0 10px 26px -22px rgba(12,21,41,.16)}
#flows .tc.is-support .tc-art{background:radial-gradient(110% 100% at 0% 0%,var(--tint),transparent 62%),linear-gradient(180deg,#fff,#fbfcfd)}
#flows .tc.is-support h3{font-size:19px}
#flows .tc .ev{display:inline-flex;width:fit-content}

/* Desktop: plates share one height and bodies start on one line */
@supports (grid-template-rows:subgrid){
  @media (min-width:1081px){
    #flows .tests{grid-template-rows:auto 1fr}
    #flows .tc{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
  }
}

/* ---------- Edge cases strip ---------- */
#flows .edge{display:grid;grid-template-columns:250px minmax(0,1fr);align-items:center;gap:14px 28px}
#flows .edge-h{display:flex;flex-direction:column;gap:4px;padding-right:28px;border-right:1px solid var(--line-soft)}
#flows .edge-h b{font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.01em}
#flows .edge-fact{font-size:13px;line-height:1.55;color:var(--body)}
#flows .edge-fact strong{font-weight:600;color:var(--red-ink)}
#flows .edge-fact a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:#cfd6df;text-underline-offset:3px;white-space:nowrap;transition:text-decoration-color .2s}
#flows .edge-fact a:hover{text-decoration-color:var(--ink)}

/* ---------- Motion: the plates play their process once the card is revealed, then hold.
 * Transitions only, so the drawn end state is the default without the shell, without JS
 * and with reduced motion. ---------- */
#flows .p-pop,#flows .p-flow,#flows .p-drop{transform-box:fill-box;transform-origin:50% 50%;
  transition:opacity .45s ease calc(var(--rd,0s) + .35s + var(--i,0) * .14s),transform .55s var(--spring) calc(var(--rd,0s) + .35s + var(--i,0) * .14s)}
#flows:is(.motion *) .rv:not(.is-in) .p-pop{opacity:0;transform:scale(.55)}
#flows:is(.motion *) .rv:not(.is-in) .p-flow{opacity:0;transform:translateX(-14px) scale(.6)}
#flows:is(.motion *) .rv:not(.is-in) .p-drop{opacity:0;transform:translateY(-12px) scale(.6)}
#flows .edge li{transition:opacity .35s ease calc(var(--rd,0s) + .25s + var(--k,0) * 70ms),transform .45s var(--spring) calc(var(--rd,0s) + .25s + var(--k,0) * 70ms)}
#flows:is(.motion *) .edge:not(.is-in) li{opacity:0;transform:translateX(-8px)}

/* ---------- Tablet ---------- */
@media (max-width:1080px){
  #flows .tests{grid-template-columns:1fr 1fr}
  #flows .tc.is-support{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  #flows .tc.is-support .tc-art{border-bottom:0;border-right:1px solid var(--line-soft)}
  #flows .tc.is-support .tc-body{justify-content:center}
}
@media (max-width:899px){
  #flows .edge{grid-template-columns:1fr;gap:14px}
  #flows .edge-h{padding-right:0;padding-bottom:14px;border-right:0;border-bottom:1px solid var(--line-soft)}
}

/* ---------- Phone ---------- */
@media (max-width:640px){
  #flows .sec-head{margin-bottom:32px}
  #flows .tests{grid-template-columns:1fr;gap:14px}
  #flows .tc.is-support{display:flex;flex-direction:column}
  #flows .tc.is-support .tc-art{border-right:0;border-bottom:1px solid var(--line-soft)}
  #flows .tc h3,#flows .tc.is-support h3{font-size:19px}
  #flows .edge ul{gap:8px 6px}
}

@media (prefers-reduced-motion:reduce){
  #flows .p-pop,#flows .p-flow,#flows .p-drop,#flows .edge li{opacity:1!important;transform:none!important}
}

#flows .fq{margin-top:20px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;padding:40px;border-radius:20px;background:#fff;border:1px solid #e6ebf1;box-shadow:var(--sh);background-image:radial-gradient(90% 120% at 100% 0%,rgba(91,185,140,.09),transparent 60%)}
#flows .fq-copy h3{margin-top:12px;font-size:clamp(24px,1.3vw + 14px,32px);font-weight:600;line-height:1.2;letter-spacing:-.03em}
#flows .fq-copy>p{margin-top:12px;font-size:16px;line-height:1.65;color:var(--body)}
#flows .fq-tag{display:inline-block;padding:2px 10px;border:1px dashed #c5cdd8;border-radius:999px;font-size:12.5px;font-style:italic;vertical-align:1px}
#flows .fq-steps{margin:22px 0 26px;display:grid;gap:14px;counter-reset:s}
#flows .fq-steps li{counter-increment:s;position:relative;padding-left:40px;font-size:15px;line-height:1.55;color:var(--body)}
#flows .fq-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;color:#fff;background:var(--ink)}
#flows .fq-steps b{color:var(--ink);font-weight:600}
#flows .fq-win{border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-lg);overflow:hidden}
#flows .fq-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;background:var(--soft);border-bottom:1px solid var(--line-soft)}
#flows .fq-bar i{width:9px;height:9px;border-radius:50%;background:#dfe5ec}
#flows .fq-bar span{margin-left:10px;font-size:12.5px;font-weight:500;color:var(--body)}
#flows .fq-bar em{margin-left:auto;font-size:12px;font-style:normal;color:var(--muted)}
#flows .fq-in{padding:22px 24px 24px}
#flows .fq-top{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
#flows .fq-q{font-size:17px;font-weight:600;line-height:1.4;letter-spacing:-.01em}
#flows .fq-v{flex:none;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.04em;background:color-mix(in srgb,var(--orange) 20%,#fff);color:var(--orange-ink)}
#flows .fq-sub{margin-top:6px;font-size:13px;color:var(--muted)}
#flows .fq-bars{margin-top:18px;display:grid;gap:10px}
#flows .fq-bars div{display:grid;grid-template-columns:52px 1fr 40px;align-items:center;gap:10px;font-size:13.5px;color:var(--body)}
#flows .fq-bars i{display:block;height:12px;border-radius:6px;background:var(--line-soft);position:relative;overflow:hidden}
#flows .fq-bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:6px;background:var(--c)}
#flows .fq-bars b{text-align:right;color:var(--ink);font-weight:600}
#flows .fq-people{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
#flows .fq-p{display:flex;gap:10px;padding:12px;border-radius:12px;background:var(--soft);border:1px solid var(--line-soft)}
#flows .fq-p>span{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;color:#fff;background:var(--c)}
#flows .fq-p p{font-size:13.5px;line-height:1.5;color:var(--body)}
#flows .fq-p b{display:block;font-size:12.5px;color:var(--ink);font-weight:600;margin-bottom:2px}
#flows .fq-why{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:14px;line-height:1.55;color:var(--body)}
#flows .fq-why b{color:var(--ink)}
@media (max-width:1080px){#flows .fq{grid-template-columns:1fr;gap:32px;padding:30px}}
@media (max-width:640px){#flows .fq{padding:22px 18px}#flows .fq-people{grid-template-columns:1fr}#flows .fq-top{flex-direction:column;gap:10px}}

#flows .tc-body{display:flex;flex-direction:column}
#flows .tc-cta{margin-top:auto;align-self:flex-start}
#flows .tc-body>p:first-of-type~p{margin-bottom:22px}

#flows{padding-top:80px}

/* ---------- Phones (21 Oct 2026): the three use cases become one swipe row, the next card peeks in ---------- */
@media (max-width:640px){
  #flows{padding-top:var(--sec)}
  #flows .sec-head{margin-bottom:20px}
  #flows .tests{display:flex;gap:12px;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 18px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  #flows .tests::-webkit-scrollbar{display:none}
  #flows .tc{flex:0 0 min(300px,calc(100% - 32px));scroll-snap-align:start}
  #flows .tc-body{padding:16px 18px 20px}
  #flows .tc h3{margin-top:8px;font-size:18px}
  #flows .tc p{margin-top:6px;font-size:14.5px;line-height:1.6}
  #flows .tc-body>p:first-of-type~p{margin-bottom:16px}
  #flows .tc-cta{max-width:100%;height:auto;min-height:40px;padding:9px 16px;font-size:13.5px;line-height:1.3;white-space:normal}
}