/* Snackpass marketing preview — Brand OS compiled stylesheet.
   Tokens come from the canonical files in /creators/tokens/ (colors, type,
   spacing, effects); this file carries only the marketing component styles.
   Bricolage is loaded here as the Google variable font — a different build
   than the self-hosted TTFs in tokens/fonts.css, kept until the pipelines
   are unified. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap");
@import "/creators/tokens/colors.css";
@import "/creators/tokens/typography.css";
@import "/creators/tokens/spacing.css";
@import "/creators/tokens/effects.css";

/* ---------- base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-text);
  color: var(--text-body);
  background: var(--sp-white);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* clip (not hidden) prevents horizontal scroll from off-canvas marquees and the
     hidden nav dropdown without establishing a scroll container (keeps sticky nav). */
  overflow-x: clip;
  /* Brand default: everything lowercase. Elements that should stay ALL CAPS
     (eyebrows, labels, avatar monograms) set their own text-transform below. */
  text-transform: lowercase;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* keep avatar monograms (NH, SW…) as uppercase initials */
.avatar { text-transform: uppercase; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: var(--track-display); line-height: 1.04; color: var(--text-strong); text-wrap: balance; }
a { color: inherit; text-decoration: none; }

/* Keyboard focus: visible brand ring on every interactive element. Mouse users
   (:focus without -visible) are unaffected. */
:focus-visible { outline: 2px solid var(--sp-blue); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 3px; }
a:focus-visible, .nav-burger:focus-visible { outline-offset: 4px; }
img { display: block; max-width: 100%; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--sp-blue); }
.muted { color: var(--text-muted); }
.section { padding: var(--space-9) 0; }
.center { text-align: center; }

/* ---------- buttons ---------- */
/* Button metrics follow the creators pages (source of truth, 2026-07): 12/22 @15px. */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-text); font-weight: 600; font-size: 15px; padding: 12px 22px; border-radius: var(--radius-pill); border: none; cursor: pointer; transition: transform var(--ease-spring) .2s, box-shadow .2s, background .2s; }
.btn-primary { background: var(--gradient-product); color: #fff; box-shadow: var(--shadow-blue-sm); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,153,255,.4); }
.btn-ghost { background: var(--sp-white); color: var(--sp-navy); border: 1.5px solid var(--sp-line); box-shadow: var(--shadow-sm); padding: 11px 20px; }
.btn-ghost:hover { border-color: var(--sp-blue-100); transform: translateY(-2px); }
.btn-white { background: #fff; color: var(--sp-blue); box-shadow: var(--shadow-lg); }
.btn-white:hover { transform: translateY(-2px); }
.btn-lg { font-size: 17px; padding: 16px 30px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82); backdrop-filter: blur(16px); border-bottom: 1px solid var(--sp-line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-logo img { height: 26px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a.nav-link { font-weight: 500; font-size: 14px; color: var(--sp-navy); padding: 7px 12px; border-radius: var(--radius-pill); transition: background .15s, color .15s; }
.nav-links a.nav-link:hover { background: var(--sp-mist); color: var(--sp-blue); }
.nav-cta { display: flex; align-items: center; gap: 8px; }

/* hamburger menu */
.nav-menu { position: relative; display: inline-flex; align-items: center; margin-right: 4px; }
.nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4.5px; width: 42px; height: 38px; background: transparent; border: none; cursor: pointer; border-radius: 11px; transition: background .15s; }
.nav-burger:hover { background: var(--sp-mist); }
.nav-burger span { display: block; height: 2px; width: 20px; margin: 0 auto; background: var(--sp-navy); border-radius: 2px; transition: transform .22s var(--ease-out), opacity .18s; }
.nav-menu:hover .nav-burger span:nth-child(1), .nav-menu:focus-within .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-menu:hover .nav-burger span:nth-child(2), .nav-menu:focus-within .nav-burger span:nth-child(2) { opacity: 0; }
.nav-menu:hover .nav-burger span:nth-child(3), .nav-menu:focus-within .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-burger-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .18s var(--ease-out); z-index: 60; }
.nav-burger-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } /* hover bridge */
.nav-menu:hover .nav-burger-menu, .nav-menu:focus-within .nav-burger-menu { opacity: 1; visibility: visible; transform: none; }
.nav-burger-menu a { display: block; padding: 11px 13px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: var(--sp-navy); transition: background .15s, color .15s; }
.nav-burger-menu a:hover { background: var(--sp-mist); color: var(--sp-blue); }
.nav-dd { position: relative; }
.nav-dd-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); width: 640px; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s var(--ease-out); }
.nav-dd:hover .nav-dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dd-col h5 { font-family: var(--font-text); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-slate); margin-bottom: 8px; padding: 0 10px; }
.dd-item { display: block; padding: 9px 10px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--sp-navy); }
.dd-item:hover { background: var(--sp-mist); color: var(--sp-blue); }

/* ---------- hero ---------- */
.hero { background: var(--gradient-aurora); padding: 88px 0 96px; position: relative; overflow: hidden; }
.hero h1 { font-size: clamp(44px, 6.84vw, 88px); font-weight: 700; max-width: none; margin: 0 auto 24px; text-transform: lowercase; color: var(--sp-navy); }
.hero h1 .hl { color: var(--sp-blue); position: relative; white-space: nowrap; }
.hero h1 .hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .1em; background: var(--sp-blue); opacity: .4; border-radius: 999px; }
.hero .sub { font-size: 20px; color: var(--text-muted); max-width: 46ch; margin: 0 auto 32px; text-transform: lowercase; text-wrap: pretty; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-cta .btn { text-transform: lowercase; font-size: 15px; padding: 12px 24px; }

/* ---------- trust / stats ---------- */
.stat-row { display: flex; gap: 56px; justify-content: center; flex-wrap: wrap; margin-top: 56px; }

/* unified hero trust row */
.trust-row { display: inline-flex; align-items: center; gap: 26px; margin-top: 38px; padding: 0; background: none; border: none; box-shadow: none; backdrop-filter: none;
  /* soft shadow keeps white legible across the light-to-blue hero gradient */
  text-shadow: 0 1px 3px rgba(10,37,64,.28); }
.trust-item { text-align: center; }
.trust-num { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: var(--track-display); color: #fff; line-height: 1; }
.trust-num .star { color: #FFC93C; }
.trust-lbl { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.94); text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
.trust-div { width: 1px; height: 26px; background: rgba(255,255,255,.45); }
.stat { text-align: center; }
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: 46px; letter-spacing: var(--track-display); background: var(--gradient-product); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat .lbl { font-size: 14px; font-weight: 600; color: var(--sp-slate); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.rating-badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--radius-pill); padding: 8px 16px; box-shadow: var(--shadow-sm); font-weight: 600; font-size: 14px; }
.stars { color: #FFB020; letter-spacing: 2px; }

/* ---------- cards ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
.card { background: #fff; border: 1px solid var(--sp-line); border-radius: var(--radius-lg); padding: 26px; transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sp-blue-100); }
.cc-img { height: 150px; border-radius: var(--radius-md); background: var(--gradient-aurora); margin-bottom: 18px; display: flex; align-items: flex-end; padding: 14px; }
.pill { display: inline-block; background: rgba(255,255,255,.85); backdrop-filter: blur(6px); border-radius: var(--radius-pill); padding: 5px 12px; font-size: 12px; font-weight: 700; color: var(--sp-blue); }
.case-card h3 { font-size: 20px; margin-bottom: 8px; }
.case-card .quote { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }
.case-card .by { font-size: 13px; font-weight: 600; }
.case-card .since { font-size: 12px; color: var(--sp-slate); }

/* redesigned case-study testimonial cards (quote-forward, owner profile) */
.testi-card { position: relative; display: flex; flex-direction: column; padding: 28px 26px; }
.tc-since { position: absolute; top: 22px; right: 24px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sp-blue); background: var(--sp-blue-050); padding: 4px 10px; border-radius: var(--radius-pill); }
.tc-stars { color: #FFB020; font-size: 13px; letter-spacing: 1.5px; margin-bottom: 14px; }
.testi-card blockquote { font-family: var(--font-display); font-size: 18px; line-height: 1.4; letter-spacing: -.01em; color: var(--sp-navy); margin: 0 0 22px; flex: 1; }
.tc-owner { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--sp-line); }
.tc-avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; overflow: hidden; background: var(--gradient-product); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; text-transform: uppercase; box-shadow: var(--shadow-blue-sm); }
.tc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tc-name { display: block; font-weight: 700; font-size: 14px; color: var(--sp-navy); line-height: 1.3; }
.tc-role { display: block; font-size: 13px; color: var(--sp-slate); }

.review-card { background: #fff; border: 1px solid var(--sp-line); border-radius: var(--radius-md); padding: 24px; break-inside: avoid; margin-bottom: 20px; transition: border-color .2s, box-shadow .2s; }
.review-card:hover { border-color: var(--sp-blue-100); box-shadow: var(--shadow-sm); }
.review-card .stars { font-size: 13px; letter-spacing: 1px; margin-bottom: 12px; }
.review-card p { font-size: 15px; line-height: 1.55; color: var(--text-body); margin-bottom: 18px; }
.review-card .rhead { display: flex; align-items: center; gap: 11px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--sp-blue-050); color: var(--sp-blue); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.review-card .who { font-size: 13px; font-weight: 600; color: var(--sp-navy); line-height: 1.3; }
.review-card .where { display: block; color: var(--sp-slate); font-weight: 400; font-size: 12px; }
.masonry { display: flex; gap: 20px; align-items: flex-start; }
.masonry-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.feature-card { background: #fff; border: 1px solid var(--sp-line); border-radius: var(--radius-md); padding: 26px 24px; transition: border-color .2s var(--ease-out), box-shadow .2s, transform .2s; }
.feature-card:hover { border-color: var(--sp-blue-100); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.feature-card .ico { width: 46px; height: 46px; border-radius: 13px; background: var(--sp-blue-050); display: flex; align-items: center; justify-content: center; color: var(--sp-blue); margin-bottom: 16px; }
.feature-card .ico svg { width: 23px; height: 23px; }
.feature-card h4 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.feature-card p { font-size: 14px; color: var(--text-muted); line-height: 1.55; }

.cat-head { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.cat-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sp-blue); }
.cat-head h3 { font-size: 15px; font-weight: 700; font-family: var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--sp-slate); }

/* ---------- testimonial ---------- */
.tcard { background: #fff; border: 1px solid var(--sp-line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); }
.tcard .q { font-family: var(--font-display); font-size: 18px; line-height: 1.4; color: var(--text-body); margin-bottom: 18px; }
.tcard .who { font-weight: 700; font-size: 14px; }
.tcard .role { font-size: 13px; color: var(--sp-slate); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--gradient-product); border-radius: var(--radius-xl); padding: 64px; text-align: center; color: #fff; box-shadow: var(--shadow-blue); position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; font-size: clamp(32px,4vw,52px); font-weight: 800; margin-bottom: 14px; }
.cta-band p { color: rgba(255,255,255,.9); font-size: 19px; margin-bottom: 28px; }

/* ---------- section heads ---------- */
.shead { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.shead h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; line-height: 1.08; margin: 12px 0 14px; }
.shead p { font-size: 18px; color: var(--text-muted); max-width: 46ch; margin-left: auto; margin-right: auto; }

/* ---------- footer ---------- */
.footer { background: var(--sp-navy); color: #fff; padding: 64px 0 40px; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 72px; justify-content: flex-start; margin-bottom: 48px; }
.footer-grid .logo { margin-right: auto; }
.footer .logo img { height: 28px; filter: brightness(0) invert(1); margin-bottom: 14px; }
.footer .tag { color: rgba(255,255,255,.6); font-size: 14px; max-width: 28ch; }
.fcol h6 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 14px; font-family: var(--font-text); }
.fcol a { display: block; color: rgba(255,255,255,.8); font-size: 14px; padding: 6px 0; transition: color .15s; }
.fcol a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: rgba(255,255,255,.5); font-size: 13px; }

/* ---------- misc ---------- */
.social-strip { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; }
.social-strip .s-num { font-family: var(--font-display); font-weight: 800; font-size: 30px; background: var(--gradient-product); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.social-strip .s-lbl { font-size: 13px; color: var(--sp-slate); }
.reel { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 9/16; background: var(--sp-mist); }
.reel video { width: 100%; height: 100%; object-fit: cover; }

.accordion-item { border-bottom: 1px solid var(--sp-line); }
.accordion-q { display: flex; justify-content: space-between; align-items: center; padding: 24px 4px; cursor: pointer; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--text-strong); }
.accordion-q .plus { color: var(--sp-blue); font-size: 26px; transition: transform .2s; }
.accordion-a { padding: 0 4px 24px; color: var(--text-muted); font-size: 16px; max-width: 70ch; }

.form-card { background: #fff; border: 1px solid var(--sp-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 40px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--sp-navy); margin-bottom: 7px; }
.field input, .field select, .field textarea { width: 100%; font-family: var(--font-text); font-size: 15px; padding: 13px 15px; border: 1.5px solid var(--sp-line); border-radius: var(--radius-md); background: var(--sp-cloud); transition: border .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sp-blue); box-shadow: 0 0 0 3px rgba(0,153,255,.18); background: #fff; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.app-badge { height: 54px; }
.page-hero { background: var(--gradient-aurora); padding: 104px 0 96px; }
.page-hero .container { display: flex; flex-direction: column; align-items: center; }
.page-hero .eyebrow { display: block; margin-bottom: 20px; }
.page-hero h1 { font-size: clamp(38px,5vw,64px); font-weight: 800; max-width: 18ch; margin-bottom: 22px; }
.page-hero .sub { max-width: 58ch; margin: 0 auto 32px; }
.tag-chip { display:inline-block; background: var(--sp-blue-050); color: var(--sp-blue); font-weight:700; font-size:13px; padding:6px 14px; border-radius: var(--radius-pill); margin-bottom:18px; }

/* ---- partner logo strip ---- */
.logos { padding: 52px 0 8px; }
.logos .lbl { text-align:center; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--sp-slate); margin-bottom: 28px; }
.logo-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 30px 52px; }
.logo-row img { height: 30px; width:auto; opacity:.5; transition: opacity .2s var(--ease-out), transform .2s; }
.logo-row img:hover { opacity:.95; transform: translateY(-2px); }

/* infinite scrolling marquee */
.logo-marquee { overflow: hidden; width: 100%; max-width: 1000px; margin: 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.logo-track { display: flex; align-items: center; width: max-content; }
.logo-track img { height: 30px; width: auto; margin-right: 64px; opacity: .48; flex-shrink: 0; transition: opacity .2s var(--ease-out); }
.logo-track img:hover { opacity: .95; }
.motion .logo-track { animation: logoscroll 38s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes logoscroll { to { transform: translateX(-50%); } }

/* ---- photo in case-study card header ---- */
.cc-img { position: relative; overflow: hidden; }
.cc-img img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cc-img .pill { position: relative; z-index:1; }

/* ---- product section primary header ---- */
.prod-intro { text-align: center; max-width: 1080px; margin: 0 auto; }
.prod-intro .eyebrow { display: block; margin-bottom: 20px; }
.prod-intro h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.02em; color: var(--text-strong); }
.prod-hero { max-width: 820px; margin: 48px auto 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--sp-line); }
.prod-hero img { width: 100%; height: auto; display: block; }

/* ---- product category block (badge + serif headline + sub) ---- */
.catblock { text-align: center; max-width: 52ch; margin: 0 auto 56px; }
.cat-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--gradient-product); color: #fff; font-weight: 700; font-size: 15px; padding: 9px 20px; border-radius: var(--radius-pill); box-shadow: var(--shadow-blue-sm); margin-bottom: 22px; }
.cat-badge svg { width: 16px; height: 16px; }
.catblock h2.serif { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.02em; color: var(--text-strong); margin-bottom: 16px; }
.catblock .cat-sub { font-size: 18px; line-height: 1.5; color: var(--text-muted); max-width: 46ch; margin: 0 auto; }

/* ---- product showcase ---- */
.show-card { border:1px solid var(--sp-line); border-radius: var(--radius-lg); overflow:hidden; background:#fff; transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s; }
.show-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--sp-blue-100); }
.show-card .img { aspect-ratio: 4/3; overflow:hidden; background: var(--sp-mist); }
.show-card .img img { width:100%; height:100%; object-fit:cover; transition: transform .4s var(--ease-out); }
.show-card:hover .img img { transform: scale(1.04); }
.show-card .cap { padding: 18px 22px 22px; }
.show-card .cap .k { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--sp-blue); }
.show-card .cap h4 { font-size:19px; font-weight:600; margin:6px 0 5px; }
.show-card .cap p { font-size:14px; color:var(--text-muted); line-height:1.5; }

/* ---- spotlight (image + copy) ---- */
.spotlight { display:grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items:center; }
.spotlight.flip .spot-media { order: 2; }
.spot-media { border-radius: var(--radius-xl); overflow:hidden; box-shadow: var(--shadow-md); border:1px solid var(--sp-line); aspect-ratio: 4/3; background: var(--sp-mist); }
.spot-media img { width:100%; height:100%; object-fit:cover; }
.spot-copy h2 { font-size: clamp(28px,3.4vw,40px); font-weight:700; margin:12px 0 14px; }
.spot-copy p { font-size:17px; color:var(--text-muted); margin-bottom:20px; }
.spot-list { list-style:none; display:grid; gap:12px; }
.spot-list li { display:flex; gap:11px; align-items:flex-start; font-size:15px; font-weight:500; color:var(--sp-navy); }
.spot-list li::before { content:"✓"; color:#fff; background:var(--gradient-product); width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }

/* ---- reel showcase ---- */
.reel-row { display:grid; grid-template-columns: repeat(5,1fr); gap:18px; margin-top:44px; }
.reel-card { position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); aspect-ratio:9/16; background:#0b0b0b; transition: transform .25s var(--ease-out), box-shadow .25s; }
.reel-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.reel-card video { width:100%; height:100%; object-fit:cover; display:block; }
.reel-card::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(transparent 58%, rgba(0,0,0,.42)); }
.reel-card .views { position:absolute; left:11px; bottom:11px; z-index:2; display:inline-flex; align-items:center; gap:6px; background:rgba(0,0,0,.42); backdrop-filter:blur(6px); color:#fff; font-size:12px; font-weight:700; padding:6px 11px; border-radius:var(--radius-pill); }
.reel-card .views::before { content:"►"; font-size:9px; opacity:.9; }
.reel-handle { display:inline-flex; align-items:center; gap:7px; margin-top:34px; font-weight:600; color:var(--sp-navy); transition: color .15s; }
.reel-handle:hover { color: var(--sp-blue); }
.reel-handle .arrow { display:inline-block; transition: transform .2s var(--ease-out); }
.reel-handle:hover .arrow { transform: translateX(4px); }

/* scrolling reel marquee */
.reel-marquee { overflow: hidden; width: 100%; margin-top: 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.reel-track { display: flex; align-items: stretch; width: max-content; }
.reel-track .reel-card { width: 240px; flex-shrink: 0; margin: 0 18px 0 0; aspect-ratio: 9/16; }
.motion .reel-track { animation: reelscroll 70s linear infinite; }
.reel-marquee:hover .reel-track { animation-play-state: paused; }
@keyframes reelscroll { to { transform: translateX(-50%); } }

/* ---- video embed ---- */
.video-frame { position: relative; max-width: 940px; margin: 0 auto; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--sp-line); aspect-ratio: 16 / 9; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .masonry { flex-direction: column; }
  .nav-links { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .spotlight { grid-template-columns: 1fr; gap: 28px; }
  .spotlight.flip .spot-media { order: 0; }
  .logo-row { gap: 22px 34px; }
  .reel-row { grid-template-columns: repeat(2,1fr); gap: 14px; }
}

@media (max-width: 560px) {
  /* Stack testimonials — two cards side-by-side at 375px clipped their right edge. */
  .grid-4 { grid-template-columns: 1fr; }
  .reel-row { grid-template-columns: repeat(2,1fr); }
  /* Declutter the nav: burger (Customer Stories + Creators) + primary CTA is enough;
     "contact us" was wrapping to two lines. Scoped to .nav so hero ghost buttons stay. */
  .nav .btn-ghost { display: none; }
  /* The desktop line breaks strand "pos" and "for"; let it wrap naturally + balanced. */
  .hero h1 br { display: none; }
  .hero h1 { font-size: clamp(38px, 10.5vw, 46px); }
  .trust-row { gap: 18px; }
}

/* ===========================================================
   Motion — subtle, springy, respects reduced-motion.
   =========================================================== */
.nav { transition: box-shadow .25s var(--ease-out), background .25s; }
.nav.scrolled { box-shadow: var(--shadow-sm); background: rgba(255,255,255,.9); }
.feature-card .ico { transition: transform .25s var(--ease-spring); }
.feature-card:hover .ico { transform: scale(1.08) rotate(-2deg); }
.btn-primary { will-change: transform; }
.btn-primary .arrow, .btn-white .arrow { display: inline-block; transition: transform .2s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* Motion is gated by a `.motion` class that JS adds to <html> only when the
   visitor has NOT requested reduced motion. No `.motion` => fully static. */
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5%,-2%,0) scale(1.06); }
  100% { transform: translate3d(-2.5%,2.5%,0) scale(1.03); }
}

/* scroll reveal — targets are hidden from first paint (pure CSS, gated by
   .motion); JS adds `.in` when each scrolls into view. */
.motion .shead, .motion .cat-head, .motion .catblock, .motion .prod-intro, .motion .prod-hero, .motion .cta-band, .motion .spotlight, .motion .video-frame,
.motion .grid > *, .motion .masonry > *, .motion .social-strip > *, .motion .reel-row > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.motion .shead.in, .motion .cat-head.in, .motion .catblock.in, .motion .prod-intro.in, .motion .prod-hero.in, .motion .cta-band.in, .motion .spotlight.in, .motion .video-frame.in,
.motion .grid > .in, .motion .masonry > .in, .motion .social-strip > .in, .motion .reel-row > .in {
  opacity: 1; transform: none;
}

/* hero entrance — staggered fade-up on load */
.motion .hero h1, .motion .hero .sub, .motion .hero .hero-cta, .motion .hero .trust-row { opacity: 0; animation: heroIn .75s var(--ease-out) forwards; }
.motion .hero h1 { animation-delay: .06s; }
.motion .hero .sub { animation-delay: .2s; }
.motion .hero .hero-cta { animation-delay: .34s; }
.motion .hero .trust-row { animation-delay: .48s; }

/* living aurora — layered glow behind the hero. Renders always (adds depth);
   drifts when motion is allowed. Bright cyan + deep blue give visible contrast. */
.hero::before, .hero::after {
  content: ""; position: absolute; inset: -35%; z-index: 0; pointer-events: none; filter: blur(28px);
}
.hero::before {
  background:
    radial-gradient(30% 30% at 20% 24%, rgba(110,215,255,.95), transparent 58%),
    radial-gradient(28% 28% at 84% 26%, rgba(180,195,255,.85), transparent 60%),
    radial-gradient(40% 40% at 55% 92%, rgba(0,120,235,.9), transparent 62%);
}
.hero::after {
  background:
    radial-gradient(26% 26% at 66% 12%, rgba(0,140,255,.85), transparent 58%),
    radial-gradient(34% 34% at 8% 76%, rgba(90,205,255,.9), transparent 60%),
    radial-gradient(24% 24% at 94% 64%, rgba(200,210,255,.8), transparent 62%);
}
.hero .container { position: relative; z-index: 1; }
.motion .hero::before { animation: heroGlowA 11s ease-in-out infinite alternate; }
.motion .hero::after  { animation: heroGlowB 15s ease-in-out infinite alternate; }
@keyframes heroGlowA {
  0%   { transform: translate3d(-7%,-4%,0) scale(1)    rotate(0deg); }
  50%  { transform: translate3d(9%,5%,0)   scale(1.28) rotate(9deg); }
  100% { transform: translate3d(-4%,8%,0)  scale(1.14) rotate(-7deg); }
}
@keyframes heroGlowB {
  0%   { transform: translate3d(7%,4%,0)    scale(1.12) rotate(0deg); }
  50%  { transform: translate3d(-10%,-6%,0) scale(1.34) rotate(-11deg); }
  100% { transform: translate3d(5%,-4%,0)   scale(1.18) rotate(7deg); }
}

.motion .cta-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 80% at 80% 10%, rgba(255,255,255,.25), transparent 60%);
  animation: drift 16s ease-in-out infinite alternate;
}

/* ===========================================================
   Review cards — Yelp vs X/tweet variants + hover animation.
   Placed last so the hover lift beats the scroll-reveal rule.
   =========================================================== */
.masonry .review-card { display: flex; flex-direction: column; margin-bottom: 0; }
.masonry .review-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

/* --- Yelp --- */
.review-card.yelp .yelp-stars { display: flex; gap: 5px; margin-bottom: 18px; }
.review-card.yelp .yelp-stars span { width: 29px; height: 29px; border-radius: 7px; background: #FF1A1A; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; transition: transform .24s var(--ease-spring); }
.review-card.yelp:hover .yelp-stars span { transform: translateY(-4px) rotate(-6deg); }
.review-card.yelp:hover .yelp-stars span:nth-child(2) { transition-delay: .04s; }
.review-card.yelp:hover .yelp-stars span:nth-child(3) { transition-delay: .08s; }
.review-card.yelp:hover .yelp-stars span:nth-child(4) { transition-delay: .12s; }
.review-card.yelp:hover .yelp-stars span:nth-child(5) { transition-delay: .16s; }
.review-card.yelp .rhead { margin-bottom: 16px; }
.review-card.yelp .avatar { width: 46px; height: 46px; font-size: 14px; }
.review-card.yelp .who { font-size: 17px; font-weight: 700; }
.review-card.yelp .where { font-size: 13px; }
.review-card.yelp p { color: var(--sp-navy); }
.rsource-img { display: block; height: 26px; width: auto; margin-top: 18px; margin-right: auto; align-self: flex-start; }

/* --- X / tweet --- */
.review-card.tweet { padding-bottom: 20px; }
.tweet-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.tweet-top .rhead { gap: 12px; align-items: center; }
.review-card.tweet .avatar { width: 48px; height: 48px; }
.review-card.tweet .who { font-size: 16px; font-weight: 700; color: #0f1419; line-height: 1.2; }
.tw-av1 { background: radial-gradient(circle at 32% 28%, #FFE779, #F2B600); }
.tw-av2 { background: radial-gradient(circle at 32% 28%, #9b8bf7, #5a32e6); }
.tw-av3 { background: radial-gradient(circle at 32% 28%, #6fe3ef, #2f7fe6); }
.x-logo { width: 19px; height: 19px; color: #0f1419; flex-shrink: 0; }
.review-card.tweet p { font-size: 16px; color: #0f1419; line-height: 1.45; margin-bottom: 16px; }
.tweet-actions { display: flex; align-items: center; justify-content: space-between; max-width: 290px; color: #536471; }
.tweet-actions svg { width: 18px; height: 18px; display: block; transition: color .15s; }
.tweet-actions svg:hover { color: var(--sp-blue); }
.tw-like { color: #F4267B; transition: transform .28s var(--ease-spring); }
.review-card.tweet:hover .tw-like { transform: scale(1.35); }

/* ===========================================================
   Customer story / testimonial pages (scoped under .cstory)
   Adapted from the creator-landing customer-story design.
   =========================================================== */
.cstory h1, .cstory h2, .cstory h3 { letter-spacing: -.03em; }

/* hero */
.cs-hero { background: var(--gradient-aurora); text-align: center; overflow: hidden; }
.cs-hero .container { padding: 62px 24px 74px; }
.cs-back { display: flex; margin-bottom: 32px; }
.cs-back a { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.7); border: 1px solid var(--sp-line); border-radius: var(--radius-pill); padding: 9px 16px 9px 13px; font-weight: 600; font-size: 14px; color: var(--sp-navy); box-shadow: var(--shadow-xs); transition: transform .12s var(--ease-spring), color .2s, background .2s; }
.cs-back a:hover { color: var(--sp-blue); background: #fff; transform: translateX(-2px); }
.cs-back svg { width: 16px; height: 16px; }
.cs-hero-copy { max-width: 920px; margin: 0 auto; }
.cs-badge { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--radius-pill); padding: 8px 18px 8px 14px; box-shadow: var(--shadow-xs); font-weight: 700; font-size: 14px; color: var(--sp-blue); }
.cs-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gradient-product); flex: none; }
.cs-hero h1 { font-size: clamp(38px, 5.4vw, 64px); font-weight: 800; margin: 26px auto 0; max-width: 940px; line-height: 1.02; }
.cs-hero h1 .hl { color: var(--sp-blue); }
.cs-lede { font-size: 20px; line-height: 1.5; color: var(--sp-slate); max-width: 640px; margin: 22px auto 0; }

/* stats band */
.cs-stats { border-top: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line); background: var(--sp-cloud); }
.cs-stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; padding: 44px 0; }
.cs-stat { text-align: center; position: relative; }
.cs-stat:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 12%; height: 76%; width: 1px; background: var(--sp-line); }
.cs-stat .v { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px,5vw,52px); letter-spacing: -.04em; color: var(--sp-blue); line-height: .9; }
.cs-stat .l { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-slate); margin-top: 12px; }

/* story */
.cs-story { padding: 88px 0 96px; }
.cs-grid { display: grid; grid-template-columns: 270px 1fr; gap: 64px; align-items: start; }
.cs-sidebar { position: sticky; top: 96px; }
.cs-company { background: #fff; border: 1px solid var(--sp-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 26px; }
.cs-company .mark { width: 52px; height: 52px; border-radius: 15px; background: var(--gradient-product); box-shadow: var(--shadow-blue-sm); display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 16px; }
.cs-company .mark svg { width: 24px; height: 24px; }
.cs-company h3 { font-size: 24px; font-weight: 800; }
.cs-company .site { font-size: 14px; color: var(--sp-slate); margin-top: 6px; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.cs-chip { font-size: 12.5px; font-weight: 600; background: var(--sp-mist); color: var(--sp-blue); padding: 6px 12px; border-radius: var(--radius-pill); }
.cs-kv { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sp-line); display: flex; flex-direction: column; gap: 13px; }
.cs-kv .row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.cs-kv .row span { color: var(--sp-slate); }
.cs-kv .row b { font-weight: 700; color: var(--sp-navy); }
.cs-article { max-width: 680px; }
.cs-block { margin-bottom: 44px; }
.cs-block:last-child { margin-bottom: 0; }
.cs-tag { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.cs-tag .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--sp-mist); color: var(--sp-blue); display: flex; align-items: center; justify-content: center; flex: none; }
.cs-tag .ic svg { width: 19px; height: 19px; }
.cs-block h2 { font-size: 30px; font-weight: 800; }
.cs-block p { font-size: 17.5px; line-height: 1.62; color: var(--sp-slate); margin-top: 16px; }
.cs-block p b { color: var(--sp-navy); font-weight: 700; }
.cs-pullstat { margin: 30px 0; padding: 24px 28px; background: var(--sp-cloud); border-left: 4px solid var(--sp-blue); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.cs-pullstat .v { font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -.03em; color: var(--sp-blue); line-height: 1; }
.cs-pullstat .l { font-size: 15px; color: var(--sp-slate); margin-top: 8px; line-height: 1.45; }

/* quote */
.cs-quote-sec { padding: 0 0 96px; }
.cs-quote { max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid var(--sp-line); border-radius: 28px; box-shadow: var(--shadow-lg); padding: 52px 56px; position: relative; overflow: hidden; }
.cs-quote::before { content: "\201C"; position: absolute; top: -8px; left: 34px; font-family: var(--font-display); font-size: 150px; color: var(--sp-mist); line-height: 1; pointer-events: none; }
.cs-quote .q { position: relative; font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: 29px; line-height: 1.32; color: var(--sp-navy); }
.cs-quote .by { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.cs-quote .by .av { width: 52px; height: 52px; border-radius: 50%; background: var(--gradient-product); flex: none; box-shadow: var(--shadow-blue-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; text-transform: uppercase; }
.cs-quote .by .av img { width: 100%; height: 100%; object-fit: cover; }
.cs-quote .by b { display: block; font-weight: 700; font-size: 16px; }
.cs-quote .by span { display: block; font-size: 14px; color: var(--sp-slate); margin-top: 3px; }

/* cta band */
.cs-cta-sec { padding: 0 24px 72px; }
.cs-cta { position: relative; max-width: 1200px; margin: 0 auto; background: var(--gradient-product); overflow: hidden; color: #fff; text-align: center; border-radius: 32px; }
.cs-cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 85% 5%, rgba(201,210,255,.5), transparent 55%), radial-gradient(60% 90% at 8% 100%, rgba(0,70,160,.45), transparent 55%); }
.cs-cta-inner { position: relative; z-index: 2; padding: 84px 32px; }
.cs-cta h2 { font-size: clamp(34px,4.5vw,54px); font-weight: 800; color: #fff; }
.cs-cta p { font-size: 20px; opacity: .94; margin: 18px auto 32px; max-width: 520px; line-height: 1.5; }

/* reveal (gated by .motion) */
.motion .cs-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-spring); }
.motion .cs-reveal.is-in { opacity: 1; transform: none; }

@media (max-width:900px){
  .cs-grid { grid-template-columns: 1fr; gap: 36px; }
  .cs-sidebar { position: static; }
  .cs-quote { padding: 40px 30px; }
  .cs-quote .q { font-size: 23px; }
}
/* stats stay in a 3-across row on mobile, just smaller */
@media (max-width:640px){
  .cs-stats-row { gap: 12px; padding: 30px 0; }
  .cs-stat .v { font-size: 28px; letter-spacing: -.03em; }
  .cs-stat .l { font-size: 10px; letter-spacing: .05em; margin-top: 7px; }
  .cs-stat:not(:last-child)::after { right: -6px; top: 14%; height: 62%; }
}