/* ============================================================
   BRIX marketing site
   Brand: violet #7C3AED -> #8B5CF6 -> #A78BFA (hero gradient)
          AI blue #38BDF8 · growth green #22C55E · dark #140B2D
   Type: Sora (display) · Inter (body)
   ============================================================ */

:root {
  /* --- BRIX palette -------------------------------------------------
     The swatches from the brand sheet, under their own names.
     Everything below is expressed in terms of these, so a change to
     the palette is a change to this block and nothing else.

     The violet ramp sits one step lighter than the sheet prints it,
     because the sheet's #6D28D9 read as too heavy across a whole
     page. Both of the sheet's violets are still on the page: its
     Secondary is the resting colour now, and its Primary is the
     pressed and hover tone below (--brand-deep). One step lighter
     again would put white-on-violet at 4.2:1 and fail AA, so this
     is as light as the brand colour can go. */
  --violet: #7C3AED;         /* resting brand (sheet: Secondary Violet) */
  --violet-2: #8B5CF6;       /* second gradient stop                    */
  --violet-3: #A78BFA;       /* gradient tail, as the sheet prints it   */
  --ai-blue: #38BDF8;        /* AI Blue Accent   */
  --growth-green: #22C55E;   /* Growth Green     */
  --bg-light: #F8F6FF;       /* Light Background */
  --bg-card: #FFFFFF;        /* Card Background  */
  --bg-dark: #140B2D;        /* Dark Background  */
  --text-heading: #120A24;   /* Heading Text     */
  --text-body: #5F5570;      /* Body Text        */

  /* --- roles --------------------------------------------------------
     The names the stylesheet actually uses. They kept the spellings
     they had under the old blue brand, so no rule below had to be
     renamed when the palette changed. */
  --brand: var(--violet);
  --brand-deep: #6D28D9;   /* the sheet's Primary Violet */
  --brand-soft: #EDE9FE;
  --brand-ghost: var(--bg-light);
  --navy: var(--bg-dark);
  --navy-2: #1F1240;
  --navy-3: #2E1D5C;
  --ink: var(--text-heading);
  --ink-2: var(--text-body);
  --ink-3: #8B819C;
  --paper: var(--bg-card);
  --paper-soft: var(--bg-light);
  --line: #E7E1F5;
  --grad-a: var(--violet);
  --grad-b: var(--violet-3);
  --green: var(--growth-green);
  --green-deep: #15803D;
  --gold: #F59E0B;
  --reward-grad: linear-gradient(90deg, #8B5CF6, #A78BFA);
  --grad-strong: linear-gradient(92deg, #7C3AED, #8B5CF6);
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-1: 0 2px 8px rgba(23, 20, 46, .05), 0 12px 32px rgba(23, 20, 46, .07);
  --shadow-2: 0 4px 12px rgba(23, 20, 46, .07), 0 24px 56px rgba(23, 20, 46, .13);
  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --nav-h: 72px;
  /* height of the admin draft-preview bar. 0 on every public page, so
     the nav and sticky offsets below are unaffected by it existing */
  --preview-h: 0px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* keep the fixed nav from covering the top of any anchor-linked section */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Sideways overflow is clipped on BOTH elements, not body alone.
   -------------------------------------------------------------------
   body's overflow only propagates to the viewport while html is
   visible, and Chrome on Android still sizes the layout viewport to
   the wider content: the page gets a strip of empty space down the
   right, and the fixed nav is laid out against that wider box, which
   puts the burger past the right edge of the screen. iOS Safari clamps
   it, which is why this only ever showed up on Android.

   clip rather than hidden: hidden would make html a scroll container
   and change how position:sticky resolves (the article sidebar). clip
   does not, so nothing else has to move. The hidden pair below it is
   the fallback for a browser too old for clip, where the behaviour is
   no worse than it already was. */
html, body { overflow-x: hidden; }

@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

img, svg { display: inline-block; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--brand); color: #fff; }

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.4vw, 4.1rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }

h1 em {
  font-style: normal;
  background: linear-gradient(92deg, #7C3AED 10%, #8B5CF6 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}

.eyebrow-warm {
  background: linear-gradient(92deg, #A78BFA, #38BDF8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- layout utils ---------- */

.container {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px;
}

.container-narrow { max-width: 800px; }

.section { padding: 76px 0; }
.section-soft { background: var(--paper-soft); }

.section-dark {
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.section-dark h2 { color: #fff; }
.section-dark .dd-lead { color: rgba(255,255,255,.72); }

.section-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head .section-sub {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 1.06rem;
}

.section-head-row {
  max-width: none;
  text-align: left;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 600;
  font-size: .95rem;
  padding: 13px 24px;
  border-radius: 12px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}

.btn-lg { padding: 16px 30px; font-size: 1.02rem; border-radius: 14px; }
.btn-sm { padding: 9px 18px; font-size: .88rem; }

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, .32);
}
.btn-primary:hover {
  background: var(--brand-deep);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 24px rgba(124, 58, 237, .45);
}

.btn-ghost {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 18px rgba(124, 58, 237, .14);
}

.btn-outline {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.btn-outline:hover {
  background: var(--brand-ghost);
  transform: translateY(-1px) scale(1.02);
}

.btn-white {
  background: #fff;
  color: var(--brand-deep);
  box-shadow: 0 6px 20px rgba(9, 5, 34, .3);
}
.btn-white:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 12px 32px rgba(9, 5, 34, .4);
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: var(--preview-h) 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
}

/* the scrolled background/blur lives on ::before, not .nav itself. A real
   backdrop-filter on .nav would make it an ancestor-with-backdrop-filter of
   .nav-drawer, and WebKit fails to render a backdrop-filter nested inside
   another one (the drawer silently loses its own blur/tint once scrolled) */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

.nav.scrolled::before {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(23, 20, 46, .05);
}

.nav-in {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.42rem;
  letter-spacing: -0.03em;
}
.logo-mark { width: 27px; height: 27px; }
.logo-img { height: 30px; width: auto; display: block; }
.footer .logo-img { height: 27px; }

.nav-links {
  display: flex;
  gap: 34px;
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink-2);
}
.nav-links a { transition: color .15s ease; padding: 6px 0; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 14px; }

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  align-items: center;
  border-radius: 10px;
}
.nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* absolute (not fixed): the scrolled nav's backdrop-filter makes .nav a
   containing block, which would collapse a fixed drawer to nav height */
.nav-drawer {
  display: none;
  position: absolute;
  top: calc(var(--nav-h) - 8px);
  right: 16px;
  width: min(244px, calc(100vw - 32px));
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 18px;
  box-shadow: 0 24px 50px -12px rgba(23, 20, 46, .3);
  padding: 10px;
  flex-direction: column;
  gap: 2px;
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-10px) scale(.96);
  pointer-events: none;
  transition: opacity .2s ease, transform .26s cubic-bezier(.32,.72,.28,1);
}
.nav-drawer.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.nav-drawer a {
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  transition: background .15s ease, color .15s ease;
}
.nav-drawer a:hover { background: rgba(124, 58, 237, .1); color: var(--brand); }
.nav-drawer .btn { margin-top: 8px; justify-content: center; }
/* .nav-drawer a sets the link colour and outranks .btn-primary on
   specificity, which left the drawer's install button reading black
   on blue. Restated here, where it wins. */
.nav-drawer .btn-primary { color: #fff; }

/* ---------- nav: the Resources menu ---------- */

/* Case studies, blog, guides and tutorials are one idea to a visitor, so
   they sit behind one button instead of four links elbowing Features and
   Pricing down the bar.

   It opens on click, never on hover. A hover menu opens itself while a
   trackpad is only passing through, and a touch screen has no hover to
   give, so the phone would be left with a control that cannot be worked
   at all. The same button expands a nested list inside the burger
   drawer, so both widths behave the same way. */

.nav-caret {
  width: 12px;
  height: 12px;
  margin-left: 5px;
  flex-shrink: 0;
  transition: transform .22s ease;
}

.nav-menu { position: relative; }

.nav-menu-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: color .15s ease;
}
.nav-menu-btn:hover,
.nav-menu-btn.active,
.nav-menu.open .nav-menu-btn { color: var(--ink); }
.nav-menu.open .nav-caret { transform: rotate(180deg); }

/* The same glass as the burger drawer: one visitor may well meet both,
   and two different popovers on one site read as two different sites. */
.nav-menu-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 16px;
  box-shadow: 0 24px 50px -12px rgba(23, 20, 46, .3);
  transform-origin: top center;
  opacity: 0;
  transform: translate(-50%, -8px) scale(.96);
  pointer-events: none;
  transition: opacity .18s ease, transform .24s cubic-bezier(.32,.72,.28,1);
}
.nav-menu.open .nav-menu-panel {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}

/* Overrides .nav-links a, which is sized for a row and not for a list. */
.nav-links .nav-menu-panel a {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  transition: background .15s ease, color .15s ease;
}
.nav-links .nav-menu-panel a:hover,
.nav-links .nav-menu-panel a.active {
  background: rgba(124, 58, 237, .1);
  color: var(--brand);
}

/* ---------- the same menu inside the burger drawer ---------- */

.nav-drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.nav-drawer-toggle:hover { background: rgba(124, 58, 237, .1); color: var(--brand); }
.nav-drawer-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

/* Collapsed by a grid row rather than a max-height guess, so the open
   height is whatever the list actually measures and a fifth link later
   cannot end up clipped. */
.nav-drawer-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .26s cubic-bezier(.32,.72,.28,1);
}
.nav-drawer-sub.open { grid-template-rows: 1fr; }
.nav-drawer-sub > div {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-drawer-sub a {
  padding-left: 28px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-2);
}

/* ---------- admin draft-preview bar ---------- */

/* The nav is fixed at the top of the viewport, so a preview bar left in
   normal flow ends up underneath it. Instead the bar is fixed above the
   nav and the nav is pushed down by its height, which keeps the two
   together as you scroll. Everything else shifts down with the body
   padding, and the sticky offsets that were measured from the nav get
   the same allowance added. */
body.has-preview-bar {
  --preview-h: 44px;
  padding-top: var(--preview-h);
}

.preview-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200; /* above the nav */
  height: var(--preview-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  background: #140B2D;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.3;
  text-align: center;
  overflow: hidden; /* nothing bleeds down over the nav */
}
.preview-bar a { color: #A78BFA; text-decoration: underline; white-space: nowrap; }
.preview-bar a:hover { color: #fff; }

body.has-preview-bar .post-aside { top: calc(var(--nav-h) + var(--preview-h) + 26px); }
body.has-preview-bar [id] { scroll-margin-top: calc(var(--nav-h) + var(--preview-h) + 24px); }
body.has-preview-bar .cs-article h2[id],
body.has-preview-bar .cs-article h3[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--preview-h) + 20px);
}

@media (max-width: 680px) {
  .preview-bar { font-size: .8rem; gap: 8px; }
  .preview-bar-note { display: none; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: calc(var(--nav-h) + 52px) 0 64px;
  background: var(--paper-soft);
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 420px at 78% 30%, rgba(124, 58, 237, .13), transparent 65%),
    radial-gradient(480px 380px at 88% 68%, rgba(56, 189, 248, .09), transparent 65%),
    radial-gradient(400px 300px at 8% 85%, rgba(139, 92, 246, .07), transparent 65%);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 56px;
  align-items: center;
}

.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 16px 7px 13px;
  margin-bottom: 26px;
  box-shadow: 0 2px 10px rgba(23,20,46,.05);
}
.hero-rating b { color: var(--ink); }
.stars { color: var(--gold); letter-spacing: 2px; font-size: .82rem; }

.hero-sub {
  margin-top: 22px;
  font-size: 1.13rem;
  color: var(--ink-2);
  max-width: 32em;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-note {
  margin-top: 18px;
  font-size: .86rem;
  color: var(--ink-3);
}

.hero-visual { position: relative; }

.hero-chip {
  position: absolute;
  font-size: .8rem;
  font-weight: 700;
  padding: 9px 15px;
  border-radius: 100px;
  background: #fff;
  box-shadow: var(--shadow-2);
  white-space: nowrap;
}
.hero-chip-1 {
  top: -16px;
  left: 2%;
  color: var(--green-deep);
  animation: float 5.2s ease-in-out infinite;
}
.hero-chip-2 {
  bottom: -16px;
  right: 2%;
  color: var(--brand);
  animation: float 6s ease-in-out .8s infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ---------- cart mock (signature) ---------- */

.cart-mock {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 22px;
  max-width: 400px;
  margin-inline: auto;
  border: 1px solid rgba(231, 225, 245, .8);
}

.cm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cm-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.cm-badge {
  font-size: .74rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-soft);
  padding: 4px 11px;
  border-radius: 100px;
}

.cm-goal { margin-bottom: 16px; }

.cm-msg {
  font-size: .86rem;
  color: var(--ink-2);
  margin-bottom: 12px;
  min-height: 1.5em;
}
.cm-msg b { color: var(--ink); }
.cm-msg.msg-pop { animation: msgpop .4s ease; }
@keyframes msgpop {
  0% { transform: scale(.96); opacity: .4; }
  100% { transform: scale(1); opacity: 1; }
}

.cm-track {
  position: relative;
  height: 12px;
  background: var(--paper-soft);
  border-radius: 100px;
  margin: 14px 0 10px;
}

.cm-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 100px;
  background: var(--reward-grad);
  transition: width 1s cubic-bezier(.3,.9,.35,1);
  min-width: 12px;
}

