/* =============================================================================
 * public-editorial.css — the entry pages in the landing's editorial language
 * =============================================================================
 *
 * The landing page moved to an editorial system on 2026-09-25
 * (landing-editorial.css, scoped to body.lp2-editorial): near-black ground,
 * bone ink, Instrument Sans at regular weight and large scale, JetBrains Mono
 * for small labels, hairline dividers, 2px corners, one bone-filled action, and
 * no glass, glow, gradient or specks. The founder asked (2026-09-26) for the
 * two-minute test and the member door to carry the same vibe.
 *
 * WHAT THIS FILE IS. The `ks-` skin (kc-landing-skin.css) still draws the
 * components; this sheet re-points its tokens to the editorial values and
 * flattens the few shapes the tokens cannot reach (pills, glass, glow, the
 * gradient fills). It is loaded LAST on /quiz, /signin and /save, after the
 * page's own sheet, so that every equal-specificity rule here wins on order.
 *
 * THE TOKEN VALUES ARE A MIRROR of body.lp2-editorial in landing-editorial.css.
 * That sheet is the homepage's and is owned by the landing work; this one is
 * the entry flow's. When the landing changes an accent or an ink, change the
 * same value in section 1 here. Nothing else in this file names a colour that
 * is not in section 1, except the three status inks in section 1 too.
 *
 * Contrast (on #0a0a0a): bone 17.9:1, ink-2 10.6:1, ink-3 7.1:1, peach 10.9:1,
 * clay 6.4:1, sage 11.4:1. Ink on the bone button (#0b0a14 on #f4f1ea) 17.6:1.
 * ========================================================================== */


/* =============================================================================
 * 1 — TOKENS
 * ========================================================================== */

:root {
  --ks-bg:        #0a0a0a;
  --ks-raised:    #111111;
  --ks-plate:     #0e0e0e;
  --ks-line:      #292929;
  --ks-line-2:    #3b3b39;
  --ks-line-3:    #67655f;          /* the landing's secondary button rule */
  --ks-ink-1:     #f4f1ea;
  --ks-ink-2:     #c3c0b9;
  --ks-ink-3:     #a09e98;
  --ks-ink-4:     #55544f;
  --ks-acc:       #efb08e;          /* the landing's accent since PR #171 (peach); was lilac #d4c6e7 */
  --ks-acc-wash:  #29221d;
  /* "on" is bone, not a gradient: the skin fills chosen things with --ks-grad,
     so a flat two-stop bone gradient keeps every one of those rules working. */
  --ks-grad:      linear-gradient(#f4f1ea, #f4f1ea);
  --ks-on-grad:   #0b0a14;
  --ks-good:      #b2ceb8;
  --ks-caution:   #e0c48a;
  --ks-bad:       #c9948a;
  --ks-display:   "Instrument Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ks-body:      "Instrument Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ks-mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ks-gutter:    clamp(22px, 4.4vw, 80px);
  --ks-radius:    3px;
  --ks-radius-s:  2px;
  --ks-nav-h:     72px;
}

/* The ground and the ink. quiz.css and kc-signin.css pin the old space-black
   with !important on these same selectors, and kc-uplift.css LAYER 6 paints the
   body's colour with !important too; this loads after them and wins both. The
   ink has to be pinned as well because the skin's `.ks a { color: inherit }`
   outranks `.ks-nav__brand` and hands every link the body's colour. */
:root, body.ks, body.qz { background: #0a0a0a !important; color: #f4f1ea !important; }
.ks { color: var(--ks-ink-1); font-family: var(--ks-body); font-weight: 400; }
.ks .ks-nav__brand { color: var(--ks-ink-1); }
.ks button, .ks input, .ks select, .ks textarea { font-family: var(--ks-body); }
.ks :focus-visible { outline: 2px solid var(--ks-ink-1); outline-offset: 4px; }
/* public-language.css hands Chinese pages Nunito; the editorial stack already
   carries PingFang and YaHei as its fallbacks, the way the landing does. */
html[lang="zh-Hans"] body.ks { font-family: var(--ks-body); }

/* The specks are gone from the landing; they went from the door and the test
   too. What stands behind these pages now is the landing's scenery (section 11). */
.ks-field-bg { display: none; }


/* =============================================================================
 * 2 — TYPE: quiet in weight, decisive in scale
 * ========================================================================== */

.ks-h1, .ks-h2, .ks-h3,
main .ks-h1, main .ks-h2, main .ks-h3,
.ks h1, .ks h2, .ks h3 {
  font-family: var(--ks-display) !important;
  font-weight: 400 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}
.ks-h1 { font-size: clamp(44px, 5.6vw, 80px); line-height: 1.05; max-width: 14ch; }
.ks-h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; }
.ks-h3, main .ks-h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.18; letter-spacing: -.03em !important; }
.ks-h1 em, .ks-h2 em { background: none; color: var(--ks-ink-1); }
.ks-body { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; color: var(--ks-ink-2); }
.ks-eyebrow, .ks-steps, .ks-label, .ks-field > label, .qz-nav .ks-steps {
  font-family: var(--ks-mono); font-weight: 400; font-size: 11px; letter-spacing: .1em; line-height: 1.6; text-transform: uppercase; color: var(--ks-ink-3);
}
.ks-note { font-family: var(--ks-mono); font-size: 11px; letter-spacing: .015em; line-height: 1.7; color: var(--ks-ink-3); }
.ks-help { font-size: 13px; line-height: 1.5; color: var(--ks-ink-3); }


/* =============================================================================
 * 3 — THE NAV: solid, hairline, wordmark at 500
 * ========================================================================== */

.ks-nav {
  height: var(--ks-nav-h);
  background: #0a0a0a;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid rgba(244, 241, 234, .12);
}
.ks-nav__brand { font-family: var(--ks-display); font-weight: 500; font-size: 22px; letter-spacing: .11em; line-height: 1; }
.ks-nav__brand small { font-family: var(--ks-mono); font-size: 10px; letter-spacing: .1em; color: var(--ks-ink-3); }
.ks-nav__links { align-items: center; gap: clamp(14px, 2vw, 25px); }
.ks-nav__link {
  min-height: 44px; display: inline-flex; align-items: center;
  font: 400 13px/1.3 var(--ks-body); letter-spacing: 0; text-transform: none;
  color: var(--ks-ink-2); border-bottom: 0;
}
.ks-nav__link:hover, .ks-nav__link:focus-visible, .ks-nav__link[aria-current] { color: var(--ks-ink-1); }
.ks-nav__link[aria-current] { box-shadow: 0 1px 0 var(--ks-ink-1); }
.ks .public-language select {
  min-height: 40px; width: 103px; max-width: none; padding: 6px 20px 6px 9px;
  border: 1px solid #3b3b39; border-radius: 2px; background: #111;
  color: var(--ks-ink-1); font: 400 12px var(--ks-body); letter-spacing: 0;
}
.ks .public-language select:focus-visible { outline: 2px solid var(--ks-ink-1); outline-offset: 3px; }
/* the quiz's progress: one bone line along the nav's bottom edge */
.qz-bar { height: 1px; bottom: -1px; }
.qz-bar > i { background: var(--ks-ink-1); }
@media (max-width: 760px) {
  /* public-language.css lets the nav wrap on a phone; the fixed height above
     would clip the second row, so it goes back to auto here. The door's third
     link steps out on a phone, as kc-signin.css intends (its rule loses to the
     display the link is given above, so it is restated at .ks depth). */
  .ks-nav { height: auto; min-height: 68px; padding-block: 10px; }
  .ks-nav__brand { font-size: 20px; letter-spacing: .1em; }
  .ks .public-language select { width: 96px; min-height: 40px; font-size: 12px; }
  .ks .door-nav__home { display: none; }
}
@media (max-width: 400px) {
  .ks-nav__brand { font-size: 17px; letter-spacing: .08em; }
  .ks .public-language select { width: 87px; font-size: 11px; }
}


/* =============================================================================
 * 4 — ACTIONS: one bone rectangle, one hairline rectangle, one quiet line
 * ========================================================================== */

/* `.ks button { color: inherit }` in the skin outranks a bare `.ks-cta`, so the
   ink on these three is written at .ks depth: a bone action with dark ink is
   the one thing this page must never get wrong. */
