/* Product page (Oct 22): Val's dark version (korravo-product-dark2.html), ported into the site shell.
   One dark page (#121614), a sticky strip of the six stages under the top bar, and six sections, each a short text column
   beside a live graphic (product.js). On screens at least 1100 wide and 720 tall the first four sections stack as cards
   (body.pd-stacked, set by product.js); the last two always stay in the flow. The closing card and footer are the homepage's.
   Colours: #00B489 accent, #B0E1B6 for primary buttons, neutral greys for muted text. Every hover eases. */
body.pp-dark{background:#121614;color:#F7F7F5}
.pd{--pd-ink:#F7F7F5;--pd-sub:#B8BBB7;--pd-body:#D9DBD7;--pd-mute:#9AA09B;--pd-line:rgba(247,247,245,.1);--pd-green:#00B489;
  --pd-card:#171C19;--pd-card-max:760px;--pd-vis:#191E1B;--pd-ease:cubic-bezier(.22,1,.36,1);
  --pd-tabs-top:var(--nav-h);--pd-stack-top:calc(var(--nav-h) + var(--pd-tabs-h,53px) + 14px);
  background:#121614;color:var(--pd-ink);overflow-x:clip}
.pd .mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* hero: headline and one line, no image (Val) */
.pd-hero{max-width:1440px;margin:0 auto;box-sizing:border-box;
  padding:calc(var(--nav-h) + clamp(56px,11vh,136px)) clamp(20px,4vw,56px) clamp(56px,10vh,112px)}
.pd-hero h1{margin:0;max-width:1180px;font-size:clamp(38px,5vw,76px);line-height:1;font-weight:500;letter-spacing:-.035em;text-wrap:balance}
.pd-hero h1 span{color:var(--pd-mute)}
.pd-sub{margin:clamp(32px,6vh,64px) 0 0;max-width:560px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--pd-sub);text-wrap:pretty}

/* the six stages, sticky under the top bar; scrolls sideways on narrow screens */
.pd-tabs{position:sticky;top:var(--pd-tabs-top);z-index:30;background:rgba(18,22,20,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--pd-line);border-bottom:1px solid var(--pd-line)}
.pd-tabs-in{max-width:1320px;margin:0 auto;padding:0 clamp(8px,4vw,56px);box-sizing:border-box;display:flex;overflow-x:auto;scrollbar-width:none}
.pd-tabs-in::-webkit-scrollbar{display:none}
.pd-tabs a{flex:1 1 0;min-width:max-content;display:flex;align-items:baseline;gap:10px;padding:17px 18px 15px;box-sizing:border-box;
  border-left:1px solid var(--pd-line);border-bottom:2px solid transparent;color:var(--pd-mute);font-size:14.5px;font-weight:500;
  white-space:nowrap;text-decoration:none;transition:color .3s var(--pd-ease),border-color .3s var(--pd-ease)}
.pd-tabs a:last-child{border-right:1px solid var(--pd-line)}
.pd-tabs a span{font-size:11px;letter-spacing:.06em;color:#7A807B;transition:color .3s var(--pd-ease)}
.pd-tabs a:hover{color:var(--pd-ink)}
.pd-tabs a:not(.on):hover{border-bottom-color:rgba(0,180,137,.3)} /* 30% of the active tab green */
/* hover: a soft green glow rising from the bottom edge of the tab (Oct 22, Brian); eases in and out */
.pd-tabs a{position:relative}
.pd-tabs a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;pointer-events:none;opacity:0;
  background:radial-gradient(60% 90% at 50% 100%,rgba(0,180,137,.16),rgba(0,180,137,.05) 55%,transparent 80%);transition:opacity .4s var(--pd-ease)}
.pd-tabs a:hover::after{opacity:1}
.pd-tabs a.on{color:var(--pd-ink);border-bottom-color:var(--pd-green)}
.pd-tabs a.on span{color:var(--pd-green)}
.pd-tabs a:focus-visible{outline:2px solid var(--pd-green);outline-offset:-4px}

/* sections: flow layout by default (phones, tablets, short screens, reduced motion, and 05 and 06 everywhere) */
.pd-stack,.pd-flow{max-width:1368px;margin:0 auto;padding:0 clamp(14px,2.4vw,24px);box-sizing:border-box}
.pd-sec{position:relative;max-width:1320px;margin:0 auto;box-sizing:border-box;padding:clamp(40px,6vh,64px) clamp(6px,2vw,32px);
  scroll-margin-top:calc(var(--nav-h) + var(--pd-tabs-h,53px))}
.pd-sec:not([data-sec="0"]) .pd-inner{border-top:1px solid var(--pd-line);padding-top:clamp(48px,8vh,88px)}
.pd-flow{padding-bottom:clamp(56px,10vh,128px)}
.pd-veil{display:none}
.pd-spacer{height:0}
.pd-inner{display:flex;flex-wrap:wrap;gap:40px 72px;align-items:center;width:100%}
.pd-text{flex:43 1 340px;min-width:0;max-width:500px;display:flex;flex-direction:column;gap:24px}
.pd-sec h2{margin:0;font-size:clamp(32px,3.2vw,46px);line-height:1.02;font-weight:500;letter-spacing:-.028em;text-wrap:balance}
.pd-lede{display:flex;flex-direction:column;gap:12px}
.pd-lede p{margin:0;font-size:17px;line-height:1.5;color:var(--pd-sub);text-wrap:pretty}
.pd-lede p:first-child{font-size:clamp(18px,1.4vw,20px);line-height:1.45;color:var(--pd-ink)}
.pd-list{list-style:none;margin:0;padding:4px 0 0;display:flex;flex-direction:column;gap:12px}
.pd-list li{display:flex;gap:14px;font-size:16px;line-height:1.5;color:var(--pd-body);text-wrap:pretty}
.pd-list li::before{content:"";flex:none;width:5px;height:5px;margin-top:10px;background:var(--pd-green)}
.pd-scores{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--pd-line)}
.pd-scores div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--pd-line);align-items:baseline}
.pd-scores dt{font-size:16px;font-weight:500;color:var(--pd-ink)}
.pd-scores dd{margin:0;font-size:16px;line-height:1.45;color:var(--pd-body);text-wrap:pretty}
.pd-note{margin:0;font-size:16px;line-height:1.5;color:var(--pd-sub);text-wrap:pretty}

