/* Oct 22 evening, dark first (v16): the use case pages wear the homepage's charcoal and the demo's glass. Every colour in the
   dark block at the end of this file comes from these tokens, so light mode is a later 1-to-1 flip: redefine them under
   [data-theme="light"] (not built: Oct 22, Lindsey kept the page dark and made only the FAQs and the close light, below). Department colours are the product films' colourblind-vetted set; carry them exactly. */
:root{
  --ucp-bg:var(--neutral-950);--ucp-s1:var(--neutral-900);--ucp-s2:var(--neutral-850);
  --ucp-ink:var(--neutral-50);--ucp-ink-2:var(--neutral-400);--ucp-ink-3:var(--neutral-500);
  --ucp-line:rgb(247 247 245 / .12);--ucp-hair:rgb(247 247 245 / .07);--ucp-rule:rgb(247 247 245 / .10);
  --ucp-mint:var(--leaf-300);--ucp-mint-hover:var(--leaf-200);--ucp-on-mint:var(--neutral-950);--ucp-green:var(--leaf-500);
  --ucp-mint-line:rgb(176 225 182 / .30);--ucp-mint-fill:rgb(176 225 182 / .10);--ucp-mint-glow:rgb(176 225 182 / .9);
  --ucp-glass:linear-gradient(160deg,rgb(40 47 43 / .82),rgb(22 27 24 / .82));
  --ucp-glass-line:rgb(247 247 245 / .12);
  --ucp-glass-shadow:0 30px 60px -30px rgb(0 0 0 / .75),inset 0 1px 0 rgb(255 255 255 / .04);
  --ucp-radius:16px;
  --ucp-wash:radial-gradient(40% 45% at 72% 48%,rgb(103 184 115 / .08),transparent 70%),radial-gradient(30% 30% at 12% 10%,rgb(103 184 115 / .05),transparent 70%),radial-gradient(34% 34% at 90% 96%,rgb(103 184 115 / .05),transparent 70%);
  --ucp-ease:cubic-bezier(.22,1,.36,1);--ucp-ease-io:cubic-bezier(.65,0,.35,1);
  --ucp-step-ink:#9AA09B;--ucp-step-icon:#6F7570;--ucp-step-line:rgb(255 255 255 / .14);--ucp-prog:#00B489;
  --dept-cs:#7FB3D5;--dept-sales:#B3E2B6;--dept-mkt:#E7A08F;--dept-tech:#6CC4C0;--dept-ops:#B59CE0;--dept-hr:#E07A6A;--dept-fin:#E4B46A;
}
/* Use case page (draft, Oct 20; Brian first pass Oct 20: small text moved off ink-muted, which is 4.40:1 on the page and lower on bg-subtle; body paragraphs in main ink) */
/* Use case page (draft, Oct 20): hero with one graphic, findings row, outcome panel, FAQs. Korravo Web Design System:
   colour comes only from semantic.css tokens; size and spacing from tokens.css. Shell (bar, footer, .btn) stays in pages.css. */
.ucp{background:var(--color-bg-page);color:var(--color-ink);padding-top:var(--nav-h)}
.ucp .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
@media (min-width:1100px){.ucp .wrap{padding:0}}
.ucp h1,.ucp h2,.ucp h3{font-weight:500;text-wrap:balance}
.ucp p{text-wrap:pretty}
.ucp-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-secondary);font-weight:500}

/* 1. hero */
.ucp-hero{padding:clamp(28px,4vw,56px) 0 clamp(48px,6vw,88px)}
.ucp-hero-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center}
.ucp-hero-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.ucp-hero h1{font-size:var(--h2);line-height:1.04;letter-spacing:-.03em}
.ucp-lede{font-size:var(--lead);line-height:1.6;color:var(--color-ink);max-width:32em}
.ucp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:6px}
.ucp-actions .btn{background:var(--color-ink);color:var(--color-ink-inverse)!important}
.ucp-actions .btn:hover{background:var(--color-bg-inverse-raised);box-shadow:none}

/* product view, from Nicole's Oct 20 concept */
.ucp-stage{margin:0;background:var(--color-bg-subtle);border-radius:16px;padding:clamp(12px,1.6vw,22px);display:grid;gap:10px;min-width:0}
.ucp-ex{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-secondary);justify-self:end}

/* 2. findings row */
.ucp-finds{background:var(--color-surface);border-block:1px solid var(--color-line-subtle);padding:clamp(48px,6vw,96px) 0}
.ucp-finds-row{list-style:none;padding:0;margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--color-line)}
.ucp-finds-row li{display:flex;flex-direction:column;gap:12px;padding:28px clamp(16px,2.4vw,40px) 8px 0}
.ucp-finds-row li+li{border-left:1px solid var(--color-line);padding-left:clamp(16px,2.4vw,40px)}
.ucp-num{font-size:12px;letter-spacing:.1em;color:var(--color-brand-ink)}
.ucp-finds-row h3{font-size:var(--h3);line-height:1.25;letter-spacing:-.015em}
.ucp-finds-row p{font-size:16px;line-height:1.55;color:var(--color-ink)}
.ucp-finds-row .fix .ucp-num{color:var(--color-ink-secondary)}

/* 3. outcome panel */
.ucp-outcome{padding:clamp(48px,6vw,96px) 0}
.ucp-outcome-card{background:var(--color-bg-inverse);color:var(--color-ink-inverse);border-radius:16px;padding:clamp(24px,4vw,56px);display:grid;gap:28px}
.ucp-outcome-card .ucp-label{color:var(--color-ink-inverse-secondary)}
.ucp-strip{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--color-line-inverse)}
.ucp-strip div{padding:22px 24px 22px 0;display:grid;gap:8px;align-content:start;min-width:0}
.ucp-strip div+div{border-left:1px solid var(--color-line-inverse);padding-left:24px}
.ucp-strip dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-inverse-secondary)}
.ucp-strip dd{margin:0;font-size:var(--lead);line-height:1.45}
.ucp-strip b{display:block;font-size:var(--h3-lg);font-weight:500;letter-spacing:-.02em;color:var(--color-brand-soft);margin-bottom:4px}
/* section rule: square marks at both ends of one line above the FAQ grid; draws left to right once on scroll (uc-page.js).
   Starts visible: the left mark and the first part of the line are always shown, nothing waits at opacity 0. */
.ucp-faq-rule{max-width:var(--container);margin:0 auto clamp(32px,4vw,56px);padding:0 var(--gutter);display:flex;align-items:center}
@media (min-width:1100px){.ucp-faq-rule{padding:0}}
.ucp-faq-rule.is-pre{clip-path:inset(0 72% 0 0)}
.ucp-faq-rule.is-in{clip-path:inset(0 0 0 0);transition:clip-path .7s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.ucp-faq-rule.is-pre,.ucp-faq-rule.is-in{clip-path:none;transition:none}}
.ucp-faq-head{position:sticky;top:calc(var(--nav-h) + 32px);display:grid;gap:32px;justify-items:start}
.ucp-faq-head h2{font-size:var(--h2);line-height:1.06;letter-spacing:-.03em}
.ucp-faq-head .btn{background:var(--color-ink);color:var(--color-ink-inverse)!important}
.ucp-faq-head .btn:hover{background:var(--color-bg-inverse-raised);box-shadow:none}
.ucp-faq-list{border-top:1px solid var(--color-line)}
/* side by side, the drawn rule above is the top border for both columns, so the list drops its own (it came back as a second line 56 px lower) */
@media (min-width:1001px){.ucp-faq-list{border-top:0}.ucp-faq-list details:first-child summary{padding-top:4px}}
.ucp-faq-list details{border-bottom:1px solid var(--color-line)}
.ucp-faq-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:24px 0;font-size:var(--h3);font-weight:500;letter-spacing:-.01em;line-height:1.3}
.ucp-faq-list summary::-webkit-details-marker{display:none}
.ucp-faq-list summary::after{content:"+";font-size:24px;font-weight:400;color:var(--color-brand-ink);transition:transform .25s var(--ease)}
.ucp-faq-list details[open] summary::after{transform:rotate(45deg)}
.ucp-faq-list summary:focus-visible{outline:2px solid var(--color-brand-ink);outline-offset:4px}
.ucp-faq-list details>div{padding:0 48px 24px 0}
.ucp-faq-list details p{font-size:var(--lead);line-height:1.6;color:var(--color-ink);max-width:40em}

