/* ==========================================================================
   HVAC.love — original visual identity.
   Dating-app interaction language, its own look. Nothing borrowed from Tinder:
   own wordmark, own palette (rose + plum + a cooling mint), own iconography.
   Mobile first; the desktop layout is a different composition, not a stretch.
   ========================================================================== */

:root {
  --rose:        #e8467c;
  --rose-deep:   #c2185b;
  --rose-soft:   #fdeaf1;
  --rose-tint:   #fdf3f6;
  --plum:        #2b2430;
  --plum-soft:   #5b5560;
  --plum-faint:  #8a838f;
  --mint:        #2e9e6b;
  --mint-soft:   #e7f6ee;
  --amber:       #b8860b;
  --amber-soft:  #fdfaf2;
  --line:        #ece7ee;
  --line-strong: #ddd5e2;
  --bg:          #f7f4f8;
  --card:        #ffffff;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-card: 0 18px 40px -18px rgba(43,36,48,.35), 0 2px 6px rgba(43,36,48,.06);
  --shadow-soft: 0 6px 20px -8px rgba(43,36,48,.22);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Set from JS so mobile browser chrome never crops the deck. */
  --vh: 1vh;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--plum);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

body.is-deck { overflow: hidden; }         /* only the deck locks scroll */

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--rose-deep); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ header */
.hdr {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(247,244,248,.88);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  text-decoration: none; color: var(--plum);
}
.brand-text { display: inline-flex; }        /* gap belongs after the mark, not inside the word */
.brand b { color: var(--rose); font-weight: 800; }
.brand svg { width: 26px; height: 26px; flex: none; }
.hdr-spacer { flex: 1; }

.hdr-btn {
  border: 1px solid var(--line-strong); background: var(--card);
  border-radius: var(--r-pill); padding: 8px 14px;
  font-size: 14px; font-weight: 650; color: var(--plum);
  display: inline-flex; align-items: center; gap: 7px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.hdr-btn:hover { border-color: var(--rose); box-shadow: var(--shadow-soft); }
.hdr-btn:active { transform: scale(.97); }
.hdr-btn .count {
  min-width: 20px; padding: 0 6px; height: 20px; border-radius: var(--r-pill);
  background: var(--rose); color: #fff; font-size: 12px; font-weight: 800;
  display: inline-grid; place-items: center;
}
.hdr-btn-primary { border-color: var(--rose); color: var(--rose-deep); background: var(--rose-soft); }
.hdr-btn-primary:hover { background: var(--rose); color: #fff; border-color: var(--rose); }

/* The header has to survive a 360px phone without wrapping or clipping. */
.lbl-lg { display: none; }
.lbl-sm { display: inline; }
@media (min-width: 560px) {
  .lbl-lg { display: inline; }
  .lbl-sm { display: none; }
}
@media (max-width: 400px) {
  .hdr { padding: 10px 12px; gap: 8px; }
  .hdr-btn { padding: 7px 11px; font-size: 13.5px; }
  .brand { font-size: 18px; }
  .brand svg { width: 23px; height: 23px; }
}

/* ------------------------------------------------------------------- shell */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ===================================================================== HERO */
.hero { padding: 40px 0 56px; }
.hero-in { max-width: 720px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rose-soft); color: var(--rose-deep);
  border-radius: var(--r-pill); padding: 7px 14px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.hero h1 {
  margin: 18px 0 0;
  font-size: clamp(34px, 7.4vw, 62px);
  line-height: 1.03; letter-spacing: -.035em; font-weight: 850;
}
.hero h1 .love { color: var(--rose); }
.hero p.lede {
  margin: 18px 0 0; max-width: 58ch;
  font-size: clamp(16px, 2.1vw, 19px); line-height: 1.6; color: var(--plum-soft);
}
.hero p.swipe-line {
  margin: 14px 0 0; font-size: 17px; font-weight: 650; color: var(--plum);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.btn {
  border: 0; border-radius: var(--r-pill);
  padding: 15px 26px; font-size: 16px; font-weight: 750;
  display: inline-flex; align-items: center; gap: 9px;
  transition: transform .12s ease, box-shadow .16s ease, background .16s;
  text-decoration: none;
}
.btn-primary { background: var(--rose); color: #fff; box-shadow: 0 10px 24px -10px rgba(232,70,124,.85); }
.btn-primary:hover { background: var(--rose-deep); }
.btn-ghost { background: var(--card); color: var(--plum); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--rose); }
.btn:active { transform: scale(.975); }
.btn-block { width: 100%; justify-content: center; }

.trust {
  margin-top: 34px; display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
.trust-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px;
}
.trust-item h3 { margin: 0 0 5px; font-size: 15px; font-weight: 750; }
.trust-item p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--plum-soft); }

/* ===================================================================== DECK */
.deck-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 10px 0 0;
}

.deck-col { display: flex; flex-direction: column; align-items: center; }

.deck {
  position: relative;
  width: 100%;
  max-width: 400px;
  /* fill the viewport under the header on phones, minus the action bar */
  height: calc(var(--vh, 1vh) * 100 - 194px);
  min-height: 380px;
  max-height: 620px;
  touch-action: pan-y;
}

.card {
  position: absolute; inset: 0;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  will-change: transform;
  user-select: none; -webkit-user-select: none;
  display: flex; flex-direction: column;
}
.card.stacked-1 { transform: scale(.955) translateY(14px); filter: saturate(.85); }
.card.stacked-2 { transform: scale(.912) translateY(27px); filter: saturate(.7); }
.card.behind { pointer-events: none; }
.card.animating { transition: transform .34s cubic-bezier(.2,.7,.3,1), opacity .34s; }

.card-photo {
  position: relative; flex: 1; min-height: 0;
  background: #efeaf1 center/cover no-repeat;
}
.card-photo img {
  width: 100%; height: 100%; object-fit: contain; background: #fff;
  pointer-events: none;
}
/* Lifestyle shots are photographs, so they fill; product shots keep their whitespace. */
.card-photo img.fill { object-fit: cover; background: #efeaf1; }

/* Product shots are mostly white, so the indicators need their own contrast
   rather than relying on the photo behind them. */
.card-photo::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 62px; z-index: 2;
  background: linear-gradient(to bottom, rgba(43,36,48,.30), rgba(43,36,48,0));
  pointer-events: none;
}
.photo-dots {
  position: absolute; top: 10px; left: 10px; right: 10px; z-index: 4;
  display: flex; gap: 4px;
}
.photo-dots i {
  flex: 1; height: 3.5px; border-radius: 3px;
  background: rgba(255,255,255,.5);
  box-shadow: 0 0 0 .5px rgba(43,36,48,.25);
  cursor: pointer;
  /* A 3.5px bar is not a touch target; pad the hit area without moving it. */
  position: relative;
}
.photo-dots i::after {
  content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px;
}
.photo-dots i.on { background: #fff; box-shadow: 0 0 0 .5px rgba(43,36,48,.4); }

.photo-nav { position: absolute; inset: 0; z-index: 3; display: flex; }
.photo-nav button { flex: 1; background: transparent; border: 0; padding: 0; }
.photo-nav button:focus-visible { outline: 2px solid var(--rose); outline-offset: -4px; }

/* Visible controls. Tapping the invisible left/right halves is a convention
   phone users know; on a desktop with a mouse it is guesswork, so show arrows. */
.photo-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.94);
  color: var(--plum); display: grid; place-items: center; padding: 0;
  box-shadow: 0 3px 12px rgba(43,36,48,.22);
  opacity: 0; transition: opacity .18s, transform .12s, background .15s;
}
.photo-arrow svg { width: 20px; height: 20px; }
.photo-arrow.prev { left: 10px; }
.photo-arrow.next { right: 10px; }
.photo-arrow:hover { background: #fff; }
.photo-arrow:active { transform: translateY(-50%) scale(.9); }
.card:hover .photo-arrow, .photo-arrow:focus-visible { opacity: 1; }
/* Touch devices cannot hover, so keep them permanently visible there. */
@media (hover: none) {
  .photo-arrow { opacity: .9; }
}

.photo-count {
  position: absolute; top: 24px; left: 12px; z-index: 4;
  background: rgba(43,36,48,.68); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 9px; border-radius: var(--r-pill);
}

.photo-tag {
  position: absolute; top: 24px; right: 12px; z-index: 4;
  background: rgba(43,36,48,.72); color: #fff;
  font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}

.card-info {
  position: relative; z-index: 3;
  padding: 16px 18px 18px;
  background: var(--card);
  border-top: 1px solid var(--line);
}
.card-brand {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rose-deep);
}
.card-name {
  margin: 3px 0 0; font-size: 23px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em;
}
.card-tag {
  margin: 7px 0 0; font-size: 14px; line-height: 1.45; color: var(--plum-soft);
  display: flex; gap: 6px; align-items: flex-start;
}
.card-tag span:first-child { flex: none; }
.card-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.card-price { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.card-price small { font-size: 12px; font-weight: 650; color: var(--plum-faint); display: block; letter-spacing: 0; }
.card-more {
  margin-left: auto; width: 40px; height: 40px; flex: none;
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--card);
  display: grid; place-items: center; font-size: 17px; font-weight: 800; color: var(--plum-soft);
}
.card-more:hover { border-color: var(--rose); color: var(--rose); }

/* swipe verdict stamps */
.stamp {
  position: absolute; top: 26px; z-index: 5;
  font-size: 26px; font-weight: 900; letter-spacing: .06em;
  padding: 9px 16px; border-radius: 12px; border: 3.5px solid;
  opacity: 0; pointer-events: none; text-transform: uppercase;
}
.stamp-like { left: 20px; color: var(--mint); border-color: var(--mint); transform: rotate(-13deg); background: rgba(231,246,238,.9); }
.stamp-pass { right: 20px; color: var(--plum-soft); border-color: var(--plum-soft); transform: rotate(13deg); background: rgba(255,255,255,.9); }

/* action bar */
.actions {
  display: flex; align-items: flex-start; justify-content: center; gap: 16px;
  padding: 14px 0 18px;
}
/* A bare star icon means nothing to a first-time visitor. Say what it does. */
.act-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.act-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--plum-faint);
}
.act {
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--card);
  display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
  transition: transform .13s ease, box-shadow .16s, border-color .16s, background .16s;
}
.act:active { transform: scale(.9); }
.act-pass { width: 62px; height: 62px; color: var(--plum-soft); }
.act-pass:hover { border-color: var(--plum-soft); background: #f4f1f5; }
.act-like { width: 74px; height: 74px; color: #fff; background: var(--rose); border-color: var(--rose); box-shadow: 0 12px 26px -10px rgba(232,70,124,.9); }
.act-like:hover { background: var(--rose-deep); }
.act-save { width: 52px; height: 52px; color: var(--amber); }
.act-save:hover { border-color: var(--amber); background: var(--amber-soft); }
.act svg { width: 46%; height: 46%; }
.act-like svg { width: 44%; height: 44%; }

.deck-hint {
  text-align: center; font-size: 13px; color: var(--plum-faint); margin: 0 0 4px;
}

/* deck side rails (desktop only) */
.rail { display: none; min-width: 0; }
.rail-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px; margin-bottom: 16px;
  min-width: 0; overflow: hidden;
}
.rail-card h3 {
  margin: 0 0 10px; font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--plum-faint);
}
.rail-card p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--plum-soft); }
.rail-card p:last-child { margin-bottom: 0; }

.mini-list { display: grid; gap: 10px; min-width: 0; }
.mini {
  display: flex; gap: 10px; align-items: center; min-width: 0;
  text-decoration: none; color: inherit;
}
.mini img {
  width: 46px; height: 46px; flex: none; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.mini div { min-width: 0; flex: 1 1 0; overflow: hidden; }
.mini b { display: block; font-size: 13px; font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Direct child only. Plain `.mini span` also matched .price-val and .blur inside
   it, forcing display:block on both and breaking the masked price onto two lines. */
.mini div > span { font-size: 12px; color: var(--plum-faint);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* progress toward a Home Profile */
.meter { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--rose); border-radius: 3px; transition: width .4s ease; }

/* ================================================================= PROFILE  */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(43,36,48,.5);
  opacity: 0; pointer-events: none; transition: opacity .25s;
  backdrop-filter: blur(2px);
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; z-index: 81; left: 0; right: 0; bottom: 0;
  max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--card);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  transform: translateY(101%); transition: transform .3s cubic-bezier(.2,.8,.3,1);
  box-shadow: 0 -12px 40px -12px rgba(43,36,48,.4);
}
.sheet.open { transform: translateY(0); }
.sheet:not(.open) { pointer-events: none; }
.sheet-grab { width: 42px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 10px auto 0; }
/* Sticky + float made this easy to miss and easy to mis-click, which left the
   sheet open on top of the swipe buttons. Pinned, larger, always on top. */
