/*
  Homepage K · the page's own layer, over the sections (sections.css, generated). Tokens: /shared/adam-v1.css.
  - One type scale for every section (Tong, 7 Oct: "the font should be more consistent"): one display weight, one H2,
    one lead, one mono label, one button.
  - Pink (Tong, 7 Oct): the primary CTA ("Try Adam") is pink with a black label, "Book a demo" solid black; the quieter words of a two-tone
    heading are pink, not grey ("black and white contrast could be black and pink"); the [ 01 / 06 ] index is pink.
    The pink roles are Brand's tokens (--cta-bg, --mark …), so ?accent=klein (adam-v1.css) turns them Klein blue.
  Everything here is .k-page-prefixed, so it wins over the scoped study rules without !important.
*/
:root {
  --k-weight: 400;                                   /* one display weight, as the section studies are set (Figma) */
  --k-h1: clamp(48px, 7.8vw, 112px);
  --k-h2: clamp(39px, 4.45vw, 64px);
  --k-lead: clamp(18px, 1.53vw, 22px);
  --k-mark: var(--mark, var(--accent));
  --k-pad: clamp(16px, 5.5556vw, 80px);              /* the one container: 1280 px of content and 80 px gutters at 1440 */
}
body.k-page { margin: 0; background: var(--bg); color: var(--ink); overflow-x: clip; -webkit-font-smoothing: antialiased; }
.k-sec { position: relative; }
/* a section that names its colours (data-color, data-surface) sets its own ground and ink, so nothing inherits the body's */
.k-page :is([data-color], [data-surface]) { background-color: var(--bg); color: var(--ink); }
html[data-blog="off"] .k-blog { display: none; }
/* one use-case layout before the first paint: J by default, L1 with ?uc=list, L2's rows with ?uc=rows */
html:not([data-uc]) .k-use-cases :is(.uc, .rw), html[data-uc="list"] .k-use-cases :is(.ps, .rw), html[data-uc="rows"] .k-use-cases :is(.ps, .uc) { display: none; }

/* ---------------------------------------------------------------- one container (Tong, 7 Oct: "alignment issues")
   Every section sits on the Figma grid: 1280 px of content with 80 px gutters at 1440, the gutters easing down to 16 px
   on a phone. Each study's own container takes the page's gutter, so every left edge (logo, H1, the proof row, the
   [ 0n / 06 ] index, the H2s, the rows) and every right edge (the nav CTA, the rules, the figures) line up. */
.k-page .k-hero .hero, .k-page .k-security .sx, .k-page .k-blog .bl { --m: var(--k-pad); }
.k-page :is(.k-use-cases .ps, .k-use-cases .uc, .k-use-cases .rw, .k-integrations .ix, .k-faq .fq-wrap, .k-faq .fq-cols, .k-footer .ft-wrap) { padding-inline: var(--k-pad); }

/* ---------------------------------------------------------------- type: one scale */
/* the H1's longest word, "Mechanical", is 5.22 em at the H1's tracking: under 1440 the copy column can be narrower than
   that at the H1's size (1024: 407 px for 417), so the size also fits the column (.copy is the container) */
