/* ---------- LocalSpin original main design ---------- */
:root {
  --bg: #fbf7ef;
  --bg-2: #fffaf3;
  --ink: #15120e;
  --muted: #756b5e;
  --muted-2: #9b9186;
  --card: #ffffff;
  --line: rgba(21,18,14,.11);
  --dark: #111827;
  --dark-2: #182033;
  --orange: #ff7a1a;
  --amber: #f6b73c;
  --rose: #ee4266;
  --green: #15a667;
  --blue: #3a6ff7;
  --purple: #7c3aed;
  --shadow: 0 24px 80px rgba(17, 24, 39, .13);
  --shadow-soft: 0 16px 40px rgba(17, 24, 39, .08);
  --radius: 28px;
  --radius-lg: 42px;
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 16px; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.055em; line-height: .98; color: var(--ink); }
h1 { font-size: clamp(54px, 8vw, 112px); }
h2 { font-size: clamp(36px, 5vw, 68px); }
h3 { font-size: 25px; }
h4 { font-size: 18px; }
small { color: var(--muted-2); font-weight: 750; }
strong { color: inherit; }

.hidden { display: none !important; }
.full { width: 100%; }
.center { text-align: center; }
.mt { margin-top: 18px; }
.route { min-height: 100vh; }

.topbar {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--ink);
  padding: 0;
  font-weight: 950;
  letter-spacing: -.03em;
  font-size: 18px;
}
.brandMark {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--orange), var(--rose));
  color: #fff;
  box-shadow: 0 14px 30px rgba(255, 122, 26, .28);
  font-size: 13px;
}
.topbar nav { display: flex; align-items: center; gap: 18px; color: rgba(21,18,14,.72); font-weight: 850; }
.topbar nav a:hover { color: var(--ink); }
.navLink { background: transparent; color: rgba(21,18,14,.72); font-weight: 850; padding: 0; min-height: auto; }
.navLink:hover { color: var(--ink); }

.primaryBtn, .secondaryBtn, .ghostBtn, .dangerBtn, .miniBtn {
  min-height: 48px;
  border-radius: 999px;
  padding: 0 20px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.primaryBtn { background: var(--dark); color: #fff; box-shadow: 0 16px 32px rgba(17,24,39,.18); }
.primaryBtn:hover, .secondaryBtn:hover, .ghostBtn:hover, .dangerBtn:hover, .miniBtn:hover { transform: translateY(-1px); }
.secondaryBtn { background: #fff; color: var(--dark); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.ghostBtn { background: transparent; color: var(--dark); border: 1px solid var(--line); }
.dangerBtn { background: #fff1f2; color: #be123c; border: 1px solid rgba(190,18,60,.14); }
.miniBtn { min-height: 36px; padding: 0 13px; font-size: 13px; background: #f8fafc; color: var(--dark); border: 1px solid var(--line); box-shadow: none; }
.primaryBtn.small, .secondaryBtn.small, .ghostBtn.small { min-height: 42px; padding: 0 16px; font-size: 14px; }
.primaryBtn.orange { background: linear-gradient(135deg, var(--orange), var(--rose)); box-shadow: 0 18px 36px rgba(255,122,26,.25); }

.siteShell {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(255,122,26,.19), transparent 32rem),
    radial-gradient(circle at 90% 12%, rgba(124,58,237,.10), transparent 28rem),
    var(--bg);
}
.hero {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 64px 0 52px;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(390px, .86fr);
  align-items: center;
  gap: 54px;
}
.heroCopy { display: grid; gap: 22px; }
.pill, .eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 9px 13px;
  background: #fff;
  color: #9a3412;
  border: 1px solid rgba(255,122,26,.2);
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .015em;
}
.heroCopy p { font-size: clamp(18px, 2vw, 21px); max-width: 660px; }
.heroActions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.trustRow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; }
.trustRow span {
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}
.heroVisual { position: relative; min-height: 650px; display: grid; place-items: center; }
.visualBlob {
  position: absolute;
  inset: 50px 0 45px 48px;
  border-radius: 48px;
  background: linear-gradient(145deg, rgba(255,122,26,.15), rgba(238,66,102,.12));
  filter: blur(.1px);
  transform: rotate(-4deg);
}
.phoneMock {
  width: 330px;
  min-height: 610px;
  border: 10px solid #171b28;
  border-radius: 50px;
  background: #fffaf3;
  box-shadow: 0 36px 80px rgba(17,24,39,.23);
  position: relative;
  z-index: 2;
  padding: 22px;
}
.phoneNotch { width: 88px; height: 26px; background: #171b28; border-radius: 999px; margin: -6px auto 22px; }
.gameCard { display: grid; gap: 16px; text-align: center; }
.gameCard .micro { font-size: 12px; font-weight: 950; color: var(--muted-2); text-transform: uppercase; letter-spacing: .08em; }
.wheel {
  width: 220px;
  height: 220px;
  margin: 8px auto;
  border-radius: 50%;
  background: conic-gradient(from 15deg, #111827 0 20%, #ff7a1a 20% 40%, #f6b73c 40% 62%, #ee4266 62% 82%, #15a667 82% 100%);
  border: 12px solid #fff;
  box-shadow: 0 20px 55px rgba(255,122,26,.25);
  color: #fff;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.wheel:after { content: ""; width: 74px; height: 74px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 8px rgba(17,24,39,.08); position: absolute; }
.wheel span { position: relative; z-index: 1; font-size: 34px; font-weight: 950; letter-spacing: -.06em; }
.postGameList { display: grid; gap: 9px; text-align: left; }
.postGameList span { padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); color: var(--dark); font-weight: 900; }
.legalNote { font-size: 12px !important; color: var(--muted-2) !important; }
.ownerMini {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 32px;
  width: 310px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 18px;
  display: grid;
  gap: 14px;
}
.ownerMini .miniHead { display: flex; justify-content: space-between; align-items: center; font-weight: 950; }
.ownerMini .liveDot { display: inline-flex; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(21,166,103,.14); }
.ownerMetricGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ownerMetric { background: #fff7ed; border-radius: 18px; padding: 12px; display: grid; gap: 3px; }
.ownerMetric strong { font-size: 24px; letter-spacing: -.05em; }
.ownerMetric span { color: var(--muted); font-weight: 850; font-size: 12px; }
.ownerRows { display: grid; gap: 8px; }
.ownerRows span { height: 10px; background: #f1e7da; border-radius: 999px; display: block; }
.floatBadge {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 92px;
  background: var(--dark);
  color: #fff;
  border-radius: 22px;
  padding: 15px 18px;
  box-shadow: 0 22px 42px rgba(17,24,39,.20);
  display: grid;
  gap: 2px;
}
.floatBadge strong { font-size: 28px; letter-spacing: -.06em; }
.floatBadge span { color: rgba(255,255,255,.72); font-weight: 850; font-size: 13px; }

.section { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 76px 0; }
.sectionHeader { display: grid; gap: 14px; max-width: 820px; margin-bottom: 26px; }
.gridTwo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.alignCenter { align-items: center; }
.engineGrid, .featureGrid, .testimonialGrid, .stepGrid, .pricingGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card, .engineCard, .testimonial, .stepCard, .pricingCard, .faqCard, .formCard, .panel, .metricCard, .moduleCard, .authAside, .previewCard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.engineCard { padding: 24px; min-height: 238px; display: grid; align-content: start; gap: 14px; }
.engineCard .num { font-size: 13px; color: #9a3412; font-weight: 950; }
.engineCard h3 { font-size: 25px; }
.engineCard p { font-size: 15px; }
.darkBand {
  width: min(1220px, calc(100% - 26px));
  background:
    radial-gradient(circle at top right, rgba(255,122,26,.20), transparent 30rem),
    var(--dark);
  border-radius: 48px;
  padding: 58px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 34px;
  align-items: center;
}
.darkBand h2 { color: #fff; }
.darkBand p { color: rgba(255,255,255,.72); }
.darkBand .eyebrow { color: #fed7aa; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.statsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.statCard { padding: 22px; border-radius: 24px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); display: grid; gap: 5px; }
.statCard strong { font-size: 42px; letter-spacing: -.07em; }
.statCard span { color: rgba(255,255,255,.72); font-weight: 850; }
.stepGrid { grid-template-columns: repeat(3, 1fr); }
.stepCard { padding: 24px; display: grid; gap: 12px; }
.stepIcon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: #fff7ed; color: #9a3412; font-weight: 950; }
.mockPanel { padding: 22px; display: grid; gap: 16px; }
.mockTop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mockMetrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mockMetrics b { background: #fff7ed; border-radius: 18px; padding: 14px; font-size: 16px; }
.mockCampaign { border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.statusPill { padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 950; background: #e5e7eb; color: #374151; white-space: nowrap; }
.statusPill.live { background: #dcfce7; color: #166534; }
.statusPill.ready { background: #dbeafe; color: #1e40af; }
.statusPill.draft { background: #ffedd5; color: #9a3412; }
.testimonialGrid { grid-template-columns: repeat(3, 1fr); }
.testimonial { padding: 24px; display: grid; gap: 16px; }
.testimonial p { color: #3f352d; }
.testimonial strong { font-size: 15px; }
.logoStrip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.logoStrip span { border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.72); color: var(--muted); font-weight: 950; padding: 10px 14px; }
.pricingSection { padding-bottom: 96px; }
.pricingWrap {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: stretch;
}
.pricingCard { padding: 34px; display: grid; gap: 18px; }
.priceBig { font-size: 84px; letter-spacing: -.09em; font-weight: 950; color: var(--dark); }
.priceBig small { font-size: 18px; letter-spacing: 0; }
.checkList { list-style: none; display: grid; gap: 11px; padding: 0; margin: 10px 0 0; }
.checkList li { color: #302d29; font-weight: 900; }
.checkList li:before { content: "+"; color: var(--green); margin-right: 10px; font-weight: 950; }
.faqGrid { display: grid; gap: 12px; }
.faqCard { padding: 20px; display: grid; gap: 8px; box-shadow: none; }
.footer { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 30px 0 60px; display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-weight: 850; }

.authShell {
  min-height: 100vh;
  padding: 28px;
  background:
    radial-gradient(circle at 86% 12%, rgba(255,122,26,.18), transparent 32rem),
    radial-gradient(circle at 15% 10%, rgba(124,58,237,.10), transparent 30rem),
    var(--bg);
}
.authTop { width: min(1180px, 100%); margin: 0 auto 38px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.authLayout { width: min(1120px, 100%); margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: start; }
.authAside { padding: 34px; min-height: 620px; display: grid; align-content: start; gap: 20px; background: var(--dark); color: #fff; overflow: hidden; position: relative; }
.authAside:after { content: ""; position: absolute; width: 320px; height: 320px; right: -110px; bottom: -120px; background: radial-gradient(circle, rgba(255,122,26,.34), transparent 68%); }
.authAside h1, .authAside h2, .authAside h3 { color: #fff; }
.authAside p { color: rgba(255,255,255,.72); }
.authAside .trustRow span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.11); color: rgba(255,255,255,.76); }
.formCard { padding: 30px; display: grid; gap: 16px; }
.formCard h2 { font-size: clamp(36px, 5vw, 54px); }
.fieldGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label, .fieldLabel { display: grid; gap: 8px; color: #2e2923; font-size: 14px; font-weight: 950; }
input, select, textarea {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  outline: none;
  padding: 0 14px;
  transition: border .18s ease, box-shadow .18s ease;
}
textarea { min-height: 122px; padding: 14px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: rgba(255,122,26,.55); box-shadow: 0 0 0 4px rgba(255,122,26,.12); }
.checkbox { display: flex !important; align-items: flex-start; gap: 10px !important; color: var(--muted) !important; font-size: 13px !important; font-weight: 760 !important; line-height: 1.45; }
.checkbox input { width: 18px; height: 18px; min-height: 18px; margin-top: 2px; }
.formFooter { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.errorBox, .successBox, .callout {
  border-radius: 18px;
  padding: 14px 15px;
  font-weight: 850;
  line-height: 1.45;
}
.errorBox { background: #fff1f2; color: #be123c; border: 1px solid rgba(190,18,60,.13); }
.successBox { background: #ecfdf5; color: #047857; border: 1px solid rgba(4,120,87,.14); }
.callout { background: #fff7ed; color: #9a3412; border: 1px solid rgba(255,122,26,.20); }
.loginBox { max-width: 510px; margin: 0 auto; }

.appShell { min-height: 100vh; display: grid; grid-template-columns: 286px 1fr; background: #f6efe5; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--dark);
  color: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sidebar .brand { color: #fff; }
.sidebar .brandMark { background: #fff; color: var(--dark); box-shadow: none; }
.sideBusiness { padding: 15px; border-radius: 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); display: grid; gap: 5px; }
.sideBusiness strong { font-size: 20px; letter-spacing: -.04em; }
.sideBusiness span { color: rgba(255,255,255,.65); font-weight: 850; font-size: 13px; }
.sideNav { display: grid; gap: 7px; }
.sideNav button {
  width: 100%;
  text-align: left;
  min-height: 44px;
  border-radius: 15px;
  padding: 0 13px;
  color: rgba(255,255,255,.68);
  background: transparent;
  font-weight: 900;
}
.sideNav button:hover, .sideNav button.active { background: rgba(255,255,255,.10); color: #fff; }
.sideFooter { margin-top: auto; display: grid; gap: 10px; }
.trialBox { padding: 16px; border-radius: 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); display: grid; gap: 6px; }
.trialBox span { color: rgba(255,255,255,.64); font-weight: 850; font-size: 13px; }
.trialBox strong { font-size: 28px; letter-spacing: -.07em; }
.sidebar .secondaryBtn, .sidebar .ghostBtn { color: #fff; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.09); box-shadow: none; }
.mainApp { padding: 30px; min-width: 0; }
.dashHeader { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
.dashHeader h1 { font-size: clamp(38px, 5vw, 66px); }
.dashHeader p { max-width: 720px; }
.headerActions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.metricsGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.metricCard { padding: 20px; display: grid; gap: 8px; }
.metricCard span { color: var(--muted); font-weight: 850; }
.metricCard strong { font-size: 38px; letter-spacing: -.07em; }
.metricCard small { color: var(--muted-2); }
.contentGrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(350px, .82fr); gap: 18px; align-items: start; }
.panel { padding: 24px; min-width: 0; }
.panelHead { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
.panelHead h2 { font-size: 28px; }
.panelHead span { color: var(--muted); font-weight: 850; font-size: 13px; }
.moduleGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.moduleCard { padding: 18px; display: grid; gap: 10px; box-shadow: none; transition: transform .18s ease, box-shadow .18s ease; }
.moduleCard:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.moduleCard .top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.moduleCard p { font-size: 14px; }
.activityList, .customerList, .campaignList { display: grid; gap: 10px; }
.activityItem, .customerItem, .campaignItem {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #fffdfa;
}
.activityItem div, .customerItem div, .campaignItem div { display: grid; gap: 3px; }
.activityItem strong, .customerItem strong, .campaignItem strong { letter-spacing: -.02em; }
.activityItem span, .customerItem span, .campaignItem span { color: var(--muted); font-weight: 820; font-size: 13px; }
.formGrid { display: grid; gap: 14px; }
.twoCol { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.threeCol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.previewCard { padding: 22px; display: grid; gap: 14px; background: linear-gradient(180deg, #fff, #fff8ef); box-shadow: none; }
.previewCard h3 { font-size: 32px; }
.previewMsg { background: #111827; color: #fff; border-radius: 22px; padding: 20px; display: grid; gap: 10px; }
.previewMsg p { color: rgba(255,255,255,.72); }
.previewMsg .tag { color: #fed7aa; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 950; }
.tableWrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
table { width: 100%; border-collapse: collapse; min-width: 880px; }
th, td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
td { color: #302d29; font-weight: 760; }
.rewardRows { display: grid; gap: 10px; }
.rewardRow { display: grid; grid-template-columns: 1fr 85px 92px 38px; gap: 8px; align-items: center; }
.rewardRow input { min-height: 42px; }
.copyBox { display: flex; gap: 8px; align-items: center; background: #f8fafc; border: 1px dashed rgba(17,24,39,.18); border-radius: 16px; padding: 9px; }
.copyBox code { flex: 1; word-break: break-all; color: var(--dark); font-weight: 850; font-size: 13px; }
.emptyState { border: 1px dashed rgba(17,24,39,.18); border-radius: 20px; padding: 22px; text-align: center; background: #fffdfa; }
.emptyState h3 { font-size: 24px; margin-bottom: 6px; }

.playShell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top, rgba(255,122,26,.25), transparent 30rem), var(--dark); }
.playTop { position: fixed; top: 22px; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #fff; z-index: 5; }
.playTop .brand { color: #fff; }
.playTop .brandMark { background: #fff; color: var(--dark); box-shadow: none; }
.playCard { width: min(560px, 100%); background: #fffaf3; border-radius: 40px; box-shadow: 0 30px 90px rgba(0,0,0,.36); padding: 34px; text-align: center; border: 1px solid rgba(255,255,255,.18); }
.playCard h1 { font-size: clamp(42px, 10vw, 72px); }
.bigWheel { width: 230px; height: 230px; margin: 24px auto; border-radius: 50%; background: conic-gradient(#111827 0 22%, #ff7a1a 22% 44%, #f6b73c 44% 66%, #ee4266 66% 84%, #15a667 84%); border: 12px solid #fff; box-shadow: 0 20px 55px rgba(255,122,26,.25); color: #fff; display: grid; place-items: center; font-size: 34px; font-weight: 950; }
.bigWheel.spinning { animation: spin .9s cubic-bezier(.2,.8,.2,1); }
@keyframes spin { to { transform: rotate(1440deg); } }
.playForm { display: grid; gap: 12px; text-align: left; margin-top: 12px; }
.resultBox { display: grid; gap: 14px; }
.couponCode { border: 2px dashed var(--orange); border-radius: 22px; background: #fff; padding: 20px; font-size: 34px; font-weight: 950; letter-spacing: .08em; }
.rewardPass { border: 1px solid rgba(251,113,82,.35); border-radius: 28px; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,245,232,.98)); padding: 22px; box-shadow: 0 20px 45px rgba(17,24,39,.08); display: grid; gap: 10px; }
.rewardPass strong { font-size: clamp(28px, 7vw, 48px); letter-spacing: -.05em; line-height: .98; color: var(--ink); }
.rewardPass p { margin: 0; color: var(--muted); font-weight: 850; }
.rewardPass .staffHint { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #111827; color: white; padding: 12px 16px; font-weight: 950; width: fit-content; }
.bonusRewardCard.simpleBonus { background: #ecfdf5; border-color: rgba(16,185,129,.28); }

.resultActions { display: grid; gap: 10px; }
.referralCard { text-align: left; background: #fff7ed; border: 1px solid rgba(255,122,26,.20); border-radius: 22px; padding: 18px; display: grid; gap: 10px; }

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--dark);
  color: #fff;
  font-weight: 900;
  box-shadow: var(--shadow);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .topbar nav a, .topbar nav .navLink { display: none; }
  .hero, .gridTwo, .pricingWrap, .darkBand, .authLayout, .contentGrid { grid-template-columns: 1fr; }
  .heroVisual { min-height: 580px; }
  .ownerMini { right: 18px; bottom: 0; }
  .engineGrid, .featureGrid, .testimonialGrid, .metricsGrid { grid-template-columns: repeat(2, 1fr); }
  .appShell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .sideNav { grid-template-columns: repeat(2, 1fr); }
  .mainApp { padding: 22px; }
}

.redemptionResult {
  border-radius: 20px;
  padding: 16px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
}
.redemptionResult.success { background: #ecfdf5; border-color: rgba(21,166,103,.18); }
.redemptionResult.warning { background: #fff7ed; border-color: rgba(255,122,26,.22); }
.redemptionResult strong { color: var(--dark); }
.redemptionResult p { font-size: 14px; }
.billingHero {
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255,122,26,.18), transparent 16rem),
    #fff7ed;
  padding: 24px;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255,122,26,.13);
}
.billingHero h3 {
  font-size: clamp(42px, 6vw, 66px);
  letter-spacing: -.07em;
}
.billingHero h3 small {
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--muted);
}
.billingActions { display: grid; gap: 10px; margin-top: 14px; }
.checkList.compact { margin-top: 0; }
.checkList.compact li { padding: 10px 0 10px 28px; }
.copyGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.copyGrid .copyBox { justify-content: flex-start; }
.copyGrid code { white-space: normal; word-break: break-word; }

@media (max-width: 680px) {
  .topbar { width: calc(100% - 24px); }
  .topbar nav { gap: 8px; }
  .topbar .ghostBtn { display: none; }
  .hero, .section, .footer { width: calc(100% - 24px); }
  .hero { padding-top: 34px; }
  .heroVisual { min-height: auto; }
  .visualBlob, .ownerMini, .floatBadge { display: none; }
  .phoneMock { width: 100%; max-width: 350px; min-height: auto; }
  .engineGrid, .featureGrid, .testimonialGrid, .stepGrid, .pricingGrid, .statsGrid, .mockMetrics, .moduleGrid, .metricsGrid, .fieldGrid, .twoCol, .threeCol { grid-template-columns: 1fr; }
  .darkBand { padding: 30px 22px; border-radius: 30px; }
  .authShell { padding: 16px; }
  .formCard, .authAside, .panel, .pricingCard { padding: 22px; }
  .dashHeader { display: grid; }
  .headerActions { justify-content: start; }
  .sideNav { grid-template-columns: 1fr; }
  .rewardRow { grid-template-columns: 1fr; }
  .playCard { padding: 24px; border-radius: 30px; }
  .footer { display: grid; }
}


/* LocalSpin v8 visual system: modern typography, smaller titles, premium prize wheel and Supabase-ready SaaS screens */
:root {
  --bg: #f7f2ea;
  --bg-2: #fff8ef;
  --ink: #16110d;
  --muted: #6d6258;
  --muted-2: #94887d;
  --card: rgba(255,255,255,.86);
  --line: rgba(38, 28, 18, .10);
  --dark: #111315;
  --dark-2: #1d1b24;
  --orange: #ff6b23;
  --amber: #ffbd45;
  --rose: #ff3d6e;
  --green: #20c47b;
  --blue: #4f7cff;
  --purple: #8b5cf6;
  --shadow: 0 24px 70px rgba(20, 14, 8, .14);
  --shadow-soft: 0 14px 38px rgba(20, 14, 8, .08);
  --display: "Space Grotesk", "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body {
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  background: #f7f2ea;
}
p { font-size: 15px; line-height: 1.6; }
h1, h2, h3, h4, .brand, .priceBig, .statCard strong, .metricCard strong {
  font-family: var(--display);
  letter-spacing: -.038em;
  line-height: 1.03;
}
h1 { font-size: clamp(40px, 5.4vw, 72px); }
h2 { font-size: clamp(28px, 3.6vw, 48px); }
h3 { font-size: 22px; }
.topbar {
  margin-top: 12px;
  width: min(1180px, calc(100% - 28px));
  padding: 12px 14px;
  border: 1px solid rgba(38,28,18,.08);
  border-radius: 999px;
  background: rgba(255, 250, 244, .72);
  box-shadow: 0 16px 44px rgba(20,14,8,.06);
}
.brand { font-size: 17px; font-weight: 900; letter-spacing: -.035em; }
.brandMark {
  width: 36px;
  height: 36px;
  border-radius: 13px;
  background: radial-gradient(circle at 25% 20%, #fff4c6 0 7%, transparent 8%), linear-gradient(135deg, #ff6b23, #ff3d6e 58%, #8b5cf6);
  box-shadow: 0 14px 28px rgba(255, 84, 48, .24);
}
.topbar nav { gap: 14px; font-size: 14px; }
.primaryBtn, .secondaryBtn, .ghostBtn, .dangerBtn, .miniBtn { min-height: 44px; padding: 0 18px; font-weight: 900; }
.primaryBtn.small, .secondaryBtn.small, .ghostBtn.small { min-height: 38px; padding: 0 14px; font-size: 13px; }
.primaryBtn.orange {
  background: linear-gradient(135deg, #ff6b23, #ff3d6e 62%, #8b5cf6);
  box-shadow: 0 18px 38px rgba(255, 85, 44, .24);
}
.siteShell {
  background:
    radial-gradient(circle at 5% 2%, rgba(255,107,35,.22), transparent 30rem),
    radial-gradient(circle at 86% 12%, rgba(139,92,246,.12), transparent 30rem),
    linear-gradient(180deg, #fff9f2 0%, #f7f2ea 48%, #fff9f2 100%);
}
.hero {
  padding: 54px 0 42px;
  grid-template-columns: minmax(0, 1.04fr) minmax(370px, .86fr);
  gap: 42px;
}
.heroCopy { gap: 18px; }
.heroCopy h1 { font-size: clamp(44px, 6vw, 78px); max-width: 790px; }
.heroCopy p { font-size: clamp(16px, 1.45vw, 18px); max-width: 610px; }
.pill, .eyebrow { padding: 8px 12px; font-size: 12px; letter-spacing: .02em; font-weight: 900; }
.trustRow span { font-size: 12px; padding: 9px 11px; font-weight: 850; }
.heroVisual { min-height: 595px; }
.visualBlob {
  inset: 44px 0 62px 58px;
  border-radius: 52px;
  background: linear-gradient(145deg, rgba(255,107,35,.16), rgba(139,92,246,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.phoneMock {
  width: 316px;
  min-height: 572px;
  border: 8px solid #14161d;
  border-radius: 44px;
  background: linear-gradient(180deg, #fffaf5, #fff2e6);
  box-shadow: 0 34px 78px rgba(17,19,21,.25), 0 0 0 1px rgba(255,255,255,.7) inset;
  padding: 20px;
}
.phoneNotch { width: 82px; height: 24px; margin: -5px auto 18px; }
.gameCard { gap: 13px; }
.gameCard h3 { font-size: 22px; }
.postGameList { gap: 8px; }
.postGameList span { padding: 10px 11px; border-radius: 15px; font-size: 13px; font-weight: 850; }
.ownerMini { width: 292px; padding: 16px; border-radius: 24px; }
.floatBadge { border-radius: 20px; padding: 13px 16px; }
.floatBadge strong { font-size: 24px; }
.section { padding: 64px 0; }
.sectionHeader { max-width: 760px; gap: 12px; }
.engineCard { padding: 22px; min-height: 218px; border-radius: 24px; }
.engineCard h3 { font-size: 22px; }
.engineCard p { font-size: 14px; }
.darkBand { border-radius: 40px; padding: 48px; }
.statCard strong { font-size: 34px; }
.stepCard, .testimonial, .pricingCard, .faqCard, .mockPanel { border-radius: 24px; }
.pricingCard { padding: 30px; }
.priceBig { font-size: clamp(56px, 8vw, 72px); }
.authAside h1 { font-size: clamp(34px, 4.5vw, 56px); }
.formCard h2 { font-size: clamp(28px, 3.5vw, 40px); }
.authAside { min-height: 560px; }
input, select, textarea { min-height: 46px; border-radius: 14px; font-size: 14px; }
label, .fieldLabel { font-size: 13px; }
.appShell { background: linear-gradient(180deg, #f7f2ea, #fff8ef); }
.sidebar { background: linear-gradient(180deg, #121316, #1d1721); }
.mainApp { padding: 28px; }
.dashHeader h1 { font-size: clamp(30px, 4vw, 48px); }
.dashHeader p { font-size: 14px; }
.panel { border-radius: 24px; padding: 22px; }
.panelHead h2 { font-size: 24px; }
.metricCard { padding: 18px; border-radius: 23px; }
.metricCard strong { font-size: 30px; }
.moduleCard h3 { font-size: 20px; }
.previewCard h3 { font-size: 25px; }
.sideBusiness strong { font-size: 18px; }
.trialBox strong { font-size: 24px; }

.prizeWheel {
  --wheel-size: 224px;
  width: var(--wheel-size);
  height: calc(var(--wheel-size) + 20px);
  margin: 8px auto;
  position: relative;
  display: grid;
  place-items: end center;
  isolation: isolate;
}
.phonePrizeWheel { --wheel-size: 212px; }
.previewPrizeWheel { --wheel-size: 208px; }
.bigPrizeWheel { --wheel-size: 278px; margin: 18px auto 20px; }
.wheelPointer {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--wheel-size) * .17);
  height: calc(var(--wheel-size) * .14);
  background: linear-gradient(180deg, #fff, #ffe7cc 45%, #ff6b23);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 8px 14px rgba(20,14,8,.18));
  z-index: 4;
}
.wheelOuter {
  position: relative;
  width: var(--wheel-size);
  height: var(--wheel-size);
  padding: calc(var(--wheel-size) * .047);
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #ffe8d1 48%, #fff6eb);
  box-shadow:
    0 24px 54px rgba(255, 92, 43, .25),
    0 11px 28px rgba(21, 18, 14, .16),
    inset 0 0 0 1px rgba(255,255,255,.72);
}
.wheelOuter:before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px dashed rgba(22,17,13,.14);
  z-index: 2;
  pointer-events: none;
}
.wheelOuter:after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.88), rgba(255,255,255,.18) 50%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}
.wheelSegments {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: conic-gradient(from -18deg,
    #ff3d6e 0 16.66%,
    #ffbd45 16.66% 33.33%,
    #20c47b 33.33% 50%,
    #4f7cff 50% 66.66%,
    #8b5cf6 66.66% 83.33%,
    #ff6b23 83.33% 100%);
}
.wheelSegments:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -18deg, rgba(255,255,255,.9) 0 1deg, transparent 1deg 60deg);
  mix-blend-mode: soft-light;
  opacity: .9;
}
.wheelSegments:after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 53%, rgba(255,255,255,.14) 54% 100%);
}
.wheelText {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  color: #fff;
  font-family: var(--display);
  font-weight: 850;
  font-size: calc(var(--wheel-size) * .052);
  letter-spacing: -.035em;
  line-height: .95;
  text-align: center;
  max-width: calc(var(--wheel-size) * .27);
  overflow-wrap: break-word;
  text-shadow: 0 2px 10px rgba(0,0,0,.22);
  user-select: none;
}
.wt1 { transform: translate(-50%, -50%) rotate(12deg) translateY(calc(var(--wheel-size) * -.34)) rotate(-12deg); }
.wt2 { transform: translate(-50%, -50%) rotate(72deg) translateY(calc(var(--wheel-size) * -.34)) rotate(-72deg); }
.wt3 { transform: translate(-50%, -50%) rotate(132deg) translateY(calc(var(--wheel-size) * -.34)) rotate(-132deg); }
.wt4 { transform: translate(-50%, -50%) rotate(192deg) translateY(calc(var(--wheel-size) * -.34)) rotate(-192deg); }
.wt5 { transform: translate(-50%, -50%) rotate(252deg) translateY(calc(var(--wheel-size) * -.34)) rotate(-252deg); }
.wt6 { transform: translate(-50%, -50%) rotate(312deg) translateY(calc(var(--wheel-size) * -.34)) rotate(-312deg); }
.wheelCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--wheel-size) * .34);
  height: calc(var(--wheel-size) * .34);
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  background: linear-gradient(145deg, #151515, #2a1a20);
  color: #fff;
  z-index: 3;
  box-shadow: 0 14px 24px rgba(20,14,8,.28), inset 0 0 0 5px rgba(255,255,255,.08);
  text-transform: uppercase;
}
.wheelCenter strong { font-size: calc(var(--wheel-size) * .095); letter-spacing: -.06em; line-height: 1; }
.wheelCenter small { color: #ffcf9b; font-size: calc(var(--wheel-size) * .045); letter-spacing: .12em; font-weight: 900; }
.prizeWheel:hover .wheelOuter { transform: translateY(-2px) rotate(2deg); }
.wheelOuter { transition: transform .22s ease; }
.prizeWheel.spinning .wheelOuter { animation: prizeSpin .9s cubic-bezier(.18,.86,.24,1) both; }
@keyframes prizeSpin { to { transform: rotate(1620deg); } }

.playShell {
  position: relative;
  overflow: hidden;
  padding: 26px;
  background:
    radial-gradient(circle at 50% -8%, rgba(255,189,69,.32), transparent 24rem),
    radial-gradient(circle at 10% 18%, rgba(255,61,110,.22), transparent 26rem),
    radial-gradient(circle at 92% 80%, rgba(79,124,255,.22), transparent 25rem),
    #111315;
}
.playShell:before, .playShell:after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 38px;
  transform: rotate(18deg);
  pointer-events: none;
}
.playShell:before { left: -90px; top: 18%; }
.playShell:after { right: -110px; bottom: 10%; transform: rotate(-22deg); }
.playCard {
  width: min(520px, 100%);
  background: rgba(255, 250, 245, .94);
  backdrop-filter: blur(18px);
  border-radius: 34px;
  box-shadow: 0 34px 90px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.72);
  padding: 30px;
}
.playCard h1 { font-size: clamp(34px, 7vw, 54px); }
.playCard > p { font-size: 14px; }
.gamePerks {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 2px;
}
.gamePerks span {
  border: 1px solid rgba(38,28,18,.09);
  background: #fff;
  color: #3b332b;
  font-weight: 850;
  font-size: 12px;
  border-radius: 999px;
  padding: 8px 10px;
}
.playForm { gap: 10px; }
.couponCode { font-size: 28px; border-radius: 19px; }
.resultBox h1 { font-size: clamp(32px, 7vw, 50px); }
.referralCard { border-radius: 19px; }
.bigWheel + .playForm { margin-top: 6px; }


.redemptionResult {
  border-radius: 20px;
  padding: 16px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
}
.redemptionResult.success { background: #ecfdf5; border-color: rgba(21,166,103,.18); }
.redemptionResult.warning { background: #fff7ed; border-color: rgba(255,122,26,.22); }
.redemptionResult strong { color: var(--dark); }
.redemptionResult p { font-size: 14px; }
.billingHero {
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255,122,26,.18), transparent 16rem),
    #fff7ed;
  padding: 24px;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255,122,26,.13);
}
.billingHero h3 {
  font-size: clamp(42px, 6vw, 66px);
  letter-spacing: -.07em;
}
.billingHero h3 small {
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--muted);
}
.billingActions { display: grid; gap: 10px; margin-top: 14px; }
.checkList.compact { margin-top: 0; }
.checkList.compact li { padding: 10px 0 10px 28px; }
.copyGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.copyGrid .copyBox { justify-content: flex-start; }
.copyGrid code { white-space: normal; word-break: break-word; }

@media (max-width: 680px) {
  h1 { font-size: clamp(36px, 10vw, 48px); }
  h2 { font-size: clamp(26px, 8vw, 38px); }
  .topbar { border-radius: 24px; padding: 10px; }
  .hero { padding-top: 32px; }
  .heroCopy h1 { font-size: clamp(38px, 12vw, 54px); }
  .phonePrizeWheel { --wheel-size: 196px; }
  .bigPrizeWheel { --wheel-size: 240px; }
  .playCard { padding: 22px; border-radius: 28px; }
}

/* v8 backend readiness UI */
.copyGrid.oneCol { grid-template-columns: 1fr; }
.miniEngines { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .miniEngines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .miniEngines { grid-template-columns: 1fr; } }

/* v8 public QR launch */
.qrPoster {
  display: grid;
  grid-template-columns: 138px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,247,237,.72));
}
.qrFake {
  width: 138px;
  height: 138px;
  border-radius: 24px;
  background:
    linear-gradient(90deg, #111827 12px, transparent 12px) 0 0 / 28px 28px,
    linear-gradient(#111827 12px, transparent 12px) 0 0 / 28px 28px,
    linear-gradient(135deg, #fff 0%, #fff7ed 100%);
  position: relative;
  border: 10px solid #fff;
  box-shadow: 0 24px 56px rgba(17, 24, 39, .15);
  overflow: hidden;
}
.qrFake span {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 10px #111827;
}
.qrFake span:nth-child(1) { top: 10px; left: 10px; }
.qrFake span:nth-child(2) { top: 10px; right: 10px; }
.qrFake span:nth-child(3) { bottom: 10px; left: 10px; }
.hpField {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  left: -9999px !important;
}
@media (max-width: 700px) {
  .qrPoster { grid-template-columns: 1fr; }
}

/* LocalSpin v8.1 bug fixes: zoom-safe dashboard, readable text selection, safer auth cards */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

::selection {
  background: rgba(255, 122, 26, .28);
  color: #16110d;
}

.authAside ::selection,
.sidebar ::selection,
.darkBand ::selection,
.playHero ::selection {
  background: rgba(255, 255, 255, .24);
  color: #fff;
}

.authAside::after {
  pointer-events: none;
}

.authAside > * {
  position: relative;
  z-index: 1;
}

.appShell {
  min-height: 100dvh;
  grid-template-columns: minmax(260px, 286px) minmax(0, 1fr);
  align-items: stretch;
}

.sidebar {
  min-height: 100dvh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 10;
  scrollbar-width: thin;
}

.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16);
  border-radius: 999px;
}

.mainApp {
  min-width: 0;
  min-height: 100dvh;
  padding-bottom: 48px;
}

.sidebar .secondaryBtn,
.sidebar .ghostBtn,
.sidebar .primaryBtn {
  color: #fff !important;
}

.sidebar .secondaryBtn:hover,
.sidebar .ghostBtn:hover,
.sidebar .primaryBtn:hover {
  color: #fff !important;
}

@media (min-width: 981px) and (max-height: 820px) {
  .sidebar {
    padding: 18px;
    gap: 13px;
  }
  .sideBusiness {
    padding: 12px;
    border-radius: 17px;
  }
  .sideNav {
    gap: 5px;
  }
  .sideNav button {
    min-height: 38px;
    border-radius: 13px;
    font-size: 14px;
  }
  .trialBox {
    padding: 12px;
    border-radius: 17px;
  }
  .trialBox strong {
    font-size: 21px;
  }
  .sideFooter {
    gap: 8px;
  }
  .sidebar .secondaryBtn,
  .sidebar .ghostBtn {
    min-height: 42px;
  }
}

@media (max-width: 980px) {
  .appShell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: relative;
    height: auto;
    min-height: auto;
    overflow-y: visible;
  }
}

@media (max-width: 680px) {
  .authLayout {
    gap: 18px;
  }
  .authAside {
    min-height: auto;
  }
}

/* LocalSpin v10: signup pill contrast, QR Print Kit and Campaign Sender */
.authAside .eyebrow {
  background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;
  color: #9a3412 !important;
  border-color: rgba(255, 237, 213, .95) !important;
  box-shadow: 0 18px 34px rgba(255, 122, 26, .18);
  text-shadow: none !important;
}

.qrLaunchBox {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 18px;
  border-radius: 28px;
  background: #fffaf3;
  border: 1px solid var(--line);
}
.qrImage,
.qrMini {
  display: block;
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 10px;
  box-shadow: 0 14px 30px rgba(17, 24, 39, .08);
}
.qrMini {
  max-width: 150px;
  border-radius: 18px;
  padding: 8px;
  margin: 0 auto;
}
.printKitGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.printAsset {
  min-height: 310px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 18px;
  display: grid;
  gap: 14px;
}
.assetTop {
  display: grid;
  gap: 8px;
}
.assetTop h3 {
  font-size: 24px;
}
.assetFooter {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}
.tableTentPreview,
.posterPreview,
.storyPreview,
.receiptPreview {
  border-radius: 24px;
  border: 1px solid var(--line);
  padding: 18px;
  display: grid;
  gap: 12px;
  align-content: center;
  min-height: 190px;
  text-align: center;
  background: #fffaf3;
}
.tableTentPreview strong,
.posterPreview h4,
.storyPreview h4 {
  color: var(--ink);
  font-size: 22px;
  letter-spacing: -.06em;
  line-height: 1;
}
.tableTentPreview span,
.storyPreview span,
.receiptPreview span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.posterPreview p,
.storyPreview p,
.receiptPreview p {
  font-size: 13px;
  line-height: 1.45;
}
.receiptPreview {
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background: #fff;
  border-style: dashed;
}
.receiptPreview code {
  white-space: normal;
  word-break: break-all;
  color: #9a3412;
  font-weight: 850;
}
.storyPreview {
  background: linear-gradient(145deg, var(--orange), var(--rose));
  color: #fff;
  border: 0;
  min-height: 220px;
}
.storyPreview span,
.storyPreview h4,
.storyPreview p {
  color: #fff;
}
.storyPreview p {
  opacity: .86;
}

@media (max-width: 1180px) {
  .printKitGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .qrLaunchBox { grid-template-columns: 1fr; }
  .printKitGrid { grid-template-columns: 1fr; }
  .qrImage { max-width: 220px; margin: 0 auto; }
}

/* v10 Campaign Sender */
.campaignCenterGrid {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 18px;
  align-items: start;
}
.campaignCommandPanel {
  min-height: 100%;
}
.campaignCommandList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.sendCampaignCard {
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 18px;
  background: #fff;
  display: grid;
  gap: 14px;
  box-shadow: 0 12px 28px rgba(17, 24, 39, .045);
}
.sendCampaignCard.disabled {
  opacity: .72;
  background: #fffaf3;
}
.sendCampaignCard h3 {
  font-size: 25px;
}
.sendCampaignCard p {
  font-size: 14px;
  line-height: 1.5;
}
.sendStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.sendStats span,
.messageMetaGrid span {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  background: #fffaf3;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.sendStats strong,
.messageMetaGrid strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  margin-bottom: 2px;
}
.sendActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sendActions .primaryBtn,
.sendActions .secondaryBtn {
  min-height: 44px;
  padding: 12px 14px;
}
button:disabled {
  opacity: .48;
  cursor: not-allowed;
}
.messagePreviewCard {
  border-radius: 30px;
  padding: 24px;
  background: linear-gradient(145deg, #111827, #22283a);
  color: #fff;
  display: grid;
  gap: 16px;
  box-shadow: var(--shadow-soft);
}
.messagePreviewCard h3,
.messagePreviewCard p,
.messagePreviewCard .eyebrow {
  color: #fff;
}
.messagePreviewCard h3 {
  font-size: 30px;
}
.messagePreviewCard p {
  font-size: 15px;
  line-height: 1.7;
  opacity: .86;
}
.messageMetaGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.messageMetaGrid span {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.76);
}
.messageMetaGrid strong {
  color: #fff;
}
.providerBox,
.sendResult {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 16px;
  background: #fffaf3;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
}
.providerBox p,
.sendResult p {
  font-size: 13px;
}
.providerBox code {
  background: rgba(17,24,39,.07);
  padding: 2px 6px;
  border-radius: 8px;
  color: #9a3412;
  font-weight: 800;
}
.sendResult {
  margin-bottom: 18px;
}
.sendResult.success {
  background: rgba(21, 166, 103, .09);
  border-color: rgba(21, 166, 103, .22);
}
.sendResult.warning {
  background: rgba(238, 66, 102, .08);
  border-color: rgba(238, 66, 102, .2);
}
@media (max-width: 1180px) {
  .campaignCenterGrid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .campaignCommandList { grid-template-columns: 1fr; }
  .sendStats,
  .messageMetaGrid,
  .sendActions { grid-template-columns: 1fr; }
  .providerBox,
  .sendResult { align-items: flex-start; flex-direction: column; }
}

/* LocalSpin v11: compact dashboard menu, clearer dark-card text, mobile staff redemption */
.sidebar {
  width: 100%;
  padding: 18px;
  gap: 12px;
}
.sideBusiness {
  padding: 12px 13px;
  border-radius: 17px;
  gap: 2px;
}
.sideBusiness strong {
  font-size: 17px;
  line-height: 1.08;
}
.sideBusiness span {
  font-size: 12px;
}
.sideNav {
  gap: 3px;
  overflow-y: auto;
  max-height: calc(100dvh - 315px);
  padding-right: 3px;
  scrollbar-width: thin;
}
.sideNav::-webkit-scrollbar { width: 6px; }
.sideNav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }
.sideNav button {
  min-height: 34px;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 14px;
  letter-spacing: -.01em;
}
.sideFooter {
  gap: 7px;
  flex-shrink: 0;
}
.trialBox {
  padding: 12px 14px;
  border-radius: 17px;
  gap: 3px;
}
.trialBox strong {
  font-size: 22px;
}
.trialBox span {
  font-size: 12px;
}
.sidebar .secondaryBtn,
.sidebar .ghostBtn,
.sidebar .primaryBtn {
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 14px;
}
.previewMsg h3,
.previewMsg h4,
.previewMsg strong {
  color: #fff !important;
}
.previewMsg p,
.previewMsg span {
  color: rgba(255,255,255,.82) !important;
}
.moduleCard h3,
.sendCampaignCard h3,
.engineCard h3,
.campaignItem strong,
.activityItem strong,
.customerItem strong {
  color: var(--ink) !important;
}
.sendCampaignCard .eyebrow,
.moduleCard .eyebrow,
.engineCard .eyebrow {
  color: #9a3412 !important;
}

.staffShell {
  min-height: 100dvh;
  background: radial-gradient(circle at top left, rgba(255,122,26,.18), transparent 28%), linear-gradient(135deg, #fbf7ef, #fff4e8 58%, #f7e9ff);
  padding: 22px;
  display: grid;
  place-items: start center;
}
.staffPhone {
  width: min(100%, 520px);
  display: grid;
  gap: 16px;
}
.staffTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.staffHero,
.staffRedeemCard,
.staffList {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-soft);
  border-radius: 30px;
  padding: 22px;
}
.staffHero {
  background: #111827;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.staffHero::after {
  content: '';
  position: absolute;
  inset: auto -60px -80px auto;
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(255,122,26,.45), transparent 66%);
}
.staffHero .eyebrow,
.staffHero h1,
.staffHero p {
  color: #fff;
  position: relative;
  z-index: 1;
}
.staffHero h1 {
  font-size: clamp(36px, 9vw, 58px);
  margin-top: 8px;
  margin-bottom: 10px;
}
.staffHero p {
  opacity: .78;
  font-size: 15px;
}
.staffRedeemCard {
  display: grid;
  gap: 14px;
}
.staffRedeemCard input {
  font-size: 22px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}
.staffStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.staffStats article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 12px 28px rgba(17,24,39,.06);
}
.staffStats strong {
  display: block;
  color: var(--ink);
  font-size: 30px;
  letter-spacing: -.06em;
}
.staffStats span {
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}
.staffList {
  display: grid;
  gap: 10px;
}
.panelHead.compact {
  margin-bottom: 6px;
}
.panelHead.compact h2 {
  font-size: 22px;
}
.staffCoupon {
  width: 100%;
  min-height: 70px;
  text-align: left;
  padding: 14px 16px;
  border-radius: 20px;
  background: #fffaf3;
  border: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.staffCoupon:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(17,24,39,.08);
}
.staffCoupon strong {
  color: var(--ink);
  font-size: 20px;
}
.staffCoupon span {
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}
.staffFooter {
  display: grid;
  gap: 10px;
}
@media (min-width: 981px) {
  .appShell { grid-template-columns: minmax(250px, 268px) minmax(0, 1fr); }
}
@media (max-height: 760px) and (min-width: 981px) {
  .sideNav { max-height: calc(100dvh - 250px); }
  .sideBusiness { display: none; }
  .trialBox { display: none; }
}
@media (max-width: 560px) {
  .staffShell { padding: 14px; place-items: stretch; }
  .staffHero,
  .staffRedeemCard,
  .staffList { border-radius: 24px; padding: 18px; }
  .staffStats article { padding: 12px; }
}

/* LocalSpin v12: fixed dashboard sidebar, stronger title contrast, index fallback polish */
html, body {
  overflow-x: hidden;
}

.appShell {
  grid-template-columns: minmax(238px, 254px) minmax(0, 1fr) !important;
  align-items: start !important;
}

.sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  padding: 14px !important;
  gap: 9px !important;
  display: flex !important;
  flex-direction: column !important;
}

.sidebar .brand {
  flex: 0 0 auto;
  min-height: 36px;
  gap: 10px;
}

.sidebar .brandMark {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  font-size: 12px;
}

.sidebar .brand span:last-child {
  font-size: 15px;
}

.sideBusiness {
  flex: 0 0 auto;
  padding: 10px 11px !important;
  border-radius: 15px !important;
}

.sideBusiness strong {
  font-size: 15px !important;
  line-height: 1.05 !important;
}

.sideBusiness span {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.sideNav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  gap: 2px !important;
  padding-right: 3px !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.sideNav button {
  min-height: 29px !important;
  border-radius: 10px !important;
  padding: 0 10px !important;
  font-size: 12.6px !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.sideFooter {
  flex: 0 0 auto !important;
  gap: 6px !important;
  margin-top: 0 !important;
}

.trialBox {
  padding: 9px 11px !important;
  border-radius: 14px !important;
  gap: 1px !important;
}

.trialBox span {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.trialBox strong {
  font-size: 19px !important;
  line-height: 1.08 !important;
}

.sidebar .secondaryBtn,
.sidebar .ghostBtn,
.sidebar .primaryBtn {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
}

.sendCampaignCard h1,
.sendCampaignCard h2,
.sendCampaignCard h3,
.moduleCard h1,
.moduleCard h2,
.moduleCard h3,
.engineCard h1,
.engineCard h2,
.engineCard h3,
.campaignItem strong,
.activityItem strong,
.customerItem strong {
  color: #111315 !important;
  -webkit-text-fill-color: #111315 !important;
  background: transparent !important;
  background-image: none !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}

.previewMsg h1,
.previewMsg h2,
.previewMsg h3,
.previewMsg h4,
.previewMsg strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: transparent !important;
  background-image: none !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}

.previewMsg p,
.previewMsg span:not(.tag) {
  color: rgba(255,255,255,.84) !important;
}

.previewMsg .tag {
  background: #fff7ed !important;
  color: #9a3412 !important;
  -webkit-text-fill-color: #9a3412 !important;
  border-color: rgba(255,237,213,.98) !important;
}

@media (max-height: 820px) and (min-width: 981px) {
  .sideBusiness {
    display: none !important;
  }
  .sidebar .brand span:last-child {
    font-size: 14px;
  }
}

@media (max-height: 690px) and (min-width: 981px) {
  .trialBox {
    display: none !important;
  }
}

@media (max-width: 980px) {
  .appShell {
    grid-template-columns: 1fr !important;
  }
  .sidebar {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .sideNav {
    overflow: visible !important;
  }
  .sideNav button {
    white-space: normal;
  }
}

/* LocalSpin v13: permanent fixed sidebar + campaign layout hardening */
:root {
  --dashboard-sidebar: 254px;
}

@media (min-width: 981px) {
  body:has(.appShell) {
    overflow-x: hidden;
  }

  .appShell.route,
  .appShell {
    display: block !important;
    min-height: 100vh !important;
    background: linear-gradient(180deg, #f7f2ea, #fff8ef) !important;
    overflow: visible !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: var(--dashboard-sidebar) !important;
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    z-index: 100 !important;
    padding: 16px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 18px 0 44px rgba(17, 24, 39, .08) !important;
  }

  .mainApp {
    margin-left: var(--dashboard-sidebar) !important;
    width: calc(100% - var(--dashboard-sidebar)) !important;
    min-height: 100vh !important;
    min-width: 0 !important;
    padding: 24px 28px 54px !important;
  }

  .sideNav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px !important;
    margin-right: -4px !important;
    max-height: none !important;
  }

  .sideFooter {
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
    margin-top: 8px !important;
    background: transparent !important;
  }

  .sideNav button {
    min-height: 31px !important;
    line-height: 1.05 !important;
  }
}

.campaignCenterGrid,
.campaignCommandPanel,
.campaignCommandList,
.sendCampaignCard,
.sendStats,
.messagePreviewCard,
.messageMetaGrid,
.panel {
  min-width: 0 !important;
}

.campaignCenterGrid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .82fr) !important;
}

.sendCampaignCard h3,
.messagePreviewCard h3,
.messagePreviewCard p,
.sendCampaignCard p,
.sendStats strong,
.messageMetaGrid strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.sendCampaignCard h3 {
  color: #0f1115 !important;
  -webkit-text-fill-color: #0f1115 !important;
  font-size: clamp(21px, 1.55vw, 25px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
}

.messagePreviewCard h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(22px, 1.9vw, 28px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.04em !important;
  max-width: 100% !important;
}

.messagePreviewCard {
  overflow: visible !important;
}

.messagePreviewCard .eyebrow {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  color: #9a3412 !important;
  -webkit-text-fill-color: #9a3412 !important;
  background: #fffaf3 !important;
  border-color: rgba(255, 237, 213, .95) !important;
  text-shadow: none !important;
}

.messageMetaGrid span,
.sendStats span {
  min-width: 0 !important;
}

.messageMetaGrid strong,
.sendStats strong {
  display: block !important;
}

@media (max-width: 1420px) and (min-width: 981px) {
  .campaignCenterGrid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 980px) {
  .mainApp {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .campaignCenterGrid {
    grid-template-columns: 1fr !important;
  }
}

/* LocalSpin v15: launch checklist and ROI snapshot */
.launchSection {
  margin-bottom: 18px;
}
.launchChecklist,
.roiPanel {
  min-height: 100%;
}
.launchProgress {
  height: 12px;
  border-radius: 999px;
  background: #fff3e7;
  border: 1px solid rgba(255, 122, 26, .14);
  overflow: hidden;
  margin-bottom: 16px;
}
.launchProgress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, #ff6b23, #ff3d6e 62%, #8b5cf6);
  box-shadow: 0 10px 24px rgba(255, 84, 48, .24);
}
.launchSteps {
  display: grid;
  gap: 10px;
}
.launchStep {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  background: #fffaf3;
  border-radius: 20px;
  padding: 12px;
}
.launchStep.done {
  background: linear-gradient(135deg, rgba(32, 196, 123, .08), rgba(255, 250, 243, .98));
  border-color: rgba(32, 196, 123, .20);
}
.stepDot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  color: #9a3412;
  font-weight: 950;
}
.launchStep.done .stepDot {
  background: #dcfce7;
  border-color: rgba(32, 196, 123, .24);
  color: #067647;
}
.launchStep strong {
  display: block;
  color: var(--ink) !important;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -.02em;
}
.launchStep p {
  font-size: 12.5px;
  line-height: 1.45;
}
.launchStep .miniBtn {
  min-height: 34px;
  padding: 8px 10px;
  white-space: nowrap;
}
.roiGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.roiCard {
  border: 1px solid var(--line);
  background: #fffaf3;
  border-radius: 22px;
  padding: 15px;
  display: grid;
  gap: 5px;
}
.roiCard span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.roiCard strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 28px;
  letter-spacing: -.06em;
}
.roiCard small {
  font-size: 11.5px;
  line-height: 1.35;
}
.roiNote {
  margin-top: 14px;
  border-radius: 18px;
  padding: 13px 14px;
  color: #7c2d12;
  background: #fff7ed;
  border: 1px solid rgba(255, 122, 26, .16);
  font-size: 13px;
  font-weight: 850;
}
@media (max-width: 760px) {
  .launchStep {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .launchStep .miniBtn {
    grid-column: 2;
    width: fit-content;
  }
  .roiGrid {
    grid-template-columns: 1fr;
  }
}

/* LocalSpin v17-v18: premium QR print kit + review-first customer flow */
.reviewFirstPlay { overflow: hidden; }
.reviewGate { display: grid; gap: 18px; text-align: center; }
.reviewGate h1 { font-size: clamp(34px, 7vw, 58px); }
.reviewSteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 4px 0;
}
.reviewSteps span {
  min-height: 52px;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  font-weight: 950;
  color: var(--dark);
  font-size: 12px;
}
.formDivider {
  padding: 16px;
  border-radius: 18px;
  background: #fff7ed;
  border: 1px solid rgba(255,122,26,.18);
  display: grid;
  gap: 4px;
}
.formDivider strong { color: var(--dark); font-size: 16px; }
.formDivider span { color: var(--muted); font-weight: 750; font-size: 13px; }
.printCopyEditor {
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.printCopyEditor textarea,
.formGrid textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 18px;
  padding: 14px 15px;
  outline: none;
  resize: vertical;
  min-height: 88px;
  font-weight: 750;
}
.printCopyEditor textarea:focus,
.formGrid textarea:focus,
.printCopyEditor input:focus,
.formGrid input:focus { border-color: rgba(255,122,26,.54); box-shadow: 0 0 0 4px rgba(255,122,26,.10); }
.premiumQrBox { align-items: center; }
.qrFrame {
  display: grid;
  gap: 10px;
  place-items: center;
  background: linear-gradient(145deg, #111827, #1d1721);
  padding: 18px;
  border-radius: 28px;
  box-shadow: 0 20px 48px rgba(17,24,39,.20);
}
.qrFrame .qrImage { background: #fff; border-radius: 20px; padding: 10px; }
.qrFrame span { color: #fff; font-weight: 950; font-size: 13px; }
.qrIntegrity {
  margin-top: 14px;
  display: grid;
  gap: 3px;
  padding: 13px 14px;
  border-radius: 16px;
  background: #ecfdf5;
  border: 1px solid rgba(21,166,103,.18);
}
.qrIntegrity strong { color: #047857; font-size: 13px; }
.qrIntegrity span { color: #065f46; font-weight: 800; font-size: 12px; }
.premiumKitGrid .printAsset { overflow: hidden; }
.premiumPrint,
.premiumPoster,
.premiumStory,
.premiumReceipt {
  min-height: 260px;
}
.tableTentPreview.premiumPrint {
  background: #fffaf3;
  display: grid;
  gap: 10px;
  place-items: center;
  border-radius: 22px;
  padding: 18px;
  border: 1px solid var(--line);
}
.tableTentPreview.premiumPrint strong,
.premiumPoster h4,
.premiumStory h4 { font-size: 28px; letter-spacing: -.06em; color: var(--dark); line-height: .95; }
.tableTentPreview.premiumPrint p,
.premiumPoster p,
.premiumStory p { color: var(--muted); font-size: 14px; font-weight: 750; }
.premiumPoster {
  display: grid;
  place-items: center;
  gap: 12px;
  border-radius: 24px;
  padding: 20px;
  background: radial-gradient(circle at top left, rgba(255,122,26,.18), transparent 190px), #fff;
  border: 1px solid var(--line);
  text-align: center;
}
.premiumStory {
  display: grid;
  place-items: center;
  gap: 12px;
  border-radius: 24px;
  padding: 20px;
  background: radial-gradient(circle at top left, rgba(255,255,255,.30), transparent 170px), linear-gradient(145deg, var(--orange), var(--rose), var(--purple));
  color: #fff;
  text-align: center;
}
.premiumStory h4,
.premiumStory p,
.premiumStory span { color: #fff; }
.premiumReceipt {
  background: #fff;
  border: 1px dashed rgba(17,24,39,.38);
  border-radius: 22px;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 10px;
}
.premiumReceipt span { color: var(--dark); font-weight: 950; }
.premiumReceipt code { word-break: break-all; color: var(--muted); font-size: 11px; }
.enhancedResult { gap: 16px; }
.referralBoost {
  background: radial-gradient(circle at top left, rgba(255,122,26,.18), transparent 220px), #fff7ed;
  border: 1px solid rgba(255,122,26,.22);
}
.referralBoost strong { display: block; font-size: 22px; letter-spacing: -.04em; color: var(--dark); }
.referralBoost b { color: var(--dark); }
.miniList { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 4px; font-size: 13px; font-weight: 800; }
@media (max-width: 720px) {
  .reviewSteps { grid-template-columns: 1fr; }
  .qrFrame .qrImage { width: 210px; height: 210px; }
}

/* LocalSpin v18: review/referral funnel analytics + launch guard */
.funnelPanel {
  margin: 22px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 3% 0%, rgba(255, 122, 26, .10), transparent 260px),
    #fff;
}
.funnelTrack {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.funnelStep {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 118px;
  border: 1px solid rgba(21,18,14,.11);
  border-radius: 24px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(255, 122, 26, .13), rgba(255,255,255,.96) 58%),
    #fffaf3;
  box-shadow: 0 12px 28px rgba(17,24,39,.06);
  overflow: hidden;
}
.funnelStep::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--w);
  height: 5px;
  background: linear-gradient(135deg, #ff7a1a, #ee4266, #7c3aed);
}
.funnelStep span {
  display: block;
  color: var(--muted);
  font-weight: 950;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.funnelStep strong {
  display: block;
  margin-top: 6px;
  color: var(--dark);
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 42px);
  letter-spacing: -.07em;
  line-height: .9;
}
.funnelStep small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}
.funnelStep b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 15px;
}
.funnelNote {
  margin-top: 14px;
  border: 1px solid rgba(21, 166, 103, .18);
  background: #ecfdf5;
  color: #065f46;
  border-radius: 18px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 800;
}
.funnelNote strong { color: #047857; }
.reviewSafetyCard {
  display: grid;
  grid-template-columns: 1.1fr .7fr .7fr;
  gap: 10px;
  align-items: stretch;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid rgba(21, 166, 103, .18);
  background: linear-gradient(135deg, rgba(236,253,245,.96), rgba(255,250,243,.96));
}
.reviewSafetyCard > div {
  border: 1px solid rgba(21,18,14,.08);
  background: rgba(255,255,255,.74);
  border-radius: 17px;
  padding: 12px;
  display: grid;
  gap: 4px;
}
.reviewSafetyCard strong {
  color: var(--dark);
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: -.05em;
}
.reviewSafetyCard span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.reviewSafetyCard p {
  grid-column: 1 / -1;
  margin: 0;
  color: #065f46;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 800;
}
@media (max-width: 1120px) {
  .funnelTrack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funnelStep:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .funnelTrack { grid-template-columns: 1fr; }
  .reviewSafetyCard { grid-template-columns: 1fr; }
  .reviewSafetyCard p { grid-column: auto; }
}

/* v20: simplified owner dashboard, reward cost controls, referral codes and ROI */
.compactOverviewGrid { align-items: start; }
.simpleFunnelPanel { margin-bottom: 20px; }
.simpleFunnelGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.simpleFunnelCard {
  border: 1px solid rgba(21,18,14,.09);
  background: linear-gradient(180deg, #fff, #fff8ee);
  border-radius: 24px;
  padding: 20px;
  min-height: 132px;
  display: grid;
  align-content: space-between;
  box-shadow: 0 12px 34px rgba(17,24,39,.06);
}
.simpleFunnelCard span,
.simpleFunnelCard small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}
.simpleFunnelCard strong {
  color: var(--dark);
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 50px);
  line-height: .9;
  letter-spacing: -.07em;
}

.simpleFunnelCard.roiFunnelCard {
  background: linear-gradient(135deg, #111827, #263244 56%, #ff7a1a);
  border-color: rgba(255,122,26,.35);
  box-shadow: 0 18px 46px rgba(255,122,26,.18);
}
.simpleFunnelCard.roiFunnelCard span,
.simpleFunnelCard.roiFunnelCard small,
.simpleFunnelCard.roiFunnelCard strong {
  color: #fff;
}
.simpleFunnelCard.roiFunnelCard small { opacity: .82; }
.funnelNote.compact { margin-top: 12px; }
.launchDock {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: min(390px, calc(100vw - 44px));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border-radius: 26px;
  padding: 16px;
  background: rgba(17, 24, 39, .94);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 80px rgba(17,24,39,.28);
  backdrop-filter: blur(18px);
}
.launchDock strong {
  display: block;
  font-family: var(--display);
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.05em;
  color: #fff;
}
.launchDock p {
  margin: 4px 0 10px;
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.35;
}
.launchDock .eyebrow { color: var(--amber); }
.launchProgress.mini {
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
}
.launchProgress.mini span { display:block; height:100%; background: linear-gradient(90deg, var(--orange), var(--amber)); }
.rewardHeaderRow,
.rewardRow {
  display: grid;
  grid-template-columns: 1.35fr .55fr .65fr 42px;
  gap: 8px;
  align-items: center;
}
.rewardHeaderRow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 0 4px;
}
.rewardCostPanel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(21,18,14,.09);
  background: #fffaf3;
  border-radius: 24px;
  padding: 14px;
}
.costSummaryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.costTable {
  display: grid;
  gap: 6px;
}
.costTableHead,
.costTable > div {
  display: grid;
  grid-template-columns: 1fr 72px 84px;
  gap: 10px;
  align-items: center;
}
.costTableHead {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.costTable > div:not(.costTableHead) {
  border: 1px solid rgba(21,18,14,.08);
  background: #fff;
  border-radius: 15px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 850;
}
.costTable strong { color: var(--dark); }
.mutedLine { color: var(--muted); font-weight: 800; margin: 0; }
.referralMetrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.referralPreview h3,
.referralBoost strong {
  color: var(--dark);
  font-family: var(--display);
  font-size: 36px;
  letter-spacing: -.07em;
}
.referralCodeBox code {
  font-size: 22px;
  letter-spacing: .06em;
  color: var(--dark);
  font-weight: 950;
}
.bonusRewardCard {
  border: 1px solid rgba(21,166,103,.22);
  background: linear-gradient(135deg, #ecfdf5, #fff);
  color: var(--dark);
  border-radius: 24px;
  padding: 16px;
  display: grid;
  gap: 8px;
  text-align: left;
}
.bonusRewardCard strong {
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: -.05em;
}
.bonusRewardCard p { margin: 0; color: #065f46; font-weight: 800; }
.couponCode.smallCode { font-size: 22px; padding: 12px; }
.playForm label small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}
@media (max-width: 1180px) {
  .simpleFunnelGrid,
  .referralMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .costSummaryGrid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .simpleFunnelGrid,
  .referralMetrics { grid-template-columns: 1fr; }
  .rewardHeaderRow { display: none; }
  .rewardRow { grid-template-columns: 1fr; }
  .costTableHead,
  .costTable > div { grid-template-columns: 1fr; }
  .launchDock { grid-template-columns: 1fr; left: 14px; right: 14px; bottom: 14px; width: auto; }
}

/* v21 operational readiness */
.operationsBox {
  border: 1px solid rgba(17, 24, 39, .1);
  background: linear-gradient(135deg, #fffaf3, #ffffff);
  border-radius: 22px;
  padding: 18px;
  display: grid;
  gap: 14px;
}
.operationsBox small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.budgetBar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(17, 24, 39, .08);
  border: 1px solid rgba(17, 24, 39, .08);
}
.budgetBar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--amber), var(--orange));
  border-radius: inherit;
  min-width: 4px;
}
.goLivePanel {
  overflow: hidden;
}
.goLiveHero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 22px;
  border-radius: 26px;
  background: radial-gradient(circle at top right, rgba(255, 122, 26, .18), transparent 34%), linear-gradient(135deg, #111827, #1f2937);
  color: #fff;
  margin-bottom: 18px;
}
.goLiveHero h3,
.goLiveHero .eyebrow,
.goLiveHero p { color: #fff; }
.goLiveHero p { opacity: .78; max-width: 700px; }
.launchScoreCircle {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.06);
}
.launchScoreCircle strong {
  font-family: var(--display);
  font-size: 34px;
  letter-spacing: -.06em;
  color: #fff;
}
.launchScoreCircle span {
  color: rgba(255,255,255,.74);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.readinessGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.readinessItem {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(17,24,39,.09);
  border-radius: 18px;
  padding: 12px;
  background: #fff;
  color: var(--dark);
  font-weight: 900;
}
.readinessItem strong {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(17,24,39,.07);
  color: var(--muted);
}
.readinessItem.ready {
  background: #f0fdf4;
  border-color: rgba(21,166,103,.22);
}
.readinessItem.ready strong {
  background: var(--green);
  color: #fff;
}
@media (max-width: 980px) {
  .readinessGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .goLiveHero { grid-template-columns: 1fr; }
  .launchScoreCircle { width: 96px; height: 96px; }
}
@media (max-width: 620px) {
  .readinessGrid { grid-template-columns: 1fr; }
}

/* v22: owner-facing readiness cleanup + mobile/tablet polish */
.goLiveHero .goLiveEyebrow,
.goLiveHero .eyebrow {
  background: rgba(255, 255, 255, .13) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(255, 255, 255, .20) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.goLiveHero h3,
.goLiveHero p,
.goLiveHero strong,
.goLiveHero span {
  -webkit-text-fill-color: currentColor;
}
.goLivePanel .panelHead span {
  color: var(--muted) !important;
}

/* Better tablet dashboard layout */
@media (max-width: 1180px) {
  .contentGrid,
  .contentGrid.compactOverviewGrid {
    grid-template-columns: 1fr !important;
  }
  .metricsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .simpleFunnelGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .panelHead {
    align-items: flex-start !important;
  }
}

/* Tablet/mobile app shell: keep navigation usable without stealing vertical space */
@media (max-width: 980px) {
  .appShell {
    display: block !important;
    grid-template-columns: 1fr !important;
    min-height: 100dvh !important;
  }
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    border-radius: 0 0 24px 24px !important;
    box-shadow: 0 18px 42px rgba(17, 24, 39, .22) !important;
  }
  .sidebar .brand {
    min-height: 34px !important;
  }
  .sideBusiness {
    display: none !important;
  }
  .sideNav {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    min-height: auto !important;
    padding: 2px 0 7px !important;
    scrollbar-width: none !important;
  }
  .sideNav::-webkit-scrollbar { display: none !important; }
  .sideNav button {
    width: auto !important;
    min-width: max-content !important;
    min-height: 35px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
    font-size: 12.5px !important;
  }
  .sideFooter {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 0 !important;
  }
  .trialBox {
    display: none !important;
  }
  .sideFooter .secondaryBtn,
  .sideFooter .ghostBtn,
  .sideFooter .primaryBtn {
    flex: 1 1 118px !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
  }
  .mainApp {
    padding: 20px 14px 110px !important;
    min-height: auto !important;
  }
  .dashHeader {
    display: grid !important;
    gap: 14px !important;
  }
  .dashHeader h1 {
    font-size: clamp(34px, 7vw, 48px) !important;
  }
  .headerActions {
    justify-content: flex-start !important;
  }
  .contentGrid,
  .gridTwo,
  .authLayout,
  .twoCol,
  .threeCol,
  .moduleGrid,
  .engineGrid,
  .featureGrid,
  .testimonialGrid,
  .stepGrid,
  .pricingGrid,
  .qrLaunchBox,
  .printKitLayout,
  .campaignLayout,
  .staffLayout,
  .referralMetrics,
  .costSummaryGrid {
    grid-template-columns: 1fr !important;
  }
  .panel {
    border-radius: 28px !important;
  }
  .tableWrap {
    overflow-x: auto !important;
  }
}

/* Customer wheel: optimized for phones and tablets */
@media (max-width: 760px) {
  .topbar {
    width: calc(100% - 24px) !important;
    padding: 14px 0 !important;
  }
  .topbar .ghostBtn,
  .topbar nav {
    display: none !important;
  }
  .hero,
  .authLayout {
    width: calc(100% - 24px) !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .heroCopy h1,
  .authAside h1 {
    font-size: clamp(42px, 13vw, 64px) !important;
  }
  .playShell {
    min-height: 100svh !important;
    place-items: start center !important;
    padding: 76px 12px 18px !important;
    overflow-x: hidden !important;
  }
  .playTop {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    gap: 8px !important;
  }
  .playTop .brand span:last-child {
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .playTop .secondaryBtn,
  .playTop .ghostBtn {
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .playCard {
    width: 100% !important;
    max-width: 460px !important;
    padding: 20px !important;
    border-radius: 30px !important;
  }
  .playCard h1 {
    font-size: clamp(32px, 10vw, 46px) !important;
    line-height: .94 !important;
  }
  .playCard > p,
  .playCard p {
    font-size: 14px !important;
    line-height: 1.48 !important;
  }
  .bigPrizeWheel,
  .bigWheel {
    --wheel-size: min(76vw, 276px) !important;
    width: min(76vw, 276px) !important;
    height: min(76vw, 276px) !important;
    margin: 16px auto !important;
  }
  .phonePrizeWheel,
  .previewPrizeWheel {
    --wheel-size: min(68vw, 224px) !important;
  }
  .wheelText {
    font-size: calc(var(--wheel-size) * .058) !important;
    max-width: calc(var(--wheel-size) * .25) !important;
  }
  .wheelCenter strong {
    font-size: calc(var(--wheel-size) * .082) !important;
  }
  .wheelCenter small {
    font-size: calc(var(--wheel-size) * .04) !important;
  }
  .playForm,
  .resultBox,
  .referralCard {
    gap: 10px !important;
  }
  .playForm input,
  .playForm select,
  .playForm textarea {
    min-height: 48px !important;
    font-size: 16px !important;
  }
  .couponCode {
    font-size: clamp(22px, 7vw, 34px) !important;
    padding: 14px !important;
  }
  .simpleFunnelGrid,
  .metricsGrid,
  .readinessGrid {
    grid-template-columns: 1fr !important;
  }
  .goLiveHero {
    padding: 18px !important;
    border-radius: 24px !important;
  }
  .launchScoreCircle {
    width: 88px !important;
    height: 88px !important;
  }
}

@media (max-width: 430px) {
  .mainApp {
    padding: 16px 10px 100px !important;
  }
  .panel {
    padding: 16px !important;
    border-radius: 24px !important;
  }
  .panelHead {
    display: grid !important;
    gap: 6px !important;
  }
  .panelHead h2 {
    font-size: 24px !important;
  }
  .playShell {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .playCard {
    padding: 16px !important;
    border-radius: 26px !important;
  }
  .bigPrizeWheel,
  .bigWheel {
    --wheel-size: min(82vw, 250px) !important;
    width: min(82vw, 250px) !important;
    height: min(82vw, 250px) !important;
  }
  .wheelText {
    display: none !important;
  }
  .resultActions,
  .billingActions {
    grid-template-columns: 1fr !important;
  }
  .sideFooter .secondaryBtn,
  .sideFooter .ghostBtn {
    flex: 1 1 100% !important;
  }
}

/* LocalSpin v23: professional mobile owner navigation with bottom action bar */
.mobileDock,
.mobileMenuBackdrop,
.mobileCloseBtn {
  display: none;
}

.sidebarTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
}
.sidebarTop .brand {
  min-width: 0;
}

@media (max-width: 980px) {
  body:has(.appShell) {
    padding-bottom: env(safe-area-inset-bottom);
    background: #f6efe5 !important;
  }
  .appShell.route,
  .appShell {
    display: block !important;
    min-height: 100dvh !important;
    background: linear-gradient(180deg, #f7f2ea, #fff8ef) !important;
    overflow: visible !important;
  }
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 300 !important;
    width: min(86vw, 330px) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 14px !important;
    gap: 12px !important;
    border-radius: 0 30px 30px 0 !important;
    border-right: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 32px 0 80px rgba(17, 24, 39, .34) !important;
    overflow: hidden !important;
    transform: translateX(-108%) !important;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1) !important;
  }
  .sidebar.mobileOpen {
    transform: translateX(0) !important;
  }
  .sidebarTop {
    display: flex !important;
  }
  .mobileCloseBtn {
    display: inline-grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #fff !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }
  .sideBusiness {
    display: grid !important;
  }
  .sideNav {
    display: grid !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    gap: 7px !important;
    padding: 4px 2px 8px 0 !important;
    margin: 0 -3px 0 0 !important;
    scrollbar-width: thin !important;
  }
  .sideNav button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 39px !important;
    padding: 0 12px !important;
    white-space: normal !important;
    font-size: 13px !important;
    text-align: left !important;
  }
  .sideFooter {
    display: grid !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  .trialBox {
    display: grid !important;
    padding: 12px !important;
    border-radius: 17px !important;
  }
  .trialBox strong {
    font-size: 22px !important;
  }
  .sideFooter .secondaryBtn,
  .sideFooter .ghostBtn,
  .sideFooter .primaryBtn {
    width: 100% !important;
    flex: none !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
  }
  .mobileMenuBackdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 250 !important;
    background: rgba(12, 13, 16, .48) !important;
    border: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .22s ease !important;
  }
  .mobileMenuBackdrop.show {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .mobileDock {
    display: grid !important;
    grid-template-columns: 1fr 1.25fr 1fr !important;
    gap: 10px !important;
    align-items: center !important;
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    z-index: 220 !important;
    padding: 10px !important;
    border-radius: 28px !important;
    background: rgba(255, 253, 250, .92) !important;
    border: 1px solid rgba(21,18,14,.10) !important;
    box-shadow: 0 20px 60px rgba(17, 24, 39, .20) !important;
    backdrop-filter: blur(18px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  }
  .mobileDock button {
    border: 0 !important;
    cursor: pointer !important;
  }
  .mobileDockBtn,
  .mobileDockRedeem {
    min-height: 58px !important;
    border-radius: 21px !important;
    display: grid !important;
    place-items: center !important;
    gap: 2px !important;
    text-align: center !important;
    font-weight: 950 !important;
  }
  .mobileDockBtn {
    background: #fff !important;
    color: #17130f !important;
    border: 1px solid rgba(21,18,14,.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(17,24,39,.06) !important;
  }
  .mobileDockBtn.active {
    background: #17130f !important;
    color: #fff !important;
  }
  .mobileDockBtn strong,
  .mobileDockRedeem strong {
    font-size: 12px !important;
    line-height: 1.05 !important;
  }
  .mobileDockBtn small {
    color: var(--muted) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .mobileDockBtn.active small { color: rgba(255,255,255,.66) !important; }
  .mobileDockRedeem {
    color: #fff !important;
    background: linear-gradient(135deg, #ff6534, #fb2c83 55%, #8b5cf6) !important;
    box-shadow: 0 16px 34px rgba(251, 44, 131, .30) !important;
    transform: translateY(-7px) !important;
    align-content: center !important;
    gap: 3px !important;
    padding: 8px 7px !important;
  }
  .mobileDockRedeem strong {
    font-size: 13px !important;
    color: #fff !important;
    letter-spacing: -.02em !important;
  }
  .mobileDockRedeem small {
    color: rgba(255,255,255,.78) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }
  .hamburgerIcon {
    width: 22px !important;
    height: 16px !important;
    display: grid !important;
    gap: 4px !important;
    align-items: center !important;
  }
  .hamburgerIcon i {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
  }
  .dashboardIcon {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
    align-items: stretch !important;
  }
  .dashboardIcon i {
    display: block !important;
    border-radius: 6px !important;
    background: currentColor !important;
    opacity: .9 !important;
  }
  .redeemIcon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255,255,255,.20) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
  .mainApp {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 20px 14px 112px !important;
  }
}

@media (max-width: 430px) {
  .mobileDock {
    grid-template-columns: .9fr 1.18fr .9fr !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 24px !important;
  }
  .mobileDockBtn,
  .mobileDockRedeem {
    min-height: 54px !important;
    border-radius: 18px !important;
  }
  .mobileDockBtn small {
    display: none !important;
  }
  .mobileDockRedeem {
    transform: translateY(-7px) !important;
  }
  .redeemIcon {
    width: 25px !important;
    height: 25px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }
  .mobileDockRedeem small {
    font-size: 9px !important;
  }
  .sidebar {
    width: min(90vw, 320px) !important;
  }
}

/* LocalSpin v25: publish-ready staff/mobile polish */
.staffHero .eyebrow {
  background: rgba(255,255,255,.96) !important;
  color: #9a3412 !important;
  border-color: rgba(255,255,255,.55) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
}
.staffHero .eyebrow::selection,
.staffHero .eyebrow *::selection {
  background: rgba(255,122,26,.28) !important;
  color: #111827 !important;
}
@media (max-width: 980px) {
  .mobileDock {
    grid-template-columns: 1fr 1.12fr 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 25px !important;
    align-items: stretch !important;
  }
  .mobileDockBtn,
  .mobileDockRedeem {
    min-height: 58px !important;
    height: 58px !important;
    border-radius: 19px !important;
    padding: 7px 8px !important;
    transform: none !important;
    align-content: center !important;
    justify-content: center !important;
    place-items: center !important;
    overflow: hidden !important;
  }
  .mobileDockRedeem {
    gap: 2px !important;
    box-shadow: 0 10px 24px rgba(251, 44, 131, .28) !important;
  }
  .mobileDockRedeem strong,
  .mobileDockBtn strong {
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  .mobileDockRedeem small,
  .mobileDockBtn small {
    font-size: 9px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  .redeemIcon {
    width: 23px !important;
    height: 23px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }
}
@media (max-width: 380px) {
  .mobileDock {
    gap: 6px !important;
    padding: 7px !important;
    border-radius: 22px !important;
  }
  .mobileDockBtn,
  .mobileDockRedeem {
    min-height: 54px !important;
    height: 54px !important;
    border-radius: 17px !important;
  }
  .mobileDockRedeem small,
  .mobileDockBtn small { display: none !important; }
}

    

/* LocalSpin v26: online/mobile polish and production auth cleanup */
:root { --mobile-radius: 22px; }
@media (max-width: 760px) {
  body { overflow-x: hidden; }
  p { font-size: 14px !important; line-height: 1.5 !important; }
  h1 { font-size: clamp(34px, 10vw, 48px) !important; line-height: 1.02 !important; }
  h2 { font-size: clamp(26px, 8vw, 36px) !important; line-height: 1.05 !important; }
  h3 { font-size: 21px !important; line-height: 1.08 !important; }
  .siteShell { overflow: visible !important; }
  .section { padding: 42px 0 !important; }
  .sectionHeader { gap: 10px !important; margin-bottom: 16px !important; }
  .hero { padding: 28px 0 34px !important; gap: 22px !important; }
  .heroCopy { gap: 14px !important; }
  .heroCopy p { font-size: 15px !important; }
  .pill, .eyebrow { padding: 7px 10px !important; font-size: 11px !important; }
  .primaryBtn, .secondaryBtn, .ghostBtn { min-height: 44px !important; padding: 0 16px !important; }
  .card, .engineCard, .testimonial, .stepCard, .pricingCard, .faqCard, .formCard, .panel, .metricCard, .moduleCard, .authAside, .previewCard { border-radius: 22px !important; }
  .engineCard, .testimonial, .stepCard, .pricingCard, .faqCard { padding: 18px !important; min-height: auto !important; }
  .darkBand { padding: 24px 18px !important; border-radius: 28px !important; }
  .priceBig { font-size: 56px !important; }
}
.landingMenuButton { display: none; }
.landingTopbar { isolation: isolate; }
@media (max-width: 760px) {
  .landingTopbar {
    width: calc(100% - 24px) !important;
    padding: 12px 0 !important;
    z-index: 120 !important;
  }
  .landingTopbar .brand { position: relative; z-index: 2; }
  .landingMenuButton {
    display: inline-grid !important;
    place-items: center !important;
    gap: 4px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: var(--dark) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 10px 24px rgba(17,24,39,.08) !important;
    position: relative !important;
    z-index: 3 !important;
  }
  .landingMenuButton span { display: block; width: 19px; height: 2px; border-radius: 999px; background: currentColor; }
  .landingTopbar .landingNav {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    padding: 12px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 22px 56px rgba(17,24,39,.14) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .landingTopbar.menuOpen .landingNav { display: grid !important; }
  .landingTopbar .landingNav .navLink,
  .landingTopbar .landingNav .ghostBtn,
  .landingTopbar .landingNav .primaryBtn {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    min-height: 42px !important;
  }
}
@media (max-width: 760px) {
  .authShell { padding: 14px 12px 24px !important; }
  .authTop { margin-bottom: 18px !important; }
  .authLayout { width: 100% !important; gap: 14px !important; }
  .authAside { min-height: auto !important; padding: 20px !important; gap: 12px !important; }
  .authAside h1 { font-size: clamp(32px, 10vw, 42px) !important; }
  .authAside p { font-size: 14px !important; }
  .authAside .trustRow { gap: 7px !important; }
  .authAside .trustRow span { padding: 8px 10px !important; font-size: 12px !important; }
  .formCard.authCompact { padding: 18px !important; gap: 12px !important; }
  .formCard h2 { font-size: 32px !important; }
  label, .fieldLabel { gap: 6px !important; font-size: 13px !important; }
  input, select, textarea { min-height: 44px !important; border-radius: 14px !important; padding: 0 12px !important; font-size: 14px !important; }
  textarea { padding: 12px !important; min-height: 84px !important; }
}
@media (max-width: 760px) {
  .mainApp .dashHeader { margin-bottom: 14px !important; }
  .mainApp .dashHeader h1 { font-size: clamp(28px, 8vw, 40px) !important; }
  .mainApp .dashHeader p { font-size: 13px !important; }
  .overviewQuickActions { display: none !important; }
  .simpleFunnelPanel { padding: 16px !important; }
  .simpleFunnelGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
  .simpleFunnelCard { min-height: 92px !important; padding: 13px !important; border-radius: 18px !important; }
  .simpleFunnelCard strong { font-size: 25px !important; }
  .funnelNote { font-size: 12px !important; }
}
.launchDockV26 {
  position: fixed !important;
  left: max(18px, env(safe-area-inset-left)) !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(104px, calc(22px + env(safe-area-inset-bottom))) !important;
  z-index: 210 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 12px !important;
  width: min(720px, calc(100vw - 36px)) !important;
  margin: 0 auto !important;
  padding: 16px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 22px 70px rgba(17,24,39,.18) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
.launchDockClose {
  position: absolute !important;
  right: 10px !important;
  top: 10px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: #f3f4f6 !important;
  color: #111827 !important;
  font-weight: 950 !important;
}
.launchDockMain { display: grid; gap: 8px; min-width: 0; padding-right: 22px; }
.launchDockMain strong { color: var(--dark); font-size: 20px; letter-spacing: -.04em; }
.launchDockMain p { font-size: 13px !important; }
.launchMiniSteps { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.launchMiniSteps span { display: flex; gap: 6px; align-items: center; padding: 7px 8px; border-radius: 12px; background: #fff7ed; color: #7c2d12; font-size: 12px; font-weight: 900; min-width: 0; }
.launchMiniSteps span.done { background: #ecfdf5; color: #047857; }
.launchDockAction { display: grid; align-items: end; }
@media (max-width: 760px) {
  .launchDockV26 {
    grid-template-columns: 1fr !important;
    bottom: max(96px, calc(18px + env(safe-area-inset-bottom))) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    padding: 14px !important;
    max-height: 48svh !important;
    overflow-y: auto !important;
  }
  .launchMiniSteps { grid-template-columns: 1fr !important; }
  .launchMiniSteps span { font-size: 11px !important; padding: 6px 8px !important; }
  .launchDockAction .primaryBtn { width: 100% !important; }
}
.rewardHeaderRow { display: none !important; }
.rewardRows { gap: 12px !important; }
.rewardCardRow {
  display: grid !important;
  grid-template-columns: minmax(0,1.45fr) minmax(90px,.7fr) minmax(100px,.75fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.72) !important;
}
.rewardField { display: grid !important; gap: 6px !important; }
.rewardField span { font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--muted) !important; font-weight: 950 !important; }
.rewardField input { min-height: 42px !important; }
.removeRewardBtn { min-height: 42px !important; align-self: end !important; }
@media (max-width: 760px) {
  .rewardCardRow { grid-template-columns: 1fr 1fr !important; gap: 9px !important; padding: 12px !important; }
  .rewardField.rewardLabel { grid-column: 1 / -1 !important; }
  .removeRewardBtn { grid-column: 1 / -1 !important; width: 100% !important; }
  .operationsBox .twoCol, .printCopyEditor .twoCol { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .qrLaunchBox { gap: 14px !important; padding: 14px !important; }
  .qrFrame { padding: 14px !important; border-radius: 22px !important; }
  .qrFrame .qrImage { width: min(220px, 70vw) !important; height: min(220px, 70vw) !important; max-width: none !important; }
  .printCopyEditor { gap: 10px !important; }
  .premiumKitGrid { gap: 14px !important; }
  .printAsset { min-height: auto !important; padding: 16px !important; border-radius: 24px !important; overflow: hidden !important; }
  .assetTop h3 { font-size: 21px !important; }
  .tableTentPreview.premiumPrint, .premiumPoster, .premiumStory, .premiumReceipt { min-height: auto !important; padding: 16px !important; border-radius: 20px !important; width: 100% !important; overflow: hidden !important; }
  .tableTentPreview.premiumPrint strong, .premiumPoster h4, .premiumStory h4 { font-size: 22px !important; line-height: 1.05 !important; max-width: 100% !important; overflow-wrap: anywhere !important; }
  .premiumStory span { font-size: 10px !important; max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important; }
  .premiumStory p, .premiumPoster p, .tableTentPreview.premiumPrint p { font-size: 13px !important; overflow-wrap: anywhere !important; }
  .premiumReceipt p, .premiumReceipt code { overflow-wrap: anywhere !important; word-break: break-word !important; font-size: 12px !important; }
  .qrMini { max-width: min(150px, 46vw) !important; }
}
@media (max-width: 760px) {
  .playShell { padding: 72px 10px 18px !important; }
  .playCard { width: 100% !important; padding: 18px !important; border-radius: 24px !important; }
  .playCard h1 { font-size: clamp(30px, 9vw, 42px) !important; }
  .reviewGate { gap: 12px !important; }
  .reviewSteps span { min-height: 42px !important; font-size: 11px !important; }
  .bigPrizeWheel { transform: scale(.86); margin: -12px auto !important; }
  .playForm { gap: 10px !important; }
  .resultBox h1 { font-size: clamp(28px, 9vw, 40px) !important; }
  .couponCode { font-size: 28px !important; border-radius: 18px !important; }
  .referralCard { padding: 14px !important; }
}
@media (max-width: 430px) {
  .simpleFunnelGrid { grid-template-columns: 1fr !important; }
  .bigPrizeWheel { transform: scale(.78); margin: -24px auto !important; }
  .mobileDock { left: 8px !important; right: 8px !important; }
}


/* LocalSpin v28: premium public navigation, footer, contact and legal pages */
.publicPage { min-height: 100vh; }
.landingTopbar {
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(21,18,14,.08);
  border-radius: 999px;
  padding: 10px 12px !important;
  box-shadow: 0 18px 50px rgba(17,24,39,.08);
}
.landingNav { gap: 10px !important; }
.landingNav .navLink { min-height: 40px; padding: 0 10px; border-radius: 999px; }
.landingNav .navLink:hover { background: rgba(255,255,255,.72); }
.landingMenuButton { display: none; }
.publicFooter {
  width: min(1180px, calc(100% - 36px));
  margin: 38px auto 0;
  padding: 34px;
  border-radius: 34px 34px 0 0;
  background: rgba(17, 24, 39, .96);
  color: #fff;
  box-shadow: 0 -18px 70px rgba(17,24,39,.12);
}
.publicFooter p, .publicFooter span { color: rgba(255,255,255,.68); }
.footerGrid { display: grid; grid-template-columns: 1.2fr .8fr .8fr .8fr; gap: 28px; align-items: start; }
.footerBrandBlock { display: grid; gap: 14px; max-width: 340px; }
.footerBrandBlock .brand { color: #fff; }
.footerCol { display: grid; gap: 10px; }
.footerCol strong { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .09em; }
.footerLink {
  width: fit-content;
  padding: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  text-align: left;
}
.footerLink:hover { color: #fff; }
.footerBottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 24px;
  margin-top: 26px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 13px;
  font-weight: 800;
}
.contactHero, .legalHero {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 54px 0 48px;
}
.contactHeroInner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(390px, .82fr);
  gap: 28px;
  align-items: stretch;
}
.contactIntro {
  min-height: 520px;
  border-radius: 42px;
  padding: 42px;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,122,26,.14), transparent 18rem),
    radial-gradient(circle at 10% 92%, rgba(124,58,237,.10), transparent 18rem),
    rgba(255,255,255,.92);
  color: var(--ink);
  border: 1px solid var(--line);
  display: grid;
  align-content: start;
  gap: 26px;
  box-shadow: var(--shadow);
}
.contactIntro h1, .contactIntro h2, .contactIntro h3 { color: var(--ink); }
.contactIntro p { color: var(--muted); }
.contactIntro h1 { max-width: 540px; }
.contactInfoList { display: grid; gap: 12px; margin-top: 6px; }
.contactInfoItem {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(21,18,14,.10);
  text-decoration: none;
  color: inherit;
}
.contactInfoItem strong { display: block; color: var(--ink); font-size: 14px; margin-bottom: 3px; }
.contactInfoItem small { display: block; color: var(--muted); font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.contactInfoIcon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ff7a1a, #fb2c83 55%, #7c3aed);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(251,44,131,.18);
}
.contactMiniGrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.contactMiniCard {
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.contactMiniCard strong { display: block; color: #fff; margin-bottom: 6px; }
.contactFormCard {
  border-radius: 42px;
  padding: 34px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  gap: 18px;
}
.contactFormCard form { display: grid; gap: 14px; }
.legalPageWrap {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 28px;
  align-items: start;
}
.legalSidebar {
  position: sticky;
  top: 102px;
  border-radius: 32px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  padding: 22px;
  display: grid;
  gap: 10px;
}
.legalContent {
  border-radius: 36px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 38px;
  display: grid;
  gap: 22px;
}
.legalBlock { display: grid; gap: 10px; }
.legalBlock ul { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.7; }
.legalBadge {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 8px 12px;
  color: #9a3412;
  background: #fff7ed;
  border: 1px solid rgba(255,122,26,.18);
  font-weight: 950;
  font-size: 12px;
}
@media (max-width: 920px) {
  .footerGrid { grid-template-columns: 1fr 1fr; }
  .contactHeroInner, .legalPageWrap { grid-template-columns: 1fr; }
  .contactIntro { min-height: auto; }
  .legalSidebar { position: static; }
}
@media (max-width: 760px) {
  .landingTopbar {
    width: calc(100% - 24px) !important;
    top: 10px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(21,18,14,.10) !important;
    box-shadow: 0 18px 50px rgba(17,24,39,.11) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }
  .landingTopbar .brand { min-height: 44px !important; }
  .landingMenuButton {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 18px !important;
    background: #fff !important;
    color: var(--dark) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 12px 26px rgba(17,24,39,.10) !important;
  }
  .landingMenuButton span { display: block !important; width: 21px !important; height: 2px !important; border-radius: 999px !important; background: currentColor !important; transition: transform .18s ease, opacity .18s ease; }
  .landingTopbar.menuOpen .landingMenuButton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .landingTopbar.menuOpen .landingMenuButton span:nth-child(2) { opacity: 0; }
  .landingTopbar.menuOpen .landingMenuButton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .landingTopbar .landingNav {
    display: none !important;
    position: static !important;
    grid-column: 1 / -1 !important;
    margin-top: 6px !important;
    padding: 10px !important;
    border-radius: 20px !important;
    background: #fff !important;
    border: 1px solid rgba(21,18,14,.08) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.78) !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .landingTopbar.menuOpen .landingNav { display: grid !important; }
  .landingTopbar .landingNav .navLink,
  .landingTopbar .landingNav .ghostBtn,
  .landingTopbar .landingNav .primaryBtn {
    display: flex !important;
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    border-radius: 16px !important;
    font-size: 14px !important;
  }
  .landingTopbar .landingNav .navLink { background: #faf7f0 !important; color: var(--ink) !important; }
  .publicFooter { width: calc(100% - 24px); margin-top: 28px; padding: 24px 18px 96px; border-radius: 28px 28px 0 0; }
  .footerGrid { grid-template-columns: 1fr; gap: 22px; }
  .footerBottom { display: grid; gap: 10px; }
  .contactHero, .legalHero { width: calc(100% - 24px); padding: 30px 0 28px; }
  .contactIntro, .contactFormCard, .legalContent { border-radius: 28px; padding: 22px; }
  .contactMiniGrid { grid-template-columns: 1fr; }
  .contactIntro h1, .legalContent h1 { font-size: clamp(34px, 10vw, 44px) !important; }
  .legalSidebar { display: none; }
}

/* --- LocalSpin v28 extracted CSS block --- */

*{box-sizing:border-box}body{font-family:Manrope,Arial,sans-serif;margin:0;background:#f6efe6;color:#15120e}.page{width:210mm;min-height:297mm;margin:0 auto;background:#fff;padding:14mm;display:grid;gap:10mm}.row{display:grid;grid-template-columns:1fr 1fr;gap:10mm}.asset{border:1.6px solid #171717;border-radius:26px;padding:10mm;text-align:center;display:grid;gap:6mm;align-content:center;min-height:118mm;box-shadow:0 18px 48px rgba(17,24,39,.10)}.asset.dark{background:radial-gradient(circle at 10% 10%,rgba(255,122,26,.35),transparent 42mm),linear-gradient(145deg,#111827,#17111c);color:#fff;border:0}.asset h1,.asset h2,.asset h3{font-family:'Space Grotesk',Manrope,Arial,sans-serif;margin:0;line-height:.92;letter-spacing:-.06em}.asset h1{font-size:42pt}.asset h2{font-size:28pt}.asset h3{font-size:16pt}.asset p{margin:0;font-size:13pt;line-height:1.42}.asset img{width:54mm;height:54mm;margin:auto;background:#fff;padding:4mm;border-radius:18px}.receipt{font-family:Manrope,Arial,sans-serif;text-align:left;border:1px dashed #111827;border-radius:20px;padding:8mm}.receipt h3{font-size:16pt;margin:0 0 2mm}.receipt p,.receipt code{font-size:10pt;word-break:break-all}.story{min-height:145mm;background:radial-gradient(circle at top left,rgba(255,255,255,.28),transparent 42mm),linear-gradient(145deg,#ff7a1a,#ee4266,#7c3aed);color:white;border:0}.badge{display:inline-block;width:max-content;margin:auto;padding:3mm 5mm;border-radius:999px;background:#fff;color:#111827;font-size:10pt;font-weight:900}.small{font-size:9pt;opacity:.72}.url{word-break:break-all;font-size:8pt!important;opacity:.75}@media print{body{background:#fff}.page{margin:0;box-shadow:none;page-break-after:always}.noPrint{display:none}}

/* --- LocalSpin v28 extracted CSS block --- */

/* LocalSpin v28: public footer, legal/contact contrast, and mobile menu polish */
.siteShell.route {
  min-height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.siteShell.route > section,
.siteShell.route > header { flex: 0 0 auto !important; }
.publicFooter {
  width: 100% !important;
  max-width: none !important;
  margin: auto 0 0 !important;
  padding: 38px max(24px, calc((100vw - 1180px) / 2)) 42px !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, #111827, #171923 65%, #211713) !important;
  color: #fff !important;
  box-shadow: 0 -22px 80px rgba(17,24,39,.12) !important;
}
.publicFooter .footerGrid,
.publicFooter .footerBottom {
  width: min(1180px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.publicFooter .footerBottom { margin-top: 26px !important; }
.publicFooter .footerLink,
.publicFooter .footerCol strong,
.publicFooter .brand,
.publicFooter .brand span { color: #fff !important; }
.publicFooter .footerLink { opacity: .76 !important; }
.publicFooter .footerLink:hover { opacity: 1 !important; }
.publicFooter p,
.publicFooter span { color: rgba(255,255,255,.70) !important; }
.publicFooter .primaryBtn.small { color: #fff !important; }

.contactIntro .eyebrow,
.contactIntro p.eyebrow {
  color: #9a3412 !important;
  background: #fff !important;
  border: 1px solid rgba(255,122,26,.22) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.14) !important;
}
.contactFormCard .eyebrow,
.contactFormCard p.eyebrow {
  color: #9a3412 !important;
  background: #fff7ed !important;
  border-color: rgba(255,122,26,.18) !important;
}
.legalSidebar .footerLink {
  width: 100% !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  background: #fff7ed !important;
  color: #111827 !important;
  border: 1px solid rgba(255,122,26,.15) !important;
  opacity: 1 !important;
  font-weight: 950 !important;
}
.legalSidebar .footerLink:hover {
  background: #ffedd5 !important;
  color: #9a3412 !important;
}
.legalSidebar .primaryBtn.small { width: 100% !important; color: #fff !important; }
.legalContent h1,
.legalContent h2,
.legalContent h3 { color: #111827 !important; }
.legalContent p,
.legalBlock li { color: #57534e !important; }

@media (max-width: 760px) {
  .landingTopbar {
    width: calc(100% - 22px) !important;
    top: 10px !important;
    padding: 8px !important;
    border-radius: 24px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(21,18,14,.08) !important;
    box-shadow: 0 18px 50px rgba(17,24,39,.11) !important;
  }
  .landingTopbar .brand {
    min-width: 0 !important;
    min-height: 44px !important;
    padding-left: 4px !important;
  }
  .landingTopbar .brandMark { width: 40px !important; height: 40px !important; font-size: 13px !important; }
  .landingMenuButton {
    width: 46px !important;
    height: 46px !important;
    border-radius: 17px !important;
  }
  .landingTopbar .landingNav {
    grid-column: 1 / -1 !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 10px !important;
    margin-top: 4px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(21,18,14,.08) !important;
  }
  .landingTopbar .landingNav .navLink,
  .landingTopbar .landingNav .ghostBtn,
  .landingTopbar .landingNav .primaryBtn {
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
  .landingTopbar .landingNav .navLink {
    background: #faf7f0 !important;
    color: #292524 !important;
    border: 1px solid rgba(21,18,14,.04) !important;
  }
  .landingTopbar .landingNav .ghostBtn {
    background: #fff !important;
    color: #292524 !important;
    border: 1px solid #e7ded4 !important;
  }
  .landingTopbar .landingNav .primaryBtn {
    min-height: 46px !important;
    height: 46px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #ff7a1a, #ff3d6e 58%, #8b5cf6) !important;
    box-shadow: 0 14px 30px rgba(255,85,44,.22) !important;
  }
  .publicFooter {
    width: 100% !important;
    padding: 28px 18px calc(32px + env(safe-area-inset-bottom)) !important;
    margin: auto 0 0 !important;
    border-radius: 0 !important;
  }
  .publicFooter .footerGrid,
  .publicFooter .footerBottom { width: 100% !important; }
  .footerBrandBlock { max-width: none !important; }
  .footerLink { min-height: 30px !important; }
  .contactHero, .legalHero {
    width: calc(100% - 24px) !important;
    padding: 24px 0 24px !important;
  }
  .contactIntro .eyebrow { color: #9a3412 !important; }
  .contactFormCard .fieldGrid { grid-template-columns: 1fr !important; }
}

/* --- LocalSpin v28 extracted CSS block --- */

*{box-sizing:border-box}body{font-family:Manrope,Arial,sans-serif;margin:0;background:#f6efe6;color:#15120e}.page{width:210mm;min-height:297mm;margin:0 auto;background:#fff;padding:14mm;display:grid;gap:10mm}.row{display:grid;grid-template-columns:1fr 1fr;gap:10mm}.asset{border:1.6px solid #171717;border-radius:26px;padding:10mm;text-align:center;display:grid;gap:6mm;align-content:center;min-height:118mm;box-shadow:0 18px 48px rgba(17,24,39,.10)}.asset.dark{background:radial-gradient(circle at 10% 10%,rgba(255,122,26,.35),transparent 42mm),linear-gradient(145deg,#111827,#17111c);color:#fff;border:0}.asset h1,.asset h2,.asset h3{font-family:'Space Grotesk',Manrope,Arial,sans-serif;margin:0;line-height:.92;letter-spacing:-.06em}.asset h1{font-size:42pt}.asset h2{font-size:28pt}.asset h3{font-size:16pt}.asset p{margin:0;font-size:13pt;line-height:1.42}.asset img{width:54mm;height:54mm;margin:auto;background:#fff;padding:4mm;border-radius:18px}.receipt{font-family:Manrope,Arial,sans-serif;text-align:left;border:1px dashed #111827;border-radius:20px;padding:8mm}.receipt h3{font-size:16pt;margin:0 0 2mm}.receipt p,.receipt code{font-size:10pt;word-break:break-all}.story{min-height:145mm;background:radial-gradient(circle at top left,rgba(255,255,255,.28),transparent 42mm),linear-gradient(145deg,#ff7a1a,#ee4266,#7c3aed);color:white;border:0}.badge{display:inline-block;width:max-content;margin:auto;padding:3mm 5mm;border-radius:999px;background:#fff;color:#111827;font-size:10pt;font-weight:900}.small{font-size:9pt;opacity:.72}.url{word-break:break-all;font-size:8pt!important;opacity:.75}@media screen and (max-width:700px){body{overflow-x:hidden;background:#fff7ef}.page{width:100%;min-height:auto;margin:0;padding:16px;gap:16px}.row{grid-template-columns:1fr;gap:16px}.asset{min-height:auto;padding:22px;border-radius:24px}.asset h1{font-size:34px}.asset h2{font-size:26px}.asset h3{font-size:18px}.asset p{font-size:14px}.asset img{width:min(210px,68vw);height:min(210px,68vw);padding:12px}.receipt{padding:18px}.story{min-height:auto}.noPrint{position:sticky!important;top:10px!important;right:auto!important;left:10px!important;margin:10px;z-index:9}}@media print{body{background:#fff}.page{margin:0;box-shadow:none;page-break-after:always}.noPrint{display:none}}

/* LocalSpin v32: browser-safe mobile dock, cleaner settings, and customer CRM editing */
@media (max-width: 980px) {
  .mobileDock {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    grid-template-columns: 1fr 1.18fr 1fr !important;
    gap: 8px !important;
    padding: 9px max(10px, env(safe-area-inset-left)) max(9px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right)) !important;
    border-radius: 24px 24px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(21,18,14,.10) !important;
    background: rgba(255, 253, 250, .985) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
  }
  .mobileDockBtn,
  .mobileDockRedeem {
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 18px !important;
    padding: 6px 8px !important;
    gap: 3px !important;
  }
  .mobileDockRedeem {
    transform: none !important;
    box-shadow: 0 10px 24px rgba(238,66,102,.24) !important;
  }
  .mobileDockBtn strong,
  .mobileDockRedeem strong { font-size: 13px !important; line-height: 1 !important; }
  .mobileDockBtn small,
  .mobileDockRedeem small { font-size: 9px !important; line-height: 1 !important; }
  .mainApp { padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important; }
  .launchDockV26 { bottom: calc(88px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 430px) {
  .mobileDock { gap: 7px !important; padding-left: 8px !important; padding-right: 8px !important; }
  .mobileDockBtn,
  .mobileDockRedeem { height: 50px !important; min-height: 50px !important; border-radius: 17px !important; }
  .mobileDockBtn small,
  .mobileDockRedeem small { display: none !important; }
}
.settingsCleanGrid { align-items: start; }
.billingSettingsPanel .billingHero h3 { font-size: clamp(30px, 4vw, 46px) !important; }
.billingSettingsPanel .billingHero p strong { color: var(--dark); }
.billingActions.twoButtons { grid-template-columns: 1fr 1fr; }
.billingActions.threeButtons { grid-template-columns: 1.15fr 1fr 1fr; }
.billingPlanNote { margin-top: 10px !important; max-width: 620px; }
.customerManageGrid { grid-template-columns: .78fr 1.22fr; align-items: start; }
.customerEditor .formActions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.customerTableWrap table th:last-child,
.customerTableWrap table td:last-child { min-width: 150px; }
.tableActions { display: flex; gap: 7px; flex-wrap: wrap; }
.dangerMini { background: #fff1f2 !important; color: #be123c !important; }
@media (max-width: 1180px) { .customerManageGrid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .customerEditor { order: -1; }
  .customerTableWrap { overflow-x: auto; }
  .customerTableWrap table { min-width: 860px; }
  .billingActions.twoButtons, .billingActions.threeButtons { grid-template-columns: 1fr; }
}

/* LocalSpin v33: browser-aware mobile dock refinement */
@media (max-width: 980px) {
  .mobileDock {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 6px) !important;
    width: auto !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    border-radius: 28px !important;
    border: 1px solid rgba(21,18,14,.10) !important;
    background: rgba(255, 253, 250, .96) !important;
    box-shadow: 0 10px 34px rgba(17, 24, 39, .13) !important;
    padding: 8px !important;
    transform: translateZ(0) !important;
  }
  .mobileDockBtn,
  .mobileDockRedeem {
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 18px !important;
    padding: 5px 8px !important;
  }
  .mobileDockRedeem {
    transform: none !important;
    box-shadow: 0 8px 20px rgba(251, 44, 131, .24) !important;
  }
  .mainApp { padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important; }
  .launchDockV26 { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 380px) {
  .mobileDock { left: 8px !important; right: 8px !important; gap: 6px !important; padding: 7px !important; }
  .mobileDockBtn strong,
  .mobileDockRedeem strong { font-size: 12px !important; }
  .mobileDockBtn,
  .mobileDockRedeem { height: 48px !important; min-height: 48px !important; }
}


/* LocalSpin v34: restore the v32 mobile dock position because it behaves better in mobile browsers. */
@media (max-width: 980px) {
  .mobileDock {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    grid-template-columns: 1fr 1.18fr 1fr !important;
    gap: 8px !important;
    padding: 9px max(10px, env(safe-area-inset-left)) max(9px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right)) !important;
    border-radius: 24px 24px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(21,18,14,.10) !important;
    background: rgba(255,253,250,.985) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
    transform: none !important;
  }
  .mobileDockBtn,
  .mobileDockRedeem {
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 18px !important;
    padding: 6px 8px !important;
    gap: 3px !important;
  }
  .mobileDockRedeem {
    transform: none !important;
    box-shadow: 0 10px 24px rgba(238,66,102,.24) !important;
  }
  .mobileDockBtn strong,
  .mobileDockRedeem strong {
    font-size: 13px !important;
    line-height: 1 !important;
  }
  .mobileDockBtn small,
  .mobileDockRedeem small {
    font-size: 9px !important;
    line-height: 1 !important;
  }
  .mainApp { padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important; }
  .launchDockV26 { bottom: calc(88px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 430px) {
  .mobileDock {
    gap: 7px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .mobileDockBtn,
  .mobileDockRedeem {
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 17px !important;
  }
  .mobileDockBtn small,
  .mobileDockRedeem small { display: none !important; }
}



/* v37: owner-friendly printable flyer designer */
.printDesignerPanel {
  overflow: hidden;
  background: radial-gradient(circle at 0% 0%, rgba(255,122,26,.10), transparent 260px), #fff;
}
.printDesignerGrid {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(340px, 1.1fr);
  gap: 20px;
  align-items: start;
}
.flyerPreviewShell {
  display: grid;
  gap: 14px;
}
.flyerPreviewCard {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: 32px 26px;
  border-radius: 36px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.34), transparent 155px),
    radial-gradient(circle at 88% 16%, rgba(255,255,255,.18), transparent 190px),
    linear-gradient(145deg, #ff7a1a 0%, #ff4d55 48%, #7c3aed 100%);
  box-shadow: 0 26px 70px rgba(251, 44, 131, .26);
}
.flyerPreviewCard:before,
.flyerPreviewCard:after {
  content: '';
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  pointer-events: none;
}
.flyerPreviewCard:before {
  width: 220px;
  height: 220px;
  right: -80px;
  top: -80px;
}
.flyerPreviewCard:after {
  width: 260px;
  height: 260px;
  left: -110px;
  bottom: -130px;
}
.flyerBadge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #8a2f0c;
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .09em;
  max-width: 100%;
}
.flyerPreviewCard h3,
.flyerPreviewCard p,
.flyerPreviewCard small,
.flyerPreviewCard code {
  position: relative;
  z-index: 1;
  color: #fff;
}
.flyerPreviewCard h3 {
  margin: 0;
  font-size: clamp(38px, 5vw, 58px);
  line-height: .92;
  letter-spacing: -.08em;
  max-width: 440px;
}
.flyerPreviewCard p {
  margin: 0;
  max-width: 420px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 850;
}
.flyerPreviewCard .flyerQr {
  position: relative;
  z-index: 1;
  width: min(230px, 72vw);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 13px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 24px 58px rgba(17, 24, 39, .22);
}
.flyerPreviewCard code {
  display: block;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 850;
  word-break: break-all;
}
.flyerPreviewCard small {
  max-width: 420px;
  opacity: .86;
  font-weight: 850;
  line-height: 1.35;
}
.qrProofBox {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 20px;
  background: #ecfdf5;
  border: 1px solid rgba(21,166,103,.18);
}
.qrProofBox strong {
  color: #047857;
  font-size: 13px;
}
.qrProofBox span,
.qrProofBox code {
  color: #065f46;
  font-size: 12px;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.printEditorCard {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 28px;
  background: #fffaf3;
  border: 1px solid rgba(255,122,26,.16);
}
.printEditorCard .panelHead {
  margin-bottom: 0;
}
.printUseGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.printUseGrid span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 850;
  font-size: 12px;
}
.printUseGrid strong {
  color: var(--dark);
  font-size: 15px;
}
.kitMiniGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.kitMiniCard {
  display: grid;
  gap: 10px;
  min-height: 210px;
  padding: 16px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  align-content: center;
  text-align: center;
}
.kitMiniCard strong {
  color: var(--dark);
  font-size: 18px;
  letter-spacing: -.04em;
}
.kitMiniCard p,
.kitMiniCard code {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.kitMiniCard img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
  margin: 0 auto;
}
.kitMiniCard.gradient {
  color: #fff;
  background: linear-gradient(145deg, var(--orange), var(--rose), var(--purple));
  border: 0;
}
.kitMiniCard.gradient strong,
.kitMiniCard.gradient p { color: #fff; }
.kitMainOnlyGrid {
  grid-template-columns: minmax(0, 520px);
  justify-content: start;
}
.kitMainFlyerCard {
  min-height: 260px;
}
.qrDockIcon,
.campaignDockIcon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border-radius: 8px;
  background: rgba(255,122,26,.12);
  color: #9a3412;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: -.03em;
}
.campaignDockIcon {
  background: linear-gradient(135deg, rgba(255, 101, 52, .14), rgba(251, 44, 131, .14), rgba(139, 92, 246, .14));
  color: #bf2b5f;
  font-size: 13px;
}
.mobileDockBtn.active .qrDockIcon,
.mobileDockBtn.active .campaignDockIcon {
  background: rgba(255,255,255,.16);
  color: #fff;
}
@media (max-width: 1080px) {
  .printDesignerGrid { grid-template-columns: 1fr; }
  .kitMiniGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .flyerPreviewCard { min-height: auto; padding: 26px 18px; border-radius: 30px; }
  .flyerPreviewCard h3 { font-size: 38px; }
  .flyerPreviewCard p { font-size: 14px; }
  .printEditorCard { padding: 16px; border-radius: 24px; }
  .printUseGrid,
  .kitMiniGrid { grid-template-columns: 1fr; }
}


/* LocalSpin v40: full image logo in website and dashboard navigation */
.logoBrand {
  gap: 0 !important;
  line-height: 0 !important;
  min-height: auto;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  flex: 0 0 auto;
}
.logoBrand .brandLogo {
  display: block;
  width: 136px;
  height: auto;
  max-width: min(44vw, 150px);
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.22));
}
.topbar .logoBrand,
.landingTopbar .logoBrand,
.authTop .logoBrand,
.staffTop .logoBrand {
  min-height: 44px;
  padding: 5px 12px;
  background: rgba(6, 9, 24, .96);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 36px rgba(17,24,39,.16);
}
.sidebar .logoBrand,
.playTop .logoBrand,
.publicFooter .logoBrand,
.footerBrandBlock .logoBrand {
  min-height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .logoBrand .brandLogo {
  width: 118px;
  max-width: 118px;
}
.playTop .logoBrand .brandLogo,
.staffTop .logoBrand .brandLogo,
.footerBrandBlock .logoBrand .brandLogo {
  width: 132px;
}
.landingTopbar .logoBrand .brandLogo,
.authTop .logoBrand .brandLogo,
.staffTop .logoBrand .brandLogo {
  width: 138px;
}
@media (max-width: 860px) {
  .landingTopbar .logoBrand,
  .authTop .logoBrand,
  .staffTop .logoBrand {
    min-height: 42px;
    padding: 5px 10px;
  }
  .landingTopbar .logoBrand .brandLogo,
  .authTop .logoBrand .brandLogo,
  .staffTop .logoBrand .brandLogo {
    width: 124px;
    max-width: 42vw;
  }
  .sidebar .logoBrand .brandLogo {
    width: 112px;
  }
  .playTop .logoBrand .brandLogo,
  .staffTop .logoBrand .brandLogo {
    width: 122px;
    max-width: 44vw;
  }
}
@media (max-width: 420px) {
  .landingTopbar .logoBrand .brandLogo,
  .authTop .logoBrand .brandLogo,
  .staffTop .logoBrand .brandLogo {
    width: 112px;
  }
}



/* LocalSpin v49: clearer homepage, stronger header/footer CTAs, and customer story */
.landingTopbar .landingNav .ghostBtn.small {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(17,24,39,.16) !important;
  box-shadow: 0 10px 22px rgba(17,24,39,.08) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
.landingTopbar .landingNav .primaryBtn.orange.small,
.publicFooter .primaryBtn.orange.small,
.footerCta {
  color: #ffffff !important;
  background: linear-gradient(135deg, #ff6a1a 0%, #ff2f6d 56%, #8b5cf6 100%) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 16px 34px rgba(255,72,80,.30) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.18) !important;
  opacity: 1 !important;
}
.landingTopbar .landingNav .primaryBtn.orange.small:hover,
.publicFooter .primaryBtn.orange.small:hover { box-shadow: 0 20px 42px rgba(255,72,80,.38) !important; }
.navCta { min-width: 112px !important; }
.heroMainCta { min-height: 58px !important; padding: 0 24px !important; font-size: 16px !important; }
.heroSecondaryCta { min-height: 58px !important; padding: 0 22px !important; background: #fff !important; color: #111827 !important; border-color: rgba(17,24,39,.12) !important; }
.landingHero {
  padding-top: 82px !important;
  padding-bottom: 50px !important;
  grid-template-columns: minmax(0, 1.04fr) minmax(390px, .86fr) !important;
  gap: 58px !important;
}
.landingHeroCopy h1 {
  max-width: 790px;
  font-size: clamp(54px, 6.5vw, 94px) !important;
  letter-spacing: -.085em !important;
  line-height: .88 !important;
}
.landingHeroCopy p { max-width: 690px !important; color: #4b4037 !important; }
.heroMicroProof { display: flex; flex-wrap: wrap; gap: 10px; }
.heroMicroProof span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(17,24,39,.08);
  color: #4b4037;
  font-weight: 950;
  font-size: 13px;
}
.landingHeroVisual {
  position: relative;
  min-height: 640px;
  display: grid;
  place-items: center;
}
.heroGlow {
  position: absolute;
  inset: 32px 0 34px 24px;
  border-radius: 52px;
  background:
    radial-gradient(circle at 35% 18%, rgba(255,122,26,.26), transparent 28rem),
    radial-gradient(circle at 82% 82%, rgba(124,58,237,.16), transparent 24rem),
    rgba(255,255,255,.42);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.52), 0 30px 90px rgba(17,24,39,.12);
  transform: rotate(-3deg);
}
.heroProductCard {
  width: min(390px, 92vw);
  border-radius: 42px;
  padding: 26px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 38px 90px rgba(17,24,39,.20);
  position: relative;
  z-index: 2;
  display: grid;
  gap: 16px;
  text-align: center;
}
.heroProductCard h3 { font-size: 34px; letter-spacing: -.06em; }
.heroProductTop { display: flex; justify-content: space-between; align-items: center; color: #78716c; font-weight: 950; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.heroProductTop .liveDot { display: inline-flex; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(21,166,103,.12); }
.miniFlowList { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; text-align: left; }
.miniFlowList span { padding: 12px; border-radius: 16px; background: #fff7ed; color: #342b25; font-weight: 900; border: 1px solid rgba(255,122,26,.14); }
.heroOwnerCard {
  position: absolute;
  z-index: 3;
  right: -8px;
  bottom: 32px;
  width: 320px;
  border-radius: 28px;
  padding: 18px;
  background: rgba(17,24,39,.94);
  color: #fff;
  box-shadow: 0 26px 62px rgba(17,24,39,.28);
  display: grid;
  gap: 13px;
}
.heroOwnerCard .ownerMetric { background: rgba(255,255,255,.09); color: #fff; }
.heroOwnerCard .ownerMetric span { color: rgba(255,255,255,.72); }
.heroOwnerCard .ownerRows span { background: rgba(255,255,255,.16); }
.clarityStrip {
  margin-top: 4px !important;
  padding: 22px 26px !important;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(17,24,39,.96), rgba(33,23,19,.96));
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  box-shadow: 0 24px 70px rgba(17,24,39,.12);
}
.clarityStrip div { display: grid; gap: 4px; }
.clarityStrip strong { font-size: 21px; letter-spacing: -.03em; }
.clarityStrip span { color: rgba(255,255,255,.72); font-weight: 800; }
.centeredHeader { text-align: center; margin-left: auto; margin-right: auto; }
.centeredHeader .eyebrow { margin-left: auto; margin-right: auto; }
.toolGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.toolCard {
  min-height: 230px;
  padding: 22px;
  border-radius: 28px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 18px 48px rgba(17,24,39,.07);
  display: grid;
  gap: 13px;
  align-content: start;
}
.toolCard h3 { font-size: 23px; letter-spacing: -.04em; }
.toolCard p { font-size: 15px; color: #5f554c; }
.toolIcon { width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-weight: 950; background: linear-gradient(135deg, #ff7a1a, #ee4266 58%, #7c3aed); box-shadow: 0 16px 30px rgba(238,66,102,.22); }
.improvedSteps { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.improvedSteps .stepCard { min-height: 230px; }
.centerCta { display: flex; justify-content: center; margin-top: 28px; }
.revenueBand {
  width: min(1220px, calc(100% - 26px)) !important;
  border-radius: 48px;
  padding: 56px !important;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, .8fr);
  gap: 34px;
  align-items: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,122,26,.26), transparent 30rem),
    radial-gradient(circle at 88% 90%, rgba(124,58,237,.18), transparent 28rem),
    linear-gradient(135deg, #101522, #18111d 70%, #271815);
  color: #fff;
  box-shadow: 0 28px 90px rgba(17,24,39,.18);
}
.revenueBand h2 { color: #fff; }
.revenueBand p { color: rgba(255,255,255,.76); }
.revenueBand .eyebrow { color: #fed7aa; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.lightButton { background: #fff !important; color: #111827 !important; border: 0 !important; width: fit-content; }
.revenueCopy { display: grid; gap: 16px; }
.revenueGrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.landingMetric { padding: 22px; border-radius: 24px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); display: grid; gap: 4px; }
.landingMetric strong { color: #fff; font-size: 44px; line-height: .95; letter-spacing: -.07em; }
.landingMetric span { color: rgba(255,255,255,.74); font-weight: 900; }
.customerStory { padding-top: 92px !important; }
.storyCard {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1fr);
  gap: 30px;
  align-items: stretch;
  padding: 24px;
  border-radius: 44px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 26px 82px rgba(17,24,39,.10);
}
.storyMedia { position: relative; min-height: 520px; border-radius: 32px; overflow: hidden; background: #111827; }
.storyPhoto { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.02) contrast(1.02); }
.storyMedia:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(17,24,39,.68)); }
.storyLogoBadge {
  position: absolute;
  z-index: 2;
  left: 20px;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
  color: #111827;
  font-weight: 950;
}
.storyLogoBadge img { width: 60px; height: 60px; object-fit: contain; background: #111; border-radius: 18px; padding: 8px; }
.storyCopy { display: grid; align-content: center; gap: 18px; padding: 26px; }
.storyCopy h2 { font-size: clamp(42px, 5vw, 66px); letter-spacing: -.075em; }
.storyChecklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.storyChecklist span { padding: 13px; border-radius: 18px; background: #fff7ed; border: 1px solid rgba(255,122,26,.14); color: #3b332d; font-weight: 900; }
.linkButton { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.proofGrid .proofCard { min-height: 260px; }
.proofCard span { color: #9a3412; font-size: 13px; text-transform: uppercase; letter-spacing: .09em; font-weight: 950; }
.proofCard h3 { font-size: 28px; letter-spacing: -.05em; }
.proofCard strong { color: #5f554c; line-height: 1.45; }
.landingPricingWrap .pricingCtaCard { background: linear-gradient(145deg, #fff, #fff7ed); }
.faqSection { padding-top: 64px !important; }
.landingFaqGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.landingFaqGrid .faqCard { padding: 22px; border-radius: 24px; background: rgba(255,255,255,.88); }
.publicFooter .footerCta { width: fit-content !important; min-height: 46px !important; padding: 0 18px !important; }
.publicFooter .footerBottom span:last-child { color: rgba(255,255,255,.78) !important; }
@media (max-width: 1040px) {
  .landingHero { grid-template-columns: 1fr !important; }
  .landingHeroVisual { min-height: 600px; }
  .toolGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .improvedSteps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .revenueBand, .storyCard { grid-template-columns: 1fr; }
  .storyMedia { min-height: 420px; }
}
@media (max-width: 760px) {
  .landingTopbar .landingNav .ghostBtn.small { background: #fff !important; color: #111827 !important; opacity: 1 !important; }
  .landingTopbar .landingNav .primaryBtn.orange.small { color: #fff !important; text-shadow: none !important; }
  .landingHero { padding-top: 36px !important; gap: 28px !important; }
  .landingHeroCopy h1 { font-size: clamp(42px, 13vw, 62px) !important; line-height: .9 !important; }
  .heroMainCta, .heroSecondaryCta { width: 100%; min-height: 54px !important; }
  .heroMicroProof span { width: 100%; justify-content: center; }
  .landingHeroVisual { min-height: auto; padding: 18px 0 120px; }
  .heroGlow { inset: 0 0 86px 0; border-radius: 34px; transform: none; }
  .heroProductCard { border-radius: 30px; padding: 20px; }
  .heroProductCard h3 { font-size: 28px; }
  .miniFlowList { grid-template-columns: 1fr; }
  .heroOwnerCard { left: 14px; right: 14px; bottom: 0; width: auto; }
  .floatBadge { left: 10px !important; top: 8px !important; transform: scale(.84); transform-origin: top left; }
  .clarityStrip { width: calc(100% - 24px) !important; flex-direction: column; align-items: flex-start; padding: 22px !important; }
  .clarityStrip .primaryBtn { width: 100%; }
  .toolGrid, .improvedSteps, .landingFaqGrid, .storyChecklist { grid-template-columns: 1fr !important; }
  .toolCard, .improvedSteps .stepCard { min-height: auto; }
  .revenueBand { width: calc(100% - 24px) !important; padding: 28px 20px !important; border-radius: 30px; }
  .landingMetric strong { font-size: 36px; }
  .storyCard { padding: 14px; border-radius: 30px; }
  .storyMedia { min-height: 320px; border-radius: 24px; }
  .storyCopy { padding: 10px 4px 6px; }
  .storyLogoBadge { left: 12px; right: 12px; bottom: 12px; }
  .storyLogoBadge img { width: 50px; height: 50px; }
  .centerCta .primaryBtn { width: 100%; }
  .publicFooter .footerCta { width: 100% !important; }
}


/* LocalSpin v50: clearer hero demo, stronger ROI, better icons and customer story */
.heroPillRow span {
  gap: 9px;
  padding: 0 16px !important;
  min-height: 44px !important;
  background: #ffffff !important;
  color: #211813 !important;
  box-shadow: 0 14px 30px rgba(17,24,39,.07);
}
.heroPillRow span strong {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, #ff7a1a, #ee4266 60%, #7c3aed);
  color: #fff;
  font-size: 12px;
  letter-spacing: -.03em;
}
.heroVisualV50 {
  min-height: 680px !important;
  align-items: center;
}
.heroDemoShell {
  position: relative;
  width: min(570px, 100%);
  min-height: 660px;
  display: grid;
  place-items: center;
}
.heroDemoShell .heroGlow {
  inset: 10px 10px 70px 24px;
  border-radius: 58px;
  transform: rotate(-2deg);
}
.customerPhone {
  position: relative;
  z-index: 3;
  width: min(370px, 86vw);
  border-radius: 46px;
  padding: 13px;
  background: linear-gradient(155deg, #111827, #06070d 72%, #2b1835);
  box-shadow: 0 42px 96px rgba(17,24,39,.26), 0 0 0 1px rgba(255,255,255,.16) inset;
}
.phoneGlass {
  border-radius: 34px;
  background: linear-gradient(180deg, #fff, #fff8f0 86%);
  padding: 18px;
  border: 1px solid rgba(255,255,255,.72);
  display: grid;
  gap: 12px;
  text-align: center;
  overflow: hidden;
}
.phoneTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #78716c;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.phoneTopBar strong {
  padding: 6px 9px;
  border-radius: 999px;
  color: #067647;
  background: rgba(21,166,103,.12);
  letter-spacing: 0;
}
.phoneGlass h3 {
  font-size: 30px;
  letter-spacing: -.06em;
  margin: 0;
}
.phoneHint {
  margin: -6px auto 0;
  color: #6f6258;
  font-size: 14px;
  font-weight: 750;
}
.phoneStepStack {
  display: grid;
  gap: 8px;
  text-align: left;
}
.phoneStepStack span {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(255,122,26,.16);
  color: #312821;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(17,24,39,.05);
}
.phoneStepStack b {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #ff7a1a, #ee4266 62%, #7c3aed);
}
.dashboardPreviewCard {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 34px;
  width: min(350px, 78vw);
  border-radius: 28px;
  padding: 18px;
  background: rgba(17,24,39,.94);
  color: #fff;
  box-shadow: 0 30px 80px rgba(17,24,39,.34);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  gap: 12px;
}
.dashboardPreviewHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-weight: 950;
}
.dashboardPreviewHead i {
  font-style: normal;
  font-size: 12px;
  color: #86efac;
  background: rgba(21,166,103,.16);
  padding: 5px 9px;
  border-radius: 999px;
}
.dashboardPreviewGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dashboardPreviewGrid div {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.09);
  display: grid;
  gap: 2px;
}
.dashboardPreviewGrid strong { font-size: 27px; letter-spacing: -.06em; }
.dashboardPreviewGrid span { color: rgba(255,255,255,.72); font-weight: 850; font-size: 12px; }
.dashboardPreviewCard p { color: rgba(255,255,255,.78); margin: 0; font-size: 13px; }
.scanLinkCard {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 76px;
  width: 210px;
  padding: 16px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 24px 60px rgba(17,24,39,.18);
  display: grid;
  gap: 4px;
}
.scanLinkCard strong { font-size: 24px; letter-spacing: -.06em; }
.scanLinkCard span { color: #665c53; font-size: 13px; font-weight: 850; line-height: 1.35; }
.growthPillars {
  margin-top: 0 !important;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.pillarCard {
  border-radius: 30px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 18px 48px rgba(17,24,39,.07);
  padding: 24px;
  display: grid;
  gap: 10px;
  min-height: 180px;
}
.featuredPillar {
  background: linear-gradient(145deg, #111827, #25172f);
  color: #fff;
  transform: translateY(-8px);
}
.featuredPillar p { color: rgba(255,255,255,.74) !important; }
.pillarIcon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #ff7a1a, #ee4266 60%, #7c3aed);
  box-shadow: 0 18px 34px rgba(238,66,102,.20);
  font-weight: 950;
  font-size: 22px;
}
.pillarCard h3 { font-size: 26px; letter-spacing: -.05em; }
.pillarCard p { color: #5f554c; font-size: 15px; }
.toolCard { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.toolCard:hover { transform: translateY(-4px); box-shadow: 0 26px 64px rgba(17,24,39,.10); border-color: rgba(255,122,26,.18); }
.toolIcon {
  font-size: 22px !important;
  line-height: 1;
  background: linear-gradient(145deg, #fff7ed, #fff) !important;
  color: #f45d30 !important;
  border: 1px solid rgba(255,122,26,.16);
  box-shadow: 0 14px 28px rgba(255,122,26,.12) !important;
}
.howSectionV50 {
  position: relative;
  padding-top: 90px !important;
  padding-bottom: 92px !important;
  border-radius: 46px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,122,26,.14), transparent 26rem),
    radial-gradient(circle at 86% 92%, rgba(124,58,237,.10), transparent 30rem),
    rgba(255,255,255,.30);
}
.improvedStepsV50 {
  position: relative;
  gap: 20px !important;
}
.improvedStepsV50:before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 48px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,122,26,.25), rgba(238,66,102,.28), rgba(124,58,237,.24));
}
.improvedStepsV50 .stepCard {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 22px 58px rgba(17,24,39,.08);
  min-height: 250px !important;
  padding: 28px !important;
}
.improvedStepsV50 .stepCard:after {
  content: "";
  position: absolute;
  inset: auto -30px -52px auto;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,26,.14), transparent 66%);
}
.improvedStepsV50 .stepIcon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff7a1a, #ee4266 60%, #7c3aed);
  color: #fff;
  box-shadow: 0 18px 36px rgba(238,66,102,.20);
}
.improvedStepsV50 .stepCard h3 { font-size: 24px; letter-spacing: -.05em; }
.improvedStepsV50 .stepCard p { color: #5f554c; font-size: 15px; }
.revenuePower {
  align-items: stretch !important;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1fr) !important;
  padding: 64px !important;
  border-radius: 54px !important;
  background:
    radial-gradient(circle at 8% 18%, rgba(255,122,26,.32), transparent 32rem),
    radial-gradient(circle at 92% 80%, rgba(124,58,237,.26), transparent 34rem),
    linear-gradient(135deg, #0a0e1a, #18111d 54%, #32171f) !important;
}
.revenuePower h2 { font-size: clamp(42px, 5.6vw, 76px); letter-spacing: -.08em; line-height: .9; }
.revenuePower .revenueCopy { align-content: center; }
.roiCompare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.roiCompare div {
  border-radius: 22px;
  padding: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  display: grid;
  gap: 6px;
}
.roiCompare span { color: rgba(255,255,255,.66); font-weight: 850; font-size: 13px; }
.roiCompare strong { font-size: 28px; color: #fff; letter-spacing: -.05em; }
.roiPanel {
  border-radius: 34px;
  padding: 24px;
  background: rgba(255,255,255,.94);
  color: #111827;
  box-shadow: 0 30px 80px rgba(0,0,0,.24);
  display: grid;
  gap: 16px;
}
.roiPanelHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: #5f554c;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}
.roiPanelHeader strong {
  color: #9a3412;
  background: #fff7ed;
  border: 1px solid rgba(255,122,26,.14);
  padding: 7px 10px;
  border-radius: 999px;
  letter-spacing: 0;
}
.roiEquation {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.roiEquationRow {
  border-radius: 20px;
  background: #fff7ed;
  border: 1px solid rgba(255,122,26,.16);
  padding: 16px;
  display: grid;
  gap: 4px;
}
.roiEquationRow strong { font-size: 34px; letter-spacing: -.07em; color: #111827; }
.roiEquationRow span { color: #6f6258; font-weight: 850; font-size: 13px; }
.roiResultCard {
  border-radius: 28px;
  padding: 22px;
  background: linear-gradient(135deg, #ff7a1a, #ee4266 58%, #7c3aed);
  color: #fff;
  display: grid;
  gap: 4px;
  box-shadow: 0 24px 54px rgba(238,66,102,.26);
}
.roiResultCard span { font-weight: 900; opacity: .88; }
.roiResultCard strong { font-size: clamp(48px, 6vw, 76px); line-height: .9; letter-spacing: -.08em; }
.roiMiniCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.roiMiniCard {
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.08);
  display: grid;
  gap: 5px;
}
.roiMiniCard strong { font-size: 14px; }
.roiMiniCard span { color: #6f6258; font-size: 12px; font-weight: 750; line-height: 1.35; }
.customerStoryV50 { padding-top: 96px !important; }
.storyHeaderV50 p { max-width: 850px; margin-left: auto; margin-right: auto; }
.storyCase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, .88fr);
  grid-template-areas: "intro impact" "media impact";
  gap: 18px;
  align-items: stretch;
}
.storyIntroCard, .storyImpactPanel, .storySmallMedia {
  border-radius: 34px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 22px 64px rgba(17,24,39,.08);
}
.storyIntroCard {
  grid-area: intro;
  padding: 28px;
  display: grid;
  gap: 18px;
}
.storyLogoLine {
  display: flex;
  gap: 15px;
  align-items: center;
}
.storyLogoLine img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 22px;
  background: #101522;
  padding: 10px;
}
.storyLogoLine span { color: #9a3412; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.storyLogoLine strong { display: block; font-size: 28px; letter-spacing: -.05em; }
.storyTags { display: flex; flex-wrap: wrap; gap: 8px; }
.storyTags span {
  padding: 9px 11px;
  border-radius: 999px;
  background: #fff7ed;
  border: 1px solid rgba(255,122,26,.15);
  color: #713f12;
  font-size: 13px;
  font-weight: 900;
}
.storyImpactPanel {
  grid-area: impact;
  padding: 28px;
  display: grid;
  gap: 18px;
  background:
    radial-gradient(circle at 82% 12%, rgba(255,122,26,.14), transparent 18rem),
    #fff;
}
.storyImpactPanel h3 { font-size: clamp(34px, 4vw, 54px); line-height: .95; letter-spacing: -.07em; }
.storyImpactGrid { display: grid; gap: 10px; }
.storyMetric {
  border-radius: 22px;
  padding: 18px;
  background: #fff7ed;
  border: 1px solid rgba(255,122,26,.16);
  display: grid;
  gap: 3px;
}
.storyMetric strong { font-size: 38px; line-height: 1; letter-spacing: -.07em; }
.storyMetric span { color: #6f6258; font-weight: 850; }
.storyQuoteDraft {
  border-radius: 26px;
  padding: 20px;
  background: linear-gradient(145deg, #111827, #24162f);
  color: #fff;
  display: grid;
  gap: 10px;
}
.storyQuoteDraft span { color: #fed7aa; font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.storyQuoteDraft blockquote { margin: 0; font-size: 22px; line-height: 1.25; letter-spacing: -.035em; font-weight: 900; }
.storyQuoteDraft small { color: rgba(255,255,255,.64); font-weight: 750; }
.storySmallMedia {
  grid-area: media;
  overflow: hidden;
  min-height: 230px;
}
.storySmallMedia img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1040px) {
  .heroVisualV50 { min-height: auto !important; }
  .heroDemoShell { min-height: 640px; }
  .growthPillars { grid-template-columns: 1fr; }
  .featuredPillar { transform: none; }
  .revenuePower { grid-template-columns: 1fr !important; }
  .storyCase { grid-template-columns: 1fr; grid-template-areas: "intro" "impact" "media"; }
  .storySmallMedia { min-height: 340px; }
}
@media (max-width: 760px) {
  .heroPillRow span { width: 100%; justify-content: flex-start !important; }
  .heroDemoShell { width: 100%; min-height: auto; gap: 14px; padding-bottom: 0; }
  .heroDemoShell .heroGlow { inset: 0; border-radius: 34px; transform: none; }
  .customerPhone { width: min(336px, 92vw); }
  .phoneGlass { padding: 16px; }
  .phonePrizeWheel { --wheel-size: 178px; }
  .dashboardPreviewCard, .scanLinkCard {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: min(336px, 92vw);
  }
  .dashboardPreviewCard { order: 3; }
  .scanLinkCard { order: 1; }
  .customerPhone { order: 2; }
  .growthPillars { width: calc(100% - 24px) !important; }
  .pillarCard { min-height: auto; padding: 22px; }
  .improvedStepsV50:before { display: none; }
  .howSectionV50 { border-radius: 30px; padding-top: 48px !important; padding-bottom: 54px !important; }
  .revenuePower { padding: 30px 20px !important; border-radius: 32px !important; }
  .revenuePower h2 { font-size: clamp(36px, 12vw, 52px); }
  .roiCompare, .roiEquation, .roiMiniCards { grid-template-columns: 1fr; }
  .roiPanel { padding: 18px; border-radius: 26px; }
  .roiPanelHeader { align-items: flex-start; flex-direction: column; }
  .storyIntroCard, .storyImpactPanel { padding: 20px; border-radius: 28px; }
  .storyLogoLine { align-items: flex-start; }
  .storyLogoLine img { width: 58px; height: 58px; border-radius: 18px; }
  .storyLogoLine strong { font-size: 24px; }
  .storyQuoteDraft blockquote { font-size: 18px; }
  .storySmallMedia { min-height: 240px; border-radius: 28px; }
}


/* LocalSpin v50.1: keep the hero demo clear with no cards covering the phone */
.heroDemoShell {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.scanLinkCard,
.dashboardPreviewCard {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: min(430px, 90%) !important;
}
.scanLinkCard { order: 1; }
.customerPhone { order: 2; }
.dashboardPreviewCard { order: 3; }



/* LocalSpin v51: stronger customer proof, clearer membership copy, and contrast fixes */
.featuredPillar h3,
.featuredPillar .pillarIcon { color: #fff !important; }
.featuredPillar h3 { text-shadow: none !important; }

.customerStoryV50 .storyCase {
  grid-template-columns: minmax(0, .86fr) minmax(420px, 1fr) !important;
  grid-template-areas: "intro impact" !important;
  gap: 20px !important;
  align-items: stretch !important;
}
.customerStoryV50 .storySmallMedia { display: none !important; }
.storyIntroCard { min-height: 390px; }
.storyImpactPanelV51 {
  position: relative;
  overflow: hidden;
  padding: 30px !important;
  border-radius: 34px !important;
  color: #fff;
  background:
    radial-gradient(circle at 86% 10%, rgba(255,122,26,.32), transparent 19rem),
    radial-gradient(circle at 12% 92%, rgba(124,58,237,.30), transparent 22rem),
    linear-gradient(145deg, #101522 0%, #1c1429 58%, #331725 100%) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 30px 86px rgba(17,24,39,.18) !important;
  align-content: start !important;
}
.storyImpactPanelV51:before {
  content: "";
  position: absolute;
  inset: -70px -100px auto auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.20), transparent 68%);
  pointer-events: none;
}
.storyImpactPanelV51 > * { position: relative; z-index: 1; }
.storyImpactPanelV51 .eyebrow {
  color: #fed7aa !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  width: fit-content;
}
.storyImpactPanelV51 h3 {
  color: #fff !important;
  font-size: clamp(34px, 4.8vw, 58px) !important;
  line-height: .94 !important;
  letter-spacing: -.075em !important;
  max-width: 620px;
}
.storyImpactLead {
  margin: 0;
  color: rgba(255,255,255,.76) !important;
  font-size: 16px;
  line-height: 1.55;
  max-width: 640px;
}
.storyOutcomeGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.storyOutcome {
  min-height: 112px;
  border-radius: 22px;
  padding: 16px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.13);
  display: grid;
  gap: 7px;
  align-content: center;
}
.storyOutcome span {
  color: rgba(255,255,255,.70);
  font-weight: 850;
  font-size: 13px;
  line-height: 1.35;
}
.storyOutcome strong {
  color: #fff;
  font-size: clamp(30px, 4vw, 42px);
  line-height: .95;
  letter-spacing: -.07em;
}
.storyOutcome.wide {
  grid-column: 1 / -1;
  min-height: 130px;
  background: linear-gradient(135deg, #ff7a1a 0%, #ee4266 58%, #7c3aed 100%);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 26px 58px rgba(238,66,102,.25);
}
.storyOutcome.wide span { color: rgba(255,255,255,.86); }
.storyOutcome.wide strong { font-size: clamp(42px, 6vw, 66px); }
.storyQuoteCard {
  border-radius: 28px;
  padding: 22px;
  background: rgba(255,255,255,.96);
  color: #111827;
  box-shadow: 0 24px 58px rgba(0,0,0,.20);
  display: grid;
  gap: 16px;
}
.storyQuoteCard blockquote {
  margin: 0;
  color: #111827;
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.28;
  letter-spacing: -.035em;
  font-weight: 900;
}
.storyQuoteAuthor {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 2px;
}
.storyQuoteAuthor img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 16px;
  background: #101522;
  padding: 8px;
  flex: 0 0 auto;
}
.storyQuoteAuthor strong {
  display: block;
  color: #111827;
  font-size: 17px;
  letter-spacing: -.02em;
}
.storyQuoteAuthor span {
  display: block;
  color: #6f6258;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}
.storyImpactPanelV51 .primaryBtn.full {
  min-height: 54px;
  box-shadow: 0 22px 48px rgba(238,66,102,.30) !important;
}
@media (max-width: 1040px) {
  .customerStoryV50 .storyCase {
    grid-template-columns: 1fr !important;
    grid-template-areas: "intro" "impact" !important;
  }
  .storyIntroCard { min-height: auto; }
}
@media (max-width: 760px) {
  .storyImpactPanelV51 { padding: 20px !important; border-radius: 28px !important; }
  .storyOutcomeGrid { grid-template-columns: 1fr; }
  .storyOutcome.wide { grid-column: auto; }
  .storyOutcome, .storyOutcome.wide { min-height: auto; }
  .storyQuoteCard { padding: 18px; border-radius: 24px; }
}



/* LocalSpin v52: interactive revenue calculator and cleaner Serendipity story */
.revenueCalculator {
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1fr) !important;
  align-items: center !important;
  gap: 40px !important;
}
.revenueCalculator .calculatorCopy h2 {
  max-width: 740px;
}
.calcTrustRow {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 4px;
}
.calcTrustRow span {
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.84);
  font-size: 13px;
  font-weight: 950;
}
.landingCalculatorCard {
  border-radius: 38px;
  padding: 24px;
  background: rgba(255,255,255,.96);
  color: #111827;
  box-shadow: 0 30px 80px rgba(0,0,0,.24);
  display: grid;
  gap: 16px;
}
.calculatorHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.calculatorHeader span {
  display: block;
  color: #9a3412;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.calculatorHeader strong {
  display: block;
  margin-top: 5px;
  font-size: 30px;
  letter-spacing: -.06em;
}
.calculatorHeader em {
  max-width: 180px;
  font-style: normal;
  text-align: right;
  color: #6f6258;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}
.calculatorInputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.calculatorInputs label {
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: #5f554c;
  font-weight: 950;
}
.calcInputWrap {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 22px;
  background: #fff7ed;
  border: 1px solid rgba(255,122,26,.18);
  padding: 0 15px;
}
.calcInputWrap b {
  color: #9a3412;
  font-size: 14px;
  font-weight: 950;
}
.calcInputWrap input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111827;
  font: 950 30px/1 Manrope, Arial, sans-serif;
  letter-spacing: -.05em;
}
.calculatorResults {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.calcResultCard {
  min-height: 158px;
  border-radius: 26px;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 16px 34px rgba(17,24,39,.07);
}
.calcResultCard span {
  color: #5f554c;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
}
.calcResultCard strong {
  color: #111827;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: .9;
  letter-spacing: -.08em;
}
.calcResultCard small {
  color: #6f6258;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}
.revenueResult {
  grid-column: 1 / -1;
  min-height: 150px;
  background: linear-gradient(135deg, #ff7a1a, #ee4266 58%, #7c3aed);
  border-color: rgba(255,255,255,.16);
  color: #fff;
  box-shadow: 0 26px 58px rgba(238,66,102,.28);
}
.revenueResult span,
.revenueResult small,
.revenueResult strong { color: #fff !important; }
.revenueResult strong { font-size: clamp(52px, 7vw, 86px); }
.breakEvenBox {
  border-radius: 24px;
  padding: 18px;
  background: linear-gradient(145deg, #111827, #22162d);
  color: #fff;
  display: grid;
  gap: 8px;
}
.breakEvenBox strong {
  color: #fff;
  font-size: 20px;
  letter-spacing: -.03em;
}
.breakEvenBox strong span { color: #fed7aa; }
.breakEvenBox p {
  margin: 0;
  color: rgba(255,255,255,.68) !important;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 750;
}
.customerStoryV52 .storyCaseV52 {
  grid-template-columns: minmax(380px, .92fr) minmax(0, 1.08fr) !important;
  grid-template-areas: "intro impact" !important;
  gap: 22px !important;
  align-items: stretch !important;
}
.storyIntroCardV52 {
  min-height: auto !important;
  padding: 30px !important;
  display: grid;
  gap: 20px;
  align-content: start;
  background:
    radial-gradient(circle at 90% 0%, rgba(255,122,26,.11), transparent 17rem),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,250,245,.92)) !important;
}
.storyIntroCardV52 .storyIntroLead {
  margin: 0;
  color: #5f554c;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 760;
}
.storyDeliverables {
  display: grid;
  gap: 9px;
  padding: 18px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 18px 38px rgba(17,24,39,.05);
}
.storyDeliverables h4 {
  margin: 0 0 5px;
  color: #111827;
  font-size: 20px;
  letter-spacing: -.04em;
}
.storyDeliverables span {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #40362e;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.4;
}
.storyDeliverables b {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(135deg, #ff7a1a, #ee4266 58%, #7c3aed);
  font-size: 12px;
}
.storySoftStats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.storySoftStats div {
  border-radius: 22px;
  padding: 16px;
  background: #fff7ed;
  border: 1px solid rgba(255,122,26,.16);
  display: grid;
  gap: 4px;
}
.storySoftStats strong {
  color: #111827;
  font-size: 28px;
  line-height: .95;
  letter-spacing: -.06em;
}
.storySoftStats span {
  color: #6f6258;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 850;
}
.storyCtas .primaryBtn,
.storyCtas .secondaryBtn { min-height: 50px; }
.storyImpactPanelV52 h3 { max-width: 720px; }
.storyImpactPanelV52 .storyOutcome strong { overflow-wrap: anywhere; }
@media (max-width: 1040px) {
  .revenueCalculator,
  .customerStoryV52 .storyCaseV52 {
    grid-template-columns: 1fr !important;
    grid-template-areas: "intro" "impact" !important;
  }
}
@media (max-width: 760px) {
  .revenueCalculator { padding: 28px 18px !important; }
  .landingCalculatorCard { padding: 18px; border-radius: 30px; }
  .calculatorHeader { flex-direction: column; }
  .calculatorHeader em { text-align: left; max-width: none; }
  .calculatorInputs,
  .calculatorResults,
  .storySoftStats { grid-template-columns: 1fr; }
  .calcResultCard { min-height: auto; }
  .revenueResult { min-height: 130px; }
  .storyIntroCardV52 { padding: 20px !important; border-radius: 28px !important; }
  .storyLogoLine { gap: 12px; }
  .storyDeliverables { padding: 16px; border-radius: 22px; }
  .storyCtas { display: grid !important; grid-template-columns: 1fr; }
  .storyCtas .primaryBtn,
  .storyCtas .secondaryBtn { width: 100%; }
}



/* LocalSpin v54: applied landing mobile spacing, full-width how-it-works, compact Serendipity card */
.landingHeroCopy > .pill { display: none !important; }
.howSectionV50 {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: max(24px, calc((100vw - 1180px) / 2)) !important;
  padding-right: max(24px, calc((100vw - 1180px) / 2)) !important;
  border-radius: 0 !important;
}
.howSectionV50 .sectionHeader,
.howSectionV50 .stepGrid,
.howSectionV50 .centerCta {
  width: min(1180px, calc(100vw - 48px));
  margin-left: auto !important;
  margin-right: auto !important;
}
.howSectionV50 .sectionHeader { max-width: 900px; }
.customerStoryV52 .storyCaseV52 {
  align-items: start !important;
}
.customerStoryV52 .storyIntroCardV52 {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
}
@media (max-width: 760px) {
  .landingHero {
    padding-bottom: 0 !important;
    gap: 16px !important;
  }
  .landingHeroVisual {
    min-height: 0 !important;
    padding: 0 0 10px !important;
    margin-bottom: 0 !important;
  }
  .heroDemoShell {
    min-height: 0 !important;
    gap: 10px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .heroDemoShell .heroGlow,
  .heroGlow {
    inset: 0 !important;
    border-radius: 32px !important;
  }
  .scanLinkCard,
  .dashboardPreviewCard,
  .customerPhone {
    width: min(336px, 92vw) !important;
  }
  .growthPillars {
    margin-top: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 36px !important;
    width: calc(100% - 24px) !important;
  }
  .howSectionV50 {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 44px !important;
    padding-bottom: 52px !important;
    border-radius: 0 !important;
  }
  .howSectionV50 .sectionHeader,
  .howSectionV50 .stepGrid,
  .howSectionV50 .centerCta {
    width: 100% !important;
  }
  .customerStoryV52 .storyCaseV52 { align-items: start !important; }
  .customerStoryV52 .storyIntroCardV52 { align-self: start !important; min-height: 0 !important; }
}


/* LocalSpin v55: transparent header logo and cleaner, less compact landing copy */
.topbar .logoBrand,
.landingTopbar .logoBrand,
.authTop .logoBrand {
  min-height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.logoBrand .brandLogo {
  width: 162px !important;
  max-width: min(46vw, 166px) !important;
  filter: drop-shadow(0 8px 18px rgba(17,24,39,.10)) !important;
}
.sidebar .logoBrand,
.playTop .logoBrand,
.staffTop .logoBrand,
.footerBrandBlock .logoBrand {
  width: fit-content !important;
  padding: 6px 8px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.12) !important;
}
.sidebar .logoBrand .brandLogo,
.playTop .logoBrand .brandLogo,
.staffTop .logoBrand .brandLogo,
.footerBrandBlock .logoBrand .brandLogo {
  width: 132px !important;
  max-width: 132px !important;
  filter: none !important;
}
.landingHeroCopy p {
  font-size: clamp(18px, 1.75vw, 22px) !important;
  line-height: 1.45 !important;
  max-width: 640px !important;
}
.heroMicroProof span {
  font-size: 14px !important;
  padding: 0 16px !important;
}
.heroMicroProof strong {
  color: #ff4f50;
  margin-right: 5px;
}
.growthPillars,
.toolGrid,
.improvedSteps,
.landingFaqGrid,
.testimonialGrid,
.proofGrid {
  gap: 18px !important;
}
.pillarCard,
.toolCard,
.improvedSteps .stepCard,
.landingFaqGrid .faqCard,
.proofGrid .proofCard {
  gap: 12px !important;
}
.pillarCard p,
.toolCard p,
.improvedSteps .stepCard p,
.landingFaqGrid .faqCard p,
.proofGrid .proofCard strong,
.pricingCard p,
.checkList li,
.storyIntroLead,
.storyDeliverables span,
.storyImpactLead,
.storyOutcome span,
.storyQuoteCard blockquote {
  font-size: 16px !important;
  line-height: 1.5 !important;
}
.toolCard h3,
.pillarCard h3 {
  font-size: clamp(23px, 2vw, 28px) !important;
}
.sectionHeader.centeredHeader > p:not(.eyebrow) {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px !important;
  line-height: 1.5 !important;
}
.revenueCalculator .calculatorCopy p {
  max-width: 640px;
  font-size: 18px !important;
  line-height: 1.5 !important;
}
@media (max-width: 760px) {
  .landingTopbar .logoBrand .brandLogo,
  .authTop .logoBrand .brandLogo {
    width: 148px !important;
    max-width: 48vw !important;
  }
  .sidebar .logoBrand .brandLogo,
  .playTop .logoBrand .brandLogo,
  .staffTop .logoBrand .brandLogo,
  .footerBrandBlock .logoBrand .brandLogo {
    width: 122px !important;
    max-width: 122px !important;
  }
  .landingHeroCopy p {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
  .heroMicroProof {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .heroMicroProof span {
    width: 100% !important;
    justify-content: flex-start !important;
    min-height: 46px !important;
    font-size: 15px !important;
    padding: 0 16px !important;
  }
  .sectionHeader.centeredHeader > p:not(.eyebrow),
  .storyImpactLead,
  .calculatorHeader em,
  .breakEvenBox p,
  .proofSection .sectionHeader p:not(.eyebrow) {
    display: none !important;
  }
  .sectionHeader.centeredHeader h2 {
    max-width: 96%;
    margin-left: auto;
    margin-right: auto;
  }
  .growthPillars,
  .toolGrid,
  .improvedSteps,
  .landingFaqGrid,
  .proofGrid {
    gap: 12px !important;
  }
  .pillarCard,
  .toolCard,
  .improvedSteps .stepCard,
  .landingFaqGrid .faqCard,
  .proofGrid .proofCard,
  .pricingCard {
    padding: 22px !important;
    gap: 9px !important;
  }
  .toolCard,
  .pillarCard,
  .improvedSteps .stepCard,
  .landingFaqGrid .faqCard {
    border-radius: 26px !important;
  }
  .pillarCard p,
  .toolCard p,
  .improvedSteps .stepCard p,
  .landingFaqGrid .faqCard p,
  .proofGrid .proofCard strong,
  .pricingCard p,
  .checkList li,
  .storyIntroLead,
  .storyDeliverables span,
  .storyOutcome span,
  .storyQuoteCard blockquote {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
  .toolCard h3,
  .pillarCard h3,
  .improvedSteps .stepCard h3,
  .landingFaqGrid .faqCard h3 {
    font-size: 22px !important;
    line-height: 1.08 !important;
  }
  .toolIcon,
  .pillarIcon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    font-size: 18px !important;
  }
  .calcTrustRow {
    display: none !important;
  }
  .revenueCalculator .calculatorCopy p {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
  .calculatorHeader strong {
    font-size: 24px !important;
  }
  .calcResultCard span,
  .calcResultCard small {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .storyDeliverables {
    gap: 8px !important;
  }
  .storySoftStats div {
    padding: 14px !important;
  }
}
@media (max-width: 420px) {
  .landingTopbar .logoBrand .brandLogo,
  .authTop .logoBrand .brandLogo {
    width: 132px !important;
    max-width: 48vw !important;
  }
}


/* LocalSpin v56: airier mobile landing spacing and richer background UI */
.landingPageV56 {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 9% 8%, rgba(255,122,26,.20), transparent 28rem),
    radial-gradient(circle at 92% 20%, rgba(124,58,237,.13), transparent 30rem),
    radial-gradient(circle at 52% 78%, rgba(255,205,86,.10), transparent 28rem),
    linear-gradient(180deg, #fff9f2 0%, #f7f0e8 42%, #fff9f2 100%) !important;
}
.landingPageV56::before,
.landingPageV56::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}
.landingPageV56::before {
  inset: 0;
  opacity: .42;
  background:
    linear-gradient(rgba(17,24,39,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,24,39,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.36) 48%, transparent 100%);
}
.landingPageV56::after {
  width: min(540px, 74vw);
  height: min(540px, 74vw);
  right: -18vw;
  top: 22vh;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(238,66,102,.16), rgba(124,58,237,.12) 42%, transparent 70%);
  filter: blur(4px);
  opacity: .72;
}
.landingPageV56 > * {
  position: relative;
  z-index: 1;
}
.landingPageV56 .section,
.landingPageV56 .landingHero {
  position: relative;
}
.landingPageV56 #features::before,
.landingPageV56 #story::before,
.landingPageV56 #faq::before {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,122,26,.16), rgba(238,66,102,.12), rgba(124,58,237,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.landingPageV56 #features::before {
  width: 92px;
  height: 92px;
  right: min(8vw, 72px);
  top: 24px;
}
.landingPageV56 #story::before {
  width: 118px;
  height: 118px;
  left: min(7vw, 70px);
  top: 58px;
  opacity: .58;
}
.landingPageV56 #faq::before {
  width: 82px;
  height: 82px;
  right: min(10vw, 96px);
  bottom: 64px;
  opacity: .50;
}
@media (min-width: 761px) {
  .landingPageV56 .section {
    padding-top: 82px !important;
    padding-bottom: 82px !important;
  }
  .landingPageV56 .sectionHeader {
    margin-bottom: 32px !important;
  }
}
@media (max-width: 760px) {
  .landingPageV56 {
    background:
      radial-gradient(circle at 0% 7%, rgba(255,122,26,.20), transparent 20rem),
      radial-gradient(circle at 110% 24%, rgba(124,58,237,.16), transparent 22rem),
      radial-gradient(circle at 30% 84%, rgba(255,214,102,.12), transparent 20rem),
      linear-gradient(180deg, #fff9f2 0%, #f8f0e7 44%, #fffaf5 100%) !important;
  }
  .landingPageV56::before {
    opacity: .28;
    background-size: 38px 38px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.30) 45%, transparent 100%);
  }
  .landingPageV56::after {
    width: 330px;
    height: 330px;
    right: -170px;
    top: 16vh;
    opacity: .78;
  }
  .landingPageV56 .landingHero {
    padding-top: 34px !important;
    padding-bottom: 50px !important;
    gap: 30px !important;
  }
  .landingPageV56 .landingHeroCopy {
    gap: 20px !important;
  }
  .landingPageV56 .landingHeroCopy h1 {
    margin-bottom: 2px !important;
  }
  .landingPageV56 .landingHeroCopy p {
    line-height: 1.58 !important;
    max-width: 96% !important;
  }
  .landingPageV56 .heroActions {
    gap: 13px !important;
    margin-top: 4px !important;
  }
  .landingPageV56 .heroActions .primaryBtn,
  .landingPageV56 .heroActions .secondaryBtn {
    min-height: 50px !important;
  }
  .landingPageV56 .heroMicroProof {
    gap: 11px !important;
    margin-top: 10px !important;
  }
  .landingPageV56 .heroMicroProof span {
    min-height: 50px !important;
    border-radius: 20px !important;
  }
  .landingPageV56 .landingHeroVisual {
    padding-top: 10px !important;
    padding-bottom: 30px !important;
  }
  .landingPageV56 .heroDemoShell {
    gap: 18px !important;
  }
  .landingPageV56 .customerPhone,
  .landingPageV56 .dashboardPreviewCard,
  .landingPageV56 .scanLinkCard {
    width: min(348px, 92vw) !important;
  }
  .landingPageV56 .section {
    width: min(100% - 28px, 1180px) !important;
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }
  .landingPageV56 .section + .section {
    margin-top: 16px !important;
  }
  .landingPageV56 .sectionHeader {
    gap: 16px !important;
    margin-bottom: 28px !important;
  }
  .landingPageV56 .sectionHeader.centeredHeader h2 {
    max-width: 98% !important;
    font-size: clamp(31px, 9.8vw, 43px) !important;
    line-height: 1.09 !important;
  }
  .landingPageV56 .eyebrow {
    margin-bottom: 2px !important;
  }
  .landingPageV56 .growthPillars {
    width: calc(100% - 28px) !important;
    padding-top: 58px !important;
    padding-bottom: 72px !important;
    gap: 20px !important;
  }
  .landingPageV56 .growthPillars + #features {
    padding-top: 76px !important;
  }
  .landingPageV56 .toolGrid,
  .landingPageV56 .improvedSteps,
  .landingPageV56 .landingFaqGrid,
  .landingPageV56 .proofGrid,
  .landingPageV56 .pricingWrap,
  .landingPageV56 .calculatorResults,
  .landingPageV56 .storyOutcomeGrid {
    gap: 20px !important;
  }
  .landingPageV56 .pillarCard,
  .landingPageV56 .toolCard,
  .landingPageV56 .improvedSteps .stepCard,
  .landingPageV56 .landingFaqGrid .faqCard,
  .landingPageV56 .proofGrid .proofCard,
  .landingPageV56 .pricingCard {
    padding: 28px 24px !important;
    gap: 15px !important;
    border-radius: 31px !important;
    box-shadow: 0 22px 56px rgba(17,24,39,.075) !important;
  }
  .landingPageV56 .pillarCard p,
  .landingPageV56 .toolCard p,
  .landingPageV56 .improvedSteps .stepCard p,
  .landingPageV56 .landingFaqGrid .faqCard p,
  .landingPageV56 .proofGrid .proofCard strong,
  .landingPageV56 .pricingCard p,
  .landingPageV56 .checkList li,
  .landingPageV56 .storyIntroLead,
  .landingPageV56 .storyDeliverables span,
  .landingPageV56 .storyOutcome span,
  .landingPageV56 .storyQuoteCard blockquote {
    line-height: 1.62 !important;
  }
  .landingPageV56 .toolIcon,
  .landingPageV56 .pillarIcon {
    margin-bottom: 2px !important;
  }
  .landingPageV56 .howSectionV50 {
    width: 100vw !important;
    padding-top: 78px !important;
    padding-bottom: 82px !important;
    margin-top: 24px !important;
    margin-bottom: 20px !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 0% 0%, rgba(255,122,26,.18), transparent 18rem),
      radial-gradient(circle at 100% 78%, rgba(124,58,237,.12), transparent 19rem),
      linear-gradient(180deg, rgba(255,248,239,.96), rgba(255,255,255,.92)) !important;
  }
  .landingPageV56 .howSectionV50 .sectionHeader,
  .landingPageV56 .howSectionV50 .stepGrid,
  .landingPageV56 .howSectionV50 .centerCta {
    width: min(100% - 28px, 1180px) !important;
  }
  .landingPageV56 .howSectionV50 .centerCta {
    margin-top: 28px !important;
  }
  .landingPageV56 .revenueCalculator {
    padding: 76px 22px !important;
    border-radius: 38px !important;
    gap: 28px !important;
    width: calc(100% - 28px) !important;
  }
  .landingPageV56 .landingCalculatorCard,
  .landingPageV56 .storyIntroCardV52,
  .landingPageV56 .storyImpactPanelV51 {
    border-radius: 32px !important;
    box-shadow: 0 26px 70px rgba(17,24,39,.10) !important;
  }
  .landingPageV56 .landingCalculatorCard {
    padding: 24px !important;
  }
  .landingPageV56 .calculatorInputs {
    gap: 16px !important;
  }
  .landingPageV56 .breakEvenBox {
    margin-top: 6px !important;
    padding: 18px !important;
    border-radius: 24px !important;
  }
  .landingPageV56 .customerStoryV52 {
    padding-top: 78px !important;
    padding-bottom: 78px !important;
  }
  .landingPageV56 .customerStoryV52 .storyCaseV52 {
    gap: 22px !important;
  }
  .landingPageV56 .storyIntroCardV52,
  .landingPageV56 .storyImpactPanelV51 {
    padding: 24px !important;
  }
  .landingPageV56 .storyDeliverables {
    padding: 20px !important;
    gap: 12px !important;
    border-radius: 26px !important;
  }
  .landingPageV56 .storySoftStats {
    gap: 14px !important;
  }
  .landingPageV56 .storyCtas {
    gap: 12px !important;
    margin-top: 4px !important;
  }
  .landingPageV56 .proofSection,
  .landingPageV56 .pricingSection,
  .landingPageV56 .faqSection {
    padding-top: 78px !important;
    padding-bottom: 78px !important;
  }
  .landingPageV56 .centerCta {
    margin-top: 28px !important;
  }
}
@media (max-width: 420px) {
  .landingPageV56 .section {
    width: min(100% - 24px, 1180px) !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .landingPageV56 .growthPillars,
  .landingPageV56 .revenueCalculator {
    width: calc(100% - 24px) !important;
  }
  .landingPageV56 .pillarCard,
  .landingPageV56 .toolCard,
  .landingPageV56 .improvedSteps .stepCard,
  .landingPageV56 .landingFaqGrid .faqCard,
  .landingPageV56 .proofGrid .proofCard,
  .landingPageV56 .pricingCard,
  .landingPageV56 .landingCalculatorCard,
  .landingPageV56 .storyIntroCardV52,
  .landingPageV56 .storyImpactPanelV51 {
    padding: 24px 21px !important;
  }
}


/* LocalSpin v57: refined mobile spacing, smaller hero headline, full-width mobile sections */
@media (max-width: 760px) {
  .landingPageV56 .landingHero {
    width: 100% !important;
    max-width: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 30px !important;
    padding-bottom: 36px !important;
    gap: 24px !important;
  }
  .landingPageV56 .landingHeroCopy h1 {
    font-size: clamp(34px, 10.6vw, 48px) !important;
    line-height: .96 !important;
    letter-spacing: -.072em !important;
    max-width: 100% !important;
  }
  .landingPageV56 .landingHeroCopy {
    gap: 16px !important;
  }
  .landingPageV56 .landingHeroCopy p {
    max-width: 100% !important;
  }
  .landingPageV56 .landingHeroVisual {
    width: 100% !important;
    min-height: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 18px !important;
  }
  .landingPageV56 .heroDemoShell {
    width: 100% !important;
    gap: 14px !important;
  }
  .landingPageV56 .customerPhone,
  .landingPageV56 .dashboardPreviewCard,
  .landingPageV56 .scanLinkCard {
    width: min(100%, 348px) !important;
  }
  .landingPageV56 .section,
  .landingPageV56 .growthPillars,
  .landingPageV56 .revenueCalculator,
  .landingPageV56 .customerStoryV52,
  .landingPageV56 .proofSection,
  .landingPageV56 .pricingSection,
  .landingPageV56 .faqSection {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  .landingPageV56 .section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .landingPageV56 .section + .section {
    margin-top: 8px !important;
  }
  .landingPageV56 .growthPillars {
    padding-top: 46px !important;
    padding-bottom: 54px !important;
    gap: 16px !important;
  }
  .landingPageV56 .growthPillars + #features {
    padding-top: 60px !important;
  }
  .landingPageV56 .sectionHeader {
    margin-bottom: 22px !important;
    gap: 12px !important;
  }
  .landingPageV56 .toolGrid,
  .landingPageV56 .improvedSteps,
  .landingPageV56 .landingFaqGrid,
  .landingPageV56 .proofGrid,
  .landingPageV56 .pricingWrap,
  .landingPageV56 .calculatorResults,
  .landingPageV56 .storyOutcomeGrid {
    gap: 16px !important;
  }
  .landingPageV56 .pillarCard,
  .landingPageV56 .toolCard,
  .landingPageV56 .improvedSteps .stepCard,
  .landingPageV56 .landingFaqGrid .faqCard,
  .landingPageV56 .proofGrid .proofCard,
  .landingPageV56 .pricingCard {
    padding: 25px 22px !important;
    border-radius: 28px !important;
  }
  .landingPageV56 .howSectionV50 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 64px !important;
    padding-bottom: 68px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .landingPageV56 .howSectionV50 .sectionHeader,
  .landingPageV56 .howSectionV50 .stepGrid,
  .landingPageV56 .howSectionV50 .centerCta {
    width: 100% !important;
    max-width: none !important;
  }
  .landingPageV56 .revenueCalculator {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    gap: 24px !important;
    border-radius: 30px !important;
  }
  .landingPageV56 .customerStoryV52 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .landingPageV56 .proofSection,
  .landingPageV56 .pricingSection,
  .landingPageV56 .faqSection {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}
@media (max-width: 420px) {
  .landingPageV56 .landingHero {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: 32px !important;
  }
  .landingPageV56 .landingHeroCopy h1 {
    font-size: clamp(32px, 10.2vw, 42px) !important;
    line-height: .98 !important;
  }
  .landingPageV56 .section,
  .landingPageV56 .growthPillars,
  .landingPageV56 .revenueCalculator,
  .landingPageV56 .customerStoryV52,
  .landingPageV56 .proofSection,
  .landingPageV56 .pricingSection,
  .landingPageV56 .faqSection,
  .landingPageV56 .howSectionV50 {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .landingPageV56 .section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .landingPageV56 .howSectionV50,
  .landingPageV56 .revenueCalculator,
  .landingPageV56 .customerStoryV52,
  .landingPageV56 .proofSection,
  .landingPageV56 .pricingSection,
  .landingPageV56 .faqSection {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}


/* LocalSpin v58: smoother mobile section flow and premium scroll reveals */
.revealOnScroll {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition:
    opacity .72s cubic-bezier(.2,.8,.2,1),
    transform .72s cubic-bezier(.2,.8,.2,1),
    filter .72s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
  filter: saturate(.96);
}
.revealOnScroll.isVisible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: saturate(1);
}
.landingPageV56 .section::after,
.landingPageV56 .growthPillars::after,
.landingPageV56 .howSectionV50::after,
.landingPageV56 .revenueCalculator::after,
.landingPageV56 .customerStoryV52::after,
.landingPageV56 .proofSection::after,
.landingPageV56 .pricingSection::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: min(720px, 74vw);
  height: 52px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,122,26,.12), rgba(238,66,102,.07) 42%, transparent 72%);
  filter: blur(10px);
  opacity: .62;
  z-index: -1;
}
.landingPageV56 .howSectionV50::after,
.landingPageV56 .revenueCalculator::after {
  opacity: .74;
  background: radial-gradient(ellipse at center, rgba(124,58,237,.11), rgba(255,122,26,.09) 48%, transparent 72%);
}
@media (max-width: 760px) {
  .landingPageV56 .sectionHeader.centeredHeader h2,
  .landingPageV56 .calculatorCopy h2,
  .landingPageV56 .pricingCard h2 {
    font-size: clamp(25px, 7.3vw, 33px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.055em !important;
  }
  .landingPageV56 .storyImpactPanelV51 h3,
  .landingPageV56 .storyIntroCardV52 h3 {
    font-size: clamp(23px, 6.8vw, 30px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
  }
  .landingPageV56 .toolCard h3,
  .landingPageV56 .pillarCard h3,
  .landingPageV56 .improvedSteps .stepCard h3,
  .landingPageV56 .landingFaqGrid .faqCard h3 {
    font-size: 20px !important;
    line-height: 1.14 !important;
    letter-spacing: -.03em !important;
  }
  .landingPageV56 .section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .landingPageV56 .growthPillars {
    padding-top: 42px !important;
    padding-bottom: 48px !important;
  }
  .landingPageV56 .growthPillars + #features {
    padding-top: 54px !important;
  }
  .landingPageV56 .howSectionV50,
  .landingPageV56 .revenueCalculator,
  .landingPageV56 .customerStoryV52,
  .landingPageV56 .proofSection,
  .landingPageV56 .pricingSection,
  .landingPageV56 .faqSection {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .landingPageV56 .section + .section {
    margin-top: 0 !important;
  }
  .landingPageV56 .sectionHeader {
    margin-bottom: 20px !important;
  }
  .landingPageV56 .sectionHeader.centeredHeader > p:not(.eyebrow) {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .landingPageV56 #features::before,
  .landingPageV56 #story::before,
  .landingPageV56 #faq::before {
    width: 62px !important;
    height: 62px !important;
    opacity: .38 !important;
  }
  .landingPageV56 .section > *,
  .landingPageV56 .growthPillars > *,
  .landingPageV56 .howSectionV50 > *,
  .landingPageV56 .revenueCalculator > *,
  .landingPageV56 .customerStoryV52 > *,
  .landingPageV56 .proofSection > *,
  .landingPageV56 .pricingSection > *,
  .landingPageV56 .faqSection > * {
    position: relative;
    z-index: 1;
  }
  .landingPageV56 .revealOnScroll {
    transform: translateY(16px) scale(.99);
    transition-duration: .62s;
  }
}
@media (max-width: 420px) {
  .landingPageV56 .sectionHeader.centeredHeader h2,
  .landingPageV56 .calculatorCopy h2,
  .landingPageV56 .pricingCard h2 {
    font-size: clamp(24px, 7.6vw, 30px) !important;
  }
  .landingPageV56 .howSectionV50,
  .landingPageV56 .revenueCalculator,
  .landingPageV56 .customerStoryV52,
  .landingPageV56 .proofSection,
  .landingPageV56 .pricingSection,
  .landingPageV56 .faqSection,
  .landingPageV56 .section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .revealOnScroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
  }
}


/* LocalSpin v59: full-width mobile footer, smoother section flow, lighter mobile feature cards and refined reveals */
.revealOnScroll {
  opacity: 0 !important;
  transform: translate3d(0, 14px, 0) !important;
  transition:
    opacity .78s cubic-bezier(.16, 1, .3, 1),
    transform .78s cubic-bezier(.16, 1, .3, 1) !important;
  transition-delay: var(--reveal-delay, 0ms) !important;
  filter: none !important;
  backface-visibility: hidden !important;
  will-change: opacity, transform !important;
}
.revealOnScroll.isVisible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  filter: none !important;
}
@media (max-width: 760px) {
  .landingPageV56 {
    overflow-x: clip !important;
  }

  .landingPageV56 .landingHero,
  .landingPageV56 .growthPillars,
  .landingPageV56 #features.section,
  .landingPageV56 .howSectionV50,
  .landingPageV56 .revenueCalculator,
  .landingPageV56 .customerStoryV52,
  .landingPageV56 .proofSection,
  .landingPageV56 .pricingSection,
  .landingPageV56 .faqSection {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
  }

  .landingPageV56 #features.section,
  .landingPageV56 .customerStoryV52,
  .landingPageV56 .proofSection,
  .landingPageV56 .pricingSection,
  .landingPageV56 .faqSection {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .landingPageV56 .growthPillars {
    padding-top: 40px !important;
    padding-bottom: 46px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .landingPageV56 .growthPillars + #features {
    padding-top: 52px !important;
  }

  .landingPageV56 .howSectionV50 {
    padding-top: 56px !important;
    padding-bottom: 60px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.68), inset 0 -1px 0 rgba(21,18,14,.05) !important;
  }

  .landingPageV56 .revenueCalculator {
    padding-top: 58px !important;
    padding-bottom: 60px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    gap: 22px !important;
    background:
      radial-gradient(circle at 10% 2%, rgba(255,122,26,.24), transparent 17rem),
      radial-gradient(circle at 100% 78%, rgba(124,58,237,.18), transparent 18rem),
      linear-gradient(165deg, #372017 0%, #15101d 50%, #2a1431 100%) !important;
    box-shadow:
      inset 0 28px 52px rgba(255,255,255,.035),
      inset 0 -20px 44px rgba(0,0,0,.16) !important;
  }

  .landingPageV56 .revenueCalculator::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 28px !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255,248,240,.30), rgba(255,248,240,0)) !important;
    border-radius: 0 !important;
    z-index: 0 !important;
  }

  .landingPageV56 .section::after,
  .landingPageV56 .growthPillars::after,
  .landingPageV56 .howSectionV50::after,
  .landingPageV56 .revenueCalculator::after,
  .landingPageV56 .customerStoryV52::after,
  .landingPageV56 .proofSection::after,
  .landingPageV56 .pricingSection::after {
    display: none !important;
  }

  .landingPageV56 .sectionHeader.centeredHeader h2,
  .landingPageV56 .calculatorCopy h2,
  .landingPageV56 .pricingCard h2 {
    font-size: clamp(23px, 7.2vw, 31px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.052em !important;
  }

  .landingPageV56 .storyImpactPanelV51 h3,
  .landingPageV56 .storyIntroCardV52 h3 {
    font-size: clamp(22px, 6.5vw, 29px) !important;
    line-height: 1.08 !important;
  }

  .landingPageV56 .toolGrid {
    gap: 12px !important;
  }

  .landingPageV56 .toolCard {
    min-height: auto !important;
    padding: 18px 17px !important;
    gap: 8px !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 34px rgba(17,24,39,.058) !important;
  }

  .landingPageV56 .toolIcon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 13px !important;
    font-size: 16px !important;
    margin-bottom: 0 !important;
    box-shadow: 0 10px 22px rgba(251,44,131,.16) !important;
  }

  .landingPageV56 .toolCard h3 {
    font-size: 18px !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
  }

  .landingPageV56 .toolCard p {
    font-size: 13.5px !important;
    line-height: 1.38 !important;
    max-width: 96% !important;
  }

  .landingPageV56 .pillarCard,
  .landingPageV56 .improvedSteps .stepCard,
  .landingPageV56 .landingFaqGrid .faqCard,
  .landingPageV56 .proofGrid .proofCard,
  .landingPageV56 .pricingCard {
    border-radius: 24px !important;
  }

  .landingPageV56 .improvedSteps .stepCard {
    padding: 22px 20px !important;
  }

  .landingPageV56 .landingCalculatorCard,
  .landingPageV56 .storyIntroCardV52,
  .landingPageV56 .storyImpactPanelV51 {
    border-radius: 26px !important;
  }

  .landingPageV56 .publicFooter,
  .publicFooter {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 30px !important;
    padding-bottom: 92px !important;
  }

  .publicFooter .footerGrid,
  .publicFooter .footerBottom {
    width: 100% !important;
    max-width: none !important;
  }

  .landingPageV56 .revealOnScroll {
    transform: translate3d(0, 10px, 0) !important;
    transition-duration: .66s !important;
  }
}
@media (max-width: 420px) {
  .landingPageV56 #features.section,
  .landingPageV56 .growthPillars,
  .landingPageV56 .howSectionV50,
  .landingPageV56 .revenueCalculator,
  .landingPageV56 .customerStoryV52,
  .landingPageV56 .proofSection,
  .landingPageV56 .pricingSection,
  .landingPageV56 .faqSection {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .landingPageV56 #features.section,
  .landingPageV56 .customerStoryV52,
  .landingPageV56 .proofSection,
  .landingPageV56 .pricingSection,
  .landingPageV56 .faqSection {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .landingPageV56 .toolCard {
    padding: 16px 15px !important;
    border-radius: 20px !important;
  }

  .landingPageV56 .toolCard h3 {
    font-size: 17px !important;
  }

  .landingPageV56 .toolCard p {
    font-size: 13px !important;
    line-height: 1.34 !important;
  }

  .landingPageV56 .toolIcon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
}


/* LocalSpin v60: smoother single-scroll mobile experience, accordion FAQ and compact mobile steps */
.landingPageV56.siteShell.route {
  overflow-y: visible !important;
  overflow-x: clip !important;
  min-height: 100dvh !important;
}

html, body {
  overscroll-behavior-y: auto;
}

.landingPageV56 {
  padding-bottom: 0 !important;
}

.landingPageV56 .publicFooter,
.publicFooter {
  margin-bottom: 0 !important;
}

.landingFaqItem {
  display: block !important;
  padding: 0 !important;
  overflow: hidden;
}
.landingFaqItem summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
  padding: 22px 24px;
  font-weight: 950;
}
.landingFaqItem summary::-webkit-details-marker { display: none; }
.landingFaqItem summary span {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -.035em;
}
.landingFaqItem summary b {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a1a, #ee4266 62%, #7c3aed);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(238,66,102,.18);
  transition: transform .24s ease, box-shadow .24s ease;
}
.landingFaqItem[open] summary b {
  transform: rotate(45deg);
  box-shadow: 0 16px 30px rgba(238,66,102,.24);
}
.landingFaqItem p {
  padding: 0 24px 24px;
  margin: -4px 0 0;
  color: #5f554c;
}

/* Make reveals feel premium without creating scroll jank. */
.revealOnScroll {
  opacity: 0 !important;
  transform: translate3d(0, 8px, 0) !important;
  transition:
    opacity .58s cubic-bezier(.22, 1, .36, 1),
    transform .58s cubic-bezier(.22, 1, .36, 1) !important;
  transition-delay: var(--reveal-delay, 0ms) !important;
  will-change: auto !important;
  filter: none !important;
}
.revealOnScroll.isVisible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

@media (max-width: 760px) {
  html, body, #app {
    min-height: 100dvh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .landingPageV56.siteShell.route {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }
  .landingPageV56 .landingHero,
  .landingPageV56 #features.section,
  .landingPageV56 .growthPillars,
  .landingPageV56 .howSectionV50,
  .landingPageV56 .revenueCalculator,
  .landingPageV56 .customerStoryV52,
  .landingPageV56 .proofSection,
  .landingPageV56 .pricingSection,
  .landingPageV56 .faqSection {
    transform: none !important;
  }
  .landingPageV56 .revealOnScroll {
    transform: translate3d(0, 6px, 0) !important;
    transition-duration: .52s !important;
  }
  .landingPageV56 .revealOnScroll.isVisible {
    transform: translate3d(0, 0, 0) !important;
  }
  .landingPageV56 .landingFaqGrid {
    gap: 10px !important;
  }
  .landingPageV56 .landingFaqItem {
    border-radius: 20px !important;
    box-shadow: 0 10px 24px rgba(17,24,39,.052) !important;
  }
  .landingFaqItem summary {
    min-height: 58px;
    padding: 17px 17px;
    gap: 12px;
  }
  .landingFaqItem summary span {
    font-size: 16px !important;
    line-height: 1.18 !important;
    letter-spacing: -.025em !important;
  }
  .landingFaqItem summary b {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 17px;
  }
  .landingFaqItem p {
    padding: 0 17px 17px !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  .landingPageV56 .improvedSteps {
    gap: 12px !important;
  }
  .landingPageV56 .improvedStepsV50 .stepCard,
  .landingPageV56 .improvedSteps .stepCard {
    min-height: auto !important;
    padding: 17px 16px !important;
    gap: 9px !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 28px rgba(17,24,39,.056) !important;
  }
  .landingPageV56 .improvedStepsV50 .stepIcon,
  .landingPageV56 .improvedSteps .stepIcon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    box-shadow: 0 10px 20px rgba(238,66,102,.16) !important;
  }
  .landingPageV56 .improvedSteps .stepCard h3 {
    font-size: 17px !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
  }
  .landingPageV56 .improvedSteps .stepCard p {
    font-size: 13px !important;
    line-height: 1.42 !important;
  }
  .landingPageV56 .publicFooter,
  .publicFooter {
    width: 100vw !important;
    max-width: 100vw !important;
    flex: 0 0 auto !important;
    margin: 0 calc(50% - 50vw) -1px !important;
    padding-bottom: max(34px, calc(30px + env(safe-area-inset-bottom))) !important;
  }
}

@media (max-width: 420px) {
  .landingPageV56 .improvedStepsV50 .stepCard,
  .landingPageV56 .improvedSteps .stepCard {
    padding: 15px 14px !important;
  }
  .landingPageV56 .improvedStepsV50 .stepIcon,
  .landingPageV56 .improvedSteps .stepIcon {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    font-size: 12px !important;
  }
}


/* LocalSpin v61: true single-scroll mobile page, smoother reveals and no nested scrollbars */
html {
  min-height: 100% !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body {
  min-height: 100% !important;
  height: auto !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}
#app {
  min-height: 100dvh !important;
  height: auto !important;
  overflow: visible !important;
}
.siteShell.route,
.landingPageV56.siteShell.route,
.siteShell.publicPage.route {
  min-height: 100dvh !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}
.landingPageV56 {
  min-height: 100dvh !important;
  height: auto !important;
  overflow: visible !important;
  isolation: isolate;
}
html:has(.landingPageV56),
html:has(.publicPage) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: none !important;
}
body:has(.landingPageV56),
body:has(.publicPage) {
  overflow-x: clip !important;
  overflow-y: visible !important;
  max-height: none !important;
}
.landingPageV56 .publicFooter,
.publicFooter {
  flex: 0 0 auto !important;
  margin-bottom: 0 !important;
}

/* Keep the reveal effect light, smooth and GPU-friendly without becoming a scroll container. */
.revealOnScroll {
  opacity: 0 !important;
  transform: translate3d(0, 12px, 0) !important;
  transition:
    opacity .52s cubic-bezier(.22, 1, .36, 1),
    transform .64s cubic-bezier(.16, 1, .3, 1) !important;
  transition-delay: var(--reveal-delay, 0ms) !important;
  will-change: transform, opacity !important;
  contain: paint;
}
.revealOnScroll.isVisible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}
@media (max-width: 760px) {
  html,
  #app {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow-x: hidden !important;
  }
  html {
    overflow-y: auto !important;
  }
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    position: static !important;
    touch-action: pan-y;
  }
  .siteShell.route,
  .landingPageV56.siteShell.route,
  .siteShell.publicPage.route {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }
  .landingPageV56 {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }
  .landingPageV56 .landingHero,
  .landingPageV56 .growthPillars,
  .landingPageV56 #features.section,
  .landingPageV56 .howSectionV50,
  .landingPageV56 .revenueCalculator,
  .landingPageV56 .customerStoryV52,
  .landingPageV56 .proofSection,
  .landingPageV56 .pricingSection,
  .landingPageV56 .faqSection {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .landingPageV56 .publicFooter,
  .publicFooter {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: max(36px, calc(28px + env(safe-area-inset-bottom))) !important;
  }
  .revealOnScroll {
    transform: translate3d(0, 9px, 0) !important;
    transition-duration: .48s, .58s !important;
    transition-delay: min(var(--reveal-delay, 0ms), 64ms) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .revealOnScroll,
  .revealOnScroll.isVisible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}



/* LocalSpin v62: mobile single-scroll, cleaner hero preview and stronger impact card */
@media (max-width: 760px) {
  html.localspinLandingScroll {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
  body.localspinLandingScroll {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    position: relative !important;
    background: #fff9f2 !important;
  }
  body.localspinLandingScroll #app {
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.localspinLandingScroll .siteShell.route,
  body.localspinLandingScroll .landingPageV56.siteShell.route {
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Remove the grey card-like background behind the hero demo on mobile. */
  body.localspinLandingScroll .landingPageV56 .heroDemoShell .heroGlow,
  body.localspinLandingScroll .landingPageV56 .heroGlow {
    display: none !important;
  }
  body.localspinLandingScroll .landingPageV56 .heroDemoShell {
    background:
      radial-gradient(circle at 15% 14%, rgba(255,122,26,.14), transparent 12rem),
      radial-gradient(circle at 88% 76%, rgba(124,58,237,.13), transparent 13rem) !important;
    border-radius: 0 !important;
    padding: 4px 0 0 !important;
  }

  /* Smoother reveals without creating heavy scroll layers on mobile. */
  body.localspinLandingScroll .revealOnScroll {
    opacity: 0 !important;
    transform: translate3d(0, 7px, 0) !important;
    transition:
      opacity .44s cubic-bezier(.22, 1, .36, 1),
      transform .52s cubic-bezier(.22, 1, .36, 1) !important;
    transition-delay: 0ms !important;
    will-change: auto !important;
    contain: none !important;
  }
  body.localspinLandingScroll .revealOnScroll.isVisible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }
}

.impactPreviewCard {
  background:
    radial-gradient(circle at 15% 0%, rgba(255,122,26,.18), transparent 12rem),
    radial-gradient(circle at 100% 100%, rgba(124,58,237,.18), transparent 14rem),
    rgba(17,24,39,.96) !important;
}
.impactPreviewGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.impactPreviewGrid div {
  min-height: 78px;
  align-content: center;
}
.impactPreviewGrid strong {
  font-size: 25px !important;
  color: #fff !important;
  line-height: .95;
}
.impactPreviewGrid span {
  font-size: 11px !important;
  line-height: 1.18 !important;
}
.impactPreviewCard p {
  color: rgba(255,255,255,.82) !important;
  line-height: 1.42 !important;
}
@media (max-width: 760px) {
  .impactPreviewCard {
    width: min(100%, 348px) !important;
    padding: 16px !important;
    gap: 10px !important;
    border-radius: 24px !important;
    box-shadow: 0 22px 54px rgba(17,24,39,.24) !important;
  }
  .impactPreviewCard .dashboardPreviewHead span {
    font-size: 13px !important;
    color: #fff !important;
  }
  .impactPreviewCard .dashboardPreviewHead i {
    font-size: 10px !important;
  }
  .impactPreviewGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .impactPreviewGrid div {
    padding: 10px 8px !important;
    min-height: 68px !important;
    border-radius: 16px !important;
  }
  .impactPreviewGrid strong {
    font-size: 20px !important;
    letter-spacing: -.05em !important;
  }
  .impactPreviewGrid span {
    font-size: 9.6px !important;
    line-height: 1.12 !important;
  }
  .impactPreviewCard p {
    font-size: 11.5px !important;
    line-height: 1.38 !important;
  }
}
@media (max-width: 380px) {
  .impactPreviewGrid strong { font-size: 18px !important; }
  .impactPreviewGrid span { font-size: 9px !important; }
  .impactPreviewCard p { font-size: 11px !important; }
}



/* LocalSpin v63: cleaner mobile hero preview card, no shaded demo background */
.impactPreviewCard {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,122,26,.24), transparent 11rem),
    radial-gradient(circle at 100% 100%, rgba(124,58,237,.22), transparent 12rem),
    linear-gradient(145deg, rgba(17,24,39,.98), rgba(23,20,48,.98)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 24px 70px rgba(17,24,39,.28) !important;
}
.impactPreviewCard .dashboardPreviewHead {
  align-items: center !important;
  margin-bottom: 2px !important;
}
.impactPreviewCard .dashboardPreviewHead span {
  color: #fff !important;
  letter-spacing: -.02em !important;
}
.impactPreviewCard .dashboardPreviewHead i {
  color: #6ee7b7 !important;
  background: rgba(16,185,129,.16) !important;
  border: 1px solid rgba(110,231,183,.18) !important;
}
.impactPreviewGrid { gap: 8px !important; }
.impactPreviewGrid div {
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.impactPreviewGrid strong {
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.18) !important;
}
.impactPreviewGrid span { color: rgba(255,255,255,.76) !important; }
.impactPreviewCard p { display: none !important; }

@media (max-width: 760px) {
  .landingPageV56 .landingHeroVisual,
  .landingPageV56 .heroDemoShell,
  body.localspinLandingScroll .landingPageV56 .landingHeroVisual,
  body.localspinLandingScroll .landingPageV56 .heroDemoShell {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  .landingPageV56 .heroDemoShell,
  body.localspinLandingScroll .landingPageV56 .heroDemoShell {
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    gap: 12px !important;
  }
  .landingPageV56 .heroGlow,
  .landingPageV56 .heroDemoShell .heroGlow,
  body.localspinLandingScroll .landingPageV56 .heroGlow,
  body.localspinLandingScroll .landingPageV56 .heroDemoShell .heroGlow {
    display: none !important;
  }
  .landingPageV56 .heroDemoShell::before,
  .landingPageV56 .heroDemoShell::after,
  .landingPageV56 .landingHeroVisual::before,
  .landingPageV56 .landingHeroVisual::after {
    display: none !important;
    content: none !important;
  }
  .landingPageV56 .scanLinkCard {
    width: min(100%, 336px) !important;
    border-radius: 20px !important;
    padding: 14px 16px !important;
    box-shadow: 0 12px 34px rgba(17,24,39,.10) !important;
  }
  .landingPageV56 .customerPhone {
    width: min(100%, 330px) !important;
    box-shadow: 0 28px 72px rgba(17,24,39,.20), 0 0 0 1px rgba(255,255,255,.16) inset !important;
  }
  .landingPageV56 .impactPreviewCard {
    width: min(100%, 336px) !important;
    padding: 14px !important;
    border-radius: 22px !important;
    gap: 9px !important;
    margin-top: 0 !important;
    box-shadow: 0 18px 44px rgba(17,24,39,.20) !important;
  }
  .landingPageV56 .impactPreviewGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .landingPageV56 .impactPreviewGrid div {
    min-height: 62px !important;
    padding: 9px 7px !important;
    border-radius: 15px !important;
  }
  .landingPageV56 .impactPreviewGrid strong { font-size: 19px !important; }
  .landingPageV56 .impactPreviewGrid span { font-size: 9px !important; line-height: 1.12 !important; }
}
@media (max-width: 380px) {
  .landingPageV56 .scanLinkCard,
  .landingPageV56 .customerPhone,
  .landingPageV56 .impactPreviewCard {
    width: min(100%, 316px) !important;
  }
}


/* LocalSpin v64: more professional hero product preview, cleaner mobile fit */
.heroDemoShell {
  isolation: isolate;
  width: min(520px, 100%) !important;
  gap: 18px !important;
  background: transparent !important;
}
.heroDemoShell::before,
.heroDemoShell::after,
.landingHeroVisual::before,
.landingHeroVisual::after {
  pointer-events: none;
}
.scanLinkCard {
  overflow: hidden;
  width: min(430px, 92%) !important;
  border-radius: 26px !important;
  padding: 17px 20px 17px 22px !important;
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(255,122,26,.13) !important;
  box-shadow: 0 18px 52px rgba(17,24,39,.10), 0 1px 0 rgba(255,255,255,.75) inset !important;
}
.scanLinkCard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff7a1a, #ee4266 58%, #7c3aed);
}
.customerPhone {
  width: min(350px, 84vw) !important;
  padding: 11px !important;
  border-radius: 42px !important;
  background: linear-gradient(150deg, #111827, #090a12 70%, #21132f) !important;
  box-shadow: 0 30px 78px rgba(17,24,39,.20), 0 0 0 1px rgba(255,255,255,.16) inset !important;
}
.phoneGlass {
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,122,26,.09), transparent 10rem),
    linear-gradient(180deg, #fff, #fff8f0 88%) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80) !important;
}
.impactPreviewCard {
  overflow: hidden;
  width: min(430px, 92%) !important;
  border-radius: 27px !important;
  padding: 17px !important;
  gap: 12px !important;
  box-shadow: 0 24px 70px rgba(17,24,39,.24) !important;
}
.impactPreviewCard::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent);
}
.impactPreviewCard::after {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,122,26,.20), transparent 68%);
  opacity: .7;
  pointer-events: none;
}
.impactPreviewCard > * { position: relative; z-index: 1; }
.impactPreviewGrid div {
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.07)) !important;
}

@media (max-width: 760px) {
  .landingPageV56 .landingHeroVisual,
  body.localspinLandingScroll .landingPageV56 .landingHeroVisual {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .landingPageV56 .heroDemoShell,
  body.localspinLandingScroll .landingPageV56 .heroDemoShell {
    width: 100% !important;
    max-width: 342px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    gap: 11px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  .landingPageV56 .heroDemoShell::before,
  .landingPageV56 .heroDemoShell::after,
  .landingPageV56 .landingHeroVisual::before,
  .landingPageV56 .landingHeroVisual::after {
    display: none !important;
    content: none !important;
  }
  .landingPageV56 .scanLinkCard {
    width: 100% !important;
    max-width: 332px !important;
    border-radius: 19px !important;
    padding: 12px 15px 12px 17px !important;
    box-shadow: 0 10px 28px rgba(17,24,39,.08), 0 1px 0 rgba(255,255,255,.82) inset !important;
  }
  .landingPageV56 .scanLinkCard strong {
    font-size: 20px !important;
    line-height: 1 !important;
  }
  .landingPageV56 .scanLinkCard span {
    font-size: 11px !important;
    line-height: 1.28 !important;
  }
  .landingPageV56 .customerPhone {
    width: min(100%, 308px) !important;
    padding: 9px !important;
    border-radius: 34px !important;
    box-shadow: 0 22px 58px rgba(17,24,39,.17), 0 0 0 1px rgba(255,255,255,.16) inset !important;
  }
  .landingPageV56 .phoneGlass {
    border-radius: 25px !important;
    padding: 13px !important;
    gap: 8px !important;
  }
  .landingPageV56 .phoneTopBar {
    font-size: 9.5px !important;
    letter-spacing: .07em !important;
  }
  .landingPageV56 .phoneTopBar strong {
    padding: 5px 7px !important;
    font-size: 9px !important;
  }
  .landingPageV56 .phoneGlass h3 {
    font-size: 23px !important;
    letter-spacing: -.055em !important;
  }
  .landingPageV56 .phoneHint {
    margin-top: -4px !important;
    font-size: 11.2px !important;
    line-height: 1.22 !important;
  }
  .landingPageV56 .phonePrizeWheel {
    --wheel-size: 150px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }
  .landingPageV56 .phoneStepStack {
    gap: 6px !important;
  }
  .landingPageV56 .phoneStepStack span {
    min-height: 34px !important;
    padding: 7px 9px !important;
    border-radius: 12px !important;
    font-size: 10.6px !important;
    gap: 8px !important;
  }
  .landingPageV56 .phoneStepStack b {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
    flex: 0 0 20px !important;
  }
  .landingPageV56 .impactPreviewCard {
    width: 100% !important;
    max-width: 332px !important;
    border-radius: 21px !important;
    padding: 13px !important;
    gap: 9px !important;
    box-shadow: 0 16px 44px rgba(17,24,39,.19) !important;
  }
  .landingPageV56 .impactPreviewCard .dashboardPreviewHead {
    margin-bottom: 1px !important;
  }
  .landingPageV56 .impactPreviewCard .dashboardPreviewHead span {
    font-size: 12px !important;
  }
  .landingPageV56 .impactPreviewCard .dashboardPreviewHead i {
    font-size: 9px !important;
    padding: 4px 7px !important;
  }
  .landingPageV56 .impactPreviewGrid {
    gap: 6px !important;
  }
  .landingPageV56 .impactPreviewGrid div {
    min-height: 57px !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
  }
  .landingPageV56 .impactPreviewGrid strong {
    font-size: 18px !important;
    line-height: .95 !important;
  }
  .landingPageV56 .impactPreviewGrid span {
    font-size: 8.4px !important;
    line-height: 1.08 !important;
  }
}
@media (max-width: 370px) {
  .landingPageV56 .heroDemoShell { max-width: 316px !important; }
  .landingPageV56 .scanLinkCard,
  .landingPageV56 .impactPreviewCard { max-width: 306px !important; }
  .landingPageV56 .customerPhone { width: min(100%, 292px) !important; }
  .landingPageV56 .phonePrizeWheel { --wheel-size: 140px !important; }
}


/* LocalSpin v65: clean hero preview, compact impact card, euro format calculator */
.scanLinkCard { display: none !important; }
.landingHeroVisual,
.heroDemoShell,
body.localspinLandingScroll .landingPageV56 .landingHeroVisual,
body.localspinLandingScroll .landingPageV56 .heroDemoShell {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.heroGlow,
.heroDemoShell::before,
.heroDemoShell::after,
.landingHeroVisual::before,
.landingHeroVisual::after {
  display: none !important;
  content: none !important;
}
.heroDemoShell {
  width: min(420px, 100%) !important;
  max-width: 420px !important;
  padding: 0 !important;
  gap: 14px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.customerPhone {
  width: min(350px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.impactPreviewCard {
  width: min(400px, 100%) !important;
  margin: -2px auto 0 !important;
  border-radius: 26px !important;
  padding: 16px !important;
  gap: 12px !important;
}
.impactPreviewGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.impactPreviewGrid div {
  min-height: 74px !important;
  align-content: center !important;
}
.impactPreviewGrid strong,
.calcResultCard strong,
.revenueResult strong {
  white-space: nowrap !important;
}
.calculatorResults {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}
.revenueResult {
  grid-column: auto !important;
  min-height: 158px !important;
}
.revenueResult strong {
  font-size: clamp(34px, 4.2vw, 54px) !important;
  letter-spacing: -.08em !important;
}
.calcInputWrap b { min-width: 18px; text-align: center; }
@media (max-width: 760px) {
  .landingPageV56 .landingHeroVisual {
    padding-top: 0 !important;
    padding-bottom: 6px !important;
  }
  .landingPageV56 .heroDemoShell,
  body.localspinLandingScroll .landingPageV56 .heroDemoShell {
    width: 100% !important;
    max-width: 318px !important;
    gap: 10px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .landingPageV56 .customerPhone {
    width: min(100%, 304px) !important;
  }
  .landingPageV56 .impactPreviewCard {
    width: min(100%, 318px) !important;
    max-width: 318px !important;
    margin-top: -2px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    gap: 8px !important;
  }
  .landingPageV56 .impactPreviewGrid {
    gap: 6px !important;
  }
  .landingPageV56 .impactPreviewGrid div {
    min-height: 58px !important;
    padding: 8px 6px !important;
    border-radius: 13px !important;
  }
  .landingPageV56 .impactPreviewGrid strong {
    font-size: 17px !important;
    line-height: .95 !important;
  }
  .landingPageV56 .impactPreviewGrid span {
    font-size: 8px !important;
    line-height: 1.08 !important;
  }
  .landingPageV56 .calculatorResults {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .landingPageV56 .calcResultCard,
  .landingPageV56 .revenueResult {
    min-height: 118px !important;
    padding: 12px 9px !important;
    border-radius: 19px !important;
    gap: 5px !important;
  }
  .landingPageV56 .calcResultCard span,
  .landingPageV56 .calcResultCard small {
    font-size: 10px !important;
    line-height: 1.14 !important;
  }
  .landingPageV56 .calcResultCard strong,
  .landingPageV56 .revenueResult strong {
    font-size: clamp(24px, 7.1vw, 32px) !important;
    line-height: .92 !important;
    letter-spacing: -.07em !important;
  }
  .landingPageV56 .landingCalculatorCard {
    padding: 18px !important;
  }
}
@media (max-width: 370px) {
  .landingPageV56 .heroDemoShell { max-width: 302px !important; }
  .landingPageV56 .customerPhone { width: min(100%, 288px) !important; }
  .landingPageV56 .impactPreviewCard { max-width: 302px !important; }
  .landingPageV56 .calculatorResults { gap: 6px !important; }
  .landingPageV56 .calcResultCard,
  .landingPageV56 .revenueResult { padding: 10px 7px !important; }
  .landingPageV56 .calcResultCard span,
  .landingPageV56 .calcResultCard small { font-size: 9px !important; }
  .landingPageV56 .calcResultCard strong,
  .landingPageV56 .revenueResult strong { font-size: 22px !important; }
}


/* LocalSpin v66: centered mobile pillars and polished revenue calculator fit */
@media (max-width: 760px) {
  .landingPageV56 .growthPillars .pillarCard {
    text-align: center !important;
    justify-items: center !important;
    align-content: center !important;
    padding: 24px 22px !important;
  }
  .landingPageV56 .growthPillars .pillarIcon {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .landingPageV56 .growthPillars .pillarCard h3,
  .landingPageV56 .growthPillars .pillarCard p {
    text-align: center !important;
    max-width: 260px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Premium calculator spacing and safer text fitting */
.landingCalculatorCard {
  overflow: hidden !important;
  border: 1px solid rgba(17,24,39,.08) !important;
  background:
    radial-gradient(circle at 88% 16%, rgba(255,122,26,.08), transparent 14rem),
    radial-gradient(circle at 14% 88%, rgba(124,58,237,.06), transparent 16rem),
    rgba(255,255,255,.97) !important;
}
.calculatorHeader {
  align-items: flex-start !important;
}
.calculatorHeader strong {
  max-width: 430px !important;
  line-height: 1.02 !important;
}
.calculatorInputs {
  align-items: end !important;
}
.calcInputWrap {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 10px 24px rgba(255,122,26,.055) !important;
}
.calculatorResults {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}
.calcResultCard,
.revenueResult {
  grid-column: auto !important;
  min-height: 168px !important;
  padding: 20px 18px !important;
  border-radius: 28px !important;
  align-content: center !important;
  justify-content: stretch !important;
  overflow: hidden !important;
}
.calcResultCard span,
.calcResultCard small {
  max-width: 100% !important;
  overflow-wrap: normal !important;
}
.calcResultCard strong,
.revenueResult strong {
  max-width: 100% !important;
  white-space: nowrap !important;
  letter-spacing: -.075em !important;
}
.revenueResult {
  box-shadow: 0 24px 58px rgba(238,66,102,.24), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.revenueResult span,
.revenueResult small {
  color: rgba(255,255,255,.92) !important;
}
.revenueResult strong {
  font-size: clamp(38px, 4.3vw, 58px) !important;
  line-height: .92 !important;
}
.breakEvenBox {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(17,24,39,.10) !important;
}

@media (max-width: 900px) {
  .landingPageV56 .landingCalculatorCard {
    padding: 22px !important;
  }
  .landingPageV56 .calculatorResults {
    gap: 10px !important;
  }
  .landingPageV56 .calcResultCard,
  .landingPageV56 .revenueResult {
    min-height: 142px !important;
    padding: 16px 13px !important;
    border-radius: 24px !important;
  }
  .landingPageV56 .calcResultCard strong,
  .landingPageV56 .revenueResult strong {
    font-size: clamp(30px, 5.2vw, 44px) !important;
  }
  .landingPageV56 .calcResultCard span,
  .landingPageV56 .calcResultCard small {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 760px) {
  .landingPageV56 .revenueCalculator {
    gap: 20px !important;
  }
  .landingPageV56 .landingCalculatorCard {
    padding: 18px !important;
    border-radius: 28px !important;
    gap: 14px !important;
  }
  .landingPageV56 .calculatorHeader {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .landingPageV56 .calculatorHeader strong {
    max-width: 100% !important;
    font-size: clamp(26px, 7.2vw, 32px) !important;
    line-height: 1.04 !important;
  }
  .landingPageV56 .calculatorInputs {
    gap: 10px !important;
  }
  .landingPageV56 .calcInputWrap {
    min-height: 58px !important;
    border-radius: 20px !important;
    padding: 0 14px !important;
  }
  .landingPageV56 .calcInputWrap input {
    font-size: 27px !important;
  }
  .landingPageV56 .calculatorResults {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .landingPageV56 .calcResultCard,
  .landingPageV56 .revenueResult {
    min-height: 112px !important;
    padding: 11px 8px !important;
    border-radius: 19px !important;
    gap: 4px !important;
    align-content: center !important;
  }
  .landingPageV56 .calcResultCard span,
  .landingPageV56 .calcResultCard small {
    font-size: 9.7px !important;
    line-height: 1.16 !important;
    letter-spacing: -.005em !important;
  }
  .landingPageV56 .calcResultCard strong,
  .landingPageV56 .revenueResult strong {
    font-size: clamp(23px, 7vw, 31px) !important;
    line-height: .94 !important;
  }
  .landingPageV56 .breakEvenBox {
    padding: 16px !important;
    border-radius: 21px !important;
  }
  .landingPageV56 .breakEvenBox strong {
    font-size: 17px !important;
    line-height: 1.26 !important;
  }
}

@media (max-width: 380px) {
  .landingPageV56 .landingCalculatorCard {
    padding: 15px !important;
  }
  .landingPageV56 .calculatorResults {
    gap: 6px !important;
  }
  .landingPageV56 .calcResultCard,
  .landingPageV56 .revenueResult {
    min-height: 104px !important;
    padding: 9px 6px !important;
    border-radius: 17px !important;
  }
  .landingPageV56 .calcResultCard span,
  .landingPageV56 .calcResultCard small {
    font-size: 8.7px !important;
    line-height: 1.12 !important;
  }
  .landingPageV56 .calcResultCard strong,
  .landingPageV56 .revenueResult strong {
    font-size: 22px !important;
  }
}


/* LocalSpin v67: desktop calculator sales card fit */
@media (min-width: 901px) {
  .landingPageV56 .calculatorResults {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .landingPageV56 .calcResultCard,
  .landingPageV56 .revenueResult {
    min-width: 0 !important;
    padding: 18px 16px !important;
  }
  .landingPageV56 .revenueResult strong {
    font-size: clamp(36px, 3.15vw, 46px) !important;
    line-height: .95 !important;
    letter-spacing: -.085em !important;
    max-width: 100% !important;
  }
  .landingPageV56 .revenueResult span {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  .landingPageV56 .revenueResult small {
    font-size: 12px !important;
    line-height: 1.22 !important;
  }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .landingPageV56 .landingCalculatorCard {
    padding: 22px !important;
  }
  .landingPageV56 .calculatorResults {
    gap: 12px !important;
  }
  .landingPageV56 .calcResultCard,
  .landingPageV56 .revenueResult {
    padding: 16px 14px !important;
    border-radius: 26px !important;
  }
  .landingPageV56 .revenueResult strong {
    font-size: clamp(34px, 3.35vw, 42px) !important;
  }
}



/* LocalSpin v68: lighter Serendipity spotlight copy and clearer impact cards */
.storyIntroCardV52 {
  gap: 16px !important;
}
.storyIntroCardV52 .storyIntroLead {
  max-width: 520px !important;
  font-size: 16px !important;
  line-height: 1.42 !important;
}
.storyOfferGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 18px !important;
  border-radius: 24px !important;
}
.storyOfferGrid h4 {
  grid-column: 1 / -1 !important;
  margin-bottom: 2px !important;
  font-size: 18px !important;
}
.storyOfferGrid span {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 64px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #fff7ed, #fff) !important;
  border: 1px solid rgba(255,122,26,.13) !important;
  color: #221a15 !important;
  font-size: 14px !important;
  line-height: 1.14 !important;
}
.storyOfferGrid span strong {
  color: #221a15 !important;
  font-size: 14px !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
}
.storyOfferGrid b {
  width: 24px !important;
  height: 24px !important;
  font-size: 12px !important;
}
.storySoftStats { display: none !important; }
.storyImpactPanelV52 {
  padding: 26px !important;
  gap: 16px !important;
}
.storyImpactPanelV52 h3,
.storyImpactPanelV51 h3 {
  max-width: 560px !important;
  font-size: clamp(30px, 3.15vw, 43px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.058em !important;
}
.storyImpactPanelV52 .storyImpactLead {
  max-width: 560px !important;
  font-size: 15px !important;
  line-height: 1.42 !important;
  color: rgba(255,255,255,.74) !important;
}
.storyOutcomeGrid.storyOutcomeGridSimple {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.storyOutcomeGridSimple .storyOutcome {
  min-height: 108px !important;
  padding: 16px !important;
  gap: 8px !important;
  align-content: center !important;
}
.storyOutcomeGridSimple .storyOutcome strong {
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: .98 !important;
  letter-spacing: -.058em !important;
}
.storyOutcomeGridSimple .storyOutcome span {
  font-size: 13px !important;
  line-height: 1.2 !important;
  color: rgba(255,255,255,.72) !important;
}
.storyQuoteCard {
  padding: 18px !important;
  border-radius: 24px !important;
  gap: 13px !important;
}
.storyQuoteCard blockquote {
  font-size: clamp(16px, 1.6vw, 19px) !important;
  line-height: 1.34 !important;
  letter-spacing: -.025em !important;
}
.storyQuoteAuthor img {
  width: 40px !important;
  height: 40px !important;
}
.storyQuoteAuthor span {
  font-size: 12px !important;
  line-height: 1.25 !important;
}
@media (max-width: 760px) {
  .landingPageV56 .storyIntroCardV52,
  .landingPageV56 .storyImpactPanelV51 {
    padding: 20px !important;
  }
  .landingPageV56 .storyIntroCardV52 {
    gap: 14px !important;
  }
  .landingPageV56 .storyIntroCardV52 .storyIntroLead {
    font-size: 13.5px !important;
    line-height: 1.38 !important;
  }
  .landingPageV56 .storyOfferGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 14px !important;
    gap: 8px !important;
    border-radius: 20px !important;
  }
  .landingPageV56 .storyOfferGrid h4 {
    font-size: 15px !important;
    line-height: 1.1 !important;
  }
  .landingPageV56 .storyOfferGrid span {
    min-height: 58px !important;
    padding: 10px !important;
    border-radius: 15px !important;
    gap: 7px !important;
  }
  .landingPageV56 .storyOfferGrid b {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
  }
  .landingPageV56 .storyOfferGrid span strong {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }
  .landingPageV56 .storyImpactPanelV52 h3,
  .landingPageV56 .storyImpactPanelV51 h3 {
    font-size: clamp(24px, 6.4vw, 30px) !important;
    line-height: 1.07 !important;
    letter-spacing: -.045em !important;
  }
  .landingPageV56 .storyImpactPanelV52 .storyImpactLead {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
  }
  .landingPageV56 .storyOutcomeGrid.storyOutcomeGridSimple {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .landingPageV56 .storyOutcomeGridSimple .storyOutcome {
    min-height: 86px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    gap: 5px !important;
  }
  .landingPageV56 .storyOutcomeGridSimple .storyOutcome strong {
    font-size: clamp(22px, 6vw, 28px) !important;
  }
  .landingPageV56 .storyOutcomeGridSimple .storyOutcome span {
    font-size: 10.5px !important;
    line-height: 1.14 !important;
  }
  .landingPageV56 .storyQuoteCard {
    padding: 15px !important;
    border-radius: 20px !important;
  }
  .landingPageV56 .storyQuoteCard blockquote {
    font-size: 13.5px !important;
    line-height: 1.36 !important;
  }
  .landingPageV56 .storyQuoteAuthor img {
    width: 34px !important;
    height: 34px !important;
  }
  .landingPageV56 .storyQuoteAuthor span {
    font-size: 10.5px !important;
  }
}
@media (max-width: 370px) {
  .landingPageV56 .storyOfferGrid span strong {
    font-size: 11.2px !important;
  }
  .landingPageV56 .storyOutcomeGridSimple .storyOutcome strong {
    font-size: 21px !important;
  }
}


/* LocalSpin v69: softer mobile background for the personal revenue estimate section */
@media (max-width: 760px) {
  .landingPageV56 .revenueCalculator {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-top: 68px !important;
    padding-bottom: 70px !important;
  }
  .landingPageV56 .revenueCalculator::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 10px 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: 38px !important;
    background:
      radial-gradient(circle at 18% 4%, rgba(255,122,26,.31), transparent 17rem),
      radial-gradient(circle at 100% 80%, rgba(124,58,237,.28), transparent 19rem),
      linear-gradient(165deg, #3b2318 0%, #15101d 48%, #2b1432 100%) !important;
    box-shadow:
      0 18px 44px rgba(17,24,39,.15),
      inset 0 1px 0 rgba(255,255,255,.09),
      inset 0 -24px 60px rgba(0,0,0,.18) !important;
  }
  .landingPageV56 .revenueCalculator::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    top: 0 !important;
    height: 64px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: 34px 34px 0 0 !important;
    background: linear-gradient(180deg, rgba(255,248,240,.86), rgba(255,248,240,0)) !important;
    filter: none !important;
    opacity: .72 !important;
    transform: none !important;
  }
  .landingPageV56 .revenueCalculator > * {
    position: relative !important;
    z-index: 1 !important;
  }
  .landingPageV56 .revenueCalculator .calculatorCopy {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .landingPageV56 .landingCalculatorCard {
    box-shadow: 0 18px 48px rgba(17,24,39,.12), 0 1px 0 rgba(255,255,255,.72) inset !important;
  }
}
@media (max-width: 420px) {
  .landingPageV56 .revenueCalculator {
    padding-top: 64px !important;
    padding-bottom: 66px !important;
  }
  .landingPageV56 .revenueCalculator::before {
    inset: 8px 0 !important;
    border-radius: 34px !important;
  }
}


/* LocalSpin v71: final mobile revenue intro polish */
@media (max-width: 760px) {
  .landingPageV56 .revenueCalculator {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    max-width: none !important;
    margin: 18px 0 42px !important;
    padding: 34px 18px 38px !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    color: #fff !important;
    background:
      radial-gradient(circle at 16% 0%, rgba(255,122,26,.30), transparent 15rem),
      radial-gradient(circle at 96% 18%, rgba(238,66,102,.16), transparent 13rem),
      radial-gradient(circle at 96% 100%, rgba(124,58,237,.30), transparent 18rem),
      linear-gradient(158deg, #15101d 0%, #201226 54%, #32183c 100%) !important;
    background-color: #15101d !important;
    box-shadow: 0 24px 58px rgba(17,24,39,.18), inset 0 1px 0 rgba(255,255,255,.10) !important;
  }
  .landingPageV56 .revenueCalculator::before,
  .landingPageV56 .revenueCalculator::after {
    content: none !important;
    display: none !important;
  }
  .landingPageV56 .revenueCalculator > * {
    position: relative !important;
    z-index: 1 !important;
  }
  .landingPageV56 .revenueCalculator .calculatorCopy {
    padding: 0 3px !important;
    gap: 12px !important;
    color: #fff !important;
  }
  .landingPageV56 .revenueCalculator .calculatorCopy .eyebrow {
    width: fit-content !important;
    color: #ffcf9e !important;
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: none !important;
  }
  .landingPageV56 .revenueCalculator .calculatorCopy h2 {
    color: #fff !important;
    text-shadow: 0 1px 12px rgba(0,0,0,.16) !important;
  }
  .landingPageV56 .revenueCalculator .calculatorCopy p {
    color: rgba(255,255,255,.82) !important;
  }
  .landingPageV56 .revenueCalculator .calcTrustRow span {
    color: rgba(255,255,255,.88) !important;
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(255,255,255,.15) !important;
  }
  .landingPageV56 .revenueCalculator .calculatorCopy .primaryBtn.orange,
  .landingPageV56 .revenueCalculator .calculatorCopy .lightButton {
    background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 18px 42px rgba(255,82,70,.30) !important;
  }
  .landingPageV56 .revenueCalculator .landingCalculatorCard {
    margin-top: 8px !important;
    background:
      radial-gradient(circle at 88% 16%, rgba(255,122,26,.07), transparent 12rem),
      radial-gradient(circle at 10% 92%, rgba(124,58,237,.05), transparent 13rem),
      rgba(255,255,255,.98) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.72) !important;
  }
}
@media (max-width: 420px) {
  .landingPageV56 .revenueCalculator {
    border-radius: 30px !important;
    margin-top: 14px !important;
    padding: 30px 14px 36px !important;
  }
}

/* v72: instant landing shell, no loading card flash */
.landingStaticShell .staticLogoFallback{display:none;font-weight:900;color:#111827}
.landingStaticShell .brandLogo:not([src]),
.landingStaticShell .brandLogo[src=""]{display:none}
.landingStaticShell .staticLandingNav a{text-decoration:none}
.landingStaticShell .staticHeroPreview{display:flex;align-items:center;justify-content:center}
.landingStaticShell .staticImpactPreview{position:relative;inset:auto;max-width:440px;width:100%;margin:auto}
@media (max-width: 760px){
  .landingStaticShell .staticLandingNav .navLink{display:none}
  .landingStaticShell .staticLandingHero{padding-top:26px}
  .landingStaticShell .staticHeroPreview{margin-top:20px}
}



/* LocalSpin v73: premium mobile-only outcome cards */
@media (max-width: 760px) {
  .landingPageV56 .growthPillars {
    position: relative !important;
    isolation: isolate !important;
    gap: 12px !important;
    padding-top: 44px !important;
    padding-bottom: 52px !important;
  }
  .landingPageV56 .growthPillars::before {
    content: "" !important;
    position: absolute !important;
    inset: 8px 10px auto 10px !important;
    height: 78% !important;
    border-radius: 34px !important;
    background:
      radial-gradient(circle at 18% 18%, rgba(255,122,26,.14), transparent 11rem),
      radial-gradient(circle at 86% 82%, rgba(124,58,237,.12), transparent 12rem),
      linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0)) !important;
    filter: blur(.1px) !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }
  .landingPageV56 .growthPillars::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 90px !important;
    bottom: 84px !important;
    width: 2px !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(180deg, rgba(255,122,26,0), rgba(255,122,26,.18), rgba(124,58,237,.16), rgba(124,58,237,0)) !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }
  .landingPageV56 .growthPillars .pillarCard {
    width: min(calc(100% - 26px), 390px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon title"
      "icon copy" !important;
    align-items: center !important;
    justify-items: start !important;
    text-align: left !important;
    column-gap: 15px !important;
    row-gap: 5px !important;
    padding: 17px 18px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,250,245,.92)) !important;
    border: 1px solid rgba(255,122,26,.13) !important;
    box-shadow:
      0 18px 44px rgba(17,24,39,.08),
      inset 0 1px 0 rgba(255,255,255,.88) !important;
  }
  .landingPageV56 .growthPillars .pillarCard::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      radial-gradient(circle at 8% 18%, rgba(255,82,70,.13), transparent 6rem),
      radial-gradient(circle at 100% 100%, rgba(124,58,237,.08), transparent 8rem) !important;
    pointer-events: none !important;
  }
  .landingPageV56 .growthPillars .pillarCard::after {
    content: "" !important;
    position: absolute !important;
    right: -34px !important;
    top: -42px !important;
    width: 110px !important;
    height: 110px !important;
    border-radius: 999px !important;
    background: rgba(255,122,26,.08) !important;
    pointer-events: none !important;
  }
  .landingPageV56 .growthPillars .featuredPillar {
    background:
      radial-gradient(circle at 18% 10%, rgba(255,122,26,.20), transparent 8rem),
      radial-gradient(circle at 95% 110%, rgba(124,58,237,.34), transparent 11rem),
      linear-gradient(145deg, #121827 0%, #1b1327 54%, #2b1740 100%) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow:
      0 22px 52px rgba(17,24,39,.18),
      inset 0 1px 0 rgba(255,255,255,.11) !important;
  }
  .landingPageV56 .growthPillars .pillarIcon {
    grid-area: icon !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    margin: 0 !important;
    border-radius: 17px !important;
    font-size: 18px !important;
    box-shadow: 0 14px 28px rgba(238,66,102,.22) !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .landingPageV56 .growthPillars .pillarCard h3 {
    grid-area: title !important;
    margin: 0 !important;
    max-width: none !important;
    text-align: left !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .landingPageV56 .growthPillars .pillarCard p {
    grid-area: copy !important;
    margin: 0 !important;
    max-width: none !important;
    text-align: left !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: #655b52 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .landingPageV56 .growthPillars .featuredPillar p {
    color: rgba(255,255,255,.78) !important;
  }
  .landingPageV56 .growthPillars .featuredPillar h3 {
    color: #fff !important;
  }
}
@media (max-width: 370px) {
  .landingPageV56 .growthPillars .pillarCard {
    width: min(calc(100% - 20px), 340px) !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    padding: 15px 15px !important;
    column-gap: 12px !important;
  }
  .landingPageV56 .growthPillars .pillarIcon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 16px !important;
  }
  .landingPageV56 .growthPillars .pillarCard h3 {
    font-size: 16.5px !important;
  }
  .landingPageV56 .growthPillars .pillarCard p {
    font-size: 11.5px !important;
  }
}



/* LocalSpin v74: allow pinch zoom on the landing page and prevent iOS input-focus zoom */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 760px) {
  /* Keep the single-scroll landing behaviour, but allow the user to pinch zoom in/out. */
  html.localspinLandingScroll,
  body.localspinLandingScroll,
  body.localspinLandingScroll #app,
  body.localspinLandingScroll .landingPageV56,
  body.localspinLandingScroll .landingPageV56 * {
    touch-action: pan-y pinch-zoom !important;
  }

  /* iPhone Safari zooms into fields below 16px. Keep all text fields at 16px+ on mobile. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,
  select {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .authCard input:not([type="checkbox"]):not([type="radio"]),
  .authCard textarea,
  .authCard select,
  .contactForm input:not([type="checkbox"]):not([type="radio"]),
  .contactForm textarea,
  .contactForm select {
    min-height: 48px !important;
  }

  /* Keep the calculator numbers intentionally large after the global input safety rule. */
  .landingPageV56 .calcInputWrap input {
    font-size: 27px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 380px) {
  .landingPageV56 .calcInputWrap input {
    font-size: 25px !important;
  }
}



/* v75 pricing and signup polish */
.pricingSectionV75 {
  padding-top: 70px !important;
  padding-bottom: 96px !important;
}
.pricingWrapV75 {
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}
.pricingFeatureCardV75,
.pricingCtaCardV75 {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 36px !important;
}
.pricingFeatureCardV75 {
  padding: 38px !important;
  background:
    radial-gradient(circle at 8% 8%, rgba(255,122,26,.16), transparent 16rem),
    radial-gradient(circle at 92% 14%, rgba(124,58,237,.11), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,250,245,.96)) !important;
  box-shadow: 0 26px 70px rgba(17,24,39,.09), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.pricingFeatureCardV75::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,91,42,.18), rgba(183,70,224,.14));
  filter: blur(2px);
  pointer-events: none;
}
.pricingTitleRowV75 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.pricingSmallBadgeV75,
.trialRibbonV75 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,122,26,.22);
  background: rgba(255,255,255,.78);
  color: #9a3412;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}
.pricingFeatureCardV75 h2 {
  max-width: 680px;
  position: relative;
  z-index: 1;
}
.pricingFeatureCardV75 > p {
  max-width: 720px;
  color: #5f554c !important;
  position: relative;
  z-index: 1;
}
.pricingFeatureTilesV75 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
  position: relative;
  z-index: 1;
}
.pricingFeatureTileV75 {
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 17px;
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,122,26,.14);
  box-shadow: 0 18px 38px rgba(17,24,39,.06);
}
.pricingFeatureTileV75 > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple));
  color: #fff;
  box-shadow: 0 12px 28px rgba(238,66,102,.22);
  font-size: 18px;
}
.pricingFeatureTileV75 strong {
  color: #111827;
  font-size: 16px;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.pricingFeatureTileV75 small {
  color: #655b52;
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 800;
}
.pricingCtaCardV75 {
  align-content: start !important;
  text-align: left !important;
  padding: 34px !important;
  background:
    radial-gradient(circle at 90% 4%, rgba(255,122,26,.35), transparent 11rem),
    radial-gradient(circle at 20% 92%, rgba(183,70,224,.32), transparent 13rem),
    linear-gradient(150deg, #111827 0%, #171020 48%, #33143b 100%) !important;
  color: #fff !important;
  box-shadow: 0 28px 80px rgba(18,13,29,.28) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.pricingCtaCardV75::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.11), transparent 34%, rgba(255,255,255,.06));
  pointer-events: none;
}
.pricingPlanLabelV75 {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 950;
}
.pricingCtaCardV75 .trialRibbonV75 {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.15);
  color: #ffd7b0;
}
.pricingCtaCardV75 .priceBig {
  position: relative;
  z-index: 1;
  color: #fff !important;
  font-size: clamp(64px, 7vw, 92px) !important;
  letter-spacing: -.085em !important;
  line-height: .9 !important;
  margin: 4px 0 0;
}
.pricingCtaCardV75 .priceBig small {
  color: rgba(255,255,255,.74);
  font-size: 18px !important;
  letter-spacing: 0 !important;
  margin-left: 6px;
}
.pricingNoteV75 {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.78) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
.pricingIncludedV75 {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  margin: 4px 0 6px;
}
.pricingIncludedV75 span {
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
  font-size: 14px;
  font-weight: 900;
}
.pricingCtaCardV75 .primaryBtn.orange {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  box-shadow: 0 18px 44px rgba(255,82,70,.36) !important;
}
@media (max-width: 1040px) {
  .pricingWrapV75 {
    grid-template-columns: 1fr !important;
  }
  .pricingFeatureTilesV75 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .pricingSectionV75 {
    padding-top: 50px !important;
    padding-bottom: 54px !important;
  }
  .pricingWrapV75 {
    gap: 16px !important;
  }
  .pricingFeatureCardV75,
  .pricingCtaCardV75 {
    border-radius: 28px !important;
    padding: 23px !important;
  }
  .pricingTitleRowV75 {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .pricingSmallBadgeV75,
  .trialRibbonV75 {
    min-height: 34px;
    font-size: 12px;
    padding: 0 12px;
  }
  .pricingFeatureCardV75 h2 {
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: .98 !important;
    max-width: 100% !important;
  }
  .pricingFeatureCardV75 > p {
    font-size: 14.5px !important;
    line-height: 1.45 !important;
  }
  .pricingFeatureTilesV75 {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }
  .pricingFeatureTileV75 {
    min-height: auto !important;
    grid-template-columns: 38px 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 14px !important;
    border-radius: 20px !important;
  }
  .pricingFeatureTileV75 > span {
    grid-row: span 2;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    font-size: 17px;
  }
  .pricingFeatureTileV75 strong {
    font-size: 15px !important;
  }
  .pricingFeatureTileV75 small {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
  }
  .pricingCtaCardV75 .priceBig {
    font-size: clamp(58px, 18vw, 78px) !important;
  }
  .pricingIncludedV75 {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .pricingIncludedV75 span {
    padding: 10px;
    font-size: 12.5px;
    line-height: 1.2;
  }
  .pricingNoteV75 {
    font-size: 14px !important;
  }
}
@media (max-width: 390px) {
  .pricingIncludedV75 {
    grid-template-columns: 1fr;
  }
}


/* v76 two-tier pricing and Pro feature locks */
.pricingSectionV76 {
  padding-top: 78px !important;
  padding-bottom: 104px !important;
}
.pricingHeaderV76 { margin-bottom: 28px !important; }
.pricingHeaderV76 h2 { max-width: 820px; margin-left: auto; margin-right: auto; }
.pricingHeaderV76 p:not(.eyebrow) { max-width: 680px; margin-left: auto; margin-right: auto; color: #655b52; font-weight: 750; }
.pricingPlansV76 {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 24px;
  align-items: stretch;
}
.pricingTierV76 {
  position: relative;
  display: grid;
  gap: 20px;
  padding: 34px;
  border-radius: 36px;
  border: 1px solid rgba(255,122,26,.15);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,122,26,.12), transparent 16rem),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,250,244,.96));
  box-shadow: 0 28px 76px rgba(17,24,39,.08), inset 0 1px 0 rgba(255,255,255,.88);
  overflow: hidden;
}
.pricingTierV76::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(183,70,224,.13), transparent 68%);
  pointer-events: none;
}
.pricingTierV76.pro {
  color: #fff;
  border-color: rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 88% 4%, rgba(255,186,73,.26), transparent 13rem),
    radial-gradient(circle at 12% 86%, rgba(183,70,224,.36), transparent 16rem),
    linear-gradient(150deg, #111827 0%, #171020 43%, #421846 100%);
  box-shadow: 0 34px 90px rgba(18,13,29,.28);
  transform: translateY(-8px);
}
.pricingTierV76.pro::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.pricingPopularBadgeV76 {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple));
  box-shadow: 0 16px 38px rgba(238,66,102,.28);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
}
.planEyebrowV76 {
  color: #9a3412;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 950;
}
.pricingTierV76.pro .planEyebrowV76 { color: #ffd7b0; }
.pricingTierV76 h3 {
  margin: 0;
  color: #111827;
  font-size: clamp(30px, 4vw, 48px);
  line-height: .95;
  letter-spacing: -.06em;
}
.pricingTierV76.pro h3 { color: #fff; padding-right: 132px; }
.planSubV76 {
  margin: -10px 0 0;
  color: #655b52;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 760;
  max-width: 520px;
}
.pricingTierV76.pro .planSubV76 { color: rgba(255,255,255,.82); }
.priceLineV76 {
  display: flex;
  align-items: end;
  gap: 8px;
  color: #111827;
  font-weight: 950;
  letter-spacing: -.075em;
  line-height: .9;
  font-size: clamp(62px, 8vw, 86px);
}
.priceLineV76 small {
  margin-bottom: 8px;
  color: #655b52;
  font-size: 18px;
  letter-spacing: 0;
  font-weight: 900;
}
.pricingTierV76.pro .priceLineV76 { color: #fff; }
.pricingTierV76.pro .priceLineV76 small { color: rgba(255,255,255,.78); }
.planIncludedBadgeV76 {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,122,26,.22);
  background: rgba(255,255,255,.72);
  color: #9a3412;
  font-size: 13px;
  font-weight: 950;
}
.pricingTierV76.pro .planIncludedBadgeV76 {
  color: #fff;
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
}
.planFeatureListV76 {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  z-index: 1;
}
.planFeatureListV76 li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #3f352e;
  font-size: 14.5px;
  line-height: 1.25;
  font-weight: 900;
}
.planFeatureListV76 li::before {
  content: "✓";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple));
  font-size: 12px;
  font-weight: 950;
}
.planFeatureListV76 li.locked {
  color: #8a7f75;
  font-weight: 800;
}
.planFeatureListV76 li.locked::before {
  content: "Pro";
  width: 34px;
  flex-basis: 34px;
  color: #fff;
  background: #111827;
  font-size: 9px;
  letter-spacing: .04em;
}
.pricingTierV76.pro .planFeatureListV76 li { color: rgba(255,255,255,.9); }
.pricingTierV76.pro .planFeatureListV76 li::before {
  background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple));
  box-shadow: 0 10px 24px rgba(255,82,70,.22);
}
.pricingTierV76 .primaryBtn,
.pricingTierV76 .secondaryBtn {
  position: relative;
  z-index: 1;
}
.pricingTierV76.pro .primaryBtn.orange {
  box-shadow: 0 20px 52px rgba(255,82,70,.36) !important;
}
.pricingMiniGridV76 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.pricingMiniV76 {
  padding: 16px;
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,122,26,.14);
  box-shadow: 0 18px 42px rgba(17,24,39,.06);
}
.pricingMiniV76 strong { display: block; color: #111827; font-size: 16px; letter-spacing: -.02em; }
.pricingMiniV76 span { display: block; margin-top: 5px; color: #655b52; font-size: 13px; font-weight: 800; line-height: 1.3; }
.signupPlanSelectorV76 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0 10px;
}
.signupPlanOptionV76 {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,122,26,.18);
  background: rgba(255,255,255,.74);
  box-shadow: 0 14px 34px rgba(17,24,39,.06);
  cursor: pointer;
  overflow: hidden;
}
.signupPlanOptionV76 input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.signupPlanOptionV76 .planRadioTop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.signupPlanOptionV76 .planRadioTop strong { color: #111827; font-size: 18px; letter-spacing: -.03em; }
.signupPlanOptionV76 .planRadioTop em {
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
  color: #9a3412;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,122,26,.10);
}
.signupPlanOptionV76 .planRadioPrice { color: #111827; font-size: 30px; font-weight: 950; letter-spacing: -.055em; line-height: 1; }
.signupPlanOptionV76 .planRadioPrice small { font-size: 12px; letter-spacing: 0; color: #655b52; }
.signupPlanOptionV76 p { margin: 0 !important; font-size: 12.5px !important; line-height: 1.32 !important; color: #655b52 !important; font-weight: 850 !important; }
.signupPlanOptionV76:has(input:checked) {
  border-color: rgba(255,82,70,.46);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,246,238,.95));
  box-shadow: 0 20px 48px rgba(255,82,70,.16);
}
.signupPlanOptionV76.pro:has(input:checked) {
  color: #fff;
  background: linear-gradient(145deg, #111827, #26142f 62%, #3c1744);
  border-color: rgba(255,255,255,.18);
}
.signupPlanOptionV76.pro:has(input:checked) .planRadioTop strong,
.signupPlanOptionV76.pro:has(input:checked) .planRadioPrice { color: #fff; }
.signupPlanOptionV76.pro:has(input:checked) .planRadioPrice small,
.signupPlanOptionV76.pro:has(input:checked) p { color: rgba(255,255,255,.78) !important; }
.signupPlanOptionV76.pro:has(input:checked) .planRadioTop em { color: #fff; background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple)); }
.moduleCard.lockedFeature,
.sendCampaignCard.lockedFeature {
  opacity: .78;
  cursor: pointer;
}
.lockBadgeV76 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple));
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}
.proLockPanelV76 {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 34px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 80% 8%, rgba(255,122,26,.22), transparent 15rem),
    radial-gradient(circle at 15% 86%, rgba(183,70,224,.18), transparent 15rem),
    linear-gradient(145deg, #111827, #211329 58%, #3c1744);
  color: #fff;
  box-shadow: 0 28px 80px rgba(18,13,29,.24);
}
.proLockPanelV76 .pricingPopularBadgeV76 { position: static; width: fit-content; }
.proLockPanelV76 h2 { margin: 0; color: #fff; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.06em; line-height: .94; }
.proLockPanelV76 p { margin: 0; color: rgba(255,255,255,.8); font-weight: 780; max-width: 700px; }
.proLockGridV76 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.proLockGridV76 span { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); font-weight: 900; }
@media (max-width: 1040px) {
  .pricingPlansV76 { grid-template-columns: 1fr; }
  .pricingTierV76.pro { transform: none; }
  .pricingTierV76.pro h3 { padding-right: 0; }
  .pricingMiniGridV76 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pricingSectionV76 { padding-top: 54px !important; padding-bottom: 64px !important; }
  .pricingPlansV76 { gap: 16px; }
  .pricingTierV76 { border-radius: 28px; padding: 23px; gap: 16px; }
  .pricingPopularBadgeV76 { position: static; width: fit-content; order: -1; }
  .priceLineV76 { font-size: clamp(58px, 18vw, 78px); }
  .planSubV76 { font-size: 14px; }
  .planFeatureListV76 li { font-size: 13.2px; }
  .signupPlanSelectorV76 { grid-template-columns: 1fr; }
  .signupPlanOptionV76 { padding: 14px; border-radius: 20px; }
  .proLockPanelV76 { padding: 24px; border-radius: 28px; }
  .proLockGridV76 { grid-template-columns: 1fr; }
}


/* LocalSpin v80: premium glass owner sidebar */
@media (min-width: 981px) {
  :root { --dashboard-sidebar: 286px; }
}

.sidebar {
  isolation: isolate !important;
  position: fixed !important;
  background:
    radial-gradient(circle at 18% -8%, rgba(255, 122, 26, .36), transparent 118px),
    radial-gradient(circle at 114% 10%, rgba(236, 72, 153, .22), transparent 180px),
    radial-gradient(circle at 18% 105%, rgba(124, 58, 237, .24), transparent 210px),
    linear-gradient(180deg, #0b0d15 0%, #14101b 48%, #251426 100%) !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 24px 0 70px rgba(12, 13, 22, .18) !important;
  padding: 18px 16px !important;
  gap: 14px !important;
}

.sidebar::before,
.sidebar::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.sidebar::before {
  inset: 0;
  background:
    linear-gradient(110deg, rgba(255,255,255,.07), transparent 28%, transparent 70%, rgba(255,255,255,.045)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 72px);
  opacity: .72;
}

.sidebar::after {
  width: 170px;
  height: 470px;
  right: -128px;
  top: 64px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,122,26,.58), rgba(255,79,80,.16), rgba(124,58,237,.35));
  filter: blur(22px);
  transform: rotate(9deg);
  opacity: .72;
}

.sidebar > * {
  position: relative;
  z-index: 1;
}

.sidebarTop {
  min-height: 56px !important;
  align-items: center !important;
}

.sidebar .logoBrand {
  padding: 8px 12px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(255,255,255,.76) !important;
  box-shadow: 0 20px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.sidebar .logoBrand .brandLogo {
  width: 138px !important;
  max-width: 138px !important;
}

.mobileCloseBtn {
  backdrop-filter: blur(14px) !important;
}

.sideBusiness.premiumBusinessCard {
  padding: 13px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.055)),
    radial-gradient(circle at 0 0, rgba(255,122,26,.22), transparent 110px) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 34px rgba(0,0,0,.16) !important;
}

.sideBusinessHead {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 11px !important;
}

.sideBusinessAvatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #ff7a1a, #ff4f50 52%, #7c3aed) !important;
  color: #fff !important;
  font-weight: 950 !important;
  font-size: 17px !important;
  box-shadow: 0 14px 28px rgba(255,79,80,.22) !important;
}

.sideBusinessCopy {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

.sideBusinessCopy strong {
  font-size: 16px !important;
  line-height: 1.05 !important;
  color: #fff !important;
  letter-spacing: -.04em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sideBusinessCopy span {
  font-size: 11.5px !important;
  color: rgba(255,255,255,.62) !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sideLiveBadge {
  align-self: start !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

.sideLiveBadge.pro {
  background: rgba(255,122,26,.24) !important;
  border-color: rgba(255,181,71,.36) !important;
  color: #fff4df !important;
}

.sideNav.premiumSideNav {
  gap: 8px !important;
  padding: 3px 3px 8px 0 !important;
  margin-right: -3px !important;
}

.sideNav.premiumSideNav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.22) !important;
}

.sideNav.premiumSideNav button {
  position: relative !important;
  min-height: 48px !important;
  border-radius: 18px !important;
  padding: 6px 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: hidden !important;
  color: rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,0) !important;
  box-shadow: none !important;
  transform: translateX(0) !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
}

.sideNav.premiumSideNav button::before {
  content: "";
  width: 3px;
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  border-radius: 999px;
  background: transparent;
  transition: background .18s ease, box-shadow .18s ease;
}

.sideNav.premiumSideNav button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 50%, rgba(255,255,255,.18), transparent 52%);
  opacity: 0;
  transition: opacity .18s ease;
}

.sideNav.premiumSideNav button > * {
  position: relative !important;
  z-index: 1 !important;
}

.sideNav.premiumSideNav button:hover {
  transform: translateX(4px) !important;
  background: rgba(255,255,255,.085) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

.sideNav.premiumSideNav button:hover::after,
.sideNav.premiumSideNav button.active::after {
  opacity: 1;
}

.sideNav.premiumSideNav button.active {
  transform: translateX(3px) !important;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255,122,26,.96), rgba(255,79,80,.82) 48%, rgba(124,58,237,.76)) !important;
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: 0 18px 34px rgba(255,79,80,.22), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.sideNav.premiumSideNav button.active::before {
  background: #fff !important;
  box-shadow: 0 0 18px rgba(255,255,255,.68) !important;
}

.sideNavIcon {
  width: 31px !important;
  height: 31px !important;
  flex: 0 0 31px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.085) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.sideNav.premiumSideNav button.active .sideNavIcon {
  background: rgba(255,255,255,.24) !important;
  border-color: rgba(255,255,255,.22) !important;
}

.sideNavText {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: grid !important;
  gap: 2px !important;
}

.sideNavText strong {
  display: block !important;
  color: currentColor !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: -.025em !important;
  line-height: 1.06 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sideNavText small {
  display: block !important;
  color: rgba(255,255,255,.45) !important;
  font-size: 10.4px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sideNav.premiumSideNav button:hover .sideNavText small,
.sideNav.premiumSideNav button.active .sideNavText small {
  color: rgba(255,255,255,.76) !important;
}

.sideProBadge {
  flex: 0 0 auto !important;
  min-height: 23px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,181,71,.16) !important;
  border: 1px solid rgba(255,181,71,.24) !important;
  color: #ffdca8 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}

.sideFooter.premiumSideFooter {
  gap: 10px !important;
}

.trialBox.sidePlanCard {
  padding: 14px !important;
  border-radius: 24px !important;
  display: grid !important;
  gap: 9px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 88% 0, rgba(255,122,26,.23), transparent 88px),
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.trialBox.sidePlanCard .sidePlanTop,
.trialBox.sidePlanCard .sidePlanDays,
.trialBox.sidePlanCard .sidePlanMeta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.trialBox.sidePlanCard .sidePlanTop span,
.trialBox.sidePlanCard .sidePlanTop em {
  color: rgba(255,255,255,.66) !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .045em !important;
}

.trialBox.sidePlanCard .sidePlanTop em {
  max-width: 98px !important;
  padding: 6px 8px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  color: rgba(255,255,255,.80) !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.trialBox.sidePlanCard .sidePlanDays {
  justify-content: flex-start !important;
  align-items: baseline !important;
}

.trialBox.sidePlanCard .sidePlanDays strong {
  color: #fff !important;
  font-size: 31px !important;
  line-height: .9 !important;
  font-weight: 950 !important;
  letter-spacing: -.08em !important;
}

.trialBox.sidePlanCard .sidePlanDays.active strong {
  font-size: 22px !important;
  letter-spacing: -.035em !important;
}

.trialBox.sidePlanCard .sidePlanDays span {
  color: rgba(255,255,255,.66) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.trialBox.sidePlanCard .sidePlanMeta span,
.trialBox.sidePlanCard .sidePlanMeta strong {
  color: rgba(255,255,255,.66) !important;
  font-size: 11.2px !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
  letter-spacing: -.01em !important;
}

.trialBox.sidePlanCard .sidePlanMeta strong {
  color: #fff !important;
  font-size: 12.5px !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
}

.sidePlanProgress {
  height: 7px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.sidePlanProgress i {
  display: block !important;
  height: 100% !important;
  min-width: 7px !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #ffb547, #ff7a1a 52%, #ff4f50) !important;
  box-shadow: 0 0 18px rgba(255,122,26,.45) !important;
}

.sidebar .sideQuickActions {
  display: grid !important;
  gap: 8px !important;
}

.sidebar .sideQuickActions .secondaryBtn,
.sidebar .sideQuickActions .ghostBtn {
  min-height: 44px !important;
  border-radius: 17px !important;
  padding: 9px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  font-size: 13.5px !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.sidebar .sideQuickActions .secondaryBtn {
  background: linear-gradient(135deg, rgba(255,122,26,.98), rgba(255,79,80,.84)) !important;
  border-color: rgba(255,188,116,.38) !important;
  box-shadow: 0 16px 30px rgba(255,79,80,.20) !important;
}

.sidebar .sideQuickActions .ghostBtn {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.13) !important;
}

.sidebar .sideQuickActions .secondaryBtn:hover,
.sidebar .sideQuickActions .ghostBtn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 34px rgba(0,0,0,.18) !important;
}

.sideActionIcon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.18) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

@media (min-width: 981px) and (max-height: 850px) {
  .sidebar { padding: 13px !important; gap: 9px !important; }
  .sidebarTop { min-height: 44px !important; }
  .sidebar .logoBrand { padding: 5px 9px !important; border-radius: 19px !important; }
  .sidebar .logoBrand .brandLogo { width: 120px !important; max-width: 120px !important; }
  .sideBusiness.premiumBusinessCard { padding: 10px !important; border-radius: 19px !important; }
  .sideBusinessHead { grid-template-columns: 34px minmax(0, 1fr) auto !important; gap: 9px !important; }
  .sideBusinessAvatar { width: 34px !important; height: 34px !important; border-radius: 13px !important; font-size: 14px !important; }
  .sideNav.premiumSideNav { gap: 5px !important; }
  .sideNav.premiumSideNav button { min-height: 39px !important; border-radius: 14px !important; padding: 5px 9px !important; }
  .sideNavIcon { width: 27px !important; height: 27px !important; flex-basis: 27px !important; border-radius: 10px !important; }
  .sideNavText small { display: none !important; }
  .trialBox.sidePlanCard { padding: 11px !important; border-radius: 19px !important; gap: 6px !important; }
  .trialBox.sidePlanCard .sidePlanDays strong { font-size: 24px !important; }
  .sidebar .sideQuickActions .secondaryBtn,
  .sidebar .sideQuickActions .ghostBtn { min-height: 38px !important; border-radius: 14px !important; }
}

@media (min-width: 981px) and (max-height: 720px) {
  .sideBusiness.premiumBusinessCard,
  .trialBox.sidePlanCard { display: none !important; }
}

@media (max-width: 980px) {
  .sidebar {
    width: min(88vw, 350px) !important;
    padding: 16px !important;
    gap: 13px !important;
    border-radius: 0 32px 32px 0 !important;
  }
  .sidebarTop { min-height: 52px !important; }
  .sidebar .logoBrand .brandLogo { width: 128px !important; max-width: 128px !important; }
  .sideNav.premiumSideNav { gap: 8px !important; padding-top: 4px !important; }
  .sideNav.premiumSideNav button { min-height: 46px !important; border-radius: 17px !important; }
  .sideNavText small { display: none !important; }
  .trialBox.sidePlanCard { padding: 13px !important; border-radius: 22px !important; }
  .sideFooter.premiumSideFooter { gap: 9px !important; }
}

@media (max-width: 420px) {
  .sideBusinessHead { grid-template-columns: 38px minmax(0, 1fr) !important; }
  .sideBusinessAvatar { width: 38px !important; height: 38px !important; border-radius: 14px !important; }
  .sideLiveBadge { display: none !important; }
  .trialBox.sidePlanCard .sidePlanTop em { max-width: 82px !important; }
}




/* LocalSpin v84: business-name SMS sender + Malta fallback */
.smsSenderPreviewCard {
  display: grid !important;
  gap: 7px !important;
  padding: 14px 15px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(15,23,42,.04), rgba(56,189,248,.08)) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}
.smsSenderPreviewCard span {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
}
.smsSenderPreviewCard strong {
  width: fit-content !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  color: #0f172a !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(15,23,42,.09) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.07) !important;
  font-size: 16px !important;
  letter-spacing: .02em !important;
}
.smsSenderPreviewCard small {
  color: var(--muted) !important;
  line-height: 1.45 !important;
  font-weight: 750 !important;
}

/* LocalSpin v82: SMS credit prices polish */
.smsQuotaInline {
  display: grid !important;
  gap: 6px !important;
  padding-top: 2px !important;
}
.smsQuotaInline .smsQuotaRow,
.smsQuotaCard .smsQuotaRow {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.smsQuotaInline .smsQuotaRow span,
.smsQuotaInline .smsQuotaRow strong {
  color: rgba(255,255,255,.70) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}
.smsQuotaInline .smsQuotaRow strong { color: #fff !important; }
.smsQuotaBar {
  height: 7px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.smsQuotaBar i {
  display: block !important;
  height: 100% !important;
  min-width: 6px !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #67e8f9, #38bdf8 52%, #ffb547) !important;
  box-shadow: 0 0 18px rgba(56,189,248,.36) !important;
}
.smsQuotaMini {
  margin-top: 10px !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
  background: rgba(15,23,42,.06) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}
.smsQuotaMini.warning,
.sendResult.warning.quotaWarning {
  background: linear-gradient(135deg, rgba(255,122,26,.12), rgba(255,79,80,.10)) !important;
  border-color: rgba(255,122,26,.28) !important;
  color: #7c2d12 !important;
}
.smsQuotaCard,
.creditPurchasePanel {
  position: relative !important;
  overflow: hidden !important;
}
.smsQuotaCard::before,
.creditPurchasePanel::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -72px;
  top: -86px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(56,189,248,.20), transparent 68%);
  pointer-events: none;
}
.smsQuotaHero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
}
.smsQuotaBig {
  display: grid !important;
  place-items: center !important;
  width: 118px !important;
  height: 118px !important;
  border-radius: 34px !important;
  background: linear-gradient(135deg, rgba(56,189,248,.16), rgba(255,122,26,.12)) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}
.smsQuotaBig strong {
  display: block !important;
  color: var(--dark) !important;
  font-size: 34px !important;
  line-height: .9 !important;
  letter-spacing: -.08em !important;
}
.smsQuotaBig span {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}
.smsQuotaStats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 14px !important;
}
.smsQuotaStats span {
  display: grid !important;
  gap: 4px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: rgba(15,23,42,.04) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}
.smsQuotaStats strong {
  color: var(--dark) !important;
  font-size: 18px !important;
  letter-spacing: -.04em !important;
}
.creditPackGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 14px !important;
}
.creditPackCard {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 9px !important;
  padding: 16px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.82)) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 16px 34px rgba(15,23,42,.06) !important;
}
.creditPackCard strong {
  color: var(--dark) !important;
  font-size: 24px !important;
  letter-spacing: -.06em !important;
}
.creditPackCard small {
  color: var(--muted) !important;
  font-weight: 850 !important;
}
.creditPackCard .miniBtn,
.creditPackCard .primaryBtn {
  width: 100% !important;
}
.sendStats .smsDebitPill {
  color: #0f172a !important;
}
@media (max-width: 760px) {
  .smsQuotaHero,
  .smsQuotaStats,
  .creditPackGrid { grid-template-columns: 1fr !important; }
  .smsQuotaBig { width: 100% !important; height: auto !important; min-height: 94px !important; }
}


/* LocalSpin v85: compact desktop settings stack + Malta audience filter */
.billingSettingsStack {
  display: grid !important;
  gap: 14px !important;
  align-content: start !important;
}
.audienceSegmentField small {
  display: block !important;
  margin-top: 5px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
}
.audienceFilterMini {
  display: grid !important;
  gap: 8px !important;
  padding: 10px 11px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(255,122,26,.08)) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}
.audienceFilterMini strong {
  color: var(--dark) !important;
  font-size: 13px !important;
  letter-spacing: -.02em !important;
}
.audienceFilterMini small {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}
.audienceFilterMini .miniBtn {
  width: fit-content !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
}
.customerSegmentBadge {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  background: rgba(15,23,42,.06) !important;
  color: var(--muted) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  white-space: nowrap !important;
}
.customerSegmentBadge.local {
  background: rgba(56,189,248,.12) !important;
  color: #075985 !important;
  border-color: rgba(56,189,248,.24) !important;
}
.customerSegmentBadge.visitor {
  background: rgba(255,122,26,.10) !important;
  color: #9a3412 !important;
  border-color: rgba(255,122,26,.20) !important;
}
@media (min-width: 981px) {
  .settingsCleanGrid {
    gap: 16px !important;
    align-items: start !important;
  }
  .settingsCleanGrid .billingSettingsPanel,
  .settingsCleanGrid .smsQuotaCard,
  .settingsCleanGrid .creditPurchasePanel {
    padding: 18px !important;
    border-radius: 22px !important;
  }
  .settingsCleanGrid .billingSettingsPanel .panelHead,
  .settingsCleanGrid .smsQuotaCard .panelHead,
  .settingsCleanGrid .creditPurchasePanel .panelHead {
    margin-bottom: 10px !important;
  }
  .settingsCleanGrid .billingSettingsPanel .billingHero h3,
  .settingsCleanGrid .smsQuotaCard .smsQuotaHero h3 {
    font-size: clamp(26px, 2.6vw, 38px) !important;
    margin-bottom: 4px !important;
  }
  .settingsCleanGrid .billingSettingsPanel .billingHero,
  .settingsCleanGrid .smsQuotaHero {
    gap: 12px !important;
  }
  .settingsCleanGrid .billingActions {
    margin-top: 10px !important;
    gap: 8px !important;
  }
  .settingsCleanGrid .smsQuotaBig {
    width: 92px !important;
    height: 92px !important;
    border-radius: 26px !important;
  }
  .settingsCleanGrid .smsQuotaBig strong {
    font-size: 28px !important;
  }
  .settingsCleanGrid .smsQuotaStats {
    margin-top: 10px !important;
    gap: 8px !important;
  }
  .settingsCleanGrid .smsQuotaStats span {
    padding: 10px !important;
    border-radius: 14px !important;
  }
  .settingsCleanGrid .creditPackGrid {
    margin-top: 10px !important;
    gap: 10px !important;
  }
  .settingsCleanGrid .creditPackCard {
    padding: 13px !important;
    gap: 7px !important;
    border-radius: 18px !important;
  }
  .settingsCleanGrid .creditPackCard strong {
    font-size: 22px !important;
  }
  .settingsCleanGrid .creditPurchasePanel > .mutedText,
  .settingsCleanGrid .smsQuotaHero .mutedText,
  .settingsCleanGrid .billingPlanNote {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}
@media (max-width: 980px) {
  .billingSettingsStack {
    gap: 14px !important;
  }
}


/* LocalSpin v86: country-based audience filters */
.countryHintMini {
  display: block !important;
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: var(--muted) !important;
  font-weight: 800 !important;
}
.audienceQuickButtons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}
.audienceQuickButtons .miniBtn {
  min-height: 30px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
}
.audienceQuickButtons .miniBtn.active {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple)) !important;
  box-shadow: 0 10px 22px rgba(251, 44, 131, .18) !important;
}



/* LocalSpin v88: premium no-logo player QR experience */
.playShell.playerExperience {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3.6vw, 46px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 14% 6%, rgba(255, 122, 26, .42), transparent 25rem),
    radial-gradient(circle at 86% 18%, rgba(236, 72, 153, .26), transparent 26rem),
    radial-gradient(circle at 50% 112%, rgba(59, 130, 246, .28), transparent 30rem),
    linear-gradient(145deg, #100b14 0%, #171014 38%, #07111f 100%);
}
.playShell.playerExperience:before,
.playShell.playerExperience:after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.playShell.playerExperience:before {
  inset: -20%;
  background:
    linear-gradient(115deg, transparent 0 24%, rgba(255,255,255,.05) 25%, transparent 26% 58%, rgba(255,255,255,.04) 59%, transparent 60%),
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.12), transparent 24rem);
  opacity: .9;
}
.playShell.playerExperience:after {
  width: min(72vw, 460px);
  height: min(72vw, 460px);
  right: -12%;
  bottom: -16%;
  border-radius: 42%;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 80px rgba(255,255,255,.05), 0 0 90px rgba(255,122,26,.16);
  transform: rotate(-18deg);
}
.playerExperience .playCard.playerCard {
  width: min(620px, 100%);
  min-height: min(92svh, 840px);
  display: grid;
  align-content: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
  border-radius: clamp(32px, 6vw, 56px);
  padding: clamp(30px, 6vw, 60px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.98), rgba(255,255,255,0) 18rem),
    linear-gradient(180deg, rgba(255, 251, 246, .98), rgba(255, 243, 232, .96));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 36px 120px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter: blur(22px);
}
.playerExperience .playCard.playerCard:before {
  content: "";
  position: absolute;
  inset: -42% -18% auto;
  height: 52%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 122, 26, .26), transparent 44%),
    radial-gradient(circle at 70% 55%, rgba(236, 72, 153, .18), transparent 38%);
  filter: blur(8px);
  pointer-events: none;
}
.playerExperience .playCard.playerCard > * {
  position: relative;
  z-index: 1;
}
.playerExperience .reviewGate,
.playerExperience .resultBox {
  gap: clamp(14px, 2.8vw, 22px);
}
.playerExperience .eyebrow {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid rgba(251, 113, 82, .18);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #9a3412;
  padding: 11px 16px;
  box-shadow: 0 12px 30px rgba(154, 52, 18, .10);
  text-transform: none;
  letter-spacing: -.02em;
  font-size: clamp(14px, 2.6vw, 19px);
}
.playerExperience .playCard h1,
.playerExperience .reviewGate h1 {
  margin: 0;
  color: #14110f;
  font-size: clamp(42px, 8.6vw, 76px);
  line-height: .9;
  letter-spacing: -.075em;
  text-wrap: balance;
}
.playerExperience .playCard p,
.playerExperience .reviewGate > p {
  color: #776b60;
  font-weight: 760;
}
.playerExperience .reviewGate > p {
  max-width: 500px;
  margin: 0 auto;
  font-size: clamp(16px, 3vw, 20px);
  line-height: 1.45;
}
.playerExperience .reviewSteps {
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 6px 0 2px;
}
.playerExperience .reviewSteps span {
  min-height: 58px;
  border-radius: 24px;
  border: 1px solid rgba(17, 24, 39, .07);
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 34px rgba(17,24,39,.07);
  color: #14110f;
  font-size: clamp(13px, 2.5vw, 16px);
}
.playerExperience .primaryBtn.orange.full {
  min-height: clamp(58px, 10vw, 72px);
  border-radius: 999px;
  font-size: clamp(17px, 3.7vw, 24px);
  box-shadow: 0 18px 42px rgba(251, 113, 82, .34), 0 0 0 1px rgba(255,255,255,.24) inset;
}
.playerExperience .legalNote {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  color: #9a8d82;
  font-size: clamp(13px, 2.5vw, 18px);
}
.playerExperience .gamePerks {
  gap: 10px;
  margin: 16px 0 0;
}
.playerExperience .gamePerks span {
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 24px rgba(17,24,39,.06);
}
.playerExperience .playForm {
  padding: clamp(14px, 3vw, 18px);
  border-radius: 28px;
  border: 1px solid rgba(17,24,39,.07);
  background: rgba(255,255,255,.62);
  box-shadow: 0 18px 50px rgba(17,24,39,.08);
}
.playerExperience .playForm input {
  background: rgba(255,255,255,.92);
}
.playerExperience .bigPrizeWheel {
  filter: drop-shadow(0 24px 38px rgba(255,122,26,.25));
}
.playerExperience .rewardPass,
.playerExperience .referralBoost,
.playerExperience .simpleBonus {
  box-shadow: 0 18px 50px rgba(17,24,39,.08);
}
.playLoadingShell {
  place-items: center;
}
.playerLoadingOrb {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff7a1a, #ee4266, #8b5cf6, #ff7a1a);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 43%);
  mask: radial-gradient(circle, transparent 42%, #000 43%);
  animation: spin .9s linear infinite;
  box-shadow: 0 0 70px rgba(255, 122, 26, .45);
}
@media (max-width: 760px) {
  .playShell.playerExperience {
    padding: 14px !important;
    place-items: stretch center !important;
  }
  .playerExperience .playCard.playerCard {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100svh - 28px) !important;
    border-radius: 34px !important;
    padding: clamp(28px, 7vw, 44px) clamp(24px, 6vw, 34px) !important;
  }
  .playerExperience .playCard h1,
  .playerExperience .reviewGate h1 {
    font-size: clamp(42px, 12vw, 64px) !important;
    line-height: .91 !important;
  }
  .playerExperience .reviewGate {
    gap: 16px !important;
  }
  .playerExperience .reviewSteps span {
    min-height: 58px !important;
    font-size: 15px !important;
  }
  .playerExperience .twoCol {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 430px) {
  .playShell.playerExperience {
    padding: 10px !important;
  }
  .playerExperience .playCard.playerCard {
    min-height: calc(100svh - 20px) !important;
    border-radius: 30px !important;
    padding: 28px 22px !important;
  }
  .playerExperience .playCard h1,
  .playerExperience .reviewGate h1 {
    font-size: clamp(38px, 12vw, 56px) !important;
  }
  .playerExperience .legalNote {
    font-size: 15px !important;
  }
}


/* LocalSpin v89: richer mobile player spin page with prize preview */
.playerSpinIntro {
  display: grid;
  gap: 12px;
  text-align: center;
  justify-items: center;
}
.playerWheelStage {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: center;
  margin: 8px 0 4px;
  padding: 12px 12px 14px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 4%, rgba(255,255,255,.82), rgba(255,255,255,0) 44%),
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,244,232,.38));
  border: 1px solid rgba(255,255,255,.54);
  box-shadow: 0 18px 52px rgba(17,24,39,.08), inset 0 1px 0 rgba(255,255,255,.70);
}
.playerWheelStage:before {
  content: "";
  position: absolute;
  width: 76%;
  height: 46%;
  left: 12%;
  top: 16%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,122,26,.24), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}
.playerWheelStage > * {
  position: relative;
  z-index: 1;
}
.playerPrizePreview {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.playerPrizePill {
  max-width: min(100%, 210px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(17,24,39,.07);
  color: #241915;
  box-shadow: 0 8px 22px rgba(17,24,39,.06);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playerPrizePill:nth-child(3n+1) { background: rgba(255,244,232,.92); color: #9a3412; border-color: rgba(255,122,26,.18); }
.playerPrizePill:nth-child(3n+2) { background: rgba(255,241,247,.92); color: #9f1239; border-color: rgba(236,72,153,.16); }
.playerPrizePill:nth-child(3n+3) { background: rgba(239,246,255,.92); color: #1d4ed8; border-color: rgba(79,124,255,.16); }

@media (max-width: 760px) {
  html:has(.playerExperience),
  body:has(.playerExperience) {
    min-height: 100%;
    background: #130d16 !important;
  }
  .playShell.playerExperience {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    place-items: stretch !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background:
      radial-gradient(circle at 10% -4%, rgba(255, 189, 69, .42), transparent 18rem),
      radial-gradient(circle at 110% 6%, rgba(236, 72, 153, .34), transparent 18rem),
      radial-gradient(circle at 50% 104%, rgba(79, 124, 255, .28), transparent 20rem),
      linear-gradient(160deg, #1c1112 0%, #171018 46%, #07111f 100%) !important;
  }
  .playShell.playerExperience:before {
    inset: 0 !important;
    background:
      linear-gradient(140deg, transparent 0 28%, rgba(255,255,255,.07) 28.4%, transparent 29.2% 66%, rgba(255,255,255,.045) 66.5%, transparent 67.2%),
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.14), transparent 18rem) !important;
    opacity: .9 !important;
  }
  .playShell.playerExperience:after {
    width: 78vw !important;
    height: 78vw !important;
    right: -28vw !important;
    bottom: -22vw !important;
    opacity: .72 !important;
  }
  .playerExperience .playCard.playerCard {
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    align-content: start !important;
    gap: 12px !important;
    border-radius: 0 !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 18px)
      18px
      calc(env(safe-area-inset-bottom, 0px) + 26px) !important;
    overflow: visible !important;
    background:
      radial-gradient(circle at 50% 2%, rgba(255,255,255,.96), rgba(255,255,255,0) 18rem),
      radial-gradient(circle at 92% 22%, rgba(255,61,110,.12), transparent 15rem),
      radial-gradient(circle at 8% 68%, rgba(255,122,26,.13), transparent 16rem),
      linear-gradient(180deg, rgba(255,250,244,.98), rgba(255,241,229,.96) 55%, rgba(255,248,240,.98)) !important;
    box-shadow: none !important;
    border: 0 !important;
    backdrop-filter: none !important;
  }
  .playerExperience .playCard.playerCard:before {
    inset: -14% -30% auto !important;
    height: 42% !important;
    opacity: .85 !important;
    filter: blur(10px) !important;
  }
  .playerExperience .playerSpinIntro {
    gap: 8px !important;
    padding-top: 2px !important;
  }
  .playerExperience .playerSpinIntro .eyebrow {
    max-width: calc(100vw - 40px) !important;
    justify-self: center !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    box-shadow: 0 10px 24px rgba(154, 52, 18, .09) !important;
  }
  .playerExperience .playerSpinIntro h1 {
    max-width: 340px !important;
    margin: 0 auto !important;
    font-size: clamp(31px, 9vw, 43px) !important;
    line-height: .94 !important;
    letter-spacing: -.075em !important;
  }
  .playerExperience .playerSpinIntro > p:not(.eyebrow) {
    max-width: 340px !important;
    margin: 0 auto !important;
    font-size: 13.5px !important;
    line-height: 1.42 !important;
    color: #776b60 !important;
  }
  .playerExperience .gamePerks {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 5px 0 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .playerExperience .gamePerks::-webkit-scrollbar { display: none !important; }
  .playerExperience .gamePerks span {
    flex: 0 0 auto !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    background: rgba(255,255,255,.75) !important;
    border: 1px solid rgba(17,24,39,.06) !important;
  }
  .playerExperience .playerWheelStage {
    margin: 6px -2px 2px !important;
    padding: 10px 8px 12px !important;
    border-radius: 34px !important;
  }
  .playerExperience .bigPrizeWheel {
    --wheel-size: min(68vw, 258px) !important;
    width: var(--wheel-size) !important;
    height: calc(var(--wheel-size) + 18px) !important;
    margin: -2px auto 0 !important;
    filter: drop-shadow(0 22px 30px rgba(255,122,26,.20)) !important;
    transform: none !important;
  }
  .playerExperience .bigPrizeWheel .wheelOuter {
    box-shadow:
      0 24px 46px rgba(255, 92, 43, .22),
      0 12px 28px rgba(21, 18, 14, .16),
      inset 0 0 0 1px rgba(255,255,255,.78) !important;
  }
  .playerExperience .wheelText {
    display: block !important;
    font-size: calc(var(--wheel-size) * .047) !important;
    max-width: calc(var(--wheel-size) * .24) !important;
    line-height: .94 !important;
  }
  .playerExperience .wheelCenter strong { font-size: calc(var(--wheel-size) * .084) !important; }
  .playerExperience .wheelCenter small { font-size: calc(var(--wheel-size) * .038) !important; }
  .playerExperience .playerPrizePreview {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding: 1px 2px 4px !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .playerExperience .playerPrizePreview::-webkit-scrollbar { display: none !important; }
  .playerExperience .playerPrizePill {
    flex: 0 0 auto !important;
    scroll-snap-align: center !important;
    max-width: 192px !important;
    min-height: 34px !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
  }
  .playerExperience .playForm.playerEntryForm {
    margin-top: 8px !important;
    padding: 18px !important;
    gap: 12px !important;
    border-radius: 32px !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(255,122,26,.09), transparent 10rem),
      rgba(255,255,255,.82) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    box-shadow: 0 22px 54px rgba(20,14,8,.12), inset 0 1px 0 rgba(255,255,255,.9) !important;
    backdrop-filter: blur(18px) !important;
  }
  .playerExperience .playForm.playerEntryForm .twoCol {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .playerExperience .playForm.playerEntryForm label {
    gap: 8px !important;
    color: #2c2520 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    letter-spacing: -.025em !important;
  }
  .playerExperience .playForm.playerEntryForm input:not([type="checkbox"]) {
    min-height: 56px !important;
    border-radius: 19px !important;
    padding: 0 18px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    background: rgba(255,255,255,.94) !important;
    border-color: rgba(17,24,39,.08) !important;
    box-shadow: 0 8px 18px rgba(17,24,39,.04) !important;
  }
  .playerExperience .playForm.playerEntryForm input:not([type="checkbox"]):focus {
    border-color: rgba(255,122,26,.58) !important;
    box-shadow: 0 0 0 4px rgba(255,122,26,.12), 0 8px 18px rgba(17,24,39,.05) !important;
  }
  .playerExperience .playForm.playerEntryForm input:-webkit-autofill,
  .playerExperience .playForm.playerEntryForm input:-webkit-autofill:hover,
  .playerExperience .playForm.playerEntryForm input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.96) inset !important;
    -webkit-text-fill-color: #14110f !important;
    caret-color: #14110f !important;
  }
  .playerExperience .playForm.playerEntryForm .checkbox {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 5px 2px 0 !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    color: #5f554d !important;
  }
  .playerExperience .playForm.playerEntryForm .checkbox input {
    width: 34px !important;
    height: 34px !important;
    min-height: 0 !important;
    margin: 0 !important;
    accent-color: #ff3d6e !important;
  }
  .playerExperience .playForm.playerEntryForm .primaryBtn.orange.full {
    min-height: 62px !important;
    margin-top: 3px !important;
    font-size: 22px !important;
    border-radius: 999px !important;
  }
  .playerExperience .legalNote.mt {
    margin-top: 12px !important;
    padding: 0 10px 4px !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }
  .playerExperience .reviewGate,
  .playerExperience .resultBox {
    min-height: calc(100dvh - 44px) !important;
    align-content: center !important;
  }
}

@media (max-width: 430px) {
  .playerExperience .playCard.playerCard {
    padding:
      calc(env(safe-area-inset-top, 0px) + 16px)
      16px
      calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
  }
  .playerExperience .playerSpinIntro h1 {
    font-size: clamp(29px, 8.9vw, 39px) !important;
  }
  .playerExperience .playerSpinIntro > p:not(.eyebrow) {
    font-size: 13px !important;
  }
  .playerExperience .bigPrizeWheel {
    --wheel-size: min(66vw, 238px) !important;
  }
  .playerExperience .playForm.playerEntryForm {
    padding: 17px !important;
    border-radius: 30px !important;
  }
}

@media (max-height: 740px) and (max-width: 430px) {
  .playerExperience .playerSpinIntro h1 {
    font-size: clamp(27px, 8vw, 36px) !important;
  }
  .playerExperience .playerSpinIntro > p:not(.eyebrow) {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
  .playerExperience .gamePerks span {
    padding: 7px 9px !important;
    font-size: 11px !important;
  }
  .playerExperience .bigPrizeWheel {
    --wheel-size: min(60vw, 214px) !important;
  }
  .playerExperience .playerPrizePill {
    min-height: 31px !important;
    padding: 8px 10px !important;
    font-size: 11.5px !important;
  }
  .playerExperience .playForm.playerEntryForm {
    padding: 15px !important;
    gap: 10px !important;
  }
  .playerExperience .playForm.playerEntryForm input:not([type="checkbox"]) {
    min-height: 51px !important;
  }
  .playerExperience .playForm.playerEntryForm .primaryBtn.orange.full {
    min-height: 58px !important;
  }
}


/* LocalSpin v91: final premium mobile player polish */
@media (max-width: 760px) {
  html:has(.playerExperience),
  body:has(.playerExperience),
  #app:has(.playerExperience) {
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #fff4ea !important;
  }

  .playShell.playerExperience {
    width: 100% !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    display: block !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background:
      radial-gradient(circle at 16% -5%, rgba(255, 143, 57, .34), transparent 17rem),
      radial-gradient(circle at 105% 6%, rgba(236, 72, 153, .20), transparent 18rem),
      radial-gradient(circle at 50% 110%, rgba(79, 124, 255, .18), transparent 20rem),
      linear-gradient(180deg, #fff8f0 0%, #ffefe5 48%, #fff7ef 100%) !important;
  }

  .playShell.playerExperience:before {
    inset: 0 !important;
    background:
      radial-gradient(circle at 50% -10%, rgba(255,255,255,.92), rgba(255,255,255,0) 18rem),
      linear-gradient(145deg, transparent 0 23%, rgba(255,255,255,.42) 23.3%, transparent 24% 70%, rgba(255,255,255,.28) 70.4%, transparent 71%) !important;
    opacity: .72 !important;
  }

  .playShell.playerExperience:after {
    width: 74vw !important;
    height: 74vw !important;
    right: -26vw !important;
    bottom: -22vw !important;
    border-color: rgba(255, 122, 26, .10) !important;
    box-shadow: inset 0 0 70px rgba(255,255,255,.38), 0 0 80px rgba(255,122,26,.12) !important;
    opacity: .55 !important;
  }

  .playerExperience .playCard.playerCard {
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-content: unset !important;
    gap: 0 !important;
    border-radius: 0 !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 16px)
      16px
      calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .playerExperience .playCard.playerCard:before {
    inset: -10% -28% auto !important;
    height: 34% !important;
    opacity: .65 !important;
    filter: blur(14px) !important;
  }

  .playerExperience .reviewGate,
  .playerExperience .resultBox {
    position: relative !important;
    width: 100% !important;
    min-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 34px) !important;
    min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 34px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 auto !important;
    padding: 28px 18px !important;
    border-radius: 38px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.98), rgba(255,255,255,0) 18rem),
      linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.44)) !important;
    border: 1px solid rgba(255,255,255,.76) !important;
    box-shadow: 0 24px 70px rgba(92, 55, 28, .15), inset 0 1px 0 rgba(255,255,255,.88) !important;
    text-align: center !important;
  }

  .playerExperience .reviewGate .eyebrow,
  .playerExperience .resultBox .eyebrow,
  .playerExperience .playerSpinIntro .eyebrow {
    max-width: calc(100vw - 64px) !important;
    justify-self: center !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(255, 122, 26, .16) !important;
    color: #9a3412 !important;
    box-shadow: 0 12px 28px rgba(154, 52, 18, .10) !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  .playerExperience .reviewGate h1 {
    max-width: 360px !important;
    margin: 0 auto !important;
    font-size: clamp(38px, 11.4vw, 56px) !important;
    line-height: .91 !important;
    letter-spacing: -.078em !important;
  }

  .playerExperience .reviewGate > p:not(.eyebrow),
  .playerExperience .resultBox > p:not(.eyebrow) {
    max-width: 340px !important;
    margin: 0 auto !important;
    color: #76695e !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 780 !important;
  }

  .playerExperience .reviewSteps {
    width: 100% !important;
    display: grid !important;
    gap: 9px !important;
    margin: 3px 0 !important;
  }

  .playerExperience .reviewSteps span {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.90) !important;
    border: 1px solid rgba(17, 24, 39, .06) !important;
    box-shadow: 0 12px 28px rgba(20,14,8,.06) !important;
    font-size: 14px !important;
  }

  .playerExperience .primaryBtn.orange.full {
    width: 100% !important;
    min-height: 60px !important;
    border-radius: 999px !important;
    font-size: 19px !important;
    box-shadow: 0 18px 36px rgba(251, 75, 82, .26), inset 0 1px 0 rgba(255,255,255,.30) !important;
  }

  .playerExperience .legalNote.mt,
  .playerExperience .legalNote {
    width: 100% !important;
    max-width: 350px !important;
    margin: 4px auto 0 !important;
    padding: 0 8px !important;
    color: #918479 !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
    font-weight: 760 !important;
  }

  .playerExperience .playerSpinIntro {
    width: 100% !important;
    display: grid !important;
    justify-items: center !important;
    gap: 7px !important;
    margin: 0 auto 8px !important;
    padding: 0 4px !important;
    text-align: center !important;
  }

  .playerExperience .playerSpinIntro h1 {
    max-width: 350px !important;
    margin: 0 auto !important;
    font-size: clamp(31px, 9vw, 42px) !important;
    line-height: .94 !important;
    letter-spacing: -.075em !important;
  }

  .playerExperience .playerSpinIntro > p:not(.eyebrow) {
    max-width: 340px !important;
    margin: 0 auto !important;
    color: #74685e !important;
    font-size: 13.5px !important;
    line-height: 1.38 !important;
    font-weight: 770 !important;
  }

  .playerExperience .gamePerks {
    margin: 4px 0 0 !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .playerExperience .gamePerks span {
    padding: 7px 9px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(17, 24, 39, .06) !important;
    color: #5b5047 !important;
    font-size: 11px !important;
    font-weight: 930 !important;
    box-shadow: 0 8px 18px rgba(20,14,8,.05) !important;
  }

  .playerExperience .playerWheelStage {
    width: min(100%, 370px) !important;
    margin: 6px auto 12px !important;
    padding: 12px 10px 10px !important;
    border-radius: 36px !important;
    background:
      radial-gradient(circle at 50% 3%, rgba(255,255,255,.92), rgba(255,255,255,0) 44%),
      linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,240,226,.38)) !important;
    border: 1px solid rgba(255,255,255,.76) !important;
    box-shadow: 0 20px 58px rgba(127, 67, 27, .13), inset 0 1px 0 rgba(255,255,255,.80) !important;
  }

  .playerExperience .playerWheelStage:before {
    width: 82% !important;
    height: 58% !important;
    left: 9% !important;
    top: 15% !important;
    background: radial-gradient(circle, rgba(255,122,26,.23), rgba(236,72,153,.10) 42%, transparent 72%) !important;
    filter: blur(18px) !important;
  }

  .playerExperience .bigPrizeWheel {
    --wheel-size: min(70vw, 266px) !important;
    width: var(--wheel-size) !important;
    height: calc(var(--wheel-size) + 20px) !important;
    margin: -3px auto 0 !important;
    filter: drop-shadow(0 23px 34px rgba(255,122,26,.23)) !important;
  }

  .playerExperience .bigPrizeWheel .wheelOuter {
    border-width: 7px !important;
    box-shadow:
      0 26px 46px rgba(255, 92, 43, .23),
      0 12px 26px rgba(21, 18, 14, .14),
      inset 0 0 0 1px rgba(255,255,255,.82) !important;
  }

  .playerExperience .wheelCenter {
    box-shadow: 0 12px 26px rgba(17,24,39,.24), inset 0 0 0 1px rgba(255,255,255,.12) !important;
  }

  .playerExperience .wheelText {
    display: block !important;
    color: rgba(17, 24, 39, .70) !important;
    font-size: calc(var(--wheel-size) * .045) !important;
    max-width: calc(var(--wheel-size) * .24) !important;
    line-height: .92 !important;
    text-shadow: 0 1px 8px rgba(255,255,255,.58) !important;
  }

  .playerExperience .playerPrizePreview {
    display: none !important;
  }

  .playerExperience .playForm.playerEntryForm {
    position: relative !important;
    width: min(100%, 390px) !important;
    margin: 0 auto !important;
    padding: 18px !important;
    gap: 12px !important;
    border-radius: 34px !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(255, 122, 26, .10), transparent 10rem),
      radial-gradient(circle at 0% 100%, rgba(79, 124, 255, .08), transparent 11rem),
      rgba(255,255,255,.84) !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    box-shadow: 0 24px 64px rgba(73, 44, 24, .16), inset 0 1px 0 rgba(255,255,255,.92) !important;
    backdrop-filter: blur(18px) !important;
  }

  .playerExperience .playForm.playerEntryForm .twoCol {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 11px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .playerExperience .playForm.playerEntryForm label {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    gap: 7px !important;
    color: #2a231f !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    letter-spacing: -.025em !important;
  }

  .playerExperience .playForm.playerEntryForm input:not([type="checkbox"]) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    min-height: 55px !important;
    border-radius: 20px !important;
    padding: 0 17px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.95) !important;
    border: 1px solid rgba(17, 24, 39, .075) !important;
    color: #14110f !important;
    box-shadow: 0 8px 18px rgba(17,24,39,.045) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: normal !important;
  }

  .playerExperience .playForm.playerEntryForm input[type="date"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    text-align: left !important;
    white-space: nowrap !important;
    padding-right: 12px !important;
  }

  .playerExperience .playForm.playerEntryForm input[type="date"]::-webkit-date-and-time-value {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .playerExperience .playForm.playerEntryForm input[type="date"]::-webkit-calendar-picker-indicator {
    flex: 0 0 auto !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: 4px !important;
    padding: 0 !important;
    opacity: .56 !important;
  }

  .playerExperience .playForm.playerEntryForm input:not([type="checkbox"]):focus {
    outline: none !important;
    border-color: rgba(255,122,26,.56) !important;
    box-shadow: 0 0 0 4px rgba(255,122,26,.12), 0 8px 18px rgba(17,24,39,.05) !important;
  }

  .playerExperience .playForm.playerEntryForm .checkbox {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 3px 2px 0 !important;
    color: #5e544c !important;
    font-size: 13.5px !important;
    line-height: 1.34 !important;
    font-weight: 820 !important;
  }

  .playerExperience .playForm.playerEntryForm .checkbox input {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    accent-color: #ff3d6e !important;
  }

  .playerExperience .playForm.playerEntryForm .primaryBtn.orange.full {
    min-height: 62px !important;
    margin-top: 2px !important;
    font-size: 22px !important;
  }
}

@media (max-width: 430px) {
  .playerExperience .playCard.playerCard {
    padding:
      calc(env(safe-area-inset-top, 0px) + 14px)
      14px
      calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
  }

  .playerExperience .reviewGate,
  .playerExperience .resultBox {
    border-radius: 34px !important;
    padding: 24px 16px !important;
  }

  .playerExperience .reviewGate h1 {
    font-size: clamp(35px, 11vw, 50px) !important;
  }

  .playerExperience .playerSpinIntro h1 {
    font-size: clamp(29px, 8.8vw, 39px) !important;
  }

  .playerExperience .playerSpinIntro > p:not(.eyebrow),
  .playerExperience .reviewGate > p:not(.eyebrow) {
    font-size: 13px !important;
  }

  .playerExperience .bigPrizeWheel {
    --wheel-size: min(68vw, 246px) !important;
  }

  .playerExperience .playForm.playerEntryForm {
    padding: 17px !important;
    border-radius: 31px !important;
  }
}

@media (max-height: 740px) and (max-width: 430px) {
  .playerExperience .playCard.playerCard {
    justify-content: flex-start !important;
  }

  .playerExperience .reviewGate {
    min-height: calc(100dvh - 30px) !important;
    gap: 11px !important;
  }

  .playerExperience .reviewGate h1 {
    font-size: clamp(31px, 9.5vw, 43px) !important;
  }

  .playerExperience .reviewSteps span {
    min-height: 47px !important;
  }

  .playerExperience .playerSpinIntro {
    gap: 5px !important;
    margin-bottom: 6px !important;
  }

  .playerExperience .playerSpinIntro h1 {
    font-size: clamp(27px, 8vw, 35px) !important;
  }

  .playerExperience .playerSpinIntro > p:not(.eyebrow) {
    font-size: 12.5px !important;
    line-height: 1.32 !important;
  }

  .playerExperience .gamePerks span {
    padding: 6px 8px !important;
    font-size: 10.5px !important;
  }

  .playerExperience .playerWheelStage {
    margin-bottom: 9px !important;
    padding-top: 9px !important;
    padding-bottom: 8px !important;
  }

  .playerExperience .bigPrizeWheel {
    --wheel-size: min(61vw, 214px) !important;
  }

  .playerExperience .playForm.playerEntryForm {
    padding: 14px !important;
    gap: 9px !important;
  }

  .playerExperience .playForm.playerEntryForm input:not([type="checkbox"]) {
    min-height: 49px !important;
  }

  .playerExperience .playForm.playerEntryForm .primaryBtn.orange.full {
    min-height: 56px !important;
  }
}



/* LocalSpin v91: mobile wheel readability, single-scroll player, larger impact card */
@media (max-width: 760px) {
  /* Player pages use one dedicated scroller only. This removes the double-scroll lag on phones. */
  html:has(.playShell.playerExperience),
  body:has(.playShell.playerExperience) {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    background: #fff4ea !important;
  }
  body:has(.playShell.playerExperience) #app {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
  .playShell.playerExperience {
    position: relative !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }
  .playerExperience .playCard.playerCard {
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Make prize names readable on every wheel color. */
  .wheelText,
  .playerExperience .wheelText,
  .playerExperience .bigPrizeWheel .wheelText,
  .landingPageV56 .wheelText {
    color: #ffffff !important;
    font-weight: 950 !important;
    opacity: 1 !important;
    letter-spacing: -.045em !important;
    text-shadow:
      0 1px 1px rgba(17, 24, 39, .74),
      0 2px 7px rgba(17, 24, 39, .56),
      0 0 13px rgba(17, 24, 39, .34) !important;
    -webkit-text-stroke: .35px rgba(17, 24, 39, .58) !important;
    paint-order: stroke fill !important;
  }
  .playerExperience .bigPrizeWheel .wheelText {
    font-size: calc(var(--wheel-size) * .049) !important;
    max-width: calc(var(--wheel-size) * .27) !important;
    line-height: .96 !important;
  }

  /* Bigger and easier-to-read Business impact card on landing mobile. */
  .landingPageV56 .impactPreviewCard,
  body.localspinLandingScroll .landingPageV56 .impactPreviewCard,
  .impactPreviewCard {
    width: min(calc(100vw - 28px), 408px) !important;
    max-width: none !important;
    padding: 20px !important;
    border-radius: 28px !important;
    gap: 13px !important;
    margin: 2px auto 0 !important;
    box-shadow: 0 28px 72px rgba(17, 24, 39, .26) !important;
  }
  .landingPageV56 .impactPreviewCard .dashboardPreviewHead span,
  .impactPreviewCard .dashboardPreviewHead span {
    font-size: 15px !important;
    line-height: 1.1 !important;
  }
  .landingPageV56 .impactPreviewCard .dashboardPreviewHead i,
  .impactPreviewCard .dashboardPreviewHead i {
    min-height: 26px !important;
    padding: 7px 10px !important;
    font-size: 11px !important;
  }
  .landingPageV56 .impactPreviewGrid,
  .impactPreviewGrid {
    gap: 9px !important;
  }
  .landingPageV56 .impactPreviewGrid div,
  .impactPreviewGrid div {
    min-height: 86px !important;
    padding: 13px 10px !important;
    border-radius: 20px !important;
  }
  .landingPageV56 .impactPreviewGrid strong,
  .impactPreviewGrid strong {
    font-size: 28px !important;
    line-height: .92 !important;
    letter-spacing: -.06em !important;
  }
  .landingPageV56 .impactPreviewGrid span,
  .impactPreviewGrid span {
    font-size: 11px !important;
    line-height: 1.16 !important;
    font-weight: 850 !important;
  }
}

@media (max-width: 380px) {
  .landingPageV56 .impactPreviewCard,
  body.localspinLandingScroll .landingPageV56 .impactPreviewCard,
  .impactPreviewCard {
    width: min(calc(100vw - 20px), 366px) !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }
  .landingPageV56 .impactPreviewGrid,
  .impactPreviewGrid {
    gap: 7px !important;
  }
  .landingPageV56 .impactPreviewGrid div,
  .impactPreviewGrid div {
    min-height: 78px !important;
    padding: 11px 8px !important;
    border-radius: 18px !important;
  }
  .landingPageV56 .impactPreviewGrid strong,
  .impactPreviewGrid strong {
    font-size: 24px !important;
  }
  .landingPageV56 .impactPreviewGrid span,
  .impactPreviewGrid span {
    font-size: 10px !important;
  }
}


/* LocalSpin v92: centered mobile landing impact + premium reward/referral result page */
@media (max-width: 760px) {
  .landingPageV56 .landingHeroVisual,
  .landingPageV56 .heroVisualV50,
  .landingPageV56 .staticHeroPreview,
  .landingHeroVisual.staticHeroPreview,
  .staticHeroPreview {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .landingPageV56 .impactPreviewCard,
  body.localspinLandingScroll .landingPageV56 .impactPreviewCard,
  .impactPreviewCard.staticImpactPreview,
  .staticImpactPreview,
  .impactPreviewCard {
    width: min(calc(100vw - 46px), 388px) !important;
    max-width: min(calc(100vw - 46px), 388px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    align-self: center !important;
    transform: none !important;
  }

  .playerExperience .resultBox.enhancedResult {
    width: 100% !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    margin: 0 auto !important;
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  .playerExperience .resultHeroCard,
  .playerExperience .playerReferralSpotlight,
  .playerExperience .resultFinePrintCard {
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.76) !important;
    box-shadow: 0 22px 64px rgba(92,55,28,.14), inset 0 1px 0 rgba(255,255,255,.88) !important;
    backdrop-filter: blur(18px) !important;
  }

  .playerExperience .resultHeroCard {
    display: grid !important;
    justify-items: center !important;
    gap: 13px !important;
    padding: 20px 16px 18px !important;
    border-radius: 34px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255,122,26,.16), transparent 13rem),
      radial-gradient(circle at 94% 16%, rgba(236,72,153,.12), transparent 14rem),
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,249,243,.76)) !important;
  }

  .playerExperience .resultHeroCard:before {
    content: "";
    position: absolute;
    inset: -40% -18% auto;
    height: 58%;
    background: radial-gradient(circle, rgba(255,255,255,.78), transparent 64%);
    pointer-events: none;
  }

  .playerExperience .resultHeroCard > * {
    position: relative;
    z-index: 1;
  }

  .playerExperience .resultSuccessIcon {
    width: 58px !important;
    height: 58px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 20px !important;
    color: #fff !important;
    font-size: 27px !important;
    font-weight: 950 !important;
    background: linear-gradient(135deg, #ff7a1a, #ee4266, #8b5cf6) !important;
    box-shadow: 0 18px 34px rgba(238,66,102,.26), inset 0 1px 0 rgba(255,255,255,.34) !important;
  }

  .playerExperience .resultHeroCard .eyebrow,
  .playerExperience .playerReferralSpotlight .eyebrow {
    max-width: calc(100vw - 72px) !important;
    margin: 0 auto !important;
    padding: 9px 13px !important;
    font-size: 12.5px !important;
    font-weight: 950 !important;
  }

  .playerExperience .rewardPass.rewardPassV92 {
    width: 100% !important;
    display: grid !important;
    justify-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 18px 16px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,122,26,.17) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.88), rgba(255,255,255,0) 9rem),
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,246,236,.84)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 16px 36px rgba(17,24,39,.07) !important;
  }

  .playerExperience .rewardPass.rewardPassV92 .staffHint {
    justify-self: center !important;
    width: auto !important;
    min-height: 46px !important;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    background: #0f172a !important;
    box-shadow: 0 14px 28px rgba(15,23,42,.18) !important;
  }

  .playerExperience .rewardPass.rewardPassV92 strong {
    max-width: 100% !important;
    font-size: clamp(36px, 10.4vw, 54px) !important;
    line-height: .9 !important;
    letter-spacing: -.075em !important;
    text-align: center !important;
    color: #11100f !important;
    text-wrap: balance !important;
  }

  .playerExperience .rewardPass.rewardPassV92 p {
    max-width: 300px !important;
    margin: 0 auto !important;
    font-size: 14px !important;
    line-height: 1.34 !important;
    color: #75695f !important;
    font-weight: 850 !important;
  }

  .playerExperience .enhancedResult .legalNote {
    max-width: 330px !important;
    margin: 0 auto !important;
    color: #74685e !important;
    font-size: 13.5px !important;
    line-height: 1.38 !important;
    font-weight: 850 !important;
  }

  .playerExperience .resultActions {
    width: 100% !important;
    display: grid !important;
    place-items: center !important;
    margin-top: 2px !important;
  }

  .playerExperience .resultActions .secondaryBtn {
    width: min(100%, 314px) !important;
    min-height: 52px !important;
    border-radius: 999px !important;
    font-size: 16px !important;
    box-shadow: 0 12px 28px rgba(17,24,39,.08) !important;
    background: rgba(255,255,255,.84) !important;
  }

  .playerExperience .playerReferralSpotlight {
    display: grid !important;
    justify-items: center !important;
    gap: 12px !important;
    padding: 18px !important;
    border-radius: 32px !important;
    text-align: center !important;
    background:
      radial-gradient(circle at 14% 8%, rgba(255,122,26,.20), transparent 13rem),
      radial-gradient(circle at 94% 12%, rgba(139,92,246,.18), transparent 13rem),
      linear-gradient(160deg, rgba(20,15,28,.98), rgba(45,28,65,.96)) !important;
    color: #fff !important;
  }

  .playerExperience .playerReferralSpotlight:before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,122,26,.28), rgba(236,72,153,.12), rgba(139,92,246,.22));
    opacity: .65;
    pointer-events: none;
  }

  .playerExperience .playerReferralSpotlight > * {
    position: relative;
    z-index: 1;
  }

  .playerExperience .playerReferralSpotlight .eyebrow {
    background: rgba(255,255,255,.14) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: #fff7ed !important;
    box-shadow: none !important;
  }

  .playerExperience .referralCodeHero {
    width: 100% !important;
    display: block !important;
    padding: 16px 14px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.95) !important;
    color: #111827 !important;
    font-size: clamp(34px, 11vw, 54px) !important;
    line-height: .9 !important;
    letter-spacing: .055em !important;
    text-align: center !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.9) !important;
    word-break: break-word !important;
  }

  .playerExperience .playerReferralSpotlight p {
    max-width: 330px !important;
    margin: 0 auto !important;
    color: rgba(255,255,255,.84) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 780 !important;
  }

  .playerExperience .referralStepsV92 {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .playerExperience .referralStepsV92 li {
    min-height: 58px !important;
    display: grid !important;
    place-items: center !important;
    padding: 9px 7px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.90) !important;
    font-size: 11.5px !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  .playerExperience .playerReferralSpotlight .referralCodeBox {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.14) !important;
  }

  .playerExperience .playerReferralSpotlight .referralCodeBox code {
    color: #fff !important;
    font-size: 14px !important;
    letter-spacing: .06em !important;
    text-align: left !important;
  }

  .playerExperience .playerReferralSpotlight .miniBtn {
    min-height: 38px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.95) !important;
    color: #111827 !important;
    border: 0 !important;
    font-weight: 950 !important;
  }

  .playerExperience .playerReferralSpotlight .primaryBtn.orange.full {
    width: 100% !important;
    min-height: 56px !important;
    border-radius: 999px !important;
    font-size: 17px !important;
    box-shadow: 0 14px 32px rgba(255,122,26,.24) !important;
  }

  .playerExperience .bonusRewardCard.simpleBonus {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 26px !important;
    text-align: center !important;
  }

  .playerExperience .resultFinePrintCard {
    display: grid !important;
    gap: 6px !important;
    padding: 15px 16px !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.56) !important;
  }
}

@media (max-width: 380px) {
  .landingPageV56 .impactPreviewCard,
  .impactPreviewCard.staticImpactPreview,
  .staticImpactPreview,
  .impactPreviewCard {
    width: min(calc(100vw - 32px), 352px) !important;
    max-width: min(calc(100vw - 32px), 352px) !important;
    padding: 16px !important;
  }
  .playerExperience .referralStepsV92 {
    grid-template-columns: 1fr !important;
  }
  .playerExperience .referralStepsV92 li {
    min-height: 42px !important;
  }
}



/* LocalSpin v93: final mobile alignment, richer referral pass, polished wheel setup, SMS checkout feedback */
.settingsStatusMessage {
  margin: -6px 0 18px !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 34px rgba(17,24,39,.08) !important;
}
.creditPackCard { position: relative !important; isolation: isolate !important; }
.creditPackCard .primaryBtn { position: relative !important; z-index: 3 !important; pointer-events: auto !important; }

/* Wheel setup dashboard polish */
.wheelSetupGridV93 {
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr) !important;
  gap: 24px !important;
  align-items: start !important;
}
.wheelSetupBuilderV93,
.wheelSetupPreviewV93,
.printDesignerPanel {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,122,26,.13) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,122,26,.10), transparent 18rem),
    radial-gradient(circle at 100% 8%, rgba(236,72,153,.07), transparent 16rem),
    radial-gradient(circle at 88% 100%, rgba(124,58,237,.06), transparent 18rem),
    rgba(255,255,255,.96) !important;
  box-shadow: 0 24px 72px rgba(17,24,39,.08), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
.wheelSetupBuilderV93::before,
.wheelSetupPreviewV93::before,
.printDesignerPanel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 7px !important;
  background: linear-gradient(90deg, #ff7a1a, #ee4266, #7c3aed) !important;
  opacity: .92 !important;
  pointer-events: none !important;
}
.wheelSetupBuilderV93 > *,
.wheelSetupPreviewV93 > *,
.printDesignerPanel > * { position: relative !important; z-index: 1 !important; }
.wheelSetupBuilderV93 .panelHead,
.wheelSetupPreviewV93 .panelHead,
.printDesignerPanel > .panelHead {
  align-items: center !important;
  padding: 14px 16px !important;
  margin: 2px 0 10px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 12px 32px rgba(17,24,39,.045) !important;
}
.wheelSetupBuilderV93 .panelHead h2,
.wheelSetupPreviewV93 .panelHead h2,
.printDesignerPanel .panelHead h2 {
  letter-spacing: -.05em !important;
}
.wheelSetupBuilderV93 input,
.wheelSetupBuilderV93 textarea,
.wheelSetupBuilderV93 select,
.printEditorCard input,
.printEditorCard textarea,
.printEditorCard select {
  border-color: rgba(255,122,26,.15) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 10px 26px rgba(255,122,26,.055) !important;
}
.wheelSetupBuilderV93 input:focus,
.wheelSetupBuilderV93 textarea:focus,
.wheelSetupBuilderV93 select:focus,
.printEditorCard input:focus,
.printEditorCard textarea:focus {
  border-color: rgba(238,66,102,.35) !important;
  box-shadow: 0 0 0 4px rgba(238,66,102,.10), inset 0 1px 0 rgba(255,255,255,.78) !important;
}
.wheelSetupBuilderV93 .rewardRows {
  gap: 12px !important;
}
.wheelSetupBuilderV93 .rewardCardRow {
  border-radius: 22px !important;
  padding: 14px !important;
  border: 1px solid rgba(255,122,26,.12) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,247,237,.72)) !important;
  box-shadow: 0 16px 38px rgba(17,24,39,.055), inset 0 1px 0 rgba(255,255,255,.78) !important;
}
.wheelSetupBuilderV93 .rewardField span {
  color: #9a3412 !important;
}
.wheelSetupBuilderV93 .removeRewardBtn {
  border-radius: 999px !important;
  background: rgba(255,255,255,.80) !important;
}
.wheelSetupBuilderV93 .rewardCostPanel,
.wheelSetupBuilderV93 .operationsBox,
.wheelSetupBuilderV93 .reviewSafetyCard {
  border-radius: 28px !important;
  border: 1px solid rgba(17,24,39,.07) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,122,26,.08), transparent 13rem),
    rgba(255,255,255,.70) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 14px 36px rgba(17,24,39,.045) !important;
}
.wheelSetupBuilderV93 .costSummaryGrid .roiCard,
.wheelSetupBuilderV93 .operationsBox .twoCol label {
  border-radius: 22px !important;
}
.wheelSetupPreviewV93 {
  position: sticky !important;
  top: 24px !important;
}
.wheelSetupPreviewV93 .copyBox {
  border-radius: 22px !important;
  background: rgba(17,24,39,.96) !important;
  color: #fff !important;
  box-shadow: 0 18px 44px rgba(17,24,39,.16) !important;
}
.wheelSetupPreviewV93 .copyBox code { color: rgba(255,255,255,.90) !important; }
.wheelSetupPreviewV93 .previewCard.mt.center {
  border-radius: 34px !important;
  padding: 24px 20px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,122,26,.16), transparent 14rem),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,247,237,.88)) !important;
  border: 1px solid rgba(255,122,26,.14) !important;
  box-shadow: 0 22px 60px rgba(17,24,39,.08), inset 0 1px 0 rgba(255,255,255,.88) !important;
}
.wheelSetupPreviewV93 .previewPrizeWheel {
  filter: drop-shadow(0 20px 34px rgba(255,122,26,.18)) !important;
}
.printDesignerPanel .flyerPreviewCard {
  box-shadow: 0 22px 58px rgba(17,24,39,.11) !important;
}
@media (max-width: 1040px) {
  .wheelSetupGridV93 { grid-template-columns: 1fr !important; }
  .wheelSetupPreviewV93 { position: relative !important; top: auto !important; }
}
@media (max-width: 760px) {
  .wheelSetupGridV93 { gap: 16px !important; }
  .wheelSetupBuilderV93,
  .wheelSetupPreviewV93,
  .printDesignerPanel { border-radius: 28px !important; }
  .wheelSetupBuilderV93 .panelHead,
  .wheelSetupPreviewV93 .panelHead,
  .printDesignerPanel > .panelHead { padding: 13px !important; border-radius: 20px !important; }
  .wheelSetupBuilderV93 .rewardCardRow { grid-template-columns: 1fr !important; padding: 13px !important; }
  .wheelSetupPreviewV93 .previewCard.mt.center { padding: 20px 15px !important; }
}

/* Landing mobile Business impact: true center and safer text fit */
@media (max-width: 760px) {
  .landingPageV56 .landingHeroVisual,
  .landingPageV56 .landingHeroVisual.staticHeroPreview,
  body.localspinLandingScroll .landingPageV56 .landingHeroVisual {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
  .landingPageV56 .heroDemoShell,
  body.localspinLandingScroll .landingPageV56 .heroDemoShell {
    align-items: center !important;
    justify-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .landingPageV56 .impactPreviewCard,
  body.localspinLandingScroll .landingPageV56 .impactPreviewCard,
  .impactPreviewCard.staticImpactPreview,
  .staticImpactPreview,
  .impactPreviewCard {
    width: min(calc(100vw - 32px), 398px) !important;
    max-width: min(calc(100vw - 32px), 398px) !important;
    min-width: 0 !important;
    margin: 8px auto 0 !important;
    padding: 18px !important;
    border-radius: 30px !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  .landingPageV56 .impactPreviewCard .dashboardPreviewHead,
  .impactPreviewCard .dashboardPreviewHead {
    width: 100% !important;
    margin-bottom: 10px !important;
  }
  .landingPageV56 .impactPreviewCard .dashboardPreviewHead span,
  .impactPreviewCard .dashboardPreviewHead span {
    font-size: 15px !important;
    line-height: 1.05 !important;
  }
  .landingPageV56 .impactPreviewCard .dashboardPreviewHead i,
  .impactPreviewCard .dashboardPreviewHead i {
    font-size: 10.5px !important;
    padding: 7px 10px !important;
  }
  .landingPageV56 .impactPreviewGrid,
  .impactPreviewGrid {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .landingPageV56 .impactPreviewGrid div,
  .impactPreviewGrid div {
    min-width: 0 !important;
    min-height: 84px !important;
    padding: 14px 8px !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  .landingPageV56 .impactPreviewGrid strong,
  .impactPreviewGrid strong {
    display: block !important;
    width: 100% !important;
    font-size: clamp(25px, 8.4vw, 36px) !important;
    line-height: .86 !important;
    letter-spacing: -.06em !important;
    white-space: nowrap !important;
    text-align: left !important;
  }
  .landingPageV56 .impactPreviewGrid span,
  .impactPreviewGrid span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(9.6px, 2.85vw, 12px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .landingPageV56 .impactPreviewGrid span br,
  .impactPreviewGrid span br { display: block !important; }
}
@media (max-width: 380px) {
  .landingPageV56 .impactPreviewCard,
  .impactPreviewCard.staticImpactPreview,
  .staticImpactPreview,
  .impactPreviewCard {
    width: min(calc(100vw - 24px), 366px) !important;
    max-width: min(calc(100vw - 24px), 366px) !important;
    padding: 16px !important;
  }
  .landingPageV56 .impactPreviewGrid,
  .impactPreviewGrid { gap: 8px !important; }
  .landingPageV56 .impactPreviewGrid div,
  .impactPreviewGrid div { min-height: 78px !important; padding: 12px 7px !important; border-radius: 18px !important; }
  .landingPageV56 .impactPreviewGrid strong,
  .impactPreviewGrid strong { font-size: clamp(23px, 8vw, 31px) !important; }
  .landingPageV56 .impactPreviewGrid span,
  .impactPreviewGrid span { font-size: 9px !important; line-height: 1.03 !important; }
}

/* Player result and referral: brighter, clearer, more premium */
@media (max-width: 760px) {
  .playerExperience .resultBox.enhancedResult {
    gap: 13px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
  }
  .playerExperience .resultHeroCard {
    padding-top: 18px !important;
    padding-bottom: 17px !important;
    border-radius: 36px !important;
  }
  .playerExperience .playerReferralSpotlight {
    gap: 13px !important;
    padding: 21px 18px 22px !important;
    border-radius: 36px !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    background:
      radial-gradient(circle at 16% 0%, rgba(255,255,255,.26), transparent 8rem),
      radial-gradient(circle at 0% 100%, rgba(255,122,26,.52), transparent 13rem),
      radial-gradient(circle at 100% 12%, rgba(236,72,153,.48), transparent 14rem),
      radial-gradient(circle at 88% 86%, rgba(124,58,237,.38), transparent 13rem),
      linear-gradient(145deg, #421721 0%, #2e174e 50%, #0f172a 100%) !important;
    box-shadow: 0 28px 78px rgba(39,14,45,.34), inset 0 1px 0 rgba(255,255,255,.24) !important;
  }
  .playerExperience .playerReferralSpotlight:before {
    background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.04), rgba(255,255,255,.17)) !important;
    opacity: 1 !important;
  }
  .playerExperience .playerReferralSpotlight:after {
    content: "" !important;
    position: absolute !important;
    inset: 10px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  .playerExperience .playerReferralSpotlight .eyebrow {
    background: rgba(255,255,255,.18) !important;
    border-color: rgba(255,255,255,.26) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important;
  }
  .playerExperience .referralCodeHero {
    padding: 19px 12px !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255,226,150,.36), transparent 10rem),
      linear-gradient(180deg, #ffffff, #fff7ed) !important;
    color: #0f172a !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    font-size: clamp(42px, 14vw, 70px) !important;
    line-height: .86 !important;
    letter-spacing: .085em !important;
    box-shadow: 0 20px 44px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.95) !important;
  }
  .playerExperience .playerReferralSpotlight p {
    max-width: 350px !important;
    color: rgba(255,255,255,.93) !important;
    font-size: 15px !important;
    line-height: 1.36 !important;
    font-weight: 850 !important;
  }
  .playerExperience .playerReferralSpotlight p b {
    color: #fde68a !important;
    text-shadow: 0 1px 12px rgba(253,230,138,.20) !important;
  }
  .playerExperience .referralStepsV92 {
    gap: 8px !important;
  }
  .playerExperience .referralStepsV92 li {
    position: relative !important;
    min-height: 72px !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 5px !important;
    padding: 10px 7px !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10)) !important;
    border-color: rgba(255,255,255,.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
    color: #fff !important;
  }
  .playerExperience .referralStepsV92 li:before {
    width: 23px !important;
    height: 23px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ff7a1a, #ee4266) !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    box-shadow: 0 8px 16px rgba(238,66,102,.22) !important;
  }
  .playerExperience .referralStepsV92 li:nth-child(1):before { content: "1" !important; }
  .playerExperience .referralStepsV92 li:nth-child(2):before { content: "2" !important; }
  .playerExperience .referralStepsV92 li:nth-child(3):before { content: "3" !important; }
  .playerExperience .playerReferralSpotlight .referralCodeBox {
    padding: 9px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.16) !important;
    border: 1px dashed rgba(255,255,255,.28) !important;
  }
  .playerExperience .playerReferralSpotlight .referralCodeBox code {
    align-self: center !important;
    padding-left: 5px !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 950 !important;
  }
  .playerExperience .playerReferralSpotlight .miniBtn {
    min-height: 48px !important;
    padding-left: 17px !important;
    padding-right: 17px !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.18) !important;
  }
  .playerExperience .playerReferralSpotlight .primaryBtn.orange.full {
    min-height: 60px !important;
    font-size: 18px !important;
    background: linear-gradient(135deg, #ff7a1a, #f43f5e 52%, #8b5cf6) !important;
    box-shadow: 0 18px 42px rgba(244,63,94,.32), inset 0 1px 0 rgba(255,255,255,.25) !important;
  }
}
@media (max-width: 380px) {
  .playerExperience .referralCodeHero { font-size: clamp(37px, 13vw, 54px) !important; letter-spacing: .07em !important; }
  .playerExperience .referralStepsV92 { grid-template-columns: 1fr !important; }
  .playerExperience .referralStepsV92 li { min-height: 50px !important; grid-template-columns: auto 1fr !important; text-align: left !important; place-items: center start !important; }
}


/* LocalSpin v94: SMS checkout clarity, perfectly centered mobile impact card, repeat referral rewards */
@media (max-width: 760px) {
  .landingPageV56 .landingHeroVisual.staticHeroPreview,
  .landingHeroVisual.staticHeroPreview,
  .staticHeroPreview {
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 18px 24px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transform: none !important;
  }

  .landingPageV56 .impactPreviewCard.staticImpactPreview,
  .landingPageV56 .impactPreviewCard,
  .impactPreviewCard.staticImpactPreview,
  .staticImpactPreview > .impactPreviewCard,
  .impactPreviewCard {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    float: none !important;
    transform: none !important;
    translate: none !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 8px auto 0 !important;
    width: 100% !important;
    max-width: min(388px, calc(100vw - 38px)) !important;
    box-sizing: border-box !important;
    padding: 18px !important;
    border-radius: 31px !important;
  }

  .landingPageV56 .impactPreviewCard .dashboardPreviewHead,
  .impactPreviewCard .dashboardPreviewHead {
    align-items: center !important;
    margin-bottom: 12px !important;
  }

  .landingPageV56 .impactPreviewGrid,
  .impactPreviewGrid {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .landingPageV56 .impactPreviewGrid div,
  .impactPreviewGrid div {
    min-width: 0 !important;
    min-height: 86px !important;
    padding: 13px 8px !important;
    border-radius: 21px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .landingPageV56 .impactPreviewGrid strong,
  .impactPreviewGrid strong {
    font-size: clamp(25px, 8vw, 34px) !important;
    line-height: .88 !important;
    letter-spacing: -.07em !important;
    white-space: nowrap !important;
  }

  .landingPageV56 .impactPreviewGrid span,
  .impactPreviewGrid span {
    font-size: clamp(9px, 2.55vw, 11.5px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .landingPageV56 .impactPreviewGrid div:last-child span,
  .impactPreviewGrid div:last-child span {
    font-size: clamp(8.5px, 2.38vw, 10.8px) !important;
    letter-spacing: -.045em !important;
  }
}

@media (max-width: 380px) {
  .landingPageV56 .landingHeroVisual.staticHeroPreview,
  .landingHeroVisual.staticHeroPreview,
  .staticHeroPreview {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .landingPageV56 .impactPreviewCard.staticImpactPreview,
  .landingPageV56 .impactPreviewCard,
  .impactPreviewCard.staticImpactPreview,
  .impactPreviewCard {
    max-width: calc(100vw - 28px) !important;
    padding: 15px !important;
  }
  .landingPageV56 .impactPreviewGrid,
  .impactPreviewGrid { gap: 7px !important; }
  .landingPageV56 .impactPreviewGrid div,
  .impactPreviewGrid div { min-height: 78px !important; padding: 11px 6px !important; }
  .landingPageV56 .impactPreviewGrid strong,
  .impactPreviewGrid strong { font-size: clamp(22px, 7.8vw, 30px) !important; }
  .landingPageV56 .impactPreviewGrid span,
  .impactPreviewGrid span { font-size: 8.7px !important; }
  .landingPageV56 .impactPreviewGrid div:last-child span,
  .impactPreviewGrid div:last-child span { font-size: 8.1px !important; }
}

@media (max-width: 760px) {
  .playerExperience .playerReferralSpotlight {
    padding: 22px 18px 23px !important;
    border-radius: 38px !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    background:
      radial-gradient(circle at 15% 0%, rgba(255,236,153,.72), transparent 8rem),
      radial-gradient(circle at 2% 88%, rgba(255,122,26,.66), transparent 12rem),
      radial-gradient(circle at 96% 6%, rgba(255,66,126,.62), transparent 12rem),
      radial-gradient(circle at 94% 94%, rgba(124,58,237,.58), transparent 13rem),
      linear-gradient(145deg, #ff6a3d 0%, #e83f86 43%, #5b21b6 100%) !important;
    box-shadow: 0 28px 76px rgba(107,33,168,.32), 0 10px 30px rgba(255,106,61,.18), inset 0 1px 0 rgba(255,255,255,.34) !important;
  }

  .playerExperience .playerReferralSpotlight:before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.06) 42%, rgba(255,255,255,.20)),
      repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 16px) !important;
    opacity: .68 !important;
    pointer-events: none !important;
  }

  .playerExperience .playerReferralSpotlight .eyebrow {
    background: rgba(255,255,255,.24) !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 12px 26px rgba(88,28,135,.18) !important;
  }

  .playerExperience .referralCodeHero {
    border-radius: 30px !important;
    padding: 21px 12px !important;
    color: #111827 !important;
    background:
      radial-gradient(circle at 18% 10%, rgba(254,240,138,.72), transparent 9rem),
      radial-gradient(circle at 100% 0%, rgba(244,114,182,.20), transparent 11rem),
      linear-gradient(180deg, #ffffff, #fff9ed) !important;
    border: 1px solid rgba(255,255,255,.94) !important;
    text-shadow: none !important;
    box-shadow: 0 24px 52px rgba(88,28,135,.28), inset 0 2px 0 rgba(255,255,255,.96) !important;
  }

  .playerExperience .playerReferralSpotlight p {
    max-width: 352px !important;
    padding: 0 2px !important;
    color: rgba(255,255,255,.96) !important;
    text-shadow: 0 1px 14px rgba(32,8,54,.18) !important;
  }

  .playerExperience .referralStepsV92 {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .playerExperience .referralStepsV92 li {
    min-height: 78px !important;
    padding: 11px 7px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 20px rgba(31,9,52,.10) !important;
  }

  .playerExperience .playerReferralSpotlight .referralCodeBox {
    width: 100% !important;
    padding: 10px !important;
    border-radius: 25px !important;
    background: rgba(255,255,255,.22) !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
  }

  .playerExperience .playerReferralSpotlight .referralCodeBox code {
    color: #fff !important;
    text-shadow: 0 2px 16px rgba(0,0,0,.20) !important;
    letter-spacing: .12em !important;
  }

  .playerExperience .playerReferralSpotlight .miniBtn {
    background: #ffffff !important;
    color: #111827 !important;
    border: 0 !important;
    font-weight: 950 !important;
  }

  .playerExperience .playerReferralSpotlight .primaryBtn.orange.full {
    background: linear-gradient(135deg, #ff7a1a 0%, #ff3f68 52%, #9f3fff 100%) !important;
    box-shadow: 0 22px 46px rgba(255,63,104,.34), inset 0 1px 0 rgba(255,255,255,.30) !important;
  }
}

@media (max-width: 380px) {
  .playerExperience .referralStepsV92 {
    grid-template-columns: 1fr !important;
  }
  .playerExperience .referralStepsV92 li {
    min-height: 52px !important;
    grid-template-columns: auto 1fr !important;
    text-align: left !important;
  }
}



/* LocalSpin v95: final mobile Business impact centering fix */
@media (max-width: 760px) {
  html,
  body,
  #app,
  .landingPageV56,
  body.localspinLandingScroll {
    overflow-x: clip !important;
  }

  .landingPageV56 .landingHero,
  body.localspinLandingScroll .landingPageV56 .landingHero {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .landingPageV56 .landingHeroVisual,
  .landingPageV56 .heroVisualV50,
  body.localspinLandingScroll .landingPageV56 .landingHeroVisual,
  body.localspinLandingScroll .landingPageV56 .heroVisualV50 {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .landingPageV56 .heroDemoShell,
  body.localspinLandingScroll .landingPageV56 .heroDemoShell {
    width: min(calc(100vw - 42px), 408px) !important;
    max-width: min(calc(100vw - 42px), 408px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .landingPageV56 .impactPreviewCard,
  body.localspinLandingScroll .landingPageV56 .impactPreviewCard,
  .landingPageV56 .dashboardPreviewCard.impactPreviewCard,
  body.localspinLandingScroll .landingPageV56 .dashboardPreviewCard.impactPreviewCard {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 12px auto 0 !important;
    padding: 20px 18px !important;
    border-radius: 30px !important;
    align-self: center !important;
    justify-self: center !important;
    box-sizing: border-box !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .landingPageV56 .impactPreviewCard .dashboardPreviewHead,
  body.localspinLandingScroll .landingPageV56 .impactPreviewCard .dashboardPreviewHead {
    width: 100% !important;
    margin-bottom: 9px !important;
  }

  .landingPageV56 .impactPreviewGrid,
  body.localspinLandingScroll .landingPageV56 .impactPreviewGrid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .landingPageV56 .impactPreviewGrid div,
  body.localspinLandingScroll .landingPageV56 .impactPreviewGrid div {
    min-width: 0 !important;
    min-height: 86px !important;
    padding: 13px 9px !important;
    border-radius: 21px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .landingPageV56 .impactPreviewGrid strong,
  body.localspinLandingScroll .landingPageV56 .impactPreviewGrid strong {
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: .88 !important;
    letter-spacing: -.075em !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  .landingPageV56 .impactPreviewGrid span,
  body.localspinLandingScroll .landingPageV56 .impactPreviewGrid span {
    font-size: clamp(9.5px, 2.65vw, 11.5px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

@media (max-width: 380px) {
  .landingPageV56 .heroDemoShell,
  body.localspinLandingScroll .landingPageV56 .heroDemoShell {
    width: min(calc(100vw - 32px), 356px) !important;
    max-width: min(calc(100vw - 32px), 356px) !important;
  }
  .landingPageV56 .impactPreviewCard,
  body.localspinLandingScroll .landingPageV56 .impactPreviewCard {
    padding: 17px 15px !important;
    border-radius: 28px !important;
  }
  .landingPageV56 .impactPreviewGrid,
  body.localspinLandingScroll .landingPageV56 .impactPreviewGrid {
    gap: 8px !important;
  }
  .landingPageV56 .impactPreviewGrid div,
  body.localspinLandingScroll .landingPageV56 .impactPreviewGrid div {
    min-height: 80px !important;
    padding: 12px 7px !important;
    border-radius: 19px !important;
  }
  .landingPageV56 .impactPreviewGrid strong,
  body.localspinLandingScroll .landingPageV56 .impactPreviewGrid strong {
    font-size: clamp(24px, 7.7vw, 30px) !important;
  }
  .landingPageV56 .impactPreviewGrid span,
  body.localspinLandingScroll .landingPageV56 .impactPreviewGrid span {
    font-size: 9px !important;
  }
}



/* LocalSpin v96: remove LocalSpin logo from owner side menu */
.sidebarTop.noSidebarLogo {
  justify-content: flex-end !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}
@media (min-width: 981px) {
  .sidebarTop.noSidebarLogo { display: none !important; }
}
@media (max-width: 980px) {
  .sidebarTop.noSidebarLogo {
    display: flex !important;
    justify-content: flex-end !important;
    min-height: 38px !important;
    margin-bottom: 4px !important;
  }
}


/* LocalSpin v97: premium owner dashboard UI polish */
.mainApp.ownerMain:not(.ownerTab-game) {
  position: relative !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 6% 0%, rgba(255, 122, 26, .16), transparent 31rem),
    radial-gradient(circle at 88% 6%, rgba(124, 58, 237, .13), transparent 34rem),
    radial-gradient(circle at 55% 50%, rgba(56, 189, 248, .10), transparent 38rem),
    linear-gradient(180deg, #fff8ef 0%, #f7f1e9 42%, #fffaf5 100%) !important;
  overflow-x: hidden !important;
}
.mainApp.ownerMain:not(.ownerTab-game)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  background:
    linear-gradient(rgba(17, 24, 39, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 39, .035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 4%, black, transparent 72%);
}
.mainApp.ownerMain:not(.ownerTab-game)::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 560px;
  height: 560px;
  right: -230px;
  top: 130px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 78, 109, .16), rgba(124, 58, 237, .08) 42%, transparent 68%);
  filter: blur(4px);
}
.mainApp.ownerMain:not(.ownerTab-game) > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 981px) {
  .mainApp.ownerMain:not(.ownerTab-game) {
    padding: 30px clamp(28px, 3.2vw, 46px) 76px !important;
  }
}

.ownerMain:not(.ownerTab-game) .dashHeader {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 22px !important;
  margin: 0 0 24px !important;
  padding: clamp(24px, 3vw, 38px) !important;
  border-radius: 34px !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  background:
    radial-gradient(circle at 4% 0%, rgba(255, 122, 26, .24), transparent 18rem),
    radial-gradient(circle at 92% 0%, rgba(124, 58, 237, .18), transparent 20rem),
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 250, 243, .72)) !important;
  box-shadow: 0 26px 80px rgba(17, 24, 39, .10), inset 0 1px 0 rgba(255, 255, 255, .88) !important;
  overflow: hidden !important;
}
.ownerMain:not(.ownerTab-game) .dashHeader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.56), transparent 38%),
    radial-gradient(circle at 88% 110%, rgba(255, 122, 26, .18), transparent 18rem);
}
.ownerMain:not(.ownerTab-game) .dashHeader::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 22px;
  width: 92px;
  height: 92px;
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.12)),
    conic-gradient(from 180deg, #ff7a1a, #ee4266, #7c3aed, #38bdf8, #ff7a1a);
  opacity: .23;
  transform: rotate(10deg);
}
.ownerMain:not(.ownerTab-game) .dashHeader > * {
  position: relative;
  z-index: 1;
}
.ownerMain:not(.ownerTab-game) .dashHeader h1 {
  max-width: 980px !important;
  color: #111827 !important;
  font-family: var(--display), Manrope, Inter, system-ui, sans-serif !important;
  font-size: clamp(38px, 4.6vw, 68px) !important;
  line-height: .92 !important;
  letter-spacing: -.075em !important;
}
.ownerMain:not(.ownerTab-game) .dashHeader p {
  max-width: 780px !important;
  margin-top: 12px !important;
  color: #675c50 !important;
  font-size: clamp(14px, 1.15vw, 17px) !important;
  font-weight: 780 !important;
  line-height: 1.55 !important;
}
.ownerMain:not(.ownerTab-game) .headerActions {
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .54) !important;
  border: 1px solid rgba(17, 24, 39, .07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
}
.ownerMain:not(.ownerTab-game) .overviewQuickActions {
  display: flex !important;
  gap: 9px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}
.ownerMain:not(.ownerTab-game) .primaryBtn.orange {
  background: linear-gradient(135deg, #ff6b2b 0%, #ff3f73 52%, #9d4edd 100%) !important;
  box-shadow: 0 18px 38px rgba(238, 66, 102, .22), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.ownerMain:not(.ownerTab-game) .secondaryBtn,
.ownerMain:not(.ownerTab-game) .ghostBtn,
.ownerMain:not(.ownerTab-game) .miniBtn {
  border-color: rgba(17, 24, 39, .08) !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
}

.ownerMain:not(.ownerTab-game) .contentGrid,
.ownerMain:not(.ownerTab-game) .customerManageGrid,
.ownerMain:not(.ownerTab-game) .campaignCenterGrid,
.ownerMain:not(.ownerTab-game) .settingsCleanGrid {
  gap: clamp(18px, 2vw, 26px) !important;
}
.ownerMain:not(.ownerTab-game) .panel {
  position: relative !important;
  border-radius: 30px !important;
  padding: clamp(22px, 2.25vw, 30px) !important;
  border: 1px solid rgba(255, 255, 255, .70) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 250, 244, .76)) !important;
  box-shadow: 0 22px 64px rgba(17, 24, 39, .09), inset 0 1px 0 rgba(255,255,255,.80) !important;
  backdrop-filter: blur(18px) !important;
  overflow: hidden !important;
}
.ownerMain:not(.ownerTab-game) .panel::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 122, 26, .46), rgba(124, 58, 237, .32), transparent);
  pointer-events: none;
}
.ownerMain:not(.ownerTab-game) .panelHead {
  position: relative !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid rgba(17, 24, 39, .07) !important;
}
.ownerMain:not(.ownerTab-game) .panelHead h2 {
  color: #111827 !important;
  font-family: var(--display), Manrope, Inter, system-ui, sans-serif !important;
  font-size: clamp(24px, 2.05vw, 34px) !important;
  line-height: 1 !important;
  letter-spacing: -.065em !important;
}
.ownerMain:not(.ownerTab-game) .panelHead > span,
.ownerMain:not(.ownerTab-game) .panelHead .statusPill {
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #7c2d12 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.ownerMain:not(.ownerTab-game) .metricsGrid {
  gap: 16px !important;
  margin-bottom: 22px !important;
}
.ownerMain:not(.ownerTab-game) .metricCard {
  position: relative !important;
  min-height: 136px !important;
  padding: 20px !important;
  border: 1px solid rgba(255,255,255,.66) !important;
  border-radius: 27px !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(255, 122, 26, .20), transparent 11rem),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,246,237,.78)) !important;
  box-shadow: 0 18px 48px rgba(17, 24, 39, .08), inset 0 1px 0 rgba(255,255,255,.82) !important;
  overflow: hidden !important;
}
.ownerMain:not(.ownerTab-game) .metricCard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 5px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #ff7a1a, #ee4266, #7c3aed);
}
.ownerMain:not(.ownerTab-game) .metricCard span {
  color: #76695e !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
}
.ownerMain:not(.ownerTab-game) .metricCard strong {
  color: #111827 !important;
  font-family: var(--display), Manrope, Inter, system-ui, sans-serif !important;
  font-size: clamp(34px, 3.2vw, 50px) !important;
  letter-spacing: -.085em !important;
  line-height: .9 !important;
}
.ownerMain:not(.ownerTab-game) .metricCard small {
  color: #8a7e72 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

.ownerTab-overview .simpleFunnelPanel {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,122,26,.17), transparent 18rem),
    radial-gradient(circle at 100% 0%, rgba(124,58,237,.15), transparent 20rem),
    rgba(255,255,255,.82) !important;
}
.ownerMain:not(.ownerTab-game) .simpleFunnelGrid {
  gap: 15px !important;
}
.ownerMain:not(.ownerTab-game) .simpleFunnelCard {
  position: relative !important;
  min-height: 148px !important;
  padding: 20px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(17, 24, 39, .07) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,247,237,.82)) !important;
  box-shadow: 0 16px 44px rgba(17, 24, 39, .07) !important;
  overflow: hidden !important;
}
.ownerMain:not(.ownerTab-game) .simpleFunnelCard::after {
  content: "";
  position: absolute;
  width: 86px;
  height: 86px;
  right: -34px;
  top: -34px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,122,26,.18), transparent 68%);
}
.ownerMain:not(.ownerTab-game) .simpleFunnelCard span,
.ownerMain:not(.ownerTab-game) .simpleFunnelCard small {
  color: #76695e !important;
}
.ownerMain:not(.ownerTab-game) .simpleFunnelCard strong {
  color: #111827 !important;
}
.ownerMain:not(.ownerTab-game) .simpleFunnelCard.roiFunnelCard {
  border-color: rgba(255,255,255,.18) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,122,26,.28), transparent 13rem),
    linear-gradient(145deg, #111827, #23152d 62%, #4c1d95) !important;
  box-shadow: 0 22px 58px rgba(76, 29, 149, .18) !important;
}
.ownerMain:not(.ownerTab-game) .simpleFunnelCard.roiFunnelCard span,
.ownerMain:not(.ownerTab-game) .simpleFunnelCard.roiFunnelCard small,
.ownerMain:not(.ownerTab-game) .simpleFunnelCard.roiFunnelCard strong {
  color: #fff !important;
}
.ownerMain:not(.ownerTab-game) .funnelNote.compact,
.ownerMain:not(.ownerTab-game) .funnelNote {
  margin-top: 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(21, 166, 103, .17) !important;
  background: linear-gradient(135deg, rgba(236,253,245,.92), rgba(255,255,255,.62)) !important;
  color: #065f46 !important;
}

.ownerMain:not(.ownerTab-game) .moduleGrid,
.ownerMain:not(.ownerTab-game) .campaignCommandList,
.ownerMain:not(.ownerTab-game) .activityList,
.ownerMain:not(.ownerTab-game) .customerList,
.ownerMain:not(.ownerTab-game) .campaignList {
  gap: 13px !important;
}
.ownerMain:not(.ownerTab-game) .moduleCard,
.ownerMain:not(.ownerTab-game) .sendCampaignCard,
.ownerMain:not(.ownerTab-game) .activityItem,
.ownerMain:not(.ownerTab-game) .customerItem,
.ownerMain:not(.ownerTab-game) .campaignItem {
  position: relative !important;
  border-radius: 24px !important;
  border: 1px solid rgba(17, 24, 39, .07) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,251,247,.78)) !important;
  box-shadow: 0 14px 34px rgba(17, 24, 39, .055) !important;
}
.ownerMain:not(.ownerTab-game) .moduleCard,
.ownerMain:not(.ownerTab-game) .sendCampaignCard {
  padding: 20px !important;
  overflow: hidden !important;
}
.ownerMain:not(.ownerTab-game) .moduleCard::before,
.ownerMain:not(.ownerTab-game) .sendCampaignCard::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #ff7a1a, #ee4266, #7c3aed);
  opacity: .9;
}
.ownerMain:not(.ownerTab-game) .moduleCard:hover,
.ownerMain:not(.ownerTab-game) .sendCampaignCard:hover,
.ownerMain:not(.ownerTab-game) .creditPackCard:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 54px rgba(17, 24, 39, .10) !important;
}
.ownerMain:not(.ownerTab-game) .moduleCard h3,
.ownerMain:not(.ownerTab-game) .sendCampaignCard h3 {
  font-size: clamp(21px, 1.8vw, 28px) !important;
  letter-spacing: -.058em !important;
  line-height: 1.03 !important;
}
.ownerMain:not(.ownerTab-game) .moduleCard p,
.ownerMain:not(.ownerTab-game) .sendCampaignCard p {
  color: #6d6258 !important;
  font-size: 14px !important;
  font-weight: 780 !important;
  line-height: 1.55 !important;
}
.ownerMain:not(.ownerTab-game) .eyebrow,
.ownerMain:not(.ownerTab-game) .moduleCard .eyebrow,
.ownerMain:not(.ownerTab-game) .sendCampaignCard .eyebrow {
  border: 1px solid rgba(255, 122, 26, .17) !important;
  background: rgba(255, 247, 237, .84) !important;
  color: #9a3412 !important;
}
.ownerMain:not(.ownerTab-game) .statusPill.live,
.ownerMain:not(.ownerTab-game) .statusPill.ready {
  border-color: rgba(21,166,103,.18) !important;
  background: #dcfce7 !important;
  color: #166534 !important;
}
.ownerMain:not(.ownerTab-game) .statusPill.draft {
  border-color: rgba(255,122,26,.18) !important;
  background: #ffedd5 !important;
  color: #9a3412 !important;
}

.ownerMain:not(.ownerTab-game) .formGrid {
  gap: 15px !important;
}
.ownerMain:not(.ownerTab-game) .formGrid > label:not(.checkbox),
.ownerMain:not(.ownerTab-game) .formGrid .twoCol > label,
.ownerMain:not(.ownerTab-game) .formGrid .threeCol > label,
.ownerMain:not(.ownerTab-game) .fieldLabel {
  padding: 14px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .58) !important;
  border: 1px solid rgba(17, 24, 39, .065) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.ownerMain:not(.ownerTab-game) .checkbox {
  padding: 14px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.54) !important;
  border: 1px solid rgba(17, 24, 39, .06) !important;
}
.ownerMain:not(.ownerTab-game) input,
.ownerMain:not(.ownerTab-game) select,
.ownerMain:not(.ownerTab-game) textarea {
  min-height: 52px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(17, 24, 39, .10) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70) !important;
  color: #15120e !important;
  font-weight: 820 !important;
}
.ownerMain:not(.ownerTab-game) textarea {
  min-height: 132px !important;
  line-height: 1.5 !important;
}
.ownerMain:not(.ownerTab-game) input:focus,
.ownerMain:not(.ownerTab-game) select:focus,
.ownerMain:not(.ownerTab-game) textarea:focus {
  border-color: rgba(238, 66, 102, .48) !important;
  box-shadow: 0 0 0 5px rgba(238, 66, 102, .105), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.ownerMain:not(.ownerTab-game) .callout,
.ownerMain:not(.ownerTab-game) .providerBox,
.ownerMain:not(.ownerTab-game) .sendResult,
.ownerMain:not(.ownerTab-game) .emptyState {
  border-radius: 22px !important;
  border: 1px solid rgba(17, 24, 39, .07) !important;
  background: linear-gradient(135deg, rgba(255,247,237,.88), rgba(255,255,255,.72)) !important;
  box-shadow: 0 14px 34px rgba(17, 24, 39, .045) !important;
}
.ownerMain:not(.ownerTab-game) .sendResult.success {
  border-color: rgba(21,166,103,.19) !important;
  background: linear-gradient(135deg, rgba(236,253,245,.96), rgba(255,255,255,.70)) !important;
}
.ownerMain:not(.ownerTab-game) .sendResult.warning {
  border-color: rgba(238,66,102,.18) !important;
  background: linear-gradient(135deg, rgba(255,241,242,.96), rgba(255,255,255,.70)) !important;
}

.ownerMain:not(.ownerTab-game) .previewCard {
  position: relative !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(255,122,26,.18), transparent 13rem),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,247,237,.82)) !important;
  box-shadow: 0 18px 46px rgba(17, 24, 39, .07) !important;
}
.ownerMain:not(.ownerTab-game) .previewCard h3 {
  color: #111827 !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  letter-spacing: -.07em !important;
}
.ownerMain:not(.ownerTab-game) .previewMsg,
.ownerMain:not(.ownerTab-game) .messagePreviewCard {
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 122, 26, .34), transparent 17rem),
    radial-gradient(circle at 100% 12%, rgba(124, 58, 237, .30), transparent 16rem),
    linear-gradient(145deg, #101827, #24172f 70%, #37134a) !important;
  box-shadow: 0 22px 54px rgba(17, 24, 39, .20) !important;
}
.ownerMain:not(.ownerTab-game) .messageMetaGrid span,
.ownerMain:not(.ownerTab-game) .sendStats span,
.ownerMain:not(.ownerTab-game) .smsQuotaMini,
.ownerMain:not(.ownerTab-game) .audienceFilterMini {
  border-radius: 18px !important;
  border: 1px solid rgba(17, 24, 39, .07) !important;
  background: rgba(255, 255, 255, .64) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68) !important;
}
.ownerMain:not(.ownerTab-game) .messagePreviewCard .messageMetaGrid span {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.76) !important;
}
.ownerMain:not(.ownerTab-game) .messagePreviewCard .messageMetaGrid strong {
  color: #fff !important;
}
.ownerMain:not(.ownerTab-game) .audienceFilterMini {
  background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(255,255,255,.66)) !important;
}

.ownerTab-campaigns .campaignCenterGrid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .82fr) !important;
  align-items: start !important;
}
.ownerTab-campaigns .sendCampaignCard {
  min-height: 0 !important;
}
.ownerTab-campaigns .campaignCommandPanel {
  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,.14), transparent 16rem),
    rgba(255,255,255,.82) !important;
}

.ownerTab-customers .customerManageGrid {
  grid-template-columns: minmax(320px, .48fr) minmax(0, 1fr) !important;
  align-items: start !important;
}
.ownerTab-customers .customerEditor {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,122,26,.15), transparent 15rem),
    rgba(255,255,255,.83) !important;
}
.ownerMain:not(.ownerTab-game) .tableWrap {
  border-radius: 26px !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 18px 46px rgba(17, 24, 39, .07) !important;
}
.ownerMain:not(.ownerTab-game) table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.ownerMain:not(.ownerTab-game) th {
  position: sticky !important;
  top: 0;
  z-index: 2;
  padding: 16px 14px !important;
  border-bottom: 1px solid rgba(17, 24, 39, .08) !important;
  background: linear-gradient(180deg, rgba(255,250,243,.96), rgba(255,255,255,.96)) !important;
  color: #7b6e62 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}
.ownerMain:not(.ownerTab-game) td {
  padding: 15px 14px !important;
  border-bottom: 1px solid rgba(17, 24, 39, .055) !important;
  color: #332b25 !important;
}
.ownerMain:not(.ownerTab-game) tbody tr:hover td {
  background: rgba(255, 247, 237, .66) !important;
}
.ownerMain:not(.ownerTab-game) .tableActions {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
.ownerMain:not(.ownerTab-game) .customerSegmentBadge {
  padding: 7px 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.ownerTab-settings .settingsCleanGrid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .82fr) !important;
  align-items: start !important;
}
.ownerTab-settings .billingSettingsStack {
  gap: 18px !important;
}
.ownerTab-settings .billingSettingsPanel,
.ownerTab-settings .smsQuotaCard,
.ownerTab-settings .creditPurchasePanel {
  padding: clamp(20px, 2vw, 26px) !important;
}
.ownerTab-settings .billingHero,
.ownerTab-settings .smsQuotaHero {
  border-radius: 26px !important;
  padding: 18px !important;
  border: 1px solid rgba(17, 24, 39, .07) !important;
  background: rgba(255,255,255,.58) !important;
}
.ownerTab-settings .billingHero h3,
.ownerTab-settings .smsQuotaHero h3 {
  font-size: clamp(30px, 3.1vw, 44px) !important;
  letter-spacing: -.075em !important;
}
.ownerTab-settings .smsSenderPreviewCard {
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(56,189,248,.18), transparent 12rem),
    rgba(255,255,255,.62) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.ownerTab-settings .creditPackGrid {
  gap: 12px !important;
}
.ownerTab-settings .creditPackCard {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,122,26,.14), transparent 10rem),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,246,238,.82)) !important;
  box-shadow: 0 16px 40px rgba(17,24,39,.07) !important;
}
.ownerTab-settings .creditPackCard::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff7a1a, #ee4266, #7c3aed);
}
.ownerTab-settings .creditPackCard strong {
  font-size: clamp(24px, 2.2vw, 32px) !important;
}
.ownerTab-settings .creditPackCard button {
  position: relative !important;
  z-index: 3 !important;
}
.ownerTab-settings .smsQuotaBig {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.36), transparent 48%),
    linear-gradient(135deg, rgba(56,189,248,.20), rgba(255,122,26,.14), rgba(124,58,237,.12)) !important;
  box-shadow: 0 18px 38px rgba(56,189,248,.10) !important;
}

.ownerTab-winback .contentGrid,
.ownerTab-slowhours .contentGrid,
.ownerTab-birthday .contentGrid,
.ownerTab-referral .contentGrid {
  align-items: start !important;
}
.ownerTab-referral .referralPreview h3 {
  display: inline-flex !important;
  width: fit-content !important;
  padding: 12px 18px !important;
  border-radius: 20px !important;
  background: #111827 !important;
  color: #fff !important;
  letter-spacing: .04em !important;
}
.ownerTab-referral .miniList {
  padding: 14px 14px 14px 32px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(17, 24, 39, .07) !important;
}

@media (max-width: 1180px) {
  .ownerTab-campaigns .campaignCenterGrid,
  .ownerTab-customers .customerManageGrid,
  .ownerTab-settings .settingsCleanGrid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 980px) {
  .mainApp.ownerMain:not(.ownerTab-game) {
    padding: 18px 14px 108px !important;
  }
  .ownerMain:not(.ownerTab-game) .dashHeader {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    padding: 24px !important;
    border-radius: 30px !important;
  }
  .ownerMain:not(.ownerTab-game) .dashHeader::after {
    width: 72px;
    height: 72px;
    right: 14px;
    top: 14px;
  }
  .ownerMain:not(.ownerTab-game) .headerActions,
  .ownerMain:not(.ownerTab-game) .overviewQuickActions {
    width: 100% !important;
    justify-content: stretch !important;
    border-radius: 24px !important;
  }
  .ownerMain:not(.ownerTab-game) .headerActions > *,
  .ownerMain:not(.ownerTab-game) .overviewQuickActions > * {
    flex: 1 1 160px !important;
  }
  .ownerMain:not(.ownerTab-game) .panel {
    border-radius: 27px !important;
    padding: 20px !important;
  }
  .ownerMain:not(.ownerTab-game) .metricsGrid,
  .ownerMain:not(.ownerTab-game) .simpleFunnelGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 680px) {
  .ownerMain:not(.ownerTab-game) .dashHeader h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
  }
  .ownerMain:not(.ownerTab-game) .metricsGrid,
  .ownerMain:not(.ownerTab-game) .simpleFunnelGrid,
  .ownerMain:not(.ownerTab-game) .twoCol,
  .ownerMain:not(.ownerTab-game) .threeCol,
  .ownerMain:not(.ownerTab-game) .sendStats,
  .ownerMain:not(.ownerTab-game) .messageMetaGrid,
  .ownerTab-settings .creditPackGrid,
  .ownerTab-settings .smsQuotaStats {
    grid-template-columns: 1fr !important;
  }
  .ownerMain:not(.ownerTab-game) .panelHead {
    display: grid !important;
    align-items: start !important;
  }
  .ownerMain:not(.ownerTab-game) .panelHead > span,
  .ownerMain:not(.ownerTab-game) .panelHead .statusPill {
    width: fit-content !important;
  }
  .ownerMain:not(.ownerTab-game) .metricCard,
  .ownerMain:not(.ownerTab-game) .simpleFunnelCard {
    min-height: 122px !important;
  }
  .ownerMain:not(.ownerTab-game) .activityItem,
  .ownerMain:not(.ownerTab-game) .customerItem,
  .ownerMain:not(.ownerTab-game) .campaignItem,
  .ownerMain:not(.ownerTab-game) .providerBox,
  .ownerMain:not(.ownerTab-game) .sendResult {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}


/* LocalSpin v98: final owner UI fixes for referral preview, campaign buttons and hidden provider details */
.ownerTab-referral .referralPreview {
  border-color: rgba(255, 122, 26, .16) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 122, 26, .18), transparent 15rem),
    radial-gradient(circle at 100% 0%, rgba(238, 66, 102, .15), transparent 14rem),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,247,237,.78)) !important;
}
.ownerTab-referral .referralPreview .eyebrow {
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(255, 122, 26, .24) !important;
  color: #9a3412 !important;
}
.ownerTab-referral .referralPreview h3 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  width: fit-content !important;
  min-height: 64px !important;
  padding: 13px 22px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 122, 26, .25) !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #ff7a1a, #ee4266, #7c3aed) border-box !important;
  color: #111827 !important;
  box-shadow: 0 18px 42px rgba(238, 66, 102, .12), inset 0 1px 0 rgba(255,255,255,.88) !important;
  text-shadow: none !important;
  letter-spacing: .065em !important;
  overflow-wrap: anywhere !important;
}
.ownerMain:not(.ownerTab-game) .audienceQuickButtons {
  gap: 8px !important;
}
.ownerMain:not(.ownerTab-game) .audienceQuickButtons .miniBtn {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  color: #111827 !important;
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  box-shadow: 0 10px 24px rgba(17, 24, 39, .055), inset 0 1px 0 rgba(255,255,255,.78) !important;
}
.ownerMain:not(.ownerTab-game) .audienceQuickButtons .miniBtn.active {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #ff6b2b 0%, #ff3f73 52%, #9d4edd 100%) !important;
  box-shadow: 0 12px 26px rgba(238, 66, 102, .24), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.ownerMain:not(.ownerTab-game) .audienceQuickButtons .miniBtn:disabled,
.ownerMain:not(.ownerTab-game) .sendActions button:disabled {
  color: rgba(17, 24, 39, .48) !important;
  background: rgba(255, 255, 255, .56) !important;
  border-color: rgba(17, 24, 39, .06) !important;
  box-shadow: none !important;
  opacity: .72 !important;
}
.ownerTab-campaigns .messagePreviewCard {
  margin-bottom: 0 !important;
}



/* LocalSpin v100: smoother player wheel, clearer referral bonus pass */
.playerExperience .prizeWheel.spinning .wheelOuter {
  animation: prizeSpinV100 3.35s cubic-bezier(.08,.72,.08,1) both !important;
  will-change: transform;
}
.playerExperience .prizeWheel.spinning .wheelPointer {
  animation: wheelPointerTickV100 .16s ease-in-out 18;
}
.playerExperience .prizeWheel.spinning .wheelCenter {
  animation: wheelCenterPulseV100 .72s ease-in-out infinite alternate;
}
@keyframes prizeSpinV100 {
  0% { transform: rotate(0deg) scale(1); }
  18% { transform: rotate(520deg) scale(1.025); }
  58% { transform: rotate(1980deg) scale(1.015); }
  82% { transform: rotate(2510deg) scale(1.005); }
  100% { transform: rotate(2700deg) scale(1); }
}
@keyframes wheelPointerTickV100 {
  0%,100% { transform: translateX(-50%) rotate(0deg); }
  50% { transform: translateX(-50%) rotate(7deg); }
}
@keyframes wheelCenterPulseV100 {
  from { box-shadow: 0 14px 24px rgba(20,14,8,.28), inset 0 0 0 5px rgba(255,255,255,.08); }
  to { box-shadow: 0 18px 34px rgba(20,14,8,.34), inset 0 0 0 7px rgba(255,255,255,.13), 0 0 0 7px rgba(255,122,26,.12); }
}
.playerExperience .referralBonusHero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,122,26,.20) !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,189,69,.34), transparent 32%),
    radial-gradient(circle at 88% 10%, rgba(255,61,110,.22), transparent 34%),
    linear-gradient(145deg, #fff7ed, #ffffff 58%, #f5f3ff) !important;
  box-shadow: 0 22px 50px rgba(255,122,26,.16), inset 0 1px 0 rgba(255,255,255,.9);
  border-radius: 30px !important;
  padding: 22px !important;
  text-align: center;
}
.playerExperience .referralBonusHero:before {
  content: "";
  position: absolute;
  inset: -45% -25% auto auto;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,91,57,.25), rgba(187,64,214,.18));
  pointer-events: none;
}
.playerExperience .referralBonusHero .eyebrow {
  width: fit-content;
  margin: 0 auto;
  border-color: rgba(255,122,26,.22);
  background: rgba(255,255,255,.78);
  color: #b23a12;
}
.playerExperience .referralBonusHero strong {
  display: block;
  color: #101827;
  font-size: clamp(30px, 8.5vw, 46px);
  letter-spacing: -.055em;
  line-height: .95;
}
.playerExperience .referralBonusHero p {
  margin: 0 auto;
  max-width: 390px;
  color: rgba(32,28,24,.74);
  font-weight: 850;
}
.playerExperience .playerEntryForm label.referralFriendField {
  border: 1px solid rgba(255,122,26,.18);
  border-radius: 22px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255,247,237,.94), rgba(255,255,255,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.playerExperience .playerEntryForm label.referralFriendField input {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}



/* LocalSpin v101: QR-player preload guard, stronger wheel spin, local segment override */
html.playPreload .landingStaticShell {
  display: none !important;
}
html.playPreload body {
  min-height: 100svh;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 122, 26, .18), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(187, 64, 214, .16), transparent 34%),
    linear-gradient(180deg, #fff7ed 0%, #f8fbff 100%);
}
.playerExperience .prizeWheel.spinning .wheelOuter {
  animation: prizeSpinV101 4.25s cubic-bezier(.08,.76,.03,1) both !important;
  will-change: transform;
  filter: drop-shadow(0 28px 44px rgba(255, 122, 26, .28));
}
.playerExperience .prizeWheel.spinning .wheelPointer {
  animation: wheelPointerTickV101 .135s ease-in-out 30 !important;
}
.playerExperience .prizeWheel.spinning .wheelCenter {
  animation: wheelCenterPulseV101 .54s ease-in-out infinite alternate !important;
}
@keyframes prizeSpinV101 {
  0% { transform: rotate(0deg) scale(1); }
  12% { transform: rotate(620deg) scale(1.035); }
  38% { transform: rotate(1840deg) scale(1.018); }
  64% { transform: rotate(3020deg) scale(1.012); }
  84% { transform: rotate(3860deg) scale(1.006); }
  94% { transform: rotate(4140deg) scale(1.002); }
  100% { transform: rotate(4218deg) scale(1); }
}
@keyframes wheelPointerTickV101 {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  50% { transform: translateX(-50%) rotate(10deg); }
}
@keyframes wheelCenterPulseV101 {
  from { transform: translate(-50%, -50%) scale(1); box-shadow: 0 16px 28px rgba(20,14,8,.31), inset 0 0 0 5px rgba(255,255,255,.09); }
  to { transform: translate(-50%, -50%) scale(1.045); box-shadow: 0 22px 42px rgba(20,14,8,.39), inset 0 0 0 8px rgba(255,255,255,.16), 0 0 0 10px rgba(255,122,26,.14); }
}
.customerSegmentSelect select {
  font-weight: 900;
}
.referralRewardPreview {
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 122, 26, .16), transparent 30%),
    radial-gradient(circle at 90% 0%, rgba(187, 64, 214, .13), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,247,237,.94)) !important;
  border-color: rgba(255, 122, 26, .18) !important;
}
.referralRewardPreview h3 {
  font-size: clamp(24px, 4vw, 36px);
  letter-spacing: -.05em;
}
.referralRewardPreview .emailMock {
  margin-top: 12px;
  border-radius: 22px;
  padding: 16px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.referralRewardPreview .emailMock small {
  display: block;
  color: rgba(17,24,39,.56);
  font-weight: 850;
  margin-bottom: 6px;
}



/* LocalSpin v104: simpler mobile player form with required prefix selector */
.playerExperience .playFormError {
  width: 100%;
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255, 245, 242, .96);
  border: 1px solid rgba(255, 86, 48, .22);
  color: #9f2f18;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.32;
  box-shadow: 0 12px 28px rgba(255, 86, 48, .10);
}
.playerExperience .phoneFieldGroup {
  width: 100%;
  min-width: 0;
}
.playerExperience .phoneSplitField {
  display: grid;
  grid-template-columns: minmax(118px, .42fr) minmax(0, 1fr);
  gap: 9px;
  width: 100%;
  min-width: 0;
}
.playerExperience .playForm.playerEntryForm select.phonePrefixSelect,
.playerExperience .playForm.playerEntryForm input.phoneLocalInput {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  min-height: 55px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(17, 24, 39, .075) !important;
  background: rgba(255,255,255,.95) !important;
  color: #14110f !important;
  box-shadow: 0 8px 18px rgba(17,24,39,.045) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}
.playerExperience .playForm.playerEntryForm select.phonePrefixSelect {
  padding: 0 34px 0 12px !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
}
.playerExperience .playForm.playerEntryForm input.phoneLocalInput {
  padding: 0 15px !important;
}
.playerExperience .playForm.playerEntryForm select.phonePrefixSelect:focus,
.playerExperience .playForm.playerEntryForm input.phoneLocalInput:focus {
  outline: none !important;
  border-color: rgba(255,122,26,.56) !important;
  box-shadow: 0 0 0 4px rgba(255,122,26,.12), 0 8px 18px rgba(17,24,39,.05) !important;
}
@media (max-width: 380px) {
  .playerExperience .phoneSplitField {
    grid-template-columns: 1fr;
  }
}


/* LocalSpin v105: dedicated QR game page, review return guard and mobile browser hint */
.playerExperience .browserReviewHint {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 13px 15px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,247,237,.88));
  border: 1px solid rgba(255, 122, 26, .18);
  box-shadow: 0 12px 28px rgba(17,24,39,.055);
  text-align: left;
}
.playerExperience .browserReviewHint strong {
  color: #111827;
  font-size: 13px;
  font-weight: 950;
}
.playerExperience .browserReviewHint span {
  color: #776f68;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 800;
}
.staticGameLoadingShell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 122, 26, .18), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(187, 64, 214, .16), transparent 34%),
    linear-gradient(180deg, #fff7ed 0%, #f8fbff 100%);
}
.staticGameLoadingShell .playerLoadingOrb {
  width: 84px;
  height: 84px;
}

/* ---------- LocalSpin original preview/print/mobile support design ---------- */
*{box-sizing:border-box}html,body{margin:0}body{font-family:Manrope,Arial,sans-serif;background:#f6efe6;color:#15120e}.toolbar{position:sticky;top:0;z-index:9;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:12px;background:rgba(255,253,250,.94);backdrop-filter:blur(14px);border-bottom:1px solid #eadfd3}.toolbar button{border:0;border-radius:999px;background:#111827;color:#fff;padding:12px 18px;font-weight:900;cursor:pointer}.toolbar button.secondary{background:#fff;color:#111827;border:1px solid #eadfd3}.page{width:210mm;min-height:297mm;margin:0 auto;background:#fff;padding:14mm;display:grid;place-items:center}.flyer{position:relative;overflow:hidden;width:100%;min-height:260mm;display:grid;align-content:center;justify-items:center;gap:9mm;padding:18mm 14mm;border-radius:18mm;text-align:center;color:white;background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.34),transparent 45mm),radial-gradient(circle at 88% 12%,rgba(255,255,255,.18),transparent 55mm),linear-gradient(145deg,#ff7a1a,#ff4d55 48%,#7c3aed);box-shadow:0 25px 70px rgba(251,44,131,.24)}.flyer:before,.flyer:after{content:'';position:absolute;border-radius:999px;border:1px solid rgba(255,255,255,.26)}.flyer:before{width:72mm;height:72mm;right:-28mm;top:-25mm}.flyer:after{width:96mm;height:96mm;left:-44mm;bottom:-50mm}.badge{position:relative;z-index:1;display:inline-block;padding:4mm 6mm;border-radius:999px;background:#fff;color:#8a2f0c;font-size:11pt;font-weight:900;text-transform:uppercase;letter-spacing:.08em;max-width:100%}.flyer h1{position:relative;z-index:1;font-family:'Space Grotesk',Manrope,Arial,sans-serif;margin:0;letter-spacing:-.07em;line-height:.9;font-size:52pt;max-width:160mm}.flyer p{position:relative;z-index:1;margin:0;max-width:145mm;font-size:16pt;line-height:1.45;font-weight:800}.flyer img{position:relative;z-index:1;width:70mm;height:70mm;object-fit:contain;background:#fff;padding:5mm;border-radius:10mm;box-shadow:0 16px 45px rgba(17,24,39,.22)}.small{position:relative;z-index:1;font-size:10pt;opacity:.86;font-weight:800;max-width:145mm;line-height:1.35}@media screen and (max-width:700px){body{background:#fff7ef}.toolbar{justify-content:flex-start}.page{width:100%;min-height:auto;margin:0;padding:16px}.flyer{min-height:auto;border-radius:32px;padding:34px 20px;gap:20px}.flyer h1{font-size:42px}.flyer p{font-size:15px}.flyer img{width:min(230px,70vw);height:min(230px,70vw);padding:14px;border-radius:24px}.small{font-size:12px}}@page{size:A4;margin:0}@media print{body{background:#fff}.toolbar{display:none}.page{margin:0;box-shadow:none}.flyer{box-shadow:none}}


/* LocalSpin v70: cleaner mobile revenue background and CTA color */
@media (max-width: 760px) {
  .landingPageV56 .revenueCalculator {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    max-width: none !important;
    margin: 18px 0 42px !important;
    padding: 34px 18px 40px !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(255,122,26,.36), transparent 15rem),
      radial-gradient(circle at 94% 92%, rgba(168,85,247,.36), transparent 18rem),
      linear-gradient(160deg, #2a1813 0%, #15101e 48%, #32173d 100%) !important;
    box-shadow:
      0 24px 58px rgba(17,24,39,.18),
      inset 0 1px 0 rgba(255,255,255,.10) !important;
  }
  .landingPageV56 .revenueCalculator::before {
    content: none !important;
    display: none !important;
  }
  .landingPageV56 .revenueCalculator::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,0) 34%),
      radial-gradient(circle at 76% 8%, rgba(255,255,255,.12), transparent 11rem) !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    height: auto !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
  }
  .landingPageV56 .revenueCalculator > * {
    position: relative !important;
    z-index: 1 !important;
  }
  .landingPageV56 .revenueCalculator .calculatorCopy {
    padding: 0 4px !important;
    gap: 12px !important;
    color: #fff !important;
  }
  .landingPageV56 .revenueCalculator .calculatorCopy .eyebrow {
    color: #ffd7ad !important;
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(255,255,255,.15) !important;
  }
  .landingPageV56 .revenueCalculator .calculatorCopy h2 {
    color: #fff !important;
    text-shadow: none !important;
  }
  .landingPageV56 .revenueCalculator .calculatorCopy p {
    color: rgba(255,255,255,.78) !important;
  }
  .landingPageV56 .revenueCalculator .calcTrustRow span {
    color: rgba(255,255,255,.86) !important;
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.13) !important;
  }
  .landingPageV56 .revenueCalculator .calculatorCopy .primaryBtn.orange,
  .landingPageV56 .revenueCalculator .calculatorCopy .lightButton {
    background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 18px 42px rgba(255,82,70,.30) !important;
  }
  .landingPageV56 .revenueCalculator .landingCalculatorCard {
    margin-top: 8px !important;
    background:
      radial-gradient(circle at 88% 16%, rgba(255,122,26,.07), transparent 12rem),
      radial-gradient(circle at 10% 92%, rgba(124,58,237,.05), transparent 13rem),
      rgba(255,255,255,.98) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.72) !important;
  }
}
@media (max-width: 420px) {
  .landingPageV56 .revenueCalculator {
    border-radius: 30px !important;
    margin-top: 14px !important;
    padding: 30px 14px 36px !important;
  }
}

/* v76 two-tier pricing and Pro feature locks */
.pricingSectionV76 {
  padding-top: 78px !important;
  padding-bottom: 104px !important;
}
.pricingHeaderV76 { margin-bottom: 28px !important; }
.pricingHeaderV76 h2 { max-width: 820px; margin-left: auto; margin-right: auto; }
.pricingHeaderV76 p:not(.eyebrow) { max-width: 680px; margin-left: auto; margin-right: auto; color: #655b52; font-weight: 750; }
.pricingPlansV76 {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 24px;
  align-items: stretch;
}
.pricingTierV76 {
  position: relative;
  display: grid;
  gap: 20px;
  padding: 34px;
  border-radius: 36px;
  border: 1px solid rgba(255,122,26,.15);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,122,26,.12), transparent 16rem),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,250,244,.96));
  box-shadow: 0 28px 76px rgba(17,24,39,.08), inset 0 1px 0 rgba(255,255,255,.88);
  overflow: hidden;
}
.pricingTierV76::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(183,70,224,.13), transparent 68%);
  pointer-events: none;
}
.pricingTierV76.pro {
  color: #fff;
  border-color: rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 88% 4%, rgba(255,186,73,.26), transparent 13rem),
    radial-gradient(circle at 12% 86%, rgba(183,70,224,.36), transparent 16rem),
    linear-gradient(150deg, #111827 0%, #171020 43%, #421846 100%);
  box-shadow: 0 34px 90px rgba(18,13,29,.28);
  transform: translateY(-8px);
}
.pricingTierV76.pro::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.pricingPopularBadgeV76 {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple));
  box-shadow: 0 16px 38px rgba(238,66,102,.28);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
}
.planEyebrowV76 {
  color: #9a3412;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 950;
}
.pricingTierV76.pro .planEyebrowV76 { color: #ffd7b0; }
.pricingTierV76 h3 {
  margin: 0;
  color: #111827;
  font-size: clamp(30px, 4vw, 48px);
  line-height: .95;
  letter-spacing: -.06em;
}
.pricingTierV76.pro h3 { color: #fff; padding-right: 132px; }
.planSubV76 {
  margin: -10px 0 0;
  color: #655b52;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 760;
  max-width: 520px;
}
.pricingTierV76.pro .planSubV76 { color: rgba(255,255,255,.82); }
.priceLineV76 {
  display: flex;
  align-items: end;
  gap: 8px;
  color: #111827;
  font-weight: 950;
  letter-spacing: -.075em;
  line-height: .9;
  font-size: clamp(62px, 8vw, 86px);
}
.priceLineV76 small {
  margin-bottom: 8px;
  color: #655b52;
  font-size: 18px;
  letter-spacing: 0;
  font-weight: 900;
}
.pricingTierV76.pro .priceLineV76 { color: #fff; }
.pricingTierV76.pro .priceLineV76 small { color: rgba(255,255,255,.78); }
.planIncludedBadgeV76 {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,122,26,.22);
  background: rgba(255,255,255,.72);
  color: #9a3412;
  font-size: 13px;
  font-weight: 950;
}
.pricingTierV76.pro .planIncludedBadgeV76 {
  color: #fff;
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
}
.planFeatureListV76 {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  z-index: 1;
}
.planFeatureListV76 li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #3f352e;
  font-size: 14.5px;
  line-height: 1.25;
  font-weight: 900;
}
.planFeatureListV76 li::before {
  content: "✓";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple));
  font-size: 12px;
  font-weight: 950;
}
.planFeatureListV76 li.locked {
  color: #8a7f75;
  font-weight: 800;
}
.planFeatureListV76 li.locked::before {
  content: "Pro";
  width: 34px;
  flex-basis: 34px;
  color: #fff;
  background: #111827;
  font-size: 9px;
  letter-spacing: .04em;
}
.pricingTierV76.pro .planFeatureListV76 li { color: rgba(255,255,255,.9); }
.pricingTierV76.pro .planFeatureListV76 li::before {
  background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple));
  box-shadow: 0 10px 24px rgba(255,82,70,.22);
}
.pricingTierV76 .primaryBtn,
.pricingTierV76 .secondaryBtn {
  position: relative;
  z-index: 1;
}
.pricingTierV76.pro .primaryBtn.orange {
  box-shadow: 0 20px 52px rgba(255,82,70,.36) !important;
}
.pricingMiniGridV76 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.pricingMiniV76 {
  padding: 16px;
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,122,26,.14);
  box-shadow: 0 18px 42px rgba(17,24,39,.06);
}
.pricingMiniV76 strong { display: block; color: #111827; font-size: 16px; letter-spacing: -.02em; }
.pricingMiniV76 span { display: block; margin-top: 5px; color: #655b52; font-size: 13px; font-weight: 800; line-height: 1.3; }
.signupPlanSelectorV76 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0 10px;
}
.signupPlanOptionV76 {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,122,26,.18);
  background: rgba(255,255,255,.74);
  box-shadow: 0 14px 34px rgba(17,24,39,.06);
  cursor: pointer;
  overflow: hidden;
}
.signupPlanOptionV76 input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.signupPlanOptionV76 .planRadioTop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.signupPlanOptionV76 .planRadioTop strong { color: #111827; font-size: 18px; letter-spacing: -.03em; }
.signupPlanOptionV76 .planRadioTop em {
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
  color: #9a3412;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,122,26,.10);
}
.signupPlanOptionV76 .planRadioPrice { color: #111827; font-size: 30px; font-weight: 950; letter-spacing: -.055em; line-height: 1; }
.signupPlanOptionV76 .planRadioPrice small { font-size: 12px; letter-spacing: 0; color: #655b52; }
.signupPlanOptionV76 p { margin: 0 !important; font-size: 12.5px !important; line-height: 1.32 !important; color: #655b52 !important; font-weight: 850 !important; }
.signupPlanOptionV76:has(input:checked) {
  border-color: rgba(255,82,70,.46);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,246,238,.95));
  box-shadow: 0 20px 48px rgba(255,82,70,.16);
}
.signupPlanOptionV76.pro:has(input:checked) {
  color: #fff;
  background: linear-gradient(145deg, #111827, #26142f 62%, #3c1744);
  border-color: rgba(255,255,255,.18);
}
.signupPlanOptionV76.pro:has(input:checked) .planRadioTop strong,
.signupPlanOptionV76.pro:has(input:checked) .planRadioPrice { color: #fff; }
.signupPlanOptionV76.pro:has(input:checked) .planRadioPrice small,
.signupPlanOptionV76.pro:has(input:checked) p { color: rgba(255,255,255,.78) !important; }
.signupPlanOptionV76.pro:has(input:checked) .planRadioTop em { color: #fff; background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple)); }
.moduleCard.lockedFeature,
.sendCampaignCard.lockedFeature {
  opacity: .78;
  cursor: pointer;
}
.lockBadgeV76 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--rose), var(--purple));
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}
.proLockPanelV76 {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 34px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 80% 8%, rgba(255,122,26,.22), transparent 15rem),
    radial-gradient(circle at 15% 86%, rgba(183,70,224,.18), transparent 15rem),
    linear-gradient(145deg, #111827, #211329 58%, #3c1744);
  color: #fff;
  box-shadow: 0 28px 80px rgba(18,13,29,.24);
}
.proLockPanelV76 .pricingPopularBadgeV76 { position: static; width: fit-content; }
.proLockPanelV76 h2 { margin: 0; color: #fff; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.06em; line-height: .94; }
.proLockPanelV76 p { margin: 0; color: rgba(255,255,255,.8); font-weight: 780; max-width: 700px; }
.proLockGridV76 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.proLockGridV76 span { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); font-weight: 900; }
@media (max-width: 1040px) {
  .pricingPlansV76 { grid-template-columns: 1fr; }
  .pricingTierV76.pro { transform: none; }
  .pricingTierV76.pro h3 { padding-right: 0; }
  .pricingMiniGridV76 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pricingSectionV76 { padding-top: 54px !important; padding-bottom: 64px !important; }
  .pricingPlansV76 { gap: 16px; }
  .pricingTierV76 { border-radius: 28px; padding: 23px; gap: 16px; }
  .pricingPopularBadgeV76 { position: static; width: fit-content; order: -1; }
  .priceLineV76 { font-size: clamp(58px, 18vw, 78px); }
  .planSubV76 { font-size: 14px; }
  .planFeatureListV76 li { font-size: 13.2px; }
  .signupPlanSelectorV76 { grid-template-columns: 1fr; }
  .signupPlanOptionV76 { padding: 14px; border-radius: 20px; }
  .proLockPanelV76 { padding: 24px; border-radius: 28px; }
  .proLockGridV76 { grid-template-columns: 1fr; }
}


/* LocalSpin v98: final owner UI fixes for referral preview, campaign buttons and hidden provider details */
.ownerTab-referral .referralPreview {
  border-color: rgba(255, 122, 26, .16) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 122, 26, .18), transparent 15rem),
    radial-gradient(circle at 100% 0%, rgba(238, 66, 102, .15), transparent 14rem),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,247,237,.78)) !important;
}
.ownerTab-referral .referralPreview .eyebrow {
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(255, 122, 26, .24) !important;
  color: #9a3412 !important;
}
.ownerTab-referral .referralPreview h3 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  width: fit-content !important;
  min-height: 64px !important;
  padding: 13px 22px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 122, 26, .25) !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #ff7a1a, #ee4266, #7c3aed) border-box !important;
  color: #111827 !important;
  box-shadow: 0 18px 42px rgba(238, 66, 102, .12), inset 0 1px 0 rgba(255,255,255,.88) !important;
  text-shadow: none !important;
  letter-spacing: .065em !important;
  overflow-wrap: anywhere !important;
}
.ownerMain:not(.ownerTab-game) .audienceQuickButtons {
  gap: 8px !important;
}
.ownerMain:not(.ownerTab-game) .audienceQuickButtons .miniBtn {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  color: #111827 !important;
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  box-shadow: 0 10px 24px rgba(17, 24, 39, .055), inset 0 1px 0 rgba(255,255,255,.78) !important;
}
.ownerMain:not(.ownerTab-game) .audienceQuickButtons .miniBtn.active {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #ff6b2b 0%, #ff3f73 52%, #9d4edd 100%) !important;
  box-shadow: 0 12px 26px rgba(238, 66, 102, .24), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.ownerMain:not(.ownerTab-game) .audienceQuickButtons .miniBtn:disabled,
.ownerMain:not(.ownerTab-game) .sendActions button:disabled {
  color: rgba(17, 24, 39, .48) !important;
  background: rgba(255, 255, 255, .56) !important;
  border-color: rgba(17, 24, 39, .06) !important;
  box-shadow: none !important;
  opacity: .72 !important;
}
.ownerTab-campaigns .messagePreviewCard {
  margin-bottom: 0 !important;
}

/* ---------- v107 game boot: never flash the landing page while the QR game loads ---------- */
html.playPreload body { background: #fbf7ef; }
html.playPreload .playLoadingShell { min-height: 100svh; background: #fbf7ef; }
html.playPreload .playerLoadingOrb { display: none !important; }


/* LocalSpin v108: cleaner owner sidebar tools folder + safer public game review handoff */
.sideNav.premiumSideNav .sideToolsGroup {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
}
.sideNav.premiumSideNav .sideFolderToggle {
  width: 100% !important;
}
.sideNav.premiumSideNav .sideFolderToggle.folderActive {
  color: #fff !important;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,122,26,.20), transparent 38%),
    radial-gradient(circle at 94% 72%, rgba(124,58,237,.22), transparent 42%),
    rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 12px 26px rgba(0,0,0,.10) !important;
}
.sideFolderChevron {
  position: relative !important;
  z-index: 1 !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(255,255,255,.82) !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  transition: transform .18s ease, background .18s ease !important;
}
.sideToolsGroup.open .sideFolderChevron {
  transform: rotate(180deg) !important;
  background: rgba(255,255,255,.14) !important;
}
.sideFolderItems {
  display: grid !important;
  gap: 7px !important;
  margin: -1px 0 1px 17px !important;
  padding: 2px 0 2px 10px !important;
  border-left: 1px solid rgba(255,255,255,.11) !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transform: translateY(-4px) !important;
  transition: max-height .24s ease, opacity .18s ease, transform .18s ease !important;
}
.sideToolsGroup.open .sideFolderItems {
  max-height: 245px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.sideNav.premiumSideNav button.sideToolChild {
  min-height: 42px !important;
  border-radius: 15px !important;
  padding: 5px 10px !important;
  background: rgba(255,255,255,.028) !important;
}
.sideNav.premiumSideNav button.sideToolChild .sideNavIcon {
  width: 28px !important;
  height: 28px !important;
  flex-basis: 28px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
}
.sideNav.premiumSideNav button.sideToolChild.active {
  background: linear-gradient(135deg, rgba(255,122,26,.96), rgba(255,79,80,.82) 48%, rgba(124,58,237,.76)) !important;
}
@media (min-width: 981px) and (max-height: 850px) {
  .sideNav.premiumSideNav .sideToolsGroup { gap: 5px !important; }
  .sideFolderItems { gap: 5px !important; margin-left: 14px !important; padding-left: 8px !important; }
  .sideNav.premiumSideNav button.sideToolChild { min-height: 36px !important; border-radius: 13px !important; }
}
@media (max-width: 980px) {
  .sideFolderItems { margin-left: 16px !important; }
  .sideNav.premiumSideNav button.sideToolChild { min-height: 44px !important; }
}

/* LocalSpin v109: premium closed Tools folder + stronger game review handoff */
.sideNav.premiumSideNav .sideToolsGroup {
  position: relative !important;
}
.sideNav.premiumSideNav .sideFolderToggle {
  min-height: 56px !important;
  padding: 8px 10px 8px 11px !important;
  border-radius: 19px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 122, 26, .18), transparent 38%),
    radial-gradient(circle at 94% 88%, rgba(157, 78, 221, .20), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .034)) !important;
  border: 1px solid rgba(255, 255, 255, .105) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 24px rgba(0, 0, 0, .09) !important;
}
.sideNav.premiumSideNav .sideFolderToggle::before {
  content: '' !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: 18px !important;
  background: linear-gradient(90deg, rgba(255, 122, 26, .08), transparent 35%, rgba(124, 58, 237, .08)) !important;
  opacity: .55 !important;
  z-index: -1 !important;
}
.sideToolsGroup:not(.open) .sideFolderToggle {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .088), rgba(255, 255, 255, .038)) padding-box,
    linear-gradient(135deg, rgba(255, 122, 26, .18), rgba(238, 66, 102, .08), rgba(157, 78, 221, .20)) border-box !important;
  border: 1px solid transparent !important;
}
.sideToolsGroup:not(.open) .sideFolderToggle:hover,
.sideNav.premiumSideNav .sideFolderToggle.folderActive {
  transform: translateY(-1px) !important;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,122,26,.22), transparent 38%),
    radial-gradient(circle at 94% 72%, rgba(124,58,237,.26), transparent 42%),
    rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.17) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 30px rgba(0,0,0,.12) !important;
}
.sideFolderMainIcon {
  background:
    linear-gradient(135deg, rgba(255, 122, 26, .98), rgba(238, 66, 102, .9) 54%, rgba(157, 78, 221, .94)) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 10px 20px rgba(238, 66, 102, .18), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
.sideFolderText {
  min-width: 0 !important;
}
.sideFolderText strong {
  letter-spacing: -.02em !important;
}
.sideFolderText small {
  max-width: 128px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: rgba(255, 255, 255, .62) !important;
}
.sideFolderMeta {
  position: relative !important;
  z-index: 1 !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-shrink: 0 !important;
}
.sideFolderMeta > b {
  min-width: 25px !important;
  height: 25px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .11) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}
.sideFolderChevron {
  width: 25px !important;
  height: 25px !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  font-size: 16px !important;
}
.sideToolsGroup.open .sideFolderChevron {
  transform: rotate(180deg) !important;
  background: rgba(255,255,255,.16) !important;
}
.sideFolderItems {
  position: relative !important;
  margin: 1px 0 2px 23px !important;
  padding: 6px 0 5px 12px !important;
  border-left: 1px solid rgba(255,255,255,.12) !important;
}
.sideFolderItems::before {
  content: '' !important;
  position: absolute !important;
  left: -1px !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 1px !important;
  background: linear-gradient(180deg, rgba(255, 122, 26, .7), rgba(238, 66, 102, .34), rgba(157, 78, 221, .5)) !important;
  border-radius: 999px !important;
}
.sideNav.premiumSideNav button.sideToolChild {
  background:
    radial-gradient(circle at 100% 50%, rgba(157, 78, 221, .08), transparent 48%),
    rgba(255,255,255,.032) !important;
  border-color: rgba(255,255,255,.055) !important;
}
.sideNav.premiumSideNav button.sideToolChild:hover {
  background: rgba(255,255,255,.065) !important;
  transform: translateX(2px) !important;
}
.sideNav.premiumSideNav button.sideToolChild.active {
  color: #fff !important;
  border-color: rgba(255,255,255,.18) !important;
  background: linear-gradient(135deg, rgba(255,122,26,.98), rgba(255,79,80,.86) 48%, rgba(124,58,237,.82)) !important;
  box-shadow: 0 13px 28px rgba(238,66,102,.20), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
@media (max-width: 980px) {
  .sideFolderText small { max-width: 180px !important; }
  .sideNav.premiumSideNav .sideFolderToggle { min-height: 58px !important; }
}

/* LocalSpin v110: polished folder toggle button and stable review flow */
.sideNav.premiumSideNav .sideFolderToggle {
  min-height: 58px !important;
  padding-right: 12px !important;
}
.sideFolderMeta {
  gap: 8px !important;
}
.sideFolderMeta > b {
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.07)) !important;
  color: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.12) !important;
}
.sideFolderChevron {
  width: 30px !important;
  height: 30px !important;
  border-radius: 13px !important;
  display: inline-grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 28%),
    linear-gradient(135deg, rgba(255,122,26,.86), rgba(238,66,102,.76) 48%, rgba(124,58,237,.86)) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 10px 22px rgba(238,66,102,.22), inset 0 1px 0 rgba(255,255,255,.26) !important;
  font-size: 0 !important;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, filter .22s ease !important;
}
.sideFolderChevron::before {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid rgba(255,255,255,.96) !important;
  border-bottom: 2px solid rgba(255,255,255,.96) !important;
  transform: rotate(45deg) translate(-1px, -1px) !important;
  border-radius: 1px !important;
}
.sideToolsGroup.open .sideFolderChevron {
  transform: rotate(180deg) !important;
  filter: saturate(1.08) brightness(1.04) !important;
}
.sideToolsGroup.open .sideFolderChevron::before {
  transform: rotate(45deg) translate(-1px, -1px) !important;
}
.sideToolsGroup:not(.open) .sideFolderToggle .sideFolderMeta > b {
  background: linear-gradient(135deg, rgba(255,122,26,.28), rgba(157,78,221,.22)) !important;
}
.sideNav.premiumSideNav .sideFolderToggle:hover .sideFolderChevron {
  box-shadow: 0 13px 28px rgba(238,66,102,.3), inset 0 1px 0 rgba(255,255,255,.32) !important;
}

/* LocalSpin v110: finished Tools folder toggle and safer review continuation button */
.sideNav.premiumSideNav .sideFolderToggle {
  min-height: 60px !important;
  padding: 9px 10px 9px 12px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.095), rgba(255,255,255,.035)) padding-box,
    linear-gradient(135deg, rgba(255,122,26,.24), rgba(238,66,102,.16) 48%, rgba(157,78,221,.25)) border-box !important;
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 13px 28px rgba(0,0,0,.12) !important;
}
.sideNav.premiumSideNav .sideFolderToggle::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: radial-gradient(circle at 88% 18%, rgba(255,255,255,.12), transparent 32%) !important;
  pointer-events: none !important;
}
.sideFolderMeta {
  gap: 8px !important;
}
.sideFolderMeta > b {
  min-width: 28px !important;
  height: 28px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08)) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
  font-weight: 950 !important;
}
.sideFolderChevron {
  width: 31px !important;
  height: 31px !important;
  border-radius: 13px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 20px rgba(0,0,0,.12) !important;
  display: inline-grid !important;
  place-items: center !important;
  transform: none !important;
}
.sideFolderChevron::before {
  content: '⌄' !important;
  display: block !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.24) !important;
}
.sideToolsGroup.open .sideFolderChevron {
  background: linear-gradient(135deg, rgba(255,122,26,.95), rgba(238,66,102,.82), rgba(157,78,221,.88)) !important;
  border-color: rgba(255,255,255,.22) !important;
  transform: none !important;
}
.sideToolsGroup.open .sideFolderChevron::before {
  content: '⌃' !important;
  transform: translateY(1px) !important;
}
.sideToolsGroup:not(.open) .sideFolderToggle .sideFolderText small {
  color: rgba(255,255,255,.70) !important;
}
.sideToolsGroup:not(.open) .sideFolderToggle {
  margin-bottom: 1px !important;
}
.reviewContinueBtn {
  margin-top: 12px !important;
  min-height: 54px !important;
  border-radius: 22px !important;
  font-weight: 900 !important;
  background: rgba(255,255,255,.72) !important;
}

/* LocalSpin v111: dedicated QR game boot and error states */
.gameDirectShell .gameBootCard {
  min-height: min(74svh, 620px) !important;
  align-content: center !important;
  text-align: center !important;
}
.gameDirectShell .playerBootIntro {
  display: grid !important;
  justify-items: center !important;
  gap: 16px !important;
}
.gameDirectShell .playerBootIntro h1 {
  max-width: 520px !important;
}
.gameDirectShell .errorBox p {
  margin: 8px 0 0 !important;
}
.gameDirectShell .playFormError {
  width: 100% !important;
}


/* LocalSpin v112: premium Tools folder finish + professional controlled wheel spin */
.sideNav.premiumSideNav .sideToolsGroup {
  margin: 2px 0 4px !important;
}
.sideNav.premiumSideNav .sideFolderToggle {
  min-height: 62px !important;
  padding: 10px 11px 10px 12px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,122,26,.30), transparent 34%),
    radial-gradient(circle at 94% 88%, rgba(157,78,221,.32), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.038)) padding-box,
    linear-gradient(135deg, rgba(255,122,26,.36), rgba(238,66,102,.18) 48%, rgba(157,78,221,.36)) border-box !important;
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 30px rgba(0,0,0,.16) !important;
}
.sideNav.premiumSideNav .sideFolderToggle::after {
  content: '' !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: 21px !important;
  background: linear-gradient(110deg, rgba(255,255,255,.15), transparent 38%, rgba(255,255,255,.07)) !important;
  opacity: .78 !important;
  pointer-events: none !important;
}
.sideToolsGroup:not(.open) .sideFolderToggle {
  background:
    radial-gradient(circle at 13% 13%, rgba(255,122,26,.24), transparent 34%),
    radial-gradient(circle at 94% 86%, rgba(157,78,221,.27), transparent 43%),
    linear-gradient(135deg, rgba(255,255,255,.092), rgba(255,255,255,.032)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,122,26,.18), rgba(157,78,221,.28)) border-box !important;
}
.sideToolsGroup.open .sideFolderToggle,
.sideNav.premiumSideNav .sideFolderToggle.folderActive {
  background:
    radial-gradient(circle at 12% 10%, rgba(255,122,26,.38), transparent 38%),
    radial-gradient(circle at 92% 82%, rgba(157,78,221,.38), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.125), rgba(255,255,255,.045)) padding-box,
    linear-gradient(135deg, rgba(255,122,26,.46), rgba(238,66,102,.28), rgba(157,78,221,.50)) border-box !important;
}
.sideFolderMainIcon {
  width: 32px !important;
  height: 32px !important;
  flex-basis: 32px !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 24px rgba(238,66,102,.22), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.sideFolderText strong {
  font-size: 15.5px !important;
}
.sideFolderText small {
  font-size: 10.5px !important;
  letter-spacing: .01em !important;
}
.sideFolderMeta {
  gap: 9px !important;
  align-items: center !important;
}
.sideFolderMeta > b {
  min-width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 18px rgba(0,0,0,.14) !important;
}
.sideFolderChevron {
  width: 36px !important;
  height: 36px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.40), transparent 30%),
    linear-gradient(135deg, #ff7a1a 0%, #ee4266 52%, #9d4edd 100%) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: 0 12px 26px rgba(238,66,102,.28), inset 0 1px 0 rgba(255,255,255,.36) !important;
  transform: none !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s ease, box-shadow .25s ease !important;
}
.sideFolderChevron::before {
  content: '' !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: rotate(45deg) translate(-1px, -1px) !important;
  border-radius: 1px !important;
  display: block !important;
}
.sideToolsGroup.open .sideFolderChevron {
  transform: rotate(180deg) !important;
  filter: saturate(1.1) brightness(1.06) !important;
}
.sideToolsGroup.open .sideFolderChevron::before {
  content: '' !important;
  transform: rotate(45deg) translate(-1px, -1px) !important;
}
.sideToolsGroup:not(.open) .sideFolderItems {
  margin-top: 0 !important;
}
.sideToolsGroup.open .sideFolderItems {
  margin-top: 8px !important;
}
.sideNav.premiumSideNav button.sideToolChild {
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.020)) !important;
}
.playerExperience .prizeWheel.spinToResult.spinning .wheelOuter {
  animation: prizeSpinV112 4.25s cubic-bezier(.075,.72,.025,1) both !important;
  transform-origin: 50% 50% !important;
  will-change: transform, filter !important;
  filter: drop-shadow(0 30px 48px rgba(255,122,26,.30)) !important;
}
.playerExperience .prizeWheel.spinToResult.spinning .wheelPointer {
  animation: wheelPointerTickV112 .18s ease-in-out 23 !important;
}
.playerExperience .prizeWheel.spinToResult.spinning .wheelCenter {
  animation: wheelCenterPulseV112 .62s ease-in-out infinite alternate !important;
}
@keyframes prizeSpinV112 {
  0% { transform: rotate(0deg) scale(1); }
  10% { transform: rotate(390deg) scale(1.032); }
  35% { transform: rotate(calc(var(--spin-final-deg, 2520deg) - 1180deg)) scale(1.020); }
  62% { transform: rotate(calc(var(--spin-final-deg, 2520deg) - 430deg)) scale(1.012); }
  82% { transform: rotate(calc(var(--spin-final-deg, 2520deg) - 96deg)) scale(1.006); }
  92% { transform: rotate(calc(var(--spin-final-deg, 2520deg) + 14deg)) scale(1.002); }
  97% { transform: rotate(calc(var(--spin-final-deg, 2520deg) - 6deg)) scale(1); }
  100% { transform: rotate(var(--spin-final-deg, 2520deg)) scale(1); }
}
@keyframes wheelPointerTickV112 {
  0%,100% { transform: translateX(-50%) rotate(0deg); }
  45% { transform: translateX(-50%) rotate(10deg); }
}
@keyframes wheelCenterPulseV112 {
  from { transform: translate(-50%, -50%) scale(1); box-shadow: 0 16px 28px rgba(20,14,8,.32), inset 0 0 0 5px rgba(255,255,255,.10); }
  to { transform: translate(-50%, -50%) scale(1.045); box-shadow: 0 22px 42px rgba(20,14,8,.42), inset 0 0 0 8px rgba(255,255,255,.16), 0 0 0 10px rgba(255,122,26,.16); }
}
.playerExperience .primaryBtn[disabled] {
  cursor: wait !important;
  opacity: .82 !important;
}


/* LocalSpin v113: polished customer wheel spin, no early reward reveal, and clearer form errors */
.playerExperience .prizeWheel.spinToResult.spinning .wheelOuter {
  animation: prizeSpinV113 5.15s cubic-bezier(.09,.78,.075,1) both !important;
  transform-origin: 50% 50% !important;
  will-change: transform, filter !important;
  filter: drop-shadow(0 34px 58px rgba(255,122,26,.34)) !important;
  transition: none !important;
}
.playerExperience .prizeWheel.spinToResult.spinning .wheelSegments::after {
  background:
    radial-gradient(circle, transparent 0 48%, rgba(255,255,255,.18) 49% 100%),
    conic-gradient(from 0deg, transparent 0 8%, rgba(255,255,255,.20) 11%, transparent 16%, transparent 100%) !important;
}
.playerExperience .prizeWheel.spinToResult.spinning .wheelPointer {
  animation: wheelPointerTickV113 .118s ease-in-out 44 !important;
  filter: drop-shadow(0 10px 16px rgba(255,106,43,.22)) !important;
}
.playerExperience .prizeWheel.spinToResult.spinning .wheelCenter {
  animation: wheelCenterPulseV113 .72s ease-in-out infinite alternate !important;
}
.playerExperience .prizeWheel.spinToResult.spinning .wheelCenter strong {
  letter-spacing: -.075em !important;
}
@keyframes prizeSpinV113 {
  0% { transform: rotate(0deg) scale(1); }
  8% { transform: rotate(260deg) scale(1.035); }
  22% { transform: rotate(960deg) scale(1.030); }
  44% { transform: rotate(calc(var(--spin-final-deg, 2520deg) - 1120deg)) scale(1.020); }
  66% { transform: rotate(calc(var(--spin-final-deg, 2520deg) - 360deg)) scale(1.012); }
  82% { transform: rotate(calc(var(--spin-final-deg, 2520deg) - 88deg)) scale(1.006); }
  91% { transform: rotate(calc(var(--spin-final-deg, 2520deg) + 10deg)) scale(1.002); }
  96% { transform: rotate(calc(var(--spin-final-deg, 2520deg) - 5deg)) scale(1); }
  100% { transform: rotate(var(--spin-final-deg, 2520deg)) scale(1); }
}
@keyframes wheelPointerTickV113 {
  0%, 100% { transform: translateX(-50%) rotate(0deg) scale(1); }
  46% { transform: translateX(-50%) rotate(12deg) scale(1.04); }
}
@keyframes wheelCenterPulseV113 {
  from { transform: translate(-50%, -50%) scale(1); box-shadow: 0 16px 28px rgba(20,14,8,.32), inset 0 0 0 5px rgba(255,255,255,.10); }
  to { transform: translate(-50%, -50%) scale(1.035); box-shadow: 0 24px 44px rgba(20,14,8,.42), inset 0 0 0 8px rgba(255,255,255,.16), 0 0 0 12px rgba(255,122,26,.15); }
}
.playerExperience .playForm label.hasFieldError,
.playerExperience .playForm .checkbox.hasFieldError,
.playerExperience .playerEntryForm label.referralFriendField.hasFieldError {
  border-color: rgba(255, 61, 110, .48) !important;
  background: linear-gradient(135deg, rgba(255, 245, 247, .98), rgba(255, 255, 255, .96)) !important;
  box-shadow: 0 12px 28px rgba(255, 61, 110, .10), inset 0 0 0 1px rgba(255, 61, 110, .08) !important;
}
.playerExperience .playForm label.hasFieldError input,
.playerExperience .playForm label.hasFieldError select,
.playerExperience .playForm .phoneFieldGroup.hasFieldError .phoneSplitField,
.playerExperience .playerEntryForm label.referralFriendField.hasFieldError input {
  border-color: rgba(255, 61, 110, .58) !important;
  box-shadow: 0 0 0 4px rgba(255, 61, 110, .10) !important;
}
.playerExperience .fieldInlineError {
  display: block !important;
  margin-top: 7px !important;
  color: #c9184a !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: -.01em !important;
}
.playerExperience .playFormError {
  border-color: rgba(255,61,110,.20) !important;
  background: linear-gradient(135deg, rgba(255,245,247,.96), rgba(255,255,255,.92)) !important;
  color: #991b1b !important;
}

/* LocalSpin v114: smaller owner page titles + cleaner Wheel Setup and referral controls */
.ownerMain .dashHeader h1,
.ownerMain:not(.ownerTab-game) .dashHeader h1 {
  font-size: clamp(30px, 3.4vw, 54px) !important;
  line-height: .96 !important;
  letter-spacing: -.065em !important;
}
.ownerMain .dashHeader {
  padding-top: clamp(22px, 3vw, 40px) !important;
  padding-bottom: clamp(22px, 3vw, 40px) !important;
}
@media (max-width: 760px) {
  .ownerMain .dashHeader h1,
  .ownerMain:not(.ownerTab-game) .dashHeader h1 {
    font-size: clamp(28px, 8vw, 38px) !important;
    letter-spacing: -.055em !important;
  }
  .ownerMain .dashHeader {
    padding: 20px 18px !important;
    border-radius: 28px !important;
  }
}
.wheelSetupHeroV114 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 20px !important;
  align-items: center !important;
  margin-bottom: 22px !important;
  border-radius: 34px !important;
  padding: 26px !important;
  background:
    radial-gradient(circle at 0 0, rgba(255,122,26,.18), transparent 22rem),
    radial-gradient(circle at 95% 20%, rgba(236,72,153,.14), transparent 24rem),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,250,246,.88)) !important;
  border: 1px solid rgba(255,122,26,.13) !important;
  box-shadow: 0 24px 70px rgba(17,24,39,.07), inset 0 1px 0 rgba(255,255,255,.84) !important;
}
.wheelSetupHeroV114 h2 {
  font-size: clamp(28px, 3vw, 46px) !important;
  letter-spacing: -.06em !important;
  margin-top: 6px !important;
}
.wheelSetupHeroV114 p {
  margin: 8px 0 0 !important;
  color: #6f6258 !important;
  font-weight: 780 !important;
  line-height: 1.45 !important;
}
.wheelSetupHeroStatsV114 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(90px, 1fr)) !important;
  gap: 10px !important;
  min-width: min(420px, 42vw) !important;
}
.wheelSetupHeroStatsV114 span {
  display: grid !important;
  gap: 4px !important;
  padding: 14px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(17,24,39,.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 12px 30px rgba(17,24,39,.05) !important;
  color: #7a6b5f !important;
  font-weight: 900 !important;
  font-size: 12px !important;
}
.wheelSetupHeroStatsV114 strong {
  color: #111827 !important;
  font-size: 22px !important;
  letter-spacing: -.04em !important;
}
.wheelSetupGridV114 {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
  gap: 24px !important;
  align-items: start !important;
}
.wheelSetupBuilderV114 {
  display: grid !important;
  gap: 18px !important;
}
.setupSectionV114 {
  position: relative !important;
  display: grid !important;
  gap: 14px !important;
  padding: 18px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 0 0, rgba(255,122,26,.07), transparent 16rem),
    rgba(255,255,255,.66) !important;
  border: 1px solid rgba(17,24,39,.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80), 0 14px 36px rgba(17,24,39,.045) !important;
}
.setupSectionSoftV114 {
  background:
    radial-gradient(circle at 0 0, rgba(255,122,26,.11), transparent 18rem),
    radial-gradient(circle at 100% 100%, rgba(157,78,221,.09), transparent 18rem),
    rgba(255,255,255,.70) !important;
}
.sectionTitleV114 {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
.sectionTitleV114 > span {
  width: 36px !important;
  height: 36px !important;
  border-radius: 15px !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 36px !important;
  color: #fff !important;
  font-weight: 950 !important;
  font-size: 13px !important;
  background: linear-gradient(135deg, #ff7a1a, #ee4266, #7c3aed) !important;
  box-shadow: 0 12px 24px rgba(238,66,102,.22), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.sectionTitleV114 h2 {
  font-size: clamp(20px, 1.8vw, 28px) !important;
  letter-spacing: -.045em !important;
  margin: 0 !important;
}
.sectionTitleV114 p {
  margin: 4px 0 0 !important;
  color: #7b6f66 !important;
  font-weight: 760 !important;
  line-height: 1.45 !important;
}
.toggleSettingGridV114 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.toggleSettingCardV114 {
  position: relative !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  padding: 16px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(17,24,39,.08) !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 12px 28px rgba(17,24,39,.045) !important;
  cursor: pointer !important;
}
.toggleSettingCardV114.isOn {
  border-color: rgba(34,197,94,.22) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(34,197,94,.13), transparent 12rem),
    rgba(255,255,255,.84) !important;
}
.toggleSettingCardV114 input {
  appearance: none !important;
  width: 46px !important;
  height: 28px !important;
  flex: 0 0 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17,24,39,.11) !important;
  background: rgba(17,24,39,.13) !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.10) !important;
  position: relative !important;
  margin: 0 !important;
}
.toggleSettingCardV114 input::after {
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(17,24,39,.18) !important;
  transition: transform .18s ease !important;
}
.toggleSettingCardV114 input:checked {
  background: linear-gradient(135deg, #22c55e, #10b981) !important;
  border-color: rgba(34,197,94,.45) !important;
}
.toggleSettingCardV114 input:checked::after { transform: translateX(18px) !important; }
.toggleSettingCardV114 strong {
  display: block !important;
  font-size: 14px !important;
  color: #111827 !important;
  letter-spacing: -.02em !important;
}
.toggleSettingCardV114 small {
  display: block !important;
  margin-top: 4px !important;
  color: #71665d !important;
  font-weight: 740 !important;
  line-height: 1.36 !important;
}
.setupPreviewPillsV114 {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin: 12px 0 14px !important;
}
.setupPreviewPillsV114 span {
  padding: 8px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  color: #7c2d12 !important;
  background: rgba(255,237,213,.85) !important;
  border: 1px solid rgba(255,122,26,.14) !important;
}
.referralControlGridV114 {
  grid-template-columns: minmax(0, .95fr) minmax(380px, 1.05fr) !important;
  align-items: start !important;
}
.referralSettingsPanelV114,
.referralPreviewPanelV114 {
  background:
    radial-gradient(circle at 0 0, rgba(255,122,26,.09), transparent 18rem),
    radial-gradient(circle at 100% 100%, rgba(157,78,221,.07), transparent 18rem),
    rgba(255,255,255,.95) !important;
}
@media (max-width: 1060px) {
  .wheelSetupHeroV114,
  .wheelSetupGridV114,
  .referralControlGridV114 { grid-template-columns: 1fr !important; }
  .wheelSetupHeroStatsV114 { min-width: 0 !important; width: 100% !important; }
  .wheelSetupPreviewV114 { position: relative !important; top: auto !important; }
}
@media (max-width: 760px) {
  .wheelSetupHeroV114 { padding: 20px !important; border-radius: 28px !important; }
  .wheelSetupHeroStatsV114,
  .toggleSettingGridV114 { grid-template-columns: 1fr !important; }
  .setupSectionV114 { padding: 15px !important; border-radius: 24px !important; }
}