@media (max-width:1000px){
  .ucp-hero-grid,.ucp-faq .wrap{grid-template-columns:1fr}
  .ucp-faq-head{position:static}
}
@media (max-width:760px){
  .ucp-finds-row,.ucp-strip{grid-template-columns:1fr}
  .ucp-finds-row li,.ucp-finds-row li+li{border-left:0;padding:24px 0 20px}
  .ucp-finds-row li+li{border-top:1px solid var(--color-line)}
  .ucp-strip div,.ucp-strip div+div{border-left:0;padding:18px 0}
  .ucp-strip div+div{border-top:1px solid var(--color-line-inverse)}
  .ucp-close .btn,.ucp-faq-head .btn{width:100%;justify-content:center}
  .ucp-faq-head{justify-items:stretch}
  .ucp-faq-list details>div{padding-right:0}
}
/* Oct 20, Brian: outcome panel with more depth, layout unchanged. Charcoal that deepens into pine green toward the bottom right,
   a soft green glow in that corner and a faint one at the top right, a gradient hairline border (neutral top left, green bottom
   right), green-tinted dividers and a soft shadow on the light page. Tokens only. */
.ucp-outcome-card{position:relative;isolation:isolate;
  background:
    radial-gradient(55% 90% at 100% 100%,color-mix(in srgb,var(--color-brand) 26%,transparent),transparent 72%),
    radial-gradient(35% 55% at 88% 0%,color-mix(in srgb,var(--color-brand) 7%,transparent),transparent 70%),
    linear-gradient(135deg,var(--color-bg-inverse) 0%,var(--color-bg-inverse) 42%,color-mix(in srgb,var(--color-brand-deep) 75%,var(--color-bg-inverse)) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-ink-inverse) 6%,transparent),0 30px 60px -36px color-mix(in srgb,var(--color-brand-deep) 70%,transparent)}
