/* ══════════════════════════════════════════════════════════════════
   SLICE homepage — 2026-09 redesign.
   Narrative order: buy -> collect -> automate -> forecast -> team.
   All classes are h26-* so nothing here collides with redesign.css,
   which still owns /agencies, /sales-teams and the legal pages.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --h26-maxw: 1140px;
  --h26-amber: #F0B357;
  --h26-violet: #8B8CF7;
  --h26-sky: #7DA5FF;
  --h26-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --h26-ease-io: cubic-bezier(0.4, 0, 0.2, 1);
  --h26-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.h26 { max-width: var(--h26-maxw); margin: 0 auto; width: 100%;
  padding-left: clamp(1.25rem, 4vw, 2rem); padding-right: clamp(1.25rem, 4vw, 2rem); }
.h26-sec { padding: clamp(4.5rem, 9vw, 7.5rem) 0; position: relative; }
.h26-sec.alt { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.h26-head { max-width: 680px; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.h26-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.h26-eyebrow { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--green); margin-bottom: 0.9rem; display: block; }
.h26-h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.12; margin-bottom: 1rem; }
.h26-h2 em { font-style: normal; color: var(--green); }
.h26-dek { font-size: clamp(1rem, 1.5vw, 1.1rem); color: var(--text2); line-height: 1.7; }
.h26-dek strong { color: var(--text); font-weight: 600; }

/* Capability rail: the mono chip row that closes several sections */
.h26-rail { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.h26-rail.center { justify-content: center; }
.h26-chip { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.4px;
  color: var(--text2); border: 1px solid var(--border2); border-radius: 100px;
  padding: 7px 15px; background: rgba(255,255,255,0.02); transition: color .2s, border-color .2s; }
.h26-chip:hover { color: var(--text); border-color: rgba(0,212,126,0.4); }

/* ── 1. HERO ───────────────────────────────────────────────────────── */
.h26-hero { position: relative; padding: clamp(100px, 12vh, 124px) 0 clamp(3.5rem, 7vw, 5.5rem); overflow: hidden; }
.h26-hero::before { content: ""; position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 700px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(0,212,126,0.13), transparent 62%); }
.h26-hero::after { content: ""; position: absolute; top: 40px; right: -80px;
  width: 520px; height: 520px; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(99,102,241,0.10), transparent 65%); }
.h26-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.h26-hero h1 br { display: inline; }
.h26-hero h1 { font-size: clamp(2.88rem, 6.12vw, 4.62rem); font-weight: 700; line-height: 1.04;
  letter-spacing: -0.035em; margin-bottom: 1.3rem; animation: h26Up .6s var(--h26-ease-out) .05s backwards; }
.h26-hero h1 em { white-space: nowrap; font-style: normal;
  background: linear-gradient(115deg, var(--green), #5FE6AC 55%, var(--h26-violet));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.h26-hero-sub { font-size: clamp(1.05rem, 1.75vw, 1.22rem); color: var(--text2); line-height: 1.62;
  max-width: 520px; margin-bottom: 2.1rem; animation: h26Up .6s var(--h26-ease-out) .18s backwards; }
.h26-hero-sub strong { color: var(--text); font-weight: 600; }
.h26-hero-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; align-items: center;
  animation: h26Up .6s var(--h26-ease-out) .3s backwards; }
.h26-hero-note { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.3px;
  color: var(--text3); margin-top: 1.4rem; animation: h26Up .6s var(--h26-ease-out) .42s backwards; }

.h26-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 9999px;
  font-family: var(--sans); font-size: 0.97rem; font-weight: 600; padding: 14px 28px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .15s var(--h26-ease-out), filter .15s var(--h26-ease-out), border-color .2s, background .2s; }
.h26-btn svg { transition: transform .2s var(--h26-ease-out); }
.h26-btn:hover svg { transform: translateX(3px); }
.h26-btn-g { background: var(--green); color: #05130C; }
.h26-btn-g:hover { filter: brightness(1.07); transform: scale(1.02); }
.h26-btn-o { background: rgba(255,255,255,0.03); color: var(--text); border-color: var(--border2); }
.h26-btn-o:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); transform: scale(1.02); }

@keyframes h26Up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ── Shared surface: the product-visual card ───────────────────────── */
.h26-card { background: linear-gradient(180deg, rgba(19,24,37,0.96), rgba(15,20,32,0.9));
  border: 1px solid var(--border2); border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45); position: relative; overflow: hidden; }
.h26-card-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px;
  border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.015); }
.h26-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.13); }
.h26-card-title { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text3); margin-left: 6px; }
.h26-card-body { padding: clamp(1.1rem, 2.4vw, 1.6rem); }

/* Hero checkout mock */
.h26-co-brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.h26-co-who { font-size: 0.92rem; font-weight: 600; }
.h26-co-who span { display: block; font-size: 0.74rem; color: var(--text3); font-weight: 400; margin-top: 2px; }
.h26-co-amt { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.h26-co-line { display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-top: 1px solid var(--border); font-size: 0.86rem; color: var(--text2); }
.h26-co-line b { color: var(--text); font-weight: 500; font-family: var(--mono); font-size: 0.85rem; }
.h26-co-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin: 1.1rem 0 1.25rem; }
.h26-co-opt { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.02); font-size: 0.83rem; color: var(--text2);
  transition: border-color .25s var(--h26-ease-io), background .25s var(--h26-ease-io), color .25s; }
.h26-co-opt .h26-tick { width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--border2); display: grid; place-items: center; transition: all .25s var(--h26-ease-io); }
.h26-co-opt .h26-tick svg { opacity: 0; transform: scale(0.5); transition: all .25s var(--h26-spring); }
.h26-co-opt.on { border-color: rgba(0,212,126,0.5); background: rgba(0,212,126,0.07); color: var(--text); }
.h26-co-opt.on .h26-tick { background: var(--green); border-color: var(--green); }
.h26-co-opt.on .h26-tick svg { opacity: 1; transform: scale(1); }
/* BNPL partner logos, shown inside the BNPL beat (left) and the BNPL option (right) */
.h26-bnpls { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.h26-bnpl { display: grid; place-items: center; height: 22px; padding: 0 8px; border-radius: 5px; flex: none;
  transition: opacity .3s var(--h26-ease-io), filter .3s var(--h26-ease-io); }
.h26-bnpl img { display: block; width: auto; }
.h26-bnpl.klarna { background: #FFB3C7; }
.h26-bnpl.klarna img { height: 9.5px; }
.h26-bnpl.affirm { background: #fff; }
.h26-bnpl.affirm img { height: 12.5px; margin-top: -2px; }
.h26-bnpl.clearpay { background: #B2FCE4; }
.h26-bnpl.clearpay img { height: 9.5px; }
.h26-co-opt .h26-bnpls { margin-left: auto; }
.h26-co-opt:not(.on) .h26-bnpl { opacity: 0.4; filter: grayscale(1); }
.h26-beat-q .h26-bnpls { display: flex; margin-top: 9px; }
.h26-co-pay { width: 100%; text-align: center; padding: 13px; border-radius: 11px; background: var(--green);
  color: #05130C; font-weight: 600; font-size: 0.92rem; }

/* Live caption under a product visual */
.h26-cap { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.5px; color: var(--text3);
  text-align: center; margin-top: 0.9rem; }

/* Payment methods ribbon: the production marquee, full-bleed under the checkout demo.
   site.js triples #pmTrack so the -33.333% loop is seamless. */
.h26-payrib { position: relative; width: 100vw; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0 calc(50% - 50vw); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%); }
.h26-payrib-track { display: flex; align-items: center; gap: clamp(2.4rem, 5vw, 4.5rem); width: max-content;
  animation: h26PayribScroll 60s linear infinite; }
.h26-payrib:hover .h26-payrib-track { animation-play-state: paused; }
@keyframes h26PayribScroll { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
.h26-payrib-mark { display: block; width: auto; flex-shrink: 0; filter: brightness(0) invert(1); opacity: 0.58; }
.h26-payrib-mark.m-visa { height: 23px; }
.h26-payrib-mark.m-mc { height: 32px; filter: grayscale(1) brightness(1.55); opacity: 0.82; }
.h26-payrib-mark.m-amex { height: 34px; filter: grayscale(1) brightness(1.55); opacity: 0.82; }
.h26-payrib-mark.m-apple { height: 40px; margin: 0 -14px; }
.h26-payrib-mark.m-klarna { height: 20px; }
.h26-payrib-mark.m-affirm { height: 27px; margin-top: -6px; }
.h26-payrib-mark.m-clearpay { height: 21px; }
.h26-payrib-mark.m-ach { height: 36px; margin-right: -22px; }
.h26-payrib-word { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; white-space: nowrap;
  font-family: var(--sans); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: rgba(255,255,255,0.5); }
.h26-payrib-word svg { width: 22px; height: 22px; flex: none; }
@media (prefers-reduced-motion: reduce) { .h26-payrib-track { animation: none; } }

/* ── 2. CHECKOUT ───────────────────────────────────────────────────── */
.h26-checkout-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 4.5vw, 3.75rem); align-items: center; }

/* Objection -> capability beats */
.h26-beats { display: grid; gap: 0.85rem; }
.h26-beat { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  padding: 1rem 1.15rem; border-radius: 14px; border: 1px solid var(--border);
  background: var(--card); opacity: 0.45; transform: translateY(0);
  transition: opacity .4s var(--h26-ease-io), border-color .4s var(--h26-ease-io), background .4s, transform .4s var(--h26-ease-out); }
.h26-beat.on { opacity: 1; border-color: rgba(0,212,126,0.34); background: var(--card-hover); transform: translateY(-2px); }
.h26-beat-q { font-size: 0.95rem; color: var(--text); line-height: 1.45; }
.h26-beat-q > span:first-child { color: var(--text3); font-size: 0.72rem; font-family: var(--mono);
  display: block; margin-bottom: 5px; letter-spacing: 0.5px; text-transform: uppercase; }
.h26-beat-a { font-family: var(--mono); font-size: 0.8rem; font-weight: 500; color: var(--green);
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 100px;
  background: var(--green-dim); border: 1px solid rgba(0,212,126,0.28); white-space: nowrap;
  opacity: 0; transform: scale(0.9); transition: all .3s var(--h26-spring); }
.h26-beat.on .h26-beat-a { opacity: 1; transform: scale(1); }

.h26-kicker { font-size: clamp(1.15rem, 2.1vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em;
  text-align: center; margin-top: clamp(2.75rem, 5vw, 4rem); line-height: 1.4; }
.h26-kicker b { color: var(--green); font-weight: 600; }

/* ── 3. COLLECTION ─────────────────────────────────────────────────── */
.h26-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4.5vw, 4rem); align-items: center; }
.h26-split.flip .h26-split-viz { order: -1; }

.h26-sched-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.35rem; }
.h26-sched-total .h26-big { font-family: var(--mono); font-size: clamp(1.7rem, 3.2vw, 2.15rem);
  font-weight: 500; letter-spacing: -0.03em; }
.h26-sched-total .h26-lab { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text3); }
.h26-sched { display: grid; gap: 0.6rem; }
.h26-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem;
  padding: 0.95rem 1.05rem; border-radius: 12px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.015); }
.h26-row .h26-amt { font-family: var(--mono); font-size: 0.97rem; font-weight: 500; color: var(--text); }
.h26-row .h26-when { font-family: var(--mono); font-size: 0.78rem; color: var(--text3); text-align: right; }
.h26-pip { width: 9px; height: 9px; border-radius: 50%; background: var(--text3); flex: none; }
.h26-row.done { border-color: rgba(0,212,126,0.26); background: rgba(0,212,126,0.05); }
.h26-row.done .h26-pip { background: var(--green); box-shadow: 0 0 0 4px var(--green-dim); }
.h26-row.done .h26-when { color: var(--green); }
.h26-row.due .h26-pip { background: var(--h26-sky); box-shadow: 0 0 0 4px rgba(125,165,255,0.14); }
.h26-row.miss { border-color: rgba(240,179,87,0.3); background: rgba(240,179,87,0.05); }
.h26-row.miss .h26-pip { background: var(--h26-amber); box-shadow: 0 0 0 4px rgba(240,179,87,0.16); }
.h26-row.miss .h26-when { color: var(--h26-amber); }

.h26-followup { margin-top: 1rem; padding: 0.95rem 1.05rem; border-radius: 12px;
  border: 1px dashed rgba(0,212,126,0.34); background: rgba(0,212,126,0.04);
  display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; color: var(--text2); line-height: 1.45; }
.h26-followup b { color: var(--green); font-weight: 600; }
.h26-followup svg { flex: none; color: var(--green); }

/* ── 4. AUTOMATION ─────────────────────────────────────────────────── */
.h26-trigger { max-width: 420px; margin: 0 auto 0.35rem; padding: 1.15rem 1.4rem; border-radius: 16px;
  border: 1px solid rgba(0,212,126,0.4); background: rgba(0,212,126,0.07); text-align: center;
  box-shadow: 0 0 44px rgba(0,212,126,0.13); }
.h26-trigger .h26-big { font-family: var(--mono); font-size: clamp(1.5rem, 2.9vw, 1.95rem);
  font-weight: 500; letter-spacing: -0.03em; color: var(--text); display: block; }
.h26-trigger .h26-lab { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--green); margin-top: 4px; display: block; }
.h26-stem { width: 1px; height: 40px; margin: 6px auto 10px; background: linear-gradient(180deg, rgba(0,212,126,0.55), rgba(0,212,126,0.12)); }

.h26-chain { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 1.1rem 1.1rem; }
.h26-link { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.35rem;
  min-height: 84px; border-radius: 16px; border: 1px solid var(--border); background: var(--card);
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s var(--h26-ease-out), transform .45s var(--h26-ease-out), border-color .3s; }
.h26-link.on { opacity: 1; transform: none; border-color: var(--border2); }
.h26-link:hover { border-color: rgba(0,212,126,0.3); }
.h26-link-ico { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--green-dim); color: var(--green); border: 1px solid rgba(0,212,126,0.2); }
.h26-link.i2 .h26-link-ico { background: rgba(99,102,241,0.14); color: var(--h26-violet); border-color: rgba(99,102,241,0.24); }
.h26-link > span:last-child { min-width: 0; }
.h26-link-t { display: block; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.h26-link-s { display: block; font-size: 0.8rem; color: var(--text2); margin-top: 4px; line-height: 1.45; }

.h26-quote { max-width: 720px; margin: clamp(2.75rem, 5vw, 3.75rem) auto 0; text-align: center;
  font-size: clamp(1.1rem, 2.1vw, 1.45rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.015em;
  color: var(--text); position: relative; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.h26-quote::before, .h26-quote::after { content: ""; position: absolute; top: 50%; width: clamp(20px, 5vw, 48px);
  height: 1px; background: linear-gradient(90deg, transparent, var(--border2)); }
.h26-quote::before { left: 0; }
.h26-quote::after { right: 0; transform: scaleX(-1); }
.h26-quote-sub { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text3); margin-top: 0.9rem; font-weight: 400; }

/* ── 5. REVENUE VISIBILITY ─────────────────────────────────────────── */
.h26-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; margin-bottom: 1.5rem; }
.h26-stat { padding: 1.3rem 1.25rem; border-radius: 15px; border: 1px solid var(--border);
  background: var(--card); transition: border-color .3s, transform .3s var(--h26-ease-out); }
.h26-stat:hover { border-color: var(--border2); transform: translateY(-3px); }
.h26-stat .h26-n { font-family: var(--mono); font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 500;
  letter-spacing: -0.03em; display: block; }
.h26-stat .h26-lab { font-size: 0.79rem; color: var(--text3); margin-top: 6px; display: block; }
.h26-stat .h26-pipline { width: 26px; height: 3px; border-radius: 2px; background: var(--text3); margin-bottom: 0.9rem; }
.h26-stat.collected .h26-n { color: var(--green); }
.h26-stat.collected .h26-pipline { background: var(--green); }
.h26-stat.expected .h26-n { color: var(--h26-sky); }
.h26-stat.expected .h26-pipline { background: var(--h26-sky);
  background-image: repeating-linear-gradient(90deg, var(--h26-sky) 0 4px, transparent 4px 7px); }
.h26-stat.out .h26-n { color: var(--h26-amber); }
.h26-stat.out .h26-pipline { background: var(--h26-amber); }

.h26-chart { border-radius: 16px; border: 1px solid var(--border); background: var(--card); padding: 1.4rem 1.5rem 1.1rem; }
.h26-chart-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.75rem; }
.h26-chart-t { font-size: 0.9rem; font-weight: 600; }
.h26-legend { display: flex; gap: 1.1rem; }
.h26-leg { display: flex; align-items: center; gap: 7px; font-family: var(--mono);
  font-size: 0.7rem; color: var(--text2); letter-spacing: 0.3px; }
.h26-leg i { width: 16px; height: 2px; border-radius: 2px; background: var(--green); display: block; }
.h26-leg.dash i { background-image: repeating-linear-gradient(90deg, var(--h26-sky) 0 4px, transparent 4px 7px);
  background-color: transparent; }
.h26-chart svg { display: block; width: 100%; height: auto; }
.h26-chart-x { display: flex; justify-content: space-between; margin-top: 0.6rem;
  font-family: var(--mono); font-size: 0.66rem; color: var(--text3); letter-spacing: 0.4px; }
.h26-chart-note { text-align: center; font-size: 0.97rem; color: var(--text2); margin-top: 1.9rem; line-height: 1.6; }
.h26-chart-note b { color: var(--text); font-weight: 600; }

/* Animated chart strokes */
.h26-spark { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.h26-spark.on { animation: h26Draw 1.5s var(--h26-ease-io) forwards; }
@keyframes h26Draw { to { stroke-dashoffset: 0; } }
/* The expected line keeps its dash pattern, so it fades in instead of drawing. */
.h26-spark2 { opacity: 0; transition: opacity .85s var(--h26-ease-out); }
.h26-spark2.on { opacity: 1; }

/* ── 4b. REFUNDS & CLAWBACKS ─────────────────────────────────────── */
/* The mirror of the automation chain, so it borrows the same card language
   but runs in a warm reversal colour rather than green. */
.h26-rev-head { display: flex; align-items: center; gap: 12px; padding-bottom: 1rem;
  margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.h26-rev-ico { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid;
  place-items: center; color: #F87171; background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.25); }
.h26-rev-t { min-width: 0; flex: 1; }
.h26-rev-t b { display: block; font-size: 0.95rem; font-weight: 600; }
.h26-rev-t span { display: block; font-size: 0.78rem; color: var(--text3); margin-top: 2px; }
.h26-rev-v { font-family: var(--mono); font-size: 1.1rem; font-weight: 500; color: #F87171; }
.h26-rev-steps { display: grid; gap: 0.55rem; position: relative; padding-left: 4px; }
.h26-rev-steps::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px;
  width: 1px; background: linear-gradient(180deg, rgba(248,113,113,0.5), rgba(16,185,129,0.5)); }
.h26-rev-step { display: flex; align-items: center; gap: 12px; padding: 0.7rem 0.9rem 0.7rem 0;
  font-size: 0.86rem; color: var(--text2); position: relative; }
.h26-rev-step i { width: 8px; height: 8px; border-radius: 50%; flex: none; position: relative;
  background: var(--card); border: 1.5px solid rgba(248,113,113,0.7); z-index: 1; }
.h26-rev-step:last-child i { border-color: rgba(16,185,129,0.8); background: rgba(16,185,129,0.25); }
.h26-rev-step .k { flex: 1; min-width: 0; }
.h26-rev-step .v { font-family: var(--mono); font-size: 0.84rem; color: var(--text); white-space: nowrap; }
.h26-rev-step .v.neg { color: #F87171; }
.h26-rev-step .v.ok { color: var(--green); }
.h26-rev-note { display: flex; align-items: center; gap: 8px; margin-top: 1rem; padding: 0.75rem 0.9rem;
  border-radius: 11px; background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.2);
  font-size: 0.8rem; color: var(--text2); }
.h26-rev-note svg { color: var(--green); flex: none; }

/* ── 6a. REP PERFORMANCE ────────────────────────────────────────────── */
.h26-perf { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 4.5vw, 3.75rem);
  align-items: center; margin-bottom: clamp(2.75rem, 5vw, 3.75rem); }
.h26-perf-h { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2; margin-bottom: 1rem; }
.h26-perf-h em { font-style: normal; color: var(--green); }
.h26-perf-p { font-size: 0.98rem; color: var(--text2); line-height: 1.7; }
.h26-perf-p + .h26-perf-p { margin-top: 0.85rem; }

.h26-repq-head, .h26-repq { display: grid; grid-template-columns: 1.1fr 1fr 1fr;
  align-items: center; gap: 12px; }
.h26-repq-head { padding: 0 0.9rem 0.7rem; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.8px; text-transform: uppercase; color: var(--text3); }
.h26-repq-head span:last-child, .h26-repq > span:last-child { text-align: right; }
.h26-repq { padding: 0.8rem 0.9rem; border-radius: 12px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.02); font-size: 0.86rem; }
.h26-repq + .h26-repq { margin-top: 0.5rem; }
.h26-repq.flag { border-color: rgba(240,179,87,0.3); background: rgba(240,179,87,0.05); }
.h26-repq-who { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 0; }
.h26-repq-av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.64rem; font-weight: 500; }
.h26-repq-av.g { background: var(--green-dim); color: var(--green); }
.h26-repq-av.b { background: rgba(99,102,241,0.18); color: #A5A6F6; }
.h26-repq-av.a { background: rgba(240,179,87,0.16); color: var(--h26-amber); }
.h26-repq-q { font-size: 0.82rem; }
.h26-repq-q.good { color: var(--text2); }
.h26-repq-q.warn { color: var(--h26-amber); }
.h26-repq-p { display: inline-flex; justify-content: flex-end; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 500; white-space: nowrap; }
.h26-repq-p::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.h26-repq-p.ok { color: var(--green); }
.h26-repq-p.ok::before { background: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }
.h26-repq-p.hold { color: var(--h26-amber); }
.h26-repq-p.hold::before { background: var(--h26-amber); box-shadow: 0 0 0 3px rgba(240,179,87,0.18); }
.h26-repq-note { margin-top: 0.9rem; padding: 0 0.9rem; font-size: 0.76rem; color: var(--text3); }

/* ── 6. SALES TEAM ─────────────────────────────────────────────────── */
.h26-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.h26-fcard { padding: 1.6rem 1.4rem; border-radius: 16px; border: 1px solid var(--border);
  background: var(--card); transition: border-color .3s, transform .3s var(--h26-ease-out); }
.h26-fcard:hover { border-color: rgba(0,212,126,0.28); transform: translateY(-4px); }
.h26-fcard .h26-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--green-dim); color: var(--green); border: 1px solid rgba(0,212,126,0.2); margin-bottom: 1.1rem; }
.h26-fcard h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 0.45rem; }
.h26-fcard p { font-size: 0.87rem; color: var(--text2); line-height: 1.6; }

