.pg { position: absolute; left: 0; top: 0; }
.pg > * { position: absolute; left: 0; top: 0; }
.stage-inner .tx { white-space: nowrap; }
/* The hero keeps the header's container, so its left edge lines up with the
   header's and every other hero's (site panel, 1 Nov 2026: it ran 1400 px
   wide, from x=48 at 1440, with no recorded reason). */
.p-hero { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 88px); }
.p-hero-grid { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); grid-template-areas: "head stage"; gap: 0 clamp(28px, 3.5vw, 56px); align-items: center; }
.p-hero-head { grid-area: head; }
.p-hero-figure { grid-area: stage; margin: 0; align-self: center; }
.p-hero-title { font-size: var(--kf-fs-display); }
#doors .kf-lede a { color: var(--kf-sienna-text); text-underline-offset: 2px; }
/* The first screen (site rebuild, 24 and 25 Oct 2026): the red line and one
   grey line under the H1, then the buttons, all in the head, so the pill is on
   the first screen at every width; the decision loop beside it (PR C). */
.p-hero-red { font: 500 var(--kf-fs-h3)/1.3 var(--kf-serif); color: var(--kf-sienna-text); margin: 16px 0 0; max-width: 30em; text-wrap: balance; }
.p-hero-grey { margin: 10px 0 0; font: 400 var(--kf-fs-body)/1.45 var(--kf-sans); color: var(--kf-muted); max-width: 34em; text-wrap: pretty; }
.p-hero-head .btn-row { margin-top: 20px; }
/* The offer under the buttons, as Home's hero has it (site panel E1). */
.p-hero-offer { margin: 12px 0 0; font: 400 var(--kf-fs-small)/1.45 var(--kf-sans); color: var(--kf-muted); max-width: 34em; text-wrap: balance; }
@media (max-width: 900px) {
  .p-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage"; }
  .p-hero-figure { margin-top: 20px; }
}
.fm .st-name, .pp .st-name { translate: -50% 0; }
.fm .st-place, .sy .st-place, .se .st-place { translate: -50% 0; }
.fm .slab-label, .pp .slab-label, .rc .slab-label { font: 600 20px/1 var(--kf-sans); color: #fff1dc; letter-spacing: 0.02em; white-space: nowrap; translate: -50% 0; text-shadow: 0 1px 0 rgba(60, 28, 10, 0.45); }
.sees-fig { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(20px, 3vw, 40px); margin: 30px 0 0; align-items: center; }
@media (max-width: 900px) { .sees-fig { grid-template-columns: minmax(0, 1fr); } }
.sees-fig figcaption { margin: 0; }
.sees-more { margin-top: 22px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .facts { grid-template-columns: minmax(0, 1fr); } }
.fact { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 16px; }
.fact img { position: relative; justify-self: center; }
.fact p { position: relative; margin: 0; font-size: var(--kf-fs-small); line-height: 1.45; }
.fact b { font-weight: 600; }
.sees-stage { aspect-ratio: 700 / 470; }
@media (max-width: 640px) { .sees-stage { aspect-ratio: 600 / 620; } }
.se .row-label { font: 600 14px/1 var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); white-space: nowrap; }
.se .row-band { border-radius: 18px; background: rgba(251, 246, 236, 0.7); box-shadow: inset 0 0 0 1.5px rgba(60, 44, 24, 0.14), inset 0 -10px 18px rgba(120, 84, 44, 0.08); }
.se.is-narrow .row-label { font-size: 19px; }
.se.is-narrow .st-place, .se.is-narrow .st-chip { font-size: 20px; }
.beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.beats li { position: relative; padding: 12px 14px 12px 44px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 14px; font-size: var(--kf-fs-small); }
.beats li .lit { position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px var(--kf-sienna); background: rgba(251, 246, 236, 0.7); opacity: 0; pointer-events: none; }
.beats li span { position: relative; }
.beats li::before { content: attr(data-n); position: absolute; left: 14px; top: 12px; font: 600 var(--kf-fs-meta) var(--kf-sans); color: var(--kf-sienna-text); z-index: 1; }
.form-stage { aspect-ratio: 1000 / 620; margin-top: 30px; }
@media (max-width: 640px) { .form-stage { aspect-ratio: 600 / 900; } }
.fm .st-chip { font-size: 15px; }
.fm .rule { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px 12px; translate: -50% 0; }
.fm .rule-top { display: flex; align-items: center; gap: 10px; }
.fm .rule b { font: 600 17px/1.2 var(--kf-sans); }
.fm .marks { display: flex; gap: 6px; }
.fm .mk { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 14px/1 var(--kf-sans); color: #fff; background: #5f7d4b; }
/* A phone has no room for the checks panel beside the card, so each mark
   carries its check's name (film lineup PR, 31 Oct 2026, site fix 5). */
.fm .marks.is-labelled { flex-wrap: wrap; gap: 8px 14px; max-width: 500px; }
.fm .mkl { display: inline-flex; align-items: center; gap: 7px; font: 400 18px/1.2 var(--kf-sans); color: var(--kf-ink); white-space: nowrap; }
.fm .mkl .mk { width: 28px; height: 28px; font-size: 16px; }
.fm .checks { background: rgba(255, 251, 242, 0.97); border-radius: 16px; padding: 12px 14px; box-shadow: 0 10px 26px rgba(60, 40, 20, 0.14), 0 0 0 1px rgba(80, 52, 24, 0.07); }
.fm .checks p { margin: 0 0 8px; font: 600 12px/1 var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); }
.fm .ck { display: flex; align-items: center; gap: 8px; font: 400 15px/1.2 var(--kf-sans); color: var(--kf-ink); white-space: nowrap; margin-top: 6px; }
.fm .ck i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: #5f7d4b; color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 600 12px/1 var(--kf-sans); flex: none; }
.fm .lane-tag { background: rgba(255, 251, 242, 0.97); border-radius: 999px; padding: 7px 12px; box-shadow: 0 8px 20px rgba(60, 40, 20, 0.14); }
.fm.is-narrow .st-chip { font-size: 20px; padding: 8px 14px; }
.fm.is-narrow .st-name { font-size: 20px; }
.fm.is-narrow .st-place { font-size: 19px; }
.fm.is-narrow .rule b { font-size: 21px; }
.fm.is-narrow .mk { width: 30px; height: 30px; font-size: 17px; }
.fm.is-narrow .lane-tag { font-size: 16px; }
.fm.is-narrow .slab-label { font-size: 23px; }
.steps4 { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps4 { grid-template-columns: minmax(0, 1fr); } }
.steps4 li { position: relative; padding: 18px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); }
.steps4 .lit { position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px var(--kf-sienna), var(--kf-shadow-card); background: rgba(251, 246, 236, 0.6); opacity: 0; pointer-events: none; }
.steps4 h3 { position: relative; font: 600 var(--kf-fs-title)/1.2 var(--kf-sans); margin: 0 0 8px; }
.steps4 p { position: relative; margin: 0; font-size: var(--kf-fs-small); color: var(--kf-ink); }
.steps4 .n { position: relative; display: block; font: 600 var(--kf-fs-label) var(--kf-sans); letter-spacing: 0.06em; color: var(--kf-sienna-text); margin-bottom: 6px; }
/* Four lanes (PR C): one film or still per lane in a 2 by 2 grid, each
   cell headed by its lantern (plane.js lights it) and the lane name. */
.lane-films { list-style: none; margin: clamp(24px, 3.5vw, 36px) 0 0; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
@media (max-width: 760px) { .lane-films { grid-template-columns: minmax(0, 1fr); } }
.lane-cell { display: flex; flex-direction: column; gap: 10px; }
.lane-cell-head { display: flex; align-items: flex-end; gap: 12px; min-height: 60px; }
.lane-cell-head .lane { font-size: var(--kf-fs-small); }
.lane-cell .mini { position: relative; flex: none; width: 40px; height: 60px; }
.lane-cell[data-lane="never"] .mini { width: 96px; }
.lane-cell .mini > * { position: absolute; bottom: 0; }
.lane-cell .lantern-dim, .lane-cell .lantern-lit { left: 2px; }
.lane-cell .mini img { left: 42px; max-width: none; }
.lane-still { margin: 0; }
/* On a phone each lane is a row: the poster small beside its title and line. */
@media (max-width: 640px) {
  .lane-cell .engine-film:not(.lane-still) { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 12px; align-items: start; }
  .lane-cell .engine-film:not(.lane-still) .short-copy { margin-top: 0; }
  .lane-cell .film-box.is-short { border-radius: 12px; }
  .lane-cell .film-play span.pill { padding: 8px; }
  .lane-cell .film-play .pill-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Playing, the film takes the whole row, as a short does in public.css. */
  .lane-cell .engine-film:has(.film.is-playing) { grid-template-columns: minmax(0, 1fr); }
}
.engine-film .short-copy { margin-top: 10px; }
.engine-film .short-line { margin: 0; font-size: var(--kf-fs-small); }
.engine-film .film-meta { margin: 4px 0 0; }
/* Asks higher up has no film: its clay still stands in the same solid frame
   as the three posters (site panel E4, 1 Nov 2026; a dashed card read as an
   empty slot), on the lane's own colour and with no Play. */
.still-card { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 6%; aspect-ratio: 16 / 9; padding: 0 8% 6%; box-sizing: border-box; border-radius: 18px; box-shadow: 0 18px 40px rgba(60, 40, 20, 0.16), 0 0 0 1px var(--kf-line); background: radial-gradient(90% 70% at 50% 100%, rgba(122, 104, 160, 0.2), rgba(122, 104, 160, 0) 70%), radial-gradient(130% 120% at 30% 0%, #fbf6ea 0%, #f1e7d4 55%, #e6d8bf 100%); }
.still-card img { display: block; width: auto; max-width: none; }
.still-card img:first-child { height: 80%; }
.still-card img:last-child { height: 34%; }
@media (max-width: 640px) { .still-card { aspect-ratio: 2.4 / 1; border-radius: 14px; } .still-card img:last-child { min-height: 52px; } }
.lanes-order { margin: 12px 0 0; font-size: var(--kf-fs-small); color: var(--kf-muted); }
.people-fig { margin: clamp(24px, 3.5vw, 36px) 0 0; }
.people-fig figcaption { margin: 10px 0 0; font-size: var(--kf-fs-body); max-width: 900px; }
.people-stage { aspect-ratio: 1000 / 440; }
@media (max-width: 640px) { .people-stage { aspect-ratio: 600 / 660; } }
.pp .st-chip { font-size: 15px; }
.pp .refused { display: flex; align-items: center; gap: 8px; }
.pp .refused i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--kf-pencil); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 600 12px/1 var(--kf-sans); }
.pp .tag b { font-weight: 600; }
.pp .tag small { font-weight: 400; color: var(--kf-muted); }
.pp.is-narrow .st-name { font-size: 19px; line-height: 1.15; text-align: center; white-space: nowrap; padding: 4px 10px; }
.pp.is-narrow .st-name small { display: block; font-size: 16px; }
.pp.is-narrow .st-chip { font-size: 19px; }
.pp.is-narrow .slab-label { font-size: 22px; }
/* Rules in plain words (PR C): Dan's words and Agent K's first question.
   No film beside them since the film lineup PR (31 Oct 2026). */
.rules-grid { margin-top: 30px; max-width: 760px; }
.talk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.convo, .qstack { display: grid; gap: 14px; }
.say { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: end; }
.say .words { background: var(--kf-panel-solid); border-radius: 18px 18px 18px 6px; padding: 14px 16px; box-shadow: var(--kf-shadow-card); font: 400 var(--kf-fs-body)/1.45 var(--kf-sans); }
.say.agent .words { font: 600 var(--kf-fs-body)/1.4 var(--kf-sans); box-shadow: inset 0 0 0 1.5px rgba(53, 96, 125, 0.4), var(--kf-shadow-card); }
.say .who { display: block; font: 600 var(--kf-fs-label) var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-muted); margin-bottom: 6px; }
.talk-note { margin: 0; font-size: var(--kf-fs-small); color: var(--kf-muted); max-width: 520px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.choice { position: relative; display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border-radius: 19px; line-height: 1.3; font: 600 var(--kf-fs-small) var(--kf-sans); background: #fffaf0; box-shadow: inset 0 0 0 1.5px rgba(60, 44, 24, 0.22); }
.choice.is-cannot { background: transparent; color: var(--kf-muted); box-shadow: none; outline: 1.5px dashed var(--kf-pencil); outline-offset: -1.5px; font-weight: 400; }
.choice .sel { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2.5px var(--kf-steel); background: rgba(53, 96, 125, 0.08); opacity: 0; }
.rules-line { margin: 22px 0 0; font-size: var(--kf-fs-body); max-width: 900px; }
.views3 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; align-items: stretch; }
@media (max-width: 1000px) { .views3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .views3 .view:first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .views3 { grid-template-columns: minmax(0, 1fr); } }
.view { background: var(--kf-panel-solid); border-radius: 18px; padding: 16px 18px; box-shadow: var(--kf-shadow-card); }
.view-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.view-label { margin: 0 0 10px; line-height: 1.2; color: var(--kf-sienna-text); }
.view-head .view-label { margin: 0; }
.sentence { font: 400 var(--kf-fs-body)/1.95 var(--kf-sans); margin: 0; }
.sentence .c { display: inline; padding: 3px 7px; border-radius: 8px; background: #fffaf0; box-shadow: inset 0 0 0 1.5px rgba(60, 44, 24, 0.2); font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mini-lanes { display: grid; gap: 8px; margin-top: 12px; }
.ml { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(251, 246, 236, 0.8); box-shadow: inset 0 0 0 1px var(--kf-line); }
.ml b { font: 600 var(--kf-fs-title) var(--kf-sans); font-variant-numeric: tabular-nums; }
.changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.changes li { padding: 8px 10px; border-radius: 12px; background: rgba(251, 246, 236, 0.8); box-shadow: inset 0 0 0 1px var(--kf-line); font-size: var(--kf-fs-small); }
.confirm-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 18px; }
@media (max-width: 640px) { .confirm-row { grid-template-columns: minmax(0, 1fr); } }
/* "Confirm a draft" and the question chips are spans that picture the product, so they do not look tappable. */
.confirm-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; font: 600 var(--kf-fs-small) var(--kf-sans); justify-self: start; }
.confirm-btn, .qchip { background: transparent; color: var(--kf-ink); box-shadow: none; border: 1.5px dashed var(--kf-line); cursor: default; }
.confirm-btn .press { position: absolute; inset: -4px; border-radius: inherit; box-shadow: 0 0 0 3px rgba(184, 85, 46, 0.55); opacity: 0; }
.path { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 8px; border-radius: 999px; background: var(--kf-panel); border: 1px solid var(--kf-line); }
@media (max-width: 640px) { .path { grid-template-columns: minmax(0, 1fr); border-radius: 20px; } }
.stop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; border-radius: 999px; font: 600 var(--kf-fs-small) var(--kf-sans); text-align: center; z-index: 1; }
.stop-lit { position: absolute; inset: 0; border-radius: inherit; background: #fffaf0; box-shadow: inset 0 0 0 2px var(--kf-steel), 0 6px 14px rgba(53, 96, 125, 0.16); opacity: 0; z-index: -1; }
.token { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, #fff4dc, #d27a4a 60%, rgba(210, 122, 74, 0) 100%); opacity: 0; z-index: 2; pointer-events: none; }
.readback { margin-top: 28px; max-width: 760px; }
.rb-code { background: #2a2119; color: #f3e6d1; border-radius: 18px; padding: 16px 18px; box-shadow: var(--kf-shadow-card); overflow: hidden; }
.rb-code .view-label { color: #f0b98f; }
.rb-code pre, .rb-code code { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 var(--kf-fs-meta)/1.6 var(--kf-mono); }
.rules-lines { display: grid; gap: 12px; margin-top: 22px; max-width: 900px; }
.rules-lines p { margin: 0; font-size: var(--kf-fs-body); }
.ask-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.qchip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font: 600 var(--kf-fs-small) var(--kf-sans); }
/* The rest of the walkthrough, behind "Three more questions, the rule three ways, and the draft": the
   three questions stand still, with the usual answer marked. */
.qstack.is-static { margin-top: 4px; }
.qstack.is-static .choice.is-pick .sel { opacity: 1; }
.receipts-grid { align-items: center; }
.rc-stage { aspect-ratio: 700 / 470; }
@media (max-width: 640px) { .rc-stage { aspect-ratio: 440 / 660; } }
.receipt-card { width: 400px; background: #fffaf0; border-radius: 16px; padding: 16px 18px 12px; box-shadow: 0 16px 34px rgba(60, 40, 20, 0.16), 0 0 0 1px rgba(80, 52, 24, 0.08);
  background-image: repeating-linear-gradient(180deg, rgba(60, 44, 24, 0.04) 0 1px, transparent 1px 28px); }
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1.5px dashed rgba(60, 44, 24, 0.25); }
.rc-title { font: 600 20px/1 var(--kf-sans); }
.receipt-card dl { margin: 0; }
.rc-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(60, 44, 24, 0.1); transform-origin: 50% 0; }
.rc-row:last-child { border-bottom: 0; }
.rc-row dt { font: 600 12px/1.5 var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); }
.rc-row dd { margin: 0; font: 400 15px/1.45 var(--kf-sans); white-space: normal; }
.rc.is-narrow .receipt-card { width: 400px; }
.rc .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kf-pencil); }
.area-groups { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .area-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .area-groups { grid-template-columns: minmax(0, 1fr); } }
.area-group-card { padding: 16px 18px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); }
.ag-name { font: 600 var(--kf-fs-title)/1.25 var(--kf-sans); margin: 0 0 10px; }
.ag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ag-list li { display: flex; align-items: center; gap: 12px; font-size: var(--kf-fs-small); line-height: 1.35; }
.ag-list img { flex: none; }
.areas-more { margin-top: 22px; }
.areas-more .ag-name { margin: 18px 0 10px; }
.areas { list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .areas { grid-template-columns: minmax(0, 1fr); } }
.area { position: relative; padding: 14px 16px 16px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 16px; }
.area h4 { font: 600 var(--kf-fs-body)/1.25 var(--kf-sans); margin: 0; }
.area p { margin: 10px 0 6px; font-size: var(--kf-fs-small); line-height: 1.45; }
.sys-fig { margin: 30px 0 0; max-width: 900px; }
.sys-more { margin-top: 22px; }
.sys-stage { aspect-ratio: 760 / 470; }
@media (max-width: 640px) { .sys-stage { aspect-ratio: 600 / 820; } }
.sys-lines { display: grid; gap: 14px; }
.sys-lines p { margin: 0; font-size: var(--kf-fs-body); }
.sy .num { font: 600 32px/1 var(--kf-sans); font-variant-numeric: tabular-nums; color: var(--kf-ink); translate: -50% 0; background: rgba(255, 251, 242, 0.97); border-radius: 14px; padding: 6px 12px; box-shadow: 0 6px 16px rgba(60, 40, 20, 0.14); min-width: 58px; text-align: center; }
.sy .st-chip.is-flag { box-shadow: inset 0 0 0 2px var(--kf-terracotta), 0 8px 20px rgba(60, 40, 20, 0.14); }
.sy .st-chip.is-staged { outline: 2px dashed var(--kf-pencil); outline-offset: -2px; }
.sy.is-narrow .num { font-size: 40px; }
.sy.is-narrow .st-place, .sy.is-narrow .st-chip { font-size: 20px; }
/* What an agent can never do: the list alone since the film lineup PR (31 Oct 2026). */
.safety-grid { margin-top: 30px; }
.nevers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { .nevers { grid-template-columns: minmax(0, 1fr); } }
.nevers li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 14px 8px 8px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 14px; font-size: var(--kf-fs-small); line-height: 1.4; }
.nevers li img { justify-self: center; }
.safety-more { margin-top: 22px; }
#invite .kf-h2 { text-wrap: balance; }

