/* LocLoop marketing site — shared styles.
   Palette lifted straight from the app's own design tokens
   (src/utils/accentColors.js: BRAND_GRADIENT + ACCENT_BY_TYPE), not
   invented fresh — this should feel like the app, not a disconnected
   marketing brochure. */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600&display=swap");

:root {
  --bg-deep: #0b0d1c;
  --bg-panel: #12152a;
  --bg-panel-2: #1a1e3d;
  --accent: #6c7cf7;
  --accent-soft: rgba(108, 124, 247, 0.16);
  --accent-line: rgba(108, 124, 247, 0.35);
  --text: #edeefc;
  --text-soft: rgba(237, 238, 252, 0.7);
  --text-faint: rgba(237, 238, 252, 0.44);
  --border: rgba(237, 238, 252, 0.1);
  --border-strong: rgba(237, 238, 252, 0.18);

  --cat-new_project: #d662e8;
  --cat-ad: #f0c419;
  --cat-community: #ff6e8e;
  --cat-recommendation: #2fd8a8;
  --cat-local-services: #29b6f6;
  --cat-product: #f5a623;
  --cat-property: #6c7cf7;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

/* The ambient glow isn't just a hero flourish anymore — it runs the full
   scroll depth of the page now, not just the first viewport, so later
   sections (categories, feed, features) don't go flat. Percentages in each
   radial-gradient are relative to body's own box, which is the full
   document height (not just the viewport), so these stay correctly spaced
   down the page regardless of how long the live feed grid makes it.
   Each stop borrows a different category accent, echoing the one-color-
   per-card treatment in .cat-card rather than inventing new hues. */
body {
  margin: 0;
  background: var(--bg-deep);
  background-image:
    radial-gradient(900px 520px at 14% 0%, rgba(108, 124, 247, 0.24), transparent 60%),
    radial-gradient(760px 460px at 88% 6%, rgba(214, 98, 232, 0.16), transparent 55%),
    radial-gradient(820px 520px at 90% 30%, rgba(245, 166, 35, 0.1), transparent 60%),
    radial-gradient(760px 520px at 6% 48%, rgba(47, 216, 168, 0.1), transparent 58%),
    radial-gradient(820px 560px at 92% 66%, rgba(41, 182, 246, 0.11), transparent 58%),
    radial-gradient(900px 560px at 10% 86%, rgba(214, 98, 232, 0.13), transparent 60%);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
img[hidden] { display: none; }

h1, h2, h3 {
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Top nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  /* Same periwinkle -> magenta wash as the hero's own top-of-page glow
     (body's first two gradient stops), just linear and much fainter — ties
     the sticky bar to the page instead of sitting on it as a flat slab. */
  background:
    linear-gradient(120deg, rgba(108, 124, 247, 0.14), rgba(214, 98, 232, 0.09)),
    rgba(11, 13, 28, 0.72);
  border-bottom: 1px solid var(--border);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav-cta {
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #0b0d1c;
}

/* ---------- Hero ---------- */
.hero {
  padding: 76px 0 48px;
  text-align: center;
}
.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(32px, 6vw, 54px);
  max-width: 16ch;
  margin: 0 auto 18px;
}
.hero h1 .accent { color: var(--accent); }
.hero p.lede {
  color: var(--text-soft);
  font-size: 17px;
  max-width: 48ch;
  margin: 0 auto 34px;
}
.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.hero-ctas .store-badges {
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: #0b0d1c;
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn[disabled], .btn.is-waitlist {
  opacity: 0.75;
  cursor: default;
}

/* ---------- Category band (full-bleed, between hero and feed) ---------- */
.cat-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 56px 0;
}
.band-title {
  text-align: center;
  font-size: clamp(21px, 3vw, 26px);
}
.band-sub {
  text-align: center;
  color: var(--text-soft);
  max-width: 46ch;
  margin: 8px auto 0;
  font-size: 14.5px;
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.cat-card {
  display: block;
  position: relative;
  overflow: hidden;
  /* color-mix() is unsupported before ~2023 (Safari <16.2, Firefox <113,
     Chrome/Edge <111) — and since it's a shorthand, one invalid value
     invalidates the WHOLE `background`/`border`/`box-shadow` declaration,
     not just that one layer. Each color-mix() rule below is preceded by a
     plain fallback using the same property — the cascade keeps the last
     VALID declaration, so an old browser quietly keeps the flat version
     instead of rendering with no background/border at all. */
  background: var(--bg-panel);
  background:
    radial-gradient(120px 90px at 18% 0%, color-mix(in oklab, var(--cat-glow) 32%, transparent), transparent 70%),
    var(--bg-panel);
  border: 1px solid var(--border);
  border: 1px solid color-mix(in oklab, var(--cat-glow) 22%, var(--border));
  border-radius: 18px;
  padding: 22px 20px 20px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.cat-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  border-color: color-mix(in oklab, var(--cat-glow) 55%, var(--border));
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.3);
  box-shadow: 0 16px 32px -16px color-mix(in oklab, var(--cat-glow) 45%, transparent);
}
.cat-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel-2);
  background: color-mix(in oklab, var(--cat-glow) 24%, var(--bg-panel-2));
  box-shadow: 0 0 0 1px var(--border-strong);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--cat-glow) 30%, transparent);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.cat-card:hover .cat-icon {
  box-shadow: 0 0 0 5px var(--accent-soft);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--cat-glow) 28%, transparent);
  transform: scale(1.04);
}
.cat-card h3 { font-size: 15.5px; margin-top: 16px; }
.cat-card p { font-size: 13.5px; color: var(--text-soft); margin: 6px 0 0; min-height: 36px; }
.cat-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cat-glow);
}
.cat-link svg { transition: transform 0.18s ease; }
.cat-card:hover .cat-link svg { transform: translateX(3px); }

/* ---------- Why / features + final app CTA ---------- */
.why-section { padding: 64px 0; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 36px;
}
.feature { display: flex; gap: 14px; }
.feature .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 6px;
  flex-shrink: 0;
}
.feature h3 { font-size: 15px; }
.feature p { font-size: 13.5px; color: var(--text-soft); margin: 4px 0 0; }

/* ---------- Feed section ---------- */
.feed-section {
  padding: 40px 0 70px;
}
.feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.feed-head h2 { font-size: 22px; }
.feed-head p {
  color: var(--text-faint);
  font-size: 13.5px;
  margin: 0;
}

.feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  aspect-ratio: 3 / 4;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.card img.thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card .no-image {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel-2);
  color: var(--text-faint);
  font-size: 13px;
}
.card .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,13,28,0) 40%, rgba(11,13,28,0.92) 100%);
}
.card .cat-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  color: #0b0d1c;
}
.card.is-featured {
  border-color: rgba(240, 196, 25, 0.55);
  box-shadow: 0 0 0 1px rgba(240, 196, 25, 0.18), 0 10px 26px rgba(240, 196, 25, 0.1);
}
.card .featured-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  color: #0b0d1c;
  background: linear-gradient(135deg, #f0c419, #f5a623);
}
.card .info {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
}
.card .price {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 2px;
}
.card .title {
  font-size: 13px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card .loc {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 2px;
}

.feed-empty, .feed-loading {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-faint);
  font-size: 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
}

/* ---------- App-open toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--bg-panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  z-index: 50;
  max-width: calc(100vw - 40px);
  text-align: center;
}
.toast[hidden] { display: none; }

/* ---------- Scroll hint (hero -> download band) ---------- */
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 36px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0.8;
  transition: opacity 0.15s ease;
}
.scroll-hint:hover { opacity: 1; }
.scroll-hint svg { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ---------- QR chip (reused inside the phone mockup below) ---------- */
.qr-box {
  width: 112px;
  height: 112px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.qr-box img { width: 100%; height: 100%; }
.qr-soon {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--text-faint);
  background: #eef0fb;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(11, 13, 28, 0.2);
  border-radius: 12px;
}

/* ---------- "Download the app now!" band (phone mockup + QR) ----------
   The one consistent pattern across Zomato/Swiggy/FirstClub's own
   download sections — a phone frame showing the QR right on its "screen",
   paired with the store badges. Full-bleed, breaks out of .wrap. The QR
   stays in its Coming Soon state until a store flag flips true in
   config.js (wireQrPanels in app.js) — same convention as the rest of the
   site, not something faked just because the badges beside it now look
   "ready" (see that section's own comment). */
.download-band {
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  background: linear-gradient(135deg, #14173400 0%, #1a1e3d 55%, #241a3d 100%), var(--bg-deep);
  border-top: 1px solid var(--border);
}
.band-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(640px 420px at 85% 15%, rgba(214, 98, 232, 0.16), transparent 60%),
    radial-gradient(520px 360px at 10% 90%, rgba(108, 124, 247, 0.18), transparent 60%);
  pointer-events: none;
}
.download-band-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
}
.download-copy { max-width: 440px; }
.download-copy h2 { font-size: clamp(24px, 3.4vw, 32px); }
.download-copy p {
  color: var(--text-soft);
  font-size: 14.5px;
  margin: 12px 0 28px;
  max-width: 42ch;
}
.download-copy .store-badges { justify-content: flex-start; }

.phone-frame {
  flex-shrink: 0;
  width: 210px;
  height: 428px;
  background: #0b0d1c;
  border: 5px solid #05060e;
  border-radius: 38px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 10px;
  position: relative;
}
.phone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 18px;
  background: #05060e;
  border-radius: 999px;
  z-index: 1;
}
.phone-screen {
  width: 100%;
  height: 100%;
  background: #f4f5ff;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px 20px;
}
.phone-caption {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: #2a2d55;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .download-band-inner { flex-direction: column; text-align: center; }
  .download-copy { max-width: none; }
  .download-copy p { margin-left: auto; margin-right: auto; }
  .download-copy .store-badges { justify-content: center; }
}

/* ---------- Store badges (Google Play / App Store pair) ---------- */
.store-badges {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  padding: 20px 32px 20px 26px;
  min-width: 290px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.store-badge[aria-disabled="true"] { cursor: default; }
a.store-badge:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.32); }
.store-badge svg { width: 46px; height: 46px; flex-shrink: 0; }
.store-badge .badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
}
.store-badge .badge-sub {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
}
.store-badge .badge-label {
  font-size: 27px;
  font-weight: 700;
  font-family: "Manrope", sans-serif;
  color: #fff;
}
.store-badge.is-soon {
  background: var(--bg-panel);
  border: 1px dashed var(--border-strong);
}
.store-badge.is-soon svg { opacity: 0.55; }
.store-badge.is-soon .badge-sub { color: var(--accent); font-weight: 700; }
.store-badge.is-soon .badge-label { color: var(--text-soft); font-size: 23px; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--border);
  padding: 36px 0 50px;
  color: var(--text-faint);
  font-size: 13px;
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
footer nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
footer nav a:hover { color: var(--text-soft); }

/* ---------- Simple policy-page layout ---------- */
.doc {
  padding: 64px 0 90px;
  max-width: 760px;
}
.doc h1 { font-size: 32px; margin-bottom: 6px; }
.doc .updated { color: var(--text-faint); font-size: 13px; margin-bottom: 30px; }
.doc h2 { font-size: 17px; color: var(--accent); margin: 30px 0 10px; }
.doc p { color: var(--text-soft); margin: 0 0 12px; }
.doc ul { color: var(--text-soft); margin: 0 0 12px; padding-left: 20px; }
.doc li { margin: 6px 0; }
.doc a.back {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
}

/* ---------- Direct contact (email/WhatsApp pulled from app_settings) ---------- */
.direct-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 18px 0 30px;
}
.direct-contact a {
  color: var(--accent);
  font-weight: 600;
  font-size: 14.5px;
}

/* ---------- Contact form ---------- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
}
.contact-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  margin-top: 14px;
}
.contact-form label .optional {
  font-weight: 400;
  color: var(--text-faint);
}
.contact-form input,
.contact-form textarea {
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.contact-form button {
  margin-top: 22px;
  align-self: flex-start;
}
.contact-form button[disabled] { opacity: 0.6; cursor: default; }
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  margin-top: 14px !important;
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: 10px;
}
.form-status.ok {
  background: rgba(47, 216, 168, 0.12);
  color: #2fd8a8;
  border: 1px solid rgba(47, 216, 168, 0.3);
}
.form-status.err {
  background: rgba(240, 76, 76, 0.12);
  color: #ff8080;
  border: 1px solid rgba(240, 76, 76, 0.3);
}

/* ---------- Pricing cards ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.pkg-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
}
.pkg-type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.pkg-card h3 { font-size: 19px; margin: 8px 0 6px; }
.pkg-desc { color: var(--text-faint); font-size: 13.5px; margin: 0 0 14px; }
.pkg-price {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 24px;
  margin-bottom: 14px;
}
.pkg-mrp {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-faint);
  text-decoration: line-through;
  margin-right: 8px;
}
.pkg-validity {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-faint);
}
.pkg-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pkg-perks li {
  font-size: 13.5px;
  color: var(--text-soft);
  padding-left: 20px;
  position: relative;
}
.pkg-perks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ---------- Invite / account completion page ---------- */
.invite-wrap {
  max-width: 420px;
  margin: 0 auto;
  padding: 64px 24px 90px;
}
.invite-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px;
}
.invite-card h1 { font-size: 22px; text-align: center; }
.invite-card .lede {
  color: var(--text-soft);
  font-size: 13.5px;
  text-align: center;
  margin: 8px 0 24px;
}
.invite-form label { font-size: 13px; font-weight: 600; color: var(--text-soft); margin-top: 14px; display: block; }
.invite-form label:first-of-type { margin-top: 0; }
.invite-form input {
  width: 100%;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 11px 14px;
  margin-top: 6px;
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
}
.invite-form input:focus { outline: none; border-color: var(--accent); }
.invite-hint { font-size: 12px; color: var(--text-faint); margin-top: 5px; }
.invite-hint.ok { color: #2fd8a8; }
.invite-hint.err { color: #ff8080; }
.invite-form button {
  width: 100%;
  margin-top: 22px;
}
.invite-form button[disabled] { opacity: 0.6; cursor: default; }
.invite-terms {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--text-soft);
}
.invite-terms input { width: auto; margin-top: 2px; }
.invite-terms a { color: var(--accent); font-weight: 600; }
.invite-state { text-align: center; }
.invite-state .spinner {
  width: 28px; height: 28px; margin: 0 auto 16px;
  border-radius: 50%;
  border: 3px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: invite-spin 0.8s linear infinite;
}
@keyframes invite-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .feed-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .hero { padding: 56px 0 40px; }
  .store-badge { min-width: 0; width: 100%; max-width: 320px; }
}