.k-page .k-hero .title {
  font-family: var(--font-display); font-weight: var(--k-weight); font-size: min(var(--k-h1), 100cqw / 5.25); line-height: var(--leading-display, .94); letter-spacing: var(--k-track-h1, -.03em);
}
.k-page :is(.uc-h2, .ps-h2, .rw-h2, .ix-h2, .bl-h2, .sx-h2) {
  font-family: var(--font-display); font-weight: var(--k-weight); font-size: var(--k-h2); line-height: var(--leading-display, 1); letter-spacing: var(--k-track-h2, -.025em);
}
.k-page .ft-title { font-family: var(--font-display); font-weight: var(--k-weight); letter-spacing: var(--k-track-h1, -.03em); }   /* the sign-off keeps its size */
.k-page .fq-big { font-family: var(--font-display); font-weight: var(--k-weight); }
.k-page :is(.ix-lead, .bl-lead, .sx-lead, .k-hero .lead) {
  font-family: var(--font-body); font-size: var(--k-lead); line-height: 1.4; letter-spacing: -.01em;
}
/* row titles and their descriptions */
.k-page :is(.uc-name, .ix-t, .bl-h3) { font-family: var(--font-display); font-weight: var(--k-weight); letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.k-page :is(.uc-ph b, .ps-desc) { text-wrap: balance; }
.k-page :is(.uc-desc, .ix-desc) { font-family: var(--font-body); font-size: 15px; line-height: 1.5; }
.k-page .uc-desc { color: var(--ink-2); }
/* the mono labels: section heads, numbers, captions, eyebrows */
.k-page :is(.uc-label, .ps-label, .rw-label, .uc-num, .uc-tag, .uc-cap, .ix-head, .ix-cap, .ix-n, .bl-head, .bl-k, .bl-all, .bl-read, .fq-label, .fq-n,
  .ft-head, .ft-cols, .ft-base, .sx-head, .k-hero .eyebrow, .k-hero .proof .n) {
  font-family: var(--font-mono); font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: .04em;
}
.k-page :is(.uc-label, .ps-label, .rw-label, .uc-num, .uc-tag, .uc-cap, .ix-head, .ix-cap, .bl-head, .bl-k, .fq-label, .ft-head, .sx-head) { text-transform: uppercase; }
/* every section head sits on a hairline (the use-case study's had none) */
/* every section head is one row: a hairline, 51 px, the index left and the label at a third (column 5 of 12) */
.k-page :is(.uc-head, .ps-head, .rw-head) { border-top: 1px solid var(--line); padding-top: 14px; min-height: 51px; }
.k-page :is(.ix-head, .bl-head) { height: auto; min-height: 51px; padding-top: 14px; align-items: start; }
@media (min-width: 768px) {
  .k-page .bl-head { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .k-page .bl-head > :nth-child(1) { grid-column: 1 / span 4; }
  .k-page .bl-head > :nth-child(2) { grid-column: 5 / span 8; text-align: left; }
  .k-page .bl-head > :nth-child(3) { display: none; }
}
/* Tong, 7 Oct: no gap between the hero's proof row and the first section. The proof cells close on the
   use cases' top rule, so their dividers run into it. */
.k-page .k-hero .proof { padding-bottom: 0; }
/* the H1's leading opened for Switzer (1.04, review b 3.1) makes the copy 34 px taller at 1440; the "Scroll to
   explore" row's minimum gap above gives it back, so the copy's bottom rule still meets the figure's bottom (4 px since
   the hero's sheet became 650 × 700 for its grid, 15 Oct: the figure is 23 px shorter at 1440) */
.k-page .k-hero .scroll { padding-top: 4px; }   /* (the label sits right, the buttons left: they never meet) */
.k-page .k-hero .proof li { padding-bottom: 18px; }
.k-page .k-use-cases > :is(.uc, .ps, .rw) { padding-top: 0; }
/* one section rhythm with every other page (site.css --sec-gap, --sec-head-gap; Tong, 15 Oct: "why so much space in
   between", 184 px where two bands' paddings met): no band adds space above its own head, each ends --sec-gap after
   its last content, and each head sits --sec-head-gap over its content. The black security band frames its head that
   head gap inside its top edge, and the blog's head sits as far below its bottom edge */
.k-page :is(.k-use-cases > :is(.uc, .ps, .rw), .k-integrations .ix, .k-blog .bl) { padding-bottom: var(--sec-gap); }
.k-page .k-integrations .ix { padding-top: 0; }
.k-page .k-faq .fq { --pt: 0px; --pb: var(--sec-gap); }
.k-page .k-security .sx-frame { --pt: var(--sec-head-gap); --pb: var(--sec-gap); }
.k-page .k-blog .bl:first-child { padding-top: var(--sec-head-gap); }
.k-page :is(.ps-intro, .uc-intro, .ix-grid, .bl-intro, .fq-body) { padding-top: var(--sec-head-gap); }
.k-page .k-security .sx-body { margin-top: var(--sec-head-gap); }
/* tablets (768–1023): the studies move their labels to a quarter or a half; keep them at a third with the rest */
@media (min-width: 768px) and (max-width: 1023px) {
  .k-page :is(.ix-head, .sx-head) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .k-page :is(.ix-head-n, .fq-label, .sx-head span:first-child) { grid-column: 1 / span 4; }
  .k-page :is(.ix-head-t, .fq-label-b, .sx-head span:last-child) { grid-column: 5 / span 8; }
}

/* ---------------------------------------------------------------- pink: the index, and the quieter words of a heading */
/* only the section's own number is pink, the brackets, slash and total the label grey (Tong's review 1.10; k.js and
   stamp.mjs write the number in .site-n-own, as site.css colours it on every page) */
.k-page .k-n { color: inherit; }   /* the label grey of its own head (--muted on the white bands, the dark band's own grey on security) */
.k-page .k-n .site-n-own { color: var(--mark, var(--accent)); }   /* read where it sits, so a band can set its own mark */
.k-page :is(.uc-h2 span, .ps-h2 span, .rw-h2 span, .ix-h2 span, .ft-title span) { color: var(--accent); white-space: nowrap; }   /* the pink phrase stays whole */
.k-page .k-security .sx-dim { color: inherit; }   /* the security heading has no pink: white throughout (Tong's review 1.24) */

/* ---------------------------------------------------------------- buttons: one shape; the primary one pink */
.k-page :is(.k-hero .btn, .uc-talk, .ft-btn, .k-hd-cta, .k-hd-book, .k-menu-cta) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 48px; padding: 0 16px;
  border-radius: 0; font-family: var(--font-mono); font-weight: 400; font-size: 13px; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
/* the outlined buttons' colours and transition: .btn-cta (adam-v1.css) owns the pink one (its pink, its black
   label and its 3D hover), and .k-cta2 below is the solid black one */
.k-page :is(.k-hero .btn, .uc-talk, .ft-btn, .k-hd-cta, .k-menu-cta):not(.btn-cta, .k-cta2) {
  border: 1px solid var(--ink); background: transparent; color: var(--ink); transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.k-page :is(.k-hero .btn:not(.btn--sm), .uc-talk, .ft-btn) { min-width: 212px; }
.k-page .k-hero .btn--sm { min-height: 36px; gap: 14px; padding: 0 13px; font-size: 12px; }
.k-page :is(.k-hero .btn, .uc-talk, .ft-btn, .k-hd-cta, .k-menu-cta):not(.btn-cta, .k-cta2):hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* Tong's CTA rule: the self-serve "Try Adam" is the pink primary (.btn-cta: pink, black label, a 3D box on hover), "Book a demo" the
   solid black secondary beside it (the assembler marks them .k-cta .btn-cta and .k-cta2 .btn-ink; .btn-ink's 3D hover in
   adam-v1.css is its hover, so no background change here, review 1.3) */
.k-page :is(.k-sec, .k-hd, .k-menu) a.k-cta2 { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.k-page .k-cta2:focus-visible { outline: var(--focus-ring, 2px solid var(--focus)); outline-offset: var(--focus-offset, 2px); }
.k-page :is(.k-hero .btn, .uc-talk, .ft-btn, .k-hd-cta, .k-menu-cta) svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 760px) { .k-page .uc-talk { width: 100%; } }

/* ---------------------------------------------------------------- the hero's H1 intro: hidden until it starts */
html.k-intro .k-hero .title { color: transparent; }

/* ---------------------------------------------------------------- the header (sticky; k-header.js sets its state)
   At the top: the hero's L1 nav, 76 px on white with a hairline. Scrolled (data-scrolled): the bar eases to 56 px on
   white at 92 % with a blur, the wordmark a touch smaller. Over the black security band (data-tone="dark"): black
   at 92 %, white type, the pink CTA unchanged. The current section's link has a pink underline (--active). The
   header's box keeps 76 px in the flow whatever the bar does, so compacting never moves the page. */
.k-hd {
  --hd-h: 76px; --hd-h-s: 56px; --hd-m: var(--k-pad);
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--hd-h); margin-bottom: 0; pointer-events: none;
}
.k-hd-bar {
  box-sizing: border-box; height: var(--hd-h); pointer-events: auto; color: var(--ink);
  background: var(--bg); border-bottom: 1px solid var(--line);
  transition: height .32s cubic-bezier(.22, 1, .36, 1), background-color .32s ease, border-color .32s ease, color .32s ease;
}
.k-hd[data-scrolled] .k-hd-bar {
  height: var(--hd-h-s); background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
.k-hd[data-tone="dark"] .k-hd-bar { color: var(--dark-ink); background: color-mix(in srgb, var(--dark-bg) 92%, transparent); border-color: var(--dark-line); }
/* the solid black Book a demo would vanish into the dark bar: a faint light edge keeps its shape there */
.k-page .k-hd[data-tone="dark"] a.k-hd-book { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dark-ink) 38%, transparent); }
.k-hd-in { --hd-gap: 40px; display: flex; align-items: center; gap: var(--hd-gap); height: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--hd-m); }
.k-hd-logo { display: inline-flex; flex: none; line-height: 0; border-radius: 2px; color: inherit; }
.k-hd-logo .k-wm { display: block; width: auto; height: 24px; transition: height .32s cubic-bezier(.22, 1, .36, 1); }
.k-hd[data-scrolled] .k-hd-logo .k-wm { height: 20px; }
.k-hd-nav { margin-left: auto; }
.k-hd-nav ul { display: flex; gap: 36px; margin: 0; padding: 0; list-style: none; }
.k-hd-nav a {
  display: inline-block; padding: 6px 0; color: inherit; text-decoration: none; font: 400 13px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(var(--active, var(--accent)), var(--active, var(--accent))) left bottom / 0 var(--active-weight, 2px) no-repeat;
  transition: background-size .32s cubic-bezier(.22, 1, .36, 1);
}
.k-hd-nav a:hover { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; }
.k-hd-nav a[aria-current="true"] { background-image: linear-gradient(var(--active, var(--accent)), var(--active, var(--accent))); background-size: 100% var(--active-weight, 2px); }
.k-page .k-hd :is(.k-hd-cta, .k-hd-book) { min-width: 0; min-height: 36px; gap: 14px; padding: 0 13px; font-size: 12px; }
.k-hd-book + .k-hd-cta { margin-left: calc(12px - var(--hd-gap)); }   /* the pair sits 12 px apart, whatever the bar's gap */
.k-hd-menu {
  display: none; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border: 1px solid currentColor; border-radius: 0;
  background: none; color: inherit; font: 400 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.k-hd-menu .ic, .k-hd-cta .ic { width: 16px; height: 16px; flex: none; }
.k-hd :focus-visible { outline: var(--focus-ring, 2px solid var(--focus)); outline-offset: var(--focus-offset, 2px); }
/* anchors land under the compact bar */
html { scroll-padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
.k-skip { position: absolute; left: 16px; top: -60px; z-index: 60; padding: 10px 14px; background: var(--ink); color: var(--bg); font: 400 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.k-skip:focus { top: 12px; }

@media (max-width: 1279px) { .k-hd-nav ul { gap: 26px; } }
@media (max-width: 1023px) {
  .k-hd { --hd-h: 72px; }
  .k-hd-nav { display: none; }
  .k-hd-book { margin-left: auto; }
  .k-hd-in { --hd-gap: 12px; }
  .k-hd-menu { display: inline-flex; }
}
@media (max-width: 767px) {
  .k-hd { --hd-h: 64px; --hd-h-s: 56px; }
  .k-hd-logo .k-wm { height: 22px; }
  .k-hd[data-scrolled] .k-hd-logo .k-wm { height: 20px; }
  .k-page .k-hd .k-hd-cta { margin-left: auto; padding: 0 11px; gap: 10px; }
  .k-page .k-hd .k-hd-book { display: none; }   /* a phone's bar: the wordmark, Try Adam and Menu; Book a demo is in the menu */
}

/* the phone menu: a full-height sheet (a modal <dialog>: focus stays in it, Esc closes it) */
.k-menu {
  box-sizing: border-box; position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
  border: 0; background: var(--bg); color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
}
.k-menu[open] { display: flex; flex-direction: column; }
.k-menu::backdrop { background: transparent; }
.k-menu-top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid var(--line); }
.k-menu-top img { display: block; width: auto; height: 22px; }
.k-menu-x { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: inherit; cursor: pointer; }
.k-menu nav ul { margin: 8px 0 0; padding: 0; list-style: none; }
.k-menu nav a {
  display: flex; align-items: baseline; justify-content: space-between; min-height: 64px; padding: 16px 0; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none; font-family: var(--font-display); font-weight: var(--k-weight); font-size: 32px; line-height: 1.1; letter-spacing: -.03em;
}
.k-menu-n { font: 400 12px/18px var(--font-mono); letter-spacing: .04em; color: var(--mark, var(--accent)); }
.k-menu-ctas { display: grid; gap: 10px; margin-top: auto; padding-top: 24px; }
.k-page .k-menu .k-menu-cta { width: 100%; min-height: 52px; }
.k-menu :focus-visible { outline: var(--focus-ring, 2px solid var(--focus)); outline-offset: var(--focus-offset, 2px); }
html.k-menu-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .k-menu[open] { animation: k-menu-in .26s cubic-bezier(.22, 1, .36, 1); }
  @keyframes k-menu-in { from { opacity: 0; transform: translateY(-8px); } }
}
@media (prefers-reduced-motion: reduce) {
  .k-hd-bar, .k-hd-logo .k-wm, .k-hd-nav a { transition: none; }
}

/* the promo card on iPad widths (Tong, 14 Oct): it stays in its corner, but as the phone's compact card (promo-nudge.css:
   thumbnail, title, link), so it sits under the hero drawing's title block and caption instead of over them, and over
   no text. At 1440 the full card already clears them; below 1024 the figure is wide enough. */
@media (min-width: 1024px) and (max-width: 1399.98px) {
  .k-page .pn-promo { grid-template-columns: 48px minmax(0, 1fr); }   /* its thumbnail full height, as everywhere (promo-nudge.css) */
  .k-page .pn-body { gap: 2px; padding: 11px 12px; align-content: center; }
  .k-page :is(.pn-label, .pn-line) { display: none; }
  .k-page .pn-title { font-size: 15px; line-height: 1.25; }
  .k-page .pn-link { min-height: 28px; margin-top: 0; font-size: 11px; }
}

/* the security lock's step list keeps its own one-line rows (adam-v1's li default would let them wrap) */
.k-page .k-security .lk-steps li { text-wrap: nowrap; }

/* ---------------------------------------------------------------- the Klein study (?accent=klein, docs/klein-notes.md)
   adam-v1.css remaps the tokens, and the studies carry their own Klein rules (the assembler keeps their
   :root[data-accent] on <html>). What's left here: the page's marks on the black band and the header over it (mark
   on black); and the logo:
   the header's inline wordmark takes Brand's Klein faces (logo-draw sets them as it draws; this covers reduced motion,
   and the header's dark variant), and the menu shows Brand's -klein file. */
/* on the black band, the page's own marks there (the [ 03 / 06 ] index, the heading's "in your") take the band's mark */
:root[data-accent="klein"] .k-page .k-security .sx { --mark: var(--sx-mark, #4a6fe3); --accent: var(--sx-mark, #4a6fe3); }
:root[data-accent="klein"] .k-hd[data-tone="dark"] {   /* the header over the black band: its underline, and Brand's dark-ground CTA */
  --active: #4a6fe3; --cta-bg: #496dde; --cta-bg-hover: #3359b9; --cta-bg-press: #002fa7;
}
:root[data-accent="klein"] .k-wm [fill="#ff2d92" i] { fill: #002fa7; }
:root[data-accent="klein"] .k-wm [fill="#fc7ab1" i] { fill: #99acdc; }
:root[data-accent="klein"] .k-wm [fill="#c12d9c" i] { fill: #25272d; }
:root[data-accent="klein"] .k-hd[data-tone="dark"] .k-wm :is([fill="#ff2d92" i], [fill="#002fa7" i]) { fill: #4a6fe3; }
:root[data-accent="klein"] .k-hd[data-tone="dark"] .k-wm :is([fill="#c12d9c" i], [fill="#25272d" i]) { fill: #4a4e57; }
/* the menu's wordmark: the pink image by default (as before, pixel for pixel), Brand's -klein file in the study */
.k-menu-top .k-menu-img-klein, :root[data-accent="klein"] .k-menu-top .k-menu-img { display: none; }
:root[data-accent="klein"] .k-menu-top .k-menu-img-klein { display: block; }

/* the review chip: bottom left, the accent, the theme and (under Swiss) the pair; only when the URL names an accent or a theme (k.js) */
.k-accent-chip {
  position: fixed; left: 16px; bottom: 16px; z-index: 45; display: flex; padding: 3px; gap: 2px;
  border: 1px solid var(--line); background: var(--bg); font: 400 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.k-accent-chip { flex-wrap: wrap; max-width: calc(100vw - 32px); }
.k-chip-group { display: flex; align-items: center; gap: 2px; }
.k-chip-group + .k-chip-group { padding-left: 6px; margin-left: 4px; border-left: 1px solid var(--line); }
.k-chip-k { padding: 7px 6px 7px 4px; color: var(--muted); opacity: .7; }
.k-accent-chip a { padding: 7px 10px; color: var(--muted); text-decoration: none; }
.k-accent-chip a:hover { color: var(--ink); }
.k-accent-chip a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.k-accent-chip a:focus-visible { outline: var(--focus-ring, 2px solid var(--focus)); outline-offset: 1px; }
@media (max-width: 767px) {
  .k-accent-chip { left: 12px; bottom: 88px; }   /* clear of the nudge's bar along the bottom */
  .k-chip-group + .k-chip-group { padding-left: 0; margin-left: 0; border-left: 0; }   /* a row each here, so no rule between */
}

/* ?theme=swiss: unseen until Brand's swiss.css is in (or failed, or 3 s), so the default look never flashes first */
html.k-theme-wait body { visibility: hidden; }