/* ================================================================
   UpZoned Club — app.css
   Brand ported from upzoned.com/realtorsupport:
   teal #1bbd9e + ink #111 + paper white, Plus Jakarta Sans + Newsreader.
   ================================================================ */

:root{
  --teal:#1bbd9e;
  --teal-dark:#13937b;
  --teal-tint:#e9f8f4;
  --ink:#111111;
  --ink-soft:#4a4a4a;
  --ink-faint:#7a7a7a;
  --line:#e2e2e2;
  --line-soft:#efefef;
  --paper:#ffffff;
  --wash:#f7f9f8;

  /* functional readiness-tier accents (from the UpZoned deck) */
  --tier-ready:#e2502e;
  --tier-active:#c8881f;
  --tier-warm:#1bbd9e;
  --tier-nurture:#7a7a7a;

  --ok:#13937b;
  --err:#a3322a;
  --err-bg:#fdf0ef;
  --err-line:#d6675f;

  --sans:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;

  --radius:12px;
  --radius-sm:8px;
  --maxw:1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--teal-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; letter-spacing:-0.01em; }
.serif{ font-family:var(--serif); }
.muted{ color:var(--ink-soft); }
.faint{ color:var(--ink-faint); }
.center{ text-align:center; }
.nowrap{ white-space:nowrap; }
.hidden{ display:none !important; }

/* ---------- layout primitives ---------- */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.container-sm{ max-width:720px; margin:0 auto; padding:0 24px; }
.sec{ padding:64px 24px; }
.sec--tint{ background:var(--teal-tint); }
.sec--wash{ background:var(--wash); }
.sec__in{ max-width:var(--maxw); margin:0 auto; }
.sec__head{ max-width:720px; margin:0 0 36px; }
.sec__label{
  font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--teal-dark); margin:0 0 10px;
}
.sec__head h2{ font-size:clamp(26px,3.4vw,36px); line-height:1.15; margin:0 0 12px; }
.sec__head p{ margin:0; color:var(--ink-soft); }
.sec__head p b{ color:var(--ink); }
.stack > * + *{ margin-top:16px; }

