/* =========================================================================
   kit.css: the case-study system, taken from the WorkPerks chatbot case
   study (its story.css, black edition) and kept identical in every project
   folder. True black, soft white, one accent per project, set in the page's
   own page.css through --accent-rgb, used for what is live: the section
   dot, the lit step, the suffix on a number. Figtree carries display,
   labels and navigation; Geist the reading text.
   ========================================================================= */
:root {
  --bg: #000000; --bg-2: #0B0B0C; --bg-3: #131315; --bg-4: #1B1B1E;
  --fg: #FFFFFF; --fg-2: #A3A3A3; --fg-3: #8A8A8A;
  --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.16);
  --accent-rgb: 255, 122, 26;
  --accent: rgb(var(--accent-rgb)); --accent-2: #FFA866; --accent-soft: rgba(var(--accent-rgb), 0.10);
  --signal: var(--accent);
  --ok: #8FD3A7;
  --display: 'Figtree', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 8px; --r-lg: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 1280px; --gutter: clamp(1.25rem, 4vw, 3.5rem); --bar: 64px; --gap: clamp(2rem, 5vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 1rem); overflow-x: clip; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg-2); font: 400 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #000; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.vh, .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; background: var(--accent); color: #111214; }
.skip:focus { top: 1rem; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------- type */
.h-hero, .h-statement, .h-sec, .h-sub { margin: 0; font-family: var(--display); font-weight: 500; color: var(--fg); text-wrap: balance; }
.h-hero { font-size: clamp(2.6rem, 4.8vw, 4.8rem); line-height: 0.98; letter-spacing: -0.045em; }
.h-statement { font-size: clamp(2.3rem, 5.2vw, 5.4rem); line-height: 0.98; letter-spacing: -0.045em; max-width: 20ch; }
.h-sec { font-size: clamp(2rem, 3.8vw, 3.8rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 22ch; }
.h-sub { font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.15; letter-spacing: -0.025em; }
.h-statement em, .h-sec em, .h-hero em { font-style: normal; color: var(--fg-3); }
.lede { max-width: 34rem; margin: 1.6rem 0 0; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--fg-2); }
.body { max-width: 38rem; margin: 1.5rem 0 0; font-size: 1.08rem; line-height: 1.65; color: var(--fg-2); }
.body-sm { max-width: 34rem; margin: 0.9rem 0 0; font-size: 0.98rem; line-height: 1.6; color: var(--fg-2); }
.fine { margin: 1rem 0 0; font-size: 0.84rem; color: var(--fg-3); }
.label { margin: 0; font: 400 0.7rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.kicker { margin: 0 0 1rem; font: 400 0.72rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }

/* the chapter marker: a thin rule, a number, a name, sometimes a date */
.mark { display: flex; gap: 2.2rem; margin: 0 0 2.2rem; padding: 0; font: 500 0.8rem/1.3 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.mark span:first-child { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--fg); }
.mark span:first-child::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.mark span:first-child::after { content: '/'; margin-left: -0.35rem; color: var(--fg-3); }

/* label / value columns, each on its own rule */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 2.4rem 0 0; }
.cols div { padding: 0.1rem 0 0.3rem 1rem; border-left: 1px solid var(--line-2); }
.cols dt { font: 400 0.68rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.cols dd { margin: 0.55rem 0 0; font: 500 0.98rem/1.35 var(--display); color: var(--fg); }

/* ------------------------------------------------------------- bar */
.bar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--bar); display: flex; align-items: center; gap: 2rem; padding-inline: var(--gutter); background: rgba(17, 18, 20, 0.94); border-bottom: 1px solid var(--line); }
.bar-id { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; font: 400 0.74rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); }
.bar-id b { display: grid; place-items: center; width: 30px; height: 30px; background: var(--fg); color: var(--bg); font-weight: 700; font-size: 0.68rem; }
.bar-nav { display: flex; gap: 1.8rem; margin: 0 auto; }
.bar-nav a { font: 400 0.72rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.bar-nav a:hover { color: var(--fg); }
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border: 1px solid var(--line-2); border-radius: 2px; text-decoration: none; font: 400 0.72rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.btn-solid { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn-solid:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.bar-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; }
.bar-progress i { display: block; height: 100%; background: var(--signal); transform-origin: left; transform: scaleX(0); }
@media (max-width: 1080px) { .bar-nav { display: none; } .bar .btn { margin-left: auto; } .bar-id span { display: none; } }
/* the Chapters menu, below 1080px (chapterMenu in the page script) */
.bar-menu { display: none; }
@media (max-width: 1080px) {
  .bar { gap: 0.75rem; }
  .bar-menu { display: inline-flex; align-items: center; min-height: 2.5rem; margin-left: auto; padding: 0 0.9rem; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--r); background: none; color: var(--fg); font: 500 0.74rem/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
  .bar-menu::after { content: ''; width: 6px; height: 6px; margin: -3px 0 0 0.55rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.25s var(--ease); }
  .bar-menu[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
  .bar .btn { margin-left: 0; }
  .bar-nav.is-open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 0.25rem var(--gutter) 1rem; background: var(--bg); border-bottom: 1px solid var(--line); }
  .bar-nav.is-open a { display: flex; align-items: center; min-height: 3rem; border-bottom: 1px solid var(--line); text-decoration: none; }
  .bar-nav.is-open a:last-child { border-bottom: 0; }
}
@media (max-width: 420px) { .bar .btn { padding-inline: 0.75rem; } }

.sec { padding-block: clamp(6rem, 12vw, 11rem); }

/* animated links (adapted from Skiper UI's skiper40, credited in the footer) */
.slink { position: relative; display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.slink::before { content: ''; position: absolute; left: 0; bottom: -0.15em; width: 100%; height: 1px; background: currentColor; pointer-events: none; transform: scaleX(0); transform-origin: right; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.slink:hover::before, .slink:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.sl-arr { flex: none; width: 0.55em; height: 0.55em; margin-left: 0.4em; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateY(0.25em); transition: opacity 0.3s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.slink:hover .sl-arr, .slink:focus-visible .sl-arr { opacity: 1; transform: none; }
.sl-lg { font: 500 clamp(1.2rem, 1.9vw, 1.7rem)/1.3 var(--display); letter-spacing: -0.02em; color: var(--fg); }
@media (hover: none) { .sl-lg .sl-arr { opacity: 1; transform: none; } }

/* ============================================================= 01 -> 02 */
.pin { --p: 0; position: relative; }
.pin-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.act-a { height: 230svh; }
.act-a .pin-stage { padding-top: var(--bar); }
.a-surface { position: absolute; inset: var(--bar) 0 0 0; background: var(--bg-2); border: 1px solid var(--line);
  clip-path: inset(calc(12% - 10% * var(--p)) calc(4% - 2.5% * var(--p)) calc(12% - 10% * var(--p)) calc(52% - 50.5% * var(--p)) round 18px); }
.a-grid { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }
.a-hero, .a-phone { grid-column: 1; grid-row: 1; }
.a-built { grid-column: 2; grid-row: 1; }
.a-hero { position: relative; z-index: 1; opacity: calc(1 - var(--p) * 2.2); transform: translateY(calc(var(--p) * -40px)); }
.a-phone { position: relative; z-index: 2; display: grid; justify-items: center;
  transform: translateX(calc((1 - var(--p)) * (100% + var(--gap)))) scale(calc(1.04 - var(--p) * 0.04)); }
.a-phone .phone { height: min(660px, calc(100svh - var(--bar) - 6rem)); }
.a-built { position: relative; z-index: 1; opacity: calc((var(--p) - 0.45) * 2.4); transform: translateY(calc((1 - var(--p)) * 40px)); }
.asks { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 32rem; }
.asks li, .asks button { display: flex; align-items: baseline; gap: 1rem; width: 100%; padding: 0.85rem 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: 500 1.02rem var(--display); color: var(--fg-3); transition: color 0.35s; }
.asks span { flex: none; width: 6.5rem; font: 400 0.66rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }

/* ============================================================= 03 problem */
.pb-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--gap); align-items: end; margin-top: 2.5rem; }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; }
.figs div { padding-left: 1rem; border-left: 1px solid var(--line-2); }
.figs dt { font: 400 0.68rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.figs dd { margin: 0.3rem 0 0; font: 500 clamp(2.6rem, 4.6vw, 4.4rem)/1 var(--display); letter-spacing: -0.04em; color: var(--fg); }

/* the journey, pinned */
.act-c { height: 200svh; }
.act-c .pin-stage { display: grid; align-items: center; padding-top: var(--bar); border-top: 1px solid var(--line); background: var(--bg-2); }
.c-wrap { display: grid; gap: clamp(2.5rem, 6vh, 4.5rem); }
.c-head { position: relative; display: grid; justify-items: center; text-align: center; }
.c-head .kicker { position: relative; min-width: 14rem; }
.c-l0, .c-n0 { opacity: clamp(0, calc((0.55 - var(--p)) * 6), 1); }
.c-l1, .c-n1 { position: absolute; left: 0; right: 0; top: 0; text-align: center; opacity: clamp(0, calc((var(--p) - 0.5) * 6), 1); }
.c-l1 { color: var(--accent); }
.c-flow { display: grid; gap: 2.5rem; min-width: 0; }
.c-steps { --k: clamp(0, calc(var(--p) * 1.5), 1); position: relative; list-style: none; margin: 0 auto; padding: 0; display: flex; width: calc(100% - (100% - min(100%, 760px)) * var(--k)); }
.c-steps::before { content: ''; position: absolute; top: 6px; left: var(--ll, 7%); right: var(--lr, 7%); height: 1px; background: var(--fg-2); }
.c-steps li { position: relative; flex: 1 1 0; min-width: 0; padding-top: 30px; text-align: center; font: 500 clamp(0.95rem, 1.3vw, 1.15rem) var(--display); color: var(--fg); white-space: nowrap; }
.c-steps li i { position: absolute; top: 0; left: 50%; width: 13px; height: 13px; margin-left: -6.5px; border: 1px solid var(--fg-2); background: var(--bg-2); transition: background 0.4s, border-color 0.4s; }
.c-steps .drop { flex-grow: max(0, calc(1 - var(--k) * 1.05)); opacity: max(0, calc(1 - var(--p) * 2.6)); overflow: hidden; }
.c-steps .drop span { display: inline-block; color: var(--fg-3); }
.c-steps .swap span { display: block; }
.c-steps .swap .b { position: absolute; left: 0; right: 0; top: 30px; }
.c-steps .swap .a { opacity: clamp(0, calc((0.62 - var(--p)) * 6), 1); }
.c-steps .swap .b { opacity: clamp(0, calc((var(--p) - 0.55) * 6), 1); }
.act-c.is-after .c-steps .swap:nth-child(4) i { background: var(--signal); border-color: var(--signal); }
.act-c.is-after .c-steps .swap:nth-child(4) .b { color: var(--accent); }
@keyframes caret { 50% { opacity: 0; } }
.c-note { position: relative; margin: 0; text-align: center; color: var(--fg-2); }
.c-old { display: none; }

/* ============================================================= 04 conversational design */
.story { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); margin-top: clamp(3rem, 6vw, 5rem); }
.story-phone { position: relative; }
.story-stick { position: sticky; top: calc(var(--bar) + 2rem); display: grid; justify-items: center; }
.story-stick .phone { z-index: 2; transition: transform 0.7s var(--ease), opacity 0.6s var(--ease); }
.story-src { max-width: 22rem; margin: 1.2rem 0 0; font: 400 0.68rem/1.5 var(--mono); letter-spacing: 0.04em; text-align: center; color: var(--fg-3); }
.story-steps { list-style: none; margin: 0; padding: 0; }
.story-steps li { display: flex; flex-direction: column; justify-content: center; min-height: 72svh; padding-left: 1.5rem; border-left: 1px solid var(--line); transition: border-color 0.6s var(--ease); }
.story-steps li.is-on { border-left-color: var(--accent); }
/* a step not being read dims by colour, not opacity, so its text stays legible */
.story-steps li h3, .story-steps li p:not(.st-k) { transition: color 0.6s var(--ease); }
.story-steps li:not(.is-on) h3, .story-steps li:not(.is-on) p:not(.st-k) { color: var(--fg-3); }
/* each step's own screen, shown inline when the story is not pinned (kit.js) */
.st-media { display: none; }
/* Pause / Play for a demo that plays itself (kit.js autoplay) */
.ap-toggle { margin-top: 1rem; min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--fg-2); font: 500 0.72rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.ap-toggle:hover { color: var(--fg); border-color: var(--fg-3); }
.st-media figcaption { margin-top: 0.8rem; font: 500 0.7rem/1.4 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.st-k { margin: 0 0 0.9rem; font: 400 0.72rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.story-steps h3 { margin: 0; font: 500 clamp(1.8rem, 3vw, 2.7rem)/1.06 var(--display); letter-spacing: -0.03em; color: var(--fg); }
.story-steps p:not(.st-k) { max-width: 32rem; margin: 1rem 0 0; font-size: 1.05rem; line-height: 1.65; color: var(--fg-2); }
.st-route { align-self: flex-start; margin-top: 1.2rem; padding: 0.35rem 0.6rem; border: 1px solid var(--line-2); border-radius: 3px; font: 400 0.76rem/1.4 var(--mono); color: var(--accent-2); }
.st-route:empty { display: none; }

@keyframes cvFlow { to { stroke-dashoffset: -9; } }
.ba:not(.is-after) .ba-b.is-before { animation: arrive 0.5s var(--ease) both; }

/* ============================================================= 05 how the AI works */
.act-e { height: 200svh; }
.act-e .pin-stage { display: grid; align-items: center; padding-top: var(--bar); background: var(--bg-2); border-top: 1px solid var(--line); }
.e-wrap { display: grid; gap: clamp(2rem, 5vh, 3.5rem); }
.e-head .mark { margin-bottom: 1.5rem; }
.sys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 2rem); }
.sys li { --f: 0; position: relative; display: grid; grid-template-rows: auto 130px auto; align-content: start; gap: 0.8rem; opacity: 0.3; transition: opacity 0.5s var(--ease); }
.sys li.is-on { opacity: 1; }
.sys-k { font: 400 0.66rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.sys li.is-on .sys-k { color: var(--fg); }
.sys-node { position: relative; display: grid; align-content: center; gap: 0.35rem; padding: 0.9rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg-3); transition: border-color 0.4s; }
.sys li.is-on .sys-node { border-color: var(--fg-2); }
.sys-node::after { content: ''; position: absolute; top: 50%; left: 100%; width: clamp(1rem, 2.2vw, 2rem); height: 1px; background: linear-gradient(90deg, var(--accent) calc(var(--f) * 100%), var(--line-2) calc(var(--f) * 100%)); }
.sys li:last-child .sys-node::after { display: none; }
.sys-node.is-ai { background: var(--accent-soft); }
.sys li.is-on .sys-node.is-ai { border-color: var(--accent); }
.sys-node code { font: 700 0.85rem/1.3 var(--mono); color: var(--accent-2); }
.sys-node small { font: 400 0.68rem/1.5 var(--mono); color: var(--fg-2); }
.sys-node b { font: 500 1rem var(--display); color: var(--fg); }
.sys-p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--fg-2); }
.sys-note { margin: 0; font: 400 0.68rem/1.5 var(--mono); letter-spacing: 0.04em; color: var(--fg-3); }
.sys-more { padding-top: clamp(4rem, 7vw, 6rem); background: var(--bg-2); }
.sm-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.sm-grid > * { min-width: 0; }
.df-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 2rem; }
.dataflow { width: 100%; height: auto; overflow: visible; }
.df-box { fill: var(--bg-3); stroke: var(--line-2); }
.df-box.df-dark { fill: var(--fg); stroke: var(--fg); }
.df-box.df-ai { fill: var(--accent-soft); stroke: var(--accent); }
.df-t { font: 500 17px var(--display); fill: var(--fg); text-anchor: middle; }
.df-s { font: 400 12.5px var(--sans); fill: var(--fg-2); text-anchor: middle; }
.df-inv { fill: var(--bg); } .df-inv2 { fill: rgba(17,18,20,0.7); } .df-acc { fill: var(--accent-2); }
.df-line { fill: none; stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 3 5; }
.df-line.df-acc { stroke: var(--accent); fill: none; }
.df-dot { fill: var(--fg); } .df-dot.df-acc { fill: var(--accent); }
.df-k { font: 400 11px var(--mono); fill: var(--fg-3); text-anchor: middle; }
.df-hint { display: none; margin: 10px 0 0; font: 400 11px var(--mono); color: var(--fg-3); }
.tools { margin: 0; border-top: 1px solid var(--line); }
.tools div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.tools dt { font: 400 0.66rem/1.9 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.tools dd { margin: 0; line-height: 1.9; }
.tools code { font: 400 0.8rem var(--mono); color: var(--fg); }
.k-gap { margin-top: 2.5rem; }
.ladder { list-style: none; margin: 0; padding: 0; counter-reset: r; border-top: 1px solid var(--line); }
.ladder li { counter-increment: r; display: grid; grid-template-columns: 2rem 1fr; gap: 0.15rem 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.ladder li::before { content: '0' counter(r); grid-row: span 2; font: 400 0.72rem/1.6 var(--mono); color: var(--fg-3); }
.ladder b { font: 500 0.98rem var(--display); color: var(--fg); }
.ladder span { font-size: 0.88rem; line-height: 1.5; color: var(--fg-2); }

/* ============================================================= 06 building */
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); max-width: 1180px; margin: clamp(4rem, 8vw, 6rem) auto 0; padding-inline: var(--gutter); }
.scr { margin: 0; }
.scr img { width: 100%; border-radius: 28px; }
.scr-2 { margin-top: 4rem; }
.scr figcaption { margin-top: 1.1rem; padding-left: 0.9rem; border-left: 1px solid var(--line-2); font-size: 0.9rem; color: var(--fg-2); }
.scr figcaption span { display: block; margin-bottom: 0.3rem; font: 400 0.66rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.facts { margin-top: 3rem; }
.facts dd { font: 400 0.98rem/1.55 var(--sans); color: var(--fg-2); }
.facts .big { display: block; margin-bottom: 0.6rem; font: 400 clamp(3rem, 5.5vw, 5rem)/1 var(--display); letter-spacing: -0.05em; color: var(--fg); }
.who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(3rem, 6vw, 4.5rem); }
.who p:not(.kicker) { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--fg); }

