/* The homepage story after the hero (Oct 22). Big beats down the page, lines drawn by flows-links.js:
   grey dots as the team splits up, yellow once Powerplant brings it together. Mobile first; the
   variant classes (st-a to st-d) only change layout from 768px up. */
.st {
  --wf-ink: var(--theme-ink);
  --wf-muted: var(--theme-ink-muted);
  --wf-faint: var(--theme-ink-faint);
  --wf-line: var(--theme-line);
  --wf-card: var(--theme-surface-raised);
  --wf-fill-strong: var(--theme-surface-raised-strong);
  --wf-win: var(--theme-accent);
  --wf-win-soft: color-mix(in srgb, var(--theme-accent) 16%, var(--theme-surface-raised));
  --wf-bad: var(--theme-bad);
  position: relative;
  display: grid;
  gap: clamp(80px, 12vw, 160px);
  padding-block: clamp(48px, 8vw, 96px) clamp(24px, 4vw, 48px);
}
.st > svg.links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.st > :not(svg) { position: relative; z-index: 1; }
.links path { fill: none; stroke-width: 2; stroke-linecap: round; }
.links .l-out { stroke: var(--wf-faint); stroke-dasharray: 2 7; }
.links .l-in { stroke: var(--wf-win); stroke-width: 2.5; }

.links .l-x { stroke: var(--wf-faint); stroke-width: 1.5; stroke-dasharray: 5 5; }

/* Fade in as each piece arrives; people one after another. */
.st-js .st-r { opacity: 0; transition: opacity 0.7s ease calc(var(--i, 0) * 140ms); }
.st-js .st-r.in { opacity: 1; }

.st-beat { display: grid; justify-items: center; gap: 28px; text-align: center; }
.st-h { margin: 0; max-width: 18ch; font: 500 clamp(28px, 4.6vw, 48px)/1.1 var(--font-heading); text-wrap: balance; color: var(--wf-ink); }
.st-cap { padding: 4px 12px; border-radius: 8px; background: var(--theme-surface); }
.st-k { margin: 0; font-size: 14px; color: var(--wf-muted); }
.st-goal { display: grid; justify-items: center; gap: 8px; justify-self: center; width: fit-content; max-width: 100%; padding: clamp(24px, 4vw, 40px) clamp(24px, 5vw, 56px); border: 1px solid var(--wf-line); border-radius: 14px; background: var(--wf-card); }
.st-g { margin: 0; font: 500 clamp(30px, 6vw, 64px)/1.05 var(--font-heading); text-wrap: balance; color: var(--wf-ink); }

/* People. */
.st-team { display: grid; gap: 16px; width: 100%; margin: 56px 0 0; padding: 0; list-style: none; }
.st-person { display: grid; justify-items: center; gap: 14px; padding: 22px 18px; border: 1px solid var(--wf-line); border-radius: 12px; background: var(--wf-card); text-align: center; }
.st-who { display: grid; justify-items: center; gap: 6px; margin: 0; }
.st-who > img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }

/* Powerplant, the skill, everyone. */

.st-skill { display: grid; gap: 12px; width: min(100%, 560px); padding: 20px 22px; border: 1px solid var(--wf-line); border-radius: 12px; background: var(--wf-card); text-align: left; }
.st-skill-h { display: flex; align-items: center; gap: 8px; margin: 0; font: 15px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--wf-ink); }
.st-skill-h svg { flex: none; color: var(--wf-muted); }
.st-skill-h em { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: var(--wf-win-soft); font: normal 13px/1.4 var(--font-body); }
.st-skill-lines { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.st-skill-lines li { padding: 10px 12px; border-radius: 8px; background: var(--theme-surface); font: clamp(15px, 1.8vw, 18px)/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--wf-ink); }
.st-skill-by { margin: 0; font-size: 14px; color: var(--wf-muted); }

.st-good { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font: 500 clamp(22px, 3vw, 32px)/1.2 var(--font-heading); color: var(--wf-ink); }
/* Supporting points under the closing line (Jaycee, Oct 26): same copy as the Oct 23 cards, now on
   the yellow line, the reverse of the tangle merging into Powerplant above. Each point is a box
   with its icon on the top edge where the line comes in. Phones: the line runs straight down the
   middle, behind the boxes. Tablet up: curves fan out to each column (flows-links.js draws them to
   each .st-good-pin), like the threads into Powerplant. */
.st-good-list { --ic: 48px; --drop: 26px; position: relative; display: grid; justify-self: center; width: 100%; max-width: 420px; margin: 12px 0 14px; padding: 0; list-style: none; text-align: center; }
.st-good-list::before { content: ""; position: absolute; left: calc(50% - 1.25px); bottom: 100%; height: var(--drop); border-left: 2.5px solid var(--wf-win); }
.st-good-list::after { content: ""; position: absolute; left: calc(50% - 1.25px); top: 0; bottom: 40px; border-left: 2.5px solid var(--wf-win); }
.st-good-list li { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; justify-items: center; padding: 22px 0 0; font-size: 17px; line-height: 1.4; color: var(--wf-ink); }
.st-good-list li:first-child { padding-top: 0; }
.st-good-pin { display: none; }
.st-good-t { position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; justify-self: stretch; box-sizing: border-box; margin: calc(var(--ic) / -2) 0 0; padding: calc(var(--ic) / 2 + 12px) 18px 18px; border: 1px solid var(--wf-line); border-radius: 12px; background: var(--wf-card); box-shadow: 0 10px 26px var(--theme-shadow); }
.st-good-ic { position: relative; z-index: 11; display: grid; place-items: center; width: var(--ic); height: var(--ic); box-sizing: border-box; border: 2.5px solid var(--wf-win); border-radius: 50%; background: var(--wf-win-soft); color: var(--palette-golden-600); }
@media (min-width: 768px) {
  .st-good-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 860px; margin: 16px 0 16px; }
  .st-good-list::before, .st-good-list::after { display: none; }
  .st-good-pin { display: block; position: absolute; top: 44px; left: calc(50% - 0.5px); width: 1px; height: 0; }
  .st-good-list li, .st-good-list li:first-child { padding: 44px clamp(8px, 1.4vw, 14px) 0; font-size: clamp(16px, 1.6vw, 18px); }
  .st-good-t { padding: calc(var(--ic) / 2 + 14px) 18px 22px; }
}
.st-cta-beat .cta { justify-self: center; }

/* Phones: three people in focus, the rest of the team hinted. */
.st-more { display: none; }

@media (min-width: 768px) {
  .st-more { display: grid; }
  .st-cards .st-team { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .st-cards .st-person { padding: 20px 14px; }
  
  /* The extra people recede without fading their text (faded red failed contrast, Lighthouse, Oct 22). */
  .st-cards .st-more, .st-cards.st-js .st-more.in { opacity: 1; }
  .st-cards .st-more { border-color: color-mix(in srgb, var(--wf-line) 60%, transparent); }
  .st-cards .st-more .ava { filter: grayscale(1); opacity: 0.7; }

}

/* D: the tangle. A grid of everyone's steps, scrolling sideways inside its own box on small screens. */
.st-tangle { width: 100%; overflow-x: auto; padding-bottom: 8px; }

.st-tangle .st-goal { justify-self: center; margin-bottom: 30px; }
.st-tangle .st-who { align-self: end; }
.st-tangle .st-who > img { width: 48px; height: 48px; }

.st-tangle-beat { gap: 20px; }
.st-tangle-beat .st-cap { font-size: 18px; color: var(--wf-muted); }
.st-stem { position: relative; margin-top: 40px; }
.st-stem::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 40px; border-left: 2.5px solid var(--wf-win); }

.st-faces { display: flex; justify-content: center; margin: 40px 0 16px; }
.st-faces > * { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--theme-surface); font-size: 14px; }
.st-faces > * + * { margin-left: -8px; }

/* Card stories (A, B, C, E), Oct 22: the shiny conversation cards from the live homepage, and each beat grows as it reaches
   the middle of the screen (--f, set by story.js) and shrinks as it leaves. `scale` composes with the
   hover tilt's transform, so the two never fight. */
