/* Website refresh (2026-10-12) — additive rules for the competitor-review preview.
   Not wired into site/. Does not change the screenshot carousel, hover animation,
   enlarged photo viewer, or the business/creator forms. */

/* R1 — persistent "Get the free app" action in the header */
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--amber-dark); color: #fff !important; font-weight: 650 !important; font-size: 14.5px !important;
  white-space: nowrap; transition: background .15s ease;
}
.nav-cta:hover { background: var(--amber-deep); color: #fff !important; }
.nav-cta svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-cta-mobile { display: none; }
.site-header { position: sticky; top: 0; z-index: 900; }
.nav-right { display: flex; align-items: center; gap: 10px; }
@media (max-width: 680px) {
  .nav-cta-mobile { display: inline-flex; padding: 8px 13px; font-size: 13.5px !important; }
}

/* R2 — hero: one clear primary action, secondary demoted to a text link */
.hero-textlink { color: #fff; font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.55); }
.hero-textlink:hover { text-decoration-color: #fff; }
.hero .hero-sub strong { color: #fff; font-weight: 650; }

/* R5 — trust strip directly under the hero */
.trust-strip { background: #fff; border-bottom: 1px solid var(--border); }
.trust-list {
  list-style: none; margin: 0 auto; padding: 22px 24px; max-width: 1080px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.trust-list li { display: flex; gap: 12px; align-items: flex-start; }
.trust-list svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--navy); margin-top: 2px; }
.trust-list strong { display: block; color: var(--navy-dark); font-size: 15px; line-height: 1.3; }
.trust-list span { display: block; color: #535d6a; font-size: 13.5px; line-height: 1.45; }
.trust-list a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) { .trust-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust-list { grid-template-columns: 1fr; gap: 14px; padding: 18px 20px; } }

/* R3 — "What you get" on the business and creator pages */
.offer-card {
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 22px 24px; margin: 0 0 24px; box-shadow: 0 8px 28px #1228460a;
}
.offer-card h2 { font-size: 18px; color: var(--navy-dark); margin: 0 0 12px; letter-spacing: 0; }
.offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.offer-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.offer-list li::before {
  content: ""; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%;
  background: #e9f4ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231f7a3a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
}
.offer-list strong { color: var(--navy-dark); }
.offer-list span { color: #535d6a; font-size: 14.5px; line-height: 1.5; }
.offer-price { white-space: nowrap; }
.offer-foot { margin: 14px 0 0; font-size: 13px; color: #535d6a; line-height: 1.5; }
.cta-note { font-size: 13.5px; color: #535d6a; margin: 10px 0 0; }
.business-intro .btn + .cta-note { margin-top: 10px; }

/* R4 — real photos: caption replaces the "Illustration of…" note */
.photo-credit { font-size: 12.5px; opacity: .78; margin: 10px 0 0; }
.business-intro .photo-credit { color: #535d6a; }

/* R1/R5 — full footer on every page */
.footer-contact { margin: 6px 0 10px; font-size: 14px; }
.footer-contact a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* Existing defect fix (found during this review): `.nav { padding: 16px 0 }` and
   `.hero-content { padding: 96px 0 }` override `.wrap`'s 24px side padding, so on
   phones the logo, menu button, and hero text touch the screen edges. */
.wrap.nav, .wrap.hero-content { padding-left: 24px; padding-right: 24px; }

/* Keep the application form closer to the top on phones. */
@media (max-width: 800px) { .business-intro .business-photo { max-height: 200px; } }
.nav .brand { white-space: nowrap; }
@media (max-width: 420px) {
  .nav .brand { font-size: 16px; gap: 8px; }
  .nav .brand img { width: 34px; height: 34px; }
  .nav-right { gap: 8px; }
  .wrap.nav { padding-left: 16px; padding-right: 16px; }
}

.site-header{background:#fff;border-bottom:1px solid var(--border)}
@media(max-width:1080px){.site-header .nav .links{display:none}.site-header .menu-toggle{display:block}.site-header .nav-cta-mobile{display:inline-flex}.site-header .mobile-menu:not([hidden]){display:flex;flex-direction:column}}
@media(max-width:420px){.site-header .brand span{max-width:120px;white-space:normal;line-height:1.15}.wrap.nav{padding-left:16px;padding-right:16px}}