/* LPPA homepage. Quiet Room tokens from lppa.css; this file only lays out the
   front page. One visual moment on the page: the deck of five pattern cards,
   in full pattern colour. Everything else is type on paper. */

/* ── Hero: one claim, one action ─────────────────────────────────────────── */
.home-hero{padding:clamp(2.2rem,7vw,4.6rem) 0 clamp(2rem,5vw,3rem); display:grid; gap:1.2rem 3rem;
  grid-template-columns:1fr; align-items:end;}
/* Wide screens: the claim on the left, the action on the right, sharing a
   baseline. The old hero put its right half to a deck of three thumbnails;
   the deck is now the section below, and the hero is type. */
@media (min-width:64rem){
  .home-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:1rem 3.5rem;}
  .home-hero-act{padding-bottom:.35rem;}
  .home-lede{font-size:1.18rem;}
}
.home-h1{font-size:clamp(2.6rem,7.2vw,4.6rem); line-height:1.02; letter-spacing:-.022em;
  max-width:14ch; margin:.8rem 0 0;}
.home-rule{display:flex; gap:.35rem; margin:1.4rem 0 1.5rem;}
.home-rule i{display:block; width:clamp(2rem,5vw,3.4rem); height:5px; border-radius:3px; background:var(--pc);}
.home-lede{font-size:clamp(1.08rem,2.4vw,1.32rem); color:var(--secondary); max-width:36rem;
  margin:0; line-height:1.5;}
.home-cta-row{margin-top:1.8rem; gap:1rem 1.4rem;}
.home-cta{font-size:1.05rem; padding:.95rem 1.7rem; white-space:nowrap;
  box-shadow:0 6px 22px color-mix(in srgb, var(--amber-500) 35%, transparent);}
.home-meta{font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--muted);}

/* ── The deck: five cards, five colours ──────────────────────────────────── */
.home-five{margin-top:clamp(.6rem,2vw,1.4rem); padding-top:clamp(1.6rem,4vw,2.4rem);
  border-top:1px solid var(--border);}
.home-five-head{max-width:40rem;}
.home-h2{font-size:clamp(1.55rem,3.4vw,2.1rem); margin:.5rem 0 0;}
.home-five-sub{margin:.8rem 0 0; color:var(--secondary); font-size:1rem; line-height:1.55;}
/* The deck runs wider than the column of text above it on a big screen; five
   readable cards need the room, and one wide band is the point of the section. */
.deck{display:grid; gap:.8rem; margin-top:clamp(1.4rem,3vw,2rem);
  grid-template-columns:1fr;}
.card{position:relative; display:flex; flex-direction:column; gap:.3rem; text-decoration:none;
  background:var(--pc-deep); color:#FAF9F4; border-radius:14px;
  padding:1.25rem 1.2rem 1.1rem; min-height:16rem; overflow:hidden;
  box-shadow:0 1px 2px rgba(20,16,13,.08), 0 12px 30px color-mix(in srgb, var(--pc) 22%, transparent);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;}
