/* Economy Flow scroll story. Uses the app's light tokens (landing.css :root) plus the two NB colors the story needs. The stage is sticky inside a tall scroller;
   nothing locks the viewport. Node/edge classes follow economy-flow-app/app/screens/rank.css 17–25. JS owns every opacity. */
:root { --nb-teal: #33B8AF; --nb-purple: #8261A8; }
.story-stage { position: relative; z-index: 1; height: calc(15 * 100vh); padding: 0; background: var(--bg); }   /* z-index 1 so the demo slides up over the opening's stacked cards (:2019); no section padding, so the scene is pinned from beat 0's first frame to the last beat's last (the 96px let it slide at both ends) */
.story-pin { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; overflow: hidden; will-change: transform; }
.story-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.story-svg .e { fill: none; stroke: var(--line); stroke-width: 1.1; }
.story-svg .e.on { stroke: var(--accent); stroke-width: 2.2; }
.story-svg .e.mine { stroke: var(--held); stroke-width: 2; }
.story-svg .e.broken { stroke: var(--gap); stroke-width: 2; stroke-dasharray: 7 6; }
.story-svg .n { fill: var(--panel); stroke: var(--fg-3); stroke-width: 1; }
.story-svg .n.req { fill: var(--held); stroke: var(--held); }
.story-svg .n.lit { stroke: var(--accent); stroke-width: 2.6; }
.story-svg .n.lead { fill: var(--accent); stroke: var(--bg-2); stroke-width: 2; }
.story-svg .n.red { fill: var(--gap); stroke: var(--gap); }
.story-svg .ring { fill: none; stroke: var(--accent); stroke-width: 2; }
.story-svg .ring.red { stroke: var(--gap); }
.story-svg .rk { font: 700 13px var(--font-body); fill: var(--bg); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
/* beats 1–2 (Daniel 10/22): a sub-objective that belongs to someone else is an outline; the holder's own stay solid gold */
.story-svg .n.lead.other { fill: var(--bg); stroke: var(--accent); stroke-width: 2.2; }
.story-svg .rk.other { fill: var(--accent); }
.story-svg .rk.wk { font-size: 10.5px; }
.story-svg .own { font: 500 14px var(--font-body); fill: var(--fg-2); }
.story-svg .ax { font: 500 11px var(--font-data); fill: var(--fg-3); letter-spacing: .08em; text-transform: uppercase; }
.story-svg .wm { font: 700 44px var(--font-display); fill: var(--fg); letter-spacing: -.02em; text-anchor: middle; }
.story-svg .wm2 { font: 500 13px var(--font-data); fill: var(--fg-3); letter-spacing: .1em; text-transform: uppercase; text-anchor: middle; }
.story-svg .e.way { stroke: var(--fg-2); stroke-width: 1.8; }
.story-svg .em { fill: var(--nb-teal); }
.story-svg .rm { fill: var(--nb-purple); }
.story-svg .er { fill: none; stroke: var(--nb-teal); stroke-width: 2; }
.story-svg .rr { fill: none; stroke: var(--nb-purple); stroke-width: 2; }
.story-svg .gr { fill: none; stroke: var(--gap); stroke-width: 2; stroke-dasharray: 3 3; }
.story-svg .ml { font: 600 14px var(--font-body); fill: var(--fg); }
.story-svg .ml.t { fill: var(--nb-teal); }
.story-svg .ml.r { fill: var(--nb-purple); }
.story-svg .e.fan { stroke: var(--accent); stroke-width: 1.8; }
.story-svg .pb { fill: var(--fg-2); stroke: var(--bg); stroke-width: 2; }
.story-svg .pb.best { fill: var(--accent); }
.story-svg .eco { fill: var(--panel); stroke: var(--held); stroke-width: 1.3; }
.story-svg .ee { fill: none; stroke: var(--held); stroke-width: 0.8; }
.story-svg .wl { font: 600 14px var(--font-body); fill: var(--fg); }
.story-svg .wl.best { fill: var(--accent); font-weight: 700; }
.story-svg .ws { font: 400 12px var(--font-data); fill: var(--fg-3); }
.story-svg .nx { fill: var(--held); stroke: var(--held); }
.story-svg .nx.far { fill: var(--panel); stroke: var(--held); stroke-width: 1.2; }
.story-svg .ne { fill: none; stroke: var(--held); stroke-width: 1.2; }
/* the ranked paths (Daniel 10/22): steps someone here can do, per path; path 4 is an example, drawn dashed */
.story-svg .e.fan.ex { stroke: var(--gap); stroke-dasharray: 5 4; }
.story-svg .pt { fill: var(--bg-2); }
.story-svg .pt.ex { fill: none; stroke: var(--fg-3); stroke-width: 1.2; stroke-dasharray: 4 3; }
.story-svg .pf { fill: var(--held); }
.story-svg .pf.best { fill: var(--accent); }
.story-svg .wl.ex { fill: var(--gap); }
/* Flow runs it (Daniel 10/22): finished steps fill green, the late step amber, tags above the route */
.story-svg .n.ry { fill: var(--held); stroke: var(--held); }
.story-svg .n.rl { fill: #D9962A; stroke: #D9962A; }
.story-svg .ring.late { stroke: #D9962A; }
.story-svg .sw { fill: none; stroke: var(--held); stroke-width: 4; stroke-linecap: round; }
.story-svg .yl { font: 500 11px var(--font-data); fill: var(--held); letter-spacing: .04em; }
.story-svg .tg { font: 600 13px var(--font-body); fill: var(--fg-2); }
.story-svg .tg.late { fill: #B9761A; }

/* the running count, top left, stacking as the story goes */
.story-ledger { position: absolute; left: 7%; top: 84px; display: grid; gap: 3px; pointer-events: none; }
.story-ledger .row { display: flex; align-items: baseline; gap: 10px; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.story-ledger .row b { font: 700 24px/1 var(--font-display); color: var(--fg); min-width: 2.2ch; text-align: right; letter-spacing: -.02em; transition: font-size .35s; }
.story-ledger .row span { font: 500 11px var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.story-ledger .row.on { opacity: 1; transform: none; }
.story-ledger .row.past { opacity: .42; }
.story-ledger .row.past b { font-size: 17px; }

.story-copy { position: absolute; top: 0; left: 7%; right: 7%; bottom: 0; display: flex; align-items: center; pointer-events: none; }
.story-copy .beat { position: absolute; right: 0; left: auto; width: min(34ch, 40%); opacity: 0; background: none; border: 0; padding: 0; }   /* none of the site header's .top (landing.css): its panel and rule covered the drawing behind the top copy */
.story-copy .beat.left { left: 0; right: auto; }
.story-copy .beat p { margin: 0 0 .5em; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.3; color: var(--fg); text-wrap: balance; }
.story-copy .beat p.big { font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.1; letter-spacing: -.015em; }
.story-copy .beat p.dim { color: var(--fg-2); font-family: var(--font-body); font-weight: 400; font-size: clamp(1rem, 1.3vw, 1.15rem); }
.story-copy .beat p.red { color: var(--gap); }
.story-copy .beat.top { text-align: center; left: 50%; right: auto; top: 11%; transform: translateX(-50%); width: min(60ch, 86%); }
.story-copy .beat.bottom { text-align: center; left: 50%; right: auto; top: auto; bottom: 10%; transform: translateX(-50%); width: min(60ch, 86%); }

.story-note { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); margin: 0; font: 500 11px var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); pointer-events: none; transition: opacity .3s; }
.story-cta { position: absolute; left: 50%; bottom: 9%; opacity: 0; pointer-events: none; transform: translateX(-50%); white-space: nowrap; box-shadow: 0 10px 26px -14px rgba(16,41,42,.5); transition: opacity .3s; }
.story-cta.on { opacity: 1; pointer-events: auto; }

.story-after { text-align: center; padding: 56px 24px 96px; }
.story-after p { margin: 0 auto .4em; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.2; color: var(--fg); text-wrap: balance; max-width: 30ch; }
.story-after p.dim { font-family: var(--font-body); font-weight: 400; font-size: 1.05rem; color: var(--fg-2); }

/* The gather beat: a dashboard of everything the place knows, around the one objective (raw beat 1, over beat 0's grid). JS owns opacity. */
.story-gather { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
/* Everything sits on a 1200×700 board (the SVG's own coordinate space, the dot at 600,350) that scales to fit the stage, so the layout
   is the same on every screen and nothing can overlap the copy, the ledger or each other. JS sets --gs = min(stageW/1200, stageH/700). */
.story-gather-board { position: absolute; left: 50%; top: calc(50% + 30px); width: 1200px; height: 700px; transform: translate(-50%, -50%) scale(var(--gs, 1)); transform-origin: 50% 50%; }   /* +30px: centered in the space under the 60px sticky header */
.story-gather svg.gl { position: absolute; left: 0; top: 0; width: 1200px; height: 700px; overflow: visible; }
.story-gather .gln { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 4; }
.story-gather-copy { position: absolute; left: 220px; top: 14px; width: 760px; text-align: center; opacity: 0; }
.story-gather-copy p { margin: 0 0 .45em; font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--fg); text-wrap: balance; }
.story-gather-copy p.big { font-weight: 700; font-size: 36px; line-height: 1.1; letter-spacing: -.015em; }
.gt { position: absolute; width: 230px; padding: 10px 12px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; font: 400 12px/1.4 var(--font-data); color: var(--fg-2); text-align: left; will-change: transform, opacity; }
.gt h4 { margin: 0 0 6px; font: 500 10px var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.gt .n { display: block; font: 700 26px/1 var(--font-display); color: var(--fg); letter-spacing: -.02em; margin: 2px 0 4px; }
.gt .n small { font: 500 12px var(--font-body); color: var(--fg-2); letter-spacing: 0; margin-left: 6px; }
.gt .tag { display: inline-block; margin: 2px 4px 0 0; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); color: var(--fg-2); font-size: 11px; }
.gt .log { margin: 0; white-space: pre; font: 400 11px/1.55 var(--font-data); color: var(--fg-2); }
.gt .log b { color: var(--held); font-weight: 500; }
.gt .log .cur::after { content: "▌"; color: var(--accent); animation: gblink 1s steps(1) infinite; }
@keyframes gblink { 50% { opacity: 0; } }
.gt .bub { margin: 4px 0 0; padding: 6px 9px; border-radius: 10px 10px 10px 3px; background: var(--bg-2); font: 400 11.5px/1.35 var(--font-body); color: var(--fg); max-width: 92%; }
.gt .bub.r { margin-left: auto; border-radius: 10px 10px 3px 10px; background: #E6EFE9; }
.gt .bub i { display: block; font: 500 9.5px var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); font-style: normal; margin-bottom: 1px; }
.gt .tl { position: relative; height: 26px; margin-top: 6px; }
.gt .tl::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: var(--line); }
.gt .tl i { position: absolute; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--held); }
.gt .tl i.x { background: var(--gap); border-radius: 1px; transform: rotate(45deg); }
.gt .map { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; margin-top: 6px; }
.gt .map i { aspect-ratio: 1; background: var(--bg-2); border-radius: 1px; }
.gt .map i.b { background: var(--held); }
.gt .map i.v { background: #E3D8C0; }
.gt .bars { display: flex; gap: 4px; align-items: flex-end; height: 28px; margin-top: 6px; }
.gt .bars i { flex: 1; background: var(--held); border-radius: 2px 2px 0 0; opacity: .85; }
/* positions on the 1200×700 board, around the one objective at (600,350); the copy holds the top band (y 14–200) */
.gt.g1 { left: 40px; top: 215px; width: 230px; }
.gt.g2 { left: 40px; top: 372px; width: 210px; }
.gt.g3 { left: 40px; top: 548px; width: 240px; }
.gt.g4 { left: 910px; top: 205px; width: 250px; }
.gt.g5 { left: 945px; top: 458px; width: 215px; }
.gt.g6 { left: 700px; top: 580px; width: 230px; }
.gt.g7 { left: 290px; top: 585px; width: 190px; }
.gt.g8 { display: none; }   /* "What it will take" left the gather 10/22: the sub-objectives now come first, and its counts would give away the next slides */
.gt.g9 { left: 512px; top: 585px; width: 160px; }
.gt.g10 { left: 40px; top: 92px; width: 200px; }   /* public data: demand gets a tile of its own, under the ledger (10/23) */
/* The three signals on the gather (Daniel 10/23): each tile edged in its signal's color, as on the signals card; the copy is the legend.
   The words take a darker shade of each color so they read on the cream. */
.gt-d, .sg-d { --sgc: #F29A3B; } .gt-c, .sg-c { --sgc: var(--nb-teal); } .gt-m, .sg-m { --sgc: var(--nb-gold); }
.gt.gt-d, .gt.gt-c, .gt.gt-m { border-top: 3px solid var(--sgc); }
.gt.gt-d h4::before, .gt.gt-c h4::before, .gt.gt-m h4::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--sgc); vertical-align: 1px; }
.story-gather-copy .sg { font-weight: 700; }
.story-gather-copy .sgp { white-space: nowrap; }   /* a signal and what it is stay on one line */
.story-gather-copy .sg::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .3em; border-radius: 50%; background: var(--sgc); vertical-align: .1em; }
.sg-d { color: #B65E10; } .sg-c { color: #1C7C74; } .sg-m { color: #8A6C00; }
.gt .bub { padding: 4px 8px; font-size: 11px; line-height: 1.3; margin-top: 3px; }
.gt .bub i { font-size: 9px; }
.gt .log { line-height: 1.45; }

/* Next: the same place on every page */
.story-next { position: fixed; right: 24px; bottom: 24px; z-index: 5; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg-2); font: 600 13px var(--font-body); cursor: pointer; box-shadow: var(--shadow); }
.story-next:hover { color: var(--accent); border-color: var(--accent); }
.story-prev { position: fixed; right: 24px; top: 76px; z-index: 5; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg-2); font: 600 13px var(--font-body); cursor: pointer; box-shadow: var(--shadow); transition: opacity .2s ease; }   /* top right, under the header (Daniel 10/21) */
.story-prev:hover { color: var(--accent); border-color: var(--accent); }
.story-prev.off { opacity: 0; pointer-events: none; }
.story-prev svg { width: 14px; height: 14px; }
.story-prev .k { font: 500 11px var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.story-next svg { width: 14px; height: 14px; }
.story-next .k { font: 500 11px var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }

/* The opening (:2019): what · why · how · see it live, one panel each, then the story. */
/* Four cards, each a solid NeighborBuilt color, stacked like flashcards: every card pins at the top and the next slides up over it.
   Card colors from the NB mark: navy · purple · teal · gold. The demo then slides up over the last card on its own cream. */
:root { --nb-navy: #0B3A41; --nb-gold: #ECC625; --nb-red: #E8694E; --nb-cream: #F3F5F1; }   /* navy · gold · red from the NB mark */
.open { position: relative; padding: 0; margin: 0; }
.open-anchor { height: 0; }   /* the header's Learn lands here (Daniel 10/23) */
.open { --hdr: 60px; }   /* the sticky header's height: cards pin just under it, never beneath it */
.open-panel { position: -webkit-sticky; position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 48px 24px; overflow: hidden; transform-origin: 50% 0; will-change: transform; }   /* symmetric padding so the primary content sits on the true center */
.open-panel::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--cover, 0); pointer-events: none; }   /* the card beneath dims as the next covers it */
.open-body { position: relative; display: flex; flex-direction: column; align-items: center; }   /* the primary content is what centers; the eyebrow hangs above it and takes no room */
.open-panel[data-open="0"] { background: var(--nb-navy); --ink: #fff; --ink-2: #CFE3DF; --ink-3: #8FB8B0; --k: var(--nb-gold); }
.open-panel[data-open="1"] { background: var(--bg); --ink: var(--nb-navy); --ink-2: #2B4E42; --ink-3: #4A6459; --k: var(--nb-navy); }   /* the site's own background (Daniel 10/21): navy → cream, so the problems read in red and the answers in green */
/* Comparison pair (Daniel 10/21 late): the why card as two lighter cards. 1b: the place on its own, navy, with a picture of it
   (people from different organizations around one objective). 1c: cream, the stakes line, then "stall" and "flow" as icon tiles;
   the box bodies live in tooltips (hover, focus, or tap). */
.open-panel[data-open="1b"] { background: var(--nb-navy); --ink: #fff; --ink-2: #CFE3DF; --ink-3: #8FB8B0; --k: var(--nb-gold); }
.open-panel[data-open="1b"] h2.open-def { max-width: 24ch; font-size: clamp(2rem, 4vw, 3.4rem); margin-top: 26px; }
.open-panel[data-open="1b"] h2.open-place-k { margin: 0 0 18px; font-size: clamp(2rem, 4vw, 3.4rem); color: var(--nb-gold); }   /* "Place" at headline size, gold (Daniel 10/21); the definition under the picture no longer repeats it */
.place-vis { width: min(340px, 70vw); height: auto; display: block; }
.place-vis .pv-lines path { fill: none; stroke: var(--nb-teal); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: .8; }
.place-vis .pv-people circle { fill: var(--nb-navy); stroke: var(--nb-gold); stroke-width: 2.4; }
.place-vis .pv-people circle:nth-child(2n) { stroke: var(--nb-teal); }
.place-vis .pv-people circle:nth-child(3n) { stroke: #fff; }
.place-vis .pv-obj { fill: var(--nb-gold); }
.place-vis .pv-t { font: 500 8.5px var(--font-data); letter-spacing: .05em; text-transform: uppercase; fill: var(--nb-navy); text-anchor: middle; }
/* The three signals (Daniel + Ebony, 10/22): right after the place, navy like it, three tiles in the mark's colors (demand orange,
   capacity teal, movement gold, the brand's own color, since movement is what Economy Flow adds), then the gap the public data
   leaves and the answer in gold, then where the signals are read from. */
.open-panel[data-open="1s"] { background: var(--nb-navy); --ink: #fff; --ink-2: #CFE3DF; --ink-3: #8FB8B0; --k: var(--nb-gold); }
.open-panel h2.sig-head { max-width: 30ch; font-size: clamp(1.7rem, 3.2vw, 2.7rem); }
.open-panel h2.sig-head .h-brand { color: var(--nb-gold); }
.sig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: min(100%, 1080px); margin: 30px 0 0; text-align: left; }
.sig { --c: var(--nb-gold); display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-top: 4px solid var(--c); }
.sig-d { --c: #F29A3B; } .sig-c { --c: var(--nb-teal); } .sig-m { --c: var(--nb-gold); }
.sig-ic { width: 44px; height: 44px; display: block; margin-bottom: 4px; color: var(--c); }
.sig-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sig-k { margin: 0; font: 500 11px var(--font-data); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }   /* eyebrow and title swapped 10/23 (Daniel): the eyebrow says what the signal is, the signal's name is the title in its color */
.sig-t { margin: 0; font: 700 clamp(1.35rem, 2vw, 1.75rem)/1.15 var(--font-display); letter-spacing: -.01em; color: var(--c); }
.sig-b { margin: 0; font: 400 clamp(.92rem, 1.05vw, 1rem)/1.45 var(--font-body); color: var(--ink-2); }
.sig-gap { margin: 30px 0 0; max-width: 52ch; font: 500 clamp(1.05rem, 1.6vw, 1.35rem)/1.35 var(--font-display); color: #fff; text-wrap: balance; }
.sig-so { margin: 10px 0 0; font: 700 clamp(1.3rem, 2.2vw, 1.8rem)/1.15 var(--font-display); letter-spacing: -.01em; color: var(--nb-gold); }
.sig-l { list-style: none; margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 9px; }   /* the sources of each signal (Daniel 10/22): a label, then what it covers */
.sig-l li { position: relative; padding-left: 16px; }
.sig-l li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.sig-l b { display: block; font: 600 clamp(.92rem, 1.05vw, 1rem)/1.3 var(--font-display); color: #fff; }
.sig-l span { display: block; font: 400 clamp(.82rem, .92vw, .9rem)/1.35 var(--font-body); color: var(--ink-2); }
@media (max-height: 820px) {   /* shorter screens: tighter tiles so the answer and the source line sit above the cue */
  .open-panel h2.sig-head { font-size: clamp(1.4rem, 2.5vw, 2rem); }
  .sig-grid { margin-top: 18px; gap: 12px; }
  .sig { padding: 14px 16px 12px; gap: 4px; }
  .sig-ic { width: 34px; height: 34px; margin-bottom: 2px; }
  .sig-t { font-size: 1.3rem; }
  .sig-b { font-size: .88rem; line-height: 1.35; }
  .sig-gap { margin-top: 18px; font-size: 1.05rem; }
  .sig-so { font-size: 1.3rem; margin-top: 6px; }
  .sig-l { margin-top: 4px; padding-top: 8px; gap: 5px; }
  .sig-l li::before { top: .4em; }
  .sig-l b { font-size: .88rem; }
  .sig-l span { font-size: .8rem; line-height: 1.3; }
}
@media (max-width: 700px) { .sig-grid { grid-template-columns: 1fr; gap: 10px; } }   /* phones: the three signals stacked */
.open-panel[data-open="1c"] { background: var(--bg); --ink: var(--nb-navy); --ink-2: #2B4E42; --ink-3: #4A6459; --k: var(--nb-navy); justify-content: flex-start; padding-top: clamp(48px, 9vh, 120px); }   /* the block sits high on the card, not centered (Daniel 10/21), so the tooltips have room under the second row */
.open-panel[data-open="1c"] h2.open-but { max-width: 60ch; color: var(--gap); }
/* The stall / flow cards (Daniel 10/21 late: twelve tiles would not fit a phone screen): six cards, each a stall on its front and
   its answer on its back. The switch flips all six, with a small stagger; a tap flips one. */
.flip-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100%, 1180px); margin: 26px 0 0; }
.flip-k { margin: 0; font: 600 12px var(--font-data); letter-spacing: .12em; text-transform: uppercase; }
.flip-k-stall { color: var(--gap); } .flip-k-flow { color: var(--held); display: none; }
.flipped .flip-k-stall { display: none; } .flipped .flip-k-flow { display: inline; }
.flip-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--nb-navy); font: 600 13px var(--font-body); cursor: pointer; box-shadow: var(--shadow); white-space: nowrap; }
.flip-toggle .sw { position: relative; width: 36px; height: 20px; border-radius: 999px; background: #C9D3CC; transition: background .25s ease; }
.flip-toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s ease; }
.flipped .flip-toggle .sw { background: var(--held); } .flipped .flip-toggle .sw::after { transform: translateX(16px); }
.flip-toggle-on { display: none; } .flipped .flip-toggle-on { display: inline; } .flipped .flip-toggle-off { display: none; }
.flips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(100%, 1180px); margin: 12px 0 0; perspective: 1400px; }
.flip { position: relative; }
.flip-in { position: relative; display: grid; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.4, 0, .2, 1); transition-delay: var(--d, 0s); }
.flip.on .flip-in { transform: rotateY(180deg); }
.face { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 16px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font: inherit; color: var(--ink); text-align: center; cursor: pointer; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.front { border-color: rgba(201, 71, 44, .35); }
.face.back { border-color: rgba(44, 122, 85, .4); transform: rotateY(180deg); }
.face:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.face-ic { width: 52px; height: 52px; display: block; }
.face-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.front .face-ic, .front .face-t { color: var(--gap); }
.back .face-ic, .back .face-t { color: var(--held); }
.face-t { font: 700 clamp(1rem, 1.2vw, 1.1rem)/1.2 var(--font-display); }
.face-b { font: 400 clamp(.85rem, .95vw, .95rem)/1.4 var(--font-body); color: var(--ink-2); }
.face-hint { margin-top: auto; padding-top: 6px; font: 500 10px var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
@media (max-height: 820px) {
  .open-panel[data-open="1c"] h2.open-but { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
  .flip-bar { margin-top: 14px; }
  .face { padding: 12px 12px 10px; gap: 5px; }
  .face-ic { width: 38px; height: 38px; }
  .face-b { font-size: .82rem; line-height: 1.3; }
  .face-hint { display: none; }
}
.open-panel[data-open="2"] { background: var(--nb-teal); --ink: var(--nb-navy); --ink-2: #0F4A50; --ink-3: #1F6168; --k: var(--nb-navy); }   /* portfolio: NB green (Daniel 10/21) */
.open-panel[data-open="3"] { background: var(--nb-purple); --ink: #fff; --ink-2: #E9E1F2; --ink-3: #C9B9DD; --k: var(--nb-gold); }   /* how: purple so it is not teal on teal (Nemo, unruled) */
.open-panel[data-open="3"] .open-how li::before { color: var(--nb-purple); }
.open-panel h2.how-head { margin-bottom: 34px; }   /* "AI holds every step…" was the eyebrow; a title since 10/23 (Daniel) */
.open-panel[data-open="4"] { background: var(--nb-gold); --ink: var(--nb-navy); --ink-2: #2B4E42; --ink-3: #4A6459; --k: var(--nb-navy); }
/* The portfolio card: a row of cards to swipe or scroll sideways (Daniel 10/21). Three hypothetical objectives, each with the four
   counts, then a fourth, Kansas City, that sums them plus others. Under the row, the one line, glowing. */
/* The portfolio (Daniel 10/21 PM, third round): three objective cards in a row. As the page scrolls, the three drop into one column
   on the left and the fourth card, Kansas City, arrives on the right, with a line from each of the three into it: the objectives
   feeding one parent. open.js measures both layouts and interpolates transforms on every frame from the page scroll (no snapping). */
.open-port { position: relative; width: min(1180px, calc(100vw - 64px)); margin-top: 14px; text-align: left; }   /* not 100%: the body shrinks to its widest line, and the cards are absolute */
.open-ex { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; background: #fff; border-radius: 14px; padding: 24px 26px 18px; color: var(--nb-navy); display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(11, 58, 65, .18); }
.open-ex-tag { margin: 0 0 8px; font: 500 11px var(--font-data); letter-spacing: .12em; text-transform: uppercase; color: #1F6168; }
.open-port .open-ex-place { border: 5px solid var(--nb-navy); padding: 22px 24px 16px; opacity: 0; }   /* the parent: white with a thick navy border (Daniel 10/21 PM) */
.open-port .open-ex-place .open-ex-tag { color: var(--nb-navy); }
.open-port .open-ex-place h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
.open-port .open-ex-place dt { font-size: clamp(.95rem, 1.1vw, 1.05rem); }
.open-port .open-ex-place dd { font-size: clamp(1.1rem, 1.4vw, 1.3rem); }
.open-port .open-ex-place dl div.steps dd { font-size: clamp(1.5rem, 2.1vw, 1.9rem); }
.open-port-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.open-port-lines path { fill: none; stroke: var(--nb-navy); stroke-width: 3; stroke-linecap: round; }
.open-port-lines circle { fill: var(--nb-navy); }
/* Narrow cards (a phone in landscape, a small tablet: three cards across under ~900 px): the one-line "Steps that can go wrong"
   label is wider than the card, and a grid column sized to it pushed every number off the right edge (Daniel's phone, 10/21).
   The card is a size container; when it is narrow, the steps row stacks the number under the label and the type tightens. */
.open-ex { container-type: inline-size; }
@container (max-width: 300px) {
  .open-ex { padding: 16px 14px 12px; }
  .open-ex dl div.steps { flex-direction: column; align-items: flex-start; gap: 2px; }
  .open-ex dl div.steps dd { font-size: 1.25rem; }
}
@container (max-width: 240px) {
  .open-ex h3 { font-size: 1rem; }
  .open-ex dt { font-size: .82rem; }
  .open-ex dl div.steps dt { font-size: .8rem; }
  .open-ex dd { font-size: .95rem; }
  .open-ex dl div.steps dd { font-size: 1.1rem; }
}
.open-spacer { height: 90vh; }   /* holds the portfolio on screen while the page scroll runs the move; the Next button stops at its end */
@media (max-height: 820px) {   /* shorter screens: tighter cards so the move still fits above the cue */
  .open-ex { padding: 16px 18px 12px; }
  .open-ex h3 { font-size: 1.05rem; margin-bottom: 8px; }
  .open-ex dl div { padding: 5px 0; }
  .open-ex dl div.steps dd { font-size: 1.3rem; }
  .open-panel .open-port-line { margin-bottom: 14px; font-size: 1.6rem; }
}
.open-ex h3 { margin: 0 0 14px; font: 700 clamp(1.05rem, 1.45vw, 1.3rem)/1.22 var(--font-display); letter-spacing: -.01em; color: var(--nb-navy); text-wrap: balance; }   /* no flex-grow: open.js gives the three titles one height, so the counts start on the same line (Daniel 10/21) */
.open-ex dl { margin: 0; display: grid; gap: 0; }
.open-ex dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line, #C4D2C8); }
.open-ex dt { margin: 0; font: 400 clamp(.85rem, 1vw, .95rem)/1.3 var(--font-body); color: #2B4E42; }
.open-ex dd { margin: 0; font: 500 clamp(1rem, 1.25vw, 1.15rem)/1 var(--font-data); color: var(--nb-navy); white-space: nowrap; }
.open-ex dl div.steps dt { font-weight: 500; color: var(--nb-navy); white-space: nowrap; }   /* always one line (Daniel 10/21) */
@media (max-width: 480px) { .open-port { min-width: 0; } .open-ex { min-width: 0; padding-left: 16px; padding-right: 16px; } .open-ex dl div.steps dt { font-size: .8rem; } .open-ex dl div.steps dd, .open-port .open-ex-place dl div.steps dd { font-size: 1.15rem; } }   /* phones: the one-line label and its number still fit the card */
.open-ex dl div.steps dd { font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 700; color: var(--gap); }
.open-panel .open-port-line { margin: 0 0 8px; max-width: 36ch; color: #fff; }   /* the glow (Daniel 10/21) removed 10/23 on Daniel's ask */
.open-port-sub { margin: 0 0 22px; font: 500 clamp(1.05rem, 1.6vw, 1.35rem)/1.3 var(--font-display); color: var(--nb-navy); letter-spacing: -.01em; }   /* under the line (Daniel 10/21 late) */
.open-k { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin: 0 0 22px; font: 500 12px var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--k); white-space: nowrap; }
.open-panel h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); }   /* line breaks are set in the markup (Daniel 10/20) */
.open-panel h1 .h1-brand { color: var(--nb-gold); }   /* the name in gold; the eyebrow above it is gone (Daniel 10/21) */
/* The hero's name is the Economy Flow wordmark, logo Direction 5 (Daniel 10/23): a small funnel of steps whose lit route runs under the
   name and up into the ring that is the "o" of Flow. Signal colors; the letters stay white. open.js draws the route once the font loads. */
.ef-wm { position: relative; display: inline-flex; align-items: baseline; padding: 0 0 .42em 1.45em; white-space: nowrap; }
.ef-wm .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ef-wm-fun { position: absolute; left: 0; top: -.17em; width: 1.02em; height: 1.3em; overflow: visible; }
.ef-wm-route { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ef-wm-route path { fill: none; stroke: var(--nb-gold); stroke-linecap: round; stroke-linejoin: round; }
.ef-wm-o { width: .56em; height: .56em; margin: 0 .025em; flex: none; overflow: visible; }
.ef-wm-o circle { fill: none; stroke: var(--nb-gold); stroke-width: 4; }
.open-problem { margin: 22px 0 0; max-width: 56ch; font: 400 clamp(1.05rem, 1.5vw, 1.25rem)/1.45 var(--font-body); color: var(--ink-2); }
.open-so { margin: 30px 0 0; max-width: 30ch; font: 700 clamp(1.3rem, 2.2vw, 1.8rem)/1.15 var(--font-display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
/* The why card (Daniel 10/21): the definition of a place opens it at headline size, the stakes line under it, then three
   problem boxes, "Economy Flow helps.", and three answer boxes that resolve the three above, one for one. */
.open-panel[data-open="1"] h2 { max-width: 60ch; }
.open-panel[data-open="1"] h2.open-def { color: var(--ink); }
.open-def-eg { display: block; margin-top: 4px; font-size: .62em; font-weight: 500; color: var(--ink-2); }   /* the three examples under the definition */
.open-panel[data-open="1"] .open-so { max-width: 40ch; }
.open-panel[data-open="1"] h2.open-but { margin-top: 14px; color: var(--gap); }   /* the problem, in red */
.open-panel[data-open="1"] .open-so { margin-top: 26px; color: var(--held); }    /* the answer, in green */
.open-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(100%, 1180px); margin: 26px 0 0; text-align: left; }   /* four: data first (Daniel 10/21) */
@media (max-width: 1100px) { .open-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-height: 820px) {   /* shorter screens: the why card tightens so both rows of boxes sit above the cue */
  .open-panel[data-open="1"] h2 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
  .open-panel[data-open="1"] h2.open-but { margin-top: 8px; }
  .open-grid { margin-top: 14px; gap: 10px; }
  .open-box { padding: 10px 12px; }
  .open-box p { font-size: .88rem; }
  .open-panel[data-open="1"] .open-so { margin-top: 14px; font-size: 1.3rem; }
}
.open-box { border-radius: 10px; padding: 14px 16px; background: #fff; border: 1px solid var(--line, #DDE2DB); }
.open-box h4 { margin: 0 0 6px; font: 700 clamp(1rem, 1.3vw, 1.15rem)/1.2 var(--font-display); }
.open-box p { margin: 0; font: 400 clamp(.9rem, 1.1vw, 1rem)/1.4 var(--font-body); color: var(--ink-2); }
.open-grid-problem .open-box { border-color: rgba(201, 71, 44, .35); }
.open-grid-problem .open-box h4 { color: var(--gap); }
.open-grid-answer .open-box { border-color: rgba(44, 122, 85, .4); }
.open-grid-answer .open-box h4 { color: var(--held); }
.open-panel h2 { margin: 0; max-width: 26ch; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.12; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.open-sub { margin: 14px 0 0; font: 400 1.1rem/1.4 var(--font-body); color: var(--ink-2); }
.open-list { list-style: none; margin: 30px 0 0; padding: 0; max-width: 48ch; text-align: left; display: grid; gap: 14px; }
.open-list li { position: relative; padding-left: 22px; font: 500 clamp(1.05rem, 1.5vw, 1.3rem)/1.35 var(--font-display); color: var(--ink); }
.open-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--k)); }
.open-how { list-style: none; counter-reset: how; margin: 0; padding: 0; max-width: 52ch; text-align: left; display: grid; gap: 22px; }
.open-how li { counter-increment: how; position: relative; padding-left: 52px; font: 400 clamp(1.05rem, 1.5vw, 1.25rem)/1.4 var(--font-body); color: var(--ink-2); }
.open-how li b { display: block; font: 700 clamp(1.3rem, 2.2vw, 1.8rem)/1.15 var(--font-display); color: var(--ink); margin-bottom: 4px; letter-spacing: -.01em; }
.open-how li::before { content: counter(how); position: absolute; left: 0; top: 2px; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--nb-teal); font: 700 15px/34px var(--font-display); text-align: center; }
.open-ctas { margin: 30px 0 0; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.open-btn { background: var(--nb-navy); color: #fff; }
.open-btn.ghost { background: transparent; color: var(--nb-navy); box-shadow: inset 0 0 0 2px var(--nb-navy); }
.open-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 500 11px var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.open-cue svg { width: 14px; height: 14px; animation: open-bob 1.6s ease-in-out infinite; }
@keyframes open-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* No motion: stack the copy, draw the final state once. */
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .story-stage { height: auto; padding: 72px 0; }
  .story-pin { position: static; height: auto; overflow: visible; }
  .story-svg { position: relative; height: auto; aspect-ratio: 1200 / 700; }
  .story-ledger { position: static; grid-auto-flow: column; justify-content: start; padding: 16px 24px 0; }
  .story-ledger .row, .story-ledger .row.past { opacity: 1; transform: none; }
  .story-copy { position: static; width: auto; display: block; padding: 24px 24px 0; }
  .story-copy .beat, .story-copy .beat.top, .story-copy .beat.bottom { position: static; opacity: 1 !important; transform: none; left: auto; right: auto; width: auto; text-align: left; margin-bottom: 1.6rem; }
  .story-cta { position: static; display: inline-block; opacity: 1; pointer-events: auto; transform: none; margin: 8px 24px 24px; }
  .story-gather { position: static; opacity: 1 !important; padding: 0 24px; }
  .story-gather-board { position: static; width: auto; height: auto; transform: none !important; display: grid; gap: 10px; }
  .story-gather svg.gl { display: none; }
  .story-gather-copy { position: static; transform: none; width: auto; text-align: left; opacity: 1 !important; margin: 0 0 8px; }
  .story-gather-copy p { font-size: clamp(1.15rem, 1.9vw, 1.6rem); }
  .story-gather-copy p.big { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
  .gt, .gt.g1, .gt.g2, .gt.g3, .gt.g4, .gt.g5, .gt.g6, .gt.g7, .gt.g8, .gt.g9, .gt.g10 { position: static; width: auto; opacity: 1 !important; transform: none !important; }
  .story-next, .story-prev { display: none; }
  .open-panel { position: static; height: auto; min-height: 0; padding: 56px 24px 64px; transform: none !important; }
  .open-panel::after { display: none; }
  .open-cue { position: static; transform: none; margin-top: 28px; }
  .open-k { position: static; transform: none; margin-bottom: 14px; white-space: normal; text-align: center; }   /* a long eyebrow wraps on a phone */
  .open-grid { grid-template-columns: 1fr; }
  .flips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }   /* phones: six cards, two across */
  .face { padding: 12px 10px 10px; gap: 5px; }
  .face-ic { width: 36px; height: 36px; }
  .face-t { font-size: .92rem; }
  .face-b { font-size: .8rem; line-height: 1.35; }
  .flip-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .open-port { height: auto !important; display: grid; gap: 14px; }   /* phones: the three cards, then the parent, in one column; no move */
  .open-ex, .open-port .open-ex-place { position: static; transform: none !important; width: auto !important; opacity: 1 !important; }
  .open-port-lines { display: none; }
  .open-spacer { display: none; }
  .open-cue svg { animation: none; }
}