.cm-node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
  z-index: 2;
}
.cm-node.is-unlocked {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  animation: nodepop .45s cubic-bezier(.3,1.6,.5,1);
}
@keyframes nodepop {
  0% { transform: translate(-50%, -50%) scale(.6); }
  60% { transform: translate(-50%, -50%) scale(1.25); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.cm-tiers {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  font-weight: 600;
  color: var(--ink-3);
  padding-right: 2px;
}

.cm-items { display: flex; flex-direction: column; }

.cm-item {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--paper-soft);
}
.cm-item.is-in { display: flex; animation: itemin .45s ease; }
@keyframes itemin {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cm-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.th-a { background: linear-gradient(135deg, #B6E2C8, #6FA88B); }
.th-b { background: linear-gradient(135deg, #4A4E6A, #23263C); }
.th-c { background: linear-gradient(135deg, #F3D9B0, #D9A05B); }
.th-gift { background: linear-gradient(135deg, #E2F8EC, #BFEED2); }

.cm-item-info { flex: 1; line-height: 1.3; min-width: 0; }
.cm-item-info b { display: block; font-size: .88rem; font-weight: 600; }
.cm-item-info small { color: var(--ink-3); font-size: .76rem; }

.cm-price { font-weight: 700; font-size: .88rem; }
.cm-price-free { color: var(--green-deep); letter-spacing: .04em; }

.cm-item-gift.is-in {
  background: linear-gradient(90deg, rgba(34, 197, 94, .05), rgba(139, 92, 246, .05));
  border-radius: 12px;
  padding-inline: 8px;
  border-bottom: 0;
}

.cm-upsell {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--brand-ghost);
  border: 1px dashed rgba(124, 58, 237, .35);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 14px 0 4px;
  max-height: 90px;
  overflow: hidden;
  transition: opacity .35s ease, max-height .45s ease .1s, padding .45s ease .1s, margin .45s ease .1s, border-width .45s ease .1s;
}
.cm-upsell.is-away {
  opacity: 0;
  max-height: 0;
  padding-block: 0;
  margin-block: 0;
  border-width: 0;
}
.cm-upsell .cm-thumb { width: 38px; height: 38px; }

.cm-add {
  flex: none;
  font-size: .78rem;
  font-weight: 700;
  color: var(--brand);
  background: #fff;
  border: 1.5px solid var(--brand);
  padding: 7px 12px;
  border-radius: 9px;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.cm-add.pressed, .cm-add:hover { background: var(--brand); color: #fff; transform: scale(.96); }

.cm-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 12px;
  font-size: .92rem;
  color: var(--ink-2);
}
.cm-foot b { font-size: 1.12rem; color: var(--ink); font-family: var(--font-display); }

.cm-checkout {
  width: 100%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  padding: 14px;
  border-radius: 12px;
}

.cm-coupon-row { display: flex; gap: 8px; margin: 14px 0 2px; }

.cart-mock.is-resetting { transition: opacity .35s ease; opacity: .35; }

.confetti-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* ---------- AOV / revenue calculator (hero) ---------- */

.calc-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 26px;
  max-width: 420px;
  margin-inline: auto;
  border: 1px solid rgba(231, 225, 245, .8);
}

.calc-badge {
  display: inline-flex;
  align-items: center;
  font-size: .74rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-soft);
  padding: 4px 11px;
  border-radius: 100px;
  margin-bottom: 12px;
}

.calc-head h3 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.3;
  margin-bottom: 8px;
}

.calc-sub {
  font-size: .86rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 20px;
}

.calc-field { margin-bottom: 14px; }
.calc-field label {
  display: block;
  margin-bottom: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
}
.calc-field label span { font-weight: 500; color: var(--ink-3); font-size: .76rem; }

.calc-input {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  padding: 0 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.calc-input:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .14);
}
.calc-input span { color: var(--ink-3); font-weight: 600; margin-right: 4px; }
.calc-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 11px 0;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  background: transparent;
}
.calc-input input:focus { outline: none; }

.calc-select {
  width: 100%;
  padding: 11px 38px 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background-color: var(--paper);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B819C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.calc-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .14);
}

.calc-btn { width: 100%; margin-top: 10px; }

/* Green marks a result going up, per docs/brand-palette.md: this is
   the one figure on the page reporting a gain rather than a feature. */
.calc-result {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.calc-result-label { font-size: .82rem; color: var(--ink-2); margin-bottom: 4px; }
.calc-result-fig {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.1rem;
  color: var(--green-deep);
  margin-bottom: 14px;
}
.calc-result-fig small { font-size: .95rem; font-weight: 600; color: var(--ink-3); margin-left: 4px; }
.calc-result-row {
  display: flex;
  justify-content: space-between;
  font-size: .86rem;
  color: var(--ink-2);
  padding: 7px 0;
}
.calc-result-row + .calc-result-row { border-top: 1px dashed var(--line); }
.calc-result-row b { color: var(--ink); }
.calc-result-note {
  margin-top: 12px;
  font-size: .78rem;
  color: var(--ink-3);
  line-height: 1.5;
}
.calc-result.calc-pop { animation: calcpop .4s ease; }
@keyframes calcpop {
  0% { transform: scale(.97); opacity: .5; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 680px) {
  .calc-card { padding: 20px; }
  .calc-result-fig { font-size: 1.7rem; }
}

/* ---------- AOV calculator page (/aov-calculator) ----------
   The calculator from /digital, in the site's own theme: live (nothing
   to press), currency chips, and a dark result panel. The inputs reuse
   .calc-field and .calc-input from the hero calculator above. Green is
   only the result. */

.calc-tool {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 24px;
  max-width: 1020px;
  margin-inline: auto;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

.calc-tool-in { padding: 8px 10px; }

.calc-tool-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  margin-bottom: 18px;
}
.calc-tool-head h2 { font-size: 1.15rem; }
.calc-tool-hint { font-size: .8rem; font-weight: 600; color: var(--brand-deep); }

.calc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-chip {
  padding: 7px 13px;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.calc-chip:hover { border-color: var(--brand); color: var(--brand-deep); }
.calc-chip[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.calc-chip[aria-pressed="true"]:hover { background: var(--brand-deep); border-color: var(--brand-deep); }

/* the result panel */
.calc-out {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
}
.calc-out::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--violet) 55%, transparent), transparent 70%);
  pointer-events: none;
}
.calc-out > * { position: relative; }

.calc-out-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.calc-out-label { font-size: .92rem; font-weight: 600; color: rgba(255, 255, 255, .72); }

.calc-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .08);
  color: var(--violet-3);
  font-size: .74rem;
  font-weight: 700;
}
.calc-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--violet-3);
  animation: calclive 1.6s ease-out infinite;
}
@keyframes calclive {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--violet-3) 60%, transparent); }
  100% { box-shadow: 0 0 0 8px transparent; }
}

.calc-out-fig {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--green);
  transform-origin: left center;
}
.calc-out-fig small {
  margin-left: 6px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .6);
}
.calc-out-fig.calc-pop { animation: calcpop .4s ease; }

.calc-out-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .95rem;
  color: rgba(255, 255, 255, .72);
}
.calc-out-row b { color: #fff; }
.calc-out-row b.calc-up { color: var(--green); }
.calc-out-note { font-size: .84rem; line-height: 1.5; color: rgba(255, 255, 255, .62); }
.calc-out .btn { margin-top: auto; }

@media (max-width: 900px) {
  .calc-tool { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .calc-tool { padding: 14px; }
  .calc-out { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .calc-live::before, .calc-out-fig.calc-pop { animation: none; }
}

/* ---------- AOV calculator wizard (step-by-step, /book-a-demo) ---------- */

.wiz-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(231, 225, 245, .8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 32px;
  max-width: 480px;
  margin-inline: auto;
}

.wiz-progress {
  height: 6px;
  border-radius: 100px;
  background: var(--paper-soft);
  overflow: hidden;
  margin-bottom: 22px;
}
.wiz-progress-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--reward-grad);
  width: 20%;
  transition: width .35s cubic-bezier(.3, .9, .35, 1);
}

.wiz-count {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.wiz-step { display: none; }
.wiz-step.is-active { display: block; animation: wizin .35s ease; }
@keyframes wizin {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

.wiz-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.35;
}
.wiz-q span { font-weight: 500; color: var(--ink-3); font-size: .8rem; }

.wiz-err {
  min-height: 1.2em;
  margin-top: 10px;
  font-size: .82rem;
  color: #A02B2B;
}

.wiz-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}
.wiz-nav .btn-ghost { margin-right: auto; }
/* .btn's own `display: inline-flex` otherwise beats the browser's
   default [hidden] rule at equal specificity, since author styles
   always win over the UA stylesheet regardless of source order. */
.wiz-nav .btn[hidden] { display: none; }

.wiz-result-cta { width: 100%; margin-top: 18px; }

@media (max-width: 560px) {
  .wiz-card { padding: 24px 20px; }
}

/* ---------- full-width AI hero (/book-a-demo) ----------
   One text overlay (the headline) above a large, full-width demo,
   rather than the usual text-left/visual-right hero: the demo carries
   the pitch on its own, so nothing needs to sit beside it making the
   same case in words. */

/* The demo is already the tallest hero on the site; .hero's usual 64px
   plus .section's usual 76px stacked on top of it read as a dead gap
   before the calculator, so both are trimmed for this page only. */
.ai-hero { text-align: center; padding-bottom: 12px; }
.section-tight-top { padding-top: 36px; }
.ai-hero-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ai-hero-h1 { max-width: 18ch; }
/* .hero-badge carries its own 18px margin-bottom from the two-column
   hero it was designed for; here the flex gap above already spaces it,
   so the two were stacking into a much bigger gap under the badge than
   above it. */
.ai-hero-in .hero-badge { margin-bottom: 0; }

/* ---------- hero AI demo: one screen, chat cross-fading into cart ----------
   A light-themed sibling of the dark .chat-mock on /features#ai-chat: same
   idea (typed prompt, thinking dots, AI reply), but here the same box then
   turns into the cart Brix AI was working on in the background, rather
   than sitting next to it. See js/hero-ai-demo.js. */

.ai-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding-top: 8px;
}

/* The single "app window" frame, reusing .ui-mock/.ui-bar. */
.ai-single { width: 100%; text-align: left; }
.ai-single .ui-bar span { flex: 1; text-align: center; color: var(--ink-3); }

/* Both phases occupy the same grid cell, so the stage's height is always
   the taller of the two (the cart) and never changes when the active one
   swaps — no measured/guessed pixel height to keep in sync with content. */
.ai-stage { position: relative; display: grid; }
.ai-phase {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.ai-phase.is-active { opacity: 1; pointer-events: auto; }

/* A brief dim right before the loop resets, so the swap back to the
   chat phase reads as a beat rather than a jump-cut. */
.ai-demo.is-resetting .ai-stage { transition: opacity .35s ease; opacity: .4; }

/* Centered, not top-aligned: the stage is as tall as the cart phase, far
   taller than a two-message thread needs, and a top-aligned thread would
   leave a dead gap below the composer instead of reading as a fresh chat
   waiting for the next message. */
.ai-phase-chat {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ai-demo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ai-demo-avatar {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), var(--grad-b));
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ai-demo-head b { font-family: var(--font-display); font-size: .86rem; }
.ai-demo-live {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}

/* The prompt and reply as an actual chat thread, not one input line:
   a user bubble, then an AI bubble underneath it, the way the real
   Brix AI launcher (and /features#ai-chat) both read. */
.ai-demo-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.ai-demo-bubble {
  padding: 11px 15px;
  border-radius: 16px;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.45;
  max-width: 88%;
  width: fit-content;
}
/* min-height covers two lines: the prompt types in a character at a
   time, and once it is long enough to wrap the bubble would otherwise
   grow taller mid-type, moving the reply and composer below it. */
.ai-demo-bubble-user {
  align-self: flex-end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: 4px;
  min-height: 4.4em;
  min-width: 28px;
}
.ai-demo-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #fff;
  vertical-align: -2px;
  margin-left: 2px;
  animation: caret 1s steps(2) infinite;
}

/* Typing dots and the reply bubble share one reserved slot, stacked via
   position:absolute, so whichever is showing never changes the card's
   height: the two are never visible at once, so nothing overlaps. */
.ai-demo-status { position: relative; min-height: 3.4em; }

.ai-demo-typing {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 5px;
  padding: 13px 16px;
  background: var(--paper-soft);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  width: fit-content;
  opacity: 0;
  transition: opacity .2s ease;
}
.ai-demo-typing.show { opacity: 1; }
.ai-demo-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: typing 1.1s ease-in-out infinite;
}
.ai-demo-typing span:nth-child(2) { animation-delay: .18s; }
.ai-demo-typing span:nth-child(3) { animation-delay: .36s; }

.ai-demo-bubble-ai {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 500;
  background: var(--paper-soft);
  color: var(--ink);
  border-bottom-left-radius: 4px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.ai-demo-bubble-ai.show { opacity: 1; transform: translateY(0); }

/* Decorative composer: never wired to anything, it is what tells the
   eye this is a chat rather than a single input that got answered
   once, an empty box ready for the next message. */
.ai-demo-composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px 13px 18px;
  background: var(--paper-soft);
  border: 1.5px solid var(--line);
  border-radius: 100px;
  font-size: .88rem;
  color: var(--ink-3);
}
.ai-demo-send {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-demo-result {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  font-weight: 700;
  color: var(--green-deep);
  background: rgba(34, 197, 94, .1);
  border: 1px solid rgba(34, 197, 94, .3);
  padding: 9px 16px;
  border-radius: 100px;
  margin-top: 10px;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .35s cubic-bezier(.3, 1.5, .5, 1), transform .35s cubic-bezier(.3, 1.5, .5, 1);
}
.ai-demo-result.show { opacity: 1; transform: scale(1); }

/* ---------- realistic cart drawer recreation (/book-a-demo) ----------
   Reuses .ui-mock/.ui-bar (the browser-chrome mockup already used on
   /how-to) as the frame, then rebuilds what the real Brix Cart Editor
   preview actually renders inside it: a dark shipping band, an urgency
   timer, the rewards bar, two coupon cards, real item rows and a black
   checkout button. Every dynamic value below changes colour, fill or
   text only, never size, for the reason documented above .ai-demo-status:
   nothing here may change this card's height while it plays. */

.rc-cart { position: relative; }

.rc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.rc-head b { font-family: var(--font-display); font-size: .96rem; }
.rc-x { color: var(--ink-3); font-size: 1.15rem; line-height: 1; }

.rc-band {
  margin: 0;
  padding: 10px 18px;
  background: var(--navy);
  color: #fff;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
}

/* The same "cost/loss red" used on the why-AOV panel, reused here for
   the same reason: it is a loss/urgency framing, not a brand colour. */
.rc-timer {
  margin: 0;
  padding: 8px 18px;
  background: rgba(194, 65, 12, .08);
  color: #C2410C;
  text-align: center;
  font-size: .76rem;
  font-weight: 600;
}
.rc-timer b { font-variant-numeric: tabular-nums; }

.rc-body { padding: 16px 18px 18px; }

.rc-goal { margin-bottom: 18px; }
/* min-height covers two lines: the "away from" and "unlocked" strings
   are different lengths, and on a narrow phone one of them wraps while
   the other doesn't, which was quietly changing the card's height. */
.rc-goal-msg {
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--green-deep);
  margin-bottom: 10px;
  min-height: 2.8em;
}

.rc-track {
  position: relative;
  height: 10px;
  background: var(--paper-soft);
  border-radius: 100px;
  margin-bottom: 6px;
}
.rc-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 100px;
  background: var(--reward-grad);
  transition: width 1s cubic-bezier(.3, .9, .35, 1);
  min-width: 10px;
}
.rc-node {
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
  z-index: 2;
}
.rc-node.is-unlocked {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  animation: nodepop .45s cubic-bezier(.3, 1.6, .5, 1);
}
.rc-tiers { display: flex; justify-content: space-between; font-size: .66rem; font-weight: 600; color: var(--ink-3); }

.rc-coupon-h { font-size: .84rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.rc-coupons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }

/* Column layout, not row: the button sits below the text on its own
   line, so its width can never eat into the text's and change how many
   lines it wraps to. */
.rc-coupon {
  padding: 12px;
  border-radius: 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rc-coupon-a { background: linear-gradient(135deg, var(--brand), var(--grad-b)); }
.rc-coupon-b { background: linear-gradient(135deg, var(--green), #16A34A); }
.rc-coupon-ic { width: 20px; height: 20px; margin-bottom: 4px; opacity: .9; }
.rc-coupon b { font-family: var(--font-display); font-size: .82rem; letter-spacing: .01em; }
.rc-coupon small {
  display: block;
  font-size: .68rem;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-coupon-btn {
  align-self: flex-start;
  margin-top: 8px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  padding: 5px 12px;
  border-radius: 7px;
  transition: transform .15s ease;
}
.rc-coupon-b.is-added { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55) inset; }
.rc-coupon-b.is-added .rc-coupon-btn { color: var(--green-deep); }
.rc-coupon-btn.pressed { transform: scale(.94); }

.rc-items-h {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.rc-items { display: flex; flex-direction: column; }
.rc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--paper-soft);
}
.rc-item-info { flex: 1; min-width: 0; line-height: 1.3; }
.rc-item-info b {
  display: block;
  font-size: .86rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-item-info small { color: var(--ink-3); font-size: .74rem; }

.rc-qty {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 9px;
}
.rc-qty button { width: 14px; color: var(--ink-3); font-weight: 700; font-size: .82rem; }
.rc-qty span { font-size: .82rem; font-weight: 600; min-width: 10px; text-align: center; }

.rc-foot { padding: 14px 0 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.rc-row { display: flex; justify-content: space-between; font-size: .84rem; color: var(--ink-2); padding: 3px 0; }
.rc-row-total { font-weight: 700; color: var(--ink); font-size: .94rem; }
.rc-row-total b { font-family: var(--font-display); }

.rc-checkout {
  width: 100%;
  margin-top: 10px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  padding: 13px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.rc-fine { margin-top: 8px; text-align: center; font-size: .68rem; color: var(--ink-3); }

@media (max-width: 480px) {
  .rc-body { padding: 14px 16px 16px; }
  .rc-coupon { padding: 10px; }
}

/* ---------- logos strip ---------- */

.logos { padding: 34px 0 24px; background: var(--paper-soft); }

.logos-label {
  text-align: center;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 22px;
}

.logos-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 52px;
  opacity: 1;
}

.wordmark { font-size: 1.12rem; color: #000; white-space: nowrap; }
.wm-1 { font-family: var(--font-display); font-weight: 800; letter-spacing: .18em; }
.wm-2 { font-family: Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.22rem; }
.wm-3 { font-weight: 800; letter-spacing: .06em; }
.wm-4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; font-size: 1.2rem; }
.wm-5 { font-family: Georgia, serif; font-weight: 700; }
.wm-6 { font-weight: 700; letter-spacing: .3em; }

/* ---------- feature grid ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.feature-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 24px 22px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-2);
  border-color: rgba(124, 58, 237, .3);
}
.feature-card h3 { margin: 18px 0 8px; }
.feature-card p { color: var(--ink-2); font-size: .93rem; }

.fc-link {
  display: inline-block;
  margin-top: 14px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--brand);
}

.fc-visual {
  height: 116px;
  border-radius: var(--radius);
  background: var(--paper-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 16px;
}

/* mini demos inside feature cards */
.mini-cart { width: 100%; max-width: 220px; }
.mini-track {
  height: 9px;
  border-radius: 100px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.mini-fill {
  display: block;
  height: 100%;
  width: 68%;
  border-radius: 100px;
  background: var(--reward-grad);
}
.feature-card:hover .mini-fill { animation: minifill 1.4s ease forwards; }
@keyframes minifill { from { width: 68%; } to { width: 100%; } }
.mini-msg { margin-top: 10px; font-size: .76rem; font-weight: 600; color: var(--ink-2); text-align: center; }

.mini-coupons { display: flex; gap: 8px; }
.mini-coupon {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1.5px dashed var(--ink-3);
  color: var(--ink-2);
  background: #fff;
  white-space: nowrap;
}
.mini-coupon.mc-active {
  border-style: solid;
  border-color: var(--brand);
  color: #fff;
  background: var(--brand);
}

.mini-fbt { display: flex; align-items: center; gap: 9px; }
.mini-fbt i { font-style: normal; font-weight: 700; color: var(--ink-3); }
.mini-prod {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  box-shadow: 0 3px 8px rgba(23,20,46,.12);
}

.mini-bundle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.mini-rule {
  font-size: .76rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 9px;
}
.mini-arrow { color: var(--ink-3); font-weight: 700; }
.mini-save {
  font-size: .76rem;
  font-weight: 800;
  color: #fff;
  background: var(--grad-strong);
  padding: 8px 12px;
  border-radius: 9px;
}

.mini-chart { position: relative; width: 100%; max-width: 200px; }
.mini-chart svg { width: 100%; height: auto; display: block; }
.mini-chart text { font-family: inherit; }
.mini-area-end { font-size: 12px; font-weight: 700; fill: var(--ink-2); }
.mini-stat {
  position: absolute;
  top: -2px;
  left: 0;
  font-size: .7rem;
  font-weight: 800;
  color: var(--green-deep);
  background: rgba(34, 197, 94, .12);
  padding: 3px 8px;
  border-radius: 100px;
}

.mini-chat { display: flex; flex-direction: column; gap: 5px; width: 100%; max-width: 216px; }
.mc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.mc-ava {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--navy);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mc-ava img { width: 12px; height: auto; display: block; }
.mc-name { font-size: .72rem; font-weight: 700; color: var(--ink); }
.mc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-left: auto;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .16);
}
.mini-bubble {
  font-size: .7rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 12px;
  width: fit-content;
  max-width: 90%;
  line-height: 1.25;
}
.mb-user { background: #fff; border: 1px solid var(--line); color: var(--ink); align-self: flex-end; border-bottom-right-radius: 4px; }
.mb-ai { background: var(--brand); color: #fff; align-self: flex-start; border-bottom-left-radius: 4px; }

/* ---------- why brix panel ---------- */

.wb-visual { position: relative; }

.wb-glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(42% 46% at 22% 20%, rgba(139, 92, 246, .24), transparent 70%),
    radial-gradient(40% 42% at 80% 78%, rgba(56, 189, 248, .2), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
  animation: aidrift 16s ease-in-out infinite alternate;
}

.wb-panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 30px 30px 26px;
  box-shadow: 0 24px 60px -18px rgba(124, 58, 237, .28), 0 8px 30px -12px rgba(23, 20, 46, .12);
}
.wb-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.wb-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.wb-ava {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--grad-b));
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.wb-ava img { width: 17px; height: auto; display: block; }
.wb-head-name { font-family: var(--font-display); font-weight: 800; font-size: .96rem; color: var(--ink); }
.wb-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--green-deep);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.wb-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: wbpulse 2s ease-out infinite;
}
@keyframes wbpulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); }
  70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.wb-thread { display: flex; flex-direction: column; gap: 10px; }

.wb-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-ghost);
  border: 1px solid var(--brand-soft);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 11px 14px;
  font-size: .89rem;
  line-height: 1.4;
  color: var(--ink-2);
  width: fit-content;
  max-width: 100%;
}
.wb-check {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wb-typing {
  display: none;
  gap: 5px;
  padding: 13px 15px;
  background: var(--brand-ghost);
  border: 1px solid var(--brand-soft);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  width: fit-content;
}
.wb-typing.show { display: flex; }
.wb-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .5;
  animation: typing 1.1s ease-in-out infinite;
}
.wb-typing span:nth-child(2) { animation-delay: .18s; }
.wb-typing span:nth-child(3) { animation-delay: .36s; }

.wb-panel-note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--ink-3);
}

/* ---------- deep dives ---------- */

.dd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.dd-grid-flip .dd-copy { order: 2; }
.dd-grid-flip .dd-visual { order: 1; }

.dd-copy h2 { margin-bottom: 10px; }

.dd-lead {
  color: var(--ink-2);
  font-size: 1.05rem;
  margin: 14px 0 22px;
}

.dd-step {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.dd-step:last-of-type { border-bottom: 0; }
.dd-step h3 { margin-bottom: 8px; }
.dd-step p { color: var(--ink-2); font-size: .97rem; }
.dd-step { transition: opacity .3s ease; }
.dd-grid.has-active .dd-step { opacity: .45; }
.dd-grid.has-active .dd-step.active { opacity: 1; }

.dd-copy > .btn { margin-top: 26px; }

.dd-list { display: flex; flex-direction: column; gap: 16px; margin: 8px 0 10px; }
.dd-list li {
  color: var(--ink-2);
  font-size: .97rem;
  padding-left: 26px;
  position: relative;
}
.dd-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--reward-grad);
}
.dd-list b { color: var(--ink); }

.dd-visual { position: relative; }
.dd-sticky { position: sticky; top: calc(var(--nav-h) + 40px); }

.dd-callout {
  position: absolute;
  font-size: .74rem;
  font-weight: 700;
  color: var(--brand);
  background: #fff;
  border: 1px solid rgba(124, 58, 237, .35);
  box-shadow: var(--shadow-1);
  padding: 6px 12px;
  border-radius: 100px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.dd-callout.active {
  background: var(--brand);
  color: #fff;
  transform: scale(1.06);
}
.dd-callout-1 { top: 17%; left: -30px; }
.dd-callout-2 { top: 57%; right: -26px; }
.dd-callout-3 { bottom: 20%; left: -34px; }

/* ---------- builder mock ---------- */

.builder-mock {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(231, 225, 245, .8);
  padding: 20px;
  max-width: 460px;
  margin-inline: auto;
}

.bm-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .98rem;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--paper-soft);
  margin-bottom: 16px;
}
.bm-status { font-family: var(--font-body); font-size: .74rem; font-weight: 700; color: var(--green-deep); }

.bm-body {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 18px;
}

.bm-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.bm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  font-weight: 600;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 12px;
  margin: 0 6px 8px 0;
}
.bm-chip em { font-style: normal; color: var(--ink-3); }
.bm-chip-drag {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-ghost);
  box-shadow: 0 6px 16px rgba(124, 58, 237, .22);
  transform: rotate(-3deg) translateY(-2px);
}
.bm-chip-placed {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.bm-drop {
  border: 1.5px dashed rgba(124, 58, 237, .4);
  background: var(--brand-ghost);
  border-radius: 12px;
  padding: 12px;
}
.bm-rule { font-size: .84rem; color: var(--ink-2); margin-top: 6px; }
.bm-rule b { color: var(--ink); }

.bm-toggle-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 12px;
}
.bm-toggle {
  width: 34px;
  height: 20px;
  border-radius: 100px;
  background: var(--green);
  position: relative;
  flex: none;
}
.bm-toggle i {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
}

.bm-preview {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--paper-soft);
}
.bm-prods { display: flex; gap: 10px; margin-bottom: 12px; }
.bm-price { font-size: 1rem; color: var(--ink-3); }
.bm-price b { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin-left: 6px; }
.bm-save-tag {
  font-size: .74rem;
  font-weight: 800;
  color: #fff;
  background: var(--grad-strong);
  padding: 4px 10px;
  border-radius: 100px;
  margin-left: 10px;
  vertical-align: 2px;
}

/* ---------- Brix AI section ---------- */

.ai-gradient {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background:
    radial-gradient(46% 38% at 30% 40%, rgba(124, 58, 237, .34), transparent 70%),
    radial-gradient(38% 34% at 72% 62%, rgba(56, 189, 248, .22), transparent 70%),
    radial-gradient(30% 28% at 58% 28%, rgba(139, 92, 246, .15), transparent 70%);
  animation: aidrift 16s ease-in-out infinite alternate;
}
@keyframes aidrift {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(4%, -3%) rotate(3deg); }
  100% { transform: translate(-4%, 3%) rotate(-3deg); }
}

.section-dark .dd-grid { position: relative; align-items: center; }

.ai-points { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.ai-points li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: rgba(255,255,255,.78);
  font-size: .98rem;
}
.ai-ic {
  color: var(--grad-b);
  font-size: .6rem;
  flex: none;
}

.chat-mock {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px;
  max-width: 430px;
  margin-inline: auto;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .4);
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  margin-bottom: 18px;
}
.chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--grad-b));
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.chat-head b { display: block; font-size: .95rem; line-height: 1.3; }
.chat-head small { color: rgba(255,255,255,.5); font-size: .76rem; }

.chat-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 250px;
}

.chat-bubble {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: .9rem;
  line-height: 1.5;
  max-width: 88%;
  width: fit-content;
}
.cb-user {
  align-self: flex-end;
  background: var(--brand);
  border-bottom-right-radius: 5px;
  min-height: 1em;
  min-width: 30px;
}
.cb-ai {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.1);
  border-bottom-left-radius: 5px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
.cb-ai.show { opacity: 1; transform: translateY(0); }
.cb-ai b { color: #38BDF8; }

.chat-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #fff;
  vertical-align: -2px;
  margin-left: 2px;
  animation: caret 1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.chat-typing {
  display: none;
  gap: 5px;
  padding: 14px 16px;
  background: rgba(255,255,255,.09);
  border-radius: 16px;
  border-bottom-left-radius: 5px;
  width: fit-content;
}
.chat-typing.show { display: flex; }
.chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  animation: typing 1.1s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .18s; }
.chat-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typing {
  0%, 100% { transform: translateY(0); opacity: .45; }
  40% { transform: translateY(-5px); opacity: 1; }
}

.chat-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--green);
  background: rgba(34, 197, 94, .1);
  border: 1px solid rgba(34, 197, 94, .3);
  padding: 8px 14px;
  border-radius: 100px;
  width: fit-content;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .35s cubic-bezier(.3,1.5,.5,1), transform .35s cubic-bezier(.3,1.5,.5,1);
}
.chat-action.show { opacity: 1; transform: scale(1); }

.chat-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.4);
  font-size: .86rem;
}
.chat-input i {
  font-style: normal;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
}

/* ---------- analytics dashboard ---------- */

.dash-mock {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 26px;
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.dash-stat {
  background: var(--paper-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.dash-stat small { display: block; font-size: .76rem; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; }
.dash-stat b { font-family: var(--font-display); font-size: 1.55rem; letter-spacing: -.02em; }
.dash-delta {
  display: block;
  margin-top: 5px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--green-deep);
}

.dash-chart {
  border: 1px solid var(--paper-soft);
  border-radius: var(--radius);
  padding: 18px 18px 10px;
}
.dash-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.dash-series { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; }
.dash-series i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand);
}

.chart-wrap { position: relative; }
.chart-wrap svg { width: 100%; height: auto; display: block; }

.chart-grid line { stroke: var(--line); stroke-width: 1; }
.chart-ylabels text, .chart-xlabels text {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--ink-3);
}
.chart-ylabels text { text-anchor: end; }
.chart-xlabels text { text-anchor: middle; }

.chart-line {
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-end { fill: var(--brand); stroke: #fff; stroke-width: 2; }
.chart-endlabel rect { fill: var(--ink); }
.chart-endlabel text {
  fill: #fff;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  font-family: var(--font-body);
}

.chart-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .15s ease; }
.chart-hover.on { opacity: 1; }
.chart-crosshair {
  position: absolute;
  top: 8%;
  bottom: 14%;
  width: 1px;
  background: rgba(23, 20, 46, .18);
}
.chart-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(23,20,46,.3);
  transform: translate(-50%, -50%);
}
.chart-tip {
  position: absolute;
  transform: translate(-50%, -130%);
  background: var(--ink);
  color: #fff;
  border-radius: 9px;
  padding: 7px 11px;
  font-size: .76rem;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.chart-tip b { display: block; font-size: .84rem; }
.chart-tip small { color: rgba(255,255,255,.6); }

.dash-insights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
}

.insight-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: linear-gradient(90deg, var(--brand-ghost), #fff 45%);
}
.insight-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
}
.insight-card p { font-size: .9rem; color: var(--ink-2); }
.insight-card b { color: var(--ink); }
.insight-apply {
  display: inline-block;
  margin-top: 12px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--brand);
  border: 1.5px solid rgba(124, 58, 237, .4);
  padding: 6px 14px;
  border-radius: 100px;
}

/* ---------- stats band ---------- */

.stats-band {
  background: var(--navy);
  color: #fff;
  padding: 52px 0;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  background: linear-gradient(92deg, #38BDF8, #C4B5FD);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat small {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.6);
  font-size: .92rem;
}

/* ---------- testimonials ---------- */

.carousel-nav { display: flex; gap: 10px; }
.car-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: 1.05rem;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.car-btn:hover { border-color: var(--brand); color: var(--brand); transform: scale(1.06); }

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(310px, 356px);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 6px 22px;
  margin: 0 -6px;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }

.t-card {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.t-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }

.t-lift {
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  background: var(--grad-strong);
  padding: 6px 14px;
  border-radius: 100px;
}

.t-card blockquote { font-size: .99rem; color: var(--ink-2); flex: 1; }

.t-card figcaption { display: flex; align-items: center; gap: 12px; }
.t-card figcaption b { display: block; font-size: .92rem; }
.t-card figcaption small { color: var(--ink-3); font-size: .8rem; }

