/* Consulting homepage variations (Oct 26): Powerplant plus hands-on help from our team. Builds on
   story.css and howflow.css; only the new pieces live here. Mobile first, site tokens only. */
.cx {
  /* Jaycee, Oct 26: shadows were too heavy. One soft shadow colour for every card on these pages. */
  --theme-shadow: color-mix(in srgb, var(--theme-accent-contrast) 6%, transparent);
  --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-win: var(--theme-accent);
  --wf-win-soft: color-mix(in srgb, var(--theme-accent) 16%, var(--theme-surface-raised));
  --wf-bad: var(--theme-bad);
  --cx-shadow: 0 1px 2px var(--theme-shadow), 0 8px 20px var(--theme-shadow);
}
/* Review bar: flip between A, B and C. Off public pages. */
.cx-bar { position: fixed; left: 50%; bottom: 12px; z-index: 50; display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 24px); padding: 4px; border: 1px solid var(--theme-line); border-radius: 999px; background: var(--theme-surface-raised); box-shadow: 0 8px 24px var(--theme-shadow); transform: translateX(-50%); }
.cx-bar-l { display: none; padding: 0 8px 0 10px; font-size: 13px; color: var(--theme-ink-muted); }
.cx-bar a { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--theme-ink); text-decoration: none; }
.cx-bar a span { display: none; }
.cx-bar a[aria-current] { background: var(--theme-sage-surface); box-shadow: inset 0 0 0 1px var(--theme-sage-line); }
@media (min-width: 1200px) { .cx-bar-l, .cx-bar a span { display: inline; } }
/* Keep the review bar from covering the footer's last line. */
body:has(.cx-bar) { padding-bottom: 72px; }
/* A, one flow (Jaycee, Oct 26): the tangle, then Connect, Find, Fix and Measure as matching cards down
   the middle, and a loop from Measure back up to Find. Cards leave room on the right for that loop. */
.cx .st .links .l-loop { fill: none; stroke: var(--wf-win); stroke-width: 2.5; }
.cx .st .links .l-head { fill: var(--wf-win); stroke: none; }
/* The steps as five cards (Jaycee, Oct 26): each a different surface, one picture, a title and one
   line. One column on phones, then two, then three across with the last card wide. */
.cx-bento { display: grid; gap: 14px; width: 100%; max-width: 1080px; margin: clamp(56px, 7vw, 88px) 0 0; padding: 0; list-style: none; text-align: left; }
.cx-card { display: grid; grid-template-rows: 1fr auto auto; gap: 8px; min-height: 240px; padding: 24px; border-radius: 20px; }
.cx-card h3 { margin: 0; font: 500 clamp(22px, 2.4vw, 26px)/1.15 var(--font-heading); }
.cx-card p { margin: 0; max-width: 34ch; font-size: 16px; line-height: 1.45; }
.cx-card-pic { align-self: start; display: flex; align-items: center; min-height: 72px; margin-bottom: 16px; }
.cx-card-yellow { background: var(--theme-accent); color: var(--theme-accent-contrast); }
.cx-card-yellow p { color: var(--theme-accent-contrast); }
.cx-card-dark { background: var(--theme-accent-contrast); color: var(--theme-action-green-ink); box-shadow: inset 0 0 0 1px var(--theme-line); }
.cx-card-dark p { color: color-mix(in srgb, var(--theme-action-green-ink) 80%, transparent); }
.cx-card-white { background: var(--wf-card); color: var(--wf-ink); box-shadow: inset 0 0 0 1px var(--wf-line); }
.cx-card-white p { color: var(--wf-muted); }
.cx-card-sage { background: var(--theme-sage-surface); color: var(--wf-ink); box-shadow: inset 0 0 0 1px var(--theme-sage-line); }
.cx-card-sage p { color: var(--wf-ink); }
.cx-card-faces img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--theme-accent-contrast); }
.cx-card-faces img + img { margin-left: -14px; }
.cx-card-quote { gap: 10px; font: 500 clamp(34px, 4vw, 44px)/1 var(--font-heading); color: var(--theme-bad); }
[data-theme="dark"] .cx-card-quote { color: var(--theme-bad); }
.cx-card-quote b { padding: 4px 10px; border-radius: 999px; background: var(--theme-bad); font: 500 15px/1.2 var(--font-body); color: var(--theme-action-green-ink); }
.cx-card-file { gap: 8px; width: fit-content; max-width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--theme-surface); box-shadow: 0 8px 20px var(--theme-shadow); font: 500 clamp(12px, 3.8vw, 17px)/1 ui-monospace, monospace; white-space: nowrap; }
@media (min-width: 640px) { .cx-card-file { gap: 10px; padding: 14px 18px; } }
[data-theme="light"] .cx-card-file img { filter: brightness(0.2); }
.cx-card-chart { position: relative; width: 100%; height: 96px; }
.cx-card-chart svg { width: 100%; height: 100%; overflow: visible; }
.cx-card-chart path { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.cx-card-chart .was { stroke: var(--wf-bad); stroke-dasharray: 5 5; }
.cx-card-chart .now { stroke: var(--theme-accent-edge); }
.cx-card-chart i { position: absolute; right: 0; bottom: -6px; padding: 2px 8px; border-radius: 999px; background: var(--wf-win-soft); font: 500 14px/1.3 var(--font-body); font-style: normal; color: var(--wf-ink); }
@media (min-width: 640px) { .cx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cx-card-wide { grid-column: span 2; } }
@media (min-width: 1024px) { .cx-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .cx-card { min-height: 300px; padding: 28px; } .cx-card-wide { grid-column: span 2; } }
/* A3: the steps as white cards down the page (Jaycee, Oct 26), each with its icon sitting on the top
   edge where the yellow line comes in, like the outcome boxes below them. */
.cx .holo:hover { box-shadow: 0 2px 4px var(--theme-shadow), 0 14px 30px var(--theme-shadow); }
/* A4: each step card carries a small picture (Jaycee, Oct 26). Wider cards, same flow. */
div, figure):last-child { width: 100%; margin: 12px 0 0; }
/* A5, from Jaycee's sketch (Oct 26): rows of three that branch and join on the yellow line. Phones
   keep three across and drop the extra lines, so the branching still reads. */
#sk-find { margin-top: clamp(110px, 13vw, 190px) !important; }
/* Grow and shrink on scroll (Jaycee, Oct 26: "BIG then normal"): single cards use the story's swing;
   full-width rows swing less so they stay on screen. story.js sets --f, and its bulbs ride the lines. */
.st-d .cx-wide-focus[data-focus] { scale: calc(0.86 + 0.2 * var(--f, 1)); }
@media (max-width: 767px) { .st-d .cx-wide-focus[data-focus] { scale: calc(0.94 + 0.08 * var(--f, 1)); } }
@media (prefers-reduced-motion: reduce) { .st-d .cx-wide-focus[data-focus] { scale: none; } }
/* D's help band (Allen, Oct 26): one calm card under the product story. The quote is the reader's
   worry; the answer and the list sit beside it from 960px. */
.cx-help-beat { width: 100%; }
.cx-help-h { margin: 0; max-width: 16ch; font: 500 clamp(30px, 4.4vw, 48px)/1.08 var(--font-heading); color: var(--wf-ink); text-wrap: balance; }
/* Untangle's cards sit under their own heading; the yellow card's mark is the deep-brown footer one,
   since the yellow logo had too little contrast on yellow (Jaycee, Oct 26). */
.cx-bento-beat { gap: 18px; }
.cx-bento-beat .cx-bento { margin-top: clamp(10px, 1.8vw, 26px); }
/* Help as a title and a box per offer (Jaycee, Oct 26): one column on phones, two from 640px, three
   from 1024px. The faces, button and joke sit underneath. */
.cx-help-beat { gap: 18px; }
.cx-help-beat .st-how-lead { max-width: 52ch; }
.cx-offers { display: grid; gap: 14px; width: 100%; max-width: 1080px; margin: clamp(10px, 1.8vw, 26px) 0 0; padding: 0; list-style: none; text-align: left; }
.cx-offer2 { display: grid; align-content: start; gap: 8px; padding: 22px; border: 1px solid var(--wf-line); border-radius: 16px; background: var(--wf-card); box-shadow: var(--cx-shadow); }
.cx-offer2-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: var(--wf-win-soft); color: var(--theme-accent-edge); }
.cx-offer2 h3 { margin: 0; font: 500 clamp(19px, 2vw, 22px)/1.2 var(--font-heading); color: var(--wf-ink); }
.cx-offer2 p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--wf-muted); }
.cx-help-foot { display: grid; justify-items: center; gap: 14px; margin-top: 18px; }
.cx-help-foot .cx-help-side { margin: 0; font-size: 15px; color: var(--wf-muted); }
@media (min-width: 640px) { .cx-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cx-offers { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .cx-offer2 { grid-column: span 2; } .cx-offer2:nth-child(4) { grid-column: 2 / span 2; } }
/* Help in one box (Jaycee, Oct 26): the title, offers, faces and button all inside one card; the
   offer boxes inside sit flat on the page colour. */
.cx-help-box { display: grid; justify-items: center; gap: 18px; width: 100%; max-width: 1120px; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px); border: 1px solid var(--wf-line); border-radius: 28px; background: var(--wf-card); box-shadow: var(--cx-shadow); text-align: center; }
.cx-help-box .st-h { max-width: 18ch; }
.cx-help-box .cx-offer2 { background: var(--theme-surface); box-shadow: none; }
.st-d .cx-help-box .st-h { background: none; padding: 0; }
/* Help, header left and squares right (Jaycee, Oct 26). Squares are tinted tiles with the icon up
   top and the words at the bottom: a different look from the cards elsewhere on the page. */
.cx-help-box { text-align: left; justify-items: stretch; gap: 32px; }
.cx-help-head { display: grid; justify-items: start; align-content: center; gap: 16px; }
.cx-help-head .st-h { max-width: 14ch; font-size: clamp(30px, 4.2vw, 48px); }
.cx-help-lead { margin: 0; max-width: 40ch; font-size: clamp(17px, 1.8vw, 19px); line-height: 1.5; color: var(--wf-muted); }
.cx-help-head .cta { margin-top: 6px; }
.cx-help-head .cx-help-side { margin: 0; font-size: 14px; color: var(--wf-faint); }
.cx-squares { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cx-square { display: grid; grid-template-rows: 1fr auto auto; gap: 6px; min-height: 150px; padding: 20px; border-radius: 18px; background: var(--theme-sage-faint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-sage-line) 35%, transparent); }
.cx-square-ic { align-self: start; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--wf-card); color: var(--theme-accent-edge); box-shadow: var(--cx-shadow); }
.cx-square h3 { margin: 0; font: 500 19px/1.2 var(--font-heading); color: var(--wf-ink); }
.cx-square p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--wf-muted); }
@media (min-width: 520px) { .cx-squares { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cx-square { aspect-ratio: 1; min-height: 0; } }
@media (min-width: 960px) { .cx-help-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; } .cx-square { padding: 22px; } }
/* Squares in sage, not blue (Jaycee, Oct 26): Holly-400 mixed into the card, per the sage rule. */
.cx-square { background: color-mix(in srgb, var(--theme-sage-strong) 15%, var(--wf-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-sage-strong) 30%, transparent); }
/* The separate-boxes variation: four boxes, two by two from 640px, four across from 1100px. */
@media (min-width: 1024px) { .cx-offers-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; } .cx-offers-4 .cx-offer2, .cx-offers-4 .cx-offer2:nth-child(4) { grid-column: auto; } }
/* Four squares in the button's design-system colours (Jaycee, Oct 26): #FFA600 orange
   (--palette-golden-500, no theme role), the button yellow (--theme-accent), its ink (--theme-accent-contrast) as the
   near-black, and the Subscribe green (--theme-action-green). Each sets its own ink. */
.cx-square { box-shadow: none; }
.cx-sq-1 { background: var(--palette-golden-500); }
.cx-sq-2 { background: var(--palette-golden-300); }
.cx-sq-1, .cx-sq-2 { --sq-ink: var(--theme-accent-contrast); --sq-soft: color-mix(in srgb, var(--theme-accent-contrast) 82%, transparent); }
.cx-sq-3 { background: var(--palette-greyscale-950); box-shadow: inset 0 0 0 1px var(--theme-line); --sq-ink: var(--theme-action-green-ink); --sq-soft: color-mix(in srgb, var(--theme-action-green-ink) 80%, transparent); }
.cx-sq-4 { background: var(--palette-holly-400); --sq-ink: var(--theme-accent-contrast); --sq-soft: color-mix(in srgb, var(--theme-accent-contrast) 82%, transparent); }
.cx-square h3 { color: var(--sq-ink); }
.cx-square p { color: var(--sq-soft); }
.cx-square .cx-square-ic { background: color-mix(in srgb, var(--sq-ink) 12%, transparent); color: var(--sq-ink); box-shadow: none; }
/* The hover shine, softer on these pages (Jaycee, Oct 26: the glow had a bright dot in the middle):
   a wider, fainter highlight and a quieter sheen, and none of the highlight on the dark tiles. */
.cx .holo::before { background: radial-gradient(600px circle at var(--mx) var(--my), color-mix(in srgb, var(--theme-action-green-ink) 10%, transparent), transparent 70%); mix-blend-mode: soft-light; }
.cx .holo:hover::after { opacity: 0.45; }
.cx :is(.cx-sq-3, .cx-card-dark).holo::before { display: none; }
.cx :is(.cx-sq-3, .cx-card-dark).holo:hover::after { opacity: 0.25; }

/* Our photos on the black tile, in place of its icon (Jaycee, Oct 26). */
.cx-square-faces { align-self: start; display: flex; }
.cx-square-faces img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--palette-greyscale-950); }
.cx-square-faces img + img { margin-left: -12px; }

/* Boxes version: our faces under the quote (Jaycee, Oct 26). */
.cx-quote-faces { display: flex; justify-content: center; align-items: center; margin: 4px 0 0; }
.cx-quote-faces img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--theme-surface); }
.cx-quote-faces img + img { margin-left: -14px; }
/* Every face pile stacks Allen on top, then Jenn, then Jaycee (Jaycee, Oct 26). */
:is(.cx-quote-faces, .cx-square-faces, .cx-card-faces, .cx-crew) img { position: relative; }
:is(.cx-quote-faces, .cx-square-faces, .cx-card-faces, .cx-crew) img:nth-child(1) { z-index: 3; }
:is(.cx-quote-faces, .cx-square-faces, .cx-card-faces, .cx-crew) img:nth-child(2) { z-index: 2; }
:is(.cx-quote-faces, .cx-square-faces, .cx-card-faces, .cx-crew) img:nth-child(3) { z-index: 1; }