/* Homepage-only polish. Grid placement and responsive ordering stay in the views. */
.homepage {
  --home-ink: #272357;
  --home-accent: #6765cb;
  --home-muted: #625f75;
  --home-line: #d9d7f4;
  background: #f9f8ff;
  color: var(--home-ink);
}

.homepage h1,
.homepage h1 span,
.homepage h2,
.homepage h2 span,
.homepage .home-feature-title {
  font-family: 'Syne', 'Syne Fallback', 'Syne Fallback Android', sans-serif;
}

.homepage h1 { line-height: 1.08; letter-spacing: -0.045em; text-wrap: pretty; }
.homepage h2 { line-height: 1.15; letter-spacing: -0.035em; text-wrap: balance; }
.homepage p { text-wrap: pretty; }
.homepage a, .homepage summary { -webkit-tap-highlight-color: #d9d7f4; }
.homepage :is(a, summary):focus-visible {
  outline: 3px solid var(--home-accent);
  outline-offset: 5px;
  border-radius: 6px;
}

.home-header nav {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--home-line);
}
.homepage .home-login {
  color: #4f4fb4;
  padding: 0.5rem 0.9rem;
  border-radius: 0.65rem;
  transition: color 180ms ease, background 180ms ease;
}
.home-login:hover { background: #efedff; color: #272357; }

.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 85% 38%, #d9d7f480, transparent 64%);
}
.homepage .home-hero h1 { color: #07060f; }
.homepage .home-hero h1 span { color: var(--home-accent); }
.home-hero p { color: var(--home-muted); }
.homepage .home-primary {
  color: #272357;
  background: #b8aff3;
  border: 1px solid #a69ae9;
  border-radius: 0.75rem;
  box-shadow: 0 2px 3px #27235708, 0 8px 20px -10px #6765cb70, inset 0 1px 0 #ffffff66;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.homepage .home-primary:hover {
  background: #c5bdf7;
  box-shadow: 0 4px 6px #27235708, 0 12px 24px -10px #6765cb80;
  transform: translateY(-2px);
}
.homepage .home-primary:active { transform: translateY(1px); }
.homepage .home-secondary {
  color: #4f4b67;
  border-color: #d9d7f4;
  border-radius: 0.75rem;
  background: #ffffff60;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
.homepage .home-secondary:hover { color: #3e3e91; background: #efedff; border-color: #b8aff3; }
.home-preview { border-radius: 1rem; }
.homepage .home-preview picture { display: block; box-shadow: none; background: transparent; --tw-ring-shadow: 0 0 transparent; }
.homepage .home-preview img {
  border: 1px solid #d9d7f4;
  border-radius: 1rem;
  box-shadow: 0 4px 8px -4px #27235714, 0 28px 60px -24px #6765cb55;
}

.homepage #features { scroll-margin-top: 2rem; }
.homepage .home-section-title { color: var(--home-ink); font-weight: 400; }
.homepage .home-section-title span { color: var(--home-accent); }
.home-feature { isolation: isolate; }
.homepage .home-feature > .absolute:first-child {
  background: #fff;
  border-radius: 1.5rem;
}
.homepage .home-feature > .relative { border-radius: 1.5rem; }
.homepage .home-feature > .pointer-events-none {
  border-radius: 1.5rem;
  border: 1px solid #e8e5f5;
  --tw-ring-shadow: 0 0 transparent;
  box-shadow: 0 3px 5px #27235703, 0 16px 30px -24px #6765cb45;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.homepage .home-feature:hover > .pointer-events-none {
  border-color: #b8aff3;
  box-shadow: 0 4px 8px #27235705, 0 20px 36px -24px #6765cb60;
}
.homepage .home-feature-title { color: var(--home-ink); font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; }
.homepage .home-feature-title + p { color: var(--home-muted); font-size: 0.9375rem; line-height: 1.75; }
.home-feature a.underline { text-decoration-thickness: 1px; text-underline-offset: 4px; }

.home-reviews { margin-top: 1.5rem; }
.homepage .home-reviews h2 { color: var(--home-ink); }
.homepage .home-reviews blockquote { color: #4f4b67; }
.homepage .home-reviews [data-reveal-target] > a { display: block; border-radius: 0.5rem; }
.home-reviews figure { transition: color 180ms ease; }
.homepage .home-reviews a:hover blockquote { color: #3e3e91; }
.home-reviews img { object-fit: contain; object-position: left; }

.homepage .home-cta { padding-top: 3rem; padding-bottom: 3rem; margin-top: 1rem; }
.home-cta::before {
  content: '';
  position: absolute;
  inset: 0 1.5rem;
  max-width: 76rem;
  margin-inline: auto;
  border: 1px solid #d9d7f4;
  border-radius: 1.5rem;
  background: #efedff;
  z-index: -1;
  pointer-events: none;
}
.homepage .home-cta h2 { color: var(--home-ink); }
.homepage .home-cta h2 span { color: #4f4fb4; }
.homepage .home-faq { padding-top: 4rem; }
.homepage .home-faq h2 { color: var(--home-ink); }
.homepage .home-faq details { border-color: #d9d7f4; }
.homepage .home-faq summary { color: var(--home-ink); transition: color 180ms ease; }
.homepage .home-faq summary:hover { color: var(--home-accent); }
.homepage .home-faq summary svg { color: #6765cb; }
.homepage .home-faq details[open] summary { color: #4f4fb4; }
.homepage .home-faq details p { color: var(--home-muted); max-width: 65ch; }

@media (min-width: 1024px) {
  .homepage .home-hero h1 { font-size: clamp(3rem, 3.9vw, 3.5rem); }
}
@media (max-width: 639px) {
  .home-header nav { padding-bottom: 0.875rem; }
  .homepage .home-hero h1 { font-size: clamp(2rem, 8.8vw, 2.75rem); }
  .homepage .home-section-title { font-size: 2rem; }
  .home-cta::before { inset-inline: 1rem; }
  .homepage .home-cta h2 { font-size: 1.875rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .homepage .hero-fade-up { animation: home-enter 650ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .homepage .hero-fade-up-delay-1 { animation-delay: 80ms; }
  .homepage .hero-fade-up-delay-2 { animation-delay: 140ms; }
  .homepage .hero-fade-up-delay-3 { animation-delay: 180ms; }
}
@media (max-width: 379px) {
  .homepage .home-cta .home-primary { padding-inline: 1rem; font-size: 0.875rem; white-space: nowrap; }
  .homepage .home-cta .gap-x-6 { column-gap: 1rem; }
}
@keyframes home-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .homepage *, .homepage *::before, .homepage *::after { transition: none !important; animation: none !important; }
  html:has(.homepage) { scroll-behavior: auto; }
}

/* Product illustrations: one surface, readable prices, and restrained accents. */
.homepage .price-alert-preview,
.homepage .coupon-preview {
  display: block;
  width: 100%;
  max-width: 22rem;
  color: #272357;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.homepage .price-alert-preview {
  padding: 1.125rem;
  border: 1px solid #e8e5f5;
  border-radius: 1.125rem;
  background: #fff;
  box-shadow: 0 3px 8px #27235704, 0 16px 28px -18px #6765cb40;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.homepage .preview-notice-heading { display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; font-weight: 600; }
.homepage .preview-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.625rem; background: #efedff; color: #6765cb; flex: none; }
.homepage .preview-icon svg { width: 1.125rem; height: 1.125rem; }
.homepage .preview-example { margin-left: auto; color: #777386; font-size: 0.6875rem; font-weight: 400; }
.homepage .preview-product-name { margin-top: 1rem; color: #393549; font-size: 0.875rem; font-weight: 600; line-height: 1.5; }
.homepage .preview-product-name > span { color: #777386; font-weight: 400; white-space: nowrap; }
.homepage .preview-price-line { display: flex; align-items: baseline; gap: 0.375rem; margin-top: 0.5rem; }
.homepage .preview-price-line > strong { font-size: clamp(1.65rem, 2.3vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.045em; color: #14281d; }
.homepage .preview-currency { color: #777386; font-size: 0.6875rem; }
.homepage .preview-discount { color: #32624a; background: #e9faf0; padding: 0.25rem 0.4375rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.homepage .preview-price-line .preview-discount { margin-left: auto; align-self: center; }
.homepage .preview-previous-price { margin-top: 0.375rem; color: #777386; font-size: 0.75rem; }
.homepage .preview-previous-price s { margin-left: 0.25rem; text-decoration-color: #aaa6b8; }
.homepage .preview-savings { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding-top: 0.875rem; border-top: 1px solid #efedf5; font-size: 0.8125rem; color: #32624a; }
.homepage .preview-savings svg { width: 1rem; height: 1rem; }
.homepage .preview-savings > span:last-child { margin-left: auto; color: #6765cb; }
.homepage .coupon-preview { position: relative; isolation: isolate; padding-top: 1.625rem; }
.homepage .coupon-preview-sheet { position: absolute; height: 65%; border-radius: 1.125rem; pointer-events: none; }
.homepage .coupon-preview-sheet-back { inset: 0 1.125rem auto; background: #e9faf0; border: 1px solid #d5eddf; transform: rotate(3deg); }
.homepage .coupon-preview-sheet-middle { inset: 0.75rem 0.5rem auto; background: #efedff; border: 1px solid #e0dcf6; transform: rotate(-2deg); }
.homepage .coupon-preview-front { position: relative; padding: 1.125rem; border: 1px solid #e0dcf1; border-radius: 1.125rem; background: #fff; box-shadow: 0 4px 8px #27235703, 0 18px 30px -20px #6765cb50; transition: border-color 200ms ease, box-shadow 200ms ease; }
.homepage .coupon-preview-caption { margin-top: 0.75rem; font-size: 0.75rem; line-height: 1.6; color: #777386; }
.homepage .coupon-preview-offer { padding-block: 1.125rem; border-bottom: 1px solid #efedf5; }
.homepage .coupon-preview-category { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; color: #625f75; font-size: 0.8125rem; }
.homepage .coupon-preview-prices { display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap; margin-top: 0.375rem; }
.homepage .coupon-preview-prices strong { font-size: 1.5rem; letter-spacing: -0.04em; line-height: 1.3; color: #272357; }
.homepage .coupon-preview-prices s { color: #8b8798; font-size: 0.75rem; text-decoration-color: #b1adbb; }
.homepage .coupon-preview-offer > p { margin-top: 0.25rem; color: #32624a; font-size: 0.75rem; }
.homepage .coupon-preview-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; font-size: 0.8125rem; font-weight: 600; color: #4f4fb4; }
.homepage .coupon-preview-note { margin-top: 0.625rem; font-size: 0.625rem; color: #777386; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .homepage .price-alert-preview:hover, .homepage .coupon-preview:hover .coupon-preview-front { border-color: #b8aff3; box-shadow: 0 4px 8px #27235705, 0 20px 32px -18px #6765cb50; }
}

/* Let the shorter guide card fit its content instead of matching the alert. */
@media (min-width: 1024px) {
  .homepage .home-feature-grid { grid-template-rows: auto auto; }
}