/* ══════════════════════════════════════════════════════════════════════════
   BUILDERS.TOGETHER.HOMES — LANDING COMPONENTS, v2 (sketch edition)
   Loads AFTER kc-brand.css. The landing page now talks in drawings: a product
   band of sketch icons instead of a photo, and a process map whose cells are
   icon + label instead of paragraphs. All ink is currentColor so each rail
   sets its own colour. The sign-on form styles live here too, shared by the
   landing page and the letter page.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── hero ───────────────────────────────────────────────────────────────── */
.lp-hero{padding:56px 0 0}
.lp-hero h1{margin:14px 0 20px;max-width:15ch}
.lp-hero .lede{font:400 19px/1.65 var(--body);color:#1A1A1D;max-width:58ch;margin:0 0 26px}
.lp-hero .lede b{font-weight:700}

/* the action row — the three doors out of the hero */
.lp-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.lp-actions .btn{flex:0 1 auto}
@media(max-width:520px){
  .lp-actions{flex-direction:column;align-items:stretch}
  .lp-actions .btn{width:100%}
}
.lp-note{font:400 12.5px/1.7 var(--mono);letter-spacing:.02em;color:var(--faint);margin:0}

/* ── the product band — what moves through the book, drawn not photographed ─ */
.mat-band{margin:52px 0 0;border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;background:var(--card);box-shadow:var(--shadow-soft)}
.mat-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border)}
/* 7 tiles + this filler = 8, so the 4-col and 2-col layouts land on full rows */
.mat-grid::after{content:"";display:none;background:var(--card)}
@media(max-width:980px){.mat-grid{grid-template-columns:repeat(4,1fr)}.mat-grid::after{display:block}}
@media(max-width:560px){.mat-grid{grid-template-columns:repeat(2,1fr)}}
.mat{background:var(--card);padding:22px 12px 16px;text-align:center}
.mat.svc{background:var(--accent-soft)}
.mat.svc svg{max-width:94px}   /* square viewBox — cap it so its height matches the 80×64 products */
.mat.svc small{color:var(--accent)}
.mat svg{width:100%;max-width:116px;height:auto;color:var(--accent)}
.mat b{display:block;font-family:var(--display);font-weight:700;font-size:14px;
  letter-spacing:-.01em;color:var(--ink);margin-top:8px;line-height:1.2}
.mat small{display:block;font:500 9.5px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--bronze);margin-top:5px}
.mat-band figcaption{font:400 11.5px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);padding:12px 18px;border-top:1px solid var(--border);background:var(--card)}

/* ── section furniture ──────────────────────────────────────────────────── */
.lp-sec{margin:112px 0 0}
.lp-sec > .eyebrow{display:block;margin-bottom:12px}
.lp-sec > h2{max-width:24ch;margin-bottom:12px}
.lp-sec > .sub{font:400 16.5px/1.65 var(--body);color:var(--muted);max-width:62ch;margin:0 0 34px}

/* ══ THE PROCESS MAP — drawn, not written ═════════════════════════════════
   Two rails, same six stations. Each cell is a sketch icon + a short label +
   one hit line — the drawing carries the outcome, the text just names it.
   Bronze = today. Evergreen = on the book. */
.map{display:grid;gap:16px}

.rail{border-radius:var(--r-md);border:1px solid var(--border);background:var(--card);
  padding:20px 22px 22px;position:relative;overflow:hidden}
