/* /Pages/About.razor.rz.scp.css */
/* ─── Hero ─── */
.ab-hero[b-19p1bdn9uv] {
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 5vw, 4rem);
  background:
    radial-gradient(ellipse 80% 60% at 80% -10%, rgba(132,90,223,.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 110%, rgba(255,127,103,.06), transparent 60%),
    var(--bg);
  position: relative; overflow: hidden;
}
.ab-hero-grid[b-19p1bdn9uv] {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 880px){ .ab-hero-grid[b-19p1bdn9uv] { grid-template-columns: 1fr; } }
.ab-hero h1[b-19p1bdn9uv] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  line-height: .95; letter-spacing: .01em;
  color: var(--jet); text-transform: uppercase;
  margin: 1rem 0 1.25rem;
}
.ab-hero h1 em[b-19p1bdn9uv] { font-style: normal; color: var(--peach); }
.ab-hero h1 .strike[b-19p1bdn9uv] {
  position: relative; display: inline-block;
}
.ab-hero h1 .strike[b-19p1bdn9uv]::after {
  content: ''; position: absolute;
  left: -2%; right: -2%; bottom: 18%; height: 6px;
  background: var(--dusk); border-radius: 4px;
  transform: rotate(-1.5deg);
}
.ab-hero p.lede[b-19p1bdn9uv] {
  font-size: 1.125rem; line-height: 1.6; color: var(--text-secondary);
  max-width: 540px; margin-bottom: 2rem;
}
.ab-hero-meta[b-19p1bdn9uv] {
  display: flex; flex-wrap: wrap; gap: 2rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.ab-hero-meta-item .num[b-19p1bdn9uv] {
  font-family: var(--display); font-weight: 600;
  font-size: 2.4rem; line-height: 1; color: var(--jet);
  display: block;
}
.ab-hero-meta-item .lbl[b-19p1bdn9uv] {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); margin-top: .35rem; display: block;
}

/* Hero collage — visual: a stylized "letter" envelope morphing into a multi-card stack */
.ab-hero-art[b-19p1bdn9uv] {
  position: relative; aspect-ratio: 1 / 1;
  width: 100%; max-width: 480px; margin-left: auto;
}
.ab-art-card[b-19p1bdn9uv] {
  position: absolute; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 1.25rem; overflow: hidden;
}
.ab-art-card.c1[b-19p1bdn9uv] {
  inset: 8% 30% 50% 0;
  background: linear-gradient(135deg, var(--peach-light) 0%, var(--surface) 100%);
  transform: rotate(-4deg);
  display: flex; flex-direction: column; gap: .5rem;
}
.ab-art-card.c1 .stamp[b-19p1bdn9uv] {
  align-self: flex-end;
  width: 38px; height: 46px; border-radius: 4px;
  background:
    repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,127,103,.18) 4px 8px),
    var(--peach-light);
  border: 1.5px dashed var(--peach);
}
.ab-art-card.c1 .lines[b-19p1bdn9uv] { display: flex; flex-direction: column; gap: .35rem; margin-top: auto; }
.ab-art-card.c1 .lines i[b-19p1bdn9uv] { display: block; height: 6px; border-radius: 3px; background: rgba(0,0,0,.08); }
.ab-art-card.c1 .lines i:nth-child(1)[b-19p1bdn9uv]{ width: 70%; }
.ab-art-card.c1 .lines i:nth-child(2)[b-19p1bdn9uv]{ width: 90%; }
.ab-art-card.c1 .lines i:nth-child(3)[b-19p1bdn9uv]{ width: 50%; }
.ab-art-card.c1 .yr[b-19p1bdn9uv] {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--peach);
  background: var(--surface); padding: .25rem .5rem; border-radius: 100px;
  align-self: flex-start; font-weight: 600;
}

.ab-art-card.c2[b-19p1bdn9uv] {
  inset: 30% 8% 22% 28%;
  background: linear-gradient(160deg, var(--dusk-light) 0%, var(--surface) 100%);
  transform: rotate(2deg);
  display: flex; flex-direction: column; gap: .65rem;
}
.ab-art-card.c2 .yr[b-19p1bdn9uv] {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dusk-dark);
  background: var(--surface); padding: .25rem .5rem; border-radius: 100px;
  align-self: flex-start; font-weight: 600;
}
.ab-art-card.c2 h4[b-19p1bdn9uv] {
  font-family: var(--display); font-weight: 600;
  font-size: 1.4rem; letter-spacing: .02em; line-height: 1;
  text-transform: uppercase; color: var(--jet); margin-top: auto;
}
.ab-art-card.c2 .sub[b-19p1bdn9uv] { font-size: .72rem; color: var(--text-secondary); }

.ab-art-card.c3[b-19p1bdn9uv] {
  inset: 58% 0 0 18%;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg2) 100%);
  transform: rotate(-2deg);
  display: grid; grid-template-columns: 1fr auto; gap: .5rem;
  align-content: center;
}
.ab-art-card.c3 .yr[b-19p1bdn9uv] {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--success); font-weight: 600;
}
.ab-art-card.c3 h4[b-19p1bdn9uv] {
  font-family: var(--display); font-weight: 600;
  font-size: 1.6rem; letter-spacing: .02em; line-height: 1;
  text-transform: uppercase; color: var(--jet);
}
.ab-art-card.c3 .badge[b-19p1bdn9uv] {
  background: var(--success); color: #fff;
  font-size: .55rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; padding: .25rem .5rem; border-radius: 100px;
  align-self: center;
}
.ab-art-card.c3 .stack[b-19p1bdn9uv] {
  grid-column: 1 / -1; display: flex; gap: .35rem; margin-top: .5rem;
}
.ab-art-card.c3 .stack i[b-19p1bdn9uv] {
  height: 18px; border-radius: 5px; flex: 1;
}
.ab-art-card.c3 .stack i:nth-child(1)[b-19p1bdn9uv]{ background: var(--dusk); }
.ab-art-card.c3 .stack i:nth-child(2)[b-19p1bdn9uv]{ background: var(--peach); }
.ab-art-card.c3 .stack i:nth-child(3)[b-19p1bdn9uv]{ background: var(--powder); }
.ab-art-card.c3 .stack i:nth-child(4)[b-19p1bdn9uv]{ background: var(--success); }

.ab-art-arrow[b-19p1bdn9uv] {
  position: absolute; pointer-events: none;
  color: var(--text-faint); opacity: .55;
}
.ab-art-arrow.a1[b-19p1bdn9uv] { top: 38%; left: 32%; transform: rotate(20deg); }
.ab-art-arrow.a2[b-19p1bdn9uv] { top: 64%; left: 14%; transform: rotate(50deg); }

/* ─── Story (3 columns: What / Why / How) ─── */
.ab-three[b-19p1bdn9uv] {
  padding: clamp(3rem, 5vw, 5rem) 0;
  background: var(--bg);
}
.ab-three-head[b-19p1bdn9uv] { text-align: center; margin-bottom: 3rem; }
.ab-three-head h2[b-19p1bdn9uv] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  letter-spacing: .015em; line-height: .98; text-transform: uppercase;
  color: var(--jet); margin-bottom: .75rem;
}
.ab-three-head p[b-19p1bdn9uv] { color: var(--text-secondary); font-size: 1.05rem; max-width: 580px; margin: 0 auto; }

.ab-three-grid[b-19p1bdn9uv] {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 880px){ .ab-three-grid[b-19p1bdn9uv] { grid-template-columns: 1fr; } }
.ab-three-card[b-19p1bdn9uv] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px; padding: 2rem 1.75rem;
  display: flex; flex-direction: column; gap: 1rem;
  position: relative; overflow: hidden;
}
.ab-three-card[b-19p1bdn9uv]::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--dusk);
}
.ab-three-card.b[b-19p1bdn9uv]::before { background: var(--peach); }
.ab-three-card.c[b-19p1bdn9uv]::before { background: var(--success); }
.ab-three-num[b-19p1bdn9uv] {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 500;
}
.ab-three-card h3[b-19p1bdn9uv] {
  font-family: var(--display); font-weight: 600;
  font-size: 2rem; letter-spacing: .02em; line-height: 1;
  text-transform: uppercase; color: var(--jet);
}
.ab-three-card p[b-19p1bdn9uv] { color: var(--text-secondary); font-size: .95rem; line-height: 1.6; }

/* ─── Timeline ─── */
.ab-timeline[b-19p1bdn9uv] {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  position: relative;
}
.ab-tl-head[b-19p1bdn9uv] { text-align: center; margin-bottom: 3.5rem; }
.ab-tl-head h2[b-19p1bdn9uv] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  letter-spacing: .015em; line-height: .98; text-transform: uppercase;
  color: var(--jet); margin-bottom: .75rem;
}
.ab-tl-head h2 em[b-19p1bdn9uv] { font-style: normal; color: var(--dusk); }
.ab-tl-head p[b-19p1bdn9uv] { color: var(--text-secondary); font-size: 1.05rem; max-width: 600px; margin: 0 auto; }

.ab-tl[b-19p1bdn9uv] {
  position: relative; padding: 2rem 0;
  max-width: 920px; margin: 0 auto;
}
.ab-tl[b-19p1bdn9uv]::before {
  content: ''; position: absolute;
  left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--peach) 0%, var(--dusk) 50%, var(--success) 100%);
  transform: translateX(-50%);
}
@media (max-width: 760px){ .ab-tl[b-19p1bdn9uv]::before { left: 24px; } }

.ab-tl-item[b-19p1bdn9uv] {
  position: relative; display: grid;
  grid-template-columns: 1fr 100px 1fr;
  gap: 1.5rem; margin-bottom: 2.5rem;
  align-items: center;
}
.ab-tl-item:last-child[b-19p1bdn9uv] { margin-bottom: 0; }
@media (max-width: 760px){
  .ab-tl-item[b-19p1bdn9uv] { grid-template-columns: 48px 1fr; gap: 1rem; }
}

.ab-tl-card[b-19p1bdn9uv] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.ab-tl-card:hover[b-19p1bdn9uv] { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--dusk-border); }
.ab-tl-card .eyebrow[b-19p1bdn9uv] {
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 500;
  margin-bottom: .35rem;
}
.ab-tl-card h3[b-19p1bdn9uv] {
  font-family: var(--display); font-weight: 600;
  font-size: 1.7rem; letter-spacing: .02em; line-height: 1;
  text-transform: uppercase; color: var(--jet); margin-bottom: .65rem;
}
.ab-tl-card p[b-19p1bdn9uv] { color: var(--text-secondary); font-size: .92rem; line-height: 1.6; }
.ab-tl-card.peach .eyebrow[b-19p1bdn9uv] { color: var(--peach); }
.ab-tl-card.dusk  .eyebrow[b-19p1bdn9uv] { color: var(--dusk-dark); }
.ab-tl-card.success .eyebrow[b-19p1bdn9uv] { color: var(--success); }

.ab-tl-year[b-19p1bdn9uv] {
  font-family: var(--display); font-weight: 600;
  font-size: 2.2rem; letter-spacing: .02em; line-height: 1;
  color: var(--jet); text-align: center;
  background: var(--surface); border: 2px solid var(--peach);
  border-radius: 100px; padding: .5rem .25rem;
  position: relative; z-index: 2;
  width: 100px;
}
.ab-tl-item:nth-child(2) .ab-tl-year[b-19p1bdn9uv] { border-color: var(--dusk); }
.ab-tl-item:nth-child(3) .ab-tl-year[b-19p1bdn9uv] { border-color: var(--success); }
@media (max-width: 760px){
  .ab-tl-year[b-19p1bdn9uv] { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; font-size: 1rem; }
}

.ab-tl-item.left .ab-tl-card[b-19p1bdn9uv] { grid-column: 1; text-align: right; }
.ab-tl-item.left .ab-tl-year[b-19p1bdn9uv] { grid-column: 2; }
.ab-tl-item.left .ab-tl-spacer[b-19p1bdn9uv] { grid-column: 3; }

.ab-tl-item.right .ab-tl-spacer[b-19p1bdn9uv] { grid-column: 1; }
.ab-tl-item.right .ab-tl-year[b-19p1bdn9uv] { grid-column: 2; }
.ab-tl-item.right .ab-tl-card[b-19p1bdn9uv] { grid-column: 3; }

@media (max-width: 760px){
  .ab-tl-item.left .ab-tl-card[b-19p1bdn9uv],
  .ab-tl-item.right .ab-tl-card[b-19p1bdn9uv] { grid-column: 2; text-align: left; }
  .ab-tl-item .ab-tl-year[b-19p1bdn9uv] { grid-column: 1; }
  .ab-tl-item .ab-tl-spacer[b-19p1bdn9uv] { display: none; }
}

/* ─── Principles ─── */
.ab-principles[b-19p1bdn9uv] {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--bg);
}
.ab-pr-head[b-19p1bdn9uv] { text-align: center; margin-bottom: 3rem; max-width: 640px; margin-left: auto; margin-right: auto; }
.ab-pr-head h2[b-19p1bdn9uv] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  letter-spacing: .015em; line-height: .98; text-transform: uppercase;
  color: var(--jet); margin-bottom: .75rem;
}
.ab-pr-head h2 em[b-19p1bdn9uv] { font-style: normal; color: var(--peach); }
.ab-pr-head p[b-19p1bdn9uv] { color: var(--text-secondary); font-size: 1.05rem; }

.ab-pr-grid[b-19p1bdn9uv] {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 760px){ .ab-pr-grid[b-19p1bdn9uv] { grid-template-columns: 1fr; } }
.ab-pr[b-19p1bdn9uv] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.75rem;
  display: grid; grid-template-columns: 60px 1fr; gap: 1.25rem;
  align-items: start;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ab-pr:hover[b-19p1bdn9uv] { border-color: var(--dusk-border); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ab-pr-num[b-19p1bdn9uv] {
  font-family: var(--display); font-weight: 600;
  font-size: 3rem; line-height: .9; letter-spacing: .02em;
  color: var(--dusk);
}
.ab-pr h3[b-19p1bdn9uv] {
  font-size: 1.05rem; font-weight: 600; color: var(--jet);
  margin-bottom: .5rem;
}
.ab-pr p[b-19p1bdn9uv] { color: var(--text-secondary); font-size: .9rem; line-height: 1.6; }
.ab-pr:nth-child(2) .ab-pr-num[b-19p1bdn9uv] { color: var(--peach); }
.ab-pr:nth-child(3) .ab-pr-num[b-19p1bdn9uv] { color: var(--success); }
.ab-pr:nth-child(4) .ab-pr-num[b-19p1bdn9uv] { color: var(--powder-dark); }
.ab-pr:nth-child(5) .ab-pr-num[b-19p1bdn9uv] { color: var(--jet); }

.ab-pr.last[b-19p1bdn9uv] { grid-column: 1 / -1; }

/* ─── Self-funded callout ─── */
.ab-funded[b-19p1bdn9uv] {
  padding: clamp(3rem, 5vw, 4rem) 0;
  background: var(--jet);
  color: #fff;
}
.ab-funded-grid[b-19p1bdn9uv] {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 880px){ .ab-funded-grid[b-19p1bdn9uv] { grid-template-columns: 1fr; } }
.ab-funded h2[b-19p1bdn9uv] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing: .015em; line-height: .98; text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.ab-funded h2 em[b-19p1bdn9uv] { font-style: normal; color: var(--peach); }
.ab-funded p[b-19p1bdn9uv] {
  color: rgba(255,255,255,.7); font-size: 1.05rem; line-height: 1.65;
  margin-bottom: 1.25rem;
}
.ab-funded p:last-child[b-19p1bdn9uv] { margin-bottom: 0; }
.ab-funded-stats[b-19p1bdn9uv] {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.ab-funded-stat[b-19p1bdn9uv] {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 1.5rem;
}
.ab-funded-stat .num[b-19p1bdn9uv] {
  font-family: var(--display); font-weight: 600;
  font-size: 2.8rem; line-height: 1; letter-spacing: .02em;
  color: #fff; display: block; margin-bottom: .35rem;
}
.ab-funded-stat .lbl[b-19p1bdn9uv] {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.ab-funded-stat .desc[b-19p1bdn9uv] {
  font-size: .82rem; color: rgba(255,255,255,.6);
  line-height: 1.5; margin-top: .65rem;
}
.ab-funded-stat.feat[b-19p1bdn9uv] {
  background: linear-gradient(160deg, rgba(132,90,223,.25) 0%, rgba(132,90,223,.08) 100%);
  border-color: rgba(132,90,223,.4);
  grid-column: 1 / -1;
}

/* ─── CTA ─── */
.ab-cta[b-19p1bdn9uv] {
  padding: clamp(3rem, 5vw, 4rem) 0;
  background: var(--bg);
  text-align: center;
}
.ab-cta-card[b-19p1bdn9uv] {
  background: linear-gradient(160deg, var(--dusk-light) 0%, var(--surface) 60%, var(--peach-light) 200%);
  border: 1px solid var(--dusk-border);
  border-radius: 28px;
  padding: clamp(2.5rem, 5vw, 4rem);
  max-width: 820px; margin: 0 auto;
}
.ab-cta h2[b-19p1bdn9uv] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing: .015em; line-height: .98; text-transform: uppercase;
  color: var(--jet); margin-bottom: 1rem;
}
.ab-cta p[b-19p1bdn9uv] { color: var(--text-secondary); font-size: 1.05rem; max-width: 540px; margin: 0 auto 1.75rem; line-height: 1.55; }
.ab-cta .btns[b-19p1bdn9uv] { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
/* /Pages/Analytics.razor.rz.scp.css */
/* Analytics Hero */
.an-hero[b-i863olngyw] {
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
  background: var(--bg); position: relative; overflow: hidden;
}
.an-hero[b-i863olngyw]::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(38,191,148,.14), transparent 60%),
    radial-gradient(ellipse 70% 60% at 90% 30%, rgba(132,90,223,.1), transparent 60%);
}
.an-hero .wrap[b-i863olngyw] { position: relative; z-index: 1; text-align: center; }
.an-hero h1[b-i863olngyw] { font-family: var(--display); font-weight: 600; font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.02; letter-spacing: -.03em; color: var(--jet); margin: 1rem auto 1rem; max-width: 860px; }
.an-hero h1 em[b-i863olngyw] { font-style: normal; color: var(--success); }
.an-hero .lead[b-i863olngyw] { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.6; max-width: 580px; margin: 0 auto 1.5rem; }
.an-hero .actions[b-i863olngyw] { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; }

/* Dashboard mockup */
.dash[b-i863olngyw] { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-xl); max-width: 1100px; margin: 0 auto; text-align: left; }
.dash-top[b-i863olngyw] { padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; background: var(--bg2); flex-wrap: wrap; gap: .75rem; }
.dash-title[b-i863olngyw] { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; color: var(--jet); }
.dash-filters[b-i863olngyw] { display: flex; gap: .35rem; flex-wrap: wrap; }
.dash-filters span[b-i863olngyw] { font-family: var(--mono); font-size: .7rem; padding: .3rem .6rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); color: var(--text-secondary); }
.dash-filters span.on[b-i863olngyw] { background: var(--jet); color: #fff; border-color: var(--jet); }
.dash-kpis[b-i863olngyw] { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
@media (max-width: 700px) { .dash-kpis[b-i863olngyw] { grid-template-columns: repeat(2, 1fr); } }
.kpi[b-i863olngyw] { padding: 1.1rem 1.25rem; border-right: 1px solid var(--line); }
.kpi:last-child[b-i863olngyw] { border-right: none; }
.kpi .l[b-i863olngyw] { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.kpi .v[b-i863olngyw] { font-family: var(--display); font-size: 1.85rem; font-weight: 600; color: var(--jet); letter-spacing: -.02em; margin-top: .3rem; }
.kpi .d[b-i863olngyw] { font-size: .78rem; font-weight: 600; margin-top: .1rem; color: var(--success); }
.kpi .d.down[b-i863olngyw] { color: var(--peach); }
.kpi .spark[b-i863olngyw] { margin-top: .5rem; display: flex; align-items: flex-end; gap: 2px; height: 22px; }
.kpi .spark i[b-i863olngyw] { flex: 1; background: var(--dusk-light); border-radius: 1px; }
.kpi .spark i.hi[b-i863olngyw] { background: var(--dusk); }
.dash-body[b-i863olngyw] { display: grid; grid-template-columns: 1.5fr 1fr; }
@media (max-width: 900px) { .dash-body[b-i863olngyw] { grid-template-columns: 1fr; } }
.d-chart[b-i863olngyw] { padding: 1.25rem; border-right: 1px solid var(--line); }
.d-chart h4[b-i863olngyw], .d-side h4[b-i863olngyw] { font-family: var(--display); font-size: 1rem; font-weight: 600; color: var(--jet); margin-bottom: 1rem; letter-spacing: -.02em; }
.d-legend[b-i863olngyw] { display: flex; gap: 1rem; font-size: .75rem; color: var(--text-secondary); margin-bottom: 1rem; }
.d-legend i[b-i863olngyw] { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: middle; }
.d-side[b-i863olngyw] { padding: 1.25rem; }
.top-list li[b-i863olngyw] { list-style: none; display: grid; grid-template-columns: 1.5rem 1fr auto auto; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.top-list li:last-child[b-i863olngyw] { border-bottom: none; }
.top-list .r[b-i863olngyw] { font-family: var(--mono); font-size: .72rem; color: var(--text-faint); }
.top-list .t[b-i863olngyw] { color: var(--jet); font-weight: 500; }
.top-list .t .sub[b-i863olngyw] { display: block; font-size: .72rem; color: var(--text-secondary); font-weight: 400; margin-top: 1px; }
.top-list .m[b-i863olngyw] { font-family: var(--mono); font-size: .78rem; color: var(--text-secondary); }
.top-list .b[b-i863olngyw] { color: var(--success); font-weight: 600; font-size: .78rem; }
.top-list .b.down[b-i863olngyw] { color: var(--peach); }
.funnel[b-i863olngyw] { padding: 1.5rem 1.25rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; background: var(--bg); }
@media (max-width: 700px) { .funnel[b-i863olngyw] { grid-template-columns: repeat(2, 1fr); } }
.fn-step[b-i863olngyw] { padding: .75rem 1rem; border-right: 1px dashed var(--line); }
.fn-step:last-child[b-i863olngyw] { border-right: none; }
.fn-step .n[b-i863olngyw] { font-family: var(--mono); font-size: .62rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .1em; }
.fn-step .v[b-i863olngyw] { font-family: var(--display); font-size: 1.4rem; font-weight: 600; color: var(--jet); letter-spacing: -.02em; margin: .15rem 0; }
.fn-step .p[b-i863olngyw] { font-size: .72rem; color: var(--text-secondary); }
.fn-bar[b-i863olngyw] { height: 4px; border-radius: 2px; background: var(--bg2); margin-top: .5rem; overflow: hidden; }
.fn-bar i[b-i863olngyw] { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--dusk), var(--powder)); }

/* Features strip */
.an-features[b-i863olngyw] { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--bg2); }
.f-head[b-i863olngyw] { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 3rem; }
@media (max-width: 720px) { .f-head[b-i863olngyw] { grid-template-columns: 1fr; } }
.f-grid[b-i863olngyw] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 960px) { .f-grid[b-i863olngyw] { grid-template-columns: 1fr; } }
.f-card[b-i863olngyw] { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; transition: transform .2s, box-shadow .2s; }
.f-card:hover[b-i863olngyw] { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.f-card .icn[b-i863olngyw] { width: 38px; height: 38px; border-radius: 10px; background: rgba(38,191,148,.12); color: var(--success); display: grid; place-items: center; }
.f-card.b .icn[b-i863olngyw] { background: var(--dusk-light); color: var(--dusk); }
.f-card.c .icn[b-i863olngyw] { background: var(--peach-light); color: var(--peach); }
.f-card h4[b-i863olngyw] { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; color: var(--jet); }
.f-card p[b-i863olngyw] { font-size: .92rem; color: var(--text-secondary); line-height: 1.55; }

/* Attribution */
.attribution[b-i863olngyw] { padding: clamp(4rem, 7vw, 6rem) 0; }
.att-grid[b-i863olngyw] { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .att-grid[b-i863olngyw] { grid-template-columns: 1fr; } }
.donut-card[b-i863olngyw] { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 2rem; box-shadow: var(--shadow-md); }
.donut-wrap[b-i863olngyw] { display: grid; grid-template-columns: 180px 1fr; gap: 1.75rem; align-items: center; }
@media (max-width: 520px) { .donut-wrap[b-i863olngyw] { grid-template-columns: 1fr; text-align: center; } }
.donut-legend[b-i863olngyw] { display: flex; flex-direction: column; gap: .55rem; }
.dl-row[b-i863olngyw] { display: grid; grid-template-columns: 14px 1fr auto; gap: .7rem; align-items: center; font-size: .88rem; }
.dl-row i[b-i863olngyw] { width: 12px; height: 12px; border-radius: 3px; }
.dl-row .lbl[b-i863olngyw] { color: var(--jet); }
.dl-row .amt[b-i863olngyw] { font-family: var(--mono); color: var(--text-secondary); font-size: .82rem; }

/* CTA */
.mini-cta[b-i863olngyw] { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--jet); color: #fff; text-align: center; position: relative; overflow: hidden; }
.mini-cta[b-i863olngyw]::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(38,191,148,.28), transparent 60%); }
.mini-cta .wrap[b-i863olngyw] { position: relative; z-index: 1; }
.mini-cta h2[b-i863olngyw] { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -.02em; margin-bottom: 1rem; }
.mini-cta .actions[b-i863olngyw] { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
/* /Pages/Careers.razor.rz.scp.css */
  /* ─── HERO ─── */
  .cr-hero[b-stan6zid5g] {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
    position: relative; overflow: hidden;
    background:
      radial-gradient(ellipse 55% 60% at 82% 0%, rgba(132,90,223,.14), transparent 60%),
      radial-gradient(ellipse 50% 60% at 8% 10%, rgba(230,83,60,.08), transparent 60%),
      var(--bg);
  }
  .cr-hero .wrap[b-stan6zid5g] { position: relative; z-index: 1; }
  .cr-hero h1[b-stan6zid5g] {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(2.4rem, 5vw, 4.25rem);
    line-height: .98; letter-spacing: .01em; color: var(--jet);
    text-transform: uppercase; margin: 1rem 0 1.1rem; max-width: 14ch;
  }
  .cr-hero h1 em[b-stan6zid5g] { font-style: normal; color: var(--dusk); }
  .cr-hero .lede[b-stan6zid5g] { font-size: 1.12rem; line-height: 1.6; color: var(--text-secondary); max-width: 540px; }
  .cr-hero .hero-stats[b-stan6zid5g] { display: flex; flex-wrap: wrap; gap: 2.25rem; margin-top: 2rem; }
  .cr-hero .hs[b-stan6zid5g] { display: flex; flex-direction: column; gap: .15rem; }
  .cr-hero .hs .v[b-stan6zid5g] { font-family: var(--display); font-weight: 600; font-size: 1.9rem; color: var(--jet); letter-spacing: -.01em; }
  .cr-hero .hs .l[b-stan6zid5g] { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }

  /* ─── Values ─── */
  .cr-values[b-stan6zid5g] { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--surface); }
  .cr-head[b-stan6zid5g] { max-width: 640px; margin: 0 auto 2.5rem; text-align: center; }
  .cr-head p[b-stan6zid5g] { margin: 1rem auto 0; }
  .val-grid[b-stan6zid5g] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  @media (max-width: 860px) { .val-grid[b-stan6zid5g] { grid-template-columns: 1fr; } }
  .val[b-stan6zid5g] {
    background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
    padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .55rem;
  }
  .val .ic[b-stan6zid5g] { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--dusk-light); color: var(--dusk); margin-bottom: .35rem; }
  .val .ic svg[b-stan6zid5g] { width: 21px; height: 21px; }
  .val.v2 .ic[b-stan6zid5g] { background: var(--peach-light); color: var(--peach); }
  .val.v3 .ic[b-stan6zid5g] { background: rgba(38,191,148,.12); color: var(--success); }
  .val h4[b-stan6zid5g] { font-family: var(--display); font-weight: 600; font-size: 1.22rem; letter-spacing: -.01em; color: var(--jet); }
  .val p[b-stan6zid5g] { color: var(--text-secondary); font-size: .92rem; line-height: 1.6; }

  /* ─── Open roles ─── */
  .cr-roles[b-stan6zid5g] { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--bg); }
  .role-list[b-stan6zid5g] { display: flex; flex-direction: column; gap: .8rem; max-width: 880px; margin: 0 auto; }
  .role[b-stan6zid5g] {
    display: grid; grid-template-columns: 1fr auto auto; gap: 1.25rem; align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 1.2rem 1.4rem; text-decoration: none; color: inherit;
    transition: transform .18s, box-shadow .18s, border-color .18s;
  }
  .role:hover[b-stan6zid5g] { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--dusk-border); }
  .role .r-l[b-stan6zid5g] { display: flex; flex-direction: column; gap: .25rem; }
  .role .r-title[b-stan6zid5g] { font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--jet); letter-spacing: -.01em; }
  .role .r-meta[b-stan6zid5g] { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--text-faint); text-transform: uppercase; }
  .role .r-team[b-stan6zid5g] { font-size: .8rem; font-weight: 600; color: var(--text-secondary); background: var(--bg2); padding: .35rem .7rem; border-radius: 100px; white-space: nowrap; }
  .role .r-go[b-stan6zid5g] { width: 34px; height: 34px; border-radius: 50%; background: var(--dusk-light); color: var(--dusk); display: grid; place-items: center; flex-shrink: 0; transition: background .18s, transform .18s; }
  .role .r-go svg[b-stan6zid5g] { width: 16px; height: 16px; }
  .role:hover .r-go[b-stan6zid5g] { background: var(--dusk); color: #fff; transform: translateX(2px); }
  @media (max-width: 620px) {
    .role[b-stan6zid5g] { grid-template-columns: 1fr auto; }
    .role .r-team[b-stan6zid5g] { display: none; }
  }

  /* ─── Outreach form ─── */
  .cr-apply[b-stan6zid5g] { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6rem); background: var(--surface); }
  .apply-grid[b-stan6zid5g] { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; max-width: 1020px; margin: 0 auto; }
  @media (max-width: 880px) { .apply-grid[b-stan6zid5g] { grid-template-columns: 1fr; } }
  .apply-intro h2[b-stan6zid5g] {
    font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 3.5vw, 2.8rem);
    line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--jet); margin-bottom: 1rem;
  }
  .apply-intro h2 em[b-stan6zid5g] { font-style: normal; color: var(--dusk); }
  .apply-intro p[b-stan6zid5g] { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.65; margin-bottom: 1.5rem; }
  .apply-bullets[b-stan6zid5g] { display: flex; flex-direction: column; gap: .85rem; }
  .apply-bullets li[b-stan6zid5g] { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--text-primary); line-height: 1.5; }
  .apply-bullets .tick[b-stan6zid5g] { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--dusk-light); color: var(--dusk); display: grid; place-items: center; }
  .apply-bullets .tick svg[b-stan6zid5g] { width: 13px; height: 13px; }

  /* form shell + fields (matches contact form language) */
  .apply-card[b-stan6zid5g] {
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-md);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    --accent: var(--dusk); --accent-soft: var(--dusk-light); --accent-dark: var(--dusk-dark);
  }
  .apply-card .eyebrow-tag[b-stan6zid5g] { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dusk); font-weight: 600; }
  .apply-card h3[b-stan6zid5g] { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em; color: var(--jet); margin: .35rem 0 1.4rem; }
  .ct-fields[b-stan6zid5g] { display: flex; flex-direction: column; gap: 1.1rem; }
  .fld[b-stan6zid5g] { display: flex; flex-direction: column; gap: .4rem; }
  .fld label[b-stan6zid5g] { font-size: .82rem; font-weight: 600; color: var(--jet); display: flex; align-items: center; gap: .4rem; }
  .fld .req[b-stan6zid5g] { color: var(--peach); }
  .fld .hint[b-stan6zid5g] { font-weight: 400; color: var(--text-faint); font-size: .76rem; font-family: var(--mono); }
  .fld .in-wrap[b-stan6zid5g] { position: relative; display: flex; align-items: center; }
  .fld .in-ic[b-stan6zid5g] { position: absolute; left: .85rem; width: 17px; height: 17px; color: var(--text-faint); pointer-events: none; }
  .fld .has-ic input[b-stan6zid5g] { padding-left: 2.5rem; }
  .fld input[b-stan6zid5g], .fld select[b-stan6zid5g], .fld textarea[b-stan6zid5g] {
    width: 100%; font-family: var(--body); font-size: .95rem; color: var(--jet);
    background: var(--surface); border: 1.5px solid var(--line2); border-radius: 11px;
    padding: .72rem .9rem; outline: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
  }
  .fld textarea[b-stan6zid5g] { resize: vertical; min-height: 96px; line-height: 1.5; }
  .fld input[b-stan6zid5g]::placeholder, .fld textarea[b-stan6zid5g]::placeholder { color: var(--text-faint); }
  .fld input:focus[b-stan6zid5g], .fld select:focus[b-stan6zid5g], .fld textarea:focus[b-stan6zid5g] {
    border-color: var(--accent); background: var(--bg);
    box-shadow: 0 0 0 4px var(--accent-soft);
  }
  .fld select[b-stan6zid5g] { appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%236b6f78' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.2rem;
  }
  .fld-row[b-stan6zid5g] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  @media (max-width: 560px) { .fld-row[b-stan6zid5g] { grid-template-columns: 1fr; } }
  .fld.err input[b-stan6zid5g], .fld.err select[b-stan6zid5g] { border-color: var(--peach); box-shadow: 0 0 0 4px var(--peach-light); }
  .fld .err-msg[b-stan6zid5g] { display: none; font-size: .76rem; color: var(--peach-dark); font-weight: 500; }
  .fld.err .err-msg[b-stan6zid5g] { display: block; }
  .apply-submit[b-stan6zid5g] { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .apply-submit .note[b-stan6zid5g] { font-family: var(--mono); font-size: .7rem; color: var(--text-faint); }
  .btn.btn-block[b-stan6zid5g] { width: 100%; justify-content: center; }

  /* success state */
  .apply-done[b-stan6zid5g] { display: none; text-align: center; padding: 1.5rem 1rem 1rem; }
  .apply-done.show[b-stan6zid5g] { display: block; }
  .apply-form.hide[b-stan6zid5g] { display: none; }
  .apply-done .ok[b-stan6zid5g] { width: 60px; height: 60px; border-radius: 50%; background: rgba(38,191,148,.14); color: var(--success); display: grid; place-items: center; margin: 0 auto 1.1rem; }
  .apply-done .ok svg[b-stan6zid5g] { width: 30px; height: 30px; }
  .apply-done h3[b-stan6zid5g] { font-family: var(--display); font-weight: 600; font-size: 1.55rem; color: var(--jet); margin-bottom: .5rem; }
  .apply-done p[b-stan6zid5g] { color: var(--text-secondary); font-size: .95rem; line-height: 1.6; max-width: 380px; margin: 0 auto 1.25rem; }
  .apply-done .recap[b-stan6zid5g] { font-family: var(--mono); font-size: .76rem; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; display: inline-flex; flex-direction: column; gap: .35rem; text-align: left; }
  .apply-done .recap span b[b-stan6zid5g] { color: var(--jet); }
/* /Pages/CaseStudies.razor.rz.scp.css */
/* ═════════ CASE STUDIES ═════════ */

/* ─── Hero ─── */
.cs-hero[b-ug6k4fqshr] {
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  background:
    radial-gradient(ellipse 70% 55% at 85% -5%, rgba(35,183,229,.12), transparent 60%),
    radial-gradient(ellipse 55% 55% at 0% 60%, rgba(132,90,223,.12), transparent 60%),
    var(--bg);
  position: relative; overflow: hidden;
}
.cs-hero[b-ug6k4fqshr]::before {
  content:''; position:absolute; inset:0; z-index:0;
  background-image: radial-gradient(circle, rgba(132,90,223,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 55% 25%, #000 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 55% 25%, #000 35%, transparent 85%);
}
.cs-hero .wrap[b-ug6k4fqshr] { position: relative; z-index: 1; }
.cs-hero-grid[b-ug6k4fqshr] { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 920px){ .cs-hero-grid[b-ug6k4fqshr] { grid-template-columns: 1fr; } }
.cs-hero h1[b-ug6k4fqshr] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(3rem, 7vw, 6rem); line-height: .95; letter-spacing: .01em;
  color: var(--jet); text-transform: uppercase; margin: 1rem 0 1.25rem;
}
.cs-hero h1 em[b-ug6k4fqshr] { font-style: normal; color: var(--dusk); }
.cs-hero p.lede[b-ug6k4fqshr] { font-size: 1.15rem; line-height: 1.6; color: var(--text-secondary); max-width: 540px; margin-bottom: 1.25rem; }
.cs-hero .note[b-ug6k4fqshr] {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; line-height: 1.5;
  color: var(--text-faint); max-width: 460px; margin-bottom: 2rem;
  padding-left: .9rem; border-left: 2px solid var(--line2);
}
.cs-hero-ctas[b-ug6k4fqshr] { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Hero snapshot card */
.cs-snap[b-ug6k4fqshr] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 1.5rem 1.6rem; box-shadow: var(--shadow-md);
  position: relative;
}
.cs-snap-head[b-ug6k4fqshr] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.cs-snap-head .t[b-ug6k4fqshr] { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.cs-snap-head .who[b-ug6k4fqshr] {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  background: var(--dusk-light); color: var(--dusk); padding: .25rem .6rem; border-radius: 100px;
}
.cs-bars[b-ug6k4fqshr] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; height: 150px; margin-bottom: 1rem; }
.cs-bar[b-ug6k4fqshr] { display: flex; flex-direction: column; align-items: center; gap: .5rem; height: 100%; justify-content: flex-end; }
.cs-bar .col[b-ug6k4fqshr] { width: 64px; border-radius: 10px 10px 0 0; position: relative; }
.cs-bar.before .col[b-ug6k4fqshr] { background: var(--bg3); }
.cs-bar.after .col[b-ug6k4fqshr] { background: linear-gradient(180deg, var(--success), #1F9E78); }
.cs-bar .val[b-ug6k4fqshr] { font-family: var(--display); font-size: 1.9rem; line-height: 1; letter-spacing: .02em; color: var(--jet); }
.cs-bar.after .val[b-ug6k4fqshr] { color: var(--success); }
.cs-bar .lbl[b-ug6k4fqshr] { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.cs-snap-foot[b-ug6k4fqshr] {
  display: flex; align-items: center; gap: .6rem;
  border-top: 1px solid var(--line); padding-top: 1rem;
  font-size: .82rem; color: var(--text-secondary);
}
.cs-snap-foot .chip[b-ug6k4fqshr] {
  font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  background: var(--peach-light); color: var(--peach); padding: .25rem .55rem; border-radius: 8px;
}
.cs-snap-float[b-ug6k4fqshr] {
  position: absolute; top: -16px; right: -14px;
  background: var(--jet); color: #fff; border-radius: 14px;
  padding: .7rem .9rem; box-shadow: var(--shadow-lg);
  transform: rotate(3deg);
}
.cs-snap-float .n[b-ug6k4fqshr] { font-family: var(--display); font-size: 1.5rem; line-height: 1; letter-spacing: .02em; }
.cs-snap-float .s[b-ug6k4fqshr] { font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
@media (max-width: 920px){ .cs-snap-float[b-ug6k4fqshr] { right: 8px; } }

/* ─── Section heads ─── */
.cs-head[b-ug6k4fqshr] { text-align: center; max-width: 660px; margin: 0 auto 3rem; }
.cs-head h2[b-ug6k4fqshr] { font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: .015em; line-height: .98; text-transform: uppercase; color: var(--jet); margin: 1rem 0 .75rem; }
.cs-head h2 em[b-ug6k4fqshr] { font-style: normal; color: var(--dusk); }
.cs-head p[b-ug6k4fqshr] { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6; }

/* ─── Featured case study ─── */
.cs-featured[b-ug6k4fqshr] { padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2rem); background: var(--bg); }
.cs-feat-card[b-ug6k4fqshr] {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: 1.15fr 1fr;
}
@media (max-width: 920px){ .cs-feat-card[b-ug6k4fqshr] { grid-template-columns: 1fr; } }
.cs-feat-body[b-ug6k4fqshr] { padding: clamp(1.75rem, 3.5vw, 2.75rem); }
.cs-feat-tag[b-ug6k4fqshr] {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  color: var(--peach); margin-bottom: 1rem;
}
.cs-feat-tag[b-ug6k4fqshr]::before { content:''; width: 22px; height: 1px; background: var(--peach); }
.cs-feat-body h3[b-ug6k4fqshr] { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: .02em; line-height: 1; text-transform: uppercase; color: var(--jet); margin-bottom: 1.25rem; }
.cs-block[b-ug6k4fqshr] { margin-bottom: 1.25rem; }
.cs-block .k[b-ug6k4fqshr] { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; display: block; margin-bottom: .35rem; }
.cs-block p[b-ug6k4fqshr] { color: var(--text-secondary); font-size: .96rem; line-height: 1.6; }
.cs-block.play p[b-ug6k4fqshr] { color: var(--text-primary); }
.cs-quote[b-ug6k4fqshr] {
  border-left: 3px solid var(--dusk); padding: .25rem 0 .25rem 1rem; margin: 1.5rem 0 1.25rem;
}
.cs-quote p[b-ug6k4fqshr] { font-size: 1.05rem; line-height: 1.5; color: var(--jet); font-weight: 500; font-style: italic; }
.cs-quote .by[b-ug6k4fqshr] { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-top: .6rem; display: block; }

.cs-feat-side[b-ug6k4fqshr] {
  background: linear-gradient(165deg, var(--bg2) 0%, var(--surface) 100%);
  border-left: 1px solid var(--line);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1.25rem; justify-content: center;
}
@media (max-width: 920px){ .cs-feat-side[b-ug6k4fqshr] { border-left: none; border-top: 1px solid var(--line); } }
.cs-feat-side .side-h[b-ug6k4fqshr] { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.cs-metric[b-ug6k4fqshr] {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.1rem 1.25rem; display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center;
}
.cs-metric .m-l .big[b-ug6k4fqshr] { font-family: var(--display); font-size: 2.4rem; line-height: 1; letter-spacing: .02em; color: var(--success); }
.cs-metric .m-l .lbl[b-ug6k4fqshr] { font-size: .8rem; color: var(--text-secondary); margin-top: .2rem; }
.cs-metric .m-trend[b-ug6k4fqshr] { font-family: var(--mono); font-size: .68rem; font-weight: 700; color: var(--success); background: rgba(38,191,148,.12); padding: .3rem .55rem; border-radius: 8px; white-space: nowrap; }
.cs-metric.b .m-l .big[b-ug6k4fqshr] { color: var(--dusk); }
.cs-metric.b .m-trend[b-ug6k4fqshr] { color: var(--dusk); background: var(--dusk-light); }
.cs-metric.c .m-l .big[b-ug6k4fqshr] { color: var(--peach); }
.cs-metric.c .m-trend[b-ug6k4fqshr] { color: var(--peach); background: var(--peach-light); }

/* ─── Scenario grid ─── */
.cs-grid-sec[b-ug6k4fqshr] { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem); background: var(--bg); }
.cs-grid[b-ug6k4fqshr] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 920px){ .cs-grid[b-ug6k4fqshr] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .cs-grid[b-ug6k4fqshr] { grid-template-columns: 1fr; } }
.cs-card[b-ug6k4fqshr] {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 1.75rem 1.6rem; display: flex; flex-direction: column; gap: .85rem;
  position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.cs-card:hover[b-ug6k4fqshr] { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--dusk-border); }
.cs-card[b-ug6k4fqshr]::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: var(--dusk); }
.cs-card.c2[b-ug6k4fqshr]::before { background: var(--powder); }
.cs-card.c3[b-ug6k4fqshr]::before { background: var(--success); }
.cs-card.c4[b-ug6k4fqshr]::before { background: var(--peach); }
.cs-card.c5[b-ug6k4fqshr]::before { background: var(--warning); }
.cs-card-top[b-ug6k4fqshr] { display: flex; align-items: center; gap: .7rem; }
.cs-card-ic[b-ug6k4fqshr] { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--dusk-light); color: var(--dusk); flex-shrink: 0; }
.cs-card.c2 .cs-card-ic[b-ug6k4fqshr] { background: var(--powder-light); color: var(--powder-dark); }
.cs-card.c3 .cs-card-ic[b-ug6k4fqshr] { background: rgba(38,191,148,.12); color: var(--success); }
.cs-card.c4 .cs-card-ic[b-ug6k4fqshr] { background: var(--peach-light); color: var(--peach); }
.cs-card.c5 .cs-card-ic[b-ug6k4fqshr] { background: rgba(245,184,73,.16); color: #C8901F; }
.cs-card-kind[b-ug6k4fqshr] { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.cs-card h4[b-ug6k4fqshr] { font-family: var(--display); font-weight: 600; font-size: 1.55rem; letter-spacing: .02em; line-height: 1; text-transform: uppercase; color: var(--jet); }
.cs-card .desc[b-ug6k4fqshr] { color: var(--text-secondary); font-size: .9rem; line-height: 1.55; }
.cs-card .desc strong[b-ug6k4fqshr] { color: var(--text-primary); font-weight: 600; }
.cs-chips[b-ug6k4fqshr] { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .35rem; }
.cs-chip[b-ug6k4fqshr] {
  font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .02em;
  background: var(--bg2); color: var(--jet); padding: .35rem .55rem; border-radius: 8px;
  display: inline-flex; align-items: center; gap: .35rem;
}
.cs-chip b[b-ug6k4fqshr] { color: var(--success); font-weight: 700; }
.cs-card .by[b-ug6k4fqshr] { font-family: var(--mono); font-size: .64rem; letter-spacing: .04em; color: var(--text-faint); border-top: 1px dashed var(--line); padding-top: .75rem; }

/* "Your turn" CTA card in the grid */
.cs-card.cta[b-ug6k4fqshr] {
  background: linear-gradient(165deg, var(--dusk) 0%, var(--dusk-dark) 100%);
  border-color: transparent; color: #fff; justify-content: center; gap: 1rem;
}
.cs-card.cta[b-ug6k4fqshr]::before { display: none; }
.cs-card.cta h4[b-ug6k4fqshr] { color: #fff; font-size: 2rem; }
.cs-card.cta p[b-ug6k4fqshr] { color: rgba(255,255,255,.8); font-size: .92rem; line-height: 1.55; }
.cs-card.cta .btn[b-ug6k4fqshr] { align-self: flex-start; }

/* ─── Plays section ─── */
.cs-plays[b-ug6k4fqshr] { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--bg2); }
.cs-plays-grid[b-ug6k4fqshr] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 880px){ .cs-plays-grid[b-ug6k4fqshr] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .cs-plays-grid[b-ug6k4fqshr] { grid-template-columns: 1fr; } }
.cs-play[b-ug6k4fqshr] {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 1.5rem 1.35rem; display: flex; flex-direction: column; gap: .6rem;
}
.cs-play .pnum[b-ug6k4fqshr] { font-family: var(--display); font-size: 1.6rem; letter-spacing: .02em; color: var(--dusk); line-height: 1; }
.cs-play:nth-child(2) .pnum[b-ug6k4fqshr] { color: var(--powder-dark); }
.cs-play:nth-child(3) .pnum[b-ug6k4fqshr] { color: var(--success); }
.cs-play:nth-child(4) .pnum[b-ug6k4fqshr] { color: var(--peach); }
.cs-play h5[b-ug6k4fqshr] { font-size: 1rem; font-weight: 700; color: var(--jet); }
.cs-play p[b-ug6k4fqshr] { font-size: .85rem; color: var(--text-secondary); line-height: 1.5; }
.cs-play a[b-ug6k4fqshr] { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--dusk); text-decoration: none; margin-top: auto; }
.cs-play a:hover[b-ug6k4fqshr] { text-decoration: underline; }

/* ─── Disclaimer band ─── */
.cs-disclaim[b-ug6k4fqshr] { padding: clamp(2rem, 4vw, 3rem) 0; background: var(--bg); }
.cs-disclaim-card[b-ug6k4fqshr] {
  max-width: 880px; margin: 0 auto;
  background: var(--surface); border: 1px dashed var(--line2); border-radius: 18px;
  padding: 1.5rem 1.75rem; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
}
@media (max-width: 600px){ .cs-disclaim-card[b-ug6k4fqshr] { grid-template-columns: 1fr; } }
.cs-disclaim-ic[b-ug6k4fqshr] { width: 40px; height: 40px; border-radius: 11px; background: var(--bg2); color: var(--text-secondary); display: grid; place-items: center; }
.cs-disclaim-card h4[b-ug6k4fqshr] { font-size: .95rem; font-weight: 700; color: var(--jet); margin-bottom: .35rem; }
.cs-disclaim-card p[b-ug6k4fqshr] { font-size: .85rem; color: var(--text-secondary); line-height: 1.6; }

/* ─── CTA ─── */
.cs-cta[b-ug6k4fqshr] { padding: clamp(3rem, 5vw, 4.5rem) 0; background: var(--bg); text-align: center; }
.cs-cta-card[b-ug6k4fqshr] {
  background: linear-gradient(160deg, var(--dusk-light) 0%, var(--surface) 55%, var(--powder-light) 200%);
  border: 1px solid var(--dusk-border); border-radius: 28px;
  padding: clamp(2.5rem, 5vw, 4rem); max-width: 820px; margin: 0 auto;
}
.cs-cta h2[b-ug6k4fqshr] { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: .015em; line-height: .98; text-transform: uppercase; color: var(--jet); margin-bottom: 1rem; }
.cs-cta p[b-ug6k4fqshr] { color: var(--text-secondary); font-size: 1.05rem; max-width: 540px; margin: 0 auto 1.75rem; line-height: 1.55; }
.cs-cta .btns[b-ug6k4fqshr] { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
/* /Pages/Contact.razor.rz.scp.css */
/* Styles relocated directly into Contact.razor style block to bypass Blazor scoped CSS isolation issues. */
/* /Pages/Features/ABTesting.razor.rz.scp.css */
/* ── PAGE HERO (asymmetric, product-forward) ── */
.pg-hero[b-8ss13n5mrp] {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4rem);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 60%, var(--bg2) 100%);
  position: relative; overflow: hidden;
}
.pg-hero[b-8ss13n5mrp]::before {
  content:''; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(to right, rgba(132,90,223,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(132,90,223,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 60% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 30%, #000 30%, transparent 80%);
}
.pg-hero .wrap[b-8ss13n5mrp] { position: relative; z-index: 1; }
.pg-hero-grid[b-8ss13n5mrp] { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: center; }

@media (max-width: 960px) {
  .pg-hero-grid[b-8ss13n5mrp] { grid-template-columns: 1fr; }
}

.pg-hero h1[b-8ss13n5mrp] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.02; letter-spacing: -.03em; color: var(--jet);
  margin: 1rem 0 1rem;
}
.pg-hero h1 em[b-8ss13n5mrp] { font-style: normal; color: var(--dusk); }
.pg-hero p.lead[b-8ss13n5mrp] { color: var(--text-secondary); font-size: 1.08rem; line-height: 1.6; max-width: 520px; margin-bottom: 1.5rem; }

/* ── A/B Test wizard (hero visual ── mirrors product UI) ── */
.va[b-8ss13n5mrp] { --acc: var(--dusk); --acc-light: var(--dusk-light); --acc-border: var(--dusk-border); --acc-dark: var(--dusk-dark); }
.vb[b-8ss13n5mrp] { --acc: var(--success); --acc-light: rgba(38,191,148,.12); --acc-border: rgba(38,191,148,.34); --acc-dark: #15937A; }

.abw[b-8ss13n5mrp] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-xl);
}
.abw-bar[b-8ss13n5mrp] {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--bg2);
}
.abw-bar .t[b-8ss13n5mrp] { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.abw-bar .t .b[b-8ss13n5mrp] { width: 26px; height: 26px; border-radius: 7px; background: var(--dusk); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: .9rem; flex-shrink: 0; }
.abw-bar .t .ttl[b-8ss13n5mrp] { font-size: .82rem; font-weight: 700; color: var(--jet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abw-bar .draft[b-8ss13n5mrp] { flex-shrink: 0; font-size: .68rem; font-weight: 600; color: var(--text-secondary); border: 1px solid var(--line2); border-radius: 8px; padding: .3rem .55rem; display: inline-flex; align-items: center; gap: .35rem; }
.abw-bar .draft svg[b-8ss13n5mrp] { width: 12px; height: 12px; }

/* stepper */
.abw-steps[b-8ss13n5mrp] { display: flex; align-items: center; gap: .35rem; padding: .85rem 1.1rem; background: var(--bg2); border-bottom: 1px solid var(--line); }
.abw-steps .st[b-8ss13n5mrp] { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.abw-steps .sc[b-8ss13n5mrp] { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: var(--mono); font-size: .72rem; font-weight: 600; border: 1.5px solid var(--line2); color: var(--text-faint); background: var(--surface); }
.abw-steps .st.done .sc[b-8ss13n5mrp] { background: var(--dusk); border-color: var(--dusk); color: #fff; }
.abw-steps .st.active .sc[b-8ss13n5mrp] { background: var(--dusk); border-color: var(--dusk); color: #fff; box-shadow: 0 0 0 4px var(--dusk-light); }
.abw-steps .sl[b-8ss13n5mrp] { font-size: .68rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.abw-steps .st.active .sl[b-8ss13n5mrp] { color: var(--dusk); }
.abw-steps .sl .sub[b-8ss13n5mrp] { display: block; font-family: var(--mono); font-size: .56rem; font-weight: 500; color: var(--text-faint); }
.abw-steps .line[b-8ss13n5mrp] { flex: 1; height: 1.5px; background: var(--line2); min-width: 8px; }

@media (max-width: 1180px) {
  .abw-steps .sl[b-8ss13n5mrp] { display: none; }
  .abw-steps .line[b-8ss13n5mrp] { min-width: 14px; }
}

.abw-body[b-8ss13n5mrp] { padding: 1.1rem; background: var(--bg2); }
.abw-h[b-8ss13n5mrp] { font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; color: var(--jet); }
.abw-sub[b-8ss13n5mrp] { font-size: .76rem; color: var(--text-faint); margin-bottom: 1rem; }

.cfg-field[b-8ss13n5mrp] { margin-bottom: 1rem; }
.cfg-label[b-8ss13n5mrp] { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--jet); margin-bottom: .45rem; }
.cfg-label .q[b-8ss13n5mrp] { width: 14px; height: 14px; border-radius: 50%; background: var(--bg3); color: var(--text-faint); display: grid; place-items: center; font-size: .58rem; font-family: var(--mono); cursor: help; }
.aud-input[b-8ss13n5mrp] { position: relative; }
.aud-input input[b-8ss13n5mrp] { width: 100%; font-family: var(--body); font-size: 1rem; font-weight: 600; color: var(--jet); background: var(--surface); border: 1.5px solid var(--line2); border-radius: 10px; padding: .65rem .9rem; padding-right: 2.5rem; }
.aud-input .pct[b-8ss13n5mrp] { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-weight: 600; font-size: .95rem; pointer-events: none; }
.aud-range[b-8ss13n5mrp] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 6px; margin-top: .7rem; cursor: pointer;
  background: linear-gradient(90deg, var(--dusk) var(--p,20%), var(--bg3) var(--p,20%)); }
.aud-range[b-8ss13n5mrp]::-webkit-slider-thumb { -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); border: 3px solid var(--dusk); cursor: pointer; box-shadow: var(--shadow-sm); }
.aud-range[b-8ss13n5mrp]::-moz-range-thumb { width: 17px; height: 17px; border-radius: 50%; background: var(--surface); border: 3px solid var(--dusk); cursor: pointer; }
.aud-help[b-8ss13n5mrp] { font-family: var(--mono); font-size: .68rem; color: var(--text-faint); margin-top: .55rem; }
.aud-help b[b-8ss13n5mrp] { color: var(--jet); font-weight: 600; }

/* split */
.split-row[b-8ss13n5mrp] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .55rem; }
.split-card[b-8ss13n5mrp] { border: 1.5px solid var(--acc-border); background: var(--acc-light); border-radius: 11px; padding: .7rem .75rem; }
.split-card .sc-head[b-8ss13n5mrp] { display: flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; color: var(--acc); margin-bottom: .5rem; }
.split-card .sc-head .d[b-8ss13n5mrp] { width: 8px; height: 8px; border-radius: 3px; background: var(--acc); }
.split-card .sc-val[b-8ss13n5mrp] { display: flex; align-items: baseline; gap: .15rem; }
.split-card .sc-val .n[b-8ss13n5mrp] { font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--jet); letter-spacing: -.02em; }
.split-card .sc-val .u[b-8ss13n5mrp] { font-size: .8rem; color: var(--text-faint); font-weight: 600; }
.split-card .sc-rec[b-8ss13n5mrp] { font-family: var(--mono); font-size: .62rem; color: var(--text-faint); margin-top: .25rem; }
.split-vs[b-8ss13n5mrp] { font-family: var(--mono); font-size: .68rem; font-weight: 700; color: var(--text-faint); background: var(--surface); border: 1px solid var(--line2); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }

/* winning metric */
.cfg-box[b-8ss13n5mrp] { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: .85rem .9rem; }
.cfg-box .cb-head[b-8ss13n5mrp] { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 700; color: var(--jet); }
.cfg-box .cb-head svg[b-8ss13n5mrp] { width: 16px; height: 16px; color: var(--dusk); }
.cfg-box .cb-sub[b-8ss13n5mrp] { font-size: .72rem; color: var(--text-faint); margin: .2rem 0 .7rem; }
.metric-opts[b-8ss13n5mrp] { display: flex; gap: 1.25rem; }
.mopt[b-8ss13n5mrp] { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--text-secondary); }
.mopt .radio[b-8ss13n5mrp] { width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--line2); display: grid; place-items: center; transition: border-color .15s; }
.mopt .radio[b-8ss13n5mrp]::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dusk); transform: scale(0); transition: transform .15s; }
.mopt.on[b-8ss13n5mrp] { color: var(--jet); }
.mopt.on .radio[b-8ss13n5mrp] { border-color: var(--dusk); }
.mopt.on .radio[b-8ss13n5mrp]::after { transform: scale(1); }