/* One command, four doors (#doors, PR C) and where models are used (#models).
   The diagram is HTML text in an ordered list with released clay: four doors
   side by side on a laptop, two by two on a tablet and stacked on a phone, each
   with its own permission check, then the same command, then one receipt row
   for each attempt. Hosted access for outside agents sits in the disclosure,
   dashed, because it is not on the command path. plane.js lights the doors in
   turn; with reduced motion every part shows. #doors-fig keeps its height
   reserved so the studio's animated version can drop in without a shift. */
.doors-fig { margin-top: 30px; min-height: 560px; }
@media (max-width: 1060px) { .doors-fig { min-height: 760px; } }
@media (max-width: 720px) { .doors-fig { min-height: 1240px; } }
.door-clay { display: block; max-width: none; }
.receipt-row .receipt-clay { float: left; margin: 0 16px 0 0; max-width: none; }
.doors-docs { margin: 18px 0 0; text-align: center; }
.doors-more { margin-top: 18px; }
.doors-flow { list-style: none; margin: 0; padding: 0; }
.df-step { position: relative; }
.df-label { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 10px; text-align: center; font: 600 var(--kf-fs-label)/1.3 var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); }
.df-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--kf-sienna); color: #fff8ee; font: 600 var(--kf-fs-label)/1 var(--kf-sans); letter-spacing: 0; }
.doors4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1060px) { .doors4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.door { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); }
.door > :not(.lit) { position: relative; }
.door h3 { margin: 0; font: 600 var(--kf-fs-title)/1.2 var(--kf-sans); }
.door p { margin: 0; font-size: var(--kf-fs-small); }
.door .door-check { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 12px; border-radius: 999px; background: var(--kf-panel-solid); box-shadow: inset 0 0 0 1.5px rgba(53, 96, 125, 0.35); font: 600 var(--kf-fs-small)/1.3 var(--kf-sans); }
.door .door-check::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--kf-steel); }
.door .lit, .cmd-card .lit, .receipt-row .lit { position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px var(--kf-sienna), var(--kf-shadow-card); background: rgba(251, 246, 236, 0.6); opacity: 0; pointer-events: none; }
.df-join { position: relative; display: block; height: 40px; }
.df-join::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 6px; margin-left: -1px; border-left: 2px solid rgba(107, 90, 69, 0.45); }
.df-tip { position: absolute; left: 50%; bottom: 4px; width: 10px; height: 10px; margin-left: -5px; border-right: 2px solid rgba(107, 90, 69, 0.6); border-bottom: 2px solid rgba(107, 90, 69, 0.6); transform: rotate(45deg); }
.df-join.is-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; height: 52px; }
.df-join.is-four::before { top: 50%; }
.df-join.is-four::after { content: ""; position: absolute; top: 50%; left: calc((100% - 42px) / 8); right: calc((100% - 42px) / 8); margin-top: -1px; border-top: 2px solid rgba(107, 90, 69, 0.45); }
.df-join.is-four i { position: relative; }
.df-join.is-four i::before { content: ""; position: absolute; left: 50%; top: 0; height: 50%; margin-left: -1px; border-left: 2px solid rgba(107, 90, 69, 0.45); }
/* Two by two (721 to 1060 px): a drop under every door. The top row's drop
   crosses the row gap. The bottom row's drop meets the bar, then one stem. */
@media (max-width: 1060px) and (min-width: 721px) {
  .doors4 { row-gap: 36px; }
  .door::after { content: ""; position: absolute; z-index: 2; left: 50%; top: 100%; width: 0; margin-left: -1px; border-left: 2px solid rgba(107, 90, 69, 0.45); pointer-events: none; }
  .door:nth-child(-n+2)::after { height: 36px; }
  .door:nth-child(n+3)::after { height: 22px; }
  .df-join.is-four { display: block; height: 36px; }
  .df-join.is-four i { display: none; }
  .df-join.is-four::before { top: 22px; }
  .df-join.is-four::after { top: 22px; left: calc((100% - 14px) / 4); right: calc((100% - 14px) / 4); }
}
@media (max-width: 720px) {
  .df-join.is-four { display: block; height: 40px; }
  .df-join.is-four i, .df-join.is-four::after { display: none; }
  .df-join.is-four::before { top: 0; }
}
.cmd-card { position: relative; max-width: 560px; margin: 0 auto; padding: 18px 20px; text-align: center; background: var(--kf-panel-solid); border-radius: 18px; box-shadow: var(--kf-shadow-card), inset 0 0 0 1.5px rgba(184, 85, 46, 0.35); }
.cmd-card > :not(.lit) { position: relative; }
.cmd-card p { margin: 6px 0 0; font-size: var(--kf-fs-small); }
.cmd-card .cmd-name { margin: 0; font: 500 var(--kf-fs-h3)/1.2 var(--kf-serif); }
.cmd-lanes { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.receipt-row { position: relative; max-width: 900px; margin: 0 auto; padding: 14px 18px; background: #fffaf0; border-radius: 16px; box-shadow: 0 12px 26px rgba(60, 40, 20, 0.12), 0 0 0 1px rgba(80, 52, 24, 0.08); }
.receipt-row > :not(.lit) { position: relative; }
.receipt-row dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; }
.receipt-row dl > div { padding-left: 14px; border-left: 1.5px dashed rgba(60, 44, 24, 0.25); }
.receipt-row dl > div:first-child { padding-left: 0; border-left: 0; }
.receipt-row dt { font: 600 var(--kf-fs-label)/1.4 var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); }
.receipt-row dd { margin: 4px 0 0; font-size: var(--kf-fs-small); line-height: 1.4; }
.doors-access { max-width: 900px; margin: 14px 0 0; padding: 14px 18px; border-radius: 16px; background: rgba(251, 246, 236, 0.6); outline: 2px dashed rgba(107, 90, 69, 0.45); outline-offset: -2px; }
.doors-access .df-label { justify-content: flex-start; text-align: left; margin-bottom: 6px; color: var(--kf-muted); }
.doors-access p:last-child { margin: 0; font-size: var(--kf-fs-small); }
.trace { margin-top: 22px; max-width: 900px; }
.trace-title { margin: 0; font: 500 var(--kf-fs-h3)/1.2 var(--kf-serif); }
@media (max-width: 900px) {
  .receipt-row dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receipt-row dl > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 720px) {
  .doors4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .receipt-row dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .receipt-row dl > div, .receipt-row dl > div:nth-child(3) { padding: 10px 0 0; border-left: 0; border-top: 1px solid rgba(60, 44, 24, 0.1); }
  .receipt-row dl > div:first-child { padding-top: 0; border-top: 0; }
}
.models3 { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .models3 { grid-template-columns: minmax(0, 1fr); } }
.model-card { padding: 18px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); }
.model-card p { margin: 0; font-size: var(--kf-fs-body); }
.model-card .model-tier { margin: 0 0 8px; font: 600 var(--kf-fs-label)/1.3 var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); }
/* Test it, govern it, prove it: one caption row under the three cards. */
.practice3 { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .practice3 { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.practice3 li { padding: 10px 2px 0; border-top: 1.5px dashed var(--kf-line); font-size: var(--kf-fs-small); }
.models-more { margin-top: 22px; }
.models-own { margin: 22px 0 0; font: 500 var(--kf-fs-h3)/1.35 var(--kf-serif); }
.models-more .models-own:first-child { margin-top: 0; }
.models-own-body { margin: 6px 0 0; max-width: 720px; }

/* Your business changes. Your promises keep up. (13 Oct 2026; PR C: the
   three steps, the rest in one disclosure; Nine yeses plays on the asks lane
   since the film lineup PR) */
.keep-grid { margin-top: 30px; }
.keep-grid .keep3 { margin: 0; }
.keep-more { margin-top: 22px; }
#keep-up .keep-detail { margin: 0 0 12px; max-width: 760px; font-size: var(--kf-fs-body); }
#keep-up .keep-h { margin: 18px 0 6px; font: 600 var(--kf-fs-title)/1.3 var(--kf-sans); }
.keep-close { max-width: 820px; }
.area .area-more { margin: 8px 0 0; }
.area-more a { font-weight: 600; color: var(--kf-sienna-text); text-underline-offset: 2px; }
/* Only a rule may promise (in the models disclosure since PR C). */
.rule-blocks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .rule-blocks { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.rule-block { padding: 18px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); }
.rule-block h4 { font: 600 var(--kf-fs-title)/1.25 var(--kf-sans); margin: 0 0 6px; }
.rule-block p { margin: 0; font-size: var(--kf-fs-body); }
/* At 760 px and below the three blocks are plain rows, without card padding. */
@media (max-width: 760px) {
  .rule-blocks { margin-top: 16px; gap: 12px; }
  .rule-block { padding: 0; background: none; border: 0; border-radius: 0; }
  .rule-block h4 { margin-bottom: 2px; }
}

/* Placed from Home in the site rebuild of 25 Oct 2026 (PR B) and rebuilt in
   PR C: the loop in the hero, the decision scene with its four steps as the
   caption, the lanes table and Dan's desk in Four lanes, Bring your own AI in
   Rules in plain words, and the five-change ledger in Receipts. Each stage
   reserves its height here before plane.js builds it. */
.form-fig { margin: 30px 0 0; max-width: 1040px; }
.form-fig .form-stage { margin-top: 0; }
.form-fig figcaption { margin: 0; }
.how-more { margin-top: 22px; }
.how-detail { margin: 0 0 12px; display: grid; gap: 10px; max-width: 900px; }
.how-detail dt { font: 600 var(--kf-fs-title)/1.3 var(--kf-sans); }
.how-detail dd { margin: 2px 0 0; font-size: var(--kf-fs-body); }
.loop-stage { aspect-ratio: 1000 / 400; }
@media (max-width: 640px) { .loop-stage { aspect-ratio: 600 / 1280; } }
/* The station labels sit on cream chips: dark ink on cream, well over 4.5:1
   (site audit V1, 31 Oct 2026; the light labels on the tan slab measured 2.6:1). */
.lp .st-station { font: 600 17px/1.1 var(--kf-sans); color: var(--kf-ink); background: #fbf6ec; padding: 5px 12px; border-radius: 999px; box-shadow: 0 1px 0 rgba(60, 40, 20, 0.18), 0 0 0 1px rgba(60, 40, 20, 0.12); white-space: nowrap; translate: -50% 0; }
.lp.is-narrow .st-station { font-size: 26px; padding: 7px 16px; }
.behaves { margin-top: clamp(24px, 3.5vw, 36px); max-width: 1080px; }
.lane-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); overflow: hidden; }
.lane-table th, .lane-table td { text-align: left; vertical-align: top; padding: 12px 16px; font-size: var(--kf-fs-small); line-height: 1.4; border-top: 1px solid var(--kf-line); }
.lane-table thead th { border-top: 0; font: 600 var(--kf-fs-label)/1.3 var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-muted); }
.lane-table tbody th { width: 11.5em; font-weight: 400; }
.lane-table tbody th .lane { white-space: nowrap; }
.lane-table td:nth-child(2) { width: 16em; font-weight: 600; }
@media (max-width: 760px) {
  .lane-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lane-table, .lane-table tbody, .lane-table tr, .lane-table th, .lane-table td { display: block; width: auto; }
  .lane-table tr { padding: 12px 14px; border-top: 1px solid var(--kf-line); }
  .lane-table tbody tr:first-child { border-top: 0; }
  .lane-table th, .lane-table td { padding: 0; border-top: 0; }
  .lane-table td, .lane-table td:nth-child(2) { width: auto; margin-top: 6px; }
}
.desk { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; padding: 22px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 22px; }
@media (max-width: 860px) { .desk { grid-template-columns: minmax(0, 1fr); padding: 16px; } }
.desk-card { background: var(--kf-panel-solid); border-radius: 18px; padding: 18px 20px; box-shadow: var(--kf-shadow-card); }
.desk-card .who.desk-title { font: 500 var(--kf-fs-h3)/1.2 var(--kf-serif); color: var(--lane-asks-ink); margin: 0 0 10px; }
.desk-card .what { font: 600 var(--kf-fs-title)/1.3 var(--kf-sans); margin: 0 0 12px; }
.desk-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-size: var(--kf-fs-small); }
.desk-row img { flex: none; }
.desk-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.desk-btns button { font: 600 var(--kf-fs-small) var(--kf-sans); min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--kf-line); background: var(--kf-panel-solid); color: var(--kf-ink); cursor: pointer; }
.desk-btns button[aria-pressed="true"] { background: var(--kf-charcoal); color: #f6f1e6; border-color: var(--kf-charcoal); }
.desk-out { display: grid; margin-top: 14px; min-height: 3em; }
.desk-out p { grid-area: 1 / 1; margin: 0; font-size: var(--kf-fs-small); opacity: 0; }
.desk-out p:not(.is-on) { visibility: hidden; }
.desk-out p.is-on { opacity: 1; }
.desk-fig { position: relative; min-height: 250px; border-radius: 16px; background: radial-gradient(130% 120% at 30% 0%, #fbf6ea 0%, #f1e7d4 55%, #e6d8bf 100%); overflow: hidden; }
.desk-fig > * { position: absolute; max-width: none; }
.desk-fig .dfig { left: 18%; bottom: 18px; }
.desk-fig .afig { left: 58%; bottom: 52px; }
.desk-fig .rfig { left: 78%; bottom: 20px; }
.desk-fig img.swap { opacity: 0; }
.desk-fig img.swap.is-on { opacity: 1; }
.desk { margin-top: clamp(24px, 3.5vw, 36px); }
.lanes-more { margin-top: 22px; }
.lane-owners { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; max-width: 900px; }
.lane-owners li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lane-owners p { margin: 0; flex: 1 1 20em; font-size: var(--kf-fs-body); }
#lanes .cast { margin-top: 0; }
.byo-more .byo { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: stretch; padding: 22px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 22px; max-width: 1080px; }
.byo .sub-h { font: 500 var(--kf-fs-h3)/1.2 var(--kf-serif); margin: 0; }
.byo-copy > p { margin: 10px 0 0; font-size: var(--kf-fs-body); max-width: 760px; }
.byo-copy > p.byo-lede { margin-top: 6px; font: 600 var(--kf-fs-title)/1.35 var(--kf-sans); color: var(--kf-ink); }
.byo-how { margin: 18px 0 8px; font: 600 var(--kf-fs-title)/1.3 var(--kf-sans); }
.byo-chip { margin: 0 0 10px; }
.byo-steps { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; font-size: var(--kf-fs-body); }
.byo-fig { display: flex; align-items: center; justify-content: center; border-radius: 16px; background: radial-gradient(130% 120% at 30% 0%, #fbf6ea 0%, #f1e7d4 55%, #e6d8bf 100%); padding: 20px 16px; }
.byo-row { display: flex; align-items: center; justify-content: center; gap: 18px; }
.byo-row img { display: block; max-width: none; }
@media (max-width: 900px) { .byo-more .byo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .byo-more .byo { padding: 16px; } .byo-fig { display: none; } }
.ledger { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: "stage side"; gap: 20px; margin-top: clamp(24px, 3.5vw, 36px); align-items: start; }
.ledger-stage { grid-area: stage; }
.ledger-side { grid-area: side; }
@media (max-width: 900px) { .ledger { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "side"; } }
.receipts-more { margin-top: 22px; }
.rc-fig { margin: 0; }
.rc-cap { margin: 10px 0 0; font-size: var(--kf-fs-small); color: var(--kf-ink); }
.ledger-stage { aspect-ratio: 1000 / 560; }
@media (max-width: 640px) { .ledger-stage { aspect-ratio: 600 / 780; } }
.ledger-product { font: 600 var(--kf-fs-small) var(--kf-sans); margin: 0 0 10px; }
.lg .num { font: 600 34px/1 var(--kf-sans); font-variant-numeric: tabular-nums; color: var(--kf-ink); translate: -50% 0; background: rgba(255, 251, 242, 0.97); border-radius: 14px; padding: 6px 12px; box-shadow: 0 6px 16px rgba(60, 40, 20, 0.14); min-width: 58px; text-align: center; }
.lg .num.is-new { color: var(--kf-green); }
.lg .st-place { translate: -50% 0; font-size: 17px; }
.lg .row-label { font: 600 13px/1 var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); white-space: nowrap; }
.lg .tray { border-radius: 18px; background: rgba(251, 246, 236, 0.85); box-shadow: inset 0 0 0 1.5px rgba(60, 44, 24, 0.18), inset 0 -10px 18px rgba(120, 84, 44, 0.1); }
.lg.is-narrow .num { font-size: 40px; }
.lg.is-narrow .st-place { font-size: 22px; }
.lg.is-narrow .row-label { font-size: 18px; }