/* ============================================================================
   kv_home_login.css — R-02 login-first homepage (2026-08-05)

   Loaded ONLY when admin_global_settings.public_pages.home_login_split = 1.
   Flag off ships zero bytes of this file.

   THE BRIEF THIS ANSWERS
   The founder compared the page to Instagram's signed-out screen: "padding etc
   must be professional — it looks more a startup or entrepreneur thing." That
   is a craft complaint, and craft complaints are almost never about one margin.
   The previous hero mixed 800-weight micro-labels, three-stop gradient text,
   gradient-filled buttons with coloured glow shadows, rainbow avatar discs and
   ad-hoc margins (18px, 22px, 11px, 7px, .72rem, .84rem...). Individually
   defensible; together they read as a template.

   SO EVERYTHING HERE OBEYS TWO SCALES AND ONE ACCENT.
   - Spacing: a 4px-based modular scale, nine steps. No length in this file is
     anything other than one of those tokens (borders, hairlines and optical
     nudges on absolutely-positioned decoration excepted, and marked where used).
   - Type: eight sizes, five weights. No 800/900 anywhere.
   - Colour: ONE accent (#5b3ee8) as a flat fill. No gradient buttons, no
     coloured glow shadows, no gradient text. Shadows are neutral and quiet.
   - One focal point per viewport: the "Log in" button.

   Mobile-first: every rule is the 375px layout; media queries only widen it.
   ============================================================================ */

.kv-lsplit {
  /* ---- SPACING SCALE (4px base) ------------------------------------------ */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* ---- TYPE SCALE -------------------------------------------------------- */
  --f-eyebrow: 11.5px;   /* uppercase section labels                */
  --f-meta:    12.5px;   /* timestamps, counts, legal               */
  --f-sm:      13.5px;   /* secondary UI, links, helper text        */
  --f-body:    15px;     /* body copy, form fields                  */
  --f-lead:    16.5px;   /* the sentence under the H1               */
  --f-title:   19px;     /* card titles                             */
  --f-h2:      clamp(23px, 3.2vw, 30px);
  --f-h1:      clamp(31px, 8.4vw, 38px);

  /* ---- WEIGHTS (five, used deliberately) --------------------------------- */
  --w-body: 400;
  --w-med:  500;
  --w-semi: 600;
  --w-bold: 700;
  --w-disp: 750;

  /* ---- LINE HEIGHTS ------------------------------------------------------ */
  --lh-tight: 1.08;
  --lh-snug:  1.35;
  --lh-body:  1.6;
  --lh-loose: 1.7;

  /* ---- COLOUR ------------------------------------------------------------ */
  --c-ink:    #0f1426;   /* headings, names                          */
  --c-ink-2:  #39415a;   /* body copy                                */
  --c-mut:    #6a7286;   /* secondary                                */
  --c-hint:   #99a0b2;   /* labels, meta                             */
  --c-line:   #e4e7f0;   /* borders                                  */
  --c-line-2: #eef0f7;   /* hairline dividers                        */
  --c-surf:   #ffffff;
  --c-surf-2: #f7f8fc;   /* recessed panels                          */
  --c-acc:    #5b3ee8;   /* THE accent — flat fill only              */
  --c-acc-ink:#4a30cc;   /* accent hover / accent text on light      */
  --c-acc-wash:#f2effe;  /* accent tint surface                      */
  --c-danger: #c0392b;

  /* ---- ELEVATION (neutral, never coloured) ------------------------------- */
  --e-1: 0 1px 2px rgba(15, 20, 38, .04);
  --e-2: 0 1px 3px rgba(15, 20, 38, .05), 0 12px 28px -20px rgba(15, 20, 38, .30);

  /* ---- RADII ------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
}

/* ---------------------------------------------------------------------------
   §4b. ONE CONTINUOUS BACKDROP, HERO THROUGH SEARCH
   The search block sits inside .hero, so the skyline element already spanned it
   — but at .16 opacity it was invisible down there and the section read as
   detached. Three fixes:

   1. Opacity raised so the artwork is actually present behind the search card.
   2. background-size: 100% auto. The source art is 1366x279; at `auto` it left
      an empty 45px band at 1425px and a much larger one on a 1920 monitor, and
      `cover` would stretch a 4.9:1 strip vertically into mush. Scaling to the
      container width keeps the aspect ratio, never tiles (repeat stays
      no-repeat) and has no edge band at any width.
   3. bottom: 0 instead of -50px, so the artwork is not clipped by .hero's
      overflow:hidden before it reaches the search card.

   A page-wide vertical wash carries the tone from the hero into the search
   block so the two are one surface rather than two panels.
   ------------------------------------------------------------------------ */
.kv-lsplit .hero {
  background: linear-gradient(180deg, #fcfcff 0%, #f7f8fd 58%, #eff2fb 100%);
}
.kv-lsplit .hero::before { opacity: .45; }
.kv-lsplit .skyline {
  opacity: .40;
  bottom: 0;
  /* Full viewport width, not 99% of the container: at 1920 the container is
     1180 and the artwork terminated in a hard vertical edge three-quarters
     across, which is the seam that was reported. */
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  transform: translateX(-50%);
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* Belt and braces: even at full width the artwork must never END in a line.
     Both edges are faded out, so any terminus is a gradient. Browsers without
     mask support simply show the un-masked art, which is still full-bleed. */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 14%, #000 86%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 14%, #000 86%, rgba(0,0,0,0) 100%);
}
/* Legibility guard: a soft light scrim between the artwork and the search
   content. Full-bleed and edge-faded for the same reason as the artwork. */
.kv-lsplit .kvl-searchband::before {
  content: "";
  position: absolute;
  top: calc(var(--s5) * -1);
  bottom: calc(var(--s5) * -1);
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .58) 34%, rgba(255, 255, 255, .58) 100%);
  pointer-events: none;
}