.card::after{content:""; position:absolute; inset:auto -30% -45% auto; width:70%; aspect-ratio:1;
  border-radius:50%; background:color-mix(in srgb, var(--pc) 55%, #FAF9F4 0%);
  opacity:.35; pointer-events:none;}
.card:hover{transform:translateY(-4px); filter:brightness(1.05);
  box-shadow:0 2px 4px rgba(20,16,13,.1), 0 18px 40px color-mix(in srgb, var(--pc) 38%, transparent);}
.card:focus-visible{outline:3px solid var(--amber-500); outline-offset:3px;}
.card-name{font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(250,249,244,.78); font-weight:600;}
.card-arch{display:flex; flex-direction:column; font-family:var(--serif); font-weight:640;
  font-variation-settings:"opsz" 100, "SOFT" 20; font-size:clamp(1.7rem,2.3vw,2.05rem); line-height:1.02;
  letter-spacing:-.015em; margin:.3rem 0 .45rem;}
.card-arch small{font-size:.5em; font-weight:500; font-style:italic; letter-spacing:0;
  color:rgba(250,249,244,.8); line-height:1.1;}
.card-sub{margin:0; font-size:.88rem; line-height:1.45; color:rgba(250,249,244,.9);}
.card-qcap{margin-top:auto; padding-top:1.1rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(250,249,244,.7);}
.card-q{margin:.3rem 0 0; font-family:var(--serif); font-style:italic; font-size:1.08rem; line-height:1.3;
  color:#FAF9F4; text-wrap:pretty;}
.card-go{margin-top:.9rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(250,249,244,.85); border-top:1px solid rgba(250,249,244,.28); padding-top:.7rem;}
.card-go::after{content:" \2192";}
[dir="rtl"] .card-go::after{content:" \2190";}
/* 38 to 84rem (tablet up to the common laptop): three cards, then two centred.
   The swipe row that used to sit here cut the fifth card in half on a laptop
   and read as broken; five across below 84rem squeezed each card to under
   13rem and wrapped every label. Six grid tracks, each card spans two, the
   fourth card starts on track two so the second row is centred. */
.deck-hint{display:none;}
@media (min-width:38rem) and (max-width:83.99rem){
  .deck{grid-template-columns:repeat(6,minmax(0,1fr)); gap:.9rem;}
  .card{grid-column:span 2; min-height:17rem;}
  .card:nth-child(4){grid-column:2 / span 2;}
}
/* From 84rem: five across, and the deck may run a little wider than the text
   column so each card keeps a readable measure. */
@media (min-width:84rem){
  .deck{grid-template-columns:repeat(5,minmax(0,1fr)); gap:.9rem;
    margin-inline:calc(-1 * clamp(0rem, (100vw - 56rem) / 2 - 2rem, 7rem));}
  .card{min-height:19rem; padding:1.35rem 1.2rem 1.15rem;}
}

/* ── What pressure does ──────────────────────────────────────────────────── */
.home-why{padding:clamp(2.4rem,6vw,3.6rem) 0 clamp(1rem,3vw,1.4rem); margin-top:clamp(1.6rem,4vw,2.4rem);
  border-top:1px solid var(--border);}
.why-grid{display:grid; gap:clamp(1.1rem,3vw,2rem); margin-top:clamp(1.4rem,3vw,2rem); grid-template-columns:1fr;}
@media (min-width:40rem){ .why-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
.why-beat{display:flex; flex-direction:column; gap:.45rem;}
.why-n{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--accent); font-weight:600;}
.why-beat h3{font-size:1.15rem; font-weight:600; line-height:1.25;}
.why-beat p{margin:0; color:var(--secondary); font-size:.95rem; line-height:1.6;}

/* ── The pathway ─────────────────────────────────────────────────────────── */
.home-path{padding:clamp(2.4rem,6vw,3.6rem) 0 0; margin-top:clamp(1.6rem,4vw,2.4rem);
  border-top:1px solid var(--border);}
.path{list-style:none; margin:clamp(1.4rem,3vw,2rem) 0 0; padding:0; display:grid; gap:.9rem;
  grid-template-columns:1fr; counter-reset:path;}
.path-step{position:relative; display:flex; flex-direction:column; gap:.35rem; background:var(--surface);
  border:1px solid var(--border); border-top:3px solid var(--amber-500); border-radius:12px;
  padding:1.15rem 1.2rem 1.25rem; box-shadow:var(--shadow);}
.path-n{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--amber-700); font-weight:600;}
.path-step h3{font-size:1.15rem; font-weight:600; line-height:1.25; margin-top:.15rem;}
.path-tag{align-self:flex-start; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--amber-700); background:color-mix(in srgb, var(--amber-400) 14%, var(--surface));
  border:1px solid color-mix(in srgb, var(--amber-500) 35%, var(--border)); border-radius:999px;
  padding:.22rem .6rem; margin:.15rem 0 .3rem; white-space:nowrap;}
.path-step p{margin:0; color:var(--secondary); font-size:.92rem; line-height:1.55;}
@media (min-width:40rem){ .path{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:64rem){ .path{grid-template-columns:repeat(4,minmax(0,1fr));} }

/* ── Closing band, disclaimer ────────────────────────────────────────────── */
.home-band{margin-top:clamp(2.4rem,6vw,3.6rem);
  background:linear-gradient(120deg, color-mix(in srgb, var(--amber-500) 16%, var(--surface)), var(--surface) 65%);
  border:1px solid var(--border-strong); border-radius:16px;}
.home-band h2{font-size:clamp(1.3rem,3vw,1.75rem); max-width:26rem;}
.home-disclaimer{margin-top:2.2rem;}

/* ── Phone ───────────────────────────────────────────────────────────────── */
@media (max-width:37.99rem){
  .home-hero{padding-top:1.8rem;}
  .home-cta-row{flex-direction:column; align-items:stretch;}
  .home-meta{text-align:center;}
  .card{min-height:0;}
  .card-qcap{padding-top:.9rem;}
}
@media (prefers-reduced-motion:reduce){ .card{transition:none;} .card:hover{transform:none;} }