/* ============================================================= 07 testing */
.ev-scope { max-width: 42rem; }
.metrics { margin-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--line); }
.m-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--line); }
.m-num { margin: 0; font: 400 clamp(4.5rem, 12vw, 10.5rem)/0.9 var(--display); letter-spacing: -0.06em; color: var(--fg); font-variant-numeric: tabular-nums; }
.m-num small { font-size: 0.32em; letter-spacing: -0.02em; color: var(--fg-3); }
.m-k { margin: 0 0 0.6rem; font: 500 0.78rem var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-2); }
.m-txt > p:not(.m-k) { margin: 0; max-width: 30rem; font-size: 1rem; line-height: 1.6; color: var(--fg-2); }
.m-txt b { color: var(--fg); font-weight: 500; }

/* ============================================================= 08 discoveries */
.discoveries { background: var(--bg-2); border-top: 1px solid var(--line); }
.disc { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; }
.disc li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); font-size: 0.98rem; line-height: 1.5; }
.disc li > span:nth-child(1) { color: var(--fg-3); }
.disc li > span:nth-child(2) { color: var(--fg); font: 500 1.05rem/1.45 var(--display); }
.disc li > span:nth-child(3) { color: var(--accent-2); }
.disc li > span:nth-child(3)::before { content: '\2192\00a0'; }
.disc .disc-h { padding-bottom: 0.8rem; border-bottom-color: var(--line-2); }
.disc .disc-h span { font: 400 0.66rem var(--mono) !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3) !important; }
.disc .disc-h span:nth-child(3)::before { content: none; }