.ks .ks-cta, .ks-cta {
  min-height: 50px; padding: 14px 24px; gap: 14px;
  border: 1px solid var(--ks-ink-1); border-radius: 2px;
  background: var(--ks-ink-1); color: #0b0a14;
  font: 500 14px/1.35 var(--ks-body); letter-spacing: 0;
  transition: background-color .18s ease, border-color .18s ease;
}
.ks .ks-cta:hover, .ks .ks-cta:focus-visible { background: #fff; border-color: #fff; color: #0b0a14; opacity: 1; transform: none; }
.ks .ks-cta:active { background: #dcd8cf; border-color: #dcd8cf; }
.ks .ks-cta:disabled, .ks .ks-cta[aria-disabled="true"] { background: transparent; border-color: var(--ks-line-2); color: var(--ks-ink-3); opacity: 1; }
.ks-cta--ring::after { content: none; }
.ks-cta svg { width: 16px; height: 16px; }

.ks .ks-ghost, .ks-ghost {
  min-height: 50px; padding: 14px 20px; gap: 12px;
  border: 1px solid var(--ks-line-3); border-radius: 2px;
  background: transparent; color: var(--ks-ink-1);
  font: 400 14px/1.35 var(--ks-body);
  transition: background-color .18s ease, border-color .18s ease;
}
.ks .ks-ghost:hover, .ks .ks-ghost:focus-visible { background: #232321; border-color: var(--ks-ink-1); color: var(--ks-ink-1); transform: none; }

.ks .ks-quiet, .ks-quiet {
  font: 400 13px/1.5 var(--ks-body); letter-spacing: 0; text-transform: none;
  color: var(--ks-ink-2); border-bottom: 1px solid transparent;
}
.ks .ks-quiet:hover, .ks .ks-quiet:focus-visible { color: var(--ks-ink-1); border-bottom-color: var(--ks-ink-1); }
.ks-link { color: var(--ks-ink-1); border-bottom: 1px solid #9c9990; }
.ks-link:hover, .ks-link:focus-visible { border-bottom-color: #fff; }


/* =============================================================================
 * 5 — CHOICES, CHIPS, PICKS: hairline rectangles; chosen is bone
 * ========================================================================== */

.ks-choice {
  min-height: 56px; padding: 12px 16px; gap: 14px;
  border-radius: 2px; border-color: var(--ks-line-2);
  font-size: 15px; line-height: 1.45;
  transition: background-color .18s ease, border-color .18s ease;
}
.ks-choice:hover:not(:disabled) { background: #151515; border-color: var(--ks-line-3); transform: none; }
.ks-choice__key { width: 26px; height: 26px; border-radius: 2px; font-size: 11px; border-color: var(--ks-line-2); }
.ks-choice.is-on .ks-choice__key, .ks-choice[data-state="right"] .ks-choice__key { background: rgba(11, 10, 20, .12); border-color: rgba(11, 10, 20, .3); }
.ks-choice[data-state="muted"] { border-color: var(--ks-line); color: var(--ks-ink-3); }

.ks-chip span, .ks-chip--static, .ks-chips > span {
  min-height: 42px; padding: 0 13px; border-radius: 2px;
  border-color: var(--ks-line-3); color: var(--ks-ink-1);
  font-weight: 400; font-size: 13px;
}
.ks-chip:hover span, .qz-chip:hover { border-color: var(--ks-ink-1); background: #151515; }
.ks-tag { border-radius: 2px; letter-spacing: .08em; font-size: 10px; padding: 4px 8px; }
.ks-tag--live { color: var(--ks-good); }

.qz-pick { border-radius: 2px; border-color: var(--ks-line-2); padding: 14px 16px; transition: background-color .18s ease, border-color .18s ease; }
.qz-pick:hover { border-color: var(--ks-line-3); background: #151515; }
.qz-pick > b { font-weight: 500; font-size: 15px; }
.qz-pick > span { font-size: 13px; color: var(--ks-ink-3); }
.qz-pick[aria-checked="true"] > span { color: #0b0a14; opacity: .72; }


/* =============================================================================
 * 6 — INPUTS
 * ========================================================================== */

.ks-input,
.ks input[type="email"], .ks input[type="password"], .ks input[type="text"], .ks input[type="search"], .ks input[type="tel"], .ks input[type="number"], .ks textarea, .ks select {
  min-height: 50px; padding: 0 14px; border-radius: 2px;
  background: #151515; border: 1px solid #55524c; color: var(--ks-ink-1);
  font-size: 15px;
}
.ks textarea { border-radius: 2px; padding: 12px 14px; }
.ks-input:focus-visible, .ks input:focus-visible, .ks textarea:focus-visible, .ks select:focus-visible { outline: 2px solid var(--ks-ink-1); outline-offset: 3px; border-color: #55524c; }
.ks-input[aria-invalid="true"], .ks input[aria-invalid="true"] { border-color: var(--ks-bad); }
.ks-msg--bad, .msg.err { color: var(--ks-bad); }
.ks-msg--good, .msg.ok { color: var(--ks-good); }


/* =============================================================================
 * 7 — PLATES: no glass, no glow, a hairline and a near-black fill
 * ========================================================================== */

/* Plates are a shade translucent, no blur: the scenery reads through them as a
   tint, the way the landing's scrim lets it through, and the ink stays on a
   ground darker than #141414 whatever frame is behind. */
.ks-card { background: rgba(12, 12, 12, .88); border: 1px solid var(--ks-line); border-radius: 3px; }
.ks-card::before { content: none; }
.ks-card--hover:hover { transform: none; }
.ks-card--tight { border-radius: 2px; }
.ks-bar { height: 1px; border-radius: 0; background: var(--ks-line-2); }
.ks-bar > i { background: var(--ks-ink-1); }
.ks-rule { border-top-color: var(--ks-line); }
.ks-reveal { transform: none; }


/* =============================================================================
 * 8 — THE TEST (/quiz)
 * -----------------------------------------------------------------------------
 * The intro is the landing's hero: no plate, large heading, the bone action.
 * Preferences are the landing's numbered list: hairline-separated blocks, a
 * mono number, no fill. A question keeps its plate, because a question wants a
 * frame; the plate is the editorial one. The instrument is an instrument.
 * ========================================================================== */

.qz-cols { padding-top: clamp(28px, 5vh, 56px); }

.qz-cols[data-stage="intro"] .qz-card {
  background: transparent; border: 0; padding: clamp(24px, 6vh, 72px) 0 12px; gap: 22px;
}
.qz-cols[data-stage="intro"] .qz-card .ks-h1 { font-size: clamp(52px, 7vw, 96px); letter-spacing: -.047em !important; max-width: 12ch; }
.qz-cols[data-stage="intro"] .qz-card .ks-body { max-width: 41ch; font-size: clamp(17px, 1.5vw, 21px); }
.qz-cols[data-stage="intro"] .qz-actions { margin-top: 8px; gap: 20px 30px; }
.qz-cols[data-stage="intro"] .qz-actions .ks-quiet { margin-left: 0; font-size: 14px; border-bottom-color: #9c9990; padding-bottom: 2px; }
.qz-cols[data-stage="intro"] .qz-legal { text-align: left; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid rgba(244, 241, 234, .19); max-width: none; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

.qz-card { padding: 26px 28px 28px; gap: 14px; }
.qz-card .ks-h2 { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; }
.qz-topic { letter-spacing: .1em; color: var(--ks-ink-3); }
.qz-opts { gap: 6px; }
.qz-actions .ks-quiet { font-size: 13px; }
.qz-reveal { border-radius: 2px; background: rgba(17, 17, 17, .94); }
.qz-reveal[data-verdict="right"] { border-color: var(--ks-good); }
.qz-reveal[data-verdict="right"] .qz-verdict { color: var(--ks-good); }
.qz-verdict { letter-spacing: .1em; }
.qz-fact .qz-fact__text { font-size: clamp(24px, 2.6vw, 34px); max-width: 26ch; }

/* preferences: the numbered list */
.qz-prefs { gap: 0; }
.qz-prefs > .ks-eyebrow { margin-bottom: 18px; }
.qz-prefs__h { margin-bottom: 14px; font-size: clamp(40px, 5vw, 68px) !important; }
.qz-prefs > .ks-body { margin-bottom: 34px; max-width: 46ch; }
.qz-pref {
  background: transparent; border: 0; border-top: 1px solid var(--ks-line); border-radius: 0;
  padding: 26px 0 30px; gap: 8px;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 0;
}
.qz-pref > .ks-eyebrow { grid-column: 1; grid-row: 1 / span 4; padding-top: 6px; font-size: 11px; color: var(--ks-ink-3); }
.qz-pref > .ks-eyebrow::before { content: "0"; }
.qz-pref > *:not(.ks-eyebrow) { grid-column: 2; }
.qz-pref .ks-h3, main .qz-pref .ks-h3 { font-size: clamp(21px, 2vw, 26px); }
.qz-hint { margin-top: 0; }
.qz-grid { margin-top: 12px; gap: 8px; }
.qz-pref .count { margin-top: 8px; font-family: var(--ks-mono); font-size: 11px; letter-spacing: .04em; }
.qz-prefs > .qz-actions { margin-top: 0; padding-top: 30px; border-top: 1px solid var(--ks-line); }
@media (max-width: 520px) {
  .qz-pref { grid-template-columns: 1fr; }
  .qz-pref > .ks-eyebrow { grid-row: auto; padding-top: 0; }
  .qz-pref > *:not(.ks-eyebrow) { grid-column: 1; }
}

/* the result */
.qz-dial .track { stroke: var(--ks-line-2); stroke-width: 6; }
.qz-dial .fill { stroke: var(--ks-ink-1); stroke-width: 6; stroke-linecap: butt; }
.qz-dial .num { font-family: var(--ks-display); font-weight: 400; font-size: 52px; letter-spacing: -.05em; }
.qz-dial .of { letter-spacing: .1em; }
.qz-road__step b { color: var(--ks-ink-3); }

/* the fact rail: solid, one hairline, no blur */
.qz-rail { background: #0a0a0a; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--ks-line); }
.qz-rail .tag { letter-spacing: .1em; }


/* =============================================================================
 * 9 — THE DOOR (/signin) AND THE HAND-OFF (/save)
 * ========================================================================== */

.door-invite .ks-h1 { max-width: 12ch; font-size: clamp(48px, 5.6vw, 80px); }
.door-lines { margin-top: 12px; gap: 0; max-width: 44ch; }
.door-lines li { min-height: 46px; padding: 6px 0; border-top: 1px solid var(--ks-line); font-size: 14px; color: var(--ks-ink-2); }
.door-lines li:last-child { border-bottom: 1px solid var(--ks-line); }
.door-lines svg { color: var(--ks-ink-3); width: 14px; height: 14px; }
.door-carry { border-top-color: var(--ks-line); }
.door-carry .ks-chips > span { border-radius: 2px; letter-spacing: .06em; border-color: var(--ks-line-3); }
.door-skip { border-radius: 2px; background: var(--ks-raised); }

.ks-door__card { padding: clamp(24px, 3vw, 36px); gap: 20px; }
.seg { gap: 24px; padding-bottom: 0; border-bottom: 1px solid #383733; }
.ks .seg button {
  min-height: 45px; padding: 8px 2px 14px; margin-bottom: -1px;
  font: 400 13px/1.4 var(--ks-body); letter-spacing: 0; text-transform: none;
  color: var(--ks-ink-3); border-bottom: 0;
}
.ks .seg button:hover { color: var(--ks-ink-1); }
.ks .seg button[aria-selected="true"] { color: var(--ks-ink-1); border-bottom: 0; box-shadow: 0 1px 0 var(--ks-ink-1); }
.door-note { font-size: 13px; }
.ks-field__row .ks-quiet { font: 400 12px/1.5 var(--ks-body); letter-spacing: 0; text-transform: none; }
.door-alt, .door-alt .ks-quiet { font-size: 13px; }
.orline { letter-spacing: .1em; }
.orline::before, .orline::after { background: var(--ks-line); }
.done .glyph { border-radius: 2px; border-color: var(--ks-good); color: var(--ks-good); }
.done .glyph.wait { border-color: var(--ks-ink-2); color: var(--ks-ink-2); }
.door-who .av { border-radius: 2px; border-color: var(--ks-line-3); color: var(--ks-ink-1); font-weight: 500; }
.truth { border-top-color: var(--ks-line); }
.truth summary::before { color: var(--ks-ink-3); }
.truth li::marker { color: var(--ks-ink-3); }
.door-legal { font-size: 12px; }
.door-legal a { color: var(--ks-ink-1); border-bottom: 1px solid #9c9990; }
.door-foot { border-top: 1px solid rgba(244, 241, 234, .19); padding-block: 22px; min-height: 75px; align-items: center; gap: 10px 26px; }
.door-foot .ks-note, .door-foot .ks-nav__link {
  min-height: 0; font: 400 11px/1.4 var(--ks-mono); letter-spacing: .06em; text-transform: uppercase; color: #ccc8c0;
}
.door-foot .ks-nav__link:hover { color: var(--ks-ink-1); }

/* /save: the score plate's rows and chips, on the same hairlines */
.save-lead .ks-h1 { max-width: 12ch; }
.built .eyebrow { letter-spacing: .1em; }
.built .tier b { font-family: var(--ks-display); font-weight: 400; font-size: 44px; letter-spacing: -.045em; }
.built .tier span { letter-spacing: .1em; }
.built h2 { font-family: var(--ks-display); font-weight: 400; font-size: 24px; letter-spacing: -.03em; }
.rows { border-top-color: var(--ks-line-2); }
.row { border-bottom-color: var(--ks-line); }
.row .v { font-weight: 500; }
.chips span { border-radius: 2px; letter-spacing: .06em; border-color: var(--ks-line-3); }
.legal { font-size: 12px; }


/* =============================================================================
 * 11 — THE SCENERY: the landing's flight scenes, behind everything
 * -----------------------------------------------------------------------------
 * The same layer the landing draws (landing-editorial.css .lr-asia): fixed,
 * full-bleed, two video slots that dissolve over 1.2 s, under the same two
 * scrims, so the ground is roughly four-fifths dark whatever frame is showing
 * and bone ink stays above 12:1 on it. z-index 0 under the content, which every
 * page already lifts with .ks-above (the nav is sticky at 60, the rail fixed at
 * 15, the door's skip link at 70). Without script the poster stands in; under
 * reduced motion, the clear register or forced colours the layer is withdrawn.
 * No toggle (founder, 2026-09-26).
 * ========================================================================== */

.ks-scenery { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #0a0d0e; }
.ks-scenery__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1.2s ease-in-out; }
.ks-scenery__video.is-active { opacity: 1; }
.ks-scenery__video.is-preparing { opacity: 0 !important; transition: none !important; }
.ks-scenery::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 10, 11, .88), rgba(7, 10, 11, .78) 52%, rgba(7, 10, 11, .72)),
    linear-gradient(0deg, rgba(7, 10, 11, .4), transparent 30%, transparent 70%, rgba(7, 10, 11, .3));
}
@media (max-width: 760px) {
  .ks-scenery::after { background: linear-gradient(90deg, rgba(7, 10, 11, .87), rgba(7, 10, 11, .8)), linear-gradient(0deg, rgba(7, 10, 11, .3), transparent 65%); }
}
[data-presentation="clear"] .ks-scenery,
[data-motion="reduced"] .ks-scenery { display: none; }
@media (prefers-reduced-motion: reduce) { .ks-scenery { display: none; } .ks-scenery__video { transition: none; } }
@media (forced-colors: active) { .ks-scenery { display: none; } }
@media print { .ks-scenery { display: none !important; } }


/* =============================================================================
 * 12 — THE LOCK FROM THE INSIDE (/account)
 * -----------------------------------------------------------------------------
 * account.html wears kc-door.css's components (.card, .field, .btn, .msg,
 * .rules, .meter, .methods, .facts, .who, .done, the footer) on the old token
 * layer. This section re-points each of them at the editorial values, at
 * `.acct` depth so it outranks the door's bare element and class rules, loaded
 * last so equal specificity falls this way. Nothing here changes what
 * kc-account.js reads or writes: the same ids, the same class toggles.
 * ========================================================================== */

.acct { color: var(--ks-ink-1); }
/* kc-theme.css paints every <header> from --chrome-bg with !important and the
   door's sheet relies on a blur this page no longer has, so the scrolled text
   showed through the bar. Solid, like every other entry page. */
.acct header.ks-nav { background: #0a0a0a !important; }
/* public-language.css is what lets the bar wrap on the other entry pages; this
   page does not load it, so the same two rules live here. */
@media (max-width: 760px) {
  .acct .ks-nav { flex-wrap: wrap; height: auto; min-height: 64px; gap: 8px; padding-block: 10px; }
  .acct .ks-nav__links { flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; overflow: visible; }
}
.acct a { color: var(--ks-ink-1); }
.acct a:hover { color: #fff; }
.acct main.shell.one { max-width: 720px; padding: clamp(36px, 6vh, 64px) var(--ks-gutter) 84px; }
.acct .head { margin-bottom: 30px; max-width: none; }
.acct .head h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.05; max-width: 14ch; }
.acct .lede, .acct .head .lede { margin-top: 18px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--ks-ink-2); max-width: 48ch; }
.acct .skip { border-radius: 2px; background: var(--ks-raised); border-color: var(--ks-line-3); color: var(--ks-ink-1); font: 400 13px/1 var(--ks-body); }

/* plates */
.acct .card { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 26px 28px 28px; }
.acct main.shell.one .card { margin: 0 0 14px; }
.acct .card h2, .acct .card.done h2 { font-size: 22px; line-height: 1.2; margin: 0 0 8px; }
.acct .card .sub { font-size: 14px; color: var(--ks-ink-2); }
.acct .card .note, .acct .hint, .acct .meterNote { color: var(--ks-ink-3); font-size: 12.5px; }
.acct .card .note a, .acct .card .sub a { color: var(--ks-ink-1); border-bottom: 1px solid #9c9990; text-decoration: none; }
.acct .card.wait .bar { height: 1px; border-radius: 0; background: var(--ks-line-2); }
.acct .card.wait .bar i { border-radius: 0; background: var(--ks-ink-1); }

/* fields */
.acct label { font: 400 11px/1.6 var(--ks-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ks-ink-3); margin-bottom: 8px; }
.acct .field { margin-bottom: 18px; }
.acct #username { background: #0f0f0f; color: var(--ks-ink-2); border-color: var(--ks-line-2); }
.acct #username:focus { border-color: var(--ks-line-2); }
.acct .ks input:focus, .acct input:focus { border-color: #55524c; }
.acct .reveal, .acct .link { font: 400 12px/1.5 var(--ks-body); color: var(--ks-ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.acct .reveal:hover, .acct .link:hover, .acct .reveal:focus-visible, .acct .link:focus-visible { color: var(--ks-ink-1); border-bottom-color: var(--ks-ink-1); }
.acct .link { font-size: 13px; }

/* the requirements and the meter */
.acct .rules { border-radius: 2px; border-color: var(--ks-line); padding: 16px 18px; }
.acct .rulesH { font: 400 11px/1.6 var(--ks-mono); letter-spacing: .1em; color: var(--ks-ink-3); }
.acct .rules li { color: var(--ks-ink-2); font-size: 13.5px; }
.acct .rules .tick { border-radius: 2px; border: 1px solid var(--ks-ink-4); width: 16px; height: 16px; margin-top: 3px; }
.acct .rules li[data-state="ok"] { color: var(--ks-ink-1); }
.acct .rules li[data-state="ok"] .tick { border-color: var(--ks-good); background: var(--ks-good); }
.acct .rules li[data-state="ok"] .tick::after { left: 4.6px; top: 1.6px; border-color: #0b0a14; border-width: 0 1.8px 1.8px 0; }
.acct .rules li[data-state="bad"] { color: var(--ks-bad); }
.acct .rules li[data-state="bad"] .tick { border-color: var(--ks-bad); }
.acct .rules li[data-state="bad"] .tick::before, .acct .rules li[data-state="bad"] .tick::after { left: 6.6px; top: 2.8px; background: var(--ks-bad); }
.acct .meter .track { height: 2px; border-radius: 0; background: var(--ks-line-2); }
.acct .meter .track i { border-radius: 0; background: var(--ks-ink-1); }
.acct .meter .track i[data-short="1"] { background: var(--ks-bad); }
.acct .meter .track i[data-full="1"] { background: var(--ks-good); }

/* buttons: the bone one, the hairline one, and the one that ends sessions */
.acct .btn { border-radius: 2px; font: 500 14px/1.35 var(--ks-body); min-height: 50px; }
.acct .btn + .btn { margin-top: 10px; }
.acct .btn.primary:hover { filter: none; }
.acct .btn.danger { border: 1px solid #6b4a45; background: transparent; color: var(--ks-bad); font-weight: 400; }
.acct .btn.danger:hover, .acct .btn.danger:focus-visible { background: #1b1413; border-color: var(--ks-bad); }
.acct .btn[disabled], .acct .btn[aria-disabled="true"] { opacity: .5; }
.acct .spin { border-width: 1.5px; }

/* messages: a plain sentence in the status ink, no box */
.acct .msg { padding: 0; border: 0; background: transparent; margin-top: 14px; font-size: 14px; }
.acct .msg.err { color: var(--ks-bad); }
.acct .msg.ok { color: var(--ks-good); }
.acct .msg.info { color: var(--ks-ink-2); }
.acct .alt { border-top-color: var(--ks-line); color: var(--ks-ink-3); font-size: 13px; }

/* who, methods, facts, the terminal card */
.acct .who { border-radius: 2px; border-color: var(--ks-line); background: transparent; padding: 14px 0 18px; border-width: 0 0 1px; margin-bottom: 18px; }
.acct .who .av { border-radius: 2px; background: transparent; border-color: var(--ks-line-3); color: var(--ks-ink-1); font: 500 15px/1 var(--ks-body); }
.acct .who .txt b { font: 500 14px/1.3 var(--ks-body); color: var(--ks-ink-1); }
.acct .who .txt span { color: var(--ks-ink-3); }
.acct .methods li { border-radius: 2px; border-color: var(--ks-line); background: transparent; padding: 12px 0; border-width: 0 0 1px; }
.acct .methods li:first-child { border-top: 1px solid var(--ks-line); }
.acct .methods .ic { border-radius: 2px; background: transparent; border-color: var(--ks-line-3); color: var(--ks-ink-2); }
.acct .methods .ic.on { background: var(--ks-ink-1); border-color: var(--ks-ink-1); color: #0b0a14; }
.acct .methods .tx b { font: 500 14px/1.3 var(--ks-body); color: var(--ks-ink-1); }
.acct .methods .tx span { color: var(--ks-ink-3); }
.acct .facts li { color: var(--ks-ink-3); padding-left: 16px; }
.acct .facts li::before { width: 4px; height: 4px; border-radius: 0; background: var(--ks-ink-3); top: .7em; }
.acct .facts b { color: var(--ks-ink-1); font-weight: 500; }
.acct .done .glyph { border-radius: 2px; background: transparent; border-color: var(--ks-good); color: var(--ks-good); }
.acct .done p { color: var(--ks-ink-2); }

/* the foot: the landing's mono strip, as on the door */
.acct footer { border-top: 1px solid rgba(244, 241, 234, .19); }
.acct footer .in { max-width: none; padding: 22px var(--ks-gutter) calc(22px + env(safe-area-inset-bottom)); gap: 10px 26px; font: 400 11px/1.4 var(--ks-mono); letter-spacing: .06em; text-transform: uppercase; color: #ccc8c0; }
.acct footer a { color: #ccc8c0; text-decoration: none; padding-inline: 0; min-width: 0; }
.acct footer a:hover { color: var(--ks-ink-1); }

@media (max-width: 720px) {
  .acct .card { border-radius: 3px; padding: 22px 18px 24px; }
  .acct .head h1 { font-size: clamp(36px, 10vw, 48px); }
}


/* =============================================================================
 * 13 — THE DOCUMENT PAGES (/privacy, /terms, /faq, /contact)
 * -----------------------------------------------------------------------------
 * These four sit on the landing's OLD shell (landing-2026.css, body.lp2) and
 * were left behind when the homepage moved to the editorial system, whose
 * sheet is scoped to body.lp2-editorial and owned by the landing work. This
 * section re-points the lp2 tokens at the editorial values and flattens the
 * few shapes tokens cannot reach, at body.lp2 depth, which outranks the
 * .lp2 token block. index.html does not load this sheet, so nothing here can
 * reach the homepage. Founder, 2026-09-26: "check that all pages look like
 * the new theme".
 * ========================================================================== */

body.lp2 {
  --lp2-bg: #0a0a0a; --lp2-raised: #111111; --lp2-line: #292929;
  --lp2-ink-1: #f4f1ea; --lp2-ink-2: #c3c0b9; --lp2-ink-3: #a09e98; --lp2-ink-4: #55544f;
  --lp2-acc: #efb08e; --lp2-acc-deep: #dd906a; --lp2-acc-wash: #29221d;
  --lp2-grad-a: #f4f1ea; --lp2-grad-b: #f4f1ea; --lp2-grad: linear-gradient(#f4f1ea, #f4f1ea); --lp2-on-grad: #0b0a14;
  --lp2-good: #b2ceb8; --lp2-caution: #e0c48a; --lp2-bad: #c9948a;
  --lp2-display: "Instrument Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --lp2-body: "Instrument Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --lp2-gutter: clamp(22px, 4.4vw, 80px); --lp2-section: clamp(72px, 9vw, 128px); --lp2-max: 1600px;
  background: #0a0a0a; font-family: var(--lp2-body);
}
body.lp2 :focus-visible { outline: 2px solid var(--lp2-ink-1); outline-offset: 4px; }
body.lp2 .lp2__skip:focus { border-color: var(--lp2-ink-1); color: var(--lp2-ink-1); border-radius: 2px; }

/* the bar: the landing's, sticky and solid */
body.lp2 .lp2-nav { position: sticky; inset: auto; top: 0; z-index: 20; height: 72px; background: #0a0a0a; border-bottom: 1px solid rgba(244, 241, 234, .12); }
body.lp2 .lp2-nav__brand { font-family: var(--lp2-display); font-weight: 500; font-size: 22px; letter-spacing: .11em; line-height: 1; }
body.lp2 .lp2-nav__links { align-items: center; gap: clamp(14px, 2vw, 25px); }
body.lp2 .lp2-nav__link, body.lp2 .lp2-nav .lp2-quiet { min-height: 44px; display: inline-flex; align-items: center; font: 400 13px/1.3 var(--lp2-body); letter-spacing: 0; text-transform: none; color: var(--lp2-ink-2); border-bottom: 0; padding: 0; }
body.lp2 .lp2-nav__link:hover, body.lp2 .lp2-nav .lp2-quiet:hover { color: var(--lp2-ink-1); }
@media (max-width: 760px) {
  body.lp2 .lp2-nav { height: auto; min-height: 64px; flex-wrap: wrap; gap: 6px 14px; padding-block: 10px; }
  body.lp2 .lp2-nav__brand { font-size: 20px; letter-spacing: .1em; }
  body.lp2 .lp2-nav__links { flex-wrap: wrap; gap: 4px 16px; }
}

/* type: quiet in weight, decisive in scale */
body.lp2 .lp2-h1, body.lp2 .lp2-h2, body.lp2 .lp2-h3 { font-weight: 400; letter-spacing: -.045em; text-wrap: balance; }
body.lp2 .lp2-h2 { font-size: clamp(44px, 5.6vw, 80px); line-height: 1.07; max-width: 14ch; }
body.lp2 .lp2-h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.18; letter-spacing: -.03em; }
body.lp2 .lp2-body { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; }
body.lp2 .lp2-label { font-size: 12px; letter-spacing: .1em; font-weight: 400; line-height: 1.6; }
body.lp2 .lp2-meta { font-size: 11px; letter-spacing: .1em; line-height: 1.6; }
body.lp2 .lp2-section > .lp2-shell > .lp2-label { margin-bottom: 26px; }
body.lp2 .lp2-section > .lp2-shell > .lp2-h2 { margin-bottom: 22px; }
body.lp2 .lp2-section > .lp2-shell > .lp2-h2 + .lp2-body { max-width: 52ch; margin-bottom: clamp(40px, 6vw, 72px); }
body.lp2 .lp2 :where(a), body.lp2 .lp2-body a { color: var(--lp2-ink-1); border-bottom: 1px solid #9c9990; }
body.lp2 .lp2-body a:hover { border-bottom-color: #fff; }

/* the numbered rows: the landing's list, hairline over hairline */
body.lp2 .lp2-row { grid-template-columns: 56px 4fr 6fr; gap: clamp(20px, 3vw, 48px); padding-block: 34px; align-items: start; }
body.lp2 .lp2-row__n { font: 400 11px/1.6 var(--ks-mono); letter-spacing: .1em; color: var(--lp2-ink-3); padding-top: 6px; }
body.lp2 .lp2-row__h { font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -.03em; color: var(--lp2-ink-1); }
body.lp2 .lp2-row .lp2-body { font-size: 16px; }
body.lp2 .lp2-rows + .lp2-meta { margin-top: 28px; }
@media (max-width: 760px) {
  body.lp2 .lp2-row { grid-template-columns: 1fr; gap: 8px; padding-block: 26px; }
  body.lp2 .lp2-row__b { grid-column: auto; }
}

/* the one action, the bone rectangle */
body.lp2 .lp2-cta { min-height: 50px; padding: 14px 24px; border: 1px solid var(--lp2-ink-1); border-radius: 2px; background: var(--lp2-ink-1); color: #0b0a14; font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.35; box-shadow: none; }
body.lp2 .lp2-cta:hover, body.lp2 .lp2-cta:focus-visible { background: #fff; border-color: #fff; opacity: 1; transform: none; }
body.lp2 .lp2-quiet { font: 400 13px/1.5 var(--lp2-body); letter-spacing: 0; text-transform: none; color: var(--lp2-ink-2); }
body.lp2 .lp2-quiet:hover { color: var(--lp2-ink-1); border-bottom-color: var(--lp2-ink-1); }

/* contact */
body.lp2 .lp2-contact__link { font-weight: 400; letter-spacing: -.045em; font-size: clamp(30px, 4.6vw, 64px); border-bottom: 1px solid #9c9990; }
body.lp2 .lp2-contact__link:hover, body.lp2 .lp2-contact__link:focus-visible { color: var(--lp2-ink-1); border-bottom-color: #fff; }
body.lp2 .lp2-contact__grid { border-top: 1px solid var(--lp2-line); padding-top: 28px; }
body.lp2 .lp2-contact__grid .lp2-body { font-size: 15px; }

/* the close: the wordmark, then the mono strip */
body.lp2 .lp2-close { padding-top: clamp(72px, 10vw, 140px); }
body.lp2 .lp2-close__mark { font-weight: 400; letter-spacing: .005em; text-indent: 0; font-size: clamp(42px, 15vw, 245px); }
body.lp2 .lp2-foot { margin-top: clamp(48px, 7vw, 96px); border-top: 1px solid rgba(244, 241, 234, .19); padding-block: 26px; }
body.lp2 .lp2-foot .lp2-meta { font-size: 10px; letter-spacing: .06em; color: #ccc8c0; }
body.lp2 .lp2-foot a { color: inherit; border-bottom: 0; }
body.lp2 .lp2-foot a:hover { color: var(--lp2-ink-1); }

/* the scenery under a document: the same layer, and the same lifts */
body.lp2 .lp2-nav, body.lp2 > main, body.lp2 .lp2-close { position: relative; z-index: 1; }
body.lp2 .lp2-nav { position: sticky; }


/* =============================================================================
 * 14 — CHECKOUT
 * -----------------------------------------------------------------------------
 * checkout.html is on the ks skin with its own sheet (kc-checkout.css), whose
 * co- classes carry the old pill and plate. Re-pointed here at .ks depth.
 * ========================================================================== */

.ks .co-h2 { font-family: var(--ks-display); font-weight: 400; font-size: 24px; letter-spacing: -.03em; }
.ks .co-card { background: rgba(12, 12, 12, .88); border: 1px solid var(--ks-line); border-radius: 3px; }
.ks .co-pick-row, .ks .co-demo, .ks .co-placeholder, .ks .co-error { border-radius: 2px; background: transparent; }
.ks .co-pick-row { border-color: var(--ks-line-2); }
.ks .co-qty-btn { border-radius: 2px; background: transparent; border-color: var(--ks-line-3); font: 400 16px/1 var(--ks-body); }
.ks .co-qty-btn:focus-visible { outline-color: var(--ks-ink-1); }
.ks .co-btn { border: 1px solid var(--ks-ink-1); border-radius: 2px; background: var(--ks-ink-1); color: #0b0a14; font: 500 14px/1.35 var(--ks-body); letter-spacing: 0; min-height: 50px; transition: background-color .18s ease, border-color .18s ease; }
.ks .co-btn:hover:not(:disabled), .ks .co-btn:focus-visible { background: #fff; border-color: #fff; opacity: 1; transform: none; }
.ks .co-btn:focus-visible { outline: 2px solid var(--ks-ink-1); }
.ks .co-btn:disabled { background: transparent; border-color: var(--ks-line-2); color: var(--ks-ink-3); opacity: 1; }
.ks .co-btn--quiet { background: transparent; color: var(--ks-ink-1); border-color: var(--ks-line-3); font-weight: 400; }
.ks .co-btn--quiet:hover { background: #232321; border-color: var(--ks-ink-1); }
.ks .co-item-name, .ks .co-item-price, .ks .co-pick-name, .ks .co-qty-n { font-weight: 500; }
.ks .co-row--total dt, .ks .co-row--total dd { font-weight: 500; }
.ks .co-error { color: var(--ks-bad); border-color: var(--ks-bad); }
.ks .co-tick { border-radius: 2px; border-color: var(--ks-good); color: var(--ks-good); }
.ks .co-status--bad { color: var(--ks-bad); }


/* =============================================================================
 * 10 — MOTION
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ks-cta, .ks-ghost, .ks-choice, .qz-pick, .ks-chip span, .seg button { transition: none; }
}