.t-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .86rem;
  color: #fff;
  flex: none;
}
.av-1 { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
.av-2 { background: linear-gradient(135deg, #38BDF8, #8B5CF6); }
.av-3 { background: linear-gradient(135deg, #22C55E, #4ADE80); }
.av-4 { background: linear-gradient(135deg, #1F1240, #4C3A7A); }
.av-5 { background: linear-gradient(135deg, #F59E0B, #FCD34D); }

/* ---------- pricing ---------- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  max-width: 1160px;
  margin-inline: auto;
  gap: 20px;
  align-items: stretch;
}

.price-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }

/* Seven plans: four across, then the last three centred underneath. The
   1020px and 680px rules further down take it to two across, then one. */
.price-grid .price-card { grid-column: span 2; }
.price-grid .price-card:nth-child(5) { grid-column: 2 / span 2; }

/* Pricing page: every card lists the whole feature set, so six plans sit in a
   3 x 2 grid wide enough for each feature to stay on one line, and Unlimited,
   the seventh, is a wide card underneath with its features in two columns.
   The doubled class keeps these ahead of the shared rules above and below. */
.price-grid.price-grid-full { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.price-grid.price-grid-full .price-card,
.price-grid.price-grid-full .price-card:nth-child(5) { grid-column: auto; }
.price-grid.price-grid-full .price-card { padding: 28px 20px; }
.price-grid.price-grid-full .price-card-wide { padding: 28px 34px; }
.price-grid.price-grid-full .price-card .price-list li { font-size: .85rem; padding-left: 24px; }
.price-grid.price-grid-full .price-card-wide,
.price-grid.price-grid-full .price-card-wide:nth-child(7) { grid-column: 1 / -1; width: auto; justify-self: stretch; }
@media (min-width: 1021px) {
  .price-grid.price-grid-full .price-card-wide {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 2fr;
    grid-template-rows: repeat(4, auto) 1fr auto;
    column-gap: 48px;
  }
  .price-grid.price-grid-full .price-card-wide > * { grid-column: 1; }
  .price-grid.price-grid-full .price-card-wide > .price-list {
    grid-column: 2;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    gap: 11px 28px;
    align-content: start;
    padding: 0;
    border-top: 0;
  }
  .price-grid.price-grid-full .price-card-wide > .price-cta { grid-row: 6; }
}
@media (min-width: 681px) and (max-width: 1020px) {
  .price-grid.price-grid-full .price-card-wide .price-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    gap: 11px 28px;
  }
}
@media (max-width: 1020px) {
  .price-grid.price-grid-full { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .price-grid.price-grid-full { grid-template-columns: 1fr; }
}

.price-card-hot {
  border: 2px solid var(--brand);
  box-shadow: 0 12px 40px rgba(124, 58, 237, .18);
}

.price-flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-strong);
  padding: 5px 14px;
  border-radius: 100px;
  white-space: nowrap;
}
.price-flag-ghost {
  color: var(--ink-3);
  background: var(--paper-soft);
  border: 1px solid var(--line);
}

.price-card h3 { font-size: 1.05rem; }

.price { margin: 14px 0 4px; }
.price b {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.price span { color: var(--ink-3); font-size: .9rem; }

.price-year { font-size: .82rem; color: var(--ink-3); margin-bottom: 6px; }
.price-note { font-size: .84rem; color: var(--ink-3); margin-bottom: 18px; }

.price-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 18px 0 24px;
  border-top: 1px solid var(--paper-soft);
  flex: 1;
}
.price-list li {
  font-size: .88rem;
  color: var(--ink-2);
  padding-left: 26px;
  position: relative;
}
.price-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(34, 197, 94, .14);
  color: var(--green-deep);
  font-size: .66rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A line that is NOT part of a plan, such as the Free plan's watermark:
   a muted dash where the others have a tick. */
.price-list li.is-off { color: var(--ink-3); }
.price-list li.is-off::before { content: "–"; background: var(--paper-soft); color: var(--ink-3); }

.price-cta { width: 100%; }

.price-compare { text-align: center; margin-top: 34px; }
.price-compare a { font-weight: 700; color: var(--brand); }

/* Monthly / yearly switch, centred above the plan cards. Hidden until main.js
   has wired it up. */
.bill-toggle-wrap {
  max-width: 1160px;
  margin: 0 auto 26px;
  display: flex;
  justify-content: center;
}
.bill-toggle-wrap[hidden] { display: none; }
.bill-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.bill-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.bill-opt:hover { color: var(--ink); }
.bill-opt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bill-opt.is-on { background: var(--grad-strong); color: #fff; }
.bill-save {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .14);
  font-size: .72rem;
  font-weight: 800;
  color: var(--green-deep);
}
.bill-opt.is-on .bill-save { background: rgba(255, 255, 255, .22); color: #fff; }
/* the yearly saving is a result going up, so it is green */
.price-year.is-save { color: var(--green-deep); font-weight: 700; }

/* The seven features are the same on every plan, so they are listed once,
   under the cards, instead of five times inside them. */
.price-includes {
  max-width: 820px;
  margin: 44px auto 0;
  padding: 28px 34px 30px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.price-includes h3 { font-size: 1.05rem; text-align: center; margin-bottom: 18px; }
.price-includes .price-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 40px;
  padding: 0;
  border-top: 0;
}
@media (max-width: 680px) {
  .price-includes { padding: 24px 22px; }
  .price-includes .price-list { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */

.faq-list { display: flex; flex-direction: column; gap: 12px; }

.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open] { border-color: rgba(124, 58, 237, .35); box-shadow: var(--shadow-1); }

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 19px 22px;
  font-weight: 600;
  font-size: .99rem;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-ic {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
}
.faq-ic::before, .faq-ic::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: var(--brand);
  border-radius: 2px;
  transition: transform .25s ease;
}
.faq-ic::before { width: 13px; height: 2px; transform: translate(-50%, -50%); }
.faq-ic::after { width: 2px; height: 13px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-ic::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq-item p {
  padding: 0 22px 20px;
  color: var(--ink-2);
  font-size: .93rem;
  max-width: 60ch;
}

/* ---------- final CTA ---------- */

.cta-final {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  background: var(--navy);
  text-align: center;
  color: #fff;
}

.cta-gradient {
  position: absolute;
  inset: -60% -20%;
  background:
    radial-gradient(42% 44% at 30% 50%, rgba(124, 58, 237, .55), transparent 70%),
    radial-gradient(36% 40% at 70% 45%, rgba(139, 92, 246, .5), transparent 70%),
    radial-gradient(30% 34% at 50% 70%, rgba(139, 92, 246, .3), transparent 70%);
  animation: aidrift 13s ease-in-out infinite alternate;
}

.cta-in { position: relative; }
.cta-in h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.cta-in > p { margin: 16px 0 32px; color: rgba(255,255,255,.75); font-size: 1.1rem; }
.cta-note { margin-top: 20px; font-size: .85rem; color: rgba(255,255,255,.55) !important; }

/* ---------- footer ---------- */

.footer {
  background: var(--navy);
  color: rgba(255,255,255,.72);
  padding: 72px 0 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer-grid {
  display: grid;
  grid-template-columns: max-content max-content max-content 330px;
  justify-content: space-between;
  gap: 40px 56px;
  padding-bottom: 52px;
  align-items: start;
}

/* A grid item's automatic minimum size is its content, so the signup
   column could not shrink below the width of the email field plus the
   Subscribe button side by side. On a 360px phone that forced the
   whole footer 41px wider than the screen. */
.footer-grid > * { min-width: 0; }

.logo-light { color: #fff; }

.footer-brand p { margin-top: 14px; font-size: .9rem; max-width: 24ch; color: rgba(255,255,255,.55); }

.footer-social { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.75);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.footer-social a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }

.footer-rating {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-size: .84rem;
  color: rgba(255,255,255,.6);
}
.footer-rating b { color: #fff; }

.footer-shopify {
  display: inline-block;
  margin-top: 14px;
  transition: transform .15s ease, filter .15s ease;
}
.footer-shopify-badge {
  display: block;
  width: 196px;
  height: 52px;
}
.footer-shopify:hover { transform: translateY(-2px); filter: brightness(1.06); }

.footer-h {
  font-weight: 700;
  color: #fff;
  font-size: .92rem;
  margin-bottom: 16px;
}

.footer-col { display: flex; flex-direction: column; gap: 11px; font-size: .9rem; }
.footer-col a { color: rgba(255,255,255,.6); transition: color .15s ease; }
.footer-col a:hover { color: #fff; }

.footer-news {
  align-self: start;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 26px 24px;
}
.footer-news .footer-h { margin-bottom: 10px; }
.footer-news-sub { font-size: .85rem; color: rgba(255,255,255,.55); margin-bottom: 16px; }
.news-fine { margin-top: 12px; font-size: .78rem; color: rgba(255,255,255,.4); }

.news-form { display: flex; gap: 8px; }
.news-form input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
  font: inherit;
  font-size: .88rem;
}
.news-form input::placeholder { color: rgba(255,255,255,.35); }
.news-form input:focus-visible { outline-color: var(--brand); }

.news-ok {
  display: none;
  margin-top: 10px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--green);
}
.news-ok.show { display: block; }

.footer-base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  padding-bottom: 28px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .82rem;
  color: rgba(255,255,255,.45);
}
.footer-base a { color: rgba(255,255,255,.55); }
.footer-base a:hover { color: #fff; }

/* footer: drop to a roomy 2×2 before columns get cramped */
@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr; gap: 40px 48px; }
  .footer-news { grid-column: auto; max-width: none; }
}

/* ---------- inner-page hero ---------- */

.page-hero {
  padding: calc(var(--nav-h) + 48px) 0 42px;
  background: var(--paper-soft);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero .hero-glow { opacity: .8; }
.page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); position: relative; }
.page-hero .hero-sub { margin: 18px auto 0; position: relative; }

/* ---------- optional hero background image ----------
   Set per article in the admin panel; without one the hero keeps the
   plain gradient above. The image is its own layer rather than a
   background on .page-hero so it can be blurred on its own: a filter
   on the section itself would blur the heading with it. */

.page-hero-bg {
  position: absolute;
  /* Bleeds past every edge because blur samples the transparent area
     outside the element, which otherwise shows as a pale fade around
     the image. .page-hero already clips with overflow: hidden. */
  inset: -60px;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* A photograph behind dark heading text is unreadable without this.
   The scrim is what keeps the existing ink-on-paper type legible over
   an arbitrary image, so it holds whatever the author uploads. */
.page-hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(248, 246, 255, .78), rgba(248, 246, 255, .9));
  pointer-events: none;
}

/* The scrim is the last painted child, so the copy needs its own layer
   to sit above it. */
.page-hero-img > .container { position: relative; z-index: 1; }
.page-hero-img .hero-glow { opacity: .45; }

/* ---------- case study hero: 3/4 copy + 1/4 app card ---------- */

.cs-hero { text-align: left; padding-bottom: 54px; }

/* vertical split: copy fills the top 3/4, app band the bottom 1/4 */
.cs-hero-stack {
  display: grid;
  grid-template-rows: 3fr 1fr;
  gap: 34px;
  min-height: min(76vh, 660px);
}
.cs-hero-main { position: relative; min-width: 0; align-self: center; }
.cs-hero h1 { font-size: clamp(2rem, 3.8vw, 2.9rem); }
.cs-hero .hero-sub { margin: 18px 0 0; max-width: 60ch; }

.cs-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; position: relative; }

.cs-hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 24px;
  font-size: .88rem;
  position: relative;
}
.cs-hero-links a {
  color: var(--ink-2);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.cs-hero-links a:hover { color: var(--brand); border-color: var(--brand); }

.cs-hero-aside { position: relative; min-width: 0; align-self: stretch; display: flex; }

.cs-app-card {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px 30px;
  background: linear-gradient(120deg, var(--navy), var(--navy-3));
  border-radius: var(--radius-lg);
  padding: 22px 28px;
  text-align: left;
  box-shadow: var(--shadow-2);
}
.cs-app-logo { display: block; width: 100%; max-width: 116px; height: auto; }
.cs-app-copy { min-width: 0; }
.cs-app-tag {
  color: rgba(255, 255, 255, .78);
  font-size: .93rem;
  line-height: 1.5;
}
.cs-app-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 7px;
  margin-top: 8px;
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .6);
}
.cs-app-rating b { color: #fff; font-family: var(--font-display); }
.cs-app-stars { color: var(--gold); letter-spacing: 1px; }

.cs-app-actions { display: flex; align-items: center; gap: 16px; }
.cs-app-cta { flex-shrink: 0; }
.cs-app-badge { display: block; flex-shrink: 0; }
.cs-app-badge img { display: block; width: 150px; height: auto; }

/* inline mid-article CTA band */
.cs-inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  margin: 42px 0;
  padding: 24px 26px;
  background: var(--brand-ghost);
  border: 1px solid var(--brand-soft);
  border-radius: var(--radius);
}
.cs-inline-cta p { flex: 1 1 300px; margin: 0; font-size: .98rem; color: var(--ink-2); }
.cs-inline-cta b { color: var(--ink); font-weight: 700; }
.cs-inline-cta .btn { flex-shrink: 0; }

@media (max-width: 1020px) {
  .cs-hero-stack { grid-template-rows: auto auto; min-height: 0; }
  .cs-app-card { grid-template-columns: auto 1fr; }
  .cs-app-actions { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .cs-app-card { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
  .cs-app-logo { max-width: 104px; }
  .cs-app-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .cs-app-cta { width: 100%; }
  .cs-app-badge img { width: 150px; }
}

@media (max-width: 560px) {
  .cs-inline-cta { flex-direction: column; align-items: flex-start; }
  .cs-inline-cta .btn { width: 100%; }
}

/* ---------- features page ---------- */

.f-section { padding: 66px 0; }
.f-section:nth-child(even) { background: var(--paper-soft); }

.f-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.f-grid-flip .f-copy { order: 2; }
.f-grid-flip .f-visual { order: 1; }

.f-copy h2 { margin-bottom: 14px; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.f-copy > p { color: var(--ink-2); font-size: 1.02rem; }

.f-points { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.f-points + p { margin-top: 18px; }
.f-points li {
  font-size: .95rem;
  color: var(--ink-2);
  padding-left: 28px;
  position: relative;
}
.f-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(34, 197, 94, .14);
  color: var(--green-deep);
  font-size: .68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-points b { color: var(--ink); }

/* product page mock (coupon slider feature) */
.pp-mock {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(231, 225, 245,.8);
  padding: 20px;
  max-width: 420px;
  margin-inline: auto;
}
.pp-img {
  height: 150px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #B6E2C8, #6FA88B);
  margin-bottom: 16px;
  position: relative;
}
.pp-fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}
.pp-title { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; }
.pp-price { font-weight: 700; color: var(--ink); margin: 4px 0 14px; }
.pp-price small { color: var(--ink-3); font-weight: 500; }
.pp-coupons {
  display: flex;
  gap: 9px;
  overflow: hidden;
  margin-bottom: 14px;
  position: relative;
}
.pp-coupon {
  flex: none;
  border: 1.5px dashed var(--ink-3);
  border-radius: 11px;
  padding: 9px 13px;
  font-size: .76rem;
  font-weight: 700;
  background: #fff;
  color: var(--ink-2);
}
.pp-coupon b { display: block; font-size: .82rem; color: var(--ink); letter-spacing: .04em; }
.pp-coupon.applied {
  border-style: solid;
  border-color: var(--green);
  background: rgba(34, 197, 94, .08);
}
.pp-coupon.applied b { color: var(--green-deep); }
.pp-atc {
  width: 100%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  padding: 13px;
  border-radius: 12px;
}

/* FBT mock */
.fbt-mock {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(231, 225, 245,.8);
  padding: 22px;
  max-width: 430px;
  margin-inline: auto;
}
.fbt-title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; margin-bottom: 16px; }
.fbt-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.fbt-prod { text-align: center; width: 86px; }
.fbt-prod .mini-prod { width: 66px; height: 66px; border-radius: 14px; margin-bottom: 7px; }
.fbt-prod small { display: block; font-size: .7rem; color: var(--ink-2); line-height: 1.3; }
.fbt-plus { color: var(--ink-3); font-weight: 700; font-size: 1.1rem; }
.fbt-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--paper-soft);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: .88rem;
}
.fbt-total b { font-family: var(--font-display); font-size: 1.05rem; }
.fbt-total .was { color: var(--ink-3); text-decoration: line-through; font-size: .8rem; margin-right: 7px; }
.fbt-add {
  width: 100%;
  margin-top: 12px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  padding: 12px;
  border-radius: 11px;
}

/* Packs mock */
.pk-mock,
.cod-mock {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(231, 225, 245,.8);
  padding: 22px;
  max-width: 430px;
  margin-inline: auto;
}
.pk-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: 16px; }
.pk-title small { color: var(--ink-3); font-weight: 500; font-family: var(--font-body); }
.pk-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px; }
.pk-tier {
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  padding: 20px 8px 12px;
  text-align: center;
  background: var(--paper);
}
.pk-tier b { display: block; font-size: .9rem; color: var(--ink); }
.pk-tier small { display: block; font-size: .72rem; font-weight: 700; color: var(--green-deep); margin-top: 2px; }
.pk-tier.is-on { border-color: var(--brand); background: var(--brand-soft); }
.pk-price { display: block; margin-top: 6px; font-size: .8rem; font-weight: 700; color: var(--ink); }
.pk-price s { color: var(--ink-3); font-weight: 500; font-size: .72rem; }
.pk-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad-strong);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pk-slots { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pk-slot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--paper-soft);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: .8rem;
  color: var(--ink-2);
}
.pk-sel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 11px;
  font-weight: 600;
  color: var(--ink);
}
.pk-add {
  width: 100%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  padding: 13px;
  border-radius: 12px;
}
.pk-save { margin-top: 10px; text-align: center; font-size: .8rem; font-weight: 600; color: var(--green-deep); }

/* COD Checkout mock */
.cod-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; }
.cod-opt {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  background: var(--paper);
}
.cod-opt b { display: block; font-size: .84rem; color: var(--ink); }
.cod-opt small { display: block; font-size: .72rem; color: var(--ink-2); margin-top: 2px; }
.cod-opt:first-child small { color: var(--green-deep); font-weight: 700; }
.cod-opt.is-on { border-color: var(--brand); background: var(--brand-soft); }
.cod-sheet { background: var(--paper-soft); border-radius: 14px; padding: 16px; }
.cod-steps { display: flex; gap: 6px; margin-bottom: 14px; }
.cod-steps span {
  flex: 1;
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-3);
}
.cod-steps .is-done { color: var(--green-deep); background: rgba(34, 197, 94, .12); }
.cod-steps .is-now { color: #fff; background: var(--brand); }
.cod-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cod-lines li { display: flex; justify-content: space-between; font-size: .84rem; color: var(--ink-2); }
.cod-lines b { color: var(--ink); }
.cod-lines .cod-total { border-top: 1px solid var(--line); padding-top: 9px; font-weight: 700; color: var(--ink); }
.cod-lines .cod-total b { font-family: var(--font-display); font-size: 1rem; }
.cod-place {
  width: 100%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  padding: 12px;
  border-radius: 11px;
}
.cod-foot { margin-top: 10px; text-align: center; font-size: .68rem; color: var(--ink-3); }

/* ---------- features page: extras grid ---------- */

.xtra-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.xtra {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.xtra:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-1);
  border-color: rgba(124, 58, 237, .35);
}
.xtra b {
  display: block;
  font-size: .92rem;
  margin-bottom: 5px;
  padding-left: 24px;
  position: relative;
}
.xtra b::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(34, 197, 94, .14);
  color: var(--green-deep);
  font-size: .62rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xtra span { font-size: .82rem; color: var(--ink-2); line-height: 1.5; display: block; }

@media (max-width: 1020px) {
  .xtra-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .xtra-grid { grid-template-columns: 1fr; }
}

/* ---------- case studies page ---------- */

/* The cards are the blog card system exactly (.blog-card and friends, grouped
   with the .cs-* names further down), so this page has no styles of its own.
   A case study card used to carry the store's lift figure on the gradient and
   its before/after pair in the body, but a post in the database has no fields
   to hold either, so both are gone rather than left as rules nothing sets. */

/* ---------- case study article page ---------- */

.cs-article {
  max-width: 760px;
  margin: 0 auto;
}
.cs-article .cs-lede {
  font-size: 1.16rem;
  line-height: 1.7;
  color: var(--ink-2);
}
.cs-article h2 {
  margin-top: 52px;
  margin-bottom: 18px;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}
.cs-article h2:first-of-type { margin-top: 40px; }
.cs-article h3 {
  margin-top: 30px;
  margin-bottom: 12px;
}
.cs-article p {
  margin-bottom: 18px;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.75;
}
.cs-article strong { color: var(--ink); font-weight: 700; }
.cs-article ul, .cs-article ol {
  margin: 0 0 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cs-article ul { list-style: disc; }
.cs-article ol { list-style: decimal; }
.cs-article li { color: var(--ink-2); font-size: 1.02rem; line-height: 1.65; }
.cs-article li::marker { color: var(--brand); }

/* The site-wide `a { color: inherit; text-decoration: none; }` reset
   means an in-body link is otherwise indistinguishable from the
   surrounding paragraph - invisible to a reader, not just unstyled.
   Internal cross-links between posts only do their job if a reader
   can actually see them. */
.cs-article p a, .cs-article li a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: var(--brand-soft);
  text-underline-offset: 2px;
}
.cs-article p a:hover, .cs-article li a:hover,
.cs-article p a:focus-visible, .cs-article li a:focus-visible {
  color: var(--brand-deep);
  text-decoration-color: currentColor;
}

.cs-table-wrap {
  overflow-x: auto;
  margin: 4px 0 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cs-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 420px; }
.cs-table th, .cs-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.cs-table th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  color: var(--ink);
  background: var(--paper-soft);
}
.cs-table td { color: var(--ink-2); }
.cs-table tr:last-child td { border-bottom: 0; }
.cs-table td strong, .cs-table td b { color: var(--brand); font-family: var(--font-display); }

.cs-divider { height: 1px; background: var(--line); margin: 48px 0; }

.cs-faq-head { margin-top: 52px; margin-bottom: 20px; }

.cs-related {
  border-top: 1px solid var(--line);
  padding-top: 56px;
  margin-top: 12px;
}

/* ---------- blog (and case study) cards ---------- */

/* One card system, two index pages: the .cs-* names are the case studies
   page, which pairs the same gradient shot with a lift figure */

.blog-grid,
.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-card,
.cs-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex;
  flex-direction: column;
}
.blog-card:hover,
.cs-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: rgba(124, 58, 237, .3); }

.blog-shot,
.cs-shot {
  height: 168px;
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 18px;
  overflow: hidden;
}
.blog-shot::before,
.cs-shot::before {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -46px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}
.blog-shot::after,
.cs-shot::after {
  content: "";
  position: absolute;
  right: 30px;
  bottom: 22px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .2);
}
.bshot-1 { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
.bshot-2 { background: linear-gradient(135deg, #140B2D, #7C3AED); }
.bshot-3 { background: linear-gradient(135deg, #8B5CF6, #38BDF8); }
.bshot-4 { background: linear-gradient(135deg, #22C55E, #4ADE80); }

.blog-glyph,
.cs-glyph {
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  z-index: 1;
  color: rgba(255, 255, 255, .92);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .22));
}
.blog-glyph svg,
.cs-glyph svg { width: 100%; height: 100%; display: block; }

.blog-cat,
.cs-cat {
  position: relative;
  z-index: 1;
  font-size: .71rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  padding: 6px 13px;
  border-radius: 100px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.blog-body,
.cs-body { padding: 22px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.blog-title,
.cs-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.16rem;
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .18s ease;
}
.blog-card:hover .blog-title,
.cs-card:hover .cs-name { color: var(--brand); }
.blog-excerpt,
.cs-sum { font-size: .93rem; color: var(--ink-2); flex: 1; line-height: 1.6; }

/* The date and read-time line on a post card. Case study cards have no
   equivalent: they never carried a date. */
.blog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 9px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-3);
}
.blog-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); flex: none; }

.blog-more,
.cs-go { font-size: .86rem; font-weight: 700; color: var(--brand); margin-top: 2px; }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 22px;
}

.post-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .86rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 22px;
}
.post-back:hover { gap: 10px; }

@media (max-width: 900px) { .blog-grid, .cs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blog-grid, .cs-grid { grid-template-columns: 1fr; } }

/* ---------- how-to guides ---------- */

.toc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.toc-card {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.toc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); border-color: rgba(124, 58, 237, .3); }
.toc-ic {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.toc-ic svg { width: 23px; height: 23px; }
.toc-step { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.toc-card b { display: block; font-family: var(--font-display); font-size: 1rem; letter-spacing: -.01em; margin: 2px 0 3px; }
.toc-card small { display: block; color: var(--ink-2); font-size: .85rem; line-height: 1.45; }

.gic-1 { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
.gic-2 { background: linear-gradient(135deg, #8B5CF6, #38BDF8); }
.gic-3 { background: linear-gradient(135deg, #22C55E, #4ADE80); }
.gic-4 { background: linear-gradient(135deg, #140B2D, #7C3AED); }
.gic-5 { background: linear-gradient(135deg, #6D28D9, #A78BFA); }

.guide-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  max-width: 720px;
  margin-bottom: 32px;
}
.guide-badge {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: var(--shadow-1);
}
.guide-badge svg { width: 27px; height: 27px; }
.guide-eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 7px; }
.guide-head h2 { margin-bottom: 11px; font-size: clamp(1.5rem, 2.6vw, 1.95rem); }
.guide-intro { color: var(--ink-2); font-size: 1.04rem; line-height: 1.65; }

.guide-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 46px;
  align-items: start;
}

.guide-steps { counter-reset: gstep; display: flex; flex-direction: column; gap: 13px; list-style: none; }
.guide-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 17px 20px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.guide-step:hover { border-color: rgba(124, 58, 237, .3); box-shadow: var(--shadow-1); transform: translateX(2px); }
.guide-step-num {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--reward-grad);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-step h3 { font-size: 1.02rem; margin-bottom: 5px; }
.guide-step p { color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.guide-step b { color: var(--ink); font-weight: 700; }

.guide-visual { position: sticky; top: calc(var(--nav-h) + 28px); }

.guide-done {
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 720px;
  margin-top: 28px;
  padding: 16px 20px;
  background: linear-gradient(90deg, rgba(34, 197, 94, .09), rgba(139, 92, 246, .05));
  border: 1px solid rgba(34, 197, 94, .25);
  border-radius: var(--radius);
  font-size: .98rem;
  color: var(--ink);
  font-weight: 600;
}
.guide-done-ic {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-done-ic svg { width: 13px; height: 13px; }

/* app-window mockup used as a guide illustration */
.ui-mock {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.ui-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-soft);
}
.ui-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.ui-bar i:nth-child(1) { background: #FF5F57; }
.ui-bar i:nth-child(2) { background: #FEBC2E; }
.ui-bar i:nth-child(3) { background: #28C840; }
.ui-bar span { margin-left: 8px; font-size: .76rem; font-weight: 600; color: var(--ink-3); }
.ui-body { padding: 18px; }
.ui-title { font-family: var(--font-display); font-weight: 700; font-size: .96rem; margin-bottom: 14px; }

.ui-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 9px;
}
.ui-row .cm-thumb { width: 38px; height: 38px; }
.ui-row-info { flex: 1; min-width: 0; line-height: 1.3; }
.ui-row-info b { display: block; font-size: .85rem; }
.ui-row-info small { color: var(--ink-3); font-size: .74rem; }
.ui-price { font-weight: 700; font-size: .85rem; }
.ui-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ui-check svg { width: 12px; height: 12px; }
.ui-cta {
  width: 100%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  padding: 12px;
  border-radius: 11px;
  text-align: center;
  margin-top: 4px;
}
.ui-tiles { display: flex; gap: 10px; margin-bottom: 4px; }
.ui-tile { flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 11px; text-align: center; }
.ui-tile .cm-thumb { width: 100%; height: 46px; border-radius: 9px; margin-bottom: 8px; }
.ui-tile small { font-size: .72rem; font-weight: 700; color: var(--ink-3); display: block; }
.ui-tile b { font-size: .82rem; }
.ui-plus { align-self: center; color: var(--ink-3); font-weight: 800; }
.ui-price-row { display: flex; justify-content: space-between; align-items: center; margin: 14px 0; font-size: .9rem; color: var(--ink-2); }
.ui-price-row b { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); }
.ui-save { font-size: .72rem; font-weight: 800; color: #fff; background: var(--grad-strong); padding: 4px 10px; border-radius: 100px; margin-left: 8px; }
.ui-imgph { height: 96px; border-radius: 12px; background: linear-gradient(135deg, #EDE9FE, #DCD3F0); margin-bottom: 14px; }
.ui-coupon { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ui-settings { display: flex; flex-direction: column; gap: 8px; }
.ui-set { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-radius: 10px; background: var(--paper-soft); font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.ui-set.active { background: var(--brand-ghost); color: var(--brand); box-shadow: inset 0 0 0 1.5px rgba(124, 58, 237, .3); }
.ui-toggle { width: 32px; height: 19px; border-radius: 100px; background: var(--green); position: relative; flex: none; }
.ui-toggle i { position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.ui-chat { display: flex; flex-direction: column; gap: 10px; }
.ui-bub { font-size: .82rem; line-height: 1.4; padding: 10px 13px; border-radius: 13px; max-width: 86%; }
.ui-bub-u { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.ui-bub-a { align-self: flex-start; background: var(--paper-soft); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px; }
.ui-generate { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--brand); background: #fff; border: 1.5px solid var(--brand); padding: 8px 13px; border-radius: 9px; align-self: flex-start; margin-top: 2px; }
.ui-generate svg { width: 15px; height: 15px; }

@media (max-width: 860px) {
  .guide-grid { grid-template-columns: 1fr; gap: 26px; }
  .guide-visual { position: static; order: -1; max-width: 440px; }
  .toc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .toc-grid { grid-template-columns: 1fr; }
  .guide-head { flex-direction: column; gap: 14px; }
}

/* ---------- hero trust badge ---------- */

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 14px 7px 10px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
  box-shadow: var(--shadow-1);
  margin-bottom: 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.hero-badge:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.hero-badge svg { color: var(--brand); flex: none; }
.hero-badge b { color: var(--ink); }
.hero-badge-stars { color: var(--gold); letter-spacing: -1px; font-size: .78rem; }

/* ---------- why aov matters ---------- */

.waov-grid { align-items: center; }

.waov-visual { position: relative; }
.waov-glow {
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(42% 46% at 78% 22%, rgba(228, 87, 61, .14), transparent 70%),
    radial-gradient(40% 42% at 20% 80%, rgba(34, 197, 94, .18), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}

.waov-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 8px 26px;
  box-shadow: var(--shadow-2);
}

.waov-row { display: flex; align-items: center; gap: 14px; padding: 22px 0; }
.waov-row + .waov-row { border-top: 1px solid var(--line); }

.waov-ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.waov-row-cost .waov-ic { background: rgba(228, 87, 61, .12); color: #C2410C; }
.waov-row-aov .waov-ic { background: rgba(34, 197, 94, .14); color: var(--green-deep); }

.waov-row-body { flex: 1; min-width: 0; }
.waov-row-label { font-family: var(--font-display); font-weight: 800; font-size: .96rem; color: var(--ink); margin-bottom: 2px; }
.waov-row-sub { font-size: .8rem; color: var(--ink-3); margin-bottom: 10px; }

.waov-meter { height: 7px; border-radius: 100px; background: var(--paper-soft); overflow: hidden; }
.waov-meter-fill { height: 100%; border-radius: 100px; }
.waov-row-cost .waov-meter-fill { background: linear-gradient(90deg, #F59E7A, #C2410C); }
.waov-row-aov .waov-meter-fill { background: var(--reward-grad); }

.waov-row-tag {
  flex: none;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #C2410C;
  background: rgba(228, 87, 61, .1);
  padding: 5px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
.waov-row-tag-good { color: var(--green-deep); background: rgba(34, 197, 94, .12); }

.waov-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 40px auto 22px; max-width: 900px; }
.waov-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 9px 16px 9px 10px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
}
.waov-chip-ic {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.waov-note { font-weight: 700; color: var(--ink); text-align: center; font-size: 1.05rem; }

/* ---------- before / after ---------- */

.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
}
.ba-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.ba-before { background: var(--paper-soft); }
.ba-after { border-color: rgba(34, 197, 94, .35); box-shadow: 0 12px 32px -12px rgba(34, 197, 94, .18); }
.ba-h { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin-bottom: 18px; }
.ba-before .ba-h { color: var(--ink-3); }
.ba-after .ba-h { color: var(--green-deep); }
.ba-list { display: flex; flex-direction: column; gap: 13px; }
.ba-list li { font-size: .92rem; color: var(--ink-2); line-height: 1.5; padding-left: 24px; position: relative; }
.ba-before .ba-list li::before { content: "✕"; position: absolute; left: 0; top: 1px; color: var(--ink-3); font-size: .72rem; font-weight: 800; }
.ba-after .ba-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: var(--green-deep); font-size: .72rem; font-weight: 800; }
.ba-final { text-align: center; margin-top: 32px; font-size: 1.02rem; color: var(--ink-2); max-width: 700px; margin-inline: auto; }

/* ---------- trusted by / countries ---------- */

.countries { margin-top: 40px; text-align: center; }
.countries-label { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.countries-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 18px; }
.country-chip { background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 8px 16px; font-size: .86rem; font-weight: 600; color: var(--ink); }
.countries-note { max-width: 640px; margin: 0 auto; color: var(--ink-3); font-size: .9rem; }

/* ---------- stats band heading (4-stat variant) ---------- */

.stats-band .section-sub { color: rgba(255, 255, 255, .65); }
.stats-row-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- case study teaser (home) ---------- */

.cs-teaser {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px;
  text-align: center;
}
.cs-teaser p { color: var(--ink-2); font-size: 1.02rem; margin-bottom: 14px; }
.cs-teaser-cta { margin-top: 10px; }

/* ---------- generic "see more" link (reused across sections) ---------- */

.section-more { text-align: center; margin-top: 34px; }
.section-more a { font-weight: 700; color: var(--brand); }

/* ---------- reveal on scroll ---------- */

/* base hidden state; GSAP animates it directly (no CSS transition in that
   path), while the no-GSAP fallback adds .in and transitions via that rule */
.reveal {
  opacity: 0;
  transform: translateY(26px);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s cubic-bezier(.25,.7,.3,1) var(--d, 0s), transform .7s cubic-bezier(.25,.7,.3,1) var(--d, 0s);
}

/* GSAP runs its own float + scroll-drift tweens on the chips */
body.gsap-on .hero-chip { animation: none; }

/* The hero is the LCP candidate on every page that has one, so it can't
   sit at opacity:0 waiting on GSAP (or even just on main.js) to load and
   run before it paints. main.js already treats this exact selector set
   as "the hero" (see heroText/heroVisual in its reveal init) - here it
   just starts visible instead of fading in, while everything else below
   the fold still reveals on scroll as before. */
.hero-copy .reveal,
.page-hero .reveal,
.hero-visual {
  opacity: 1;
  transform: none;
}

/* ---------- legal / policy pages ---------- */

.legal-switch {
  display: inline-flex;
  gap: 4px;
  margin: 24px auto 0;
  padding: 5px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
  position: relative;
}
.legal-switch a {
  padding: 9px 22px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: color .2s, background .2s;
}
.legal-switch a:hover { color: var(--ink); }
.legal-switch a.is-active {
  color: #fff;
  background: var(--grad-strong);
  box-shadow: 0 6px 16px rgba(124, 58, 237, .28);
}
.legal-switch a.is-active:hover { color: #fff; }

.legal-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px auto 0;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--brand-ghost);
  border: 1px solid var(--brand-soft);
  color: var(--brand-deep);
  font-size: .82rem;
  font-weight: 600;
  position: relative;
}
.legal-meta svg { width: 15px; height: 15px; }

.legal { padding: 56px 0 88px; }

.legal-grid {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.legal-toc { position: sticky; top: calc(var(--nav-h) + 24px); }
.legal-toc-h {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.legal-toc nav {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--line);
}
.legal-toc a {
  padding: 7px 0 7px 16px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: .875rem;
  line-height: 1.35;
  color: var(--ink-2);
  transition: color .2s, border-color .2s;
}
.legal-toc a:hover { color: var(--ink); }
.legal-toc a.active {
  color: var(--brand-deep);
  border-left-color: var(--brand);
  font-weight: 600;
}

.legal-doc { max-width: 724px; }
.legal-intro {
  font-size: 1.08rem;
  color: var(--ink-2);
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.legal-block { padding-top: 36px; }
.legal-block h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.35rem;
  margin-bottom: 14px;
}
.legal-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand-ghost);
  color: var(--brand-deep);
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 700;
}
.legal-block h3 { margin: 22px 0 8px; font-size: 1rem; }
.legal-block p { color: var(--ink-2); margin-bottom: 12px; }
.legal-block p:last-child { margin-bottom: 0; }
.legal-block a {
  color: var(--brand-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.legal-list { display: flex; flex-direction: column; gap: 10px; margin: 4px 0; }
.legal-list li { position: relative; padding-left: 26px; color: var(--ink-2); }
.legal-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad-strong);
}
.legal-list-no li::before {
  background: #E5533C;
  border-radius: 2px;
}

.legal-note {
  margin: 16px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  color: var(--ink-2);
  font-size: .95rem;
}

.legal-contact {
  margin-top: 44px;
  padding: 28px 30px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.legal-contact-txt h3 { color: #fff; margin-bottom: 4px; }
.legal-contact-txt p { color: rgba(255, 255, 255, .68); font-size: .92rem; margin: 0; }

@media (max-width: 900px) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc { display: none; }
  .legal-contact { flex-direction: column; align-items: flex-start; }
}

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-copy { text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-ctas { justify-content: center; }
  .hero-chip-1 { left: 0; }
  .hero-chip-2 { right: 0; }

  .feature-grid { grid-template-columns: repeat(2, 1fr); }

  .dd-grid, .f-grid { grid-template-columns: 1fr; gap: 44px; }
  .dd-grid-flip .dd-copy, .f-grid-flip .f-copy { order: 1; }
  .dd-grid-flip .dd-visual, .f-grid-flip .f-visual { order: 2; }
  .dd-sticky { position: static; }
  .dd-callout-1 { left: 6px; }
  .dd-callout-2 { right: 6px; }
  .dd-callout-3 { left: 6px; }

  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid .price-card,
  .price-grid .price-card:nth-child(5) { grid-column: auto; }
  .price-grid .price-card:nth-child(7) { grid-column: 1 / -1; width: calc(50% - 10px); justify-self: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-news { grid-column: auto; max-width: none; }

  .ba-grid { grid-template-columns: 1fr; gap: 20px; }
  .stats-row-4 { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}

@media (max-width: 680px) {
  /* These are blurred decoration sitting behind a card, inset past
     every edge so the glow bleeds. On a phone the horizontal bleed is
     wider than the screen, so it is dropped and the vertical bleed
     kept: at this size the difference is invisible, and it is the
     larger half of what was pushing the page sideways. */
  .wb-glow, .waov-glow { left: 0; right: 0; }

  .section { padding: 54px 0; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-drawer { display: flex; }
  .nav-actions .btn { display: none; }
  .nav-drawer .btn { display: inline-flex; }

  .hero { padding-top: calc(var(--nav-h) + 32px); }
  .hero-ctas .btn { width: 100%; }
  .dd-callout { display: none; }
  .cart-mock { padding: 18px; }
  .hero-chip-1 { top: -14px; }
  .hero-chip-2 { bottom: -10px; }

  .feature-grid { grid-template-columns: 1fr; }
  .dash-stats { grid-template-columns: 1fr; }
  .dash-insights { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; gap: 36px; }
  .stats-row-4 { grid-template-columns: 1fr; }
  .waov-row { flex-wrap: wrap; }
  .waov-row-tag { margin-left: 56px; }
  .price-grid { grid-template-columns: 1fr; }
  .price-grid .price-card:nth-child(7) { width: auto; justify-self: stretch; }
  .section-head-row { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-news { grid-column: auto; max-width: none; }
  .footer-brand { grid-column: auto; }
  .bm-body { grid-template-columns: 1fr; }
  .carousel { grid-auto-columns: 86%; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .wm-ring, .bp-fill { animation: none !important; }
}

/* ============================================================
   Why Brix? CTA + before/after pictorial
   ============================================================ */

.wb-cta { margin-top: 28px; }
.wb-cta-note {
  margin-top: 13px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-2);
}
.wb-cta-note::before {
  content: "✓";
  color: var(--green-deep);
  font-weight: 800;
  margin-right: 8px;
}

.ba-pict {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  max-width: 500px;
  margin-inline: auto;
}
.bp { flex: 1 1 0; min-width: 0; margin: 0; display: flex; flex-direction: column; }
.bp-tag {
  align-self: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 12px;
}
.bp-tag-after {
  color: var(--green-deep);
  background: rgba(34, 197, 94, .10);
  border-color: rgba(34, 197, 94, .3);
}

.bp-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.is-before .bp-card { filter: grayscale(.45); opacity: .9; }
.bp-card-smart {
  border-color: rgba(34, 197, 94, .35);
  box-shadow: 0 18px 40px -16px rgba(34, 197, 94, .28), var(--shadow-1);
}

.bp-hd { display: flex; justify-content: space-between; align-items: center; }
.bp-hd-title { font-family: var(--font-display); font-weight: 700; font-size: .82rem; }
.bp-hd-count {
  font-size: .62rem;
  font-weight: 700;
  color: var(--ink-3);
  background: var(--paper-soft);
  padding: 3px 9px;
  border-radius: 100px;
}
.bp-hd-count-on { color: var(--brand); background: var(--brand-soft); }

.bp-line { display: flex; align-items: center; gap: 9px; }
.bp-line .cm-thumb { width: 30px; height: 30px; border-radius: 8px; }
.bp-info { flex: 1; min-width: 0; line-height: 1.25; }
.bp-info b {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-info small { font-size: .64rem; color: var(--ink-3); }
.bp-price { font-weight: 700; font-size: .76rem; flex: none; }

.bp-empty {
  font-size: .7rem;
  color: var(--ink-3);
  text-align: center;
  padding: 15px 6px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--paper-soft);
}

.bp-reward-msg { font-size: .66rem; color: var(--ink-2); margin-bottom: 6px; }
.bp-reward-msg b { color: var(--green-deep); }
.bp-track { height: 7px; border-radius: 100px; background: var(--paper-soft); overflow: hidden; }
.bp-fill {
  display: block;
  height: 100%;
  width: 95%;
  border-radius: 100px;
  background: var(--reward-grad);
}
/* GSAP drives the fill on scroll; this is the no-GSAP fallback */
body:not(.gsap-on) .bp-fill { animation: bpfill 1.4s cubic-bezier(.3,.9,.35,1) both; }
@keyframes bpfill { from { width: 18%; } to { width: 95%; } }

.bp-upsell {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--brand-ghost);
  border: 1px dashed rgba(124, 58, 237, .35);
  border-radius: 10px;
  padding: 7px 8px;
}
.bp-upsell .cm-thumb { width: 27px; height: 27px; }
.bp-add {
  flex: none;
  font-size: .64rem;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  padding: 5px 9px;
  border-radius: 7px;
}

.bp-coupons { display: flex; gap: 6px; }
.bp-coupon {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1.2px dashed var(--ink-3);
  color: var(--ink-2);
  background: #fff;
}
.bp-coupon-on { border-style: solid; border-color: var(--brand); background: var(--brand); color: #fff; }

.bp-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .72rem;
  color: var(--ink-2);
  padding-top: 2px;
}
.bp-foot b { font-family: var(--font-display); font-size: .9rem; color: var(--ink); }
.bp-foot-up { color: var(--green-deep); }
.bp-checkout {
  display: block;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  border-radius: 9px;
  padding: 9px;
}
.bp-checkout-on { background: var(--brand); }

.ba-pict-arrow {
  flex: none;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--brand);
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
}

.ba-pict-cap {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 18px;
  font-size: .92rem;
  color: var(--ink-2);
}
.ba-pict-cap b { color: var(--green-deep); font-family: var(--font-display); }

@media (max-width: 520px) {
  .ba-pict { flex-direction: column; gap: 6px; }
  .ba-pict-arrow { transform: rotate(90deg); }
  .bp { width: 100%; }
}

/* ============================================================
   Countries we serve: SVG world map
   ============================================================ */

.worldmap { max-width: 720px; margin: 6px auto 20px; }
.wm-svg { width: 100%; height: auto; display: block; overflow: visible; }
.wm-label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  fill: var(--ink);
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.wm-dot { fill: var(--brand); }
.wm-ring {
  fill: var(--brand);
  transform-box: fill-box;
  transform-origin: center;
  animation: wmpulse 2.8s ease-out infinite;
}
/* GSAP drops the pins in on scroll; this is the no-GSAP fallback */
body:not(.gsap-on) .wm-pin { animation: wmpop .5s both; animation-delay: var(--d, 0s); }
/* Every other pin in the AI blue accent, so the map alternates
   inside the brand rather than borrowing the growth green, which
   the palette reserves for a result going up. */
.wm-pin:nth-child(2n) .wm-ring { fill: var(--ai-blue); }
.wm-pin:nth-child(2n) .wm-dot { fill: var(--ai-blue); }
@keyframes wmpulse {
  0% { transform: scale(.7); opacity: .5; }
  70%, 100% { transform: scale(2.4); opacity: 0; }
}
@keyframes wmpop { from { opacity: 0; } to { opacity: 1; } }

.wm-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.wm-legend .country-chip { font-size: .8rem; padding: 6px 13px; }

/* ============================================================
   Floating Brix AI chat widget (site-wide)
   ============================================================ */

.bx-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 13px;
  border: 0;
  border-radius: 100px;
  background: var(--grad-strong);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .92rem;
  box-shadow: 0 10px 30px -8px rgba(124, 58, 237, .5), 0 4px 12px rgba(23, 20, 46, .16);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.bx-launcher:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -8px rgba(124, 58, 237, .6); }
.bx-launcher-ic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.bx-launcher-ic svg { width: 18px; height: 18px; }
.bx-launcher-dot {
  position: absolute;
  top: 7px;
  right: 13px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #fff;
}
body.bx-open .bx-launcher { opacity: 0; pointer-events: none; transform: scale(.6); }

.bx-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 121;
  width: 372px;
  max-width: calc(100vw - 32px);
  height: 566px;
  max-height: calc(100vh - 44px);
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -20px rgba(23, 20, 46, .4), 0 10px 30px -12px rgba(23, 20, 46, .2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(16px) scale(.96);
  opacity: 0;
  pointer-events: none;
  transform-origin: bottom right;
  transition: transform .25s cubic-bezier(.3,.9,.35,1), opacity .25s ease;
}
body.bx-open .bx-panel { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.bx-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: var(--grad-strong);
  color: #fff;
}
.bx-head-ava {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex: none;
  background: rgba(255, 255, 255, .16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bx-head-ava img { width: 20px; height: auto; display: block; }
.bx-head-tt { line-height: 1.25; }
.bx-head-tt b { font-family: var(--font-display); font-weight: 800; font-size: .98rem; display: block; }
.bx-head-tt span { font-size: .72rem; opacity: .9; display: inline-flex; align-items: center; gap: 6px; }
.bx-head-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #A78BFA;
  animation: wbpulse 2s ease-out infinite;
}
.bx-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.bx-close:hover { background: rgba(255, 255, 255, .26); }

.bx-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--paper-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bx-msg {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: .86rem;
  line-height: 1.5;
  animation: bxin .3s ease both;
}
.bx-msg-ai {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.bx-msg-user {
  align-self: flex-end;
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.bx-msg b { font-weight: 700; }
@keyframes bxin { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

.bx-suggests-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 8px 2px 2px;
}
.bx-chip {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  color: var(--brand-deep);
  background: #fff;
  border: 1px solid var(--brand-soft);
  border-radius: 12px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.bx-chip:hover { background: var(--brand-ghost); border-color: var(--brand); transform: translateX(2px); }

.bx-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.bx-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: bxblink 1.2s infinite; }
.bx-typing span:nth-child(2) { animation-delay: .2s; }
.bx-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes bxblink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.bx-foot { border-top: 1px solid var(--line); padding: 10px 12px; background: #fff; }
/* In "partial" mode the footer holds only the note, and the gap that
   separates it from the input row would read as a stray indent. */
.bx-foot > .bx-note:only-child { margin-top: 0; }

.bx-inputrow { display: flex; align-items: center; gap: 8px; }
.bx-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 10px 15px;
  font-size: .86rem;
  font-family: inherit;
  color: var(--ink);
  outline: none;
  background: var(--paper-soft);
}
.bx-input:focus { border-color: var(--brand); background: #fff; }
.bx-send {
  flex: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.bx-send:hover { background: var(--brand-deep); transform: scale(1.05); }
.bx-note { text-align: center; font-size: .66rem; color: var(--ink-3); margin-top: 7px; }
/* Inherit the note's colour rather than the site link blue: this is fine
   print, not a call to action competing with the send button. */
.bx-note a { color: inherit; text-decoration: underline; }
.bx-note a:hover { color: var(--ink-2); }

@media (max-width: 480px) {
  .bx-launcher { right: 14px; bottom: 14px; padding: 13px; }
  .bx-launcher-label { display: none; }
  .bx-panel { right: 10px; bottom: 10px; width: calc(100vw - 20px); height: calc(100vh - 90px); }
}

/* ==========================================================================
   Markdown-rendered articles
   --------------------------------------------------------------------------
   The article body is now generated from markdown, which can produce
   elements the hand-built pages never used. The typography for h2, h3, p,
   ul, ol and strong is already defined above and applies unchanged; these
   rules cover the rest so nothing lands on the page unstyled.
   ========================================================================== */

.cs-article h4 {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink);
  margin: 30px 0 10px;
  letter-spacing: -.01em;
}

.cs-article blockquote {
  margin: 26px 0;
  padding: 18px 24px;
  border-left: 3px solid var(--brand);
  background: var(--brand-ghost);
  border-radius: 0 10px 10px 0;
}
.cs-article blockquote p {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.04rem;
  font-style: italic;
}
.cs-article blockquote p + p { margin-top: 12px; }

.cs-article code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .88em;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
  color: var(--brand-deep);
}

.cs-article pre {
  margin: 24px 0;
  padding: 18px 20px;
  background: var(--navy);
  border-radius: 12px;
  overflow-x: auto;
}
.cs-article pre code {
  background: none;
  border: 0;
  padding: 0;
  color: #DCD3F0;
  font-size: .86rem;
  line-height: 1.6;
}

.cs-article hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 38px 0;
}

/* An author-placed [cta] button inside the body. The button itself is
   the site's own .btn-primary, so this only has to own the block: the
   space around it, and which edge it sits on. */
.cs-cta {
  display: flex;
  margin: 34px 0;
}
.cs-cta-left { justify-content: flex-start; }
.cs-cta-center { justify-content: center; }
.cs-cta-right { justify-content: flex-end; }

/* A long label must wrap rather than push the article sideways on a
   narrow screen, which .btn's nowrap would otherwise do. */
.cs-cta .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}

.cs-article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px auto;
  border-radius: 12px;
  border: 1px solid var(--line);
}

/* Headings carry an id so a section can be linked to directly. Offset the
   scroll target by the sticky nav so the heading is not hidden under it. */
.cs-article h2[id],
.cs-article h3[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }

.cs-article ul ul,
.cs-article ol ol,
.cs-article ul ol,
.cs-article ol ul { margin: 8px 0 8px 22px; }

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 46px;
  align-items: start;
}

.contact-form { display: block; }

.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact-field { display: block; margin-bottom: 20px; }
.contact-field > span {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  margin-bottom: 7px;
}
.contact-field > span em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-3);
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font: 400 1rem/1.55 var(--font-body);
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.contact-field textarea { resize: vertical; min-height: 130px; }

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: var(--ink-3); }

/* Honeypot: off-screen rather than display:none, because some bots skip
   fields that are explicitly hidden. */
.contact-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.contact-fine { margin: 0; color: var(--ink-3); font-size: .86rem; }

.contact-errors {
  background: #FDECEC;
  border: 1px solid #F5C6C6;
  color: #8A2020;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 26px;
}
.contact-errors p { margin: 0 0 6px; font-size: .95rem; }
.contact-errors ul { margin: 0; padding-left: 20px; font-size: .93rem; }
.contact-errors li { margin: 3px 0; }

.contact-done {
  grid-column: 1 / -1;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 0 10px;
}
.contact-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--reward-grad);
  color: #fff;
  margin-bottom: 22px;
}
.contact-tick svg { width: 28px; height: 28px; }
.contact-done h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  margin: 0 0 12px;
  color: var(--ink);
}
.contact-done p { color: var(--ink-2); margin: 0 0 10px; }
.contact-done-links { font-size: .93rem; margin-top: 20px; }
.contact-done-links a { color: var(--brand); font-weight: 600; }

.contact-aside { display: grid; gap: 16px; }
.contact-card {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
}
.contact-card-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 8px;
}
.contact-card p { margin: 0 0 12px; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.contact-card p:last-of-type { margin-bottom: 0; }
/* Scoped away from .btn: the generic link colour was landing on the
   Install button too, painting blue text on a blue background. */
.contact-card a:not(.btn) { color: var(--brand); font-weight: 600; }
.contact-card .btn { margin-top: 6px; }

@media (max-width: 900px) {
  .contact-wrap { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 560px) {
  .contact-row { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   404
   ========================================================================== */

.nf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}
.nf-links a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--paper);
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.nf-links a:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1px);
}

/* ==========================================================================
   Article layout: body at three quarters, standing details at one quarter
   --------------------------------------------------------------------------
   The meta that used to sit in a line under the title (author, date, read
   time, topic) now lives in a sidebar that stays with you while you read.
   ========================================================================== */

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 54px;
  align-items: start;
}

.post-layout .cs-article { max-width: none; margin: 0; min-width: 0; }

.post-aside { position: sticky; top: calc(var(--nav-h) + 26px); }
.post-aside-in {
  border-left: 2px solid var(--line);
  padding-left: 22px;
}

.post-fact { margin-bottom: 18px; }
.post-fact-k {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.post-fact-v {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.post-aside-sub {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.post-aside-cta { margin-top: 20px; width: 100%; text-align: center; }

/* The back link now sits above the two columns rather than inside the
   article, so it needs its own spacing. */
.post-layout + .cs-related,
.section > .container > .post-back { display: inline-flex; }
.section > .container > .post-back { margin-bottom: 26px; }

@media (max-width: 1000px) {
  .post-layout { grid-template-columns: 1fr; gap: 0; }
  /* Above the article on a narrow screen: the details are context you
     want before reading, not after. */
  .post-aside { position: static; order: -1; margin-bottom: 34px; }
  .post-aside-in {
    border-left: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
  }
  .post-fact { margin-bottom: 0; }
  .post-aside-sub { flex-basis: 100%; margin-top: 0; padding-top: 0; border-top: 0; }
  .post-aside-cta { width: auto; }
}

/* --------------------------------------------------------------------------
   One consistent type scale for article text.
   Body copy was already 1.02rem everywhere, but the headings used clamp()
   so they resized with the viewport while the paragraphs did not, which is
   what made the page look uneven. Fixed sizes, one step per level.
   -------------------------------------------------------------------------- */

.cs-article p,
.cs-article li,
.cs-article td,
.cs-article th {
  font-size: 1.02rem;
  line-height: 1.75;
}

.cs-article .cs-lede { font-size: 1.16rem; line-height: 1.65; }

.cs-article h2 {
  font-size: 1.62rem;
  line-height: 1.3;
  margin: 44px 0 14px;
}
.cs-article h3 {
  font-size: 1.22rem;
  line-height: 1.35;
  margin: 32px 0 10px;
}
.cs-article h4 { font-size: 1.06rem; margin: 26px 0 8px; }

.cs-article ul, .cs-article ol { margin: 16px 0 20px; padding-left: 24px; }
.cs-article li { margin: 7px 0; }
.cs-article p { margin: 0 0 18px; }

.cs-table th { font-size: .82rem; }
.cs-table td, .cs-table th { line-height: 1.55; }

@media (max-width: 640px) {
  .cs-article h2 { font-size: 1.42rem; }
  .cs-article h3 { font-size: 1.14rem; }
}

/* Related reading inside the article sidebar. */
.post-more {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.post-more .post-fact-k { margin-bottom: 10px; }

.post-more-item {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2, #F1EDFA);
}
.post-more-item:last-of-type { border-bottom: 0; }

.post-more-title {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  transition: color .18s ease;
}
.post-more-item:hover .post-more-title { color: var(--brand); }

.post-more-meta {
  display: block;
  margin-top: 3px;
  font-size: .78rem;
  color: var(--ink-3);
}

.post-more-all {
  display: inline-block;
  margin-top: 12px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--brand);
}

@media (max-width: 1000px) {
  /* The sidebar sits above the article on narrow screens, where a list
     of other posts would delay the thing you came to read. */
  .post-more { display: none; }
}

/* Autosave state line in the admin editor. */
.ad-sub-bad { color: #B93838 !important; }

/* ==========================================================================
   /tutorials — the video tutorials
   --------------------------------------------------------------------------
   A player on the left with the syllabus on the right, the same way the
   article pages put the body first and the standing details in a rail
   beside it. Everything here is prefixed tut- and used on one page, so
   none of it can reach the rest of the site.
   ========================================================================== */

/* ---------- hero facts ---------- */

.tut-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 26px;
  margin-top: 26px;
  position: relative;
  font-size: .92rem;
  color: var(--ink-2);
}
.tut-facts li { display: inline-flex; align-items: center; gap: 8px; }
.tut-facts b { color: var(--ink); font-weight: 700; }
.tut-fact-ic {
  display: inline-flex;
  width: 17px;
  height: 17px;
  color: var(--brand);
}
.tut-fact-ic svg { width: 100%; height: 100%; }

/* ---------- the two columns ---------- */

.tut-section { padding-top: 54px; }

.tut-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  gap: 40px;
  align-items: start;
}

.tut-main { min-width: 0; }

/* ---------- the player ---------- */

.tut-stage { position: relative; }

.tut-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow-2);
}

/* The still frame that stands in until the visitor asks for the video. */
.tut-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}
.tut-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tut-poster-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 11, 45, .18) 0%, rgba(20, 11, 45, .12) 45%, rgba(20, 11, 45, .68) 100%);
  transition: background .25s ease;
}
.tut-poster:hover .tut-poster-veil {
  background: linear-gradient(180deg, rgba(20, 11, 45, .3) 0%, rgba(20, 11, 45, .24) 45%, rgba(20, 11, 45, .74) 100%);
}

.tut-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-strong);
  color: #fff;
  box-shadow: 0 12px 34px rgba(20, 11, 45, .45);
  transition: transform .22s cubic-bezier(.32,.72,.28,1), box-shadow .22s ease;
}
.tut-play svg { width: 34px; height: 34px; margin-left: 3px; }
.tut-poster:hover .tut-play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 18px 44px rgba(124, 58, 237, .5);
}

/* Runtime, bottom left, the way a video thumbnail carries it. A tinted
   pill rather than plain text: these stills are bright in places and a
   drop shadow alone does not survive them. */
.tut-poster-dur {
  position: absolute;
  left: 18px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(20, 11, 45, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.tut-poster-dur svg { width: 11px; height: 11px; }

.tut-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- what is playing ---------- */

.tut-now { padding-top: 26px; }

.tut-now-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.tut-now-eyebrow {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 9px;
}

.tut-now-title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.tut-skip { display: flex; gap: 8px; flex-shrink: 0; }
.tut-skip-btn {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.tut-skip-btn svg { width: 19px; height: 19px; }
.tut-skip-btn:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-ghost);
}
.tut-skip-btn:disabled { opacity: .35; cursor: default; }

.tut-now-blurb {
  margin-top: 14px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 62ch;
}

.tut-now-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 22px;
}
.tut-now-link {
  font-size: .92rem;
  font-weight: 600;
  color: var(--brand);
  transition: color .15s ease;
}
.tut-now-link:hover { color: var(--brand-deep); }

/* Already ticked off: the button stays available as "continue", but
   stops competing with the video for attention. */
.tut-now-actions .btn-primary.is-done {
  background: rgba(34, 197, 94, .1);
  color: var(--green-deep);
  box-shadow: none;
}
.tut-now-actions .btn-primary.is-done:hover {
  background: rgba(34, 197, 94, .18);
  transform: translateY(-1px);
  box-shadow: none;
}
.tut-now-actions .btn:disabled { opacity: .6; cursor: default; }
.tut-now-actions .btn:disabled:hover { transform: none; }

/* ---------- the syllabus rail ---------- */

.tut-rail { position: sticky; top: calc(var(--nav-h) + 26px); }

.tut-rail-in {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--nav-h) - 52px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.tut-progress {
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.tut-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.tut-progress-h {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.tut-progress-n {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.tut-bar {
  height: 7px;
  border-radius: 99px;
  background: #EFEAFB;
  overflow: hidden;
}
.tut-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--reward-grad);
  transition: width .5s cubic-bezier(.25,.7,.3,1);
}

.tut-progress-note {
  margin-top: 11px;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.is-complete .tut-progress-note { color: var(--green-deep); font-weight: 600; }

/* The list scrolls inside the card rather than pushing it past the
   bottom of a short screen. */
.tut-modules {
  /* The base reset only covers ul, so an ol still draws browser markers.
     They were invisible here only because this box scrolls; below 1000px
     it does not, and "1." would have appeared beside every module. */
  list-style: none;
  overflow-y: auto;
  padding: 6px 0 10px;
  flex: 1 1 auto;
  min-height: 0;
}

.tut-module + .tut-module { margin-top: 4px; }

.tut-module-h {
  padding: 13px 20px 7px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tut-module-n { color: var(--brand); margin-right: 7px; }

.tut-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 20px;
  transition: background .16s ease;
}
.tut-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand);
  opacity: 0;
  transition: opacity .16s ease;
}
.tut-row:hover { background: var(--paper-soft); }
.tut-row.is-playing { background: var(--brand-ghost); }
.tut-row.is-playing::before { opacity: 1; }

/* The real checkbox stays in the page for keyboard and screen readers;
   the square beside it is its label. */
.tut-check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.tut-check-box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1.6px solid var(--line);
  background: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.tut-check-box svg { width: 12px; height: 12px; opacity: 0; transition: opacity .16s ease; }
.tut-check-box:hover { border-color: var(--brand); }
.tut-check:focus-visible + .tut-check-box {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.tut-row.is-done .tut-check-box {
  background: var(--green);
  border-color: var(--green);
}
.tut-row.is-done .tut-check-box svg { opacity: 1; }

.tut-open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  text-align: left;
}
.tut-open-title {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  transition: color .16s ease;
}
.tut-row.is-playing .tut-open-title { color: var(--brand-deep); }
.tut-row.is-done .tut-open-title { color: var(--ink-2); font-weight: 500; }

.tut-open-meta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tut-open-state { display: inline-flex; color: var(--ink-3); transition: color .16s ease; }
.tut-open-state svg { width: 11px; height: 11px; }
.tut-row.is-playing .tut-open-state { color: var(--brand); }

.tut-rail-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  font-weight: 600;
}
.tut-reset { color: var(--ink-3); transition: color .15s ease; }
.tut-reset:hover { color: var(--ink); }
.tut-reset[hidden] { display: none; }
.tut-rail-yt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: var(--ink-2);
  transition: color .15s ease;
}
.tut-rail-yt:hover { color: var(--brand); }

/* ---------- the rest of the page ---------- */

.tut-read {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px 44px;
  flex-wrap: wrap;
}
.tut-read-copy { flex: 1 1 440px; max-width: 640px; }
.tut-read-sub {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 1.02rem;
  max-width: 54ch;
}
.tut-read-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }

.tut-noscript {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
  font-size: .95rem;
}
.tut-noscript ul { margin-top: 10px; display: grid; gap: 6px; }
.tut-noscript a { color: var(--brand); font-weight: 600; }

/* Announcements and checkbox names that only screen readers need. */
.tut-live,
.tut-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- narrower screens ---------- */

@media (max-width: 1100px) {
  .tut-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; }
}

@media (max-width: 1000px) {
  /* The player comes first and the syllabus follows it, so the thing
     you came to watch is never below a list. */
  .tut-layout { grid-template-columns: 1fr; gap: 34px; }
  .tut-rail { position: static; }
  .tut-rail-in { max-height: none; }
  .tut-modules { overflow-y: visible; }
}

@media (max-width: 620px) {
  .tut-section { padding-top: 38px; }
  .tut-screen { border-radius: var(--radius); }
  .tut-play { width: 60px; height: 60px; }
  .tut-play svg { width: 26px; height: 26px; }
  .tut-now-head { flex-direction: column; align-items: stretch; gap: 14px; }
  /* Under the video rather than beside the title, with the two arrows at
     opposite ends so the row reads as paging through the series. */
  .tut-skip { order: -1; justify-content: space-between; }
  .tut-now-actions .btn { width: 100%; }
  .tut-now-link { width: 100%; }
  /* Two nowrap buttons do not fit on a phone beside each other, and the
     row must be allowed to shrink or it pushes the page sideways. */
  .tut-read-actions { width: 100%; flex-shrink: 1; }
  .tut-read-actions .btn { flex: 1 1 100%; }
}

/* ---------- room in the nav for a sixth link ---------- */

/* Six links plus the logo and the install button run out of room before
   the burger takes over at 680px, so the spacing tightens on the way
   down rather than the row overflowing. */
@media (max-width: 1000px) {
  .nav-links { gap: 22px; }
}
@media (max-width: 820px) {
  .nav-links { gap: 14px; font-size: .9rem; }
}

/* ==========================================================================
   /cart-that-sells — the campaign landing page
   --------------------------------------------------------------------------
   Same brand system as the rest of the site; a different job. Everything
   here is prefixed lp- and used on one page, plus the two chrome classes
   (.footer-lite, .nav minimal) that any page setting $page_chrome gets.

   The one place this page spends its boldness is the pair of receipts:
   real paper, torn edge, figures in a monospace, because a receipt is the
   artifact a merchant reads all day and it turns "+32% AOV" into two
   numbers they recognise. Everything around it stays quiet.
   ========================================================================== */

/* ---------- minimal chrome ---------- */

/* The site hides the header button below 680px because the burger menu
   carries it instead. Minimal chrome has no burger and no drawer, so
   without this the bar would be a logo and nothing else on a phone,
   which is where most campaign traffic lands. */
@media (max-width: 680px) {
  .nav-lite .nav-actions .btn { display: inline-flex; }
}

.footer-lite {
  border-top: 1px solid var(--line);
  padding: 26px 0;
  font-size: .86rem;
  color: var(--ink-3);
}
.footer-lite-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}
.footer-lite-legal a { transition: color .15s ease; }
.footer-lite-legal a:hover { color: var(--brand); }

/* ---------- hero ---------- */

.lp-hero .hero-ctas { margin-bottom: 4px; }

/* Three claims, not a paragraph: the objections a cold visitor raises
   before they will click anything. */
.lp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-2);
}
.lp-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.lp-trust span::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(34, 197, 94, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}

/* ---------- numbers band ---------- */

.lp-numbers {
  padding: 30px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-soft);
}
.lp-numbers-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.lp-numbers-row b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--grad-strong);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lp-numbers-row small {
  display: block;
  margin-top: 5px;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--ink-2);
}

/* ---------- the leak ---------- */

.lp-leaks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.lp-leak {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
}
/* The figure is the symptom itself, set as it appears in a cart, so the
   card is labelled by the evidence rather than by a number in a circle. */
.lp-leak-fig {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--paper-soft);
  border: 1px dashed var(--line);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: -0.01em;
}
.lp-leak h3 { margin-bottom: 9px; }
.lp-leak p { color: var(--ink-2); font-size: .96rem; line-height: 1.6; }

/* ---------- the receipts ---------- */

.lp-receipts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  max-width: 840px;
  margin-inline: auto;
  align-items: stretch;
}

/* Both slips run to the same length so the two torn edges line up and the
   pair reads as one comparison rather than two loose cards. The shorter
   receipt gets the slack as whitespace above its note, which is where a
   real receipt would have it. */
.lp-receipt { margin: 0; display: flex; flex-direction: column; }

.lp-receipt-tag {
  text-align: center;
  margin-bottom: 12px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lp-receipt-tag-win { color: var(--green-deep); }

/* Paper: a hard top edge and a torn bottom one, cut with a repeating
   conic gradient rather than an image so it stays sharp at any width. */
.lp-paper {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  padding: 26px 24px 30px;
  box-shadow: var(--shadow-1);
  border-radius: 4px 4px 0 0;
}
.lp-paper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
  background: repeating-conic-gradient(from -45deg at 50% 0,
    var(--paper) 0deg 90deg, transparent 90deg 180deg) 0 0 / 16px 20px;
  filter: drop-shadow(0 3px 4px rgba(23, 20, 46, .06));
}
.lp-receipt-win .lp-paper {
  box-shadow: 0 4px 14px rgba(23, 20, 46, .07), 0 24px 48px -18px rgba(34, 197, 94, .34);
}

.lp-paper-h {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--line);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}

.lp-lines { display: flex; flex-direction: column; gap: 12px; }

.lp-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.lp-line dt {
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.lp-line dt span {
  display: block;
  margin-top: 2px;
  font-size: .74rem;
  font-weight: 500;
  color: var(--ink-3);
}
.lp-line dd {
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lp-line-sub dt, .lp-line-sub dd { color: var(--ink-2); font-weight: 500; }

/* The two lines Brix is responsible for. */
.lp-line-add dt, .lp-line-add dd { color: var(--green-deep); }
.lp-line-add dt span { color: var(--green); }
.lp-line-won dt, .lp-line-won dd { color: var(--green-deep); font-weight: 600; }
.lp-line-won dt span { color: var(--green); }

.lp-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lp-total b {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-transform: none;
}
.lp-total-win b { color: var(--green-deep); }

.lp-paper-note {
  margin-top: auto;
  padding-top: 16px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-3);
}

.lp-receipts-foot {
  max-width: 640px;
  margin: 46px auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.lp-receipts-foot b { color: var(--ink); }

/* ---------- repeated call to action ---------- */

.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  margin-top: 40px;
}
.lp-cta-note { font-size: .88rem; color: var(--ink-3); }

/* ---------- features ---------- */

.lp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.lp-feature {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.lp-feature:hover {
  border-color: rgba(124, 58, 237, .3);
  box-shadow: var(--shadow-1);
  transform: translateY(-2px);
}
.lp-feature-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  margin-bottom: 16px;
  color: #fff;
}
.lp-feature-ic svg { width: 21px; height: 21px; }
.lp-feature h3 { margin-bottom: 8px; }
.lp-feature p { color: var(--ink-2); font-size: .95rem; line-height: 1.6; }

/* ---------- getting live ---------- */

/* Numbered because this genuinely is a sequence: you cannot switch the
   widgets on before the app is installed. */
.lp-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.lp-step { position: relative; padding-top: 6px; }
.lp-step-n {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 15px;
  border-radius: 50%;
  background: var(--grad-strong);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
}
.lp-step h3 { margin-bottom: 8px; }
.lp-step p { color: var(--ink-2); font-size: .95rem; line-height: 1.6; }

/* ---------- pricing ---------- */

.lp-price-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 22px;
  align-items: stretch;
}
/* Seven plans: four across, then the last three centred underneath. */
.lp-price-grid .lp-price { grid-column: span 2; }
.lp-price-grid .lp-price:nth-child(5) { grid-column: 2 / span 2; }
.lp-price {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
}
.lp-price-hot {
  border-color: rgba(124, 58, 237, .4);
  box-shadow: 0 12px 34px -14px rgba(124, 58, 237, .4);
}
.lp-price-flag {
  position: absolute;
  top: -12px;
  left: 26px;
  padding: 5px 13px;
  border-radius: 99px;
  background: var(--grad-strong);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.lp-price h3 { margin-bottom: 10px; }
.lp-price-fig { display: flex; align-items: baseline; gap: 5px; }
.lp-price-fig b {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.lp-price-fig span { color: var(--ink-3); font-size: .92rem; }
.lp-price-for {
  margin-top: 4px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--brand);
}
.lp-price-list {
  flex: 1;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.lp-price-cta { margin-top: 24px; width: 100%; }
.lp-price-list li {
  position: relative;
  padding-left: 24px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.lp-price-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D28D9' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lp-price-list li.is-off { color: var(--ink-3); }
.lp-price-list li.is-off::before {
  content: "–";
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-weight: 800;
}

/* ---------- sticky install bar ---------- */

/* Hidden outright on a wide screen, where an install button is never far
   away and a fixed bar would only be in the way. */
.lp-sticky { display: none; }
.lp-sticky[hidden] { display: none; }

/* ---------- narrower screens ---------- */

@media (max-width: 1000px) {
  .lp-features, .lp-steps, .lp-price-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-price-grid .lp-price,
  .lp-price-grid .lp-price:nth-child(5) { grid-column: auto; }
  .lp-price-grid .lp-price:nth-child(7) { grid-column: 1 / -1; width: calc(50% - 11px); justify-self: center; }
  .lp-leaks { grid-template-columns: 1fr; }
  .lp-numbers-row { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 760px) {
  /* Both receipts stay side by side as long as they can, because the
     comparison is the whole point of the section. Below this they stack,
     and the winning one keeps its green shadow to hold the contrast. */
  .lp-receipts { grid-template-columns: 1fr; gap: 34px; max-width: 420px; }
}

@media (max-width: 680px) {
  .lp-features, .lp-steps, .lp-price-grid { grid-template-columns: 1fr; }
  .lp-price-grid .lp-price:nth-child(7) { width: auto; justify-self: stretch; }
  .lp-hero .hero-ctas .btn { width: 100%; }
  .lp-trust { justify-content: flex-start; }
  .lp-cta-row .btn { width: 100%; }
  .lp-cta-row { margin-top: 30px; }
  .footer-lite-in { justify-content: center; text-align: center; }

  /* Room for the sticky bar so it never covers the last line of the page.
     Only /cart-that-sells carries lp-bar; the other two landing pages
     have no bar and would otherwise end on 78px of empty space. */
  body.lp-bar { padding-bottom: 78px; }

  .lp-sticky {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 28px rgba(23, 20, 46, .1);
    transform: translateY(110%);
    transition: transform .3s cubic-bezier(.32,.72,.28,1);
  }
  .lp-sticky.is-up { transform: translateY(0); }

  /* Ask Brix AI is fixed to the same corner. While the bar is up it moves
     above it rather than sitting on the install button. */
  body.lp-bar-up .bx-launcher { bottom: 84px; }
  .lp-sticky-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .lp-sticky-copy { display: flex; flex-direction: column; line-height: 1.25; }
  .lp-sticky-copy b { font-family: var(--font-display); font-size: 1rem; font-weight: 800; }
  .lp-sticky-copy small { font-size: .74rem; color: var(--ink-3); }
  .lp-sticky .btn { flex-shrink: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-sticky { transition: none; }
}

/* The launcher shrinks to a circle at 480px and keeps its own bottom, so
   the offset has to be restated below that breakpoint to survive. */
@media (max-width: 480px) {
  body.lp-bar-up .bx-launcher { bottom: 84px; }
}

/* ==========================================================================
   /walkthrough and /cart-review — the other two campaign landing pages
   --------------------------------------------------------------------------
   /walkthrough is the long one: video-led, with a scroll timeline in
   js/landing-walkthrough.js. /cart-review is one screen and one form.

   The lead form styling below (dm-field, dm-form-errs) is shared by all
   three pages, /cart-that-sells included, because a form that looks
   different on three pages of the same campaign reads as three
   different companies.
   ========================================================================== */

.lp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- /walkthrough hero ---------- */

.dm-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 54px;
  align-items: center;
}
.dm-hero-copy { min-width: 0; }
.dm-hero-copy h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); }
.dm-hero-copy .hero-sub { margin-top: 20px; }
.dm-hero-copy .hero-ctas { margin-top: 30px; }
.dm-hero-video { min-width: 0; }

/* ---------- the poster / player ---------- */

.dm-play {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow-2);
  cursor: pointer;
}
.dm-play-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-play-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 11, 45,.16) 0%, rgba(20, 11, 45,.1) 45%, rgba(20, 11, 45,.66) 100%);
  transition: background .25s ease;
}
.dm-play:hover .dm-play-veil {
  background: linear-gradient(180deg, rgba(20, 11, 45,.3) 0%, rgba(20, 11, 45,.24) 45%, rgba(20, 11, 45,.74) 100%);
}
.dm-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-strong);
  color: #fff;
  box-shadow: 0 12px 34px rgba(20, 11, 45,.45);
  transition: transform .22s cubic-bezier(.32,.72,.28,1), box-shadow .22s ease;
}
.dm-play-btn svg { width: 32px; height: 32px; margin-left: 3px; }
.dm-play:hover .dm-play-btn {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 18px 44px rgba(124, 58, 237,.5);
}

.dm-play-meta {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  color: #fff;
  text-align: left;
}
.dm-play-meta b { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; }
.dm-play-meta span {
  flex-shrink: 0;
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

.dm-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--navy);
  box-shadow: var(--shadow-2);
}

/* ---------- the video wall ---------- */

.dm-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.dm-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.dm-card:hover {
  border-color: rgba(124, 58, 237,.3);
  box-shadow: var(--shadow-1);
  transform: translateY(-3px);
}
.dm-play-sm { border-radius: 0; box-shadow: none; }
.dm-play-sm .dm-play-btn { width: 52px; height: 52px; }
.dm-play-sm .dm-play-btn svg { width: 22px; height: 22px; }
.dm-card .dm-frame { border-radius: 0; box-shadow: none; }

.dm-dur {
  position: absolute;
  right: 12px;
  bottom: 11px;
  padding: 4px 9px;
  border-radius: 99px;
  background: rgba(20, 11, 45,.74);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dm-card-body { padding: 20px 22px 22px; }
.dm-card-body h3 { margin-bottom: 7px; }
.dm-card-body p { color: var(--ink-2); font-size: .92rem; line-height: 1.6; }

/* ---------- feature rows ---------- */

.dm-rows { display: flex; flex-direction: column; gap: 68px; }

.dm-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: center;
}
.dm-row-flip .dm-row-copy { order: 2; }

.dm-row-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  border-radius: 99px;
  background: var(--brand-ghost);
  color: var(--brand-deep);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.dm-row-copy h3 {
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.dm-row-copy > p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.65; }

.dm-row-list { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.dm-row-list li {
  position: relative;
  padding-left: 26px;
  font-size: .94rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.dm-row-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D28D9' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- the little product mocks beside each row ---------- */

.dm-mock {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 20px;
}
.dm-mock-h {
  font-size: .84rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}
.dm-mock-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: .86rem;
}
.dm-mock-row span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dm-mock-row b { font-weight: 600; color: var(--ink); }
.dm-mock-row small { font-size: .74rem; color: var(--ink-3); }
.dm-mock-row em { font-style: normal; font-weight: 700; color: var(--ink); }
.dm-mock-row .cm-thumb { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; }
.dm-mock-row.is-add b { color: var(--green-deep); }

.dm-mock-cta {
  margin-top: 14px;
  padding: 11px;
  border-radius: 11px;
  background: var(--grad-strong);
  color: #fff;
  text-align: center;
  font-size: .88rem;
  font-weight: 700;
}
.dm-mock-cta-soft {
  background: var(--brand-ghost);
  color: var(--brand-deep);
}

.dm-bar { height: 8px; border-radius: 99px; background: #EFEAFB; overflow: hidden; }
.dm-bar i { display: block; height: 100%; border-radius: 99px; background: var(--reward-grad); }
.dm-bar-tiers {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 6px;
  font-size: .72rem;
  color: var(--ink-3);
}

.dm-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  color: var(--ink-2);
}
.dm-stat b {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- steps ---------- */

.dm-steps {
  --dm-step-gap: 30px;
  --dm-step-size: 42px;
  list-style: none;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--dm-step-gap);
}

/* Runs behind the circles, from the centre of the first to the centre of
   the last. The old 12%/88% span was guesswork: it began past circle one
   and carried on into empty space to the right of circle three.

   Each circle sits at the left of its column, so its centre is half a
   circle in. With three equal columns and two gaps, column three starts
   at 66.667% + 2/3 of a gap, which is where the right offset below comes
   from. Purely decorative: the numbers say the same thing without it. */
.dm-steps-line {
  position: absolute;
  top: calc(var(--dm-step-size) / 2 - 1px);
  left: calc(var(--dm-step-size) / 2);
  right: calc(33.3333% - (var(--dm-step-gap) * 2 / 3) - (var(--dm-step-size) / 2));
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.dm-steps-line i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--grad-strong);
  transform: scaleX(0);
  transform-origin: left center;
}
.dm-step { position: relative; z-index: 1; }
.dm-step-n {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--dm-step-size);
  height: var(--dm-step-size);
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--grad-strong);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  /* Punches a clean gap in the connector either side of each circle. */
  box-shadow: 0 0 0 7px var(--paper);
}
.dm-step h3 { margin-bottom: 7px; }
.dm-step p { color: var(--ink-2); font-size: .95rem; line-height: 1.6; }

/* ---------- the lead form, shared by all three pages ---------- */

.dm-form-sec { padding-bottom: 90px; }

.dm-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 56px;
  align-items: start;
}
.dm-form-copy h2 { margin-bottom: 14px; }
.dm-form-sub { color: var(--ink-2); font-size: 1.02rem; line-height: 1.65; max-width: 48ch; }
.dm-form-points { margin-top: 22px; display: flex; flex-direction: column; gap: 11px; }
.dm-form-points li {
  position: relative;
  padding-left: 26px;
  font-size: .95rem;
  color: var(--ink-2);
}
.dm-form-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(34,197,94,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}

.dm-form-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 30px 28px;
}

/* Never seen by a person, and never announced: display:none would be
   skipped by some bots that check for it, so it is moved instead. */
.dm-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dm-field { margin-bottom: 16px; }
.dm-field label {
  display: block;
  margin-bottom: 6px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
}
.dm-field label span {
  font-weight: 500;
  color: var(--ink-3);
  font-size: .78rem;
}
.dm-field input,
.dm-field select,
.dm-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.dm-field textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.dm-field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B819C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px;
  padding-right: 38px;
}
.dm-field input::placeholder,
.dm-field textarea::placeholder { color: var(--ink-3); }
.dm-field input:focus,
.dm-field select:focus,
.dm-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(124, 58, 237,.14);
}

.dm-form-send, .ty-send { width: 100%; margin-top: 6px; }
.dm-form-fine, .ty-fine {
  margin-top: 12px;
  text-align: center;
  font-size: .78rem;
  color: var(--ink-3);
}

.dm-form-errs {
  margin-bottom: 18px;
  padding: 13px 15px;
  border-radius: 11px;
  background: #FDECEC;
  border: 1px solid #F5C7C7;
}
.dm-form-errs p { font-size: .88rem; color: #A02B2B; line-height: 1.5; }
.dm-form-errs p + p { margin-top: 5px; }

.dm-form-done, .ty-done { text-align: center; padding: 8px 0; }
.dm-form-tick, .ty-tick {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(34,197,94,.14);
  color: var(--green-deep);
}
.dm-form-tick svg, .ty-tick svg { width: 26px; height: 26px; }
.dm-form-done h3, .ty-done h2 { margin-bottom: 10px; }
.dm-form-done p, .ty-done p {
  color: var(--ink-2);
  font-size: .96rem;
  line-height: 1.6;
  margin-bottom: 22px;
}

/* ---------- /cart-review: one screen, one form ---------- */

/* Centres the pair in the viewport on a tall screen without letting a
   short one clip the form, which min-height alone would do. */
.ty-wrap {
  position: relative;
  overflow: hidden;
  background: var(--paper-soft);
  padding: calc(var(--nav-h) + 56px) 0 72px;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.ty-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 60px;
  align-items: center;
  width: 100%;
}

.ty-copy h1 {
  font-size: clamp(2.1rem, 3.9vw, 3rem);
  margin-top: 6px;
}
.ty-sub {
  margin-top: 20px;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 46ch;
}
.ty-points { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.ty-points li {
  position: relative;
  padding-left: 28px;
  font-size: .98rem;
  color: var(--ink-2);
}
.ty-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(34,197,94,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}

.ty-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 32px 30px;
}
.ty-panel-h {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

/* The short page has no sticky bar to make room for. */
body.lp-solo { padding-bottom: 0; }
body.lp-solo .lp-sticky { display: none; }

/* The whole page is one form, and the Ask Brix AI launcher is fixed to the
   same corner as its fields: on a phone it sits on top of the email input.
   A page with a single action should not ship a second one anyway. */
body.lp-solo .bx-launcher { display: none; }

/* ---------- narrower screens ---------- */

@media (max-width: 1000px) {
  .dm-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .dm-wall { grid-template-columns: repeat(2, 1fr); }
  .dm-row, .dm-row-flip { grid-template-columns: 1fr; gap: 30px; }
  /* Artwork under its copy on every row, flipped or not, so the reading
     order stops depending on which way the desktop layout ran. */
  .dm-row-flip .dm-row-copy { order: 0; }
  .dm-form-grid { grid-template-columns: 1fr; gap: 36px; }
  .ty-grid { grid-template-columns: 1fr; gap: 38px; }
  .ty-wrap { min-height: 0; display: block; padding-top: calc(var(--nav-h) + 40px); }
}

@media (max-width: 680px) {
  .dm-wall { grid-template-columns: 1fr; }
  .dm-steps { grid-template-columns: 1fr; gap: 26px; }
  .dm-steps-line { display: none; }
  .dm-hero-copy .hero-ctas .btn { width: 100%; }
  .dm-play-btn { width: 58px; height: 58px; }
  .dm-play-btn svg { width: 25px; height: 25px; }
  .dm-play-meta b { font-size: .92rem; }
  .dm-form-panel, .ty-panel { padding: 24px 20px; }
  .dm-form-sec { padding-bottom: 64px; }
}