.rail.now{border-color:rgba(138,90,45,.34);background:#FDFBF8}
.rail.net{border-color:rgba(46,90,78,.42);background:#FBFDFC}

.rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:18px}
.rail-head h3{font-size:21px;letter-spacing:-.015em}
.rail.now .rail-head h3{color:#7A4E26}
.rail.net .rail-head h3{color:var(--accent-ink)}
.rail-head .tagx{font:600 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;
  border-radius:99px;padding:5px 11px}
.rail.now .tagx{color:var(--bronze);background:var(--bronze-soft)}
.rail.net .tagx{color:var(--accent);background:var(--accent-soft)}

/* the stations */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:0;align-items:stretch}
.step{position:relative;padding:0 14px 0 0;display:flex;flex-direction:column;gap:7px}
.step + .step{padding-left:14px;border-left:1px solid var(--border)}
.step .s-n{font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase}
.rail.now .s-n{color:var(--bronze)}
.rail.net .s-n{color:var(--accent)}
.step svg{width:82px;max-width:100%;height:auto;display:block;margin:3px 0 1px}
.rail.now .step svg{color:#8A5A2D}
.rail.net .step svg{color:var(--accent)}
.step p{font:600 14px/1.35 var(--body);color:var(--ink);margin:0}
.step .s-hit{margin-top:auto;font:500 11px/1.5 var(--mono);letter-spacing:.03em;
  padding-top:8px;border-top:1px dashed var(--border)}
.rail.now .s-hit{color:#8A5A2D}
.rail.net .s-hit{color:var(--accent)}

/* the outcome line each rail lands on */
.rail-out{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);
  font:400 15.5px/1.6 var(--body)}
.rail-out b{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.rail.now .rail-out{color:var(--muted)}
.rail.now .rail-out b{color:#7A4E26}
.rail.net .rail-out{color:var(--accent-ink)}
.rail.net .rail-out b{color:var(--accent)}

/* the pivot between the two rails */
.map-turn{display:flex;align-items:center;gap:14px;margin:2px 0}
.map-turn hr{flex:1;border:0;border-top:1px solid var(--rule)}
.map-turn span{font:600 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);white-space:nowrap}

/* narrow: two stations per row, icons beside labels */
@media(max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr);gap:14px 0}
  .step{padding:0 14px 0 0}
  .step + .step{border-left:0;padding-left:0}
  .step:nth-child(even){border-left:1px solid var(--border);padding-left:14px}
  .step .s-hit{margin-top:2px}
}

/* ── the benefit grid — icon + one line each ────────────────────────────── */
.bens{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:700px){.bens{grid-template-columns:1fr}}
.ben{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
  padding:18px 20px;display:grid;grid-template-columns:58px 1fr;gap:16px;align-items:center;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.ben:hover{border-color:rgba(46,90,78,.42);transform:translateY(-2px)}
.ben > svg{width:58px;height:auto;color:var(--accent)}
.ben.later > svg{color:var(--bronze)}
.ben .when{float:right;font:600 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:4px 10px;margin-left:12px}
.ben .when.later{color:var(--bronze);background:var(--bronze-soft)}
.ben h3{margin-bottom:4px;font-size:17px}
.ben p{font:400 14px/1.5 var(--body);color:var(--muted);margin:0}
.ben.later{border-style:dashed}

/* ── the takeoff rate card — pricing printed, like everything else ──────── */
.rates{margin:40px 0 0;padding:20px 24px 18px}
.rates-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  flex-wrap:wrap;margin-bottom:12px}
.rates-head h3{font-size:19px}
.rates-head .r-tag{font:600 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--bronze);background:var(--bronze-soft);border-radius:99px;padding:5px 11px}
.rate{display:grid;grid-template-columns:1.1fr 130px 1.3fr;gap:16px;align-items:baseline;
  padding:11px 2px;border-top:1px solid var(--border)}
.rate .r-who{font:600 15px/1.4 var(--body);color:var(--ink)}
.rate .r-who small{display:block;font:500 10px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-top:2px}
.rate .r-price{font-family:var(--display);font-weight:700;font-size:20px;
  letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.rate .r-price small{font:500 11px var(--mono);letter-spacing:.04em;color:var(--muted)}
.rate .r-note{font:400 13.5px/1.5 var(--body);color:var(--muted)}
/* the member row — the deal the whole page is about */
.rate.mem{background:var(--accent-soft);border-top:0;border-radius:var(--r-sm);
  padding:12px 14px;margin-bottom:4px}
.rate.mem + .rate{border-top:0}
.rate.mem .r-price{color:var(--accent)}
.rate.mem .r-note{color:var(--accent-ink)}
.rate-credit{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule);
  font:400 14px/1.6 var(--body);color:var(--muted)}
.rate-credit b{color:var(--ink)}
@media(max-width:720px){
  .rate{grid-template-columns:1fr auto;gap:4px 16px}
  .rate .r-note{grid-column:1 / -1}
}

/* ── the big pointer panel before the form ──────────────────────────────── */
.learn-cta{margin:44px 0 0;padding:24px 26px;background:var(--accent-soft);
  border-radius:var(--r-md);text-align:center}
.learn-cta h3{font-size:20px;color:var(--accent-ink);margin-bottom:16px}
.learn-cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.learn-cta .btn{padding:15px 28px;font-size:15.5px}

/* ── the sign-on form — the instrument, shared by / and /letter ─────────── */
.form{margin:56px 0 20px;padding:30px 28px 26px;max-width:780px}
.form h2{font-size:26px;margin-bottom:20px}
.field{margin-bottom:16px}
.field label{display:block;font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field textarea{width:100%;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:#FAFAFB;padding:12px 14px;font:400 16px var(--body);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:100px;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,90,78,.12)}
.field input::placeholder,.field textarea::placeholder{color:#9AA1A9}
.checks{display:grid;gap:10px}
/* these sit inside .field, so the uppercase + tracking of .field label must be
   reset here — the interest options are sentence copy, not labels */
.checks label{display:flex;align-items:flex-start;gap:11px;font:400 15.5px/1.45 var(--body);
  text-transform:none;letter-spacing:normal;
  color:var(--ink);cursor:pointer;background:#FAFAFB;border:1px solid var(--border);
  border-radius:var(--r-sm);padding:12px 14px;transition:border-color .2s,background .2s}
.checks label:hover{border-color:rgba(46,90,78,.4);background:#fff}
.checks input{width:18px;height:18px;accent-color:var(--accent);flex:none;margin-top:1px}
.checks small{color:var(--muted);font-size:13.5px}
.fine{font:400 12.5px/1.75 var(--mono);color:var(--faint);margin-top:16px;letter-spacing:.01em}