/* ============================================================================
   KALDUNE new-landing · enhancement layer (2026-07-26)
   COPY, DON'T CREATE: every value here is lifted from the template itself —
   its own custom props (--background, --foreground, --muted-foreground,
   --color-accent #e8c98e, --font-display Instrument Serif, --font-body Inter),
   its own registers (10px uppercase tracking .28em eyebrows, serif titles at
   1.75rem/-0.01em, the 3/4 floating plate with the 28/60 drop shadow, the
   black/85 overlay with the white/10 hairline chrome). Nothing invented.
   Scope: the #work briefs grid · the case viewer · the enterprise footer ·
   the early-access panel. Everything namespaced kl-.
   ========================================================================== */

/* ------------------------------------------------------------ briefs grid
   ROW-OWNED PLATES (07-26): the grid is a stack of rows; each row is its
   own grid whose column count (--kl-cols) and plate ratio (--kl-plate) are
   the row's own — likes sit with likes, and every card in a row stands the
   same height. Shelf rows hold the three-column rhythm; the floor's three
   composed rows seat 3 / 4 / 2. */
.kl-grid { display: block; }
.kl-row {
  display: grid;
  grid-template-columns: repeat(var(--kl-cols, 3), minmax(0, 1fr));
  gap: 56px 40px;
}
.kl-row + .kl-row { margin-top: 56px; }
@media (max-width: 1023px) {
  .kl-row { grid-template-columns: repeat(var(--kl-cols-md, 2), minmax(0, 1fr)); gap: 48px 32px; }
  .kl-row + .kl-row { margin-top: 48px; }
}
@media (max-width: 639px) {
  /* minmax(0,1fr), never bare 1fr: an image-bearing track must be allowed
     to shrink below its content's intrinsic width (hallmark gate 61) */
  .kl-row { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .kl-row + .kl-row { margin-top: 48px; }
}

/* the page never scrolls sideways — clip, not hidden, so no scroll
   container is created and in-page anchors keep their behavior
   (hallmark gates 36 + 62) */
html, body { overflow-x: clip; }

/* the muted-gold whisper register (RUNS chips, viewer eyebrows, rail
   category labels) measured 2.98:1 at 10px against the dark paper — under
   the 4.5:1 floor (final gauntlet, 07-27). Same gold, alpha lifted just
   past the line; every use already reads this token first. */
:root { --color-accent-mute: #e8c98eaa; }

.kl-card { display: flex; flex-direction: column; text-align: left; }
.kl-card__door { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.kl-card__door:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 2px; }
/* the plate: the ROW owns the ratio (--kl-plate — portrait rows 3:4,
   square 1:1, phone 390:844, landscape rows 3:2 or 16:10 by the row's own
   covers). FIT LAW (07-26): a book or document CONTAINS — the whole titled
   cover, never cropped, on the quiet ground (the template's own
   white/[0.03] register under a white/6 hairline) so the mat reads
   intentional; an app or film COVERS — full bleed, edge to edge, minor
   crop fine — so no screen ever sits as a letterboxed postage stamp. */
.kl-card__plate {
  position: relative; aspect-ratio: var(--kl-plate, 3 / 4);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 10px;
}
.kl-card--cover .kl-card__plate {
  padding: 0; overflow: hidden; background: #0b0b0c;
}
.kl-card--cover .kl-card__plate img,
.kl-card--cover .kl-card__plate video {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; box-shadow: none;
}
/* a face announces its nature: video/audio cases wear the replica bench's
   own quiet play glyph (.kl-rr-play anatomy — thin ring, small triangle,
   dark glass) centered on the cover, at card scale */
.kl-card__play {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; pointer-events: none;
}
.kl-card__play i {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(8, 10, 14, 0.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: transform 300ms;
}
.kl-card__play svg { width: 15px; height: 15px; margin-left: 2px; color: rgba(255, 255, 255, 0.9); }
.kl-card:hover .kl-card__play i { transform: scale(1.06); }
.kl-card__plate img,
.kl-card__plate video {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  box-shadow: 0 28px 60px -12px rgba(0, 0, 0, 0.7);
  transition: transform 1200ms cubic-bezier(0, 0, 0.2, 1);
}
/* a moving face (the film itself, or a recorded loop of the app being
   used) fills what the plate allows and keeps its own true ratio */
.kl-card__plate video { background: #0b0b0c; }
.kl-card:hover .kl-card__plate img,
.kl-card:hover .kl-card__plate video { transform: scale(1.02); }
.kl-card__cat {
  margin: 24px 0 0; font-family: var(--font-body);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.28em;
  color: hsl(var(--muted-foreground));
}
.kl-card__title {
  margin: 8px 0 0; font-family: var(--font-display); font-weight: 400;
  font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.01em;
  color: hsl(var(--foreground)); transition: color 300ms;
}
.kl-card:hover .kl-card__title { color: var(--color-accent); }
.kl-card__teaser {
  margin: 10px 0 0; font-family: var(--font-display); font-style: italic;
  font-size: 0.95rem; line-height: 1.35; color: hsl(var(--foreground) / 0.85);
}
.kl-card__open {
  margin: 14px 0 0; align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.22em;
  color: hsl(var(--muted-foreground)); transition: color 300ms;
}
.kl-card:hover .kl-card__open, .kl-card__open:hover { color: hsl(var(--foreground)); }
/* TOUCH TARGET (final gauntlet, 07-27): the "Read the brief" line draws at
   18px — on touch surfaces an invisible hit-area extension carries it to
   the 44px non-negotiable. Pseudo-content on the button receives the tap;
   nothing visible changes, and the 48px+ row gaps absorb the reach so no
   neighboring card is shadowed. Desktop (fine pointer, wide) is untouched. */
@media (pointer: coarse), (max-width: 820px) {
  .kl-card__open { position: relative; }
  .kl-card__open::after {
    content: ""; position: absolute; left: -8px; right: -8px;
    top: 50%; transform: translateY(-50%); height: 44px;
  }
}
.kl-card__runs {
  margin: 12px 0 0; font-family: var(--font-body);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.28em;
  color: var(--color-accent-mute, #e8c98e6b);
}
.kl-card__runs .kl-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-accent); margin-right: 8px; vertical-align: 1px;
}

/* ------------------------------------------------------------- the viewer
   The studio's own viewer anatomy: full-screen dark overlay, one slim chrome
   bar (title · ALL WORK — PIECE k OF N · ×), ONE white-matted frame filling
   most of the viewport with the ENTIRE deliverable scrolling inside it, and
   a narrow subtle rail: the prompt as typed, and what the studio did. */
.kl-viewer {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: rgba(9, 11, 14, 0.96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.kl-viewer[hidden] { display: none; }

.kl-v-chrome {
  flex: 0 0 auto; display: flex; align-items: center; gap: 20px;
  padding: 0 16px 0 24px; height: 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kl-v-title {
  font-family: var(--font-body); font-size: 13px; color: hsl(var(--foreground) / 0.92);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kl-v-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em;
  color: hsl(var(--muted-foreground)); white-space: nowrap;
}
.kl-v-x {
  margin-left: auto; flex: 0 0 auto; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: hsl(var(--foreground) / 0.75); font-size: 18px; line-height: 1;
  transition: color 200ms, background 200ms;
}
.kl-v-x:hover { color: hsl(var(--foreground)); background: rgba(255, 255, 255, 0.08); }

.kl-v-main {
  flex: 1 1 auto; min-height: 0; display: flex; gap: 24px;
  padding: 20px 24px 24px;
  max-width: 1680px; width: 100%; margin: 0 auto;
}
/* ONE white-matted frame — the mat is the frame; the work scrolls inside it */
.kl-v-frame {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  background: #f4f1ea; border-radius: 6px; padding: 14px;
  display: flex;
}
.kl-v-scroll {
  flex: 1 1 auto; min-height: 0; min-width: 0;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 2px;
  background: #f4f1ea;
}
.kl-v-page { width: 100%; height: auto; display: block; }
.kl-v-live { flex: 0 0 auto; width: 100%; }
.kl-v-live iframe { width: 100%; height: 100%; border: 0; display: block; background: #0b0b0c; }
.kl-v-scroll.kl-solo-live { overflow: hidden; }
.kl-v-scroll.kl-solo-live .kl-v-live { flex: 1 1 auto; min-height: 0; }
.kl-v-scroll.kl-solo-live .kl-v-live iframe { height: 100%; }

/* an ambient piece — the NO-VIDEO LAW's one moving seat (founder, 07-27):
   a chromeless record of the real app at work, already playing, muted,
   looping. No controls, no play glyph, no tag — an animated picture. */
.kl-v-ambient { flex: 0 0 auto; width: 100%; }
.kl-v-ambient video { background: #0b0b0c; }

/* a phone-shaped piece (ratio <= 0.55) — contained at phone scale on
   desktop: centered, natural phone proportions, generous dark surround,
   one subtle hairline. No fake device chrome, no notch (Hallmark law). */
.kl-v-phone {
  flex: 0 0 auto; width: 100%;
  display: flex; justify-content: center;
  background: #14161a;
  padding: 44px 0;
}
.kl-v-phone .kl-v-page {
  width: min(375px, 44%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
}
@media (max-width: 820px) {
  /* at phone widths the piece is already phone-size: near-full again */
  .kl-v-phone { padding: 14px 0; background: #14161a; }
  .kl-v-phone .kl-v-page { width: 94%; max-width: 430px; }
}

/* a film piece — the poster is the door; nothing loads until it's pressed.
   The play glyph and the mono VIDEO tag speak the replica bench's register. */
.kl-v-video { flex: 0 0 auto; width: 100%; }
.kl-v-video__door {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.kl-v-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 11, 13, 0.62); color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
  transition: background 200ms, transform 200ms;
}
.kl-v-play svg { width: 30px; height: 30px; }
.kl-v-video__door:hover .kl-v-play {
  background: rgba(10, 11, 13, 0.8); transform: translate(-50%, -50%) scale(1.05);
}
.kl-v-vtag {
  position: absolute; top: 12px; right: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.9); background: rgba(10, 11, 13, 0.55);
  padding: 4px 8px; border-radius: 3px;
}
.kl-v-video video { width: 100%; height: auto; display: block; background: #0b0b0c; }
/* the lead film opens already playing; if the browser blocked sound the
   film runs muted under this one-tap pill — visible, never buried */
.kl-v-video { position: relative; }
.kl-v-unmute {
  position: absolute; top: 14px; right: 14px; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.92); background: rgba(10, 11, 13, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 9999px;
  padding: 8px 14px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background 200ms;
}
.kl-v-unmute:hover { background: rgba(10, 11, 13, 0.9); }
.kl-v-unmute[hidden] { display: none; }
/* on touch the pill is the film's ONE invitation: centered low on the
   frame, full thumb height, the accent lighting the words — the film is
   already playing muted; this is where the sound lives */
@media (max-width: 820px), (pointer: coarse) {
  .kl-v-unmute {
    top: auto; bottom: 64px; right: 50%; transform: translateX(50%); /* clear of the player's own control bar */
    min-height: 44px; padding: 10px 24px;
    font-size: 11px; letter-spacing: 0.24em;
    color: var(--color-accent);
    border-color: rgba(232, 201, 142, 0.5);
    background: rgba(10, 11, 13, 0.78);
    white-space: nowrap;
  }
}

/* a record piece — the cover full-width, the player quiet beneath it */
.kl-v-audio { flex: 0 0 auto; width: 100%; }
.kl-v-audio__art { position: relative; }
/* if the browser refused the open-click start, the big obvious play state
   sits right on the cover — same ring anatomy, button-sized */
.kl-v-audio__start { cursor: pointer; }
.kl-v-audio__start[hidden] { display: none; }
.kl-v-audio__start:hover { background: rgba(10, 11, 13, 0.8); transform: translate(-50%, -50%) scale(1.05); }
.kl-v-audio audio {
  display: block; width: 100%; height: 40px;
  margin: 8px 0 6px; opacity: 0.88;
}

/* the rail — subtle, quiet; a case head, then mono-labelled sections.
   Founder note 07-26: "needs to look a little bit better, don't go crazy" —
   a touch more width, the case named in serif, the prompt as a quote. */
.kl-v-rail {
  flex: 0 0 340px; max-width: 340px; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 6px 28px 0;
}
.kl-v-head { margin: 0 0 26px; }
.kl-v-eyebrow {
  margin: 0 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--color-accent-mute, #e8c98e6b);
}
.kl-v-rtitle {
  margin: 0; font-family: var(--font-display, 'Instrument Serif', serif);
  font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: 0.01em;
  color: hsl(var(--foreground) / 0.94);
}
.kl-v-lbl {
  margin: 0 0 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em;
  color: hsl(var(--muted-foreground));
}
.kl-v-sec { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 16px; }
.kl-v-sec + .kl-v-sec { margin-top: 24px; }
.kl-v-prompt {
  margin: 0; font-family: var(--font-display, 'Instrument Serif', serif);
  font-style: italic; font-size: 15.5px; line-height: 1.62;
  color: hsl(var(--foreground) / 0.82); white-space: pre-line;
}
.kl-v-more {
  margin-top: 12px; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--color-accent-mute, #e8c98e6b); transition: color 200ms;
}
.kl-v-more:hover { color: var(--color-accent); }
.kl-v-built {
  margin: 0; font-family: var(--font-body); font-size: 13.5px; line-height: 1.7;
  color: hsl(var(--foreground) / 0.76);
}

/* phone: the rail sits under the chrome bar, the frame under it — except
   when the work itself moves: a film or record case leads with the frame
   (.kl-v-medialead), the prompt rail stepping beneath it, so the film is
   IN VIEW and already playing the moment the case opens */
@media (max-width: 820px) {
  .kl-v-main { flex-direction: column; overflow-y: auto; gap: 16px; padding: 16px; }
  .kl-v-rail { order: 0; flex: 0 0 auto; max-width: none; overflow: visible; padding: 0; }
  .kl-v-frame { order: 1; flex: 0 0 auto; height: 72vh; height: 72dvh; padding: 8px; }
  .kl-v-main.kl-v-medialead .kl-v-rail { order: 1; }
  .kl-v-main.kl-v-medialead .kl-v-frame { order: 0; }
  .kl-v-chrome { padding-left: 16px; }
  .kl-v-count { letter-spacing: 0.16em; }
  /* the close is a full thumb target at the corner */
  .kl-v-x { width: 44px; height: 44px; }
}

/* ------------------------------------------------------ enterprise footer
   The approved footer anatomy (brand block · three titled columns · bottom
   line · imprint), re-voiced in this template's registers. Hairlines, not
   boxes; the footer keeps the template's own #14191E ground. */
.kl-foot { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .kl-foot { padding: 0 40px; } }
.kl-foot-top {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 880px) { .kl-foot-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 64px; } }
.kl-foot-mark { height: 30px; width: auto; display: block; opacity: 0.95; margin-bottom: 16px; }
.kl-foot-word { height: 16px; width: auto; display: block; opacity: 0.95; }
.kl-foot-desc {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 0;
  font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.22em;
  color: hsl(var(--muted-foreground));
}
.kl-foot-rule { display: block; width: 40px; height: 1px; background: var(--color-accent); flex: none; }
.kl-foot-tag { margin: 16px 0 0; font-family: var(--font-body); font-size: 13px; color: hsl(var(--muted-foreground)); max-width: 30ch; }
.kl-foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
@media (min-width: 560px) { .kl-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* AUDIT 70 (07-27): under 560px the Legal column drops to the second grid
   row but stays penned in a half-width track, wrapping its longest link
   ("Data Processing Addendum") onto two lines — a two-line clickable.
   Alone on its row anyway, it takes the whole row and every link holds
   one line. */
@media (max-width: 559.98px) { .kl-foot-col:nth-child(3) { grid-column: 1 / -1; } }
.kl-foot-col h4 {
  margin: 0 0 16px; font-family: var(--font-body); font-weight: 500;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.28em;
  color: hsl(var(--muted-foreground));
}
.kl-foot-col a {
  display: block; padding: 4px 0; font-family: var(--font-body); font-size: 13px;
  color: hsl(var(--foreground) / 0.8); text-decoration: none; transition: color 200ms;
}
.kl-foot-col a:hover { color: hsl(var(--foreground)); }
.kl-foot-bottom {
  padding-top: 24px; display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 12px 48px;
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.02em;
  color: hsl(var(--muted-foreground));
}
.kl-foot-bottom p { margin: 0; }
.kl-foot-legal { display: flex; gap: 24px; }
.kl-foot-legal a { color: hsl(var(--muted-foreground)); text-decoration: none; transition: color 200ms; }
.kl-foot-legal a:hover { color: hsl(var(--foreground)); }
.kl-foot-imprint {
  margin: 40px 0 0; text-align: center; font-family: var(--font-body);
  font-size: 10px; font-weight: 500; letter-spacing: 0.28em;
  color: hsl(var(--muted-foreground));
}

/* ------------------------------------------------------ early-access panel
   The one quiet door. The approved panel (name · email · message → the
   studio's live form endpoint), dressed in this template's overlay and
   chrome: black/85 scrim, white/10 hairlines, the gold pill. */
.kl-access { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.kl-access[hidden] { display: none; }
.kl-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.kl-access-sheet {
  position: relative; z-index: 1; width: min(520px, 100%);
  background: hsl(var(--background)); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px; padding: 36px 32px 28px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}
.kl-access-sheet .kl-v-x { position: absolute; top: 12px; right: 12px; margin: 0; }
.kl-access-sheet h2 {
  margin: 0 0 10px; font-family: var(--font-display); font-weight: 400;
  font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.01em; color: hsl(var(--foreground));
}
.kl-access-sheet > p { margin: 0 0 22px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.kl-access-form { display: flex; flex-direction: column; gap: 12px; }
.kl-access-form input, .kl-access-form textarea {
  width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 14px;
  color: hsl(var(--foreground)); background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px;
  padding: 12px 14px; outline: none; transition: border-color 200ms;
  resize: vertical;
}
.kl-access-form input::placeholder, .kl-access-form textarea::placeholder { color: hsl(var(--muted-foreground)); }
.kl-access-form input:focus, .kl-access-form textarea:focus { border-color: var(--color-accent-mute, #e8c98e6b); }
.kl-access-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 520px) { .kl-access-row { grid-template-columns: minmax(0, 1fr); } }
/* the seeded chip honors its hidden state (its display:flex was beating
   the [hidden] UA rule — the empty chip showed on every open) */
.kl-access-bring[hidden] { display: none; }
/* phone: inputs at 16px so iOS never zoom-traps the form; the sheet
   scrolls inside the small viewport instead of clipping its send button */
@media (max-width: 767px) {
  .kl-access-form input, .kl-access-form textarea { font-size: 16px; }
  .kl-access-sheet { max-height: calc(100dvh - 32px); overflow-y: auto; padding: 30px 24px 24px; }
}
.kl-access-error { margin: 0; font-family: var(--font-body); font-size: 12.5px; color: #d9836f; }
.kl-access-error[hidden] { display: none; }
.kl-access-send {
  margin-top: 4px; align-self: flex-start; display: inline-flex; align-items: center;
  height: 44px; padding: 0 28px; border: 0; border-radius: 9999px; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  background: var(--color-accent); color: hsl(218 24% 7%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 14px 36px -10px rgba(232, 201, 142, 0.55), 0 4px 14px -4px rgba(0, 0, 0, 0.45);
  transition: transform 200ms;
}
.kl-access-send:hover { transform: translateY(-1px); }
.kl-access-send:disabled { opacity: 0.6; cursor: default; transform: none; }
.kl-access-note { margin: 18px 0 0; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.04em; color: hsl(var(--muted-foreground)); }
.kl-access-done { padding: 8px 0 4px; }
.kl-access-done-line { margin: 0; font-family: var(--font-display); font-size: 1.375rem; color: hsl(var(--foreground)); }
.kl-access-done-sub { margin: 8px 0 0; font-family: var(--font-body); font-size: 13px; color: hsl(var(--muted-foreground)); }
/* the reserved state — post-submit only: generous space, the serif lead,
   the body given room to breathe, the seated door reflected back quietly */
.kl-access-reserved { padding: 22px 6px 16px; }
.kl-access-reserved h2 { margin-bottom: 18px; }
.kl-access-reserved p {
  margin: 0; font-family: var(--font-body);
  font-size: 14px; line-height: 1.8; color: hsl(var(--muted-foreground));
}
.kl-access-reserved__bring {
  margin-top: 20px !important;
  font-family: var(--font-display); font-style: italic;
  font-size: 15.5px; line-height: 1.6 !important;
  color: hsl(var(--foreground) / 0.88) !important;
}

/* ------------------------------------------------------- the category tabs
   One row of mono tabs over the one grid. A FILTER, not navigation: the
   active tab wears the accent with a hairline underline, the rest stay
   muted; a quiet mono count sits at the row's end. The grid swaps its
   cards in place under a 150ms fade and reserves its tallest height so
   the page never reflows between tabs. Phone: the row scrolls sideways. */
.kl-tabbar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 24px;
  padding-bottom: 16px; margin: 0 0 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* the row's own name (founder polish, 07-27): BROWSE THE SHELVES in the
   exact register of START WITH WHAT YOU WANT, so the two indexes read as
   siblings and the tab row stops reading as fine print */
.kl-tabbar__label {
  flex: 0 0 100%; margin: 0 0 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.28em;
  color: hsl(var(--muted-foreground));
}
/* above phone the row WRAPS: every tab fully visible, nothing hidden */
.kl-tabs {
  display: flex; flex-wrap: wrap; gap: 8px 24px; min-width: 0; overflow: visible;
}
.kl-tabs::-webkit-scrollbar { display: none; }
.kl-tab {
  flex: 0 0 auto; background: none; border: 0; padding: 0 0 8px; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.28em;
  /* rest ink one step brighter than the mute register (07-27: the shelf
     names were easy to miss); hover and active unchanged */
  color: hsl(var(--foreground) / 0.62); white-space: nowrap;
  border-bottom: 1px solid transparent; transition: color 200ms, border-color 200ms;
}
.kl-tab:hover, .kl-tab:active { color: hsl(var(--foreground)); }
.kl-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 2px; }
.kl-tab.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.kl-grid { transition: opacity 150ms cubic-bezier(0, 0, 0.2, 1), min-height 300ms cubic-bezier(0, 0, 0.2, 1); }
.kl-grid.is-fading { opacity: 0; }
/* touch widths: every tab is a full thumb target (≥44px), the underline
   riding the tab's own bottom edge */
@media (max-width: 1023px) {
  .kl-tab { min-height: 44px; display: inline-flex; align-items: center; padding: 0 0 2px; }
}
/* phone: the tabs scroll sideways under an edge fade — the cut-off tab at
   the edge plus the fade IS the affordance; the page itself never moves */
@media (max-width: 639px) {
  .kl-tabbar { flex-wrap: wrap; gap: 0 16px; margin-bottom: 32px; padding-bottom: 8px; }
  .kl-tabs {
    flex: 0 0 100%; flex-wrap: nowrap; gap: 22px; overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) { .kl-grid { transition: none; } }

/* ------------------------------------------------- watch-a-room, more rooms
   WATCH ANOTHER ROOM lives where the eyes already are: a quiet vertical
   rail LEFT of the demo frame at >=1024px, in the studio's own sidebar
   register — mono 10px caps category labels, serif room names, the active
   room lit with the accent and a small dot. Below 1024px the rail folds
   into a horizontal chip row ABOVE the frame: the showroom tab row's own
   anatomy (mono caps, accent underline, sideways scroll under an edge
   fade). Data-driven: more rooms cost zero layout work. */
.kl-rooms-rail { text-align: left; min-width: 0; }
.kl-rooms-rail__lbl {
  margin: 0 0 18px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em;
  color: hsl(var(--muted-foreground));
}
.kl-rooms-rail__cat {
  margin: 0 0 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--color-accent-mute, #e8c98e6b);
}
.kl-rooms-rail__pick {
  display: block; position: relative; background: none; border: 0; cursor: pointer;
  padding: 3px 0 3px 16px; text-align: left;
  font-family: var(--font-display, 'Instrument Serif', serif); font-weight: 400;
  font-size: 15px; line-height: 1.35; letter-spacing: 0;
  color: hsl(var(--foreground) / 0.6); transition: color 200ms;
}
.kl-rooms-rail__pick:hover { color: hsl(var(--foreground)); }
.kl-rooms-rail__pick.is-active { color: var(--color-accent); }
.kl-rooms-rail__pick:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }
.kl-rooms-rail__dot {
  position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-accent); opacity: 0; transition: opacity 200ms;
}
.kl-rooms-rail__pick.is-active .kl-rooms-rail__dot { opacity: 1; }
/* >=1024px: rail + frame share one flex row (the bundle's own wrap);
   the rail holds ~208px, the frame shrinks gracefully and keeps its own
   aspect/height law untouched */
@media (min-width: 1024px) {
  .kl-roomsrow { gap: 40px; align-items: flex-start; justify-content: center; }
  .kl-rooms-rail { flex: 0 0 208px; width: 208px; padding-top: 6px; }
  .kl-rooms-rail__list { display: flex; flex-direction: column; gap: 22px; }
  .kl-roomsrow > .kl-demo-native, .kl-roomsrow > .kl-replica { min-width: 0; }
}
/* CENTER THE ENSEMBLE (founder, 07-26): the row's parent cages it at
   ~1192px, so the rail was eating the frame's width and the pair filled
   the cage edge-to-edge. The row now takes the width the ENSEMBLE needs —
   rail 208 + 40 gap + the frame's own 1180 cap = 1428, viewport-bounded —
   and centers that combined width on the page (the parent is itself
   centered, so the (100% − W)/2 margin lands the row's center on the
   page's center). Replica internals untouched. */
@media (min-width: 1280px) {
  .kl-roomsrow { width: min(100vw - 128px, 1428px); }
}
/* <1024px: the wrap stacks; the rail becomes a chip row above the frame */
@media (max-width: 1023px) {
  .kl-roomsrow { flex-direction: column; }
  .kl-rooms-rail { width: 100%; max-width: 1180px; margin: 0 auto 20px; }
  .kl-rooms-rail__lbl { margin-bottom: 12px; }
  .kl-rooms-rail__list {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 22px;
    overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .kl-rooms-rail__list::-webkit-scrollbar { display: none; }
  .kl-rooms-rail__group { display: flex; flex-direction: row; align-items: center; gap: 22px; }
  .kl-rooms-rail__cat { display: none; }
  .kl-rooms-rail__dot { display: none; }
  .kl-rooms-rail__pick {
    flex: 0 0 auto; padding: 0 0 2px; white-space: nowrap;
    min-height: 44px; display: inline-flex; align-items: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.28em;
    color: hsl(var(--muted-foreground));
    border-bottom: 1px solid transparent; transition: color 200ms, border-color 200ms;
  }
  .kl-rooms-rail__pick:hover { color: hsl(var(--foreground)); }
  .kl-rooms-rail__pick.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
}

/* while a replica room plays, the bundle's own frame steps aside — it is
   never removed; Casa La Cima returns it exactly as it was */
#cta.kl-replica-on .kl-demo-native { display: none; }
.kl-replica { text-align: left; }
.kl-replica .kl-rr-live { width: 100%; aspect-ratio: 16 / 10; border: 0; display: block; background: #0b0b0c; }
.kl-rr-in { opacity: 0; transform: translateY(8px); transition: opacity 500ms ease, transform 500ms ease; }
.kl-rr-in.in { opacity: 1; transform: none; }
/* the workbench flow wrapper is invisible to the desktop three-pane
   layout: its children lay out as the pane's own (mobile pass, 07-27) */
.kl-rr-benchflow { display: contents; }

/* ---------------------------------------- WATCH-A-ROOM ON A PHONE (07-27)
   THE CENTERPIECE. Below 768px the three panes cannot stand side by side,
   so the room restacks into the drama's own order — and the SAME
   structural treatment serves the bundle's native Casa La Cima demo and
   the replica rooms, because the replica copied the demo's anatomy:

   · the CONVERSATION is the stage: full width, tall (the frame trades its
     16:10 cinema ratio for ~72dvh of phone height);
   · the ROSTER folds into a compact strip ABOVE the stage — dot + serif
     name, running sideways, so seats are SEEN arriving as the team forms;
   · the WORKBENCH folds into a low shelf BELOW the stage — engagement
     path, the files-landed count, and every landing as a card sliding in
     from the right (the JS nudges the shelf to its newest moment).

   Selectors are structural (nth-child on the demo's own mounted grid) —
   the bundle is untouched; this is the enhancement layer dressing the
   mounted DOM, the same contract applyClientIdentity already holds. */
@media (max-width: 767px) {
  /* the frame stands tall — a phone room, not a squashed cinema strip
     (the outer wrapper releases any ratio of its own and hugs the frame) */
  #cta .kl-demo-native {
    aspect-ratio: auto !important; height: auto !important; max-height: none !important;
  }
  #cta .kl-demo-native > div,
  #cta .kl-replica {
    aspect-ratio: auto !important;
    height: min(72dvh, 640px) !important;
    max-height: none !important;
  }
  /* one column, three rows: roster strip / conversation / workbench shelf */
  #cta .kl-demo-native > div > .grid,
  #cta .kl-rr-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  /* — the roster strip — */
  #cta .kl-demo-native > div > .grid > div:nth-child(1),
  #cta .kl-rr-grid > div:nth-child(1) {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 0;
  }
  #cta .kl-demo-native > div > .grid > div:nth-child(1) > div,
  #cta .kl-rr-grid > div:nth-child(1) > div {
    height: auto; padding: 10px 16px 8px; gap: 0; overflow: visible;
  }
  /* logo, nav, recent-work and the account block step aside; the
     IN THE ROOM block (4th child in both frames) IS the strip */
  #cta .kl-demo-native > div > .grid > div:nth-child(1) > div > *:not(:nth-child(4)),
  #cta .kl-rr-grid > div:nth-child(1) > div > *:not(:nth-child(4)) {
    display: none;
  }
  #cta .kl-demo-native > div > .grid > div:nth-child(1) > div > div:nth-child(4),
  #cta .kl-rr-grid > div:nth-child(1) > div > div:nth-child(4) {
    border-top: 0; margin: 0; padding: 0; flex: none;
    display: flex; flex-direction: column; gap: 6px; min-height: 0;
  }
  /* the one-line "working" note stays one line */
  #cta .kl-demo-native > div > .grid > div:nth-child(1) > div > div:nth-child(4) > p,
  #cta .kl-rr-grid > div:nth-child(1) > div > div:nth-child(4) > p {
    margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* the seats run sideways: dot + serif name, arrivals sliding in */
  #cta .kl-demo-native > div > .grid > div:nth-child(1) > div > div:nth-child(4) > ul,
  #cta .kl-rr-grid > div:nth-child(1) > div > div:nth-child(4) > ul {
    display: flex; flex-direction: row; align-items: flex-start; gap: 16px;
    flex: none; margin: 0; padding: 2px 0 4px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent);
    mask-image: linear-gradient(90deg, #000 94%, transparent);
  }
  #cta .kl-demo-native > div > .grid > div:nth-child(1) ul::-webkit-scrollbar,
  #cta .kl-rr-grid > div:nth-child(1) ul::-webkit-scrollbar { display: none; }
  #cta .kl-demo-native > div > .grid > div:nth-child(1) > div > div:nth-child(4) > ul > li,
  #cta .kl-rr-grid > div:nth-child(1) > div > div:nth-child(4) > ul > li {
    flex: 0 0 auto; max-width: 46vw;
  }
  /* name only in the strip: the role/status lines and the demo's little
     task sub-lists rest until desktop */
  #cta .kl-demo-native > div > .grid > div:nth-child(1) .leading-tight > span:nth-child(n+2),
  #cta .kl-rr-grid > div:nth-child(1) .leading-tight > span:nth-child(n+2),
  #cta .kl-demo-native > div > .grid > div:nth-child(1) > div > div:nth-child(4) > ul > li > div > *:nth-child(3),
  #cta .kl-demo-native > div > .grid > div:nth-child(1) > div > div:nth-child(4) > ul > li > ul {
    display: none;
  }

  /* — the conversation, the stage — */
  #cta .kl-demo-native > div > .grid > div:nth-child(2),
  #cta .kl-rr-grid > div:nth-child(2) { border-right: 0; }

  /* — the workbench shelf — */
  #cta .kl-demo-native > div > .grid > div:nth-child(3),
  #cta .kl-rr-grid > div:nth-child(3) {
    border-top: 1px solid rgba(255, 255, 255, 0.08); min-height: 0;
  }
  #cta .kl-demo-native > div > .grid > div:nth-child(3) > div,
  #cta .kl-rr-grid > div:nth-child(3) > div {
    height: auto; padding: 10px 16px 12px; gap: 8px; overflow: visible;
  }
  /* the pane header keeps its serif name; the chevron rests */
  #cta .kl-demo-native > div > .grid > div:nth-child(3) > div > div:first-child > span:last-child,
  #cta .kl-rr-grid > div:nth-child(3) > div > div:first-child > .material-symbols-outlined:last-child {
    display: none;
  }
  /* the flow runs sideways: path · files count · every landing a card */
  #cta .kl-demo-native > div > .grid > div:nth-child(3) > div > div:nth-child(2),
  #cta .kl-rr-benchflow {
    display: flex !important; flex-direction: row; align-items: stretch;
    gap: 12px; min-height: 0; margin: 0; padding: 2px 0 4px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent);
    mask-image: linear-gradient(90deg, #000 94%, transparent);
  }
  #cta .kl-demo-native > div > .grid > div:nth-child(3) > div > div:nth-child(2)::-webkit-scrollbar,
  #cta .kl-rr-benchflow::-webkit-scrollbar { display: none; }
  /* the replica's card container dissolves so its landings ride the shelf */
  #cta .kl-rr-benchflow > [data-rr-bench] { display: contents; }
  #cta .kl-demo-native > div > .grid > div:nth-child(3) > div > div:nth-child(2) > div,
  #cta .kl-rr-benchflow > div:not([data-rr-bench]),
  #cta .kl-rr-benchflow > [data-rr-bench] > div {
    flex: 0 0 auto; width: 216px; margin: 0;
    max-height: 148px; overflow: hidden;
  }
  /* landed work reads as a tile: media boxes hold one shelf height */
  #cta .kl-demo-native > div > .grid > div:nth-child(3) .relative.rounded-lg.overflow-hidden,
  #cta .kl-rr-grid > div:nth-child(3) .relative.rounded-lg.overflow-hidden {
    height: 96px;
  }
  #cta .kl-demo-native > div > .grid > div:nth-child(3) .relative.rounded-lg.overflow-hidden img,
  #cta .kl-rr-grid > div:nth-child(3) .relative.rounded-lg.overflow-hidden img,
  #cta .kl-demo-native > div > .grid > div:nth-child(3) .relative.rounded-lg.overflow-hidden iframe,
  #cta .kl-rr-grid > div:nth-child(3) .relative.rounded-lg.overflow-hidden iframe {
    width: 100%; height: 100% !important; object-fit: cover;
    aspect-ratio: auto !important;
  }

  /* the taller frame needs the section's absolute CTA block ("Your room
     is waiting" + the pill, anchored bottom-16) to keep its clearance —
     the wrapper's own pb-[260px] was sized for the squat 16:10 frame */
  #cta > .relative.z-10.mx-auto { padding-bottom: 340px; }
}
/* the client's champagne voice — lifted from the studio's own client
   bubble (kaldune ui/css/desktop-cut.css:302 "the mock's warm brass
   bubble": background linear-gradient(180deg, #3a3323, #2e2917), 1px
   #4a3f26 hairline, ivory #f4ecda ink, the nicked top-right corner
   12/5/12/12, plus desktop-cut.css:2750's inset top-highlight; right
   alignment per chat.css:404). Type stays the replica's own 11.5px
   scale. The label is the product's client byline (chat.css:426):
   italic serif, weight 500, ink-muted #CDD4DC. */
