/* Shared styles for the /for/* audience landing pages (gaa, community, tourism…).
   New web style — matches the homepage (page-src/styles.css): sticky blur nav,
   dark glow hero, alternating showcase bands, dark highlight + CTA, footer.
   Each page sets its own --accent (audience-flavoured) in a small inline style. */

:root {
  --tint: #007aff;
  --ink: #0b0c0f; --ink-2: #475569; --ink-3: #8a8a8e;
  --line: #ececf0; --soft: #f5f5f5; --dark: #151718;
  --accent: #007aff; /* overridden per page */
}
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body { margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; background: #fff; color: var(--ink); }
a { color: inherit; text-decoration: none; }
ion-icon { display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sec { padding: 56px 0; }
.sec.soft { background: var(--soft); }
.eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 8px; }
/* "coming soon" badge + note for not-yet-GA features */
.soon { display: inline-block; vertical-align: middle; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.soon-note { margin: 0 0 4px; font-size: 13.5px; color: var(--ink-3); }
.soon-note .soon { margin-right: 8px; }
.band-h { text-align: center; font-size: 28px; font-weight: 850; letter-spacing: -.025em; margin: 0 0 30px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.9); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.nav .inner { max-width: 1180px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 16px; }
.logo { font-weight: 900; font-style: italic; font-size: 22px; letter-spacing: -.03em; color: var(--ink); }
.nav .spacer { flex: 1; }
.nav .navlink { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.nav .getapp { background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; padding: 9px 15px; border-radius: 999px; }
.nav .getapp ion-icon { display: inline-block; vertical-align: -2px; }

/* hero — dark/glow */
.hero { position: relative; overflow: hidden; color: #fff; background: #0b0d11; isolation: isolate; }
.hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; background: linear-gradient(90deg,#7c5cff,#3b82f6,#2bd4a0,#ffb648,#ff5a5f); }
.hero .glow { position: absolute; inset: -25%; z-index: 0; filter: blur(90px); opacity: .58; background:
  radial-gradient(28% 38% at 14% 80%,#7c5cff,transparent 62%),
  radial-gradient(30% 42% at 82% 22%,#3b82f6,transparent 62%),
  radial-gradient(34% 44% at 52% -10%,#2bd4a0,transparent 60%); }
.hero .inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 76px 24px 84px; text-align: center; }
.hero .pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; margin-bottom: 18px; }
.hero h1 { font-size: 48px; margin: 0 0 14px; letter-spacing: -.03em; font-weight: 850; line-height: 1.05; }
.hero p { font-size: 18px; opacity: .92; margin: 0 auto 26px; max-width: 600px; }

/* store badges */
.badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sbadge { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 9px 15px; color: #fff; }
.sbadge ion-icon { font-size: 24px; } .sbadge span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } .sbadge small { font-size: 10px; opacity: .8; } .sbadge b { font-size: 15px; }

/* showcase bands */
.showcase .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.showcase.alt .grid { direction: rtl; } .showcase.alt .grid > * { direction: ltr; }
.showcase h2 { font-size: 30px; font-weight: 850; letter-spacing: -.025em; margin: 0 0 14px; }
.showcase > .wrap > .grid > div > p { color: var(--ink-2); font-size: 16px; margin: 0; }
.showcase ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 13px; }
.showcase li { display: flex; gap: 11px; font-size: 16px; color: var(--ink-2); align-items: flex-start; }
.showcase li ion-icon { color: var(--accent); font-size: 20px; flex: none; margin-top: 1px; }
.showcase .ftcta { margin-top: 18px; font-weight: 600; }
.showcase .ftcta a { color: var(--tint); }

/* visual side — real screenshot (phone / wide) or icon tile */
.shotwrap, .tilewrap { display: flex; justify-content: center; }
.phone { border-radius: 30px; overflow: hidden; border: 7px solid #0b0c0f; background: #0b0c0f; box-shadow: 0 24px 60px rgba(16,24,40,.22); width: 256px; }
.phone img, .phone video { display: block; width: 100%; height: auto; }
.shot-wide { border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px rgba(16,24,40,.18); width: 100%; max-width: 460px; }
.shot-wide img, .shot-wide video { display: block; width: 100%; height: auto; }
.icontile { width: 100%; max-width: 340px; aspect-ratio: 1 / 1; border-radius: 30px; display: grid; place-items: center; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.icontile ion-icon { font-size: 104px; color: var(--accent); }
/* a staggered trio of phones for a single band (e.g. an event and its sub-events) */
.cluster { display: flex; justify-content: center; align-items: flex-start; gap: 10px; }
.cluster .phone { width: 162px; border-width: 6px; flex: none; }
.cluster .phone:nth-child(1), .cluster .phone:nth-child(3) { margin-top: 28px; }

/* dark highlight band + use-case pills */
.posband { background: var(--dark); color: #fff; text-align: center; }
.posband .inner { max-width: 820px; margin: 0 auto; padding: 60px 24px; }
.posband h2 { font-size: 32px; font-weight: 850; letter-spacing: -.025em; margin: 0 0 12px; }
.posband p { color: rgba(255,255,255,.75); font-size: 17px; margin: 0 auto 22px; max-width: 640px; }
.pills { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.pills span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 8px 15px; font-size: 13.5px; font-weight: 600; }

/* coming-soon grid */
.cs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.cs-item { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: #fff; }
.cs-item h4 { margin: 0 0 6px; font-size: 17px; font-weight: 750; }
.cs-item p { margin: 0; color: var(--ink-3); font-size: 14px; }

/* setup steps */
.steps { max-width: 760px; margin: 0 auto; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.step { display: flex; gap: 16px; }
.step .n { width: 40px; height: 40px; border-radius: 50%; background: var(--tint); color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; }
.step h3 { margin: 4px 0 6px; font-size: 18px; font-weight: 750; }
.step p { margin: 0 0 8px; color: var(--ink-2); font-size: 15px; }
.step a { color: var(--tint); }
.substeps, .infolist { margin: 8px 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.substeps li, .infolist li { margin: 3px 0; }
.path { display: inline-block; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--ink-2); }
.help { text-align: center; color: var(--ink-3); font-size: 14px; margin-top: 26px; }

/* CTA + footer (dark) */
.footcta { background: var(--dark); color: #fff; text-align: center; }
.footcta .inner { max-width: 1180px; margin: 0 auto; padding: 56px 24px; }
.footcta h2 { font-size: 30px; font-weight: 850; letter-spacing: -.02em; margin: 0 0 10px; }
.footcta p { color: rgba(255,255,255,.7); margin: 0 0 22px; }
.sitefooter { background: var(--dark); border-top: 1px solid rgba(255,255,255,.12); }
.sitefooter .inner { max-width: 1180px; margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sitefooter .fl { font-weight: 900; font-style: italic; color: #fff; font-size: 15px; }
.sitefooter .spacer { flex: 1; }
.sitefooter a { color: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; }
.sitefooter a:hover { color: #fff; }

@media (max-width: 900px) {
  .showcase .grid, .showcase.alt .grid { grid-template-columns: 1fr; direction: ltr; gap: 24px; }
  .cs-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
  .nav .navlink { display: none; }
  .icontile { max-width: 240px; }
  .cluster { gap: 6px; }
  .cluster .phone { width: 31%; border-width: 4px; }
}