/* ==========================================================================
   CommerceNerve - "How it works" flow page (app-flow.html)
   The figures are the same SVG diagrams used in the app-review video. Their classes carry an
   af- prefix and their colours live in --af- tokens on .af-scope, so none of the site's own
   rules (.step, .dot, .badge ...) reach inside them.
   ========================================================================== */

.flow-hero .hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 26px;
}
.flow-hero .hero-chips span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.flow-hero .hero-chips .ic { color: var(--mint); }

/* sticky pill stepper - the legal-page table of contents restyled (same scroll-spy in main.js) */
.flow-layout { display: block; padding-block: 28px 110px; }
.legal-toc.flow-toc {
  top: 82px;
  z-index: 5;
  margin-bottom: 36px;
}
.legal-toc.flow-toc nav {
  display: flex;
  justify-content: center;
  gap: 4px;
  max-height: none;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  overflow-x: auto;
  scrollbar-width: none;
}
.legal-toc.flow-toc nav::-webkit-scrollbar { display: none; }
.legal-toc.flow-toc nav p { display: none; }
.legal-toc.flow-toc a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 7px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--muted);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.legal-toc.flow-toc a span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand);
  font-size: 0.74rem;
  font-weight: 800;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.legal-toc.flow-toc a:hover {
  background: var(--brand-50);
  color: var(--brand);
}
.legal-toc.flow-toc a.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 16px rgba(99, 80, 203, 0.28);
}
.legal-toc.flow-toc a.active span {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.legal-toc.flow-toc a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
@media (max-width: 1100px) {
  .legal-toc.flow-toc nav {
    justify-content: flex-start;
    border-radius: 18px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .legal-toc.flow-toc a, .legal-toc.flow-toc a span { transition: none; }
}

.legal-content.flow-content { max-width: none; }
.flow-content section {
  padding-bottom: 56px;
  margin-bottom: 56px;
}
.flow-content section:last-child { border-bottom: 0; margin-bottom: 0; }
.flow-content h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.flow-intro {
  max-width: 760px;
  margin-bottom: 26px;
}
.flow-figure {
  margin: 0;
  border-radius: var(--radius);
  background: #f4f3fb;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  overflow-x: auto;
}
.flow-figure svg {
  display: block;
  width: 100%;
  min-width: 860px;
  height: auto;
}
.flow-figure svg text { font-family: var(--font); }
.flow-scroll-hint {
  display: none;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--muted);
}
@media (max-width: 900px) {
  .flow-scroll-hint { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .af-scope .af-dot { display: none; }
}

.flow-cta {
  margin-top: 8px;
  padding: 40px;
  border-radius: var(--radius);
  background: var(--dark);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.flow-cta h2 { color: #fff; margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.flow-cta p { color: #c9c8e6; margin: 6px 0 0; }

/* ---------- figure styles (generated from the review-video artifact) ---------- */
.af-scope {
  --af-bg: #f4f3fb;
  --af-card: #ffffff;
  --af-edge: #e1ddf3;
  --af-ink: #17163a;
  --af-soft: #5f5d83;
  --af-brand: #6350cb;
  --af-create: #2f6fdb;
  --af-orders: #0f9b8e;
  --af-shopify: #0b8457;
  --af-netsuite: #1d5fae;
  --af-setup: #2c3270;
  --af-track: #2f6fdb;
  --af-font: var(--font);
}
.af-scope .af-t-title { font-size: 44px; font-weight: 800; fill: var(--af-ink); letter-spacing: -0.4px; }
.af-scope .af-t-title-2 { font-size: 40px; font-weight: 800; fill: var(--af-ink); letter-spacing: -0.4px; }
.af-scope .af-t-sub { font-size: 21px; font-weight: 500; fill: var(--af-soft); }
.af-scope .af-t-trust { font-size: 17px; font-weight: 600; fill: var(--af-soft); }
.af-scope .af-tick { fill: var(--af-shopify); }
.af-scope .af-card { fill: var(--af-card); stroke: var(--af-edge); stroke-width: 2; }
.af-scope .af-hub { fill: var(--af-brand); }
.af-scope .af-t-name { font-size: 30px; font-weight: 800; }
.af-scope .af-t-role { font-size: 17px; font-weight: 600; fill: var(--af-soft); }
.af-scope .af-t-item { font-size: 19px; font-weight: 600; fill: var(--af-ink); }
.af-scope .af-t-hub-name { font-size: 28px; font-weight: 800; fill: #ffffff; }
.af-scope .af-t-hub-role { font-size: 16px; font-weight: 600; fill: #ffffff; opacity: 0.75; }
.af-scope .af-t-hub-item { font-size: 18px; font-weight: 700; fill: #ffffff; }
.af-scope .af-pill-hub { fill: #ffffff; opacity: 0.14; }
.af-scope .af-pill-create { fill: var(--af-create); }
.af-scope .af-pill-orders { fill: var(--af-orders); }
.af-scope .af-divider { stroke: var(--af-edge); stroke-width: 2; }
.af-scope .af-divider-hub { stroke: #ffffff; stroke-opacity: 0.28; stroke-width: 2; }
.af-scope .af-lane { stroke-width: 6; fill: none; }
.af-scope .af-lane.af-sync { stroke: var(--af-brand); }
.af-scope .af-lane.af-create { stroke: var(--af-create); }
.af-scope .af-lane.af-orders { stroke: var(--af-orders); }
.af-scope .af-t-lane { font-size: 17px; font-weight: 700; }
.af-scope .af-t-lane.af-sync { fill: var(--af-brand); }
.af-scope .af-t-lane.af-create { fill: var(--af-create); }
.af-scope .af-t-lane.af-orders { fill: var(--af-orders); }
.af-scope .af-badge.af-sync { fill: var(--af-brand); }
.af-scope .af-badge.af-create { fill: var(--af-create); }
.af-scope .af-badge.af-orders { fill: var(--af-orders); }
.af-scope .af-badge.af-setup { fill: var(--af-setup); }
.af-scope .af-t-badge { font-size: 15px; font-weight: 800; fill: #ffffff; }
.af-scope .af-t-badge-big { font-size: 20px; font-weight: 800; fill: #ffffff; }
.af-scope .af-explain { fill: var(--af-card); stroke: var(--af-edge); stroke-width: 2; }
.af-scope .af-t-ex-title { font-size: 22px; font-weight: 800; fill: var(--af-ink); }
.af-scope .af-t-ex { font-size: 17px; font-weight: 500; fill: var(--af-soft); }
.af-scope .af-dot.af-sync { fill: var(--af-brand); }
.af-scope .af-dot.af-create { fill: var(--af-create); }
.af-scope .af-dot.af-orders { fill: var(--af-orders); }
.af-scope .af-tile { fill: var(--af-card); stroke: var(--af-edge); stroke-width: 2; }
.af-scope .af-t-tile { font-size: 23px; font-weight: 800; }
.af-scope .af-t-tile.af-sync { fill: var(--af-brand); }
.af-scope .af-t-tile.af-create { fill: var(--af-create); }
.af-scope .af-t-tile.af-orders { fill: var(--af-orders); }
.af-scope .af-t-tile.af-setup { fill: var(--af-setup); }
.af-scope .af-t-route { font-size: 15px; font-weight: 700; fill: var(--af-soft); }
.af-scope .af-t-bullet { font-size: 16.5px; font-weight: 600; fill: var(--af-ink); }
.af-scope .af-bullet.af-sync { fill: var(--af-brand); }
.af-scope .af-bullet.af-create { fill: var(--af-create); }
.af-scope .af-bullet.af-orders { fill: var(--af-orders); }
.af-scope .af-bullet.af-setup { fill: var(--af-setup); }
.af-scope .af-t-legend { font-size: 16px; font-weight: 700; fill: var(--af-soft); }
.af-scope .af-note { fill: var(--af-card); stroke: var(--af-edge); stroke-width: 2; }
.af-scope .af-t-note { font-size: 18px; font-weight: 600; fill: var(--af-ink); }
.af-scope .af-shield { fill: var(--af-shopify); }
  @media (prefers-reduced-motion: reduce) { .af-dot { display: none; } }
.af-scope .af-t-counter { font-size: 18px; font-weight: 700; fill: var(--af-soft); letter-spacing: 1px; }
.af-scope .af-t-step-num { font-size: 28px; font-weight: 800; fill: #ffffff; }
.af-scope .af-t-lane-name { font-size: 18px; font-weight: 800; }
.af-scope .af-t-lane-sub { font-size: 14px; font-weight: 600; fill: var(--af-soft); }
.af-scope .af-step { fill: var(--af-card); stroke-width: 2.5; }
.af-scope .af-ghost { fill: none; stroke: var(--af-netsuite); stroke-opacity: 0.55; stroke-width: 2; stroke-dasharray: 8 7; }
.af-scope .af-t-ghost-title { font-size: 18px; font-weight: 800; fill: var(--af-netsuite); }
.af-scope .af-t-step-title { font-size: 17px; font-weight: 800; fill: var(--af-ink); }
.af-scope .af-t-step-line { font-size: 15px; font-weight: 600; fill: var(--af-soft); }
.af-scope .af-flow { stroke-width: 4; fill: none; stroke-linejoin: round; }
.af-scope .af-flow.af-sync { stroke: var(--af-brand); }
.af-scope .af-flow.af-create { stroke: var(--af-create); }
.af-scope .af-flow.af-orders { stroke: var(--af-orders); }
.af-scope .af-flow.af-track { stroke: var(--af-track); }
.af-scope .af-t-note-title { font-size: 19px; font-weight: 800; fill: var(--af-ink); }
.af-scope .af-t-colhead { font-size: 18px; font-weight: 800; letter-spacing: 0.4px; }
.af-scope .af-t-link-k { font-size: 17px; font-weight: 700; fill: var(--af-soft); }
.af-scope .af-t-link-v { font-size: 22px; font-weight: 800; fill: var(--af-ink); }
.af-scope .af-linkkey.af-sync { fill: var(--af-brand); }
.af-scope .af-linkkey.af-create { fill: var(--af-create); }
.af-scope .af-t-link-row { font-size: 13px; font-weight: 800; letter-spacing: 1.6px; fill: #ffffff; opacity: 0.8; }
.af-scope .af-t-link-keyk { font-size: 16px; font-weight: 700; fill: #ffffff; opacity: 0.85; }
.af-scope .af-t-link-keyv { font-size: 23px; font-weight: 800; fill: #ffffff; }
.af-scope .af-link { stroke-width: 4; fill: none; stroke-dasharray: 2 9; stroke-linecap: round; }
.af-scope .af-link.af-sync { stroke: var(--af-brand); }
.af-scope .af-link.af-create { stroke: var(--af-create); }
.af-scope .af-linkdot.af-sync { fill: var(--af-brand); }
.af-scope .af-linkdot.af-create { fill: var(--af-create); }
.af-scope .af-chip-example { fill: #ece9f8; }
.af-scope .af-t-example { font-size: 14px; font-weight: 700; fill: var(--af-soft); }
.af-scope .af-journey-line { stroke: var(--af-brand); stroke-width: 4; stroke-dasharray: 3 10; stroke-linecap: round; fill: none; }
.af-scope .af-journey-node { fill: var(--af-brand); }
.af-scope .af-journey-num { fill: var(--af-ink); }
.af-scope .af-t-journey-title { font-size: 21px; font-weight: 800; fill: var(--af-ink); }
.af-scope .af-page-tag { fill: #ece9f8; }
.af-scope .af-t-page-tag { font-size: 14px; font-weight: 700; fill: #4a39a8; }
.af-scope .af-t-topic { font-size: 19px; font-weight: 800; fill: var(--af-ink); }