/* ============================================================= 09 learnings: calmer */
.learnings { padding-block: clamp(5rem, 9vw, 8rem); }
.learn { list-style: none; margin: 0; padding: 0; counter-reset: l; border-bottom: 1px solid var(--line); }
.learn li { counter-increment: l; display: grid; grid-template-columns: 3rem minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 clamp(1.5rem, 4vw, 3.5rem); align-items: baseline; padding: clamp(1.2rem, 2.4vw, 1.75rem) 0; border-top: 1px solid var(--line); }
.learn li::before { content: '0' counter(l); font: 500 0.8rem var(--display); color: var(--accent); }
.learn h3 { margin: 0; font: 500 clamp(1.25rem, 1.9vw, 1.7rem)/1.2 var(--display); letter-spacing: -0.025em; color: var(--fg); text-wrap: balance; }
.learn p { margin: 0; max-width: 32rem; font-size: 0.98rem; line-height: 1.6; color: var(--fg-2); }
.finale { margin-top: clamp(3rem, 6vw, 4.5rem); }
.finale .h-sec { max-width: 24ch; }
.finale .body { margin-top: 1rem; }
.finale em { color: var(--accent); }

/* ============================================================= 10 final prototype: the opening's stage again */
.try { padding-bottom: clamp(4rem, 7vw, 6rem); }
.try-stage { margin: 0 clamp(0.75rem, 1.5vw, 1.25rem); padding-block: clamp(3rem, 7vw, 5.5rem); border: 1px solid var(--line); background: var(--bg-2); position: relative; overflow: hidden; }
.try-grid { height: auto; position: relative; z-index: 1; }
.try-grid .a-phone { grid-column: 2; transform: none; }
.try-grid .phone { height: 680px; }
.try-copy { grid-column: 1; grid-row: 1; }
.end { margin-top: clamp(4rem, 7vw, 6rem); }
.end-nav { display: flex; flex-wrap: wrap; gap: 1rem 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.foot { border-top: 1px solid var(--line); background: #0C0D0F; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.6rem; font: 400 0.68rem/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.foot-in p { margin: 0; }
.foot-links { display: flex; gap: 1.5rem; padding-left: 1rem; border-left: 1px solid var(--fg-2); }
.foot-links a { color: var(--fg-2); }
.foot-links a:hover { color: var(--fg); }
/* touch targets: 44px on a phone for the bar's links and the footer's */
.foot-links a { display: inline-block; padding-block: 0.75rem; }
@media (max-width: 900px) { .bar .btn, .bar-menu { min-height: 2.75rem; } .bar-id { padding-block: 7px; } }

/* ============================================================= black edition details */
.label, .kicker, .cols dt, .bar-id, .bar-nav a, .btn, .st-k, .scr figcaption span, .foot-in, .phone-cap, .tools dt { font-family: var(--display) !important; font-weight: 500 !important; letter-spacing: 0.04em !important; }
.bar { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bar-id b { border-radius: 50% 50% 50% 4px; background: var(--accent); color: #000; }
.bar-nav a { font-size: 0.82rem !important; color: var(--fg) !important; }
.bar-nav sup { margin-right: 0.25rem; font-size: 0.56rem; color: var(--fg-3); }
.btn { border-radius: var(--r); border-color: rgba(255, 255, 255, 0.5); font-size: 0.74rem !important; }
.btn-solid { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: var(--fg); }
.cur { display: inline-block; width: 0.55em; height: 0.09em; margin-left: 0.06em; background: var(--accent); vertical-align: baseline; animation: caret 1.1s steps(1) infinite; }
.m-num small, .figs dd small, .facts .big small { color: var(--accent); }
.m-num small { font-size: 0.42em; letter-spacing: -0.03em; }
/* the light: soft blurred glows instead of lit surfaces */
.a-surface { background: radial-gradient(60% 70% at 70% 60%, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0) 70%), var(--bg-2); }
.act-a .pin-stage::before { content: ''; position: absolute; inset: 0 0 auto auto; width: 60vw; height: 70vh; background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0)); filter: blur(30px); pointer-events: none; }
.try-stage { border-radius: var(--r-lg); background: radial-gradient(50% 70% at 75% 60%, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0) 70%), var(--bg-2); }
.learnings, .discoveries { background: radial-gradient(60% 40% at 0% 0%, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0) 70%); }
/* tool and method lists in the reference's // style */
.tools code::before { content: '// '; color: var(--fg-3); }
.tools code { display: inline-block; margin-right: 0.9rem; }
/* the scrolling band */
.band { overflow: hidden; padding-block: clamp(2rem, 5vw, 4rem); border-block: 1px solid var(--line); }
.band-track { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); width: max-content; animation: band 38s linear infinite; }
.band:hover .band-track { animation-play-state: paused; }
.band span { font: 500 clamp(3rem, 8vw, 7.5rem)/1 var(--display); letter-spacing: -0.045em; color: var(--fg); white-space: nowrap; }
.band i { flex: none; width: clamp(1.6rem, 4vw, 3.6rem); aspect-ratio: 1; border: 1px solid var(--fg-3); border-radius: 50%; background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(255,255,255,0.18) 6px 7px), repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,0.18) 6px 7px); }
@keyframes band { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .band-track, .cur { animation: none; } }