.st-cards [data-focus] { scale: calc(0.86 + 0.14 * var(--f, 1)) }
.st-cards .st-team[data-focus] { transform-origin: 50% 0; }
.st-card { position: relative; display: grid; gap: 10px; justify-items: stretch; width: 100%; padding: 16px 18px; text-align: left; transform: rotate(var(--tilt, 0deg)); }
.st-card .feeder-who.st-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin: 0; }
.st-card .ava { width: 36px; height: 36px; object-fit: cover; }
.st-card .feeder-name { font-size: 16px; }
.st-card .feeder-h { font-size: 12px; }
.st-card .f-q { display: flex; align-items: flex-start; gap: 6px; max-width: 100%; font-size: 15px; line-height: 1.35; }
.st-card .f-a { display: flex; align-items: flex-start; gap: 6px; font-size: 15px; line-height: 1.35; font-weight: 400; }
.st-card :is(.f-q, .f-a) svg { flex: none; margin-top: 2px; }
.st-card .st-bad-a { color: var(--wf-bad); }
.st-cards .holo.in .glint { animation: glintSweep 1.7s ease-in-out 0.5s both; }
.st-cards .st-goal.holo, .st-cards .st-skill.holo { box-shadow: 0 14px 34px var(--theme-shadow); }
@media (min-width: 768px) {
  .st-cards .st-team { gap: 18px; }
  .st-cards .st-card { padding: 16px; }
  .st-cards .st-card .f-q, .st-cards .st-card .f-a { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .st-cards [data-focus] { scale: none; } .st-card { transform: none; } }

/* D, Oct 22: the tangle as a web. Cards scattered and tilted, hand-offs drawn as loose string. */
.st-web { position: relative; height: 980px; min-width: 760px; max-width: 1080px; margin: 0 auto; }
.st-web > svg.links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.st-web-goal { position: absolute; left: 50%; top: 0; z-index: 2; transform: translateX(-50%); }
.st-web-goal .st-g { font-size: clamp(26px, 3.2vw, 36px); white-space: nowrap; }
.st-wc { position: absolute; left: calc(var(--x) * 1%); top: var(--y); z-index: 1; display: grid; gap: 6px; width: 200px; padding: 12px 14px; border: 1px solid var(--wf-line); border-radius: 10px; background: var(--wf-card); box-shadow: 0 10px 24px var(--theme-shadow); text-align: left; transform: translateX(-50%) rotate(var(--r)); }
.st-wc-who { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 500; color: var(--wf-ink); }
.st-wc-who .st-wc-av > img:first-child { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.st-wc-av { position: relative; display: block; flex: none; }
.st-wc-av > img:first-child { display: block; }
.st-wc-ag { position: absolute; right: -6px; bottom: -5px; box-sizing: content-box; width: 12px; height: 12px; padding: 3px; border: 1px solid var(--wf-line); border-radius: 50%; background: var(--wf-card); }
[data-theme="light"] .st-wc-ag { filter: brightness(0.2); }
.st-wc-t { margin: 0; font-size: 15px; line-height: 1.3; color: var(--wf-ink); }
.st-wc-bad { border-color: color-mix(in srgb, var(--wf-bad) 55%, transparent); }
.st-wc-bad .st-wc-t { color: var(--wf-bad); }
.st-gh { width: 22px; height: 22px; flex: none; }
.st-skill-name { font: 500 16px/1.3 var(--font-body); }
[data-theme="light"] .st-gh { filter: brightness(0.2); }
.st-wc-good { border-color: color-mix(in srgb, var(--theme-good) 55%, transparent); }
.st-wc-good .st-wc-t { color: var(--theme-good); }
[data-theme="dark"] .st-wc-good .st-wc-t { color: color-mix(in srgb, var(--palette-holly-400) 75%, var(--palette-greyscale-50)); }
.st-web .links .l-x { stroke: var(--wf-faint); stroke-width: 1.5; stroke-dasharray: 4 5; }
.st-web .links .l-out { stroke: var(--wf-faint); }

/* Labels and the extra story beats (B, C, E). */
.st-tag { display: inline-flex; align-items: center; margin-right: 8px; padding: 2px 8px; border-radius: 999px; background: var(--wf-fill-strong); font: 500 12px/1.4 var(--font-body); font-style: normal; color: var(--wf-ink); }
.st-card .st-tag { margin: 0 0 0 4px; }
.st-sub-h { max-width: 22ch; font-size: clamp(24px, 3.6vw, 38px); }
.st-goal.is-example { padding: 22px 32px; }
.st-goal.is-example .st-k { display: grid; justify-items: center; gap: 6px; font: 500 clamp(30px, 6vw, 56px)/1.05 var(--font-heading); color: var(--wf-ink); }
.st-goal.is-example .st-k .st-tag { font: 400 14px/1.2 var(--font-body, inherit); color: var(--wf-muted); }
.st-goal.is-example .st-g { font-size: clamp(15px, 2vw, 18px); font-weight: 400; color: var(--wf-muted); }
.st-fixes { display: grid; justify-items: center; gap: 14px; width: 100%; }
.st-fixes-many { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.st-fixes-many .st-skill { width: 100%; }
.st-fixes-many .st-skill-lines li { font-size: 15px; }
@media (min-width: 768px) {
  .st-cards .st-team-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; justify-self: center; }
  .st-fixes-many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .st-fixes-many { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The tangle ends in Powerplant: every card's thread runs into it (yellow), under a caption. */
.st-web .st-web-pp { position: absolute; left: 50%; top: 860px; z-index: 2; margin: 0; padding: 18px 40px; transform: translateX(-50%); }

.st-web-cap { position: absolute; left: 50%; top: 802px; z-index: 2; margin: 0; padding: 4px 14px; border-radius: 8px; background: var(--theme-surface); font-size: 17px; white-space: nowrap; color: var(--wf-muted); transform: translateX(-50%); }
.st-web .links .l-in { stroke: var(--wf-win); stroke-width: 1.5; opacity: 0.55; }
/* Hand-offs: each kind looks different, and says what it is along the line. */
.st-web .links .k-self { stroke: var(--wf-line); stroke-width: 1.5; stroke-dasharray: none; }

.st-web .links text.l-label { font: 500 12px var(--font-body); fill: var(--wf-ink); stroke: none; }
.st-web .links rect.l-pill { fill: var(--wf-card); stroke: var(--wf-line); stroke-width: 1; stroke-dasharray: none; }

.st-web > svg.labels { z-index: 3; }

/* The end of every story: one box, everyone's face stacked, everyone's agent has it (Jaycee, Oct 22). */
.st-gotit { display: grid; justify-items: center; gap: 12px; padding: 22px 32px; border: 1px solid var(--wf-line); border-radius: 14px; background: var(--wf-card); box-shadow: 0 14px 34px var(--theme-shadow); }
.st-gotit .st-faces { margin: 0; }
.st-gotit .st-faces > * { width: 48px; height: 48px; box-shadow: 0 0 0 3px var(--wf-card); }
.st-gotit .st-faces > * + * { margin-left: -12px; }
.st-face > img:first-child { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.st-face-ag { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--wf-card); box-shadow: 0 0 0 1px var(--wf-line); }
.st-face-ag img { width: 11px; height: 11px; }
[data-theme="light"] .st-face-ag img { filter: brightness(0.2); }
.st-gotit-t { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 16px; font-weight: 500; color: var(--wf-ink); }
.st-gotit-t svg { color: var(--palette-golden-600); }
.st-gotit-ag { display: flex; gap: 10px; margin: 0; font-size: 13px; color: var(--wf-muted); }
.st-gotit-ag span { display: inline-flex; align-items: center; gap: 4px; }
.st-gotit-ag img { width: 13px; height: 13px; }
[data-theme="light"] .st-gotit-ag img { filter: brightness(0.2); }

/* How it works, under every story: the plugs-in style diagram, full width. */
.st-how-beat { gap: 18px; }
.st-how-lead { margin: 0; max-width: 46ch; font-size: clamp(17px, 2vw, 20px); color: var(--wf-muted); }
.st-how-beat .rf-dia { width: 100%; max-width: 1080px; margin-top: 16px; text-align: center; }

/* Connector lines run behind the beats, so headings get a page-coloured backing: the line stops at
   the words instead of crossing them (Jaycee, Oct 22). */
.st-cards .st-h, .st-d .st-h { position: relative; padding: 6px 16px; border-radius: 10px; background: var(--theme-surface); }

/* D, Oct 22: chaotic on purpose. The web runs the full width of the screen and cards run off both
   edges; cards are bigger, steadier in style, more tilted. Hand-offs are loose dashed string with no
   words; every thread then pulls cleanly into Powerplant. Phones stretch it taller and keep cards
   mostly on screen. */
.vpage:has(.st-bleed) { overflow-x: clip; }
.st-bleed { width: 100vw; margin-inline: calc(50% - 50vw); overflow: visible; padding: 0; }
.st-bleed .st-web { --yk: 1; height: calc(1040px * var(--yk)); min-width: 0; max-width: none; }
.st-bleed .st-wc { top: calc(var(--y) * var(--yk)); width: 230px; padding: 14px 16px; border-radius: 12px; box-shadow: 0 18px 40px var(--theme-shadow); transform: translateX(-50%) rotate(var(--r)); }
.st-bleed .st-wc-t { font-size: 17px; line-height: 1.3; }
.st-bleed .st-wc-who { font-size: 14px; }
.st-bleed .st-wc-who .st-wc-av > img:first-child { width: 26px; height: 26px; }
.st-wc-badge { position: absolute; top: -12px; right: -10px; padding: 3px 9px; border-radius: 999px; background: var(--wf-bad); font-size: 13px; font-weight: 600; color: var(--wf-card); transform: rotate(6deg); }
.st-bleed .links .l-x { stroke: var(--wf-faint); stroke-width: 1.5; stroke-dasharray: 2 6; opacity: 0.9; }
.st-bleed .links .l-out { stroke: var(--wf-faint); stroke-dasharray: 2 6; }
.st-bleed .links .l-in { stroke: var(--wf-win); stroke-width: 2; opacity: 0.75; }
.st-bleed .st-web-cap { top: calc(780px * var(--yk)); font-size: 18px; color: var(--wf-ink); }
.st-bleed .st-web .st-web-pp { top: calc(1020px * var(--yk)); }
@media (max-width: 767px) {
  .st-bleed .st-web { --yk: 1.7; }
  .st-bleed .st-wc { left: calc(clamp(24, var(--x), 76) * 1%); width: 172px; padding: 12px; }
  .st-bleed .st-wc-t { font-size: 15px; }
  .st-bleed .st-web-cap { white-space: normal; width: 80%; text-align: center; }
  .st-bleed .st-web-goal { width: 86%; }
  .st-bleed .st-web-goal .st-g { white-space: normal; }
}

/* The team's attempts are the problem, so they don't shine (Jaycee, Oct 22): flat cards, no shadow,
   and each attempt sits on a soft red. */
.st-cards .st-card { box-shadow: none; }
/* What each person tries is plain; the red box, borderless, holds the problem it leaves (Jaycee, Oct 22). */
.st-card .f-q { justify-self: stretch; width: auto; max-width: none; margin: 0; padding: 0 11px; background: none; border: 0; color: var(--wf-ink); }
.st-card .f-q svg { color: var(--wf-muted); }
.st-card .f-a { justify-self: stretch; margin: 0; padding: 8px 11px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--wf-bad) 10%, var(--wf-card)); color: var(--wf-bad); }
.st-card .f-a svg { color: var(--wf-bad); }

/* D's ending, Oct 22 (Jaycee: "big big then small"): Powerplant, the skill, everyone and the result sit
   far apart, and each swells well past full size as it reaches the middle of the screen, then
   shrinks away. Phones get a gentler swing so nothing runs off the side. */
.st-d .st-stem { margin-top: 180px; }
.st-d .st-stem::before { display: none; }
.st-d [data-focus] { scale: calc(0.6 + 0.75 * var(--f, 1)) }
.st-d .st-good { padding: 6px 16px; border-radius: 10px; background: var(--theme-surface); }
@media (max-width: 767px) {
  .st-d .st-stem { margin-top: 120px; }
  .st-d [data-focus] { scale: calc(0.8 + 0.3 * var(--f, 1)); }
}
@media (prefers-reduced-motion: reduce) { .st-d [data-focus] { scale: none; } }
.st-d > svg.links .l-in { stroke: var(--wf-win); stroke-width: 2.5; }
.st-how-beat .st-h { max-width: 30ch; }

/* The close is its own band, so the story ends clearly before the blog starts (Oct 22). */
/* The close is an orange band, the same orange as the footer (Jaycee, Oct 22). */
.st-cta-beat { gap: 22px; padding: clamp(48px, 8vw, 96px) 20px; border-radius: 14px; background: var(--palette-golden-300); }
.st-cta-beat .st-h { color: var(--palette-greyscale-950); }
.st-cta-beat .st-h { background: none; }

/* Dotted and dashed lines are a light grey, between the border colour and the faint ink (Oct 22). */
.st, .rf-dia { --wf-dots: color-mix(in srgb, var(--wf-faint) 35%, var(--wf-line)); }
.st .links .l-out, .st .links .l-x, .st-bleed .links .l-x, .st-bleed .links .l-out, .hw2 .links .l-in { stroke: var(--wf-dots); }
.hw2-dash { border-top-color: var(--pre-line); }
.hw2-rows::before { border-left-color: var(--pre-line); }

/* Tangle lines start and end on card edges. The grey end pads are hidden (Jaycee, Oct 23): they
   read as stray dots beside the names. */
.st-web .links .l-pad { display: none; }

/* G: Powerplant as just the logo (Oct 22), toned down: a small circle with a soft glow that breathes
   slowly. Reduced motion keeps it still. */
.st-pp-logo { position: absolute; left: 50%; display: grid; place-items: center; width: 96px; height: 96px; z-index: 2; border-radius: 50%; background: var(--wf-win-soft); box-shadow: 0 0 0 1.5px var(--wf-win), 0 0 22px 2px color-mix(in srgb, var(--wf-win) 35%, transparent); transform: translateX(-50%); animation: pp-glow 3.6s ease-in-out infinite; }
.st-bleed .st-web .st-pp-logo { top: calc(890px * var(--yk)); }
.st-pp-logo img { width: 52px; height: auto; }
@keyframes pp-glow { 50% { box-shadow: 0 0 0 1.5px var(--wf-win), 0 0 30px 5px color-mix(in srgb, var(--wf-win) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { .st-pp-logo { animation: none; } }

/* Skill cards open with a grey header bar, like the pipeline cards (Oct 22). */
.st-skill { overflow: hidden; }
.st-skill .st-skill-h { margin: -20px -22px 4px; padding: 12px 22px; border-bottom: 1px solid var(--wf-line); background: color-mix(in srgb, var(--wf-line) 40%, var(--wf-card)); }
.st-skill .st-skill-h em { background: var(--wf-card); }

/* H: Allen's headline as one big bold sentence, then the story. */

.st-web .st-web-pp.st-pp-logo { padding: 0; }
.st-good-cta { justify-self: center; margin-top: 8px; }
.st-d .st-good-cta { margin-top: 0; }

/* Powerplant in the card stories, Oct 22: a small product panel instead of a big logo box with chips.
   A grey header bar like the skill card, one row per teammate with what it picked up from them. */

/* Stacked faces: the team (first in the list) sits on top, everyone after tucks in behind (Oct 22). */
.st-faces > * { position: relative; }
.st-faces > :nth-child(1) { z-index: 8; }
.st-faces > :nth-child(2) { z-index: 7; }
.st-faces > :nth-child(3) { z-index: 6; }
.st-faces > :nth-child(4) { z-index: 5; }
.st-faces > :nth-child(5) { z-index: 4; }
.st-faces > :nth-child(6) { z-index: 3; }
.st-faces > :nth-child(7) { z-index: 2; }
.st-faces > :nth-child(8) { z-index: 1; }
/* The result line and its button sit together, with room above them. */
.st-endline { display: grid; justify-items: center; gap: 16px; margin-top: clamp(24px, 4vw, 48px); }
.st-endline .st-good-cta { margin-top: 0; }
/* Powerplant panel, simplified (Oct 22): header, then everyone's faces and the session count. */

/* The bulb that rides the lines as you scroll (Oct 22). */

/* Powerplant: the logo sitting on top of its headline (Jaycee, Oct 22). */
.st-ppx { display: grid; justify-items: center; gap: clamp(16px, 3vw, 24px); }
.st-ppx .st-h { margin: 0; }
.st-pplogo-mark { display: grid; place-items: center; width: clamp(96px, 26vw, 128px); aspect-ratio: 1; border-radius: 50%; background: var(--wf-win-soft); box-shadow: 0 0 0 2px var(--wf-win), 0 0 32px 4px color-mix(in srgb, var(--wf-win) 28%, transparent); }
.st-pplogo-mark img { width: 52%; height: auto; }

/* Hover shadow on the shiny cards: soft and light (Jaycee, Oct 22: the default was too heavy). */
.st .holo:hover { box-shadow: 0 10px 28px color-mix(in srgb, var(--palette-greyscale-950) 10%, transparent); }

/* The bulb rides above the page, out of the grid (it was taking a row and a gap after the band). */
main:has(> .st) > .fw-extension { margin-top: 0; }

/* The bulbs: a layer under the cards and headings, so the lights pass behind everything. Each line
   gets a bright head and a tail of smaller, fainter dots that trail it along the line. */
.st-bulbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* These beat the ".st > :not(svg)" rules that would put the layer back into the page flow. */
.st > .st-bulbs { position: absolute; inset: 0; z-index: 0; }
.hw2 > .st-bulbs { position: absolute; inset: 0; z-index: 2; }
.st-bulb { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--palette-golden-300); box-shadow: 0 0 0 3px color-mix(in srgb, var(--palette-golden-400) 50%, transparent), 0 0 18px 6px color-mix(in srgb, var(--palette-golden-400) 50%, transparent); opacity: 0; transition: opacity 0.25s; }
.st-bulb.on { opacity: 1; }
.st-bulb-tail { left: -4px; top: -4px; width: 8px; height: 8px; box-shadow: 0 0 10px 3px color-mix(in srgb, var(--palette-golden-400) 40%, transparent); }
.st-bulb-tail.on { opacity: calc(0.7 - var(--k) * 0.18); }
/* Closing band: yellow, and its button flat (no raised edge) so it reads on the yellow (Jaycee, Oct 22). */
/* Chonky: big, with a thick pressed-down edge (Jaycee, Oct 22). */
.st-cta-beat .cta { width: auto; min-width: min(100%, 260px); padding: 22px 40px; border-radius: 14px; background: var(--palette-greyscale-950); color: var(--palette-golden-50); font-size: 19px; box-shadow: 0 7px 0 var(--palette-greyscale-700); }
.st-cta-beat .cta:hover { background: var(--palette-greyscale-900); }
.st-cta-beat .cta:active { transform: translateY(7px); box-shadow: 0 0 0 var(--palette-greyscale-700); }
/* Before Powerplant the lines and lights are a light sage grey; only what comes out of Powerplant is
   yellow (Jaycee, Oct 22). */
.st { --pre-line: color-mix(in srgb, var(--palette-holly-300) 40%, var(--palette-greyscale-300)); --pre-light: color-mix(in srgb, var(--palette-holly-100) 60%, var(--palette-greyscale-50)); }
.links path.l-pre, .st-web .links path.l-pre, .st-bleed .links path.l-pre, .hw2 .links path.l-pre { stroke: var(--pre-line); }
.st-bulb-grey { background: var(--pre-light); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pre-line) 45%, transparent), 0 0 14px 4px color-mix(in srgb, var(--pre-light) 70%, transparent); }
.st-bulb-grey.st-bulb-tail { box-shadow: 0 0 8px 2px color-mix(in srgb, var(--pre-light) 60%, transparent); }

/* The big footer under the story pages is yellow (Jaycee, Oct 22), with dark text in either theme. */
.ivory-variation:has(.st) footer.ft { --muted: var(--palette-greyscale-800); border-color: transparent; background: var(--palette-golden-300); color: var(--palette-greyscale-950); }
.ivory-variation:has(.st) footer.ft a { color: var(--palette-greyscale-950); }
.ivory-variation[data-theme="dark"]:has(.st) footer.ft .ft-bolt { filter: none; }
.ivory-variation[data-theme="dark"]:has(.st) footer.ft .ivory-footer-word { background: var(--palette-greyscale-950); }

/* Bleed (story B, Jaycee, Oct 22): the hero image runs off the right edge, and the five people use
   the full screen width. The page clips the image so nothing scrolls sideways. */
.st-page-bleed { overflow-x: clip; }
.st-page-bleed .vhero-art.vhero-art-stack { width: 112%; max-width: none; margin: 0; justify-self: start; }
@media (min-width: 960px) {
  .st-page-bleed .vhero { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .st-page-bleed .vhero-art.vhero-art-stack { width: 125%; }
}
@media (min-width: 768px) {
  /* Jaycee, Oct 22: not off the sides after all; as wide as the screen allows, with a gutter. */
  .st-page-bleed .st-team-beat .st-team { --row: min(calc(100vw - 48px), 1400px); width: var(--row); max-width: none; justify-self: start; margin-inline: calc(50% - var(--row) / 2); }
}

/* Spacing (audit, Oct 22, against Linear and Vercel: 44 to 48px from a heading to its content, and
   about 160 to 260px between sections). Mobile first: tighter on phones, opening up on desktop. */
.st-beat { gap: clamp(16px, 2vw, 24px); }
.st-d > .st-goal-beat { margin-bottom: calc(clamp(16px, 2vw, 24px) - clamp(80px, 12vw, 160px) - clamp(16px, 3vw, 40px)); }
.st-d .st-stem { margin-top: clamp(96px, 11vw, 160px); }
.st-endline { gap: 24px; }
/* A heading and its one-line lead stay close; the diagram and the band's button keep their own room. */
.st-how-beat { gap: 18px; }
.st-how-beat .rf-dia { margin-top: clamp(10px, 1.8vw, 26px); }
.st-cta-beat { gap: 22px; }

/* Phones and tablets: the hero image comes first, above the headline (Jaycee, Oct 22). */
@media (max-width: 959px) {
  .vpage:has(.st) .vhero-art { order: -1; }
  .vpage:has(.st) .vhero-art.vhero-art-stack { width: min(72%, 340px); }
  /* B still runs it off the right edge, just smaller. */
  .st-page-bleed .vhero-art.vhero-art-stack { width: min(84%, 400px); justify-self: end; margin-right: -14%; }
}

/* Tangle on phones (Jaycee, Oct 22: the scattered layout piled cards on top of each other): two
   zig-zag columns from each card's --mx/--my, then the caption and the logo below. */
@media (max-width: 767px) {
  .st-bleed .st-web { height: 1300px; }
  .st-bleed .st-wc { left: calc(var(--mx) * 1%); top: var(--my); width: min(160px, 44vw); }
  .st-bleed .st-web-cap { top: 1080px; }
  .st-bleed .st-web .st-pp-logo { top: 1170px; }
}

/* Reserve the hero image's shape before it loads, so the headline doesn't jump (Lighthouse CLS). */
.vpage:has(.st) .vhero-art.vhero-art-stack { aspect-ratio: 1209 / 793; height: auto; }

/* Accessibility pass (Oct 22). The team caption comes first in the markup and sits under the cards. */
.st-team-beat .st-cap { order: 1; }
.st-cta-beat .cta:focus-visible { outline: 2px solid var(--palette-greyscale-950); outline-offset: 4px; }
/* The count badge: light text on the deeper red, 4.5:1 or better in both themes. */
.st-wc-badge { background: var(--palette-red-600); color: var(--palette-greyscale-50); }
/* Dark theme: the problem text a step lighter so it clears 4.5:1 on its red box. */
[data-theme="dark"] .st-card .f-a { color: color-mix(in srgb, var(--palette-red-400) 75%, var(--palette-greyscale-50)); }
[data-theme="dark"] .st-card .f-a svg { color: inherit; }