.ucp-outcome-card::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:17px;pointer-events:none;
  /* the border is an inset shadow (the browser draws it with smooth rounded corners), masked so it is strongest at the bottom
     right and fades out along both edges; the faint edge everywhere else is the card's own 1px inset shadow */
  /* sits 1px outside the card (radius 16 + 1) so the mint covers the card background's soft antialiased edge, which otherwise
     showed as dark pixels outside the border; 3px = 1px over that fringe + 2px visible inside */
  box-shadow:inset 0 0 0 3px var(--color-action);
  -webkit-mask-image:radial-gradient(65% 90% at 100% 100%,#000 0%,rgba(0,0,0,.65) 22%,rgba(0,0,0,.3) 42%,transparent 76%);
  mask-image:radial-gradient(65% 90% at 100% 100%,#000 0%,rgba(0,0,0,.65) 22%,rgba(0,0,0,.3) 42%,transparent 76%)}
.ucp-strip{border-block-color:color-mix(in srgb,var(--color-brand-soft) 16%,transparent)}
.ucp-strip div+div{border-left-color:color-mix(in srgb,var(--color-brand-soft) 16%,transparent)}
@media (max-width:760px){.ucp-strip div+div{border-top-color:color-mix(in srgb,var(--color-brand-soft) 16%,transparent)}
  .ucp-outcome-card{background:
    radial-gradient(90% 45% at 100% 100%,color-mix(in srgb,var(--color-brand) 26%,transparent),transparent 72%),
    linear-gradient(160deg,var(--color-bg-inverse) 0%,var(--color-bg-inverse) 50%,color-mix(in srgb,var(--color-brand-deep) 75%,var(--color-bg-inverse)) 100%)}}
/* Oct 20, Brian: bigger figures on the outcome panel (8 of 11, About 11 hours), about 1.2x */
.ucp-strip b{font-size:calc(var(--h3-lg) * 1.2);line-height:1.1}
/* Oct 20, Brian: figures fade from near-white to the light green (left to right); solid colour fallback stays */
@supports (-webkit-background-clip:text) or (background-clip:text){
  .ucp-strip b{background:linear-gradient(100deg,var(--color-ink-inverse) 0%,var(--color-brand-soft) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
}
/* Oct 20, Brian: hero restyle from a reference image; same layout and copy. A soft mint wash behind the hero, the grey stage frame
   removed so the chart is one card with a soft shadow, the selected process as a tinted panel flush inside it, larger brand
   scores in the sans, a halo on the selected dot, and the caption tucked into the card's bottom right. Tokens only. */
.ucp-hero{background:
  radial-gradient(55% 75% at 88% 35%,color-mix(in srgb,var(--color-brand-wash) 75%,transparent),transparent 72%),
  radial-gradient(45% 60% at 0% 100%,color-mix(in srgb,var(--color-brand-wash) 45%,transparent),transparent 70%),
  var(--color-bg-page)}
.ucp-stage{background:none;padding:0;position:relative;display:block}
.ucp-ex{position:absolute;right:24px;bottom:18px;margin:0}
.ucp-actions .btn{background:var(--color-ink)} /* black, as on the rest of the light sections (Brian, Oct 20) */
@media (max-width:760px){
  .ucp-hero{background:radial-gradient(90% 40% at 100% 75%,color-mix(in srgb,var(--color-brand-wash) 75%,transparent),transparent 72%),var(--color-bg-page)}
}
/* Oct 20, Brian: a very soft round green glow behind the outcome card, off its right side near the Request a Demo button, like a
   coloured drop shadow. Sits on the section wrap, under the card. */
.ucp-outcome .wrap{position:relative}
.ucp-outcome-card{z-index:1}
.ucp-outcome .wrap::before{content:"";position:absolute;z-index:0;pointer-events:none;width:420px;height:420px;border-radius:50%;
  /* just inside the card's bottom right corner (Brian: softer, a little left and up) (the wrap has no side padding from 1100px; below that the gutter is added) */
  right:-120px;bottom:-130px;
  background:radial-gradient(circle,color-mix(in srgb,var(--color-brand) 36%,transparent) 0%,color-mix(in srgb,var(--color-brand) 14%,transparent) 40%,transparent 68%);
  filter:blur(30px)}
@media (max-width:1099px){.ucp-outcome .wrap::before{right:calc(var(--gutter) - 120px)}}
@media (max-width:760px){.ucp-outcome .wrap::before{width:300px;height:300px;right:calc(var(--gutter) - 90px);bottom:-90px}}
.ucp-outcome{overflow-x:clip} /* the corner glow reaches past the page edge on narrower screens; no sideways scroll */
/* caption stays on one line inside the selected-process panel. It now reads "Illustrative example" and is the hero's only
   illustrative label (the one beside the button was removed, Brian Oct 20); the industry is already in the tags. */
@media (min-width:761px){
  .ucp-ex{width:calc(max(240px,38%) - 48px);text-align:right;white-space:nowrap;letter-spacing:.06em;font-size:10px}
} /* balance: two even lines, not one long line and a short one */
 /* phones: full width of the card (flex:none made it one long line, cut off) */
/* Brian: more subtle, less white (pale mint to signature mint), matching the client story numbers */
@supports (-webkit-background-clip:text) or (background-clip:text){.ucp-strip b{background-image:linear-gradient(100deg,color-mix(in srgb,var(--color-action) 72%,var(--color-ink-inverse)) 0%,var(--color-action) 85%)}}

/* Oct 21: same motif in the use case FAQ list: the open question gets a green line along its top edge with a mint square node,
   matching the homepage FAQ (the drawn rule above the section stays). */
.ucp-faq-list details{position:relative}
.ucp-faq-list details::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--color-brand-bright);transition:width .6s cubic-bezier(.22,1,.36,1)}
.ucp-faq-list details::after{content:"";position:absolute;left:0;top:-4px;width:8px;height:8px;background:var(--color-action);transform:scale(0);transition:transform .5s cubic-bezier(.22,1,.36,1) .1s}
.ucp-faq-list details[open]::before{width:100%}
.ucp-faq-list details[open]::after{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.ucp-faq-list details::before,.ucp-faq-list details::after{transition:none}}
@media (min-width:1001px){.ucp-faq-list details:first-child::before,.ucp-faq-list details:first-child::after{display:none}}
.ucp-hero{position:relative;overflow:clip;background:var(--color-bg-page)}
.ucp-hero>.wrap{position:relative;z-index:1}
.ucg{display:block;width:100%;aspect-ratio:1/.62}
@media (max-width:439px){.ucg{aspect-ratio:1/1.25}}
.ucp-stage .ucp-ex{position:absolute;right:0;bottom:auto;top:calc(100% + 10px);margin:0;width:auto}
@media (max-width:760px){.ucp-hero{background:var(--color-bg-page)}}
@media (max-width:979px){.ucp-stage .ucp-ex{top:calc(100% + 32px)}.ucp-hero{padding-bottom:clamp(64px,8vw,88px)}}
/* Val's hero splits copy and card 2:3, so the graphic keeps its wide layout down to the stacking point */
.ucp-hero-grid{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(48px,5vw,80px)}
@media (max-width:1000px){.ucp-hero-grid{grid-template-columns:1fr}}
.ucg .ucg-go{color:#fff}
.ucg .ucg-go:hover{background-color:color-mix(in srgb,var(--logo-green) 84%,var(--color-ink))!important}
.ucg .ucg-go:focus-visible{outline:2px solid #121614;outline-offset:2px}

/* ===== Oct 21, Nicole's use case doc: every page leads with AI. New pieces: the company line under the eyebrow, the AI
   result head (process and both scores), "how we got there", the business insight (one number, one finding), the close
   on its own, two-winner split (consultant), and Other use cases. Tokens only; every hover eases. ===== */
.ucp-meta{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-secondary);margin:0}
.ucp-back{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--color-ink);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .25s cubic-bezier(.22,1,.36,1)}
.ucp-back:hover{text-decoration-color:currentColor}
.ucp-answer{padding:clamp(36px,5vw,64px) 0 0}
.ucp-answer-t{margin:14px 0 0;max-width:34em;font-size:clamp(22px,2.2vw,30px);line-height:1.3;letter-spacing:-.015em;text-wrap:balance}
.ucp-ai-head{margin:16px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px}
.ucp-ai-head b{font-size:clamp(24px,2.4vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.15;margin-right:6px}
.ucp-score{display:inline-flex;align-items:baseline;gap:10px;font-size:clamp(28px,2.8vw,40px);font-weight:500;letter-spacing:-.02em;color:var(--logo-green)}
.ucp-score span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-secondary)}
.ucp-why{display:block}.ucp-why+.ucp-why{margin-top:10px}.ucp-why b{font-weight:500}
.ucp-how{display:block;margin-top:12px;font-size:14px;line-height:1.5;color:var(--color-ink-inverse-secondary)}
/* the business insight */
.ucp-ins{padding:clamp(48px,6vw,96px) 0}
.ucp-ins-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:24px}
.ucp-ins-card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:12px;padding:clamp(20px,2.4vw,32px)}
.ucp-ins-k{margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-brand-ink,#2F6B3A)}
.ucp-ins-big{margin:14px 0 0;font-size:clamp(44px,5vw,72px);font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--color-ink)}
.ucp-ins-num{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--color-ink-secondary);text-wrap:pretty}
.ucp-bars{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ucp-bars li{display:grid;grid-template-columns:110px minmax(0,1fr) 64px;align-items:center;gap:12px;font-size:14.5px}
.ucp-bars i{display:block;height:10px;border-radius:2px;background:linear-gradient(to right,var(--logo-green) calc(var(--v) * 100%),var(--color-bg-subtle) 0)}
.ucp-bars b{font-size:13px;font-weight:500;text-align:right;color:var(--color-ink-secondary)}
/* the consultant's two winners */
.ucp-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:20px}
.ucp-split-h{margin:0 0 6px;font-size:var(--h3);font-weight:500;letter-spacing:-.015em;color:var(--color-ink-inverse)}
.ucp-strip-col{grid-template-columns:1fr}
.ucp-strip-col div,.ucp-strip-col div+div{border-left:0;padding:18px 0}
.ucp-strip-col div+div{border-top:1px solid color-mix(in srgb,var(--color-brand-soft) 16%,transparent)}
/* other use cases: 6 links, 3 by 2, then 2 by 3, then 1 (no orphans) */
.ucp-more{padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--color-line-subtle)}
.ucp-more-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
/* Other use cases: dark graphics, a different graphic on each card. Grows rather than clips: every box has a min-height, never a fixed one. */
.alt-title{margin:14px 0 0;font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.02em;font-weight:500}
.alt-list3{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.alt-list3 a{display:flex;flex-direction:column;height:100%;box-sizing:border-box;border:1px solid var(--color-line);border-top:0;border-radius:10px;background:var(--color-surface);color:var(--color-ink);text-decoration:none;overflow:hidden;transition:border-color .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}
.alt-list3 a:hover,.alt-list3 a:focus-visible{border-color:color-mix(in srgb,var(--color-ink) 22%,transparent);box-shadow:0 12px 30px -18px color-mix(in srgb,var(--color-ink) 45%,transparent);transform:translateY(-2px)}
.alt-art{position:relative;display:block;min-height:200px;padding:18px 20px;box-sizing:border-box;color:var(--color-ink-inverse);background:radial-gradient(circle,color-mix(in srgb,var(--color-brand-soft) 13%,transparent) 1px,transparent 1.4px) 0 0/14px 14px,var(--color-bg-inverse)}
.alt-art .mono{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--color-ink-inverse-secondary)}
/* 1 ranked list */
.alt-head{display:flex;justify-content:space-between;gap:12px}
.alt-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px}
.alt-list li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border-radius:6px}
.alt-list li.on{background:color-mix(in srgb,var(--color-brand-soft) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-brand-soft) 26%,transparent)}
.alt-list i{width:10px;height:10px;background:var(--color-ink-inverse-muted)}
.alt-list li.on i{background:var(--color-brand-soft)}
.alt-list .n{font-size:13.5px;line-height:1.25}
.alt-list .t{text-align:right;max-width:9em;line-height:1.3}
/* 2 scatter */
.alt-plot{position:relative;height:150px}
.alt-plot .ax{position:absolute;background:var(--color-line-inverse-strong)}
.alt-plot .ay{left:8%;top:6%;bottom:8%;width:1px}
.alt-plot .ax2{left:8%;right:4%;bottom:8%;height:1px}
.alt-plot .d{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border:1.5px solid var(--color-ink-inverse-muted);box-sizing:border-box}
.alt-plot .f{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--color-brand-soft);box-shadow:0 0 0 7px color-mix(in srgb,var(--color-brand-soft) 18%,transparent),0 0 0 8px color-mix(in srgb,var(--color-brand-soft) 50%,transparent)}
.alt-plot .lab{position:absolute;transform:translateY(-50%);max-width:46%;font-size:12.5px;line-height:1.3;color:var(--color-ink-inverse)}
.alt-plot .ylab{position:absolute;left:0;top:-4px}.alt-plot .xlab{position:absolute;left:8%;bottom:-8px}
/* 3 selected opportunity */
.alt-sel{display:grid;gap:10px;align-content:start}
.alt-sel .nm{font-size:20px;line-height:1.2;font-weight:500;letter-spacing:-.01em;max-width:16em}
.alt-sel .alt-prog{display:block;height:2px;width:100%}
.alt-sel .sc{display:flex;gap:28px;margin-top:4px}
.alt-sel .sc span{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:4px}
.alt-sel .sc b{font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1}
.alt-sel .sc small{font-size:12px;color:var(--color-ink-inverse-secondary)}
.alt-sel .sc em{grid-column:1/-1;font-style:normal;margin-top:6px;color:var(--color-ink-inverse-secondary)}
.alt-bars{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:11px}
.alt-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;align-items:baseline}
.alt-bars .n{font-size:13.5px;line-height:1.25}.alt-bars .v{color:var(--color-ink-inverse-secondary)}
.alt-bars i{grid-column:1/-1;display:block;height:6px;background:var(--color-line-inverse);position:relative;overflow:hidden}
.alt-bars i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--color-ink-inverse-muted);transform-origin:left;transform:scaleX(.86);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.alt-bars li.on i::after{background:var(--color-brand-soft)}
.alt-quad{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.alt-quad .q{display:grid;gap:4px;align-content:start;min-height:70px;padding:9px 11px;border:1px solid var(--color-line-inverse);border-radius:6px;transition:background-color .5s ease,border-color .5s ease}
.alt-quad .q em{font-style:normal;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-inverse-muted)}
.alt-quad .q b{font-size:13px;line-height:1.25;font-weight:500}
.alt-quad .q.on{border-color:color-mix(in srgb,var(--color-brand-soft) 45%,transparent);background:color-mix(in srgb,var(--color-brand-soft) 14%,transparent)}
.alt-quad .q.on em{color:var(--color-brand-soft)}
.alt-stat{display:grid;gap:12px}
.alt-stat .top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.alt-stat .top b{font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1}
.alt-stat .top span{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--color-ink-inverse-secondary)}
.alt-stat .nm2{font-size:12.5px;line-height:1.3;color:var(--color-ink-inverse-secondary)}
.alt-spark{display:flex;align-items:flex-end;gap:5px;height:56px}
.alt-spark i{flex:1;height:var(--h);background:var(--color-ink-inverse-muted);opacity:.7;transform-origin:bottom;transform:scaleY(.86);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.alt-spark i.on{background:var(--color-brand-soft);opacity:1}
.alt-dots{display:grid;grid-template-columns:repeat(20,1fr);gap:5px}
.alt-dots i{aspect-ratio:1;background:var(--color-line-inverse-strong);transition:background-color .6s ease}
.alt-dots i.on{background:var(--color-brand-soft)}
/* photo cards (Oct 22, Brian): each use case's people photo, cropped wide, with a soft dark fade at the bottom; it eases in a touch on hover */
.alt-art.alt-photo{padding:0;overflow:hidden;background:var(--color-bg-inverse)}
.alt-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.alt-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,22,20,.35),rgba(18,22,20,0) 55%);pointer-events:none}
.alt-list3 a:hover .alt-photo img,.alt-list3 a:focus-visible .alt-photo img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.alt-photo img{transition:none}.alt-list3 a:hover .alt-photo img{transform:none}}
/* text and footer row */
.alt-body{display:flex;flex-direction:column;gap:6px;padding:18px 20px 16px;flex:1}
.alt-pill{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-secondary)}
.alt-body b{font-size:20px;font-weight:500;letter-spacing:-.01em}
.alt-q{font-size:14.5px;line-height:1.45;color:var(--color-ink-secondary);text-wrap:pretty}
.alt-go{display:flex;justify-content:space-between;align-items:center;margin:0 20px;padding:14px 0 16px;border-top:1px solid var(--color-line);font-size:14.5px;font-weight:500}
.alt-go span:last-child{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.alt-list3 a:hover .alt-go span:last-child{transform:translate(2px,-2px)}
/* hover: a small, eased movement in each graphic (all off with reduced motion) */
@property --alt-p{syntax:"<percentage>";inherits:false;initial-value:26%}
.alt-list li,.alt-plot .d,.alt-plot .f,.alt-plot .lab,.alt-sel .nm,.alt-sel .sc{transition:translate .7s cubic-bezier(.22,1,.36,1),box-shadow .7s cubic-bezier(.22,1,.36,1),background-color .5s ease,opacity .5s ease}
.alt-sel .alt-prog{background:linear-gradient(to right,var(--color-brand-soft) 0 var(--alt-p),var(--color-line-inverse) var(--alt-p));transition:--alt-p .9s cubic-bezier(.22,1,.36,1)}
/* 1 list: the rows ease across one after another and the marked row's marker brightens */
.alt-list3 a:hover .alt-list li,.alt-list3 a:focus-visible .alt-list li{translate:4px 0}
.alt-list li:nth-child(2){transition-delay:.05s}.alt-list li:nth-child(3){transition-delay:.1s}
.alt-list3 a:hover .alt-list li.on,.alt-list3 a:focus-visible .alt-list li.on{background:color-mix(in srgb,var(--color-brand-soft) 20%,transparent)}
/* 2 scatter: the dots drift a few pixels apart and the answer's halo opens */
.alt-list3 a:hover .alt-plot .d:nth-of-type(odd){translate:3px -3px}
.alt-list3 a:hover .alt-plot .d:nth-of-type(even){translate:-3px 3px}
.alt-list3 a:hover .alt-plot .f{box-shadow:0 0 0 11px color-mix(in srgb,var(--color-brand-soft) 14%,transparent),0 0 0 12px color-mix(in srgb,var(--color-brand-soft) 45%,transparent)}
.alt-list3 a:hover .alt-plot .lab{translate:0 -2px}
/* 3 selected opportunity: the progress line fills further and the scores lift */
.alt-list3 a:hover .alt-prog,.alt-list3 a:focus-visible .alt-prog{--alt-p:68%}
.alt-list3 a:hover .alt-sel .sc{translate:0 -2px}
@media (prefers-reduced-motion:reduce){.alt-list li,.alt-plot .d,.alt-plot .f,.alt-plot .lab,.alt-sel .nm,.alt-sel .sc,.alt-sel .alt-prog{transition:none}.alt-list3 a:hover .alt-list li,.alt-list3 a:hover .alt-plot .d,.alt-list3 a:hover .alt-plot .lab,.alt-list3 a:hover .alt-sel .sc{translate:none}.alt-list3 a:hover .alt-prog{--alt-p:26%}}
/* bars grow, the quadrant's marked tile lights, the sparkline rises, the next dots light */
.alt-list3 a:hover .alt-bars i::after,.alt-list3 a:focus-visible .alt-bars i::after{transform:scaleX(1)}
.alt-list3 a:hover .alt-quad .q.on{background:color-mix(in srgb,var(--color-brand-soft) 22%,transparent)}
.alt-list3 a:hover .alt-spark i{transform:scaleY(1)}
.alt-list3 a:hover .alt-dots i:nth-child(n+19):nth-child(-n+26){background:color-mix(in srgb,var(--color-brand-soft) 60%,transparent)}
@media (prefers-reduced-motion:reduce){.alt-bars i::after,.alt-spark i,.alt-quad .q,.alt-dots i{transition:none}.alt-list3 a:hover .alt-bars i::after,.alt-list3 a:hover .alt-spark i{transform:none}}
@media (max-width:900px){.alt-list3{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.alt-list3 a,.alt-go span{transition:none}.alt-list3 a:hover{transform:none}}
@media (max-width:900px){.ucp-ins-grid,.ucp-split{grid-template-columns:1fr}}
@media (max-width:520px){.ucp-bars li{grid-template-columns:90px minmax(0,1fr) 58px}}

/* ===== Oct 22 evening, dark first. The page, hero and every panel on the homepage charcoal with the demo's glass recipe:
   160deg gradient fill, 1px light hairline, radius 16, a deep soft shadow and an inset top highlight. Soft white and grey
   text, mint buttons as on the homepage, one mint emphasis per section. Tokens from the top of this file only. ===== */
body:has(.ucp){background:var(--ucp-bg)}
/* the bar is no longer forced dark here: nav.js follows the page's data-bar marks (dark page, light FAQs and close) */
.ucp{background:var(--ucp-wash),var(--ucp-bg);background-attachment:scroll;color:var(--ucp-ink)}
.ucp h1,.ucp h2,.ucp h3,.ucp b{color:var(--ucp-ink)}
.ucp p{color:var(--ucp-ink)}
.ucp-label,.ucp-crumb,.ucp-crumb a,.ucp-meta{color:var(--ucp-ink-2)}
.ucp-label{font-size:12px}
.ucp-lede{color:var(--ucp-ink-2)}
.ucp-back{color:var(--ucp-ink)}
.ucp-back:hover{text-decoration-color:var(--ucp-mint)}
.ucp .btn,.ucp-actions .btn,.ucp-faq-head .btn,.ucp-close .btn{background:var(--ucp-mint);color:var(--ucp-on-mint)!important;transition:background .2s var(--ucp-ease),box-shadow .2s var(--ucp-ease)}
.ucp .btn:hover,.ucp-actions .btn:hover,.ucp-faq-head .btn:hover,.ucp-close .btn:hover{background:var(--ucp-mint-hover);box-shadow:0 0 0 4px rgb(176 225 182 / .18)}
.ucp :focus-visible{outline-color:var(--ucp-mint)}
/* the glass, one recipe for every panel */
.ucp-glass,.ucp-ai-head,.ucp-finds-row>li,.ucp-ins-card,.ucp-outcome-card,.alt-list3 a,.ucp-faq-list{background:var(--ucp-glass);border:1px solid var(--ucp-glass-line);border-radius:var(--ucp-radius);box-shadow:var(--ucp-glass-shadow)}

/* 1. hero: the stage washes behind it; Val's frame lines stay, dimmed for dark (ucg.js) */
.ucp-hero{background:radial-gradient(45% 60% at 74% 46%,rgb(103 184 115 / .10),transparent 70%),radial-gradient(30% 40% at 6% 92%,rgb(103 184 115 / .06),transparent 70%);overflow:clip}
@media (max-width:760px){.ucp-hero{background:radial-gradient(90% 40% at 70% 72%,rgb(103 184 115 / .10),transparent 72%)}}
.ucp-stage .ucp-ex{color:var(--ucp-ink-3);font-size:12px;letter-spacing:.08em}

/* hero steps (Oct 22, Lindsey): the homepage's See the work steps, "Know where to start" treatment. Each tab is a step: an
   18px line icon and a 16px title in grey, white with a mint icon when active; its description opens under it; a 2px green
   bar along the bottom hairline fills over the step's time on screen. Desktop: uc-page.js moves the steps into the copy
   column under the lede, so the hero reads as the homepage does, steps left and graphic right. Stacked (1000px and down):
   the steps stay in the stage, one above the other, and the graphic sits under the active step, as on the homepage phone. */
.ucp-tabs{display:flex;flex-direction:column;margin:0;padding:0;max-width:420px;position:relative;z-index:2}
.ucp-tabs [role=tab]{appearance:none;font:inherit;color:inherit;background:none;border:0;border-radius:0;margin:0;cursor:pointer;display:block;width:100%;text-align:left;position:relative;
  padding:20px 0;border-bottom:1px solid var(--ucp-step-line)}
.ucp-tabs .h{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;line-height:1.3;color:var(--ucp-step-ink);transition:color .25s var(--ucp-ease)}
.ucp-tabs .h svg{width:18px;height:18px;flex:none;color:var(--ucp-step-icon);transition:color .25s var(--ucp-ease)}
.ucp-tabs .d{display:block;max-height:0;overflow:hidden;opacity:0;font-size:clamp(15px,1.2vw,17px);line-height:1.5;color:var(--ucp-step-ink);
  transition:max-height .6s var(--ucp-ease),opacity .45s var(--ucp-ease),margin .6s var(--ucp-ease)}
.ucp-tabs .d>span{display:block}
.ucp-tabs .d .n{color:var(--ucp-ink);font-weight:500}
.ucp-tabs .d .s{font-variant-numeric:tabular-nums}
.ucp-tabs .d .v{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ucp-ink-2);margin-bottom:4px}
.ucp-tabs .prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ucp-prog);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.ucp-tabs [role=tab]:hover .h,.ucp-tabs [role=tab][aria-selected=true] .h{color:#fff}
.ucp-tabs [role=tab][aria-selected=true] .h svg{color:var(--ucp-mint)}
.ucp-tabs [role=tab][aria-selected=true] .d{max-height:220px;opacity:1;margin-top:10px}
.ucp-tabs [role=tab]:focus-visible{outline:2px solid var(--ucp-mint);outline-offset:4px}
.ucp-hero-copy>.ucp-tabs{margin-top:6px}
/* the panel: the homepage's soft green light spilling from behind the graphic, top and bottom */
.ucp-stage{isolation:isolate}
.ucp-stage::before{content:"";position:absolute;inset:-14% -6%;z-index:-1;pointer-events:none;filter:blur(40px);
  background:radial-gradient(34% 30% at 32% 10%,rgb(103 184 115 / .12),transparent 70%),radial-gradient(30% 26% at 70% 6%,rgb(103 184 115 / .10),transparent 70%),
  radial-gradient(34% 30% at 36% 92%,rgb(103 184 115 / .10),transparent 70%),radial-gradient(30% 26% at 72% 96%,rgb(103 184 115 / .07),transparent 70%)}
/* panes share one grid cell (row 2; row 1 holds the steps only when they stay in the stage), so the panel keeps the taller pane's height and never resizes between steps. They cross-fade
   like the homepage frames: opacity .9s with a 6px blur. uc-page.js keeps [hidden] off while it fades, then sets it; a
   hidden pane keeps its place in the layout but is invisible, so only one pane is ever exposed to assistive tech. */
.ucp-stage:has(>.ucp-pane){display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:center}
.ucp-stage>.ucp-tabs{grid-row:1;grid-column:1;max-width:none;margin-bottom:12px}
.ucp-stage>.ucp-pane{grid-row:2;grid-column:1;min-width:0;transition:opacity .9s var(--ucp-ease-io),filter .9s var(--ucp-ease-io)}
.ucp-stage>.ucp-pane[hidden]{display:block;visibility:hidden}
.ucp-pane.is-out{opacity:0;filter:blur(6px);pointer-events:none}
@media (max-width:1000px){
  .ucp-stage:has(>.ucp-pane){align-items:start}
  .ucp-stage>.ucp-tabs{display:contents}
  .ucp-tabs [role=tab]{grid-column:1;grid-row:1}
  .ucp-tabs [role=tab]+[role=tab]{grid-row:3}
  .ucp-tabs .h{font-size:18px}
  .ucp-stage>.ucp-pane{grid-row:2;padding:20px 0 12px}
  .ucp-stage:has([role=tab]+[role=tab][aria-selected=true])>.ucp-pane{grid-row:4}
}
@media (prefers-reduced-motion:reduce){
  .ucp-stage>.ucp-pane{transition:opacity .3s ease;filter:none!important}
  .ucp-tabs .d,.ucp-tabs .h,.ucp-tabs .h svg{transition:none}
}

/* 2. the AI result: head and the three findings as glass cards */
.ucp-finds{background:none;border:0}
.ucp-ai-head{padding:clamp(18px,2vw,28px) clamp(20px,2.4vw,32px);margin-top:20px;align-items:center}
.ucp-ai-head b{color:var(--ucp-ink)}
.ucp-score{color:var(--ucp-mint);font-variant-numeric:tabular-nums}
.ucp-score span{font-size:12px;color:var(--ucp-ink-2)}
.ucp-finds-row{border-top:0;gap:16px;margin-top:16px}
.ucp-finds-row li,.ucp-finds-row li+li{border:1px solid var(--ucp-glass-line);padding:clamp(20px,2.2vw,32px)}
.ucp-finds-row p{color:var(--ucp-ink-2)}
.ucp-why b{color:var(--ucp-ink)}
.ucp-num{color:var(--ucp-mint)}
.ucp-finds-row .fix .ucp-num{color:var(--ucp-ink-2)}
@media (max-width:760px){.ucp-finds-row li,.ucp-finds-row li+li{padding:22px 20px;border-top:1px solid var(--ucp-glass-line)}}

/* 3. outcome and next step: the glass, the figures in soft white with one mint line under the strip */
.ucp-outcome-card{color:var(--ucp-ink)}
.ucp-outcome-card::before{display:none}
.ucp-outcome .wrap::before{background:radial-gradient(circle,rgb(103 184 115 / .16) 0%,rgb(103 184 115 / .06) 40%,transparent 68%)}
.ucp-outcome-card .ucp-label,.ucp-strip dt{color:var(--ucp-ink-2)}
.ucp-strip{border-block:0;border-top:1px solid var(--ucp-rule)}
.ucp-strip div+div{border-left-color:var(--ucp-rule)}
.ucp-strip dt{font-size:12px}
.ucp-strip dd{color:var(--ucp-ink-2)}
.ucp-strip b{color:var(--ucp-ink)}
@supports (-webkit-background-clip:text) or (background-clip:text){.ucp-strip b{background-image:linear-gradient(100deg,var(--ucp-ink) 0%,var(--ucp-mint) 85%)}}
.ucp-how{color:var(--ucp-ink-3)}
@media (max-width:760px){.ucp-strip div+div{border-top-color:var(--ucp-rule)}}
.ucp-next{padding:0 0 clamp(48px,6vw,96px)}
.ucp-next .ucp-outcome-card{position:relative;padding:clamp(22px,3vw,40px) clamp(24px,3.4vw,48px)}
.ucp-next .ucp-outcome-card::after{content:"";position:absolute;left:-1px;top:18%;bottom:18%;width:2px;border-radius:2px;background:var(--ucp-mint);box-shadow:0 0 14px var(--ucp-mint-glow)}
.ucp-next .ucp-strip{border:0;grid-template-columns:1fr}
.ucp-next .ucp-strip div{padding:0;gap:12px}
.ucp-next .ucp-strip dt{color:var(--ucp-mint)}
.ucp-next .ucp-strip dd{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--ucp-ink);max-width:40em}

