/* ============ Upstero public marketing site ============
   A separate stylesheet from styles.css on purpose. The dashboards keep the
   light SignGaze language (white cards on #ebeef5, black pill CTAs, Inter);
   the public site uses the affiliate-network idiom instead — dark bands, a
   single hot accent, sharp corners, large light-weight headings.
   MaxWeb runs exactly this split, and so does most of the category.

   Structure and typography were measured off maxweb.com rather than guessed:
   Poppins, 3px button radius, h1 at weight 500, alternating full-width bands.
   The PALETTE is ours — navy, not their orange. */

:root {
  /* Navy theme. Two blues, and the split is deliberate:
     --s-accent is a fill and always carries WHITE text, so it needs ≥4.5:1
       against white — #2563eb gives 5.17:1.
     --s-accent-soft is the same hue lightened, used only for accent TEXT on
       the navy bands, where #2563eb would sink into the background.
     One blue cannot do both jobs without failing contrast in one of them. */
  --s-ink: #0f1b3a;          /* navy band + body text */
  --s-ink-2: #182a54;        /* raised surface on navy */
  --s-accent: #2563eb;       /* fills — white text sits on this */
  --s-accent-soft: #6ea8fe;  /* accent text on navy */
  --s-accent-dark: #1d4ed8;  /* hover */
  --s-body: #4a5262;
  --s-line: #e3e8f2;
  --s-soft: #f5f7fb;
  --s-radius: 3px;           /* sharp, not pill */
}

.site-body {
  font-family: Poppins, Inter, "Segoe UI", system-ui, sans-serif;
  background: #fff;
  color: var(--s-ink);
  font-size: 16px;
  line-height: 1.62;
}