.kl-rr-client {
  background: linear-gradient(180deg, #3a3323, #2e2917);
  border: 1px solid #4a3f26;
  border-start-start-radius: 12px;
  border-start-end-radius: 5px;
  border-end-end-radius: 12px;
  border-end-start-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #f4ecda;
}
.kl-rr-client__name {
  font-style: italic;
  font-weight: 500;
  color: #CDD4DC;
}
.kl-rr-delivery {
  border: 1px solid rgba(232, 201, 142, 0.35); border-radius: 12px;
  background: rgba(232, 201, 142, 0.06); padding: 12px 14px;
}
.kl-rr-delivery__kicker {
  margin: 0 0 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--color-accent);
}
.kl-rr-delivery__title {
  margin: 0; font-family: var(--font-display, 'Instrument Serif', serif);
  font-size: 15px; line-height: 1.25; color: hsl(var(--foreground) / 0.95);
}
.kl-rr-delivery__note { margin: 6px 0 0; font-size: 11px; line-height: 1.55; color: hsl(var(--foreground) / 0.65); }

/* a video deliverable on the workbench: the poster (a real still from the
   delivered work) under a quiet centered play glyph — a thin ring and a
   small triangle in the layer's own hairline register — and a mono VIDEO
   tag. Not clickable: no video file ships with the replica. */
.kl-rr-play {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; pointer-events: none;
}
.kl-rr-play i {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(8, 10, 14, 0.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.kl-rr-play svg { width: 12px; height: 12px; margin-left: 2px; color: rgba(255, 255, 255, 0.9); }
.kl-rr-vtag {
  position: absolute; top: 8px; left: 8px; pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px; text-transform: uppercase; letter-spacing: 0.22em;
  line-height: 1; padding: 4px 6px 3px; border-radius: 4px;
  color: rgba(255, 255, 255, 0.85); background: rgba(8, 10, 14, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .kl-rr-in { transition: none; opacity: 1; transform: none; }
}

/* the relabeled pill CTA never wraps */
[data-kl-cta] { white-space: nowrap; }

/* phone: display headers survive any long word — wrap inside the word
   before ever pushing the page sideways (hallmark gate 63) */
@media (max-width: 767px) {
  .kl-card__title, .kl-card__teaser, .kl-v-rtitle,
  .kl-want__sentence, .kl-trail-out p,
  [data-kl-work] h2, .kl-access-sheet h2 {
    overflow-wrap: anywhere; min-width: 0;
  }
}

body.kl-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .kl-card__plate img, .kl-card__plate video, .kl-access-send { transition: none; }
}

/* ------------------------------------------------- the starting points band
   START WITH WHAT YOU WANT (founder-approved, 07-27): eight doors between
   the section head and the tab row. Two indexes, two voices — the label in
   the mono-caps micro register the tabs and rails already speak, the doors
   themselves in the section head's own Instrument Serif, first person.
   Desktop: two columns of four, hairline-shelved like an index. Phone
   (95% of the audience): ONE column, one line per door, tap targets ≥44px,
   the whole band held near ~400px. */
.kl-want {
  margin: -8px 0 44px;
}
.kl-want__label {
  margin: 0 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.28em;
  color: hsl(var(--muted-foreground));
}
.kl-want__line {
  margin: 0 0 18px;
  font-family: var(--font-display, 'Instrument Serif', serif); font-weight: 400;
  font-size: 17px; line-height: 1.4; font-style: italic;
  color: hsl(var(--muted-foreground));
}
.kl-want__doors {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.kl-want__door {
  display: flex; align-items: center; gap: 14px; min-height: 48px;
  padding: 9px 0; text-align: left; background: none; border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer;
  font-family: var(--font-display, 'Instrument Serif', serif); font-weight: 400;
  font-size: 21px; line-height: 1.15; letter-spacing: -0.01em;
  color: hsl(var(--foreground) / 0.66);
  transition: color 200ms;
}
.kl-want__door:hover { color: hsl(var(--foreground)); }
.kl-want__door:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: 2px; }
.kl-want__door.is-active { color: var(--color-accent); }
.kl-want__sentence { min-width: 0; }
.kl-want__arrow {
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--font-display, 'Instrument Serif', serif);
  font-size: 18px; color: var(--color-accent);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 200ms, transform 200ms;
}
.kl-want__door:hover .kl-want__arrow,
.kl-want__door.is-active .kl-want__arrow { opacity: 1; transform: none; }
/* a door already walked this visit wears a quiet mark (steal from B,
   07-28): a faint gold dot at the row's end, after the arrow — the
   ledger's own resting-gold register, session-scoped by the JS. ::after
   is a flex item, so it rides the end edge in both directions. */
.kl-want__door.is-walked::after {
  content: ""; flex: 0 0 auto;
  inline-size: 5px; block-size: 5px; border-radius: 50%;
  background: var(--color-accent); opacity: 0.55;
}
/* phone: a single-column tappable list, one line per door — the size and
   leading tightened until the longest sentence holds on 320 */
@media (max-width: 767px) {
  .kl-want { margin: -4px 0 32px; }
  .kl-want__label { margin-bottom: 8px; }
  .kl-want__line { margin-bottom: 12px; font-size: 14.5px; }
  .kl-want__doors { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .kl-want__door { min-height: 44px; padding: 6px 0; font-size: 18px; }
  .kl-want__arrow { opacity: 1; transform: none; font-size: 15px; color: hsl(var(--muted-foreground)); }
  .kl-want__door.is-active .kl-want__arrow { color: var(--color-accent); }
}
@media (max-width: 359px) {
  .kl-want__door { font-size: 16px; }
  .kl-want__line { font-size: 13px; } /* two lines, not three, on 320 */
}
@media (prefers-reduced-motion: reduce) {
  .kl-want__door, .kl-want__arrow { transition: none; }
}

/* ------------------------------------------------- the chosen door (07-27)
   Founder polish: "When you click… you have to scroll down. Maybe you just
   center it there." A picked door collapses the whole band to ONE centered
   sentence — the doors' own serif voice, the accent ink of a live choice —
   over a quiet mono way back to all eight. The label, the intro line and
   the eight doors step out of view (never out of the DOM); any shelf tab
   or THE FLOOR restores them. The sentence rises in over 240ms so the
   cause-and-effect of the click is unmissable. */
.kl-want.is-chosen .kl-want__label,
.kl-want.is-chosen .kl-want__line,
.kl-want.is-chosen .kl-want__doors { display: none; }
.kl-want__chosen {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 6px 0 2px; text-align: center;
}
.kl-want__chosen[hidden] { display: none; }
.kl-want__chosen-line {
  margin: 0;
  font-family: var(--font-display, 'Instrument Serif', serif); font-weight: 400;
  font-size: 30px; line-height: 1.12; letter-spacing: -0.01em;
  color: var(--color-accent);
  animation: kl-chosen-in 240ms cubic-bezier(0, 0, 0.2, 1);
}
.kl-want__all {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.28em;
  color: hsl(var(--muted-foreground));
  transition: color 200ms;
}
.kl-want__all:hover { color: hsl(var(--foreground)); }
.kl-want__all:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 2px; }
@keyframes kl-chosen-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  .kl-want__chosen-line { font-size: 22px; }
  .kl-want__all { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .kl-want__chosen-line { animation: none; }
}

/* a trail's quiet closing line: onward to the shelf that holds more */
.kl-trail-out { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.kl-trail-out p {
  margin: 0;
  font-family: var(--font-display, 'Instrument Serif', serif); font-weight: 400;
  font-size: 18px; font-style: italic; color: hsl(var(--muted-foreground));
}
.kl-trail-out__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-style: italic; color: var(--color-accent);
  border-bottom: 1px solid rgba(232, 201, 142, 0.45);
  transition: border-color 200ms;
}
.kl-trail-out__link:hover { border-bottom-color: var(--color-accent); }
.kl-trail-out__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }
@media (max-width: 639px) {
  .kl-trail-out { margin-top: 40px; }
  .kl-trail-out p { font-size: 16px; }
}

/* the seeded starting point in the early-access panel: visible, removable */
.kl-access-bring {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 14px; padding: 10px 12px;
  background: rgba(232, 201, 142, 0.06);
  border: 1px solid rgba(232, 201, 142, 0.22); border-radius: 6px;
}
.kl-access-bring__lbl {
  flex: 0 0 auto;
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
}
.kl-access-bring__q {
  min-width: 0;
  font-family: var(--font-display, 'Instrument Serif', serif); font-style: italic;
  font-size: 15px; line-height: 1.35; color: hsl(var(--foreground) / 0.9);
}
.kl-access-bring__x {
  flex: 0 0 auto; margin-left: auto; align-self: center;
  background: none; border: 0; padding: 4px 6px; cursor: pointer;
  font-size: 11px; line-height: 1; color: hsl(var(--muted-foreground));
  transition: color 200ms;
}
.kl-access-bring__x:hover { color: hsl(var(--foreground)); }
.kl-access-bring__x:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }

/* --------------------------------- closing-CTA direction mockups (07-27)
   FOUNDER REVIEW ONLY — these rules serve the ?cta=1|2|3 mockups built by
   applyCtaMock in enhance.js; nothing on the default page carries any of
   these classes. Delete this whole block (and the enhance.js section)
   once the founder picks, or promote the winner. */