.sheet-close {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--card);
  font-size: 19px; line-height: 1; color: var(--plum-soft);
  display: grid; place-items: center;
  box-shadow: 0 3px 12px rgba(43,36,48,.16);
  transition: background .14s, color .14s, transform .1s;
}
.sheet-close:hover { background: var(--rose-soft); color: var(--rose-deep); }
.sheet-close:active { transform: scale(.92); }

/* A second, unmissable way out at the end of a long sheet. */
.sheet-done {
  width: 100%; margin-top: 22px; padding: 14px;
  border: 1px solid var(--line-strong); background: var(--card);
  border-radius: var(--r-pill); font-size: 15px; font-weight: 700; color: var(--plum);
}
.sheet-done:hover { border-color: var(--rose); color: var(--rose-deep); }
.sheet-body { padding: 6px 20px 32px; }

.gallery { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); margin: 8px 0 18px; }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.gallery img.fill { object-fit: cover; }
.gallery figcaption { font-size: 11.5px; color: var(--plum-faint); padding: 5px 2px 0; }

.p-head h2 { margin: 0; font-size: 27px; line-height: 1.14; font-weight: 850; letter-spacing: -.025em; }
.p-brand { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-deep); }
.p-tag { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--plum-soft); }
.p-price { margin: 12px 0 0; font-size: 24px; font-weight: 850; letter-spacing: -.02em; }
.p-price small { display: block; font-size: 12px; font-weight: 650; color: var(--plum-faint); letter-spacing: 0; }

.pbox { margin: 20px 0 0; }
.pbox h3 {
  margin: 0 0 8px; font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--plum-faint);
}
.pbox p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--plum); }
.pbox p.quote { font-style: italic; color: var(--plum-soft); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--rose-tint); color: var(--rose-deep);
  border-radius: var(--r-pill); padding: 7px 13px; font-size: 13.5px; font-weight: 650;
}
.chip-neutral { background: #f3f0f5; color: var(--plum-soft); }

/* the hard separation between personality and specifications */
.serious {
  margin: 26px 0 0; padding: 18px;
  background: #faf9fb; border: 1px solid var(--line); border-radius: var(--r-md);
}
.serious h3 {
  margin: 0 0 4px; font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  color: var(--plum); text-transform: none;
}
.serious .sub { margin: 0 0 14px; font-size: 13px; color: var(--plum-faint); }
.spec-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.spec {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.spec:last-child { border-bottom: 0; }
.spec b { font-weight: 700; text-align: right; }
.spec span { color: var(--plum-soft); }

.note {
  margin: 16px 0 0; padding: 13px 15px; border-radius: var(--r-sm);
  background: var(--amber-soft); border: 1px solid #f0e6cf;
  font-size: 13.5px; line-height: 1.55; color: #7a6a3f;
}
.note b { color: #6b5c33; }

/* ================================================================ WIZARD    */
.wiz { max-width: 620px; margin: 0 auto; padding: 20px 0 60px; }
.wiz-progress { display: flex; gap: 5px; margin-bottom: 26px; }
.wiz-progress i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.wiz-progress i.on { background: var(--rose); }

.wiz-step h2 {
  margin: 0 0 8px; font-size: clamp(24px, 5vw, 32px); line-height: 1.15;
  font-weight: 850; letter-spacing: -.03em;
}
.wiz-step p.help { margin: 0 0 22px; font-size: 15.5px; line-height: 1.55; color: var(--plum-soft); }

.opts { display: grid; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  padding: 15px 17px; font-size: 16px; font-weight: 620; color: var(--plum);
  transition: border-color .14s, background .14s, transform .1s;
}
.opt:hover { border-color: var(--rose); }
.opt:active { transform: scale(.99); }
.opt.on { border-color: var(--rose); background: var(--rose-tint); }
.opt .emoji { font-size: 21px; flex: none; line-height: 1; }
.opt .sub { display: block; font-size: 13px; font-weight: 500; color: var(--plum-faint); margin-top: 2px; }
.opt.unsure { border-style: dashed; }

.field { margin: 0 0 18px; }
.field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 15px; font-size: 16px; font-family: inherit;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--card);
  color: var(--plum);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft);
}
.field .hint { font-size: 12.5px; color: var(--plum-faint); margin-top: 6px; }

.slider-row { display: grid; gap: 16px; }
.slider-item label { display: flex; justify-content: space-between; font-size: 15px; font-weight: 650; margin-bottom: 8px; }
.slider-item label span { color: var(--rose-deep); font-size: 13px; font-weight: 750; }
.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; padding: 10px 4px; font-size: 13px; font-weight: 650;
  border: 1.5px solid var(--line-strong); background: var(--card); border-radius: var(--r-sm);
  color: var(--plum-soft);
}
.seg button.on { border-color: var(--rose); background: var(--rose-tint); color: var(--rose-deep); }

.wiz-nav { display: flex; gap: 12px; margin-top: 28px; }
.wiz-nav .btn { flex: 1; justify-content: center; }

/* ================================================================ RESULTS   */
.results { padding: 24px 0 64px; }
.results-head { max-width: 640px; margin-bottom: 26px; }
.results-head h1 { margin: 0 0 10px; font-size: clamp(28px, 5.4vw, 42px); line-height: 1.08; font-weight: 850; letter-spacing: -.03em; }
.results-head p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--plum-soft); }

.type-read {
  background: var(--rose-tint); border-radius: var(--r-md); padding: 18px 20px; margin: 0 0 24px;
}
.type-read h3 { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--rose-deep); }
.type-read p { margin: 0 0 5px; font-size: 15px; line-height: 1.55; color: var(--plum-soft); }
.type-read p:last-child { margin-bottom: 0; }

.rec-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.rec {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.rec-media { position: relative; background: #fff; }
.rec-media img { width: 100%; aspect-ratio: 4/3; object-fit: contain; }
.badge {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--rose-soft); color: var(--rose-deep);
}
.badge.good { background: var(--mint-soft); color: #1f7a51; }
.badge.mid  { background: #f3f0f5; color: var(--plum-soft); }
.rec-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.rec-body .p-brand { margin-bottom: 3px; }
.rec-body h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
.rec-quote { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--plum-faint); font-style: italic; }
.rec-price { font-size: 21px; font-weight: 850; margin: 0 0 14px; display: block; }

.why h4 {
  margin: 0 0 8px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--plum-faint);
}
.why ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.why li { display: flex; gap: 9px; font-size: 14.5px; line-height: 1.45; }
.why li .tick { color: var(--mint); font-weight: 800; flex: none; }
.why li.warn .tick { color: var(--amber); }
.why li.warn { color: #7a6a3f; }

.rec-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 6px; }
.rec-actions .btn { flex: 1; justify-content: center; padding: 12px 16px; font-size: 14.5px; }

/* email capture */
.capture {
  margin: 34px 0 0; padding: 26px 22px;
  background: linear-gradient(160deg, #fff 0%, var(--rose-tint) 100%);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.capture h2 { margin: 0 0 8px; font-size: clamp(21px, 4vw, 27px); line-height: 1.2; font-weight: 850; letter-spacing: -.02em; }
.capture p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--plum-soft); }
.capture-row { display: grid; gap: 10px; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--plum-soft); }
.consent input { margin-top: 2px; width: 17px; height: 17px; flex: none; accent-color: var(--rose); }
.fineprint { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--plum-faint); }

/* ------------------------------------------------------- match celebration */
.match-cel {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center; text-align: center;
  background: linear-gradient(165deg, rgba(232,70,124,.97), rgba(140,30,80,.97));
  color: #fff; opacity: 0; pointer-events: none; transition: opacity .28s;
  padding: 24px;
}
.match-cel.open { opacity: 1; pointer-events: auto; }
.match-cel h2 {
  margin: 0 0 10px; font-size: clamp(38px, 11vw, 76px); line-height: .98;
  font-weight: 900; letter-spacing: -.045em;
}
.match-cel .sub { margin: 0 0 6px; font-size: 17px; font-weight: 650; opacity: .95; }
.match-cel .disclaimer {
  margin: 18px auto 0; max-width: 400px; font-size: 13px; line-height: 1.55;
  opacity: .88; background: rgba(255,255,255,.14); padding: 12px 16px; border-radius: var(--r-md);
}
.match-cel img {
  width: 168px; height: 168px; object-fit: contain; background: #fff;
  border-radius: var(--r-md); margin: 20px auto; padding: 10px;
}
.match-cel .btn { margin-top: 8px; }
.match-cel .btn-ghost { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  z-index: 99; background: var(--plum); color: #fff;
  padding: 13px 20px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 620;
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
  box-shadow: var(--shadow-card); max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* empty / loading */
.empty { text-align: center; padding: 60px 20px; color: var(--plum-soft); }
.empty h2 { margin: 0 0 10px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--plum); }
.empty p { margin: 0 auto 20px; max-width: 46ch; font-size: 15.5px; line-height: 1.6; }

.spinner {
  width: 34px; height: 34px; margin: 60px auto;
  border: 3px solid var(--line); border-top-color: var(--rose);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.site-foot {
  border-top: 1px solid var(--line); margin-top: 40px; padding: 26px 0 40px;
  font-size: 13px; line-height: 1.6; color: var(--plum-faint);
}
.site-foot strong { color: var(--plum-soft); }

/* ==========================================================================
   DESKTOP — a different composition, not a widened phone.
   ========================================================================== */
@media (min-width: 700px) {
  .trust { grid-template-columns: repeat(3, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .rec-grid { grid-template-columns: repeat(2, 1fr); }
  .capture-row { grid-template-columns: 1fr auto; align-items: start; }
  .spec-grid { grid-template-columns: repeat(2, 1fr) ; column-gap: 28px; }
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(760px, 94vw); max-height: 88vh;
    border-radius: var(--r-lg);
    transform: translate(-50%, -46%) scale(.97);
    opacity: 0; transition: transform .26s cubic-bezier(.2,.8,.3,1), opacity .22s;
  }
  .sheet.open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  /* On mobile the closed sheet is pushed off-screen, so it cannot be in the way.
     On desktop it stays centred at opacity 0, which left an invisible but still
     clickable panel sitting on top of the swipe buttons once it had content in it.
     Opacity is not enough; it has to stop taking hits. */
  .sheet:not(.open) { pointer-events: none; visibility: hidden; }
  .sheet.open { pointer-events: auto; visibility: visible; }
  .sheet-grab { display: none; }
  .sheet-body { padding: 10px 30px 34px; }
}

@media (min-width: 960px) {
  .hero { padding: 64px 0 72px; }
  .deck-stage {
    grid-template-columns: 270px minmax(0, 400px) 270px;
    justify-content: center;
    align-items: start;
    gap: 34px;
    padding-top: 22px;
  }
  .rail { display: block; }
  .rail-left { order: 1; }
  .deck-col { order: 2; }
  .rail-right { order: 3; }
  .deck {
    height: min(calc(var(--vh, 1vh) * 100 - 236px), 600px);
    max-height: 600px;
  }
  body.is-deck { overflow: auto; }         /* desktop can scroll normally */
  .rec-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
  .hero-in { max-width: 780px; }
}

/* Respect reduced-motion: keep the app usable, drop the flourish. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Ask-a-human block sits after the picks, so it reads as the next honest step. */
.help-block { margin-top: 20px; }
.help-block textarea { resize: vertical; min-height: 84px; }
.help-block .capture-row { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .help-block .capture-row { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* Three ways forward when nothing clears Layer A. Never a dead end. */
.ways { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0 0 8px; }
.way {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px; display: flex; flex-direction: column;
}
.way h3 { margin: 0 0 8px; font-size: 16px; font-weight: 780; letter-spacing: -.01em; }
.way p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--plum-soft); flex: 1; }
.way .btn { padding: 12px 18px; font-size: 14.5px; }
@media (min-width: 820px) {
  .ways { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   PRICE MASKING
   The real figure is rendered with everything after the leading digit blurred,
   so the magnitude reads at a glance but the exact number does not. Unlocks in
   full once the visitor gives us an email. Never shows a fake number.
   ========================================================================== */
.price-val {
  /* inline-block, not flex: it has to behave like a run of text so the visible
     digits and the blurred ones stay on one line wherever it is dropped in. */
  display: inline-block !important;
  white-space: nowrap !important;
}
.price-locked .blur { display: inline !important; }
/* Enough blur that the exact digits are unreadable, light enough that they still
   read as digits rather than as a smudge or a missing value. */
.price-locked .blur {
  filter: blur(3.2px);
  -webkit-user-select: none; user-select: none;
  letter-spacing: .06em;
  opacity: .8;
}
.price-locked.price-sm .blur { filter: blur(2.2px); letter-spacing: .04em; }

.price-unlock {
  /* Own line under the price. Inline it crowds the figure it refers to. */
  display: flex; align-items: center; width: fit-content; margin-top: 7px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--rose-deep); text-decoration: none;
  border-bottom: 1px solid currentColor; width: fit-content;
}
.price-unlock:hover { color: var(--plum); }

/* Nudge on the card, small enough not to fight the price itself. */
.card-price small, .p-price small { color: var(--plum-faint); }

/* ==========================================================================
   HERO IMAGERY
   The joke is carried entirely by the photograph. The headline and supporting
   copy stay plain, because the purchase is not a joke.
   ========================================================================== */
.hero-grid { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }

.hero-shot, .hero-band { margin: 0; }
.hero-shot img, .hero-band img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  background: #efeaf1;
}
.hero-shot figcaption, .hero-band figcaption {
  margin-top: 10px; font-size: 13.5px; line-height: 1.5;
  color: var(--plum-faint); font-style: italic;
}
.hero-band { margin-top: 40px; }
.hero-band figcaption { text-align: center; }

@media (min-width: 900px) {
  /* Copy left, photograph right, both optically centred against each other. */
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 44px; }
  .hero-in { max-width: none; }
  .hero-band img { max-height: 420px; object-fit: cover; object-position: center 40%; }
}

/* A quiet, serious beat after the second photograph: this is a fifteen year
   decision, which is the real reason the site exists. Deliberately unfunny. */
.long-haul {
  margin: 22px 0 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px 24px;
}
.long-haul h2 {
  margin: 0 0 12px; font-size: clamp(22px, 3.6vw, 30px); line-height: 1.15;
  font-weight: 850; letter-spacing: -.025em;
}
.long-haul p {
  margin: 0 0 14px; max-width: 62ch;
  font-size: clamp(15.5px, 1.9vw, 17px); line-height: 1.65; color: var(--plum-soft);
}
.long-haul p:last-of-type { margin-bottom: 0; }
.long-haul strong { color: var(--plum); font-weight: 750; }

.long-haul-facts {
  display: grid; gap: 14px; grid-template-columns: 1fr;
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line);
}
.long-haul-facts div { display: flex; flex-direction: column; gap: 3px; }
.long-haul-facts b {
  font-size: 20px; font-weight: 850; letter-spacing: -.02em; color: var(--rose-deep);
}
.long-haul-facts span { font-size: 14px; line-height: 1.45; color: var(--plum-soft); }