/* the buttons that pick a view in the graphic */
/* the buttons that pick a view in the graphic, styled like the pill tabs on the homepage's Know where to start chart
   (AI Fit, Need to Solve, Potential benefit): a dark track, the chosen pill raised with a faint outline and a soft green
   line along its bottom that is brightest in the middle (Oct 22, Brian). Corners follow the homepage scale: track 10px, pill 7px,
   graphic panels 12px, stacked cards 16px (as the homepage section cards). */
.pd-ctl{display:flex;flex-wrap:wrap;gap:2px;width:max-content;max-width:100%;padding:3px;background:rgba(18,22,20,.75);border:1px solid rgba(184,187,183,.14);
  border-radius:10px}
/* the tabs sit on top of the graphic they control (Oct 22, Brian), left-aligned with it */
.pd-fig>.pd-ctl{margin-bottom:12px}
.pd-ctl button,.pd-ask button{appearance:none;background:none;border:0;margin:0;font:inherit;cursor:pointer;text-align:left}
.pd-ctl button{position:relative;flex:1 1 auto;text-align:center;white-space:nowrap;padding:7px 12px;font-size:13px;line-height:1.3;color:#B8BBB7;border-radius:7px;
  transition:color .25s var(--pd-ease),background-color .25s var(--pd-ease),box-shadow .25s var(--pd-ease)}
.pd-ctl button::after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:1.5px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,180,137,0),rgba(0,180,137,.6) 28%,rgba(176,225,182,.85) 50%,rgba(0,180,137,.6) 72%,rgba(0,180,137,0));
  filter:drop-shadow(0 0 2px rgba(0,180,137,.35));
  clip-path:inset(-10px 100% -10px -10px);transition:clip-path .6s var(--pd-ease)}
.pd-ctl button:hover{color:var(--pd-ink)}
.pd-ctl button.on{color:var(--pd-ink);background:#232925;box-shadow:inset 0 0 0 1px rgba(247,247,245,.06)}
.pd-ctl button.on::after{clip-path:inset(-10px -10px -10px -10px)}
.pd-ask{display:flex;flex-direction:column;gap:8px}
.pd-ask p{margin:0;padding-bottom:4px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pd-mute)}
/* Oct 23 (Nicole): the questions read as buttons: a bordered row with an arrow, which fills and nudges on hover */
.pd-ask button{display:flex;gap:12px;align-items:center;padding:11px 14px;border:1px solid var(--pd-line);border-radius:10px;background:rgba(247,247,245,.03);font-size:15px;line-height:1.4;
  color:var(--pd-sub,#B8BBB7);text-wrap:pretty;transition:color .3s var(--pd-ease),background-color .3s var(--pd-ease),border-color .3s var(--pd-ease)}
.pd-ask button i{display:block;flex:none;order:2;margin-left:auto;width:16px;height:16px;background:currentColor;opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--pd-ease),opacity .3s var(--pd-ease),background-color .3s var(--pd-ease)}
.pd-ask button:hover{color:var(--pd-ink);background:rgba(247,247,245,.07);border-color:rgba(247,247,245,.24)}
.pd-ask button:hover i{opacity:1;transform:translateX(3px)}
.pd-ask button.on{color:var(--pd-ink);border-color:rgba(103,184,115,.6);background:rgba(103,184,115,.1)}
.pd-ask button.on i{background:var(--pd-green);opacity:1}
.pd-ctl button:focus-visible,.pd-ask button:focus-visible{outline:2px solid var(--pd-green);outline-offset:3px}
/* Insights (Oct 23): the homepage's Insights box tabs, in dark. Separate boxes in an even row on the glass, the title in
   soft white with a mono subtitle under it (the homepage's where it has one); the active box takes a mint tint.
   Phones: the row scrolls sideways inside its own track. */
.pd-ctl.pd-boxes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%;padding:0;background:none;border:0;border-radius:0}
.pd-ctl.pd-boxes button{display:flex;flex-direction:column;justify-content:flex-start;gap:6px;text-align:left;white-space:normal;padding:14px 16px;
  border-radius:var(--r-md,12px);border:1px solid rgba(247,247,245,.12);background:linear-gradient(160deg,rgba(40,47,43,.6),rgba(22,27,24,.6));
  color:rgba(247,247,245,.86);transition:background-color .25s var(--pd-ease),border-color .25s var(--pd-ease),color .25s var(--pd-ease)}
.pd-ctl.pd-boxes button::after{display:none}
.pd-ctl.pd-boxes button b{display:block;font-size:15px;line-height:1.3;font-weight:500;letter-spacing:-.005em}
.pd-ctl.pd-boxes button small{display:block;font-size:11px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:#858C86}
.pd-ctl.pd-boxes button:hover{color:var(--pd-ink);border-color:rgba(179,226,182,.28)}
.pd-ctl.pd-boxes button.on{color:var(--pd-ink);background:rgba(179,226,182,.10);border-color:rgba(179,226,182,.38);box-shadow:none}
.pd-ctl.pd-boxes button.on small{color:#A9C9AD}
.pd-ctl.pd-boxes button:focus-visible{outline-offset:2px}
@media (max-width:899px){
  .pd-ctl.pd-boxes{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding:2px;margin-left:-2px;margin-right:-2px;scroll-padding:0 2px}
  .pd-ctl.pd-boxes::-webkit-scrollbar{display:none}
  .pd-ctl.pd-boxes button{flex:0 0 auto;min-width:148px;padding:12px 14px}
  .pd-ctl.pd-boxes button b{font-size:14px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.pd-ctl.pd-boxes button{transition:none}}

/* the graphic: product.js draws into .pd-vis and sets its height for the screen size */
.pd-fig{flex:57 1 480px;min-width:0;margin:0;display:flex;flex-direction:column;gap:16px}
.pd-vis{position:relative;width:100%;aspect-ratio:16/11;min-height:420px;background:var(--pd-vis);border:1px solid rgba(247,247,245,.08);
  border-radius:12px;overflow:hidden;box-sizing:border-box}
.pd-fig figcaption{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline}
.pd-fig figcaption span:last-child{flex:1 1 260px;max-width:none;font-size:14px;line-height:1.5;color:var(--pd-mute);text-wrap:pretty}

/* stacked cards (01 to 04), wide and tall screens only; product.js adds body.pd-stacked and scales and dims the cards behind */
.pd-stacked .pd-stack{padding-top:clamp(8px,2vh,24px)}
.pd-stacked .pd-card{position:sticky;top:calc(var(--pd-stack-top) + var(--i) * 16px);
  min-height:min(calc(100vh - var(--pd-stack-top) - var(--i) * 16px - 16px),var(--pd-card-max));display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,3.2vw,48px) clamp(24px,3.6vw,56px);background:var(--pd-card);border:1px solid var(--pd-line);border-radius:16px;
  overflow:hidden;transform-origin:50% 0;box-shadow:0 -12px 32px rgba(0,0,0,.35);scroll-margin-top:0}
.pd-stacked .pd-card .pd-inner{border-top:0;padding-top:0}
.pd-stacked .pd-card .pd-veil{display:block;position:absolute;inset:0;z-index:2;background:#0B0E0C;opacity:0;pointer-events:none;border-radius:16px}
.pd-stacked .pd-card .pd-vis{min-height:330px}
.pd-stacked .pd-spacer{height:60vh}
/* Oct 22 (Brian): cards stop at 760px (a card grows past it only if its content needs to), so on tall screens the gap after each
   card shortens and the next card peeks in below, about 140px of it */
@media (min-height:1050px){.pd-stacked .pd-spacer:not(.pd-spacer-end){height:max(22vh,calc(100vh - var(--pd-stack-top) - var(--pd-card-max) - 140px))}}
.pd-stacked .pd-spacer-end{height:clamp(24px,5vh,56px)}
.pd-stacked .pd-flow .pd-inner{border-top:1px solid var(--pd-line);padding-top:clamp(48px,8vh,88px)}
/* shorter desktop screens: tighter text column so the card fits */
.pd-stacked.pd-tight .pd-card .pd-text{gap:16px}
.pd-stacked.pd-tight .pd-card{padding-block:24px}

/* the closing card sits on the dark page (on the homepage the page behind it is light) */
.pp-dark .close{background:#121614}
/* the closing card, reversed for this page only (Oct 23): the dark glass of the film windows, the green wash kept as a soft
   mint glow inside, soft white and grey type, the site's own mint button (the base .btn), the photo frame still mint.
   close.css is shared with the homepage, so every rule here stays under .pp-dark on the product page. */
.pp-dark .close-card{background:linear-gradient(160deg,rgba(40,47,43,.82),rgba(22,27,24,.82));border:1px solid rgba(247,247,245,.12);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.04)}
.pp-dark .close-glow::before{background:radial-gradient(58% 58.06% at 60% 69.35%,rgba(103,184,115,.22),rgba(103,184,115,.08) 48%,transparent 78%)}
.pp-dark .close-copy h2{color:#F7F7F5}
.pp-dark .close-copy p{color:#C9CCC9}
.pp-dark .close-copy .btn{background:#B0E1B6;color:#121614!important}
.pp-dark .close-copy .btn:hover{background:#C9EDCB;box-shadow:none}
/* close.css lets the heading and line wrap plainly under 900, which left "picture." alone at 768 and "together." at 390;
   balanced here instead */
@media (max-width:900px){.pp-dark .close-copy h2,.pp-dark .close-copy p{text-wrap:balance}}
/* the footer's one line left "pays." alone at 768 (close.css is shared, so the fix is scoped to this page) */
.pp-dark .foot-brand p{text-wrap:balance}

@media (max-width:640px){
  .pd-text{gap:20px}
  .pd-tabs a{padding:15px 14px 13px}
  .pd-scores div{grid-template-columns:112px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .pd-tabs a,.pd-tabs a span,.pd-tabs a::after,.pd-ctl button,.pd-ctl button::after,.pd-ask button,.pd-ask button i{transition:none}
}

/* Advisor: its text column (with the question list) is the tallest, so the graphic stretches to match it (Oct 22, Brian);
   the caption stays under the graphic */
@media (min-width:900px){
  #advisor .pd-inner{align-items:stretch}
  #advisor .pd-fig{display:flex;flex-direction:column}
  #advisor .pd-vis{flex:1 1 auto}
}

/* very subtle green glows (Oct 22, Brian): one behind the hero headline, one behind each graphic, and a faint wash in the top
   left corner of each stacked card. Behind content, never over it; static, so nothing to turn off for reduced motion. */
.pd-hero{position:relative;isolation:isolate}
.pd-hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-8%;top:-30%;width:min(900px,80vw);height:520px;
  background:radial-gradient(closest-side,rgba(0,180,137,.09),rgba(0,180,137,.03) 55%,transparent)}
.pd-fig{position:relative;isolation:isolate}
.pd-fig::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:8%;right:8%;top:6%;bottom:12%;
  background:radial-gradient(closest-side,rgba(0,180,137,.11),rgba(0,180,137,.04) 50%,transparent);filter:blur(30px)}
.pd-stacked .pd-card::before{content:"";position:absolute;z-index:0;pointer-events:none;left:-10%;top:-30%;width:60%;height:70%;
  background:radial-gradient(closest-side,rgba(0,180,137,.06),transparent)}
.pd-stacked .pd-card>.pd-inner{position:relative;z-index:1}

/* gradient borders (Oct 22, Brian, after Linear's cards): the whole border is one static ring that never fades out completely; it
   is brightest from the top left corner, where the soft glow sits, fading evenly along the top and left edges toward the bottom
   right (a radial gradient scaled to the box, so the top and left fade at the same rate). No transition. The ring sits just
   inside the edge: both boxes clip their contents, which would cut a ring drawn over the border itself. */
.pd-stacked .pd-card{border-color:transparent}
.pd-vis{border-color:transparent}
.pd-stacked .pd-card::after,.pd-vis::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  transition:none;animation:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.pd-stacked .pd-card::after{z-index:3;
  background:radial-gradient(farthest-corner at 0 0,rgba(247,247,245,.32),rgba(247,247,245,.18) 25%,rgba(247,247,245,.1) 55%,rgba(247,247,245,.05))}
.pd-vis::after{z-index:6;
  background:radial-gradient(farthest-corner at 0 0,rgba(247,247,245,.28),rgba(247,247,245,.15) 25%,rgba(247,247,245,.09) 55%,rgba(247,247,245,.045))}

/* graphics with open space under their content fade out into the card at the bottom (Oct 22, Brian): the panel, its fill and its
   border dissolve together. Only Process Map and Advisor; the others have a legend or a figure close to the bottom edge. */
.pd-vis[data-vis="process"]{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 72px),transparent)}
.pd-vis[data-vis="process"],.pd-vis[data-vis="advisor"]{border-bottom-left-radius:0;border-bottom-right-radius:0} /* faded edge: square bottom corners */
.pd-vis[data-vis="advisor"]{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 110px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 110px),transparent)}

/* top bar: fully clear (no fill, no blur) until the page scrolls, then the usual 86% glass (Oct 22, Brian); product.js sets body.pd-scrolled */
body.pp-dark .bar{transition:background-color .4s var(--pd-ease,ease),backdrop-filter .4s var(--pd-ease,ease)}
body.pp-dark:not(.pd-scrolled) .bar{background-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
@media (prefers-reduced-motion:reduce){body.pp-dark .bar{transition:none}}

/* product films (Oct 23, anim/stage.js): each graphic is one of Korravo's own product films on its 1920 x 1080 stage.
   The window keeps the stage's 16:9 shape (phones: a taller 3:4 window, cropped to the focal part, anim/stage.css) and
   sits on the demo's glass: a 160deg fill, a 1px light edge, a top highlight and a deep soft shadow. No fade-out mask. */
.pd-vis.kv-win,.pd-stacked .pd-card .pd-vis.kv-win{aspect-ratio:16/9;min-height:0;border-radius:16px;
  background:linear-gradient(160deg,rgba(40,47,43,.82),rgba(22,27,24,.82));border:1px solid rgba(247,247,245,.12);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.04);-webkit-mask-image:none;mask-image:none}
.pd-vis.kv-win::after{display:none}
@media (max-width:639px){.pd-vis.kv-win,.pd-stacked .pd-card .pd-vis.kv-win{aspect-ratio:3/4}}
/* phones, two exceptions to the 3:4 window (anim/stage.js frames them): Advisor's answers run most of the stage's width,
   so it keeps the 16:9 window and the whole question and answer fit below its heading without a cut line; Insights is a
   little wider (4:5) so a report's bars, names and hours fit side by side */
@media (max-width:639px){
  .pd-vis.kv-win[data-vis="advisor"]{aspect-ratio:16/9}
  .pd-vis.kv-win[data-vis="insights"]{aspect-ratio:4/5}
}
#advisor .pd-vis.kv-win{flex:none}

/* wide screens: the films need room to stay readable (a 1920 stage in v16's 664 px box set its labels at about 5 px).
   In the four cards the text column narrows to 340 and the window takes the rest (about 750 px at 1440, then the zoom
   brings the focal part in close); Insights and Advisor put their text in two columns above a full-width window. */
@media (min-width:1100px){
  .pd-card .pd-inner{flex-wrap:nowrap;gap:40px 48px}
  .pd-card .pd-text{flex:0 0 340px;max-width:340px}
  .pd-card .pd-fig{flex:1 1 auto}
  .pd-flow .pd-inner{flex-direction:column;align-items:stretch;gap:44px}
  .pd-flow .pd-text{flex:none;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:72px;row-gap:24px;align-items:start}
  .pd-flow .pd-text>*{grid-column:1}
  .pd-flow .pd-text>.pd-list{grid-column:2;grid-row:1 / span 3;align-self:end}
  #advisor .pd-text>.pd-list{grid-column:1;grid-row:auto;align-self:auto}
  #advisor .pd-text>.pd-ask{grid-column:2;grid-row:1 / span 4;align-self:end}
  .pd-flow .pd-fig{flex:none;width:100%}
  #advisor .pd-inner{align-items:stretch}
}
/* Insights intro: the bullet list beside the heading never runs past its column; every item may shrink and wrap, and
   below 1280 the list stacks under the intro instead of sharing the row */
.pd-flow .pd-text>*{min-width:0;max-width:100%}
.pd-flow .pd-list li{min-width:0;overflow-wrap:anywhere}
@media (min-width:1100px) and (max-width:1279px){
  #insights .pd-text{grid-template-columns:minmax(0,1fr)}
  #insights .pd-text>.pd-list{grid-column:1;grid-row:auto;align-self:auto}
}

/* the AI Opportunity Map's department chips, website-sized beside the window (the film's own chips are hidden):
   on the demo's pill bar, each chip with its department's dot */
.kv-filters{display:flex;flex-wrap:wrap;gap:6px;width:max-content;max-width:100%;padding:4px;box-sizing:border-box;border-radius:999px;
  background:rgba(30,36,32,.92);border:1px solid rgba(247,247,245,.13);box-shadow:0 24px 50px -24px rgba(0,0,0,.8)}
.kv-filters[hidden]{display:none}
.pd-fig>.kv-filters{margin:-4px 0 12px}
.kv-chip{appearance:none;font:inherit;font-size:13px;line-height:1.3;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px 6px 10px;border-radius:999px;border:1px solid rgba(247,247,245,.13);background:transparent;color:#B8BBB7;
  transition:color .25s var(--pd-ease),border-color .25s var(--pd-ease),opacity .25s var(--pd-ease),background-color .25s var(--pd-ease)}
.kv-chip.all{padding-left:12px}
.kv-chip i{display:block;width:9px;height:9px;border-radius:50%;background:var(--c)}
.kv-chip:hover{color:#F7F7F5}
.kv-chip.on{color:#F7F7F5;border-color:var(--c,rgba(179,226,182,.38));background:rgba(247,247,245,.04)}
.kv-chip.off{opacity:.45}
.kv-chip:focus-visible{outline:2px solid var(--pd-green);outline-offset:2px}
@media (max-width:639px){.kv-filters{border-radius:14px}.kv-chip{font-size:12.5px;padding:5px 10px 5px 8px}}
@media (prefers-reduced-motion:reduce){.kv-chip{transition:none}}

/* the homepage's Illustrative tag (plain, small, grey) at the start of every caption where example data shows; where the
   window can be clicked it also says the examples are prepared, not live (Nicole's product page notes, Oct 21) */
.pd-fig figcaption .il{flex:none;font-size:12px;line-height:1.75;letter-spacing:.02em;color:#9AA09B;white-space:nowrap}
/* Oct 22 (Brian): the headline's second line takes the homepage Client Story heading gradient, pale green to Korravo green.
   Browsers without text clipping keep the gray. */
@supports (-webkit-background-clip:text) or (background-clip:text){
  .pd-hero h1 span{padding-bottom:.12em;margin-bottom:-.12em;background:linear-gradient(100deg,color-mix(in srgb,var(--color-brand-soft) 60%,var(--color-ink-inverse)) 0%,var(--color-action) 90%);
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
}
/* Oct 22 (Brian): a clearer edge on the film windows, which faded out against the cards lower on the page */
.pd-vis.kv-win,.pd-stacked .pd-card .pd-vis.kv-win{border-color:rgba(247,247,245,.2)}
/* Oct 22 (Brian): the caption reads first, on the left; the minor Illustrative label sits on the right. On narrow screens, where
   they stack, the label sits under the caption. */
.pd-fig figcaption{justify-content:space-between}
.pd-fig figcaption .il{order:2;margin-left:auto;text-align:right}
.pd-fig figcaption span:last-child{order:1}
.pd-sub{margin-top:clamp(20px,3vh,32px)} /* Oct 22 (Brian): the line sits closer to the headline */
/* Oct 22 (Val): the tab row spans the same width as the cards below it, edge to edge, so it lines up with the card and the text */
.pd-tabs-in{--pd-tab-pad:clamp(14px,2.4vw,24px);padding:0 var(--pd-tab-pad);max-width:calc(1320px + 2 * var(--pd-tab-pad))}
/* Oct 23 (Nicole): each section title on one line. "Korravo" sits above the name as a small label, and on wide screens the
   name never wraps; the size steps down with the window so the longest, AI Opportunity Map, fits the 340px column */
.pd-sec h2 .pd-k{display:block;font-family:var(--font-mono,"IBM Plex Mono",ui-monospace,monospace);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#B3E2B6;line-height:1;margin-bottom:14px}
@media (min-width:1100px){.pd-card h2{font-size:clamp(30px,2.5vw,38px);white-space:nowrap}}
/* Oct 23 (Brian): the Insights reports leave the bottom of their 16:9 stage empty, so on wider screens the window is
   shorter and shows the stage from y 30 to 930 (anim/stage.js, top) */
@media (min-width:640px){.pd-vis.kv-win[data-vis="insights"]{aspect-ratio:1920/900}}
/* Oct 23 (Brian): phones show the section tabs as a dropdown (product.js builds it from the tabs) */
.pd-dd{display:none;position:relative}
@media (max-width:760px){
  .pd-tabs-in{display:none}
  .pd-dd{display:block}
  .pd-dd-btn{appearance:none;width:100%;display:flex;align-items:baseline;gap:10px;padding:15px var(--gutter,18px) 14px;border:0;border-bottom:1px solid var(--pd-green);background:transparent;color:var(--pd-ink);font:inherit;font-size:15px;text-align:left;cursor:pointer}
  .pd-dd-btn .mono{font-size:11px;letter-spacing:.06em;color:var(--pd-green)}
  .pd-dd-btn b{font-weight:500}
  .pd-dd-btn i{margin-left:auto;align-self:center;width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--pd-ease)}
  .pd-dd.open .pd-dd-btn i{transform:translateY(2px) rotate(-135deg)}
  .pd-dd-list{position:absolute;left:0;right:0;top:100%;background:rgba(18,22,20,.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--pd-line);box-shadow:0 24px 40px -20px rgba(0,0,0,.7);padding:6px 0 10px}
  .pd-dd-list a{display:flex;align-items:baseline;gap:10px;padding:12px var(--gutter,18px);color:var(--pd-sub);text-decoration:none;font-size:15px;transition:color .25s var(--pd-ease),background-color .25s var(--pd-ease)}
  .pd-dd-list a span{font-size:11px;letter-spacing:.06em;color:#7A807B}
  .pd-dd-list a:hover{color:var(--pd-ink);background:rgba(247,247,245,.04)}
  .pd-dd-list a.on{color:var(--pd-ink)}
  .pd-dd-list a.on span{color:var(--pd-green)}
}
/* Oct 23 (Brian): phones were losing too much of each graphic in the tall 3:4 window; a square window shows more of the stage
   across (the crop can reach about 1080 of its 1920px instead of 810). Insights and Advisor keep their own shapes */
@media (max-width:639px){.pd-vis.kv-win:not([data-vis="insights"]):not([data-vis="advisor"]),.pd-stacked .pd-card .pd-vis.kv-win:not([data-vis="insights"]):not([data-vis="advisor"]){aspect-ratio:1/1}}
/* Oct 23 (Brian): the dropdown sits inside the page gutters as a box, not edge to edge */
@media (max-width:760px){
  .pd-dd{margin:8px var(--gutter,18px)}
  .pd-dd-btn{padding:12px 14px 11px;border:1px solid rgba(247,247,245,.14);border-radius:10px;background:rgba(247,247,245,.03);transition:border-color .25s var(--pd-ease),background-color .25s var(--pd-ease)}
  .pd-dd-btn:hover,.pd-dd.open .pd-dd-btn{border-color:rgba(0,180,137,.55)}
  .pd-dd.open .pd-dd-btn{border-bottom-left-radius:0;border-bottom-right-radius:0}
  .pd-dd-list{top:calc(100% - 1px);border:1px solid rgba(0,180,137,.55);border-top-color:rgba(247,247,245,.1);border-radius:0 0 10px 10px;padding:4px 0 8px}
  .pd-dd-list a{padding:11px 14px}
}
/* the list's links are clones of the tabs, so they drop the tab strip's borders, underline and hover wash */
.pd-tabs .pd-dd-list a{border:0;flex:none;min-width:0}
.pd-tabs .pd-dd-list a::after{display:none}
/* Oct 23 (Brian): on phones the choices sit in one row across the width (Client Onboarding, New Hire System and Submitting
   Invoices wrapped to a second line); a long name breaks onto two lines inside its own button instead */
@media (max-width:639px){
  .pd-ctl:not(.pd-boxes){width:100%;flex-wrap:nowrap}
  .pd-ctl:not(.pd-boxes) button{flex:1 1 0;min-width:0;white-space:normal;text-wrap:balance;padding:7px 6px;font-size:12.5px;line-height:1.25;display:flex;align-items:center;justify-content:center}
}
/* Oct 23 (Brian): the Insights report boxes become a dropdown on phones (product.js); same look as the section dropdown */
.pd-dd-boxes{display:none}
@media (max-width:639px){
  .pd-ctl.pd-boxes{display:none}
  .pd-dd.pd-dd-boxes{display:block;margin:0 0 12px;z-index:5}
  .pd-dd-boxes .pd-dd-btn{display:flex;align-items:baseline;gap:10px;width:100%;appearance:none;padding:12px 14px 11px;border:1px solid rgba(247,247,245,.14);border-radius:10px;background:rgba(247,247,245,.03);color:var(--pd-ink);font:inherit;font-size:15px;text-align:left;cursor:pointer;transition:border-color .25s var(--pd-ease)}
  .pd-dd-boxes .pd-dd-btn b{font-weight:500}
  .pd-dd-boxes .pd-dd-btn small,.pd-dd-boxes .pd-dd-list small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#858C86}
  .pd-dd-boxes .pd-dd-btn i{margin-left:auto;align-self:center;width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--pd-ease)}
  .pd-dd-boxes.open .pd-dd-btn{border-color:rgba(0,180,137,.55);border-bottom-left-radius:0;border-bottom-right-radius:0}
  .pd-dd-boxes.open .pd-dd-btn i{transform:translateY(2px) rotate(-135deg)}
  .pd-dd-boxes .pd-dd-list{position:absolute;left:0;right:0;top:calc(100% - 1px);z-index:6;background:rgba(18,22,20,.98);border:1px solid rgba(0,180,137,.55);border-top-color:rgba(247,247,245,.1);border-radius:0 0 10px 10px;padding:4px 0 8px;box-shadow:0 24px 40px -20px rgba(0,0,0,.7)}
  .pd-dd-boxes .pd-dd-list a{display:flex;align-items:baseline;gap:10px;padding:11px 14px;color:var(--pd-sub);text-decoration:none;font-size:15px;transition:color .25s var(--pd-ease),background-color .25s var(--pd-ease)}
  .pd-dd-boxes .pd-dd-list a b{font-weight:500}
  .pd-dd-boxes .pd-dd-list a:hover{color:var(--pd-ink);background:rgba(247,247,245,.04)}
  .pd-dd-boxes .pd-dd-list a.on{color:var(--pd-ink)}
  .pd-dd-boxes .pd-dd-list a.on small{color:#A9C9AD}
}
/* Oct 23 (Brian): all three process names on two lines, so the row reads evenly (New Hire System fitted on one) */
@media (max-width:639px){#process-map .pd-ctl button{padding-inline:16px}}
/* Oct 23 (Brian): with the dropdown box on phones, the bar around it needs no top or bottom rule */
@media (max-width:760px){.pd-tabs{border-top:0;border-bottom:0}}
/* Oct 23 (Brian): the page blurs behind the open dropdowns. A blur cannot reach through another one, so on phones the bar
   itself drops its blur (its fill is 94% already) and the lists are see-through glass */
@media (max-width:760px){
  .pd-tabs{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(18,22,20,.97)}
  .pd-dd-list,.pd-dd-boxes .pd-dd-list{background:rgba(18,22,20,.72);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1)}
}
/* the floating list (see product.js) keeps the box's look outside the bar */
@media (max-width:760px){body>.pd-dd-list{border:1px solid rgba(0,180,137,.55);border-top-color:rgba(247,247,245,.1);border-radius:0 0 10px 10px;padding:4px 0 8px;box-shadow:0 24px 40px -20px rgba(0,0,0,.7)}
  body>.pd-dd-list a{border:0}}
/* Oct 23 (Brian): on phones the caption and the Illustrative note stack: the caption across the width, the note under it */
@media (max-width:639px){
  .pd-fig figcaption{flex-direction:column;align-items:flex-start;gap:4px}
  .pd-fig figcaption span:last-child{flex:none}
  .pd-fig figcaption .il{margin-left:0;text-align:left}
}
/* Oct 23 (Brian): the Advisor's answers were tiny in a 16:9 window on phones; it now has a 4:5 window and its own phone layout */
@media (max-width:639px){.pd-vis.kv-win[data-vis="advisor"]{aspect-ratio:4/5}}
/* Oct 23 (Nicole's bug): the AI Opportunity Map card pins for as long as the three before it (its spacer was 42px, theirs
   500px), and every pinned card fits under its sticky top on shorter laptop screens (product.js, layout) */
.pd-stacked .pd-spacer.pd-spacer-end{height:60vh}
@media (min-height:1050px){.pd-stacked .pd-spacer.pd-spacer-end{height:max(22vh,calc(100vh - var(--pd-stack-top) - var(--pd-card-max) - 140px))}}
.pd-stacked .pd-card .pd-vis.kv-win{min-height:0}   /* product.js caps each window's height so the pinned card fits */
/* Oct 23 (Nicole): the Advisor window fits its conversation on wider screens: a shorter box (the stage's middle band,
   where advisor.html now sits the chat) and no faded bottom edge, as nothing runs off it any more */
@media (min-width:640px){.pd-vis.kv-win[data-vis="advisor"]{aspect-ratio:1920/800;-webkit-mask-image:none;mask-image:none;border-bottom-left-radius:16px;border-bottom-right-radius:16px}}
/* Oct 23 (Brian): a slightly shorter tab bar (about 47px, was 55) so the stacked cards get more room; product.js reads
   its height for the cards' sticky tops */
@media (min-width:761px){.pd-tabs a{padding-top:13px;padding-bottom:11px}}

/* Oct 23 (Brian): cards further back in the stack fade their ring too (product.js sets --pd-ring) */
.pd-stacked .pd-card::after{opacity:var(--pd-ring,1)}
/* Oct 23 (Brian): the graphics take more of each card for readability: the text column narrows from 340 to 300 and the gap
   from 48 to 40, so each window gains 48px; the titles step down to match so the longest still fits on one line */
@media (min-width:1100px){
  .pd-card .pd-inner{column-gap:40px}
  .pd-card:not(.pd-flow) .pd-text{flex-basis:300px;max-width:300px}
  .pd-card h2{font-size:clamp(28px,2.2vw,33px)}
}
/* Oct 23 (Nicole): Insights and Advisor each fit one desktop screen under the sticky bars. Like the four cards above, the
   text sits in a column on the left and the demo on the right; phones and tablets keep the stacked layout. Insights shows
   its report in a 2:1 window (the stage from y 30, the whole report). Advisor's window matches the left column's height */
@media (min-width:1100px){
  .pd-flow .pd-inner{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:40px}
  .pd-flow .pd-text{display:flex;flex-direction:column;gap:22px;flex:0 0 360px;max-width:360px}
  .pd-flow .pd-text>*,#advisor .pd-text>.pd-ask{grid-column:auto;grid-row:auto;align-self:stretch}
  .pd-flow .pd-fig{flex:1 1 auto;width:auto;min-width:0}
  .pd-vis.kv-win[data-vis="insights"]{aspect-ratio:2/1}
  #advisor .pd-inner{align-items:stretch}
  #advisor .pd-fig{display:flex;flex-direction:column}
  #advisor .pd-vis.kv-win[data-vis="advisor"]{aspect-ratio:auto;flex:1 1 auto;min-height:420px}
}
/* Advisor's column is wider, so each question sits on one line and the column fits the screen */
@media (min-width:1100px){
  #advisor .pd-text{flex-basis:440px;max-width:440px;gap:18px}
  #advisor .pd-ask{gap:6px}
  #advisor .pd-ask button{padding-block:9px}
}
/* Oct 23 (Brian): on phones the list view runs past the bottom of its window; a soft fade at the bottom edge */
@media (max-width:639px){
  .pd-vis[data-vis="opportunity"]::before{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;z-index:5;pointer-events:none;border-radius:0 0 16px 16px;
    background:linear-gradient(to bottom,rgba(18,22,20,0),rgba(18,22,20,.92));opacity:0;transition:opacity .4s cubic-bezier(.22,1,.36,1)}
  .pd-vis[data-vis="opportunity"]:has(iframe+iframe.on)::before{opacity:1}
}