/* Full-width alternating bands are the structural signature of the look. */
.band { padding: 84px 0; }
.band-dark { background: var(--s-ink); color: #fff; }
.band-soft { background: var(--s-soft); }
/* Full-width container.
   The band background always spanned edge to edge; this governs the CONTENT,
   which used to stop at 1180px — so on anything wider than a laptop the
   colour ran to the edges and everything inside it sat in a column down the
   middle. There is no cap now. Prose stays readable because paragraphs carry
   their own ch-based max-width (.lede, .band-sub, .band-head): widening the
   container widens the LAYOUT, not the line length.

   --gutter comes from styles.css, which loads first on every public page.
   Using the same variable as the dashboard is what keeps the header, the
   bands and the footer on one left edge — they each had their own number
   before, so the header started at 28px and the band below it at 56px. */
.band-inner { width: 100%; max-width: none; margin: 0; padding: 0 var(--gutter); }
.band-dark .lede, .band-dark p { color: #aab2c4; }
.band-dark h2, .band-dark h3, .band-dark b { color: #fff; }

.eyebrow {
  display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--s-accent); margin-bottom: 14px;
}
/* The eyebrow sits on light and navy bands alike; on navy the fill-blue is
   too dark to read, so it lightens. */
.band-dark .eyebrow, .site-hero .eyebrow { color: var(--s-accent-soft); }
.band-dark .feature-num { background: rgba(110, 168, 254, .14); color: var(--s-accent-soft); }
.band-title { font-size: 2.6rem; font-weight: 500; line-height: 1.14; letter-spacing: -.015em; }
.band-sub { font-size: 1.05rem; color: var(--s-body); margin-top: 14px; max-width: 62ch; }
.band-dark .band-sub { color: #aab2c4; }
.band-head { max-width: 720px; margin-bottom: 46px; }
.band-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- header ---------- */
.site-body .site-header {
  background: var(--s-ink); color: #fff;
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px);
  padding: 14px var(--gutter); position: sticky; top: 0; z-index: 50;
}
.site-body .site-header .brand { color: #fff; }
.site-body .site-header .brand-mark { background: var(--s-accent); box-shadow: none; }
.site-body .site-nav { display: flex; gap: 26px; margin-right: auto; }
.site-body .site-nav a { color: #c3c9d6; font-size: .93rem; font-weight: 500; }
.site-body .site-nav a:hover, .site-body .site-nav a.on { color: var(--s-accent-soft); }
.site-body .site-cta { display: flex; align-items: center; gap: 14px; }
.site-body .site-cta .btn-ghost {
  background: none; border: 0; color: var(--s-accent-soft); font-weight: 700; padding: 6px 12px;
}
.site-body .site-cta .btn-ghost:hover { background: none; text-decoration: underline; }
.site-body .site-cta .btn-dark {
  background: var(--s-accent); color: #fff; border-radius: var(--s-radius);
  box-shadow: none; font-weight: 500; padding: 11px 22px;
}
.site-body .site-cta .btn-dark:hover { background: var(--s-accent-dark); }

/* ---------- buttons ---------- */
.site-body .btn-dark, .site-body .btn-ghost, .site-body .btn-lg {
  border-radius: var(--s-radius); font-weight: 500;
}
.site-body .btn-dark {
  background: var(--s-accent); color: #fff; box-shadow: none;
}
.site-body .btn-dark:hover { background: var(--s-accent-dark); }
.site-body .btn-ghost {
  background: none; border: 1.5px solid var(--s-accent); color: var(--s-accent);
}
.site-body .btn-ghost:hover { background: var(--s-accent); color: #fff; }
.band-dark .btn-ghost { border-color: #4b556b; color: #fff; }
.band-dark .btn-ghost:hover { background: var(--s-accent); border-color: var(--s-accent); }
.site-body .btn-lg { padding: 15px 30px; font-size: 1rem; }

/* ---------- hero ---------- */
.site-hero { background: var(--s-ink); color: #fff; padding: 96px 0 104px; position: relative; }
.site-hero .band-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.site-hero h1 { font-size: 3.6rem; font-weight: 500; line-height: 1.08; letter-spacing: -.022em; }
.site-hero h1 .hl { color: var(--s-accent-soft); }
.site-hero p.lede { color: #aab2c4; font-size: 1.1rem; margin-top: 20px; max-width: 54ch; }
.hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

/* stat strip riding the bottom of the hero */
.hero-stats { display: flex; gap: 48px; margin-top: 44px; padding-top: 28px; border-top: 1px solid #333b4f; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats b { font-size: 1.9rem; font-weight: 600; color: #fff; line-height: 1.1; }
.hero-stats span { font-size: .82rem; color: #8b94a8; margin-top: 2px; }

/* ---------- feature cards ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.feature {
  background: #fff; border: 1px solid var(--s-line); border-radius: var(--s-radius);
  padding: 30px 26px; transition: border-color .15s, transform .05s;
}
.feature:hover { border-color: var(--s-accent); }
.band-dark .feature { background: var(--s-ink-2); border-color: #333b4f; }
.feature-num {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--s-radius);
  background: rgba(37, 99, 235, .12); color: var(--s-accent); font-weight: 700; margin-bottom: 16px;
}
.feature h3 { font-size: 1.06rem; font-weight: 600; margin-bottom: 8px; }
.feature p { color: var(--s-body); font-size: .93rem; }
.band-dark .feature p { color: #98a1b4; }

/* ---------- prose sections ---------- */
.prose-rows { display: flex; flex-direction: column; gap: 54px; }
.prose-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.prose-row.flip > *:first-child { order: 2; }
.prose-row h2 { font-size: 1.9rem; font-weight: 500; letter-spacing: -.015em; margin-bottom: 14px; }
.prose-row p { color: var(--s-body); margin-bottom: 12px; }
.prose-row.solo { grid-template-columns: 1fr; }
.prose-row.solo p { max-width: 78ch; }

.site-figure { border-radius: var(--s-radius); overflow: hidden; background: #eef1f7; }
.site-figure img, .site-figure svg { display: block; width: 100%; height: auto; }
.band-dark .site-figure { background: var(--s-ink-2); }

/* ---------- offers ---------- */
.public-offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.public-offer {
  background: #fff; border: 1px solid var(--s-line); border-radius: var(--s-radius);
  padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: none; margin: 0;
}
.public-offer:hover { border-color: var(--s-accent); }
.offer-head { display: flex; align-items: center; gap: 12px; }
.offer-head .offer-emoji {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--s-radius);
  font-size: 1.4rem; flex: none;
}
.offer-head b { font-size: 1.02rem; }
.public-offer .blurb { color: var(--s-body); font-size: .9rem; flex: 1; }
.offer-meta { font-size: .8rem; color: #78808f; }
.offer-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-top: 1px solid var(--s-line); padding-top: 14px; }
.offer-stats div { display: flex; flex-direction: column; }
.offer-stats span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #97a0b0; }
.offer-stats b { font-size: 1.06rem; font-weight: 600; }
.offer-stats b.pay { color: var(--s-accent); }

/* ---------- filter pills ---------- */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.filter-row a {
  padding: 7px 16px; border-radius: var(--s-radius); border: 1px solid var(--s-line);
  font-size: .86rem; font-weight: 500; color: var(--s-body);
}
.filter-row a.on, .filter-row a:hover { background: var(--s-accent); border-color: var(--s-accent); color: #fff; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.faq-item { border: 1px solid var(--s-line); border-radius: var(--s-radius); padding: 16px 20px; background: #fff; }
.faq-item summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--s-accent); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin-top: 12px; color: var(--s-body); }
.faq-group-title { font-size: 1.25rem; font-weight: 600; margin: 34px 0 14px; }
.faq-group-title:first-child { margin-top: 0; }

/* ---------- closing CTA ---------- */
.closing-cta {
  background: var(--s-accent); color: #fff; padding: 56px 0;
}
.closing-cta .band-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.closing-cta h2 { font-size: 1.9rem; font-weight: 500; color: #fff; }
.closing-cta p { color: rgba(255, 255, 255, .88); margin-top: 6px; }
.site-body .closing-cta .btn-dark { background: #fff; color: var(--s-ink); font-weight: 600; }
.site-body .closing-cta .btn-dark:hover { background: #f2f2f2; }

/* ---------- footer ---------- */
/* Same shape as a band: full-bleed background, content on the shared gutter. */
.site-body .site-footer { background: var(--s-ink); color: #98a1b4; padding: 0; display: block; }
.site-footer-inner {
  width: 100%; padding: 56px var(--gutter);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px;
}
/* Link columns don't stretch with the grid — four lists spread across 2500px
   would put a metre between "Terms" and "Privacy". */
.site-footer-inner > div { max-width: 340px; }
.site-footer b { display: block; color: #fff; font-size: .92rem; margin-bottom: 12px; }
.site-footer a { display: block; color: #98a1b4; font-size: .9rem; padding: 4px 0; }
.site-footer a:hover { color: var(--s-accent-soft); }
.site-footer p { font-size: .9rem; margin-top: 12px; }

/* ---------- mobile nav ----------
   A <details> disclosure, not JavaScript: script-src is 'self' with no inline
   handlers, and this needs no script at all. Previously the nav was simply
   display:none below 940px, which left phones with NO navigation — only the
   logo and a login link. */
.nav-toggle { display: none; }
.nav-toggle > summary {
  list-style: none; cursor: pointer; width: 42px; height: 42px;
  display: grid; place-items: center; border-radius: var(--s-radius);
  border: 1px solid #33405f; color: #fff;
}
.nav-toggle > summary::-webkit-details-marker { display: none; }
.nav-toggle > summary span,
.nav-toggle > summary span::before,
.nav-toggle > summary span::after {
  display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; position: relative;
}
.nav-toggle > summary span::before { content: ''; position: absolute; top: -6px; }
.nav-toggle > summary span::after { content: ''; position: absolute; top: 6px; }

/* ================= responsive scale =================
   Four steps rather than one: wide desktop, laptop, tablet, phone. Each does
   the least it can get away with. */

/* Laptop — the two-up hero starts to crowd before the grid should collapse. */
@media (max-width: 1180px) {
  .site-hero { padding: 72px 0 80px; }
  .site-hero h1 { font-size: 3rem; }
  .site-body .site-nav { gap: 18px; }
  .site-body .site-nav a { font-size: .88rem; }
}

/* Tablet — stack the two-column rows, swap the burger in for the nav. */
@media (max-width: 940px) {
  .site-hero .band-inner, .prose-row { grid-template-columns: 1fr; }
  .prose-row.flip > *:first-child { order: 0; }
  .site-hero { padding: 56px 0 64px; }
  .site-hero h1 { font-size: 2.4rem; }
  .band-title { font-size: 1.9rem; }
  .band { padding: 56px 0; }
  .hero-stats { gap: 30px; flex-wrap: wrap; }
  .site-footer-inner { grid-template-columns: 1fr 1fr; gap: 26px; }

  /* Nav collapses into the disclosure rather than disappearing. */
  .nav-toggle { display: block; order: 3; }
  .site-body .site-header { flex-wrap: wrap; gap: 14px; }
  /* Negative margin then equal padding: the divider rule runs the full width
     of the header while the links stay on the gutter. Both sides read the
     same variable, so they can't drift apart. */
  .site-body .site-nav {
    display: none; order: 4; flex-direction: column; gap: 0;
    border-top: 1px solid #26355c;
    /* flex-basis has to include the gutters it is pulled out over: a plain
       100% is 100% of the CONTENT box, so the negative margins moved the
       panel left without widening it and the divider stopped a gutter short
       of the right edge. */
    flex-basis: calc(100% + var(--gutter) * 2);
    margin: 6px calc(var(--gutter) * -1) -14px;
    padding: 6px var(--gutter) 14px;
  }
  .nav-toggle[open] ~ .site-nav { display: flex; }
  .site-body .site-nav a { padding: 11px 0; font-size: .95rem; }
  .site-body .site-cta { margin-left: auto; }
}

/* Phone — single column everywhere, tighter type, full-width buttons. */
@media (max-width: 620px) {
  .site-hero { padding: 40px 0 48px; }
  .site-hero h1 { font-size: 1.95rem; line-height: 1.14; }
  .site-hero p.lede { font-size: 1rem; }
  .band { padding: 44px 0; }
  .band-title { font-size: 1.55rem; }
  .band-sub { font-size: 1rem; }
  .feature-grid { grid-template-columns: 1fr; gap: 14px; }
  .public-offer-grid { grid-template-columns: 1fr; }
  .site-footer-inner { grid-template-columns: 1fr; }
  .site-footer-inner > div { max-width: none; }
  .hero-stats { gap: 22px; }
  .hero-stats b { font-size: 1.5rem; }
  .closing-cta .band-inner { flex-direction: column; align-items: flex-start; }

  /* A 44px touch target that spans the column beats a small centred pill. */
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions .btn-lg { width: 100%; }
  .site-body .site-header { padding-top: 12px; padding-bottom: 12px; }
  .site-body .site-cta .btn-dark { padding: 9px 16px; font-size: .88rem; }
}

/* Very small phones — keep the primary CTA and drop the secondary. */
@media (max-width: 400px) {
  .site-hero h1 { font-size: 1.7rem; }
  .site-body .brand { font-size: 1rem; }
  .offer-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
}