/* ============================================================
   KeyLen Web — layout primitives, header, homepage hero
   ------------------------------------------------------------
   Quiet Flow (Direction B2). The page is a twelve-column field;
   the header participates in the same grid as the content, so the
   navigation aligns with the page rather than floating above it.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Chinese gets its own leading rather than inheriting the Latin value. */
html[lang^="zh"] body { line-height: var(--lh-body-zh); }

a { color: inherit; }

/* ============================================================
   THE TWELVE-COLUMN FIELD
   ============================================================ */
.page { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--colgap);
}

/* The wide content anchor used by the hero. */
.c-wide { grid-column: 1 / 9; }

/* ============================================================
   HEADER
   ------------------------------------------------------------
   Quiet: white, one hairline, no shadow, no gradient, no card.
   On desktop the nav sits on the page grid at column 4 — the same
   anchor the product sections use — so the header is part of the
   composition rather than a band above it. On mobile it collapses
   to a single compact row.
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: var(--rule-w) solid var(--rule);
}

.header-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--colgap);
  align-items: center;
  height: var(--header-h);
}

.brand {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg);
}
.brand img { display: block; width: 26px; height: 26px; }
.brand-name { font-size: var(--fs-brand); font-weight: 650; letter-spacing: -0.01em; }

.site-nav { grid-column: 4 / 8; display: flex; gap: 32px; }
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--fs-nav);
  font-weight: 500;
}
.site-nav a:hover { color: var(--fg); }

.lang {
  grid-column: 10 / 13;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
}
.lang a, .lang span { text-decoration: none; }
.lang .current { color: var(--fg); font-weight: 650; }
.lang a { color: var(--muted); font-weight: 500; }
.lang a:hover { color: var(--fg); }
.lang .sep { color: #D6DCE6; }

/* ============================================================
   HOMEPAGE HERO
   ------------------------------------------------------------
   No image, no illustration, no product UI, no decoration.
   The composition is the type and the whitespace.
   ============================================================ */
.hero { padding: var(--space-16) 0 var(--space-12); }

.t-display {
  grid-column: 1 / 9;
  margin: 0;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 640;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.t-lede {
  grid-column: 1 / 9;
  margin: var(--space-3) 0 0;
  font-size: var(--fs-lede);
  color: var(--muted);
}

html[lang^="zh"] .t-display {
  letter-spacing: var(--track-display-zh);
  line-height: var(--lh-display-zh);
  max-width: 11em;   /* CJK: `ch` is a Latin measure and would wrap badly */
}

/* A short word-group that must not be split by the line breaker.
   Markup only — the frozen words are unchanged. */
.nb { white-space: nowrap; }

/* ============================================================
   PRODUCT SECTIONS
   ------------------------------------------------------------
   An editorial spread, not a stack: the label column, a wide
   headline field, then body and a right-hand statement column.
   This is what makes the desktop composition two-dimensional —
   the statement sits beside the body, not beneath it.

     label / identity   columns 1–3
     headline           columns 4–12
     body               columns 4–8
     privacy statement  columns 9–12
     CTA                columns 4–8, below both

   No card, no panel, no border — the layout is the composition.
   ============================================================ */
.product { padding: var(--section-pad) 0; }

.c-lab   { grid-column: 1 / 4; }
.c-head  { grid-column: 4 / 13; }
.c-body  { grid-column: 4 / 9; }
.c-side  { grid-column: 9 / 13; }
.c-cta   { grid-column: 4 / 9; }

.product .grid { row-gap: var(--space-4); }
.product .c-head { grid-row: 1; }
.product .c-body { grid-row: 2; }
.product .c-side { grid-row: 2; }
.product .c-cta  { grid-row: 3; margin-top: 0; }

/* ---- the journey mark --------------------------------------
   A short, disconnected tick. One per layer, at one alignment.
   It is a repeated mark, not a connector: it must never be
   extended into a line, joined to a later layer, or given a node,
   arrow or timeline. */
.tick {
  display: block;
  width: 30px;
  height: 2px;
  background: var(--accent);
  margin-bottom: var(--space-3);
}

.label {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}

.pname {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: var(--space-2) 0 0;
  font-size: var(--fs-brand);
  font-weight: 640;
  letter-spacing: -0.01em;
}
.pname img { display: block; flex: 0 0 auto; }

.t-section {
  margin: 0;
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  font-weight: 630;
  letter-spacing: var(--track-section);
}

.t-body {
  margin: 0;
  font-size: var(--fs-body-lg);
  color: var(--muted);
  max-width: var(--measure);
}

/* Finder's privacy statement: one architectural fact. Set open,
   beneath a hairline — deliberately not a panel. It must never be
   restyled to resemble a bounded, qualified claim. */
.st--finder {
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--rule-w) solid var(--rule);
  font-size: var(--fs-small);
  color: var(--fg);
  max-width: var(--measure);
}
.st--finder strong { font-weight: 650; }

/* KeyLen AI's data-flow statement: a BOUNDED claim, on its own
   tinted surface. It is deliberately a different shape from
   Finder's open statement — the two products have different
   privacy models, and the pages must never let one claim be read
   as the other. Text is transmitted here; it is not on the Finder
   page. Do not restyle this into a hairline statement, plain body
   copy, a feature card, a warning, an alert or a security badge:
   it is a factual statement, not marketing and not a caution. */
.st--ai {
  margin: 0;
  padding: var(--space-3) 28px;   /* 28px horizontal is B2's frozen value; no token matches */
  background: var(--accent-soft);
  color: var(--fg-panel);
  font-size: var(--fs-small);
  max-width: var(--measure);
}
.st--ai p { margin: 0; }

.cta-row { margin: 0; }
.cta {
  color: var(--accent);
  text-decoration: none;
  font-weight: 620;
  font-size: var(--fs-small);
}
.cta:hover { text-decoration: underline; }

/* ============================================================
   BRIDGES
   ------------------------------------------------------------
   The narrative hinge between two product sections. It carries a
   question, not a product — and it is the page's THIRD alignment
   anchor:

     1. the hero, anchored to the left edge of the field
     2. the product spread, label column + content field
     3. the bridge, a full-content-width rule with the text
        returning to the left edge

   The rule spans the whole field, which is what makes the bridge
   read as a horizontal beat rather than another block. It is a
   typographic pause, and nothing here may imply that one product
   leads into another: no arrow, node, connector, link or CTA.
   ============================================================ */
.bridge { padding: var(--bridge-pad) 0; }

.bridge .rule-full {
  grid-column: 1 / 13;
  border-top: var(--rule-w) solid var(--rule);
  margin-bottom: var(--space-6);
}

.t-bridge {
  grid-column: 1 / 9;
  margin: 0;
  font-size: var(--fs-bridge);
  line-height: var(--lh-bridge);
  font-weight: 620;
  letter-spacing: var(--track-bridge);
  color: var(--fg);
  opacity: .82;
}

.t-bridge-sub {
  grid-column: 1 / 8;
  margin: var(--space-2) 0 0;
  font-size: var(--fs-body);
  color: var(--faint);
}

/* ============================================================
   BUILD — the capability layer
   ------------------------------------------------------------
   A PRODUCT SPREAD WITH ELEMENTS WITHDRAWN, not a fourth layout.

   It keeps the label column and the tick, because it IS a layer
   of the same system. It has no product mark, no statement column
   and no CTA, because the frozen source has none — and that
   absence is the design. FIND and UNDERSTAND each carry an icon in
   the identity line and a claim in column 9–12; BUILD carries
   neither, which is what makes it read as structural rather than
   as a third product.

   Columns 9–12 are empty on purpose. Do not fill them, and do not
   add an icon, a link or a CTA. */
.build { padding: var(--build-pad); }

.c-build { grid-column: 4 / 9; }

/* a shorter journey mark, and a quieter label: this layer is not
   announced with the same weight as a product */
.tick--small { width: 20px; }
.label--quiet { color: var(--muted); }

.pname--quiet {
  color: var(--muted);
  font-weight: 500;
}

.t-build {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 52ch;   /* B2's exact figure from the approved visual */
}

html[lang^="zh"] .t-bridge {
  letter-spacing: 0;
  max-width: 12em;   /* CJK: `ch` is a Latin measure and would wrap badly */
}

/* ============================================================
   CLOSING — the page's resolution and its one page-level action
   ------------------------------------------------------------
   Closing does two things and nothing else: it states the span of
   the whole page, and it offers the page's single action. It is not
   a fourth product, not a summary of features, and not a second
   hero. It carries no eyebrow, subtitle, badge, icon, panel,
   illustration or secondary CTA, and neither does the frozen source.

   THE TAIL ANCHOR — columns 4–13. Closing is the only element on
   the page anchored here. Column 4 is where the product headlines
   begin, so Closing lines up with the products' left edge while
   running to the right edge of the field. That shared left edge is
   what makes it read as a statement OVER the products rather than
   as another product. The anchor must be explicit: without it the
   headline and CTA auto-place into single grid columns and the
   layout looks plausible but is wrong. */
.c-tail { grid-column: 4 / 13; }

.closing { padding: var(--closing-pad); }

.t-closing {
  margin: 0;
  font-size: var(--fs-closing);
  line-height: 1.1;
  font-weight: 640;
  letter-spacing: -0.026em;
  text-wrap: balance;
}

html[lang^="zh"] .t-closing {
  letter-spacing: 0;
  line-height: 1.22;
  max-width: 13em;   /* CJK: `ch` is a Latin measure and would wrap badly */
}

/* The page-level action. One step stronger than the product CTAs,
   which are scoped to a single section; this one is scoped to the
   page. 17px is B2's frozen value. */
.cta--strong { font-size: 17px; }

/* ============================================================
   FOOTER
   ------------------------------------------------------------
   Site infrastructure, not a narrative section. It carries the
   brand, the product routes, the legal routes and the copyright,
   and it is deliberately the quietest block on the page: one
   hairline, no background, no panel, no columns of marketing.

   It reproduces the page's own product/non-product distinction.
   FIND and UNDERSTAND are products and appear as columns; BUILD is
   not a product and appears nowhere here as one — the third column
   is Legal, and KeyLen Studio has no footer entry by design.

   The contact group is WITHHELD pending gate W-2 (no mailbox
   exists). It is NOT stubbed: there is no empty column, no
   placeholder and no "Contact" label without content. The grid is
   built for the content that actually exists. */
.site-footer {
  border-top: var(--rule-w) solid var(--rule);
  padding: var(--space-8) 0 46px;   /* 46px is B2's frozen value; no token matches */
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
  gap: var(--colgap);
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;   /* B2's frozen value; --fs-brand is 17px and is the header's */
  font-weight: 650;
}
.foot-brand img { display: block; }

.foot-head {
  margin: 0 0 12px;
  font-size: 11px;           /* B2's frozen values — smaller and looser */
  letter-spacing: 0.14em;    /* than --fs-label/--track-label, and correct here */
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
}

.foot-col a {
  display: block;
  color: var(--fg);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 9px;
}
.foot-col a:hover { color: var(--accent); }

.foot-note { margin: 48px 0 0; font-size: 13px; color: var(--fg-note); }

/* ============================================================
   MOBILE — the desktop composition collapses to one reading axis
   ============================================================ */
@media (max-width: 900px) {
  .page { padding: 0 var(--gutter-sm); }

  .header-grid {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--header-h-sm);
  }
  .brand { flex: 0 0 auto; gap: 8px; }
  .brand img { width: 24px; height: 24px; }
  .site-nav { flex: 0 0 auto; gap: 18px; }
  .lang { margin-left: auto; gap: 7px; font-size: 13px; }

  /* the grid collapses: every anchored block returns to one column */
  .grid { grid-template-columns: 1fr; row-gap: 0; }
  .c-wide, .c-tail, .c-lab, .c-head, .c-body, .c-side, .c-cta, .c-build,
  .t-display, .t-lede, .t-closing,
  .bridge .rule-full, .t-bridge, .t-bridge-sub { grid-column: 1 / -1; }

  /* the closing keeps a page-ending rhythm, not a product rhythm */
  .closing { padding: var(--closing-pad-sm); }

  /* the footer collapses to two tracks; the brand row takes the full
     width above them */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .foot-brand { grid-column: 1 / -1; }

  /* BUILD collapses to the same single axis — the empty 9–12 column
     leaves no gap on mobile, because there is nothing to leave out */
  .build { padding: var(--build-pad-sm); }

  /* the bridge keeps a lighter rhythm than a product section */
  .bridge { padding: var(--bridge-pad-sm) 0; }
  .bridge .rule-full { margin-bottom: var(--space-4); }

  /* the desktop spread becomes a single reading axis, in DOM order:
     tick · label · identity · headline · body · statement · CTA */
  .product .grid { row-gap: var(--space-2); }
  .product .c-head, .product .c-body, .product .c-side, .product .c-cta { grid-row: auto; }
  .product .c-cta { margin-top: var(--space-2); }
  .product { padding: var(--section-pad-sm) 0; }

  .hero { padding: 64px 0 var(--space-8); }
  .t-lede { margin-top: var(--space-2); font-size: 19px; }
  .t-body { font-size: var(--fs-small); }
}

/* ============================================================
   FINDER PRODUCT PAGE — /finder
   ------------------------------------------------------------
   `/finder` is a PRODUCT PAGE, not a second homepage. It reuses
   the homepage's field, type scale, header, footer and every
   token unchanged. Only two things are new: the product identity
   row above the hero headline, and the problem statement's
   rhythm.

   Everything below is ADDITIVE. No rule above this marker was
   touched, so the frozen homepage cannot be affected by it.
   ============================================================ */

/* The product identity: the approved Finder mark beside the
   frozen eyebrow. The mark, its size and the 11px gap are the
   ones the homepage's FIND section already carries — the
   treatment is REUSED rather than reinvented, so `/finder` reads
   as the same product the homepage describes. Nothing is
   redrawn and no new icon is introduced. */
.finder-id {
  grid-column: 1 / 9;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 var(--space-6);
}
.finder-id img { display: block; flex: 0 0 auto; }

/* The hero's one action. Deliberately SECONDARY: there is no
   confirmed distribution path, so this page must not carry
   anything shaped like a primary button.

   THE COLUMN IS REQUIRED. `.cta-row` carries only `margin: 0` —
   on the homepage it is always paired with `.c-cta`, which supplies
   the column. Without one here the CTA is auto-placed into a single
   1/12 column and wraps one word per line. `1 / 9` is the Hero's own
   anchor: the CTA sits below the body, flush with the Hero text. */
.finder-action {
  grid-column: 1 / 9;
  margin-top: var(--space-6);
}

/* The problem statement. A beat, not a layer — lighter than a
   product section. It is the last section in this slice, but the
   bottom padding is deliberately NOT a closing value: Sections
   03–07 will sit between it and the footer. */
.finder-problem { padding: var(--bridge-pad) 0; }

/* ---- 03 · What Finder searches --------------------------------
   The explanatory core. Headline and body enter at column 4 — the
   same left edge the homepage's product headlines use — which
   indents this section relative to the two above it and marks it as
   the explanation rather than another statement. The capture below
   spans the FULL content field: it is evidence, and it has to stay
   legible, so it takes every column the page has. */
.finder-searches { padding: var(--section-pad) 0; }
.finder-searches .grid { row-gap: var(--space-4); }

.c-search-head { grid-column: 4 / 12; }
.c-search-body { grid-column: 4 / 9; }
.c-search-body p + p { margin-top: var(--space-3); }

.c-search-shot {
  grid-column: 1 / 13;
  margin: var(--space-8) 0 0;
}

/* Proportional only. The capture keeps its own aspect ratio, is never
   enlarged past its capture resolution, and carries no frame, shadow
   or mock macOS chrome — the screenshot is the evidence, and the
   whitespace around it is the composition. */
.c-search-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 04 · Where it looks --------------------------------------
   Deliberately NOT shaped like Section 03. This section opens with
   the full-field hairline the homepage's bridges use, and its
   headline returns to the LEFT EDGE of the field — where Section 03
   is indented. The pair reads as two movements of one explanation
   rather than as a template repeated twice.

   The capture again spans the full content field, for the same
   reason Section 03's does: it is evidence, and it has to stay
   legible. No frame, no shadow, no mock chrome. */
.finder-looks { padding: var(--bridge-pad) 0 var(--section-pad); }
.finder-looks .grid { row-gap: var(--space-4); }

/* the bridge grammar, reused verbatim — full-content-width rule */
.finder-looks .rule-full {
  grid-column: 1 / 13;
  border-top: var(--rule-w) solid var(--rule);
  margin-bottom: var(--space-6);
}

.c-looks-body p + p { margin-top: var(--space-3); }

.c-looks-shot { grid-column: 1 / 13; margin: var(--space-8) 0 0; }
.c-looks-shot img { display: block; width: 100%; height: auto; }

/* ---- 05 · Local · Fast · Private ------------------------------
   The page's peak, and the ONLY section that carries no image.

   It reuses the site's page-statement typography (`.t-closing`) and
   its tail anchor (`.c-tail`) UNCHANGED — the same two shapes the
   homepage's Closing already uses — so the peak introduces no new
   type at all. What it gets instead is air: more above and below
   than any other section on the page, which is what makes it read
   as the moment the reader is meant to keep.

   `Fast` appears in the headline because it is part of the frozen
   trio, and nothing beneath it elaborates or quantifies it. That
   asymmetry is the honest state of the product. */
.finder-privacy { padding: var(--space-16) 0; }
.finder-privacy .grid { row-gap: var(--space-8); }

/* The four facts: one short line each, led by a bold phrase. Not
   cards, not a grid, not boxed — a list, set in the same column as
   the headline. Leading is inherited from `body`, so Chinese gets
   its own value without anything being set here. */
.c-privacy-facts p {
  margin: 0;
  font-size: var(--fs-body-lg);
  color: var(--fg);
}
.c-privacy-facts p + p { margin-top: var(--space-3); }
.c-privacy-facts strong { font-weight: 650; }

/* ---- 06 · Where Finder stops ----------------------------------
   Four boundaries, set as a deliberate EDGE rather than an
   apology. It shares Section 03's indent — the two are the page's
   explanation sections — but is calmer than it: the points sit in
   the muted tier with only their lead phrases at full contrast,
   and there is no rule, no tint, no border and no warning colour
   anywhere near it. It is a boundary statement, not a disclaimer. */
.finder-stops { padding: var(--section-pad) 0; }
.finder-stops .grid { row-gap: var(--space-4); }

.c-stops-head { grid-column: 4 / 12; }
.c-stops-body { grid-column: 4 / 9; }
.c-stops-body p {
  margin: 0;
  font-size: var(--fs-body-lg);
  color: var(--muted);
}
.c-stops-body p + p { margin-top: var(--space-3); }
.c-stops-body strong { font-weight: 650; color: var(--fg); }

/* ---- 07 · Closing ---------------------------------------------
   The page's final breath — and deliberately NOT a clone of the
   homepage's Closing. That one resolves on the tail anchor (4–13)
   at closing scale; this one returns to the LEFT EDGE (1–9) at
   section scale, so it neither repeats Section 05 nor repeats the
   homepage's ending grammar.

   The frozen primary CTA slot is RESERVED / WITHHELD: there is no
   App Store URL, download route, price or purchase path. NOTHING is
   placed here — no button, no disabled button, no placeholder. The
   slot is empty because its destination does not exist, and the
   space below is what makes that read as an ending rather than as a
   missing component. */
.finder-close { padding: var(--section-pad) 0 var(--space-16); }
.finder-close .grid { row-gap: var(--space-4); }

.c-close-head { grid-column: 1 / 9; }
.c-close-body { grid-column: 1 / 9; }

@media (max-width: 900px) {
  /* The two new anchors collapse to the single reading axis.
     Added here rather than to the shared reset list, so that
     shared rule stays byte-identical. */
  .finder-id,
  .finder-action,
  .c-search-head,
  .c-search-body,
  .c-search-shot { grid-column: 1 / -1; }

  .finder-id { margin-bottom: var(--space-4); }
  .finder-action { margin-top: var(--space-4); }

  .finder-problem { padding: var(--bridge-pad-sm) 0; }

  .finder-searches { padding: var(--section-pad-sm) 0; }
  .c-search-shot { margin-top: var(--space-6); }

  /* `.c-wide` members are already reset by the shared list above;
     only the two new anchors need adding here. */
  .c-looks-shot,
  .finder-looks .rule-full { grid-column: 1 / -1; }

  .finder-looks { padding: var(--bridge-pad-sm) 0 var(--section-pad-sm); }
  .c-looks-shot { margin-top: var(--space-6); }

  /* still the roomiest section, at every width */
  .finder-privacy { padding: var(--space-12) 0; }

  .c-stops-head,
  .c-stops-body,
  .c-close-head,
  .c-close-body { grid-column: 1 / -1; }

  .finder-stops { padding: var(--section-pad-sm) 0; }
  /* the page still ends quietly, and above the footer's own rule */
  .finder-close { padding: var(--section-pad-sm) 0 var(--space-12); }
}