.cfg-select[b-8ss13n5mrp] { position: relative; }
.cfg-select select[b-8ss13n5mrp] { width: 100%; appearance: none; -webkit-appearance: none; font-family: var(--body); font-size: .88rem; font-weight: 500; color: var(--jet); background: var(--surface); border: 1.5px solid var(--line2); border-radius: 10px; padding: .65rem .9rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%236b6f78' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; }

.abw-info[b-8ss13n5mrp] { display: flex; align-items: flex-start; gap: .6rem; background: var(--dusk-light); border: 1px solid var(--dusk-border); border-radius: 12px; padding: .8rem .9rem; margin-top: 1rem; }
.abw-info svg[b-8ss13n5mrp] { width: 16px; height: 16px; color: var(--dusk); flex-shrink: 0; margin-top: 1px; }
.abw-info .it[b-8ss13n5mrp] { font-size: .78rem; color: var(--text-primary); line-height: 1.45; }
.abw-info .it b[b-8ss13n5mrp] { color: var(--jet); font-weight: 700; }
.abw-info .it .em[b-8ss13n5mrp] { color: var(--dusk); font-weight: 600; }

/* stat strip under hero card */
.exp-strip[b-8ss13n5mrp] { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; margin-top: 1.5rem; }
.exp-stat[b-8ss13n5mrp] { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .85rem .9rem; }
.exp-stat .v[b-8ss13n5mrp] { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; color: var(--jet); }
.exp-stat .l[b-8ss13n5mrp] { font-size: .72rem; color: var(--text-secondary); margin-top: .15rem; }

/* ── EMAIL VARIANTS (full-width product showcase) ── */
.vars[b-8ss13n5mrp] { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--bg2); }
.vars-head[b-8ss13n5mrp] { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.25rem; flex-wrap: wrap; }
.vars-head .swap[b-8ss13n5mrp] { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--body); font-size: .82rem; font-weight: 600; color: var(--dusk); background: var(--dusk-light); border: 1px solid var(--dusk-border); border-radius: 10px; padding: .6rem .9rem; cursor: pointer; transition: background .18s; }
.vars-head .swap:hover[b-8ss13n5mrp] { background: #e9e1fb; }
.vars-head .swap svg[b-8ss13n5mrp] { width: 15px; height: 15px; }
.vars-grid[b-8ss13n5mrp] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 1rem; }

@media (max-width: 880px) {
  .vars-grid[b-8ss13n5mrp] { grid-template-columns: 1fr; }
}

.vcard[b-8ss13n5mrp] { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.vcard-head[b-8ss13n5mrp] { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; background: var(--acc-light); border-bottom: 1px solid var(--acc-border); }
.vcard-head .badge[b-8ss13n5mrp] { width: 28px; height: 28px; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 1rem; flex-shrink: 0; }
.vcard-head .name[b-8ss13n5mrp] { font-weight: 700; font-size: .92rem; color: var(--jet); }
.vcard-head .edit[b-8ss13n5mrp] { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 600; color: var(--acc); background: var(--surface); border: 1px solid var(--acc-border); border-radius: 8px; padding: .35rem .6rem; cursor: pointer; }
.vcard-head .edit svg[b-8ss13n5mrp] { width: 12px; height: 12px; }
.vcard-body[b-8ss13n5mrp] { padding: 1.1rem; display: flex; flex-direction: column; gap: .9rem; flex: 1; }
.vfield .vf-label[b-8ss13n5mrp] { font-size: .76rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .35rem; }
.vfield .vf-input[b-8ss13n5mrp] { position: relative; }
.vfield .vf-input .box[b-8ss13n5mrp] { font-size: .88rem; color: var(--jet); background: var(--bg); border: 1.5px solid var(--line2); border-radius: 10px; padding: .65rem .9rem; padding-right: 2.3rem; line-height: 1.4; }
.vfield .vf-input.plain .box[b-8ss13n5mrp] { padding-right: .9rem; }
.vfield .vf-input .ai[b-8ss13n5mrp] { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); color: var(--acc); }
.vfield .vf-input .ai svg[b-8ss13n5mrp] { width: 15px; height: 15px; }

/* mini email preview */
.email-prev[b-8ss13n5mrp] { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); margin-top: .15rem; }
.ep-nav[b-8ss13n5mrp] { display: flex; align-items: center; gap: .5rem; padding: .7rem .85rem; border-bottom: 1px solid var(--line); }
.ep-nav .brand[b-8ss13n5mrp] { display: flex; align-items: center; gap: .35rem; font-family: var(--display); font-size: .95rem; letter-spacing: .02em; color: var(--jet); }
.ep-nav .brand .logo[b-8ss13n5mrp] { width: 16px; height: 16px; color: var(--acc); }
.ep-nav .links[b-8ss13n5mrp] { margin-left: auto; display: flex; gap: .6rem; font-size: .6rem; color: var(--text-faint); }
.ep-body[b-8ss13n5mrp] { display: grid; grid-template-columns: 1.1fr .9fr; gap: .5rem; padding: 1rem .85rem; align-items: center; }
.ep-copy[b-8ss13n5mrp] { display: flex; flex-direction: column; }
.ep-copy .kicker[b-8ss13n5mrp] { font-family: var(--display); font-size: 1.3rem; line-height: .9; color: var(--acc); letter-spacing: -.01em; }
.ep-copy .head[b-8ss13n5mrp] { font-family: var(--display); font-size: 1.3rem; line-height: .92; color: var(--jet); letter-spacing: -.01em; margin-bottom: .4rem; }
.ep-copy .txt[b-8ss13n5mrp] { font-size: .64rem; color: var(--text-secondary); line-height: 1.4; margin-bottom: .6rem; }
.ep-copy .cta[b-8ss13n5mrp] { display: inline-block; font-size: .64rem; font-weight: 700; color: #fff; background: var(--acc); border-radius: 6px; padding: .4rem .7rem; align-self: flex-start; text-align: center; }
.ep-art[b-8ss13n5mrp] { aspect-ratio: 1; border-radius: 10px; background: radial-gradient(circle at 50% 40%, var(--acc-light), var(--bg2)); border: 1px solid var(--acc-border); display: grid; place-items: center; color: var(--acc); }
.ep-art svg[b-8ss13n5mrp] { width: 38px; height: 38px; }
.vcard-foot[b-8ss13n5mrp] { padding: .85rem 1.1rem 1.1rem; }
.vcard-foot .prev-btn[b-8ss13n5mrp] { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--text-secondary); background: var(--bg); border: 1px solid var(--line2); border-radius: 10px; padding: .6rem; cursor: pointer; }
.vcard-foot .prev-btn svg[b-8ss13n5mrp] { width: 14px; height: 14px; }
.vars-vs[b-8ss13n5mrp] { display: grid; place-items: center; }
.vars-vs .chip[b-8ss13n5mrp] { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line2); display: grid; place-items: center; font-family: var(--mono); font-size: .74rem; font-weight: 700; color: var(--text-secondary); box-shadow: var(--shadow-sm); }

@media (max-width: 880px) {
  .vars-vs .chip[b-8ss13n5mrp] { transform: rotate(0); }
}

/* ── WHAT YOU CAN TEST (grid) ── */
.tests[b-8ss13n5mrp] { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--surface); }
.tests-head[b-8ss13n5mrp] { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 3rem; }

@media (max-width: 720px) {
  .tests-head[b-8ss13n5mrp] { grid-template-columns: 1fr; }
}

.tests-grid[b-8ss13n5mrp] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }

@media (max-width: 960px) {
  .tests-grid[b-8ss13n5mrp] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tests-grid[b-8ss13n5mrp] { grid-template-columns: 1fr; }
}

.tcard[b-8ss13n5mrp] {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem; display: flex; flex-direction: column; gap: .55rem;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tcard:hover[b-8ss13n5mrp] { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--dusk-border); }
.tcard .t-ic[b-8ss13n5mrp] { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--dusk-light); color: var(--dusk); margin-bottom: .3rem; }
.tcard.peach .t-ic[b-8ss13n5mrp] { background: var(--peach-light); color: var(--peach); }
.tcard.powder .t-ic[b-8ss13n5mrp] { background: var(--powder-light); color: var(--powder-dark); }
.tcard.success .t-ic[b-8ss13n5mrp] { background: rgba(38,191,148,.12); color: var(--success); }
.tcard.warning .t-ic[b-8ss13n5mrp] { background: rgba(245,184,73,.14); color: #C98A12; }
.tcard .t-ic svg[b-8ss13n5mrp] { width: 22px; height: 22px; }
.tcard h4[b-8ss13n5mrp] { font-family: var(--display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; color: var(--jet); }
.tcard p[b-8ss13n5mrp] { font-size: .9rem; color: var(--text-secondary); line-height: 1.55; }

/* ── HOW IT WORKS (3 steps) ── */
.how[b-8ss13n5mrp] { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--bg2); }
.how-head[b-8ss13n5mrp] { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.how-grid[b-8ss13n5mrp] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; position: relative; }

@media (max-width: 880px) {
  .how-grid[b-8ss13n5mrp] { grid-template-columns: 1fr; }
}

.step[b-8ss13n5mrp] {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 1.6rem 1.5rem; position: relative; overflow: hidden;
}
.step .s-num[b-8ss13n5mrp] { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dusk); margin-bottom: .9rem; display: flex; align-items: center; gap: .5rem; }
.step .s-num .dot[b-8ss13n5mrp] { width: 22px; height: 22px; border-radius: 7px; background: var(--dusk); color: #fff; display: grid; place-items: center; font-weight: 600; }
.step h4[b-8ss13n5mrp] { font-family: var(--display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; color: var(--jet); margin-bottom: .4rem; }
.step p[b-8ss13n5mrp] { font-size: .92rem; color: var(--text-secondary); line-height: 1.55; }
.step .s-viz[b-8ss13n5mrp] { margin-top: 1.25rem; }

/* step 1: split traffic donut */
.split[b-8ss13n5mrp] { display: flex; align-items: center; gap: 1rem; }
.split .ring[b-8ss13n5mrp] { width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--dusk) 0 50%, var(--success) 50% 100%); position: relative; }
.split .ring[b-8ss13n5mrp]::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--surface); }
.split .leg[b-8ss13n5mrp] { display: flex; flex-direction: column; gap: .4rem; font-size: .78rem; }
.split .leg .li[b-8ss13n5mrp] { display: flex; align-items: center; gap: .45rem; color: var(--text-primary); }
.split .leg .sw[b-8ss13n5mrp] { width: 11px; height: 11px; border-radius: 3px; }

/* step 2: measure bars */
.meas[b-8ss13n5mrp] { display: flex; flex-direction: column; gap: .5rem; }
.meas .mr[b-8ss13n5mrp] { display: grid; grid-template-columns: 18px 1fr 40px; gap: .5rem; align-items: center; font-family: var(--mono); font-size: .68rem; color: var(--text-secondary); }
.meas .mt[b-8ss13n5mrp] { height: 7px; background: var(--bg3); border-radius: 5px; overflow: hidden; }
.meas .mf[b-8ss13n5mrp] { height: 100%; border-radius: 5px; }

/* step 3: promote */
.promo[b-8ss13n5mrp] { background: var(--bg); border: 1px solid rgba(38,191,148,.3); border-radius: 12px; padding: .85rem .95rem; display: flex; align-items: center; gap: .75rem; }
.promo .trophy[b-8ss13n5mrp] { width: 38px; height: 38px; border-radius: 10px; background: rgba(38,191,148,.12); color: var(--success); display: grid; place-items: center; flex-shrink: 0; }
.promo .ptxt[b-8ss13n5mrp] { font-size: .8rem; color: var(--jet); line-height: 1.4; }
.promo .ptxt b[b-8ss13n5mrp] { font-weight: 700; }
.promo .ptxt .sub[b-8ss13n5mrp] { font-family: var(--mono); font-size: .64rem; color: var(--text-faint); }

/* ── RIGOR (two tiles) ── */
.rigor[b-8ss13n5mrp] { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--surface); }
.rigor-grid[b-8ss13n5mrp] { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

@media (max-width: 900px) {
  .rigor-grid[b-8ss13n5mrp] { grid-template-columns: 1fr; }
}

.rtile[b-8ss13n5mrp] { background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 2rem 1.8rem; }
.rtile h3[b-8ss13n5mrp] { font-family: var(--display); font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; color: var(--jet); margin-top: .85rem; margin-bottom: .5rem; }
.rtile p[b-8ss13n5mrp] { font-size: .96rem; color: var(--text-secondary); line-height: 1.6; }

/* significance viz */
.sig-viz[b-8ss13n5mrp] { margin-top: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem; }
.bell[b-8ss13n5mrp] { position: relative; height: 90px; }
.bell svg[b-8ss13n5mrp] { width: 100%; height: 100%; overflow: visible; }
.sig-legend[b-8ss13n5mrp] { display: flex; justify-content: space-between; margin-top: .65rem; font-family: var(--mono); font-size: .66rem; }
.sig-legend .a[b-8ss13n5mrp] { color: var(--dusk); } .sig-legend .b[b-8ss13n5mrp] { color: var(--success); }
.sig-stat[b-8ss13n5mrp] { display: flex; gap: 1.25rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--line); }
.sig-stat .si .n[b-8ss13n5mrp] { font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--jet); letter-spacing: -.02em; }
.sig-stat .si .k[b-8ss13n5mrp] { font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }

/* auto rules viz */
.rule-viz[b-8ss13n5mrp] { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .55rem; }
.rule[b-8ss13n5mrp] {
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
  padding: .7rem .85rem; display: flex; align-items: center; gap: .65rem; font-size: .82rem; color: var(--jet);
}
.rule .rc[b-8ss13n5mrp] { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; }
.rule .rc svg[b-8ss13n5mrp] { width: 14px; height: 14px; }
.rule .mono[b-8ss13n5mrp] { font-family: var(--mono); font-size: .72rem; color: var(--text-secondary); }
.rule .pill[b-8ss13n5mrp] { margin-left: auto; font-family: var(--mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; padding: .18rem .45rem; border-radius: 5px; }

/* ── CTA ── */
.mini-cta[b-8ss13n5mrp] { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--jet); color: #fff; text-align: center; position: relative; overflow: hidden; }
.mini-cta[b-8ss13n5mrp]::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(132,90,223,.3), transparent 60%); }
.mini-cta .wrap[b-8ss13n5mrp] { position: relative; z-index: 1; }
.mini-cta h2[b-8ss13n5mrp] { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -.02em; margin-bottom: 1rem; }
.mini-cta .actions[b-8ss13n5mrp] { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

@keyframes pulse-b-8ss13n5mrp {
  0% { transform: scale(1); }
  50% { transform: scale(0.985); }
  100% { transform: scale(1); }
}
.pulse[b-8ss13n5mrp] {
  animation: pulse-b-8ss13n5mrp 0.32s ease-out;
}

/* /Pages/Features/AutoTriggers.razor.rz.scp.css */
/* ─── HERO ─── */
.pg-hero[b-boh2fz9xgf] {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4rem);
  background: var(--jet); color: #fff; position: relative; overflow: hidden;
}
.pg-hero[b-boh2fz9xgf]::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 85% 0%, rgba(230,83,60,.24), transparent 60%),
    radial-gradient(ellipse 50% 50% at 8% 100%, rgba(245,184,73,.16), transparent 60%);
}
.pg-hero[b-boh2fz9xgf]::after {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 60% at 60% 40%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 60% 40%, #000 30%, transparent 90%);
}
.pg-hero .wrap[b-boh2fz9xgf] { position: relative; z-index: 1; }
.pg-hero-grid[b-boh2fz9xgf] { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: center; }
@media (max-width: 960px) { .pg-hero-grid[b-boh2fz9xgf] { grid-template-columns: 1fr; } }
.pg-hero .chip[b-boh2fz9xgf] { background: rgba(230,83,60,.16); color: #FF8B73; border-color: rgba(230,83,60,.35); }
.pg-hero h1[b-boh2fz9xgf] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.02; letter-spacing: -.03em; color: #fff;
  margin: 1rem 0 1rem;
}
.pg-hero h1 em[b-boh2fz9xgf] { font-style: normal; background: linear-gradient(100deg, var(--peach), #F5B849); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-hero p.lead[b-boh2fz9xgf] { color: rgba(255,255,255,.7); font-size: 1.08rem; line-height: 1.6; max-width: 500px; margin-bottom: 1.5rem; }
.pg-hero .btn-outline[b-boh2fz9xgf] { color: #fff; border-color: rgba(255,255,255,.25); }
.pg-hero .btn-outline:hover[b-boh2fz9xgf] { border-color: #fff; background: rgba(255,255,255,.06); }

/* ─── Hero visual: live event → action feed ─── */
.at-stage[b-boh2fz9xgf] {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 1.1rem 1.1rem 1.25rem;
  box-shadow: var(--shadow-xl);
}
.at-stage-head[b-boh2fz9xgf] {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.at-stage-head .nm[b-boh2fz9xgf] { font-size: .88rem; font-weight: 600; color: #fff; }
.at-stage-head .sb[b-boh2fz9xgf] { font-family: var(--mono); font-size: .68rem; color: rgba(255,255,255,.4); margin-top: .15rem; }
.at-live[b-boh2fz9xgf] { font-family: var(--mono); font-size: .64rem; color: var(--peach); background: rgba(230,83,60,.14); padding: .25rem .55rem; border-radius: 100px; text-transform: uppercase; letter-spacing: .08em; display: inline-flex; align-items: center; gap: .4rem; }
.at-live .ping[b-boh2fz9xgf] { width: 6px; height: 6px; border-radius: 50%; background: var(--peach); box-shadow: 0 0 0 0 rgba(230,83,60,.6); animation: atping-b-boh2fz9xgf 1.8s ease-out infinite; }
@keyframes atping-b-boh2fz9xgf { 0%{box-shadow:0 0 0 0 rgba(230,83,60,.55);} 70%{box-shadow:0 0 0 7px rgba(230,83,60,0);} 100%{box-shadow:0 0 0 0 rgba(230,83,60,0);} }

.at-evt[b-boh2fz9xgf] {
  display: grid; grid-template-columns: auto 1fr auto; gap: .85rem; align-items: center;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px; padding: .7rem .85rem; margin-bottom: .7rem;
  opacity: 0; transform: translateY(8px); animation: atrise-b-boh2fz9xgf .5s ease forwards;
}
.at-evt:nth-child(2)[b-boh2fz9xgf] { animation-delay: .15s; }
.at-evt:nth-child(3)[b-boh2fz9xgf] { animation-delay: .45s; }
@media (prefers-reduced-motion: reduce) { .at-evt[b-boh2fz9xgf] { opacity:1; transform:none; animation:none; } }
@keyframes atrise-b-boh2fz9xgf { to { opacity:1; transform: translateY(0); } }
.at-evt .ic[b-boh2fz9xgf] {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(35,183,229,.16); color: var(--powder); flex-shrink: 0;
}
.at-evt .ic svg[b-boh2fz9xgf] { width: 18px; height: 18px; }
.at-evt.click .ic[b-boh2fz9xgf] { background: rgba(132,90,223,.18); color: #B79CF0; }
.at-evt .ev-kind[b-boh2fz9xgf] { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.at-evt .ev-main[b-boh2fz9xgf] { font-size: .9rem; font-weight: 600; color: #fff; margin-top: .1rem; }
.at-evt .ev-who[b-boh2fz9xgf] { font-family: var(--mono); font-size: .66rem; color: rgba(255,255,255,.4); }

.at-arrow[b-boh2fz9xgf] { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem 1.1rem; color: rgba(255,255,255,.35); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.at-arrow[b-boh2fz9xgf]::before { content:''; width: 14px; height: 1px; background: rgba(255,255,255,.2); }

.at-act[b-boh2fz9xgf] {
  display: flex; align-items: center; gap: .65rem;
  background: linear-gradient(100deg, rgba(230,83,60,.16), rgba(245,184,73,.10));
  border: 1px solid rgba(230,83,60,.3);
  border-radius: 12px; padding: .65rem .85rem; color: #fff;
}
.at-act .fire[b-boh2fz9xgf] { width: 28px; height: 28px; border-radius: 8px; background: var(--peach); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.at-act .fire svg[b-boh2fz9xgf] { width: 15px; height: 15px; }
.at-act .ac-t[b-boh2fz9xgf] { font-size: .86rem; font-weight: 600; }
.at-act .ac-tag[b-boh2fz9xgf] { font-family: var(--mono); font-size: .62rem; color: #F5B849; }
.at-act .ms[b-boh2fz9xgf] { margin-left: auto; font-family: var(--mono); font-size: .62rem; color: rgba(255,255,255,.45); white-space: nowrap; }

/* stats strip */
.at-strip[b-boh2fz9xgf] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 640px) { .at-strip[b-boh2fz9xgf] { grid-template-columns: repeat(2, 1fr); } }
.at-st[b-boh2fz9xgf] { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: .8rem .9rem; }
.at-st .v[b-boh2fz9xgf] { font-family: var(--display); font-weight: 600; font-size: 1.45rem; color: #fff; letter-spacing: -.02em; }
.at-st .l[b-boh2fz9xgf] { font-size: .74rem; color: rgba(255,255,255,.5); }

/* ─── Events section ─── */
.at-events[b-boh2fz9xgf] { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--surface); }
.at-head[b-boh2fz9xgf] { text-align: center; max-width: 680px; margin: 0 auto 3rem; }
.at-head p[b-boh2fz9xgf] { margin: 1rem auto 0; }
.ev-grid[b-boh2fz9xgf] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .ev-grid[b-boh2fz9xgf] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ev-grid[b-boh2fz9xgf] { grid-template-columns: 1fr; } }
.ev-card[b-boh2fz9xgf] {
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.3rem 1.25rem; display: flex; flex-direction: column; gap: .55rem;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ev-card:hover[b-boh2fz9xgf] { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line2); }
.ev-card .ic[b-boh2fz9xgf] { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--dusk-light); color: var(--dusk); }
.ev-card .ic svg[b-boh2fz9xgf] { width: 20px; height: 20px; }
.ev-card.c2 .ic[b-boh2fz9xgf] { background: var(--peach-light); color: var(--peach); }
.ev-card.c3 .ic[b-boh2fz9xgf] { background: var(--powder-light); color: var(--powder-dark); }
.ev-card.c4 .ic[b-boh2fz9xgf] { background: rgba(38,191,148,.12); color: var(--success); }
.ev-card.c5 .ic[b-boh2fz9xgf] { background: rgba(245,184,73,.16); color: #C8901F; }
.ev-card.c6 .ic[b-boh2fz9xgf] { background: var(--jet-light); color: var(--jet); }
.ev-card h4[b-boh2fz9xgf] { font-family: var(--display); font-weight: 600; font-size: 1.18rem; letter-spacing: -.01em; color: var(--jet); }
.ev-card p[b-boh2fz9xgf] { color: var(--text-secondary); font-size: .9rem; line-height: 1.55; }

/* ─── Recipes (event → action) ─── */
.at-recipes[b-boh2fz9xgf] { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--bg); }
.rec-grid[b-boh2fz9xgf] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 800px) { .rec-grid[b-boh2fz9xgf] { grid-template-columns: 1fr; } }
.rec[b-boh2fz9xgf] {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.4rem 1.4rem; display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
@media (max-width: 460px) { .rec[b-boh2fz9xgf] { grid-template-columns: 1fr; gap: .6rem; text-align: left; } }
.rec:hover[b-boh2fz9xgf] { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line2); }
.rec .when[b-boh2fz9xgf], .rec .then[b-boh2fz9xgf] { display: flex; flex-direction: column; gap: .3rem; }
.rec .k[b-boh2fz9xgf] { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.rec .when .t[b-boh2fz9xgf] { font-size: .98rem; font-weight: 600; color: var(--jet); }
.rec .then .t[b-boh2fz9xgf] { font-size: .98rem; font-weight: 600; color: var(--peach); }
.rec .conn[b-boh2fz9xgf] { width: 34px; height: 34px; border-radius: 50%; background: var(--peach-light); color: var(--peach); display: grid; place-items: center; flex-shrink: 0; }
.rec .conn svg[b-boh2fz9xgf] { width: 16px; height: 16px; }
@media (max-width: 460px) { .rec .conn[b-boh2fz9xgf] { transform: rotate(90deg); } }

/* ─── How it works ─── */
.at-how[b-boh2fz9xgf] { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--surface); }
.how-grid[b-boh2fz9xgf] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; }
@media (max-width: 800px) { .how-grid[b-boh2fz9xgf] { grid-template-columns: 1fr; } }
.how-step[b-boh2fz9xgf] { position: relative; padding: 1.6rem 1.4rem; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; }
.how-step .num[b-boh2fz9xgf] {
  font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  color: var(--peach); margin-bottom: .9rem; display: inline-flex; align-items: center; gap: .5rem;
}
.how-step .num[b-boh2fz9xgf]::after { content:''; flex: 1; height: 1px; background: var(--line2); width: 30px; }
.how-step h4[b-boh2fz9xgf] { font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; color: var(--jet); margin-bottom: .5rem; }
.how-step p[b-boh2fz9xgf] { color: var(--text-secondary); font-size: .92rem; line-height: 1.6; }

/* ─── mini CTA ─── */
.mini-cta[b-boh2fz9xgf] { background: var(--jet); color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0; text-align: center; position: relative; overflow: hidden; }
.mini-cta[b-boh2fz9xgf]::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(230,83,60,.22), transparent 60%); }
.mini-cta .wrap[b-boh2fz9xgf] { position: relative; z-index: 1; }
.mini-cta h2[b-boh2fz9xgf] { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: 1.5rem; }
.mini-cta .actions[b-boh2fz9xgf] { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
/* /Pages/Features/EmailBuilder.razor.rz.scp.css */
/* ── PAGE HERO (asymmetric, product-forward) ── */
.pg-hero[b-mwi4zhyojt] {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4rem);
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 60%, var(--bg2) 100%);
  position: relative; overflow: hidden;
}
.pg-hero[b-mwi4zhyojt]::before {
  content:''; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(to right, rgba(132,90,223,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(132,90,223,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 80%);
}
.pg-hero .wrap[b-mwi4zhyojt] { position: relative; z-index: 1; }
.pg-hero-grid[b-mwi4zhyojt] { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; align-items: center; }
@media (max-width: 960px) { .pg-hero-grid[b-mwi4zhyojt] { grid-template-columns: 1fr; } }

.pg-hero h1[b-mwi4zhyojt] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.02; letter-spacing: -.03em; color: var(--jet);
  margin: 1rem 0 1rem;
}
.pg-hero h1 em[b-mwi4zhyojt] { font-style: normal; color: var(--dusk); }
.pg-hero p.lead[b-mwi4zhyojt] { color: var(--text-secondary); font-size: 1.08rem; line-height: 1.6; max-width: 520px; margin-bottom: 1.5rem; }

/* ── Email builder mockup (3-pane: palette · canvas · inspector) ── */
.builder[b-mwi4zhyojt] { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-xl); }
.eb-toolbar[b-mwi4zhyojt] { display: flex; align-items: center; justify-content: space-between; padding: .5rem .7rem; border-bottom: 1px solid var(--line); background: var(--bg); }
.eb-tool-ic[b-mwi4zhyojt] { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--text-faint); }
.eb-tool-ic svg[b-mwi4zhyojt] { width: 16px; height: 16px; }
.eb-device[b-mwi4zhyojt] { display: flex; gap: 2px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.eb-device .d[b-mwi4zhyojt] { width: 30px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--text-faint); }
.eb-device .d.on[b-mwi4zhyojt] { background: var(--surface); color: var(--dusk); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.eb-device .d svg[b-mwi4zhyojt] { width: 15px; height: 15px; }

.eb-body[b-mwi4zhyojt] { display: grid; grid-template-columns: 168px 1fr 230px; min-height: 470px; }
@media (max-width: 860px){ .eb-body[b-mwi4zhyojt] { grid-template-columns: 120px 1fr; } .eb-inspect[b-mwi4zhyojt] { display: none; } }
@media (max-width: 560px){ .eb-body[b-mwi4zhyojt] { grid-template-columns: 1fr; } .eb-palette[b-mwi4zhyojt] { display: none; } }

/* palette */
.eb-palette[b-mwi4zhyojt] { border-right: 1px solid var(--line); padding: .75rem; background: var(--bg); display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-content: start; }
.eb-tile[b-mwi4zhyojt] { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .35rem .45rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: grab; transition: border-color .15s, box-shadow .15s, transform .15s; }
.eb-tile:hover[b-mwi4zhyojt] { border-color: var(--dusk-border); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.eb-tile .i[b-mwi4zhyojt] { color: var(--jet); display: grid; place-items: center; height: 22px; }
.eb-tile .i svg[b-mwi4zhyojt] { width: 19px; height: 19px; }
.eb-tile .i .mono[b-mwi4zhyojt] { font-family: var(--mono); font-weight: 700; letter-spacing: .04em; color: var(--jet); }
.eb-tile span.l[b-mwi4zhyojt] { font-size: .67rem; color: var(--text-secondary); font-weight: 500; }

/* canvas */
.eb-canvas[b-mwi4zhyojt] { background: var(--bg2); padding: 1.1rem; overflow: hidden; }
.eb-doc[b-mwi4zhyojt] { max-width: 320px; margin: 0 auto; background: #fff; border-radius: 8px; box-shadow: var(--shadow-md); padding: 1.1rem 1rem 1.25rem; }
.eb-mark[b-mwi4zhyojt] { width: 34px; height: 34px; border-radius: 8px; background: var(--jet); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .95rem; margin-bottom: .9rem; }
.eb-greet[b-mwi4zhyojt] { font-size: .82rem; color: var(--jet); margin-bottom: .55rem; }
.eb-blk[b-mwi4zhyojt] { font-size: .74rem; line-height: 1.55; color: var(--text-secondary); border: 1.5px solid transparent; border-radius: 6px; padding: .35rem; margin: 0 -.35rem .55rem; }
.eb-blk.sel[b-mwi4zhyojt] { border-color: var(--dusk); position: relative; }
.eb-blk.sel[b-mwi4zhyojt]::before { content:'Text'; position:absolute; top:-9px; left:8px; background:var(--dusk); color:#fff; font-family:var(--mono); font-size:.55rem; padding:.1rem .4rem; border-radius:3px; letter-spacing:.04em; }
.eb-video[b-mwi4zhyojt] { margin: 0 0 .7rem; border-radius: 6px; height: 116px; background: #14151f; position: relative; overflow: hidden; display: grid; place-items: center; }
.eb-video[b-mwi4zhyojt]::before { content:''; position:absolute; inset:0; background: linear-gradient(160deg, rgba(132,90,223,.30), rgba(35,183,229,.18)); }
.eb-video .play[b-mwi4zhyojt] { position: relative; width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.eb-video .play svg[b-mwi4zhyojt] { width: 14px; height: 14px; color: var(--jet); margin-left: 2px; }
.eb-doc .eb-cta[b-mwi4zhyojt] { display: inline-block; background: var(--dusk); color: #fff; font-size: .76rem; font-weight: 600; padding: .55rem 1.1rem; border-radius: 6px; }

/* inspector */
.eb-inspect[b-mwi4zhyojt] { border-left: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; }
.eb-tabs[b-mwi4zhyojt] { display: flex; gap: 1.1rem; padding: .7rem .9rem 0; border-bottom: 1px solid var(--line); }
.eb-tab[b-mwi4zhyojt] { font-size: .8rem; font-weight: 600; color: var(--text-faint); padding-bottom: .55rem; border-bottom: 2px solid transparent; }
.eb-tab.on[b-mwi4zhyojt] { color: var(--jet); border-color: var(--dusk); }
.eb-insp-body[b-mwi4zhyojt] { padding: .85rem .9rem; display: flex; flex-direction: column; gap: .8rem; overflow: hidden; }
.eb-insp-h[b-mwi4zhyojt] { display: flex; align-items: center; justify-content: space-between; }
.eb-insp-h .t[b-mwi4zhyojt] { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.eb-insp-h .sparkle[b-mwi4zhyojt] { color: var(--dusk); display: grid; place-items: center; }
.eb-insp-h .sparkle svg[b-mwi4zhyojt] { width: 15px; height: 15px; }
.eb-field-l[b-mwi4zhyojt] { font-size: .72rem; color: var(--text-secondary); margin-bottom: .35rem; display: block; }
.eb-content-box[b-mwi4zhyojt] { border: 1px solid var(--line2); border-radius: 8px; padding: .55rem .6rem; font-size: .67rem; line-height: 1.5; color: var(--text-secondary); background: var(--surface); }
.eb-toggle-row[b-mwi4zhyojt] { display: flex; align-items: center; gap: .55rem; }
.eb-toggle[b-mwi4zhyojt] { width: 30px; height: 17px; border-radius: 100px; background: var(--line2); position: relative; flex-shrink: 0; }
.eb-toggle[b-mwi4zhyojt]::after { content:''; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.eb-toggle-row .lbl[b-mwi4zhyojt] { font-size: .75rem; color: var(--jet); }
.eb-cols2[b-mwi4zhyojt] { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.eb-swatch-add[b-mwi4zhyojt] { width: 26px; height: 26px; border-radius: 7px; border: 1.5px dashed var(--line2); display: grid; place-items: center; color: var(--text-faint); }
.eb-swatch-add svg[b-mwi4zhyojt] { width: 13px; height: 13px; }
.eb-select[b-mwi4zhyojt] { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line2); border-radius: 8px; padding: .45rem .6rem; font-size: .73rem; color: var(--jet); background: var(--surface); }
.eb-select svg[b-mwi4zhyojt] { width: 12px; height: 12px; color: var(--text-faint); }
.eb-slider[b-mwi4zhyojt] { display: flex; align-items: center; gap: .5rem; }
.eb-slider .track[b-mwi4zhyojt] { flex: 1; height: 4px; border-radius: 2px; background: var(--line2); position: relative; }
.eb-slider .track[b-mwi4zhyojt]::before { content:''; position:absolute; left:0; top:0; bottom:0; width:30%; background:var(--dusk); border-radius:2px; }
.eb-slider .knob[b-mwi4zhyojt] { position:absolute; left:30%; top:50%; transform:translate(-50%,-50%); width:12px; height:12px; border-radius:50%; background:var(--dusk); box-shadow:0 1px 3px rgba(0,0,0,.25); }
.eb-slider .unit[b-mwi4zhyojt] { font-size:.67rem; color:var(--text-faint); font-family:var(--mono); }
.eb-seg[b-mwi4zhyojt] { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.eb-seg.three[b-mwi4zhyojt] { grid-template-columns: 1fr 1fr 1fr; }
.eb-seg button[b-mwi4zhyojt] { font-size: .73rem; font-weight: 600; color: var(--text-secondary); padding: .35rem; border-radius: 6px; display: grid; place-items: center; border: none; background: none; cursor: pointer; }
.eb-seg button.on[b-mwi4zhyojt] { background: var(--surface); color: var(--jet); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.eb-seg button svg[b-mwi4zhyojt] { width: 14px; height: 14px; }

/* ── FEATURE BENTO ── */
.bento[b-mwi4zhyojt] { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--bg2); }
.bento-head[b-mwi4zhyojt] { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 3rem; }
@media (max-width: 720px) { .bento-head[b-mwi4zhyojt] { grid-template-columns: 1fr; } }
.bento-grid[b-mwi4zhyojt] {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 1.1rem;
}
@media (max-width: 960px) { .bento-grid[b-mwi4zhyojt] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bento-grid[b-mwi4zhyojt] { grid-template-columns: 1fr; } }
.bento-tile[b-mwi4zhyojt] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.5rem;
  display: flex; flex-direction: column; gap: .5rem;
  position: relative; overflow: hidden;
}
.bento-tile.span-2[b-mwi4zhyojt] { grid-column: span 2; }
.bento-tile.tall[b-mwi4zhyojt] { grid-row: span 2; }
@media (max-width: 960px) { .bento-tile.tall[b-mwi4zhyojt] { grid-row: span 1; } .bento-tile.span-2[b-mwi4zhyojt] { grid-column: span 1; } }
.bento-tile h4[b-mwi4zhyojt] { font-family: var(--display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; color: var(--jet); }
.bento-tile p[b-mwi4zhyojt] { font-size: .9rem; color: var(--text-secondary); line-height: 1.5; }
.bt-eyebrow[b-mwi4zhyojt] { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--dusk); }
.bt-eyebrow.peach[b-mwi4zhyojt] { color: var(--peach); }
.bt-eyebrow.powder[b-mwi4zhyojt] { color: var(--powder-dark); }
.bt-eyebrow.success[b-mwi4zhyojt] { color: var(--success); }

/* Mini-visuals inside bento */
.mv-brand[b-mwi4zhyojt] { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .75rem; }
.mv-brand .sw[b-mwi4zhyojt] { width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.mv-type[b-mwi4zhyojt] { display: flex; gap: .5rem; margin-top: .75rem; }
.mv-type .card[b-mwi4zhyojt] { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: .7rem; text-align: center; }
.mv-type .card h5[b-mwi4zhyojt] { font-family: var(--display); font-size: 1.15rem; color: var(--jet); font-weight: 600; letter-spacing: -.02em; }
.mv-type .card span[b-mwi4zhyojt] { font-family: var(--mono); font-size: .65rem; color: var(--text-faint); }

.mv-devices[b-mwi4zhyojt] { display: flex; gap: .6rem; margin-top: 1rem; align-items: flex-end; }
.mv-devices .d[b-mwi4zhyojt] { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .4rem; }
.mv-devices .desk[b-mwi4zhyojt] { width: 120px; height: 80px; }
.mv-devices .mob[b-mwi4zhyojt]  { width: 42px; height: 80px; }
.mv-devices .screen[b-mwi4zhyojt] { background: linear-gradient(160deg, var(--dusk-light), var(--powder-light)); height: 100%; border-radius: 4px; }

.mv-ai[b-mwi4zhyojt] {
  margin-top: .8rem; padding: .7rem; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
}
.mv-ai .prompt[b-mwi4zhyojt] { font-family: var(--mono); font-size: .72rem; color: var(--text-secondary); margin-bottom: .5rem; }
.mv-ai .sug[b-mwi4zhyojt] { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--jet); padding: .35rem 0; border-top: 1px dashed var(--line); }
.mv-ai .sug .tag[b-mwi4zhyojt] { font-family: var(--mono); font-size: .65rem; color: var(--success); background: rgba(38,191,148,.1); padding: .1rem .4rem; border-radius: 4px; }

.mv-ab[b-mwi4zhyojt] { display: flex; gap: .6rem; margin-top: 1rem; }
.mv-ab .v[b-mwi4zhyojt] { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: .55rem; font-size: .72rem; color: var(--text-secondary); }
.mv-ab .v.win[b-mwi4zhyojt] { border-color: var(--success); background: rgba(38,191,148,.06); color: var(--jet); }
.mv-ab .v .n[b-mwi4zhyojt] { font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--jet); letter-spacing: -.02em; }

/* ── TEMPLATES STRIP ── */
.templates[b-mwi4zhyojt] { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--surface); }
.tpl-head[b-mwi4zhyojt] { max-width: 700px; margin: 0 auto 3rem; text-align: center; }
.tpl-grid[b-mwi4zhyojt] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 960px) { .tpl-grid[b-mwi4zhyojt] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tpl-grid[b-mwi4zhyojt] { grid-template-columns: 1fr; } }
.tpl[b-mwi4zhyojt] {
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.tpl:hover[b-mwi4zhyojt] { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tpl-pv[b-mwi4zhyojt] { height: 180px; padding: 1rem; border-bottom: 1px solid var(--line); position: relative; }
.tpl-1[b-mwi4zhyojt] { background: linear-gradient(160deg, var(--dusk-light), #fff); }
.tpl-2[b-mwi4zhyojt] { background: linear-gradient(160deg, var(--peach-light), #fff); }
.tpl-3[b-mwi4zhyojt] { background: linear-gradient(160deg, var(--powder-light), #fff); }
.tpl-4[b-mwi4zhyojt] { background: linear-gradient(160deg, rgba(38,191,148,.12), #fff); }
.tpl-pv .hdr[b-mwi4zhyojt] { font-family: var(--display); font-size: 1rem; font-weight: 600; color: var(--jet); letter-spacing: -.02em; margin-bottom: .4rem; }
.tpl-pv .row[b-mwi4zhyojt] { height: 6px; background: var(--line); border-radius: 3px; margin-bottom: 4px; }
.tpl-pv .row.s[b-mwi4zhyojt] { width: 60%; }
.tpl-pv .bt[b-mwi4zhyojt] { height: 12px; width: 60px; border-radius: 3px; background: var(--peach); margin-top: .5rem; }
.tpl-meta[b-mwi4zhyojt] { padding: .8rem 1rem; display: flex; justify-content: space-between; align-items: center; }
.tpl-meta .name[b-mwi4zhyojt] { font-size: .88rem; font-weight: 600; color: var(--jet); }
.tpl-meta .cat[b-mwi4zhyojt] { font-family: var(--mono); font-size: .65rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .1em; }

/* ── CTA (small) ── */
.mini-cta[b-mwi4zhyojt] {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: var(--jet); color: #fff; text-align: center;
  position: relative; overflow: hidden;
}
.mini-cta[b-mwi4zhyojt]::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(132,90,223,.3), transparent 60%);
}
.mini-cta .wrap[b-mwi4zhyojt] { position: relative; z-index: 1; }
.mini-cta h2[b-mwi4zhyojt] { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -.02em; margin-bottom: 1rem; }
.mini-cta .actions[b-mwi4zhyojt] { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
/* /Pages/Features/FormBuilder.razor.rz.scp.css */
/* Hero: centered editorial + form canvas split */
.pg-hero[b-wk4mbx6knc] {
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
  background: var(--bg); text-align: center; position: relative; overflow: hidden;
}
.pg-hero[b-wk4mbx6knc]::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(230,83,60,.14), transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(132,90,223,.1), transparent 60%);
}
.pg-hero .wrap[b-wk4mbx6knc] { position: relative; z-index: 1; }
.pg-hero h1[b-wk4mbx6knc] { font-family: var(--display); font-weight: 600; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1; letter-spacing: -.03em; color: var(--jet); margin: 1rem auto .85rem; max-width: 780px; }
.pg-hero h1 em[b-wk4mbx6knc] { font-style: normal; color: var(--peach); }
.pg-hero p.lead[b-wk4mbx6knc] { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.6; max-width: 580px; margin: 0 auto 1.75rem; }
.pg-hero .actions[b-wk4mbx6knc] { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* Form canvas */
.fc-wrap[b-wk4mbx6knc] { padding: 2rem 0 clamp(4rem, 7vw, 6rem); }
.fc[b-wk4mbx6knc] { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-xl); }
.fc-head[b-wk4mbx6knc] { padding: .75rem 1rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; background: var(--bg2); }
.fc-tabs[b-wk4mbx6knc] { display: flex; gap: .3rem; }
.fc-tabs span[b-wk4mbx6knc] { font-size: .78rem; padding: .35rem .75rem; border-radius: 7px; color: var(--text-secondary); cursor: pointer; }
.fc-tabs span.active[b-wk4mbx6knc] { background: var(--surface); color: var(--jet); font-weight: 600; box-shadow: 0 1px 4px rgba(27,28,46,.08); }
.fc-url[b-wk4mbx6knc] { font-family: var(--mono); font-size: .72rem; color: var(--text-faint); }
.fc-url b[b-wk4mbx6knc] { color: var(--peach); }
.fc-body[b-wk4mbx6knc] { display: grid; grid-template-columns: 1fr 1.1fr; min-height: 440px; }
@media (max-width: 900px) { .fc-body[b-wk4mbx6knc] { grid-template-columns: 1fr; } }

/* Fields editor */
.fc-edit[b-wk4mbx6knc] { border-right: 1px solid var(--line); padding: 1.25rem; background: var(--bg); }
@media (max-width: 900px) { .fc-edit[b-wk4mbx6knc] { border-right: none; border-bottom: 1px solid var(--line); } }
.fc-edit h6[b-wk4mbx6knc] { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .85rem; }
.fld-list[b-wk4mbx6knc] { display: flex; flex-direction: column; gap: .55rem; }
.fld[b-wk4mbx6knc] { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .65rem .8rem; display: grid; grid-template-columns: 18px 1fr auto; gap: .75rem; align-items: center; cursor: grab; }
.fld.sel[b-wk4mbx6knc] { border-color: var(--peach); box-shadow: 0 0 0 3px var(--peach-light); background: #fff; }
.fld .drag[b-wk4mbx6knc] { color: var(--text-faint); font-size: .8rem; line-height: 0; }
.fld-title[b-wk4mbx6knc] { font-size: .88rem; color: var(--jet); font-weight: 500; }
.fld-type[b-wk4mbx6knc] { font-family: var(--mono); font-size: .68rem; color: var(--text-secondary); display: block; margin-top: 1px; }
.fld .req[b-wk4mbx6knc] { font-family: var(--mono); font-size: .65rem; background: var(--peach-light); color: var(--peach); padding: .12rem .4rem; border-radius: 4px; font-weight: 600; }
.fc-add[b-wk4mbx6knc] { margin-top: 1rem; width: 100%; padding: .7rem; border-radius: 10px; border: 1.5px dashed var(--line2); background: transparent; color: var(--text-secondary); font-weight: 500; cursor: pointer; font-family: var(--body); transition: border-color .2s, color .2s; }
.fc-add:hover[b-wk4mbx6knc] { border-color: var(--peach); color: var(--peach); }

/* Preview */
.fc-pv[b-wk4mbx6knc] { padding: 1.5rem; background: linear-gradient(160deg, var(--peach-light), #fff); display: flex; align-items: center; justify-content: center; }
.pv-form[b-wk4mbx6knc] { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.75rem 1.5rem; width: 100%; max-width: 380px; box-shadow: var(--shadow-md); }
.pv-form .chip[b-wk4mbx6knc] { display: inline-block; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--peach); background: var(--peach-light); padding: .2rem .55rem; border-radius: 4px; margin-bottom: .5rem; }
.pv-form h3[b-wk4mbx6knc] { font-family: var(--display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--jet); margin-bottom: .3rem; }
.pv-form p.sub[b-wk4mbx6knc] { font-size: .88rem; color: var(--text-secondary); margin-bottom: 1.25rem; }
.pv-field[b-wk4mbx6knc] { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; }
.pv-field label[b-wk4mbx6knc] { font-size: .8rem; color: var(--jet); font-weight: 500; }
.pv-field input[b-wk4mbx6knc], .pv-field select[b-wk4mbx6knc] { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .65rem .8rem; font-family: var(--body); font-size: .88rem; color: var(--jet); outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.pv-field input:focus[b-wk4mbx6knc], .pv-field select:focus[b-wk4mbx6knc] { border-color: var(--peach); box-shadow: 0 0 0 3px var(--peach-light); background: #fff; }
.pv-consent[b-wk4mbx6knc] { font-size: .78rem; color: var(--text-secondary); display: flex; gap: .5rem; align-items: flex-start; margin: .5rem 0 1.1rem; }
.pv-submit[b-wk4mbx6knc] { width: 100%; background: var(--peach); color: #fff; font-weight: 600; padding: .8rem; border: none; border-radius: 8px; cursor: pointer; font-family: var(--body); font-size: .95rem; transition: background .15s; }
.pv-submit:hover[b-wk4mbx6knc] { background: var(--peach-dark); }

/* Form types */
.types[b-wk4mbx6knc] { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--bg2); }
.types-head[b-wk4mbx6knc] { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 3rem; }
@media (max-width: 720px) { .types-head[b-wk4mbx6knc] { grid-template-columns: 1fr; } }
.types-grid[b-wk4mbx6knc] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 960px) { .types-grid[b-wk4mbx6knc] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .types-grid[b-wk4mbx6knc] { grid-template-columns: 1fr; } }
.type-card[b-wk4mbx6knc] { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .4rem; min-height: 280px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.type-card:hover[b-wk4mbx6knc] { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--peach-border); }
.tc-vis[b-wk4mbx6knc] { height: 120px; border-radius: 10px; position: relative; overflow: hidden; margin-bottom: .75rem; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.tc-tag[b-wk4mbx6knc] { font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-secondary); }
.type-card h4[b-wk4mbx6knc] { font-family: var(--display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; color: var(--jet); }
.type-card p[b-wk4mbx6knc] { font-size: .82rem; color: var(--text-secondary); line-height: 1.5; }
.mini-inline[b-wk4mbx6knc] { width: 85%; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .45rem; display: flex; gap: .35rem; }
.mini-inline .in[b-wk4mbx6knc] { flex: 1; background: var(--bg); border-radius: 4px; height: 24px; }
.mini-inline .go[b-wk4mbx6knc] { background: var(--peach); border-radius: 4px; width: 50px; }
.mini-pop[b-wk4mbx6knc] { width: 78%; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .6rem; box-shadow: 0 4px 12px rgba(27,28,46,.1); }
.mini-pop .h[b-wk4mbx6knc] { font-family: var(--display); font-weight: 600; font-size: .75rem; color: var(--jet); margin-bottom: .25rem; }
.mini-pop .f[b-wk4mbx6knc] { height: 18px; background: var(--bg); border-radius: 3px; margin-bottom: .2rem; }
.mini-pop .b[b-wk4mbx6knc] { height: 18px; background: var(--peach); border-radius: 3px; width: 60%; }
.mini-page[b-wk4mbx6knc] { width: 85%; padding: .5rem; }
.mini-page .hh[b-wk4mbx6knc] { font-family: var(--display); font-weight: 600; font-size: .8rem; color: var(--jet); text-align: center; margin-bottom: .35rem; }
.mini-page .f[b-wk4mbx6knc] { height: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; margin-bottom: .25rem; }
.mini-multi[b-wk4mbx6knc] { width: 80%; }
.mini-multi .dots[b-wk4mbx6knc] { display: flex; gap: 4px; margin-bottom: .4rem; justify-content: center; }
.mini-multi .dots span[b-wk4mbx6knc] { width: 18px; height: 4px; border-radius: 2px; background: var(--line); }
.mini-multi .dots span.on[b-wk4mbx6knc] { background: var(--peach); }
.mini-multi .opt[b-wk4mbx6knc] { padding: .35rem .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font-size: .7rem; color: var(--text-secondary); margin-bottom: .25rem; }
.mini-multi .opt.sel[b-wk4mbx6knc] { border-color: var(--peach); color: var(--peach); font-weight: 600; }

/* Three-col */
.threecol[b-wk4mbx6knc] { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--surface); }
.threecol-head[b-wk4mbx6knc] { text-align: center; max-width: 700px; margin: 0 auto 3rem; }
.threecol-grid[b-wk4mbx6knc] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .threecol-grid[b-wk4mbx6knc] { grid-template-columns: 1fr; } }
.tc-item[b-wk4mbx6knc] { padding: 1.5rem 1.4rem; border-left: 2px solid var(--line); }
.tc-item .icn[b-wk4mbx6knc] { width: 36px; height: 36px; border-radius: 9px; background: var(--peach-light); color: var(--peach); display: grid; place-items: center; margin-bottom: 1rem; }
.tc-item.b .icn[b-wk4mbx6knc] { background: var(--dusk-light); color: var(--dusk); }
.tc-item.c .icn[b-wk4mbx6knc] { background: var(--powder-light); color: var(--powder-dark); }
.tc-item h4[b-wk4mbx6knc] { font-family: var(--display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; color: var(--jet); margin-bottom: .5rem; }
.tc-item p[b-wk4mbx6knc] { font-size: .92rem; color: var(--text-secondary); line-height: 1.55; }

/* CTA */
.mini-cta[b-wk4mbx6knc] { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--jet); color: #fff; text-align: center; position: relative; overflow: hidden; }
.mini-cta[b-wk4mbx6knc]::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(230,83,60,.28), transparent 60%); }
.mini-cta .wrap[b-wk4mbx6knc] { position: relative; z-index: 1; }
.mini-cta h2[b-wk4mbx6knc] { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -.02em; margin-bottom: 1rem; }
.mini-cta .actions[b-wk4mbx6knc] { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
/* /Pages/Features/Tour.razor.rz.scp.css */
/* ── Hero ── */
.tour-hero[b-1uh3treb52] {
  position: relative; overflow: hidden;
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
  background:
    radial-gradient(ellipse 55% 55% at 50% 0%, rgba(132,90,223,.16), transparent 62%),
    radial-gradient(ellipse 60% 50% at 90% 30%, rgba(35,183,229,.10), transparent 60%),
    var(--bg);
}
.tour-hero[b-1uh3treb52]::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(132,90,223,.08) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 70% 65% at 50% 35%, #000 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 35%, #000 35%, transparent 85%);
}
.tour-hero .wrap[b-1uh3treb52] { position: relative; z-index: 1; }
.tour-hero h1[b-1uh3treb52] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  line-height: 1.0; letter-spacing: -.03em; color: var(--jet);
  margin: 1.1rem auto .9rem; max-width: 860px;
}
.tour-hero h1 em[b-1uh3treb52] {
  font-style: normal;
  background: linear-gradient(120deg, var(--dusk), var(--powder));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tour-hero p.lead[b-1uh3treb52] {
  color: var(--text-secondary); font-size: 1.14rem; line-height: 1.6;
  max-width: 560px; margin: 0 auto 1.6rem;
}
.tour-hero .actions[b-1uh3treb52] { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.tour-meta[b-1uh3treb52] {
  margin-top: 1.6rem; display: inline-flex; flex-wrap: wrap; gap: 1.4rem;
  align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  color: var(--text-secondary);
}
.tour-meta span[b-1uh3treb52] { display: inline-flex; align-items: center; gap: .45rem; }
.tour-meta .d[b-1uh3treb52] { width: 6px; height: 6px; border-radius: 50%; background: var(--dusk); }
.tour-meta .d.p[b-1uh3treb52] { background: var(--peach); }
.tour-meta .d.b[b-1uh3treb52] { background: var(--powder); }
.tour-meta .d.g[b-1uh3treb52] { background: var(--success); }

/* ── Layout: sticky rail + steps ── */
.tour-body[b-1uh3treb52] { padding: clamp(2.5rem, 5vw, 4rem) 0 1rem; }
.tour-layout[b-1uh3treb52] {
  display: grid; grid-template-columns: 232px 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 940px) { .tour-layout[b-1uh3treb52] { grid-template-columns: 1fr; } }

/* Sticky progress rail */
.tour-rail[b-1uh3treb52] { position: sticky; top: calc(var(--nav-h) + 2rem); }
@media (max-width: 940px) { .tour-rail[b-1uh3treb52] { display: none; } }
.rail-head[b-1uh3treb52] {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint);
  padding-bottom: 1rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.rail-list[b-1uh3treb52] { list-style: none; display: flex; flex-direction: column; }
.rail-item[b-1uh3treb52] {
  display: grid; grid-template-columns: 30px 1fr; gap: .75rem; align-items: center;
  padding: .6rem 0; position: relative; text-decoration: none; color: var(--text-secondary);
  transition: color .2s;
}
.rail-item[b-1uh3treb52]::before {
  content: ''; position: absolute; left: 14px; top: 50%; bottom: -50%;
  width: 2px; background: var(--line); z-index: 0;
}
.rail-item:last-child[b-1uh3treb52]::before { display: none; }
.rail-num[b-1uh3treb52] {
  position: relative; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  background: var(--surface); border: 1.5px solid var(--line2);
  color: var(--text-faint); transition: all .25s;
}
.rail-label[b-1uh3treb52] { font-size: .86rem; font-weight: 500; line-height: 1.2; transition: color .2s; }
.rail-item:hover[b-1uh3treb52] { color: var(--jet); }
.rail-item:hover .rail-num[b-1uh3treb52] { border-color: var(--dusk); color: var(--dusk); }
.rail-item.active[b-1uh3treb52] { color: var(--jet); }
.rail-item.active .rail-num[b-1uh3treb52] {
  background: var(--dusk); border-color: var(--dusk); color: #fff;
  box-shadow: 0 4px 12px rgba(132,90,223,.3);
}
.rail-item.active .rail-label[b-1uh3treb52] { color: var(--jet); font-weight: 600; }
.rail-item.done .rail-num[b-1uh3treb52] { background: var(--dusk-light); border-color: var(--dusk-border); color: var(--dusk); }

.rail-cta[b-1uh3treb52] { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.rail-cta .btn[b-1uh3treb52] { width: 100%; justify-content: center; }

/* Steps column */
.tour-steps[b-1uh3treb52] { display: flex; flex-direction: column; gap: clamp(3.5rem, 7vw, 6rem); }

.step[b-1uh3treb52] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.step-grid[b-1uh3treb52] {
  display: grid; grid-template-columns: 1fr 1.08fr;
  gap: clamp(1.75rem, 3.5vw, 3rem); align-items: center;
}
.step.flip .step-grid[b-1uh3treb52] { grid-template-columns: 1.08fr 1fr; }
.step.flip .step-copy[b-1uh3treb52] { order: 2; }
@media (max-width: 760px) {
  .step-grid[b-1uh3treb52], .step.flip .step-grid[b-1uh3treb52] { grid-template-columns: 1fr; }
  .step.flip .step-copy[b-1uh3treb52] { order: 0; }
}

.step-kicker[b-1uh3treb52] { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.step-badge[b-1uh3treb52] {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 600; font-size: .9rem;
  background: var(--dusk); color: #fff;
  box-shadow: 0 6px 16px rgba(132,90,223,.28);
}
.step.s-peach .step-badge[b-1uh3treb52] { background: var(--peach); box-shadow: 0 6px 16px rgba(230,83,60,.26); }
.step.s-powder .step-badge[b-1uh3treb52] { background: var(--powder); box-shadow: 0 6px 16px rgba(35,183,229,.26); }
.step.s-success .step-badge[b-1uh3treb52] { background: var(--success); box-shadow: 0 6px 16px rgba(38,191,148,.26); }
.step-eyebrow[b-1uh3treb52] {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dusk); font-weight: 600;
}
.step.s-peach .step-eyebrow[b-1uh3treb52] { color: var(--peach); }
.step.s-powder .step-eyebrow[b-1uh3treb52] { color: var(--powder-dark); }
.step.s-success .step-eyebrow[b-1uh3treb52] { color: var(--success); }

.step-copy h2[b-1uh3treb52] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.04;
  letter-spacing: -.02em; color: var(--jet); margin-bottom: .85rem;
}
.step-copy p.desc[b-1uh3treb52] { color: var(--text-secondary); font-size: 1.04rem; line-height: 1.6; margin-bottom: 1.25rem; }
.step-list[b-1uh3treb52] { list-style: none; display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.4rem; }
.step-list li[b-1uh3treb52] { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; color: var(--text-primary); line-height: 1.5; }
.step-list .tick[b-1uh3treb52] {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center; background: var(--dusk-light); color: var(--dusk);
}
.step.s-peach .step-list .tick[b-1uh3treb52] { background: var(--peach-light); color: var(--peach); }
.step.s-powder .step-list .tick[b-1uh3treb52] { background: var(--powder-light); color: var(--powder-dark); }
.step.s-success .step-list .tick[b-1uh3treb52] { background: rgba(38,191,148,.12); color: var(--success); }
.step-link[b-1uh3treb52] {
  font-size: .9rem; font-weight: 600; color: var(--dusk); text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
}
.step.s-peach .step-link[b-1uh3treb52] { color: var(--peach); }
.step.s-powder .step-link[b-1uh3treb52] { color: var(--powder-dark); }
.step.s-success .step-link[b-1uh3treb52] { color: var(--success); }
.step-link .arr[b-1uh3treb52] { transition: transform .18s; }
.step-link:hover .arr[b-1uh3treb52] { transform: translateX(3px); }

/* Mockup frame (shared chrome) */
.mock[b-1uh3treb52] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg);
}
.mock-bar[b-1uh3treb52] {
  height: 38px; background: var(--bg2); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: .4rem; padding: 0 .9rem;
}
.mock-dot[b-1uh3treb52] { width: 10px; height: 10px; border-radius: 50%; }
.mock-path[b-1uh3treb52] { margin-left: .6rem; font-family: var(--mono); font-size: .72rem; color: var(--text-faint); }

/* ── Mockup 1: Email builder ── */
.m-email[b-1uh3treb52] { display: grid; grid-template-columns: 64px 1fr 150px; min-height: 330px; }
@media (max-width: 1040px), (max-width: 520px) { .m-email[b-1uh3treb52] { grid-template-columns: 52px 1fr; } .m-email .me-inspect[b-1uh3treb52] { display: none; } }
.me-blocks[b-1uh3treb52] { background: var(--bg); border-right: 1px solid var(--line); padding: .7rem .5rem; display: flex; flex-direction: column; gap: .5rem; }
.me-block[b-1uh3treb52] { aspect-ratio: 1; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-faint); cursor: grab; transition: all .18s; }
.me-block.on[b-1uh3treb52] { border-color: var(--dusk); color: var(--dusk); background: var(--dusk-light); }
.me-block svg[b-1uh3treb52] { width: 18px; height: 18px; }
.me-canvas[b-1uh3treb52] { background: var(--bg); padding: 1rem; display: flex; flex-direction: column; gap: .6rem; overflow: hidden; }
.me-doc[b-1uh3treb52] { background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-sm); overflow: hidden; }
.me-hero[b-1uh3treb52] { height: 78px; background: linear-gradient(110deg, var(--dusk), var(--powder)); position: relative; display: grid; place-items: center; }
.me-hero span[b-1uh3treb52] { font-family: var(--display); color: #fff; font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; }
.me-pad[b-1uh3treb52] { padding: .85rem .95rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.me-row[b-1uh3treb52] { height: 9px; border-radius: 3px; background: var(--bg3); }
.me-row.s[b-1uh3treb52] { width: 55%; }
.me-row.m[b-1uh3treb52] { width: 78%; }
.me-btn[b-1uh3treb52] { margin-top: .2rem; align-self: flex-start; background: var(--peach); color:#fff; font-size: .68rem; font-weight: 600; padding: .4rem .85rem; border-radius: 6px; }
.me-sel[b-1uh3treb52] { outline: 2px solid var(--dusk); outline-offset: 2px; border-radius: 4px; position: relative; }
.me-sel[b-1uh3treb52]::after { content: 'Text block'; position: absolute; top: -18px; left: 0; font-family: var(--mono); font-size: .58rem; background: var(--dusk); color: #fff; padding: .08rem .4rem; border-radius: 3px; }
.me-inspect[b-1uh3treb52] { background: var(--bg); border-left: 1px solid var(--line); padding: .85rem .75rem; display: flex; flex-direction: column; gap: .6rem; }
.me-insp-h[b-1uh3treb52] { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.me-prop[b-1uh3treb52] { display: flex; flex-direction: column; gap: .28rem; }
.me-prop label[b-1uh3treb52] { font-size: .66rem; color: var(--text-secondary); }
.me-prop .ctrl[b-1uh3treb52] { height: 24px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; padding: 0 .45rem; font-size: .64rem; color: var(--jet); }
.me-swatches[b-1uh3treb52] { display: flex; gap: .3rem; }
.me-swatches i[b-1uh3treb52] { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line); }
.me-swatches i.on[b-1uh3treb52] { outline: 2px solid var(--jet); outline-offset: 1px; }

/* ── Mockup 2: Forms ── */
.m-form[b-1uh3treb52] { display: grid; grid-template-columns: 1fr 1fr; min-height: 330px; }
@media (max-width: 520px) { .m-form[b-1uh3treb52] { grid-template-columns: 1fr; } .m-form .mf-edit[b-1uh3treb52] { display: none; } }
.mf-edit[b-1uh3treb52] { border-right: 1px solid var(--line); padding: 1rem; background: var(--bg); display: flex; flex-direction: column; gap: .5rem; }
.mf-edit h6[b-1uh3treb52] { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .25rem; }
.mf-fld[b-1uh3treb52] { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: .55rem .65rem; display: grid; grid-template-columns: 14px 1fr auto; gap: .55rem; align-items: center; }
.mf-fld.sel[b-1uh3treb52] { border-color: var(--peach); box-shadow: 0 0 0 3px var(--peach-light); }
.mf-fld .g[b-1uh3treb52] { color: var(--text-faint); font-size: .7rem; line-height: 0; }
.mf-fld .t[b-1uh3treb52] { font-size: .78rem; color: var(--jet); font-weight: 500; }
.mf-fld .ty[b-1uh3treb52] { font-family: var(--mono); font-size: .58rem; color: var(--text-secondary); display: block; }
.mf-fld .req[b-1uh3treb52] { font-family: var(--mono); font-size: .56rem; background: var(--peach-light); color: var(--peach); padding: .1rem .35rem; border-radius: 4px; font-weight: 600; }
.mf-add[b-1uh3treb52] { margin-top: .2rem; padding: .55rem; border-radius: 9px; border: 1.5px dashed var(--line2); background: transparent; color: var(--text-secondary); font-size: .76rem; font-weight: 500; text-align: center; }
.mf-pv[b-1uh3treb52] { padding: 1.1rem; background: linear-gradient(160deg, var(--peach-light), #fff); display: flex; align-items: center; justify-content: center; }
.mf-card[b-1uh3treb52] { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.2rem 1.1rem; width: 100%; max-width: 270px; box-shadow: var(--shadow-md); }
.mf-card .chip[b-1uh3treb52] { display: inline-block; font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--peach); background: var(--peach-light); padding: .15rem .45rem; border-radius: 4px; margin-bottom: .45rem; }
.mf-card h4[b-1uh3treb52] { font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--jet); letter-spacing: -.02em; margin-bottom: .2rem; }
.mf-card p[b-1uh3treb52] { font-size: .72rem; color: var(--text-secondary); margin-bottom: .8rem; }
.mf-inp[b-1uh3treb52] { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .55rem; }
.mf-inp span[b-1uh3treb52] { font-size: .66rem; color: var(--jet); font-weight: 500; }
.mf-inp .box[b-1uh3treb52] { height: 30px; border-radius: 7px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; padding: 0 .55rem; font-size: .68rem; color: var(--text-faint); }
.mf-inp .box.focus[b-1uh3treb52] { border-color: var(--peach); box-shadow: 0 0 0 3px var(--peach-light); color: var(--jet); background: #fff; }
.mf-go[b-1uh3treb52] { width: 100%; background: var(--peach); color: #fff; font-size: .76rem; font-weight: 600; padding: .6rem; border-radius: 7px; text-align: center; margin-top: .2rem; }

/* ── Mockup 3: Workflow ── */
.m-wf[b-1uh3treb52] { min-height: 330px; background: var(--bg); position: relative; padding: 1.1rem; background-image: radial-gradient(circle, rgba(132,90,223,.08) 1px, transparent 1px); background-size: 18px 18px; }
.wf-flow[b-1uh3treb52] { display: flex; flex-direction: column; align-items: center; gap: 0; }
.wf-card[b-1uh3treb52] { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: .6rem .85rem; display: flex; align-items: center; gap: .6rem; box-shadow: 0 4px 14px rgba(27,28,46,.07); min-width: 220px; position: relative; z-index: 1; }
.wf-card .ic[b-1uh3treb52] { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.wf-card .ic svg[b-1uh3treb52] { width: 15px; height: 15px; }
.wf-card .tx b[b-1uh3treb52] { display: block; font-size: .82rem; color: var(--jet); font-weight: 600; line-height: 1.1; }
.wf-card .tx small[b-1uh3treb52] { font-family: var(--mono); font-size: .6rem; color: var(--text-secondary); }
.wf-card.trigger[b-1uh3treb52] { border-color: var(--dusk-border); }
.wf-card.trigger .ic[b-1uh3treb52] { background: var(--dusk-light); color: var(--dusk); }
.wf-card.action .ic[b-1uh3treb52] { background: var(--peach-light); color: var(--peach); }
.wf-card.wait[b-1uh3treb52] { min-width: 0; background: var(--bg2); border-style: dashed; }
.wf-card.wait .ic[b-1uh3treb52] { background: var(--powder-light); color: var(--powder-dark); }
.wf-card.action.g .ic[b-1uh3treb52] { background: rgba(38,191,148,.12); color: var(--success); }
.wf-conn[b-1uh3treb52] { width: 2px; height: 22px; background: var(--line2); position: relative; }
.wf-conn[b-1uh3treb52]::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-right: 2px solid var(--line2); border-bottom: 2px solid var(--line2); rotate: 45deg; }
.wf-branch[b-1uh3treb52] { display: flex; gap: 1.5rem; }

/* ── Mockup 4: Auto triggers ── */
.m-trig[b-1uh3treb52] { padding: 1.1rem; min-height: 330px; background: var(--bg); display: flex; flex-direction: column; gap: .7rem; }
.trig-row[b-1uh3treb52] { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: .75rem .85rem; display: grid; grid-template-columns: 1fr auto 1fr; gap: .7rem; align-items: center; box-shadow: var(--shadow-sm); }
@media (max-width: 480px) { .trig-row[b-1uh3treb52] { grid-template-columns: 1fr; gap: .45rem; text-align: center; } }
.trig-when[b-1uh3treb52], .trig-do[b-1uh3treb52] { display: flex; align-items: center; gap: .55rem; }
.trig-do[b-1uh3treb52] { justify-content: flex-end; }
@media (max-width: 480px) { .trig-do[b-1uh3treb52] { justify-content: center; } }
.trig-tag[b-1uh3treb52] { font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.trig-pill[b-1uh3treb52] { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .65rem; border-radius: 8px; font-size: .8rem; font-weight: 500; }
.trig-pill .dot[b-1uh3treb52] { width: 7px; height: 7px; border-radius: 50%; }
.trig-pill.open[b-1uh3treb52] { background: var(--dusk-light); color: var(--dusk); }
.trig-pill.click[b-1uh3treb52] { background: var(--powder-light); color: var(--powder-dark); }
.trig-pill.buy[b-1uh3treb52] { background: rgba(38,191,148,.12); color: var(--success); }
.trig-pill.send[b-1uh3treb52] { background: var(--peach-light); color: var(--peach); }
.trig-pill.tag[b-1uh3treb52] { background: var(--bg3); color: var(--dusk-dark); }
.trig-pill.wait[b-1uh3treb52] { background: rgba(245,184,73,.16); color: #A06B00; }
.trig-arrow[b-1uh3treb52] { color: var(--text-faint); display: grid; place-items: center; }
.trig-arrow svg[b-1uh3treb52] { width: 22px; height: 22px; }
.trig-foot[b-1uh3treb52] { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .6rem; border-top: 1px dashed var(--line); font-family: var(--mono); font-size: .64rem; color: var(--text-secondary); }
.trig-live[b-1uh3treb52] { display: inline-flex; align-items: center; gap: .4rem; color: var(--success); }
.trig-live .pulse[b-1uh3treb52] { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: trigpulse-b-1uh3treb52 1.6s ease-in-out infinite; }
@keyframes trigpulse-b-1uh3treb52 { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .trig-live .pulse[b-1uh3treb52] { animation: none; } }

/* ── Mockup 5: A/B testing ── */
.m-ab[b-1uh3treb52] { padding: 1.1rem; min-height: 330px; background: var(--bg); display: flex; flex-direction: column; gap: .8rem; }
.ab-pair[b-1uh3treb52] { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ab-var[b-1uh3treb52] { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; position: relative; }
.ab-var.win[b-1uh3treb52] { border-color: var(--success); box-shadow: 0 0 0 3px rgba(38,191,148,.14); }
.ab-vh[b-1uh3treb52] { padding: .55rem .75rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.ab-vh .lab[b-1uh3treb52] { font-family: var(--mono); font-size: .68rem; font-weight: 600; color: var(--jet); }
.ab-vh .badge[b-1uh3treb52] { font-family: var(--mono); font-size: .56rem; font-weight: 600; padding: .1rem .45rem; border-radius: 5px; background: var(--bg3); color: var(--dusk-dark); }
.ab-var.win .ab-vh .badge[b-1uh3treb52] { background: var(--success); color: #fff; }
.ab-subj[b-1uh3treb52] { padding: .7rem .75rem; }
.ab-subj .sl[b-1uh3treb52] { font-family: var(--mono); font-size: .56rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; }
.ab-subj .sv[b-1uh3treb52] { font-size: .82rem; color: var(--jet); font-weight: 500; line-height: 1.3; margin-top: .2rem; }
.ab-metric[b-1uh3treb52] { padding: .6rem .75rem .8rem; display: flex; align-items: flex-end; justify-content: space-between; }
.ab-metric .big[b-1uh3treb52] { font-family: var(--display); font-size: 1.6rem; font-weight: 600; color: var(--jet); letter-spacing: -.02em; line-height: 1; }
.ab-var.win .ab-metric .big[b-1uh3treb52] { color: var(--success); }
.ab-metric .lab2[b-1uh3treb52] { font-family: var(--mono); font-size: .58rem; color: var(--text-faint); text-transform: uppercase; }
.ab-bar[b-1uh3treb52] { height: 6px; border-radius: 4px; background: var(--bg3); overflow: hidden; margin: 0 .75rem .75rem; }
.ab-bar i[b-1uh3treb52] { display: block; height: 100%; border-radius: 4px; }
.ab-var.win .ab-bar i[b-1uh3treb52] { background: var(--success); }
.ab-bar i[b-1uh3treb52] { background: var(--text-faint); }
.ab-winbanner[b-1uh3treb52] { background: rgba(38,191,148,.1); border: 1px solid rgba(38,191,148,.28); border-radius: 10px; padding: .65rem .85rem; display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--jet); }
.ab-winbanner .ico[b-1uh3treb52] { width: 26px; height: 26px; border-radius: 7px; background: var(--success); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.ab-winbanner b[b-1uh3treb52] { color: var(--success); }

/* ── Mockup 6: Analytics ── */
.m-dash[b-1uh3treb52] { min-height: 330px; }
.dh-head[b-1uh3treb52] { padding: .8rem 1rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; background: var(--surface); }
.dh-tabs[b-1uh3treb52] { display: flex; gap: .25rem; }
.dh-tabs span[b-1uh3treb52] { font-size: .72rem; padding: .3rem .65rem; border-radius: 6px; color: var(--text-secondary); }
.dh-tabs span.on[b-1uh3treb52] { background: rgba(38,191,148,.12); color: var(--success); font-weight: 600; }
.dh-range[b-1uh3treb52] { font-family: var(--mono); font-size: .66rem; color: var(--text-faint); }
.dh-kpis[b-1uh3treb52] { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.dh-kpi[b-1uh3treb52] { padding: .85rem 1rem; border-right: 1px solid var(--line); }
.dh-kpi:last-child[b-1uh3treb52] { border-right: none; }
.dh-kpi .kl[b-1uh3treb52] { font-family: var(--mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.dh-kpi .kv[b-1uh3treb52] { font-family: var(--display); font-size: 1.45rem; font-weight: 600; color: var(--jet); letter-spacing: -.02em; margin-top: .2rem; }
.dh-kpi .kd[b-1uh3treb52] { font-size: .66rem; font-weight: 600; color: var(--success); margin-top: .05rem; }
.dh-chart[b-1uh3treb52] { padding: 1rem; background: var(--surface); }
.dh-chart svg[b-1uh3treb52] { width: 100%; height: 150px; display: block; }
.dh-legend[b-1uh3treb52] { display: flex; gap: 1rem; font-size: .68rem; color: var(--text-secondary); padding: 0 1rem 1rem; }
.dh-legend i[b-1uh3treb52] { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .3rem; vertical-align: middle; }

/* ── Closing CTA ── */
.tour-end[b-1uh3treb52] { padding: clamp(3.5rem, 7vw, 5.5rem) 0; background: var(--jet); position: relative; overflow: hidden; margin-top: clamp(3rem, 6vw, 5rem); }
.tour-end[b-1uh3treb52]::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 80% at 20% 40%, rgba(132,90,223,.34), transparent 60%),
    radial-gradient(ellipse 45% 70% at 85% 60%, rgba(35,183,229,.2), transparent 60%);
}
.tour-end .wrap[b-1uh3treb52] { position: relative; z-index: 1; text-align: center; }
.tour-end .done-chip[b-1uh3treb52] {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--success); background: rgba(38,191,148,.12); border: 1px solid rgba(38,191,148,.3);
  padding: .4rem .85rem; border-radius: 100px; margin-bottom: 1.3rem;
}
.tour-end h2[b-1uh3treb52] { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.04; letter-spacing: -.02em; color: #fff; max-width: 720px; margin: 0 auto .9rem; }
.tour-end p[b-1uh3treb52] { color: rgba(255,255,255,.6); font-size: 1.05rem; line-height: 1.6; max-width: 480px; margin: 0 auto 1.8rem; }
.tour-end .actions[b-1uh3treb52] { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.tour-end .note[b-1uh3treb52] { margin-top: 1.1rem; color: rgba(255,255,255,.4); font-size: .82rem; }

/* recap dots */
.recap[b-1uh3treb52] { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 2.2rem 0 0; flex-wrap: wrap; }
.recap-dot[b-1uh3treb52] { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .66rem; color: rgba(255,255,255,.5); }
.recap-dot i[b-1uh3treb52] { width: 8px; height: 8px; border-radius: 50%; }
.recap-sep[b-1uh3treb52] { color: rgba(255,255,255,.2); }
/* /Pages/Features/WorkflowAutomation.razor.rz.scp.css */
/* Hero: dark canvas */
.wf-pg-hero[b-4d1obp7tts] {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4rem);
  background: var(--jet); color: #fff; position: relative; overflow: hidden;
}
.wf-pg-hero[b-4d1obp7tts]::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 85% 0%, rgba(35,183,229,.22), transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 100%, rgba(132,90,223,.22), transparent 60%);
}
.wf-pg-hero[b-4d1obp7tts]::after {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 90%);
}
.wf-pg-hero .wrap[b-4d1obp7tts] { position: relative; z-index: 1; }
.pg-hero-grid[b-4d1obp7tts] { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; align-items: center; }
@media (max-width: 960px) { .pg-hero-grid[b-4d1obp7tts] { grid-template-columns: 1fr; } }
.wf-pg-hero .chip[b-4d1obp7tts] { background: rgba(35,183,229,.14); color: var(--powder); border-color: rgba(35,183,229,.3); }
.wf-pg-hero h1[b-4d1obp7tts] { font-family: var(--display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.03em; color: #fff; margin: 1rem 0 1rem; }
.wf-pg-hero h1 em[b-4d1obp7tts] { font-style: normal; background: linear-gradient(100deg, var(--powder), var(--dusk)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wf-pg-hero p.lead[b-4d1obp7tts] { color: rgba(255,255,255,.7); font-size: 1.08rem; line-height: 1.6; max-width: 520px; margin-bottom: 1.5rem; }
.wf-pg-hero .btn-outline[b-4d1obp7tts] { color: #fff; border-color: rgba(255,255,255,.25); }
.wf-pg-hero .btn-outline:hover[b-4d1obp7tts] { border-color: #fff; background: rgba(255,255,255,.06); }

/* Canvas */
.wf-canvas[b-4d1obp7tts] { position: relative; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 1.25rem; min-height: 440px; background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 18px 18px; box-shadow: var(--shadow-xl); }
.wf-head[b-4d1obp7tts] { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 1rem; }
.wf-name[b-4d1obp7tts] { font-size: .88rem; font-weight: 600; color: #fff; }
.wf-sub[b-4d1obp7tts] { font-family: var(--mono); font-size: .7rem; color: rgba(255,255,255,.4); }
.wf-badge[b-4d1obp7tts] { font-family: var(--mono); font-size: .65rem; color: var(--success); background: rgba(38,191,148,.12); padding: .2rem .5rem; border-radius: 4px; text-transform: uppercase; letter-spacing: .08em; }
.wf-stage[b-4d1obp7tts] { position: relative; min-height: 360px; }
@media (max-width: 640px) { .wf-stage[b-4d1obp7tts] { min-height: 520px; } }
.wf-svg[b-4d1obp7tts] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wf-svg path[b-4d1obp7tts] { stroke-dasharray: 6 5; animation: wf-dash-b-4d1obp7tts 16s linear infinite; }
@keyframes wf-dash-b-4d1obp7tts { to { stroke-dashoffset: -220; } }
.wf-node[b-4d1obp7tts] { position: absolute; background: rgba(255,255,255,.05); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: .7rem .9rem .75rem; min-width: 170px; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.wf-node .n-kind[b-4d1obp7tts] { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .35rem; display: flex; align-items: center; gap: .4rem; }
.wf-node .n-title[b-4d1obp7tts] { font-size: .9rem; font-weight: 600; }
.wf-node .n-meta[b-4d1obp7tts] { font-size: .73rem; color: rgba(255,255,255,.6); margin-top: .25rem; }
.wf-node .n-icn[b-4d1obp7tts] { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.wf-node.trigger[b-4d1obp7tts] { border-color: rgba(35,183,229,.4); box-shadow: 0 10px 30px rgba(35,183,229,.2); }
.wf-node.action[b-4d1obp7tts] { border-color: rgba(230,83,60,.4); box-shadow: 0 10px 30px rgba(230,83,60,.18); }
.wf-node.delay[b-4d1obp7tts] { border-color: rgba(255,255,255,.15); }
.wf-node.cond[b-4d1obp7tts] { border-color: rgba(245,184,73,.4); box-shadow: 0 10px 30px rgba(245,184,73,.15); }
.wf-node.end[b-4d1obp7tts] { border-color: rgba(38,191,148,.4); box-shadow: 0 10px 30px rgba(38,191,148,.2); }
.n-1[b-4d1obp7tts] { top: 0; left: 0; } .n-2[b-4d1obp7tts] { top: 10px; left: 50%; transform: translateX(-50%); } .n-3[b-4d1obp7tts] { top: 0; right: 0; }
.n-4[b-4d1obp7tts] { top: 46%; left: 10%; } .n-5[b-4d1obp7tts] { top: 46%; right: 10%; } .n-6[b-4d1obp7tts] { bottom: 0; left: 50%; transform: translateX(-50%); }
@media (max-width: 640px) { .wf-node[b-4d1obp7tts] { position: static !important; transform: none !important; margin-bottom: .6rem; width: 100%; display: block; } .wf-svg[b-4d1obp7tts] { display: none; } }
.wf-strip[b-4d1obp7tts] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 640px) { .wf-strip[b-4d1obp7tts] { grid-template-columns: repeat(2, 1fr); } }
.wf-stat[b-4d1obp7tts] { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: .8rem .9rem; }
.wf-stat .v[b-4d1obp7tts] { font-family: var(--display); font-weight: 600; font-size: 1.45rem; color: #fff; letter-spacing: -.02em; }
.wf-stat .l[b-4d1obp7tts] { font-size: .75rem; color: rgba(255,255,255,.5); }

/* Recipes */
.recipes[b-4d1obp7tts] { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--surface); }
.rec-head[b-4d1obp7tts] { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.rec-grid[b-4d1obp7tts] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 960px) { .rec-grid[b-4d1obp7tts] { grid-template-columns: 1fr; } }
.rec[b-4d1obp7tts] { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .65rem; transition: transform .2s, box-shadow .2s, border-color .2s; }
.rec:hover[b-4d1obp7tts] { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--dusk-border); }
.rec .tag[b-4d1obp7tts] { font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dusk); }
.rec.peach .tag[b-4d1obp7tts] { color: var(--peach); }
.rec.powder .tag[b-4d1obp7tts] { color: var(--powder-dark); }
.rec h4[b-4d1obp7tts] { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; color: var(--jet); }
.rec p[b-4d1obp7tts] { font-size: .92rem; color: var(--text-secondary); line-height: 1.55; }
.rec-flow[b-4d1obp7tts] { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.rec-flow .n[b-4d1obp7tts] { font-size: .72rem; padding: .3rem .55rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); color: var(--jet); }
.rec-flow .a[b-4d1obp7tts] { color: var(--text-faint); }

/* Logic */
.logic[b-4d1obp7tts] { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--bg2); }
.logic-grid[b-4d1obp7tts] { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 900px) { .logic-grid[b-4d1obp7tts] { grid-template-columns: 1fr; } }
.logic-tile[b-4d1obp7tts] { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 2rem 1.8rem; position: relative; overflow: hidden; }
.logic-tile h3[b-4d1obp7tts] { font-family: var(--display); font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; color: var(--jet); margin-bottom: .5rem; }
.logic-tile p[b-4d1obp7tts] { font-size: .98rem; color: var(--text-secondary); line-height: 1.6; }
.cond-viz[b-4d1obp7tts] { margin-top: 1.5rem; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; font-family: var(--mono); font-size: .78rem; color: var(--text-primary); display: flex; flex-direction: column; gap: .55rem; }
.cond-viz .line[b-4d1obp7tts] { display: flex; justify-content: space-between; align-items: center; }
.cond-viz .key[b-4d1obp7tts] { color: var(--dusk); font-weight: 600; }
.cond-viz .op[b-4d1obp7tts] { color: var(--text-faint); }
.cond-viz .val[b-4d1obp7tts] { color: var(--peach); }
.cond-viz .br[b-4d1obp7tts] { display: flex; gap: .4rem; margin-top: .3rem; }
.cond-viz .br span[b-4d1obp7tts] { flex: 1; padding: .5rem; border-radius: 7px; text-align: center; font-family: var(--body); font-weight: 600; font-size: .8rem; }
.cond-viz .br .yes[b-4d1obp7tts] { background: rgba(38,191,148,.1); color: var(--success); }
.cond-viz .br .no[b-4d1obp7tts] { background: var(--peach-light); color: var(--peach); }
.timing-viz[b-4d1obp7tts] { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .45rem; }
.tv-row[b-4d1obp7tts] { display: grid; grid-template-columns: 80px 1fr; gap: .75rem; align-items: center; font-size: .82rem; }
.tv-label[b-4d1obp7tts] { font-family: var(--mono); font-size: .72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .08em; }
.tv-track[b-4d1obp7tts] { height: 10px; background: var(--bg); border-radius: 6px; position: relative; overflow: hidden; }
.tv-track i[b-4d1obp7tts] { position: absolute; top: 0; bottom: 0; border-radius: 6px; }

/* CTA */
.mini-cta[b-4d1obp7tts] { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--jet); color: #fff; text-align: center; position: relative; overflow: hidden; }
.mini-cta[b-4d1obp7tts]::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(35,183,229,.28), transparent 60%); }
.mini-cta .wrap[b-4d1obp7tts] { position: relative; z-index: 1; }
.mini-cta h2[b-4d1obp7tts] { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -.02em; margin-bottom: 1rem; }
.mini-cta .actions[b-4d1obp7tts] { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
/* /Pages/Index.razor.rz.scp.css */
/* ─── HOME PAGE ─── */
.home-hero[b-ofz8zp6l1q] {
  position: relative; overflow: hidden;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(132,90,223,.18), transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 40%, rgba(35,183,229,.12), transparent 60%),
    var(--bg);
}
.home-hero[b-ofz8zp6l1q]::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(132,90,223,.09) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 90%);
}
.home-hero .wrap[b-ofz8zp6l1q] { position: relative; z-index: 1; }

.hero-grid[b-ofz8zp6l1q] {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 960px) { .hero-grid[b-ofz8zp6l1q] { grid-template-columns: 1fr; } }

.hero-tag[b-ofz8zp6l1q] {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-secondary);
  font-size: .8rem; font-weight: 500;
  padding: .35rem .35rem .35rem .85rem; border-radius: 100px;
  box-shadow: var(--shadow-sm);
}
.hero-tag .t-pill[b-ofz8zp6l1q] { background: var(--dusk); color: #fff; font-size: .7rem; font-weight: 600; padding: .2rem .6rem; border-radius: 100px; letter-spacing: .02em; }
.hero-tag strong[b-ofz8zp6l1q] { color: var(--jet); font-weight: 600; }

.hero-h1[b-ofz8zp6l1q] {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.02; letter-spacing: -.03em;
  color: var(--jet);
  margin: 1.25rem 0 1.25rem;
}
.hero-h1 em[b-ofz8zp6l1q] {
  font-style: normal;
  background: linear-gradient(120deg, var(--dusk), var(--powder));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  position: relative;
}
.hero-h1 .underline[b-ofz8zp6l1q] {
  position: relative; display: inline-block;
}
.hero-h1 .underline[b-ofz8zp6l1q]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4%;
  height: 10px; background: var(--peach-light); z-index: -1;
  border-radius: 3px;
}

.hero-sub[b-ofz8zp6l1q] {
  color: var(--text-secondary);
  font-size: 1.12rem; line-height: 1.6;
  max-width: 520px; margin-bottom: 1.75rem;
}
.hero-actions[b-ofz8zp6l1q] { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.5rem; }
.hero-proof[b-ofz8zp6l1q] { display: flex; align-items: center; gap: .85rem; color: var(--text-secondary); font-size: .87rem; }
.proof-faces[b-ofz8zp6l1q] { display: flex; }
.proof-face[b-ofz8zp6l1q] {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--bg); margin-left: -8px;
  display: grid; place-items: center; color: #fff;
  font-size: .68rem; font-weight: 600;
}
.proof-face:first-child[b-ofz8zp6l1q] { margin-left: 0; }
.proof-stars[b-ofz8zp6l1q] { color: var(--peach); letter-spacing: .1em; }

/* ── Hero visual: layered product mockup ── */
.hero-visual[b-ofz8zp6l1q] {
  position: relative;
  perspective: 1600px;
  min-height: 480px;
}
.hv-canvas[b-ofz8zp6l1q] {
  position: relative;
  transform: rotateY(-6deg) rotateX(4deg);
  transform-style: preserve-3d;
}
@media (max-width: 960px) {
  .hv-canvas[b-ofz8zp6l1q] { transform: none; }
  .hero-visual[b-ofz8zp6l1q] { min-height: 0; }
}

.hv-main[b-ofz8zp6l1q] {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.hv-bar[b-ofz8zp6l1q] {
  height: 36px; background: var(--bg2);
  display: flex; align-items: center; padding: 0 .85rem;
  gap: .4rem; border-bottom: 1px solid var(--line);
}
.hv-dot[b-ofz8zp6l1q] { width: 10px; height: 10px; border-radius: 50%; }
.hv-path[b-ofz8zp6l1q] { margin-left: .6rem; font-family: var(--mono); font-size: .72rem; color: var(--text-faint); }

.hv-grid[b-ofz8zp6l1q] {
  display: grid; grid-template-columns: 180px 1fr;
  min-height: 340px;
}
@media (max-width: 520px) { .hv-grid[b-ofz8zp6l1q] { grid-template-columns: 1fr; } .hv-side[b-ofz8zp6l1q] { display: none; } }

.hv-side[b-ofz8zp6l1q] {
  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: 1rem .9rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.hv-side-h[b-ofz8zp6l1q] { font-family: var(--mono); font-size: .65rem; text-transform: uppercase; color: var(--text-faint); letter-spacing: .1em; padding: .3rem 0 .5rem; }
.hv-side-item[b-ofz8zp6l1q] {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .55rem; border-radius: 8px;
  font-size: .83rem; color: var(--text-primary);
  cursor: default;
}
.hv-side-item .i-sq[b-ofz8zp6l1q] { width: 18px; height: 18px; border-radius: 5px; background: var(--dusk-light); color: var(--dusk); display: grid; place-items: center; font-size: .72rem; }
.hv-side-item.active[b-ofz8zp6l1q] { background: var(--surface); color: var(--jet); font-weight: 600; box-shadow: 0 1px 6px rgba(132,90,223,.08); }

.hv-body[b-ofz8zp6l1q] { padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; background: var(--bg); }

.hv-field[b-ofz8zp6l1q] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: .55rem .85rem;
  display: flex; align-items: center; gap: .75rem;
}
.hv-label[b-ofz8zp6l1q] { font-family: var(--mono); font-size: .65rem; color: var(--text-faint); text-transform: uppercase; min-width: 54px; letter-spacing: .1em; }
.hv-val[b-ofz8zp6l1q] { font-size: .86rem; color: var(--jet); font-weight: 500; }
.hv-pill[b-ofz8zp6l1q] { margin-left: auto; background: var(--dusk-light); color: var(--dusk); font-size: .7rem; font-weight: 600; padding: .15rem .55rem; border-radius: 5px; }

.hv-email[b-ofz8zp6l1q] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.hv-em-top[b-ofz8zp6l1q] {
  padding: .9rem 1rem; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(100deg, var(--dusk), var(--powder));
}
.hv-em-logo[b-ofz8zp6l1q] { font-family: var(--display); color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: -.02em; }
.hv-em-nav[b-ofz8zp6l1q] { display: flex; gap: .6rem; }
.hv-em-nav span[b-ofz8zp6l1q] { width: 28px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.45); }

.hv-em-body[b-ofz8zp6l1q] { padding: 1.15rem 1rem 1rem; text-align: center; }
.hv-em-chip[b-ofz8zp6l1q] { display: inline-block; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--peach); background: var(--peach-light); padding: .2rem .55rem; border-radius: 4px; margin-bottom: .5rem; }
.hv-em-h[b-ofz8zp6l1q] { font-family: var(--display); font-size: 1.45rem; font-weight: 600; color: var(--jet); line-height: 1; letter-spacing: -.02em; margin-bottom: .4rem; }
.hv-em-p[b-ofz8zp6l1q] { font-size: .72rem; color: var(--text-secondary); margin: 0 auto .7rem; max-width: 220px; line-height: 1.5; }
.hv-em-cta[b-ofz8zp6l1q] { display: inline-block; background: var(--peach); color: #fff; font-size: .72rem; font-weight: 600; padding: .45rem .95rem; border-radius: 6px; text-decoration: none; }

/* floating cards */
.hv-float[b-ofz8zp6l1q] {
  position: absolute; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
  padding: .85rem 1.1rem; box-shadow: var(--shadow-lg);
}
.hv-float.f-open[b-ofz8zp6l1q] {
  right: -6%; top: 20%;
  animation: fl-a-b-ofz8zp6l1q 6s ease-in-out infinite;
}
.hv-float.f-rev[b-ofz8zp6l1q] {
  left: -8%; bottom: 10%;
  animation: fl-b-b-ofz8zp6l1q 7s ease-in-out infinite;
}
@keyframes fl-a-b-ofz8zp6l1q { 0%,100%{transform:translateY(0) rotate(1deg)} 50%{transform:translateY(-8px) rotate(-1deg)} }
@keyframes fl-b-b-ofz8zp6l1q { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(8px) rotate(1deg)} }
.f-label[b-ofz8zp6l1q] { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .2rem; }
.f-val[b-ofz8zp6l1q] { font-family: var(--display); font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; }
.f-delta[b-ofz8zp6l1q] { font-size: .72rem; font-weight: 600; color: var(--success); margin-top: .15rem; }
.f-bars[b-ofz8zp6l1q] { display: flex; gap: 3px; align-items: flex-end; height: 22px; margin-top: .4rem; }
.f-bars i[b-ofz8zp6l1q] { width: 7px; border-radius: 2px 2px 0 0; display: block; }
@media (max-width: 960px) {
  .hv-float.f-open[b-ofz8zp6l1q] { right: 2%; top: -4%; }
  .hv-float.f-rev[b-ofz8zp6l1q] { left: 2%; bottom: -4%; }
}

/* ─── LOGO STRIP ─── */
.logos[b-ofz8zp6l1q] {
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.logos .wrap[b-ofz8zp6l1q] { display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 720px) { .logos .wrap[b-ofz8zp6l1q] { grid-template-columns: 1fr; gap: 1.25rem; text-align: center; } }
.logos-label[b-ofz8zp6l1q] { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.logo-row[b-ofz8zp6l1q] { display: flex; flex-wrap: wrap; gap: clamp(1rem, 4vw, 2.8rem); align-items: center; opacity: .75; }
.logo-row span[b-ofz8zp6l1q] {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem;
  letter-spacing: -.02em; color: var(--jet);
  white-space: nowrap;
}
.logo-row .glyph[b-ofz8zp6l1q] { width: 22px; height: 22px; display: inline-grid; place-items: center; margin-right: .5rem; vertical-align: middle; }

/* ─── PRODUCT SUITE ─── */
.suite[b-ofz8zp6l1q] { padding: clamp(4rem, 8vw, 6rem) 0; }
.suite-head[b-ofz8zp6l1q] { max-width: 760px; margin-bottom: 2rem; }

/* bundle bar: six products collapse into one plan */
.suite-bundle[b-ofz8zp6l1q] {
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.1rem 1.4rem;
  box-shadow: var(--shadow-sm); margin-bottom: 1.75rem;
}
.sb-products[b-ofz8zp6l1q] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .65rem; flex: 1; min-width: 0; }
.sb-chip[b-ofz8zp6l1q] { font-size: .84rem; font-weight: 500; color: var(--jet); display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.sb-chip .d[b-ofz8zp6l1q] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sb-plus[b-ofz8zp6l1q] { color: var(--text-faint); font-family: var(--mono); font-size: .8rem; }
.sb-eq[b-ofz8zp6l1q] { font-family: var(--mono); color: var(--text-faint); font-size: 1.2rem; line-height: 1; }
.sb-one[b-ofz8zp6l1q] { display: inline-flex; align-items: baseline; gap: .55rem; background: var(--jet); color: #fff; border-radius: 100px; padding: .55rem 1.15rem; white-space: nowrap; }
.sb-one b[b-ofz8zp6l1q] { font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: -.01em; }
.sb-one small[b-ofz8zp6l1q] { color: rgba(255,255,255,.55); font-size: .72rem; font-family: var(--mono); }
@media (max-width: 820px) { .suite-bundle[b-ofz8zp6l1q] { flex-direction: column; align-items: stretch; } .sb-eq[b-ofz8zp6l1q] { display: none; } .sb-one[b-ofz8zp6l1q] { justify-content: center; } }

/* product catalog grid */
.suite-grid[b-ofz8zp6l1q] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .suite-grid[b-ofz8zp6l1q] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .suite-grid[b-ofz8zp6l1q] { grid-template-columns: 1fr; } }

.suite-card[b-ofz8zp6l1q] {
  --accent: var(--dusk); --accent-light: var(--dusk-light); --accent-border: var(--dusk-border);
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.5rem 1.45rem 1.4rem;
  text-decoration: none; color: inherit; overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.suite-card[b-ofz8zp6l1q]::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform .25s;
}
.suite-card:hover[b-ofz8zp6l1q] { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-border); }
.suite-card:hover[b-ofz8zp6l1q]::before { transform: scaleY(1); }

.sc-top[b-ofz8zp6l1q] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.05rem; }
.sc-ic[b-ofz8zp6l1q] { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-light); color: var(--accent); }
.sc-ic svg[b-ofz8zp6l1q] { width: 21px; height: 21px; }
.sc-tag[b-ofz8zp6l1q] { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); padding-top: .3rem; }
.suite-card h3[b-ofz8zp6l1q] { font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.02em; color: var(--jet); line-height: 1.12; margin-bottom: .45rem; }
.suite-card p[b-ofz8zp6l1q] { color: var(--text-secondary); font-size: .9rem; line-height: 1.55; margin-bottom: 1.25rem; }
.sc-link[b-ofz8zp6l1q] { margin-top: auto; font-size: .85rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: .35rem; }
.sc-link .arr[b-ofz8zp6l1q] { transition: transform .18s; }
.suite-card:hover .sc-link .arr[b-ofz8zp6l1q] { transform: translateX(3px); }

/* ─── SECOND SHOWCASE (big product visual) ─── */
.showcase[b-ofz8zp6l1q] { padding: clamp(4rem, 8vw, 6rem) 0; background: var(--bg2); position: relative; }
.showcase-grid[b-ofz8zp6l1q] {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 960px) { .showcase-grid[b-ofz8zp6l1q] { grid-template-columns: 1fr; } }
.sc-bullets[b-ofz8zp6l1q] { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: .7rem; }
.sc-bullets li[b-ofz8zp6l1q] { display: flex; gap: .7rem; align-items: flex-start; color: var(--text-primary); font-size: .96rem; line-height: 1.55; }
.sc-bullets svg[b-ofz8zp6l1q] { flex-shrink: 0; margin-top: 2px; }

/* Dashboard mock */
.dash[b-ofz8zp6l1q] {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.dash-head[b-ofz8zp6l1q] { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.dash-tabs[b-ofz8zp6l1q] { display: flex; gap: .3rem; }
.dash-tabs span[b-ofz8zp6l1q] { font-size: .78rem; padding: .35rem .75rem; border-radius: 6px; color: var(--text-secondary); }
.dash-tabs span.active[b-ofz8zp6l1q] { background: var(--dusk-light); color: var(--dusk); font-weight: 600; }
.dash-range[b-ofz8zp6l1q] { font-family: var(--mono); font-size: .72rem; color: var(--text-faint); }
.dash-kpis[b-ofz8zp6l1q] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-bottom: 1px solid var(--line); }
.dash-kpi[b-ofz8zp6l1q] { padding: 1rem 1.25rem; border-right: 1px solid var(--line); }
.dash-kpi:last-child[b-ofz8zp6l1q] { border-right: none; }
.dash-kpi .k-label[b-ofz8zp6l1q] { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.dash-kpi .k-val[b-ofz8zp6l1q] { font-family: var(--display); font-size: 1.65rem; font-weight: 600; color: var(--jet); letter-spacing: -.02em; margin-top: .25rem; }
.dash-kpi .k-delta[b-ofz8zp6l1q] { font-size: .75rem; font-weight: 600; color: var(--success); margin-top: .1rem; }
.dash-kpi .k-delta.down[b-ofz8zp6l1q] { color: var(--peach); }
.dash-chart[b-ofz8zp6l1q] { padding: 1.25rem; height: 200px; position: relative; }
.dash-legend[b-ofz8zp6l1q] { display: flex; gap: 1rem; font-size: .75rem; color: var(--text-secondary); padding: 0 1.25rem 1.25rem; }
.dash-legend i[b-ofz8zp6l1q] { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: middle; }

/* ─── CTA STRIP ─── */
.cta[b-ofz8zp6l1q] {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  background: var(--jet); position: relative; overflow: hidden;
}
.cta[b-ofz8zp6l1q]::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(132,90,223,.35), transparent 60%),
    radial-gradient(ellipse 40% 70% at 85% 50%, rgba(35,183,229,.18), transparent 60%);
}
.cta .wrap[b-ofz8zp6l1q] { position: relative; z-index: 1; }
.cta-inner[b-ofz8zp6l1q] {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center;
}
@media (max-width: 760px) { .cta-inner[b-ofz8zp6l1q] { grid-template-columns: 1fr; text-align: center; } .cta-form[b-ofz8zp6l1q] { justify-content: center; } }
.cta h2[b-ofz8zp6l1q] { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.cta p[b-ofz8zp6l1q] { color: rgba(255,255,255,.6); margin-top: .85rem; font-size: 1.02rem; line-height: 1.6; max-width: 420px; }
.cta-form[b-ofz8zp6l1q] { display: flex; gap: .5rem; }
.cta-input[b-ofz8zp6l1q] {
  flex: 1; background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.18); border-radius: 10px;
  padding: .85rem 1rem; color: #fff; font-family: var(--body); font-size: .95rem;
  outline: none; transition: border-color .2s, background .2s;
}
.cta-input[b-ofz8zp6l1q]::placeholder { color: rgba(255,255,255,.4); }
.cta-input:focus[b-ofz8zp6l1q] { border-color: var(--powder); background: rgba(255,255,255,.14); }
.cta-note[b-ofz8zp6l1q] { margin-top: .75rem; color: rgba(255,255,255,.45); font-size: .8rem; }
@media (max-width: 520px) { .cta-form[b-ofz8zp6l1q] { flex-direction: column; } }

/* ─── BUILT FOR RESULTS (bento) ─── */
.bfr[b-ofz8zp6l1q] { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--bg); }
.bfr-grid[b-ofz8zp6l1q] {
  display: grid;
  grid-template-columns: .85fr 1.4fr;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  align-items: stretch;
}
@media (max-width: 960px) { .bfr-grid[b-ofz8zp6l1q] { grid-template-columns: 1fr; } }

.bfr-left[b-ofz8zp6l1q] { display: flex; flex-direction: column; padding-right: .5rem; }
.bfr-left h2[b-ofz8zp6l1q] {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: .98; letter-spacing: -.03em;
  color: var(--jet); text-transform: uppercase;
  margin: 1rem 0 1.1rem;
}
.bfr-left p.lead[b-ofz8zp6l1q] { color: var(--text-secondary); font-size: 1rem; line-height: 1.55; margin-bottom: 1.75rem; max-width: 340px; }
.bfr-left p.lead em[b-ofz8zp6l1q] { font-style: normal; color: var(--jet); font-weight: 600; }

.bfr-steps[b-ofz8zp6l1q] { list-style: none; display: flex; flex-direction: column; gap: .25rem; }
.bfr-step[b-ofz8zp6l1q] {
  display: grid; grid-template-columns: 44px 1fr; gap: .5rem;
  padding: .9rem .9rem .95rem;
  border-radius: 12px;
  border-top: 1px solid transparent;
  transition: background .2s, border-color .2s;
  cursor: default;
}
.bfr-step + .bfr-step[b-ofz8zp6l1q] { border-top-color: var(--line); }
.bfr-step .num[b-ofz8zp6l1q] { font-family: var(--mono); font-size: .82rem; font-weight: 600; color: var(--powder-dark); padding-top: 2px; }
.bfr-step h4[b-ofz8zp6l1q] { font-family: var(--body); font-size: .95rem; font-weight: 600; color: var(--jet); margin-bottom: .2rem; }
.bfr-step p[b-ofz8zp6l1q] { font-size: .85rem; color: var(--text-secondary); line-height: 1.5; }
.bfr-step:hover[b-ofz8zp6l1q], .bfr-step.active[b-ofz8zp6l1q] {
  background: rgba(132,90,223,.06);
  border-top-color: transparent;
}
.bfr-step.active + .bfr-step[b-ofz8zp6l1q] { border-top-color: transparent; }

.bfr-right[b-ofz8zp6l1q] { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; gap: clamp(1rem, 2vw, 1.5rem); }
.bfr-right-row[b-ofz8zp6l1q] { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 640px) { .bfr-right-row[b-ofz8zp6l1q] { grid-template-columns: 1fr; } }

.bfr-card[b-ofz8zp6l1q] {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
  display: flex; flex-direction: column; gap: 1rem;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.bfr-card:hover[b-ofz8zp6l1q] { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--dusk-border); }
.bfr-card .eyebrow[b-ofz8zp6l1q] {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .4rem;
}
.bfr-card h3[b-ofz8zp6l1q] {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.05; letter-spacing: -.02em;
  color: var(--jet); text-transform: uppercase;
}
.bfr-card p[b-ofz8zp6l1q] { font-size: .93rem; line-height: 1.55; color: var(--text-secondary); }

.bfr-card.wide[b-ofz8zp6l1q] { grid-column: 1 / -1; }
.bfr-card.a .eyebrow[b-ofz8zp6l1q] { color: var(--peach); }
.bfr-card.b .eyebrow[b-ofz8zp6l1q] { color: var(--dusk); }
.bfr-card.c .eyebrow[b-ofz8zp6l1q] { color: var(--success); }
.bfr-card.d .eyebrow[b-ofz8zp6l1q] { color: var(--peach); }

/* Automation chips */
.bfr-chips[b-ofz8zp6l1q] { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .25rem; }
.bfr-chip[b-ofz8zp6l1q] {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .8rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  font-size: .83rem; color: var(--jet); font-weight: 500;
  box-shadow: 0 1px 2px rgba(27,28,46,.04);
}
.bfr-chip.peach[b-ofz8zp6l1q] { background: var(--peach-light); border-color: var(--peach-border); color: var(--peach-dark); }
.bfr-chip.powder[b-ofz8zp6l1q] { background: var(--powder-light); border-color: var(--powder-border); color: var(--powder-dark); }
.bfr-chip.mint[b-ofz8zp6l1q] { background: rgba(38,191,148,.12); border-color: rgba(38,191,148,.3); color: var(--success); }
.bfr-arr[b-ofz8zp6l1q] { color: var(--text-faint); font-family: var(--mono); }

/* Analytics mini chart */
.bfr-chart[b-ofz8zp6l1q] { margin-top: .25rem; }
.bfr-chart svg[b-ofz8zp6l1q] { width: 100%; height: 130px; display: block; }
.bfr-days[b-ofz8zp6l1q] { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .68rem; color: var(--text-faint); padding: 0 2px; }

/* Deliverability donut */
.bfr-deliv[b-ofz8zp6l1q] { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; align-items: center; margin-top: .5rem; }
.bfr-deliv-legend[b-ofz8zp6l1q] { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; }
.bfr-deliv-legend .row[b-ofz8zp6l1q] { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: .5rem; }
.bfr-deliv-legend i[b-ofz8zp6l1q] { width: 10px; height: 10px; border-radius: 2px; }
.bfr-deliv-legend .v[b-ofz8zp6l1q] { font-family: var(--mono); font-weight: 600; }
.bfr-deliv-legend .v.g[b-ofz8zp6l1q] { color: var(--success); }
.bfr-deliv-legend .v.r[b-ofz8zp6l1q] { color: var(--peach); }
.bfr-deliv-legend .v.m[b-ofz8zp6l1q] { color: var(--text-faint); }

/* Segments pills */
.bfr-seg[b-ofz8zp6l1q] { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .25rem; }
.bfr-seg-pill[b-ofz8zp6l1q] {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .75rem; border-radius: 100px;
  font-size: .82rem; font-weight: 500;
}
.bfr-seg-pill .cnt[b-ofz8zp6l1q] { font-family: var(--mono); font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: 100px; background: rgba(255,255,255,.65); }
.bfr-seg-pill.peach[b-ofz8zp6l1q] { background: var(--peach-light); color: var(--peach-dark); }
.bfr-seg-pill.mint[b-ofz8zp6l1q] { background: rgba(38,191,148,.14); color: var(--success); }
.bfr-seg-pill.powder[b-ofz8zp6l1q] { background: var(--powder-light); color: var(--powder-dark); }
.bfr-seg-pill.amber[b-ofz8zp6l1q] { background: rgba(245,184,73,.18); color: #A06B00; }
.bfr-seg-pill.dusk[b-ofz8zp6l1q] { background: var(--dusk-light); color: var(--dusk); }
/* /Pages/Pricing.razor.rz.scp.css */
/* ═════════ PRICING PAGE ═════════ */

/* Hero */
.pr-hero[b-elwxt1ugme] {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(132,90,223,.18), transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 40%, rgba(35,183,229,.10), transparent 60%),
    var(--bg);
  text-align: center; position: relative; overflow: hidden;
}
.pr-hero[b-elwxt1ugme]::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(132,90,223,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 90%);
}
.pr-hero .wrap[b-elwxt1ugme] { position: relative; z-index: 1; }
.pr-hero h1[b-elwxt1ugme] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  line-height: .96; letter-spacing: .01em;
  color: var(--jet); text-transform: uppercase;
  margin: 1.25rem 0 1rem;
}
.pr-hero h1 em[b-elwxt1ugme] {
  font-style: normal;
  background: linear-gradient(120deg, var(--dusk), var(--powder));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pr-hero p.lead[b-elwxt1ugme] {
  color: var(--text-secondary); font-size: 1.12rem; max-width: 620px;
  margin: 0 auto 2rem; line-height: 1.55;
}

/* Meter switch (main story) */
.pr-tiers[b-elwxt1ugme] {
  display: inline-grid; grid-template-columns: 1fr 1fr;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: .4rem;
  box-shadow: var(--shadow-sm);
  max-width: 560px; width: 100%;
  gap: .3rem;
}
.pr-tier-btn[b-elwxt1ugme] {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .25rem;
  border: none; background: transparent; cursor: pointer;
  padding: 1rem 1.25rem; border-radius: 14px;
  text-align: left;
  font-family: var(--body);
  transition: background .2s, color .2s;
  color: var(--text-secondary);
}
.pr-tier-btn .label[b-elwxt1ugme] {
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
}
.pr-tier-btn .name[b-elwxt1ugme] { font-family: var(--display); font-size: 1.45rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1; color: inherit; }
.pr-tier-btn .desc[b-elwxt1ugme] { font-size: .78rem; color: var(--text-secondary); line-height: 1.4; }
.pr-tier-btn.active[b-elwxt1ugme] {
  background: var(--dusk); color: #fff;
  box-shadow: 0 6px 20px rgba(132,90,223,.25);
}
.pr-tier-btn.active .label[b-elwxt1ugme] { color: rgba(255,255,255,.65); }
.pr-tier-btn.active .name[b-elwxt1ugme] { color: #fff; }
.pr-tier-btn.active .desc[b-elwxt1ugme] { color: rgba(255,255,255,.8); }
@media (max-width:560px){ .pr-tiers[b-elwxt1ugme]{ grid-template-columns: 1fr; } }

/* Plan section */
.pr-plans[b-elwxt1ugme] { padding: 2.5rem 0 clamp(3rem, 5vw, 4.5rem); background: var(--bg); }
.pr-pane[b-elwxt1ugme] { display: none; }
.pr-pane.active[b-elwxt1ugme] { display: block; animation: fadeUp-b-elwxt1ugme .35s ease; }
@keyframes fadeUp-b-elwxt1ugme { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }

.pr-pane-head[b-elwxt1ugme] {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin: 0 0 2rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}
.pr-pane-head h2[b-elwxt1ugme] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: .01em; line-height: 1; text-transform: uppercase;
  color: var(--jet);
}
.pr-pane-head h2 em[b-elwxt1ugme] { font-style: normal; color: var(--dusk); }
.pr-pane-head p[b-elwxt1ugme] { font-size: .9rem; color: var(--text-secondary); max-width: 420px; text-align: right; line-height: 1.55; }
@media (max-width:780px){
  .pr-pane-head[b-elwxt1ugme]{ flex-direction: column; align-items: flex-start; }
  .pr-pane-head p[b-elwxt1ugme]{ text-align: left; }
}

/* ─── Slider-driven single plan card ─── */
.pr-slider-wrap[b-elwxt1ugme] {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  box-shadow: var(--shadow-sm);
  max-width: 1040px; margin: 0 auto;
}

.pr-slider-head[b-elwxt1ugme] {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.pr-slider-head .eyebrow[b-elwxt1ugme] {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 600;
}
.pr-slider-head .readout[b-elwxt1ugme] {
  font-family: var(--mono); font-size: .78rem; color: var(--text-secondary);
  background: var(--bg2); padding: .4rem .75rem; border-radius: 100px;
}
.pr-slider-head .readout strong[b-elwxt1ugme] { color: var(--dusk); font-weight: 700; }

/* Slider track */
.pr-slider[b-elwxt1ugme] {
  position: relative; padding: 2.5rem .5rem 3.25rem;
}
.pr-slider-track[b-elwxt1ugme] {
  position: relative; height: 8px;
  background: var(--bg2); border-radius: 100px;
  overflow: visible;
}
.pr-slider-fill[b-elwxt1ugme] {
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, var(--success) 0%, var(--dusk) 100%);
  border-radius: 100px;
  transition: width .35s cubic-bezier(.3,1,.35,1);
}
.pr-slider-ticks[b-elwxt1ugme] {
  position: absolute; inset: 0; display: flex; justify-content: space-between;
  pointer-events: none;
}
.pr-slider-tick[b-elwxt1ugme] {
  position: relative;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line2);
  transform: translateY(-3px);
  transition: border-color .25s, background .25s, transform .25s;
  pointer-events: auto; cursor: pointer;
}
.pr-slider-tick.filled[b-elwxt1ugme] { border-color: var(--dusk); background: var(--dusk); }
.pr-slider-tick.current[b-elwxt1ugme] {
  border-color: var(--dusk); background: #fff;
  transform: translateY(-6px) scale(1.4);
  box-shadow: 0 0 0 6px rgba(132,90,223,.15), 0 4px 12px rgba(132,90,223,.3);
}
.pr-slider-tick .tick-label[b-elwxt1ugme] {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap;
  transition: color .2s;
}
.pr-slider-tick.current .tick-label[b-elwxt1ugme] { color: var(--dusk); }
.pr-slider-tick.filled:not(.current) .tick-label[b-elwxt1ugme] { color: var(--text-secondary); }
@media (max-width: 680px) {
  .pr-slider-tick .tick-label[b-elwxt1ugme] { font-size: .58rem; }
}

/* Native range input laid over the visual track for drag/keyboard support */
.pr-slider-input[b-elwxt1ugme] {
  position: absolute; top: 1.75rem; left: 0; right: 0;
  width: 100%; height: 40px;
  background: transparent; -webkit-appearance: none; appearance: none;
  cursor: grab; margin: 0; padding: 0;
}
.pr-slider-input:active[b-elwxt1ugme] { cursor: grabbing; }
.pr-slider-input[b-elwxt1ugme]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; cursor: grab;
}
.pr-slider-input[b-elwxt1ugme]::-moz-range-thumb {
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: none; cursor: grab;
}
.pr-slider-input[b-elwxt1ugme]::-webkit-slider-runnable-track { background: transparent; }
.pr-slider-input[b-elwxt1ugme]::-moz-range-track { background: transparent; }
.pr-slider-input:focus-visible[b-elwxt1ugme] {
  outline: 2px dashed var(--dusk); outline-offset: 8px; border-radius: 8px;
}

/* Single plan card that morphs */
.pl-single[b-elwxt1ugme] {
  margin-top: 2.75rem;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  background: linear-gradient(180deg, #fff 0%, #faf7ff 100%);
  border: 1px solid var(--dusk-border);
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative; overflow: hidden;
  transition: border-color .3s, background .3s;
}
.pl-single.is-free[b-elwxt1ugme] {
  background: linear-gradient(180deg, #fff 0%, rgba(38,191,148,.08) 100%);
  border-color: rgba(38,191,148,.35);
}
.pl-single.is-top[b-elwxt1ugme] {
  background: linear-gradient(180deg, #fff 0%, rgba(35,183,229,.08) 100%);
  border-color: rgba(35,183,229,.35);
}
@media (max-width: 780px) {
  .pl-single[b-elwxt1ugme] { grid-template-columns: 1fr; }
}

.pl-single .pl-badge[b-elwxt1ugme] {
  position: absolute; top: 1rem; right: 1rem; left: auto; transform: none;
  background: var(--dusk); color: #fff; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding: .3rem .75rem; border-radius: 100px; white-space: nowrap;
}

.pl-left[b-elwxt1ugme] { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.pl-left .pl-label[b-elwxt1ugme] {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dusk);
}
.pl-single.is-free .pl-left .pl-label[b-elwxt1ugme] { color: var(--success); }
.pl-single.is-top .pl-left .pl-label[b-elwxt1ugme] { color: var(--powder-dark, #1b8cb3); }

.pl-left .pl-name[b-elwxt1ugme] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 4rem);
  letter-spacing: .02em; text-transform: uppercase; line-height: .95;
  color: var(--jet);
}
.pl-left .pl-tag[b-elwxt1ugme] {
  font-size: 1rem; color: var(--text-secondary); line-height: 1.55;
  max-width: 420px;
}
.pl-left .pl-cta[b-elwxt1ugme] { margin-top: .75rem; display: flex; gap: .6rem; flex-wrap: wrap; }

.pl-right[b-elwxt1ugme] {
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.pl-price-wrap[b-elwxt1ugme] { display: flex; align-items: baseline; gap: .25rem; }
.pl-currency[b-elwxt1ugme] { font-size: 1.6rem; font-weight: 700; color: var(--text-faint); }
.pl-amount[b-elwxt1ugme] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(3.5rem, 6vw, 5rem); letter-spacing: .01em; line-height: 1;
  color: var(--jet);
}
.pl-per[b-elwxt1ugme] { color: var(--text-secondary); font-size: .95rem; margin-left: .3rem; }

.pl-stats[b-elwxt1ugme] {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  border-top: 1px solid var(--line); padding-top: 1rem;
}
.pl-stat .k[b-elwxt1ugme] {
  font-family: var(--mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
  display: block; margin-bottom: .2rem;
}
.pl-stat .v[b-elwxt1ugme] {
  font-size: 1rem; color: var(--jet); font-weight: 600;
}
.pl-stat .v.mono[b-elwxt1ugme] {
  font-family: var(--mono); font-size: .82rem; font-weight: 500;
  color: var(--text-secondary);
}

.pl-single .btn[b-elwxt1ugme] { justify-content: center; }

/* ─── Custom plan (full-bleed, redesigned) ─── */
.pr-custom[b-elwxt1ugme] {
  margin-top: 1.75rem;
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 100% at 100% 50%, rgba(35,183,229,.22), transparent 60%),
    radial-gradient(ellipse 60% 100% at 0% 50%, rgba(132,90,223,.30), transparent 60%),
    var(--jet);
  border-radius: 22px;
  color: #fff;
  padding: clamp(2rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.pr-custom[b-elwxt1ugme]::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.pr-custom > *[b-elwxt1ugme] { position: relative; z-index: 1; }
@media (max-width:880px){ .pr-custom[b-elwxt1ugme]{ grid-template-columns: 1fr; } }
.pr-custom-eyebrow[b-elwxt1ugme] {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--powder); font-weight: 600;
  display: inline-flex; align-items: center; gap: .55rem;
}
.pr-custom-eyebrow[b-elwxt1ugme]::before {
  content:''; width: 28px; height: 1px; background: var(--powder);
}
.pr-custom h3[b-elwxt1ugme] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  letter-spacing: .02em; line-height: 1; text-transform: uppercase;
  color: #fff; margin: .9rem 0 1rem;
}
.pr-custom h3 em[b-elwxt1ugme] { font-style: normal; color: var(--powder); }
.pr-custom p[b-elwxt1ugme] {
  color: rgba(255,255,255,.7);
  font-size: 1rem; line-height: 1.6; max-width: 480px;
  margin-bottom: 1.5rem;
}
.pr-custom-ctas[b-elwxt1ugme] { display: flex; gap: .6rem; flex-wrap: wrap; }
.pr-custom-ctas .btn-outline[b-elwxt1ugme] { color: #fff; border-color: rgba(255,255,255,.3); }
.pr-custom-ctas .btn-outline:hover[b-elwxt1ugme] { border-color: #fff; }

/* Perk grid on the right side of Custom */
.pr-custom-perks[b-elwxt1ugme] {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
}
.pr-custom-perk[b-elwxt1ugme] {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 1rem 1.1rem;
}
.pr-custom-perk .ic[b-elwxt1ugme] {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(35,183,229,.18); color: var(--powder);
  display: grid; place-items: center; margin-bottom: .6rem;
}
.pr-custom-perk:nth-child(2) .ic[b-elwxt1ugme] { background: rgba(132,90,223,.2); color: #b9a0ef; }
.pr-custom-perk:nth-child(3) .ic[b-elwxt1ugme] { background: rgba(230,83,60,.18); color: #ff8d76; }
.pr-custom-perk:nth-child(4) .ic[b-elwxt1ugme] { background: rgba(38,191,148,.18); color: #47d7ac; }
.pr-custom-perk h5[b-elwxt1ugme] {
  font-family: var(--body); font-size: .92rem; font-weight: 600;
  color: #fff; margin-bottom: .2rem;
}
.pr-custom-perk p[b-elwxt1ugme] {
  font-size: .78rem; color: rgba(255,255,255,.6); line-height: 1.45;
  margin: 0; max-width: none;
}

/* ─── VS COMPETITORS ─── */
.pr-vs[b-elwxt1ugme] {
  background: var(--bg2);
  padding: clamp(3rem, 6vw, 5rem) 0;
  position: relative; overflow: hidden;
}
.pr-vs[b-elwxt1ugme]::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle, rgba(132,90,223,.08) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 90%);
}
.pr-vs .wrap[b-elwxt1ugme] { position: relative; z-index: 1; }
.pr-vs-head[b-elwxt1ugme] { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.pr-vs-head h2[b-elwxt1ugme] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  letter-spacing: .01em; line-height: 1; text-transform: uppercase;
  color: var(--jet); margin: 1rem 0 .75rem;
}
.pr-vs-head h2 em[b-elwxt1ugme] { font-style: normal; color: var(--peach); }
.pr-vs-head p[b-elwxt1ugme] { color: var(--text-secondary); font-size: 1rem; line-height: 1.6; max-width: 520px; margin: 0 auto; }

/* Meter toggle for the comparison */
.vs-meter-toggle[b-elwxt1ugme] {
  display: inline-flex; gap: .25rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 100px; padding: .3rem;
  margin: 0 auto 1.25rem; box-shadow: var(--shadow-sm);
}
.vs-meter-toggle-wrap[b-elwxt1ugme] { display: flex; justify-content: center; }
.vs-meter-toggle button[b-elwxt1ugme] {
  border: none; background: transparent; cursor: pointer;
  padding: .55rem 1.4rem; border-radius: 100px;
  font-family: var(--body); font-size: .85rem; font-weight: 600;
  color: var(--text-secondary); transition: all .18s;
}
.vs-meter-toggle button.active[b-elwxt1ugme] {
  background: var(--jet); color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
/* center the inline-flex via a flex container — quick wrap */
.pr-vs .vs-meter-toggle[b-elwxt1ugme] { display: inline-flex; }
.pr-vs .vs-meter-toggle[b-elwxt1ugme]::before { content: ''; }
.pr-vs > .wrap[b-elwxt1ugme] { text-align: center; }
.pr-vs > .wrap > .vs-race[b-elwxt1ugme],
.pr-vs > .wrap > .vs-hikes[b-elwxt1ugme],
.pr-vs > .wrap > .vs-punch[b-elwxt1ugme] { text-align: left; }

.vs-scenario button[b-elwxt1ugme] {
  border: 1px solid var(--line2); background: var(--surface);
  cursor: pointer; padding: .55rem 1rem; border-radius: 100px;
  font-family: var(--body); font-size: .82rem; font-weight: 600;
  color: var(--text-secondary); transition: all .18s;
  display: inline-flex; align-items: center; gap: .5rem;
}
.vs-scenario button .dot[b-elwxt1ugme] { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); transition: background .18s; }
.vs-scenario button:hover[b-elwxt1ugme] { border-color: var(--dusk); color: var(--dusk); }
.vs-scenario button.active[b-elwxt1ugme] {
  background: var(--dusk); color: #fff; border-color: var(--dusk);
  box-shadow: 0 4px 14px rgba(132,90,223,.22);
}
.vs-scenario button.active .dot[b-elwxt1ugme] { background: var(--peach); }

.vs-race-foot[b-elwxt1ugme] {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px dashed var(--line);
  text-align: center;
}
.vs-foot-pill[b-elwxt1ugme] {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  color: var(--text-faint); text-transform: uppercase;
}

/* Price-hike narrative */
.vs-hikes[b-elwxt1ugme] {
  max-width: 1040px; margin: 3rem auto 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}
.vs-hikes h3[b-elwxt1ugme] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: .01em; line-height: 1; text-transform: uppercase;
  color: var(--jet); margin-bottom: .5rem;
}
.vs-hikes h3 em[b-elwxt1ugme] { font-style: normal; color: var(--peach); }
.vs-hikes-sub[b-elwxt1ugme] { color: var(--text-secondary); font-size: .92rem; line-height: 1.55; margin-bottom: 1.5rem; max-width: 600px; }
.vs-hikes-grid[b-elwxt1ugme] { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (max-width: 680px){ .vs-hikes-grid[b-elwxt1ugme] { grid-template-columns: 1fr; } }
.vs-hike[b-elwxt1ugme] {
  display: grid; grid-template-columns: 130px 1fr 90px; gap: 1rem;
  align-items: center; padding: .75rem .9rem;
  background: var(--bg2); border-radius: 12px;
}
.vs-hike.us[b-elwxt1ugme] {
  background: linear-gradient(90deg, rgba(132,90,223,.1), rgba(132,90,223,.04));
  border: 1px solid var(--dusk-border);
}
.vs-hike-name[b-elwxt1ugme] {
  font-weight: 600; font-size: .9rem; color: var(--jet);
  display: flex; flex-direction: column; gap: .15rem;
}
.vs-hike-name .sub[b-elwxt1ugme] {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em;
  color: var(--text-faint); text-transform: uppercase; font-weight: 500;
}
.vs-hike-bar[b-elwxt1ugme] { position: relative; height: 8px; background: rgba(0,0,0,.06); border-radius: 4px; overflow: hidden; }
.vs-hike-bar-fill[b-elwxt1ugme] {
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, var(--peach), #ff8d76);
  border-radius: 4px; transition: width 1s cubic-bezier(.3,1,.35,1);
}
.vs-hike.us .vs-hike-bar-fill[b-elwxt1ugme] {
  background: linear-gradient(90deg, var(--dusk-dark), var(--dusk));
}
.vs-hike-pct[b-elwxt1ugme] {
  text-align: right;
  font-family: var(--mono); font-size: .85rem; font-weight: 700;
  color: var(--peach);
}
.vs-hike.us .vs-hike-pct[b-elwxt1ugme] { color: var(--success); }

.vs-race[b-elwxt1ugme] {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-md);
  max-width: 1040px; margin: 0 auto;
}
.vs-race-head[b-elwxt1ugme] {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
  gap: 1rem; flex-wrap: wrap;
}
.vs-race-h-left[b-elwxt1ugme] { display: flex; flex-direction: column; gap: .2rem; }
.vs-race-h-left .eyebrow[b-elwxt1ugme] {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint);
}
.vs-race-h-left .title[b-elwxt1ugme] {
  font-family: var(--display); font-size: 1.4rem; letter-spacing: .02em;
  color: var(--jet); text-transform: uppercase; line-height: 1;
}
.vs-race-h-right[b-elwxt1ugme] {
  font-family: var(--mono); font-size: .72rem;
  color: var(--text-secondary);
  display: inline-flex; gap: 1rem; flex-wrap: wrap;
}
.vs-race-h-right .key[b-elwxt1ugme] { display: inline-flex; align-items: center; gap: .4rem; }
.vs-race-h-right .key i[b-elwxt1ugme] { width: 10px; height: 10px; border-radius: 2px; }

.vs-rows[b-elwxt1ugme] { display: flex; flex-direction: column; gap: .75rem; }
.vs-row[b-elwxt1ugme] {
  display: grid; grid-template-columns: 160px 1fr 110px;
  gap: 1rem; align-items: center;
  padding: .75rem .25rem;
}
@media (max-width: 680px){ .vs-row[b-elwxt1ugme]{ grid-template-columns: 1fr; gap: .35rem; } }
.vs-row.us[b-elwxt1ugme] { background: var(--dusk-light); border-radius: 12px; padding: .85rem .75rem; }

.vs-name[b-elwxt1ugme] {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 600; font-size: .94rem; color: var(--jet);
}
.vs-name .tag[b-elwxt1ugme] {
  background: var(--dusk); color: #fff;
  font-family: var(--mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .08em; padding: .15rem .4rem; border-radius: 4px;
  text-transform: uppercase;
}

.vs-bar-wrap[b-elwxt1ugme] {
  position: relative; height: 36px;
  background: var(--bg2); border-radius: 8px;
  overflow: visible;
}
.vs-bar[b-elwxt1ugme] {
  height: 100%; border-radius: 8px;
  background: linear-gradient(90deg, rgba(230,83,60,.85), var(--peach));
  width: 0; transition: width .9s cubic-bezier(.3,1,.35,1);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: .75rem;
  color: #fff; font-family: var(--mono); font-size: .82rem; font-weight: 600;
  min-width: 54px;
  box-shadow: 0 2px 8px rgba(230,83,60,.2);
}
.vs-row.us .vs-bar[b-elwxt1ugme] {
  background: linear-gradient(90deg, var(--dusk-dark), var(--dusk));
  box-shadow: 0 2px 8px rgba(132,90,223,.3);
}

.vs-saved[b-elwxt1ugme] {
  text-align: right;
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  color: var(--success);
}
.vs-row.us .vs-saved[b-elwxt1ugme] { color: var(--dusk); font-weight: 700; }
.vs-saved .sub[b-elwxt1ugme] { display: block; font-size: .64rem; color: var(--text-faint); font-weight: 500; margin-top: 2px; text-transform: uppercase; letter-spacing: .1em; }

.vs-punch[b-elwxt1ugme] {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin-top: 2.5rem; max-width: 1040px; margin-left: auto; margin-right: auto;
}
@media (max-width:780px){ .vs-punch[b-elwxt1ugme]{ grid-template-columns: 1fr; } }
.vs-punch-card[b-elwxt1ugme] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 1.5rem 1.25rem;
  text-align: left;
  display: flex; flex-direction: column; gap: .35rem;
  position: relative; overflow: hidden;
}
.vs-punch-card[b-elwxt1ugme]::before {
  content:''; position:absolute; top:0; left:0; width:4px; height:100%;
}
.vs-punch-card.a[b-elwxt1ugme]::before { background: var(--dusk); }
.vs-punch-card.b[b-elwxt1ugme]::before { background: var(--peach); }
.vs-punch-card.c[b-elwxt1ugme]::before { background: var(--success); }
.vs-punch-card .big[b-elwxt1ugme] {
  font-family: var(--display); font-size: 3rem; line-height: 1;
  letter-spacing: .01em; color: var(--jet);
  margin: .25rem 0;
}
.vs-punch-card.a .big[b-elwxt1ugme] { color: var(--dusk); }
.vs-punch-card.b .big[b-elwxt1ugme] { color: var(--peach); }
.vs-punch-card.c .big[b-elwxt1ugme] { color: var(--success); }
.vs-punch-card .eyebrow[b-elwxt1ugme] {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 600;
}
.vs-punch-card p[b-elwxt1ugme] { font-size: .87rem; color: var(--text-secondary); line-height: 1.5; }

/* Guarantee */
.pr-guarantee[b-elwxt1ugme] { background: var(--bg); padding: clamp(2rem, 4vw, 3rem) 0; }
.pr-guar-card[b-elwxt1ugme] {
  background: linear-gradient(120deg, var(--surface) 0%, var(--dusk-light) 100%);
  border: 1px solid var(--dusk-border);
  border-radius: 20px; padding: 2rem;
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem;
  align-items: center;
}
@media (max-width: 780px){ .pr-guar-card[b-elwxt1ugme]{ grid-template-columns: 1fr; text-align: center; } }
.pr-guar-ic[b-elwxt1ugme] {
  width: 64px; height: 64px; border-radius: 16px;
  background: #fff; border: 1px solid var(--dusk-border);
  display: grid; place-items: center;
  color: var(--dusk);
}
@media (max-width: 780px){ .pr-guar-ic[b-elwxt1ugme]{ margin: 0 auto; } }
.pr-guar-card h3[b-elwxt1ugme] { font-family: var(--display); font-weight: 600; font-size: 1.7rem; letter-spacing: .02em; color: var(--jet); text-transform: uppercase; line-height: 1.05; }
.pr-guar-card p[b-elwxt1ugme] { color: var(--text-secondary); font-size: .92rem; line-height: 1.55; margin-top: .3rem; max-width: 560px; }
@media (max-width: 780px){ .pr-guar-card p[b-elwxt1ugme]{ margin: .3rem auto 0; } }

/* FAQ */
.pr-faq[b-elwxt1ugme] { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--bg); }
.pr-faq-grid[b-elwxt1ugme] { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: .65rem; }
.pr-faq h2[b-elwxt1ugme] {
  text-align: center; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing: .01em; line-height: 1; text-transform: uppercase;
  color: var(--jet); margin-bottom: 2rem;
}
.pr-faq details[b-elwxt1ugme] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s;
}
.pr-faq details[open][b-elwxt1ugme] { border-color: var(--dusk-border); box-shadow: var(--shadow-sm); }
.pr-faq summary[b-elwxt1ugme] {
  padding: 1.1rem 1.35rem; font-weight: 600; color: var(--jet);
  font-size: 1rem; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  list-style: none;
}
.pr-faq summary[b-elwxt1ugme]::-webkit-details-marker { display: none; }
.pr-faq summary[b-elwxt1ugme]::after {
  content: '+'; font-size: 1.5rem; font-weight: 300; color: var(--dusk);
  transition: transform .2s;
}
.pr-faq details[open] summary[b-elwxt1ugme]::after { transform: rotate(45deg); }
.pr-faq details p[b-elwxt1ugme] {
  padding: 0 1.35rem 1.3rem;
  color: var(--text-secondary); font-size: .92rem; line-height: 1.6;
}
/* /Pages/Support.razor.rz.scp.css */
.sp-hero[b-iin51gg8bb] {
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  background: var(--bg);
  text-align: center;
}
.sp-hero h1[b-iin51gg8bb] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  line-height: .96; letter-spacing: .01em;
  color: var(--jet); text-transform: uppercase;
  margin: 1rem 0 1rem;
}
.sp-hero p[b-iin51gg8bb] { color: var(--text-secondary); font-size: 1.1rem; max-width: 580px; margin: 0 auto 2rem; line-height: 1.55; }
.sp-search[b-iin51gg8bb] {
  max-width: 560px; margin: 0 auto;
  display: flex; gap: .5rem;
  background: var(--surface); border: 1.5px solid var(--line);
  padding: .3rem .3rem .3rem 1.25rem;
  border-radius: 100px; box-shadow: var(--shadow-sm);
  align-items: center;
}
.sp-search input[b-iin51gg8bb] {
  flex: 1; border: none; outline: none;
  font-family: var(--body); font-size: 1rem;
  padding: .65rem 0; background: transparent; color: var(--jet);
}
.sp-search button[b-iin51gg8bb] {
  background: var(--dusk); color: #fff; border: none; cursor: pointer;
  border-radius: 100px; padding: .7rem 1.3rem;
  font-family: var(--body); font-weight: 600; font-size: .9rem;
}

.sp-cards[b-iin51gg8bb] {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--bg);
}
.sp-grid[b-iin51gg8bb] {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
@media (max-width: 860px) { .sp-grid[b-iin51gg8bb] { grid-template-columns: 1fr; } }
.sp-card[b-iin51gg8bb] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.75rem; transition: border-color .2s, transform .2s, box-shadow .2s;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: .75rem;
}
.sp-card:hover[b-iin51gg8bb] { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--dusk-border); }
.sp-card .ic[b-iin51gg8bb] {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--dusk-light); color: var(--dusk);
}
.sp-card.b .ic[b-iin51gg8bb] { background: var(--peach-light); color: var(--peach); }
.sp-card.c .ic[b-iin51gg8bb] { background: var(--powder-light); color: var(--powder-dark); }
.sp-card h3[b-iin51gg8bb] {
  font-family: var(--display); font-weight: 600;
  font-size: 1.65rem; letter-spacing: .02em; line-height: 1; text-transform: uppercase;
  color: var(--jet);
}
.sp-card p[b-iin51gg8bb] { color: var(--text-secondary); font-size: .92rem; line-height: 1.55; }
.sp-card .more[b-iin51gg8bb] { font-weight: 600; color: var(--dusk); font-size: .88rem; margin-top: .25rem; }

.sp-contact[b-iin51gg8bb] {
  padding: clamp(3rem, 5vw, 4.5rem) 0;
  background: var(--jet); color: #fff; text-align: center;
}
.sp-contact h2[b-iin51gg8bb] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  letter-spacing: .02em; line-height: 1; text-transform: uppercase;
}
.sp-contact p[b-iin51gg8bb] { color: rgba(255,255,255,.6); margin: 1rem auto 1.75rem; max-width: 480px; }
.sp-contact .btns[b-iin51gg8bb] { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
/* /Pages/WhyVaakio.razor.rz.scp.css */
/* ═════════ WHY VAAKIO ═════════ */

/* ─── Hero ─── */
.wv-hero[b-9g12xwl4zz] {
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  background:
    radial-gradient(ellipse 70% 55% at 82% -5%, rgba(132,90,223,.16), transparent 60%),
    radial-gradient(ellipse 55% 55% at 0% 60%, rgba(35,183,229,.10), transparent 60%),
    var(--bg);
  position: relative; overflow: hidden;
}
.wv-hero[b-9g12xwl4zz]::before {
  content:''; position:absolute; inset:0; z-index:0;
  background-image: radial-gradient(circle, rgba(132,90,223,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 20%, #000 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 20%, #000 35%, transparent 85%);
}
.wv-hero .wrap[b-9g12xwl4zz] { position: relative; z-index: 1; }
.wv-hero-grid[b-9g12xwl4zz] {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 920px){ .wv-hero-grid[b-9g12xwl4zz] { grid-template-columns: 1fr; } }
.wv-hero h1[b-9g12xwl4zz] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  line-height: .95; letter-spacing: .01em;
  color: var(--jet); text-transform: uppercase;
  margin: 1rem 0 1.25rem;
}
.wv-hero h1 em[b-9g12xwl4zz] { font-style: normal; color: var(--dusk); }
.wv-hero p.lede[b-9g12xwl4zz] {
  font-size: 1.15rem; line-height: 1.6; color: var(--text-secondary);
  max-width: 540px; margin-bottom: 2rem;
}
.wv-hero-ctas[b-9g12xwl4zz] { display: flex; gap: .75rem; flex-wrap: wrap; }
.wv-hero-meta[b-9g12xwl4zz] {
  display: flex; flex-wrap: wrap; gap: 2.25rem;
  padding-top: 1.75rem; margin-top: 2rem; border-top: 1px solid var(--line);
}
.wv-hero-meta-item .num[b-9g12xwl4zz] {
  font-family: var(--display); font-weight: 600;
  font-size: 2.4rem; line-height: 1; color: var(--jet); display: block;
}
.wv-hero-meta-item .lbl[b-9g12xwl4zz] {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint); margin-top: .35rem; display: block;
}

/* Hero visual — "your stack" consolidating into one Vaakio bill */
.wv-hero-art[b-9g12xwl4zz] { position: relative; }
.wv-stack-card[b-9g12xwl4zz] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 1.5rem; box-shadow: var(--shadow-md);
}
.wv-stack-card .sc-head[b-9g12xwl4zz] {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.wv-stack-card .sc-head .t[b-9g12xwl4zz] {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 600;
}
.wv-stack-card .sc-head .pill[b-9g12xwl4zz] {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700;
  padding: .2rem .55rem; border-radius: 100px;
  background: var(--peach-light); color: var(--peach);
}
.wv-old-row[b-9g12xwl4zz] {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .65rem .8rem; border-radius: 10px;
  background: var(--bg2); margin-bottom: .5rem;
}
.wv-old-row .n[b-9g12xwl4zz] { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--text-secondary); font-weight: 500; }
.wv-old-row .n i[b-9g12xwl4zz] {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
}
.wv-old-row .c[b-9g12xwl4zz] { font-family: var(--mono); font-size: .8rem; color: var(--text-faint); }
.wv-old-row.r1 .n i[b-9g12xwl4zz] { background: #E6533C; }
.wv-old-row.r2 .n i[b-9g12xwl4zz] { background: #F5B849; }
.wv-old-row.r3 .n i[b-9g12xwl4zz] { background: #23b7e5; }
.wv-old-row.r4 .n i[b-9g12xwl4zz] { background: #8a8f9a; }

.wv-merge[b-9g12xwl4zz] {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: .9rem 0; color: var(--text-faint);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
}
.wv-merge[b-9g12xwl4zz]::before, .wv-merge[b-9g12xwl4zz]::after { content:''; height:1px; flex:1; background: var(--line); }

.wv-new-card[b-9g12xwl4zz] {
  background: linear-gradient(150deg, var(--dusk) 0%, #6B45C0 100%);
  border-radius: 16px; padding: 1.25rem 1.35rem; color: #fff;
  box-shadow: 0 14px 36px rgba(132,90,223,.32);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.wv-new-card .nc-l[b-9g12xwl4zz] { display: flex; align-items: center; gap: .75rem; }
.wv-new-card .nc-logo[b-9g12xwl4zz] {
  width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.16);
  display: grid; place-items: center;
}
.wv-new-card .nc-name[b-9g12xwl4zz] { font-family: var(--display); font-size: 1.4rem; letter-spacing: .03em; text-transform: uppercase; line-height: 1; }
.wv-new-card .nc-sub[b-9g12xwl4zz] { font-size: .72rem; color: rgba(255,255,255,.75); margin-top: .15rem; }
.wv-new-card .nc-price[b-9g12xwl4zz] { text-align: right; }
.wv-new-card .nc-price .a[b-9g12xwl4zz] { font-family: var(--display); font-size: 1.9rem; line-height: 1; letter-spacing: .02em; }
.wv-new-card .nc-price .p[b-9g12xwl4zz] { font-size: .64rem; color: rgba(255,255,255,.7); font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* ─── Section heads (shared) ─── */
.wv-head[b-9g12xwl4zz] { text-align: center; max-width: 660px; margin: 0 auto 3rem; }
.wv-head h2[b-9g12xwl4zz] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  letter-spacing: .015em; line-height: .98; text-transform: uppercase;
  color: var(--jet); margin: 1rem 0 .75rem;
}
.wv-head h2 em[b-9g12xwl4zz] { font-style: normal; color: var(--dusk); }
.wv-head p[b-9g12xwl4zz] { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6; }

/* ─── Reasons grid ─── */
.wv-reasons[b-9g12xwl4zz] { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--bg); }
.wv-reasons-grid[b-9g12xwl4zz] {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
@media (max-width: 920px){ .wv-reasons-grid[b-9g12xwl4zz] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .wv-reasons-grid[b-9g12xwl4zz] { grid-template-columns: 1fr; } }
.wv-reason[b-9g12xwl4zz] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px; padding: 2rem 1.75rem;
  display: flex; flex-direction: column; gap: .85rem;
  position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.wv-reason:hover[b-9g12xwl4zz] { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--dusk-border); }
.wv-reason[b-9g12xwl4zz]::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: var(--dusk); }
.wv-reason.r2[b-9g12xwl4zz]::before { background: var(--powder); }
.wv-reason.r3[b-9g12xwl4zz]::before { background: var(--success); }
.wv-reason.r4[b-9g12xwl4zz]::before { background: var(--peach); }
.wv-reason.r5[b-9g12xwl4zz]::before { background: var(--warning); }
.wv-reason.r6[b-9g12xwl4zz]::before { background: var(--jet); }
.wv-reason-ic[b-9g12xwl4zz] {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--dusk-light); color: var(--dusk);
}
.wv-reason.r2 .wv-reason-ic[b-9g12xwl4zz] { background: var(--powder-light); color: var(--powder-dark); }
.wv-reason.r3 .wv-reason-ic[b-9g12xwl4zz] { background: rgba(38,191,148,.12); color: var(--success); }
.wv-reason.r4 .wv-reason-ic[b-9g12xwl4zz] { background: var(--peach-light); color: var(--peach); }
.wv-reason.r5 .wv-reason-ic[b-9g12xwl4zz] { background: rgba(245,184,73,.14); color: #C8901F; }
.wv-reason.r6 .wv-reason-ic[b-9g12xwl4zz] { background: var(--jet-light); color: var(--jet); }
.wv-reason .num[b-9g12xwl4zz] {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 600;
}
.wv-reason h3[b-9g12xwl4zz] {
  font-family: var(--display); font-weight: 600; font-size: 1.85rem;
  letter-spacing: .02em; line-height: 1; text-transform: uppercase; color: var(--jet);
}
.wv-reason p[b-9g12xwl4zz] { color: var(--text-secondary); font-size: .93rem; line-height: 1.6; }
.wv-reason .tag[b-9g12xwl4zz] {
  margin-top: auto;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600; color: var(--dusk);
  display: inline-flex; align-items: center; gap: .4rem;
}
.wv-reason.r2 .tag[b-9g12xwl4zz] { color: var(--powder-dark); }
.wv-reason.r3 .tag[b-9g12xwl4zz] { color: var(--success); }
.wv-reason.r4 .tag[b-9g12xwl4zz] { color: var(--peach); }
.wv-reason.r5 .tag[b-9g12xwl4zz] { color: #C8901F; }
.wv-reason.r6 .tag[b-9g12xwl4zz] { color: var(--jet); }
.wv-reason.feat[b-9g12xwl4zz] {
  grid-column: span 1;
  background: linear-gradient(165deg, #fff 0%, #faf7ff 100%);
  border-color: var(--dusk-border);
}
.wv-reason .badge[b-9g12xwl4zz] {
  position: absolute; top: 1.1rem; right: 1.1rem;
  font-family: var(--mono); font-size: .56rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700;
  background: var(--dusk); color: #fff; padding: .25rem .55rem; border-radius: 100px;
}

/* ─── Pricing spotlight ─── */
.wv-pricing[b-9g12xwl4zz] {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--jet); color: #fff;
  position: relative; overflow: hidden;
}
.wv-pricing[b-9g12xwl4zz]::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 90% at 100% 30%, rgba(35,183,229,.20), transparent 60%),
    radial-gradient(ellipse 55% 90% at 0% 80%, rgba(132,90,223,.28), transparent 60%);
}
.wv-pricing .wrap[b-9g12xwl4zz] { position: relative; z-index: 1; }
.wv-pricing-grid[b-9g12xwl4zz] {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 920px){ .wv-pricing-grid[b-9g12xwl4zz] { grid-template-columns: 1fr; } }
.wv-pricing h2[b-9g12xwl4zz] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  letter-spacing: .015em; line-height: .98; text-transform: uppercase;
  margin: 1rem 0 1.25rem;
}
.wv-pricing h2 em[b-9g12xwl4zz] { font-style: normal; color: var(--powder); }
.wv-pricing p.lede[b-9g12xwl4zz] { color: rgba(255,255,255,.72); font-size: 1.05rem; line-height: 1.65; margin-bottom: 1.5rem; max-width: 480px; }
.wv-pricing .section-chip[b-9g12xwl4zz] { background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.15); }
.wv-price-points[b-9g12xwl4zz] { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 1.75rem; }
.wv-price-point[b-9g12xwl4zz] { display: flex; gap: .8rem; align-items: flex-start; }
.wv-price-point .ck[b-9g12xwl4zz] {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  background: rgba(38,191,148,.2); color: #47d7ac;
  display: grid; place-items: center; margin-top: .1rem;
}
.wv-price-point .txt[b-9g12xwl4zz] { font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.85); }
.wv-price-point .txt strong[b-9g12xwl4zz] { color: #fff; font-weight: 700; }

/* Hike chart */
.wv-hike-card[b-9g12xwl4zz] {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; padding: clamp(1.5rem, 3vw, 2rem);
  backdrop-filter: blur(6px);
}
.wv-hike-card .hc-head[b-9g12xwl4zz] {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem;
}
.wv-hike-card .hc-head .t[b-9g12xwl4zz] {
  font-family: var(--display); font-size: 1.3rem; letter-spacing: .02em;
  text-transform: uppercase; line-height: 1;
}
.wv-hike-card .hc-head .s[b-9g12xwl4zz] {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.wv-hike-row[b-9g12xwl4zz] { margin-bottom: 1.1rem; }
.wv-hike-row:last-child[b-9g12xwl4zz] { margin-bottom: 0; }
.wv-hike-row .hr-top[b-9g12xwl4zz] {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .4rem;
}
.wv-hike-row .hr-name[b-9g12xwl4zz] { font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.9); }
.wv-hike-row .hr-pct[b-9g12xwl4zz] { font-family: var(--mono); font-size: .82rem; font-weight: 700; color: #ff8d76; }
.wv-hike-row.us .hr-pct[b-9g12xwl4zz] { color: #47d7ac; }
.wv-hike-bar[b-9g12xwl4zz] { height: 9px; background: rgba(255,255,255,.08); border-radius: 100px; overflow: hidden; }
.wv-hike-bar i[b-9g12xwl4zz] {
  display: block; height: 100%; border-radius: 100px; width: 0;
  background: linear-gradient(90deg, #E6533C, #ff8d76);
  transition: width 1.1s cubic-bezier(.3,1,.35,1);
}
.wv-hike-row.us .wv-hike-bar i[b-9g12xwl4zz] { background: linear-gradient(90deg, #1F9E78, #47d7ac); }
.wv-hike-foot[b-9g12xwl4zz] {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed rgba(255,255,255,.14);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.45); text-align: center;
}

/* ─── Comparison table ─── */
.wv-compare[b-9g12xwl4zz] { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--bg); }
.wv-table-wrap[b-9g12xwl4zz] {
  max-width: 980px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.wv-trow[b-9g12xwl4zz] {
  display: grid; grid-template-columns: 1.3fr 1.1fr .9fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.wv-trow:last-child[b-9g12xwl4zz] { border-bottom: none; }
.wv-trow.head[b-9g12xwl4zz] {
  background: var(--bg2);
  position: sticky; top: var(--nav-h); z-index: 2;
}
.wv-trow.head > div[b-9g12xwl4zz] { padding: 1.1rem 1.25rem; }
.wv-trow.head > .wv-th-us[b-9g12xwl4zz] { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.wv-th-crit[b-9g12xwl4zz] { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.wv-th-us[b-9g12xwl4zz], .wv-th-them[b-9g12xwl4zz] {
  text-align: center;
  font-family: var(--display); font-size: 1.45rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1;
}
.wv-th-us[b-9g12xwl4zz] {
  color: #fff; position: relative;
  background: linear-gradient(165deg, var(--dusk) 0%, var(--dusk-dark) 100%);
  border-radius: 16px 16px 0 0;
  font-size: 1.85rem;
  box-shadow: 0 8px 22px -8px rgba(132,90,223,.55);
}
.wv-th-badge[b-9g12xwl4zz] {
  display: block; width: max-content; margin: 0 auto .5rem;
  font-family: var(--mono); font-size: .56rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dusk); background: #fff;
  padding: .26rem .6rem; border-radius: 100px;
}
.wv-th-them[b-9g12xwl4zz] { color: var(--text-faint); font-size: 1.2rem; }
.wv-tcell[b-9g12xwl4zz] { padding: 1.1rem 1.25rem; }
.wv-tcrit[b-9g12xwl4zz] { font-size: .92rem; font-weight: 600; color: var(--jet); }
.wv-tcrit .sub[b-9g12xwl4zz] { display: block; font-weight: 400; font-size: .78rem; color: var(--text-secondary); margin-top: .15rem; line-height: 1.4; }
.wv-tus[b-9g12xwl4zz], .wv-tthem[b-9g12xwl4zz] {
  text-align: center; font-size: .9rem; line-height: 1.4;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
}
.wv-tus[b-9g12xwl4zz] {
  background: linear-gradient(180deg, rgba(132,90,223,.11), rgba(132,90,223,.055));
  border-left: 1.5px solid var(--dusk-border);
  border-right: 1.5px solid var(--dusk-border);
  height: 100%; justify-content: center; color: var(--jet); font-weight: 700;
}
.wv-trow:last-child .wv-tus[b-9g12xwl4zz] {
  border-bottom: 1.5px solid var(--dusk-border);
  border-radius: 0 0 16px 16px;
}
.wv-tthem[b-9g12xwl4zz] { color: var(--text-secondary); opacity: .9; }
.wv-ico[b-9g12xwl4zz] { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.wv-tus .wv-ico.yes[b-9g12xwl4zz] { width: 27px; height: 27px; background: var(--success); color: #fff; box-shadow: 0 3px 9px rgba(38,191,148,.4); }
.wv-ico.yes[b-9g12xwl4zz] { background: rgba(38,191,148,.16); color: var(--success); }
.wv-ico.no[b-9g12xwl4zz] { background: rgba(230,83,60,.12); color: var(--peach); }
@media (max-width: 720px){
  .wv-trow[b-9g12xwl4zz] { grid-template-columns: 1fr; }
  .wv-trow.head[b-9g12xwl4zz] { display: none; }
  .wv-tcell[b-9g12xwl4zz] { padding: .9rem 1.1rem; border-bottom: 1px dashed var(--line); }
  .wv-tus[b-9g12xwl4zz], .wv-tthem[b-9g12xwl4zz] { flex-direction: row; justify-content: flex-start; text-align: left; }
  .wv-tus[b-9g12xwl4zz], .wv-trow:last-child .wv-tus[b-9g12xwl4zz] { background: var(--dusk-light); border-radius: 0; border-left: none; border-right: none; border-bottom: none; }
  .wv-tus[b-9g12xwl4zz]::before { content: 'Vaakio'; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dusk); margin-right: .35rem; font-weight: 700; }
  .wv-tthem[b-9g12xwl4zz]::before { content: 'Others'; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-right: .35rem; }
  .wv-tcrit .sub[b-9g12xwl4zz] { display: none; }
}

/* ─── Stats band ─── */
.wv-stats[b-9g12xwl4zz] { padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--bg2); }
.wv-stats-grid[b-9g12xwl4zz] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 720px){ .wv-stats-grid[b-9g12xwl4zz] { grid-template-columns: repeat(2, 1fr); } }
.wv-stat[b-9g12xwl4zz] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.75rem 1.5rem; text-align: center;
}
.wv-stat .num[b-9g12xwl4zz] { font-family: var(--display); font-weight: 600; font-size: 3rem; line-height: 1; letter-spacing: .02em; color: var(--dusk); }
.wv-stat:nth-child(2) .num[b-9g12xwl4zz] { color: var(--powder-dark); }
.wv-stat:nth-child(3) .num[b-9g12xwl4zz] { color: var(--success); }
.wv-stat:nth-child(4) .num[b-9g12xwl4zz] { color: var(--peach); }
.wv-stat .lbl[b-9g12xwl4zz] { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-top: .5rem; display: block; }
.wv-stat .desc[b-9g12xwl4zz] { font-size: .8rem; color: var(--text-secondary); margin-top: .5rem; line-height: 1.45; }

/* ─── CTA ─── */
.wv-cta[b-9g12xwl4zz] { padding: clamp(3rem, 5vw, 4.5rem) 0; background: var(--bg); text-align: center; }
.wv-cta-card[b-9g12xwl4zz] {
  background: linear-gradient(160deg, var(--dusk-light) 0%, var(--surface) 55%, var(--powder-light) 200%);
  border: 1px solid var(--dusk-border); border-radius: 28px;
  padding: clamp(2.5rem, 5vw, 4rem); max-width: 820px; margin: 0 auto;
}
.wv-cta h2[b-9g12xwl4zz] {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing: .015em; line-height: .98; text-transform: uppercase;
  color: var(--jet); margin-bottom: 1rem;
}
.wv-cta p[b-9g12xwl4zz] { color: var(--text-secondary); font-size: 1.05rem; max-width: 540px; margin: 0 auto 1.75rem; line-height: 1.55; }
.wv-cta .btns[b-9g12xwl4zz] { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }