.home-main {
  background: radial-gradient(ellipse 74% 560px at 78% 170px, #332047, transparent 90%), var(--bg);
}
.home-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 64px);
  min-height: min(590px, 72vh);
  padding-block: clamp(42px, 6vw, 92px);
}
.home-hero h1 {
  max-width: 13ch;
  font-size: clamp(46px, 6vw, 93px);
  line-height: 1.01;
  letter-spacing: -.069em;
  text-wrap: balance;
}
.home-hero .hero-intro { max-width: 46ch; }
.home-hero .hero-visual {
  border: 1px solid #5f4275;
  border-radius: clamp(14px, 2vw, 26px);
  aspect-ratio: 1.2;
  box-shadow: 0 22px 80px #0c061e65, 0 0 48px #b269f123;
}
.home-hero .hero-visual :is(img, svg) { object-fit: contain; }
.home-section, .home-spotlight { padding-block: clamp(33px, 5.3vw, 74px); }
.home-section .section-head { align-items: center; }
.home-main :is(.home-section, .home-spotlight, .guide-section, .about) h2,
.savings-section h2 { font-size: clamp(32px, 4.2vw, 56px); }
.home-spotlight {
  background: linear-gradient(118deg, #191225, #14101d 70%);
}
.home-spotlight .cards, #new-releases .cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr));
}
.home-main #how { padding-block: 0 clamp(28px, 4vw, 54px); }
.home-main #how .guide-steps { margin-bottom: 0; }
.home-main .about { padding-block: clamp(36px, 6vw, 76px); border-top: 1px solid var(--line); }
.home-browse, .home-membership, .savings-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 42px);
}
.home-browse { margin-top: 25px; }
.home-browse h3 { font-size: 1rem; }
.home-browse ul {
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}
.home-browse a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  border: 1px solid #614978;
  border-radius: 999px;
  background: #241833;
  transition: background-color 150ms, border-color 150ms;
}
.home-browse a:hover { background: #35234a; border-color: var(--accent); }
.home-browse .icon { width: 15px; height: 15px; color: var(--accent); }
.home-membership {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: clamp(18px, 4vw, 52px);
  background: radial-gradient(ellipse at 100% 0%, #3c2351, transparent 80%), var(--panel);
  border: 1px solid #614978;
  border-radius: 16px;
}
.home-membership .button { margin: 0; }
.update-content { padding-bottom: clamp(64px, 9vw, 120px); }
.update-empty, .update-entry {
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--muted);
}
.update-list { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; }
.update-entry h2, .update-entry h3 {
  color: var(--ink);
  font-size: clamp(20px, 2.2vw, 28px);
  margin-block: 8px 4px;
}
.update-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: .875rem; }
.update-category { padding: 4px 9px; border-radius: 999px; background: #322246; color: var(--accent); }
.savings-section { padding-top: clamp(36px, 6vw, 72px); }
.savings-section > .section-intro { max-width: 58ch; }
.savings-card {
  align-items: start;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  margin-top: 24px;
  padding: clamp(17px, 4vw, 48px);
  border: 1px solid #614978;
  border-radius: 16px;
  background: linear-gradient(130deg, #251931, var(--panel) 64%);
}
.savings-card[hidden] { display: none; }
.savings-fields { display: grid; gap: 10px; }
.savings-fields label { font-weight: 650; }
.savings-fields label:not(:first-child) { margin-top: 14px; }
.savings-fields :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 8px 12px;
  background: #130f1d;
  border: 1px solid #70568b;
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
}
.savings-fields :is(input, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#savings-invalid { color: #ffd1e6; font-size: .875rem; }
.savings-breakdown { display: grid; gap: 6px; margin: 0; }
.savings-breakdown > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 13px;
  border-bottom: 1px solid #453456;
}
.savings-breakdown dd { margin: 0; text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }
.savings-breakdown .savings-total { font-weight: 750; }
.savings-breakdown .savings-net {
  margin-top: 4px;
  border-bottom: 0;
  border-radius: 7px;
  color: #21112d;
  background: #edc4fb;
  font-weight: 750;
}
.savings-breakdown[data-status="costs"] .savings-net { background: #ffd1e6; }
.lover-timeline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-bottom: 18px;
}
.lover-timeline > div {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 10px;
  border: 1px solid #59436b;
  border-radius: 7px;
  overflow-wrap: anywhere;
}
.lover-timeline > div + div { border-color: #b98ed2; background: #322246; }
.lover-timeline small { color: var(--muted); }
@media (max-width: 780px) {
  .home-hero { grid-template-columns: 1fr; min-height: auto; }
  .home-hero .hero-visual { width: min(100%, 560px); justify-self: center; }
}
@media (max-width: 620px) {
  .home-browse, .home-membership, .savings-card { grid-template-columns: 1fr; }
  .home-section .section-head { gap: 0 16px; }
}