/* 4. the business insight */
.ucp-ins-card{padding:clamp(20px,2.4vw,32px)}
.ucp-ins-k{font-size:12px;color:var(--ucp-mint)}
.ucp-ins-big{color:var(--ucp-ink)}
.ucp-ins-num{color:var(--ucp-ink-2)}
.ucp-bars li{font-size:14.5px;color:var(--ucp-ink)}
.ucp-bars i{background:linear-gradient(to right,var(--ucp-mint) calc(var(--v) * 100%),var(--ucp-hair) 0)}
.ucp-bars b{font-size:14px;color:var(--ucp-ink-2)}
.ucp-faq-list{padding:4px clamp(20px,2.4vw,32px)}
@media (min-width:1001px){.ucp-faq-list{border-top:1px solid var(--ucp-glass-line)}}
.ucp-faq-list details{border-bottom-color:var(--ucp-hair)}
.ucp-faq-list details:last-child{border-bottom:0}
.ucp-faq-list summary{color:var(--ucp-ink)}
.ucp-faq-list summary::after{color:var(--ucp-mint)}
.ucp-faq-list details p{color:var(--ucp-ink-2)}
.ucp-faq-list details::before{background:var(--ucp-mint);opacity:.7}
.ucp-faq-list details::after{background:var(--ucp-mint)}
.ucp-faq-list details:first-child::before,.ucp-faq-list details:first-child::after{display:none}

/* other use cases: glass cards, tags with the industry and a value tag */
.ucp-more{border-top:1px solid var(--ucp-hair)}
.alt-title{color:var(--ucp-ink)}
.alt-list3 a{color:var(--ucp-ink)}
.alt-list3 a:hover,.alt-list3 a:focus-visible{border-color:var(--ucp-mint-line);box-shadow:0 30px 60px -30px rgb(0 0 0 / .85),inset 0 1px 0 rgb(255 255 255 / .05)}
.alt-photo::after{background:linear-gradient(to top,rgb(18 22 20 / .55),rgb(18 22 20 / 0) 60%)}
.alt-q{color:var(--ucp-ink-2)}
.alt-go{border-top-color:var(--ucp-hair);color:var(--ucp-ink)}
.alt-go span:last-child{color:var(--ucp-mint)}
.alt-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.alt-pill{display:inline-block;font-size:12px;letter-spacing:.06em;line-height:1;padding:6px 9px;border-radius:999px;color:var(--ucp-ink-2);background:rgb(247 247 245 / .05);border:1px solid rgb(247 247 245 / .16)}
.alt-pill.alt-value{color:var(--ucp-mint);background:rgb(176 225 182 / .12);border-color:rgb(176 225 182 / .38)}
/* the selected process's pulse ring (ucg.js sets --a and --b: ring radius +5 to +27), as in the demo */
@keyframes ucg-pulse{from{width:var(--a);height:var(--a);opacity:.4}to{width:var(--b);height:var(--b);opacity:0}}
/* entrances for the findings row, the insight card and the FAQs (uc-page.js): 18px rise over .8s, .11s apart; reduced motion fades only */
@keyframes ucp-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rv.ucp-rv.rv-in{animation:ucp-up .8s var(--ucp-ease) var(--rv-d,0s) both}
.ucp-rf{opacity:0}
.ucp-rf.ucp-rf-in{opacity:1;transition:opacity .8s ease var(--rv-d,0s)}
.ucp-bars li{grid-template-columns:110px minmax(0,1fr) 84px}
@media (max-width:520px){.ucp-bars li{grid-template-columns:90px minmax(0,1fr) 78px}}
.ucp-bars b{white-space:nowrap}

/* Oct 22, Lindsey (eyebrows upon eyebrows): the breadcrumb is gone and the hero's All use cases link moves up to take its place,
   a small plain text link with a left arrow, so the company tag line is the only uppercase label above the headline. */
.ucp-back-top{display:inline-flex;font-size:14px;font-weight:500;color:var(--ucp-ink-2);margin-bottom:clamp(20px,2.6vw,32px)}
.ucp-back-top:hover{color:var(--ucp-ink)}
/* Oct 22, Lindsey: the two hero steps read alike on every page: icon and title, a small uppercase mono eyebrow (the scores, or the
   report and its view), then the description (the focus process, or the finding) in one shared style */
.ucp-tabs .d .v{margin-bottom:6px}
.ucp-tabs .d .f{color:var(--ucp-ink);font-weight:400}
/* Oct 22, Lindsey: the business insight fills the content width: two equal-height glass cards side by side, the report (eyebrow,
   figure, line, finding) and Also found (eyebrow, sentence), the same padding, radius and elevation; stacked on phones */
.ucp-ins-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:16px}
.ucp-ins-card{display:flex;flex-direction:column;padding:clamp(24px,2.6vw,40px)}
.ucp .ucp-ins-k{margin:0;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ucp-mint)}
.ucp .ucp-ins-find-t,.ucp .ucp-also-t{margin:18px 0 0;font-size:clamp(18px,1.6vw,22px);line-height:1.4;letter-spacing:-.01em;color:var(--ucp-ink);text-wrap:pretty}
.ucp-ins-find-t{padding-top:18px;border-top:1px solid var(--ucp-rule)}
@media (max-width:900px){.ucp-ins-grid{grid-template-columns:1fr}}

/* ===== Oct 22, Lindsey: the page stays dark and turns light for two sections only, the FAQs and the close, with a clean section
   edge as the homepage has going into its light sections. Both use the homepage's own markup and stylesheets (faq/faq.css,
   close/close.css), so they match it exactly; these lines only stop this page's dark text and mint button rules reaching them. ===== */
