/* Landing-page explainer. Reuses the site's existing palette and typography. */
.flow-journey { padding:96px 0; background:var(--navy-2); scroll-margin-top:90px; }
.fj-heading { display:grid; grid-template-columns:1.2fr 1fr; align-items:end; gap:48px; margin-bottom:40px; }
.fj-heading .section-sub { max-width:440px; margin-bottom:4px; }
.fj-panel { position:relative; isolation:isolate; display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.11); border-radius:20px; background:var(--navy); box-shadow:0 24px 64px rgba(0,0,0,.16); }
.fj-toolbar { order:0; }
.fj-diagram { order:2; }
.fj-story { order:1; }
.fj-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 28px; border-bottom:1px solid rgba(255,255,255,.08); }
.fj-toolbar-title { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:14px; font-weight:650; }
.fj-wordmark { color:var(--red-dim); font-weight:800; font-size:20px; letter-spacing:-.04em; }
.fj-sample { color:var(--gray-400); font-size:12px; font-weight:400; }
.fj-controls { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.fj-reset { min-height:44px; border:0; background:transparent; color:var(--gray-200); padding:10px 6px; font:500 13px/1.4 var(--font); cursor:pointer; }
.fj-reset:hover { color:var(--white); }
.fj-reset:disabled { opacity:.4; cursor:default; }
.fj-status { display:flex; align-items:center; gap:7px; color:var(--gray-400); font-size:12px; font-weight:500; }
.fj-status::before { content:''; width:6px; height:6px; flex-shrink:0; border-radius:50%; background:currentColor; }
.fj-panel[data-state="running"] .fj-status { color:var(--red-dim); }
.fj-panel[data-state="waiting"] .fj-status { color:var(--gold); }
.fj-panel[data-state="complete"] .fj-status { color:var(--green); }
.fj-panel[data-state="waiting"] .fj-play { background:var(--gold); color:var(--navy); }
.fj-play { min-width:125px; justify-content:center; padding:10px 18px; min-height:44px; flex-shrink:0; }
.fj-play svg { width:14px; height:14px; }
.fj-panel [hidden] { display:none !important; }
.fj-diagram { position:relative; padding:28px; }
.fj-wires { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible; }
.fj-wire { fill:none; stroke:rgba(255,255,255,.3); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.fj-wire--config { stroke-dasharray:4 5; }
.fj-wire--call { stroke:rgba(131,185,245,.35); }
.fj-wire--active { stroke:var(--red-dim); stroke-width:2; }
.fj-wire--call.fj-wire--active { stroke:#83b9f5; }
.fj-flight { fill:var(--red); filter:drop-shadow(0 0 5px rgba(250,36,60,.6)); }
.fj-flight--call { fill:#b6d8ff; filter:none; }
.fj-build { display:grid; grid-template-columns:1.25fr 1fr 1fr; align-items:stretch; gap:32px; margin-bottom:32px; position:relative; z-index:1; }
.fj-author { align-self:center; font-size:14px; color:var(--gray-200); }
.fj-kicker { display:block; color:var(--gray-400); font-size:12px; font-weight:650; line-height:1.5; letter-spacing:.07em; text-transform:uppercase; margin-bottom:8px; }
.fj-library,.fj-plugin { padding:12px 16px; border:1px solid rgba(255,255,255,.12); background:var(--navy-2); border-radius:10px; font-size:14px; transition:border-color .25s,background .25s; }
.fj-library,.fj-plugin,.fj-component,.fj-event { overflow-wrap:anywhere; }
.fj-library strong,.fj-plugin strong { display:block; font-size:14px; font-weight:650; }
.fj-library span,.fj-plugin span { display:block; font-size:12px; color:var(--gray-400); margin-top:2px; }
.fj-plugin { border-style:dashed; }
.fj-map { display:grid; grid-template-columns:minmax(84px,.66fr) repeat(3,minmax(0,1fr)) minmax(84px,.66fr); grid-template-rows:auto minmax(146px,auto) auto auto; column-gap:24px; row-gap:24px; position:relative; z-index:1; }
.fj-flow-label { grid-column:2 / 5; grid-row:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding-bottom:10px; border-bottom:1px solid rgba(250,36,60,.3); }
.fj-flow-label strong { font-size:12px; letter-spacing:.09em; color:var(--red-dim); }
.fj-flow-label span { font-size:12px; color:var(--gray-400); }
.fj-start,.fj-step,.fj-finish { min-width:0; grid-row:2 / span 3; display:grid; grid-template-rows:subgrid; }
.fj-start { grid-column:1; }
.fj-step--extract { grid-column:2; }
.fj-step--validate { grid-column:3; }
.fj-step--post { grid-column:4; }
.fj-finish { grid-column:5; }
.fj-unit { position:relative; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:16px; border:1px solid rgba(255,255,255,.15); border-radius:12px; background:var(--navy-3); transition:border-color .25s,background .25s,box-shadow .25s; }
.fj-unit strong { font-size:16px; line-height:1.3; font-weight:700; }
.fj-unit-type { font-size:12px; color:var(--gray-400); line-height:1.35; }
.fj-unit-value { color:var(--gray-200); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.fj-unit-number { color:var(--red-dim); font-size:12px; font-weight:700; letter-spacing:.05em; }
.fj-endpoint { position:relative; display:flex; flex-direction:column; justify-content:center; gap:7px; padding:14px 12px; border:1px solid rgba(255,255,255,.15); border-radius:12px; background:var(--navy-2); overflow-wrap:anywhere; }
.fj-endpoint.is-active { border-color:var(--red-dim); }
.fj-endpoint.is-done { border-color:rgba(82,196,26,.4); }
.fj-endpoint.is-active .fj-endpoint-mark { color:var(--red-dim); border-color:var(--red-dim); box-shadow:0 0 0 4px rgba(250,36,60,.08); }
.fj-endpoint.is-active strong { color:var(--white); }
.fj-endpoint strong { font-size:15px; line-height:1.35; font-weight:650; }
.fj-endpoint code { color:var(--gray-400); font:12px/1.5 var(--font); overflow-wrap:anywhere; }
.fj-endpoint-mark { display:flex; align-items:center; justify-content:center; width:36px; height:36px; color:var(--gray-200); border-radius:9px; background:var(--navy-3); border:1px solid rgba(255,255,255,.12); }
.fj-endpoint-mark svg { width:18px; height:18px; }
.fj-call { display:contents; }
.fj-gate { position:relative; align-self:center; justify-self:center; display:flex; align-items:center; gap:6px; max-width:100%; padding:5px 9px; border:1px solid rgba(255,255,255,.12); border-radius:6px; color:var(--gray-200); background:var(--navy); font-size:12px; line-height:1.5; }
.fj-gate svg { flex-shrink:0; width:13px; height:13px; }
.fj-component { padding:14px 12px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:var(--navy-2); transition:border-color .25s,background .25s; }
.fj-component strong { display:block; font-size:14px; font-weight:650; }
.fj-component span { display:block; font-size:12px; color:var(--gray-400); margin-top:5px; }
.fj-side-label { align-self:center; color:var(--gray-400); font-size:12px; line-height:1.5; }
.fj-side-label strong { display:block; margin-bottom:6px; color:var(--gray-200); font-size:12px; font-weight:650; }
.fj-bindings { grid-row:2 / span 2; align-self:center; font-size:12px; color:var(--gray-400); line-height:1.65; }
.fj-bindings strong { display:block; color:var(--gray-200); font-weight:600; }
.fj-data { position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; border-top:1px solid rgba(255,255,255,.08); padding-top:22px; margin-top:28px; font-size:14px; }
.fj-data-label { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-400); }
.fj-data-value { color:var(--gray-200); overflow-wrap:anywhere; }
.fj-evidence { position:relative; z-index:1; display:grid; grid-template-columns:1.12fr repeat(4,1fr); align-items:center; gap:12px; padding-top:22px; margin-top:22px; border-top:1px solid rgba(255,255,255,.08); }
.fj-evidence-heading strong { display:block; font-size:14px; font-weight:650; }
.fj-evidence-heading span { display:block; font-size:12px; color:var(--gray-400); }
.fj-event { display:flex; flex-direction:column; gap:4px; padding:10px 12px; background:var(--navy-2); border-left:2px solid rgba(255,255,255,.14); border-radius:0 6px 6px 0; font-size:12px; color:var(--gray-400); transition:background .3s,border-color .3s,color .3s; }
.fj-event strong { font-size:12px; font-weight:600; }
.fj-event-state { font-size:11px; letter-spacing:.02em; }
.fj-event.is-recorded .fj-event-state { color:var(--green); }
.fj-event.is-recorded .fj-event-state::before { content:'✓ '; }
.fj-event.is-recorded { border-color:var(--green); color:var(--gray-200); background:rgba(82,196,26,.06); }
.fj-story { padding:20px 28px 16px; background:rgba(255,255,255,.02); border-bottom:1px solid rgba(255,255,255,.08); }
.fj-caption-row { display:flex; gap:20px; align-items:baseline; margin-bottom:16px; min-height:52px; }
.fj-approval-note { margin-bottom:16px; padding:12px 16px; border-left:2px solid var(--gold); border-radius:0 6px 6px 0; background:rgba(250,173,20,.07); color:var(--gray-200); font-size:13px; line-height:1.6; }
.fj-counter { color:var(--red-dim); font-size:14px; font-variant-numeric:tabular-nums; flex-shrink:0; }
.fj-captions { font-size:16px; color:var(--gray-200); line-height:1.6; }
.fj-chapters { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px; list-style:none; }
.fj-chapter { display:block; position:relative; width:100%; border:0; border-top:2px solid rgba(255,255,255,.13); background:transparent; color:var(--gray-400); font:500 14px/1.4 var(--font); text-align:left; padding:12px 0 4px; min-height:44px; cursor:pointer; overflow-wrap:anywhere; }
.fj-chapter:hover { color:var(--white); border-color:rgba(255,255,255,.4); }
.fj-chapter[aria-pressed="true"] { color:var(--white); border-color:var(--red); }
.fj-chapter[aria-pressed="true"]::before { content:''; position:absolute; top:-2px; left:0; width:var(--fj-progress,0%); height:2px; background:var(--red-dim); }
.fj-chapter.is-past { border-color:rgba(240,86,93,.5); }
.fj-chapter:disabled { color:var(--gray-400); opacity:.45; cursor:not-allowed; }
.fj-chapter:disabled:hover { border-color:rgba(255,255,255,.13); }
.fj-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 28px; margin-top:22px; color:var(--gray-400); font-size:13px; }
.fj-footer a { color:var(--gray-200); text-decoration:none; }
.fj-footer a:hover { color:var(--white); text-decoration:underline; }
.flow-journey button:focus-visible,.flow-journey a:focus-visible { outline:2px solid var(--red-dim); outline-offset:5px; }
.fj-unit.is-active,.fj-component.is-active,.fj-plugin.is-active,.fj-library.is-active { border-color:var(--red-dim); background:var(--navy-4); box-shadow:0 0 0 1px rgba(250,36,60,.08); }
.fj-gate.is-active { border-color:rgba(82,196,26,.5); color:var(--gray-50); }
.fj-unit.is-waiting { border-color:var(--gold); }
.fj-unit.is-waiting .fj-unit-value { color:var(--gold); }
.fj-unit.is-approved .fj-unit-value { color:var(--green); }
.fj-unit.is-done { border-color:rgba(82,196,26,.4); }
.fj-unit.is-done .fj-unit-number::after { content:' ✓'; color:var(--green); }
.fj-endpoint.is-done .fj-endpoint-mark { color:var(--green); border-color:rgba(82,196,26,.4); }
.fj-finish.is-complete .fj-endpoint-mark { color:var(--green); border-color:rgba(82,196,26,.4); }
.fj-build.is-active .fj-author { color:var(--white); }
@media (max-width:1050px) {
  .fj-diagram { padding:24px 20px; }
  .fj-map { column-gap:16px; grid-template-columns:minmax(68px,.58fr) repeat(3,minmax(0,1fr)) minmax(68px,.58fr); }
  .fj-unit { padding:12px; }
  .fj-evidence { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .fj-evidence-heading { grid-column:1 / -1; display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; }
}
/* Keep the full diagram on desktop; smaller screens use the platform link. */
.fj-mobile-link { display:none !important; }
@media (max-width:1023px) {
  .flow-journey, .fj-desktop-link, .sections-sidebar a[data-section="how-it-works"] { display:none !important; }
  .fj-mobile-link { display:inline-flex !important; }
}
@media (prefers-reduced-motion:reduce) {
  .flow-journey *, .flow-journey *::before, .flow-journey *::after { animation:none !important; transition:none !important; scroll-behavior:auto; }
  .fj-flight { display:none; }
}

/* Temporarily hidden; remove this override to restore the desktop simulation. */
.flow-journey,
.fj-desktop-link,
.sections-sidebar a[data-section="how-it-works"] { display:none !important; }
.fj-mobile-link { display:inline-flex !important; }