/* Blog post tables on phones: several posts have 4-6 column tables wider
   than the text column (up to ~670px in a 326px column at 390px). The
   article sits inside main.overflow-hidden, so the extra width was
   clipped, or panned the whole page on iOS. Make each table its own
   horizontal scroll box instead. Only below 768px, so desktop tables
   keep their normal full-width table layout. */
@media (max-width: 767px) {
  .prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* 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; }
}
/* Horizontally scrolling card rows (e.g. related products): keep the
   scrollbar visible at all times so the overflow is discoverable —
   overlay scrollbars on macOS/iOS otherwise hide it until first scroll.
   Styled to match the native macOS/Safari look: translucent gray thumb,
   no track.

   Note: the standard scrollbar-width/scrollbar-color properties must be
   scoped to Firefox only — when Chrome (121+) sees them it ignores every
   ::-webkit-scrollbar rule and falls back to overlay scrollbars. */
.scrollbar-always::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 8px;
}

.scrollbar-always::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-always::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 9999px;
}

.scrollbar-always::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Firefox only (-moz-appearance is not parsed by WebKit/Blink) */
@supports (-moz-appearance: none) {
  .scrollbar-always {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.35) transparent;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */