/* 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, button: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; }
/* The frosted bar is a layer of its own rather than the nav's own background, so
   .nav-cine can fade it out whole. Animating the background and blur instead left
   a hairline seam: backdrop-filter: blur(0) still establishes a backdrop root, and
   the edge of that root shows. At opacity 0 nothing is drawn at all. */
.nav::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(255,255,255,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--sp-line);
}
/* .nav-cine (landing page only) drops that bar while the full-screen film is
   behind it — see the cinema block below. The white lockup sits on top of the
   blue one and crossfades in for the same stretch. */
.nav-logo { position: relative; display: inline-flex; }
.nav-logo-alt { position: absolute; top: 0; left: 0; opacity: 0; filter: drop-shadow(0 1px 9px rgba(0,0,0,.45)); }
.nav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-logo img { height: 26px; }
.nav-links { position: absolute; left: 50%; display: flex; align-items: center; gap: 4px; transform: translateX(-50%); }
.nav-link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-text); font-weight: 600; font-size: 14px; color: var(--sp-navy); padding: 8px 12px; border: none; border-radius: var(--radius-pill); background: transparent; cursor: pointer; transition: background .15s, color .15s; }
.nav-link svg,
.nav-signin .btn svg { width: 15px; height: 15px; transition: transform .18s var(--ease-out); }
.nav-link:hover { background: var(--sp-mist); color: var(--sp-blue); }
.nav-cta { display: flex; align-items: center; gap: 8px; }

/* Product and account dropdowns. The same stateful .open behavior powers every
   menu so only one can render at a time and Escape always dismisses it. */
.nav-popover { position: relative; }
.nav-menu { display: none; align-items: center; }
.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.open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-menu.open .nav-burger span:nth-child(2) { opacity: 0; }
.nav-menu.open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-burger-menu { position: absolute; top: calc(100% + 10px); right: 0; width: min(340px, calc(100vw - 32px)); max-height: calc(100dvh - 88px); overflow-y: auto; 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.open .nav-burger-menu { opacity: 1; visibility: visible; transform: none; }
.nav-mobile-section { padding: 8px; }
.nav-mobile-section + .nav-mobile-section { border-top: 1px solid var(--sp-line); }
.nav-mobile-label { display: block; padding: 3px 5px 6px; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--sp-slate); }
.nav-burger-menu a { display: block; padding: 10px 9px; border-radius: 9px; font-size: 14.5px; font-weight: 600; color: var(--sp-navy); transition: background .15s, color .15s; }
.nav-burger-menu a:hover { background: var(--sp-mist); color: var(--sp-blue); }
.nav-dd-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); width: 560px; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s var(--ease-out); z-index: 60; }
.nav-dd-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-dd-menu.compact { width: 310px; grid-template-columns: 1fr; }
.nav-dd.open .nav-dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dd.open > [data-nav-trigger] svg { transform: rotate(180deg); }
.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: 600; color: var(--sp-navy); }
.dd-item small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--sp-slate); }
.dd-item:hover { background: var(--sp-mist); color: var(--sp-blue); }
.dd-item:hover small { color: var(--sp-slate); }

.nav-popover.nav-instant .nav-dd-menu,
.nav-popover.nav-instant .nav-burger-menu,
.nav-popover.nav-instant [data-nav-trigger] svg,
.nav-popover.nav-instant .nav-burger span { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-dd-menu,
  .nav-dd.open .nav-dd-menu { transform: translateX(-50%); transition: opacity .12s ease; }
  .nav-burger-menu,
  .nav-menu.open .nav-burger-menu { transform: none; transition: opacity .12s ease; }
  .nav-dd [data-nav-trigger] svg,
  .nav-burger span { transition: none; }
}

/* ---------- 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; }

/* ---------- full-screen hero, index only ---------- */
/* Scoped to .hero-cloud: keeps the original aurora background + living-glow
   pseudo-elements, but makes the hero full-viewport with the brand-logo banner
   pinned across the bottom. Other marketing pages keep the short aurora hero. */
.hero.hero-cloud { min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px);
  display: flex; flex-direction: column;
  /* override the base hero's 88/96 padding — its bottom padding showed the aurora's
     blue BELOW the banner (the "blue band"); flex centring handles spacing now */
  padding: 0; }
/* the copy grows to fill the space above the banner and centres itself; the banner
   (below, flex:none) is therefore pushed FLUSH to the hero's bottom edge — no blue
   strip beneath it. On a short viewport nothing shrinks, so the hero grows (page
   scrolls) instead of the banner overlapping the copy. */
.hero.hero-cloud .container { position: relative; z-index: 1;
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* dark trust stats read better than white over the lighter sky */
.hero.hero-cloud .trust-row { text-shadow: none; }
.hero.hero-cloud .trust-num { color: var(--sp-navy); }
.hero.hero-cloud .trust-lbl { color: var(--sp-slate); }
.hero.hero-cloud .trust-div { background: rgba(10,37,64,.18); }
/* brand-logo banner at the bottom of the hero — in normal flow so it RESERVES
   layout space and can never overlap the copy (fixes short-viewport overlap).
   Transparent, so the monochrome SVG wordmarks sit straight on the sky. */
.hero.hero-cloud .logo-marquee { position: relative; z-index: 1; flex: none;
  width: 100%; max-width: none; margin: 0; padding: 110px 0 34px;
  /* tall, gently-eased white veil rising from the bottom — nearly opaque at the very
     bottom so the logos sit on a clean light base (no saturated-blue band), fading
     over a long distance so there's no hard light-to-blue line up top */
  background: linear-gradient(0deg,
    rgba(255,255,255,.9) 0%,
    rgba(255,255,255,.82) 12%,
    rgba(255,255,255,.6) 30%,
    rgba(255,255,255,.4) 50%,
    rgba(255,255,255,.22) 68%,
    rgba(255,255,255,.08) 84%,
    rgba(255,255,255,0) 100%);
  /* fixed (not %) edge fade → logos stay crisp near the edges at any screen width */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }
.hero.hero-cloud .logo-track img { opacity: .72; filter: drop-shadow(0 1px 6px rgba(255,255,255,.55)); }
/* 4 sets of logos per half — fills even a 3440px ultrawide with no gap — and the
   duration scales with the track so the per-pixel scroll speed stays the same. */
.hero.hero-cloud .logo-track { animation-duration: 152s; }

/* ---------- 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); }
/* "Explore →" links on the story cards — same affordance as .reel-handle */
.case-card a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--sp-navy); transition: color .15s; }
.case-card a:hover { color: var(--sp-blue); }
.case-card a .arrow { display: inline-block; transition: transform .2s var(--ease-out); }
.case-card a:hover .arrow { transform: translateX(4px); }

/* 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 .ico img { width: 42px; height: 42px; object-fit: contain; }
.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 is a <button> (keyboard access) — resets keep it identical to the old div */
.accordion-q { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: 0; text-align: left; padding: 24px 4px; cursor: pointer; font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.5; 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; }
/* 16px minimum — smaller input text triggers iOS Safari's zoom-on-focus */
.field input, .field select, .field textarea { width: 100%; font-family: var(--font-text); font-size: 16px; 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; }
/* pause on hover — real pointers only, so sticky tap-hover can't freeze the marquee on touch */
@media (hover: hover) and (pointer: fine) { .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 (eyebrow + serif headline + sub) ---- */
.catblock { text-align: center; max-width: 52ch; margin: 0 auto 56px; }
.catblock .eyebrow { display: block; margin-bottom: 20px; }
.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; }
/* pause on hover — real pointers only, so sticky tap-hover can't freeze the marquee on touch */
@media (hover: hover) and (pointer: fine) { .reel-marquee:hover .reel-track { animation-play-state: paused; } }
@keyframes reelscroll { to { transform: translateX(-50%); } }

/* ---- cinema: the film plays full screen, then dissolves into the reviews ----
   .cine is a scroll runway taller than the screen. The stage inside it pins, so
   the film holds the screen while the runway keeps scrolling; the runway — not
   the pinned stage — carries the view timeline, because a sticky element's own
   view() progress freezes while it is pinned. Scrubbed against that timeline the
   film shrinks into a rounded card and fades out, the copy over it goes with it,
   and the reviews behind fade up into its place.

   Only transform and opacity animate, so the whole dissolve runs on the
   compositor. The corner radius is constant: .cine-media overhangs the stage by
   44px and the stage clips it, so at full size the rounded corners sit off-screen
   and the film reads as edge to edge — no per-frame border-radius repaint. */
:root { --cine-h: 100svh; --cine-hold: 78svh; }

/* Narrow / portrait: the film still takes most of the screen so the copy has
   something to sit on, but there is no pin and no dissolve. */
.cine { position: relative; }
/* No background on the stage — it has to stay see-through, or the fading film
   dissolves to the stage instead of to the reviews behind it. */
.cine-stage { position: relative; z-index: 2; height: 62svh; overflow: hidden; }
.cine-media { position: absolute; inset: 0; background: #000; overflow: hidden; }
/* --cine-bleed oversizes the player and the media box clips it, so ~8% comes off
   every edge. That crop is what removes YouTube's caption band, which sits just
   above the bottom edge — cc_load_policy=0 does not reliably suppress it here. */
.cine-media iframe {
  --cine-bleed: 1.16;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0;
  width: calc(max(100%, calc(var(--cine-stage-h, 62svh) * 16 / 9)) * var(--cine-bleed));
  height: calc(max(var(--cine-stage-h, 62svh), calc(100vw * 9 / 16)) * var(--cine-bleed));
}

/* Just enough darkening behind the copy to hold it against a bright frame —
   kept light on purpose so the picture reads as film, not as a dimmed video. */
.cine-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,14,28,.42) 0%, rgba(6,14,28,.2) 34%, rgba(6,14,28,0) 62%, rgba(6,14,28,.12) 100%);
}
/* Film grain: one tile of SVG fractal noise, no animation and no extra request.
   overlay blending puts it in the midtones, so it reads as texture rather than
   a grey wash over the shot. */
.cine-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: .46; mix-blend-mode: overlay;
}

/* Copy sits over the film, high rather than centred. */
.cine-copy {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(104px, 17svh, 200px) 24px 0;
}
.cine-copy .eyebrow { color: #fff; opacity: .82; }
.cine-copy h2 {
  color: #fff; margin-top: 14px;
  font-size: clamp(34px, 5.2vw, 68px); font-weight: 700; line-height: 1.04;
  text-shadow: 0 2px 30px rgba(0,0,0,.34);
}

.reviews-panel { position: relative; z-index: 1; }

/* ---- sections sized to hold their whole contents on one screen ----
   Each size below is min(width-driven value, height-driven value). The height
   term is what does the work: on a short window the type, padding and gaps give
   way instead of the section growing past the screen. svh (not vh) so a mobile
   browser's collapsing toolbar does not change the answer mid-scroll. */
.section-fit {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(78px, 9svh, 116px) 0 clamp(18px, 3.4svh, 52px);
}
.section-fit .shead { margin-bottom: clamp(14px, 2.6svh, 44px); }
.section-fit .shead h2 { font-size: min(clamp(26px, 3.4vw, 44px), 4.8svh); margin: min(12px, 1.4svh) 0 min(14px, 1.6svh); }
.section-fit .shead p { font-size: max(13px, min(18px, 2.3svh)); }
.section-fit .eyebrow { font-size: max(10.5px, min(13px, 1.7svh)); }

/* Case-study cards */
.section-fit .grid { gap: min(20px, 2.4svh); }
.section-fit .testi-card { padding: min(28px, 3.2svh) min(26px, 2.2vw); }
.section-fit .testi-card blockquote { font-size: max(13px, min(18px, 2.3svh)); margin-bottom: min(22px, 2.6svh); }
.section-fit .tc-stars { font-size: min(13px, 1.6svh); margin-bottom: min(14px, 1.7svh); }
.section-fit .tc-owner { padding-top: min(18px, 2svh); gap: min(12px, 1.4svh); }
.section-fit .tc-avatar { width: min(46px, 5.4svh); height: min(46px, 5.4svh); }
.section-fit .tc-since { top: min(22px, 2.4svh); right: min(24px, 2.6svh); font-size: min(11px, 1.4svh); }

/* Guest reviews */
.section-fit .masonry, .section-fit .masonry-col { gap: min(20px, 1.8svh); }
.section-fit .review-card { padding: min(24px, 2.2svh); }
.section-fit .review-card p { font-size: max(11.5px, min(15px, 1.7svh)); line-height: 1.45; margin-bottom: min(18px, 1.6svh); }
.section-fit .review-card.yelp .yelp-stars { margin-bottom: min(18px, 1.5svh); }
.section-fit .review-card.yelp .yelp-stars span { width: min(29px, 2.9svh); height: min(29px, 2.9svh); font-size: min(15px, 1.6svh); }
.section-fit .review-card .rhead { gap: min(11px, 1.3svh); }
.section-fit .rsource-img { height: min(26px, 2.4svh); margin-top: min(18px, 1.4svh); }
.section-fit .review-card.yelp .avatar { width: min(46px, 5.2svh); height: min(46px, 5.2svh); }
.section-fit .review-card .avatar { width: min(34px, 4svh); height: min(34px, 4svh); }

/* Below these heights the type would have to shrink past readable to keep every
   card on screen — at 577px tall all seven need another 25% off, on text already
   near 10px. So the columns shed their overflow cards instead. Capping by
   nth-child rather than naming a card keeps it true if the reviews change. */
@media (max-height: 800px) { .section-fit .masonry-col .review-card:nth-child(n+3) { display: none; } }
@media (max-height: 560px) { .section-fit .masonry-col .review-card:nth-child(n+2) { display: none; } }

/* The bar clears while the film is behind it and is there everywhere else — the
   page needs it, or hero copy and review cards scroll straight through the links.

   TWO layers paint this bar and both have to go, which is what I kept missing:
   the frosted ::before below, and .nav.scrolled further down, which sets a
   background and shadow on .nav itself as soon as you pass 8px. Clearing only
   one of them leaves a bar that looks exactly like the one you meant to remove.
   .nav-clear is toggled by the page's scroll handler off the film's coverage of
   the viewport — not off whether the sticky stage has pinned, which is a
   different question and false while the film already fills the screen. */
.nav-cine::before { transition: opacity .24s var(--ease-out); }
.nav-cine.nav-clear::before { opacity: 0; }
.nav-cine.nav-clear.scrolled { background: transparent; box-shadow: none; }
/* Asymmetric on purpose. Clearing is instant: at .25s the bar was still visibly
   fading out over the film on a quick scroll — four sample positions' worth.
   Coming back keeps the fade, where there is nothing to be late for. */
.nav-cine.nav-clear,
.nav-cine.nav-clear::before { transition-duration: 0s; }

/* The marks invert over the film, since a blue lockup does not read on it. This
   one is allowed to fail soft: if the toggle never fires the logo just stays
   blue, which is a legibility nit, not a bar sitting on the picture. */
.nav-cine .nav-logo-alt,
.nav-cine .nav-burger span,
.nav-cine .nav-link { transition: opacity .24s var(--ease-out), background-color .24s var(--ease-out), color .24s var(--ease-out), box-shadow .24s var(--ease-out); }
.nav-cine.nav-onfilm .nav-logo-alt { opacity: 1; }
.nav-cine.nav-onfilm .nav-burger span { background: #fff; box-shadow: 0 1px 7px rgba(0,0,0,.45); }
.nav-cine.nav-onfilm .nav-link { color: #fff; text-shadow: 0 1px 7px rgba(0,0,0,.45); }
.nav-cine.nav-onfilm .nav-link:hover { background: rgba(255,255,255,.16); }

/* Wide and landscape enough that filling the screen only costs the edges. */
@media (min-width: 860px) and (min-aspect-ratio: 5 / 4) {
  .cine-stage { height: var(--cine-h); }
  .cine-media { inset: -44px; border-radius: 30px; }
  /* Same --cine-bleed crop, but sized to cover the screen rather than the band.
     The player renders at the larger size, so the extra is real pixels. */
  .cine-media iframe {
    width: calc(max(calc(100vw + 88px), calc((var(--cine-h) + 88px) * 16 / 9)) * var(--cine-bleed));
    height: calc(max(calc(var(--cine-h) + 88px), calc((100vw + 88px) * 9 / 16)) * var(--cine-bleed));
  }

  /* The dissolve. Without scroll-driven animation support the film simply stays
     full screen and the reviews follow it — no pin, no runway, nothing half-played. */
  @supports (animation-timeline: view()) {
    @keyframes cineDissolve {
      from { transform: scale(1);   opacity: 1; }
      70%  { transform: scale(.72); opacity: .55; }
      to   { transform: scale(.66); opacity: 0; }
    }
    /* The translateY term holds the panel still: it advances at exactly the rate
       the page scrolls across the runway, so the panel sits motionless while the
       scale and opacity ramp inside it. It is linear end to end — every stop
       advances translateY by the same fraction of --cine-hold that it advances
       through the range — so there is no drift against the scroll.
       (position: sticky cannot do this job here: the negative margin collapses
       the stack's auto height onto the panel, which throws the sticky bounds.) */
    @keyframes cineArrive {
      0%   { transform: translateY(0)                              scale(.88); opacity: 0; }
      26%  { transform: translateY(calc(var(--cine-hold) * .26))   scale(.88); opacity: 0; }
      86%  { transform: translateY(calc(var(--cine-hold) * .86))   scale(1);   opacity: 1; }
      100% { transform: translateY(var(--cine-hold))               scale(1);   opacity: 1; }
    }
    /* .cine is one screen of film plus --cine-hold of runway, so the stage stays
       pinned for exactly --cine-hold of scroll. The reviews are pulled up over the
       whole runway and pinned for the same stretch by .cine-stack's padding, so
       during the handover neither layer moves — the film shrinks away and the
       reviews grow in behind it, both stationary. The padding is entirely
       absorbed by that pin; it leaves no gap once the panel releases. */
    .motion .cine-stack { padding-bottom: var(--cine-hold); }
    .motion .cine {
      height: calc(var(--cine-h) + var(--cine-hold));
      view-timeline-name: --cine; view-timeline-axis: block;
    }
    .motion .cine-stage { position: sticky; top: 0; pointer-events: none; }
    /* The film is most of the way gone before the reviews are legible — both
       layers carry big type, and a long crossfade just makes the two headlines
       read on top of each other. The copy rides the same curve as the film, so
       the two shrink together rather than the words sliding off the picture. */
    /* The end of this range must stay well below contain 100%. contain 100% is
       where the stage unpins; if the film were still visible at that point it
       would slide out from behind the reviews. At 62% it has been at opacity 0
       for a good while before the pin releases — keep that margin if you retune. */
    .motion .cine-media,
    .motion .cine-copy {
      animation: cineDissolve linear both;
      animation-timeline: --cine; animation-range: contain 8% contain 62%;
    }
    .motion .reviews-panel {
      margin-top: calc(-1 * (var(--cine-h) + var(--cine-hold)));
      transform-origin: 50% 30%; will-change: transform, opacity;
      animation: cineArrive linear both;
      animation-timeline: --cine; animation-range: contain 0% contain 100%;
    }
  }
}

@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; }
  .nav-signin { display: none; }
  .nav-menu { display: inline-flex; }
  .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; }
  /* Same clipping bug in 2-col grids (case-study cards, boba testimonials) — ~150px columns. */
  .grid-2 { grid-template-columns: 1fr; }
  .reel-row { grid-template-columns: repeat(2,1fr); }
  /* Desktop 64px padding left a ~200px text column inside the band. */
  .cta-band { padding: 48px 24px; }
  /* Comfortable tap targets for footer links on touch. */
  .fcol a { padding: 10px 0; }
  /* 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; }
  /* top-align the tall cloud hero so stacked content can't clip under the nav */
  .hero.hero-cloud { justify-content: flex-start; padding-top: 56px; }
  .hero.hero-cloud .logo-marquee { padding: 96px 0 16px; }
}

/* ===========================================================
   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); }
/* .nav.scrolled paints the bar on .nav itself, which is why clearing the
   ::before layer alone never removed it. The landing page's override lives with
   the other .nav-cine rules above so both layers are cleared together. */
.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 .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 .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%; }
}