@media (min-width: 760px) {
  .long-haul { padding: 36px 34px; }
  .long-haul-facts { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

/* The long-haul block becomes copy + photograph side by side on desktop.
   The photo is the other end of the hero's story: same idea, fifteen years on. */
.long-haul { display: grid; gap: 24px; grid-template-columns: 1fr; }
.long-haul-copy { min-width: 0; }
.long-haul-shot { margin: 0; align-self: center; }
.long-haul-shot img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center 55%;
  border-radius: var(--r-md); background: #efeaf1;
}
.long-haul-shot figcaption {
  margin-top: 10px; font-size: 13px; line-height: 1.5;
  color: var(--plum-faint); font-style: italic;
}
@media (min-width: 900px) {
  .long-haul { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .long-haul-shot img { aspect-ratio: 5 / 4; }
}

/* ==========================================================================
   CALCULATORS
   ========================================================================== */
.tool-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .tool-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } }
.tool-card {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px; text-decoration: none; color: inherit;
  transition: border-color .14s, transform .1s, box-shadow .16s;
}
.tool-card:hover { border-color: var(--rose); box-shadow: var(--shadow-soft); }
.tool-card:active { transform: scale(.995); }
.tool-ico { font-size: 24px; line-height: 1; margin-bottom: 6px; }
.tool-card b { font-size: 17px; font-weight: 780; letter-spacing: -.01em; }
.tool-card span:last-child { font-size: 14px; line-height: 1.5; color: var(--plum-soft); }

.tool { padding: 24px 0 64px; max-width: 720px; }
.tool h1 { margin: 10px 0 12px; font-size: clamp(27px, 5vw, 38px); line-height: 1.1; font-weight: 850; letter-spacing: -.03em; }
.tool-intro { margin: 0 0 26px; font-size: 16.5px; line-height: 1.6; color: var(--plum-soft); }
.tool-back { display: inline-block; font-size: 14px; font-weight: 650; text-decoration: none; }
.tool-back:hover { text-decoration: underline; }
.tool-h2 { margin: 30px 0 14px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

.tool-form { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 20px; }
@media (min-width: 640px) { .tool-form { grid-template-columns: 1fr 1fr; } }
.tool-form .field { margin: 0; }
.tool-form input[type=range] { width: 100%; accent-color: var(--rose); padding: 0; border: 0; }

.tool-result {
  margin: 24px 0 0; padding: 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.tool-result h2 { margin: 12px 0 4px; font-size: 26px; font-weight: 850; letter-spacing: -.025em; }
.tool-result .tool-big { font-size: clamp(32px, 7vw, 46px); line-height: 1.05; }
.tool-sub { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--plum-soft); }
.tool-result .spec-grid { margin-top: 16px; }

.tool-note {
  margin: 18px 0 0; padding: 15px 17px; border-radius: var(--r-md);
  font-size: 14px; line-height: 1.6;
}
.tool-note.plain { background: #faf9fb; border: 1px solid var(--line); color: var(--plum-soft); }
.tool-note.good  { background: var(--mint-soft); border: 1px solid #cfe9dc; color: #1f6b49; }
.tool-note.warn  { background: var(--amber-soft); border: 1px solid #f0e6cf; color: #7a6a3f; }
.tool-note b { color: inherit; font-weight: 750; }

.tool-cta {
  margin: 22px 0 0; padding: 20px;
  background: var(--rose-tint); border-radius: var(--r-md);
}
.tool-cta p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--plum-soft); }
.tool-cta .btn { margin-right: 10px; margin-bottom: 8px; }

.cost-compare {
  display: grid; gap: 14px; grid-template-columns: 1fr;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.cost-compare div { display: flex; flex-direction: column; gap: 2px; }
.cost-compare b { font-size: 20px; font-weight: 850; letter-spacing: -.02em; }
.cost-compare span { font-size: 13px; line-height: 1.4; color: var(--plum-soft); }
@media (min-width: 640px) { .cost-compare { grid-template-columns: repeat(3, 1fr); } }

.ref-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 22px 0 0; }
.ref-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; }
.ref-card.legacy { border-color: #f0e6cf; background: var(--amber-soft); }
.ref-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ref-head b { font-size: 19px; font-weight: 850; letter-spacing: -.02em; }
.ref-gwp { margin: 8px 0 0; font-size: 13px; color: var(--plum-faint); }
.ref-gwp b { color: var(--plum); font-weight: 750; }
.ref-headline { margin: 8px 0 10px; font-size: 15px; font-weight: 700; }
.ref-card ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
.ref-card li { font-size: 14px; line-height: 1.55; color: var(--plum-soft); }
@media (min-width: 900px) { .ref-grid { grid-template-columns: repeat(3, 1fr); } }

.why li.warn .tick { color: var(--amber); }
.why li.warn { color: #7a6a3f; }

/* The calculators page gets its own joke: a relationship that has clearly
   broken down, sitting right above the repair-or-replace tool. */
.tool-shot { margin: 30px 0 0; }
.tool-shot img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg); background: #efeaf1;
  box-shadow: var(--shadow-soft);
}
.tool-shot figcaption {
  margin-top: 11px; font-size: 14px; line-height: 1.55;
  color: var(--plum-faint); font-style: italic; max-width: 62ch;
}
@media (min-width: 900px) {
  .tool-shot img { max-height: 420px; object-fit: cover; object-position: center 45%; }
}