.ucp .faq,.ucp .close{--ucp-ink:#121614;color:#121614}
.ucp .faq h2,.ucp .faq-q,.ucp .close-copy h2{color:#121614}
.ucp .faq-a p{color:var(--fq-mute)}
.ucp .faq :focus-visible,.ucp .close :focus-visible{outline-color:#00B489}
/* the homepage card has a photo column; here the card is the line and the button alone, so it is one column */

/* Oct 22, Lindsey: the business insight (and the private equity Next step after it) turns light, so light runs from here through
   the FAQs and the close, on the FAQ's own surface. No elevated cards here (the page was too card heavy): the report and Also
   found are two open columns on the same grid, split by one hairline. On light, text is ink (mint text fails contrast); marks
   such as the bars and the Next step line use the logo green, the site's accent for lines on light. */
.ucp-light{background:#F7F7F5;color:#121614;
  --ucp-ink:#121614;--ucp-ink-2:#474D49;--ucp-ink-3:#5C625E;--ucp-mint:var(--logo-green);--ucp-mint-glow:rgb(0 180 137 / .35);
  --ucp-line:rgb(18 22 20 / .12);--ucp-hair:#E2E3E0;--ucp-rule:#E2E3E0}
.ucp-light .ucp-label{color:#474D49}
.ucp-ins.ucp-light{padding:var(--section-y) 0}
.ucp-light .ucp-ins-grid{--gap:clamp(64px,8vw,128px);column-gap:var(--gap);row-gap:0;align-items:stretch}
.ucp-light .ucp-ins-card{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.ucp-light .ucp-ins-card+.ucp-ins-card{position:relative}
.ucp-light .ucp-ins-card+.ucp-ins-card::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--gap) / -2);width:1px;background:var(--ucp-hair)}
.ucp-light .ucp-ins-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ucp .ucp-light .ucp-ins-k{color:#474D49}
.ucp-light .ucp-ins-find-t{border-top-color:var(--ucp-hair)}
@media (max-width:900px){.ucp-light .ucp-ins-grid{grid-template-columns:1fr}
  .ucp-light .ucp-ins-card+.ucp-ins-card{border-top:1px solid var(--ucp-hair);padding-top:32px;margin-top:32px}
  .ucp-light .ucp-ins-card+.ucp-ins-card::before{display:none}}
/* the Next step after it (private equity): open too, its green line kept */
.ucp-next.ucp-light{padding:0 0 var(--section-y)}
.ucp-light .ucp-outcome-card{background:none;border:0;box-shadow:none;border-radius:0;padding:4px 0 4px 24px}
.ucp-light .ucp-next .ucp-outcome-card::after,.ucp-next.ucp-light .ucp-outcome-card::after{left:0;top:0;bottom:0;box-shadow:none}
.ucp-next.ucp-light .ucp-strip dt{color:#474D49}

/* Oct 22 (Lindsey): Where AI helps first stays dark but flat, not elevated: no glass fill, shadow or card edges, hairlines only */
.ucp-ai-head,.ucp-finds-row>li{background:none;box-shadow:none;border-radius:0;border:0}
.ucp-ai-head{padding:0 0 clamp(18px,2vw,24px);margin-top:20px;border-bottom:1px solid var(--ucp-glass-line)}
.ucp-finds-row{gap:0;margin-top:0}
.ucp-finds-row>li,.ucp-finds-row>li+li{border:0;padding:28px clamp(16px,2.4vw,40px) 8px 0}
.ucp-finds-row>li+li{border-left:1px solid var(--ucp-glass-line);padding-left:clamp(16px,2.4vw,40px)}
@media (max-width:760px){.ucp-finds-row>li,.ucp-finds-row>li+li{border-left:0;padding:22px 0;border-top:1px solid var(--ucp-glass-line)}.ucp-finds-row>li:first-child{border-top:0}}
/* Oct 22 (Lindsey): no eyebrow stacked on an eyebrow. The generic business insight label stays for screen readers only; the report's own label is the one visible eyebrow. Private equity keeps "2. Protect value", which is Korravo's plan copy. */
.ucp-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Oct 22 (Lindsey): tighter gap between Where AI helps first and What could come back */
.ucp-finds{padding-bottom:clamp(20px,2.4vw,36px)}
.ucp-finds+.ucp-outcome,.ucp-outcome{padding-top:clamp(20px,2.4vw,36px)}

/* ===== Oct 22, Lindsey: scroll-blended background, as on the homepage (uc-page.js adds body.ucfade). The page colour is one fixed
   colour behind everything that eases dark to light into the business insight and back to dark for Other use cases, so the bands
   paint no background of their own while it runs; text that sits on the page background takes the blended ink (--fx-ink,
   --fx-mute, which switch at the halfway point). Without the script, with ?solid, or with reduced motion, none of this applies and
   the bands keep their solid backgrounds. Cards keep their own surfaces and their own text colours. ===== */
body.ucfade .ucp,body.ucfade .ucp-light,body.ucfade .faq,body.ucfade .close{background:transparent}
body.ucfade .ucp-finds,body.ucfade .ucp-light,body.ucfade .faq,body.ucfade .close{--ucp-ink:var(--fx-ink);--ucp-ink-2:var(--fx-mute);--ucp-ink-3:var(--fx-mute);color:var(--fx-ink)}
body.ucfade .ucp-light{--ucp-hair:color-mix(in srgb,var(--fx-ink) 14%,transparent);--ucp-rule:var(--ucp-hair);--ucp-line:var(--ucp-hair)}
body.ucfade .ucp .ucp-light .ucp-ins-k,body.ucfade .ucp-light .ucp-label,body.ucfade .ucp-next.ucp-light .ucp-strip dt,body.ucfade .ucp .faq-a p{color:var(--fx-mute)}
body.ucfade .ucp .faq h2,body.ucfade .ucp .faq-q,body.ucfade .ucp .close-copy h2{color:var(--fx-ink)}
body.ucfade .ucp-more-head .ucp-label{color:var(--fx-mute)}
body.ucfade .ucp-more-head .ucp-back,body.ucfade .ucp .alt-title{color:var(--fx-ink)}
/* no hairline at the top of Other use cases: the blend is the edge now */
body.ucfade .ucp-more{border-top:0}
/* the closing button follows the page's ink (inverse of it), so it keeps its edge as the page goes dark behind it */
/* the dark glass cards (What could come back, Other use cases) keep their dark surface and light text whatever the page behind them is doing: the fill is opaque here, so a light page behind never greys it */
body.ucfade .ucp-outcome:not(.ucp-light) .ucp-outcome-card,body.ucfade .alt-list3 a{background:linear-gradient(160deg,rgb(40 47 43),rgb(22 27 24))}
body.ucfade .alt-list3 a{--ucp-ink:#F7F7F5;--ucp-ink-2:#C9CCC9}
body.ucfade .ucp-light :is(h2,h3,p,dt,dd,b,small,span,li),body.ucfade .ucp-finds :is(h2,h3,p,b,span),body.ucfade .faq :is(h2,p,button),body.ucfade .close-copy h2,body.ucfade .ucp-more-head :is(h2,a),body.ucfade .alt-title{transition:color .4s ease}
/* the closing band is transparent too: the card takes the page colour (close.css) and the dark Other use cases band follows it
   through the blend, so the strip the homepage's close keeps for its footer is not needed here */
@media (prefers-reduced-motion:reduce){body.ucfade *{transition:none!important}}
/* the card has no photo column on these pages, so it keeps its bottom padding on small screens (the button sat on the card edge) */
/* Oct 22 (Lindsey): during the fade the closing card's fixed light edge read as a white frame on the blended page; its edge now follows the page ink as a faint hairline */
body.ucfade .ucp .close-card{border-color:color-mix(in srgb,var(--fx-ink) 12%,transparent);transition:border-color .4s ease}
/* Oct 22 (F6): the Illustrative tag matches the homepage and product page: plain small grey text, not mono caps */
.ucp-ex,.ucp-stage .ucp-ex{font-family:inherit;font-size:12px;letter-spacing:.02em;text-transform:none;color:#9AA09B}
/* Oct 22 (Brian): the outcome glow sits in the middle of the card's left side, softer (Request a Demo no longer sits in this card,
   so the corner had nothing to point at); Where AI helps first gets the same glow, centered behind its cards. */
.ucp-outcome .wrap::before{right:auto;bottom:auto;left:-150px;top:50%;transform:translateY(-50%);
  background:radial-gradient(circle,rgb(103 184 115 / .11) 0%,rgb(103 184 115 / .04) 40%,transparent 68%)}
@media (max-width:1099px){.ucp-outcome .wrap::before{right:auto;left:calc(var(--gutter) - 150px)}}
@media (max-width:760px){.ucp-outcome .wrap::before{right:auto;bottom:auto;left:calc(var(--gutter) - 110px)}}
.ucp-finds{overflow-x:clip}
.ucp-finds .wrap{position:relative}
.ucp-finds .wrap>*{position:relative;z-index:1}
.ucp-finds .wrap::before{content:"";position:absolute;z-index:0;pointer-events:none;left:50%;top:58%;width:760px;height:460px;max-width:100%;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgb(103 184 115 / .11) 0%,rgb(103 184 115 / .04) 45%,transparent 100%);filter:blur(30px)}
/* Oct 22 (Brian): no light seam under the photo on hover. The lifted card put the photo's bottom edge on a fraction of a pixel,
   so the card's lighter fill showed through as a 1px line. The photo now overlaps the card body by 1px, bleeds past its own box,
   and the card is drawn as one layer while it lifts. */
.alt-list3 a{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.alt-art{margin-bottom:-1px;z-index:1}
.alt-photo img{inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px)}
/* Oct 22 (Brian): as on the homepage cards, each card is its own layer (isolation) and the photo box clips with a mask, so the
   zooming photo's bottom edge never shows a light line while the card lifts. Pills: the mono caps drop 1px to sit centred. */
.alt-list3 a{isolation:isolate}
.alt-art.alt-photo{isolation:isolate;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}
.alt-pill{padding-top:7px;padding-bottom:5px}
/* Oct 22 (Brian): the two hero steps no longer cross-fade on top of each other (their glass panels are see-through, so the
   outgoing report showed through the chart, e.g. a faint "4 teams"). The outgoing panel fades out first, the incoming one
   follows just after. */
.ucp-stage>.ucp-pane.is-out{transition:opacity .45s var(--ucp-ease-io),filter .45s var(--ucp-ease-io)}
.ucp-stage>.ucp-pane:not(.is-out){transition:opacity .8s var(--ucp-ease-io) .46s,filter .8s var(--ucp-ease-io) .46s}
@media (prefers-reduced-motion:reduce){.ucp-stage>.ucp-pane.is-out,.ucp-stage>.ucp-pane:not(.is-out){transition:opacity .25s ease}}
/* Oct 22 (Brian): the insight bars grow in when the card scrolls into view (the card's reveal), one after another */
@property --ucp-vf{syntax:'<number>';inherits:true;initial-value:1}
.ucp-bars i{background:linear-gradient(to right,var(--ucp-mint) calc(var(--v) * var(--ucp-vf) * 100%),var(--ucp-hair) 0)}
.rv:not(.rv-in) .ucp-bars li{--ucp-vf:0}
.rv-in .ucp-bars li{--ucp-vf:1;transition:--ucp-vf 1s cubic-bezier(.22,1,.36,1)}
.rv-in .ucp-bars li:nth-child(1){transition-delay:.35s}.rv-in .ucp-bars li:nth-child(2){transition-delay:.45s}
.rv-in .ucp-bars li:nth-child(3){transition-delay:.55s}.rv-in .ucp-bars li:nth-child(4){transition-delay:.65s}.rv-in .ucp-bars li:nth-child(n+5){transition-delay:.75s}
@media (prefers-reduced-motion:reduce){.rv-in .ucp-bars li{transition:none}}
/* Oct 22 (Brian): no single word alone on a last line. Running text wraps "pretty" (the browser moves a word down to keep
   the last line company); the big outcome figures and headings balance their lines. */
.ucp :is(p,dd,small,li,figcaption,.alt-q,.ucp-strip dd){text-wrap:pretty}
.ucp :is(h1,h2,h3,.ucp-strip dd>b,.ucp-ai-head h3){text-wrap:balance}
/* Oct 22 (Brian): the two step descriptions no longer overlap as they swap, so the copy column (and the page) keeps one
   height. The closing one collapses quickly first; the opening one starts just after it. */
.ucp-tabs .d{transition:max-height .32s cubic-bezier(.4,0,1,1),opacity .2s ease,margin .32s cubic-bezier(.4,0,1,1)}
.ucp-tabs [role=tab][aria-selected=true] .d{transition:max-height .6s var(--ucp-ease) .34s,opacity .45s var(--ucp-ease) .4s,margin .6s var(--ucp-ease) .34s}
@media (prefers-reduced-motion:reduce){.ucp-tabs .d,.ucp-tabs [role=tab][aria-selected=true] .d{transition:none}}
/* Oct 22 (Brian): one unbroken underline under the whole link on hover, arrow included (the text underline broke at the
   gap between the arrow and the words) */
.ucp-back{position:relative;text-decoration:none}
.ucp-back::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--ucp-mint,currentColor);opacity:0;transition:opacity .25s cubic-bezier(.22,1,.36,1)}
.ucp-back:hover::after,.ucp-back:focus-visible::after{opacity:1}
/* Oct 22 (Brian): a word in the insight's number slot (Serious) is set a little smaller than a figure */
.ucp-ins-big.ucp-ins-word{font-size:clamp(36px,3.9vw,56px);letter-spacing:-.025em}
/* Oct 22 (Brian): the close is now the last section, so it keeps space below its card before the footer */

/* Oct 22 (Brian): the close is the homepage's white card: the same card, photo, frame lines and green glow, dark heading and
   dark button, on the dark page (Korravo's use case doc drops the line under the heading, so it stays out here) */
.ucp .close-card,body.ucfade .ucp .close-card{background:#F7F7F5;border-color:#E2E3E0}
.ucp .close-copy h2,body.ucfade .ucp .close-copy h2{color:#121614}
.ucp .close-copy .btn{background:#121614;color:#F7F7F5!important}
.ucp .close-copy .btn:hover{background:#2A302C;box-shadow:none}
@media (max-width:900px){.ucp .close-copy h2{text-wrap:balance}}
/* Oct 22 (Brian): the white close card on the dark page, with space before the footer */
.ucp .close,body.ucfade .ucp .close,body.ucfade .close{background:transparent;padding-bottom:clamp(32px,4vw,56px)}
/* Oct 23 (Brian): the insight bars grow in again. The background fade's colour transition on text (body.ucfade .ucp-light
   :is(...li)) replaced the bars' own transition, so they jumped to full; both run together here, the bars' delays kept */
body.ucfade .ucp-light .rv-in .ucp-bars li{transition-property:color,--ucp-vf;transition-duration:.4s,1s;transition-timing-function:ease,cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){body.ucfade .ucp-light .rv-in .ucp-bars li{transition:none}}
/* Oct 23 (Brian): "All use cases" sits on the title's line, on its baseline, rather than beside the small label above it */
.ucp-more .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px}
.ucp-more-head{display:contents}
.ucp-more-head .ucp-label{grid-column:1 / -1;grid-row:1}
.ucp-more .alt-title{grid-column:1;grid-row:2;align-self:last baseline}
.ucp-more-head .ucp-back{grid-column:2;grid-row:2;align-self:last baseline;white-space:nowrap}
.ucp-more .alt-list3{grid-column:1 / -1;grid-row:3}

/* Oct 23 (Nicole approved the test page): the light ending on every use case page. The page stays light from the insights to the footer. As on the homepage, the closing card: the page stays light from the insights to the footer. As on the homepage, the closing card
   sits half over the dark footer, so the page ends in one change back to dark */
body[data-light-end] .ucp .close{padding-bottom:0;background:linear-gradient(180deg,transparent 0,transparent calc(100% - clamp(48px,5vw,64px)),#121614 calc(100% - clamp(48px,5vw,64px)))!important}
body[data-light-end] .ucp .close-card{border-color:#E2E3E0}
/* on the light page the cards' see-through border drew a dark line round the photo: no border, a softer shadow */
body[data-light-end] .alt-list3 a{border:0;box-shadow:0 8px 20px -14px rgba(18,22,20,.28);
  /* the dark fill starts under the photo, so none of it shows at the photo's rounded top corners */
  background:linear-gradient(160deg,rgb(40 47 43),rgb(22 27 24)) left bottom/100% calc(100% - 180px) no-repeat}
body[data-light-end] .alt-list3 a:hover,body[data-light-end] .alt-list3 a:focus-visible{box-shadow:0 12px 26px -16px rgba(18,22,20,.34)}

/* Light cards: cards in the page's own off-white with a hairline edge, dark type, the green AI
   tag as a pale green pill, the photo unshaded */
body[data-light-end] .alt-list3 a{background:#F7F7F5;border:1px solid #E2E3E0;box-shadow:0 2px 6px -4px rgba(18,22,20,.10);
  --ucp-ink:#121614;--ucp-ink-2:#5F6560;--ucp-hair:#ECEDEB;--ucp-mint:#1E7A45;color:#121614;transition:border-color .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}   /* the site's card ease, lift included */
body[data-light-end] .alt-list3 a:hover,body[data-light-end] .alt-list3 a:focus-visible{border-color:#CDD0CB;box-shadow:0 4px 12px -8px rgba(18,22,20,.14)}
body[data-light-end] .alt-list3 a b{color:#121614}
body[data-light-end] .alt-pill{color:#5F6560;background:#F3F4F2;border-color:#E2E3E0}
body[data-light-end] .alt-pill.alt-value{color:#1E6B3C;background:#E4F3E7;border-color:#BFE2C6}
body[data-light-end] .alt-photo::after{display:none}
body[data-light-end] .alt-art.alt-photo{background:#ECEDEB}
/* the pills at the homepage panels' size, 10.5px type and 3px by 8px, about 15% smaller */
body[data-light-end] .alt-pill{font-size:10.5px;letter-spacing:.08em;line-height:1;padding:4.5px 8px 4.5px}   /* a touch taller, the caps sit 1px lower so they read centred */
body[data-light-end] .alt-tags{gap:6px}
/* Nicole's balance note: What could come back in two columns, the estimate and From the team (the two with a
   big number), then the next step on its own line, centred, in mint, as the takeaway */
body[data-light-end] .ucp-outcome .ucp-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-light-end] .ucp-outcome .ucp-strip>div:nth-child(3){grid-column:1 / -1;border-left:0;border-top:1px solid var(--ucp-rule);padding:22px 0 4px;justify-items:center;text-align:center;gap:10px}
body[data-light-end] .ucp-outcome .ucp-strip>div:nth-child(3) dt{color:var(--ucp-mint)}
body[data-light-end] .ucp-outcome .ucp-strip>div:nth-child(3) dd{font-size:clamp(19px,1.6vw,23px);font-weight:500;color:var(--ucp-mint);text-wrap:balance;max-width:34em}
@media (max-width:760px){body[data-light-end] .ucp-outcome .ucp-strip{grid-template-columns:1fr}}