/* ===== Tokens ===== */
:root{
  /* Neutrals */
  --ink:#141413;
  --ink-2:#2a2926;
  --ink-rgb:20,20,19;
  --paper:#ffffff;
  --paper-rgb:255,255,255;
  --cream:#FAF9F5;
  --cream-2:#F4F1E8;

  /* Brand hue: tan (primary) */
  --tan:#CF9358;
  --tan-soft:#F4E7D5;
  --tan-tint:#FAF1DE;
  --tan-deep:#A77043;
  --tan-rgb:207,147,88;
  --tan-deep-rgb:167,112,67;

  /* Accent: sage */
  --sage:#8FAE85;
  --sage-soft:#DCE6D6;
  --sage-tint:#EBF1E5;
  --sage-deep:#4F6E47;
  --sage-deeper:#3A5034;
  --sage-rgb:143,174,133;
  --sage-deep-rgb:79,110,71;

  /* Accent: peach */
  --peach:#E6A98A;
  --peach-soft:#F4DDCC;
  --peach-tint:#FAEAD9;
  --peach-deep:#A05A33;
  --peach-deeper:#7A4225;
  --peach-rgb:230,169,138;
  --peach-deep-rgb:160,90,51;

  /* Accent: lilac */
  --lilac:#9A86C7;
  --lilac-soft:#E2DAEF;
  --lilac-tint:#EFE8FA;
  --lilac-deep:#5840A4;
  --lilac-deeper:#3F2F7A;
  --lilac-rgb:154,134,199;
  --lilac-deep-rgb:88,64,164;

  /* Misc */
  --brick:#8A3A34;
  --line:rgba(var(--ink-rgb),0.10);
  --shadow-card:0 1px 0 rgba(var(--ink-rgb),.04), 0 30px 60px -30px rgba(var(--ink-rgb),.18);
  --radius-card:28px;
  --radius-pill:999px;
  --sans:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif:var(--sans); /* one family — accent is color only */
  --maxw:1280px;
  --pad:clamp(16px,3vw,40px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
em{font-style:normal;font-family:inherit;font-weight:inherit;color:var(--tan)}

/* ===== Topbar (forhims-style sliver above nav) ===== */
.topbar{
  background:var(--cream-2);
  border-bottom:1px solid var(--line);
  font-size:13px;
  letter-spacing:.005em;
}
.topbar-inner{
  max-width:1240px;
  margin:0 auto;
  padding:8px var(--pad);
  display:flex;align-items:center;gap:14px;justify-content:center;
}
.topbar-inner p{margin:0;color:var(--ink-2)}
.topbar-inner strong{font-weight:600;color:var(--ink)}
.topbar-inner .pill{padding:6px 14px;font-size:12px}
.topbar-product{width:34px;height:22px;position:relative;flex-shrink:0}
.mini-box{
  width:34px;height:18px;border-radius:4px;
  background:linear-gradient(135deg,#E8C386 0%,var(--tan) 50%,var(--tan-deep) 100%);
  box-shadow:0 6px 12px -4px rgba(var(--tan-deep-rgb),.5), inset 0 1px 0 rgba(var(--paper-rgb),.4);
  transform:rotateX(20deg) rotateY(-12deg);
  margin-top:2px;
}

/* ===== Pills / buttons ===== */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:var(--radius-pill);
  padding:10px 18px;
  font-weight:500;
  font-size:14px;
  letter-spacing:.01em;
  transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.pill--ink{background:var(--ink);color:var(--paper)}
.pill--ink:hover{background:var(--ink-2);transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(var(--ink-rgb),.6)}
.pill--ghost{border:1px solid var(--line);background:transparent;color:var(--ink)}
.pill--ghost:hover{background:rgba(var(--ink-rgb),.04)}
.pill--sm{
  padding:8px 18px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
}
.pill--icon{
  width:36px;height:36px;padding:0;justify-content:center;border:1px solid var(--line);border-radius:50%;
}
.pill--lg{padding:14px 24px;font-size:15px}

/* ===== Nav (forhims layout: small brand · centered links · pill cluster) ===== */
.nav{
  max-width:none;
  margin:0;
  padding:18px max(var(--pad), calc((100% - 1240px) / 2));
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  position:relative;z-index:100;
}
.brand{
  display:inline-flex;align-items:center;
  color:var(--ink);
}
.brand img{height:18px;width:auto;display:block}
.brand--lg img{height:26px}
.nav-links{
  display:flex;gap:32px;justify-content:center;
  font-size:13px;font-weight:500;letter-spacing:.005em;
}
.nav-links a{color:var(--ink);position:relative;padding:6px 2px}
.nav-links a:hover{color:var(--tan-deep)}
.nav-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}

/* ===== Hamburger (mobile only) ===== */
.nav-burger{
  display:none;
  width:38px;height:38px;
  background:transparent;border:0;padding:0;cursor:pointer;
  position:relative;border-radius:10px;
  transition:background .18s ease;
}
.nav-burger:hover{background:rgba(20,20,19,.05)}
.nav-burger span{
  position:absolute;left:10px;right:10px;
  height:2px;background:var(--ink);border-radius:2px;
  transition:transform .28s cubic-bezier(.4,0,.2,1),
             opacity .2s ease,
             top .28s cubic-bezier(.4,0,.2,1);
}
.nav-burger span:nth-child(1){top:12px}
.nav-burger span:nth-child(2){top:18px}
.nav-burger span:nth-child(3){top:24px}
body.mn-open .nav-burger span:nth-child(1){top:18px;transform:rotate(45deg)}
body.mn-open .nav-burger span:nth-child(2){opacity:0}
body.mn-open .nav-burger span:nth-child(3){top:18px;transform:rotate(-45deg)}

/* ===== Mobile nav off-canvas ===== */
.mobile-nav-overlay{
  position:fixed;inset:0;
  background:rgba(20,20,19,.35);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
  z-index:200;
}
body.mn-open .mobile-nav-overlay{
  opacity:1;visibility:visible;
  transition:opacity .3s ease, visibility 0s;
}
.mobile-nav{
  position:fixed;top:0;right:0;bottom:0;
  width:min(420px, 92vw);
  background:var(--cream);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  z-index:210;
  overflow:hidden;
  box-shadow:-30px 0 60px -30px rgba(20,20,19,.2);
}
body.mn-open .mobile-nav{transform:translateX(0)}
.mobile-nav-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid rgba(20,20,19,.06);
  flex-shrink:0;
}
.mobile-nav-head .brand img{height:18px}
.mobile-nav-close{
  width:38px;height:38px;border-radius:10px;
  background:transparent;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);
  transition:background .18s ease;
}
.mobile-nav-close:hover{background:rgba(20,20,19,.05)}
.mobile-nav-body{
  flex:1;overflow-y:auto;
  padding:18px 14px 14px;
}
.mn-section{padding:8px 0 16px}
.mn-section + .mn-section{border-top:1px solid rgba(20,20,19,.06);padding-top:18px}
.mn-section--plain{border-top:1px solid rgba(20,20,19,.06);padding-top:14px}
.mn-eyebrow{
  margin:0 10px 8px;
  font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--tan-deep);
}
.mn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.mn-list li a{
  display:flex;align-items:center;gap:12px;
  padding:10px 10px;border-radius:12px;
  color:var(--ink);text-decoration:none;
  transition:background .18s ease;
}
.mn-list li a:hover,
.mn-list li a:active{background:var(--tint, rgba(20,20,19,.04))}
.mn-ic{
  width:28px;height:28px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  background:var(--tint, rgba(20,20,19,.04));
  color:var(--ic, var(--ink));
}
.mn-txt{
  display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;
}
.mn-txt strong{
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  color:var(--ink);line-height:1.25;
}
.mn-txt em{
  font-style:normal;
  font-size:11.5px;color:rgba(20,20,19,.5);
  line-height:1.35;
}
.mn-list--plain li a{
  padding:11px 12px;
  font-size:14.5px;font-weight:500;
}

.mobile-nav-foot{
  padding:16px 22px 22px;
  border-top:1px solid rgba(20,20,19,.06);
  display:flex;flex-direction:column;gap:14px;
  flex-shrink:0;
  background:var(--cream);
}
.mobile-nav-foot .mn-cta{
  width:100%;justify-content:center;text-align:center;
  background:var(--ink);color:var(--paper);
  padding:14px 24px;font-size:15px;font-weight:500;
  letter-spacing:.01em;text-transform:none;
  border-radius:var(--radius-pill);
}
.mn-lang{display:flex;gap:6px;flex-wrap:wrap}
.mn-lang-chip{
  background:transparent;border:1px solid rgba(20,20,19,.1);
  border-radius:999px;
  padding:6px 12px;
  font:inherit;font-size:12.5px;font-weight:500;
  color:var(--ink);cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.mn-lang-chip:hover{background:rgba(20,20,19,.04)}
.mn-lang-chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}

body.mn-open{overflow:hidden}

/* Mobile breakpoint: swap to hamburger */
@media (max-width:900px){
  .nav-links{display:none}
  .lang-select{display:none}
  .nav-burger{display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:540px){
  .nav-actions .pill--ghost{display:none}
}

/* ===== Nav dropdown (modern, minimal, spacious) ===== */
.nav-drop{position:relative;display:inline-flex;align-items:center}
.nav-drop-trigger{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--ink);position:relative;padding:6px 2px;
  cursor:pointer;
}
.nav-drop-trigger:hover,
.nav-drop.is-open .nav-drop-trigger{color:var(--tan-deep)}
.nav-drop-chev{transition:transform .25s cubic-bezier(.4,0,.2,1)}
.nav-drop.is-open .nav-drop-chev{transform:rotate(180deg)}
/* invisible hover bridge so cursor can travel from trigger to menu */
.nav-drop::after{
  content:"";position:absolute;
  left:50%;top:100%;width:380px;height:24px;
  transform:translateX(-50%);
  pointer-events:none;
}
.nav-drop.is-open::after{pointer-events:auto}

.nav-drop-menu{
  position:absolute;
  top:calc(100% + 18px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:420px;
  background:#fff;
  border:1px solid rgba(20,20,19,.06);
  border-radius:22px;
  padding:18px 14px 12px;
  box-shadow:
    0 1px 2px rgba(20,20,19,.04),
    0 18px 40px -16px rgba(20,20,19,.14),
    0 40px 80px -30px rgba(20,20,19,.14);
  opacity:0;visibility:hidden;
  transition:
    opacity .22s cubic-bezier(.4,0,.2,1),
    transform .26s cubic-bezier(.4,0,.2,1),
    visibility 0s linear .26s;
  z-index:60;
  display:grid;gap:1px;
}
.nav-drop-menu--wide{
  min-width:680px;
  grid-template-columns:1fr 1fr;
  gap:1px 6px;
}
.nav-drop-menu--mega{
  min-width:1020px;
  padding:18px;
  grid-template-columns:1fr 240px;
  gap:0 16px;
}
.nav-drop-menu--mega .nav-drop-main{display:flex;flex-direction:column;min-width:0}
.nav-drop-menu--mega .nav-drop-head{
  grid-column:auto;
  padding:4px 10px 14px;
  margin-bottom:6px;
}
.nav-drop-menu--mega .nav-drop-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1px 4px;
}
.nav-drop-menu--mega-narrow{
  min-width:680px;
  grid-template-columns:1fr 240px;
}
.nav-drop-menu--mega-narrow .nav-drop-grid{grid-template-columns:1fr 1fr}
.nav-drop-grid--single{grid-template-columns:1fr 1fr !important}

/* Feature panel on right side of mega-menu */
.nav-drop-feature{
  position:relative;
  display:flex;flex-direction:column;
  padding:18px 18px 16px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(20,20,19,.15) 0%, rgba(20,20,19,.5) 60%, rgba(20,20,19,.85) 100%),
    url('assets/feature-portrait.webp') center 25% / cover no-repeat;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
}
.nav-drop-feature .feature-eyebrow{
  color:#fff;opacity:.9;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
}
.nav-drop-feature .feature-title{
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.5);
}
.nav-drop-feature .feature-title em{
  color:#fff;font-style:normal;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.55);
}
.nav-drop-feature .feature-sub{
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
/* hide the chart on top of the photo, keep it cleaner */
.nav-drop-feature .feature-chart{display:none}
.nav-drop-feature .feature-cta{
  background:#fff;color:var(--ink);
  margin-top:auto;
}
.nav-drop-feature .feature-cta:hover{background:#fff;color:#000;box-shadow:0 6px 18px -8px rgba(0,0,0,.4)}
/* Industries variant: plain sage tint, no portrait */
.nav-drop-feature--sage{
  background:var(--sage-tint);
  color:var(--ink);
}
.nav-drop-feature--sage .feature-eyebrow{
  color:var(--sage-deep);text-shadow:none;opacity:1;
}
.nav-drop-feature--sage .feature-title{color:var(--ink);text-shadow:none}
.nav-drop-feature--sage .feature-title em{
  color:var(--sage-deep);
  text-decoration:none;
}
.nav-drop-feature--sage .feature-sub{color:rgba(20,20,19,.62);text-shadow:none}
.nav-drop-feature--sage .feature-chart{display:block}
.nav-drop-feature--sage .feature-cta{background:var(--ink);color:#fff}
.nav-drop-feature--sage .feature-cta:hover{background:#000;color:#fff;box-shadow:none}
.feature-eyebrow{
  margin:0 0 6px;
  font-size:10.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--tan-deep);
}
.feature-title{
  margin:0 0 6px;
  font-family:var(--sans);
  font-size:17px;font-weight:500;
  letter-spacing:-.018em;line-height:1.2;
  color:var(--ink);
}
.feature-title em{font-style:normal;color:var(--tan-deep)}
.feature-sub{
  margin:0 0 14px;
  font-size:12px;line-height:1.4;
  color:rgba(20,20,19,.62);
}
.feature-chart{
  display:block;width:100%;height:88px;
  margin-bottom:14px;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.4));
}
.nav-drop-feature .feature-cta{
  display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-start;
  padding:9px 16px;border-radius:999px;
  background:var(--ink);color:#fff;
  font-size:12.5px;font-weight:600;letter-spacing:.005em;
  text-decoration:none;
  transition:transform .18s ease, background .18s ease;
}
.nav-drop-feature .feature-cta:hover{transform:translateY(-1px);background:#000}

/* Dropdown header */
.nav-drop-head{
  grid-column:1 / -1;
  padding:4px 10px 14px;
  margin-bottom:6px;
  border-bottom:1px solid rgba(20,20,19,.05);
}
.nav-drop-eyebrow{
  margin:0 0 6px;
  font-size:10.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--tan-deep);
}
.nav-drop-title{
  margin:0;
  font-family:var(--sans);
  font-size:18px;font-weight:500;
  letter-spacing:-.02em;line-height:1.2;
  color:var(--ink);
}
.nav-drop-title em{font-style:normal;color:var(--tan-deep)}
.nav-drop.is-open .nav-drop-menu{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);
  transition:
    opacity .22s cubic-bezier(.4,0,.2,1),
    transform .26s cubic-bezier(.4,0,.2,1),
    visibility 0s;
}

.nav-drop-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 6px;border-radius:0;
  color:var(--ink);text-decoration:none;
  position:relative;
}
.nav-drop-item:hover{background:transparent;color:var(--ink)}
.nav-drop-ic{
  width:30px;height:30px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  background:var(--tint, rgba(20,20,19,.04));
  color:var(--ic, var(--ink));
  font-size:15px;line-height:1;
}
.nav-drop-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.nav-drop-text strong{
  font-weight:600;font-size:13.5px;letter-spacing:-.005em;
  color:var(--ink);line-height:1.3;
}
.nav-drop-text span{
  font-size:12px;color:rgba(20,20,19,.5);
  line-height:1.4;font-weight:400;
}
.nav-drop-arrow{
  flex-shrink:0;
  color:rgba(20,20,19,.35);
  opacity:0;transform:translateX(-4px);
  transition:opacity .18s ease, transform .2s cubic-bezier(.4,0,.2,1), color .2s ease;
}
.nav-drop-item:hover .nav-drop-arrow{
  opacity:1;transform:translateX(0);
  color:var(--ic, var(--ink));
}

/* ===== Language selector ===== */
.lang-select{position:relative;font-family:var(--sans)}
.lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 10px;
  background:transparent;border:1px solid rgba(20,20,19,.1);border-radius:999px;
  color:var(--ink);font:inherit;font-size:13px;font-weight:500;
  cursor:pointer;line-height:1;
  transition:background .18s ease,border-color .18s ease;
}
.lang-btn:hover{background:rgba(20,20,19,.04);border-color:rgba(20,20,19,.18)}
.lang-flag{font-size:14px;line-height:1}
.lang-label{letter-spacing:.04em}
.lang-menu{
  position:absolute;top:calc(100% + 6px);right:0;
  list-style:none;margin:0;padding:6px;
  background:#fff;border:1px solid rgba(20,20,19,.08);border-radius:12px;
  box-shadow:0 10px 30px -8px rgba(20,20,19,.18),0 4px 12px -4px rgba(20,20,19,.08);
  min-width:160px;z-index:50;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;
}
.lang-select.is-open .lang-menu{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .15s ease,transform .15s ease,visibility 0s;
}
.lang-menu li{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;
  font-size:13px;color:var(--ink);
  cursor:pointer;
}
.lang-menu li:hover{background:rgba(20,20,19,.05)}
.lang-menu li.is-active{background:rgba(20,20,19,.05);font-weight:600}

/* ===== Hero ===== */
.hero{
  position:relative;
  padding:clamp(28px,3.5vw,56px) max(var(--pad), calc((100% - 1240px) / 2)) clamp(36px,4.5vw,72px);
  max-width:none;
  margin:0;
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:flex-start;
  position:relative;
}
.hero-headline{display:flex;flex-direction:column;gap:32px}
.hero-headline h1{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(34px,3.4vw,64px);
  line-height:1.08;
  letter-spacing:-.04em;
  margin:0;
  color:var(--ink);
  max-width:20ch;
}
.hero-headline h1 em{
  color:var(--tan);
  font-style:normal;
  font-weight:inherit;
}
.hero-headline .cta{align-self:flex-start;margin-top:0}
.hero-aside{
  padding-top:6px;
  max-width:340px;
  justify-self:end;
  display:flex;flex-direction:column;gap:14px;
  align-items:flex-start;
}
.hero-aside p{
  font-size:clamp(16px,1.15vw,20px);
  color:var(--ink-2);
  line-height:1.45;
  margin:0;
}
.hero-aside .cta{margin-top:8px}
.preheader{
  margin:0 0 18px;
  font-size:13px;
  color:var(--ink-2);
  letter-spacing:.005em;
  font-weight:400;
}
.hero-meta{display:inline-flex;gap:10px;align-items:center;color:var(--ink-2);font-size:13px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.dot--live{
  background:#3ABE6E;
  box-shadow:0 0 0 4px rgba(58,190,110,.18);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(58,190,110,.18)}50%{box-shadow:0 0 0 10px rgba(58,190,110,0)}}

.cta{margin-top:8px}

/* (forhims-style: no hero orb — calm whitespace only) */

/* ===== Agenda strip (sets the journey before the 4 cards) ===== */
.journey{
  padding:0 var(--pad) clamp(36px,4.5vw,64px);
  margin-top:clamp(-72px,-6vw,-32px);
}
.journey-inner{
  max-width:1240px;
  margin:0 auto;
  text-align:left;
}
.journey-eyebrow{
  margin:0 0 16px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-weight:500;
}
.journey-lede{
  margin:0;
  max-width:62ch;
  font-size:clamp(16px,1.15vw,20px);
  line-height:1.45;
  color:var(--ink);
  font-weight:400;
}
.journey-lede em{color:var(--tan);font-style:normal;font-weight:inherit}

/* ===== Social-proof bridge pill (sits on the cream→tan section boundary) ===== */
.proof-bridge{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:flex-start;
  padding:0 max(var(--pad), calc((100% - 1240px) / 2));
  margin-top:-26px;      /* pulls into journey section */
  margin-bottom:-26px;   /* lets next section's top edge come up under the pill */
  pointer-events:none;
}
.proof-bridge-pill{
  pointer-events:auto;
  display:inline-flex;align-items:center;gap:14px;
  padding:12px 22px 12px 14px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  color:var(--ink);
  font-size:15px;
  letter-spacing:-.005em;
  box-shadow:
    0 1px 0 rgba(var(--ink-rgb),.02),
    0 14px 28px -14px rgba(var(--ink-rgb),.14),
    0 28px 56px -28px rgba(var(--ink-rgb),.18);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.proof-bridge-pill:hover{
  transform:translateY(-2px);
  background:var(--paper);
  box-shadow:
    0 1px 0 rgba(var(--ink-rgb),.02),
    0 22px 40px -16px rgba(var(--ink-rgb),.18),
    0 38px 64px -28px rgba(var(--ink-rgb),.22);
}
.proof-bridge-avatars{display:inline-flex;align-items:center}
.proof-bridge-avatars > img{
  width:28px;height:28px;border-radius:50%;
  border:2px solid var(--paper);
  margin-left:-9px;
  background:var(--paper);
  object-fit:cover;
  box-shadow:0 1px 2px rgba(var(--ink-rgb),.08);
  display:block;
}
.proof-bridge-avatars > img:first-child{margin-left:0}
.proof-bridge-text{font-weight:500}
.proof-bridge-text strong{font-weight:700}
.proof-bridge-sep{
  width:1px;height:18px;
  background:var(--line);
  flex-shrink:0;
}
.proof-bridge-rating{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;
  letter-spacing:-.005em;
  color:var(--ink-2);
  flex-shrink:0;
}
.proof-bridge-stars{
  color:var(--tan);
  font-size:12px;
  letter-spacing:1px;
  line-height:1;
}
.proof-bridge-score{color:var(--ink-2);font-weight:500}
.proof-bridge-score strong{color:var(--ink);font-weight:700}
.proof-bridge-arrow{
  font-size:15px;
  color:var(--tan-deep);
  transition:transform .25s ease;
}
.proof-bridge-pill:hover .proof-bridge-arrow{transform:translateX(4px)}
.journey-stages{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.4vw,40px);
}
.stage{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.stage-head{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:10px;
}
.stage + .stage .stage-head::before{
  content:"";
  position:absolute;
  right:100%;
  top:50%;
  width:clamp(20px,2.4vw,40px);
  height:1px;
  background:var(--line);
  transform:translateY(-50%);
}
.stage-num{
  font-size:12px;
  letter-spacing:.06em;
  color:var(--tan);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.stage-label{
  font-size:clamp(17px,1.4vw,22px);
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--ink);
  line-height:1.1;
}
.stage-sub{
  font-size:13px;
  color:var(--ink-2);
  line-height:1.35;
}
@media (max-width:760px){
  .journey-stages{
    grid-template-columns:1fr 1fr;
    gap:24px 20px;
  }
  .stage:nth-child(3) .stage-head::before{display:none}
}

/* ===== Cards (forhims 1:1) ===== */
.cards{padding:0 var(--pad) clamp(60px,8vw,120px)}
.cards-grid{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.card{
  position:relative;
  display:flex;flex-direction:column;
  border-radius:20px;
  padding:22px 24px;
  min-height:300px;
  overflow:hidden;
  color:var(--ink);
  text-decoration:none;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),
             box-shadow .55s cubic-bezier(.2,.7,.2,1);
  isolation:isolate;
}
.card::before{
  /* clean top-edge sheen — soft, single-direction */
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:55%;
  background:linear-gradient(180deg, rgba(var(--paper-rgb),.55) 0%, rgba(var(--paper-rgb),0) 100%);
  opacity:0;
  transition:opacity .55s ease;
  z-index:0;pointer-events:none;
  border-radius:20px 20px 0 0;
}
.card > *{position:relative;z-index:1}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px -20px rgba(var(--ink-rgb),.18);
}
.card:hover::before{opacity:1}
.card:hover .mockup{
  transform:translate(-50%,-58%) rotateX(20deg) rotateY(-12deg);
  animation-play-state:paused;
}
.card:hover .card-arrow{transform:translateX(6px)}
.card:hover .card-stat{opacity:1}
.card header{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
}
.card h3{
  margin:0;
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(20px,1.45vw,26px);
  letter-spacing:-.03em;
  line-height:1.05;
  max-width:9ch;
}
.card h3 em{color:inherit}
.card-arrow{
  width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);
  transition:transform .25s ease;
}
.card:hover .card-arrow{transform:translateX(4px)}

/* universal mockup base — modern outline UI card */
.mockup{
  position:absolute;
  left:50%;top:55%;
  --rx:6deg; --ry:-4deg;
  transform:translate(-50%,-50%) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  animation:bob 7s ease-in-out infinite;
  z-index:1;
  background:var(--paper);
  border:1px solid rgba(var(--ink-rgb),.07);
  border-radius:12px;
  padding:11px;
  width:148px;
  font-size:9px;
  color:var(--ink);
  letter-spacing:-.005em;
  box-shadow:
    0 18px 30px -12px rgba(var(--ink-rgb),.2),
    0 4px 10px -4px rgba(var(--ink-rgb),.1);
}
.card:nth-child(2) .mockup{animation-delay:-1.7s}
.card:nth-child(3) .mockup{animation-delay:-3.4s}
.card:nth-child(4) .mockup{animation-delay:-5.1s}
.mockup::after{
  content:"";position:absolute;
  left:-8%;right:-8%;bottom:-18px;
  height:16px;
  background:radial-gradient(ellipse at center, rgba(var(--ink-rgb),.28) 0%, rgba(var(--ink-rgb),0) 70%);
  filter:blur(3px);
  transform:rotateX(calc(var(--rx) * -1)) rotateY(calc(var(--ry) * -1));
  z-index:-1;
}

/* per-card poses — each has its own personality */
.card--tan .mockup{
  --rx:6deg; --ry:-5deg;
  top:53%; left:48%;
}
.card--sage .mockup{
  --rx:8deg; --ry:4deg;
  top:54%; left:52%;
}
.card--peach .mockup{
  --rx:4deg; --ry:-6deg;
  top:55%; left:50%;
  width:158px;
}
.card--lilac .mockup{
  --rx:9deg; --ry:3deg;
  top:52%; left:51%;
}

/* 1) AI Search */
.mockup--search{display:flex;flex-direction:column;gap:8px}
.ms-bar{
  display:flex;align-items:center;gap:6px;
  padding:6px 9px;
  border:1px solid rgba(var(--ink-rgb),.1);
  border-radius:7px;
  color:rgba(var(--ink-rgb),.45);
}
.ms-bar > span:nth-of-type(1){flex:1;font-weight:400}
.ms-spark{color:var(--tan-deep);font-size:10px;flex-shrink:0}
.ms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.ms-item{
  aspect-ratio:1;
  border:1px solid rgba(var(--ink-rgb),.06);
  border-radius:5px;
}
.ms-item:nth-child(1){background:linear-gradient(135deg,#F4DAB5,#D5A26B)}
.ms-item:nth-child(2){background:linear-gradient(135deg,#E6C3A5,#C99670)}
.ms-item:nth-child(3){background:linear-gradient(135deg,#F1E0C9,#D9BE9B)}

/* 2) Cross-sell popup */
.mockup--basket{display:flex;flex-direction:column;gap:8px}
.mb-label{
  font-size:7.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(var(--ink-rgb),.5);
}
.mb-row{
  display:flex;align-items:center;gap:7px;
  padding:6px;
  border:1px solid rgba(var(--ink-rgb),.08);
  border-radius:7px;
}
.mb-thumb{
  width:22px;height:22px;border-radius:5px;flex-shrink:0;
  background:linear-gradient(135deg,var(--sage-soft),var(--sage));
  border:1px solid rgba(50,90,40,.15);
}
.mb-name{flex:1;font-weight:500;font-size:9px}
.mb-price{font-weight:600;color:var(--sage-deep);font-size:9px}
.mb-btn{
  background:#2F4A29;color:var(--paper);
  text-align:center;padding:6px;border-radius:6px;
  font-size:9px;font-weight:500;
}

/* 3) Multi-channel inbox */
.mockup--inbox{display:flex;gap:8px;padding:9px;width:186px}
.mi-rail{
  display:flex;flex-direction:column;gap:6px;
  padding-right:8px;border-right:1px solid rgba(var(--ink-rgb),.08);
}
.mi-ch{
  width:16px;height:16px;border-radius:50%;position:relative;
  box-shadow:inset 0 0 0 0.5px rgba(var(--ink-rgb),.08);
}
.mi-ch--wa{background:linear-gradient(135deg,#25D366,#128C7E)}
.mi-ch--ig{background:linear-gradient(135deg,#F58529,#DD2A7B 50%,#8134AF)}
.mi-ch--mail{background:#EA4335}
.mi-ch--msg{background:#0084FF}
.mi-ch--wa::after{
  content:"";position:absolute;
  right:-2px;top:-2px;width:6px;height:6px;
  border-radius:50%;background:#E55C44;
  box-shadow:0 0 0 1.5px var(--paper);
}
.mi-thread{display:flex;flex-direction:column;gap:5px;flex:1;justify-content:center}
.mi-bub{height:11px;border-radius:5px}
.mi-bub--in{
  width:85%;
  background:rgba(var(--ink-rgb),.06);
  align-self:flex-start;
  border-bottom-left-radius:2px;
}
.mi-bub--out{
  width:65%;
  background:var(--ink);
  align-self:flex-end;
  border-bottom-right-radius:2px;
}

/* 4) Newsletter */
.mockup--loyalty{display:flex;flex-direction:column;gap:6px;width:160px}
.mn-header{
  font-size:7px;letter-spacing:.18em;font-weight:700;
  color:rgba(var(--ink-rgb),.6);text-align:center;
  padding-bottom:6px;border-bottom:1px solid rgba(var(--ink-rgb),.08);
}
.mn-hero{
  width:100%;aspect-ratio:16/9;border-radius:5px;
  background:linear-gradient(135deg,var(--lilac-soft) 0%,var(--lilac) 100%);
  position:relative;overflow:hidden;
}
.mn-hero::after{
  content:"";position:absolute;
  right:-20%;bottom:-30%;width:90%;height:90%;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--paper),rgba(var(--paper-rgb),0) 50%);
  opacity:.6;
}
.mn-h1{height:7px;width:70%;background:rgba(var(--ink-rgb),.18);border-radius:2px}
.mn-line{height:4px;width:90%;background:rgba(var(--ink-rgb),.09);border-radius:2px}
.mn-cta{
  background:var(--lilac-deep);color:var(--paper);
  text-align:center;padding:6px;border-radius:4px;
  font-size:8px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  margin-top:2px;
}

/* stat in bottom-right corner */
.card-stat{
  position:absolute;
  bottom:18px;right:22px;
  font-size:13px;font-weight:500;letter-spacing:-.005em;
  color:var(--ink);
  display:inline-flex;align-items:baseline;gap:6px;
  opacity:.78;
}
.card-stat .star{color:var(--tan-deep);font-size:11px;transform:translateY(-1px)}
.card--sage .card-stat .star{color:var(--sage-deep)}
.card--peach .card-stat .star{color:var(--peach-deep)}
.card--lilac .card-stat .star{color:var(--lilac-deep)}

.cards-bottom{
  max-width:1240px;margin:24px auto 0;
  display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cards-footnote{
  margin:0;
  font-size:12px;color:var(--ink-2);
  display:flex;align-items:baseline;gap:6px;
  letter-spacing:.01em;
}
.cards-footnote .star{color:var(--tan-deep);font-size:11px}

/* supported platforms strip (right side) */
.platforms{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.platforms-label{
  font-size:11px;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.12em;font-weight:500;
}
.platform-logo{
  height:18px;width:auto;display:block;
  opacity:.7;
  transition:opacity .25s ease;
}
.platform-logo:hover{opacity:1}

/* ===== Product detail sections ===== */
.psec{
  padding:clamp(80px,11vw,160px) var(--pad);
  scroll-margin-top:80px;
  --accent:var(--tan);
  --accent-deep:var(--tan-deep);
}
.psec--tan{background:var(--tan-tint);--accent:var(--tan);--accent-deep:var(--tan-deep)}
.psec--sage{background:var(--sage-tint);--accent:var(--sage-deep);--accent-deep:var(--sage-deeper)}
.psec--peach{background:var(--peach-tint);--accent:var(--peach-deep);--accent-deep:var(--peach-deeper)}
.psec--lilac{background:var(--lilac-tint);--accent:var(--lilac-deep);--accent-deep:var(--lilac-deeper)}

.psec-inner{
  max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);
  align-items:center;
}
.psec--flip .psec-inner{direction:rtl}
.psec--flip .psec-inner > *{direction:ltr}

.psec-copy .overline{margin:0 0 18px;color:var(--accent-deep)}

.psec-title{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(40px,4.4vw,76px);
  line-height:1.05;letter-spacing:-.045em;
  margin:0 0 24px;
  max-width:14ch;
}
.psec-title em{font-style:normal;color:var(--accent)}

.psec-lede{
  font-size:clamp(17px,1.25vw,20px);color:var(--ink-2);
  line-height:1.55;margin:0 0 30px;max-width:46ch;
}
.psec-lede em{color:var(--accent)}

.psec-features{
  list-style:none;padding:0;margin:0 0 36px;
  display:flex;flex-direction:column;gap:12px;
}
.psec-features li{
  font-size:16px;padding-left:24px;position:relative;color:var(--ink);
}
.psec-features li::before{
  content:"";
  position:absolute;left:0;top:8px;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
}

/* === Reusable per-section highlight stat === */
.psec-highlight{
  display:flex;align-items:center;gap:16px;
  margin:6px 0 28px;
  padding:14px 18px;
  background:rgba(var(--paper-rgb),.6);
  border:1px solid color-mix(in srgb, var(--accent) 20%, rgba(var(--ink-rgb),.08));
  border-left:2px solid var(--accent);
  border-radius:8px;
  max-width:440px;
}
.psec-highlight-num{
  font-family:var(--sans);
  font-size:34px;
  font-weight:600;
  letter-spacing:-.035em;
  line-height:.95;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.psec-highlight-num small{font-size:.55em;font-weight:500;letter-spacing:-.01em;margin-left:1px}
.psec-highlight-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.psec-highlight-label{
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-deep);
}
.psec-highlight-body{
  font-size:13px;color:var(--ink);
  line-height:1.4;
}

.psec-art{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:340px;perspective:1200px;
}
.mockup--big{
  position:relative;left:auto;top:auto;
  transform:rotateX(10deg) rotateY(-6deg) scale(2.2);
  animation:none;
}
.psec--flip .mockup--big{transform:rotateX(10deg) rotateY(6deg) scale(2.2)}
.mockup--big::after{height:30px;bottom:-30px;left:-12%;right:-12%}

/* === product detail sections: responsive collapse === */
@media (max-width:900px){
  .psec-inner{grid-template-columns:1fr;gap:40px}
  .psec--flip .psec-inner{direction:ltr}
  .psec-art{min-height:auto;perspective:none}
  .mockup--guide-chat{
    width:100%;max-width:520px;
    transform:none;
    margin:0 auto;
  }
  .mockup--big{transform:rotateX(0) rotateY(0) scale(1.2)}
  .psec--flip .mockup--big{transform:rotateX(0) rotateY(0) scale(1.2)}
}

/* === Guide section: real chat-widget mockup === */
.mockup--guide-chat{
  position:relative;
  left:auto;top:auto;
  transform:none;
  animation:none;
  width:540px;
  max-width:100%;
  padding:0;
  border-radius:14px;
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:width .7s cubic-bezier(.4,.0,.2,1), min-height .7s cubic-bezier(.4,.0,.2,1), border-radius .7s cubic-bezier(.4,.0,.2,1);
  background:var(--paper);
  border:1px solid rgba(var(--ink-rgb),.08);
  box-shadow:
    0 1px 2px rgba(var(--ink-rgb),.04),
    0 12px 24px -10px rgba(var(--ink-rgb),.1),
    0 30px 60px -25px rgba(var(--ink-rgb),.12);
  z-index:5;
}
/* kill the bob ::after shadow inherited from .mockup base */
.mockup--guide-chat::after{display:none}
.mockup--guide-chat .mgc-thread{transition:opacity .35s ease}
.mockup--guide-chat.swapping .mgc-thread{opacity:0}

/* mobile state: iOS-proportioned, no rotation */
.mockup--guide-chat.is-mobile{
  width:290px;
  min-height:580px;
  border-radius:16px;
}

/* popup state: medium card, no header/input, scene 3 only */
.mockup--guide-chat.is-popup{
  width:380px;
  min-height:auto;
  border-radius:14px;
}
.mockup--guide-chat.is-popup .mgc-top,
.mockup--guide-chat.is-popup .mgc-input{display:none}
.mockup--guide-chat.is-popup .mgc-thread{padding:0;background:var(--paper)}
.mockup--guide-chat.is-popup .mgc-scene--shop,
.mockup--guide-chat.is-popup .mgc-scene--fit{display:none !important}
.mockup--guide-chat.is-popup .mgc-scene--shipping{
  display:flex !important;
  align-items:center;justify-content:center;
  padding:34px 28px 28px;
}
.mockup--guide-chat.is-mobile .mgc-top{padding:18px 16px 12px}
.mockup--guide-chat.is-mobile .mgc-thread{flex:1}
.mockup--guide-chat.is-mobile .mgc-input{padding:14px 16px}

/* scenes (only one visible at a time) */
.mgc-scene{display:flex;flex-direction:column;gap:10px}
.mgc-scene--fit{display:none !important}
.mgc-scene--shipping{display:none !important}
.mockup--guide-chat.is-mobile:not(.is-popup) .mgc-scene--shop{display:none !important}
.mockup--guide-chat.is-mobile:not(.is-popup) .mgc-scene--fit{display:flex !important;flex-direction:column;gap:8px}

/* popup card content */
.ms-popup{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  width:100%;text-align:center;
}
.ms-popup-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;
  background:color-mix(in srgb, var(--tan) 18%, var(--paper));
  color:var(--tan-deep);
  border-radius:999px;
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.ms-popup-eyebrow svg{flex-shrink:0}
.ms-popup-title{
  font-size:15px;font-weight:500;line-height:1.3;
  color:var(--ink-2);margin:4px 0 0;
}
.ms-popup-title strong{
  display:block;
  font-size:34px;font-weight:600;letter-spacing:-.025em;line-height:1.05;
  color:var(--ink);margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.ms-popup-body{
  font-size:12px;color:var(--ink-2);line-height:1.45;
  margin:6px 0 4px;max-width:30ch;
}
.ms-popup-cta{
  background:var(--ink);color:var(--paper);
  padding:11px 22px;border-radius:6px;border:0;
  font-size:12px;font-weight:600;letter-spacing:.005em;cursor:pointer;
  width:100%;max-width:220px;
  font-family:inherit;
}
.ms-popup-secondary{
  background:transparent;border:0;
  font-size:11px;color:var(--ink-2);cursor:pointer;
  padding:4px;margin-top:-2px;
  font-family:inherit;
}
.ms-popup-secondary:hover{color:var(--ink)}

/* === Lifecycle (Bring them back): 3-scene mockup ============================
   Signup popup ↔ Campaign builder ↔ WhatsApp message preview
*/
.mockup-stage--back{
  position:relative;
  width:100%;
  max-width:480px;
  aspect-ratio:5/6;
  margin:0 auto;
  perspective:1400px;
}
.bs-scene{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(.96) translateY(8px);
  transition:opacity .35s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
  z-index:1;
}
.bs-scene.is-active{
  opacity:1;
  transform:scale(1) translateY(0);
  pointer-events:auto;
  z-index:2;
}

/* ---- Scene 1: newsletter signup popup ---- */
.bs-popup{
  position:relative;
  width:min(380px,92%);
  background:var(--paper);
  border-radius:22px;
  box-shadow:
    0 1px 0 rgba(var(--ink-rgb),.04),
    0 24px 56px -20px rgba(var(--ink-rgb),.18),
    0 56px 100px -40px rgba(var(--lilac-deep-rgb),.30);
  border:1px solid var(--line);
  overflow:hidden;
}
.bs-popup-x{
  position:absolute;top:12px;right:14px;z-index:2;
  width:22px;height:22px;border-radius:50%;
  background:rgba(var(--ink-rgb),.06);
  color:var(--ink);
  border:0;font-size:16px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-family:inherit;
}
.bs-popup-hero{
  position:relative;
  height:130px;
  background:linear-gradient(135deg,
    var(--lilac-tint) 0%,
    var(--lilac-soft) 45%,
    color-mix(in srgb, var(--lilac) 75%, var(--paper)) 100%);
  overflow:hidden;
}
.bs-popup-hero-orb{
  position:absolute;
  width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--paper), transparent 60%);
  opacity:.55;
  top:-40px;left:-30px;
  filter:blur(2px);
}
.bs-popup-hero-orb--2{
  width:100px;height:100px;
  top:auto;bottom:-30px;right:-20px;left:auto;
  background:radial-gradient(circle at 30% 30%, var(--peach), transparent 60%);
  opacity:.35;
}
.bs-popup-hero-orb--3{
  width:60px;height:60px;
  top:20px;right:40px;left:auto;
  background:radial-gradient(circle at 30% 30%, var(--tan), transparent 60%);
  opacity:.45;
}
.bs-popup-discount{
  position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);
  padding:8px 16px;
  background:var(--lilac-deep);
  color:var(--paper);
  font-size:13px;font-weight:700;letter-spacing:.08em;
  border-radius:8px;
  box-shadow:0 10px 24px -10px rgba(var(--lilac-deep-rgb),.6);
}
.bs-popup-body{
  padding:22px 24px 24px;
  display:flex;flex-direction:column;gap:8px;
}
.bs-popup-eyebrow{
  margin:0;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lilac-deep);font-weight:600;
}
.bs-popup-title{
  margin:0;
  font-family:var(--sans);font-weight:500;
  font-size:22px;line-height:1.2;
  letter-spacing:-.02em;
  color:var(--ink);
}
.bs-popup-title em{font-style:normal;color:var(--lilac-deep)}
.bs-popup-sub{
  margin:0 0 6px;
  font-size:13px;line-height:1.45;
  color:var(--ink-2);
}
.bs-popup-form{
  display:flex;gap:8px;
  margin-top:4px;
}
.bs-popup-form input{
  flex:1;min-width:0;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  font:inherit;font-size:13px;
  color:var(--ink);
  background:var(--paper);
  outline:none;
}
.bs-popup-cta{
  background:var(--ink);color:var(--paper);
  border:0;border-radius:10px;
  padding:11px 16px;
  font:inherit;font-size:13px;font-weight:600;
  letter-spacing:-.005em;cursor:pointer;
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.bs-popup-fine{
  margin:6px 0 0;
  font-size:11px;color:var(--ink-2);
  text-align:center;
}

/* ---- Scene 2: campaign builder ---- */
.bs-builder{
  width:min(440px,96%);
  height:min(440px,92%);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  display:grid;
  grid-template-columns:130px 1fr;
  box-shadow:
    0 1px 0 rgba(var(--ink-rgb),.04),
    0 24px 56px -20px rgba(var(--ink-rgb),.18);
}
.bs-builder-rail{
  background:var(--cream-2);
  border-right:1px solid var(--line);
  padding:16px 12px;
  display:flex;flex-direction:column;gap:8px;
}
.bs-rail-title{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600;
  padding:6px 4px 2px;
}
.bs-rail-ch{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;
  background:transparent;border:1px solid transparent;
  border-radius:8px;
  font:inherit;font-size:12px;font-weight:500;
  color:var(--ink);
  letter-spacing:-.005em;cursor:pointer;
}
.bs-rail-ch svg{color:var(--ink-2);flex-shrink:0}
.bs-rail-ch--active{
  background:var(--paper);
  border-color:var(--line);
  color:var(--lilac-deep);
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.02);
}
.bs-rail-ch--active svg{color:var(--lilac-deep)}
.bs-rail-divider{
  height:1px;background:var(--line);
  margin:8px 4px;
}
.bs-rail-aud{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  font-size:11.5px;font-weight:500;color:var(--ink);
  letter-spacing:-.005em;
}
.bs-rail-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--sage);
  box-shadow:0 0 0 3px rgba(var(--sage-deep-rgb),.18);
  flex-shrink:0;
}
.bs-rail-count{
  font-size:11px;color:var(--ink-2);
  padding:0 10px;
  font-variant-numeric:tabular-nums;
}
.bs-canvas{
  position:relative;
  padding:22px 22px 22px;
  display:flex;flex-direction:column;
  align-items:center;
  gap:0;
  background:
    radial-gradient(circle at 8px 8px, rgba(var(--ink-rgb),.08) 1px, transparent 1.5px) 0 0 / 14px 14px,
    var(--paper);
}
.bs-node{
  position:relative;
  width:100%;max-width:240px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  display:flex;flex-direction:column;gap:2px;
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.02), 0 6px 14px -8px rgba(var(--ink-rgb),.12);
  opacity:0;transform:translateY(8px);
  animation:bsNodeIn .45s cubic-bezier(.2,.7,.2,1) forwards;
}
.bs-scene--builder.is-active .bs-node{animation-play-state:running}
.bs-scene--builder .bs-node:nth-of-type(1){animation-delay:.20s}
.bs-scene--builder .bs-node:nth-of-type(3){animation-delay:.55s}
.bs-scene--builder .bs-node:nth-of-type(5){animation-delay:.90s}
.bs-scene--builder .bs-node:nth-of-type(7){animation-delay:1.25s}
.bs-edge{
  width:2px;height:18px;
  background:linear-gradient(to bottom, transparent, var(--lilac), transparent);
  border-radius:2px;
  opacity:0;
  animation:bsEdgeIn .35s ease forwards;
}
.bs-scene--builder .bs-edge:nth-of-type(2){animation-delay:.45s}
.bs-scene--builder .bs-edge:nth-of-type(4){animation-delay:.80s}
.bs-scene--builder .bs-edge:nth-of-type(6){animation-delay:1.15s}
@keyframes bsNodeIn{
  to{opacity:1;transform:translateY(0)}
}
@keyframes bsEdgeIn{
  to{opacity:1}
}
.bs-node-tag{
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--ink-2);
}
.bs-node--trigger .bs-node-tag{color:var(--tan-deep)}
.bs-node--wait .bs-node-tag{color:var(--ink-2)}
.bs-node--ai .bs-node-tag{color:var(--lilac-deep)}
.bs-node--send .bs-node-tag{color:var(--sage-deep)}
.bs-node-title{
  font-size:13px;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;line-height:1.2;
}
.bs-node-sub{
  font-size:11px;color:var(--ink-2);
  line-height:1.3;
}
.bs-node--ai{
  border-color:color-mix(in srgb, var(--lilac) 35%, var(--line));
  background:linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--lilac-tint) 50%, var(--paper)));
}
.bs-node--send{
  border-color:color-mix(in srgb, var(--sage) 35%, var(--line));
  background:linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--sage-tint) 50%, var(--paper)));
}
.bs-node-typing{
  display:inline-flex;gap:4px;margin-top:4px;
}
.bs-node-typing-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--lilac);
  animation:bsTypeDot 1.2s ease-in-out infinite;
}
.bs-node-typing-dot:nth-child(2){animation-delay:.15s}
.bs-node-typing-dot:nth-child(3){animation-delay:.30s}
@keyframes bsTypeDot{
  0%,80%,100%{opacity:.25;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-2px)}
}
.bs-node-pulse{
  position:absolute;top:10px;right:12px;
  width:7px;height:7px;border-radius:50%;
  background:var(--sage-deep);
  box-shadow:0 0 0 0 rgba(var(--sage-deep-rgb),.45);
  animation:bsPulse 1.6s ease-in-out infinite;
}
@keyframes bsPulse{
  0%{box-shadow:0 0 0 0 rgba(var(--sage-deep-rgb),.5)}
  100%{box-shadow:0 0 0 12px rgba(var(--sage-deep-rgb),0)}
}

/* ---- Scene 3: WhatsApp phone preview ---- */
.bs-phone{
  width:min(290px,86%);
  height:min(560px,98%);
  background:#ECE5DD; /* WhatsApp doodled background base */
  background-image:
    radial-gradient(circle at 20% 20%, rgba(var(--ink-rgb),.04) 0%, transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(var(--ink-rgb),.05) 0%, transparent 35%);
  border-radius:34px;
  border:1px solid rgba(var(--ink-rgb),.18);
  box-shadow:
    0 1px 0 rgba(var(--paper-rgb),.6) inset,
    0 30px 60px -25px rgba(var(--ink-rgb),.30),
    0 60px 100px -40px rgba(var(--lilac-deep-rgb),.28);
  overflow:hidden;
  position:relative;
  display:flex;flex-direction:column;
}
.bs-phone-notch{
  position:absolute;
  top:8px;left:50%;transform:translateX(-50%);
  width:90px;height:22px;
  background:#0f0f0f;
  border-radius:14px;
  z-index:2;
}
.bs-wa-top{
  display:flex;align-items:center;gap:8px;
  padding:34px 14px 10px;
  background:#075E54;
  color:#fff;
  font-size:13px;
  border-bottom:1px solid rgba(var(--ink-rgb),.18);
}
.bs-wa-back{font-size:18px;line-height:1;opacity:.85}
.bs-wa-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#fa5252,#c92a2a);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  color:#fff;flex-shrink:0;
}
.bs-wa-who{display:flex;flex-direction:column;line-height:1.1;flex:1;min-width:0}
.bs-wa-name{font-size:13px;font-weight:600}
.bs-wa-status{font-size:10.5px;opacity:.8}
.bs-wa-icons{display:inline-flex;gap:14px;color:#fff;opacity:.9}
.bs-wa-thread{
  flex:1;
  padding:12px 10px 10px;
  display:flex;flex-direction:column;gap:6px;
  overflow:hidden;
}
.bs-wa-date{
  align-self:center;
  font-size:10.5px;color:var(--ink-2);
  background:rgba(var(--paper-rgb),.7);
  padding:3px 10px;border-radius:6px;
  margin:4px 0 6px;
}
.bs-wa-bubble{
  max-width:82%;
  background:#fff;
  border-radius:8px;
  padding:7px 9px 6px;
  position:relative;
  font-size:12px;line-height:1.4;
  color:#0d0d0d;
  box-shadow:0 1px 0.5px rgba(var(--ink-rgb),.12);
  opacity:0;transform:translateY(6px);
  animation:bsBubbleIn .35s cubic-bezier(.2,.7,.2,1) forwards;
}
.bs-scene--whatsapp.is-active .bs-wa-bubble:nth-of-type(1){animation-delay:.50s}
.bs-scene--whatsapp.is-active .bs-wa-bubble:nth-of-type(2){animation-delay:1.40s}
.bs-scene--whatsapp.is-active .bs-wa-typing{animation-delay:2.10s}
@keyframes bsBubbleIn{
  to{opacity:1;transform:translateY(0)}
}
.bs-wa-bubble--in{align-self:flex-start;background:#fff}
.bs-wa-bubble--in::before{
  content:"";position:absolute;
  left:-6px;top:0;
  width:0;height:0;
  border-right:6px solid #fff;
  border-bottom:6px solid transparent;
}
.bs-wa-bubble p{margin:0;padding-right:36px}
.bs-wa-bubble p strong{font-weight:700;color:var(--lilac-deep)}
.bs-wa-meta{
  position:absolute;
  right:6px;bottom:3px;
  font-size:9px;color:rgba(var(--ink-rgb),.45);
  display:inline-flex;align-items:center;gap:2px;
}
.bs-wa-tick{color:#34B7F1}
.bs-wa-cta{
  display:flex;align-items:center;gap:8px;
  margin-top:6px;
  padding:8px;background:#F6F6F6;
  border-radius:6px;
  text-decoration:none;
  border:1px solid rgba(var(--ink-rgb),.06);
}
.bs-wa-cta-thumb{
  width:34px;height:34px;border-radius:6px;
  background:linear-gradient(135deg,#1f1f1f,#444);
  flex-shrink:0;
  position:relative;
}
.bs-wa-cta-thumb::after{
  content:"";position:absolute;
  inset:30% 18% 22% 22%;
  background:linear-gradient(135deg,#f7c97a 0%,#a06b3c 100%);
  border-radius:2px 6px 6px 2px / 2px 2px 6px 2px;
  transform:rotate(-12deg);
}
.bs-wa-cta-lines{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.2}
.bs-wa-cta-lines strong{font-size:11px;font-weight:600;color:#0d0d0d}
.bs-wa-cta-lines span{font-size:10px;color:rgba(var(--ink-rgb),.55)}
.bs-wa-cta-arrow{color:var(--lilac-deep);font-weight:600;flex-shrink:0}
.bs-wa-typing{
  align-self:flex-start;
  background:#fff;border-radius:8px;
  padding:8px 10px;
  display:inline-flex;gap:4px;
  box-shadow:0 1px 0.5px rgba(var(--ink-rgb),.12);
  opacity:0;
  animation:bsBubbleIn .35s ease forwards;
}
.bs-wa-typing span{
  width:5px;height:5px;border-radius:50%;
  background:rgba(var(--ink-rgb),.3);
  animation:bsTypeDot 1.2s ease-in-out infinite;
}
.bs-wa-typing span:nth-child(2){animation-delay:.15s}
.bs-wa-typing span:nth-child(3){animation-delay:.30s}
.bs-wa-input{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px 10px;
  background:transparent;
}
.bs-wa-input-pill{
  flex:1;
  padding:8px 12px;
  background:#fff;
  border-radius:18px;
  font-size:11.5px;
  color:rgba(var(--ink-rgb),.45);
  box-shadow:0 1px 1px rgba(var(--ink-rgb),.08);
}
.bs-wa-input-mic{
  width:30px;height:30px;border-radius:50%;
  background:#075E54;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;
  color:#fff;
}

/* responsive scale-down for tighter viewports */
@media (max-width:900px){
  .mockup-stage--back{max-width:380px}
  .bs-phone{height:520px}
}
@media (prefers-reduced-motion: reduce){
  .bs-scene{transition:none}
  .bs-node, .bs-edge, .bs-wa-bubble, .bs-wa-typing{animation:none;opacity:1;transform:none}
}

/* === Basket section: infinite masonry scroll of upsell popups === */
.mockup--basket-loop{
  position:relative;left:auto;top:auto;
  transform:none;animation:none;
  width:100%;max-width:460px;
  height:560px;
  background:transparent;
  border:none;
  box-shadow:none;
  overflow:hidden;
  margin:0 auto;
  /* soft fade at top + bottom so cards dissolve in/out */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.mockup--basket-loop::before,
.mockup--basket-loop::after{display:none}

.bl-scroller{
  display:flex;flex-direction:column;
  gap:22px;
  padding:24px 0;
  animation:blScroll 24s linear infinite;
  will-change:transform;
}
@keyframes blScroll{
  from{transform:translateY(0)}
  to{transform:translateY(-50%)}
}
.mockup--basket-loop:hover .bl-scroller{animation-play-state:paused}

.bl-card{
  flex-shrink:0;
  align-self:flex-start;
}
.bl-card .ms-popup{
  background:var(--card-bg, var(--paper));
  border:1px solid var(--card-border, rgba(var(--ink-rgb),.05));
  border-radius:14px;
  padding:14px 16px 14px;
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;
  box-shadow:
    0 1px 2px rgba(var(--ink-rgb),.04),
    0 6px 16px -6px rgba(var(--ink-rgb),.08),
    0 20px 36px -14px rgba(var(--ink-rgb),.14);
}
.bl-card .ms-popup-eyebrow{
  background:var(--card-eyebrow-bg, color-mix(in srgb, var(--accent) 12%, var(--paper)));
  color:var(--card-accent, var(--accent-deep));
  border:1px solid var(--card-eyebrow-border, color-mix(in srgb, var(--accent) 18%, transparent));
  padding:4px 9px;
  font-size:9.5px;
}
.bl-title{
  font-size:14px;font-weight:500;color:var(--ink-2);
  line-height:1.3;letter-spacing:-.01em;
}
.bl-title strong{font-weight:700;color:var(--ink)}
.bl-cta{
  background:var(--card-cta, var(--ink));color:var(--paper);
  padding:7px 12px;border-radius:6px;border:0;
  font-size:11px;font-weight:600;letter-spacing:.005em;cursor:pointer;
  font-family:inherit;
}

/* product imagery inside popups */
.bl-prod{
  width:100%;height:74px;
  background:rgba(var(--paper-rgb),.55);
  border:1px solid rgba(var(--ink-rgb),.05);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  padding:6px;
  margin-bottom:2px;
}
.bl-prod img{
  height:100%;width:auto;max-width:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.bl-prods{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  width:100%;margin-bottom:2px;
}
.bl-prods > div{
  aspect-ratio:1.1/1;
  background:rgba(var(--paper-rgb),.55);
  border:1px solid rgba(var(--ink-rgb),.05);
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  padding:4px;
}
.bl-prods img{width:90%;height:90%;object-fit:contain;mix-blend-mode:multiply}
.bl-prod-row{
  display:flex;align-items:center;gap:8px;
  width:100%;
  padding:6px 8px;
  background:rgba(var(--paper-rgb),.6);
  border:1px solid rgba(var(--ink-rgb),.05);
  border-radius:8px;
}
.bl-prod-thumb{
  width:42px;height:42px;flex-shrink:0;
  background:rgba(var(--paper-rgb),.7);
  border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  padding:3px;
}
.bl-prod-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.bl-prod-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.bl-prod-name{font-size:11px;font-weight:600;color:var(--ink);line-height:1.1}
.bl-prod-price{font-size:9.5px;color:var(--ink-2);line-height:1.2}

/* Ask Mira input bar (replaces traditional CTA on bl-card--4) */
.bl-input{
  display:flex;align-items:center;gap:6px;
  width:100%;
  padding:6px 6px 6px 12px;
  background:var(--paper);
  border:1px solid rgba(var(--ink-rgb),.1);
  border-radius:999px;
}
.bl-input > span{
  flex:1;min-width:0;
  font-size:11px;color:rgba(var(--ink-rgb),.45);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bl-input-send{
  width:24px;height:24px;border-radius:50%;
  background:var(--card-cta,var(--ink));color:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;
  border:0;flex-shrink:0;cursor:pointer;
  font-family:inherit;
}
.bl-input-send svg{display:block}

/* === Voice section: Serviceform-style inbox mockup (dark ⇄ light) === */
/* let the mockup overflow the right side of its column to the page edge */
.psec--peach .psec-art{
  overflow:visible;
  position:relative;
}
.psec--peach{overflow:hidden}
.mockup--sf-inbox{
  position:absolute;
  left:0;top:50%;
  /* push ~200px past viewport-right to break the page flow: right = 620-50vw-200 = 420-50vw */
  right:max(-720px, calc(420px - 50vw));
  transform:translateY(-50%) rotateX(2deg) rotateY(-2deg);
  animation:none;
  width:auto;
  min-width:0;
  padding:0;
  background:var(--sfi-bg,#FAFAF9);
  color:var(--sfi-ink,#1A1A19);
  border:1px solid var(--sfi-border,rgba(20,20,19,.08));
  border-radius:14px;
  overflow:hidden;
  display:grid;
  grid-template-columns:40px 140px 280px 1fr 180px;
  height:560px;
  font-family:'Instrument Sans','Inter',-apple-system,sans-serif;
  font-size:11px;
  letter-spacing:0;
  box-shadow:
    0 1px 2px rgba(20,20,19,.04),
    0 14px 28px -10px rgba(20,20,19,.14),
    0 36px 70px -22px rgba(20,20,19,.22);
  transition:background .9s ease, color .9s ease, border-color .9s ease;
  --sfi-bg:#F3F3F7;
  --sfi-panel:#FFFFFF;
  --sfi-rail:#FAFAFC;
  --sfi-rail-ink:#3C3C44;
  --sfi-rail-mute:#A4A4AC;
  --sfi-brand-bg:#E84838;
  --sfi-brand-fg:#FFFFFF;
  --sfi-rail-active:rgba(20,20,22,.05);
  --sfi-side:#FFFFFF;
  --sfi-list:#FFFFFF;
  --sfi-ink:#1F1F23;
  --sfi-mute:#6B6B72;
  --sfi-muter:#A4A4AC;
  --sfi-border:rgba(20,20,22,.06);
  --sfi-accent:#5849DC;
  --sfi-active:rgba(88,73,220,.10);
  --sfi-active-bd:#5849DC;
  --sfi-active-text:#5849DC;
  --sfi-badge:#EE3D32;
  --sfi-badge-fg:#FFFFFF;
  --sfi-dot:#7A6EE3;
  --sfi-in:#F1ECE0;
  --sfi-out:#E8DAB7;
  --sfi-tag:#EFEEF4;
}
.mockup--sf-inbox.is-dark{
  --sfi-bg:#17171D;
  --sfi-panel:#1F1F27;
  --sfi-rail:#1B1B22;
  --sfi-rail-ink:#D5D5DC;
  --sfi-rail-mute:#76767E;
  --sfi-brand-bg:#E84838;
  --sfi-brand-fg:#FFFFFF;
  --sfi-rail-active:rgba(255,255,255,.06);
  --sfi-side:#1F1F27;
  --sfi-list:#1F1F27;
  --sfi-ink:#E8E8EE;
  --sfi-mute:#8A8A94;
  --sfi-muter:#5C5C64;
  --sfi-border:rgba(255,255,255,.06);
  --sfi-accent:#8A7DEB;
  --sfi-active:rgba(138,125,235,.15);
  --sfi-active-bd:#8A7DEB;
  --sfi-active-text:#B5ACF0;
  --sfi-badge:#EE3D32;
  --sfi-badge-fg:#FFFFFF;
  --sfi-dot:#9C90F0;
  --sfi-in:#262631;
  --sfi-out:#3A3320;
  --sfi-tag:#28282F;
}
.mockup--sf-inbox::before,.mockup--sf-inbox::after{display:none}

/* rail */
.sfi-rail{
  background:var(--sfi-rail);
  color:var(--sfi-rail-ink);
  border-right:1px solid var(--sfi-border);
  display:flex;flex-direction:column;align-items:center;
  padding:8px 0;gap:4px;
  transition:background .9s ease, color .9s ease, border-color .9s ease;
}
.sfi-rail-brand{
  width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:6px;
  overflow:hidden;
}
.sfi-rail-brand img{
  width:22px;height:22px;display:block;
  border-radius:6px;
}
.sfi-rail-ic{
  width:24px;height:24px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  color:var(--sfi-rail-mute);
  transition:color .9s ease, background .9s ease;
}
.sfi-rail-ic.is-active{
  background:var(--sfi-rail-active);
  color:var(--sfi-brand-bg);
}

/* channels sidebar */
.sfi-side{
  background:var(--sfi-side);
  border-right:1px solid var(--sfi-border);
  padding:10px 8px;
  display:flex;flex-direction:column;gap:6px;
  overflow:hidden;
  transition:background .9s ease, border-color .9s ease;
}
.sfi-side-h{
  margin:6px 4px 2px;
  font-size:7px;font-weight:600;letter-spacing:.08em;
  color:var(--sfi-muter);
  text-transform:uppercase;
  transition:color .9s ease;
}
.sfi-side-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:1px;
}
.sfi-side-list li{
  display:flex;align-items:center;gap:6px;
  padding:4px 6px;border-radius:5px;
  color:var(--sfi-ink);
  font-size:8.5px;
  transition:color .9s ease, background .9s ease;
}
.sfi-side-list li b{
  margin-left:auto;
  font-weight:600;color:var(--sfi-badge-fg);
  font-size:7px;letter-spacing:.01em;
  background:var(--sfi-badge);
  padding:1px 6px;border-radius:10px;
  min-width:14px;text-align:center;
  transition:background .9s ease;
}
.sfi-side-list li.is-active{
  background:var(--sfi-active);
  color:var(--sfi-active-text);
  font-weight:600;
}
.sfi-side-list li span:first-child:not(.sfi-dot){flex:1}
.sfi-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--sfi-dot);
  flex-shrink:0;
  transition:background .9s ease;
}
.sfi-dot--open{background:#3FB97B}
.sfi-dot--wait{background:#E8B948}
.sfi-dot--closed{background:#8E8D86}
.sfi-dot--snooze{background:#9A86C7}
.sfi-dot--all{background:var(--sfi-dot)}
.sfi-dot--mail{background:var(--sfi-dot)}
.sfi-dot--wa{background:var(--sfi-dot)}
.sfi-dot--chat{background:var(--sfi-dot)}
.sfi-dot--msg{background:var(--sfi-dot)}
.sfi-dot--ig{background:var(--sfi-dot)}

/* conversation list */
.sfi-list{
  background:var(--sfi-list);
  border-right:1px solid var(--sfi-border);
  display:flex;flex-direction:column;
  min-width:0;
  transition:background .9s ease, border-color .9s ease;
}
.sfi-list-head{
  padding:8px 10px;
  border-bottom:1px solid var(--sfi-border);
  transition:border-color .9s ease;
}
.sfi-search{
  display:flex;align-items:center;gap:5px;
  background:var(--sfi-side);
  border:1px solid var(--sfi-border);
  border-radius:6px;
  padding:4px 7px;
  color:var(--sfi-muter);font-size:8px;
  transition:background .9s ease, border-color .9s ease, color .9s ease;
}
.sfi-convs{
  list-style:none;margin:0;padding:0;
  flex:1;overflow:hidden;
  display:flex;flex-direction:column;
}
.sfi-conv{
  display:flex;gap:6px;
  padding:7px 10px;
  border-bottom:1px solid var(--sfi-border);
  cursor:pointer;
  min-width:0;
  transition:background .9s ease, border-color .9s ease;
}
.sfi-conv.is-active{
  background:var(--sfi-active);
  border-left:2px solid var(--sfi-active-bd);
  padding-left:8px;
}
.sfi-av{
  width:22px;height:22px;border-radius:50%;
  background:var(--av,#CF9358);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:600;
  flex-shrink:0;
}
.sfi-av--lg{width:30px;height:30px;font-size:10px}
.sfi-conv-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sfi-conv-row{display:flex;align-items:center;gap:6px}
.sfi-conv-name{
  font-weight:600;font-size:9px;
  color:var(--sfi-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;min-width:0;
  transition:color .9s ease;
}
.sfi-conv-time{
  font-size:7.5px;color:var(--sfi-muter);
  flex-shrink:0;
  transition:color .9s ease;
}
.sfi-conv-tags{display:flex;gap:3px;flex-wrap:wrap}
.sfi-pill{
  font-size:6.5px;font-weight:600;letter-spacing:.02em;
  padding:1px 5px;border-radius:3px;
  background:var(--sfi-tag);color:var(--sfi-mute);
  white-space:nowrap;
  transition:background .9s ease, color .9s ease;
}
.sfi-pill--wa{background:rgba(37,211,102,.18);color:#1B8C46}
.sfi-pill--mail{background:rgba(45,108,223,.18);color:#1F4FA8}
.sfi-pill--chat{background:rgba(207,147,88,.20);color:#8A5828}
.sfi-pill--ig{background:rgba(225,48,108,.18);color:#A82658}
.is-dark .sfi-pill--wa{background:rgba(37,211,102,.18);color:#5CE08E}
.is-dark .sfi-pill--mail{background:rgba(45,108,223,.22);color:#7BA4F0}
.is-dark .sfi-pill--chat{background:rgba(207,147,88,.22);color:#E6B985}
.is-dark .sfi-pill--ig{background:rgba(225,48,108,.22);color:#F07198}
.sfi-conv-snip{
  font-size:8px;color:var(--sfi-mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .9s ease;
}

/* thread */
.sfi-thread{
  background:var(--sfi-panel);
  display:flex;flex-direction:column;
  min-width:0;
  transition:background .9s ease;
}
.sfi-thread-head{
  padding:8px 12px;
  border-bottom:1px solid var(--sfi-border);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  transition:border-color .9s ease;
}
.sfi-th-left{display:flex;align-items:center;gap:8px;min-width:0}
.sfi-th-left h4{
  margin:0;font-size:10px;font-weight:600;
  color:var(--sfi-ink);
  transition:color .9s ease;
}
.sfi-th-left p{
  margin:1px 0 0;font-size:7.5px;color:var(--sfi-mute);
  transition:color .9s ease;
}
.sfi-th-actions{display:flex;gap:4px}
.sfi-chip{
  font-size:7.5px;font-weight:500;
  padding:2px 6px;border-radius:4px;
  background:var(--sfi-tag);color:var(--sfi-mute);
  border:1px solid var(--sfi-border);
  transition:background .9s ease, color .9s ease, border-color .9s ease;
}
.sfi-chip--open{color:#1B8C46;border-color:rgba(37,211,102,.3)}
.is-dark .sfi-chip--open{color:#5CE08E}

.sfi-thread-body{
  flex:1;
  padding:10px 14px;
  display:flex;flex-direction:column;gap:7px;
  overflow:hidden;
  background:var(--sfi-bg);
  transition:background .9s ease;
}
.sfi-day{
  align-self:center;
  font-size:7px;color:var(--sfi-muter);
  padding:1px 8px;border-radius:8px;
  background:var(--sfi-tag);
  transition:background .9s ease, color .9s ease;
}
.sfi-bubble{
  max-width:78%;
  padding:6px 9px;
  border-radius:9px;
  font-size:8.5px;line-height:1.45;
  color:var(--sfi-ink);
  position:relative;
  transition:background .9s ease, color .9s ease;
}
.sfi-bubble p{margin:0 0 2px}
.sfi-bubble p:last-of-type{margin:0}
.sfi-bubble--in{
  background:var(--sfi-in);
  align-self:flex-start;
  border-bottom-left-radius:3px;
}
.sfi-bubble--out{
  background:var(--sfi-out);
  align-self:flex-end;
  border-bottom-right-radius:3px;
}
.sfi-time{
  display:block;margin-top:3px;
  font-size:6.5px;color:var(--sfi-muter);
  text-align:right;
  transition:color .9s ease;
}

.sfi-reply{
  padding:8px 12px;
  border-top:1px solid var(--sfi-border);
  display:flex;align-items:center;gap:7px;
  background:var(--sfi-panel);
  transition:background .9s ease, border-color .9s ease;
}
.sfi-reply-input{
  flex:1;
  padding:5px 9px;
  border:1px solid var(--sfi-border);
  border-radius:6px;
  font-size:8.5px;color:var(--sfi-muter);
  background:var(--sfi-bg);
  transition:background .9s ease, border-color .9s ease, color .9s ease;
}
.sfi-reply-send{
  width:22px;height:22px;border-radius:50%;
  background:var(--sfi-rail-accent);color:#1F1B19;
  border:0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:inherit;
  transition:background .9s ease, color .9s ease;
}

/* contact panel */
.sfi-contact{
  background:var(--sfi-panel);
  border-left:1px solid var(--sfi-border);
  padding:12px 10px;
  display:flex;flex-direction:column;gap:10px;
  overflow:hidden;
  transition:background .9s ease, border-color .9s ease;
}
.sfi-contact-head{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding-bottom:10px;
  border-bottom:1px solid var(--sfi-border);
  transition:border-color .9s ease;
}
.sfi-contact-head h4{
  margin:2px 0 0;font-size:10px;font-weight:600;
  color:var(--sfi-ink);
  transition:color .9s ease;
}
.sfi-contact-head p{
  margin:0;font-size:7.5px;color:var(--sfi-mute);
  transition:color .9s ease;
}
.sfi-contact-section{
  display:flex;flex-direction:column;gap:3px;
}
.sfi-c-label{
  margin:0;font-size:7px;font-weight:600;letter-spacing:.08em;
  color:var(--sfi-muter);text-transform:uppercase;
  transition:color .9s ease;
}
.sfi-c-row{
  margin:0;font-size:8px;color:var(--sfi-ink);
  display:flex;justify-content:space-between;gap:6px;
  transition:color .9s ease;
}
.sfi-c-row .sfi-c-key{color:var(--sfi-muter)}
.sfi-c-row.sfi-c-muted{color:var(--sfi-mute)}

/* responsive collapse */
@media (max-width:1100px){
  .mockup--sf-inbox{
    position:relative;left:auto;top:auto;
    transform:rotateX(2deg) rotateY(-2deg);
    width:100%;min-width:0;max-width:820px;
    grid-template-columns:36px 132px 220px 1fr;
    height:430px;font-size:9px;
  }
  .sfi-contact{display:none}
}
@media (max-width:900px){
  .mockup--sf-inbox{
    transform:none;
    max-width:560px;height:360px;
    grid-template-columns:28px 0 1fr 0;
    font-size:8px;
  }
  .sfi-side{display:none}
}
@media (prefers-reduced-motion: reduce){
  .mockup--sf-inbox{transition:none}
  .mockup--sf-inbox *{transition:none !important}
}

/* per-card masonry pose + accent palette (white bg, only buttons & eyebrows vary) */
.bl-card--1{
  width:270px;margin-left:8px;transform:rotate(-3deg);
  --card-bg:var(--paper);
  --card-eyebrow-bg:var(--tan-tint);
  --card-accent:var(--tan-deep);
  --card-eyebrow-border:rgba(var(--tan-deep-rgb),.22);
  --card-cta:var(--tan-deep);
}
.bl-card--2{
  width:260px;align-self:flex-end;margin-right:14px;transform:rotate(2.5deg);
  --card-bg:var(--paper);
  --card-eyebrow-bg:var(--sage-tint);
  --card-accent:var(--sage-deep);
  --card-eyebrow-border:rgba(var(--sage-deep-rgb),.22);
  --card-cta:var(--sage-deep);
}
.bl-card--3{
  width:290px;margin-left:34px;transform:rotate(-1.5deg);
  --card-bg:var(--paper);
  --card-eyebrow-bg:var(--peach-tint);
  --card-accent:var(--peach-deep);
  --card-eyebrow-border:rgba(var(--peach-deep-rgb),.22);
  --card-cta:var(--peach-deep);
}
.bl-card--4{
  width:255px;align-self:flex-end;margin-right:4px;transform:rotate(3.5deg);
  --card-bg:var(--paper);
  --card-eyebrow-bg:var(--lilac-tint);
  --card-accent:var(--lilac-deep);
  --card-eyebrow-border:rgba(var(--lilac-deep-rgb),.22);
  --card-cta:var(--lilac-deep);
}
.bl-card--5{
  width:260px;margin-left:60px;transform:rotate(-2.5deg);
  --card-bg:var(--paper);
  --card-eyebrow-bg:var(--cream-2);
  --card-accent:var(--ink);
  --card-eyebrow-border:rgba(var(--ink-rgb),.12);
  --card-cta:var(--ink);
}

@media (prefers-reduced-motion: reduce){
  .bl-scroller{animation:none}
}
.psec--tan{overflow:visible;position:relative}
.psec--tan .psec-art{overflow:visible}

/* header */
.mgc-top{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border-bottom:1px solid rgba(var(--ink-rgb),.06);
}
.mgc-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  object-fit:cover;
  background:radial-gradient(circle at 30% 30%, var(--tan-soft) 0%, var(--tan) 70%, var(--tan-deep) 100%);
  box-shadow:0 0 0 2px var(--paper), 0 2px 6px -2px rgba(var(--ink-rgb),.15);
}
.mgc-id{display:flex;flex-direction:column;gap:1px;flex:1}
.mgc-name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.1}
.mgc-status{
  font-size:10px;color:var(--ink-2);
  display:flex;align-items:center;gap:5px;line-height:1.2;
}
.mgc-online{
  width:6px;height:6px;border-radius:50%;
  background:#3ABE6E;
  box-shadow:0 0 0 2px rgba(58,190,110,.22);
}
.mgc-x{color:rgba(var(--ink-rgb),.3);font-size:18px;line-height:1;cursor:pointer}

/* thread */
.mgc-thread{
  padding:14px;
  display:flex;flex-direction:column;gap:10px;
  background:#FAF7F1;
}
.mgc-bubble{
  font-size:11.5px;line-height:1.4;
  padding:8px 12px;
  border-radius:8px;
  max-width:88%;
}
.mgc-bubble--user{
  background:var(--ink);color:var(--paper);
  align-self:flex-end;
  border-bottom-right-radius:2px;
  font-weight:500;
}
.mgc-bubble--ai{
  background:var(--paper);color:var(--ink);
  align-self:flex-start;
  border-bottom-left-radius:2px;
  border:1px solid rgba(var(--ink-rgb),.07);
}

/* typing indicator (3 bouncing dots) */
.mgc-typing{
  align-self:flex-start;
  display:flex;align-items:center;gap:4px;
  padding:10px 12px;
  background:var(--paper);
  border:1px solid rgba(var(--ink-rgb),.07);
  border-radius:8px;
  border-bottom-left-radius:2px;
}
.mgc-typing span{
  width:5px;height:5px;border-radius:50%;
  background:rgba(var(--ink-rgb),.5);
  animation:mgcDot 1.2s ease-in-out infinite;
}
.mgc-typing span:nth-child(2){animation-delay:.15s}
.mgc-typing span:nth-child(3){animation-delay:.3s}
@keyframes mgcDot{
  0%,70%,100%{transform:translateY(0);opacity:.4}
  35%{transform:translateY(-3px);opacity:1}
}

/* products row */
.mgc-products{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  margin-top:2px;
}
.mgc-prod{
  background:var(--paper);
  border:1px solid rgba(var(--ink-rgb),.07);
  border-radius:6px;
  padding:5px;
  display:flex;flex-direction:column;gap:4px;
  transition:transform .3s ease;
}
.mgc-pimg{
  border-radius:4px;
  padding:4px 6px;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1.35/1;
  overflow:hidden;
}
.mgc-pimg img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  mix-blend-mode:multiply;
}
.mgc-pimg svg{width:100%;height:auto;display:block}
.mgc-pimg--1{background:#FAF6EF}
.mgc-pimg--2{background:#F2F2EE}
.mgc-pimg--3{background:#EFEFEC}
.mgc-pmeta{display:flex;flex-direction:column;gap:1px;padding:0 3px 2px}
.mgc-pname{font-size:9px;font-weight:600;color:var(--ink);line-height:1.15}
.mgc-prow{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:8.5px;
}
.mgc-pprice{font-weight:600;color:var(--ink)}
.mgc-prate{color:var(--tan-deep);font-weight:500;font-size:8px}

/* quick reply chips */
.mgc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.mgc-chips span{
  font-size:10px;
  padding:5px 9px;
  border:1px solid rgba(var(--ink-rgb),.12);
  border-radius:4px;
  color:var(--ink);
  background:var(--paper);
  font-weight:500;
}

/* input bar */
.mgc-input{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px;
  border-top:1px solid rgba(var(--ink-rgb),.06);
  font-size:11.5px;color:rgba(var(--ink-rgb),.4);
  background:var(--paper);
}
.mgc-input-text{
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:clip;
}
.mgc-input-text.is-typing{color:var(--ink);font-weight:500}
.mgc-input-text.is-typing::after{
  content:'';
  display:inline-block;
  width:1px;height:1em;
  margin-left:1px;
  background:var(--ink);
  vertical-align:-.18em;
  animation:caret 1s steps(2) infinite;
}
@keyframes caret{50%{opacity:0}}
.mgc-send{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  color:var(--ink);
  transition:color .2s ease, transform .2s ease;
}
.mgc-send svg{display:block}

/* === scripted "talking" animations === */
.mockup--guide-chat .mgc-typing{display:none}
/* hide all scene content by default — animations on .play/.play-2/.play-3 reveal them */
.mockup--guide-chat .mgc-bubble--user,
.mockup--guide-chat .mgc-bubble--ai,
.mockup--guide-chat .mgc-prod,
.mockup--guide-chat .mgc-chips,
.mockup--guide-chat .ms-popup-eyebrow,
.mockup--guide-chat .ms-popup-title,
.mockup--guide-chat .ms-popup-body,
.mockup--guide-chat .ms-popup-cta,
.mockup--guide-chat .ms-popup-secondary{opacity:0}

/* Scene 1 — product discovery (plays on .play) */
.mockup--guide-chat.play .mgc-scene--shop .mgc-typing{display:flex}
.mockup--guide-chat.play .mgc-scene--shop .mgc-bubble--user{
  animation:mgcIn .5s cubic-bezier(.2,.7,.2,1) .3s both;
}
.mockup--guide-chat.play .mgc-scene--shop .mgc-typing{
  animation:mgcShow 1.8s ease .9s both;
}
.mockup--guide-chat.play .mgc-scene--shop .mgc-bubble--ai{
  animation:mgcIn .5s cubic-bezier(.2,.7,.2,1) 2.9s both;
}
.mockup--guide-chat.play .mgc-scene--shop .mgc-prod:nth-child(1){animation:mgcIn .4s cubic-bezier(.2,.7,.2,1) 3.4s both}
.mockup--guide-chat.play .mgc-scene--shop .mgc-prod:nth-child(2){animation:mgcIn .4s cubic-bezier(.2,.7,.2,1) 3.6s both}
.mockup--guide-chat.play .mgc-scene--shop .mgc-prod:nth-child(3){animation:mgcIn .4s cubic-bezier(.2,.7,.2,1) 3.8s both}
.mockup--guide-chat.play .mgc-scene--shop .mgc-chips{
  animation:mgcIn .5s cubic-bezier(.2,.7,.2,1) 4.3s both;
}

/* Scene 2 — returns / exchanges (plays on .play-2) */
.mockup--guide-chat.play-2 .mgc-scene--fit .mgc-typing{display:flex}
.mockup--guide-chat.play-2 .mgc-scene--fit .mgc-bubble--user{
  animation:mgcIn .5s cubic-bezier(.2,.7,.2,1) .2s both;
}
.mockup--guide-chat.play-2 .mgc-scene--fit .mgc-typing{
  animation:mgcShow 1.6s ease .7s both;
}
.mockup--guide-chat.play-2 .mgc-scene--fit .mgc-bubble--ai:not(.mgc-bubble--ai-2){
  animation:mgcIn .5s cubic-bezier(.2,.7,.2,1) 2.5s both;
}
.mockup--guide-chat.play-2 .mgc-scene--fit .mgc-bubble--ai-2{
  animation:mgcIn .5s cubic-bezier(.2,.7,.2,1) 3.2s both;
}
.mockup--guide-chat.play-2 .mgc-scene--fit .mgc-chips{
  animation:mgcIn .5s cubic-bezier(.2,.7,.2,1) 3.9s both;
}

/* Scene 3 — shipping urgency popup (plays on .play-3) */
.mockup--guide-chat.play-3 .ms-popup-eyebrow{animation:mgcIn .5s cubic-bezier(.2,.7,.2,1) .15s both}
.mockup--guide-chat.play-3 .ms-popup-title{animation:mgcIn .5s cubic-bezier(.2,.7,.2,1) .35s both}
.mockup--guide-chat.play-3 .ms-popup-body{animation:mgcIn .5s cubic-bezier(.2,.7,.2,1) .55s both}
.mockup--guide-chat.play-3 .ms-popup-cta{animation:mgcIn .5s cubic-bezier(.2,.7,.2,1) .75s both}
.mockup--guide-chat.play-3 .ms-popup-secondary{animation:mgcIn .5s cubic-bezier(.2,.7,.2,1) .9s both}

@keyframes mgcIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@keyframes mgcShow{
  0%{opacity:0;transform:translateY(6px)}
  12%,82%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-2px)}
}
@media (prefers-reduced-motion: reduce){
  .mockup--guide-chat *{animation:none !important;opacity:1 !important;transition:none !important}
  .mockup--guide-chat .mgc-typing{display:none}
}


.card--tan{background:var(--tan-soft)}
.card--tan h3 em{color:#B17345}
.card--sage{background:var(--sage-soft)}
.card--sage h3 em{color:var(--sage-deep)}
.card--peach{background:var(--peach-soft)}
.card--peach h3 em{color:var(--peach-deep)}
.card--lilac{background:var(--lilac-soft)}
.card--lilac h3 em{color:var(--lilac-deep)}

/* product art — floating "3D" centered render with soft floor shadow */
.card-art{
  position:relative;
  flex:1;
  display:flex;align-items:center;justify-content:center;
  perspective:1000px;
  margin-bottom:-18px;
}
.product{
  position:relative;
  width:52%;
  aspect-ratio:1/1;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  color:var(--paper);
  transform:rotateX(14deg) rotateY(-10deg);
  transform-style:preserve-3d;
  animation:bob 6s ease-in-out infinite;
}
.product::after{
  /* floor shadow */
  content:"";
  position:absolute;
  left:-8%;right:-8%;
  bottom:-22px;
  height:24px;
  background:radial-gradient(ellipse at center, rgba(var(--ink-rgb),.32) 0%, rgba(var(--ink-rgb),0) 70%);
  filter:blur(3px);
  transform:rotateX(-14deg) rotateY(10deg);
  z-index:-1;
}
.card:nth-child(2) .product{animation-delay:-1.5s}
.card:nth-child(3) .product{animation-delay:-3s}
.card:nth-child(4) .product{animation-delay:-4.5s}
@keyframes bob{
  0%,100%{transform:translateY(0) rotateX(14deg) rotateY(-10deg)}
  50%{transform:translateY(-8px) rotateX(16deg) rotateY(-8deg)}
}

.product--chat{
  background:linear-gradient(140deg,#E8B97A 0%,var(--tan) 60%,#A87141 100%);
  box-shadow:
    inset 6px -8px 16px rgba(120,72,30,.45),
    inset -6px 8px 14px rgba(255,236,200,.55);
  border-radius:8px;
  width:64%;height:32%;aspect-ratio:auto;
}
.product--form{
  background:linear-gradient(140deg,var(--paper) 0%, #F5F7F3 100%);
  box-shadow:
    inset 4px -6px 14px rgba(20,40,20,.12),
    inset -4px 4px 12px rgba(var(--paper-rgb),.9);
  border-radius:14px;
  width:50%;
  color:var(--ink);
  flex-direction:column;gap:6px;padding:18px 14px;
}
.product--cal{
  background:linear-gradient(140deg,#F1C9A8 0%,var(--peach) 100%);
  box-shadow:
    inset 4px -6px 14px rgba(120,50,20,.35),
    inset -4px 4px 12px rgba(255,220,200,.6);
  border-radius:16px;
  width:54%;
  flex-direction:column;gap:6px;
}
.product--wa{
  background:linear-gradient(140deg,#EFEAF7 0%,#D4C6EC 100%);
  color:var(--lilac-deep);
  box-shadow:
    inset 4px -6px 14px rgba(60,40,120,.28),
    inset -4px 4px 12px rgba(var(--paper-rgb),.7);
  border-radius:50%;
  width:52%;
}

.product-badge{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-weight:600;font-size:14px;letter-spacing:.02em;
  opacity:.92;
}
.product--form .product-badge{position:static;transform:none;align-self:flex-start;color:var(--peach-deep);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.product--cal .product-badge{position:static;transform:none;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.85;color:var(--paper);align-self:center}
.product--cal .product-num{font-weight:500;font-size:22px;letter-spacing:-.02em}
.product-dot{
  position:absolute;top:14px;right:14px;
  width:8px;height:8px;border-radius:50%;background:var(--paper);opacity:.6;
}
.product-line{
  width:80%;height:6px;border-radius:3px;background:rgba(var(--ink-rgb),.08);
}
.product-line--short{width:50%}
.product-check{
  width:24px;height:24px;border-radius:50%;background:var(--lilac-deep);
  position:absolute;bottom:14px;right:14px;
}
.product-check::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, transparent 45%, var(--paper) 45% 55%, transparent 55%);
  border-radius:50%;
}

/* ===== Kicker section ===== */
.kicker{
  padding:clamp(80px,12vw,160px) var(--pad);
  background:var(--paper);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.kicker-grid{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:center;
}
.overline{
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tan-deep);margin:0 0 18px;
}
.display{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(40px,5.4vw,84px);
  line-height:1;
  letter-spacing:-.03em;
  margin:0 0 24px;
}
.display em{font-family:inherit;font-weight:inherit;font-style:normal;color:var(--tan)}
.display.centered{text-align:center}
.lede{font-size:clamp(17px,1.3vw,20px);color:var(--ink-2);line-height:1.55;max-width:52ch;margin:0 0 28px}

.kicker-art{
  position:relative;height:480px;display:flex;align-items:center;justify-content:center;perspective:1400px;
}
.orb-3d{
  position:relative;width:340px;height:340px;
  transform-style:preserve-3d;
  animation:spin3d 16s linear infinite;
}
.orb-3d-inner{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, var(--paper) 0%, rgba(var(--paper-rgb),0) 35%),
    radial-gradient(circle at 70% 70%, #E5C7E0 0%, var(--lilac) 55%, var(--lilac-deep) 100%);
  box-shadow:
    0 80px 140px -50px rgba(var(--lilac-deep-rgb),.6),
    inset -30px -50px 90px rgba(40,20,80,.5),
    inset 40px 60px 100px rgba(var(--paper-rgb),.4);
}
.orb-3d-ring{
  position:absolute;inset:-30px;border-radius:50%;
  border:1px solid rgba(var(--ink-rgb),.18);
  transform:rotateX(72deg);
}
.orb-3d-ring--2{transform:rotateY(70deg) rotateX(20deg);border-color:rgba(var(--tan-rgb),.35)}
@keyframes spin3d{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}

/* ===== How it works ===== */
.how{
  padding:clamp(80px,10vw,140px) var(--pad);
  max-width:var(--maxw);margin:0 auto;
}
.how-steps{
  list-style:none;padding:0;margin:60px 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  counter-reset:step;
}
.how-steps li{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:32px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.how-steps li:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.step-num{
  font-family:var(--sans);font-weight:500;font-size:48px;color:var(--tan);
  letter-spacing:-.02em;display:block;line-height:1;margin-bottom:18px;
}
.how-steps h3{margin:0 0 10px;font-size:22px;font-weight:600;letter-spacing:-.01em}
.how-steps p{margin:0;color:var(--ink-2);line-height:1.55;font-size:15px}

/* ===== Stats ===== */
.stats{
  padding:clamp(60px,8vw,120px) var(--pad);
  background:var(--ink);color:var(--paper);
  border-radius:48px 48px 0 0;
  margin-top:40px;
}
.stats-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
  text-align:left;
}
.stat-num{
  font-size:clamp(56px,7vw,110px);
  font-weight:500;
  margin:0;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--paper);
}
.stat-label{margin:14px 0 0;color:rgba(var(--paper-rgb),.6);font-size:15px;max-width:24ch}
.logos{
  max-width:var(--maxw);margin:80px auto 0;
  display:flex;flex-wrap:wrap;gap:48px;justify-content:space-between;align-items:center;
  opacity:.55;
}
.logos span{
  font-family:var(--sans);font-weight:500;font-size:18px;letter-spacing:.04em;color:var(--paper);
}

/* ===== Demo strip ===== */
.demo{
  background:var(--ink);
  padding:0 var(--pad) clamp(60px,8vw,120px);
}
.demo-card{
  max-width:var(--maxw);margin:0 auto;
  background:var(--cream);color:var(--ink);
  border-radius:32px;
  padding:clamp(40px,6vw,80px);
  display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;
}
.demo-chat{
  background:var(--paper);
  border-radius:24px;
  box-shadow:0 40px 80px -20px rgba(var(--ink-rgb),.45);
  overflow:hidden;
  transform:rotateX(4deg) rotateY(-6deg);
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .4s ease;
}
.demo-chat-bar{display:flex;gap:6px;padding:14px;background:var(--cream-2);border-bottom:1px solid var(--line)}
.demo-chat-bar span{width:10px;height:10px;border-radius:50%;background:rgba(var(--ink-rgb),.18)}
.demo-chat-thread{
  padding:24px;display:flex;flex-direction:column;gap:10px;
  min-height:240px;max-height:320px;overflow-y:auto;
}
.demo-chat-thread .bubble{font-size:14px;padding:10px 14px;border-radius:18px;max-width:88%}
.demo-chat-thread .bubble--in{background:#F2F2EF}
.demo-chat-thread .bubble--out{background:var(--ink);color:var(--paper)}
.demo-chat-input{display:flex;gap:8px;padding:16px;border-top:1px solid var(--line);background:var(--cream)}
.demo-chat-input input{
  flex:1;border:0;background:transparent;font:inherit;font-size:15px;outline:none;padding:8px 12px;
  color:var(--ink);
}

/* ===== FAQ ===== */
.faq{
  padding:clamp(80px,10vw,140px) var(--pad);
  max-width:880px;margin:0 auto;
}
.faq h2{margin-bottom:60px}
.faq-list{display:flex;flex-direction:column;gap:0}
.faq details{
  border-top:1px solid var(--line);
  padding:24px 0;
}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  font-size:clamp(18px,1.8vw,24px);font-weight:500;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq-plus{
  width:24px;height:24px;position:relative;flex-shrink:0;
}
.faq-plus::before,.faq-plus::after{
  content:"";position:absolute;background:var(--ink);
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.faq-plus::before{width:14px;height:1.5px}
.faq-plus::after{width:1.5px;height:14px;transition:transform .25s ease}
.faq details[open] .faq-plus::after{transform:translate(-50%,-50%) scaleY(0)}
.faq details p{margin:12px 0 0;color:var(--ink-2);line-height:1.6;max-width:60ch}

/* ===== Credibility / proof section ===== */
.proof{
  background:var(--cream-2);
  padding:clamp(72px,9vw,128px) max(var(--pad), calc((100% - 1240px) / 2));
}
.proof-inner{
  max-width:1240px;
  margin:0 auto;
}
.overline--proof{margin:0 0 18px;color:var(--tan-deep)}
.proof-title{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(36px,3.8vw,60px);
  line-height:1.05;letter-spacing:-.04em;
  margin:0 0 18px;
  max-width:20ch;
}
.proof-title em{font-style:normal;color:var(--tan)}
.proof-lede{
  font-size:clamp(16px,1.15vw,20px);
  color:var(--ink-2);line-height:1.45;
  margin:0 0 clamp(48px,5.5vw,72px);
  max-width:52ch;
}

/* customer logo marquee (two rows, opposite directions) */
.proof-marquee{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:clamp(24px,2.6vw,40px);
  padding-bottom:clamp(48px,5.5vw,72px);
  margin-bottom:clamp(48px,5.5vw,72px);
  border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.proof-marquee-track{
  display:flex;
  align-items:center;
  gap:clamp(44px,5.5vw,84px);
  width:max-content;
  animation:logoMarquee 55s linear infinite;
}
.proof-marquee-track--reverse{
  animation-direction:reverse;
  animation-duration:65s; /* slightly different so rows don't lock visually */
}
.proof-marquee:hover .proof-marquee-track{animation-play-state:paused}
@keyframes logoMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.proof-logo{
  flex-shrink:0;
  height:26px;
  width:auto;
  max-width:160px;
  object-fit:contain;
  opacity:.55;
  filter:grayscale(1) contrast(.95);
  transition:opacity .25s ease, filter .25s ease;
}
.proof-logo--solid{height:26px}
.proof-logo:hover{opacity:1;filter:grayscale(0) contrast(1)}
@media (prefers-reduced-motion: reduce){
  .proof-marquee-track{animation:none}
}

/* case study cards */
.proof-cases{
  list-style:none;padding:0;
  margin:0 0 clamp(56px,6vw,84px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,36px);
}
@media (max-width:1020px){
  .proof-cases{grid-template-columns:repeat(2,1fr)}
}
.case{
  display:flex;flex-direction:column;
  gap:24px;
}
.case-hero{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  border-radius:16px;
  overflow:hidden;
  background:var(--cream);
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.02), 0 24px 48px -28px rgba(var(--ink-rgb),.18);
}
.case-hero img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.case:hover .case-hero img{transform:scale(1.03)}
.case-body{
  display:flex;flex-direction:column;
  gap:14px;
  padding:0 4px;
}
.case-title{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(20px,1.6vw,26px);
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--ink);
  margin:0;
}
.case-lede{
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.5;color:var(--ink-2);
  margin:0;max-width:42ch;
}
.case-stat{
  display:flex;flex-direction:column;gap:6px;
  padding-top:22px;
  margin-top:8px;
  border-top:1px solid var(--line);
}
.case-stat-num{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(40px,4vw,64px);
  letter-spacing:-.04em;
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.case-stat-num small{font-size:.55em;font-weight:500;letter-spacing:-.01em;margin-left:2px}
.case-stat-label{
  font-size:14px;
  color:var(--ink-2);
  line-height:1.35;
  max-width:32ch;
}
.case-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:8px;
  font-size:14px;font-weight:600;
  color:var(--ink);
  letter-spacing:-.005em;
  text-decoration:none;
  transition:gap .25s ease, color .25s ease;
}
.case-link:hover{gap:10px;color:var(--tan-deep)}
@media (max-width:760px){
  .proof-cases{grid-template-columns:1fr}
}

/* partner + review badges */
.proof-partners{
  border-top:1px solid var(--line);
  padding-top:clamp(40px,4.5vw,64px);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:clamp(28px,4vw,64px);
}
.proof-partners-group{
  display:flex;flex-direction:column;gap:16px;
  align-items:flex-start;
}
.proof-partners-group--reviews{align-items:flex-end}
.proof-partner-label{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-weight:500;
}
.proof-partner-row{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;
  gap:14px;
}
.partner{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 10px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
}
.partner-badge{
  display:block;
  height:auto;
  max-height:64px;
  width:auto;
  max-width:280px;
  opacity:.92;
  transition:opacity .25s ease;
}
.partner:hover .partner-badge{opacity:1}
.proof-review-row{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:flex-end;
  gap:14px;
}
.review-badge{display:inline-flex;align-items:center;justify-content:center}
.review-badge img{
  display:block;
  height:64px;
  width:auto;
  opacity:.88;
  transition:opacity .25s ease, transform .25s ease;
}
.review-badge:hover img{opacity:1;transform:translateY(-2px)}
@media (max-width:760px){
  .proof-partners-group--reviews{align-items:flex-start}
  .proof-review-row{justify-content:flex-start}
}

/* ===== Differentiation section (How we work) ===== */
.diff{
  background:var(--paper);
  padding:clamp(72px,9vw,128px) max(var(--pad), calc((100% - 1240px) / 2));
  border-top:1px solid var(--line);
}
.diff-inner{
  max-width:1240px;
  margin:0 auto;
}
.overline--diff{margin:0 0 18px;color:var(--tan-deep)}
.diff-title{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(36px,3.8vw,60px);
  line-height:1.05;letter-spacing:-.04em;
  margin:0 0 18px;
  max-width:22ch;
}
.diff-title em{font-style:normal;color:var(--tan)}
.diff-lede{
  font-size:clamp(16px,1.15vw,20px);
  color:var(--ink-2);
  line-height:1.5;
  margin:0 0 clamp(48px,5.5vw,72px);
  max-width:64ch;
}
/* Horizontal masonry marquee: 2 rows, infinite scroll, mixed photos + content tiles */
.diff{padding-bottom:clamp(64px,8vw,120px)}
.diff-inner{margin-bottom:clamp(48px,5vw,72px)}
.diff-marquee{
  width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.diff-track{
  display:grid;
  grid-template-rows:repeat(2, 220px);
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  gap:14px;
  width:max-content;
  padding:0 14px;
  animation:diffScroll 90s linear infinite;
}
.diff-marquee:hover .diff-track{animation-play-state:paused}
@keyframes diffScroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 7px))}
}
@media (prefers-reduced-motion: reduce){
  .diff-track{animation:none}
}

.diff-tile{
  height:100%;
  width:280px;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:var(--cream);
}
.diff-tile--tall{
  grid-row:span 2;
  width:340px;
}
.diff-tile img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 30%;
}

/* Content tiles (stat / quote / eyebrow card) */
.diff-tile--card{
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:24px 26px;
  min-width:280px;
  background:var(--tile-bg, var(--tan-tint));
  color:var(--ink);
}
.diff-tile--tan{--tile-bg:var(--tan-tint);--tile-accent:var(--tan-deep)}
.diff-tile--sage{--tile-bg:var(--sage-tint);--tile-accent:var(--sage-deep)}
.diff-tile--peach{--tile-bg:var(--peach-tint);--tile-accent:var(--peach-deep)}
.diff-tile--lilac{--tile-bg:var(--lilac-tint);--tile-accent:var(--lilac-deep)}

.dt-eyebrow{
  margin:0;
  font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tile-accent);
}
.dt-title{
  margin:0;
  font-family:var(--sans);font-weight:500;
  font-size:28px;line-height:1.05;letter-spacing:-.025em;
  color:var(--ink);
  max-width:14ch;
}
.dt-title em{font-style:normal;color:var(--tile-accent)}

.diff-tile--stat{
  min-width:240px;align-items:flex-start;gap:2px;
}
.diff-tile--stat strong{
  font-family:var(--sans);font-weight:500;
  font-size:88px;line-height:.9;letter-spacing:-.04em;
  color:var(--tile-accent);
}
.diff-tile--stat strong small{
  font-size:.45em;font-weight:500;letter-spacing:-.01em;
  margin-left:2px;
}
.diff-tile--stat span{
  font-size:13.5px;color:rgba(20,20,19,.62);
  margin-top:4px;
}

.diff-tile--quote{min-width:340px}
.dt-quote{
  margin:0;
  font-family:var(--sans);font-weight:500;
  font-size:20px;line-height:1.2;letter-spacing:-.018em;
  color:var(--ink);
}
.dt-quote em{font-style:normal;color:var(--tile-accent)}
.dt-attr{
  font-size:11.5px;color:rgba(20,20,19,.55);
  letter-spacing:.01em;
  margin-top:auto;
}

@media (max-width:760px){
  .diff-track{grid-template-rows:repeat(2, 170px);gap:10px;animation-duration:70s}
  .diff-tile{border-radius:14px;width:220px}
  .diff-tile--tall{width:240px}
  .diff-tile--card{min-width:220px;width:220px;padding:18px}
  .dt-title{font-size:22px}
  .diff-tile--stat strong{font-size:64px}
  .diff-tile--quote{min-width:260px;width:260px}
  .dt-quote{font-size:16px}
}

/* ===== VIP newsletter signup (tight strip) ===== */
.vip{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(48px,6vw,80px) max(var(--pad), calc((100% - 1240px) / 2));
  position:relative;
  overflow:hidden;
}
.vip::before{
  /* subtle warm haze in the corner */
  content:"";
  position:absolute;
  top:-30%;right:-10%;
  width:60%;height:120%;
  background:radial-gradient(circle at center, rgba(var(--tan-rgb),.18) 0%, transparent 55%);
  pointer-events:none;
}
.vip-inner{
  position:relative;
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(28px,4vw,72px);
  align-items:center;
}
.vip-copy{display:flex;flex-direction:column;gap:14px}
.overline--vip{
  margin:0;
  color:var(--tan);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;font-weight:600;
}
.vip-title{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(28px,2.6vw,42px);
  line-height:1.1;letter-spacing:-.03em;
  margin:0;
  color:var(--paper);
  max-width:18ch;
}
.vip-title em{font-style:normal;color:var(--tan)}
.vip-lede{
  margin:0;
  font-size:clamp(14px,1.05vw,17px);
  color:rgba(var(--paper-rgb),.7);
  line-height:1.5;
  max-width:44ch;
}

.vip-form{display:flex;flex-direction:column;gap:10px}
.vip-label{
  /* visually hidden but accessible */
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.vip-field{
  display:flex;
  background:rgba(var(--paper-rgb),.06);
  border:1px solid rgba(var(--paper-rgb),.14);
  border-radius:14px;
  padding:6px;
  gap:6px;
  transition:border-color .25s ease, background .25s ease;
}
.vip-field:focus-within{
  background:rgba(var(--paper-rgb),.09);
  border-color:rgba(var(--tan-rgb),.55);
}
.vip-input{
  flex:1;min-width:0;
  background:transparent;
  border:0;outline:0;
  padding:12px 14px;
  font:inherit;font-size:15px;
  color:var(--paper);
  letter-spacing:-.005em;
}
.vip-input::placeholder{color:rgba(var(--paper-rgb),.4)}
.vip-cta{
  background:var(--tan);
  color:var(--ink);
  border:0;
  border-radius:10px;
  padding:12px 22px;
  font:inherit;font-size:14px;font-weight:600;letter-spacing:-.005em;
  display:inline-flex;align-items:center;gap:6px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.2), 0 12px 28px -10px rgba(var(--tan-deep-rgb),.5);
}
.vip-cta:hover{
  background:#e9a76b;
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.2), 0 18px 32px -10px rgba(var(--tan-deep-rgb),.7);
}
.vip-cta span{transition:transform .25s ease}
.vip-cta:hover span{transform:translateX(3px)}
.vip-fine{
  margin:0;
  font-size:12px;
  color:rgba(var(--paper-rgb),.5);
  letter-spacing:-.005em;
}
.vip-fine strong{color:var(--paper);font-weight:600}

@media (max-width:820px){
  .vip-inner{grid-template-columns:1fr;gap:24px}
  .vip-title{font-size:clamp(26px,4vw,32px)}
}
@media (max-width:520px){
  .vip-field{flex-direction:column}
  .vip-cta{justify-content:center}
}

/* ===== Footer ===== */
.footer{
  background:var(--cream-2);
  padding:clamp(60px,8vw,100px) var(--pad) 30px;
  border-top:1px solid var(--line);
}
.footer-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px;
}
.footer-social{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px}
.footer-social a{padding:0;font-size:13px;color:var(--ink-2)}
.footer-social a:hover{color:var(--tan-deep)}
.footer-legal{display:flex;gap:14px;flex-wrap:wrap}
.footer-legal a{padding:0;font-size:13px;color:var(--ink-2);display:inline}
.footer-legal a:hover{color:var(--tan-deep)}
.footer h4{margin:0 0 16px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.footer a{display:block;padding:6px 0;color:var(--ink);font-size:15px}
.footer a:hover{color:var(--tan-deep)}
.muted{color:var(--ink-2);margin:14px 0 0;max-width:32ch}
.footer-base{
  max-width:var(--maxw);margin:60px auto 0;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;color:var(--ink-2);font-size:13px;
}

/* ===== Reveal animations ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ===== Responsive ===== */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:8px}
  .hero-aside{justify-self:start;max-width:none;padding-top:0}
  .hero-aside .cta{align-self:flex-start}
  .hero-orb{width:260px;height:260px;right:-60px;top:-20px;transform:none}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .kicker-grid{grid-template-columns:1fr;gap:40px}
  .kicker-art{height:340px}
  .orb-3d{width:240px;height:240px}
  .how-steps{grid-template-columns:1fr;gap:14px}
  .stats-grid{grid-template-columns:1fr;gap:30px}
  .demo-card{grid-template-columns:1fr;gap:30px;padding:32px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav{grid-template-columns:auto 1fr auto}
  .nav-links{display:none}
}
@media (max-width:560px){
  .cards-grid{grid-template-columns:1fr}
  .card{overflow:hidden}
  .topbar-inner{gap:10px;padding:8px 14px}
  .topbar-inner p{font-size:12px}
  .topbar-inner .pill{padding:5px 10px;font-size:11px;flex-shrink:0}
  .topbar-product{display:none}
  .footer-grid{grid-template-columns:1fr}
  .footer-base{flex-direction:column;gap:6px}
}
@media (max-width:380px){
  .topbar-inner p{font-size:11px}
}

/* ================================================================ */
/* ===== Palette overrides (data-palette on <html>) ================ */
/* The :root tokens at the top of this file ARE the Default palette  */
/* Each named palette swaps: 4 hue families + --cream / --cream-2 bg */

/* RED — vivid red on warm-cream */
html[data-palette="red"]{
  --tan:#FC3229;            --tan-rgb:252,50,41;
  --tan-soft:#F7A5A3;       --tan-tint:#FEEAEA;
  --tan-deep:#B71810;       --tan-deep-rgb:183,24,16;
  --tan-deeper:#7F0E08;
  --sage:#10A958;           --sage-rgb:16,169,88;
  --sage-soft:#BEFAD3;      --sage-tint:#E2F8EA;
  --sage-deep:#0A7A3F;      --sage-deep-rgb:10,122,63;
  --sage-deeper:#054D27;
  --peach:#FF8866;          --peach-rgb:255,136,102;
  --peach-soft:#FDE9D4;     --peach-tint:#FFF3E6;
  --peach-deep:#C14820;     --peach-deep-rgb:193,72,32;
  --peach-deeper:#8A2F10;
  --lilac:#5C5B5B;          --lilac-rgb:92,91,91;
  --lilac-soft:#D6D6D6;     --lilac-tint:#EAEAEA;
  --lilac-deep:#2A2A2A;     --lilac-deep-rgb:42,42,42;
  --lilac-deeper:#000A0A;
  --cream:#FFFAFA;
  --cream-2:#FEEAEA;
}

/* CORAL — warm coral with peach + sage */
html[data-palette="coral"]{
  --tan:#FF8866;            --tan-rgb:255,136,102;
  --tan-soft:#FDE9D4;       --tan-tint:#FFF3E6;
  --tan-deep:#C14820;       --tan-deep-rgb:193,72,32;
  --tan-deeper:#8A2F10;
  --sage:#10A958;           --sage-rgb:16,169,88;
  --sage-soft:#BEFAD3;      --sage-tint:#E2F8EA;
  --sage-deep:#0A7A3F;      --sage-deep-rgb:10,122,63;
  --sage-deeper:#054D27;
  --peach:#FF3A99;          --peach-rgb:255,58,153;
  --peach-soft:#FFB8D6;     --peach-tint:#FFD9EA;
  --peach-deep:#C01970;     --peach-deep-rgb:192,25,112;
  --peach-deeper:#8A0D4D;
  --lilac:#8C8C8C;          --lilac-rgb:140,140,140;
  --lilac-soft:#D6D6D6;     --lilac-tint:#EAEAEA;
  --lilac-deep:#5C5B5B;     --lilac-deep-rgb:92,91,91;
  --lilac-deeper:#2A2A2A;
  --cream:#FFF7F2;
  --cream-2:#FDE9D4;
}

/* SUN — saturated yellow with green accents */
html[data-palette="sun"]{
  --tan:#FFC700;            --tan-rgb:255,199,0;
  --tan-soft:#FFE780;       --tan-tint:#FFF8B6;
  --tan-deep:#B88C00;       --tan-deep-rgb:184,140,0;
  --tan-deeper:#7A5C00;
  --sage:#10A958;           --sage-rgb:16,169,88;
  --sage-soft:#BEFAD3;      --sage-tint:#E2F8EA;
  --sage-deep:#0A7A3F;      --sage-deep-rgb:10,122,63;
  --sage-deeper:#054D27;
  --peach:#F24D1D;          --peach-rgb:242,77,29;
  --peach-soft:#FDC9B6;     --peach-tint:#FEE2D5;
  --peach-deep:#A82F0E;     --peach-deep-rgb:168,47,14;
  --peach-deeper:#751F07;
  --lilac:#5C5B5B;          --lilac-rgb:92,91,91;
  --lilac-soft:#D6D6D6;     --lilac-tint:#EAEAEA;
  --lilac-deep:#2A2A2A;     --lilac-deep-rgb:42,42,42;
  --lilac-deeper:#000A0A;
  --cream:#FFFDF0;
  --cream-2:#FFF8B6;
}

/* GRASS — vivid green with citrus accents */
html[data-palette="grass"]{
  --tan:#10A958;            --tan-rgb:16,169,88;
  --tan-soft:#8BD9A6;       --tan-tint:#BEFAD3;
  --tan-deep:#0A7A3F;       --tan-deep-rgb:10,122,63;
  --tan-deeper:#054D27;
  --sage:#FFC700;           --sage-rgb:255,199,0;
  --sage-soft:#FFE780;      --sage-tint:#FFF8B6;
  --sage-deep:#B88C00;      --sage-deep-rgb:184,140,0;
  --sage-deeper:#7A5C00;
  --peach:#FF8866;          --peach-rgb:255,136,102;
  --peach-soft:#FDE9D4;     --peach-tint:#FFF3E6;
  --peach-deep:#C14820;     --peach-deep-rgb:193,72,32;
  --peach-deeper:#8A2F10;
  --lilac:#007AFF;          --lilac-rgb:0,122,255;
  --lilac-soft:#82B6FC;     --lilac-tint:#DBEDFF;
  --lilac-deep:#0050A5;     --lilac-deep-rgb:0,80,165;
  --lilac-deeper:#002D5F;
  --cream:#F6FCF8;
  --cream-2:#E2F8EA;
}

/* SKY — vivid blue with green + purple accents */
html[data-palette="sky"]{
  --tan:#007AFF;            --tan-rgb:0,122,255;
  --tan-soft:#82B6FC;       --tan-tint:#DBEDFF;
  --tan-deep:#0050A5;       --tan-deep-rgb:0,80,165;
  --tan-deeper:#002D5F;
  --sage:#10A958;           --sage-rgb:16,169,88;
  --sage-soft:#BEFAD3;      --sage-tint:#E2F8EA;
  --sage-deep:#0A7A3F;      --sage-deep-rgb:10,122,63;
  --sage-deeper:#054D27;
  --peach:#FFC700;          --peach-rgb:255,199,0;
  --peach-soft:#FFE780;     --peach-tint:#FFF8B6;
  --peach-deep:#B88C00;     --peach-deep-rgb:184,140,0;
  --peach-deeper:#7A5C00;
  --lilac:#A259FF;          --lilac-rgb:162,89,255;
  --lilac-soft:#BA9AFF;     --lilac-tint:#E9E4F9;
  --lilac-deep:#6B30C2;     --lilac-deep-rgb:107,48,194;
  --lilac-deeper:#421F7A;
  --cream:#F6FAFF;
  --cream-2:#DBEDFF;
}

/* VIOLET — vivid purple with magenta + yellow */
html[data-palette="violet"]{
  --tan:#A259FF;            --tan-rgb:162,89,255;
  --tan-soft:#BA9AFF;       --tan-tint:#E9E4F9;
  --tan-deep:#6B30C2;       --tan-deep-rgb:107,48,194;
  --tan-deeper:#421F7A;
  --sage:#10A958;           --sage-rgb:16,169,88;
  --sage-soft:#BEFAD3;      --sage-tint:#E2F8EA;
  --sage-deep:#0A7A3F;      --sage-deep-rgb:10,122,63;
  --sage-deeper:#054D27;
  --peach:#FF3A99;          --peach-rgb:255,58,153;
  --peach-soft:#FFB8D6;     --peach-tint:#FFD9EA;
  --peach-deep:#C01970;     --peach-deep-rgb:192,25,112;
  --peach-deeper:#8A0D4D;
  --lilac:#FFC700;          --lilac-rgb:255,199,0;
  --lilac-soft:#FFE780;     --lilac-tint:#FFF8B6;
  --lilac-deep:#B88C00;     --lilac-deep-rgb:184,140,0;
  --lilac-deeper:#7A5C00;
  --cream:#FAF7FF;
  --cream-2:#E9E4F9;
}

/* HOT — magenta-pink with violet + yellow */
html[data-palette="hot"]{
  --tan:#FF3A99;            --tan-rgb:255,58,153;
  --tan-soft:#FF7F7F;       --tan-tint:#FFD9EA;
  --tan-deep:#C01970;       --tan-deep-rgb:192,25,112;
  --tan-deeper:#8A0D4D;
  --sage:#A259FF;           --sage-rgb:162,89,255;
  --sage-soft:#BA9AFF;      --sage-tint:#E9E4F9;
  --sage-deep:#6B30C2;      --sage-deep-rgb:107,48,194;
  --sage-deeper:#421F7A;
  --peach:#FFC700;          --peach-rgb:255,199,0;
  --peach-soft:#FFE780;     --peach-tint:#FFF8B6;
  --peach-deep:#B88C00;     --peach-deep-rgb:184,140,0;
  --peach-deeper:#7A5C00;
  --lilac:#007AFF;          --lilac-rgb:0,122,255;
  --lilac-soft:#82B6FC;     --lilac-tint:#DBEDFF;
  --lilac-deep:#0050A5;     --lilac-deep-rgb:0,80,165;
  --lilac-deeper:#002D5F;
  --cream:#FFF5FA;
  --cream-2:#FFD9EA;
}

/* CARBON — pure greyscale */
html[data-palette="carbon"]{
  --tan:#5C5B5B;            --tan-rgb:92,91,91;
  --tan-soft:#8C8C8C;       --tan-tint:#F0F0F0;
  --tan-deep:#2A2A2A;       --tan-deep-rgb:42,42,42;
  --tan-deeper:#000A0A;
  --sage:#8C8C8C;           --sage-rgb:140,140,140;
  --sage-soft:#D6D6D6;      --sage-tint:#EAEAEA;
  --sage-deep:#5C5B5B;      --sage-deep-rgb:92,91,91;
  --sage-deeper:#2A2A2A;
  --peach:#7A7A7A;          --peach-rgb:122,122,122;
  --peach-soft:#CFCFCF;     --peach-tint:#E5E5E5;
  --peach-deep:#3F3F3F;     --peach-deep-rgb:63,63,63;
  --peach-deeper:#1A1A1A;
  --lilac:#6F6F6F;          --lilac-rgb:111,111,111;
  --lilac-soft:#C8C8C8;     --lilac-tint:#DEDEDE;
  --lilac-deep:#363636;     --lilac-deep-rgb:54,54,54;
  --lilac-deeper:#161616;
  --cream:#F7F7F7;
  --cream-2:#F0F0F0;
}

/* ===== Palette picker UI ============================== */
.pp{
  position:fixed;
  right:18px;bottom:18px;
  z-index:9999;
  font-family:var(--sans);
}
.pp-toggle{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 14px 9px 10px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  font:inherit;font-size:13px;font-weight:500;
  letter-spacing:-.005em;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.02), 0 18px 36px -14px rgba(var(--ink-rgb),.22);
  transition:transform .25s ease, box-shadow .25s ease;
}
.pp-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.02), 0 22px 44px -14px rgba(var(--ink-rgb),.28);
}
.pp-toggle-swatch{display:inline-flex;align-items:center}
.pp-toggle-swatch > span{
  width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--paper);
  margin-left:-6px;display:block;
}
.pp-toggle-swatch > span:first-child{margin-left:0;background:var(--tan)}
.pp-toggle-swatch > span:nth-child(2){background:var(--sage)}
.pp-toggle-swatch > span:nth-child(3){background:var(--peach)}
.pp-toggle-swatch > span:nth-child(4){background:var(--lilac)}
.pp-toggle-label{font-weight:500}
.pp-toggle-chev{color:var(--ink-2);transition:transform .25s ease}
.pp[data-open="true"] .pp-toggle-chev{transform:rotate(180deg)}

.pp-panel{
  position:absolute;
  right:0;bottom:calc(100% + 8px);
  width:280px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:8px;
  display:flex;flex-direction:column;gap:2px;
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.02), 0 30px 60px -20px rgba(var(--ink-rgb),.28);
  opacity:0;transform:translateY(8px) scale(.97);
  transform-origin:bottom right;
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
  max-height:70vh;overflow:auto;
}
.pp[data-open="true"] .pp-panel{
  opacity:1;transform:translateY(0) scale(1);pointer-events:auto;
}
.pp-eyebrow{
  margin:6px 10px 6px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600;
}
.pp-item{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;gap:10px;
  padding:8px 10px;
  background:transparent;border:0;
  border-radius:9px;
  color:var(--ink);
  font:inherit;font-size:13px;
  letter-spacing:-.005em;cursor:pointer;text-align:left;
}
.pp-item:hover{background:rgba(var(--ink-rgb),.04)}
.pp-item.is-active{background:rgba(var(--ink-rgb),.06)}
.pp-item.is-active .pp-name::after{
  content:" ✓";
  color:var(--tan-deep);
  font-weight:600;
}
.pp-swatch{display:inline-flex;align-items:center}
.pp-swatch > span{
  width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--paper);
  margin-left:-5px;display:block;
  box-shadow:0 0 0 1px rgba(var(--ink-rgb),.06);
}
.pp-swatch > span:first-child{margin-left:0}
.pp-bg{
  width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(0,0,0,.08);
  flex-shrink:0;
  margin-left:2px;
}
.pp-name{font-weight:500}
.pp-tag{
  font-size:10.5px;color:var(--ink-2);
  letter-spacing:.04em;
  background:rgba(var(--ink-rgb),.04);
  padding:2px 8px;border-radius:999px;
  white-space:nowrap;
}

/* honest preview swatches (hard-coded, independent of active palette) */
.pp-swatch[data-swatch="default"] > span:nth-child(1){background:#CF9358}
.pp-swatch[data-swatch="default"] > span:nth-child(2){background:#8FAE85}
.pp-swatch[data-swatch="default"] > span:nth-child(3){background:#E6A98A}
.pp-swatch[data-swatch="default"] > span:nth-child(4){background:#9A86C7}
.pp-bg[data-bg="default"]{background:#FAF9F5}

.pp-swatch[data-swatch="red"] > span:nth-child(1){background:#FC3229}
.pp-swatch[data-swatch="red"] > span:nth-child(2){background:#10A958}
.pp-swatch[data-swatch="red"] > span:nth-child(3){background:#FF8866}
.pp-swatch[data-swatch="red"] > span:nth-child(4){background:#5C5B5B}
.pp-bg[data-bg="red"]{background:#FFFAFA}

.pp-swatch[data-swatch="coral"] > span:nth-child(1){background:#FF8866}
.pp-swatch[data-swatch="coral"] > span:nth-child(2){background:#10A958}
.pp-swatch[data-swatch="coral"] > span:nth-child(3){background:#FF3A99}
.pp-swatch[data-swatch="coral"] > span:nth-child(4){background:#8C8C8C}
.pp-bg[data-bg="coral"]{background:#FFF7F2}

.pp-swatch[data-swatch="sun"] > span:nth-child(1){background:#FFC700}
.pp-swatch[data-swatch="sun"] > span:nth-child(2){background:#10A958}
.pp-swatch[data-swatch="sun"] > span:nth-child(3){background:#F24D1D}
.pp-swatch[data-swatch="sun"] > span:nth-child(4){background:#5C5B5B}
.pp-bg[data-bg="sun"]{background:#FFFDF0}

.pp-swatch[data-swatch="grass"] > span:nth-child(1){background:#10A958}
.pp-swatch[data-swatch="grass"] > span:nth-child(2){background:#FFC700}
.pp-swatch[data-swatch="grass"] > span:nth-child(3){background:#FF8866}
.pp-swatch[data-swatch="grass"] > span:nth-child(4){background:#007AFF}
.pp-bg[data-bg="grass"]{background:#F6FCF8}

.pp-swatch[data-swatch="sky"] > span:nth-child(1){background:#007AFF}
.pp-swatch[data-swatch="sky"] > span:nth-child(2){background:#10A958}
.pp-swatch[data-swatch="sky"] > span:nth-child(3){background:#FFC700}
.pp-swatch[data-swatch="sky"] > span:nth-child(4){background:#A259FF}
.pp-bg[data-bg="sky"]{background:#F6FAFF}

.pp-swatch[data-swatch="violet"] > span:nth-child(1){background:#A259FF}
.pp-swatch[data-swatch="violet"] > span:nth-child(2){background:#10A958}
.pp-swatch[data-swatch="violet"] > span:nth-child(3){background:#FF3A99}
.pp-swatch[data-swatch="violet"] > span:nth-child(4){background:#FFC700}
.pp-bg[data-bg="violet"]{background:#FAF7FF}

.pp-swatch[data-swatch="hot"] > span:nth-child(1){background:#FF3A99}
.pp-swatch[data-swatch="hot"] > span:nth-child(2){background:#A259FF}
.pp-swatch[data-swatch="hot"] > span:nth-child(3){background:#FFC700}
.pp-swatch[data-swatch="hot"] > span:nth-child(4){background:#007AFF}
.pp-bg[data-bg="hot"]{background:#FFF5FA}

.pp-swatch[data-swatch="carbon"] > span:nth-child(1){background:#5C5B5B}
.pp-swatch[data-swatch="carbon"] > span:nth-child(2){background:#8C8C8C}
.pp-swatch[data-swatch="carbon"] > span:nth-child(3){background:#7A7A7A}
.pp-swatch[data-swatch="carbon"] > span:nth-child(4){background:#6F6F6F}
.pp-bg[data-bg="carbon"]{background:#F7F7F7}

@media (max-width:560px){
  .pp{right:12px;bottom:12px}
  .pp-panel{width:260px}
}

/* Dev palette picker — hide on production lander */
.pp{display:none !important}

/* ===== A/B hero variants ===== */
[data-hv]{display:none}
html.hv-a [data-hv="a"],
html.hv-b [data-hv="b"],
html.hv-c [data-hv="c"]{display:block}

/* ===== Lander mode: paid-traffic focus (strip exit ramps) ===== */
/* Hides nav links, dropdowns, login, mobile menu. Keeps topbar (trust signal) and footer. */
html.lander .nav-links,
html.lander .nav-actions,
html.lander .nav-burger,
html.lander .mobile-nav,
html.lander .mobile-nav-overlay{display:none !important}
html.lander .nav{justify-content:flex-start}

/* Variant B: SaaS-style centered hero with product screenshot */
.hero--saas{text-align:center}
.hero-saas-inner{
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.hero-saas-eyebrow{
  font-size:13px;
  letter-spacing:.08em;
  color:var(--ink-2);
  margin:0;
  font-style:italic;
}
.hero-saas-h1{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(34px,3.4vw,64px);
  line-height:1.08;
  letter-spacing:-.04em;
  margin:0;
  color:var(--ink);
  max-width:22ch;
}
.hero-saas-h1 em{
  color:var(--tan);
  font-style:normal;
  font-weight:inherit;
}
.hero-saas-sub{
  font-size:clamp(16px,1.15vw,20px);
  color:var(--ink-2);
  line-height:1.5;
  margin:0;
  max-width:560px;
}
.hero--saas .cta{margin-top:6px}
.hero-saas-trust{
  font-size:13px;
  color:var(--ink-2);
  margin:8px 0 0;
  opacity:.75;
}
.hero-saas-product{
  margin:clamp(40px,4vw,72px) auto 0;
  max-width:1180px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.18),0 18px 36px -18px rgba(0,0,0,.12);
  background:#fff;
  border:1px solid rgba(20,20,19,.06);
}
.hero-saas-product img{
  display:block;
  width:100%;
  height:auto;
}
@media (max-width:760px){
  .hero-saas-product{border-radius:10px;margin-top:32px}
}

/* CTA row helpers (A and B) */
.hero-aside-ctas{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero-aside-ctas .cta{margin-top:0}
.hero-saas-cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}

/* ===== Variant C: Customer-card hero ===== */
.hero--regulars{
  background:linear-gradient(180deg, var(--tan-tint) 0%, transparent 70%);
}
.hero-regulars-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.hero-regulars-copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.hero-regulars-eyebrow{font-size:13px;font-style:italic;color:var(--ink-2);margin:0}
.hero-regulars-h1{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(34px,3.4vw,64px);
  line-height:1.08;
  letter-spacing:-.04em;
  margin:0;
  color:var(--ink);
  max-width:18ch;
}
.hero-regulars-h1 em{color:var(--tan);font-style:normal;font-weight:inherit}
.hero-regulars-sub{
  font-size:clamp(16px,1.15vw,20px);
  color:var(--ink-2);
  line-height:1.5;
  margin:0;
  max-width:440px;
}
.hero-regulars-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;align-items:center}

.hero-regulars-card{
  background:var(--paper);
  border-radius:20px;
  padding:24px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.18),0 12px 28px -14px rgba(0,0,0,.10);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:18px;
  justify-self:end;
  max-width:440px;
  width:100%;
}
.hrc-head{display:flex;gap:14px;align-items:center}
.hrc-avatar{
  width:48px;height:48px;
  border-radius:50%;
  background:var(--peach-deep);
  color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;
  font-size:15px;
  letter-spacing:.04em;
  flex-shrink:0;
}
.hrc-meta{display:flex;flex-direction:column;gap:2px;flex:1}
.hrc-meta strong{font-size:16px;color:var(--ink);font-weight:600;font-style:normal}
.hrc-meta span{font-size:13px;color:var(--ink-2)}
.hrc-status{
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  padding:4px 10px;
  border-radius:99px;
  background:var(--tan-tint);
  color:var(--tan-deep);
}
.hrc-stats{
  list-style:none;
  padding:14px 0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.hrc-stats li{display:flex;flex-direction:column;gap:2px;text-align:center}
.hrc-stats strong{font-size:22px;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.hrc-stats em{font-size:12px;color:var(--ink-2);font-style:normal;text-transform:lowercase}
.hrc-tags{display:flex;gap:6px;flex-wrap:wrap}
.hrc-tags span{
  font-size:12px;
  padding:4px 10px;
  border-radius:99px;
  background:var(--sage-tint);
  color:var(--sage-deep);
}
.hrc-note{
  font-size:14px;
  line-height:1.5;
  color:var(--ink-2);
  margin:0;
  font-style:italic;
  padding:14px;
  background:var(--cream);
  border-radius:12px;
}
@media (max-width:860px){
  .hero-regulars-grid{grid-template-columns:1fr;gap:32px}
  .hero-regulars-card{justify-self:start;max-width:none}
}