/* SavItUp marketing site — plain CSS, no framework, no external fonts
   (system font stack only, per the "no external assets/CDNs" constraint).
   Colors mirror design/tokens.json / app/lib/theme.dart's Brand class. */

:root {
  --teal: #0d9488;
  --deep-teal: #085041;
  --teal-dark: #134e4a;
  --coral: #f97362;
  --coral-soft: #fb8a7a;
  --cream: #faf6f0;
  --ink: #1c2b2a;
  --ink-soft: #5c6b69;
  --border-light: #e7e0d6;
  --mist: #ecf5f3;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
}

.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;
}

/* --- Hero: brand teal gradient, mirrors login_screen.dart's welcome carousel --- */
.hero {
  background: linear-gradient(to bottom, var(--teal), var(--deep-teal));
  padding: 56px 20px 48px;
  text-align: center;
}

.hero-inner {
  max-width: 480px;
  margin: 0 auto;
}

.mark {
  width: 88px;
  height: 88px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 800;
  color: var(--white);
}

.mark-up {
  color: var(--coral);
}

.hero h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  color: var(--white);
}

.tagline {
  margin: 10px 0 28px;
  font-size: 17px;
  color: #9fe1cb;
}

.referral-line {
  margin: 0 0 20px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-size: 14px;
}

.referral-line strong {
  color: var(--coral-soft);
  letter-spacing: 0.03em;
}

.waitlist-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.waitlist-form input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 10px;
  border: none;
  font-size: 15px;
  background: var(--white);
  color: var(--ink);
}

.waitlist-form input:focus {
  outline: 3px solid var(--coral-soft);
  outline-offset: 1px;
}

.waitlist-form button {
  flex: 0 0 auto;
  padding: 13px 22px;
  border-radius: 10px;
  border: none;
  background: var(--coral);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.waitlist-form button:hover {
  background: var(--coral-soft);
}

.waitlist-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.waitlist-message {
  min-height: 20px;
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--white);
}

.waitlist-message.is-error {
  color: #ffd1cb;
}

.waitlist-message.is-success {
  color: #b6f4e2;
}

.store-button {
  display: inline-block;
  margin-top: 28px;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  cursor: default;
}

/* --- Value-prop sections --- */
main {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 20px;
}

.value-prop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 28px 16px;
  border-bottom: 1px solid var(--border-light);
}

.value-prop:last-child {
  border-bottom: none;
}

.value-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.value-prop h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.value-prop p {
  margin: 0;
  max-width: 440px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- Footer --- */
.site-footer {
  text-align: center;
  padding: 24px 20px 40px;
  color: var(--ink-soft);
  font-size: 13px;
}

@media (max-width: 420px) {
  .hero h1 {
    font-size: 28px;
  }
  .waitlist-form {
    flex-direction: column;
  }
  .waitlist-form button {
    width: 100%;
  }
}

/* --- Feature showcase sections (2026-08-31) --- */
.section-title {
  text-align: center;
  font-size: 24px;
  color: #134E4A;
  margin: 0 0 24px;
}
.features, .how-it-works, .web-callout {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px 8px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.feature-card {
  background: #FFFFFF;
  border: 1px solid #E7E0D6;
  border-radius: 12px;
  padding: 20px;
}
.feature-card h3 {
  margin: 8px 0 8px;
  font-size: 17px;
  color: #1C2B2A;
}
.feature-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #5C6B69;
}
.steps {
  max-width: 640px;
  margin: 0 auto;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.7;
  color: #1C2B2A;
}
.steps li { margin-bottom: 10px; }
.web-callout {
  text-align: center;
  padding-bottom: 40px;
}
.web-callout p {
  max-width: 560px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
  color: #5C6B69;
}
.web-callout a { color: #0D9488; font-weight: 600; }
.footer-links a { color: #0D9488; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* --- Zillow-style homepage (2026-08-31) --- */
.topnav {
  background: #FFFFFF;
  border-bottom: 1px solid #E7E0D6;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topnav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
}
.topnav-brand { display: flex; align-items: center; gap: 10px; }
.topnav-name-wrap { display: flex; flex-direction: column; line-height: 1.05; }
.topnav-sub {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #0D9488 0%, #F97362 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.mark-small {
  width: 34px;
  height: 34px;
  font-size: 17px;
  line-height: 34px;
  margin: 0;
  /* Solid teal so the white "S" stays visible on the white nav bar
     (the hero's .mark relies on a translucent white over teal). */
  background: #0D9488;
  color: #FFFFFF;
}
.topnav-name { font-weight: 800; font-size: 18px; color: #134E4A; }
.topnav-links { display: flex; gap: 18px; margin-left: auto; }
.topnav-links a { color: #1C2B2A; text-decoration: none; font-size: 14px; font-weight: 600; }
.topnav-links a:hover { color: #0D9488; }
.topnav-cta {
  background: #0D9488;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
}
.topnav-cta:hover { background: #134E4A; }

.hero-z {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0D9488 0%, #134E4A 90%);
  color: #FFFFFF;
  text-align: left;
  padding: 72px 20px 96px;
}
.hero-skyline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 180px;
  pointer-events: none;
}
.hero-z-inner { position: relative; max-width: 1100px; margin: 0 auto; }
.hero-headline {
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.hero-z .tagline { color: rgba(255,255,255,0.9); font-size: 18px; margin: 0 0 28px; }

.rate-search {
  display: flex;
  align-items: center;
  max-width: 560px;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 6px 6px 6px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.rate-search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 17px;
  color: #1C2B2A;
  background: transparent;
  min-width: 0;
}
.rate-search input::placeholder { color: #8A9997; }
.rate-search button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 11px;
  background: #F97362;
  color: #FFFFFF;
  cursor: pointer;
}
.rate-search button:hover { background: #e2604f; }

.trending { max-width: 1100px; margin: 0 auto; padding: 44px 20px 8px; }
.trending-title { font-size: 24px; color: #1C2B2A; margin: 0 0 4px; }
.trending-sub { font-size: 14px; color: #5C6B69; margin: 0 0 18px; }
.tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.tile {
  background: #FFFFFF;
  border: 1px solid #E7E0D6;
  border-radius: 12px;
  padding: 16px;
}
.tile-badges { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tile-badge {
  background: #F97362;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tile-seal { color: #0D9488; font-size: 12px; font-weight: 700; }
.tile-carrier { font-size: 16px; font-weight: 700; color: #1C2B2A; }
.tile-premium { font-size: 26px; font-weight: 800; color: #1C2B2A; margin: 4px 0 2px; }
.tile-per { font-size: 14px; font-weight: 600; color: #5C6B69; }
.tile-delta { font-size: 13px; font-weight: 700; }
.tile-delta-down { color: #0D9488; }
.tile-delta-up { color: #DC2626; }
.tile-meta { font-size: 12px; color: #5C6B69; margin-top: 8px; }
.trending-cta { margin: 16px 0 0; font-size: 15px; }
.trending-cta a { color: #0D9488; font-weight: 700; text-decoration: none; }
.trending-cta a:hover { text-decoration: underline; }
.footer-trademark { font-size: 11px; color: #8A9997; max-width: 640px; margin: 8px auto; }

@media (max-width: 640px) {
  .topnav-links { display: none; }
  .hero-z { padding: 48px 16px 72px; }
}

/* 2026-09-09: mobile-only. The hero's search box became a note + store button. */
.hero-app-note { max-width: 560px; margin: 22px auto 0; font-size: 16px; line-height: 1.55; opacity: 0.92; }
.hero-store { margin-top: 18px; }

/* 2026-09-21: savings totals carousel. Slides are stacked and only the
   `.is-active` one is shown -- the rule this exists for is that every slide
   carries its verified figure on the SAME frame, so stacking (not scrolling)
   is what keeps a single glance/screenshot honest. */
.saved-carousel { position: relative; max-width: 560px; margin: 0 0 20px; min-height: 64px; }
.saved-slide {
  display: none;
  animation: saved-fade 0.4s ease;
}
.saved-slide.is-active { display: block; }
.saved-headline {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255,255,255,0.92);
  margin: 0 0 4px;
}
/* The figure is the point of the tile, so it carries the weight and the
   label recedes. Tabular digits keep the number from twitching wider and
   narrower while the counter runs (owner 2026-09-23). */
.saved-amount {
  display: inline-block;
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}
.saved-label { white-space: normal; }
.saved-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin: 0;
}
@keyframes saved-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .saved-slide { animation: none; }
}