/* Kordi homepage — cut-paper direction.
 * Ground: paper. Ink: warm near-black. Morandi = identity only. */

/* ---------- reset + display face ---------- */
/* Marcellus — SIL Open Font License 1.1, see assets/fonts/OFL-Marcellus.txt.
       Subset to latin; the display face only ever needs one weight. */
    @font-face {
      font-family: Marcellus;
      src: url(assets/fonts/marcellus-latin.woff2) format("woff2");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body { margin: 0; }
    img, svg { display: block; max-width: 100%; }
    button { font: inherit; color: inherit; }
    h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

/* ---------- felt doll cuts ---------- */
:root {
    --brand-mark: url(assets/kordi-logo-white-transparent.png?v=2);
    --doll-spiky: url(assets/spiky.png?v=3);
    --doll-curly: url(assets/curly.png?v=3);
    --doll-tuft: url(assets/tuft.png);
    --doll-bob: url(assets/bob.png?v=3);
    --doll-cho-agent: url(assets/cho-agent.png?v=3);
    --doll-pedro-agent: url(assets/pedro-agent.png?v=3);
    --doll-shu-agent: url(assets/shu-agent.png?v=3);
    --doll-cloud: url(assets/cloud.png);
  }

/* ============================================================
     Kordi homepage — cut-paper direction
     Ground: paper. Ink: warm near-black. Morandi = identity only.
     Few words; the paper chain and the app window do the talking.
     ============================================================ */

  :root {
    --paper:      #FAF9F7;
    --paper-2:    #F1EEE8;
    --paper-edge: #E4DFD6;
    --ink:        #1A1714;
    --ink-2:      #5C554D;
    --ink-3:      #9A9289;
    --rule:       rgba(26, 23, 20, 0.13);
    --rule-soft:  rgba(26, 23, 20, 0.07);
    --lift:       rgba(26, 23, 20, 0.10);
    --lift-deep:  rgba(26, 23, 20, 0.18);
    --grain:      0.05;
    --grain-blend: multiply;

    --id-violet:  #8A82A6;
    --id-blue:    #78909F;
    --id-clay:    #AE8C7E;

    /* felt dolls rest untinted on light paper; dark theme keeps the tint
     * layer on so the same cuts read as cream paper on black */
    --doll-tint-rest: 0;

    --font-display: Marcellus, Optima, Candara, "Gill Sans Nova", "Gill Sans", system-ui, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --shell: 1600px;
    --step: clamp(6rem, 13vh, 10rem);

    /* just enough to take the edge off — the cut-paper surfaces stay square */
    --radius: 6px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fast: 180ms;
    --base: 280ms;
    --slow: 520ms;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --paper:      #191814;
      --paper-2:    #211F1A;
      --paper-edge: #2E2B25;
      --ink:        #F2EFE9;
      --ink-2:      #A8A199;
      --ink-3:      #6E6860;
      --rule:       rgba(242, 239, 233, 0.15);
      --rule-soft:  rgba(242, 239, 233, 0.08);
      --lift:       rgba(0, 0, 0, 0.40);
      --lift-deep:  rgba(0, 0, 0, 0.58);
      --grain:      0.07;
      --grain-blend: screen;

      --id-violet:  #A79EC4;
      --id-blue:    #93A7B8;
      --id-clay:    #C7A493;
      --doll-tint-rest: 1;
    }
  }

  :root[data-theme="dark"] {
    --paper:      #191814;
    --paper-2:    #211F1A;
    --paper-edge: #2E2B25;
    --ink:        #F2EFE9;
    --ink-2:      #A8A199;
    --ink-3:      #6E6860;
    --rule:       rgba(242, 239, 233, 0.15);
    --rule-soft:  rgba(242, 239, 233, 0.08);
    --lift:       rgba(0, 0, 0, 0.40);
    --lift-deep:  rgba(0, 0, 0, 0.58);
    --grain:      0.07;
    --grain-blend: screen;

    --id-violet:  #A79EC4;
    --id-blue:    #93A7B8;
    --id-clay:    #C7A493;
    --doll-tint-rest: 1;
  }

  :root[data-theme="light"] {
    --paper:      #FAF9F7;
    --paper-2:    #F1EEE8;
    --paper-edge: #E4DFD6;
    --ink:        #1A1714;
    --ink-2:      #5C554D;
    --ink-3:      #9A9289;
    --rule:       rgba(26, 23, 20, 0.13);
    --rule-soft:  rgba(26, 23, 20, 0.07);
    --lift:       rgba(26, 23, 20, 0.10);
    --lift-deep:  rgba(26, 23, 20, 0.18);
    --grain:      0.05;
    --grain-blend: multiply;

    --id-violet:  #8A82A6;
    --id-blue:    #78909F;
    --id-clay:    #AE8C7E;
    --doll-tint-rest: 0;
  }

  /* ---------- base ---------- */

  .kd {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: clip;
  }

  .kd *:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .kd-grain {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--grain);
    mix-blend-mode: var(--grain-blend);
  }

  .kd-wrap {
    position: relative;
    z-index: 1;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 4rem);
  }

  /* The homepage uses a quieter, more editorial page gutter. Showcase cards
   * keep their own measured outer width and internal app-window geometry. */
  .kd-home .kd-wrap:not(.kd-showcase) {
    padding-inline: clamp(1.5rem, 6.5vw, 6rem);
  }

  @media (max-width: 900px) {
    .kd-home .kd-wrap:not(.kd-showcase) {
      padding-inline: clamp(1.25rem, 5vw, 4rem);
    }
  }

  .kd h1, .kd h2, .kd h3 {
    font-family: var(--font-display);
    font-weight: 400;
    text-wrap: balance;
    margin: 0;
  }

  .kd h1 {
    font-size: clamp(1.35rem, 3vw, 2.3rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
  }

  .kd h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  .kd p { margin: 0; }

  /* ---------- nav ---------- */

  .kd-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--rule-soft);
  }

  .kd-nav-inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 4vw, 2.75rem);
    height: 68px;
  }

  .kd-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--ink);
    margin-right: auto;
  }

  /* The supplied white-on-transparent mark is used as a mask so it follows
   * the page ink in both themes. Its source canvas includes transparent trim. */
  .kd-brand-mark {
    width: 38px;
    height: 42px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--brand-mark) center / 162% no-repeat;
    mask: var(--brand-mark) center / 162% no-repeat;
  }

  .kd-brand-word {
    font-family: var(--font-display);
    font-size: 1.55rem;
    letter-spacing: -0.01em;
  }

  .kd-nav-links {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2.4vw, 1.9rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .kd-nav-links a {
    font-size: 0.9375rem;
    color: var(--ink-2);
    text-decoration: none;
    padding: 0.35rem 0;
    border-bottom: 1px solid transparent;
    transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  }

  .kd-nav-links a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
  }

  .kd-nav-cta { display: flex; align-items: center; gap: 0.75rem; }

  /* the nav is sticky, so an anchored section has to clear it or it lands
   * underneath; and Learn more should glide rather than teleport */
  .kd [id] { scroll-margin-top: 92px; }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  @media (max-width: 860px) {
    .kd-nav-links { display: none; }
  }

  /* ---------- nav dropdown ---------- */

  .kd-menu { position: relative; }

  .kd-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transform: translateY(1px);
    background: none;
    border: 0;
    padding: 0.35rem 0;
    font-size: 0.9375rem;
    color: var(--ink-2);
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  }

  .kd-menu-btn:hover,
  .kd-menu-btn[aria-expanded="true"] { color: var(--ink); }

  .kd-menu-btn svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
    transition: transform var(--fast) var(--ease);
  }

  .kd-menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

  .kd-menu-panel {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    translate: -50% 0;
    min-width: 184px;
    display: grid;
    padding: 0.4rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: 0 18px 36px -22px var(--lift-deep);
    opacity: 0;
    transform: translateY(-5px);
    pointer-events: none;
    transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
  }

  .kd-menu-panel a {
    padding: 0.5rem 0.65rem;
    font-size: 0.9375rem;
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 0;
  }

  .kd-menu-panel a:hover { background: var(--paper-2); color: var(--ink); }

  /* Pages that are planned but not written. They read exactly like their
   * neighbours — a dimmed entry in a link column looks like a bug, not a
   * signal — but they carry no href, so nothing promises a destination that
   * isn't there. Only hover tells them apart. Swap the span for an <a> to
   * ship one. */
  .kd-soon {
    font-size: 0.9375rem;
    color: var(--ink-2);
    cursor: default;
  }

  .kd-menu-soon { padding: 0.5rem 0.65rem; }

  .kd-menu[data-open] .kd-menu-panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* ---------- standalone page header ---------- */

  /* the standalone pages are a title over a pair of cards, so they centre —
   * the home page stays left-aligned, where the chain sets the axis */
  .kd-page-head {
    padding-top: clamp(3.5rem, 9vh, 6rem);
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
    display: grid;
    gap: 1.1rem;
    justify-items: center;
    text-align: center;
  }

  .kd-page-head h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); }
  .kd-page-head p { color: var(--ink-2); font-size: 1.0625rem; max-width: 54ch; }

  /* Research follows a publication index rather than the paired-card layout:
   * one full-width row per piece, with a quiet metadata line above it. */
  .kd-page-head--research {
    display: block;
    text-align: left;
  }

  .kd-research-head-inner,
  .kd-research-list {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
  }

  .kd-research-head-inner { display: grid; gap: 1.1rem; }
  .kd-page-head--research p { max-width: 640px; }

  .kd-research-section { padding-bottom: var(--step); }

  .kd-research-list {
    display: grid;
    gap: 1.25rem;
  }

  .kd-research-row {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper);
    padding: clamp(1.75rem, 4vw, 2.5rem);
    box-shadow: 0 24px 60px -48px var(--lift-deep);
    transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  }

  .kd-research-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 30px 70px -46px var(--lift-deep);
  }

  .kd-research-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.15rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--ink-3);
  }

  .kd-research-kind {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: 0.18rem 0.65rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-2);
    color: var(--ink-2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .kd-research-row h2 {
    max-width: 34ch;
    font-size: clamp(1.45rem, 2.7vw, 1.85rem);
    line-height: 1.25;
  }

  .kd-research-row h2 a {
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  .kd-research-row h2 a:hover { text-decoration: underline; }

  .kd-research-authors {
    max-width: 82ch;
    margin-top: 1rem;
    color: var(--ink-2);
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  .kd-research-authors sup,
  .kd-research-affiliations sup {
    font-size: 0.68em;
    line-height: 0;
  }

  .kd-research-affiliations {
    margin-top: 0.25rem;
    color: var(--ink-3);
    font-size: 0.75rem;
    line-height: 1.7;
  }

  .kd-research-summary {
    max-width: 76ch;
    margin-top: 1.25rem;
    color: var(--ink-2);
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  .kd-research-venue {
    margin-top: 0.75rem;
    color: var(--ink-3);
    font-size: 0.8125rem;
    font-style: italic;
  }

  .kd-research-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .kd-research-actions .kd-btn { font-size: 0.8125rem; }

  @media (max-width: 520px) {
    .kd-research-actions { display: grid; }
    .kd-research-actions .kd-btn { justify-content: center; }
  }

  /* ---------- about ---------- */

  .kd-about-inner {
    max-width: 880px;
    margin: 0 auto;
  }

  .kd-about-hero {
    padding-top: clamp(3.5rem, 9vh, 6rem);
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
  }

  .kd-about-hero h1 {
    max-width: 16ch;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
  }

  .kd-about-hero p {
    max-width: 780px;
    margin-top: 1.5rem;
    color: var(--ink-2);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.75;
  }

  .kd-about-section {
    padding-top: clamp(2.5rem, 6vh, 4.5rem);
    padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  }

  .kd-about-section h2,
  .kd-about-team-section h2 {
    max-width: 24ch;
    font-size: clamp(1.75rem, 3.2vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .kd-about-lede {
    max-width: 680px;
    margin-top: 1.25rem;
    color: var(--ink-2);
    font-size: 0.9875rem;
    line-height: 1.75;
  }

  .kd-about-principles {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    margin-top: clamp(2.25rem, 5vw, 3.5rem);
  }

  .kd-about-principles h3 {
    font-size: 1.05rem;
    line-height: 1.35;
    letter-spacing: -0.005em;
  }

  .kd-about-principles p {
    margin-top: 0.7rem;
    color: var(--ink-2);
    font-size: 0.85rem;
    line-height: 1.7;
  }

  .kd-about-institutions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: clamp(1.25rem, 4vw, 2rem);
    row-gap: 1.75rem;
    max-width: 820px;
    margin-top: clamp(2.25rem, 5vw, 3.5rem);
  }

  .kd-about-institution {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
  }

  .kd-about-logo {
    width: auto;
    object-fit: contain;
    object-position: center;
    filter: grayscale(1);
  }

  .kd-about-logo--uta { width: 150px; height: 64px; filter: grayscale(1) brightness(0); }
  .kd-about-logo--stanford { width: 166px; height: 48px; }
  .kd-about-logo--del { width: 105px; height: 64px; }
  .kd-about-logo--kaust { width: 174px; height: 56px; filter: grayscale(1) invert(1); }

  .kd-about-team-section {
    padding-top: clamp(2.5rem, 6vh, 4.5rem);
    padding-bottom: var(--step);
  }

  .kd-about-team {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4vw, 2rem);
    row-gap: 2rem;
    margin-top: clamp(2rem, 4vw, 3rem);
  }

  .kd-about-team a,
  .kd-about-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.005em;
    text-decoration: none;
  }

  .kd-about-team a span {
    opacity: 0.45;
    transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
  }

  .kd-about-team a:hover span {
    opacity: 1;
    transform: translate(2px, -2px);
  }

  .kd-about-role {
    margin-top: 6px;
    color: var(--ink-2);
    font-size: 12.5px;
  }

  .kd-about-affiliation {
    margin-top: 4px;
    color: var(--ink-2);
    font-size: 12px;
    line-height: 1.5;
  }

  @media (prefers-color-scheme: dark) {
    .kd-about-logo { filter: grayscale(1) invert(1); }
    .kd-about-logo--uta { filter: grayscale(1) brightness(0) invert(1); }
    .kd-about-logo--kaust { filter: grayscale(1); }
  }

  :root[data-theme="dark"] .kd-about-logo { filter: grayscale(1) invert(1); }
  :root[data-theme="dark"] .kd-about-logo--uta { filter: grayscale(1) brightness(0) invert(1); }
  :root[data-theme="dark"] .kd-about-logo--kaust { filter: grayscale(1); }

  @media (min-width: 640px) {
    .kd-about-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .kd-about-institutions {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: 20px;
      margin-left: -10px;
    }

    .kd-about-institution { height: 88px; }
    .kd-about-logo--uta { width: 170px; height: 72px; }
    .kd-about-logo--stanford { width: 180px; height: 56px; }
    .kd-about-logo--del { width: 116px; height: 72px; }
    .kd-about-logo--kaust { width: 185px; height: 64px; }

    .kd-about-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* ---------- buttons ---------- */

  .kd-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.68rem 1.25rem;
    text-decoration: none;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
    transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
    box-shadow: 0 1px 0 var(--lift);
  }

  .kd-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -6px var(--lift-deep);
  }

  .kd-btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
  .kd-btn--ghost:hover { border-color: var(--ink); }

  .kd-btn svg {
    width: 9px;
    height: 9px;
    fill: currentColor;
    transition: transform var(--fast) var(--ease);
  }

  .kd-btn:hover svg { transform: translateY(2px); }
  .kd-btn--sm { padding: 0.45rem 0.9rem; font-size: 0.875rem; }

  /* ---------- beta application dialog ---------- */

  .kd-beta-dialog {
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    box-shadow: 0 24px 80px var(--lift-deep);
  }

  .kd-beta-dialog::backdrop {
    background: rgba(10, 9, 8, 0.72);
    backdrop-filter: blur(6px);
  }

  .kd-beta-card {
    position: relative;
    display: grid;
    gap: 0.8rem;
    padding: clamp(1.5rem, 5vw, 2.5rem);
    background: var(--paper);
  }

  .kd-beta-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-2);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }

  .kd-beta-close:hover { border-color: var(--rule); color: var(--ink); }

  .kd-beta-eyebrow {
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .kd-beta-dialog h2 { padding-right: 2.5rem; font-size: clamp(1.7rem, 5vw, 2.25rem); }

  .kd-beta-intro { color: var(--ink-2); }

  .kd-beta-form {
    display: grid;
    gap: 1rem;
    margin-top: 0.7rem;
  }

  .kd-beta-field { display: grid; gap: 0.4rem; }

  .kd-beta-field > span {
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 500;
  }

  .kd-beta-field em {
    display: block;
    margin-top: 0.15rem;
    color: var(--ink-3);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
  }

  .kd-beta-field input {
    width: 100%;
    min-height: 46px;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper-2);
    color: var(--ink);
    font: inherit;
  }

  .kd-beta-field input:hover { border-color: var(--ink-3); }
  .kd-beta-field input:focus { border-color: var(--ink); }

  .kd-beta-note {
    color: var(--ink-3);
    font-size: 0.75rem;
    line-height: 1.5;
  }

  .kd-beta-note a { color: inherit; text-decoration-thickness: 1px; }

  .kd-beta-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .kd-beta-status {
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    color: var(--ink-2);
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .kd-beta-status[hidden] { display: none; }
  .kd-beta-status[data-state="error"] { color: #b45c53; }
  .kd-beta-actions .kd-btn:disabled { opacity: 0.62; cursor: wait; }

  .kd-beta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.35rem;
  }

  @media (max-width: 520px) {
    .kd-beta-actions { display: grid; grid-template-columns: 1fr; }
    .kd-beta-actions .kd-btn { width: 100%; justify-content: center; }
  }

  /* ---------- hero ---------- */

  /* these sections are also .kd-wrap — only ever set the block padding here,
   * a `padding` shorthand would wipe out the shell's inline gutter */
  .kd-hero {
    padding-top: clamp(4rem, 10vh, 7rem);
    display: grid;
    gap: 2rem;
    justify-items: start;
  }

  /* the two beats are broken explicitly in the markup, so the invitation and
   * its shared-space promise do not re-wrap with the display face */
  .kd-hero h1 { text-wrap: initial; }

  .kd-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
  }

  /* ---------- the chain ---------- */

  .kd-stage {
    position: relative;
    z-index: 1;
    padding: 0 0 var(--step);
  }

  /* The chain is plain content while it fits, preserving native page momentum.
   * JavaScript adds the scroll class only when the rendered strip is wider than
   * this viewport; top padding keeps labels and bubbles inside that scroll box. */
  .kd-chain-scroll {
    padding-top: 176px;
  }

  .kd-chain-scroll.is-scrollable-x {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  /* the strip grows outward from the middle as participants are cut in.
   * `safe` keeps the left end reachable once it outgrows the viewport —
   * plain centring would clip both ends with no way to scroll back. */
  /* The rule is the ground the figures stand on, so it belongs to the strip
   * rather than to the column: the wrap centres a shrink-wrapped chain instead
   * of the chain filling the wrap. `safe` keeps the left end reachable once
   * the strip outgrows the viewport — plain centring would clip both ends. */
  .kd-chain-scroll .kd-wrap {
    display: flex;
    justify-content: center;
    justify-content: safe center;
  }

  .kd-chain {
    /* one doll unit; every figure width and hand overlap is a multiple of it */
    --doll-u: clamp(0.62px, 0.037vw + 0.45px, 0.94px);
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    padding: 0 clamp(1rem, 2.5vw, 2.5rem);
    border-bottom: 1px solid var(--rule);
    perspective: 1100px;
    perspective-origin: left center;
  }

  .kd-fig {
    position: relative;
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0;
    cursor: default;
    color: var(--ink);
    transition: transform var(--base) var(--ease), filter var(--base) var(--ease),
                color var(--base) var(--ease);
    transform-origin: 50% 100%;
  }

  .kd-fig--person { cursor: pointer; }
  .kd-chain:not([data-state="ready"]) .kd-fig--person { cursor: default; }

  /* ---- the felt cut itself: authored raster + a masked tint layer.
     The felt PNG is near-black; the tint screens currentColor over it, so
     colour is one system everywhere: ink at rest (tint off on light paper,
     cream-on in the dark theme), identity hue when lit. Faces are punched
     through to the paper. ---- */

  .kd-doll {
    position: relative;
    display: block;
    isolation: isolate;
  }

  .kd-doll::before,
  .kd-doll::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .kd-doll::before {
    background: var(--doll) center / 100% 100% no-repeat;
  }

  .kd-doll::after {
    background-color: currentColor;
    -webkit-mask: var(--doll) center / 100% 100% no-repeat;
    mask: var(--doll) center / 100% 100% no-repeat;
    mix-blend-mode: screen;
    opacity: var(--doll-tint-rest);
    transition: opacity var(--base) var(--ease),
                background-color var(--base) var(--ease);
  }

  .kd-chain[data-state="ready"] .kd-fig--person:hover,
  .kd-chain[data-state="ready"] .kd-fig--person:focus-visible {
    transform: translateY(-10px) rotate(var(--tilt, -1deg));
    filter: drop-shadow(0 14px 18px var(--lift));
    color: var(--id);
    z-index: 3;
  }

  .kd-chain[data-state="ready"] .kd-fig--person:hover .kd-doll::after,
  .kd-chain[data-state="ready"] .kd-fig--person:focus-visible .kd-doll::after {
    opacity: 1;
  }

  .kd-chain[data-state="ready"] .kd-fig--person:hover .kd-fig-label-name,
  .kd-chain[data-state="ready"] .kd-fig--person:focus-visible .kd-fig-label-name {
    color: var(--id);
  }

  .kd-fig.is-speaking {
    color: var(--id);
    z-index: 7;
  }

  .kd-fig.is-speaking .kd-doll::after { opacity: 1; }
  .kd-fig.is-speaking .kd-fig-label { opacity: 0.35; }

  .kd-fig.is-folded {
    visibility: hidden;
    transform: rotateY(-180deg);
    transform-origin: left center;
  }

  @keyframes kd-unfold-right {
    0% {
      opacity: 0.08;
      transform: rotateY(-180deg);
      filter: brightness(0.52);
    }
    55% {
      opacity: 0.82;
      filter: brightness(0.78);
    }
    100% {
      opacity: 1;
      transform: rotateY(0deg);
      filter: brightness(1);
    }
  }

  .kd-fig.is-unfolding {
    transform-origin: left center;
    animation: kd-unfold-right 780ms cubic-bezier(0.33, 1, 0.68, 1) both;
    will-change: transform, filter, opacity;
    z-index: 6;
  }

  @keyframes kd-unfold-label {
    0%, 74% { opacity: 0; }
    100% { opacity: 1; }
  }

  .kd-fig.is-unfolding .kd-fig-label {
    animation: kd-unfold-label 780ms ease-out both;
  }

  @keyframes kd-guide-hop {
    0%, 18%, 66%, 100% { transform: translateY(0); }
    42% { transform: translateY(-18px) rotate(-1deg); }
  }

  .kd-fig.is-guided { animation: kd-guide-hop 1s var(--ease) infinite; }

  .kd-fig-label {
    position: absolute;
    left: var(--doll-anchor-x, 50%);
    bottom: calc(100% + 14px);
    transform: translateX(-50%);
    min-width: 124px;
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    pointer-events: none;
    transition: opacity var(--fast) var(--ease), color var(--fast) var(--ease);
    z-index: 4;
  }

  .kd-fig-label-name {
    display: block;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  .kd-fig.is-speaking .kd-fig-label-name { color: var(--id); }

  /* Head-level chat bubbles keep the message attached to its sender. */
  .kd-bubble {
    position: absolute;
    left: var(--doll-anchor-x, 50%);
    bottom: calc(100% + 58px);
    transform: translateX(-50%);
    width: max-content;
    max-width: min(250px, 72vw);
    padding: 0.65rem 0.78rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: 0 12px 28px -18px var(--lift-deep);
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: left;
    pointer-events: none;
    z-index: 9;
    animation: kd-bubble-up var(--base) var(--ease) both;
  }

  @keyframes kd-bubble-up {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  .kd-bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 10px;
    height: 10px;
    background: var(--paper);
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    transform: translate(-50%, -5px) rotate(45deg);
  }

  .kd-bubble--reply { border-color: color-mix(in srgb, var(--id) 42%, var(--rule)); }

  .kd-bubble-speaker {
    display: inline;
    margin-right: 0.35rem;
    color: var(--id);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.08em;
  }

  .kd-bubble-message { display: inline; }

  .kd-bubble-mention,
  .kd-log-mention {
    color: var(--mention-color);
    background: color-mix(in srgb, var(--mention-color) 16%, transparent);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mention-color) 32%, transparent);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .kd-bubble-mention {
    display: inline;
    padding: 0.08rem 0.28rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    white-space: nowrap;
  }

  /* The compact transcript records joins and one bounded two-hop turn.
   * Its viewport is fixed so new rows never move the sections below the
   * opening chain; older rows simply leave through the clipped bottom edge. */
  .kd-log {
    width: min(100%, 760px);
    height: 11rem;
    margin: 1.5rem auto 0;
    display: grid;
    align-content: start;
    gap: 0.35rem;
    overflow: hidden;
  }

  .kd-log-row {
    position: relative;
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.22rem 0.65rem;
    border-left: 3px solid transparent;
    animation: kd-fade-up var(--base) var(--ease);
    transition: background-color var(--fast) var(--ease),
                border-color var(--fast) var(--ease),
                box-shadow var(--fast) var(--ease),
                opacity var(--base) var(--ease),
                filter var(--base) var(--ease);
  }

  .kd-log-row.is-latest {
    background: color-mix(in srgb, var(--turn-color) 18%, transparent);
    border-left-color: var(--turn-color);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--turn-color) 24%, transparent);
  }

  .kd-log-kind {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: var(--ink-3);
  }

  .kd-log-text {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--ink-2);
  }

  .kd-log-text b { font-weight: 500; color: var(--ink); }
  .kd-log-mention {
    padding: 0.06rem 0.3rem;
    white-space: nowrap;
  }

  .kd-log-row.is-latest .kd-log-kind {
    color: var(--turn-color);
    font-weight: 600;
  }

  .kd-log-row.is-latest .kd-log-text { color: var(--ink); }

  .kd-log-row:not(.is-latest) { opacity: 0.48; }

  .kd-log-row:not(.is-latest):nth-last-child(2) {
    opacity: 0.3;
    filter: blur(0.35px);
  }

  .kd-log-row:not(.is-latest):last-child {
    opacity: 0.16;
    filter: blur(0.8px);
  }

  @keyframes kd-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (max-width: 640px) {
    .kd-bubble { max-width: 220px; font-size: 0.7rem; }
    .kd-log-row { grid-template-columns: 2.8rem minmax(0, 1fr); gap: 0.5rem; }
  }

  /* ---------- product showcase: copy beside a real Kordi crop ----------
   * The <kordi-product-showcase> element owns everything inside its own
   * Shadow DOM. These rules only place it on the page — never reach in.
   */

  /* Each feature is one solid product card. The painting belongs only to the
   * visual bay; the explanatory copy always remains on an untextured surface. */
  .kd-showcase {
    width: min(calc(100% - clamp(3rem, 10vw, 8rem)), var(--shell));
    max-width: none;
    margin: clamp(2.5rem, 6vh, 4.75rem) auto;
    padding: clamp(1.4rem, 2.7vw, 2.5rem);
    display: grid;
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    background: var(--paper-2);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
  }

  /* Alternate which side the product sits on. The column widths have to swap
   * with the order — reordering alone drops the stage into the narrow copy
   * column and squeezes the product. */
  .kd-showcase.is-reversed {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  }

  .kd-showcase.is-reversed .kd-showcase-copy { order: 2; }

  .kd-showcase-visual {
    min-width: 0;
    min-height: 0;
    display: grid;
    align-items: center;
    padding: clamp(1rem, 2.4vw, 2.25rem);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--paper-edge) 70%, transparent);
    border-radius: calc(var(--radius) - 1px);
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .kd-showcase-visual--spaces {
    background-image: url(assets/showcase-monet-san-giorgio.jpg);
    background-position: 50% 50%;
  }

  .kd-showcase-visual--group {
    background-image: url(assets/showcase-monet-nervia.webp);
    background-position: 55% 34%;
  }

  .kd-showcase-visual--agent {
    background-image: url(assets/showcase-monet-le-havre.jpg);
    background-position: 78% 50%;
  }

  .kd-showcase-visual kordi-product-showcase {
    width: 100%;
    min-width: 0;
  }

  @media (max-width: 900px) {
    /* compact: copy, then product — never side by side */
    .kd-showcase,
    .kd-showcase.is-reversed { grid-template-columns: 1fr; }
    .kd-showcase.is-reversed .kd-showcase-copy { order: 0; }

    .kd-showcase-visual {
      padding: clamp(0.75rem, 3vw, 1.4rem);
    }

    .kd-showcase-visual--agent { background-position: 100% 50%; }
  }

  .kd-showcase-copy { display: grid; gap: 0.9rem; justify-items: start; }

  .kd-showcase-copy p { color: var(--ink-2); font-size: 1rem; max-width: 46ch; }

  .kd-textlink {
    font-size: 0.9375rem;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
    transition: border-color var(--fast) var(--ease);
  }

  .kd-textlink:hover { border-bottom-color: var(--ink); }

  /* ---------- the app window (fixed product-dark, like the real thing) ---------- */

  .kd-app {
    --dm-bg:     #0f1115;
    --dm-panel:  rgba(255, 255, 255, 0.04);
    --dm-line:   rgba(255, 255, 255, 0.07);
    --dm-text:   rgba(255, 255, 255, 0.9);
    --dm-mut:    rgba(255, 255, 255, 0.55);
    --dm-meta:   rgba(255, 255, 255, 0.32);
    --dm-violet: #A79EC4;
    --dm-blue:   #93A7B8;
    --dm-clay:   #C7A493;

    background: var(--dm-bg);
    border: 1px solid var(--rule);
    border-radius: 12px;
    box-shadow: 0 34px 70px -36px var(--lift-deep);
    overflow: hidden;
    font-size: 13px;
    line-height: 1.5;
    color: var(--dm-text);
    user-select: none;
  }

  .kd-app-bar {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    border-bottom: 1px solid var(--dm-line);
  }

  .kd-app-bar i {
    width: 11px; height: 11px; border-radius: 50%;
    margin-right: 7px;
    background: rgba(255, 255, 255, 0.16);
  }

  .kd-app-bar span {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: var(--dm-meta);
    /* offset the traffic lights so the title truly centers */
    margin-left: -54px;
  }

  .kd-app-body { display: flex; height: 396px; }

  .kd-app-list {
    width: 198px;
    flex: 0 0 auto;
    border-right: 1px solid var(--dm-line);
    padding: 10px 8px;
    display: grid;
    align-content: start;
    gap: 2px;
  }

  @media (max-width: 640px) {
    .kd-app-list { display: none; }
  }

  .kd-app-sess {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 8px;
    align-items: center;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--dm-mut);
  }

  .kd-app-sess.is-on { background: rgba(255, 255, 255, 0.06); color: var(--dm-text); }

  .kd-app-ava {
    width: 26px; height: 26px;
    display: grid;
    place-items: center;
    background: var(--c, var(--dm-blue));
    color: #0f1115;
    font-family: var(--font-mono);
    font-size: 10px;
    border-radius: 6px;
  }

  .kd-app-sess small {
    display: block;
    font-size: 10.5px;
    color: var(--dm-meta);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kd-app-chat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .kd-app-scroll {
    flex: 1;
    padding: 18px 18px 6px;
    display: grid;
    gap: 14px;
    align-content: start;
    overflow: hidden;
  }

  .kd-am {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    align-items: start;
  }

  .kd-am-who {
    font-size: 12px;
    font-weight: 550;
    display: flex;
    align-items: baseline;
    gap: 7px;
  }

  .kd-am-who small {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dm-meta);
    font-weight: 400;
  }

  .kd-am-text { color: var(--dm-mut); margin-top: 2px; max-width: 46ch; }

  .kd-at { color: var(--dm-text); font-weight: 550; border-bottom: 1.5px solid var(--dm-blue); padding-bottom: 1px; }

  /* staged elements: hidden until their step class lands on .kd-app */
  .kd-am--sent, .kd-app-join, .kd-am--reply {
    opacity: 0;
    transform: translateY(7px);
    transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
  }

  .kd-app.s4 .kd-am--sent,
  .kd-app.s5 .kd-app-join,
  .kd-app.s6 .kd-am--reply {
    opacity: 1;
    transform: none;
  }

  .kd-app-join {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin: 2px 0;
  }

  .kd-app-join::before,
  .kd-app-join::after { content: ""; border-top: 1px dashed var(--dm-line); }

  .kd-app-join span {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--dm-meta);
    text-align: center;
  }

  /* thinking dots swap for the reply text */
  .kd-am-think { display: flex; gap: 4px; padding: 6px 0 2px; }

  .kd-am-think i {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--dm-meta);
    animation: kd-think 1s ease-in-out infinite;
  }

  .kd-am-think i:nth-child(2) { animation-delay: 0.16s; }
  .kd-am-think i:nth-child(3) { animation-delay: 0.32s; }

  @keyframes kd-think {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.9; }
  }

  .kd-app.s7 .kd-am-think { display: none; }
  .kd-am--reply .kd-am-text { display: none; }
  .kd-app.s7 .kd-am--reply .kd-am-text { display: block; }

  /* composer + mention menu */
  .kd-app-composer {
    position: relative;
    margin: 10px 14px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px 12px;
    min-height: 40px;
    display: flex;
    align-items: center;
    color: var(--dm-mut);
  }

  .kd-app-type:empty::before { content: "Message Release 0.4"; color: var(--dm-meta); }

  .kd-app-type .kd-at { border-bottom-width: 1px; }

  .kd-caret {
    width: 1px; height: 15px;
    background: var(--dm-text);
    margin-left: 2px;
    animation: kd-caret 1.05s steps(1) infinite;
  }

  @keyframes kd-caret { 50% { opacity: 0; } }

  .kd-app-menu {
    position: absolute;
    left: 10px;
    bottom: calc(100% + 8px);
    min-width: 240px;
    background: #14171d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 6px 0;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
    opacity: 0;
    transform: translateY(5px);
    pointer-events: none;
    transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
  }

  .kd-app.s2:not(.s3) .kd-app-menu { opacity: 1; transform: none; }

  .kd-app-menu-group {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dm-meta);
    padding: 6px 12px 3px;
  }

  .kd-app-menu-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    color: var(--dm-mut);
  }

  .kd-app-menu-row .kd-dot { width: 7px; height: 7px; background: var(--c); flex: 0 0 auto; }

  .kd-app-menu-row em {
    font-style: normal;
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--dm-meta);
  }

  .kd-app-menu-row.is-hi { background: rgba(147, 167, 184, 0.14); color: var(--dm-text); }
  .kd-app.s2b .kd-app-menu-row.is-hi { background: none; color: var(--dm-mut); }
  .kd-app.s2b .kd-app-menu-row[data-hi2] { background: rgba(147, 167, 184, 0.14); color: var(--dm-text); }

  /* ---------- editions ---------- */

  .kd-panelsec { padding-bottom: var(--step); }

  /* the cards hold a short list each — the wide shell would stretch them hollow */
  .kd-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
    max-width: 1320px;
    margin: 0 auto;
  }

  @media (max-width: 960px) {
    .kd-panels { grid-template-columns: 1fr; max-width: 640px; }
  }

  /* a flex column so the cards stay the same height and the buttons sit
   * on one baseline even when the feature lists are different lengths */
  .kd-panel {
    border: 1px solid var(--rule);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    background: var(--paper);
  }

  .kd-panel h3 { font-size: 1.15rem; }

  .kd-panel-lead {
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1;
  }

  .kd-panel-note {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: -0.5rem;
  }

  .kd-panel-copy {
    max-width: 34ch;
    color: var(--ink-2);
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  .kd-panel .kd-btn { margin-top: auto; }

  .kd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

  .kd-list li {
    display: grid;
    grid-template-columns: 9px 1fr;
    gap: 0.7rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink-2);
  }

  .kd-list li::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--ink-3);
    margin-top: 0.52rem;
  }

  /* ---------- closing ---------- */

  .kd-close {
    padding-bottom: clamp(2rem, 5vh, 3.5rem);
    display: grid;
    gap: 1.75rem;
    justify-items: center;
    text-align: center;
  }

  .kd-close h2 {
    width: min(100%, 1320px);
    margin: 0 auto;
    font-size: clamp(2rem, 4vw, 3rem);
  }

  /* ---------- footer ---------- */

  .kd-footer { border-top: 1px solid var(--rule-soft); padding: 3rem 0 4rem; }

  .kd-footer-inner {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  @media (max-width: 760px) {
    .kd-footer-inner { grid-template-columns: 1fr 1fr; }
  }

  .kd-footer h4 {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 0.9rem;
    font-weight: 400;
  }

  .kd-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
  .kd-footer a { color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; }
  .kd-footer a:hover { color: var(--ink); }

  .kd-footer .kd-colophon { font-size: 0.8125rem; color: var(--ink-3); max-width: 30ch; margin-top: 1.4rem; }

  .kd-footer .kd-copyright {
    margin-top: 0.65rem;
    color: var(--ink-3);
    font-size: 0.75rem;
    line-height: 1.6;
  }

  /* ---------- legal ---------- */

  .kd-legal-page { min-height: 100vh; }

  .kd-legal {
    max-width: 760px;
    padding-top: clamp(3rem, 8vh, 5rem);
    padding-bottom: clamp(4rem, 10vh, 7rem);
  }

  .kd-legal-brand {
    width: fit-content;
    margin-bottom: clamp(3rem, 7vh, 5rem);
  }

  .kd-legal-head { display: grid; gap: 1rem; }
  .kd-legal-head h1 { font-size: clamp(2.35rem, 5vw, 3.6rem); }
  .kd .kd-legal-updated { color: var(--ink-3); font-size: 0.8125rem; }

  .kd-legal-copy {
    display: grid;
    gap: 2.25rem;
    margin-top: 3rem;
  }

  .kd-legal-copy section { display: grid; gap: 0.85rem; }
  .kd-legal-copy h2 { font-size: 1.2rem; }

  .kd-legal-copy h3 {
    margin-top: 0.65rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .kd-legal-copy p,
  .kd-legal-copy li {
    color: var(--ink-2);
    font-size: 0.9375rem;
    line-height: 1.75;
  }

  .kd-legal-copy ul {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding-left: 1.25rem;
  }

  .kd-legal-copy a,
  .kd-legal-back {
    color: var(--ink);
    text-underline-offset: 0.2em;
  }

  .kd-legal-back {
    display: inline-flex;
    margin-top: 3.5rem;
    font-size: 0.875rem;
  }

  .kd-legal-copyright {
    margin-top: 0.8rem;
    color: var(--ink-3);
    font-size: 0.75rem;
    line-height: 1.6;
  }

  @media (prefers-reduced-motion: reduce) {
    .kd *,
    .kd *::before,
    .kd *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }