/* ===== Variant chooser landing ===== */
:root{
  --paper:#F4F2EE; --ink:#1a1a1a; --mute:#6b6b66; --line:#e2ded5; --accent:#1F3D2B;
  --disp:"Fraunces", Georgia, serif; --ui:"Inter", system-ui, sans-serif;
  --pad:clamp(1.25rem,5vw,5rem);
}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);line-height:1.55}
.top{max-width:760px;margin-inline:auto;padding:clamp(3.5rem,10vw,7rem) var(--pad) clamp(2rem,5vw,3rem);text-align:center}
.kicker{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);margin-bottom:1.2rem}
.title{font-family:var(--disp);font-weight:330;font-size:clamp(2.4rem,7vw,4.2rem);line-height:1.02;letter-spacing:-.01em}
.lead{margin-top:1.2rem;color:#4a4a44;font-size:clamp(1rem,1.1vw,1.1rem)}

.grid{max-width:1100px;margin:0 auto;padding:0 var(--pad) clamp(3rem,8vw,6rem);
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,3vw,2rem)}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;color:inherit}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(0,0,0,.4)}
.card__tag{position:absolute;margin:.9rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(0,0,0,.62);color:#fff;padding:.35rem .7rem;border-radius:999px;backdrop-filter:blur(4px)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:1px solid var(--line)}
.card__body{padding:clamp(1.2rem,3vw,1.8rem);display:flex;flex-direction:column;gap:.5rem;flex:1}
.card__body h2{font-family:var(--disp);font-weight:380;font-size:1.7rem}
.card__body p{color:var(--mute);font-size:.95rem;flex:1}
.card__cta{font-weight:600;color:var(--accent);font-size:.92rem;margin-top:.3rem}

.card--wide{grid-column:1 / -1}
@media (min-width:681px){
  .card--wide{display:grid;grid-template-columns:1.3fr 1fr}
  .card--wide img{aspect-ratio:auto;height:100%;border-bottom:0;border-right:1px solid var(--line)}
  .card--wide .card__body{justify-content:center}
}

.foot{text-align:center;padding:0 var(--pad) clamp(2.5rem,6vw,4rem);color:var(--mute);font-size:.82rem}

@media (max-width:680px){
  .grid{grid-template-columns:1fr}
}