/* ============================================================================
   1. THE SPLIT
   Mobile DOM order is the reading order we want: lede -> auth -> proof ->
   search. Desktop re-places the auth card into a second column via explicit
   grid placement, so no markup is duplicated and no order is faked.
   ========================================================================== */
.kvl-hero { position: relative; z-index: 2; }

.kvl-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s6);
  padding: var(--s5) 0 var(--s7);
  align-items: start;
}

/* ---- 1a. lede ------------------------------------------------------------ */
.kvl-lede { max-width: 34rem; }

.kvl-eyebrow {
  display: block;
  font-size: var(--f-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-acc);
  margin: 0 0 var(--s3);
}

.kv-lsplit .kvl-lede h1 {
  font-size: var(--f-h1);
  line-height: var(--lh-tight);
  font-weight: var(--w-disp);
  letter-spacing: -.028em;
  color: var(--c-ink);
  margin: 0;
}
/* Solid accent, not a three-stop gradient. The gradient was the single most
   "startup template" element on the page. */
.kv-lsplit .kvl-lede h1 .kvl-accent {
  color: var(--c-acc);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.kvl-sub {
  margin: var(--s4) 0 0;
  font-size: var(--f-lead);
  line-height: var(--lh-body);
  font-weight: var(--w-body);
  color: var(--c-ink-2);
  max-width: 32rem;
}

/* ============================================================================
   2. THE LOGIN CARD — the page's single focal point
   ========================================================================== */
.kvl-auth { min-width: 0; }

.kvl-card {
  background: var(--c-surf);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--e-2);
}

.kvl-card-head { margin: 0 0 var(--s5); }
.kvl-card-head h2 {
  font-size: var(--f-title);
  line-height: var(--lh-snug);
  font-weight: var(--w-bold);
  letter-spacing: -.012em;
  color: var(--c-ink);
  margin: 0;
}
.kvl-card-head p {
  margin: var(--s1) 0 0;
  font-size: var(--f-sm);
  line-height: var(--lh-body);
  color: var(--c-mut);
}

/* ---- fields -------------------------------------------------------------- */
.kvl-field { margin: 0 0 var(--s4); }

.kvl-label {
  display: block;
  font-size: var(--f-meta);
  font-weight: var(--w-semi);
  color: var(--c-ink-2);
  margin: 0 0 var(--s2);
}

.kvl-input {
  width: 100%;
  height: var(--s7);                     /* 48px — comfortable, not chunky */
  padding: 0 var(--s4);
  font-family: inherit;
  font-size: var(--f-body);
  font-weight: var(--w-body);
  color: var(--c-ink);
  background: var(--c-surf);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
/* --c-hint measured 2.62:1 against white — too faint for text that carries the
   field's only instruction. --c-mut lands at 4.81:1 and still reads as a hint. */
.kvl-input::placeholder { color: var(--c-mut); }
.kvl-input:hover  { border-color: #d6dae8; }
.kvl-input:focus  { border-color: var(--c-acc); box-shadow: 0 0 0 3px rgba(91, 62, 232, .12); }

/* password + reveal share one bordered shell so the toggle never looks bolted on */
.kvl-pw { position: relative; }
.kvl-pw .kvl-input { padding-right: var(--s8); }
.kvl-reveal {
  position: absolute;
  top: 50%;
  right: var(--s1);
  transform: translateY(-50%);
  height: calc(var(--s7) - var(--s2));
  padding: 0 var(--s3);
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--f-meta);
  font-weight: var(--w-semi);
  color: var(--c-mut);
  cursor: pointer;
}
.kvl-reveal:hover { color: var(--c-ink); background: var(--c-surf-2); }

.kvl-field-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin: 0 0 var(--s2);
}
.kvl-field-top .kvl-label { margin: 0; }