/* ============================================================= kit additions
   Components the Bajaj Finserv Health case studies need that the chatbot
   page does not: real screens in a device, a story whose media swaps, wide
   product shots, scrollable journey strips, label/value rows. */
.device { position: relative; width: min(320px, 100%); margin: 0; padding: 7px; border-radius: 44px; background: #1B1B1E; box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 50px 100px -40px rgba(var(--accent-rgb), 0.35); }
.device img { width: 100%; border-radius: 38px; }
.device .swap { display: grid; }
.device .swap > img { grid-area: 1 / 1; opacity: 0; transition: opacity 0.6s var(--ease); }
.device .swap > img.is-on { opacity: 1; }
.a-phone .device { height: auto; max-height: calc(100svh - var(--bar) - 5rem); }
.a-phone .device img { max-height: calc(100svh - var(--bar) - 5.9rem); object-fit: cover; object-position: top; }
.dev-cap { margin: 1rem 0 0; font: 500 0.7rem/1.4 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); text-align: center; }
.asks.is-auto li { display: flex; align-items: baseline; gap: 1rem; width: 100%; padding: 0.85rem 0; border-bottom: 1px solid var(--line); font: 500 1.02rem var(--display); color: var(--fg-3); transition: color 0.35s; }
.asks.is-auto li::after { content: ''; align-self: center; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: transparent; transition: background 0.35s; }
.asks.is-auto li.is-now { color: var(--fg); }
.asks.is-auto li.is-now::after { background: var(--signal); box-shadow: 0 0 10px var(--signal); }