.h26-bridge { margin-top: clamp(2.5rem, 4.5vw, 3.25rem); text-align: center; }
.h26-bridge-q { font-size: 1.05rem; color: var(--text2); margin-bottom: 1.15rem; }
.h26-bridge-links { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }
.h26-blink { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 9999px;
  border: 1px solid var(--border2); background: rgba(255,255,255,0.03); font-size: 0.92rem; font-weight: 500;
  transition: border-color .25s, background .25s, transform .2s var(--h26-ease-out); }
.h26-blink:hover { border-color: rgba(0,212,126,0.45); background: rgba(0,212,126,0.07); transform: translateY(-2px); }
.h26-blink svg { color: var(--green); transition: transform .2s var(--h26-ease-out); }
.h26-blink:hover svg { transform: translateX(3px); }

/* ── 7. SLICE COMES TO YOU ─────────────────────────────────────────── */
/* A Slack window, drawn in Slack's dark theme, so the section reads as Slack at a glance. */
.h26-slk { --sk-bg: #1A1D21; --sk-side: #121016; --sk-bar: #0F0D12; --sk-line: rgba(255,255,255,0.09);
  --sk-text: #D1D2D3; --sk-dim: #ABABAD; --sk-mute: #8B8C8F; --sk-blue: #1D9BD1;
  max-width: 920px; margin: 0 auto; border-radius: 12px; overflow: hidden; background: var(--sk-bg);
  border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  font-family: 'Lato', var(--sans); color: var(--sk-text); text-align: left; }
.h26-slk-bar { position: relative; display: flex; align-items: center; justify-content: center; height: 38px;
  background: var(--sk-bar); border-bottom: 1px solid var(--sk-line); }
.h26-slk-dots { position: absolute; left: 14px; display: flex; gap: 7px; }
.h26-slk-dots i { width: 11px; height: 11px; border-radius: 50%; background: #3A3A3F; }
.h26-slk-search { width: min(420px, 55%); height: 24px; border-radius: 6px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08); font-size: 0.72rem; color: var(--sk-mute); display: grid; place-items: center; }
.h26-slk-win { display: grid; grid-template-columns: 210px 1fr; min-height: 470px; }
.h26-slk-side { background: var(--sk-side); border-right: 1px solid var(--sk-line); padding: 12px 8px; }
.h26-slk-ws { display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: 0.98rem; color: #fff;
  padding: 2px 10px 12px; border-bottom: 1px solid var(--sk-line); margin: 0 -8px 10px; padding-left: 18px; }
.h26-slk-ws svg { width: 10px; height: 10px; color: var(--sk-dim); }
.h26-slk-grp { font-size: 0.78rem; color: var(--sk-dim); padding: 10px 10px 5px; }
.h26-slk-ch { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 6px;
  font-size: 0.86rem; color: var(--sk-dim); }
.h26-slk-ch svg { width: 13px; height: 13px; flex: none; opacity: .8; }
.h26-slk-ch.on { background: #1164A3; color: #fff; }
.h26-slk-ch.unread { color: #fff; font-weight: 700; }
.h26-slk-main { display: flex; flex-direction: column; min-width: 0; }
.h26-slk-head { display: flex; align-items: center; gap: 5px; padding: 0 18px; height: 48px;
  border-bottom: 1px solid var(--sk-line); font-size: 0.98rem; color: #fff; }
.h26-slk-head svg { width: 15px; height: 15px; }
.h26-slk-head b { font-weight: 800; }
.h26-slk-members { margin-left: auto; font-size: 0.78rem; color: var(--sk-dim); border: 1px solid var(--sk-line);
  border-radius: 6px; padding: 2px 8px; }
.h26-slk-feed { flex: 1; padding: 4px 0 10px; }
.h26-slk-day { position: relative; text-align: center; margin: 14px 0 6px; }
.h26-slk-day::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--sk-line); }
.h26-slk-day span { position: relative; font-size: 0.74rem; font-weight: 700; color: var(--sk-text);
  background: var(--sk-bg); border: 1px solid var(--sk-line); border-radius: 20px; padding: 3px 12px; }
.h26-slk-msg { display: flex; gap: 9px; padding: 8px 20px; }
.h26-slk-msg:hover { background: rgba(255,255,255,0.03); }
.h26-slk-av { width: 36px; height: 36px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, #00D47E, #6366F1); color: #07110C; font-weight: 800; font-size: 1.05rem;
  font-family: var(--sans); }
.h26-slk-av.sm { width: 18px; height: 18px; border-radius: 5px; font-size: 0.62rem; }
.h26-slk-c { min-width: 0; flex: 1; }
.h26-slk-meta { display: flex; align-items: baseline; gap: 6px; line-height: 1.3; }
.h26-slk-meta b { font-size: 0.93rem; font-weight: 800; color: #fff; }
.h26-slk-app { font-size: 0.6rem; font-weight: 700; color: var(--sk-dim); background: rgba(255,255,255,0.1);
  border-radius: 3px; padding: 1px 4px; letter-spacing: .3px; }
.h26-slk-meta time { font-size: 0.72rem; color: var(--sk-mute); }
.h26-slk-txt { font-size: 0.92rem; line-height: 1.45; margin: 1px 0 0; color: var(--sk-text); }
.h26-slk-txt b { color: #fff; font-weight: 800; }
.h26-slk-at { color: #E8912D; background: rgba(232,145,45,0.14); border-radius: 3px; padding: 0 2px; }
.h26-slk-att { margin: 7px 0 2px; padding: 2px 0 2px 12px; border-left: 4px solid; border-radius: 2px; max-width: 460px; }
.h26-slk-att.green { border-color: #10B981; }
.h26-slk-att.indigo { border-color: #6366F1; }
.h26-slk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px; }
.h26-slk-fields div { display: flex; flex-direction: column; }
.h26-slk-fields span { font-size: 0.8rem; font-weight: 700; color: #fff; }
.h26-slk-fields b { font-size: 0.9rem; font-weight: 400; color: var(--sk-text); font-variant-numeric: tabular-nums; }
.h26-slk-fields em.up { font-style: normal; font-size: 0.78rem; color: #2EB67D; margin-left: 3px; }
.h26-slk-btn { display: inline-block; margin-top: 9px; padding: 5px 12px; border-radius: 6px; font-size: 0.8rem;
  font-weight: 700; color: var(--sk-text); border: 1px solid rgba(255,255,255,0.22); }
.h26-slk-reacts { display: flex; gap: 5px; margin-top: 8px; }
.h26-slk-reacts span { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; padding: 2px 8px;
  border-radius: 20px; background: rgba(255,255,255,0.06); border: 1px solid transparent; }
.h26-slk-reacts span b { font-size: 0.72rem; font-weight: 700; color: var(--sk-dim); }
.h26-slk-reacts span.mine { background: rgba(29,155,209,0.16); border-color: rgba(29,155,209,0.7); }
.h26-slk-reacts span.mine b { color: #5FB8E8; }
.h26-slk-thread { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 0.78rem; }
.h26-slk-thread b { color: var(--sk-blue); font-weight: 700; }
.h26-slk-thread > span:last-child { color: var(--sk-mute); }
.h26-slk-faces { display: flex; gap: 3px; }
.h26-slk-faces i { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font-style: normal;
  font-size: 0.6rem; font-weight: 800; color: #fff; }
.h26-slk-faces i.a { background: #7C5CBF; }
.h26-slk-faces i.b { background: #C2572F; }
.h26-slk-compose { margin: 0 18px 16px; padding: 11px 13px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18);
  font-size: 0.85rem; color: var(--sk-mute); }
@media (max-width: 720px) {
  .h26-slk-win { grid-template-columns: 1fr; min-height: 0; }
  .h26-slk-side { display: none; }
  .h26-slk-msg { padding: 8px 14px; }
  .h26-slk-fields { gap: 8px 14px; }
  .h26-slk-search { width: 60%; }
  .h26-slk-thread > span:last-child { display: none; }
  .h26-slk-thread b { white-space: nowrap; }
}

/* ── 7b. REVIEWS carousel ──────────────────────────────────────────── */
.h26-tst { --tst-gap: 1.5rem; --tst-per: 1; max-width: 880px; margin: clamp(2.25rem, 4vw, 3rem) auto 0; }
.h26-tst-viewport { overflow: hidden; margin: -16px; padding: 16px; touch-action: pan-y; }
.h26-tst-track { display: flex; gap: var(--tst-gap); transition: transform .45s var(--h26-ease-io); will-change: transform; }
.h26-tst-track.dragging { transition: none; }
.h26-tst-card { flex: 0 0 calc((100% - (var(--tst-per) - 1) * var(--tst-gap)) / var(--tst-per)); margin: 0;
  position: relative; display: flex; flex-direction: column; gap: clamp(1.4rem, 2.6vw, 2rem);
  padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.5rem, 5vw, 3.75rem); border-radius: 22px;
  background: radial-gradient(120% 90% at 0% 0%, rgba(0,212,126,0.06), transparent 55%), var(--card);
  border: 1px solid var(--border2); overflow: hidden;
  transition: border-color .3s var(--h26-ease-io), transform .3s var(--h26-ease-out); user-select: none; }
.h26-tst-card:hover { border-color: rgba(0,212,126,0.28); }
.h26-tst-card::after { content: "\201C"; position: absolute; top: clamp(0.25rem, 1.5vw, 0.75rem); right: clamp(1.25rem, 4vw, 2.75rem);
  font-family: Georgia, serif; font-size: clamp(6rem, 12vw, 9rem); line-height: 1; color: rgba(0,212,126,0.1); pointer-events: none; }
.h26-tst-seg { align-self: flex-start; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.8px;
  text-transform: uppercase; padding: 4px 9px; border-radius: 100px; border: 1px solid; }
.h26-tst-q { margin: 0; flex: 1; }
.h26-tst-q p { margin: 0; font-size: clamp(1.2rem, 2.3vw, 1.6rem); line-height: 1.5; letter-spacing: -0.012em; color: var(--text2); max-width: 36ch; }
.h26-tst-q b { color: var(--text); font-weight: 600; }
.h26-tst-who { display: flex; align-items: center; gap: 14px; padding-top: clamp(1.25rem, 2.4vw, 1.6rem); border-top: 1px solid var(--border); }
.h26-tst-who b { display: block; font-size: 1rem; font-weight: 600; color: var(--text); }
.h26-tst-who b + span { display: block; font-size: 0.86rem; color: var(--text3); margin-top: 2px; }
.h26-tst-av { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 0.86rem; font-weight: 700; color: #07110C; }
/* One colour per audience, used on the tag and the avatar */
.h26-tst-seg.leader  { color: #5EE9B5; border-color: rgba(94,233,181,0.3); background: rgba(94,233,181,0.07); }
.h26-tst-seg.closer  { color: #7DA5FF; border-color: rgba(125,165,255,0.3); background: rgba(125,165,255,0.07); }
.h26-tst-seg.agency  { color: #C4B5FD; border-color: rgba(196,181,253,0.3); background: rgba(196,181,253,0.07); }
.h26-tst-seg.founder { color: #FFC857; border-color: rgba(255,200,87,0.3); background: rgba(255,200,87,0.07); }
.h26-tst-seg.revops  { color: #67E8F9; border-color: rgba(103,232,249,0.3); background: rgba(103,232,249,0.07); }
.h26-tst-seg.setter  { color: #F9A8D4; border-color: rgba(249,168,212,0.3); background: rgba(249,168,212,0.07); }
.h26-tst-seg.finance { color: #FDBA74; border-color: rgba(253,186,116,0.3); background: rgba(253,186,116,0.07); }
.h26-tst-av.leader  { background: linear-gradient(135deg, #00D47E, #5EE9B5); }
.h26-tst-av.closer  { background: linear-gradient(135deg, #7DA5FF, #00D47E); }
.h26-tst-av.agency  { background: linear-gradient(135deg, #A78BFA, #7DA5FF); }
.h26-tst-av.founder { background: linear-gradient(135deg, #FFC857, #00D47E); }
.h26-tst-av.revops  { background: linear-gradient(135deg, #67E8F9, #6366F1); }
.h26-tst-av.setter  { background: linear-gradient(135deg, #F9A8D4, #A78BFA); }
.h26-tst-av.finance { background: linear-gradient(135deg, #FDBA74, #FFC857); }
.h26-tst-ctrl { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.h26-tst-nav { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--card); border: 1px solid var(--border2); color: var(--text2);
  transition: color .2s, border-color .2s, background .2s; }
.h26-tst-nav:hover { color: var(--text); border-color: rgba(0,212,126,0.45); }
.h26-tst-nav:focus-visible, .h26-tst-dots button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.h26-tst-nav svg { width: 15px; height: 15px; }
.h26-tst-dots { display: flex; align-items: center; gap: 7px; }
.h26-tst-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 100px; cursor: pointer;
  background: rgba(255,255,255,0.18); transition: width .35s var(--h26-ease-io), background .35s; }
.h26-tst-dots button.on { width: 22px; background: var(--green); }
@media (max-width: 620px) { .h26-tst-card { border-radius: 18px; } .h26-tst-q p { font-size: 1.12rem; } }
@media (prefers-reduced-motion: reduce) { .h26-tst-track { transition: none; } }

/* ── 8. INTEGRATIONS ───────────────────────────────────────────────── */
.h26-keeps { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.6rem; }
.h26-keep { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 100px;
  border: 1px solid var(--border2); background: var(--card); font-size: 0.87rem; color: var(--text2);
  transition: color .25s, border-color .25s, transform .2s var(--h26-ease-out); }
.h26-keep:hover { color: var(--text); border-color: rgba(0,212,126,0.32); transform: translateY(-2px); }
.h26-keep i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: block; flex: none; }

/* ── 9. FINAL CTA ──────────────────────────────────────────────────── */
.h26-final { position: relative; overflow: hidden; text-align: center;
  padding: clamp(5rem, 10vw, 8rem) 0; border-top: 1px solid var(--border); }
.h26-final::before { content: ""; position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
  width: 940px; height: 620px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,212,126,0.14), transparent 62%); }
.h26-final-in { position: relative; z-index: 1; }
.h26-final h2 { font-size: clamp(2rem, 4.4vw, 3.15rem); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.08; margin-bottom: 1.15rem; max-width: 780px; margin-left: auto; margin-right: auto; }
.h26-final h2 em { font-style: normal; color: var(--green); }
.h26-final p { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--text2); max-width: 520px;
  margin: 0 auto 2.1rem; line-height: 1.65; }
.h26-final-actions { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }

/* ── Scroll reveal ─────────────────────────────────────────────────── */
.h26-rv { opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--h26-ease-out), transform .6s var(--h26-ease-out); }
.h26-rv.in { opacity: 1; transform: none; }
.h26-rv.d1 { transition-delay: .08s; }
.h26-rv.d2 { transition-delay: .16s; }
.h26-rv.d3 { transition-delay: .24s; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .h26-perf { grid-template-columns: 1fr; gap: 2rem; }
  .h26-hero-inner { grid-template-columns: 1fr; gap: 2.75rem; }
  .h26-hero-sub { max-width: none; }
  .h26-checkout-grid, .h26-split { grid-template-columns: 1fr; gap: 2.25rem; }
  .h26-split.flip .h26-split-viz { order: 0; }
  .h26-chain { grid-template-columns: repeat(2, 1fr); }
  .h26-stats { grid-template-columns: repeat(2, 1fr); }
  .h26-grid4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .h26-repq-head { display: none; }
  .h26-repq { grid-template-columns: 1fr auto; row-gap: 4px; }
  .h26-repq-q { grid-column: 1; grid-row: 2; font-size: 0.76rem; }
  .h26-repq > span:last-child { grid-column: 2; grid-row: 1 / span 2; }
  .h26-hero { padding-top: 92px; }
  .h26-hero-actions, .h26-final-actions { flex-direction: column; align-items: stretch; }
  .h26-btn { justify-content: center; width: 100%; }
  .h26-co-opts { grid-template-columns: 1fr; }
  .h26-chain { grid-template-columns: 1fr; }
  .h26-stats { grid-template-columns: 1fr; }
  .h26-grid4 { grid-template-columns: 1fr; }
  .h26-beat { grid-template-columns: 1fr; gap: 0.75rem; }
  .h26-beat-a { justify-self: start; }
  .h26-bridge-links { flex-direction: column; }
  .h26-blink { justify-content: center; }
  .h26-quote::before, .h26-quote::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .h26-rv { opacity: 1; transform: none; transition: none; }
  .h26-hero h1, .h26-hero-sub, .h26-hero-actions, .h26-hero-note { animation: none; }
  .h26-beat { opacity: 1; }
  .h26-link { opacity: 1; transform: none; }
  .h26-spark { stroke-dashoffset: 0; }
  .h26-spark.on { animation: none; }
  .h26-spark2 { opacity: 1; transition: none; }
}







/* ══════════════════════════════════════════════════════════════════
   HERO FILM v5
   Opens tight on two people, two short lines. Pulls back to a split:
   the rep's SLICE /sell on the left, the customer's checkout on the
   right, wired together so the right mirrors the left as the rep
   types. Both panels are modelled on the real screens, measured
   2026-09-16 from staging.useslice.ai/sell and /pay/<link>.
   Note the two products use different action colours: the app's
   primary is #10B981, the customer checkout's is #2B7FFF.
   ══════════════════════════════════════════════════════════════════ */

.h26-hero-inner { grid-template-columns: 1fr; gap: 0; }
.h26-hero-copy { max-width: 760px; margin: 0 auto; text-align: center; }
.h26-hero-copy .h26-hero-sub { margin-left: auto; margin-right: auto; }
.h26-hero-actions { justify-content: center; }

.h26-filmwrap { position: relative; z-index: 1; width: 100%; max-width: 1020px;
  margin: clamp(2rem, 3.5vw, 2.75rem) auto 0;
  animation: h26Up .8s var(--h26-ease-out) .55s backwards; }

.h26-film {
  --app-bg: #050505;
  --app-accent: #10B981;
  --pay-blue: #2B7FFF;
  --app-fg: #FFFFFF;
  --app-border: rgba(255,255,255,0.08);
  --app-muted: rgba(255,255,255,0.4);
  --app-muted2: rgba(255,255,255,0.28);
  --app-surface: rgba(255,255,255,0.04);
  --app-pill: rgba(255,255,255,0.1);
  --app-sans: 'Geist', 'DM Sans', system-ui, sans-serif;
  --app-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 16px; background: var(--app-bg);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 50px 110px rgba(0,0,0,0.6);
  font-family: var(--app-sans); color: var(--app-fg); isolation: isolate;
}
.h26-film::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  transition: background 1.3s var(--h26-ease-io);
  background: radial-gradient(ellipse at 50% 26%, rgba(99,102,241,0.13), transparent 62%); }
.h26-film[data-act="1"]::before { background: radial-gradient(ellipse at 50% 50%, rgba(16,185,129,0.09), transparent 64%); }
.h26-film[data-act="2"]::before { background: radial-gradient(ellipse at 50% 50%, rgba(43,127,255,0.11), transparent 64%); }
.h26-film[data-act="3"]::before { background: radial-gradient(ellipse at 50% 45%, rgba(16,185,129,0.26), transparent 68%); }
.h26-film[data-act="4"]::before { background: radial-gradient(ellipse at 50% 28%, rgba(99,102,241,0.15), transparent 64%); }
.h26-film::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 72%, rgba(0,0,0,0.28)); }

/* Section figure captions. Distinct from the film's own caption layer,
   which is absolutely positioned and hidden until its cue fires. */
.h26-figcap { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.5px;
  color: var(--text3); text-align: center; margin-top: 0.9rem; }

/* ── Captions ──────────────────────────────────────────────────────── */
.h26-capbar { position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  padding: clamp(16px, 2.2vw, 26px) clamp(18px, 3vw, 34px) clamp(18px, 2.4vw, 26px);
  min-height: clamp(52px, 6.6vw, 74px);
  background: linear-gradient(180deg, rgba(0,0,0,0.92) 25%, rgba(0,0,0,0.6) 65%, transparent);
  pointer-events: none; }
.h26-cap { position: absolute; left: clamp(18px, 3vw, 34px); right: clamp(18px, 3vw, 34px);
  top: clamp(16px, 2.2vw, 26px); margin: 0;
  font-family: var(--sans); font-size: clamp(0.94rem, 1.8vw, 1.32rem); font-weight: 600;
  line-height: 1.24; letter-spacing: -0.022em; color: #fff;
  opacity: 0; transform: translateY(-9px); filter: blur(6px);
  transition: opacity .45s var(--h26-ease-out), transform .5s var(--h26-ease-out), filter .45s var(--h26-ease-out); }
.h26-cap.on { opacity: 1; transform: none; filter: blur(0); }
.h26-cap em { font-style: normal; color: var(--app-accent); }
.h26-cap small { display: block; font-size: 0.6em; font-weight: 400; letter-spacing: -0.008em;
  color: rgba(255,255,255,0.6); margin-top: 4px; }

.h26-stagearea { position: absolute; z-index: 2;
  top: clamp(50px, 6.4vw, 72px); left: 0; right: 0; bottom: clamp(12px, 1.8vw, 20px); }
.h26-lens { position: absolute; inset: 0; transform-origin: 50% 0;
  transform: translateY(26%) scale(1.75);
  transition: transform 1.4s cubic-bezier(0.5, 0, 0.18, 1); }
.h26-lens.wide { transform: none; }

/* ── The call, top of frame, until the customer pays ───────────────── */
.h26-callrow { display: flex; flex-direction: column; align-items: center;
  transition: opacity .7s var(--h26-ease-io), transform .7s var(--h26-ease-io); }
.h26-callrow.gone { opacity: 0; transform: translateY(-14px); }
.h26-callers { display: flex; align-items: flex-start; gap: clamp(8px, 1.6vw, 18px); }
.h26-caller { display: flex; flex-direction: column; align-items: center; gap: 5px;
  opacity: .4; transition: opacity .4s var(--h26-ease-io); }
.h26-caller.live { opacity: 1; }
.h26-face { position: relative; width: clamp(38px, 4.9vw, 52px); height: clamp(38px, 4.9vw, 52px); border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid currentColor;
  transition: box-shadow .4s var(--h26-ease-io), transform .4s var(--h26-ease-io); }
.h26-face svg { width: 64%; height: 64%; overflow: visible; }
.h26-face .mouth { transform-box: fill-box; transform-origin: center; }
.h26-caller.live .h26-face { transform: scale(1.06); }
/* Rings radiate off whoever holds the floor. */
.h26-caller.live .h26-face::before, .h26-caller.live .h26-face::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0; pointer-events: none;
  animation: h26Ripple 1.7s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.h26-caller.live .h26-face::after { animation-delay: .6s; }
@keyframes h26Ripple { 0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.9); opacity: 0; } }
.h26-caller.live .h26-face .mouth { animation: h26Talk .3s ease-in-out infinite alternate; }
@keyframes h26Talk { from { transform: scaleY(.45); } to { transform: scaleY(2.8); } }
/* A ring that reads at a glance, not a faint halo */
.h26-caller.rep.live .h26-face { box-shadow: 0 0 0 3px rgba(16,185,129,0.85), 0 0 22px rgba(16,185,129,0.4); }
.h26-caller.cust.live .h26-face { box-shadow: 0 0 0 3px rgba(139,140,247,0.85), 0 0 22px rgba(99,102,241,0.4); }
.h26-caller.rep { color: var(--app-accent); }
.h26-caller.cust { color: #A5A6F6; }
.h26-caller.rep.live .h26-face { box-shadow: 0 0 0 3px rgba(16,185,129,0.35); }
.h26-caller.cust.live .h26-face { box-shadow: 0 0 0 3px rgba(99,102,241,0.35); }
.h26-cname { text-align: center; font-size: 0.72rem; font-weight: 600; color: var(--app-muted2); white-space: nowrap;
  transition: color .4s var(--h26-ease-io); }
.h26-crole { display: block; font-size: 0.6rem; font-weight: 400; white-space: nowrap;
  color: var(--app-muted2); opacity: .75; margin-top: 1px; }
.h26-caller.live .h26-cname { color: var(--app-fg); }
.h26-caller.live .h26-crole { color: currentColor; opacity: 1; }

/* The line being spoken sits between the two people, level with their faces. */
.h26-said { position: relative; flex: none; width: clamp(150px, 21vw, 230px);
  height: clamp(38px, 4.9vw, 52px); margin: 0 clamp(4px, 1vw, 12px); }
.h26-said p { position: absolute; inset: 0; margin: 0; display: flex; align-items: center;
  justify-content: center; text-align: center;
  font-size: clamp(0.82rem, 1.2vw, 0.95rem); line-height: 1.35;
  opacity: 0; transform: translateY(5px);
  transition: opacity .16s var(--h26-ease-io), transform .16s var(--h26-ease-io); }
.h26-said p.on { opacity: 1; transform: none;
  transition: opacity .34s var(--h26-ease-out) .16s, transform .38s var(--h26-ease-out) .16s; }
/* Centred between the pair; the tint and the ripples say who is talking. */
.h26-said p.by-rep { color: #6EE7B7; }
.h26-said p.by-cust { color: #B6B7FA; }

/* ── Acts ──────────────────────────────────────────────────────────── */
.h26-acts { position: absolute; left: 0; right: 0; bottom: 0;
  top: clamp(112px, 14.5vw, 146px); transition: top .7s var(--h26-ease-io); }
.h26-acts.full { top: 0; }
.h26-act { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; opacity: 0; pointer-events: none;
  padding: 0 clamp(16px, 2.6vw, 30px); transition: opacity .5s var(--h26-ease-io); }
.h26-act.on { opacity: 1; }

/* ══ The split: rep on the left, customer on the right ════════════ */
/* Equal 1fr tracks centred the wire, which left the pair looking
   left-heavy because the rep panel is far wider than the handset.
   Sizing all three to content and centring the row balances it. */
.h26-fsplit { display: grid; grid-template-columns: auto auto auto;
  align-items: center; justify-content: center; gap: 0; width: 100%; }
/* Centring each side left a gap either end of the wire, so it floated
   between the panels instead of joining them. Push them together. */
.h26-side { min-width: 0; display: flex; align-items: center; }
.h26-side:first-of-type { justify-content: flex-end; }
.h26-side:last-of-type { justify-content: flex-start; }
/* The phone sits in a wrapper with the Preview tag. Without a width on that
   wrapper it shrink-wraps and the phone's width:100% collapses with it. */
.h26-phonewrap { width: 100%; max-width: 164px; }

/* Left: SLICE /sell */
/* An explicit width. Inside a content-sized grid track a percentage width is
   resolved from the panel's own contents, so it was only as wide as its
   longest nowrap line. Trimming the nav collapsed it to 185px, which is what
   squeezed the Watching panel. */
.h26-app { position: relative; width: 352px; max-width: 100%; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1); background: var(--app-bg);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55); }
.h26-topbar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px;
  background: #000; border-bottom: 1px solid rgba(255,255,255,0.1); }
.h26-tmark { width: 9px; height: 9px; border-radius: 3px; flex: none;
  background: linear-gradient(135deg, var(--app-accent), #6366F1); }
.h26-twordmark { font-size: 0.5rem; font-weight: 700; letter-spacing: .3px; }
.h26-tnav { display: flex; gap: 1px; }
.h26-tnav span { font-size: 0.46rem; font-weight: 500; color: var(--app-muted);
  padding: 2px 5px; border-radius: 4px; white-space: nowrap; }
.h26-tnav span.on { background: var(--app-pill); color: #fff; }
.h26-tbiz { margin-left: auto; font-size: 0.46rem; color: var(--app-muted); white-space: nowrap; }
.h26-appbody { padding: 9px 10px 10px; }
.h26-ptitle { font-size: 0.72rem; font-weight: 600; letter-spacing: -0.02em; }
.h26-flabel { font-size: 0.42rem; font-weight: 500; letter-spacing: .9px; text-transform: uppercase;
  color: var(--app-muted); margin: 8px 0 3px; }
.h26-seg { display: flex; gap: 2px; padding: 2px; border-radius: 7px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--app-border); }
.h26-seg span { flex: 1; text-align: center; font-size: 0.5rem; font-weight: 500; color: var(--app-muted);
  padding: 4px 4px; border-radius: 5px; transition: background .35s var(--h26-ease-io), color .35s; }
.h26-seg span.on { background: var(--app-pill); color: #fff; }
.h26-field { height: 24px; border-radius: 8px; border: 1px solid var(--app-border);
  background: var(--app-surface); display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px; font-size: 0.55rem; color: #fff;
  transition: border-color .4s var(--h26-ease-io), background .4s; }
.h26-field.lit { border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.06); }
.h26-field.ghost { color: var(--app-muted2); }
.h26-field .car { width: 6px; height: 6px; opacity: .5; flex: none; }
.h26-two { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.h26-typing::after { content: ""; display: inline-block; width: 1px; height: 0.8em;
  background: #fff; margin-left: 1px; vertical-align: -0.1em; animation: h26Caret .9s step-end infinite; }
@keyframes h26Caret { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
.h26-genbtn { margin-top: 9px; height: 22px; display: grid; place-items: center;
  border-radius: 8px; font-size: 0.52rem; font-weight: 500;
  background: rgba(255,255,255,0.09); color: var(--app-muted2);
  transition: background .4s var(--h26-ease-io), color .4s, transform .22s var(--h26-ease-out), box-shadow .3s; }
.h26-genbtn { position: relative; }
.h26-genbtn.ready { background: var(--app-accent); color: #000; }
.h26-genbtn.press { transform: scale(.92);
  background: #34D399; box-shadow: 0 0 0 7px rgba(16,185,129,0.32); }
.h26-genbtn.fired { animation: h26Fired .6s var(--h26-ease-out); }
@keyframes h26Fired {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.75); transform: scale(.94); }
  45%  { transform: scale(1.04); }
  100% { box-shadow: 0 0 0 20px rgba(16,185,129,0); transform: scale(1); } }

/* The rep's Watching link panel, modelled on the real one: it slides over
   the Sell form once the link is out and reports what the customer does. */
/* Three quarters of the form's width, so every line has to earn its space. */
.h26-watch { position: absolute; inset: 0 0 0 25%; z-index: 3; border-radius: 10px 0 0 10px;
  background: #080A10; border: 1px solid rgba(255,255,255,0.12);
  box-shadow: -14px 0 40px rgba(0,0,0,0.6);
  padding: 9px 11px 10px; display: flex; flex-direction: column;
  opacity: 0; transform: translateX(14%); pointer-events: none;
  transition: opacity .5s var(--h26-ease-out), transform .55s var(--h26-ease-out); }
.h26-watch.on { opacity: 1; transform: none; }
.h26-app.watching .h26-appbody, .h26-app.watching .h26-topbar {
  filter: blur(3px); opacity: .5;
  transition: filter .45s var(--h26-ease-io), opacity .45s var(--h26-ease-io); }
.h26-appbody, .h26-topbar { transition: filter .45s var(--h26-ease-io), opacity .45s var(--h26-ease-io); }
.h26-wh { display: flex; align-items: center; gap: 6px; }
.h26-wdot { width: 6px; height: 6px; border-radius: 50%; background: var(--app-accent);
  animation: h26Blip 1.6s ease-in-out infinite; }
@keyframes h26Blip { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.h26-wh b { font-size: 0.62rem; font-weight: 600; }
.h26-wurl { font-family: var(--app-mono); font-size: 0.43rem; color: var(--app-muted2);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h26-wamt-l { font-size: 0.44rem; color: var(--app-muted); margin-top: 7px; }
.h26-wamt { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.h26-wamt b { font-size: 0.86rem; font-weight: 600; color: var(--app-accent); letter-spacing: -0.02em; }
.h26-wamt span { font-size: 0.44rem; color: var(--app-muted); border: 1px solid var(--app-border);
  border-radius: 100px; padding: 1px 5px; }
.h26-wfeed { margin-top: 8px; border-top: 1px solid var(--app-border); padding-top: 7px;
  display: grid; gap: 6px; align-content: start; }
.h26-wev { display: grid; grid-template-columns: 8px 1fr; gap: 6px;
  opacity: 0; transform: translateY(5px);
  transition: opacity .4s var(--h26-ease-out), transform .4s var(--h26-ease-out); }
.h26-wev.on { opacity: 1; transform: none; }
.h26-wev i { width: 6px; height: 6px; border-radius: 50%; margin-top: 3px;
  background: var(--app-accent); box-shadow: 0 0 0 2px rgba(16,185,129,0.18); }
.h26-wev.amber i { background: #F0B357; box-shadow: 0 0 0 2px rgba(240,179,87,0.18); }
.h26-wev.blue i { background: var(--pay-blue); box-shadow: 0 0 0 2px rgba(43,127,255,0.18); }
.h26-wev-t { display: flex; align-items: baseline; gap: 6px; }
.h26-wev-t b { font-size: 0.52rem; font-weight: 600; white-space: nowrap; }
.h26-wev-t span { margin-left: auto; font-size: 0.42rem; color: var(--app-muted2); white-space: nowrap; }
.h26-wev-s { display: block; font-size: 0.45rem; color: var(--app-muted); line-height: 1.35; margin-top: 0; }

/* The wire between them */
/* The two panels are one system, so the link between them reads as live:
   a node at each end and a pulse that keeps crossing. */
.h26-wire { width: clamp(44px, 7vw, 92px); position: relative; height: 16px;
  display: flex; align-items: center; }
.h26-wnode { width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,0.22); transition: background .5s var(--h26-ease-io), box-shadow .5s; }
.h26-wnode.a { background: rgba(16,185,129,0.65); box-shadow: 0 0 0 3px rgba(16,185,129,0.14); }
.h26-wire.sent .h26-wnode.b { background: var(--pay-blue); box-shadow: 0 0 0 3px rgba(43,127,255,0.2); }
.h26-wtrack { flex: 1; height: 1px; position: relative; overflow: visible;
  background: linear-gradient(90deg, rgba(16,185,129,0.3), rgba(255,255,255,0.1) 50%, rgba(43,127,255,0.25)); }
.h26-wpulse { position: absolute; top: -2px; left: 0; width: 14px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--app-accent), transparent);
  animation: h26Pulse 2.1s var(--h26-ease-io) infinite; }
@keyframes h26Pulse { 0% { transform: translateX(-10px) scaleX(.6); opacity: 0; }
  25% { opacity: .9; } 70% { opacity: .9; }
  100% { transform: translateX(calc(100% + 10px)) scaleX(1.3); opacity: 0; } }
/* On send the pulse becomes one decisive packet carrying the link across */
.h26-wsend { position: absolute; top: -7px; left: 0; width: 16px; height: 16px; border-radius: 5px;
  background: var(--app-accent); display: grid; place-items: center; color: #000; opacity: 0; }
.h26-wire.send .h26-wsend { animation: h26Fly 1.05s cubic-bezier(0.5,0,0.2,1) forwards; }
.h26-wire.send .h26-wpulse { opacity: 0; }
@keyframes h26Fly { 0% { opacity: 0; transform: translateX(-6px) scale(.5); }
  18% { opacity: 1; transform: translateX(0) scale(1); }
  82% { opacity: 1; transform: translateX(calc(100% - 16px)) scale(1); }
  100% { opacity: 0; transform: translateX(calc(100% - 2px)) scale(1.5); } }

/* Right: the customer's checkout, on a phone */
/* A handset shape, not a squashed card: ~9:19 including the bezel. */
.h26-phone { position: relative; width: 100%; max-width: 164px; border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.16); background: #121214; padding: 6px;
  box-shadow: 0 24px 58px rgba(0,0,0,0.72), inset 0 0 0 1px rgba(255,255,255,0.05);
  opacity: .62; filter: saturate(.75);
  transition: opacity .6s var(--h26-ease-io), filter .6s var(--h26-ease-io), transform 1s var(--h26-ease-io); }
.h26-phone.live { opacity: 1; filter: none; }
.h26-phone.close { transform: scale(1.14); }
/* Hardware: volume pair on the left, wake button on the right */
.h26-phone::before, .h26-phone::after { content: ""; position: absolute; width: 2px;
  background: rgba(255,255,255,0.18); border-radius: 2px; }
.h26-phone::before { left: -2px; top: 62px; height: 34px;
  box-shadow: 0 -24px 0 rgba(255,255,255,0.18); }
.h26-phone::after { right: -2px; top: 78px; height: 30px; }
.h26-notch { width: 42px; height: 4px; border-radius: 3px; background: #000;
  border: 1px solid rgba(255,255,255,0.08); margin: 2px auto 5px; }
/* The screen is a fixed viewport; the page inside it scrolls, as it would. */
.h26-pscreen { border-radius: 19px; background: var(--app-bg); overflow: hidden;
  height: 286px; position: relative; }
.h26-pscroll { padding: 11px 9px 16px; transition: transform .85s var(--h26-ease-io); }
.h26-pscreen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px;
  background: linear-gradient(180deg, transparent, var(--app-bg)); pointer-events: none; }
.h26-pbiz { font-size: 0.48rem; color: rgba(255,255,255,0.5); text-align: center; }
.h26-pamt { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.4px; text-align: center;
  margin-top: 1px; transition: color .4s var(--h26-ease-io); }
.h26-pbadge { display: block; width: fit-content; margin: 5px auto 0; font-size: 0.42rem;
  color: #7FB2FF; background: rgba(43,127,255,0.12); border: 1px solid rgba(43,127,255,0.28);
  border-radius: 100px; padding: 2px 7px; }
.h26-psched { margin-top: 7px; border: 1px solid rgba(43,127,255,0.2); border-radius: 8px;
  background: rgba(43,127,255,0.05); padding: 6px 7px; }
.h26-psched-h { font-size: 0.46rem; font-weight: 600; margin-bottom: 3px; }
.h26-psrow { display: flex; align-items: center; gap: 5px; font-size: 0.44rem;
  color: rgba(255,255,255,0.55); padding: 1px 0; }
.h26-psrow b { width: 9px; height: 9px; border-radius: 50%; flex: none; display: grid;
  place-items: center; font-size: 0.34rem; font-weight: 500;
  background: rgba(43,127,255,0.22); color: #9CC4FF; }
.h26-psrow .v { margin-left: auto; color: rgba(255,255,255,0.75); }
.h26-pfield { height: 19px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05); display: flex; align-items: center; padding: 0 7px;
  font-size: 0.46rem; color: rgba(255,255,255,0.3); margin-top: 5px;
  transition: color .3s, border-color .3s; }
.h26-pfield.filled { color: #fff; border-color: rgba(255,255,255,0.2); }
.h26-pm { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px;
  border: 1px solid var(--app-border); background: var(--app-surface); margin-top: 4px;
  font-size: 0.48rem; color: rgba(255,255,255,0.75); transition: all .35s var(--h26-ease-io); }
.h26-pm.sel { border-color: rgba(43,127,255,0.6); background: rgba(43,127,255,0.12); color: #fff;
  box-shadow: 0 0 0 2px rgba(43,127,255,0.14); }
.h26-pm.hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.07); }
/* Wider chips so the marks sit inside them instead of being clipped. */
.h26-logo { width: 34px; height: 22px; border-radius: 4px; flex: none;
  display: grid; place-items: center; overflow: hidden; }
.h26-logo img { display: block; width: auto; max-width: 28px; }
.h26-logo.card { background: #fff; }
.h26-logo.card img { height: 9px; }
.h26-logo.apple { background: #000; border: 1px solid rgba(255,255,255,0.22); }
.h26-logo.apple img { height: 10px; }
.h26-logo.bank { background: #1E2430; border: 1px solid rgba(255,255,255,0.12); }
.h26-logo.bank img { height: 10px; }
/* Klarna's wordmark is unreadable this small, so use their black K. */
.h26-logo.klarna { background: #FFB3C7; }
.h26-klogo { font-family: var(--app-sans); font-size: 0.92rem; font-weight: 700;
  color: #0A0A0A; line-height: 1; letter-spacing: -0.03em; }
.h26-pbtn { margin-top: 7px; height: 24px; display: grid; place-items: center; border-radius: 10px;
  background: var(--pay-blue); color: #fff; font-size: 0.52rem; font-weight: 600; }
.h26-pbtn.done { background: rgba(16,185,129,0.16); color: var(--app-accent);
  border: 1px solid rgba(16,185,129,0.45); }
.h26-pterms { font-size: 0.4rem; color: var(--app-muted2); text-align: center;
  line-height: 1.5; margin-top: 7px; }
.h26-ppow { font-size: 0.4rem; color: var(--app-muted2); text-align: center; margin-top: 6px; }
.h26-ppow b { color: var(--app-muted); font-weight: 700; letter-spacing: .3px; }
.h26-ptag { display: block; text-align: center; font-family: var(--app-mono); font-size: 0.44rem;
  letter-spacing: .5px; text-transform: uppercase; color: var(--app-muted2); margin-top: 6px;
  transition: color .4s; }
.h26-ptag.sent { color: var(--app-accent); }

/* ══ Money, bank, automations ═════════════════════════════════════ */
.h26-transit { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
/* The customer is on the right, the business account below-left, so the
   money runs down and back the way it came. */
.h26-transit i { position: absolute; height: 2px; border-radius: 2px; right: 6%; opacity: 0;
  transform-origin: 100% 50%;
  background: linear-gradient(270deg, transparent, var(--app-accent), rgba(255,255,255,0.9)); }
.h26-transit.go i { animation: h26Streak .8s cubic-bezier(0.45,0,0.2,1) infinite; }
@keyframes h26Streak { 0% { transform: translate(0, 0) scaleX(.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-360%, 120px) scaleX(1.9); opacity: 0; } }
.h26-coin { position: absolute; width: 11px; height: 11px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 34% 32%, #6EE7B7, var(--app-accent) 62%, #047857);
  box-shadow: 0 0 10px rgba(16,185,129,0.5); }
.h26-transit.go .h26-coin { animation: h26Coin .95s cubic-bezier(0.45,0,0.25,1) infinite; }
@keyframes h26Coin { 0% { transform: translate(0,0) scale(.5); opacity: 0; }
  16% { opacity: 1; }
  100% { transform: translate(-330%, var(--dy, 110px)) scale(1); opacity: 0; } }

.h26-bank { width: min(340px, 92%); border-radius: 14px; border: 1px solid rgba(16,185,129,0.34);
  background: linear-gradient(160deg, rgba(16,185,129,0.13), rgba(16,185,129,0.03));
  padding: clamp(15px, 2.2vw, 22px); text-align: center;
  opacity: 0; transform: scale(.94);
  transition: opacity .55s var(--h26-ease-out), transform .55s var(--h26-spring); }
.h26-bank.on { opacity: 1; transform: none; }
.h26-bank-l { display: block; font-family: var(--app-mono); font-size: 0.6rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--app-muted); }
.h26-bank-n { display: block; font-family: var(--app-mono); font-size: clamp(1.8rem, 4.4vw, 2.9rem);
  font-weight: 500; letter-spacing: -0.04em; color: var(--app-accent); line-height: 1.05; margin: 6px 0 4px; }
.h26-bank-s { display: block; font-size: 0.72rem; color: var(--app-muted); }

.h26-burst { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.h26-burst i { position: absolute; top: 46%; width: 7px; height: 11px; border-radius: 2px; opacity: 0; }
.h26-burst.go i { animation: h26Burst 1.7s cubic-bezier(0.25,0.6,0.3,1) forwards; }
@keyframes h26Burst { 0% { opacity: 0; transform: translate(0,0) scale(.3); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx,0), var(--ty,-140px)) scale(1) rotate(320deg); } }

.h26-flow { width: min(430px, 96%); display: flex; flex-direction: column; gap: 6px; }
.h26-notif { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px;
  border-radius: 13px; background: rgba(26,29,33,0.97); border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 40px rgba(0,0,0,0.6); opacity: 0; transform: translateY(-120%); }
.h26-notif.drop { animation: h26Drop .62s cubic-bezier(0.2, 1.3, 0.4, 1) forwards; }
@keyframes h26Drop { 0% { opacity: 0; transform: translateY(-120%); }
  70% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
/* .drop and .buzz both set the `animation` shorthand, so adding .buzz
   REPLACED h26Drop outright and took its forwards fill with it. The moment
   the buzz ended the notification fell back to its off-screen base state
   and vanished. .landed pins the resting state in plain CSS so nothing
   depends on an animation still being attached. */
.h26-notif.landed { opacity: 1; transform: none; }
.h26-notif.landed.buzz { animation: h26Buzz .5s ease-in-out 1; }
@keyframes h26Buzz { 0%,100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-3px) rotate(-.6deg); } 30% { transform: translateX(3px) rotate(.6deg); }
  45% { transform: translateX(-2px) rotate(-.4deg); } 60% { transform: translateX(2px) rotate(.4deg); }
  80% { transform: translateX(-1px) rotate(0); } }
.h26-nicon { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid;
  place-items: center; background: #fff; position: relative; }
.h26-nbell { position: absolute; right: -5px; top: -5px; width: 14px; height: 14px; border-radius: 50%;
  background: #E01E5A; display: grid; place-items: center; color: #fff; transform-origin: 50% 20%; }
.h26-notif.drop .h26-nbell { animation: h26Ring2 .7s ease-in-out .5s 2; }
@keyframes h26Ring2 { 0%,100% { transform: rotate(0); } 25% { transform: rotate(16deg); }
  50% { transform: rotate(-14deg); } 75% { transform: rotate(9deg); } }
.h26-nbody { display: block; min-width: 0; flex: 1; }
.h26-nhead { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.h26-nhead b { font-size: 0.7rem; color: #fff; font-weight: 700; }
.h26-nch { font-size: 0.62rem; color: rgba(255,255,255,0.5); }
.h26-ntime { margin-left: auto; font-size: 0.58rem; color: rgba(255,255,255,0.45); }
.h26-ntitle { display: block; font-size: 0.76rem; font-weight: 600; color: #fff; }
.h26-ntitle b { color: #2EB67D; font-family: var(--app-mono); font-weight: 500; }
.h26-ntext { display: block; font-size: 0.68rem; color: rgba(255,255,255,0.68); line-height: 1.4; margin-top: 1px; }
.h26-ntext em { font-style: normal; color: rgba(255,255,255,0.92); font-weight: 600; }

/* Four different systems reporting in, so each card carries its own
   chrome rather than all four looking like the same list row. */
.h26-wrow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--app-border); background: rgba(255,255,255,0.03); font-size: 0.71rem;
  position: relative; overflow: hidden;
  opacity: 0; transform: translateX(18px);
  transition: opacity .4s var(--h26-ease-out), transform .45s var(--h26-ease-out),
              border-color .4s var(--h26-ease-io), background .4s; }
.h26-wrow.on { opacity: 1; transform: none; }
.h26-wrow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: currentColor; opacity: .55; }

/* CRM: a record card, indigo spine, stage chip */
.h26-wrow.crm { color: #8B8CF7; background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.2); }
.h26-wrow.crm .h26-wi { background: rgba(99,102,241,0.18); color: #A5A6F6; border-radius: 6px; }
/* Payout: money, so it reads green and leads with the figure */
.h26-wrow.payout { color: var(--app-accent); background: rgba(16,185,129,0.07); border-color: rgba(16,185,129,0.22); }
.h26-wrow.payout .h26-wi { background: rgba(16,185,129,0.18); color: var(--app-accent); border-radius: 50%; }
.h26-wrow.payout .h26-amt { font-family: var(--app-mono); font-size: 0.86rem; font-weight: 500;
  color: var(--app-accent); }
/* Forecast: a dashboard tile with a little chart */
.h26-wrow.fcast { color: #7DA5FF; background: rgba(43,127,255,0.06); border-color: rgba(43,127,255,0.2); }
.h26-wrow.fcast .h26-wi { background: rgba(43,127,255,0.16); color: #7DA5FF; border-radius: 4px; }
.h26-spark { display: flex; align-items: flex-end; justify-content: flex-end; gap: 2px; height: 16px; }
.h26-spark i { width: 3px; border-radius: 1px; background: currentColor; opacity: .45; }
.h26-spark i:last-child { opacity: 1; }
/* Email: a client row, amber spine, subject line */
.h26-wrow.mail { color: #F0B357; background: rgba(240,179,87,0.06); border-color: rgba(240,179,87,0.2); }
.h26-wrow.mail .h26-wi { background: rgba(240,179,87,0.16); color: #F0B357; border-radius: 6px; }

.h26-wi { width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  transition: all .4s var(--h26-ease-io); }
/* Text takes the slack so the trailing value column lines up row to row. */
.h26-wt { min-width: 0; flex: 1; }
.h26-wrow .h26-amt, .h26-wrow .h26-spark { flex: none; width: 72px; text-align: right; }
.h26-wt b { display: block; font-weight: 600; color: var(--app-fg); }
.h26-wt span { display: block; font-family: var(--app-mono); font-size: 0.58rem;
  color: var(--app-muted2); margin-top: 1px; }
.h26-wcheck { flex: none; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; position: relative; }
.h26-wcheck .sp { width: 12px; height: 12px; border-radius: 50%;
  border: 1.6px solid rgba(255,255,255,0.18); border-top-color: rgba(255,255,255,0.6);
  animation: h26Spin .8s linear infinite; }
.h26-wrow.done .h26-wcheck .sp { display: none; }
.h26-wcheck .ck { position: absolute; inset: 0; display: grid; place-items: center;
  color: currentColor; opacity: 0; transform: scale(.4); transition: all .35s var(--h26-spring); }
.h26-wrow.done .h26-wcheck .ck { opacity: 1; transform: scale(1); }
@keyframes h26Spin { to { transform: rotate(360deg); } }

/* ── Cursor ────────────────────────────────────────────────────────── */
.h26-cursor { position: absolute; z-index: 7; width: 17px; height: 17px; margin: -2px 0 0 -2px;
  pointer-events: none; opacity: 0; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.85));
  transition: left .7s var(--h26-ease-io), top .7s var(--h26-ease-io), opacity .35s; }
.h26-cursor.on { opacity: 1; }
.h26-cursor::after { content: ""; position: absolute; left: -6px; top: -6px; width: 28px; height: 28px;
  border-radius: 50%; border: 2px solid var(--pay-blue); opacity: 0; transform: scale(.3); }
.h26-cursor.click::after { animation: h26Ring .6s var(--h26-ease-out); }
@keyframes h26Ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.2); } }
.h26-cursor.rep::after { border-color: var(--app-accent); }
.h26-ctag { position: absolute; left: 14px; top: 14px; white-space: nowrap;
  font-size: 0.58rem; font-weight: 600; padding: 2px 7px; border-radius: 100px;
  background: #6366F1; color: #fff; opacity: 0; transform: scale(.85);
  transform-origin: 0 0; transition: opacity .3s, transform .3s var(--h26-spring); }
.h26-cursor.tagged .h26-ctag { opacity: 1; transform: scale(1); }
.h26-cursor.rep .h26-ctag { background: var(--app-accent); color: #04120C; }

/* While a seek replays cues, everything snaps rather than tweening, so
   the frame lands on the target instantly instead of animating toward it. */
.h26-film.seeking, .h26-film.seeking * { transition: none !important; }

/* ── Scrubber: top of frame, clickable and draggable ───────────────── */
/* A deep hit zone: the bar sits at the very top of the frame, so when the
   film scrolls under the site's fixed nav the lower part stays reachable. */
.h26-scrub { position: absolute; left: 0; right: 0; top: 0; height: 28px; z-index: 12;
  cursor: pointer; touch-action: none; }
.h26-scrub:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -2px; }
.h26-scrub-rail { position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: rgba(255,255,255,0.14); transition: height .18s var(--h26-ease-out); }
.h26-scrub i { position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--app-accent); transition: height .18s var(--h26-ease-out); }
.h26-scrub .tick { position: absolute; top: 0; width: 2px; height: 3px;
  background: rgba(0,0,0,0.75); transition: height .18s var(--h26-ease-out); }
.h26-scrub-knob { position: absolute; top: -3px; left: 0; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.6);
  opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s var(--h26-spring); }
.h26-scrub:hover .h26-scrub-rail, .h26-scrub:hover i, .h26-scrub:hover .tick,
.h26-scrub.dragging .h26-scrub-rail, .h26-scrub.dragging i, .h26-scrub.dragging .tick { height: 5px; }
.h26-scrub:hover .h26-scrub-knob, .h26-scrub.dragging .h26-scrub-knob,
.h26-scrub:focus-visible .h26-scrub-knob { opacity: 1; transform: scale(1); }
.h26-scrub-tip { position: absolute; top: 12px; left: 0; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--sans); font-size: 0.62rem; font-weight: 600; color: #fff;
  background: rgba(0,0,0,0.85); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px; padding: 3px 8px; pointer-events: none;
  opacity: 0; transition: opacity .18s; }
.h26-scrub:hover .h26-scrub-tip, .h26-scrub.dragging .h26-scrub-tip { opacity: 1; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .h26-film { aspect-ratio: 4 / 3.5; }
  .h26-lens { transform: translateY(29%) scale(1.5); }
  .h26-tnav span:nth-child(n+4) { display: none; }
}
@media (max-width: 620px) {
  .h26-film { aspect-ratio: auto; min-height: 584px; }
  .h26-capbar { padding: 15px 13px 16px; min-height: 58px; }
  .h26-cap { left: 13px; right: 13px; top: 15px; font-size: 0.9rem; }
  .h26-stagearea { top: 62px; bottom: 12px; }
  .h26-lens { transform: translateY(33%) scale(1.15); }
  .h26-callers { gap: 10px; }
  .h26-cname { font-size: 0.56rem; }
  .h26-said { width: 150px; margin: 0; }
  .h26-said p { font-size: 0.76rem; }
  .h26-acts { top: 126px; }   /* clears the two-line dialogue above it */
  /* Both panels stacked overflow the frame here, so the phone takes over
     from the rep's screen at the moment the link is sent. */
  .h26-fsplit { grid-template-columns: 1fr; gap: 8px; justify-items: center; }
  .h26-side:first-of-type, .h26-side:last-of-type { justify-content: center; }
  .h26-wire { display: none; }
  .h26-app { max-width: 300px; }
  .h26-phone { max-width: 158px; }
  .h26-phonewrap { max-width: 158px; }
  .h26-pscreen { height: 276px; }
  .h26-live { display: none; }
  .h26-fsplit.sent .h26-side:first-child { display: none; }
  .h26-fsplit:not(.sent) .h26-side:last-child { display: none; }
  .h26-flow { width: 96%; }
  .h26-wrow:nth-child(n+5) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .h26-filmwrap { animation: none; }
  .h26-lens, .h26-phone, .h26-cap, .h26-cursor, .h26-said p, .h26-acts { transition: none; }
  .h26-cap { filter: none; }
  .h26-transit.go i, .h26-transit.go .h26-coin,
  .h26-burst.go i, .h26-wcheck .sp, .h26-notif.drop, .h26-notif.buzz,
  .h26-notif.drop .h26-nbell, .h26-wire.send i { animation: none; }
  .h26-notif { opacity: 1; transform: none; }
  .h26-burst, .h26-transit { display: none; }
}

/* The 20% larger hero title keeps "high performing" on one line down to 320px phones. */
@media (max-width: 360px) { .h26-hero h1 { font-size: 2.55rem; } }

/* ── Sales teams: who runs on SLICE (one deal, the people on it) ───── */
/* Selectors carry #roles so they beat the page's .fr reset. */
.fr #roles { padding: clamp(4.5rem, 9vw, 7.5rem) 0; background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
#roles .h26 { margin: 0 auto; padding-left: clamp(1.25rem, 4vw, 2rem); padding-right: clamp(1.25rem, 4vw, 2rem); }
#roles .h26-head { margin: 0 auto clamp(2.25rem, 4.5vw, 3rem); max-width: 720px; }
#roles .h26-eyebrow { margin-bottom: 0.9rem; }
#roles .h26-h2 { margin-bottom: 1rem; }
#roles .h26-deal { max-width: 760px; margin: 0 auto; border-radius: 20px; background: var(--card);
  border: 1px solid var(--border2); box-shadow: 0 30px 70px rgba(0,0,0,0.35); overflow: hidden; }
#roles .h26-deal-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.015); }
#roles .h26-deal-top b { font-size: 1.1rem; font-weight: 700; color: var(--text); }
#roles .h26-deal-k { display: block; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text3); margin-bottom: 2px; }
#roles .h26-deal-amt { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 1.35rem; color: var(--text); }
#roles .h26-deal-paid { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; color: var(--green);
  background: var(--green-dim); border: 1px solid rgba(0,212,126,0.3); border-radius: 100px; padding: 3px 10px; }
#roles .h26-deal-sub { padding: 1rem 1.5rem 0.25rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text3); }
#roles .h26-deal-list { list-style: none; margin: 0; padding: 0.25rem 1.5rem 0.5rem; position: relative; }
/* the thread that runs through everyone on the deal */
#roles .h26-deal-list::before { content: ""; position: absolute; left: calc(1.5rem + 19px); top: 1.6rem; bottom: 1.6rem;
  width: 1px; background: linear-gradient(var(--border2), var(--border2)); }
#roles .h26-deal-p { --pc: #7DA5FF; position: relative; display: grid; grid-template-columns: 38px 1fr auto; align-items: center;
  gap: 16px; padding: 0.95rem 0; border-bottom: 1px solid var(--border); }
#roles .h26-deal-p:last-child { border-bottom: 0; }
#roles .h26-deal-p.mkt { --pc: #F9A8D4; }
#roles .h26-deal-p.set { --pc: #7DA5FF; }
#roles .h26-deal-p.close { --pc: #00D47E; }
#roles .h26-deal-p.sup { --pc: #FFC857; }
#roles .h26-deal-p.ops { --pc: #C4B5FD; }
#roles .h26-deal-ic { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--pc); background: var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 45%, transparent),
  0 0 0 4px var(--card); }
#roles .h26-deal-ic::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--pc) 13%, transparent); }
#roles .h26-deal-ic svg { position: relative; width: 18px; height: 18px; }
#roles .h26-deal-when { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--pc); margin-bottom: 3px; }
#roles .h26-deal-who b { display: block; font-size: 1rem; font-weight: 600; color: var(--text); }
#roles .h26-deal-who em { font-style: normal; font-weight: 400; color: var(--text3); font-size: 0.9rem; }
#roles .h26-deal-what { display: block; font-size: 0.88rem; color: var(--text2); margin-top: 2px; }
#roles .h26-deal-tag { font-family: var(--mono); font-size: 0.74rem; white-space: nowrap; color: var(--text);
  padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--border2); }
#roles .h26-deal-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: rgba(0,212,126,0.05); font-size: 0.88rem; color: var(--text2); }
#roles .h26-deal-foot b { font-family: var(--mono); font-weight: 500; color: var(--green); }
@media (max-width: 560px) {
  #roles .h26-deal-top, #roles .h26-deal-foot { padding-left: 1.1rem; padding-right: 1.1rem; }
  #roles .h26-deal-sub { padding-left: 1.1rem; }
  #roles .h26-deal-list { padding-left: 1.1rem; padding-right: 1.1rem; }
  #roles .h26-deal-list::before { left: calc(1.1rem + 19px); }
  #roles .h26-deal-p { grid-template-columns: 38px 1fr; row-gap: 8px; }
  #roles .h26-deal-tag { grid-column: 2; justify-self: start; }
}