/* Sales page (/welcome) on top of marketing.css: the 3D hero, the scroll story and the finishing touches.
   Every rule is scoped to [data-sales] so the generator and feature pages, which share marketing.css, stay as they are.
   .has-3d is set on a section by sales_page.js once its Three.js code is running; without it the page shows the SVG
   sample and a plain list of steps. */

[data-sales] { --warm: var(--color-coral-600); }

/* Header: reading progress and a firmer bar once the hero is behind */
[data-sales] .m-header { transition: box-shadow var(--dur-base), background-color var(--dur-base); }
[data-sales] .m-header.is-scrolled { box-shadow: var(--shadow-pop); background: color-mix(in srgb, var(--bg) 92%, transparent); }
/* Header actions: the light / dark switch and the account button */
.s-theme { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color var(--dur-base), background-color var(--dur-base); }
.s-theme:hover { border-color: var(--accent); }
.s-theme:focus-visible, .s-account:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.s-theme svg { grid-area: 1 / 1; transition: transform var(--dur-slow) var(--var(--ease)), opacity var(--dur-base); }
.s-theme-sun, .s-theme[aria-checked="true"] .s-theme-moon { opacity: 0; transform: rotate(-90deg) scale(.6); }
.s-theme[aria-checked="true"] .s-theme-sun { opacity: 1; transform: none; }
.s-account svg { flex: none; }
[data-sales] .m-actions { gap: var(--space-10); }
.marketing:has([data-sales]) { transition: background-color var(--dur-base), color var(--dur-base); }

.s-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--warm)); transform: scaleX(0); transform-origin: 0 50%; }

/* Hero */
.s-hero { isolation: isolate; }
.s-grid { position: absolute; inset: 0; z-index: var(--z-behind); pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .55;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, var(--color-black) 20%, transparent 75%); }
.s-orb { position: absolute; left: -12%; bottom: -30%; width: 46%; aspect-ratio: 1; border-radius: var(--radius-circle); z-index: var(--z-behind); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--warm) 22%, transparent), transparent 70%); }
.s-hero .m-title { font-size: var(--text-fluid-lg); }
.s-hero .m-hero-copy { flex-basis: 560px; }
.s-hero .m-accent { background: linear-gradient(100deg, var(--accent-text), var(--warm)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-hero .m-stage { height: 620px; max-width: 680px; }
.s-scene { position: absolute; inset: 0; }
.s-scene canvas { display: block; width: 100%; height: 100%; }
.s-hero .s-scene { inset: -6% -10% -6% -14%; }
/* With the 3D code running, the SVG sample steps aside and the phone overlaps the code's edge, in front of it
   (the landing it opens), with the chips on top of both. */
.s-hero.has-3d .m-qr-card { visibility: hidden; }
.s-hero .s-scene { z-index: var(--z-base); }
.s-hero.has-3d .m-phone { z-index: var(--z-raised); right: -3%; top: 190px; width: 190px; height: 370px; box-shadow: var(--shadow-float); }
.s-hero:not(.has-3d) .s-scene { display: none; }
.s-hero .m-chip { backdrop-filter: blur(10px); background: color-mix(in srgb, var(--surface) 86%, transparent); z-index: var(--z-raised); }
@media (max-width: 560px) {
  .s-hero .m-stage { height: 500px; }
  .s-hero .s-scene { inset: 0 -8%; }
  .s-hero.has-3d .m-phone { right: 0; top: 230px; width: 140px; height: 280px; padding: var(--space-8); border-radius: var(--radius-6xl); }
  .s-hero.has-3d .m-phone-screen { padding: var(--space-16) var(--space-10); gap: var(--space-8); border-radius: var(--radius-4xl); }
  .s-hero.has-3d .m-phone-screen strong { font-size: var(--text-lg); }
  .s-hero.has-3d .m-phone-desc { font-size: var(--text-2xs); }
  .s-hero.has-3d .m-phone-btn { min-height: 30px; font-size: var(--text-2xs); }
  .s-hero.has-3d .m-chip-b { left: 0; bottom: 6px; }
}

/* Section titles split into words (SplitText): each line is a mask the words rise through. */
[data-sales] .s-line { padding-bottom: .08em; }

/* Cards: a soft light follows the pointer (--mx/--my from sales_page.js). */
[data-spotlight] .m-card { position: relative; isolation: isolate; }
[data-spotlight] .m-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: var(--z-behind); opacity: 0; transition: opacity var(--dur-base); pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%); }
[data-spotlight] .m-card:hover::before { opacity: 1; }
[data-spotlight] .m-ink::before { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--color-coral-300) 20%, transparent), transparent 65%); }
[data-sales] .m-card { transition: border-color var(--dur-base), transform var(--dur-base) var(--var(--ease)), box-shadow var(--dur-base); }
[data-sales] .m-bento-card:hover, [data-sales] .seo-related .m-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }

/* How it works: a scroll story with a sticky 3D stage */
.s-story-grid { display: grid; gap: var(--space-24); }
.s-story-steps { position: relative; display: grid; gap: var(--space-24); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.s-story-track, .s-story-stage, .s-story-badge { display: none; }
.s-story.has-3d .s-story-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-56); align-items: start; }
.s-story.has-3d .s-story-steps { grid-template-columns: 1fr; gap: 0; padding-left: var(--space-40); }
.s-story.has-3d .s-story-track { display: block; position: absolute; left: 11px; top: 30px; bottom: 30px; width: 2px; background: var(--line); }
.s-story-line { height: 100%; background: linear-gradient(var(--accent), var(--warm)); transform-origin: 50% 0; }
.s-story.has-3d .s-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; background: transparent; border-color: transparent; box-shadow: none; opacity: .32; transition: opacity var(--dur-slow), transform var(--dur-slow); transform: translateX(-6px); }
.s-story.has-3d .s-step.is-active { opacity: 1; transform: none; }
.s-story.has-3d .s-step:hover { border-color: transparent; }
.s-story.has-3d .s-step .m-num { position: absolute; left: -46px; top: 50%; margin-top: -18px; box-shadow: 0 0 0 6px var(--bg); }
.s-story.has-3d .s-step h3 { font-size: var(--text-fluid-sm-30); }
.s-story.has-3d .s-step p { font-size: var(--text-xl); max-width: 440px; }
.s-story.has-3d .s-story-stage { display: block; position: sticky; top: 110px; height: min(640px, calc(100vh - 150px)); border-radius: var(--radius-7xl); overflow: hidden;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 70%); border: 1px solid var(--line); box-shadow: var(--shadow); }
.s-story.has-3d .s-story-badge { display: inline-flex; position: absolute; left: 20px; bottom: 18px; padding: var(--space-6) var(--space-12); border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--line); font-size: var(--text-sm); color: var(--muted); }
@media (max-width: 900px) {
  /* Phones: the stage stays pinned at the top and the steps scroll under it. */
  .s-story.has-3d .s-story-grid { grid-template-columns: 1fr; gap: 0; }
  .s-story.has-3d .s-story-stage { order: -1; top: 84px; z-index: var(--z-raised); height: 40vh; border-radius: var(--radius-5xl); }
  .s-story.has-3d .s-step { min-height: 56vh; }
  .s-story.has-3d .s-step .m-num { top: 40%; }
}

/* Stats: gradient numbers */
[data-sales] .m-stats strong { background: linear-gradient(120deg, var(--text) 30%, var(--accent-text)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Pricing: a slow light around the featured plan */
@property --s-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
[data-sales] .m-plan-featured { border-color: transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--s-angle), var(--accent), var(--warm), var(--accent-soft), var(--accent)) border-box;
  animation: s-orbit 6s linear infinite; }
@keyframes s-orbit { to { --s-angle: 360deg; } }

/* Final call to action: the code builds itself beside the copy */
.s-final { isolation: isolate; }
.s-final-scene { --text: var(--on-ink); --surface: var(--ink-2); --accent-text: var(--ink-accent); z-index: var(--z-behind); opacity: .9; }
.s-final:not(.has-3d) .s-final-scene { display: none; }
.s-final.has-3d .m-bit { display: none; }
@media (min-width: 961px) {
  .s-final.has-3d { padding: 140px 0; }
  .s-final.has-3d .s-final-scene { left: 52%; }
  .s-final.has-3d .m-final-copy { align-items: flex-start; text-align: left; max-width: 1240px; }
  .s-final.has-3d .m-final-copy > * { max-width: 600px; }
  .s-final.has-3d .m-cta-center { justify-content: flex-start; }
}
@media (max-width: 960px) { .s-final-scene { opacity: .22; } }

@media (prefers-reduced-motion: reduce) {
  [data-sales] .m-plan-featured { animation: none; }
  .s-theme svg { transition: none; }
  [data-sales] .m-card { transition: none; }
}

/* Phones: the brand, the theme switch and the account button share one row instead of wrapping into two. */
@media (max-width: 480px) {
  [data-sales] .m-nav { flex-wrap: nowrap; min-height: 64px; }
  [data-sales] .m-nav .brand { font-size: var(--text-xl); }
  [data-sales] .m-actions { flex-wrap: nowrap; gap: var(--space-8); }
  [data-sales] .m-actions .m-btn-sm { padding: 0 var(--space-14); font-size: var(--text-md); white-space: nowrap; }
}

/* ---- Use cases by industry (pages/_use_cases) -------------------------------------------------------------------
   Without JavaScript every panel shows, one under the other; .is-tabbed (use_cases.js) turns them into tabs. */
.s-cases-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.s-cases-head .m-head { flex: 1 1 560px; }
.s-tabs { display: flex; gap: var(--space-10); overflow-x: auto; scrollbar-width: none; margin: -8px -32px 0; padding: var(--space-8) var(--space-32); }
.s-tabs::-webkit-scrollbar { display: none; }
.s-tabs button { flex: none; min-height: 48px; padding: 0 var(--space-20); border-radius: var(--radius-full); border: 1px solid var(--edge); background: var(--surface); color: var(--text); font: var(--weight-semibold) var(--text-base) var(--font-body); cursor: pointer; transition: background-color var(--dur-base), color var(--dur-base), border-color var(--dur-base); }
.s-tabs button:hover { border-color: var(--accent); }
.s-tabs button[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: var(--weight-bold); }
.s-tabs button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.s-cases-panels { display: flex; flex-direction: column; gap: var(--space-32); }
.s-case { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-32); align-items: stretch; }
.s-case[hidden] { display: none; }
.s-case-scene { position: relative; min-height: 560px; border-radius: var(--radius-7xl); overflow: hidden; background: var(--scene); border: 1px solid var(--line);
  background-image: linear-gradient(color-mix(in srgb, var(--color-slate-900) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-slate-900) 6%, transparent) 1px, transparent 1px); background-size: 40px 40px; }
.s-case-print { position: absolute; left: 8%; top: 9%; width: 300px; max-width: 58%; box-sizing: border-box; padding: var(--space-24); border-radius: var(--radius-5xl); background: var(--color-white); color: var(--color-slate-900); transform: rotate(-4deg);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-16); box-shadow: var(--shadow-float); }
.s-case-qr { width: 100%; height: auto; max-width: 220px; display: block; }
.styled-qr-logo { font-family: var(--font-display); }
.s-case-print-title { font: var(--weight-bold) var(--text-3xl) var(--font-display); text-align: center; }
.s-case-print-hint { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-slate-700); text-align: center; }
.s-case-phone { position: absolute; right: 7%; top: 14%; width: 220px; height: 440px; box-sizing: border-box; padding: var(--space-10); border-radius: var(--radius-8xl); background: var(--color-ink-950); transform: rotate(4deg); box-shadow: var(--shadow-float); }
.s-case-screen { height: 100%; box-sizing: border-box; padding: var(--space-24) var(--space-16); border-radius: var(--radius-6xl); background: var(--color-white); color: var(--color-slate-900); display: flex; flex-direction: column; gap: var(--space-10); }
.s-case-screen strong { font: var(--weight-semibold) var(--text-2xl)/1.1 var(--font-display); }
.s-case-avatar { width: 46px; height: 46px; border-radius: var(--radius-2xl); background: var(--scene); color: var(--ink); display: grid; place-items: center; font: var(--weight-bold) var(--text-3xl) var(--font-display); }
.s-case-link { min-height: 38px; border-radius: var(--radius-xl); background: var(--color-slate-900); color: var(--color-white); display: grid; place-items: center; padding: 0 var(--space-8); text-align: center; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.s-case-link-accent { background: var(--ink); }
.s-case-chip { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--space-10); max-width: 86%; min-height: 44px; padding: 0 var(--space-16); border-radius: var(--radius-full);
  background: var(--color-white); color: var(--color-slate-900); border: 1px solid var(--color-slate-200); box-shadow: var(--shadow-pop); font-size: var(--text-base); font-weight: var(--weight-semibold); }
.s-case-copy { display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-8) 0; }
.s-case-label { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-14); border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-text); font-size: var(--text-md); font-weight: var(--weight-bold); }
.s-case-copy h3 { margin: 0; font: var(--weight-semibold) var(--text-fluid-sm-30)/1.06 var(--font-display); letter-spacing: -.02em; }
.s-case-points { margin: 0; }
.s-case-points li { align-items: flex-start; font-size: var(--text-xl); line-height: 1.45; }
.s-case-points .m-check { background: var(--ok-soft); color: var(--ok); margin-top: 1px; }
.s-case-types { gap: var(--space-10); }
.s-case-types .m-pill .type-icon { color: var(--accent-text); }
.s-case-cta { align-self: flex-start; margin-top: auto; }
@media (max-width: 960px) {
  .s-case { grid-template-columns: 1fr; }
  .s-case-scene { min-height: 440px; }
  .s-case-print { width: 230px; padding: var(--space-16); }
  .s-case-phone { width: 170px; height: 340px; top: 22%; }
  .s-tabs { margin-inline: -20px; padding-inline: var(--space-20); }
}
@media (max-width: 480px) {
  .s-case-scene { min-height: 400px; }
  .s-case-print { left: 5%; width: 200px; max-width: 62%; }
  .s-case-phone { right: 4%; width: 140px; height: 290px; padding: 7px; border-radius: var(--radius-6xl); }
  .s-case-screen { padding: var(--space-16) var(--space-10); border-radius: var(--radius-4xl); gap: 7px; }
  .s-case-screen strong { font-size: var(--text-base); }
  .s-case-avatar { width: 36px; height: 36px; font-size: var(--text-xl); }
  .s-case-link { min-height: 30px; font-size: var(--text-2xs); }
  .s-case-chip { font-size: var(--text-sm); padding: 0 var(--space-14); bottom: 5%; }
}

/* ---- Analytics demo (pages/_analytics_demo) ---------------------------------------------------------------------
   Fixed ink colors in both themes, like the other dark sections. */
.s-demo { background: radial-gradient(900px 600px at 75% 40%, var(--color-ink-700), var(--ink) 70%); }
.s-demo-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-56); align-items: start; }
.s-demo-copy { padding-top: var(--space-24); }
.s-demo-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.s-demo-steps button { width: 100%; display: flex; align-items: center; gap: var(--space-12); min-height: 48px; padding: 0 var(--space-14); border: 1px solid transparent; border-radius: var(--radius-2xl); background: transparent; color: var(--on-ink-muted); font: var(--weight-medium) var(--text-base) var(--font-body); text-align: left; cursor: pointer; transition: background-color var(--dur-base), border-color var(--dur-base), color var(--dur-base); }
.s-demo-steps button:hover { color: var(--on-ink); }
.s-demo-steps button[aria-current="step"] { border-color: var(--color-coral-400); background: color-mix(in srgb, var(--color-coral-400) 16%, transparent); color: var(--on-ink); font-weight: var(--weight-bold); }
.s-demo-steps button:focus-visible, .s-demo-seg button:focus-visible, .s-demo-toggle:focus-visible { outline: 3px solid var(--ink-accent); outline-offset: 2px; }
.s-demo-step-num { width: 26px; height: 26px; flex: none; border-radius: var(--radius-circle); background: var(--ink-line); color: var(--on-ink); display: grid; place-items: center; font: var(--weight-medium) var(--text-xs) var(--font-mono); transition: background-color var(--dur-base); }
.s-demo-steps button[aria-current="step"] .s-demo-step-num { background: var(--color-coral-400); color: var(--color-coral-950); }
.s-demo-frame { min-width: 0; position: relative; border-radius: var(--radius-7xl); overflow: hidden; background: var(--ink-2); border: 1px solid var(--ink-line); box-shadow: var(--shadow-float); color: var(--on-ink); }
.s-demo-stage { position: relative; padding: var(--space-24) var(--space-24) var(--space-72); display: flex; flex-direction: column; gap: var(--space-16); transform-origin: 0 0; will-change: transform; }
.s-demo-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-10); }
.s-demo-toolbar[hidden] { display: none; }
.s-demo-seg { display: flex; max-width: 100%; box-sizing: border-box; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-2xl); background: var(--ink); border: 1px solid var(--ink-line); }
.s-demo-seg button { min-height: 40px; padding: 0 var(--space-14); border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--on-ink-muted); font: var(--weight-medium) var(--text-md) var(--font-body); cursor: pointer; white-space: nowrap; }
.s-demo-seg button[aria-pressed="true"] { background: var(--ink-line); color: var(--on-ink); font-weight: var(--weight-bold); }
.s-demo-seg + .s-demo-seg button[aria-pressed="true"] { background: var(--color-coral-400); color: var(--color-coral-950); }
.s-demo-card { border-radius: var(--radius-4xl); background: var(--ink); border: 1px solid var(--ink-line); padding: var(--space-16) var(--space-16); display: flex; flex-direction: column; gap: var(--space-10); min-width: 0; transition: border-color var(--dur-slow), box-shadow var(--dur-slow); }
.s-demo-card.is-focus, .s-demo-kpis.is-focus .s-demo-card { border-color: var(--color-coral-400); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-coral-400) 18%, transparent); }
.s-demo-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); }
.s-demo-kpis .s-demo-card { gap: var(--space-6); }
.s-demo-kpis strong { font: var(--weight-semibold) var(--text-6xl)/1 var(--font-display); letter-spacing: -.02em; display: inline-block; transform-origin: 0 50%; }
.s-demo-label { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--on-ink-muted); }
.s-demo-good { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-green-300); }
.s-demo-muted { font-size: var(--text-sm); color: var(--on-ink-muted); }
.s-demo-pulse { width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--color-green-300); flex: none; }
.s-demo.is-live .s-demo-pulse { animation: s-pulse 1.4s ease-out infinite; }
@keyframes s-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-green-300) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.s-demo-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); }
.s-demo-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-10); }
.s-demo-title strong { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-base); }
.s-demo-title span { font-size: var(--text-xs); color: var(--on-ink-muted); }
.s-demo-bars { height: 190px; display: flex; align-items: flex-end; gap: 3px; border-bottom: 1px solid var(--ink-line); }
.s-demo-bars span { flex: 1; min-width: 0; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: linear-gradient(var(--ink-accent), var(--color-coral-400)); }
.s-demo-split { display: flex; height: 14px; border-radius: var(--radius-full); overflow: hidden; background: var(--ink-line); }
.s-demo-ios { background: var(--ink-accent); } .s-demo-android { background: var(--color-green-300); } .s-demo-other { background: var(--color-amber-300); }
.s-demo-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6) var(--space-12); font-size: var(--text-sm); color: var(--on-ink-muted); }
.s-demo-legend span { display: inline-flex; align-items: center; gap: var(--space-6); }
.s-demo-legend i { width: 10px; height: 10px; border-radius: var(--radius-xs); }
.s-demo-legend b { color: var(--on-ink); font: var(--weight-medium) var(--text-sm) var(--font-mono); }
.s-demo-countries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-10); }
.s-demo-countries li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); font-size: var(--text-md); }
.s-demo-countries li > span { display: inline-flex; align-items: center; gap: var(--space-8); font-family: var(--font-mono); }
.s-demo-countries img { border-radius: var(--radius-xs); }
.s-demo-countries b { font: var(--weight-medium) var(--text-sm) var(--font-mono); color: var(--on-ink-muted); }
.s-demo-countries i { grid-column: 1 / -1; height: 6px; border-radius: var(--radius-full); background: var(--ink-line); }
.s-demo-countries i span { display: block; height: 100%; border-radius: var(--radius-full); background: var(--on-ink); }
.s-demo-heatgrid { display: grid; grid-template-columns: 34px repeat(12, minmax(0, 1fr)); gap: var(--space-4); align-items: center; }
.s-demo-day { font-size: var(--text-xs); color: var(--on-ink-muted); text-transform: capitalize; }
.s-demo-cell { height: 18px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--color-coral-300) calc(var(--level) * 100%), transparent); transition: background-color var(--dur-slow); }
.s-demo-live { overflow: hidden; }
.s-demo-badge { font: var(--weight-medium) var(--text-2xs) var(--font-mono); letter-spacing: .08em; color: var(--color-green-300) !important; }
.s-demo-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.s-demo-feed li { display: flex; justify-content: space-between; gap: var(--space-10); padding: var(--space-8); margin: 0 -8px; border-top: 1px solid var(--ink-line); border-radius: var(--radius-md); font-size: var(--text-md); }
.s-demo-feed li > span:last-child { color: var(--on-ink-muted); white-space: nowrap; }
.s-demo-note { align-self: flex-end; font-size: var(--text-xs); color: var(--on-ink-muted); }
.s-demo-devices .s-demo-note { align-self: flex-start; }
.s-demo-caption { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: var(--z-raised); display: flex; align-items: center; gap: var(--space-12); max-width: calc(100% - 32px); box-sizing: border-box; padding: var(--space-6) var(--space-6) var(--space-6) var(--space-16); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-ink-950) 88%, transparent); border: 1px solid var(--ink-line); backdrop-filter: blur(12px); box-shadow: var(--shadow-pop); }
.s-demo-caption[hidden] { display: none; }
.s-demo-caption > span { font-size: var(--text-base); font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-demo-toggle { flex: none; width: 40px; height: 40px; border-radius: var(--radius-circle); border: 0; background: var(--on-ink); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.s-demo-toggle svg { grid-area: 1 / 1; }
.s-demo-icon-play, .s-demo-toggle.is-paused .s-demo-icon-pause { display: none; }
.s-demo-toggle.is-paused .s-demo-icon-play { display: block; }
/* The world map: land as one path of round dots, the campaign's cities lit, a flash where the newest scan lands. */
.s-demo-row-map { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.s-demo-world { width: 100%; height: auto; display: block; overflow: visible; margin-block: auto; }
.s-demo-land { fill: none; stroke: var(--ink-line); stroke-width: 4.2; stroke-linecap: round; }
.s-demo-city { opacity: 0; transition: opacity var(--dur-slow); }
.s-demo-city.is-on { opacity: 1; }
.s-demo-city-dot { fill: var(--color-green-300); }
.s-demo-city-ring { fill: none; stroke: var(--color-green-300); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.s-demo.is-live .s-demo-city.is-on .s-demo-city-ring { animation: s-ring 2.6s ease-out infinite; }
.s-demo-city:nth-child(3n) .s-demo-city-ring { animation-delay: .9s !important; }
.s-demo-city:nth-child(3n+1) .s-demo-city-ring { animation-delay: 1.7s !important; }
@keyframes s-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5.5); opacity: 0; } }
.s-demo-ping-wave { fill: none; stroke: var(--color-night-50); stroke-width: 2; opacity: 0; }
.s-demo-ping-tag { opacity: 0; }
.s-demo-ping-tag rect { fill: color-mix(in srgb, var(--color-ink-950) 92%, transparent); stroke: var(--ink-line); }
.s-demo-ping-tag text { fill: var(--on-ink); font: var(--weight-semibold) var(--text-xl) var(--font-body); }
.s-demo-live-now { font: var(--weight-medium) var(--text-xs) var(--font-mono) !important; color: var(--color-green-300) !important; }
.s-demo-feed li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-demo-feed b { display: inline-block; width: 26px; font: var(--weight-medium) var(--text-2xs) var(--font-mono); color: var(--on-ink-muted); }
.s-demo-market-0 i span { background: var(--on-ink); } .s-demo-market-1 i span { background: var(--ink-accent); }
.s-demo-market-2 i span { background: var(--color-green-300); } .s-demo-market-3 i span { background: var(--color-amber-300); } .s-demo-market-4 i span { background: var(--color-red-300); }
.s-demo-countries li > span { font-family: var(--font-body); }
.s-demo-devices .s-demo-note { margin-top: auto; }
@media (max-width: 1100px) {
  .s-demo-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); }
  .s-demo-steps { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .s-demo-steps button { white-space: nowrap; }
}
@media (max-width: 700px) {
  .s-demo-stage { padding: var(--space-14) var(--space-14) 68px; gap: var(--space-12); }
  .s-demo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-demo-kpis strong { font-size: var(--text-5xl); }
  .s-demo-row, .s-demo-row-map { grid-template-columns: minmax(0, 1fr); }
  .s-demo-bars { height: 140px; }
  .s-demo-seg { overflow-x: auto; }
  .s-demo-caption > span { font-size: var(--text-sm); }
}

/* ---- Brand examples (pages/_brand_gallery) ---------------------------------------------------------------------- */
.s-brand-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-24); }
.s-brand { overflow: hidden; display: flex; flex-direction: column; }
.s-brand-tile { height: 270px; display: grid; place-items: center; border-radius: var(--radius-5xl) var(--radius-5xl) 0 0; }
.s-brand-code { padding: var(--space-12); border-radius: var(--radius-5xl); box-shadow: var(--shadow-float); transition: transform var(--dur-slow) var(--var(--ease)); }
.s-brand-code svg { display: block; border-radius: var(--radius-xl); }
.s-brand:hover .s-brand-code { transform: rotate(-4deg) scale(1.04); }
.s-brand-body { padding: var(--space-16) var(--space-20) var(--space-20); display: flex; flex-direction: column; gap: var(--space-6); }
.s-brand-name { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-8); }
.s-brand-name h3 { margin: 0; font-size: var(--text-3xl); }
.s-brand-name span { font-size: var(--text-sm); color: var(--muted); text-align: right; }
.s-brand-recipe { font-size: var(--text-xs); color: var(--muted); }
.s-brands-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-16) var(--space-24); }
@media (prefers-reduced-motion: reduce) { .s-brand-code { transition: none; } .s-brand:hover .s-brand-code { transform: none; } }