/* the sticky story: media on one side swaps as the steps pass */
.story-media { position: sticky; top: calc(var(--bar) + 2rem); display: grid; justify-items: center; }
.story-media > * { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); }
.story-media > .is-on { opacity: 1; transform: none; }
.story-media .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; width: min(440px, 100%); }
.story-media .pair img { width: 100%; border-radius: 22px; box-shadow: 0 0 0 1px var(--line-2); }
.story-media figcaption { margin-top: 1rem; font: 500 0.7rem/1.4 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); text-align: center; }

/* wide product shots and pairs */
.shot { margin: clamp(3rem, 6vw, 4.5rem) auto 0; max-width: 1180px; padding-inline: var(--gutter); }
.shot img { width: 100%; border-radius: 14px; box-shadow: 0 0 0 1px var(--line-2), 0 50px 100px -50px rgba(var(--accent-rgb), 0.3); }
.shot figcaption, .cap { margin-top: 1rem; max-width: 65ch; font-size: 0.9rem; line-height: 1.55; color: var(--fg-2); }
.cap span, .shot figcaption span { margin-right: 0.8rem; font: 500 0.7rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.pair2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); }
.pair2 img { width: 100%; border-radius: 14px; box-shadow: 0 0 0 1px var(--line-2); }

/* a journey strip: screens in a row, scrolling sideways when they overflow */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 1rem; margin-top: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; scrollbar-width: thin; }
.strip figure { margin: 0; scroll-snap-align: start; }
.strip img { width: 100%; border-radius: 16px; box-shadow: 0 0 0 1px var(--line-2); }
.strip figcaption { margin-top: 0.7rem; font: 500 0.68rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }

/* label / value rows */
.rows { margin: 2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rows > div, .rows > li { display: grid; grid-template-columns: minmax(8rem, 0.32fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.rows dt, .rows .k { margin: 0; font: 500 1rem/1.4 var(--display); color: var(--fg); }
.rows dd, .rows .v { max-width: 65ch; margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--fg-2); }
.rows ul { margin: 0; padding-left: 1.1rem; }
.disc.two li { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
.disc.two li > span:nth-child(2) { color: var(--fg-2); font: 400 0.98rem/1.5 var(--sans); }
.disc.two li > span:nth-child(2)::before { content: '\2192\00a0'; color: var(--accent); }
.disc.two li > span:nth-child(1) { color: var(--fg); font: 500 1.05rem/1.4 var(--display); }

/* chips: live and in development */
.chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.22rem 0.6rem; border: 1px solid var(--line-2); border-radius: 999px; font: 500 0.66rem/1.3 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.chip.is-live { border-color: rgba(143, 211, 167, 0.4); color: var(--ok); }
.chip.is-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* a diagram on a plate */
.plate { margin-top: 2rem; padding: clamp(1rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-2); overflow-x: auto; }
.pull { margin: 0; max-width: 26ch; font: 500 clamp(1.5rem, 2.6vw, 2.3rem)/1.15 var(--display); letter-spacing: -0.03em; color: var(--fg); text-wrap: balance; }
.caveat { margin: 1.25rem 0 0; padding-left: 1rem; border-left: 1px solid var(--accent); max-width: 40rem; font-size: 0.95rem; line-height: 1.6; color: var(--fg-2); }
.split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.split2 > * { min-width: 0; }
.sec-gap { margin-top: clamp(4rem, 8vw, 6.5rem); }
.wrap-tight { max-width: 1180px; }
@media (max-width: 900px) {
  .split2, .pair2 { grid-template-columns: 1fr; }
  .rows > div, .rows > li { grid-template-columns: 1fr; gap: 0.3rem; }
  .disc.two li { grid-template-columns: 1fr; }
  .story-media { position: relative; top: 0; margin-bottom: 1.5rem; }
  /* the collapse, still: only the after labels, free to wrap */
  .c-steps li { white-space: normal; font-size: 0.9rem; line-height: 1.25; }
  .no-pin .c-steps .swap .a, .no-pin .c-steps .drop { display: none; }
  .no-pin .c-steps .swap .b { position: static; }
}


/* a process, as a stepper: one line of dots, filled as each step lights;
   the newest lit step glows in the project's colour */
.loop { list-style: none; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.loop li { position: relative; display: grid; align-content: start; gap: 0.35rem; min-width: 0; padding: 1.9rem 1.25rem 0 0; font: 500 clamp(1rem, 1.35vw, 1.2rem)/1.25 var(--display); letter-spacing: -0.015em; color: var(--fg-3); transition: color 0.4s; }
.loop li::before { content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--fg-3); background: var(--bg); transition: background 0.4s, border-color 0.4s, box-shadow 0.4s; }
.loop li::after { content: ''; position: absolute; top: 5px; left: 11px; right: 0; height: 1px; background: var(--line-2); transition: background 0.4s; }
.loop li:last-child::after { display: none; }
.loop li.is-lit { color: var(--fg); }
.loop li.is-lit::before { background: var(--fg); border-color: var(--fg); }
.loop li.is-lit::after { background: var(--fg-3); }
.loop li.is-lit:not(:has(+ li.is-lit))::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent); }
.loop li b { font: inherit; color: inherit; }
.loop li small { font: 400 0.84rem/1.45 var(--sans); letter-spacing: 0; color: var(--fg-3); }
@media (max-width: 900px) {
  .loop { grid-auto-flow: row; }
  .loop li { padding: 0 0 1.4rem 1.9rem; }
  .loop li::after { top: 11px; left: 5px; right: auto; bottom: 0; width: 1px; height: auto; }
}

/* a long screen in a phone frame, scrolled by the page */
.scrollshot { overflow-y: auto; aspect-ratio: 9 / 19.5; max-height: min(680px, 80svh); scrollbar-width: none; }
.scrollshot.is-driven { overflow: hidden; }
.scrollshot img { aspect-ratio: auto !important; max-height: none !important; }
/* every phone screen keeps one proportion */
.device img, .strip img, .story-media .pair img { aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; }

/* ============================================================= still layouts
   Narrow screens and reduced motion: each pinned sequence in its end state. */
.no-pin .pin { height: auto !important; --p: 1 !important; }
.no-pin .pin-stage { position: relative; height: auto; overflow: visible; padding-block: clamp(5rem, 10vw, 8rem); }
.no-pin .act-a .pin-stage { padding-top: calc(var(--bar) + 3rem); }
.no-pin .a-surface { display: none; }
.no-pin .a-grid { height: auto; row-gap: 4rem; align-items: start; }
.no-pin .a-hero { grid-column: 1; grid-row: 1; opacity: 1; transform: none; }
.no-pin .a-phone { grid-column: 2; grid-row: 1 / span 2; transform: none; }
.no-pin .a-built { grid-column: 1; grid-row: 2; opacity: 1; transform: none; }
.no-pin .c-old { display: block; margin: 0; text-align: center; font-size: 0.9rem; color: var(--fg-3); text-decoration: line-through; }
.no-pin .c-l0, .no-pin .c-n0 { display: none; }
.no-pin .c-l1, .no-pin .c-n1 { position: static; opacity: 1; }
.no-pin .c-steps::before { left: 12.5%; right: 12.5%; }
.no-pin .sys li { opacity: 1; --f: 1; }
/* not pinned: every step reads at full strength with its own screen, nothing cycles */
.no-pin .story { grid-template-columns: minmax(0, 1fr); }
.no-pin .story-side { display: none; }
.no-pin .story-steps { max-width: 44rem; }
.no-pin .story-steps li { min-height: 0; padding-block: 1.75rem; border-left-color: var(--line); }
.no-pin .story-steps li h3 { color: var(--fg); }
.no-pin .story-steps li p:not(.st-k) { color: var(--fg-2); }
.no-pin .st-media { display: block; width: min(300px, 100%); margin: 1.5rem 0 0; }
.no-pin .st-media > img { width: 100%; border-radius: 22px; box-shadow: 0 0 0 1px var(--line-2); }
.no-pin .sys li .sys-node { border-color: var(--fg-2); }

@media (max-width: 1100px) {
  .story { grid-template-columns: 360px minmax(0, 1fr); gap: 3rem; }
  .sys { grid-template-columns: 1fr; gap: 0; max-width: 34rem; }
  .sys li { grid-template-rows: auto auto auto; padding: 0 0 1.75rem 1.5rem; border-left: 1px solid var(--line-2); }
  .sys li:last-child { border-left-color: transparent; }
  .sys-node::after { display: none; }
  .sys li::before { content: ''; position: absolute; left: -5px; top: 0; width: 9px; height: 9px; background: var(--fg); }
}
@media (max-width: 900px) {
  :root { --bar: 58px; }
  .cols, .cols-3 { grid-template-columns: 1fr; gap: 1rem; }
  .no-pin .a-grid { grid-template-columns: 1fr; }
  .no-pin .a-hero, .no-pin .a-phone, .no-pin .a-built { grid-column: 1; grid-row: auto; }
  .pb-row, .story, .phr, .trust, .ba-wrap, .sm-grid, .who, .m-row, .try-grid { grid-template-columns: 1fr; }
  .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-stick { position: relative; top: 0; }
  .story-steps li { min-height: 0; padding-block: 1.75rem; }
  .screens { grid-template-columns: 1fr; max-width: 420px; }
  .scr-2 { margin-top: 0; }
  .disc li { grid-template-columns: 1fr; gap: 0.35rem; }
  .disc .disc-h { display: none; }
  .learn li { grid-template-columns: 2.2rem minmax(0, 1fr); row-gap: 0.5rem; }
  .learn p { grid-column: 2; }
  .try-grid .a-phone, .try-copy { grid-column: 1; grid-row: auto; }
  .try-grid .phone { height: 620px; }
}
@media (max-width: 760px) {
  .df-scroll .dataflow { min-width: 720px; }
  .df-hint { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .df-dot { display: none; }
  .story-steps li, .story-steps li h3, .story-steps li p, .cd-app, .story-stick .phone, .device .swap > img, .story-media > *, .frame .swap > img { transition: none !important; }
}
html:not(.js) .phone, html:not(.js) .cv, html:not(.js) .ba-switch, html:not(.js) .asks.is-auto, html:not(.js) .mini, html:not(.js) .story-src { display: none; }
html:not(.js) .ba-b.is-after { display: grid; }
html:not(.js) .story-steps li { opacity: 1; min-height: 0; padding-block: 1.5rem; }
html:not(.js) .pin { height: auto; --p: 1; }
html:not(.js) .pin-stage { position: relative; height: auto; }
.story > *, .phr > *, .trust > *, .pb-row > * { min-width: 0; }
.asks li:has(> button) { display: block; padding: 0; border: 0; }
/* very narrow: the figures stack as rows, label left and number right, at full label size */
@media (max-width: 400px) { .figs { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; } .figs div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .figs dd { margin: 0; font-size: 2.2rem; } }