/* Sellerverse landing page
   Tokens come from CLAUDE.md. Step 1: desktop layout (1440px), identical to the design export. */

:root {
  /* Font */
  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* Core colour tokens */
  --ground: #F8F7F4;
  --surface: #FFFFFF;
  --line: #E5E5E1;
  --ink: #121826;
  --body: #565C69;
  --muted: #6C727F;
  --orange: #F97316;
  --orange-text: #C2410C;
  --orange-tint: #FFF7ED;
  --orange-deep: #EA580C;   /* Seller Navigator icon gradient */
  --orange-border: #FDBA74; /* channel chip outline */
  --green: #2F6B38;
  --green-tint: #EDF5EE;

  /* Secondary colours used by the design export */
  --nav-link: #3A4050;
  --logo-text: #4A5060;
  --line-strong: #D9D8D3;
  --line-dashed: #CFCDC5;
  --line-draft: #C9C7BF;
  --chip: #F1F0EC;
  --toggle-track: #EFEEE9;
  --table-head: #FAFAF8;
  --negative: #B42318;
  --on-dark-body: #B8BDC9;
  --selection: #FED7AA;

  /* Radius */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-toggle: 10px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-pill: 999px;

  /* Shadows */
  /* Interface boxes sit flat on the white page: a hairline shadow at most (decided 2026-10-02) */
  --shadow-card: 0 1px 2px rgba(18,24,38,.03);
  --shadow-demo: 0 1px 2px rgba(18,24,38,.03);
  --shadow-featured: 0 1px 2px rgba(18,24,38,.03);
  --shadow-panel: none;
  --shadow-btn-primary: 0 1px 2px rgba(154,52,18,.28);
  --shadow-btn-secondary: 0 1px 2px rgba(18,24,38,.05);
  --shadow-toggle: 0 1px 2px rgba(18,24,38,.10);

  /* Layout */
  --content: 1200px;   /* max content width */
  --edge: 40px;        /* minimum side gutter */
  /* Side padding: centres a 1200px column, never less than --edge. % resolves against the element's container. */
  --gutter: max(var(--edge), calc((100% - var(--content)) / 2));
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Set by the inline script in <head>; animations.js fades these in */
/* Hero entrance: pure CSS, so it plays on first paint even while scripts are still loading or busy.
   Only for visitors who allow motion; everything is fully visible otherwise. */
@media (prefers-reduced-motion: no-preference) {
  .site-nav, .hero__intro .kicker, .hero__title, .hero__lead, .hero__actions, .hero__note, .stats__item { animation: intro-up .9s cubic-bezier(.22, 1, .36, 1) both; }
  .site-nav { animation-name: intro-down; animation-duration: .6s; }
  .hero__intro .kicker { animation-delay: .25s; }
  .hero__title { animation-delay: .33s; }
  .hero__lead { animation-delay: .41s; }
  .hero__actions { animation-delay: .49s; }
  .hero__note { animation-delay: .57s; }
  .stats__item { animation-duration: .8s; animation-delay: .7s; }
  .stats__item:nth-child(2) { animation-delay: .78s; }
  .stats__item:nth-child(3) { animation-delay: .86s; }
  .stats__item:nth-child(4) { animation-delay: .94s; }
}
@keyframes intro-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes intro-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
body {
  margin: 0;
  background: var(--surface);
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); }
h1, h2, h3, p { margin: 0; }
img, svg { display: block; flex: none; }
button, input { font-family: var(--font); }
[hidden] { display: none !important; }
::selection { background: var(--selection); color: var(--ink); }
/* Focus ring uses the darker orange: #F97316 is only 2.8:1 on white, #C2410C passes 3:1 on white, ground and ink. */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--orange-text);
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--surface);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page { width: 100%; }

.section {
  padding: 0 var(--gutter);
}
.section--surface { background: var(--surface); }
.section--ground { background: var(--surface); } /* whole page is white */

.section-title {
  font-size: 46px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
}

/* Section label above each heading: orange text, no background (decided 2026-10-02) */
.kicker {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--orange-text);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  font-family: inherit;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn--sm { height: 40px; padding: 0 14px; font-size: 14px; }
.btn--md { height: 48px; padding: 0 22px; font-size: 16px; }
.btn--lg { height: 52px; padding: 0 24px; font-size: 16px; }
.btn--block { width: 100%; height: 44px; padding: 0 14px; font-size: 15px; }

.btn--primary { background: var(--orange); color: var(--surface); box-shadow: var(--shadow-btn-primary); }
.btn--secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow-btn-secondary); }
.btn--on-dark { background: transparent; color: var(--surface); border: 1px solid rgba(255,255,255,.32); }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
}
.pill--live { height: 26px; padding: 0 10px; background: var(--green-tint); color: var(--green); font-size: 13px; font-weight: 600; }
.pill--sample { height: 24px; padding: 0 9px; background: var(--chip); color: var(--body); font-size: 12px; font-weight: 500; }
.pill--popular { height: 24px; padding: 0 10px; background: var(--orange-tint); color: var(--orange-text); font-size: 12.5px; font-weight: 600; }
.pill--draft { height: 26px; padding: 0 12px; border: 1px dashed var(--line-draft); color: var(--body); font-size: 13px; font-weight: 500; }

.check { display: flex; color: var(--green); }

/* ---------- Card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* ---------- Data tables (AI and Customization cards) ---------- */
.data-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.data-table__row { display: grid; }
.data-table__row + .data-table__row { border-top: 1px solid var(--line); }
.data-table__row--head { background: var(--table-head); }
.data-table__th {
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--muted);
}
.data-table__td {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}
.num { text-align: right; font-variant-numeric: tabular-nums; }
.neg { color: var(--negative); font-weight: 500; }

/* =========================================================
   01 Nav
   ========================================================= */
.site-header { position: relative; }
.site-nav {
  height: 72px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-nav__logo { display: flex; flex: none; }
.site-nav__menu { display: contents; } /* desktop: links and actions sit directly in the nav row */
.site-nav__toggle { display: none; }
.site-nav__links { margin: 0; padding: 0; list-style: none; display: flex; gap: 36px; }
.site-nav__actions { display: flex; align-items: center; gap: 20px; }
.site-nav__link {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--nav-link);
}

/* =========================================================
   01 Hero
   ========================================================= */
.hero {
  min-height: 1148px; /* 1220px design frame minus the 72px nav */
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.hero__intro {
  flex: none;
  padding: 76px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__title {
  max-width: 1040px;
  font-size: 58px;
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero__lead {
  margin-top: 22px;
  max-width: 640px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--body);
  text-wrap: balance;
}
.hero__actions { margin-top: 34px; display: flex; gap: 12px; }
.hero__note { margin-top: 14px; font-size: 14px; line-height: 1.4; color: var(--muted); }

/* Demo frame */
.demo {
  flex: none;
  margin: 56px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-demo);
  overflow: hidden;
}
.demo__screen {
  position: relative;
  flex: none;
  height: 544px;
  overflow: hidden;
  background: #FAFAF9;
}

/* ---------- Hero app preview (sample data) ----------
   Built at a fixed design size (1150 x 544, or 760 wide in compact mode) and scaled to fit by main.js. */
.app {
  --app-blue: #2563EB;
  --app-bg: #FAFAF9;
  position: absolute;
  top: 0;
  left: 0;
  width: 1150px;
  height: 544px;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  background: var(--app-bg);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
  text-align: left;
  transform: scale(var(--app-scale, 1));
  transform-origin: top left;
}
/* Compact (narrow frames): the sidebar becomes an icon rail so screens stay switchable */
.app.is-compact { width: 760px; grid-template-columns: 64px minmax(0, 1fr); }
.app.is-compact .app__side { align-items: center; padding: 12px 8px; gap: 6px; }
.app.is-compact .app__logo, .app.is-compact .app__channel, .app.is-compact .app__group, .app.is-compact .app__nav-label, .app.is-compact .app__badge { display: none; }
.app.is-compact .app__nav-item { justify-content: center; width: 48px; height: 48px; padding: 0; }
.app.is-compact .app__nav-item svg { width: 20px; height: 20px; }
.app.is-compact .app__time, .app.is-compact .app__global { display: none; }
.app b { font-weight: 600; }
.app em { font-style: normal; }

.app__side { padding: 14px 12px; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.app__logo { width: 122px; height: auto; margin: 2px 6px 12px; }
.app__channel { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 12.5px; }
.app__channel svg { margin-left: auto; color: var(--muted); }
.app__channel i, .app__user i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--orange-tint); color: var(--orange-text); font-style: normal; font-size: 10.5px; font-weight: 600; }
.app__group { display: flex; align-items: center; justify-content: space-between; margin: 12px 8px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.app__nav-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius); background: none; font: inherit; font-size: 12.5px; text-align: left; color: var(--nav-link); }
button.app__nav-item { cursor: pointer; transition: background-color .15s ease, color .15s ease; }
button.app__nav-item:hover { background: var(--chip); color: var(--ink); }
button.app__nav-item:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 1px; }
.app__nav-item.is-unavailable { opacity: .45; }   /* no preview screen yet */
.app__sample { height: 22px; padding: 0 8px; font-size: 11px; }
.app__nav-item svg { color: var(--muted); }
.app__badge { margin-left: auto; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--chip); font-style: normal; font-size: 11px; font-weight: 600; }
.app[data-view="dashboard"] [data-nav="dashboard"],
.app[data-view="sales"] [data-nav="sales"],
.app[data-view="inventory"] [data-nav="inventory"],
.app[data-view="products"] [data-nav="products"],
.app[data-view="forecasting"] [data-nav="forecasting"] { background: var(--orange-tint); color: var(--orange-text); }
.app[data-view="dashboard"] [data-nav="dashboard"] svg,
.app[data-view="sales"] [data-nav="sales"] svg,
.app[data-view="inventory"] [data-nav="inventory"] svg,
.app[data-view="products"] [data-nav="products"] svg,
.app[data-view="forecasting"] [data-nav="forecasting"] svg { color: var(--orange-text); }