.kvl-link {
  font-size: var(--f-meta);
  font-weight: var(--w-semi);
  color: var(--c-acc);
  /* The visible text is 16px tall, which is a poor thumb target. Padding grows
     the hit area to ~40px and the equal negative margin cancels the layout
     effect, so the spacing scale above is preserved exactly. */
  padding: var(--s3) var(--s2);
  margin: calc(var(--s3) * -1) calc(var(--s2) * -1);
}
.kvl-link:hover { color: var(--c-acc-ink); text-decoration: underline; }

/* ---- consent (DPDP — the live login requires it, so this form does too) --- */
.kvl-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin: 0 0 var(--s5);
}
.kvl-consent input[type="checkbox"] {
  flex: none;
  width: 18px;                  /* 18px: the smallest box that still reads as hit-able */
  height: 18px;
  margin-top: 1px;              /* optical: aligns the box to the cap height */
  accent-color: var(--c-acc);
  cursor: pointer;
}
/* The <label for> makes the whole two-line sentence the target, so the effective
   consent hit area is ~40px tall even though the box itself is 18px. */
.kvl-consent label {
  font-size: var(--f-meta);
  line-height: var(--lh-body);
  color: var(--c-mut);
  cursor: pointer;
}
.kvl-consent a { color: var(--c-acc); font-weight: var(--w-semi); }
.kvl-consent a:hover { text-decoration: underline; }

/* ---- the primary action -------------------------------------------------- */
.kvl-submit {
  width: 100%;
  height: var(--s7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: var(--f-body);
  font-weight: var(--w-bold);
  letter-spacing: -.005em;
  color: #fff;
  background: var(--c-acc);       /* FLAT. no gradient, no glow. */
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color .15s ease;
}
.kvl-submit:hover  { background: var(--c-acc-ink); }
.kvl-submit:active { background: var(--c-acc-ink); }
.kvl-submit:focus-visible { outline: 2px solid var(--c-acc-ink); outline-offset: 2px; }
.kvl-submit[disabled] { opacity: .6; cursor: default; }

/* ---- status message ------------------------------------------------------ */
.kvl-status {
  font-size: var(--f-meta);
  line-height: var(--lh-body);
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--c-surf-2);
  color: var(--c-ink-2);
}
.kvl-status:empty { display: none; margin: 0; padding: 0; border: 0; }
.kvl-status[data-tone="error"] { border-color: #f2d4d0; background: #fdf5f4; color: var(--c-danger); }
.kvl-status[data-tone="ok"]    { border-color: #cfe9db; background: #f3fbf7; color: #17694a; }

/* ---- divider + secondary action ------------------------------------------ */
.kvl-or {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin: var(--s5) 0;
  font-size: var(--f-meta);
  font-weight: var(--w-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-hint);
}
.kvl-or::before,
.kvl-or::after { content: ""; flex: 1; height: 1px; background: var(--c-line-2); }

.kvl-secondary {
  width: 100%;
  height: var(--s7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f-body);
  font-weight: var(--w-semi);
  color: var(--c-ink);
  background: var(--c-surf);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: background-color .15s ease, border-color .15s ease;
}
.kvl-secondary:hover { background: var(--c-surf-2); border-color: #d6dae8; }

.kvl-foot {
  margin: var(--s4) 0 0;
  font-size: var(--f-meta);
  line-height: var(--lh-body);
  color: var(--c-hint);
  text-align: center;
}
.kvl-foot a { color: var(--c-mut); font-weight: var(--w-med); }
.kvl-foot a:hover { color: var(--c-ink); text-decoration: underline; }

/* ============================================================================
   3. PROOF — a human being, not a wall of cards
   One real member post plus a row of real member faces. Both vanish entirely
   when their query returns nothing; neither has a placeholder state.
   ========================================================================== */
.kvl-proof { max-width: 34rem; }

.kvl-proof-label {
  display: block;
  font-size: var(--f-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-hint);
  margin: 0 0 var(--s2);
}

.kvl-proof-note {
  margin: 0 0 var(--s3);
  font-size: var(--f-sm);
  line-height: var(--lh-body);
  color: var(--c-mut);
  max-width: 30rem;
}

/* ---- faces row ----------------------------------------------------------- */
.kvl-faces {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s5);
  flex-wrap: wrap;
}
.kvl-face-stack { display: flex; }
.kvl-face {
  width: var(--s6);
  height: var(--s6);
  border-radius: var(--r-pill);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f-meta);
  font-weight: var(--w-bold);
  color: #fff;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 2px var(--c-surf);   /* the white ring that separates them */
}
.kvl-face + .kvl-face { margin-left: calc(var(--s2) * -1); }
/* Five muted tints. A member keeps the same one because the index is derived
   from their name, not from their position in the list. */
.kvl-face.t0 { background-color: #5b3ee8; }
.kvl-face.t1 { background-color: #2f6bff; }
.kvl-face.t2 { background-color: #0f8b6c; }
.kvl-face.t3 { background-color: #b4436c; }
.kvl-face.t4 { background-color: #7a5230; }
.kvl-face.has-img { color: transparent; }

.kvl-faces-cap {
  font-size: var(--f-sm);
  line-height: var(--lh-snug);
  color: var(--c-mut);
  font-weight: var(--w-med);
}
.kvl-faces-cap b { color: var(--c-ink); font-weight: var(--w-semi); }

/* ---- the one post -------------------------------------------------------- */
.kvl-post {
  background: var(--c-surf);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--e-1);        /* quiet: supporting evidence, not a rival CTA */
}

/* Rendered only when media_json produced a file that exists on disk. When it
   does not, the card is text-only and is designed to look finished that way —
   see .kvl-post-body padding, which does not change between the two states. */
.kvl-post-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--c-surf-2);
  border-bottom: 1px solid var(--c-line-2);
}

.kvl-post-body { padding: var(--s4); }

.kvl-post-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s3);
}
.kvl-post-av {
  width: var(--s6);
  height: var(--s6);
  border-radius: var(--r-pill);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f-meta);
  font-weight: var(--w-bold);
  color: #fff;
  background-size: cover;
  background-position: center;
}
.kvl-post-av.t0 { background-color: #5b3ee8; }
.kvl-post-av.t1 { background-color: #2f6bff; }
.kvl-post-av.t2 { background-color: #0f8b6c; }
.kvl-post-av.t3 { background-color: #b4436c; }
.kvl-post-av.t4 { background-color: #7a5230; }
.kvl-post-av.has-img { color: transparent; }

.kvl-post-who { min-width: 0; }
.kvl-post-name {
  display: block;
  font-size: var(--f-sm);
  font-weight: var(--w-bold);
  color: var(--c-ink);
  line-height: var(--lh-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kvl-post-meta {
  display: block;
  font-size: var(--f-meta);
  color: var(--c-hint);
  line-height: var(--lh-snug);
}

.kvl-post-text {
  margin: 0;
  font-size: var(--f-body);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
}

.kvl-post-eng {
  display: flex;
  gap: var(--s4);
  margin: var(--s3) 0 0;
  padding: var(--s3) 0 0;
  border-top: 1px solid var(--c-line-2);
  font-size: var(--f-meta);
  font-weight: var(--w-med);
  color: var(--c-mut);
}

/* ============================================================================
   4. SEARCH BAND
   Kept (the founder wants it kept) but given real presence: a recessed panel,
   a properly aligned location chip, one field, one solid submit. No gradient.
   ========================================================================== */
/* No top border and no background of its own: the search block must read as the
   SAME surface as the hero, with the skyline artwork running continuously
   underneath it (see §4b). A divider here is precisely what made it look bolted
   on. */
.kvl-searchband {
  position: relative;
  /* Tightened: this used to sit under .kvl-split's 48px bottom padding for an
     80px void above the label. 24 + 24 = 48 total, both scale values. */
  padding: var(--s5) 0 var(--s7);
}

/* ONE GRID FOR THE WHOLE SECTION.
   Label, tab row, card and secondary action are all rows of the same single
   column grid and are all stretched to it, so they share identical left and
   right edges by construction rather than by four coincidentally-equal
   margins. Vertical rhythm is row-gap only — no child sets its own margin. */
.kvl-searchband-in {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "lbl" "tabs" "form" "cta";
  justify-items: stretch;
  row-gap: var(--s3);
}
.kvl-searchband-l { grid-area: lbl; margin: 0; }
.kvl-stabs        { grid-area: tabs; margin: 0; }
.kv-lsplit .searchcard-tabbed { grid-area: form; width: 100%; }
.kvl-stab-cta     { grid-area: cta; }
.kvl-searchband-l {
  display: block;
  font-size: var(--f-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: .1em;
  text-transform: uppercase;
  /* One step darker than the other eyebrows on the page: this label sits over
     the backdrop artwork rather than over flat white, and --c-hint measured too
     light against it. */
  color: var(--c-mut);
  margin: 0 0 var(--s3);
}

/* ---- 4a. scope tabs, sitting ON the backdrop above the card ---------------- */
.kvl-stabs {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin: 0 0 var(--s3);
}
.kvl-stabs-scroll {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex: 1 1 auto;
  min-width: 0;
  /* Scrolls rather than wraps. A wrapped tab row at 375px is two cramped lines;
     a scrolling one stays a single confident row at any width, and the page
     itself never gains horizontal scroll because the overflow is owned here. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.kvl-stabs-scroll::-webkit-scrollbar { display: none; }

.kvl-stab {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  padding: var(--s3) 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--f-sm);
  font-weight: var(--w-semi);
  line-height: 1.2;
  color: var(--c-mut);
  white-space: nowrap;
  cursor: pointer;
}
.kvl-stab:hover { color: var(--c-ink); }
/* The active marker: a short rule under the label, as in the reference. */
.kvl-stab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: var(--r-pill);
  background: transparent;
}
.kvl-stab.is-on { color: var(--c-ink); font-weight: var(--w-bold); }
/* Near-black, matching the Search button. The search bar is deliberately ONE
   monochrome system: a violet underline against a near-black submit read as two
   competing accents. The violet accent belongs to the login card. */
.kvl-stab.is-on::after { background: var(--c-ink); }
.kvl-stab:focus-visible { outline: 2px solid var(--c-acc); outline-offset: 2px; border-radius: var(--r-sm); }

/* Phone: a deliberate full-width badge flush to the card's own edges — never a
   half-indented link floating under one corner. Desktop pins it to the right
   end of the tab row (see §6), the way the reference does. */
.kvl-stab-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--s7);
  padding: 0 var(--s4);
  border-radius: var(--r-md);
  background: var(--c-surf);
  border: 1px solid var(--c-line);
  font-size: var(--f-sm);
  font-weight: var(--w-bold);
  color: var(--c-ink);
  white-space: nowrap;
}
.kvl-stab-cta:hover { background: var(--c-surf-2); border-color: #d6dae8; }

/* The slim search card, rebuilt. Overrides kv_index_v2.css .searchcard chrome. */
.kv-lsplit .searchcard-slim {
  background: var(--c-surf);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-2);
  /* The card felt packed: the placeholder ran almost into the Search button.
     12px of shell padding plus a 16px gutter inside the row gives the reference's
     breathing room. */
  padding: var(--s3);
  max-width: none;
}
.kv-lsplit .searchcard-slim .searchrow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s3);
  margin: 0;
  border: 0;
  background: none;
  padding: 0;
}
.kv-lsplit .searchcard-slim .locwrap { position: relative; }
.kv-lsplit .searchcard-slim .loc {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  height: var(--s7);
  padding: 0 var(--s4);
  background: var(--c-surf-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--c-ink);
}
.kv-lsplit .searchcard-slim .loc:hover { border-color: var(--c-line); }
.kv-lsplit .searchcard-slim .loc .pin { color: var(--c-acc); display: flex; }
.kv-lsplit .searchcard-slim .loc small {
  display: block;
  font-size: var(--f-meta);
  font-weight: var(--w-med);
  color: var(--c-hint);
  line-height: 1.2;
}
.kv-lsplit .searchcard-slim .loc b {
  display: block;
  font-size: var(--f-sm);
  font-weight: var(--w-semi);
  color: var(--c-ink);
  line-height: 1.3;
}
.kv-lsplit .searchcard-slim .qinput {
  width: 100%;
  height: var(--s7);
  padding: 0 var(--s4);
  font-family: inherit;
  font-size: var(--f-body);
  color: var(--c-ink);
  background: var(--c-surf-2);
  border: 1px solid transparent !important;
  border-radius: var(--r-md);
  outline: none;
}
.kv-lsplit .searchcard-slim .qinput::placeholder { color: var(--c-mut); }
.kv-lsplit .searchcard-slim .qinput:focus {
  background: var(--c-surf);
  border-color: var(--c-acc) !important;
  box-shadow: 0 0 0 3px rgba(91, 62, 232, .12);
}
.kv-lsplit .searchcard-slim .gobtn {
  height: var(--s7);
  padding: 0 var(--s5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: inherit;
  font-size: var(--f-body);
  font-weight: var(--w-bold);
  color: #fff;
  background: var(--c-ink);      /* solid ink — the accent belongs to Log in */
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color .15s ease;
}
.kv-lsplit .searchcard-slim .gobtn:hover { background: #000; }
.kv-lsplit .searchcard-slim .locpop {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  box-shadow: var(--e-2);
}

/* ============================================================================
   5. MODULE GRID ("One account, the whole neighbourhood")
   Every element is kept. Only the finish is brought onto the scales above:
   consistent radii, tokenised padding, quieter chips, flat CTA buttons.
   ========================================================================== */
.kv-lsplit .bento-section { padding-top: var(--s8); padding-bottom: var(--s8); }

.kv-lsplit .bento-head { margin-bottom: var(--s6); }
.kv-lsplit .bento-kick {
  font-size: var(--f-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-hint);
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.kv-lsplit .bento-kick .dot { display: none; }
.kv-lsplit .bento-head h2 {
  font-size: var(--f-h2);
  line-height: var(--lh-snug);
  font-weight: var(--w-disp);
  letter-spacing: -.022em;
  color: var(--c-ink);
  margin: var(--s3) 0 0;
}
.kv-lsplit .bento-head h2 .grad {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--c-acc);
}
.kv-lsplit .bento-head p {
  margin: var(--s3) 0 0;
  font-size: var(--f-body);
  line-height: var(--lh-body);
  color: var(--c-mut);
  max-width: 34rem;
}

.kv-lsplit .bento-grid { gap: var(--s3); }
.kv-lsplit .bento-tile {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  box-shadow: var(--e-1);
  padding: var(--s4);
}
.kv-lsplit .bt-chip {
  font-size: var(--f-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-mut);
  background: var(--c-surf-2);
  border: 0;
  border-radius: var(--r-pill);
  padding: var(--s1) var(--s3);
}
.kv-lsplit .bt-cta {
  font-size: var(--f-sm);
  font-weight: var(--w-semi);
  color: var(--c-acc);
}
.kv-lsplit .bt-stat2 b {
  font-size: var(--f-sm);
  font-weight: var(--w-bold);
  color: var(--c-ink);
}
.kv-lsplit .bt-stat2 span {
  font-size: var(--f-meta);
  color: var(--c-mut);
}
.kv-lsplit .bt-stat b.count {
  font-size: 26px;                /* one deliberate display size for the counter */
  font-weight: var(--w-disp);
  letter-spacing: -.02em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--c-ink);
}
.kv-lsplit .bt-stat span { font-size: var(--f-meta); color: var(--c-mut); }

/* NEARBY tile: real member faces replace the four decorative CSS discs. */
.kvl-np-faces { display: flex; margin: var(--s2) 0 var(--s3); }
.kvl-np-faces .kvl-face { width: var(--s6); height: var(--s6); }

/* Join panel — flat buttons, tokenised spacing. */
.kv-lsplit .t-join .join-in { gap: var(--s5); padding: var(--s2); }
.kv-lsplit .t-join h3 {
  font-size: var(--f-title);
  font-weight: var(--w-disp);
  letter-spacing: -.018em;
  color: var(--c-ink);
}
.kv-lsplit .t-join h3 .grad {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--c-acc);
}
.kv-lsplit .t-join p {
  margin: var(--s2) 0 0;
  font-size: var(--f-sm);
  line-height: var(--lh-body);
  color: var(--c-mut);
}
.kv-lsplit .join-btns { gap: var(--s3); }

/* Every gradient-filled button in the PAGE BODY becomes a flat fill.
   Scoped away from .kx-header on purpose: the header's Menu/Get App/Log in
   buttons are sized to fit a 375px bar with no slack, and re-padding them here
   pushed .nav-right to 389px and gave the document 14px of horizontal scroll.
   Measured, caught, and fenced — the header keeps its own metrics. */
.kv-lsplit :is(.hero, .bento-section, .kx-footer) .btn-grad {
  background: var(--c-acc);
  box-shadow: none;
  border-radius: var(--r-md);
  font-weight: var(--w-bold);
  padding: var(--s3) var(--s5);
}
.kv-lsplit :is(.hero, .bento-section, .kx-footer) .btn-grad:hover { background: var(--c-acc-ink); }
.kv-lsplit :is(.hero, .bento-section, .kx-footer) .btn-ghost {
  border-radius: var(--r-md);
  border-color: var(--c-line);
  font-weight: var(--w-semi);
  padding: var(--s3) var(--s5);
}
.kv-lsplit :is(.hero, .bento-section, .kx-footer) .btn-ghost:hover { background: var(--c-surf-2); }
/* Header buttons: colour only, geometry untouched. */
.kv-lsplit .kx-header .btn-grad { background: var(--c-acc); box-shadow: none; }
.kv-lsplit .kx-header .btn-grad:hover { background: var(--c-acc-ink); }

/* ============================================================================
   6. WIDER SCREENS
   ========================================================================== */
@media (min-width: 700px) {
  .kv-lsplit .searchcard-slim .searchrow {
    flex-direction: row;
    align-items: center;
  }
  .kv-lsplit .searchcard-slim .locwrap { flex: 0 0 13rem; }
  .kv-lsplit .searchcard-slim .qinput  { flex: 1 1 auto; }
  .kv-lsplit .searchcard-slim .gobtn   { flex: none; }

  /* Segments, not stacked inputs. The scope selector and the query share one
     white field with a hairline between them, exactly as in the reference. */
  .kv-lsplit .searchcard-tabbed .searchrow { gap: 0; }
  .kv-lsplit .searchcard-tabbed .loc,
  .kv-lsplit .searchcard-tabbed .qinput {
    background: var(--c-surf);
    border-color: transparent !important;
    box-shadow: none;
  }
  .kv-lsplit .searchcard-tabbed .locwrap {
    position: relative;
    padding-right: var(--s4);
  }
  .kv-lsplit .searchcard-tabbed .locwrap::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: var(--s5);
    background: var(--c-line);
  }
  /* Room on both sides of the query so the placeholder never crowds either the
     divider or the button. */
  .kv-lsplit .searchcard-tabbed .qinput {
    padding: 0 var(--s5) 0 var(--s4);
    margin-left: var(--s2);
  }
  .kv-lsplit .searchcard-tabbed .qinput:focus {
    background: var(--c-surf-2);
    box-shadow: none;
  }
  /* A real gutter between the query field and the button — measured at 0 before,
     which read as the button being welded to the input. */
  .kv-lsplit .searchcard-tabbed .gobtn { padding: 0 var(--s6); margin-left: var(--s3); }

  /* the secondary action rises to the right end of the tab row */
  .kvl-searchband-in {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "lbl  lbl"
      "tabs cta"
      "form form";
    align-items: center;
    column-gap: var(--s5);
  }
  .kvl-stab-cta {
    justify-self: end;
    min-height: var(--s6);
    padding: 0 var(--s3);
    border-radius: var(--r-pill);
    font-size: var(--f-meta);
  }
}

@media (min-width: 1024px) {
  .kvl-split {
    /* The auth column is fixed so the card never stretches into a letterbox;
       the identity column takes the remainder. */
    grid-template-columns: minmax(0, 1fr) 25rem;
    column-gap: var(--s9);
    row-gap: var(--s7);
    padding: var(--s8) 0 var(--s8);
  }
  .kvl-lede  { grid-column: 1; grid-row: 1; }
  .kvl-proof { grid-column: 1; grid-row: 2; }
  .kvl-auth  { grid-column: 2; grid-row: 1 / span 2; }

  .kv-lsplit .kvl-lede h1 {
    font-size: clamp(40px, 3.6vw, 54px);
    letter-spacing: -.03em;
    line-height: 1.04;
  }
  .kvl-sub { font-size: var(--f-lead); margin-top: var(--s5); }

  .kvl-card { padding: var(--s6); }
  /* Was 64 (split bottom) + 48 (band top) = 112px of void above the label. */
  .kvl-split { padding-bottom: var(--s6); }
  .kvl-searchband { padding: var(--s6) 0 var(--s8); }
  .kvl-searchband-in { row-gap: var(--s4); }
  .kv-lsplit .bento-section { padding-top: var(--s9); padding-bottom: var(--s9); }
}

/* ============================================================================
   6b. OS DARK MODE
   kv_home_bento.css flips ONLY .bento-section to a dark palette under
   prefers-color-scheme:dark, while the hero has always rendered light. That
   already produced a light-hero / dark-modules seam, and this layout made it a
   defect: the overrides in §5 set near-black type, which measured
   rgb(15,20,38) on a rgb(12,16,32) background — a 1.03:1 contrast ratio, i.e.
   invisible.

   Resolution: under this flag the page is deliberately LIGHT throughout, which
   is the same decision login.php already makes for itself ("This login page is
   intentionally LIGHT... so the native app WebView's forced dark mode does NOT
   invert it"). The homepage is now a sign-in surface, so it follows the same
   rule, and the seam disappears instead of being re-tinted.
   ========================================================================== */
.kv-lsplit { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  body.kv-lsplit.kv-bento .bento-section {
    --kvb-ink:  #0f1426;
    --kvb-mut:  #6a7286;
    --kvb-line: #e4e7f0;
    --kvb-card: #ffffff;
    --kvb-bg:   #ffffff;
    --kvb-soft: #f7f8fc;
  }
  .kv-lsplit .bento-section { background: #fff; }
}

/* ============================================================================
   7. ACCESSIBILITY
   ========================================================================== */
.kvl-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kvl-input, .kvl-submit, .kvl-secondary,
  .kv-lsplit .searchcard-slim .gobtn { transition: none; }
}

@media (prefers-contrast: more) {
  .kvl-card, .kvl-post, .kv-lsplit .bento-tile { border-color: #b9bfd0; }
  .kvl-input { border-color: #b9bfd0; }
}

/* ============================================================================
   8. EMBEDDED CARD (2026-08-08) — index_bento.php's centred/production hero
   (home_login_split = 0, home_social_hero = 0). The founder wants that layout
   kept exactly as it renders today, with a login card added beneath its
   existing CTAs. ".kv-lsplit" is put on a small wrapper INSIDE .hero instead
   of on <body> (see index_bento.php for why that is safe), which brings in
   every unscoped ".kvl-*" rule above unchanged. The two overrides here only
   retint the accent colour and the card shadow to the purple/near-black
   language kv_index_v2.css already uses for .card/.searchcard/.cards, so the
   card reads as native to that hero instead of carrying the R-02 file's own
   flat-violet system untouched. Mobile-first: full width under 560px, a
   440px reading width above it, matching .hero-center's own 780px cap.
   ========================================================================== */
.kvl-embed-wrap {
  width: 100%;
  max-width: 780px;   /* .hero-center's own max-width */
  margin: var(--s6, 32px) auto 0;   /* matches .hero-ctas' 26px+ rhythm above it */
}

/* ---- 8b. TWO-COLUMN HERO ROW (founder layout) ---------------------------
   Hero copy at 8/12, login card at 4/12, per the founder's own sketch. Written
   as a grid rather than Bootstrap columns because this page does not load
   Bootstrap — .hero-center is a plain flex column in kv_index_v2.css and the
   grid switch is the smallest change that produces the requested proportions.

   Scoped to .hero-center-split, a class only present when $kvHomeLoginEmbed is
   true, so the split-hero and social-hero variants are untouched.

   BELOW 992px THIS IS NOT A ROW. Single column, card last — the hero copy and
   its search box must stay the first thing a phone visitor meets. */
@media (min-width: 992px) {
  .hero-center.hero-center-split {
    display: grid;
    grid-template-columns: 8fr 4fr;   /* the founder's col-8 / col-4 */
    align-items: start;
    gap: 40px;
    max-width: 1180px;   /* wider than .hero-center's 780px cap — it now holds two columns */
    text-align: left;    /* .hero-center centres everything; a two-column row must not */
  }
  /* .hero-center is flex+align-items:center; inside a grid cell those inherited
     centring rules would squeeze the copy into a narrow ribbon. */
  .hero-center-split .kvhero-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }
  .hero-center-split .hero-sub { margin-left: 0; margin-right: 0; }

  /* Founder's call: the headline, sub-line and search read left (they anchor the
     column's left edge), but the proof block below them — stats, source note,
     quick-pills and CTAs — is centred as one group. The parent column is
     align-items:flex-start, so each of these needs align-self to opt back out. */
  .hero-center-split .kvhero-main .hstats,
  .hero-center-split .kvhero-main .hstats-note,
  .hero-center-split .kvhero-main .qpills,
  .hero-center-split .kvhero-main .hero-ctas {
    align-self: center;
    justify-content: center;
    text-align: center;
  }
  .hero-center-split .kvhero-main .hero-ctas .hero-ctas-sub { justify-content: center; }
  /* the search card sets its own auto side-margins to sit centred in the 780px
     hero; inside a left column those margins push it off the column's own edge. */
  .hero-center-split .kvhero-main .searchcard,
  .hero-center-split .kvhero-main .kvh-search,
  .hero-center-split .kvhero-main form[action*="searchresult"] {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .hero-center-split .kvl-embed-wrap.kvhero-aside {
    max-width: 100%;
    margin: 0;          /* the grid gap does the spacing now */
    position: sticky;   /* the hero column is taller; keep the card in view while it scrolls past */
    top: 24px;
  }
  .hero-center-split .kvhero-aside .kvl-embed { max-width: 100%; margin: 0; }
}
.kvl-embed {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  text-align: left;   /* .hero-center centers text; the form itself must not */
  /* kv_index_v2.css tokens: --purple:#6d4bf0, and its card-hover shadow is
     0 22px 46px -34px rgba(28,22,80,.42) — same near-black tint, wider blur. */
  --c-acc: #6d4bf0;
  --c-acc-ink: #5a33d6;
  --c-acc-wash: #f1edff;
  --e-2: 0 1px 2px rgba(28, 22, 80, .05), 0 18px 40px -28px rgba(28, 22, 80, .4);
  --r-lg: 18px;   /* matches .card / .searchcard's 18px, not R-02's 16px */
}
@media (max-width: 560px) {
  .kvl-embed-wrap { max-width: 100%; }
}

/* ---- 8a. 44px tap-target floor (2026-08-08) ------------------------------
   Verified at 375x812 with document.elementFromPoint(): #kvlId, #kvlPw,
   #kvlSubmit and .kvl-secondary already measure >=44px tall (they use
   --s7 = 48px) and needed no change. Four elements measured under 44px —
   all pre-existing R-02 metrics carried over unmodified by the port — and
   are corrected here, scoped to .kvl-embed only so the split-hero page
   (home_login_split=1) is not touched. */
.kvl-embed .kvl-reveal { height: 44px; }               /* was 40px */
.kvl-embed .kvl-link {                                  /* "Forgot password?" — was 40px */
  padding: 15px var(--s3);
  margin: -15px calc(var(--s3) * -1);
}
.kvl-embed .kvl-consent { align-items: center; }
.kvl-embed .kvl-consent input[type="checkbox"] { width: 20px; height: 20px; }
.kvl-embed .kvl-consent label {                         /* checkbox stays visually small; the
     bound <label for="kvlTos"> is what a thumb actually taps, so its OWN box is
     grown to 44px tall — clicking anywhere in that band toggles the checkbox
     natively, no JS needed. */
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: var(--s2) 0;
  margin: calc(var(--s2) * -1) 0;
}
.kvl-embed .kvl-foot {                                  /* "Browse Koovira as a guest" — was 16px */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 var(--s1);
}
.kvl-embed .kvl-foot a { padding: 14px var(--s2); margin: -14px calc(var(--s2) * -1); }