/* The sections an evidence-led page is assembled from: the heading with its hand-off line, the
   one card, the panel, the four-step progression, the two stories, the proof-of-value line, the
   scenario, the questions, the close and the trust band, the thread that ties the home page's
   sections together, and the film components composed inside the shell's one frame (the seat
   switch, the seat panels, the poster cards, the industry grid). One sheet, not two: a second
   render-blocking request cost the phone's largest paint half a second. The page's own shell
   (tokens, type, controls, hero, film frame) is css/evidence.css, which this sheet is linked
   after and overrides by source order. */

/* ---------------- the section heading and its hand-off ---------------- */
/* Centred h2, then the dek that answers what the previous section left open, 40px to the body.
   The foot carries the section's link on the left and the hand-off sentence on the right: the
   line that says why the next section is there. */
.kh-section-heading { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin-bottom: 40px; }
.kh-section-heading h2 { margin: 0; }
.kh-section-heading > p { max-width: 560px; margin: 0; }
.kh-section-heading--later { margin-top: var(--kh-s-7); }
.kh-section-heading h3 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.04em; }
.kh-section-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kh-s-2) var(--kh-s-4); margin-top: 40px; }
.kh-section-foot .cta { flex: none; }
.kh-section-hand { margin: 0 0 0 auto; max-width: 52ch; text-align: right; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--kh-body); text-wrap: balance; }

/* ---------------- the card ---------------- */
/* One card on the site: white, a hairline, radius 17, padding 28, content-tall. A numeral with
   no box behind it, the h3, the body, the foot link at the bottom. A card that links carries the
   whole card as the target and lifts 4px; the foot's mark travels 2px with it. */
.kh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kh-s-4); }
.kh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kh-card { display: flex; flex-direction: column; min-height: 0; padding: 28px; background: #fff; border: 1px solid var(--kh-line); border-radius: var(--kh-r-card); color: inherit; text-decoration: none; text-align: left; font: inherit; transition: transform 300ms var(--spring), box-shadow 300ms var(--spring), border-color var(--kh-feedback) ease; }
:is(a, button).kh-card { cursor: pointer; }
:is(a, button).kh-card:hover { transform: translateY(-4px); border-color: var(--kh-line-2); box-shadow: var(--kh-shadow-card); }
:is(a, button).kh-card:active { transform: none; }
.kh-card-num { margin: 0 0 18px; font-size: 14px; font-weight: 700; line-height: 1; color: var(--kh-ember); font-variant-numeric: tabular-nums; }
.kh-card h3 { margin: 0 0 10px; font-size: 20px; }
.kh-card p { margin: 0 0 var(--kh-s-4); font-size: 15px; color: var(--kh-body); }
.kh-card .ev-link { margin-top: auto; padding-block: 6px; }
/* align-items centre puts every foot label and its mark on one line. */
.kh-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--kh-s-2); margin-top: auto; padding-top: var(--kh-s-2); color: var(--kh-ink); font-size: 14px; font-weight: 650; }
.kh-card-foot > span { font-size: 17px; line-height: 1; }
:is(a, button).kh-card:hover .kh-card-foot > span { transform: translate(2px, -2px); }
/* A poster card: the film's frame at the top, the text under it. */
.kh-card--poster { padding: 0; overflow: hidden; }
.kh-card--poster img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #111827; border-bottom: 1px solid var(--kh-line); }
.kh-card--poster > div { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 24px; }
/* Inside the panel the cards lose their borders: the rule between the columns does the work. */
.kh-panel { padding: var(--kh-s-6); background: #fff; border: 1px solid var(--kh-line); border-radius: var(--kh-r-card); }
.kh-panel .kh-grid { gap: 0; }
.kh-card--flat { padding: 0; border: 0; border-radius: 0; }
.kh-card--flat + .kh-card--flat { border-left: 1px solid var(--kh-line); padding-left: var(--kh-s-6); }
.kh-card--flat:not(:last-child) { padding-right: var(--kh-s-6); }
.kh-card--flat p { margin-bottom: var(--kh-s-2); }
.kh-card--flat .ev-link { padding-bottom: 0; }

/* ---------------- the stories ---------------- */
/* Two open columns on one rule, no cards. */
.kh-stories-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--kh-s-7); border-top: 1px solid var(--kh-line); }
.kh-story { display: flex; flex-direction: column; padding: var(--kh-s-5) 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--kh-line); }
.kh-story .ev-kicker { margin: 0 0 12px; }
.kh-story h3 { margin: 0 0 12px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.03em; transition: color var(--kh-feedback) ease; }
.kh-story p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--kh-body); max-width: 46ch; }
.kh-story .kh-card-foot { margin-top: auto; padding-top: 18px; }
.kh-story:hover h3 { color: var(--kh-ember); }
.kh-story:hover .kh-card-foot > span { transform: translate(2px, -2px); }
.kh-story:focus-visible { outline: 2px solid #111827; outline-offset: 4px; border-radius: 6px; }

/* ---------------- the four-step progression ---------------- */
/* Open, with no card around it: one rule across the row, the numbers on one line, the headings
   on one line and every paragraph starting together. subgrid keeps the third row aligned when
   one heading wraps and another does not. */
.ev-process { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kh-s-5); margin: var(--kh-s-5) 0; }
.ev-process li > span, .ev-index { color: var(--kh-ember); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-process li { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 14px; border-top: 1px solid var(--kh-line); padding-top: var(--kh-s-3); }
.ev-process h3 { margin-top: 0; }
.ev-process li p { margin: 0; }
.ev-process--plain li p { margin: 14px 0 0; font-size: 15.5px; }
.ev-section-head { max-width: 740px; margin-bottom: 30px; }

/* ---------------- the three beats (home) ---------------- */
/* Talk, kept, ask: three open columns on one rule, the branded word large in the middle so the
   flow reads at a glance, an arrow between the beats on desktop and below each on phones. */
.kh-flow3 { list-style: none; padding: 0; margin: var(--kh-s-5) 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--kh-s-6); align-items: start; }
.kh-flow3 li { position: relative; display: grid; gap: 14px; border-top: 1px solid var(--kh-line); padding-top: var(--kh-s-4); text-align: center; }
.kh-flow3 li + li::before { content: "→"; position: absolute; left: calc(-1 * var(--kh-s-6) / 2); top: var(--kh-s-4); transform: translateX(-50%); font-size: 22px; line-height: 1; color: var(--kh-ember); }
.kh-flow3-n { font-size: 14px; font-weight: 700; line-height: 1; color: var(--kh-ember); font-variant-numeric: tabular-nums; }
.kh-flow3 h3 { margin: 0; font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; min-height: 1.1em; display: flex; align-items: baseline; justify-content: center; }
.kh-flow3 li p { margin: 0; font-size: 16px; max-width: 34ch; margin-inline: auto; }
.kh-flow3-kept h3 { min-height: 1.1em; }
.kh-flow3-mark { display: inline-block; font-size: clamp(56px, 6.2vw, 96px); font-weight: 500; letter-spacing: -.05em; line-height: 1; color: var(--kh-ink); }
.kh-flow3-kept p { font-size: 17px; max-width: 38ch; }

/* ---------------- how it works (/walkthrough): two films, four screens ---------------- */
/* js/site.js stamps html[data-audience] before <main> is parsed and js/seat.js drives the switch;
   without scripts both films stand, one under the other. */
.kh-how-films { padding-block: 8px 24px; }
.kh-how-films .kh-seat { display: flex; width: fit-content; margin: 0 auto var(--kh-s-4); }
html[data-audience] .kh-aud-panel { display: none; }
html[data-audience="business"] .kh-aud-panel[data-audience-panel="business"],
html[data-audience="personal"] .kh-aud-panel[data-audience-panel="personal"] { display: block; }
html:not([data-audience]) .kh-aud-panel + .kh-aud-panel { margin-top: var(--kh-s-6); }
.kh-how-films .ev-sample-note { margin-top: var(--kh-s-4); }
.kh-how-steps { list-style: none; margin: 0; padding: 0; }
.kh-how-step { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: var(--kh-s-6); align-items: center; padding-block: var(--kh-s-6); border-top: 1px solid var(--kh-line); }
.kh-how-copy { display: grid; gap: 12px; }
.kh-how-copy h3 { margin: 0; font-size: clamp(30px, 3vw, 42px); font-weight: 500; letter-spacing: -.04em; line-height: 1.08; }
.kh-how-copy .kh-flow3-mark { font-size: clamp(64px, 6.4vw, 104px); }
.kh-how-copy p { margin: 0; max-width: 42ch; }
.kh-how-lede { font-size: 19px; font-weight: 600; color: var(--kh-ink); letter-spacing: -.01em; }
.kh-how-screen { min-width: 0; }
.kh-product-stage--one { padding: var(--kh-s-4); }
.kh-how-screen .kh-caption { text-align: center; margin: 12px 0 0; }
@media (max-width: 860px) { .kh-how-step { grid-template-columns: 1fr; gap: var(--kh-s-4); } }

/* ---------------- the scenario and its steps (use-case pages) ---------------- */
.kh-scenario { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; align-items: center; padding-block: 28px 80px; }
.kh-scenario-moment { padding: 42px; background: #fff; border: 1px solid var(--kh-line); border-radius: var(--kh-r-card); }
.kh-scenario-moment h2 { margin-bottom: 24px; }
/* The setting, before the moment: who the people are, what the job is, what is going on, in
   plain words for a reader who has never seen the work (owner, 2026-09-17). */
.evidence-page .kh-setting { margin: 0 0 14px; padding: 14px 16px; border-left: 3px solid var(--kh-line-2); font-size: 15px; line-height: 1.6; }
.kh-setting b { font-weight: 700; color: var(--kh-ink); }
.kh-steps { list-style: none; padding: 0; margin: 30px 0 0; }
.kh-steps li { display: flex; gap: 20px; border-top: 1px solid var(--kh-line); padding-top: 19px; margin-top: 19px; }
.kh-steps li > span { flex-shrink: 0; min-width: 28px; padding-top: 4px; color: var(--kh-ember); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kh-steps h3 { font-size: 20px; margin: 0 0 7px; }
.kh-steps p { font-size: 15px; margin: 0; }
.ev-source-details { margin-top: 24px; font-size: 14px; }
.ev-source-details summary { padding-block: 10px; cursor: pointer; }

/* ---------------- the proof of value ---------------- */
/* The four-node line is the one diagram the section needs: hairline circles, the "met" node
   charcoal, the "after" node ember-outlined. */
.kh-pov-line { position: relative; list-style: none; margin: 36px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.kh-pov-line::before { content: ""; position: absolute; left: 6%; right: 6%; top: 26px; height: 2px; background: var(--kh-line-2); }
.kh-pov-line li { position: relative; display: grid; justify-items: center; text-align: center; gap: 8px; }
.kh-pov-node { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 1px solid var(--kh-line-2); color: var(--kh-ink); font-size: 18px; font-weight: 700; }
.kh-pov-node--met { background: #111827; border-color: #111827; color: #fff; }
.kh-pov-node--after { border: 2px solid var(--ember); color: var(--kh-ember); font-size: 22px; }
.kh-pov-line strong { font-size: 16px; letter-spacing: -.02em; }
.kh-pov-line small { display: block; max-width: 220px; font-size: 13.5px; line-height: 1.5; color: var(--kh-body); }
.kh-pov .ev-process { margin-top: 44px; }
.kh-kpis { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.kh-kpis li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.55; color: #1f2937; }
.kh-kpis li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--ember); }
.kh-control-note { margin: 14px 0 0; font-size: 15px; color: var(--kh-body); }
/* The split panel: a heading on the left, the substance on the right, one white surface with the
   hairline and a single ember rule. The proof of value on every use-case and industry page, the
   terms on /proof-of-value and the walkthrough's closing note all use it. */
.kh-control { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kh-s-7); align-items: start; padding: var(--kh-s-6); margin-block: var(--kh-s-5) 40px; border-radius: var(--kh-r-card); background: #fff; border: 1px solid var(--kh-line); box-shadow: inset 4px 0 0 var(--ember); }
.kh-control h2 { margin: 0; }
.kh-control > div:first-child .ev-kicker { margin-top: 0; }
.kh-control > div:last-child p { color: var(--kh-body); font-size: 16px; line-height: 1.6; }
.kh-control > div:last-child p:first-child { margin-top: 0; }
.kh-control > div:last-child .ev-link { margin-top: 6px; }

/* ---------------- the questions, the close, the trust band ---------------- */
.kh-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-block: var(--kh-s-6); border-top: 1px solid var(--kh-line); }
.kh-faq p:first-child { margin-top: 0; }
.ev-faq details { padding: 18px 0; border-top: 1px solid var(--kh-line); }
.ev-faq details:first-child { border-top: 0; padding-top: 0; }
.ev-faq summary { cursor: pointer; font-size: 17px; line-height: 1.5; font-weight: 650; padding: 5px 28px 5px 0; transition: color var(--kh-feedback) ease; }
.ev-faq summary:hover { color: var(--kh-ember); }
.ev-faq p { font-size: 15px; }
.ev-faq a { font-size: 14px; }
.ev-prose > p:first-child { margin-top: 0; }
.ev-prose--film { max-width: 760px; margin: 28px auto 0; }
.ev-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; }
.ev-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
/* The close is type and two buttons: no surface, no blocks, the one place the h2 goes a size up. */
.kh-close { position: relative; padding: var(--kh-s-8) 0; margin-block: var(--kh-s-5) 0; border-top: 1px solid var(--kh-line); text-align: center; }
.kh-close h2 { margin: 0; font-size: clamp(38px, 4.2vw, 62px); line-height: 1.06; }
.kh-close .ev-actions { justify-content: center; margin-top: var(--kh-s-5); }
/* The home page's last section: a full-bleed band in the site's warm ground (the same gradient
   the product stage sits on), ink type on it, and the black footer straight after. The charcoal
   band it replaced read as a second dark footer (owner, 2026-09-17). */
.kh-trust { background: radial-gradient(ellipse at 30% 25%, #fff5e9 0%, transparent 65%), linear-gradient(135deg, #f8cfb1, #e9965f 70%, #f9dbbf); color: var(--kh-ink); margin: var(--kh-s-5) 0 0; padding-block: 80px 72px; }
.kh-trust-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kh-s-7); align-items: start; }
.kh-trust h2 { color: var(--kh-ink); margin: 0; }
.kh-trust-inner > div:last-child p { color: #3b2a1f; font-size: 16.5px; line-height: 1.65; max-width: 52ch; }
.kh-trust-inner > div:last-child p:first-child { margin-top: 0; }
.kh-trust .ev-link { color: var(--kh-ink); text-decoration-color: rgba(17, 24, 39, 0.35); }
.kh-trust .ev-link:hover { color: #6b3215; }
.evidence-page main:has(> .kh-trust:last-child) + .footer { margin-top: 0; }

/* ---------------- the seat switch ---------------- */
/* A segmented control: white, the hairline, radius 8, the current segment charcoal with cream
   text. The same family as the product preview's tabs. Roving tabindex and arrow keys are in
   js/seat.js; without scripts the switch is hidden and every panel stacks (css/no-script.css). */
.kh-seat-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--kh-s-2) var(--kh-s-3); margin-bottom: var(--kh-s-4); }
.kh-seat { display: inline-flex; min-width: 0; max-width: 100%; background: #fff; border: 1px solid var(--kh-line-2); border-radius: var(--kh-r-control); overflow: hidden; }
.kh-seat button { min-height: 44px; padding: 10px 18px; border: 0; background: transparent; color: var(--kh-body); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background var(--kh-feedback) ease, color var(--kh-feedback) ease; }
.kh-seat button + button { border-left: 1px solid var(--kh-line-2); }
.kh-seat button:hover { color: var(--kh-ink); background: rgba(17, 24, 39, 0.04); }
.kh-seat button[aria-selected="true"] { background: #111827; color: #f8fafc; }
.kh-seat button[aria-selected="true"] + button { border-left-color: #111827; }
.kh-seat button:focus-visible { outline-offset: -4px; }
/* The native select beside it, dressed as the switch's neighbour. */
.kh-film-pick { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--kh-body); }
.kh-film-pick select { min-height: 46px; max-width: 100%; padding: 0 40px 0 16px; border: 1px solid var(--kh-line-2); border-radius: var(--kh-r-control); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%23111827' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 12px; color: var(--kh-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color var(--kh-feedback) ease; }
.kh-film-pick select:hover { border-color: #111827; }

/* ---------------- the seat panels (industry pages) ---------------- */
/* js/site.js stamps html[data-seat] from the hash before <main> is parsed, so a deep link to
   #manager paints that seat first. No attribute (no scripts) means every panel shows, stacked. */
html[data-seat] .kh-seat-panel { display: none; }
html[data-seat="executive"] .kh-seat-panel[data-seat-panel="executive"],
html[data-seat="manager"] .kh-seat-panel[data-seat-panel="manager"],
html[data-seat="employee"] .kh-seat-panel[data-seat-panel="employee"] { display: block; }
html:not([data-seat]) .kh-seat-panel + .kh-seat-panel { margin-top: var(--kh-s-7); padding-top: var(--kh-s-6); border-top: 1px solid var(--kh-line); }
.kh-seat-panel .kh-section-heading { margin-bottom: var(--kh-s-5); }
/* The other two seats, as poster cards that switch the seat on press: the current seat's card
   is the one not shown, keyed on the same attribute as the panels. */
html[data-seat="executive"] .kh-also [data-seat-go="executive"],
html[data-seat="manager"] .kh-also [data-seat-go="manager"],
html[data-seat="employee"] .kh-also [data-seat-go="employee"] { display: none; }
.kh-also { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kh-s-4); max-width: 960px; margin: var(--kh-s-6) auto 0; }
.kh-also .ev-kicker { margin-bottom: 8px; }
.kh-also h3 { font-size: 18px; }

/* ---------------- the industry grid ---------------- */
/* Fourteen lines of work as tiles, grouped under three ruled headings. Four columns, then two,
   then one. It replaces the row of fourteen underlined words everywhere that row stood. */
.kh-ind-grid { display: grid; gap: var(--kh-s-6); }
.kh-ind-group > h3 { margin: 0 0 var(--kh-s-4); padding-top: var(--kh-s-3); border-top: 1px solid var(--kh-line); font-size: 17px; font-weight: 600; }
.kh-ind-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kh-s-4); }
.kh-ind-tile { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; background: #fff; border: 1px solid var(--kh-line); border-radius: var(--kh-r-card); color: inherit; text-decoration: none; transition: transform 300ms var(--spring), box-shadow 300ms var(--spring), border-color var(--kh-feedback) ease; }
.kh-ind-tile:hover { transform: translateY(-4px); border-color: var(--kh-line-2); box-shadow: var(--kh-shadow-card); }
.kh-ind-tile:active { transform: none; }
.kh-ind-tile h3 { margin: 0; font-size: 18px; }
.kh-ind-tile p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--kh-body); }
.kh-ind-tile .kh-card-foot { padding-top: var(--kh-s-3); font-size: 13px; }
.kh-ind-tile:hover .kh-card-foot > span { transform: translate(2px, -2px); }
.kh-featured + .kh-ind-grid { margin-top: var(--kh-s-7); }

@media (max-width: 1000px) {
  .kh-trust-inner, .kh-control, .kh-faq, .ev-split { gap: 40px; }
  .kh-grid, .kh-pov-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-pov-line::before { display: none; }
  .kh-panel { padding: var(--kh-s-5); }
  .kh-panel .kh-grid { grid-template-columns: 1fr; }
  .kh-card--flat + .kh-card--flat { border-left: 0; border-top: 1px solid var(--kh-line); padding-left: 0; padding-top: var(--kh-s-4); }
  .kh-card--flat:not(:last-child) { padding-right: 0; padding-bottom: var(--kh-s-4); }
}
@media (max-width: 800px) {
  .kh-grid, .kh-grid--2, .kh-pov-line, .kh-trust-inner, .kh-control, .kh-faq, .kh-scenario, .kh-stories-list, .ev-split, .ev-three { grid-template-columns: 1fr; gap: 25px; }
  .kh-stories-list { gap: 0; }
  .kh-section-foot { flex-direction: column; align-items: flex-start; }
  .kh-section-hand { margin-left: 0; text-align: left; }
  .ev-process li { grid-row: auto; grid-template-rows: none; }
  .kh-flow3 { grid-template-columns: 1fr; gap: var(--kh-s-6); }
  .kh-flow3 li + li::before { content: "↓"; left: 50%; top: calc(-1 * var(--kh-s-6) / 2 - 11px); transform: translateX(-50%); }
  .kh-scenario { padding-bottom: 45px; }
  .kh-scenario-moment { padding: 30px; }
  .kh-card { padding: 24px; }
  .kh-trust { padding-block: 56px 48px; }
  .kh-control { padding: 30px; }
  .kh-panel { padding: var(--kh-s-4); }
  .kh-faq { padding-block: var(--kh-s-5); }
  .kh-close { padding: var(--kh-s-7) 0; }
  .ev-process { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .kh-control { padding: 26px; }
  .ev-process { grid-template-columns: 1fr; }
}

/* ---------------- the use-case hub's groups ---------------- */
/* Three ruled groups, each a row of cards under a one-line dek. */
.kh-groups { display: grid; gap: var(--kh-s-6); }
.kh-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--kh-s-1) var(--kh-s-4); margin: 0 0 var(--kh-s-4); padding-top: var(--kh-s-3); border-top: 1px solid var(--kh-line); }
.kh-group-head h3 { margin: 0; font-size: 20px; }
.kh-group-head p { margin: 0; font-size: 15px; color: var(--kh-body); }
.kh-pov-foot { margin-top: var(--kh-s-4); text-align: center; }
@media (max-width: 960px) {
  .kh-ind-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .kh-also { grid-template-columns: 1fr; }
  .kh-seat-row { justify-content: stretch; }
  .kh-seat { display: flex; width: 100%; }
  .kh-seat button { flex: 1; padding-inline: 10px; font-size: 13.5px; }
  .kh-film-pick { width: 100%; }
  .kh-film-pick select { flex: 1; }
}
@media (max-width: 600px) {
  .kh-ind-tiles { grid-template-columns: 1fr; }
}