/* ══ Kit: the shared parts of the 2026-10 redesign ═══════════════════════
   Every redesigned section builds from these. Page stylesheets add only what
   is particular to a section. Light sections also carry .sec-light so the nav
   turns light over them (components.js reads that class).

   Rules the design follows, so new sections keep to them:
   - No eyebrows: no small capitals above a headline or inside a card.
   - Two-tone headlines (.k-tt): the claim in full colour, the proof muted.
   - One object or one photograph per canvas; the words sit underneath (.k-cap).
   - Icons come from /images/icons.svg (Phosphor, MIT), large, with no box.
   - Callouts are solid tints with no coloured edge; tags are text, not pills. */

.k-ctn{width:100%;max-width:1248px;margin:0 auto;padding:0 24px}
.k-sec{position:relative}
.k-dark{background:var(--bg);color:var(--w)}
.k-light{background:var(--lt);color:var(--ltt)}
/* every section keeps the site's rounded corners (28px, 20px on phones) */
.k-dark,.k-light{border-radius:28px}
.k-sp{padding:clamp(88px,11vw,140px) 0}

/* two-tone headline: the claim, then the proof in a muted tone, one size */
.k-tt{font-family:var(--fd);font-weight:500;font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.034em;max-width:930px;color:var(--w);text-wrap:pretty}
.k-tt span{color:#77736c}
.k-light .k-tt{color:var(--ltt)}
.k-light .k-tt span{color:#8c887f}
.k-tt.lg{font-size:clamp(34px,5vw,60px);letter-spacing:-.04em}
.k-tt b{font-weight:500;color:var(--c)}
.k-light .k-tt b{color:var(--c-on-lt)}
.k-h1{font-family:var(--fd);font-weight:500;font-size:clamp(44px,7vw,88px);line-height:.98;letter-spacing:-.048em;color:var(--w);text-wrap:balance}
.k-light .k-h1{color:var(--ltt)}
.k-h1 b{font-weight:500;color:var(--c)}
.k-light .k-h1 b{color:var(--c-on-lt)}
.k-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;letter-spacing:-.012em;color:var(--w2)}
.k-light .k-lead{color:#5e5b55}
.k-p{font-size:16px;line-height:1.65;color:var(--w2)}
.k-light .k-p{color:#5e5b55}

/* links and buttons */
.k-link{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;color:var(--c)}
.k-light .k-link{color:var(--c-on-lt)}
.k-link svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.k-link:hover svg{transform:translateX(3px)}
.k-btns{display:flex;flex-wrap:wrap;gap:12px}
.k-light .pill-o{color:var(--ltt);background:rgba(17,17,17,.03);border-color:rgba(17,17,17,.14)}
.k-light .pill-o:hover{color:var(--ltt);background:rgba(17,17,17,.06);border-color:rgba(17,17,17,.22)}

/* a canvas with one object or photograph on it, and the words underneath */
.k-feat{position:relative;margin:0;display:flex;flex-direction:column}
.k-cv{position:relative;border-radius:24px;overflow:hidden;background:radial-gradient(130% 100% at 28% 0%,#18181c 0%,#111114 48%,#0c0c0e 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.k-light .k-cv{background:radial-gradient(130% 100% at 28% 0%,#f1eee8 0%,#ebe7df 55%,#e5e1d8 100%);box-shadow:inset 0 0 0 1px rgba(17,17,17,.035)}
.k-cv>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.k-cap{margin-top:20px;font-size:18px;line-height:1.42;letter-spacing:-.014em;color:#7a766f;max-width:95%}
.k-cap b{font-weight:500;color:var(--w)}
.k-light .k-cap{color:#77736c}
.k-light .k-cap b{color:var(--ltt)}

/* cards */
.k-card{position:relative;border-radius:24px;background:var(--s1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.075)}
.k-light .k-card{background:#fff;box-shadow:inset 0 0 0 1px rgba(17,17,17,.06)}

/* an icon from the sprite, drawn large with nothing behind it */
/* (duotone icons draw their second tone in the same colour at 20%: rules cannot reach inside <use>) */
.k-gi{display:block;width:44px;height:44px;flex:none;color:currentColor}

/* a dark panel holding a real artifact: code, a workbook, a list */
.k-pn{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#16161a,#101013);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.06),0 34px 60px -24px rgba(0,0,0,.9);
  font-family:var(--m);font-size:13.5px;line-height:2;color:#d6d3cc;font-variant-ligatures:none}
.k-pn .k-ph{display:flex;align-items:center;gap:10px;height:40px;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px;color:#77736c}
.k-pn .k-ph i{width:7px;height:7px;border-radius:50%;background:#3a3833}
.k-pn .k-bd{padding:14px 22px 0;white-space:pre;overflow:hidden}
.k-pn .k{color:#d9b46a}.k-pn .s{color:#a9bd92}.k-pn .f{color:#9fb7d4}.k-pn .mu{color:#66635d}

/* a ruled grid of cells with hairlines between them */
.k-rule{border-top:1px solid rgba(255,255,255,.1)}
.k-light .k-rule{border-top-color:rgba(17,17,17,.1)}

/* reveal on scroll: .rv is handled by marketing.js; keep the stagger here */
.rv[style*="--d"]{transition-delay:var(--d)}

/* text only screen readers hear */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:640px){
  .k-dark,.k-light{border-radius:20px}
  .k-cap{font-size:17px}
  .k-pn{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .k-feat *,.k-cv,.k-pn{transition:none!important;animation:none!important}
}