.app__body { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.app__top { flex: none; height: 46px; padding: 0 18px; display: flex; align-items: center; gap: 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.app__global { display: flex; align-items: center; gap: 8px; width: 250px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); }
.app__global kbd { margin-left: auto; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; font: 10px var(--font-mono); }
.app__time { font-size: 11.5px; color: var(--nav-link); }
.app__icon { position: relative; display: flex; color: var(--nav-link); }
.app__icon--dot::after { content: ""; position: absolute; top: -1px; right: -1px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.app__user { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.app__user i { background: var(--orange); color: var(--surface); width: 24px; height: 24px; }

.app__main { position: relative; flex: 1; min-height: 0; padding: 16px 18px; overflow: hidden; }
.app__main::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(rgba(250,250,249,0), var(--app-bg)); pointer-events: none; }
.app__view { display: flex; flex-direction: column; gap: 12px; }
.app__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.app__h1 { font-size: 17px; font-weight: 700; }
.app__h1--lg { font-size: 19px; }
.app__sub { margin-top: 2px; color: var(--body); }
.app__actions { display: flex; gap: 8px; }
.app__grow { flex: 1; }

.app__btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.app__btn--tint { border-color: #FED7AA; background: var(--orange-tint); color: var(--orange-text); }
.app__btn--ghost-orange { border-color: var(--orange); color: var(--orange-text); }
.app__btn--primary { border-color: var(--orange); background: var(--orange); color: var(--surface); font-weight: 600; }
.app__btn--sm { height: 24px; padding: 0 8px; margin-right: 4px; font-size: 11px; }
.app__btn--po { height: 22px; margin-top: 2px; padding: 0 6px; border-color: #BBF7D0; background: #F0FDF4; color: #15803D; font-size: 10.5px; font-weight: 600; }
.app__count { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--chip); color: var(--ink); font-style: normal; font-size: 10px; font-weight: 600; }
.app__seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.app__seg span { height: 26px; padding: 0 9px; display: inline-flex; align-items: center; font-size: 11.5px; }
.app__seg span + span { border-left: 1px solid var(--line); }
.app__chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 11.5px; white-space: nowrap; }
.app__chip.is-on { border-color: var(--orange); color: var(--orange-text); }
.app__chip.is-solid { border-color: var(--orange); background: var(--orange); color: var(--surface); }
.app__chip.is-solid .app__count { background: rgba(255,255,255,.25); color: var(--surface); }
.app__toolbar { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.app__search { flex: 0 1 260px; min-width: 190px; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--muted); }
.app__caption { margin-bottom: -4px; font-weight: 500; }
.app__link { color: var(--orange-text); font-weight: 500; }

.app__tiles { display: grid; gap: 10px; }
.app__tiles--4 { grid-template-columns: repeat(4, 1fr); }
.app__tiles--5 { grid-template-columns: repeat(5, 1fr); }
.app__tiles--6 { grid-template-columns: repeat(6, 1fr); }
.app__tiles--8 { grid-template-columns: repeat(8, 1fr); }
.app.is-compact .app__tiles--6, .app.is-compact .app__tiles--8 { grid-template-columns: repeat(4, 1fr); }
.app.is-compact .app__tiles--5 { grid-template-columns: repeat(3, 1fr); }
.app__tile { padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.app__tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.app__tile-label { font-size: 10.5px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--nav-link); }
.app__tile-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--chip); }
.app__tile-value { margin-top: 6px; font-size: 17px; font-weight: 700; }
.app__tile-note { font-size: 11px; font-weight: 500; }
.app__tone-green { color: #15803D; } .app__tile-icon.app__tone-green { background: #F0FDF4; }
.app__tone-orange { color: var(--orange-text); } .app__tile-icon.app__tone-orange { background: var(--orange-tint); }
.app__tone-purple { color: #7C3AED; } .app__tile-icon.app__tone-purple { background: #F5F3FF; }
.app__tone-red { color: #DC2626; } .app__tile-icon.app__tone-red { background: #FEF2F2; }
.app__tone-ink { color: var(--ink); }

.app__split { display: grid; grid-template-columns: 1.7fr 1fr; gap: 12px; }
.app.is-compact .app__split { grid-template-columns: minmax(0, 1fr); }
.app__card { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.app__card--row { display: grid; grid-template-columns: 1.2fr 120px 1.6fr; align-items: center; gap: 24px; }
.app__card-head { display: flex; align-items: center; justify-content: space-between; }
.app__card-title { font-weight: 600; }
.app__legend { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.app__legend i + * { margin-right: 6px; }
.app__dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; }
.app__dot--green { background: #16A34A; } .app__dot--orange { background: var(--orange); } .app__dot--ink { background: var(--ink); }
.app__dot--purple { background: #7C3AED; } .app__dot--blue { background: #3B82F6; } .app__dot--teal { background: #14B8A6; }
.app__chart { display: block; width: 100%; height: 170px; margin-top: 10px; }
.app__grid-lines path { stroke: var(--line); stroke-dasharray: 3 4; }
.app__area { fill: rgba(22,163,74,.08); }
.app__line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.app__line--green { stroke: #16A34A; } .app__line--orange { stroke: var(--orange); } .app__line--ink { stroke: var(--ink); } .app__line--purple { stroke: #7C3AED; }
.app__axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10.5px; color: var(--muted); }
.app__feed { margin: 8px 0 0; padding: 0; list-style: none; }
.app__feed li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.app__feed li:first-child { border-top: 0; }
.app__feed li > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--body); }
.app__feed b { color: var(--ink); }
.app__feed em { font-size: 11px; color: var(--muted); }
.app__feed-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #F0FDF4; color: #15803D; }

.app__subtabs { display: flex; gap: 22px; margin-top: -2px; border-bottom: 1px solid var(--line); }
.app__subtabs > * { padding: 6px 0 8px; color: var(--nav-link); }
.app__subtabs b { color: var(--orange-text); box-shadow: inset 0 -2px 0 var(--orange); font-weight: 500; }
.app__scards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.app.is-compact .app__scards { grid-template-columns: repeat(2, 1fr); }
.app__scard { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.app__scard-head { padding: 9px 12px; display: flex; flex-direction: column; color: var(--surface); }
.app__scard-head span { font-size: 10.5px; opacity: .9; }
.app__scard--today .app__scard-head { background: #3B82F6; }
.app__scard--yesterday .app__scard-head { background: #14B8A6; }
.app__scard--mtd .app__scard-head { background: #0D9488; }
.app__scard--last .app__scard-head { background: #16A34A; }
.app__scard-body { padding: 10px 12px; }
.app__k { font-size: 10.5px; color: var(--muted); }
.app__big { font-size: 19px; font-weight: 700; }
.app__mid { font-size: 15px; font-weight: 700; }
.app__kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 6px; }
.app__kv > span { display: flex; flex-direction: column; }
.app__net { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.app__more { padding: 7px; border-top: 1px solid var(--line); text-align: center; color: var(--orange-text); font-size: 11.5px; }
.app__banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #FED7AA; border-radius: var(--radius-card); background: #FFFBF6; color: var(--orange-text); }
.app__banner b { color: var(--ink); }

.app__table { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.app__tr { display: grid; align-items: center; }
.app__tr + .app__tr { border-top: 1px solid var(--line); }
.app__tr--head { background: #F4F3F0; }
.app__th { padding: 8px 10px; font-size: 10px; line-height: 1.25; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.app__td { padding: 8px 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app__table--sales .app__tr { grid-template-columns: 2.2fr 1fr 1.1fr .8fr .8fr .9fr 1fr .9fr; }
.app__table--inv .app__tr { grid-template-columns: 2.2fr 1fr 1.1fr .8fr .8fr .8fr .8fr 1.3fr; }
.app__table--prod .app__tr { grid-template-columns: 2.2fr 1.3fr .7fr .8fr .8fr .8fr .8fr .8fr .7fr; }
.app__table--fc .app__tr { grid-template-columns: 2fr .9fr 1.2fr 1fr .9fr .55fr .55fr .6fr .55fr .8fr .75fr; }
.app.is-compact .app__table .app__tr > :nth-child(n+6) { display: none; }
.app.is-compact .app__table--sales .app__tr, .app.is-compact .app__table--inv .app__tr, .app.is-compact .app__table--prod .app__tr, .app.is-compact .app__table--fc .app__tr { grid-template-columns: 2.2fr 1fr 1.2fr 1fr 1fr; }
.app__prod { display: flex; flex-direction: column; min-width: 0; }
.app__prod-name { overflow: hidden; text-overflow: ellipsis; }
.app__asin { color: var(--app-blue); font-size: 11px; }
.app__mono { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; }
.app__muted { color: var(--muted); }
.app__neg { color: #DC2626; }
.app__pos { color: #15803D; font-weight: 600; }
.app__blue { color: var(--app-blue); }
.app__hl { background: #FFF4EA; color: var(--orange-text); }
.app__now { display: block; color: #DC2626; font-weight: 700; }
.app__state { display: block; font-size: 10.5px; }
.app__state::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.app__state--green { color: #15803D; } .app__state--red { color: #DC2626; }
.app__pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 10.5px; font-weight: 500; }
.app__pill--blue { background: #EFF6FF; color: #1D4ED8; }
.app__pill--green { background: #F0FDF4; color: #15803D; }
.app__pill--teal { background: #F0FDFA; color: #0F766E; font-weight: 700; }
.app__donut { width: 110px; height: 110px; transform: rotate(-90deg); }
.app__bars p { display: flex; justify-content: space-between; margin-top: 8px; }
.app__bars p:first-child { margin-top: 0; }
.app__bars em { color: var(--app-blue); font-size: 11px; margin-left: 6px; }
.app__bar { display: block; height: 4px; margin-top: 6px; border-radius: 2px; }
.app__bar i { display: block; height: 100%; border-radius: 2px; background: #3B82F6; }
.app__bar--teal i { background: #14B8A6; }

/* ---------- Stats: one line under the hero copy, a thin divider between items ---------- */
.stats {
  margin: 36px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 10px;
}
.stats__item { display: flex; align-items: baseline; gap: 6px; padding: 0 20px; white-space: nowrap; }
.stats__item + .stats__item { border-left: 1px solid var(--line-strong); }
.stats__value { font-size: 17px; line-height: 1.4; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats__label { margin: 0; font-size: 15px; line-height: 1.4; color: var(--body); }

/* =========================================================
   02 How Sellerverse works: five stage cards, modules listed under each
   ========================================================= */
.modules__header { max-width: 960px; margin: 0 auto; text-align: center; }
/* desktop: the heading stays on one line */
@media (min-width: 1024px) { .modules__title { white-space: nowrap; } }
/* line breaks that only apply on desktop */
.br-desktop { display: none; }
@media (min-width: 1024px) { .br-desktop { display: inline; } }
.modules__header .lead { margin: 16px auto 0; max-width: 660px; text-wrap: balance; }
/* Stage rail: three connected steps; the orange line fills up to the selected step (--flow-progress) */
.flow { margin-top: 48px; }
.flow__rail {
  --flow-progress: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flow__line { position: absolute; top: 19px; left: 16.667%; right: 16.667%; height: 2px; background: var(--line); pointer-events: none; }
.flow__line i { display: block; height: 100%; background: var(--orange); transform: scaleX(var(--flow-progress)); transform-origin: left center; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 8px 18px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
}
.flow__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.flow__step-name { font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--body); transition: color .2s ease; }
.flow__step-count { font-size: 14px; line-height: 1.4; color: var(--muted); }
.flow__step:hover .flow__step-name { color: var(--ink); }
.flow__step:hover .flow__dot { border-color: var(--orange); color: var(--orange-text); }
.flow__step.is-done .flow__dot { border-color: var(--orange); color: var(--orange-text); }
.flow__step[aria-selected="true"] .flow__dot { background: var(--orange); border-color: var(--orange); color: var(--surface); transform: scale(1.08); }
.flow__step[aria-selected="true"] .flow__step-name { color: var(--ink); }
.flow__step:focus-visible { outline: none; }
/* Autoplay timer: fills under the active step while it is shown (--flow-dur set by main.js) */
.flow__timer { display: block; width: 56px; height: 2px; margin: 4px 0 2px; border-radius: 2px; background: transparent; overflow: hidden; }
.flow.is-auto .flow__step[aria-selected="true"] .flow__timer { background: var(--line); }
.flow.is-auto .flow__step[aria-selected="true"] .flow__timer::before { content: ""; display: block; height: 100%; background: var(--orange); transform-origin: left center; animation: flow-timer var(--flow-dur, 5s) linear both; }
.flow.is-held .flow__step[aria-selected="true"] .flow__timer::before { animation-play-state: paused; }
@keyframes flow-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.flow__controls { display: flex; justify-content: flex-end; margin-top: 4px; min-height: 28px; }

.flow__step:focus-visible .flow__dot { outline: 2px solid var(--orange-text); outline-offset: 3px; }

/* Stage panel: intro on the left, modules in two columns on the right */
.flow__panels { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.flow.is-auto .flow__panel:not([hidden]) { flex: 1; }
.flow__panel {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 56px;
  padding: 40px 44px;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}
.flow__panel.is-entering { animation: flow-in .45s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes flow-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.flow__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-card); background: var(--orange-tint); color: var(--orange-text); }
.flow__meta { margin-top: 20px; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--orange-text); }
.flow__name { margin-top: 6px; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -0.018em; }
.flow__tagline { margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--body); }
.flow__modules { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-content: start; }
.flow__module { padding: 18px 0; border-top: 1px solid var(--line-strong); }
.flow__module:nth-child(-n+2) { border-top: 0; padding-top: 4px; }
.flow__module-name { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 17px; line-height: 1.35; font-weight: 600; }
.flow__module-name::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--orange); }
.flow__module-text { margin-top: 6px; padding-left: 18px; font-size: 15px; line-height: 1.55; color: var(--body); }

@media (prefers-reduced-motion: reduce) {
  .flow__panel.is-entering { animation: none; }
  .flow__line i, .flow__dot { transition: none; }
}

/* ---------- 03 Demo interface (own section now) ---------- */
.demo-section .demo { margin: 0; }
.demo-section__header { max-width: 820px; margin: 0 auto 48px; text-align: center; }
.demo-section__header .lead { margin: 16px auto 0; max-width: 640px; text-wrap: balance; }
@media (min-width: 1024px) { .demo-section__header .lead { max-width: none; } }

/* =========================================================
   02 AI assistant
   ========================================================= */
.assistant {
  min-height: 780px;
  display: grid;
  grid-template-columns: 460px 1fr;
  column-gap: 100px;
  align-items: center;
}
.assistant .lead { margin-top: 20px; }
.assistant__try-label { margin-top: 36px; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--muted); }
.assistant__questions { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  height: 52px;
  padding: 0 16px 0 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: 500 15px var(--font);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.question__arrow { display: flex; color: var(--muted); }
.question { min-height: 52px; height: auto; padding-top: 12px; padding-bottom: 12px; }

/* The question the chat is showing: tinted, with an orange edge and a "playing" indicator in place
   of the arrow. During the finished answer's hold a line fills along its foot until the next one. */
.question {
  position: relative;
  overflow: hidden;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.question::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.question::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
}
@media (hover: hover) {
  .question:hover { border-color: var(--line-strong); }
  .question:hover .question__arrow { color: var(--ink); }
}
.question:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 2px; }
.question.is-current { border-color: var(--orange-border); background: var(--orange-tint); }
.question.is-current::before { transform: scaleY(1); }
.question.is-holding::after { animation: studio-progress var(--hold, 3200ms) linear both; }
.question__live { display: none; align-items: flex-end; gap: 2px; width: 16px; height: 14px; }
.question__live i { flex: 1; height: 100%; border-radius: 1px; background: var(--orange); transform-origin: bottom; transform: scaleY(.45); }
.question.is-current .question__arrow svg { display: none; }
.question.is-current .question__live { display: flex; }
.assistant.is-running .question.is-current .question__live i { animation: question-live 1s ease-in-out infinite; }
.assistant.is-running .question.is-current .question__live i:nth-child(2) { animation-delay: -.35s; }
.assistant.is-running .question.is-current .question__live i:nth-child(3) { animation-delay: -.7s; }
@keyframes question-live { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.assistant__try-label { transition: color .25s ease; }
.assistant__try-label.is-current { color: var(--orange-text); }
@media (prefers-reduced-motion: reduce) {
  .question, .question::before, .assistant__try-label { transition: none; }
  .question.is-holding::after, .assistant.is-running .question.is-current .question__live i { animation: none; }
}

.chat__head {
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.chat__brand { display: flex; align-items: center; gap: 12px; }
.chat__avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--orange), var(--orange-deep));
  color: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat__name { font-size: 16px; font-weight: 700; }
.chat__tools { display: flex; align-items: center; gap: 8px; margin-right: -6px; }
.chat__tool { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.chat__body {
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--surface);
}
.chat__body.is-empty { justify-content: center; align-items: center; }
.chat__empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px; }
.chat__empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--chip);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat__empty-title { margin-top: 18px; font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--nav-link); }
.chat__empty-text { margin-top: 6px; max-width: 300px; font-size: 15px; line-height: 1.5; color: var(--muted); }

.chat__foot { padding: 12px 24px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.chat__foot-row { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat__channel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--orange-border);
  border-radius: var(--radius);
  background: var(--orange-tint);
  color: var(--orange-text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.chat__channel.is-picking { animation: chat-pick .5s ease; }
@keyframes chat-pick {
  0% { transform: scale(1); }
  40% { transform: scale(.95); box-shadow: 0 0 0 4px rgba(249,115,22,.15); }
  100% { transform: scale(1); }
}
.chat__question {
  align-self: flex-end;
  max-width: 420px;
  padding: 12px 16px;
  border-radius: 12px 12px 4px 12px;
  background: var(--ink);
  color: var(--surface);
  font-size: 15px;
  line-height: 1.45;
}
.chat__answer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px 12px 12px 4px;
}
.chat__text { font-size: 15px; line-height: 1.5; color: var(--ink); }
.chat__done { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--green-tint); color: var(--green); font-size: 13px; font-weight: 600; }
.chat__text strong, .chat__text b { font-weight: 600; }
.chat__table .data-table__row { grid-template-columns: 1fr 120px 120px; }
.chat__table .data-table__th { padding: 9px 14px; }
.chat__table .data-table__td { padding: 11px 14px; }
/* Animated conversation (main.js) */
.chat__meta { display: flex; align-items: center; gap: 4px; }
.chat__pause {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat__pause::before { content: ""; position: absolute; inset: -8px; } /* 44px hit area */
.chat__pause:hover { color: var(--ink); background: var(--chip); }
.chat__play-icon, .chat__pause[aria-pressed="true"] .chat__pause-icon { display: none; }
.chat__pause[aria-pressed="true"] .chat__play-icon { display: block; }

.chat__body { transition: opacity .25s ease; }
.chat__body.is-clearing { opacity: 0; }
.chat-in { animation: chat-in .35s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes chat-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.chat__thinking {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px 12px 12px 4px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}
.chat__dots { display: inline-flex; gap: 4px; }
.chat__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: chat-dot 1s ease-in-out infinite;
}
.chat__dots i:nth-child(2) { animation-delay: .15s; }
.chat__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot {
  0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
.chat__input.is-typing { caret-color: transparent; }
.chat__send { transition: opacity .2s ease; }
.chat__send.is-idle { opacity: .45; }
.chat__send.is-pressed { transform: scale(.92); transition: transform .12s ease; }
.chat__table.chat__table--kv .data-table__row { grid-template-columns: minmax(0, 1fr) auto; }

@media (prefers-reduced-motion: reduce) {
  .chat-in, .chat__dots i { animation: none; }
  .chat__body { transition: none; }
}

.chat__form {
  margin: 0;
  display: flex;
  gap: 10px;
}
.chat__input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font: 400 15px var(--font);
  color: var(--ink);
}
.chat__send {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius);
  background: var(--orange);
  color: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* =========================================================
   05 Customization: Forecasting page copy with the Customize Columns pop-up (studio.js)
   Steps above the window; the table and pop-up are rendered from data in studio.js.
   ========================================================= */
.customization { padding-top: 120px; padding-bottom: 120px; }
.customization__header { max-width: 720px; }
.customization__header .lead { margin-top: 18px; max-width: 600px; }

.studio { margin-top: 56px; }

/* Steps: the four features, with a progress line for the scene playing */
.studio__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px;
}
.studio__step {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--line-strong);
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.studio__step-title { font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -0.005em; color: var(--body); transition: color .2s ease; }
.studio__step-text { font-size: 15px; line-height: 1.55; color: var(--body); }
.studio__step:hover .studio__step-title,
.studio__step[aria-current="step"] .studio__step-title { color: var(--ink); }
.studio__progress {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
}
.studio__step[aria-current="step"] .studio__progress { transform: scaleX(1); }
.studio.is-playing .studio__step[aria-current="step"] .studio__progress { animation: studio-progress var(--dur, 5s) linear both; }
.studio.is-paused .studio__progress { animation-play-state: paused; }
@keyframes studio-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* App window */
.studio__stage { margin-top: 32px; }
.studio__viewport {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: #FAFAF9;
  box-shadow: var(--shadow-demo);
}
.studio__viewport.is-scroll { overflow-x: auto; }
.studio__sizer { position: relative; }
.studio__controls { display: flex; justify-content: flex-end; margin-top: 8px; min-height: 28px; }
.studio__meta { display: flex; align-items: center; gap: 4px; }

/* ---------- Forecasting page copy, built at 960 x 600 and scaled by studio.js ---------- */
.fx {
  --fx-blue: #2563EB;
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 800px;
  padding: 22px 24px;
  transform-origin: top left;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
  text-align: left;
  transition: opacity .3s ease;
}
.studio.is-resetting .fx { opacity: .35; }
.fx__head { display: flex; align-items: flex-start; justify-content: space-between; }
.fx__title { font-size: 20px; font-weight: 700; }
.fx__sub { margin-top: 2px; color: var(--body); }
.fx__toolbar { margin-top: 16px; display: flex; align-items: center; gap: 8px; }
.fx__toolbar > * { flex: none; }
.fx__toolbar > .fx__grow { flex: 1; }
.fx__search { display: flex; align-items: center; gap: 8px; width: 210px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--muted); }
.fx__btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-weight: 500; white-space: nowrap; transition: border-color .2s ease, box-shadow .2s ease; }
.fx__cols-btn.is-open { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,.15); }
.fx__cols-count, .fx__chip i { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--chip); font-style: normal; font-size: 11px; font-weight: 600; }
.fx__grow { flex: 1; }
.fx__chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); white-space: nowrap; color: var(--body); }
.fx__chip.is-solid { border-color: var(--orange); background: var(--orange); color: var(--surface); }
.fx__chip.is-solid i { background: rgba(255,255,255,.25); color: var(--surface); }
.fx__showing { margin: 12px 0 10px; font-weight: 500; }

.fx__table { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.fx__tr { display: grid; align-items: center; transition: background-color .3s ease; }
.fx__tr + .fx__tr { border-top: 1px solid var(--line); }
.fx__tr--head { background: #F4F3F0; }
.fx__tr.is-selected { background: #FFFBF6; box-shadow: inset 2px 0 0 var(--orange); }
.fx__th { align-self: stretch; display: flex; align-items: center; padding: 10px 12px; font-size: 10.5px; line-height: 1.25; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.fx__th.num { justify-content: flex-end; }
.fx__cell { align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 11px 12px; overflow: hidden; white-space: nowrap; }
.fx__cell.num { align-items: flex-end; font-variant-numeric: tabular-nums; }
.fx__hl { background: #FFF4EA; color: var(--orange-text); }
.fx__custom { background: var(--orange-tint); }
.fx__th.fx__custom { color: var(--orange-text); }
.fx__pname { overflow: hidden; text-overflow: ellipsis; }
.fx__asin { font-size: 11px; color: var(--fx-blue); }
.fx__sku { font-family: var(--font-mono); font-size: 10.5px; }
.fx__state { font-size: 10.5px; }
.fx__state::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.fx__state--green { color: #15803D; } .fx__state--red { color: #DC2626; } .fx__state--amber { color: #B45309; }
.fx__now { color: #DC2626; font-weight: 700; }
.fx__po { align-self: flex-start; margin-top: 2px; padding: 1px 6px; border-radius: 5px; border: 1px solid #BBF7D0; background: #F0FDF4; color: #15803D; font-size: 10.5px; font-weight: 600; }
.fx__th--act, .fx__cell--act { justify-content: center; align-items: center; }
.fx__dots { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.fx__dots i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink); }
.fx-enter { animation: fx-enter .5s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes fx-enter { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.fx-leave { opacity: 0; transition: opacity .25s ease; }

/* Customize Columns pop-up (anchored under the Columns button) */
.fx__pop {
  position: absolute;
  z-index: 2;
  top: 100px;
  left: 470px;
  width: 300px;
  max-height: calc(100% - 110px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px -12px rgba(18,24,38,.22);
}
.fx__pop-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.fx__pop-head b { font-size: 14.5px; }
.fx__pop-count { font-size: 11.5px; color: var(--body); }
.fx__pop-search { display: flex; align-items: center; gap: 8px; margin: 10px 14px 4px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); }
.fx__pop-list { flex: 1; min-height: 0; max-height: 252px; overflow-y: auto; scrollbar-width: none; padding: 4px 8px; }
.fx__pop-list::-webkit-scrollbar { display: none; }
.fx__pop.is-form .fx__pop-list, .fx__pop.is-form .fx__add-col { display: none; }
.fx__group + .fx__group { margin-top: 2px; }
.fx__group-head { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.fx__group-head .fx__box { margin-left: auto; }
.fx__caret { width: 6px; height: 6px; border-left: 1.5px solid var(--muted); border-top: 1.5px solid var(--muted); transform: rotate(45deg) translate(1px, 1px); }
.fx__item { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 6px; font-weight: 500; transition: background-color .2s ease, opacity .2s ease; }
.fx__item.is-dragging { opacity: .3; }
.fx__item--custom { color: var(--orange-text); }
.fx__item--ghost { position: absolute; z-index: 3; margin: 0; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 12px 24px -8px rgba(18,24,38,.28); pointer-events: none; }
.fx__grip { display: grid; grid-template-columns: repeat(2, 3px); gap: 2px; padding: 2px; }
.fx__grip i { width: 3px; height: 3px; border-radius: 50%; background: #B8BCC6; }
.fx__box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--line-strong); background: var(--surface); color: transparent; transition: background-color .2s ease, border-color .2s ease; }
.fx__box.is-on { border-color: var(--orange); background: var(--orange); color: var(--surface); }
.fx__box.is-locked { opacity: .55; }
.fx__add-col { display: flex; align-items: center; gap: 6px; margin: 4px 14px 8px; height: 30px; padding: 0 10px; border: 1px dashed var(--orange); border-radius: var(--radius); color: var(--orange-text); font-weight: 600; }
.fx__pop-foot { display: flex; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 11.5px; }
.fx__link { color: var(--orange-text); }
.fx__form { margin: 6px 14px 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); }
.fx__form-label { font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.fx__form-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 30px; margin: 4px 0 10px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); font-weight: 600; }
.fx__form-name.is-typing::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--ink); animation: fx-caret 1s steps(1) infinite; }
@keyframes fx-caret { 50% { opacity: 0; } }
.fx__token { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); font-size: 11px; font-weight: 500; }
.fx__op { font: 500 12px var(--font-mono); color: var(--muted); }
.fx__form-actions { display: flex; justify-content: flex-end; gap: 6px; }
.fx__form-actions span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; font-weight: 600; }
.fx__form-cancel { border: 1px solid var(--line-strong); background: var(--surface); }
.fx__form-add { background: var(--orange); color: var(--surface); }

/* Row menu and confirmation */
.fx__menu { position: absolute; z-index: 2; right: 30px; width: 170px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 30px -10px rgba(18,24,38,.25); }
.fx__menu p { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 6px; font-weight: 500; }
.fx__menu p[data-act="assign"] { background: var(--orange-tint); color: var(--orange-text); }
.fx__toast { position: absolute; z-index: 2; left: 24px; bottom: 22px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 14px 30px -10px rgba(18,24,38,.22); }
.fx__toast b { display: block; font-size: 13px; }
.fx__toast span { color: var(--body); }
.fx__toast-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green-tint); color: var(--green); }

/* ---------- "Your data / Your workspace" switch ---------- */
/* Two cards, one per demo, above the demo's own steps. Each card has four segments, one per scene,
   that fill as the demo plays; when one demo ends the other card ("Up next") takes over. */
.cz-switch { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cz-switch__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: transparent;
  font: inherit;
  color: var(--body);
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) { .cz-switch__btn:hover { background: var(--surface); } }
.cz-switch__btn[aria-selected="true"] { background: var(--surface); border-color: var(--orange-border); box-shadow: var(--shadow-toggle); }
.cz-switch__btn:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 2px; }
.cz-switch__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--chip); color: var(--muted); transition: background-color .2s ease, color .2s ease; }
.cz-switch__btn[aria-selected="true"] .cz-switch__icon { background: var(--orange-tint); color: var(--orange-text); }
.cz-switch__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cz-switch__title { font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--body); transition: color .2s ease; }
.cz-switch__btn[aria-selected="true"] .cz-switch__title { color: var(--ink); }
@media (hover: hover) { .cz-switch__btn:hover .cz-switch__title { color: var(--ink); } }
.cz-switch__desc { font-size: 14px; line-height: 1.45; color: var(--muted); }
.cz-switch__next { display: none; margin-left: auto; align-self: flex-start; flex: none; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--orange-tint); font-size: 12px; line-height: 1.4; font-weight: 600; color: var(--orange-text); }
.cz-switch.is-auto .cz-switch__btn[aria-selected="false"] .cz-switch__next { display: inline-flex; }
.cz-switch__bar { position: absolute; left: 20px; right: 20px; bottom: 10px; display: flex; gap: 4px; }
.cz-switch__bar i { position: relative; flex: 1; height: 3px; border-radius: 2px; overflow: hidden; background: var(--line); }
.cz-switch__bar i::after { content: ""; position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left center; }
.cz-switch__btn[aria-selected="true"] .cz-switch__bar i.is-done::after,
.cz-switch__btn[aria-selected="true"] .cz-switch__bar i.is-active::after { transform: scaleX(1); }
.cz-switch__btn.is-playing[aria-selected="true"] .cz-switch__bar i.is-active::after { animation: studio-progress var(--dur, 5s) linear both; }
.cz-switch__btn.is-paused .cz-switch__bar i.is-active::after { animation-play-state: paused; }
@media (max-width: 767px) {
  .cz-switch { gap: 8px; margin-top: 28px; }
  .cz-switch__btn { gap: 10px; padding: 12px 12px 20px; }
  .cz-switch__icon { width: 32px; height: 32px; }
  .cz-switch__title { font-size: 15px; }
  .cz-switch__desc { display: none; }
  .cz-switch__next { position: absolute; top: -10px; right: 10px; padding: 2px 8px; font-size: 11px; box-shadow: 0 0 0 2px var(--ground); }
  .cz-switch__bar { left: 12px; right: 12px; bottom: 9px; }
}
@media (max-width: 420px) { .cz-switch__icon { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .cz-switch__btn, .cz-switch__icon, .cz-switch__title { transition: none; }
}
.cz-panel .studio { margin-top: 32px; }
.cz-panel.is-entering { animation: studio-pop .4s cubic-bezier(.22, 1, .36, 1) both; }

/* ---------- Settings copy (Your workspace), built at 960 x 720 and scaled by settings.js ---------- */
.sx {
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 720px;
  display: flex;
  flex-direction: column;
  transform-origin: top left;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
  text-align: left;
  transition: opacity .3s ease;
}
.studio.is-resetting .sx { opacity: .35; }
.sx b { font-weight: 600; }
.sx em { font-style: normal; }
.sx__top { flex: none; height: 46px; padding: 0 20px; display: flex; align-items: center; gap: 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.sx__global { display: flex; align-items: center; gap: 8px; width: 250px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); }
.sx__global kbd { margin-left: auto; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; font: 10px var(--font-mono); }
.sx__grow { flex: 1; }
.sx__time { font-size: 11.5px; color: var(--nav-link); }
.sx__icon { display: flex; color: var(--nav-link); }
.sx__user { display: flex; align-items: center; gap: 6px; }
.sx__user i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: var(--surface); font-style: normal; font-size: 10.5px; font-weight: 600; }
.sx__header { flex: none; padding: 16px 24px 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.sx__h1 { font-size: 20px; font-weight: 700; }
.sx__desc { margin-top: 2px; color: var(--body); }
.sx__tabs { margin-top: 10px; display: flex; gap: 26px; }
.sx__tab { padding: 8px 0 10px; color: var(--nav-link); box-shadow: inset 0 -2px 0 transparent; transition: color .2s ease, box-shadow .2s ease; }
.sx__tab.is-on { color: var(--orange-text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--orange); }
.sx__body { position: relative; flex: 1; min-height: 0; padding: 18px 24px; overflow: hidden; }
.sx__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(rgba(250,250,249,0), #FAFAF9); pointer-events: none; }
.sx__pane { display: flex; flex-direction: column; gap: 14px; }
.sx__pane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sx__h2 { font-size: 16px; font-weight: 700; }
.sx__saved { margin-top: 4px; font-size: 11px; color: var(--muted); }
.sx__btn { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-weight: 600; white-space: nowrap; }
.sx__btn--primary { border-color: var(--orange); background: var(--orange); color: var(--surface); }
.sx__muted { color: var(--muted); }
.sx__label { font-weight: 600; }
.sx__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.sx__link { color: var(--orange-text); font-weight: 500; }
.sx__link--del { font-size: 11px; }
.sx__tag { padding: 2px 7px; border-radius: 5px; background: var(--chip); color: var(--ink); }

/* role cards: three columns fill the width */
.sx__roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sx__role { display: flex; flex-direction: column; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.sx__role.is-highlight { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,.15); }
.sx__role-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sx__role-head b { font-size: 13.5px; }
.sx__role-text { margin-top: 8px; flex: 1; color: var(--body); }
.sx__role-foot { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.sx__count { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--chip); font-size: 11px; }
.sx__tone-red { color: #DC2626; } .sx__tone-orange { color: var(--orange-text); } .sx__tone-purple { color: #7C3AED; }
.sx__tone-teal { color: #0F766E; } .sx__tone-green { color: #15803D; } .sx__tone-blue { color: var(--fx-blue, #2563EB); } .sx__tone-ink { color: var(--ink); }
.sx__count--red { background: #FEF2F2; color: #DC2626; } .sx__count--orange { background: var(--orange-tint); color: var(--orange-text); } .sx__count--purple { background: #F5F3FF; color: #7C3AED; }
.sx__count--teal { background: #F0FDFA; color: #0F766E; } .sx__count--green { background: #F0FDF4; color: #15803D; } .sx__count--blue { background: #EFF6FF; color: #2563EB; } .sx__count--ink { background: var(--chip); color: var(--ink); }

/* forms */
.sx__form { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.sx__form-head { display: flex; align-items: center; justify-content: space-between; }
.sx__form-head b { font-size: 13.5px; }
.sx__grid { display: grid; gap: 10px 14px; }
.sx__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx__field { display: flex; flex-direction: column; gap: 5px; }
.sx__field > span:first-child { font-weight: 500; }
.sx__field i { color: #DC2626; font-style: normal; }
.sx__input { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); white-space: nowrap; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.sx__input:empty::before { content: attr(data-ph); color: var(--muted); }
.sx__input.is-typing { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
.sx__input.is-typing::after { content: ""; flex: none; width: 1.5px; height: 1em; margin-right: auto; background: var(--ink); animation: fx-caret 1s steps(1) infinite; }
.sx__select svg { flex: none; color: var(--muted); }
.sx__note { color: var(--body); }
.sx__form-actions { display: flex; align-items: center; gap: 14px; }

/* permission grid */
.sx__perms { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sx__pr { display: grid; grid-template-columns: minmax(0, 1fr) 80px 80px 80px 80px; align-items: center; min-height: 32px; padding: 0 12px; border-top: 1px solid var(--line); }
.sx__pr > span:not(:first-child), .sx__pr > i, .sx__pr > .sx__dash { justify-self: center; }
.sx__pr--head { border-top: 0; background: #F4F3F0; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.sx__pr--group { display: block; padding: 7px 12px; background: #FFF8F1; color: var(--orange-text); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sx__pr-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sx__pr--sub { display: none; background: #FCFCFB; }
.sx__pr--sub .sx__pr-name { padding-left: 46px; font-weight: 500; color: var(--body); }
.sx__perms.is-expanded .sx__pr--sub { display: grid; animation: studio-pop .3s ease both; }
.sx__caret { display: flex; color: var(--muted); transition: transform .2s ease; }
.sx__perms.is-expanded .sx__caret { transform: rotate(90deg); }
.sx__partial { display: none; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--orange-tint); color: var(--orange-text); font-size: 10.5px; font-weight: 600; }
.sx__pr.is-partial .sx__partial { display: inline-block; animation: studio-pop .3s ease both; }
.sx__box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--line-strong); background: var(--surface); color: transparent; transition: background-color .2s ease, border-color .2s ease; }
.sx__box.is-on { border-color: var(--orange); background: var(--orange); color: var(--surface); }
.sx__box.is-partial { border-color: var(--orange); background: var(--orange); color: transparent; position: relative; }
.sx__box.is-partial::after { content: ""; position: absolute; width: 7px; height: 2px; border-radius: 1px; background: var(--surface); }
.sx__dash { color: var(--line-strong); }

/* users */
.sx__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sx__chip { padding: 5px 10px; border-radius: var(--radius); color: var(--nav-link); }
.sx__chip.is-on { background: var(--chip); color: var(--ink); }
.sx__chip b { font-weight: 500; }
.sx__search { display: flex; align-items: center; gap: 8px; width: 300px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--muted); }
.sx__table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.sx__tr { display: grid; align-items: center; min-height: 44px; padding: 0 14px; border-top: 1px solid var(--line); transition: background-color .3s ease; }
.sx__tr.is-new-row { background: #FFFBF6; }
.sx__tr--head { min-height: 36px; border-top: 0; background: #F4F3F0; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.sx__table--users .sx__tr { grid-template-columns: 1.4fr 1.8fr 1.2fr .8fr .9fr 1.2fr; }
.sx__table--wh .sx__tr { grid-template-columns: 1.6fr .7fr 1.3fr 1.2fr .9fr .6fr; }
.sx__td { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx__person { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.sx__av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: var(--surface); font-style: normal; font-size: 10.5px; font-weight: 700; }
.sx__av--orange { background: #F97316; } .sx__av--purple { background: #7C3AED; } .sx__av--teal { background: #0D9488; }
.sx__av--blue { background: #2563EB; } .sx__av--green { background: #16A34A; } .sx__av--red { background: #DC2626; }
.sx__role-pill { padding: 3px 8px; border-radius: 5px; background: var(--chip); font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.sx__status { color: #15803D; font-style: normal; }
.sx__status::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.sx__status.is-invited { color: var(--orange-text); }
.sx__status.is-off { color: var(--muted); }
.sx__acts { display: flex; gap: 12px; }
.sx__deact { color: #DC2626; }
.sx__deact.is-activate { color: #15803D; }
.sx__mono { font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.sx__toggle { display: inline-block; width: 28px; height: 16px; margin-right: 8px; border-radius: 999px; background: var(--line-strong); vertical-align: -3px; position: relative; transition: background-color .25s ease; }
.sx__toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); transition: transform .25s ease; }
.sx__toggle.is-on { background: #16A34A; }
.sx__toggle.is-on::after { transform: translateX(12px); }

/* employee tree: people list left, canvas fills the rest */
.sx__tree { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; height: 500px; }
.sx__people { display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow: hidden; }
.sx__drop { display: flex; align-items: center; justify-content: center; height: 34px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); transition: border-color .2s ease, background-color .2s ease; }
.sx__drop--small { height: 28px; font-size: 11px; }
.sx__drop.is-target { border-color: var(--orange); background: var(--orange-tint); color: var(--orange-text); }
.sx__people .sx__search { width: auto; }
.sx__avail-list { display: flex; flex-direction: column; gap: 6px; }
.sx__avail { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-weight: 600; transition: opacity .25s ease; }
.sx__avail.is-lifted { opacity: .3; }
.sx__avail--ghost { position: absolute; z-index: 3; margin: 0; box-shadow: 0 12px 24px -8px rgba(18,24,38,.28); pointer-events: none; }
.sx__canvas-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.sx__canvas-head { display: flex; justify-content: space-between; }
.sx__legend { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.sx__legend i { width: 18px; height: 2px; background: #93C5FD; }
.sx__canvas { position: relative; flex: 1; border: 1.5px dashed var(--line); border-radius: var(--radius); background-color: #FCFCFB; background-image: radial-gradient(#E5E5E1 1px, transparent 1px); background-size: 16px 16px; }
.sx__canvas.is-target { border-color: var(--orange); }
.sx__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--body); }
.sx__empty span { max-width: 300px; text-align: center; color: var(--muted); font-size: 11.5px; }
.sx__nodes { position: absolute; inset: 0; padding: 22px; display: flex; align-items: center; justify-content: center; gap: 72px; }
.sx__node { display: flex; align-items: center; gap: 10px; width: 280px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(18,24,38,.04); transition: border-color .2s ease, box-shadow .2s ease; }
.sx__node.is-target { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,.15); }
.sx__node b { display: block; }
.sx__node > div { min-width: 0; }
.sx__node > div span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx__node span { color: var(--muted); font-size: 11px; }
.sx__node .sx__rm { margin-left: auto; color: var(--muted); font-size: 11px; }
.sx__col { position: relative; display: flex; flex-direction: column; gap: 12px; }
.sx__col--reports::before { content: ""; position: absolute; left: -72px; top: 50%; width: 56px; height: 2px; background: #93C5FD; }
.sx__col--reports::after { content: ""; position: absolute; left: -16px; top: 26px; bottom: 26px; width: 2px; background: #93C5FD; }
.sx__col--reports > .sx__node { position: relative; }
.sx__col--reports > .sx__node::before { content: ""; position: absolute; left: -16px; top: 50%; width: 16px; height: 2px; background: #93C5FD; }
.sx__badge { position: absolute; left: -55px; top: calc(50% - 11px); display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #2563EB; color: var(--surface); font-size: 11px; font-weight: 700; z-index: 1; }

.sx__toast { position: absolute; z-index: 2; right: 24px; bottom: 22px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 14px 30px -10px rgba(18,24,38,.22); }
.sx__toast b { display: block; font-size: 13px; }
.sx__toast span { color: var(--body); }
.sx__toast-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green-tint); color: var(--green); }

/* ---------- Premium motion for both Customization demos ---------- */
/* focus dimming while the pop-up or row menu is open */
.fx::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(18,24,38,.07); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.fx.has-overlay::after { opacity: 1; }
.fx__pop, .fx__menu { box-shadow: 0 24px 60px -16px rgba(18,24,38,.30), 0 2px 6px rgba(18,24,38,.06); }
/* confirmations come into focus */
.fx__toast.is-new, .sx__toast.is-new { animation: demo-toast .55s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes demo-toast { from { opacity: 0; transform: translateY(10px) scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
/* softer, layered click ripple */
.studio__ring { border-width: 1.5px; animation: studio-ring .6s cubic-bezier(.22, 1, .36, 1) forwards; }
.studio__ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: rgba(249,115,22,.22); animation: studio-dot .45s ease-out forwards; }
@keyframes studio-dot { from { transform: scale(.4); opacity: 1; } to { transform: scale(1); opacity: 0; } }
/* items that change get a brief warm highlight */
.sx__role.is-highlight, .sx__tr.is-new-row { animation: demo-glow 1.6s ease-out both; }
@keyframes demo-glow { 0% { box-shadow: 0 0 0 0 rgba(249,115,22,.35); } 100% { box-shadow: 0 0 0 10px rgba(249,115,22,0); } }

/* Pop-in for anything that appears */
.is-new { animation: studio-pop .4s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes studio-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

/* Cursor and click ring */
.studio__cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  filter: drop-shadow(0 4px 8px rgba(18,24,38,.22));
}
.studio.is-playing .studio__cursor { opacity: 1; }
.studio__cursor svg { transition: transform .12s ease; transform-origin: 6px 4px; }
.studio__cursor.is-pressing svg { transform: scale(.86); }
.studio__ring { position: absolute; z-index: 4; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid var(--orange); pointer-events: none; animation: studio-ring .5s ease-out forwards; }
@keyframes studio-ring { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .studio__cursor, .studio__ring { display: none; }
  .is-new, .fx-enter, .sx__perms.is-expanded .sx__pr--sub, .sx__pr.is-partial .sx__partial, .cz-panel.is-entering, .fx__toast.is-new, .sx__toast.is-new, .sx__role.is-highlight, .sx__tr.is-new-row { animation: none; }
}

@media (max-width: 1023px) {
  .customization { padding-top: 96px; padding-bottom: 96px; }
  .studio { margin-top: 40px; }
  .studio__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .studio__step { min-height: 44px; }
}
@media (max-width: 767px) {
  .customization { padding-top: 64px; padding-bottom: 64px; }
  .studio__steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .studio__step { padding: 14px 0; }
  .studio__step-title { font-size: 16px; }
  .studio__step-text { display: none; font-size: 16px; }
  .studio__step[aria-current="step"] .studio__step-text { display: block; }
}

/* =========================================================
   05 Pricing
   ========================================================= */
.pricing {
  min-height: 1020px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pricing .section-title { text-align: center; text-wrap: wrap; }
.pricing > .lead { margin-top: 16px; max-width: 600px; text-align: center; text-wrap: balance; }

.billing-toggle {
  margin-top: 32px;
  padding: 4px;
  display: inline-flex;
  gap: 4px;
  background: var(--toggle-track);
  border-radius: var(--radius-toggle);
}
.billing-toggle__btn {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-sm);
  font: 600 14px var(--font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--body);
}
.billing-toggle__btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-toggle); }
.pricing__draft { margin-top: 14px; color: var(--body); font-size: 15px; text-align: center; }

.plans {
  margin-top: 28px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 16px;
  align-items: stretch;
}
.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.plan--featured {
  position: relative;
  border: 2px solid var(--orange);
  padding: 27px;
  box-shadow: var(--shadow-featured);
}
.plan__head { display: flex; align-items: center; justify-content: space-between; height: 24px; }
.plan__name { font-size: 18px; line-height: 1.3; font-weight: 600; }
.plan__desc { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.plan__price { margin-top: 24px; display: flex; align-items: baseline; gap: 6px; }
.plan__amount { font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan__period { font-size: 15px; color: var(--muted); }
.plan__cta { margin-top: 24px; display: flex; }
.plan__features {
  margin: 24px 0 0;
  padding: 24px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan__feature { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.4; color: var(--ink); }

.included {
  margin-top: 16px;
  width: 100%;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.included__title { flex: none; font-size: 15px; line-height: 1.4; font-weight: 600; }
.included__list {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
}
.included__item { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--ink); }
.pricing__note { margin-top: 24px; font-size: 14px; line-height: 1.4; color: var(--muted); text-align: center; }

/* =========================================================
   07 FAQ: sticky intro + help card on the left, numbered list on the right
   ========================================================= */
.faq { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: 96px; align-items: start; }
.faq__aside { position: sticky; top: 32px; }
.faq__title { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.018em; text-wrap: balance; }
.faq__help { margin-top: 36px; padding: 24px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius-panel); }
.faq__help-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-card); background: var(--orange-tint); color: var(--orange-text); }
.faq__help-title { margin-top: 16px; font-size: 18px; line-height: 1.35; font-weight: 600; }
.faq__help .text-link { margin-top: 8px; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--orange-text);
  text-decoration: none;
  white-space: nowrap;
}
.text-link svg { transition: transform .2s ease; }
.text-link:hover svg { transform: translateX(3px); }
.faq__list { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line-strong); }
.faq__q {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 18px 0;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover .faq__q-text { color: var(--orange-text); }
.faq__q:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 4px; border-radius: var(--radius); }
.faq__num { font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .2s ease; }
.faq__item[open] .faq__num { color: var(--orange-text); }
.faq__q-text { transition: color .2s ease; }
.faq__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .25s ease, color .25s ease, border-color .25s ease;
}
.faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--orange); border-color: var(--orange); color: var(--surface); }
.faq__item.is-closing .faq__icon { transform: none; background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.faq__a { overflow: hidden; }
.faq__a p { max-width: 620px; padding: 0 52px 24px 60px; font-size: 17px; line-height: 1.65; color: var(--body); }

/* =========================================================
   08 Footer: CTA row, link columns, legal bar, oversized faded wordmark
   ========================================================= */
.site-footer { position: relative; overflow: hidden; background: var(--ground); border-top: 1px solid var(--line); }
.site-footer__inner { padding: 72px var(--gutter) 0; }
.site-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--line-strong); }
.site-footer__logo { display: inline-flex; }
.site-footer__logo img { mix-blend-mode: multiply; } /* the PNG has a white background */
.site-footer__tagline { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--body); }
.site-footer__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); column-gap: 64px; padding: 48px 0; }
.site-footer__heading { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.site-footer__links { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.site-footer__link { text-decoration: none; font-size: 15px; line-height: 1.4; color: var(--body); transition: color .2s ease; }
.site-footer__link:hover { color: var(--orange-text); }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line-strong); }
.site-footer__legal { font-size: 14px; line-height: 1.4; color: var(--muted); }
.site-footer__top-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--body); text-decoration: none; }
.site-footer__top-link:hover { color: var(--orange-text); }
.site-footer__mark {
  margin: 8px 0 -0.22em;
  padding: 0 var(--gutter);
  font-size: clamp(64px, 15.5vw, 228px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.05em;
  text-align: center;
  white-space: nowrap;
  color: rgba(249,115,22,.10);
  user-select: none;
}

@media (max-width: 1023px) {
  .faq { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .faq__aside { position: static; }
  .faq__help { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
  .faq__help-title { margin-top: 0; }
  .faq__help .text-link { margin-top: 0; min-height: 44px; }
  .site-footer__inner { padding-top: 56px; }
  .site-footer__top { flex-direction: column; align-items: flex-start; }
  .site-footer__links { gap: 0; margin-top: 8px; }
  .site-footer__link, .site-footer__top-link { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 767px) {
  .faq__title { font-size: 32px; }
  .faq__q { grid-template-columns: 30px minmax(0, 1fr) 32px; gap: 10px; min-height: 64px; font-size: 17px; }
  .faq__icon { width: 32px; height: 32px; }
  .faq__a p { padding: 0 0 20px 40px; font-size: 16px; }
  .site-footer__cta { width: 100%; flex-direction: column; }
  .site-footer__cta .btn { width: 100%; }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding: 36px 0; }
  .site-footer__tagline, .site-footer__link { font-size: 16px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* These bordered elements are content-box in the design export (border adds to the set size). */
.pill--draft { box-sizing: content-box; }

/* =========================================================
   Responsive
   Desktop >= 1024px keeps the design export layout.
   1024 to 1199px: tighter columns. Tablet 768 to 1023px. Mobile < 768px.
   ========================================================= */

@media (max-width: 1199px) {
  .assistant { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: 64px; }
}

/* Touch screens at desktop widths (e.g. tablets in landscape): 44px tap targets */
@media (pointer: coarse) and (min-width: 1024px) {
  .site-nav__link { display: inline-flex; align-items: center; min-height: 44px; }
  .site-nav__actions .btn, .billing-toggle__btn { height: 44px; }
  .site-footer__links { gap: 0; margin-top: 8px; }
  .site-footer__link, .text-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Tablet and below ---------- */
@media (max-width: 1023px) {
  :root { --edge: 32px; }

  /* Nav collapses into a menu */
  .site-nav { position: relative; }
  .site-nav__logo { min-height: 44px; align-items: center; }
  .site-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .site-nav__icon-close { display: none; }
  .menu-open .site-nav__icon-open { display: none; }
  .menu-open .site-nav__icon-close { display: block; }
  .site-nav__menu {
    display: none;
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-card);
  }
  .menu-open .site-nav__menu { display: block; }
  .site-nav__links { flex-direction: column; gap: 0; }
  .site-nav__links .site-nav__link { border-bottom: 1px solid var(--line); }
  .site-nav__link { display: flex; align-items: center; min-height: 48px; font-size: 16px; }
  .site-nav__actions { margin-top: 16px; flex-direction: column; align-items: stretch; gap: 8px; }
  .site-nav__actions .btn { height: 48px; font-size: 16px; }

  /* Sections size to content */
  .hero, .assistant, .pricing, .faq, .site-footer { min-height: 0; }
  .assistant, .pricing, .faq { padding-top: 96px; padding-bottom: 96px; }
  .section-title { font-size: 40px; }

  /* Hero */
  .hero { padding-bottom: 80px; }
  .hero__intro { padding-top: 64px; }
  .hero__title { font-size: 44px; }
  .demo { margin-top: 48px; height: auto; }

  /* AI assistant: stack */
  .assistant { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .assistant__copy { max-width: 640px; }



  /* Pricing: 2 x 2 */
  .billing-toggle__btn { height: 44px; }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .plan { padding: 22px 18px; }
  .plan--featured { padding: 21px 17px; }
  .included { flex-direction: column; align-items: flex-start; gap: 16px; }
  .included__list { justify-content: flex-start; gap: 12px 28px; }

  .text-link { min-height: 44px; }


  /* Footer */
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  :root { --edge: 20px; }

  .assistant, .pricing, .faq { padding-top: 64px; padding-bottom: 64px; }
  .section-title { font-size: 34px; }

  /* Hero */
  .hero { padding-bottom: 56px; }
  .hero__intro { padding-top: 48px; }
  .hero__title { font-size: 34px; }
  .hero__lead { font-size: 17px; }
  .hero__actions { flex-direction: column; width: 100%; max-width: 400px; }
  .hero__actions .btn { width: 100%; }
  .demo { margin-top: 40px; }

  /* AI assistant */
  .assistant { row-gap: 40px; }
  .question { height: auto; min-height: 52px; padding: 12px 14px 12px 16px; font-size: 16px; }
  .chat__head { padding: 0 16px; }
  .chat__body { padding: 20px 16px; }
  .chat__question { max-width: 85%; }
  .chat__answer { padding: 14px; }
  .chat__text, .chat__question { font-size: 16px; }
  .chat__table .data-table__row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .chat__table .data-table__th, .chat__table .data-table__td { padding: 10px; }
  .chat__foot { padding: 12px 16px; }
  .chat__tools { gap: 0; }
  .chat__body.is-empty { padding-top: 32px; padding-bottom: 32px; }
  .chat__input { font-size: 16px; }


  /* Pricing: one column, Growth first */
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan--featured { order: -1; }
  .plan { padding: 24px; }
  .plan--featured { padding: 23px; }
  .plan__desc, .plan__feature, .included__item, .included__title, .btn--block { font-size: 16px; }
  .included { padding: 20px; }
  .included__list { gap: 12px 24px; }

  /* FAQ */


  /* Footer */
}

/* =========================================================
   Page rhythm: one white background and one section spacing.
   Comes last so it wins over the per-section heights and paddings above.
   ========================================================= */
:root { --section-y: 64px; }
.hero, .assistant, .customization, .pricing, .faq, .site-footer { min-height: 0; }
.hero { padding-bottom: var(--section-y); }
.assistant, .customization, .pricing, .faq { padding-top: var(--section-y); padding-bottom: var(--section-y); }
@media (max-width: 1023px) { :root { --section-y: 56px; } }
@media (max-width: 767px) { :root { --section-y: 44px; } }

.demo-section, .modules { padding-top: var(--section-y); padding-bottom: var(--section-y); }
@media (max-width: 1023px) {
}
@media (max-width: 767px) {
  .flow { margin-top: 32px; }
  /* phones: the rail scrolls sideways; the panel stacks */
  .flow__rail { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scroll-snap-type: x mandatory; }
  .flow__rail::-webkit-scrollbar { display: none; }
  .flow__step { flex: none; width: 112px; scroll-snap-align: start; padding-bottom: 12px; }
  .flow__line { display: none; }
  .flow__step-name { font-size: 15px; }
  .flow__step-count { font-size: 13px; }
  .flow__panel { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 20px; }
  .flow__name { font-size: 26px; }
  .flow__modules { grid-template-columns: minmax(0, 1fr); }
  .flow__module:nth-child(2) { border-top: 1px solid var(--line-strong); padding-top: 18px; }
  .flow__module-text { font-size: 16px; }
  .demo-section__header { margin-bottom: 32px; }
  /* phones: one centred column, no dividers */
  .stats { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; }
  .stats__item { padding: 0; white-space: normal; justify-content: center; text-align: center; }
  .stats__item + .stats__item { border-left: 0; }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .flow__panel { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px; }
}

/* tablet: stats as 2 x 2, divider only between the two columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .stats { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; row-gap: 10px; }
  .stats__item:nth-child(odd) { border-left: 0; justify-content: flex-end; }
}
.billing-toggle__save { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #FFEDD5; color: #C2410C; font-size: 12px; font-weight: 700; }

/* ===== Legal pages (privacy, cookies, terms) ===== */
.legal { padding: 56px 16px 96px; }
.legal__inner { max-width: 1080px; margin: 0 auto; }
.legal__head { max-width: 720px; }
.legal__title { margin: 8px 0 0; font-size: clamp(32px, 5vw, 44px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; color: var(--ink); }
.legal__meta { margin: 12px 0 0; font-size: 14px; color: var(--body); }
.legal__draft { margin: 16px 0 0; padding: 10px 14px; border: 1px dashed var(--line-draft); border-radius: 10px; font-size: 14px; color: var(--body); }
.legal__intro { margin: 20px 0 0; font-size: 18px; line-height: 1.6; color: var(--body); }
.legal__layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.legal__toc { position: sticky; top: 96px; align-self: start; }
.legal__toc-title { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.legal__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.legal__toc a { font-size: 14px; color: var(--body); text-decoration: none; }
.legal__toc a:hover { color: var(--orange-text); }
.legal__body { max-width: 720px; }
.legal__section { scroll-margin-top: 96px; }
.legal__section + .legal__section { margin-top: 40px; }
.legal__h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.legal__body p, .legal__body li { font-size: 16px; line-height: 1.7; color: var(--body); }
.legal__body p { margin: 0 0 12px; }
.legal__body ul { margin: 0 0 12px; padding-left: 20px; }
.legal__body li + li { margin-top: 6px; }
.legal__body b { color: var(--ink); font-weight: 600; }
.legal__body a { color: var(--orange-text); }
.legal__table-wrap { overflow-x: auto; margin: 4px 0 12px; border: 1px solid var(--line); border-radius: 10px; }
.legal__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal__table th, .legal__table td { padding: 10px 12px; text-align: left; vertical-align: top; color: var(--body); border-bottom: 1px solid var(--line); }
.legal__table th { color: var(--ink); font-weight: 600; }
.legal__table tr:last-child td { border-bottom: 0; }
.ph { background: var(--orange-tint); color: var(--orange-text); padding: 0 3px; border-radius: 4px; }
@media (max-width: 860px) {
  .legal__layout { grid-template-columns: 1fr; gap: 28px; }
  .legal__toc { position: static; }
}

/* Footer social links */
.site-footer__social { display: flex; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.site-footer__social-link { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--body); background: var(--surface); transition: color .2s, border-color .2s; }
.site-footer__social-link:hover { color: var(--orange-text); border-color: var(--orange-border); }
@media (pointer: coarse) { .site-footer__social-link { width: 44px; height: 44px; } }

/* Live demo (app.sellerverse.ai/demo) in the frame under the hero. hero-tour.js plays a cursor tour
   through the sample-data app copy, and on a click (mouse screens 768px+) fades the live demo in over it.
   Phones keep the tour and get a button that opens the demo in a new tab. */
.demo__bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 13px; }
.demo__bar-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.demo__live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px #DCFCE7; }
.demo__open { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 600; color: var(--orange-text); text-decoration: none; }
.demo__open:hover { text-decoration: underline; }
.demo__live { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #FAFAF9; opacity: 0; transition: opacity .4s ease; z-index: 2; }
.demo__screen.is-live .demo__live { opacity: 1; }
.demo__screen.is-live .app { visibility: hidden; }
.demo__cover-btn { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3; display: none; }
@media (max-width: 767px) { .demo__cover-btn { display: inline-flex; } .demo__bar .pill { display: none; } }

/* Tour cursor, click ripple and dropdown menus inside the app copy (hero-tour.js) */
.tour__cursor { position: absolute; top: 0; left: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .4s ease; filter: drop-shadow(0 4px 8px rgba(18,24,38,.22)); will-change: transform; }
.demo.is-touring .tour__cursor { opacity: 1; }
.tour__cursor svg { display: block; transition: transform .14s ease; transform-origin: 5px 3px; }
.tour__cursor.is-pressing svg { transform: scale(.86); }
.tour__ring { position: absolute; z-index: 5; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid var(--orange); pointer-events: none; animation: tour-ring .65s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes tour-ring { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
.app__menu { position: absolute; z-index: 5; min-width: 150px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(18,24,38,.10); font-size: 11.5px; transform-origin: top left; animation: app-menu-in .22s cubic-bezier(.22, 1, .36, 1); }
.app__menu.is-closing { animation: app-menu-out .18s ease forwards; }
.app__menu-item { display: block; padding: 6px 9px; border-radius: 6px; color: var(--ink); white-space: nowrap; transition: background .18s ease, color .18s ease; }
.app__menu-item.is-on { background: var(--orange-tint); color: var(--orange-text); font-weight: 600; }
@keyframes app-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes app-menu-out { to { opacity: 0; transform: translateY(-3px) scale(.98); } }
.app__view.is-entering { animation: app-view-in .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes app-view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.app__view.is-refreshing .app__tile-value, .app__view.is-refreshing .app__table, .app__view.is-refreshing .app__chart { animation: app-refresh .6s ease; }
@keyframes app-refresh { 0% { opacity: 1; } 35% { opacity: .35; } 100% { opacity: 1; } }
.app__btn.is-updated { animation: app-btn-flash .7s ease; }
@keyframes app-btn-flash { 0% { border-color: var(--orange); background: var(--orange-tint); } 100% { border-color: var(--line); background: var(--surface); } }
.app__chip { transition: background .25s ease, color .25s ease, border-color .25s ease; }

/* Preview -> live demo (hero-tour.js). The tour plays until the visitor clicks: Try it live in the bar,
   or anywhere on the screen, where hovering shows a centred prompt. While the live demo starts the
   prompt turns into a loader; once it is in, a short note says the visitor is in control, the dot
   turns green and the bar offers Back to preview. Mouse screens 768px+ only; phones keep the
   "Try the demo" button, which opens the demo in a new tab. */
.demo__status { min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo__status-text { transition: color .3s ease; }
.demo__go { display: none; flex: none; align-items: center; gap: 6px; height: 28px; margin-left: auto; padding: 0 11px 0 9px; border: 1px solid var(--orange-border); border-radius: var(--radius-sm); background: var(--orange-tint); font: 600 13px var(--font); color: var(--orange-text); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
@media (hover: hover) { .demo__go:hover { background: #FFEDD5; border-color: var(--orange); } }
.demo__go:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 2px; }
.demo__go-back { display: none; }
.demo__start { position: absolute; inset: 0; z-index: 4; display: none; align-items: center; justify-content: center; padding: 0; border: 0; background: rgba(18,24,38,0); font: inherit; color: var(--ink); cursor: pointer; transition: background-color .3s ease; }
.demo__start-card, .demo__start-wait { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: rgba(255,255,255,.96); box-shadow: 0 18px 40px -16px rgba(18,24,38,.35); text-align: left; opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
.demo__start-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--orange); color: var(--surface); }
.demo__start-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.35; color: var(--body); }
.demo__start-text b { font-size: 15px; font-weight: 600; color: var(--ink); }
.demo__start-wait { position: absolute; padding: 12px 18px; gap: 10px; font-size: 14px; font-weight: 600; }
.demo__start-wait i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--orange-border); border-top-color: var(--orange); animation: demo-spin .8s linear infinite; }
.demo__start:hover, .demo__start:focus-visible { background: rgba(18,24,38,.06); outline: none; }
.demo__start:hover .demo__start-card, .demo__start:focus-visible .demo__start-card { opacity: 1; transform: none; }
.demo__screen.is-waking .demo__start { background: rgba(18,24,38,.06); cursor: progress; }
.demo__screen.is-waking .demo__start-card { opacity: 0; }
.demo__screen.is-waking .demo__start-wait { opacity: 1; transform: none; }
.demo__screen.is-live .demo__start { display: none; }
.demo__toast { position: absolute; top: 14px; left: 50%; z-index: 5; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -8px); transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
.demo__toast-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }
.demo__screen.is-greeting .demo__toast { opacity: 1; transform: translate(-50%, 0); }
.demo__live { visibility: hidden; pointer-events: none; }
.demo__screen.is-live .demo__live { visibility: visible; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .demo__go { display: inline-flex; }
  .demo__go + .demo__open { margin-left: 0; }
  .demo__start { display: flex; }
}
@media (max-width: 1023px) { .demo__status { display: none; } }
/* Preview: the dot is orange and still. Live: green and pulsing, the bar button goes back. */
.demo:not(.is-live) .demo__live-dot { background: var(--orange); box-shadow: 0 0 0 3px var(--orange-tint); }
.demo.is-live .demo__live-dot { animation: demo-pulse 1.8s ease-out infinite; }
.demo.is-live .demo__status-text { color: var(--green); font-weight: 500; }
.demo.is-live .demo__go { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
@media (hover: hover) { .demo.is-live .demo__go:hover { background: var(--chip); border-color: var(--line-strong); } }
.demo.is-live .demo__go-play { display: none; }
.demo.is-live .demo__go-back { display: block; }
.demo.is-waking .demo__go { cursor: progress; opacity: .7; }
@keyframes demo-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); } 100% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } }
@keyframes demo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .demo__start, .demo__start-card, .demo__start-wait, .demo__toast { transition: none; }
  .demo.is-live .demo__live-dot { animation: none; }
}

/* Moving light border around the demo frame */
@property --demo-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.demo { position: relative; isolation: isolate; }
.demo::before { content: ""; position: absolute; inset: 0; z-index: 7; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--demo-angle), transparent 0deg, transparent 230deg, rgba(253,186,116,.0) 250deg, #FDBA74 300deg, #F97316 330deg, #FDBA74 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: demo-border 7s linear infinite; opacity: .9; transition: opacity .4s ease; }
.demo:hover::before { opacity: 1; animation-duration: 4.5s; }
@keyframes demo-border { to { --demo-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .demo::before { animation: none; background: linear-gradient(135deg, #FDBA74, rgba(253,186,116,.25) 40%, rgba(253,186,116,.25) 60%, #FDBA74); }
  .app__view.is-entering, .app__view.is-refreshing *, .app__btn.is-updated { animation: none; }
}

/* Demo frame: copy of the live demo (hero-tour.js) and the live demo itself, both drawn at 1440 x 900
   and scaled to the frame width (--demo-scale), so they line up exactly. */
.demo__copy, .demo__screen .demo__live { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; transform: scale(var(--demo-scale, .8)); transform-origin: 0 0; }
.demo__copy { z-index: 1; opacity: 0; transition: opacity .5s ease; }
.demo__screen.has-copy .demo__copy { opacity: 1; }
.demo__screen .demo__live { inset: auto; }
.demo__screen.is-live .demo__copy { visibility: hidden; transition: visibility 0s .4s; }