/* ?cta=1 · the composer reprise */
.kl-ctam--composer { width: 100%; margin-bottom: 8px; text-align: left; }
.kl-ctam__lbl {
  margin: 0 0 10px; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.28em;
  color: hsl(var(--muted-foreground));
}
.kl-ctam__box {
  min-height: 92px; padding: 18px 20px; border-radius: 14px;
  background: rgba(8, 10, 14, 0.72); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.kl-ctam__text {
  font-family: var(--font-display, 'Instrument Serif', serif); font-style: italic;
  font-size: 17px; line-height: 1.45; color: hsl(var(--foreground) / 0.92);
}
.kl-ctam__caret {
  display: inline-block; width: 1px; height: 1.1em; margin-left: 3px;
  vertical-align: text-bottom; background: var(--color-accent);
  animation: kl-ctam-blink 1.1s steps(1) infinite;
}
@keyframes kl-ctam-blink { 50% { opacity: 0; } }
/* the mock blocks take a lower anchor so nothing rides over the demo frame */
[data-kl-ctam="1"], [data-kl-ctam="3"] { bottom: 36px !important; }
/* ?cta=2 · the receipts closer — one drifting row of real covers, passing
   BEHIND the closing block (z-40 under its z-50) */
.kl-ctam-strip {
  position: absolute; left: 0; right: 0; bottom: 128px; z-index: 40;
  overflow: hidden; pointer-events: none; opacity: 0.4;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.kl-ctam-strip__track { display: flex; width: max-content; animation: kl-ctam-drift 70s linear infinite; }
.kl-ctam-strip__run { display: flex; gap: 20px; padding-right: 20px; }
.kl-ctam-strip__run img {
  height: 86px; width: auto; display: block; border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.7);
}
@keyframes kl-ctam-drift { to { transform: translateX(-50%); } }
/* ?cta=3 · the room-door closer — the replica's delivered moment, a sliver */
.kl-ctam-room {
  width: min(100%, 600px); height: 200px; margin-bottom: 10px;
  border-radius: 14px; overflow: hidden; position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 10, 14, 0.88);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.65);
  /* the sliver shows the room's BOTTOM half — the delivered banner in the
     chat and the filled workbench — fading out at its top edge */
  -webkit-mask-image: linear-gradient(to top, #000 74%, transparent);
  mask-image: linear-gradient(to top, #000 74%, transparent);
}
.kl-ctam-room__scale {
  position: absolute; bottom: 0; left: 0;
  width: 1240px; height: 775px;
  transform: scale(0.484); transform-origin: bottom left;
}
@media (max-width: 767px) {
  .kl-ctam-room { height: 200px; }
  .kl-ctam-room__scale { transform: scale(0.29); }
  .kl-ctam-strip { bottom: 200px; }
  .kl-ctam-strip__run img { height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .kl-ctam-strip__track { animation: none; }
  .kl-ctam__caret { animation: none; }
}

/* ------------------------------------------------ the quiet way back up
   about.html's .to-top anatomy (44px round target, dark glass, hairline,
   appears past meaningful scroll), on the landing's own dark ground.
   Hidden under body.kl-locked so it never sits over the viewer, the
   early-access sheet, or the sound pill they carry. */
.kl-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(17, 17, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: hsl(var(--foreground) / 0.9);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, color 200ms ease, border-color 200ms ease;
}
.kl-top.show { opacity: 1; pointer-events: auto; }
.kl-top:hover { color: var(--color-accent); border-color: rgba(232, 201, 142, 0.5); }
body.kl-locked .kl-top { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .kl-top { transition: none; }
}

/* ================================================================== GAUNTLET
   07-27 pre-flip adversarial pass — three Hallmark catches, CSS-only,
   bundle untouched. */

/* (1) THE HEADER'S CROWDED MIDDLE. The bundle's centered desktop nav
   (hidden md:flex, absolute left-1/2) turns on at 768px, but between
   768 and ~1200 it collides with what stands at the edges: the logo
   lockup on the left (until ~860 in en, wider in de/id) and the fixed
   Request-early-access pill + the language door on the right (measured:
   en clears at 1024, fr/de at ~1100, it at ~1150 — the translated nav
   and pill breathe at different widths, so no single squeeze fits all
   twelve languages). Below 1200 the page now keeps the PHONE header it
   already owns — burger + language door — which is width-proof in every
   locale. The pill returns at 1200 where every language holds one line
   clear of the nav. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  header.fixed nav[class*="left-1/2"] { display: none !important; }
  header.fixed button[class*="md:hidden"] { display: flex !important; }
  header.fixed div[class*="md:hidden"] { display: block !important; }
  header.fixed span[class*="md:inline-block"] { display: none !important; }
  div.liquid-glass.gold-frame-hover[class*="md:flex"] { display: none !important; }
}

/* (2) THE LEDGER'S WRAPPED SENTENCES. In the two-column index the two
   longest doors ("I have an idea for an app or a game.", "I want to
   make a gift for someone.") wrap onto a second line between 768 and
   ~1000px, throwing the rows out of register — a two-line clickable.
   The band keeps the phone's single-column list up to 1024, where the
   two columns hold every sentence on one line. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .kl-want__doors { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
}

/* (3) THE FOOTER'S WRAPPED DOOR. At 320 the two-up column grid pens
   COMPANY into ~124px and "Request early access" breaks onto two lines
   (AUDIT 70's own law, one width lower). Below 380 the columns stack
   full-width and every link holds one line. */
@media (max-width: 379.98px) {
  .kl-foot-cols { grid-template-columns: minmax(0, 1fr); }
  .kl-foot-col:nth-child(3) { grid-column: auto; }
}

/* ---------------------------------------- the starting-point ROOM (07-28)
   WALKING THROUGH THE DOOR — the two-section cure. The room is the case
   viewer's own overlay family (same near-black ground, same 52px hairline
   chrome, same ×), seated UNDER the viewer (z 180 < 200) so a case read
   from inside the room opens on top and closes back into it. Inside, the
   page's own registers: the mono-caps eyebrow with the ledger's 40px gold
   overline, the door's sentence at display serif scale, and the trail as
   a dense floor of the grid's own cards — compacted (teaser and RUNS chip
   rest; category one line; title a step down) so the headline and two
   rows of pieces stand in the opening view at 1440 AND 390. No entrance
   animation: like the viewer, the room simply stands. */
.kl-room {
  position: fixed; inset: 0; z-index: 180;
  display: flex; flex-direction: column;
  background: rgba(9, 11, 14, 0.97);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.kl-room[hidden] { display: none; }
.kl-room__chrome {
  flex: 0 0 auto; display: flex; align-items: center; gap: 20px;
  padding-block: 0; padding-inline: 24px 16px; height: 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* the way back wears ALL STARTING POINTS in the ledger's own mono-caps
   micro register — the same words the collapsed band spoke in the shipped
   design, now the room's own door out */
.kl-room__all {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.28em;
  color: hsl(var(--muted-foreground)); transition: color 200ms;
}
.kl-room__all:hover { color: hsl(var(--foreground)); }
.kl-room__all:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 2px; }
/* the suite index (steal from B, 07-28): the door's ordinal over the
   eight, mono micro register, seated before the ×. It takes the chrome's
   auto margin (the × yields its own inside the room), so back sits at the
   start edge and the pair 02 / 08 · × at the end — in BOTH directions,
   the logical margin carrying the mirror. Digits stay LTR under Arabic. */
.kl-room__index {
  margin-inline-start: auto; flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.28em;
  color: hsl(var(--muted-foreground));
  direction: ltr; unicode-bidi: isolate;
}
.kl-room__chrome .kl-v-x { margin-left: 0; }
.kl-room__scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.kl-room__inner {
  max-width: 1280px; margin: 0 auto;
  padding: 26px 24px 72px;
}
@media (min-width: 768px) { .kl-room__inner { padding-inline: 40px; } }
.kl-room__head { margin: 0 0 32px; }
.kl-room__eyebrow {
  margin: 0 0 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.28em;
  color: hsl(var(--foreground) / 0.78);
}
/* the ledger's one deliberate resting gold — the same 40px printer's rule
   that opens the band on the page opens the room */
.kl-room__eyebrow::before {
  content: ""; display: block;
  inline-size: 40px; block-size: 1px; margin-block-end: 14px;
  background: var(--color-accent);
}
.kl-room__line {
  margin: 0; font-family: var(--font-display, 'Instrument Serif', serif);
  font-weight: 400; font-size: clamp(27px, 2vw + 15px, 42px);
  line-height: 1.12; letter-spacing: -0.015em;
  color: hsl(var(--foreground) / 0.94);
}
/* the floor: the grid's card anatomy at room density — the teaser and the
   RUNS chip rest (the viewer holds the depth, one press away), the
   category line holds to one line, the title steps down one size */
.kl-room__floor .kl-row { gap: 40px 32px; }
.kl-room__floor .kl-row + .kl-row { margin-top: 44px; }
.kl-room__floor .kl-card__teaser,
.kl-room__floor .kl-card__runs { display: none; }
/* the category line WRAPS (judged pre-ship fix, 07-28: "PRODUCTS &
   INDUSTRIAL ..." ellipsized on phone) — print never truncates. Two lines
   cost less than a cut word, in Arabic as in English. */
.kl-room__floor .kl-card__cat {
  margin-top: 14px;
  overflow-wrap: anywhere; min-width: 0;
}
.kl-room__floor .kl-card__title { font-size: 1.125rem; }
.kl-room__floor .kl-card__open { margin-top: 8px; }
.kl-room__out { margin-top: 56px; }
/* phones keep TWO ACROSS (the page grid's single column would put one
   card per screen — a room must read as a floor, not a corridor) */
@media (max-width: 1023px) {
  .kl-room__floor .kl-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }
  .kl-room__floor .kl-row + .kl-row { margin-top: 36px; }
  /* ROW-EVENNESS LAW (judged pre-ship fix, 07-28): an 11-piece trail at
     two across strands one card alone in its row — the widow takes the
     full width instead, so every row composes. Odd-positioned last child
     of a row = the widow (rows chunk at 3 or 4). */
  .kl-room__floor .kl-row .kl-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  /* THE POSTER OPENING (steal from A, 07-28): on phone the trail's FIRST
     piece takes the full width — the room opens on one poster, then the
     floor drops to two across. */
  .kl-room__floor .kl-row:first-child .kl-card:first-child { grid-column: 1 / -1; }
  /* the poster flips the first row's parity: its widow is the EVEN
     last child now, and the odd rule above stands down (a lone first
     card keeps its full width either way) */
  .kl-room__floor .kl-row:first-child .kl-card:last-child:nth-child(odd):not(:first-child) { grid-column: auto; }
  .kl-room__floor .kl-row:first-child .kl-card:last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .kl-room__inner { padding: 20px 16px 56px; }
  .kl-room__head { margin-bottom: 24px; }
  .kl-room__floor .kl-row { gap: 28px 14px; }
  .kl-room__floor .kl-row + .kl-row { margin-top: 30px; }
  .kl-room__floor .kl-card__cat { font-size: 9px; letter-spacing: 0.2em; margin-top: 12px; }
  .kl-room__floor .kl-card__title { font-size: 1rem; overflow-wrap: anywhere; min-width: 0; }
  .kl-room__floor .kl-card__open { font-size: 0.6875rem; }
  .kl-room__line { font-size: clamp(23px, 7vw, 28px); overflow-wrap: anywhere; }
  .kl-room__out { margin-top: 40px; }
  /* the chrome's close is a full thumb target, the viewer's own law */
  .kl-room__chrome { padding-inline: 16px; }
  .kl-room__chrome .kl-v-x { width: 44px; height: 44px; }
  /* READ THE BRIEF keeps its arrow on the line — a two-line micro-button
     read as a typo at 320 */
  .kl-room__floor .kl-card__open { white-space: nowrap; letter-spacing: 0.18em; }
}
@media (max-width: 359px) {
  .kl-room__floor .kl-card__open { font-size: 0.625rem; letter-spacing: 0.14em; }
  .kl-room__floor .kl-card__cat { font-size: 8.5px; }
}
/* the Arabic letter: the sentence falls to the dignified naskh stack (the
   i18n sheet's inline-style hook cannot see a class-carried serif), and
   the wide caps-tracking comes off the mono rows */
html[lang="ar"] .kl-room__line {
  font-family: "Instrument Serif", "Noto Naskh Arabic", "Geeza Pro",
    "Sakkal Majalla", "Traditional Arabic", "Times New Roman", serif !important;
}
html[lang="ar"] .kl-room__eyebrow,
html[lang="ar"] .kl-room__all { letter-spacing: 0.02em; }
/* the mirror: the back arrow points along the reading direction (the
   band's own .kl-want__all-arr rule carries the glyph flip); the room's
   text blocks align to their start edge via the card rules it reuses */
/* the suite index carries the chrome's auto margin now (logical, so it
   mirrors itself); the × keeps no auto margin of its own in the room */
[dir="rtl"] .kl-room__chrome .kl-v-x { margin-left: 0; margin-right: 0; }