/* ---------- announcement bar ---------- */
.annc{
  background:var(--teal); color:#fff; text-align:center;
  font-size:13.5px; font-weight:700; letter-spacing:.03em; padding:9px 16px;
}
.annc a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ---------- header / nav ---------- */
.hdr{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.96); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.hdr__in{
  max-width:var(--maxw); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; height:64px;
}
.hdr__logo{ flex:none; display:flex; align-items:center; gap:9px; }
.hdr__logo img{ height:26px; width:auto; }
.hdr__logo .club{
  font-family:var(--sans); font-weight:800; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-dark); padding:3px 8px;
  border:1.5px solid var(--teal); border-radius:999px;
}
.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  color:var(--ink); font-size:13.5px; font-weight:600;
  padding:8px 11px; border-radius:6px; white-space:nowrap;
}
.nav a:hover{ background:var(--teal-tint); color:var(--teal-dark); text-decoration:none; }
.nav a.is-current{ background:var(--ink); color:#fff; }
.nav .btn{ margin-left:6px; padding:9px 18px; }
.nav__burger{
  display:none; background:none; border:1.5px solid var(--ink); border-radius:6px;
  width:40px; height:40px; cursor:pointer; font-size:18px; line-height:1; color:var(--ink);
}
@media (max-width:920px){
  .nav{
    display:none; position:absolute; top:64px; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
    padding:10px 16px 16px; gap:2px;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:12px 14px; font-size:15px; }
  .nav .btn{ margin:6px 0 0; text-align:center; }
  .nav__burger{ display:block; }
}

/* ---------- hero (dark) ---------- */
.hero{ background:var(--ink); color:#fff; text-align:center; padding:72px 24px 76px; }
.hero__kicker{
  display:inline-block; background:var(--teal); color:#fff; border-radius:999px;
  font-size:11.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  padding:6px 16px; margin:0 0 22px;
}
.hero h1{ font-size:clamp(34px,5vw,54px); line-height:1.1; margin:0 0 18px; }
.hero h1 em{ font-style:italic; color:var(--teal); }
.hero p{ max-width:660px; margin:0 auto 30px; color:#cfcfcf; font-size:17px; }
.hero p b{ color:#fff; }
.hero__ctas{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.hero__fine{ margin:18px 0 0; font-size:12.5px; color:#9f9f9f; }

/* ---------- trust strip ---------- */
.trust{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1.5px solid var(--ink); border-radius:var(--radius); overflow:hidden; margin-top:34px;
}
.trust__cell{ padding:18px 16px; text-align:center; border-right:1px solid var(--line); }
.trust__cell:last-child{ border-right:0; }
.trust__cell b{ display:block; font-family:var(--serif); font-size:22px; }
.trust__cell span{ font-size:12px; color:var(--ink-faint); font-weight:600; letter-spacing:.04em; }
@media (max-width:760px){
  .trust{ grid-template-columns:1fr 1fr; }
  .trust__cell:nth-child(2){ border-right:0; }
  .trust__cell:nth-child(1),.trust__cell:nth-child(2){ border-bottom:1px solid var(--line); }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; cursor:pointer; font-family:var(--sans);
  font-size:14.5px; font-weight:800; letter-spacing:.04em;
  padding:13px 28px; border-radius:999px; border:2px solid transparent;
  transition:transform .12s ease, background .12s ease, color .12s ease;
  text-align:center;
}
.btn:hover{ transform:translateY(-1px); text-decoration:none; }
.btn--teal{ background:var(--teal); color:#fff; }
.btn--teal:hover{ background:var(--teal-dark); color:#fff; }
.btn--ghost{ background:transparent; color:#fff; border-color:#fff; }
.btn--ghost:hover{ background:#fff; color:var(--ink); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; color:#fff; }
.btn--outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--outline:hover{ background:var(--ink); color:#fff; }
.btn--danger{ background:var(--err); color:#fff; }
.btn--danger:hover{ background:#852a23; color:#fff; }
.btn--block{ display:block; width:100%; }
.btn--sm{ padding:9px 18px; font-size:13px; }
.btn:disabled,.btn.is-disabled{ opacity:.45; cursor:not-allowed; transform:none; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.step{ background:#fff; border:1.5px solid var(--ink); border-radius:10px; padding:22px 22px; }
.step__num{
  width:28px; height:28px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; margin-bottom:12px;
}
.step h3{ margin:0 0 7px; font-family:var(--sans); font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.step p{ margin:0; font-size:14px; color:var(--ink-soft); }
.step p b{ color:var(--ink); }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }

/* ---------- cards / why grid ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.card{ background:#fff; border:1.5px solid var(--ink); border-radius:var(--radius); padding:22px; }
.card h3{ margin:0 0 8px; font-family:var(--sans); font-size:15px; font-weight:800; }
.card p{ margin:0; font-size:14px; color:var(--ink-soft); }

.why{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px 26px; }
@media (max-width:920px){ .why{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .why{ grid-template-columns:1fr; } }
.why__item{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); padding-top:14px; border-top:3px solid var(--teal); }
.why__item b{ display:block; font-size:14.5px; color:var(--ink); font-weight:800; margin-bottom:3px; }

/* ---------- pricing tiers ---------- */
.tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; }
@media (max-width:980px){ .tiers{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .tiers{ grid-template-columns:1fr; max-width:460px; margin:0 auto; } }
.tier{ background:#fff; border:1.5px solid var(--ink); border-radius:var(--radius); padding:26px 24px 24px; display:flex; flex-direction:column; position:relative; }
.tier--featured{ border:2.5px solid var(--teal); box-shadow:0 8px 28px rgba(27,189,158,.18); }
.tier__flag{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--teal); color:#fff; font-size:10px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; padding:4px 14px; border-radius:999px; white-space:nowrap;
}
.tier__name{ font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px; }
.tier__price{ font-family:var(--serif); font-size:40px; font-weight:500; line-height:1; }
.tier__price span{ font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink-faint); }
.tier__sub{ margin:8px 0 0; font-size:13px; color:var(--ink-soft); }

/* ---------- dark strip ---------- */
.strip{ background:var(--ink); color:#fff; border-radius:var(--radius); padding:24px 28px; }
.strip h3{ margin:0 0 10px; font-family:var(--sans); font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); }
.strip p{ margin:0; font-size:14.5px; line-height:1.55; color:#d6d6d6; }
.strip p b{ color:#fff; }

/* ---------- forms ---------- */
.form{ display:grid; gap:16px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .form__row{ grid-template-columns:1fr; } }
.form label{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.form input, .form select, .form textarea{
  width:100%; font-family:var(--sans); font-size:15px; color:var(--ink); background:#fff;
  border:1.5px solid var(--ink); border-radius:var(--radius-sm); padding:12px 14px; outline:none;
}
.form input:focus, .form select:focus, .form textarea:focus{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(27,189,158,.22); }
.form textarea{ min-height:120px; resize:vertical; }
.form .hint{ font-size:12px; color:var(--ink-faint); margin:6px 0 0; }
.form__hp{ position:absolute; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden; }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); }
.check input{ width:auto; margin-top:3px; border-width:1.5px; }

/* ---------- alerts ---------- */
.alert{ border-radius:10px; padding:14px 18px; font-size:14.5px; font-weight:700; margin:0 0 22px; }
.alert--ok{ background:var(--teal-tint); color:var(--ok); border:1.5px solid var(--teal); }
.alert--err{ background:var(--err-bg); color:var(--err); border:1.5px solid var(--err-line); }
.alert--info{ background:var(--wash); color:var(--ink-soft); border:1.5px solid var(--line); }

/* ---------- badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.badge--intent{ background:var(--ink); color:#fff; }
.badge--tier-ready{ background:var(--tier-ready); color:#fff; }
.badge--tier-active{ background:var(--tier-active); color:#fff; }
.badge--tier-warm{ background:var(--tier-warm); color:#fff; }
.badge--tier-nurture{ background:var(--tier-nurture); color:#fff; }
.badge--soft{ background:var(--teal-tint); color:var(--teal-dark); }
.badge--line{ background:#fff; border:1.5px solid var(--line); color:var(--ink-soft); }
.badge--sold{ background:#f3f3f3; color:var(--ink-faint); border:1px solid var(--line); }

/* chips: small key facts on lead cards */
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{ font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--wash); border:1px solid var(--line); border-radius:999px; padding:5px 11px; }
.chip b{ color:var(--ink); font-weight:700; }
.chip--zone{ background:var(--teal-tint); border-color:#cdeee6; color:var(--teal-dark); font-weight:700; }

/* ================================================================
   MARKETPLACE — app shell, filters, lead grid, lead card, gate
   ================================================================ */
.app{ display:flex; gap:28px; max-width:var(--maxw); margin:0 auto; padding:28px 24px 64px; align-items:flex-start; }
.app__side{ flex:none; width:230px; position:sticky; top:84px; }
.app__main{ flex:1; min-width:0; }
@media (max-width:900px){
  .app{ flex-direction:column; }
  .app__side{ width:100%; position:static; }
}
.side__title{ font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px; }
.side__nav{ display:flex; flex-direction:column; gap:2px; margin-bottom:24px; }
.side__nav a{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 12px; border-radius:8px; font-size:14px; font-weight:600; color:var(--ink); }
.side__nav a:hover{ background:var(--teal-tint); color:var(--teal-dark); text-decoration:none; }
.side__nav a.is-current{ background:var(--ink); color:#fff; }
.side__nav a .n{ font-size:11px; color:var(--ink-faint); font-weight:700; }
.side__nav a.is-current .n{ color:#cfcfcf; }
@media (max-width:900px){ .side__nav{ flex-direction:row; flex-wrap:wrap; } }

/* filter bar */
.filters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; align-items:end; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:22px; }
.filters .field{ display:flex; flex-direction:column; }
.filters label{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 5px; }
.filters input, .filters select{ font-family:var(--sans); font-size:13.5px; padding:9px 11px; border:1.5px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); outline:none; }
.filters input:focus, .filters select:focus{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(27,189,158,.18); }
.filters .actions{ display:flex; gap:8px; }

.result-meta{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 16px; flex-wrap:wrap; }
.result-meta .count{ font-size:14px; color:var(--ink-soft); }
.result-meta .count b{ color:var(--ink); }

/* lead grid */
.lead-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; }

/* lead card */
.lead-card{ background:#fff; border:1.5px solid var(--ink); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:13px; }
.lead-card.is-featured{ border-color:var(--teal); box-shadow:0 6px 22px rgba(27,189,158,.14); }
.lead-card__top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lead-card__loc{ font-family:var(--serif); font-size:19px; line-height:1.2; }
.lead-card__loc .pin{ color:var(--teal-dark); }
.lead-card__sub{ font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.lead-card__quote{ font-family:var(--serif); font-style:italic; font-size:15px; line-height:1.45; color:var(--ink-soft); border-left:3px solid var(--teal); padding:2px 0 2px 14px; }
.lead-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:6px; }
.lead-card__price{ font-family:var(--serif); font-size:30px; line-height:1; }
.lead-card__price span{ font-family:var(--sans); font-size:11px; font-weight:700; color:var(--ink-faint); }

/* the gate: locked contact block */
.gate{ position:relative; border:1.5px dashed var(--line); border-radius:10px; padding:14px 16px; background:var(--wash); }
.gate__rows{ filter:blur(5px); opacity:.7; pointer-events:none; user-select:none; }
.gate__row{ display:flex; align-items:center; gap:8px; font-size:13.5px; padding:3px 0; color:var(--ink); }
.gate__row .k{ width:64px; color:var(--ink-faint); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.gate__lock{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; background:rgba(255,255,255,.55); border-radius:10px; }
.gate__lock .ico{ font-size:18px; }
.gate__lock .txt{ font-size:12.5px; font-weight:800; letter-spacing:.04em; color:var(--ink); }

/* unlocked contact panel */
.contact-panel{ border:1.5px solid var(--teal); background:var(--teal-tint); border-radius:10px; padding:16px 18px; }
.contact-panel h3{ font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-dark); margin:0 0 10px; }
.contact-panel .row{ display:flex; gap:10px; padding:6px 0; border-bottom:1px solid #d4efe8; font-size:14.5px; }
.contact-panel .row:last-child{ border-bottom:0; }
.contact-panel .row .k{ width:90px; color:var(--ink-faint); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding-top:2px; }
.contact-panel .row a{ font-weight:700; }

/* field grid (read-only facts) */
.field-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px 22px; }
.field{ }
.field .k{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 3px; }
.field .v{ font-size:15px; color:var(--ink); }

/* detail layout */
.detail{ display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start; max-width:var(--maxw); margin:0 auto; padding:28px 24px 64px; }
@media (max-width:880px){ .detail{ grid-template-columns:1fr; } }
.panel{ background:#fff; border:1.5px solid var(--ink); border-radius:var(--radius); padding:24px; }
.panel + .panel{ margin-top:18px; }
.panel h2{ font-size:22px; margin:0 0 14px; }
.buy-box{ position:sticky; top:84px; }

/* ---------- tables (admin) ---------- */
.table-wrap{ overflow-x:auto; border:1.5px solid var(--line); border-radius:var(--radius); background:#fff; }
table.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.tbl th, table.tbl td{ padding:11px 14px; text-align:left; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
table.tbl th{ font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); background:var(--wash); }
table.tbl tr:last-child td{ border-bottom:0; }
table.tbl tr:hover td{ background:#fafdfc; }

/* ---------- KPI stat cards ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; margin-bottom:26px; }
.stat-card{ background:#fff; border:1.5px solid var(--ink); border-radius:var(--radius); padding:18px 20px; }
.stat-card .value{ font-family:var(--serif); font-size:32px; line-height:1; }
.stat-card .label{ font-size:12px; color:var(--ink-faint); font-weight:600; margin-top:6px; }

/* ---------- pagination ---------- */
.pager{ display:flex; gap:6px; justify-content:center; margin-top:26px; flex-wrap:wrap; }
.pager a, .pager span{ padding:8px 13px; border:1.5px solid var(--line); border-radius:8px; font-size:13.5px; font-weight:700; color:var(--ink); }
.pager a:hover{ background:var(--teal-tint); color:var(--teal-dark); text-decoration:none; }
.pager .is-current{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pager .is-disabled{ opacity:.4; }

/* ---------- auth card ---------- */
.auth-wrap{ max-width:440px; margin:48px auto; padding:0 24px; }
.auth-card{ background:#fff; border:1.5px solid var(--ink); border-radius:var(--radius); padding:30px 28px; }
.auth-card h1{ font-size:26px; margin:0 0 6px; }
.auth-card .sub{ color:var(--ink-soft); font-size:14px; margin:0 0 22px; }
.auth-alt{ text-align:center; margin-top:18px; font-size:13.5px; color:var(--ink-soft); }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:#9f9f9f; padding:48px 24px 40px; }
.foot__in{ max-width:var(--maxw); margin:0 auto; }
.foot__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; margin:0 0 28px; }
@media (max-width:760px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
.foot__brand img{ height:24px; filter:brightness(0) invert(1); margin-bottom:12px; }
.foot__brand p{ font-size:13px; line-height:1.6; margin:0; max-width:320px; }
.foot__col h4{ font-family:var(--sans); color:#fff; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:0 0 12px; }
.foot__col a{ display:block; color:#cfcfcf; font-size:13.5px; padding:4px 0; }
.foot__col a:hover{ color:var(--teal); text-decoration:none; }
.foot__legal{ border-top:1px solid #2a2a2a; padding-top:20px; font-size:12px; line-height:1.7; color:#7f7f7f; }
.foot__legal b{ color:#bdbdbd; }

/* ---------- utility spacing ---------- */
.mt-0{ margin-top:0; } .mt-1{ margin-top:8px; } .mt-2{ margin-top:16px; } .mt-3{ margin-top:24px; } .mt-4{ margin-top:32px; }
.mb-0{ margin-bottom:0; } .mb-2{ margin-bottom:16px; } .mb-3{ margin-bottom:24px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.tag-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .btn:hover{ transform:none; }
}