@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/urbanist-latin.woff2") format("woff2");
}

:root {
  --lime: #d4ff3a;
  --purple: #8116e0;
  --purple-dark: #510e8c;
  --black: #0b0b0b;
  --ink: #171219;
  --white: #fefffc;
  --off-white: #f8f9fa;
  --line-dark: rgba(11, 11, 11, 0.18);
  --line-light: rgba(254, 255, 252, 0.22);
  --page: min(92vw, 1440px);
  --radius: 1.5rem;
  --font-body: "Urbanist", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 7rem; }
body { margin: 0; overflow-x: hidden; background: var(--off-white); color: var(--ink); font-family: "Urbanist", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.6; }
body.menu-open, body.dialog-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -0.055em; line-height: 0.96; }
h1 { font-size: clamp(4rem, 8vw, 8.6rem); font-weight: 900; }
h2 { font-size: clamp(3rem, 6.4vw, 6.8rem); font-weight: 900; }
h3 { font-size: clamp(1.6rem, 3vw, 3rem); font-weight: 800; }
p { font-weight: 400; }

.announcement { position: relative; z-index: 100; height: 2rem; overflow: hidden; background: var(--lime); color: var(--black); border-bottom: 1px solid var(--black); }
.announcement-track { display: flex; align-items: center; width: max-content; height: 100%; gap: 2.4rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; animation: ticker 28s linear infinite; }
.announcement-track i { font-style: normal; color: var(--purple); }
@keyframes ticker { to { transform: translateX(-50%); } }

.site-header { position: sticky; top: 0; z-index: 90; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; min-height: 5.8rem; padding: 0 3vw; background: rgba(11,11,11,.96); color: var(--white); border-bottom: 1px solid rgba(212,255,58,.35); backdrop-filter: blur(14px); }
.brand img { width: clamp(9.5rem, 14vw, 13rem); height: 4.3rem; object-fit: contain; object-position: left center; }
.desktop-nav { display: flex; gap: clamp(1.1rem, 2vw, 2rem); }
.desktop-nav a, .login-link { text-decoration: none; font-size: .92rem; font-weight: 600; transition: color 180ms ease; }
.desktop-nav a:hover, .login-link:hover { color: var(--lime); }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }
.menu-toggle { display: none; width: 2.75rem; height: 2.75rem; padding: .75rem; border: 1px solid var(--line-light); border-radius: 50%; background: transparent; }
.menu-toggle span { display: block; height: 2px; margin: .3rem 0; background: var(--white); }
.mobile-nav { position: fixed; inset: 5.8rem 0 0; z-index: 89; flex-direction: column; gap: .6rem; padding: 3rem 1.5rem; background: var(--lime); color: var(--black); }
.mobile-nav:not([hidden]) { display: flex; }
.mobile-nav a { padding: .55rem 0; font-size: clamp(2.2rem, 8vw, 4rem); font-weight: 900; line-height: 1; letter-spacing: -.05em; text-decoration: none; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 3.4rem; padding: .82rem 1.35rem; border: 1px solid var(--black); border-radius: 999px; font-size: .82rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform 180ms ease, background 180ms ease, color 180ms ease; }
.button:hover { transform: translateY(-2px) scale(1.015); }
.button-lime { background: var(--lime); color: var(--black); }
.button-dark { background: var(--black); color: var(--white); border-color: var(--black); }
.button-outline-light { background: transparent; color: var(--white); border-color: var(--white); }
.button-outline-dark { background: transparent; color: var(--black); }
.text-link { display: inline-flex; gap: .5rem; align-items: center; color: var(--white); font-weight: 700; text-underline-offset: .28rem; }
.text-link span { color: var(--lime); }
.dark-link { color: var(--black); }
.dark-link span { color: var(--purple); }
.kicker { margin-bottom: 1.1rem; font-size: .75rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.section-pad { padding: clamp(5rem, 10vw, 10rem) max(4vw, calc((100vw - 1440px) / 2)); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .65fr); align-items: end; gap: 2rem; margin-bottom: 3rem; }
.section-heading .kicker { grid-column: 1 / -1; margin-bottom: -.5rem; color: var(--purple); }
.section-heading h2 { max-width: 11ch; margin-bottom: 0; }
.section-heading > p:last-child { max-width: 38rem; margin: 0; font-size: 1.05rem; }
.section-heading-light { color: var(--white); }
.section-heading-light .kicker { color: var(--lime); }
.section-heading-light > p:last-child { color: rgba(254,255,252,.72); }

.hero { --pointer-x: 72%; --pointer-y: 35%; --tilt-x: 0px; --tilt-y: 0px; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(28rem, .95fr); align-items: center; min-height: calc(100svh - 7.8rem); padding: clamp(3rem, 7vw, 7rem) max(4vw, calc((100vw - 1440px) / 2)); overflow: hidden; background: var(--black); color: var(--white); border-bottom: 1px solid var(--line-light); }
.hero-spotlight { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(129,22,224,.82), transparent 35%), radial-gradient(circle at 15% 80%, rgba(212,255,58,.12), transparent 30%), var(--black); }
.hero::after { content: ""; position: absolute; z-index: -1; right: -8vw; bottom: -10vw; width: min(88vw, 92rem); aspect-ratio: 2.45 / 1; background: url("assets/snappi-logo.webp") center / contain no-repeat; opacity: .035; filter: drop-shadow(0 0 2rem rgba(212,255,58,.18)); transition: opacity 350ms ease, filter 350ms ease, transform 350ms ease; }
.hero:hover::after { opacity: .12; filter: drop-shadow(0 0 2.5rem rgba(212,255,58,.3)); transform: scale(1.015); }
.hero-copy { position: relative; z-index: 2; max-width: 56rem; }
.hero-copy .kicker { color: var(--lime); }
.hero h1 { margin-bottom: 1.6rem; font-size: clamp(3.6rem, 6.6vw, 7rem); line-height: .91; }
.hero h1 span { color: var(--lime); }
.hero-intro { max-width: 42rem; color: rgba(254,255,252,.75); font-size: clamp(1rem, 1.6vw, 1.3rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.hero-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 2rem; }
.hero-tags span { padding: .42rem .8rem; border: 1px solid var(--line-light); border-radius: 999px; color: rgba(254,255,252,.75); font-size: .75rem; }
.hero-media { position: relative; min-height: 38rem; transform: translate(var(--tilt-x), var(--tilt-y)); transition: transform 300ms ease-out; }
.phone-card { position: absolute; overflow: hidden; width: clamp(12rem, 19vw, 18rem); aspect-ratio: 9 / 16; margin: 0; border: 1px solid rgba(254,255,252,.45); border-radius: 1.8rem; background: var(--purple); box-shadow: 0 2rem 5rem rgba(0,0,0,.42); }
.phone-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.phone-card-two img { object-position: center 38%; }
.phone-card-three img { object-position: center 36%; }
.phone-card figcaption { position: absolute; inset: auto .75rem .75rem; display: grid; padding: .75rem; border: 1px solid rgba(255,255,255,.28); border-radius: 1rem; background: rgba(11,11,11,.75); backdrop-filter: blur(12px); }
.phone-card figcaption b { font-size: .82rem; }.phone-card figcaption span { color: var(--lime); font-size: .75rem; }
.phone-card-one { left: 2%; top: 10%; transform: rotate(-8deg); }.phone-card-two { left: 36%; top: 0; z-index: 2; transform: rotate(3deg); }.phone-card-three { right: -7%; top: 16%; transform: rotate(9deg); }
.floating-note { position: absolute; z-index: 5; padding: .75rem 1rem; border-radius: 999px; background: var(--white); color: var(--black); border: 1px solid var(--black); font-size: .75rem; font-weight: 700; box-shadow: .35rem .35rem 0 var(--lime); }
.note-one { left: 1%; top: 4%; }.note-one b { color: var(--purple); }.note-two { right: 2%; bottom: 8%; }.note-two b { color: var(--purple); font-size: 1rem; }

.audience-section { background: var(--off-white); }
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.audience-card { position: relative; isolation: isolate; overflow: hidden; min-height: 44rem; padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--black); border-radius: var(--radius); }
.audience-card > *:not(img) { position: relative; z-index: 2; }
.audience-card h3 { max-width: 14ch; font-size: clamp(2.5rem, 4.4vw, 5rem); }
.audience-card ul { display: grid; gap: .55rem; max-width: 32rem; margin: 1.5rem 0 2rem; padding: 0; list-style: none; }
.audience-card li::before { content: "✓"; margin-right: .55rem; font-weight: 900; }
.card-index { font-size: .75rem; font-weight: 900; letter-spacing: .1em; }
.audience-card img { position: absolute; z-index: 0; right: -8%; bottom: -14%; width: 60%; height: 62%; object-fit: cover; object-position: center 38%; border-radius: 50% 50% 0 0; filter: saturate(.92); }
.audience-card::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, transparent 45%, rgba(255,255,255,.18)); pointer-events: none; }
.audience-brand { background: var(--lime); color: var(--black); }
.audience-creator { background: var(--purple); color: var(--white); }
.audience-creator img { width: 65%; }.audience-creator::after { background: linear-gradient(90deg, var(--purple) 30%, transparent 80%); }

.feed-section { background: var(--black); color: var(--white); }
.filter-pills { display: flex; gap: .45rem; overflow-x: auto; margin-bottom: 1.2rem; padding-bottom: .35rem; }
.filter-pills button, .quantity-switch button { flex: 0 0 auto; padding: .75rem 1rem; border: 1px solid var(--line-light); border-radius: 999px; background: transparent; color: inherit; font-weight: 700; cursor: pointer; }
.filter-pills button.is-active { background: var(--lime); color: var(--black); border-color: var(--lime); }
.feed-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 15rem; gap: .8rem; }
.feed-card { position: relative; grid-column: span 4; overflow: hidden; border: 1px solid var(--line-light); border-radius: var(--radius); background: var(--purple); }
.feed-card[hidden] { display: none; }
.feed-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
.feed-card[data-category="food"] img { object-position: center 46%; }
.feed-card[data-category="fitness"] img { object-position: center 34%; }
.feed-card > div { position: absolute; inset: auto 0 0; padding: 3rem 1.2rem 1.2rem; background: linear-gradient(transparent, rgba(0,0,0,.9)); }
.feed-card span { color: var(--lime); font-size: .75rem; font-weight: 900; letter-spacing: .11em; }.feed-card h3 { margin: .15rem 0; font-size: 1.55rem; }.feed-card p { margin: 0; color: rgba(255,255,255,.72); font-size: .8rem; }
.feed-card:hover img { transform: scale(1.055); }.feed-tall { grid-row: span 2; }.feed-wide { grid-column: span 8; }
.feed-message { display: flex; flex-direction: column; justify-content: space-between; padding: 1.4rem; background: var(--lime); color: var(--black); }.feed-message h3 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }.feed-message b { align-self: flex-end; color: var(--purple); font-size: 2rem; }

.outcomes-section { background: var(--white); }
.outcome-list { border-top: 1px solid var(--black); }
.outcome { display: grid; grid-template-columns: 5rem minmax(16rem, .75fr) minmax(18rem, 1fr); gap: 2rem; align-items: center; padding: 2.1rem 0; border-bottom: 1px solid var(--black); transition: padding 200ms ease, background 200ms ease; }
.outcome:hover { padding-inline: 1rem; background: var(--lime); }.outcome > span { color: var(--purple); font-weight: 900; }.outcome h3 { margin: 0; font-size: clamp(1.75rem, 3vw, 3rem); }.outcome p { max-width: 42rem; margin: 0; }

.sample-section { display: grid; grid-template-columns: minmax(18rem, .65fr) minmax(0, 1.35fr); gap: clamp(2rem, 6vw, 6rem); background: var(--purple); color: var(--white); }
.sample-copy { align-self: center; }.sample-copy .kicker { color: var(--lime); }.sample-copy p { color: rgba(255,255,255,.75); }.sample-disclaimer { display: inline-flex; padding: .5rem .8rem; border: 1px solid var(--line-light); border-radius: 999px; font-size: .75rem; }
.campaign-demo { display: grid; grid-template-rows: auto 28rem auto; overflow: hidden; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius); background: var(--white); color: var(--black); }
.campaign-demo-top { display: flex; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--black); font-size: .75rem; font-weight: 900; letter-spacing: .08em; }.campaign-demo-top b { color: var(--purple); }
.campaign-preview { display: grid; grid-template-columns: .9fr 1.1fr; height: 28rem; min-height: 0; }.campaign-preview img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }.campaign-preview > div { align-self: center; min-width: 0; padding: clamp(1.5rem, 4vw, 3.5rem); }.campaign-preview small { color: var(--purple); font-weight: 900; }.campaign-preview h3 { min-height: 2.1em; margin: .6rem 0 1rem; }.campaign-preview p { min-height: 5.2em; margin: 0; }
.campaign-steps { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--black); }.campaign-steps button { min-height: 4rem; border: 0; border-right: 1px solid var(--black); background: var(--white); color: var(--black); font-size: .75rem; font-weight: 800; cursor: pointer; }.campaign-steps button:last-child { border-right: 0; }.campaign-steps button.is-active { background: var(--lime); }

.roster-section { text-align: center; background: var(--black); color: var(--white); }
.roster-section .section-heading { display: block; max-width: 70rem; margin-inline: auto; }.roster-section .section-heading h2 { max-width: none; }.roster-section .section-heading p:last-child { margin: 1.5rem auto 0; }
.center-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

.process-section { display: grid; grid-template-columns: minmax(18rem, .7fr) minmax(0, 1.3fr); gap: clamp(3rem, 8vw, 8rem); background: var(--off-white); }
.process-sticky { position: sticky; top: 8rem; align-self: start; }.process-sticky .kicker { color: var(--purple); }.process-sticky p { max-width: 30rem; }
.process-list { margin: 0; padding: 0; list-style: none; }.process-list li { display: grid; grid-template-columns: 5rem 1fr; gap: 1.5rem; min-height: 12rem; padding: 2rem; border: 1px solid var(--black); border-bottom: 0; background: var(--white); transition: background 240ms ease, color 240ms ease, transform 240ms ease; }.process-list li:first-child { border-radius: var(--radius) var(--radius) 0 0; }.process-list li:last-child { border-bottom: 1px solid var(--black); border-radius: 0 0 var(--radius) var(--radius); }.process-list li.is-active { position: relative; z-index: 2; background: var(--lime); transform: scale(1.02); }.process-list li > span { color: var(--purple); font-size: 1.5rem; font-weight: 900; }.process-list small { font-size: .75rem; font-weight: 900; letter-spacing: .1em; }.process-list h3 { margin: .75rem 0 0; }

.pricing-section { background: var(--lime); }
.quantity-switch { display: flex; justify-content: center; gap: .35rem; width: fit-content; margin: 0 auto 2rem; padding: .3rem; border: 1px solid var(--black); border-radius: 999px; background: rgba(255,255,255,.45); }.quantity-switch button { color: var(--black); border: 0; }.quantity-switch button.is-active { background: var(--black); color: var(--white); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }.price-card { position: relative; display: flex; flex-direction: column; min-height: 37rem; padding: clamp(1.4rem, 3vw, 2.4rem); border: 1px solid var(--black); border-radius: var(--radius); background: var(--white); transition: transform 250ms ease, box-shadow 250ms ease; }.price-card.is-selected { transform: translateY(-.75rem); box-shadow: .55rem .55rem 0 var(--black); }.price-featured { background: var(--purple); color: var(--white); }.price-card h3 { margin: 2rem 0 .8rem; font-size: clamp(2.5rem, 4vw, 4rem); }.price-card h3 small { font-size: .75rem; letter-spacing: .02em; }.price-card > p:not(.card-index) { min-height: 4.8rem; }.price-card ul { display: grid; gap: .75rem; margin: 1.5rem 0 2rem; padding: 1.5rem 0 0; border-top: 1px solid currentColor; list-style: none; }.price-card li::before { content: "●"; margin-right: .55rem; color: var(--purple); }.price-featured li::before { color: var(--lime); }.price-card .button { width: 100%; margin-top: auto; }.popular { position: absolute; top: 1rem; right: 1rem; padding: .45rem .75rem; border-radius: 999px; background: var(--black); color: var(--lime); font-size: .75rem; font-weight: 900; }
.package-details { margin-top: 1rem; border: 1px solid var(--black); border-radius: 1rem; background: rgba(255,255,255,.55); }.package-details summary { display: flex; justify-content: space-between; padding: 1rem 1.2rem; font-weight: 800; cursor: pointer; }.comparison-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--black); }.comparison-grid p { display: grid; gap: .4rem; margin: 0; padding: 1.2rem; border-right: 1px solid var(--black); }.comparison-grid p:last-child { border-right: 0; }.comparison-grid span { font-size: .8rem; }

.creator-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; min-height: 47rem; overflow: hidden; background: var(--lime); border-block: 1px solid var(--black); }.creator-cta-copy { align-self: center; }.creator-cta-copy h2 { max-width: 12ch; }.creator-cta-copy > p:not(.kicker) { max-width: 38rem; }.creator-cta-copy > div { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; }.creator-cta-image { position: relative; align-self: end; height: 100%; min-height: 38rem; }.creator-cta-image img { position: absolute; right: 0; bottom: -10rem; width: 100%; height: calc(100% + 8rem); object-fit: cover; object-position: 58% 38%; border: 1px solid var(--black); border-radius: 50% 50% 0 0; }.creator-cta-image span { position: absolute; left: -2rem; top: 20%; z-index: 2; padding: 1rem; background: var(--purple); color: var(--white); font-size: clamp(1.4rem, 3vw, 3rem); font-weight: 900; line-height: .9; transform: rotate(-6deg); }

.faq-section { display: grid; grid-template-columns: minmax(18rem, .65fr) minmax(0, 1.35fr); gap: clamp(3rem, 8vw, 8rem); background: var(--off-white); }.faq-intro { align-self: start; }.faq-intro .kicker { color: var(--purple); }.faq-intro a { color: var(--purple); font-weight: 700; }.faq-list { border-top: 1px solid var(--black); }.faq-list details { border-bottom: 1px solid var(--black); }.faq-list summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem 1rem; font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 800; cursor: pointer; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list details[open] { background: var(--lime); }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list summary span { transition: transform 200ms ease; }.faq-list details p { max-width: 50rem; padding: 0 1rem 1.5rem; margin: 0; }

.contact-section { text-align: center; background: var(--purple); color: var(--white); }.contact-section .kicker { color: var(--lime); }.contact-section h2 { max-width: 14ch; margin-inline: auto; }.contact-options { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 85rem; margin: 3rem auto 0; border: 1px solid var(--white); border-radius: var(--radius); overflow: hidden; }.contact-options > * { position: relative; display: grid; gap: .6rem; min-height: 18rem; padding: 1.5rem; border: 0; border-right: 1px solid var(--white); background: transparent; color: var(--white); text-align: left; text-decoration: none; cursor: pointer; transition: background 220ms ease, color 220ms ease; }.contact-options > *:last-child { border-right: 0; }.contact-options > *:hover { background: var(--lime); color: var(--black); }.contact-options span { font-size: .75rem; font-weight: 900; }.contact-options b { align-self: end; font-size: clamp(1.5rem, 2.5vw, 2.5rem); line-height: 1; letter-spacing: -.04em; }.contact-options small { font-size: .8rem; }.contact-options i { position: absolute; right: 1.2rem; top: 1rem; color: var(--lime); font-size: 1.5rem; font-style: normal; }.contact-options > *:hover i { color: var(--purple); }

.site-footer { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 3rem; padding: 4rem max(4vw, calc((100vw - 1440px) / 2)) 2rem; background: var(--black); color: var(--white); border-top: 1px solid var(--line-light); }.footer-brand img { width: 13rem; height: 6rem; object-fit: contain; object-position: left; }.footer-brand p { max-width: 33rem; color: rgba(255,255,255,.68); }.footer-column { display: flex; flex-direction: column; gap: .75rem; }.footer-column b, .footer-social > b { margin-bottom: .75rem; color: var(--lime); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }.footer-column a { color: rgba(255,255,255,.84); text-decoration: none; }.footer-column a:hover { color: var(--lime); }.footer-column small { color: rgba(255,255,255,.56); font-size: .75rem; }.footer-social > div { display: flex; gap: .6rem; margin-top: 1rem; }.footer-social a { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; }.footer-social a:hover { border-color: var(--lime); background: rgba(212,255,58,.14); transform: translateY(-2px); }.footer-social img { width: 1.3rem; height: 1.3rem; }.footer-bottom { grid-column: 1 / -1; margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line-light); color: rgba(255,255,255,.55); font-size: .75rem; text-align: center; }
.legal-page { min-height: 100vh; background: var(--white); color: var(--black); }.legal-header { display: flex; align-items: center; justify-content: space-between; min-height: 5rem; padding: 0 max(4vw, calc((100vw - 1440px) / 2)); border-bottom: 1px solid var(--black); background: var(--lime); }.legal-header img { width: 10rem; height: 4rem; object-fit: contain; }.legal-header a { color: var(--purple); font-weight: 800; }.legal-main { width: min(62rem, calc(100% - 2rem)); margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) 0; }.legal-main h1 { max-width: 10ch; }.legal-lead { max-width: 46rem; margin: 1.5rem 0 3rem; font-size: clamp(1rem, 2vw, 1.25rem); }.legal-notice { display: grid; gap: 0; border: 1px solid var(--black); border-radius: var(--radius); overflow: hidden; }.legal-notice section { padding: clamp(1.4rem, 4vw, 2.5rem); border-bottom: 1px solid var(--black); }.legal-notice section:last-child { border-bottom: 0; }.legal-notice h2 { margin-bottom: .75rem; font-size: clamp(1.25rem, 3vw, 2rem); }.legal-notice p { max-width: 52rem; margin: 0; }.legal-updated { margin-top: 1.5rem; color: rgba(11,11,11,.65); font-size: .75rem; }


.reveal { opacity: 1; transform: none; transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.2,1); }.reveal.is-pending-reveal { opacity: 0; transform: translateY(2rem); }.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  .site-header { grid-template-columns: 1fr auto; }.desktop-nav { display: none; }.menu-toggle { display: block; }.login-link { display: none; }
}

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; padding-top: 5rem; }.hero-copy { max-width: 52rem; }.hero-media { min-height: 34rem; margin-top: 2rem; }.phone-card-one { left: 6%; }.phone-card-two { left: 38%; }.phone-card-three { right: 4%; }
  .audience-grid, .sample-section, .process-section, .faq-section { grid-template-columns: 1fr; }.process-sticky { position: static; }.pricing-grid { grid-template-columns: 1fr; }.price-card { min-height: auto; }.price-card.is-selected { transform: none; box-shadow: .45rem .45rem 0 var(--black); }
  .site-footer { grid-template-columns: 1.5fr 1fr 1fr; }.footer-social { grid-column: 2 / -1; }
}

@media (max-width: 760px) {
  h1 { font-size: clamp(3.5rem, 15vw, 5.5rem); }.section-pad { padding: 5rem 1.15rem; }.site-header { min-height: 4.75rem; padding: 0 1rem; }.brand img { width: 9rem; height: 3.5rem; }.header-actions > .button { display: none; }.mobile-nav { inset: 4.75rem 0 0; }
  .hero { min-height: auto; padding: 4.5rem 1.15rem 3rem; }.hero-media { min-height: 25rem; }.phone-card { width: 10rem; border-radius: 1.25rem; }.phone-card-one { left: 0; top: 12%; }.phone-card-two { left: calc(50% - 5rem); }.phone-card-three { right: 0; top: 17%; }.floating-note { display: none; }
  .section-heading { grid-template-columns: 1fr; }.section-heading .kicker { grid-column: auto; }.audience-card { min-height: 40rem; }.audience-card img { width: 80%; opacity: .7; }.audience-card::after { background: linear-gradient(180deg, transparent 45%, rgba(255,255,255,.15)); }.audience-creator::after { background: linear-gradient(180deg, var(--purple) 25%, transparent 85%); }
  .feed-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; }.feed-card, .feed-wide, .feed-tall { flex: 0 0 82vw; height: 31rem; scroll-snap-align: center; }.feed-message { height: 22rem; }
  .outcome { grid-template-columns: 3rem 1fr; gap: 1rem; }.outcome p { grid-column: 2; }.campaign-demo { grid-template-rows: auto 34rem auto; }.campaign-preview { grid-template-columns: 1fr; grid-template-rows: 18rem 16rem; height: 34rem; }.campaign-preview img { height: 18rem; }.campaign-preview > div { align-self: start; overflow: auto; height: 16rem; }.campaign-preview h3, .campaign-preview p { min-height: 0; }.campaign-steps { display: flex; overflow-x: auto; }.campaign-steps button { flex: 0 0 6rem; }.process-list li { grid-template-columns: 3rem 1fr; min-height: 10rem; padding: 1.2rem; }.comparison-grid { grid-template-columns: 1fr; }.comparison-grid p { border-right: 0; border-bottom: 1px solid var(--black); }.creator-cta { grid-template-columns: 1fr; }.creator-cta-image { min-height: 27rem; }.creator-cta-image img { bottom: -6rem; }.contact-options { grid-template-columns: 1fr; }.contact-options > * { min-height: 12rem; border-right: 0; border-bottom: 1px solid var(--white); }.contact-options > *:last-child { border-bottom: 0; }.site-footer { grid-template-columns: 1fr 1fr; }.footer-brand { grid-column: 1 / -1; }.footer-social { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }.announcement-track { animation: none; }.reveal { opacity: 1; transform: none; transition: none; }.hero-media, .feed-card img, .button { transition: none; }
}

/* ===== ANALYTICS CONSENT =====
   Compact privacy notice. Analytics remains off until Accept is selected. */
.cookie-consent {
  position: fixed;
  z-index: 1000;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  width: min(31rem, calc(100% - 2rem));
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: end;
  padding: 1.1rem;
  border: 1px solid rgba(254,255,252,.35);
  border-radius: 1.25rem;
  background: rgba(129,22,224,.96);
  color: #fefffc;
  box-shadow: 0 1.2rem 3rem rgba(35,7,56,.24);
  backdrop-filter: blur(16px);
}
.cookie-consent[hidden], .privacy-settings[hidden] { display: none !important; }
.cookie-consent p { display: grid; gap: .3rem; margin: 0; font-size: .82rem; line-height: 1.45; }
.cookie-consent strong { color: #d4ff3a; font-size: 1rem; }
.cookie-consent a { width: fit-content; color: #fefffc; font-weight: 800; text-underline-offset: .18em; }
.cookie-consent > div { display: flex; gap: .45rem; }
.cookie-consent button,
.privacy-settings {
  padding: .75rem .9rem;
  border: 1px solid rgba(254,255,252,.55);
  border-radius: 999px;
  background: rgba(254,255,252,.1);
  color: #fefffc;
  font: inherit;
  font-size: .78rem;
  font-weight: 900;
  cursor: pointer;
}
.cookie-consent button.is-primary { border-color: #d4ff3a; background: #d4ff3a; color: #16051f; }
.cookie-consent button:hover { transform: translateY(-1px); }
.privacy-settings { position: fixed; z-index: 999; bottom: .75rem; left: .75rem; border-color: rgba(129,22,224,.25); background: rgba(254,255,252,.88); color: #8116e0; backdrop-filter: blur(10px); }
@media (max-width: 600px) {
  .cookie-consent { grid-template-columns: 1fr; }
  .cookie-consent > div { justify-content: stretch; }
  .cookie-consent button { flex: 1; }
}

/* Interactive component polish: branded micro-interactions without layout shift. */
.button { position: relative; isolation: isolate; overflow: hidden; transition: transform 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.button::before { content: ""; position: absolute; z-index: -1; inset: 0; background: currentColor; opacity: .08; transform: translateX(-105%) skewX(-18deg); transition: transform 320ms cubic-bezier(.2,.8,.2,1); }
.button:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 .45rem 0 rgba(0,0,0,.12); }
.button:hover::before { transform: translateX(0) skewX(0); }
.button:active { transform: translateY(0) scale(.98); box-shadow: none; }
.button:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

.price-card { overflow: hidden; transition: transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease, border-color 300ms ease; }
.price-card::after { content: ""; position: absolute; inset: auto -25% -45% 35%; height: 15rem; border-radius: 50%; background: var(--lime); opacity: 0; filter: blur(2.5rem); pointer-events: none; transition: opacity 300ms ease, transform 500ms cubic-bezier(.2,.8,.2,1); }
.price-card > * { position: relative; z-index: 1; }
.price-card:hover { transform: translateY(-.45rem); box-shadow: .45rem .45rem 0 var(--black); }
.price-card:hover::after, .price-card.is-selected::after { opacity: .18; transform: translate(-1rem,-1rem); }
.price-card h3, .price-card li { transition: transform 220ms ease; }
.price-card:hover h3, .price-card:hover li { transform: translateX(.3rem); }
.price-card:hover li:nth-child(2) { transition-delay: 35ms; }
.price-card:hover li:nth-child(3) { transition-delay: 70ms; }
.price-card:hover li:nth-child(4) { transition-delay: 105ms; }
.price-card li::before { content: "✓"; display: inline-grid; width: 1.15rem; height: 1.15rem; place-items: center; border-radius: 50%; background: var(--black); color: var(--lime); font-size: .75rem; font-weight: 900; }
.price-featured li::before { background: var(--lime); color: var(--purple); }
.price-featured .card-index { padding-top: 2.35rem; }
.popular { animation: popular-pulse 2.8s ease-in-out infinite; }
@keyframes popular-pulse { 50% { transform: translateY(-2px); box-shadow: 0 0 0 .35rem rgba(212,255,58,.16); } }

.faq-list details { overflow: hidden; transition: background 260ms ease, color 260ms ease; }
.faq-list summary { transition: padding 240ms ease; }
.faq-list summary:hover { padding-left: 1.35rem; }
.faq-list summary:focus-visible { outline: 3px solid var(--purple); outline-offset: -3px; }
.faq-list summary span { display: grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; transition: transform 260ms cubic-bezier(.2,.8,.2,1), background 200ms ease; }
.faq-list details[open] summary span { background: var(--black); color: var(--lime); }
.faq-list details p { animation: faq-answer-in 300ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes faq-answer-in { from { opacity: 0; transform: translateY(-.6rem); } }

@media (prefers-reduced-motion: reduce) {
  .popular { animation: none; }
  .button::before, .price-card::after, .price-card h3, .price-card li, .faq-list details p { animation: none; transition: none; }
}

/* ===== Minimal visual layer extracted for the public release ===== */
/* Snappi's shared minimal interface layer. Loaded last on every main-site page. */
:root {
  --sn-minimal-bg: #ffffff;
  --sn-minimal-soft: #f7f7f5;
  --sn-minimal-line: #e7e7e2;
  --sn-minimal-ink: #111111;
  --sn-minimal-muted: #666660;
  --sn-minimal-purple: #8116e0;
  --sn-minimal-purple-deep: #510e8c;
  --sn-minimal-lime: #d4ff3a;
  --sn-minimal-radius: 18px;
  --sn-minimal-ease: cubic-bezier(.22, 1, .36, 1);
}

html { background: var(--sn-minimal-bg); scroll-behavior: smooth; }
body { background: var(--sn-minimal-bg) !important; color: var(--sn-minimal-ink) !important; }
body, button, input, select, textarea { font-family: "Urbanist", "Helvetica Neue", Arial, sans-serif !important; }
body { font-size: 16px; font-weight: 450; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: "Urbanist", "Helvetica Neue", Arial, sans-serif !important; font-weight: 800 !important; letter-spacing: -.035em !important; text-wrap: balance; }
body:not(.admin-page) main h1 { font-size: clamp(2.5rem, 4.8vw, 4.5rem) !important; line-height: 1.02 !important; }
body:not(.admin-page) main h2 { font-size: clamp(2rem, 3.7vw, 3.5rem) !important; line-height: 1.08 !important; }
body:not(.admin-page) main h3 { font-size: clamp(1.2rem, 1.8vw, 1.75rem) !important; line-height: 1.22 !important; }
body:not(.admin-page) main :is(p,li,label,input,select,textarea) { font-size: 1rem; }
body::before, body::after, main::before, main::after { opacity: 0 !important; pointer-events: none !important; }

/* A single white canvas replaces the previous alternating page bands. */
main, main > section, .creator-main, .dashboard-main, .portal-main,
.auth-page, .application-page, .legal-page, .recovery-page {
  background: var(--sn-minimal-bg) !important;
  color: var(--sn-minimal-ink) !important;
}
.announcement { display: none !important; }
.section-pad { padding-block: clamp(4.5rem, 8vw, 7rem) !important; }
body:not(.admin-page) main > section + section { border-top: 1px solid var(--sn-minimal-line) !important; }

/* Compact, calm navigation shared by public and signed-in pages. */
.site-header, .creator-header, .dashboard-header, .portal-header, .legal-header,
.application-header, .auth-header {
  border-color: var(--sn-minimal-line) !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--sn-minimal-ink) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(145%);
}
html body .auth-header, html body .application-header, html body .legal-header,
html body .creator-header, html body .dashboard-header, html body .portal-header {
  background: rgba(255,255,255,.94) !important;
  background-image: none !important;
}
body:has(.auth-experience) .auth-header,
body:has(.application-main) .application-header {
  background: rgba(255,255,255,.94) !important;
  background-image: none !important;
}
.site-header { min-height: 4.75rem !important; }
.brand img, .creator-brand img, .dashboard-brand img { max-height: 3.2rem !important; object-fit: contain; }
.desktop-nav a, .site-header a, .creator-header a, .dashboard-header a,
.portal-header a { color: var(--sn-minimal-ink) !important; }
.desktop-nav a, .site-header .login-link, .creator-nav a,
.dashboard-navigation a { font-size: .95rem !important; font-weight: 600 !important; letter-spacing: -.01em !important; }
.desktop-nav { align-items: center !important; justify-content: center !important; gap: .25rem !important; }
.desktop-nav > a, .desktop-nav > .nav-dropdown { display: inline-flex; align-items: center; min-height: 2.75rem; }
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.75rem; padding: .55rem .9rem; border: 0; border-radius: 999px; background: transparent; color: var(--sn-minimal-ink); font-size: .95rem; font-weight: 600; letter-spacing: -.01em; line-height: 1; cursor: pointer; }
.nav-dropdown-toggle span { transition: transform 200ms ease; }
.nav-dropdown.is-open .nav-dropdown-toggle { background: rgba(129,22,224,.08); color: var(--sn-minimal-purple-deep); }
.nav-dropdown.is-open .nav-dropdown-toggle span { transform: rotate(180deg); }
.nav-mega-menu { position: absolute; z-index: 40; top: calc(100% + 1.1rem); left: 50%; width: min(42rem, 82vw); padding: 1.35rem; border: 1px solid rgba(129,22,224,.12); border-radius: 1.6rem; background: rgba(255,255,255,.92); box-shadow: 0 1.5rem 4rem rgba(45,18,65,.16); backdrop-filter: blur(22px) saturate(150%); transform: translateX(-50%); animation: snappi-menu-in 220ms var(--sn-minimal-ease) both; }
.nav-mega-menu > p { margin: 0 0 .8rem; color: var(--sn-minimal-muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; }
.nav-mega-menu > div { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.nav-mega-menu a { display: grid; gap: .12rem; padding: .8rem; border-radius: 1rem !important; text-decoration: none; }
.nav-mega-menu a:hover { background: var(--sn-minimal-soft); }
.nav-mega-menu b { font-size: .9rem; }
.nav-mega-menu small { color: var(--sn-minimal-muted); font-size: .74rem; line-height: 1.35; }
@keyframes snappi-menu-in { from { opacity: 0; transform: translate(-50%,-8px) scale(.98); } }
.mobile-nav details { display: grid; gap: .55rem; }
.mobile-nav summary { list-style: none; cursor: pointer; }
.mobile-nav details a { padding-left: 1rem; }
.desktop-nav a, .creator-nav a, .dashboard-navigation a {
  border-radius: 999px !important;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease !important;
}
.desktop-nav a:hover, .creator-nav a:hover, .dashboard-navigation a:hover,
.creator-nav a[aria-current="page"], .dashboard-navigation a[aria-current="page"] {
  background: var(--sn-minimal-soft) !important;
  color: var(--sn-minimal-purple-deep) !important;
  transform: translateY(-1px);
}

/* The homepage reads as one continuous workspace rather than stacked themes. */
.hero { min-height: min(52rem, calc(100svh - 4.75rem)) !important; background: #fff !important; }
.hero::before, .hero::after, .hero-spotlight { opacity: 0 !important; }
.hero h1, .hero h1 span, .section-heading h2, .section-heading-light h2,
.feed-section h2, .roster-section h2, .contact-section h2,
.creator-cta h2, .sample-section h2, .process-section h2 {
  color: var(--sn-minimal-ink) !important;
}
.kicker, .card-index, .sample-disclaimer { color: var(--sn-minimal-purple-deep) !important; }
.hero-intro, .section-heading p, .section-heading-light p,
.feed-card p, .outcome p, .sample-copy > p, .creator-cta p {
  color: var(--sn-minimal-muted) !important;
}
.hero-tags span, .filter-pills button, .quantity-switch {
  border-color: var(--sn-minimal-line) !important;
  background: var(--sn-minimal-soft) !important;
  color: var(--sn-minimal-ink) !important;
  box-shadow: none !important;
}
.filter-pills button.is-active, .quantity-switch button.is-active {
  background: var(--sn-minimal-ink) !important;
  color: #fff !important;
}

/* Cards use light surfaces, thin borders, and no heavy decorative shadows. */
.audience-card, .feed-card, .outcome, .campaign-demo, .price-card,
.creator-cta, .faq-list, .contact-options, .metric-card, .stat-card,
.workspace-priorities, .workspace-priority-card, .profile-card, .panel,
.dashboard-section, .portal-card, .application-form-panel, .auth-card,
.creator-card, .empty-state, .notification-card, .conversation-card {
  border: 1px solid var(--sn-minimal-line) !important;
  background: var(--sn-minimal-bg) !important;
  color: var(--sn-minimal-ink) !important;
  box-shadow: none !important;
}
.audience-card, .feed-card, .campaign-demo, .price-card, .creator-cta,
.contact-options, .metric-card, .stat-card, .workspace-priorities,
.workspace-priority-card, .profile-card, .panel, .dashboard-section,
.portal-card, .application-form-panel, .auth-card {
  border-radius: var(--sn-minimal-radius) !important;
}
.audience-card::before, .audience-card::after, .feed-card::before,
.feed-card::after, .price-card::after, .creator-cta::before,
.workspace-priorities::before { opacity: 0 !important; }
.audience-card h3, .audience-card li, .feed-card h3, .feed-card span,
.price-card h3, .price-card p, .price-card li, .creator-cta *,
.contact-options *, .faq-section *, .roster-section * {
  color: var(--sn-minimal-ink) !important;
}
.feed-card img, .audience-card img, .creator-cta-image img,
.campaign-preview img { filter: none !important; }
.feed-message { background: var(--sn-minimal-lime) !important; }
/* Keep labels on photographs legible while the section itself uses a light canvas. */
.feed-card:not(.feed-message) > div {
  background: linear-gradient(to top, rgba(0, 0, 0, .94), rgba(0, 0, 0, .66) 56%, transparent) !important;
}
.feed-card:not(.feed-message) > div :is(span, h3, p) {
  color: #fff !important;
}
.creator-content-link span { color: #510e8c !important; }
.phone-card figcaption b,
.creator-cta-image > span { color: #fefffc !important; }
.about-cta .kicker { color: #510e8c !important; }
.price-featured, .workspace-priority-card:first-child {
  background: linear-gradient(145deg, #fff 0 65%, rgba(212,255,58,.3)) !important;
  border-color: var(--sn-minimal-ink) !important;
}

/* High-contrast controls with restrained motion. */
.button, button, input, select, textarea, summary { font-family: inherit; }
.button, .popular, .profile-photo-button {
  border-radius: 999px !important;
  box-shadow: none !important;
}
.button-dark, .button-secondary, .contact-options > *, .faq-list summary {
  color: var(--sn-minimal-ink) !important;
}
.button-dark, .button-secondary {
  border: 1px solid var(--sn-minimal-ink) !important;
  background: var(--sn-minimal-ink) !important;
  color: #fff !important;
}
.button-lime, .button-primary, .profile-photo-button {
  border: 1px solid var(--sn-minimal-ink) !important;
  background: var(--sn-minimal-lime) !important;
  color: var(--sn-minimal-purple-deep) !important;
}
.button:hover, .contact-options > *:hover { transform: translateY(-2px) !important; }
.button:active, .contact-options > *:active { transform: translateY(0) scale(.98) !important; }
.button, .button-glass, .header-actions .button {
  border: 1px solid rgba(255,255,255,.48) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,.04)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 .45rem 1.2rem rgba(41,13,60,.1) !important;
  backdrop-filter: blur(14px) saturate(145%);
}
.button-lime, .button-primary { background-color: rgba(212,255,58,.88) !important; }
.button-dark, .button-secondary { background-color: rgba(11,11,11,.9) !important; }
.button-glass { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 3.1rem; padding: .75rem 1.2rem; border-color: rgba(17,17,17,.15) !important; border-radius: 999px; background-color: rgba(255,255,255,.68) !important; color: var(--sn-minimal-purple-deep); font-weight: 700; text-decoration: none; }
.button-glass:hover { border-color: rgba(129,22,224,.3) !important; transform: translateY(-2px); }

/* Expandable product-style capability cards inspired by a connected product suite. */
.capability-section { background: #fff !important; }
.capability-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(20rem,.85fr); gap: 1rem; margin-top: 2rem; }
.capability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.capability-card { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .2rem .8rem; align-items: center; min-height: 7.4rem; padding: 1rem; border: 1px solid var(--sn-minimal-line); border-radius: 1.25rem; background: rgba(247,247,245,.72); color: var(--sn-minimal-ink); text-align: left; cursor: pointer; transition: transform 200ms ease, border-color 200ms ease, background 200ms ease; }
.capability-card span { grid-row: 1 / 3; display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: .8rem; background: rgba(129,22,224,.08); color: var(--sn-minimal-purple-deep); font-size: .75rem; font-weight: 700; transition: background 200ms ease; }
.capability-card b { font-size: 1rem; line-height: 1.25; }
.capability-card small { color: var(--sn-minimal-muted); font-size: .78rem; line-height: 1.35; }
.capability-card i { grid-column: 3; grid-row: 1 / 3; font-style: normal; transition: transform 200ms ease; }
.capability-card:hover, .capability-card.is-active { border-color: rgba(129,22,224,.35); background: #fff; transform: translateY(-2px); }
.capability-card:hover span, .capability-card.is-active span { background: var(--sn-minimal-lime); }
.capability-card:hover i, .capability-card.is-active i { transform: translateX(4px); }
.capability-preview { display: grid; align-content: center; min-height: 100%; padding: clamp(1.5rem,3vw,2.4rem); border: 1px solid var(--sn-minimal-line); border-radius: 1.5rem; background: linear-gradient(145deg,#faf8ff,#fff 58%,rgba(212,255,58,.24)); }
.capability-preview > p:first-child { margin: 0; color: var(--sn-minimal-purple-deep); font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.capability-preview h3 { margin: .6rem 0; font-size: clamp(1.85rem,3.2vw,2.8rem) !important; }
.capability-preview ul { display: grid; gap: .45rem; padding: 0; list-style: none; }
.capability-preview li::before { content: "✓"; margin-right: .55rem; color: var(--sn-minimal-purple); font-weight: 800; }
.capability-preview .button { justify-self: start; margin-top: .75rem; }
.capability-preview.is-changing { animation: capability-change 320ms var(--sn-minimal-ease); }
@keyframes capability-change { from { opacity: .5; transform: translateY(6px); } }
.package-compare-link { display: flex; justify-content: center; margin-top: 1.5rem; }

/* Dedicated package comparison page. */
.packages-main { width: min(1240px, calc(100% - 2rem)); margin-inline: auto; }
.packages-hero { padding: clamp(6rem,10vw,9rem) 0 4rem; text-align: center; }
.packages-hero h1 { max-width: 17ch; margin: .4rem auto 1rem; font-size: clamp(2.75rem,5.5vw,4.75rem) !important; }
.packages-hero > p:last-child { max-width: 45rem; margin-inline: auto; color: var(--sn-minimal-muted); }
.packages-summary { padding: 2rem 0 5rem; }
.comparison-table-wrap { margin-bottom: 6rem; overflow-x: auto; border: 1px solid var(--sn-minimal-line); border-radius: 1.5rem; }
.package-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.package-table th, .package-table td { padding: 1rem 1.2rem; border-bottom: 1px solid var(--sn-minimal-line); text-align: center; }
.package-table th:first-child, .package-table td:first-child { position: sticky; left: 0; z-index: 1; text-align: left; }
.package-table thead th { position: sticky; top: 0; z-index: 2; }
.package-table thead th:first-child { z-index: 3; }
.package-table tbody tr:last-child td { border-bottom: 0; }
.package-table .growth-column { background: rgba(212,255,58,.22) !important; }

/* Forms and tables remain readable on the white canvas. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-color: var(--sn-minimal-line) !important;
  background: var(--sn-minimal-bg) !important;
  color: var(--sn-minimal-ink) !important;
  box-shadow: none !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--sn-minimal-purple) !important;
  outline: 3px solid rgba(129,22,224,.12) !important;
  outline-offset: 1px;
}
table, th, td { border-color: var(--sn-minimal-line) !important; }
th { background: var(--sn-minimal-soft) !important; color: var(--sn-minimal-muted) !important; }
td { background: #fff !important; color: var(--sn-minimal-ink) !important; }

/* Footer follows Vondera's compact rounded dark structure using Snappi content. */
.site-footer, .snappi-support-footer {
  border: 0 !important;
  border-radius: 40px 40px 0 0 !important;
  background: #0b0a10 !important;
  color: #fff !important;
  font-size: 1rem !important;
  line-height: 1.55;
}
.site-footer *, .snappi-support-footer * { color: #fff !important; }
.site-footer a, .snappi-support-footer a { font-size: .9rem !important; color: rgba(255,255,255,.76) !important; }
.site-footer a:hover, .snappi-support-footer a:hover { color: var(--sn-minimal-lime) !important; }
.site-footer :is(.footer-column > b, .footer-social > b) {
  color: #fff !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-social > div { display: flex; flex-wrap: wrap; gap: .55rem; }
.footer-social a {
  display: grid !important;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.footer-social a:hover { border-color: var(--sn-minimal-lime); background: rgba(212,255,58,.13); transform: translateY(-2px); }
.footer-social img { width: 1.15rem !important; height: 1.15rem !important; filter: brightness(0) invert(1) !important; object-fit: contain; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.62) !important; }
.activity-grid { grid-template-columns: minmax(0, 1fr) !important; }

/* Public homepage footer uses Snappi purple as a subtle brand wash over the dark base. */
html body .site-footer {
  border-top-color: rgba(255,255,255,.2) !important;
  background: linear-gradient(145deg, #0b0a10 0 62%, #210a35 100%) !important;
  color: #fff !important;
}
html body .site-footer * { color: #fff !important; }
html body .site-footer :is(.footer-column > b, .footer-social > b) { color: rgba(255,255,255,.72) !important; }
html body .site-footer a { text-decoration-color: rgba(255,255,255,.45); }
html body .site-footer a:hover { color: var(--sn-minimal-lime) !important; }
html body .site-footer small, html body .site-footer .footer-bottom { color: rgba(255,255,255,.78) !important; }
html body .site-footer .footer-social img { filter: brightness(0) invert(1) !important; }

/* Keep content visible until site.js opts it into scroll animation. */
.snappi-motion {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--sn-minimal-ease), transform 620ms var(--sn-minimal-ease);
}
.snappi-motion.is-pending-reveal { opacity: 0; transform: translateY(22px); }
.snappi-motion.is-in-view { opacity: 1; transform: translateY(0); }
.snappi-motion-item {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--sn-minimal-ease), transform 520ms var(--sn-minimal-ease);
  transition-delay: var(--sn-delay, 0ms);
}
.snappi-motion-item.is-pending-reveal { opacity: 0; transform: translateY(14px) scale(.99); }
.snappi-motion-item.is-in-view { opacity: 1; transform: none; }
body.snappi-page-enter { animation: snappi-page-enter 420ms var(--sn-minimal-ease) both; }
body.snappi-page-leave { opacity: 0; transform: translateY(5px); transition: opacity 180ms ease, transform 180ms ease; }
@keyframes snappi-page-enter { from { opacity: 0; transform: translateY(5px); } }

@media (max-width: 760px) {
  body:not(.admin-page) main h1 { font-size: clamp(2.25rem, 10vw, 3.2rem) !important; }
  body:not(.admin-page) main h2 { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; }
  .section-pad { padding-block: 4rem !important; }
  main > section + section { border-top-color: var(--sn-minimal-line) !important; }
  .site-header, .creator-header, .dashboard-header { backdrop-filter: blur(14px); }
  .site-footer, .snappi-support-footer { border-radius: 26px 26px 0 0 !important; }
  .capability-layout { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; }
  .nav-mega-menu { display: none; }
}

/* Keep the page canvas tied to the mobile viewport; let content use its inset. */
@media (max-width: 760px) {
  html, body { width: 100%; min-width: 0; max-width: 100%; }
  body:not(.admin-page) main, body:not(.admin-page) main > section,
  .site-header, .site-footer { width: 100%; max-width: 100%; min-width: 0; }
  .hero, .hero-copy, .hero-media, .section-heading { min-width: 0; }
  .hero { grid-template-columns: minmax(0,1fr); }
  .hero-media { width: 100%; max-width: 100%; }
  .feed-grid { width: 100%; }
  .campaign-demo { width: 100%; min-width: 0; grid-template-rows: auto auto auto; }
  .campaign-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .campaign-steps button { width: 100%; min-width: 0; min-height: 3.5rem; border-bottom: 1px solid var(--black); }
  .campaign-steps button:nth-child(3n) { border-right: 0; }
  .campaign-steps button:nth-last-child(-n+3) { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .snappi-motion, .snappi-motion-item, body.snappi-page-enter, body.snappi-page-leave {
    opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;
  }
}

/* Shared alignment and readable typography refinements. */
.site-header, .creator-header, .dashboard-header, .portal-header,
.application-header, .auth-header, .legal-header {
  align-items: center !important;
}
.site-header > *, .creator-header > *, .dashboard-header > *,
.portal-header > *, .application-header > *, .auth-header > *, .legal-header > * {
  align-self: center;
}
.desktop-nav > a {
  justify-content: center;
  padding: .55rem .9rem !important;
  line-height: 1;
  white-space: nowrap;
}
.header-actions { align-items: center !important; }

/* Campaign stage labels stay centered and stable as the active step changes. */
.campaign-steps button {
  display: grid !important;
  min-width: 0;
  place-items: center !important;
  padding: .8rem .45rem !important;
  text-align: center !important;
  line-height: 1.2 !important;
  white-space: normal;
}
.campaign-preview > div { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.campaign-preview h3, .campaign-preview p { width: 100%; margin-inline: 0; text-align: left; }

/* Emoji markers add quick visual orientation without repeating decorative icons. */
.snappi-emoji { display: inline-grid; width: 1.8em; height: 1.8em; margin-right: .45em; place-items: center; border: 1px solid var(--sn-minimal-line); border-radius: .6em; background: var(--sn-minimal-soft); font-size: .9em; vertical-align: middle; }

/* Readability scale: slightly larger body copy while preserving compact workspaces. */
body { font-size: 17px; }
main p, main li, main label, main input, main select, main textarea { font-size: 1.0625rem; }
.desktop-nav a, .site-header .login-link, .creator-nav a, .dashboard-navigation a,
.nav-dropdown-toggle { font-size: 1rem !important; }
.price-card h3 { font-size: clamp(3.1rem, 5vw, 4.75rem) !important; line-height: 1 !important; }
.price-card h3 small { font-size: .9rem !important; }
.price-card > p:not(.card-index), .price-card li { font-size: 1rem !important; }
.card-index { font-size: .82rem !important; }

/* The campaign copy fills its panel so every step stays vertically centered. */
.campaign-preview > div {
  align-self: stretch !important;
  height: 100%;
  justify-content: center !important;
  box-sizing: border-box;
}
.campaign-preview small, .campaign-preview h3, .campaign-preview p { flex: 0 0 auto; }
.campaign-preview h3 { min-height: 0 !important; font-size: clamp(1.75rem, 2.6vw, 2.55rem) !important; }
.campaign-preview p { min-height: 0 !important; font-size: clamp(1rem, 1.35vw, 1.2rem) !important; }

/* Campaign stages share one fixed content frame, preventing short steps from dropping. */
.campaign-preview { align-items: stretch !important; }
.campaign-preview-copy {
  display: grid !important;
  width: 100%;
  height: 100% !important;
  min-height: 0;
  align-self: stretch !important;
  place-items: center start;
  padding: clamp(1.5rem, 4vw, 3.5rem) !important;
  box-sizing: border-box;
}
.campaign-preview-copy-inner {
  display: grid;
  width: min(100%, 34rem);
  min-height: 13.5rem;
  align-content: center;
  grid-template-rows: auto auto 1fr;
}
.campaign-preview-copy-inner small { align-self: end; }
.campaign-preview-copy-inner h3 { align-self: start; margin: .6rem 0 1rem !important; }
.campaign-preview-copy-inner p { align-self: start; margin: 0 !important; }
@media (max-width: 760px) {
  .campaign-preview-copy { height: 16rem !important; padding: 1.35rem !important; place-items: start; overflow-y: auto; }
  .campaign-preview-copy-inner { min-height: 0; align-content: start; }
}

/* Readable small-label scale shared by the homepage and package page. */
:where(.kicker, .card-index, .section-label, .eyebrow, .sample-disclaimer,
.campaign-preview small, .campaign-demo-top, .popular, .capability-preview > p:first-child,
.nav-mega-menu > p, .feed-card span, .feed-card small, .process-list small) {
  font-size: clamp(.9rem, 1vw, 1rem) !important;
  line-height: 1.35 !important;
  letter-spacing: .055em !important;
}

/* KICKER SCALE: Change these values to resize every section kicker and its emoji together. */
.kicker {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem) !important;
  line-height: 1.35 !important;
  letter-spacing: .045em !important;
}

.nav-mega-menu small, .capability-card small {
  font-size: clamp(.85rem, .95vw, .95rem) !important;
  line-height: 1.45 !important;
}
.price-card h3 small { font-size: 1rem !important; }

/* ===== Static release controls ===== */
.disabled-action,
[data-disabled-action],
button:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  pointer-events: auto;
  filter: grayscale(.15);
}
.disabled-action:hover,
button:disabled:hover { transform: none !important; }

/* Legal page uses the same minimal surfaces as Packages. */
.legal-header { display: flex; min-height: 4.75rem; align-items: center; justify-content: space-between; padding: .75rem max(4vw, calc((100vw - 1440px) / 2)); border-bottom: 1px solid var(--sn-minimal-line); background: rgba(255,255,255,.92); backdrop-filter: blur(18px); }
.legal-header img { width: clamp(8.5rem,12vw,10.5rem); height: 3.2rem; object-fit: contain; }
.legal-header a { color: var(--sn-minimal-ink); font-weight: 700; text-decoration: none; }
.legal-main { width: min(62rem,calc(100% - 2rem)); margin: 0 auto; padding: clamp(5rem,9vw,8rem) 0; }
.legal-main > h1 { max-width: 11ch; }
.legal-lead { max-width: 48rem; margin: 1rem 0 2.5rem; color: var(--sn-minimal-muted); font-size: 1.1rem; }
.legal-notice { overflow: hidden; border: 1px solid var(--sn-minimal-line); border-radius: 1.5rem; }
.legal-notice section { padding: clamp(1.5rem,4vw,2.5rem); border-bottom: 1px solid var(--sn-minimal-line); background: #fff; }
.legal-notice section:last-child { border-bottom: 0; }
.legal-notice h2 { margin: 0 0 .75rem; font-size: clamp(1.35rem,2.5vw,2rem) !important; }
.legal-notice p { margin: 0; }
.legal-updated { margin-top: 1.25rem; color: var(--sn-minimal-muted); font-size: .9rem; }

/* ===== SECTION HEADING ORDER =====
   Every reusable section introduction follows one vertical reading order:
   kicker → main heading → supporting description.
   Add `.section-heading-center` or `.section-heading-right` to the same element
   when a future page needs centered or right-aligned introductory copy. */
.section-heading {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.section-heading .kicker {
  margin-bottom: 1rem !important;
}
.section-heading h2 {
  order: 2;
  margin: 0 !important;
}
.section-heading > p:not(.kicker) {
  order: 3;
  width: min(100%, 42rem);
  margin: 1.25rem 0 0 !important;
}
.section-heading-center,
.roster-section .section-heading {
  align-items: center;
  text-align: center;
}
.section-heading-center h2,
.section-heading-center > p:not(.kicker),
.roster-section .section-heading h2,
.roster-section .section-heading > p:not(.kicker) {
  margin-inline: auto !important;
}
.section-heading-right {
  align-items: flex-end;
  text-align: right;
}
.section-heading-right h2,
.section-heading-right > p:not(.kicker) {
  margin-left: auto !important;
}

/* ===== EXPLORE SNAPPI MENU SCALE =====
   These rules control the complete desktop Platform dropdown. Adjust the menu
   width, card padding, heading, emoji/title, description, and hover growth here. */
.nav-mega-menu {
  width: min(50rem, 88vw);
  padding: clamp(1.5rem, 2.5vw, 2rem);
}
.nav-mega-menu > p {
  margin-bottom: 1.15rem;
  font-size: clamp(1rem, 1.15vw, 1.15rem) !important;
  line-height: 1.3 !important;
  letter-spacing: .065em !important;
}
.nav-mega-menu > div {
  gap: .75rem;
}
.nav-mega-menu a {
  min-height: 7rem;
  align-content: center;
  gap: .35rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 1.2rem !important;
  transition: transform 220ms var(--sn-minimal-ease), background 220ms ease,
              border-color 220ms ease, box-shadow 220ms ease !important;
}
.nav-mega-menu b {
  font-size: clamp(1.1rem, 1.25vw, 1.3rem);
  line-height: 1.25;
}
.nav-mega-menu small {
  font-size: clamp(.95rem, 1vw, 1.05rem) !important;
  line-height: 1.45 !important;
}
.nav-mega-menu a:hover,
.nav-mega-menu a:focus-visible {
  z-index: 1;
  border-color: rgba(129,22,224,.25);
  background: rgba(212,255,58,.32) !important;
  box-shadow: 0 .8rem 1.8rem rgba(81,14,140,.12);
  transform: translateY(-3px) scale(1.035);
}

/* ===== SAMPLE CAMPAIGN VERTICAL ALIGNMENT =====
   Keep every dynamic stage, including Concepts, centered inside the fixed copy
   panel regardless of title length or paragraph wrapping. */
.campaign-preview-copy {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.campaign-preview-copy-inner {
  display: flex !important;
  width: min(100%, 34rem);
  height: auto !important;
  min-height: 0 !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: auto 0;
}
.campaign-preview-copy-inner small,
.campaign-preview-copy-inner h3,
.campaign-preview-copy-inner p {
  align-self: auto !important;
}
@media (max-width: 760px) {
  .campaign-preview-copy {
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-y: auto;
  }
  .campaign-preview-copy-inner {
    margin: auto 0;
  }
}

/* SAMPLE CAMPAIGN CENTERING FIX
   This explicit column layout overrides earlier inherited flex properties that
   could place shorter stages, such as Concepts, near the panel bottom. */
.campaign-preview > .campaign-preview-copy {
  display: flex !important;
  height: 100% !important;
  min-height: 0 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
.campaign-preview > .campaign-preview-copy > .campaign-preview-copy-inner {
  width: min(100%, 34rem) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}
@media (max-width: 760px) {
  .campaign-preview > .campaign-preview-copy {
    height: 16rem !important;
    justify-content: center !important;
  }
}

/* ===== PACKAGE CARD HOVER =====
   Every video plan card uses the same small hover lift. */
.pricing-grid .price-card {
  transform: translateY(0);
  box-shadow: 0 .25rem .75rem rgba(17,17,17,.035) !important;
  transition: transform 280ms var(--sn-minimal-ease),
              box-shadow 280ms ease,
              border-color 220ms ease !important;
}
.pricing-grid .price-card:hover {
  border-color: rgba(129,22,224,.32) !important;
  box-shadow: 0 1rem 2rem rgba(41,13,60,.12) !important;
  transform: translateY(-.55rem);
}
@media (prefers-reduced-motion: reduce) {
  .pricing-grid .price-card:hover {
    transform: none;
  }
}

/* ===== FAQ EXPAND/COLLAPSE ICON =====
   The HTML keeps a simple plus as fallback. CSS renders a crisp plus when
   closed and a high-contrast minus inside the purple circle when expanded. */
.faq-list summary span {
  overflow: hidden;
  background: #fefffc !important;
  color: #8116e0 !important;
  border-color: rgba(129,22,224,.45) !important;
  font-size: 0;
  transform: none !important;
}
.faq-list summary span::before {
  content: "+";
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}
.faq-list details[open] summary span {
  background: #8116e0 !important;
  color: #fefffc !important;
  border-color: #8116e0 !important;
  transform: none !important;
}
.faq-list details[open] summary span::before {
  content: "−";
}

/* ===== SNAPPI MODAL SYSTEM =====
   Shared visual shell for campaign, login, support, and future pop-ups.
   Change modal width, colors, backdrop blur, fields, and loader in this block. */
body.modal-open { overflow: hidden; }
.snappi-modal {
  width: min(38rem, calc(100% - 2rem));
  max-height: min(90svh, 52rem);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 1.6rem;
  background: transparent;
  color: #fefffc;
}
.snappi-modal::backdrop {
  background: rgba(11,11,11,.62);
  backdrop-filter: blur(12px) saturate(115%);
  animation: snappi-backdrop-in 220ms ease both;
}
.snappi-modal[open] { animation: snappi-modal-in 280ms var(--sn-minimal-ease) both; }
.snappi-modal-panel {
  position: relative;
  max-height: min(90svh, 52rem);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  overflow-y: auto;
  border: 1px solid rgba(254,255,252,.38);
  border-radius: 1.6rem;
  background: #8116e0;
  box-shadow: 0 2rem 5rem rgba(35,7,56,.34), inset 0 1px 0 rgba(255,255,255,.16);
}
.snappi-modal-compact { max-width: 31rem; margin-inline: auto; }
.snappi-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(254,255,252,.5);
  border-radius: 50%;
  background: #fefffc;
  color: #8116e0;
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}
.snappi-modal-close:hover { background: #d4ff3a; transform: rotate(6deg) scale(1.05); }
.snappi-modal-heading { padding-right: 3.2rem; }
.snappi-modal-title {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 .8rem;
  padding-left: 2rem;
  color: #d4ff3a !important;
  font-size: clamp(1.8rem, 4vw, 2.4rem) !important;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.snappi-modal-title::before,
.snappi-modal-title::after {
  position: absolute;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #d4ff3a;
  content: "";
}
.snappi-modal-title::after { animation: snappi-pulse 1.6s ease-out infinite; }
.snappi-modal-heading > p:last-child { max-width: 32rem; margin: 0 0 1.5rem; color: rgba(254,255,252,.78) !important; }
.snappi-modal-form { display: grid; gap: .85rem; }
.snappi-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.snappi-input {
  width: 100%;
  min-height: 3.75rem;
  padding: 1.4rem .9rem .45rem;
  border: 1px solid rgba(254,255,252,.38);
  border-radius: .9rem;
  outline: 0;
  background: rgba(254,255,252,.12);
  color: #fefffc;
  font: inherit;
  font-size: 1rem;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
textarea.snappi-input { min-height: 6.8rem; resize: vertical; }
select.snappi-input { appearance: auto; }
.snappi-input:focus { border-color: #d4ff3a; background: rgba(254,255,252,.17); box-shadow: 0 0 0 3px rgba(212,255,58,.16); }
.snappi-consent { display: flex; align-items: flex-start; gap: .75rem; color: rgba(254,255,252,.78); font-size: .82rem; }
.snappi-consent input { margin-top: .2rem; accent-color: #d4ff3a; }
.snappi-modal-submit {
  display: flex;
  width: 100%;
  min-height: 3.4rem;
  align-items: center;
  justify-content: center;
  margin-top: .3rem;
  padding: .8rem 1.2rem;
  border: 1px solid #d4ff3a;
  border-radius: 999px;
  background: #d4ff3a;
  color: #16051f;
  font: inherit;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.snappi-modal-submit:hover { background: #c9f32f; box-shadow: 0 .75rem 1.5rem rgba(24,5,36,.2); transform: translateY(-2px); }
.snappi-modal-submit:disabled { cursor: wait; opacity: .84; }
.snappi-form-status { min-height: 1.3em; margin: 0; color: #fefffc !important; font-size: .8rem !important; text-align: center; }
.snappi-form-status.is-success { color: #d4ff3a !important; font-weight: 800; }
.snappi-form-status.is-error { color: #ffd5d5 !important; font-weight: 800; }
.snappi-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* SNAPPI LOADER: Three lime dots bounce above soft purple-panel shadows. */
.typing-indicator { position: relative; z-index: 4; width: 60px; height: 30px; transform: scale(.72); }
.typing-indicator[hidden] { display: none; }
.typing-circle { position: absolute; left: 15%; width: 8px; height: 8px; border-radius: 50%; background: #8116e0; transform-origin: 50%; animation: snappi-typing-circle .5s alternate infinite ease; }
.typing-circle:nth-child(2) { left: 45%; animation-delay: .2s; }
.typing-circle:nth-child(3) { right: 15%; left: auto; animation-delay: .3s; }
.typing-shadow { position: absolute; z-index: 3; top: 30px; left: 15%; width: 5px; height: 4px; border-radius: 50%; background: rgba(129,22,224,.25); filter: blur(1px); transform-origin: 50%; animation: snappi-typing-shadow .5s alternate infinite ease; }
.typing-shadow:nth-child(5) { left: 45%; animation-delay: .2s; }
.typing-shadow:nth-child(6) { right: 15%; left: auto; animation-delay: .3s; }
@keyframes snappi-modal-in { from { opacity: 0; transform: translateY(1rem) scale(.975); } }
@keyframes snappi-backdrop-in { from { opacity: 0; } }
@keyframes snappi-pulse { from { opacity: .8; transform: scale(.9); } to { opacity: 0; transform: scale(1.75); } }
@keyframes snappi-typing-circle { 0% { top: 20px; height: 5px; border-radius: 50px 50px 25px 25px; transform: scaleX(1.7); } 40% { height: 8px; border-radius: 50%; transform: scaleX(1); } 100% { top: 0; } }
@keyframes snappi-typing-shadow { 0% { transform: scaleX(1.5); } 40% { opacity: .7; transform: scaleX(1); } 100% { opacity: .4; transform: scaleX(.2); } }
@media (max-width: 600px) {
  .snappi-modal { width: calc(100% - 1rem); }
  .snappi-modal-panel { padding: 1.35rem; border-radius: 1.25rem; }
  .snappi-form-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .snappi-modal[open], .snappi-modal::backdrop, .snappi-modal-title::after,
  .typing-circle, .typing-shadow { animation: none; }
}

/* ===== MODAL FIELD LABEL VISIBILITY =====
   Labels stay permanently above each field for clarity and accessibility.
   The grid order works with the existing input-then-label HTML structure. */
.snappi-modal-form label:not(.snappi-consent) {
  display: grid !important;
  grid-template-rows: auto auto;
  gap: .4rem;
}
.snappi-modal-form label:not(.snappi-consent) > .snappi-input {
  grid-row: 2;
}
.snappi-modal-form label:not(.snappi-consent) > span {
  position: static !important;
  z-index: 1;
  grid-row: 1;
  padding-left: .15rem;
  color: #fefffc !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  line-height: 1.25;
  letter-spacing: .01em;
  pointer-events: auto;
  transform: none !important;
}
.snappi-modal-form label:not(.snappi-consent):focus-within > span {
  color: #d4ff3a !important;
}
.snappi-input {
  padding: .9rem !important;
}

/* ===== GLASS TEXT FIELDS =====
   Applies only to text inputs and textareas. The package dropdown intentionally
   keeps its existing native appearance and behavior. */
.snappi-modal-form input.snappi-input,
.snappi-modal-form textarea.snappi-input {
  border-color: rgba(254,255,252,.42);
  background:
    linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.075) 62%, rgba(81,14,140,.12));
  color: #fefffc;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(81,14,140,.16),
    0 .4rem 1.2rem rgba(35,7,56,.08);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: transform 190ms ease,
              border-color 190ms ease,
              background 190ms ease,
              box-shadow 190ms ease;
}
.snappi-modal-form input.snappi-input:hover,
.snappi-modal-form textarea.snappi-input:hover {
  border-color: rgba(254,255,252,.64);
  background:
    linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.1) 62%, rgba(81,14,140,.1));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 .55rem 1.4rem rgba(35,7,56,.11);
  transform: translateY(-1px);
}
.snappi-modal-form input.snappi-input:focus,
.snappi-modal-form textarea.snappi-input:focus {
  border-color: #d4ff3a;
  background:
    linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.12) 62%, rgba(212,255,58,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 0 0 3px rgba(212,255,58,.18),
    0 .75rem 1.6rem rgba(35,7,56,.14);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .snappi-modal-form input.snappi-input:hover,
  .snappi-modal-form textarea.snappi-input:hover,
  .snappi-modal-form input.snappi-input:focus,
  .snappi-modal-form textarea.snappi-input:focus {
    transform: none;
  }
}

/* ===== CREATOR APPLICATION PAGE =====
   Dedicated public acquisition page. Reuses the shared Snappi type, spacing,
   cards, modal system, motion, footer, and responsive behavior. */
.creator-application-hero {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(26rem,.95fr);
  gap: clamp(2rem,6vw,6rem);
  align-items: center;
  min-height: min(50rem,calc(100svh - 7.8rem));
  background: #fefffc;
}
.creator-application-copy { max-width: 47rem; }
.creator-application-copy h1 { margin: 0 0 1.5rem; font-size: clamp(3.4rem,6.4vw,6.8rem); }
.creator-application-copy h1 span { color: #8116e0; }
.creator-application-copy > p:not(.kicker) { max-width: 40rem; color: var(--sn-minimal-muted); font-size: clamp(1.05rem,1.6vw,1.3rem); }
.creator-application-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 2rem; }
.creator-readiness { display: flex; flex-wrap: wrap; gap: .55rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.creator-readiness li { padding: .55rem .8rem; border: 1px solid var(--sn-minimal-line); border-radius: 999px; background: rgba(247,247,245,.8); font-size: .78rem !important; font-weight: 700; }
.creator-application-visual { position: relative; min-height: 38rem; margin: 0; overflow: hidden; border: 1px solid var(--sn-minimal-line); border-radius: 2rem; background: rgba(129,22,224,.08); }
.creator-application-visual img { width: 100%; height: 100%; min-height: 38rem; object-fit: cover; object-position: center 40%; transition: transform 700ms var(--sn-minimal-ease); }
.creator-application-visual:hover img { transform: scale(1.025); }
.creator-application-visual figcaption { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid rgba(255,255,255,.45); border-radius: 1rem; background: rgba(255,255,255,.72); color: #0b0b0b; backdrop-filter: blur(15px); }
.creator-application-visual figcaption span { color: #510e8c; font-size: .85rem; font-weight: 800; }

.creator-benefits { background: #f8f9fa; }
.creator-benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; }
.creator-benefit-card { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; min-height: 20rem; padding: clamp(1.4rem,3vw,2.2rem); border: 1px solid var(--sn-minimal-line); border-radius: 1.5rem; background: #fefffc; transition: transform 240ms var(--sn-minimal-ease), border-color 220ms ease, box-shadow 240ms ease; }
.creator-benefit-card > span { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 1rem; background: rgba(129,22,224,.08); color: #8116e0; font-weight: 900; }
.creator-benefit-card > div { display: flex; flex-direction: column; justify-content: flex-end; }
.creator-benefit-card h3 { margin-bottom: .8rem; font-size: clamp(1.75rem,2.6vw,2.5rem); }
.creator-benefit-card p { margin: 0; color: var(--sn-minimal-muted); }
.creator-benefit-card:hover { border-color: rgba(129,22,224,.3); box-shadow: 0 1rem 2rem rgba(41,13,60,.1); transform: translateY(-.45rem); }

.creator-application-process { background: #fefffc; }
.creator-process-grid { display: grid; grid-template-columns: repeat(4,1fr); margin: 3rem 0 0; padding: 0; border: 1px solid var(--sn-minimal-line); border-radius: 1.5rem; overflow: hidden; list-style: none; }
.creator-process-grid li { min-height: 22rem; padding: 1.5rem; border-right: 1px solid var(--sn-minimal-line); background: #fff; transition: background 220ms ease, color 220ms ease, transform 220ms ease; }
.creator-process-grid li:last-child { border-right: 0; }
.creator-process-grid li > span { color: #8116e0; font-weight: 900; }
.creator-process-grid h3 { margin: 7rem 0 .8rem; font-size: clamp(1.5rem,2.2vw,2.2rem); }
.creator-process-grid p { margin: 0; color: var(--sn-minimal-muted); }
.creator-process-grid li:hover { position: relative; z-index: 1; background: #8116e0; color: #fefffc; transform: translateY(-.25rem); }
.creator-process-grid li:hover > span { color: #d4ff3a; }
.creator-process-grid li:hover p { color: rgba(254,255,252,.78); }

.creator-eligibility { background: #f8f9fa; }
.creator-eligibility-panel { display: grid; grid-template-columns: minmax(18rem,.8fr) minmax(0,1.2fr); gap: clamp(2rem,6vw,6rem); padding: clamp(2rem,5vw,4rem); border: 1px solid rgba(129,22,224,.22); border-radius: 1.6rem; background: linear-gradient(135deg,#fff 0 62%,rgba(212,255,58,.25)); }
.creator-eligibility-panel h2 { max-width: 10ch; font-size: clamp(2.5rem,5vw,5rem); }
.creator-eligibility-panel ul { display: grid; align-content: center; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.creator-eligibility-panel li { position: relative; padding: 0 0 1rem 2rem; border-bottom: 1px solid var(--sn-minimal-line); }
.creator-eligibility-panel li::before { position: absolute; left: 0; color: #8116e0; font-weight: 900; content: "✓"; }

.creator-application-cta { text-align: center; background: #fefffc !important; color: #000 !important; }
.creator-application-cta .kicker { color: #8116e0 !important; }
.creator-application-cta h2 { max-width: 16ch; margin: 0 auto 2rem; color: #000 !important; }
.creator-application-cta .button-lime { min-width: 12.5rem; border-color: rgba(129,22,224,.2); background: #d4ff3a; color: #000; }
.creator-modal-secondary { display: block; width: 100%; margin-top: .75rem; padding: .75rem; border: 0; background: transparent; color: #fefffc; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .25rem; cursor: pointer; }
.creator-modal-secondary:hover { color: #d4ff3a; }

@media (max-width: 1000px) {
  .creator-application-hero { grid-template-columns: 1fr; }
  .creator-application-visual { min-height: 32rem; }
  .creator-benefit-grid { grid-template-columns: 1fr; }
  .creator-benefit-card { min-height: 15rem; }
  .creator-process-grid { grid-template-columns: 1fr 1fr; }
  .creator-process-grid li:nth-child(2) { border-right: 0; }
  .creator-process-grid li { border-bottom: 1px solid var(--sn-minimal-line); }
  .creator-process-grid li:nth-last-child(-n+2) { border-bottom: 0; }
  .creator-eligibility-panel { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .creator-application-hero { min-height: auto; }
  .creator-application-visual, .creator-application-visual img { min-height: 27rem; }
  .creator-application-visual figcaption { flex-direction: column; gap: .2rem; }
  .creator-process-grid { grid-template-columns: 1fr; }
  .creator-process-grid li { min-height: 17rem; border-right: 0; border-bottom: 1px solid var(--sn-minimal-line) !important; }
  .creator-process-grid li:last-child { border-bottom: 0 !important; }
  .creator-process-grid h3 { margin-top: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .creator-application-visual:hover img, .creator-benefit-card:hover, .creator-process-grid li:hover { transform: none; }
}

/* ===== CREATOR APPLICATION NAVIGATION =====
   This page uses focused in-page navigation and one clear route back home. */
.focused-page-header { grid-template-columns: minmax(16rem,1fr) auto minmax(12rem,1fr); }
.focused-header-left { display: flex; min-width: 0; align-items: center; gap: 1rem; }
.focused-header-left .brand { flex: 0 0 auto; }
.focused-back-link { padding: .55rem .8rem; border-radius: 999px; color: var(--sn-minimal-muted) !important; font-size: .88rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background 180ms ease, color 180ms ease, transform 180ms ease; }
.focused-back-link:hover { background: var(--sn-minimal-soft); color: #510e8c !important; transform: translateX(-2px); }
.page-section-nav { gap: .15rem !important; }
.page-section-nav a { position: relative; padding: .75rem .75rem !important; font-size: .88rem !important; white-space: nowrap; }
.page-section-nav a::after { position: absolute; right: 50%; bottom: .28rem; left: 50%; height: 3px; border-radius: 99px; background: #d4ff3a; content: ""; transition: right 190ms ease, left 190ms ease; }
.page-section-nav a:hover::after,
.page-section-nav a.is-active::after { right: .75rem; left: .75rem; }
.page-section-nav a.is-active { background: rgba(129,22,224,.08) !important; color: #510e8c !important; }
@media (max-width: 1280px) {
  .focused-page-header { grid-template-columns: 1fr auto; }
  .focused-page-header .desktop-nav { display: none; }
  .focused-page-header .menu-toggle { display: block; }
}
@media (max-width: 760px) {
  .focused-header-left .brand img { width: 8.2rem; }
  .focused-back-link { display: none; }
}

/* ===== CONTACT AND SUPPORT MODAL =====
   Reason cards choose the email route. The form keeps the approved modal,
   native dropdown, visible labels, glass text fields, and Snappi loader. */
.snappi-support-modal { width: min(46rem,calc(100% - 2rem)); }
.support-route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.support-route-grid button { display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; min-height: 7rem; align-content: center; padding: 1rem; border: 1px solid rgba(254,255,252,.3); border-radius: 1rem; background: rgba(254,255,252,.09); color: #fefffc; text-align: left; cursor: pointer; backdrop-filter: blur(12px); transition: transform 200ms var(--sn-minimal-ease), border-color 180ms ease, background 180ms ease, box-shadow 200ms ease; }
.support-route-grid button > span { grid-row: 1 / 3; font-size: 1.4rem; }
.support-route-grid button b { align-self: end; font-size: 1rem; }
.support-route-grid button small { color: rgba(254,255,252,.65); font-size: .75rem; line-height: 1.35; }
.support-route-grid button:hover { border-color: rgba(212,255,58,.65); background: rgba(254,255,252,.14); transform: translateY(-2px); }
.support-route-grid button.is-active { border-color: #d4ff3a; background: rgba(212,255,58,.16); box-shadow: inset 0 0 0 1px rgba(212,255,58,.3); }
.support-route-grid button.is-active b { color: #d4ff3a; }
.support-form-fields { display: grid; gap: .85rem; padding-top: .35rem; }
.support-diagnostics-note { margin: 0; padding: .8rem 1rem; border: 1px solid rgba(212,255,58,.4); border-radius: .8rem; background: rgba(212,255,58,.1); color: rgba(254,255,252,.82) !important; font-size: .76rem !important; }
@media (max-width: 600px) {
  .support-route-grid { grid-template-columns: 1fr; }
  .support-route-grid button { min-height: 6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .support-route-grid button:hover { transform: none; }
}

/* ===== ABOUT SNAPPI PAGE =====
   All copy is intentionally generic. Edit about.html text freely while keeping
   these shared layouts, colors, cards, and responsive rules. */
.about-hero { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(26rem,.95fr); gap: clamp(2rem,6vw,6rem); align-items: center; min-height: min(50rem,calc(100svh - 7.8rem)); background: #fefffc; }
.about-hero-copy { max-width: 50rem; }
.about-hero-copy h1 { margin: 0 0 1.5rem; font-size: clamp(3.4rem,6.1vw,6.6rem); }
.about-hero-copy h1 span { color: #8116e0; }
.about-hero-copy > p:not(.kicker) { max-width: 41rem; color: var(--sn-minimal-muted); font-size: clamp(1.05rem,1.6vw,1.3rem); }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.about-hero-visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; min-height: 39rem; }
.about-hero-visual figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--sn-minimal-line); border-radius: 2rem; }
.about-hero-visual figure:first-child { transform: translateY(2.5rem); }
.about-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform 600ms var(--sn-minimal-ease); }
.about-hero-visual figure:hover img { transform: scale(1.035); }
.about-hero-visual > span { position: absolute; right: 1.4rem; bottom: 1.4rem; padding: .9rem 1.1rem; border: 1px solid rgba(254,255,252,.5); border-radius: 1rem; background: rgba(129,22,224,.86); color: #fefffc; font-weight: 900; line-height: 1.1; backdrop-filter: blur(14px); }

.about-purpose { background: #f8f9fa; }
.about-purpose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.about-purpose-card { min-height: 29rem; padding: clamp(1.5rem,4vw,3rem); border: 1px solid var(--sn-minimal-line); border-radius: 1.6rem; background: #fefffc; transition: transform 240ms var(--sn-minimal-ease), box-shadow 240ms ease; }
.about-purpose-card > span { display: inline-flex; padding: .45rem .75rem; border-radius: 999px; background: rgba(129,22,224,.08); color: #8116e0; font-size: .8rem; font-weight: 900; text-transform: uppercase; }
.about-purpose-card h3 { max-width: 13ch; margin: 8rem 0 1rem; font-size: clamp(2rem,4vw,4rem); }
.about-purpose-card p { max-width: 35rem; margin: 0; color: var(--sn-minimal-muted); }
.about-purpose-card-accent { background: linear-gradient(145deg,#fff 0 58%,rgba(212,255,58,.28)); }
.about-purpose-card:hover { box-shadow: 0 1rem 2rem rgba(41,13,60,.1); transform: translateY(-.45rem); }

.about-services { background: #fefffc; }
.about-service-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 3rem; border: 1px solid var(--sn-minimal-line); border-radius: 1.6rem; overflow: hidden; }
.about-service-grid article { min-height: 24rem; padding: 1.75rem; border-right: 1px solid var(--sn-minimal-line); background: #fff; transition: background 220ms ease, color 220ms ease; }
.about-service-grid article:last-child { border-right: 0; }
.about-service-grid span { color: #8116e0; font-weight: 900; }
.about-service-grid h3 { margin: 8rem 0 .9rem; font-size: clamp(1.75rem,2.7vw,2.8rem); }
.about-service-grid p { margin: 0; color: var(--sn-minimal-muted); }
.about-service-grid article:hover { background: #8116e0; color: #fefffc; }
.about-service-grid article:hover span { color: #d4ff3a; }
.about-service-grid article:hover p { color: rgba(254,255,252,.76); }

.about-audiences { background: #f8f9fa; }
.about-audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.about-audience-card { display: flex; min-height: 38rem; flex-direction: column; padding: clamp(1.5rem,4vw,3rem); border: 1px solid var(--sn-minimal-line); border-radius: 1.6rem; background: #fefffc; }
.about-audience-card h3 { max-width: 12ch; font-size: clamp(2.2rem,4.2vw,4.4rem); }
.about-audience-card ul { display: grid; gap: .75rem; margin: auto 0 2rem; padding: 0; list-style: none; }
.about-audience-card li { padding-bottom: .75rem; border-bottom: 1px solid var(--sn-minimal-line); }
.about-audience-card li::before { margin-right: .6rem; color: #8116e0; content: "✓"; font-weight: 900; }
.about-audience-card .button { align-self: flex-start; }
.about-audience-creator { background: linear-gradient(145deg,#fff 0 62%,rgba(212,255,58,.28)); }

.about-principles { background: #fefffc; }
.about-principle-list { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; margin-top: 3rem; }
.about-principle-list article { min-height: 14rem; padding: 1.4rem; border: 1px solid var(--sn-minimal-line); border-radius: 1.3rem; background: #fff; transition: transform 220ms var(--sn-minimal-ease), border-color 180ms ease; }
.about-principle-list b { color: #8116e0; font-size: 1.35rem; }
.about-principle-list p { margin: 4rem 0 0; color: var(--sn-minimal-muted); }
.about-principle-list article:hover { border-color: rgba(129,22,224,.35); transform: translateY(-.35rem); }

.about-cta { text-align: center; background: #8116e0; color: #fefffc; }
.about-cta .kicker { color: #d4ff3a !important; }
.about-cta h2 { max-width: 13ch; margin: 0 auto 2rem; color: #fefffc !important; }
.about-cta > div { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

@media (max-width: 1000px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-hero-visual { min-height: 32rem; }
  .about-purpose-grid, .about-audience-grid { grid-template-columns: 1fr; }
  .about-service-grid { grid-template-columns: 1fr; }
  .about-service-grid article { min-height: 18rem; border-right: 0; border-bottom: 1px solid var(--sn-minimal-line); }
  .about-service-grid article:last-child { border-bottom: 0; }
  .about-service-grid h3 { margin-top: 4rem; }
  .about-principle-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .about-hero { min-height: auto; }
  .about-hero-visual { min-height: 28rem; }
  .about-hero-visual figure:first-child { transform: translateY(1.5rem); }
  .about-purpose-card { min-height: 23rem; }
  .about-purpose-card h3 { margin-top: 5rem; }
  .about-audience-card { min-height: 31rem; }
  .about-principle-list { grid-template-columns: 1fr; }
  .about-principle-list article { min-height: 11rem; }
  .about-principle-list p { margin-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .about-hero-visual figure:hover img, .about-purpose-card:hover, .about-principle-list article:hover { transform: none; }
}

/* ABOUT PAGE CLOSING CTA: Purple heading with one consistent action style. */
.about-cta h2 { color: #8116e0 !important; }
.about-cta .button-lime { min-width: 12.5rem; }

/* ===== FOR BRANDS PAGE =====
   Managed-service brand journey. Edit page copy in brands.html and layout here. */
.brand-page-hero { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(26rem,.98fr); gap: clamp(2rem,6vw,6rem); align-items: center; min-height: min(50rem,calc(100svh - 7.8rem)); background: #fefffc; }
.brand-page-hero-copy { max-width: 50rem; }
.brand-page-hero-copy h1 { margin: 0 0 1.5rem; font-size: clamp(3.4rem,6.1vw,6.75rem); }
.brand-page-hero-copy h1 span { color: #8116e0; }
.brand-page-hero-copy > p:not(.kicker) { max-width: 41rem; color: var(--sn-minimal-muted); font-size: clamp(1.05rem,1.6vw,1.3rem); }
.brand-page-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.brand-page-signals { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.brand-page-signals li { padding: .55rem .8rem; border: 1px solid var(--sn-minimal-line); border-radius: 999px; background: #f8f9fa; font-size: .8rem !important; font-weight: 800; }
.brand-page-hero-visual { position: relative; min-height: 39rem; margin: 0; overflow: hidden; border: 1px solid var(--sn-minimal-line); border-radius: 2rem; background: rgba(129,22,224,.08); }
.brand-page-hero-visual img { width: 100%; height: 100%; min-height: 39rem; object-fit: cover; object-position: center 38%; transition: transform 650ms var(--sn-minimal-ease); }
.brand-page-hero-visual:hover img { transform: scale(1.03); }
.brand-page-hero-visual figcaption { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; display: grid; gap: .2rem; padding: 1rem 1.2rem; border: 1px solid rgba(255,255,255,.48); border-radius: 1rem; background: rgba(254,255,252,.78); color: #0b0b0b; backdrop-filter: blur(15px); }
.brand-page-hero-visual figcaption b { color: #8116e0; font-size: 1rem; }
.brand-page-hero-visual figcaption span { font-size: .8rem; font-weight: 700; }

.brand-handles { background: #f8f9fa; }
.brand-handle-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 3rem; overflow: hidden; border: 1px solid var(--sn-minimal-line); border-radius: 1.6rem; }
.brand-handle-grid article { min-height: 25rem; padding: 1.5rem; border-right: 1px solid var(--sn-minimal-line); background: #fefffc; transition: background 220ms ease,color 220ms ease,transform 220ms var(--sn-minimal-ease); }
.brand-handle-grid article:last-child { border-right: 0; }
.brand-handle-grid span { color: #8116e0; font-weight: 900; }
.brand-handle-grid h3 { margin: 8rem 0 .9rem; font-size: clamp(1.55rem,2.3vw,2.5rem); }
.brand-handle-grid p { margin: 0; color: var(--sn-minimal-muted); }
.brand-handle-grid article:hover { position: relative; z-index: 1; background: #8116e0; color: #fefffc; transform: translateY(-.25rem); }
.brand-handle-grid article:hover span { color: #d4ff3a; }
.brand-handle-grid article:hover p { color: rgba(254,255,252,.78); }

.brand-journey { background: #fefffc; }
.brand-journey-grid { display: grid; grid-template-columns: repeat(4,1fr); margin: 3rem 0 0; padding: 0; list-style: none; }
.brand-journey-grid li { display: grid; min-height: 27rem; padding: 1.5rem; border: 1px solid var(--sn-minimal-line); border-right: 0; background: #fff; transition: transform 230ms var(--sn-minimal-ease),background 220ms ease,color 220ms ease; }
.brand-journey-grid li:first-child { border-radius: 1.5rem 0 0 1.5rem; }
.brand-journey-grid li:last-child { border-right: 1px solid var(--sn-minimal-line); border-radius: 0 1.5rem 1.5rem 0; }
.brand-journey-grid li > span { color: #8116e0; font-weight: 900; }
.brand-journey-grid li > div { align-self: end; }
.brand-journey-grid small { color: #8116e0; font-weight: 900; letter-spacing: .08em; }
.brand-journey-grid h3 { margin: .75rem 0 .8rem; font-size: clamp(1.6rem,2.5vw,2.6rem); }
.brand-journey-grid p { margin: 0; color: var(--sn-minimal-muted); }
.brand-journey-grid li:hover { position: relative; z-index: 1; background: #d4ff3a; transform: translateY(-.45rem); }
.brand-journey-grid li:hover p { color: #2b2b2b; }

.brand-deliverables { display: grid; grid-template-columns: minmax(18rem,.78fr) minmax(0,1.22fr); gap: clamp(2rem,7vw,7rem); background: #fefffc !important; color: #000 !important; }
.brand-deliverables-intro { align-self: start; position: sticky; top: 8rem; }
.brand-deliverables-intro .kicker { color: #8116e0 !important; }
.brand-deliverables-intro h2 { color: #000 !important; }
.brand-deliverables-intro > p { color: #5f5f5f !important; }
.brand-deliverables-intro .text-link { color: #8116e0 !important; }
.brand-deliverable-list { display: grid; }
.brand-deliverable-list article { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid #d9d9d9; }
.brand-deliverable-list article > span { color: #8116e0; font-weight: 900; }
.brand-deliverable-list h3 { margin: 0 0 .4rem; color: #000; font-size: clamp(1.5rem,2.4vw,2.4rem); }
.brand-deliverable-list p { margin: 0; color: #5f5f5f !important; }

.brand-rights { background: #f8f9fa; }
.brand-right-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; margin-top: 3rem; }
.brand-right-grid article { min-height: 20rem; padding: 1.5rem; border: 1px solid var(--sn-minimal-line); border-radius: 1.4rem; background: #fefffc; transition: transform 220ms var(--sn-minimal-ease),box-shadow 220ms ease,border-color 180ms ease; }
.brand-right-grid article > span { font-size: 1.8rem; }
.brand-right-grid h3 { margin: 6rem 0 .75rem; font-size: clamp(1.5rem,2.2vw,2.3rem); }
.brand-right-grid p { margin: 0; color: var(--sn-minimal-muted); }
.brand-right-grid article:hover { border-color: rgba(129,22,224,.35); box-shadow: 0 1rem 2rem rgba(41,13,60,.1); transform: translateY(-.4rem); }

.brand-packages { background: #fefffc; }
.brand-package-strip { display: grid; grid-template-columns: repeat(3,1fr) auto; align-items: center; gap: .6rem; margin-top: 3rem; padding: .75rem; border: 1px solid var(--sn-minimal-line); border-radius: 999px; background: #f8f9fa; }
.brand-package-strip > span { padding: .85rem 1rem; border-right: 1px solid var(--sn-minimal-line); font-weight: 800; text-align: center; }

.brand-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,6vw,6rem); background: #f8f9fa; }
.brand-faq .faq-intro { align-self: start; position: sticky; top: 8rem; }
.brand-final-cta { text-align: center; background: #fefffc !important; color: #000 !important; }
.brand-final-cta .kicker { color: #8116e0 !important; }
.brand-final-cta h2 { max-width: 15ch; margin: 0 auto 2rem; color: #000 !important; }
.brand-final-cta > div { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.brand-final-cta .button-lime { min-width: 12.5rem; border-color: rgba(129,22,224,.2); background: #d4ff3a; color: #000; }

@media (max-width: 1100px) {
  .brand-page-hero { grid-template-columns: 1fr; }
  .brand-page-hero-visual { min-height: 32rem; }
  .brand-handle-grid,.brand-journey-grid,.brand-right-grid { grid-template-columns: 1fr 1fr; }
  .brand-handle-grid article { border-right: 1px solid var(--sn-minimal-line); border-bottom: 1px solid var(--sn-minimal-line); }
  .brand-handle-grid article:nth-child(2n) { border-right: 0; }
  .brand-handle-grid article:nth-last-child(-n+2) { border-bottom: 0; }
  .brand-journey-grid li,.brand-journey-grid li:first-child,.brand-journey-grid li:last-child { border: 1px solid var(--sn-minimal-line); border-radius: 0; }
  .brand-journey-grid li:first-child { border-radius: 1.5rem 0 0 0; }
  .brand-journey-grid li:nth-child(2) { border-radius: 0 1.5rem 0 0; }
  .brand-journey-grid li:nth-child(3) { border-radius: 0 0 0 1.5rem; }
  .brand-journey-grid li:last-child { border-radius: 0 0 1.5rem 0; }
  .brand-deliverables,.brand-faq { grid-template-columns: 1fr; }
  .brand-deliverables-intro,.brand-faq .faq-intro { position: static; }
  .brand-package-strip { grid-template-columns: 1fr; border-radius: 1.5rem; }
  .brand-package-strip > span { border-right: 0; border-bottom: 1px solid var(--sn-minimal-line); }
}

/* MOBILE DRAWER: Direct navigation, clear hierarchy, and fixed actions for small screens. */
@media (max-width: 1100px) {
  .site-header .mobile-nav {
    display: grid;
    grid-template-rows: auto auto auto auto;
    align-content: start;
    gap: 1.35rem;
    padding: 1.35rem clamp(1.15rem,5vw,2rem) 1.5rem;
    overflow-y: auto;
    background: #fefffc !important;
    color: #000 !important;
    border-top: 1px solid rgba(17,17,17,.12);
    animation: mobile-drawer-in 260ms cubic-bezier(.22,1,.36,1) both;
  }
  .site-header .mobile-nav[hidden] { display: none !important; }
  .mobile-nav-primary { display: grid; }
  .site-header .mobile-nav .mobile-nav-primary a {
    position: relative;
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    align-items: center;
    min-height: 3.75rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid rgba(17,17,17,.1);
    border-radius: .8rem;
    color: #000 !important;
    font-size: clamp(1.55rem,7vw,2.25rem) !important;
    font-weight: 850;
    letter-spacing: -.045em;
    line-height: 1;
  }
  .mobile-nav-primary a span { color: #8116e0; font-size: .75rem; font-weight: 900; letter-spacing: .08em; }
  .mobile-nav-primary a:hover,.mobile-nav-primary a.is-active { background: rgba(212,255,58,.7); color: #510e8c !important; transform: translateX(.15rem); }
  .mobile-nav-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
  .site-header .mobile-nav .mobile-nav-secondary a { min-height: 2.75rem; padding: .75rem .8rem; border: 1px solid rgba(17,17,17,.12); border-radius: 999px; color: #333 !important; font-size: .85rem !important; font-weight: 750; letter-spacing: 0; line-height: 1; text-align: center; }
  .mobile-nav-secondary a:hover { border-color: #8116e0; color: #8116e0 !important; }
  .mobile-nav-actions { display: grid; gap: .55rem; }
  .site-header .mobile-nav .mobile-nav-actions :is(button,a) { display: flex; min-height: 3.25rem; align-items: center; justify-content: center; padding: .8rem 1rem; border: 1px solid #8116e0; border-radius: 999px; font: 850 .88rem/1 var(--font-body); letter-spacing: .02em; text-transform: uppercase; cursor: pointer; }
  .site-header .mobile-nav .mobile-nav-actions button { background: #8116e0; color: #fefffc; }
  .site-header .mobile-nav .mobile-nav-actions a { background: rgba(129,22,224,.06); color: #8116e0 !important; }
  .mobile-nav-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; margin-top: auto; padding: .85rem 1rem; border-radius: 1rem; background: #8116e0; }
  .site-header .mobile-nav .mobile-nav-footer > a { color: #fefffc !important; font-size: .75rem !important; font-weight: 750; letter-spacing: 0; }
  .mobile-nav-footer > div { display: flex; gap: .35rem; }
  .site-header .mobile-nav .mobile-nav-footer div a { display: grid; width: 2rem; height: 2rem; padding: 0; place-items: center; border: 1px solid rgba(254,255,252,.38); border-radius: 50%; color: #d4ff3a !important; font-size: .75rem !important; font-weight: 900; letter-spacing: 0; }
  .mobile-nav-primary a,.mobile-nav-secondary a,.mobile-nav-actions,.mobile-nav-footer { animation: mobile-link-in 320ms cubic-bezier(.22,1,.36,1) both; }
  .mobile-nav-primary a:nth-child(2) { animation-delay: 30ms; }.mobile-nav-primary a:nth-child(3) { animation-delay: 60ms; }.mobile-nav-primary a:nth-child(4) { animation-delay: 90ms; }.mobile-nav-primary a:nth-child(5) { animation-delay: 120ms; }
}
@keyframes mobile-drawer-in { from { opacity: 0; transform: translateY(-1rem); } }
@keyframes mobile-link-in { from { opacity: 0; transform: translateY(.75rem); } }

/* ADMIN WIDE WINDOWS: One consistent review width for information-heavy records. */
.admin-wide-dialog,.admin-detail-dialog { width: min(78rem,calc(100vw - 2rem)); max-width: none; overflow-x: hidden; }
.admin-wide-dialog .admin-dialog-card,.admin-detail-dialog .admin-dialog-card { width: 100%; max-height: min(90vh,58rem); overflow-x: hidden; overflow-y: auto; box-sizing: border-box; }
.admin-detail-grid.is-editable { grid-template-columns: repeat(2,minmax(0,1fr)); }
.admin-edit-field { min-width: 0; }
.admin-edit-field-wide { grid-column: span 2; }
.admin-edit-check { display: flex !important; align-items: center; gap: .75rem !important; min-height: 3rem; padding: .75rem 1rem; border: 1px solid rgba(11,11,11,.13); border-radius: .9rem; background: rgba(212,255,58,.16); }
.admin-edit-check input { width: 1.15rem !important; height: 1.15rem; flex: 0 0 auto; accent-color: #8116e0; }
@media (max-width: 680px) { .admin-detail-grid.is-editable { grid-template-columns: 1fr; } .admin-edit-field-wide { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .site-header .mobile-nav,.mobile-nav-primary a,.mobile-nav-secondary a,.mobile-nav-actions,.mobile-nav-footer { animation: none; } }
@media (max-width: 620px) {
  .brand-page-hero { min-height: auto; }
  .brand-page-hero-visual,.brand-page-hero-visual img { min-height: 27rem; }
  .brand-handle-grid,.brand-journey-grid,.brand-right-grid { grid-template-columns: 1fr; }
  .brand-handle-grid article { min-height: 18rem; border-right: 0; border-bottom: 1px solid var(--sn-minimal-line) !important; }
  .brand-handle-grid article:last-child { border-bottom: 0 !important; }
  .brand-handle-grid h3 { margin-top: 4rem; }
  .brand-journey-grid li,.brand-journey-grid li:first-child,.brand-journey-grid li:nth-child(2),.brand-journey-grid li:nth-child(3),.brand-journey-grid li:last-child { min-height: 20rem; border-radius: 0; }
  .brand-journey-grid li:first-child { border-radius: 1.5rem 1.5rem 0 0; }
  .brand-journey-grid li:last-child { border-radius: 0 0 1.5rem 1.5rem; }
  .brand-right-grid article { min-height: 17rem; }
  .brand-right-grid h3 { margin-top: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-page-hero-visual:hover img,.brand-handle-grid article:hover,.brand-journey-grid li:hover,.brand-right-grid article:hover { transform: none; }
}

/* STANDARD CLOSING CTA
   Shared by future public pages to preserve the approved light, high-contrast finish. */
.standard-closing-cta {
  background: #fefffc !important;
  color: #000 !important;
  text-align: center;
}
.standard-closing-cta .kicker { color: #8116e0 !important; }
.standard-closing-cta h2 {
  max-width: 16ch;
  margin: 0 auto 2rem;
  color: #000 !important;
}
.standard-closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}
.standard-closing-actions .button-lime {
  min-width: 12.5rem;
  border-color: rgba(129,22,224,.2);
  background: #d4ff3a;
  color: #000;
}

/* UGC CONTENT TYPES PAGE
   Educational brand guide. The shared campaign modal remains the conversion path. */
.format-hero {
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(20rem,.72fr);
  gap: clamp(2rem,7vw,7rem);
  align-items: center;
  min-height: min(47rem,calc(100svh - 7.8rem));
  background: #fefffc;
}
.format-hero-copy { max-width: 55rem; }
.format-hero-copy h1 { margin-bottom: 1.5rem; font-size: clamp(3.5rem,7vw,7.5rem); }
.format-hero-copy h1 span { color: #8116e0; }
.format-hero-copy > p:not(.kicker) { max-width: 43rem; color: #5f5f5f; font-size: clamp(1.05rem,1.55vw,1.3rem); }
.format-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.format-definition { display: grid; gap: 0; padding: clamp(1.5rem,3vw,2.5rem); border: 1px solid var(--sn-minimal-line); border-radius: 1.8rem; background: #d4ff3a; }
.format-definition > span { margin-bottom: 2.5rem; color: #8116e0; font-weight: 900; letter-spacing: .08em; }
.format-definition p { margin: 0; padding: 1rem 0; border-top: 1px solid rgba(0,0,0,.2); color: #000; font-size: clamp(1rem,1.4vw,1.2rem); }

.format-library { background: #f8f9fa; }
.format-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; margin-top: 3rem; }
.format-card { display: grid; grid-template-rows: auto auto 1fr auto auto; min-height: 27rem; padding: 1.6rem; border: 1px solid var(--sn-minimal-line); border-radius: 1.5rem; background: #fefffc; transition: transform 220ms var(--sn-minimal-ease),border-color 180ms ease,box-shadow 220ms ease; }
.format-card > span { color: #8116e0; font-weight: 900; letter-spacing: .05em; }
.format-card h3 { margin: 4.5rem 0 .9rem; color: #000; font-size: clamp(1.75rem,3vw,3.1rem); }
.format-card p { max-width: 38rem; margin: 0 0 1.3rem; color: #5f5f5f; }
.format-card small { align-self: end; color: #8116e0; font-weight: 800; }
.format-card button { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 1.2rem; padding: .9rem 1rem; border: 1px solid #000; border-radius: 999px; background: rgba(255,255,255,.66); color: #000; font-weight: 800; cursor: pointer; transition: background 180ms ease,color 180ms ease,transform 180ms ease; }
.format-card:hover { border-color: rgba(129,22,224,.4); box-shadow: 0 1rem 2.2rem rgba(41,13,60,.1); transform: translateY(-.4rem); }
.format-card button:hover { background: #8116e0; color: #fefffc; transform: translateY(-2px); }

.format-chooser { background: #fefffc; }
.format-goal-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 3rem; overflow: hidden; border: 1px solid var(--sn-minimal-line); border-radius: 1.5rem; }
.format-goal-grid article { min-height: 18rem; padding: 1.5rem; border-right: 1px solid var(--sn-minimal-line); background: #fff; }
.format-goal-grid article:last-child { border-right: 0; }
.format-goal-grid b { display: block; margin: 7rem 0 .8rem; color: #8116e0; font-size: clamp(1.25rem,1.9vw,1.8rem); }
.format-goal-grid p { margin: 0; color: #5f5f5f; }

.format-variations { display: grid; grid-template-columns: minmax(18rem,.8fr) minmax(0,1.2fr); gap: clamp(2rem,7vw,7rem); background: #f8f9fa; }
.format-variations-copy > p:not(.kicker) { max-width: 37rem; color: #5f5f5f; }
.variation-stack { display: grid; align-content: center; }
.variation-stack article { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid #d9d9d9; }
.variation-stack span { color: #8116e0; font-weight: 900; }
.variation-stack p { margin: 0; color: #000; font-size: clamp(1.1rem,1.8vw,1.45rem); font-weight: 700; }

.format-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,6vw,6rem); background: #fefffc; }
.format-faq .faq-intro { align-self: start; position: sticky; top: 8rem; }
@media (max-width: 1000px) {
  .format-hero,.format-variations,.format-faq { grid-template-columns: 1fr; }
  .format-goal-grid { grid-template-columns: 1fr 1fr; }
  .format-goal-grid article:nth-child(2) { border-right: 0; }
  .format-goal-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--sn-minimal-line); }
  .format-faq .faq-intro { position: static; }
}
@media (max-width: 680px) {
  .format-hero { min-height: auto; }
  .format-grid,.format-goal-grid { grid-template-columns: 1fr; }
  .format-card { min-height: 23rem; }
  .format-goal-grid article { min-height: 13rem; border-right: 0; border-bottom: 1px solid var(--sn-minimal-line); }
  .format-goal-grid article:last-child { border-bottom: 0; }
  .format-goal-grid b { margin-top: 3.5rem; }
  .variation-stack article { grid-template-columns: 1fr; gap: .25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .format-card:hover,.format-card button:hover { transform: none; }
}

/* ===== SNAPPI ADMIN WORKSPACE =====
   Secure operational interface. Authentication and RLS decide access; these styles only control presentation. */
.admin-page { --workspace-section-title-size: 1.35rem; --workspace-subtab-size: .95rem; min-height: 100svh; background: #f4f4f1; color: #0b0b0b; }
.admin-auth-shell { display: grid; min-height: 100svh; place-items: center; padding: 2rem; background: radial-gradient(circle at 85% 12%,rgba(212,255,58,.55),transparent 26%),radial-gradient(circle at 15% 90%,rgba(129,22,224,.13),transparent 30%),#fefffc; }
.admin-auth-brand { position: fixed; top: 1.5rem; left: 2rem; }
.admin-auth-brand img { width: 10rem; height: 4rem; object-fit: contain; }
.admin-auth-card { width: min(31rem,100%); padding: clamp(1.6rem,4vw,2.6rem); border: 1px solid rgba(11,11,11,.16); border-radius: 1.75rem; background: rgba(254,255,252,.83); box-shadow: 0 1.5rem 4rem rgba(42,18,57,.1); backdrop-filter: blur(18px); }
.admin-auth-card h1 { margin: .3rem 0 1rem; font-size: clamp(3rem,7vw,5.2rem) !important; }
.admin-auth-card > p:not(.kicker) { color: #5f5f5f; }
.admin-auth-form { display: grid; gap: 1rem; margin-top: 1.8rem; }
.admin-auth-form label,.admin-dialog-card label { display: grid; gap: .4rem; color: #333; font-size: .82rem; font-weight: 800; }
.admin-auth-form input,.admin-dialog-card :is(input,textarea,select) { width: 100%; padding: .9rem 1rem; border: 1px solid rgba(11,11,11,.2); border-radius: .9rem; outline: 0; background: rgba(255,255,255,.7); color: #000; transition: border-color 180ms ease,box-shadow 180ms ease,background 180ms ease; }
.admin-auth-form input:focus,.admin-dialog-card :is(input,textarea,select):focus { border-color: #8116e0; background: #fff; box-shadow: 0 0 0 4px rgba(129,22,224,.1); }
.admin-dialog-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.admin-inline-link { padding: 0; border: 0; background: transparent; color: #8116e0; font: inherit; font-weight: 900; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.admin-sign-in-button { min-height: 3.35rem; display: inline-flex; align-items: center; justify-content: center; }
.admin-sign-in-button[aria-busy="true"] { cursor: wait; }
.admin-button-loader { margin: -.35rem 0 .1rem; transform: scale(.58); transform-origin: center; }
.admin-quiet-action { border: 0; background: transparent; color: #8116e0; font-weight: 800; text-align: left; cursor: pointer; }
.admin-support-link { display: inline-block; margin-top: 1.2rem; color: #5f5f5f; font-size: .83rem; }
.admin-form-status { min-height: 1.5rem; margin: 0; color: #5f5f5f; font-size: .8rem; }
.admin-form-status.is-error { color: #b42318; font-weight: 800; }

.admin-workspace { min-height: 100svh; }
.admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 80; display: flex; width: 17rem; flex-direction: column; overflow-y: auto; padding: 1.2rem; border-right: 1px solid rgba(11,11,11,.14); background: #fefffc; }
.admin-sidebar-brand { display: inline-flex; margin-bottom: 1.5rem; }
.admin-sidebar-brand img { width: 9.5rem; height: 3.5rem; object-fit: contain; object-position: left center; }
.admin-sidebar-label { margin: 0 0 .55rem; color: #626262; font-size: .75rem !important; font-weight: 900; letter-spacing: .1em; }
.admin-navigation { display: grid; gap: .25rem; }
.admin-navigation button { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: .75rem; align-items: center; width: 100%; padding: .78rem .85rem; border: 0; border-radius: .85rem; background: transparent; color: #414141; font-size: .88rem; font-weight: 750; text-align: left; cursor: pointer; transition: background 180ms ease,color 180ms ease,transform 180ms ease; }
.admin-navigation button:hover { background: #f2f2ef; color: #510e8c; transform: translateX(2px); }
.admin-navigation button.is-active { background: #d4ff3a; color: #000; }
.admin-navigation button > span { color: #8116e0; text-align: center; }
.admin-navigation button i { display: grid; min-width: 1.5rem; height: 1.5rem; place-items: center; padding: 0 .35rem; border-radius: 999px; background: rgba(129,22,224,.1); color: #510e8c; font-size: .75rem; font-style: normal; }
.workspace-nav-group { min-width: 0; }
.admin-navigation .workspace-nav-parent { grid-template-columns: 1.4rem minmax(0,1fr) auto; }
.workspace-nav-chevron { font-size: 1.15rem; transition: transform 180ms ease; }
.workspace-nav-parent[aria-expanded="true"] .workspace-nav-chevron { transform: rotate(180deg); }
.workspace-nav-group:has(.is-active) > .workspace-nav-parent { color: #510e8c; background: rgba(129,22,224,.07); }
.workspace-nav-children { display: grid; gap: .2rem; margin: .2rem 0 .45rem .65rem; padding-left: .7rem; border-left: 1px solid rgba(129,22,224,.25); }
.workspace-nav-children[hidden] { display: none; }
.admin-navigation button[hidden], .admin-navigation .workspace-nav-group[hidden] { display: none !important; }
.admin-navigation .workspace-nav-children button { padding: .62rem .55rem; font-size: .81rem; }
.workspace-hidden-view-switcher[hidden] { display: none !important; }
.admin-sidebar-support { margin-top: auto; padding: 1rem; border: 1px solid rgba(129,22,224,.16); border-radius: 1rem; background: rgba(129,22,224,.05); }
.admin-sidebar-support b { color: #510e8c; }
.admin-sidebar-support p { margin: .25rem 0 .75rem; color: #666; font-size: .78rem; }
.admin-sidebar-support a { color: #8116e0; font-size: .78rem; font-weight: 800; }

.admin-content-shell { min-height: 100svh; margin-left: 17rem; }
.admin-topbar { position: sticky; top: 0; z-index: 60; display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 6.2rem; padding: .85rem clamp(1rem,3vw,2.5rem); border-bottom: 1px solid rgba(11,11,11,.13); background: rgba(254,255,252,.88); backdrop-filter: blur(16px); }
.admin-topbar .kicker { margin: 0; font-size: .75rem !important; }
.admin-topbar h1 { margin: .2rem 0 0; font-size: clamp(1.75rem,2.8vw,2.8rem) !important; line-height: 1; }
.admin-sidebar-toggle { display: none; }
.admin-account { position: relative; display: flex; align-items: center; gap: .75rem; }
.admin-avatar { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border-radius: 50%; background: #8116e0; color: #fefffc; font-weight: 900; }
.admin-account > button { display: grid; grid-template-columns: 1fr auto; gap: 0 .75rem; padding: .35rem .5rem; border: 0; background: transparent; text-align: left; cursor: pointer; }
.admin-account > button b,.admin-account > button small { grid-column: 1; }
.admin-account > button small { color: #626262; }
.admin-account > button > span { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.admin-account-menu { position: absolute; top: calc(100% + .75rem); right: 0; display: grid; width: 12rem; padding: .45rem; border: 1px solid rgba(11,11,11,.14); border-radius: 1rem; background: #fefffc; box-shadow: 0 1rem 2.5rem rgba(42,18,57,.14); }
.admin-account-menu :is(button,a) { padding: .75rem .8rem; border: 0; border-radius: .75rem; background: transparent; color: #111; font-size: .82rem; text-align: left; text-decoration: none; cursor: pointer; }
.admin-account-menu :is(button,a):hover { background: #f1f1ee; color: #8116e0; }

.admin-main { padding: clamp(1.2rem,3vw,2.5rem); }
.admin-panel { animation: adminPanelIn 260ms ease both; }
@keyframes adminPanelIn { from { opacity: 0; transform: translateY(8px); } }
.admin-panel-heading { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 1.35rem; }
.admin-panel-heading h2 { margin: .2rem 0 .45rem; font-size: clamp(1.9rem,3vw,3.1rem) !important; line-height: 1.02; }
.admin-panel-heading p:not(.kicker) { max-width: 48rem; margin: 0; color: #606060; }
.admin-refresh { padding: .75rem .9rem; border: 1px solid rgba(11,11,11,.16); border-radius: 999px; background: rgba(255,255,255,.7); font-weight: 800; cursor: pointer; }
.admin-small-button { flex: 0 0 auto; }
.admin-metric-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(11rem,1fr)); gap: .75rem; }
.admin-metric-grid article { min-height: 11rem; padding: 1.2rem; border: 1px solid rgba(11,11,11,.13); border-radius: 1.25rem; background: #fefffc; }
.admin-metric-grid span,.admin-metric-grid small { display: block; color: #676767; font-size: .78rem; }
.admin-metric-grid strong { display: block; margin: 1.4rem 0 .25rem; color: #8116e0; font-size: clamp(2.5rem,4vw,4rem); line-height: 1; }
.admin-overview-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: .75rem; margin-top: .75rem; }
.admin-surface { min-height: 24rem; padding: 1.2rem; border: 1px solid rgba(11,11,11,.13); border-radius: 1.25rem; background: #fefffc; }
.admin-surface-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #deded9; }
.admin-surface-heading h3 { margin: 0; font-size: var(--workspace-section-title-size) !important; line-height: 1.22; }
.admin-surface-heading button { border: 0; background: transparent; color: #8116e0; font-size: .78rem; font-weight: 800; cursor: pointer; }
.admin-priority-list { display: grid; }
.admin-priority-list button { display: grid; grid-template-columns: 5rem 1fr auto; gap: .15rem 1rem; align-items: center; padding: 1rem 0; border: 0; border-bottom: 1px solid #e3e3df; background: transparent; text-align: left; cursor: pointer; }
.admin-priority-list button > span { grid-row: 1 / 3; color: #8116e0; font-size: .75rem; font-weight: 900; }
.admin-priority-list button small { color: #626262; }
.admin-priority-list button i { grid-column: 3; grid-row: 1 / 3; font-style: normal; }
.admin-activity-preview article { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid #e3e3df; }
.admin-activity-preview article > span { padding: .3rem .5rem; border-radius: 999px; background: rgba(212,255,58,.6); font-size: .75rem; font-weight: 900; }
.admin-activity-preview p { display: grid; margin: 0; }
.admin-activity-preview small { color: #626262; }
.admin-empty { margin: 1rem 0; color: #626262; font-size: .85rem; }

.admin-toolbar { display: grid; grid-template-columns: minmax(15rem,1fr) minmax(12rem,.3fr); gap: .75rem; margin-bottom: .75rem; }
.admin-toolbar :is(input,select),.admin-row-action { min-height: 2.8rem; padding: .75rem .8rem; border: 1px solid rgba(11,11,11,.15); border-radius: .8rem; outline: 0; background: rgba(254,255,252,.85); color: #111; }
.admin-toolbar :is(input,select):focus,.admin-row-action:focus { border-color: #8116e0; box-shadow: 0 0 0 3px rgba(129,22,224,.09); }
.admin-table-wrap { overflow-x: auto; border: 1px solid rgba(11,11,11,.13); border-radius: 1.2rem; background: #fefffc; }
.admin-table-wrap table { width: 100%; min-width: 780px; border-collapse: collapse; }
.admin-table-wrap th { padding: .85rem 1rem; background: #f1f1ee; color: #555; font-size: .75rem; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.admin-table-wrap td { padding: 1rem; border-top: 1px solid #e2e2de; color: #333; font-size: .84rem; vertical-align: middle; }
.admin-table-wrap td b,.admin-table-wrap td small { display: block; }
.admin-table-wrap td small { margin-top: .2rem; color: #626262; }
.admin-row-action { min-width: 10rem; font-size: .78rem; cursor: pointer; }
.admin-status { display: inline-flex; padding: .35rem .55rem; border-radius: 999px; background: #e9e9e5; color: #333; font-size: .75rem; font-weight: 850; white-space: nowrap; }
.admin-status:is(.status-active,.status-approved,.status-onboarded,.status-delivered,.status-completed,.status-resolved) { background: rgba(212,255,58,.6); color: #172000; }
.admin-status:is(.status-new,.status-under_review,.status-shortlisted,.status-open,.status-production,.status-brand_review,.status-submitted) { background: rgba(129,22,224,.11); color: #510e8c; }
.admin-status:is(.status-suspended,.status-rejected,.status-cancelled,.status-urgent) { background: #fee4e2; color: #b42318; }
.admin-settings-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; }
.admin-settings-grid article { display: grid; min-height: 12rem; align-content: end; padding: 1.2rem; border: 1px solid rgba(11,11,11,.13); border-radius: 1.2rem; background: #fefffc; }
.admin-settings-grid span,.admin-settings-grid small { color: #6a6a6a; font-size: .78rem; }
.admin-settings-grid b { margin: .75rem 0 .2rem; color: #510e8c; font-size: 1.15rem; overflow-wrap: anywhere; }

.admin-dialog { width: min(35rem,calc(100% - 2rem)); padding: 0; border: 0; border-radius: 1.6rem; background: transparent; }
.admin-dialog::backdrop { background: rgba(11,11,11,.58); backdrop-filter: blur(8px); }
.admin-dialog-card { position: relative; display: grid; gap: 1rem; padding: 1.8rem; border: 1px solid rgba(255,255,255,.3); border-radius: 1.6rem; background: #fefffc; }
.admin-dialog-card h2 { margin: 0 0 .5rem; font-size: clamp(2.2rem,5vw,3.6rem) !important; }
.admin-dialog-close { position: absolute; top: .8rem; right: .8rem; display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid rgba(11,11,11,.18); border-radius: 50%; background: #fff; cursor: pointer; }
.admin-toast { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 200; max-width: 24rem; padding: .85rem 1rem; border: 1px solid rgba(11,11,11,.18); border-radius: .9rem; background: #d4ff3a; color: #000; font-weight: 800; box-shadow: 0 1rem 2rem rgba(0,0,0,.16); }
.admin-toast.is-error { background: #fee4e2; color: #b42318; }

@media (max-width: 1100px) {
  .admin-metric-grid { grid-template-columns: 1fr 1fr; }
  .admin-overview-grid { grid-template-columns: 1fr; }
  .admin-settings-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .admin-sidebar { transform: translateX(-105%); transition: transform 220ms ease; }
  .admin-sidebar-open .admin-sidebar { transform: translateX(0); box-shadow: 1rem 0 3rem rgba(0,0,0,.15); }
  .admin-content-shell { margin-left: 0; }
  .admin-topbar { grid-template-columns: auto 1fr auto; gap: .75rem; }
  .admin-sidebar-toggle { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid rgba(11,11,11,.16); border-radius: 50%; background: #fff; }
  .admin-account > button b,.admin-account > button small,.admin-account > button > span { display: none; }
  .admin-panel-heading { align-items: start; flex-direction: column; }
}
@media (max-width: 600px) {
  .admin-auth-shell { align-items: start; padding: 7rem 1rem 1rem; }
  .admin-auth-brand { left: 1rem; }
  .admin-main { padding: 1rem; }
  .admin-topbar h1 { font-size: 1.35rem !important; }
  .admin-topbar .kicker { display: none; }
  .admin-metric-grid,.admin-settings-grid,.admin-toolbar { grid-template-columns: 1fr; }
  .admin-metric-grid article { min-height: 9rem; }
  .admin-priority-list button { grid-template-columns: 4.2rem 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-panel { animation: none; }
  .admin-navigation button:hover { transform: none; }
}

/* ADMIN ACCESS CONTROL
   Super Admin user creation, explicit privileges, and non-grantable audit visibility. */
.admin-navigation button > span { font-size: 1.05rem; line-height: 1; }
.admin-permission-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; padding: .9rem 1rem; border: 1px solid rgba(129,22,224,.2); border-radius: 1rem; background: rgba(129,22,224,.06); color: #510e8c; }
.admin-permission-note span { color: #666; font-size: .82rem; }
.admin-dialog-card select { width: 100%; min-height: 3rem; padding: .75rem 1rem; border: 1px solid rgba(11,11,11,.2); border-radius: .9rem; outline: 0; background: #fff; color: #000; }
.admin-permission-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: .2rem 0; padding: 1rem; border: 1px solid rgba(129,22,224,.18); border-radius: 1rem; background: rgba(129,22,224,.04); }
.admin-permission-fields legend { padding: 0 .35rem; color: #510e8c; font-weight: 900; }
.admin-permission-fields label { display: flex; align-items: center; gap: .55rem; }
.admin-permission-fields input { width: 1rem !important; height: 1rem; padding: 0 !important; accent-color: #8116e0; }
.admin-permission-fields p { grid-column: 1 / -1; margin: .25rem 0 0; color: #626262; font-size: .76rem; }
.admin-table-button { min-width: 7rem; padding: .55rem .8rem; border: 1px solid rgba(129,22,224,.28); border-radius: 999px; background: rgba(255,255,255,.72); color: #510e8c; font: 800 .78rem/1 var(--font-body); cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.admin-table-button:hover { background: #8116e0; color: #fefffc; transform: translateY(-1px); }
.admin-locked-access { display: inline-flex; padding: .5rem .75rem; border-radius: 999px; background: rgba(17,17,17,.06); color: #666; font-size: .75rem; font-weight: 800; }
.admin-access-person { display: grid; gap: .15rem; padding: .8rem 1rem; border: 1px solid rgba(129,22,224,.15); border-radius: 1rem; background: rgba(129,22,224,.05); }
.admin-access-person b { color: #111; }
.admin-access-person span { color: #666; font-size: .82rem; }
.admin-field-help { margin: -.25rem 0 .25rem; color: #6a6a6a; font-size: .78rem; }
.admin-subnavigation { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; padding: .35rem; border: 1px solid rgba(17,17,17,.12); border-radius: 999px; background: rgba(255,255,255,.72); width: max-content; max-width: 100%; }
.admin-subnavigation button { padding: .75rem 1rem; border: 0; border-radius: 999px; background: transparent; color: #555; font: 800 var(--workspace-subtab-size)/1.2 var(--font-body); cursor: pointer; transition: background .2s ease,color .2s ease,transform .2s ease; }
.admin-subnavigation button:hover { color: #8116e0; transform: translateY(-1px); }
.admin-subnavigation button.is-active { background: #8116e0; color: #fefffc; }
.admin-subnavigation button:focus-visible { outline: 3px solid #8116e0; outline-offset: 2px; }
[data-view-panel][hidden] { display: none !important; }
.admin-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin: 0 0 .85rem; }
.admin-section-heading h3 { margin: 0; color: #111; font-size: var(--workspace-section-title-size); line-height: 1.22; }
.admin-section-heading p { margin: .25rem 0 0; color: #666; font-size: .84rem; }
.admin-temp-password { padding: 1rem; border: 1px solid rgba(129,22,224,.25); border-radius: 1rem; background: #d4ff3a; color: #000; }
.admin-temp-password b,.admin-temp-password code { display: block; }
.admin-temp-password code { margin: .5rem 0; font-size: 1.15rem; font-weight: 900; word-break: break-all; user-select: all; }
.admin-temp-password p { margin: 0; font-size: .76rem; }
@media (max-width: 600px) { .admin-permission-fields { grid-template-columns: 1fr; } .admin-permission-fields p { grid-column: 1; } }
@media (max-width: 650px) { .admin-subnavigation { width: 100%; border-radius: 1rem; } .admin-subnavigation button { flex: 1; } .admin-section-heading { align-items: stretch; flex-direction: column; } }

/* MEMBER ACCESS GATES: Temporary protected destinations used until the full workspaces are connected. */
.snappi-login-help { justify-self: center; border: 0; background: transparent; color: #d4ff3a; font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; }
.snappi-login-help:hover { text-decoration: underline; text-underline-offset: .2em; }
.snappi-login-support { display: block; margin-top: 1.25rem; color: rgba(254,255,252,.78); font-size: .86rem; text-align: center; }
.snappi-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin: 0 3.2rem 1.4rem 0; padding: .3rem; border: 1px solid rgba(254,255,252,.18); border-radius: 999px; background: rgba(255,255,255,.08); }
.snappi-auth-tabs button { padding: .75rem 1rem; border: 0; border-radius: 999px; background: transparent; color: rgba(254,255,252,.72); font: inherit; font-weight: 800; cursor: pointer; }
.snappi-auth-tabs button.is-active { background: #d4ff3a; color: #000; }
.snappi-modal-compact:has([data-public-join-panel]:not([hidden])) { max-width: 46rem; }
.snappi-join-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.snappi-join-choice :is(button,a) { display: grid; gap: .35rem; min-height: 9rem; padding: 1.25rem; border: 1px solid rgba(254,255,252,.2); border-radius: 1.25rem; background: rgba(255,255,255,.08); color: #fefffc; text-align: left; text-decoration: none; cursor: pointer; transition: transform 180ms ease,background 180ms ease,border-color 180ms ease; }
.snappi-join-choice :is(button,a):hover { border-color: #d4ff3a; background: rgba(212,255,58,.12); transform: translateY(-3px); }
.snappi-join-choice :is(button,a) > span { font-size: 1.75rem; }
.snappi-join-choice :is(button,a) b { font-size: 1.05rem; }
.snappi-join-choice :is(button,a) small { color: rgba(254,255,252,.7); font-size: .84rem; }
.snappi-join-form { max-height: min(66vh,44rem); padding-right: .3rem; overflow-y: auto; }
.snappi-form-back { justify-self: start; padding: 0; border: 0; background: transparent; color: #d4ff3a; font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; }
.snappi-file-field { padding: .9rem 1rem; border: 1px solid rgba(254,255,252,.25); border-radius: .9rem; background: rgba(255,255,255,.08); color: #fefffc !important; }
.snappi-file-field > span { position: static !important; color: rgba(254,255,252,.78) !important; font-size: .78rem !important; transform: none !important; }
.snappi-file-field input { width: 100%; margin-top: .6rem; color: #fefffc; }
@media (max-width: 600px) { .snappi-join-choice { grid-template-columns: 1fr; } .snappi-auth-tabs { margin-right: 2.6rem; } }
.member-gate-page { min-height: 100svh; background: radial-gradient(circle at 82% 14%,rgba(212,255,58,.58),transparent 28%),radial-gradient(circle at 12% 88%,rgba(129,22,224,.14),transparent 30%),#fefffc; }
.member-gate { display: grid; min-height: 100svh; place-items: center; align-content: center; gap: 1rem; padding: 2rem; }
.member-gate > img,.member-gate > a > img { width: min(12rem,45vw); height: auto; }
.member-gate-status { margin: 0; color: #8116e0; font-weight: 800; }
.member-gate-card { width: min(44rem,100%); padding: clamp(1.6rem,5vw,3.2rem); border: 1px solid rgba(17,17,17,.14); border-radius: 2rem; background: rgba(254,255,252,.82); box-shadow: 0 1.5rem 4rem rgba(42,18,57,.1); text-align: center; backdrop-filter: blur(18px); }
.member-gate-card h1 { max-width: 100%; margin: .3rem auto 1rem; font-size: clamp(2.4rem,6vw,4.6rem) !important; }
.member-gate-card > p:not(.kicker) { max-width: 34rem; margin: 0 auto 1.5rem; color: #555; }
.member-gate-card > div { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-bottom: 1.2rem; }
.member-gate-card > a { color: #8116e0; font-weight: 800; }
.member-gate-card { width: min(76rem,100%); text-align: left; }
.member-gate-card > p:not(.kicker),.member-gate-card h1 { margin-left: 0; }
.member-metric-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem !important; margin: 1.5rem 0 !important; }
.member-metric-grid article { padding: 1rem; border: 1px solid rgba(17,17,17,.13); border-radius: 1rem; background: #fefffc; }
.member-metric-grid small,.member-metric-grid strong { display: block; }
.member-metric-grid small { color: #666; font-weight: 700; text-transform: uppercase; }
.member-metric-grid strong { margin-top: .35rem; color: #8116e0; font-size: 1.35rem; text-transform: capitalize; }
.member-workspace-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 1rem !important; margin: 0 0 1.3rem !important; }
.member-workspace-grid > section { min-width: 0; padding: 1.15rem; border: 1px solid rgba(17,17,17,.13); border-radius: 1.25rem; background: rgba(254,255,252,.92); }
.member-section-heading { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .8rem; }
.member-section-heading h2 { margin: 0; font-size: 1.35rem !important; }
.member-section-heading span { color: #666; font-size: .8rem; }
.member-section-heading button { padding: .4rem .75rem; border: 1px solid rgba(17,17,17,.14); border-radius: 999px; background: #fff; color: #8116e0; font: inherit; font-weight: 800; cursor: pointer; }
.member-record-list { display: grid; gap: .55rem; }
.member-record-list article { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem; border: 1px solid rgba(17,17,17,.1); border-radius: .85rem; background: #fff; }
.member-record-list article.is-unread { border-color: #8116e0; background: rgba(212,255,58,.2); }
.member-record-list small,.member-record-list b,.member-record-list p,.member-record-list span { display: block; margin: 0; overflow-wrap: anywhere; }
.member-record-list small,.member-record-list span { color: #666; font-size: .76rem; text-transform: capitalize; }
.member-record-list b { margin: .15rem 0; }
.member-record-actions { display: flex; min-width: 9rem; flex-direction: column; align-items: flex-end; gap: .3rem; }
.member-record-actions a { color: #8116e0; font-weight: 800; }
.member-settings-form { display: grid; gap: .75rem; }
.member-settings-form label span { display: block; margin-bottom: .25rem; font-weight: 800; }
.member-settings-form input { width: 100%; padding: .8rem; border: 1px solid rgba(17,17,17,.18); border-radius: .8rem; font: inherit; }
.member-settings-form textarea { width: 100%; padding: .8rem; border: 1px solid rgba(17,17,17,.18); border-radius: .8rem; background: #fff; color: #111; font: inherit; resize: vertical; }
.creator-field-heading { grid-column: 1/-1; margin: .8rem 0 .1rem; color: #8116e0; font-size: 1.05rem; }
.creator-field-heading { padding-top: .7rem; border-top: 1px solid rgba(17,17,17,.15); }
.admin-detail-grid .creator-field-heading { grid-column: 1/-1; }
@media (max-width: 760px) { .member-metric-grid,.member-workspace-grid { grid-template-columns: 1fr; } .member-record-list article { flex-direction: column; } .member-record-actions { align-items: flex-start; } }
@media (max-width: 600px) { .admin-dialog-row { grid-template-columns: 1fr; } }

/* ADMIN HEADING ACTIONS: Keeps related controls aligned and responsive. */
.admin-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }
.admin-delete-application { margin-right: auto; border: 1px solid #a51e38; background: #fefffc; color: #a51e38; }
.admin-delete-application:hover,.admin-delete-application:focus-visible { border-color: #a51e38; background: #a51e38; color: #fff; }
.admin-delete-application[hidden] { display: none !important; }

/* ADMIN REQUEST DETAILS: Full application data in a readable review surface. */
.admin-main > .admin-panel { border-top: 0 !important; }
.admin-detail-dialog { width: min(78rem,calc(100vw - 2rem)); max-width: none; overflow-x: hidden; }
.admin-detail-dialog .admin-dialog-card { width: 100%; max-height: min(90vh,58rem); overflow-x: hidden; overflow-y: auto; box-sizing: border-box; }
.admin-detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
.admin-detail-note { grid-column: 1/-1; margin: 0 0 .25rem; }
.admin-detail-grid article { min-width: 0; padding: .9rem; border: 1px solid rgba(11,11,11,.13); border-radius: .9rem; background: #fefffc; }
.admin-detail-grid small,.admin-detail-grid b,.admin-detail-grid a { display: block; overflow-wrap: anywhere; }
.admin-detail-grid small { margin-bottom: .25rem; color: #686868; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.admin-detail-grid a { color: #8116e0; font-weight: 800; }
.admin-detail-message { padding: 1rem; border: 1px solid rgba(129,22,224,.2); border-radius: 1rem; background: rgba(129,22,224,.06); }
.admin-detail-message small { display: block; color: #510e8c; font-weight: 900; text-transform: uppercase; }
.admin-detail-message p { margin: .45rem 0 0; color: #111; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-brand-estimate { display: grid; gap: 1rem; padding: clamp(1rem,2vw,1.5rem); border: 1px solid rgba(17,17,17,.16); border-radius: 1.1rem; background: #fefffc; }
.admin-brand-estimate-heading { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .75rem; }
.admin-brand-estimate-heading :is(.kicker,h3) { margin: 0; }
.admin-brand-estimate-heading h3 { font-size: clamp(1.3rem,2.5vw,1.8rem); color: #111; }
.admin-brand-estimate-heading strong { color: #510e8c; font-size: clamp(1.2rem,2.5vw,1.7rem); font-variant-numeric: tabular-nums; }
.admin-brand-estimate-note { margin: 0; color: #242424; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-brand-estimate-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; margin: 0; }
.admin-brand-estimate-summary div,.admin-brand-videos article { padding: .85rem 1rem; border: 1px solid rgba(17,17,17,.14); border-radius: .85rem; background: #fff; min-width: 0; }
.admin-brand-estimate-summary dt { color: #555; font-size: .8rem; font-weight: 700; text-transform: uppercase; }
.admin-brand-estimate-summary dd { margin: .25rem 0 0; color: #111; font-weight: 800; overflow-wrap: anywhere; }
.admin-brand-videos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.admin-brand-videos :is(h4,p) { margin: 0 0 .45rem; overflow-wrap: anywhere; }
.admin-brand-videos h4 { color: #510e8c; font-size: 1rem; }
.admin-brand-videos p:last-child { margin-bottom: 0; }
@media (max-width: 680px) { .admin-brand-estimate-summary,.admin-brand-videos { grid-template-columns: 1fr; } }
.admin-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.admin-row-actions .admin-row-action { min-width: 9.5rem; }
.admin-pagination { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; margin-top: .75rem; }
.admin-pagination[hidden] { display: none; }
.admin-pagination button { min-width: 6.8rem; padding: .6rem .85rem; border: 1px solid rgba(129,22,224,.25); border-radius: 999px; background: #fefffc; color: #510e8c; font: 800 .78rem/1 var(--font-body); cursor: pointer; }
.admin-pagination button:hover:not(:disabled) { background: #8116e0; color: #fefffc; }
.admin-pagination button:disabled { opacity: .35; cursor: not-allowed; }
.admin-pagination span { color: #666; font-size: .78rem; }
.snappi-back-to-top { position: fixed; right: clamp(1rem,2.5vw,2rem); bottom: clamp(1rem,2.5vw,2rem); z-index: 120; display: grid; width: 4rem; height: 4rem; padding: .45rem; place-items: center; border: 1px solid rgba(17,17,17,.25); border-radius: 50%; background: rgba(212,255,58,.9); box-shadow: 0 .8rem 2rem rgba(17,17,17,.16); opacity: 0; pointer-events: none; transform: translateY(1rem) scale(.88); cursor: pointer; backdrop-filter: blur(12px); transition: opacity 180ms ease,transform 180ms ease,box-shadow 180ms ease; }
.snappi-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.snappi-back-to-top:hover { box-shadow: 0 1rem 2.3rem rgba(81,14,140,.25); transform: translateY(-3px) scale(1.04); }
.snappi-back-to-top img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }
@media (max-width: 900px) { .admin-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 680px) { .admin-detail-grid { grid-template-columns: 1fr; } .admin-pagination { justify-content: space-between; } .admin-pagination span { text-align: center; } .snappi-back-to-top { width: 3.5rem; height: 3.5rem; } }

/* CAREERS AND ADMIN FILTERS: Shared controls preserve the current Snappi visual language. */
.creator-content-link { color: #8116e0 !important; font-weight: 800; }
.creator-content-link:hover { color: #510e8c !important; }
.admin-sidebar-credit { margin: .75rem .25rem 0; padding-top: .75rem; border-top: 1px solid rgba(17,17,17,.12); color: #626262; font-size: .75rem !important; line-height: 1.4; text-align: center; }
.admin-sidebar-credit strong { color: #510e8c; }

/* MEMBER WORKSPACES: Reuse the admin shell while keeping creator and brand data separate. */
.member-workspace-page .admin-sidebar-support button { padding: 0; border: 0; background: transparent; color: #8116e0; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.member-workspace-page .admin-sidebar-support button:hover { text-decoration: underline; text-underline-offset: .2em; }
.member-workspace-page .admin-account-menu button { font: inherit; font-size: .82rem; }
.member-workspace-page .member-metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: .75rem !important; margin: 0 !important; }
.member-workspace-page .member-metric-grid article { min-height: 11rem; padding: 1.2rem; border-radius: 1.25rem; }
.member-workspace-page .member-metric-grid strong { margin: 1.4rem 0 .25rem; color: #8116e0; font-size: clamp(2.2rem,3.5vw,3.6rem); line-height: 1; overflow-wrap: anywhere; }
.member-workspace-page .admin-surface p { color: #555; line-height: 1.55; }
.member-workspace-page .admin-surface .admin-table-button { margin-top: .4rem; }
.member-panel-surface { min-height: 16rem; }
.brand-creator-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: 1.65rem; margin-top: 1.5rem; }
.brand-creator-card { min-width: 0; overflow: hidden; border: 1px solid #d8cae8; border-radius: 1.875rem; background: #fefffc; box-shadow: .75rem .75rem 1.75rem #ddd3e7, -.75rem -.75rem 1.75rem #fff; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.brand-creator-card:hover { transform: translateY(-5px); box-shadow: 1rem 1.1rem 2rem #d5c6e2, -.7rem -.7rem 1.6rem #fff; }
.brand-creator-card > img, .brand-creator-card > .brand-creator-placeholder { width: 100%; height: 12.5rem; object-fit: cover; object-position: center 25%; background: #e9ddf2; }
.brand-creator-placeholder { display: grid; place-items: center; color: #8116e0; font-size: 5rem; font-weight: 800; }
.brand-creator-card .brand-creator-details { padding: 1rem 1.1rem .75rem; flex: 1; }
.brand-creator-card h3 { margin: 0 0 .65rem; color: #161616; font-size: 1.18rem; line-height: 1.2; }
.brand-creator-card .brand-creator-stat { margin: 0 0 .25rem; color: #510e8c; font-size: .88rem; font-weight: 750; }
.brand-creator-card .brand-creator-stat { display: flex; align-items: center; gap: .5rem; }
.brand-creator-card .brand-creator-stat img { display: block; width: 1.35rem; height: 1.35rem; max-width: none; object-fit: contain; background: transparent; flex: none; filter: brightness(0); }
.brand-creator-card button { border: 0; border-top: 1px solid #d8cae8; padding: .85rem; background: #d4ff3a; color: #171717; font: inherit; font-weight: 800; cursor: pointer; }
.brand-creator-card button:hover, .brand-creator-card button:focus-visible { background: #8116e0; color: white; }
.brand-creator-grid.is-request-disabled button { cursor: not-allowed; opacity: .5; }
@media (prefers-reduced-motion: reduce) { .brand-creator-card { transition: none; } .brand-creator-card:hover { transform: none; } }
[data-brand-request-open]:disabled { cursor: not-allowed; opacity: .5; }
.brand-campaign-modal { width: min(70rem,calc(100vw - 2rem)); max-height: min(92svh,58rem); }
.brand-request-dialog { width: 100%; max-height: min(92svh,58rem); overflow-y: auto; }
.brand-request-form { display: grid; gap: 1rem; }
.brand-campaign-modal .snappi-modal-heading h2 { margin: 0 0 .4rem; font-size: clamp(1.7rem,3vw,2.4rem); line-height: 1.1; }
.brand-campaign-modal .snappi-modal-heading p { max-width: none; margin-bottom: 1.25rem; font-size: 1rem; line-height: 1.5; }
.brand-request-form { grid-template-columns: minmax(0,1fr); align-items: start; gap: clamp(1rem,2vw,1.6rem); }
.brand-request-form [hidden] { display: none !important; }
.brand-request-step-count { margin: 0 0 .55rem !important; color: #d4ff3a !important; font-size: .8rem !important; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.brand-request-main,.brand-request-creator-choice { display: grid; gap: 1rem; min-width: 0; }
.brand-request-actions { grid-column: 1/-1; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.brand-request-actions [data-brand-request-status] { margin: 0; line-height: 1.45; }
.brand-request-form label { display: grid; gap: .4rem; font-weight: 700; }
.brand-campaign-modal .brand-request-form :is(label,legend) { font-size: 1rem; line-height: 1.4; }
.brand-campaign-modal .brand-request-form fieldset p { font-size: .95rem; line-height: 1.45; }
.brand-request-form input:not([type="checkbox"]):not([type="radio"]), .brand-request-form textarea { width: 100%; padding: .85rem; border: 1px solid #8a8a8a; border-radius: .7rem; background: #fefffc; color: #111; font: inherit; }
.brand-request-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.brand-request-form fieldset { border: 1px solid #bbb; border-radius: .8rem; padding: 1rem; }
.brand-request-form fieldset p { margin: .3rem 0 .8rem; }
.brand-request-form fieldset > label { display: flex; align-items: center; gap: .7rem; padding: .35rem 0; }
.brand-request-form input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: #8116e0; }
.brand-request-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .85rem; max-height: min(49svh, 30rem); overflow-y: auto; padding: .35rem .45rem .65rem .15rem; }
.brand-request-options .brand-request-creator-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 0; border: 2px solid #d8cae8; border-radius: 1rem; background: #fefffc; color: #111; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.brand-request-options .brand-request-creator-card:hover { transform: translateY(-2px); border-color: #8116e0; box-shadow: 0 .65rem 1.5rem rgba(81,14,140,.14); }
.brand-request-creator-card > :is(img,.brand-creator-placeholder) { display: grid; place-items: center; width: 100%; height: 10.5rem; object-fit: cover; object-position: center 25%; background: #e9ddf2; }
.brand-request-creator-card .brand-creator-placeholder { color: #8116e0; font-size: 4rem; font-weight: 800; }
.brand-request-creator-card .brand-creator-details { display: grid; gap: .25rem; width: 100%; padding: .8rem .9rem .55rem; }
.brand-request-creator-card .brand-creator-details > strong { font-size: 1rem; line-height: 1.25; }
.brand-request-creator-card .brand-creator-stat { display: flex; align-items: center; gap: .45rem; color: #510e8c; font-size: .82rem; font-weight: 800; }
.brand-request-creator-card .brand-creator-stat img { width: 1.15rem; height: 1.15rem; object-fit: contain; filter: brightness(0); }
.brand-request-creator-select { display: flex; align-items: center; gap: .55rem; width: 100%; margin-top: auto; padding: .7rem .9rem; border-top: 1px solid #e3d9eb; background: #f8f4fb; color: #510e8c; font-size: .88rem; font-weight: 800; }
.brand-request-options input { accent-color: #8116e0; }
.admin-contact-history { white-space: pre-line; }
@media (max-width: 48rem) { .brand-request-form { grid-template-columns: 1fr; } .brand-request-actions { grid-column: 1; } }
@media (max-width: 36rem) { .brand-request-row { grid-template-columns: 1fr; } }
.member-panel-surface .member-record-list { margin-top: 1rem; }
.member-workspace-page .member-record-list article { border-radius: .9rem; }
.member-workspace-page .member-record-list article p { color: #454545; }
.member-workspace-page .member-record-list article small,.member-workspace-page .member-record-list article span { color: #5f5f5f; }
.member-settings-surface { min-height: 0; max-width: 38rem; }
.brand-settings-surface { width: 100%; max-width: none; min-height: 16rem; }
.brand-settings-panel[hidden] { display: none; }
.brand-settings-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; max-width: 58rem; }
.brand-settings-fields label { min-width: 0; }
.brand-settings-form .creator-settings-actions { margin-top: .5rem; }
@media (max-width: 40rem) { .brand-settings-fields { grid-template-columns: 1fr; } }
.member-workspace-page .member-settings-form input { background: #fff; }
.creator-settings-surface { width: 100%; max-width: none; min-height: 16rem; }
.creator-required-note { color: #510e8c; font-size: .85rem; font-weight: 800; letter-spacing: 0; white-space: nowrap; }
.creator-settings-tabs { display: flex; gap: .45rem; max-width: 100%; overflow-x: auto; padding: 0 0 1rem; margin-bottom: 1.3rem; border-bottom: 1px solid rgba(17,17,17,.14); scrollbar-width: thin; }
.creator-settings-tabs button { flex: 0 0 auto; padding: .75rem 1rem; border: 1px solid rgba(17,17,17,.16); border-radius: 999px; background: #fff; color: #111; font: 800 var(--workspace-subtab-size)/1.2 var(--font-body); cursor: pointer; }
.creator-settings-tabs button[aria-selected="true"] { background: #8116e0; color: #fff; border-color: #8116e0; }
.creator-settings-tabs button:focus-visible { outline: 3px solid #d4ff3a; outline-offset: 2px; }
.creator-settings-section[hidden],[data-creator-settings-panel="photo"][hidden] { display: none; }
.creator-photo-setting { display: grid; grid-template-columns: 10rem minmax(0,1fr); align-items: center; gap: clamp(1rem,3vw,2rem); padding-bottom: 1.5rem; border-bottom: 1px solid rgba(17,17,17,.14); }
.creator-photo-preview { width: 10rem; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(17,17,17,.16); border-radius: 1.4rem; background: #f1f1ef; font-size: 2.5rem; }
.creator-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.creator-photo-controls { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.creator-photo-controls h2,.creator-settings-section h2 { width: 100%; margin: 0; color: #111; font-size: var(--workspace-section-title-size); line-height: 1.22; }
.creator-photo-controls p { width: 100%; margin: 0; color: #454545; }
.creator-photo-file { display: inline-flex; flex-direction: column; gap: .35rem; min-width: 0; }
.creator-photo-file span { font-weight: 800; }
.creator-photo-file input { width: min(100%,22rem); font: inherit; }
.creator-photo-controls [data-creator-photo-status] { flex-basis: 100%; min-height: 1.5rem; }
.creator-settings-form { gap: 1.6rem; padding-top: 1.5rem; }
.creator-settings-section { display: grid; gap: .85rem; min-width: 0; }
.creator-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .9rem 1rem; align-items: start; }
.creator-settings-grid label { min-width: 0; }
.creator-settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(17,17,17,.14); }
.creator-settings-actions[hidden] { display: none; }
.creator-settings-actions p { margin: 0; }
.creator-crop-dialog { width: min(62rem,calc(100vw - 2rem)); max-width: none; }
.creator-crop-dialog .snappi-modal-panel { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(16rem,.9fr); grid-template-rows: auto auto 1fr auto; column-gap: clamp(1.5rem,4vw,3rem); align-items: start; width: 100%; max-width: none; }
.creator-crop-dialog .snappi-modal-panel > h2,.creator-crop-dialog .snappi-modal-panel > p,.creator-crop-dialog .creator-crop-zoom,.creator-crop-dialog .creator-crop-actions { grid-column: 2; }
.creator-crop-dialog .snappi-modal-panel > h2 { margin: .5rem 2.5rem .5rem 0; color: #fefffc; font-size: clamp(1.7rem,3vw,2.3rem); line-height: 1.1; }
.creator-crop-dialog .snappi-modal-panel > p { margin: 0 0 1.5rem; }
.creator-crop-dialog canvas { display: block; grid-column: 1; grid-row: 1 / 5; width: 100%; max-width: 29rem; height: auto; margin: 0; border-radius: 1rem; touch-action: none; cursor: grab; }
.creator-crop-dialog canvas:active { cursor: grabbing; }
.creator-crop-zoom { display: grid; gap: .4rem; font-weight: 800; }
.creator-crop-zoom input { width: 100%; accent-color: #8116e0; }
.creator-crop-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.creator-crop-actions .button:not(.button-lime) { background: #fefffc; color: #510e8c; }
.creator-crop-actions .button-lime { background: #d4ff3a; color: #111; }
@media (max-width: 720px) {
  .creator-crop-dialog .snappi-modal-panel { display: block; }
  .creator-crop-dialog canvas { width: min(100%,23rem); margin: 1rem auto; }
}
@media (max-width: 720px) { .creator-settings-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .creator-photo-setting { grid-template-columns: 1fr; } .creator-photo-preview { width: 8rem; } }
.member-support-email { display: inline-block; margin-top: 1rem; color: #510e8c; font-weight: 800; }
.member-access-message { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid rgba(129,22,224,.18); border-radius: .9rem; background: rgba(129,22,224,.05); color: #510e8c; }
.admin-ban-section { border-color: rgba(129,22,224,.2) !important; background: rgba(129,22,224,.04); }
.admin-ban-checkbox { display: flex; align-items: center; gap: .75rem; color: #a21d14; font-weight: 900; }
.admin-ban-checkbox input { width: 1.25rem !important; height: 1.25rem; accent-color: #b42318; }
.admin-ban-review { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: .8rem; }
.admin-ban-review p { flex-basis: 100%; margin: 0; }
.admin-ban-pending { color: #a21d14; font-weight: 800; }
.admin-creator-access-dialog { width: min(34rem,calc(100% - 2rem)); }
.admin-creator-access-dialog .admin-dialog-card h2 { margin: 0; font-size: clamp(1.65rem,4vw,2.3rem) !important; line-height: 1.1; }
.admin-access-explanation { margin: 0; color: #353535; line-height: 1.55; }
.admin-access-review-reason { margin: 0; padding: .9rem 1rem; border: 1px solid rgba(129,22,224,.18); border-radius: .9rem; background: rgba(129,22,224,.05); color: #291338; overflow-wrap: anywhere; }
.admin-access-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .7rem; margin-top: .25rem; }
.admin-access-dialog-actions .button { min-height: 2.8rem; }
.admin-creator-access-dialog[data-tone="danger"] .admin-dialog-card { border: 2px solid #b42318; background: #fff9f8; }
.admin-creator-access-dialog[data-tone="danger"] :is(.kicker,h2) { color: #a21d14; }
.admin-creator-access-dialog[data-tone="danger"] .admin-access-dialog-actions .button-lime { border-color: #b42318; background: #b42318; color: #fff; }
.admin-creator-access-dialog[data-tone="danger"] .admin-access-dialog-actions .button-lime:hover { background: #8d1a12; }
.member-workspace-banned .admin-navigation button:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(1); }
.member-workspace-banned .admin-navigation button[data-member-tab="support"] { opacity: 1; filter: none; }
.member-ban-notice { margin-bottom: 1rem; padding: 1.25rem; border: 2px solid #b42318; border-radius: 1rem; background: #fff1ef; color: #721c17; }
.member-ban-notice strong { display: block; font-size: 1.2rem; }
.member-ban-notice p { margin: .4rem 0 0; line-height: 1.5; }
.member-workspace-page .admin-panel-heading h2 { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .member-workspace-page .member-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } }
@media (max-width: 600px) { .member-workspace-page .member-metric-grid { grid-template-columns: 1fr !important; } .member-workspace-page .admin-overview-grid { grid-template-columns: 1fr; } }
.admin-toolbar { grid-template-columns: repeat(auto-fit,minmax(10rem,1fr)); }
.admin-toolbar button { min-height: 2.8rem; padding: .75rem 1rem; border: 1px solid rgba(17,17,17,.16); border-radius: 999px; background: rgba(255,255,255,.72); color: #510e8c; font: inherit; font-weight: 800; cursor: pointer; }
.admin-toolbar button:hover { background: #d4ff3a; border-color: #8116e0; }
.career-opening-grid { display: grid; gap: 1rem; margin-top: 2rem; }
.career-empty,.career-opening-card { padding: clamp(1.5rem,4vw,3rem); border: 1px solid rgba(17,17,17,.14); border-radius: 1.5rem; background: #fefffc; }
.career-empty { text-align: center; }
.career-empty > span { display: block; margin-bottom: .75rem; font-size: 2.5rem; }
.career-empty h3,.career-opening-card h3 { margin: 0 0 .75rem; font-size: clamp(1.75rem,3vw,2.6rem); }
.career-empty a { color: #8116e0; font-weight: 800; }
.career-opening-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 1.5rem; }
.career-opening-card ul { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.career-opening-card li { padding: .45rem .8rem; border: 1px solid rgba(17,17,17,.14); border-radius: 999px; background: rgba(212,255,58,.35); font-weight: 700; }
@media (max-width: 700px) { .career-opening-card { grid-template-columns: 1fr; } .career-opening-card .button { width: 100%; } }

/* PUBLIC CAREERS PAGE: Uses the same focused navigation, spacing, typography, and motion as Snappi's other public pages. */
.careers-page { overflow-x: hidden; background: #fefffc; color: #000; }
.careers-hero { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(22rem,.72fr); align-items: center; gap: clamp(2rem,7vw,7rem); min-height: min(48rem,calc(100svh - 7.8rem)); background: #fefffc; }
.careers-hero-copy { max-width: 58rem; }
.careers-hero-copy h1 { max-width: 11ch; margin: 0 0 1.4rem; color: #000; font-size: clamp(3.6rem,6.4vw,7rem); line-height: .92; letter-spacing: -.055em; overflow-wrap: anywhere; }
.careers-hero-copy > p:not(.kicker) { max-width: 42rem; margin: 0 0 2rem; color: #5d5d5d; font-size: clamp(1.08rem,1.6vw,1.3rem); line-height: 1.6; }
.careers-hero-art { position: relative; display: grid; min-height: 34rem; place-content: center; gap: .75rem; overflow: hidden; border: 1px solid rgba(17,17,17,.14); border-radius: 2rem; background: #8116e0; color: #fefffc; isolation: isolate; }
.careers-hero-art::before,.careers-hero-art::after { position: absolute; width: 25rem; height: 25rem; border-radius: 45% 55% 65% 35%; background: #d4ff3a; content: ""; opacity: .94; filter: blur(1px); animation: career-orbit 10s ease-in-out infinite alternate; z-index: -1; }
.careers-hero-art::before { top: -13rem; right: -9rem; }
.careers-hero-art::after { bottom: -15rem; left: -9rem; animation-delay: -4s; }
.careers-hero-art span { padding: .75rem 1.25rem; border: 1px solid rgba(254,255,252,.45); border-radius: 999px; background: rgba(254,255,252,.1); font-size: clamp(1.15rem,2vw,1.75rem); font-weight: 800; backdrop-filter: blur(14px); transform: rotate(-3deg); }
.careers-hero-art span:nth-child(2) { color: #000; background: #d4ff3a; transform: translateX(2.5rem) rotate(2deg); }
.careers-hero-art span:nth-child(3) { transform: translateX(-1.5rem) rotate(-1deg); }
.careers-hero-art strong { position: absolute; right: 1.6rem; bottom: 1.1rem; color: #d4ff3a; font-size: 5rem; }
.careers-openings { min-height: 42rem; border-top: 1px solid rgba(17,17,17,.14); background: #f3f3f3; }
.careers-openings .section-heading { margin-bottom: 2.5rem; }
.careers-openings .section-heading h2 { max-width: 10ch; }
.careers-openings .career-opening-grid { margin-top: 0; }
.careers-openings .career-empty { display: grid; min-height: 18rem; place-content: center; border-color: rgba(129,22,224,.22); background: #fefffc; box-shadow: 0 1rem 3rem rgba(81,14,140,.06); }
@keyframes career-orbit { to { transform: translate(2rem,1.5rem) rotate(18deg); border-radius: 62% 38% 43% 57%; } }
@media (max-width: 980px) { .careers-hero { grid-template-columns: 1fr; min-height: auto; } .careers-hero-art { min-height: 24rem; } }
@media (max-width: 760px) { .careers-hero-copy h1 { font-size: clamp(3.1rem,15vw,5rem); } .careers-hero-art { min-height: 20rem; border-radius: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .careers-hero-art::before,.careers-hero-art::after { animation: none; } }
/* Keep the Careers hero contained when the browser shares space with a side panel. */
@media (max-width: 1180px) {
  .careers-hero { grid-template-columns: minmax(0,1fr); }
  .careers-hero-copy { max-width: 52rem; }
  .careers-hero-art { min-height: 23rem; }
}

/* MOBILE NAVIGATION: Keep the menu control visible against the white glass header. */
.site-header .menu-toggle {
  position: relative;
  z-index: 92;
  border-color: rgba(17,17,17,.2);
  background: rgba(255,255,255,.78);
  cursor: pointer;
}
.site-header .menu-toggle span {
  width: 100%;
  margin: .28rem 0;
  background: #000;
  transition: transform 180ms ease, opacity 180ms ease;
}
.site-header .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(.25rem) rotate(45deg); }
.site-header .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-.25rem) rotate(-45deg); }

@media (max-width: 1100px) {
  .site-header { grid-template-columns: minmax(0,1fr) auto !important; }
  .site-header .brand { display: inline-flex !important; align-items: center; }
  .site-header .header-actions { display: flex !important; }
  .site-header .menu-toggle { display: block !important; }
  .site-header .mobile-nav {
    inset: 4.75rem 0 auto !important;
    width: 100%;
    height: calc(100dvh - 4.75rem) !important;
    min-height: calc(100vh - 4.75rem);
    box-sizing: border-box;
    z-index: 89;
    overflow-y: auto;
    padding: clamp(2rem,7vw,4rem) clamp(1.25rem,5vw,3rem);
    background: rgba(212,255,58,.98) !important;
    color: #000 !important;
    backdrop-filter: blur(18px);
  }
  .site-header .mobile-nav:not([hidden]) { display: flex !important; }
  .site-header .mobile-nav a,
  .site-header .mobile-nav summary { color: #000 !important; }
}

/* MOBILE FOOTER: Center every content group and keep the social row balanced. */
@media (max-width: 760px) {
  html body .site-footer {
    grid-template-columns: minmax(0,1fr) !important;
    justify-items: center;
    gap: 2.4rem;
    padding: 3.5rem 1.25rem 1.75rem !important;
    text-align: center;
  }
  html body .site-footer .footer-brand,
  html body .site-footer .footer-column,
  html body .site-footer .footer-social,
  html body .site-footer .footer-bottom {
    grid-column: 1 !important;
    width: 100%;
    align-items: center;
    text-align: center;
  }
  html body .site-footer .footer-brand { display: flex; flex-direction: column; }
  html body .site-footer .footer-brand img {
    width: 13rem;
    margin-inline: auto;
    object-position: center;
  }
  html body .site-footer .footer-brand p {
    max-width: 29rem;
    margin: .5rem auto 0;
    text-align: center;
  }
  html body .site-footer .footer-column { display: flex; flex-direction: column; }
  html body .site-footer .footer-column a { width: fit-content; text-align: center; }
  html body .site-footer .footer-social > div { justify-content: center; }
  html body .site-footer .footer-bottom { margin-top: .25rem; }
}


/* FINAL RESPONSIVE OVERRIDES: These rules intentionally finish the shared cascade. */
@media (max-width: 1100px) {
  .site-header .mobile-nav { padding: 1.35rem clamp(1.15rem,5vw,2rem) 1.5rem; background: #fefffc !important; }
  .site-header .mobile-nav:not([hidden]) { display: grid !important; }
  .mobile-nav-footer img { width: 1rem; height: 1rem; object-fit: contain; filter: brightness(0) invert(1); }
}
.admin-dialog.admin-wide-dialog,.admin-dialog.admin-detail-dialog { width: min(78rem,calc(100vw - 2rem)); max-width: none; overflow-x: hidden; }
.admin-wide-dialog .admin-dialog-card,.admin-detail-dialog .admin-dialog-card { width: 100%; max-height: min(90vh,58rem); overflow-x: hidden; overflow-y: auto; box-sizing: border-box; }

/* DIRECTORY PROFILE WINDOW: Match request-detail cards and keep edits in readable groups. */
.admin-directory-dialog { width: min(68rem,calc(100vw - 2rem)) !important; }
.admin-directory-dialog .admin-dialog-card { gap: 1.2rem; padding: clamp(1.25rem,3vw,2.2rem); }
.admin-directory-dialog .admin-dialog-card h2 { max-width: 90%; font-size: clamp(1.8rem,3vw,2.7rem) !important; overflow-wrap: anywhere; }
.admin-directory-dialog .admin-detail-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.admin-directory-section { min-width: 0; margin: 0; padding: 1rem; border: 1px solid rgba(129,22,224,.18); border-radius: 1rem; background: rgba(129,22,224,.035); }
.admin-directory-section[hidden] { display: none; }
.admin-directory-section legend { padding: 0 .4rem; color: #510e8c; font-size: .85rem; font-weight: 900; }
.admin-directory-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .9rem; }
.admin-directory-fields label { min-width: 0; }
.admin-directory-fields textarea { width: 100%; min-height: 6rem; padding: .8rem; border: 1px solid rgba(17,17,17,.18); border-radius: .8rem; background: #fff; color: #111; font: inherit; resize: vertical; }
.admin-roster-fields { display: grid; grid-column: 1 / -1; gap: .9rem; padding: 1rem; border: 1px solid rgba(129,22,224,.24); border-radius: 1rem; background: #fefffc; }
.admin-roster-fields h3 { margin: 0; color: #510e8c; font-size: 1.2rem !important; }
.admin-roster-fields p { margin: 0; color: #363039; }
.admin-creator-photo-card { display: grid; align-content: start; gap: .65rem; min-width: 0; padding: 1rem; border: 1px solid rgba(17,17,17,.14); border-radius: .9rem; background: #fff; }
.admin-creator-photo-card h4 { margin: 0; color: #111; font-size: 1rem; }
.admin-creator-photo-card p { font-size: .9rem; line-height: 1.45; }
.admin-creator-photo-card img { display: block; width: 8rem; height: 9rem; border-radius: .8rem; object-fit: cover; object-position: center 30%; }
.admin-creator-photo-card label { min-width: 0; }
.admin-roster-checkbox { display: flex !important; align-items: center; gap: .7rem; font-weight: 800 !important; }
.admin-roster-checkbox input { width: 1.3rem !important; height: 1.3rem; flex: none; padding: 0 !important; accent-color: #8116e0; }
.admin-roster-checkbox input:disabled + span { color: #777; }
.admin-directory-dialog .admin-dialog-card > .button { justify-self: start; min-width: 12rem; }
.admin-handoff-check { display: flex !important; align-items: center; gap: .75rem; padding: .85rem 1rem; border: 1px solid rgba(129,22,224,.18); border-radius: 1rem; background: rgba(129,22,224,.04); }
.admin-handoff-check input { width: 1.2rem !important; height: 1.2rem; flex: none; padding: 0 !important; accent-color: #8116e0; }
.member-record-list .member-campaign-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.3rem; align-items: start; }
.member-campaign-main { min-width: 0; }
.member-campaign-main > p { margin: .4rem 0; }
.member-campaign-timeline { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; padding: 0; list-style: none; }
.member-campaign-timeline li { padding: .35rem .6rem; border: 1px solid rgba(17,17,17,.14); border-radius: 999px; color: #666; font-size: .72rem; font-weight: 800; text-transform: capitalize; }
.member-campaign-timeline li.is-complete { border-color: #8116e0; background: rgba(129,22,224,.09); color: #510e8c; }
.member-campaign-next { padding: .75rem; border-left: 3px solid #8116e0; background: rgba(129,22,224,.045); }
.member-campaign-versions { margin-top: .9rem; padding: .8rem; border: 1px solid rgba(17,17,17,.12); border-radius: .9rem; background: #fefffc; }
.member-campaign-versions strong { color: #510e8c; }
.member-campaign-versions p { margin: .4rem 0 0; }
.member-record-actions button[data-creator-submit] { padding: .55rem .8rem; border: 1px solid #8116e0; border-radius: 999px; background: #d4ff3a; color: #510e8c; font: 800 .78rem/1.2 var(--font-body); cursor: pointer; }
.member-record-actions button[data-creator-submit]:hover { background: #8116e0; color: #fefffc; }
[data-creator-file-field][hidden] { display: none !important; }
@media (max-width: 900px) { .admin-directory-dialog .admin-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) {
  .admin-directory-dialog .admin-detail-grid,.admin-directory-fields { grid-template-columns: 1fr; }
  .admin-directory-dialog .admin-dialog-card > .button { width: 100%; }
  .member-record-list .member-campaign-card { grid-template-columns: 1fr; }
  .member-campaign-card .member-record-actions { min-width: 0; align-items: flex-start; }
}

/* Campaign review actions share the workspace button language. */
.member-record-actions button { min-height: 2.6rem; padding: .62rem 1rem; border: 1px solid #8116e0; border-radius: 999px; background: #fefffc; color: #510e8c; font: 800 .86rem/1.2 var(--font-body); cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; }
.member-record-actions button:hover { background: #8116e0; color: #fefffc; transform: translateY(-1px); }
.member-record-actions button:focus-visible { outline: 3px solid #d4ff3a; outline-offset: 2px; }
.member-record-actions button:disabled { opacity: .55; cursor: wait; }
.member-record-actions button[data-review-approve], .member-record-actions button[data-review-share], .member-record-actions button[data-admin-assign-creator] { background: #d4ff3a; color: #171717; }
.member-record-actions button[data-review-approve]:hover, .member-record-actions button[data-review-share]:hover, .member-record-actions button[data-admin-assign-creator]:hover { background: #8116e0; color: #fefffc; }
.member-record-actions button[data-review-decline], .member-record-actions button[data-review-reject] { border-color: #b42318; color: #8f1d15; }
.member-record-actions button[data-review-decline]:hover, .member-record-actions button[data-review-reject]:hover { background: #b42318; color: #fefffc; }
@media (prefers-reduced-motion: reduce) { .member-record-actions button { transition: none; } .member-record-actions button:hover { transform: none; } }

.member-campaign-row { align-items: center; }
.member-campaign-row > div { display: grid; gap: .25rem; min-width: 0; }
.member-campaign-row b { color: #111; }
.member-campaign-dialog { width: min(44rem, calc(100% - 2rem)); }
.member-campaign-detail { display: grid; gap: 1rem; color: #fefffc; }
.member-campaign-detail :is(b,strong,p,small,span) { color: inherit; }
.member-campaign-detail .member-record-actions { align-items: stretch; }
.admin-campaign-details { display: grid; gap: .8rem; }
.admin-campaign-details p { margin: 0; line-height: 1.5; }
.snappi-ask-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .7rem; }
.snappi-ask-actions button { min-height: 2.75rem; padding: .65rem 1.1rem; border: 1px solid #fefffc; border-radius: 999px; cursor: pointer; }
.snappi-ask-actions button[type=button] { background: transparent; color: #fefffc; }
.snappi-modal-form > textarea.snappi-input { width: 100%; min-height: 7rem; padding: .9rem 1rem; border: 1px solid rgba(254,255,252,.6); border-radius: .85rem; background: rgba(255,255,255,.15); color: #fefffc; font: inherit; resize: vertical; }
.snappi-modal-form > textarea.snappi-input:focus-visible { outline: 3px solid #d4ff3a; outline-offset: 2px; }
.member-campaign-detail a { color: #d4ff3a; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.member-campaign-detail .member-campaign-versions { border-color: rgba(254,255,252,.35); }
.member-campaign-detail .member-campaign-timeline li { color: #fefffc; }
/* Campaign detail dialogs: one reading column, aligned metadata, separate actions. */
.member-campaign-dialog { width: min(48rem, calc(100% - 2rem)); max-height: min(90svh, 54rem); border: 2px solid #8116e0; border-radius: 1.5rem; background: #090909; color: #fefffc; }
.member-campaign-dialog .snappi-modal-panel { max-height: min(90svh, 54rem); padding: clamp(1.25rem, 3vw, 2.25rem); border: 0; background: #090909; box-shadow: none; }
.member-campaign-dialog .snappi-modal-heading { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(129,22,224,.65); }
.member-campaign-dialog .snappi-modal-title { max-width: 90%; overflow-wrap: anywhere; }
.member-campaign-dialog .member-campaign-detail { gap: 1.25rem; color: #fefffc; }
.member-campaign-dialog .member-campaign-main { display: grid; gap: .85rem; min-width: 0; }
.member-campaign-dialog .member-campaign-main > small { justify-self: start; padding: .35rem .7rem; border: 1px solid #8116e0; border-radius: 999px; color: #d4ff3a; font-weight: 800; }
.member-campaign-dialog .member-campaign-main > b { font-size: clamp(1.3rem, 2.5vw, 1.8rem); line-height: 1.2; }
.member-campaign-dialog .member-campaign-main > p { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.member-campaign-dialog .member-campaign-next,.member-campaign-dialog .member-campaign-versions { padding: 1rem; border: 1px solid rgba(129,22,224,.65); border-radius: 1rem; background: #18121d; }
.member-campaign-dialog .member-record-actions { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .75rem; padding-top: 1.25rem; border-top: 1px solid rgba(129,22,224,.65); }
.member-campaign-dialog .member-record-actions > :is(a,button) { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1rem; border: 1px solid #8116e0; border-radius: 999px; background: #d4ff3a; color: #111; font: 800 .85rem/1.2 var(--font-body); text-decoration: none; }
.member-campaign-dialog .member-record-actions > :is(a,button):hover { background: #8116e0; color: #fefffc; }
.member-campaign-dialog .member-record-actions > span { flex-basis: 100%; color: #d6c9dd; }
.admin-dialog[data-admin-dialog="campaign-detail"],.admin-dialog[data-campaign-review-dialog] { width: min(58rem,calc(100% - 2rem)); max-width: none; }
.admin-dialog[data-admin-dialog="campaign-detail"] .admin-dialog-card,.admin-dialog[data-campaign-review-dialog] .admin-dialog-card { max-height: min(90svh,58rem); overflow-y: auto; padding: clamp(1.25rem,3vw,2.25rem); border: 2px solid #8116e0; }
.admin-dialog[data-admin-dialog="campaign-detail"] h2,.admin-dialog[data-campaign-review-dialog] h2 { max-width: 90%; margin: 0; font-size: clamp(1.6rem,3vw,2.35rem) !important; line-height: 1.15; }
.admin-campaign-details,.admin-dialog[data-campaign-review-dialog] .member-campaign-detail { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; color: #111; }
.admin-campaign-details > p,.admin-dialog[data-campaign-review-dialog] .member-campaign-detail > p { min-width: 0; margin: 0; padding: .85rem 1rem; border: 1px solid rgba(129,22,224,.18); border-radius: .85rem; background: #f8f4fb; line-height: 1.5; overflow-wrap: anywhere; }
.admin-campaign-details > p:nth-child(3),.admin-campaign-details > p:nth-child(7),.admin-campaign-details > .admin-campaign-notes,.admin-dialog[data-campaign-review-dialog] .member-campaign-detail > p:nth-child(2),.admin-dialog[data-campaign-review-dialog] .admin-campaign-notes { grid-column: 1/-1; }
.admin-campaign-notes { min-width: 0; padding: 1rem; border: 1px solid rgba(129,22,224,.35); border-radius: 1rem; background: #f8f4fb; }
.admin-campaign-notes h3 { margin: 0 0 .55rem; color: #510e8c; font-size: 1rem; }
.admin-campaign-notes p { margin: 0; color: #171717; line-height: 1.6; overflow-wrap: anywhere; }
.admin-campaign-details > .admin-row-actions,.admin-dialog[data-campaign-review-dialog] .member-record-actions { grid-column: 1/-1; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: .65rem; margin-top: .35rem; padding-top: 1rem; border-top: 1px solid rgba(129,22,224,.3); }
.admin-campaign-details .admin-row-action { width: auto; min-width: 11rem; }
@media (max-width: 42rem) { .admin-campaign-details,.admin-dialog[data-campaign-review-dialog] .member-campaign-detail { grid-template-columns: 1fr; } .admin-campaign-details > *,.admin-dialog[data-campaign-review-dialog] .member-campaign-detail > * { grid-column: 1/-1; } .member-campaign-dialog .member-record-actions > :is(a,button) { width: 100%; } }
/* Campaign progress remains visible in compact rows across all workspaces. */
.campaign-row-progress { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: .75rem; row-gap: .35rem; width: min(100%,31rem); margin-top: .5rem; }
.campaign-row-progress-copy { grid-column: 1/-1; display: flex !important; justify-content: space-between; flex-wrap: wrap; gap: .2rem .7rem; color: #161616 !important; font-size: .78rem !important; line-height: 1.3; text-transform: none !important; }
.campaign-row-progress-copy strong { color: #510e8c !important; font-weight: 900; }
.campaign-row-progress-copy span { color: #3a3a3a !important; }
.campaign-row-progress progress { display: block; width: 100%; height: .48rem; border: 0; border-radius: 999px; background: #e8dcef; overflow: hidden; }
.campaign-row-progress progress::-webkit-progress-bar { border-radius: 999px; background: #e8dcef; }
.campaign-row-progress progress::-webkit-progress-value { border-radius: 999px; background: #8116e0; }
.campaign-row-progress progress::-moz-progress-bar { border-radius: 999px; background: #8116e0; }
.campaign-row-progress-step { color: #510e8c !important; font-size: .72rem !important; font-variant-numeric: tabular-nums; font-weight: 800; }
.member-campaign-row > div { flex: 1; }
.admin-table-wrap td .campaign-row-progress { min-width: min(17rem,100%); }
@media (max-width: 38rem) { .campaign-row-progress-copy { display: grid !important; justify-content: start; } }

/* Campaign creator selection: compact native controls and a clear selected state. */
.brand-request-form input[type="checkbox"] { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: 0; padding: 0; border: 0; cursor: pointer; accent-color: #8116e0; }
.brand-request-creator-choice fieldset > label { display: flex; align-items: center; gap: .7rem; min-height: 2.7rem; cursor: pointer; }
.brand-request-options label { display: flex; align-items: center; gap: .7rem; min-height: 3rem; cursor: pointer; background: #fefffc; color: #111; }
.brand-request-options .brand-request-creator-card:has(input:checked) { border-color: #8116e0; background: #f3e8fc; box-shadow: inset 0 0 0 1px #8116e0; }
.brand-request-options label:focus-within { outline: 3px solid #8116e0; outline-offset: 2px; }
[data-brand-selection-summary] { margin: .65rem 0 0; color: #fefffc; font-size: .9rem; font-weight: 800; }

/* Brand and Creator campaign details share the same light reading surface. */
.member-workspace-page .member-campaign-dialog { background: #fefffc; color: #111; }
.member-workspace-page .member-campaign-dialog .snappi-modal-panel { background: #fefffc; color: #111; }
.member-workspace-page .member-campaign-dialog .snappi-modal-title { color: #8116e0 !important; }
.member-workspace-page .member-campaign-dialog .snappi-modal-title::before,
.member-workspace-page .member-campaign-dialog .snappi-modal-title::after { background: #8116e0; }
.member-workspace-page .member-campaign-dialog .member-campaign-detail { color: #111; }
.member-workspace-page .member-campaign-dialog .member-campaign-main > small { color: #510e8c; background: #f3e8fc; }
.member-workspace-page .member-campaign-dialog .member-campaign-next,
.member-workspace-page .member-campaign-dialog .member-campaign-versions { background: #f8f4fb; color: #111; }
.member-workspace-page .member-campaign-dialog .member-campaign-timeline li { color: #454545; }
.member-workspace-page .member-campaign-dialog .member-campaign-timeline li.is-complete { color: #510e8c; }
.member-workspace-page .member-campaign-dialog .member-record-actions > span { color: #454545; }